FrontPage 2000 Crazy Club logo

สนับสนุนโดย



Orbit : นิยายวิทยาศาสตร์
Search Now:
In Association with Amazon.com

 
ไปตอนบนสุด
 

FrontPage ก ข ค

[ < ก่อนหน้า ] [ ย้อนขึ้น ] [ ต่อไป > ]

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

ทดลองใช้ JavaScript อย่างง่ายๆ

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

ตัวอย่างที่ 1

  1. เปิดโปรแกรม FrontPage แล้วพิมพ์ข้อความต่อไปนี้ ลงในเว็บเพจใหม่ พร้อมทั้งกำหนดสีเป็นสีม่วง

สวัสดีครับ

  1. เปิดโปรแกรม Notepad โดยคลิกที่ปุ่ม Start ของ Windows แล้วเลือกคำสั่ง
    Programs Accessories Notepad

  2. พิมพ์โค้ดต่อไปนี้ลงใน Notepad

<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("สวัสดีค่ะ")
// -->
</SCRIPT>

  1. คลิกขวาบนวินโดว์ Notepad แล้วเลือกคำสั่ง Select All โค้ดทั้งหมดจะถูกเลือก

  2. กดคีย์ Ctrl+C (หรือเลือกคำสั่ง Edit Copy) เพื่อก๊อปปี้โค้ด

  3. สลับไปที่โปรแกรม FrontPage แล้ววางเคอร์เซอร์ด้านหลังข้อความที่พิมพ์ไว้

  4. เลือกคำสั่ง Insert Advanced HTML

  5. กดคีย์ Ctrl+V เพื่อวางโค้ดที่ก๊อปปี้มาลงในไดอะล็อกบ็อกซ์ HTML Markup

  1. คลิกปุ่ม OK

  2. คลิกแท็บ Preview เพื่อดูผลลัพธ์ ซึ่งจะเป็นดังนี้

ในตัวอย่างข้างต้น ข้อความ "สวัสดีครับ" เกิดจากคำสั่ง HTML ส่วนข้อความ "สวัสดีค่ะ" เกิดจากคำสั่ง JavaScript แต่ทั้งคู่สามารถแสดงปะปนกันบน
เว็บเพจ โดยที่ผู้ชมจะไม่สามารถแยกออกเลย

คำสั่ง document.write เป็นคำสั่งสำหรับแทรกข้อความลงไปในเว็บเพจ โดยข้อความจะต้องอยู่ภายในเครื่องหมายคำพูด "..." และพิมพ์ต่อเนื่องกันไปเรื่อยๆ โดยไม่มีการกดคีย์    เพื่อขึ้นบรรทัดใหม่

 

ตัวอย่างที่ 2

  1. ต่อเนื่องจากตัวอย่างข้างต้น ให้สลับไปที่โปรแกรม Notepad แล้วแก้ไขโค้ดให้เป็นดังนี้

<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("<FONT COLOR='green'>สวัสดีค่ะ</FONT>")
// -->
</SCRIPT>

  1. ก๊อปปี้โค้ดทั้งหมดใน Notepad โดยใช้วิธีที่อธิบายไปแล้ว

  2. สลับไปที่โปรแกรม FrontPage, คลิกแท็บ Normal แล้วดับเบิลคลิกที่สัญลักษณ์ 

  3. คลิกขวาบนไดอะล็อกบ็อกซ์ HTML Markup แล้วเลือกคำสั่ง Select All โค้ดทั้งหมดจะถูกเลือก

  4. กดคีย์ Ctrl+V เพื่อวางโค้ดที่ก๊อปปี้มาลงไปแทน แล้วคลิกปุ่ม OK

  5. คลิกแท็บ Preview เพื่อดูผลลัพธ์ ซึ่งจะเป็นดังนี้

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

ตามปกติ การกำหนดค่าแอตทริบิวต์ในแท็ก HTML เราจะใช้เครื่องหมาย "..." เช่น color="green" แต่เมื่อแท็กนี้ถูกนำไปใช้เป็นข้อความ หรือค่าตัวแปร ใน JavaScript ซึ่งมีเครื่องหมาย "..." อยู่แล้ว ดังนั้นใน HTML เราจึงต้องเปลี่ยนไปใช้เครื่องหมาย '...' แทน เช่นในตัวอย่างข้างต้น ซึ่งใช้ว่า color='green'

 

ตัวอย่างที่ 3

  1. เปิดโปรแกรม Notepad แล้วพิมพ์โค้ด 2 ชุด ต่อไปนี้

<SCRIPT>
<!--
function bar(widthPct)
{
    document.write("<HR WIDTH=" + widthPct + ">")
}
// -->
</SCRIPT>

 

<SCRIPT>
<!--
bar(100)
bar(200)
bar(300)
// -->
</SCRIPT>

  1. ก๊อปปี้โค้ดชุดแรก (สีน้ำเงิน)

  2. สลับไปที่โปรแกรม FrontPage, สร้างเว็บเพจใหม่ แล้วคลิกแท็บ HTML

  3. วางเคอร์เซอร์ที่หน้าแท็ก </head>, กดคีย์ Ctrl+V เพื่อวางโค้ด และกดคีย์ 1 ครั้ง ผลที่ได้จะเป็นดังรูป

  1. สลับไปที่ Notepad แล้วก๊อปปี้โค้ดชุดที่ 2 (สีม่วง)

  2. สลับไปที่ FrontPage แล้วคลิกแท็บ Normal

  3. เลือกคำสั่ง Insert Advanced HTML , กดคีย์ Ctrl+V เพื่อวางโค้ด แล้วคลิก OK

  4. คลิกแท็บ Preview เพื่อดูผลลัพธ์ ซึ่งจะเป็นดังนี้

ตัวอย่างนี้แสดงการใช้ฟังก์ชั่น (function) ซึ่งเป็นวิธีกำหนดโปรแกรมย่อย (subroutine) สำหรับให้เรียกใช้ซ้ำๆได้ โค้ดชุดแรกในตัวอย่างนี้ คือส่วนที่กำหนดฟังก์ชั่น และโค้ดชุดที่ 2 เป็นส่วนที่เรียกใช้ โดยฟังก์ชั่นในตัวอย่างนี้จะทำหน้าที่สร้างเส้นคั่น ที่มีความกว้างต่างๆกัน ตามค่าที่ถูกส่งไปให้ในการเรียกใช้แต่ละครั้ง คือ 100, 200 และ 300 พิกเซล ตามลำดับ

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

เนื่องจากใน FrontPage ไม่มีวิธีให้เราแทรกโค้ดลงในส่วน <head>...</head> ได้ทางแท็บ Normal ดังนั้นเวลาแทรกฟังก์ชั่น เราจึงต้องคลิกไปที่แท็บ HTML แล้วทำตามขั้นตอนในข้อ 4 ข้างต้น ส่วนโค้ดที่เรียกใช้ฟังก์ชั่นนั้น ตามปกติจะอยู่ที่ส่วน <body>...</body> ของเว็บเพจ เราจึงสามารถแทรกโดยใช้คำสั่ง Insert Advanced HTML ซึ่งจะทำให้สะดวกในการแก้ไขมากกว่า

 

[ < ก่อนหน้า ] [ ย้อนขึ้น ] [ ต่อไป > ]
 

Copyright © 2000-2003, Creative Ideas.  All rights reserved.
Webmaster : webmaster@provision.co.th