Khuôn khổ trình bày mã lệnh JavaScript

- Trong JavaScript, vấn đề mẫu mã "trình bày mã lệnh" rất đa dạng.

- Ví dụ: Bên dưới là hai đoạn mã với cùng một chức năng, nhưng chúng lại có cách trình bày khác nhau về số lượng khoảng trắng, xuống dòng, ....

<script>
    var a = "Xin chào";

    var b = "Lập Trình Web";


    var c = a + " " + b;

    document.write(c);

</script>

Xem ví dụ

<script>
    var a =   "Xin chào";
    var b    =
       "Lập Trình Web";

    var     c =   a 

      + " " 
    +      b;
    document.write(c);
</script>

Xem ví dụ

- Tuy nhiên, trong vô số mẫu trình bày mã lệnh thì lại có những mẫu được đại đa số lập trình viên sử dụng. Những mẫu này đã tạo nên một "khuôn khổ trình bày mã lệnh" trong JavaScript.

- Việc viết mã lệnh dựa theo khuôn khổ trình bày sẽ mang lại những ưu điểm như:

Mã lệnh sạch đẹp, rõ ràng, dễ nhìn.
Vì sử dụng chung một khuôn khổ trình bày nên ta sẽ dễ dàng xem tài liệu mã nguồn.
Hạn chế các ký tự dư thừa, giúp giảm dung lượng của tập tin, cải thiện tốc độ tải trang.
. . . .

- Ở bài hướng dẫn này, tôi sẽ giới thiệu đến các bạn những mẫu trình bày mã lệnh dựa theo một khuôn khổ chung.

1) Vấn đề đặt tên biến

- Ngày nay, tiếng Anh đã trở thành một ngôn ngữ phổ thông.

- Do đó, các lập trình viên chuyên nghiệp thường sử dụng tiếng Anh để đặt tên cho biến.

- Tên biến bằng tiếng Anh sẽ dễ nhìn và dễ hiểu hơn so với tên biến bằng tiếng Việt.

- Ví dụ: Giữa var apple & var traitao thì chắc bạn cũng thấy cái nào dễ nhìn hơn rồi đúng không !?

- Đối với những tên biến được ghép bởi nhiều từ thì ký tự đầu tiên của mỗi từ nên được viết hoa
(riêng ký tự đầu tiên của từ đầu tiên thì không cần viết hoa)

- Ví dụ:

Thay vì viết var firstname thì ta nên viết là var firstName
Thay vì viết var myfirstname thì ta nên viết là var myFirstName

2) Vấn đề khoảng cách xung quanh các toán tử

- Ta nên thêm một dấu khoảng trắng xung quanh các toán tử + - * / =

- Ví dụ: Thay vì viết var result=a+b*(c-d)/2 thì ta nên viết là var result = a + b * (c - d) / 2

- Ngoài ra, phía sau dấu phẩy cũng nên thêm một dấu khoảng trắng.

- Ví dụ: Thay vì viết var mobile = ["HTC","Nokia","SamSung"]; thì ta nên viết là var mobile = ["HTC", "Nokia", "SamSung"];

3) Vấn đề trình bày một hàm (function)

- Không nên viết liên tục hàm trên một dòng mà ta nên viết trên nhiều dòng, như thế sẽ dễ nhìn hơn:

Phía sau dấu ngoặc nhọn mở của hàm cần được xuống dòng.
Phía trước dấu ngoặc nhọn đóng của hàm cần được xuống dòng.
Mỗi câu lệnh bên trong hàm cần được xuống dòng.

- Mỗi câu lệnh bên trong hàm nên thụt đầu dòng bốn dấu khoảng trắng.

- Ví dụ:

function hello(){
    var firstName = "Nhân";
    var lastName = "Nguyễn";
    var middleName = "Thành";
    var fullName = lastName + " " + middleName + " " + firstName;
    alert("Tên đầy đủ của tôi là: " + fullName);
}

4) Vấn đề trình bày một mảng (array)

- Phía sau dấu phẩy dùng để ngăn cách các phần tử mảng cần có một dấu khoảng trắng.

- Ví dụ:

var mobile = ["HTC", "Nokia", "SamSung", "LG", "Apple"];

- Nếu câu lệnh khai báo mảng quá dài dẫn đến việc không thể hiển thị hết trên một dòng thì ta nên ngắt từng phần tử xuống dòng.

- Ví dụ:

var model = [
    "HTC One SV",
    "HTC Desire 728G LTE",
    "Apple Iphone 7S",
    "Nokia 1208",
    "SamSung Galaxy 5",
    "SamSung Galaxy J7 Pro"
];

5) Vấn đề trình bày một đối tượng (object)

- Phía sau dấu hai chấm dùng để ngăn cách tên thuộc tính và giá trị thuộc tính, cần có một dấu khoảng trắng.

- Mỗi cặp tên thuộc tính & giá trị thuộc tính nên được ngắt xuống dòng để dễ phân biệt từng thuộc tính của đối tượng.

- Ví dụ:

var SinhVien = {
    name: "Nguyễn Thành Nhân",
    year: 1993,
    city: "Cần Thơ",
    phone: 0939xxxxxx
};

6) Vấn đề trình bày vòng lặp và lệnh điều kiện

- Vấn đề trình bày các vòng lặp for, while, do while, .... và các lệnh điều kiện if else cũng gần tương tự như cách trình bày mảng hoặc đối tượng.

- Ta cần quan tâm đến vấn đề thụt đầu dòng cho các câu lệnh, khoảng cách phía sau dấu phẩy và dấu chấm phẩy, ....

- Ví dụ: Vòng lặp for

for(var i = 1; i < 10; i++){
    document.write("Tài liệu hướng dẫn học");
    document.write(" ");
    document.write("Lập Trình Web");
}

- Ví dụ: Vòng lặp while

while(i < 10){
    document.write("Tài liệu hướng dẫn học");
    document.write(" ");
    document.write("Lập Trình Web");
    i++;
}

- Ví dụ: Vòng lặp do while

do{
    document.write("Tài liệu hướng dẫn học");
    document.write(" ");
    document.write("Lập Trình Web");
    i++;
}while(i < 10);

- Ví dụ: Lệnh if ... else

if(number > 100){
    document.write("Tài liệu hướng dẫn học");
    document.write(" ");
    document.write("HTML");
}else{
    document.write("Tài liệu hướng dẫn học");
    document.write(" ");
    document.write("CSS");
}

- Ví dụ: Lệnh if ... else if .... else

if(number < 100){
    document.write("HTML");
}else if(number > 100){
    document.write("CSS");
}else{
    document.write("JavaScript");
}

7) Câu lệnh dùng để nhúng tập tin JavaScript

- Đối với những bạn mới tìm hiểu về JavaScript, họ thường viết câu lệnh nhúng tập tin JavaScript với cú pháp đầy đủ như sau:

<script type="text/javascript" src="đường dẫn đến tập tin javascript"></script>

- Tuy nhiên, phần type="text/javascript" là không cần thiết.

- Do đó, ta có thể viết lại câu lệnh dùng để nhúng tập tin JavaScript vào trang web như sau:

<script src="đường dẫn đến tập tin javascript"></script>

8) Vấn đề đặt tên cho tập tin

- Hầu hết các máy chủ web (Apache, Unix, ....) đều có phân biệt trường hợp chữ in hoa và chữ thường đối với tên tập tin (ví dụ như banana.png và Banana.png là hai tập tin khác nhau)

- Do đó để nhất quán, tránh tình trạng nhập sai tên tập tin thì ta nên đặt tất cả các ký tự trong tên tập tin bằng chữ thường.