Ngu ngơ học làm web (24) - Căn bản JavaScript (7) - More1

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

Phần 24.       Căn bản JavaScript (7)_more1


Clip 0: chuẩn bị


Clip 1: thuật ngữ


Clip 2: nội dung khóa học


Clip 3: biến


Clip 4: kiểu dữ liệu


– Primitive types: number, string. boolean

– Special types: null, undefined

– Reference types: array, object

Clip 5: kiểu dữ liệu Object


Clip 6: kiểu dữ liệu Array


    // khai báo đối tượng
    var sv1 = { ten: 'Tèo' };
    var sv2 = { ten: '' };
    var sv3 = { ten: 'Sửu' };

    // mảng các đối tượng
    var lop = [sv1, sv2, sv3];

    console.log(lop);

Clip 7: các phép toán số học


Để ý về thứ thự ưu tiên của các phép toán: nhóm ưu tiên cao (++, --), nhóm ưu tiên thấp hơn (*, /, %), nhóm ưu tiên thấp nhất (+, -); với các phép toán cùng nhóm thì thứ tự sẽ được thực hiện từ trái sang phải.

Clip 8: phép tính tăng, giảm (++, --)


Ví dụ: x = 3; ++x + x-- + --x - x = ?

Clip 9: các phép gán


Các phép gán: =, +=, -=, *=, /=

Các phép gán được thực hiện từ phải qua trái.

Clip 10: hàm (function)


Khi làm việc với một hàm cần để ý hai việc: định nghĩa hàm và gọi hàm để thực thi nó.

Clip 11: phương thức của đối tượng (object methods)


Là một hình thức của lập trình hướng đối tượng. Thực hiện định nghĩa phương thức ngay trong đối tượng (chứ không định nghĩa phương thức trong lớp).

sinhvien = {
        ten: 'Teo',
        tuoi: 20,
        chao: function(){
            console.log('Teo chao cac ban!');
        }
    };
      // xuất nội dung phương thức
    console.log(sinhvien.chao);
      // thực thi phương thức
    sinhvien.chao();

Clip 12: toán tử so sánh


Một số phép toán so sánh: > >= < <= == === != !==

Clip 13: vòng lặp for


for(lam1; lam2; lam4)
{
lam3;
}

Ví dụ:

for(var i = 1; i <= 10; i++){
        console.log(i);
    }

Clip 14: vòng lặp for…of, for…in


– Vòng lặp for…of

    var lopDaiHocChuTo = [ 
        { STT: 1, ten: 'Teo', tuoi: 10},
        { STT: 2, ten: 'Ti', tuoi: 11},
        { STT: 3, ten: 'Mui', tuoi: 12},
        { STT: 4, ten: 'Suu', tuoi: 13},
    ]
    for(sinhVien of lopDaiHocChuTo{
        console.log(sinhVien.ten + ' ' + sinhVien.tuoi);
    }

– Vòng lặp for…in

    var sinhVien = {
        ten: "Tèo",
        tuoi: 20,
        gioiTinh: 1
    }
    for(var key in sinhVien{
        console.log(key + ':' + sinhVien[key]);
    }

Clip 15: array methods


Đọc các array methods ở đây: https://developer.mozilla.org/en-


– a.concat(b): nối mảng a với mảng b

– a.push(x): thêm giá trị x vào cuối mảng a, trả về số phần tử của mảng sau khi thêm

– a.pop(): lấy phần tử cuối ra khỏi mảng, trả về giá trị lấy được

– a.shift(): lấy phần tử đầu ra khỏi mảng, trả về giá trị lấy được

– a.unshift(x): thêm một/hoặc nhiều phần tử vào đầu mảng

Clip 16: dùng hàm như một tham số (callback):


Sử dụng hàm callback: là hàm (A) gọi hàm (B) thông qua việc truyền tham số (B là tham số của hàm A); và hàm này (B) chỉ được thực hiện khi hàm kia (A) thực hiện. Hàm B được gọi là hàm callback.

Khai báo một đối tượng:

var coffeeMachine = {
    makeCoffee: function() {
        console.log('making coffee...');
    }
};
// chạy hàm makeCoffee
coffeeMachine.makeCoffee();

Truyền một hàm cho một hàm khác:

var coffeeMachine = {
    makeCoffee: function(onFinish) {
        console.log('making coffee...');
        onFinish();
    }
};
var beep = function(){
    console.log('bip bip...');
}
// chạy hàm makeCoffee
coffeeMachine.makeCoffee(beep);

Có thể định nghĩa hàm (hàm B) như một tham số (của hàm A) khi thực thi:

var coffeeMachine = {
    makeCoffee: function(onFinish) {
        console.log('making coffee...');
        onFinish();
    }
};
// định nghĩa hàm callback khi thực thi
coffeeMachine.makeCoffee(function(){
    console.log("ting ting...");
});

Clip 17: array.map()


Map nghĩa là ánh xạ, kiểu như một hàm số y = f(x) = 2x chẳng hạn. Với x = 1, thì y = 2; x = 2 thì y = 4 ; x = 3 thì y = 6…v.v.

Map sẽ tạo ra mảng mới bằng cách thay đổi giá trị của từng phần tử trong mảng cũ.

Cú pháp :

let newArray = oldArray.map(function(moiGiaTriCuaMangCu){
    // biến đổi mỗi giá trị của mảng cũ
    return giá_trị_đã_được_biến_đổi
});


 Ví dụ :

let numbers = [1, 4, 9]
let doubles = numbers.map(function(num) {
  return num * 2
})
// doubles is now   [2, 8, 18]
// numbers is still [1, 4, 9]

console.log(doubles);
-----------
Cập nhật [3/9/2020]
-----------