자바스크립트
: HTML 페이지에서 사용자 반응 등을 처리하는 스크립트를 작성하는 언어
1) 내부 선언 방식
- script 태그를 사용하여 HTML 페이지 내부에 코드 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="clickBtn">Click</button>
<h1 id="heading">Hello world</h1>
<!-- 내부 선언 방식 -->
<script>
// id 속성이 clickBtn인 요소인 DOM 셀렉트
// id 값이 같은 요소는 1개 뿐
var clickBtn = document.getElementById('clickBtn');
var heading = document.getElementById('heading');
// 그 외 같은 요소들 묶어서 사용하고 싶으면 id 아닌 class 로
// 변수는 aa는 리스트 형태로 클래스 속성이 aa인 모든 요소들을 담음
var aa = document.getElementsByClassName("aa");
console.log(clickBtn);
console.dir(clickBtn);
//선택된 DOM 요소에 이벤트 핸들러 걸기
clickBtn.onclick = function(event) {
// 클릭 이벤트가 발생하면 이벤트를 콘솔에 출력
console.log(heading);
heading.style.backgroundColor = 'yellow';
}
</script>
</body>
</html>2) 외부 선언 방식
- script 태그에 src 속성에 파일 경로를 입력하여 HTML 페이지로 불러옴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="clickBtn">Click</button>
<h1 id="heading">Hello world</h1>
<!-- 외부 선언 방식 -->
<script src="./day01ex02.js"> </script>
</body>
</html>day01ex02.js (외부파일)
// id 속성이 clickBtn인 요소인 DOM 셀렉트
var clickBtn = document.getElementById('clickBtn');
// id 값이 같은 요소는 1개 뿐
// 그 외 같은 요소들 묶어서 사용하고 싶으면 id 아닌 class 로
var heading = document.getElementById("heading");
console.log(clickBtn);
console.dir(clickBtn);
//선택된 DOM 요소에 이벤트 핸들러 걸기
clickBtn.onclick = function(event) {
// 클릭 이벤트가 발생하면 이벤트를 콘솔에 출력
document.bgColor = "gray";
document.title = "Hello";
console.log(heading);
heading.style.backgroundColor = 'yellow';
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- ul: 순서가 없는 목록 -->
<ul type="circle">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
<!-- ol: 순서가 있는 목록 -->
<ol type="a" class="menu">
<li>title01</li>
<li>title02</li>
<li>title03</li>
</0l>
<script>
// 문서 내의 모든 li 요소들를 선택하여 liList가 참조하도록 한다.
// document.getElementsByClassName의 결과는 List가 됨
var olTag = document.getElementsByClassName("menu");
// console.log(olTag[0]);
var liList = olTag[0].getElementsByTagName("li");
// console.log(liList[0]);
// console.log(liList[1]);
// console.log(liList[2]);
// liList의 모든 요소에 이벤트 핸들러 한 번에 추가
for(var i = 0; i < liList.length; i++) {
// console.log(liList[i]);
liList[i].onclick = function(event) {
console.log(event.target.innerText);
}
}
// ul 응용 버전
// ul 요소를 클릭 하면 요소의 냐용 값으로 배경 색 변경
var ulTag = document.getElementsByTagName("ul");
var liList2 = ulTag[0].getElementsByTagName("li");
for(var liTag of liList2) {
liTag.onclick = function(event) {
// this는 객체 자신
var colorName = this.innerText;
document.body.style.backgroundColor= colorName;
}
}
</script>
</body>
</html>실습
<body>
<ul>
<li>오징어</li>
<li>꼴뚜기</li>
<li>대구</li>
<li>명태</li>
<li>거북이</li>
</ul>
</body>
1) 각각의 li 요소의 배경색으로 colors의 색상을 적용 시켜라
<script>
// 자바스크립트에는 char 타입이 없음
// 홀따옴표 쌍따옴표 모두 문자열로 사용됨
var colors = ['red','green','blue','orange','pink'];
var lis = document.getElementsByTagName('ul')[0].getElementsByTagName('li');
// (1) 각각의 li 요소의 배경색으로 colors의 색상을 적용 시켜라.
for(var i = 0; i < lis.length; i++) {
var colorName = colors[i];
lis[i].style.backgroundColor = colorName;
}
</script>
실행결과
2) i번째 li 요소의 클릭 시 배경색을 colors의 i 번째 색상으로 적용 시켜라
문제점
for(var i = 0; i < lis.length; i++) {
lis[i].onclick = function(event) {
this.style.backgroundColor = colors[i];
}
}클릭 이벤트 발생 시 수행할 동작을 위와 같은 코드를 작성하였는데 실행되지 않았다.
for(var i = 0; i < lis.length; i++) {
lis[i].onclick = function(event) {
console.log(i); // 항상 5 출력
}
}클릭 이벤트 발생 시 i는 클릭된 요소의 i가 나와야하는데 console.log(i)를 출력해보니 i는 항상 lis.length인 5가 나왔다.
해당 이벤트를 감싸고 있는 for문에서 이미 반복이 되었기 때문에 이벤트 시 i는 항상 5가 나왔던 것이다.
해결
// 필요한 속성을 객체에 임의로 추가
lis[i].i = i; 클릭된 요소가 몇번째 요소인지 알고 있어야해서
몇번째인지를 나타내는 i를 저장할 코드를 추가하였다.
여기서 lis[i].i 는 필요한 속성인 i를 객체에 임의로 추가하기 위한 것이다.
//클릭된 요소의 i(0,1,2,...)
console.log(this.i); onclick 내에서 객체 자신은 lis[i]이며 this가 가리키는 것이다.
그래서 console.log(this.i); 시 클릭된 요소의 i가 출력되게 된다.
js 소스코드
<script>
// 자바스크립트에는 char 타입이 없다
// 홀따옴표 쌍따옴표 모두 문자열로 사용됨
var colors = ['red','green','blue','orange','pink'];
var lis = document.getElementsByTagName('ul')[0].getElementsByTagName('li');
// (2) i 번째 요소 클릭 시 colors의 i 번째 색상 적용
for(var i = 0; i < lis.length; i++) {
lis[i].i = i; // 필요한 속성을 객체에 임의로 추가
lis[i].onclick = function(event) {
console.log(this.i);
this.style.backgroundColor = colors[this.i];
}
}
</script>실행결과
클릭 전
클릭 후
