Javascript.pages

Size: px

Start display at page:

Download "Javascript.pages"

혜나 남
4 years ago
Views:

1 JQuery jquery part1 JavaScript : leseraphina@naver.com

2 I.? 2

3 ......,,. : <script> </script> : html5 <script type="text/javascript"> ; </script> <script> ; </script> <body>. <head> <body> "js" <script type="text/javascript" src=".js"></script> <script src=".js"></script> 3

4 <img src= pic/menu1.gif onkeydown= mouseover_img() onkeyup= mouseout_img() />. (;)., ; ; // :. /* ~ */ : 1 /* 1 2 */ 2 Document. write(). : Document.write( ) :,, window. 4

5 ,, :.,, :. () II.? 1.,. 2.. TEXT,,.. ( ): 1.?,,,. 2. 1, _ $., 5

6 Var (); =; var num01; mun01=2; 2. var () = ; var num01=2; 3. = ; num01=2; III (number: 3,7,-5,-10,,. 6

7 2. (String) ex) "" 3. (Boolean) true false 4. Infinity:,. 5. :typeof( ); a=typeof(123); dodument.write(a); 1. :parseint() a= 235 ; num01=parseint(a); b= 123 ; num02=parseint(b); sum=num01+num02; IV. var abc = 5 + 4; i. ii. iii. iv. v. vi. 7

8 vii. x + y / x - y x * y x / y x % y = =. var total = 5 + 4; var friend = ""; total = friend = "". = var x = 5; 5 x += x += 3; 3 x x -= x -= 2; x 2 x *= x *= 4; x 4 x /= x /= 2; x 2 x %= x %= 2; x 2 x a=a+1; -> a+=1; a=a+b -> a+=b; a=a*b; -> a*=b; 8

9 x 1 x=3; ++x; x=4 x++ 1 x=3; x++; x=4 --x 1 x=3; --x; x=2 x-- 1 x=3; x--; x=2 +. var x = "" var y = ""; document.write("x = " + x + "<br/>"); document.write("y = " + y + "<br/>"); document.write( x + " " + y, "<br/>"); document.write("x += y --> " + (x += y) + "<br/>", "<br/>"); 1.. (true), (flase). / x == y x!= y x > y x >= y x < y x === y x!== y x y. x y. x y. x y. x y. x y. x y. 9

