[JS] jQuery - Ajax

 여기서는 Ajax에 관련된 jQuery메소드에 대해 알아보고자 한다. 자바스크립트에서 XMLHttpRequest객체를 활용해 보았는데 jQuery에서는 훨씬 간단하게 서버에게 데이터를 요청하고 전달받은 데이터를 조작하는 것도 더 쉽다.

Ajax는 항상 이벤트로부터 시작한다는 간단한 사실을 잊지말자!

하나씩 Ajax를 위한 메소드를 살펴보자.

$(seletor).load(url, parameters, callback)
- url : 요청이 전송되는 서버 url
- parameters : url에 전달하고자 하는 데이터
- callback : 응답 결과로 데이터를 수신한 뒤 호출되는 함수

load함수의 결과로 html의 요소로 넘겨받을 경우 호출한 객체의 자식으로 들어감. 전달받은 데이터가 html의 요소이기 때문에 웹상에서 화면에 결과를 보여주기에 용이하다.

$.get(url, parameters, callback)
url을 사용하여 서버에 파라미터 값을 url에 문자열로 삽입하여 GET전송. callback함수로 데이터를 얻음. 이 방식이나 post방식을 이용하면 text뿐만 아니라 xml문서요소도 받을 수 있다. xml일 경우 DOM객체 형식으로 부모 자식관계를 잘 이용하여 데이터를 참조해야한다.

$.post(url, parameters, callback)
url을 사용하여 서버에 파라미터 값을 본문에 삽입하여 POST전송. callback함수로 데이터를 얻음(TEXT or XML)

여기서 잠깐!
 get과 post의 의미를 좀 더 설명하자면 get 방식은 데이터를 서버로 전송할 때 url에 문자열을 붙여 전송한다. 따라서 url길이에 제한적이며 형식에 맞지 않는 문자는 encoding되어야할 필요가 있다. 또한 url에 데이터를 전송하는 방식이기 때문에 사용자가 확인 가능하다는 특징이 있다.
 post 방식은 모든 데이터를 http헤더에 포함하여 전송하는 방식이다. 따라서 길이에 제한이 없고 사용자가 볼 수 없다는 특징이 있다. 또한 get보다는 문자의 encoding의 필요성은 상대적으로 낮으나 비영어권과 같은 특수한 환경일 경우는 encoding이 필요하다.

$.getJSON(url, parameters, callback)
url을 사용하여 서버에 파라미터 값을 본문에 삽입하여 POST전송. callback함수로 JSON 데이터를 얻음(TEXT or XML)
참고로 json 객체를 얻게 되면 항상 키와 값으로 원하는 데이터를 참조한다.

$.getScript(url, callback)
url을 사용하여 서버에 GET전송

왜 스크립트를 클라이언트에서 get요청을 할까? 그 이유는 처음부터 많은 스크립트를 로드할 경우 로딩시간이 그만큼 길어지기 때문에 사용자에게 불편함을 줄 수 있고 특정한 이벤트나 자주 사용하지 않는 기능을 위한 스크립트는 나중에 로딩해주는 경우를 위해서이다.

$.ajax(options)
- options : 요청에 대한 매개변수를 정의하는 객체

options의 속성종류
url : 요청url
type : 사용 할 HTTP메서드(생략시 GET)
data : 요청에 전달될 객체(object)
dataType : 응답의 결과로 반환되는 데이터의 종류(xml, html, json, jsonp, script, text)
timeout : Ajax요청의 제한시간, 제한시간초과시 error callback 호출되거나 요청 취소
global : true : 전역함수활성 false : 전역함수비활성
contentType : 요청에 지시되는 contentType, 기본값 : "application/x-www-form-urlencoded"
success : 응답이 성공시 호출되는 함수
error : 응답이 에러상태 코드를 반환하면 호출되는 함수
complete : 요청이 완료되면 호출되는 함수(success 또는 error 후 실행)
beforeSend : 요청전송 이전에 호출되는 함수
async : true : 비동기호출, false : 동기호출
processData : flase시 url인코딩 형태로 처리되어 전달되는 데이터를 금지
ifModified : true시 헤더정보 확인하여 미변경시 요청 성공

ajax 전역함수
ajaxStart(callback)
ajaxSend(callback)
ajaxSuccess(callback)
ajaxError(callback)
ajaxComplete(callback)
ajaxStop(callback)

사용예
$(document).ready(function() {
$("#letter-d a").click(function() {
$.ajax({url:"d.xml",
dataType:"xml",
success:function(data) {
$("#dictionary").empty();
$(data).find("entry").each(function() {
$entry = $(this);
var html = "<div class='entry'>";
html += "<h3 class='term'>"+ $entry.attr("term") + "</h3>";
html += "<div class='part'>"+ $entry.attr("part") + "</div>";
html += "<div class='definition'>" + $entry.find("definition").text() + "</div>";
html += "</div>";
$("#dictionary").append(html);
});
}
});
return false;
});
});

[JS] JavaScript - Ajax

Ajax 란?
Asynchronous JavaScript XML의 약자로써 페이지의 이동 없이 클라이언츠에서부터 전달한 데이터의 요청을 서버에서 DB와 관련하여 적절한 처리 후 응답하여 하나에 웹페이지에서 모든 동작이 가능하게하는 기술이다.

예를 들어 구글의 지도나 검색시 검색창 아래에 관련 검색이 실시간으로 제공되는 것을 의미한다.

비동기식(Asynchronous)이라는 단어에서 알 수 있듯이 실시간으로 일어나는 순간의 이벤트에 대해 계속해서 데이터의 전달과 데이터 교환이 모두 이루어지는 것이 특징이다. 만약 동기식으로 하나의 작업을 처리하기 위해 다른 요청을 받을 수 없는 상황이 되면 동적인 웹을 구성하기는 어렵다.

그럼 기본적인 자바스크립트만으로 Ajax하는 방법을 알아보자.

위에 그림을 보면 클라이언트로부터의 요청이 XMLHttpRequest로 전달 되는 것을 볼 수 있을 것이고 서버에서 처리한 데이터(XML, TEXT, JSON)들도 XMLHttpRequest로 전달 되는 것을 볼 수 있다. 이는 XMLHttpRequest를 다루는 것이 Ajax에서 중요한 부분이라는 것을 알 수 있다.

XMLHttpRequest는 사용자의 요청을 웹서버에 전송하고 결과를 웹브라우저에 전달해 주는 역할을 하며 클라이언트가 서버와 통신을 하는데 중요한 객체이다.

자바스크립트에서 XMLHttpRequest 객체를 생성해보자.
var request = new XMLHttpRequest();

다음은 open()메서드를 이용하여 전송위치와 전송방식, 동기와 비동기를 설정.
request.open("GET", "hello.jsp", false);//전송위치에는 이미 만들어 놓은 jsp파일로 지정, false는 동기 방식, true는 비동기 방식

request.send();//전송위치로 객체를 전송!

여기까지가 기본적인 XMLHttpRequest 객체 사용법이다.
그렇다면 원하는 데이터는 어떻게 전송시킬 수 있을까? 전송방식이 GET일 경우 다음과 같이 데이터를 넘길 수 있다.
예)
request.open("GET", "hello.jsp?name=kylor", false);
데이터를 처리해 주는 jsp에 ?를 붙이고 name에 kylor이라는 문자를 넘겨주었다. 서버에서는 name에서 문자열을 추출하여 처리할 수 있게 된다.

그렇다면 데이터가 잘 전송되었는지는 어떻게 확인할 수 있을까?
onreadystatechange이벤트로 확인가능하다. onreadystatechange이벤트는 XMLHttpRequest의 상태가 변경될 때마다 호출된다.

onreadystatechange이벤트가 호출될 때 XMLHttpRequest객체의 상태를 readyState속성으로 확인가능하다.
readyState 속성은 0부터 4까지 상수로 존재한다.
0 : 초기화 안됨
1 : send 사용전
2 : 데이터 받지 못함
3 : 상호작용 중(일부)
4 : 완료

완료가 된 상태에서 XMLHttpRequest를 사용할 수 있다는 것은 당연할 것이다.

Ajax요청을 사용하여 데이터의 수신이 완료했더라도 데이터가 올바른 데이터인지 확인해 보아야 한다. 이를 위해 HTTP Status Code를 사용한다.
1.XX : 처리 중
2.XX : 성공
3.XX : 리다이렉트
4.XX : 클라이언트 오류
5.XX : 서버 오류

따라서 다음과 같은 코드가 함께 추가되야 한다.

request.onreadystatechange = function(event){
if(request.readyState == 4){
if(request.status == 200){
...처리....
}
}
}

