[JavaScript] JavaScript의 구조

JavaScript 구조

---

• 자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어

• HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현

• JavaScript는 객체 기반의 스크립트 언어입니다.

• JavaScript는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어입니다.

• JavaScript는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있습니다.

하지만 인터프리터 언어는 이러한 컴파일 작업을 거치지 않고, 소스 코드를 바로 실행할 수 있는 언어를 의미합니다. 자바스크립트는 웹 브라우저에 포함된 자바스크립트 인터프리터가 소스 코드를 직접 해석하여 바로 실행해 줍니다. =(.V8 엔진) C언어와 같은 언어는 소스 파일을 작성한 후, 해당 파일을 컴파일(compile)하여 사용자가 실행할 수 있는 실행 파일(.exe)로 만들어 사용합니다.

• 프로토 타입

  • 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속

  • 

    

• 타입 구조도

  • [수 (Number)](https://developer.mozilla.org/ko/docs/ko/Web/JavaScript/Reference/Global_Objects/Number)

  • [문자열 (String)](https://developer.mozilla.org/ko/docs/ko/Web/JavaScript/Reference/Global_Objects/String)

  • [부울 (Boolean)](https://developer.mozilla.org/ko/docs/ko/Web/JavaScript/Reference/Global_Objects/Boolean)

  • [기호 (Symbol)](https://developer.mozilla.org/ko/docs/ko/Web/JavaScript/Reference/Global_Objects/Symbol)

  • 객체 (Object)

    • [함수 (Function)](https://developer.mozilla.org/ko/docs/ko/Web/JavaScript/Reference/Global_Objects/Function)

      • 클로져 : 함수와 함수에 의해 생성되는 범위 객체를 함께 지칭하는 용어

    • [배열 (Array)](https://developer.mozilla.org/ko/docs/ko/Web/JavaScript/Reference/Global_Objects/Array)

    • [날짜 (Date)](https://developer.mozilla.org/ko/docs/ko/Web/JavaScript/Reference/Global_Objects/Date)

    • [정규식 (RegExp)](https://developer.mozilla.org/ko/docs/ko/Web/JavaScript/Reference/Global_Objects/RegExp)

  • [널 (Null)](https://developer.mozilla.org/ko/docs/ko/Web/JavaScript/Reference/Global_Objects/null)

  • [정의되지 않음 (Undefined)](https://developer.mozilla.org/ko/docs/ko/Web/JavaScript/Reference/Global_Objects/undefined)

  • [오류](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Error)

• 제어구조

  • if else

  • while / do while

  • for

  • switch

DOM의 개념

---

문서 객체 모델(DOM)이란?

(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스

DOM은 W3C의 표준 객체 모델

• DOM 의 종류

  • core DOM : 모든 문서 타입을 위한 DOM 모델

  • HTML DOM : HTML 문서를 위한 DOM 모델

  • XML DOM : XML 문서를 위한 DOM 모델

• Document 객체

  • Document 객체는 웹 페이지 그 자체를 의미합니다.

    웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작

  • Document 메소드

    Document 객체는 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공합니다.

    • HTML 요소의 선택

    • HTML 요소의 생성

    • HTML 이벤트 핸들러 추가

    • HTML 객체의 선택

  •  


• DOM 요소 선택

  1. HTML 태그 이름(tag name)을 이용한 선택

  2. 아이디(id)를 이용한 선택

  3. 클래스(class)를 이용한 선택

  4. name 속성(attribute)을 이용한 선택

  5. CSS 선택자(selector)를 이용한 선택

  6. HTML 객체 집합(object collection)을 이용한 선택

• 노드

  • HTML DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장하고 있습니다.

  • HTML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해 주는 역할

    

    

  • HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장

• W3C HTML DOM 표준에 따르면, HTML 문서의 모든 것은 노드

  • 문서노드 : HTML 문서 전체를 나타내는 노드임.

  • 요소노드 : 모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드임.

  • 속성노드 : 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있음.

    하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않음.

  • 텍스트 노드 : HTML 문서의 모든 텍스트는 텍스트 노드임.

  • 주석 노드 : HTML 문서의 모든 주석은 주석 노드임.

브라우저 객체 모델

---

브라우저 객체 모델(BOM)이란?

자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있습니다.

이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)입니다.

브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아닙니다.

하지만 이 모델은 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고

관리할 방법을 제공해 줍니다.

자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있습니다.

• Window 객체

  • window 객체는 웹 브라우저의 창(window)을 나타내는 객체로, 대부분의 웹 브라우저에서 지원

  • 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 됩니다.

    window 객체의 메소드는 전역 함수이며, window 객체의 프로퍼티는 전역 변수가 됩니다.

    문서 객체 모델(DOM)의 요소들도 모두 window 객체의 프로퍼티가 됩니다.

    ex) window.*

• Location 객체

• History 객체

• Screen 객체

• Navigator 객체

• 대화상자

• 타이머

summary

BOM(브라우저 객체 모델) 위에 Javascript와 DOM객체 모델이 올라간다.

BOM은 DOM객체 모델을 보여주는데, 이를 동적으로 다루기 위해서 Javascript가 각 DOM과 BOM의 전역객체를

가져와서 사용한다. 그리고 짜여진 Javascript 코드를 브라우저의 V8엔진이 가능하게 해준다.

컴파일러와 인터프리터의 차이는?

**인터프리터의 특성**을 4가지로 정리하자면

1. 컴파일러는 소스코드 전체를 한 번 훑고 컴퓨터 프로세서가 실행 할 수 있도록 바로 기계어로 변환한다. 인터프리터는 고레벨 언어를 중간 코드(intermediate code)로 변환하고 이를 각 행마다 실행한다. 이 중간 코드는 다른 프로그램에 의해 실행된다.

2. 일반적으로 컴파일러가 각 행마다 실행하는 특성을 가진 인터프리터보다는 실행시간이 빠르다.

3. 컴파일러는 전체 소스코드를 변환 한 뒤 에러를 보고하지만 인터프리터는 각 행 마다 실행하는 도중 에러가 보고되면 이후 작성된 코드를 살펴보지 않는다. 이는 보안적인 관점에서 도움이 된다.

4. 예를 들어 파이썬은 인터프리트 언어이고 C, C++는 컴파일 언어이다. 자바는 컴파일러와 인터프리터 모두 사용한다.

5. **인터프리팅의 첫 번째 장점은 플랫폼에 종속되지 않는다.** 물론 컴파일러를먼저 수행하고 인터프리팅 하는 과정 때문에 컴파일 과정만 필요한 프로그래밍 언어보다는 속도가 느리다.

6. 자바 바이트코드는 컴퓨터와 프로그램 사이에 별도의 버퍼역할을 한다.

일반적으로 인터프리터는 한줄 단위로 변환 및 실행을 반복한다고 생각해야한다.

• V8엔진

  • 인터프리터를 이용하는 대신 JavaScript 코드를 좀더 효율적인 기계어 코드로 번역

  • JIT(Just-In-Time) 컴파일러를 적용하여 JavaScript 코드를 실행할 때 컴파일하여 기계어 코드로 만든다.

• V8 이 어떻게 javascript 코드를 최적화 하는지?(추가적으로 알아봐야할 것...)

  인라이닝 : 호출 지점(함수가 호출된 곳의 코드 위치)을 호출된 함수의 내용으로 바꾸는 과정

  히든 클래스 : [??]..어렵다

  자바와 같은 언어에서 사용되는 고정 객체 레이아웃과 유사하게 작동하는데 다만 런타임에 생성된다는 차이점

  인라인 캐싱 : 인라인 캐싱은 같은 메소드에 대한 반복되는 호출은 같은 타입의 객체에 이루어진다는 관찰 결과에 의존

  Numbers

  배열