(Microsoft PowerPoint - 02_Javascript_jquery.pptx [\300\320\261\342 \300\374\277\353])

Size: px

Start display at page:

Download "(Microsoft PowerPoint - 02_Javascript_jquery.pptx [\300\320\261\342 \300\374\277\353])"

빈우 왕
6 years ago
Views:

1 JavaScript

2 JavaScript 의개요 자바스크립트 (JavaScript) 는웹브라우저상에서실행되는스크립트언어 HTML 만으로작성되어정적이기만한웹문서에 JavaScript 를통해동적인 동작을추가할수있게됨 마우스의클릭, 키보드의입력뿐아니라사용자가페이지를열거나이동 특징 할때를알아내어원하는작업을수행함 스크립트언어 이벤트중심프로그래밍 객체기반 / 지향언어 2

3 기본구문 <script> : HTML 에서 JavaScript 코드를작성하기위한태그 작성법 속성 <script> 태그내에 JavaScript 코드를작성한다. 외부의파일에 JavaScript 코드를작성한뒤 <script> 에파일의위치를지정 language src 코드작성위치 <script language= javascript src= script/script.js ></script> <script language= javascript > //java script 코드 </script> JavaScript 프로그램은 HTML 의어느부분에삽입해도지장없으나일반적으 로 HTML 문의헤더부분에두는것이권장되고있다. 3

4 변수와데이터타입 변수 : 데이터를저장할수있는공간 변수선언 : 변수의이름과데이터타입등을선언하는작업 자바스크립트는데이터타입선언없이변수의이름만을선언한다. 선언구문 [var] 변수명 [= 값 ]; EX) var num; var name = 홍길동 ; var age = 10; address= 서울 데이터타입 숫자 : 정수, 실수 문자열 : 값은 또는 로묶는다. 논리형 : true, false null 4

5 함수 프로그램수행의일련과정을하나의단위로묶어주는수행 block 함수는객체이다. 반복호출이가능 event 핸들러나다른함수에서호출 구문 function 함수이름 (args ){ function abc(){ // 함수코드 alert( abc ); [return value] return 10; } } var 함수이름 = function(args.. ){ var abc = function(){ // 함수코드 alert( abc ); [return value] return 10; } } window. 함수이름 =function(args..){ window.abc = function(){ // 함수코드 alert( abc ); [return value] return 10; } } 5

6 제어문 - 반복문 while 문 구문 for 문 while( 조건 ){ 반복구문 ; [break;] } 구문 for( 초기식 ; 조건식 ; 증감식 ){ 반복구문 ; [break;] } 6

7 제어문 - 조건문 switch case 문 구문 if 문 switch( 비교대상값 ){ case value: 코드 ; [break;] default: 코드 [break;] } if( 조건 ){ 코드 }else if( 조건 ){ 코드 }else{ 코드 } 7

8 Event 자바스크립트는사용자의요청처리를 Event 모델을통해처리한다. 예 Event 사용자가특정동작 ( 사건 ) 을가해발생되는신호 (signal) 마우스로버튼클릭, Text 입력양식에글입력, 페이지로딩등.. Event Handler Event 발생시처리하는코드를등록하는것. <input type= button value= 확인 onclick= alert( button 클릭 ) /> <form action= a.jsp onsubmit= alert( 전송합니다. ) > 8

9 Event 종류 Event Handler 설명 focus onfocus 입력양식를선택해서포커스가주어졌을때 blur onblur 포커스가폼의입력양식을벗어났을때 select onselect 입력양식에서한필드를선택했을때발생 change onchange 입력양식에있던값이바뀌었을때발생 load onload 해당페이지가로딩되었을때 ( 처음읽힐때 ) 발생 unload onunload 해당페이지를빠져나갈때발생 mousemove onmousemove 해당영역에마우스를움직였을때발생 mouseover onmouseover 해당영역에마우스가올라갔을때발생 mouseout onmouseout 해당영역에서마우스가나갔을때발생 mousedown onmousedown 해당영역에서마우스를눌렀을때발생 mouseup onmouseup 해당영역에서마우스를눌렀다가떼었을때발생 click onclick 해당영역에서마우스를클릭했을때발생 keydown onkeydown 해당영역에서키보드를눌렀을때발생 keyup onkeyup 해당영역에서키보드를눌렀다가떼었을때발생 keypress onkeypress 해당영역에서키보드를계속누르고있을때발생 submit onsubmit 폼의내용을전송할때발생 reset onreset 폼의내용을초기화시킬때 9

10 JavaScript 와객체 자바스크립트는객체지향언어 (Object Oriented Language) Java Script 가지원하는객체만사용할수있었으나 1.2 버전부터는개발자 가직접객체를만들수있다. 객체의종류 내장객체 : 웹브라우저에서제공하는객체 자바스크립트내장객체 : JavaScript 코드작성시유용한기능을제공해주는객체들 DOM 객체 ( 브라우저내장객체 ) : 웹브라우저의각요소들을객체로제공 사용자정의객체 : 사용자가만드는객체 10

11 JavaScript 내장객체 - Array 배열처리를위한객체 생성구문 변수 = new Array([length]); 변수 = new Array(value, value ); 변수 = [value, value, value ] 값접근 속성 변수 [index] length : 배열의크기 var arr = new Array(); arr[0] = 10; arr[1] = 홍길동 ; for(i = 0; i<arr.length; i++){ alert(arr[i]); } 11

12 JavaScript 내장객체 - Date 날짜와시간을다루는객체 생성구문 변수 = new Date(); 변수 = new Date([ 년, 월, 일, 시, 분, 초, 1/1000]); 주요메소드 메소드 설 명 getfullyear() 1900년대 4자리 getyear() 1900 년대 2 자리 (2000 년대는 4 자리로나옴 ) getmonth() 월 (0~11) 예 ) 0:1월, 11:12월 getdate() 날짜 getday() 요일 (0~6) 예 ) 0: 일요일, 6: 토요일 gethours() 시 (0~23) getminutes() 분 (0~59) getseconds() 초 (0~59) gettime() 1970년 1월 1일이후시간을 1/1000초단위로나타낸값 today = new Date(); alert(today.getfullyear()+"."+(today.getmonth()+1)+"."+today.getdate); 12

