본문 바로가기
교육/Javascript&Jquery

자바스크립트 + 제이쿼리 입문 day 4

by Renechoi 2022. 12. 26.

자바스크립트 + 제이쿼리 입문 day 4

 

img를 dom에 출력하기. 

 

    <Div class="result"></Div>
    <script>
        let arr = ['./img/01.jpg', './img/02.jpg', './img/03.jpg'];
        console.log(arr);

        const elResult = document.querySelector('.result');


        elResult.innerHTML = `<img src ="${arr[0]}">`;




    </script>
</body>

 

 

이미지를 100장 올리게 된다면 ?

 

=> 반복문 사용. 

 

var num = 1;
wihle (num < 5){
	명령
    }

 

5 미만인 경우 반복 ! 

 

for (초기문; 조건문; 증감문;){
 반복 명령
}
        for (let i = 0; i < 3; i++) {
            if (i == 1) {
                elResult.innerHTML += `<img src ="${arr[i]}">`;
                break;
            }
        }

 

 

 

1 ~ 31 까지 숫자 찍기 

    <div class="number"></div>
    <script>
        const elNumber = document.querySelector('.number');

        for (let i = 1; i <= 31; i++) {

            if (i == 26) {
                elNumber.innerHTML += "*,";
                continue;
            }

            if (i == 31) {
                elNumber.innerHTML += `${i}`;
                continue;
            }
            elNumber.innerHTML += `${i},`;
        }
    </script>

 

 

1 ~ 100까지 숫자 더하기 

 

    <div class="total"></div>
    <script>
        const elTotal = document.querySelector('.total');
        let total = 0;

        for (let i = 1; i <= 100; i++) {
            total += i;
        }

        elTotal.innerHTML += total;

    </script>

 

 

 

구구단 만들어보기 

 

    <div class="nineTimes"></div>
    <script>
        // 2 x 1 = 2 
        const elNineTimes = document.querySelector('.nineTimes');

        for (let i = 2; i <= 9; i++) {
            for (let j = 1; j <= 9; j++) {
                elNineTimes.innerHTML += `${i} x ${j} = ${i * j} <br>`;
            }
            elNineTimes.innerHTML += `<br>`
        }

    </script>

 

 

 

버튼을 만들어서 눌렸을 때 2단 출력하기 

 

    <Div class="question"><button>2단</button></Div>

    <script>
        const elQuestion = document.querySelector('.question');
        const elButton = document.querySelector('.question button');

        elButton.onclick = function() {
            let dan = 2;
            elQuestion.innerHTML += "<br>";
            for (let i = 1; i <= 9; i++) {
                elQuestion.innerHTML += `${dan} x ${i} = ${dan * i}<br>`;
            }
        }
        
        


    </script>

=> 버튼 -> 작동 : 비동기 

 

요청이 들어왔을 때 결과값을 리턴하는 방식을 비동기라고 한다. 

 

 

 

button을 눌렀을 때 숫자 증가시키기 

 

 <div class="increment">
        <p>0</p>
        <button>좋아요!</button>
        <button>처음으로</button>
    </div>

    <script>
        const elIncrement = document.querySelectorAll('.increment button');
        const elLikes = document.querySelector('.increment p');

        let num = 0;
        elIncrement[0].onclick = function(){
            num++;
            elLikes.innerHTML = num;
        }

        elIncrement[1].onclick = function(){
            elLikes.innerHTML = 0;
        }
    </script>

 

 

wrap up 

 

<!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>
    <!--array-for.html-->

    <style>
        img {
            width: 200px
        }
    </style>

    <Div class="result"></Div>
    <script>
        let arr = ['./img/01.jpg', './img/02.jpg', './img/03.jpg'];
        console.log(arr);

        const elResult = document.querySelector('.result');

        for (let i = 0; i < 3; i++) {
            if (i == 1) {
                elResult.innerHTML += `<img src ="${arr[i]}">`;
                // continue;;   
                break;
            }
        }

        let i = 0;
        while (i < 3) {
            console.log(i);

            if (i != 1) {
                elResult.innerHTML += `<img src ="${arr[i]}">`;
            }
            i++;
        }


    </script>

    <div class="number"></div>
    <script>
        const elNumber = document.querySelector('.number');

        for (let i = 1; i <= 31; i++) {

            if (i == 26) {
                elNumber.innerHTML += "*,";
                continue;
            }

            if (i == 31) {
                elNumber.innerHTML += `${i}`;
                continue;
            }
            elNumber.innerHTML += `${i},`;
        }
    </script>

    <div class="total"></div>
    <script>
        const elTotal = document.querySelector('.total');
        let total = 0;

        for (let i = 1; i <= 100; i++) {
            if (i % 2 == 0) {
                total += i;
            }
        }

        elTotal.innerHTML += total;

        let j = 1;
        total = 0;
        while (j <= 100) {

            if (j % 2 == 0) {
                total += j
            }
            j++;
        }

        elTotal.innerHTML += total;


    </script>


    <div class="nineTimes"></div>
    <script>
        // 2 x 1 = 2 
        const elNineTimes = document.querySelector('.nineTimes');

        for (let i = 2; i <= 9; i++) {
            for (let j = 1; j <= 9; j++) {
                elNineTimes.innerHTML += `${i} x ${j} = ${i * j} <br>`;
            }
            elNineTimes.innerHTML += `<br>`
        }

    </script>


    <Div class="question"><button>2단</button></Div>

    <script>
        const elQuestion = document.querySelector('.question');
        const elButton = document.querySelector('.question button');

        elButton.onclick = function () {
            let dan = 2;
            elQuestion.innerHTML += "<br>";
            for (let i = 1; i <= 9; i++) {
                elQuestion.innerHTML += `${dan} x ${i} = ${dan * i}<br>`;
            }
        }




    </script>

    <div class="increment">
        <p>0</p>
        <button>좋아요!</button>
        <button>처음으로</button>
    </div>

    <script>
        const elIncrement = document.querySelectorAll('.increment button');
        const elLikes = document.querySelector('.increment p');

        let num = 0;
        elIncrement[0].onclick = function(){
            num++;
            elLikes.innerHTML = num;
        }

        elIncrement[1].onclick = function(){
            elLikes.innerHTML = 0;
        }
    </script>

    <style>
        div{
            margin:50px 0;
            padding:5%; 
            background-color: #eee;
        }
    </style>


</body>

</html>

 

 

 

반응형
저작자표시 비영리 변경금지

'교육 > Javascript&Jquery' 카테고리의 다른 글

자바스크립트 + 제이쿼리 입문 day 6  (0) 2023.01.02
자바스크립트 + 제이쿼리 입문 day 5  (0) 2022.12.29
자바스크립트 + 제이쿼리 입문 day 3  (0) 2022.12.23
자바스크립트 + 제이쿼리 입문 day 2  (0) 2022.12.21
자바스크립트 + 제이쿼리 입문 day 1  (0) 2022.12.19

관련글

티스토리툴바