From 904a5994c87295d84d25f869d5555f35fbce5070 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:56 +0100 Subject: unslug vi: move --- .../api/audiocontext/createoscillator/index.html | 118 ---- .../baseaudiocontext/createoscillator/index.html | 118 ++++ files/vi/web/api/htmlelement/dataset/index.html | 139 ---- .../api/htmlorforeignelement/dataset/index.html | 139 ++++ .../vi/web/api/navigator/sendbeacon-vi/index.html | 104 --- files/vi/web/api/navigator/sendbeacon/index.html | 104 +++ files/vi/web/api/window/load_event/index.html | 124 ++++ .../introduction_to_the_css_box_model/index.html | 77 +++ .../kien_thuc_co_ban_ve_css_box_model/index.html | 77 --- .../basic_concepts_of_grid_layout/index.html | 763 +++++++++++++++++++++ .../tong_quan_ve_grid_layout/index.html | 763 --------------------- files/vi/web/css/filter-function/url/index.html | 30 - files/vi/web/css/url()/index.html | 30 + files/vi/web/events/load/index.html | 124 ---- files/vi/web/guide/css/getting_started/index.html | 44 -- files/vi/web/html_vi/index.html | 102 --- .../javascript/guide/cu-phap-lap-trinh/index.html | 710 ------------------- .../vi/web/javascript/guide/gioi-thieu/index.html | 137 ---- .../javascript/guide/grammar_and_types/index.html | 710 +++++++++++++++++++ .../web/javascript/guide/introduction/index.html | 137 ++++ .../reference/errors/qua_nhieu_de_quy/index.html | 54 -- .../reference/errors/too_much_recursion/index.html | 54 ++ .../global_objects/array/length/index.html | 144 ---- .../reference/global_objects/array/sort/index.html | 247 +++++++ .../s\341\272\257p_x\341\272\277p/index.html" | 247 ------- .../reference/global_objects/error/index.html | 240 +++++++ .../reference/global_objects/loi/index.html | 240 ------- .../global_objects/promise/prototype/index.html | 65 -- .../operators/arithmetic_operators/index.html | 313 --------- 29 files changed, 2743 insertions(+), 3411 deletions(-) delete mode 100644 files/vi/web/api/audiocontext/createoscillator/index.html create mode 100644 files/vi/web/api/baseaudiocontext/createoscillator/index.html delete mode 100644 files/vi/web/api/htmlelement/dataset/index.html create mode 100644 files/vi/web/api/htmlorforeignelement/dataset/index.html delete mode 100644 files/vi/web/api/navigator/sendbeacon-vi/index.html create mode 100644 files/vi/web/api/navigator/sendbeacon/index.html create mode 100644 files/vi/web/api/window/load_event/index.html create mode 100644 files/vi/web/css/css_box_model/introduction_to_the_css_box_model/index.html delete mode 100644 files/vi/web/css/css_box_model/kien_thuc_co_ban_ve_css_box_model/index.html create mode 100644 files/vi/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html delete mode 100644 files/vi/web/css/css_grid_layout/tong_quan_ve_grid_layout/index.html delete mode 100644 files/vi/web/css/filter-function/url/index.html create mode 100644 files/vi/web/css/url()/index.html delete mode 100644 files/vi/web/events/load/index.html delete mode 100644 files/vi/web/guide/css/getting_started/index.html delete mode 100644 files/vi/web/html_vi/index.html delete mode 100644 files/vi/web/javascript/guide/cu-phap-lap-trinh/index.html delete mode 100644 files/vi/web/javascript/guide/gioi-thieu/index.html create mode 100644 files/vi/web/javascript/guide/grammar_and_types/index.html create mode 100644 files/vi/web/javascript/guide/introduction/index.html delete mode 100644 files/vi/web/javascript/reference/errors/qua_nhieu_de_quy/index.html create mode 100644 files/vi/web/javascript/reference/errors/too_much_recursion/index.html delete mode 100644 files/vi/web/javascript/reference/global_objects/array/length/index.html create mode 100644 files/vi/web/javascript/reference/global_objects/array/sort/index.html delete mode 100644 "files/vi/web/javascript/reference/global_objects/array/s\341\272\257p_x\341\272\277p/index.html" create mode 100644 files/vi/web/javascript/reference/global_objects/error/index.html delete mode 100644 files/vi/web/javascript/reference/global_objects/loi/index.html delete mode 100644 files/vi/web/javascript/reference/global_objects/promise/prototype/index.html delete mode 100644 files/vi/web/javascript/reference/operators/arithmetic_operators/index.html (limited to 'files/vi/web') diff --git a/files/vi/web/api/audiocontext/createoscillator/index.html b/files/vi/web/api/audiocontext/createoscillator/index.html deleted file mode 100644 index e0a786a181..0000000000 --- a/files/vi/web/api/audiocontext/createoscillator/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: AudioContext.createOscillator() -slug: Web/API/AudioContext/createOscillator -translation_of: Web/API/BaseAudioContext/createOscillator ---- -

{{ APIRef("Web Audio API") }}

- -
-

Phương thức createOscillator() của giao thức {{ domxref("AudioContext") }} tạo một cái {{ domxref("OscillatorNode") }} (nút máy dao động). Tức là ta cái nguồn từ dạng sóng.

-
- -

Cú pháp

- -
var audioCtx = new AudioContext();
-var oscillator = audioCtx.createOscillator();
- -

Trả về

- -

Một cái {{domxref("OscillatorNode")}}.

- -

Ví dụ

- -

Ví dụ này trình bày sử dụng đơn giản của một cái AudioContext để tạo một cái OsillatorNode. Để biết thêm thông tin, xem biểu hiện, và trang {{domxref("OscillatorNode")}} của chúng tôi

- -

Ví dụ này trình bày sử dụng đơn giản của một cái AudioContext để tạo một cái OsillatorNode. Để biết thêm thông tin, xem biểu hiện Violent Theremin (app.js); và trang {{ domxref("OscillatorNode") }} của chúng tôi.

- -
// create web audio api context
-var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-
-// create Oscillator node
-var oscillator = audioCtx.createOscillator();
-
-oscillator.type = 'square';
-oscillator.frequency.value = 3000; // Hz
-oscillator.connect(audioCtx.destination);
-oscillator.start();
- -

Quy cách

- - - - - - - - - - - - - - -
Quy cáchĐịa vịChú thích
{{SpecName('Web Audio API', '#widl-AudioContext-createOscillator-OscillatorNode', 'createOscillator')}}{{Spec2('Web Audio API')}} 
- -