13 JavaScript 내장객체 - String 문자열을관리하는객체 값은 로표현 생성구문 변수 = 값 ; 변수 = new String( 값 ); 주요메소드 메소드 설 명 charat(index) 지정된위치에서문자찾기 indexof(string) 지정된문자의위치를왼쪽부터찾기 lastindexof(string) 지정된문자의위치를오른쪽부터찾기 substring(index1, index2) 문자열의일부를추출하기 index1 ~ index2-1 tolowercase() 소문자로변환하기 touppercase() 대문자로변환하기 concat(string) 두문자열을합치기 slice(start_index, end_index) 문자열의일부를추출하기 substr(start_index, length) 문자열을 length만큼잘라내기 13

14 DOM(Document Object Model) 객체지향모델로구조화된문서를표현하는형식 역할 : 동적으로문서의내용, 구조, 스타일에접근하여변경, 생성 구성 Element( 요소 ) 노드 Text 노드 Attribute( 속성 ) 노드 웹문서가로딩시 Web Brower 에의해생성 / 구성됨 14

15 DOM(Document Object Model) Tree 구조 <html> <head> <title>my Title</title> </head> <body> <a href= # >My Link</a> <h1>my header</h1> <body> </html> 15

16 DOM 객체 ( 브라우저내장객체 ) window 객체 브라우저내장객체중최상위트리에위치한객체 자바스크립트동작에필요한전역객체로동작 사용자가보는브라우저창을나타낸다. 브라우저창의 HTML 문서에접근하는시작객체로사용된다. 접근방법 window. 속성, window. 메소드 window 는생략가능 주요메소드 open() close() alert() confirm() prompt() back() 메소드설명 parseint(string) parsefloat(string) isnan(string) 새로운브라우저 ( 윈도우 ) 열기 열려있는브라우저 ( 윈도우 ) 닫기 간단한메시지를보여주기위한 dialog box 사용자로부터어떠한작업을확인받기위한 dialog box 사용자로부터문자열을입력받기위한 dialog box 이전페이지로이동 인수의 String 을정수, 실수형태로변환 인수의 String 이숫자형태가아니면 true, 숫자형태이면 true 리턴 eval(string) String 을실제형태로변환하여주는함수. 16

