JavaScript
JavaScript ภาษาจาวาสคริปต์ คือ ภาษาโปรแกรมคล้ายภาษาซี ถูกใช้ร่วมกับภาษา เอชทีเอ็มแอลในการพัฒนาเว็บเพจ ประมวลผลในเครื่องของผู้ใช้ ช่วยให้การ นำเสนอเป็นแบบโต้ตอบกับผู้ใช้ได้ในระดับหนึ่ง ภาษานี้มีชื่อเดิมว่า LiveScript ถูกพัฒนาโดย Netscape Navigator เพื่อช่วยให้เว็บ เพจสามารถแสดงเนื้อหา ที่มีการเปลี่ยนแปลงได้ ตามเงื่อนไข หรือสภาพแวดล้อมที่ แตกต่างกัน หรือโต้ตอบกับผู้ใช้ได้มากขึ้น เพราะภาษา HTML ที่เป็นภาษา พื้นฐานของเว็บเพจ ทำได้เพียงแสดงข้อมูลแบบคงที่ (Static Display)
JavaScript ทำอะไรได้บ้าง สร้างเมนูที่สามารถตอบสนองต่อการเอา mouse ไปชี้ได้ สร้างเครื่องคิดเลข ปฏิทิน เกม ในเวบเพจ เปิด,ปิด,เคลื่อนย้ายตำแหน่งของ window ทำตัวอักษรวิ่งแบบต่างๆ ตรวจสอบความถูกต้องของแบบฟอร์มที่ผู้ใช้กรอก ก่อนส่งข้อมูลไปยัง Server และอื่นๆ อีกมากมายที่ไม่ต้องติดต่อกับ Server
การแทรก JavaScript ใน HTML <body> <script language="javascript"> ….. </script> </body> </html> <html> <body> <script type="text/javascript"> ….. </script> </body> </html> หรือ แสดงข้อความ Hello World! ที่หน้าเว็บ <html> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html> Hello World! document.write เป็นคำสั่งที่ใช้เขียนผลลัพธ์บนหน้าเว็บ
ตำแหน่งการวาง JavaScript บนเอกสาร HTML แทรกไว้ใน tag Head แทรกไว้ใน tag Body แทรกไว้ทั้งใน tag Head และ tag Body
การเรียกใช้ไฟล์ JavaScript ที่อยู่ภายนอก บันทึกไฟล์ JavaScript ให้มีนามสกุล .js เขียนส่วนของ tag script ให้ src อ้างอิงไปที่ไฟล์ ที่บันทึกไว้ ดังนี้
JavaScript Comments การใส่หมายเหตุบรรทัดเดียว ให้ใส่เครื่องหมาย // ไว้หน้าบรรทัดนั้น การใส่หมายเหตุหลายบรรทัด เริ่มต้นด้วย /* และปิดท้ายด้วย */
การประกาศตัวแปร ประกาศตัวแปร x และ carname ตัวแปรจะถูกประกาศอัตโนมัติ เมื่อมีการกำหนดค่าโดยไม่ต้องประกาศ var
Arithmetic Operators Given that y=5
Assignment Operators Given that x=10 and y=5
Comparison Operators Given that x=5
Logical Operators Given that x=6 and y=3
ทดสอบโปรแกรมบวกเลข ผลลัพธ์ <script language="javascript"> var x , y, z ; x = 5 y = 2; z = x+y ; document.write(x + "+" + y +"= " + z); </script> ผลลัพธ์
if Statement รูปแบบ ตัวอย่าง
if...else Statement รูปแบบ ตัวอย่าง
if...else if...else Statement รูปแบบ
switch Statement รูปแบบ
for Loop for (ประกาศตัวแปรใหม่พร้อมกำหนดค่าเริ่มต้น;เงื่อนไขการหยุด;เพิ่มค่าให้ตัวแปร) { คำสั่งต่างๆ ที่จะให้ทำซ้ำ }
while loop while (condition) { ชุดคำสั่ง }
ทดสอบโปรแกรมสูตรคูณ ผลลัพธ์ <script language="javascript"> var num , round ; num = 2; round = 12 for(i=1;i<= round;i++){ document.write(num + " * " + i +" = " +num*i + "<br>"); } </script>
การสร้าง function function ชื่อฟังก์ชัน(พารามิเตอร์1,พารามิเตอร์2,..){ function คือโปรแกรมย่อยที่ทำงานอย่างใดอย่างหนึ่ง ถูกสร้างขึ้นแยก ออกจากโปรแกรมหลักเพื่อให้สามารเรียกใช้ได้อย่างสะดวก การสร้าง function ของ JavaScript มีรูปแบบดังนี้ function ชื่อฟังก์ชัน(พารามิเตอร์1,พารามิเตอร์2,..){ คำสั่งต่าง ๆ return ค่าที่ส่งออกไป }
ทดสอบ function <script language="javascript"> function add(a,b){ result = a + b; return result; } var x , y, z ; x = 5 y = 2; z = add(x,y) ; document.write(x + "+" + y +"= " + z); </script>
Popup Boxes Alert Box alert("ข้อความ"); Confirm Box Prompt Box prompt("ข้อความ","ค่าที่ต้องการกรอกเริ่มต้น");
ทดสอบ Popup <script language="javascript"> var num , round ; var ans=confirm("คุณต้องการแสดงสูตรคูณหรือไม่"); if(ans==true){ num = prompt("ใส่แม่สูตรคูณ"); round = prompt("ใส่จำนวนรอบ"); for(i=1;i<= round;i++){ document.write(num + " * " + i +" = " +num*i + "<br>"); } alert("แสดงสูตรคูณเรียบร้อยแล้ว"); }else{ alert("คุณไม่ต้องการแสดงสูตรคูณ"); </script>
Event คืออะไร Event ก็คือ Action ต่างๆที่เกิดขึ้นกับส่วนต่างๆในเวบเพจ เช่น เมื่อ เราเอา mouse ไปทับตัว link ก็จะเกิด event onmouseover ที่ตัว link พอเอา mouse ออก ก็จะเกิด event onmouseout พอเรา click ก็จะเกิด event onclick เป็นต้น การทำงานของ event ก็จะมีอยู่ 2 ขั้นตอน คือ 1. ตรวจสอบการเกิด event ที่เรากำหนดไว้ 2. เมื่อเกิด event ขึ้น ก็จะไปเรียก function หรือคำสั่งต่างๆมาทำงาน
Event Event ความหมาย onAbort เกิดเมื่อผู้ใช้ยกเลิกการ load ภาพ onBlur เกิดเมื่ออ็อบเจกต์นั้นถูกย้าย focus ออกไป onChange เกิดเมื่อผู้ใช้เปลี่ยนแปลงค่าในฟอร์มรับข้อมูล onClick เกิดเมื่ออ็อบเจ็กต์นั้นถูก click onError เกิดเมื่อการ load เอกสารหรือภาพเกิดข้อผิดพลาด onFocus เกิดเมื่ออ็อบเจกต์นั้นถูก focus onLoad เกิดเมื่อโหลดเอกสารเสร็จ onMouseover เกิดเมื่ออ็อบเจกต์นั้นถูกเลื่อน mouse pointer ไปทับ onMouseout เกิดเมื่ออ็อบเจกต์นั้นถูกเลื่อน mouse pointer ที่ทับอยู่ออกไป onSelect เกิดเมื่อผู้ใช้เลือกข้อความ(ใช้ mouse ลาก)ในช่องรับข้อความ onSubmit เกิดเมื่อผู้ใช้ submit แบบฟอร์ม onUnload เกิดเมื่อผู้ใช้ออกจากเวบเพจ
วิธีการใช้ Event เราจะใส่ event ลงไปใน tag ของ html เลย เช่น เวลาจะทำตัว link เราใช้ tag <A> ถ้าจะทำให้มันมีข้อความ Alert ขึ้นเวลาเอา mouse ไป over เขียนโค้ดได้ดังนี้ <a href="" onmouseover="window.alert('Onmouseover ทำงาน')"> ทดสอบ onmouseover </a>
การใช้ JavaScript ร่วมกับ Form การอ้างอิงข้อมูลที่อยู่บนฟอร์ม ทำได้โดยใช้ Object document จากนั้น ตามด้วย . และชื่อ form . ชื่อของ Object ต่าง ๆ บนฟอร์ม เช่น ถ้าต้องการเปลี่ยนข้อความที่รับมาจาก TextField ให้เป็นตัวเลข จะใช้ function eval() เช่น document.ชื่อฟอร์ม.ชื่อTextField.value num = eval(document.form1.txtName.value)
ทดสอบแสดงข้อมูลจากฟอร์ม <body> <form id="form1" name="form1" method="post" action=""> <input name="txtName" type="text" id="txtName" /> <input type="submit" name="Submit" value="OK" onclick="showData()"/> </form> <script language="javascript"> function showData(){ alert(document.form1.txtName.value); } </script> </body> ค่าที่เก็บอยู่ ชื่อ form อ้างถึงเอกสาร HTML ในหน้าปัจจุบัน ชื่อ textfield
ทดสอบโปรแกรมบวกเลข <body> <form id="form1" name="form1" method="post" action=""> เลขตัวที่ 1 <input name="txtNum1" type="text" id="txtNum1" /> <br /> เลขตัวที่ 2 <input name="txtNum2" type="text" id="txtNum2" /> <input type="submit" name="Submit" value="บวก" onclick="add()"/> </form> <script language="javascript"> function add(){ a = eval(document.form1.txtNum1.value); b = eval(document.form1.txtNum2.value); c = a+b; alert(c); } </script> </body>
ทดสอบโปรแกรมนำเมาส์วางที่ข้อความแล้วภาพเปลี่ยน เตรียมภาพ 3 ภาพ ภาพหลัก fruit.jpg ภาพส้ม orange.jpg ภาพองุ่น grape.jpg <body> <img src="images/fruit.jpg" name="showpic" width="401" height="214" id="showpic" /> <p><a href="" onmouseover="showpic.src='images/orange.jpg'" onmouseout="showpic.src='images/fruit.jpg'"> ส้ม </a></p> <p><a href="" onmouseover="showpic.src='images/grape.jpg'" onmouseout="showpic.src='images/fruit.jpg'"> องุ่น </a></p> </body>
ทดสอบโปรแกรมนำเมาส์วางที่ภาพแล้วข้อความเปลี่ยน เตรียมภาพ 2 ภาพ - ภาพส้ม orange.jpg - ภาพองุ่น grape.jpg <body> <script type="text/javascript"> function writeText(text){ document.getElementById("txtdata").innerHTML= text; } </script> <img src="images/orange.jpg" width="190" height="137" onmouseover="writeText('ส้ม มีผลการรักษาต่อโรคเส้นเลือดหัวใจตีบ ')"/> <img src="images/grape.jpg" width="190" height="137" onmouseover="writeText('องุ่นเป็นอาหารบำรุงร่างกายอีกชนิดหนึ่งที่มีสรรพคุณทางยา ')" /> <table width="397" border="1" cellpadding="0" cellspacing="0" bordercolor="#666666"> <tr> <td id="txtdata">วางเมาส์ที่ภาพเพื่อแสดงข้อมูล</td> </tr> </table> </body> ระบุ ชื่อของ id ที่จะเอาข้อความไปวาง ตั้งชื่อตำแหน่งที่ต้องการวางข้อความ โดยจะใช้ Property id
การแปลงตัวเลขสตริงให้คำนวณได้ eval(ตัวแปร) แปลงค่าสตริงใด ๆ ให้เป็นตัวเลข และคืนค่านั้นให้กับตัวแปรที่กำหนด แต่ถ้ามีการป้อนข้อมูลตัวอักษรใด ๆ ของสตริงที่ไม่สามารถแปลงเป็นตัวเลขคำนวณได้ ฟังก์ชันนี้จะแสดงข้อความเตือน “..is not defined” parseFloat(ตัวแปร) แปลงค่าสตริงใด ๆ ให้เป็นตัวเลขจำนวนจริง แล้วคืนค่านั้นกับตัวแปรที่กำหนดแต่ถ้ามีการป้อนข้อมูลตัวอักษรใด ๆ ของสตริงที่ไม่สามารถแปลงเป็นตัวเลขได้ ฟังก์ชันจะคืนค่า “NaN” parseInt(ตัวแปร,เลขฐาน) แปลงค่าสตริงใด ๆ เป็นเลขจำนวนเต็ม แล้วคืนค่านั้นให้กับตัวแปรที่กำหนด ถ้าไม่ระบุเลขฐานค่าตัวเลขที่รับจะเป็นเลขฐาน 10 แต่ถ้ามีการป้อนข้อมูลตัวอักษรใด ๆ ของสตริงที่ไม่สามารถแปลงเป็นตัวเลขได้ ฟังก์ชันจะคืนค่า “NaN”