เริ่มต้น javaScript วิธีเขียน javaScript อย่างง่าย PDF Print E-mail

javaScript ถือว่าเป็นอีก 1 ภาษาที่สำคัญที่ช่วยเอื้อประโยชน์หลายอย่างให้คนทำเว็บมากทีเดียว

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

ตัวอย่างที่จะเห็นได้ชัดมากที่สุด ต้องร้องอ๋อเลย ก็คือเวลาที่เรากรอกแบบฟอร์มบางเว็บ แล้วเรากรอกไม่ครบ ก็จะมี pop up เด้งขึ้นมาให้เราเห็น ว่าต้องกรอกตรงไหนบ้าง เจ้า pop up นั่นก็ต้องถูกควบคุมด้วย javaScript นั่นเองครับ

ทีนี้ เราจะมาเริ่มเขียน javaScript กันดีกว่า แต่บทความนี้จะว่าด้วยเรื่องพื้นฐานมากๆ จะไม่มีอะไรที่หวือหวานะครับ แต่มี popup ให้ได้จิ้มเล่นเท่านั้นเอง

การเขียน javascript นั้น เรานิยมเขียนเอาไว้ที่ส่วน head ของเว็บ หากไม่รู้ว่า head ของเว็บคืออะไร อ่านได้ที่นี่ เว็บหน้าแรก เริ่มต้น xhtml เหตุที่เรานิยมเขียนเอาไว้ที่ส่วน head ก็เป็นเพราะว่าจะถูกโหลดเข้าแรมก่อนส่วนหน้าเว็บ เพื่อให้ส่วนหน้าเว็บนั้นสามารถเรียกใช้งานได้ต่อไป แต่อย่างไรก็ดี การเอาไปใส่ที่ head มาก ก็จะส่งผลให้เว็บช้าลง เราจึงสามารถนำเอา javaScript ไปเขียนที่ส่วนท้ายของหน้าเว็บ ก่อนจะปิด body ก็ได้เช่นกัน (หากไม่รู้ body เว็บคืออะไร อ่านได้ทีนี่ เว็บหน้าแรก เริ่มต้น xhtml ) แต่ว่า จะไม่ใช่ทุกสคริปที่ย้ายไปไว้ด้านล่างแล้วจะทำงาน หลายสคริป เมื่อเราย้ายไปไว้ที่ด้านล่างแล้ว ทำให้ javaScript ไม่ทำงานอย่างที่เราตั้งใจ หรือเพี้ยนไปเลยก็มี อันนี้ก็ต้องลองดูกันครับ แต่จะเน้นชัวร์ก็ต้องที่ head นี่ล่ะ

สำหรับ javaScript นั้น มีการเขียนสองแบบ คือเขียนใส่หน้าเว็บไปเลย หรืออีกแบบคือเขียนใส่ไฟล์ แล้วค่อยเรียกเข้ามาใช้ครับ ซึ่งสองแบบให้ผลลัพท์การทำงานที่เหมือนกันเลย แต่ว่า ผลพลอยได้จะแตกต่างกันเล็กน้อย ก็คือ การแยกไฟล์ไปเขียนแล้วใช้คำสั่งเรียกเข้ามาจะทำให้เว็บแสดงผลได้เร็วขึ้นเล็กน้อยครับ ซึ่งจะเห็นผลมากขึ้นเมื่อไฟล์ที่แยกไปเขียนนั้นมีขนาดใหญ่ๆ

สำหรับ การเขียน javaScript ขั้นเริ่มต้น เราจะเริ่มเขียนใส่ head เว็บกันก่อนเลยดังนี้ครับ

1<script type="text/javascript"> <!-- alert('สวัสดีชาวโลกกกกก'); //--> </script>

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

อธิบายเพิ่มนิดหน่อย ก็คือบรรทัดที่ 3 นั่น คือโค้ด javaScript ที่แท้จริงครับ ส่วนบรรทัดที่ 1,2 เป็นคำสั่งส่วนเปิด และ 4,5 เป็นคำสั่งส่วนปิด

