Bài 4.5: Bài tập thực hành JavaScript cơ bản

Chào mừng bạn quay trở lại với chuỗi bài viết về Lập trình Web Front-end! Chúng ta đã cùng nhau đi qua những kiến thức lý thuyết nền tảng về JavaScript. Bây giờ là lúc để xắn tay áo lên và thực hành! Lý thuyết chỉ thật sự vững chắc khi bạn áp dụng nó vào thực tế. Bài viết này sẽ cung cấp cho bạn một loạt các bài tập cơ bản để củng cố kiến thức.

Hãy cùng bắt đầu!

1. Làm việc với Biến và Kiểu dữ liệu

Trong JavaScript, biến là nơi chúng ta lưu trữ dữ liệu. Có nhiều kiểu dữ liệu khác nhau như số, chuỗi, boolean, v.v. Thực hành khai báo biến và gán giá trị là bước đầu tiên quan trọng.

Bài tập: Khai báo các biến với các kiểu dữ liệu khác nhau và in giá trị của chúng ra console.

// Khai báo biến kiểu chuỗi (string)
let tenToi = "Nguyễn Văn A";

// Khai báo biến kiểu số (number)
let tuoi = 25;

// Khai báo biến kiểu boolean (boolean)
let dangHoc = true;

// Khai báo biến mà chưa gán giá trị (sẽ có giá trị undefined)
let diaChi;

// Khai báo biến hằng số (constant) - giá trị không thay đổi
const SO_PI = 3.14;

// In giá trị ra console
console.log("Tên tôi:", tenToi);
console.log("Tuổi:", tuoi);
console.log("Đang học:", dangHoc);
console.log("Địa chỉ (chưa gán):", diaChi);
console.log("Số PI:", SO_PI);

Giải thích:

  • Chúng ta sử dụng từ khóa let để khai báo các biến mà giá trị có thể thay đổi.
  • const được dùng cho các biến mà giá trị không thay đổi sau khi được gán lần đầu.
  • Mỗi biến được gán một giá trị thuộc một kiểu dữ liệu nhất định ("Nguyễn Văn A" là chuỗi, 25 là số, true là boolean).
  • Biến diaChi không được gán giá trị ban đầu, nên mặc định nó có giá trị là undefined.
  • console.log() là một công cụ hữu ích để hiển thị thông tin ra bảng điều khiển (Console) của trình duyệt hoặc môi trường Node.js, giúp chúng ta kiểm tra giá trị của biến.

2. Sử dụng các Phép Toán

JavaScript hỗ trợ đầy đủ các phép toán số học, so sánh và logic. Hiểu và sử dụng chúng là cần thiết để xử lý dữ liệu.

Bài tập: Thực hiện các phép toán cơ bản và in kết quả.

let so1 = 10;
let so2 = 5;

// Phép cộng
let tong = so1 + so2;
console.log("Tổng:", tong); // Kết quả: 15

// Phép trừ
let hieu = so1 - so2;
console.log("Hiệu:", hieu); // Kết quả: 5

// Phép nhân
let tich = so1 * so2;
console.log("Tích:", tich); // Kết quả: 50

// Phép chia
let thuong = so1 / so2;
console.log("Thương:", thuong); // Kết quả: 2

// Phép chia lấy dư (modulus)
let phanDu = so1 % so2;
console.log("Phần dư:", phanDu); // Kết quả: 0

// Nối chuỗi (string concatenation)
let loiChao = "Xin chào";
let ten = "Độc giả";
let loiChaoHoanChinh = loiChao + " " + ten + "!";
console.log(loiChaoHoanChinh); // Kết quả: Xin chào Độc giả!

Giải thích:

  • Chúng ta sử dụng các toán tử số học thông thường (+, -, *, /, %).
  • Toán tử + còn được dùng để nối chuỗi. Khi bạn cộng một chuỗi với một giá trị khác, JavaScript thường sẽ chuyển giá trị đó thành chuỗi và nối vào.
  • console.log() lại được sử dụng để hiển thị kết quả của từng phép toán.

3. Tương tác Đơn giản: prompt và alert

