Học javascript cơ bản - P2

Ở phần trước của bài học này các bạn đã tìm hiểu về những kiến thức cơ bản nhất trong JavaScript bao gồm cách nhúng và chạy mã JavaScript, cách tạo một hộp thoại cảnh báo alert, làm việc với biến và kiểu dữ liệu. Ở phần hai cũng là phần cuối của bài học này các bạn sẽ hoàn tất các kỹ năng cơ bản trong JavaScript. Trong bài học này sẽ bao gồm những phần sau:

• Toán tử (operator)
• Hàm (function)
• Vòng lặp (loop)
• Cấu trúc điều khiển (control structure)

JavaScript - Toán Tử (Operator)

JavaScript cung cấp các toán tử hữu dụng để thực hiện việc tính toán. Các toàn tử phổ biến trong JavaScript gồm có:

Toán Tử Gán Giá Trị (Assignment Operator)

Toán tử sử dụng ký tự = để gán giá trị cho biến.

Ở ví dụ sau đây chúng ta sử dụng toán tử để gán giá trị cho các biến a, b và c.

var a = 100;
a = 200;
var b = 500;
b = 600;
var c = a + b;

Toán Tử Số Học (Arithmetic Operator)

Các toán tử số học cho phép chúng ta thực hiện các phép toán số học như cộng (+), trừ (-), nhân (*), chia (/), tính số dư (%)...

var a = 5, b = 2;
console.log(a + b); // 7
console.log(a - b); // 3
console.log(a * b); // 10
console.log(a / b); // 2.5
console.log(a % b); // 1 = số dư của phép chia 5:2

Ngoài ra còn có toán tử ++ để tăng một đơn vị và -- để giảm một đơn vị. Ví dụ:

var a = 5, b = 2;
console.log(a++); // 6
console.log(b++); // 3

Trong toán tử tăng (giảm) 1 đơn vị như trên còn có tăng trước (toán tử được đặt trước tên biến) hoặc tăng sau (toán tử đặt sau tên biến).

Tăng trước sẽ tăng giá trị của biến rồi mới trả về giá trị. Ví dụ sau sử dụng toán tử tăng trước cho biến a và gán giá trị trả về cho biến b:

var a = 5;
// Tăng biến a 1 đơn vị trước rồi trả về giá trị 6, gán giá trị trả về (6) cho biến b
var b = ++a;
console.log(b); // 6

Ngược lại với tăng trước là tăng sau, trả về giá trị của biến trước rồi mới tăng giá trị của biến lên một đơn vị:

var a = 5;
// Trả về giá trị của a trước, gán giá trị trả về (5) cho biến b rồi mới tăng biến a 1 đơn vị
var b = a++;
console.log(b); // 6

Trong cả hai trường hợp thì giá trị của biến a đều là 6 tuy nhiên giá trị biến b là khác nhau.

Giảm trước và giảm sau tương tự như tăng trước và tăng sau.

Ngoài ra còn có toán tử += tương tự như ++ nhưng số lượng đơn vị tăng lên cho giá trị của biến là tuỳ ý, ví dụ:

var a = 5;
a += 10;
console.log(a); // 15

Các toán tử khác như -=, *=, /= có cách sử dụng tương tự như +=.

Toán Tử Chuỗi (String Operator)

JavaScript cho phép chúng ta thực hiện nối chuỗi sử dụng toán tử +:

var a = "Hello";
var b = a + " " + "World!";
console.log(b); // Hello World!

Lưu ý khi sử dụng toán tử + để nối chuỗi với số thì kết quả cuối sẽ là chuỗi:

var a = "Hello", b = "5", c;

c = a + 2;
console.log(c); // Hello2
typeof c; // "string"

c = b + 2;
console.log(c); // 52
typeof c; // "string"

Ngoài ra chúng ta cũng có thể sử dụng toán tử += với chuỗi như sau:

var a = "Hello";
a += " World!";
console.log(a); // Hello World!

Tuy nhiên chúng ta không áp dụng -=, *=, /= cho chuỗi.

Toán Tử So Sánh (Comparison Operators)

Toán tử so sánh gồm có so sánh ngang bằng giá trị ==:

```javascript var currentYear = 2018; console.log(currentYear == 2018); // true console.log(currentYear == 2017); // false

So sánh ngang bằng giá trị và kiểu dữ liệu `===`:

```javascript
var currentYear = 2018;
console.log(currentYear === 2018); // true
console.log(currentYear === "2018"); // false

Tương tự là hai toán tử so sánh khác giá trị !=, so sánh khác giá trị và kiểu dữ liệu !==:

```javascript var currentYear = 2018; console.log(currentYear != 2018); // false console.log(currentYear != 2017); // true console.log(currentYear !== "2018"); // true console.log(currentYear !== 2018); // false

Các toán tử so sánh khác như `>`, `<`, `<=` và `>=`:

```javascript
var a = 5;
console.log(a > 10); // false
console.log(a < 10); // true
console.log(a >= 10); // false
console.log(a <= 10); // true
console.log(a >= 5); // true
console.log(a <= 5); // true

