1. 스트링을 받아서 로딩하는 방법,
   
2. 파일을 로딩하는 방법.

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(xmlString);
   or
xmlDoc.load(xmlFile);

var xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.load(xmlFile);

var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlString, "text/xml");

1. 해당하는 xml 태그를 읽어온 다음에 tag.text(IE) 또는 tag.textContent(IE이외)를 사용하여 읽는 방법
   
2. 해당하는 xml태그를 읽어온 다음에 tag로 감싸진 TextNode를 읽어들여서 해당하는 nodeValue로 읽는 방법

// xmlDoc의 xml의 구성 <result>sample</result>
var resultTag = xmlDoc.getElementsByTagName("result")[0];
var resultText = (resultTag.text)? resultTag.text: resultTag.textContent;
   or
var resultText = resultTag.childNodes[0].nodeValue;

initMouseEvent

void initMouseEvent(String  typeArg,

                    boolean canBubbleArg,

                    boolean cancelableArg,

                    org.w3c.dom.views.AbstractView viewArg,

                    int detailArg,

                    int screenXArg,

                    int screenYArg,

                    int clientXArg,

                    int clientYArg,

                    boolean ctrlKeyArg,

                    boolean altKeyArg,

                    boolean shiftKeyArg,

                    boolean metaKeyArg,

                    short buttonArg, 

                   EventTarget  relatedTargetArg)

initMouseEvent 메소드는,DocumentEvent 인터페이스에 의해 작성된 MouseEvent 의
값을 초기화할 경우에 사용합니다. 이 메소드는,MouseEvent 가 dispatchEvent 메소드를
개입시켜 디스팟치 되기 전에 한해 불려 갑니다만, 필요한 경우는 초기화할 단계에서 여러
차례 불려 가는 일도 있습니다. 여러 차례 불려 갔을 경우는, 마지막 호출이 우선됩니다.

파라미터:

typeArg - 이벤트의 형태

canBubbleArg - 이벤트를 버블 할 수 있을지 어떨지

cancelableArg - 이벤트의 디폴트 액션을 억제할 수 있을지 어떨지

viewArg - Event 의 AbstractView

detailArg - Event 의 마우스의 클릭수

screenXArg - Event 의 화면상에서의 x 좌표

screenYArg - Event 의 화면상에서의 y 좌표

clientXArg - Event 의 클라이언트의 x 좌표

clientYArg - Event 의 클라이언트의 y 좌표

ctrlKeyArg - Event 의 사이에 Ctrl 키가 밀렸는지 어떠했는지

altKeyArg - Event 의 사이에 Alt 키가 밀렸는지 어떠했는지

shiftKeyArg - Event 의 사이에 Shift 키가 밀렸는지 어떠했는지

metaKeyArg - Event 의 사이에 Meta 키가 밀렸는지 어떠했는지

buttonArg - Event 의 mouse button

relatedTargetArg - Event 에 관련하는 EventTarget

날로 웹 어플리케이션의 UI가 복잡해지고 JavaScript를 이용해서 사용자와 웹 어플리케이션 간의 상호작용에 따른 특정 객체에 대한 접근과 조작이 점점 더 유행을 타게 되면서, 웹 브라우저의 창 속에 존재하는 어떤 한 객체의 정확한 크기와 위치 좌표 값을 얻는 일은 무척이나 중요해졌다. 하지만, 객체의 위치를 재는 방법과 그 속성은 헷갈릴 만큼이나 다양하고, 불행히도 웹 브라우저들 마다 같은 속성도 서로 다른 크기를 돌려준다. 그래서 여기에 DOM에 존재하는 한 객체의 크기와 자신의 위치를 나타내는 여러 속성 값들을 정리하고, 그림으로 나타내 보았다.

- Window Properties:

screen.width, screen.height

스크린 영역의 픽셀(pixels) 단위 너비와 높이(읽기 전용). 웹 표준 규약은 아니지만 여러 브라우저들에서 지원하고 있다.

innerHeight, innerWidth

