(인터랙티브 웹 페이지 만들기) Chapter5

Posted Oct 22, 2023

800, "height"=>500}" class="preview-img" alt="Preview Image" w="1200" h="630" >

By Jogyejin 22 min read

Chap1. 자바 스크립트 시작하기

자바 스크립트를 사용하기 위해서는 HTML 파일 내부에 스크립트 코드를 작성하거나, 외부의 자바스크립트 파일을 만들어서 HTML 파일과 연동해야 한다

자바와 자바스크립트의 차이는 무엇일까?

구분	자바	자바스크립트
`객체지향`	자바는 객체지향 프로그래밍 언어이며 객체들 사이의 관계를 기반으로 특정한 행동들이 이루어진다	자바스크립트는 객체지향 스크립트 언어이다 객체를 이용한다는 부분은 자바와 동일하다
`실행환경`	자바 애플리케이션이나 프로그램은 자바 가상기계(JVM) 위에서 실행된다 JVM환경을 생성하기 위해서는 시스템에 JRE, JDK를 설치해야 한다	자바스크립트 웹 애플리케이션은 웹 브라우저 위에서 실행되며 추가적인 환경 설정은 필요하지 않다
`모바일 애플리케이션`	초기의 휴대전화용 애플리케이션들은 대부분 자바로 작성되어있으며, 안드로이드와 심비안 같은 스마트폰 운영체제에서도 자바를 지원하고 있다	자바스크립트를 이용해서 모바일 애플리케이션을 만들려면 만들 수는 있지만 몇 가지 제약이 있다, 자바 스크립트를 모바일 또는 운영체제에서 실행하려면 네이티브 코드로 변환이 필요하다
`컴파일`	자바는 프로그래밍 언어로 컴퓨터가 이해할 수 있도록 컴파일이 되어야 한다	자바스크립트는 텍스트로 쓰인 코드로도 실행될 수 있는 스크립트 언어이다

HTML 파일 내부에 자바스크립트 연결하기

[Console 기능을 활용하여 실습]

        
      
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">
<title>Javascript</title>
<link rel="stylesheet" href="css/style.css">
<script>
console.log("Hello world");
</script>
</head>
</html>

위와 같이 <body> 영역보다 상위인 <head> 영역에 자바스크립트를 넣으면 실행은 되지만 웹 브라우저는 HTML 파일을 위에서부터 순서대로 코드를 읽기 때문에 <body>영역을 자바스크립트가 알지 못한다(먼저 생성되었기 때문)

[Error 예제]

Check Example code html.

        
      
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">
<title>Javascript</title>
<script>
const title = document.querySelector("#title");
console.log(title);
</script>
</head>
<body>
<h1 id="title">Hello World</h1>
</body>
</html>

위 소스 또한 head에서 먼저 변수를 선언해서 title이라는 식별 데이터를 가져와서 정의하려 했지만 body영역이 생성되기 전이기 때문에 null 값이 들어간다

[수정 예제]

Check Example code html.

        
      
ex02
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">
<title>Javascript</title>
</head>
<body>
<h1 id="title">Hello World</h1>
<script>
const title = document.querySelector("#title");
console.log(title);
</script>
</body>
</html>

HTML 파일과 외부 자바스크립트 연결하기

[ 외부 자바스크립트 예제 1 ]

Check Example code html.

        
      
ex03
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">
<title>Javascript</title>
</head>
<body>
<h1 id="title">Hello World</h1>
<script src="/script/script.js"></script>
</body>
</html>

위 방법은 script 파일을 분리 후 body안에 script 파일을 불러오는 방식으로 예전에는 사용하였으나 요즘은 사용하지 않는 방식이다 최근 실무에서는 아래 예제 2번과 같이 사용한다

[ 외부 자바스크립트 예제 2 ]

Check Example code html.

        
      
ex04
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">
<title>Javascript</title>
<script defer src="/script/script.js"></script>
</head>
<body>
<h1 id="title">Hello World</h1>
</body>
</html>

위 방식은 head 부분에 외부 스크립트를 정의하여 사용하는 방식으로 body 영역을 다 실행한 후 해당 스크립트를 실행한다

Chap2. 자바 스크립트로 HTML 요소 선택하기

`document.querySelector()`

querySelector란 무엇?
자바 스크립트에서 Html의 클래스 이름 및 태그(요소)를 갖고 오기 위해서 querySelector를 많이 사용한다 단일 요소는 바로 탐색할 수 있지만 요소를 여러개 탐색하려면 하기 querySelectorAll을 이용하는것이 효과적이다

        
const box2 = document.querySelector("#wrap .box2");
console.log(box2);

        
      
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">
<title>Javascript</title>
<script defer src="/script/script.js"></script>
</head>
<body>
<section id="wrap">
<article class="box1">Text1</article>
<article class="box2">Text2</article>
<article class="box3">Text3</article>
</body>
</html>

