Javascripting

Thursday, 08/09/2022

Tram Ho

Introduction

JavaScript is a compiled, cross-platform, and interpreted programming language, also known as a scripting language for web pages. Javascript is used in web pages in addition to HTML and CSS. JavaScript can be used for client-side development as well as for server-side development. Javascript is both an imperative language and a declarative language. JavaScript contains a standard library of objects, such as Arrays, Dates, and Math, and a core set of language elements such as operators, control structures, and statements.

Valid

Valid are named containers for storing data values.
Valid is declared with the keywords var , let , const

String

Used to represent and manipulate a sequence of characters such as letters, numbers, punctuation, spaces,…
Strings are usually written in single or double quotes (‘…’,”…”).

‘this is a string’ or “this is a string”

Create chain

<span class="token keyword">const</span> string1 <span class="token operator">=</span> <span class="token string">"A string primitive"</span> <span class="token punctuation">;</span>
<span class="token keyword">const</span> string2 <span class="token operator">=</span> <span class="token string">'Also a string primitive'</span> <span class="token punctuation">;</span>
<span class="token comment">// hoặc</span>
<span class="token keyword">const</span> string3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">String</span> <span class="token punctuation">(</span> <span class="token string">"A string object"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

const string1 = "A string primitive" ;

const string2 = 'Also a string primitive' ;

// hoặc

const string3 = new String ( "A string object" ) ;

String Length

Check how many characters a string has using the length() property.
Syntax

<span class="token keyword">const</span> example <span class="token operator">=</span> <span class="token string">'this is a string'</span> <span class="token punctuation">;</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> example <span class="token punctuation">.</span> length <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token comment">// kết quả trả về sẽ là độ dài kỹ tự của string</span>

const example = 'this is a string' ;

console . log ( example . length ) ;

// kết quả trả về sẽ là độ dài kỹ tự của string

Revising String

Strings have built-in functionality that allows you to inspect and manipulate their contents.
Sometimes we need to change the contents of a string, so to change the content in a string, we use the replace() method.
Syntax

