[JavaScript] "Do it! 자바스크립트 입문" - 9, 10장 | 폼 , 브라우저 객체 모델

"고경희. (2021). Do it! 자바스크립트 입문. 이지스퍼블리싱", 이 책은 자바스크립트 "입문자"에게 훌륭한 선택이다! 9, 10장을 통해 다지게 된 점은 다음과 같다.

 

9장 폼

1) name 값을 사용해 폼 요소 안에 있는 텍스트 필드에 접근하려면 <form>의 name값과 텍스트 필드의 name값을 사용한다.

document.<form>의 name값.텍스트 필드의 name값
document.forms["<form>의 name값"].elements["텍스트 필드의 name값"] // 이렇게도 접근할 수 있다.

 

2) id, class, name 속성도 없을 경우 폼 배열을 사용해 폼 요소에 접근할 수 있다.

document.forms[0].elements[0].value // 현재문서의.첫 번째 form의.첫 번째 요소의.값

 

3) 텍스트 필드를 검증해 오류 발생 시 select() 함수와 focus() 함수의 차이: select()는 [그림 1]과 같이 입력값을 선택하고, focus()는 [그림 2]와 같이 입력값을 지우고 커서를 위치시킨다.

[그림 1] select() 함수

 

[그림 2] focus() 함수

 

4) selectedIndex는 "선택 목록"에서 선택된 항목의 위치 값을 가져온다.

<select id="selected">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

document.querySelector("#selected").selectedIndex // 콘솔 창에서 입력하면 선택된 항목의 주소값을 얻을 수 있다.

 

5) Number(str), parseInt(str)의 차이

var num = Number('1000원'); // num에 NaN 저장
var num = parseInt('1000원'); // num에 1000이 저장
var num = parseInt('가격:1000원'); // num에 NaN이 저장

 

---

 

10장 브라우저 객체 모델(Browser Object Model)

1) 브라우저 객체 모델(Browser Object Model)은 자바스크립트로 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것이다.

2) 최상위 객체는 window, 그 아래 navigator, document, history, location, screen 등이 있다.

3) window: 웹 브라우저 제어

- open():

var newWin = window.open("https://www.daum.net", "","left=0, top=0, width=300, height=300") // 두 번째 파라미터는 새 창의 타깃

 

- resizeBy(): 상대적 크기 지정

newWin.resizeBy(100, 100) // 기존 창 크기에 가로, 세로 각각 +100
newWin.resizeBy(-100, -100) // 기존 창 크기에 가로, 세로 각각 -100

 

- resizeTo(): 절대적 크기 지정, 음수 값 사용할 수 없다.

newWin.resizeTo(200, 200) //  창 크기 가로, 세로 각각 200

 

- moveBy(): 상대적 위치 지정

newWin.moveBy(500, 500) // 현재 위치에서 가로, 세로 각각 500 위치 만큼 이동

 

- moveTo(): 절대적 위치 지정

newWin.moveTo(0, 0) // 화면 좌푯값 (0, 0)에 위치

※ 공식문서: https://developer.mozilla.org/ko/docs/Web/API/Window#Methods

 

4) navigator: 브라우저와 관련된 정보가 담겨있는 객체

- 렌더링 엔진 = 레이아웃 엔진(Layout Engine): 웹문서의 태그(HTML)와 스타일(CSS) 해석

- 자바스크립트 엔진

5) history: 브라우저에서 '뒤로', '앞으로', 주소 표시줄 입력한 사이트 주소가 저장되어 있는 객체

6) location: 현재 문서의 URL 주소 정보를 가지고 있는 객체

7) screen: 화면 크기나 정보 확인