Javascript

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

การเขียนจาวาสคริปทเบื้องตน 1. จาวาสคริปทคืออะไร จาวาสคริปทคือภาษาสคริปทที่สามารถรันไดบนเว็บบราวเซอรที่สนับสนุนการทํางานของจาวาสคริปท เชน เน็ตสเคป (Netscape) และอินเทอรเน็ตเอกซพลอเรอร(Internet Explorer : IE) จาวาสคริปทตางจากภาษา โปรแกรมอื่นๆตรงที่งายในการใชงาน เหมาะกับผูที่ไมมีพื้นฐานในการเขียนโปรแกรมมากอน โดยจาวาสคริปท มีหนาที่หลักในการเพิ่มความสามารถใหกับเว็บเพจ

2. วิธีการเพิม่ โคดจาวาสคริปทในเว็บเพจ วิธีการแทรกโคดจาวาสคริปทลงไปในไฟล HTML ซึ่งแท็ก(Tag) ที่ใชบงบอกถึงจุดเริ่มตน และ จุดสิ้นสุดของโคดจาวาสคริปทก็คือ <SCRIPT> และ ในไฟล HTMLไฟลหนึ่งสามารถจะมีแท็ก <SCRIPT> ไดหลายชุด เหมือนกับเปน HTML แท็กอยางหนึ่ง ซึ่งแท็กเริ่มตนจาวาสคริปทควรระบุวาเปนภาษา จาวาสคริปทดว ย ซึ่งจะเขียนไดดังนี้ <SCRIPT language="JavaScript"> ........โคดจาวาสคริปท........... <SCRIPT> ในปจจุบนั ยังมีผูใชอินเทอรเนต อีกเปนจํานวนมากที่ยังใชโปรแกรมบราวเซอรรุนเกา ซึ่งยังไมมี ความสามารถในการแสดงจาวาสคริปท นั่นคือ ไมรูจักแท็ก <SCRIPT> ซึ่งจะมีผลทําใหโปรแกรมบราวเซอร เหลานั้นแสดงจาวาสคริปทโคดออกมาเปนตัวอักษรธรรมดา วิธีแกไขปญหานี้ก็คือตองทําใหโปรแกรม บราวเซอรรุนเกา ๆ ไมสนใจ สิ่งที่อยูในแท็ก <SCRIPT> โดยจะตองเขียนเปนคอมเมนท (comment) ไวภายใน สัญลักษณ ดังตัวอยาง <SCRIPT language="JavaScript">

หนา 1 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

นอกจากนี้ในจาวาสคริปทยงั สามารถแทรกสวนที่เปนคอมเมนต ไวเพือ่ เตือนความจําของผูเขียนหรือ ผูอานจาวาสคริปทโคดนั้น หรือเพื่อสะดวกในการจัดทําเอกสารประกอบโปรแกรม โดยเว็บบราวเซอรจะ มองขามสวนที่เปนคอนเมนตนี้ไปการแทรกคอมเมนตในจาวาสคริปทโคดทําไดโดยใชสัญลักษณ // หรือ /* ……*/ ตัวอยาง // this is single line comment ไวหนาบรรทัดที่เปนคอมเมนต นิยมใชในกรณีที่มีคอมเมนตเพียงบรรทัดเดียว หรือ /* This is multilines comment This is multilines comment */ ใชลอมรอบขอความที่เปนคอมเมนตทั้งหมด นิยมใชในกรณีที่มีคอมเมนตหลายบรรทัด ตัวอยางเชน <script language="JavaScript">

3. การใชวัตถุ document วัตถุ document เปนวัตถุที่สําคัญที่สุดวัตถุหนึ่งในจาวาสคริปท พิจารณาตัวอยางตอไปนี้

หนา 2 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

ผลลัพธ

"document" หมายถึงวัตถุ "write" คือเมธอด(method) ของวัตถุ document นี้ ผลลัพธที่ไดคือการเขียนขอความ Hi there. This text is written using javascript! บนหนาจอ จาวาสคริปทเปนภาษาของวัตถุ และวัตถุประมาณ 95% จะมีทั้งสวนที่เปน เมธอด(methods) และสวนที่เปน คุณสมบัติ(properties) วัตถุ "Document" เปนหนึ่งในวัตถุที่สําคัญของจาวาสคริปท โดยจะทําหนาที่ในการ ควบคุมโครงรางของสีพื้นหลัง, สีตัวอักษร, รูปภาพ ฯลฯ ของเว็บเพจ โดย "write" เปนเมธอด( method) ของ วัตถุ document โดยปกติแลววัตถุแตละวัตถุจะมีมากกวา 1 เมธอด วัตถุ document ก็เชนกัน มีคณ ุ สมบัติและ เมธ อดตางๆ เชน คุณสมบัต(ิ Properties) เมธอด(Methods) bgColor ใชในการเปลี่ยนสีพื้นหลัง write ใชในการเขียนขอความ lastModified ใหคาวันที่ของการเปลี่ยนแปลงเอกสารครั้งลาสุด writeln ใชเขียนขอความ โดยการขึ้นบรรทัด ใหม fgColor ใชในการเปลี่ยนสีตวั อักษร ตัวอยาง

เปนการเก็บคาวันที่แกไขเอกสารลาสุดไวในตัวแปร example และทําการเขียนคาของตัวแปรนัน้ ลงบนหนาจอ ตอทายขอความ This page was last modified: ดังรูป หนา 3 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

4. การตอบโตระหวางจาวาสคริปทกับผูใช ในจาวาสคริปทนั้นมีคําสั่งซึ่งทําใหสามารถโตตอบกับผูใชได โดยจะกลาวถึงคําสั่งที่นาสนใจไดแก คําสั่งที่ 1 ไดแก window.alert() คําสั่งนี้จะแสดงหนาตางขอความที่กําหนด ยกตัวอยางเชน