브라우저 창 속 문서가 표시되는 영역의 픽셀 단위 너비와 높이(읽기 전용). 여기에는 메뉴 막대, 도구 막대, 스크롤 바 등이 포함되지 않으나, 예외적으로 Firefox와 Opera에서는 스크롤 바의 영역이 포함된 값을 돌려준다. 이 속성은 IE에서는 지원되지 않고, 버전과 Doctype 선언에 의한 표준 호환 모드냐 아니냐에 따라 document.documentElement 혹은 document.body에 있는 clientWidth와 clientHeight 값을 사용해야 한다.

outerHeight, outerWidth

브라우저 창 전체의 픽셀 단위 너비와 높이(읽기 전용). 여기에는 메뉴 막대, 도구 막대, 스크롤 바 등이 포함된 값이다. IE에서는 해당 값이 존재하지 않고, 대신 MS 전용 속성인 document.documentElement 혹은 document.body의 offsetHeight, offsetWidth를 써야 한다.

pageXOffset, pageYOffset, scrollX, scrollY

문서가 얼마 만큼 스크롤 되었는지를 알려주는 픽셀 단위의 값(읽기 전용). 이것도 역시나 Internet Explorer는 지원하지 않는다. 대신 document.documentElement 혹은 document.body의 비표준 scrollLeft와 scrollTop을 사용.

- Window and Mouse Event Properties:

screenLeft, screenTop, screenX, screenY

스크린 속 창의 왼쪽 위 구석에 있는 모서리의 위치를 나타내는 좌표 값(읽기 전용). IE, Safari, 그리고 Opera는 screenLeft와 screenTop을 지원하지만, Firefox와 Safari는 screenX와 screenY를 지원한다.

- HTML Element Properties:

offsetHeight, offsetWidth

한 객체의 픽셀 단위의 너비와 높이 값으로, margin을 제외한 스크롤 바와 padding, border 값을 포함하고 있다. 웹 표준 규약은 아니지만 여러 브라우저들에서 지원하고 있다.

clientHeight, clientWidth

한 객체의 픽셀 단위의 너비와 높이 값으로 padding 값이 포함되나, 그 외의 스크롤 바와 border, margin 값은 포함되지 않는다. 웹 표준 규약은 아니지만 여러 브라우저들에서 지원하고 있다.

offsetLeft, offsetTop

상위 offsetParent 객체를 기준으로 해서 한 객체의 왼쪽 위 모서리의 X, Y 좌표 값. 웹 표준 규약은 아니지만 여러 브라우저들에서 지원하고 있다.

offsetParent

어떤 특정 객체를 포함하고 있는 상위 객체로서 하위 객체의 offsetLeft 그리고 offsetTop의 기준 좌표 시스템 역할을 한다. 대부분의 경우, offsetParent는 하위 객체를 포함하고 있는 Document object가 되지만, 유동적으로 위치하는(absolute-positioned) 요소의 경우에는 또 이 요소를 포함하고 있는 유동적으로 위치한 상위 요소가 바로 offsetParent가 된다. 복잡한 것은 브라우저들 마다 offsetParent가 되는 요소를 다르게 가르켜서 주의가 요구된다. (예를 들어, Firefox에서는 root node를 가리키지만, Opera에서는 바로 위의 부모 요소를 가리킨다.) 웹 표준 규약은 아니지만 여러 브라우저들에서 지원하고 있다.

scrollHeight, scrollWidth

한 객체의 픽셀 단위의 전체 너비와 높이 값. 이 객체가 스크롤바를 가지고 있을 경우(overflow: auto), 이 값은 객체의 보여지는 부분만의 크기를 나타내는 offsetHeight과 offsetWidth 값과는 다르게 된다. 웹 표준 규약은 아니지만 여러 브라우저들에서 지원하고 있다. 하지만, 스크롤 바를 표시하는 구현 방법이 브라우저들 사이에 차이를 보이는 이유로 저 마다 돌려주는 값도 달라서, Firefox와 IE는 객체의 padding까지 포함한 값을 나타내나 Safari의 경우에는 content의 크기에다 한쪽 padding 값만을 더해서 돌려주며 Opera의 경우에도 content 크기에다 한쪽 padding 값과 함께 한쪽 border 값까지 포함하는 등 브라우저들 마다 심한 편차를 보여주고 있어서 사용에 신중을 기해야 한다.