Tương thích trình duyệt

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
Đặc trưngChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22 (unprefixed)		6.0{{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
Đặc trưngAndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
-
- -

Xem thêm

- - diff --git a/files/vi/web/api/baseaudiocontext/createoscillator/index.html b/files/vi/web/api/baseaudiocontext/createoscillator/index.html new file mode 100644 index 0000000000..e0a786a181 --- /dev/null +++ b/files/vi/web/api/baseaudiocontext/createoscillator/index.html @@ -0,0 +1,118 @@ +--- +title: AudioContext.createOscillator() +slug: Web/API/AudioContext/createOscillator +translation_of: Web/API/BaseAudioContext/createOscillator +--- +

{{ APIRef("Web Audio API") }}

+ +
+

Phương thức createOscillator() của giao thức {{ domxref("AudioContext") }} tạo một cái {{ domxref("OscillatorNode") }} (nút máy dao động). Tức là ta cái nguồn từ dạng sóng.

+
+ +

Cú pháp

+ +
var audioCtx = new AudioContext();
+var oscillator = audioCtx.createOscillator();
+ +

Trả về

+ +

Một cái {{domxref("OscillatorNode")}}.

+ +

Ví dụ

+ +

Ví dụ này trình bày sử dụng đơn giản của một cái AudioContext để tạo một cái OsillatorNode. Để biết thêm thông tin, xem biểu hiện, và trang {{domxref("OscillatorNode")}} của chúng tôi

+ +

Ví dụ này trình bày sử dụng đơn giản của một cái AudioContext để tạo một cái OsillatorNode. Để biết thêm thông tin, xem biểu hiện Violent Theremin (app.js); và trang {{ domxref("OscillatorNode") }} của chúng tôi.

+ +
// create web audio api context
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+// create Oscillator node
+var oscillator = audioCtx.createOscillator();
+
+oscillator.type = 'square';
+oscillator.frequency.value = 3000; // Hz
+oscillator.connect(audioCtx.destination);
+oscillator.start();
+ +

Quy cách

+ + + + + + + + + + + + + + +
Quy cáchĐịa vịChú thích
{{SpecName('Web Audio API', '#widl-AudioContext-createOscillator-OscillatorNode', 'createOscillator')}}{{Spec2('Web Audio API')}} 
+ +

Tương thích trình duyệt

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
Đặc trưngChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
Đặc trưngAndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

Xem thêm

+ + diff --git a/files/vi/web/api/htmlelement/dataset/index.html b/files/vi/web/api/htmlelement/dataset/index.html deleted file mode 100644 index 44ce2c7393..0000000000 --- a/files/vi/web/api/htmlelement/dataset/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: HTMLElement.dataset -slug: Web/API/HTMLElement/dataset -tags: - - API - - HTML DOM - - HTMLElement - - Tham khảo - - Thuộc tính - - dataset -translation_of: Web/API/HTMLOrForeignElement/dataset ---- -
{{ APIRef("HTML DOM") }}
- -

The dataset property on the {{domxref("HTMLElement")}} interface provides read/write access to all the custom data attributes (data-*) set on the element. This access is available both in HTML and within the DOM.  It is a map of DOMString, one entry for each custom data attribute.  Note that the dataset property itself can be read, but not directly written.  Instead, all writes must be to the individual properties within the dataset, which in turn represent the data attributes.   Note also that an HTML data-attribute and its corresponding DOM dataset.property do not share the same name, but they are always similar:

- - - -

In addition to the information below, you'll find a how-to guide for using HTML data attributes in our article Using data attributes.

- -

Chuyển đổi tên

- -

Từ dash-style (kiểu-gạch-nối) sang camelCase (bướuLạcĐà): Tên thuộc tính dữ liệu tùy biến được chuyển đổi thành khóa cho {{ domxref("DOMStringMap") }} dự trên quy định sau:

- - - -

Từ camelCase (bướuLạcĐà) sang dash-style (kiểu-gạch-nối): Cách chuyển đổi ngược lại, dò theo khóa để tìm ra tên thuộc tính, bằng quy định sau:

- - - -

Việc có rằng buộc trong quy định trên nhằm đảm bảo việc chuyển đổi có thể đảo ngược cho nhau.

- -

Ví dụ, thuộc tính có tên data-abc-def sẽ có khóa tương ứng abcDef.

- - - -

Truy cập giá trị

- - - -

Loại giá trị

- - - -

Cú pháp

- - - -

Ví dụ

- -
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
- -
const el = document.querySelector('#user');
-
-// el.id == 'user'
-// el.dataset.id === '1234567890'
-// el.dataset.user === 'johndoe'
-// el.dataset.dateOfBirth === ''
-
-// gán dữ liệu cho thuộc tính data
-el.dataset.dateOfBirth = '1960-10-03';
-// Kết quả: el.dataset.dateOfBirth === 1960-10-03
-
-delete el.dataset.dateOfBirth;
-// Kết quả: el.dataset.dateOfBirth === undefined
-
-// 'someDataAttr' in el.dataset === false
-el.dataset.someDataAttr = 'mydata';
-// Kết quả: 'someDataAttr' in el.dataset === true
-
- -

Thông số kỹ thuật

- - - - - - - - - - - - - - - - - - - - - - - - -
Thông số kỹ thuậtTrạng tháiChú thích
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
- -

Tính tương thích trên trình duyệt

- - - -

{{Compat("api.HTMLElement.dataset")}}

- -

Xem thêm

- - diff --git a/files/vi/web/api/htmlorforeignelement/dataset/index.html b/files/vi/web/api/htmlorforeignelement/dataset/index.html new file mode 100644 index 0000000000..44ce2c7393 --- /dev/null +++ b/files/vi/web/api/htmlorforeignelement/dataset/index.html @@ -0,0 +1,139 @@ +--- +title: HTMLElement.dataset +slug: Web/API/HTMLElement/dataset +tags: + - API + - HTML DOM + - HTMLElement + - Tham khảo + - Thuộc tính + - dataset +translation_of: Web/API/HTMLOrForeignElement/dataset +--- +
{{ APIRef("HTML DOM") }}
+ +

The dataset property on the {{domxref("HTMLElement")}} interface provides read/write access to all the custom data attributes (data-*) set on the element. This access is available both in HTML and within the DOM.  It is a map of DOMString, one entry for each custom data attribute.  Note that the dataset property itself can be read, but not directly written.  Instead, all writes must be to the individual properties within the dataset, which in turn represent the data attributes.   Note also that an HTML data-attribute and its corresponding DOM dataset.property do not share the same name, but they are always similar:

+ + + +

In addition to the information below, you'll find a how-to guide for using HTML data attributes in our article Using data attributes.

+ +

Chuyển đổi tên

+ +

Từ dash-style (kiểu-gạch-nối) sang camelCase (bướuLạcĐà): Tên thuộc tính dữ liệu tùy biến được chuyển đổi thành khóa cho {{ domxref("DOMStringMap") }} dự trên quy định sau:

+ + + +

Từ camelCase (bướuLạcĐà) sang dash-style (kiểu-gạch-nối): Cách chuyển đổi ngược lại, dò theo khóa để tìm ra tên thuộc tính, bằng quy định sau:

+ + + +

Việc có rằng buộc trong quy định trên nhằm đảm bảo việc chuyển đổi có thể đảo ngược cho nhau.

+ +

Ví dụ, thuộc tính có tên data-abc-def sẽ có khóa tương ứng abcDef.

+ + + +

Truy cập giá trị

+ + + +

Loại giá trị

+ + + +

Cú pháp

+ + + +

Ví dụ

+ +
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
+ +
const el = document.querySelector('#user');
+
+// el.id == 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'johndoe'
+// el.dataset.dateOfBirth === ''
+
+// gán dữ liệu cho thuộc tính data
+el.dataset.dateOfBirth = '1960-10-03';
+// Kết quả: el.dataset.dateOfBirth === 1960-10-03
+
+delete el.dataset.dateOfBirth;
+// Kết quả: el.dataset.dateOfBirth === undefined
+
+// 'someDataAttr' in el.dataset === false
+el.dataset.someDataAttr = 'mydata';
+// Kết quả: 'someDataAttr' in el.dataset === true
+
+ +

Thông số kỹ thuật

+ + + + + + + + + + + + + + + + + + + + + + + + +
Thông số kỹ thuậtTrạng tháiChú thích
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
+ +

Tính tương thích trên trình duyệt

+ + + +

{{Compat("api.HTMLElement.dataset")}}

+ +

Xem thêm

+ + diff --git a/files/vi/web/api/navigator/sendbeacon-vi/index.html b/files/vi/web/api/navigator/sendbeacon-vi/index.html deleted file mode 100644 index a91adf05fd..0000000000 --- a/files/vi/web/api/navigator/sendbeacon-vi/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Navigator.sendBeacon() -slug: Web/API/Navigator/sendBeacon-vi -tags: - - API - - Beacon - - Navigator - - sendBeacon - - web perfomance -translation_of: Web/API/Navigator/sendBeacon ---- -
Phương thức navigator.sendBeacon() gửi {{glossary("Asynchronous", "bất đồng bộ")}} 1 lượng nhỏ dữ liệu đến máy chủ (web server) thông qua giao thức {{Glossary("HTTP")}} .
- -

Cú pháp

- -
navigator.sendBeacon(url, data);
-
- -

Tham Số

- -
-
url
-
Đường dẫn để nhận dữ liệu (Tạo request). Có thể là đường dẫn tuyệt đối hoặc tương đối.
-
data
-
Một đối tượng chứa dữ liệu để gửi đi có thể là 1 {{domxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, {{domxref("FormData")}}, hoặc {{domxref("URLSearchParams")}}.
-
- -

Giá trị trả về

- -

Phương thức sendBeacon() trả về true nếu như {{glossary("user agent")}} (tác nhân người dùng hay web browser) xếp dữ liệu (data) để gửi đi thành công. Nếu không, sẽ trả về false.

- -

Mô tả

- -

Phương thức này dùng cho phân tích và chuẩn đoán cần gửi dữ liệu về máy chủ trước thời điểm đóng trang, nếu như gửi sớm hơn, có thể sẽ bị thiếu thông tin cần thu thập. Ví dụ, đường dẫn nào người dùng nhấn vào trước khi chuyển đến trang khác và đóng trang.

- -

Việc đảm bảo rằng dữ liệu được gửi đi trong khi đóng trang (unload) trước đây thường rất khó để thực hiện, bởi user agents (web browser) luôn bỏ qua những {{domxref("XMLHttpRequest")}} bất đồng bộ được chạy trong sự kiện {{domxref("Window/unload_event", "unload")}}.

- -

Trước đây, người ta thường làm trễ thời gian tải lại trang đủ lâu để gửi được dữ liệu đi bằng 1 số cách sau:

- - - -

Tất cả những phương thức đó đều chặn quá trình tải lại trang, làm chậm việc chuyển đến trang tiếp theo. Trang tiếp theo không thể làm gì để ngăn chặn việc này, vì vậy trang mới sẽ có vẻ chậm đi, mặc dù đó là lỗi từ trang trước.

- -

Ví dụ sau đây là 1 đoạn code mẫu để gửi dữ liệu về server bằng 1 XMLHttpRequest đồng bộ trong khi xử lý unload. Điều này làm trễ việc tải trang tiếp theo.

- -
window.addEventListener("unload", function logData() {
-  var xhr = new XMLHttpRequest();
-  xhr.open("POST", "/log", false); // tham số thứ 3 là `false` để gửi request bất đồng bộ
-  xhr.send(analyticsData);
-});
-
- -

Đây là những gì sendBeacon() thay thế. Với phương thức sendBeacon(), dữ liệu sẽ được gửi đi bất đồng bộ, User Agent (trình duyệt) có thể làm thế mà không tạo trễ khi tải lại trang hoặc chuyển đến trang tiếp theo. Điều này giải quyết tất cả vấn đề với việc gửi các dữ liệu phân tích:

- - - -

Ví dụ sau đây là 1 đoạn code mẫu để gửi dữ liệu về server sử dụng phương thức sendBeacon().

- -
window.addEventListener("unload", function logData() {
-  navigator.sendBeacon("/log", analyticsData);
-});
-
- -

sendBeacon tạo 1 HTTP request với phương thức POST, kèm theo tất cả cookies liên quan khi được gọi.

- -

Tài liệu chi tiết

- - - - - - - - - - - - - - - - -
Tài liệuTrạng tháiBình luận
{{SpecName('Beacon', '#sendbeacon-method', 'sendBeacon()')}}{{Spec2('Beacon')}}Định nghĩa đầu tiên
- -

Tương thích với trình duyệt

- - - -

{{Compat("api.Navigator.sendBeacon")}}

- -

Xem thêm

- - diff --git a/files/vi/web/api/navigator/sendbeacon/index.html b/files/vi/web/api/navigator/sendbeacon/index.html new file mode 100644 index 0000000000..a91adf05fd --- /dev/null +++ b/files/vi/web/api/navigator/sendbeacon/index.html @@ -0,0 +1,104 @@ +--- +title: Navigator.sendBeacon() +slug: Web/API/Navigator/sendBeacon-vi +tags: + - API + - Beacon + - Navigator + - sendBeacon + - web perfomance +translation_of: Web/API/Navigator/sendBeacon +--- +
Phương thức navigator.sendBeacon() gửi {{glossary("Asynchronous", "bất đồng bộ")}} 1 lượng nhỏ dữ liệu đến máy chủ (web server) thông qua giao thức {{Glossary("HTTP")}} .
+ +

Cú pháp

+ +
navigator.sendBeacon(url, data);
+
+ +

Tham Số

+ +
+
url
+
Đường dẫn để nhận dữ liệu (Tạo request). Có thể là đường dẫn tuyệt đối hoặc tương đối.
+
data
+
Một đối tượng chứa dữ liệu để gửi đi có thể là 1 {{domxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, {{domxref("FormData")}}, hoặc {{domxref("URLSearchParams")}}.
+
+ +

Giá trị trả về

+ +

Phương thức sendBeacon() trả về true nếu như {{glossary("user agent")}} (tác nhân người dùng hay web browser) xếp dữ liệu (data) để gửi đi thành công. Nếu không, sẽ trả về false.

+ +

Mô tả

+ +

Phương thức này dùng cho phân tích và chuẩn đoán cần gửi dữ liệu về máy chủ trước thời điểm đóng trang, nếu như gửi sớm hơn, có thể sẽ bị thiếu thông tin cần thu thập. Ví dụ, đường dẫn nào người dùng nhấn vào trước khi chuyển đến trang khác và đóng trang.

+ +

Việc đảm bảo rằng dữ liệu được gửi đi trong khi đóng trang (unload) trước đây thường rất khó để thực hiện, bởi user agents (web browser) luôn bỏ qua những {{domxref("XMLHttpRequest")}} bất đồng bộ được chạy trong sự kiện {{domxref("Window/unload_event", "unload")}}.

+ +

Trước đây, người ta thường làm trễ thời gian tải lại trang đủ lâu để gửi được dữ liệu đi bằng 1 số cách sau:

+ + + +

Tất cả những phương thức đó đều chặn quá trình tải lại trang, làm chậm việc chuyển đến trang tiếp theo. Trang tiếp theo không thể làm gì để ngăn chặn việc này, vì vậy trang mới sẽ có vẻ chậm đi, mặc dù đó là lỗi từ trang trước.

+ +

Ví dụ sau đây là 1 đoạn code mẫu để gửi dữ liệu về server bằng 1 XMLHttpRequest đồng bộ trong khi xử lý unload. Điều này làm trễ việc tải trang tiếp theo.

+ +
window.addEventListener("unload", function logData() {
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", "/log", false); // tham số thứ 3 là `false` để gửi request bất đồng bộ
+  xhr.send(analyticsData);
+});
+
+ +

Đây là những gì sendBeacon() thay thế. Với phương thức sendBeacon(), dữ liệu sẽ được gửi đi bất đồng bộ, User Agent (trình duyệt) có thể làm thế mà không tạo trễ khi tải lại trang hoặc chuyển đến trang tiếp theo. Điều này giải quyết tất cả vấn đề với việc gửi các dữ liệu phân tích:

+ + + +

Ví dụ sau đây là 1 đoạn code mẫu để gửi dữ liệu về server sử dụng phương thức sendBeacon().

+ +
window.addEventListener("unload", function logData() {
+  navigator.sendBeacon("/log", analyticsData);
+});
+
+ +

sendBeacon tạo 1 HTTP request với phương thức POST, kèm theo tất cả cookies liên quan khi được gọi.

+ +

Tài liệu chi tiết

+ + + + + + + + + + + + + + + + +
Tài liệuTrạng tháiBình luận
{{SpecName('Beacon', '#sendbeacon-method', 'sendBeacon()')}}{{Spec2('Beacon')}}Định nghĩa đầu tiên
+ +

Tương thích với trình duyệt

+ + + +

{{Compat("api.Navigator.sendBeacon")}}

+ +

Xem thêm

+ + diff --git a/files/vi/web/api/window/load_event/index.html b/files/vi/web/api/window/load_event/index.html new file mode 100644 index 0000000000..130d6b9af0 --- /dev/null +++ b/files/vi/web/api/window/load_event/index.html @@ -0,0 +1,124 @@ +--- +title: load +slug: Web/Events/load +tags: + - DOM + - Event + - Sự kiện +translation_of: Web/API/Window/load_event +--- +

Sự kiện load có hiệu lực (được kích hoạt) khi các tài nguyên của một đối tượng hoặc các tài nguyên phụ thuộc vào đối tượng đó đã được tải nạp hoàn tất.

+ +

Các ví dụ

+ +

Window

+ +
<script>
+  window.addEventListener("load", function(event) {
+    console.log("Tất cả các tài nguyên đã được tải nạp hoàn tất!");
+  });
+</script>
+ +

Phần tử script

+ +
<script>
+  var script = document.createElement("script");
+  script.addEventListener("load", function(event) {
+    console.log("Script đã được tải nạp xong và thực thi");
+  });
+  script.src = "http://example.com/example.js";
+  script.async = true;
+  document.getElementsByTagName("script")[0].parentNode.appendChild(script);
+</script>
+ +

Thông tin cơ bản

+ +
+
Specification
+
DOM L3
+
Giao diện
+
UIEvent
+
Bubbles
+
Không
+
Có thể hủy bỏ
+
Không thể
+
Đối tượng
+
Window, Document, Element
+
Hành động mặc địch
+
Không.
+
+ +

Các thuộc tính

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Thuộc tínhKiểu / LoạiMô tả
target {{readonlyInline}}{{domxref("EventTarget")}}Mục tiêu để áp dụng sự kiện (Đối tượng thuộc cây DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Loại sự kiện
bubbles {{readonlyInline}}{{domxref("Boolean")}}Xác định sự kiện bình thường có bubbles hay không.
cancelable {{readonlyInline}}{{domxref("Boolean")}}Xác định sự kiện liệu có thể hủy bỏ được hay không.
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView", "document.defaultView")}} (window of the document)
detail {{readonlyInline}}long (float)0.
+ +

Các thông số kỹ thuật

+ + + + + + + + + + + + + + + + + + + +
Thông sốTrạng tháiDiễn giải
{{SpecName('UI Events', '#event-type-load', 'load')}}{{Spec2('UI Events')}} 
{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-load', 'Load event')}}{{Spec2('HTML WHATWG')}}Liên kết này đưa đến phần giải thích các bước được thực hiện khi quá trình tải nạp tài liệu kết thúc. Sự kiện 'load' cũng được kích hoạt ở nhiều phần tử. Và lưu ý rằng có nhiều chỗ trong Thông số kỹ thuật đề cập đến những thứ mà có thể "Trì hoãn sự kiện load".
+ +

Các sự kiện liên quan

+ + diff --git a/files/vi/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/vi/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..287d709494 --- /dev/null +++ b/files/vi/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,77 @@ +--- +title: Kiến thức cơ bản về CSS box model +slug: Web/CSS/CSS_Box_Model/Kien_thuc_co_ban_ve_css_box_model +tags: + - CSS + - CSS Box Model + - Layout +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +
{{CSSRef}}
+ +

Khi dựng giao diện của một trang web, theo lý thuyết chuẩn của CSS box model, engine của trình duyệt thể hiện các element trên trang web dưới dạng một hình chữ nhật. CSS sẽ giúp định nghĩa các thuộc tính như kích thước, vị trí và các thuộc tính khác (màu sắc, màu nền, kích thước của border...) của các element này.

+ +

Mỗi element được cấu tạo bởi bốn phần (vùng), các phần này được xác định thông qua các cạnh (đường biên) tương ứng: cạnh ngoài vùng nội dung (content edge), cạnh ngoài vùng padding (padding edge), cạnh ngoài vùng border (border edge), và cạnh ngoài vùng margin (margin edge).

+ +

CSS Box model

+ +

Vùng nội dung, được bọc bởi các cạnh ngoài (content edge), là nơi chứa nội dung chính của element như văn bản, hình ảnh, hoặc video. Các thông số về kích thước của vùng này gồm chiều rộng (content width) và chiều cao (content height). Vùng này thường có cả màu nền hoặc ảnh nền.

+ +

Nếu thuộc tính {{cssxref("box-sizing")}} được gán giá trị content-box (mặc định) và nếu element này có kiểu hiển thị block, thì kích thước của vùng nội dung có thể được định nghĩa bởi các thông số thuộc tính {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, và {{cssxref("max-height")}}.

+ +

Vùng padding, được bọc bởi các cạnh ngoài (padding edge), bọc lấy bên ngoài vùng nội dung bằng padding của element. Các thông số kích thước của vùng này gồm chiều rộng (padding-box width) và chiều cao (padding-box height).

+ +

Độ dày của padding được xác định dựa trên các thuộc tính {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}, hay viết tắt là {{cssxref("padding")}}.

+ +

Vùng border, được bọc bởi các cạnh ngoài (border edge), bọc lấy bên ngoài vùng padding bằng border của element. Các thông số kích thước của vùng này gồm chiều rộng (border-box width) và chiều cao (border-box height);

+ +

Độ dày của border được xác định dựa trên thuộc tính {{cssxref("border-width")}}. Nếu thuộc tính {{cssxref("box-sizing")}} được gán giá trị border-box, thì kích thước của vùng border có thể được định nghĩa bởi các thông số thuộc tính {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, và {{cssxref("max-height")}}. Nếu element có background bằng cách gán thuộc tính ({{cssxref("background-color")}} hoặc {{cssxref("background-image")}}),  thì background sẽ tràn ra cả vùng border. Bạn có thể thay đổi trạng thái mặc định này bằng cách sử dụng kèm thuộc tính {{cssxref("background-clip")}}.

+ +

Vùng margin, được bọc bởi các cạnh ngoài (margn edge), bọc lấy bên ngoài vùng border và tạo ra một vùng trống để giãn cách vị trí của element này với các element khác xung quanh. Các thông số kích thước của vùng này gồm chiều rộng (margin-box width) và chiều cao (margin-box height);

+ +

Kích thước của vùng margin được xác định dựa trên các thuộc tính  {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}, hay viết tắt là  {{cssxref("margin")}}. Khi có sự xung đột margin xảy ra (margin collapsing), sẽ khó xác định chính xác vùng margin của một element vì nó được chia sẻ cho các element với nhau.

+ +

Cuối cùng, lưu ý với một elements với thuộc tính hiển thị là inline (inline element), thì khoảng không gian mà nó chiếm dụng (chiều cao) được xác định bởi thuộc tính {{cssxref('line-height')}}, dù cho nó có các thuộc tính border hay padding thêm vào.

+ +

Tham khảo thêm

+ + + +

Đặc tả kĩ thuật

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Đặc tả kĩ thuậtTrạng tháiGhi chú
{{SpecName('CSS3 Box', '#intro')}}{{Spec2('CSS3 Box')}}
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Chỉnh sửa từ ngữ chính xác hơn, không có thay đổi gì về quan trọng.
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Các định nghĩa ban đầu.
+ +

Tham khảo thêm

+ + diff --git a/files/vi/web/css/css_box_model/kien_thuc_co_ban_ve_css_box_model/index.html b/files/vi/web/css/css_box_model/kien_thuc_co_ban_ve_css_box_model/index.html deleted file mode 100644 index 287d709494..0000000000 --- a/files/vi/web/css/css_box_model/kien_thuc_co_ban_ve_css_box_model/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Kiến thức cơ bản về CSS box model -slug: Web/CSS/CSS_Box_Model/Kien_thuc_co_ban_ve_css_box_model -tags: - - CSS - - CSS Box Model - - Layout -translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model ---- -
{{CSSRef}}
- -

Khi dựng giao diện của một trang web, theo lý thuyết chuẩn của CSS box model, engine của trình duyệt thể hiện các element trên trang web dưới dạng một hình chữ nhật. CSS sẽ giúp định nghĩa các thuộc tính như kích thước, vị trí và các thuộc tính khác (màu sắc, màu nền, kích thước của border...) của các element này.

- -

Mỗi element được cấu tạo bởi bốn phần (vùng), các phần này được xác định thông qua các cạnh (đường biên) tương ứng: cạnh ngoài vùng nội dung (content edge), cạnh ngoài vùng padding (padding edge), cạnh ngoài vùng border (border edge), và cạnh ngoài vùng margin (margin edge).

- -

CSS Box model

- -

Vùng nội dung, được bọc bởi các cạnh ngoài (content edge), là nơi chứa nội dung chính của element như văn bản, hình ảnh, hoặc video. Các thông số về kích thước của vùng này gồm chiều rộng (content width) và chiều cao (content height). Vùng này thường có cả màu nền hoặc ảnh nền.

- -

Nếu thuộc tính {{cssxref("box-sizing")}} được gán giá trị content-box (mặc định) và nếu element này có kiểu hiển thị block, thì kích thước của vùng nội dung có thể được định nghĩa bởi các thông số thuộc tính {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, và {{cssxref("max-height")}}.

- -

Vùng padding, được bọc bởi các cạnh ngoài (padding edge), bọc lấy bên ngoài vùng nội dung bằng padding của element. Các thông số kích thước của vùng này gồm chiều rộng (padding-box width) và chiều cao (padding-box height).

- -

Độ dày của padding được xác định dựa trên các thuộc tính {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}, hay viết tắt là {{cssxref("padding")}}.

- -

Vùng border, được bọc bởi các cạnh ngoài (border edge), bọc lấy bên ngoài vùng padding bằng border của element. Các thông số kích thước của vùng này gồm chiều rộng (border-box width) và chiều cao (border-box height);

- -

Độ dày của border được xác định dựa trên thuộc tính {{cssxref("border-width")}}. Nếu thuộc tính {{cssxref("box-sizing")}} được gán giá trị border-box, thì kích thước của vùng border có thể được định nghĩa bởi các thông số thuộc tính {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, và {{cssxref("max-height")}}. Nếu element có background bằng cách gán thuộc tính ({{cssxref("background-color")}} hoặc {{cssxref("background-image")}}),  thì background sẽ tràn ra cả vùng border. Bạn có thể thay đổi trạng thái mặc định này bằng cách sử dụng kèm thuộc tính {{cssxref("background-clip")}}.

- -

Vùng margin, được bọc bởi các cạnh ngoài (margn edge), bọc lấy bên ngoài vùng border và tạo ra một vùng trống để giãn cách vị trí của element này với các element khác xung quanh. Các thông số kích thước của vùng này gồm chiều rộng (margin-box width) và chiều cao (margin-box height);

- -

Kích thước của vùng margin được xác định dựa trên các thuộc tính  {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}, hay viết tắt là  {{cssxref("margin")}}. Khi có sự xung đột margin xảy ra (margin collapsing), sẽ khó xác định chính xác vùng margin của một element vì nó được chia sẻ cho các element với nhau.

- -

Cuối cùng, lưu ý với một elements với thuộc tính hiển thị là inline (inline element), thì khoảng không gian mà nó chiếm dụng (chiều cao) được xác định bởi thuộc tính {{cssxref('line-height')}}, dù cho nó có các thuộc tính border hay padding thêm vào.

- -

Tham khảo thêm

- - - -

Đặc tả kĩ thuật

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Đặc tả kĩ thuậtTrạng tháiGhi chú
{{SpecName('CSS3 Box', '#intro')}}{{Spec2('CSS3 Box')}}
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Chỉnh sửa từ ngữ chính xác hơn, không có thay đổi gì về quan trọng.
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Các định nghĩa ban đầu.
- -

Tham khảo thêm

- - diff --git a/files/vi/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/vi/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html new file mode 100644 index 0000000000..c1ebfbf5d5 --- /dev/null +++ b/files/vi/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -0,0 +1,763 @@ +--- +title: Tổng quan về Bố cục Lưới +slug: Web/CSS/CSS_Grid_Layout/tong_quan_ve_grid_layout +tags: + - ok +translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +--- +

Bố cục Lưới CSS đưa vào CSS một hệ thống lưới hai chiều. Các lưới có thể dùng để bố cục những vùng lớn trong trang hoặc những thành phần giao diện người dùng nhỏ. Bài viết này giới thiệu Bố cục Lưới CSS và hệ thống thuật ngữ nằm trong chi tiết kỹ thuật của Bố cục Lưới CSS Cấp 1. Những đặc trưng được thể hiện trong tổng quan này sẽ được giải thích chi tiết hơn trong phần còn lại của hướng dẫn.

+ +

Lưới là gì?

+ +

Một lưới là một tổ hợp của những đường ngang và dọc cắt nhau - một nhóm xác định các cột và nhóm kia xác định các hàng. Các phần tử có thể được đặt lên lưới, dựa vào các đường hàng và cột này. Lưới CSS có các đặc trưng sau:

+ +

Kích thước đường ray cố định và linh hoạt

+ +

Bạn có thể tạo một lưới có kích thước đường ray cố định - bằng điểm ảnh chẳng hạn. Điều này sẽ đặt lưới vào điểm ảnh xác định khớp với bố cục bạn mong muốn. Bạn cũng có thể tạo một lưới sử dụng kích thước linh hoạt bằng phần trăm hoặc dùng đơn vị mới fr được thiết kế cho mục đích này.

+ +

Sắp đặt phần tử

+ +

Bạn có thể đặt những phần tử vào những vị trí chính xác trên lưới bằng cách dùng số thứ tự đường, bằng tên hoặc trỏ vào một khu vực của lưới. Lưới có bao gồm một thuật toán để điều khiển việc sắp đặt các phần tử không có vị trí rõ ràng trên lưới.

+ +

Creation of additional tracks to hold content

+ +

You can define an explicit grid with grid layout but the specification also deals with the content added outside of a declared grid, which adds additional rows and columns when needed. Features such as adding “as many columns that will fit into a container” are included.

+ +

Alignment control

+ +

Grid contains alignment features so that we can control how the items align once placed into a grid area, and how the entire grid is aligned. 

+ +

Control of overlapping content

+ +

More than one item can be placed into a grid cell or area, they can partially overlap each other. This layering may then be controlled with {{cssxref("z-index")}} property.

+ +

Grid is a powerful specification and when combined with other parts of CSS such as flexbox, can help you to create layouts that were previously impossible to build in CSS. It all starts by creating a grid in your grid container.

+ +

The Grid container

+ +

We create a grid container by declaring display: grid or display: inline-grid on an element. As soon as we do this all direct children of that element will become grid items.

+ +

In this example, I have a containing div with a class of wrapper, inside are five child elements.

+ +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +

I make the .wrapper a grid container.

+ +
.wrapper {
+  display: grid;
+}
+
+ + + +

{{ EmbedLiveSample('The_Grid_container', '200', '330') }}

+ +

All the direct children are now grid items. In a web browser, you won’t see any difference to how these items are displayed before turning them into a grid, as grid has created a single column grid for the items. At this point, you may find it useful to work in Firefox Developer Edition, which has the Grid Inspector available as part of the Developer Tools. If you view this example in Firefox and inspect the grid, you will see a small icon next to the value grid. Click this and then the grid on this element will be overlaid in the browser window.

+ +

Using the Grid Highlighter in DevTools to view a grid

+ +

As you learn and then work with the CSS Grid Layout this tool will give you a better idea of what is happening with your grids visually.

+ +

If we want to start making this more grid-like we need to add column tracks.

+ +

Grid Tracks

+ +

We define rows and columns on our grid with the {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}} properties. These define grid tracks. A grid track is the space between any two lines on the grid. In the below image you can see a track highlighted – this is the first row track in our grid.

+ +

+ +

I can add to our earlier example by adding the grid-template-columns property, then defining the size of the column tracks.

+ +

I have now created a grid with three 200-pixel-wide column tracks. The child items will be laid out on this grid one in each grid cell.

+ +
+
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+
+ + + +

{{ EmbedLiveSample('grid_first', '610', '140') }}

+
+ +

The fr Unit

+ +

Tracks can be defined using any length unit. Grid also introduces an additional length unit to help us create flexible grid tracks. The new fr unit represents a fraction of the available space in the grid container. The next grid definition would create three equal width tracks that grow and shrink according to the available space.

+ +
+
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ + + +

{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}

+
+ +

In this next example, we create a definition with a 2fr track then two 1fr tracks. The available space is split into four. Two parts are given to the first track and one part each to the next two tracks.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+
+ +

In this final example, we mix absolute sized tracks with fraction units. The first track is 500 pixels, so the fixed width is taken away from the available space. The remaining space is divided into three and assigned in proportion to the two flexible tracks.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+
+ +

Track listings with repeat() notation

+ +

Large grids with many tracks can use the repeat() notation, to repeat all or a section of the track listing. For example the grid definition:

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ +

Can also be written as:

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

Repeat notation can be used for a part of the track listing. In this next example I have created a grid with an initial 20-pixel track, then a repeating section of 6 1fr tracks then a final 20-pixel track.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+
+ +

Repeat notation takes the track listing, and uses it to create a repeating pattern of tracks. In this next example, my grid will consist of 10 tracks, a 1fr track, and then followed by a 2fr track. This pattern will be repeated five times.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+
+ +

The implicit and explicit grid

+ +

When creating our example grid we defined our column tracks with the {{cssxref("grid-template-columns")}} property, but in addition let the grid create rows it needed for any other content. These rows are created in the implicit grid. The explicit grid consists of the rows and columns you define with {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}}. If you place something outside of that defined grid, or due to the amount of content more grid tracks are needed, then the grid creates rows and columns in the implicit grid. These tracks will be auto-sized by default, resulting in their size being based on the content that is inside them.

+ +

You can also define a set size for tracks created in the implicit grid with the {{cssxref("grid-auto-rows")}} and {{cssxref("grid-auto-columns")}} properties.

+ +

In the below example we use grid-auto-rows to ensure that tracks created in the implicit grid are 200 pixels tall.

+ +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+
+ + + +

{{ EmbedLiveSample('The_implicit_and_explicit_grid', '230', '420') }}

+ +

Track sizing and minmax()

+ +

When setting up an explicit grid or defining the sizing for automatically created rows or columns we may want to give tracks a minimum size, but also ensure they expand to fit any content that is added. For example, I may want my rows to never collapse smaller than 100 pixels, but if my content stretches to 300 pixels in height, then I would like the row to stretch to that height.

+ +

Grid has a solution for this with the {{cssxref("minmax", "minmax()")}} function. In this next example I am using minmax() in the value of {{cssxref("grid-auto-rows")}}. This means automatically created rows will be a minimum of 100 pixels tall, and a maximum of auto. Using auto means that the size will look at the content size and will stretch to give space for the tallest item in a cell, in this row.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+
+ + + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two
+    <p>I have some more content in.</p>
+    <p>This makes me taller than 100 pixels.</p>
+  </div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +

{{ EmbedLiveSample('Track_sizing_and_minmax()', '240', '470') }}

+ +

Grid Lines

+ +

It should be noted that when we define a grid we define the grid tracks, not the lines. Grid then gives us numbered lines to use when positioning items. In our three column, two row grid we have four column lines.

+ +

Diagram showing numbered grid lines.

+ +

Lines are numbered according to the writing mode of the document. In a left-to-right language, line 1 is on the left-hand side of the grid. In a right-to-left language, it is on the right-hand side of the grid. Lines can also be named, and we will look at how to do this in a later guide in this series.

+ +

Positioning items against lines

+ +

We will be exploring line based placement in full detail in a later article. The following example demonstrates doing this in a simple way. When placing an item, we target the line – rather than the track.

+ +

In the following example I am placing the first two items on our three column track grid, using the {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} and {{cssxref("grid-row-end")}} properties. Working from left to right, the first item is placed against column line 1, and spans to column line 4, which in our case is the far-right line on the grid. It begins at row line 1 and ends at row line 3, therefore spanning two row tracks.

+ +

The second item starts on grid column line 1, and spans one track. This is the default so I do not need to specify the end line. It also spans two row tracks from row line 3 to row line 5. The other items will place themselves into empty spaces on the grid.

+ +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+  <div class="box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+
+ + + +

{{ EmbedLiveSample('Positioning_items_against_lines', '230', '420') }}

+ +

Don't forget that you can use the Grid Inspector in Firefox Developer Tools to see how the items are positioned against the lines of the grid.

+ +

Grid Cells

+ +

A grid cell is the smallest unit on a grid. Conceptually it is like a table cell. As we saw in our earlier examples, once a grid is defined as a parent the child items will lay themselves out in one cell each of the defined grid. In the below image, I have highlighted the first cell of the grid.

+ +

The first cell of the grid highlighted

+ +

Grid Areas

+ +

Items can span one or more cells both by row or by column, and this creates a grid area. Grid areas must be rectangular – it isn’t possible to create an L-shaped area for example. The highlighted grid area spans two row and two column tracks.

+ +

A grid area

+ +

Gutters

+ +

Gutters or alleys between grid cells can be created using the {{cssxref("grid-column-gap")}} and {{cssxref("grid-row-gap")}} properties, or the shorthand {{cssxref("grid-gap")}}. In the below example, I am creating a 10-pixel gap between columns and a 1em gap between rows.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-column-gap: 10px;
+  grid-row-gap: 1em;
+}
+
+ +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ + + +

{{ EmbedLiveSample('Gutters') }}

+ +

Any space used by gaps will be accounted for before space is assigned to the flexible length fr tracks, and gaps act for sizing purposes like a regular grid track, however you cannot place anything into a gap. In terms of line-based positioning, the gap acts like a fat line.

+ +

Nesting grids

+ +

A grid item can become a grid container. In the following example, I have the three-column grid that I created earlier, with our two positioned items. In this case the first item has some sub-items. As these items are not direct children of the grid they do not participate in grid layout and so display in a normal document flow.

+ +
+
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +

Nested grid in flow

+ +

If I set box1 to display: grid I can give it a track definition and it too will become a grid. The items then lay out on this new grid.

+ +
.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ + +
+ +

{{ EmbedLiveSample('nesting', '600', '340') }}

+ +

In this case the nested grid has no relationship to the parent. As you can see in the example it has not inherited the {{cssxref("grid-gap")}} of the parent and the lines in the nested grid do not align to the lines in the parent grid.

+ +

Subgrid

+ +

In the level 1 grid specification there is a feature called subgrid which would let us create nested grids that use the track definition of the parent grid.

+ +
+

Subgrids are not yet implemented in any browsers, and the specification is subject to change.

+
+ +

In the current specification, we would edit the above nested grid example to use display: subgrid rather than display: grid, then remove the track definition. The nested grid will use the parent grid tracks to layout items.

+ +

It should be noted that the nested grid is in both dimensions—rows and columns. There is no concept of the implicit grid working with subgrids. This means you need to ensure that the parent grid has enough row and column tracks for all the subitems.

+ +
.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: subgrid;
+}
+
+ +

Layering items with z-index

+ +

Grid items can occupy the same cell. If we return to our example with items positioned by line number, we can change this to make two items overlap.

+ +
+
<div class="wrapper">
+  <div class="box box1">One</div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+}
+
+ + +
+ +

{{ EmbedLiveSample('l_ex', '230', '420') }}

+ +

The item box2 is now overlapping box1, it displays on top as it comes later in the source order.

+ +

Controlling the order

+ +

We can control the order in which items stack up by using the z-index property - just like positioned items. If we give box2 a lower z-index than box1 it will display below box1 in the stack.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  z-index: 2;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+  z-index: 1;
+}
+
+ + + +

{{ EmbedLiveSample('Controlling_the_order', '230', '420') }}

+ +

Next Steps

+ +

In this article we have had a very quick look through the Grid Layout Specification. Have a play with the code examples, and then move onto the next part of this guide where we will really start to dig into the detail of CSS Grid Layout.

+ + diff --git a/files/vi/web/css/css_grid_layout/tong_quan_ve_grid_layout/index.html b/files/vi/web/css/css_grid_layout/tong_quan_ve_grid_layout/index.html deleted file mode 100644 index c1ebfbf5d5..0000000000 --- a/files/vi/web/css/css_grid_layout/tong_quan_ve_grid_layout/index.html +++ /dev/null @@ -1,763 +0,0 @@ ---- -title: Tổng quan về Bố cục Lưới -slug: Web/CSS/CSS_Grid_Layout/tong_quan_ve_grid_layout -tags: - - ok -translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout ---- -

Bố cục Lưới CSS đưa vào CSS một hệ thống lưới hai chiều. Các lưới có thể dùng để bố cục những vùng lớn trong trang hoặc những thành phần giao diện người dùng nhỏ. Bài viết này giới thiệu Bố cục Lưới CSS và hệ thống thuật ngữ nằm trong chi tiết kỹ thuật của Bố cục Lưới CSS Cấp 1. Những đặc trưng được thể hiện trong tổng quan này sẽ được giải thích chi tiết hơn trong phần còn lại của hướng dẫn.

- -

Lưới là gì?

- -

Một lưới là một tổ hợp của những đường ngang và dọc cắt nhau - một nhóm xác định các cột và nhóm kia xác định các hàng. Các phần tử có thể được đặt lên lưới, dựa vào các đường hàng và cột này. Lưới CSS có các đặc trưng sau:

- -

Kích thước đường ray cố định và linh hoạt

- -

Bạn có thể tạo một lưới có kích thước đường ray cố định - bằng điểm ảnh chẳng hạn. Điều này sẽ đặt lưới vào điểm ảnh xác định khớp với bố cục bạn mong muốn. Bạn cũng có thể tạo một lưới sử dụng kích thước linh hoạt bằng phần trăm hoặc dùng đơn vị mới fr được thiết kế cho mục đích này.

- -

Sắp đặt phần tử

- -

Bạn có thể đặt những phần tử vào những vị trí chính xác trên lưới bằng cách dùng số thứ tự đường, bằng tên hoặc trỏ vào một khu vực của lưới. Lưới có bao gồm một thuật toán để điều khiển việc sắp đặt các phần tử không có vị trí rõ ràng trên lưới.

- -

Creation of additional tracks to hold content

- -

You can define an explicit grid with grid layout but the specification also deals with the content added outside of a declared grid, which adds additional rows and columns when needed. Features such as adding “as many columns that will fit into a container” are included.

- -

Alignment control

- -

Grid contains alignment features so that we can control how the items align once placed into a grid area, and how the entire grid is aligned. 

- -

Control of overlapping content

- -

More than one item can be placed into a grid cell or area, they can partially overlap each other. This layering may then be controlled with {{cssxref("z-index")}} property.

- -

Grid is a powerful specification and when combined with other parts of CSS such as flexbox, can help you to create layouts that were previously impossible to build in CSS. It all starts by creating a grid in your grid container.

- -

The Grid container

- -

We create a grid container by declaring display: grid or display: inline-grid on an element. As soon as we do this all direct children of that element will become grid items.

- -

In this example, I have a containing div with a class of wrapper, inside are five child elements.

- -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- -

I make the .wrapper a grid container.

- -
.wrapper {
-  display: grid;
-}
-
- - - -

{{ EmbedLiveSample('The_Grid_container', '200', '330') }}

- -

All the direct children are now grid items. In a web browser, you won’t see any difference to how these items are displayed before turning them into a grid, as grid has created a single column grid for the items. At this point, you may find it useful to work in Firefox Developer Edition, which has the Grid Inspector available as part of the Developer Tools. If you view this example in Firefox and inspect the grid, you will see a small icon next to the value grid. Click this and then the grid on this element will be overlaid in the browser window.

- -

Using the Grid Highlighter in DevTools to view a grid

- -

As you learn and then work with the CSS Grid Layout this tool will give you a better idea of what is happening with your grids visually.

- -

If we want to start making this more grid-like we need to add column tracks.

- -

Grid Tracks

- -

We define rows and columns on our grid with the {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}} properties. These define grid tracks. A grid track is the space between any two lines on the grid. In the below image you can see a track highlighted – this is the first row track in our grid.

- -

- -

I can add to our earlier example by adding the grid-template-columns property, then defining the size of the column tracks.

- -

I have now created a grid with three 200-pixel-wide column tracks. The child items will be laid out on this grid one in each grid cell.

- -
-
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: 200px 200px 200px;
-}
-
- - - -

{{ EmbedLiveSample('grid_first', '610', '140') }}

-
- -

The fr Unit

- -

Tracks can be defined using any length unit. Grid also introduces an additional length unit to help us create flexible grid tracks. The new fr unit represents a fraction of the available space in the grid container. The next grid definition would create three equal width tracks that grow and shrink according to the available space.

- -
-
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
- - - -

{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}

-
- -

In this next example, we create a definition with a 2fr track then two 1fr tracks. The available space is split into four. Two parts are given to the first track and one part each to the next two tracks.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: 2fr 1fr 1fr;
-}
-
- -

In this final example, we mix absolute sized tracks with fraction units. The first track is 500 pixels, so the fixed width is taken away from the available space. The remaining space is divided into three and assigned in proportion to the two flexible tracks.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: 500px 1fr 2fr;
-}
-
- -

Track listings with repeat() notation

- -

Large grids with many tracks can use the repeat() notation, to repeat all or a section of the track listing. For example the grid definition:

- -
.wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
- -

Can also be written as:

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
- -

Repeat notation can be used for a part of the track listing. In this next example I have created a grid with an initial 20-pixel track, then a repeating section of 6 1fr tracks then a final 20-pixel track.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: 20px repeat(6, 1fr) 20px;
-}
-
- -

Repeat notation takes the track listing, and uses it to create a repeating pattern of tracks. In this next example, my grid will consist of 10 tracks, a 1fr track, and then followed by a 2fr track. This pattern will be repeated five times.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr 2fr);
-}
-
- -

