JavaScript Tutorial

Free Web space and hosting from gorgai.com

JavaScript Tutorial

              ผมยอมรับว่าการศีกษา JavaScript เป็นเรื่องง่ายครับ JavaScript ก็ต้องค่อยๆศึกษาเป็นขั้นตอน การอ่านเพียงหน้า 2 หน้า ยังไม่สามารถเอาไปทำอะไรได้หรอกครับ แต่ถ้าไม่อ่านก็จะไม่มีพื้นฐานในการอ่านหน้าต่อๆไป จืงขอให้ท่านใจเย็นๆ อ่านไปเรื่อยๆ ทีละหน้า ประกอบกับการฝึกฝนทำไปเรื่อยๆ ผมรับรองว่า คุณจะสำเร็จวิทยายุทธใน 7 วัน
Put JavaScript in Your HTML Page
      คุณสามารถใส่ JavaScript ลงใน WebPage ของคุณได้โดยการใส่ Tag <script> และ </script> คร่อมคำสั่งต่างๆของ JavaScript และกำหนด Language เป็น JavaScript ครับ ดูจากตัวอย่างละกัน

<script language="JavaScript">      window.open('<cite>คำสังต่างๆของ JavaScript</cite><br>'); </script>

Tag Script นี้จะใช้ได้ทั้งในส่วน Head และ Body ครับ

Telling Non- Java Script Browser to Ignore Your Code
ใน Browser Version เก่าๆยังไม่มีการใช้ JavaScript ใช่ม้า
Browser แสนซื่อก็จะ อ่านคำส้งต่างๆของ JavaScript ของเราออกมาตรงๆ เผยไต๋ของเราให้ผู้ใช้ Internet เห็นแบบหมดใส้หมดพุง ดังนั้น เราต้องหาวิธีกันไม่ให้ Browser เหล่านั้นอ่าน Script ของเรา วิธีแก้ก็ง่ายๆครับ คุณยังจำได้ไหม ว่า Comment ของ HTML เป็นยังไง ก็เครื่องหมาย ไงครับ ใส่มันคร่อม code JavaScript ของเราก็จบ เวลา Browser อ่าน
ถ้ามันรู้จัก JavaScript Script ของเราก็จะทำงาน
ถ้ามันไม่รูจัก JavaScript มันก็จะข้าม Script ของเราไป

The Noscript Tag
ใน Browser Version เก่าๆยังไม่มีการใช้ JavaScript ถึงแม้ว่าจะมีผู้ใช้น้อย (หรืออาจไม่มี) แต่เราก็ควรเตรียมการสำหรับ ผู้ใช้ Internet ที่ไม่ค่อยจะทันโลก ไว้

Browser ที่ไม่สามารถอ่าน JavaScript ได้ก็คือ Netscape Version ต่ำกว่า 2.0 และ Internet Explorer Version ต่ำกว่า 3.0

Tag <Noscript> จึงถือกำเนิดขึ้น
วิธีการใช้ก็คือ ใส่ Tag <Noscript> และ </noscript> คร่อม Code HTML ที่เราต้องการให้ทำงาน ในกรณีที่ Browser ไม่สามารถอ่าน JavaScript ของเราได้

ดูตัวอย่างการใช้ Tag Noscript ละกัน ตัวนี้ copy ไปดูผลได้จ๊ะ

<head><title>Using the noscript Tag</title></head> <script language="JavaScript">  </script> <noscript> JavaScript Here </noscript> </font></font></table><form> <input type="button" value="View Example" onclick="window.open('jsex1.html')"> </form> <p> <font size=+2 color=00ff00 face="Arial">T</font><font size=+2 color=00aaff face="Arial">he </font> <font size=+2 color=00ff00 face="Arial">S</font><font size=+2 color=00aaff face="Arial">cript </font> <font size=+2 color=00ff00 face="Arial">T</font><font size=+2 color=00aaff face="Arial">ag's </font> <font size=+2 color=00ff00 face="Arial">S</font><font size=+2 color=00aaff face="Arial">RC </font> <font size=+2 color=00ff00 face="Arial">A</font><font size=+2 color=00aaff face="Arial">ttribute</font> <br> <font face="CordiaUPC">คุณสามารถใส่ JavaScript ลงในเอกสาร HTML ในลักษณะของ Include file ได้ด้วย โดยการใช้ Attribute SRC ของ Tag <Script> ดูจากตัวอย่างนะครับ </font><br> <br> <font color="ffff00" size=4 face="system"> <xmp> <scipt language="JavaScript" SRC="srcfile.js">