<span class="token keyword">let</span> example <span class="token operator">=</span> <span class="token string">'example string'</span> <span class="token punctuation">;</span>
example <span class="token operator">=</span> example <span class="token punctuation">.</span> <span class="token function">replace</span> <span class="token punctuation">(</span> <span class="token string">'string'</span> <span class="token punctuation">,</span> <span class="token string">'this is a string'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> example <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token comment">// kết quả trả về sẽ là 'example this is a string'</span>

let example = 'example string' ;

example = example . replace ( 'string' , 'this is a string' ) ;

// kết quả trả về sẽ là 'example this is a string'

Number

Unlike String, Number does not need to be enclosed in single or double quotes
Number can be an integer (1,2,3,…) or a decimal number (3.14,…)

Rounding Number

We can do basic math using +, -, *, / and % operators.
But for more complex math, we can use Math object.
Use Math to round numbers

<span class="token keyword">const</span> roundUp <span class="token operator">=</span> <span class="token number">1.5</span> <span class="token punctuation">;</span>
<span class="token keyword">const</span> rounded <span class="token operator">=</span> Math <span class="token punctuation">.</span> <span class="token function">round</span> <span class="token punctuation">(</span> roundUp <span class="token punctuation">)</span> <span class="token punctuation">;</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> rounded <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token comment">// kết quả trả về giá trị của roundUp sẽ bằng 2</span>

const roundUp = 1.5 ;

const rounded = Math . round ( roundUp ) ;

console . log ( rounded ) ;

// kết quả trả về giá trị của roundUp sẽ bằng 2

Number To String

To convert a number to a string use the toString() method
The toString() method is a built-in method of the JavaScript Number object that allows you to convert any number value to its string representation.
For example

<span class="token keyword">var</span> number <span class="token operator">=</span> <span class="token number">128</span> <span class="token punctuation">;</span>
<span class="token keyword">var</span> str <span class="token operator">=</span> number <span class="token punctuation">.</span> <span class="token function">toString</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> str <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token comment">// "128"</span>

var number = 128 ;

var str = number . toString ( ) ;

console . log ( str ) ;

// "128"

If Statement

Conditional statements are used to change the control flow of a program, based on a specified boolean condition.
A conditional statement has the following form

<span class="token keyword">if</span> <span class="token punctuation">(</span> n <span class="token operator">&gt;</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'biến n lớn hơn 1.'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'biến n nhỏ hơn hoặc bằng 1.'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token comment">// (n&gt;1): Bên trong dấu ngoặc là kết quả của lệnh sẽ là đúng hoặc sai </span>
<span class="token comment">// else: là lệnh tùy chọn và chứa mã sẽ được thực thi nếu kết quả đó là sai </span>

if ( n > 1 ) {

console . log ( 'biến n lớn hơn 1.' ) ;

} else {

console . log ( 'biến n nhỏ hơn hoặc bằng 1.' ) ;

}

// (n>1): Bên trong dấu ngoặc là kết quả của lệnh sẽ là đúng hoặc sai

// else: là lệnh tùy chọn và chứa mã sẽ được thực thi nếu kết quả đó là sai

For loop

The for loop allows a block of code to be repeated a certain number of times.

<span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span> i <span class="token operator">&lt;</span> n <span class="token punctuation">;</span> i <span class="token operator">++</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// do something</span>
<span class="token punctuation">}</span>
<span class="token comment">// let i = 0: Khởi tạo biến cho vòng lặp </span>
<span class="token comment">// i &lt; n: Điều kiện để vòng lặp for thực hiện </span>
<span class="token comment">// i++: Tăng một giá trị mỗi khi khối mã trong vòng lặp được thực thi. </span>

for ( let i = 0 ; i < n ; i ++ ) {

// do something

}

// let i = 0: Khởi tạo biến cho vòng lặp

// i < n: Điều kiện để vòng lặp for thực hiện

// i++: Tăng một giá trị mỗi khi khối mã trong vòng lặp được thực thi.

Array

Array is a single variable used to store elements of different data types so that they can be accessed through a single variable.
Network can be created in 2 ways
Syntax

<span class="token comment">// []</span>
<span class="token keyword">const</span> array_name <span class="token operator">=</span> <span class="token punctuation">[</span> item1 <span class="token punctuation">,</span> item2 <span class="token punctuation">,</span> <span class="token operator">...</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>

// []

const array_name = [ item1 , item2 , ... ] ;

<span class="token comment">// new Array()</span>
<span class="token keyword">const</span> array_name <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span> <span class="token punctuation">(</span> item1 <span class="token punctuation">,</span> item2 <span class="token punctuation">,</span> <span class="token operator">...</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

// new Array()

const array_name = new Array ( item1 , item2 , ... ) ;

For example:

<span class="token keyword">const</span> array <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'a'</span> <span class="token punctuation">,</span> <span class="token string">'b'</span> <span class="token punctuation">,</span> <span class="token string">'c'</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>

const array = [ 'a' , 'b' , 'c' ] ;

<span class="token keyword">const</span> number <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span> <span class="token punctuation">(</span> <span class="token number">20</span> <span class="token punctuation">,</span> <span class="token number">30</span> <span class="token punctuation">,</span> <span class="token number">40</span> <span class="token punctuation">,</span> <span class="token number">50</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

const number = new Array ( 20 , 30 , 40 , 50 ) ;

Array Filtering

To perform network filtering, we use the filter() method.
For example

    <span class="token keyword">const</span> array <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'a'</span> <span class="token punctuation">,</span> <span class="token string">'b'</span> <span class="token punctuation">,</span> <span class="token string">'c'</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>

    <span class="token keyword">const</span> arrays <span class="token operator">=</span> array <span class="token punctuation">.</span> <span class="token function">filter</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token parameter">array</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
       <span class="token keyword">return</span> <span class="token punctuation">(</span> array <span class="token operator">!==</span> <span class="token string">'c'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token punctuation">)</span>
    console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> arrays <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token comment">// kết quả trả về trong array chỉ còn 'a' và 'b'</span>

const arrays = array . filter ( function ( array ) {

return ( array !== 'c' ) ;

} )

console . log ( arrays ) ;

// kết quả trả về trong array chỉ còn 'a' và 'b'

Accessing Array Values

The elements of the array can be accessed through the index number.
Index numbers start from 0 to the array’s property length minus one.
The elements of the array must be accessed only through bracket notation.
For example

<span class="token keyword">const</span> pets <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'cat'</span> <span class="token punctuation">,</span> <span class="token string">'dog'</span> <span class="token punctuation">,</span> <span class="token string">'rat'</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>

console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> pets <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token comment">// Đoạn mã trên sẽ in ra phần tử đầu tiên của mảng pest là cat.</span>

const pets = [ 'cat' , 'dog' , 'rat' ] ;

console . log ( pets [ 0 ] ) ;

// Đoạn mã trên sẽ in ra phần tử đầu tiên của mảng pest là cat.

Looping through arrays

Use a for loop to access and manipulate a list of values in a network.
Accessing array values can be done using an integer.
Each item in an array is identified with a number, starting at 0
For example

<span class="token keyword">const</span> pest <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'cat'</span> <span class="token punctuation">,</span> <span class="token string">'dog'</span> <span class="token punctuation">,</span> <span class="token string">'rat'</span> <span class="token punctuation">]</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span> i <span class="token operator">&lt;</span> pest <span class="token punctuation">.</span> length <span class="token punctuation">;</span> i <span class="token operator">++</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    pest <span class="token punctuation">[</span> i <span class="token punctuation">]</span> <span class="token operator">=</span> pest <span class="token punctuation">[</span> i <span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">'s'</span>
<span class="token punctuation">}</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> pest <span class="token punctuation">)</span>
<span class="token comment">// =&gt; [ 'cats', 'dogs', 'rats' ]</span>
<span class="token comment">// Thay đổi từng chuỗi để chúng là số nhiều</span>

const pest = [ 'cat' , 'dog' , 'rat' ]

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

pest [ i ] = pest [ i ] + 's'

}

console . log ( pest )

// => [ 'cats', 'dogs', 'rats' ]

// Thay đổi từng chuỗi để chúng là số nhiều

Object

Object is a list of values that are similar to an array, except that the values are defined with keys instead of integers.

Object Properties

You can access and manipulate an object’s properties, the keys, and the values an object contains, using a method very similar to netting.
For example

<span class="token keyword">const</span> food <span class="token operator">=</span> <span class="token punctuation">{</span>
types <span class="token operator">:</span> <span class="token string">'only pizza'</span>
<span class="token punctuation">}</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> food <span class="token punctuation">.</span> types <span class="token punctuation">)</span>
<span class="token comment">// =&gt; only pizza</span>

const food = {

types : 'only pizza'

}

console . log ( food . types )

// => only pizza

Object keys

Javascript provides a native way of enumerating all available keys of an object. This makes it possible to cycle through all the properties of an object and manipulate all their values accordingly.
To list all object keys using Object.keys()
For example

<span class="token keyword">const</span> car <span class="token operator">=</span> <span class="token punctuation">{</span>
    make <span class="token operator">:</span> <span class="token string">'Toyota'</span> <span class="token punctuation">,</span>
    model <span class="token operator">:</span> <span class="token string">'Camry'</span> <span class="token punctuation">,</span>
    year <span class="token operator">:</span> <span class="token number">2022</span>
    <span class="token punctuation">}</span>
<span class="token keyword">const</span> keys <span class="token operator">=</span> Object <span class="token punctuation">.</span> <span class="token function">keys</span> <span class="token punctuation">(</span> car <span class="token punctuation">)</span> <span class="token punctuation">;</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> keys <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token comment">// =&gt; [ 'make', 'model', 'year' ]</span>

const car = {

make : 'Toyota' ,

model : 'Camry' ,

year : 2022

}

const keys = Object . keys ( car ) ;

console . log ( keys ) ;

// => [ 'make', 'model', 'year' ]

Functions

Functions is a block that takes input, processes that input, and then produces output.
For example

<span class="token keyword">function</span> <span class="token function">eat</span> <span class="token punctuation">(</span> <span class="token parameter">food</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> food <span class="token operator">+</span> <span class="token string">'tasted really good.'</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token function">eat</span> <span class="token punctuation">(</span> <span class="token string">'Bananas '</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span>
<span class="token comment">//xác định một hàm có tên là eat nhận đối số có tên food được mong đợi là một chuỗi 'Bananas'</span>
<span class="token comment">// =&gt; Bananas tasted really good.</span>

function eat ( food ) {

return food + 'tasted really good.' ;

}

console . log ( eat ( 'Bananas ' ) )

//xác định một hàm có tên là eat nhận đối số có tên food được mong đợi là một chuỗi 'Bananas'

// => Bananas tasted really good.

Function Arguments

Function can be declared to take any number of arguments.
Arguments can be of any type.
An argument can be a number, a string, an array, an object, and even another function
For example

<span class="token keyword">function</span> <span class="token function">math</span> <span class="token punctuation">(</span> <span class="token parameter">a <span class="token punctuation">,</span> b <span class="token punctuation">,</span> c</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> b <span class="token operator">*</span> c <span class="token punctuation">)</span> <span class="token operator">+</span> a <span class="token punctuation">)</span>
<span class="token punctuation">}</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token function">math</span> <span class="token punctuation">(</span> <span class="token number">53</span> <span class="token punctuation">,</span> <span class="token number">61</span> <span class="token punctuation">,</span> <span class="token number">67</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span>
<span class="token comment">// 4140</span>