The implicit and explicit grid

- -

When creating our example grid we defined our column tracks with the {{cssxref("grid-template-columns")}} property, but in addition let the grid create rows it needed for any other content. These rows are created in the implicit grid. The explicit grid consists of the rows and columns you define with {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}}. If you place something outside of that defined grid, or due to the amount of content more grid tracks are needed, then the grid creates rows and columns in the implicit grid. These tracks will be auto-sized by default, resulting in their size being based on the content that is inside them.

- -

You can also define a set size for tracks created in the implicit grid with the {{cssxref("grid-auto-rows")}} and {{cssxref("grid-auto-columns")}} properties.

- -

In the below example we use grid-auto-rows to ensure that tracks created in the implicit grid are 200 pixels tall.

- -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 200px;
-}
-
- - - -

{{ EmbedLiveSample('The_implicit_and_explicit_grid', '230', '420') }}

- -

Track sizing and minmax()

- -

When setting up an explicit grid or defining the sizing for automatically created rows or columns we may want to give tracks a minimum size, but also ensure they expand to fit any content that is added. For example, I may want my rows to never collapse smaller than 100 pixels, but if my content stretches to 300 pixels in height, then I would like the row to stretch to that height.

- -

Grid has a solution for this with the {{cssxref("minmax", "minmax()")}} function. In this next example I am using minmax() in the value of {{cssxref("grid-auto-rows")}}. This means automatically created rows will be a minimum of 100 pixels tall, and a maximum of auto. Using auto means that the size will look at the content size and will stretch to give space for the tallest item in a cell, in this row.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-}
-
- - - -
<div class="wrapper">
-  <div>One</div>
-  <div>Two
-    <p>I have some more content in.</p>
-    <p>This makes me taller than 100 pixels.</p>
-  </div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- -

{{ EmbedLiveSample('Track_sizing_and_minmax()', '240', '470') }}

- -

Grid Lines

- -

It should be noted that when we define a grid we define the grid tracks, not the lines. Grid then gives us numbered lines to use when positioning items. In our three column, two row grid we have four column lines.

- -

Diagram showing numbered grid lines.

- -

Lines are numbered according to the writing mode of the document. In a left-to-right language, line 1 is on the left-hand side of the grid. In a right-to-left language, it is on the right-hand side of the grid. Lines can also be named, and we will look at how to do this in a later guide in this series.

- -

Positioning items against lines

- -

We will be exploring line based placement in full detail in a later article. The following example demonstrates doing this in a simple way. When placing an item, we target the line – rather than the track.

- -

In the following example I am placing the first two items on our three column track grid, using the {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} and {{cssxref("grid-row-end")}} properties. Working from left to right, the first item is placed against column line 1, and spans to column line 4, which in our case is the far-right line on the grid. It begins at row line 1 and ends at row line 3, therefore spanning two row tracks.

- -

The second item starts on grid column line 1, and spans one track. This is the default so I do not need to specify the end line. It also spans two row tracks from row line 3 to row line 5. The other items will place themselves into empty spaces on the grid.

- -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three</div>
-  <div class="box4">Four</div>
-  <div class="box5">Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 100px;
-}
-
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-}
-
-.box2 {
-  grid-column-start: 1;
-  grid-row-start: 3;
-  grid-row-end: 5;
-}
-
- - - -

{{ EmbedLiveSample('Positioning_items_against_lines', '230', '420') }}

- -

Don't forget that you can use the Grid Inspector in Firefox Developer Tools to see how the items are positioned against the lines of the grid.

- -

Grid Cells

- -

A grid cell is the smallest unit on a grid. Conceptually it is like a table cell. As we saw in our earlier examples, once a grid is defined as a parent the child items will lay themselves out in one cell each of the defined grid. In the below image, I have highlighted the first cell of the grid.

- -

The first cell of the grid highlighted

- -

Grid Areas

- -

Items can span one or more cells both by row or by column, and this creates a grid area. Grid areas must be rectangular – it isn’t possible to create an L-shaped area for example. The highlighted grid area spans two row and two column tracks.

- -

A grid area

- -

Gutters

- -

Gutters or alleys between grid cells can be created using the {{cssxref("grid-column-gap")}} and {{cssxref("grid-row-gap")}} properties, or the shorthand {{cssxref("grid-gap")}}. In the below example, I am creating a 10-pixel gap between columns and a 1em gap between rows.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-column-gap: 10px;
-  grid-row-gap: 1em;
-}
-
- -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- - - -

{{ EmbedLiveSample('Gutters') }}

- -

Any space used by gaps will be accounted for before space is assigned to the flexible length fr tracks, and gaps act for sizing purposes like a regular grid track, however you cannot place anything into a gap. In terms of line-based positioning, the gap acts like a fat line.

- -

Nesting grids

- -

A grid item can become a grid container. In the following example, I have the three-column grid that I created earlier, with our two positioned items. In this case the first item has some sub-items. As these items are not direct children of the grid they do not participate in grid layout and so display in a normal document flow.

- -
-
<div class="wrapper">
-  <div class="box box1">
-    <div class="nested">a</div>
-    <div class="nested">b</div>
-    <div class="nested">c</div>
-  </div>
-  <div class="box box2">Two</div>
-  <div class="box box3">Three</div>
-  <div class="box box4">Four</div>
-  <div class="box box5">Five</div>
-</div>
-
- -

Nested grid in flow

- -

If I set box1 to display: grid I can give it a track definition and it too will become a grid. The items then lay out on this new grid.

- -
.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
- - -
- -

{{ EmbedLiveSample('nesting', '600', '340') }}

- -

In this case the nested grid has no relationship to the parent. As you can see in the example it has not inherited the {{cssxref("grid-gap")}} of the parent and the lines in the nested grid do not align to the lines in the parent grid.

- -

Subgrid

- -

In the level 1 grid specification there is a feature called subgrid which would let us create nested grids that use the track definition of the parent grid.

- -
-

Subgrids are not yet implemented in any browsers, and the specification is subject to change.

-
- -

In the current specification, we would edit the above nested grid example to use display: subgrid rather than display: grid, then remove the track definition. The nested grid will use the parent grid tracks to layout items.

- -

It should be noted that the nested grid is in both dimensions—rows and columns. There is no concept of the implicit grid working with subgrids. This means you need to ensure that the parent grid has enough row and column tracks for all the subitems.

- -
.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  display: subgrid;
-}
-
- -

Layering items with z-index

- -

Grid items can occupy the same cell. If we return to our example with items positioned by line number, we can change this to make two items overlap.

- -
-
<div class="wrapper">
-  <div class="box box1">One</div>
-  <div class="box box2">Two</div>
-  <div class="box box3">Three</div>
-  <div class="box box4">Four</div>
-  <div class="box box5">Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 100px;
-}
-
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-}
-
-.box2 {
-  grid-column-start: 1;
-  grid-row-start: 2;
-  grid-row-end: 4;
-}
-
- - -
- -

{{ EmbedLiveSample('l_ex', '230', '420') }}

- -

The item box2 is now overlapping box1, it displays on top as it comes later in the source order.

- -

Controlling the order

- -

We can control the order in which items stack up by using the z-index property - just like positioned items. If we give box2 a lower z-index than box1 it will display below box1 in the stack.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 100px;
-}
-
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  z-index: 2;
-}
-
-.box2 {
-  grid-column-start: 1;
-  grid-row-start: 2;
-  grid-row-end: 4;
-  z-index: 1;
-}
-
- - - -

{{ EmbedLiveSample('Controlling_the_order', '230', '420') }}

- -

Next Steps

- -

In this article we have had a very quick look through the Grid Layout Specification. Have a play with the code examples, and then move onto the next part of this guide where we will really start to dig into the detail of CSS Grid Layout.

- - diff --git a/files/vi/web/css/filter-function/url/index.html b/files/vi/web/css/filter-function/url/index.html deleted file mode 100644 index bcff92ebe2..0000000000 --- a/files/vi/web/css/filter-function/url/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: url() -slug: Web/CSS/filter-function/url -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/filter-function/url ---- -
{{cssref}}
- -

Hàm url() CSS dùng SVG filter để thay đổi bề ngoài của ảnh.

- -

Cú pháp

- -
url(location)
- -

Thông số

- -
-
location
-
 {{cssxref("<url>")}} của tệp {{glossary("XML")}} chỉ định bộ lọc SVG, và có thể bao gồm một neo cho một phần tử bộ lọc cụ thể.
-
- -

Ví dụ

