Tự Học Front-End Ngày 2: Dạo quanh JS cơ bản

JavaScript là ngôn ngữ lập trình phổ biến trên web. Ngôn ngữ này cho phép tạo ra các trang web động và tương tác với người dùng.

1. Biến, kiểu dữ liệu, toán tử, câu lệnh điều kiện, vòng lặp, hàm, mảng, đối tượng

Biến (Variables)

Biến được sử dụng để lưu trữ dữ liệu (số, xâu, logic,…). Trong JavaScript, khai báo biến với var, let hoặc const. Ví dụ:

var x = 5;
let y = "Xin chào";
const pi = 3.14;
console.log(x, y, pi); // 5 "Xin chào" 3.14

• Lưu ý: Nên dùng const khi giá trị không đổi, dùng let khi giá trị có thể thay đổi, và hạn chế dùng var.

Kiểu dữ liệu (Data types)

JavaScript có các kiểu dữ liệu cơ bản: số (number), xâu (string), boolean (true/false), null, undefined, symbol… Ví dụ kiểm tra kiểu:

console.log(typeof 123);        // "number"
console.log(typeof "Hello");    // "string"
console.log(typeof true);       // "boolean"

• Lưu ý: null và undefined đều là kiểu riêng biệt. (typeof null trả về "object" là điểm đặc biệt).

Toán tử (Operators)

JavaScript hỗ trợ các toán tử số học (+, -, *, /, %), gán (=), so sánh (==, ===, !=, !==, >, <, >=, <=), và logic (&&, ||, !). Ví dụ:

let a = 10;
let b = 3;
console.log(a + b);     // 13
console.log(a % b);     // 1 (phép chia lấy dư)
console.log(a == "10");   // true  (== không so sánh kiểu)
console.log(a === "10");  // false (=== so sánh cả kiểu)

• Lưu ý: Nên dùng === và !== để so sánh, vì chúng so sánh cả giá trị và kiểu dữ liệu.

Câu lệnh điều kiện (Conditional statements)

Dùng if...else, switch…case…default để thực hiện đoạn mã dựa trên điều kiện. Cú pháp:

let age = 20;
if (age >= 18) {
  console.log("Bạn đủ tuổi lái xe.");
} else {
  console.log("Bạn chưa đủ tuổi lái xe.");
}

• Mẹo: Có thể thêm else if nếu có nhiều trường hợp cần kiểm tra.

Vòng lặp (Loops)

Sử dụng vòng lặp để lặp lại mã nhiều lần. Ví dụ vòng for và while:

for (let i = 0; i < 3; i++) {
  console.log("Chạy lần thứ " + i);
}

let i = 0;
while (i < 3) {
  console.log("Chạy lần thứ " + i);
  i++;
}

• Lưu ý: Đảm bảo thay đổi biến đếm (ở ví dụ trên là i++) để vòng lặp kết thúc, tránh lặp vô hạn.
• Mẹo: Dùng for khi biết trước số lần lặp; dùng while khi lặp dựa trên điều kiện.

Hàm (Functions)

Hàm là khối mã đặt tên có thể tái sử dụng. Khai báo hàm với function hoặc arrow function (=>). Ví dụ:

function sum(a, b) {
  return a + b;
}
console.log(sum(2, 3)); // 5

const multiply = (a, b) => a * b;
console.log(multiply(4, 5)); // 20

• Lưu ý: Tên hàm nên diễn tả rõ chức năng (ví dụ sum cho hàm tính tổng).
• Mẹo: Arrow function thường viết gọn, phù hợp khi hàm đơn giản.

Mảng (Arrays)

Mảng là tập hợp các giá trị theo thứ tự. Khai báo bằng []. Ví dụ:

const fruits = ["Táo", "Cam", "Chuối"];
console.log(fruits[0]); // "Táo"
fruits.push("Xoài");
console.log(fruits.length); // 4

• Lưu ý: Phần tử trong mảng được đánh chỉ số từ 0.
• Mẹo: Sử dụng array.push(item) để thêm phần tử vào cuối mảng.

Đối tượng (Objects)

Đối tượng chứa các cặp khóa-giá trị. Khai báo bằng {}. Ví dụ:

const person = { name: "An", age: 30 };
console.log(person.name); // "An"
person.age = 31;
console.log(person.age); // 31

• Lưu ý: Truy cập thuộc tính bằng dấu chấm (obj.key) hoặc ngoặc vuông (obj["key"]).
• Mẹo: Dùng đối tượng để nhóm dữ liệu liên quan lại với nhau.

2. Cú pháp, quy ước và phong cách viết code JavaScript

Nên tuân theo quy ước để mã dễ đọc và dễ bảo trì. Ví dụ cú pháp và style thường gặp:

const userName = "Lan"; // biến tên người dùng theo camelCase
console.log("Xin chào, " + userName + "!");

