Skip to content

0609.md

Latest commit

 

History

History
348 lines (300 loc) · 17 KB

0609.md

File metadata and controls

348 lines (300 loc) · 17 KB

Strict 모드(JavaScript) === 엄격모드

  • strict 모드는 코드에 더 나은 오류 검사를 적용하는 방법입니다.strict 모드를 사용하면, 예를 들어 암시적으로 선언한 변수를 사용하거나 읽기 전용 속성에 값을 할당하거나 확장할 수 없는 개체에 속성을 추가할 수 없습니다.
    간략히 말해 엄격한 문법검사를 하겠다는 것! 엄격모드!

    strict 모드는 Internet Explorer 10 이전의 Internet Explorer 버전에서 지원되지 않습니다.

1. 엄격(strict) 모드 선언

  • ES5에서 추가된 엄격 모드(Strict Mode)는 기능 추가가 아닌, 오류 발생 가능성이 있는 코드를 제거하는 역할을 한다. 엄격 모드를 지원하는 브라우저에서는 오류 발생 가능성이 있는 코드 작성 시 오류를 발생하지만, 지원하지 않는 구형 브라우저는 이를 단순하게 무시한다. 즉, 호환성에 문제는 없다. (하위 호환성 유지) 엄격 모드는 개별적인 유효범위(함수, 전역 유효범위 등)를 갖는다.
  • 선언방법 : 내부 첫 라인에 아래와 같이 'use strict' 문자열을 선언한다.
(function(global){
  'use strict';
  // yamoo9 = '야무';        // [X]
  global.yamoo9 = '야무';    // [O]
  console.log('yamoo9:', yamoo9);
})(window);

