First Step In Ajax Korean

3,729 views

Published on

Overview of AJAX in korean

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,729
On SlideShare
0
From Embeds
0
Number of Embeds
1,597
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • First Step In Ajax Korean

    1. 1. Chap 1. A new design for the Web Byungwook Cho K. 2006-07-28
    2. 2. Agenda <ul><li>AJAX 란 ? </li></ul><ul><li>AJAX 의 기본 구성 요소 </li></ul><ul><li>CSS 를 이용한 화면 구성 </li></ul><ul><li>DOM 을 이용한 문서 구성 </li></ul><ul><li>XML 데이터를 비동기적으로 읽어오기 </li></ul>
    3. 3. 1. AJAX 란 ? <ul><li>AJAX = Asynchronous Java script + XML </li></ul><ul><li>Jesse James Garrett in Adaptive Path </li></ul><ul><li>주방용 세제이름 , 독일 축구팀 - 아약스 </li></ul><ul><li>비동기 웹 클라이언트 구현을 위한 자바스크립트 기술 </li></ul>
    4. 4. 1. AJAX 란 ? <ul><li>AJAX 사용 사례 </li></ul>
    5. 5. 2. AJAX 의 기본 구성 요소 <ul><li>CSS - 화면의 출력 스타일을 정의 </li></ul><ul><li>자바스크립트 - AJAX 에서 사용되는 스크립팅 언어 </li></ul><ul><li>DOM - HTML 의 모든 element 를 구조화 하여 자바스크립트로 접근할 수 있도록 해줌 </li></ul><ul><li>XMLHttpRequest 객체 - 백그라운드로 웹서버로 부터 HTTP request 를 보내고 response 를 받아옴 </li></ul>과거의 DHTML
    6. 6. 3. CSS (Cascading Style Sheet) <ul><li>웹 페이지의 표시 형식을 정의 – 색상 , 테두리 , 위치 , 크기 등 </li></ul><ul><li>CSS 셀렉터 </li></ul><ul><ul><li>HTML 의 특정 테그를 지정하는 방법 </li></ul></ul>형식 : 태그 . 클래스 ID { 스타일 선언 } <ul><li>div h1 { color:red}  <DIV> 안에 포함된 <H1> 태그 </li></ul><ul><li>예 ) <DIV><H1> DIV 안에 포함된 H1 태그 </H1></DIV> </li></ul><ul><li>.callout { border: solid ..}  callout 으로 정의된 클래스 </li></ul><ul><li>예 ) <div class=“callout” > callout 을 지정한 스타일 </div> </li></ul><ul><li>span.highlight { xxx }  <SPAN> 태그 내에서 highlight 로 정의된 클래스 </li></ul><ul><li>예 ) <span> <div class=‘highlight’> 태그 </div></span> </li></ul>CSS 셀렉터
    7. 7. 3. CSS (Cascading Style Sheet) <ul><li>CSS 스타일 선언 </li></ul><ul><ul><li>엘리먼트의 스타일을 정의 </li></ul></ul><ul><ul><li>색상 , 크기 , 굵기 , 위치 등을 지정 </li></ul></ul><ul><ul><li>스타일 속성간은 ‘ ;’ 으로 구별 </li></ul></ul>형식 : 태그 . 클래스 ID { 스타일 선언 } CSS 스타일 선언 . robotic { font: bold 14pt courier new, monospace; color: gray; } 속성명 속성값
    8. 8. 3. CSS (Cascading Style Sheet) <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=euc-kr&quot;> </li></ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;window.css&quot; type=&quot;text/css&quot;> </li></ul><ul><li></head> </li></ul><ul><li><body bgcolor=&quot;#FFFFFF&quot; text=&quot;#000000&quot;> </li></ul><ul><li><div class='redchar'> 빨간 글자 </div> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>.redchar { font-family: &quot;Arial&quot;, &quot;Helvetica&quot;, &quot;sans-serif&quot;; font-size: 16px; font-style: italic; color: #FF0000} window.css window.html
    9. 9. 4. DOM <ul><li>DOM 은 HTML 문서를 계층구조로 표현하며 , 각 항목은 HTML 의 각 태그에 해당한다 . </li></ul><ul><li>최상위 엘리먼트는 document </li></ul>
    10. 10. 4. DOM el.innerHTML += “<div>HTML 태그 붙이기 </div>”; innerHTML element.className = ‘ 클래스 ID’ ( 클래스 ID) el.style.border=“solid green 2px”; el.style.width=“200px”; 스타일 적용 <div class=‘classId’> 내용 </div> var e1 = document.getElementById(‘ 클래스 ID’); var child = p.childNodes(); for(int i=0;i<child.length;i++){ … } 엘리먼트 가지고 오기 var child = document.createElement(‘div’); 엘리먼트 생성 var txt = document.createTextNode(‘ 글자’ ); 텍스트 노드 생성 e1.appendChild(child); 생성된 엘리먼트 텍스트 노드 붙이기 자바스크립트 DOM 액션
    11. 11. 5. 비동기 데이터 로딩 -IFrame <ul><li>사용 방법 </li></ul><ul><ul><li>Iframe 을 안보이게 생성 </li></ul></ul><ul><ul><li>Iframe 을 통해 데이터 로드 </li></ul></ul><ul><ul><li>데이터가 다 로드되었으면 해당 내용을 핸들링하거나 Iframe 을 보이게 함 </li></ul></ul><ul><li>발전된 Iframe 사용 방식  Pooling </li></ul><script type=‘text/javascript’ > window.onload=function(){ var iframe = document.getElementById(‘dataFeed’); var src =‘datafeeds/mydata.xml’; loadDataAsync(iframe,src); } function loadDataAsync(iframe,src){ // iframe 에 데이터 로드 } </script> </head> <body> <iframe id=‘dataFeed’ style=‘height=0px;width=0px;’></iframe> : function fetchData(){ var iframe = document.createElement(‘iframe’); iframe.className=‘hiddenDataFeed’; document.body.appendChild(iframe); var src = ‘datafeeds/mydata.xml’; loadDataAsync(iframe,src); }
    12. 12. 5. 비동기 데이터 로딩 - XmlDocument & HttpRequest function getXMLDocument(){ var xDoc = null; if(document.implementation && document.implementation.createDocument){ xDoc = document.implementation.createDocument( “”,””,null);  Mozila }else if(typeof ActiveXObject != “undefined”){ var msXmlAx=null; try{ msXmlAx = new ActiveXObject(“Msxml12.DOMDocument”); }catch(e){ msXmlAx = new ActiveXObject(“Msxml.DOMDocument”); } xDoc = msXmlAx; } if(xDoc == null || type of xDoc.load==“undefined”){ xDoc == null; } return xDoc; } getXMLDocument function getXMLRequest(){ var xRequest = null; if(window.XMLHttpRequest){ xRequest = new XMLHttpRequest();  Mozila } else if (typeof ActiveXObject != “undefined”){ xRequest = new ActiveXObject(“Microsoft.XMLHTTP”);  IE } return xRequest; } getXMLHTTPRequest
    13. 13. 5. 비동기 데이터 로딩 - XmlDocument & HttpRequest <html> <head> <script type='text/javascript'> var req=null; var console=null; var READY_STATE_UNINITIALIZED=0; var READY_STATE_LOADING=1; var READY_STATE_LOADED=2; var READY_STATE_INTERACTIVE=3; var READY_STATE_COMPLETE=4; function loadXMLDoc(url) { if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } if (req) { req.onreadystatechange = processReqChange; req.open(&quot;GET&quot;, url, true); req.send(null); } } function processReqChange(){ var ready=req.readyState; var data=null; if (ready==READY_STATE_COMPLETE){ data=req.responseText; }else{ data=&quot;loading...[&quot;+ready+&quot;]&quot;; } toConsole(data); } function toConsole(data){ if (console!=null){ var newline=document.createElement(&quot;div&quot;); console.appendChild(newline); var txt=document.createTextNode(data); newline.appendChild(txt); } } window.onload=function(){ console=document.getElementById('console'); loadXMLDoc(&quot;data.txt&quot;); } </script> </head> <body> <div id='console'></div> </body> </html>
    14. 14. 5. 비동기 데이터 로딩 - XmlDocument & HttpRequest <ul><li>Parameter 에 대한 한글 문제 </li></ul>
    15. 15. Questions?

    ×