แต่บางคนไม่เขียนบรรทัดที่ 2,4 ก็ได้ ไม่ถือว่าผิดรูปแบบ และไม่ทำให้การทำงานเพี้ยนแต่อย่างใด แต่เพียงว่า browser ที่ไม่ทำงานกับคำสั่ง javaScript นั้น จะแสดงโค้ด java ออกมาทั้งหมดเลย ซึ่งนั่นอาจจะไม่ใช่สิ่งที่เราต้องการ เราเลยเขียนดักเอาไว้ก่อนก็เท่านั้นเองครับ

สำหรับรูปแบบการเขียนใส่ไฟล์นั้นก็ทำได้ง่ายๆด้วย notepad หรือโปรแกรม text editor ตัวอื่นที่ทำงานแบบ plain text (คือทำงานกับตัวหนังสือที่กำหนดรูปแบบตัวหนังสือไม่ได้ เช่น notepad เรากำหนดให้ตัวหนังสือหน้าบางตัวไม่ได้ แบบนี้คือทำงานแบบ plain text ครับ)

แล้วสร้างไฟล์ใหม่ copy โค้ดใส่ลงไปว่า

1alert('สวัสดีชาวโลกกกกก');

แล้วตั้งชื่อว่าเป็น test.js จากนั้นนำเอาไปวางไว้ในแฟ้มเดียวกับที่เราเก็บหน้าเว็บ แล้วให้แก้โค้ด ให้หน้าเว็บเพื่อเรียกไฟล์ test.js นี้เข้ามาใช้งานดังนี้

1<script type="text/javascript" src="test.js"></script>

เมื่อ save แล้วรันก็จะให้ผลลัพท์เดียวกัน
 

อันนี้ก็คือการเขียนอีกแบบตามที่กล่าวไปแล้วนั่นเองครับ

เห็นไหมครับ javaScript ก็ไม่ใช่เรื่องยากอะไรเลยสำหรับมือใหม่ ส่วนที่เหลือต่อจากนี้ก็คือ function และค่าต่างๆที่จำเพาะสำหรับ javaScript แล้วที่ต้องศึกษาเอาครับ ซึ่่งผมจะพยายามหามานำเสนอต่อๆไปครับ

ที่มา : http://web.meewebfree.com

 

 
Banner

Hosting Functions

Hosting Space
คือพื้นที่ความจุในการเก็บไฟล์เว็บไซต์ไว้บน Hosting มีหน่วยเป็น Byte
BandWidth
คือปริมาณความจุของข้อมูลที่มีการส่งเข้า-ออกจาก Hosting ดดยการเปิดเว็บหรือส่งผ่าน ftp มีหน่วยเป็น Byte
pop3 e-Mail
คือระบบ e-Mail ที่สามารถเชื่อมต่อกับ Outlook หรือโปรแกรม e-Mail ต่างๆ บนเครืองคอมพิวเตอร์ได้

Development Support

ภาษาโปรแกรมที่รองรับ
HTML,PHP, JSP, AJAX, TOMCAT, XML,+PEAR, PHPMyAdmin, CGI, Perl
ฐานข้อมูลที่รองรับ
MySQL 5.0.67

Reseller Hosting

Hosting Reseller โฮสติ้ง รีเซลเลอร์ ความเร็วสูง สำหรับผู้ที่เริ่มต้นธุรกิจ Hosting ทดลองใช้งานฟรี 7 วัน รับประกันคืนเงินภายใน 30 วัน


สำหรับ webmaster
ที่ต้องมี Hosting บริการให้ลูกค้าของท่าน สามารถเริ่มต้นได้ที่นี่ พร้อมข้อเสนอดีๆ ที่ไม่มีที่ไหน
  • ทดลองใช้งานฟรี 7 วัน
  • ยังไม่ต้องเสียค่าใช้จ่ายเริ่มต้น
  • รับฝากลูกค้าและขอโอนคืนได้
  • ไม่ต้องดูแล server

ติดตั้ง Open Source ฟรี


  
   
   
   
   
   
   And more..


ธนาคารกสิกรไทย   ธนาคารกรุงเทพ  ธนาคารกรุงไทย  ธนาคารไทยพาณิชย์  ธนาคารกรุงศรีอยุธยา  ธนาคารนครหลวง