악덕고용주의 개발 일기

[ 자바스크립트로 사용자 OS 버전 확인하는 코드(IE버전 X 운영체제 판별)]

자바스크립트로 IE8 과 같은 브라우저 버전 체크하는 코드는 많은데 막상 사용자의 운영체제가 무슨 버전인지까진 판별하는 코드가 잘 없었는데

다른분 티스토리에서 보고 유용한거같아 공유하려합니다.

조금더 덧대서 해당 윈도우 운영체제에 로그인한 사용자명의 폴더를 알아야할 경우

var net = new ActiveXObject ( "WScript.NetWork" );

var userName = net.UserName;

strFilePath = "C:\\Users\\" + userName + "\\AppData\\Local\\" + nanumTechnologiesPath; 코드를 사용하시면 로그인한 userName도 얻어올 수 있습니다.

이 아래는 자바스크립트로 운영체제 종류와 버전을 판별하는 코드입니다.

// JavaScript Document

// 만든이 : 다섯방울, THREE™ (http://the3.tistory.com)

// 주소 : http://the3.tistory.com/17

// Data : 2015. 01. 28

// Version : 0.2

// 참조 http://www.openspc2.org/userAgent/

// OS 버전 보기

var uanaVigatorOs = navigator.userAgent;

var AgentUserOs= uanaVigatorOs.replace(/ /g,'');

var Ostxt="";

var OSName="";

var OsVers="";

// This script sets OSName variable as follows:

// "Windows"    for all versions of Windows

// "MacOS"      for all versions of Macintosh OS

// "Linux"      for all versions of Linux

// "UNIX"       for all other UNIX flavors 

// "Unknown OS" indicates failure to detect the OS

new function() {

    var OsNo = navigator.userAgent.toLowerCase(); 

    jQuery.os = {

        Linux: /linux/.test(OsNo),

        Unix: /x11/.test(OsNo),

        Mac: /mac/.test(OsNo),

        Windows: /win/.test(OsNo)

    }

}

