MERN (2) - Nodejs, JavaScript cho MERN

Bài trước: MERN (1) - Tổng quan MERN, MongoDB, Atlas
-----

1.3       Tổng quan về Nodejs

1.3.1       Một số thông tin căn bản


Như đã trình bày, Nodejs là một nền tảng (platform) phát triển độc lập được xây dựng trên JavaScript Runtime của Chrome (V8). Dựa trên Nodejs chúng ta có thể xây dựng được các ứng dụng mạng nhanh chóng, và dễ dàng mở rộng. Nodejs là nền tảng giúp chạy JavaScript tại phía server. Nodejs được viết bằng C++.

Nodejs không phải là web framework, cũng không phải là ngôn ngữ lập trình.

Nodejs không phải luôn là lựa chọn tốt trong mọi tình huống. Một số ứng dụng nên phát triển trên nền Nodejs gồm:

– Websocket server: các máy chủ web socket như là Online Chat, Game Server

– Fast File Upload Client: các chương trình tải tập tin lên Internet tốc độ cao

– Ad Server: các máy chủ quảng cáo

– Cloud Services: các dịch vụ đám mây

– RESTful API: những ứng dụng cung cấp API cho các ứng dụng khác

– Real-time Data Application: ứng dụng có yêu cầu về tốc độ thời gian thực

– Micro Services: chia nhỏ một ứng dụng lớn thành các dịch vụ nhỏ và kết nối chúng lại với nhau

1.3.2       Tải và cài đặt Nodejs


– Tải Nodejs về máy: https://nodejs.org/en/

– Sau khi tải về, nhấp đúp vào tập tin vừa tải về để cài đặt Nodejs. Quá trình cài đặt Nodejs sẽ thiết lập luôn biến môi trường PATH, do vậy có thể sử dụng chương trình dòng lệnh (cmd) để nhập lệnh cho Nodejs thực thi ở mọi vị trí.

– Để kiểm tra cài đặt Nodejs được hay chưa, trong cửa sổ dòng lệnh nhập lệnh node –v để xem phiên bản của Nodejs. Hoặc vào thư mục C:\Program Files\ sẽ thấy thư mục nodejs.

D:\>node -v

v10.15.3

1.3.3       Thực thi một đoạn mã JavaScript bằng Nodejs


– Tạo tập tin có phần mở rộng là .js với nội dung bất kì. Ví dụ: tập tin nodetest.js với nội dung console.log(‘Chao mr Teo’);

– Mở cửa sổ dòng lệnh (Run\cmd), dùng lệnh cd ten_thu_muc để di chuyển tới thư mục chứa tập tin nodetest.js, gõ lệnh node nodetest.js để thực thi tập tin nodetest.js

1.4       JavaScript cho MERN

1.4.1       Một số thông tin


Ngôn ngữ JavaScript được Brendan Eich làm việc cho Netscape tạo ra năm 1995, có tên ban đầu là LiveScript. Mặc dù tên JavaScript có chữ Java, tuy nhiên hai ngôn ngữ này (Java và JavaScript) không có liên hệ gì với nhau.

JavaScript là ngôn ngữ lập trình kịch bản, kiểu thông dịch. Cụ thể, trình thông dịch (interpreter) sẽ thực hiện chuyển từ mã nguồn sang dạng mã mà máy tính có thể thực thi tại thời điểm chạy chương trình. Cách này làm cho chương trình viết bằng ngôn ngữ kịch bản chạy chậm hơn so với chương trình viết bằng ngôn ngữ biên dịch.

Tuy nhiên, trong lập trình front-end, với lợi thế về tính linh hoạt khi xây dựng chương trình, với các đoạn chương trình nhỏ, việc hạn chế về tốc độ thực thi là có thể chấp nhận được. Trình thông dịch JavaScript phổ biến nhất bên phía client (clien-side) chính là trình duyệt web.

Trình thông dịch JavaScript bên phía server là Nodejs.

Hiện nay, JavaScript đã được tổ chức European Computer Manufacturer’s Association (ECMA) chuẩn hóa năm 1996, do vậy, đôi khi JavaScript cũng được gọi là ECMAScript, viết tắt là ES. Đọc thêm về ECMAScript 6, 7, 8, 9, 10 (ES6, ES7, ES8, ES9, ES10).

JavaScript liên tục được cải tiến và bổ sung các tính năng mới.

Các phiên bản của ECMAScript:

Phiên bản
Năm ra đời
1
1997-06-01
2
1998-06-01
3
1998-12-01
E4X
2004-06-01
5
2009-12-01
5.1
2011-06-01
6
2015-06-01
7
2016-06-14
8
2017-06-27
9
2018
10
2019

Người ta thường sử dụng JavaScript để thực hiện các công việc sau:

– Thao tác với các phần tử HTML (hay cây DOM), ví dụ: thêm, xóa, định dạng lại các thẻ, thuộc tính, giá trị

– Kiểm tra sự hợp lệ của dữ liệu tại client-side

– Gửi thông tin đến server bằng AJAX

– Lưu trữ thông tin ở client-side

– Xác định thông tin về trình duyệt

– Lập trình phía server (chạy trên Nodejs) và trên các thiết bị khác

Vì là một ngôn ngữ lập trình, nên để học JavaScript, trước hết, cần học về cách thực thi mã nguồn, xuất kết quả, ghi chú, đặt tên biến, các kiểu dữ liệu, các toán tử, các lệnh điều khiển, lệnh lặp, tìm & sửa lỗi, định nghĩa hàm, gọi và thực thi hàm. Đây là các kiến thức căn bản, các bạn có thể tự học. 