scrollLeft, scrollTop

객체가 스크롤바를 가지고 있을 경우, 객체가 얼마 만큼 스크롤 되었는지 왼쪽 위 모서리를 기준으로 한 픽셀 단위의 값. 이 속성은 브라우저에 따라 문서의 <body> 혹은 <html> 태그에도 정의되어 있어서, 문서 전체가 얼마나 스크롤 되었는지를 나타낸다. 주의할 것은, <iframe> 태그에서 스크롤 된 값은 무시된다. 웹 표준 규약은 아니지만 여러 브라우저들에서 지원하고 있다.

자, 그럼 위의 내용을 그림으로 정리하면,

결론적으로, 각 속성들에 대한 브라우저들 끼리의 합의가 이루어지지 않는 한 합리적이고 공통된 값을 얻기란 상당히 골치아파서 커다란 걸림돌로 작용한다. 그나마 UI 관련 JavaScript 라이브러리들이 존재하니 시름을 덜 수 있다. 이렇게 놓고 보니, 정리하려고 해도 현재로선 명확한 정리 자체가 될 수가 없다.

JavaScript OOP, Prototype)

1. 객체에 속성이용

man.name="홍길동";

Man["name"] = "홍길동";

2. 함수 추가

1) 익명의 함수 이용

(함수의 이름이 없고 몸체만있는 함수) 

Man.getName = fuction(){

       return this.name;

}

2) 객체 외부 함수 이용

function printName()

{

       alert(this.name);

}

Man.getName = printName; // 괄호를 사용하지 않음

3. 객체 생성

1) new Object(); 방식

 new Object();

 var man = new Object();

 man.name = "홍길동";

2) 생성자이용

function ManObject(name, height){

       this.name = name;

       this.height = height;

}

Var man = new ManObject("홍길동", 170);

Alert(man.name + " / " + man.height);

3) 생성자를 이용한 방식에서 클래스에 메소드 추가

function ManObject(name, height){

 this.name = name;

 this.height = height;

this.getName = function(){

       return this.name

} // 생성자에 직접 함수 정의

}

Prototype 속성은 모든 자바스크립트 객체의 기본속성이다.

--어떤 객체의 prototype에 속성이나 함수를 정의 한다는 것은 앞으로 그 객체에 공통적으로 적용되는 속성이나 함수를 정의한다는 의미

4.Prototype 를 이용

function ManObject(name, height){

       this.name = name;

       this.height = height;      

} // 생성자를 만들고 함수는 생성자 안에 지정하지 않음

ManObject.prototype.getName = function(){

       return this.name;

} // prototype 속성에 새로운 함수를 붙임

생성자에 함수 정의

인스턴스를 여러 개 만들때 인스턴스는 메모리로 상주. 인스턴스마다 함수와 같이 생김

Prototype을 이용

함수가 단한번 만들어지고 모든 인스턴스는 이 프로로타입 함수를 공유한다.

객체안에 내장된 함수가 객체의 지역변수를 자신의 지역변수처럼 사용할 경우 이러한 함수를 클로저라 한다.

5.클로저

1-1) 클로저 발생 하는 경우

function MyObject(){

       var startTime = new Date();

       this.elapsedTime = function(){

              var now = new Date();

              var elapsed = now - startTime;

              return elapsed;

       }

}      // 클로저 : startTime 이 함수 안에 없고, 클래스 변수         //startTime을 참조함

       //클로저발생 => 함수 안에서 사용하는 외부의 지역변수는

       //깨긋이 지워지지 않고 함수에 묶여있어 메모리 누수현상발생.

1-2) 참조할수 있는 startTime이 없어 오류발생 하는 경우

function MyObject(){

       var startTime = new Date();

       this.elapsedTime = getElapsed;

}

function getElapsed(){

     var now = new Date();

     var elapsed = now + startTime();        return elapsed;

}

1-3) 클로저 발생안되게 사용하는 방법

function MyObject(){

       this.startTime = new Date();

}

