JavaSCript.

งานนำเสนอเรื่อง: "JavaSCript."— ใบสำเนางานนำเสนอ:

1 JavaSCript

2 JavaSCript เป็นภาษาสคริปต์เชิงวัตถุ (Object Oriented Programming)
ใช้งานร่วมกับภาษา HTML แปลและดำเนินงานทีละคำสั่ง (Interpreter) สามารถทำงานข้ามแพลตฟอร์มได้ ทำงานได้ทั้งฝั่งไคลเอนต์ (Client side script) และฝั่งเซิรฟ์เวอร์ (Server side script)

3 ข้อดี JAVA Script แบ่งเบาภาระการทำงานของเซิร์ฟเวอร์
ประมวลผลรวดเร็วเนื่องจากทำงานบนฝั่งไคลเอนต์ สามารถโต้ตอบกับผู้ใช้ได้ทันที เปลี่ยนจากเว็บเพจ HTML เป็น DHTML (Dynamic HTML) ทำให้เว็บเพจน่าสนใจมากขึ้น สามารถควบคุมให้เบราวเซอร์ทำงานตามที่ต้องการได้

4 ข้อเสีย JAVA Script ความปลอดภัยเนื่องจากเบราวเซอร์เปิดเผย Code Java script มี Bug แฝงอยู่ เช่น สั่ง alert a จาก var a= แปลและดำเนินงานทีละคำสั่ง (Interpreter) จึงทำงานได้ช้ากว่าโปรแกรมที่ compile เป็นภาษาเครื่อง (native code) บางอุปกรณ์ไม่รองรับการทำงานของภาษา JavaScript ไม่สามารถทำงานได้ทุกเบราวเซอร์ ไม่สามารถติดต่อกับฐานข้อมูลในฝั่งเซิร์ฟเวอร์

5 โครงสร้างภาษา JAVA Script
ประกาศการใช้งาน JavaScript ด้วย TAG JAVA Script ซึ่งประกอบด้วยดังนี้ (1) <SCRIPT>……</SCRIPT> (2)<SCRIPT  type="text/javascript" ……</SCRIPT> (3)<script language="javascript" type="text/javascript"> </script> (4) <SCRIPT LANGUAGE="JavaScript"> ……</SCRIPT>

6 การเรียกใช้ไฟล์ JavaScript
การเรียกใช้ไฟล์ JavaScript โดยการกำหนดคุณสมบัติ SRC="ชื่อ file" โดยไฟล์จะบันทึกเป็นนามสกุล .js เช่น <script src="javascript.js"></script> <script type="text/javascript" src="javascript.js"></script> <SCRIPT LANGUAGE="JAVAScript" SRC=“javascript.js">

7 การใช้งาน JavaSCript แทรก Tag Script ใน Tag HEAD
แทรก Tag Script ใน Tag Body แทรกคำสั่งใน event ของเครื่องมือในเว็บไซต์ เช่น onLoad, onClick ฯลฯ. สร้างไฟล์ JavaScript แล้วเรียกใช้

8 การแทรกคำอธิบาย คำอธิบายหนึ่งบรรทัด ใช้สัญลักษณ์ //
<SCRIPT LANGUAGE="JavaScript"> Document.write("Hello World"); // Comment Here </SCRIPT> คำอธิบายหลายบรรทัด ใช้สัญลักษณ์ /* เป็นจุดเริ่มต้น และสิ้นสุดด้วย */ /* Comment 1 Comment 2 Comment 3 */

9 ตัวอย่างงานที่ใช้ JAVA Script
เมนู เครื่องคิดเลข ปฏิทิน, รูปภาพ, ตัวอักษรวิ่ง,เปิด ปิด ย้ายตำแหน่ง Windows เกมส์ ตรวจสอบความถูกต้องของแบบฟอร์มที่ผู้ใช้กรอก

10 ตัวแปรภาษา JavaScript

11 ตัวแปรภาษา JavaScript
ตัวแปร (variable) หมายถึง ชื่อหรือสัญลักษณ์ที่กำหนดขึ้นเพื่อเก็บค่าต่างๆ ในหน่วยความจำ ตัวแปรในภาษา JavaScript มีขนาดตามชนิดและค่าของข้อมูล ค่าในตัวแปรสามารถเปลี่ยนแปลงได้ตามคำสั่งในการประมวลผล

12 การตั้งชื่อตัวแปรภาษา JavaScript
จะต้องขึ้นต้นด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์ใหญ่หรือพิมพ์เล็ก เครื่องหมาย underscore (_) หรือเครื่องหมาย dollar sign ($) เท่านั้น ในชื่อของตัวแปรต้องไม่มีเว้นวรรค (ช่องว่าง) ตัวอักขระตำแหน่งอื่นๆ ของตัวแปร สามารถใช้ตัวพิมพ์เล็กหรือตัวพิมพ์ใหญ่ ตัวเลข (0-9) เครื่องหมาย underscore (_) และเครื่องหมาย dollar sign ($) เท่านั้นห้ามใช้เครื่องหมายอื่น มีลักษณะเป็น case sensitive คือ ตัวพิมพ์เล็กกับตัวพิมพ์ใหญ่มีค่าต่างกัน ห้ามซ้ำกับคำสงวน (reserved word)

13 คำสงวนในภาษา JavaScript
abstract boolean break byte case catch char class const continue default delete debugger do double else enum export extends FALSE final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throws transient TRUE try var void volatile while with

14 การประกาศตัวแปร การประกาศตัวแปรมีรูปแบบดังนี้ รูปแบบที่ 1
var ชื่อตัวแปร; รูปแบบที่ 2 var ชื่อตัวแปร = ค่าเริ่มต้น; กรณีการประกาศค่าตัวแปรหลายๆ ตัวในบรรทัดเดียวกันใช้เครื่องหมายคอมม่า (,) คั่นระหว่างตัวแปร เช่น var a,b;

15 ตัวอย่างการประกาศตัวแปร
var name , address ; var country = "Thailand" ; var answer = 20;

16 ตัวแปรอะเรย์ (array) หมายถึงตัวแปรชุดที่สามารถเก็บค่าได้หลายๆ ค่า โดยใช้ตัวแปรตัวเดียว สิ่งที่อยู่ภายในอะเรย์เรียกว่าสมาชิก แต่ละสมาชิกในอะเรย์จะมีหมายเลขเพื่อใช้อ้างอิง หรืออินเด็กซ์ (Index) อินเด็กซ์อะเรย์จะเริ่มต้นที่ 0 สามารถกำหนดขนาดของอะเรย์ในหน่วยความจำโดยอัตโนมัติ

17 การสร้างตัวแปรชนิดอะเรย์
ชื่อตัวแปร = new array(จำนวนสมาชิก); โดยจำนวนสมาชิกคือ จำนวนสมาชิกที่ต้องการจะเก็บ หรือขนาดของอะเรย์ ตัวอย่างเช่น product = new array(5); (หมายถึงการการประกาศให้ตัวแปร product เป็นตัวแปรแบบชนิดอะเรย์โดยมีจำนวนสมาชิก 5 ตัว) product[1] =“500”; (หมายถึงกำหนดให้ตัวแปร product อินเด็กซ์ที่ 1 มีค่าเท่ากับ “500”)

18 นิพจน์และตัวดำเนินการ

