Tự học JavaScript - Module 1: Tổng quan, Lịch sử và Cú pháp cơ bản

Open Table of contents

1. JavaScript có thể làm được gì?
2. Cách đưa JavaScript vào HTML
- Chèn trực tiếp (Internal JS):
- Chèn từ tệp bên ngoài (External JS):
3. Các cách hiển thị dữ liệu (Output)
- Ví dụ minh họa:
4. Cú pháp cơ bản (Statements & Syntax)
- Từ khóa (Keywords):
Lời kết Module 1

1. JavaScript có thể làm được gì?

JavaScript không chỉ là một ngôn ngữ “làm cảnh”, nó cực kỳ mạnh mẽ:

Thay đổi nội dung HTML: Dùng phương thức getElementById().
Thay đổi giá trị thuộc tính HTML: Ví dụ thay đổi nguồn ảnh (src).
Thay đổi định dạng (CSS): Thay đổi màu sắc, font chữ, ẩn hiện yếu tố.
Tính toán và xác thực dữ liệu: Xử lý biểu mẫu trước khi gửi lên server.

2. Cách đưa JavaScript vào HTML

Bạn có thể chèn mã JS vào HTML bằng thẻ <script>.

Chèn trực tiếp (Internal JS):

Thường đặt trong cặp thẻ <script></script>. Bạn có thể đặt ở <head> hoặc <body>, nhưng tốt nhất là đặt ở cuối thẻ <body> để trang web tải nhanh hơn.

<script>
  document.getElementById("demo").innerHTML = "Chào mừng bạn đến với TuanNDA.dev";
</script>

Chèn từ tệp bên ngoài (External JS):

Giúp tách biệt mã nguồn và dễ quản lý hơn. Tệp JS phải có phần mở rộng là .js.

<script src="myScript.js"></script>

Lưu ý: Tệp JS bên ngoài không được chứa thẻ <script> bên trong nó.

3. Các cách hiển thị dữ liệu (Output)

JavaScript có 4 cách chính để “xuất” dữ liệu ra bên ngoài:

innerHTML: Ghi vào một phần tử HTML (phổ biến nhất).
document.write(): Ghi trực tiếp vào luồng xuất HTML (thường chỉ dùng để test).
window.alert(): Hiển thị hộp thoại cảnh báo.
console.log(): Ghi vào console của trình duyệt (dùng để gỡ lỗi - debugging).

Ví dụ minh họa:

// Thay đổi nội dung HTML
document.getElementById("demo").innerHTML = "Hello JS";

// Ghi vào Console
console.log("Đây là tin nhắn ẩn trong Console");

// Hiển thị thông báo
alert("Chào bạn!");

4. Cú pháp cơ bản (Statements & Syntax)

Một chương trình JavaScript là một danh sách các “câu lệnh” (statements) để máy tính thực hiện.

Dấu chấm phẩy ;: Dùng để kết thúc một câu lệnh. Dù JS có thể tự hiểu nếu bạn quên, nhưng việc thêm ; là quy chuẩn để tránh lỗi tiềm ẩn.
Khoảng trắng: JS bỏ qua các khoảng trắng thừa, bạn nên dùng chúng để code dễ đọc hơn (ví dụ: x = y + z thay vì x=y+z).
Khối mã (Code Blocks): Các câu lệnh được nhóm lại trong dấu ngoặc nhọn {...}, thường dùng trong hàm (functions).

Từ khóa (Keywords):

JS sử dụng các từ khóa dành riêng để xác định hành động:

var, let, const: Khai báo biến.
if, switch: Câu lệnh điều kiện.
for: Vòng lặp.
function: Khai báo hàm.

Lời kết Module 1

Module khởi đầu này đã giúp bạn có cái nhìn tổng quan về vị thế của JavaScript và cách nó vận hành trên trình duyệt. Hãy thử tạo một file HTML đơn giản và dùng console.log() để in ra dòng chữ đầu tiên của mình nhé.

Trong Module 2, chúng ta sẽ tìm hiểu về “kho lưu trữ” của JS: Biến (Variables) và Kiểu dữ liệu (Data Types).

Hẹn gặp lại các bạn!