function OSInfoDev(){

if($.os.Windows) {

if(AgentUserOs.indexOf("WindowsCE") != -1) OSName="Windows CE";

else if(AgentUserOs.indexOf("Windows95") != -1) OSName="Windows 95";

else if(AgentUserOs.indexOf("Windows98") != -1) {

if (AgentUserOs.indexOf("Win9x4.90") != -1) OSName="Windows Millennium Edition (Windows Me)" 

else OSName="Windows 98"; 

}

else if(AgentUserOs.indexOf("WindowsNT4.0") != -1) OSName="Microsoft Windows NT 4.0";

else if(AgentUserOs.indexOf("WindowsNT5.0") != -1) OSName="Windows 2000";

else if(AgentUserOs.indexOf("WindowsNT5.01") != -1) OSName="Windows 2000, Service Pack 1 (SP1)";

else if(AgentUserOs.indexOf("WindowsNT5.1") != -1) OSName="Windows XP";

else if(AgentUserOs.indexOf("WindowsNT5.2") != -1) OSName="Windows 2003";

else if(AgentUserOs.indexOf("WindowsNT6.0") != -1) OSName="Windows Vista/Server 2008";

else if(AgentUserOs.indexOf("WindowsNT6.1") != -1) OSName="Windows 7";

else if(AgentUserOs.indexOf("WindowsNT6.2") != -1) OSName="Windows 8";

else if(AgentUserOs.indexOf("WindowsNT6.3") != -1) OSName="Windows 8.1";

else if(AgentUserOs.indexOf("WindowsNT6.4") != -1) OSName="Windows 10";

else if(AgentUserOs.indexOf("WindowsPhone8.0") != -1) OSName="Windows Phone 8.0";

else if(AgentUserOs.indexOf("WindowsPhoneOS7.5") != -1) OSName="Windows Phone OS 7.5";

else if(AgentUserOs.indexOf("Xbox") != -1) OSName="Xbox 360";

else if(AgentUserOs.indexOf("XboxOne") != -1) OSName="Xbox One";

else if(AgentUserOs.indexOf("Win16") != -1) OSName="Windows 3.x";

else if(AgentUserOs.indexOf("ARM") != -1) OSName="Windows RT";

else OSName="Windows (Unknown)";

if(AgentUserOs.indexOf("WOW64") != -1) OsVers=", WOW64";

else if(AgentUserOs.indexOf("Win64;x64;") != -1) OsVers=", Win64 on x64";

else if(AgentUserOs.indexOf("Win16") != -1) OsVers=" 16-bit";

else OsVers=" on x86";

} else if ($.os.Linux) {

if(AgentUserOs.indexOf("Android") != -1) { OSName = getAndroidDevName(); }

else if(AgentUserOs.indexOf("BlackBerry9000") != -1) OSName="BlackBerry9000";

else if(AgentUserOs.indexOf("BlackBerry9300") != -1) OSName="BlackBerry9300";

else if(AgentUserOs.indexOf("BlackBerry9700") != -1) OSName="BlackBerry9700";

else if(AgentUserOs.indexOf("BlackBerry9780") != -1) OSName="BlackBerry9780";

else if(AgentUserOs.indexOf("BlackBerry9900") != -1) OSName="BlackBerry9900";

else if(AgentUserOs.indexOf("BlackBerry;Opera Mini") != -1) OSName="Opera/9.80";

else if(AgentUserOs.indexOf("Symbian/3") != -1) OSName="Symbian OS3";

else if(AgentUserOs.indexOf("SymbianOS/6") != -1) OSName="Symbian OS6";

else if(AgentUserOs.indexOf("SymbianOS/9") != -1) OSName="Symbian OS9";

else if(AgentUserOs.indexOf("Ubuntu") != -1) OSName="Ubuntu";

else if(AgentUserOs.indexOf("PDA") != -1) OSName="PDA";

else if(AgentUserOs.indexOf("NintendoWii") != -1) OSName="Nintendo Wii";

else if(AgentUserOs.indexOf("PSP") != -1) OSName="PlayStation Portable";

else if(AgentUserOs.indexOf("PS2;") != -1) OSName="PlayStation 2";

else if(AgentUserOs.indexOf("PLAYSTATION3") != -1) OSName="PlayStation 3";

else OSName="Linux (Unknown)";

if(AgentUserOs.indexOf("x86_64") != -1) OsVers=", x86_64";

else if(AgentUserOs.indexOf("i686") != -1) OsVers=", i686";

else if(AgentUserOs.indexOf("i686 on x86_64") != -1) OsVers=", i686 running on x86_64";

else if(AgentUserOs.indexOf("armv7l") != -1) OsVers=" Nokia N900 Linux mobile, on the Fennec browser";

else if(AgentUserOs.indexOf("IA-32") != -1) OsVers=" 32-bit";

else OsVers="";

} else if ($.os.Unix) {

OSName="UNIX";

} else if ($.os.Mac) {

if(AgentUserOs.indexOf("iPhoneOS3") != -1) OSName="iPhone OS 3";

else if(AgentUserOs.indexOf("iPhoneOS4") != -1) OSName="iPhone OS 4";

else if(AgentUserOs.indexOf("iPhoneOS5") != -1) OSName="iPhone OS 5";

else if(AgentUserOs.indexOf("iPhoneOS6") != -1) OSName="iPhone OS 6";

else if(AgentUserOs.indexOf("iPhoneOS7") != -1) OSName="iPhone OS 7";

else if(AgentUserOs.indexOf("iPhoneOS8") != -1) OSName="iPhone OS 8";

else if(AgentUserOs.indexOf("iPad") != -1) OSName="iPad";

else if((AgentUserOs.indexOf("MacOSX10_1")||AgentUserOs.indexOf("MacOSX10.1")) != -1) OSName="Mac OS X Puma";

else if((AgentUserOs.indexOf("MacOSX10_2")||AgentUserOs.indexOf("MacOSX10.2")) != -1) OSName="Mac OS X Jaguar";

else if((AgentUserOs.indexOf("MacOSX10_3")||AgentUserOs.indexOf("MacOSX10.3")) != -1) OSName="Mac OS X Panther";

else if((AgentUserOs.indexOf("MacOSX10_4")||AgentUserOs.indexOf("MacOSX10.4")) != -1) OSName="Mac OS X Tiger";

else if((AgentUserOs.indexOf("MacOSX10_5")||AgentUserOs.indexOf("MacOSX10.5")) != -1) OSName="Mac OS X Leopard";

else if((AgentUserOs.indexOf("MacOSX10_6")||AgentUserOs.indexOf("MacOSX10.6")) != -1) OSName="Mac OS X Snow Leopard";

else if((AgentUserOs.indexOf("MacOSX10_7")||AgentUserOs.indexOf("MacOSX10.7")) != -1) OSName="Mac OS X Lion";

else if((AgentUserOs.indexOf("MacOSX10_8")||AgentUserOs.indexOf("MacOSX10.8")) != -1) OSName="Mac OS X Mountain Lion";

else if((AgentUserOs.indexOf("MacOSX10_9")||AgentUserOs.indexOf("MacOSX10.9")) != -1) OSName="Mac OS X Mavericks";

else if((AgentUserOs.indexOf("MacOSX10_10")||AgentUserOs.indexOf("MacOSX10.10")) != -1) OSName="Mac OS X Yosemite";

else OSName="MacOS (Unknown)";

if(AgentUserOs.indexOf("Intel") != -1) OsVers=" on Intel x86 or x86_64";

else if(AgentUserOs.indexOf("PPC") != -1) OsVers=" on PowerPC";

else OsVers="";

} else {

OSName="Unknown OS";

}

  var OSDev = OSName + OsVers;

  return OSDev;

}