function math ( a , b , c ) {

return ( ( b * c ) + a )

}

console . log ( math ( 53 , 61 , 67 ) )

// 4140

SCOPE

Scope is a collection of variables, objects and functions that you have access to
Javascript has 2 scopes: global and local
A variable declared outside the function definition is a global variable and its value is accessible and modifiable throughout the program.
The variable declared inside the function definition is a local variable, it is created and destroyed each time the function is executed, and it cannot be accessed by any code outside the function.
Functions defined inside other functions, called nested functions, can access the scope of their parent function.
For example

<span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token number">4</span> <span class="token comment">// a là một biến toàn cục, nó có thể được truy cập bằng các hàm bên dưới</span>

<span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> b <span class="token operator">=</span> a <span class="token operator">*</span> <span class="token number">3</span> <span class="token comment">// b không thể được truy cập bên ngoài hàm foo, nhưng có thể được truy cập bởi các hàm được định nghĩa bên trong foo</span>

<span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span> <span class="token parameter">c</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token number">2</span> <span class="token comment">// một biến `b` khác được tạo bên trong phạm vi hàm bar</span>
    <span class="token comment">// các thay đổi đối với biến `b` mới này không ảnh hưởng đến biến` b` cũ</span>
    console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> a <span class="token punctuation">,</span> b <span class="token punctuation">,</span> c <span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token function">bar</span> <span class="token punctuation">(</span> b <span class="token operator">*</span> <span class="token number">4</span> <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token function">foo</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token comment">// 4, 2, 48</span>

