웹브라우저 JavaScript

Navigator 객체

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

아래 명령을 통해서 이 객체의 모든 프로퍼티를 열람할 수 있다.

console.dir(navigator);

주요한 프로퍼티를 알아보자.

appName

웹브라우저의 이름이다. IE는 Microsoft Internet Explorer, 파이어폭스, 크롬등은 Nescape로 표시한다.

appVersion

브라우저의 버전을 의미한다. 필자의 현재 브라우저 정보는 아래와 같다.

"5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36"

userAgent

브라우저가 서버측으로 전송하는 USER-AGENT HTTP 헤더의 내용이다. appVersion과 비슷하다.

"5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36"

platform

브라우저가 동작하고 있는 운영체제에 대한 정보다.

"Win32"

기능 테스트

Navigator 객체는 브라우저 호환성을 위해서 주로 사용하지만 모든 브라우저에 대응하는 것은 쉬운 일이 아니므로 아래와 같이 기능 테스트를 사용하는 것이 더 선호되는 방법이다. 

예를 들어 Object.keys라는 메소드는 객체의 key 값을 배열로 리턴하는 Object의 메소드다. 이 메소드는 ECMAScript5에 추가되었기 때문에 오래된 자바스크립트와는 호환되지 않는다. 아래의 코드를 통해서 호환성을 맞출 수 있다. 

// 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;
    };
  }());
}

 

댓글

