aboutsummaryrefslogtreecommitdiff
path: root/files/vi/web/javascript/guide/gioi-thieu/index.html
blob: f8fddcf6667a0485475fd212951c50a8753f29af (plain)
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
---
title: Giới thiệu
slug: Web/JavaScript/Guide/Gioi-thieu
tags:
  - Guide
  - JavaScript
translation_of: Web/JavaScript/Guide/Introduction
---
<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div>

<p class="summary">Trong phần này: giới thiệu về JavaScript và thảo luận về một số khái niệm cơ bản của JavaScript.</p>

<h2 id="Kiến_thức_nền_tảng_cần_có">Kiến thức nền tảng cần có</h2>

<p>Để đến với JavaScript, chúng tôi giả sử rằng bạn đã có một số hiểu biết nền tảng:</p>

<ul>
 <li>Có hiểu biết chung về Internet và World Wide Web ({{Glossary("WWW")}}).</li>
 <li>Đã biết và có thể làm việc được với HyperText Markup Language ({{Glossary("HTML")}}).</li>
 <li>Có một số kinh nghiệm về lập trình. Nếu bạn là một người mới tìm hiểu về lập trình, bạn nên đi theo những hướng dẫn có tại trang thông tin chính về <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/">JavaScript.</a></li>
</ul>

<h2 id="Bạn_có_thể_tìm_thêm_thông_tin_về_JavaScript_ở_đâu">Bạn có thể tìm thêm thông tin về JavaScript ở đâu?</h2>

<p>Tài liệu về JavaScript tại MDN bao gồm:</p>

<ul>
 <li><a href="/en-US/Learn">Learning the Web</a> cung cấp cho người mới bắt đầu thông tin và giới thiệu về các khái niệm cơ bản của lập trình và Internet.</li>
 <li><a href="/en-US/docs/Web/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">JavaScript Guide</a> (là phần hướng dẫn này) cung cấp một cái nhìn tổng quát về ngôn ngữ JavaScript và các Object của nó.</li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript Reference</a> cung cấp tài liệu chi tiết về JavaScript.</li>
</ul>

<p>Nếu bạn mới tìm hiểu JavaScript, hãy bắt đầu bằng cách đọc các bài viết tại <a href="/en-US/Learn">learning area</a><a href="/en-US/docs/Web/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">JavaScript Guide</a>. Một khi bạn đã nắm vững các nền tảng cơ bản, bạn có thể sử dụng <a href="/en-US/docs/Web/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript Reference</a> để lấy những thông tin chi tiết của từng object và các câu lệnh (statements).</p>

<h2 id="JavaScript_là_gì">JavaScript là gì?</h2>

<p>JavaScript là một ngôn ngữ lập trình đa nền tảng (<strong>cross-platform)</strong>, ngôn ngữ lập trình kịch bản, hướng đối tượng. JavaScript là một ngôn ngữ nhỏ và nhẹ (small and lightweight). Khi nằm bên trong một môi trường (host environment), JavaScript có thể kết nối tới các object của môi trường đó và cung cấp các cách quản lý chúng (object).</p>

<p>JavaScript chứa các thư viện tiêu chuẩn cho các object, ví dụ như:  <code>Array</code>, <code>Date</code>, và <code>Math</code>, và các yếu tố cốt lõi của ngôn ngữ lập trình như: toán tử (operators), cấu trúc điều khiển (control structures), và câu lệnh. JavaScript có thể được mở rộng cho nhiều mục đích bằng việc bổ sung thêm các object; ví dụ:</p>

<ul>
 <li><em>Client-side JavaScript</em> - JavaScript phía máy khách, JavaScript được mở rộng bằng cách cung cấp các object để quản lý trình duyệt và Document Object Model (DOM)  của nó. Ví dụ, phần mở rộng phía máy khách cho phép một ứng dụng tác động tới các yếu tố trên một trang HTML và phản hồi giống các tác động của người dùng như click chuột, nhập form, và chuyển trang.</li>
 <li><em>Server-side JavaScript </em>- JavaScript phía Server, JavaScript được mở rộng bằng cách cung cấp thêm các đối tượng cần thiết để để chạy JavaScript trên máy chủ. Ví dụ, phần mở rộng phía server này cho phép ứng dụng kết nối với cơ sở dữ liệu (database), cung cấp thông tin một cách liên tục từ một yêu cầu tới phần khác của ứng dụng, hoặc thực hiện thao tác với các tập tin trên máy chủ.</li>