17 DOM 객체 ( 브라우저내장객체 ) window 객체 <script> //Here </script> 위 here 부분에선언된변수, 함수는모두 window객체의 property로등록된다. 예 <script> <script> var flag = false; window.flag = false; function abc(){ window.abc = function(){ alert( a ); alert( a ); } } </script> </script> 17

18 DOM 객체 ( 브라우저내장객체 ) document 객체 : 브라우저에보여지는 HTML 문서를가리키는객체 문서의구성요소에접근 문서의내용을변경 window 의하위객체 접근방법 window.document. 속성, document. 메소드 주요메소드 메소드 설 명 write( string ) 문서에데이터를출력함 writein( string ) 문서에데이터를출력하고줄바꿈실행 18

19 DOM 객체 ( 브라우저내장객체 ) 를통한 Form 처리 form 객체 : <form> 객체 document 의하위객체 접근방법 window.document.form_name. 속성, window.document.form_name. 메소드 주요속성 주요메소드 속성설명 action Form태그내의 ACTION 속성에기술된문자열 Form 의정보를이용하여수행되는프로그램혹은목적페이지 method 전송 HTTP 메소드설정. (get, post 등 ) encoding name target Form 을통해서버로전송되는정보의 MIME 형태를기술하는문자열 Form 태그에서의 ENCTYPE속성을반영 Form 태그에서의 NAME 속성의값 Form 전송의목적 (Target) 윈도우 / 프레임이름을나타내는속성 메소드설명 reset() 입력양식을초기화시킨다. RESET 버튼과동일한기능. submit() 입력된값을서버로전송한다. SUBMIT 버튼과동일한기능. 19

20 DOM 객체 ( 브라우저내장객체 ) 를통한 Form 처리 checkbox 객체 : <input type= checkbox > 객체 form 의하위객체 접근방법 window.document.form_name.checkbox_name. 속성, window.document.form_name.checkbox_name. 메소드 주요속성 속성설명 name Checkbox 의이름. value Checkbox 의값. checked 주요메소드 Checkbox 의현재체크상태 true/false 메소드설명 focus() 객체에포커스를준다. 20

21 DOM 객체 ( 브라우저내장객체 ) 를통한 Form 처리 radio 객체 : <input type= radio > 객체 form 의하위객체 접근방법 window.document.form_name.radio_name. 속성, window.document.form_name.radio_name. 메소드 주요속성 속성 설 명 name Radio의이름. value Radio의값. checked Radio의현재체크상태 true/false length 한그룹내의 Radio 개수 주요메소드 메소드설명 focus() 객체에포커스를준다. 21

22 DOM 객체 ( 브라우저내장객체 ) 를통한 Form 처리 select 객체 : <select> 객체 form 의하위객체 Select 태그의값은 <option> 태그에있다. 값에접근하기위해서는 select 를통해 option 객체로접근한다. 접근방법 window.document.form_name.select_name. 속성, window.document.form_name.select_name. 메소드값에접근 : window.document.form.select.options[0].text 주요속성 속성설명 name Select의이름. selectedindex 선택된 Option의인덱스. 0부터시작 length 한그룹내의 Select 개수. <OPTION> 태그의개수. options Option객체배열로return. 주요메소드 메소드설명 focus() 객체에포커스를준다. 22

23 DOM 객체 ( 브라우저내장객체 ) 를통한 Form 처리 option 객체 : select 내의 <option> 태그객체 select 객체의 options 속성을통해배열로받아접근한다. 주요속성 속성설명 text value selected 태그내 content value 속성의값선택여부. true/false 23

24 DOM 객체 ( 브라우저내장객체 ) 를통한 Form 처리 text 객체 : <input type= text > 객체 form 의하위객체 접근방법 window.document.form_name.text_name. 속성, window.document.form_name.text_name. 메소드 주요속성 속성 설 명 name Text의이름. value Text의값. 주요메소드 메소드설명 focus() 객체에포커스를준다. 24

