ความรู้พื้นฐานเกี่ยวกับ JavaScript

JavaScript เป็นภาษาที่เป็น Script ที่อยู่ในเว็บไซต์ (ใช่ร่วมกับ HTML) เพื่อให้เว็บไซต์ของเราดูมีการเคลื่อนไหว สามารถตอบสนองผู้ใช้งานได้มากขึ้น ยกตัวอย่าง Hellomyweb.com ตรงเมนูด้านซ้ายมือจะเห็นว่าสามารถคลิกเพื่อดูหัวข้อภายในได้ และสามารถคลิกที่ลูกศรสีเขียวเพื่อปิดดูทั้งหมด และลูกศรสีแดงเพื่อเปิดทั้งหมด ข้อดีของ Javascript คือสามารถทำให้ผู้ใช้งานใช้เว็บไซต์ของเราได้ง่ายขึ้น รวมถึงดึงดูดความสนใจของผู้ใช้งานได้อีกด้วย ปัจจุบันนี้ Javascript นั้นเป็นมาตราฐานที่อยู่ใน W3C จึงมั่นใจได้ว่าทุกๆ Web browser รองรับการทำงานของ Javascript แน่นอน
เนื้อหาเบื้องต้นที่ผู้ใช้ต้องเข้าใจมาก่อนล่วงหน้าคือ HTML เพื่อให้สามารถทำความเข้าใช้ในเนื้อหาเรื่องนี้ได้ง่ายขึ้น

ก่อนจะเข้าเรื่องขอแนะนำตัว Javascipt กันก่อนดังนี้