- -
url(resources.svg#c1)
- -

Liên quan

- - diff --git a/files/vi/web/css/url()/index.html b/files/vi/web/css/url()/index.html new file mode 100644 index 0000000000..bcff92ebe2 --- /dev/null +++ b/files/vi/web/css/url()/index.html @@ -0,0 +1,30 @@ +--- +title: url() +slug: Web/CSS/filter-function/url +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/filter-function/url +--- +
{{cssref}}
+ +

Hàm url() CSS dùng SVG filter để thay đổi bề ngoài của ảnh.

+ +

Cú pháp

+ +
url(location)
+ +

Thông số

+ +
+
location
+
 {{cssxref("<url>")}} của tệp {{glossary("XML")}} chỉ định bộ lọc SVG, và có thể bao gồm một neo cho một phần tử bộ lọc cụ thể.
+
+ +

Ví dụ

+ +
url(resources.svg#c1)
+ +

Liên quan

+ + diff --git a/files/vi/web/events/load/index.html b/files/vi/web/events/load/index.html deleted file mode 100644 index 130d6b9af0..0000000000 --- a/files/vi/web/events/load/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: load -slug: Web/Events/load -tags: - - DOM - - Event - - Sự kiện -translation_of: Web/API/Window/load_event ---- -

Sự kiện load có hiệu lực (được kích hoạt) khi các tài nguyên của một đối tượng hoặc các tài nguyên phụ thuộc vào đối tượng đó đã được tải nạp hoàn tất.

- -

Các ví dụ

- -

Window

- -
<script>
-  window.addEventListener("load", function(event) {
-    console.log("Tất cả các tài nguyên đã được tải nạp hoàn tất!");
-  });
-</script>
- -

Phần tử script

- -
<script>
-  var script = document.createElement("script");
-  script.addEventListener("load", function(event) {
-    console.log("Script đã được tải nạp xong và thực thi");
-  });
-  script.src = "http://example.com/example.js";
-  script.async = true;
-  document.getElementsByTagName("script")[0].parentNode.appendChild(script);
-</script>
- -

Thông tin cơ bản

- -
-
Specification
-
DOM L3
-
Giao diện
-
UIEvent
-
Bubbles
-
Không
-
Có thể hủy bỏ
-
Không thể
-
Đối tượng
-
Window, Document, Element
-
Hành động mặc địch
-
Không.
-
- -

Các thuộc tính

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Thuộc tínhKiểu / LoạiMô tả
target {{readonlyInline}}{{domxref("EventTarget")}}Mục tiêu để áp dụng sự kiện (Đối tượng thuộc cây DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Loại sự kiện
bubbles {{readonlyInline}}{{domxref("Boolean")}}Xác định sự kiện bình thường có bubbles hay không.
cancelable {{readonlyInline}}{{domxref("Boolean")}}Xác định sự kiện liệu có thể hủy bỏ được hay không.
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView", "document.defaultView")}} (window of the document)
detail {{readonlyInline}}long (float)0.
- -

Các thông số kỹ thuật

- - - - - - - - - - - - - - - - - - - -
Thông sốTrạng tháiDiễn giải
{{SpecName('UI Events', '#event-type-load', 'load')}}{{Spec2('UI Events')}} 
{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-load', 'Load event')}}{{Spec2('HTML WHATWG')}}Liên kết này đưa đến phần giải thích các bước được thực hiện khi quá trình tải nạp tài liệu kết thúc. Sự kiện 'load' cũng được kích hoạt ở nhiều phần tử. Và lưu ý rằng có nhiều chỗ trong Thông số kỹ thuật đề cập đến những thứ mà có thể "Trì hoãn sự kiện load".
- -

Các sự kiện liên quan

- - diff --git a/files/vi/web/guide/css/getting_started/index.html b/files/vi/web/guide/css/getting_started/index.html deleted file mode 100644 index 2bfc5c76bb..0000000000 --- a/files/vi/web/guide/css/getting_started/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Getting started with CSS -slug: Web/Guide/CSS/Getting_started -tags: - - Beginner - - CSS - - 'CSS:Getting_Started' - - Guide - - Needs - - NeedsBeginnerUpdate - - NeedsTranslation - - NeedsUpdate - - TopicStub - - Web -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -

This tutorial introduces you to the basic features and language (the syntax) for Cascading Style Sheets (CSS). You use CSS to change the look of a structured document, such as a web page. The tutorial also includes sample exercises you can try on your own computer to see the effects of CSS and features that work in modern browsers.

-

The tutorial is for beginners and anyone who would like to review the basics of CSS. If you have more experience with CSS, the CSS main page lists more advanced resources.

- -

What you need to get started

- -

Although the exercises can help you learn, you are not required to complete them. You can simply read the tutorial and look at the pictures.

-

Note: The tutorial covers how CSS works with color. It will be easier to complete these sections with a color display and normal color vision.

-

How to use this tutorial

-

To use this tutorial, read the pages carefully and in sequence. If you skip a page, it may be difficult to understand pages later in the tutorial.

-

Part I: The Basics of CSS

-

On each page, use the Information section to understand how CSS works. Use the Action section to try using CSS on your own computer.

-

To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.

-

To understand CSS in more depth, read the information that you find in boxes captioned More details. Use the links there to find reference information about CSS.

-

Part II: The Scope of CSS

-

A second part of the tutorial provides examples, which show the scope of CSS with other web and Mozilla technologies.

-
    -
  1. JavaScript
    2. -
  2. SVG graphics
    3. -
  3. XML data
    4. -
  4. XBL bindings
    5. -
  5. XUL user interfaces
    6. -
diff --git a/files/vi/web/html_vi/index.html b/files/vi/web/html_vi/index.html deleted file mode 100644 index 0b57e8194c..0000000000 --- a/files/vi/web/html_vi/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: HTML -slug: Web/HTML_vi -translation_of: Web/HTML ---- -
{{HTMLSidebar}}
- -

HTML (Viết tắt của cụm từ: HyperText Markup Language - Ngôn ngữ đánh dấu siêu văn bản) được xem như là khung xương của một trang web. Mọi việc "mô tả", "định nghĩa" bố cục, nội dung trang web đều do HTML thực hiện. Bên cạnh đó là sự xuất hiện của việc trang trí/trình bày do CSS đảm nhiệm và các chức năng/hành động của JavaScript.

- -

"HyperText" (Siêu văn bản) biểu diễn sự liên kết các trang web với nhau, trên một trang web sẽ có thể sẽ chứa nhiều trang khác nhau và mỗi trang như thế lại được quy ra là một tệp HTML. Liên kết là một khái niệm cơ bản của Web.

- -

Bằng cách tải nội dung lên mạng, liên kết nó với các trang do người khác tạo ra, và bạn đã trở thành một thành viên "tích cực" của World Wide Web. Tada!!!

- -

HTML sử dụng "markup" (chú thích) để chú thích văn bản, hình ảnh và những nội dung khác để hiển thị trên trình duyệt web. HTML markup chứa các "elements" (phần tử) đặc biệt như {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, và (n + 1) thứ khác nữa.

- -

Tags (các thẻ) trong HTML chả phân biệt chữ hoa hay thường đâu. Bạn thích viết kiểu gì cũng được. Ví dụ nhé: thẻ <title> có thể viết thành <Title>,<TiTlE> hay <tItLe> và rất rất nhiều cách khác. Đương nhiên là đủ và đúng chữ cái, chứ không phải t33nc0d3 đâu nha.

- -

Những bài viết dưới đây sẽ giúp đạo hữu hiểu rõ hơn về HTML.

- -
- - -
-
-

Nhập môn quyển

- -

HTML Học Vực của bần đạo có những mô-đun HTML chạy ngay từ đầu — đạo hữu không cần kiến thức trước đó vẫn sẽ được khai thông.

- -
-
Khai quyển HTML
-
Khai quyển sẽ thiết lập những kiến thức nền tảng cho đạo hữu, giúp đạo hữu hiểu các khái niệm và sử dụng các cú pháp quan trọng. Như việc cho HTML vào văn bản, làm sao để tạo liên kết, cách sử dụng HTML để xây dựng một trang web.
-
Nhúng và Đa phương tiện
-
Phần này sẽ khai mở kiến thức sử dụng HTML để nhét đa phương tiện vào website của đạo hữu, kể cả 1 vạn phương pháp nhét ảnh vào website, và làm sao để nhúng video, âm thanh và kể cả website của người khác.
-
Bảng trong HTML
-
Việc trình bày bảng trên một website theo một cách dễ hiểu và dễ tiếp cận có thể là thiên kiếp đối với nhiều người tu hành HTML Kỳ kinh. Phần này có phương pháp từ cơ bản đến phức tạp hơn, chẳng hạn như phụ đề và tóm tắt.
-
Biểu mẫu HTML
-
Biểu mẫu là thần hồn của website — nó cung cấp cho đạo hữu một thiên hà chức năng mà đạo hữu cần để tương tác với trang web. Ví dụ như Ký danh - Đăng nhập, gửi phản hồi, báo quan, mua bán dao dịch sản phẩm, và nhiều hơn thế nữa. Phần này sẽ chỉ dẫn đạo hữu tạo ra biểu mẫu từ client-side (tạm dịch: phía máy khách) / front-end (tạm dịch: phần giao diện).
-
Dùng HTML để giải quyết vấn đề thường gặp
-
Cung cấp liên kết tới các nội dung để giải thích làm sao để sử dụng HTML để giải quyết vấn đề thường mắc phải khi tạo lập một trang web: liên quan tới các tiêu đề, chèn hình ảnh hoặc video, nhấn mạnh nội dung, tạo lập biểu mẫu cơ bản, vân vân.
-
- -

Cao cấp chủ đề

- -
-
CORS để kích hoạt hình ảnh
-
Thuộc tính crossorigin, kết hợp với một CORS, cho phép hình ảnh được định nghĩa vởi phần tử {{HTMLElement("img")}} để có thể nạp từ bên ngoài và sử dụng bên trong phần tử {{HTMLElement("canvas")}} như thể nó đang được nạp từ nơi này.
-
Cài đặt thuộc tính CORS
-
Một số phần tử HTML cung cấp sự hỗ trợ cho CORS, ví dụ như {{HTMLElement("img")}} hay {{HTMLElement("video")}}, có một thuộc tính crossorigin (đặc tính crossOrigin), cho phép định hình các yêu cầu CORS cho dữ liệu đã nạp của phần tử .
-
Quản lý tập trung trong HTML
-
Thuộc tính activeElement DOM và phương thức hasFocus() DOM giúp bạn theo dõi và kiểm soát sự tương tác của người dùng với các phần tử trên một trang web.
-
Sử dụng bộ nhớ đệm (cache) của ứng dụng
-
Ứng dụng bộ nhớ đệm cho phép các ứng dụng dựa trên nền tảng web chạy offline. Bạn có thể sử dụng giao diện Application Cache (AppCache) để cung cấp các tài nguyên mà trình duyệt lưu trữ và cung cấp cho người dùng ngoại tuyến. Các ứng dụng được lưu trữ trong bộ nhớ cache và hoạt động chính xác ngay cả khi người dùng Refresh lại khi đang ngoại tuyến.
-
Tải trước nội dung cùng với rel="preload"
-
Giá trị preload trong thuộc tính {{htmlattrxref("rel", "link")}} của phần ử {{htmlelement("link")}} cho phép bạn viết yêu cầu tìm kiếm khai báo trong thẻ HTML {{htmlelement("head")}} của bạn, xác định các nguồn tài nguyên mà trang bạn sẽ cần tới trước khi tải trang, thứ bạn muốn tải trước trong cái vòng tròn tải trang, trước cả khi trình duyệt chính thức hoàn lại nội dung vào đó. Điều này đảm bảo rằng chúng được tạo sẵn, sớm hơn và ít có khả năng chặn render đầu tiên của trang, làm cải thiện hiệu suất. Tóm lại bài này sẽ cho bạn hiểu cơ bản làm cách nào mà cái preload làm việc.
-
-
- -
-

Đại kỳ thư

- -
-
HTML kỳ kinh
-
Tất tần tật cá phần tử HTML, mỗi thứ có thể được sửa đổi bởi một số thuộc tính. Tài liệu HTML đã được kết nối với nhau bằng cái liên kết này.
-
Phần tử HTML kỳ kinh
-
Bách khoa toàn thư về Phần tử HTML.
-
Thuộc tính HTML kỳ kinh
-
Phần tử trong HTML có thuộc tính. Đó là việc bổ xung giá trị để định hình các phần tử hay điều chỉnh hành động của chúng nhiều cách khác nhau.
-
Thuộc tính toàn cầu
-
Thuộc tính toàn cầu có thể áp đặt lên toàn bộ phần tử HTML, kể cả khi nó chả có trong tiêu chuẩn. Có nghĩa là bất cứ pần tử không theo tiêu chuẩn nào vẫn phải bị áp đặt bởi mấy cái thuộc tính này, kể cả việc này không phù hợp với tài liệu HTML-5.
-
Phần tử hướng nội and Phần tử phân khối
-
Phần tử HTML luôn luôn "inline" (hướng nội) hoặc "block-level" (phân khối). Phần tử inline chỉ chiếm không gian giới hạn bởi các thẻ định nghĩa nó. Phần tử block-level chiếm cả vùng không gian của phần tử cha mẹ (container - vùng chứa), và rồi tạo thành một "khối".
-
Phân loại liên kết
-
Trong HTML, các liên kết khác nhau có thể dùng để thiết lập mối quan hệ giữa hai tài liệu. Phần tử liên kết có thể được phân ra các loại <a>, <area>, và <link>.
-
Định dạng đa phương tiện được hỗ trợ bởi phần tử audio và video
-
Phần tử <audio> và <video> cho phép ta phát âm thanh và video. Mấy cái phần tử này cung cấp một trình phát của chính trình duyệt thay cho việc sử dụng Flash Player hay một vài phần mở rộng khác.
-
-
Các thể loại nội dung HTML
-
HTML bao gồm nhiều loại nội dung, mỗi trong số đó cho phép sử dụng trong một ngữ cảnh nhất định và không được phép ở chỗ khác. Tương tự, mỗi ths có một mục nội dung khác mà chúng có thể chứa và các phàn tử có thể hoặc không thể sử dụng ở bên trong chúng. Đây là hướng dẫn cho các loại này.
-
Chế độ không minh bạch và chế độ tiêu chuẩn
-
Biên niên sử về chế độ quirks (không minh bạch) và chế độ standards (tiêu chuẩn).
-
- -

Chủ đề liên quan

- -
-
Áp dụng màu sắc vào HTML sử dụng CSS
-
Bài này sẽ bao gồm nhiều cách sử dụng CSS để thêm màu vào nội dung HTML, liệt kê các phàn của tệp HTML có thể đổ màu và dùng thuộc tính CSS gì khi làm như vậy. Bao cả ví dụ, liên kết tới công cụ xây dựng bảng màu và nhiều hơn thế nữa.
-
-
-
-Xem tất...
diff --git a/files/vi/web/javascript/guide/cu-phap-lap-trinh/index.html b/files/vi/web/javascript/guide/cu-phap-lap-trinh/index.html deleted file mode 100644 index 64f63492d2..0000000000 --- a/files/vi/web/javascript/guide/cu-phap-lap-trinh/index.html +++ /dev/null @@ -1,710 +0,0 @@ ---- -title: Cú pháp lập trình -slug: Web/JavaScript/Guide/cu-phap-lap-trinh -translation_of: Web/JavaScript/Guide/Grammar_and_types ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}
- -

Phần này nói về các cú pháp cơ bản của ngôn ngữ JavaScript, các cách khai báo biến, các loại dữ liệu và chính tả (literal).

- -

Cơ bản

- -

Cú pháp của JavaScript (JS) phần lớn được vay mượn từ Java, nhưng JS cũng chịu ảnh hưởng từ cú pháp của các ngôn ngữ lập trình khác như Awk, Perl và Python.

- -

JavaScript là ngôn ngữ lập trình sử dụng chuẩn kí tự Unicode và khi viết cũng cần phải lưu ý phân biệt chữ HOA và chữ thường (case-sensitive). Điều này có nghĩa là các từ như Früh (trong tiếng Đức có nghĩa là "sớm" - early) có thể được sử dụng đặt tên cho biến.

- -
let Früh = "foobar"
-
- -

In JavaScript, instructions are called {{Glossary("Statement", "statements")}} and are separated by a semicolon (;).

- -

Dấu chấm phẩy (;) chỉ cần thiết nếu trên cùng một dòng có từ hai câu lệnh trở lên. Trường hợp câu lệnh nằm riêng một dòng thì không cần dấu chấm phẩy.

- -

ECMAScript cũng có những nguyên tắc để tự động thêm dấu chấm phẩy (ASI) để đánh dấu kết thúc một dòng lệnh. (Để biết thêm, xem tài liệu tham khảo chi tiết tại đây: JavaScript's lexical grammar.)

- -

Thực tế thì nên luôn luôn thêm một dấu chấm phẩy vào cuối mỗi câu lệnh, thậm chí khi điều này là không bắt buộc. Việc làm này sẽ giúp tránh bớt bug.

- -

Các đoạn mã Javascript sẽ được đọc từ trái qua phải và được chuyển thể thành một chuỗi các input elements bao gồm: tokens, control characters, line terminators, comments hoặc {{glossary("whitespace")}}. (Spaces, tabs, và các ký tự đánh dấu dòng mới được xem là whitespace.)

- -

Comments

- -

Cú pháp của comments thì ... giống với C++ và một số ngôn ngữ lập trình khác:

- -
// a one line comment <-- đây là cách comment trên 1 dòng
-
-/* this is a longer, cho những dòng dài hoặc nhiều dòng
-   multi-line comment. hãy sử dụng kiểu comment này
- */
-
-/* You can't, however /* nest comments */ SyntaxError */ <-- Không nên lồng comment trong comment, như đoạn comment này sẽ gây ra lỗi vì "/*" được mở bên trong comment trước đó không có hiệu lực đối với từ SyntaxError nên dấu đóng comment "*/" sẽ gây ra lỗi cú pháp.
- -

Comments hoạt động như whitespace, và sẽ bị bỏ qua trong quá trình script chạy.

- -

Note: Bạn có thể thấy loại cú pháp comment này trong một số file javascript #!/usr/bin/env node.

- -

Đây là cú pháp hashbang comment, và là một comment đặc biệt sử dụng để chỉ định đường dẫn đến một Javascript interpreter cụ thể có nhiệm vụ sẽ chạy đoạn script. Xem chi tiết Hashbang comments.

- -

Khai báo biến

- -

Có 3 kiểu khai báo biến trong JavaScript.

- -
-
{{jsxref("Statements/var", "var")}}
-
Khai báo một biến, và tùy ý bạn có hoặc không khởi tạo giá trị cho nó.
-
{{jsxref("Statements/let", "let")}}
-
Khai báo một block-scoped, hoặc biến local, chỉ có thể truy cập được trong block bao quanh nó.
-
- 
function foo() {
-  var x = 10;
-  if (true) {
-   let x = 20; // x ở đây được khai báo lại nhưng khi ra khỏi block-scoped nó sẽ nhận lại giá trị bên trên là 10
-   console.log(x); // in ra 20
-  }
-   console.log(x); // in ra 10
-}
-
-
{{jsxref("Statements/const", "const")}}
-
Khai báo một hằng block-scoped, read-only.
-
- -

Biến

- -

Bạn sử dụng biến như là tên tượng trưng cho các giá trị trong chương trình. Tên của biến được gọi là {{Glossary("Identifier", "identifier")}}, tuân theo những quy tắc nhất định.

- -

Tên biến phải bắt đầu bằng một 'chữ cái', kí tự gạch dưới (_), hoặc kí tự dollar ($). Các ký tự tiếp theo cũng có thể là các chữ số 0-9.  Vì JavaScript là case sensitive, các chữ các bao gồm các ký tự từ "A" đến "Z" (viết hoa) và "a" đến "z" (viết thường).

- -

Bạn có thể sử dụng chuẩn ISO 8859-1 hoặc các kí tự Unicode như å và ü trong tên biến, thậm chí cả các kí tự dạng Unicode escape sequences.

- -

Ví dụ: Number_hits, temp99, and _name.

- -

Declaring variables

- -

Có hai cách khai báo biến:

- - - -

Bạn cũng có thể khai báo biến mà không dùng các từ khóa trên, ví dụ x = 42. Điều này sẽ tạo ra một biến undeclared global variable. Nó sẽ tạo nên một warning trong JavaScript. Undeclared variables có thể dẫn đến các hành vi không mong muốn. Nên khuyến cáo không nên sử dụng chúng.

- -

Evaluating variables

- -

Một biến được khai báo với cú pháp var hoặc let mà không gán giá trị, sẽ có giá trị mặc định là {{jsxref("undefined")}}.

- -

Truong trường hợp truy cập đến một biến chưa được khai báo, thì exception {{jsxref("ReferenceError")}} sẽ được thrown:

- -
var a;
-console.log('The value of a is ' + a); // The value of a is undefined
-
-console.log('The value of b is ' + b); // The value of b is undefined
-var b;
-// This one may puzzle you until you read 'Variable hoisting' below
-
-console.log('The value of c is ' + c); // Uncaught ReferenceError: c is not defined
-
-let x;
-console.log('The value of x is ' + x); // The value of x is undefined
-
-console.log('The value of y is ' + y); // Uncaught ReferenceError: y is not defined
-let y;
- -

Bạn có thể sử dụng undefined  để xét xem một biến có đang mang giá trị không. Dưới đây là một ví dụ, biến input chưa được gán giá trị, nên biến input lúc này mang giá trị mặc định undefined vậy câu điều kiện if là return true và không chạy vào else.

- -
var input;
-if(input === undefined){
-  doThis();
-} else {
-  doThat();
-}
-
- -

Giá trị undefined tương đương với fasle khi sử dụng trong bối cảnh boolean, như ví dụ dưới đây, chương trình sẽ chạy function myFunction vì element myArray[0]là undefined trả về false.

- -
var myArray = [];
-if (!myArray[0]) {
-  myFunction();
-}
-
-function myFunction() {
-  alert('return false');
-}
-
- -

Khi biến có giá trị = undefined thực hiện phép toán với biến có giá trị cụ thể hoặc hằng số sẽ cho ra giá trị  = NaN (not a number). 

- -
var a;
-a + 2 = NaN
- -

Null khác với Undefined. Khi biến có giá trị {{jsxref("null")}}, biến sẽ mang giá trị 0 trong các phép toán (numeric) và false trong các ngữ cảnh boolean. Ví dụ:

- -
var n = null;
-console.log(n * 32); // Will log 0 to the console
-
- -

Variable scope

- -

Khi bạn khai báo một biến bên ngoài function, biến đó được gọi là global variable, bởi vì biến đó sẽ có hiệu lực đến bất kì đoạn code nào khác trong document hiện tại. Khi bạn khai báo một biến bên trong một function, nó gọi là local variable, vì nó chỉ có thể dùng được trong phạm vi function đó.

- -

Javascript trước phiên bản ECMAScript 6 không có định nghĩa  block statement scope; thay vào đó, một biến được khai báo trong một block được xem là có giá trị local đối với function (hoặc global scope) mà block đó cư trú.

- -

Ví dụ sau đây sẽ log ra 5, vì scope của x là global context (hoặc function context nếu đoạn code này là một phần của function khác). Scope của x không bị giới hạn vào block câu lệnh if trực tiếp gần nhất.

- -
if (true) {
-  var x = 5;
-}
-console.log(x);  // 5
-
- -

Điều này đã thay đổi khi sử dụng kiểu khai báo let được giới thiệu trong ECMAScript 6.

- -
if (true) {
-  let y = 5;
-}
-console.log(y);  // ReferenceError: y is not defined (y bị giới hạn trực tiếp trong block chứa nó)
-
- -

Variable hoisting

- -

Một thứ không bình thường khác về các biến trong JavaScript là bạn có thể tham chiếu đến một biến tại vị trí phía trước câu lệnh khai báo. Khái niệm này gọi là hoisting; các biến trong JavaScript ở khía cạnh nào đó sẽ được "hoisted" (treo) hoặc lifted (nâng) vào vị trí trên cùng của câu lệnh hoặc hàm gần nó nhất. Tuy nhiên, các variables bị hoisted này sẽ trả về giá trị undefined. Nên cho dù bạn khai báo và khởi tạo sau khi bạn sử dụng hoặc tham chiếu đến biến này, thì trước đó nó vẫn trả về undefined.

- -
/**
- * Example 1
- */
-console.log(x); // undefined
-var x = 3;
-console.log(x); // 3
-
-/**
- * Example 2
- */
-// will return a value of undefined
-var myvar = "my value";
-
-(function() {
-  console.log(myvar); // undefined vì bên dưới có dòng khai báo var myvar, điều này làm biến myvar bị hoisting và nhận giá trị mới là undefined (giá trị 'my value' lúc này không còn hiệu lực vì biến đã bị hoisting)
-  var myvar = "local value";
-})();
-
- -

Ví dụ bên trên có thể được biểu đạt theo cách khác như sau:

- -
/**
- * Example 1
- */
-var x;
-console.log(x === undefined); // logs "true"
-x = 3;
-
-/**
- * Example 2
- */
-var myvar = "my value";
-
-(function() {
-  var myvar;
-  console.log(myvar); // undefined
-  myvar = "local value";
-})();
-
- -

Vì vấn đề hoisting này, tất cả các câu lệnh khai báo biến với var bên trong một function nên được đặt gần với đầu của function nhất có thể. Làm điều này giúp gia tăng độ rõ ràng của code (trường hợp dùng var như trong ví dụ 2 ở trên sẽ gây ra hoisting).

- -

Function hoisting

- -

Trong trường hợp của các function, chỉ các function được tạo theo kiểu function declaration là bị hoisted, còn function được tạo theo kiểu function expression thì không. Khác với variable hoisting, hoisted function không trả về giá trị mặc định undefined. Ví dụ:

- -
/* Function declaration */
-
-foo(); // "bar"
-
-function foo() {
-  console.log('bar');
-}
-
-
-/* Function expression */
-
-baz(); // TypeError: baz is not a function
-
-var baz = function() {
-  console.log('bar2');
-};
- -

Biến toàn cục (global variables)

- -

Các global variables trên thực tế là những properties của global object. Trong các web page, global object chính là window, nên bạn có thể set và truy cập đến các global variables bằng cách sử dụng cú pháp window.variable.

- -

Hệ quả  là, bạn có thể truy cập đến các global variables được khai báo trong một window hoặc frame từ một window hoặc frame khác, bằng cách chỉ định rõ tên của window hoặc frame. Ví dụ, nếu một biến có tên phoneNumber được khai báo trong một document, bạn có thể tham chiếu đến biến này từ một iframe như là parent.phoneNumber.

- -

Constants

- -

Bạn có thể tạo các hằng số read-only với từ khóa {{jsxref("Statements/const", "const")}}. Cú pháp đặt tên cho hằng cũng giống như biến, tên hằng phải bắt đầu bằng một chữ cái, hoặc dấu gạch dưới _, hoặc dấu dollar $, và có thể bao gồm mọi ký tự chữ, số, hoặc dấu gạch dưới.

- -
const PI = 3.14;
-
- -

Một hằng số đã khai báo không thể thay đổi giá trị thông qua việc gán lại giá trị hoặc không thể bị khai báo lại trong khi đoạn script đang chạy. Và bắt buộc phải được gán giá trị ngay khi khởi tạo.

- -

Các nguyên tắc về scope cho các hằng số cũng giống như cách các biến block-scoped như let hoạt động.

- -

Bạn không thể khai báo một hằng số với tên trùng với tên function hoặc biến trong cùng một scope. Ví dụ:

- -
// THIS WILL CAUSE AN ERROR
-function f() {};
-const f = 5;
-
-// THIS WILL CAUSE AN ERROR ALSO
-function f() {
-  const g = 5;
-  var g;
-
-  //statements
-}
-
- -

Tuy nhiên, khi gán một object vào một hằng, thì các thuộc tính của object đó là not protected, nên câu lệnh dưới đây sẽ được thực thi mà không lỗi.

- -
const MY_OBJECT = {'key': 'value'};
-MY_OBJECT.key = 'otherValue';
- -

Cũng tương tự, các nội dung trong một mảng cũng là not protected, nên câu lệnh dưới đây sẽ được thực thi mà không lỗi.

- -
const MY_ARRAY = ['HTML','CSS'];
-MY_ARRAY.push('JAVASCRIPT');
-console.log(MY_ARRAY); //logs ['HTML','CSS','JAVASCRIPT'];
- -

Cấu trúc dữ liệu và kiểu dữ liệu

- -

Kiểu dữ liệu

- -

Tiêu chuẩn mới nhất của ECMAScript định nghĩa 8 kiểu dữ liệu:

- - - -

Mặc dù những kiểu dữ liệu này tương đối ít, chúng cho phép bạn có thể thể hiện những hàm rất hữu dụng. {{jsxref("Object", "Objects")}} và {{jsxref("Function", "functions")}} là những phần tử nền tảng khác của JavaScript. Bạn có thể xem object như là những vùng chứa được đặt tên (named container) để phục vụ cho các giá trị, và các hàm là những quy trình thủ tục để đoạn script của bạn thi hành.

- -

Chuyển đổi kiểu dữ liệu

- -

JavaScript là dynamically typed language. Điều đó có nghĩa bạn không cần phải chỉ định kiểu dữ liệu của biến khi bạn khai báo biến, và kiểu dữ liệu được tự động chuyển đổi khi cần thiết trong quá trình đoạn script được thực thi.

- -

Cho nên, ví dụ, bạn có thể định nghĩa một biến như sau:

- -
var answer = 42;
-
- -

Và sau đó, bạn có thể gán cùng một biến này với một giá trị chuỗi, ví dụ:

- -
answer = "Thanks for all the fish...";
-
- -

Bởi vì JavaScript là dynamically typed, việc gán giá trị này sẽ không gây ra lỗi.

- -

Các số và toán tử '+'

- -

Trong các biểu thức (expression) có sự liên quan giữa các giá trị numeric và string với toán tử  +, JavaScript sẽ chuyển đổi giá trị số sang chuỗi. Ví dụ:

- -
x = "The answer is " + 42 // "The answer is 42"
-y = 42 + " is the answer" // "42 is the answer"
-
- -

Với tất cả mọi loại toán tử khác, JavaScript sẽ không chuyển đổi giá trị numeric sang string. Ví dụ:

- -
"37" - 7 // 30
-"37" + 7 // "377"
-
- -

Chuyển từ kiểu chuỗi (string) sang kiểu số (number)

- -

Tong trường hợp một giá trị biểu thị một số nhưng lại được lưu trong bộ nhớ như là một chuỗi, có các phương thức để chuyển đổi.

- - - -

parseInt sẽ chỉ trả về các số nguyên, nên mục đích của nó là làm giảm bớt giá trị cho các số decimals. Thêm nữa, một thực hành tốt nhất cho parseInt là luôn luôn thêm vào nó tham số radix. Tham số radix được dùng để chỉ định hệ số học nào sẽ được sử dụng.

- -
parseInt('101', 2) // 5
- -

Một phương thức khác để nhận được giá trị số từ một chuỗi là dùng toán tử + 

- -
"1.1" + "1.1" = "1.11.1"
-(+"1.1") + (+"1.1") = 2.2
-// Note: the parentheses are added for clarity, not required.
- -

Literals

- -

Literals (nguyên văn), đại diện cho các giá trị trong JavaScript. Đây là những giá trị cố định - không phải biến - mà bạn cung cấp một cách litterally trong script của bạn. Phần này mô tả những kiểu literals sau đây:

- - - -

Array literals

- -

Một array literal là một danh sách của không hoặc nhiều biểu thức, mỗi biểu thức trong đó đại diện cho một phần tử của mảng (array element), được bao bọc trong dấu ngoặc vuông ([]). Khi bạn tạo một mảng bằng cách dùng array literal, nó được khởi tạo với những giá trị cụ thể như là các element của mảng, và length của mảng là số lượng đối số (argument).

- -

Ví dụ sau tạo ra mảng coffees với 3 phần tử và một length của 3:

- -
var coffees = ["French Roast", "Colombian", "Kona"];
-
- -

Note: Một array literal là một kiểu của object initializer. Xem Using Object Initializers.

- -

Nếu một mảng được tạo ra sử dụng một literal trong một top-level script, JavaScript sẽ interpret mảng mỗi lần nó đánh giá biểu thức có chứa array literal. Ngoài ra, một literal được sử dụng trong một hàm sẽ được tạo ra mỗi lần function được gọi.

- -

Note: Các array literals cũng là các Array objects. Xem {{jsxref("Array")}} and Indexed collections để biết chi tiết về Array objects.

- -

Dấu phẩy dư trong các array literals

- -

Bạn không cần phải xác định mọi phần tử trong một array literal. Nếu bạn đặt 2 dấu phẩy trên cùng một hàng, mảng sẽ tạo ra một phần tử mang giá trị undefined. Ví dụ sau tạo ra mảng fish.

- -
var fish = ["Lion", , "Angel"];
-
- -

Mảng này gồm 2 phần tử có giá trị và một phần tử rỗng (fish[0] là "Lion", fish[1] là undefined, và fish[2] là "Angel").

- -

Nếu bạn thêm một dấu phẩy theo sau (trailing comma) phần tử cuối cùng của mãng, dấu phẩy này sẽ bị bỏ qua. Trong ví dụ sau, length của mảng là 3. Không có myList[3]. Tất cả dấu phẩy khác trong danh sách ngầm chỉ định là một phần tử mới. (Note: trailing commas có thể xem là lỗi đối với các trình duyệt cũ và tốt nhất là nên xóa chúng đi).

- -
let myList = ['home', , 'school', ];
-
- -

Trong ví dụ bên dưới, length của mảng là 4, myList[0] và myList[2] bị thiếu.

- -
var myList = [ , 'home', , 'school'];
-
- -

Trong ví dụ dưới, length của mảng là 4, myList[1] và myList[3] bị thiếu. Chỉ có dấu phẩy cuối cùng bị bỏ qua.

- -
var myList = ['home', , 'school', , ];
-
- -

Hiểu được hành vi của cac dấu phẩy thêm này rất quan trọng để hiểu được JavaScript như là một ngôn ngữ. Tuy nhiên, khi viết code của riêng bạn, bạn nên khai báo một cách rõ ràng các phần tử bị thiếu (missing elements) là undefined. Làm vậy sẽ gia tăng độ rõ ràng cho code và dễ bảo trì sau này.

- -

Boolean literals

- -

Kiểu Boolean có 2 giá trị literal: true vàfalse.

- -

Cẩn thận: Đừng nhầm lẫn giá trị Boolean nguyên thủy true và false với true và fales của {{jsxref("Boolean")}} object. Boolean object là một lớp bao bên ngoài kiểu dữ liệu Boolean nguyên thủy. Xem {{jsxref("Boolean")}} để biết thêm.

- -

Numeric literals

- -

Kiểu dữ liệu {{jsxref("Number")}} và {{jsxref("BigInt")}} có thể được biểu diễn bằng hệ decimal (hệ 10), hệ hexadecimal (hệ 16), octal (hệ 8) và binary (base 2 - hệ nhị phân).

- - - -

Một số ví dụ của numeric literals:

- -
0, 117, -345, 123456789123456789n             (decimal, base 10)
-015, 0001 -0o77, 0o777777777777n              (octal, base 8)
-0x1123, 0x00111, -0xF1A7, 0x123456789ABCDEFn  (hexadecimal, "hex" or base 16)
-0b11, 0b0011, -0b11, 0b11101001010101010101n  (binary, base 2)
-
- -

Chi tiết xem thêm tại: Numeric literals in the Lexical grammar reference.

- -

Floating-point literals

- -

Một floating-point literal (literal số thực dấu chấm động) có thể có các bộ phận sau:

- - - -

Bộ phận số mũ là một ký tự "e" hoặc "E", theo sau nó là một số nguyên integer (số nguyên integer này có thể có thêm phía trước là dấu "+" hoặc "-"). Một floating-point literal phải có ít nhất một ký tự số, và hoặc là một dấu chấm hệ 10 hoặc là ký tự "e" (hoặc "E"). Tóm lại, cú pháp như sau:

- -
[(+|-)][digits][.digits][(E|e)[(+|-)]digits]
-
- -

Ví dụ: 

- -
3.1415926
--.123456789
--3.1E+12
-.1e-23
-
- -

Object literals

- -

Một object literal là một danh sách của không hoặc nhiều cặp property names và associated values (tên thuộc tính và giá trị được liên kết) của một một object, bao bọc bởi cặp dấu ngoặc nhọn ({}).

- -

Lưu ý đừng sử dụng một object literal ngay tại vị trí bắt đầu của một câu lệnh! Điều này sẽ dẫn đến một lỗi (hoặc nó sẽ thực thi theo cách bạn không mong muốn), vì dấu mở ngoặc nhọn { sẽ được interpreted như là bắt đầu của một block.

- -

Ví dụ dưới đây là một ví dụ của object literal. Phần tử đầu tiên của object car định nghĩa là một thuộc tính (property), myCar, và được gán giá trị kiểu chuỗi là "myCar", phần tử thứ 2, thuộc tính getCar, ngay lập tức được gán giá trị là kết quả trả về của việc gọi hàm (CarTypes("Honda")); phần tử thứ 3, thuộc tính special, sử dụng một biến đã tồn tại (sales).

- -
var Sales = "Toyota";
-
-function CarTypes(name) {
-  if (name == "Honda") {
-    return name;
-  } else {
-    return "Sorry, we don't sell " + name + ".";
-  }
-}
-
-var car = { myCar: "Saturn", getCar: CarTypes("Honda"), special: Sales };
-
-console.log(car.myCar);   // Saturn
-console.log(car.getCar);  // Honda
-console.log(car.special); // Toyota
-
- -

Thêm nữa, bạn có thể sử dụng cả kiểu số hoặc chữ để đặt tên cho thuộc tính của object, hoặc bạn có thể lồng một object bên trong một object khác. Ví dụ:

- -
var car = { manyCars: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };
-
-console.log(car.manyCars.b); // Jeep
-console.log(car[7]); // Mazda
-
- -

Các tên thuộc tính của object có thể là bất kỳ chuỗi nào, bao gồm cả chuỗi rỗng ''. Nếu tên thuộc tính không phải là một JavaScript identifier hợp lệ, hoặc nó là số, thì nó phải được bao bọc trong các dấu nháy.

- -

Các tên thuộc tính mà không phải là các identifier hợp lệ không thể được truy cập đến như các thuộc tính thông thường là dùng dấu chấm (.), nhưng có thể được truy cập đến và set giá trị bằng cặp dấu ngoặc vuông giống mảng ("[]").

- -
var unusualPropertyNames = {
-  "": "An empty string",
-  "!": "Bang!"
-}
-console.log(unusualPropertyNames."");   // SyntaxError: Unexpected string
-console.log(unusualPropertyNames[""]);  // An empty string
-console.log(unusualPropertyNames.!);    // SyntaxError: Unexpected token !
-console.log(unusualPropertyNames["!"]); // Bang!
- -

Please note:

- -
var foo = {a: "alpha", 2: "two"};
-console.log(foo.a);    // alpha
-console.log(foo[2]);   // two
-//console.log(foo.2);  // Error: missing ) after argument list
-//console.log(foo[a]); // Error: a is not defined
-console.log(foo["a"]); // alpha
-console.log(foo["2"]); // two
-
- -

Enhanced Object literals

- -

Trong ES2015, các object literals được mở rộng từ đó hỗ trợ thêm việc cài đặt các prototype tại construction, shorthand cho việc gán biến foo: foo, các phương thức defining, make super calls, và xử lý các tên thuộc tính với các biểu thức. Cùng nhau, những thứ này cũng mang object listerals và khai báo class đến gần nhau hơn, và cho phép các thiết kế object-based để đạt được lợi ích từ một số tiện nghi giống nhau.

- -
var obj = {
-    // __proto__
-    __proto__: theProtoObj,
-    // Shorthand for ‘handler: handler’
-    handler,
-    // Methods
-    toString() {
-     // Super calls
-     return 'd ' + super.toString();
-    },
-    // Computed (dynamic) property names
-    [ 'prop_' + (() => 42)() ]: 42
-};
- -

RegExp literals

- -

Một regex literal (được định nghĩa chi tiết sau đây) là một mô hình mẫu bao bọc giữa các dấu xuyệt /. Ví dụ:

- -
var re = /ab+c/;
- -

String literals

- -

Một string literal là không có hoặc có nhiều ký tự bao bọc trong dấu (") hoặc ('). Một chuỗi (string) phải được giới hạn trong cặp dấu cùng loại; hoặc là cùng nháy đơn hoặc là cùng nháy kép. Ví dụ:

- - - -

Bạn có thể gọi các phương thức của {{jsxref("String")}} object lên một giá trị string nguyên văn (string literal) - JavaScript tự động chuyển đổi string literal sang một String object tạm, gọi phương thức để chạy, chạy xong hủy bỏ String object tạm đó. Bạn cũng có thể sử dụng thuộc tính String.length với một string literal:

- -
console.log("John's cat".length)
-// Will print the number of symbols in the string including whitespace.
-// In this case, 10.
-
- -

Trong ES2015, template literals cũng được đưa vào sử dụng. Template literals bao bọc trong dấu back-tick (`) (dấu huyền) thay vì dấu nháy đơn hay nháy kép.

- -

Các template strings cung cấp cú pháp đặc biệt (synctactic sugar) để xây dựng các chuỗi (string). (Điều này tương tự với đặc điểm nội suy chuỗi string interpolation trong Perl, Python, v.v...)

- -

Tùy trường hợp, một thẻ tag có thể được thêm vào để cho phép việc xây dựng chuỗi được tùy chỉnh, tránh injection attacks, hoặc xây dựng nên những cấu trúc dữ liệu higher-level từ các nội dung của chuỗi.

- -
// Basic literal string creation
-// `In JavaScript '\n' is a line-feed.`
-
-// Multiline strings
-`In JavaScript, template strings can run
- over multiple lines, but double and single
- quoted strings cannot.`
-
-// String interpolation
-var name = 'Bob', time = 'today';
-`Hello ${name}, how are you ${time}?`
-
-// Construct an HTTP request prefix used to interpret the replacements and construction
-POST`http://foo.org/bar?a=${a}&b=${b}
-     Content-Type: application/json
-     X-Credentials: ${credentials}
-     { "foo": ${foo},
-       "bar": ${bar}}`(myOnReadyStateChangeHandler);
-
- -

Bạn nên sử dụng các string literals đơn thuần nếu không cần thiết phải sử dụng đến String object. Xem {{jsxref("String")}} để biết chi tiết về String objects.

- -

Sử dụng các ký tự đặc biệt trong chuỗi

- -

Ngoài các ký tự thông thường, bạn cũng có thể thêm vào các ký tự đặc biệt trong chuỗi, ví dụ:

- -
"one line \n another line"
-
- -

Bảng dưới đây liệt kê danh sách các ký tự đặc biệt có thể sử dụng trong các chuỗi JavaScript.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table: JavaScript special characters
CharacterMeaning
\0Null Byte
\bBackspace - Khoảng cách
\fForm feed -
\nNew line - Dòng mới
\rCarriage return
\tTab - Tab một tab
\vVertical tab - Tab dọc
\'Apostrophe or single quote - trích dẫn đơn
\"Double quote - ngoặc kép.
\\Backslash character
\XXXThe character with the Latin-1 encoding specified by up to three octal digits XXX between 0 and 377. For example, \251 is the octal sequence for the copyright symbol.
\xXXThe character with the Latin-1 encoding specified by the two hexadecimal digits XX between 00 and FF. For example, \xA9 is the hexadecimal sequence for the copyright symbol.
\uXXXXThe Unicode character specified by the four hexadecimal digits XXXX. For example, \u00A9 is the Unicode sequence for the copyright symbol. See {{anch("Unicode escape sequences")}}.
- -

Escaping characters

- -

Đối với các ký tự không có trong bảng trên, dấu backslash \ được thêm vào trước sẽ bị bỏ qua, nhưng cách dùng này đã không còn nữa và nên được tránh dùng.

- -

Bạn có thể chèn vào một dấu ngoặc kép bên trong một chuỗi bằng cách đặt phía trước nó một dấu backslash \. Điều này tức là escaping dấu trích dẫn. Ví dụ:

- -
var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
-console.log(quote);
-
- -

Kết quả của đoạn code trên là:

- -
He read "The Cremation of Sam McGee" by R.W. Service.
-
- -

Để thêm một dấu backslash thật sự vào trong chuỗi, bạn phải escape dấu backslash đó. Ví dụ, để gán dường dẫn file c:\temp vào một chuỗi:

- -
var home = "c:\\temp";
-
- -

Bạn cũng có thể escape các line breaks bằng cách đặt vào trước chúng một dấu backslash. Backslash và line break đều sẽ được remove khỏi giá trị của chuỗi.

- -
var str = "this string \
-is broken \
-across multiple\
-lines."
-console.log(str);   // this string is broken across multiplelines.
-
- -

Mặc dù JavaScript không có cú pháp "heredoc", bạn có thể gần đạt được điều này bằng cách thêm vào một linebreak escape và một escaped linebreak ở cuối mỗi dòng:

- -
var poem =
-"Roses are red,\n\
-Violets are blue.\n\
-I'm schizophrenic,\n\
-And so am I."
-
- -

Thông tin thêm

- -

Chương này tập trung vào cú pháp cơ bản cho các việc khai báo và các kiểu dữ liệu. Để biết rõ hơn về cấu trúc ngôn ngữ JavaScript, xem các chương tiếp theo trong bộ hướng dẫn này:

- - - -

Trong chương tiếp theo, chúng ta sẽ tìm hiểu về control flow constructs và error handling.

- -

{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}

diff --git a/files/vi/web/javascript/guide/gioi-thieu/index.html b/files/vi/web/javascript/guide/gioi-thieu/index.html deleted file mode 100644 index f8fddcf666..0000000000 --- a/files/vi/web/javascript/guide/gioi-thieu/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Giới thiệu -slug: Web/JavaScript/Guide/Gioi-thieu -tags: - - Guide - - JavaScript -translation_of: Web/JavaScript/Guide/Introduction ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
- -

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.

- -

Kiến thức nền tảng cần có

- -

Để đế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:

- - - -

Bạn có thể tìm thêm thông tin về JavaScript ở đâu?

- -

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

- - - -

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 learning area và JavaScript Guide. 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 JavaScript Reference để lấy những thông tin chi tiết của từng object và các câu lệnh (statements).

- -

JavaScript là gì?

- -

JavaScript là một ngôn ngữ lập trình đa nền tảng (cross-platform), 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).

- -

JavaScript chứa các thư viện tiêu chuẩn cho các object, ví dụ như:  Array, Date, và Math, 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ụ:

- - - -

JavaScript và Java

- -

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.

- -

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 dựa trên một số lượng nhỏ các loại dữ liệu đại diện cho 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 dựa trên nguyên mẫu (prototype-based) thay vì các mô hình đối tượng dựa trên lớp (class-based). Các mô hình dựa trên nguyên mẫu cung cấp khả năng thừa kế năng động; nghĩa là, những gì được kế thừa có thể khác nhau cho các đối tượng khác nhau. JavaScript cũng hỗ trợ các phương thức (function) không khai báo bất cứ gì ở trỏng. Phương thức có thể là một trong các thuộc tính (property) của các đối tượng, thực thi như là một phương thức đã được định kiểu (loosely typed methods).

- -

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.

- -

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.

- -

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.

- - - - - - - - - - - - - - - - - - - - - - - -
JavaScript so sánh với Java
JavaScriptJava
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.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.
Không khai báo kiểu dữ liệu cho biến (dynamic typing).Phải khai báo kiểu dữ liệu cho biến (static typing).
Không thể tự động ghi vào ổ đĩa cứng.Có thể tự động ghi dữ liệu vào đĩa cứng.
- -

Thêm thông tin về sự khác nhau giữa JavaScript và Java, xem chương: Details of the object model.

- -

JavaScript và tiêu chuẩn ECMAScript

- -

JavaScript được tiêu chuẩn hóa tại Ecma International — 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 New in JavaScript để 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).

- -

Tiêu chuẩn ECMA-262 cũng đã được phê duyệt bởi ISO (International Organization for Standardization) tại ISO-16262. Bạn cũng có thể tìm tiêu chuẩn trên the Ecma International website. 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 World Wide Web Consortium (W3C). 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. Để có được một cảm nhận tốt hơn về các công nghệ khác nhau được sử dụng khi lập trình với JavaScript, hãy tham khảo bài viết tổng quan về công nghệ JavaScript.

- -

Tài liệu JavaScript và tiêu chuẩn ECMAScript

- -

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).

- -

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.

- -

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.

- -

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.

- -

Bắt đầu với JavaScript

- -

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..

- -

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à: Web Console và Scratchpad.

- -

Web Console

- -

Web Console cho phép bạn thấy thông tin về trang Web đang chạy, và kèm theo một command line, 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.

- -

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ó:

- -

- -

Scratchpad

- -

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ì Scratchpad là một công cụ hiệu quả.

- -

Để 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.

- -

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:

- -

- -

Hello world

- -

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:

- -
function greetMe(user) {
-  return "Hi " + user;
-}
-
-greetMe("Alice"); // "Hi Alice"
-
- -

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.

- -

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

diff --git a/files/vi/web/javascript/guide/grammar_and_types/index.html b/files/vi/web/javascript/guide/grammar_and_types/index.html new file mode 100644 index 0000000000..64f63492d2 --- /dev/null +++ b/files/vi/web/javascript/guide/grammar_and_types/index.html @@ -0,0 +1,710 @@ +--- +title: Cú pháp lập trình +slug: Web/JavaScript/Guide/cu-phap-lap-trinh +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}
+ +

Phần này nói về các cú pháp cơ bản của ngôn ngữ JavaScript, các cách khai báo biến, các loại dữ liệu và chính tả (literal).

+ +

Cơ bản

+ +

Cú pháp của JavaScript (JS) phần lớn được vay mượn từ Java, nhưng JS cũng chịu ảnh hưởng từ cú pháp của các ngôn ngữ lập trình khác như Awk, Perl và Python.

+ +

JavaScript là ngôn ngữ lập trình sử dụng chuẩn kí tự Unicode và khi viết cũng cần phải lưu ý phân biệt chữ HOA và chữ thường (case-sensitive). Điều này có nghĩa là các từ như Früh (trong tiếng Đức có nghĩa là "sớm" - early) có thể được sử dụng đặt tên cho biến.

+ +
let Früh = "foobar"
+
+ +

In JavaScript, instructions are called {{Glossary("Statement", "statements")}} and are separated by a semicolon (;).

+ +

Dấu chấm phẩy (;) chỉ cần thiết nếu trên cùng một dòng có từ hai câu lệnh trở lên. Trường hợp câu lệnh nằm riêng một dòng thì không cần dấu chấm phẩy.

+ +

ECMAScript cũng có những nguyên tắc để tự động thêm dấu chấm phẩy (ASI) để đánh dấu kết thúc một dòng lệnh. (Để biết thêm, xem tài liệu tham khảo chi tiết tại đây: JavaScript's lexical grammar.)

+ +

Thực tế thì nên luôn luôn thêm một dấu chấm phẩy vào cuối mỗi câu lệnh, thậm chí khi điều này là không bắt buộc. Việc làm này sẽ giúp tránh bớt bug.

+ +

Các đoạn mã Javascript sẽ được đọc từ trái qua phải và được chuyển thể thành một chuỗi các input elements bao gồm: tokens, control characters, line terminators, comments hoặc {{glossary("whitespace")}}. (Spaces, tabs, và các ký tự đánh dấu dòng mới được xem là whitespace.)

+ +

Comments

+ +

Cú pháp của comments thì ... giống với C++ và một số ngôn ngữ lập trình khác:

+ +
// a one line comment <-- đây là cách comment trên 1 dòng
+
+/* this is a longer, cho những dòng dài hoặc nhiều dòng
+   multi-line comment. hãy sử dụng kiểu comment này
+ */
+
+/* You can't, however /* nest comments */ SyntaxError */ <-- Không nên lồng comment trong comment, như đoạn comment này sẽ gây ra lỗi vì "/*" được mở bên trong comment trước đó không có hiệu lực đối với từ SyntaxError nên dấu đóng comment "*/" sẽ gây ra lỗi cú pháp.
+ +

Comments hoạt động như whitespace, và sẽ bị bỏ qua trong quá trình script chạy.

+ +

Note: Bạn có thể thấy loại cú pháp comment này trong một số file javascript #!/usr/bin/env node.

+ +

Đây là cú pháp hashbang comment, và là một comment đặc biệt sử dụng để chỉ định đường dẫn đến một Javascript interpreter cụ thể có nhiệm vụ sẽ chạy đoạn script. Xem chi tiết Hashbang comments.

+ +

Khai báo biến

+ +

Có 3 kiểu khai báo biến trong JavaScript.

+ +
+
{{jsxref("Statements/var", "var")}}
+
Khai báo một biến, và tùy ý bạn có hoặc không khởi tạo giá trị cho nó.
+
{{jsxref("Statements/let", "let")}}
+
Khai báo một block-scoped, hoặc biến local, chỉ có thể truy cập được trong block bao quanh nó.
+
+ 
function foo() {
+  var x = 10;
+  if (true) {
+   let x = 20; // x ở đây được khai báo lại nhưng khi ra khỏi block-scoped nó sẽ nhận lại giá trị bên trên là 10
+   console.log(x); // in ra 20
+  }
+   console.log(x); // in ra 10
+}
+
+
{{jsxref("Statements/const", "const")}}
+
Khai báo một hằng block-scoped, read-only.
+
+ +

Biến

+ +

Bạn sử dụng biến như là tên tượng trưng cho các giá trị trong chương trình. Tên của biến được gọi là {{Glossary("Identifier", "identifier")}}, tuân theo những quy tắc nhất định.

+ +

Tên biến phải bắt đầu bằng một 'chữ cái', kí tự gạch dưới (_), hoặc kí tự dollar ($). Các ký tự tiếp theo cũng có thể là các chữ số 0-9.  Vì JavaScript là case sensitive, các chữ các bao gồm các ký tự từ "A" đến "Z" (viết hoa) và "a" đến "z" (viết thường).

+ +

Bạn có thể sử dụng chuẩn ISO 8859-1 hoặc các kí tự Unicode như å và ü trong tên biến, thậm chí cả các kí tự dạng Unicode escape sequences.

+ +

Ví dụ: Number_hits, temp99, and _name.

+ +

Declaring variables

+ +

Có hai cách khai báo biến:

+ + + +

Bạn cũng có thể khai báo biến mà không dùng các từ khóa trên, ví dụ x = 42. Điều này sẽ tạo ra một biến undeclared global variable. Nó sẽ tạo nên một warning trong JavaScript. Undeclared variables có thể dẫn đến các hành vi không mong muốn. Nên khuyến cáo không nên sử dụng chúng.

+ +

Evaluating variables

+ +

Một biến được khai báo với cú pháp var hoặc let mà không gán giá trị, sẽ có giá trị mặc định là {{jsxref("undefined")}}.

+ +

Truong trường hợp truy cập đến một biến chưa được khai báo, thì exception {{jsxref("ReferenceError")}} sẽ được thrown:

+ +
var a;
+console.log('The value of a is ' + a); // The value of a is undefined
+
+console.log('The value of b is ' + b); // The value of b is undefined
+var b;
+// This one may puzzle you until you read 'Variable hoisting' below
+
+console.log('The value of c is ' + c); // Uncaught ReferenceError: c is not defined
+
+let x;
+console.log('The value of x is ' + x); // The value of x is undefined
+
+console.log('The value of y is ' + y); // Uncaught ReferenceError: y is not defined
+let y;
+ +

Bạn có thể sử dụng undefined  để xét xem một biến có đang mang giá trị không. Dưới đây là một ví dụ, biến input chưa được gán giá trị, nên biến input lúc này mang giá trị mặc định undefined vậy câu điều kiện if là return true và không chạy vào else.

+ +
var input;
+if(input === undefined){
+  doThis();
+} else {
+  doThat();
+}
+
+ +

Giá trị undefined tương đương với fasle khi sử dụng trong bối cảnh boolean, như ví dụ dưới đây, chương trình sẽ chạy function myFunction vì element myArray[0]là undefined trả về false.

+ +
var myArray = [];
+if (!myArray[0]) {
+  myFunction();
+}
+
+function myFunction() {
+  alert('return false');
+}
+
+ +

Khi biến có giá trị = undefined thực hiện phép toán với biến có giá trị cụ thể hoặc hằng số sẽ cho ra giá trị  = NaN (not a number). 

+ +
var a;
+a + 2 = NaN
+ +

Null khác với Undefined. Khi biến có giá trị {{jsxref("null")}}, biến sẽ mang giá trị 0 trong các phép toán (numeric) và false trong các ngữ cảnh boolean. Ví dụ:

+ +
var n = null;
+console.log(n * 32); // Will log 0 to the console
+
+ +

Variable scope

+ +

Khi bạn khai báo một biến bên ngoài function, biến đó được gọi là global variable, bởi vì biến đó sẽ có hiệu lực đến bất kì đoạn code nào khác trong document hiện tại. Khi bạn khai báo một biến bên trong một function, nó gọi là local variable, vì nó chỉ có thể dùng được trong phạm vi function đó.

+ +

Javascript trước phiên bản ECMAScript 6 không có định nghĩa  block statement scope; thay vào đó, một biến được khai báo trong một block được xem là có giá trị local đối với function (hoặc global scope) mà block đó cư trú.

+ +

Ví dụ sau đây sẽ log ra 5, vì scope của x là global context (hoặc function context nếu đoạn code này là một phần của function khác). Scope của x không bị giới hạn vào block câu lệnh if trực tiếp gần nhất.

+ +
if (true) {
+  var x = 5;
+}
+console.log(x);  // 5
+
+ +

Điều này đã thay đổi khi sử dụng kiểu khai báo let được giới thiệu trong ECMAScript 6.

+ +
if (true) {
+  let y = 5;
+}
+console.log(y);  // ReferenceError: y is not defined (y bị giới hạn trực tiếp trong block chứa nó)
+
+ +

Variable hoisting

+ +

Một thứ không bình thường khác về các biến trong JavaScript là bạn có thể tham chiếu đến một biến tại vị trí phía trước câu lệnh khai báo. Khái niệm này gọi là hoisting; các biến trong JavaScript ở khía cạnh nào đó sẽ được "hoisted" (treo) hoặc lifted (nâng) vào vị trí trên cùng của câu lệnh hoặc hàm gần nó nhất. Tuy nhiên, các variables bị hoisted này sẽ trả về giá trị undefined. Nên cho dù bạn khai báo và khởi tạo sau khi bạn sử dụng hoặc tham chiếu đến biến này, thì trước đó nó vẫn trả về undefined.

+ +
/**
+ * Example 1
+ */
+console.log(x); // undefined
+var x = 3;
+console.log(x); // 3
+
+/**
+ * Example 2
+ */
+// will return a value of undefined
+var myvar = "my value";
+
+(function() {
+  console.log(myvar); // undefined vì bên dưới có dòng khai báo var myvar, điều này làm biến myvar bị hoisting và nhận giá trị mới là undefined (giá trị 'my value' lúc này không còn hiệu lực vì biến đã bị hoisting)
+  var myvar = "local value";
+})();
+
+ +

Ví dụ bên trên có thể được biểu đạt theo cách khác như sau:

+ +
/**
+ * Example 1
+ */
+var x;
+console.log(x === undefined); // logs "true"
+x = 3;
+
+/**
+ * Example 2
+ */
+var myvar = "my value";
+
+(function() {
+  var myvar;
+  console.log(myvar); // undefined
+  myvar = "local value";
+})();
+
+ +

Vì vấn đề hoisting này, tất cả các câu lệnh khai báo biến với var bên trong một function nên được đặt gần với đầu của function nhất có thể. Làm điều này giúp gia tăng độ rõ ràng của code (trường hợp dùng var như trong ví dụ 2 ở trên sẽ gây ra hoisting).

+ +

Function hoisting

+ +

Trong trường hợp của các function, chỉ các function được tạo theo kiểu function declaration là bị hoisted, còn function được tạo theo kiểu function expression thì không. Khác với variable hoisting, hoisted function không trả về giá trị mặc định undefined. Ví dụ:

+ +
/* Function declaration */
+
+foo(); // "bar"
+
+function foo() {
+  console.log('bar');
+}
+
+
+/* Function expression */
+
+baz(); // TypeError: baz is not a function
+
+var baz = function() {
+  console.log('bar2');
+};
+ +

Biến toàn cục (global variables)

+ +

Các global variables trên thực tế là những properties của global object. Trong các web page, global object chính là window, nên bạn có thể set và truy cập đến các global variables bằng cách sử dụng cú pháp window.variable.

+ +

Hệ quả  là, bạn có thể truy cập đến các global variables được khai báo trong một window hoặc frame từ một window hoặc frame khác, bằng cách chỉ định rõ tên của window hoặc frame. Ví dụ, nếu một biến có tên phoneNumber được khai báo trong một document, bạn có thể tham chiếu đến biến này từ một iframe như là parent.phoneNumber.

+ +

Constants

+ +

Bạn có thể tạo các hằng số read-only với từ khóa {{jsxref("Statements/const", "const")}}. Cú pháp đặt tên cho hằng cũng giống như biến, tên hằng phải bắt đầu bằng một chữ cái, hoặc dấu gạch dưới _, hoặc dấu dollar $, và có thể bao gồm mọi ký tự chữ, số, hoặc dấu gạch dưới.

+ +
const PI = 3.14;
+
+ +

Một hằng số đã khai báo không thể thay đổi giá trị thông qua việc gán lại giá trị hoặc không thể bị khai báo lại trong khi đoạn script đang chạy. Và bắt buộc phải được gán giá trị ngay khi khởi tạo.

+ +

Các nguyên tắc về scope cho các hằng số cũng giống như cách các biến block-scoped như let hoạt động.

+ +

Bạn không thể khai báo một hằng số với tên trùng với tên function hoặc biến trong cùng một scope. Ví dụ:

+ +
// THIS WILL CAUSE AN ERROR
+function f() {};
+const f = 5;
+
+// THIS WILL CAUSE AN ERROR ALSO
+function f() {
+  const g = 5;
+  var g;
+
+  //statements
+}
+
+ +

Tuy nhiên, khi gán một object vào một hằng, thì các thuộc tính của object đó là not protected, nên câu lệnh dưới đây sẽ được thực thi mà không lỗi.

+ +
const MY_OBJECT = {'key': 'value'};
+MY_OBJECT.key = 'otherValue';
+ +

Cũng tương tự, các nội dung trong một mảng cũng là not protected, nên câu lệnh dưới đây sẽ được thực thi mà không lỗi.

+ +
const MY_ARRAY = ['HTML','CSS'];
+MY_ARRAY.push('JAVASCRIPT');
+console.log(MY_ARRAY); //logs ['HTML','CSS','JAVASCRIPT'];
+ +

Cấu trúc dữ liệu và kiểu dữ liệu

+ +

Kiểu dữ liệu

+ +

Tiêu chuẩn mới nhất của ECMAScript định nghĩa 8 kiểu dữ liệu:

+ + + +

Mặc dù những kiểu dữ liệu này tương đối ít, chúng cho phép bạn có thể thể hiện những hàm rất hữu dụng. {{jsxref("Object", "Objects")}} và {{jsxref("Function", "functions")}} là những phần tử nền tảng khác của JavaScript. Bạn có thể xem object như là những vùng chứa được đặt tên (named container) để phục vụ cho các giá trị, và các hàm là những quy trình thủ tục để đoạn script của bạn thi hành.

+ +

Chuyển đổi kiểu dữ liệu

+ +

JavaScript là dynamically typed language. Điều đó có nghĩa bạn không cần phải chỉ định kiểu dữ liệu của biến khi bạn khai báo biến, và kiểu dữ liệu được tự động chuyển đổi khi cần thiết trong quá trình đoạn script được thực thi.

+ +

Cho nên, ví dụ, bạn có thể định nghĩa một biến như sau:

+ +
var answer = 42;
+
+ +

Và sau đó, bạn có thể gán cùng một biến này với một giá trị chuỗi, ví dụ:

+ +
answer = "Thanks for all the fish...";
+
+ +

Bởi vì JavaScript là dynamically typed, việc gán giá trị này sẽ không gây ra lỗi.

+ +

Các số và toán tử '+'

+ +

Trong các biểu thức (expression) có sự liên quan giữa các giá trị numeric và string với toán tử  +, JavaScript sẽ chuyển đổi giá trị số sang chuỗi. Ví dụ:

+ +
x = "The answer is " + 42 // "The answer is 42"
+y = 42 + " is the answer" // "42 is the answer"
+
+ +

Với tất cả mọi loại toán tử khác, JavaScript sẽ không chuyển đổi giá trị numeric sang string. Ví dụ:

+ +
"37" - 7 // 30
+"37" + 7 // "377"
+
+ +

Chuyển từ kiểu chuỗi (string) sang kiểu số (number)

+ +

Tong trường hợp một giá trị biểu thị một số nhưng lại được lưu trong bộ nhớ như là một chuỗi, có các phương thức để chuyển đổi.

+ + + +

parseInt sẽ chỉ trả về các số nguyên, nên mục đích của nó là làm giảm bớt giá trị cho các số decimals. Thêm nữa, một thực hành tốt nhất cho parseInt là luôn luôn thêm vào nó tham số radix. Tham số radix được dùng để chỉ định hệ số học nào sẽ được sử dụng.

+ +
parseInt('101', 2) // 5
+ +

Một phương thức khác để nhận được giá trị số từ một chuỗi là dùng toán tử + 

+ +
"1.1" + "1.1" = "1.11.1"
+(+"1.1") + (+"1.1") = 2.2
+// Note: the parentheses are added for clarity, not required.
+ +

Literals

+ +

Literals (nguyên văn), đại diện cho các giá trị trong JavaScript. Đây là những giá trị cố định - không phải biến - mà bạn cung cấp một cách litterally trong script của bạn. Phần này mô tả những kiểu literals sau đây:

+ + + +

Array literals

+ +

Một array literal là một danh sách của không hoặc nhiều biểu thức, mỗi biểu thức trong đó đại diện cho một phần tử của mảng (array element), được bao bọc trong dấu ngoặc vuông ([]). Khi bạn tạo một mảng bằng cách dùng array literal, nó được khởi tạo với những giá trị cụ thể như là các element của mảng, và length của mảng là số lượng đối số (argument).

+ +

Ví dụ sau tạo ra mảng coffees với 3 phần tử và một length của 3:

+ +
var coffees = ["French Roast", "Colombian", "Kona"];
+
+ +

Note: Một array literal là một kiểu của object initializer. Xem Using Object Initializers.

+ +

Nếu một mảng được tạo ra sử dụng một literal trong một top-level script, JavaScript sẽ interpret mảng mỗi lần nó đánh giá biểu thức có chứa array literal. Ngoài ra, một literal được sử dụng trong một hàm sẽ được tạo ra mỗi lần function được gọi.

+ +

Note: Các array literals cũng là các Array objects. Xem {{jsxref("Array")}} and Indexed collections để biết chi tiết về Array objects.

+ +

Dấu phẩy dư trong các array literals

+ +

Bạn không cần phải xác định mọi phần tử trong một array literal. Nếu bạn đặt 2 dấu phẩy trên cùng một hàng, mảng sẽ tạo ra một phần tử mang giá trị undefined. Ví dụ sau tạo ra mảng fish.

+ +
var fish = ["Lion", , "Angel"];
+
+ +

Mảng này gồm 2 phần tử có giá trị và một phần tử rỗng (fish[0] là "Lion", fish[1] là undefined, và fish[2] là "Angel").

+ +

Nếu bạn thêm một dấu phẩy theo sau (trailing comma) phần tử cuối cùng của mãng, dấu phẩy này sẽ bị bỏ qua. Trong ví dụ sau, length của mảng là 3. Không có myList[3]. Tất cả dấu phẩy khác trong danh sách ngầm chỉ định là một phần tử mới. (Note: trailing commas có thể xem là lỗi đối với các trình duyệt cũ và tốt nhất là nên xóa chúng đi).

+ +
let myList = ['home', , 'school', ];
+
+ +

Trong ví dụ bên dưới, length của mảng là 4, myList[0] và myList[2] bị thiếu.

+ +
var myList = [ , 'home', , 'school'];
+
+ +

Trong ví dụ dưới, length của mảng là 4, myList[1] và myList[3] bị thiếu. Chỉ có dấu phẩy cuối cùng bị bỏ qua.

+ +
var myList = ['home', , 'school', , ];
+
+ +

Hiểu được hành vi của cac dấu phẩy thêm này rất quan trọng để hiểu được JavaScript như là một ngôn ngữ. Tuy nhiên, khi viết code của riêng bạn, bạn nên khai báo một cách rõ ràng các phần tử bị thiếu (missing elements) là undefined. Làm vậy sẽ gia tăng độ rõ ràng cho code và dễ bảo trì sau này.

+ +

Boolean literals

+ +

Kiểu Boolean có 2 giá trị literal: true vàfalse.

+ +

Cẩn thận: Đừng nhầm lẫn giá trị Boolean nguyên thủy true và false với true và fales của {{jsxref("Boolean")}} object. Boolean object là một lớp bao bên ngoài kiểu dữ liệu Boolean nguyên thủy. Xem {{jsxref("Boolean")}} để biết thêm.

+ +

Numeric literals

+ +

Kiểu dữ liệu {{jsxref("Number")}} và {{jsxref("BigInt")}} có thể được biểu diễn bằng hệ decimal (hệ 10), hệ hexadecimal (hệ 16), octal (hệ 8) và binary (base 2 - hệ nhị phân).

+ + + +

Một số ví dụ của numeric literals:

+ +
0, 117, -345, 123456789123456789n             (decimal, base 10)
+015, 0001 -0o77, 0o777777777777n              (octal, base 8)
+0x1123, 0x00111, -0xF1A7, 0x123456789ABCDEFn  (hexadecimal, "hex" or base 16)
+0b11, 0b0011, -0b11, 0b11101001010101010101n  (binary, base 2)
+
+ +

Chi tiết xem thêm tại: Numeric literals in the Lexical grammar reference.

+ +

Floating-point literals

+ +

Một floating-point literal (literal số thực dấu chấm động) có thể có các bộ phận sau:

+ + + +

Bộ phận số mũ là một ký tự "e" hoặc "E", theo sau nó là một số nguyên integer (số nguyên integer này có thể có thêm phía trước là dấu "+" hoặc "-"). Một floating-point literal phải có ít nhất một ký tự số, và hoặc là một dấu chấm hệ 10 hoặc là ký tự "e" (hoặc "E"). Tóm lại, cú pháp như sau:

+ +
[(+|-)][digits][.digits][(E|e)[(+|-)]digits]
+
+ +

Ví dụ: 

+ +
3.1415926
+-.123456789
+-3.1E+12
+.1e-23
+
+ +

Object literals

+ +

Một object literal là một danh sách của không hoặc nhiều cặp property names và associated values (tên thuộc tính và giá trị được liên kết) của một một object, bao bọc bởi cặp dấu ngoặc nhọn ({}).

+ +

Lưu ý đừng sử dụng một object literal ngay tại vị trí bắt đầu của một câu lệnh! Điều này sẽ dẫn đến một lỗi (hoặc nó sẽ thực thi theo cách bạn không mong muốn), vì dấu mở ngoặc nhọn { sẽ được interpreted như là bắt đầu của một block.

+ +

Ví dụ dưới đây là một ví dụ của object literal. Phần tử đầu tiên của object car định nghĩa là một thuộc tính (property), myCar, và được gán giá trị kiểu chuỗi là "myCar", phần tử thứ 2, thuộc tính getCar, ngay lập tức được gán giá trị là kết quả trả về của việc gọi hàm (CarTypes("Honda")); phần tử thứ 3, thuộc tính special, sử dụng một biến đã tồn tại (sales).

+ +
var Sales = "Toyota";
+
+function CarTypes(name) {
+  if (name == "Honda") {
+    return name;
+  } else {
+    return "Sorry, we don't sell " + name + ".";
+  }
+}
+
+var car = { myCar: "Saturn", getCar: CarTypes("Honda"), special: Sales };
+
+console.log(car.myCar);   // Saturn
+console.log(car.getCar);  // Honda
+console.log(car.special); // Toyota
+
+ +

Thêm nữa, bạn có thể sử dụng cả kiểu số hoặc chữ để đặt tên cho thuộc tính của object, hoặc bạn có thể lồng một object bên trong một object khác. Ví dụ:

+ +
var car = { manyCars: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };
+
+console.log(car.manyCars.b); // Jeep
+console.log(car[7]); // Mazda
+
+ +

Các tên thuộc tính của object có thể là bất kỳ chuỗi nào, bao gồm cả chuỗi rỗng ''. Nếu tên thuộc tính không phải là một JavaScript identifier hợp lệ, hoặc nó là số, thì nó phải được bao bọc trong các dấu nháy.

+ +

Các tên thuộc tính mà không phải là các identifier hợp lệ không thể được truy cập đến như các thuộc tính thông thường là dùng dấu chấm (.), nhưng có thể được truy cập đến và set giá trị bằng cặp dấu ngoặc vuông giống mảng ("[]").

+ +
var unusualPropertyNames = {
+  "": "An empty string",
+  "!": "Bang!"
+}
+console.log(unusualPropertyNames."");   // SyntaxError: Unexpected string
+console.log(unusualPropertyNames[""]);  // An empty string
+console.log(unusualPropertyNames.!);    // SyntaxError: Unexpected token !
+console.log(unusualPropertyNames["!"]); // Bang!
+ +

Please note:

+ +
var foo = {a: "alpha", 2: "two"};
+console.log(foo.a);    // alpha
+console.log(foo[2]);   // two
+//console.log(foo.2);  // Error: missing ) after argument list
+//console.log(foo[a]); // Error: a is not defined
+console.log(foo["a"]); // alpha
+console.log(foo["2"]); // two
+
+ +

Enhanced Object literals

+ +

Trong ES2015, các object literals được mở rộng từ đó hỗ trợ thêm việc cài đặt các prototype tại construction, shorthand cho việc gán biến foo: foo, các phương thức defining, make super calls, và xử lý các tên thuộc tính với các biểu thức. Cùng nhau, những thứ này cũng mang object listerals và khai báo class đến gần nhau hơn, và cho phép các thiết kế object-based để đạt được lợi ích từ một số tiện nghi giống nhau.

+ +
var obj = {
+    // __proto__
+    __proto__: theProtoObj,
+    // Shorthand for ‘handler: handler’
+    handler,
+    // Methods
+    toString() {
+     // Super calls
+     return 'd ' + super.toString();
+    },
+    // Computed (dynamic) property names
+    [ 'prop_' + (() => 42)() ]: 42
+};
+ +

RegExp literals

+ +

Một regex literal (được định nghĩa chi tiết sau đây) là một mô hình mẫu bao bọc giữa các dấu xuyệt /. Ví dụ:

+ +
var re = /ab+c/;
+ +

String literals

+ +

Một string literal là không có hoặc có nhiều ký tự bao bọc trong dấu (") hoặc ('). Một chuỗi (string) phải được giới hạn trong cặp dấu cùng loại; hoặc là cùng nháy đơn hoặc là cùng nháy kép. Ví dụ:

+ + + +

Bạn có thể gọi các phương thức của {{jsxref("String")}} object lên một giá trị string nguyên văn (string literal) - JavaScript tự động chuyển đổi string literal sang một String object tạm, gọi phương thức để chạy, chạy xong hủy bỏ String object tạm đó. Bạn cũng có thể sử dụng thuộc tính String.length với một string literal:

+ +
console.log("John's cat".length)
+// Will print the number of symbols in the string including whitespace.
+// In this case, 10.
+
+ +

Trong ES2015, template literals cũng được đưa vào sử dụng. Template literals bao bọc trong dấu back-tick (`) (dấu huyền) thay vì dấu nháy đơn hay nháy kép.

+ +

Các template strings cung cấp cú pháp đặc biệt (synctactic sugar) để xây dựng các chuỗi (string). (Điều này tương tự với đặc điểm nội suy chuỗi string interpolation trong Perl, Python, v.v...)

+ +

Tùy trường hợp, một thẻ tag có thể được thêm vào để cho phép việc xây dựng chuỗi được tùy chỉnh, tránh injection attacks, hoặc xây dựng nên những cấu trúc dữ liệu higher-level từ các nội dung của chuỗi.

+ +
// Basic literal string creation
+// `In JavaScript '\n' is a line-feed.`
+
+// Multiline strings
+`In JavaScript, template strings can run
+ over multiple lines, but double and single
+ quoted strings cannot.`
+
+// String interpolation
+var name = 'Bob', time = 'today';
+`Hello ${name}, how are you ${time}?`
+
+// Construct an HTTP request prefix used to interpret the replacements and construction
+POST`http://foo.org/bar?a=${a}&b=${b}
+     Content-Type: application/json
+     X-Credentials: ${credentials}
+     { "foo": ${foo},
+       "bar": ${bar}}`(myOnReadyStateChangeHandler);
+
+ +

Bạn nên sử dụng các string literals đơn thuần nếu không cần thiết phải sử dụng đến String object. Xem {{jsxref("String")}} để biết chi tiết về String objects.

+ +

Sử dụng các ký tự đặc biệt trong chuỗi

+ +

Ngoài các ký tự thông thường, bạn cũng có thể thêm vào các ký tự đặc biệt trong chuỗi, ví dụ:

+ +
"one line \n another line"
+
+ +

Bảng dưới đây liệt kê danh sách các ký tự đặc biệt có thể sử dụng trong các chuỗi JavaScript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table: JavaScript special characters
CharacterMeaning
\0Null Byte
\bBackspace - Khoảng cách
\fForm feed -
\nNew line - Dòng mới
\rCarriage return
\tTab - Tab một tab
\vVertical tab - Tab dọc
\'Apostrophe or single quote - trích dẫn đơn
\"Double quote - ngoặc kép.
\\Backslash character
\XXXThe character with the Latin-1 encoding specified by up to three octal digits XXX between 0 and 377. For example, \251 is the octal sequence for the copyright symbol.
\xXXThe character with the Latin-1 encoding specified by the two hexadecimal digits XX between 00 and FF. For example, \xA9 is the hexadecimal sequence for the copyright symbol.
\uXXXXThe Unicode character specified by the four hexadecimal digits XXXX. For example, \u00A9 is the Unicode sequence for the copyright symbol. See {{anch("Unicode escape sequences")}}.
+ +

Escaping characters

+ +

Đối với các ký tự không có trong bảng trên, dấu backslash \ được thêm vào trước sẽ bị bỏ qua, nhưng cách dùng này đã không còn nữa và nên được tránh dùng.

+ +

Bạn có thể chèn vào một dấu ngoặc kép bên trong một chuỗi bằng cách đặt phía trước nó một dấu backslash \. Điều này tức là escaping dấu trích dẫn. Ví dụ:

+ +
var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
+console.log(quote);
+
+ +

Kết quả của đoạn code trên là:

+ +
He read "The Cremation of Sam McGee" by R.W. Service.
+
+ +

Để thêm một dấu backslash thật sự vào trong chuỗi, bạn phải escape dấu backslash đó. Ví dụ, để gán dường dẫn file c:\temp vào một chuỗi:

+ +
var home = "c:\\temp";
+
+ +

Bạn cũng có thể escape các line breaks bằng cách đặt vào trước chúng một dấu backslash. Backslash và line break đều sẽ được remove khỏi giá trị của chuỗi.

+ +
var str = "this string \
+is broken \
+across multiple\
+lines."
+console.log(str);   // this string is broken across multiplelines.
+
+ +

Mặc dù JavaScript không có cú pháp "heredoc", bạn có thể gần đạt được điều này bằng cách thêm vào một linebreak escape và một escaped linebreak ở cuối mỗi dòng:

+ +
var poem =
+"Roses are red,\n\
+Violets are blue.\n\
+I'm schizophrenic,\n\
+And so am I."
+
+ +

Thông tin thêm

+ +

Chương này tập trung vào cú pháp cơ bản cho các việc khai báo và các kiểu dữ liệu. Để biết rõ hơn về cấu trúc ngôn ngữ JavaScript, xem các chương tiếp theo trong bộ hướng dẫn này:

+ + + +

Trong chương tiếp theo, chúng ta sẽ tìm hiểu về control flow constructs và error handling.

+ +

{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}

diff --git a/files/vi/web/javascript/guide/introduction/index.html b/files/vi/web/javascript/guide/introduction/index.html new file mode 100644 index 0000000000..f8fddcf666 --- /dev/null +++ b/files/vi/web/javascript/guide/introduction/index.html @@ -0,0 +1,137 @@ +--- +title: Giới thiệu +slug: Web/JavaScript/Guide/Gioi-thieu +tags: + - Guide + - JavaScript +translation_of: Web/JavaScript/Guide/Introduction +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
+ +

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.

+ +

Kiến thức nền tảng cần có

+ +

Để đế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:

+ + + +

Bạn có thể tìm thêm thông tin về JavaScript ở đâu?

+ +

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

+ + + +

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 learning area và JavaScript Guide. 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 JavaScript Reference để lấy những thông tin chi tiết của từng object và các câu lệnh (statements).

+ +

JavaScript là gì?

+ +

JavaScript là một ngôn ngữ lập trình đa nền tảng (cross-platform), 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).

+ +

JavaScript chứa các thư viện tiêu chuẩn cho các object, ví dụ như:  Array, Date, và Math, 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ụ:

+ + + +

JavaScript và Java

+ +

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.

+ +

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 dựa trên một số lượng nhỏ các loại dữ liệu đại diện cho 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 dựa trên nguyên mẫu (prototype-based) thay vì các mô hình đối tượng dựa trên lớp (class-based). Các mô hình dựa trên nguyên mẫu cung cấp khả năng thừa kế năng động; nghĩa là, những gì được kế thừa có thể khác nhau cho các đối tượng khác nhau. JavaScript cũng hỗ trợ các phương thức (function) không khai báo bất cứ gì ở trỏng. Phương thức có thể là một trong các thuộc tính (property) của các đối tượng, thực thi như là một phương thức đã được định kiểu (loosely typed methods).

+ +

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.

+ +

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.

+ +

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.

+ + + + + + + + + + + + + + + + + + + + + + + +
JavaScript so sánh với Java
JavaScriptJava
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.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.
Không khai báo kiểu dữ liệu cho biến (dynamic typing).Phải khai báo kiểu dữ liệu cho biến (static typing).
Không thể tự động ghi vào ổ đĩa cứng.Có thể tự động ghi dữ liệu vào đĩa cứng.
+ +

Thêm thông tin về sự khác nhau giữa JavaScript và Java, xem chương: Details of the object model.

+ +

JavaScript và tiêu chuẩn ECMAScript

+ +

JavaScript được tiêu chuẩn hóa tại Ecma International — 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 New in JavaScript để 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).

+ +

Tiêu chuẩn ECMA-262 cũng đã được phê duyệt bởi ISO (International Organization for Standardization) tại ISO-16262. Bạn cũng có thể tìm tiêu chuẩn trên the Ecma International website. 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 World Wide Web Consortium (W3C). 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. Để có được một cảm nhận tốt hơn về các công nghệ khác nhau được sử dụng khi lập trình với JavaScript, hãy tham khảo bài viết tổng quan về công nghệ JavaScript.

+ +

Tài liệu JavaScript và tiêu chuẩn ECMAScript

+ +

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).

+ +

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.

+ +

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.

+ +

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.

+ +

Bắt đầu với JavaScript

+ +

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..

+ +

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à: Web Console và Scratchpad.

+ +

Web Console

+ +

Web Console cho phép bạn thấy thông tin về trang Web đang chạy, và kèm theo một command line, 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.

+ +

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ó:

+ +

+ +

Scratchpad

+ +

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ì Scratchpad là một công cụ hiệu quả.

+ +

Để 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.

+ +

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:

+ +

+ +

Hello world

+ +

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:

+ +
function greetMe(user) {
+  return "Hi " + user;
+}
+
+greetMe("Alice"); // "Hi Alice"
+
+ +

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.

+ +

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

diff --git a/files/vi/web/javascript/reference/errors/qua_nhieu_de_quy/index.html b/files/vi/web/javascript/reference/errors/qua_nhieu_de_quy/index.html deleted file mode 100644 index a4851c4f56..0000000000 --- a/files/vi/web/javascript/reference/errors/qua_nhieu_de_quy/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: 'InternalError: Quá nhiều đệ quy' -slug: Web/JavaScript/Reference/Errors/qua_nhieu_de_quy -tags: - - JavaScript - - Lỗi - - Lỗi bên trong -translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion ---- -
{{jsSidebar("Errors")}}
- -

Thông điệp

- -
InternalError: too much recursion
-
- -

Loại lỗi

- -

{{jsxref("InternalError")}}.

- -

Lỗi phát sinh ra khi nào?

- -

Một hàm gọi chính nó được gọi là hàm đệ quy . Trong một số trường hợp, đệ quy tương tự như một vòng lặp. Cả hai đều thực hiện cùng một mã nhiều lần, Và cả hai đều yêu cầu một điều kiện ( Để tránh một vòng lặp vô hạn, hoặc đúng hơn, đệ quy vô hạn trong trường hợp này ). Khi có quá nhiều hoặc vô hạn đệ quy, JavaScript sẽ ném lỗi này.

- -

Ví dụ

- -

Chức năng đệ quy này chạy 10 lần, theo điều kiện x >= 10 .

- -
function loop(x) {
-  if (x >= 10) // "x >= 10" là điều kiện dừng
-    return;
-  // do stuff
-  loop(x + 1); // gọi lại chính nó (đệ quy)
-}
-loop(0);
- -

Đặt điều kiện này lên một giá trị rất cao, sẽ không hoạt động:

- -
function loop(x) {
-  if (x >= 1000000000000)
-    return;
-  // do stuff
-  loop(x + 1);
-}
-loop(0);
-
-// InternalError: too much recursion
- -

Xem thêm

- - diff --git a/files/vi/web/javascript/reference/errors/too_much_recursion/index.html b/files/vi/web/javascript/reference/errors/too_much_recursion/index.html new file mode 100644 index 0000000000..a4851c4f56 --- /dev/null +++ b/files/vi/web/javascript/reference/errors/too_much_recursion/index.html @@ -0,0 +1,54 @@ +--- +title: 'InternalError: Quá nhiều đệ quy' +slug: Web/JavaScript/Reference/Errors/qua_nhieu_de_quy +tags: + - JavaScript + - Lỗi + - Lỗi bên trong +translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion +--- +
{{jsSidebar("Errors")}}
+ +

Thông điệp

+ +
InternalError: too much recursion
+
+ +

Loại lỗi

+ +

{{jsxref("InternalError")}}.

+ +

Lỗi phát sinh ra khi nào?

+ +

Một hàm gọi chính nó được gọi là hàm đệ quy . Trong một số trường hợp, đệ quy tương tự như một vòng lặp. Cả hai đều thực hiện cùng một mã nhiều lần, Và cả hai đều yêu cầu một điều kiện ( Để tránh một vòng lặp vô hạn, hoặc đúng hơn, đệ quy vô hạn trong trường hợp này ). Khi có quá nhiều hoặc vô hạn đệ quy, JavaScript sẽ ném lỗi này.

+ +

Ví dụ

+ +

Chức năng đệ quy này chạy 10 lần, theo điều kiện x >= 10 .

+ +
function loop(x) {
+  if (x >= 10) // "x >= 10" là điều kiện dừng
+    return;
+  // do stuff
+  loop(x + 1); // gọi lại chính nó (đệ quy)
+}
+loop(0);
+ +

Đặt điều kiện này lên một giá trị rất cao, sẽ không hoạt động:

+ +
function loop(x) {
+  if (x >= 1000000000000)
+    return;
+  // do stuff
+  loop(x + 1);
+}
+loop(0);
+
+// InternalError: too much recursion
+ +

Xem thêm

+ + diff --git a/files/vi/web/javascript/reference/global_objects/array/length/index.html b/files/vi/web/javascript/reference/global_objects/array/length/index.html deleted file mode 100644 index 01186b015a..0000000000 --- a/files/vi/web/javascript/reference/global_objects/array/length/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Array.length -slug: "Web/JavaScript/Reference/Global_Objects/Array/\blength" -translation_of: Web/JavaScript/Reference/Global_Objects/Array/length ---- -
{{JSRef}}
- -

Thuộc tính length của một mảng trả về số phần tử trong mảng đó. Đó là một số nguyên 32 bit không dấu và luôn lớn hơn chỉ mục lớn nhất của mảng (chỉ mục lớn nhất chính là dộ dài của mảng trừ đi 1).

- -
{{EmbedInteractiveExample("pages/js/array-length.html")}}
- - - -

Mô tả

- -

Giá trị hợp lệ mà length có thể biểu diễn là một số nguyên dương có miền giá trị nằm trong khoảng  2 đến 232.

- -
var namelistA = new Array(4294967296); //2 to the 32nd power = 4294967296
-var namelistC = new Array(-100) //negative sign
-
-console.log(namelistA.length); //RangeError: Invalid array length
-console.log(namelistC.length); //RangeError: Invalid array length
-
-
-
-var namelistB = [];
-namelistB.length = Math.pow(2,32)-1; //set array length less than 2 to the 32nd power
-console.log(namelistB.length);
-
-//4294967295
-
- -

length  có thể được dùng để thay đổi số lượng phần tử có trong mảng bằng cách gán lại giá trị của length .  Trong ví dụ dưới đây, khi mảng chỉ có 2 phần tử nhưng ta thay đổi length thành 3 thì mảng sẽ tự động có thêm một phần tử mới. Tuy nhiên việc cố tình thay đổi này sẽ hình thành phần tử mới mang giá trị undefined.

- -
var arr = [1, 2, 3];
-printEntries(arr);
-
-arr.length = 5; // set array length to 5 while currently 3.
-printEntries(arr);
-
-function printEntries(arr) {
-  var length = arr.length;
-  for (var i = 0; i < length; i++) {
-    console.log(arr[i]);
-  }
-  console.log('=== printed ===');
-}
-
-// 1
-// 2
-// 3
-// === printed ===
-// 1
-// 2
-// 3
-// undefined
-// undefined
-// === printed ===
- -

Thực sự thì bản chất của length property không thể hiện số phần tử 'defined' có trong mảng. Tham khảo thêm từ Relationship between length and numerical properties.

- -

{{js_property_attributes(1, 0, 0)}}

- -
- -
- -

Ví dụ

- -

Duyệt mảng

- -

Trong ví dụ sau, việc duyệt một mảng với các phần tử kiểu numbers  có thể được thực hiện thông qua length. Tại mỗi bước, giá trị của mảng được gán lại gấp đôi.

- -
var numbers = [1, 2, 3, 4, 5];
-var length = numbers.length;
-for (var i = 0; i < length; i++) {
-  numbers[i] *= 2;
-}
-// numbers is now [2, 4, 6, 8, 10]
-
- -

Cẳt mảng

- -

Trong phần mô tả ở trên, nếu length có thể dùng để tăng thêm số phần tử trong mảng thì ta có thể dùng length để cắt bớt số phần tử trong mảng. Ví dụ dưới đây minh hoạ cho việc cắt bớt 2 phần tử cuối có trong mảng 5 phần tử.

- -
var numbers = [1, 2, 3, 4, 5];
-
-if (numbers.length > 3) {
-  numbers.length = 3;
-}
-
-console.log(numbers); // [1, 2, 3]
-console.log(numbers.length); // 3
-
- -

 Đặc tả

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Đặc tả Tình trạngGhi chú
{{SpecName('ES1')}}{{Spec2('ES1')}}Định nghĩa lần đâu
{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}{{Spec2('ESDraft')}}
- -

Tính tương thích

- -
- - -

{{Compat("javascript.builtins.Array.length")}}

-
- -

Liên quan

- - diff --git a/files/vi/web/javascript/reference/global_objects/array/sort/index.html b/files/vi/web/javascript/reference/global_objects/array/sort/index.html new file mode 100644 index 0000000000..1d01c587e0 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/sort/index.html @@ -0,0 +1,247 @@ +--- +title: Array.prototype.sort() +slug: Web/JavaScript/Reference/Global_Objects/Array/Sắp_xếp +translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort +--- +
{{JSRef}}
+ +

Phương thức sort() sẽ sắp xếp các phần tử của mảng ngay tại chỗ (in place) và trả về mảng đó. Kết quả sắp xếp có thể không ổn định (stable). Cách sắp xếp mặc định là theo Unicode code point của chuỗi.

+ +

Độ phức tạp về thời gian và không gian của thuật toán sắp xếp sẽ tùy vào cách hiện thực.

+ +
{{EmbedInteractiveExample("pages/js/array-sort.html")}}
+ + + +

Cú Pháp

+ +
arr.sort([compareFunction])
+
+ +

 

+ +

Tham số

+ +
+
compareFunction {{optional_inline}}
+
Hàm dùng để xác định thứ tự sắp xếp. Nếu bỏ qua, mảng sẽ được sắp xếp dựa vào giá trị Unicode code point của từng ký tự của chuỗi được chuyển đổi từ giá trị của phần tử.
+
+ +

Giá trị trả về

+ +

Mảng đã sắp xếp. Chú ý mảng này được sắp xếp in place, và không có bản sao được tạo.

+ +

Mô Tả

+ +

Nếu không truyền compareFunction vào, các phần tử sẽ được sẽ được quy đổi về chuỗi kí tự và được so sánh dựa trên thứ tự của chuỗi kí tự đó trong bảng mã Unicode. Chẳng hạn, "Banana" đứng trước "Cherry". Còn nếu so sánh số học, 9 đứng trước 80, nhưng bởi vì các chữ số đã được quy đổi về chuỗi kí tự, nên "80" sẽ đứng trước "9" theo bảng mã Unicode.

+ +

Nếu truyền compareFunction vào, phần tử của mảng sẽ được sắp xếp dựa theo giá trị trả về của hàm so sánh. Nếu a và b là hai phần tử được so sánh, thì:

+ + + +

Ví dụ đơn giản cho hàm so sánh:

+ +
function compare(a, b) {
+  if (a nhỏ hơn b) {
+    return -1;
+  }
+  if (a lớn hơn b) {
+    return 1;
+  }
+  // a bằng b
+  return 0;
+}
+
+ +

Để so sánh giữa các số, chỉ cần lấy a trừ cho b. Hàm dưới đây sẽ sắp xếp mảng theo chiều tăng dần (nếu mảng không chứa Infinity và NaN):

+ +
function compareNumbers(a, b) {
+  return a - b;
+}
+
+ +

Phương thức sort có thể dùng dễ dàng với {{jsxref("Operators/function", "function expressions", "", 1)}} (và closure):

+ +
var numbers = [4, 2, 5, 1, 3];
+numbers.sort(function(a, b) {
+  return a - b;
+});
+console.log(numbers);
+
+// [1, 2, 3, 4, 5]
+
+ +

Các Object cũng có thể được sắp xếp với một trong những thuộc tính của chúng.

+ +
var items = [
+  { name: 'Edward', value: 21 },
+  { name: 'Sharpe', value: 37 },
+  { name: 'And', value: 45 },
+  { name: 'The', value: -12 },
+  { name: 'Magnetic', value: 13 },
+  { name: 'Zeros', value: 37 }
+];
+
+// ?sắp xếp theo value (giá trị)
+items.sort(function (a, b) {
+  return a.value - b.value;
+});
+
+// sắp xếp theo name (tên)
+items.sort(function(a, b) {
+  var nameA = a.name.toUpperCase(); // bỏ qua hoa thường
+  var nameB = b.name.toUpperCase(); // bỏ qua hoa thường
+  if (nameA < nameB) {
+    return -1;
+  }
+  if (nameA > nameB) {
+    return 1;
+  }
+
+  // name trùng nhau
+  return 0;
+});
+ +

Ví dụ

+ +

 

+ +

Tạo, hiển thị và sắp xếp một mảng

+ +

Ví dụ sau sẽ tạo bốn mảng và hiển thị chúng ở dạng nguyên bản và dạng đã được sắp xếp. Những mảng số sẽ được sắp xếp bằng cách sử dụng và không sử dụng hàm so sánh.

+ +
var stringArray = ['Blue', 'Humpback', 'Beluga'];
+var numericStringArray = ['80', '9', '700'];
+var numberArray = [40, 1, 5, 200];
+var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200];
+
+function compareNumbers(a, b) {
+  return a - b;
+}
+
+console.log('stringArray:', stringArray.join());
+console.log('Sorted:', stringArray.sort());
+
+console.log('numberArray:', numberArray.join());
+console.log('Sorted without a compare function:', numberArray.sort());
+console.log('Sorted with compareNumbers:', numberArray.sort(compareNumbers));
+
+console.log('numericStringArray:', numericStringArray.join());
+console.log('Sorted without a compare function:', numericStringArray.sort());
+console.log('Sorted with compareNumbers:', numericStringArray.sort(compareNumbers));
+
+console.log('mixedNumericArray:', mixedNumericArray.join());
+console.log('Sorted without a compare function:', mixedNumericArray.sort());
+console.log('Sorted with compareNumbers:', mixedNumericArray.sort(compareNumbers));
+
+ +

Kết quả trả về như phía dưới. Như ta thấy, khi sử dụng hàm so sánh thì dù là ở dạng số hay dạng chuỗi kí tự, mảng luôn được sắp xếp đúng.

+ +
stringArray: Blue,Humpback,Beluga
+Sorted: Beluga,Blue,Humpback
+
+numberArray: 40,1,5,200
+Sorted without a compare function: 1,200,40,5
+Sorted with compareNumbers: 1,5,40,200
+
+numericStringArray: 80,9,700
+Sorted without a compare function: 700,80,9
+Sorted with compareNumbers: 9,80,700
+
+mixedNumericArray: 80,9,700,40,1,5,200
+Sorted without a compare function: 1,200,40,5,700,80,9
+Sorted with compareNumbers: 1,5,9,40,80,200,700
+
+ +

Sắp xếp kí tự ngoài mã ASCII

+ +

Để sắp xếp kí tự ngoài ASCII, ví dụ chuỗi kí tự có dấu (e, é, è, a, ä, vân vân), chuỗi kí tự thuộc ngôn ngữ không phải tiếng Anh: hãy dùng {{jsxref("String.localeCompare")}}. Hàm này có thể so sánh các kí tự đó để chúng luôn trả về thứ tự đúng.

+ +
var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
+items.sort(function (a, b) {
+  return a.localeCompare(b);
+});
+
+// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']
+
+ +

Sắp xếp cùng với map

+ +

Hàm compareFunction có thể được gọi nhiều lần trên cùng một phần tử của mảng. Tuỳ thuộc vào bản chất của compareFunction, việc này có thể tốn nhiều chi phí ban đầu. Hàm compareFunction càng phức tạp và càng có nhiều phần tử phải sắp xếp, thì việc sắp xếp càng phải thông minh hơn, như là dùng thêm phương thức map chẳng hạn. Ý tưởng là truyền mảng vào một lần để sàng ra những phần tử cần sắp xếp và lưu chúng vào một mảng tạm, sắp xếp mảng tạm ấy rồi sàng lại mảng tạm sẽ ra được thứ tự mong muốn.

+ +
// mảng cần sắp xếp
+var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
+
+// temporary array holds objects with position and sort-value
+var mapped = list.map(function(el, i) {
+  return { index: i, value: el.toLowerCase() };
+})
+
+// sorting the mapped array containing the reduced values
+mapped.sort(function(a, b) {
+  if (a.value > b.value) {
+    return 1;
+  }
+  if (a.value < b.value) {
+    return -1;
+  }
+  return 0;
+});
+
+// container for the resulting order
+var result = mapped.map(function(el){
+  return list[el.index];
+});
+
+ +

Đặc điểm kỹ thuật

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Đặc tảTình trạngGhi chú
{{SpecName('ES1')}}{{Spec2('ES1')}}Định nghĩa lần đầu.
{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}{{Spec2('ESDraft')}} 
+ +

Trình duyệt tương thích

+ +
+ + +

{{Compat("javascript.builtins.Array.sort")}}

+
+ +

Xem thêm

+ + diff --git "a/files/vi/web/javascript/reference/global_objects/array/s\341\272\257p_x\341\272\277p/index.html" "b/files/vi/web/javascript/reference/global_objects/array/s\341\272\257p_x\341\272\277p/index.html" deleted file mode 100644 index 1d01c587e0..0000000000 --- "a/files/vi/web/javascript/reference/global_objects/array/s\341\272\257p_x\341\272\277p/index.html" +++ /dev/null @@ -1,247 +0,0 @@ ---- -title: Array.prototype.sort() -slug: Web/JavaScript/Reference/Global_Objects/Array/Sắp_xếp -translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort ---- -
{{JSRef}}
- -

Phương thức sort() sẽ sắp xếp các phần tử của mảng ngay tại chỗ (in place) và trả về mảng đó. Kết quả sắp xếp có thể không ổn định (stable). Cách sắp xếp mặc định là theo Unicode code point của chuỗi.

- -

Độ phức tạp về thời gian và không gian của thuật toán sắp xếp sẽ tùy vào cách hiện thực.

- -
{{EmbedInteractiveExample("pages/js/array-sort.html")}}
- - - -

Cú Pháp

- -
arr.sort([compareFunction])
-
- -

 

- -

Tham số

- -
-
compareFunction {{optional_inline}}
-
Hàm dùng để xác định thứ tự sắp xếp. Nếu bỏ qua, mảng sẽ được sắp xếp dựa vào giá trị Unicode code point của từng ký tự của chuỗi được chuyển đổi từ giá trị của phần tử.
-
- -

Giá trị trả về

- -

Mảng đã sắp xếp. Chú ý mảng này được sắp xếp in place, và không có bản sao được tạo.

- -

Mô Tả

- -

Nếu không truyền compareFunction vào, các phần tử sẽ được sẽ được quy đổi về chuỗi kí tự và được so sánh dựa trên thứ tự của chuỗi kí tự đó trong bảng mã Unicode. Chẳng hạn, "Banana" đứng trước "Cherry". Còn nếu so sánh số học, 9 đứng trước 80, nhưng bởi vì các chữ số đã được quy đổi về chuỗi kí tự, nên "80" sẽ đứng trước "9" theo bảng mã Unicode.

- -

Nếu truyền compareFunction vào, phần tử của mảng sẽ được sắp xếp dựa theo giá trị trả về của hàm so sánh. Nếu a và b là hai phần tử được so sánh, thì:

- - - -

Ví dụ đơn giản cho hàm so sánh:

- -
function compare(a, b) {
-  if (a nhỏ hơn b) {
-    return -1;
-  }
-  if (a lớn hơn b) {
-    return 1;
-  }
-  // a bằng b
-  return 0;
-}
-
- -

Để so sánh giữa các số, chỉ cần lấy a trừ cho b. Hàm dưới đây sẽ sắp xếp mảng theo chiều tăng dần (nếu mảng không chứa Infinity và NaN):

- -
function compareNumbers(a, b) {
-  return a - b;
-}
-
- -

Phương thức sort có thể dùng dễ dàng với {{jsxref("Operators/function", "function expressions", "", 1)}} (và closure):

- -
var numbers = [4, 2, 5, 1, 3];
-numbers.sort(function(a, b) {
-  return a - b;
-});
-console.log(numbers);
-
-// [1, 2, 3, 4, 5]
-
- -

Các Object cũng có thể được sắp xếp với một trong những thuộc tính của chúng.

- -
var items = [
-  { name: 'Edward', value: 21 },
-  { name: 'Sharpe', value: 37 },
-  { name: 'And', value: 45 },
-  { name: 'The', value: -12 },
-  { name: 'Magnetic', value: 13 },
-  { name: 'Zeros', value: 37 }
-];
-
-// ?sắp xếp theo value (giá trị)
-items.sort(function (a, b) {
-  return a.value - b.value;
-});
-
-// sắp xếp theo name (tên)
-items.sort(function(a, b) {
-  var nameA = a.name.toUpperCase(); // bỏ qua hoa thường
-  var nameB = b.name.toUpperCase(); // bỏ qua hoa thường
-  if (nameA < nameB) {
-    return -1;
-  }
-  if (nameA > nameB) {
-    return 1;
-  }
-
-  // name trùng nhau
-  return 0;
-});
- -

Ví dụ

- -

 

- -

Tạo, hiển thị và sắp xếp một mảng

- -

Ví dụ sau sẽ tạo bốn mảng và hiển thị chúng ở dạng nguyên bản và dạng đã được sắp xếp. Những mảng số sẽ được sắp xếp bằng cách sử dụng và không sử dụng hàm so sánh.

- -
var stringArray = ['Blue', 'Humpback', 'Beluga'];
-var numericStringArray = ['80', '9', '700'];
-var numberArray = [40, 1, 5, 200];
-var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200];
-
-function compareNumbers(a, b) {
-  return a - b;
-}
-
-console.log('stringArray:', stringArray.join());
-console.log('Sorted:', stringArray.sort());
-
-console.log('numberArray:', numberArray.join());
-console.log('Sorted without a compare function:', numberArray.sort());
-console.log('Sorted with compareNumbers:', numberArray.sort(compareNumbers));
-
-console.log('numericStringArray:', numericStringArray.join());
-console.log('Sorted without a compare function:', numericStringArray.sort());
-console.log('Sorted with compareNumbers:', numericStringArray.sort(compareNumbers));
-
-console.log('mixedNumericArray:', mixedNumericArray.join());
-console.log('Sorted without a compare function:', mixedNumericArray.sort());
-console.log('Sorted with compareNumbers:', mixedNumericArray.sort(compareNumbers));
-
- -

Kết quả trả về như phía dưới. Như ta thấy, khi sử dụng hàm so sánh thì dù là ở dạng số hay dạng chuỗi kí tự, mảng luôn được sắp xếp đúng.

- -
stringArray: Blue,Humpback,Beluga
-Sorted: Beluga,Blue,Humpback
-
-numberArray: 40,1,5,200
-Sorted without a compare function: 1,200,40,5
-Sorted with compareNumbers: 1,5,40,200
-
-numericStringArray: 80,9,700
-Sorted without a compare function: 700,80,9
-Sorted with compareNumbers: 9,80,700
-
-mixedNumericArray: 80,9,700,40,1,5,200
-Sorted without a compare function: 1,200,40,5,700,80,9
-Sorted with compareNumbers: 1,5,9,40,80,200,700
-
- -

Sắp xếp kí tự ngoài mã ASCII

- -

Để sắp xếp kí tự ngoài ASCII, ví dụ chuỗi kí tự có dấu (e, é, è, a, ä, vân vân), chuỗi kí tự thuộc ngôn ngữ không phải tiếng Anh: hãy dùng {{jsxref("String.localeCompare")}}. Hàm này có thể so sánh các kí tự đó để chúng luôn trả về thứ tự đúng.

- -
var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
-items.sort(function (a, b) {
-  return a.localeCompare(b);
-});
-
-// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']
-
- -

Sắp xếp cùng với map

- -

Hàm compareFunction có thể được gọi nhiều lần trên cùng một phần tử của mảng. Tuỳ thuộc vào bản chất của compareFunction, việc này có thể tốn nhiều chi phí ban đầu. Hàm compareFunction càng phức tạp và càng có nhiều phần tử phải sắp xếp, thì việc sắp xếp càng phải thông minh hơn, như là dùng thêm phương thức map chẳng hạn. Ý tưởng là truyền mảng vào một lần để sàng ra những phần tử cần sắp xếp và lưu chúng vào một mảng tạm, sắp xếp mảng tạm ấy rồi sàng lại mảng tạm sẽ ra được thứ tự mong muốn.

- -
// mảng cần sắp xếp
-var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
-
-// temporary array holds objects with position and sort-value
-var mapped = list.map(function(el, i) {
-  return { index: i, value: el.toLowerCase() };
-})
-
-// sorting the mapped array containing the reduced values
-mapped.sort(function(a, b) {
-  if (a.value > b.value) {
-    return 1;
-  }
-  if (a.value < b.value) {
-    return -1;
-  }
-  return 0;
-});
-
-// container for the resulting order
-var result = mapped.map(function(el){
-  return list[el.index];
-});
-
- -

Đặc điểm kỹ thuật

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Đặc tảTình trạngGhi chú
{{SpecName('ES1')}}{{Spec2('ES1')}}Định nghĩa lần đầu.
{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}{{Spec2('ESDraft')}} 
- -

Trình duyệt tương thích

- -
- - -

{{Compat("javascript.builtins.Array.sort")}}

-
- -

Xem thêm

- - diff --git a/files/vi/web/javascript/reference/global_objects/error/index.html b/files/vi/web/javascript/reference/global_objects/error/index.html new file mode 100644 index 0000000000..a9733ce5b0 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/error/index.html @@ -0,0 +1,240 @@ +--- +title: Lỗi +slug: Web/JavaScript/Reference/Global_Objects/loi +tags: + - JavaScript + - Lỗi + - Tham chiếu +translation_of: Web/JavaScript/Reference/Global_Objects/Error +--- +
{{JSRef}}
+ +
Hàm Error tạo ra một đối tượng kiểu lỗi. Các thể hiện của đối tượng Error được ném ra khi xảy ra lỗi thực thi. Một đối tượng Error ngoài ra có thể được dùng như là một đối tượng căn bản cho các ngoại lệ do người dùng tự định nghĩa. Xem bên dưới các loại lỗi chuẩn được xây dựng sẵn.
+ +

Cú pháp

+ +
new Error([message[, fileName[, lineNumber]]])
+ +

Tham số

+ +
+
message
+
Tùy chọn. Một mô tả của lỗi rằng người dùng có thể đọc được.
+
fileName {{non-standard_inline}}
+
Tùy chọn. Giá trị của thuộc tính fileName trong quá trình tạo ra đối tượng Error. Các mặc định là tên của tập tin chứa đoạn mã gọi tới hàm Error().  
+
lineNumber {{non-standard_inline}}
+
Tuỳ chọn. Giá trị của thuộc tính lineNumber trong quá trình tạo ra đối tượng Error. Các mặc định là số dòng hiện tại đang gọi tới hàm Error().
+
+ +

Mô tả

+ +

Các lỗi thực thi dẫn đến các đối tượng Error được tạo ra và ném đi.

+ +

Trang này ghi lại việc sử dụng đối tượng Error và cách sử dụng nó như là một hàm. Để biết danh sách các thuộc tính và phương thức được kế thừa bởi các thể hiện của Error, xem {{jsxref("Error.prototype")}}.

+ +

Được sử dụng như là một hàm

+ +

Khi Error được sử dụng như là một hàm -- không có từ khoá new, nó sẽ trả về một đối tượng Error. Do đó, gọi hàm Error cũng sẽ tạo ra cùng một đối tượng Error thông qua từ khóa new.

+ +
// this:
+const x = Error('Tôi được tạo ra bằng cách sử dụng gọi hàm!');
+​​​​// tương tự như this
+const y = new Error('Tôi được xây dựng thông qua từ khoá "new"!');
+ +

Các loại lỗi

+ +

Bên cạnh hàm Error, còn có 7 hàm khác làm việc với lỗi trong JavaScript. Đối với ngoại lệ phía client, xem thêm tại Các câu lệnh xử lý ngoại lệ.

+ +
+
{{jsxref("EvalError")}}
+
Tạo một thể hiện đại diện cho một lỗi xảy ra liên quan đến hàm toàn cục {{jsxref("Global_Objects/eval", "eval()")}}.
+
{{jsxref("InternalError")}} {{non-standard_inline}}
+
Tạo một thể hiện đại diện cho một lỗi xảy ra khi một lỗi bên trong bộ máy JavaScript được ném. Ví dụ: "quá nhiều đệ quy".
+
{{jsxref("RangeError")}}
+
Tạo một thể hiện đại diện cho một lỗi xảy ra khi một biến số hoặc tham số nằm ngoài phạm vi hợp lệ của nó.
+
{{jsxref("ReferenceError")}}
+
Tạo một thể hiện đại diện cho một lỗi xảy ra khi hủy tham chiếu của một tham chiếu không hợp lệ.
+
{{jsxref("SyntaxError")}}
+
Tạo một thể hiện đại diện cho một lỗi xảy ra trong khi phân tích cú pháp mã trong {{jsxref("Global_Objects/eval", "eval()")}}.
+
{{jsxref("TypeError")}}
+
Tạo một thể hiện đại diện cho một lỗi xảy ra khi một biến hoặc một tham số có kiểu không hợp lệ.
+
{{jsxref("URIError")}}
+
Tạo một thể hiện đại diện cho một lỗi xảy ra khi {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} hoặc {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} truyền các tham số không hợp lệ.
+
+ +

Thuộc tính

+ +
+
{{jsxref("Error.prototype")}}
+
Cho phép thêm các thuộc tính mới vào các thể hiện của Error.
+
+ +

Phương thức

+ +

Một đối tượng Error toàn cục không chứa phương thức riêng của nó, tuy nhiên, nó thừa hưởng các phương thức từ prototype.

+ +

Các thể hiện của Error

+ +
{{page('en-US/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Description')}}
+ +

Các thuộc tính

+ +
{{page('en-US/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Properties')}}
+ +

Các phương thức

+ +
{{page('en-US/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Methods')}}
+ +

Các ví dụ

+ +

Ném một lỗi thông thường

+ +

Thông thường bạn tạo ra một đối tượng Error và muốn sử dụng nó cùng tới từ khoá {{jsxref("Statements/throw", "throw")}}. Bạn có thể bẫy lỗi bằng cách sử dụng cú pháp {{jsxref("Statements/try...catch", "try...catch")}}:

+ +
try {
+  throw new Error('Whoops!');
+} catch (e) {
+  console.log(e.name + ': ' + e.message);
+}
+
+ +

Xử lý một lỗi cụ thể

+ +

Bạn có thể chọn cách chỉ xử lý các loại lỗi cụ thể bằng cách kiểm tra loại lỗi với thuộc tính {{jsxref("Object.prototype.constructor", "constructor")}} của lỗi hoặc, nếu bạn đang viết cho các công cụ JavaScript hiện đại, hãy dùng từ khoá {{jsxref("Operators/instanceof", "instanceof")}}:

+ +
try {
+  foo.bar();
+} catch (e) {
+  if (e instanceof EvalError) {
+    console.log(e.name + ': ' + e.message);
+  } else if (e instanceof RangeError) {
+    console.log(e.name + ': ' + e.message);
+  }
+  // ... etc
+}
+
+ +

Tùy biến các loại lỗi

+ +

Bạn có thể muốn định nghĩa các loại lỗi của riêng mình được dẫn xuất từ Error để có thể throw new MyError() và sử dụng instanceof MyError để kiểm tra loại lỗi trong trình xử lý ngoại lệ. Điều này làm cho mã xử lý lỗi sạch hơn và nhất quán hơn. Xem "Cách tốt để thừa kế hàm Error trong JavaScript là gì?" trên StackOverflow để thảo luận chuyên sâu.

+ +

Tuỳ biến lớp Error trong ES6

+ +
+

Babel và các trình biên dịch khác sẽ không xử lý chính xác đoạn mã sau mà không cần cấu hình bổ sung.

+
+ +
+

Một số trình duyệt đã thêm hàm CustomError trong ngăn xếp qua cách dùng class trong ES6.

+
+ +
class CustomError extends Error {
+  constructor(foo = 'bar', ...params) {
+    // Pass remaining arguments (including vendor specific ones) to parent constructor
+    super(...params);
+
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, CustomError);
+    }
+
+    // Custom debugging information
+    this.foo = foo;
+    this.date = new Date();
+  }
+}
+
+try {
+  throw new CustomError('baz', 'bazMessage');
+} catch(e){
+  console.log(e.foo); //baz
+  console.log(e.message); //bazMessage
+  console.log(e.stack); //stacktrace
+}
+ +