document.querySelectorAll()

querySelectorAll란 무엇?
querySelectorAll문을 이용해서 요소를 여러개 탐색하면 NodeList라는 묶음의 결괏값이 나온다 해당 Nodelist를 사용해서 반복문으로 요소를 하나씩 선택할 수 있다

        
      
const items = document.querySelector("#wrap .article");
for(let item of items){
console.log(item);
}

        
      
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">
<title>Javascript</title>
<script defer src="/script/script.js"></script>
</head>
<body>
<section id="wrap">
<article class="box1">Text1</article>
<article class="box2">Text2</article>
<article class="box3">Text3</article>
</body>
</html>

변수

데이터를 저장하는 공간을 변수라고하며 다양한 데이터를 지정하고 담게 되는데 어떤 데이터를 담을것인지를 자료형에 따라 지정된다

변수명 네이밍 표기법

헝가리안 표기법(hungarian case)
카멜 표기법(camelcase)
파스칼 표기법(pascal case)
언더바 표기법(snake_case)

헝가리안 표기법(hungarian case) Microsoft 사의 한 헝가리인 개발자가 사용하던 변수명에서 유래된 변수명이다 변수의 자료형을 변수명의 접두어로 붙이는 방식으로 간단하게 변수명만 보고 자료형을 인식할 수 있는 방식가독성이 떨어지고 최근에는 개발도구의 발전으로 많이 쓰이지 않는 방식
1 2 3 * 헝가리안 표기법 * public int intMem; private String strAdd;

카멜 표기법(camelcase)단어와 단어 사이를 대문자로 구분하는 표기법이며 낙타의 혹을 닮아서 낙타(camel) 표기법으로 명명되었다 즉, 첫 단어만 소문자로 지정하고 단어와 단어 사이 뒤의 단어의 첫 글자를 대문자로 표기한다
1 2 3 * 카멜 표기법 * public int myMemCount; private String myHomeAdd;

파스칼 표기법(pascal case) 모든 단어의 첫 글자만을 대문자로 표기한다
1 2 3 * 파스칼 표기법 * public int MyMemCount; private String MyHomeAdd;

언더바 표기법(snake_case) 단어와 단어 사이에 _(언더바)를 이용해서 구분 표기한다
1 2 3 * 언더바 표기법 * public int My_Mem_Count; private String My_Home_Add;

변수 초기화(Initialize)

변수를 선언하고 값을 넣지 않으면 해당 변수에는 아무 의미없는, 알수없는 값이 들어 있으며 흔히 쓰레기 값 혹은 NULL값 이라고 부른다

변수선언과 함께 데이터를 넣어주는것을 변수선언과 함께 초기화(Initialize)한다고 하며 초기화시 얻는 이점은 아래와 같다

Null값으로 인한 이슈로부터 해방된다
예기치못한 이슈로부터 해방된다

자바스크립트로 스타일 제어하기

HTML요소를 자바스크립트를 활용해서 선택 후 변수에 데이터를 넣고 해당 변수를 활용하여 HTML요소의 스타일을 제어해본다

        
const box2 = document.querySelector("#wrap .box2");

box2.style.width = "10%";
box2.style.height = "200px";
box2.style.backgroundColor = "blue";

        
      
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">
<title>Javascript</title>
<script defer src="/script/script.js"></script>
</head>
<body>
<section id="wrap">
<article class="box1">Text1</article>
<article class="box2">Text2</article>
<article class="box3">Text3</article>
</body>
</html>

자바스크립트로 이벤트 연결하기

자바스크립트를 사용해서 웹 페이지를 출력한 이후에도 사용자 행동(이벤트)에 따라 웹의 요소를 동적으로 변경할 수 있다

클릭 이벤트 연결하기

[ 자바스크립트 클릭 이벤트 예제 ]

Check Example code html.

        
      
const link = document.querySelector("a");

link.addEventListener("click", (e)=>{
e.preventDefault();
console.log("링크를 클릭함!");
}
)

        
      
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">
<title>Javascript</title>
<script defer src="/script/ex05.js"></script>
</head>
<body>
<a href="https://www.naver.com">click</a>
</body>
</html>

