FrontPage 2000 Crazy Club logo
Search Now:
In Association with Amazon.com
ไปตอนบนสุด
 

FrontPage ก ข ค

การใช้ JavaScript ร่วมกับ FrontPage (1)

JavaScript คืออะไร?

JavaScript เป็นภาษาโปรแกรม (programming language) ประเภทหนึ่ง ที่เรียกกันว่า "สคริปต์" (script) ซึ่งมีวิธีการทำงานในลักษณะ "แปลความและดำเนินงานไปทีละคำสั่ง" (interpret) ภาษานี้เดิมมีชื่อว่า LiveScript ได้รับการพัฒนาขึ้นโดย Netscape ด้วยวัตถุประสงค์ เพื่อที่จะช่วยให้เว็บเพจสามารถแสดงเนื้อหา ที่มีการเปลี่ยนแปลงไปได้ ตามเงื่อนไขหรือสภาพแวดล้อมต่างๆกัน หรือสามารถโต้ตอบกับผู้ชมได้มากขึ้น ทั้งนี้เพราะภาษา HTML แต่เดิมนั้น เหมาะสำหรับใช้แสดงเอกสาร ที่มีเนื้อหาคงที่แน่นอน และไม่มีลูกเล่นอะไรมากมายนัก

เนื่องจาก JavaScript ช่วยให้ผู้พัฒนา สามารถสร้างเว็บเพจได้ตรงกับความต้องการ และมีความน่าสนใจมากขึ้น ประกอบกับเป็นภาษาเปิด ที่ใครก็สามารถนำไปใช้ได้ ดังนั้นจึงได้รับความนิยมเป็นอย่างสูง มีการใช้งานอย่างกว้างขวาง รวมทั้งได้ถูกกำหนดให้เป็นมาตรฐานโดย ECMA ซึ่งเราจะพบว่าปัจจุบัน จะหาเว็บเพจที่ไม่ใช้ JavaScript เลยนั้น ได้ยากเต็มที

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

การทำงานของ JavaScript เกิดขึ้นบนบราวเซอร์ (เรียกว่าเป็น client-side script) ดังนั้นไม่ว่าคุณจะใช้เซิร์ฟเวอร์อะไร หรือที่ไหน ก็ยังคงสามารถใช้ JavaScript ในเว็บเพจได้ ต่างกับภาษาสคริปต์อื่น เช่น Perl, PHP หรือ ASP ซึ่งต้องแปลความและทำงานที่ตัวเครื่องเซิร์ฟเวอร์ (เรียกว่า server-side script) ดังนั้นจึงต้องใช้บนเซิร์ฟเวอร์ ที่สนับสนุนภาษาเหล่านี้เท่านั้น อย่างไรก็ดี จากลักษณะดังกล่าวก็ทำให้ JavaScript มีข้อจำกัด คือไม่สามารถรับและส่งข้อมูลต่างๆ กับเซิร์ฟเวอร์โดยตรง เช่น การอ่านไฟล์จากเซิร์ฟเวอร์ เพื่อนำมาแสดงบนเว็บเพจ หรือรับข้อมูลจากผู้ชม เพื่อนำไปเก็บบนเซิร์ฟเวอร์ เป็นต้น ดังนั้นงานลักษณะนี้ จึงยังคงต้องอาศัยภาษา server-side script อยู่ (ความจริง JavaScript ที่ทำงานบนเซิร์ฟเวอร์เวอร์ก็มี ซึ่งต้องอาศัยเซิร์ฟเวอร์ที่สนับสนุนโดยเฉพาะเช่นกัน แต่ไม่เป็นที่นิยมนัก)

การทำงานของ JavaScript จะมีประสิทธิภาพมาก ถ้ามันสามารถดัดแปลงคุณสมบัติ ขององค์ประกอบต่างๆ บนเว็บเพจ (เช่น สี หรือรูปแบบของข้อความ) และสามารถรับรู้เหตุการณ์ ที่ผู้ชมเว็บเพจโต้ตอบกับองค์ประกอบเหล่านั้น (เช่น การคลิก หรือเลื่อนเมาส์ไปวาง) ได้ ดังนั้นจากภาษา HTML เดิม ที่มีลักษณะสถิต (static) ใน HTML เวอร์ชั่นใหม่ๆ จึงได้มีการพัฒนาให้มีคุณสมบัติบางอย่างเพิ่มขึ้น และมีลักษณะเป็นอ็อบเจ็ค "object" มากขึ้น การทำงานร่วมกันระหว่างคุณสมบัติใหม่ของ HTML ร่วมกับ JavaScript นี้เอง ทำให้เกิดเป็นสิ่งที่เรียกว่า Dynamic HTML คือภาษา HTML ที่สามารถใช้สร้างเว็บเพจที่มีลักษณะพลวัต (dynamic) ได้นั่นเอง

นอกจากนี้ อีกองค์ประกอบหนึ่งที่เกี่ยวข้อง ก็คือ Cascading Style Sheet (CSS) ซึ่งเป็นภาษาที่ช่วยให้เราควบคุมรูปแบบ ขององค์ประกอบต่างๆ บนเว็บเพจ ได้อย่างมีประสิทธิภาพมากกว่าคำสั่ง หรือแท็ก (tag) ปกติของ HTML เนื่องจาก JavaScript สามารถดัดแปลงคุณสมบัติของ CSS ได้เช่นกัน ดังนั้นมันจึงช่วยให้เราควบคุมเว็บเพจ ได้อย่างมีประสิทธิภาพมากมากยิ่งขึ้นไปอีก

