ตอน 2 - เริ่มหัดเขียน ES6 แบบจับมือทำไปด้วยกัน

เริ่มหัดเขียน ES6 แบบจับมือทำไปด้วยกัน

หลังจากตอนที่แล้วที่กล่าวถึง การเตรียมเครื่องมือเขียน ES6 ผมก็มาคิดต่อว่าจะสอนกันอย่างไรดี เนื่องจากผมคิดว่าบทความผมจะเน้นไปที่กลุ่มผู้เริ่มต้นศึกษา ไม่ใช่โปรแกรมเมอร์มืออาชีพอยู่แล้ว ผมจึงคิดว่า ก่อนจะไปสอนกันแบบ Hard Core เราเริ่มแบบจับมือเขียนกันไปดีกว่า แบบคนไม่เก่งด้วยกัน

ตอนนี้จึงขอเริ่มจากบทแบบคล้ายๆ Hello World คือยังไม่ต้องรู้อะไรมากหรอก หัดใช้ Environment ให้ได้ จนเริ่มรันโปรแกรมขึ้นมา Hello World ให้ได้ก่อน เป็นการทำความคุ้นเคยสำหรับมือใหม่ทั้งหลาย บทต่อๆไป จึงค่อยไล่ไปทีละส่วน โดยสอนตั้งแต่หลักพื้นฐาน เช่น ตัวแปร กันเลยทีเดียว แต่หมายถึง Syntax ภาษาถ้าตรงไหน ES6 มีเปลี่ยนแปลงไปจากก่อนหน้านี้ เราก็จะใช้ Syntax แบบ ES6 กันไปเลยนะครับ

เพราะบทความส่วนใหญ่ที่ผมเห็นตามเว็บต่างๆ นั้น จะเน้นไปที่แสดงคุณสมบัติใหม่ๆ ที่เปลี่ยนแปลงไปของ ES6 มากกว่าจะสอนการเขียนภาษาโดยตรง ถ้าใครไม่มีพื้นของเก่ามาก่อน ก็จะเข้าใจได้ยาก บทความผมจึงต้องแตกต่าง คือสำหรับคนเริ่มจากศูนย์ไปในแบบ ES6 เลย

อย่าช้าเลย เริ่มดีกว่า

จากความเดิมตอนที่แล้ว ผมจะใช้ Visual Studio Code (ต่อไปขอเรียก Code) ร่วมกับ Google Chrome (ต่อไปขอเรียก Chrome) เป็นหลัก แต่ใครใช้ Editor ตัวไหนก็ปรับวิธีการตามตัวที่ใช้นะครับ (ซึ่งก็ไม่ต่างกันมาก) ตอนนี้ผมสมมติว่าทุกคนมีเครื่องมือที่ผมว่าพร้อมแล้วนะครับ

1. เริ่มจากเราจะสร้างโฟลเดอร์สำหรับใช้ทำงานของเราก่อน ผมจะสร้างโฟลเดอร์ชื่อ js  ขึ้นมาที่ Drive D: ของคอมพิวเตอร์นะครับ (คุณจะไว้ตรงไหนก็ได้ครับ ตามที่สะดวก) เพื่อที่เราจะใข้โฟลเดอร์สำหรับทดสอบการเขียนกันไปเรื่อยๆ โดยเบื้องต้นนี้เราจะยังไม่ทดสอบผ่าน Web Server ใดๆ ทั้งสิ้น แค่มีโฟลเดอร์ มีโปรแกรม Code กับโปรแกรม Chrome ก็พอแล้ว  เมื่อเราสร้างเสร็จเราจะมีโฟลเดอร์ js และให้คลิกขวาเพื่อเปิด Popup Menu ให้เลือก Open with Code ตามที่ลูกศรชี้ ดังภาพข้างล่าง

2. เราจะได้หน้าจอโปรแกรม Code โดยส่วนพื้นที่เขียนโปรแกรมจะเป็นด้านขวา ด้านซ้ายจะมีเมนูต่างๆ และแสดงโฟลเดอร์ที่กำลังทำงานอยู่คือ js ดังภาพข้างล่าง

3. ทีนี้เราจะซูมเข้าไปที่ส่วนมุมบนซ้ายของ Code ที่แสดงโฟลเดอร์ที่เรากำลังทำงานอยู่ เราเอาเม้าส์ไปตรงชื่อโฟลเดอร์ js จะมีไอคอนปรากฏขึ้นมาสำหรับสร้าง New File หรือ New Folder (แต่จะใช้คลิกเม้าส์ขวาตรงพื้นที่โล่งๆ ด้านล่างก็ได้ครับ) ตอนนี้ให้เลือก New File ครับ