2. 엄격(strict) 모드로 변경시

  • 엄격 모드는 구문과 런타임 동작을 모두 변경합니다.

    실수를 에러로 바꾸는 것!

    • 엄격한 모드는 일부 오류를 에러로 바꿔 놓습니다.엄격한 모드는 이러한 실수를 발견하고 즉시 수리할 수 있도록 오류를 처리합니다.

    아래 예시에서 엄격모드 구문('use strict)가 없을 경우, new키워드 없이 생성자 함수를 사용하면 this는 의도치 않은 객체를 가리키며 프로그램을 고장낸다. 이때 엄격모드가 발동되면 해당 내용을 오류로 인식하여 에러가 발생한다.

var fds = function(){
  // 엄격모드 발동
  'use strict';

  // 사용자 정의 객체(UI 컴포넌트) 생성자 함수
  var Slider = function(min, max, value, step){
    'use strict';
    
    // new를 강제화 하는 패턴
    if ( this.constructor !== Slider ) {
      return new Slider(min, max, value, step);
    }
    // console.log('this ------', this);
    this.min   = min   || 0;
    this.max   = max   || 100;
    this.value = value || 0;
    this.step  = step  || 1;
  };
  // Slider 사용자 정의 객체(UI 컴포넌트)의 프로토타입
  Slider.prototype = {
    constructor: Slider,
    // 메서드
    move: function() {},
    stop: function() {}
  };
  // 노출 패턴
  return  {
    // UI 카테고리
    ui: {
      Slider: Slider
    }
  };

}();

사용자 정의 객체 생성자 함수

위의 예제를 통한 분석

  1. namespace 가진 전역객체를 생성
var fds = function(){
    return {};
}
  1. 사용자 정의 객체(UI 컴포넌트) 생성자 함수 생성
var Slider = function(min, max, value, step){
     console.log('this ------', this);

     this.min = min || 0;
     this.max = max || 100;
     this.value = value || 0;
     this.step = step || 1;
 };
  • this는 {}(객체)이기 때문에 여기서 Slider를 new를 통해 호출을 한다면 min, max, value, step을 가진 객체가 반환된다.
  • new 키워드 없이 생성자 함수를 사용하면 this는 의도치 않은 객체를 가리켜 프로그램을 고장낸다. (전역객체의 속성으로 추가가 됨)
  1. new를 강제화 하는 패턴
var Slider = function(min, max, value, step){

     //this의 constructor가 Slider가 아니면 Slider 객체를 반환
     if ( this.constructor !== Slider ) { 
         return new Slider(min, max, value, step); 
         // or
         return new Slider.apply(null, [min, max, value, step]);
     }

     /*
         logic ....
     */
};
  • this의 constructor가 Slider를 가리키지 않을 경우 new Slider()를 return을 해 Slider를 가리키도록 만든다.
  1. Slider 생성자 함수의 prototype을 설정.
Slider.prototype = {
     constructor: Slider,
     move: function() {},
     stop: function() {}
};
  1. 노출 패턴
return  {
     ui: {
     Slider: Slider
     }
};

생성자 함수에서 엄격 모드를 사용하는 경우와 사용하지 않는 경우 this의 변화

function Fan(name) {
     'use strict';
     console.log(this);
     this.name = name;
 }

 // 엄격 모드를 사용하지 않을 경우
 new Fan(); // this === Fan {}
 Fan();     // this === window {}

 // 엄격 모드를 사용할 경우
 new Fan(); // this === Fan {}
 Fan(); // this === undefined (명시적으로 실행하지 않아서)
  • 엄격모드(use strict)를 사용하지 않을 때 this는 window를 가리킨다.
  • 엄격모드를 사용할 때 this는 명시적으로 함수를 실행한 대상이 없어 undefined가 나온다.

JavaScript 파일 병합(Combine, Merge) 시에 IIFE패턴은 문제를 일으킬 소지가 있다.

  • nodejs(서버)에서 파일을 병합시 ;(세미콜론)이 포함이 안되면 끝을 구분을 못하기 때문에 에러가 난다.
(function(){
  
}()) 여기서 에러 (function(){
    
}());

// --------------------------------------------
// 해결방법 세미콜론이 중첩이 가능하다는 것을 이용.
// 미리 방지하는 개념.
-> ;(function(){

}()) 
-> ;(function(){
    
}());

BOM

Browser Object Model

1. Browser Object Model(BOM 이란?)

  • 브라우저 객체 모델
  • 브라우저를 구성하는 객체들의 관계도
  • 웹브라우저의 창이나 프래임을 프로그래밍적으로 제어할 수 있도록 제공하는 수단
  • 웹 브라우저 창 에선 (window {})
  • window 객체는 전역 객체이다.
  • 사용자가 창(탭)을 생성하면 내부적으로는 new Window(); // window {}

2. 전역 객체: window 객체

  • 최상위 객체이며, 생략될 수 있기에 눈에 보이지 않을뿐, 모든 변수와 객체, 함수들이 Window 객체안에서 선언되고 실행되고 있다.
  • 여러개의 창을 출력한 상태라면, 각각의 창은 고유의 window 객체를 지니며, 고유의 실행 컨텍스트를 정의하게 된다.
  • Window 객체 계층구조
- console.log(window);

3. 스크린 객체

  • window.screen 객체는 사용자의 화면을 나타내며, 여기에는 사용자 화면의 크기 정보, 사용 가능한 색상의 수가 포함된다.
  • 가로(너비), 세로(높이) 정보
  • 가용(Avail) 가능한 가로/세로 정보
  • 컬러 심도 정보
 window.screen

4. 로케이션 객체

  • location 객체는 현재 문서의 URL과 관련된 정보를 가지고 있다.
location.protocol https://
location.host www.google.co.kr
location.search ?gfe_rd=cr&ei=yBY6WfKrJ6WL8Qf-oKj4Dw
location.hash #newwindow=1&q=%EC%B4%88%EB%B3%B5
location.href https://www.google.co.kr/?gfe_rd=cr&ei=yBY6WfKrJ6WL8Qf-oKj4Dw#newwindow=1&q=%EC%B4%88%EB%B3%B5
window.location

5. 히스토리 객체

  • history 객체는 사용자 히스토리에서의 앞 뒤 이동이 가능하도록 유용한 메서드와 속성들을 제공하며, history stack의 내용을 조작할 수 있게한다.
var his = window.history;
// 메서드
his.back(); //이전페이지로 이동
his.forward(); // 다음페이지로 이동
his.go(); //히스토리에 저장되어있는 특정 페이지로 이동

6. 내비게이터 객체

  • 브라우저의 정보를 제공하는 객체다. 주로 호환성 문제등을 위해서 사용한다.
  • 브라우저 스니핑 (방문자가 사용중인 웹 브라우저를 확인하고 방문자에게 브라우저에 적합한 콘텐츠를 제공하기 위해 웹 사이트 및 웹 응용 프로그램에 사용되는 기술 집합.)
console.dir(navigator); //객체의 모든 프로퍼티를 열람할 수 있다.
window.navigator
  • 온라인/오프라인 유무 (불리언 값 반환)
function isOnline() {
 return window.navigator.onLine;
}
function isWindows() {
 return window.navigator.platform.toLowercase().indexOf('win') > -1;
}
function isMac() {
 return window.navigator.platform.toLowercase().indexOf('mac') > -1;
}

7. 브라우저 식별

function whatIsBrowser() {
  var ua = window.navigator.userAgent.toLowerCase();
  var browsers = ['chrome', 'safari', 'firefox', 'ie', 'opera'];
  var check_browsers = {
    chrome: false,
    safari: false,
    firefox: false,
    ie: false,
    opera: false
  };
  for ( var i=0, l=browsers.length; i<l; ++i ) {
    var browser = browsers[i];
    switch(browser) {
      case 'chrome':
        check_browsers.chrome = ua.indexOf(browser + '/') > -1;
      break;
      case 'safari':
        check_browsers.safari = ua.indexOf('chrome/') === -1 && ua.indexOf(browser + '/') > -1;
      break;
      case 'firefox':
        check_browsers.firefox = ua.indexOf(browser + '/') > -1;
      break;
      case 'ie':
        check_browsers.ie = ua.indexOf('rv:11.0') > -1 || ua.indexOf('trident/') > -1 || ua.indexOf('msie/') > -1;
      break;
      case 'opera':
        check_browsers.opera = ua.indexOf('opr/') > -1;
      break;
    }
  }
  return check_browsers;
}

function isChrome() {
  return window.navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
}

DOM(Document Object Model)

DOM Level 0 (Legacy DOM)

  • Netscape사와 Microsoft사와의 점유율 전쟁으로 인해 많은 객체들이 만들어 졌고 표준화 이전에 만들어진 이런 객체들이 비공식적으로 DOM Level 0 으로 알려져 있다.
  • 많은 객체들이 만들어지면서 문서의 모든 객체에 접근이 가능해지고 CSS를 사용하여 속성을 변경 제어할 수 있게 되었다.

DOM LEVEL 1

기업 간 합의를 통해 표준화가 진행되던 시대

  doucment.getElementById() => Node
  (ElementNode || doucment).getElementsByTagName() => NodeList

  • 이 사양은 프로그램 및 스크립트가 문서의 내용, 구조 및 스타일에 동적으로 접근(Access)하고 업데이트 할 수 있게 해주는 플랫폼 및 언어 중립적인 인터페이스 문서 객체 모델 레벨 1을 정의합니다.

  • Document Object Model은 HTML 및 XML 문서를 표현하기 위한 표준 객체 집합으로,이러한 객체를 결합 할 수 있는 표준 모델 및 객체 접근 및 조작을위한 표준 인터페이스를 제공합니다.

  • 공급 업체는 독점적인 데이터 구조 및 API에 대한 인터페이스로 DOM을 지원할 수 있으며 콘텐츠 작성자는 제품 별 API가 아닌, 표준 DOM 인터페이스에 쓸 수 있으므로 웹에서 상호 운용성이 향상됩니다.

  • DOM 사양의 목표는 XML 및 HTML을 위한 프로그래밍 방식의 인터페이스를 정의하는 것입니다. DOM Level 1 사양은 Core와 HTML의 두 부분으로 구분됩니다.

  • Core DOM Level 1 섹션은 XML 문서를 표현하기 위한 확장된 인터페이스를 정의 할뿐만 아니라 모든 구조화 된 문서를 나타낼 수있는 저 수준의 기본 인터페이스 집합을 제공합니다. 이러한 확장 XML 인터페이스는 HTML 문서에 대한 접근만 제공하는 DOM 구현으로 구현할 필요는 없습니다. 핵심 섹션의 모든 기본 인터페이스를 구현해야합니다. 확장된 XML 인터페이스를 구현하는 호환 DOM 구현은 HTML 인터페이스가 아닌 기본 핵심 인터페이스도 구현해야 합니다.

  • HTML 레벨 1 섹션은 추가, 코어 레벨 1 섹션에서 정의된 기본 인터페이스와 함께 사용되는 더 높은 수준의 인터페이스로 HTML 문서를 보다 편리하게 볼 수 있습니다.

  • HTML DOM의 호환 구현은 HTML 인터페이스뿐만 아니라 모든 기본 Core 인터페이스를 구현합니다.

DOM Level 2

화합이 무너지고 기업간 경쟁이 다시 점화되는 시기

  • Events 모델 -> 업그레이드
  • DOM레벨1은 HTML, XML문서 구조를 정의하는데 초점이 맞춰져있습니다.
  • 레벨2와 레벨3은 위 구조에 따른 상호작용 기능 추가 및 고급 XML기능을 지원합니다.
  • 서로 관련있는 아래와 같은 모듈로 구성되어있습니다.
  • DOM 코어 : 레벨 1 코어를 바탕으로 노드에 메서드와 프로퍼티를 추가.
  • DOM 뷰 : 스타일 정보를 바탕으로 여러가지 문서 뷰 정의
  • DOM 이벤트 : 이벤트에 기반한 DOM 문서 상호작용 방법 정의
  • DOM 스타일 : CSS스타일 정보에 접근하고 변경하는 방법 정의
  • DOM 이동과 범위 : DOM문서를 이동하고 특정 범위를 선택하는 새 인터페이스 정의
  • DOM HTML : 레벨1 HTML에 기반하여 새 인터페이스와 프로퍼티, 메서드를 추가
    참고사이트1 * * *

Microsoft 사의 기술 문서

  • 이벤트 버블링만 지원 window.event
  • window.event는 DOM 이벤트 핸들러가 호출되는 동안에만 사용할 수 있는 Microsoft Internet Explorer 속성입니다. 이 값은 현재 처리중인 Event 객체입니다. window.event.srcElement
  • Event.srcElement는 표준 Event.target 속성에 대한 독점적 인 별칭입니다. 이전 버전의 Microsoft Internet Explorer에만 적용됩니다.
    *srcElement 속성은 이전 버전과의 호환성을 위해 제공됩니다. 대신 target 속성을 사용하십시오..attachEvent()
  • 지정된 함수를 이벤트에 바인딩하여 해당 객체에서 이벤트가 발생할 때마다 함수가 호출되도록 합니다.
  • Internet Explorer11부터는 addEventListener 사용 .detachEvent()
  • 이벤트가 발생할 때 함수가 알림 수신을 중지 할 수 있도록 이벤트에서 지정된 함수를 바인딩 해제합니다.* * *

W3C 표준 기술 문서

  • 이벤트 캡쳐링/버블링 모두 지원
  • 함수 내에 event 객체를 전달**event.target*** target 이벤트 속성은 이벤트를 트리거 한 요소를 반환합니다.
  • target 속성은 이벤트가 원래 발생했던 요소를 가져 오며, currentTarget 속성은 이벤트 리스너가 이벤트를 트리거 한 요소를 항상 참조합니다.

.addEventListener()

  • 메서드는 지정된 요소에 이벤트 처리기를 연결합니다.
  • 메서드는 기존 이벤트 처리기를 덮어 쓰지 않고 요소에 이벤트 처리기를 연결합니다.
  • 하나의 요소에 많은 이벤트 핸들러를 추가 할 수 있습니다.
  • 한 요소에 동일한 유형의 여러 이벤트 핸들러, 예를 들어 두 번의 “클릭“이벤트를 추가 할 수 있습니다.
  • 메서드를 사용하면 이벤트가 버블 링에 반응하는 방식을보다 쉽게 제어 할 수 있습니다.
  • 메서드를 사용할 때 JavaScript는 가독성을 높이기 위해 HTML 태그와 분리되어 있으며 HTML 태그를 제어하지 않아도 이벤트 리스너를 추가 할 수 있습니다.
  • 메서드로 첨부 된 이벤트 핸들러를 제거하려면 removeEventListener () 메서드를 사용합니다.

Syntax

element.addEventListener(event, function, useCapture);

  • 첫 번째 매개 변수는 이벤트 유형 (예 : ‘클릭‘또는 ‘마우스 다운‘)입니다.
  • 두 번째 매개 변수는 이벤트가 발생할 때 호출 할 함수입니다.
  • 세 번째 매개 변수는 이벤트 버블 링 또는 이벤트 캡처를 사용할지 여부를 지정하는 부울 값입니다. 이 매개 변수는 선택적입니다.

.removeEventListener()

  • addEventListener () 메서드로 연결된 이벤트 처리기를 제거합니다.
  • 이벤트 핸들러를 제거하려면 addEventListener () 메서드로 지정된 함수가 외부 함수 여야합니다.