// Android의 단말 이름을 반환

function getAndroidDevName() {

var uaAdata = navigator.userAgent;

var regex = /Android (.*);.*;\s*(.*)\sBuild/;

var match = regex.exec(uaAdata);

if(match) {

var ver = match[1];

var dev_name = match[2];

return "Android " + ver + " " + dev_name;

}

return "Android OS";

}

// OSInfoDev() 는 OS이름과 버전 출력하는 함수

// AgentUserOs 는 userAgent 출력

[    eclipse(이클립스) 자바스크립트(javascript) 자동완성 플러그인 설정하기    ]

이클립스에서 자바스크립트 사용시 ctrl + space 를 눌러 자동완성이 가능하도록 세팅하는 방법에 대한 포스팅입니다.

두가지 작업을 해주어야 합니다.

1. Help 탭->Eclipse Market place->Webclipse 검색 후 설치(install) 후 restart합니다.

2. 두번째로 window탭->preferences->Ant->editor->Content Assist에서 enable auto activation을 체크합니다.

추가하고 나면 아래와 같이 자동완성이 가능한 것을 볼 수 있습니다.

[ 브라우저 체크 ]

var agt = navigator.userAgent.toLowerCase();
if (agt.indexOf("chrome") != -1) return 'Chrome'; 
if (agt.indexOf("opera") != -1) return 'Opera'; 
if (agt.indexOf("staroffice") != -1) return 'Star Office'; 
if (agt.indexOf("webtv") != -1) return 'WebTV'; 
if (agt.indexOf("beonex") != -1) return 'Beonex'; 
if (agt.indexOf("chimera") != -1) return 'Chimera'; 
if (agt.indexOf("netpositive") != -1) return 'NetPositive'; 
if (agt.indexOf("phoenix") != -1) return 'Phoenix'; 
if (agt.indexOf("firefox") != -1) return 'Firefox'; 
if (agt.indexOf("safari") != -1) return 'Safari'; 
if (agt.indexOf("skipstone") != -1) return 'SkipStone'; 
if (agt.indexOf("msie") != -1) return 'Internet Explorer'; 
if (agt.indexOf("netscape") != -1) return 'Netscape'; 
if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla'; 

------------------------------------------------------------------------------------------

윈도우8이 발매를 시작하면서 IE10(Internet Explorer)도 이런저런 문제가 생기네요.

우선 자바스크립트로 인터넷익스플로러 버전 체크할때 부터도 문제가 있습니다.

이건 이전 버전의 브라우저도 아직 발생되고 있는 현상인데요.

예를 들어 제가 IE9.0을 사용할 경우 버전을 체크할 경우

navigator.userAgent.indexOf('9.0') 으로 실행할 경우 
30 이란 값이 나옵니다. 유저 정보의 30번째 문자열에 정보가 있다는 것이지요

해당 정보가 없을 경우 -1값을 떨굽니다.

그래서 IE9.0의 버전을 찾을 경우 이런식으로 처리하면 됩니다.

if(navigator.userAgent.indexOf('9.0') == -1) {
  alert('사용중인 IE가 IE9.0 이 아님');
}else{
  alert('사용중인 IE가 9.0임');
}

하지만

Internet Explorer 8.0 부터 있는 기능인 [호환성보기] 기능을 사용할 경우

버전찾기에 문제가 생기게 됩니다. 

정확한 버전을 체크하지 못하게 되죠

alert(navigator.userAgent); 를 실행할 경우 출력값이 다릅니다.

[호환성보기 설정이 되어 있지 않은 경우] - 정상적으로 버전을 구할 수 있습니다.
"Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)" 

[호환성보기 설정이 사용중인 경우] - IE8.0 이상에서는 거의 모두 7.0으로 표기가 됩니다.
"Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C)"

때문에 위 처럼 버전을 체크할 경우 7.0으로 나오게 됩니다.

이 현상은 IE10에서도 마찬가지 입니다.

그래서 [IE8.0], [IE9.0], [IE10.0]을 사용하는 사람이 [호환성 보기 기능]을 사용한다면 정확한 IE 버전을 체크하기 힘들더군요

확인해 보니.. IE8.0 이상 부터는 유저 정보에 Trident 라는게 붙습니다.

그리고 뒤에는 버전이 출력되지요. 브라우저 별로 보면 아래와 같이 나옵니다.

 IE6.0 = null
 IE7.0 = null
 IE8.0 = Trident/4.0
 IE9.0 = Trident/5.0
IE10.0 = Trident/6.0

아래와 같이 처리를 하면 해당 브라우저의 버전을 체크 할 수 있습니다.

