Ssemi Laboratory

See the table below for the differences.

IE Supported Code	Firefox Supported Code
Creating XML DOM object	Creating XML DOM object
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");	xmlDoc  = document.implementation.createDocument("","doc",null);
Make sure before loading the XML file you use the following lines of code	It is the same for Firefox
xmlDoc.async = false;xmlDoc.preserveWhiteSpace=true;	xmlDoc.async = false;xmlDoc.preserveWhiteSpace=true;
Loading an XML file	Loading an XML file
xmlDoc .load("XML Path");	xmlDoc.onload=function (){};xmlDoc .load("XML Path");
	Here Firefox does not support loading of XML directly. So we should use a dummy function and then load XML.
Selecting Single Node in an XML with conditions	Selecting Single Node in an XML
xmlNode=xmlDoc.selectSingleNode("//Path[@Attribute='condition']/remaining path");	selectSingleNode is not supported in Firefox. We can use XML Path to do our job as given below.
	function SelectSingleNode(xmlDoc, elementPath){   if (document.implementation && document.implementation.createDocument)      {         var nodes=document.evaluate(elementPath, xmlDoc, null, XPathResult.ANY_TYPE, null);var results=nodes.iterateNext();return results;       }    }
	To the above function we need to pass XML and the Element path like "//Path[@Attribute='condition']/remaining path" and access it as below
	xmlNode=SelectSingleNode(xmlDoc ,"//Path[@Attribute='condition']/remaining path");
For getting value of particular Attribute	For getting value of particular Attribute
xmlNode.getAttribute("Attribute Name");	Here we can use the code given below
	xmlNode.attributes["Attribute Name"].value;