คําสั่งที่ 2 ไดแก window.confirm() คําสั่งนี้ใชในการยืนยันกับผูใชเกี่ยวกับการทํางาน และเปนการตัดสินใจระหวาง 2 ตัวเลือก ขึ้นอยูก ับวา ผูใชเลือกตัวเลือกใด ตัวอยางเชน

หนา 4 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

เมื่อคลิ๊ก ปุม OK

บรรทัดที่ 1 "var x=" เปนการประกาศตัวแปร ชื่อ x ซึ่งตัวแปรนัน้ ใชในการเก็บคาผลลัพธของกลอง ขอความยืนยัน โดยตัวแปร x จะไดรับผลลัพธจากคําสั่ง window.confirm เปนคา "true" หรือ "false". นอกจากนั้นการใชประโยคคําสั่ง "if … else …" เปนการกําหนดใหสคริปทสามารถเลือกระหวาง 2 ทางเลือก ขึ้นอยูกับวาคําตอบของเงื่อนไข(ในกรณีนคี้ ือคาของ x) มีคา true หรือ false ถา x มีคา true จะแสดงหนาตาง ขอความวา Good ถา x มีคา false จะแสดงหนาตางเตือนขอความวา Too bad คําสั่งที่ 3 ไดแก window.prompt() คําสั่งนี้ ใชในการใหผูใชปอนคาเขาไปใหกับจาวาสคริปท ตัวอยาง เชน

เมื่อคลิ๊กปุม พิมพชื่อ ศรราม และคลิ๊ก OK

หนา 5 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

ตัวอยางนี้เปนการใหผูใชปอนชื่อเขาไป จากนั้นจะเก็บคาผลลัพธ(ในกรณีนี้คือชื่อที่ผูใชปอน) ไวในตัว แปร y และคําสั่ง window.alert จะแสดงหนาตางเตือนเพื่อแสดงชื่อที่เก็บในตัวแปร y นั้น

5. การสรางฟงกชั่น (Functions) ฟงกชั่นคือกลุม ของโคดที่รวมกันขึ้นเพื่อทํางานที่ซับซอน โดยฟงกชั่นจะไมทํางานจนกวาจะถูกเรียกใช รูปแบบการสรางฟงกชั่นไดแก function whatever_name(parameter1,parameter2) { ฟงกชั่นโคด } function เปนสวนบงชี้วากําลังประกาศฟงกชั่น whatever_name ชื่อของฟงกชั่น (parameter1, parameter2) พารามิเตอร (parameters) ก็คือตัวแปรที่สงเขาไปยังฟงกชั่นเมื่อฟงกชนั่ ถูกเรียก อาจจะมีพารามิเตอรกี่ตัวหรือไมมีเลยก็ได { เครื่องหมายปกกาเปดแสดงใหเห็นการเริ่มตนฟงกชั่น หรือประโยคคําสั่งตาง ๆ } เครื่องหมายปกกาปดแสดงใหเห็นจุดสิน้ สุดของฟงกชั่น หรือประโยคคําสั่ง การเรียกใชฟงกชั่น จะทําการเรียกฟงกชั่นไดโดย Function_name (parameter1, parameter2); นั่นคือ ระบุชื่อของฟงกชั่นทีต่ องการใช พรอมทั้งพารามีแตอร (ถามี) ตัวอยาง เมื่อตองการสรางฟงกชั่นชื่อ test เปนฟงกชนั่ ที่ไมมีพารามิเตอร ทําหนาทีใ่ นการเขียนขอความ Hello there! บนหนาจอเมื่อมีการเรียกใชฟงกชั่น การสรางฟงกชั่นนี้ทําไดโดย หนา 6 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

การเขียนฟงกชั่นนั้นจะตองเขียนภายในแท็ก <script> โดยสวนใหญนยิ มสรางฟงกชั่นไวใน สวนของแท็ก ในเอกสาร HTML จากตัวอยางขางตน เมื่อตองการเรียกใชฟงกชั่น test ทําได โดยพิมพ test() ฟงกชนั่ ที่มีพารามิเตอร(Functions with Parameters) ฟงกชั่นสามารถรับขอมูลจากภายนอก และนํามาประมวลผลภายในฟงกชั่น โดยพารามิเตอรหมายถึงสิ่ง ที่นําเขาไปในฟงกชั่น เมื่อตองการรับคาขอมูลเขาไปยังฟงกชั่นสามารถปอนคาผานพารามิเตอร โดยคา พารามิเตอรอาจแตกตางกันไปในแตละครั้ง แลวแตความตองการของผูเขียนสคริปท การใชงานฟงกชั่นนั้นยัง ชวยประหยัดเวลาในการทํางาน กรณีที่ตองทํางานนั้นซ้ําๆ หลายๆครั้งอีกดวย ตัวอยางเชนการคํานวณหาพืน้ ที่สี่เหลี่ยมคางหมู ซึ่งมีสูตรในการคํานวณวา (width1+width2)*height/2 ฟงกชั่นในที่นชี้ ื่อ area โดยรับคาพารามิเตอร 3 ตัวคือ w1, w2 และ h

หนา 7 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

จากตัวอยางการเรียกฟงกชนั่ ครั้งที่ 1 คือ area(2,3,7)เปนการเรียกใชฟงกชั่นโดยกําหนดคาพารามิเตอร w1=2, w2=3, และ h=7 ในการสรางฟงกชั่นนั้นสามารถมีพารามิเตอรไดหลายตัวตามตองการ ในคําสั่ง alert(area + " sq ft") หมายถึงการแสดงหนาตางผลลัพธของคาฟงกชั่น area ตอทายดวยขอความ sq ft ฟงกชนั่ ที่มีการสงคากลับ(Functions that return a value) ฟงกชั่นสามารถสงคากลับออกมาได โดยใชคําสั่ง return พิจารณาตัวอยาง

