Học JavaScript trong 15 phút

145

Chào các bạn,

Javascript là một trong những ngôn ngữ lập trình được sử dụng nhiều nhất hiện nay, bởi Js có thể vừa code được ở client, lại có thể code được ở server (Nodejs), lại có thể sử dụng để làm ứng dụng di động (React Native). Theo thống kê của Stackoverflow thì số lượng câu hỏi về Javascipt chỉ đứng sau số lượng câu hỏi về Python. Còn theo thống kê của Github thì số lượng các repo có code Javascript đang dẫn đầu.

Mình kể vậy để bạn thấy rằng JavaScript nó đang hot thế nào, và nếu bạn còn chưa biết gì về Js thì đúng là một thiệt thòi lớn. Nhưng đừng lo, qua bài viết này mình sẽ giới thiệu tới bạn tổng quan tất cả các thành phần có trong Javascript, đảm bảo chỉ với 15 phút đọc là bạn có thể tự tin chém gió với bạn bè về ngôn ngữ lập trình hay ho này.

Lưu ý: Để hiểu bài viết này, thì bạn phải biết ít nhất một ngôn ngữ lập trình nào đó. Nếu chưa biết thì có hãy tham khảo series Nhập môn lập trình với JavaScript của mình trước nhé.

1. Bắt đầu một chương trình JavaScript

Đối với Javascript nhúng trong html, mã Js được đặt giữa cặp thẻ <script>....</script>

<script>
// Code Javascript ở đây
</script>

Nếu nằm trong file riêng, JavaScript được đặt trong file có phần mở rộng là .js

// hello.js
alert('Hello world');

2. Biến, hằng, kiểu dữ liệu, chú thích trong JavaScript

2.1 Biến và hằng

Biến trong JavaScript được khai báo sau từ khóa var, hằng trong JavaScript được khai báo sau từ khóa const. Tên biến, tên hằng được đặt tuân theo quy tắc:

  • Không bắt đầu bằng số
  • Chỉ bao gồm số, ký tự chữ cái và dấu _
  • Phân biệt chữ hoa chữ thường
  • Không đặt với các từ khóa trong javascript như: var, default, let, function, for, if,…

Ví dụ về biến

// Khai báo biến x có giá trị là 1
var x = 1;

// Khai báo nhiều biến cùng lúc
var a = 1, b = 2;

// Có thể khai báo biến trước và gán giá trị sau
var text;
text = 'hello world';

Ví dụ về hằng

// Khai báo hằng PI có giá trị là 3.14;
const PI = 3.14;

// Hằng số không thể khai báo lại giá trị
const PI = 3.12; // Sẽ bị lỗi do PI đã được khai báo rồi

2.2 Kiểu dữ liệu

Kiểu dữ liệu thông thường

Javascript hỗ trợ đầy đủ các kiểu dữ liệu thông thường như các ngông ngữ lập trình khác bao gồm:

  • Kiểu number
  • Kiểu string
  • Kiểu boolean
  • Kiểu array
  • Kiểu object

Để xem một biến ở kiểu dữ liệu gì, bạn dùng cú pháp typeof <tên biến> để kiểm tra.

var x = 1;
var y = 1.1;
var z = 'hello world';
var t = true;
var f = false;
var person = {
   firstName: "Binh",
   lastName: "Pham"
}
var brands = ["Apple", "Samsung", "Xiaomi"];

typeof x; // number
typeof y; // number
typeof z; // string
typeof t; // boolean
typeof f; // boolean
typeof person; // object
typeof brands; // object, đối với js array cũng là kiểu object

Biến trong JavaScript có thể linh động kiểu dữ liệu. Ví dụ ban đầu bạn khai báo biến ở dạng string, nhưng sau đó có thể gán lại ở dạng number cũng không vấn đề.

// Cùng một biến t, nhưng có thể mang nhiều kiểu dữ liệu

var t = 'hell world';
typeof t; // string

t = 1;
typeof t; // number

t = false;
typeof t; // boolean

Một số kiểu dữ liệu đặc biệt trong JavaScript

Một số kiểu dữ liệu đặc biệt cần lưu ý trong JavaScript là kiểu:

  • null: Là kiểu dữ liệu “Không có gì”, tuy nhiên typeof null lại là “object”
  • undefined: Một biến khai báo nhưng không có giá trị, thì mặc định sẽ mang kiểu dữ liệu này. typeof undefinedundefined luôn.
var x = null;
var y;