19 นิพจน์ (Expression) เป็นชุดของตัวแปร ค่าคงที่ และ ตัวดำเนินการ เครื่องหมายคำนวณทางคณิตศาสตร์ หรือ ตัวนิพจน์เอง เชื่อมต่อด้วย ตัวดำเนินการ มีผลลัพธ์ให้เกิดข้อมูลใหม่ๆ ขึ้นมา นิพจน์ใน JAVA Script มี 3 ชนิด คือ 1. นิพจน์ทางคณิตศาสตร์ คือการนำเครื่องหมายทางคณิตศาสตร์มาเชื่อมโยงค่าตัวแปร ค่าคงที่ ผลลัพธ์ที่ได้เป็นตัวเลข 2. นิพจน์ตรรกะ (logic) จะทำงานเกี่ยวกับทางด้านตรรกศาสตร์ที่ใช้เครื่องหมายเปรียบเทียบ เช่น = , < , > ผลลัพธ์ที่ได้มีค่าเป็นจริง หรือเท็จ 3. นิพจน์ข้อความ (string) จะทำงานเกี่ยวกับข้อความ ในลักษณะต่างๆ เช่น การรวมคำ แสดงผลข้อความ

20 ตัวดำเนินการในภาษา JavaScript
เป็นเครื่องหมายหรือวิธีการกระทำระหว่างข้อมูล เพื่อให้ได้ผลลัพธ์ตามต้องการ เช่น การคำนวณทางคณิตศาสตร์ การเปรียบเทียบ ข้อมูลที่ถูกกระทำ เรียกว่า โอเปอร์แรนด์ (Operand) ตัวดำเนินการในภาษา JavaScript ประกอบด้วย ตัวดำเนินการทางคณิตศาสตร์ ตัวดำเนินการเปรียบเทียบ ตัวดำเนินการทางตรรกะ ตัวดำเนินการเชิงข้อความ ตัวดำเนินการกำหนดค่า ตัวดำเนินการเพิ่มค่าและลดค่า

21 ตัวดำเนินการทางคณิตศาสตร์
เครื่องหมาย ความหมาย + บวก - ลบ * คูณ / หาร % หารเอาเศษ ++ เพิ่มค่าครั้งละ 1 -- ลดค่าครั้งละ 1

22 ตัวดำเนินการเปรียบเทียบ
เครื่องหมาย ความหมาย เท่ากับ = = ไม่เท่ากับ != มากกว่า > มากกว่าเท่ากับ >= มากกว่าหรือเท่ากับ น้อยกว่า < น้อยกว่าเท่ากับ <= น้อยกว่าหรือเท่ากับ

23 ตัวดำเนินการทางตรรกะ
เครื่องหมาย ความหมาย And && และ จะเป็นจริงเมื่อเป็นจริงทั้งสอง Or || หรือ จะเป็นจริงเมื่อฝั่งใดฝั่งหนึ่งเป็นจริง และเป็นเท็จเมื่อเท็จทั้งคู่ Not ! ไม่ จะกลับค่าจริงเป็นเท็จ และกลับค่าเท็จเป็นจริง

24 ตัวดำเนินการเชิงข้อความ
ใช้สำหรับการเชื่อมตัวแปร หรือข้อมูลชนิดข้อความ เป็นข้อความเดียวกัน ได้แก่เครื่องหมายบวก (+) เช่น Mystring = " I like " + " Bangkok "

25 ตัวดำเนินการกำหนดค่า
การดำเนินการ = กำหนดค่าตัวแปรซ้ายมือให้มีค่าเท่ากับค่าทางขวามือ += การเพิ่มค่าข้อมูลทางขวามือให้กับตัวแปรทางซ้ายมือ -= การลบค่าตัวแปรทางซ้ายมือด้วยค่าทางขวามือ *= การคูณค่าตัวแปรทางซ้ายมือด้วยค่าทางขวามือ %= การนำเศษที่ได้จากการนำตัวแปรทางซ้ายหารทางขวากำหนดให้กับตัวแปรซ้ายมือ

26 คำสั่งควบคุมการทำงานของภาษา JavaScript

27 1. การตรวจสอบเงื่อนไขด้วยคำสั่ง if
1.1 รูปแบบที่ 1 ตรวจสอบเงื่อนไขกรณีมีทางเลือกเดียว ถ้าเงื่อนไขเป็นจริงให้ดำเนินการคำสั่งภายใต้วงเล็บปีกกา แต่ หากเงื่อนไขเป็นเท็จจะไม่ดำเนินการใดๆ โดยมีรูปแบบคำสั่งดังนี้ if (expression) { statements } ตัวอย่าง var a = 5; if (a==5) { document.write(a); }

28 1. การตรวจสอบเงื่อนไขด้วยคำสั่ง if
1.2 รูปแบบที่ 2 ตรวจสอบเงื่อนไขกรณี 2 ทางเลือก ถ้าเงื่อนไขเป็นจริง ให้ทำตามกลุ่มคำสั่งกรณีเป็นจริงในวงเล็บปีกกาหลังคำสั่ง if แต่ถ้าเงื่อนไขเป็นเท็จให้ดำเนินการคำสั่งหลังคำสั่ง else โดยมีรูปแบบคำสั่งดังนี้ if (expression) { statements } else ตัวอย่าง var a = 3; var b = 2; if (a==b) { document.write(" It is true "); } { document.write(" It is false "); }

29 1. การตรวจสอบเงื่อนไขด้วยคำสั่ง if
1.2 รูปแบบที่ 3 ตรวจสอบเงื่อนไขกรณีมากกว่า 2 ทางเลือกโดยตรวจสอบเงื่อนไขไปเรื่อยๆ (ตรวจสอบครั้งแรกจะใช้ if ตรวจสอบครั้งต่อไปจะใช้ else if) หากตรวจสอบแล้วตรงกับเงื่อนไขใดก็จะทำตามกลุ่มคำสั่งหลังเงื่อนไขนั้นๆ แต่ถ้าตรวจสอบทุกเงื่อนไขแล้วไม่ตรงกับเงื่อนไขใดๆ เลย ก็จะทำตามกลุ่มคำสั่งหลังคำสั่ง else โดยมีรูปแบบคำสั่งดังนี้ if (expression) { statements } else if else

30 1. การตรวจสอบเงื่อนไขด้วยคำสั่ง if
1.2 รูปแบบที่ 3 (ต่อ) ตัวอย่าง var a=2; var b=3; if (a==b) { document.write(" a เท่ากับ b "); } else if (a>b) { document.write("a มากกว่า b"); } else { document.write("a น้อยกว่า b"); }

31 2. โครงสร้างแบบ switch เป็นคำสั่งสำหรับตรวจสอบทางเลือกอย่างใดอย่างหนึ่งจากหลายทางเลือก จะทำการตรวจสอบเงื่อนไขว่าตรงกับตัวเลือกใด แล้วจึงดำเนินการตามคำสั่งที่ต่อท้ายทางเลือกนั้นๆ โดยมีรูปแบบคำสั่งดังนี้ switch (expression) { case label1 : statements; break; case label2 : …. default : statements }

32 2. โครงสร้างแบบ switch ตัวอย่าง a = 2; b = 1;
switch (result = a * b) { case 1: document.write("1"); break ; case 2 : document.write("2"); case 3 : document.write("3"); }

