การแทรก JavaScript

           JavaScript เป็นภาษายุคใหม่สำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ตที่กำลังได้รับความนิยมอย่างสูง เราสามารถเขียน โปรแกรม JavaScript เพิ่มเข้าปในเว็ปเพจเพื่อใช้ประโยชน์สำหรับงานด้านต่าง ๆ ทั้งการคำนวณ การแสดงผล การรับ-ส่งข้อมูล และที่ สำคัญคือ สามารถโต้ตอบกับผู้ใช้ได้อย่างทันทีทันได นอกจากนี้ยังมีความสามารถด้านอื่น ๆ อีกหลายประการที่ช่วยสร้างความน่าสนใจให้ กับเว็บเพจของเราได้อย่างมาก ภาษาจาวาสคริปต์ถูกพัฒนาโดย เน็ตสเคปคอมมิวนิเคชันส์ (Netscape Communications Corporation) โดยใช้ชื่อว่า Live Script ออกมาพร้อมกับ Netscape Navigator2.0 เพื่อใช้สร้างเว็บเพจโดยติดต่อกับเซิร์ฟเวอร์แบบ Live Wire ต่อมาเน็ตสเคปจึงได้ร่วมมือกับ บริษัทซันไมโครซิสเต็มส์ปรับปรุงระบบของบราวเซอร์เพื่อให้สามารถติดต่อใช้งานกับภาษาจาวาได้ และได้ปรับปรุง LiveScript ใหม่เมื่อ ปี 2538 แล้วตั้งชื่อใหม่ว่า JavaScript
ลักษณะการทำงานของ JavaScript
JavaScript เป็นภาษาสคริปต์เชิงวัตถุ หรือเรียกว่า อ็อบเจ็กโอเรียลเต็ด (Object Oriented Programming) ที่มีเป้าหมายในการ ออกแบบและพัฒนาโปรแกรมในระบบอินเทอร์เน็ต สำหรับผู้เขียนเอาสารด้วยภาษา HTML สามารถทำงานข้ามแพลตฟอร์มได้ทำงานร่วมกับ ภาษา HTML และภาษาจาวาได้ทั้งทางฝั่งไคลเอนต์ (Client) และ ทางฝั่งเซิร์ฟเวอร์ (Server) โดยมีลักษณะการทำงานดังนี้ 1. Navigator JavaScript เป็น Client-Side JavaScript ซึ่งหมายถึง JavaScript ที่ถูกแปลทางฝั่งไคลเอนต์ (หมายถึงฝั่งเครื่อง คอมพิวเตอร์ของผู้ใช้ ไม่ว่าจะเป็นเครื่องพีซี เครื่องแมคอินทอช หรือ อื่น ๆ) จึงมีความเหมาะสมต่อการใช้งานของผู้ใช้ทั่วไปเป็นส่วนใหญ่ 2. LiveWire JavaScript เป็น Server-Side JavaScript ซึ่งหมายถึง JavaScript ที่ถูกแปลทางฝั่งเซิร์ฟเวอร์ (หมายถึงฝั่งเครื่อง คอมพิวเตอร์ของผู้ให้บริการเว้บ โดยอาจจะเป็นเครื่องของซันซิลิคอมกราฟิกส์ หรือ อื่น ๆ) สามารถใช้ได้เฉพาะกับ LIveWire ของเน็ตสเคป โดยตรง

เมื่อไหร่ต้องใช้ JavaScript ?

          เราจะใช้ JavaScript เมื่อต้องการทำให้ เวบเพจแสดงผลแบบเคลื่อนไหวได้ มีชีวิตชีวา ไม่แข็งทื่อ หรือใช้ในการสั่งให้ บราวเซอร์ทำงานตามที่เราต้องการ โดยงานนั้น อาจเกินความสามารถ ของภาษา HTML แต่ไม่ใช่งานที่ต้องติดต่อกับ Server นั่นเพราะ JavaScript เป็นภาษาที่ใช้ในการเขียนโปรแกรมทางฝั่ง cliend โดยมีบราวเซอร์เป็นตัวแปลภาษานั่นเอง ตัวอย่างของงาน ที่จะต้องใช้ภาษา JavaScript เช่น 

• สร้างเมนูที่สามารถตอบสนองต่อการเอา mouse ไปชี้ได้
• สร้างเครื่องคิดเลข ปฏิทิน เกม ในเวบเพจ
• เปิด,ปิด,เคลื่อนย้ายตำแหน่งของ window
• ทำตัวอักษรวิ่งแบบต่างๆ
• ตรวจสอบความถูกต้องของแบบฟอร์มที่ผู้ใช้กรอก ก่อนส่งข้อมูลไปยัง Server
• และอื่นๆ อีกมากมายที่ไม่ต้องติดต่อกับ Server

