เส้นทางอาชีพการเป็น Software Developer กับ ChatGPT #7.1 JavaScript Track

ขั้นตอนการติดตั้ง VS Code

1. ดาวน์โหลดไฟล์ติดตั้งจากเว็บไซต์ https://code.visualstudio.com/
2. คลิกที่ไฟล์ติดตั้งที่ดาวน์โหลดมา
3. คลิก "Run" เพื่อเริ่มต้นติดตั้ง
4. คลิก "Next" เพื่อเข้าสู่ขั้นตอนต่อไป
5. ยอมรับข้อตกลงและเลือกตำแหน่งที่ติดตั้งโปรแกรม
6. คลิก "Next" เพื่อเริ่มต้นติดตั้ง
7. เมื่อติดตั้งเสร็จสิ้น คลิก "Finish" เพื่อออกจากตัวติดตั้ง

หลังจากติดตั้ง VS Code เรียบร้อยแล้ว คุณสามารถเขียน JavaScript ได้โดยเปิดโปรแกรม VS Code แล้วเลือก "New File" จากนั้นบันทึกไฟล์ด้วยนามสกุล .js และเขียนโค้ด JavaScript ของคุณในไฟล์นั้น ตามที่คุณต้องการ

เริ่มต้นการติดตั้ง Node.js และเขียน JavaScript บน VS Code
ได้ตามขั้นตอนดังนี้

เริ่มต้นการติดตั้ง Node.js และเขียน JavaScript บน VS Code ได้ตามขั้นตอนดังนี้

1. ดาวน์โหลดและติดตั้ง Node.js จาก https://nodejs.org/en/ โดยเลือกตัวติดตั้งที่ตรงกับระบบปฏิบัติการของคุณ
2. เปิด VS Code และสร้างโฟลเดอร์ใหม่สำหรับโปรเจกต์ของคุณ
3. คลิกที่เมนู Terminal และเลือก New Terminal
4. เพื่อใช้งาน Node.js ใน Terminal ให้พิมพ์คำสั่ง node -v เพื่อตรวจสอบเวอร์ชันของ Node.js ว่าติดตั้งเรียบร้อยหรือไม่
5. สร้างไฟล์ JavaScript ใหม่โดยคลิกขวาที่โฟลเดอร์และเลือก New File จากนั้นตั้งชื่อไฟล์ว่า app.js (หรือชื่ออื่นตามต้องการ)
6. เขียนโค้ด JavaScript ลงไปในไฟล์ app.js ตามที่ต้องการ
7. เพื่อรันโค้ด JavaScript ในไฟล์ app.js ให้พิมพ์คำสั่ง node app.js ใน Terminal

โดยการติดตั้ง Node.js และเขียน JavaScript บน VS Code เป็นขั้นตอนพื้นฐาน ๆ ที่ใช้ในการเรียนรู้ JavaScript และพัฒนาโปรแกรมต่าง ๆ ที่ใช้ Node.js ในการทำงาน สามารถเรียนรู้ต่อเนื่องได้จากแหล่งข้อมูลออนไลน์ หรือจากหนังสือเรียนรู้ JavaScript และ Node.js ที่มีอยู่ในตลาด

JavaScript ตัวแปรและประเภทของข้อมูล ตัวอย่างจากการทำระบบ e-Commerce

JavaScript เป็นภาษาโปรแกรมมิ่งที่สามารถใช้งานกับ HTML และ CSS เพื่อสร้างเว็บไซต์และแอพพลิเคชั่นต่าง ๆ ได้ ในการพัฒนาระบบ e-Commerce ด้วย JavaScript จำเป็นต้องรู้จักกับตัวแปรและประเภทของข้อมูล ดังนี้

ตัวแปร (Variables)
ตัวแปรใน JavaScript ใช้สำหรับเก็บข้อมูลต่าง ๆ เช่น ตัวเลข ข้อความ หรือ boolean (true/false) โดยการประกาศตัวแปรใน JavaScript สามารถทำได้โดยใช้คำสำคัญ var, let, หรือ const ตัวอย่างการประกาศตัวแปรใน JavaScript ดังนี้

var productName = "iPhone 13";
let productPrice = 29900;
const productIsAvailable = true;

ประเภทของข้อมูล (Data Types)
JavaScript มีประเภทของข้อมูลหลายประเภท เช่น ตัวเลข (Number), ข้อความ (String), บูลีน (Boolean), วัตถุ (Object), และอื่น ๆ ตัวอย่างการใช้งานประเภทของข้อมูลใน JavaScript ดังนี้

var productName = "iPhone 13"; // String
let productPrice = 29900; // Number
const productIsAvailable = true; // Boolean

// Object
const productDetails = {
  name: "iPhone 13",
  price: 29900,
  isAvailable: true
};

