Trong bài này, chúng ta sẽ tìm hiểu những thành phần căn bản và cũng được sử dụng nhiều nhất trong JavaScript. JavaScript là một ngôn ngữ hay và ứng dụng vô cùng mạnh mẽ, hy vọng các bạn sẽ làm quen với JavaScript một cách thuận tiện nhất. Mọi thiếu sót mong nhận được góp ý từ các bạn.

Mục tiêu:

• Biết được mục đích cũng như cách thức sử dụng javascript trong tài liệu html.
• Nắm được cú pháp trong javascript, các khái niệm trong lập trình cũng như các đối tượng cơ bản.
• Sử dụng được các khối lệnh cơ bản trong javascript.

 

1. Biến và một số khái niệm của biến

a. Khai báo biến:

Ở javascript phiên bản trước 2015, thì khai báo biến có 2 cách:

var x = 123; //1. Sử dụng để khai báo biến cục bộ và toàn cục
y = 345;   //2. Không cần từ khóa var và y sẽ là biến toàn cục

Để truy xuất tới các thuộc tính và phương thức của biến toàn cục, chúng ta chỉ cần đơn giản gọi: window.variable

b. Giá trị của biến:

• Khi khai báo biến chúng ta cũng có thể gán giá trị theo như mục khai báo biến, và javascript sẽ tự động nhận biết kiểu dữ liệu tương ứng.
• Với khai báo biến bất kỳ, khi không gán giá trị cho biến thì mặc định nó sẽ có giá trị là undefined, là một kiểu giá trị đặc biệt trong javascript.
• Song song với undefined, một kiểu giá trị gọi là null tức là gán giá trị rỗng. Khi xử lý biến có giá trị null như là một số thì giá trị của nó sẽ được xem là 0, và khi xử lý với nó như là một biến boolean thì giá trị của nó sẽ là false.

c. Tầm vực của biến

• Khi khai báo một biến nằm ngoài tất cả các hàm(function), thì nó sẽ là biến toàn cục, và ngược lại với các biến khai báo trong hàm. Biến toàn cục có thể sử dụng được ở trong tất cả các function khác, còn các biến khai báo trong function thì chỉ sử dụng được ở trong function đó.
• Ở trong javascript, các phiên bản trước 2015 không có định nghĩa cho tầm vực của một khối lệnh, các biến được khai báo ở trong các khối lệnh đều có thể sử dụng được ở ngoài khối lệnh, giả sử như 1 biến vòng lặp trong một vòng lặp for, khi thoát khỏi vòng lặp chúng ta vẫn có thể truy xuất tới giá trị của biến vòng lặp đó. (Hiện tại javascript đã có thêm định nghĩa về khối lệnh và một kiểu khai báo dữ liệu mới để tránh chuyện này xảy ra ở trong phiên bản javascript mới nhất. ECMAScript6).

d. Khái niệm hoisting của biến

• Khi code sử dụng javascript, có một khái niệm cũng khá là đặc biệt là hoisting. Ở đây mình không dịch sang tiếng Việt để các bạn có thể nắm được cái ý nghĩa của nó thông qua khái niệm của nó luôn.
• Với khái niệm này, javascript quy định, mọi khai báo biến đều được đưa lên trên cùng của một tầm vực, toàn cục(bên ngoài các function) hoặc cục bộ(ở từng function). Tức là mặc kệ bạn khai báo biến ở vị trí nào trong 1 hàm, thì tự động nó sẽ kéo lên trên cùng của hàm để khai báo(javascript tự động thực hiện ngầm cho khái niệm này).

Nếu theo như chúng ta đọc thì đáng ra ở chỗ undefined phải là ‘Global scope’. Nhưng javascript lại không dịch như vậy, với javascript, đoạn code trên sẽ được hiểu như sau:

2. Các kiểu dữ liệu và cấu trúc của dữ liệu

• Giá trị của biến có thể gán ngay trong dòng khai báo hoặc sau khi khai báo và đặc biệt chúng ta không cần chỉ rõ kiểu dữ liệu của biến lúc khai báo. Do đó, để xác định biến có kiểu dữ liệu là gì ta phải dựa vào giá trị mà nó đang có. Trong quá trình sử dụng, biến có thể được thay đổi kiểu dữ lieu:

• Javascript hỗ trợ rất nhiều kiểu dữ liệu với chỉ một khai báo var, ở mức độ cơ bản, chúng ta chỉ cần nắm các kiểu dữ liệu sau:

Boolean: Kiểu logic, gồm 2 giá trị là true và false

Number: Dùng để chứa dữ liệu là số nguyên, số thực (var age = 18; var length = 18,54)

String: Chuỗi ký tự, được bọc bởi cặp nháy đơn (‘…’) hay nháy đôi (“…”) (vd: var answer = “It’s alright”)

Object: là một đối tượng nói chung với các thuộc tính và phương thức riêng.

Ví dụ: 
var userDetails = {             //Có thể truyền biến vào làm giá trị
    firstName: “Tran Cong”,     //thuộc tính của đối tượng
    lastName: “Thach”,
    age: age
};

