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

-----

Xem thêm: Làm web (js06) - JS: DOM
Xem thêm: Danh sách bài học

Hệ điều hành (5) - Quản lý bộ nhớ & bộ nhớ ảo

Bài trước: Hệ điều hành (4) - Liên lạc và đồng bộ hóa giữa các tiến trình
-----

6 Quản lý bộ nhớ

6.1 Các vấn đề phát sinh khi quản lý bộ nhớ

Các thuật toán chọn vùng trống

– First-fit: chọn đoạn trống đầu tiên đủ lớn

– Best-fit: chọn đoạn trống nhỏ nhất nhưng đủ lớn để thỏa mãn nhu cầu

– Worst-fit : chọn đoạn trống lớn nhất

6.2 Các mô hình cấp phát bộ nhớ

– Mô hình cấp phát liên tục: tiền trình được nạp vào một vùng nhớ liên tục

– Mô hình cấp phát không liên tục: tiến trình được nạp vào một vùng nhớ không liên tục

6.2.1 Mô hình cấp phát liên tục

– Mô hình linker-loader

– Mô hình base & limit

Đọc trang 103: https://drive.google.com/file/d/1P_zsBstk_qvbf531CAV_-rV9GxSE7WwV/view

6.2.2 Mô hình cấp phát không liên tục

Đọc trang 103: https://drive.google.com/file/d/1P_zsBstk_qvbf531CAV_-rV9GxSE7WwV/view

– Mô hình phân đoạn

(đọc thêm phần cài đặt)

– Mô hình phân trang (paging)

7 Bộ nhớ ảo

7.1 Phân trang theo yêu cầu

7.2 Các thuật toán phân trang

7.3 Thực hành

7.4 Câu hỏi ôn tập