Tuỳ biến đối tượng trong ES5

+ +
+

Tất cả trình duyệt đã thêm hàm CustomError trong ngăn xếp qua cách khai báo chuẩn.

+
+ +
function CustomError(foo, message, fileName, lineNumber) {
+  var instance = new Error(message, fileName, lineNumber);
+  instance.foo = foo;
+  Object.setPrototypeOf(instance, Object.getPrototypeOf(this));
+  if (Error.captureStackTrace) {
+    Error.captureStackTrace(instance, CustomError);
+  }
+  return instance;
+}
+
+CustomError.prototype = Object.create(Error.prototype, {
+  constructor: {
+    value: Error,
+    enumerable: false,
+    writable: true,
+    configurable: true
+  }
+});
+
+if (Object.setPrototypeOf){
+  Object.setPrototypeOf(CustomError, Error);
+} else {
+  CustomError.__proto__ = Error;
+}
+
+
+try {
+  throw new CustomError('baz', 'bazMessage');
+} catch(e){
+  console.log(e.foo); //baz
+  console.log(e.message) ;//bazMessage
+}
+ +

Các đặc điểm kỹ thuật

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Đặc điểm kỹ thuậtTrạng tháiChú thích
{{SpecName('ES1')}}{{Spec2('ES1')}}Định nghĩa ban đầu. Được triển khai trong JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.11', 'Error')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-error-objects', 'Error')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-error-objects', 'Error')}}{{Spec2('ESDraft')}} 
+ +

