บทเรียนนี้จะใช้โปรแกรมอยู่ 2 ตัว คือ Visual Studio Code และ Google Chrome ก่อนอื่นให้สร้างไฟล์ชื่อ index.html (สำหรับเขียนคำสั่ง html) และ myJS.js (สำหรับเขียน Java Script) โดยทั้ง 2 ไฟล์อยู่ใน Folder เดียวกันชื่อ JS และในไฟล์ index.html ให้เขียนโค้ดตามตัวอย่าง
อธิบายเพิ่มเติม บรรทัดที่ 5 หมายถึงการ import ไฟล์ myJS.js เพื่อที่จะใช้โค้ด Java Script ร่วมกันกับเว็บไซต์
ถ้าทดลองเปิดไฟล์ index.html ในโปรแกรม Google Chrome ตอนนี้จะยังไม่มีอะไรเกิดขึ้น เพราะในไฟล์ myJS.js ยังไม่ได้เขียนคำสั่งอะไรเลย
ที่นี่มาลองเพิ่มคำสั่ง console.log เข้าไปในไฟล์ myJS.js คำสั่ง console.log มีประโยชน์มากในการดีบัคโปรแกรม เช่น เราต้องการทราบว่า ตัวแปรมีค่าอะไร ก็สามารถแสดงค่าออกมาดูได้ ในตัวอย่างนี้เราจะใช้คำสั่ง console.log ในการแสดงค่าเช่นกัน
การแสดงผลลัพธ์ เปิดไฟล์ index.html ด้วยโปรแกรม Google Chrome จากนั้น คลิกขวา เลือก ตรวจสอบ (Inspector) คลิกแท็บ Console แล้วสังเกตุผลลัพธ์ที่เกิดขึ้น
จะแสดงข้อความออกมาว่า hello และผลรวมของ 1+1 ซึ่งเท่ากับ 2 นั่นเอง พอจะมองเห็นภาพประโยชน์ของ console.log บ้างหรือยังครับ
นี่คือคำสั่งแรกของบทเรียนนี้ หวังว่าผู้อ่านจะเข้าใจการใช้งาน Java Script ร่วมกับเว็บไซต์แล้วนะครับ ไว้มาต่อในบทความต่อไป