33 3. การวนซ้ำหรือทำซ้ำ ตัวอย่าง
3.1 คำสั่ง for เป็นคำสั่งที่ใช้ในการประมวลผลวนซ้ำที่มีจำนวนรอบที่แน่นอน โดยจะกำหนดจุดเริ่มต้นที่ใช้วนซ้ำและจุดที่หยุดวนซ้ำในตอนเริ่มต้น จากนั้นดำเนินการตามค่าที่กำหนดให้เพิ่มหรือลดในการนับจำนวนรอบ จะทำงานจนเงื่อนไขเป็นเท็จ ถึงจะหยุดการวนซ้ำโดยมีรูปแบบการใช้งานดังนี้ for ([initial condition];[condition];[update expression]) { statements; } ตัวอย่าง for (i=1 ; i < 10 ; i++) { document.write(i+"<BR>"); }

34 3. การวนซ้ำหรือทำซ้ำ ตัวอย่าง
3.2 คำสั่ง While เป็นคำสั่งที่ใช้ประมวลผลการวนซ้ำแบบมีจำนวนวนรอบที่ไม่แน่นอน อาจจะมีการวนซ้ำหรือไม่มีก็ได้ เนื่องจากก่อนการวนซ้ำจะมีการตรวจสอบเงื่อนไข หากเงื่อนไขเป็นจริงจึงจะวนซ้ำและหากเงื่อนไขเป็นเท็จจะไม่เข้าทำงานในลูป การวนซ้ำจะหยุดก็ต่อเมื่อเงื่อนไขเป็นเท็จ โดยมีรูปแบบการใช้งานดังนี้ while (condition) { statements; } ตัวอย่าง a = 1 while (a < 5) { document.write(a+"<BR>"); a = a + 1; }

35 3. การวนซ้ำหรือทำซ้ำ ตัวอย่าง
3.3 คำสั่ง do..while เป็นคำสั่งที่ใช้ในการประมวลผลแบบการวนซ้ำ โดยจะทำงานคำสั่งในลูปอย่างน้อยหนึ่งรอบแล้วจึงทำการตรวจสอบเงื่อนไข หากเงื่อนไขเป็นจริงจึงกลับไปวนซ้ำ และหากเงื่อนไขเป็นเท็จก็จะหยุดการวนซ้ำ โดยมีรูปแบบการใช้งานดังนี้ do { statements; } while (condition) ตัวอย่าง a = 1 { document.write(a+"<BR>"); a = a + 1; }while (a < 5)

36 4.คำสั่งประเภทกระโดดข้าม
คำสั่ง break เป็นคำสั่งให้ออกจากการทำงานของคำสั่ง switch…case, for, while, do..while ตัวอย่างการใช้งานคำสั่ง break <script language="javascript" type="text/javascript"> a = 1 do { document.write(a+"<BR>"); a = a + 1; if(a>3){break;} }while (a < 5) document.write("สิ้นสุดคำสั่งภาษา JavaScript"); </script>

37 4.คำสั่งประเภทกระโดดข้าม
คำสั่ง exit เป็นคำสั่งให้จบโปรแกรม โดยไม่สนใจคำสั่งที่เหลืออยู่ จะ<script language="javascript" type="text/javascript"> a = 1 do { document.write(a+"<BR>"); a = a + 1; if(a>3){exit;} }while (a < 5) document.write("สิ้นสุดคำสั่งภาษา JavaScript"); </script>

38 Function

39 Function รูปแบบ Function ที่ใช้ใน Java Script มี 2 แบบ คือ 1. Standard Function 2. User-defined Function

40 1. Standard Function เป็น Function มาตรฐานที่ Java Script กำหนดมาให้โดยสามารถนำไปใช้งานได้ทันที Function แบบนี้เป็นได้ทั้ง Method เช่น alert , write และ function สำเร็จรูป เช่น sqrt , parseInt การเรียกใช้ Function เพียงแค่เรียกชื่อ function ที่ต้องการใช้เท่านั้น ก็สามารถทำงานได้ แต่จะต้อง พิมพ์ตัวอักษรเล็ก – ใหญ่ ให้เหมือนกับที่กำหนด จะต้องลงท้ายด้วย ( ) ถ้าหาก function ไม่ส่งค่า argument ใดๆ

41 ตัวอย่างการใช้ Standard Function
<SCRIPT LANGUAGE="JavaScript"> function calc(myform) { var result = parseInt(myform.number1.value) + parseInt(myform.number2.value); document.form1.number3.value=result; } </SCRIPT> <FORM name="form1"> <INPUT TYPE="text" NAME="number1">+ <INPUT TYPE="text" NAME="number2">= <INPUT TYPE="text" NAME="number3"> <INPUT TYPE="button" onClick="calc(this.form)"> </FORM>

42 2. User-defined Function
โครงสร้าง function name ([param] , [param] , […,param]) { statements } โดยที่ name เป็น function ซึ่งต้องตั้งชื่อไม่ซ้ำกับ function ที่มีอยู่แล้ว param เป็นพารามิเตอร์สำหรับ รับ Argument แล้วส่งต่อไปยัง function สามารถมีหรือไม่มีก็ได้ และถ้ามีหลายตัวก็ใส่เครื่องหมาย , คั่น Statements เป็นคำสั่งต่างๆ ที่อยู่ภาย function

43 ตัวอย่างการใช้ User-Defined Function
<SCRIPT LANGUAGE="JavaScript"> function showmess() {document.write("<h1>Hello World</h1>");} showmess(); </SCRIPT>

44 การผ่านค่า Argument JavaScript สนับสนุนการส่งผ่านค่า Argument ให้กับ Function เพื่อนำไปประมวลผลภายใน function ได้ โดยเป็นลักษณะ Call by value คือ การเปลี่ยนแปลงค่า Argument ไม่มีผลต่อค่าพารามิเตอร์ที่ส่งออกไปจากผู้ใช้ การส่งผ่านค่า Argument ไปยัง function ถูกกำหนดไว้ด้วยพารามิเตอร์ของ function นั้น

45 ตัวอย่างการผ่านค่า Argument
<SCRIPT LANGUAGE="JavaScript"> function showmess(mess) { document.write(mess);} showmess("<h1>Hello World</h1>"); showmess("<h2>JavaScript</h2>"); showmess("<h3>HTML</h3>"); showmess("<h4>CSS</h4>"); </SCRIPT>

46 การคืนค่า function สามารถส่งคืนค่าไปยังโปรแกรมได้ โดยการใช้ return ตามด้วยค่าที่ต้องการส่งกลับ โดยโปรแกรมจะต้องมีตัวแปรมารับค่านี้ด้วย ตัวอย่างเช่น <SCRIPT LANGUAGE="JavaScript"> var result = CutString("Hello World", 4); alert(result); function CutString(text , num) { var textReturn = text.substring(text , num) ; return (textReturn); } </SCRIPT>

47 Event Handler

48 Event Handler เป็นการตอบสนองต่อเหตุการณ์ (event) ที่เกิดขึ้นจากที่ผู้ใช้กระทำ เช่น การคลิกเมาส์บนปุ่ม จะมีตัวจัดการที่เรียกว่า Event Handler เป็นตัวจัดการเหตุการณ์เกิดขึ้น โดยจะไปเรียกใช้งาน Script ให้ทำงานประเภทต่างๆ ได้ มีรูปแบบการใช้งานดังนี้ <TAGNAME eventHandler=“JavaScript Code”>

49 Event Handler ที่ใช้ใน Java Script
onAbort onBlur onChange onClick onError onFocus onLoad onMouseOut onMouseOver onReset onSelect onSubmit onUnload

50 Event Handler ที่ใช้งานกับ Object ประเภทต่างๆ
Select onBlur , onChange , onFocus Text onBlur , onChange , onFocus , onSelect Textarea Button onClick Checkbox Radio Link onClick , onMouseOver Document onLoad , onUnload Window Form onSubmit

