Code Habit

콜백함수(Callback Function)란 코드를 통해 명시적으로 호출하는 함수가 아니라, 함수를 등록해 놓으면 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다. 콜백함수는 사용자 이벤트 처리나( Event Handler ) 네트워크 응답 처리 등의 비동기적 처리를 요할 때 사용된다. 콜백함수의 사용 예다. - 다른함수의 파라미터로 전달 function hello(callback) { callback("hi"); } function callbackFunc(msg) { console.log(msg); } hello(callbackFunc); - Event Handler 등록 const btnElement = document.querySelector("#buttonTes..

브라우저 화면을 갱신하거나 값을 영구적으로 저장하고 싶을때 사용자의 pc에 값을 저장해놓고 쓰는 방식인 localStorage를 사용하면 된다. localStorage는 쿠키와 달리 유효기간이 없고 영구적으로 이용 가능하며 5MB까지 사용 가능하다. Key와 Value를 하나의 세트로 저장하는 방식으로 값은 반드시 문자열로 저장된다. - 데이터 저장 localStorage.Key1 = "Value1"; localStorage["Key2"] = "Value2"; localStorage.setItem("Key3", "Value3"); - 데이터 가져오기 const val1 = localStorage.Key1; const val2 = localStorage["Key2"]; const val3 = localSt..

addEventListener을 통해 여러종류의 이벤트 핸들러를 등록할 수 있다. 예시) function OnInputBtnClicked(event) { console.log("inputbtn clicked !"); console.log(event); } function OnMouseOver(event) { console.log("Mouse Over !"); console.log(event); } function OnMouseOut(event) { console.log("Mouse Out !"); console.log(event); } inputbtn.addEventListener("click", OnInputBtnClicked); // inputbtn 눌렀을 때 OnInputBtnClicked 호출 i..

querySelector 함수를 사용하여 JavaScript에서 HTML에 있는 element에 접근해 값을 참조하거나 변경할 수 있다. querySelector는 getElementBy* 처럼 특정 id를 제한하지 않고 CSS선택자를 사용하여 요소를 찾을 수 있다. 예시 ) document.querySelector("tagName"); // 태그명이 "tagName"인 첫번째 요소를 가져온다 document.querySelector(".className");// 클래스명이 "className"인 첫번째 요소를 가져온다. document.querySelector("#idName);// 아이디가 "idName"인 첫번째 요소를 가져온다. document.querySelector("#divName butto..