JavaScript có các hàm tích hợp sẵn để tương tác cơ bản với người dùng: prompt để lấy input dạng văn bản và alert để hiển thị thông báo. (Lưu ý: Các hàm này thường dùng trong môi trường trình duyệt và có thể gây khó chịu cho người dùng, nhưng rất hữu ích cho việc học ban đầu).

Bài tập: Hỏi tên người dùng và chào họ bằng một thông báo.

// Hiển thị hộp thoại yêu cầu người dùng nhập tên
let tenNguoiDung = prompt("Xin chào bạn! Tên bạn là gì?");

// Hiển thị thông báo chào mừng
alert("Rất vui được gặp bạn, " + tenNguoiDung + "!");

// Có thể kiểm tra giá trị nhập vào bằng console.log
console.log("Người dùng đã nhập tên:", tenNguoiDung);

Giải thích:

  • prompt() hiển thị một hộp thoại với thông điệp bạn đưa vào và một ô nhập liệu. Giá trị người dùng nhập sẽ được trả về dưới dạng chuỗi và gán vào biến tenNguoiDung.
  • alert() hiển thị một hộp thoại thông báo đơn giản với thông điệp bạn đưa vào. Người dùng chỉ có thể nhấn OK để đóng hộp thoại.
  • Chúng ta nối chuỗi cố định "Rất vui được gặp bạn, " với biến tenNguoiDung để tạo thông điệp chào mừng cá nhân hóa.

4. Ra Quyết định với if/else

Cấu trúc điều khiển if/else cho phép mã của bạn thực thi các khối lệnh khác nhau dựa trên việc một điều kiện là đúng (true) hay sai (false).

Bài tập: Kiểm tra xem một số là chẵn hay lẻ.

let soCanKiemTra = 7;

// Kiểm tra xem số đó chia hết cho 2 hay không
if (soCanKiemTra % 2 === 0) {
  // Nếu phần dư bằng 0, số đó là chẵn
  console.log(soCanKiemTra + " là số chẵn.");
} else {
  // Nếu phần dư khác 0, số đó là lẻ
  console.log(soCanKiemTra + " là số lẻ.");
}

// Một ví dụ khác với if-else if-else
let diem = 85;

if (diem >= 90) {
    console.log("Điểm A");
} else if (diem >= 80) {
    console.log("Điểm B"); // Điều kiện này đúng với diem = 85
} else if (diem >= 70) {
    console.log("Điểm C");
} else {
    console.log("Điểm D hoặc thấp hơn");
}

Giải thích:

  • Biểu thức soCanKiemTra % 2 === 0 kiểm tra xem phần dư của phép chia soCanKiemTra cho 2 có bằng chính xác (===) 0 hay không. Toán tử === so sánh cả giá trị và kiểu dữ liệu.
  • Nếu điều kiện trong if là true, khối mã bên trong if sẽ được thực thi.
  • Nếu điều kiện trong if là false, khối mã bên trong else (nếu có) sẽ được thực thi.
  • Cấu trúc if-else if-else cho phép kiểm tra nhiều điều kiện theo thứ tự. Mã sẽ thực thi khối đầu tiên mà điều kiện của nó đúng.

5. Lặp lại Công việc với Vòng lặp for

Vòng lặp for rất hữu ích khi bạn cần thực hiện một khối mã lặp đi lặp lại một số lần nhất định.

Bài tập: In ra các số từ 1 đến 5.

// Vòng lặp for
// Khởi tạo: let i = 1 (bắt đầu từ 1)
// Điều kiện tiếp tục: i <= 5 (tiếp tục khi i nhỏ hơn hoặc bằng 5)
// Bước nhảy: i++ (tăng i lên 1 sau mỗi lần lặp)
for (let i = 1; i <= 5; i++) {
  console.log("Lần lặp thứ: " + i);
}

// In các số chẵn từ 0 đến 10
for (let j = 0; j <= 10; j += 2) {
    console.log("Số chẵn: " + j);
}

Giải thích:

  • Vòng lặp for có ba phần chính trong ngoặc đơn, ngăn cách bởi dấu chấm phẩy ;:
    • Khởi tạo: Chạy một lần duy nhất khi bắt đầu vòng lặp (ví dụ: let i = 1;).
    • Điều kiện: Được kiểm tra trước mỗi lần lặp. Nếu là true, vòng lặp tiếp tục; nếu là false, vòng lặp dừng lại (ví dụ: i <= 5;).
    • Bước nhảy: Chạy sau mỗi lần thân vòng lặp được thực thi (ví dụ: i++ tăng i lên 1, j += 2 tăng j lên 2).
  • Khối mã bên trong {} là thân vòng lặp, sẽ được thực thi lặp đi lặp lại miễn là điều kiện còn đúng.

