Khóa học IT JavaScript Cơ bản 036_Cấu trúc Cú pháp

Câu lệnh

Câu lệnh JavaScript (Statements) là một tập hợp các chỉ thị được sử dụng để thực hiện các nhiệm vụ cụ thể.

Ví dụ:

1
// Khai báo biến
2
let userName = 'Zhao Jian';
3
let age = 18;
4

5
// Câu lệnh điều kiện
6
if (age >= 18) {
7
  console.log(userName + ' là người trưởng thành');
8
} else {
9
  console.log(userName + ' là người chưa thành niên');
10
}
11

12
// Vòng lặp
13
for (let i = 0; i < 5; i++) {
14
  console.log('Xuất vòng lặp ' + (i + 1));
15
}
16

17
// Định nghĩa hàm
18
function Hello(name) {
19
  return 'Xin chào, ' + name + '!';
20
}
21

22
// Gọi hàm
23
let sayHello = Hello(userName);
24
console.log(sayHello);

Dấu chấm phẩy

Trong JavaScript, dấu chấm phẩy (;) là ký hiệu kết thúc câu lệnh, được sử dụng để xác định điểm kết thúc của một câu lệnh. Dấu chấm phẩy là tùy chọn trong hầu hết các trường hợp vì trình thông dịch JavaScript cố gắng tự động chèn dấu chấm phẩy (Automatic Semicolon Insertion, ASI) để làm cho mã được phân tích cú pháp chính xác. Tuy nhiên, có những trường hợp ASI có thể gây ra hành vi không mong đợi, vì vậy nên thêm dấu chấm phẩy một cách rõ ràng khi viết mã JavaScript.

Khi dấu chấm phẩy xuất hiện, dù trên một dòng hay nhiều dòng, câu lệnh kết thúc.

Ví dụ:

1
alert('Hello');alert('JavaScript!');

Khi có xuống dòng (line break), trong hầu hết các trường hợp có thể bỏ qua dấu chấm phẩy.

Ví dụ:

1
alert('Hello')
2
alert('JavaScript!')

1
alert('Hello');
2
alert('JavaScript!')

1
alert('Hello')
2
alert('JavaScript!');

1
alert('Hello');alert('JavaScript!')

Khi gặp khối câu lệnh hoặc khối mã, xuống dòng không tự động thêm dấu chấm phẩy. Ngoài ra, khoảng trắng và xuống dòng sẽ bị bỏ qua.

Ví dụ:

1
alert
2
(
3
1+
4
   2
5
   +1);

Chú thích

Trong JavaScript, chú thích là văn bản được sử dụng để thêm giải thích và ghi chú trong mã. Những văn bản này không có tác động thực tế đến việc thực thi chương trình. Chú thích rất hữu ích để cải thiện khả năng đọc mã, hợp tác và gỡ lỗi.

Chú thích một dòng

Sử dụng ký hiệu // để tạo chú thích một dòng. Tất cả văn bản từ // đến cuối dòng sẽ được coi là chú thích.

Ví dụ:

1
alert('Hello JavaScript!'); // Chú thích một dòng theo sau câu lệnh
2
// Chú thích một dòng trên dòng riêng

Chú thích nhiều dòng

Sử dụng /* để bắt đầu và */ để kết thúc tạo chú thích nhiều dòng. Tất cả văn bản giữa hai ký hiệu này sẽ được coi là chú thích.

1
/*
2
  Đây là chú thích nhiều dòng
3
  có thể trải dài nhiều dòng
4
*/
5
alert('Hello');
6
/*
7
Chú thích nhiều dòng cũng có thể được sử dụng để comment out một khối mã, mã bên dưới sẽ không thực thi
8
alert('JavaScript!');
9
*/

Hộp thoại

JavaScript cung cấp một số hộp thoại để tương tác đơn giản với người dùng, bao gồm alert, confirm và prompt. Các hộp thoại này cho phép bạn hiển thị thông tin cho người dùng, đặt câu hỏi hoặc chấp nhận đầu vào. Khi hộp thoại được hiển thị, việc thực thi mã tạm dừng cho đến khi người dùng đóng hộp thoại.