if(navigator.userAgent.match(/Trident\/(\d.\d)/i)[1] == '6.0'){

  alert('IE10 입니다.');

} else{

  alert('IE9 이하 입니다.');

} 

이렇게 처리할 경우 다른 문제점이 하나 더 있습니다.

IE7.0 이하일 경우에는 해당 내용이 없기 때문에 null이 발생됩니다.

그래서 아래와 같이 하면 정상적으로 처리가 됩니다.

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

  </head>

  <body>

    <ul>

      <li>HTML</li>

      <li>CSS</li>

      <li id="active">JavaScript</li>

    </ul>

    <script type="text/javascript">

      // 복수개의 li가 선택됨

      var liObjs = document.getElementByTagName('li');

      for(var i=0; i<liObjs.length; i++){

        console.log(liObjs[i].innerHTML());

      }

      // 부모 요소로 접근하기

      // jquery에서는 parent()

      var ulObj = liObjs[1].parentNode;

      // 부모요소에서 2번째 자식 요소 제거하기

      ulObj.removeChild(liObjs[1]);

      // 자식 요소 중 첫번째 요소 콘솔 찍기

      console.log(ulObj.childNodes[0]);

    </script>

  </body>

</html>

window 객체

• Javascript 실행시 가장 상위에 존재하는 객체

  • 변수를 선언하거나 함수 선언시 window 객체안에 선언됨
  • 크롬에서 F12를 눌러 console탭에서 window 객체를 입력해서 다양한 속성들을 조회해볼 수 있음.

표시된 웹 페이지의 정보에 접근하거나 변경을 할 수 있음

• window.location : 현재 브라우저 창의 주소를 나타내는 객체
• window.location.href : 브라우저 창에 입력된 주소, 변경 가능
• ex) window.location.href = "이동하고자하는 url "
• ex) window.location.replace = "이동하고자하는 url" 위의 것과 차이점은 이동하고나서 뒤로가기 버튼이 활성화되지 않음.
• window.open : 새창 띄우기
• window.navigator : 브라우저 자체에 대한 정보
• window.screen : 디스플레이의 사이즈
• window.document : 웹 페이지 문서의 HTML, CSS 등에 대한 접근 가능

• 
  
  
  
  
  
• 2. [ window 객체를 이용해 새창을 띄우고 부모창과 자식창 사이에서 값을 주고 받는 방법 ]
  
  
  
• var windowObj = window.open("새창에서띄울url","창이름","창의설정(옵션값)"); 처럼하면 현재창에서 새로운 창이 뜨게 됩니다. 이때 기존의 창이 부모창이 되고 새로 뜨게된 창이 자식창이되게되는데
  
  이때, 부모창과 자식창 사이에서 값을 주고 받기 위해서는 띄운 창의 window 객체를 저장할 변수를 선언해 저장해 놔야합니다.(windowObj)
  
  그런 다음 부모 창에서는 이 windowObj 변수를 이용해 자식창에 값을 전달할 수 있습니다. 예를들어, 
  
  windowObj.document.text2.value = "값 입력"; 이런식으로 자식창(새창)의 document 객체에 얼마든지 접근할 수 있습니다. 
  
  그러면, 반대로 자식창에서 부모창으로 값을 보내기 위해서는 어떤 식으로 해야할까요??
  
  일단, 부모창에서 자식창을 생성하면 이 자식창은 생성과 동시에 opener 라는 객체를 가지게 되고 이 opener는 바로 부모객체의 window 객체를 가리키게 됩니다. 따라서
  
  opener.document.parentText.value = document.text2.value; 이런식으로 자식에 있는 값을 부모 창으로 넘기는게 가능합니다.
  
  
  먼저, windowOpen1.html 즉, 부모창 예제 코드입니다.

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

1. Javascript Inline 방식 : 

<input onclick="alert('hello world')" type="button" name="inline"><br/>

2. <h2 id="hw">script 태그 내에 삽입하는 방식 :</h2>

<script type="text/javascript">

var hw = document.getElementById("hw");

hw.addEventListener("click",function(){

alert("hello world");

})

</script>

<br/>

3. 외부 파일로 분리하는 방식 :

<script type="text/javascript" src="./script2.js"></script>

<br/>

4. 스크립트의 위치 :

스크립트는 어느 위치에나 올 수 있지만 body 태그의 마지막 부분에 위치시키는 것이 좋다.

why??

=> 제어할려는 태그가 다 로딩된 다음에 작업이 수행되어야 하니까(로딩되지 않은 상태에서 작업시 제어 불가)

=> 위치에 상관없이 태그가 다 로딩된 후 수행토록 하려면

: javascript의 경우

=> window.onload = function(){

이 내부 코드는 태그가 다 로딩된 이후 수행하게 된다.

      }

     jquery의 경우

      => document.ready(function(){

      })

</body>

</html>