웹 페이지에서 상호작용이 일어나면 이벤트라는 것이 발생한다. 예를들어 버튼을 클릭하면 클릭 이벤트, 마우스를 움직이면 마우스 무브 이벤트가 발생하고, 로딩이 완료되면 온로드 이벤트가 발생한다. 이러한 이벤트를 처리하는 코드를 이벤트 핸들러, 이벤트 리스너라고 한다. 이벤트의 종류는 다음과 같다마우스 관련 이벤트이벤트이벤트 리스너설명clickonclick마우스로 요소를 클릭했을 때 발생한다.mouseoveronmouseover마우스 커서가 요소 위로 올 때 발생한다mouseoutonmouseout마우스 커서가 요소를 떠날 때 발생한다mousedownonmousedown요소 위에서 마우스 버튼을 눌렀을 때 발생한다mouseuponmouseup요소 위에서 마우스 버튼을 놓을 때 발생한다mousemoveonmo..

테이블에 새로운 행과 셀을 추가하는 일도 상당히 자주 발생한다. 테이블에 새로운 행을 추가하려면 insertRow()를 사용하는 편이 간편하다.

49 / 52 JavaScript를 이용하면 HTML 문서의 DOM을 변경할 수 있다. 요소의 내용, 속성, 스타일을 변경할 수 있다.이때, HTML 문서가 변경되는 것은 아니고 DOM만 변경된다. HTML 요소의 내용을 변경하는 가장 쉬운 방법은 innerHTML 속성을 사용하는 것이다. 시작태그와 종료 태그 사이에 있는 모든 코드와 텍스트가 innerHTML 요소다.활용해보자! 여기는 Div입니다. innerHTML과 innerText는 HTML 태그를 해석하는가, 문자열 그대로 취급하는가로 나뉜다.innerHTMLHTML 태그를 해석(Parsing)한다.내용을 입력할 때 태그를 넣으면 실제 스타일이나 구조가 적용된다.내용을 가져올 때..

31 32 33일반 HTML 요소에서는 innerHTML을 활용하여 요소의 값을 읽으면 된다. 그렇다면 와 같은 요소는 어떻게 읽어야 할까? 일반적인 에서 값 읽기value 메소드를 활용해보자! 배열과 name 으로 값 읽기 배열로 name 속성으로 다양한 input 타입에서 값 읽기 TextArea 에서 값 읽기 Apple ..

문서 객체 모델(Dom: Document Object Model)은 HTML의 문서의 계층적인 구조를 트리(tree)로 표현하여 JavaScript가 간편하게 HTML 문서에 접근하여 수정할 수 있도록, HTML 요소를 객체로 만들어 놓은 것이다. DOM을 이용하면 각각의 요소에서 발생하는 이벤트에 반응하는 코드를 작성할 수 있다. 또, JavaScript를 사용하여 HTML 요소의 내용이나 CSS 스타일도 변경할 수 있다. HTML을 객체로 표현한 것을 DOM이라 하면 브라우저를 객체로 표현한 것을 BOM(Browser Object Model)이라 한다. DOM은 다음과 같은 객체를 가지고 있다.Element 객체: HTML 요소를 나타내는 객체Style 객체: CSS 속성을 나타내는 객체Attri..

JavaScript에는 새로운 객체를 생성하는 여러 방법이 있다.(1) 객체 리터럴로부터 직접 생성한다. (2) Object 객체를 이용해 사용자 객체를 생성한다 (3) 생성자 함수를 이용하여 객체를 정의하고 new를 통하여 객체를 생성한다. (4) class 키워드를 이용하여 클래스를 정의한 후 객체를 생성한다. 생성자 함수를 이용해 자동차 객체를 만들어보자! 클래스를 이용해 객체를 생성해보자! 상속도 가능하니 사용해보자!