: มาเขียน hello.html กันนะ
>> เมื่อได้รู้จักกับ JavaScript จาก part แรกที่ผ่านมา หากเพื่อนๆคันไม้คันมืออยากจะเขียนมันขึ้นมาเองแล้วล่ะก็ part ที่ 2 นี้จะตอบสนองความต้องการนั้นครับ
>> หน้าใดๆที่แสดงบนหน้าเว็บเราทราบแล้วว่าคือ เว็บเพจ หากเพื่อนๆสังเกตให้ดีจะทราบอีกว่าเจ้าเว็บเพจที่ว่านี้มีนามสกุลด้วยนะ สมมติว่าผมเปิดหน้าเว็บชื่อ A มันอาจมีสกุลเป็น .htm หรือ .html หรือ .HTM หรือ .HTML หรือ .asp หรือ .php หรืออีกมากมาย กลไกเหล่านี้เรายังไม่ต้องไปสนใจครับ เพราะทุกเว็บเพจจะแสดงผลให้เราเห็นได้นั้น มันต้องอยู่ในรูปแบบของเอกสาร HTML เท่านั้น ย้ำว่าต้องเป็น HTML เท่านั้น
>> ฉันจะเชื่อได้อย่างไรว่าที่คุณกล่าวมาเป็นความจริง?
ตอบ ทดลองง่ายๆด้วยการคลิกขวา ณ บริเวณใดๆของหน้า Facebook หรือเว็บเพจไหนก็ได้ครับ แล้วเลือก "view source" หรือ "ดูรหัสต้นฉบับ" เพื่อนๆจะเห็นหน้าใหม่เปิดขึ้นมาและมันเต็มไปด้วยแท็ก (Tag) ประหลาดเยอะแยะ เจ้าแท็กที่ว่าเหล่านั้นแหละครับคือภาษา HTML ที่ประกอบกันขึ้นเป็นเอกสาร HTML ต่อจากนั้นให้เพื่อนๆทดลองเซฟ (save) หน้านั้นด้วยการกด Ctrl + s เพื่อนๆก็จะเห็นอีกว่าสกุลที่มีให้เลือกไม่เป็น .htm ก็ .html เพราะมันคือนามสกุลมาตราฐานของเอกสาร HTML อย่างไรล่ะ
>> แล้วเอกสาร HTML เกี่ยวอะไรกับ JavaScript?
ตอบ ต้องบอกว่าเดิมทีเอกสาร HTML ถูกสร้างขึ้นมาเพื่อนแสดงผลเสมือนหน้ากระดาษแผ่นหนึ่ง ทว่าเมื่อมันว่อนไปในโลกธุรกิจและสังคมออนไลน์ หน้ากระดาษไร้ชีวิตแผ่นหนึ่งก็ไม่เป็นที่สนใจ จวบจนกระทั่งมีการสร้างภาษา JavaScript ขึ้น และมันได้สร้างชีวิตให้กับเอกสาร HTML ทำให้แผ่นกระดาษอิเล็กทรอนิกส์สามารถดิ้นดุ๊กดิ๊กราวกับต้องมนตร์วิเศษปานนั้น!
>> เอาล่ะๆฉันอยากจะเขียน JavaScript แล้ว
ง่ายๆอย่างค่อยเป็นค่อยไปนะครับ ให้คลิกขวาที่หน้าจอของเพื่อนๆ แล้วสร้าง Text Document ขึ้นมาชื่ออะไรก็ได้ จากนั้นเปลี่ยนสกุลจาก .txt ของมันให้กลายเป็น .html หากทำถูกต้องเจ้าไอคอนของไฟล์นี้จะกลายเป็นไอคอนของโปรแกรมเล่นเว็บของเพื่อนๆ (เป็น IE เป็น Chrome ฯลฯ) สำหรับผมให้มันชื่อว่า hello.html ครับ
เราจะลงมือเขียน JavaScript กันแล้วด้วยการคลิกขวาที่ hello.html แล้วเลือก Open with เลือก Notepad แล้วเขียนโค้ดลงไปดังนี้
<script>
alert("Hello JavaScript!");
</script>
จากนั้นเซฟ แล้วดับเบิลคลิก (คลิกสองครั้ง) เปิดมันขึ้นมาชมผลลัพธ์ได้เลย
>> อธิบายหน่อยซิว่ามันเกิดอะไรขึ้น! ฉันเห็นหน้าต่างเล็กๆสีขาวโผล่ขึ้นมา มันช่างอะเมซิ่งไทยแลนด์อะไรอย่างนี้!
ครับ องค์ประกอบเล็กๆของแท็กในเอกสาร HTML ก็คือเครื่องหมาย < และ > เรียกว่าแท็กเปิด ซึ่งจะคู่กับ </ และ > ที่เรียกว่าแท็กปิด ส่วนคำว่า script นั้นเขียนเพื่อบอกให้โปรแกรมเล่นเว็บของเราเข้าใจว่าสิ่งที่ถูกบรรจุระหว่างแท็ก <script> และ </script> ก็คือภาษา JavaScript นั่นเอง สุดท้ายก็คือคำสั่ง alert( ... ); ที่มีไว้แสดงผลข้อความสตริง (ตัวหนังสือ) ออกเป็นหน้าต่างเล็กๆอย่างที่เพื่อนๆเห็นไงล่ะ ง่ายใช่ไหมครับ ใช่เลย! และสนุกอีกต่างหาก
คราวหน้าเราจะมาคุยกันถึงหลักวิธีการประกาศพื้นที่เขียน JavaScript ภายในเอกสาร HTML กัน ว่าเขียน JavaScript ได้ตรงไหนบ้าง และแต่ละพื้นที่มีความหมายอย่างไร ให้ผลอย่างไรหากเทียบกับเวลา ณ ขณะนั้น ไว้ต่อกันที่ part 3 นะค๊าบบบ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น