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
- rss
- flex3
- ajax
- 주식이야기
- Lift
- 나의 프로젝트
- ejb
- docker
- php thumbnail
- 명사 분석기
- 스킨 스쿠버
- 메일왕창보내는법
- Cross
- express for node.js
- nodejs express
- 베트남어
- 디즈니씨
- php
- 책이야기
- scala
- C/C++
- node.js web framework
- 명사 추출기
- Eclipse
- 도커
- iBatis
- ror실행
- 나의 취미
- 명사 뽑아내기
- Node.js
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);
}
일단 이걸로 아작스의 시작이네요 다음 편에서 ^^