전체 글81 10. DOM DOM 을 노드의 계층 구조로 이해 다양한 노드 타입 브라우저들 간의 비호환성을 우회하는 DOM 코딩 1. 노드의 계층 구조 HTML 과 XML 문서는 모두 DOM 을 통해 노드의 계층 구조로 표현 가능 Hello 문서 노드(Document) 는 각 문서를 루트로 표현함. 위에서 문서 노드의 자식은 하나 뿐인데 이를 문서요소 라고 함 문서 요소는 문서의 최상위 요소이며 다른 요소는 모두 이 안에 존재 문서 하나에 문서 요소 하나만 있을 수 있음 2. 다양한 노드 타입 2-1 Node 타입 DOM 레벨 1에는 Node 라는 인터페이스가 존재 각 노드에는 childNodes 라는 프로퍼티가 있는데 이 프로퍼티에는 NodeList 가 저장됨 NodeList는 처음 호출했을 때 얻은 결과를 저장하고 있는 것이 .. 2022. 7. 13. 8. 브라우저 객체 모델 다루는 내용 BOM 의 핵심인 window 객체에 대한 이해 창과 프레임, 팝업 컨트롤 location 객체에서 얻는 페이지 정보 navigator 객체를 통한 브라우저 이해 1. window 객체 웹페이지에서 정의한 모든 객체, 변수, 함수에서는 window 가 Global 객체 구실을 함 var age = 29; function sayAge() { console.log(this.age); } console.log(window.age); // 29 sayAge(); // 29 window.sayAge(); // 29 var 연산자를 써서 window에 추가한 프로퍼티는 [[Configurable]] 속성이 false 로 지정되기에 delete 를 통해 삭제 불가능 페이지에 프레임이 들어있으면 각 프레임.. 2022. 7. 13. 7. 함수 표현식 다루는 내용 함수 표현식의 특징 함수와 재귀 클로저를 이용한 고유(프라이빗) 변수 1. 함수 표현식의 특징 함수를 정의하는 방법은 함수 선언과 함수 표현식 2가지가 있음. 함수 선언에서 뚜렷한 특징은 호이스팅(hoisting)이다. sayHi(); function sayHi() { console.log("hi"); } // 함수 선언부를 다른 코드보다 먼저 읽고 실행함 함수 표현식은 일반적인 변수 할당과 거의 비슷하며 함수 이름이 없어 익명 함수로 간주함 sayHi(); // error var sayHi = function() { console.log("hi"); } // 다른 표현식과 마찬가지로 호출 하기 전에 할당해야함 함수 표현식은 다른 함수에서 사용할 수 있도록 함수를 반환하는 형태도 가능 fun.. 2022. 7. 13. 6. 객체 지향 프로그래밍 다루는 내용 객체 프로퍼티의 이해 객체의 이해와 생성 상속의 이해 1. 객체 프로퍼티의 이해 객체는 특별한 순서가 없는 값의 배열 (key-value 쌍의 그룹) 가장 단순한 방법은 var person = new Object(); person.name = "snack"; person.sayName = function() { console.log(this.name) }; var person = { name : 'snack', sayName: function() { console.log(this.name); } }; 프로퍼티에는 데이터 프로퍼티와 접근자 프로퍼티 두 가지가 있음. 데이터 프로퍼티에는 [[Configurable]] - 프로퍼티의 속성을 바꾸거나 접근자 프로퍼티로 변환할 수 있음을.. 2022. 7. 13. 5. 참조 타입 다루는 내용 객체로 작업하기 배열 생성하고 조작하기 자바스크립트의 데이터 타입 이해 원시 데이터 및 원시 래퍼로 작업하기 1. 객체로 작업하기 객체란 참조 타입이며 클래스와는 다르다. 1-1. Object 타입 가장 많이 사용하는 타입으로 new 연산자 혹은 객체 리터럴로 생성할 수 있다.1) var person = new Person(); 2) var person = {}; 객체 리터럴 표기법을 사용하면 Object 생성자를 호출하지 않으며, 프로퍼티가 여러개 일 때 가독성을 위해 사용하길 권함. 1-2. Array 타입 배열의 크기는 동적으로 할당되며, 배열 element 에 어떤 데이터 타입도 가능 Object 와 비슷하게 new 연산자 혹은 배열 리터럴로 생성 가능1) var colors1 = n.. 2022. 7. 13. 4. 변수, 스코프, 메모리 다루는 내용 변수의 원시값과 참조값 실행 컨텍스트의 이해 가비지 컬렉션의 이해 1. 원시값과 참조값 원시값은 기본타입(문자열, null, undefined etc), 참조값은 메모리에 저장된 객체(객체의 프로퍼티) 대부분의 언어에서는 문자열을 참조값으로 침 (Ex. Java String) 참조값의 경우 동적 프로퍼티가 가능 (원시값은 불가) 1) 참조값 var person = new Object(); person.name = "snack"; console.log(person.name); // snack 2) 원시값 var name = "snack"; name.age = 29; console.log(name.age); // undefined 값을 복사할 경우에도 원시값과 참조값은 서로 다름 1) 원시값 /.. 2022. 7. 13. 이전 1 ··· 8 9 10 11 12 13 14 다음