ตอน 1 - เตรียมเครื่องมือเขียน ES6

ก่อนจะมาเริ่มเรียนรู้ ECMAScript หรือ Javascript ในรุ่นใหม่กัน (ต่อไปขอเรียกสั้นๆ ES6 นะครับ)  เราก็จะมาเตรียมตัวเครื่องคอมพิวเตอร์ของเราให้พร้อม ผมอนุมานก่อนนะครับว่า ส่วนใหญ่คนที่กำลังหัดเรียน หัดเล่น เขียนโปรแกรมมักจะใช้เครื่อง PC ที่เป็น Microsoft Windows มากกว่า ผมจึงขอยกตัวอย่างโดยนำเสนอการใช้งานจากเครื่อง PC นะครับ ไม่ใช่ตระกูล Mac (ความแตกต่างคงมีไม่มากครับ) และก็เป็นเครื่องที่มี Windows 8 ขึ้นไปแล้วกันนะครับ เพื่อให้สามารถใช้เครื่องมือทุกอย่างได้โดยไม่มีปัญหา แต่สำหรับเครื่อง Windows 7 หรือเก่ากว่า อาจจะใช้เครื่องมือบางตัวไม่ได้ครับ

เครื่องคอมพิวเตอร์ทุกคนในยุคนี้คงมี Browser หรือโปรแกรมสำหรับเปิดเว็บอยู่แล้วนะครับ ซึ่งเป็นโปรแกรมที่เราต้องใช้แน่ๆ ในการที่จะเขียน ES6 นี่ครับ ซึ่งจะใช้อะไรเพื่อทำงานก็ได้ครับ แต่ถ้าตัวที่มีเครื่องมือค่อนข้างพร้อม ใช้ง่ายและทำงานเร็ว ขอแนะนำเป็น Google Chrome หรือ Mozilla Firefox ครับ ซึ่งทุกคนคงมีติดในเครื่อง หรือ download กันได้ไม่ยากอยู่แล้ว จึงขอรวบรัดข้ามไปนะครับ ไปว่ากันถึงเรื่อง Editor กันดีกว่า

Editor ตัวไหนดี?

หัวใจสำคัญเลยของการเขียนโปรแกรมก็คือ ตัวโปรแกรมที่เราจะใช้เขียนรหัสคำสั่งหรือ Sourcecode ได้ที่เราเรียกว่า Editor ซึ่งยุคนี้มีตัว Editor มากมายที่ใช้งานได้สำหรับการเขียน ECMAScript ซึ่งจริงๆ ก็ต้องการแค่ Text Editor ธรรมดาอย่าง Notepad ที่มีกันทุกเครื่องอยู่แล้ว แต่นั่นแหละครับ Notepad มันช่างไม่มีตัวช่วยอะไรสักอย่างเลย เอาเป็นผมข้ามไปเลยนะครับ ก็มาดูกันก่อนนะครับว่ามีตัวไหนบ้างที่ผมจะแนะนำให้รู้จักกัน โดยที่สำคัญคือ ทุกตัว ฟรี ครับ แต่ผมจะไม่ลงรายละเอียดมากนะครับ มีคนรีวิวโปรแกรมพวกนี้ไว้อยู่แล้ว ผู้อ่านที่สนใจสามารถค้นจาก Google และศึกษาเพิ่มเติมได้ ส่วนใครต้องการอย่างง่าย ขอให้ได้เริ่มเรียนรู้กันไปก่อน แค่เลือกตามผมบอกก็ได้ครับ และอนาคตก็อาจเปลี่ยนใจไปลองตัวอื่นๆ ได้ตลอดครับ 