Hộp thoại alert

Hộp thoại alert được sử dụng để hiển thị thông báo cho người dùng và đợi người dùng nhấp vào nút “OK”.

Ví dụ:

1
alert('Hello JavaScript nội bộ!');

Hiệu ứng:

Hộp thoại confirm

Hộp thoại confirm được sử dụng để hiển thị hộp thoại với các nút xác nhận và hủy cho người dùng, thường được sử dụng để hỏi người dùng có muốn thực hiện một thao tác hay không.

Ví dụ:

1
    let yesNo = confirm("Bạn có đang học JavaScript không?");
2
    alert(yesNo);

Hiệu ứng:

Hộp thoại prompt

Hộp thoại prompt được sử dụng để hiển thị hộp thoại với trường nhập liệu cho người dùng, thường được sử dụng để chấp nhận đầu vào của người dùng.

Ví dụ:

1
    let name = prompt("Vui lòng nhập tên của bạn:", '');
2
    alert(name);

Hiệu ứng:

Công cụ dành cho nhà phát triển

Công cụ dành cho nhà phát triển JavaScript là một bộ công cụ được tích hợp trong trình duyệt để giúp các nhà phát triển gỡ lỗi, phân tích và tối ưu hóa mã JavaScript. Các trình duyệt khác nhau cung cấp các công cụ phát triển khác nhau. Sau đây là các công cụ phát triển JavaScript cho các trình duyệt phổ biến:

Công cụ dành cho nhà phát triển Chrome

Mở trình duyệt Chrome và nhấn Ctrl + Shift + I (Windows/Linux) hoặc Cmd + Option + I (Mac) để mở Công cụ dành cho nhà phát triển Chrome.

Nhấp chuột phải trong trình duyệt và chọn “Kiểm tra” từ menu bật lên để mở Công cụ dành cho nhà phát triển Chrome.

Như hình:

Nhấp vào biểu tượng “Cài đặt và hơn nữa” của trình duyệt, chọn “Công cụ khác” — “Công cụ dành cho nhà phát triển” để mở Công cụ dành cho nhà phát triển Chrome.

Như hình:

Các tính năng và bảng chính:

• Console (Bảng điều khiển): Được sử dụng để thực thi và gỡ lỗi mã JavaScript, xem đầu ra, lỗi và thông báo cảnh báo.
• Sources (Nguồn): Cung cấp trình soạn thảo mã, cài đặt điểm dừng, biểu thức theo dõi và các tính năng khác để gỡ lỗi mã nguồn JavaScript.
• Network (Mạng): Xem các yêu cầu mạng do trang thực hiện, kiểm tra thông tin chi tiết về yêu cầu và phản hồi.
• Performance (Hiệu suất): Phân tích hiệu suất trang, xem thời gian tải, sử dụng CPU, v.v.
• Application (Ứng dụng): Xem và gỡ lỗi bộ nhớ cục bộ, Session Storage, Cookies, v.v.
• Elements (Phần tử): Xem và chỉnh sửa cây DOM, sửa đổi kiểu CSS.

Từ khóa

Từ khóa JavaScript là các từ dành riêng có mục đích đặc biệt trong ngôn ngữ lập trình JavaScript. Chúng được sử dụng để xác định biến, hàm, câu lệnh, v.v. Các từ khóa này không thể được sử dụng làm định danh (như tên biến, tên hàm, v.v.).

Sau đây là một số từ khóa JavaScript:

1. Từ khóa cơ bản:

• break
• case
• catch
• continue
• debugger
• default
• delete
• do
• else
• false
• finally
• for
• function
• if
• in
• instanceof
• new
• null
• return
• switch
• this
• throw
• true
• try
• typeof
• undefined
• var
• void
• while
• with

2. Từ khóa dành riêng (có mục đích đặc biệt trong chế độ strict):

• implements
• interface
• package
• private
• protected
• public
• static
• yield

3. Từ khóa được giới thiệu bởi ECMAScript 6 (ES6):

• class
• const
• export
• extends
• import
• super