ฟงกชั่น diameter รับคารัศมีของวงกลมจากตัวแปร x เพือ่ นํามาคํานวณหาเสนรอบวง จากนั้นจึงสงคา เสนรอบวงที่คํานวณไดกลับออกมา

6. ตัวจัดการเหตุการณ(Event Handlers) ตัวจัดการเหตุการณเปนจาวาสคริปทโคดที่ไมตองเขียนอยูภายในแท็ก <script> โดยจะรันจา วาสคริปทเมื่อมีเหตุการณบางอยางเกิดขึน้ เชน เมื่อมีการกดปุม, เลื่อนเมาสไปบนลิงค, การสงขอมูลของฟอรม ฯลฯ รูปแบบพื้นฐานในการใชงานตัวจัดการเหตุการณคอื name_of_handler="JavaScript code here" ตัวอยางเชน onClick="alert('hello!')" ตัวจัดการเหตุการณที่นยิ มใชไดแก รันจาวาสคริปทเมื่อมีการคลิก(ใชกับลิงค หรือ ใชกับวัตถุในฟอรม) onclick รันจาวาสคริปทหลังเว็บเพจหรือรูปภาพถูกโหลดมาเรียบรอยแลว onload หนา 8 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

onmouseover onmouseout onunload

รันจาวาสคริปทเมื่อเลื่อนเมาสผานไปขางบน รันจาวาสคริปทเมื่อเลื่อนเมาสออก รันจาวาสคริปทหลังจากออกจากเว็บเพจหนานัน้

ตัวจัดการเหตุการณ onClick onClick จะทํางานเมื่อผูใชคลิกบนปุม, เช็คบ็อกซ, หรือ บนลิงค ฯลฯ ดังนั้น onClick จึงสามารถแทรก เขาไปในแท็กเหลานี้ได ตัวอยางเชน

เมื่อคลิ๊กที่ปุม จะปรากฏ

ฟงกชั่น inform() จะถูกเรียกใชเมื่อผูใชคลิกที่ปุม ตัวอยางตอไป เปนการใช onClick กับปุมเช็คบ็อกซ เพื่อเปลี่ยนสีพื้นหลังของเว็บเพจ

หนา 9 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

ตัวจัดการเหตุการณ onLoad onload ถูกใชเพื่อเรียกใหรันจาวาสคริปทหลังจากเว็บเพจ หรือ เฟรม หรือ รูปภาพถูกโหลดขึ้นมา เรียบรอยแลว ตัวอยางเชน // การเรียกใชฟงกชั่น inform() จะเริ่มหลังเพจถูกโหลด //การเรียกใชฟงกชั่น inform() จะเริ่มหลังเฟรมปจจุบนั เพจถูกโหลด //การเรียกใชฟงกชั่น inform() จะเริ่มหลังรูปภาพถูกโหลด หรือพิจารณาจากตัวอยาง ตอไปนี้ ซึ่งเเมื่อเว็บเพจถูกโหลดมาเรียบรอยแลว จะแสดงกรอบขอความวา This page has finished loading!

หนา 10 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

ตัวจัดการเหตุการณ onMouseover, onMouseout ตัวจัดการเหลานี้นิยมใชกับลิงค หรือรูปภาพตัวอยางตอไปนี้เปนการเขียนขอความลงบนแถบสถานะ (status bar) เมื่อมีการเลื่อนเมาสผานไปบนลิงค และทําการลบขอความนั้นเมื่อเลื่อนเมาสออกจากลิงค เชน

การใช onmouseover ในที่นซี้ ึ่ง status หมายถึง window.status เปนคําสั่งที่สั่งใหโปรแกรมบราวเซอร เขียนขอความ Do not click here, its empty! ลงบนแถบสถานะ เมื่อมีการเลื่อนเมาสไวบนลิงค return true คืนคาที่เปนจริง ดังนั้น โปรแกรมบราวเซอรจะแสดงขอความบนแถบสถานะตามตองการ ที่ตองใช เครื่องหมายคําพูดเดีย่ วนั้น เปนเพราะวาคําสั่ง window.status ถูกใชอยูระหวางคําสั่ง onMouseover อีกที ซึ่ง onMouseOver นี้ตองใชกับเครื่องหมายคําพูดคู ถาคุณใชเครื่องหมายคําพูดคูซ้ําอีก ตรง window.status โปรแกรม หนา 11 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

บราวเซอรจะสับสนเพราะเขาใจวาเปนการสิ้นสุดของคําสั่ง onMouseover แลว การใชคําสั่ง onMouseout ในที่นี้ เปนการกําหนดใหเขียนขอความ วาง (เวนวรรค 1 ครั้ง) เมื่อเลื่อนเมาสออกไปจากลิ้งค ตัวจัดการเหตุการณ onUnload ตัวจัดการนี้จะรันทันทีหลังจากผูใชออกจากเว็บเพจหนานั้น เชน ใหมขี อความขอบคุณที่ผูใชเขามาเยี่ยม ชมเว็บเพจ ดังตัวอยาง

7. การใชงานวัตถุวันที่(Date Object) ในการใชวัตถุวันที่ ขั้นแรกจะตองทําการ new วัตถุวันที่ขนึ้ มากอน โดยมีรูปแบบ ดังนี้ var mydate= new Date() เมื่อตองการสรางวัตถุใหมขนึ้ สามารถทําไดโดยใชคําวา new ตามดวยวัตถุที่ตองการสราง ในที่นี้คือ Date() วัตถุวนั ที่มีเมธอดที่สามารถเรียกใชไดดังนี้ getDate() getDay() getHours() getMinutes() getSeconds() getMonth() getYear() getTime()

