JavaScript - Cú pháp: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn future JavaScript wizards! Tôi rất vui mừng được làm hướng dẫn viên cho các bạn trong hành trình thú vị vào thế giới của cú pháp JavaScript. Như một người đã dạy lập trình trong nhiều năm, tôi có thể nói rằng nắm vững cú pháp giống như học bảng chữ cái trước khi viết thơ. Nó có thể看起来 đơn giản, nhưng đó là nền tảng của mọi thứ chúng ta sẽ cùng nhau xây dựng. Hãy cùng bắt đầu nhé!

Cú pháp JavaScript: Những khối xây dựng của mã

Cú pháp JavaScript là bộ quy tắc xác định cách các chương trình JavaScript được xây dựng. Hãy tưởng tượng nó như ngữ pháp của ngôn ngữ JavaScript. Cũng như chúng ta cần tuân theo các quy tắc ngữ pháp để nói rõ ràng, chúng ta cũng cần tuân theo các quy tắc cú pháp để mã của mình có thể hiểu được bởi máy tính.

Chương trình JavaScript đầu tiên của bạn

Hãy bắt đầu với một chương trình đơn giản "Hello, World!". Đây thường là chương trình đầu tiên bạn viết khi học một ngôn ngữ mới.

console.log("Hello, World!");

Khi bạn chạy đoạn mã này, bạn sẽ thấy "Hello, World!" được in ra trong console. Hãy phân tích nó:

• console là một đối tượng được JavaScript cung cấp cho chúng ta quyền truy cập vào console gỡ lỗi của trình duyệt.
• .log() là phương thức của đối tượng console để in ra đối số được truyền vào.
• "Hello, World!" là một chuỗi (một序列 của các ký tự) mà chúng ta muốn in ra.

Giá trị trong JavaScript

Trong JavaScript, chúng ta làm việc với nhiều loại giá trị khác nhau. Các loại chính bao gồm:

1. Số: 42, 3.14
2. Chuỗi: "Hello", 'JavaScript'
3. Boolean: true, false
4. Đối tượng: {name: "John", age: 30}
5. Mảng: [1, 2, 3, 4]
6. Hàm: function greet() { console.log("Hi!"); }

Dưới đây là một ví dụ sử dụng các loại giá trị khác nhau:

let age = 25;  // Number
let name = "Alice";  // String
let isStudent = true;  // Boolean
let person = {name: "Bob", age: 30};  // Object
let numbers = [1, 2, 3, 4, 5];  // Array

console.log(age);  // Outputs: 25
console.log(name);  // Outputs: Alice
console.log(isStudent);  // Outputs: true
console.log(person.name);  // Outputs: Bob
console.log(numbers[2]);  // Outputs: 3

Khoảng trống và Ngắt dòng

JavaScript rất dễ dãi với khoảng trống (khoảng cách, tab, và ngắt dòng). Bạn có thể sử dụng chúng để làm cho mã của mình dễ đọc hơn mà không ảnh hưởng đến chức năng của nó.

let x = 5;
let y = 10;
let z = x + y;

// Điều này tương đương với:
let x=5;let y=10;let z=x+y;

// Còn có thể là:
let x = 5
let y = 10
let z = x + y

Dấu phẩy đơn là tùy chọn

Trong JavaScript, dấu phẩy đơn ở cuối các câu lệnh là tùy chọn. Tuy nhiên, thường được coi là tốt gyak để bao gồm chúng.

let a = 5;  // Với dấu phẩy đơn
let b = 10  // Không có dấu phẩy đơn

// Cả hai đều hợp lệ, nhưng bao gồm dấu phẩy đơn được khuyến nghị

Cảm thụ_cases

JavaScript phân biệt chữ hoa và chữ thường. Điều này có nghĩa là myVariable, MyVariable, và MYVARIABLE là các biến khác nhau.

let myVariable = "Hello";
let MyVariable = "World";

console.log(myVariable);  // Outputs: Hello
console.log(MyVariable);  // Outputs: World

JavaScript và Camel Case