Toán Tử Logic

Các toán tử logic thực hiện các phép toán logic gồm có: logic và (&&), logic hoặc (||) và logic phủ định !:

var a = true;
var b = false;
console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false
console.log(!b); // true

Hàm (Function)

Hàm dùng để nhóm một số các đoạn câu lệnh lại với nhau để có thể sử dụng lại được nhiều lần mà không cần phải viết lại từng câu lệnh này.

Ví dụ sau đây khai báo một hàm với tên sayHello:

function sayHello() {
    console.log("Hello");
}

Để chạy các đoạn câu lệnh trong hàm chúng ta sẽ cần gọi hàm:

sayHello();
sayHello();
sayHello();

Việc gọi hàm đơn giản là viết tên hàm và theo sau bởi cặp dấu ngoặc().

Chúng ta sử dụng tham số để truyền vào giá trị cho hàm. Hàm sayHello() sau đây được định nghĩa với một tham số với tên name:

function sayHello(name) {
    console.log("Hello " + name + "!");
}

Khi gọi hàm bạn sẽ cần tryền giá trị cho tham số này:

sayHello("JavaScript"); // Hello JavaScript!

Các biến được định nghĩa trong hàm sẽ có phạm vi sử dụng chỉ trong nội bộ hàm đó:

var name = "World"; // biến ngoài hàm còn gọi là biến global

function sayHello() {
    var name = "JavaScript"; // biến sử dụng trong nội bộ trong hàm còn gọi là biến local
    console.log(name);
    console.log("Hello " + name + "!");
}

sayHello(); // JavaScript - Hello JavaScript!

console.log(name); // World

Nếu bạn sử dụng một biến trong hàm mà chưa khai báo JavaScript sẽ lấy giá trị biến được định nghĩa bên ngoài:

var name = "World";

function sayHello() {
    console.log(name); // hiển thị giá trị biến name ngoài hàm
    name = "JavaScript"; // thay đổi giá trị biến name ngoài hàm
    console.log("Hello " + name + "!");
}

sayHello(); // World - Hello JavaScript!

console.log(name); // JavaScript

Cấu Trúc Điều Khiển

Cấu trúc điều khiển dùng để điều khiển luồng thực thi của chương trình. Các cấu trúc điều khiển phổ biến của JavaScript gồm có: if, else và elseif

Câu lệnh If

Câu lệnh if bao gồm một biểu thức điều kiện và đoạn mã sẽ được thực thi khi điều kiện đó nhận giá trị là true.

Ví dụ:

var a = 10;
if (a % 2 == 0) {
    console.log("a là số chẵn");
}

Trong câu lệnh if trên chúng ta có biểu thức điều kiện để so sánh số dư của phép chia a/2. Nếu biểu thức này trả về true thì code bên trong câu lệnh if mới được chạy.

Câu Lệnh If...Else

Câu lệnh if...else sẽ bổ sung thêm đoạn code sẽ được thực hiện nếu biểu thức điều kiện của câu lệnh if trước đó trả về false.

Ví dụ:

var a = 10;
if (a % 2 == 0) {
    console.log("a là số chẵn");
} else {
    console.log("a là số lẻ");
}

Câu Lệnh If...ElseIf...Else

Câu lệnh if...elseif...else bổ sung thêm biểu thức điều kiện cho câu lệnh if đồng thời thêm đoạn code sẽ chạy nếu tất cả các biểu thức điều kiện trong if và elseif đều trả về giá trị false.

Ví dụ:

var a = 10;
if (a % 4 == 0) {
    console.log("a chia hết cho 4");
} elseif (a % 2 == 0) {
    console.log("a là số chẵn");
}
} else {
    console.log("a là số lẻ");
}

Câu Lệnh Switch

Câu lệnh swift so sánh giá trị của một biểu thức cho trước với các giá trị khác nhau, mỗi giá trị này đại diện cho một case (một trường hợp). Nếu giá trị của biểu thức trả về trùng với case cho trước thì đoạn code bên trong case sẽ được chạy.

Ví dụ:

var todayNumber = new Date().getDay(); // trả về giá trị từ 0 tới 6 ứng với Chủ Nhật cho tới Thứ Bảy
var todayText;

switch (today) {
    case 0:
        todayText = "Chủ Nhật";
        break;
    case 1:
        todayText = "Thứ Hai";
        break;
    case 2:
        todayText = "Thứ Ba";
        break;
    case 3:
        todayText = "Thứ Tư";
        break;
    case 4:
        todayText = "Thứ Năm";
        break;
    case 5:
        todayText = "Thứ Sáu";
        break;
    case 6:
        todayText = "Thứ Bảy";
}

console.log(todayText);

Break Case

Ở cuỗi mỗi một case bạn lưu ý cần thêm câu lệnh break; để chấm dứt case. Điều này giúp trong trường hợp rơi vào một case đúng, JavaScript sẽ không kiểm tra các case tiếp theo (các case này đều sai). Điều này sẽ giúp giảm bớt thời gian chạy chương trình.