4. เราจะสร้างไฟล์ขึ้นมาก่อน 1 ไฟล์ เนื่องจากว่าเราจะทดสอบการรันโปรแกรมใน Chrome ซึ่งใช้เปิดเว็บ เราจึงต้องการไฟล์ html ให้เราใส่ชื่อไฟล์ที่จะสร้างว่า index.html แล้วกด Enter จากนั้นโปรแกรม Code จะแสดงว่ามีไฟล์ใหม่ หรือไฟล์ที่ยังไม่บันทึก 1 ไฟล์ ให้เราคลิกปุ่ม Save ตามลูกศรชี้ เพื่อบันทึกไว้ก่อนครับ

5. ตอนนี้ในกรอบด้านซ้าย เราจะแสดงให้เห็นว่ามีโฟลเดอร์ที่กำลังทำงานคือ js และมี 1 ไฟล์ในโฟลเดอร์นี้ คือ index.html ถ้าเราจะเข้าไปแก้ไขไฟล์ index.html เราก็จะเอาเม้าส์ไปคลิกที่ชื่อไฟล์ กรอบด้านขวาก็จะปรากฏเนื้อหาของไฟล์ index.html ขึ้นมา ซึ่งขณะนี้ยังไม่มีเนื้อหาใดๆ โดยโปรแกรม Code จะปรากฏตัวเลขบรรทัดที่ 1 ขึ้นมา ดังภาพ

6. ให้พิมพ์ตามตัวอย่างเลยครับ แต่ละบรรทัดให้กด Enter เพื่อลงมาบรรทัดใหม่ ตามตัวอย่างนี้เป็นโครงสร้างอย่างง่ายที่สุดของไฟล์ html5 ซึ่งมีคำว่า Hello World อยู่ในแท็ก h1 

7. เมื่อพิมพ์เสร็จเรียบร้อย ให้บันทึก แล้วสลับจากโปรแกรม Chrome ไปดูที่โฟลเดอร์ js ของ Drive D: จะมีไฟล์ index.html ปรากฏเป็นไอคอนอยู่ในโฟลเดอร์ js ซึ่งอาจจะมีไอคอนแตกต่างไปตามเครื่องบ้าง แล้วแต่การตั้งค่าในเครื่อง แต่ถ้าใครใช้โปรแกรม Chrome เป็น Browser หลักในการเปิดเว็บก็คงจะเห็นหน้าตาเหมือนในตัวอย่างครับ

8. เมื่อเราดับเบิลคลิกที่ไฟล์ index.html จะปรากฏหน้าโปรแกรม Chrome ขึ้นมาแสดงหน้าเว็บ และมีคำว่า Hello World อยู่ ถือว่าสำเร็จครับ สังเกตที่แถบ Address Bar ด้านบน จะแสดง Path ของไฟล์ เป็น file:///D:/js/index.html ดังภาพ

9. เราจะเปิดส่วนที่โปรแกรมเมอร์ใช้ทำงานกัน ให้คลิกขวาบนหน้าเว็บ จะมี Popup Menu ขึ้นมาให้เลือก Inspect ตามลูกศรขี้ (ถ้าใครไม่ได้ใช้ Chrome อาจแตกต่างตามโปรแกรม Browser ที่ใช้งาน เช่น ในโปรแกรม Edge และ Firefox จะใข้คำว่า Inspect Element) หรือจะไปเลือก Developer Tools จากแถบ Menu Bar ของ Chrome ก็ได้เช่นกัน

10. จะปรากฏเครื่องมือเยอะแยะเลยข้างล่าง โดยแบ่งออกเป็น Tab ต่างๆ โดย Tab แรกจะแสดงโค้ดภาษา html และพวก CSS ต่างๆ แต่ตอนนี้เราจะเลือกไปที่ Tab ที่สองที่ชื่อ Console ตามที่ลูกศรชี้

11. เมื่อคลิกเลือก Tab Console จะปรากฏตามภาพข้างล่างครับ แน่นอนว่ายังเป็นหน้าว่างยังไม่มีอะไร แต่ให้สังเกตจากลำดับต่อไปครับ

12. ที่ผ่านมายังไม่มีอะไรที่เป็น Javascript หรือ ES6 เลย เราจะลองเพิ่มเข้าไปในขั้นตอนนี้ครับ เราจะเพิ่มแท็ก script เข้าไป ให้ทำตามในภาพข้างล่างเลยครับ โดยภาษา Javascript นั้นจะทำงานโดยมีตัวจบแต่ละประโยคคำสั่งโดยใช้เครื่องหมาย semicolon หรือ ; ปิดท้าย

คำสั่งจะอยู่ระหว่างแท็ก <script> และ </script> ซึ่งโดยทั่วไปถ้าเราไม่ระบุ attribute language ของแท็กเป็นพิเศษ Browser จะเข้าใจว่าเป็นภาษา Javascript อยู่แล้วครับ เราอาจจะเห็นรูปแบบนี้ก็ได้ คือ <script language=”javascript”>…</script>

