script typetextjavascriptsrcjs script script languagejavascript function script input

  • Slides: 65
Download presentation

사용법 � � 선언 <script type=“text/javascript”src="js 파일의 전체 경로"></script> <script language=javascript> function 함수명( )

사용법 � � 선언 <script type=“text/javascript”src="js 파일의 전체 경로"></script> <script language=javascript> function 함수명( ) { ~~자바스크립트 소스~~ } </script> 사용 <태그명 이벤트핸들러="함수명()“> <input type=“button” value=“확인” onclick=“goto(); ” />

if문 <HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> <SCRIPT type="text/javascript"> <!-function order(str) { if(str == "이해") alert("정말이요.

if문 <HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> <SCRIPT type="text/javascript"> <!-function order(str) { if(str == "이해") alert("정말이요. . 머리가 상당히 좋으시네요. "); else if(str == "글쎄") alert("다시 한번 잘 살펴 보세요. "); else if(str == "아니오") alert("정말 모르시나요. . 농담이시죠. . . "); } // --> </SCRIPT> </HEAD> <BODY> <H 1> 이 스크립트를 이해할 수 있나요. . ? ? </H 1> <P> <FORM> <INPUT TYPE="button" VALUE=" 예 " on. Click="order('이해')"> <INPUT TYPE="button" VALUE="글 쎄" on. Click="order('글쎄')"> <INPUT TYPE="button" VALUE="아니오" on. Click="order('아니오')"> </FORM> </BODY> </HTML>

switch문 <SCRIPT type="text/javascript"> <!-i=1 while(i < 11) { switch(i) { case 1 : document.

switch문 <SCRIPT type="text/javascript"> <!-i=1 while(i < 11) { switch(i) { case 1 : document. write("변수 값이 break; case 2 : document. write("변수 값이 break; case 3 : document. write("변수 값이 break; default : document. write("변수 값이 } i++ } // --> </SCRIPT> 1이군요<BR>"); 2이군요<BR>"); 3이군요<BR>"); 1이나 2나 3이 아니군요<BR>");

break, continue <SCRIPT type="text/javascript"> <!-i = 0; j = 0; outer_while : while(true) {

break, continue <SCRIPT type="text/javascript"> <!-i = 0; j = 0; outer_while : while(true) { inner_while : while(true) { if(i == 3) break outer_while; if(j == 3) { j = 0; break inner_while; } document. write(i + " * " + j + " = " + i*j + "<BR>") j++; } i++; } // --> </SCRIPT>>

return문 <SCRIPT type="text/javascript"> <!-// 제곱을 구하는 함수의 정의 function square(i) { return i*i }

return문 <SCRIPT type="text/javascript"> <!-// 제곱을 구하는 함수의 정의 function square(i) { return i*i } // 자바스크립트 끝 --> </SCRIPT> </HEAD> <BODY> <H 1> 1부터 10까지 제곱 구하기 </H 1> <P> <SCRIPT type="text/javascript"> <!-/* i 변수가 1에서 10이 될 때까지 계속해서 i의 제곱 계산하여 출력 */ for(i = 1; i < 11; i++) { document. write(i + " * " + i + " = " + square(i) + "<BR>") } // --> </SCRIPT>

객체 � 속성과 함수를 가지고 있는 모듈 � 내장객체 ◦ ◦ ◦ ◦ ◦

객체 � 속성과 함수를 가지고 있는 모듈 � 내장객체 ◦ ◦ ◦ ◦ ◦ Date Math String Array Boolean Argument Number Global 기타 with/delete

배열객체 var obj = new Array(3); obj[0] = "1111"; obj[1] = "2222"; obj[2] =

배열객체 var obj = new Array(3); obj[0] = "1111"; obj[1] = "2222"; obj[2] = "3333"; � length: 현재 길이를 담고 있는 변수 � var arr = new Array(3); arr[0] = 1; arr[1] = "AAA"; arr[2] = Na. N; � for(i = 0; i < arr. length; i++){ document. write(""+i+"번째 값 : " + arr[i] + "<BR>"); }

배열객체 � var arr = new Array("빨간색", 1010, "deadfire", "Javascript", "XX"); document. write("<H 2>Original</H

배열객체 � var arr = new Array("빨간색", 1010, "deadfire", "Javascript", "XX"); document. write("<H 2>Original</H 2>"); for(i = 0; i < arr. length; i++){ document. write("arr["+i+"] : " + arr[i] + "<BR>"); } arr. sort(); document. write("<HR><H 2>기본정렬</H 2>"); for(i = 0; i < arr. length; i++){ document. write("arr["+i+"] : " + arr[i] + "<BR>"); } function compare(a, b){ if( a < b ) return 1; else if( a > b ) return -1; else return 0; } arr. sort( compare ); // 역순정렬에 compare함수사용 document. write("<H 2> 역순정렬 </H 2>"); for(i = 0; i < arr 1. length; i++){ document. write("arr["+i+"] : " + arr[i] + "<BR>"); }

� Boolean객체 ◦ var b = new Boolean(true); � Function객체 ◦ var sum =

� Boolean객체 ◦ var b = new Boolean(true); � Function객체 ◦ var sum = new Function("a", "b", "return a+b"); ◦ function sum(a, b){ return a+b; } � Argument객체 ◦ arguments[0], arguments[1], . . arguments. length

Image객체 � image. Name = new Image(height, width); imang. Name. src = "image_filename"; �

Image객체 � image. Name = new Image(height, width); imang. Name. src = "image_filename"; � Pre loading의 장점이 있다. inimg = new Image(100, 100); inimg. src = "inbutton. gif"; outimg = new Image(100, 100); outimg. src = "outbutton. gif"; <A HREF SRC=". . /index. html" on. Mouse. Over="gol. src = inimg. src; " on. Mouse. Out="gol. src = outimg. src; "><IMG NAME="gol" SRC="outbutton. gif" BORDER=0></A>

DOM Level 0 � <TAG event. Handler="처리할 실제함수명(); "> � <INPUT TYPE="button" VALUE="Click Me"

DOM Level 0 � <TAG event. Handler="처리할 실제함수명(); "> � <INPUT TYPE="button" VALUE="Click Me" on. Click="func(); "> � <TAG on. Click="alert('Click')" on. Focus="alert('Focus')">

DOM Level 2 � function hello(){ alert(111); } � window. onload=hello; 메서드에서 false 리턴하면

DOM Level 2 � function hello(){ alert(111); } � window. onload=hello; 메서드에서 false 리턴하면 기본동작이 실 행 안됨. � <a … onclick=“f()”/> � <form onsubmit=“f()”> � 핸들러

접근방법 window. document. fm. userid window는 생략가능 document. fm. userid documenrt. forms[0]. userid documenrt.

접근방법 window. document. fm. userid window는 생략가능 document. fm. userid documenrt. forms[0]. userid documenrt. forms[“fm”]. userid document. fm. elements[0] document. fm. elements[“userid”]

Navigator객체 � 브라우저정보를 담는 객체 for( obj in navigator ){ document. write(obj + "

Navigator객체 � 브라우저정보를 담는 객체 for( obj in navigator ){ document. write(obj + " : " + navigator[obj] + "<BR>"); } app. Version, user. Agent정도의 속성이 주로 사용되며, navigator 객체는 별도의 메소드는 없다.

� � 새창열기 window. open("new. html", "new. Window", "toolbar=yes, . . , width=200"); 타이머

� � 새창열기 window. open("new. html", "new. Window", "toolbar=yes, . . , width=200"); 타이머 설정 t. ID = set. Timeout("exp", 5000); //exp 수행하기전 5초대기. clear. Timeout(ID);

form객체 � � <FORM NAME="fm 1">. . </FORM> <FORM NAME="fm 2">. . </FORM> document.

form객체 � � <FORM NAME="fm 1">. . </FORM> <FORM NAME="fm 2">. . </FORM> document. fm 1 == document. forms[0]; document. fm 2 == document. forms[1];

form elemenets � text / password / file / hidden 요소 * 현재 fm이라는

form elemenets � text / password / file / hidden 요소 * 현재 fm이라는 form 에 설정된 txt라는 이름을 가진 text/textarea라는 필드의 실제 내용은? document. fm. txt. value

� button / submit / reset

� button / submit / reset

� textarea

� textarea

� checkbox � radio

� checkbox � radio

� * 현재 fm이라는 form에서 area라는 radio객체가 있는데 무엇이 선택되었는지 알고 싶으면? for(var i=0;

� * 현재 fm이라는 form에서 area라는 radio객체가 있는데 무엇이 선택되었는지 알고 싶으면? for(var i=0; i > area. length; i++){ if( document. fm. area[i]. checked) { selectvalue = document. fm. area[i]. value; break; } }

� select 현재 fm이라는 form에 설정된 sl이라는 select객체중 선택된 문자열은? document. fm. sl. options[document.

� select 현재 fm이라는 form에 설정된 sl이라는 select객체중 선택된 문자열은? document. fm. sl. options[document. fm. sl. selected. Index]. text

animation <html> <head> <SCRIPT> delay = 100; // 지연시간 1초. img. Number = 0;

animation <html> <head> <SCRIPT> delay = 100; // 지연시간 1초. img. Number = 0; // 이미지 변화를 위한 변수 anim = new Array(); // image를 위한 array를 생성하게 된다. for(i = 0; i < 8; i++){ // image preload anim[i] = new Image(100, 100); anim[i]. src = 'wave' + (i + 1) + '. gif'; } function Switch(){ // 이미지의 source를 바꾸어 출력한다. document. img. src = anim[img. Number]. src; // img는 특정이미지의 이름 img. Number++; if(img. Number >= 8) img. Number = 0; } function animate(){ // 재귀함수. animation의 main함수 Switch(); set. Timeout("animate()", delay); // animate()호출전에 1초대기 } </SCRIPT> </head> <BODY on. Load="animate()"> <IMG NAME="img" SRC="wave 8. gif"> </BODY> </html>

Node

Node

Node. List � length - Node. List 에 저장된 노드의 개수(Node. List의 � item(i)

Node. List � length - Node. List 에 저장된 노드의 개수(Node. List의 � item(i) - 인덱스 i에 저장된 노드를 구함(i는 0부터 시작) 길이) � var } book. Child. Nodes = leftbook. child. Nodes; for( var i=0 ; i<book. Child. Nodes. length; i++){ var child. Node =book. Child. Nodes. item(i);

node. Name, node. Value 노드 타입 Document Element Text node. Name 프로 퍼티 #document

node. Name, node. Value 노드 타입 Document Element Text node. Name 프로 퍼티 #document node. Value 프로 퍼티 null 태그이름 #text null 문자열

node. Type 상수명 값 의미 ELEMENT_NODE 1 Element 노드를 의미 ATTRIBUTE_NODE 2 Attribute 노드를

node. Type 상수명 값 의미 ELEMENT_NODE 1 Element 노드를 의미 ATTRIBUTE_NODE 2 Attribute 노드를 의미 TEXT_NODE 3 Text 노드를 의미 CDATA_SECTION_NODE 4 CDATASection 노드를 의미 ENTITY_REFERENCE_NODE 5 Entityreference 노드를 의미 ENTITY_NODE 6 Entity 노드를 의미 PROCESSING_INSTRUCTON_NODE 7 Processing. Instruction 노드를 의미 COMMENT_NODE 8 Comment 노드를 의미 DOCUMENT_NODE 9 Document노드를 의미 DOCUMENT_TYPE_NODE 10 Document. Type노드를 의미 DOCUMENT_FRAGMENT_NODE 11 Document. Fragment노드를 의미 NOTATION_NODE 12 Notation노드를 의미

var book. Node = do Element 프로퍼티 타입 String 프로퍼티 이름 tag. Name 설명

var book. Node = do Element 프로퍼티 타입 String 프로퍼티 이름 tag. Name 설명 태그의 이름 함수 String get. Attribute(String name) 설명 name 해당하는 속성의 값을 구한 다. set. Attribute(String name, String value) 이름이 name인 속성의 값을 value로 지정한다. remove. Attribute(String name) 이름이 name인 속성을 제거한다.

Document의 Element생성함수 함수 Element create. Elemnt(String tag. Name) 설명 지정한 태그 이름을 갖는 Element

Document의 Element생성함수 함수 Element create. Elemnt(String tag. Name) 설명 지정한 태그 이름을 갖는 Element 노 드를 생성한다. Text create. Text. Node(String text) text를 값으로 갖는 Text 노드를 생성 한다. var p. Node =document. create. Element("P"); var text. Node = document. create. Text. Node("테스트"); p. Node. append. Child(text. Node);

Node의 트리변경함수 함수 Node insert. Before(Node new. Child, Node ref. Child) 설명 현재 노드의

Node의 트리변경함수 함수 Node insert. Before(Node new. Child, Node ref. Child) 설명 현재 노드의 자식 노드인 refchild노 드의 previous. Sibing 자리에 new. Child노드를 삽입한다. Node replace. Child(Node new. Child. Node old. Child) 현재 노드의 자식 노드인 old. Child 노드를 새로운 new. Child 노드로 교 체한다. Node remove. Child(Node old. Child) 현재 노드의 자식 노드인 old. Child 를 현재 노드에서 제거한다. Node append. Child(Node new. Child) new Child 노드를 현재 노드의 마지 막 자식 노드로 추가한다.

class. Name 프로퍼티 � HTML 요소의 속성명은 class. � 객체 속성명은 class. Name. �

class. Name 프로퍼티 � HTML 요소의 속성명은 class. � 객체 속성명은 class. Name. � 여러 개 속성값 부여 가능 element. class. Name=“invisible”; element. class. Name=“값 1 값 2 값 3”;