Biến, Kiểu dữ liệu và Toán tử trong JavaScript

Mô tả

Học JavaScript từ cơ bản đến nâng cao với bài viết chi tiết về biến, kiểu dữ liệu và toán tử. Bạn sẽ hiểu rõ cách khai báo biến, sử dụng các kiểu dữ liệu thông dụng, thực hành với toán tử số học, logic và so sánh. Ngoài ra, bài viết cũng hướng dẫn cách nhúng mã JavaScript vào trang web. Thực hành ngay với các bài tập có code mẫu!

Mục tiêu

• Khai báo và sử dụng biến trong JavaScript
• Sử dụng được các kiểu dữ liệu thông dụng
• Hiểu và áp dụng các toán tử và biểu thức
• Sử dụng được các toán tử số học
• Sử dụng được các toán tử logic
• Sử dụng được các toán tử so sánh

1. Biến trong JavaScript

1.1. Khái niệm biến

Biến là một vùng nhớ trong bộ nhớ dùng để lưu trữ dữ liệu, có thể thay đổi trong quá trình thực thi chương trình.

1.2. Khai báo biến

JavaScript cung cấp ba cách khai báo biến:

• var: Khai báo biến có phạm vi toàn cục hoặc phạm vi hàm.
• let: Khai báo biến có phạm vi khối (block scope).
• const: Khai báo hằng số, không thể thay đổi sau khi gán giá trị ban đầu.

Ví dụ:

Copycopy code to clipboard
var x = 10; // Khai báo bằng var
let y = 20; // Khai báo bằng let
const z = 30; // Khai báo bằng const
console.log(x, y, z);

2. Kiểu dữ liệu trong JavaScript

JavaScript là một ngôn ngữ định kiểu động (dynamically typed), nghĩa là bạn không cần khai báo kiểu dữ liệu trước khi sử dụng.

2.1. Các kiểu dữ liệu chính

JavaScript có 7 kiểu dữ liệu chính:

a. Kiểu nguyên thủy (Primitive)

• Boolean: Chỉ có hai giá trị true hoặc false.
• Null: Đại diện cho "không có giá trị".
• Undefined: Biến đã khai báo nhưng chưa gán giá trị.
• Number: Dùng cho cả số nguyên và số thực.
• String: Lưu trữ chuỗi ký tự.
• Symbol: Giá trị duy nhất (ES6).

Ví dụ:

Copycopy code to clipboard
let isTrue = true;
let emptyValue = null;
let undefinedVar;
let number = 42;
let text = 'Hello, JavaScript!';
let uniqueId = Symbol('id');

console.log(isTrue, emptyValue, undefinedVar, number, text, uniqueId);

b. Kiểu đối tượng (Object)

Đối tượng là một tập hợp các cặp key-value.

Ví dụ:

Copycopy code to clipboard
let person = {
  name: 'Alice',
  age: 25,
  isStudent: false,
};

console.log(person.name); // Alice
console.log(person.age); // 25

3. Toán tử trong JavaScript

3.1. Toán tử số học

Dùng để thực hiện các phép toán cơ bản:

• + (Cộng)
• - (Trừ)
• * (Nhân)
• / (Chia)
• % (Chia lấy dư)
• ** (Lũy thừa)

Ví dụ:

Copycopy code to clipboard
let a = 10;
let b = 3;

console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.333...
console.log(a % b); // 1
console.log(a ** b); // 1000

3.2. Toán tử so sánh

Dùng để so sánh giá trị của hai toán hạng:

• == (Bằng)
• != (Không bằng)
• === (Bằng cả giá trị và kiểu)
• !== (Không bằng cả giá trị và kiểu)
• > (Lớn hơn)
• < (Nhỏ hơn)
• >= (Lớn hơn hoặc bằng)
• <= (Nhỏ hơn hoặc bằng)

Ví dụ:

Copycopy code to clipboard
console.log(10 == '10'); // true (so sánh giá trị)
console.log(10 === '10'); // false (so sánh cả kiểu)
console.log(5 > 3); // true

3.3. Toán tử logic

Dùng để thực hiện các phép toán điều kiện:

• && (AND): Trả về true nếu cả hai vế đều true.
• || (OR): Trả về true nếu ít nhất một vế là true.
• ! (NOT): Đảo ngược giá trị Boolean.

Ví dụ:

Copycopy code to clipboard
let isAdult = true;
let hasLicense = false;

console.log(isAdult && hasLicense); // false
console.log(isAdult || hasLicense); // true
console.log(!isAdult); // false

4. Thực hành

4.1. Bài 1: Khai báo và hiển thị giá trị của biến

Copycopy code to clipboard
let i = 10;
let f = 20.5;
let b = true;
let s = 'Hà Nội';

document.write('i = ' + i + '<br/>');
document.write('f = ' + f + '<br/>');
document.write('b = ' + b + '<br/>');
document.write('s = ' + s + '<br/>');

4.2. Bài 2: Tính diện tích hình chữ nhật

Copycopy code to clipboard
let width = prompt('Enter the width');
let height = prompt('Enter the height');

let area = parseInt(width) * parseInt(height);
document.write('The area is: ' + area);

4.3. Bài 3: Kiểm tra số chẵn lẻ bằng toán tử logic

Copycopy code to clipboard
let number = prompt('Enter a number:');

if (number % 2 === 0 && number != 0) {
  alert(number + ' is an even number.');
} else if (number % 2 !== 0) {
  alert(number + ' is an odd number.');
} else {
  alert('Invalid input!');
}

4.4. Bài 4: Kiểm tra tuổi hợp lệ để lái xe

Copycopy code to clipboard
let age = prompt('Enter your age:');

if (age >= 18) {
  alert('You are eligible to drive.');
} else {
  alert('You are NOT eligible to drive.');
}

5. Cách nhúng JavaScript vào trang web

5.1. Viết trực tiếp trong thẻ <script>

Copycopy code to clipboard
<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Example</title>
  </head>
  <body>
    <script>
      document.write('Hello, JavaScript!');
    </script>
  </body>
</html>

5.2. Viết trong thuộc tính onclick của thẻ HTML

Copycopy code to clipboard
<button onclick="alert('Hello!')">Click me</button>

5.3. Nhúng file .js bên ngoài

Copycopy code to clipboard
<script src="script.js"></script>

Kết luận

Qua bài học này, bạn đã nắm được:

• Cách khai báo và sử dụng biến trong JavaScript.
• Các kiểu dữ liệu trong JavaScript.
• Các toán tử số học, logic và so sánh.
• Cách sử dụng biến và toán tử trong thực tế.
• Cách nhúng JavaScript vào trang web.

Hãy luyện tập bằng cách viết mã và thử nghiệm với các biến, kiểu dữ liệu và toán tử khác nhau!