티스토리 뷰

development/html javascript CSS

[JavaScript] 반복문(1) for

Happyoon ~ 2021. 10. 12. 16:51
728x90
반응형

자바스크립트에서의 반복문은 C언어와 유사하다.

for(let i = 0 ; i<10 ; i++)와 같은 형태로 사용한다. 

 

예제를 살펴보자. 

 

 

예제1 - 콘솔창에 0부터 9까지 출력하기 

<!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>Step03_loop.html</title>
</head>
<body>
    <h1>반복문 테스트</h1>
    <script>
        let num1 = 10;
        let myName = "김구라";
        let mem = {num:1,name:"김구라"};
        let nums = [10,20,30,40,50];
        
        console.log("반복문 시작!");
        for(let i =0; i<10;i++){
            console.log(i);

        }
        console.log("반복문 종료!");
    </script>
</body>
</html>

 

 

 

예제2 - 모든 div의 innerText를 특정 문자열로 변환하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Step03_loop2.html</title>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
    <div>div5</div>
    <div>div6</div>
    <div>div7</div>
    <div>div8</div>
    <div>div9</div>
    <div>div10</div>
    
    <script>
        //모든 div의 innerText를 "김구라"로 바꿔보세요.
        for(let i=0;i<10;i++){
            document.querySelectorAll("div")[i].innerText = "김구라";
        }
    </script>

</body>
</html>

for 문과 querySelectorAll을 사용.

 

 

 

예제 3 - 버튼 클릭 시 모든 div의 innerText 변환하기 /  p에 마우스를 올리면 모든 div의 배경색 바꾸기  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Step03_loop3.html</title>
</head>
<body>
    <button id = "changeBtn">바꾸기</button>
    <p id="one">마우스를 올리셈</p>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
    <div>div5</div>
    <div>div6</div>
    <div>div7</div>
    <div>div8</div>
    <div>div9</div>
    <div>div10</div>
    
    <script>
        //바꾸기 버튼을 누르면 모든 div의 innerText를 김구라로 바꿔보세요
        document.querySelector("#changeBtn").addEventListener("click",function(){
            for(let i =0;i<10;i++){
                document.querySelectorAll("div")[i].innerText = "김구라";
            }
        });
        //위의 p요소에 마우스를 올리면(mouseover 이벤트) 모든 div의 배경색을 노란색으로 바꿔보세요.
        document.querySelector("#one").addEventListener("mouseover",function(){
            for(let i =0;i<10;i++){
                document.querySelectorAll("div")[i].style.backgroundColor = "yellow";
            }

        });
    </script>

</body>
</html>

 

 

 

예제4 - 변수로 document.queryeSelectorAll("  ");을 활용하여 모든 div에 이벤트 리스너 함수 등록하기 

<!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>Step03_loop4.html</title>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
    <div>div5</div>
    <div>div6</div>
    <div>div7</div>
    <div>div8</div>
    <div>div9</div>
    <div>div10</div>
    <script>
        //모든 div의 참조값이 순서대로 담겨있는 배열 얻어내기
        let divs = document.querySelectorAll("div");
        //위의 모든 div 에 "mouseover" 이벤트 리스너 함수를 등록해 보세요.
        for(let i=0; i<divs.length; i++){
            divs[i].addEventListener("mouseover", function(){
                divs[i].style.color="blue";
            });
        }
    </script>
</body>
</html>

 

 

 

 

예제 5 - 버튼 클릭 시 배열에 저장된 문자열 순서대로 콘솔창에 출력하기

<!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>Step03_loop5.html</title>
</head>
<body>
    <button id = "printBtn">출력하기</button>
    <script>
        let names = ["김구라","해골","원숭이","주뎅이","덩어리"];

        //출력하기 버튼을 눌렀을 떄 names 배열에 저장된 모든 문자열 순서대로 콘솔창에 출력하기
        document.querySelector("#printBtn").addEventListener("click",function(){
            for (let i =0;i<names.length;i++){
                console.log(names[i]);
            }

        });
    </script>
</body>
</html>

 

 

 

예제 6 - 버튼 클릭 시 배열에 저장된 문자열을 각각의 p 요소의 innerText로 출력하기

<!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>Step03_loop6.html</title>
</head>
<body>
    <button id = "changeBtn">바꾸기</button>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>
    <script>
        let names = ["김구라","해골","원숭이","주뎅이","덩어리"];

        /*
            바꾸기 버튼을 누르면 
            names 배열에 저장된 문자열을 
            각각의 p 요소의 innerText로 출력하기
        */

        document.querySelector("#changeBtn").addEventListener("click",function(){
            for(let i=0;i<names.length;i++){
                document.querySelectorAll("p")[i].innerText = names[i];
            }
        });
    </script>
</body>
</html>
반응형

'development > html javascript CSS' 카테고리의 다른 글

[HTML/JavaScript/CSS]innerText와 value 관련 예제  (0) 2021.10.12
[HTML/JavaScript/CSS] 특정 요소 스타일 지정 / 좌표 활용법  (0) 2021.10.12
[JavaScript] querySelectorAll 활용하기  (0) 2021.10.12
[HTML/JavaScript/CSS] 마크업을 편하게 하는 방법  (0) 2021.10.12
[JavaScript] 이벤트처리 / EventListener, id / querySelector  (0) 2021.10.08
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
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
글 보관함