การติดตั้ง Node.js และภาษา JavaScript

ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับการติดตั้ง Node.js ซึ่งเป็นสภาพแวดล้อมที่เราจะใช้รันโปรแกรมภาษา JavaScript ในบทเรียนของเรา และการติดตั้งโปรแกรม Visual Studio Code ซึ่งเป็น Editor ที่เราอยากแนะนำสำหรับการเขียนโปรแกรมภาษา JavaScript นี่เป็นเนื้อหาของบทนี้

  • การติดตั้ง Node.js
  • การติดตั้งโปรแกรม Visual Studio Code
  • ทดสอบเขียนและรันโปรแกรม
  • การเขียนและรัน JavaScript บนเบราวน์เซอร์

การติดตั้ง Node.js

Node.js เป็นสภาพแวดล้อมในการรันโปรแกรมภาษา JavaScript นอกเว็บเบราวน์เซอร์ หรือกล่าวอีกนัยหนึ่ง เราสามารถเขียนโปรแกรมภาษา JavaScript และรันบน Command line ได้; Node.js นั้นเป็นโปรเจ็คแบบโอเพ่นซอร์ส และข้ามแพลตฟอร์ม ที่มีให้ดาวน์โหลดทั้งบนระบบปฏิบัติการ Windows, Unix และ Mac

ในบทเรียนนี้ จะเป็นการติดตั้ง Node.js บน Windows 8 อย่างไรก็ตาม หากคุณใช้วินโด้เวอร์ชันอื่น เช่น Windows 10 การติดตั้งจะไม่แตกต่างกันมา ต่อไปเป็นขั้นตอนการตั้ง Node.js

1) ก่อนอื่นเราต้องดาวน์โหลดตัวติดตั้งของ Node.js มาก่อน คุณสามารถดาวน์โหลดได้ที่เว็บไซต์หลักของมันที่ https://nodejs.org/en/download/ ในหน้าดาวน์โหลด เลือกตัวเลือกการดาวน์โหลดที่แนะนำ (1) หรือเลือกตามระบบปฏิบัติการของคุณ (2)

2) รอจนกว่าการดาวน์โหลดเสร็จสิ้น เปิดโฟล์เดอร์ที่เก็บไฟล์ติดตั้ง Node.js ที่ดาวน์โหลดมา หลังจากนั้นคลิกที่ไฟล์ดังกล่าวเพื่อเริ่มการติดตั้ง

3) ในหน้าเริ่มต้นการติดตั้ง คลิก "I accept the terms and the Licence Agreement" เพื่อยอมรับเงื่อนไขการใช้งาน จากนั้นคลิก "Next" เพื่อไปยังหน้าต่อไป

4) ในหน้ากำหนดสถานที่ติดตั้ง คุณสามารถเลือกโฟล์เดอร์สำหรับติดตั้ง Node.js ที่ต้องการได้ ในตัวอย่าง เราได้ใช้ค่าเริ่มต้น จากนั้นคลิก "Next" เพื่อไปยังหน้าต่อไป

5) ในหน้าตั้งค่าการติดตั้ง เป็นการเลือกส่วนประกอบที่ต้องการติดตั้ง ในตัวอย่างเราใช้ค่าเริ่มต้นซึ่งเป็นการติดตั้งทุกอย่างที่มากับตัวติดตั้งนี้ ถ้าหากบางตัวเลือกไม่ถูกเลือก เราแนะนำให้เลือกมันทั้งหมด จากนั้นคลิก "Next" เพื่อไปยังหน้าต่อไป

6) หลังจากเราเตรียมการตั้งค่าเรียบร้อยแล้ว ตอนนี้คลิก "Install" เพื่อเริ่มต้นติดตั้ง Node.js ลงบนคอมพิวเตอร์ของคุณ

7) รอก่อนว่าการติดตั้งจะเสร็จ หลังจากนั้นคุณจะพบกับหน้าต่างนี้ คลิก "Finished" ถือว่าการติดตั้ง Node.js เสร็จเรียบร้อย

เพื่อตรวจสอบให้แน่ใจว่า Node.js ได้ติดตั้งลงบนคอมพิวเตอร์ของคุณและมันสามารถใช้งานได้ ให้เปิด Command line ขึ้นมาแล้วพิมพ์คำสั่งต่อไปนี้

