Cú pháp tổng quát và trình tự xử lý của Javascript | Series Javascript căn bản | Bài 2

Chào mừng các bạn đã trở lại với bài giảng tiếp theo trong series Javascript căn bản!

Ở bài giảng trước, ta đã tìm hiểu về khái niệm Javascript, cũng như là những ứng dụng phổ biến của nó trong ngành công nghiệp lập trình. Trong bài giảng này, chúng ta sẽ bắt đầu tìm hiểu về cú pháp cũng như quy trình xử lý của nó. Không tốn nhiều thời gian nữa, cùng bắt đầu thôi.

Cấu trúc của 1 kịch bản Javascript (1 file hoặc 1 đoạn code Javascript)

Kịch bản Javascript là gì?

Thực ra cấu trúc của 1 kịch bản Javascript rất giống kịch bản được dùng trong các bộ phim mà ta thường hay xem. Nếu kịch bản trong các bộ phim được xây dựng bằng chuỗi các diễn biến nội dung thì kịch bản Javascript cũng như thế. Các diễn biến trong kịch bản Javascript được gọi là Statement (câu lệnh), bởi vì người lập trình sẽ đóng vai trò là đạo diễn chi phối các sự kiện hay hành động đó.

Để chứng minh điều này, ta cùng xem một ví dụ mô phỏng sau đây:

Kịch bản phim Kịch bản Javascript

Câu chuyện của chúng ta có 2 nhân vật: NamKim.
(Diễn biến 1)

Nhà Nam rất nghèo nên tài khoản ngân hàng của Nam hiện giờ chỉ có 1 triệu.
(Diễn biến 2)

Nhà Kim rất giàu, bố làm chủ tịch nên tài khoản ngân hàng của Kim hiện giờ có đến 100 triệu.
(Diễn biến 3)

Nam đã yêu thầm Kim từ lâu nên ngỏ lời cầu hôn, Kim trả lời rằng nếu tài khoản của Nam có nhiều tiền hơn tài khoản của Kim thì Kim sẽ đồng ý.
(Diễn biến 4)

var nam, kim;
// Statement 1

nam = 1000000;
// Statement 2

kim = 100000000;
// Statement 3

if(nam > kim){
   alert ('Kim đồng ý lời cầu hôn của Nam');
}else{
   alert('Kim từ chối lời cầu hôn của Nam');
}
// Statement 4

Như vậy, statement là thành tố cơ bản cấu tạo nên 1 kịch bản Javascript, cũng giống như HTML Element là thành tố cơ bản cấu tạo nên 1 văn bản HTML, hay CSS Rule là thành tố cơ bản cấu tạo nên 1 đoạn mã CSS.

Một kịch bản Javascript có thể có 1 hoặc nhiều statement.

Các statement có thể được viết trên những hàng riêng biệt hoặc trên cùng một hàng.

Ví dụ 3 statement được viết trên cùng một hàng: var nam, kim; nam = 1000000; kim = 100000000;

Cấu trúc của 1 Javascript statement

Không giống như HTML hay CSS, các thành phần cấu tạo nên một statement trong Javascript không bị ràng buộc về chủng loại, số lượng và thứ tự. Điều đó có nghĩa rằng sẽ có những statement rất dài với vô số các thành phần và những statement rất ngắn với chỉ 1 vài thành phần, tuỳ thuộc vào mục đích của người viết ra nó. Điểm chung duy nhất của các statement trong một kịch bản Javascript là kết thúc bằng dấu ; (chấm phẩy).

Ví dụ 1 statement ngắn:

var a1;

Ví dụ 1 statement dài:

var b2 = Math.round(20/3) + Math.abs(-50);

Trong một số trường hợp, một statement có thể chứa nhiều "statement con" bên trong:

if(a < 5){
   result = true;
}else{
   result = false;
}

Các chủng loại thành phần thường xuất hiện trong 1 statement là: Biến (Variable), Hằng (Constant), Dữ liệu (Data, Operator & Function.

Chúng ta sẽ tìm hiểu từng loại thành phần này trong những bài giảng kế tiếp của series.

Trình tự xử lý của 1 kịch bản Javascript

1 kịch bản Javascript sẽ được xử lý theo thứ tự từ trên xuống dưới, từ trái qua phải. Điều đó có nghĩa là các statement viết ở trên cùng sẽ được ưu tiên xử lý trước. Nếu một hàng có 2 hoặc nhiều statement thì các statement bên trái sẽ được xử lý trước.

Nếu trường hợp 1 statement bị lỗi trong quá trình xử lý (lỗi code Javascript), quá trình xử lý sẽ bị dừng lại và các statement phía sau/dưới sẽ không được xử lý.

Comment trong Javascript

Giống như HTML & CSS, cú pháp của Javascript cũng cho phép chúng ta chèn vào các đoạn comment (ghi chú) trong quá trình viết code. Các đoạn comment này sẽ không tham gia vào quá trình xử lý (chạy code).

Cách để viết comment trong Javascript: // Nội dung comment

Ví dụ:

console.log('Hello world'); // Comment 1
alert('Hi everyone!');
// Comment 2

Lưu ý: Comment trong Javascript không có ký tự đánh dấu kết thúc. Nếu bạn Enter xuống dòng code tiếp theo nghĩa là đã chấm dứt dòng comment trước đó.

Đăng ký để nhận được thông báo mỗi khi có bài viết mới!