JavaScript 101 หรือ JS มือใหม่ ชื่อเรียกที่คุ้นเคยในเหล่าโปรแกรมเมอร์จัดเป็นภาษาโปรแกรมยอดนิยมเพื่อการพัฒนาเว็บไซต์รูปแบบอินเตอร์แอคทีฟ ซึ่งสามารถเรียนรู้ได้ง่าย และทรงพลัง !
บทความนี้เราจะพาทุกคนไปรู้จักกับพื้นฐานของ JavaScript 101 ภายใน 5 นาที
1. ต้องเข้าใจก่อนว่าภาษาจาวาสคริปต์คืออะไร
ภาษาที่ช่วยเพิ่มความมีชีวิตชีวาให้กับเว็บไซต์ ไม่ว่าจะเป็นแอนิเมชันแบบโต้ตอบ ป๊อปอัปแบบไดนามิก (Dynamic Pop-up) หรือสร้างเว็บแอปพลิเคชัน (Web Application) อย่างมืออาชีพ ซึ่งทำงานร่วมกันกับภาษา HTML และ CSS
ภาษาจาวาสคริปต์ได้รับความนิยมในการใช้งานทั้งฝั่งไคลเอนต์ (Client-side) และฝั่งเซิร์ฟเวอร์ (Server-side) ซึ่งเปรียบเสมือนตัวกลางในการติดต่อสื่อสารกับ API (Application Programing Interface) ซึ่งคือกลไกที่ช่วยให้ส่วนประกอบซอฟต์แวร์สองส่วนสามารถสื่อสารกันได้ ไม่เพียงแต่การสร้างสีสันให้กับเว็บไซต์เท่านั้น แต่บทบาทของ JS นับเป็นสิ่งสำคัญที่ช่วยสร้างให้เว็บไซต์สามารถทำงานร่วมกันแบบไดนามิกได้อย่างสมบูรณ์
2. ไวยากรณ์พื้นฐาน (Basic Syntax) ที่ต้องรู้
การกำหนดตัวแปรพื้นฐานเพื่อใช้ในการเก็บข้อมูล
var name = "John";
let age = 30;
const isStudent = true;
ประเภทของข้อมูลในตัวแปร
let greeting = "Hello, world!"; // Strings
let number = 42; // Numbers
let isAvailable = false; // Booleans
let person = {firstName: "Jane", lastName: "Doe"}; // Objects
let colors = ["red", "green", "blue"]; // Arrays
การคอมเมนต์ในภาษา JS
// สำหรับบรรทัดเดียว
/*
มากกว่า 1
บรรทัด
*/
3. ตัวดำเนินการพื้นฐาน (Basic Operations)
let sum = 10 + 5; // เครื่องหมายบวก
let difference = 10 - 5; // เครื่องหมายลบ
let product = 10 * 5; // เครื่องหมายคูณ
let quotient = 10 / 5; // เครื่องหมายหาร
เครื่องหมาย + สามารถใช้เพื่อต่อ String ได้ด้วย
let fullName = "John" + " " + "Doe";
3.1 เมื่อกำหนดตัวแปรพื้นฐานเสร็จเรียบร้อยแล้ว จะรู้ได้อย่างไรว่าข้อมูลในตัวแปรถูกต้อง ?
บนหน้าต่าง Console เบราว์เซอร์ (กดปุ่ม F12) หรือโปรแกรมที่รันด้วยภาษา JavaScript เป็นองค์ประกอบสามารถดูผลลัพธ์การทำงานผ่าน Log ของภาษาจาวาคริปต์ได้ด้วยคำสั่งดังต่อไปนี้
ผลลัพธ์
console.log(sum); // Output คือ 15
console.log(difference); // Output คือ 5
console.log(product); // Output คือ 50
console.log(quotient); // Output คือ 2
console.log(fullName); // Output คือ John Doe
4. ฟังก์ชัน (Functions)
เข้าใจง่ายๆคือบล็อกโค้ดที่นำมาใช้ซ้ำได้
function greet(name) {
return "Hello, " + name;
}
console.log(greet("Alice")); // Output: Hello, Alice
// จะเรียกใช้ฟังก์ชัน greet(); กี่ครั้งก็ได้
5. เงื่อนไขพื้นฐาน (Basic Conditionals)
let age = 18; // เท่ากับ
if (age >= 18) { // มากกว่า หรือเท่ากับ
console.log("You are an adult.");
} else {
console.log("You are a minor.");
}
/* นอกจากนี้ยังมี
< น้อยกว่า
<= น้อยกว่า หรือเท่ากับ
== นิยมใช้ในการเปรียบเทียบ 2 ตัวแปรเท่ากันหรือไม่
!= ใช้เปรียบเทียบ 2 ตัวแปรไม่เท่ากัน
*/
6. การทำงานแบบวนซ้ำ (Loops)
วนซ้ำตามเงื่อนไขโดยให้เริ่มต้นที่ตัวแปร i = ค่า 0 วนจนกว่าจะเข้าเงื่อนไขคือ i น้อยกว่า 5 โดยที่ i จะเพิ่มขึ้นเรื่อยๆในทุกๆครั้ง, ความหมายคือวนทำงาน 5 ครั้งเริ่มต้นที่ i = 0 จนถึง 4 นั่นเอง
for (let i = 0; i < 5; i++) {
console.log(i);
}
ผลลัพธ์
0
1
2
3
4
JavaScript ยังมีฟังก์ชันอีกมากมายที่คุณสามารถเรียนรู้ได้เพิ่มเติมเกี่ยวกับภาษา JS มือใหม่ ที่ทรงพลังนี้ และในบทเรียนถัดไปของเรา
