Embed Size (px)
DESCRIPTION
W3_JavascriptII
Citation preview
Statement : คำ��สั่��งแบบวนรอบ (loop) คำ��สั่��งวนรอบเป็�นก�รทำ��ง�นซ้ำ���ๆ จนหยุ�ดเมื่��อเง��อนไข
เป็�นเทำ จ(ไป็ต�มื่เง��อนไข) ป็ระกอบด#วยุ
for while do .. while
Statement : คำ��สั่��งแบบวนรอบ for
for ใช้#สั่��หร�บวน loop หร�อไป็เร��อยุๆต�มื่จ��นวนรอบทำ&�ก��หนด ต#องร' #จ��นวนรอบทำ&�แน(นอนfor (ตั�วแปร = ค่าเร� มตั�น ; เงื่� อนไขการหยุ�ด ; เพิ่� มค่าให�ตั�วแปร)
{ ชุ�ดค่�าสั่� งื่;
}
for (var i=0;i<9;i++) {document.write(i+"<br>");}
ร ปแบบ
Statement : คำ��สั่��งแบบวนรอบ for
ต�วอยุ(�ง -> ทำดลองเข&ยุน for.html
for1.html
for (var i=0;i<=9;i++) { document.write(i+"<br>");}for (var i=9;i>=0;i--) { document.write(i+"<br>");}
Statement : คำ��สั่��งแบบวนรอบ while while -> ทำ��ง�นขณะทำ&�เง��อนไขเป็�นจร+ง และทำ��ซ้ำ���
ไป็เร��อยุๆจนเง��อนไขเป็�นเทำ จ ใน loop while จะต#องมื่&ก�รเป็ล&�ยุนแป็ลงคำ(�ทำ&�ใช้#ตรวจ
สั่อบเง��อนไข
ต�วอยุ(�ง while.html
while (condition) { ชุ�ดค่�าสั่� งื่; }
i=0;while (i<9) {
document.write(i+"<br>");i++;}
ร ปแบบ
Statement : คำ��สั่��งแบบวนรอบ while *** ต�วอยุ(�ง test4-4.html ก�รร�บคำ(�มื่�กกว(� 0 ถ้#�ป็-อน 0
จะจบ loop i=prompt(“Enter any number (0=exit)",0);while (i!=0){
document.write(i);
document.write("<BR>");i=prompt(“Enter any
number (0=exit)",0);}
Statement : คำ��สั่��งแบบวนรอบ do .. while
do while จะเป็�นก�รวน loop คำล#�ยุ while แต(จะทำ��ง�นก(อนคำ(อยุตรวจสั่อบเง��อนไข จะทำ��ง�นอยุ(�งน#อยุ 1 รอบเสั่มื่อ
ต�วอยุ(�ง do.html
do { ช้�ดคำ��สั่��ง; } while (condition);
i=0;do{
document.write(i+"<br>");
i++;} while (i<9);
ร ปแบบ
Statement : สั่ร�ป็ โป็รแกรมื่แบบมื่&เง��อนไข
if...else, switch คำ��สั่��งแบบวนรอบ (loop)
for, while, do .. while
5. ฟั#งื่ก$ชุ� น (Function)
ฟั#งื่ก$ชุ� นคำ�อ ช้�ดของคำ��สั่��ง ทำ&�รวมื่เข#�ด#วยุก�นเป็�นกล�(มื่ ๆ เพื่��อเร&ยุกใช้#ง�น โดยุมื่&ป็ระโยุช้น0คำ�อ ไมื่(ต#องเข&ยุนช้�ดคำ��สั่��งซ้ำ���ๆ ก�นในโป็รแกรมื่เด&ยุวก�น แบ(งโป็รแกรมื่เป็�นสั่(วนๆ ง(�ยุในก�รพื่�ฒน� แก#ไข ป็ร�บป็ร�ง สั่�มื่�รถ้น�� function ทำ&�มื่&อยุ'(มื่�ใช้#ก�บโป็รแกรมื่อ��นได#
5. ฟั#งื่ก$ชุ� น (Function) :
. function ชุ� อฟั#งื่ก$ชุ� น() {
ชุ�ดค่�าสั่� งื่;}
ร ปแบบ
function sawasdee() {
document.write("<br>");
document.write(“written by sawasdee fn.");
document.write("<br>");}
ตั�วอยุางื่
5. ฟั#งื่ก$ชุ� น : ก�รสั่(งคำ(�ให# Function สั่(งคำ(�(parameter)เข#�ไป็เพื่��อคำ��นวณ สั่(งได#
หล�ยุคำ(�โดยุใช้# comma คำ��นfunction ชุ� อฟั#งื่ก$ชุ� น(p1,p2,p3,…,pn) {
ชุ�ดค่�าสั่� งื่;}
ร ปแบบ
function add(a,b,c) {
document.write(a+"+"+b+"+"+c+"=" );
document.write(a+b+c);
document.write("<br>");}
ตั�วอยุางื่function-add.html
5. ฟั#งื่ก$ชุ� น : ก�รสั่(งคำ(�กล�บจ�ก Function
ต�วอยุ(�ง code5-3.html
return ค่าที่& จะสั่งื่กลั�บ;
ร ปแบบ
function power2(n){
return n*n;}
5. ฟั#งื่ก$ชุ� น : สั่ร�ป็ ก�รเร&ยุกใช้# Function ก�รสั่(งคำ(�ให# Function ก�รสั่(งคำ(�กล�บจ�ก Function
7. เหต�ก�รณ0 (Event) Events คำ�อเหต�ก�รณ0ต(�งทำ&�เก+ดข2�นก�บ Object
ก�รกดป็�3มื่ Mouse หน#� Web Page ถ้'ก loaded ป็�3มื่ต(�งๆ ถ้'กกด เช้(น Submit Button
Event Handle คำ�อเมื่��อเก+ดเหต�ก�รณ0แล#วเร&ยุก function มื่�ตอบสั่นองเหต�ก�รณ0น��นๆ
ต�วอยุ(�ง- onMouseOver.html
<a href="" onMouseOver="alert('Mouse Over Me!!!')"> OnMouseOver </a>
7. Event :event อ��นๆ
ต�วอยุ(�ง- code7-1.html แสั่ดง Onload และ OnUnload- events.html แสั่ดง event ต(�งๆ
onAbort -- เก+ดข2�นเมื่��อหยุ�ดถ้2งข#อมื่'ลร'ป็ภ�พื่กระทำ�นห�น
onBlur -- เก+ดข2�นเมื่��อออกจ�กจ�ดสั่นใจonChange -- เก+ดข2�นเมื่��อ text field มื่&ก�ร
เป็ล&�ยุนแป็ลงonClick -- เก+ดข2�นเมื่��อคำล+กไอเทำ มื่onError -- เก+ดข2�นไมื่(สั่�มื่�รถ้ถ้2งข#อมื่'ล document หร�อ
ภ�พื่ได#ถ้'กต#องonFocus -- เก+ดข2�นเมื่��อไอเทำ มื่ได#ร�บก�รสั่นใจonLoad -- เก+ดข2�นเมื่��อ document หร�อ ภ�พื่ถ้'กด2งเสั่ร จ
แล#วonMouseOver -- เก+ดข2�นเมื่��อเล��อนเมื่�สั่0อยุ'(เหน�อไอเทำ
มื่น��นแล#วonMouseOut -- เก+ดข2�นเมื่��อเล��อนเมื่�สั่0ออกจ�กไอเทำ
มื่น��นonSelect -- เก+ดข2�นเมื่��อเล�อกข#อคำว�มื่ใน ไอเทำ มื่ textareaOnSubmit -- เก+ดข2�นเมื่��อ ไอเทำ มื่ submit ถ้'กกดOnUnload -- เก+ดข2�นเมื่��อยุกเล+กด2งข#อมื่'ล
document หร�อ ออกจ�ก document
7. Event : onBlur
ตอบสั่นองต(อเหต�ก�รณ0เมื่��อ object บน form ออกจ�กจ�ดสั่นใจ<HTML><HEAD><TITLE>TEST</
TITLE></HEAD><BODY><FORM name="form1"><INPUT TYPE="text" NAME="test" onblur="alert('test onBlur1')"><INPUT TYPE="text" NAME="test1" onblur="alert('test onBlur2')"> </FORM></BODY></HTML>
7. Event : onChange ตอบสั่นองต(อเหต�ก�รณ0เมื่��อ object บน form เก+ด
ก�รเป็ล&�ยุนแป็ลง<HTML><HEAD><TITLE>TEST</TITLE></HEAD><BODY><FORM name="form1"><INPUT TYPE="text" NAME="test" value="100" onChange="alert('Value change to '+this.value)"> </FORM></BODY></HTML>
7. Event : onClick ตอบสั่นองต(อเหต�ก�รณ0เมื่��อมื่& mouse มื่�คำล+5ก
object ของ form<HTML><HEAD> <TITLE>TEST</TITLE><script>
function sum(){s1 = (document.form1.test.value*1)
+ (document.form1.test1.value*1) ;alert("Sum = "+s1);
}</script> </HEAD> <BODY><FORM name="form1">a = <INPUT TYPE="text" NAME="test" value="100"> <br> b = <INPUT TYPE="text" NAME="test1" value="100"> <INPUT TYPE="button" value="calc" onClick="sum();"></FORM> </BODY> </HTML>
7. Event : onError
ด�กจ�บเมื่��อเก+ดข#อผิ+ดพื่ล�ดใดๆ เช้(นไมื่(สั่�มื่�รถ้ load ภ�พื่
<HTML><HEAD><TITLE> New Document </TITLE></HEAD><BODY><INPUT TYPE="image" SRC="testOnAbort1.jpg" width="80%" width="80%" onerror="alert('Can not find image')"></BODY></HTML>
7. Event : onLoad , OnUnload ตอบสั่นองต(อเหต�ก�รณ0เมื่��อมื่&ก�ร load หน#� page
ต#องเข&ยุนใน <BODY>
code7-1.html
<HTML><HEAD><TITLE>Onload OnUnload</TITLE></HEAD><BODY onload="alert('Hello')" onunload="alert('Bye Bye!')">Handling load Event</BODY></HTML>
7. Event : onMouseOut , OnMouseOver
ตอบสั่นองต(อเหต�ก�รณ0เมื่��อมื่&ก�รเล��อน mouse ออก/เข#� ใน object ทำ&�ก��หนดไว#
<HTML><HEAD><TITLE> New Document </TITLE></HEAD><BODY><a href="" onMouseOver="alert('Mouse Over Me!!!')" onMouseOut="alert('Mouse Out!!!')"> OnMouseOver , OnMouseOut</a></BODY></HTML>
7. Event : onReset
เข&ยุนภ�ยุใต# tag <form>
<HTML><HEAD><TITLE>TEST</TITLE></HEAD><BODY><FORM name="form1" onreset="alert('reset data');">a = <INPUT TYPE="text" NAME="test"> <br> b = <INPUT TYPE="text" NAME="test1" > <br><INPUT TYPE="reset" value="reset all" ></FORM></BODY></HTML>
7. Event : onSelect
ตอบสั่นองต(อเหต�ก�รณ0เมื่��อมื่&ก�รเล�อกข#อคำว�มื่ในเทำ กฟิ8ลด0
<HTML><HEAD><TITLE>TEST</TITLE></HEAD><BODY><FORM name="form1"><INPUT TYPE="text" NAME="test" onselect="alert('you select data')">
</FORM></BODY></HTML>
7. Event : onSubmit
เก+ดเมื่��อมื่&ก�รสั่(งข#อมื่'ลไป็ด��เน+นก�ร เข&ยุนภ�ยุใต# <FORM>
<HTML><HEAD><TITLE>TEST</TITLE></HEAD><BODY><FORM name="form1" onSubmit="alert('submit this page')">a = <INPUT TYPE="text" NAME="test" value="100"> <br> b = <INPUT TYPE="text" NAME="test1" value="100"> <INPUT TYPE="submit" value="submit"></FORM></BODY></HTML>
สั่�งื่เกตัที่& address bar
7. Event (JavaScript1.2) : onDblClick
กด Double Click Mouse
<HTML><HEAD><TITLE>TEST</TITLE></HEAD><BODY><FORM name="form1"><INPUT TYPE="button" value="Button" onDblClick="alert('Double Click')"></FORM></BODY></HTML>
7. Event (JavaScript1.2) : onKeyPress
ตอบสั่นองต(อเหต�ก�รณ0เมื่��อมื่&ก�รพื่+มื่พื่0 ต�วอ�กษรลงช้(องร�บข#อมื่'ล
<HTML><HEAD><TITLE>TEST</TITLE></HEAD><BODY><FORM name="form1"><INPUT TYPE="text" NAME="test" onKeyPress="alert('you type charactor onKeyPress')"> </FORM></BODY></HTML>
7. Event (JavaScript1.2) : onKeyDown
ตอบสั่นองต(อเหต�ก�รณ0เมื่��อมื่&ก�รกด แป็-นพื่+มื่พื่0ลงช้(องร�บข#อมื่'ล
<HTML><HEAD><TITLE>TEST</TITLE></HEAD><BODY><FORM name="form1"><INPUT TYPE="text" NAME="test" onKeyDown="alert('you type charactor onKeyDown')"> </FORM></BODY></HTML>
7. Event (JavaScript1.2) : onKeyUp
ตอบสั่นองต(อเหต�ก�รณ0เมื่��อมื่&ก�รป็ล(อยุ แป็-นพื่+มื่พื่0ลงช้(องร�บข#อมื่'ล
<HTML><HEAD><TITLE>TEST</TITLE></HEAD><BODY><FORM name="form1"><INPUT TYPE="text" NAME="test" onKeyUp="alert('you type charactor onKeyUp')"> </FORM></BODY></HTML>
7. Event (JavaScript1.2)
onMouseDown ตอบสั่นองต(อเหต�ก�รณ0เมื่��อมื่&ก�รกดป็�3มื่เมื่#�สั่0ลงบน
object ทำ&�ก��หนด onMouseMove
ตอบสั่นองต(อเหต�ก�รณ0เมื่��อมื่&ก�รเคำล��อนทำ&เมื่#�สั่0ไป็มื่�บน object ทำ&�ก��หนด
onMouseUp ตอบสั่นองต(อเหต�ก�รณ0เมื่��อมื่&ก�รกดป็�3มื่เมื่#�สั่0ลงบน
object ทำ&�ก��หนดแล#วป็ล(อยุ mouse ต�วอยุ(�ง onMouse.html
7. Event (JavaScript1.2) : onResize
ตอบสั่นองต(อเหต�ก�รณ0เมื่��อมื่&ก�รเป็ล&�ยุนขน�ด window
<HTML><HEAD><TITLE>TEST</TITLE></HEAD><BODY onresize="alert('window resize')">onresize</BODY></HTML>
7. Event : ก�รด�กจ�บ event 1. ใสั่(ใน HTML Tag
event onClick สั่�มื่�รถ้เข&ยุนต�วเล กหร�อใหญ่(ก ได# (test7-1.html)
2. เร&ยุก property ของ Object
event onclick เข&ยุนด#วยุต�วเล ก (test7-2.html)
<INPUT TYPE="BUTTON" NAME="clickMe" VALUE="Click Me!" onclick="alert('Mouse Click Me!!!')" >
document.form1.clickMe.onclick =click1;
ต�วอยุ(�ง code7-2.html
7. Event : ต�วอยุ(�งก�รใช้#ง�น Event
ตั�วอยุางื่การประยุ�กตั$ใชุ�ก�บ Radio Button<FORM>
<p>HTML เป็�นคำ��ยุ(อของ ? <p> 1: <INPUT TYPE="radio" NAME="radio" value="เก(งมื่�กคำร�บ"onClick="alert(value)“>HyperText Markup Language <br>2: <INPUT TYPE="radio" NAME="radio" value="แน(ใจหร�อคำร�บว(�ถ้'ก ลองด'ใหมื่(สั่+คำร�บ"onClick="alert(value)“>HyperText Making Language <br>3: <INPUT TYPE="radio" NAME="radio" value="แน(ใจหร�อคำร�บว(�ถ้'ก ลองด'ใหมื่(สั่+คำร�บ"onClick="alert(value)“>HyperText Marking Learning </FORM>
test7-3.html
7. Event : ต�วอยุ(�งก�รใช้#ง�น Event
ตั�วอยุางื่การประยุ�กตั$ใชุ�ก�บ Button
<form><p>HTML เป็�นคำ��ยุ(อของ ? <p>1: <input type="button" name="button" value= " HyperText Markup Language " onClick="alert('เก(งมื่�กคำร�บ'); return true"><p>2: <input type="button" name="button" value= " HyperText Marking Language " onClick="alert('ลองด'อ&กทำ&สั่+คำร�บ'); return true"><p>3: <input type="button" name="button" value= " ไมื่(ทำร�บ!! " onClick="alert('เฮ้#อ แยุ(จ�งเลยุ!!'); return true"></form>
test7-4.html
7. Event : สั่ร�ป็ Event ต(�งๆ ก�รด�กจ�บ Even
8. Window Object window -> หน#�ต(�งทำ&�ใช้#แสั่ดง web
page เป็�น Object ระด�บสั่'งสั่�ด object อ��นๆเป็�น property ของ object window
Object document window.document.write->document.write (ละคำ��
window ได#)
8. object window : เป็8ดหน#�ต(�งใหมื่( ต#องก�รเป็8ดหน#� window ด'เน��อห�ใหมื่( โดยุ
เน��อห�เด+มื่ยุ�งอยุ'( ร'ป็แบบ
variable = ช้��อ object ของ window url = จ�ดหมื่�ยุป็ล�ยุทำ�ง name = ช้��อของ window ทำ&�ใช้#อ#�งอ+งในสั่(วน HTML
เช้(นใช้#ใน target=“” ของ tag <a></a> option (หน#�ถ้�ดไป็)
variable = open(url,name,[option])
ตัารางื่ option ของื่เมธอตั open
option ค่�าที่& เป+นไปได� ค่วามหมายุtoolbar yes/no (1/0) มื่& toolbar หร�อไมื่(location yes/no แสั่ดง location หร�อไมื่(directories yes/no มื่& directory button หร�อไมื่(status yes/no มื่& statusbar หร�อไมื่(menubar yes/no มื่& menubar หร�อไมื่(scrollbar yes/no มื่& scrollbar หร�อไมื่(resizeable yes/no เพื่+�มื่, ลดขน�ดของ window ได#หร�อไมื่(width Integer คำว�มื่กว#�งของ window ในหน(วยุพื่+กเซ้ำลheight Integer คำว�มื่สั่'งของ window ในหน(วยุพื่+กเซ้ำลouterwidth Integer outer width ของ window
outerheight Integer Outer height ของ window
left Integer ระยุะทำ�งจ�ก ขอบซ้ำ#�ยุของหน#�จอTop Integer ระยุะทำ�งจ�ก ขอบบนของหน#�จอ
8. object window : เป็8ดหน#�ต(�งใหมื่( ต�วอยุ(�ง : ก�รเป็8ด window
ต�วอยุ(�ง : ก�รป็8ด window
win2=window.open("code8-2.html","smwin","height=100,width=200,status=0,menubar=1,scrollbar=0");
win2.close();
code8-1.html , code8-2.html
win2=window.open("code8-2.html","smwin");
8. object window : เป็8ดหน#�ต(�งใหมื่(
code8-1.html code8-2.html
window
win2
open
window
code8-1 มองื่ object window ของื่ code8-2 -> win2
code8-2 มองื่ object window ตั�วเองื่ -> window
window.opener
8. object wi ndow : method ต+ดต(อก�บ User window method -> alert , confirm ,
prompt alert() แสั่ดงข#อคำว�มื่เป็�น dialog box
confirm() แสั่ดงข#อคำว�มื่เป็�นป็�3มื่ ok, cancel return คำ(�เป็�น logical [True,False]
alert("alert message");ร'ป็แบบ
result = confirm("confirm message");ร'ป็แบบ
8. object wi ndow : method ต+ดต(อผิ'#เยุ&�ยุมื่ช้มื่ prompt() – ถ้�มื่เพื่��อร�บคำ(�ข#อมื่'ล
return คำ(�เป็�น string
ต�วอยุ(�ง code8-3.html , code8-4.html แบบฝึ=กห�ด
1. เข&ยุนโป็แกรมื่โดยุใช้# method confirm() ร�บคำ(�เมื่��อกดป็�3มื่และแสั่ดงคำ(�คำ��ตอบโดยุใช้# method alert() ->test8-1.html
2. เข&ยุนโป็แกรมื่โดยุใช้# method prompt() ร�บคำ(�เมื่��อกดป็�3มื่และแสั่ดงคำ(�คำ��ตอบโดยุใช้# method alert() ->test8-2.html
result = prompt("message", "ค่าเร� มตั�น");ร'ป็แบบ
8. object wi ndow : สั่ร�ป็ เป็8ดหน#�ต(�งใหมื่( method ต+ดต(อก�บ User
