[HTML5 웹 프로그래밍 입문] Chapter10 연습문제 (정답)

[HTML5 웹 프로그래밍 입문] Chapter10 연습문제 (정답)

책: HTML5 웹 프로그래밍 입문 3판 (HTML5 Web Programming)

저자: 윤인성

출판사: 한빛아카데미

이전글 : Chapter09 연습문제 (정답) 바로가기

Chapter10 문서 객체 모델

문제 아래 더보기를 누르면 정답을 확인할 수 있습니다.

01 다음 괄호 안을 채우시오.

(1) 태그를 자바스크립트에서 사용할 수 있는 객체로 만든 것을 ( )라고 합니다.

(2) 웹 페이지를 처음 실행할 때 HTML 태그로 적힌 문서 객체를 생성하는 것을 ( )이라고 합니다.

(3) 웹 페이지를 실행 중에 자바스크립트를 사용해 문서 객체를 생성하는 것을 ( )이라고 합니다.

(4) 웹 브라우저가 HTML 파일을 분석하고 출력하는 방식을 ( )이라고 합니다.

(5) ( )은 문서 객체에 이벤트를 연결하는 방법을 의미합니다.

(6) ( )은 HTML 태그 내부에 자바스크립트 코드를 넣어 이벤트를 연결하는 방식입니다.

(7) ( )은 과거에 표준으로 정의되어 많이 사용하던 이벤트 모델입니다.

(8) 이벤트 모델로 연결된 함수를 ( ) 또는 ( )라고 합니다.

(9) ( )는 특정 태그가 가진 기본적인 이벤트를 의미합니다.

더보기 < 정답 - 01 > (1) 태그를 자바스크립트에서 사용할 수 있는 객체로 만든 것을 문서 객체라고 합니다. (2) 웹 페이지를 처음 실행할 때 HTML 태그로 적힌 문서 객체를 생성하는 것을 동적 생성이라고 합니다. (3) 웹 페이지를 실행 중에 자바스크립트를 사용해 문서 객체를 생성하는 것을 정적 생성이라고 합니다. (4) 웹 브라우저가 HTML 파일을 분석하고 출력하는 방식을 문서 객체 모델(Document Object Model, DOM)이라고 합니다. (5) 이벤트 모델(event model)은 문서 객체에 이벤트를 연결하는 방법을 의미합니다. (6) 인라인 이벤트 모델(inline event model)은 HTML 태그 내부에 자바스크립트 코드를 넣어 이벤트를 연결하는 방식입니다. (7) 고전 이벤트 모델은 과거에 표준으로 정의되어 많이 사용하던 이벤트 모델입니다. (8) 이벤트 모델로 연결된 함수를 이벤트 핸들러 또는 이벤트 리스너라고 합니다. (9) 기본 이벤트(default event)는 특정 태그가 가진 기본적인 이벤트를 의미합니다.

02 다음 질문에 OX를 표시하시오.

(1) 웹 페이지에 적혀 있는 HTML 태그들은 위쪽에서 아래쪽으로 차례대로 만듭니다. ( )

(2) script 태그는 반드시 head 태그 안에 위치해야 합니다. ( )

(3) querySelector() 메서드는 선택자로 요소를 여러 개 선택할 가능성이 있으므로, 배열로 문서 객체를 리턴합니다. ( )

(4) 이벤트 리스너 내부에서 this 키워드를 사용하면 이벤트를 발생시킨 문서 객체를 확인할 수 있습니다. ( )

(5) 이벤트 객체를 사용하면 이벤트와 관련한 정보를 알아낼 수 있습니다. ( )

(6) a 태그를 클릭했을 때 발생하는 웹 페이지 이동 등 기본 이벤트는 제거할 수 없습니다. ( )

