ทำความรู้จัก JavaScript ภาษาโปรแกรมมิ่งสุดฮิตตลอดกาล

JavaScript (JS) คืออะไร?

JavaScript (หรือ "JS") เป็นภาษาโปรแกรมฝั่ง Client Side ที่ได้รับความนิยมเป็นอย่างสูง (หรือมากที่สุดในปัจจุบันก็ว่าได้) แต่ก่อน JS เคยถูกใช้ได้แค่ฝั่งหน้าบ้าน แต่ตอนนี้สามารถใช้ในฝั่งเซิร์ฟเวอร์ด้วย โดยใช้ Node.js (ซึ่งจะกล่าวต่อไปในด้านล่างครับ)

บ่อยครั้งที่มือใหม่หลายคนมักจะสับสนระหว่าง JavaScript และ Java แม้ว่า "Java" และ "JavaScript" เป็นเครื่องหมายการค้าของ Oracle ในสหรัฐฯและประเทศอื่น ๆ แต่ภาษาโปรแกรมสองภาษานี้แตกต่างกันอย่างสิ้นเชิงเลยครับ ทั้งในส่วนของไวยากรณ์ ความหมาย รวมไปถึงประเภทการใช้งาน

แนะนำ: JavaScript Tutorial

ภาษาที่อยู่บนพื้นฐาน DOM

JavaScript ใช้โดยส่วนใหญ่ในเบราว์เซอร์ ทำให้นักพัฒนาสามารถควบคุมเนื้อหาบนเว็บเพจผ่าน DOM และจัดการข้อมูลด้วย AJAX และ IndexedDB รวมถึงการวาดกราฟิกด้วย Canvas และการโต้ตอบกับอุปกรณ์ที่ใช้งานเบราว์เซอร์ผ่าน API ต่าง ๆ และอื่น ๆ อีกมากมาย JavaScript เป็นหนึ่งในภาษาที่ใช้กันอย่างแพร่หลายในโลกของ Software หรือ Software Development เนื่องจากการเติบโตและการปรับปรุงประสิทธิภาพของ API ที่มีให้ในเบราว์เซอร์อยู่ตลอดเวลา

ประวัติความเป็นมาของ JavaScript

ต้นกำเนิดและประวัติ เริ่มแรก JavaScript ถูกสร้างเป็นภาษาโปรแกรมฝั่งเซิร์ฟเวอร์โดย Brendan Eich (ที่รับงานจากบริษัท Netscape) แล้ว JavaScript มาถึง Netscape Navigator 2.0 เมื่อกันยายน 1995 JavaScript ได้รับความสำเร็จทันที และ Internet Explorer 3.0 รองรับ JavaScript ในชื่อ JScript เมื่อสิงหาคม 1996

ในพฤศจิกายน 1996 บริษัท Netscape ได้เริ่มร่วมงานกับ Ecma International เพื่อทำให้ JavaScript เป็นมาตรฐานอุตสาหกรรม ตั้งแต่นั้น JavaScript มีมาตรฐานเรียกว่า ECMAScript และระบุไว้ภายใต้ ECMA-262 ซึ่งรุ่นล่าสุด (รุ่นที่สิบสอง, ES2021) พร้อมใช้งานตั้งแต่มิถุนายน 2021

วิวัฒนาการสู่ Node.js

เมื่อไม่นานมานี้ ความนิยมของ JavaScript ได้ขยายออกไปอีกเพิ่ม โดยผ่านแพลตฟอร์ม Node.js ที่ประสบความสำเร็จอย่างมาก — Node.js ซึ่งเป็น JavaScript Runtime ที่ใช้งานได้บนแพลตฟอร์มหลากหลาย โดย Node.js สร้างขึ้นโดยใช้ Chrome's V8 JavaScript Engine ทำให้นักพัฒนาสามารถใช้ JavaScript เป็นภาษาสคริปต์เพื่อ automate สิ่งต่าง ๆ บนคอมพิวเตอร์และสร้างเซิร์ฟเวอร์ HTTP และ Web Sockets ที่ทำงานอย่างเต็มรูปแบบ

JavaScript ทำอะไรได้บ้าง

JS ถือเป็นอีกหนึ่งภาษาที่ทำอะไรได้หลายอย่าง ครอบจักรวาลเลยทีเดียวครับ ไม่น้อยหน้าภาษา Python เลย นี่คือด้านหลัก ๆ ที่ JavaScript สามารถทำได้ครับ

ภาษาโปรแกรมมิ่งยอดนิยมจาก Stackshare.io

การพัฒนาเว็บ (ฝั่ง Front-end)

การพัฒนาด้านหน้าของเว็บ JavaScript สามารถใช้ในการสร้างหน้าเว็บหรือฝั่ง Front-end นั่นเอง โดยเน้นเว็บที่ต้องการมีปฏิสัมพันธ์ที่ดีกับผู้ใช้งานและการสร้าง animation ต่าง ๆ รวมไปถึงการทำหน้าเว็บแบบ Single-Page Applications (SPAs): โดย Front-end เฟรมเวิร์คของ JavaScript ที่ได้รับความยอดนิยมในตลาดงานปัจจุบัน คือ React, Angular, และ Vue.js เป็นต้น

