JavaScript คือ ตอนที่ 2 : ตัวแปร (Variables) และฟังก์ชั่น (Functions)

13พ.ค. 2023 by รับทำแอพ สบายไอที

ตัวแปร (Variables)
ประเภทข้อมูล (Data Types)
ตัวดำเนินการ (Operators)
โครงสร้างการควบคุม (Control Structures)
ฟังก์ชั่น (Functions)
ขอบเขต (Scope)

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

ในส่วนนี้ เราจะเจาะลึกไวยากรณ์และโครงสร้างพื้นฐานของ JavaScript สำรวจลักษณะพื้นฐานของมัน: ตัวแปร ชนิดข้อมูล ตัวดำเนินการ โครงสร้างการควบคุม และฟังก์ชัน ด้วยความรู้นี้ คุณจะพร้อมมากขึ้นในการทำเว็บ ทำแอพ และทำแอพมือถือที่มีส่วนร่วมและเป็นมิตรกับผู้ใช้

1. ตัวแปร (Variables)

ใน JavaScript ตัวแปรคือคอนเทนเนอร์สำหรับค่าโดยพื้นฐานแล้ว ตัวแปรใช้เพื่อเก็บข้อมูลที่สามารถจัดการและอ้างอิงได้ตลอดทั้งโค้ดของคุณ ในการประกาศตัวแปรใน JavaScript คุณสามารถใช้คีย์เวิร์ด var, let, หรือ const ตัวอย่างเช่น:

var name = "John";
let age = 25;
const city = "New York";

ตัวแปรแต่ละตัวมีชื่อ (ตัวระบุ) และค่า ตัวแปรnameประกอบด้วยสตริง “John” ageมีหมายเลข 25 และcityมีสตริง “New York” โปรดจำไว้ว่าconstหมายความว่าค่าของตัวแปรไม่สามารถกำหนดใหม่ได้

2. ประเภทข้อมูล (Data Types)

JavaScript มีข้อมูลพื้นฐานหลายประเภท:

สตริง (String): แสดงถึงลำดับของอักขระ
Number: แทนค่าตัวเลข ทั้งจำนวนเต็มและเลขทศนิยม
Boolean: หมายถึงอย่างใด อย่างหนึ่ง trueหรือfalse
Undefined: หมายถึงตัวแปรที่ประกาศแล้วแต่ยังไม่ได้กำหนดค่า
Null: แสดงถึงการไม่มีค่าวัตถุใด ๆ โดยเจตนา
วัตถุ (Object): โครงสร้างข้อมูลที่ซับซ้อนที่ช่วยให้คุณจัดเก็บชุดข้อมูล
สัญลักษณ์ (Symbol): ค่าดั้งเดิมที่ไม่ซ้ำใครและไม่เปลี่ยนรูป และอาจใช้เป็นคีย์สำหรับวัตถุ

let message = "Hello, world!"; // String
let year = 2023; // Number
let isApproved = true; // Boolean
let emptyVariable; // Undefined
let nothing = null; // Null
let user = {name: "John", age: 25}; // Object

3. ตัวดำเนินการ (Operators)

ตัวดำเนินการ JavaScript ใช้เพื่อดำเนินการกับตัวแปรและค่าต่างๆ ตัวดำเนินการประเภทหลักใน JavaScript คือ:

ตัวดำเนินการทางคณิตศาสตร์ ( +, -, *, /, %, ++, --)
ตัวดำเนินการกำหนด ( =, +=, -=, *=, /=, %=)
ตัวดำเนินการเปรียบเทียบ ( ==, ===, !=, !==, >, <, >=, <=)
ตัวดำเนินการเชิงตรรกะ ( &&, ||, !)
ตัวดำเนินการระดับบิต ( &, |, ^, ~, <<, >>, >>>)

4. โครงสร้างการควบคุม (Control Structures)

โครงสร้างการควบคุมใช้เพื่อจัดการโฟลว์ของโปรแกรม ซึ่งรวมถึง if คำสั่ง switch คำสั่ง และ loops ( for, while, do-while)

คำ if สั่งตรวจสอบเงื่อนไขและดำเนินการกลุ่มของรหัสถ้าเงื่อนไขเป็นจริง ตัวอย่างเช่น:

if (age > 18) {
  console.log("You are an adult.");
}

คำ switch สั่งสามารถใช้เพื่อเลือกหนึ่งในบล็อกโค้ดจำนวนมากที่จะดำเนินการ

การวนซ้ำใช้เพื่อรันบล็อกโค้ดซ้ำๆ ตราบใดที่เงื่อนไขที่ระบุเป็นจริง ตัวอย่างเช่น:

