공부를 합니다/언어 (Language) (26) 썸네일형 리스트형 웹브라우저 자바스크립트_6 DOM-4 (Node 객체) 6. DOM window에 로드된 문서를 제어하기 위한 object model 6.8 Node 객체 DOM의 최상위에 있는 객체. DOM의 모든 객체는 Node 객체를 상속받는다. 주요기능 관계: 각 Node 객체 사이의 관계를 부여 Node.childNodes Node.firstChild Node.lastChild Node.nextSibling Node.previousSibling Node.contains() Node.hasChildNodes() 노드의 종류: 각 Node(구성요소)가 어떤 카테고리에 속하는지 알려줌 Node.nodeType Node.nodeName 값: Node 객체의 값을 제공 Node.nodeValue Node.textContent 자식관리: Node 객체의 자식을 관리(추가 혹은.. 웹브라우저 자바스크립트_6 DOM-3 (Element 객체) 6. DOM window에 로드된 문서를 제어하기 위한 object model 6.7 Element 객체 HTMLElement: HTML에서 사용되는 태그를 포함하는 객체. HTMLElement를 포함하는 Element 객체가 존재한다. 문서상의 모든 element에 대한 특성을 정의. HTMLElement와 Element 객체를 구분한 이유 DOM은 HTML만을 대상으로 하지는 않기 때문이다. 모든 markup element를 대상으로 한다. (e.g., XML, SVG 등) Chrome 개발자 도구의 property를 이용해서 선택한 element가 소속된 모든 부모객체를 볼 수 있다. 다른 객체들과의 관계 주요기능 Element 객체의 주요 API 식별자: 문서 내의 element를 식별하는 용도... JavaScript: The Definitive Guide_3 Types, Values, and Variables Chapter 3. Types, Values, and Variable Type: 프로그래밍 언어에서 표현하고 처리할 수 있는 값들의 '종류' Variable: 나중에 사용할 값을 저장해놓는 곳. 프로그래밍 언어의 fundamental characteristic 지원하는 'type'의 종류 'Variable'이 동작하는 방식 JavaScript의 type Primitive type numbers, strings, booleans (3.1-3.3) null and undefined: JavaScript의 special value (3.4) /addition/ Symbol: ES6부터 등장한 new special-purpose type (최신판의 3.6) Object.. 웹브라우저 자바스크립트_6 DOM-2 (HTML Elements, HTMLCollection, jQuery 객체) 6. DOM window에 로드된 문서를 제어하기 위한 object model 6.4 HTML Elements getElements * 로 얻은 객체가 무엇인지 정확히 알아야 적절한 method나 property를 사용할 수 있다. constructor method를 이용해서 객체에 대한 정보를 얻을 수 있다. (e.g., countructor.name: 선택한 객체의 유형명) var li = document.getElementById('active'); console.log(li.constructor.name); // => HTMLLIElement var lis = document.getElementsByTagName('li'); console.log(lis.constructor.name); // =>.. 웹브라우저 자바스크립트_6 DOM-1 (제어대상을 찾기, jQuery) 6. DOM window에 로드된 문서를 제어하기 위한 object model 6.1 제어 대상을 찾기 DOM으로 문서를 제어하기위해 가장 먼저 해야할 일: 제어대상을 찾기 document.getElementsByTagName Tag의 이름이 전달한 argument와 같은 element들을 가져옴. var list = document.getElementsByTagName('li'); 문서 내의 태그들을 유사 배열로 가져와서 list 변수에 담는다. 유사 배열: Nodelist, 실제로 배열은 아니지만 배열처럼 접근이 가능하다. 특정한 태그 (e.g., ) 아래의 태그 (e.g., )만 선택하고 싶으면: 상위 태그를 먼저 받아서 변수에 저장한 뒤, 그 객체에서 다시 하위 element를 받는.. JavaScript: The Definitive Guide_2 Lexical Structures Chapter 2. Lexical Structure Lexical Structure: 해당 언어로 프로그램을 작성하기 위해 특정한 기본적인 규칙. 2.1 Character Set JavaScript 프로그램은 Unicode character set을 이용해서 적는다. 2.1.1 Chase Sensitivity JavaScript는 case-sensitive 하다. HTML은 case-sensitive 하지 '않기' 때문에 주의해야한다. 2.1.2 Whitespace, Line Breaks, and Format Control Characters JavaScript는 프로그램의 token 사이에 나타나는 space와 대부분의 line breaks를 무시한다. 일반적인 space characte.. JavaScript: The Definitive Guide_1 Introduction to JavaScript Chapter 1. Introduction to JavaScript JavaScript는 Web을 위한 프로그래밍 언어이다. JavaScript의 문법은 Java로부터, first-class function은 Scheme으로부터, prototype-based inheritance는 Self로부터 왔다. JavaScript: Names and Versions JavaScript는 Netscape에서 처음 만들었고 당시 이 언어를 표준화(standardization)를 위해 ECMA에 제출하면서 ECMAScript라는 이름을 갖게되었다. 책에서 주로 다루게 되는 버전은 ECMAScript version 3과 5이다. (Version 4는 문제가 많아 출시되지 않음) 가끔 JavaScript version을 .. 웹브라우저 자바스크립트_5 BOM 5. BOM (Browser Object Model) 웹 브라우저에 관련된 객체를 모아놓은 것 5-1. 전역객체 Window 모든 객체가 소속된 객체. Console에 window를 입력하면 window에 속한 객체들을 볼 수 있다. e.g: window.document, window.navigator, window.array window는 전역객체이다. 전역변수나 method가 아닌 일반 함수를 선언하면 모두 window에 속하게 된다. alert('Hello world')는 window.alert('Hello world')와 동일 a = 1이면 window.a도 값을 1로 갖는다. 즉 alert(a)와 alert(window.a)는 모두 1을 표시. 5-2. 사용자와 커뮤.. 이전 1 2 3 4 다음