6. Xây dựng Hàm Đơn giản

Hàm (Function) là các khối mã có thể tái sử dụng, giúp tổ chức code gọn gàng và tránh lặp lại.

Bài tập: Viết một hàm chào mừng và một hàm tính tổng hai số.

// Khai báo một hàm đơn giản không có tham số và không trả về giá trị
function chaoMung() {
  console.log("Xin chào thế giới JavaScript!");
}

// Gọi (thực thi) hàm
chaoMung(); // Kết quả: Xin chào thế giới JavaScript!

// Khai báo một hàm có tham số và trả về giá trị
function tinhTong(a, b) {
  let ketQua = a + b;
  return ketQua; // Trả về kết quả
}

// Gọi hàm với các đối số và lưu kết quả vào biến
let tongCuaHaiSo = tinhTong(15, 20);
console.log("Tổng của 15 và 20 là:", tongCuaHaiSo); // Kết quả: 35

// Gọi hàm với các đối số khác
console.log("Tổng của 5 và 8 là:", tinhTong(5, 8)); // Kết quả: 13

Giải thích:

  • Chúng ta sử dụng từ khóa function để định nghĩa một hàm, theo sau là tên hàm và cặp ngoặc đơn (). Các tham số (nếu có) được liệt kê bên trong ngoặc đơn.
  • Khối mã bên trong {} là thân hàm, chứa các lệnh sẽ được thực thi khi hàm được gọi.
  • Để chạy hàm, chúng ta gọi nó bằng tên theo sau là cặp ngoặc đơn (ví dụ: chaoMung()).
  • Từ khóa return được sử dụng để trả về một giá trị từ hàm. Khi return được gặp, hàm sẽ dừng lại và trả về giá trị đó. Nếu không có return hoặc return không có giá trị, hàm sẽ trả về undefined mặc định.

7. Làm việc với Mảng Cơ bản

Mảng (Array) là một kiểu dữ liệu đặc biệt dùng để lưu trữ một tập hợp các giá trị theo thứ tự.

Bài tập: Tạo một mảng các loại trái cây và truy cập các phần tử của nó.

// Khai báo một mảng các chuỗi
let danhSachTraiCay = ["Táo", "Chuối", "Cam", "Xoài"];

// Truy cập phần tử đầu tiên (chỉ số 0)
console.log("Trái cây đầu tiên:", danhSachTraiCay[0]); // Kết quả: Táo

// Truy cập phần tử thứ ba (chỉ số 2)
console.log("Trái cây thứ ba:", danhSachTraiCay[2]); // Kết quả: Cam

// Lấy số lượng phần tử trong mảng
console.log("Số lượng trái cây:", danhSachTraiCay.length); // Kết quả: 4

// Truy cập phần tử cuối cùng
console.log("Trái cây cuối cùng:", danhSachTraiCay[danhSachTraiCay.length - 1]); // Kết quả: Xoài

// Thay đổi giá trị của một phần tử
danhSachTraiCay[1] = "Lê";
console.log("Danh sách sau khi thay đổi:", danhSachTraiCay); // Kết quả: ["Táo", "Lê", "Cam", "Xoài"]

Giải thích:

  • Mảng được tạo bằng cách sử dụng cặp ngoặc vuông [] và liệt kê các phần tử bên trong, cách nhau bằng dấu phẩy.
  • Các phần tử trong mảng được truy cập thông qua chỉ số (index), bắt đầu từ 0. danhSachTraiCay[0] là phần tử đầu tiên, danhSachTraiCay[1] là phần tử thứ hai, v.v.
  • Thuộc tính .length trả về số lượng phần tử hiện có trong mảng.
  • Bạn có thể thay đổi giá trị của một phần tử bằng cách gán giá trị mới vào chỉ số của nó (ví dụ: danhSachTraiCay[1] = "Lê";).

Comments

There are no comments at the moment.