-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathJavascript_co_ban.htm
More file actions
181 lines (175 loc) · 66.7 KB
/
Javascript_co_ban.htm
File metadata and controls
181 lines (175 loc) · 66.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/_next/static/css/e503160baa2cd0f0.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-457dc077475af9ee.js"/><script src="/_next/static/chunks/4bd1b696-3cf1b1127452a604.js" async=""></script><script src="/_next/static/chunks/517-6cbbb564b6b7a65d.js" async=""></script><script src="/_next/static/chunks/main-app-8eb68113308ecd14.js" async=""></script><script src="/_next/static/chunks/app/layout-40e71d42d3ccdee8.js" async=""></script><script src="/_next/static/chunks/839-150b5850706a66a5.js" async=""></script><script src="/_next/static/chunks/664-604679c007c3b6d5.js" async=""></script><script src="/_next/static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js" async=""></script><meta name="next-size-adjust"/><title>Tài liệu HTML,CSS,JS - Javascript cơ bản</title><meta name="description" content="# Tài Liệu Tổng Hợp Về JavaScript
## 1. **Giới Thiệu JavaScript**
JavaScript (JS) là một ngôn ngữ lập trình đa năng, chủ yếu được sử dụng để phát triển các ứn..."/><meta property="og:title" content="Tài liệu HTML,CSS,JS - Javascript cơ bản"/><meta property="og:description" content="# Tài Liệu Tổng Hợp Về JavaScript
## 1. **Giới Thiệu JavaScript**
JavaScript (JS) là một ngôn ngữ lập trình đa năng, chủ yếu được sử dụng để phát triển các ứn..."/><meta property="og:image" content="https://study.sfit.com.vn/bgclb.jpg"/><meta property="og:image:alt" content="Tài liệu HTML,CSS,JS - Javascript cơ bản"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2024-12-10T08:16:34.469Z"/><meta property="article:author" content="zunohoang"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Tài liệu HTML,CSS,JS - Javascript cơ bản"/><meta name="twitter:description" content="# Tài Liệu Tổng Hợp Về JavaScript
## 1. **Giới Thiệu JavaScript**
JavaScript (JS) là một ngôn ngữ lập trình đa năng, chủ yếu được sử dụng để phát triển các ứn..."/><meta name="twitter:image" content="https://study.sfit.com.vn/bgclb.jpg"/><meta name="twitter:image:alt" content="Tài liệu HTML,CSS,JS - Javascript cơ bản"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="__variable_1e4310 __variable_c3aa02 antialiased"><main class="container mx-auto px-4 pt-2 py-8"><header class="mb-3 border-b-[1px] py-5 border-gray-300 flex justify-between"><div><h1 class="text-3xl font-bold">Tài liệu HTML,CSS,JS - Javascript cơ bản</h1><p class="text-gray-600">Đăng bởi <i>zunohoang</i> vào <time dateTime="2024-12-10T08:16:34.469Z">12/10/2024</time></p></div><p>👁️ <!-- -->23<!-- --> lượt xem</p></header><article><div class="markdown-body bg-white p-6 rounded-lg"><h1 class="text-3xl font-bold mb-4 pb-2 border-b">Tài Liệu Tổng Hợp Về JavaScript</h1>
<h2 class="text-2xl font-bold mt-6 mb-4">1. <strong>Giới Thiệu JavaScript</strong></h2>
<p class="mb-4">JavaScript (JS) là một ngôn ngữ lập trình đa năng, chủ yếu được sử dụng để phát triển các ứng dụng web. Nó giúp xây dựng các tính năng động cho các trang web, như xử lý sự kiện, tương tác với người dùng, làm việc với API, v.v.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Các Khái Niệm Cơ Bản:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><strong>Script</strong>: Đoạn mã JavaScript có thể được nhúng vào HTML để thực thi khi trang web được tải.</li>
<li class="mb-1"><strong>Web API</strong>: Các API cung cấp các tính năng như thao tác với DOM, xử lý sự kiện, gọi API từ server, v.v.</li>
<li class="mb-1"><strong>Interpreter</strong>: JavaScript được chạy trên trình duyệt (client-side) hoặc trên server thông qua Node.js (server-side).</li>
</ul>
<hr/>
<h2 class="text-2xl font-bold mt-6 mb-4">2. <strong>Các Biến và Kiểu Dữ Liệu</strong></h2>
<h3 class="text-xl font-bold mt-5 mb-3">Khai Báo Biến</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><strong><code class="bg-gray-100 rounded px-1 py-0.5">var</code></strong>: Khai báo biến, có thể bị thay đổi giá trị và phạm vi truy cập bị hạn chế.</li>
<li class="mb-1"><strong><code class="bg-gray-100 rounded px-1 py-0.5">let</code></strong>: Khai báo biến, có phạm vi block-level.</li>
<li class="mb-1"><strong><code class="bg-gray-100 rounded px-1 py-0.5">const</code></strong>: Khai báo hằng số (giá trị không thể thay đổi sau khi gán).</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3">Các Kiểu Dữ Liệu</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><strong>Number</strong>: Kiểu số, có thể là số nguyên hoặc số thập phân.</li>
<li class="mb-1"><strong>String</strong>: Kiểu chuỗi ký tự.</li>
<li class="mb-1"><strong>Boolean</strong>: Kiểu giá trị logic (<code class="bg-gray-100 rounded px-1 py-0.5">true</code> hoặc <code class="bg-gray-100 rounded px-1 py-0.5">false</code>).</li>
<li class="mb-1"><strong>Object</strong>: Kiểu đối tượng, có thể chứa nhiều giá trị.</li>
<li class="mb-1"><strong>Array</strong>: Mảng chứa một tập hợp các giá trị.</li>
<li class="mb-1"><strong>Null</strong>: Kiểu dữ liệu không có giá trị.</li>
<li class="mb-1"><strong>Undefined</strong>: Kiểu dữ liệu chưa được gán giá trị.</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3">Ví Dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-javascript" style="white-space:pre;color:#9cdcfe;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#569CD6">let</span><span> name </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#ce9178">"John"</span><span class="token" style="color:#d4d4d4">;</span><span> </span><span class="token" style="color:#6a9955">// String</span><span>
</span><span></span><span class="token" style="color:#569CD6">let</span><span> age </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#b5cea8">30</span><span class="token" style="color:#d4d4d4">;</span><span> </span><span class="token" style="color:#6a9955">// Number</span><span>
</span><span></span><span class="token" style="color:#569CD6">const</span><span> isActive </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#569cd6">true</span><span class="token" style="color:#d4d4d4">;</span><span> </span><span class="token" style="color:#6a9955">// Boolean</span><span>
</span><span></span><span class="token" style="color:#569CD6">let</span><span> person </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span class="token literal-property" style="color:#9cdcfe">name</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">"Alice"</span><span class="token" style="color:#d4d4d4">,</span><span> </span><span class="token literal-property" style="color:#9cdcfe">age</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">25</span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">;</span><span> </span><span class="token" style="color:#6a9955">// Object</span></code></div></pre>
<hr/>
<h2 class="text-2xl font-bold mt-6 mb-4">3. <strong>Cấu Trúc Điều Kiện</strong></h2>
<h3 class="text-xl font-bold mt-5 mb-3"><code class="bg-gray-100 rounded px-1 py-0.5">if</code>, <code class="bg-gray-100 rounded px-1 py-0.5">else if</code>, <code class="bg-gray-100 rounded px-1 py-0.5">else</code></h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-javascript" style="white-space:pre;color:#9cdcfe;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#569CD6">let</span><span> age </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#b5cea8">18</span><span class="token" style="color:#d4d4d4">;</span><span>
</span>
<span></span><span class="token" style="color:#c586c0">if</span><span> </span><span class="token" style="color:#d4d4d4">(</span><span>age </span><span class="token" style="color:#d4d4d4">>=</span><span> </span><span class="token" style="color:#b5cea8">18</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#4ec9b0">console</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">log</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">"You are an adult."</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span><span> </span><span class="token" style="color:#c586c0">else</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#4ec9b0">console</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">log</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">"You are a minor."</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3"><code class="bg-gray-100 rounded px-1 py-0.5">switch</code></h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-javascript" style="white-space:pre;color:#9cdcfe;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#569CD6">let</span><span> day </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#b5cea8">3</span><span class="token" style="color:#d4d4d4">;</span><span>
</span>
<span></span><span class="token" style="color:#c586c0">switch</span><span> </span><span class="token" style="color:#d4d4d4">(</span><span>day</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#569CD6">case</span><span> </span><span class="token" style="color:#b5cea8">1</span><span class="token" style="color:#d4d4d4">:</span><span>
</span><span> </span><span class="token" style="color:#4ec9b0">console</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">log</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">"Monday"</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#c586c0">break</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#569CD6">case</span><span> </span><span class="token" style="color:#b5cea8">2</span><span class="token" style="color:#d4d4d4">:</span><span>
</span><span> </span><span class="token" style="color:#4ec9b0">console</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">log</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">"Tuesday"</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#c586c0">break</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#c586c0">default</span><span class="token" style="color:#d4d4d4">:</span><span>
</span><span> </span><span class="token" style="color:#4ec9b0">console</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">log</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">"Invalid day"</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<hr/>
<h2 class="text-2xl font-bold mt-6 mb-4">4. <strong>Vòng Lặp (Loops)</strong></h2>
<h3 class="text-xl font-bold mt-5 mb-3"><code class="bg-gray-100 rounded px-1 py-0.5">for</code></h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-javascript" style="white-space:pre;color:#9cdcfe;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#c586c0">for</span><span> </span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#569CD6">let</span><span> i </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#b5cea8">0</span><span class="token" style="color:#d4d4d4">;</span><span> i </span><span class="token" style="color:#d4d4d4"><</span><span> </span><span class="token" style="color:#b5cea8">5</span><span class="token" style="color:#d4d4d4">;</span><span> i</span><span class="token" style="color:#d4d4d4">++</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#4ec9b0">console</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">log</span><span class="token" style="color:#d4d4d4">(</span><span>i</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3"><code class="bg-gray-100 rounded px-1 py-0.5">while</code></h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-javascript" style="white-space:pre;color:#9cdcfe;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#569CD6">let</span><span> i </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#b5cea8">0</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#c586c0">while</span><span> </span><span class="token" style="color:#d4d4d4">(</span><span>i </span><span class="token" style="color:#d4d4d4"><</span><span> </span><span class="token" style="color:#b5cea8">5</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#4ec9b0">console</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">log</span><span class="token" style="color:#d4d4d4">(</span><span>i</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> i</span><span class="token" style="color:#d4d4d4">++</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3"><code class="bg-gray-100 rounded px-1 py-0.5">do...while</code></h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-javascript" style="white-space:pre;color:#9cdcfe;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#569CD6">let</span><span> i </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#b5cea8">0</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#c586c0">do</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#4ec9b0">console</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">log</span><span class="token" style="color:#d4d4d4">(</span><span>i</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> i</span><span class="token" style="color:#d4d4d4">++</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span><span> </span><span class="token" style="color:#c586c0">while</span><span> </span><span class="token" style="color:#d4d4d4">(</span><span>i </span><span class="token" style="color:#d4d4d4"><</span><span> </span><span class="token" style="color:#b5cea8">5</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span></code></div></pre>
<hr/>
<h2 class="text-2xl font-bold mt-6 mb-4">5. <strong>Hàm (Functions)</strong></h2>
<h3 class="text-xl font-bold mt-5 mb-3">Cách Khai Báo Hàm</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-javascript" style="white-space:pre;color:#9cdcfe;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#569CD6">function</span><span> </span><span class="token" style="color:#dcdcaa">greet</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#9cdcfe">name</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#c586c0">return</span><span> </span><span class="token" style="color:#ce9178">"Hello, "</span><span> </span><span class="token" style="color:#d4d4d4">+</span><span> name</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span><span>
</span>
<span></span><span class="token" style="color:#4ec9b0">console</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">log</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#dcdcaa">greet</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">"John"</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Hàm Arrow (ES6)</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-javascript" style="white-space:pre;color:#9cdcfe;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#569CD6">const</span><span> </span><span class="token function-variable" style="color:#dcdcaa">greet</span><span> </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#9cdcfe">name</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#569CD6">=></span><span> </span><span class="token" style="color:#ce9178">"Hello, "</span><span> </span><span class="token" style="color:#d4d4d4">+</span><span> name</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#4ec9b0">console</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">log</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#dcdcaa">greet</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">"John"</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span></code></div></pre>
<hr/>
<h2 class="text-2xl font-bold mt-6 mb-4">6. <strong>Mảng (Arrays)</strong></h2>
<h3 class="text-xl font-bold mt-5 mb-3">Khai Báo Mảng</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-javascript" style="white-space:pre;color:#9cdcfe;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#569CD6">let</span><span> fruits </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#d4d4d4">[</span><span class="token" style="color:#ce9178">"apple"</span><span class="token" style="color:#d4d4d4">,</span><span> </span><span class="token" style="color:#ce9178">"banana"</span><span class="token" style="color:#d4d4d4">,</span><span> </span><span class="token" style="color:#ce9178">"cherry"</span><span class="token" style="color:#d4d4d4">]</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#4ec9b0">console</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">log</span><span class="token" style="color:#d4d4d4">(</span><span>fruits</span><span class="token" style="color:#d4d4d4">[</span><span class="token" style="color:#b5cea8">0</span><span class="token" style="color:#d4d4d4">]</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span> </span><span class="token" style="color:#6a9955">// apple</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các Phương Thức Mảng</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">push()</code>: Thêm phần tử vào cuối mảng.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">pop()</code>: Loại bỏ phần tử cuối mảng.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">shift()</code>: Loại bỏ phần tử đầu mảng.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">unshift()</code>: Thêm phần tử vào đầu mảng.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">forEach()</code>: Duyệt qua tất cả các phần tử trong mảng.</li>
</ul>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-javascript" style="white-space:pre;color:#9cdcfe;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span>fruits</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">push</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">"orange"</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span> </span><span class="token" style="color:#6a9955">// Thêm vào cuối</span><span>
</span><span>fruits</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">pop</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span> </span><span class="token" style="color:#6a9955">// Xóa phần tử cuối</span><span>
</span><span>fruits</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">forEach</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#9cdcfe">fruit</span><span> </span><span class="token" style="color:#569CD6">=></span><span> </span><span class="token" style="color:#4ec9b0">console</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">log</span><span class="token" style="color:#d4d4d4">(</span><span>fruit</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span></code></div></pre>
<hr/>
<h2 class="text-2xl font-bold mt-6 mb-4">7. <strong>Đối Tượng (Objects)</strong></h2>
<h3 class="text-xl font-bold mt-5 mb-3">Khai Báo Đối Tượng</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-javascript" style="white-space:pre;color:#9cdcfe;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#569CD6">let</span><span> person </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token literal-property" style="color:#9cdcfe">name</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">"John"</span><span class="token" style="color:#d4d4d4">,</span><span>
</span><span> </span><span class="token literal-property" style="color:#9cdcfe">age</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">30</span><span class="token" style="color:#d4d4d4">,</span><span>
</span><span> </span><span class="token function-variable" style="color:#dcdcaa">greet</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#569CD6">function</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#4ec9b0">console</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">log</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">"Hello, "</span><span> </span><span class="token" style="color:#d4d4d4">+</span><span> </span><span class="token" style="color:#569CD6">this</span><span class="token" style="color:#d4d4d4">.</span><span class="token property-access">name</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#d4d4d4">}</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">;</span><span>
</span>
<span></span><span class="token" style="color:#4ec9b0">console</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">log</span><span class="token" style="color:#d4d4d4">(</span><span>person</span><span class="token" style="color:#d4d4d4">.</span><span class="token property-access">name</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span> </span><span class="token" style="color:#6a9955">// John</span><span>
</span><span>person</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">greet</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span> </span><span class="token" style="color:#6a9955">// Hello, John</span></code></div></pre>
<hr/>
<h2 class="text-2xl font-bold mt-6 mb-4">8. <strong>Xử Lý Sự Kiện</strong></h2>
<p class="mb-4">JavaScript cho phép tương tác với các sự kiện trong trang web, như nhấp chuột, di chuột, thay đổi nội dung.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Ví Dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-javascript" style="white-space:pre;color:#9cdcfe;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#569CD6">let</span><span> button </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token dom" style="color:#9cdcfe">document</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">querySelector</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">"button"</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span>
<span>button</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">addEventListener</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">"click"</span><span class="token" style="color:#d4d4d4">,</span><span> </span><span class="token" style="color:#569CD6">function</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#dcdcaa">alert</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">"Button clicked!"</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span></code></div></pre>
<hr/>
<h2 class="text-2xl font-bold mt-6 mb-4">9. <strong>Promises và Async/Await</strong></h2>
<h3 class="text-xl font-bold mt-5 mb-3">Promises</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-javascript" style="white-space:pre;color:#9cdcfe;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#569CD6">let</span><span> promise </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#569CD6">new</span><span> </span><span class="token" style="color:#4ec9b0">Promise</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#569CD6">function</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#9cdcfe">resolve</span><span class="token" style="color:#d4d4d4">,</span><span class="token" style="color:#9cdcfe"> reject</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#569CD6">let</span><span> success </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#569cd6">true</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#c586c0">if</span><span> </span><span class="token" style="color:#d4d4d4">(</span><span>success</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#dcdcaa">resolve</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">"Operation successful"</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#d4d4d4">}</span><span> </span><span class="token" style="color:#c586c0">else</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#dcdcaa">reject</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">"Operation failed"</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#d4d4d4">}</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span>
<span>promise</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">then</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#569CD6">function</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#9cdcfe">value</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#4ec9b0">console</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">log</span><span class="token" style="color:#d4d4d4">(</span><span>value</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span> </span><span class="token" style="color:#6a9955">// Operation successful</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">.</span><span class="token" style="color:#c586c0">catch</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#569CD6">function</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#9cdcfe">error</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#4ec9b0">console</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">log</span><span class="token" style="color:#d4d4d4">(</span><span>error</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span> </span><span class="token" style="color:#6a9955">// Operation failed</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Async/Await</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-javascript" style="white-space:pre;color:#9cdcfe;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#569CD6">async</span><span> </span><span class="token" style="color:#569CD6">function</span><span> </span><span class="token" style="color:#dcdcaa">fetchData</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#569CD6">let</span><span> response </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#c586c0">await</span><span> </span><span class="token" style="color:#dcdcaa">fetch</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">"https://api.example.com/data"</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#569CD6">let</span><span> data </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#c586c0">await</span><span> response</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">json</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#4ec9b0">console</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">log</span><span class="token" style="color:#d4d4d4">(</span><span>data</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span><span>
</span>
<span></span><span class="token" style="color:#dcdcaa">fetchData</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span></code></div></pre>
<hr/>
<h2 class="text-2xl font-bold mt-6 mb-4">10. <strong>ES6+ Tính Năng Mới</strong></h2>
<h3 class="text-xl font-bold mt-5 mb-3">Destructuring</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-javascript" style="white-space:pre;color:#9cdcfe;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#569CD6">let</span><span> person </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span class="token literal-property" style="color:#9cdcfe">name</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">"Alice"</span><span class="token" style="color:#d4d4d4">,</span><span> </span><span class="token literal-property" style="color:#9cdcfe">age</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">25</span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#569CD6">let</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>name</span><span class="token" style="color:#d4d4d4">,</span><span> age</span><span class="token" style="color:#d4d4d4">}</span><span> </span><span class="token" style="color:#d4d4d4">=</span><span> person</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#4ec9b0">console</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">log</span><span class="token" style="color:#d4d4d4">(</span><span>name</span><span class="token" style="color:#d4d4d4">,</span><span> age</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span> </span><span class="token" style="color:#6a9955">// Alice 25</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Template Literals</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-javascript" style="white-space:pre;color:#9cdcfe;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#569CD6">let</span><span> name </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#ce9178">"John"</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#569CD6">let</span><span> greeting </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token template-string template-punctuation" style="color:#ce9178">`</span><span class="token template-string" style="color:#ce9178">Hello, </span><span class="token template-string" style="color:#569cd6">${</span><span class="token template-string" style="color:#9cdcfe">name</span><span class="token template-string" style="color:#569cd6">}</span><span class="token template-string" style="color:#ce9178">!</span><span class="token template-string template-punctuation" style="color:#ce9178">`</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#4ec9b0">console</span><span class="token" style="color:#d4d4d4">.</span><span class="token method property-access" style="color:#dcdcaa">log</span><span class="token" style="color:#d4d4d4">(</span><span>greeting</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span> </span><span class="token" style="color:#6a9955">// Hello, John!</span></code></div></pre>
<hr/>
<h2 class="text-2xl font-bold mt-6 mb-4">11. <strong>Các Thư Viện và Framework</strong></h2>
<p class="mb-4">JavaScript có rất nhiều thư viện và framework nổi bật giúp phát triển web dễ dàng hơn.</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><strong>React</strong>: Thư viện phát triển giao diện người dùng (UI).</li>
<li class="mb-1"><strong>Vue.js</strong>: Framework cho phép xây dựng ứng dụng web động.</li>
<li class="mb-1"><strong>Node.js</strong>: JavaScript trên server, giúp phát triển ứng dụng phía server.</li>
<li class="mb-1"><strong>jQuery</strong>: Thư viện giúp thao tác DOM và AJAX nhanh chóng.</li>
</ul>
<hr/>
<h2 class="text-2xl font-bold mt-6 mb-4">12. <strong>Tóm Tắt</strong></h2>
<p class="mb-4">JavaScript là một ngôn ngữ rất mạnh mẽ và linh hoạt. Được sử dụng chủ yếu để xây dựng các ứng dụng web, JavaScript có thể thực hiện tất cả các tác vụ từ xử lý sự kiện, tương tác với API, cho đến việc làm việc với DOM và xây dựng các ứng dụng một trang (SPA).</p></div></article><footer class="mt-8 border-t pt-4"><p class="text-center text-gray-500">© 2024 SFIT | <a target="_blank" rel="noopener noreferrer" href="https://github.com/zunohoang">zunohoang</a>. All rights reserved.</p></footer></main><!--$--><!--/$--><script src="/_next/static/chunks/webpack-457dc077475af9ee.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"4:\"$Sreact.fragment\"\n5:I[15244,[],\"\"]\n6:I[43866,[],\"\"]\n7:I[96641,[\"177\",\"static/chunks/app/layout-40e71d42d3ccdee8.js\"],\"Analytics\"]\n9:I[86213,[],\"OutletBoundary\"]\nb:I[86213,[],\"MetadataBoundary\"]\nd:I[86213,[],\"ViewportBoundary\"]\nf:I[34835,[],\"\"]\n1:HL[\"/_next/static/media/4473ecc91f70f139-s.p.woff\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff\"}]\n2:HL[\"/_next/static/media/463dafcda517f24f-s.p.woff\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff\"}]\n3:HL[\"/_next/static/css/e503160baa2cd0f0.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"wpuafLjPzZSt3xkV7rnb4\",\"p\":\"\",\"c\":[\"\",\"docs\",\"6757f8e228e76a08ee904cc7\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"docs\",{\"children\":[[\"id\",\"6757f8e228e76a08ee904cc7\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$4\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/e503160baa2cd0f0.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[null,[\"$\",\"body\",null,{\"className\":\"__variable_1e4310 __variable_c3aa02 antialiased\",\"children\":[[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}],[\"$\",\"$L7\",null,{}]]}]]}]]}],{\"children\":[\"docs\",[\"$\",\"$4\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"docs\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]]}],{\"children\":[[\"id\",\"6757f8e228e76a08ee904cc7\",\"d\"],[\"$\",\"$4\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"docs\",\"children\",\"$0:f:0:1:2:children:2:children:0\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$4\",\"c\",{\"children\":[\"$L8\",null,[\"$\",\"$L9\",null,{\"children\":\"$La\"}]]}],{},null]},null]},null]},null],[\"$\",\"$4\",\"h\",{\"children\":[null,[\"$\",\"$4\",\"93IPvc0GmpeBTR4Z3WAB8\",{\"children\":[[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\"}]]}]]}]]],\"m\":\"$undefined\",\"G\":[\"$f\",\"$undefined\"],\"s\":false,\"S\":false}\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"c:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"1\",{\"children\":\"Tài liệu HTML,CSS,JS - Javascript cơ bản\"}],[\"$\",\"meta\",\"2\",{\"name\":\"description\",\"content\":\"# Tài Liệu Tổng Hợp Về JavaScript\\n\\n## 1. **Giới Thiệu JavaScript**\\n\\nJavaScript (JS) là một ngôn ngữ lập trình đa năng, chủ yếu được sử dụng để phát triển các ứn...\"}],[\"$\",\"meta\",\"3\",{\"property\":\"og:title\",\"content\":\"Tài liệu HTML,CSS,JS - Javascript cơ bản\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:description\",\"content\":\"# Tài Liệu Tổng Hợp Về JavaScript\\n\\n## 1. **Giới Thiệu JavaScript**\\n\\nJavaScript (JS) là một ngôn ngữ lập trình đa năng, chủ yếu được sử dụng để phát triển các ứn...\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:image\",\"content\":\"https://study.sfit.com.vn/bgclb.jpg\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:image:alt\",\"content\":\"Tài liệu HTML,CSS,JS - Javascript cơ bản\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"8\",{\"property\":\"article:published_time\",\"content\":\"2024-12-10T08:16:34.469Z\"}],[\"$\",\"meta\",\"9\",{\"property\":\"article:author\",\"content\":\"zunohoang\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:title\",\"content\":\"Tài liệu HTML,CSS,JS - Javascript cơ bản\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:description\",\"content\":\"# Tài Liệu Tổng Hợp Về JavaScript\\n\\n## 1. **Giới Thiệu JavaScript**\\n\\nJavaScript (JS) là một ngôn ngữ lập trình đa năng, chủ yếu được sử dụng để phát triển các ứn...\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:image\",\"content\":\"https://study.sfit.com.vn/bgclb.jpg\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:image:alt\",\"content\":\"Tài liệu HTML,CSS,JS - Javascript cơ bản\"}]]\na:null\n"])</script><script>self.__next_f.push([1,"10:I[48073,[\"839\",\"static/chunks/839-150b5850706a66a5.js\",\"664\",\"static/chunks/664-604679c007c3b6d5.js\",\"642\",\"static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js\"],\"default\"]\n12:I[44839,[\"839\",\"static/chunks/839-150b5850706a66a5.js\",\"664\",\"static/chunks/664-604679c007c3b6d5.js\",\"642\",\"static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js\"],\"\"]\n11:T165a,"])</script><script>self.__next_f.push([1,"# Tài Liệu Tổng Hợp Về JavaScript\n\n## 1. **Giới Thiệu JavaScript**\n\nJavaScript (JS) là một ngôn ngữ lập trình đa năng, chủ yếu được sử dụng để phát triển các ứng dụng web. Nó giúp xây dựng các tính năng động cho các trang web, như xử lý sự kiện, tương tác với người dùng, làm việc với API, v.v.\n\n### Các Khái Niệm Cơ Bản:\n- **Script**: Đoạn mã JavaScript có thể được nhúng vào HTML để thực thi khi trang web được tải.\n- **Web API**: Các API cung cấp các tính năng như thao tác với DOM, xử lý sự kiện, gọi API từ server, v.v.\n- **Interpreter**: JavaScript được chạy trên trình duyệt (client-side) hoặc trên server thông qua Node.js (server-side).\n\n---\n\n## 2. **Các Biến và Kiểu Dữ Liệu**\n\n### Khai Báo Biến\n- **`var`**: Khai báo biến, có thể bị thay đổi giá trị và phạm vi truy cập bị hạn chế.\n- **`let`**: Khai báo biến, có phạm vi block-level.\n- **`const`**: Khai báo hằng số (giá trị không thể thay đổi sau khi gán).\n\n### Các Kiểu Dữ Liệu\n- **Number**: Kiểu số, có thể là số nguyên hoặc số thập phân.\n- **String**: Kiểu chuỗi ký tự.\n- **Boolean**: Kiểu giá trị logic (`true` hoặc `false`).\n- **Object**: Kiểu đối tượng, có thể chứa nhiều giá trị.\n- **Array**: Mảng chứa một tập hợp các giá trị.\n- **Null**: Kiểu dữ liệu không có giá trị.\n- **Undefined**: Kiểu dữ liệu chưa được gán giá trị.\n\n### Ví Dụ:\n```javascript\nlet name = \"John\"; // String\nlet age = 30; // Number\nconst isActive = true; // Boolean\nlet person = {name: \"Alice\", age: 25}; // Object\n```\n\n---\n\n## 3. **Cấu Trúc Điều Kiện**\n\n### `if`, `else if`, `else`\n```javascript\nlet age = 18;\n\nif (age \u003e= 18) {\n console.log(\"You are an adult.\");\n} else {\n console.log(\"You are a minor.\");\n}\n```\n\n### `switch`\n```javascript\nlet day = 3;\n\nswitch (day) {\n case 1:\n console.log(\"Monday\");\n break;\n case 2:\n console.log(\"Tuesday\");\n break;\n default:\n console.log(\"Invalid day\");\n}\n```\n\n---\n\n## 4. **Vòng Lặp (Loops)**\n\n### `for`\n```javascript\nfor (let i = 0; i \u003c 5; i++) {\n console.log(i);\n}\n```\n\n### `while`\n```javascript\nlet i = 0;\nwhile (i \u003c 5) {\n console.log(i);\n i++;\n}\n```\n\n### `do...while`\n```javascript\nlet i = 0;\ndo {\n console.log(i);\n i++;\n} while (i \u003c 5);\n```\n\n---\n\n## 5. **Hàm (Functions)**\n\n### Cách Khai Báo Hàm\n```javascript\nfunction greet(name) {\n return \"Hello, \" + name;\n}\n\nconsole.log(greet(\"John\"));\n```\n\n### Hàm Arrow (ES6)\n```javascript\nconst greet = (name) =\u003e \"Hello, \" + name;\nconsole.log(greet(\"John\"));\n```\n\n---\n\n## 6. **Mảng (Arrays)**\n\n### Khai Báo Mảng\n```javascript\nlet fruits = [\"apple\", \"banana\", \"cherry\"];\nconsole.log(fruits[0]); // apple\n```\n\n### Các Phương Thức Mảng\n- `push()`: Thêm phần tử vào cuối mảng.\n- `pop()`: Loại bỏ phần tử cuối mảng.\n- `shift()`: Loại bỏ phần tử đầu mảng.\n- `unshift()`: Thêm phần tử vào đầu mảng.\n- `forEach()`: Duyệt qua tất cả các phần tử trong mảng.\n\n```javascript\nfruits.push(\"orange\"); // Thêm vào cuối\nfruits.pop(); // Xóa phần tử cuối\nfruits.forEach(fruit =\u003e console.log(fruit));\n```\n\n---\n\n## 7. **Đối Tượng (Objects)**\n\n### Khai Báo Đối Tượng\n```javascript\nlet person = {\n name: \"John\",\n age: 30,\n greet: function() {\n console.log(\"Hello, \" + this.name);\n }\n};\n\nconsole.log(person.name); // John\nperson.greet(); // Hello, John\n```\n\n---\n\n## 8. **Xử Lý Sự Kiện**\n\nJavaScript cho phép tương tác với các sự kiện trong trang web, như nhấp chuột, di chuột, thay đổi nội dung.\n\n### Ví Dụ:\n```javascript\nlet button = document.querySelector(\"button\");\n\nbutton.addEventListener(\"click\", function() {\n alert(\"Button clicked!\");\n});\n```\n\n---\n\n## 9. **Promises và Async/Await**\n\n### Promises\n```javascript\nlet promise = new Promise(function(resolve, reject) {\n let success = true;\n if (success) {\n resolve(\"Operation successful\");\n } else {\n reject(\"Operation failed\");\n }\n});\n\npromise.then(function(value) {\n console.log(value); // Operation successful\n}).catch(function(error) {\n console.log(error); // Operation failed\n});\n```\n\n### Async/Await\n```javascript\nasync function fetchData() {\n let response = await fetch(\"https://api.example.com/data\");\n let data = await response.json();\n console.log(data);\n}\n\nfetchData();\n```\n\n---\n\n## 10. **ES6+ Tính Năng Mới**\n\n### Destructuring\n```javascript\nlet person = {name: \"Alice\", age: 25};\nlet {name, age} = person;\nconsole.log(name, age); // Alice 25\n```\n\n### Template Literals\n```javascript\nlet name = \"John\";\nlet greeting = `Hello, ${name}!`;\nconsole.log(greeting); // Hello, John!\n```\n\n---\n\n## 11. **Các Thư Viện và Framework**\n\nJavaScript có rất nhiều thư viện và framework nổi bật giúp phát triển web dễ dàng hơn.\n\n- **React**: Thư viện phát triển giao diện người dùng (UI).\n- **Vue.js**: Framework cho phép xây dựng ứng dụng web động.\n- **Node.js**: JavaScript trên server, giúp phát triển ứng dụng phía server.\n- **jQuery**: Thư viện giúp thao tác DOM và AJAX nhanh chóng.\n\n---\n\n## 12. **Tóm Tắt**\nJavaScript là một ngôn ngữ rất mạnh mẽ và linh hoạt. Được sử dụng chủ yếu để xây dựng các ứng dụng web, JavaScript có thể thực hiện tất cả các tác vụ từ xử lý sự kiện, tương tác với API, cho đến việc làm việc với DOM và xây dựng các ứng dụng một trang (SPA)."])</script><script>self.__next_f.push([1,"8:[\"$\",\"main\",null,{\"className\":\"container mx-auto px-4 pt-2 py-8\",\"children\":[[\"$\",\"header\",null,{\"className\":\"mb-3 border-b-[1px] py-5 border-gray-300 flex justify-between\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-3xl font-bold\",\"children\":\"Tài liệu HTML,CSS,JS - Javascript cơ bản\"}],[\"$\",\"p\",null,{\"className\":\"text-gray-600\",\"children\":[\"Đăng bởi \",[\"$\",\"i\",null,{\"children\":\"zunohoang\"}],\" vào \",[\"$\",\"time\",null,{\"dateTime\":\"2024-12-10T08:16:34.469Z\",\"children\":\"12/10/2024\"}]]}]]}],[\"$\",\"p\",null,{\"children\":[\"👁️ \",23,\" lượt xem\"]}]]}],[\"$\",\"article\",null,{\"children\":[\"$\",\"$L10\",null,{\"content\":\"$11\"}]}],[\"$\",\"footer\",null,{\"className\":\"mt-8 border-t pt-4\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-center text-gray-500\",\"children\":[\"© 2024 SFIT | \",[\"$\",\"$L12\",null,{\"href\":\"https://github.com/zunohoang\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"zunohoang\"}],\". All rights reserved.\"]}]}]]}]\n"])</script></body></html>