JavaScript Cơ Bản và Nâng Cao – Từ A tới Z

1. Giới thiệu về JavaScript

JavaScript là ngôn ngữ lập trình được sử dụng rộng rãi nhất để phát triển web. Nó chạy trực tiếp trên trình duyệt (client-side) và cũng có thể chạy ở phía máy chủ (server-side) nhờ Node.js.

Điểm mạnh của JavaScript:

• Đa năng: Dùng cho web, mobile, server, IoT, AI.
• Dễ học: Cú pháp gần với C/Java.
• Cộng đồng lớn: Nhiều thư viện, framework mạnh mẽ (React, Vue, Angular).

2. Phần Cơ Bản

2.1. Cách nhúng JavaScript vào HTML

Có 3 cách:

<!– Inline –>

<button onclick=”alert(‘Xin chào!’)”>Bấm</button>

<!– Internal –>

<script>

    console.log(“Hello World”);

</script>

<!– External –>

<script src=”script.js”></script>

2.2. Biến và Kiểu dữ liệu

• Khai báo biến:

var x = 10;      // biến toàn cục, ít dùng

let y = 20;      // biến trong block

const PI = 3.14; // hằng số

• Kiểu dữ liệu chính:
  
  • Number: 42
  • String: “Hello”
  • Boolean: true/false
  • Object: {name: “Trung”, age: 25}
  • Array: [1, 2, 3]
  • Null, Undefined, Symbol, BigInt

2.3. Toán tử

let a = 5 + 3;   // cộng

let b = 10 – 4;  // trừ

let c = 2 * 3;   // nhân

let d = 10 / 2;  // chia

let e = 10 % 3;  // chia lấy dư

let f = 2 ** 3;  // lũy thừa

2.4. Cấu trúc điều khiển

// If – else

if (a > b) {

    console.log(“A lớn hơn B”);

} else {

    console.log(“A nhỏ hơn hoặc bằng B”);

}

// Switch

switch (day) {

    case 0: console.log(“Chủ nhật”); break;

    default: console.log(“Ngày khác”);

}

// Vòng lặp

for (let i = 0; i < 5; i++) {

    console.log(i);

}

while (a > 0) {

    console.log(a);

    a–;

}

2.5. Hàm

function sayHello(name) {

    return “Xin chào ” + name;

}

let greet = (name) => `Xin chào ${name}`;

2.6. DOM Manipulation (Tương tác HTML)

document.getElementById(“demo”).innerHTML = “Nội dung mới”;

document.querySelector(“.className”).style.color = “red”;

3. Phần Nâng Cao

3.1. Function nâng cao

• Callback function:

function processData(data, callback) {

    console.log(“Xử lý:”, data);

    callback();

}

processData(“Thông tin”, () => console.log(“Hoàn tất!”));

• IIFE (Immediately Invoked Function Expression):

(function() {

    console.log(“Chạy ngay khi khai báo”);

})();

3.2. Object & Prototype

function Person(name) {

    this.name = name;

}

Person.prototype.sayHi = function() {

    console.log(“Xin chào, tôi là ” + this.name);

};

let trung = new Person(“Trung”);

trung.sayHi();

3.3. ES6+ Features

• Destructuring:

let {name, age} = {name: “Trung”, age: 25};

• Spread & Rest:

let arr = [1, 2, 3];

let arr2 = […arr, 4, 5];

function sum(…nums) {

    return nums.reduce((a, b) => a + b);

}

• Template literals:

let msg = `Xin chào ${name}, bạn ${age} tuổi.`;

3.4. Async & Await

async function getData() {

    let res = await fetch(‘https://api.example.com/data’);

    let data = await res.json();

    console.log(data);

}

getData();

3.5. Module hóa

// file math.js

export function add(a, b) {

    return a + b;

}

// file main.js

import { add } from ‘./math.js’;

console.log(add(2, 3));

4. Kết luận

JavaScript là nền tảng bắt buộc nếu bạn muốn trở thành lập trình viên web.

• Người mới: Nắm vững biến, hàm, vòng lặp, DOM.
• Nâng cao: Thành thạo ES6+, async/await, module, và các mô hình lập trình như OOP hoặc Functional.

Muốn giỏi JS, bạn nên vừa học vừa thực hành qua dự án nhỏ như To-Do App, Game đơn giản, hoặc Web tương tác.