</ul>

<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript và Java</h2>

<p>JavaScript và Java thì giống nhau ở những cái này nhưng lại khác nhau ở cái khác. Ngôn ngữ JavaScript có lẽ giống giống với ngôn ngữ Java nhưng JavaScript không có khai báo static cũng như không có "tính mạnh về kiểu" (strong type checking) như Java. Cú pháp (syntax) lập trình, đặt tên công thức và xây dựng điều khiển lưu lượng (control-flow) cơ bản của JavaScript phần lớn dựa theo ngôn ngữ lập trình Java, đó cũng là lý do tại sao JavaScript được đổi tên từ LiveScript thành JavaScript.</p>

<p>Ngược lại với hệ thống thời gian biên dịch (compile-time) Java của các lớp được xây dựng bởi các khai báo, JavaScript hỗ trợ nền tảng hệ thống thời gian chạy<span id="result_box" lang="vi"><span class="hps"> dựa</span> <span class="hps">trên</span> <span class="hps">một</span> <span class="hps">số lượng nhỏ các</span> <span class="hps">loại</span> <span class="hps">dữ liệu</span> <span class="hps">đại diện cho</span> <span class="hps">số, boolean và dữ liệu các chuỗi. JavaScript có một mô hình ít phổ biến hơn là mô hình đối tượng</span> <span class="hps">dựa trên nguyên mẫu</span> <span class="hps">(</span></span>prototype-based) <span lang="vi"><span class="hps">thay vì</span> <span class="hps">các</span> <span class="hps">mô hình đối tượng</span> <span class="hps">dựa trên lớp (</span></span>class-based)<span lang="vi">. </span><span id="result_box" lang="vi"><span class="hps">Các</span> <span class="hps">mô hình</span> <span class="hps">dựa trên nguyên mẫu</span> <span class="hps">cung cấp</span> khả năng <span class="hps">thừa kế</span> <span class="hps">năng động</span><span>;</span> <span class="hps">nghĩa là,</span> <span class="hps">những gì được</span><span class="hps"> kế thừa có thể</span> <span class="hps">khác nhau</span> <span class="hps">cho các đối tượng</span> <span class="hps">khác nhau.</span> <span class="hps">JavaScript</span> <span class="hps">cũng hỗ trợ</span> <span class="hps">các phương thức (function)</span> không khai báo bất cứ gì ở trỏng<span class="hps">.</span> <span class="hps">Phương thức có thể</span> <span class="hps">là một trong các thuộc tính (property) của</span> <span class="hps">các đối tượng,</span> <span class="hps">t</span><span>hực thi như là một phương thức đã được định kiểu (</span></span>loosely typed methods).</p>

<p>JavaScript là một ngôn ngữ rất tự do so với Java. Bạn có thể không cần khai báo tất cả biến (variable), lớp (class) và cả phương thức (method). Bạn không cần quan tâm cho dù phương thức đó là public, private hoặc protected, và bạn không cần phải implement interfaces. Biến, tham số (parameters), và kiểu trả về của phương thức (function return) cũng không cần phải rõ ràng.</p>

<p>Java is a class-based programming language designed for fast execution and type safety. Type safety means, for instance, that you can't cast a Java integer into an object reference or access private memory by corrupting Java bytecodes. Java's class-based model means that programs consist exclusively of classes and their methods. Java's class inheritance and strong typing generally require tightly coupled object hierarchies. These requirements make Java programming more complex than JavaScript programming.</p>

<p>In contrast, JavaScript descends in spirit from a line of smaller, dynamically typed languages such as HyperTalk and dBASE. These scripting languages offer programming tools to a much wider audience because of their easier syntax, specialized built-in functionality, and minimal requirements for object creation.</p>

