Step by Step

index.html 제출 초기화 main.js const formEl = document.querySelector("form"); const inputEls = document.querySelectorAll("input"); inputEls.forEach((el) => { el.addEventListener("focus", () => { formEl.classList.add("active"); }); el.addEventListener("blur", () => { formEl.classList.remove("active"); }); el.addEventListener("change", (evnet) => { console.log(event.target.value); }); }); formEl.addEve..

addEventListener() 대상에 지정한 이벤트가 발생했을 때 함수(Handler)가 호출된다 const parentEl = document.querySelector(".parent"); const childEl = document.querySelector(".child"); parentEl.addEventListener("click", () => { console.log("parent!"); }); childEl.addEventListener("click", () => { console.log("child!"); }); removeEventListener() 대상에 지정한 이벤트를 제거한다. removeEventListener를 사용할 때 콜백 함수 부분에 따로 설정한 함수가 들어가지 않으면 그..

DOM(document object model) DOM이란 HTML문서를 객체로 표현한 것으로 JS에서 HTML을 제어할 수 있게한다. 아래 코드는 h1 태그의 텍스트 값을 콘솔창에서 보여주는 코드이다. const element = document.querySelector("h1"); console.log(element.textContent); DOM API Node vs Element Node : HTML요소, 텍스트, 주석 등 모든 것을 의미 Element : HTML 요소를 의미 이제부터 나오는 js 코드들은 아래 index.html을 바탕으로 적용된다. 1 2 console.log(parent.childNodes)는 자식 노드를 확인하므로 5개의 값을 가진다. console.log(parent.c..

Callback 함수는 이해하기가 정말 까다로웠다 함수 안에 함수를 호출하는데 작동 순서, 원리등을 이해하는데 꽤 오랜 시간이 걸렸다. 두번째 예시는 주로 강의에서 설명하던 방식인데 함수안에 저런 형태의 함수는 한번에 이해하기 힘들어서 첫번째 예시로 다시 만들어서 생각해보니 이해하기 훨씬 쉬웠다. const add = (a, b, cb) => { return cb(a + b); }; const say = (val) => { return console.log(val); }; add(3, 4, say); add 함수 안에 a,b,cb 인자를 받아주었는데 cb는 함수 인자이다. 작동 순서는 add(3,4,say)로 예시를 들면 3,4의 합을 say함수 인자로 받는다. 그 후 say 함수에서 console.lo..