노력이 좋아서

<step30>'js_while'

zoaseo 2022. 4. 29. 12:49

1) 01while.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>
    <script>
        let i = 0;
        //while문
        while(i<10){
            document.write('<h2>금요일입니다</h2>')
            i++;
        }
        //do while문 : do 안의 실행문 한번은 무조건 실행한다!
        do {
            document.write('<h2>금요일입니다</h2>')
            i++;
        }while(i<10)
    </script>
</body>
</html>

2) 02for.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>
    <div>
        <ul id="forul">

        </ul>
    </div>
    <script>
        //2단~9단까지 구구단을 콘솔에 출력
        let li = ""
        for(let i=2; i<10; i++){
            li = li + `<li><h3>${i}단입니다.</h3><ul>`
            for(let j=1; j<10; j++){
                li = li + `<li>${i} * ${j} = ${i*j}</li>`
            }
            li = li + `</ul></li>`
        }
        document.querySelector('#forul').innerHTML = li;
        let str = "";
        for(let i=0; i<10; i++){
            str = str + `안녕${i}`;
            console.log(str);
        }
    </script>
</body>
</html>

3) ex01_teach.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>
    <div></div>
    <script>
        let inner = "";
        for(let i=0;i<5;i++){
            inner = inner + '<p>';
            for(let j=5;j>i;j--){
                inner = inner + '*';
            }
            inner = inner + '</p>';
        }
        document.querySelector('div').innerHTML = inner;
    </script>
</body>
</html>

4) ex02.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>
    <script>
        let message = prompt('100보다 큰 숫자를 입력하시오');

        while(message <= 100){
            // console.log('반복문');
            if(message === "" || message === null){
                break;
            }
            message = prompt('100보다 큰 숫자를 입력하시오');
            // console.log(message);
        } 
    </script>
</body>
</html>

5) ex02_teach.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>
    <script>
        let num;
        do {
            num = prompt("100을 초과하는 숫자를 입력하세요");
        } while(num <= 100 && num)
    </script>
</body>
</html>

6) array.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>
    <script>
        let fruits = ['🍅','🥝','🍌','🍓','🍉'];
        // 마지막에 배열요소를 추가
        fruits.push('🍊');
        // 제일 앞에 배열요소를 추가
        fruits.unshift('🍇');
        console.log(fruits);
        // 마지막 배열요소를 삭제
        fruits.pop();
        console.log(fruits);
        // 제일 앞 배열요소를 삭제
        fruits.shift();
        console.log(fruits);
        fruits.forEach(function(a,b,c){
            console.log(`첫번째 매개변수 자리에는 값 ${a}`);
            console.log(`두번째 매개변수 자리에는 인덱스 ${b}`);
            console.log(`세번째 매개변수 자리에는 배열 ${c}`);
        })
        fruits.forEach(value=> console.log(`첫번째 매개변수 자리에는 값 ${value}`));  //function을 한줄로도 사용한다.
        for(let i=0; i<fruits.length; i++){
            console.log(fruits[i]);
        }
        fruits.forEach(function(list){
            console.log(list);
        })
    </script>
</body>
</html>