Tính tương thích của trình duyệt

+ +
+ + +

{{Compat("javascript.builtins.Error")}}

+
+ +

Tham khảo

+ + diff --git a/files/vi/web/javascript/reference/global_objects/loi/index.html b/files/vi/web/javascript/reference/global_objects/loi/index.html deleted file mode 100644 index a9733ce5b0..0000000000 --- a/files/vi/web/javascript/reference/global_objects/loi/index.html +++ /dev/null @@ -1,240 +0,0 @@ ---- -title: Lỗi -slug: Web/JavaScript/Reference/Global_Objects/loi -tags: - - JavaScript - - Lỗi - - Tham chiếu -translation_of: Web/JavaScript/Reference/Global_Objects/Error ---- -
{{JSRef}}
- -
Hàm Error tạo ra một đối tượng kiểu lỗi. Các thể hiện của đối tượng Error được ném ra khi xảy ra lỗi thực thi. Một đối tượng Error ngoài ra có thể được dùng như là một đối tượng căn bản cho các ngoại lệ do người dùng tự định nghĩa. Xem bên dưới các loại lỗi chuẩn được xây dựng sẵn.
- -

Cú pháp

- -
new Error([message[, fileName[, lineNumber]]])
- -

Tham số

- -
-
message
-
Tùy chọn. Một mô tả của lỗi rằng người dùng có thể đọc được.
-
fileName {{non-standard_inline}}
-
Tùy chọn. Giá trị của thuộc tính fileName trong quá trình tạo ra đối tượng Error. Các mặc định là tên của tập tin chứa đoạn mã gọi tới hàm Error().  
-
lineNumber {{non-standard_inline}}
-
Tuỳ chọn. Giá trị của thuộc tính lineNumber trong quá trình tạo ra đối tượng Error. Các mặc định là số dòng hiện tại đang gọi tới hàm Error().
-
- -