51 Event Handler onClick เป็นการตอบสนองเมื่อผู้ใช้คลิกเมาส์ลงบน Object
เช่น ปุ่ม , หน้าเว็บเพจ,รูปภาพ,ข้อความ เป็นต้น

52 ตัวอย่างการใช้งาน Event Handler onClick
<SCRIPT LANGUAGE="JavaScript"> function sayHello(message) { alert("Hello " + message);} </SCRIPT> <FORM NAME="myform"> <INPUT TYPE="text" NAME="yourname" > <INPUT TYPE="button" VALUE="HELLO" onClick="sayHello(document.myform.yourname.value)"> <h1 onClick="sayHello()">Click here</h1> <table border="2" cellpadding="10px" onClick="sayHello('')"> <TR><TD>วันจันทร์</TD><TD>วันอังคาร</TD></TR> </table> <img src="img/a2.jpg" title="สีเหลืองสดใส" name="img1" onClick="sayHello(document.myform.img1.title)" width="50%" alt="รูปภาพสีเหลืองสดใส"> </FORM>

53 Event Handler onAbort เป็นการตอบสนองเมื่อผู้ใช้ขัดจังหวะการทำงานต่างๆ ของโปรแกรม เช่น กดปุ่ม Stop เพื่อยกเลิกการ load หน้าเว็บเป็นต้น ตัวอย่างเช่น <IMG SRC="0.jpg" onAbort="alert('You stopped loading the image')">

54 Event Handler onError Event Handler ตัวนี้จะทำงานเมื่อมีความผิดพลาดขึ้นในเว็บเพจหน้านั้น เช่น Browser ไม่สามารถจะ load หน้าเว็บขึ้นมาได้ ตัวอย่างเช่น <IMG SRC="0" onError="alert(Error Error Error')">

55 Event Handler onLoad จะทำงานทันทีที่มีการ Load window หรือ Frame สิ้นสุด โดยจะต้องเขียนคำสั่งภายใต้ Tag <BODY> หรือ <FRAMESET> ตัวอย่างเช่น <SCRIPT LANGUAGE="JavaScript"> function greeting() { alert("Welcome to my webpage") } </SCRIPT> <BODY onLoad="greeting()"> ... </BODY>

56 Event Handler onUnload
จะทำงานตรงข้ามกับ onLoad เมื่อผู้ใช้สิ้นสุดการทำงานของเว็บเพจ หรือปิดเว็บเพจหน้านี้ โดยจะต้องเขียนคำสั่งภายใต้ Tag <BODY> หรือ <FRAMESET> เช่นกัน ตัวอย่างเช่น <SCRIPT LANGUAGE="JavaScript"> function Bye() { alert("Thank you to visit our website ") } </SCRIPT> <BODY onUnload="Bye() "> ... </BODY>

57 Event Handler onFocus จะทำงานเมื่อ Object ที่กำหนดได้ focus พร้อมที่จะทำงานได้ เช่น Textbox จะมี Cursor ปรากฎขึ้นให้กรอกข้อความได้ ตัวอย่างเช่น <BODY> <INPUT TYPE="text" NAME="text1" onFocus="alert('You are focus on text1')"><BR> <INPUT TYPE="text" NAME="text2" onFocus="alert('You are focus on text2')"><BR> </BODY>

58 Event Handler onBlur จะทำงานเมื่อ Object อย่างเช่น text , textarea เสีย focus โดยจะนำมาใช้เมื่อต้องการยกเลิก focus ของ object ที่กำหนด ตัวอย่างเช่น <SCRIPT LANGUAGE="JavaScript"> function validForm(str) { alert(str) } </SCRIPT> <FORM name="myform"> <INPUT TYPE="text" NAME="number1" onBlur="validForm(this.value)"><BR> <INPUT TYPE="text" NAME="number2" onBlur="validForm(this.value)"> </FORM>

59 Event Handler onChange
จะทำงานเมื่อ เกิดการเปลี่ยนแปลงข้อมูลภายใน field ของ object ที่กำหนด ตัวอย่างเช่น <FORM NAME="myform"> <h1>Select Country </h1> <SELECT NAME="country" onChange=" alert('You are going to '+this.value);"> <OPTION VALUE="Thailand">Thailand</OPTION> <OPTION VALUE="Indonesia">Indonesia</OPTION> <OPTION VALUE="Vietnam">Vietnam</OPTION> <OPTION VALUE="Malaysia">Malaysia</OPTION> </SELECT> </FORM>

60 Event Handler onSelect
จะทำงานเมื่อ ผู้ใช้ทำการเลือกบางส่วนหรือทั้งหมดของข้อความใน Text หรือ Textarea ตัวอย่างเช่น <TEXTAREA ROWS="5" COLS="50" onSelect="alert('You are selecting text in this textarea')"> Testing data for selection in textarea. </TEXTAREA>

61 Event Handler onMouseOver / onMouseOut
onMouseOver จะทำงานเมื่อผู้ใช้เลื่อนเมาส์ไปทับพื้นที่ของ Object ที่กำหนด onMouseOut จะทำงานต่อเนื่องจาก onMouseOver เมื่อผู้ใช้ได้มีการเลื่อนเมาส์ออกจากพื้นที่ของ Object ที่กำหนด

62 ตัวอย่าง Event Handler onMouseOver / onMouseOut
<TABLE width="50%" border="1" cellspacing="0"> <TR onMouseOver="this.bgColor='lightblue'" onMouseOut="this.bgColor=''"> <TD>test data</TD><TD>test data</TD> </TR> <TR onMouseOver="this.bgColor='lightpink'" onMouseOut="this.bgColor=''"> </TABLE> <img src="img/3.jpg" width="20%" onMouseOver="this.src='img/4.jpg'" onMouseOut="this.src='img/3.jpg'">

63 เปรียบเทียบ JavaScript กับ CSS
<style> .odd:hover{background-color:lightblue;} .even:hover{background-color:lightpink;} .img1,.img2{position:fixed;left:5px;margin-top:5px;width:200px;height:150px;} .img2:hover {opacity:1;} .img2{opacity: 0;} </style> <TABLE width="50%" border="1" cellspacing="0"> <TR class="odd"> <TD>test data</TD><TD>test data</TD> </TR> <TR class="even"> </TABLE> <img src="img/3.jpg" width="200px" class="img1"> <img src="img/4.jpg" width="200px" class="img2">

64 Event Handler onSubmit / onReset
onSubmit จะทำงานเมื่อมีการกดปุ่ม submit form onReset จะทำงานเมื่อปุ่ม Reset ถูกกด ทั้งสอง Event Handler จะทำงานที่ form ทั้งหมด ตัวอย่างเช่น <FORM onReset="alert('The data will be cleared')" onSubmit="alert('Your data will be sent now')"> <INPUT TYPE="text" NAME=""><BR> <INPUT TYPE="submit" VALUE="Send"> <INPUT TYPE="reset" VALUE="Clear" > </FORM>

