Web/Javascript

[문제 상황] javascript를 통해 DOM 을 핸들링 하는과정에서 "스타일 시트에서 사용하던 스타일 속성 이름을 그대로 입력하면 오류가 난다." [Solution] 1. Camel Case 사용 2. .['string'] 콤마로 감싸기 사용

0. Web Rendering 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진(ex. V8 in Chrome)은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM Tree이다. 이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다. 1. 정의 넓은 의미: 웹 브라우저가 HTML 페이지를 인식하는 방식 좁은 의미: document 객체와 관련된 객체..

1. Array 생성자 함수 Prototype에 Remove 메소드 정의 splice method 사용하여 정의한 Array.prototype.remove 메소드 맹점이 하나 있다. index 0 1 2 3 4 5 6 7 8 9 value 19 24 56 60 71 68 40 80 91 100 50이하의 원소는 삭제해야되는데 대체 왜 24는 살아남았는가? (19와 40은 정상적으로 삭제되었다.) remove가 일어날 때마다 배열이 재정렬 되기 때문이다. 즉 for loop 1번째 싸이클에서 19가 삭제되면 배열상태는 다음과같아진다. index 0 1 2 3 4 5 6 7 8 value 24 56 60 71 68 40 80 91 100 원래 index 1에 해당하던 원소 '24'가 index 0으로 당겨진..

Custom type => `instancof` Primitive type => `typeof` typeof num1, num2의 타입이 다르게 출력된다. num2를 생성자 new를 통해 생성했기 때문이다. const actionTypes = ['play','connect', 'disconnect', 'cancel']; const userId = undefined; console.log(typeof actionTypes); //object console.log(typeof userId); // undefined console.log(typeof undefined); // undefined console.log(typeof null); // object constructor 인스턴스의 '프로토타입'의 참조..

1. 소스 코드 문제점 제시 다음 코드를 보고 문제점을 짚어보자 모든 학생 객체가 show_info, get_total_sum, get_average라는 메소드가 같은 기능을 하는데도 불구하고 별도의 메모리를 다 할당받는다. (메모리 낭비 쓰레기..) 개개인의 이름, 수학, 영어 점수는 다르지만 "모든 객체가 공통의 메소드를 공유할 수 없을까?" 에서 나온것이 Prototype Method! 메모리 절약에 아주 특효약 Javascript는 이 프로토타입을 생성하기를 적극 권장하는 언어이고 대부분의 API 보면 Prototype이 아주 자주 등장한다. 모든 Javascript 메소드는 Prototype Object를 갖는다. 객체별 메소드 재정의가 용이하여 메소드를 커스터마이징 할 수 있어 유지보수에도 유..

긴 말 필요없이 소스코드를 보자. 생성자 Student 선언 생성자 호출 instanceof 메소드 instanceof 메소드 [구문] object_name instanceof Constructor_name(==Class_name) ※ Return type is Boolean (true or false) [용도] Object의 Prototype 혹은 Constructor 이름이 맞는지 확인 생성자의 prototype 속성이 객체의 프로토타입 체인에 존재하는지 판별. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/instanceof [다음편] 프로토타입에 대해 아라보자. https://m-falcon.tistory.com/..