ต้องรู้อะไรก่อนที่จะเรียน JavaScript ?

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

แล้วต้องรู้ลึกแค่ไหนล่ะ ?

          ไม่ต้องถึงกับเก่งมากก็ได้ อย่างน้อยขอให้มีความรู้ระดับพื้นฐานก็พอ สามารถทำลิงก์ได้ ใส่ภาพได้ สร้างตารางได้ สร้างแบบฟอร์มได้ แค่นี้ก็เหลือรับประทานแล้ว

ยิ่งถ้ามีพื้นฐานการเขียนโปรแกรมอย่าง C,C++,Pascal ด้วยแล้ว จะทำให้เข้าใจ JavaScript ได้เร็วมากเลย

สิ่งที่ต้องเตรียมเมื่อจะเขียน JavaScript

          เนื่องจาก JavaScript เป็นภาษาที่ทำงานฝั่ง cliend ใช้เบราเซอร์เป็นตัวแปลภาษา ดังนั้นเราก็สบายสิ ^-^ ไม่ต้องเตรียมโปรแกรมอะไรพิเศษเลย มีแค่เบราเซอร์ที่เข้าใจภาษา JavaScript ซึ่งเบราเซอร์ส่วนใหญ่ ก็ทำได้อยู่แล้ว แต่ผมขอแนะนำ Internet Explorer 5.0 ขึ้นไปครับ เพราะสามารถรองรับการทำงานของ JavaScript ได้ดีที่สุด และอีกอย่างก็คือ Editor อะไรก็ได้ แม้แต่ Notepad (ตัวนี้ผมชอบมาก เพราะทั้งเล็กและเร็ว)

การใส่ JavaScript ลงในเวบเพจ

          คุณสามารถใส่ JavaScript ลงใน WebPage ของคุณได้โดยการใส่ Tag <script> และ </script> คร่อมคำสั่งต่างๆของ JavaScript และกำหนด Language เป็น JavaScript ครับ ดูจากตัวอย่างละกัน

สร้างการเชื่อมโยงไปยังอีเมล์ (Email Link)

	การทำลิงค์อีเมล์ (Email Link) นี้ จะเป็นการสร้างลิงค์เพื่อส่งอีเมล์ โดยเป็นการเรียกใช้โปรแกรมในเครื่องของผู้ใช้งานเอง เช่น Outlook Express สำหรับวิธีการทำลิงค์ด้วยโปรแกรม Dreamweaver ก็สามารถทำได้ ง่าย ๆ ดังนี้

	ขั้นตอนที่ 1 หลังจากทำการเปิดโปรแกรม Dreamweaver และเปิดไฟล์ที่ต้องการจะสร้างลิงค์ขึ้นมาแล้ว ให้ทำการคลิกที่เครื่องมือ Email Link ตามรูปตำแหน่งที่ 1 หรือ ใช้คำสั่ง Insert ---> Email Link ซึ่งจะปรากฏหน้าต่าง Email Link ตามรูปที่ตำแหน่งที่ 2

	ขั้นตอนที่ 2 ให้กรอกข้อความที่ต้องการจะลิงค์ และ Email Account ปลายทางที่ต้องการส่งอีเมล์ถึงผู้รับ (เมล์เจ้าของเว็บไซต์) หลังจากใส่ข้อมูลเสร็จแล้วก็ให้คลิกปุ่ม OK

การแทรกพื้นหลังเว็บเพจ

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

    ภาพพื้นหลังนั้นเรานิยมใช้ภาพขนาดเล็ก นำมาเรียงต่อกันจนเต็มเว็บเพจ เพื่อความรวดเร็วในการแสดงผลเว็บเพจด้วย ดังตัวอย่างพื้นหลังด้านล่าง 

รูปที่ใช้ทำพื้นหลัง 



เว็บเพจที่ใส่พื้นหลังเรียบร้อยแล้ว 

