[javascript] D-Day-Counter (3)

script defer

• 스크립트의 위치는 body 태그 안에 맨 끝에 넣어야 한다. 그래야 html에서 태그들을 js가 읽어올 수 있기 때문이다.
• 하지만, 가독성을 고려한다면 head 태그 안에 있는 것이 보기 좋다. 그러나 head 태그 안에 넣으면 js에서 html 태그를 읽어올 수 없기 때문에 오류가 발생한다. (코드는 위에서 아래로 순서대로 읽어나가기 때문이다.)
• 그래서 defer를 이용하여 이러한 문제점을 없애줄 수 있다.

반복문

반복되는 코드, 코드의 양을 획기적으로 압축한다.

반복문에는 for문과 while문이 있다.

 

for 반복문

for(최초식; 조건식; 증감문){
	반복 실행하고자 하는 코드
}

 

1. 최초식 : 최초에만 실행, 반복의 기준이 된다.
2. 조건식
3. 반복 실행하고자 하는 코드
4. 증감문
5. 실행 순서 : 1 → 2 → 3 → 4 → 2 → 3 → 4 조건식을 만족할 때까지 계속 반복하기.

while 반복문

최초식

while(조건식){
	반복 실행하고자 하는 코드
    증감문
}

 

for 반복문과 구조는 동일하다. 최초식이 while 밖에 있다는 점이 다르다.

실행 순서 : 1 → 2 → 3 → 4 → 2 → 3 → 4  조건식을 만족할 때까지 계속 반복하기.

 

주의할 점은 종료 조건을 제대로 설정하지 않으면, 무한 루프에 걸릴 수 있다.

 

// 이런 식으로 작성하면 무한 루프에 걸린다.

let i=0;
let status=true;

while(status===true){
	console.log(i);
    i++;
}

// 종료 조건을 제대로 넣어주자!

let i=0;
let status=true;

while(status===true){
	console.log(i);
    
    // 종료 조건 넣어주기.
    
    if(i>10){
    	status=false;
    }
    
    i++;
}

특수 반복문

자주 사용되므로, 잘 알아두기.

객체와 배열에 특화된 반복문이 있다.

반복문	기능
for-in 문	객체에서 유리하다.
for-of 문	배열에서 유리하다.

 

// for-in 문

for(let 변수 in 객체){
	console.log(변수) // key 값이 나오게 된다.
}

// for-of 문

for(let 변수 of 배열){
	console.log(변수) // 알아서 객체의 길이만큼 반복한다.
}

 

for-in문 사용하지 않고, 객체를 반복하려면 Object.Keys를 이용하여 key로 가져와야 한다.

setTimeOut

반복문으로 코드를 여러 번 실행한다고 한들, 너무 속도가 빨라서 인간이 볼 수 없다. 따라서 코드 실행 속도를 늦추기 위하여 이용할 수 있다.

 

// setTimeout : 함수 실행 속도 늦춰주는 함수.
// 문제점 : i가 100이 넘어가면 더 이상 시계가 돌아가지 않는다.

for (let i = 0; i < 100; i++) {
// 익명 함수 사용해도 되고, 아니면 그냥 아래처럼 함수 이름만 적어줘도 된다.
	setTimeout(countMaker, 1000 * i);
}

 

이런 식으로 이용하면 1초마다 코드가 실행되도록 만들 수 있다.

하지만 100번이 지나면 더 이상 코드가 보여지지 않을 것이다. 이런 경우 setInterval + clearInterval이 문제를 해결할 수 있을 것이다.

setInterval

코드를 사용자 지정 시간마다 반복되도록 지정할 수 있다.

clearInterval

타이머를 종료하고 싶은 경우에 이용할 수 있다. setInterval 자체를 변수로 두고, clearInterval 매개변수에 변수를 넣어주면 된다.

 

// 타이머 실행하여 화면에 보여주는 함수 만들기.

const intervalId = setInterval(() => {
  countMaker(targetDateInput);
}, 1000);

intervalIdArr.push(intervalId);
};

// 함수를 종료하는 함수 만들기.

const setClearInterval = () => {
  for (let i of intervalIdArr) {
    clearInterval(i);
  }
};