คำสั่งบรรทัดแรกคือ alert ซึ่งใช้เมื่อต้องการแสดงข้อความแบบ Dialog Popup
ส่วนคำสั่งบรรทัดที่สอง คือ console.log เป็นการแสดงข้อความใน Console Log ซึ่งจะแสดงผลแบบเบื้องหลังที่ไม่ปรากฏในหน้าจอสำหรับผู้ใช้ โปรแกรมเมอร์เราจะใช้ช่องทางนี้มากที่สุดในการตรวจสอบการทำงานของโปรแกรม ดูค่าต่างๆ ในระหว่างประมวลผลครับ ซึ่งก็คือจะไปปรากฏใน Tab Console ของ Chrome ในภาพก่อนหน้านี้ครับ

13. เมื่อพิมพ์เสร็จ อย่าลืมกด Save ครับ แล้วสลับจากหน้าโปรแกรม Chrome ไปหน้าโปรแกรม Chrome ที่เปิดไว้ แล้วกด Reload หน้า หรือกดปุ่ม F5 เพื่อ Reload อีกที (หรือจะไปดับเบิลคลิกเปิดไฟล์ index.html อีกครั้งก็ได้ ถ้าคุณปิดหน้า Chrome ไปแล้วครับ)  จะปรากฏหน้าต่าง Popup ขึ้นมามีคำว่า Hello World 1 (จากโค้ดที่เขียนว่า alert(“Hello World 1”); ใน Code ครับ ให้คลิกปุ่ม OK เพื่อปิด

14. จากนั้น โปรแกรมที่เราเขียนไว้จะทำงานในบรรทัดที่สองต่อไป คือ console.log(“Hello World 2”); และจะปรากฏคำว่า Hello World 2 ที่ช่อง Console ของ Chrome ครับ ดังภาพข้างล่าง ทีนี้เราก็พอจะรู้วิธีที่ส่งค่าอะไรก็แล้วแต่จากโค้ดของเราออกมาให้เราเห็นได้แล้ว 2 วิธี โดยวิธีแรกเราจะใช้สื่อสารกับผู้ใช้งาน ส่วนวิธีที่สองเราจะใช้เพื่อตรวจสอบของเราเอง โดยผู้ใช้งานจะไม่เห็น (นอกจากเค้าจะมาเปิด Tab Console ดู)

15. ทีนี้เพื่อความสะดวก และเป็นระเบียบ ง่ายต่อการ debug (ตรวจสอบ หาข้อบกพร่องในโปรแกรม) ในอนาคต เราสามารถเขียนโค้ด Javascript แยกเป็นอีกไฟล์ต่างหาก โดยไม่ฝังไว้ใน html  ให้เราสร้างไฟล์ขึ้นมาอีก 1 ไฟล์ โดยจะเป็นไฟล์ภาษา Javascript ซึ่งนิยมใช้นามสกุลไฟล์เป็น .js  ให้สร้างขึ้นในโฟลเดอร์เดียวกันตามวิธีที่เราสร้างไฟล์ index.html ตอนแรก โดยผมขอตั้งชื่อว่า app.js นะครับ แล้วพิมพ์หรือ copy คำสั่ง 2 บรรทัดมาจากไฟล์ index.html มาใส่ในไฟล์ app.js นี้ตามภาพข้างล่าง แล้วกด Save ครับ

16. แล้วยังไงต่อ เมื่อเราย้ายโค้ดออกไปจาก index.html ไปอยู่ใน app.js แล้ว เราก็ต้องเปลี่ยนแปลงใน index.html ตามภาพข้างล่างนี้ครับ คือในแท็ก script เราจะเอาโค้ดคำสั่งออกไปทั้งหมด และเพิ่ม attribute ชื่อ src (ซึ่งมีความหมายว่า source หรือแหล่งของข้อมูล) โดยมีค่าเป็นชื่อไฟล์ app.js ที่เราสร้าง ทำตามภาพข้างล่างครับ เสร็จแล้วก็อย่าลืมกด Save ครับ

17. กลับไปลอง Reload หน้าเว็บ ที่โปรแกรม Chrome อีกครั้ง ถ้าถูกต้อง ผลลัพธ์ควรจะปรากฏเหมือนเดิมครับ ถ้าเป็นไปตามนี้ก็ถือว่า เราสำเร็จในการเริ่มต้นว่าจะเขียนโค้ดใน Code และนำไปแสดงใน Chrome ได้อย่างไร โดยที่เรารู้จัก 2 คำสั่งคือ alert และ console.log ซึ่งใครที่เป็นมือใหม่จริงๆ ก็จะได้เห็นภาพการทำงานแล้วนะครับ

อ้อ ถ้าใครขี้เกียจพิมพ์ตาม ดาวน์โหลด source code ในบทนี้ได้ที่นี่ครับ  
http://www.novel-programming.com/blog/ecma_script/lesson2-files.zip

บทต่อไป เราจะไปเริ่มการเรียนรู้ภาษา Javascript แบบ ES6 กันอย่างจริงจังสักทีนะครับ แบบจับมือกันทำไป คงเริ่มกันที่เรื่อง ตัวแปร การประกาศตัวแปร และการกระทำของตัวแปรครับ สวัสดีครับ