JAVASSCRIPT-初級5本映画

*宣言変数(var/let/const)

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の利点:コードが長ければ長いほど変数の作成が容易になる

*ダークモード

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秒後運転(遅延)

デフォルトコード(2行の1行を使用)

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

アプリケーションコード

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

setInterval():n秒ごとに繰り返す

デフォルトコード(2行の1行を使用)

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을 제거한다 */
  }
}

コールバック関数:関数パラメータの位置に入る関数

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