ในตัวอย่างไฟล์ srcfile.js จะเป็นไฟล์ที่เก็บ Code ของ JavaScript เอาไว้ ดังนั้นเราก็ต้องไปเขียน Code ใน file srcfile.js อยู่ดี แต่มันก็มีประโยชน์ในกรณีที่ เราใช้ Code ซ้ำๆ กันในหลายไฟล์ เราก็จะเขียน Code ใน Include file เพียงครั้งเดียว แล้วไฟล์ไหนจะใช้ก็ใช้ SRC ดึงมาใช้ได้ นอกจากนั้น ยังมีประโยชน์ในการแก้ไขอีกด้วย ลองคิดดู ถ้าเราต้องเปลี่ยนอะไรซักอย่างที่เหมือนกันในหลายๆหน้า ถ้าเราทำ SRC ไว้ เราก็แก้แค่รอบเดียวทุกอย่างก็ OK ในไฟล์ srcfile.js ของเรา ก็จะใส่ Code ต่อไปนี้ครับ



และไฟล์ HTML ของเราก็จะเรียก ไฟล์ srcfile.js มาใช้ดังนี้

<head><title>Using the SRC Attribute of the script tag.</title> </head> <script language="JavaScript" SRC="srcfile.js"> </script> </font><br> <form> <input type="button" value="View Example" onclick="window.open('jsex2.html')"> </form> <font size=+2 color=00ff00 face="Arial">J</font><font size=+2 color=00aaff face="Arial">ava</font><font size=+2 color=00ff00 face="Arial">S</font><font size=+2 color=00aaff face="Arial">cript </font> <font size=+2 color=00ff00 face="Arial">E</font><font size=+2 color=00aaff face="Arial">ntities</font> <br> <font size=2 face="MS Sans Serif"> คุณสามารถใช้ตัวแปรของ JavaScript ใน HTML Code ได้ด้วย โดยใช้เครื่องหมาย &{<cite>ชื่อตัวแปร</cite>}; เช่น <br> <br> <font color="ffff00" size=4 face="system"> <xmp> <head><title>Using JavaScript Entities.</title> <script language="javascript">  </script> </head> <a href="&{linkto};/&{linkto};.html">Click Here</a> </font></font><form> <input type="button" value="View Example" onclick="window.open('jsex3.html')"> </form> <br> <font face="CordiaUPC">จากตัวอย่างนี้ผมใช้ตัวแปรชื่อว่า "linkto" เก็บค่าเอาไว้ แล้วมาใช้ในบรรทัด <a href=...... <br> ตัวอย่างนึ้ จะแสดงตัว Link เป็นข้อความ Click Here แล้วมีเป้าหมายคือ <br> http://www.geocities.com/pentagon/2932 สังเกตุว่าผลของตัวอย่างนี้จะเหมือนกับ การใช้ Tag A แบบนี้<br> <font color="ffff00" size=4> <xmp> </font><a href="../../pentagon/2932/2932.html"><font color="ffff00" size=4>

JavaScript Comment
ในการเขียน JavaScript ที่ยาวๆ คุณอาจต้องการทำข้อความบอกไว้ว่า โปรแกรมในส่วนนั้นเอาไว้ทำอะไร JavaScript จึงต้องมีเครื่องหมายที่ ใช้ทำ Comment เพื่อให้ JavaScript ข้าม Code ในส่วนที่เป็น Comment ไป
ใน JaavaScript จะใช้Comment แบบเดียวกับภาษา C++ และ Java นั่นคือ ใช้เครื่องหมาย // เพื่อประกาศว่า ทุกสิ่งที่อยู่หลัง // เป็น Comment จนจบบรรทัด เช่น

และ Comment อีกลักษณะหนึ่งของ JavaScript ก็คือ Comment แบบหลายบรรทัด ก็จะใช้ /* เป็นตัวเปิด Comment และใช้ */ เป็นตัวปิด comment เช่น

<Script language="javascript"> /* Comment line1 Comment line2 Comment line3 Comment line4 */ </Script>

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

จากตัวอย่างก็เป็นการ แทรก Tag <H1> ลงไป เพื่อขยาย ข้อความ "Hello This text is H1 size"
ง่ายใช่ม้า เล่นกันง่ายๆเลย แต่ถ้า ติดขัดตรงไหน ก็ e-mail มาถามได้นะครับ หรือจะ Post ไว้ใน Massage Board ก็ได้ครับ ผมพร้อมจะให้บริการครับ