การใช้งานตัวแปรและประเภทของข้อมูลในการพัฒนาระบบ e-Commerce สามารถนำมาใช้เพื่อเก็บข้อมูลเกี่ยวกับสินค้า เช่น ชื่อสินค้า ราคาสินค้า จำนวนสินค้าในสต๊อก และอื่น ๆ ตามต้องการเพื่อนำไปแสดงผลหรือประมวลผลต่อไป

ตัวดำเนินการ
ตัวดำเนินการ (Operators) เป็นสัญลักษณ์หรือเครื่องหมายทางคณิตศาสตร์ที่ใช้ในการดำเนินการทางตัวเลข หรือการดำเนินการกับข้อมูลในภาษา JavaScript โดยสามารถแบ่งเป็นหลายประเภทได้ดังนี้

• ตัวดำเนินการทางตัวเลข (Arithmetic Operators) ตัวดำเนินการทางตัวเลขใช้ในการดำเนินการทางคณิตศาสตร์ เช่น การบวก (+), การลบ (-), การคูณ (*), การหาร (/), และการหารเอาเศษ (%) ตัวอย่างการใช้งานในระบบ e-Commerce:

let total = 1000;
let discount = 0.2;
let netTotal = total - (total * discount); // คำนวณราคาสุทธิหลังหักส่วนลด
console.log(netTotal); // 800

• ตัวดำเนินการเปรียบเทียบ (Comparison Operators) ตัวดำเนินการเปรียบเทียบใช้ในการเปรียบเทียบค่าของตัวแปร หรือค่าของตัวดำเนินการ โดยจะได้ผลลัพธ์เป็น Boolean (true/false) เช่น การเปรียบเทียบว่ามีค่ามากกว่า (>), มีค่าน้อยกว่า (<), เท่ากับ (==), ไม่เท่ากับ (!=), มีค่ามากกว่าหรือเท่ากับ (>=), และมีค่าน้อยกว่าหรือเท่ากับ (<=) ตัวอย่างการใช้งานในระบบ e-Commerce:

let price1 = 100;
let price2 = 200;
console.log(price1 < price2); // true
console.log(price1 == price2); // false

• ตัวดำเนินการทางตรรกะ (Logical Operators) ตัวดำเนินการทางตรรกะ (Logical Operators) ในภาษา JavaScript นั้นประกอบด้วย && (AND), || (OR), ! (NOT) เพื่อใช้ในการประมวลผลข้อมูลที่มีความซับซ้อน เช่น การเช็คเงื่อนไขหลายๆ เงื่อนไข หรือการตรวจสอบค่าที่เป็นจริงหรือเท็จ ดังตัวอย่างเช่นการเช็คสถานะการชำระเงินในระบบ e-commerce ด้วยตัวดำเนินการทางตรรกะได้แก่

const isPaid = true;
const isDelivered = false;

// AND operator
if (isPaid && isDelivered) {
  console.log("Order completed");
} else {
  console.log("Order not completed yet");
}

// OR operator
if (isPaid || isDelivered) {
  console.log("Order partially completed");
} else {
  console.log("Order not completed yet");
}

// NOT operator
if (!isDelivered) {
  console.log("Order not delivered yet");
}

ในตัวอย่างข้างต้นเราใช้ตัวดำเนินการ && เพื่อเช็คว่าการชำระเงินและการจัดส่งสินค้าเสร็จสมบูรณ์หรือไม่ หากเป็นจริงทั้งคู่จะแสดงข้อความว่า "Order completed" แต่ถ้าไม่เป็นจริงทั้งคู่จะแสดงข้อความว่า "Order not completed yet" ส่วนในการใช้ตัวดำเนินการ || เราเช็คว่าการชำระเงินหรือการจัดส่งสินค้ามีการเสร็จสมบูรณ์อย่างใดอย่างหนึ่งหรือไม่ ถ้าเป็นจริงแต่ไม่ทั้งคู่จะแสดงข้อความว่า "Order partially completed" สุดท้าย ในการใช้ตัวดำเนินการ ! เราเช็คว่าสินค้าได้ถูกจัดส่งหรือยัง หากยังไม่ถูกจัดส่งจะแสดงข้อความว่า "Order not delivered yet"

คำสั่งเงื่อนไขและการวนซ้ำ
JavaScript มีคำสั่งเงื่อนไขและการวนซ้ำหลายตัวที่นิยมใช้ในการเขียนโปรแกรม โดยทั่วไปจะใช้เงื่อนไขและการวนซ้ำเพื่อควบคุมการทำงานของโปรแกรมให้ตรงตามที่ต้องการ ตัวอย่างเช่นในการพัฒนาเว็บไซต์ e-commerce สามารถใช้คำสั่งต่อไปนี้ได้:
คำสั่งเงื่อนไข (Conditional Statements)
1.if statement

คำสั่ง if statement ใช้เพื่อตรวจสอบเงื่อนไขว่าเป็นจริงหรือเป็นเท็จ แล้วจึงทำงานตามเงื่อนไขที่ได้ตรวจสอบไว้ โดยคำสั่ง if จะใช้ร่วมกับคำสั่ง else หรือ else if เพื่อให้ทำงานเมื่อเงื่อนไขไม่เป็นจริง