คืนคาวันที่ในเดือนนั้น คืนคาวันในสัปดาหนนั้ คืนคาจํานวนชั่วโมง (เริ่มจาก 0-23) คืนคานาที คืนคาวินาที คืนคาเดือน (เริ่มจาก 0-11) คืนคาป คืนคาเวลา

ตัวอยาง การแสดงวันที่ปจจุบันของวันนีว้ า เปน ป/เดือน/วันที่ เทาไร ทําไดโดย

หนา 12 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

โดยการที่ตองบวก 1 เขาไปกับคาเดือน เนือ่ งจากเดือนในจาวาสคริปทเริ่มนับเดือนมกราคมเปนเดือนที่ 0 การใชฟง กชั่น setTimeout setTimeout เปนเมธอดของวัตถุหนาตาง(window object) โดยเปนการหนวงเวลาการเรียกใชฟงกชั่น หรือประโยคคําสั่ง จนกระทัง่ ผานชวงเวลาที่กําหนดไว รูปแบบการใชมีดังนี้ setTimeout("expression", delaytime) "expression" ไดแกฟงกชนั่ หรือประโยคคําสั่งที่ตองการหนวงเวลาการทํางาน และ delaytime คือเวลาที่ตองการ หนวง โดยมีหนวยเปนมิลลิวนิ าที(milliseconds) ตัวอยางเชน ใหมีการแสดงกรอบขอความ "Three seconds have gone!" หลังจากที่เวลาผานไป 3 วินาที setTimeout("alert('Three seconds have gone!')",3000)

8. การสรางและใชตัวแปร(variable)กับจาวาสคริปท การประกาศ (declare) ตัวแปร ทําไดโดยการใชคําวา var ตามดวยชื่อตัวแปรที่ตองการ ดังนี้ หนา 13 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

โดยที่สามารถอธิบายความหมายไดดังนี้ var คือการบงชี้วาเปนการประกาศตัวแปร Name คือชื่อของตัวแปร Value คาเริ่มตนของตัวแปรนัน้ ซึ่งสามารถจะเปนตัวเลข (number) ขอความ (words) คาบูลีน(boolean) หรือ คาวาง (null) ก็ได

การใชตัวเลข (Numbers) สามารถกําหนดคาที่เปนตัวเลขใหกับตัวแปรโดยใชเครือ่ งหมายเทากับ ดังนี้ var cars=3; ตัวเลขดังกลาวอาจไมเปนจํานวนเต็ม เชน เปนทศนิยมก็ได เชน var cost=9.95; การใชสตริง (Strings) สตริงคือกลุมของตัวอักษร เชน คําหรือประโยคการกําหนดคาตัวแปรเปนสตริงตองใชเครื่องหมาย คําพูดคู ลอมสตริงนั้นไว ดังนี้ var movie="The Lost World"; ถาใสตัวเลขไวระหวางเครื่องหมายคําพูด ตัวเลขนั้นจะถูกใชเหมือนกับเปนสตริง คือไมสามารถทําการ คํานวณได การใชคาบูลนี (Boolean Values) เปนการกําหนดใหตวั แปรมีคาเปนจริง (true) หรือ เท็จ (false) ดังนี้ หนา 14 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

var story=true; คาวาง (Null Value) คือ เปนคาวาง ไมใชแมแต 0 มีรูปแบบการใชดังนี้ var mymoney=null; ความแตกตางของตัวอักษรตัวเล็กหรือใหญ (Case Sensitivity) จาวาสคริปทใหความสําคัญกับความแตกตางของอักษรตัวเล็กหรือตัวใหญ จะใชสลับกันไมได เชน joHn กับ JOHN จะไมไดหมายถึงสิ่งเดียวกัน ไมวาจะเปนชื่อตัวแปร หรือชื่อเมธอดตางๆ ดังนั้นตองใชความ รอบคอบ หากพิมพ ผิดอาจทําใหโปรแกรมทํางานผิดพลาดได การใชเครื่องหมายเซมิโคลอน (Semicolons) เซมิโคลอนมีความสําคัญเพราะเปนตัวที่ใชแยกระหวางคําสั่งตาง ๆ และการประกาศตัวแปร ตัวดําเนินการ และเงื่อนไข ตัวดําเนินการในการกําหนดคา(Assignment Operators) ไดแก x = y เปนการกําหนดคาของตัวแปร y ใหกับตัวแปร x x = 5 เปนการกําหนดคาตัวเลข 5 ใหกับตัวแปร x x + = y มีความหมายเชนเดียวกับประโยคคําสั่ง x=x+y ซึ่งเปนการกําหนดคาผลบวกของตัวแปร x และ y ใหกับ ตัวแปร x x - = y มีความหมายเชนเดียวกับประโยคคําสั่ง x=x-y ซึ่งเปนการกําหนดคาผลลบของตัวแปร x และ y ใหกับตัวแปร x x * = y มีความหมายเชนเดียวกับประโยคคําสั่ง x=x*y ซึ่งเปนการกําหนดคาผลคูณของตัวแปร x และ y ใหกับ ตัวแปร x x / = y มีความหมายเชนเดียวกับประโยคคําสั่ง x=x/y ซึ่งเปนการกําหนดคาผลหารของตัวแปร x ดวย y ใหกับตัวแปร x x % = y มีความหมายเชนเดียวกับประโยคคําสั่ง x=x%y ซึ่งเปนการกําหนดคาเศษที่เหลือจากการหาร ตัวแปร x ดวย y ใหกับตัวแปร x ตัวดําเนินการทางคณิตศาสตร (mathematical operators) ไดแก + บวก ลบ หนา 15 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

* / % ++ --

คูณ หาร หารเอาเศษ (modulus) หรือสวนที่เหลือหลังจากการหาร (Increment) การเพิ่มคาจากเดิมขึ้นอีก 1 (Decrement) การลบเพิ่มคาจากเดิมลงอีก 1

