JavaScript คืออะไร? เริ่มต้นเขียนโปรแกรม

JavaScript

EP1 พื้นฐาน JavaScript สำหรับผู้เริ่มต้น ตั้งแต่รู้จักภาษา เตรียมเครื่องมือ ทดลองเขียนโค้ด และสร้างโปรแกรมแรก

EP1: เริ่มต้นเดินทางสู่โลก JavaScript

1. JavaScript คืออะไร

เว็บไซต์หนึ่งแห่งประกอบด้วยอะไรบ้าง

2. ต้องติดตั้งโปรแกรมอะไรบ้าง

เครื่องมือที่แนะนำ

• Google Chrome, Microsoft Edge หรือ Firefox สำหรับเปิดเว็บไซต์และทดลองโค้ด
• Visual Studio Code สำหรับสร้างและแก้ไขไฟล์โปรแกรม
• Node.js สำหรับรัน JavaScript นอกเบราว์เซอร์ในบทเรียนที่เกี่ยวข้อง
• โฟลเดอร์สำหรับเก็บไฟล์งาน เพื่อให้จัดระเบียบตัวอย่างแต่ละตอนได้ง่าย

3. ทดลอง JavaScript ในเบราว์เซอร์

console.log('Hello, JavaScript!');
console.log(2 + 3);

ผลลัพธ์ที่คาดว่าจะเห็น

Hello, JavaScript!
5

4. เข้าใจคำสั่งและข้อมูลพื้นฐาน

console.log('เริ่มเรียน JavaScript');
console.log(10);
console.log(10 + 5);
console.log(10 * 2);

ตัวแปรใช้เก็บข้อมูล

const courseName = 'JavaScript';
let lessonNumber = 1;

console.log(courseName);
console.log(lessonNumber);

lessonNumber = 2;
console.log(lessonNumber);

5. ลำดับการทำงานของโปรแกรม

ตัวอย่างการคำนวณยอดซื้อ

const price = 120;
const quantity = 3;
const total = price * quantity;

console.log('ราคาต่อชิ้น:', price);
console.log('จำนวน:', quantity);
console.log('ยอดรวม:', total);

6. แบบฝึกหัดตรวจสอบความเข้าใจ

7. สร้างโปรแกรมแรกที่เปิดใช้งานได้จริง

const readline = require('node:readline');

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

function calculateTotal(price, quantity) {
  if (!Number.isFinite(price) || price < 0) {
    throw new Error('ราคาต้องเป็นตัวเลขตั้งแต่ศูนย์ขึ้นไป');
  }

  if (!Number.isInteger(quantity) || quantity < 0) {
    throw new Error('จำนวนสินค้าต้องเป็นจำนวนเต็มตั้งแต่ศูนย์ขึ้นไป');
  }

  return price * quantity;
}

function ask(question) {
  return new Promise((resolve) => {
    rl.question(question, resolve);
  });
}

async function main() {
  console.log('================================');
  console.log('   โปรแกรม JavaScript โปรแกรมแรก');
  console.log('================================');

  const name = (await ask('คุณชื่ออะไร: ')).trim() || 'ผู้เรียน';
  const priceInput = await ask('ราคาสินค้าต่อชิ้น (บาท): ');
  const quantityInput = await ask('จำนวนสินค้า (ชิ้น): ');

  const price = Number(priceInput);
  const quantity = Number(quantityInput);

  try {
    const total = calculateTotal(price, quantity);

    console.log('\n---------- สรุปผล ----------');
    console.log(`สวัสดี ${name}`);
    console.log(`ราคาต่อชิ้น: ${price.toFixed(2)} บาท`);
    console.log(`จำนวนสินค้า: ${quantity} ชิ้น`);
    console.log(`ยอดรวม: ${total.toFixed(2)} บาท`);
    console.log('ทำงานสำเร็จ!');
  } catch (error) {
    console.log(`เกิดข้อผิดพลาด: ${error.message}`);
  } finally {
    rl.close();
  }
}

main().catch((error) => {
  console.error('โปรแกรมไม่สามารถทำงานได้:', error.message);
  rl.close();
  process.exitCode = 1;
});

สรุปบทเรียน EP1

• รู้จักบทบาทของ HTML, CSS และ JavaScript
• เปิด Console เพื่อทดลองคำสั่ง
• เข้าใจข้อความ ตัวเลข ตัวแปร let และ const
• แยกขั้นตอน Input, Process และ Output
• สร้างไฟล์ app.js และรันด้วย Node.js

ตอนต่อไป: ชนิดข้อมูลและตัวแปรอย่างเข้าใจจริง