65 Calculator <html><head><title>เครื่องคิดเลข</title> <style> input[type="button"]{ background-color:#63DD8D;width:100%;font-size:1em; font-weight:900;color:#000000; } input[type="text"]{ width:100%; font-size:1em;color:red;padding:1%;font-weight:900; table{width:20%;} </style> <SCRIPT LANGUAGE="JavaScript"> function addtext(str) { document.myform.number1.value+=str;} function cal() { document.myform.number1.value=eval(document.myform.number1.value);} </SCRIPT></head>

66 Calculator(ต่อ) <body><FORM name="myform"><table><tr> <TD colspan="3"><INPUT TYPE="text" size="20" NAME="number1"></td> <TD><input type="button" value="C" onclick="document.myform.number1.value='';"></TD></TR> <TR><TD><input type="button" value="1" onclick="addtext(this.value);"></TD> <TD><input type="button" value="2" onclick="addtext(this.value);"></TD> <TD><input type="button" value="3" onclick="addtext(this.value);"></TD> <TD><input type="button" value="+" onclick="addtext(this.value)"></TD></tr> <TR><TD><input type="button" value="4" onclick="addtext(this.value)"></TD> <TD><input type="button" value="5" onclick="addtext(this.value)"></TD> <TD><input type="button" value="6" onclick="addtext(this.value)"></TD> <TD><input type="button" value="-" onclick="addtext(this.value)"></TD></tr> <TR><TD><input type="button" value="7" onclick="addtext(this.value)"></TD> <TD><input type="button" value="8" onclick="addtext(this.value)"></TD> <TD><input type="button" value="9" onclick="addtext(this.value)"></TD> <TD><input type="button" value="*" onclick="addtext(this.value)"></TD></tr> <TR><TD><input type="button" value="0" onclick="addtext(this.value)"></TD> <TD><input type="button" value="." onclick="addtext(this.value);"></TD> <TD><input type="button" value="=" onclick="cal();"></TD> <TD><input type="button" value="/" onclick="addtext(this.value);"></TD></tr></FORM></body></html>

67 Window object Document object

68 Window objects Window object เป็นหน้าต่างปัจจุบันของ browser และเป็นที่เก็บทุกๆ อย่างใน window เมื่อเปิด browser ขึ้นมาจะมีการสร้างหน้าต่างขึ้นมา 1 หน้า และเริ่มเปิดไปยัง เว็บเพจเริ่มต้นที่ตั้งค่าไว้ โดยส่วนใหญ่ window จะอยู่ตลอดถ้าไม่ออกจากโปรแกรมไปก่อน ถึงแม้ว่าจะเปลี่ยนหน้าเว็บเพจไป window ยังจะคงอยู่ โดยส่วนที่เปลี่ยนไปคือ document object ซึ่งอยู่ใน window object หรือเปิด frame ใหม่ซึ่งคือ Frame object

69 โครงสร้างลำดับขั้นของ object

70 Properties , Method และ Event Handler สำหรับWindow objects
defaultstatus alert onLoad frames blur onUnload opener close onBlur parent confirm onFocus scroll focus self open status prompt top clear / timeout setTimeout

71 การทำงานกับ Window objects (1/5)
สามารถสั่งให้ Java Script ทำการเปิด window ขึ้นมาทำงาน สามารถสั่งให้ Java Script ปิด window ที่ไม่ต้องการออกไปก็ได้ โดยจะมีการใช้ method open() close()

72 open() เป็น method สำหรับการเปิด window มีรูปแบบดังนี้
Open windows open() เป็น method สำหรับการเปิด window มีรูปแบบดังนี้ variable = window.open("url", "NAME","[OPTION]") variable ชื่อของ window object ที่สร้างใหม่ url ที่อยู่ที่จะใช้ในการอ้างอิง HTML file ที่ต้องการนำมาแสดง name ชื่อของ window สำหรับอ้างอิงใน HTML ประกอบด้วย _blank , _parent , _selft , _top , name

73 Option การ Open windows
[OPTION] การกำหนดลักษณะของ window โดยนำ option แต่ละชนิดมาเขียนต่อเนื่องกัน ด้วยการใช้เครื่องหมาย , คั่นไว้ ตัวอย่าง OPTION ที่สำคัญ เช่น Option ค่าที่เป็นไปได้ คำอธิบาย toolbar yes no (ใช้ 1 , 0 แทนได้) มี toolbar หรือไม่ location แสดง location หรือไม่ directories มี directory button หรือไม่ status มี statusbar หรือไม่ menubar มี menubar หรือไม่ scrollbar มี scrollbar หรือไม่ resizable เพิ่ม ลดขนาด ของ window ได้หรือไม่ width integer ความกว้างของ window หน่วยเป็น pixel height ความสูงของ window หน่วยเป็น pixel

74 close() เป็น method สำหรับการปิด window มีรูปแบบดังนี้
Close windows close() เป็น method สำหรับการปิด window มีรูปแบบดังนี้ variable.close() โดยที่ variable เป็นชื่อของ window ที่ต้องการปิด

75 ตัวอย่างการ Open windows
<html><head> <script> var myWindow; function openWin() { myWindow = window.open(" "_blank", "width=500, height=500"); } function closeWin() {myWindow.close();} </script> </head> <body> <button onclick="openWin();">Open Crru a new window</button> <button onclick="closeWin();">Close Crru new window</button> </body> </html>

76 การทำงานกับ Window objects(2/5)
2. การติดต่อกับผู้ใช้ สามารถใช้ Method ต่างของ window object เพื่อทำการติดต่อกับผู้ใช้ได้ โดยจะมี Method ที่ใช้ติดต่อโดยวิธีต่างๆ ดังนี้ alert เป็นข้อความเพื่อเตือนผู้ใช้ขณะทำงาน หรือต้องการสื่อข้อความใดๆ เช่น <INPUT TYPE="BUTTON" VALUE="onClick" onClick="window.alert('onclick');"> <INPUT TYPE="BUTTON" VALUE="onmouseover" onmouseover="window.alert('onmouseover');"> <input type="text" name="text1" value="text" onBlur="window.alert(this.value);">

77 การทำงานกับ Window objects(2/5)
2. การติดต่อกับผู้ใช้ (ต่อ) prompt เป็นการแสดงข้อความในกล่องโต้ตอบ และมีกล่องข้อความสำหรับรับข้อความ นำเข้า (input) ที่ผู้ใช้ต้องการโต้ตอบกับเอกสารที่ทำงานอยู่ เช่น <html><head> <script> function myFunction() { var person = prompt("Please enter your name", "Harry Potter"); if (person != null) {document.getElementById("text").innerHTML = "Hello " + person + "! How are you today?"; }} </script></head> <body> <button onclick="myFunction()">คลิกปุ่มเพื่อป้อนข้อมูล</button> <p id="text"></p> </body></html>

78 การทำงานกับ Window objects(2/5)
2. การติดต่อกับผู้ใช้(ต่อ) confirm เป็นกล่องโต้ตอบที่ให้ผู้ใช้ยืนยันการกระทำของตน โดยจะมีปุ่ม OK และ Cancel สำหรับถามผู้ใช้ ถ้าผู้ใช้กด OK ก็จะเป็นการคืนค่า true แต่ถ้าผู้ใช้กด Cancel ก็จะเป็นการคืนค่า False

79 การทำงานกับ Window objects(2/5)
2. การติดต่อกับผู้ใช้(ต่อ) ตัวอย่างการใช้งานconfirm <html><head> <script> function myFunction() { var txt; var r = confirm("ยืนยันการสมัคร!\n OK ตกลง or Cance ยกเลิกl.\n ผลการยืนยันแสดงบนหน้าเว็บเพจ."); if (r == true) {txt = "คุณยืนยันการสมัคร!"; } else { txt = "คุณยกเลิกการสมัคร!"; } document.getElementById("text").innerHTML = txt;} </script></head><body> <button onclick="myFunction()">ยืนยันการสมัคร</button> <p id="text"></p> </body> </html>

80 การทำงานกับ Window objects (3/5)
3. การแสดงข้อความใน Status bar ใน window object มี properties ที่ใช้ควบคุมข้อความใน Status bar 2 ตัว คือ window.defaultStatus เป็นข้อความเริ่มต้นของ Status bar window.status เป็นข้อความที่ปรากฏเป็นครั้งคราว เช่น เวลาเอาเมาส์ไปวางบนรูปภาพ หรือ link ซึ่งอาจจะใช้ Event Handler อย่างเช่น onMouseover มาช่วยได้

81 ตัวอย่างการแสดงข้อความใน Status bar
<SCRIPT LANGUAGE="JavaScript"> window.defaultStatus="Welcome to my webpage" </SCRIPT> <FORM NAME="MyStatusBar"> <INPUT TYPE="TEXT" NAME="Message"> <INPUT TYPE="BUTTON" onClick="window.status=MyStatusBar.Message.value"> </FORM>

82 การทำงานกับ Window objects (4/5)
(4.) Window Synonyms การอ้างอิงถึง window ม่จำเป็นต้องใช้คำว่า window หรือชื่อที่ตั้งเอาไว้เท่านั้น (ตอนที่เปิด window ใหม่ที่ต้องมีการตั้งชื่อ window) เพราะว่า window จะมี property ที่ใช้แทน window ได้ เช่น window.self หมายถึง window ปัจจุบันที่กำลังอ้างอิงอยู่ window.parent ใช้กับกรณีที่มีหลาย frame โดยหมายถึง node แม่ window.opener หมายถึง window ที่เปิด window ปัจจุบันขึ้นมา window.top หมายถึง window ที่อยู่ใน node ระดับบนสุด

83 ตัวอย่างการทำงาน Window Synonyms
File Opener.html <FORM NAME="myform"> กรุณาใส่รหัสประเภทลูกค้า <INPUT TYPE="text" NAME="yourID"> <INPUT TYPE="BUTTON" VALUE= "ลืม" onClick="window.open('id.html','win1','menubar=0,width=200,height=200')"> </FORM>

84 ตัวอย่างการทำงาน Window Synonyms (ต่อ)
File id.html <SCRIPT LANGUAGE="JavaScript"> function FillTextbox() { window.opener.document.myform.yourID.value=document.idform.id.value; window.self.close(); } </SCRIPT> <FORM NAME="idform"> <SELECT NAME="id"> <OPTION VALUE="001">Wholesale</OPTION> <OPTION VALUE="002">Retail </OPTION> <OPTION VALUE="003">Normal </OPTION> </SELECT> <INPUT TYPE="button" VALUE="Fill" onClick="FillTextbox()"> </FORM>

85 การทำงานกับ Window objects (5/5)
(5.) การตั้งเวลาทำงาน จะมี method ที่ช่วยในการทำงานเกี่ยวกับเรื่องของการตั้งเวลา ดังนี้ setTimeout() จะใช้ตั้งเวลา เมื่อครบกำหนดเวลาจะเรียก function ขึ้นมาทำงาน clearTimeout() ใช้ยกเลิกการตั้งเวลา setIntervel() จะเป็นการตั้งเวลาเช่นกัน แต่จะทำงานเป็นแบบวนรอบเมื่อครบกำหนดเวลาก็จะเรียก function ขึ้นมาทำงาน แล้วเริ่มจับเวลาต่อทันที clearInterval() ใช้ยกเลิกการจับเวลาด้วย setInterval()

86 ตัวอย่างการตั้งเวลาทำงาน
<SCRIPT LANGUAGE="JavaScript"> setInterval("showtime()",1000) function showtime() { var d = new Date() document.myform.text1.value = d.toLocaleTimeString() } setInterval("reduce()",1000) var a = 5; function reduce() { document.myform.text2.value = a; a = a - 1; </SCRIPT> <FORM name="myform"> <INPUT TYPE="text" NAME="text1"><BR> <INPUT TYPE="text" NAME="text2"> </FORM>

87 Code Banner อย่างง่าย <html><head><style>img{ margin-left:10%;margin-right:10%;width:80%;height:280;}</style> <script language="JavaScript"> var i = 0;var path = new Array(); // LIST OF IMAGES path[0] = "img/1.jpg";path[1] = "img/2.jpg";path[2] = "img/3.jpg";path[3] = "img/4.jpg"; function swapImage() { document.slide.src = path[i]; if(i < path.length - 1) i++; else i = 0; setTimeout("swapImage()",3000);} window.onload=swapImage; </script></head><body><img name="slide" src="img/1.png"></body></html>

88 การทำงานกับ Document objects
หมายถึง เอกสาร HTML ซึ่งเป็นเว็บเพจที่กำลังแสดงอยู่ในหน้าต่างหลัก เป็น Property ของ window (window.document) Document เปรียบเสมือนหน้าหนังสือ ที่ต้องมีการบอกเลขหน้า เลขบท หัวเรื่อง ซึ่งต้องมี Property ที่บอกถึงคุณสมบัติเหล่านี้ และนอกจากนี้ในหน้าหนังสือ ก็ต้องมีเนื้อหาสาระประกอบอยู่ภายใน เช่น เนื้อหา หัวข้อ รูปภาพ ตาราง เป็นต้น ซึ่งสิ่งเหล่านี้ล้วนเป็นคุณสมบัติที่สำคัญ ของ Document object โดย Document object จะแบ่ง Property ออกเป็น 2 แบบคือ Property ที่บอกถึงคุณสมบัติของ Document Property ที่เป็นเนื้อหาภายใน Document

89 Property ที่บอกคุณสมบัติของ Document
Properties การทำงาน URL แสดง URL ของเว็บเพจ title แสดงชื่อ Title ของเว็บเพจ referrer แสดง URL ของเว็บเพจที่มีการเชื่อมโยงมาที่เอกสารนี้ lastModified แสดงวันเวลาที่ปรับปรุงเอกสารนี้ครั้งล่าสุด history เป็น list ของ URL ที่ผู้ใช้เคยเข้าไปเยี่ยมชม โดยใช้ window เดียวกับเพจนี้ domain Domain ของเว็บเพจ linkColor กำหนดสีที่ใช้สำหรับส่วนที่เป็นจุด Hyperlink alinkColor กำหนดสีให้กับ Hyperlink ตอนที่กำลังกดเมาส์ vlinkColor กำหนดสีให้กับ Hyperlink ที่เคยใช้งานแล้ว bgColor กำหนดสีพื้นหลังให้กับเว็บเพจ fgColor กำหนดสีตัวอักษรที่แสดงบนเว็บเพจ

90 ตัวอย่าง Property ที่บอกคุณสมบัติของ Document
<html><head> <title>ทดสอบ Document object</title> <SCRIPT LANGUAGE="JavaScript"> document.writeln(document.title); document.writeln(document.lastModified); document.bgColor="#99CCCC"; document.body.style.color="red"; document.body.style.fontSize="xx-large"; document.body.style.border="thick solid #0000FF"; document.body.style.width="800px"; document.body.style.height="800px"; document.body.style.margin="2px 10% 0 10%"; </SCRIPT> </head><body></body> </html>

91 Property ที่เป็นเนื้อหาของ Document
ในกรณีของ anchor , applet , form , image และ link นั้นสามารถที่จะเรียกในลักษณะของ Array ได้ เนื่องจาก property เหล่านี้อาจจะมีหลายตัวในเว็บเพจหน้าหนึ่งก็ได้ Properties การทำงาน *anchor เป็น anchor object ใน document *applet เป็น applet ใน document (โปรแกรม JAVA Applet) area เป็น object ของ image map area ใน document cookie ให้ค่าข้อความที่บรรจุ cookies ของเว็บเพจที่กำลังใช้งานอยู่ *plugin เป็นโปรแกรมเพิ่มเติม (plugin) document *form เป็น object ของ form ใน document *image เป็น image object ภายใน document *link เป็นจุดเชื่อมโยงใน document

92 ตัวอย่าง Property ที่เป็นเนื้อหาของ Document
<IMG SRC="car2.jpg" NAME="image1"> <SCRIPT LANGUAGE="JavaScript"> document.write("This image'\s width = "+document.image1.width); document.write(" and image'\s height = "+document.image1.height); </SCRIPT>

93 การอ้าง Array of Object ใน Document
การอ้างถึง Object ที่มีหลายๆ ตัวในหน้าเว็บนั้น นอกจากจะใช้การอ้างอิงชื่อตามแบบที่เคยใช้มา อาจจะอ้างได้ในลักษณะของการระบุ Index ใน Array ของ Object นั้นได้ด้วย ในกรณีของ anchor , applet , form , image และ link นั้นการอ้างในลักษณะของ Array โดยการเติมตัว s เข้าไปและใช้วงเล็บ [n] ต่อท้าย โดยที่ n หมายถึงลำดับที่ปรากฏในเว็บเพจ เช่น document.forms[0] document.images[3]

94 ตัวอย่างการอ้าง Array of Object ใน Document
<SCRIPT LANGUAGE="JavaScript"> function check1() { alert("U R Checking Text from first form :" + document.forms[0].t.value) } function check2() { alert("U R Checking Text from second form :" + document.forms[1].t.value) } function check3() {var varcheck=document.forms[2].check1;var txt="";no=0; for(i=0;i<varcheck.length;i++){ if(varcheck[i].checked==true){ no++;txt=txt+no+"."+varcheck[i].value+"<br>";}} document.getElementById("txt").innerHTML = txt;}</SCRIPT> <FORM> <INPUT TYPE="text" NAME="t"> <INPUT TYPE="button" onClick="check1()" value="FORM0"> </FORM> <INPUT TYPE="button" onClick="check2()" value="FORM1"> <form> <input type="checkbox" name="check1" value="Apple">Apple <input type="checkbox" name="check1" value="Orange">Orange <input type="checkbox" name="check1" value="Mango">Mango <INPUT TYPE="button" onClick="check3()" value="show"> <div id="txt"></div></form>

95 Method ของ Document ใน document สามารถที่จะใช้ Method ต่างๆ ได้ เช่น
การทำงาน clear ลบข้อความทิ้งใน window ปัจจุบัน (ไม่ใช้แล้วใน JavaScript version ปัจจุบัน) close ยกเลิกการแสดงข้อความแล้วปิด window ปัจจุบัน write แสดงข้อความลงเว็บเพจ writeln แสดงข้อความ โดยมีการขึ้นบรรทัดใหม่ทุกครั้งที่สิ้นสุดข้อความในแต่ละชุด

96 Location object Form object

97 Location object Location เป็น Object ที่ใช้สำหรับการดูข้อมูลที่อยู่ URL ของเว็บเพจจะให้ค่าต่างๆ ของ Document ที่แสดงบน window และ จะไม่อนุญาตให้กำหนดค่าต่างๆ ของ Location ได้ (เป็น Read-only) Properties คำอธิบาย hostname แสดงชื่อ Domain หรือ IP ของ URL ที่เรียกใช้งาน port แสดงหมายเลข Port ที่เรียกใช้งาน pathname แสดง path name ของ URL ที่เรียกใช้งาน search แสดงข้อมูลคำถาม ที่ส่งไปยัง URL ที่เรียกใช้งาน hash แสดงชื่อ Anchor ที่เชื่อมไปจุดต่างๆ ภายใน URL

98 Location object (ต่อ) Properties คำอธิบาย Mothods href
แสดงชื่อ URL ที่เรียกใช้งาน host แสดงชื่อ hostname ของ URL ที่เรียกใช้งาน protocol เป็นการแสดง Protocol ที่เรียกใช้งาน Mothods reload() ใช้ reload ข้อมูลจากเว็บเพจ replace() ใช้ load ข้อมูลจาก URL ที่กำหนด

99 Location object ตัวอย่าง
ให้ทดลองสร้าง file ขึ้นมา และ save ข้อมูล จากนั้นแทรก code ดังนี้ <SCRIPT LANGUAGE="JavaScript"> document.write(window.location.href+"<BR>") document.write(window.location.protocol+"<BR>") </SCRIPT>

100 Location object ตัวอย่าง
ให้ทดลองสร้าง file ขึ้นมา และ save ข้อมูล จากนั้นแทรก code ดังนี้ <SCRIPT LANGUAGE="JavaScript"> function GoTo() {window.location.assign(document.myform.URL.value);} </SCRIPT> <FORM NAME="myform"> <SELECT NAME="URL" onChange="GoTo()"> <OPTION VALUE=" <OPTION VALUE=" <OPTION VALUE=" <OPTION VALUE=" </SELECT> </FORM>

101 Form object การนำ Java Script มาใช้ทำงานร่วมกับ FORM ที่อยู่ใน HTML จะทำให้ FORM มีความสามารถมากขึ้นด้วย หลักสำคัญในการทำงาน อยู่ที่เครื่องมือต่างๆ มาใช้กับ Event Handler เช่น การใช้ onClick กับ Button หรือ การใช้ onSubmit กับ FORM เป็นต้น

102 Textbox object Textbox เป็นช่วงที่ให้กรอกข้อมูลต่างๆ โดย Textbox จะถือเป็น Property หนึ่งของ Form โดยที่ Property ของ Text จะมีดังนี้ Properties คำอธิบาย name ชื่อของ Textbox type ชนิดของ Textbox มีค่าได้ 3 แบบ คือ hidden , password , text defaultValue ค่าเริ่มต้นของ Textbox value ข้อความที่ปรากฏอยู่ใน Text Mothods คำอธิบาย focus() ใช้ระบุจุด Focus ของ Textbox blur() ใช้ ยกเลิกจุด Focus Select() เลือกข้อความที่อยู่ใน Textbox

103 Submit object คำสั่ง <INPUT TYPE="submit">
เมื่อผู้ใช้กดปุ่ม จะเป็นการส่ง ข้อมูลในแบบฟอร์มไปยังเครื่อง Server เกิด Event Handler คือ onSubmit

104 Submit object ตัวอย่าง <SCRIPT LANGUAGE="JavaScript">
function MailTo(form) { var subject=myform.input1.value; var cc = myform.input2.value; window.location = + subject + "&cc=" + cc; } </SCRIPT> <FORM name="myform" onSubmit="return MailTo(this.form)"> Subject<INPUT TYPE="text" NAME="input1"><BR> recipient<INPUT TYPE="text" NAME="input2"> <INPUT TYPE="submit" value="submit"> </FORM>

105 Checkbox object Property และ Method ของ Checkbox โดย Event ที่ใช้ได้กับ Checkbox ก็คือ onBlur , onFocus , onClick Properties คำอธิบาย Checked ค่าบูลีนที่แสดงเป็น T ถ้า Checkbox นี้ ถูก Click defaultChecked ค่าบูลีนที่แสดงเป็น T ถ้า Checkbox นี้ ถูกเลือกเป็นค่าเริ่มต้น Value ค่าของ Checkbox เมื่อมีการเลือกใช้ (ข้อมูลที่ได้เมื่อเลือก) Name ชื่อของ Checkbox object Mothods click() การเลือก Click ที่ Checkbox

106 ตัวอย่าง Checkbox object
<html><head><script> function check() { document.getElementById("myCheck").checked = true;} function uncheck() { document.getElementById("myCheck").checked = false;} </script></head> <body> Checkbox: <input type="checkbox" id="myCheck"> <button onclick="check()">Check Checkbox</button> <button onclick="uncheck()">Uncheck Checkbox</button> </body> </html>

107 ตัวอย่าง Checkbox object
<SCRIPT LANGUAGE="JavaScript"> function clickBtn(form) { var txt="";no=0; for (count=0;count<form.fruit.length;count++) { if (form.fruit[count].checked==true) { no++;txt=txt+no+"."+form.fruit[count].value+"<BR>"; }} document.getElementById("text").innerHTML=txt;} </SCRIPT> <FORM NAME="myform"> <INPUT TYPE="checkbox" NAME="fruit" VALUE="Apple">Apple <INPUT TYPE="checkbox" NAME="fruit" VALUE="Banana">Banana <INPUT TYPE="checkbox" NAME="fruit" VALUE="Melon">Melon <INPUT TYPE="checkbox" NAME="fruit" VALUE="Orange">Orange <INPUT TYPE="button" onClick="clickBtn(this.form)" VALUE="Click"> <p id="text"></p></FORM>

108 Radio object Property , Method และ Event จะเหมือนกับ Checkbox แต่ว่า Radio จะมีข้อแตกต่างตรงที่ แต่ละตัวต้องมีการกำหนดชื่อเป็นชื่อเดียว เพื่อให้เป็น Radio ชุดเดียวกัน การติดต่อกับ Radio จะทำได้โดยอ้างถึงหมายเลขลำดับใน Array กับชื่อที่กำหนดไว้ใน HTML โดยรายการแรกของชุดมีหมายเลขลำดับเป็น 0 รายการที่สองมีหมายเลขเป็น 1 เรื่อยไปตามลำดับ

109 ตัวอย่าง Radio object <SCRIPT LANGUAGE="JavaScript"> function clickBtn(form) { var txt="";no=0; for (count=0;count<form.fruit.length;count++) { if (form.fruit[count].checked==true) { document.getElementById("text").innerHTML="You are select "+form.fruit[count].value; break; }}} </SCRIPT> <FORM NAME="myform"> <INPUT TYPE="radio" NAME="fruit" VALUE="Apple">Apple <INPUT TYPE="radio" NAME="fruit" VALUE="Banana">Banana <INPUT TYPE="radio" NAME="fruit" VALUE="Melon">Melon <INPUT TYPE="radio" NAME="fruit" VALUE="Orange">Orange <INPUT TYPE="button" onClick="clickBtn(this.form)" VALUE="Click"> <p id="text"></p> </FORM>

110 ตัวอย่าง Radio object <html><head><script> function changeColour(value){ document.body.style.backgroundColor=value;} function changefore(value){ document.body.style.color=value;} function changesize(value){ document.body.style.fontSize=value;}</script></head><body> <div id= "background">เปลี่ยนสีพื้นหลังเว็บเพจ? <form name="form1" method="post" action=""> <input type="radio" name="background1" value="Blue" onClick="changeColour(this.value)">Blue <input type="radio" name="background1" value="yellow" onClick="changeColour(this.value)">yellow <input type="radio" name="background1" value="pink" onClick="changeColour(this.value)">pink </form></div> <div id= "color">เปลี่ยนสีตัวอักษรเว็บเพจ? <form name="form2" method="post" action=""> <input type="radio" name="color1" value="Blue" onClick="changefore(this.value)">Blue <input type="radio" name="color1" value="yellow" onClick="changefore(this.value)">yellow <input type="radio" name="color1" value="pink" onClick="changefore(this.value)">pink <div id= "size">เปลี่ยนขนาดตัวอักษร? <form name="form3" method="post" action=""> <input type="radio" name="size1" value="1.5em" onClick="changesize(this.value)">1.5em <input type="radio" name="size1" value="2em" onClick="changesize(this.value)">2em <input type="radio" name="size1" value="2.5em" onClick="changesize(this.value)">2.5em </form></div></body>

111 Select object เป็นรายการแบบเลือกตอบ ที่แสดงตัวเลือกในลักษณะของ Drop Down List Box บรรทัดเดียว หรือ จะเป็นแบบหลายบรรทัด (list box) แล้วแต่กำหนด ซึ่งจะยอมให้ผู้ใช้เลือกได้เพียงตัวเลือกเดียวเท่านั้น

112 Select object Property ของ Select จะมีดังนี้ Properties คำอธิบาย name
length จำนวนตัวเลือกทั้งหมดในรายการ options ข้อมูลที่แสดงแต่ละรายการ defaultSelected ค่าบูลีน แสดงถึงตัวเลือกที่กำหนดเป็นค่าเริ่มต้น index ลำดับของรายการเลือกแต่ละรายการ selected ค่าบูลีน แสดงหมายถึงตัวเลือกนั้นๆ ถูกเลือกอยู่หรือไม่ selectedIndex ค่าเลขจำนวนเต็มแสดงหมายเลขที่ถูกเลือก text ค่า String บรรจุข้อความที่ใช้แสดงในรายการ value ค่า String ที่ใช้ส่งไปกับฟอร์มถ้าผู้ใช้เลือกตัวเลือกนั้น

113 Select object นอกจากนี้แล้วยังมี Property อีกตัวหนึ่ง ก็คือ Option Array ซึ่งเป็น Array ของตัวเลือกใน Select ที่สร้างโดยคำสั่ง <OPTION> สมาชิกทุกตัวของ Option Array คือ ตัวเลือกทุกตัวเลือกใน Selection List นั่นเอง โดยใช้หมายเลขสำหรับการอ้างอิงเรียงตามลำดับกันไป โดยเริ่มต้น Index ที่ 0 และมี Property ดังนี้ Properties คำอธิบาย option(0).index เป็นหมายเลขของ Options option(0).selected Option นี้ถูกเลือกหรือไม่ option(0).text ข้อความของ Option

114 Select object ตัวอย่าง <SCRIPT LANGUAGE="JavaScript">
function Show(form) { alert(form.device.value + "\n Index=" + form.device.selectedIndex) } </SCRIPT> <FORM NAME="myform"> <SELECT NAME="device" onChange="Show(this.form)"> <OPTION VALUE="Mainboard">MB</OPTION> <OPTION VALUE="Monitor">MN</OPTION> <OPTION VALUE="Microprocessor">MP</OPTION> </SELECT> </FORM>

115 ตัวอย่างการสร้าง Object ด้วย JavaScript
<html><head> <SCRIPT LANGUAGE="JavaScript"> function show_image(src, width, height, alt) { var img = window.document.createElement("img"); img.src = src; img.width = width; img.height = height; img.alt = alt; window.document.body.appendChild(img); } </SCRIPT> </head> <body> <FORM NAME="myform"> <input type='button' onclick="show_image('g.gif',276,110,'Google Logo');" value='Add Google Logo'> </FORM> </body></html>

116 การประยุกต์ใช้งาน JavaScript
การสร้างภาพสไลด์ในหน้าเว็บเพจ ตัวอย่างการใช้งาน JavaScript