25 DOM 객체 ( 브라우저내장객체 ) 를통한 Form 처리 textarea 객체 : <textarea> 객체 form 의하위객체 접근방법 window.document.form_name.textarea_name. 속성, window.document.form_name.textarea_name. 메소드 주요속성 속성설명 name Text의이름. value Text의값. 주요메소드 메소드설명 focus() 객체에포커스를준다. 25

26 DOM 다루기 Javascript 에서 DOM 객체를동적으로생성, 삭제, 추가등관리를할수가있다. DOM 객체접근 DOM 객체생성, 추가, 삭제 26

27 DOM 다루기 노드접근 장거리접근 document.getelementbyid( 태그 id ) 태그의 ID 속성으로접근 <p id= text ></p> var x = document.getelementbyid( text ); document.getelementsbytagname( 태그이름 ) 태그명으로접근 노드리스트 Return : 배열개념 // 모든 <p> 태그조회 var par = document.getelementsbytagname( p ); for(i=0;i<par.length;i++){ //par[i] 로작업 } 27

28 DOM 다루기 노드접근 장거리접근 document.getelementsbyname( 태그 name 속성값 ) 태그의 name 속성의값으로접근 Node 리스트리턴 : 배열개념 <input type= text name= age > var x = document.getelementsbyname( age ); document.getelementsbytagname( 태그명 ) 태그명으로접근 Node 리스트리턴 var x = document.getelementsbyname( tr ); 28

29 DOM 다루기 노드접근 단거리접근 특정노드객체를중심으로그주위노드접근 parentnode 부모노드 return firstchild 첫자식노드 return lastchild 마지막자식노드 return previoussibling 앞쪽형제노드 return nextsibling 뒤쪽형제노드 return children/childnodes 모든자식노드를노드리스트로 return 부모노드.children.length : 모든자식노드의개수 부모노드. children[0] : 첫번째자식노드 29

30 DOM 다루기 - 노드의생성, 삽입 document.createelement( 태그명 ) 태그생성 var x = document.createelement( p ); // <p> 태그생성 document.createtextnode( 문자열 ) 텍스트요소생성 var txt = document.createtextnode( hello ); appendchild() : 자식노드추가 하위노드추가. 마지막자식노드로추가한다. 부모노드.appendChild( 추가할자식노드 ) insertbefore() : 자식노드추가 특정하위노드앞에새하위노드를추가한다. 부모노드.insertBefore( 추가할자식노드, 기존자식노드 ) 30

31 DOM 다루기 - 노드의생성 haschildnodes() : 자식노드유무 true/false 리턴 removechild() : 자식노드삭제 자식노드를제거한다. 부모노드.removeChild( 삭제할자식노드 ) replacechild() 자식노드를다른노드로교체한다. 부모노드.replaceChild( 새노드, 교체할자식노드 ) setattribute() 노드의속성추가 Node.setAttribute( 속성명, 속성값 ); getattribute() 노드의속성값조회 var attrvalue = Node.getAttribibute( 속성명 ) 31

32 <DIV> 또는 <SPAN> 을통한값출력 <DIV> <SPAN> - 범위지정태그 <DIV> 자동줄바꿈기능을가지고있다. CLASS 속성이나 ID 속성과함께사용하여임의의범위에서스타일을설정, 값변경등다양한작업이가능 <SPAN> <DIV> 와같은목적으로사용 태그는줄바꾸기기능이없다. 태그객체.innerHTML; java script 에서특정태그영역에접근할때사용 var value = 태그객체.innerHTML; 태그내의값 return 태그객체.innerHTML = value; 태그내에값삽입 function exam(){ document.getelementbyid( result ).innerhtml = 결과값 ; } <div id= result ></div> 32

33 AJAX (Asynchronous JavaScript And XML)

34 AJAX 개요 JavaScript 와 XML 을이용하여 Web Client 와 Server 간의비동기적처리를지원하는프로그래밍기법 Google 의 Google Map 이 AJAX 를이용하여구축된이후각광받음. Web 2.0 의 Rich Client 기술로인식되어 Web 의많은분야에서적용되는 추세 AJAX는그자체가하나의기술이라기보다는패턴을의미한다. 기존 Web Browser 가제공하는기능을활용하는프로그래밍패턴. 기존기술인 JavaScript 와 XML 등을이용한프로그래밍패턴 34