그렇다면 XMLHttpRequest를 이용하여 서버로부터 리턴받은 XML, JSON을 어떻게 다룰 수 있을까?
JSON일 경우
var json = eval("(" + request.responseText + ")");
json객체를 리턴받아 키와 값으로 데이터를 읽을 수 있다.

XML일 경우
var xml = request.responseXML;
xml객체를 리턴받아 문서구조로 데이터를 읽을 수 있다.

[JS] jQuery - 객체 위치 시키기

jQuery를 하면서 선택자가 가장 중요한 부분이라고 언급하였다. 그리고 jQuery에서 제공하는 다양한 메소드 덕분에 자바스크립트로는 까다로운 부분을 비교적 쉽게 구현 할 수 있다는 장점이 있었다.

jQuery의 또다른 장점이 있다. 그것은 얼마든지 동적으로 객체를 생성하고 내가 원하는 자리에 넣을 수 있는 메서드도 제공하기 때문이다. 여기서는 한번 언급하긴 하였으나 제대로 된 설명이 필요했던 메서드들에 대해 알아보기로 하자.

우선 객체의 생성을 보자
$()을 사용하여 객체를 쉽게 생성할 수 있다.
예)
$("<h1></h1>");//h1태그 생성

객체를 생성했다면 문서에 연결이 필요하다.
예)
$("body").append($("h1"));//body에 h1태그 삽입

중요한 메서드가 바로 append()이다. 생성한 객체를 원하는 객체 앞이나 뒤에 연결을 해야 하는데 jQuery에서는 8가지의 메소드를 제공한다. 8가지 메소드는 부모자식관계와 형제관계로 크게 나눌 수 있다.

부모자식관계
$(A).append(B) : 위에서 언급한 메소드이다. 부모 A태그 가장 뒤에 B태그를 위치시킴
$(A).prepend(B) : 부모 A태그 가장 앞에 B태그를 위치시킴
$(A).appendTo(B) : to로 인해 헷갈릴 수 있는 메서드다 주의하자. A태그를 부모 B태그 가장 뒤에 위치시킴
$(A).prependTo(B) : A태그를 부모 B태그 가장 앞에 위치시킴

다음은 형제관계를 보도록 하겠다. 하지만 그전에 도대체 왜 To를 이용하여 선택자에 따른 메소드의 종류를 많이 만들었을까 생각해보자. 그 이유는 체인 메소드를 이용하여 생성하거나 수정한 객체가 부모 태그일 경우나 자식 태그일 경우로 나눠지게 때문이다. 선택한 객체가 자식태그였다면 appendTo나 prependTo를 이용하여 부모태그에 포함시키는 것이 당연하다.

자 설명은 이쯤하고 형제관계를 보자.
$(A).before(B) : A객체 앞에 B를 위치시킴
$(A).after(B) : A객체 뒤에 B를 위치시킴
$(A).insertBefore(B) : A객체를 B앞에 위치시킴
$(A).insertAfter(B) : A객체를 B뒤에 위치시킴

원하는 객체를 원하는 위치에 이동시키기 위해서 꼭 알아야하는 메소드이다. 잘 알아두자.

[JS] jQuery - 애니메이션

기본 애니메이션을 위한 메서드(동적인 상태라는 것을 상기하자)
show() : 문서 객체가 커지게한다.
hide() : 문서 객체가 사라지게한다.
toggle() : show()와 hide()메서드를 번갈아 가며 실행
slideUp() : 문서 객체가 슬라이드 효과와 함께 위로 접힘
slideDown() : 문서 객체가 슬라이드 효과와 함께 아래로 펼쳐짐
slideToggle() : slideDown()과 slideUp()메서드를 번갈아 실행
fadeIn() : 문서 객체를 선명하게 보여줌
fadeOut() : 문서 객체를 사라지게 함
fadeToggle() : fadeIn()과 fadeOut()메서드를 번갈아 실행

메서드 사용 형태
1. $(selector).method();
2. $(selector).method(speed);
3. $(selector).method(speed, callback);
4. $(selector).method(speed, easing, callback);

speed : 애니메이션을 진행할 속도 지정(밀리초 단위의 숫자 또는 "slow", "normal", "fast" 입력)
callback : 애니메이션을 모두 완료한 후 실행할 함수를 지정
easing : 애니메이션을 미묘하게 변화시킬 함수를 지정

사용자 정의 애니메이션
1. $(selector).animate(object);
2. $(selector).animate(object, speed);
3. $(selector).animate(object, speed, easing);
4. $(selector).animate(object, speed, easing, callback);

-object 속성종류
opacity, top, left, right, bottom, top, width, margin, padding

애니메이션 사용에 많은 예가 있다. 그 중 이미지를 클릭하면 순차적으로 이미지가 바뀌는 애니메이션 예를 보자.


<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Change Images</title>
<style type="text/css">
.image {
position: absolute;
top: 10px;
left: 10px;
}

.image img{
width: 300px;
height: 380px;
cursor: pointer;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").hide();

$("img:first").show();
$("img").click(function(){
$(this).each(function(){
//alert(this.src);
if(this == $("img:last").get(0)){
$("img:first").fadeIn("slow");
$(this).hide();
}else{
$(this).parent().next().children().fadeIn("slow");
$(this).hide();
}
})
})
})
</script>
</head>
<body>
<a class="image"><img src="../script/images/bg14.jpg"/></a>
<a class="image"><img src="../script/images/bg15.jpg"/></a>
<a class="image"><img src="../script/images/bg16.jpg"/></a>
<a class="image"><img src="../script/images/bg17.jpg"/></a>
<a class="image"><img src="../script/images/bg18.jpg"/></a>
</body>
</html>

[JS] jQuery - 메소드

jQuery에는 다양하고 유용한 라이브러리가 굉장히 많다. 그렇기 때문에 많은 개발자들이 jQuery를 사용하는 것이다. 어떠한 메소드들이 있는지 살펴보자.

1. 배열관리 메소드
 $.each(objectArray, function(index, object){})
예)
$.each(array, function(index, obj){//첫 번째 인자로 배열의 인덱스가 오고 두 번째
var output = "";       //인자로 인덱스에 해당하는 객체가 넘겨진다.

output += "<a href=" + obj.link + ">";
output += "    <h1>" + index + " : " + obj.name + "</h1>";
output +="</a>"

document.body.innerHTML += output;
})

$(selector).each(function(index, object){})
예)
$(array).each(function(){//인자로 넘겨주는 값이 없을 때는 this로 객체에 접근 가능
var output = "";

output += "<a href=" + this.link + ">";
output += "    <h1>" + this.name + "</h1>";
output +="</a>"

document.body.innerHTML += output;
})

2. 객체 확장 메소드
$.extend(object, 속성 추가);
예)
var object = {};//빈 객체 생성

$.extend(object, {
    name: "용",
    gender: "남"
}


3. 필터링 메소드
$(selector).filter(selector);
filter의 인자의 선택자와 일치하는 배열 리턴(하나일 경우 하나의 객체만 리턴)


4. 특정 태그 선택 메소드
$(selector).find("tagName");
선택자 중에 tagName을 찾아 요소를 배열로 리턴(하나일 경우 하나의 객체만 리턴)

5. 속성 설정 및 속성 값 반환 메소드
$(selector).attr(name, value);
$(selector).attr(name, function(){});
$(selector).attr(objec);//object속성값 반환

그밖에 메소드들
css() : 스타일과 관련된 모든 기능을 수행(예: .css("font-size", "12 px"))
size() : 객체수를 반환
addClass() : 클래스 속성 추가
removeClass() : 클래스 속성 제거
attr() : 메서드의 인자를 통해 속성추가, 속성값 변경, 속성값 반환
removeAttr() : 속성을 제거
get() : jQuery객체를  DOM객체의 배열로 리턴(인자로 인덱스를 넣으면 배열에서 인덱스에 해당하는 DOM객체를 리턴)
not(expression) : 표현식에 일치하는 객체를 제거한 배열리턴
has(expression) : 표현식과 일치하는 자식을 가진 객체의 배열리턴
is(expression) : 표현식과 일치하는 객체의 배열리턴
end() : jQuery체인에 주로 이용되며 이전선택으로 돌아간다.
andSelf() : 체인에서 이전 두개의 선택자를 하나로 합친다.
html() : 객체 내부의 글자와 관련된 모든 기능 수행(html태그 인식)
text() : 객체 내부의 글자와 관련된 모든 기능 수행
find() : 특정 태크를 선택
remove() : 객체를 제거
empty() : 객체의 후손을 모두 제거
clone() : 객체를 복사
offset() : 객체의 위치를 조회하거나 지정
wrap() : 객체를 싸버린다. 선택한 객체를 자식으로 두고 싶을 때 사용.
$() : 객체 생성
$(A).appendTo(B) : A를 B의 뒷 부분에 추가(자식(A)을 부모(B)내용에 뒤에 붙인다)
$(A).append(B) : B를 A의 뒷 부분에 추가
$(A).prependTo(B) : A를 B의 앞 부분에 추가(자식(A)를 부모(B)내용에 앞에 붙인다)
$(A).prepend(B) : B를 A의 앞 부분에 추가
$(A).insertAfter(B) : A를 B의 뒤에 추가
$(A).After(B) : B를 A의 뒤에 추가(형제 B가 A의 뒤에 추가)
$(A).insertBefore(B) : A를 B의 앞에 추가
$(A).before(B) : B를 A의 앞에 추가(형제 B가 A의 앞에 추가)

[JS] jQuery - 이벤트

 자바스크립트에서 브라우저의 이벤트를 연결 시키는 이벤트 모델에 대해 공부하였다. DOM 레벨에 따른 이벤트 연결 방식이 몇가지 있었다. 그러나 주의해야할 점은 항상 브라우저간 차이점을 고려하여 코딩을 해야했었다.(표준 브라우저, IE브라우저)

그러나 jQuery에서는 크로스 브라우징이 가능하다. 이는 표준 브라우저와 IE브라우저에 관계없이 스크립트 제작이 가능하다. 이것이 jQuery의 장점이다.

 jQuery의 이벤트는 기존 자바스크립트의 이벤트가 모두 존재한다. 그러나 자바스크립트의 이벤트 연결보다 훨씬 간편하다.


$(selector).bind(eventName, data, handler)
$(selector).bind(object)
이벤트 할당 함수
eventName : 이벤트 이름(예 : click)
data : 핸들러에 사용할 데이터(생략가능)
handler : 이벤트 핸들러

이벤트종류

$(selector).unbind(event)
$(selector).unbind(eventName)
$(selector).unbind(eventName, handler)
이벤트 핸들러 제거
event : 이벤트를 발생시킨 객체의 정보

$(selector).toggle(handler, ...,handler)
click이벤트를 여러 핸들러로  번갈아가며 실행

$(selector).hover(handler, handler)
mouseenter이벤트와 mouseleave이벤트를 동시에 연결

$(selector).delegate()
현재 또는 미래에 존재하는 문서 객체에 이벤트를 연결

$(selector).live()
현재 또는 미래에 존재하는 문서 객체에 이벤트를 연결

$(selector).one(eventName, handler)
이벤트를 한 번만 연결

$(selector).trigger(eventName)
$(selector).trigger(eventName, data)
인벤트를 강제로 발생(사용자의 입력이 따로 필요없이 이벤트를 실행시킴)

이벤트 객체
이벤트를 연결할때 핸들러에는 event객체가 자동으로 인자로 넘어간다.

속성
event.pageX : 브라우저의 화면을 기준으로 한 마우스의 X 좌표
event.pageY : 브라우저의 화면을 기준으로 한 마우스의 Y 좌표
event.preventDefault() : 기본 이벤트 제거
event.stopPropagation() : 이벤트 버블링 제거

이벤트 통합 메서드
jQuery에서는 이벤트를 통합하여 연결시키는 on()과 off()를 권장하고 있다.

on() : 이벤트를 연결
off() : 이벤트를 제거
$(selector).on(eventName, handler) - bind()와 같은 역할
$(selector).off(eventname[handler,,,]) - nubind()와 같다

[JS] jQuery - 선택자

CSS에서 선택자에 대해서 공부해 보았다. HTML 문서에서 가장 중요한 부분은 내가 원하는 요소를 얼마나 잘 가져오는지가 중요하다.

CSS에서 선택자를 이용하여 원하는 요소에 원하는 스타일을 줄 수 있었고 자바스크립트에서도 DOM을 통해 원하는 객체를 어떻게 가져와야하는지가 중요했다. 왜냐? 객체를 가져와야 그 속성을 추가하거나 제거하고 메소드를 이용하면서 프로그램을 제작할 수 있다.

사실 조작할 대상을 잘 선택하고 조작해야한다. 그것이 프로그램의 중요한 원리 중 하나이다.

선택자는 jQuery에서도 굉장히 중요하다. 선택자만 잘 알아도 jQuery의 반을 마스터 한 것이다. CSS를 하면서 공부했던 선택자를 잘 상기하도록 하자.

일단 기본적으로 알아야 할 내용은 $()에 css선택자 문자열을 전달하면 일치하는 요소의 집합을 나타내는 jQuery를 반환한다는 것이다. 즉, 조회의 결과로 하나의 요소만 일치한다면 하나의 객체만을 얻어서 원하는 작업을 처리해 줄 수 있지만 집합을 얻을 때가 많을 것이고 이를 잘 처리해야하는 것이 프로그래머의 몫이다.(반환되는 요소집합이 배열과 유사하기는 하지만 실제 배열은 아니다)

1. 전체선택자 - $("*")
2. 태그선택자 - $("태그명")
3. 아이디선택자 - $("#아이디")
4. 클래스선택자 - $(".클래스")
5. 자식선택자 - $("부모 > 자식")
6. 후손선택자 - $("부모 후손")
7. 속성선택자
요소[속성] : 특정 속성을 가진 요소(객체) 선택
요소[속성=값] : 해당하는 속성과 값이 일치하는 요소 선택
요소[속성~=값] : 속성에 특정한 값을 단어로써 포함하는 요소 선택
요소[속성^=값] : 속성에 특정값으로 시작하는 요소 선택
요소[속성$=값] : 속성에 특정값으로 끝나는 요소 선택
요소[속성*=값] : 속성에 특정값을 포함하는 요소 선택


8. 입력(input) 양식필터  선택자
요소:button = input 태그 중 type속성이 button인 요소 선택
(종류 : button, checkbox, file, image, password, radio, reset, submit, text)
요소:checked = 체크된 input요소 선택
요소:disabled = 비활성화된 input요소 선택
요소:enabled = 활성화된 input요소 선택
요소:focus = 입력대기 중인 input요소 선택
요소:input = 모든 input요소 선택
요소:selected = option요소 중 선택된 요소 선택

9. 선택필터 선택자
요소:odd = 홀수 번째에 위치한 요소 선택
요소:even = 짝수 번째에 위치한 요소 선택
요소:first = 첫 번째 위치한 요소 선택
요소:last = 마지막에 위치한 요소 선택
요소:animated : 현재 애니매이션이 적용되고 있는 요소 선택
요소:header : 헤더 요소 선택(h1~h6)
요소:hidden : 감춰진 요소 선택
요소:visible : 보여지는 요소 선택


10. 함수필터 선택자
요소:contains(문자열) = 특정 문자열을 포함하는 요소 선택
요소:eq(n) = n번째에 위치하는 요소 선택
요소:gt(n) = n번째의 위치를 초과하는 요소 선택
요소:has(selector) = 선택자로 선택한 요소를 가지고 있는 요소 선택
요소:lt(n) = n번째 위치 미만인 요소 선택
요소:not(selector) = 선택자로 선택한 요소를 가지고 있지 않은 요소 선택
요소:nth-child(3n+1) = 3n+1번째 위치하는 요소 선택(1, 4, 7, 10...)


몇가지 예를 보도록하자.

p:odd = p태그 중 홀수번째 태그 선택
ul li:last-child = ul태그 안에 li태그 중 마지막 태그 선택
table#laguage td:nth-child(1) = laguage라는 아이디를 가진 테이블 안에 td태그 중 인덱스가 1인 태그 선택
$("input[type=checkbox][checked]")
타입이 checkbox이고 체크되어진 input객체를  jQuery객체로  선택.
checkbox:checked:enabled = 활성화되고 선택이 되어 있는 체크박스 객체 선택
input:not(:checkbox) = input객체 중 checkbox가 아닌 객체 선택
img:not([src*="dog"] = img객체 중 src속성에 "dog"를 포함하지 않는 객체 선택
div:has(span) = div객체 중 span객체를 가지는 객체 선택

[JS] jQuery

 인터넷에는 다양한 어플리케이션(RIA)가 많이 존재한다. 웹서핑을 하다보면 무수히 많은 웹 어플리케이션을 만나게 된다. 하지만 매번 install을 해야만 하고 웹서핑을 하면 할수록 내 컴퓨터에는 잘 알지도 못하는 프로그램들이 수두룩하다.

이것은 플러그인 기반의 RIA들 때문인데 이러한 단점을 보완하기 위해 AJAX가 등장하게 되었다. 브라우저 기반의 다양한 어플리케이션을 제공함으로써 별다른 프로그램 설치가 필요없게 되는 것이다.
 AJAX를 하기 위한 기반 언어가 자바스크립트이고 자바스크립트의 강력한 라이브러리로 사용되고 있는 jQuery가 있다.

jQuery란 자바스크립트 라이브러리로써 DOM과 Ajax의 복잡성을 쉽게 다루기 위해 만들어 졌다.

특징
소스가 자바스크립트에 비해 단순해지며 다양하고 유용한 플러그인이 있다. 빠르게 업데이트 되고 있고 이는 많은 개발자들이 jQuery를 사용하고 있다는 증거이기도 하다.
 실제로도 수많은 대형 웹사이트에서 jQuery를 사용하고 있고 미국의 웹개발자 중 65%가 jQuery를 사용한다고 한다.
 또한 jQuery는 다루려는 문서 요소를 찾기 쉽게 만들어 주며, 찾은 후에 내용 추가나 HTML속성과 CSS의 수정, 이벤트 핸들러 정의, 애니메이션 적용 같은 작업을 할 수 있다.

jQuery라는 이름으로부터 알 수 있듯이 조회에 초점을 둔 라이브러리이다. 그 중에 강력한 기능은 바로 원하는 요소에 순차적인 적용(스타일 또는 동작)을 표현하기 위한 메서드 체인 기법이다.

실제 jQuery를 사용하기 전에 알아야할 메소드가 있다.
$(document).ready(function(){
          ...코드...
});

여기서 처음 보는 $함수는 jQuery의 객체를 선택하고 객체가 jQuery의 속성과 메소드, 즉 라이브러리를 사용할 수 있는 것을 의미한다.(팩터리 함수라 하며 jQuery의 전역함수이다.)

위에 jQuery메소드는 문서의 구조만 다 읽어들인 뒤 호출된다. 반면에 $(window).load(function(){
         ...코드...
});
메소드는 문서구조 뿐만 아니라 관련된 리소스들까지 모두 로드한 뒤에 호출된다. 따라서 어느 정도의 속도차가 두 메소드 사이에 존재한다.

여기서는 주로 $(document).ready()를 많이 사용할 것이다.

[JS] window.onload로 2개 함수 로드

window 객체의 onload()를 언급한바 있다. HTML문서의 모든 태그들을 다 로드한 뒤에 실행되는 메서드로써 태그에 연결되어 있는 이벤트 함수를 로드한다.

그런데 onload()를 이용하여 두개의 함수를 연결하고자 한다면 다음과 같은 실용적인 코드가 있다. 유용하니 잘 알아두자.

function addEvent(func){//사용자 정의함수. 인자로 함수를 받는다.
    var oldonload = window.onload;//처음에 로드한 함수를 변수에 저장한다.없다면 null
    if(typeof window.onload != "function"){//타입을 검사하여 처음로드되는 것인지 판단
        window.onload = func;//처음로드되는 함수라면 등록
    }else{
        window.onload = function(){//이미 로드된 함수가 있다면 둘다 호출
            oldonload();
            func();
        }
    }
}

addEvent(func1);
addEvent(func2);

2개의 서로다른 함수를 로드하는 새로운 사용자 정의 함수이다.

[JS] 정규표현식

정규표현식은 참 유용한 면이 많다. 문자열은 생각보다 많이 다루게되고 문자를 조작하거나 검색하는데 정규표현식이 굉장히 편리하다. 따라서 자바스크립트에서는 내장객체로써 정규표현식 객체를 제공한다.

생성 방법
1. var reg = /"문자열이나 패턴, 수량, 이스케이프 문자의 조합"/플래그;
2. var reg = new RegExp("문자열이나 패턴, 수량, 이스케이프 문자의 조합", "플래그");

메소드
exec()
- 정규표현식과 일치하는 문자열을 리턴

test()
- 정규표현식과 일치하는 문자열이 있는지 없는지를 나타냄(boolean)


match(regExp)
- 정규표현식과 일치하는 부분을 리턴


replace(regExp, replacement)
- 정규표현식과 일치하는 부분을 지정한 문자열로 치환

search(regExp)
- 정규표현식과 일치하는 부분의 인덱스를 반환

split(regExp)
- 정규표현식을 기준으로 문자열을 잘라 배열을 리턴

대체문자
$& : replace()를 사용할 때 일치한 문자열을 가리킴
$` : 일치하는 부분의 앞부분 문자열을 가리킴
$' : 일치하는 부분의 뒷부분 문자열을 가리킴
$1, $2, $3 : 그룹

플래그문자
g(Global) : 전역 매칭
m(Multiple) : 여러 줄 매칭
i(Ignore Caes) : 대소문자 구분 않음

앵커문자
^ABC : 맨 앞 문자가 ABC
ABC$ : 맨 뒤 문자가 ABC

메타문자
. : 아무문자
[abc] : 괄호 안의 글자
[^abc] : 괄호 안의 문자 제외
[a-z] : a부터 z까지만 입력
[A-Z] : A부터 Z까찌만 입력 ([A-Za-z]로도 쓰임)
[0-9] : 숫자만 입력
\d : 숫자
\D : 숫자 이외
\s : 공백문자
\S : 공백문자 이외
\w : 알파벳과 숫자로 된 문자
\W : 알파벳과 숫자로 된 문자 제외(특수문자)

수량문자
a+ : 하나이상
a* : 0개 또는 하나 이상(여러개)
a? : 0개 또는 1개
a{숫자} : 숫자에 매치(자리수)

[JS] 브라우저 객체 모델(BOM) - 나머지 객체들

Screen
웹 브라우저의 화면이 아니라 운영체제 화면의 속성을 가지는 객체이다.

속성
width : 화면의 너비
height : 화면의 높이
availWidth : 실제 화면에서 사용 가능한 너비
availHeight : 실제 화면에서 사용 가능한 높이
colorDepth : 사용 가능한 색상 수
pixelDepth : 한 픽셀당 비트 수

location
브라우저의 주소 표시줄과 관련된 객체

속성
href : 문서의 URL 주소
host : 호스트 이름과 포트 번호
hostname : 호스트 이름
port : 포트 번호
pathname : 디렉토리 경로
hash : 앵커 이름(#~)
search : 요청 매개 변수
protocol : 프로토콜 종류

메서드
assign(link) : 현재 위치를 이동
reload() : 새로 고침
replace(lick) : 현재 위치를 이동(뒤로가기 버튼 사용 X)

navigator
웹 페이지를 실행하고 있는 브라우저에 대한 정보를 가진 객체

속성
appcodeName : 브라우저의 코드명
appName : 브라우저의 이름
appVersion : 브라우저의 버전
platform : 사용 중인 운영체제의 시스템 환경
userAgent : 브라우저의 전체적인 정보

[JS] 브라우저 객체 모델(BOM) - Document

Document 객체는 최상위 객체인 window객체의 하위 객체로 문서에 대한 모든 정보를 관리하는 객체이다.

속성

nodeName : 노드 이름
nodeType : 특정 노드의 형식을 지정
nodeValue : 텍스트 노드의 문자열 값
childNodes : 하위 노드의 리스트
firstChild : 하위 노드 리스트 중 첫번째 노드
lastChild : 하위 노드 리스트 중 마지막 노드
parentNode; 자신의 부모 노드
nextSibling : 자신의 다음 형제노드
previousSibling : 자심의 바로 앞 형제 노드
innerHTML : 태그의 내용

메소드

open() : HTML문서에 데이터를 보낼 준비를 하거나 데이터를 모두 전송했음을 알림

close() : open()로 열려진 문서를 닫아 주는 역할

clear() : 브라우저에 나타난 문서를 지움

write() : 지정된 문서의 데이터를 출력

writeln() : 지정된 문서의 데이터를 출력
createElement(tagName) : 요소 노드를 생성
createTextNode(text) : 텍스트 노드를 생성
appendChild(node) : 객체에 노드를 연결
item(index) : 객체배열 중 해당하는 이덱스 객체 리턴
getElementById(id) : id를 가진 태그(객체)를 리턴
getElementsByName(name) : name을 가진 태그의 배열 리턴
getElementsByTagName(tagName) : tagName과 일치하는 태그의 배열 리턴
getAttribute(String attrName) : 속성값 검색
setAttribute(String attrName, String attrValue) : 속성값 설정
removeChild(child) : 자식노드 제거
insertBefore(Nod new, Node target) : target 엘리먼트의 형제로 앞에 추가(특정 위치 앞)
replaceChild(Node new, Node old) : 자식노드교체
hasChildNodes() : 자식 노드 여부 검사
cloneNode(boolean deep) : 노드복사

다음은 Document 객체의 하위 객체에 대해 알아보자.

Image 객체

<img>태그의 정보를 가진 객체

속성

name : 이미지 객체의 이름

src : 이미지의 URL 주소

lowsrc : 이미지의 URL 주소를 나타내며 해상도가 낮은 이미지를 전송할 때 사용

height : 이미지의 높이

width : 이미지의 넓이

border : 이미지의 테두리

complete : 이미지를 모두 전송받았는지를 알림(boolean)

Form 객체

<form>태그의 정보를 가진 객체로써 폼안에 데이터를 접근하기 위해 많이 사용된다.

속성

action : 서버 CGI 프로그램의 URL을 지정

elements : Form입력 양식에 대한 객체 정보들의 배열

enctype : 서버 CGI 프로그램에 보낼 데이터의 타입을 지정

method : 데이터 전송방식(get, post 등)

target : 처리된 결과를 출력할 윈도우 또는 프레임

length : Form 객체의 갯수

name : Form의 이름

핸들러

onSubmit : 사용자가 입력 양식의 데이터를 서버로 전송할 때 사용되는 이벤트 핸들러

onReset : 입력 양식을 초기화 할 때 사용되는 이벤트 핸들러

메소드

submit() : 입력 양식의 데이터를 서버로 전송할 때 사용

reset() : 입력 양식을 초기화 할 때 사용

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

Form 객체에는 <input>태그의 타입으로 하위 객체들이 있다. text, button, checkbox, radio, select, textarea, password, hidden 이 하위 객체들의 종류다. 하나씩 살펴보자.

text 객체

문자열을 입력할 때 사용되는 객체이다.

속성

name : 객체의 이름

id : 객체의 id

value : 객체의 값

defaultValue : 관리자에 의해 미리 지정된 객체의 값

type : text객체임을 지정

메소드

focus() : 포커스를 얻음

blur() : 포커스를 잃음

select() : 입력된 값을 선택

핸들러

onFocus : 포커스가 text 객체 안으로 이동할 때 발생

onBlur : 포커스가 text 객체 밖으로 이동할 때 발생

onSelect : text 객체에 입력된 문자열을 선택할 때 발생

onKeypress : text 객체 내에서 키보드를 눌렀을 때 발생

onChange : text 객체에 입력한 문자열이 변경할 때 발생

checkbox 객체

여러 개의 선택 항목 중에서 하나 이상의 항목을 선택하는 객체

속성

checked : 선택여부 지정

name, value, type은 텍스트와 동일

핸들러

onClick : 객체를 클리할 때 발생

radio 객체

여러 개의 선택 항목 중에서 하나의 항목을 선택할 때 사용되는 객체

속성

defaultChecked : 디폴트로 선택되었음을 지정

length : 객체의 갯수

checked, name, value, type은 checkbox와 동일

핸들러

checkbox와 동일

select 객체

여러 개의 목록 중에서 하나 이상을 선택할 때 사용되는 객체

option 객체를 하위객체로 가진다.

속성

selectedIndex : 현재 선택된 목록의 인덱스

options : 목록 정보 배열

options[i].index : 각 목록의 인덱스

options[i].value : 각 목록에 할당된 값

options[i].text : 각 목록에 할당된 문자열

options[i]. selected : 각 목록이 선택되어 있는지 여부

options[i].defaultSelected : 각 목록이 처음 선택되어 있는지 여부

핸들러

onChange : 다른 목록을 선택할 때 발생

textarea 객체

text객체의 속성, 메소드, 핸들러 동일하며 다른 점은 줄바꾸기가 가능하다.

password 객체

입력한 글자를 "*"와 같은 문자로 표현

hidden 객체

시각적으로 표현되지 않은 감추어진 데이터 전송시에 사용

[JS] 브라우저 객체 모델(BOM) - Window

브라우저 객체는 웹 브라우저와 관련된 객체의 집합으로써 브라우저가 보여주고 있는 문서에 관한 정보 뿐만 아니라 윈도우 정보, 히스토리 정보, 문자가 존재하고 있는 위치정보 등의 관련된 객체들이다.

그 종류로는 window, location, navigator, history, screen, document이고 각각의 객체는 계층구조로 이루어져 있어 .으로 구분할 수 있다.
예) window.document.write();

Window
자바스크립트의 브라우저 내장 객체 중 최상위 객체이다.

속성
status : 브라우저 상태 바에 출력되는 문자열을 처리
defaulfStatus : 디폴트로 상태창 문자열 지정
frames : 윈도우 객체 내의 프레임정보
innerHeight : 브라우저의 내용이 나타날 수 있는 영역의 높이
innerWidth : "" 넓이
locationbar : 윈도우의 locationbar를 보여줄지 판별
parent : 상위(부모)객체
self : 자기 자신의 객체
top : 계층구조 중 가장 최상위 객체
opener : open()를 사용한 윈도우
scrollbar : scrollbar 정보

핸들러
onBlur : 브라우저가 포커스를 읽어 비활성화가 됨
onDragDrop : 브라우저에 객체를 끌어다 놓았을 때 발생
onError : 브라우저의 문서를 읽는 도중 에러가 발생할 경우 이를 처리함
onFocus : 브라우저가 포커스를 얻어 활성화가 됨
onResize : 윈도우의 크기를 조절해야 할 때 발생
onLoad : 문서나 URL을 읽어 들인 후 실행할 명령을 지정
onUpload : 문서나 URL을 지운 다음 실행할 명령을 지정

window.onload는 HTML을 다 읽은 후에 실행한다.

메소드
alert() : 사용자에게 간단한 메세지를 전달하는 대화상자
back() : 이전에 방문했던 문서나 URL로 이동
clearTimeout() : setTimeout()를 이용하여 임의의 시간지정을 해제
close() : open()를 이용해서 생성한 윈도우나 최초의 윈도우를 닫음
comfirm() : 확인과 취소를 선택할 수 있는 대화상자
find() : 검색
forward() : 다음에 방문할 문서나 URL로 이동
moveBy() : 윈도우의 위치를 기준으로 상대적으로 이동
moveTo() : 윈도우를 지정되어 있는 절대위치로 이동
open() : 새로운 윈도우 생성
print() : 문서의 내용 출력
prompt() : 문자열을 입력하는 창
resizeBy() : 윈도우의 크기를 상대적으로 변경
resizeTo() : 윈도우의 크기를 절대적 크기로 변경
scrollBy() : 윈도우에서 상대적으로 스크롤바를 나타냄
scrollTo() : 윈도우에서 절대적으로 스크롤바를 나타냄
setTimeout() : 임의의 지정된 시간 이후 명령어 단일수행
setInterval() : 주기적 명령을 실행
stop() : 문서나 URL을 전송하거나 받는 것을 중지

[JS] 이벤트 버블링과 캡쳐링

태그안에 태그를 감싸는 형태로 HTML문서를 구성했을 경우가 있다. 따라서 가장 안쪽(자식) 태그에 이벤트를 걸 때 이벤트 버블링이 생긴다.

이벤트 버블링은 자식 노드에서 부모 노드 순으로 이벤트를 실행하느 것을 의미한다.

자식노드에서 이벤트를 발생시키켰다고 해서 부모노드까지 이벤트가 전달될 필요는 없다. 따라서 이를 제거해주어야한다.(물론 버블링을 잘 활용할 수도 있다.)

그렇다면 캡쳐링은 무엇일까? 버블링과 반대되는 개념으로 부모노드의 이벤트가 자식노드로 전달되는 것을 의미한다. 그러나 IE브라우저에서는 캡쳐링을 지원하지 않음으로 거의 사용되지 않는다.(표준 브라우저에서는 사용 가능하나 역시 잘 활용하지 않는다)

그렇다면 이벤트 버블링 제거를 해보자.
자식노드의 버튼을 btn이라고 한다면
예)
btn.onclick = function(e){
    var event = e || window.event;

    event.cancleBubble = true;// IE 이벤트 버블링 제거
    if(event.stopPropagation)
        event.stopPropagation();// 표준 브라우저 이벤트 버블링 제거
}

[JS] 이벤트

이벤트란? 웹브라우저에서 일어나는 어떤 사건
이벤트 핸들러 : 이런한 이벤트를 처리해 주는 것.

이벤트 종류와 핸들러
이벤트의 종류는 마우스 클릭이라든지 마우스오버와 같은 것들이 있다. 그 예는 다음과 같다.

abort : 문서, 이미지 또는 URL을 읽어 들이는 도중에 중지할 때 발생
blur : 포커스를 읽어버렸을 때 발생
click : 마우스를 클릭할 때 발생
change : text, textarea, select의 값이 변화할 때 발생
focus : 포커스를 놓았을 때 발생
load : 문서 또는 URL을 읽을 때 발생
mouseout : 마우스 커서가 해당 영역을 벗어날 때 발생
mouseover : 마우스 커서가 해당 영역에 놓였을 때 발생
reset : reset버튼을 누를 때 발생, 입력 양식의 화면을 초기화함.
select : 해당 필드를 선택할 때 발생
submit : submit버튼을 누를 때 발생
unload : 해당 문서 또는 URL을 빠져나갈 때 발생

핸들러란 이러한 이벤트가 실행되었을 때 어떠한 기능적 처리를 해주는 함수라는 의미가 강하다. 즉 클릭을 했을 때 글자가 커지거나 새로운 페이지가 띄워지는 등의 이벤트 처리를 말한다.

브라우저 이벤트 모델 특징
- HTML 웹 페이지의 인터페이스는 비동기적이고 이벤트 주도방식이다.
- 따라서 사용자의 이벤트에 따른 이벤트 핸들러를 적절히 구현하여야한다.
- W3C가 발표한 DOM이벤트 레벨 2의 표준을 잘 따르는 브라우저와 그렇지 않은 브라우저간 차이점을 고려하여 이벤트를 처리해야만 한다.

객체에 이벤트를 연결하는 방식은 4가지가 있다.
1. 인라인 모델 방식
2. DOM Level 0 고전 이벤트 모델 방식
3. DOM Level 2 이벤트 모델 방식(리스너 방식)
4. Cross 이벤트 모델 방식


1. 인라인 이벤트 모델
HTML페이지의 가장 기본적인 이벤트 연결 방법
예)
<body>
    <h1 onclick="alert('클릭')">Click</h1>
</body>
간단한 이벤트를 처리해주기는 좋으나 WEB의 표준에서 구조와 동작을 분리시키는 원칙에서벗어난다, 따라서 HTML태그의 이벤트 속성 안에 코드를 모두 쓰기보다는 script로 처리하는 방식을 많이 사용한다.



2. DOM Level 0 고전 이벤트 모델
자바스크립트에서 문서 객체의 이벤트 속성을 사용해 이벤트를 연결하는 방법
예)
<script>
window,onload = {
    var hi= document.getElementById("hi");

    hi.onclick = function(){
        alert("클릭");
    }
}
</script>

<body>
    <h1 id="hi">Click</h>
</body>

이벤트를 제거하는 방법
단순히 이벤트 핸들러에 null을 넣으면 끝

window,onload = {
    var hi= document.getElementById("hi");

    hi.onclick = null;
}

고전 이벤트 모델은 이벤트 하나에 이벤트 핸들러 하나만 연결할 수 있다.

기본 이벤트 제거
HTML태그 중 이미 이벤트 핸들러를 가지고 있는 태그가 있다. 예를 들어 <a>가 가지고 있는 기본 이벤트는 <a>를 클릭하면 페이지 이동을 하는 이벤트가 걸려있다. 이를 기본 이벤트라 한다.

<a>뿐만 아니라 submit버튼에도 이벤트가 걸려있다. 기본 이벤트가 있음으로 좋은 점도 있지만 불편한 점도 있다. 이런 이유로 기본 이벤트를 제거하는 경우가 있다. 코드를 보자
예)
<script>
    window.onload = function(){
        document.getElementById("my_from").onsubmit = function(){
            return false;
        }
    }
</script>
<body>에는 my_from이란 Id를 가진 submit버튼이 있다. 버튼을 누르면 자동으로 입력 양식을 서버로 보내고 페이지를 새로고친다. 이 기본 이벤트를 지우기 위해서는 간단히 이벤트 핸들러에 false를 리턴해주면 된다.

사용자는 입력양식(form)을 만나게 되면 자신이 원하는 데이터를 입력하게 된다. 그리고 submit버튼을 이용하여 그 데이터를 서버로 보낸다. 하지만 어떤 데이터를 입력했는지 확인 없이 서버에 무작정 보낼 수는 없다. 입력양식을 적절하게 구성했다는 것을 확인해야한다.

그렇다면 어떻게 입력양식의 데이터값을 검사할 수 있을까?
document.getElementById("sn").value;

이렇게 sn이라는 id를 가진 태그의 값을 가져와 유효성을 검사할 수 있다.


3. DOM Level 2 이벤트 모델(리스너 방식)
IE를 제외한 최신 브라우저에서 지원한다.
레벨 0 API와는 다른 고급 이벤트 처리가 가능하다.(중복 이벤트 연결)

표준 이벤트 핸들러 등록 함수
addEventListener(String eventType, function listener, boolean captures)
- eventType : 이벤트 이름의 문자열 (예 : "click", "mouseover")
- listener : 핸들러 함수명
- captures : true/false (버블과 캡쳐에 관한 인자)

예)
<script type="text/javascript">
function doProcess(){ alert("JavaScript"); } window.onload = function(){ var btn1 = document.getElementById("btn1"); btn1.addEventListener("click", doProcess, false); }
</script>

<body>
<input type="button" id="btn1">
<div id="result">result</div>
</body>

IE(인터넷 익스플로러)에서는 그 방식이 다르다. 예제를 보자
IE 이벤트 핸들러 등록 함수
attachEvent(String eventType, function listener)
- eventType : 이벤트 속성명(예: onClick, onmouseover)
- listener : 핸들러 함수명
예)

<script type="text/javascript">
function doProcess(){
 alert("JavaScript");
}

window.onload = function(){
  var btn1 = document.getElementById("btn1");

  btn1.attachEvent("onclick", doProcess);
}
</script>
</head>
<body>
<input type="button" id="btn1">
<div id="result">result</div>
</body>

4. 크로스 이벤트 모델 방식
위의 DOM Level 2 이벤트 모델 방식일 경우 항상 표준 브라우저와 IE브라우저를 고려해야 하며 따라서 항상 같은 이벤트를 두번씩 정의해야하는 번거로움이 있다. 이런 과정을 줄이기 위해 새로운 js파일에 사용자 정의 객체를 만들어줌으로써 표준 브라우저와 IE브라우저의 이벤트를 한번에 등록할 수 있다.
예)

var cross = {};
cross.Event = {};

cross.Event.addListener = function(element, name, handler, capture){//사용자 정의 함수(crossEvent브라우저를 지원할 함수)
capture = capture || false;

//표준브라우저인지 IE인지 구분
if(element.addEventListener){
//표준브라우저 일때
element.addEventListener(name, handler, capture);
}else{
//표준브라우저가 아닐때, 즉 IE일 경우
element.attachEvent("on" + name, handler);
}
};

html파일이 있는 곳에 js폴더를 하나 만들어 js파일에 위와 같이 입력한다. 의미는 cross 객체안에 Event를 처리할 객체를 하나더 만들어줬다. 이렇게 만든 이유는 패키지라는 개념이로 이해하면 좋다. 이렇게 함으로써 최대한 속성이나 함수의 이름이 중복되는 것을 막기 위함이다. 

cross.Event.addListener()는 사용자 정의 함수로써 표준 브라우저와 IE 브라우저 각각에 이벤트를 동시에 연결하도록 정의하였다. 

---------------------------------------------------------------------------------
마지막으로 표준 이벤트 연결 방식에 대해 유의점을 언급하겠다.
IE에서는 핸들러에서 this키워드를 사용하면 window을 가르킨다. 핸들러 안에서 객체를 받기 위해 this를 사용하면 안될 것이다. 대신에 srcElement라는 속성을 이용해야만 객체를 가져올 수 있다.
 그러나 표준 브라우저에서는 핸들러에서 this를 사용하여 쉽게 객체를 가져올 수 있다.
이 차이점이 IE와 표준 브라우저간의 큰 차이점임으로 꼭 기억하도록 하자.

[JS] 내장객체

내장객체란 자바스크립트에 이미 정의된 객체를 의미한다.
내장객체는 브라우저 객체와는 달리 웹브라우저에 보이지 않는다.

Object
자바스크립트의 가장 기본적인 내장 객체

생성방법
var object = {};
var object = new Object();

매소드
constructor() : 객체의 생성자 함수
hasOwnProperty(name) : 객체가 name속성을 가지고 있는가 확인
isPrototypepf(object) : 객체가 object의 프로토타입인지 검사
propertyIsEnumerable(name) : 반복문을 사용해 열거할 수 있는지 확인
toLoscaleString() : 객체를 호스트 환경에 맞는 언어의 문자열로 변환
toString() : 객체를 문자열로 변환
valueOf() : 객체의 값을 나타냄

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

Array
가장 많이 쓰이는 내장객체이다. 자바스크립트에는 배열말고는 다른 자료구조가 존재하지 않기 때문이다. 즉, 모든 데이터 형식의 배열변수를 만들어 데이터를 관리 할 수 있도록 지원하는 객체이다.

Array객체 생성방법은 다양한다.
1. var fruit = []; //빈 배열선언
2. var fruit = new Array();//빈 배열선언
3. var fruit = new Array(8);//배열의 크기가 8인 배열
4. var fruit = new Array(34, 456, '하하')//데이터 직접 입력

속성
length : 배열의 크기

매소드
concat() : 배열을 결합하여 새로운 배열을 만듬
join() : 지정된 구분자로 모든 배열의 요소를 문자열로 결합
pop() : 마지막 배열요소 삭제
push() : 마지막 배열요소에 새로운 요소를 추가
reverse() : 배열의 요소를 역순으로 바꿈
slice() : 배열 자르기
splice() : 지정요소를 리턴하면서 배열에서 삭제
sort() : 정렬(기본 오름차순 정렬)

정렬에 변화를 주기위한다면 다음과 같다.
array.sort(function(a, b){
          ...함수내용...
});

내림차순
array.sort(function(a, b){
    return b-a;
});
또는 if문으로 함수를 정의할 수 있다.
array.sort(function(a, b){
    if(a<b){
        return 1;//리턴값이 1일때 자리바꿈
    } else if(a>b){
        return -1;
    } else
        return 0;
});
오름차순은 위의 함수로 쉽게 구현가능하다.

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

Date
날짜와 시간을 처리할 수 있도록 하는 객체
밀리초 단위까지 특정 시간을 나타내는 숫자로 되어 있다.

생성방법
var date = new Date();

매소드
getDate() : 일자를 반환
getDay() : 요일을 반환
getMonth() : 월을 반환
getYear() : 두자리 숫자의 연도를 반환
getFullYear() : 네자리 숫자의 연도를 반환
getHours() : 시간을 반환
getMinutes() : 분을 반환
getSeconds() : 초를 반환

get매서드가 있듯이 똑같이 set매서드가 존재한다.

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

Math
수학 계산을 처리할 수 있도록 하는 객체
static 객체라 new연산자를 사용하지 않고 Math만을 이용해 계산

속성
E : 오일러 상수를 반환
LN2 : 2의 자연대수를 반환
LK10 : 10의 자연대수를 반환
PI : 원주율을 반환
SQRT1_2 : 2의 제곱의 여수를 반환
SQRT2 : 2의 제곱근을 반환

매서드
random() : 난수를 발생(0과 1사이의 무작위값 반환)
나머지는 필요할때 참고하도록하자

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

String
문자열을 사용하거나 조작을 위한 객체
new 연산자를 사용하지 않는다.

속성
length : 문자열의 길이

매서드
charAt(position) : position에 위치하는 문자 반환
indexOf(searchString, position) : 앞에서부터 일치하는 문자열의 위치를 반환
slice(start, end) : 특정 위치의 문자열을 추출해 리턴
split(separator, limit) : separator로 문자열을 잘라 배에 저장한 뒤 배열을 리턴
substr(start, count) : start부터 count만큼 문자열을 리턴
substring(start, end) : start부터 end까지 문자열 리턴

많이 사용하는 매서드만을 기술하였다. 그밖에 더 많은 매서드는 직접 알아보자. 한가지 참고할 것은 String객체의 매서드는 자기 자신을 변화시키지 않는다. 그 이유는 문자열은 변하지 않는 상수의 개념으로 지정되기 때문이다.

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


Number
엄연히 new연산자로 생성할 수 있는 객체로서 수를 다룬다.

생성
var number = new Number(123);

속성
MAX_VALUE : 자바스크립트의 숫자가 나타낼 수 있는 최대 숫자
MIN_VALUE :  "" 최소 숫자
NaN : 숫자로 나타낼 수 없는 숫자
NEGATIVE_INFINITY : 음의 무한대
POSITIVE_INFINITY : 양의 무한대

매서드
toExponential() : 숫자를 지수 표시로 나타내는 문자열 리턴
toFixed() : 숫자를 고정 소수점 표시로 문자열 리턴
toPrecision() : 숫자를 길이에 따라 지수 표시 또는 고정 소수점 표시로 나타낸 문자열 리턴

[JS] 객체

자바스크립트는 객체지향 언어!

객체모형(Object Model)

브라우저 객체 : Window, Document, Location 등 (DOM)

내장 객체 : Date, Math, Array 등

특징

클래스 선언과 상속을 지원하지 않지만 객체의 정의가 가능하다. 그러나 한정된 수준에 그친다. 객체의 생성과 상속이 다른 언어처럼 완벽하지는 않으나 어느정도의 형태는 비슷하게 취할 수 있다.

객체의 생성
예)
var product{
    제품명 : "7D 건조 망고',
    유형 : "당절임",
    성분 : "망고, 설탕",
    원산지 : "필리핀"
}
이처럼 객체를 정의할 때 사용하는 방법이 Json표기법이다. 키값인 제품명, 유형 등으로 값(Value)를 뽑아 오는 방법이다. (Hash자료구조를 떠올리면 비슷하다.)

속성접근
product.제품명
product.유형

생성자 함수
객체를 만드는 방법은 여러가지가 있지만 개인적으로는 생성자 함수로 객체를 생성하는 것이 코드의 재사용측면에서 좋고 자바에서의 생성자 함수와 유사하게 사용하기 때문에 좀 더 쉽게 와닿는다.

예)
function Student(name, kor, eng, mat){
    this.name = name;
    this.kor = kor;
    this.eng = eng;
    this.mat = mat;

////생성자에서 매서드 추가//////
    this.getSum = function(){
        return this.kor + this.eng + this.mat;
    }
    this.getAvg = function(){
        return this.getSum()/3;
    }
}

프로토타입
위와 같이 student객체를 new키워드로 만들 수 있다. 그러나 문제가 있다. 매번 객체를 생성할 때마다 생성자 안에 선언한 함수를 계속해서 개체의 속성으로 만드는 것이다. 분명 메모리 낭비이다.

이를 해결하기 위해 프로토타입이 생겼다. 객체의 매서드부분만 따로 모아서 공유하는 것을 말한다.
예)

function Student(name, kor, eng, mat){
    this.name = name;
    this.kor = kor;
    this.eng = eng;
    this.mat = mat;
}//생성자 정의 끝

Student.prototype.getSum = function(){
    return this.kor + this.eng + this.mat;
}
Student.prototype.getAvg = function(){
    return this.getSum()/3;
}

이렇게함으로써 자바에서 만들던 객체의 틀인 클래스와 비슷?하게되었다. 그러나 절대 클래스가 아니라는 것을 꼭 기억하자. 자바스크립트에는 클래스라는 개념이 없다. 하지만 실재로는 다음과 같은 방식으로 많이 사용한다.

예)

function Student(name, kor, eng, mat){
    this.name = name;
    this.kor = kor;
    this.eng = eng;
    this.mat = mat;
}//생성자 정의 끝


Student.prototype = {
    getSum : function(){

        return this.kor + this.eng + this.mat;
    },
    getAvg : function(){

        return this.getSum()/3;
    }
}

이렇게 프로토타입으로 매서드를 묶어서 이용한다. 사용법은 둘다 같다.
이렇듯 객체는 하나의 프로토타입 객체를 가지고 있고 그 목적은 객체의 메서드들을 관리하기 위한 용도이다.

캡슐화
만일의 상황을 대비하여 특정 속성이나 매서드를 사용자가 알 수 없도록 또는 알 필요가 없도록 숨겨놓은 것이다. 즉 개발자의 의도가 잘 반영되어 사용자가 코드를 재사용하는데 혼돈하지 않거나 의도되지 않은 행위를 막을 수 있는 등 다양한 이점이 있다.

상속
기존의 생성자 함수나 객체를 기반으로 새로운 생성자 함수나 객체를 만드는 것
예)
function Unit(name) {
this.name = name;

this.attack = function(unit) {
alert(this.type + "유닛인 " + this.name + "이 " + unit.type + "유닛인 "
+ unit.name + " 공격!");
unit.attacked(this);
}
this.attacked = function(unit) {
alert(this.type + "유닛인 " + this.name + "이 " + unit.type + "유닛인 "
+ unit.name + "으로부터 공격받음!");
}
}

function BionicUnit(type, name) {
this.type = type;
this.base = Unit;
this.base(name);
}

function MechanicUnit(type, name) {
this.type = type;
this.base = Unit;
this.base(name);
}

window.onload = function() {
BionicUnit.prototype = new Unit;
MechanicUnit.prototype = new Unit;

var unit1 = new BionicUnit("지상", "마린");
var unit2 = new MechanicUnit("공중", "커세어");

unit1.attack(unit2);
alert(unit1 instanceof Unit);
}

상속을 아주 잘 보여주는 예이다. 먼저 부모가 되는 유닛을 정의했다. 생성자 함수안에 이름 속성과 2개의 매서드를 정의했다.

그다음 바이오닉유닛과 메카닉유닛을 정의하였고 윈도우에 이벤트를 걸어 실행해보았다. 상속에서 가장 핵심인부분이 진한 글씨로 표현한 곳이다. 유닛을 base라는 속성으로 받아와 유닛의 이름을 초기화하였고 유닛의 매서드들을 각각의 객체에 프로토타입에 추가함으로써 상속이 이루어지는 것이다.

마지막에 alert창을 띄워 상속이 잘 되었는지 instanceof키워드로 확인해보고 있다.

상속의 예를 하나 더 들어보자. 이번엔 call()함수를 이용한 상속이다.

function Rectangle(w, h){
this.width = w;
this.height = h;

this.getWidth = function(){ return this.width;};
this.getHeight = function(){ return this.height;};
this.setWidth = function(value){
if(value < 0){
throw "길이는 음수일 수 없습니다.";
} else{
this.width = value;
}
}
this.setHeight = function(value){
if(value < 0){
throw "높이는 음수일 수 없습니다.";
} else{
this.height = value;
}
}
}
Rectangle.prototype.getArea = function(){
return this.getWidth()*this.getHeight();
}


function Square(length){
Rectangle.call(this, length, length);
}
Square.prototype = new Rectangle();
Square.prototype.constructor = Square;

var square = new Square(5);
var rectangle = new Rectangle(5, 7);

alert(rectangle.getArea() + " " + square.getArea());

Square생성자에서 Rectangle를 생성하는데 call()를 이용해서 this를 인자로 넘겨주고 있다. 이렇게 함으로써 Rectangle객체의 this는 Square을 가르키게 되고 따라서 상속이 되었다고 할 수 있다. 즉, this를 원하는 객체로 재정의 하는 것이다. call()함수는 자주 쓰일 함수이므로 그 쓰임을 잘 이해하자

[JS] 함수

익명 함수

var 변수명 = function(){

     alert("Hello World!");

}

변수명();//함수호출

함수를 변수에 저장하여 함수호출을 하는 형태이다. 함수의 이름이 따로 없고 변수를 사용하여 호출하므로 익명함수라고 한다.

선언적 함수

function 함수명(){

    alert("Hello World!");

}

함수명();//함수호출

익명함수와 선언적함수의 차이는?

변수를 선언한다는 것과 함수를 선언한다는 차이가 있다.

웹 브라우저는 script태그 내부의 내용을 한줄씩 읽기 전에 선언적 함수부터 읽는다. 따라서 익명함수는 선언적함수보다 나중에 읽어들이게 되는 차이가 있다.

매개변수

앞서 언급했지만 자바스크립트에서는 함수의 매개변수의 갯수나 자료형에 관대하다. 다른 언어와 큰 차이이고 이런 특성으로 인해 함수 오버로딩이 되지않는 것은 당연하다.

매개변수에 함수 전달

함수도 하나의 자료형이므로 매개변수로 전달할 수 있다.

예)

function callFunction(otherFunction){

    for(var i=0; i<5; i++){

         otherFunction();

    }

}

function f1(){

    alert("Hello World!");

}

callFunction(f1);

여기서 눈여겨보아야할 부분은 f1함수의 함수명만으로 매개변수의 인자를 넘겨주고 있는 부분이다. 그리고 다시 함수명에 ()를 붙여서 함수호출을 하는 것을 잘 봐두자.

클로저

return을 이용하여 변수에 값이나 함수를 저장하는 것을 의미한다. 함수가 종료하면 내부의 변수와 값들은 제거되기 마련이지만 클로저를 이용하여 유효한 데이터 값을 유지할 수 있는 방법이다. 

내장함수

eval() : 자바스크립트 코드가 맞는지 검증하고 수행

parseInt() : 문자열을 점검하여 수치를 정수로 반환

parseFloat() : 문자열을 점검하여 수치를 반환

escape() : 문자열을 %16진수의 ASCII코드값으로 반환(인코딩)

unescape() : escape()에 의해 인코딩된 값을 디코딩
encodeURIComponent() : 알파벳과 숫자를 제외한 모든 문자를 인코딩. UFT-8인코딩과 같다.(가장 많이 사용하는 인코딩 함수이다.)
decodeURIComponent() : 디코딩

isNaN() : 수치를 점검하여 무효한 수치인가를 검증

isFinite() : 수치를 점검하여 유효한 수치인가를 검증

[JS] JavaScript 스타트

자바스크립트는 현재 웹3.0의 시대를 맞는 시점에서 시멘틱한 웹과 웹에서 구현되는 RIA(Rich Internet Appliacation)에 중요한 언어이다.

자바와 기초적인 문법은 비슷하지만 스크립트 언어로써 상당히 느슨한 문법을 가지고 있다.

Netscape의 JavaScript와 MS의 Jscript는 ECMA에 의해 표준화가 되었고 이를 ECMAScript라 한다. 하지만 흔히들 드냥 JavaScript라 부른다.

HTML 헤드부분에 <link>로 스크립트파일을 포함하거나<script>태그를 사용한다.
예) <script type="text/javascript"> ...code...</script>
바디부분에 스크립트를 포함하기도 하지만 헤드에 삽입하는 것을 권장한다. 헤더에 스크립트를 포함하면 브라우저에 의해 점검된다.

자바스크립트는 문서를 브라우저가 읽어 들일 때 해석한다.

자바스크립트 장점
- 컴파일 과정이 없음. 신속한 개발이 가능
- HTML과 같이 플랫폼에 독립적임
- 시스템의 부담이 적음

단점
- 코드의 보안성
- 내장함수의 한계
- 디버깅 및 개발도구의 부족

자료형
- 문자열
- 숫자
- 불리언
- 함수
- 객체
- undefined

null : 아무런 값도 가지지 않음을 의미
undefined : 선언된 변수에 아무런 값이 할당되지 않거나 선언하지 않은 변수를 의미
NaN : 숫자가 아닌 것
Infinity : 무한대

자바스크립트는 자료형에 관대하다. 데이터형은 스크립트 실행 중에 자동적으로 변환된다.

내장함수
alert() : 경고창
prompt() : 입력창
confirm() : 확인창
eval() : 문자 또는 값으로 표현된 문자열 평가 후 숫자로 변환, 또는 실행가능한 코드로 변환
parseInt() : 문자열을 정수로
parseFloat() : 문자열을 소수로

자바스크립트에는 내장객체와 BOM객체가 존재한다.
내장객체
String, Array, Math, Date ...

BOM객체
window, history, location, document ...

자바는 클래스기반이 아니다. 그러므로 자바의 멤버변수는 속성이라하고 속성에 할당된 함수를 메서드라 한다. 할당된 메서드들를 프로토타입속성으로 관리할 수 있다. 이뿐만 아니라 자바와는 다른 특징이 존재한다. 몇 가지를 알아보자.
1. 객체로 미리 선언과 정의를 하지 않더라도 객체를 만들어 동적으로 속성을 추가 또는 삭제 할 수 있다.
2. 함수에서 Arguments는 선택적 사항이다. 매개변수의 타입, 갯수는 중요하지 않다. 따라서 오버로딩이 불가능하다.
3. 함수를 변수에 넣을 수 있다.

문법
자바와 기초적인 문법은 동일하다. 자바에 없는 것만 정리하겠다.
for .. in : 개체의 속성의 키값 또는 배열의 인덱스를 넘겨준다.
예)

var kim = new Student("용도", 100, 90, 81);

for(var i in kim){
alert(i + " " + kim[i]);
}
kim객체의 키(i)와 값(kim[i])로 출력창에 띄우고 있다. 어떻게 값을 출력하는지 잘 확인할것


with : 객체를 지정한다.
예)
var personName = new Object;

personName.first = '홍';
personName.second = '길동';

with (personName){
  document.write("그 사람의 이름은 " + first + " " + second + "입니다.");
}