Notice
Recent Posts
Recent Comments
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- Eclipse
- 책이야기
- express for node.js
- docker
- 메일왕창보내는법
- C/C++
- 나의 프로젝트
- flex3
- rss
- 도커
- 명사 뽑아내기
- 명사 추출기
- php
- Cross
- 주식이야기
- 나의 취미
- ajax
- 명사 분석기
- 베트남어
- ror실행
- nodejs express
- 디즈니씨
- php thumbnail
- 스킨 스쿠버
- Node.js
- node.js web framework
- scala
- Lift
- ejb
- iBatis
Archives
- Today
- Total
nkdk의 세상
ajax의 기본 구성 본문
아작스의 기본 구성 4가지
자바스크립트
css
DOM
XMLHttpRequest객체
가장 중요한 문제는 어떻게 DOM을 끌어 와서 사용하느냐 이다.
예제를 한번 보자
ajax 'hello' page
ajax.html
<html>
<head>
<link rel='stylesheet' type='text/css' href='hello.css' />
<script type='text/javascript' src='hello.js'></script>
</head>
<body>
<p id='hello'>hello</p>
<div id='empty'></div>
</body>
hello.css
.declared{
color: red;
font-family: arial;
font-weight: normal;
font-size: 16px;
}
.programmed{
color: blue;
font-family: helvetica;
font-weight: bold;
font-size: 10px;
}
hello.js
window.onload=function() {
var hello=document.getElementById('hello');
hello.className='declared';
var empty=document.getElementById('empty');
addNode(empty,"reader of");
addNode(empty, "Ajax in Action!");
var children=empty.childNodes;
for(var i=0;i<children.length;i++) {
children[i].className='programmed';
}
empty.style.border='solid green 2px';
empty.style.width="200px";
}
function addNode(el, text) {
var childEl=document.createElement("div");
el.appendChild(childEl);
var txtNode=document.createTextNode(text);
childEl.appendChild(txtNode);
}
일단 이걸로 아작스의 시작이네요 다음 편에서 ^^
자바스크립트
css
DOM
XMLHttpRequest객체
가장 중요한 문제는 어떻게 DOM을 끌어 와서 사용하느냐 이다.
예제를 한번 보자
ajax 'hello' page
ajax.html
<html>
<head>
<link rel='stylesheet' type='text/css' href='hello.css' />
<script type='text/javascript' src='hello.js'></script>
</head>
<body>
<p id='hello'>hello</p>
<div id='empty'></div>
</body>
hello.css
.declared{
color: red;
font-family: arial;
font-weight: normal;
font-size: 16px;
}
.programmed{
color: blue;
font-family: helvetica;
font-weight: bold;
font-size: 10px;
}
hello.js
window.onload=function() {
var hello=document.getElementById('hello');
hello.className='declared';
var empty=document.getElementById('empty');
addNode(empty,"reader of");
addNode(empty, "Ajax in Action!");
var children=empty.childNodes;
for(var i=0;i<children.length;i++) {
children[i].className='programmed';
}
empty.style.border='solid green 2px';
empty.style.width="200px";
}
function addNode(el, text) {
var childEl=document.createElement("div");
el.appendChild(childEl);
var txtNode=document.createTextNode(text);
childEl.appendChild(txtNode);
}
일단 이걸로 아작스의 시작이네요 다음 편에서 ^^