본문 바로가기
JavaScript

JavaScript 반복문(for) 실습 예제

Rubbery 2023. 4. 13. 12:58

for 문

for 문은 자체적으로 초기식, 표현식, 증감식을 포함하고 있는 반복문 입니다.

 

기본 형식

     for (let i=0; i<10; i++) {

    }

for (초기값; 조건식; 증감식) {

조건식의 결과가 참일 경우 반복적으로 실행하고자 하는 실행문

}

for 문을 구성하는 초기식, 조건식, 증감식은 각각 생략 가능하며

쉼표(,)를 사용하면 여러 개의 식이나 증감식을 동시에 사용 가능합니다.

 

for 문을 활용한 예제

 

1. 페이지 로딩 시점에 위에 있는 모든 p 요소의 innerText 를 "가나다" 로 변경하기

<body>
    <p>p1 입니다.</p>
    <p>p2 입니다.</p>
    <p>p3 입니다.</p>
    <p>p4 입니다.</p>
    <p>p5 입니다.</p>
    <p>p6 입니다.</p>
    <p>p7 입니다.</p>
    <p>p8 입니다.</p>
    <p>p9 입니다.</p>

- p열 텍스트 내용

 

     for (let i=0; i<100; i++)  {  
        document.querySelectorAll("p")[i].innerText="가나다";
        };

- 스크립트 

 

실행 결과

100개의 p열의 텍스트가 "가나다"로 변경되어짐.

 

 

2. 바꾸기 버튼을 눌렀을때 모든 p 요소의 color 를 "red" 로 변경하기

    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>
    <p>p6</p>
    <p>p7</p>
    <p>p8</p>
    <p>p9</p>
    <p>p10</p>
    <button onclick="change()">바꾸기</button>

- p 열의 텍스트 내용

 

        let change=()=>{
            for(let i=0; i<10; i++) {
            document.querySelectorAll("p")[i].style.color = "red"
            };
        };

- 스크립트 

 

기본 페이지
실행 결과

p열의 텍스트 컬러가 빨간색으로 변경됨

 

 

3. 출력하기 버튼을 누르면 names 배열에 저장된 문자열이 li 요소의 innerText로 출력하기

    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
    </ul>
    <button onclick="print()">출력하기</button>

- html 영역 

 

        let names=["김구라", "해골", "원숭이", "주뎅이", "덩어리"];
        let print=()=> {
            for (let i=0; i<5; i++) {
                document.querySelectorAll("li")[i].innerText = names[i];
            };
        };

- 스크립트 영역

 

기본 페이지
실행 결과

출력하기 클릭할경우 텍스트 본문의 내용이 names 배열의 값으로 순서대로 바뀐다.

 

 

4. nums 배열에 저장된 숫자를 순서대로 콘솔창에 출력하기

        let nums = [10, 20, 30, 40, 50, 60, 70];

        for (let i=0; i<nums.length; i++) {
            console.log(nums[i]);
        }

- 스크립트 영역

 

실행 결과

페이지 로딩 이후 크롬의 콘솔창에 nums의 로그가 출력 되어진다.

 

 

5. forEach() 함수를 활용하여 "출력하기" 버튼을 누르면 nums 배열에 담긴 숫자가 위의 p 요소에 순서대로 출력하기

    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>
    <button onclick="print()">출력하기</button>

- html 영역

        let nums=[10, 20, 30, 40, 50, 60];

        let print=()=>{
            nums.forEach(function(item, index) {
                document.querySelectorAll("p")[index].innerText = item            
            });
        }

- 스크립트 영역

 

기본 페이지
실행 결과

"출력하기" 버튼을 클릭한 결과 텍스트가 nums의 배열의 값으로 순서대로 바뀐다.

 

 

 

 

 

 

 

'JavaScript' 카테고리의 다른 글

JavaScript EventListener  (0) 2023.04.17
JavaScript 조건문(if) 실습 예제  (0) 2023.04.13
JavaScript Document querySelector  (0) 2023.04.12
JavaScript 연산자  (0) 2023.04.11
JavaScript Data type  (0) 2023.04.10

'JavaScript' Related Articles

티스토리툴바