2. 3 3 if/else. ()? 1 : 2 true 1 2 big = ( x > y)? x : y; if ( x > y) {big = x; else {big = y;, if., Boolean (true,flase). AND(&&), OR( ), NOT(!). / num1 && num2 num1 num2!

10 if/else. ()? 1 : 2 true 1 2 big = ( x > y)? x : y; if ( x > y) {big = x; else {big = y;, if., Boolean (true,flase). AND(&&), OR( ), NOT(!). / num1 && num2 num1 num2!num1 num1 num2 true true false false true true false false num1 true false false true (precedence), (associativity), 10

11 V.. : if 3. if~else if () { ;; else { ; ; () if ( x > y ) { alert( "x!!" ) ; else { alert( "y!!" ) ; switch. switchif. : break. default. switch () { case label : 1 ; 11

12 break; case label : 2 ; break;... default : n; for for ( ; ; ) { ; for. while (true). false false. while () { ; ; do-while do~while false. do { ; while () ; break break 12

13 VII.?.,.. i.... ii.. function.(function,.) 1. 2., function (1, ---,n) { ; (1, ---,n); 3., (Function).. 13

14 , (,),,. 4. i. html., ().. 1 var =; =; // // 2 function () { =; var =; // // 5. return return return function return function return function, return undefined return; return ; function sum (a, b) { var result= a + b; return result; function, var total = sum(5, 10); sum() function 5 10, total <HTML> <HEAD> <SCRIPT Language="JavaScript"> 14

15 function TEST1() { // document.write("<b> TEST1!!<br>") function TEST2(sname,sage) { // document.write (" "+sname+", "+sage+"<br>") function TEST3(inta,intb) { // return return inta+intb // </SCRIPT> </HEAD> <BODY> <SCRIPT Language="JavaScript"> TEST1(); TEST2("",35); returnv = TEST3(50,25); // returnv! document.write(" = " +returnv+"<br>"); </SCRIPT> </BODY> </HTML> 1. alert() :. [OK], \n \t alert(" JavaScript" ); alert(a + b); 2. confirm() [] [] [] true [] false <script type = "text/javascript"> if(confirm("[]?") == true) { alert("[]!!"); else { 15

16 alert("[]!!"); jump = confirm("?") if (jump){ location.href = " else{ document.write("<h1>!! </H1>"); </script> 3. prompt(),. null. prompt( "? ", name) ;. 4. eval() : prompt number() String().. "2+3" eval "5".. 16

17 VII. (Object) 1.. (Object)? HTML (Object)..,,,. 2. :, document (bgcolor), (title),. 3. (Method)?. (window.open()) (history.go(-1)) open() go().,,,.....,...,, :, Date, String Number Browser DOM Document 5. 17

18 Object (parent) (child) sibling dot(.). dot(.) (.) 18

19 ! window,, 19

20 alert() cleartimeout() confirm() open() prompt() settimeout() eval() tostring() blur() focus() scroll() valueof() back() find() forward() home() moveby() moveto() resizeby() resizeto() scrollby() stop() captureevents() setinterval() clearinterval() handleevent() print() releaseevent() routeevent() tosource() settimeout,, millisecond focus focus URL()., true false. URL().....,... setinterval open 20

$type="text/javascript"> var cnt=0; function interval_timer(){ if(cnt<5){ cnt++;$

21 1 <head> <script type="text/javascript"> var cnt=0; function settimer(){ cnt++; alert(cnt); </script> </head> <body> <script type="text/javascript"> settimeout(settimer,1000); //settimeout(, ()) </script> </body> 2 <head> <script type="text/javascript"> var cnt=0; function interval_timer(){ if(cnt<5){ cnt++; alert(cnt); else{ clearinterval(interval_timer); 21

$</script> </head> <body> <script type="text/javascript"> setinterval(interval_timer,500); //settimeout(, ()) </script> </body> 3 <head> <script type="text/javascript"> function win_resizeby(){ window.$

22 </script> </head> <body> <script type="text/javascript"> setinterval(interval_timer,500); //settimeout(, ()) </script> </body> 3 <head> <script type="text/javascript"> function win_resizeby(){ window.resizeby(10,-10) function win_resizeto(){ window.resizeto(640,480) </script> <head> <body> <input type="button" onclick="win_resizeby()" value=""> <input type="button" onclick="win_resizeto()" value=" "> </body> document HTML 1.! 2. 22

23 history 1. location 23

24 image event ()

25 String 1. String = new.. 2. charat(index) concat(string1,..., stringn) fromcharcode(codes) indexof(substr, startpos) lastindexof(substr, startpos) replace(searchvalue, replacevalue) search(regexp) slice(startpos, endpos) split(delimiter) substr(startpos, endpos) substring(startpos, endpos) tolocalelowercase() tolocaleuppercase() tolowercase() tostring() touppercase() valueof() HTML

length construct or prototype String function <script type="text/javascript"> st="."; document.write(st.length); document.write("".length); document.write("the book".

26 length construct or prototype String function <script type="text/javascript"> st="."; document.write(st.length); document.write("".length); document.write("the book".length); </script> Date - new <script type="text/javascript"> da=new Date(); document.write(da); //. </script> <script type="text/javascript"> da=new Date(); document.write(da,"<br />"); document.write("", da.getfullyear()," ", da.getmonth()+1," ", da.getdate()," "); switch(da.getday()){ case 0:{document.write(""); 26

27 break; case 1:{document.write(""); break; case 2:{document.write(""); break; case 3:{document.write(""); break; case 4:{document.write(""); break; case 5:{document.write(""); break; case 6:{document.write(""); break; </script> Array : : =new Array(n); [0]= 1 ; [1]= 2 ; [2]= 3 ; [n]= n ; = new Array( 1, 2, 3, n ); for(i=0 ; i<5 ; i++){ document.write(i," ", animal[i],". <br />") for(i=0 ; i<animal.length ; i++){ document.write(i," ", animal[i],". <br />") 27

28 // :length <script type="text/javascript"> // animal =new Array(5); // animal[0]=""; animal[1]=""; animal[2]=""; animal[3]=""; animal[4]=""; for(i=0 ; i<5 ; i++){ document.write(i+1," ", animal[i],". <br />") //. for(i=0 ; i<5 ; i++){ document.write(i," ", animal[i],". <br />") // :length for(i=0 ; i<animal.length ; i++){ document.write(i," ", animal[i],". <br />") </script> concat() join() pop() push() reverse() shift() slice() sort() splice() tolocalestring() tostring() unshift() ,. format... 28

29 Math 1. 29

30 Screen,, VIII. 1. : 30

31 ,,. <script>~ </script>, HTML, form, image, link HTML, <body>,, <input>,, <a href>. function, HTML function 3. inline DOM2 4. onload/onunload,,,. 31

32 body body., 5. onmouseover/onmousedown <SCRIPT LANGUAGE="JavaScript"> function mouseover_image() { document.img_change.src = "pic/menu2.gif" function mouseout_image() { document.img_change.src = "pic/menu1.gif" </SCRIPT> <img src="pic/menu1.gif" name="img_change" onmouseover='mouseover_image()' onmouseout='mouseout_image()'> 6. onkeydown/onkeyup <body> <BODY onkeydown='mouseover_image()' onkeyup='mouseout_image()'> <img src="pic/menu1.gif" name="img_change"> 32

var answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다.");

var answer = confirm( 확인이나취소를누르세요.); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write( 확인을눌렀습니다.); else { document.write( 취소를눌렀습니다.); 자바스크립트 (JavaScript) - HTML 은사용자에게인터페이스 (interface) 를제공하는언어 - 자바스크립트는서버로데이터를전송하지않고서할수있는데이터처리를수행한다. - 자바스크립트는 HTML 나 JSP 에서작성할수있고 ( 내부스크립트 ), 별도의파일로도작성이가능하다 ( 외 부스크립트 ). - 내부스크립트 - 외부스크립트