Phần dưới đây sẽ trình bày một số chủ đề có tính đặc thù, giúp bạn dễ dàng tiếp cận các nội dung liên quan đến MERN.

Để chạy các đoạn mã JavaScript ở những phần tiếp theo, các bạn sẽ viết mã bằng một trình viết mã bất kì (VS code, Sublime Text, Notepad), sau đó dùng Nodejs để dịch và chạy chương trình.

1.4.2       Căn bản về hàm trong JavaScript


Hàm (function) là một đoạn mã nguồn mà bạn có thể tham chiếu tới nó bằng một cái tên. Hàm thường giải quyết một công việc nào đó và có thể tái sử dụng.

JavaScript xem một hàm như là một kiểu dữ liệu cơ sở (như string, number), do vậy bạn có thể gán hàm cho một biến, truyền hàm vào hàm khác như một đối số (argument).

Định nghĩa một hàm

Để định nghĩa một hàm dùng từ khóa function. Ví dụ,

// định nghĩa hàm
function xinChao() {
    console.log('Chào bác Tèo');
}
// gọi hàm để thực thi
xinChao();

Gán hàm cho một biến

Vì hàm cũng như kiểu dữ liệu thông thường nên có thể gán nó vào một biến.

// định nghĩa hàm
var chao = function() {
    console.log('Chào bác Tèo');
}
// gọi hàm để thực thi
chao();

Hàm trả về giá trị

function sum() {
    // trả về tổng từ 1 tới 10
    var total = 0;
    for(var i = 1; i <= 10; i++{
        total += i;
    }
    return total;
} 
console.log('Ket qua la: ' + sum());

Phân biệt tham số và đối số

Tham số (parameter): là giá trị cần truyền cho hàm (khi định nghĩa hàm)

Đối số (argument): là giá trị thật truyền cho hàm (khi gọi hàm để thực thi)

Ví dụ,

// n chính là tham số, là cái cần phải truyền cho hàm khi định nghĩa
function sum(n) {
    // trả về tổng từ 1 tới n
    var total = 0;
    for(var i = 1; i <= n; i++{
        total += i;
    }
    return total;
} 
// 5 chính là đối số, là cái cần truyền cho hàm để thực thi
console.log('Ket qua la: ' + sum(5));

Hàm không xác định số tham số

JavaScript cho phép khi định nghĩa hàm không cần xác định trước số tham số. Tuy nhiên, khi thực thi thì truyền bao nhiêu tham số cũng được. Để ý tính chất này khi làm việc với hàm callback.

function anyFunction() {
    return arguments;
}
console.log(anyFunction(1,2, 'hello', true));
// [Arguments] { '0': 1, '1': 2, '2': 'hello', '3': true }

Gán giá trị mặc định cho tham số

Bạn có thể gán giá trị mặc định cho tham số, để khi thực thi hàm, nếu người dùng không truyền giá trị cho tham số, thì hàm sẽ sử dụng giá trị mặc định.

function xinChao(name='Teo') {
    console.log(`Chao bac ${ name }` );
}
// không truyền giá trị cho đối số
// đừng bận tâm tới $ {}, đây chỉ là định dạng xuất dữ liệu
console.log(xinChao());
// có truyền giá trị cho đối số
console.log(xinChao('Ti'));

1.4.3       Định nghĩa hàm bằng dấu “mũi tên”


Bạn có thể sử dụng dấu mũi tên (arrow, =>) để định nghĩa một hàm.

Định nghĩa một hàm kiểu thông thường:

// viết hàm trả về bình phương của một số
function square(x) {
    return x * x;
}
console.log(square(2));

Định nghĩa hàm không có tên (anonymous function), gán hàm cho một biến:

// viết hàm trả về bình phương của một số
var square = function(x) {
    return x * x;
}
console.log(square(2));

Định nghĩa một hàm không có tên, sử dụng dấu “mũi tên”, gán hàm cho một biến.

Từ 2 cách định nghĩa hàm ở trên (có dùng từ khóa function), giờ sẽ bỏ từ khóa function đi, thêm dấu mũi tên (=>), nội dung của hàm sẽ nằm sau dấu mũi tên.

var square = (x) => {
    return x * x;
}
console.log(square(2));

Vì nội dung của hàm chỉ có một hàng, nên sẽ bỏ dấu ngoặc nhọn {}, bỏ luôn chữ return đi cũng được.

var square = (x) => x * x;
console.log(square(2));

Ví dụ, viết lại hàm tính tổng từ 1 > n bằng cách dùng hàm kiểu “mũi tên”.

var sum = (n) => {
    var total = 0;
    for(var i = 1; i <= n; i++{
        total += i;
    }
    return total;
}
console.log(sum(5));

1.4.4       Hiện tượng hoisting


Hoisting là hiện tượng cho phép gọi hàm trước khi định nghĩa hàm.

Ví dụ gọi hàm sum, trước khi định nghĩa:

console.log(sum(5));
var sum = (n) => {
    var total = 0;
    for(var i = 1; i <= n; i++{
        total += i;
    }
    return total;
}

Chạy chương trình trên sẽ gặp lỗi. Lý do là: để có tính chất hoisting, cần dùng từ khóa function để định nghĩa hàm.

console.log(sum(5));
function sum(n) {
    var total = 0;
    for(var i = 1; i <= n; i++{
        total += i;
    }
    return total;

}
-----
Cập nhật: [24/06/2020]
-----
Xem thêm: MERN (3) -  Làm quen với callback
Xem thêm: Danh sách bài học