35 AJAX 이전의 WEB Client 와 Server 동기적전송방식 Waiting 1) 서버에요청 4) 서버의응답출력 2) 요청에대한처리 3) 처리결과응답 Web Browser Server 한계 : 기존 Desktop Application 과같은실행능력을보이지못함 대안기술 ActiveX Applet Web Browser 지원기술이아님 플러그인형식 ActionScript 35

36 AJAX 프로그래밍패턴 1. XMLHttpRequest 객체구하기 2. 서버에 Request 전달 3. 서버에서응답한 Response 데이터처리하기 36

37 XMLHttpRequest 객체 AJAX 의비동기적처리의핵심 JavaScript 객체 서버와클라이언트 (Web Browser) 사이의비동기적데이터송수신을담당하는객체 모든 Web Browser 가지원하나사용방법은차이가있다. IE 6 버전까지는지원하는 MS 자체객체로지원 XMLHttpRequest 객체생성 <script language= javascript > var xhr; function createxmlhttprequest(){ if(window.activexobject){ xhr = new ActiveXObject( Microsoft.XMLHTTP ); }else{ xhr = new XMLHttpRequest(); } } </script> 37

38 서버에 Request 전달 XMLHttpRequest 객체의함수를이용 open() : 요청정보설정. Http Method, URL send() : 요청전송 call back 함수등록 : 서버와의데이터송수신상태에따른처리를담당할 call back 함수등록 open(http method, url, 동기화방식 ); http method : 전송방식 GET, POST URL : 요청정보를전송할 URL 동기화방식 : true 비동기적전송처리 send( 전송데이터 ) false 동기적전송처리 xhr.open( GET, process.jsp, true); 전송데이터 : 요청시서버에보낼 querystring GET 방식의경우 URL 에붙여보내므로 null 값으로처리 POST 방식은데이터를 key-value 로저장하여전달할수있다. 38

39 서버에 Request 전달 GET 방식데이터전달 open() 의 url 뒤에 query string 으로전달 var url = send_data.jsp?name= 홍길동 xhr.open( GET, url, true); xhr.send(null); POST 방식데이터전달 요청전에헤더의 Content-Type 을지정해준다. send() 호출시 argument 로데이터를전송한다. var url = send_data.jsp xhr.open( POST, url, true); xhr.setrequestheader('content-type', 'application/x-www-form-urlencoded;charset=euc-kr'); xhr.send( name= 홍길동 ); 39

40 서버가보낸 Response 데이터처리 Call Back 함수 서버가보낸응답을처리할함수 서버와의송수신상태에따라 Web Browser 가호출 개발자는 call back 함수를정의하고 XMLHttpRequest 를통해등록 Call Back 함수등록 xhr.onreadystatechange = call back 함수 onreadystatechange : request 에대한상태가변화할때마다 call back 함수를호출한다. Call Back 함수구현 서버와의연결상태변화체크 readystate == 4 응답 status 체크 status == 200 서버의응답데이터읽기 TEXT 응답 XMLHttpRequest 객체.responseText xml 형식응답 XMLHttpRequest 객체.responseXML 40

41 서버가보낸 Response 데이터처리 readystate 값 XMLHttpRequest 객체의상태값 값상태 0 uninitialized XMLHttpRequest 객체만생성되고초기화되지않음 1 Loading open() 호출후아직서버에요청하지않은상태 2 Loaded send() 실행된상태. 아직응답은받지않은상태 3 Interactive 응답데이터를받는중인상태 4 Completed 응답데이터를받은상태 주요응답 status Http 응답상태코드 값 상태 200 OK : 성공 403 실행거부 404 요청페이지없음 405 요청방식실행불가 500 서버 CGI 실행중오류 41

42 <DIV> 또는 <SPAN> 을통한값출력 <DIV> <SPAN> - 범위지정태그 <DIV> 자동줄바꿈기능을가지고있다. CLASS 속성이나 ID 속성과함께사용하여임의의범위에서스타일을설정, 값변경등다양한작업이가능 <SPAN> <DIV> 와같은목적으로사용 태그는줄바꾸기기능이없다. 태그객체.innerHTML; java script 에서특정태그영역에접근할때사용 var value = 태그객체.innerHTML; 태그내의값 return 태그객체.innerHTML = value; 태그내에값삽입 function exam(){ document.getelementbyid( result ).innerhtml = 결과값 ; } <div id= result ></div> 42

