JAVASCRIPT - 초급 5편

* 변수 선언 ( var / let / const )

출처 : 애플코딩 https://codingapple.com/course-status/

var : 재선언과 재할당이 가능하며 함수 내에서 사용 가능

var variableName = document.quelySelector("#var");

let : 재선언은 불가능, 재할당은 가능하며 {}(중괄호)내에서 사용가능

let age = 20; /* 선언 */
age = 21; /* 할당 */

if(true) {
  let age = 20;
}
console.log(age); /* error : age is note defined */

const : 재선언과 재할당이 불가능하며 {}(중괄호)내에서 사용가능

const city = "seoul"; /* 선언 */
city = "busan"; /* 할당 : error 발생 */

let과 const의 장점 : 코드가 길어질 수록 변수 생성에 실수

* 다크모드 (Dark Mode)

html

<span class="badge bg-dark">Dark 🔄</span>

javascript

var count = 0;
var badge = document.querySelector(".badge");
var body = document.querySelector("body");
badge.addEventListener("click", function () { /* badge class를 클릭할때마다 */
  count += 1; /* count를 1씩 증가시킨다 밑에 2가지 방법도 동일하다 */
  // count++;
  // count = count + 1;
  if ((count % 2) == 0) { /* count가 짝수라면 화이트모드를 */
    body.style.backgroundColor = "white";
    badge.innerHTML = "Dark 🔄";
    badge.style.color = "black";
  } else { /* count가 홀수라면 다크모드를 실행한다 */
    body.style.backgroundColor = "black";
    badge.innerHTML = "White 🔄";
    badge.style.color = "white";
  }
});

setTimeout() : n초 후에 실행 (딜레이)

기본 코드 ( 두 줄 중 한 줄 사용 )

setTimeout(function(){ }, ms);
setTimeout(functionName, ms); /* 콜백함수에 ()를 사용하면 오류 */

응용 코드

function hideAlert() {
  document.querySelector(".alert").style.display = "none";
}
setTimeout(hideAlert, 5000); /* setTimeout(functionName , ms) */

setInterval() : n초마다 반복 실행

기본 코드 ( 두 줄 중 한 줄 사용 )

setInterver(function(){ }, ms);
setInterver(functionName, ms); /* 콜백함수에 ()를 사용하면 오류 */

응용 코드

html

<div class="alert alert-danger">
        <span class="count-num">5</span>초 이내 구매시 사은품 증정
</div>

javascript

let count = 5;
var timer = setInterval(countdown, 1000); /* 1000ms(1초)마다 countdown이라는 함수를 반복 실행 */
function countdown() {
  count--;
  document.querySelector(".count-num").innerHTML = count;
  if (count == 0) {
    document.querySelector(".alert").style.display = "none";
    clearInterval(timer); /* 반복하던 interval을 제거한다 */
  }
}

Callback function ( 콜백함수 ) : 함수 파라미터 자리에 들어가는 함수

addEventListener("Method", function () { });
setTimeOut(functionName, ms);