티스토리 뷰

유료강의/국비지원

웹퍼블리셔 기본 3일차 - while 반복문, 조건문 활용

2021bong 2021. 9. 15. 18:35 
ggd = 2;
x = 1;

while (ggd <= 9){
    while (x < 10) {
        document.write(`${ggd} X ${x} = ${ggd*x} <br>`);
        x++;
    }
    ggd++;
    x = 1;
}​
<script>

        document.write(name_id + "님 반갑습니다!"); // document : <body> 안

</script>

+ document : <body> 안

 

 

모든 브라우저를 지원해야하는 포털사이트 대기업 같은 경우는 var를 사용하기도 한다.

 

 

<!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>
    <ul>

    </ul>
    <script>
        let list = [
            "중기.소상공인, 만기연자.상환유예 내년 3월",
            "마포오피스텔서 여친 폭팽해 숨지게한 30대 남성",
            "영변핵->순항미사일->탄도미사일.. 압박수위 높이..",
            "4시간 만나면 감염 가능성 35%.. 환기하면 10-20%"
        ];

        const ul = document.querySelector('ul');

        ul.innerHTML = `
            <li>${list[0]}</li>
            <li>${list[1]}</li>
            <li>${list[2]}</li>
            <li>${list[3]}</li>
            `; //이렇게 하면 list가 늘어날때마다 코드를 추가 해줘야함

        ul.innerHTML = ``; //하지만 이렇게 하면 list가 늘어나도 코드는 그대로
        num = 0;
        while (num < list.length) {
            ul.innerHTML += `<li>${list[num]}</li>`;
            num++;
        };
    </script>
</body>

</html>

반복문을 돌렸을 때의 효율

 

while (num < list.length) {
            ul.innerHTML += `<li>${num + 1} : ${list[num]}</li>`; //앞에 숫자를 넣고 싶을 때도
            num++;
        };

만약에 list 앞에 숫자가 넣고 싶을 때 이렇게 하면 효율이 좋음!

 

 

 

활용해보기

<!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>
    //while 반복문
    let num = 0;
    while(num < 10){ //조건이 true면 계속 실행, false일 때 빠져나옴
        console.log("실행");
        num++;
    }

    //배열의 합계와 평균 구하기
    let num, total, arr;
    num = 0;
    total = 0;
    arr = [80, 90, 70, 40];


    while (num < arr.length) {
        total += arr[num];
        num++;
    }
    const div = document.querySelector('div'); //div를 선택
    div.innerHTML = ` 
                    합계 = ${total} <br>
                    평균 = ${total / arr.length} <br>
                    `; //div에 html을 넣음

    //짝수를 찾아 합 구하기
    num = 1;
    total = 0;
    while (num <= 10) {
        if (num%2 == 0) {
            total += num;
        }
        num++;
    }
    document.write(total);
</script>

</body>

</html>

 

+

숙제

 

1~100까지 합 구하기

a = 1;
total = 0;

while (a <= 100) {
    total += a;
    a++;
}
document.write(total);

 

구구단 2단 출력해보기

ggd = 2;
x = 1;

while (x < 10) {
    document.write(`${ggd} X ${x} = ${ggd*x} <br>`);
    x++;
}

 

구구단 2단부터 9단까지 한번에 출력해보기

ggd = 2;
x = 1;

while (ggd <= 9){
    while (x < 10) {
        document.write(`${ggd} X ${x} = ${ggd*x} <br>`);
        x++;
    }
    ggd++;
    x = 1;
}

 

재밌다! 2단부터 9단까지 검색안하고 혼자 생각해서 적어냈다! 나는 대단해!!!

728x90

'유료강의 > 국비지원' 카테고리의 다른 글

웹퍼블리셔 기본 6일차 - 날짜함수, 제이쿼리  (0) 2021.09.28
웹퍼블리셔 기본 5일차 - switch 문, selector, 날짜함수  (0) 2021.09.27
웹퍼블리셔 기본 4일차 - while 문, for 문, 함수선언식, Math  (0) 2021.09.23
웹퍼블리셔 기본 2일차 - 삼항 조건 연산자, 조건문, 배열  (0) 2021.09.14
웹퍼블리셔 기본 1일차 - 자료형, 연산자  (0) 2021.09.13
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함