node -v

ผลลัพธ์ที่ได้ควรจะเป็นเวอร์ชันของ Node.js ที่เราเพิ่งจะติดตั้งไป

v12.18.3

นั่นหมายความว่าในตอนนี้เราสามารถใช้งาน Node.js เพื่อรันโปรแกรมภาษา JavaScript ได้แล้ว

หมายเหตุ: เมื่อเราติดตั้ง Node.js มันจะมาพร้อมกับ JavaScript engine ที่ใช้ในการคอมไพล์และรันภาษา JavaScript; หรือกล่าวอีกนัยหนึ่ง ภาษา JavaScript จะถูกติดตั้งมาพร้อมกับ Node.js นั่นเอง

การติดตั้งโปรแกรม Visual Studio Code

สำหรับโปรแกรม Editor ที่ใช้เขียนภาษา JavaScript นั้นเราแนะนำโปรแกรม Visual Studio Code มันเป็นโปรแกรมที่ได้รับความนิยมและฟรี สำหรับขั้นตอนการติดตั้ง Visual Studio Code โปรดอ่านที่ การติดตั้งและใช้งานโปรแกรม Visual Studio Code เพื่อดูวิธีการติดตั้งและใช้งานโปรแกรมเบื้องต้น

ทดสอบเขียนและรันโปรแกรม

หลังจากที่คุณติดตั้งโปรแกรม Visual Studio Code หรือเลือก Editor ที่ต้องการใช้ได้แล้ว ต่อไปจะเป็นการทดสอบเขียนโปรแกรมภาษา JavaScript อย่างง่ายและรันมัน ในตัวอย่างของเราจะเขียนและรันผ่าน Terminal บนโปรแกรม Visual Studio Code ซึ่งคุณอาจจะใช้โปรแกรมอื่นเพื่อเขียน และรันผ่านทาง Command Line ของระบบได้โดยตรง ซึ่งได้ผลลัพธ์เหมือนกัน

สร้างไฟล์ชื่อว่า sum.js และใส่โค้ดของโปรแกรมต่อไปนี้

sum.js
function sum(a, b) {
    return a + b;
}

console.log("3 + 4 = " + sum(3, 4));

ในตัวอย่าง เราได้เขียนโปรแกรมภาษา JavaScript สังเกตว่านามสกุลของไฟล์จะต้องเป็น .js เสมอ และภายในโปรแกรมเราได้ประกาศฟังก์ชัน sum สำหรับบวกตัวเลขสองตัวเข้าด้วยกัน แล้วเรียกใช้งานฟังก์ชันดังกล่าว และแสดงผลลัพธ์ออกมาทางหน้าจอ

การรันผ่าน Command Line ของระบบ (Windows)

ในการรันโปรแกรม JavaScript เราจะใช้คำสั่ง node และตามด้วยชื่อไฟล์ที่ต้องการรัน ยกตัวอย่างเช่น

node filename.js
node C:\paht\to\filename.js

ต่อไปเป็นการรันโปรแกรมไฟล์ app.js ผ่าน Command Line ซึ่งขั้นตอนต่อไปนี้เป็นวิธีที่เราจะใช้รันโปรแกรมทั้งหมดที่เราเขียนขึ้นในบทเรียนนี้

  1. เปิด Command Line ขึ้นมา
  2. ย้ายไปยังโฟล์เดอร์ของโปรเจ็คที่ไฟล์โปรแกรมถูกเก็บอยู่ ด้วยคำสั่ง cd C:\JavaScript
  3. รันโปรแกรมด้วยคำสั่ง node sum.js (หรือคุณสามารถรันแบบที่อยู่เต็มได้ node C:\paht\to\filename.js โดยข้ามขั้นตอน 2 ไป)

การรันผ่าน Terminal บน Visual Studio Code

เราสามารถเปิดใช้งาน Command Line (Terminal) บน Visual Studio Code ได้เลย นี่จะทำให้ในขณะที่เขียนโปรแกรมใน VS Code เราไม่ต้องสลับออกมารันที่ Command Line ด้านนอกโปรแกรม ซึ่งอำนวยความสะดวกเป็นอย่างมาก