Bạn có thể không sử dụng break ở case cuối cùng vì nếu như case này sai thì cũng không còn case nào khác nữa để kiểm tra.

Case Mặc Định

Bạn có thểm thêm case mặc định và case này sẽ được chạy nếu tất cả các case cho trước không đúng.

var todayNumber = new Date().getDay(); // trả về giá trị từ 0 tới 6 ứng với Chủ Nhật cho tới Thứ Bảy
var todayText;

switch (today) {
    case 1:
        todayText = "Thứ Hai";
        break;
    case 2:
        todayText = "Thứ Ba";
        break;
    case 3:
        todayText = "Thứ Tư";
        break;
    case 4:
        todayText = "Thứ Năm";
        break;
    case 5:
        todayText = "Thứ Sáu";
        break;
    case 6:
        todayText = "Thứ Bảy";
        break;
    default:
        todayText = "Chủ Nhật";
}

console.log(todayText);

Vòng Lặp

Vòng lặp JavaScript cho phép chúng ta thực hiện lặp đi lặp lại một hoặc nhiều câu lệnh một số lần cho trước.

Có hai kiểu vòng lặp là vòng lặp while và vòng lặp for:

Vòng Lặp While

Với vòng lặp while thì code bên trong vòng lặp được chạy lặp lại nếu một biểu thức cho trước trả về giá trị true:

var a = 0;
while (a < 10) {
    console.log("Hello World!");
    a++;
}

Vòng lặp while ở trên kiểm tra giá trị của biểu thức a < 10 trước mỗi lần chạy code bên trong vòng lặp. Nếu giá trị biểu thức trả về là true thì code trong vòng lặp mới được chạy, ngược lại vòng lặp sẽ bị chấm dứt.

Kết quả của việc chạy vòng lặp trên đó là dòng chữ Hello Word! sẽ được hiển thị 10 lần.

Vòng Lặp For

Cú pháp vòng lặp for phức tạp hơn while một chút. Với vòng lặp này thì chúng ta sẽ cần tới 3 biểu thức trước để vòng lặp:

• Biều thức đầu dùn gán giá trị cho biến đếm, biểu thức này chỉ chạy trước vòng lặp đầu tiên.
• Biểu thức điều kiện dùng kiểm tra giá trị của biến đếm với giá trị cho trước, nếu việc kiểm tra này trả về true thì code trong vòng lặp sẽ được chạy.
• Một biểu thức thứ 3 sẽ được chạy ở cuối mỗi vòng lặp.

Ví dụ vòng lặp for sau đây:

for (var i = 0; i < 10; i++) {
    console.log("Hello World!");
}

Thì chúng ta có 3 biểu thức tương ứng:

• var i = 0: Gán giá trị cho biến đếm i. Biểu thức này chỉ chạy lần đầu.
• i < 10: Biểu thức điều kiện được kiểm tra trước mỗi vòng lặp. Nếu trả về đùng thì code trong vòng lặp sẽ được chạy ngược lại vòng lặp sẽ bị chấm dứt
• i++: Biểu thức cuối sẽ được chạy sau mỗi vòng lặp và ngay trước vòng lặp kế tiếp.

Việc chạy vòng lặp for như ở trên sẽ hiển thị 10 lần dòng chữ Hello World!.

Chấm Dứt Vòng Lặp (Break)

Bạn có thể chấn dứt việc chạy vòng lặp tại bất cứ thời điểm nào nếu muốn nhờ sử dụng câu lệnh break.

var a = 0;
while (a < 10) {
    console.log("Hello World!");
    if (a == 5) {
        break;
    }
    a++;
}

Vòng lặp while trên sẽ chỉ hiển thị dòng chữ Hello World! 5 lần vì nó bị chấm dứt tại giá trị a == 5.

Bỏ Qua Vòng Lặp

Bạn có thể bỏ qua một vòng lặp nào đó sử dụng câu lệnh continue. Ví dụ:

for (var i = 0; i < 10; i++) {
    if (i == 5) {
        console.log("Khôgn cần chạy vòng này do i = 5. Số dư là 0");
        continue;
    }
    console.log("Số dư của i cho 5 là: ", (i % 5));
}

Khi chạy vòng lặp for trên sẽ JavaScript sẽ bỏ qua một vòng ứng với giá trị i==5.

Tiếp Theo

Ở phần 2 này bạn đã được tìm hiểu các kiến thức cơ bản trong JavaScript. Tuy nhiên JavaScript là một ngôn ngữ rất mạnh mẽ và còn rất nhiều điều thú vị nữa để các bạn có thể khám phá. Trong các bài viét tiếp theo tôi sẽ hướng dẫn các bạn tìm hiểu về các tính năng nâng cao trong JavaScript giúp bạn có thể viết được các ứng dụng JavaScript có thể sử dụng trong thực tế.