Học JavaScript Cơ Bản - P1
Ở phần 1 trong tổng số 2 phần của bài hướng dẫn này các bạn sẽ được học các kiến thức cơ bản về JavaScript như: Tìm hiểu về ngôn ngữ JavaScript Tạo ứng dụng JavaScirpt đơn giản tên là Hello World Cách chạy mã lệnh JavaScript Cú pháp JavaScript Biến và kiểu dữ liệu JavaScript Là Gì ...
Ở phần 1 trong tổng số 2 phần của bài hướng dẫn này các bạn sẽ được học các kiến thức cơ bản về JavaScript như:
- Tìm hiểu về ngôn ngữ JavaScript
- Tạo ứng dụng JavaScirpt đơn giản tên là Hello World
- Cách chạy mã lệnh JavaScript
- Cú pháp JavaScript
- Biến và kiểu dữ liệu
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
Kết Thúc Phần 1
Tới đây bạn đã nắm vững được những kiến thức cơ bản của JavaScript ở phần 2 của bài hướng dẫn này chúng ta sẽ tìm hiểu sâu hơn về hàm, vòng lặp và các cú pháp điều khiển trong JavaScript.