let totalAmount = 1000;

if (totalAmount > 500) {
  console.log("You got a discount!");
} else {
  console.log("Sorry, no discount for you.");
}

2.switch statement

คำสั่ง switch statement ใช้เพื่อตรวจสอบค่าตัวแปรว่าตรงกับค่าใด จากนั้นก็จะทำงานตาม case ที่เลือกไว้ โดย switch statement จะใช้ break เพื่อหยุดการทำงานทันทีหลังจากทำงานเสร็จสิ้นในแต่ละ case

let grade = "A";

switch (grade) {
  case "A":
    console.log("Excellent!");
    break;
  case "B":
    console.log("Good job!");
    break;
  case "C":
    console.log("Not bad.");
    break;
  default:
    console.log("Sorry, you failed.");
    break;
}

คำสั่งการวนซ้ำ (Loops)
คำสั่งการวนซ้ำ (Loops) เป็นคำสั่งที่ใช้ในการทำซ้ำของบล็อกคำสั่งเดิม จนกว่าจะเป็นเท็จ ซึ่งช่วยให้การทำงานของโปรแกรมมีประสิทธิภาพมากขึ้น โดย JavaScript มีคำสั่งวนซ้ำ 3 แบบ ได้แก่ for loop, while loop และ do-while loop

1.For loop
For loop เป็นการทำซ้ำที่ทำงานตามจำนวนรอบที่กำหนดไว้ โดยมีรูปแบบดังนี้

for (ค่าเริ่มต้น; เงื่อนไข; การเปลี่ยนแปลงค่าตัวนับ) {
  // บล็อกคำสั่งที่จะทำซ้ำ
}

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

Output:

1
2
3
4
5

2.While loop

While loop เป็นการทำซ้ำที่ทำงานตามเงื่อนไขที่กำหนดไว้ ถ้าเงื่อนไขเป็นจริง จะทำงานเรื่อยๆ จนกว่าเงื่อนไขจะเป็นเท็จ โดยมีรูปแบบดังนี้

while (เงื่อนไข) {
  // บล็อกคำสั่งที่จะทำซ้ำ
}

let i = 1;
while (i <= 5) {
  console.log(i);
  i++;
}

Output:

1
2
3
4
5

3.Do-while loop
Do-while loop ใช้สำหรับวนรอบและตรวจสอบเงื่อนไขที่ต้องการทำงานซ้ำ โดยจะทำงานก่อนเช็คเงื่อนไขว่าจะต้องทำงานต่อไหม ถ้าเงื่อนไขเป็นจริงจะทำงานซ้ำ จนกว่าเงื่อนไขจะเป็นเท็จ

โค้ดตัวอย่างการใช้งาน Do-while loop:

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

Output:

0
1
2
3
4

โดยจะทำการวนรอบและแสดงค่าตัวแปร i จนกว่า i จะมีค่าเท่ากับ 5 โดยเงื่อนไขของ while จะถูกตรวจสอบหลังจากทำงานซ้ำอย่างน้อย 1 ครั้ง แต่ถ้า i มีค่าเท่ากับ 5 แล้วเงื่อนไขจะเป็นเท็จและจะไม่ทำงานต่อไป

JavaScript Function

โดยทั่วไปแล้ว Function ใน JavaScript เป็นบล็อกโค้ดที่รับค่าเข้ามาผ่านพารามิเตอร์ (parameter) และจะส่งค่ากลับออกมาหลังจากประมวลผลเสร็จสิ้น ซึ่งการเขียน Function ใน JavaScript นั้นเป็นเรื่องสำคัญอย่างยิ่งในการพัฒนาโปรแกรม เนื่องจากทำให้โค้ดมีความเป็นระเบียบและสามารถใช้ซ้ำได้ง่าย

ตัวอย่าง Function ใน JavaScript สำหรับการคำนวณราคาสินค้าทั้งหมดในตะกร้าสินค้าของร้านค้าออนไลน์:

function calculateTotalPrice(cart) {
  let totalPrice = 0;
  for (let i = 0; i < cart.length; i++) {
    totalPrice += cart[i].price * cart[i].quantity;
  }
  return totalPrice;
}

ใน Function นี้จะมีพารามิเตอร์ชื่อ cart ที่เป็น Array ของ Object สินค้าที่อยู่ในตะกร้าสินค้า โดยใน Function นี้จะใช้ Loop For เพื่อนำค่าราคาแต่ละรายการสินค้ามาคูณกับจำนวนที่เลือกแล้วบวกเข้าไปในตัวแปร totalPrice แล้วส่งค่า totalPrice กลับออกมาเพื่อนำไปแสดงผลราคาสินค้าทั้งหมดในตะกร้าสินค้า.