const a = 4 // a là một biến toàn cục, nó có thể được truy cập bằng các hàm bên dưới

function foo ( ) {

const b = a * 3 // b không thể được truy cập bên ngoài hàm foo, nhưng có thể được truy cập bởi các hàm được định nghĩa bên trong foo

function bar ( c ) {

const b = 2 // một biến `b` khác được tạo bên trong phạm vi hàm bar

// các thay đổi đối với biến `b` mới này không ảnh hưởng đến biến` b` cũ

console . log ( a , b , c )

}

bar ( b * 4 )

}

foo ( ) // 4, 2, 48

IIFE, Immediately Invoked Function Expression, is a popular pattern for creating local scopes

<span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// biểu thức hàm được bao quanh bởi dấu ngoặc</span>
<span class="token comment">// các biến được xác định ở đây</span>
<span class="token comment">// không thể truy cập bên ngoài</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token comment">// hàm ngay lập tức được gọi</span>

( function ( ) { // biểu thức hàm được bao quanh bởi dấu ngoặc

// các biến được xác định ở đây

// không thể truy cập bên ngoài

} ) ( ) // hàm ngay lập tức được gọi

For example

   <span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token number">1</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token number">2</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> c <span class="token operator">=</span> <span class="token number">3</span> <span class="token punctuation">;</span>

    <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token function">firstFunction</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
       <span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token number">5</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> c <span class="token operator">=</span> <span class="token number">6</span> <span class="token punctuation">;</span>
       <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token function">secondFunction</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token number">8</span> <span class="token punctuation">;</span>
        console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token string">a: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> a <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">, b: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> b <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">, c: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> c <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token template-punctuation string">`</span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
       <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
<span class="token comment">// =&gt; a = 1; b = 8; c = 6 </span>

const a = 1 ; const b = 2 ; const c = 3 ;

( function firstFunction ( ) {

const b = 5 ; const c = 6 ;

( function secondFunction ( ) {

const b = 8 ;

console . log ( ` a: ${ a } , b: ${ b } , c: ${ c } ` ) ;

} ) ( )

// => a = 1; b = 8; c = 6

Share the news now

Source : Viblo