JavaScript
>  Home   HTML   CSS   JavaScript   PHP   Perl   Photoshop   TCP/IP 


   

บทที่ 1 แนะนำภาษา JavaScript

          ผมยอมรับว่าการศีกษา JavaScript เป็นเรื่องง่ายครับ แต่ JavaScript ก็ต้องค่อยๆศึกษาเป็นขั้นตอน การอ่านเพียงหน้า 2 หน้า ยังไม่สามารถเอาไปทำอะไรได้หรอกครับ แต่ถ้าไม่อ่านก็จะไม่มีพื้นฐานในการอ่านหน้าต่อๆไป จืงขอให้ท่านใจเย็นๆ อ่านไปเรื่อยๆ ทีละหน้า ประกอบกับการฝึกฝนทำไปเรื่อยๆ ผมรับรองว่า คุณจะสำเร็จวิทยายุทธใน 7 วัน

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

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

ต้องรู้อะไรก่อนที่จะเรียน 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 ครับ ดูจากตัวอย่างละกัน

<script language="JavaScript"> window.open('<cite>คำสังต่างๆของ JavaScript</cite><br>'); </script> Tag <Script> นี้จะใช้ได้ทั้งในส่วน Head และ Body ครับ ถ้าเป็นการประกาศ ฟังก์ชั่น หรือกำหนดค่าตัวแปรจะ นิยมทำในส่วน <Head>...</Head> แต่ถ้าเป็นคำสั่งให้ทำงานจริงจะใส่ในส่วน <Body>...</Body>

วิธีการป้องกันการแสดงผลผิดพลาดจาก บราวเซอร์ที่ไม่รู้จัก JavaScript

          ใน Browser Version เก่าๆ (ประมาณ 6-7 ปีก่อน) ยังไม่มีการใช้ JavaScript ทำให้เบราเซอร์รุ่นเก่าๆอย่าง Internet Explorer 2.0 ไม่เข้าใจคำสั่งภาษา JavaScript ดังนั้นมันจะ อ่านคำสั่งต่างๆของ JavaScript ของเราออกมาตรงๆ แบบ text ทั่วๆไป เผยไต๋ของเราให้ผู้ใช้เบราเซอร์รุ่นโบราณวัตถุ เห็นโค้ดแบบหมดไส้หมดพุง ดังนั้น เราต้องหาวิธีกันไม่ให้เบราเซอร์รุ่นโบราณวัตถุเหล่านั้นอ่าน Script ของเราได้ วิธีแก้ก็ง่ายๆครับ คุณยังจำได้ไหม ว่า Comment ของ HTML เป็นอย่างไร ก็เครื่องหมาย <!-- ...--> ไงครับ ใส่มันคร่อม code JavaScript ของเราก็จบ เวลาที่เบราเซอร์อ่าน ถ้ามันรู้จัก JavaScript ของเราก็จะทำงาน ถ้ามันไม่รู้จัก JavaScript มันก็จะข้าม Script ของเราไป เพราะมันจะเห็นเครื่องหมาย comment นั่นเอง

สมัยนี้คงไม่มีใครบ้าใช้เบราเซอร์ที่เก่าแก่ขนาดนั้นแล้วล่ะครับ เพราะอย่างน้อยก็มี IE 5.0 แถมมาพร้อมกับ Windows อยู่แล้ว ดังนั้นเทคนิคนี้ก็ไม่จำเป็นต้องใช้ก็ได้ แต่ถ้าจะใช้เทคนิคนี้จริงๆ ผมขอแนะนำให้รู้จักแท็ก <Noscript>...</Noscript> อีกตัวหนึ่ง แท็กนี้จะทำให้บราวเซอร์ที่ไม่รู้จัก JavaScript แสดงข้อความภายในแท็กออกมา เพื่อบอกให้ผู้ใช้รู้ว่าตรงนี้มี Script อันเลอเลิศของท่านอยู่ ถ้าอยากดูก็ไปหาเบราเซอร์ใหม่ๆมาใช้ซะ

<html> <head><title>Using the noscript Tag</title></head> <body> <script language="JavaScript"> <!-- document.write("Hello World!"); //--> </script> <noscript> JavaScript Here </noscript> </body> </html>