ตัวแรกเลย เครื่องนี้ถ้าใครใช้เครื่องเก่ากว่า Windows 8 เป็นอันว่าใช้ได้แน่ๆ ครับ คือ Notepad++ (อ่านว่า โน้ตแพดพลัสพลัส) ตัวนี้เป็นโปรแกรมขนาดเล็ก ทำงานได้รวดเร็ว แต่ตัวช่วยมีน้อย หน้าตาก็ดูธรรมดาคล้ายๆ Notepad ธรรมดาอย่างในรูปด้านล่าง แต่ผมก็ใช้ตัวนี้บ่อยนะครับ ในการแก้ไขอะไรเล็กๆ น้อยๆ แต่ด้วยเครื่องมือที่จำกัด ผมขอไม่แนะนำตัวนี้สำหรับผู้เริ่มหัดเขียนนะครับ

สำหรับผู้สนใจ เข้าไป Download ได้ที่ https://notepad-plus-plus.org/ ครับ

ผมจะแนะนำ Editor อีกสัก 3 ตัวนะครับ (ซึ่งควรต้องใช้ Windows 8 เป็นอย่างน้อย) โดย 3 ตัวนี้มีฟีเจอร์คล้ายๆ กัน เช่น หน้าตาเรียบหรูดูดี อ่านง่าย รู้จักรูปแบบ Syntax ทั้งไฟล์ที่เป็น html, css, javascript, รวมถึงภาษาอื่นๆ และยังสามารถเปิดไฟล์แต่ละไฟล์ มีหน้าต่างเป็น tab แยกแต่ละไฟล์พร้อมๆ กัน หรือจะเปิดไฟล์ในลักษณะ Project คือคลิกขวาเปิดจากโฟลเดอร์ได้ ซึ่งจะเห็นไฟล์ทุกไฟล์ใน Project ได้ลักษณะ Tree ทำให้สามารถจัดการกับไฟล์จำนวนมากง่ายขึ้น นอกจากนี้ยังมี Extension หรือตัวเสริมที่ติดตั้งเพิ่มได้และมีการพัฒนาอย่างต่อเนื่อง ตัวเสริมอาจจะมาช่วยในการทำงานต่างๆ ของเราให้ง่ายขึ้น เช่น พวกตัวตรวจสอบ Syntax หรือเติมคำสั่งให้เราโดยอัตโนมัติ

เริ่มจากตัวนี้ครับ

ตัวนี้เป็น Editor ที่เหมาะสำหรับการสาย Web Designer มากๆ ครับ และเป็นผลผลิตจากค่าย Adobe และมี Feature สำคัญเลยคือ Live Preview ที่สามารถแสดงผลหน้าเว็บจริงได้แบบ Realtime โดยที่เราไม่ต้องสลับไปคอยเปิดโหลดหน้าเว็บดูใน Browser เรื่อยๆ ว่าที่เราแก้ไว้เป็นอย่างไร แต่ผมก็คิดว่ามันยังไม่ค่อยสมบูรณ์เท่าไหร่ และเครื่องคอมฯเก่าๆ จะมีปัญหาอยู่เหมือนกัน และด้วยที่ฟีเจอร์ต่างๆ อาจจะเหมาะกับ Designer มากกว่า ตัวนี้ผมก็ยังไม่แนะนำเป็นตัวหลักครับ

สำหรับผู้สนใจ เข้าไป Download ได้ที่ http://brackets.io/ ครับ

ตัวต่อมาครับ

ตัวนี้ก็เป็น Open Source ครับ ใช้งานง่าย และก็มีตัวเสริม Extension มากมาย ซึ่งตัวโปรแกรม Atom เค้าเรียกว่า Package และสามารถเปลี่ยน Theme ได้หลากหลาย ฟีเจอร์หลักๆ ก็อย่างที่ผมบอกด้านบน อยากรู้ว่าดีไหม ต้องลองครับ ส่วนหน้าตาก็แบบนี้ครับ

สำหรับผู้สนใจ เข้าไป Download ได้ที่ https://atom.io/ ครับ

ตัวสุดท้าย ครับ

