웹브라우저 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. 유유
    감사합니다.
  2. 감사합니다~!
  3. 감사합니다
  4. 조병령
    감사합니다.
  5. tachyon
    감사합니다
  6. yihsang
    기능테스트코드는 다음에 봐야겠습니다.
    감사합니다.
  7. JustStudy
    2016.07.07목
    고맙급니다 3.
  8. JustStudy
    2016. 06. 30
    고맙습니다 2.
  9. 이주환
    2016. 04. 27

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

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

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

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

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

        하지만 밑에 댓글을 쭉 읽어보니.. 앞에서 많이 말씀하신 이부분은 이해할 필요가 없어요!! 라는부분을 빼먹으셔서.. 다들 예제를 보고 멘붕이 온 모양인데 ㅎㅎ저부분은 다른 분들 말마따나.. 지금은 복붙으로 쓰시고 나중에 이해하셔도 되는 부분입니다..
      • 박첩구드
        감사합니다!
      • 고고
        좋은 강의 듣고 가다가 눈이 찌푸려지는 댓글이 있어서 글좀 남겨봅니다. 매너있게 댓글들 답시다.
        이고잉님이 슬퍼합니다ㅜㅜㅜㅜ

        그리고 이 강의들은 전체적인 웹브라우저 위에서의 자바스크립트를 알기 쉽게 설명해주는 강의이기때문에 이고잉님께서 '전체적으로 코드를 보라' 라고 하신것이지 세부적인 코딩 해석이 나쁘다고 하신게 아닙니다.
        20줄로 코딩될걸 5줄로 줄여놓고 좋아라 신나하는게 개발자라고 생각합니다. 이로 인해서 수많은 알고리즘이 나왔지요. 자신만의 생각이 옳은게 아닙니다. 강의듣고 우쭐해 하지 마세요...
      • 안광현
        사물의 이치를 깨닫는 것과 코딩을 배우는 것은 닮아 있다는 생각이 문득 듭니다.
        아주 작은 자연 현상에도 아주 큰 동작원리가 있는 것처럼.
      • 매너를 가지고 댓글 답시다
        코드 한 줄 한 줄에 목맬 필요가 있을 때가 반드시 옵니다.
        ("코딩 하나하나"라는 표현은 매우 어색한데다가 넷스케이프와 IE의 대결구도를 모르고 있던 걸 보면
        그냥 애송이인데 누구에게 비하성 발언을 하고 있는 건지 모르겠군요.)

        한 줄 한 줄 따져가며
        작은 실수도 놓치지 않기 위해
        읽고 또 읽기를 반복해야 할 때도 있고

        새로운 걸 배우기 위해
        한 줄 한 줄 짚어가며
        머리로 따져보고 프로그램을 돌려보며
        비교해보는 노력이 빛을 발하는 순간이 올 겁니다.

        님은 그 순간을 보기 전에
        수박만 핥다가 끝낼 것 같긴 하네요.

        님이 직접 말한 것처럼
        "안될 놈은 안되는 이유가 있어요"
        대화보기
        • Jaeyoon Kim
          이번 예제의 경우, 코딩 하나하나에 목맬 필요가 없다는 말씀엔 동의합니다.
          하지만 모르는 걸 배우려고 노력하는 자세를 비하할 필요가 있을까요?
          우리 모두 무언가를 배우려고 여기에 모인겁니다. 학습방법엔 저마다 차이가 있다고 생각합니다.
          대화보기
          • 코딩!
            넷스케이프와 마이크로소프트와 맞짱 뜨던 얘기 재미있네요 ㅋㅋ
            이런 역사얘기 너무 좋아요 ㅎㅎ
            밑에 댓글보니 코딩 하나하나에 목매는 사람 있네요 -__-
            안될놈은 안되는 이유가 있죠 ㅎㅎ
          • HannaPark
            미국에서 프로그래머로 일하고 있습니다. 님의 수업을 통해서 전체적으로 체계가 잘 잡히고 있어서 행복합니다! 수업이 너무나 도움이 많이 됩니다. 최고입니다!
          • document.write
            if (!Object.keys) {
            Object.keys = (function () {
            'use strict';
            var hasOwnProperty = Object.prototype.hasOwnProperty, //hsaOwnProperty 값은 false
            hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'), //객체{toString:null}이열거할수 있는지 true ! ture는 false hasDontEnumBug는 false값
            dontEnums = [ //프로퍼티 이름 배열
            'toString',
            'toLocaleString',
            'valueOf',
            'hasOwnProperty',
            'isPrototypeOf',
            'propertyIsEnumerable',
            'constructor'
            ],
            dontEnumsLength = dontEnums.length; //배열의 길이 7 dontEnumsLength는 값 7

            return function (obj) { //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) { //obj가 객체일때 프로퍼티 찾아서 있으면 result 배열에 저장
            if (hasOwnProperty.call(obj, prop)) {
            result.push(prop);
            }
            }

            if (hasDontEnumBug) { //obj객체에 dontEnum배열에 저장된 같은 이름이 존재하면 result배열에 추가하는 코드인데 위에 변수선언시 hasDontEnumbug 값이 false여서 실행이 안될것 같은데 이코드가 왜 있는지 아무래도 제가 코드를 잘못 이해하는것 같은 멘붕상태
            for (i = 0; i < dontEnumsLength; i++) {
            if (hasOwnProperty.call(obj, dontEnums[i])) {
            result.push(dontEnums[i]);
            }
            }
            }
            return result;
            };
            }());
            }
          • Jhungmin Kim
            안녕하세요! 완전 초보자이지만 최고강의 수업 잘 듣고 있습니다. 갑자기 안돼서 질문을 하나 남기게 되었는데요.,,
            console.dir(navigator); 이걸 크롬 콘솔창에 입력해도 undefined만 출력되고 나머지 동영상처럼 안되는데 해결방법이 있나요? ㅜㅜ
          • doma
            잘보고 갑니다.~~~
          • egoing
            이고잉입니다. 여러가지 의견들이 많이 있네요. 이 강의는 조만간 문제를 점검해보긴 해야할 것 같아요. ^^

            우선 좋게 평가해주신 분들 너무 감사합니다. 한편으로 어려움을 토로하신 분들도 섭섭하게 말씀하신 것은 없는 것아요.

            말씀하신 어려움들을 꾸준히 반영해서 후속 강의들도 만들고 있어요. 이런 비판들도 큰 도움이 되고 있답니다.

            모두 감사합니다!
          • 이용주
            이해를 못하겠군요. 프로그래밍을 다른분야에서 일하는 입장이지만 세상의 모든 과정과 예제를 이해할수는 없습니다, 실제로 작업을 하다보면 내가 모르는것도 있고 새로게 코드를 참고할때도 있습니다. 그런와중에 생활코딩일는 특정 분야의 강의가 어떻게 완벽할수 있을까요? 어떤 강사건 개발자건 이보다 강의를 잘할수 있는 분이 몇분이나 있을지 궁금하군요. 영어 시작한 사람한테 문장 알려줬다고 뭐라하는거 같네요 . 끝까지 공부하시면 그 해답이 나올텐데 말이죵 !~
          • 아쿠아
            강의 너무 너무 잘들었요^^
            감사합니다.
          • 머머
            Navigator 객체는 브라우저 호환성을 위해서 주로 사용하지만 모든 브라우저에 대응하는 것은 쉬운 일이 아니므로 아래와 같이 기능 테스트를 사용하는 것이 더 선호되는 방법이다.

            라는 말에서 알 수 있듯 제 생각엔 네비게이터 객체의 사용법엔 이런 예가 있다.. 라고 아래 코드를 올리신것 같아요. 저 소스를 이해하라고 올린건 아닌 것 같습니다.

            조금만 생각해봐도 저 소스의 기능을 지금 시작단계인 우리가 사용할 일이 있을까요?..

            생활코딩 강의는 대체적으로 나무를 보기보다 숲을 보는 시야를 가지게 해주는 것 같아요. 제게는 그게 와닿아서 잘 듣고 있는데 반면에 맞지 않는 분도 분명 계시겠죠?
          • 송사리
            밑에 어렵다는 리플보고 저도 달아보는데

            꽤나 초보들 입장에서 생각한 강의라고 생각합니다.

            만약 학원같은데 가서 이런 수업 듣는다고 하면 몇일 못가서 포기 하실꺼에요 훨씬

            대충 가르키거든요 못가르킨다는 의미가 아니라 생활코딩 처럼 친절하게 가르치지 않아요...

            이건 다시 볼수라도 있지...그리고 이해 안되면 그냥 진행하세요 진행하다 보면

            자연스레 예전것이 이해 되는 경우가 엄청 많아서... 암튼 다들 화이팅...
          • 호두과자
            감사합니다!
          • gohu517
            감사합니다. 전체적인 정리가 됩니다.
          • taek171@daum.net
            훌륭한 자기주도학습자이신 듯 하네요. ^^

            제가 생활코딩에 대해 비판적으로 쓴 것 처럼 보이나 봅니다.
            아무래도 글의 한계가 있는 듯.

            생활코딩은 훌륭한 시도인 것 같고요.
            더 발전할 여지가 많아 보이기에 제가 첨언을 했었습니다.
            대화보기
            • Soori
              저는 이고잉님과 관계는 없지만 개인적으로 (직업 아님) 프로그래밍을 공부하면서, 그리고 우연히 생활코딩을 접하게 되어 여기까지 오게되면서 느끼게 된 점이... 대부분의 책에서도 쉽게 설명하다가 갑자기 어려운 예제 나옵니다. 어려운 개념은 언젠가 마주칠 수 밖에 없어요. 쉽게 공부하려 할수록 더 어려운 것이 이과과목의 책들이지요.. 저는 책으로 볼 때 잘 이해가 가지 않았던 부분들 (객체, 생성자, 등) 여기 와서 아~ 하는 것들 많았구요.. 그리고 개인적으로 몰랐던 부분들은 그냥 넘어갔다가 (대충 이럴 떄는 이렇게 짜야 겠구나 단편적으로 외운 후) 실제로 내 방식대로 무언가 만들려고 시행착오를 거쳤던 부분들이 코딩실력에 큰 도움이 되었던 것 같아요. 그 후에 어떤 경로로든 잘 몰랐던 부분을 깨닫게 되구요. 솔직히 저도 마지막 코딩하신 부분은 완전히 이해하지 못하지만, 이고잉님이 짜시는 코딩 방식들을 보면서 JAVA에서 난해했던 swing부분 eventHandler 코딩이 조금씩 이해가 가기 시작하네요. 힘들게 가르쳐 주시는 이고잉님께 너무 요구하지 마시고 스스로의 공부 영역을 만드시기바랍니다. '나는 어려운 것 말고 여기까지만 공부해야지.'하고 스스로 잘라서 공부해야할 일이지 이고잉님께 어디까지만 가르치라고 하는 것은 아닌 것 같습니다. 여기에 오시는 분들 수준도 다양하기 때문에 가르치는 수준을 한정하는 것은 좀 아닌 것 같아요.
              대화보기
              • 팽맨이러닝
                일단 생활코딩에 대해선 저 무척 존경하는 마음을 가지고 있습니다.
                하지만 제 댓글이 오해의 소지가 있는 듯 하네요.

                그런데 일반적인 초보자들에겐 고급수준의 강의보단
                어렵지 않게 이해할 수 있는 쉬운 강의가 필요합니다.
                이고잉님도 여러 강의들 중에서
                "이번 내용은 지금 이해하지 못하셔도 문제가 없다"는 언급을 여러번 하십니다.
                이 말은 역으로 해석하면 강의가 초보자가 이해하기엔 어려울 수 있다는 말이기도 합니다.

                다시 한번 말씀드리지만 생활코딩을 과소평가하지 않습니다. 단지 강의들이 생활코딩의 철학과는 조금 다르게 초보자가 어려워할 수 있다는 말씀을 드리고 싶었습니다.
                대화보기
                • 조신부리
                  생활코딩을 과소평가 하시는듯...
                  javascript 강의만 시청했지만, 클로저부터 객체지향까지는 고급수준의 강의.
                  웹개발자중 많아야 5%정도만이 제대로 알고 있지 않을까 싶은데...심한 비약인가요?
                  대화보기
                  • 팽맨이러닝
                    다 들어도 이해안 되실 듯. ㅋ

                    생활코딩 강의는 내가 뭘 공부해야 하는지를 잡아주는 정도의 강의로 생각해야 할 것 같습니다.
                    대화보기
                    • ejaguar211
                      문제 없을 것 같은데요.
                      object.keys를 지원하지 않는 경우만 고려한 부분이고, 해당 브라우저 개발사마다 다르게 동작하기 때문에 각 회사에서 제공하는 object.keys 대체 코드를 따온 것 같네요. 스스로 만들일은 거의 없으리라 생각하고, 지금 모두 이해하지 않아도 나중에 하나둘씩 익숙해지면 자연히 이해하게 될 것 같아요. 지금 이해안되는 건 당연한겁니다~
                      꼭 알아야한다면 메소드, 문법, 조건문, 반복문,함수, 배열 정도에 대한 선행학습이 있어야할 것 같다는..
                      저도 이해 못해요. 빠른 공부 느린 실습 고고
                      대화보기
                      • david20jazz
                        좋은 정보 감사합니다~
                      • 와우..점점 어려워지네요..ㅜㅜ 다 들으면 이해가 되겠지요?? 기능테스트 코드를 못 읽겟어요...괜찮은건지요...ㅠㅠ
                      • 감사합니다.
                      버전 관리
                      egoing
                      현재 버전
                      선택 버전
                      graphittie 자세히 보기