typeof x; // object
typeof y: // undefined

2.3 Chú thích

JavaScript hỗ trợ 2 kiểu chú thích là chú thích trên một dòng và chú thích nhiều dòng.

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

/*
Chú thích
trên nhiều dòng
*/

3. Các toán tử trong JavaScript

Javascript hỗ trợ đầy đủ các toán tử số học, toán tử so sánh, toán tử logic, toán tử gán như nhiều ngôn ngữ lập trình khác.

3.1 Toán tử số học

JavaScript hỗ trợ đầy đủ các toán tử số thông thường gồm:

Toán tửMô tả
+Phép cộng
Phép trừ
*Phép nhân
**Lũy thừa
/Phép chia
%Phép chia lấy dư
++Tăng lên 1 đơn vị
Giảm xuống 1 đơn vị

Ví dụ

var x = 1 + 1; // 2
var y = 1 - 1; // 0
var z = 5 * 2; // 10
var a = 5 ** 2; // 25
var b = 10/2; // 5
var c = 10 % 3; // 1
var d = 1;
d++; // 2
var e = 2;
e--; // 1

3.2 Toán tử gán

Toán tử gán chính là toán tử được sử dụng để gán giá trị cho một biến. Toán tử gán gần gũi nhất với chúng ta có lẽ là toán tử =. Ngoài toán tử gán quen thuộc này ra, javascript còn hỗ trợ thêm một số toán tử gán khác nữa.

Toán tửVí dụTương tự với
=x = yx = y
+=x += yx = x + y
-=x -= yx = x – y
*=x *= yx = x * y
/=x /= yx = x / y
%=x %= yx = x % y
**=x **= yx = x ** y

3.3 Toán tử trên string

Nối hai string

Toán tử + được sử dụng với string thì sẽ trở thành toán tử nối hai string lại với nhau.

var name = "Bình";
var hello = "Hello " + name; // Hello Bình

Hoặc có thể sử dụng += nếu bạn muốn nối tiếp vào string.

var text = "Hello";
text += " Binh"; // Hello Binh

Nối string với number

Nếu bạn cộng hai số, thì kết quả sẽ là tổng của hai số. Nhưng nếu bạn cộng một string với một số, thì kết quả sẽ là string.

var x = 5 + 5; // 10
var y = "5" + 5; // 55
var z = "Hello" + 5; // Hello5

3.4 Toán tử so sánh

Javascript cũng hỗ trợ các toán tử so sánh thông thường gồm:

Toán tửÝ nghĩa
==So sánh bằng
===So sánh bằng và bằng cả về kiểu dữ liệu
!=So sánh khác
!==So sánh khác hoặc khác kiểu dữ liệu
>So sánh lớn hơn
<So sánh nhỏ hơn
>=So sánh lớn hơn hoặc bằng
<=So sánh nhỏ hơn hoặc bằng

3.5 Toán tử logic

Javascript hỗ trợ các toán tử logic gồm:

Toán tửÝ nghĩa
&&Logic và (and)
||Logic hoặc (or)
!Logic phủ định (not)

4. Câu lệnh rẽ nhánh trong JavaScript

JavaScript hỗ trợ câu lệnh if và switch case để rẽ nhánh như nhiều ngôn ngữ lập trình khác.

4.1 Câu lệnh if

Câu lệnh if trong JavaScript được thể hiện như trong ví dụ sau:

if (dieuKien) {
   // Xảy ra nếu dieuKien là true
} 

if (dieuKien) {
   // Xảy ra nếu dieuKien là true
} else {
   // Xảy ra nếu dieuKien là false
}

if (dieuKien) {
    // Xảy ra nếu dieuKien là true
} else if (dieuKienKhac) {
    // Xảy ra nếu dieuKienKhac là true
}

if (dieuKien) {
    // Xảy ra nếu dieuKien là true
} else if (dieuKienKhac) {
    // Xảy ra nếu dieuKienKhac là true
} else {
    // Xảy ra nếu cả dieuKien và dieuKienKhac là false
}

if (dieuKien) {
    // Xảy ra nếu dieuKien là true
} else if (dieuKien1) {
    // Xảy ra nếu dieuKien1 là true
} else if (dieuKien2) {
    // Xảy ra nếu dieuKien2 là true
} else {
    // Xảy ra nếu tất cả các điều kiện trên là sai
}

4.3 Câu lệnh switch case

Câu lệnh switch case trong JavaScript được thể hiện như trong ví dụ sau:

