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);
Author And Source
이 문제에 관하여(JAVASCRIPT - 초급 5편), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@mj9457/JAVASCRIPT-초급-5편저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)