-
특정 코드 블럭을 일정 횟수만큼 반복 실행 하는것
For 문
실행순서
예시1
버튼 클릭으로 div contents를 모두 김구라로 바꿔주기
<body>
<h1>반복문 테스트</h1>
<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>
<button onclick="change();">바꾸기</button>
<script>
var change=function(){
// document.querySelectorAll("div")[1].innerText="김구라";
// document.querySelectorAll("div")[2].innerText="김구라";
// document.querySelectorAll("div")[3].innerText="김구라";
// document.querySelectorAll("div")[4].innerText="김구라";
// document.querySelectorAll("div")[5].innerText="김구라";
// document.querySelectorAll("div")[6].innerText="김구라";
// document.querySelectorAll("div")[7].innerText="김구라";
// document.querySelectorAll("div")[8].innerText="김구라";
// document.querySelectorAll("div")[9].innerText="김구라";
// document.querySelectorAll("div")[10].innerText="김구라";
for(var i=0; i<10; i++){
//변수 i가 어떻게 바뀌는지 확인해보기
console.log("test! i:"+i);
//변수 i를 배열 index에 넣어준다.
document.querySelectorAll("div")[i].innerText="김구라";
}
};
</script>
</body>
예시2
배열에 있는 내용을 콘솔창에 출력하기
names.length; 사용하기
<body>
<h1>반복문 테스트 중</h1>
<button onclick="print();">콘솔창에 출력하기</button>
<script>
var names=["김구라","해골","원숭이","주뎅이","덩어리"];
var print=function(){
for(var i=0; i<names.length; i++){
// console.log(names[0]);
// console.log(names[1]);
// console.log(names[2]);
// console.log(names[3]);
// console.log(names[4]);
console.log(names[i]);
}
};
</script>
</body>
forEach();
- 함수 안에 있는 data를 전달하자마자 적당한 시점에 호출함.
예시
<script>
// for(var i=0; i<5; i++){
// console.log(i);
// }
var names=["김구라", "해골", "원숭이", "주뎅이", "덩어리", "개다리", "돼지"];
//변수명.forEach(function(){});
//for문이랑 비슷한 것.
//함수에 배열에 있는 값을 순서대로 넣어 주면서 호출함.
//함수를 넣어서 함수를 호출하면 그 함수가 적당한 시점에 호출됨.
names.forEach(function(items){
console.log(item);
});
</script>
'Javascript' 카테고리의 다른 글
| [드래곤플라이트 만들기]makeMissile / moveMissile / checkMissile (0) | 2019.11.13 |
|---|---|
| 동기(synchronous) vs 비동기(asynchronous) (0) | 2019.11.08 |
| key값과 value 값 (0) | 2019.11.06 |
| IF 구문 (0) | 2019.11.06 |
| 달리는 캐릭터 만들기 (0) | 2019.11.05 |
