Cú pháp JavaScript là tập hợp các quy tắc, cách các chương trình JavaScript được xây dựng. Một JavaScript bao gồm các câu lệnh JavaScript được đặt trong các thẻ HTML <script> </script> trong một trang web hoặc trong tệp JavaScript bên ngoài có phần mở rộng .js.
// Khai báo biến trong Javascript
var x;
let y;
// Sử dụng biến trong Javascript
x = 5;
y = 6;
let z = x + y;Giá trị JavaScript
Cú pháp JavaScript xác định hai loại giá trị:
- Giá trị cố định: được gọi là Literal
- Giá trị biến đổi: được gọi là Biến
Các giá trị cố định trong Javascript
Hai quy tắc quan trọng nhất cho các giá trị cố định là:
1. Là các số nguyên hoặc số thập phân
Ví dụ: 3.14; 100;
3.14
100Hãy thử ví dụ sau:
<html>
<body>
<h2>Hằng trong Javascript</h2>
<p>Các hằng số có thể biết ra trình duyệt như sau</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 3.14;
</script>
</body>
</html>2. Chuỗi văn bản, được viết trong dấu ngoặc kép hoặc đơn:
Ví dụ: “Hour of Code Vietnam” hoặc ‘Hour of Code Vietnam’
"Hour Of Code Vietnam"
'Hour Of Code Vietnam'Hãy thử ví dụ sau:
<!DOCTYPE html>
<html>
<body>
<h2>Chuỗi văn bản trong Javascript</h2>
<p>Chuỗi văn bản có thể được viết trong nháy đơn hoặc nháy kép.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 'Hour Of Code Vietnam';
</script>
</body>
</html>Khai báo biến trong JavaScript
Trong một ngôn ngữ lập trình, các biến được sử dụng để lưu trữ các giá trị dữ liệu.
JavaScript sử dụng các từ khóa var và let để const khai báo các biến (Các bạn sẽ được tìm hiểu kỹ hơn ở bài 5)
Dấu bằng được sử dụng để gán giá trị cho các biến.
Trong ví dụ này, x được định nghĩa là một biến. Khi đó, x được gán (cho trước) giá trị 6:
let x;
x = 6;Hãy thử ví dụ sau:
<html>
<body>
<h2>JavaScript Variables</h2>
<p>Trong ví dụ này x được khai báo là một biến.
Sau đó nó được gán giá trị bằng 6:</p>
<script>
let x;
x = 6;
document.write(x);
</script>
</body>
</html>Toán tử JavaScript
JavaScript có thể sử dụng toán tử số học ( + - * /) để tính toán các giá trị:
<html>
<body>
<h2>Toán tử trong JavaScript</h2>
<p>JavaScript sử dụng các phép toán số học để tính toán (Giống như trong toán học).</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = (5 + 6) * 10;
</script>
</body>
</html>Toán tử số học.
Toán tử số học được sử dụng để thực hiện các phép toán số học trên các toán hạng. Các toán tử sau đây được gọi là toán tử số học JavaScript.
| Toán tử | Mô tả | Ví dụ |
|---|---|---|
| + | Phép cộng | 10+20 = 30 |
| – | Phép trừ | 20-10 = 10 |
| * | Phép nhân | 10*20 = 200 |
| / | Phép chia lấy phần nguyên | 20/10 = 2 |
| % | Phép chia lấy phần dư | 20%10 = 0 |
| ++ | Tăng lên 1 đơn vị | var a=10; a++; bây giờ a = 11 |
| — | Giảm đi 1 đơn vị | var a=10; a–; bây giờ a = 9 |
Toán tử so sánh (quan hệ).
Toán tử so sánh JavaScript so sánh hai toán hạng. Các toán tử so sánh như sau:
| Toán tử | Mô tả | Ví dụ |
|---|---|---|
| == | So sánh bằng | 10==20 = false |
| === | Giống hệt nhau (bằng và cùng kiểu dữ liệu) | 10==20 = false |
| != | Không bằng | 10!=20 = true |
| !== | Không giống hệt nhau | 20!==20 = false |
| > | Lớn hơn | 20>10 = true |
| >= | Lớn hơn hoặc bằng | 20>=10 = true |
| < | Nhỏ hơn | 20<10 = false |
| <= | Nhỏ hơn hoặc bằng | 20<=10 = false |
Toán tử bit.
Các toán tử bit thực hiện các thao tác bit trên các toán hạng. Các toán tử như sau:
| Toán tử | Mô tả | Ví dụ |
|---|---|---|
| & | điều kiện AND | (10==20 & 20==33) = false |
| | | điều kiện OR | (10==20 | 20==33) = false |
| ^ | điều kiện XOR | (10==20 ^ 20==33) = false |
| ~ | điều kiện NOT | (~10) = -10 |
| << | Dịch trái | (10<<2) = 40 |
| >> | Dịch phải | (10>>2) = 2 |
| >>> | Dịch phải với Zero | (10>>>2) = 2 |
Toán tử logic.
Các toán tử sau được gọi là toán tử logic trong JavaScript.
| Toán tử | Mô tả | Ví dụ |
|---|---|---|
| && | Logic AND | (10==20 && 20==33) = false |
| || | Logic OR | (10==20 || 20==33) = false |
| ! | Logic Not | !(10==20) = true |
Toán tử gán.
Các toán tử sau được gọi là toán tử gán trong JavaScript.
| Toán tử | Mô tả | Ví dụ |
|---|---|---|
| = | Gán | 10+10 = 20 |
| += | Cộng và gán | var a=10; a+=20; bây giờ a = 30 |
| -= | Trừ và gán | var a=20; a-=10; bây giờ a = 10 |
| *= | Nhân và gán | var a=10; a*=20; bây giờ a = 200 |
| /= | Chia lấy phần nguyên và gán | var a=10; a/=2; bây giờ a = 5 |
| %= | Chia lấy phần dư và gán | var a=10; a%=2; bây giờ a = 0 |
Các toán tử đặc biệt.
Các toán tử sau được gọi là các toán tử đặc biệt trong JavaScript.
| Toán tử | Mô tả |
|---|---|
| (?:) | Toán tử điều kiện trả về giá trị dựa trên điều kiện. Nó giống như if-else. |
| , | Cho phép nhiều biểu thức được đánh giá như một câu lệnh đơn. |
| delete | Toán tử delete xóa một thuộc tính của đối tượng. |
| in | Toán tử in kiểm tra nếu đối tượng có thuộc tính đã cho. |
| instanceof | Kiểm tra nếu đối tượng là một thể hiện của kiểu dữ liệu đã cho. |
| new | Tạo một thể hiện của môt đối tượng. |
| typeof | Kiểm tra kiểu đối tượng. |
| void | Nó loại bỏ giá trị trả về của biểu thức. |
| yield | Kiểm tra những gì được trả về trong một trình tạo bởi trình lặp của trình tạo. |
Biểu thức JavaScript
Một biểu thức là sự kết hợp của các giá trị, biến và toán tử, được tính thành một giá trị.
Tính toán được gọi là đánh giá.
Ví dụ: 5 * 10 cho kết quả là 50:
<!DOCTYPE html>
<html>
<body>
<h2>Biểu thức Javascript</h2>
<p>Biểu thức tính toán các giá trị</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 * 10;
</script>
</body>
</html>Biểu thức cũng có thể chứa các giá trị biến:
<!DOCTYPE html>
<html>
<body>
<h2>Biểu thức Javascript</h2>
<p>Biểu thức tính toán các giá trị</p>
<p id="demo"></p>
<script>
var x=5;
document.getElementById("demo").innerHTML = x * 10;
</script>
</body>
</html>Bình luận, chú thích trong JavaScript
Tất cả các mã sau dấu gạch chéo kép //hoặc giữa /*và */được coi là một chú thích.
Chú thích trên dòng đơn bắt đầu bằng //.
Chú thích trên nhiều dòng bắt đầu bằng /* và kết thúc bằng */.
Bất kỳ văn bản nào giữa /* và */sẽ bị JavaScript bỏ qua.
Các chú thích này sẽ bị bỏ qua và sẽ không được thực thi khi chạy chương trình. Nó có tác dụng giúp người đọc dễ hiểu các nhiệm vụ của chương trình hoặc dòng lệnh hơn.
<html>
<body>
<h2>Các dòng chú thích trong Javascript không được thực thi</h2>
<p id="demo"></p>
<script>
let x;
x = 5;
// x = 6; Câu lệnh này sẽ không được thực thì và được coi như dòng chú thích
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>Đặt tên trong JavaScript
Hầu hết trong các ngôn ngữ lập trình, quy tắc đặt tên là tương đối giống nhau
Tên trong JavaScript phải bắt đầu bằng:
- Một chữ cái (AZ hoặc az)
- Một ký hiệu đô la ($)
- Hoặc dấu gạch dưới (_)
Các ký tự tiếp theo có thể là chữ cái, chữ số, dấu gạch dưới hoặc ký hiệu đô la.
Không bắt đầu bằng chữ số.
JavaScript phân biệt chữ hoa chữ thường
Tất cả các mã nhận dạng JavaScript đều phân biệt chữ hoa chữ thường .
Các biến lastName và Lastname, là hai biến khác nhau:
<html>
<body>
<h2>JavaScript phân biệt chữ HOA chữ thường</h2>
<p>Thay đổi lastName với lastname.</p>
<p id="demo"></p>
<script>
let lastname, lastName;
lastName = "Doe";
lastname = "Peterson";
document.getElementById("demo").innerHTML = lastName;
</script>
</body>
</html>Vì vậy Javascript sẽ phân biệt LET, Let với let hoặc Var với var
Bộ ký tự trong JavaScript
JavaScript sử dụng bộ ký tự Unicode .
Unicode bao gồm (gần như) tất cả các ký tự, dấu câu và ký hiệu trên thế giới.