การพัฒนาด้านเซิร์ฟเวอร์

JavaScript สามารถใช้ในการพัฒนาด้านเซิร์ฟเวอร์หรือ Back-end ด้วย Node.js โดยมี Back-end เฟรมเวิร์คเช่น Express.js เป็นตัวชูโรง ทำให้เราสามารถสร้างแอปพลิเคชันฝั่งเซิร์ฟเวอร์ที่มีประสิทธิภาพและมาตรฐานสูง ทำให้สามารถสร้าง Web App, API, Web Services  ต่าง ๆ ได้เป็นอย่างดี

การพัฒนาแอปพลิเคชันมือถือ

JavaScript สามารถใช้ในการพัฒนาแอปพลิเคชันมือถือสำหรับแพลตฟอร์ม iOS และ Android โดยใช้เฟรมเวิร์ค React Native ซึ่งเราสามารถเขียนโค้ดครั้งเดียวแต่รันได้ทั้งสองแพลตฟอร์ม (Cross Platform)

การพัฒนาแอปพลิเคชันบนเดสก์ท็อป

ร่วมกับ HTML และ CSS สามารถใช้ในการสร้างแอปพลิเคชันเดสก์ท็อปแพลตฟอร์มได้ด้วย Electron แอปพลิเคชันยอดนิยมอย่าง Slack และ Visual Studio Code ถูกสร้างขึ้นโดยใช้ Electron

การพัฒนาเกมส์

JavaScript มักใช้สำหรับการพัฒนาเกมส์ที่ใช้เว็บเบราว์เซอร์โดยใช้ HTML5 canvas และ WebGL ไลบรารีการพัฒนาเกมส์เช่น Phaser และ Three.js ช่วยให้ง่ายต่อการสร้างเกมส์

ตัวอย่าง Syntax (ไวยากรณ์) หรือคำสั่งของ JS

นี่คือตัวอย่าง Syntax ของภาษา JavaScript ครับ โดยจะไม่ได้อธิบายเยอะหรือยกมาทั้งหมด แต่ก็เชื่อว่าเพื่อน ๆ จะมองภาพรวมออกครับ

Hello World JavaScript

คำสั่ง Hello World ถือว่าเป็นคำสั่งสุดคลาสสิคที่ไม่ว่าเราจะเริ่มต้นเรียนภาษาอะไรก็ตาม ก็ต้องเริ่มต้นด้วยตัวนี้แหละครับ นี่คือ Hello World ใน JS ครับ

// แสดงผลคำว่า "Hello, World"
console.log("Hello, World!");

Variables & Data Types

นี่คือรูปแบบโครงสร้างของตัวแปรครับ โดยตัวอย่างจะเป็นตัวแปรแบบ string และ number ตามลำดับ

// ตัวแปรและประเภทข้อมูล
let name = "Isara";
const age = 24;

ศึกษาเพิ่มเติม: JavaScript Variables & Data Types

Control Flow (if-else)

ทุกภาษาก็ย่อมมีส่วนนี้ใช่ไหมครับ พูดแบบบ้าน ๆ ก็คือ if-else นั่นแหละ ก็เขียนได้แบบนี้เลย (ซึ่งก็ไม่ได้ดูซับซ้อนอะไรเนอะ)

// การเขียนเงื่อนไข
if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are a minor.");
}

ศึกษาเพิ่มเติม: JavaScript if-else

Function

ในส่วนของฟังก์ชันก็จะเขียนได้ประมาณนี้ครับ โดยด้านล่างเป็นตัวอยางฟังก์ชันง่าย ๆ แสดงข้อความการทักทาย

// ฟังก์ชันแสดงการทักทาย
function greet(name) {
    console.log(`Hello, ${name}!`);
}
greet("อิสระ รักเรียนรู้");

ศึกษาเพิ่มเติม: JavaScript Function

ก็เอาไว้พอหอมปากหอมคอ ประมาณนี้ก่อนครับ เดี๋ยวค่อยไปลงลึกในแต่ละส่วนกัน

สรุป

เป็นอย่างไรกันบ้างครับสำหรับภาพรวมของภาษา JavaScript ไม่ว่าจะเป็นประวัติ โครงสร้างภาษา การนำไปใช้งาน รวมไปถึงคำสั่งหรือไวยากรณ์ต่าง ๆ ซึ่งทางทีม devhub.in.th เราก็หวังว่าจะช่วยให้เพื่อน ๆ ที่เพิ่งเริ่มต้นศึกษาได้เข้าใจ JS ในมิติต่าง ๆ ที่สำคัญ พร้อมที่จะเริ่มต้นศึกษาแบบลึกมากขึ้นในลำดับต่อไปครับ