• JavaScript นั้นออกแบบให้ใช้งานร่วมกับ HTML นั่นคือต้องอยู่รวมไปกับ HTML Code
• JavaScript เป็น script language ทำให้ผู้ใช้งานใช้งานได้ง่าย ไม่จำเป็นต้องมีพื้นฐานโปรแกรมมากนัก
• JavaScript เป็นภาษาที่ใช้ทรัพยากรณ์เครื่องน้อยมาก (Javascript นั้นจะประมวลผลที่ฝั่งของเครื่องผู้ใช้ทำให้ไม่เป็นภาระกับเครื่องมากนัก เมื่อเทียบกับ Flash
• JavaScript ฟรีใครๆก็สามารถใช้งานได้

Java กับ Javascript แต่ต่างกันนะครับ หลายๆคนมักคิดว่าเป็นตัวเดียวกัน แต่จริงๆแล้วแตกต่างกันโดยสิ้นเชิงทั้งความซับซ้อนของภาษา การใช้งาน ประสิทธิภาพ รวมถึงผู้พัฒนา โดย Java นั้นพัฒนาโดย Sun ซึ่งตอนนี้โดย Oracle ซื้อไปเรียบร้อยแล้ว ส่วน JavaScript นั้นพัฒนาโดยทีมงาน Netscape (Mozilla Foundation) ผู้พัฒนา Firefox Web browser ให้เราได้ใช้กันฟรีๆ แถมคุณภาพคับแก้ว

JavaScript ทำอะไรได้บ้าง

• JavaScript ทำให้สามารถใช้เขียนโปรแกรมแบบง่ายๆได้ โดยไม่ต้องพึ่งภาษาอื่น เช่น PHP เน้นว่าแบบง่ายๆ โดยส่วนใหญ่จะเป็นรูปแบบของการแสดงผลมากกว่า
• JavaScript มีคำสั่งที่ตอบสนองกับผู้ใช้งาน เช่นเมื่อผู้ใช้คลิกที่ปุ่ม หรือ Checkbox ก็สามารถสั่งให้เปิดหน้าใหม่ได้ ทำให้เว็บไซต์ของเรามีปฏิสัมพันธ์กับผู้ใช้งานมากขึ้น นี่คือข้อดีของ JavaScript เลยก็ว่าได้ที่ทำให้เว็บไซต์ดังๆทั้งหลายเช่น Google Map ต่างหันมาใช้
• JavaScript สามารถเขียนหรือเปลี่ยนแปลง HTML Element ได้นั่นคือสามารถเปลี่ยนแปลงรูปแบบการแสดงผลของเว็บไซต์ได้นั่นเอง สั่งเกตจากเมนูต่างๆใน Hellomyweb.com สาารถเลื่อนขึ้นลงได้ หรือหน้าแสดงเนื้อหาสามารถซ่อนหรือแสดงเนื้อหาได้แบบง่ายๆนั่นเอง
• JavaScript สามารถใช้ตรวจสอบข้อมูลได้ สังเกตว่าเมื่อเรากรอกข้อมูลบางเว็บไซต์ เช่น Email เมื่อเรากรอกข้อมูลผิดจะมีหน้าต่างฟ้องขึ้นมาว่าเรากรอกผิด หรือลิมกรอกอะไรบางอย่าง ส่วนใหญ่เกือบทั้งหมดใช้ JavaScript ตรวจสอบ
• JavaScript สามารถใช้ในการตรวจสอบผู้ใช้ได้เช่น ตรวจสอบว่าผู้ใช้ใช้ Web browser อะไร
• JavaScript สร้าง Cookies (เก็บข้อมูลของผู้ใช้ในคอมพิวเตอร์ของผู้ใช้เอง) ได้

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

บทนำ CSS

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

    CSS ย่อมาจาก Cascading Style Sheets เป็นคำสั่งที่เข้ามาเสริมการแสดงผลของ HTML ซึ่งมีข้อดีมากมายเช่น

        1.คุณสามารถแก้ไขเว็บเพจได้หลายๆหน้าพร้อมกัน

        2.ลดปัญหาการแสดงผลที่ผิดเพี้ยนเช่น ภาษาต่างดาว

        3.ช่วยให้การทำเว็บมีประสิทธิภาพมากขึ้น

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

        5.การกลับมาแก้ไขเว็บเพจทำได้ง่ายขึ้น

ตัวอย่างการใช้งาน CSS ลองคลิกที่ link ด้านล่างดู

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

บทนำ HTML

  ต้นกำเนิดของภาษา HTML เกิดจาก เมื่อปี 1989 นักฟิสิกส์ชื่อ Tim Berners-Lee แห่งสถาบันวิจัย CERN เสนองานวิจัยเรื่อง prototyped ENQUIRE และ Hypertext system ใช้สำหรับนักวิจัยของสถาบันเพื่อแบ่งข้อมูลกัน และถูกพัฒนามาเรื่อยๆจนถึงปัจจุบัน

    HTML     เป็นตัวย่อมาจาก Hypertext Markup Language เป็นภาษาหลักที่ใช้ในการแสดงผลบนเว็บ บราวเซอร์ในอินเตอร์ โดยสามารถนำเสนอข้อมูลตัวอักษร รวมทั้งเชื่อมต่อเพื่อ แสดงภาพ , เสียง และไฟล์ในรูปแบบอื่นๆ

ภาษา HTML จะแบ่งออกเป็น 2 ส่วน คือ

1. ส่วนของคำสั่ง (tag) เป็นส่วนที่กำหนดรูปแบบของข้อความที่แสดง ซึ่งเราเรียกว่า Tag โดยจะอยู่ในเครื่องหมาย < ... >

2. ส่วนของบทความทั่วๆไป เป็นส่วนของข้อความที่เราต้องการแสดงผล



ตัวอย่างการใช้งานภาษา HTML

คุณอาจลองพิมพ์ตามตัวอักษรด้านล่างนี้ ใน Text editer ของคุณเช่น Notepad

  

<html>     <head>         <title> หัวข้อเรื่อง ของหน้านี้ </title>     </head>     <body>             เนื้อหาที่จะแสดงใน web browser     </body> </html>

เมื่อคุณพิมพ์เสร็จก็ให้ save ในชื่อ mypage.html และลองใช้ web browser อย่าง internet explorer หรือ fire fox เปิดดูก็จะเห็นผลตามรูปด้านล่าง

การทำงานของ code ด้านบน

1. <html> ...... </html> ในการใช้งาน HTML เราจะต้องเริ่มด้วย <html> และปิดด้วย </html> เสมอ

2. <head> ...... </head> เป็นส่วนที่ใช้ให้รายละเอียดเกี่ยวกับ เว็บเพจหน้านี้ ซึ่งจะไม่แสดงให้เห็นในส่วนของการแสดงผลของ web browser แต่จะมีผลกับส่วนอื่นๆ เช่น การหาของ search engine (google,yahoo) การใช้งานก็จะมีคำสั่งย่อยเพื่อบรรยายรายละเอียด เช่น <title> .... </title> , <meta> และอื่นอีกมากมาย

3. <title> .......... </title> ในส่วนตัวอักษรที่อยู่ในคำสั่งนี้จะอยู่ใน title bar ของ web page

4. <body> .......... </body> ตัวอักษรที่อยู่ในคำสั่งนี้จะแสดงส่วนแสดงผลของ web browser

ในบทต่อไปเราจะอธิบายรายละเอียดของ คำสั่ง (tag) ให้ละเอียดขึ้น