Nắm vững quy tắc cơ bản của JavaScript trong 5 phút - Hướng dẫn nhanh

VnnTools

Chào bạn, nếu bạn đang bắt đầu hành trình chinh phục JavaScript, hay đơn giản là muốn hệ thống lại kiến thức nền tảng của mình, thì bạn đã tìm đúng nơi rồi đấy. JavaScript là một ngôn ngữ cực kỳ thú vị và mạnh mẽ, nhưng để làm chủ được nó, chúng ta cần nắm vững những quy tắc cơ bản nhất.

Nắm vững quy tắc cơ bản của JavaScript trong 5 phút

Hãy quên đi những định nghĩa khô khan và phức tạp. Trong bài viết này, chúng ta sẽ cùng nhau khám phá những quy tắc cốt lõi của JavaScript một cách mộc mạc, gần gũi và dễ hiểu nhất. Cứ coi như chúng ta đang ngồi cà phê và trò chuyện về code vậy. Bắt đầu nhé! ☕

1. Biến và Hằng: "Chiếc hộp" chứa dữ liệu

Hãy tưởng tượng bạn có những chiếc hộp để chứa đồ. Trong JavaScript, biến (variable)hằng (constant) cũng tương tự như vậy, chúng dùng để lưu trữ thông tin.

Biến (var, let): Giống như một chiếc hộp có thể thay đổi đồ bên trong. Bạn có thể gán cho nó một giá trị, và sau đó thay đổi giá trị đó bất cứ lúc nào.

let name = 'Bảy'
name = 'Tám' // Oke, không vấn đề gì
  • Lời khuyên: Ngày nay, hãy ưu tiên dùng let thay cho var nhé. let có quy tắc rõ ràng hơn, giúp bạn tránh được nhiều lỗi không đáng có.

Hằng (const): Đây là chiếc hộp "đã niêm phong". Một khi bạn đã bỏ đồ vào, bạn không thể thay đổi nó được nữa.

const PI = 3.14
PI = 3.15 // Lỗi ngay!
  • Khi nào dùng? Bất cứ khi nào bạn biết chắc chắn giá trị đó sẽ không thay đổi, hãy dùng const. Điều này làm cho code của bạn an toàn và dễ hiểu hơn.

Quy tắc cần nhớ:

  • Tên biến phải có ý nghĩa (ví dụ: userName thay vì x).
  • Tên biến có thể bắt đầu bằng chữ cái, dấu gạch dưới _ hoặc đô la $.
  • JavaScript phân biệt chữ hoa chữ thường (userName khác với username).

2. Các kiểu dữ liệu: "Nguyên liệu" của chương trình

JavaScript có một vài kiểu dữ liệu cơ bản mà bạn sẽ làm việc cùng hàng ngày.

String (Chuỗi): Bất cứ thứ gì nằm trong dấu nháy đơn ' ', nháy kép " " hoặc nháy ngược ` `. Dùng để biểu thị văn bản.

let greeting = 'Xin chào các bạn!'

Number (Số): Bao gồm cả số nguyên và số thập phân.

let age = 25
let price = 19.99

Boolean (Luận lý): Chỉ có hai giá trị: true (đúng) hoặc false (sai). Thường dùng để kiểm tra điều kiện.

let isLoggedIn = true

Null: Đại diện cho sự "rỗng" hoặc "vô giá trị" một cách có chủ ý. Giống như bạn cố tình để chiếc hộp trống không.

let car = null

Undefined: Có nghĩa là một biến đã được khai báo nhưng chưa được gán giá trị. Chiếc hộp đã có tên nhưng chưa ai bỏ gì vào.

let myVar // myVar bây giờ là undefined

Object (Đối tượng): Một kiểu dữ liệu phức tạp hơn, cho phép bạn lưu trữ một bộ sưu tập các cặp key: value. Tưởng tượng nó là một cái tủ có nhiều ngăn, mỗi ngăn có nhãn và chứa đồ riêng.

let person = { name: 'An', age: 30 }

Array (Mảng): Một dạng đặc biệt của object, dùng để lưu trữ một danh sách các giá trị.

let fruits = ['Táo', 'Cam', 'Xoài']

3. Toán tử: "Công cụ" xử lý dữ liệu

Toán tử giúp bạn thực hiện các phép toán và so sánh.

Toán tử số học: +, -, *, /, % (chia lấy dư).

let total = 10 + 5

Toán tử gán: =, +=, -=.

let score = 10
score += 5 // Tương đương score = score + 5;

Toán tử so sánh: == (so sánh bằng, chỉ so sánh giá trị), === (so sánh tuyệt đối, so sánh cả giá trị và kiểu dữ liệu), !=, !==, >, <, >=, <=.