댓글 본문
  1. nurunzii
    완료
  2. anne
    완료
  3. 정승옥
    완료
  4. 김진욱
    완료
  5. 한강
    Navigation 객체 기능이 재미있네요.
    감사합니다~~^^!
    200624
  6. 쑤우
    완료. 감사합니다~
  7. 준바이
    좋은 정보 감사합니다.
    대화보기
    • Gritter
      감사합니다.
    • student
      크로스 브라우징을 위해서

      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>

      를 쓰기도 하더군요. html5shiv 라는 프로젝트라고 하더라고요.
    • ㅎㅅㅁ
      200203 다시시작
    • 2019-10-13 8:46pm 완료
    • 정홍
      완료
    • 류석현
      수강완료!
    • JuicyFresh
      감사합니다
    • Lsalute
      크로싱 브라우징 할때 써야되는 객체로 보입니다..
      많이 고생하겠네요...
    • SlowStarter
      감사합니다!
    • 스페이스몽키
      이건 어디에 써야할지 잘 이해가 안가네용 ㅠㅠ
    • 생선과고양이
      20180424 감사합니다
    • 수업 정말 감사합니다!
      appName에 Netscape인데 Nescape라고 나와있어요!
    • An TaeHyeon
      18-01-24 수강완료!
      강의록 공유합니다 :)
      https://goo.gl/GfpbW7
    • 띠링
      appName은 이제 익스,엣지도 크롬처럼 Netscape로 뜨네요.
      익스11, 엣지 41.x 씁니다.
      수업 잘 듣고 있습니다.
    • 박인호
      12-27
      수강완료.
    • Jayden贤宇
      이전에 Netscape와 IE브라우져 이 두 회사가 경쟁을 하면서 무질서하게 기능을 추가하기되는데. 그로인해 같은 기능을 각기 다른 브라우져에서 다른 코드를 작성해야되는 불편함이 생겼다. 그래서 W3C,ECMA 국제표준화기구가 출현해 질서를 바로 잡는다. 그로인해 이전과 같은 현상은 많이 해소되었지만, 표준화기구에서 세밀한부분은 표준화하기 힘들기에 각기 브라우져 회사마다 다른 부분이 아직도 남았다. 그런 현상을 ' 크로스브라우징(cross browsing)'이라 부르고, 각기 다른 브라우져의 호환성을 확인하기 위해 출현한게 'Navigator 객체' 이다.
      이렇게 이해하면..될까요 ?
    • 수복
      감사합니다.
    • 프로그래밍초보
      그냥저냥 넘어가라는 이고잉님의 말씀이 떠오르는 군요 ^^ 넘어갑니다~ㅋㅋㅋ
    • Sangmook Kim
      170727 완료
    • crable
      감사합니다.
    • BANIP
      언제나 좋은 강의 감사드립니다!
      요새 도서관에서 모던 자바스크립트를 빌려 깨작깨작 배우는데 저런 코드들이 수두룩하게 나와서 아직 제가 배울 단원은 아닌것 같더라구요.. 저런 코드들도 이해할 수 있을 만큼 공부해서 언젠가는 멋진 라이브러리 한개 만들어보고 싶네요!
    • 범이
      확실히 어려운감이 있습니다. 그런데 첫번째 강의에서 말씀하셨듯, html, css, javascript문법, 웹어플리케이션만들기 를 듣고 오셔야 이해가 빠릅니다. 그런데 어려운부분이 예를 들어서 document.getElementById 이런것들이 어려운것이라면 강의중반부에 설명해주시니 천천히 순서대로 들어보셔요. 저같은경우 개발경험이 있는데 아무것도 모르고 남의 코드 보고 개발했었는데 이고잉님의 강의를 들으니 '아 저런이유로 location을 썼구나' 이런감탄사가 나오긴하네요ㅎㅎ
      대화보기
      • 효효
        덕분에 대충 이런거지 했던 내용을 확실하게 파악할 수 있어서 좋았습니다.
        감사합니다~
      • 신입1
        복습중입니다 감사합니다.
      • matheios
        감사합니다... 아직 자바스크립트를 어떻게 공부해야 할지..잘모르겠어요... 우선 이고잉님의 강의를 듣고 있긴한데.. 어렵네요...ㅠㅠ
      • 폭스킴
        예전 댓글들을 보니까 논란이 조금 있었던 거 같은데,
        조금 더 심화학습을 하고 싶은 회원님들을 위해 마지막 코드를 설명해주시는 동영상 강의 하나 추가해주시면 좋을 거 같네요~
      • louislee
        후음.. 어려운 부분이네요
      • 히스토
        감사합니다
      • 유유
        감사합니다.
      • 감사합니다~!
      • hyuna
        감사합니다
      • 조병령
        감사합니다.
      • tachyon
        감사합니다
      • yihsang
        기능테스트코드는 다음에 봐야겠습니다.
        감사합니다.
      • JustStudy
        2016.07.07목
        고맙급니다 3.
      • JustStudy
        2016. 06. 30
        고맙습니다 2.
      • 이주환
        2016. 04. 27

        아마 마지막 기능테스트쪽 코딩때문에 댓글에 많은 글이 올라오고 있는 것 같은데 이고잉님께서 이 코드를 무조건 확인하고 이해할 수 있어야 한다. 라는 말씀은 없으셨던걸로 알고있습니다. 그렇기때문에 모든코드를 보고 이해하려하지마시고 넘어가셔서 좀더 지식을 쌓은 후 보시는걸 추천드립니다. js의 기초지식과 크로스브라우징에 관련된 내용은 이해관념으로 따졌을 때 전혀 다른것이기 때문이기에..
      • JustStudy
        고맙습니다
      • SK Kim
        저의 경우 2달 정도 생활코딩에서 공부하는 중이고 이유는 프로그래밍 그리고 프로그래머에 대해 더 알고 싶기 때문입니다. 밑에 글들중 예제로 쓰인 코드에 대해 난이도가 있다고 해서 그에 대한 저의 생각을 공유한것이며 비판을 하기 위한것은 아닙니다. 참고로 본코스에 필요하다고 하는 코스들은 완주한 저의 경우 지금 코딩 지식으로는 이해 못했어요..ㅠㅠ
        대화보기
        • 오이삼
          외부 라이브러리를 쓰든, 타인의 코드를 갖다쓰든 상관없지만, 코드에 대한 이해는 기본아닐까요?
          말씀하신 숙련된 프로그래머분은 가져다쓴 코드를 직접 짜진 않았어도 기본적으로 작동원리에 대해 알고 있었을겁니다.
          그 코드도 제대로 모르고 가져다 쓰는건 저로선 아니라고 봅니다.
          그리고 타인의 코드를 '따지다' 라는 표현보다는, 리뷰를 통한 개선이라고 보는게 맞지 않을까요?
          내 코드가 아니라서 따지는게 아니고, 얼마나 효율적이고 잘 짜여있는지 리뷰하는거죠.
          대화보기
          • SK Kim
            위 코드는 이해하라고 있는건 아닌거 같습니다.
            그동안 비프로그래머 입장에서 프로그래머들의 작업방식을 봐왔을때 숙련된 프로그래머 일수록 외부 라이브러리를 통한 타인의 코드를 자주 사용하던걸로 기억하니다.
            타인의 코드 내용을 일일이 따져가며 진행하면..자신의 성취감은 만족할지 몰라도 일 자체가 진행되지 않을겁니다.
          • pillage
            강의만 보고 프로그램 휙휙 짤수만 있으면 얼마나 좋을까요?

            대부분 아쉽지만 그렇게 안됩니다..

            사실 예제 부분도 If 문의 !object.keys 부분만 설명하셨는데..(!가 있으면 False가 된다? 정도)

            물론 저도 전공자이고 한 10년 딴일하다가 다시 보고 있는데.. 커리큘럼 자체는 굉장히 잘 짜놓으신것 같고

            대부분 강의마다 초보자들에게 어떡게설명해야 잘 이해가 되고 생활코딩의 길로 이끌수 있을까 하는 고민이 역력히 보입니다..

            하지만 밑에 댓글을 쭉 읽어보니.. 앞에서 많이 말씀하신 이부분은 이해할 필요가 없어요!! 라는부분을 빼먹으셔서.. 다들 예제를 보고 멘붕이 온 모양인데 ㅎㅎ저부분은 다른 분들 말마따나.. 지금은 복붙으로 쓰시고 나중에 이해하셔도 되는 부분입니다..
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기