Mô tả

- -

Các lỗi thực thi dẫn đến các đối tượng Error được tạo ra và ném đi.

- -

Trang này ghi lại việc sử dụng đối tượng Error và cách sử dụng nó như là một hàm. Để biết danh sách các thuộc tính và phương thức được kế thừa bởi các thể hiện của Error, xem {{jsxref("Error.prototype")}}.

- -

Được sử dụng như là một hàm

- -

Khi Error được sử dụng như là một hàm -- không có từ khoá new, nó sẽ trả về một đối tượng Error. Do đó, gọi hàm Error cũng sẽ tạo ra cùng một đối tượng Error thông qua từ khóa new.

- -
// this:
-const x = Error('Tôi được tạo ra bằng cách sử dụng gọi hàm!');
-​​​​// tương tự như this
-const y = new Error('Tôi được xây dựng thông qua từ khoá "new"!');
- -

Các loại lỗi

- -

Bên cạnh hàm Error, còn có 7 hàm khác làm việc với lỗi trong JavaScript. Đối với ngoại lệ phía client, xem thêm tại Các câu lệnh xử lý ngoại lệ.

- -
-
{{jsxref("EvalError")}}
-
Tạo một thể hiện đại diện cho một lỗi xảy ra liên quan đến hàm toàn cục {{jsxref("Global_Objects/eval", "eval()")}}.
-
{{jsxref("InternalError")}} {{non-standard_inline}}
-
Tạo một thể hiện đại diện cho một lỗi xảy ra khi một lỗi bên trong bộ máy JavaScript được ném. Ví dụ: "quá nhiều đệ quy".
-
{{jsxref("RangeError")}}
-
Tạo một thể hiện đại diện cho một lỗi xảy ra khi một biến số hoặc tham số nằm ngoài phạm vi hợp lệ của nó.
-
{{jsxref("ReferenceError")}}
-
Tạo một thể hiện đại diện cho một lỗi xảy ra khi hủy tham chiếu của một tham chiếu không hợp lệ.
-
{{jsxref("SyntaxError")}}
-
Tạo một thể hiện đại diện cho một lỗi xảy ra trong khi phân tích cú pháp mã trong {{jsxref("Global_Objects/eval", "eval()")}}.
-
{{jsxref("TypeError")}}
-
Tạo một thể hiện đại diện cho một lỗi xảy ra khi một biến hoặc một tham số có kiểu không hợp lệ.
-
{{jsxref("URIError")}}
-
Tạo một thể hiện đại diện cho một lỗi xảy ra khi {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} hoặc {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} truyền các tham số không hợp lệ.
-
- -