MyObject.prototype.elapsedTime = function(){

      var now = new Date();

      var elapsed = now + this.startTime;     

      return elapsed;

}

6.Prototype 의 성질

1) Prototype 속성 변경 

그 이전에 만들 객체의 속성은 자동으로 변경

 프로토 타입 영역의 속성은 모든 인스턴스간에 공유

function MyObject(){ }

MyObject.prototype.color = "blue";

var obj1 = new MyObject();

alert(obj1.color); // blue

MyObject.prototype.color = "red";

car obj2 = new MyObject();

alert(obj1.color + " / " + obj2.color); // red / red

2) Prototype를 이용한 내장객체 확장

Object.prototype.log = function(){

document.write("this:" + this);

//최상위 객체인 Object의 프로토타입에 log함수 추가 => 모든 자바스크립트 객체, 변수에 대해서 log메소드 사용가능

}

var arr = new Array(0,1,2);

arr.log(); // this : 0, 1, 2

var name = "mike";

name.log(); // this : mike

var sum = 1 + 3;

sum.log();       //this : 4

7. 자바스크립트 객체의 상속

1-1) 상속 - prototype 을 이용한 부모 클래스 지정방법 (부모클래스 생성자 매개변수 없는경우)

function ManObject(){ }

       ManObject.prototype.eyeCnt = 2;

       ManObject.prototype.getEyeCnt = function(){

              return this.eyeCnt;

}

function AsianMan(){

       this.eyeColor = "black";

}

AsianMan.prototype = new ManObject();//AsianMan 의 부모클래스는 ManObject

function WesternMan(){

       this.eyeColor = "blue";

}

WesternMan.prototype = new ManObject();//WesternMan 의 부모클래스는 ManObject

var HongGilDong = new AsianMan();

var smith = new WesternMan();

alert(HongGilDong.eyeCnt); // 2

alert(HongGilDong.eyeColor); // black

alert(HongGilDong.getEyeCnt()); // 2

alert(smith.eyeCnt); //2

alert(smith.eyeColor); // blue

alert(smith.getEyeCnt()); // 2

1-2) 상속 - prototype 을 이용한 부모 클래스 지정방법 (부모클래스 생성자 매개변수 있는경우)

/**

 * 사람 클래스

 * @param {String} name

 * @param {String} age

 */

function Person(name){

       this.name = name;

       this.getName = function(){

              return this.name;

       }

}

var gradeEnum = {

       one        : 1 ,

       two        : 2,

       tree       : 3

}

function Student(name, schoolName){      

       this.schoolName = schoolName;      

       this.getSchoolName = function (){

              return this.schoolName;

       }      

       this.grade;

       this.getGrade = function(){

              return this.grade;

       }      

}

Student.prototype = new Person("홍길동"); //순서가 중요.제일 먼저Student.prototype을 지정해야함.

/**

 * prototype을 이용한 setGrade 메소드 확장

 * @param {gradeEnum} grade

 */

Student.prototype.setGrade = function (grade){

       this.grade = grade;

}

var student = new Student("홍길동" ,  "홍길동대학교");

alert(student.getName());                    //홍길동

alert(student.getSchoolName());              //홍길동대학교

student.setGrade(gradeEnum.tree);      

alert(student.getGrade());                   //3

2-1) 상속 - base 속성,메소드를 이용한 방법(부모클래스 생성자 매개변수 없는경우)

function ManObject(){

       this.eyeCnt = 2;

       this.getEyeCnt = function(){

              return this.eyeCnt;

       }

}

// AsianMan 의 부모클래스는 ManObject;

function AsianMan(){

       this.base = ManObject;

       this.base();

       this.eyeColor = "black";

}

 2-2) 상속 - base 속성,메소드를 이용한 방법(부모클래스 생성자 매개변수 있는경우)

/**

 * 사람 클래스

 * @param {String} name

 * @param {String} age

 */

function Person(name){

       this.name = name;

       this.getName = function(){

              return this.name;

       }

}

var gradeEnum = {

       one        : 1 ,

       two        : 2,

       tree       : 3

}

