switch, for, while

JIHYUN·2023년 8월 14일
0

js

목록 보기
4/10

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>
profile
🍋

0개의 댓글