Học JavaScript Cơ Bản
JavaScript Là Gì JavaScript là một loại ngôn ngữ máy tính được sử dụng chủ yếu cùng với phần mềm duyệt web để tạo các hiệu ứng cho trang web. Code JavaScript thường được nhúng (embed) trong trang HTML và đặt bên trong thẻ <script></script> ví dụ như sau: <!DOCTYPE ...
JavaScript Là Gì
JavaScript là một loại ngôn ngữ máy tính được sử dụng chủ yếu cùng với phần mềm duyệt web để tạo các hiệu ứng cho trang web.
Code JavaScript thường được nhúng (embed) trong trang HTML và đặt bên trong thẻ <script></script> ví dụ như sau:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
// Code JavaScript...
</script>
</body>
</html>
Cách thông dụng nhất để chạy mã JavaScipt đó là sử dụng trình duyệt (Chrome, Firefox, Internet Explorer, Safari...). Trong bài học này tôi sẽ sử dụng trình duyệt Chrome, bạn cũng nên sử dụng trình duyệt này vì nó có nhiều chức năng khá tiện dụng cho việc học lập trình web nói chung và JavaScript nói riêng. Phần sau đây bạn sẽ tạp một ứng dụng đầu tiên với JavaScript có tên là Hello World.
Ứng Dụng Hello World
Chúng ta sẽ bắt đầu tìm hiểu các tính năng của JavaScript bằng việc tạo một ứng dụng đơn giản có tên là Hello World. Trên máy tính của bạn, mở chương trình soạn thảo văn bản text editor (Notepad với Windows hay TextEdit trên Mac OSX) và tạo một file chứa mã JavaScript (hay JavaScript code) như sau:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
alert("Xin chào");
</script>
</body>
</html>
Tiếp theo lưu tập tin trên với tên hello_world.html rồi sau đó mở tập tin này trên trình duyệt bằng cách nhấp đúp chuột lên biểu tượng tập tin (máy tính sẽ tự động mở tập tin này trên trình duyệt). Bạn sẽ thấy trình duyệt hiển thị một hộp thoại cảnh báo (alert):
Ngoài cách chạy mã JavaScript như trên thì bạn còn có thể sử dụng công cụ dành cho nhà phát triển để chạy. Điểm đặc biệt trong cách này đó là bạn có thể chạy JavaScript ở trên bất cứ website nào mà không cần phải tạo tập tin HTML trên máy.
Chạy Mã JavaScript Tại Bất Kỳ Trang Web Nào
Mở trình duyệt Chrome và bạn bấm phím F12 hoặc tổ hợp phím control + J (thay bằng command + option + J nếu bạn sử dụng Mac OS X) để mở công cụ dành cho nhà phát triển (web developer tools). Ở công cụ này bạn click chọn tab Console và nhập vào dòng lệnh JavaScript ở trên:
Sau khi gõ Enter bạn sẽ thấy một hộp thoại cảnh báo alert hiển như như sau:
Với cách chạy code JavaScript như thế này thì bạn cũng không cần phải đưa mã JavaScript vào bên trong cặp thẻ <script></script> như trước đây. Rất tiện phải không nào.
Cú Pháp JavaScript
Cú pháp JavaScript bao gồm tập hợp các quy luật mà lập trình viên cần nắm vững và tuân theo để viết code JavaScript sao cho đúng. Nếu như trong code JavaScript bạn bạn viết sai cú pháp ở dòng nào đó thì khi chạy trình duyệt sẽ báo lỗi ở dòng này và dừng việc chạy các câu lệnh tiếp sau đó.
Ở các ví dụ từ đây về sau chúng ta sẽ sử dụng hàm console.log() để hiển thị các giá trị trên tab Console của công cụ web developer. Bạn cũng nên mở công cụ này để chạy code trong các ví dụ mẫu.
Câu Lệnh JavaScript
Một câu lệnh JavaScript được dùng để thực hiện một tác vụ nào đó và câu lệnh kết thúc bởi dấu ;:
console.log("Xin chào");
1 + 1;
console.log("Tạm " + " biệt");
Ở trên chúng ta có hai câu lệnh trong đó câu lệnh thứ hai sẽ yêu cầu máy tính thực hiện phép toán cộng hai số đơn giản. Mặc dù chúng ta không sử dụng kết quả trả về từ phép toán này tuy nhiên 1 + 1 vẫn được coi là một câu lệnh vì nó khiến máy tính thực hiện tác vụ tính toán tổng hai số.
Ngoài ra thì bạn cũng lưu ý trong JavaScript thì chúng ta có thể nối các chuỗi với nhau sử dụng toán tử +:
console.log("Tạm " + "biệt"); // tương đương với: console.log("Tạm biệt");
Biến và Khai Báo Biến
Biến được sử dụng để lưu trữ dữ liệu của chương trình.
Trước khi sử dụng biến thì chúng ta cần khai báo biến. Việc khai báo biến giúp JavaScript biết rằng biến này tồn tại. Để khai báo một biến bạn sử dụng từ kháo var:
var a;
Sau khi khai báo biến bạn có thể gán giá trị cho biến:
var a; a = 100; console.log(a); // 100
Bạn có thể vừa thực hiện việc khai báo và vừa gán giá trị trong một câu lệnh duy nhất:
var a = 100;
Ở ví dụ trước đây, chúng ta có thể sử dụng biến để lưu kết quả tính tổng 2 số như sau:
var a = 1 + 1;
console.log("Tổng của 1 + 1 là: " + a);
Bạn lưu ý tên biến được khai báo có thể bao gồm các chữ cái in hoa, iin thường, các chữ số, một số ký tự đặc biệt như $ hoặc _ nhưng không được bắt đầu bởi chữ số:
var a_100; // hợp lệ var A_100; // hợp lệ var 100a; // không hợp lệ báo lỗi: Uncaught SyntaxError: Invalid or unexpected token
Ngoài ra JavaScript phân biệt tên biến theo chữ in thường và in hoa nên hai biến a_100 và A_100 là khác nhau:
var a_100 = 100; var A_100 = 500; console.log(a_100); // Hiển thị: 100 console.log(A_100); // Hiển thị: 500
Chú Thích trong JavaScript
Chú thích là một đoạn giải thích về ý nghĩa của một câu lệnh hay một đoạn câu lệnh (gồm nhiều câu lệnh khác nhau) giúp các lập trình viên khác khi đọc source code dễ dàng có thể hiểu được. Khi chạy chương trình, JavaScript sẽ bỏ qua các chú thích.
Chú thích trong JavaScript có thể được viết theo hai cách khác nhau như sau:
// Chú thích 1 dòng /* Chú thích nhiều dòng */
Sử dụng // để tạo chú thích dài 1 dòng và /* ..*/ đối với chú thích dài nhiều dòng.
Kiểu Dữ Liệu
Trong phần này chúng ta sẽ làm quen với các kiểu dữ liệu phổ biến sau trong JavaScript:
- Kiểu Number
- Kiểu String
- Kiểu Boolean
- Kiểu Array
Kiểu Number
Kiểu number trong JavaScript dùng để biểu diễn các số tự nhiên và số thập phân:
var a = 5; var b = 5/2; console.log(typeof a); console.log(typeof b);
Kiểu String
Kiểu string trong JavaScript dùng để biểu diễn các chuỗi ký tự:
var myFirstString = "Hello";
Chúng ta sử dụng toán tử + để nối các chuỗi với nhau:
var myFirstString = "Hello"; var mySecondString = "World"; console.log(myFirstString + " " + mySecondString); // Hiển thị: Hello World
Kiểu Array
Kiểu array (mảng) giống như một tổ hợp dùng để lưu trữ nhiều giá trị khác nhau, mỗi giá trị tương ứng với một phần tử và được đánh số thứ tự từ 0.
Ví dụ:
var topLanguagesToLearn = ["JavaScript", "PHP", "Java", "C"];
Để truy cập một phần tử ở một thứ tự cho trước chúng ta dùng cú pháp như sau:
var topLanguagesToLearn = ["JavaScript", "PHP", "Java", "C", "Ruby"]; console.log(topLanguagesToLearn[0]); // JavaScript console.log(topLanguagesToLearn[5]); // Ruby
Bạn có thể thay giá trị phần tử hoặc thêm mới phần tử:
var topLanguagesToLearn = ["JavaScript", "PHP", "Java", "C", "Ruby"]; topLanguagesToLearn[6] = "Swift"; console.log(topLanguagesToLearn); // ["JavaScript", "PHP", "Java", "C", "Ruby", empty, "Swift"]
Kiểu Boolean
Kiểu boolean chỉ gồm hai giá trị là True và False được dùng chủ yếu trong các phép toán logic.
Ở ví dụ dưới đây chúng ta có một biến result chứa giá trị trả về của việc so sánh giá trị biến a và b:
var a = 5; var b = 100; var result = (a > b); console.log(result); // false console.log(typeof result); // boolean
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
Trong bài học 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ế.