ใส่ภาพพื้นหลัง ให้เว็บเพจ

    1.เปิดหน้าเว็บเพจที่ต้องการปรับแต่ง 

    2.ไปที่ Menu เลือก Modify > Page Properties 

    3.จะมีหน้าต่างขึ้นมาดังรูปด้านล่าง 

    4.ที่ categoty ทางซ้ายมือเลือก appearance จะมีหน้าจอให้ปรับดังรูป 



    5.Background image ใช้กำหนดภาพพื้นหลังของเว็บเพจ โดยคลิกที่ Browse จะมีหน้าต่างให้เลือกภาพที่จะใช้แสดงเป็นพื้นหลัง 

    6.Repeat ใช้กำหนดการแสดงผลของภาพพื้นหลัง โดยมีคำสั่งดังนี้ 

        1.no-repeat ให้แสดงผลภาพพื้นหลังเพียงครั้งเดียว 

        2.repeat ให้แสดงผลภาพพื้นหลังซ้ำกันหลายๆครั้งจะเต็มพื้นที่เว็บเพจ 

        3.repeat-x ให้แสดงผลภาพพื้นหลังซ้ำกันเฉพาะในแนวนอนเท่านั้น 

        4.repeat-y ให้แสดงผลภาพพื้นหลังซ้ำกันเฉพาะในตั้งนอนเท่านั้น 

ถ้าไม่กำหนดในหัวข้อ Repeat ภาพพื้นหลังจะแสดงผลเต็มพื้นที่เว็บเพจอัตโนมัติ

สร้างการเชื่อมโยงโดยใช้ Rollover Image ใน Dreamweaver CS3

ในการเข้าเว็บไซต์บางที่ เมื่อเราเลื่อนลูกศรไปที่ปุ่มหรือคำสั่งใดๆ แล้วปุ่มหรือคำสั่งนั้นๆ มีการ เปลี่ยนรูปร่าง เช่น ปุ่มนูนขึ้น เปลี่ยนสี ลักษณะนี้ในโปรแกรม Dreamweaverเรียกว่า Rollover Image
1. ปุ่มโดยปกติเมื่อไม่ชี้เมาส์ที่ปุ่ม
2. เมื่อเลื่อนเมาส์ผ่าน ปุ่มจะเปลี่ยนเป็นอีกแบบหนึ่ง

วิธีสร้าง Rollover Image
1. คลิกตำแหน่งที่ต้องการแทรกปุ่ม
2. คลิกเมนู Insert>>Image Objects>>Rollover Image
3. ในกรอบข้อความที่ปรากฏขึ้นมา ให้กำหนดค่าดังนี้
Original Image ให้คลิกเลือกภาพที่จะให้ปรากฏบนจอตามปกติ คลิกปุ่ม Browse แล้วคลิก เลือกภาพ เช่น b_home.jpg
Rollover Image ให้คลิกเลือกภาพที่จะมีการเปลี่ยนแปลงเมื่อเลื่อนเมาส์ผ่าน หรือชี้ที่ภาพ นั้นๆ ให้คลิกเลือกภาพ b_home2.jpg
- Alternate Text ให้ระบุข้อความ หน้าหลัก เพื่อเป็นอีกทางเลือกหนึ่ง ในกรณีภาพมีปัญหา ไม่ปรากฏบนจอ ก็ยังมีข้อความให้ผู้ใช้เข้าใจได้ว่า ตัวเลือกนั้นคืออะไร
- When Clicked,GO To URL เมื่อคลิกจะให้เชื่อมโยงไปเว็บเพจใดก็คลิกและพิมพ์ชื่อลงไป เช่น index.php
4. กำหนดค่าเสร็จแล้ว คลิกปุ่ม OK

5. การกำหนดค่าปุ่มอื่นๆ กำหนดตามตัวอย่าง

ปรับแต่งคุณสมบัติลิงค์ใน Dreamweaver CS3

เปลี่ยนสีข้อความที่ได้สร้างลิงค์
1. ลิงค์ที่ได้สร้างการเชื่อมโยงไว้
2. ลิงค์ที่ถูกคลิก สีของข้อความจะเปลี่ยนเป็นอีกสีหนึ่ง

วิธีปรับแต่ง
1. คลิกเมนู Modify>>Page Properties
2. กำหนดค่า โดยแต่ละส่วนให้คลิกเลือกตามต้องการ
Link Color สีปกติของลิงค์ก่อนถูกคลิก
Visited links สีข้อความ เมื่อคลิกที่ลิงค์นั้นๆ แล้ว
Active links ลิงค์ที่กำลังเลือกอยู่ ในขณะนั้น

การเชื่อมโยง

9.การเชื่อมโยง (Link)
          โดยปกติหน้าของ Web จะมีการ Link  ไปยังหน้าอื่น ๆ เช่น เมื่อคลิกปุ่ม ข้อความหรือภาพที่ต้องการ Link  ก็สามารถ Link ไปยังหน้าที่เราต้องการได้ โดยปฏิบัติดังนี้
            1.คลิกเลือกปุ่มที่ต้องการจะ Link .ให้เกิด Active ดังภาพ