<table class="standard-table">
 <caption>JavaScript so sánh với Java</caption>
 <thead>
  <tr>
   <th scope="col">JavaScript</th>
   <th scope="col">Java</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Hướng đối tượng (Object-oriented). Không phân biệt giữa kiểu (type) của các đối tượng (object). Tính kế thừa thông qua cơ chế nguyên mẫu (prototype), và các thuộc tính (property) cũng như phương thức có thể thêm vào bất cứ đối tượng nào một cách năng động.</td>
   <td>Class-based (nền tảng lớp.).Đối tượng được thành các lớp với tất cả kế thừa thông qua hệ thống phân cấp lớp. Các lớp không thể thêm vào các thuộc tính và phương thức mới một cách năng động.</td>
  </tr>
  <tr>
   <td>Không khai báo kiểu dữ liệu cho biến (dynamic typing).</td>
   <td>Phải khai báo kiểu dữ liệu cho biến (static typing).</td>
  </tr>
  <tr>
   <td>Không thể tự động ghi vào ổ đĩa cứng.</td>
   <td>Có thể tự động ghi dữ liệu vào đĩa cứng.</td>
  </tr>
 </tbody>
</table>

<p>Thêm thông tin về sự khác nhau giữa JavaScript và Java, xem chương: <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model" title="JavaScript/Guide/Details of the Object Model">Details of the object model</a>.</p>

<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript và tiêu chuẩn ECMAScript</h2>

<p>JavaScript được tiêu chuẩn hóa tại <a class="external" href="http://www.ecma-international.org/">Ecma International</a> — the European association for standardizing information and communication systems, Liên kết Châu Âu cho các tiêu chuẩn hóa hệ thống thông tin và truyền thông (ECMA trước đây là viết tắt cho the European Computer Manufacturers Association) cung cấp một tiêu chuẩn hóa, nền tảng ngôn ngữ lập trình mở quốc tế lên JavaScript. Phiên bản đã tiêu chuẩn hóa của JavaScript được gọi là ECMAScript, làm việc giống với cái cách mà tất cả ứng dụng đã được hỗ trợ theo tiêu chuẩn. Các công ty có thể sử dụng tiêu chuẩn ngôn ngữ mở (open standard language) để phát triển các implementation của JavaScript riêng cho họ. Tiêu chuẩn ECMAScript là tài liệu nằm trong tiêu chuẩn ECMA-262 (ECMA-262 specification) . Xem <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">New in JavaScript </a>để biết thêm về sự khác nhau giữa các phiên bản JavaScript cũng như sự khác nhau của phiên bản tiêu chuẩn ECMAScript (ECMAScript specification editions).</p>

<p>Tiêu chuẩn ECMA-262 cũng đã được phê duyệt bởi <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization) tại ISO-16262. Bạn cũng có thể tìm tiêu chuẩn trên <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">the Ecma International website</a>. Tiêu chuẩn ECMAScript không bao gồm các mô tả cho Document Object Model (DOM), nó được tiêu chuẩn hóa bởi <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a>. DOM định nghĩa cách mà các đối tượng trong HTML tiếp xúc với các đoạn script của bạn. <span id="result_box" lang="vi"><span class="hps">Để có được một</span> <span class="hps">cảm nhận tốt hơn</span> <span class="hps">về các công nghệ</span> <span class="hps">khác nhau được</span> <span class="hps">sử dụng khi</span> <span class="hps">lập trình với</span> <span class="hps">JavaScript</span><span>, hãy tham khảo</span> <span class="hps">bài viết</span> </span><a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">tổng quan về công nghệ JavaScript</a>.</p>

<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">Tài liệu JavaScript và tiêu chuẩn ECMAScript</h3>

<p>Tiêu chuẩn ECMAScript là một tập hợp yêu cầu các việc cần thực hiện khi triển khai ECMAScript; nó rất là hữu ích nếu bạn muốn tạo ra một trình biên dịch tiêu chuẩn các tính năng của ngôn ngữ trong ECMAScript implementation hoặc bộ máy biên dịch của bạn (giống như SpiderMonkey của Firefox, hoặc v8 của Chrome).</p>

<p>Tài liệu ECMAScript được tạo ra không dự định hỗ trợ các lập trình viên script; sử dụng tài liệu JavaScript để lấy thông tin cho việc viết scripts của bạn.</p>

<p>Tiêu chuẩn ECMAScript sử dụng các thuật ngữ và cú pháp có thể các lập trình viên JavaScript chưa được làm quen. Mặc dù sự mô tả của ngôn ngữ có lẽ khác nhau trong ECMAScript, nhưng bản thân ngôn ngữ vẫn giữ nguyên, không thay đổi. JavaScript hỗ trợ tất cả chức năng được nêu trong tiêu chuẩn ECMAScript.</p>

