[Part 1] JS: Basic programming

กระบวนการพื้นฐานของโปรแกรม (Input-Process-Output)

การเขียนโปรแกรมพื้นฐานประกอบด้วย 3 ขั้นตอนหลัก

1. Input: รับข้อมูลจากผู้ใช้
2. Process: ประมวลผลข้อมูล
3. Output: แสดงผลลัพธ์

Syntax พื้นฐาน

1. คอมเมนต์ (Comment)

• ใช้ // สำหรับคอมเมนต์บรรทัดเดียว
• /* */ สำหรับหลายบรรทัด

// This is a single-line comment
console.log("test comment 1")

/*
This is a
multi-line comment
*/
console.log("test comment 2")

2. การแสดงผล (Output)

ใช้ console.log() เพื่อแสดงผลในคอนโซล

console.log("Hello World");

3. การรับข้อมูล (Input)

ใช้ prompt() เพื่อรับข้อมูลจากผู้ใช้

let age = prompt("Enter your age:");
console.log("You are " + age + " years old.");

ตัวแปร (Variables)

ตัวแปรใช้เก็บข้อมูลเพื่อใช้งานภายหลัง โดยสามารถประกาศได้ด้วย let, const, หรือ var

let firstname = "Pathompat";
console.log("My firstname is", firstname);

const x = "Orange", y = "Banana", z = "Cherry";
console.log("My fruits are", x, y, z);

let lastname = prompt("Enter your lastname:");
console.log("My lastname is", lastname);

คำสงวน (Reserved Words)

JavaScript มีคำสงวนที่ไม่สามารถใช้เป็นชื่อตัวแปรได้ เช่น:

break, case, catch, class, const, continue, debugger, default, delete, do, else, export, extends, finally, for, function, if, import, in, instanceof, new, return, super, switch, this, throw, try, typeof, var, void, while, with, yield

ชนิดข้อมูล (Data Types)

JavaScript มีชนิดข้อมูลพื้นฐาน เช่น:

• String: ข้อความ เช่น "Hello"
• Number: ตัวเลข เช่น 42, 3.14
• Boolean: ค่าความจริง เช่น true, false
• Undefined: ค่าที่ไม่ได้กำหนด
• Null: ค่าว่าง
• Object: วัตถุ เช่น {name: "Pathompat"}
• Array: อาร์เรย์ เช่น [1, 2, 3]

การตรวจสอบชนิดข้อมูล:

let a = "Pathompat";
console.log(typeof a); // "string"

let b = 5;
console.log(typeof b); // "number"

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

ตัวดำเนินการทางคณิตศาสตร์ (Arithmetic Operators)

ใช้สำหรับการคำนวณ:

• + บวก
• - ลบ
• * คูณ
• / หาร
• % หารเอาเศษ
• ** ยกกำลัง

let x = 6;
let y = 5;
console.log("Sum x + y =", x + y);
console.log("Result x * y - x =", x * y - x);

ตัวดำเนินการเปรียบเทียบ (Comparison Operators)

ใช้เปรียบเทียบค่าและคืนค่าเป็น Boolean:

• == เท่ากับ (เปรียบเทียบค่า)
• === เท่ากับ (เปรียบเทียบค่าและชนิดข้อมูล)
• != ไม่เท่ากับ
• !== ไม่เท่ากับ (เปรียบเทียบค่าและชนิดข้อมูล)
• > มากกว่า
• < น้อยกว่า
• >= มากกว่าหรือเท่ากับ
• <= น้อยกว่าหรือเท่ากับ

let x = 10;
let y = 5;
console.log("x equals y:", x === y);
console.log("x greater than or equal to 2*y:", x >= 2 * y);

ตัวดำเนินการทางตรรกะ (Logical Operators)

ใช้สำหรับการดำเนินการทางตรรกะ

• && และ (AND)
• || หรือ (OR)
• ! ไม่ (NOT)

let x = 5;
let y = 2;
console.log("x equals y and y > 2:", x === y && y > 2);
console.log("x + y > 10 or y ** 2 < 5:", x + y > 10 || y ** 2 < 5);

แบบฝึกหัด (Exercise)

1. สร้างโปรแกรมรับค่า a และ b จากผู้ใช้ แล้วแสดงผลรวม
2. สร้างโปรแกรมรับค่า ชื่อ, นามสกุล, อายุ และแสดงผล
3. จากข้อ 2 ให้เปลี่ยนการรับค่าอายุเป็นปีเกิด และคำนวณอายุโดยใช้ปีปัจจุบัน (2025)

Reference

JavaScript: Adding interactivity - Learn web development | MDN

JavaScript is a programming language that adds interactivity to websites. You can use it to control just about anything — form data validation, button functionality, game logic, dynamic styling, animation updates, and much more. This article gets you started with JavaScript and walks you through adding some fun features to your first website.

MDN Web Docs