ตัวดําเนินการขอความ(String Operator) + เปนการรวมสายอักขระเขาดวยกัน เชน “Mr.” + “Somchai Boondee” จะมีคาเทากับ “Mr.Somchai Boondee” ตัวดําเนินการเปรียบเทียบ (comparison operators) ไดแก > มากกวา < นอยกวา >= มากกวาหรือเทากับ <= นอยกวาหรือเทากับ = = เทากับ (จําไววา เครื่องหมาเทากับอันเดียว "=" จะใชสําหรับการกําหนดคาใหกับตัวแปร สวน การเปรียบเทียบการเทากันของคา 2 คาใหใช "= =" ) != ไมเทากับ ตัวดําเนินการทางตรรก(Logical Operators) ไดแก && หรือ AND || หรือ OR ! หรือ NOT

9. การใชงานวัตถุแบบแถว(Array Object) วัตถุ Array เปนชุดของตัวแปรที่มี ตัวชี(้ index)เปนตัวกํากับ เมื่อมีการสรางวัตถุ Array ขึ้นมา ก็จะมี ความยาว(length)ของ Array เกิดขึ้น ขนาด(Size) ของ Array จะเทากับคาตัวชี้สูงสุด บวก 1 โดยสมาชิกของ Array จะถูกจัดเรียงเริ่มจากตัวชี้ที่มีคา 0 เปนตนไป การสราง new Array Array จะถูกสราง โดยใชคําสั่ง new Array อาจจะกําหนดคาขนาด เริ่มแรกให Array ไดเลย เชน

หนา 16 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

var cards = new Array(52) จะเกิด Array ชื่อ cards ที่มี 52 elements คือ cards[0], card[1], … , cards[51] การสราง new Array จากขอมูล เราสามารถสราง new Array โดยการกําหนดขอมูลเริ่มตนใหได โดยขอมูลแตละตัวจะไปกําหนด สมาชิกให new Array พรอม index ตัวอยางเชน var suits = new Array (“clubs”,”hearts”,”spades”,“diamonds”) Array ชื่อ suits จะมีสมาชิก 4 ตัว เปน suits[0], suits[1],suits[2], และ suits[3] พรอมทั้งคาที่กําหนด ตามลําดับ การสราง new Array โดยไมกําหนด length เราอาจจะสราง array โดยไมตองกําหนด length ตั้งแตแรก แตเมื่อใดทีก่ ําหนดคาใหตัวแปร array ใดขึ้น ก็จะทําใหเกิด array ที่มี index สูงสุดขึ้น ตัวอยางเชน var name = new Array( ) name [15] = “Fon” จะเกิด array name ขึ้น 16 element จาก index 0-15 โดยอัตโนมัติ

10. การทํางานแบบมีเงื่อนไข ตัวดําเนินการที่กลาวมาขางตน จะเปนประโยชนสําหรับการเขียนโปรแกรมดวยจาวาสคริปทโดย เฉพาะเมื่อใชรว มกับประโยคคําสั่งเงื่อนไข ซึ่งมีรูปแบบการใชดังนี้ if ( เงื่อนไขในการทดสอบ) { ..... ประโยคคําสั่งจาวาสคริปท..... } else { .....ประโยคคําสั่งจาวาสคริปท..... } หนา 17 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

ประโยคคําสั่งเงื่อนไขใชเมื่อตองการทดสอบคาหรือตัวแปร โดยมีหลักการคือถาเงื่อนไขในวงเล็บ ( ) เปนจริง ก็ใหดาํ เนินการตามประโยคคําสั่งที่อยูในเครื่องหมายปกกาทีต่ ามมา ถาเปนเท็จประโยคคําสั่งที่อยูในปก กาที่ตามหลัง else จะถูกเรียกใหทํางาน ตัวอยางเชน

ตัวอยางขางตนเปนตัวกําหนดคาของตัวแปร mymoney โดยคาของตัวแปร mymoney จะขึ้นอยูกับคา ของตัวแปร number โดยถาตัวแปร number มีคามากกวา 2 ดังนั้นคาของตัวแปร mymoney จะเปลีย่ นไปเปน 100 แตถาตัวแปร number มีคานอยกวา 2 ดังนั้น คาของตัวแปร mymoney จะเปลี่ยนเปน -100 การใช If ซอน If (Nested If) รูปแบบ if (condition1){ if (condition2){ statement} else{ statement} } else{ statement}

หนา 18 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

ตัวอยาง การใช Nested if

คําสั่ง Switch/Case ใชแทนคําสั่ง If … else ที่ซอนกันหลายๆ ชุด เพื่อลดความสับสน โดยเริ่มทํางานดวยการตรวาจสอบ เงื่อนไขหลังคําสั่ง switch ถาใหผลตรงกับ label ใน case ใด ก็จะไปทํางานตามคําสั่งที่อยูตามหลัง label ชุด นั้น จนกระทั่งพบคําสั่ง break; ถาผลการตรวจสอบเงื่อนไขไมตรงกับ label ใดเลย ก็จะไปทํางานตามคําสั่งที่ ตามหลัง default โดยทุก case จะปดทายดวยคําสั่ง break เสมอ ยกเวนหลังชุดคําสั่งที่ตามหลัง default รูปแบบ switch (เงื่อนไข) { case label : statement; break; case label : statement; break; …. default : statement; }

11. การทํางานแบบวนรอบ(Loop) หากตองการทํางานบางอยางซ้ําๆเปนจํานวนครั้งที่ตองการ สามารถใชการวนรอบ(loop) เชน for loop หรือ while loop เพื่อใหเกิดการทํางานซ้ํา ๆ ซึ่งมีรูปแบบในการใชงานดังนี้

หนา 19 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