To access the Text of the Single Node selected	To access the Text of the Single Node selected
xmlNode.text;	xmlNode.childNodes[0].nodeValue;
Selecting Nodes list based on condition	Selecting Nodes list based on condition
xmlNodes= xmlDoc.selectNodes(“Node name Path [@attribute=’condition’]”) For ex: var xmlNodes = xmlDoc.selectNodes("//xNode[@xid='test']");	xmlNodes=xmlDoc.getElementsByTagName[“Node name Path”];For ex: var xmlNodes = xmlDoc.getElementsByTagName[“xNode”];
Iterating through the Nodes List and selecting value of a particular Attribute	Iterating through the Nodes List and selecting value of a particular Attribute
for(var n=0;  n< xmlNodes.length; n++){var xid= xmlNodes (n).getAttribute("xid");} xmlNodes contains only the Nodes which has the Attribute xid and which has value ‘test’. If the Attribute value = ‘test’, then we are iterating through that Nodes only and retrieving the value of xid.	Here xmlNodes  contains all the list of Nodes which are having the Node Name “xNode”. for(var n=0;  n< xmlNodes.length; n++){  // For getting all the Attributes of the Node selected var getXmlAttributes = xmlDoc.getElementsByTagName("Node name ")[n].attributes; // For selecting Attribute value based on condition, we should first get the Attributes List which contains the Attribute we need as below. var selectXmlAttribute = getXmlAttributes.getNamedItem("xid").value; // For retrieving the value of the Attribute based on Condition. if (selectXmlAttribute =="test") {   var xid= getXmlAttributes.getNamedItem("xid").value;}
IE supports both () and [] braces while using document object	Firefox supports only [] braces while using document object.
Ex: document.forms(0); or document.forms[0];	Ex: or document.forms[0];
Use document.getElementById[“”] instead of document.all – Both are supported in IE  document.all is IE specific
In script tag never forget to mention type=”text/javascript”, as now a days all browsers implicitly know and support Java Script	For ex: <script language =”javascript” type = ”text/javascript”></script>
Don’t close the script tag like <script language =”javascript” type = ”text/javascript”/> as some browsers like IE loads the first script, and then continues to look for a closing </script> tag.	Use:<script language =”javascript” type = ”text/javascript”></script>

I followed the above standards of Browser and solved it..

Written by Ssemi™(semin Seol), www.Ssemi.net

Javascript가 발전함에 따라 그에 따라 개발도 많이 발전하게 되었어요. 하지만 개발에 따른 유지보수를 위해 디버깅이 필요하기 마련입니다. 예전부터 인터넷 익스플로러(IE)에서는 자바스크립트는 디버깅이 어려웠어요. 자세한 설명도 없이 줄과 문자 그리고 오류 밖에는 나타내주는 내용이 없어요. 아래 그림과 같이요.


그런데 요즘에는 많은 개발을 도와주는 애드온(Add-on)이나 써드파티프로그램(Third-Party Program)들과 디버깅을 쉽게 해주는 툴(Tool)들이 많이 있죠. 지금 소개하는 것도 사실은 아주 오래전부터 있었지만, 잘 사용안하고, 어떻게 사용할지도 잘 모르는 그런 프로그램이죠.

그래서 이참에 정리를 해보려고 합니다.

▶ Internet Explorer (IE) - 인터넷 익스플로러

인터넷 익스플로러는 가장 유명한 - 그러나 가장 쓸모 없을 수 있는 - Windows Script Debugger를 제공합니다.
MS에서는 Windows Script Debugger를 제공함으로서 IE의 스크립트 디버깅을 도와주고 있답니다.

메뉴 > 도구 > 옵션 > 인터넷 옵션 > 고급 > 탐색 으로 이동하셔서
스크립트 디버깅 사용 안함(다른응용프로그램)
스크립트 디버깅 사용 안함(Internet Explorer)
두가지를 모두 사용 해재 하시고 확인을 누르세요

 ★ Windows Script Debugger 설치하러 가기 Click!! ★ 

설치 후에는 디버깅이 필요한 페이지라면 아래와 같은 화면이 나오면서 디버거가 실행됩니다.

어떤 소스에서 에러난지 확인 후에 수정을 하실 수 있습니다. 보통 브라우저에서 부르게 되면 읽기전용으로 읽어지기 때문에, 어디서 에러가 나는지 확인을 한 후, 편집툴을 통해 에러를 수정하는 편이 편리합니다.

사실 인터넷 익스플로러는 Visual Studio(이하 VS)가 나온 이후부터는 VS로 디버깅의 기능을 대신하기 때문에 VS를 쓴다면 위 소개한 디버거 프로그램을 설치할 필요는 없습니다. 스크립트 디버거 보다 VS의 무겁지만 막강한 기능의 디버깅을 통해 보다 더 쉽게 디버깅을 할 수가 있는 것이죠. 사실 VS를 설치하지 않으면서 IE의 디버깅을 원할 때는 위 소개한 프로그램이 나름 유용하게 사용될 수 있는 것이지요.

★ IE용 콘솔 디버깅 - Companion.JS

파이어폭스 플러그인 Firebug의 콘솔 API와 비슷한 IE용 디버깅 도구인 Companion.JS가 있습니다. IE의 플러그인 형태로 설치되며, 도구에 추가된 아이콘을 클릭하여 페널을 열 수 있습니다. 이제 IE에서도 콘솔 API가 도입된 편리한 자바스크립트 디버깅을 구사할 수 있겠습니다.

해당 플러그인은 Windows Script Debugger를 설치한 후에 사용하셔야 에러를 내지 않고 기능을 발휘합니다.

▶ FireFox (FF) - 불여우

FireFox(불여우)는 각종 Extension을 통해 자바스크립트 디버깅이 가능하답니다. 그중에 가장 유명한 것은 FireBug 입니다. 파이어버그는 파이어폭스의 플러그인 형태로 설치할 수 있는 애드온 애플리케이션입니다.

정말 감히 최고라고 칭하는 디버깅 도구입니다.
익스플로러에서 자바스크립트 에러가 났을 경우에 파이어폭스를 시작한 후, Firebug를 통해 에러를 파악해서 수정한 후에  인터넷 익스플로러로 다시 보는 그런 서슴없는(?) 짓도 진행할만큼 정말 멋진 툴이라고 밖에는 설명할 수 없네요.

★ Firebug 설치하러 가기

예전에 자바스크립트 디버그는 참 어렵다고 느껴졌었고, 대소문자의 차이, 세미콜론 빼먹기, 작은 따옴표(sing quot)와 큰 따옴표(double quot)의 차이로 삽질의 시간을 보낸 과거가 생각납니다.
스크립트가 발전하고 브라우져가 발전하면서 위와 같은 좋은 애드온 프로그램이 개발되어서 웹개발시 좀더 편안한 환경을 제공하고 있습니다.

Written by Ssemi™(semin Seol), www.Ssemi.net

이 프로그램은 아래의 링크에서 아이디어를 얻었습니다
프로그램의 본래 목적은 불여우 부가기능(Firefox Extension)과 자신의 서버로 올리는 특징 입니다.

Upload to my Server - Firefox Extension
▶ 웹 상의 이미지를 브라우져를 통해 자신의 서버에 쉽게 올릴 수 있게 도와주는 프로그램

▶ 다운로드(Download)

▶ 인스톨(Install)

◎ 자신의 서버 세팅
알릭님의 소스파일을 다운로드 후 아래와 같이 변경합니다.

17번째 줄의 패턴변수를  21번째 줄 처럼 변경해주시기 바랍니다. 

getImage.php를 함께 첨부 하여  자신의 서버의 적당한 곳에 놓습니다.
자신이 올린 곳의 주소를 기억하셨다가 아래 경로를 수정합니다. (IE)

◎ 인터넷 익스플로러 aka IE (Internet Explorer)
압축파일을 다운로드 후, 압축을 해제 하면
browser 폴더 아래에 IE 폴더 안의 ie-install.bat 배치 파일을 실행합니다.



◎ 파이어폭스 aka 불여우 (FireFox)
Firefox Extensions 불여우 부가기능을 설치 합니다.
동봉된 uptome.xpi를 불여우에 설치 합니다.

◆ 인스톨 후에는 브라우져를 모두 종료하신 후 재시작 시켜주십시오. ◆

▶ 사용법(How to use)

브라우져를 통해 웹서핑 중에 그림 파일에 마우스 오른쪽 버튼을 클릭하면
[그림 - 내 서버로 보내기] 메뉴가 있는 것을 발견하실 수 있습니다.

▶ 당부사항

자신의 서버로 올린 파일을 정확하게 알 수 있게 갤러리 소스를 활용하시면 좀 더 멋지게 파일들을 관리 하실 수 있으실 것입니다.
좀 더 보완하거나 더 좋은 아이디어가 있으신 분들은 언제든지 컨택해주세요!