Làm web (js05) - JS: Objects

Bài trước: Làm web (js04) - JS: Functions
----------

5         Objects


Everything in JavaScript is either one of the six primitive data types (strings, numbers, booleans, symbols, undefined, and null) or an object. We’ve actually met some objects already, those are arrays and functions. However, they are almost built-in objects. In this chapter we’re going to look at user-defined objects, as well as some of the other built-in objects.

In this chapter, we’ll cover the following topics:

– Object literals

– Adding properties to objects

– Object methods

– JSON

– The Math object

– The Date object

– The RegExp object

– Project: we’ll create quiz and question objects and ask random questions

5.1       Object literals (p167)


An object in JavaScript is a self-contained set of related values and functions. They act as a collection of named properties that map to any JavaScript value such as strings, numbers, booleans, arrays and functions. If a property’s value is a function, it is known as a method.

One way to think about a object is that it’s like a dictionary where you look up a property name and see a value.

Objects are often used to keep any related information and functionality together in the same place.

5.2       Creating objects (p169)


const spiderman = {};

or,

const spiderman = new Object();

Accessing properties (p170)

You can access the properties of an object using the dot notation.

You can also access an object’s properties using bracket notation–the property is represented by a string inside square brackets, so needs to be placed inside single or double quotation marks.

Computed properties (p171)

Example using operator + to concatenate the strings:

const hulk = { name: 'Hulk', ['catch' + 'Phrase']: 'Hulk Smask!' };
console.log(hulk);
//> {name: "Hulk", catchPhrase: "Hulk Smask!"}

Example using ternary operator:

const bewitched = true;
const captainBritain = { name: 'Captain Britain', hero: bewitched ? false : true };
console.log(captainBritain);
//>{name: "Captain Britain", hero: false}

The new Symbol type can also be used as a computed property key:

const name = Symbol('name');
const supergirl = { [name]: 'Supergirl' };
console.log(supergirl);
//> {Symbol(name): "Supergirl"}

A new property can be added to an object using a symbol as a key if the square bracket notation is used:

Calling methods (p172)

To call an object’s method we can also use dot or bracket notation.

Checking if properties or methods exist (p173)

const ob = {
    name: 'Teo',
    weight: 60,
 fly() {
        console.log('fly');
    }
};

console.log('name' in ob);

Another example,

student = {
    name: 'Teo',
    age: 20,
    greeting(){
        alert(`Hi, My name is ${this.ten}.`);
    }
}
console.log('name' in student);
console.log(student.hasOwnProperty('name'));

Finding all the properties of an object (p174)

Adding properties (p176)

Changing properties (p177)

Removing properties (p177)

5.3       Nested objects (p178)


Objects as a parameters to functions (p180)

This (p181)

Namespacing (p182)

5.4       Built-in objects


JSON (p184)

Math (p186)

Date (p196)

Lab 17. As you’ve known, timestamp is a value that represents the number of milliseconds since 01/01/2070. Let’s find the timestamp so that when you run chunk of following code, the result will be 02/01/1970.
const result = new Date(timestamp);
console.log(result.toString());

RegExp (p201)

A regular expression (or RegExp, for short) is a pattern that can be used to search strings for matches to the pattern. A common use is “find and replace” type operations.

Lab 18. Using https://regex101.com/ to learn RegExp.

Creating regular expression (p202)

– Using literal notation of writing the regular expression between forward slashes.

const pattern = /[a-zA-Z] + ing$/;

– Create a new instance of the RegExp object using the new operator and a constructor function

const pattern = new RegExp(‘[a-zA-Z] + ing’);

Regular methods (202)

– Using test() method to see if a string (passed to the method as as parameter) matches the regular expression pattern. It returns true if the pattern is in the string, and false if it isn’t.

Example:

  pattern.test(‘joke’);
<< false
  pattern.test(‘joking’);
<< true
  pattern.test(‘jokingly’);
<< false

Lab 19. Using prompt of JavaScript allowing user input any word, if the word is “stop” then stop program. Using RegExp to write this program.

– The exec() method works in the same way as the test() method, but instead of returning true or false, it returns an array containing the first match found, or null if there aren’t any matches:

Lab 20. Using prompt of JavaScript allowing user input their full name. Using regular expression to check if the first name is “Teo”, stop input processing and convert first name into uppercase. Output full name to console window.

Basic regular expressions (p204)

Character groups (p204)

Regular expression properties (p205)

Special characters (p207)

Modifiers (p207)

Greedy and lazy modifiers (p208)

A practical example (p209)

String methods (p210)


Quiz ninja project (p212)
-----
Cập nhật: 12/11/2019
-----