• Trang chủ
  • Khoá học
    • Lập trình trẻ em (từ 8 – 15 tuổi)
      • Lập trình Scratch Cơ bản
      • Lập trình Scratch Nâng cao
      • Robotics Cơ bản
      • Robotics Nâng cao
      • Lập trình Python Cơ bản
    • Lập trình viên chuyên nghiệp (từ 12 tuổi trở lên)
      • Lập trình viên Java Developer (Học 6 tháng – 1 năm – Đi làm ngay) – SOGO xSchool
      • Lập trình viên ứng dụng Ô tô (Học 6 tháng đến 1 năm – Đi làm ngay)
      • Lập trình viên Blockchain (Blockchain Developer) – SOGO xSchool
    • Đại học trực tuyến FUNiX (FPT)
      • Kỹ sư phần mềm (Cử nhân) – Học trực tuyến (Online)
  • Sự kiện
  • BLOG
  • Hoạt động
  • Liên hệ
Hotline
0355 00 77 38
quangphuong@sogo.edu.vn
SOGOSOGO
  • Trang chủ
  • Khoá học
    • Lập trình trẻ em (từ 8 – 15 tuổi)
      • Lập trình Scratch Cơ bản
      • Lập trình Scratch Nâng cao
      • Robotics Cơ bản
      • Robotics Nâng cao
      • Lập trình Python Cơ bản
    • Lập trình viên chuyên nghiệp (từ 12 tuổi trở lên)
      • Lập trình viên Java Developer (Học 6 tháng – 1 năm – Đi làm ngay) – SOGO xSchool
      • Lập trình viên ứng dụng Ô tô (Học 6 tháng đến 1 năm – Đi làm ngay)
      • Lập trình viên Blockchain (Blockchain Developer) – SOGO xSchool
    • Đại học trực tuyến FUNiX (FPT)
      • Kỹ sư phần mềm (Cử nhân) – Học trực tuyến (Online)
  • Sự kiện
  • BLOG
  • Hoạt động
  • Liên hệ

    Lập trình Web

    • Trang chủ
    • Blog
    • Lập trình Web
    • Bài 31 | Javascript Object – Javascript cơ bản (Phần 7) – SOGO

    Bài 31 | Javascript Object – Javascript cơ bản (Phần 7) – SOGO

    • Mục Lập trình Web
    • Date 09/11/2019
    • Ý kiến Chưa có ý kiến nào
    Javascript-Object

    Trong JavaScript, hầu như mọi thứ đều là object: Booleans, Numbers, Strings, Dates, Maths, Regular expressions, Arrays, Functions, Objects. Tất cả giá trị Javascript, ngoại trừ dữ liệu nguyên thủy (primitives), đều là objects.

    I. JavaScript Primitives

    Một giá trị nguyên thủy (primitive value) là một giá trị mà không có thuộc tính (properties) hoặc phương pháp (methods).

    Một primitive data type là dữ liệu mà có primitive value.

    JavaScript định nghĩa 5 primitive data types:

    • string
    • number
    • boolean
    • null
    • undefined

    Primitive values thì immutable (không thể thay đổi được).

    Ví dụ x = 3.14, bạn có thể thay đổi giá trị của x. Nhưng không thể thay đổi giá trị của 3.14.

    Value Type Comment
    “Hello” string “Hello” is always “Hello”
    3.14 number 3.14 is always 3.14
    true boolean true is always true
    false boolean false is always false
    null null (object) null is always null
    undefined undefined undefined is always undefined

    II. Javascript Objects là các Variables

    JavaScript variables chứa single values:

    Ví dụ:

    var person = "John Doe";

    Objects cũng là variables. Tuy nhiên objects có thể chứa nhiều giá trị.

    Các giá trị được viết theo cặp name : value.

    Ví dụ:

    var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

    III. Javascript Object Properties

    Trong Javascript, object chứa các thuộc tính được đặt tên, gọi là properties.

    Một JavaScript object là một tập hợp các thuộc tính không có thứ tự (unordered properties).

    Object properties có thể là các primitive values, objects, hoặc functions.

    Ví dụ:

    Property Value
    firstName John
    lastName Doe
    age 50
    eyeColor blue

    1. Tạo JavaScript Object sử dụng Object Literal

    Sử dụng object literal, bạn định nghĩa và tạo ra một object trong cùng 1 câu lệnh

    Một object literal là một danh sách các cặp name:value bên trong dấu ngoặc nhọn (curly braces) {}.

    Ví dụ:

    var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

    See the Pen javascript object literal by QUANG (@QUANGPHUONG) on CodePen.

    2. Tạo JavaScript Object sử dụng từ khóa new

    Ví dụ sau tạo một JavaScript object có 4 thuộc tính (properties):

    Ví dụ:

    var person = new Object();
    person.firstName = "John";
    person.lastName = "Doe";
    person.age = 50;
    person.eyeColor = "blue";

    See the Pen javascript object new by QUANG (@QUANGPHUONG) on CodePen.

    3. JavaScript Objects có thể thay đổi được (mutable)

    Objects thì mutable bởi vì chúng được gọi bằng reference, không phải giá trị.

    Ví dụ:

    var x = person;  // This will not create a copy of person.

    Cả x và person cùng là 1 object và có cùng 1 địa chỉ trong bộ nhớ.

    Bất kì thay đổi nào với x cũng sẽ thay đổi person.

    Ví dụ

    var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

    var x = person;
    x.age = 10;           // This will change both x.age and person.age

    See the Pen javascript object mutable by QUANG (@QUANGPHUONG) on CodePen.

    4. Truy cập JavaScript Properties

    Cú pháp để truy cập property của một object:

    objectName.property         // person.age

    hoặc

    objectName[“property“]      // person[“age”]

    hoặc

    objectName[expression]      // x = “age”; person[x]

    Ví dụ:

    person.firstname + " is " + person.age + " years old.";

    Ví dụ:

    person["firstname"] + " is " + person["age"] + " years old.";

    Ví dụ sau lặp qua các thuộc tính của object person:

    var person = {fname:"John", lname:"Doe", age:25};

    for (x in person) {
    txt += person[x];
    }

    See the Pen javascript object property by QUANG (@QUANGPHUONG) on CodePen.

    5. Thêm Javascript Properties

    Ví dụ:

    person.nationality = "English";

    See the Pen javascript object add property by QUANG (@QUANGPHUONG) on CodePen.

    6. Xóa Javascript Properties

    Từ khóa delete dùng để xóa property của một object.

    Ví dụ

    var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
    delete person.age;   // or delete person["age"];

    See the Pen javascript delete property by QUANG (@QUANGPHUONG) on CodePen.

    IV. Javascript Object Methods

    Methods là các hành động được thực hiện bởi object.

    Một object method là một object property chứa đựng một function definition.

    Property Value
    firstName John
    lastName Doe
    age 50
    eyeColor blue
    fullName function() {return this.firstName + " " + this.lastName;}

    1. Truy cập Object Methods

    Cú pháp:

    objectName.methodName()

    Ví dụ:

    name = person.fullName();

    See the Pen javascript object method by QUANG (@QUANGPHUONG) on CodePen.

    2. Thêm Method vào Object

    Ví dụ:

    person.name = function () {
    return this.firstName + " " + this.lastName;
    };

    See the Pen javascript object add method by QUANG (@QUANGPHUONG) on CodePen.

    V. JavaScript Object Accessors

    1. Vì sao cần Getters và Setters?

    • Cú pháp đơn giản
    • Dùng chung cho properties và methods
    • Bảo đảm an toàn cho dữ liệu
    • Và các tiện dụng khác

    2. JavaScript Getter (get Keyword)

    Ví dụ:

    // Create an object:
    var person = {
    firstName: "John",
    lastName : "Doe",
    language : "en",
    get lang() {
    return this.language;
    }
    };
    // Display data from the object using a getter:
    document.getElementById("demo").innerHTML = person.lang;

    See the Pen javascript getter by QUANG (@QUANGPHUONG) on CodePen.

    3. JavaScript Setter (set Keyword)

    Ví dụ:

    var person = {
    firstName: "John",
    lastName : "Doe",
    language : "",
    set lang(lang) {
    this.language = lang;
    }
    };
    // Set an object property using a setter:
    person.lang = "en";
    // Display data from the object:
    document.getElementById("demo").innerHTML = person.language;

    See the Pen javascript setter by QUANG (@QUANGPHUONG) on CodePen.

    VI. JavaScript Object Constructors

    1. Object Types (Blueprints) (Classes)

    Các ví dụ trên chỉ tạo các object riêng lẻ.

    Đôi khi ta muốn tạo một “blueprint” để có thể tạo ra nhiều objects có cùng chung một “type”.

    Ta có thể làm được việc này bằng cách tạo ra một object constructor function.

    Trong ví dụ sau, function Person() là một object constructor function.

    Objects mà có cùng type được tạo ra bằng cách gọi (call) constructor function với từ  khóa new:

     

    See the Pen javascript object constructor by QUANG (@QUANGPHUONG) on CodePen.

    2. Thêm một Property vào một Object

    Ví dụ:

    myFather.nationality = "English";

    See the Pen javascript object add property 2 by QUANG (@QUANGPHUONG) on CodePen.

    3. Thêm một Method vào một Object

    Ví dụ:

    myFather.name = function () {
    return this.firstName + " " + this.lastName;
    };

    See the Pen javascript object add method by QUANG (@QUANGPHUONG) on CodePen.

    4. Thêm một Property vào một Constructor

    Ví dụ:

    function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
    this.nationality = "English";
    }

    See the Pen javascript object add property constructor by QUANG (@QUANGPHUONG) on CodePen.

    5. Thêm một Method vào một Constructor

    Adding methods to an object constructor must be done inside the constructor function:

    Ví dụ:

    function Person(firstName, lastName, age, eyeColor) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.eyeColor = eyeColor;
    this.changeName = function (name) {
    this.lastName = name;
    };
    }

    See the Pen javascript add method constructor by QUANG (@QUANGPHUONG) on CodePen.

    6. Built-in JavaScript Constructors

    JavaScript có built-in constructors cho các native objects:

    Ví dụ:

    var x1 = new Object();    // A new Object object
    var x2 = new String();    // A new String object
    var x3 = new Number();    // A new Number object
    var x4 = new Boolean();   // A new Boolean object
    var x5 = new Array();     // A new Array object
    var x6 = new RegExp();    // A new RegExp object
    var x7 = new Function();  // A new Function object
    var x8 = new Date();      // A new Date object

    Tuy nhiên việc tạo ra các Objects nói trên không được khuyến khích. Thay vào đó bạn có thể sử dụng các cách sau:

    • Sử dụng object literals {} thay vì new Object().
    • Sử dụng string literals "" thay vì new String().
    • Sử dụng number literals 12345 thay vì new Number().
    • Sử dụng boolean literals true / false thay vì new Boolean().
    • Sử dụng array literals [] thay vì new Array().
    • Sử dụng pattern literals /()/ thay vìnew RegExp().
    • Sử dụng function expressions () {} thay vì new Function().

    Ví dụ:

    var x1 = {};            // new object
    var x2 = "";            // new primitive string
    var x3 = 0;             // new primitive number
    var x4 = false;         // new primitive boolean
    var x5 = [];            // new array object
    var x6 = /()/           // new regexp object
    var x7 = function(){};  // new function object
    ==========================================================================

    Nguồn tham khảo: w3school

    *************

    Xem thêm:

    1. Lập trình web là gì?
    2. HTML là gì?
    3. Học lập trình web bắt đầu như thế nào?
    4. Bài 1 | Xây dựng trang web đơn giản với HTML
    5. Bài 2 | Các thành phần cơ bản của HTML
    6. Bài 3 | HTML style – Định dạng nội dung trang web
    7. Bài 4 | CSS style – Định dạng nội dung trang web
    8. Bài 5 | HTML Table và List – Định dạng bảng và list trong trang web
    9. Bài 6 | HTML Block, Inline, ID, Class và Iframes Elements
    10. Bài 7 | HTML Form Elements – Nhập dữ liệu cho Web
    11. Bài 8 | HTML Input Elements – Nhập dữ liệu cho Web
    12. Bài 9 | Tạo responsive web layout bằng HTML và CSS
    13. Bài 10 | CSS là gì? Thiết kế Web nâng cao bằng CSS
    14. Bài 11 | CSS Background và Border
    15. Bài 12 | CSS Margin và Padding
    16. Bài 13 | CSS Box Model trong thiết kế Website
    17. Bài 14 | CSS Text, List và Table
    18. Bài 15 | CSS Display, Overflow, Float và Alignment
    19. Bài 16 | CSS Combinator
    20. Bài 17 | CSS Navigation Bar
    21. Bài 18 | Responsive Web Layout với CSS
    22. Bài 19 | CSS Animation
    23. Bài 20 | jQuery là gì? jQuery Selectors & Event Methods
    24. Bài 21 | jQuery Animate – Effects & Animation
    25. Bài 22 | jQuery CSS
    26. Bài 23 | jQuery Traversing
    27. Bài 24 | Javascript là gì?- Giới thiệu về Javascript
    28. Bài 25 | Lập trình Javascript cơ bản (Phần 1)
    29. Bài 26 | Javascript function là gì? Lập trình Javascript cơ bản (Phần 2)
    30. Bài 27 | Javascript Data Types – Lập trình Javascript cơ bản (Phần 3)
    31. Bài 28 | Javascript Date – Lập trình Javascript cơ bản (Phần 4)
    32. Bài 29 | Javascript Number Format – Lập trình Javascript cơ bản (Phần 5)
    33. Bài 30 | Javascript Array – Lập trình Javascript cơ bản (Phần 6)

    —————————————————————————————

    SOGO – xSchool

    Đối tác của trường Đại học trực tuyến FUNiX (thuộc khối giáo dục FPT Education).

    SOGO hợp tác cùng FUNiX triển khai chương trình đào tạo Lập trình viên chuyên nghiệp – Java Developer dựa trên cơ sở hoàn thành 03 chứng chỉ đầu tiên của chương trình Cử nhân Đại học trực tuyến FUNiX (tổng cộng 8 Chứng chỉ để lấy bằng Đại học FPT).

    Mục tiêu của chương trình này là giúp sinh viên có thể hoàn thành 3 chứng chỉ đầu trong thời gian từ 10 – 12 tháng và có thể đi làm ngay tại FPT Software với chức danh Java Developer Fresher.

    Sau khi đi làm, sinh viên vẫn có thể tiếp tục học để hoàn thành 5 chứng chỉ còn lại của FUNiX và lấy bằng Đại học FPT (được Bộ giáo dục và đào tạo công nhận).

    Chi tiết chương trình trở thành Java Developer chỉ trong 10 tháng.

    Liên hệ ngay để biết thêm chi tiết đây:

    Hotline: 0355 00 77 38

    Facebook (SOGO xSchool): sogoxschool

    Tag:array literals, array object, Arrays, boolean literals, booleans, Dates, function expressions, function object, Functions, getter, Javascript, javascript object, javascript property, lap trinh web, Maths, new object, number literals, Numbers, object accessor, object constructor, object literal, object literals, object method, Objects, pattern literals, primitive boolean, primitive number, primitive string, regexp object, Regular expressions, setter, SOGO, string literals, Strings, thiet ke web, web developer

    • Chia sẻ:
    admin

    Bài trước

    Bài 30 | Javascript Array – Javascript cơ bản (Phần 6) – SOGO
    09/11/2019

    Bài sau

    Bài 32 | Javascript if else Conditions– Javascript cơ bản (Phần 8) – SOGO
    09/11/2019

    Bạn cũng có thể thích

    json-la-gi
    Bài 34 | JSON là gì? – Javascript cơ bản (Phần 10) – SOGO
    23 Tháng Mười Một, 2019
    javascript-dom-la-gi
    Bài 33 | Javascript DOM là gì? – Javascript cơ bản (Phần 9) – SOGO
    23 Tháng Mười Một, 2019
    javascript-if-else
    Bài 32 | Javascript if else Conditions– Javascript cơ bản (Phần 8) – SOGO
    9 Tháng Mười Một, 2019

    Ý kiến Hủy

    Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

    Tìm kiếm

    Chuyên mục

    • Học tiếng Anh (1)
    • Lập trình Android (1)
    • Lập trình Java (2)
    • Lập trình trẻ em (13)
    • Lập trình viên chuyên nghiệp (18)
    • Lập trình Web (37)
    • Tin tức (15)
    • Uncategorized (2)

    CÁC KHÓA HỌC

    Lập trình Python Cơ bản

    Lập trình Python Cơ bản

    2.800.000₫ 2.600.000₫
    Lập trình viên Blockchain (Blockchain Developer) – SOGO xSchool

    Lập trình viên Blockchain (Blockchain Developer) – SOGO xSchool

    Free
    Robotics Nâng cao

    Robotics Nâng cao

    2.800.000₫ 2.600.000₫
    Lập trình viên ứng dụng Ô tô (Học 6 tháng đến 1 năm – Đi làm ngay)

    Lập trình viên ứng dụng Ô tô (Học 6 tháng đến 1 năm – Đi làm ngay)

    Free
    Kỹ sư phần mềm (Cử nhân) – Học trực tuyến (Online)

    Kỹ sư phần mềm (Cử nhân) – Học trực tuyến (Online)

    Free
    Lập trình viên Java Developer (Học 6 tháng – 1 năm – Đi làm ngay) – SOGO xSchool

    Lập trình viên Java Developer (Học 6 tháng – 1 năm – Đi làm ngay) – SOGO xSchool

    Free
    Robotics Cơ bản

    Robotics Cơ bản

    2.800.000₫ 2.600.000₫
    Lập trình Scratch Nâng cao

    Lập trình Scratch Nâng cao

    2.800.000₫ 2.600.000₫
    Lập trình Scratch Cơ bản

    Lập trình Scratch Cơ bản

    2.800.000₫ 2.600.000₫

    BÀI VIẾT MỚI NHẤT

    Bài 34 | JSON là gì? – Javascript cơ bản (Phần 10) – SOGO
    23Th112019
    Bài 33 | Javascript DOM là gì? – Javascript cơ bản (Phần 9) – SOGO
    23Th112019
    Bài 32 | Javascript if else Conditions– Javascript cơ bản (Phần 8) – SOGO
    09Th112019
    Bài 31 | Javascript Object – Javascript cơ bản (Phần 7) – SOGO
    09Th112019
    Bài 30 | Javascript Array – Javascript cơ bản (Phần 6) – SOGO
    05Th102019
    logo-sogo

    0937117714 (Ms. Hương)

    0935710181 (Mr. Quang)

    info@sogo.edu.vn

    SoGo

    • Về chúng tôi
    • Bài viết
    • Liên hệ
    • Tuyển dụng

    Links

    • Khoá học
    • Sự kiện
    • Hoạt động
    • FAQs

    Education Website by QuangPhuong. Powered by SOGO.