function Student(name, schoolName){      

       this.base = Person;             //부모클래스 지정

       this.base(name);                //부모클래스 생성자호출

       this.schoolName = schoolName;      

       this.getSchoolName = function (){

              return this.schoolName;

       }      

       this.grade;

       this.getGrade = function(){

              return this.grade;

       }      

}

/**

 * prototype을 이용한 setGrade 메소드 확장

 * @param {gradeEnum} grade

 */

Student.prototype.setGrade = function (grade){

       this.grade = grade;

}

var student = new Student("홍길동" ,  "홍길동대학교");

alert(student.getName());                    //홍길동

alert(student.getSchoolName());              //홍길동대학교

student.setGrade(gradeEnum.tree);      

alert(student.getGrade());                   //3

// 타임체크 함수
function timeChecker() {
    var befor, loops, after, tpo, tet, result
    before = new Date()
    loops = 500 //루프 수
    for (var i=0; i < loops; i++) {
        Element.update('element', '내용')// 태스트함수
    }
    after = new Date()
    tpo = Math.round(1000*(after-before)/loops)
    tet = (after-before)/1000
    result = 'Time per operation: '+tpo+', Total excuted time: '+tet; //결과값
    throw(result)
    //return result
}
timeChecker();

1. document.getElementById('엘리먼트').style.스타일 = '값' // (원시코드, 2라인) -->  1.14초
2. $('엘리먼트').style.스타일 = '값' // (2라인) -->  1.656초
3. Element.setStyle('엘리먼트', {'스타일:값의 배열x2'})  // --> 1.985초 
4. $('엘리먼트').setStyle({'스타일:값의 배열x2'}) // --> 3.047초

1. document.getElementById('엘리먼트').offsetHeight  // (원시코드) -->  Number 0.391초
2. $('엘리먼트').offsetHeight //Number --> 0.625초
3. Element.getHeight('엘리먼트') //Number --> 0.641초
4. document.getElementById('엘리먼트').getHeight() //Number --> 1.328초
5. $('엘리먼트').getHeight() //Number --> 1.563초
6. Element.getStyle('엘리먼트', '스타일')  //String  --> 2.812초 
7. $('엘리먼트').getStyle('스타일') //String  --> 3.843초

// Realtime image Ratio
function setRatio(v) {
    var x,y,h
    var w=Math.round(v)
    $$('array').each(function(e){
        x=Element.getStyle(e, 'width'); y=Element.getStyle(e, 'height')
        h=Math.round(v*y.substring(0,y.length-2)/x.substring(0,x.length-2));
        e.style.width=w+'px'
        e.style.height=h+'px'
        e.style.margin=(w-h)/10+'px'
    })
}

1. document.getElementById('엘리먼트').style.display = 'block' // -->  0.547초
2. $('엘리먼트').style.display = 'block' // -->  0.812초
3. Element.show('엘리먼트')  // --> 1.312초
4. $('엘리먼트').show()  // --> 2.609초

1. document.getElementById('엘리먼트').innerHTML // -->  0.672초
2. $('엘리먼트').innerHTML = '내용' // -->  0.766초
3. Element.update('엘리먼트', '내용') // -->  2.39초

1. Math.round(넘버) // -->  1.453초
2. (넘버).toFixed(0) // -->  3.859초

오페라 = '#ff8800'
파이어폭스 = 'rgb(255, 136, 0)'
익스플로러 = '#f80'

for (var n=0; n < 100;n++) if(n%2==1)$('element').innerHTML = 'test';
for (var n=0; n < 100;n++) if(n&1==1)$('element').innerHTML = 'test';

var testing = 'test test test';
testing.match(/test/); // -->  0.702초
/test/.test(testing); // -->  0.643초
testing .indexOf('test ') != -1; // -->  0.395초

var boo = true; 
boo = boo? 'true' : 'false'; // -->  0.736초
if(boo){ boo = 'true'; } else { boo = 'false'; } // -->  0.726초

$$('#taglist .row');// -->  1.496초
$$('.row');// -->  tset failed
document.getElementsByClassName('row', 'taglist');// -->  0.193초
document.getElementsByClassName('row');// -->  3.321초