43 서버가보낸 Response 데이터처리 callback 함수예제 <script> var xhr; function createxmlhttprequest(){ if(window.activexobject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); }else{ xhr = new XMLHttpRequest(); } } function openrequest(){ createxmlhttprequest(); xhr.onreadystatechange = getdata; xhr.open("get", "send_data.jsp?name=hong", true); xhr.send(null); } function getdata(){ if(xhr.readystate==4){ if(xhr.status==200){ var txt = xhr.responsetext; alert(txt); } } } </script> 43

44 AJAX 와서버간의데이터송수신기법 XML을이용한데이터송수신 JSON을이용한데이터송수신 기타 AJAX 기반 Framework을이용한데이터송수신 44

45 JSON 을이용한데이터송수신 XML 의단점 : 속도, 데이터크기 JSON JavaScript Object Notation 경량의데이터교환형식 데이터표현이단순하고직관적이다. Java Script 에서 eval() 를통해 parsing 할수있다. 라이브러리필요없음 크로스브라우저호환문제없음 45

46 JSON 을이용한데이터송수신 기본문법 예 표현하고자하는데이터는 { } 로감싼다. 데이터는 name:value 형식으로표현 각각의값들은, 으로구분한다. name : 로감싸거나그냥써도된다. name : 홍길동 또는 name: 홍길동 값 : string, number, 배열, true, false, null string 은 로감싼다. 배열은 [ ] 로값들을감싼다. { id: abc, password: 1111, name: 홍길동, address: 서울, age:20} { names : [ 이순신, 강감찬, 홍길동 ]} { member": [ {id: abc, password: 1111, name= 홍길동, address: 서울, age:20}, {id: def, password: 2222, name: 이순신, address: 부산, age:25}, {id: ghi, password: 3333, name: 강감찬, address: 광주, age:22} ]} { member:[ { name:" 홍길동 ", age:20, address:" 서울 " }, { name:" 이순신 ", age:23, address:" 인천 " ], admin:[ { name:" 이철수 ", age:25, address:" 마산 " }, { name:" 박영희 ", age:30, address:" 대구 " }, ] } 46

47 JSON 을이용한데이터송수신 JavaScript 에서 JSON 데이터접근 eval() 를이용하여 json object 로변경 var txt = xhr.responsetext; var jsondata = eval('('+txt+')'); value 는. 을통해접근 key.subkey {name: 홍길동, age:20} var name = jsondata.name var age = jsondata.age 배열은 [index] 로접근. index 는 0 부터시작 {names:[ 홍길동, 이순신, 강감찬 ]} var name1 = jsondata.names[0]; var name2 = jsondata.names[1]; 47

48 JSON 을이용한데이터송수신 org.json JAVA 에서 JSON 사용 다양한 LIB 존재 : 참조 org.json : JSONObject JSON 형식의 String 값을만들기위한객체 내부적으로 HashMap 이용 : key-value 쌍으로관리 생성자 JSONObject(),JSONObject(Map map), JSONObject(Object vo) 메소드 put(string key, XXXX value) : XXXX : primitive, Collection, Map, VO get(string key) : Object getxxxx(string key) : XXXX tostring() JSONArray JSON 배열형태의 String 값을만들기위한객체 내부적으로 ArrayList 이용 생성자 JSONArray(), JSONArray(Collection list), JSONArray(Object array) 메소드 put(xxxx value) : XXXX : primitive, Collection, Map, VO get(int idx) : Object getxxxx(int idx) : XXXX tostring() 48

49 jquery

50 jquery 개요 Javascript Library 오픈소스 Javascript Library 존레시그, 2006년발표 다운로드 jquery-x.x.x-min.js 다운 js 파일다운로드후사용하고자하는페이지에서 script 태그의 src 속성으로등록해사용 참고사이트

51 jquery? Rich Client UI 를개발하는다양한기능을지원 HTML 문서탐색, 이벤트처리, 애니메이션, ajax 상호작용 HTML 에서구조와동작을분리하여작성 구조 : HTML, 동작 : Javascript 강력한 selector 지원 크로스브라우저지원 메소드체인 플러그인지원

52 기본문법 jquery 라이브러리등록 <script> 로다운받은파일등록 URL 로등록 <script src=" Selector 함수 jquery 함수를적용할요소를찾는함수 jquery( selector ) 또는 $( selector ) Selector 함수.jQuery 커맨드 예 jquery 커맨드는 jquery 가지원하는메소드임 jquery Chain jquery( #layer ).html( 안녕 ); $( p ).css( color, red ).css( background, blue ); 52

53 Selector 를이용해 HTML 구조접근 구조태그 (HTML 태그 ) 와 Javascript 분리 동작을 HTML 에적용하기위해 HTML 태그에접근할필요 CSS 기본 selector 나 jquery 정의 selector 이용해접근 CSS selector 예 body{ background-color:#d024fe; } div#message_layer{ } font-color:red; 53

57 jquery 기본문법 selector 예 $( a ) page 내모든 <a> $( div a ) page 내 <div> 하위에있는 <a> $( #test ) id 가 test 인태그 $(.btn ) class 가 btn 인모든태그 $( tr:odd ) - <tr> 태그들중홀수번째들 $( tr:last ) 문서내의마지막 <tr> $( b:contains( hi )) hi 를 content 로가진 b 태그 $( div:has( ul )) - <ul> 을가진 <div> 태그 $( input:checkbox ) input 태그중 checkbox $( td nth-child(2n) ) 2 의배수번째 <td> 57

58 $(document).ready(callback 함수 ) jquery 이벤트메서드중하나 문서의 DOM 요소들을조작할수있는시점에서호출 javascript 의 load 이벤트와비슷 예 $(document).ready(function(){ ); } alert('a'); 58

59 jquery event 메소드 - 1 bind( event type,[data], 처리 function) Event 등록 unbind( event type ) Event 해제 one( event type, function) 한번만실행되는 event 처리 live( event type, function) 현재조건이맞거나앞으로조건이맞을모든요소에 event 처리 Ajax 연동시강력 event 도우미메소드 bind() 메소드를 wrapping 한메소드들로 event 명을메소드명으로사용 참고 ex : click(function(){}), mouseover(function(){}) 59

60 jquery event 메소드 - 2 처리 function 구문 : function([event]){ 처리코드 } 인수 : event 객체받을수있음. event 객체 property data bind() 에서넘긴 Data target event 소스객체 $( #mybtn ).bind( click, {name: kim, age:20}, myfun); function myfun(event){ alert(event.data.name); alert(event.data.age); event.target.css( color, red ); } 60

61 Content/DOM 변경및조회메소드 html() 선택요소의 html 내용을가져옴. innerhtml 과동일 html(value) 선택요소에인수로받은 value 를넣는다. value 내에 html 태그가있는경우태그로들어간다. text() 선택요소내의 html 태그요소를제외한내용을가져옴 text(value) val() 선택요소내에인수로받은 value 를넣는다. value 내의 html 태그도 text 로들어간다. input 태그의 value 값을조회 val(value) 인수로받은 value 를 input 태그의 value 값을설정 61

62 Content/DOM 변경및조회메소드 append(value) 선택요소내의 content 뒤에 value 를붙인다. prepend(value) 선택요소내의 content 앞에 value 를붙인다. appendto(selector) 선택된요소를 selector 로선택된요소내내용뒤에붙인다. prependto(selector) 선택된요소를 selector 로선택된요소내내용앞에붙인다. 62

63 Content/DOM 변경및조회메소드 after(value) 선택된요소뒤에 value 를붙인다. before(value) 선택된요소앞에 value 를붙인다. insertafter(selector) 선택된요소를 selector 뒤에붙인다. insertbefore(selector) 선택된요소를 selector 앞에붙인다. remove() 선택된요소들을삭제한다. empty() 선택된요소들의자식요소를삭제한다. 63

64 Traversing( 탐색 ) 메소드 추가필터링 조회한요소들의집합에서원하는요소를찾는메소드들 eq(index) index 와일치한요소조회 filter( 표현식 ) 지정된표현식과일치하는요소들조회 is( 표현식 ) : 조회한요소들중표현식을만족하는요소가있으면 true( 하나라도있 으면 ) 없으면 false not( 표현식 ) : 표현식과일치하지않는요소들조회 end() : 필터링이전단계로돌리는메소드 $( div ).eq(1).addclass( a ).end() -> $( div ) 중첫번째것에 a 클래스를붙인뒤다시 $( div ) 선택상태로돌린다. 64

65 Traversing( 탐색 ) 메소드 찾기 1 find( 표현식 ) 조회한요소의자식요소중표현식과일치한것을검색 add( 표현식 ) 조회한요소에표현식에맞는요소를추가한다. next([ 표현식 ]) 조회한요소바로다음에오는형제요소선택 nextall([ 표현식 ]) 조회한요소다음의모든형제요소 65

66 Traversing( 탐색 ) 메소드 찾기 2 prev([ 표현식 ]) 조회한요소바로전에오는형제요소선택 prevall([ 표현식 ]) 조회한요소이전의모든형제요소선택 siblings([ 표현식 ]) 조회한요소의모든형제요소 ( 자신은제외 ) 선택 parent([ 표현식 ]) 조회한요소의부모요소 children([ 표현식 ]) 조회한요소의자식요소 66

67 CSS 관련메소드 css(name) 조회된요소들중첫요소의 name 스타일값을조회 css(name, value) 조회된모든요소에스타일적용 css(properties) 조회된모든요소에스타일적용 여러개의스타일을한번에설정시사용 properties 는 key:value 쌍의모음 addclass(class 명 ) 조회된모든요소에인수의클래스추가 removeclass(class 명 ) 조회된모든요소에인수의클래스제거 toggleclass(class 명 ) 조회된모든요소에인수의 class 가없으면추가, 있으면제거 67

68 태그의 Attribute 관련메소드 attr(name) 조회된요소의 name Atribute 의값을조회 attr(key, value) 모든조회된요소들의 attribute 를설정 attr(key, 함수 ) 모든조회된요소들의 attribute 를설정. 값은함수실행후 return 값으로 설정 attr(properties) 모든조회된요소들의 attribute 를설정. 여러개의 attribute 설정시사용 properties 는 key:value 쌍의모음 removeattr(name) 모든조회된요소들의해당 attribute 를제거 68

69 jquery Ajax load( url ) url 의응답값을가져와지정된위치에뿌린다. ex) $( div:first ).load( test.jsp ) load( url, 요청파라미터 data ); ex) $( #mydiv ).load( test.jsp, id=a&pwd=b ); ex) $('#first').load('src.jsp', {id:'a',pwd:'b'}); load( url, [data], function) load 성공후호출할 function 등록 69

70 jquery Ajax $.getjson( url, data,callback 함수 ) 서버로부터비동기적으로 JSON 데이터를받아온다. 인수 ex 1 번 : data 를받아올 url 2 번 : CGI 로보낼요청파라미터값 2 번 : 서버에서응답을받은뒤실행될함수. 인수로받아온 json 객체를받는다. $.getjson( function(data){}); $get(url, data, clallback 함수 ),$.post(url, data, callback 함수 ) 비동기적으로 GET/POST 방식요청 인수 1 번 : 요청 url 2 번 : CGI 로보낼요청파라미터값 3 번 : 서버에서응답을받은뒤실행될함수 70

71 jquery Ajax $.ajax({property}) 모든 ajax 함수의 basic 함수 property : ajax 호출관련설정을넣어준다. url 호출할 URL type 통신방식 GET, POST timeout - 통신에러시최대대기시간설정 error 에러시처리할 callback 함수 success 통신성공시처리할 callback 함수 71

PowerPoint Template

PowerPoint Template JavaScript 회원정보 입력양식만들기 HTML & JavaScript Contents 1. Form 객체 2. 일반적인입력양식 3. 선택입력양식 4. 회원정보입력양식만들기 2 Form 객체 Form 객체 입력양식의틀이되는 태그에접근할수있도록지원 Document 객체의하위에위치 속성들은모두 태그의속성들의정보에관련된것