Array: mảng chứa tập hợp nhiều giá trị. (vd: var listInf = [name, “HCMUS”, 21]; )

null: là một từ khóa đặc biệt trong javascript, gán giá trị của biến là rỗng(null). null viết thường toàn bộ.

undefined: cũng đã được đề cập tới trong phần giá trị của biến, khi một biến được khai báo mà không gán giá trị thì mặc định javascript sẽ gán giá trị cho biến đó là undefined.

3. Các toán tử cơ bản trong javascript

4. Khai báo hàm trong javascript

• Giá trị trả về của hàm:
  • Khi một hàm thực thi xong lệnh return hàm đó sẽ kết thúc và dừng thực thi các lệnh sau đó trong hàm.
  • Nếu một hàm được gọi thực thi trong một dòng lệnh, hàm sẽ trả về kết quả để thực thi code trong dòng lệnh đó.
• Thời điểm 1 hàm được thực thi là khi:
  • Sự kiện xảy ra, vd: người dùng kích chuột
  • Hàm được gọi từ Javascript code
  • Tự động thực thi (self-invoked).//Ví dụ
• Cặp dấu ngoặc () thực thi hàm, gọi hàm không có cặp dấu ngoặc () sẽ trả về định nghĩa của hàm:
• Về tham số truyền vào hàm sẽ được truyền vào qua tên biến mà không cần khai báo var như các ngôn ngữ lập trình khác, và một điều đặc biệt là với javascript, khi khai báo hàm với một số lượng giới hạn tham số truyền vào, thì bạn cũng có thể gọi hàm đó với số lượng tham số truyền vào lớn hơn, javascript sẽ tự động hiểu và chỉ lấy đúng số lượng tham số theo khai báo hàm đã có.

5. Đối tượng (Object) trong javascript

• Trong Javascript đối tượng là một khái niệm trừu tượng thể hiện cho một đối tượng cụ thể và nó có sẵn một số đối tượng như Date, Number. Ngoài các đối tượng này thì lập trình viên có thể tự tạo một đối tượng theo ý của mình dựa vào yêu cầu của ứng dụng. Object trong javascript cũng là một biến, nhưng có thể chứa được nhiều giá trị.
• Các cách khai báo một đối tượng trong javascript:

5.1 Sử dụng toán tử new

5.2 Khai báo giá trị trực tiếp

5.3 Thêm thuộc tính sau khi khai báo đối tượng

5.4 Định nghĩa phương thức ở trong khai báo đối tượng

5.5 Thêm phương thức sau khi khai báo đối tượng

Sau khi khai báo thuộc tính hoặc phương thức cho object, ta có thể gọi lại các giá trị này thông qua toán tử “.” (vd: Comment.addComment(), Comment.content,…)

6. Khối lệnh điều khiển

    6.1 Khối lệnh rẽ nhánh

        a. Khối lệnh if…else:

       b. Khối lệnh switch – case:

6.2 Khối lệnh điều khiển

a. Câu lệnh for

• Sử dụng trong việc lặp lại một công việc cho đến khi giá trị điều kiện là false.
• Ví dụ:

for (var i = 0, len = cars.length; i < len; i++) {
    //do something;
}

b. Câu lệnh while

• Trong khi điều kiện condition còn mang giá trị true, thì khối lệnh tiếp tục được thực thi

while (condition){
    //do something
}

c. Câu lệnh do…while

• Với while, code xử lý trong vòng lặp sẽ được thực thi sau khi kiểm tra điều kiện lặp, còn với do…while, khối lệnh sẽ được thực thi trước khi kiểm tra điều kiện lặp

===============================================================

Bonus

i/ Chú thích mã nguồn trong JS:

Cú pháp chú thích mã nguồn trong javascript cũng tương tự như trong một số ngôn ngữ lập trình khác như C++,…

// Chú thích một dòng

/* Chú thích nhiều dòng
Nằm trong một khối này sẽ được xem là chú thích, Và không bị lỗi cú pháp
*/

ii/ Vị trí đặt code Javascript trong tài liệu HTML

• Trong bài này, chúng ta tìm hiểu javascript với mục đích tương tác với tài liệu html, có thể lấy dữ liệu trên file html, hoặc là chèn các dòng code html vào tài liệu html, và một số chức năng thú vị khác. Điều đầu tiên chúng ta phải chèn code javascript vào tài liệu html để sử dụng.
• Chúng ta có thể sử dụng cặp thẻ trong HTML để chèn code javascript hoặc nhúng link file javascript bên ngoài vào code HTML. Code javascript có thể chèn cả trong cặp thẻ <head></head> hoặc trong thẻ <body></body>, nhưng chúng ta nên đặt code chung một nơi để nhất quán và rõ ràng.
• Mỗi câu lệnh trong javascript được tạo thành từ nhiều thành phần như biến, từ khóa, giá trị, phép toán, biểu thức, hàm… và được phân cách với câu lệnh sau đó bằng dấu chấm phẩy quen thuộc (;).

 

Trần Công Thạch