ตัวนี้ชื่อคุ้นๆ ก็คือเป็นของ Microsoft ครับ แต่ไม่ต้องกลัวเสียตังค์ครับ ตัวนี้เป็น Opensource ครับ ทั้งนี้ไม่กี่ปีที่ผ่านมา Microsoft ก็เปลี่ยนแนวมาสนับสนุนวงการ Opensource อย่างมากมายครับ ฟีเจอร์ก็มากมายคล้ายๆ ตัว Atom และก็มีตัว Extension อย่างมากมายครับ ถึงจะเป็น Microsoft แต่ใครที่ไม่ได้ใช้ Windows ก็มี Version ทั้งบน Mac และ Linux นะครับ ส่วนใช้ดีหรือไม่ ผมไม่ทราบนะครับ เพราะผมใช้เฉพาะบน Windows ครับ ส่วนหน้าตาก็แบบนี้ครับ

สำหรับผู้สนใจ เข้าไป Download ได้ที่ https://www.visualstudio.com/en-us/products/code-vs.aspx ครับ

แล้วถามว่าผมเลือกอะไร ถือเป็นคำตอบส่วนตัวนะครับ ผมเลือกตัว Visual Studio Code หรือเรียกย่อๆ ว่า VS Code นี่ล่ะครับ เพราะฉะนั้นตัวหน้า Screen หลักๆ ที่ผมจะสอนในการเขียนโปรแกรม ผมจะใช้ตัวนี้เป็นหลักนะครับ อย่างไรก็ตาม ผู้อ่านอาจเลือกแตกต่างจากผมได้นะครับ ไม่ได้บังคับให้เชื่อครับ ใช้ตัวไหนก็ได้เพราะถ้าจะเลือกอาวุธคู่มือก็ต้องลองเองว่าตัวไหนดีเหมาะกับเราครับ ผมเองก็ลงไว้ทุกตัวในเครื่องครบเลยครับ เพียงแต่ตัวใช้บ่อยคือ VS Code ครับ

สุดท้าย ในเรื่องของ Editor จริงๆแล้ว การเขียน ECMAScript ยังมีตัวอื่นๆ ที่นิยมอีกมากนะครับ เช่น Sublime หรืออาจจะทำใน IDE (Integrated Development Environment) ที่มีเครื่องไม้เครื่องมือเพียบพร้อม เช่น Visual Studio (ตัวเต็ม), Eclipse , WebStorm, ฯลฯ แต่การใช้งานก็จะซับซ้อนมากขึ้น แต่ใครถนัดหรือทำงานกับภาษาโปรแกรมอื่นๆ อยู่แล้วก็สามารถนำมาใช้ได้เช่นกันครับ

ตอนแรกกะจะเขียนให้ครบถ้วนทุกรายละเอียด แต่ดูๆ ไปบทความจะยาวเกิน เดี๋ยวจะเบื่อกันซะก่อน คงต้องยกยอดไปเริ่มกันในคราวต่อไปเลย ซึ่งเราจะเริ่มหัดเขียน ES6 กันจริงๆ จังๆ เลยครับ และถ้ามีความจำเป็นจะต้องติดตั้งตัวไหนเพิ่ม เราก็จะว่ากันเมื่อถึงเวลาต้องใช้ไปตามลำดับครับ จะได้เริ่มกันเลย ไม่ต้องรอพร้อมทุกอย่างครับ ซึ่งตัวที่เราจะต้องเรียนรู้เพิ่มไปด้วยในบทความต่อๆ ไป ก็อย่างเช่น Node, Babel, Gulp, ฯลฯ (บางคนเริ่มงงแล้ว อะไรอีกเยอะแยะจัง ค่อยๆ ว่ากันในบทความต่อๆไปนะครับ)

ตอน 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 กันอย่างจริงจังสักทีนะครับ แบบจับมือกันทำไป คงเริ่มกันที่เรื่อง ตัวแปร การประกาศตัวแปร และการกระทำของตัวแปรครับ สวัสดีครับ