'5' == 5 // true
'5' === 5 // false (vì một bên là string, một bên là number)
  • Lời khuyên: Luôn luôn ưu tiên dùng ===!== để tránh những kết quả khó lường.

Toán tử logic: && (VÀ), || (HOẶC), ! (PHỦ ĐỊNH).

if (age > 18 && hasLicense) { ... }

4. Cấu trúc điều khiển: "Biển báo" chỉ dẫn luồng đi

Code không phải lúc nào cũng chạy từ trên xuống dưới. Cấu trúc điều khiển giúp chương trình của bạn đưa ra quyết định và lặp lại các hành động.

If...Else: Dùng để thực thi một khối mã nếu điều kiện là đúng, và một khối mã khác nếu điều kiện là sai.

let hour = 14
if (hour < 12) {
  console.log('Chào buổi sáng!')
} else {
  console.log('Chào buổi chiều!')
}

Switch...Case: Dùng khi bạn có nhiều điều kiện cần kiểm tra với cùng một biến. Nó gọn gàng hơn việc dùng nhiều if...else if.

let fruit = 'Táo'
switch (fruit) {
  case 'Chuối':
    console.log('Giá chuối là 10.000đ/kg.')
    break
  case 'Táo':
    console.log('Giá táo là 25.000đ/kg.')
    break
  default:
    console.log('Xin lỗi, chúng tôi hết hàng đó rồi.')
}

Vòng lặp (For, While): Dùng để lặp đi lặp lại một công việc.

  • Vòng lặp for: Khi bạn biết chính xác số lần lặp.
// In ra các số từ 0 đến 4
for (let i = 0; i < 5; i++) {
  console.log(i)
}
  • Vòng lặp while: Khi bạn muốn lặp cho đến khi một điều kiện nào đó không còn đúng nữa.
let i = 0
while (i < 5) {
  console.log(i)
  i++
}

5. Hàm (Function): "Cỗ máy" tái sử dụng

Hàm là một khối mã được đặt tên, bạn có thể gọi nó thực thi bất cứ lúc nào bạn muốn. Điều này giúp bạn tránh lặp lại code và làm cho chương trình có tổ chức hơn.

// Khai báo hàm
function greet(name) {
  console.log('Xin chào, ' + name + '!')
}

// Gọi hàm để sử dụng
greet('Minh') // Kết quả: Xin chào, Minh!
greet('Hoa') // Kết quả: Xin chào, Hoa!

Arrow Function (ES6): Đây là một cách viết hàm ngắn gọn hơn, rất phổ biến hiện nay.

const add = (a, b) => {
  return a + b
}

// Hoặc ngắn hơn nữa nếu hàm chỉ có một dòng return
const subtract = (a, b) => a - b

console.log(add(5, 3)) // 8
console.log(subtract(10, 4)) // 6

Trên đây là những quy tắc cơ bản và cốt lõi nhất của JavaScript. Chúng giống như bảng chữ cái và ngữ pháp mà bạn cần nắm vững trước khi viết nên những câu chuyện tuyệt vời bằng code.

Đừng cố gắng học thuộc lòng mọi thứ. Cách tốt nhất để ghi nhớ là thực hành, thực hành và thực hành. Hãy mở trình duyệt, bật console lên (nhấn F12), và thử gõ từng dòng lệnh. Viết những đoạn script nhỏ, giải những bài toán đơn giản.

Hành trình học lập trình là một cuộc marathon, không phải là một cuộc đua nước rút. Hãy kiên nhẫn, tò mò và đừng ngại mắc lỗi.

Chúc bạn có những giờ phút viết code thật vui vẻ và hiệu quả! ✨

Bài viết liên quan

Tối ưu JavaScript: Hướng dẫn chi tiết từ A-Z dành cho Developer

Học cách tối ưu JavaScript để tăng tốc website của bạn lên tầm cao mới. Khám phá các kỹ thuật hiệu quả giúp cải thiện hiệu suất tải trang ngay hôm nay!

Tối ưu CSS để tăng tốc website: Hướng dẫn toàn diện từ A-Z

Tối ưu CSS cho website giúp tải trang nhanh hơn, cải thiện SEO và trải nghiệm người dùng. Khám phá các kỹ thuật nén, gộp, loại bỏ CSS thừa và hơn thế nữa!

JSX trong React là gì? Hướng dẫn chi tiết cho người mới bắt đầu

JSX là cú pháp mở rộng của JavaScript, cho phép viết code giống HTML trong React. Bài viết này sẽ giúp bạn hiểu rõ JSX là gì, tại sao cần dùng JSX và cách sử dụng hiệu quả.

Component React là gì? Hướng dẫn chi tiết cho người mới bắt đầu

Hiểu rõ Component React chính là chìa khóa để xây dựng giao diện ứng dụng web hiện đại. Đọc ngay để nắm vững các loại component phổ biến và cách tạo component đầu tiên của bạn.