การใชงาน for loop for ( เงื่อนไข1; เงื่อนไข2; คําสั่ง ) { ..... ประโยคคําสั่งจาวาสคริปท...... } ตัวอยางตอไปเปนการวนรอบซึ่งเริ่มทํางานดวยเงื่อนไขที่ 1 และทําการวนรอบเมื่อเปนไปตามเงื่อนไขที่ 2 และ แตละครั้งของการ วนรอบก็จะทําตามคําสั่งที่กําหนด นั่นคือ ถาเราตองการเปลี่ยนคาของตัวแปร 5 ครั้ง จะทําไดดังนี้

การวนรอบเริม่ ที่คา count=1 ซึ่งมีคานอยกวา หรือเทากับ 5 ประโยคคําสั่ง mymoney=mymoney+100 จึงถูกทํางานเปนครั้งแรก ตอมาจะ ทําตามคําสั่ง count++ ซึ่งทําใหคาตัวแปร count มีคาเพิ่มขึ้นอีก 1 เปน 2 ซึ่งก็ จะมีการทดสอบวาคา count ยังนอยกวาหรือเทากับ 5 (เงื่อนไข 2)หรือไม และเนื่องจาก count มีคาเปน 2 ซึ่งยัง นอยกวา 5 ทําใหเกิดการทํางานของประโยคคําสั่ง mymoney=mymoney+100 อีกครั้ง และคา count จะเพิ่มเปน 3 ไปเรื่อย ๆ จนกระทั่ง count มีคาเปน 6 ซึ่งจะมีคามากกวา 5 ดังนั้น การวนรอบจะสิ้นสุดการทํางาน ทําให คาตัวแปร mymoney เพิ่มเปน 500 การใช while loop ซึ่งมีหลักการทํางานดังตัวอยาง

หนา 20 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

ตัวอยางขางบนจะทํางานเชนเดียวกับตัวอยางที่ผานมา โดยคําสั่ง while ..... loop จะทํางานโดยมีการ ทดสอบวา คา count ยังคงนอยกวาหรือเทากับ 5 หรือไม ถาใชก็จะวนรอบการทํางานตอไป ถา count มากกวา 5 แลวก็จะสิ้นสุดการทํางาน คําสั่ง Break ใชสั่งใหหยุดการทํางานใน For loop หรือ while loop โดยใหโปรแกรมไปทํางาน คําสั่งที่อยูถัดจาก loop ตอไป ตัวอยาง เชน

รูปแบบคําสัง่ Break

หนา 21 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

คําสั่ง Continue ใชหยุดการทํางานใน loop แลวใหไปทําที่ตน loop ดวยเงื่อนไขถัดไป สําหรับ while loop จะกลับไปที่ เงื่อนไขที่อยูตน loop สําหรับ for loop จะสงกลับไปทํางานที่นิพจนชดุ ที่ 3(at-every-iteration)

12. การใชงานวัตถุสตริง(String Object) วัตถุ String เปนตัวแปรที่มีคา คงที่ที่เปนสายอักขระ(string)ในตัวเอง โดยวัตถุนี้มีเมธอดตางๆ โดยมี รูปแบบการใชงาน ดังนี้ x = stringObject.method( ) เปนการกําหนดใหตวั แปร x เก็บคาที่ไดจากเมธอด ผลที่ไดอาจเปนสายอักขระ(string) หรือ อักขระ (char) หรือตัวเลข(number) เมธอดเกี่ยวกับการเปลี่ยนตัวอักษรไดแก toUpperCase( ) เปลี่ยน string ใหเปนอักษรตัวใหญทั้งหมด toLowerCase( ) เปลี่ยน string ใหเปนอักษรตัวเล็กทั้งหมด ตัวอยาง เชน a = “Happy New Year” b = a.toUpperCase( ) คาของตัวแปร b จะเทากับ “HAPPY NEW YEAR” c = d.toLowerCase( ) คาของตัวแปร c จะเทากับ “happy new year” เมธอดหาความยาวของสายอักขระ เมธอด length ใชหาความยาวของ string (จํานวนอักขระในสายอักขระ) ตัวอยางเชน หนา 22 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

a = “Happy New Year” len = a.length // คาของตัวแปร len จะเทากับ 14 m = ““ len = m.length //คาของตัวแปร len จะเทากับ 0 เมธอด indexOf และ lastIndexOf indexOf ใชในการหาตําแหนงของตัวอักษรที่ตองการในสายอักขระ โดยเริ่มตนหาจากตําแหนงแรก ซึ่ง เริ่มตนที่ 0 last IndexOf ใชในการหาตําแหนงของตัวอักษรที่ตองการในสายอักขระ โดยเริ่มตนหาจากตําแหนง สุดทาย name = “Preeyanut” offset = name.indexOf (“P”) คาของตัวแปร offset จะเทากับ 0 offset = name.indexOf (“y”) คาของตัวแปร offset จะเทากับ 4 offset = name.indexOf (“x”) คาของตัวแปร offset จะเทากับ -1 offset = name.lastIndexOf (“e”) คาของตัวแปร offset จะเทากับ 3 เมธอด charAt ใชในการดึงอักขระตัวหนึ่งในตําแหนงที่กาํ หนด index ให มีรูปแบบคือ stringObject.charAt (index) ตัวอยาง เชน x = “pookie”.charAt (0) คาของตัวแปร x จะเทากับ p x = “pookie”.charAt (3) คาของตัวแปร x จะเทากับ k x = “pookie”.charAt (7) คาของตัวแปร x จะเทากับ “ “ เมธอด substring ใชดึงสายอักขระยอย(substring) จากสายอักขระที่กําหนด โดยเริ่มที่ตําแหนงตัวชี้เริ่มตน และสิ้นสุดที่ ตําแหนงตัวชีส้ ิ้นสุด มีรูปแบบคือ stringObject.substring (startIndex, stopIndex) clip = “Kob Suwanan”.substring (2,5) คาของตัวแปร clip จะเทากับ“b S” clip = “Kob Suwanan”.substring (1,5) คาของตัวแปร clip จะเทากับ“ob S” clip = “Kob Suwanan”.substring (0,0) คาของตัวแปร clip จะเทากับ “ “