switch (variable) {
    case 'value1':
        // Xảy ra khi variable == 'value1'
        break;

    case 'value2':
        // Xảy ra khi variable == 'value2'
        break;

    case 'value3':
    case 'value4':
        // Xảy ra khi variable == 'value3' hoặc variable == 'value4'
        break;


    // Vế default này có thể bị khuyết
    default:
        // Xảy ra khi variable không bằng case nào ở trên
        break;
}

5. Vòng lặp trong JavaScript

Javascript hỗ trợ vòng lặp for, while, do while như nhiều ngôn ngữ lập trình khác.

5.1 Vòng lặp for

Vòng lặp for trong JavaScript được thể hiện như trong ví dụ sau:

var x = 1;
var limit = 10;

for (var i = x; i <= limit; i++) {
    // i lần lượt nhận giá trị 1, 2, 3, 4 ... 10
}

5.2 Vòng lặp while

Vòng lặp while trong JavaScript được thể hiện như trong ví dụ sau:

var x = 1;
var limit = 10;

while (x < limit) {
    // ...
    x++;
}

5.3 Vòng lặp do while

Vòng lặp do while trong JavaScript được thể hiện như trong ví dụ sau:

var x = 1;
var limit = 10;

do {
   // ...
   x++;
} while (x <= limit);

6. Mảng trong JavaScript

Mảng trong JavaScript được thể hiện thông qua ví dụ sau:

// Khai báo mảng
var brands = [];

brands.push("Iphone"); // Thêm vào mảng phần tử "Iphone"
brands.push("Samsung"); // Thêm vào mảng phần tử "Samsung"

// Truy xuất phần tử mảng theo index
brands[0]; // iphone
brands[1]; // Samsung

// Nếu truy xuất một index không tồn tại trong mảng
// sẽ trả về undefined
brands[2]; // undefined

brands.length; // Lấy số lượng phần tử mảng

// Lặp các phần tử có trong mảng
for (var index = 0; index < brands.length; index++) {
   var brand = brands[index];
}

// Hoặc có thể lặp bằng cách sau cũng được
for (var index in brands) {
   var brand = brands[index]
}

// Xóa phần tử mảng theo index
var index = 0;
brands.splice(index, 1);

Mỗi phần tử mảng trong JavaScript có thể mang một kiểu dữ liệu khác nhau:

var codes = ["abx-123", 123456];

7. Đối tượng trong JavaScript

Đối tượng trong JavaScript có thể dễ dàng được khởi tạo thông qua cú pháp var object = {} mà không cần phải được khởi tạo qua một class như nhiều ngôn ngữ lập trình khác. Cụ thể các bạn xem ví dụ sau:

var person = {
    firstName: "Binh",
    lastName: "Pham",
    age: 24,
    dob: "21/07/1995",
    cars: ["lamborghini", "ferrari", mercedes]
}

// Truy xuất các đối tượng trong mảng
person.firstName; // Binh
person.lastName; // Pham
person.cars; // ["lamborghini", "ferrari", mercedes]

8. Hàm trong JavaScript

Về cơ bản, hàm trong JavaScript được thể hiện như trong ví dụ sau

// Khai báo 1 function đơn giản nhất
function functionName () {
    // ...
}

// Khai báo function với tham số
function functionWithParam (x, y, z) {
   //
} 

// Khai báo function trả về kết quả
function sum(a, b) {
   return a + b;
}

// Gọi hàm
var sum = sum(1, 2);
console.log(sum);

Hàm trong JavaScript cũng có thể gán được cho biến, cụ thể bạn xem ví dụ sau:

var functionName = function () {

}

// Gọi hàm như bình thường,
// tuy nhiên bạn không thể gọi hàm này trước khai báo nó
functionName();

9. Lập trình hướng đối tượng trong JavaScript

Có khá nhiều vấn đề phải nói về lập trình hướng đối tượng trong JavaScript nên mình đã có hẳn một bài viết để trình bày riêng về nó. Các bạn có thể đọc tại đây: Lập trình hướng đối tượng trong JavaScript.

10. JavaScript ES6 (es2015)

Có 7 tính năng nổi bật được cập nhật trong phiên bản JavaScript es6, bạn có thể tham khảo tại:

>> Tham khảo: Tóm gọn JavaScript es6 trong 10 phút

11. Lời kết

Trên là toàn bộ kiến thức tổng quan về JavaScript, hy vọng sẽ giúp ích cho bạn.

Chúc các bạn học tập hiệu quả.