JQuery jquery part1 JavaScript : e-mail:leseraphina@naver.com http://www.webhard.co.kr
I.? 2
......,,. : <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
<img src= pic/menu1.gif onkeydown= mouseover_img() onkeyup= mouseout_img() />. (;)., ; ; // :. /* ~ */ : 1 /* 1 2 */ 2 Document. write(). : Document.write( ) :,, window. 4
,, :.,, :. () II.? 1.,. 2.. TEXT,,.. ( ): 1.?,,,. 2. 1, _ $., 5
1.. 2.. 1. Var (); =; var num01; mun01=2; 2. var () = ; var num01=2; 3. = ; num01=2; III. 1.. 1. (number: 3,7,-5,-10,,. 6
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
vii. x + y / x - y x * y x / y x % y = =. var total = 5 + 4; var friend = ""; total = 5 + 4 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
1 1 2 ++ --.. ++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!num1 num1 num2 true true false false true true false false num1 true false false true (precedence), (associativity), 10
V.. : if 3. if~else if () { ;; else { ; ; () if ( x > y ) { alert( "x!!" ) ; else { alert( "y!!" ) ; switch. switchif. : break. default. switch () { case label : 1 ; 11
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
VII.?.,.. i.... ii.. function.(function,.) 1. 2., function (1, ---,n) { ; (1, ---,n); 3., (Function).. 13
, (,),,. 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
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
alert("[]!!"); jump = confirm("?") if (jump){ location.href = "http://www.naver.com"; else{ document.write("<h1>!! </H1>"); </script> 3. prompt(),. null. prompt( "? ", name) ;. 4. eval() : prompt number() String().. "2+3" eval "5".. 16
VII. (Object) 1.. (Object)? HTML (Object)..,,,. 2. :, document (bgcolor), (title),. 3. (Method)?. (window.open()) (history.go(-1)) open() go().,,,.....,...,,... 4. :, Date, String Number Browser DOM Document 5. 17
Object (parent) (child) sibling dot(.). dot(.). 1. 2. (.) 18
! window,, 19
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
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.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
history 1. location 23
image event () - http://www.w3schools.com/jsref/dom_obj_event.asp 24
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.......... 3. 25
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
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
// :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
Math 1. 29
Screen,, VIII. 1. : 30
,,. <script>~ </script>, HTML, form, image, link HTML, <body>,, <input>,, <a href>. function, HTML function 3. inline DOM2 4. onload/onunload,,,. 31
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