• Đặt tên biến, hàm theo camelCase (ví dụ userName).
• Sử dụng const hoặc let thay vì var để tránh lỗi.
• Thêm ; ở cuối câu lệnh (không bắt buộc nhưng nên nhất quán).
• Thụt lề code (indent) 2 hoặc 4 khoảng trắng để dễ đọc.
• Viết chú thích với // hoặc /* ... */ để giải thích ý nghĩa đoạn mã.
• Mẹo: Dùng === và !== thay cho == và != để tránh lỗi do chuyển đổi kiểu.

3. Cách chạy code JavaScript trên trình duyệt hoặc máy tính

Chạy JavaScript trên trình duyệt

JavaScript là ngôn ngữ chính để làm việc trên web, vì vậy bạn có thể dễ dàng chạy mã JavaScript trực tiếp trên các trình duyệt phổ biến như Chrome, Firefox, Edge, Safari,…

Cách 1: Chạy trực tiếp trong thẻ <script> trong file HTML

Bạn có thể nhúng mã JavaScript trực tiếp vào trong file HTML thông qua thẻ <script>.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
  <title>Demo JavaScript cơ bản</title>
</head>
<body>
  <h1>Xin chào</h1>

  <script>
    console.log("Chạy JavaScript trong thẻ script");
    alert("Chào bạn!");
  </script>
</body>
</html>

Cách thực hiện:

1. Tạo file index.html.
2. Dán đoạn code trên vào file.
3. Mở file bằng trình duyệt (nhấn đúp chuột hoặc chuột phải chọn Open with…).

Cách 2: Chạy từ file .js riêng biệt và nhúng vào HTML

Bạn cũng có thể viết JavaScript trong file .js riêng biệt và nhúng vào HTML.

Ví dụ:

1. Tạo file index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Demo file JS riêng</title>
</head>
<body>
  <h1 id="demo">Hello!</h1>
  <script src="main.js"></script>
</body>
</html>

2. Tạo file main.js cùng thư mục:

document.getElementById("demo").innerText = "Đã thay đổi bằng JavaScript!";
console.log("File JS riêng đã chạy thành công.");

Cách thực hiện:

• Mở index.html trên trình duyệt.
• JavaScript trong main.js sẽ tự động chạy và thay đổi nội dung trang.

Lưu ý:

• Nên đặt thẻ <script> ở cuối thẻ <body> hoặc thêm thuộc tính defer để đảm bảo toàn bộ HTML đã tải xong trước khi JavaScript thực thi.

Chạy JavaScript trên máy tính bằng Node.js

Bước 1: Cài đặt Node.js

• Tải Node.js tại https://nodejs.org/
• Cài đặt xong, mở terminal (CMD, PowerShell hoặc Terminal trên Mac/Linux).
• Kiểm tra Node.js đã cài đặt thành công chưa:

node -v

Nếu hiện phiên bản, nghĩa là đã cài thành công.

Bước 2: Chạy file JavaScript

1. Tạo file script.js:

console.log("Xin chào từ Node.js!");

2. Mở terminal, di chuyển đến thư mục chứa script.js.
3. Gõ lệnh:

node script.js

4. Kết quả:

Xin chào từ Node.js!

4. Cách sử dụng console để debug và kiểm tra code

Console là công cụ in ra thông tin từ JavaScript để kiểm tra và gỡ lỗi. Sử dụng console.log() để in giá trị:

const x = 10;
console.log("Giá trị của x:", x); // In ra: Giá trị của x: 10

• Nhấn F12 (hoặc Ctrl+Shift+I) trong trình duyệt để mở DevTools và vào tab Console.
• Dùng console.log, console.error, console.warn để in ra thông báo, lỗi hoặc cảnh báo.
• Mẹo: Thường xuyên sử dụng console.log để kiểm tra giá trị biến, các bước thực thi. Xóa bớt các dòng console.log sau khi debug xong để không ảnh hưởng đến hiệu suất.

5. Kết hợp JavaScript với HTML và CSS để tạo giao diện web

JavaScript có thể thay đổi nội dung HTML và style CSS động. Ví dụ: thay đổi text và màu của một phần tử khi bấm nút.

<!DOCTYPE html>
<html>
<head>
  <style>
    .red-text { color: red; }
  </style>
</head>
<body>
  <h1 id="title">Xin chào!</h1>
  <button onclick="changeText()">Nhấn vào đây</button>

  <script>
    function changeText() {
      const title = document.getElementById("title");
      title.innerText = "Chào bạn!";
      title.classList.add("red-text");
    }
  </script>
</body>
</html>

• Giải thích: Khi nhấn nút, hàm changeText() được gọi. Nó thay đổi nội dung của thẻ <h1> thành “Chào bạn!” và thêm lớp CSS để đổi màu chữ thành đỏ.
• Lưu ý: Dùng document.getElementById() (hoặc querySelector()) để truy cập phần tử HTML. Bạn có thể thay đổi innerText, innerHTML hoặc style/CSS của phần tử.
• Mẹo: Đặt mã JS sau phần HTML (hoặc dùng defer) để chắc chắn DOM đã được tải trước khi script chạy.