더보기 < 정답 - 02 > (1) 웹 페이지에 적혀 있는 HTML 태그들은 위쪽에서 아래쪽으로 차례대로 만듭니다. (O) (2) script 태그는 반드시 head 태그 안에 위치해야 합니다. (X) -> script 태그는 반드시 head 태그 안에 위치해야 하는 것이 아니라, body 태그 아래쪽에도 위치할 수 있다. (3) querySelector() 메서드는 선택자로 요소를 여러 개 선택할 가능성이 있으므로, 배열로 문서 객체를 리턴합니다. (X) -> querySelector() 메서드는 선택자로 요소를 하나 선택할 때 사용하고, 여러 개 선택할 경우에는 querySelectorAll() 메서드를 사용하여, 배열로 문서 객체를 리턴한다. (4) 이벤트 리스너 내부에서 this 키워드를 사용하면 이벤트를 발생시킨 문서 객체를 확인할 수 있습니다. (O) -> 이벤트 리스너 내부에서 this 키워드를 사용하면 이벤트를 발생한 자기 자신을 의미한다. (5) 이벤트 객체를 사용하면 이벤트와 관련한 정보를 알아낼 수 있습니다.(O) (6) a 태그를 클릭했을 때 발생하는 웹 페이지 이동 등 기본 이벤트는 제거할 수 없습니다. (X) -> 고전 이벤트 모델에서 이벤트 리스너의 반환 값을 false로 입력하면 기본 이벤트를 제거할 수 있다. 그래서 a 태그의 click 이벤트 리스너의 반환 값을 false로 입력하면 a 태그를 클릭했을 때 발생하는 웹 페이지 이동을 제거할 수 있다.

03 다음 태그 중에서 텍스트 노드를 갖지 않는 태그는?

① h1 태그

② title 태그

③ br 태그

④ a 태그

더보기 < 정답 - 03 > ③ br 태그 -> br 태그는 줄 바꿈을 할 때 사용하는 태그이다.

04 다음 중 문서 객체를 하나만 리턴하는 함수는?

① document.getElementById()

② document.getElementsByName()

③ document.getElementsByClassName()

④ document.querySelectorAll()

더보기 < 정답 - 04 > ① document.getElementById() -> document.getElementById()와 document.querySelector() 메서드는 문서 객체를 1개만 선택하는 메서드이고, document.getElementsByName(), document.getElementsByClassName(), document.querySelectorAll() 메서드는 문서 객체를 여러 개 선택하는 메서드이다.

05 다음 어떤 문서 객체의 background-image 스타일 속성을 선택하는 코드 중 오류가 발생하는 코드는?

① tag.style['background-image']

② tag.style['backgroundImage']

③ tag.style.background-image

④ tag.style.backgroundImage

더보기 < 정답 - 05 > ③ tag.style.background-image -> 스타일 시트의 background-image 속성을 자바스크립트에서 스타일 식별자로 변환하려면 backgroundImage 식별자를 사용해야 한다. 문자열을 사용해서 스타일 속성에 접근할 때는 style['backgroundImage'] 혹은 style['background-color'] 둘 다 사용할 수 있다.

06 다음 코드의 문제와 해결 방법을 설명하시오.

Document Object Model var element = document.getElementById('element'); element.style.color = 'red'; element.innerHTML = 'From JavaScript'; Lorem ipsum dolor amet

더보기 < 정답 - 06 > head 태그 안에 위치한 script 태그에서 이벤트 연결이 되지 않았다. 따라서 이벤트 연결을 해주어야 한다. 아래 코드에서는 고전 이모델을 사용하여 연결하였다. Document Object Model window.onload = function () { var element = document.getElementById('element'); element.style.color = 'red'; element.innerHTML = 'From JavaScript'; } Lorem ipsum dolor amet

07 다음 코드에서 h1 태그를 선택할 수 있는 자바스크립트 코드를 작성하시오.

Lorem ipsum dolor amet

더보기 < 정답 - 07 > Lorem ipsum dolor amet ① var header = document.getElementById('element'); ② var header = document.querySelector('h1'); ③ var header = document.getElementsByClassName('header'); ④ var header = document.querySelectorAll('h1');

08 다음 코드의 실행 결과를 그리시오.

Query Selector Header - 1 Header - 2 Header - 3 var header = document.querySelector('h1'); header.style.color = 'white'; header.style.backgroundColor = 'black';

더보기 < 정답 - 08 >

다음글 : Chapter11 연습문제 (정답) 바로가기

from http://h4n3ul.tistory.com/23 by ccl(A) rewrite - 2021-12-07 15:00:25