Where the light is

- 문서 객체의 스타일 조작 1) 개념 문서 객체의 style 속성을 사용하면 해당 문서 객체의 스타일을 변경할 수 있다. 굳이 자바스크립트에서 style 속성을 사용하여 스타일을 변경하는 이유는 무엇일까? 이는 사용자의 입력에 따라 동적으로 스타일을 조작하고 싶은 경우가 많기 때문이다. 2) 주의 1. style의 속성은 스타일 속성 이름을 그대로 입력하면 안된다. 그 이유는 자바스크립트는 -을 식별자에 사용할 수 없기 때문이다. 따라서 이를 위해 camelCase를 사용한다. 2. style의 속성들에 넣는 값은 스타일에서 입력하는 것과 같은 형식으로 입력해야 한다. 가령 자바스크립트에서는 너비의 단위를 지정하지 않지만, 스타일에서는 px과 같은 단위를 지정해야 하기 때문에 이를 추가해주어야 한다. ..

- 문서 객체 가져오기 1) 다음은 document 객체의 문서 객체 선택 메서드를 정리한 표이다. 메서드 이름 설명 getElementById(id) id와 일치하는 문서 객체를 가져온다. getElementsByName(name) name이 일치하는 문서 객체들을 배열로 가져온다. getElementsByTagName(tagName) tagName이 일치하는 문서 객체를 배열로 가져온다. querySelector(선택자) 선택자로 가장 처음 선택되는 문서 객체를 가져온다. querySelectorAll(선택자) 선택자로 선택되는 문서 객체를 배열로 가져온다. 2) getElementById() id로 문서의 객체를 가져오는 메서드이다. id가 중복되는 경우, 자바스크립트는 처음 만나는 id 객체를 가..

- 문서 객체 모델 1) 개념 문서 객체 모델은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식이며, 좁은 의미로는 document 객체와 관련된 객체의 집합이다. 다음 그림은 트리 구조인 문서 객체 모델을 표현한 것이다. 이때 head, body와 같은 HTML 태그를 요소 노드라고 하며, "Header", 'Index"와 같은 요소 노드 안에 들어 있는 글자를 텍스트 노드라고 한다. 2) 텍스트를 갖는 노드의 생성과 노드의 연결 다음 표는 요소 노드와 텍스트 노드를 생성하는 document 객체의 메서드를 정리한 표이다. 메서드 이름 설명 createElement(tagName) tagName의 요소 노드를 생성함 createTextNode(text) text라는 글자를 가지는 텍스트 노드..

다음 예제는 history 객체와 location 객체를 응용하여 만든 간단한 프로그램이다. 각 버튼에 대한 onclick 이벤트 리스너와 이벤트 핸들러를 연결하여 history의 back, forward, go 메서드와 length 속성, 그리고 location의 href 속성을 테스트한 것을 볼 수 있다.

- location 객체 1) 개념 location 객체는 브라우저의 주소 표시줄과 관련된 객체이다. 2) 속성 다음은 location 객체의 속성을 정리한 표이다. 속성 이름 설명 href 문서의 URL 주소 host 호스트 이름 + 포트 번호 hostname 호스트 이름 port 포트 번호 pathname 디렉토리 경로 hash 앵커 이름 search 요청 매개 변수 protocol 프로토콜 종류 location 객체는 다음의 메서드가 있다. 속성 이름 설명 assign(link) 현재 위치를 이동 reload() 새로 고침 replace(link) 현재 위치를 이동 assign 메서드와 replace 메서드는 모두 현재 위치를 link로 이동하는 데 사용한다. assign은 이동 전 현재 웹 페이지..

- 브라우저 객체 모델 브라우저 객체 모델 (Browser Object Model)은 웹 브라우저와 관련된 객체의 집합을 나타낸다. 대표적인 브라우저 객체 모델로는 window, location, navigator, history, screen, document 객체가 있다. 다음은 브라우저 객체 모델을 나타낸 그림이다. - window 객체 1) 개념 window 객체란 브라우저 기반 자바스크립트의 최상위 객체이다. 글로벌 scope 객체들은 사실 window의 속성이다. 2) 메서드 window 객체는 새로운 window 객체를 생성하는 open 메서드를 제공한다. open 메서드는 새로운 팝업 창 혹은 새로운 탭을 띄운다. 다음은 open 메서드의 syntax이다. 메서드 이름 속성 open(URL..

- history 객체 history 객체는 사용자가 travel한 웹 페이지의 기록이 저장된 객체이다. history 객체는 다음 4가지의 기본 속성을 제공한다. 1) length travel한 웹 페이지의 개수가 저장된 속성이다. 2) back, forward back은 현재 페이지에서 바로 전 페이지로 이동하는 메서드이며, forward는 다음 페이지로 이동하는 메서드이다. 3) go go(numb)은 현재 페이지에서 numb만큼 페이지 이동이 발생하는 메서드이다. 가령 go(2)의 경우 두 페이지 앞으로 이동하며, go(-2)의 경우 두 페이지 뒤로 이동한다. - 이벤트 처리 순서 1) 이벤트 처리 할 요소 대상 객체를 가지고 온다. 2) 이벤트 핸들러를 정의한다. 3) 이벤트 핸들러와 이벤트 리..

- URL이란 1) 브라우저는 서버로 웹 컨텐츠를 요청하는 데, 이때 브라우저가 서버에게 어떤 웹 컨텐츠가 필요한 지 알려주는 방식이 URL이다. 2) URL은 host와 path name으로 구성되어 있다. host는 호스트 이름과 포트 번호를 나타내고, 이것이 서버의 주소가 된다. 일반적으로 웹의 포트 번호는 80이고, 포트 번호 80을 사용하는 경우 host에 포트 번호를 생략할 수 있다. 그럼 브라우저가 필요한 웹 컨텐츠는 어떻게 요청할까? 그것이 path name이다. www.naver.com의 경우 path name 주소가 없는데, 이는 default path name (index.html과 같은)이 적용되기 때문이다.

- JSON 객체 JSON이란 (JavaScript Object Notation)의 약자로, 정보들을 자바스크립트 객체를 표현하는 방법으로 표기하는 것을 뜻한다. ECMAScript 5부터 정식적으로 JSON 객체를 지원한다. JSON 객체는 자바스크립트 객체와 JSON 문자열 사이의 변환을 도와주는 메서드를 제공하는데, 자바스크립트 객체에서 JSON 문자열로 변환은 stringify, 그 반대의 경우 parse 메서드를 사용한다. 다음은 person이라는 객체를 JSON 문자열로 변환하고, 다시 원래 객체로 변환하는 예제이다.

4) filter(), every(), some() 다음은 ECMAScript 5 Array 객체의 조건과 관련된 메서드를 정리한 표이다. 메서드 이름 설명 filter() 특정 조건을 만족하는 요소를 추출해 새로운 배열을 만든다. every() 배열의 요소가 특정 조건을 모두 만족하는 지 확인한다. some() 배열의 요소가 특정 조건을 적어도 하나 만족하는지 확인한다. 조건과 관련된 메서드도 배열의 요소들을 하나씩 접근하기 때문에, forEach() 메서드와 유사하게 동작한다. 다음은 filter, every, some 함수를 테스트한 예제이다. 첫 번째 결과로는 3보다 큰 요소들로 이루어진 배열을 출력하며, 두 번째 결과로는 3보다 작은 요소가 있으므로 false를, 세 번째 결과로는 3보다 큰 요..