Introduction
JavaScript là một ngôn ngữ lập trình biên dịch, sử dụng trên đa nền tảng và được thông dịch, còn được gọi là ngôn ngữ kịch bản cho các trang web. Javascript được dùng trong trang web bên cạnh HTML và CSS. JavaScript có thể được sử dụng cho các phát triển phía Client cũng như các phát triển phía Server. Javascript vừa là loại ngôn ngữ mệnh lệnh vừa là ngôn ngữ khai báo. JavaScript chứa một thư viện tiêu chuẩn của các đối tượng, như Mảng , Ngày tháng và Toán học , và một tập hợp cốt lõi của các phần tử ngôn ngữ như toán tử , cấu trúc điều khiển và câu lệnh.
Valiable
- Valiable là các vùng chứa được đặt tên để lưu trữ các giá trị dữ liêu.
- Valiable được khai báo bằng các từ khóa var, let, const
String
- Được sử dụng để biểu diễn và thao tác với một chuỗi các ký tự như chữ cái, số, dấu câu, dấu cách,…
- Chuỗi thường được viết trong dấu ngoặc đơn hoặc dấu ngoặc kép (‘…’,”…”).
‘this is a string’ hoặc “this is a string”
- Tạo chuỗi
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
- Kiểm tra chuỗi có bao nhiêu ký tự sử dụng thuộc tính length().
- Cú pháp
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
- Các chuỗi có chức năng tích hợp cho phép bạn kiểm tra và thao tác với nội dung của chúng.
- Đôi khi chúng ta cần thay đổi các nội dung của một chuỗi, vậy để thay đổi nội dung trong một chuỗi thì ta sử dụng phương thức replace()
- Cú pháp
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
- Không giống như String, Number không cần phải viết trong đấu ngoặc đơn hay ngoặc kép
- Number có thể là số nguyên (1,2,3,…) hoặc là số thập phân (3.14,…)
Rounding Number
- Chúng ta có thể làm các phép toán cơ bản bằng cách sử dụng các toán tử +, -, *, / và %.
- Nhưng đối với các phép toán phức tạp hơn, chúng ta có thể sử dụng đối tượng Math.
- Dùng Math để làm tròn số
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
- Để chuyển một số thành một chuỗi sử dụng phương thức toString()
- Phương thức toString() là một phương thức tích hợp sẵn của đối tượng JavaScript Number nó cho phép bạn chuyển đổi bất kỳ giá trị kiểu number thành kiểu biểu diễn string của nó.
- Ví dụ
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
- Các câu lệnh điều kiện được sử dụng để thay đổi luồng điều khiển của một chương trình,
dựa trên một điều kiện boolean được chỉ định. - Một câu lệnh điều kiện có dạng như sau
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
- Vòng lặp for cho phép chạy lặp lại một khối mã với một số lần nhất định.
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 là một biến đơn được sử dụng để lưu trữ các phần tử của các kiểu dữ liệu khác nhau để chúng có thể được truy cập thông qua một biến duy nhất.
- Có thể tạo mạng bằng 2 cách
- Cú pháp
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> |
hoặc
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> |
- Ví dụ:
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
- Để thực hiện lọc mạng ta sử dụng phương thức filter()
- Ví dụ
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
- Các phần tử của mảng có thể được truy cập thông qua index number.
- Index number bắt đầu từ 0 đến độ dài thuộc tính của mảng trừ đi một.
- Các phần tử của mảng phải được truy cập chỉ thông qua ký hiệu dấu ngoặc.
- Ví dụ
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
- Sử dụng vòng lặp for để truy cập và thao tác một danh sách của các giá trị trong một mạng.
- Truy cập các giá trị của mảng có thể được thực hiện bằng cách sử dụng một số nguyên.
- Mỗi mục trong một mảng được xác định bằng một số, bắt đầu từ số 0
- Ví dụ
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 là danh sách các giá trị tương tự mảng, ngoại trừ các giá trị được xác định bằng các key thay vì số nguyên.
Object Properties
- Bạn có thể truy cập và thao tác các thuộc tính của đối tượng, các khóa và giá trị mà một đối tượng chứa, sử dụng một phương thức rất giống với mạng
- Ví dụ
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 cung cấp một cách liệt kê nguyên bản tất cả các khóa có sẵn của một đối tượng. Điều này giúp cho việc lặt qua tất cả các thuộc tính của một đối tượng và thao tác tất cả các giá trị của chúng cho phù hợp.
- Để liệt kê tất cả các khóa đối tượng bằng cách sử dụng Object.keys()
- Ví dụ
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 là một khối nhận đầu vào, xử lý đầu vào đó và sau đó sản xuất đầu ra.
- Ví dụ
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 có thể được khai báo để nhận bất kỳ số lượng đối số nào.
- Các đối số có thể thuộc bất kỳ loại nào.
- Một đối số có thể là một số, một chuỗi, một mảng, một đối tượng và thậm chí một chức năng khác
- Ví dụ
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 là tập hợp các biến, đối tượng và hàm mà bạn có quyền được truy cập
- Javascript có 2 scope: global và local
- Biến được khai báo bên ngoài định nghĩa hàm là một biến toàn cục và giá trị của nó có thể truy cập và sửa đội được trong suốt chương trình.
- Biến được khai báo bên trong đinh nghĩa hàm là một biến cục bộ, nó được tạo và hủy mỗi khi hàm được thực thi, và nó không thể được truy cập bởi bất kỳ mã nào bên ngoài hàm.
- Các hàm được định nghĩa bên trong các hàm khác, được gọi là các hàm lồng nhau, có thể truy cập vào phạm vi chức năng mẹ của chúng.
- Ví dụ
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, là một mẫu phổ biến cho tạo local spcope
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> |
- Ví dụ
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> |