Bài tập 1 > 9, trang 133 (https://drive.google.com/file/d/1P_zsBstk_qvbf531CAV_-rV9GxSE7WwV/view)

--------
Cập nhật: [05/11/2019]
-------
Danh sách các bài học

Làm web (js04) - JS: Functions

Bài trước: Làm web (js03) - JS: Arrays, Logic and Loops
----------

4 Functions

A function is a chunk of code that can be referenced by a name, and is almost like a small, self-contained mini program. Functions can help reduce repetition and make code easier to follow.

In this chapter, we’ll be covering these topics:

– Defining functions―function declarations, function expressions, Function() constructors and the new arrow syntax

– Invoking a function

– Return values

– Parameters and arguments

– Hoisting―variables and functions

– Callbacks―functions as a parameter

– Project ― we’ll be using functions to make the Quiz Ninja code easier to follow

4.1 Defining a Function (p133)

Function declarations (p133)

function hello(){

console.log('Hello World!');

}

hello();

Lab 8. Write a program using function declaration. Program allows user input a number, then output the sum from 0 to that number.

Function Expression (p134) (anonymous function)

const goodbye = function(){

console.log('Goodbye World!');

};

or,

const goodbye = function bye(){

console.log('Goodbye World!');

};

goodbye();

bye() //error

Lab 9. Write a program using function expression. Program allows user input fullname, then output the fullname as uppercase.

Every function has a name (p135)

Using when debug to know which functions are causing a problem.

console.log(goodbye.name);

Function constructor (p135)

It is not recommended to use this way to declare a function.

4.2 Invoking a function (p136)

4.3 Return Values (p137)

4.4 Parameters and arguments (p138)

Variable numbers of arguments (p140)

Lab 10. Use rest parameter to write the function that allow to get the mean of any set of number.

A sample code:

function mean(...rest){

let total = 0;

for(item of rest){

total += item;

}

return total/rest.length;

}

console.log(mean(1,2,1,2,3,4));

Arrow function (p145)

Function hoisting (p147)

Variable hosting (p148)

Variable hoisting can cause quite a bit of confusion and also relies on using var to declare variables. An error will be thrown if you attempt to refer to a variable before it has been declared using const and let. It’s better practice to use const and let to declare any variables at the beginning of a block so hoisting is unnecessary.

4.5 Callbacks (p149)

Remember at the start of this chapter when we said that functions in JavaScript are first-class objects, so they behave in just the same way as every other object? This means that functions can also be given as a parameter to another function. A function that is passed as an argument to another is known as a callback.

Consider a function:

function sing(song) {

console.log(`I'm singing along to ${song}`);

}

sing('Let It Go')

<< 'I'm singing along to Let It Go'

We can make the sing() function more flexible by adding a callback parameter:

function sing(song,callback) {

console.log(`I'm singing along to ${song}.`);

callback();

}

The callback is provided as a parameter, then invoked inside the body of the function.

But what if the function isn’t provided as an argument?

There is nothing to actually define a parameter as a callback, so if a function isn’t provided as an argument, then this code won’t work. It is possible to check if an argument is a function using the following code:

if(typeof(callback) === 'function '){

callback();

}

This will only attempt to invoke the callback if it is a function.

Now we can create another function called dance() that can be used as the callback:

function dance(){

console.log(‘I am moving my body to the groove.’);

}

Now we can call our sing function, but we can also dance as well as sing:

sing(‘Let it go’, dance);

Lab 11. Applying callback function.

As you known, arrays have sort() method to sort all items in array. Try with this array [1,3,12,5,23,18,7].sort();

The result is [1, 12, 18, 23, 3, 5, 7], what is happened? JavaScript has converted numerical array into strings, then placed in alphabetical order.

So, write a function to sort an array based on numerical values:

function numerically(a,b){

return (a-b)

}

This function can now be used as a callback in the sort() method to sort the array of numbers correctly.

console.log(arr.sort(numerically));

// [1, 3, 5, 7, 12, 18, 23]

Code sample:

const arr = [1,3,12,5,23,18,7];

// console.log(arr.sort());

function numerically(a,b){

return (a-b)

}

console.log(arr.sort(numerically));

4.6 Array Iterators (p153)

Arrays have a number of methods that utilize callbacks to make them more flexible.

– forEach()

In the last chapter, you can use a for loop to loop through each value in an array like so:

const colors = ['Red', 'Green', 'Blue'];

for(let i = 0; i < colors.length; i++){

console.log(`Color at position ${i} is ${colors[i]}`);

}

An alternative is to use the forEach() method. This will loop through the array and invoke a callback function using each value as an argument. The callback function takes three parameters, the first represents the value in the array, the second represents the current index and the third represent the array tha the callback is being called on. The example above could be written as:

colors.forEach( (color, index) => { console.log(`Color at position ${index} is ${color}`);});

or,

colors.forEach( (color, index) => {

console.log(`Color at position ${index} is ${color}`);

});

or,

colors.forEach( (color, index) => console.log(`Color at position ${index} is ${color}`));

– map() (p154)

For example,

console.log([1,2,3].map( square ));

function square (x) {

return x*x;

}

//> [1, 4, 9]

An anonymous function can also be used as a callback. This example will double all the number in the array:

console.log([1,2,3].map( x => x * 2 ));

//>[2, 4, 6]

or,

console.log([1,2,3].map( (x) => x * 2 ));

or,

console.log([1,2,3].map( (x) => {

return x * 2;

}));

The next example takes each item in the array and places them in uppercase inside paragraph HTML tags:

const result = ['red', 'green', 'blue'].map( color => `<p>${color.toUpperCase()}</p>` );

document.write(result);

Notice in this and the previous example, the anonymous function take a parameter, color, which refers to the item in the array. This callback can also take two more parameters–the second parameter refers to the index number in the array and the third refers to the array itself. It’s quite common for callbacks to only used the first, index, parameter, but the next example shows all three parameters being used:

console.log(['red', 'green', 'blue'].map( (color, index, array) => `Element ${index} is ${color}. There are ${array.length} items in total.` ));

//> "Element 0 is red. There are 3 items in total.", "Element 1 is green. There are 3 items in total.", "Element 2 is blue. There are 3 items in total."

Lab 12. Give an array with numerical values, for example [1,2,3,4]. Write a chunk of code to write browser a list as following:

1. Item 1

2. Item 2

3. Item 3

4. Item 4

[Sample]

const so = [1,2,3,4];

document.write("<ol>");

so.map( (x) => document.write(`<li> Mục ${x} </li>`) );

document.write("</ol>");

Lab 13. Given an array with lower characters (for example [le, van, teo]), Write a chunk of code convert lower characters into upper characters (for example [LE, VAN, TEO]).

[Sample]

const name = ['le','van','teo'];

const result = name.map( (char) => char.toUpperCase());

console.log(result);

– reduce() (p155)

The reduce() method is another method that iterates over each value in the array, but this time it cumulatively combines each result to return just a single value. The callback function is used to describe how to combine each value of the array with the running total. This is often used to calculate statistics such as averages from data stored in an array. It usually takes two parameters. The first parameter represents the accumulated value of all the calculations so far, and the second parameter represents the current value in the array. The following example shows how to sum an array of numbers:

console.log([1,2,3,4,5].reduce( (acc,val) => acc + val ));

//> 15

The reduce() method also takes a second parameter after the callback, which is the initial value of the accumulator, acc. For example, we could total the numbers in an array, but starting at 10, insteal of zero:

console.log([1,2,3,4,5].reduce( (acc,val) => acc + val, 10 ));

//> 25

Lab 14. Calculating the average word length in a sentence that inputted by user (using prompt to input sentence).

Another example could be to calculate the average word length in a sentence:

const sentence = 'The quick brown for jumped over the lazy dog';

The sentence can be converted into an array using split() method:

const words = sentence.split(' '); // ["The", "quick", "brown", "for", "jumped", "over", "the", "lazy", "dog"]

Now we can use the reduce() function to calculate the total number of letters in the sentence, by starting the count at 0 and adding on the length of each word in each step:

const totalChars = words.reduce( (total, word) => total + word.length,0 );

//>36

And a simple division sum tells us the average word length:

const average = totalChars/words.length;

– filter()

The filter() method returns a new array that only contains items from the original array that return true when passed to the callback.

For example, we can filter an array of numbers to just the even numbers using the following code:

const numbers = [2, 7, 6, 5, 11, 23, 12];

const evens = numbers.filter( x => x % 2 === 0 );

console.log(evens);

// [2, 6, 12]

The filter() method provides a useful way to finding all the truthy values from an array:

const array = [0, 1, '0', false, true, 'hello'];

const result = array.filter(Boolean);

console.log(result);

//> [1, "0", true, "hello"]

To find all the falsy values, the following filter can be used:

const array = [0, 1, '0', false, true, 'hello'];

const result = array.filter( x => !x);

console.log(result);

This uses the not operator, ! to return the complement of a value’s boolean representation. This means that any falsy values will return true and be returned by the filter.

Chaining iterators together (p158)

For example, we can calculate the sum of square numbers using the map() method to square each number in the array and then chain the reduce() method on the end to add the results together:

const result = [1,2,3].map( x => x * x ).reduce( (acc, x) => acc + x );

console.log(result);

//> 14

Improving the mean() function (p159)

Lab 15. Improving the mean() function using a callback. Then:

– Applying to double all the numbers before calculating the mean.

– Applying to square all the numbers before calculating the mean.

Lab 16. Quiz Ninja Project (p161)

-----

Cập nhật: 28/10/2019

-----

Xem thêm: Làm web (js05) - JS: Objects
Xem thêm: Danh sách bài học

Làm web (js03) - JS: Arrays, Logic and Loops

Bài trước: Làm web (js02) - JS: Programming Basics
----------

3 Arrays, Logic, and Loops

In this chapter, we’ll look at some of the data structures used in JavaScript to store lists of values. These are called arrays, sets, and maps. We’ll also look at logical statements that allow us to control the flow of a program, as well as loops that allow us to repeat blocks of code over and over again.

This chapter will cover the following topics:

– Array literals

– Adding and removing values from arrays

– Array methods

– Sets

– Maps

– if and else statements

– switch statements

– while loops

– do … while loops

– for loops

– Iterating over a collection

– Project ― we’ll use arrays, loops and logic to ask multiple questions in our quiz

3.1 Arrays (p89)

3.2 Sets (p103)

Lab 5. Using the prompt to input fullname. Then output characters that used to make the fullname. For example, input: nguyen teo; output: n, g, u, y, e, t, o.

Lab 6. Remove duplicated items in array. For example, inputArray = [1, 2, 4, 5, 1, 3, 5, 6, 7, 3, 5, 4, 7], outputArray = [1, 2, 4, 5, 3, 6, 7]

3.3 Convert Sets to Arrays (p108)

3.4 Maps (p111)

3.5 Convert Maps to Arrays (p115)

3.6 Logic (p115)

3.7 Loops (p119)

3.8 Labs:

Lab 7. Quiz Ninja Project (p128)

-----

Cập nhật: 23/10/2019

-----

Xem thêm: Làm web (js04) - JS: Functions
Xem thêm: Danh sách bài học

Menu

Tìm kiếm trong Blog

Devops

Làm web (js05) - JS: Objects

5 Objects

5.1 Object literals (p167)

5.2 Creating objects (p169)

5.3 Nested objects (p178)

5.4 Built-in objects

Hệ điều hành (5) - Quản lý bộ nhớ & bộ nhớ ảo

6 Quản lý bộ nhớ

6.1 Các vấn đề phát sinh khi quản lý bộ nhớ

6.1.1 Chuyển đổi địa chỉ tương đối sang tuyệt đối

6.1.2 Không gian địa chỉ ảo và không gian địa chỉ vật lý

6.1.3 Quản lý bộ nhớ đã cấp phát và chưa cấp phát

6.2 Các mô hình cấp phát bộ nhớ

6.2.1 Mô hình cấp phát liên tục

6.2.2 Mô hình cấp phát không liên tục

7 Bộ nhớ ảo

7.1 Phân trang theo yêu cầu

7.2 Các thuật toán phân trang

7.3 Thực hành

7.4 Câu hỏi ôn tập

Làm web (js04) - JS: Functions

4 Functions

4.1 Defining a Function (p133)

4.2 Invoking a function (p136)

4.3 Return Values (p137)

4.4 Parameters and arguments (p138)

4.5 Callbacks (p149)

4.6 Array Iterators (p153)

Làm web (js03) - JS: Arrays, Logic and Loops

3 Arrays, Logic, and Loops

3.1 Arrays (p89)

3.2 Sets (p103)

3.3 Convert Sets to Arrays (p108)

3.4 Maps (p111)

3.5 Convert Maps to Arrays (p115)

3.6 Logic (p115)

3.7 Loops (p119)

3.8 Labs: