영록이 홈페이지
Youngrok Pak
개관
실무에서 많이 활용되는 여러 가지 Ajax 응용 기술들을 구현하는 과정을 실습해보고 그 과정에서 기본 개념과 원리를 학습해서 스스로 다양한 Ajax 응용 기술들을 구현할 수 있는 능력을 키울 수 있도록 한다.
강사 소개
홈페이지 : http://youngrok.com 메일 : pak.youngrok@gmail.com
이 강의에서 다루는 기본 개념
- 자바스크립트 기본 문법
- 간단한 HTML과 CSS
DHTML (Dyanmic HTML), DOM(DocumentObjectModel)
- Ajax (XMLHttpRequest)
JavaScript Framework
- prototype
- script.aculo.us
예제를 통해서 다루게 되는 Ajax 응용 기술
- 동적인 테이블 제어
- HTML 대화상자 기능
- 검색어 추천 기능
- 트리 폴딩
드래그 & 드랍
실습 내용
DHTML
DHTML(Dynamic HTML) 기초
링크를 누르면 특정 태그 안의 내용을 바꾼다. document.getElementById를 이용해서 특정 id를 가진 엘리먼트를 취하고 innerHTML 속성을 통해서 엘리먼트의 내용을 변경한다.
<a href="#" onclick="document.getElementById('greeting').innerHTML += ' Hello'">Greeting!!</a>
<p id="greeting">Hello</p>
DHTML 테이블 조작
DOM을 이용해서 테이블에 동적으로 내용을 추가한다. document.createElement를 이용해서 새로운 엘리먼트를 만들고 부모 엘리먼트의 appendChild를 이용해서 만든 엘리먼트를 추가할 수 있다. 내용은 역시 innerHTML로 조정할 수 있다.
<script type="text/javascript">
function appendNewElement(parent, elementName, text) {
var child = document.createElement(elementName)
child.innerHTML = text
parent.appendChild(child)
}
function addRow(form) {
var tr = document.createElement('tr')
appendNewElement(tr, 'td', form.title.value)
appendNewElement(tr, 'td', form.price.value)
appendNewElement(tr, 'td', form.sold.value)
document.getElementById('tbody').appendChild(tr)
return false;
}
</script>
<form onsubmit="return addRow(this);">
<input type="text" name="title">
<input type="text" name="price">
<input type="text" name="sold">
<input type="submit" value="목록 추가">
</form>
<table>
<thead>
<tr>
<th>도서명</th>
<th>가격</th>
<th>판매량</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>Head Rush Ajax</td>
<td>22000</td>
<td>180</td>
</tr>
<tr>
<td>Ajax in Action</td>
<td>28000</td>
<td>70</td>
</tr>
<tr>
<td>Ajax Hacks</td>
<td>25000</td>
<td>80</td>
</tr>
</tbody>
</table>
DHTML 대화상자
DHTML에서는 style도 바꿀 수 있다. CSS style의 display 속성을 block/none으로 바꾸면 특정 엘리먼트의 표시 여부를 변경할 수 있으므로 이걸 이용해서 HTML 내에서 대화상자를 구현할 수 있다.
<script type="text/javascript">
function showDialog() {
document.getElementById('dialog').style.display = 'block'
}
function hideDialog() {
document.getElementById('dialog').style.display = 'none'
}
</script>
<a href="#" onclick="showDialog()">대화상자 띄우기</a>
<a href="#" onclick="hideDialog()">대화상자 감추기</a>
<div id="dialog" style="display: none;">
대화상자가 잘 보이나요?
</div>
Ajax
Ajax 기초
XMLHttpRequest를 이용해서 동적으로 페이지의 내용을 업데이트한다.
<a href="#" onclick="request()">Hello!</a> <div id="message" style="position:absolute; left: 300px; right: 300px; width: 200px; height: 100px; border: 1px solid black">
var req;
function request() {
req = new XMLHttpRequest()
req.open("GET", "hello.txt", true);
req.onreadystatechange = showMessage
req.send(null);
}
function showMessage() {
if (req.readyState != 4) return
document.getElementById('message').innerHTML = req.responseText
}
prototype 이용
script 부분을 prototype을 이용해서 좀더 쉽게 구현할 수 있다.
function request() {
new Ajax.Request('hello.txt', {
method: 'get',
onSuccess: showMessage
})
}
function showMessage(req) {
$('message').innerHTML = req.responseText
}
prototype Ajax Updater
function request() {
new Ajax.Updater('message', 'hello.txt')
}
JavaScript Framework 소개
Prototype http://prototypejs.org/
script.aculo.us http://script.aculo.us/
JavaScript
응용 예제
검색어 추천 기능
script.aculo.us
자바스크립트 프레임웍인 script.aculo.us를 이용한 검색어 추천 기능.
<form>
<input type="text" id="query" length="60"/>
<div id="keywords" style="display:none;"></div>
</form>
<script type="text/javascript">
var keywordList = ['ABBA', 'AC/DC', 'Aerosmith', 'America', 'Bay City Rollers', 'Black Sabbath', 'Boston', 'David Bowie', 'Can', 'The Carpenters', 'Chicago', 'The Commodores', 'Crass', 'Deep Purple', 'The Doobie Brothers', 'Eagles', 'Fleetwood Mac', 'Haciendo Punto en Otro Son', 'Heart', 'Iggy Pop and the Stooges', 'Journey', 'Judas Priest', 'KC and the Sunshine Band', 'Kiss', 'Kraftwerk', 'Led Zeppelin', 'Lindisfarne (band)', 'Lipps, Inc', 'Lynyrd Skynyrd', 'Pink Floyd', 'Queen', 'Ramones', 'REO Speedwagon', 'Rhythm Heritage', 'Rush', 'Sex Pistols', 'Slade', 'Steely Dan', 'Stillwater', 'Styx', 'Supertramp', 'Sweet', 'Three Dog Night', 'The Village People', 'Wings (fronted by former Beatle Paul McCartney)', 'Yes']
new Autocompleter.Local('query', 'keywords', keywordList, {})
</script>
직접 구현하기
이벤트를 잡아서 DOM 조작을 통해 검색어 자동완성을 직접 구현
var keywords = ['ABBA', 'AC/DC', 'Aerosmith', 'America', 'Bay City Rollers', 'Black Sabbath', 'Boston', 'David Bowie', 'Can', 'The Carpenters', 'Chicago', 'The Commodores', 'Crass', 'Deep Purple', 'The Doobie Brothers', 'Eagles', 'Fleetwood Mac', 'Haciendo Punto en Otro Son', 'Heart', 'Iggy Pop and the Stooges', 'Journey', 'Judas Priest', 'KC and the Sunshine Band', 'Kiss', 'Kraftwerk', 'Led Zeppelin', 'Lindisfarne (band)', 'Lipps, Inc', 'Lynyrd Skynyrd', 'Pink Floyd', 'Queen', 'Ramones', 'REO Speedwagon', 'Rhythm Heritage', 'Rush', 'Sex Pistols', 'Slade', 'Steely Dan', 'Stillwater', 'Styx', 'Supertramp', 'Sweet', 'Three Dog Night', 'The Village People', 'Wings (fronted by former Beatle Paul McCartney)', 'Yes']
var count = 0
var index = -1
var query = ''
function suggest() {
var keyword = $('query').value
if (keyword == '' || query == keyword) return
query = keyword
var suggestHTML = ''
count = 0
keywords.each(function(value) {
if (value.indexOf(keyword) == 0) {
var attr = ''
if (count == index) {
attr = 'class="selected"'
}
suggestHTML += '<li ' + attr + '>' + value + '</li>'
count ++
}
})
$('keywords').innerHTML = suggestHTML
}
function choose(event) {
if (count == 0) return true;
if (event.keyCode == Event.KEY_UP) {
index = (index + 3) % count
} else if (event.keyCode == Event.KEY_DOWN) {
index = (index + 1) % count
} else if (event.keyCode == Event.KEY_RETURN) {
$('query').value = $('keywords').getElementsByTagName('li')[index].innerHTML
} else {
return true
}
query = ''
return false;
}
window.setInterval(suggest, 100)<form onsubmit="return false;">
<input type="text" id="query" length="60" onkeydown="return choose(event)" />
<div>
<ul id="keywords" >
</ul>
</div>
</form>
트리
<ul id="tree">
<li id="search"><span>+ </span>검색</li>
<li id="community"><span>+ </span>커뮤니티</li>
<li id="shopping"><span>+ </span>쇼핑</li>
</ul>
<script type="text/javascript">
var treeData = {
search: [{key:'google', name: '구글'}, {key:'naver', name: '네이버'}, {key:'yahoo', name: '야후'}],
community: [{key:'cyworld', name: '싸이월드'}, {key:'daumcafe', name: '다음 까페'}],
shopping: [{key:'openmarket', name: '오픈 마켓'}, {key:'shoppingmall', name: '쇼핑몰'}],
openmarket: [{key:'gmarket', name: 'G 마켓'}, {key:'auction', name: '옥션'}, {key:'ebay', name: '이베이'}],
shoppingmall: [{key:'cjmall', name: 'CJ Mall'}, {key:'amazon', name: '아마존'}]
}
$$('#tree span').each(function(element) {
Event.observe(element, 'click', toggle)
})
function toggle(event) {
var element = Event.element(event).parentNode
if (element.expanded) {
fold(element)
element.expanded = false
} else {
expand(element)
element.expanded = true
}
}
function expand(element) {
var ul = document.createElement('ul')
element.appendChild(ul)
var children = treeData[element.id]
children.each(function(child) {
var li = document.createElement('li')
ul.appendChild(li)
li.id = child.key
li.innerHTML = '<span>+ </span>' + child.name
Event.observe(li.firstChild, 'click', toggle)
})
element.firstChild.innerHTML = '- '
}
function fold(element) {
element.removeChild(element.getElementsByTagName('ul')[0])
element.firstChild.innerHTML = '+ '
}
</script>
드래그 & 드랍
마우스 이벤트와 CSS style의 위치 지정 기능을 이용해서 드래그 & 드랍을 구현할 수 있다.
function showDialog(){
$("dialog").style.display='block';
}
function hideDialog(){
$("dialog").style.display='none';
}
var posX;
var posY;
function setPosition(e){
if(!e){
e = window.event
posX = e.x
posY = e.y
}else{
posX = e.clientX
posY = e.clientY
}
}
function dragBegin(e){
setPosition(e)
$('dialog').startx = posX
$('dialog').starty = posY
$('dialog').dragging = true
}
function drag(e){
setPosition(e)
if ($('dialog').dragging) {
$('dialog').style.left = $('dialog').offsetLeft + (posX - $('dialog').startx)
$('dialog').style.top = $('dialog').offsetTop + (posY - $('dialog').starty)
$('dialog').startx = posX
$('dialog').starty = posY
}
}
function dragEnd(e){
$('dialog').dragging = false
}
function init(){
document.onmousemove = drag;
document.onmouseup = dragEnd;
$('dialog').onmousedown = dragBegin;
}<div id="dialog" style="position: absolute; left: 300px; top: 200px; width: 300px; border: 1px solid black" > <table cellspacing="0" cellpadding="0" border="0" style="margin-top: 2px;"> <tbody> <tr> <td><img border="0" align="absmiddle" style="margin-bottom: 2px;" src="http://imgnews.naver.com/image/news/2006/reply/memo/n1_07.gif"/> </td> <td style="padding-top: 2px;">TestTestTest</td> </tr> </tbody> </table>
참고자료
문서
JavaScript 자료 모음
- Firefox 문서
- Internet Explorer 문서
WikiNamu