รู้จักภาษา Javascript 101 ใน 5 นาที สำหรับผู้เริ่มต้นศึกษา [JS #101]

JavaScript 101 หรือคำย่อ JS ชื่อเรียกที่คุ้นเคยในเหล่าโปรแกรมเมอร์จัดเป็นภาษาโปรแกรมยอดนิยมเพื่อการพัฒนาเว็บไซต์รูปแบบอินเตอร์แอคทีฟ

JavaScript 101 หรือ JS มือใหม่ ชื่อเรียกที่คุ้นเคยในเหล่าโปรแกรมเมอร์จัดเป็นภาษาโปรแกรมยอดนิยมเพื่อการพัฒนาเว็บไซต์รูปแบบอินเตอร์แอคทีฟ ซึ่งสามารถเรียนรู้ได้ง่าย และทรงพลัง !

บทความนี้เราจะพาทุกคนไปรู้จักกับพื้นฐานของ JavaScript 101 ภายใน 5 นาที

1. ต้องเข้าใจก่อนว่าภาษาจาวาสคริปต์คืออะไร

ภาษาที่ช่วยเพิ่มความมีชีวิตชีวาให้กับเว็บไซต์ ไม่ว่าจะเป็นแอนิเมชันแบบโต้ตอบ ป๊อปอัปแบบไดนามิก (Dynamic Pop-up) หรือสร้างเว็บแอปพลิเคชัน (Web Application) อย่างมืออาชีพ ซึ่งทำงานร่วมกันกับภาษา HTML และ CSS

ภาษาจาวาสคริปต์ได้รับความนิยมในการใช้งานทั้งฝั่งไคลเอนต์ (Client-side) และฝั่งเซิร์ฟเวอร์ (Server-side) ซึ่งเปรียบเสมือนตัวกลางในการติดต่อสื่อสารกับ API (Application Programing Interface) ซึ่งคือกลไกที่ช่วยให้ส่วนประกอบซอฟต์แวร์สองส่วนสามารถสื่อสารกันได้ ไม่เพียงแต่การสร้างสีสันให้กับเว็บไซต์เท่านั้น แต่บทบาทของ JS นับเป็นสิ่งสำคัญที่ช่วยสร้างให้เว็บไซต์สามารถทำงานร่วมกันแบบไดนามิกได้อย่างสมบูรณ์

ภาษา Javascript 101 ผู้เริ่มต้น
ภาษา Javascript 101 ผู้เริ่มต้น

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 มือใหม่ ที่ทรงพลังนี้ และในบทเรียนถัดไปของเรา

ช่วยเผยแพร่โหน่ย:
Verified by MonsterInsights