Navigator 객체

브라우저의 정보를 제공하는 객체다. 주로 호환성 문제등을 위해서 사용

Navigator

  • 주로 크로스 브라우징(각 브라우져는 w3c, ECMA 의 표준을 맞추어 구현하지만 완전히 같지는 않을 수 있음)을 위해 사용

  • 과거 웹표준이 명시되지 않았을 때 브라우져 마다 같은 기능을 수행하더라도 이름이 다름 브라우져 별로 분기하여 로직을 처리해야하는 문제가 발생(크로스 브라우징 이슈, 웹표준 이슈)

  • navigator 객체를 이용해 브라우져의 종류를 알 수 있음

console.dir()

  • console.log는 요소를 HTML과 같은 트리 구조로 출력합니다.

  • console.dir은 요소를 JSON과 같은 트리 구조로 출력합니다.

  • 구체적으로, console.log는 DOM 요소에 대해 특별한 처리를 제공하지만 console.dir은 그렇지 않습니다. 이것은 종종 DOM JS 객체의 전체 표현을 보려고 할 때 유용합니다.

Navigator 프로퍼티

  • appName : 웹 브라우져의 이름

  • appVersion: 브라우져의 버전

  • userAgent: 브라우져가 서버측으로 전송하는 USER-AGENT-HTTP 헤더의 내용

  • platform: 브라우져가 동작하고 있는 운영체

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <h1>Navigator 객체</h1>
  <h2>appName</h2>
  <script>
    document.write(navigator.appName);
  </script>
  <h2>appVersion</h2>
  <script>
    document.write(navigator.appVersion);
  </script>
  <h2>userAgent</h2>
  <script>
    document.write(navigator.userAgent);
  </script>
  <h2>platform</h2>
  <script>
    document.write(navigator.platform);
  </script>
</body>
</html>

기능 테스트

  • 브라우져가 어떠한 기능을 가지고 있는지 확인하는 기능

  • 기능을 가지고있다면 그 기능을 사용하고, 없다면 기능을 추가해주는 역할을 수행

// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
if (!Object.keys) {
  Object.keys = (function () {
    'use strict';
    var hasOwnProperty = Object.prototype.hasOwnProperty,
        hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
        dontEnums = [
          'toString',
          'toLocaleString',
          'valueOf',
          'hasOwnProperty',
          'isPrototypeOf',
          'propertyIsEnumerable',
          'constructor'
        ],
        dontEnumsLength = dontEnums.length;
 
    return function (obj) {
      if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null)) {
        throw new TypeError('Object.keys called on non-object');
      }
 
      var result = [], prop, i;
 
      for (prop in obj) {
        if (hasOwnProperty.call(obj, prop)) {
          result.push(prop);
        }
      }
 
      if (hasDontEnumBug) {
        for (i = 0; i < dontEnumsLength; i++) {
          if (hasOwnProperty.call(obj, dontEnums[i])) {
            result.push(dontEnums[i]);
          }
        }
      }
      return result;
    };
  }());
}
PreviousLocation 객체Next창 제어

Last updated

Was this helpful?