for (let i = 0; i < 10; i++) {
  console.log(i);
}

5. ฟังก์ชั่น (Functions)

ฟังก์ชันใน JavaScript เป็นบล็อกของโค้ดที่ออกแบบมาเพื่อทำงานเฉพาะอย่างฟังก์ชันใน JavaScript เป็นบล็อกของโค้ดที่ออกแบบมาเพื่อทำงานเฉพาะอย่าง ฟังก์ชันจะดำเนินการเมื่อมีการเรียก (หรือเรียกใช้)

นี่คือการประกาศฟังก์ชันอย่างง่าย:

function greet() {
  console.log("Hello, world!");
}

คุณสามารถเรียกใช้ฟังก์ชันนี้โดยใช้ชื่อตามด้วยวงเล็บ:

greet(); // Outputs: Hello, world!

ฟังก์ชันยังสามารถใช้พารามิเตอร์ ซึ่งเป็นค่าที่คุณสามารถส่งผ่านไปยังฟังก์ชันเมื่อคุณเรียกใช้ พารามิเตอร์เหล่านี้กลายเป็นตัวแปรภายในฟังก์ชัน ตัวอย่างเช่น:

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("John"); // Outputs: Hello, John!

ฟังก์ชันยังสามารถคืนค่าได้อีกด้วย คำreturnสั่งสิ้นสุดการทำงานของฟังก์ชันและระบุค่าที่จะส่งคืนไปยังตัวเรียกใช้ฟังก์ชัน

function add(a, b) {
  return a + b;
}

let sum = add(5, 3); // sum now holds the value 8

ฟังก์ชันมีความสำคัญต่อการจัดโครงสร้างและจัดระเบียบโค้ด โดยเฉพาะอย่างยิ่งเมื่อทำเว็บหรือทำแอพ พวกเขาสนับสนุนให้ใช้รหัสซ้ำและทำให้โปรแกรมของคุณอ่านและบำรุงรักษาได้ง่ายขึ้น

6. ขอบเขต (Scope)

ใน JavaScript ขอบเขต (Scope) จะกำหนดความสามารถในการเข้าถึงหรือการมองเห็นของตัวแปร ฟังก์ชัน และออบเจกต์ในบางส่วนของโค้ดของคุณในระหว่างรันไทม์ กล่าวอีกนัยหนึ่งคือกำหนดส่วนของรหัสที่สามารถเข้าถึงตัวแปรหรือฟังก์ชันได้

มีขอบเขตสองประเภทใน JavaScript: ขอบเขตภายในและขอบเขตส่วนกลาง

ขอบเขตส่วนกลาง:ตัวแปรที่กำหนดนอกฟังก์ชันจะอยู่ในขอบเขตส่วนกลาง ตัวแปรเหล่านี้สามารถเข้าถึงได้จากส่วนใดก็ได้ของโค้ด รวมถึงภายในฟังก์ชัน

let globalVar = "I'm global!";

function testScope() {
  console.log(globalVar); // Outputs: I'm global!
}

ขอบเขตเฉพาะที่:ตัวแปรที่กำหนดภายในฟังก์ชันจะอยู่ในขอบเขตเฉพาะที่ ตัวแปรเหล่านี้สามารถเข้าถึงได้ภายในฟังก์ชันนั้นเท่านั้น

function testScope() {
  let localVar = "I'm local!";
  console.log(localVar); // Outputs: I'm local!
}

console.log(localVar); // Error: localVar is not defined

การทำความเข้าใจขอบเขตเป็นสิ่งสำคัญในการทำแอพ เนื่องจากจะช่วยให้คุณจัดการและควบคุมตำแหน่งที่ตัวแปรและฟังก์ชันของคุณสามารถเข้าถึงได้ หลีกเลี่ยงความขัดแย้งในการตั้งชื่อที่อาจเกิดขึ้นหรือผลข้างเคียงที่ไม่ได้ตั้งใจ

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

โปรดจำไว้ว่าวิธีที่ดีที่สุดในการเรียนรู้คือการลงมือทำ ดังนั้น ใช้แนวคิดเหล่านี้ในโครงการที่ใช้งานได้จริง และสำรวจและทดลองต่อไป ในหัวข้อถัดไป เราจะเจาะลึกในหัวข้อ JavaScript ขั้นสูง และเรียนรู้วิธีจัดการ Document Object Model (DOM) จัดการเหตุการณ์ และสร้างการเรียก AJAX เพื่ออัปเดตหน้าโดยไม่ต้องโหลดซ้ำ (reloading)