Ngu ngơ học làm web (23) - Căn bản JavaScript (6)_Global_OOP

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

Phần 23.       Căn bản JavaScript (6) Global_OOP


Clip 42. Đối tượng global


Các phương thức và thuộc tính của đối tượng global có thể sử dụng được ở tất cả các đối tượng JavaScript khác.

Các thuộc tính của đối tượng global:

Thuộc tính
Mô tả
Infinity
Đại diện cho giá trị âm/dương vô cùng
NaN
Cho biết biểu thức toán học không thực hiện được (not a number)
Undefined
Cho biết một biến chưa được gán giá trị

Một số phương thức:

Phương thức
Mô tả
decodeURI()
Giải mã chuỗi URI
decodeURIComponent()
Giải mã chuỗi được mã hóa bằng phương thức encodeURIComponent()
encodeURI()
Mã hóa các kí tự đặc biệt trong chuỗi URI (trừ các kí tự: / ? : @ & = + $ #)
encodeURIComponent()
Mã hóa các kí tự đặc biệt trong chuỗi URI
escape()
Mã hóa các kí tự đặc biệt trong chuỗi
unescape()
Giải mã các kí tự đặc biệt trong chuỗi
eval()
Thực hiện biểu thức hoặc các câu lệnh truyền vào

Ví dụ:

console.log(escape("!@#$"));
// %21@%23%24

console.log(unescape("%21"));
// !

console.log(encodeURI("http://www.google.com/ my function?a=1&b=2"));

console.log(encodeURIComponent("http://www.google.com/ my function?a=1&b=2"));
// http%3A%2F%2Fwww.google.com%2F%20my%20function%3Fa%3D1%26b%3D2

Sử dụng eval():

<script>
    //    const x = 4;
    //    alert("Giá trị của x là: " + x);
       const str = 'const x = 4; alert("Giá trị của x là: " + x);';
       eval(str);
    </script>

Clip 43. Đối tượng global (tt)


Phương thức
Mô tả
isFinite()
Kiểm tra một giá trị có là số hữu hạn không
isNaN()
Kiểm tra một giá trị có phải là NaN không
Number()
Đổi giá trị của đối tượng khác thành giá trị của đối tượng Number
ParseFloat()
Đổi giá trị chuỗi thành giá trị số
ParseInt()
Đổi giá trị chuỗi thành giá trị số
String()
Đổi giá trị của đối tượng khác thành giá trị của đối tượng String

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


[Đọc thêm về OOP trong ES6 để cập nhật những khác biệt so với OOP trong JavaScript truyền thống: https://toidicode.com/classes-trong-es6-340.html]

Theo JavaScript truyền thống, vì không có từ khóa class, nên sẽ tạo luôn đối tượng, có ba cách để tạo ra một đối tượng.

– Dùng từ khóa function để tạo một hàm (một hàm cũng là một đối tượng)

– Dùng từ khóa this.tenBien = function() {}; để tạo đối tượng

– Dùng từ khóa var để khai báo một biến thuộc kiểu đối tượng (object). var object = {};

Ví dụ tạo đối tượng theo cách 1:

function myValidate(){}
            var myObject = new myValidate();
            console.log(typeof myObject); //object

Ví dụ tạo đối tượng theo cách 2:

this.myValidate2 = function(){};
            var myObject = new myValidate2;
            console.log(typeof myObject); //object

Ví dụ tạo đối tượng theo cách 3:

var myObject = {};
            console.log(typeof myObject); //object

Thuộc tính và truy cập vào thuộc tính

var student = {
                        ten : "Nguyen Van Teo"
            };
console.log(student.ten);

Phương thức và truy cập vào phương thức

var student = {
                        ten : "Nguyen Van Teo",
                        chao(){
                                    alert("hi Teo");
                        }
            };
            console.log(student.ten);
            student.chao();

Clip 44. Lập trình hướng đối tượng trong JavaScript (tt)


Tính đóng gói trong lập trình hướng đối tượng

– JavaScript “cũ” không có thuộc tính kiểu private, tuy nhiên, có thể giả lập kiểu private bằng từ khóa var, prefixes hoặc clousures. Đọc thêm: https://developer.mozilla.org/en-US/docs/Archive/Add-ons/Add-on_SDK/Guides/Contributor_s_Guide/Private_Properties

Ví dụ, sử dụng từ khóa var để tạo thuộc tính kiểu private:

this.myValidate = function(){
                        var private = "private text";
                        this.getPrivate = getPrivate;
                       
                        function getPrivate(){
                                    return private;
                        }
            }
            var myObject = new myValidate();
            console.log(myObject.getPrivate());
// thử gọi trực tiếp > không truy cập được
            console.log(myObject.private);

– Một hàm mặc định sẽ có kiểu public

Truyền giá trị cho thuộc tính qua đối tượng

this.myValidate = function(val1, val2){
        this.msg = val1;
        this.data = val2;
    }
    var myObject = new myValidate('test', 100);
    console.log(myObject.msg);
    console.log(myObject.data);

Truyền giá trị cho thuộc tính qua phương thức

    this.myValidate = function(){
        this.msg = 'Gia tri cu';
        this.setMsg = setMsg;

        function setMsg(val){
            this.msg = val;
        }
    };
    var myObject = new myValidate();
    console.log(myObject.msg);
    myObject.setMsg('Gia tri moi');
    console.log(myObject.msg);

Kế thừa

Để kế thừa sử dụng phương thức call() theo cú pháp:

this.lopCon = function(){
lopCha.call(this);
}

    this.myValidate = function(){
        this.myValue = '';
        
        this.getValue = getValue;
        this.setValue = setValue;

        function getValue() { return this.myValue; }
        function setValue(val) { this.myValue = val; }
    };
    // myValidateChild kế thừa từ myValidate
    this.myValidateChild = function(){
        myValidate.call(this);
    };
    var myObj = new myValidateChild();
    myObj.setValue('JavaScript');
    console.log(myObj.myValue);

Bài tập về OOP:


Tạo đối tượng box để vẽ các hình trên trang giao diện web, để vẽ một hình cần truyền các thông tin: chiều rộng, chiều cao, màu chữ, màu nền và nội dung bên trong. Ví dụ: [“100px”, “100px”, “yellow”, “red”], “Box01”.

    this.myBox = function(){
        // khai báo thuộc tính
        this.text = '';
        this.att = '';

        // khai báo phương thức
        this.createBox = createBox;
        var createStyle = createStyle; //var: để tạo phương thức kiểu private

        // định nghĩa phương thức
        function createBox(att, text){
            var result;
            var style = createStyle(att);

            result = '<div style="' + style + '">' + text + '</div>';
            return result;
        }
        function createStyle(att){
            var style = 'text-align: center;';
            
            style += ' width:' + att[0];
            style += '; height:' + att[1];
            style += '; background-color:' + att[2];
            style += '; color:' + att[3];
            style += '; line-height:' + att[1];

            return style;
        }
    };
    var box = new myBox();
    document.write(box.createBox(['100px','100px','yellow','red'],'Box01'));

    document.write(box.createBox(['100px','100px','green','blue'],'Box02'));
---------
Cập nhật [3/9/2020]
-----------