/*

 라이브러리 해체
 자바스크립트의 작고(?) 가벼운(?) 라이브러리 = JQUERY 라이브러리
 선택자, 함수, ajax





  1) 선택자
    id = "#"
    class = "."




  자바스크립트와 JQUERY 의  SELECTOR(선택자)

  <input type='text' id='test1' class='test2'>

  JAVASCRIPT : document.getElementById("test1");
  JQUERY : $("#test1");

  JAVASCRIPT : document.getElementsByClassName("test2");
  JQUERY : $(".test2");


 */







/*
이렇게 긴 소스를 JQUERY와 같이 간단히 쓰려면 어떻게 해야 할까요?


1) 함수로 호출
function abrand1(value){
return document.getElementById(value);
}
function abrand2(value){
return document.getElementsByClassName(value);
}


abrand1("test1");  -->  document.getElementById("test1");
abrand2("test2");  -->  document.getElementsByClassName("test2");
*/













   /*
2) 하나로 합치고 $로 바꾸기
function abrand(value){
var extElement;
if (value.charAt(0) == "#") {
extElement = document.getElementById(value.substr(1));
} else if (value.charAt(0) == ".") {
extElement = document.getElementsByClassName(value.substr(1));
}
return extElement;
}
var JH = abrand;

JH("#test1");  -->  document.getElementById("test1");
JH(".test2");  -->  document.getElementsByClassName("test2");





실제 JQUERY SELECTOR 부분: s1111


*/










/*


  2) 기본함수추가



  자바스크립트와 JQUERY 의  기본함수


 innerHTML
 JAVASCRIPT : document.getElementsByClassName("test2").innerHTML = VALUE;
 JQUERY : $(".test2").html("VALUE");



 value
  JAVASCRIPT SET: document.getElementById("test1").value='VALUE';
  JAVASCRIPT GET: document.getElementById("test1").value;
  JQUERY : $("#test1").val('VALUE');
  JQUERY : $("#test1").val();


 */






















/*
   function abrand(value){
var extElement;
if (value.charAt(0) == "#") {
extElement = document.getElementById(value.substr(1));
} else if (value.charAt(0) == ".") {
extElement = document.getElementsByClassName(value.substr(1));
}



//여기서부터
extElement.html = function(value) {
this.innerHTML = value;
return this;
};

extElement.val = function(value) {
if (arguments.length > 0) {
this.value = value;
return this;
} else if (arguments.length == 0) {
return this.value;
}
};
//여기까지 추가


return extElement;
}
var $ = abrand;

$("#test1").html('VALUE');  -->  document.getElementById("test1").innerHTML = 'VALUE';
$(".test2").val('VALUE');  -->  document.getElementsByClassName("test2").value = 'VALUE';
$(".test2").val();  -->  document.getElementsByClassName("test2").value;





실제 JQUERY 함수 부분: s2222
*/




































//var abrand = new Object();
function abrand(value) {
var extElement;

if (value instanceof Element) {
extElement = value;
} else if (value.charAt(0) == "#") { // #태그아이디
extElement = document.getElementById(value.substr(1));
} else if (value.charAt(0) == ".") { // .태그클래스
extElement = document.getElementsByClassName(value.substr(1));
} else if (value.charAt(0) == "<"){ // <태그명>
var tag = value.substr(1, (value.length - 2));
extElement = document.createElement(tag);
} else {
extElement = document.querySelectorAll(value);
}

extElement.load = function(url) {
abrand.ajax(url, {
type: "GET",
dataType: "html",
success: function(result) {
extElement.innerHTML = result;
var elements = extElement.getElementsByTagName("script");
for (var i = 0; i < elements.length; i++) {
eval(elements[i].textContent);
}
}
});
};

extElement.html = function(value) {
this.innerHTML = value;
return this;
};

extElement.append = function(childElement) {
this.appendChild(childElement);
return this;
};

extElement.appendTo = function(parentElement) {
parentElement.appendChild(this);
return this;
};

extElement.attr = function(attrName, value) {
if (arguments.length > 1) {
this.setAttribute(attrName, value);
return this;
} else if (arguments.length == 1) {
return this.getAttribute(attrName);
}
};


extElement.css = function(styleName, value) {
if ("length" in extElement) {
// 엘리먼트가 여러 개인 경우,
if (arguments.length > 1) {
// 모든 엘리먼트에 대해 값을 할 당한다.
for(var i = 0; i < extElement.length; i++) {
this[i].style[styleName] = value;
}
return this;
} else if (arguments.length == 1) {
// 만약 특정 스타일의 값을 꺼내려 할 때 0번째인 값만 꺼내서 리턴한다.
return this[0].style[styleName];
}
} else {
if (arguments.length > 1) {
this.style[styleName] = value;
return this;
} else if (arguments.length == 1) {
return this.style[styleName];
}
}
};

extElement.remove = function() {
if ("length" in extElement) {
for(var i = 0; i < extElement.length; i++) {
this[i].parentNode.removeChild(this[i]);
}
} else {
this.parentNode.removeChild(this);
}

return this;
};

extElement.val = function(value) {
if (arguments.length > 0) {
this.value = value;
return this;
} else if (arguments.length == 0) {
return this.value;
}
};

extElement.click = function(listener) {
this.addEventListener("click", listener);
return this;
};

return extElement;
}







abrand.load = function(selector, url) {
abrand.ajax(url, {
type: "GET",
dataType: "html",
success: function(result) {
var element = abrand(selector);
element.innerHTML = result;
}
});
};




abrand.createRequest = function() {
    try {
        return new XMLHttpRequest();
    } catch (exception) {
        var versions = [
            'Msxml2.XMLHTTP.6.0',
            'Msxml2.XMLHTTP.5.0',
            'Msxml2.XMLHTTP.4.0',
            'Msxml2.XMLHTTP.3.0',
            'Msxml2.XMLHTTP',
            'Microsoft.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i++) {
            try {
                return new ActiveXObject(versions[i]);
            } catch (e) { }
        }
    }
};








abrand.ajax = function(url, settings) {
var xhr = abrand.createRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var dataType = "json";
if (settings.dataType) {
dataType = settings.dataType;
}

var result = null;
if (dataType == "json") {
result = JSON.parse(xhr.responseText);
} else if (dataType == "html") {
result = xhr.responseText;
}

if (settings.success) {
settings.success(result);
}
} else {
if (settings.error) {
settings.error("서버 요청 오류!");
}
}
}
};


var type = "GET";
if (settings.type) {
type = settings.type;
}

xhr.open(type, url, true);

if (type == "GET") {
xhr.send();
} else {
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var params = null;
if (settings.data) {
params = "";
for(var name in settings.data) {
if (params != "") {
params += "&";
}
params += name + "=" + encodeURIComponent(settings.data[name]);
}
}
xhr.send(params);
}
};



var $ = abrand;
//s3333
//질문1:왜 ajax는 UTF-8만을 지원하는가?
//http://benant.wordpress.com/2011/12/10/








//결론



/*
 1. 제이쿼리는 라이브러리 인가? 프레임워크인가?
http://ohgyun.com/288
아직까지 jQuery는 javascript의 라이브러리 일뿐. 그 이상도 이하도 아니다. -마틴파울러
*/

/*
 2. 제이쿼리 사용을 최소화 하자.
JQUERY는 일반적으로 250KB (MIN 파일은 55KB)-사진
작고(X), 가벼운(X) 라이브러리 = JQUERY

 */