• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Basic] JS - for반복문 ★★★★★ - (JS포반복문 = for문 = JS포문) ※ 가변 배열키

for 예제

[배열값 출력]

 

<script>

var hz= ['HTML', 'CSS', 'JS', 'PHP','SQL'];

 

for(var i = 0 ; i < hz.length ; i++) {

    document.write(hz[i] + "<br>");

}

</script>

 

결과보기


[10보다 작거나 같은 짝수 출력]

 

<script>

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

   document.write(i + "<br>")

}

</script>

 

결과보기

※ i++ : 1씩 증가.  (cf. i-- : 1씩 감소)

※ i += 2 : 2씩 증가. (cf. i -= 2 : 2씩 감소)

※ 연산자 : https://homzzang.com/b/js-12

 

PS.

이중 for문 (= 안긴 for문) 가능하나, CPU에 좋지 않음. 되도록 비사용 권장.

 

for 예제 - 가변 배열키

[1단 for문]

 

<script>

var a1= '홈';

var a2= '짱';

var a3= '닷';

var a4= '컴';


var b1= 1;

var b2= 2;

var b3= 3;

var b4= 4;


var c1= 5;

var c2= 6;

var c3= 7;

var c4= 8;

var hz = Array(); // 필수

for(let x = 0; x<4; x++){    

    let y = x +1;

    hz[x] = [eval("a"+y), eval("b"+y), eval("c"+y)];

}

document.write(hz[0]);

</script> 

 

결과보기


[2단 for문]

 

<script>

var a1= '홈';

var a2= '짱';

var a3= '닷';

var a4= '컴';


var b1= 1;

var b2= 2;

var b3= 3;

var b4= 4;


var c1= 5;

var c2= 6;

var c3= 7;

var c4= 8;


var hz = Array(); // 필수

for(let x = 0; x<4; x++){

    hz[x] = Array(); // 필수.

    for(let y = 0; y<4; y++){

        hz[x][y]=[eval("a"+(y+1)), eval("b"+(y+1)), eval("c"+(y+1))];

    }

}

document.write(hz[0][0]);

</script>

 

결과보기

200906 https://sir.kr/qa/375686

 

for 예제 - 일정 구간 숫자 생성 후, 지정 요소에 출력

 

<div id="hz"></div>

 

<script>

var txt = '';

for(var i = 1 ; i <= 300 ; i++) {

    txt += i + "<br>"; 

}

hz.innerHTML = txt;

</script>

 

결과보기



분류 제목
Basic JS - Common Mistakes -
Basic JS - Performance -
Basic JS - Reserved Words -
Basic JS - Versions -
Basic JS - JSON (제이슨) - 데이터 전송 위한 가벼운 자료 형식.
Form JS - Forms - 폼양식 유효성 제어
Form JS - Forms API - 폼유효성
Object JS - Object - 객체개념(=객체의미=객체정의) ★ 3
Object JS - Object Property - 객체속성 ★
Object JS - Object Methods - 객체메서드 ★
Object JS - Object Accessors - 객체접근자 (Getter/Setter = 게러/세러 = 게터/세터… 2
Functions JS - Function Definition - 함수선언방법 + 함수호출방법 ★★★ (= 함수구문 + 함수특…
Functions JS - Function Parameter/argument - 함수 (매개변수/독립변수) ※ 변수 종류 ※ …
Functions JS - Function Invocation - 함수호출방법1 = (함수방식 + 메서드방식 + 함수생성자방…
Functions JS - call() 메서드 - 함수호출방법2 (= call메서드 = 콜메서드)
DOM JS - DOM (= 돔 = 문서객체모델) 정의
DOM JS - Method - 메서드 (= HTML 요소에 대한 수행 작업)
DOM JS - Document - 문서객체
DOM JS - Element Selector - 주요 요소선택자 (= 객체찾기) ※ JS외부링크호출 주의사항
DOM JS - HTML - 내용입력/내용변경/속성값변경(=속성값입력)
3/67
목록
찾아주셔서 감사합니다. Since 2012