<p>Tài liệu JavaScript mô tả các khía cạnh của ngôn ngữ lập trình JavaScript, thích hợp cho các lập trình viên JavaScript sử dụng.</p>

<h2 id="Bắt_đầu_với_JavaScript">Bắt đầu với JavaScript</h2>

<p>Bắt đầu với JavaScript rất đơn giản: tất cả những gì bạn cần là một trình duyệt Web hiện đại. Trong các bài hướng dẫn có kèm theo một số tính năng JavaScript, mà nó chỉ chạy được ở các phiên bản trình duyệt mới nhất của Firefox, hoặc... cách tốt nhất là sử dụng một số phiên bản trình duyệt gần đây nhất của Firefox..</p>

<p>Có 2 công cụ được xây dựng trong Firefox, nó rất hữu ích để chạy các 'thí nghiệm' với JavaScript, đó là: <strong>Web Console</strong><strong>Scratchpad</strong>.</p>

<h3 id="Web_Console">Web Console</h3>

<p><a href="/en-US/docs/Tools/Web_Console">Web Console</a> cho phép bạn thấy thông tin về trang Web đang chạy, và kèm theo một <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter">command line</a>, với nó bạn có thể sử dụng để chạy một đoạn lệnh JavaScript trên trang Web hiện tại.</p>

<p>Mở Web Console bằng cách chọn "Web Console" từ menu "Web Developer" (Ctrl + Shift + I),  "Web Developer" nằm trong Menu chính của Firefox, nó có hình cờ lê, tên: Developer (nếu vẫn không thấy nó, bạn có thể mở menu và nhấn Customize để kéo nó ra ngoài). Sau khi mở lên, nó sẽ là 1 bảng hiển thị nằm phía dưới của cửa sổ trình duyệt. Có 1 ô nhập chạy dài dưới cùng của cửa sổ Web Console (khoanh vùng màu đỏ trong mình), nó chính là command line, với nó bạn có thể nhập vào đoạn JavaScript mà bạu muốn thực thi, và sau khi Enter thì trình duyệt sẽ chạy và trả về kết quả lên bảng Web Console nằm trên nó:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="Scratchpad">Scratchpad</h3>

<p>Web Console có thể rất hiệu quả cho việc chạy đơn lẻ từng dòng lệnh của JavaScript, bạn cũng có thể chạy những đoạn lệnh nhiều dòng với nó (Ctrl + Enter)... Nhưng có vẻ nó không được tiện lợi cho lắm! Bạn không thể lưu lại code khi sử dụng Web Console. Với các 'thí nghiệm' dài và phức tạp thì <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a> là một công cụ hiệu quả.</p>

<p>Để mở Scratchpad, chọn "Scratchpad" từ menu "Web Developer" (Ctrl + Shift + I),  "Web Developer" nằm trong Menu chính của Firefox, nó có hình cờ lê, tên: Developer (nếu vẫn không thấy nó, bạn có thể mở menu và nhấn Customize để kéo nó ra ngoài).  Nó sẽ mở lên trong một cửa sổ window riêng với trình duyệt và là một trình soạn thảo mà bạn có thể sử dụng để viết và chạy JavaScript trong trình duyệt. Bạn cũng có thế lưu lại hoặc mở lên các đoạn script đó lên từ ổ đĩa.</p>

<p>Nếu bạn chọn "Inspect", đoạn code trong cửa sổ nãy sẽ chạy trong trình duyệt và xuất kết quả trở về bảng dưới dạng comment:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7365/scratchpad.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="Hello_world">Hello world</h3>

<p>Bắt đầu với JavaScript, mở Web Console hoặc Scarthpad và viết code JavaScript hiển thị "Hello world" đầu tiên của bạn:</p>

<pre class="brush: js">function greetMe(user) {
  return "Hi " + user;
}

greetMe("Alice"); // "Hi Alice"
</pre>

<p>Trong trang tiếp theo, chúng tôi sẽ giới thiệu cho bạn về cú pháp và các đặc tính của ngôn ngữ JavaScript, với nó, bạn sẽ có thể viết các ứng dụng phức tạp.</p>

<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p>