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
1 2 3 4 5 |
<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> |
String Length
- Check how many characters a string has using the length() property.
- Syntax
1 2 3 4 |
<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> |
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
1 2 3 4 5 |
<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> |
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
1 2 3 4 5 |
<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> |
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
1 2 3 4 5 6 |
<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> |
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
1 2 3 4 5 6 7 8 |
<span class="token keyword">if</span> <span class="token punctuation">(</span> n <span class="token operator">></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>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> |
For loop
- The for loop allows a block of code to be repeated a certain number of times.
1 2 3 4 5 6 7 |
<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"><</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 < 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> |
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
1 2 3 |
<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> |
or
1 2 3 |
<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> |
- For example:
1 2 |
<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> |
1 2 |
<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> |
Array Filtering
- To perform network filtering, we use the filter() method.
- For example
1 2 3 4 5 6 7 8 |
<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> |
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
1 2 3 4 5 |
<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> |
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
1 2 3 4 5 6 7 8 |
<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"><</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">// => [ 'cats', 'dogs', 'rats' ]</span> <span class="token comment">// Thay đổi từng chuỗi để chúng là số nhiều</span> |
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
1 2 3 4 5 6 |
<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">// => only pizza</span> |
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
1 2 3 4 5 6 7 8 9 10 |
<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">// => [ 'make', 'model', 'year' ]</span> |
Functions
- Functions is a block that takes input, processes that input, and then produces output.
- For example
1 2 3 4 5 6 7 |
<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">// => Bananas tasted really good.</span> |
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
1 2 3 4 5 6 |
<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> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
- IIFE, Immediately Invoked Function Expression, is a popular pattern for creating local scopes
1 2 3 4 5 |
<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> |
- For example
1 2 3 4 5 6 7 8 9 10 11 |
<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">// => a = 1; b = 8; c = 6 </span> |