Theo quy ước, JavaScript sử dụng camel case cho tên biến và hàm. Điều này có nghĩa là chúng ta bắt đầu với một chữ cái thường và viết hoa chữ cái đầu tiên của mỗi từ tiếp theo.

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;

console.log(fullName);  // Outputs: John Doe

Từ khóa trong JavaScript

JavaScript có một bộ từ khóa được保留 để không thể sử dụng làm tên biến. Những từ này được gọi là từ khóa. Dưới đây là một số từ khóa phổ biến:

Từ khóa	Mô tả
let	Khai báo một biến có phạm vi khối
const	Khai báo một hằng số không thay đổi
if	Đánh dấu một khối câu lệnh để thực thi khi điều kiện thỏa mãn
for	Đánh dấu một khối câu lệnh để thực thi trong một vòng lặp
function	Khai báo một hàm
return	Thoát khỏi hàm
true	Giá trị Boolean
false	Giá trị Boolean

Tên định danh trong JavaScript

Một tên định danh là tên bạn đặt cho một biến, hàm hoặc thuộc tính. Dưới đây là các quy tắc cho tên định danh hợp lệ:

1. Có thể chứa chữ cái, số, dấu gạch dưới và dấu dollar ($)
2. Phải bắt đầu bằng một chữ cái, dấu gạch dưới hoặc dấu dollar ($)
3. Phân biệt chữ hoa và chữ thường
4. Không thể là từ khóa

// Tên định danh hợp lệ
let myVariable = 5;
let _privateVar = 10;
let $specialVar = 15;

// Tên định danh không hợp lệ
// let 123abc = 20;  // Không thể bắt đầu bằng số
// let my-var = 25;  // Không thể sử dụng dấu gạch ngang
// let let = 30;     // Không thể sử dụng từ khóa

Bình luận trong JavaScript

Bình luận được sử dụng để thêm ghi chú vào mã của bạn hoặc ngăn chặn việc thực thi một phần của mã. Có hai loại bình luận trong JavaScript:

// Đây là một bình luận đơn dòng

/*
Đây là một
bình luận nhiều dòng
*/

let x = 5;  // Bạn cũng có thể thêm bình luận ở cuối một dòng

Operator trong JavaScript

Các operator được sử dụng để thực hiện các thao tác trên các biến và giá trị. Dưới đây là một số operator phổ biến:

Operator	Mô tả	Ví dụ
+	Cộng	5 + 3
-	Trừ	5 - 3
*	Nhân	5 * 3
/	Chia	15 / 3
%	Modulo (dư)	5 % 2
++	Tăng	x++
--	Giảm	x--
==	Bằng	5 == 5
===	Bằng chặt	5 === "5"
!=	Không bằng	5 != 3
>	Lớn hơn	5 > 3
<	Nhỏ hơn	3 < 5

Biểu thức trong JavaScript

Một biểu thức là sự kết hợp của các giá trị, biến và operator mà được đánh giá để ra một giá trị. Dưới đây là một số ví dụ:

let x = 5;
let y = 3;

console.log(x + y);  // Outputs: 8
console.log(x * y);  // Outputs: 15
console.log(x > y);  // Outputs: true
console.log(x === "5");  // Outputs: false

Bộ ký tự trong JavaScript

JavaScript sử dụng bộ ký tự Unicode. Điều này có nghĩa là nó có thể làm việc với các ký tự từ nhiều ngôn ngữ khác nhau và emoji! Dưới đây là một ví dụ thú vị:

let greeting = "Hello! ?";
let name = "Alice";
console.log(greeting + " " + name);  // Outputs: Hello! ? Alice

Và thế là xong, các bạn! Chúng ta đã bao gồm các основы của cú pháp JavaScript. Nhớ rằng, thực hành là cách tốt nhất để hoàn thiện. Đừng lo lắng nếu mọi thứ không ngay lập tức trở nên rõ ràng - điều đó hoàn toàn bình thường. Hãy tiếp tục thử nghiệm, tiếp tục lập trình, và quan trọng nhất, hãy vui vẻ!

Trong bài học tiếp theo, chúng ta sẽ深入研究 hơn về các biến và kiểu dữ liệu. Hẹn gặp lại các bạn! ??‍??‍?

Credits: Image by storyset