addEventListener란 무엇?
위 예제 스크립트 소스에서 link 변수에 담겨 있는 a 요소에 .addEventListener() 문을 연결해서 클릭이벤트를 지정했는데 해당 addEventListener 문은 요소명.addEventListener(“이벤트명”,(전달될 값) => {실행할 구문});으로 사용한다 (이벤트명)은 등록할 이벤트명을 임의로 지정하면 되며 (전달될 값)은 리스너로 불리며 이벤트가 발생할 때 응답해서 실행할 동작은 의미한다

preventDefault란 무엇?
이벤트가 발생하면 자동으로 이벤트 객체라는 값이 화살표 함수로 자동 전달하게되는데 preventDefault문은 이벤트의 기능을 실행하지말라는 명령어

호버 이벤트 연결하기

[ 자바스크립트 호버 이벤트 예제 ]

Check Example code html.

        
      
/* 이벤트 변환시 마다 체크 addEventListener */
var box = document.getElementById('box');
//마우스 오버
box.addEventListener('mouseover',function(){
box.setAttribute('class','hover');
});
//마우스 아웃
box.addEventListener('mouseout',function(){
box.removeAttribute('class');
});

        
      
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hover(mouseover + mouseout)</title>
<style>
#box{
width:100px; height: 100px;
border:3px solid black;
}
#box.hover{
    background:orange;
    color:white;
}
</style>
<script defer src="/script/ex06.js"></script>        
</head>
<body>
<div id="box">
<p>마우스를 올려 주세요</p>
</div>
</body>
</html>

setAttribute란 무엇?
.setAttribute()는 선택한 요소(element)의 속성(attribute) 값을 정한다 요소명.setAttribute( ‘attributename’, ‘attributevalue’ )문법이며 attributename에는 속성 이름을, attributevalue에는 속성값을 넣는다 요소의 속성을 제거하기 위해서는 .removeAttribute() 메서드를 사용한다

자바스크립트로 클래스 제어하기

자바스크립트로 HTML 요소를 선택해서 변수에 저장한 다음 이벤트를 연결하여 스타일을 변경하는일은 실무에서 사용되지 않는다 CSS파일에서 정의한 스타일 구문이 우선순위에서 밀려나기 때문에 유지보수에 문제가 발생할 수 있기 때문이다 따라서 실무에서는 CSS파일에 특정 클래스 이름에 따라 스타일이 설정되게 정의하고 자바스크립트에서는 해당 CSS파일의 클래스 이름만 추가 또는 제거하는 방법으로 스타일을 변경한다

[ 자바스크립트 클래스 제어 예제 ]

Check Example code html.

        
      
#wrap {
width: 500px;
height: 500px;
border: 1px;
padding: 100px;
box-sizing: border-box;
margin: 100px auto;
}

#wrap article{
width: 100%;
height: 100%;
background: aqua;
transition: 1s;
}

#wrap.on article {
background: hotpink;
}

        
      
const wrap = document.querySelector("#wrap");
const box = wrap.querySelector("article");

wrap.addEventListener("click", () => {
//box.style.backgroundColor = "hotpink";
//wrap.classList.add("on");
let isOn = wrap.classList.contains("on"); 
//classList.contains는 특정 클래스가 선택 요소에 있으면 true 없으면 false를 반환해주는 내장 모듈이다
console.log(isOn);

if(isOn){
wrap.classList.remove("on");
}
else{
wrap.classList.add("on");
}
})

        
      
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript Test</title>
<script defer src="/script/ex07.js"></script>
<link rel="stylesheet" href="./css/ex07.css">
</head>
<body>
<section id="wrap">
<article></article>
</section>
</body>
</html>

함수를 활용하여 코드 패키징하기

함수 정의 및 호출로 기능 재활용하기

자주 쓰는 코드를 매번 다시 입력하는것이 아닌 코드를 함수로 패키징해서 재활요하는 방법에대해 알아본다 함수란 자주 실행하는 코드를 function 키워드와 임의의 이름을 붙여서 정의한 코드의 묶음이다

        
function plus (num1, num2){
console.log(num1 + num2);
}

plus(2,3);

매개변수란 함수 외부에서 내부로 값을 전달하여 받을 수 있는 임시 데이터 공간이라고 볼 수 있다 인수란 매개변수를 통해 실제 함수 외부에서 내부로 전달되는 값을 인수(argument) 또는 파라미터라고 불린다

[ 자바스크립트 함수를 활용하여 코드 패키징 예제 ]

Check Example code html.

        
      
/*버튼 비활성화 */
ul li{
color: gray;
cursor: pointer;
}

/*버튼 활성화 */
ul li.on{
color: blueviolet;
cursor: pointer;
}