การทำ Include ไฟล์

          คุณสามารถใส่ JavaScript ลงในเอกสาร HTML ในลักษณะของ Include file ได้ด้วย โดยการใช้ Attribute SRC ของ Tag <Script> ดูจากตัวอย่างนะครับ <script language="JavaScript" SRC="srcfile.js"> </Script>           ในตัวอย่างไฟล์ srcfile.js จะเป็นไฟล์ที่เก็บ Code ของ JavaScript เอาไว้ ดังนั้นเราก็ต้องไปเขียน Code ใน file srcfile.js อยู่ดี แต่มันก็มีประโยชน์ในกรณีที่ เราใช้ Code ซ้ำๆ กันในหลายไฟล์ เราก็จะเขียน Code ใน Include file เพียงครั้งเดียว แล้วไฟล์ไหนจะใช้ก็ใช้ SRC ดึงมาใช้ได้ นอกจากนั้น ยังมีประโยชน์ในการแก้ไขอีกด้วย ลองคิดดู ถ้าเราต้องเปลี่ยนอะไรซักอย่างที่เหมือนกันในหลายๆหน้า ถ้าเราทำเป็น Include fileไว้ เราก็แก้แค่รอบเดียวทุกอย่างก็ OK ในตัวอย่างนี้ ไฟล์ srcfile.js ของเรา ก็จะใส่ Code ต่อไปนี้ครับ <!-- document.write('This text is type by Javascript in SRC file.'); --> และไฟล์ HTML ของเราก็จะเรียก ไฟล์ srcfile.js มาใช้ดังนี้ <html> <head><title>Using the SRC Attribute of the script tag.</title> </head> <body> <script language="JavaScript" SRC="srcfile.js"> </script> </body> </html>

การใส่ Comment ใน JavaScript

          ในการเขียน JavaScript ที่ยาวๆ คุณอาจต้องการทำข้อความบอกตัวเองไว้ว่า โปรแกรมในส่วนนั้นเอาไว้ทำอะไร(กันลืม) JavaScript จึงต้องมีเครื่องหมายที่ ใช้ทำ Comment เพื่อให้เบราเซอร์ข้าม Code ในส่วนที่เป็น Comment ไป ใน JavaScript จะใช้Comment แบบเดียวกับภาษา C++ และ Java นั่นคือ ใช้เครื่องหมาย // เพื่อประกาศว่า ทุกสิ่งที่อยู่หลัง // เป็น Comment จนจบบรรทัด เช่น <script language="javascript"> document.write('Hello I am JavaScript') ; //Comment Here </script> และ Comment อีกลักษณะหนึ่งของ JavaScript ก็คือ Comment แบบหลายบรรทัด ก็จะใช้ /* เป็นตัวเปิด Comment และใช้ */ เป็นตัวปิด comment เช่น <Script language="javascript"> /* Comment line1 Comment line2 Comment line3 Comment line4 */ </Script>

แสดงผลของ TAG HTML ด้วย JavaScript

          ในส่วนนี้จะสอน การใส่ HTML Tag ลงในส่วนที่เป็น JavaScript ซึ่งตัวอย่างที่ ผ่านมาทั้งหมด เราได้แค่เขียนตัวอักษรธรรมดาด้วยคำสั่ง document.write() เท่านั้นเอง แล้วถ้าจะทำตัวหนา ตัวเอียง หรือ ตั้ง Font ต่างๆล่ะ จะทำอย่างไร จะใช้คำสั่งอะไร ?

ก็ document.write() เหมือนเดิมครับแต่เราจะเพิ่ม Tag ต่างๆ ลงในข้อความที่จะให้แสดงครับ ตัวอย่างเช่น

<script language="javascript"> document.write('<H1>Hello This text is H1 size</H1>'); </script> จากตัวอย่างก็เป็นการ แทรก Tag <H1> ลงไป เพื่อขยาย ข้อความ "Hello This text is H1 size" ง่ายใช่ม้า เล่นกันง่ายๆเลย

เอาล่ะ บทที่ 1 ขอจบเท่านี้ครับ ถ้ายังไม่เหนื่อย ตลุยบทที่ 2 ต่อได้เลย.....

Back to top | Next Charpter >>





© copyright 2001 Sorrawut Korsuwansiri