2.เลือกปุ่ม Browse for file เพื่อเลือกไฟล์ที่เราต้องการจะ Link ไปหา

            3.คลิกไฟล์ที่ต้องการ Link ไปหาแล้วเลือก Select ดังภาพ
       
            4.ปุ่มจะถูกกำหนดให้ Link  ไปยังไฟล์ data.html  ดังภาพ
           
            5.เมื่อ Link เสร็จแล้ว ลองกด  F12  ดู จะได้ดังภาพ
           
            6.กดปุ่มหน้าต่อไป จะปรากฏ ไฟล์ data.html ดังภาพ

การสร้างตัวหนังสือวิ่ง

8. การสร้างตัวหนังสือวิ่ง
การสร้างตัวหนังสือวิ่ง เราจะใช้ tag ของ html ซึ่ง Dreamweaver ได้อำนวยความสะดวก ทำให้เราใช้ได้อย่างง่ายมาก tag ที่จะใช้คือ marquee ซึ่งมีวิธีการดังนี้

1. 1.      กำหนดบริเวณที่จะให้ตัวหนังสือวิ่ง โดยใช้ layout table และ layout cell ดังภาพ

2.      พิมพ์ข้อความที่ต้องการให้วิ่ง

3.      ลากดำ หรือ hi-light ข้อความที่พิมพ์ และ ให้คลิกเลือก  [ Quick Tag Editor ] ที่ Properties ตามภาพข้างล่าง

4.      .จะเกิด Wrap Tag ขึ้น และอีก 2-3 วินาทีต่อมาจะมีชื่อ tag ต่าง ๆ เกิดขึ้นด้วย ให้เลื่อนลงมาเรื่อย ๆ และเลือก marquee ดังภาพ

5.      เมื่อคลิกแล้ว Dreamweaver จะนำ tag ไปไว้ ดังภาพ

6.      ให้คลิกปุ่ม enter จะปิด Wrap Tag

1. 7.      เมื่อกด F12 จะเห็นข้อความวิ่งในบริเวณที่กำหนด

การสร้างปุ่มที่เปลี่ยนแปลงเมื่อเมาส์ลากผ่าน

7. การสร้างปุ่มที่เปลี่ยนลักษณะเมื่อเมาส์ลากผ่าน
            บางครั้งเราต้องการดึงดูดความสนใจของผู้ใช้ เพื่อให้คลิกไปยังลิงค์ต่าง ๆ โดยเฉพาะเมื่อนำเมาส์ไปลากผ่านปุ่ม ปุ่มก็จะมีลักษณะเปลี่ยนไป เช่น มีแสงเกิดขึ้นที่ตัวอักษร หรือ ตัวอักษรเปลี่ยนสี เป็นต้น มีวิธีการทำดังนี้
1.สร้างปุ่ม 2 ปุ่ม ปุ่มแรก ชื่อ next01.jpg มีลักษณะปกติ ปุ่มที่สอง ชื่อ next02.jpg มีลักษณะที่ต้องการให้เกิดการเปลี่ยนแปลง เมื่อเมาส์ลากผ่าน เช่น
     
ปุ่มที่ 1 สภาพปกติ                      ปุ่มที่ 2 เมื่อเมาส์ลากผ่าน

1. 2.      นำภาพไปไว้ในห้องที่เก็บภาพ ซึ่งอยู่ใน site ที่กำลังทำงาน  คือ c:\education\images
2. 3.      เปิดโปรแกรม Dreamweaver แล้วนำ Cursor ไปวางในบริเวณที่ต้องการสร้างปุ่ม

4.      แล้วเลือกเมนูที่  Insert > Interactive Images > Rollover Image

5.      เมื่อคลิกจะเกิดหน้าจอเมนูเล็ก สำหรับระบุว่า ภาพทั้งสองภาพ ที่จะนำมาทำเป็นปุ่มนั้นอยู่ที่ไหน

6.      ให้คลิกปุ่ม Browse ของปุ่มแรก จะเกิดเมนูโต้ตอบ  ให้คลิกเลือกภาพปกติ ในตัวอย่างเลือกไฟล์ next01.jpg

7.      จากนั้นให้คลิกปุ่ม Browse สำหรับภาพที่จะให้เกิดเมื่อเมาส์ลากผ่าน และ เลือก ภาพที่ 2

8.      จากนั้น ให้คลิก OK

9.      จะปรากฎปุ่มให้เห็นในบริเวณที่กำหนด

10.  เมื่อกด F12 และวางเมาส์ผ่านปุ่มนี้ ปุ่มก็จะเปลี่ยนแปลงตามที่ต้องการ