본문 바로가기

프론트엔드/Vanilla JS2

[JS] 이벤트 핸들링 자바스크립트로 만들 수 있는 이벤트 핸들러 중심으로 내용을 정리해 보았습니다. 이벤트와 관련된 용어들의 차이는 다음과 같습니다. 이벤트 : 버튼 클릭, 키보드 입력 같은 웹 페이지에서 일어나는 모든 사건입니다. 이벤트 핸들링 : 자바스크립트를 통해 이벤트를 다루는 일입니다. 이벤트 핸들러 : 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드입니다. 이벤트 핸들러 간단한 예시로, 어떤 버튼을 누를때 마다 특정 행동을 하는 이벤트를 이렇게 onclick 속성에 직접 새로운 값을 할당하는 방식으로 만들 수 있습니다. let btn = document.querySelector("#myBtn"); btn.onclick = function(){ console.log("Hello World"); }; .. 2021. 11. 8.
[JS] DOM 객체와 요소노드 Vanilla Javascript HTML과 CSS로 웹 페이지를 꾸미고 나면, Vue나 React같은 다양한 프레임워크로 기존의 CSS만으로는 구현할 수 없는 신기한 반응형 웹 동작을 구현할 수 있습니다. 하지만 그런 도구 없이 순수 자바스크립트로도 가능한데요, 추가적인 라이브러리 없이 자바스크립트만으로 웹 동작을 코딩하는 것을 vanilla javascript라고 합니다. vanilla javascript를 공부하면 자바스크립트에 대해 좀 더 깊고 자세히 이해할 수 있게 되고, 추후 공부할 다른 프레임워크에도 빠르게 적응할 수 있게 됩니다. 자바스크립트 파일 연결하기 HTML파일 내에서 자바스크립트 파일과 연결하는 코드를 추가할 수 있습니다. ... 이렇게 body태그 내부의 script태그의 src.. 2021. 11. 6.