13. การใชงานวัตถุคณิตศาสตร(Math object) หนา 23 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

วัตถุ Math มีคุณสมบัติ และเมธอดที่อํานวยความสะดวกในการทํางานทางคณิตศาสตร ไมวาจะเปนใน รูปแบบที่เปนคาคงที่ หรือเปนฟงกชั่น โดยมีรูปแบบการใชงานคือ Math.method( ) เชน Math.sqrt(25) ในกรณีที่ผูใชไมตองการพิมพคําวา Math หลายครั้ง สามารถใชคําสั่ง with เพื่อชวยลดการพิมพคาํ วา Math ที่อยู หนาฟงกชั่นทางคณิตศาสตรไดเชน ใช x = sqrt (v) แทน x = Math.sqrt (v) รูปแบบ with (Math) { statements } ตัวอยางของ Math functions ไดแก ceil(v) หาจํานวนเต็มถัดไปที่มากกวา v floor(v) หาจํานวนเต็มถัดไปที่นอยกวา v max(v1,v2) หาตัวที่มากกวาระหวาง v1 กับ v2 min(v1,v2) หาตัวทีน่ อยกวาระหวาง v1 กับ v2 pow(v1,v2) หาคา v1 ยกกําลัง v2 random( ) ใหคาสุมระหวาง 0 กับ 1 round(v) ใหคาที่ปดเศษทศนิยม 0.5 แลว sqrt(v) ใหคารากที่สองของ v ตัวอยางการใชงาน Math function x = pow (2,3) // คาผลลัพธที่ไดคือ ranNum = random ( ) // คาผลลัพธที่ไดคือ k = round (63.724) // คาผลลัพธที่ไดคือ myNum = sqrt (3) // คาผลลัพธที่ไดคือ

x=8 ranNum = .0163914 k = 64 myNum = 1.732

คาคงที่ทางคณิตศาสตร(Math constants) เปน properties ที่ใหคาคงทีท่ ี่ใชกันแพรหลายและรูจักกันดี ความถูกตองแมนยําประมาณ 14 หลักไดแก Math.PI ใหคา Pi Math.SQRT2 ใหคารากที่สองของ 2 Math.E ใหคาธรรมชาติ Math.LN2 ใหคา Ln2

หนา 24 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

การแปลงสายอักขระเปนตัวเลข parseInt ( ) ใชเปลี่ยนสายอักขระ(string) เปน เลขจํานวนเต็ม(integer) parseFloat ( ) ใชเปลี่ยนสายอักขระ(string) เปน เลขทศนิยม(floating-point) ถา string ที่กําหนดไมใชตวั เลข จะได NaN จํานวนที่ไดอาจจะมีเครื่องหมาย - หรือ + หรือเปนเลข 0–9

14. การจัดการรูปภาพดวยจาวาสคริปท วัตถุรูปภาพถูกสรางเมื่อตองการแทรกภาพลงในเว็บเพจ ในการอางอิงรูปภาพในเว็บเพจนัน้ ใหพจิ ารณา จากตัวอยาง เชน ถาในเว็บเพจมีรูปภาพอยู 3 รูป ถาตองการอางอิงรูปเหลานั้นดวยจาวาสคริปท ทําไดโดย document.images[0] document.images[1] document.images[2]

//อางถึงรูปที่ 1 //อางถึงรูปที่ 2 //อางถึงรูปที่ 3

ซึ่งรูปในจาวาสคริปทจะถูกมองเปนลักษณะของ Array ของรูปภาพ นอกจากการอางอิงแบบนี้แลว ยัง สามารถอางรูปไดโดยการตัง้ ชื่อใหกับรูปแตละรูป ทําใหสะดวกในการอางอิงภายหลัง ตัวอยาง เชน

จากตัวอยางขางบน สามารถอางถึงรูปดังกลาวไดโดย document.images["myimage01"] เมื่อสามารถอางรูปไดแลว สามารถสรางภาพเคลื่อนไหว ไดโดยประยุกตใชกับตัวจัดการเหตุการณ onmouseover และ onmouseout ดังตัวอยาง

หนา 25 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

โดยจาวาสคริปทที่อยูในสวนของแท็ก นั้นเปนการโหลดรูปภาพมาเตรียมไวลว งหนา กอนที่จะถูกเรียกใชงาน เพื่อหลีกเลี่ยงความลาชาเมื่อใชสลับรูปภาพกรณีใชกับ onmouseover และ onmouseout

15. การเปดหนาตางขึ้นมาใหมดวยจาวาสคริปท การเปดวินโดวขึ้นมาใหมสามารถทําไดโดยใชฟงกชั่นจาวาสคริปท ซึ่งมีหลักการใชดงั นี้ window.open('URL to open','window name','attribute1,attribute2,...') การใชฟงกชนั่ window.open เปนการสั่งใหโปรแกรมบราวเซอรแสดงหนาตางขึ้นมาใหม ซึ่งการ กําหนด แอททริบิวท (attribute) จะคัน่ แตละแอททริบิวทดวยจุลภาค โคดขางบนสามารถอธิบายไดดังนี้ เปน URL ของเว็บเพจที่ตองการแสดงในหนาตางใหม 'url to open' กําหนดชื่อของหนาตางใหม เพื่อใชอางอิงในภายหลัง (หากมีความจําเปนตองใช) 'window name' 'attribute1,attribute2' กําหนดแอททริบิวทที่ตองการใชซึ่งแอททริบิวทเหลานีก้ ําหนดหนาตาของ หนาตาง ใหม ตัวอยางการใชแอททริบิวทของการเปดหนาตางใหม เชน width=300 กําหนดความกวางของหนาตางใหม height=200 กําหนดความสูงของหนาตางใหม resizable=yes | no กําหนดวาผูใชสามารถปรับขนาด (resize) หนาตางใหมหรือไม scrollbars=yes | no กําหนดวาหนาตางใหมจะมี scroll bar หรือไม toolbar=yes | no กําหนดวาหนาตางใหมจะมีทูลบาร (tool bars) เชน บัตตอน Back หรือ Forward ฯลฯ หรือไม location=yes | no กําหนดวาหนาตางใหมจะมีชองสําหรับแสดงและเติมแอดเดรส หนา 26 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