section {
width: 300px;
height: 200px;
border: 1px solid #888;
margin: 50px;
position: relative;
perspective: 600px; /* 원근감 설정 */
}

/*박스 비활성화 */
section article{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 50px;
opacity: 0;
transform: rotateY(-180deg);
transition: 0.5s;
}
/*박스 활성화 */
section article.on {
opacity: 1;
transform: rotateY(0deg);
}

/*박스 순서별로 배경색 지정 */
section article:nth-of-type(1){
background: aqua;
}

section article:nth-of-type(2){
background: hotpink;
}
section article:nth-of-type(3){
background: orange;
}

        
      
const btns = document.querySelectorAll(".btns li");
const boxs = document.querySelectorAll("section article");

// 버튼의 개수만큼 반복하며 클릭 이벤트 연결
for(let i=0; i<btns.length; i++){

// 각 버튼을 클릭할 때마다
btns[i].addEventListener("click", e=>{
//각 인수로 순섯값과 버튼, 박스 그룹을 넣어서
//activation 함수 호출
activation(i, btns);
activation(i, boxs);
})
}

// 1번째 인수로 순섯값, 2번째 인수로 그룹을 전달받아
function activation(index, list){
//인수로 받은 요소의 그룹 개수만큼 반복하며 비활성화
for(let el of list){
el.classList.remove("on");
}
//1번째 인수로 받은 순서에 해당하는 그룹의 요소만 찾아서 활성화
list[index].classList.add("on");
}

        
      
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript Test</title>
<script defer src="/script/ex08.js"></script>
<link rel="stylesheet" href="./css/ex08.css">
</head>
<body>
<ul class="btns">
<li class ="on">button1</li>
<li>button2</li>
<li>button3</li>
</ul>

<section>
<article class ="on">BOX1</article>
<article>BOX2</article>
<article>BOX3</article>
</section>
</body>
</html>

HTML 요소의 속성값 제어하기

HTML 요소에는 단지 태그만 있는 것이 아닌 태그의 src, alt, href 같은 다양한 속성값이 존재하는데 자바스크립트에서 해당 속성값들을 제어가 가능하다

[ 자바스크립트로 HTML요소의 속성값 제어하기 예제 ]

Check Example code html.

        
      
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript Test</title>
<script defer src="/script/ex09.js"></script>
</head>
<body>
<a href="https://www.naver.com">네이버</a>
</body>
</html>

        
      
const link = document.querySelector("a");
let link_href = link.getAttribute("href");
console.log(link_href)
const new_href = "https://www.google.com";
link.setAttribute("href", new_href);
let link_href = link.getAttribute("href");
console.log(link_href);

자바스크립트로 사용자 브라우저 판단하기

모든 브라우저에는 navigator라는 객체가 있는데 이 객체 안에는 userAgent가 존재하고 여기에는 브라우저의 정보값이 문자 형태로 저장되어있다 해당 객체를 활용해서 자바스크립트로 사용자가 어떤 브라우저로 웹 페이지에 접속하는지 확인이 가능하다

[ 자바스크립트로 사용자 브라우저 판단하기 예제 ]

Check Example code html.

        
      
const version = navigator.userAgent;
console.log(version);

const isIE = /Edg/i.test(version);
console.log(isIE);

if(isIE){
    alert("해당 브라우저는 Edge브라우저 입니다 이 웹 페이지는 크롬에서만 사용하실 수 있습니다")
}

        
      
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript Test</title>
<script defer src="/script/ex10.js"></script>
</head>
<body>
<a href="https://www.naver.com">네이버</a>
</body>
</html>

Develop, Javascript

Javascript

This post is licensed under CC BY 4.0 by the author.

Chap1. 자바 스크립트 시작하기

자바와 자바스크립트의 차이는 무엇일까?

HTML 파일 내부에 자바스크립트 연결하기

HTML 파일과 외부 자바스크립트 연결하기

Chap2. 자바 스크립트로 HTML 요소 선택하기

document.querySelector()

document.querySelectorAll()

변수

변수명 네이밍 표기법

변수 초기화(Initialize)

자바스크립트로 스타일 제어하기

자바스크립트로 이벤트 연결하기

클릭 이벤트 연결하기

호버 이벤트 연결하기

자바스크립트로 클래스 제어하기

함수를 활용하여 코드 패키징하기

함수 정의 및 호출로 기능 재활용하기

HTML 요소의 속성값 제어하기

자바스크립트로 사용자 브라우저 판단하기

Trending Tags

`document.querySelector()`