Ngu ngơ học làm web (26) - Căn bản JavaScript (9)_More3

tiếp theo của: Ngu ngơ học làm web (25) - Căn bản JavaScript (8)_More2
-------

Phần 26.       Căn bản JavaScript (9)_More3


Clip 24: đối tượng Math


Một số thuộc tính và phương thức cần tìm hiểu: Math.PI, ceil(), floor(), round(), max(), min(), random().

Bài tập viết hàm “tung con xúc xắc (xí ngầu)”: xuất giá trị ngẫu nhiên từ 1 > 6.

Clip 25: từ khóa new


Dùng từ khóa “new” để khởi tạo đối tượng. Ví dụ: var today = new Date();

    // định nghĩa đối tượng theo kiểu đơn giản (literal)
    var mouse = {
        weight: 0.2,
        getWeight: function(){
            return this.weight;
        }
    };
    // định nghĩa đối tượng bằng hàm khởi tạo
    function Mouse(color, weight) {
        this.type = 'mouse';
        this.color = color;
        this.weight = weight;
    }
    var mouse1 = new Mouse('white', 0.2);
    var mouse2 = { type: 'mouse' };
    console.log(mouse1); // kiểu là Mouse
    console.log(mouse2); // kiểu là một object không có tên

Ví dụ:

    // định nghĩa đối tượng theo kiểu đơn giản (literal)
    var mouse = {
        weight: 0.2,
        getWeight: function(){
            return this.weight;
        }
    };
    // định nghĩa đối tượng bằng hàm khởi tạo
    function Mouse(color, weight) {
        this.type = 'mouse';
        this.color = color;
        this.weight = weight;
    }
    var mouse1 = new Mouse('white', 0.2);
    var mouse2 = { type: 'mouse' };
    console.log(mouse1); // kiểu là Mouse
    console.log(mouse2); // kiểu là một object không có tên
    // ví dụ:
    var cat = {
        name: 'Tom',
        stomach: [],
        eat: function(mouse) {
            this.stomach.push(mouse);
            return this;
        }
    };
    var m1 = { name: 'm1' };
    var m2 = { name: 'm2' };
    var m3 = { name: 'm3' };
    cat.eat(m1).eat(m2).eat(m3);
    console.log(cat);

Bài tập: viết lại các đối tượng m1, m2, m3 theo kiểu Hàm khởi tạo

function Mouse(name) {
        this.name = name;
    }
var m1 = new Mouse('m1');
var m2 = new Mouse('m2');
var m3 = new Mouse('m3');

Clip 26. prototype


So sánh hàm khởi tạo (constructor function) và hàm thông thường (normal function).

Constructor function
Normal function
– Sử dụng với từ khóa new
Tên hàm được viết hoa kí tự đầu tiên, và là một danh từ
Function Mouse() { };
Var mickey = new Mouse();
– Được gọi để thực hiện một tác vụ cụ thể
– Tên hàm bắt đầu bằng động từ, viết theo kiểu camelCase
Function sayHello() {
 Console.log(‘say hello’);
}
sayHello();


Hai các để tạo một object: khai báo bằng dấu {} hoặc dùng hàm khởi tạo.

Prototype: nguyên mẫu, khuôn mẫu

function Student(name, mssv) {
        this.type = 'student',
        this.name = name,
        this.mssv = mssv,
        this.sayHello = function(){
            console.log(`Hi ${ this.name }`);
        }
    }
    var student = new Student('Teo',111);
    student.sayHello();

Mỗi hàm khởi tạo có thuộc tính .protoype > thuộc tính prototype chứa thuộc tính constructor trỏ tới chính hàm khởi tạo.




Ví dụ xuất prototype:

console.log(Student.prototype);
// {constructor: ƒ}
constructorƒ Student(name, mssv)
__proto__: Object

Ví dụ xuất prototype.constructor:

console.log(Student.prototype.constructor);
//ƒ Student(name, mssv) {
                        this.type = 'student',
                        this.name = name,
                        this.mssv = mssv,
                        this.sayHello = function(){
                                    console.log(`Hi ${ this.name }`);
                        }
            }

Đối tượng prototype được chia sẻ giữa các object tạo bằng từ khóa new.

// dùng prototype để định nghĩa thêm cho constructor
    Student.prototype.grade = '10';
    var student1 = new Student('Teo', 111);
    var student2 = new Student('', 222);
    console.log(student1);// xem thuộc tính student.__proto__
    console.log(student2);

Dùng prototype để mở rộng một đối tượng có sẵn (tính kế thừa trong OOP).

Clip 27. Cài Nodejs và Sublime Text (windows)


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++

Các ứng dụng nên viết bằng Nodejs: websocket server, Fast file upload client, Ad server, Cloud services, RESTful API, Any real-time data application.

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

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

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

– 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 node ở 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.

D:\>node -v
v10.15.3

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

– Tạo tập tin .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, 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

Clip 28. Cài Nodejs trên Mac


Clip 29. Node module system


Khái niệm module trong Nodejs.

[nodejstest.js]

function Mouse(color) {
    this.color = color;
    this.dead = false;
}
Mouse.prototype.die = function() {
   this.dead = true;
};
function Cat() {
    this.stomach = [];
}
Cat.prototype.eat = function(mouse) {
    this.stomach.push(mouse);
    mouse.die();
}
var mickey = new Mouse('black');
var jerry = new Mouse ('white');
// console.log(mickey);
// console.log(jerry);
var meo = new Cat();
meo.eat(mickey);
meo.eat(jerry);
console.log(meo);

Mở cửa sổ cmd, gõ lệnh: node nodejstest.js để xem kết quả.

Tách phần mã nguồn của đối tượng Mouse sang tập tin khác (mouse.js), khi đó mouse.js chính là một module, dùng lệnh module.export để tạo ra hàm khởi tạo Mouse (nhiểu nôm na là tạo lớp Mouse):
[mouse.js]

function Mouse(color) {
    this.color = color;
    this.dead = false;
}
Mouse.prototype.die = function() {
   this.dead = true;
};
module.export = Mouse;

Dùng hàm require để tham chiếu tới một module (mouse.js).

[nodejstest.js]

var Mouse = require('./mouse'); // trong linux, ./ là thư mục hiện tại
function Cat() {
    this.stomach = [];
}
Cat.prototype.eat = function(mouse) {
    this.stomach.push(mouse);
    mouse.die();
}
var mickey = new Mouse('black');
var jerry = new Mouse ('white');
// console.log(mickey);
// console.log(jerry);
var meo = new Cat();
meo.eat(mickey);
meo.eat(jerry);
console.log(meo);

Mở cửa sổ cmd, gõ lệnh: node nodejstest.js để xem kết quả.


Tương tự, có thể tách đối tượng Cat ra module cat.js. (bài tập)
-----------
Cập nhật [3/9/2020]
-----------
Xem thêm: 
Tổng hợp các bài viết về Ngu ngơ học làm web
- Ngu ngơ học làm web (27) -