Thuộc tính

- -
-
{{jsxref("Error.prototype")}}
-
Cho phép thêm các thuộc tính mới vào các thể hiện của Error.
-
- -

Phương thức

- -

Một đối tượng Error toàn cục không chứa phương thức riêng của nó, tuy nhiên, nó thừa hưởng các phương thức từ prototype.

- -

Các thể hiện của Error

- -
{{page('en-US/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Description')}}
- -

Các thuộc tính

- -
{{page('en-US/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Properties')}}
- -

Các phương thức

- -
{{page('en-US/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Methods')}}
- -

Các ví dụ

- -

Ném một lỗi thông thường

- -

Thông thường bạn tạo ra một đối tượng Error và muốn sử dụng nó cùng tới từ khoá {{jsxref("Statements/throw", "throw")}}. Bạn có thể bẫy lỗi bằng cách sử dụng cú pháp {{jsxref("Statements/try...catch", "try...catch")}}:

- -
try {
-  throw new Error('Whoops!');
-} catch (e) {
-  console.log(e.name + ': ' + e.message);
-}
-
- -

Xử lý một lỗi cụ thể

- -

Bạn có thể chọn cách chỉ xử lý các loại lỗi cụ thể bằng cách kiểm tra loại lỗi với thuộc tính {{jsxref("Object.prototype.constructor", "constructor")}} của lỗi hoặc, nếu bạn đang viết cho các công cụ JavaScript hiện đại, hãy dùng từ khoá {{jsxref("Operators/instanceof", "instanceof")}}:

- -
try {
-  foo.bar();
-} catch (e) {
-  if (e instanceof EvalError) {
-    console.log(e.name + ': ' + e.message);
-  } else if (e instanceof RangeError) {
-    console.log(e.name + ': ' + e.message);
-  }
-  // ... etc
-}
-
- -

Tùy biến các loại lỗi

- -

Bạn có thể muốn định nghĩa các loại lỗi của riêng mình được dẫn xuất từ Error để có thể throw new MyError() và sử dụng instanceof MyError để kiểm tra loại lỗi trong trình xử lý ngoại lệ. Điều này làm cho mã xử lý lỗi sạch hơn và nhất quán hơn. Xem "Cách tốt để thừa kế hàm Error trong JavaScript là gì?" trên StackOverflow để thảo luận chuyên sâu.

- -

Tuỳ biến lớp Error trong ES6

- -
-

Babel và các trình biên dịch khác sẽ không xử lý chính xác đoạn mã sau mà không cần cấu hình bổ sung.

-
- -
-

Một số trình duyệt đã thêm hàm CustomError trong ngăn xếp qua cách dùng class trong ES6.

-
- -
class CustomError extends Error {
-  constructor(foo = 'bar', ...params) {
-    // Pass remaining arguments (including vendor specific ones) to parent constructor
-    super(...params);
-
-    // Maintains proper stack trace for where our error was thrown (only available on V8)
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, CustomError);
-    }
-
-    // Custom debugging information
-    this.foo = foo;
-    this.date = new Date();
-  }
-}
-
-try {
-  throw new CustomError('baz', 'bazMessage');
-} catch(e){
-  console.log(e.foo); //baz
-  console.log(e.message); //bazMessage
-  console.log(e.stack); //stacktrace
-}
- -

Tuỳ biến đối tượng trong ES5

- -
-

Tất cả trình duyệt đã thêm hàm CustomError trong ngăn xếp qua cách khai báo chuẩn.

-
- -
function CustomError(foo, message, fileName, lineNumber) {
-  var instance = new Error(message, fileName, lineNumber);
-  instance.foo = foo;
-  Object.setPrototypeOf(instance, Object.getPrototypeOf(this));
-  if (Error.captureStackTrace) {
-    Error.captureStackTrace(instance, CustomError);
-  }
-  return instance;
-}
-
-CustomError.prototype = Object.create(Error.prototype, {
-  constructor: {
-    value: Error,
-    enumerable: false,
-    writable: true,
-    configurable: true
-  }
-});
-
-if (Object.setPrototypeOf){
-  Object.setPrototypeOf(CustomError, Error);
-} else {
-  CustomError.__proto__ = Error;
-}
-
-
-try {
-  throw new CustomError('baz', 'bazMessage');
-} catch(e){
-  console.log(e.foo); //baz
-  console.log(e.message) ;//bazMessage
-}
- -

Các đặc điểm kỹ thuật

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Đặc điểm kỹ thuậtTrạng tháiChú thích
{{SpecName('ES1')}}{{Spec2('ES1')}}Định nghĩa ban đầu. Được triển khai trong JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.11', 'Error')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-error-objects', 'Error')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-error-objects', 'Error')}}{{Spec2('ESDraft')}} 
- -

Tính tương thích của trình duyệt

- -
- - -

{{Compat("javascript.builtins.Error")}}

-
- -

Tham khảo

- - diff --git a/files/vi/web/javascript/reference/global_objects/promise/prototype/index.html b/files/vi/web/javascript/reference/global_objects/promise/prototype/index.html deleted file mode 100644 index 9fb94f4154..0000000000 --- a/files/vi/web/javascript/reference/global_objects/promise/prototype/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Promise.prototype -slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Promise -translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype ---- -
{{JSRef}}
- -

Thuộc tính Promise.prototype biểu diễn nguyên mẫu (prototype) cho hàm khởi tạo của {{jsxref("Promise")}}.

- -
{{js_property_attributes(0,0,0)}}
- -

Mô tả

- -

Mỗi đối tượng {{jsxref("Promise")}} được kế thừa từ {{jsxref("Promise.prototype")}}. Ta có thể sử dụng nguyên mẫu của hàm khởi tạo để thêm vào các thuộc tính hoặc phương thức mới cho đối tượng Promise.

- -

Thuộc tính

- -
-
Promise.prototype.constructor
-
Trả ra hàm khởi tạo một nguyên mẫu đối tượng. Mặc định là hàm {{jsxref("Promise")}}.
-
- -

Phương thức

- -
-
{{jsxref("Promise.catch", "Promise.prototype.catch(onRejected)")}}
-
Thêm một hàm phản hồi lỗi cho promise và trả ra một promise mới chứa kết quả được truyền vào hàm phản hồi đó sau khi thao tác xử lý của promise kết thúc.
-
{{jsxref("Promise.then", "Promise.prototype.then(onFulfilled, onRejected)")}}
-
Thêm một hàm phản hồi (có thể là thành công hoặc thất bại) và trả ra một promise mới chứa kết quả là kết quả thực thi của promise sau khi tác vụ kết thúc. Trong đó onFulfilled sẽ có đầu vòa là kết quả xử lý thành công, còn onRejected có đầu vòa là kết quả xử lý thất bại.
-
- -

Đặc tả

- - - - - - - - - - - - - - - - - - - -
Đặc tảTrạng tháiGhi chú
{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}{{Spec2('ESDraft')}} 
- -

Trình duyệt tương thích

- - - -

{{Compat}}

- -

See also

- - diff --git a/files/vi/web/javascript/reference/operators/arithmetic_operators/index.html b/files/vi/web/javascript/reference/operators/arithmetic_operators/index.html deleted file mode 100644 index 302c6633c6..0000000000 --- a/files/vi/web/javascript/reference/operators/arithmetic_operators/index.html +++ /dev/null @@ -1,313 +0,0 @@ ---- -title: Toán tử số học -slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators ---- -
{{jsSidebar("Operators")}}
- -

Toán tử số học lấy giá trị số học (cả chuỗi hoặc biến) làm toán hạng của nó và trả về một giá trị số học. Các toán tử số học thông thường là cộng (+), trừ (-), nhân (*), và chia (/).

- -
{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}
- - - -

Cộng (+)

- -

Toán tử cộng xuất ra tổng của toán hạng số học hoặc để nối chuỗi.

- -

Cú pháp

- -
Toán tử: x + y
-
- -

Examples

- -
// Number + Number -> addition
-1 + 2 // 3
-
-// Boolean + Number -> addition
-true + 1 // 2
-
-// Boolean + Boolean -> addition
-false + false // 0
-
-// Number + String -> concatenation
-5 + 'foo' // "5foo"
-
-// String + Boolean -> concatenation
-'foo' + false // "foofalse"
-
-// String + String -> concatenation
-'foo' + 'bar' // "foobar"
-
- -

Trừ (-)

- -

Toán tử trừ thực hiện trừ hai toán hạng, xuất ra chênh lệch giữa chúng.

- -

Cú pháp

- -
Toán tử: x - y
-
- -

Ví dụ

- -
5 - 3 // 2
-3 - 5 // -2
-'foo' - 3 // NaN
- -

Chia (/)

- -

Toán tử chia xuất ra thương của phép chia với toán hạng bên trái là số bị chia và toán hạng bên phải là số chia.

- -

Cú pháp

- -
Toán tử: x / y
-
- -

Ví dụ

- -
1 / 2      // trả về 0.5 trong JavaScript
-1 / 2      // trả về 0 trong Java
-// (neither number is explicitly a floating point number)
-
-1.0 / 2.0  // ?trả về 0.5 trong cả JavaScript lẫn Java
-
-2.0 / 0    // ?trả về Infinity trong JavaScript
-2.0 / 0.0  // cũng trả về Infinity
-2.0 / -0.0 // trả về -Infinity trong JavaScript
- -

Nhân (*)

- -

Toán tử nhân xuất ra tích của các toán hạng.

- -

Cú pháp

- -
Toán tử: x * y
-
- -

Ví dụ

- -
2 * 2 // 4
--2 * 2 // -4
-Infinity * 0 // NaN
-Infinity * Infinity // Infinity
-'foo' * 2 // NaN
-
- -

Chia lấy dư (%)

- -

Toán tử chia lấy dư trả về phần dư khi toán hạng thứ nhất chia cho toán hạng thứ hai. Dấu của kết quả luôn cùng dấu với số bị chia.

- -

Cú pháp

- -
Toán tử: var1 % var2
-
- -

Ví dụ

- -
12 % 5 // 2
--1 % 2 // -1
-1 % -2 // 1
-NaN % 2 // NaN
-1 % 2 // 1
-2 % 3 // 2
--4 % 2 // -0
-5.5 % 2 // 1.5
-
- -

Luỹ thừa (**)

- -

Toán tử luỹ thừa trả về kết quả là luỹ thừa bậc là toán hạng thứ hai của toán hạng thứ nhất, tức là, var1var2, như đã khẳng định trước đó, với var1 và var2 là biến số. Toán tử luỹ thừa là dạng liên hợp phải. a ** b ** c bằng với a ** (b ** c).

- -

Cú pháp

- -
Toán tử: var1 ** var2
-
- -

Ghi chú

- -

Trong hầu hết các ngôn ngữ như PHP và Python và một số khác mà có toán tử luỹ thừa (**), toán tử luỹ thừa được định nghĩa là có độ ưu tiên cao hơn toán tử một ngôi như là toán tử + một ngôi và toán tử - một ngôi, nhưng cũng có vài ngoại lệ. Chẳng hạn, trong Bash, toán tử ** được định nghĩa là có độ ưu tiên thấp hơn toán tử một ngôi. Trong JavaScript, hoàn toàn có thể viết một biểu thức luỹ thừa nhập nhằng, như là bạn không thể đặt toán tử một ngôi (+/-/~/!/delete/void/typeof) ngay trước cơ số.

- -
-2 ** 2;
-// 4 trong Bash, -4 trong các ngôn ngữ khác.
-// Không hợp lệ trong JavaScript, vì toán tử không nhập nhằng.
-
-
--(2 ** 2);
-// -4 trong JavaScript và ý định của tác giả không nhập nhằng.
-
- -

Ví dụ

- -
2 ** 3 // 8
-3 ** 2 // 9
-3 ** 2.5 // 15.588457268119896
-10 ** -1 // 0.1
-NaN ** 2 // NaN
-
-2 ** 3 ** 2 // 512
-2 ** (3 ** 2) // 512
-(2 ** 3) ** 2 // 64
-
- -

To invert the sign of the result of an exponentiation expression:

- -
-(2 ** 2) // -4
-
- -

Để ép cơ số trong biểu thức luỹ thừa thành số âm:

- -
(-2) ** 2 // 4
-
- -
-

Ghi chú: JavaScript cũng có toán tử thao tác bit ^ (XOR). ** và ^ khác nhau (chẳng hạn: 2 ** 3 === 8 trong khi 2 ^ 3 === 1.)

-
- -

 

- -

Tăng (++)

- -

 

- -

Toán tử tăng tăng (thêm một vào) toán hạng của nó và trả về một giá trị.

- - - -

Cú pháp

- -
Toán tử: x++ hoặc ++x
-
- -

Ví dụ

- -
// Hậu tố
-var x = 3;
-y = x++; // y = 3, x = 4
-
-// Tiền tố
-var a = 2;
-b = ++a; // a = 3, b = 3
-
- -

Giảm (--)

- -

Toán tử giảm giảm (bớt một khỏi) toán hạng của nó và trả về một giá trị.

- - - -

Cú pháp

- -
Toán tử: x-- hoặc --x
-
- -

Ví dụ

- -
// Hậu tố
-var x = 3;
-y = x--; // y = 3, x = 2
-
-// Tiền tố
-var a = 2;
-b = --a; // a = 1, b = 1
-
- -

Phủ định một ngôi (-)

- -

Toán tử phủ định một ngôi đứng trước và phủ định toán hạng của nó.

- -

Cú pháp

- -
Toán tử: -x
-
- -

Ví dụ

- -
var x = 3;
-y = -x; // y = -3, x = 3
-
-//toán tử phủ định một ngôi có thể chuyển giá-trị-không-phải-kiểu-số về dạng số học
-var x = "4";
-y = -x; // y = -4
-
- -

Cộng một ngôi (+)

- -

Toán tử cộng một ngôi đứng trước và định lượng toán hạng của nó nhưng cố gắng chuyển kiểu cho toán hạng sang dạng số, nếu ban đầu không phải ở dạng đó. Mặc dù toán tử phủ định một ngôi (-) cũng có thể chuyển kiểu như vậy, nhưng toán tử cộng một ngôi lại nhanh nhất và được dùng ưu tiên dùng nhiều hơn khi phải chuyển đổi kiểu dữ liệu về dạng số, bởi vì nó không thực hiện bất cứ phép toán nào khác trên số. Nó có thể chuyển kiểu từ biểu diễn dạng chuỗi của số nguyên hoặc số thực, thậm chí cả các giá trị không phải số như true, false, và null. Số thực ở dạng thập phân và bát phân (tiền tố - "0x") đều được hỗ trợ. Đồng thời hỗ trợ cả số âm (trừ số âm dạng bát phân). Nếu nó không thể truyền đúng dữ liệu đã định, nó sẽ định lượng thành NaN.

- -

Cú pháp

- -
Toán tử: +x
-
- -

Ví dụ

- -
+3     // 3
-+'3'   // 3
-+true  // 1
-+false // 0
-+null  // 0
-+function(val){  return val } // NaN
-
- -

Đặc tả

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Đặc tảTrạng tháiBình luận
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-11.3')}}{{Spec2('ES5.1')}}Defined in several sections of the specification: Additive operators, Multiplicative operators, Postfix expressions, Unary operators.
{{SpecName('ES2015', '#sec-postfix-expressions')}}{{Spec2('ES2015')}}Defined in several sections of the specification: Additive operators, Multiplicative operators, Postfix expressions, Unary operators.
{{SpecName('ES2016', '#sec-postfix-expressions')}}{{Spec2('ES2016')}}Added Exponentiation operator.
{{SpecName('ES2017', '#sec-postfix-expressions')}}{{Spec2('ES2017')}} 
{{SpecName('ESDraft', '#sec-additive-operators')}}{{Spec2('ESDraft')}} 
- -

Tương thích trình duyệt

- - - -

{{Compat("javascript.operators.arithmetic")}}

- -

Đọc thêm

- - -- cgit v1.2.3-54-g00ecf