1. DOM 요소에 함수 직접 연결하기 2. 함수 이름을 사용해 연결하기 3. DOM의 event 객체 알아보기 DOM에는 이벤트 정보를 저장하는 event 객체가 있다. 이 객체에는 웹 문서에서 이벤트가 발생하는 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보를 가지고 있다. event 객체 프로퍼티와 메서드 1️⃣ 프로퍼티 altKey : 이벤트가 발생할 때 alt 키를 눌렀는 지 여부를 boolean 값으로 반환한다. button : 마우스에서 누른 버튼의 키 값을 반환한다. charCode : keypress 이벤트가 발생할 때 어떤 키를 눌렀는지 유니코드 값으로 반환한다. clientX : 이벤트가 발생한 가로 위치를 반환한다. clientY : 이벤트가 발생한 세로 위치를 반환한다. ct..

1. 문서객체모델 DOM 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법이다. 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 객체로 정의한다. 웹 문서 전체는 document객체이고, 삽입한 이미지는 image 객체가 된다. DOM은 웹 문서와 그 안의 모든 요소를 '객체'로 인식하고 처리한다. 2. DOM 트리 이런 웹 문서가 존재한다고 했을 때 DOM 트리는 HTML -> HEAD -> META, -> TITLE -> BODY -> H1 -> IMG 라고 할 수 있다. 부모와 자식 구조로 표시하면 트리형태가 되는데 이를 DOM 트리라고한다. DOM 트리에서 가지가 갈라져 나간 항목을 노드라고 하고, DOM 트리의 시작부분인..

1. 익명함수 익명함수는 함수의 이름이 없는 함수이다. 따라서 익명함수를 선언할때는 함수의 이름이 없다. 2. 즉시 실행 함수 즉시 실행 함수는 한번만 실행하는 함수를 정의하고 동시에 실행하는 함수이다. (function () { 명령 } () ); (function (매개변수) { 명령 } (인수) ); 3. 화살표 함수 (매개변수) => { 함수 내용 } 4. 이벤트 1️⃣ 마우스 이벤트 click : 사용자가 html 요소를 클릭할 때 이벤트 발생 dbclick : 사용자가 html 요소를 더블 클릭할 때 이벤트 발생 mousedown : 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트 발생 mousemove : 사용자가 요소 위에서 마우스 포인터를 움직였을 때 이벤트 발생 mouseover ..