ของเว็บเพจหรือไม (ชองที่แสดง http://www.....) directories=yes | no กําหนดวาหนาตางใหมจะมีบัตตอนอื่น ๆ เชน What's new, What's cool หรือไม status=yes | no กําหนดวาหนาตางใหมจะมีสเตตัสบารหรือไม menubar=yes | no กําหนดวาหนาตางใหมจะมีเมนูบาร (File, Edit, etc..) หรือไม copyhistory=yes | no กําหนดวาจะใหทําการคัดลอกรายการประวัต(ิ History List) จากหนาตางปจจุบันที่เปดอยูแ ลวไปยัง หนาตางใหมดว ยหรือไม ตัวอยางตอไปนี้เปนการเปดหนาตางใหมดว ยจาวาสคริปท

การโหลดซ้ํา, การปด, และการโหลดขอมูลใหมในหนาตางดวยจาวาสคริปท ในจาวาสคริปท สามารถเขียนโคดเพื่อทําหนาที่โหลดซ้ํา(Reload)ขอมูล และปดหนาตางบราวเซอรได ในการโหลดซ้าํ ขอมูลเดิมทําไดโดย window.location.reload() ในการปดหนาตาง ทําไดโดย window.close() นอกจากนี้จาวาสคริปทยังสามารถโหลดขอมูลใหมเขาไปยังหนาตางใดๆได คลายกับการทํางานของ แท็ก ใน HTML โดยมีรูปแบบดังนี้ window.location="your url" โดยคําสั่งขางตน เปรียบเหมือนคําสั่ง ดานลางในภาษา HTML ตัวอยางตอไปเปนการใหผูใชเลือกเพื่อเปดเว็บเพจของ Geocities หรือ CNN

หนา 27 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

16. การเขาถึงฟอรมดวยการใชจาวาสคริปท ในการเขาถึงสวนประกอบตางๆในฟอรม ทําไดโดยรูปแบบคําสั่งตอไปนี้ document.formname.elementname.value ตัวอยาง เชน ถามีฟอรมดังนี้

หากตองการใหจาวาสคริปทแสดงกรอบเตือน ดวยขอความในชองเท็กซบ็อกซนั้น เมือ่ กดปุม Click Hereทําไดโดย

ในกรณีที่ตองการอางถึงเท็กซบ็อกซมากกวา 1 ชองก็ทําไดในทํานองเดียวกัน ยกตัวอยางเชน การ คํานวณคานิพจนในเท็กซบอ็ กซชองแรก และแสดงผลลัพธที่ไดในเท็กซบ็อกซชองที่สอง ดังตัวอยาง

หนา 28 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

จากตัวอยางขางตน ฟงกชั่น eval(.........) เปนฟงกชั่นที่มอี ยูแลวภายใน(Built-in Function) ที่ทําหนาที่ ในการประมวลคาในเท็กซบอ็ กซชองแรก การตรวจสอบฟอรม สามารถใชจาวาสคริปทในการตรวจสอบสิ่งที่ผูใชปอนเขาไปยังฟอรม วาถูกตองตามที่ตองการหรือไม และใหผูใชปอ นขอมูลใหมในกรณีที่เติมขอมูลไมครบ หรือแกไขขอมูลในกรณีที่ปอ นขอมูลไมถูกตองได การใชตัวจัดการเหตุการณ onBlur และ onSubmit onblur: รันจาวาสคริปท เมื่อผูใชเปลี่ยนตําแหนงไปยังตําแหนงอืน่ ในฟอรม หรือกลาวคือ เมื่อผูใชคลิก เมาสที่สวนประกอบภายในฟอรม และยายไปคลิกบริเวณอื่นนอกเหนือไปจากสวนประกอบเดิมนัน้ onsubmit: รันจาวาสคริปทเมื่อผูใชคลิกปุม Submit ตัวอยางตอไปนี้ เปนการตรวจสอบ e-mail address ของผูใช วามีการปอนอักษร @ ใน e-mail address หรือไม ถาไมมี ใหผูใชปอนใหม โดยเมธอด focus() ใชในการกําหนดตําแหนงปจจุบันของเคอรเซอร เพื่อใชใน การแกไขขอมูล เชน

หนา 29 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

จากรูปถาผูใชปอน E-Mail โดยไมมีตวั อักษร @ และคลิ๊กปุม Submit จะปรากฏ ดังรูป

หนา 30 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

ตอไปเปนตัวอยางในการตรวจสอบวาผูใชปอ นขอมูลลงในชอง feedback หรือไม

หนา 31 จาก 32

ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร ม.บูรพา

คําสั่ง "return true" และ "return false" ใชในกรณีที่อนุญาตใหฟอรมทําการ Submit หรือ ไม ตามลําดับ โดย การสงคา false กลับ เปนการหามไมใหเกิดการ Submit ที่สมบูรณขึ้นนั่นเอง onsubmit="return validate()" เปนการสงคาของฟงกชั่น validate() ซึ่งมีคา "true/false" กลับ

หนา 32 จาก 32