นี่เป็นขั้นตอนการเปิด Command Line และรันโปรแกรมบน VS Code

  1. เปิดโฟล์เดอร์โปรเจ็คของคุณขึ้นมา โดยคลิกเลือกที่เมนู "File" และเลือก "Open Folder..."
  2. เปิด Command Line ขึ้นมา โดยคลิกเลือกที่เมนู "Terminal" และเลือก "New Terminal" หรือกดคำสั่งลัด "Ctrl+Shift+`"
  3. รันโปรแกรมด้วยคำสั่ง node sum.js

การรันโปรแกรมภาษา JavaScript บนเบราวน์เซอร์

สุดท้ายจะเป็นตัวอย่างการรันโปรแกรมภาษา JavaScript บนเว็บเบราวน์เซอร์ ถึงแม้ในบทเรียนของเราจะไม่ได้ใช้วิธีนี้ แต่เราจะแสดงตัวอย่างให้ดูในกรณีที่คุณอาจต้องการทำเช่นนี้

ในการรันโปรแกรมภาษา JavaScript บนเว็บเบราวน์เซอร์นั้น สคริปของโปรแกรมจะต้องถูกรันอยู่ภายใต้บริบทของหน้าเว็บเพจ โดยการใช้แท็ก <script> ซึ่งเป็นแท็ก HTML สำหรับนำเข้าโค้ดภาษา JavaScript บนเว็บ และมีสองวิธีที่คุณสามารถทำได้

วิธีแรกคือการเขียน JavaScript แบบฝังในหน้าเว็บ HTML นั้นๆ โดยโค้ดของภาษา JavaScript ต้องอยู่ภายในแท็ก <script>

index.html
<!DOCTYPE html>
<html>

<body>
    <script>
        function sum(a, b) {
            return a + b;
        }

        console.log("3 + 4 = " + sum(3, 4));
    </script>
</body>

</html>

วิธีที่สองคือนำเข้าจากไฟล์ JavaScript ด้วยแท็ก <script> โดยกำหนด URL ของสคริปผ่านแอตทริบิวต์ src วิธีนี้ทำให้เราสามารถแยกโค้ดออกเป็นโมดูลได้

index.html
<!DOCTYPE html>
<html>

<body>
    <script src="./sum.js"></script>
</body>

</html>

จากนั้นเปิดไฟล์ index.html บนเว็บเบราว์เซอร์ และเพื่อดูผลลัพธ์การทำงานของโปรแกรม เราจะต้องดูผ่านเว็บ Console ซึ่งเป็นเครื่องมือสำหรับนักพัฒนาเพื่อ Debug การทำงานของโปรแกรม

เพื่อเปิดเว็บ Console บน Chrome กด Ctrl+Shift+I จากนั้นไปที่แท็บ "Console" คุณจะเห็นผลลัพธ์ทั้งหมดจากฟังก์ชัน console.log และนี่เป็นวิธีการเปิดเว็บ Console บนบราวน์เซอร์อื่นๆ

  • บน Firefox กด Ctrl+Shift+K
  • บน Safari บน Mac กด Cmd + Opt + J

คุณสามารถเปลี่ยนการแสดงผลจากฟังก์ชัน console.log ไปใช้ฟังก์ชัน alert ได้ นี่จะแสดงหน้าต่างแสดงผลผ่านเบราว์เซอร์แทน ยกตัวอย่างเช่น

alert("3 + 4 = " + sum(3, 4));

อย่างไรก็ตาม ฟังก์ชัน alert ไม่ได้เป็นฟังก์ชันมาตรฐานของภาษา JavaScript มันเป็นฟังก์ชันที่มาจาก API ของเว็บเบราว์เซอร์ นั่นหมายความว่ามันสามารถใชได้บนเว็บเบราว์เซอร์เท่านั่น

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

ในบทนี้ เราได้พูดถึงการเตรียมเครื่องมือในการเขียนโปรแกรมภาษา JavaScript เราได้ติดตั้ง Node.js ซึ่งเป็นสภาพแวดล้อมที่ใช้ในการรันภาษา JavaScript บน Command Line ในบทต่อไป จะเป็นการเข้าสู่เนื้อของภาษา JavaScript ซึ่งจะเป็นการเริ่มเขียนโปรแกรมจริงๆ แล้ว