Nếu bạn muốn học cách viết JavaScript, bạn đã đến đúng nơi.
Mọi ngôn ngữ lập trình đều có bộ quy tắc riêng, giống như tiếng Anh. Hãy nghĩ về nó. Khi bạn ở trường tiểu học, bạn học quy tắc ngữ pháp để cấu trúc câu.
Giống như tiếng Anh, ngôn ngữ lập trình tuân theo quy tắc để đảm bảo mọi người hiểu những gì được nói. Tưởng tượng nếu mỗi người tự tạo quy tắc khi dùng tiếng Anh. Không ai giao tiếp được. Tương tự, ngôn ngữ lập trình nghiêm ngặt về quy tắc để mã bạn viết có thể thực thi.
Trong hướng dẫn này, chúng ta sẽ thảo luận cú pháp JavaScript. Cú pháp là tập hợp quy tắc xác định cách mã được viết trong JavaScript.
Tại Sao Cú Pháp Quan Trọng?
Trong JavaScript, có một số quy tắc cú pháp cần tuân theo. Ví dụ, nếu bạn không đóng ngoặc sau khi mở, lỗi sẽ được trả về. Máy tính không thể tiếp tục chạy chương trình vì không hiểu bạn đang bảo nó làm gì.
Điều này đáng để phân biệt giữa máy tính và con người: trong khi con người có thể nhận diện lỗi đôi khi và bỏ qua, máy tính không thể làm vậy khi chạy mã trong bất kỳ ngôn ngữ lập trình nào. Đó là lý do quan trọng bạn phải viết mã dùng cú pháp của ngôn ngữ bạn đang làm việc.
Cú pháp cũng làm cho mã dễ đọc hơn. Khi mọi người dùng cùng cú pháp, dễ dàng diễn giải chương trình của người khác. Giống như tiếng Anh, một khi biết quy tắc cơ bản, không có dòng mã nào bạn không đọc được.
Trong hướng dẫn này, chúng ta tập trung vào các đặc điểm cú pháp sau:
- Khoảng trắng (Whitespace)
- Đặt tên biến (Naming Variables)
- Thụt lề (Indentation)
- Chú thích (Comments)
- Dấu chấm phẩy (Semicolons)
Hãy bắt đầu!
Khoảng Trắng (Whitespace)
Lập trình viên tranh luận về khoảng trắng liên tục. Đây là chủ đề gây tranh cãi. Bỏ qua tranh luận đó một phút, có một quy tắc then chốt cần nhớ về cú pháp JavaScript: bạn nên có khoảng trắng giữa các biến, và trước và sau ngoặc đơn.
Giả sử bạn viết vòng lặp for:
for (var i = 0; i < 4; i++) { console.log(i); }
Vòng lặp in tất cả số trong khoảng 0 đến 4 ra bảng điều khiển. Như bạn thấy, có khoảng trắng giữa từ khóa for và ngoặc mở của vòng lặp. Có khoảng trắng giữa ngoặc đóng () và ngoặc mở {}. Cũng có khoảng trắng giữa tất cả câu lệnh trong các ngoặc này:
- var i = 0;
- i < 4;
Khi gán biến bên ngoài vòng lặp for, dùng cách tương tự:
var cookie = “Raspberry Chocolate Chip”;
Thêm khoảng trắng giữa biến làm cho mã dễ đọc.
Thụt Lề (Indentation)
Khác với ngôn ngữ khác, bạn có thể viết chương trình JavaScript trên một dòng. Không phải ý tưởng hay – nghĩ xem mã khó đọc như thế nào – nhưng bạn vẫn có thể làm.
Mọi câu lệnh trong khối mã – như câu lệnh điều kiện if hoặc class – nên được thụt lề. Thụt lề là thêm hai khoảng trắng, bốn khoảng trắng hoặc một tab ở đầu mã. Có nhiều tranh luận về cái gì tốt nhất, nhưng miễn là bạn duy trì nhất quán xuyên suốt mã, bạn không gặp rắc rối.
Ví dụ vòng lặp for thụt lề:
for (var i = 0; i < 4; i++) { console.log(i); }
Bạn thấy thuật ngữ console.log() được thụt lề dùng tab. Đó là vì nó nằm trong ngoặc nhọn. Điều này giúp phân biệt nội dung vòng lặp for với phần còn lại của mã. Nếu có khối mã khác, như câu lệnh if, chúng ta thụt lề nội dung nó nhiều hơn:
for (var i = 0; i < 4; i++) { if (i === 3) { console.log(i); } }
Mã in giá trị i nếu bằng ba. Ngược lại, không xảy ra gì. Trong đoạn này, if thụt lề một tab vì nó trong for. console.log() thụt lề hai tab vì nó trong if, mà if nằm trong for.
Chú Thích (Comments)
Chú thích là câu lệnh lập trình viên viết cho lập trình viên. Chúng về mặt kỹ thuật được đọc bởi JavaScript, nhưng không được thực thi.
Mục đích chú thích giúp lập trình viên theo dõi mã. Nếu triển khai hàm phức tạp, bạn có thể viết vài chú thích để biết mỗi phần hàm làm gì. Chú thích thường dùng trong dự án cộng tác để mọi lập trình viên hiểu chương trình, ngay cả khi họ không tự viết.
Trong JavaScript, chú thích viết dùng dấu gạch chéo kép, theo sau là chú thích:
// This is a comment that will be skipped over by JavaScript!
Tất cả ký tự sau dấu gạch chéo kép được xem như chú thích. Để chú thích trải dài nhiều dòng, dùng cú pháp:
/* This is a comment that spans multiple lines. */
Bất kỳ văn bản giữa /* và */ sẽ bị trình biên dịch JavaScript bỏ qua.
Đặt Tên Biến (Naming Variables)
Có nhiều cách đặt tên biến. Ba phương pháp phổ biến nhất là upper camel case, lower camel case và dấu gạch dưới.
Trong JavaScript, hầu hết lập trình viên thích dùng lower camel case đặt tên biến:
firstName, surname, isAdmin
Khai báo biến trong JavaScript trông như sau:
var firstName = “Tony”;
Loại biến (trong trường hợp này var) theo sau tên biến, rồi dấu bằng, rồi giá trị muốn lưu trong biến.
Từ đầu tiên trong biến nên bắt đầu bằng chữ thường, ngay cả khi biến chỉ có một từ. Từ thứ hai và các từ tiếp theo nên bắt đầu bằng chữ hoa, như bạn thấy.
Mặc dù bạn có thể viết biến dùng phương pháp khác (như "first_name" dấu gạch dưới hoặc "FirstName" upper camel case), không phổ biến trong JavaScript.
Biến trong JavaScript phân biệt chữ hoa/thường (case sensitive). Nghĩa là firstName và firstname, dù chứa cùng ký tự cơ bản, được xử lý khác nhau.
Có vài từ gọi là "từ khóa dành riêng" (reserved words) không thể dùng làm tên biến. Đây là từ có chức năng đặc biệt trong JavaScript. Ví dụ, không thể đặt biến "class" hoặc "for", vì đã dùng trong ngôn ngữ.
Bạn có thể tìm danh sách từ khóa dành riêng JavaScript trên Mozilla Developer Network.
Dấu Chấm Phẩy (Semicolons)
Trong tiếng Anh, mọi câu kết thúc bằng dấu chấm; dấu chấm đầy đủ. Điều này báo cho chúng ta khi nào dừng đọc câu này và bắt đầu câu khác. Nếu quay lại ngày thơ, bạn có thể được nói câu là nơi tạm dừng và hít thở.
Chương trình máy tính không cần hít thở, nhưng cần biết câu lệnh tách ra như thế nào trong chương trình. Trong JavaScript, hầu hết câu lệnh kết thúc bằng dấu chấm phẩy:
var cookie = “Chocolate Fudge”;
Bạn không cần chỉ định dấu chấm phẩy sau bất kỳ câu lệnh khối (block statement) nào. Đây là câu lệnh như class, switch, do, if và for. Các câu lệnh này dùng ngoặc nhọn lưu mã:
function addNumbers(one, two) { return one + two; }
Trong mã này, bạn thấy kết thúc câu lệnh return bằng dấu chấm phẩy. Đó là vì nó trong hàm. Hàm không kết thúc bằng dấu chấm phẩy.
Kết Luận
Có nhiều quy tắc trong ngôn ngữ JavaScript. Mỗi quy tắc đảm bảo bạn viết mã cả bạn và trình duyệt có thể đọc. Nếu làm việc nhóm, đặc biệt quan trọng tuân thủ quy tắc cú pháp JavaScript.
Tóm tắt các quy tắc chính:
- Tất cả câu lệnh trong khai báo biến hoặc sau từ khóa như "for" hoặc "if" nên tách bằng khoảng trắng.
- Câu lệnh bao quanh trong khối mã (ví dụ "if", "else") nên thụt lề.
- Tên biến nên dùng lower camel case và không bằng từ khóa dành riêng.
- Mọi câu lệnh, trừ câu lệnh khối, nên kết thúc bằng dấu chấm phẩy.
- // dùng cho chú thích một dòng và /* */ cho chú thích nhiều dòng.
Bây giờ bạn đã sẵn sàng bắt đầu lập trình JavaScript như nhà phát triển chuyên nghiệp!