อนึ่ง บทความนี้ไม่ได้มีจุดประสงค์เพื่อสอน การเขียนโปรแกรม JavaScript เพียงแต่ต้องการแนะนำให้รู้จักอย่างคร่าวๆ ให้รู้ถึงโครงสร้างของภาษา และพอที่จะดัดแปลงโค้ดที่แจกฟรีบ้างเล็กๆ น้อยๆ ตลอดจนสามารถนำโค้ดดังกล่าว มาใช้กับเว็บเพจที่สร้างด้วย FrontPage ได้อย่างถูกวิธีเท่านั้น

คุณสามารถหาข้อมูลเพิ่มเติม เกี่ยวกับ JavaScript ได้จากแหล่งต่างๆ ต่อไปนี้

คู่มือ JavaScript แบบออนไลน์

DevEdge Online - Online Java Script Reference Manual 

แหล่งที่มีโค้ดให้ก๊อปปี้มาใช้ได้ฟรี

Webcode : JavaScript tip and technics for thai web developer 

เทคนิค Java และ รวม Script ต่าง ๆ 

The JavaScript Source 

Dynamic Drive DHTML(dynamic html) code library! 

Website Abstraction Free JavaScripts! 

โค้ด JavaScript และแท็ก HTML

ในการใช้งาน JavaScript เราจะต้องแทรกโค้ดของมัน เข้าไประหว่างแท็กของภาษา HTML ในเว็บเพจ โดยใช้แท็ก <SCRIPT>...</SCRIPT> ซึ่งมีวิธีใช้แบบง่ายๆ ดังนี้

<SCRIPT>
    โค้ด JavaScript...
</SCRIPT>

อย่างไรดี ถ้าต้องการให้โค้ดชุดนี้สมบูรณ์ขึ้น เราควรจะเพิ่มองค์ประกอบอื่นๆ เสริมเข้าไปด้วย ซึ่งจะทำให้โค้ดมีลักษะดังนี้

<SCRIPT LANGUAGE="JavaScript">
<!-- จุดเริ่มต้น
โค้ด JavaScript...
//
จุดสิ้นสุด -->
</SCRIPT>

โปรดสังเกตว่า ในโค้ดข้างต้น ส่วนที่เป็น สีน้ำเงิน คือแท็ก HTML ส่วนที่เป็น สีเลือดหมู คือโค้ด JavaScript สำหรับความหมายของส่วนประกอบต่างๆ คือ

<SCRIPT>...</SCRIPT>
เป็นแท็กของภาษา HTML ที่ใช้สำหรับแทรกโค้ดภาษาสคริปต์ เข้าไปในเว็บเพจ (อาจเป็น JavaScript หรือภาษาสคริปต์อื่นๆ)

LANGUAGE="JavaScript"
เป็นส่วนที่ระบุว่า ภาษาที่ใช้คือ JavaScript โดยอาจมีการบอกเวอร์ชั่นของโค้ดไว้ด้วย เช่น
LANGUAGE="JavaScript1.1"
หรือ
LANGUAGE="JavaScript1.2"

ซึ่งบราวเซอร์จะไม่รันโค้ดนี้ หากเป็นเวอร์ชั่นที่มันไม่สนับสนุน

<!-- และ -->
เป็นแท็ก HTML ที่ใช้บอกว่า ข้อมูลทั้งหมดที่อยู่ระหว่างแท็กทั้ง 2 นี้เป็นหมายเหตุ (comment) ซึ่งบราวเซอร์จะไม่ใช้ในการทำงาน เหตุที่ต้องใส่แท็กชุดนี้ครอบไว้ ก็เพื่อไม่ให้บราวเซอร์ที่ไม่รู้จัก JavaScript เข้าไปแปลโค้ดที่อยู่ภายใน ซึ่งจะทำให้เกิด error

//           เป็นคำสั่ง JavaScript ที่ใช้บอกว่าข้อมูลในบรรทัดนี้เป็นหมายเหตุ ซึ่งจะทำให้ไม่ถูกรัน (ถ้ารันจะเกิด error เนื่องจากข้อมูลในบรรทัดนี้ ไม่ใช่โค้ด JavaScript)

สำหรับข้อความ "จุดเริ่มต้น" และ "จุดสิ้นสุด" นั้น คุณจะใส่ไว้หรือไม่ หรือจะเปลี่ยนเป็นข้อความอื่นก็ได้ เช่น Begin และ End

เนื่องจากโค้ด JavaScript จะถูกรันเฉพาะในบราวเซอร์ที่สนับสนุน ดังนั้นหากผู้ชมใช้บราวเซอร์ที่ไม่สนับสนุน หรือบราวเซอร์นั้นถูกตั้งออปชั่นไว้ไม่ให้รัน JavaScript ผู้ชมรายนั้นก็จะไม่เห็นผลลัพธ์เลย หากต้องการให้มีอะไรแสดงขึ้นมาแทน หรือเป็นคำเตือนว่ารันสคริปต์ไม่ได้ เราสามารถใส่ไว้ระหว่างแท็ก <NOSCRIPT>...</NOSCRIPT> ดังนั้นตัวอย่างโค้ดที่สมบูรณ์จะเป็นดังนี้

<SCRIPT LANGUAGE="JavaScript">
<!-- จุดเริ่มต้น
โค้ด JavaScript...
//
จุดสิ้นสุด -->
</SCRIPT>
<NOSCRIPT>

โค้ด HTML สำหรับแทนสคริปต์ ...
</NOSCRIPT>