DOM: Document Object Model
DOMContentLoaded: HTML 문서의 모든 요소(element)들이 만들어졌을 때 발생하는 이벤트.
이벤트 처리 함수를 등록.
document.addEventListener('DOMContentLoaded', function() {
});switch
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>JavaScript 3</title>
</head>
<body>
<!-- js 폴더의 switch.js 파일을 HTML 파일에 포함, 실행. -->
<!-- DOM을 쓰면 여기에 넣어도 OK>>근데 느려지기도하고>> <script src="js/switch.js"></script> -->
<h1>switch-case</h1>
<select id="weekday">
<option value="sun">일요일</option>
<option value="mon">월요일</option>
<option value="tue">화요일</option>
<option value="wed">수요일</option>
<option value="thu">목요일</option>
<option value="fri">금요일</option>
<option value="sat">토요일</option>
</select>
<button id="btn">확인</button>
<div id ="result">결과</div>
<!-- js 폴더의 switch.js 파일을 HTML 파일에 포함, 실행. -->
<!-- 원래 위치는 여기>>>> <script src="js/switch.js"></script> -->
<script src="js/switch.js"></script>
</body>
</html>/**
* switch.js
* 03_switch.html에 포함
*/
document.addEventListener('DOMContentLoaded', function() {
// select#weekday element를 찾음.
const weekday = document.getElementById('weekday');
console.log(weekday);
const result = document.getElementById('result');
// button#btn element 찾음.
const btn = document.getElementById('btn');
btn.addEventListener('click', printResult);
function printResult(){
const value = weekday.value;
/* switch case === */
switch(value){
case 'mon':
case 'tue':
case 'wed':
case 'thu':
case 'fri':
result.innerHTML = '학원 출석';
break;
case 'sat':
case 'sun':
result.innerHTML = '침대';
break;
default:
result.innerHTML = '잠';
}
// 자바 스크립트의 switch-case에서 비교는 === 연산자 비교.
// 타입을 자동 변환하지 않고, 타입과 값이 일치하는 case의 문장을 실행.
}
});for
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>JavaScript 4</title>
</head>
<body>
<h1>JavaScript for 반복문</h1>
<div id="result"></div>
<script>
// div#id element를 찾음.
const result = document.getElementById('result');
let html = ''; // 구구단 출력 결과를 덧붙일 문자열 변수.
for (let n = 1 ; n < 10 ; n ++){
// 문자열 템플릿: `문자열 ${변수/식}`
html += `2 * ${n} = ${2*n} <br/>`;
}
html += `<hr/>`;
/*result.innerHTML = html; */
/* result.innerHTML += '<hr />'; */ //result.innerHTML = result.innerHTML + '<hr/>'
//TODO: 구구단 2단부터 9단까지 이어서 출력.
for (let i = 2; i < 10; i++ ){
for (let j = 1 ; j < 10 ;j++){
html += `${i} * ${j} = ${i*j} <br/>`;
}
html += `<br/>`;
}
html += `<hr/>`;
/* result2.innerHTML += html; */
/* result.innerHTML += '<hr />'; */
//TODO: 구구단 2단은 2*2까지 9*9까지 이어서 출력.
for (let i = 2; i < 10; i++ ){
for (let j = 1 ; j <= i ;j++){
html += `${i} * ${j} = ${i*j} <br/>`;
}
html += `<br/>`;
}
result.innerHTML += html;
/* result.innerHTML += '<hr />'; */
</script>
</body>
</html>while
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>JavaScript 5</title>
</head>
<body>
<h1>while 반복문</h1>
<div id="result"></div>
<script>
const result = document.getElementById('result');
// 1. 구구단 2단을 while 문을 사용해서 div에 출력.
let html = '';
let n = 1;
while (n < 10) {
html += `2 * ${n} = ${2*n} <br/>`;
n++;
}
html += `<hr/>`;
/* result.innerHTML = html; */
// 2. 구구단 2단부터 9단까지 while 문을 사용해서 div에 출력.
let i = 2;
while (i < 10){
let j = 1;
while (j < 10){
html += `${i} * ${j} = ${i*j} <br/>`
j++;
}
i++;
html += `<br/>`;
}
html += `<hr/>`;
result.innerHTML = html;
//do-while 반복문
html = '<ul>';
n = 1;
do {
html += `<li>JavaScript ${n}</li>`;
n++;
} while (n < 5);
html += '<ul/>'
result.innerHTML += html;
</script>
</body>
</html>