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 --- .../index.html" | 303 -------- .../conflicting/learn/css/first_steps/index.html | 44 ++ files/vi/conflicting/web/html/index.html | 102 +++ .../global_objects/array/length/index.html | 144 ++++ .../reference/global_objects/promise/index.html | 65 ++ .../web/javascript/reference/operators/index.html | 313 +++++++++ files/vi/dom_inspector/index.html | 5 - files/vi/glossary/ajax/index.html | 22 + files/vi/glossary/algorithm/index.html | 36 + files/vi/glossary/array/index.html | 22 + files/vi/glossary/attribute/index.html | 18 + files/vi/glossary/bandwidth/index.html | 23 + files/vi/glossary/boolean/index.html | 53 ++ files/vi/glossary/browser/index.html | 27 + files/vi/glossary/cache/index.html | 17 + files/vi/glossary/callback_function/index.html | 27 + files/vi/glossary/cdn/index.html | 17 + files/vi/glossary/computer_programming/index.html | 19 + files/vi/glossary/css/index.html | 43 ++ .../dynamic_programming_language/index.html | 20 + files/vi/glossary/falsy/index.html | 32 + files/vi/glossary/general_header/index.html | 10 + files/vi/glossary/head/index.html | 15 + files/vi/glossary/hoisting/index.html | 71 ++ files/vi/glossary/html/index.html | 44 ++ files/vi/glossary/identifier/index.html | 18 + files/vi/glossary/index.html | 30 + files/vi/glossary/jquery/index.html | 42 ++ files/vi/glossary/json/index.html | 26 + files/vi/glossary/metadata/index.html | 20 + files/vi/glossary/null/index.html | 23 + files/vi/glossary/operand/index.html | 12 + files/vi/glossary/php/index.html | 54 ++ files/vi/glossary/primitive/index.html | 121 ++++ files/vi/glossary/responsive_web_design/index.html | 20 + files/vi/glossary/svg/index.html | 33 + files/vi/glossary/truthy/index.html | 33 + files/vi/glossary/type_conversion/index.html | 14 + files/vi/glossary/undefined/index.html | 27 + files/vi/glossary/xml/index.html | 14 + files/vi/labs-tab/index.html | 6 - .../how_does_the_internet_work/index.html | 97 +++ .../internet_lam_viec_nh_the_nao/index.html | 97 --- .../set_up_a_local_testing_server/index.html | 99 +++ .../thiet_lap_web_mang_noi_bo/index.html | 99 --- .../index.html | 83 --- files/vi/learn/forms/index.html | 101 +++ .../index.html" | 62 -- .../installing_basic_software/index.html | 62 ++ files/vi/learn/html/forms/index.html | 101 --- files/vi/mdn/community/index.html | 55 -- .../howto/create_an_mdn_account/index.html | 38 - .../howto/do_a_technical_review/index.html | 51 -- .../howto/do_an_editorial_review/index.html | 48 -- .../index.html" | 303 ++++++++ files/vi/orphaned/dom_inspector/index.html | 5 + files/vi/orphaned/labs-tab/index.html | 6 + .../vi/orphaned/learn/how_to_contribute/index.html | 83 +++ files/vi/orphaned/mdn/community/index.html | 55 ++ .../howto/create_an_mdn_account/index.html | 38 + .../howto/do_a_technical_review/index.html | 51 ++ .../howto/do_an_editorial_review/index.html | 48 ++ files/vi/tu-dien-thuat-ngu/ajax/index.html | 22 - files/vi/tu-dien-thuat-ngu/algorithm/index.html | 36 - files/vi/tu-dien-thuat-ngu/array/index.html | 22 - files/vi/tu-dien-thuat-ngu/attribute/index.html | 18 - files/vi/tu-dien-thuat-ngu/bandwidth/index.html | 23 - files/vi/tu-dien-thuat-ngu/boolean/index.html | 53 -- files/vi/tu-dien-thuat-ngu/cache/index.html | 17 - .../tu-dien-thuat-ngu/callback_function/index.html | 27 - files/vi/tu-dien-thuat-ngu/cdn/index.html | 17 - .../computer_programming/index.html | 19 - files/vi/tu-dien-thuat-ngu/css/index.html | 43 -- .../dynamic_programming_language/index.html | 20 - files/vi/tu-dien-thuat-ngu/falsy/index.html | 32 - .../vi/tu-dien-thuat-ngu/general_header/index.html | 10 - files/vi/tu-dien-thuat-ngu/head/index.html | 15 - files/vi/tu-dien-thuat-ngu/hoisting/index.html | 71 -- files/vi/tu-dien-thuat-ngu/html/index.html | 44 -- files/vi/tu-dien-thuat-ngu/identifier/index.html | 18 - files/vi/tu-dien-thuat-ngu/index.html | 30 - files/vi/tu-dien-thuat-ngu/jquery/index.html | 42 -- files/vi/tu-dien-thuat-ngu/json/index.html | 26 - files/vi/tu-dien-thuat-ngu/metadata/index.html | 20 - files/vi/tu-dien-thuat-ngu/null/index.html | 23 - files/vi/tu-dien-thuat-ngu/operand/index.html | 12 - files/vi/tu-dien-thuat-ngu/php/index.html | 54 -- files/vi/tu-dien-thuat-ngu/primitive/index.html | 121 ---- .../responsive_web_design/index.html | 20 - files/vi/tu-dien-thuat-ngu/svg/index.html | 33 - files/vi/tu-dien-thuat-ngu/trinh-duyet/index.html | 27 - files/vi/tu-dien-thuat-ngu/truthy/index.html | 33 - .../tu-dien-thuat-ngu/type_conversion/index.html | 14 - files/vi/tu-dien-thuat-ngu/undefined/index.html | 27 - files/vi/tu-dien-thuat-ngu/xml/index.html | 14 - .../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 --------- 124 files changed, 5362 insertions(+), 5362 deletions(-) delete mode 100644 "files/vi/b\341\272\243n_k\303\252_khai_c\303\240i_\304\221\341\272\267t/index.html" create mode 100644 files/vi/conflicting/learn/css/first_steps/index.html create mode 100644 files/vi/conflicting/web/html/index.html create mode 100644 files/vi/conflicting/web/javascript/reference/global_objects/array/length/index.html create mode 100644 files/vi/conflicting/web/javascript/reference/global_objects/promise/index.html create mode 100644 files/vi/conflicting/web/javascript/reference/operators/index.html delete mode 100644 files/vi/dom_inspector/index.html create mode 100644 files/vi/glossary/ajax/index.html create mode 100644 files/vi/glossary/algorithm/index.html create mode 100644 files/vi/glossary/array/index.html create mode 100644 files/vi/glossary/attribute/index.html create mode 100644 files/vi/glossary/bandwidth/index.html create mode 100644 files/vi/glossary/boolean/index.html create mode 100644 files/vi/glossary/browser/index.html create mode 100644 files/vi/glossary/cache/index.html create mode 100644 files/vi/glossary/callback_function/index.html create mode 100644 files/vi/glossary/cdn/index.html create mode 100644 files/vi/glossary/computer_programming/index.html create mode 100644 files/vi/glossary/css/index.html create mode 100644 files/vi/glossary/dynamic_programming_language/index.html create mode 100644 files/vi/glossary/falsy/index.html create mode 100644 files/vi/glossary/general_header/index.html create mode 100644 files/vi/glossary/head/index.html create mode 100644 files/vi/glossary/hoisting/index.html create mode 100644 files/vi/glossary/html/index.html create mode 100644 files/vi/glossary/identifier/index.html create mode 100644 files/vi/glossary/index.html create mode 100644 files/vi/glossary/jquery/index.html create mode 100644 files/vi/glossary/json/index.html create mode 100644 files/vi/glossary/metadata/index.html create mode 100644 files/vi/glossary/null/index.html create mode 100644 files/vi/glossary/operand/index.html create mode 100644 files/vi/glossary/php/index.html create mode 100644 files/vi/glossary/primitive/index.html create mode 100644 files/vi/glossary/responsive_web_design/index.html create mode 100644 files/vi/glossary/svg/index.html create mode 100644 files/vi/glossary/truthy/index.html create mode 100644 files/vi/glossary/type_conversion/index.html create mode 100644 files/vi/glossary/undefined/index.html create mode 100644 files/vi/glossary/xml/index.html delete mode 100644 files/vi/labs-tab/index.html create mode 100644 files/vi/learn/common_questions/how_does_the_internet_work/index.html delete mode 100644 files/vi/learn/common_questions/internet_lam_viec_nh_the_nao/index.html create mode 100644 files/vi/learn/common_questions/set_up_a_local_testing_server/index.html delete mode 100644 files/vi/learn/common_questions/thiet_lap_web_mang_noi_bo/index.html delete mode 100644 files/vi/learn/dong_gop_cho_khu_vuc_hoc_tap_tren_mdn/index.html create mode 100644 files/vi/learn/forms/index.html delete mode 100644 "files/vi/learn/getting_started_with_the_web/c\303\240i_\304\221\341\272\267t_c\303\241c_ph\341\272\247n_m\341\273\201m_c\306\241_b\341\272\243n/index.html" create mode 100644 files/vi/learn/getting_started_with_the_web/installing_basic_software/index.html delete mode 100644 files/vi/learn/html/forms/index.html delete mode 100644 files/vi/mdn/community/index.html delete mode 100644 files/vi/mdn/contribute/howto/create_an_mdn_account/index.html delete mode 100644 files/vi/mdn/contribute/howto/do_a_technical_review/index.html delete mode 100644 files/vi/mdn/contribute/howto/do_an_editorial_review/index.html create mode 100644 "files/vi/orphaned/b\341\272\243n_k\303\252_khai_c\303\240i_\304\221\341\272\267t/index.html" create mode 100644 files/vi/orphaned/dom_inspector/index.html create mode 100644 files/vi/orphaned/labs-tab/index.html create mode 100644 files/vi/orphaned/learn/how_to_contribute/index.html create mode 100644 files/vi/orphaned/mdn/community/index.html create mode 100644 files/vi/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html create mode 100644 files/vi/orphaned/mdn/contribute/howto/do_a_technical_review/index.html create mode 100644 files/vi/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/ajax/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/algorithm/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/array/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/attribute/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/bandwidth/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/boolean/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/cache/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/callback_function/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/cdn/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/computer_programming/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/css/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/dynamic_programming_language/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/falsy/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/general_header/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/head/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/hoisting/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/html/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/identifier/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/jquery/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/json/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/metadata/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/null/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/operand/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/php/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/primitive/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/responsive_web_design/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/svg/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/trinh-duyet/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/truthy/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/type_conversion/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/undefined/index.html delete mode 100644 files/vi/tu-dien-thuat-ngu/xml/index.html 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') diff --git "a/files/vi/b\341\272\243n_k\303\252_khai_c\303\240i_\304\221\341\272\267t/index.html" "b/files/vi/b\341\272\243n_k\303\252_khai_c\303\240i_\304\221\341\272\267t/index.html" deleted file mode 100644 index e7b696b80f..0000000000 --- "a/files/vi/b\341\272\243n_k\303\252_khai_c\303\240i_\304\221\341\272\267t/index.html" +++ /dev/null @@ -1,303 +0,0 @@ ---- -title: Bản Kê Khai Cài Đặt -slug: Bản_Kê_Khai_Cài_Đặt ---- -

Giới Thiệu

-

Một Bản Kê Khai Cài Đặt (Install Manifest) là một tập tin mà một ứng dụng XUL - được bật mở trình Quản lý Tiện ích - sử dụng để xác định các thông tin về tiện ích khi nó được cài đặt. Nó chứa các siêu dữ liệu (metadata) để nhận diện tiện ích, cung cấp thông tin về người đã tạo ra nó, nơi mà các thông thêm về nó có thể được tìm thấy, các phiên bản nào của ứng dụng nào mà nó tương thích, làm sao để nó luôn được cập nhật, và nhiều thứ khác.

-

Định dạng của Bản Kê Khai Cài Đặt là RDF/XML.

-

Tập tin này phải được đặt tên là install.rdf và luôn có ở cấp cao nhất trong tập tin XPI của tiện ích.

-

Bố Cục

-

Bố cục cơ bản của một Bản Kê Khai Cài Đặt tương tự như sau:

-
<?xml version="1.0"?>
-
-<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
-  <Description about="urn:mozilla:install-manifest">
-    <!-- các thuộc tính -->
-  </Description>
-</RDF>
-
-

Một số thuộc tính là bắt buộc, số khác là tùy chọn. Một số cái chỉ có giá trị chuỗi đơn giản, số khác lại là tài nguyên phức tạp.

-

Các Thuộc Tính Bắt Buộc

-

Bản Kê Khai Cài Đặt phải đặc tả những thuộc tính này một cách chính xác nếu không tiện ích của bạn có lẽ sẽ không được cài.

-

id

-

Định danh (id) của phần mở rộng, nó là một:

- -

The latter format is significantly easier to generate and manipulate. Firefox 1.5 has checking to ensure that your id falls into one format or the other and will refuse to install addons that have malformed ids.

-

Examples

-
<em:id>myextension@mysite.com</em:id>
-
-<em:id>{daf44bf7-a45e-4450-979c-91cf07434c3d}</em:id>
-

version

-

A version string identifying the version of the addon being supplied.

-

For Firefox/Thunderbird 1.0, the format must conform to the rules specified in Extension Versioning, Update and Compatibility. For Firefox/Thunderbird 1.5, see Toolkit version format.

-

Examples

-
<em:version>2.0</em:version>
-
-<em:version>1.0.2</em:version>
-
-<em:version>0.4.1.2005090112</em:version>
-

Firefox 1.5 / XULRunner 1.8 - addons that do not use a valid version format will not be installed. The version format is different from, although backwards-compatible with, 1.0's.

-

For addons hosted on addons.mozilla.org - Mozilla's update website may repackage your addon and correct or reject malformed version strings.

-

type

-

An integer value representing the type of addon.

- - - - - - - - - - - - - - - - - - - -
2Extensions
4Themes
8Locale
32Multiple Item Package
-

Examples

-
<em:type>2</em:type>
-

{{ Fx_minversion_inline(1.5) }} This property was added for Firefox 1.5, and is only required for addon types other than Extensions and Themes.

-

{{ Fx_minversion_inline(3) }} Firefox 2 and previous supported a value of 16 to represent plug-ins. In Firefox 3 this has been removed.

-

targetApplication

-

An object specifying an application targeted by this addon. This means that the addon will work with the application identified by the id property (<em:id>) specified (for a comprehensive list of application IDs and valid min/maxVersions for them see Valid application versions for add-on developers), from the minimum version (<em:minVersion>) up to and including the maximum version (<em:maxVersion>). These version strings are formatted in the same fashion as the version property and will be compared to the application version; this allows the extension author to specify which versions of Firefox an extension has been tested with.

-
- Extensions compatible with Firefox 3.5 should specify a maxVersion of 3.5.*, so that they are automatically compatible with security and stability updates. For Firefox 3.0, a maxVersion of 3.0.* should be used. Extensions compatible only with Firefox or Thunderbird 2 should specify a maxVersion of 2.0.0.*.
-

The Install Manifest must specify at least one of these objects, and may specify more if the addon targets multiple applications that support the Add-on Manager (e.g. Firefox and Thunderbird)

-

Examples

-
<em:targetApplication>
- <Description>
-  <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> Firefox
-  <em:minVersion>1.5</em:minVersion>
-  <em:maxVersion>3.0.*</em:maxVersion>
- </Description>
-</em:targetApplication>
-
-

{{ Fx_minversion_inline(3) }} Gecko 1.9 based applications allow you to use the special targetApplication id toolkit@mozilla.org to say that the add-on is compatible with any toolkit app with a toolkit version matching the minVersion and maxVersion.

-

name

-

The name of the add-on; intended for display in the UI.

-

Examples

-
<em:name>My Extension</em:name>
-

Optional Property Reference

-

You may need to supply these properties, depending on the capabilities of your add-on.

-

localized

-

{{ Fx_minversion_inline(3) }} Allows you to localize the add-on's name, description, contributors and other metadata. The localized description must specify at least one em:locale which indicates which locales to use this information for.

-

Examples

-

This declares a set of add-on metadata to be displayed when the application is running in the de-DE locale.

-
<em:localized>
-  <Description>
-    <em:locale>de-DE</em:locale>
-    <em:name>Tab Sidebar</em:name>
-    <em:description>Zeigt in einer Sidebar Vorschaubilder der Inhalte aller offenen Tabs an.</em:description>
-  </Description>
-</em:localized>
-
-

The following properties which are described elsewhere in this page can be included in the localized property:

- -

More documentation can be found at Localizing extension descriptions.

-

description

-

A short description of the add-on - intended for display in the user interface. This description should fit on one short line of text.

-

Examples

-
<em:description>Advanced foo tools.</em:description>
-
-

creator

-

The name of the creator/principal developer - intended for display in the user interface.

-

Examples

-
<em:creator>John Doe</em:creator>
-
-

or

-
<em:creator>CoolExtension Team</em:creator>
-
-

developer

-

{{ Fx_minversion_inline(2) }} The name(s) of co-developers. You may specify more than one of this value to specify multiple developers.

-

Examples

-
<em:developer>Jane Doe</em:developer>
-<em:developer>Koos van der Merwe</em:developer>
-
-

translator

-

{{ Fx_minversion_inline(2) }} The name(s) of translators. You may specify more than one of this value to specify multiple translators.

-

Examples

-
<em:translator>Janez Novak</em:translator>
-<em:translator>Kari Nordmann</em:translator>
-
-

contributor

-

The name(s) of additional contributors. You may specify more than one of this value to specify multiple contributors.

-

Examples

-
<em:contributor>John Doe</em:contributor>
-
-<em:contributor>John Doe</em:contributor>
-<em:contributor>Jane Doe</em:contributor>
-<em:contributor>Elvis Presley</em:contributor>
-
-

homepageURL

-

A link to the addon's home page - intended for display in the user interface.

-

Examples

-
<em:homepageURL>http://www.foo.com/</em:homepageURL>
-
-

updateURL

-

A link to a custom Update Manifest file that specifies available updates to the addon. The format is described below. If enabled, the addon manager periodically checks with this Manifest file to determine if newer versions are available.

-
- Note: It is strongly recommended that the updateURL be an HTTPS (secure) link. Non-secure update URLs can be hijacked by a malicious update.rdf file, enabling malware to infiltrate the user's computer. Alternatively, you could host your extension on AMO and leave out the updateURL completely. This provides secure updates automatically.
-

{{ Fx_minversion_inline(3) }} For security reasons, Gecko 1.9 applications require that if you specify an updateURL, it must be an https URL, or you must include an updateKey.

-

Your server must send this file as text/rdf, text/xml or application/xml+rdf or the update checker may not work.

-

The addon manager will substitute the following values into this URL in case you wish to generate the response RDF dynamically, such as using PHP or CGI:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
%REQ_VERSION%The version of the request. Currently 1
%ITEM_ID%The id of the addon being updated
%ITEM_VERSION%The version of the addon being updated
%ITEM_MAXAPPVERSION%The maxVersion of the targetApplication object corresponding to the current application for the addon being updated.
%ITEM_STATUS%{{ Fx_minversion_inline(2) }} Comma separated list of the add-ons operating status in the application. Contains at the least either userEnabled or userDisabled plus any number of incompatible, blockslisted or needsDependencies.
%APP_ID%The id of the current application
%APP_VERSION%The version of the application to check for updates for
%CURRENT_APP_VERSION%{{ Fx_minversion_inline(3.5) }} The version of the current application
%APP_OS%{{ Fx_minversion_inline(1.5) }} The value of OS_TARGET from the Firefox build system, identifying the operating system being used.
%APP_ABI%{{ Fx_minversion_inline(1.5) }} The value of the TARGET_XPCOM_ABI value from the Firefox build system, identifying the compiler/architecture combination used to compile the current application.
%APP_LOCALE%{{ Fx_minversion_inline(3) }} The current application's locale.
-

Examples

-
<em:updateURL>http://www.foo.com/update.cgi?id=%ITEM_ID%&amp;version=%ITEM_VERSION%</em:updateURL>
-<em:updateURL>http://www.foo.com/extension/windows.rdf</em:updateURL>
-
-

For addons hosted on addons.mozilla.org: You may not specify an updateURL property. By default, Mozilla applications using the Addon Manager (such as Firefox and Thunderbird) will send update requests to addons.mozilla.org using the default web service. Every time you upload a new version of your addon or change its compatibility parameters through the author interface, your update manifest will be generated automatically. Addons currently marked as experimental will not be updated due to security concerns.

-

Format of the Update Manifest: The Update Manifest is a RDF/XML datasource. For examples of an update manifest, see Extension Versioning, Update and Compatibility and Enabling Extension Updates (external).

-

updateKey

-

{{ Gecko_minversion_header(1.9) }} {{ Fx_minversion_header(3) }}

-

To ensure the security of update rdf data that is retrieved over plain http you must use a digital signature to verify the contents of the data. In order to do so you must include the public part of the cryptographic key in an updateKey entry in the install.rdf of the add-on. This can be generated using the McCoy tool. Any line breaks and whitespace as part of this entry are ignored.

-

Examples

-
 <em:updateKey>MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDK426erD/H3XtsjvaB5+PJqbhj
-               Zc9EDI5OCJS8R3FIObJ9ZHJK1TXeaE7JWqt9WUmBWTEFvwS+FI9vWu8058N9CHhD
-               NyeP6i4LuUYjTURnn7Yw/IgzyIJ2oKsYa32RuxAyteqAWqPT/J63wBixIeCxmysf
-               awB/zH4KaPiY3vnrzQIDAQAB</em:updateKey>
-
-

optionsURL

-

The chrome:// URL of the extension's options dialog box. This is only useful to extensions. If this property is specified, when the extension is selected in the Extensions list, the Options button is enabled and will show this.

-

Examples

-
<em:optionsURL>chrome://myext/content/options.xul</em:optionsURL>
-
-

aboutURL

-

Thechrome:// URL of the extension's about dialog box. This is only useful to extensions. If this property is specified, when the extension is selected in the Extensions list, the About... link in the extension's context menu will show this dialog, rather than the default.

-

Examples

-
<em:aboutURL>chrome://myext/content/about.xul</em:aboutURL>
-
-

iconURL

-

A chrome:// URL to a 32x32 icon to display in the add-ons list. If this property is not specified, a default icon is used.

-
<em:iconURL>chrome://myext/skin/icon.png</em:iconURL>
-
- Note: For the above example to work you will also have to add a skin package line to your chrome.manifest file. See Chrome Registration#skin. Alternatively you can place your icon in the directory specified in your content package line.
-

{{ gecko_minversion_note("1.9.2", "Starting in Gecko 1.9.2 (Firefox 3.6), you can also simply include your icon, named icon.png, in the base directory of the add-on. This allows your add-on's icon to be displayed even when the add-on is disabled, or if the manifest is missing an iconURL entry.") }}

-

targetPlatform

-

{{ Fx_minversion_inline(1.5) }} A string specifying a platform that the addon supports. It contains either the value of OS_TARGET alone or combined with TARGET_XPCOM_ABI, separated by an underscore (_).

-

You can specify multiple targetPlatform properties per manifest. If any value matches the application's build parameters, it will be installed; if not, the user will get an appropriate error message.

-

Examples

-
<em:targetPlatform>WINNT_x86-msvc</em:targetPlatform>
-
-<em:targetPlatform>Linux</em:targetPlatform>
-
-<em:targetPlatform>Darwin_ppc-gcc3</em:targetPlatform>
-
-<em:targetPlatform>SunOS_sparc-sunc</em:targetPlatform>
-
-

Usually, you would use only the OS part for themes or for extensions that are not fully cross-platform. For extensions including binary (compiled) components, you should never use the OS alone, but include the ABI (s) that you compiled the components with. If you want to include multiple versions of the components, you should also use Platform-specific Subdirectories.

-

Notes

- -

This property was added for Firefox/Thunderbird 1.5. Previous versions of these applications will ignore the restrictions and install the addon regardless of the platform.

-

requires

-

{{ Fx_minversion_inline(2) }} This tag has a similar syntax to the <em:targetApplication> tag. If the add-on specified by the <em:id> tag is not installed or has an incompatible version, the extension manager will disable your extension and show the message "Requires additional items". You can add as many <em:requires> tags as you like. Your extension will be disabled if any of the specified requirements fail.

-

Example

-
<em:requires>
-   <Description>
-     <!-- Lightning -->
-     <em:id>{e2fda1a4-762b-4020-b5ad-a41df1933103}</em:id>
-     <em:minVersion>0.5pre</em:minVersion>
-     <em:maxVersion>0.5pre</em:maxVersion>
-   </Description>
- </em:requires>
-
-

Notes

- -

This property was added for Firefox/Thunderbird 2. Previous versions of these applications will ignore the restrictions and install the add-on regardless of the requirements.

-

Obsolete Property Reference

-

These properties were required in older versions of the Addon Manager, but have been replaced with newer and better mechanisms.

-

file

-

Firefox 1.0 This property pointed to a chrome .jar file that contains chrome packages that require registration with the Chrome Registry.

-

The <em:file> property has a complex object value. The uri of the value is urn:mozilla:extension:file:jarFile.jar where jarFile.jar is the name of the jar file that contains the chrome package's files. This could also be the name of a directory that contains the chrome package's files, un-jarred (e.g. urn:mozilla:extension:file:directory). In either case, the referenced chrome package file(s) must be placed in the chrome subdirectory of the XPI's top level.

-

This object has a package property (with a path within the jar file or directory that leads to the location where the contents.rdf file responsible for registering that package is located), a locale property (ditto, but to register the locale) and a skin property (ditto, but to register the theme material).

-

In extensions for Firefox 1.5, this property is no longer necessary: the chrome.manifest at the top level of the XPI is used to locate chrome to register. If there is no chrome.manifest, this property is still read by the Addon Manager and a chrome.manifest is generated from old-style contents.rdf.

-

Examples

-
<em:file>
- <Description about="urn:mozilla:extension:file:myext.jar">
-  <em:package>content/myext/</em:package>
-  <em:locale>locale/en-US/myext/</em:locale>
-  <em:skin>skin/classic/myext/<em:skin>
- </Description>
-</em:file>
-
-

An Install Manifest may specify multiple file properties, one for each jar file or subdirectory that contains chrome to register.

-

hidden

-

Firefox 1.0 - 3.5 A boolean value that when true makes the add-on not show up in the add-ons list, provided the add-on is installed in a {{ Anch("restricted access area") }} (so it does not work for add-ons installed in the profile). This is for bundling integration hooks to larger applications where having an entry in the Extensions list does not make sense.

-
- Note: This property is no longer supported under Gecko 1.9.2 (Firefox 3.6) or later, to prevent extensions from being installed in such a way that the user might not be able to tell they're installed.
-

Examples

-
<em:hidden>true</em:hidden>
-

Glossary

-

restricted access area

-

A restricted access area is an install location that could be restricted on a restricted-access account, regardless of whether or not the location is restricted with the current user privileges (see {{ Source("toolkit/mozapps/extensions/public/nsIExtensionManager.idl#80", "nsIInstallLocation::restricted") }}). Currently, the ($APPDIR)/extensions folder and the registry install location under HKEY_LOCAL_MACHINE (see Adding Extensions using the Windows Registry for details) are restricted.

-

The ($PROFILE)/extensions and HKEY_CURRENT_USER install locations, on the other hand, are not restricted.

diff --git a/files/vi/conflicting/learn/css/first_steps/index.html b/files/vi/conflicting/learn/css/first_steps/index.html new file mode 100644 index 0000000000..2bfc5c76bb --- /dev/null +++ b/files/vi/conflicting/learn/css/first_steps/index.html @@ -0,0 +1,44 @@ +--- +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/conflicting/web/html/index.html b/files/vi/conflicting/web/html/index.html new file mode 100644 index 0000000000..0b57e8194c --- /dev/null +++ b/files/vi/conflicting/web/html/index.html @@ -0,0 +1,102 @@ +--- +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/conflicting/web/javascript/reference/global_objects/array/length/index.html b/files/vi/conflicting/web/javascript/reference/global_objects/array/length/index.html new file mode 100644 index 0000000000..01186b015a --- /dev/null +++ b/files/vi/conflicting/web/javascript/reference/global_objects/array/length/index.html @@ -0,0 +1,144 @@ +--- +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/conflicting/web/javascript/reference/global_objects/promise/index.html b/files/vi/conflicting/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..9fb94f4154 --- /dev/null +++ b/files/vi/conflicting/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,65 @@ +--- +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/conflicting/web/javascript/reference/operators/index.html b/files/vi/conflicting/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..302c6633c6 --- /dev/null +++ b/files/vi/conflicting/web/javascript/reference/operators/index.html @@ -0,0 +1,313 @@ +--- +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

+ + diff --git a/files/vi/dom_inspector/index.html b/files/vi/dom_inspector/index.html deleted file mode 100644 index ec9b4e0dbb..0000000000 --- a/files/vi/dom_inspector/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: DOM Inspector -slug: DOM_Inspector ---- -

DOM Inspector (viết tắt là DOMi) là bộ công cụ dùng để kiểm tra, duyệt và chỉnh sửa  Document Object Model - dùng trong các trang web hoặc cửa sổ XUL. Hệ thống phân cấp DOM có thể điều hướng qua lại 2 cửa sổ cho phép xem tài liệu và các nút.

diff --git a/files/vi/glossary/ajax/index.html b/files/vi/glossary/ajax/index.html new file mode 100644 index 0000000000..c111812954 --- /dev/null +++ b/files/vi/glossary/ajax/index.html @@ -0,0 +1,22 @@ +--- +title: AJAX +slug: Tu-dien-thuat-ngu/AJAX +translation_of: Glossary/AJAX +--- +

AJAX (Asynchronous {{glossary("JavaScript")}} And {{glossary("XML")}}) là một kỹ thuật lập trình kết hợp {{glossary("HTML")}}, {{glossary("CSS")}}, {{glossary("JavaScript")}}, {{glossary("DOM")}}, và đối tượng XMLHttpRequest để xây dựng các trang web phức tạp hơn. Điều mà AJAX cho phép bạn thực hiện chỉ là cập nhật một số thành phần của trang web thay vì phải tải lại toàn bộ trang. AJAX cũng cho phép bạn làm việc bất đồng bộ, có nghĩa là mã nguồn của bạn tiếp tục chạy trong khi những thành phần đó sẽ cố gắng tải lại (còn đồng bộ sẽ không cho mã nguồn của bạn chạy cho đến khi các thành phần của trang web tải lại xong).

+ +

Thêm nữa

+ +

Hiểu biết chung

+ + + +

Tài liệu chuyên môn

+ + diff --git a/files/vi/glossary/algorithm/index.html b/files/vi/glossary/algorithm/index.html new file mode 100644 index 0000000000..79accd5810 --- /dev/null +++ b/files/vi/glossary/algorithm/index.html @@ -0,0 +1,36 @@ +--- +title: Thuật Toán +slug: Tu-dien-thuat-ngu/Algorithm +tags: + - thuật toán +translation_of: Glossary/Algorithm +--- +

Thuật toán là một chuỗi khép kín những hướng dẫn để thực hiện một chức năng.

+ +

Nói cách khác, thuật toán mô tả phương án để giải quyết một vấn đề và nhờ đó nó có thể được sử dụng lại mỗi khi cần, bởi con người hay thậm chí là máy móc. Các nhà khoa học máy tính so sánh hiệu quả của các thuật toán thông qua khái niệm "Độ phức tạp" hay mang cái tên khác là "Big O"

+ +

Lấy ví dụ:

+ + + +

Những thuật toán thông dụng là thuật toán tìm đường, ví dụ như the Traveling Salemen Problem, Tree Traversal Algorithms, v..v

+ +

Có cả những thuật toán chỉ dành riêng cho học máy, như là Linear Regression, Logistic Regression, Decision Tree, Random Forest, Support Vector Machine, Recurrent Neural Network (RNN), Long Short Term Memory (LSTM) Neural Network, Convolutional Neural Network (CNN), Deep Convolutional Neural Network v..v...

+ +

Learn more

+ +

General knowledge

+ + + +

Technical reference

+ + diff --git a/files/vi/glossary/array/index.html b/files/vi/glossary/array/index.html new file mode 100644 index 0000000000..d701cf9623 --- /dev/null +++ b/files/vi/glossary/array/index.html @@ -0,0 +1,22 @@ +--- +title: Array +slug: Tu-dien-thuat-ngu/array +translation_of: Glossary/array +--- +

Một array (mảng) là một tập hợp sắp xếp các dữ liệu {{Glossary("primitive")}} hoặc {{Glossary("object")}}. Dựa vào các vị trí của nó trong array, mỗi item (phần tử trong mảng) dữ liệu có một số index (chỉ mục, thứ tự vị trí của các phần tử, bắt đầu từ vị trí đầu tiên có giá trị là 0), thông qua index này mà bạn có thể truy cập tới các {{glossary("giá trị")}} ({{glossary("value")}}) chứa trong mảng. {{jsxref("array")}} cũng là các đối tượng, mà nó có thể được dùng bởi nhiều phương thức khác nhau. ({{jsxref("array")}}s are also objects that can be manipulated with various {{Glossary("Method", "methods")}}.)

+ +

Xem thêm

+ +

Hiểu biết chung

+ + + +

Tài liệu chuyên môn

+ + + +

 

diff --git a/files/vi/glossary/attribute/index.html b/files/vi/glossary/attribute/index.html new file mode 100644 index 0000000000..50079a0e56 --- /dev/null +++ b/files/vi/glossary/attribute/index.html @@ -0,0 +1,18 @@ +--- +title: Thuộc tính +slug: Tu-dien-thuat-ngu/Attribute +tags: + - HTML + - Từ điển thuật ngữ +translation_of: Glossary/Attribute +--- +

Một thuộc tính mở rộng một {{Glossary("thẻ")}}, thay đổi hành vi của thẻ đó hoặc cung cấp thông tin/dữ liệu về nó. Một thuộc tính luôn luôn có dạng name=value (tên của một thuộc tính được đặt theo các thuộc tính liên quan).

+ +

Tìm hiểu thêm

+ +

Technical reference

+ + diff --git a/files/vi/glossary/bandwidth/index.html b/files/vi/glossary/bandwidth/index.html new file mode 100644 index 0000000000..50bee3a7cd --- /dev/null +++ b/files/vi/glossary/bandwidth/index.html @@ -0,0 +1,23 @@ +--- +title: Bandwidth +slug: Tu-dien-thuat-ngu/Bandwidth +translation_of: Glossary/Bandwidth +--- +

 

+ +

Bandwidth là tổng số của bao nhiêu thông tin có thể truyền qua một sự kết nối dữ liệu theo một tổng thời gian đã đưa. Banwidth thường được tạo ra theo nhiều bit/giây (bit trên giây) (bit-per-second (bps)), ví dụ 1.000.000 bit trên giây (megabits-per-second (Mbps)) hoặc 1.000.000.000 bit trên giây (gigabits-per-second (Gbps))

+ +

Tự học thêm

+ +

 

+ + + +

 

+ + diff --git a/files/vi/glossary/boolean/index.html b/files/vi/glossary/boolean/index.html new file mode 100644 index 0000000000..9d227fa486 --- /dev/null +++ b/files/vi/glossary/boolean/index.html @@ -0,0 +1,53 @@ +--- +title: Boolean +slug: Tu-dien-thuat-ngu/Boolean +tags: + - Boolean + - JavaScript + - Loại dữ liệu + - Ngôn ngữ lập trình + - Thuật ngữ +translation_of: Glossary/Boolean +--- +

Trong khoa học máy tính, Boolean (phiên âm /bu-li-ờn/) là loại dữ liệu logic chỉ có giá trị true/đúng hoặc false/sai. Ví dụ, trong JavaScript, điều kiện Boolean thường sử dụng để quyết định đoạn mã nào được thực thi (như trong {{jsxref("Statements/if...else", "lệnh if")}}) hay lặp lại (trong {{jsxref("Statements/for", "vòng lặp for")}}).

+ +

Dưới đây là vài đoạn mã JavaScript giả (không hẳng là mã chạy được) để minh họa khái niệm này.

+ +
/* Lệnh if của JavaScript */
+if (điều kiện boolean) {
+   // Mã được thực thi nếu điều kiện là đúng
+}
+
+if (điều kiện boolean) {
+  console.log("điều kiện boolean resolved to true");
+} else {
+  console.log("boolean conditional resolved to false");
+}
+
+
+/* JavaScript for loop */
+for (biến điều khiển; điều kiện boolean; bộ đếm) {
+  // Mã được thực thi nếu điều kiện là đúng
+}
+
+for (var i=0; i < 4; i++) {
+  console.log("Tôi chỉ được in ra khi điều kiện boolean là đúng/true");
+}
+
+ +

Giá trị Boolean được đặt tên theo nhà toán học người Anh {{interwiki("wikipedia", "George Boole")}}, ông tổ ngành toán học logic. 

+ +

Tìm hiểu thêm

+ +

Kiến thức phổ thông

+ + + +

Tài liệu tham khảo kỹ thuật

+ + diff --git a/files/vi/glossary/browser/index.html b/files/vi/glossary/browser/index.html new file mode 100644 index 0000000000..147573222b --- /dev/null +++ b/files/vi/glossary/browser/index.html @@ -0,0 +1,27 @@ +--- +title: Trình Duyệt +slug: Tu-dien-thuat-ngu/trinh-duyet +tags: + - Thuật ngữ + - Từ điển +translation_of: Glossary/Browser +--- +

Trình duyệt Web hay trình duyệt là một chương trình có chức năng tải và hiển thị các trang {{Glossary("World Wide Web","Web")}}, và cho phép người dùng truy cập những trang web khác thông qua {{Glossary("hyperlink","hyperlinks")}}. Trình duyệt chính là những {{Glossary("user agent")}} phổ biến nhất.

+ +

Tìm hiểu thêm

+ +

Kiến thức chung

+ + + +

Tải về một trình duyệt

+ + diff --git a/files/vi/glossary/cache/index.html b/files/vi/glossary/cache/index.html new file mode 100644 index 0000000000..d496389bba --- /dev/null +++ b/files/vi/glossary/cache/index.html @@ -0,0 +1,17 @@ +--- +title: Cache +slug: Tu-dien-thuat-ngu/Cache +tags: + - HTTP + - Thuật ngữ +translation_of: Glossary/Cache +--- +

Cache (web cache hay HTTP cache, phiên âm /kát-sờ/) là một thành phần lưu trữ phản hồi HTTP tạm thời từ đó máy tính có thể sử dụng nó cho những yêu cầu HTTP tiếp theo miễn nó đạt được những điều kiện nhất định.

+ +

Tìm hiểu thêm

+ +

Kiến thức phổ thông

+ + diff --git a/files/vi/glossary/callback_function/index.html b/files/vi/glossary/callback_function/index.html new file mode 100644 index 0000000000..5aabc5fcc4 --- /dev/null +++ b/files/vi/glossary/callback_function/index.html @@ -0,0 +1,27 @@ +--- +title: Callback function +slug: Tu-dien-thuat-ngu/Callback_function +translation_of: Glossary/Callback_function +--- +

Hàm gọi lại là một hàm được truyền vào một hàm khác dưới dạng đối số, sau đó được gọi bên trong hàm bên ngoài để hoàn thành một số loại quy trình hoặc hành động.  Đây là một ví dụ nhanh:

+ +
function greeting(name) {
+  alert('Hello ' + name);
+}
+
+function processUserInput(callback) {
+  var name = prompt('Please enter your name.');
+  callback(name);
+}
+
+processUserInput(greeting);
+ +

Ví dụ trên là một lệnh gọi lại {{glossary ("sync")}}, vì nó được thực thi ngay lập tức.  Tuy nhiên, lưu ý rằng các lệnh gọi lại thường được sử dụng để tiếp tục thực thi mã sau khi hoạt động {{glossary ("asynchronous")}} hoàn thành - chúng được gọi là lệnh gọi lại không đồng bộ.  Một ví dụ điển hình là các hàm gọi lại được thực thi bên trong một khối .then () được xâu chuỗi vào cuối một lời hứa sau khi lời hứa đó hoàn thành hoặc bị từ chối.  Cấu trúc này được sử dụng trong nhiều API web hiện đại, chẳng hạn như fetch ().

+ +

Learn more

+ +

General knowledge

+ + diff --git a/files/vi/glossary/cdn/index.html b/files/vi/glossary/cdn/index.html new file mode 100644 index 0000000000..9f54fcb5b4 --- /dev/null +++ b/files/vi/glossary/cdn/index.html @@ -0,0 +1,17 @@ +--- +title: CDN +slug: Tu-dien-thuat-ngu/CDN +tags: + - Cơ sở hạ tầng + - Thuật ngữ +translation_of: Glossary/CDN +--- +

CDN (Mạng lưới Phân phối Nội dung / Content Delivery Network) là một nhóm các máy chủ phân bổ trên nhiều vị trí địa lý. Những máy chủ này chứa các bản sao dữ liệu để nó có thể cung cấp dữ liệu được yêu cầu dựa trên máy chủ gần nhất so với người-dùng-cuối tương ứng. Các CDN giúp cho dịch vụ tốc ít bị ảnh hưởng bởi lưu lượng cao.

+ +

Các CDN được dùng rộng rãi để phân stylesheets và tệp Javascript (tài sản tĩnh) của những thư viện như Bootstrap, jQuery, v.v... Người ta thường thích dùng CDN để tải những tập thư viện này vì vài lý do sau:

+ + diff --git a/files/vi/glossary/computer_programming/index.html b/files/vi/glossary/computer_programming/index.html new file mode 100644 index 0000000000..27c03c6afb --- /dev/null +++ b/files/vi/glossary/computer_programming/index.html @@ -0,0 +1,19 @@ +--- +title: Lập Trình Máy Tính +slug: Tu-dien-thuat-ngu/Computer_Programming +tags: + - Lập trình máy tính +translation_of: Glossary/Computer_Programming +--- +

Lập trình máy tính là một quá trình xây dựng và sắp xếp một bộ gồm các hướng dẫn. Những hướng dẫn này sẽ nói cho máy tính/ phần mềm biết nó phải làm gì bằng ngôn ngữ mà máy hiểu được. Hướng dẫn được viết bằng rất nhiều ngôn ngữ, như là C++, Java, JavaScript, HTML, Python, Ruby, and Rust.

+ +

Dùng những ngôn ngữ đã có, bạn có thể lập trình/tạo ra tất cả các loại phần mềm. Cho ví dụ, một chương trình có thể giúp các nhà khoa học xử lí những bài toán phức tạp, một bộ dữ liệu có thể chứa số lượng dữ liệu khổng lồ, một website cho phép người dùng tải nhạc, phim, hình ảnh, hay một phần mềm hoạt hình cho phép người dùng tạo ra những bộ hoạt hình ấn tượng.

+ +

Learn more

+ +

General knowledge

+ + diff --git a/files/vi/glossary/css/index.html b/files/vi/glossary/css/index.html new file mode 100644 index 0000000000..4c6d127406 --- /dev/null +++ b/files/vi/glossary/css/index.html @@ -0,0 +1,43 @@ +--- +title: CSS +slug: Tu-dien-thuat-ngu/CSS +translation_of: Glossary/CSS +--- +

CSS (Cascading Style Sheets) là một ngôn ngữ khai báo mà điều chỉnh trang web sẽ nhìn như thế nào trong {{glossary("trình duyệt")}}. Trình duyệt gắn kiểu khai báo trong CSS vào những elements dược chọn để hiển thị nó đúng chính xác. Một kiểu khai báo bao gồm những thuộc tính và giá trị của các elements, cái mà xác định trang web sẽ nhìn như thế nào.

+ +

CSS là một trong ba kỹ thhật chính của trang web, bên cạnh với {{Glossary("HTML")}} và {{Glossary("JavaScript")}}. CSS thường được dùng với {{Glossary("Element","HTML elements")}}, nhưng cũng dùng được với những ngôn ngữ đánh dấu khác như {{Glossary("SVG")}} hay {{Glossary("XML")}}.

+ +

Một diều lệ của CSS là một tập hợp {{Glossary("CSS Property","properties")}} kết hợp với {{Glossary("selector")}}. Đây là một ví dụ về việc biến tất cả the p trong HTML có chữ màu vàng và nền màu đen

+ +
/* The selector "p" indicate that all paragraphs in the document will be affected by that rule */
+p {
+  /* The "color" property defines the text color, in this case yellow. */
+  color: yellow;
+
+  /* The "background-color" property defines the background color, in this case black. */
+  background-color: black
+}
+ +

"Nối tầng" ám chỉ điều lệ để quản lý phần được chọn sẻ được ưa tiên để thay đổi bề ngoài của trang. Đây là một chức năng rất là quan trọng, kể từ khi một trang web phức tạp có thể có hàng ngàn điều lệ của CSS.

+ +

Học thêm

+ +

Hiểu biết chung

+ + + +

Technical reference

+ + + +

Learn about CSS

+ + diff --git a/files/vi/glossary/dynamic_programming_language/index.html b/files/vi/glossary/dynamic_programming_language/index.html new file mode 100644 index 0000000000..7babbc04e7 --- /dev/null +++ b/files/vi/glossary/dynamic_programming_language/index.html @@ -0,0 +1,20 @@ +--- +title: Ngôn ngữ lập trình động +slug: Tu-dien-thuat-ngu/Dynamic_programming_language +translation_of: Glossary/Dynamic_programming_language +--- +

Ngôn ngữ lập trình động là ngôn ngữ lập trình trong đó các thao tác được thực hiện tại thời gian biên dịch có thể được thực hiện trong thời gian chạy. Ví dụ: trong JavaScript, có thể thay đổi loại biến hoặc thêm các thuộc tính hoặc phương thức mới vào một đối tượng trong khi chương trình đang chạy.

+ +

Điều này trái ngược với cái gọi là ngôn ngữ lập trình tĩnh, trong đó những thay đổi như vậy thường không thể thực hiện được.

+ +
+

Lưu ý rằng mặc dù thực sự có một mối liên hệ giữa thuộc tính động/tĩnh này của ngôn ngữ lập trình và kiểu gõ động/tĩnh, hai từ này không đồng nghĩa với nhau.

+
+ +

Tìm hiểu thêm

+ +

Kiến thức chung

+ + diff --git a/files/vi/glossary/falsy/index.html b/files/vi/glossary/falsy/index.html new file mode 100644 index 0000000000..c71e9cc197 --- /dev/null +++ b/files/vi/glossary/falsy/index.html @@ -0,0 +1,32 @@ +--- +title: Falsy +slug: Tu-dien-thuat-ngu/Falsy +translation_of: Glossary/Falsy +--- +

Giá trị falsy là giá trị được hiểu là false trong ngữ cảnh {{Glossary("Boolean")}}.

+ +

{{Glossary("JavaScript")}} sử dụng {{Glossary("Type_Conversion", "Type Conversion")}} để ép kiểu giá trị bất kì thành Boolean khi cần thiết, ví dụ trong mệnh đề điều kiện ({{Glossary("Conditional", "conditionals")}}) và vòng lặp ({{Glossary("Loop", "loops")}}).

+ +

Ví dụ

+ +

Sau đây là ví dụ về các giá trị falsy (sẽ được hiểu là 'false' dẫn đến không thực hiện đoạn code của if ):

+ +
if (false)
+if (null)
+if (undefined)
+if (0)
+if (NaN)
+if ('')
+if ("")
+if (document.all) [1]
+ +

[1] document.all trước đây được sử dụng trong việc nhận biết trình duyệt và tài liệu HTML specification defines a willful violation của chuẩn ECMAScript này để tương thích với code cũ (if (document.all) { // Internet Explorer code here } hoặc sử dụng document.all mà không kiểm tra trước về sự tồn tại của nó: document.all.foo).

+ +

Đôi khi từ này được viết là falsey.

+ +

Tìm hiểu thêm

+ + diff --git a/files/vi/glossary/general_header/index.html b/files/vi/glossary/general_header/index.html new file mode 100644 index 0000000000..e6ac4493a9 --- /dev/null +++ b/files/vi/glossary/general_header/index.html @@ -0,0 +1,10 @@ +--- +title: General header +slug: Tu-dien-thuat-ngu/General_header +tags: + - C++ +translation_of: Glossary/General_header +--- +

A general header is an {{glossary('Header', 'HTTP header')}} that can be used in both request and response messages but doesn't apply to the content itself. Depending on the context they are used in, general headers are either {{glossary("Response header", "response")}} or {{glossary("request header", "request headers")}}. However, they are not {{glossary("entity header", "entity headers")}}.

+ +

The most common general headers are {{HTTPHeader('Date')}}, {{HTTPheader("Cache-Control")}} or {{HTTPHeader("Connection")}}.

diff --git a/files/vi/glossary/head/index.html b/files/vi/glossary/head/index.html new file mode 100644 index 0000000000..c53ed73844 --- /dev/null +++ b/files/vi/glossary/head/index.html @@ -0,0 +1,15 @@ +--- +title: Head +slug: Tu-dien-thuat-ngu/Head +translation_of: Glossary/Head +--- +

Head là một phần của một  văn bản {{glossary("HTML")}} chứa {{glossary("metadata")}} về văn bản đó, như tác giả, mô tả, và liên kết đến các tập tin {{glossary("CSS")}} hay {{glossary("JavaScript")}} được áp dụng vào văn bản HTML.

+ +

Tìm hiểu thêm

+ +

HTML head

+ + diff --git a/files/vi/glossary/hoisting/index.html b/files/vi/glossary/hoisting/index.html new file mode 100644 index 0000000000..b12a7f94cc --- /dev/null +++ b/files/vi/glossary/hoisting/index.html @@ -0,0 +1,71 @@ +--- +title: Hoisting +slug: Tu-dien-thuat-ngu/Hoisting +tags: + - JavaScript +translation_of: Glossary/Hoisting +--- +

Hoisting là một thuật ngữ mà bạn sẽ không tìm thấy cách sử dụng trong bất cứ văn bản đặc tả quy chuẩn nào trước ECMAScript® 2015 Language Specification. Hoisting được nghĩ đến như một cách chung trong việc thực thi các ngữ cảnh (đặc biệt là giai đoạn tạo và thực thi) làm việc như thế nào trong JavaScript. Nhưng, hoisting có thể dẫn đến nhiều sự hiểu lầm. Ví dụ, hoisting dạy rằng định nghĩa biến và hàm được chuyển tới đầu đoạn mã của bạn, nhưng đây không hẳn là tất cả những gì xảy ra. Chuyện gì xảy ra khi các định nghĩa biến và hàm đó được lưu vào bộ nhớ trong suốt giai đoạn biên dịch, nhưng ở chính xác nơi bạn đã gõ nó trong đoạn mã của bạn?

+ +

Tìm hiểu thêm

+ +

Ví dụ kỹ thuật

+ +

Một trong những lợi ích của việc đặt định nghĩa hàm JavaScript vào bộ nhớ trước khi nó thực thi bất cứ đoạn mã nào thì nó cho phép bạn sử dụng một hàm trước khi bạn định nghĩa nó trọng code của bạn. Ví dụ:

+ +
function catName(name) {
+  console.log("My cat's name is " + name);
+}
+
+catName("Tigger");
+/*
+The result of the code above is: "My cat's name is Tigger"
+*/
+
+ +

Đoạn code ở trên là cách bạn mong muốn khi viết mã để nó hoạt động. Bây giờ, hãy xem điều gì xả ra khi chúng ta gọi hàm trước khi chúng ta viết nó:

+ +
catName("Chloe");
+
+function catName(name) {
+  console.log("My cat's name is " + name);
+}
+/*
+The result of the code above is: "My cat's name is Chloe"
+*/
+
+ +

Thậm chí chúng ta gọi hàm trong mã của chúng ta đầu tiên, trước khi hàm được viết thì mã vẫn hoạt động. Đây là vì cách mà thực thi ngữ cảnh hoạt động trong JavaScript. 

+ +

Hoisting hoạt động tốt với những kiểu dữ liệu khác và các biến. các biến có thể được khởi tạo và được sử dụng trước khi định nghĩa. nhưng chúng có thể không được sử dụng mà không kèm khởi tạo.

+ +

Ví dụ kỹ thuật

+ +
num = 6;
+num + 7;
+var num;
+/* gives no errors as long as num is declared*/
+
+
+ +

JavaScript chỉ đưa các định nghĩa chứ không phải các khởi tạo. Nếu bạn đang sử dụng một biến mà được định nghĩa và khởi tạo sau khi sử dụng, giá trị sẽ là undefined. Hai ví dụ dưới đây mô tả cùng hành vi.

+ +
var x = 1; // Initialize x
+console.log(x + " " + y); // '1 undefined'
+var y = 2; // Initialize y
+
+
+// The following code will behave the same as the previous code:
+var x = 1; // Initialize x
+var y; // Declare y
+console.log(x + " " + y); // '1 undefined'
+y = 2; // Initialize y
+
+ +

Tham khảo kỹ thuật

+ + diff --git a/files/vi/glossary/html/index.html b/files/vi/glossary/html/index.html new file mode 100644 index 0000000000..68a5ba4c81 --- /dev/null +++ b/files/vi/glossary/html/index.html @@ -0,0 +1,44 @@ +--- +title: HTML +slug: Tu-dien-thuat-ngu/HTML +translation_of: Glossary/HTML +--- +

HTML (Ngôn ngữ đánh dấu siêu văn bản), là một ngôn ngữ mang tính miêu tả chỉ dành riêng cho cấu trúc trang web.

+ +

LƯỢC SỬ 

+ +

Vào năm 1990, như một phần của công trình thiết kế web {{glossary("World Wide Web","Web")}}, Tim Berners-Lee tạo ra định nghĩa  {{glossary("hypertext")}}, thứ mà đã được Berners-Lee chính thức công nhận vào năm tiếp theo thông qua markup được dựa phần lớn vào{{glossary("SGML")}}. The {{glossary("IETF")}} began formally specifying HTML in 1993, and after several drafts released version 2.0 in 1995. In 1994 Berners-Lee founded the {{glossary("W3C")}} to develop the Web. In 1996, the W3C took over the HTML work and published the HTML 3.2 recommendation a year later. HTML 4.0 was released in 1999 and became an {{glossary("ISO")}} standard in 2000.

+ +

At that time, the W3C nearly abandoned HTML in favor of {{glossary("XHTML")}}, prompting the founding of an independent group called {{glossary("WHATWG")}} in 2004. Thanks to WHATWG, work on {{glossary("HTML5")}} continued: the two organizations released the first draft in 2008 and the final standard in 2014.

+ +

Concept and syntax

+ +

An HTML document is a plaintext document structured with {{glossary("element","elements")}}. Elements are surrounded by matching opening and closing {{Glossary("tag","tags")}}. Each tag begins and ends with angle brackets (<>). There are a few empty or void tags that cannot enclose any text, for instance {{htmlelement("img")}}.

+ +

You can extend HTML tags with {{Glossary("attribute","attributes")}}, which provide additional information affecting how the browser interprets the element:

+ +

Detail of the structure of an HTML element

+ +

An HTML file is normally saved with an .htm or .html extension, served by a {{Glossary("Server","web server")}}, and can be rendered by any {{Glossary("Browser","Web browser")}}.

+ +

Learn more

+ +

General knowledge

+ + + +

Learning HTML

+ + + +

Technical reference

+ + diff --git a/files/vi/glossary/identifier/index.html b/files/vi/glossary/identifier/index.html new file mode 100644 index 0000000000..36b044a73c --- /dev/null +++ b/files/vi/glossary/identifier/index.html @@ -0,0 +1,18 @@ +--- +title: Identifier +slug: Tu-dien-thuat-ngu/Identifier +translation_of: Glossary/Identifier +--- +

Định danh là chuỗi ký tự trong mã nguồn để xác định {{glossary("variable")}}, {{glossary("function")}}, hoặc {{glossary("property")}}.

+ +

Trong {{glossary("JavaScript")}}, các định danh đều phân biệt hoa thường (case-sensitive) và có thể chứa ký tự {{glossary("Unicode")}}, $, _, và ký tự số (0-9), nhưng không bắt đầu bằng ký tự số.

+ +

Định danh khác với chuỗi ký tự ở chỗ: chuỗi ký tự là dữ liệu, còn định danh là một phần của mã nguồn. Trong JavaScript, không có cách nào để chuyển đổi định danh thành chuỗi ký tự, nhưng đôi khi có thể truyền chuỗi ký tự vào định danh.

+ +

Xem thêm

+ +

Kiến thức chung

+ + diff --git a/files/vi/glossary/index.html b/files/vi/glossary/index.html new file mode 100644 index 0000000000..053ad9b274 --- /dev/null +++ b/files/vi/glossary/index.html @@ -0,0 +1,30 @@ +--- +title: Từ điển thuật ngữ +slug: Tu-dien-thuat-ngu +tags: + - Index + - Người mới + - Từ điển +translation_of: Glossary +--- +
{{LearnBox({"title":"Có thể bạn chưa biết"})}}
+ +

Công nghệ  Web có rất là nhiều những thuật ngữ (jargon) và những từ viết tắt (abbreviations), nó thường được sử dụng trong các văn bản và cả trong code. Từ điển này cung cấp cho bạn các định nghĩa của các từ ngữ thuật ngữ và cả các chữ viết tắt mà bạn cần biết để hiểu về web và cũng để xây dựng thành công một trang web.

+ +
Đóng góp định nghĩa cho một thuật ngữ mới + +
+
+ +

{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}

+ +

Góp phần giải thích các thuật ngữ

+ +

Trang từ điển này là một công việc không bao giờ có thể hoàn thiện.Vì vậy bạn cũng có thể góp phần cải thiện nó bằng cách viết một thuật ngữ mới hoặc chỉnh sửa các thuật ngữ đã có chính xác hơn. Cách dễ nhất là nhấn vào nút dưới đây hoặc chọn 1 trong những thuật ngữ cần định nghĩa nằm ở phía dưới nút đó.

+ +
Đóng góp định nghĩa cho một thuật ngữ mới + +

{{GlossaryList({"terms":["TTL"], "filter":"notdefined", "css":"multiColumnList"})}}

+ +

Nếu bạn muốn biết thêm về cách để góp phần giải thích các thuật ngữ, nhấp vào liên kết sau: the glossary documentation status page.

+
diff --git a/files/vi/glossary/jquery/index.html b/files/vi/glossary/jquery/index.html new file mode 100644 index 0000000000..1477abfb66 --- /dev/null +++ b/files/vi/glossary/jquery/index.html @@ -0,0 +1,42 @@ +--- +title: jQuery +slug: Tu-dien-thuat-ngu/jQuery +translation_of: Glossary/jQuery +--- +

jQuery là một {{Glossary("JavaScript")}} {{Glossary("Library")}} tập trung vào việc đơn giản hóa thao tác vơi {{Glossary("DOM")}}, gọi {{Glossary("AJAX")}}, và điều khiển {{Glossary("Event")}}.

+ +

jQuery sử dụng định dạng, $(selector).action() để gán một phần tử cho một sự kiện. Để giải thích chi tiết hơn, $(selector) sẽ gọi jQuery để chọn phần tử selector , và gán nó cho một sự kiện {{Glossary("API")}} gọi là .action().

+ +
$(document).ready(function(){
+  alert("Hello World!");
+  $("#blackBox").hide();
+});
+ +

Đoạn mã trên thực hiện chức năng tương tự như đoạn mã sau:

+ +
window.onload = function() {
+  alert("Hello World!");
+  document.getElementById("blackBox").style.display = "none";
+};
+ +

Hoặc:

+ +
window.addEventListener("load", () => {
+  alert("Hello World!");
+  document.getElementById("blackBox").style.display = "none";
+});
+ +

Tìm hiểu thêm

+ +

Kiến thức chung

+ + + +

Thông tin kĩ thuật

+ + diff --git a/files/vi/glossary/json/index.html b/files/vi/glossary/json/index.html new file mode 100644 index 0000000000..8158b09c63 --- /dev/null +++ b/files/vi/glossary/json/index.html @@ -0,0 +1,26 @@ +--- +title: JSON +slug: Tu-dien-thuat-ngu/JSON +translation_of: Glossary/JSON +--- +

JavaScript Object Notation (JSON) là một data-interchange format. Mặc dù không phải là một strict subset, JSON lại rất giống với một subset theo cú pháp của {{Glossary("JavaScript")}}.

+ +

Though many programming languages support JSON, JSON is especially useful for JavaScript-based apps, including websites and browser extensions.

+ +

JSON can represent numbers, booleans, strings, null, arrays (ordered sequences of values), and objects (string-value mappings) made up of these values (or of other arrays and objects).  JSON does not natively represent more complex data types like functions, regular expressions, dates, and so on.  (Date objects by default serialize to a string containing the date in ISO format, so the information isn't completely lost.) If you need JSON to represent additional data types, transform values as they are serialized or before they are deserialized.

+ +

Much like XML, JSON has the ability to store hierarchical data unlike the more traditional CSV format.  Many tools provide translation between these formats such as this online JSON to CSV Converter or this alternative JSON to CSV Converter.

+ +

Learn more

+ +

General knowledge

+ + + +

Technical reference

+ + diff --git a/files/vi/glossary/metadata/index.html b/files/vi/glossary/metadata/index.html new file mode 100644 index 0000000000..ff72a21192 --- /dev/null +++ b/files/vi/glossary/metadata/index.html @@ -0,0 +1,20 @@ +--- +title: Metadata +slug: Tu-dien-thuat-ngu/Metadata +translation_of: Glossary/Metadata +--- +

Metadata (Siêu dữ liệu) là — in its very simplest definition — dữ liệu mô tả dữ liệu. Chẳng hạn, tài liệu {{glossary("HTML")}} là dữ liệu, nhưng HTML có thể chứa metadata trong phần tử {{htmlelement("head")}} để mô tả tài liệu đó — như là ai viết nó, và tóm lược trang web.

+ +

Tìm hiểu thêm

+ +

Kiến thức chung

+ + + +

HTML metadata

+ + diff --git a/files/vi/glossary/null/index.html b/files/vi/glossary/null/index.html new file mode 100644 index 0000000000..4baec6b2e6 --- /dev/null +++ b/files/vi/glossary/null/index.html @@ -0,0 +1,23 @@ +--- +title: 'Null' +slug: Tu-dien-thuat-ngu/Null +translation_of: Glossary/Null +--- +

Trong khoa học máy tính, giá trị null đại điện cho một tham chiếu trỏ tới, thường là cố tình, {{glossary("object")}} hoặc địa chỉ không tồn tại hoặc không hợp lệ. Ý nghĩa của null tuỳ theo từng ngôn ngữ.

+ +

Trong {{Glossary("JavaScript")}}, null là một trong các {{Glossary("Primitive", "giá trị sơ khai")}}.

+ +

Tham khảo thêm

+ +

Hiểu biết chung

+ + + +

Tham khảo kỹ thuật

+ + diff --git a/files/vi/glossary/operand/index.html b/files/vi/glossary/operand/index.html new file mode 100644 index 0000000000..407d9c03d0 --- /dev/null +++ b/files/vi/glossary/operand/index.html @@ -0,0 +1,12 @@ +--- +title: Toán hạng +slug: Tu-dien-thuat-ngu/Operand +translation_of: Glossary/Operand +--- +

Toán hạng là một phần trong câu lệnh biểu diễn thao tác dữ liệu bởi {{glossary("operator")}}. Chẳng hạn, khi bạn cộng hai số, hai số đó là toán hạng và "+" là toán tử.

+ +

Đọc thêm

+ + diff --git a/files/vi/glossary/php/index.html b/files/vi/glossary/php/index.html new file mode 100644 index 0000000000..f75d0f07e7 --- /dev/null +++ b/files/vi/glossary/php/index.html @@ -0,0 +1,54 @@ +--- +title: PHP +slug: Tu-dien-thuat-ngu/PHP +translation_of: Glossary/PHP +--- +

PHP (a recursive initialism for PHP: Hypertext Preprocessor) is an open-source server-side scripting language that can be embedded into HTML to build web applications and dynamic websites.

+ +

Examples

+ +

Basic syntax

+ +
  // start of PHP code
+<?php
+     // PHP code goes here
+ ?>
+// end of PHP code
+ +

Printing data on screen

+ +
<?php
+   echo "Hello World!";
+?>
+ +

PHP variables

+ +
​​​​​​​<?php
+ // variables
+ $nome='Danilo';
+ $sobrenome='Santos';
+ $pais='Brasil';
+ $email='danilocarsan@gmailcom';
+​​​​​​​
+ // printing the variables
+ echo $nome;
+ echo $sobrenome;
+ echo $pais;
+ echo $email;
+?>
+ + diff --git a/files/vi/glossary/primitive/index.html b/files/vi/glossary/primitive/index.html new file mode 100644 index 0000000000..b65302eab7 --- /dev/null +++ b/files/vi/glossary/primitive/index.html @@ -0,0 +1,121 @@ +--- +title: Primitive +slug: Tu-dien-thuat-ngu/Primitive +translation_of: Glossary/Primitive +--- +

Trong {{Glossary("JavaScript")}}, một bản nguyên (giá trị nguyên thủy, giá trị sơ khai, kiểu dữ liệu sơ khai) là dữ liệu mà dữ liệu này không phải {{Glossary("object")}} và không có {{glossary("method","phương thức")}}. Có 7 kiểu dữ liệu bản nguyên: {{Glossary("string")}}, {{Glossary("number")}}, {{Glossary("bigint")}}, {{Glossary("boolean")}}, {{Glossary("null")}}, {{Glossary("undefined")}}, {{Glossary("symbol")}} (mới thêm vào trong {{Glossary("ECMAScript")}} 2015).

+ +

Most of the time, a primitive value is represented directly at the lowest level of the language implementation.

+ +

Tất cả bản nguyên đều là bất biến, tức là chúng không thể bị thay đổi. Đừng để bối rối giữa một bản nguyên với một biến được gán giá trị bản nguyên. Biến đó có thể được gán lại giá trị mới, nhưng giá trị đang tồn tại không thể bị thay đổi theo cái cách mà object, mảng và hàm có thể bị thay đổi.

+ +

Ví dụ

+ +

Ví dụ này sẽ giúp bạn hiểu rõ thực tế là các giá trị bản nguyên không thể bị thay đổi.

+ +

JavaScript

+ +
 // Sử dụng phương thức chuỗi không làm biến đổi chuỗi
+ var bar = "baz";
+ console.log(bar);               // baz
+ bar.toUpperCase();
+ console.log(bar);               // baz
+
+ // Sử dụng một phương thức mảng để làm biến đổi mảng
+ var foo = [];
+ console.log(foo);               // []
+ foo.push("plugh");
+ console.log(foo);               // ["plugh"]
+
+ // Câu lệnh gán đã cho bản nguyên một giá trị mới (đây là giá trị mới chứ không phải biến đổi giá trị cũ)
+ bar = bar.toUpperCase();       // BAZ
+
+ +

Một bản nguyên có thể bị thay thế, nhưng không thể biến đổi nó trực tiếp.

+ +

Ví dụ khác [ Từng-bước ]

+ +

Ví dụ sau đây sẽ cho bạn thấy cách JavaScript làm việc với các bản nguyên.

+ +

JavaScript

+ +
// Xác định bản nguyên
+let foo = 5;
+
+// Định nghĩa hàm để thay đổi giá trị bản nguyên
+function addTwo(num) {
+   num += 2;
+}
+// Một hàm khác cố gắng làm điều tương tự
+function addTwo_v2(foo) {
+   foo += 2;
+}
+
+// Gọi hàm thứ nhất và truyền bản nguyên của chúng ta vào như là một đối số
+addTwo(foo);
+// Nhận về giá trị bản nguyên hiện tại
+console.log(foo);   // 5
+
+// Cố gắng một lần nữa với hàm thứ hai của chúng ta...
+addTwo_v2(foo);
+console.log(foo);   // 5
+
+ +

Bạn có đang nghĩ rằng đó phải là 7 chứ không phải 5 không? Nếu có, dưới đây là cách đoạn mã hoạt động:

+ + + +

Đó là lý do tại sao các Bản nguyên là bất biến - thay vì làm việc trực tiếp với chúng, chúng ta làm việc với bản sao, không làm ảnh hưởng bản gốc.

+ +

Các object bọc bản nguyên trong JavaScript

+ +

Ngoại trừ null và undefined, mọi giá trị bản nguyên đều có các object tương đương mà các object này sẽ bao bọc xung quanh các giá trị bản nguyên:

+ + + +

Phương thức valueOf() của màng bọc sẽ trả về giá trị bản nguyên.

+ +

Tham khảo thêm

+ +

Hiểu biết chung

+ + + + diff --git a/files/vi/glossary/responsive_web_design/index.html b/files/vi/glossary/responsive_web_design/index.html new file mode 100644 index 0000000000..ba3cae0d1c --- /dev/null +++ b/files/vi/glossary/responsive_web_design/index.html @@ -0,0 +1,20 @@ +--- +title: Responsive web design +slug: Tu-dien-thuat-ngu/Responsive_web_design +tags: + - Khả năng tiếp cận + - Thiết kế + - Thuật ngữ +translation_of: Glossary/Responsive_web_design +--- +

Responsive Web Design (RWD) (Thiết kế web linh hoạt) là khái niệm trong lập trình Web hướng tới tạo ra website có vẻ ngoài và cơ chế vận hành tối ưu trên tất cả thiết bị tính toán cá nhân, từ desktop (cố định) tới mobile (di động).

+ +

Đọc thêm

+ +

Hiểu biết chung

+ + diff --git a/files/vi/glossary/svg/index.html b/files/vi/glossary/svg/index.html new file mode 100644 index 0000000000..d73e8f0d9d --- /dev/null +++ b/files/vi/glossary/svg/index.html @@ -0,0 +1,33 @@ +--- +title: SVG +slug: Tu-dien-thuat-ngu/SVG +translation_of: Glossary/SVG +--- +

Scalable Vector Graphics (SVG) là một định dạng hình ảnh véc tơ 2D dựa trên cú pháp của {{Glossary("XML")}}.

+ +

{{Glossary("W3C")}} bắt đầu sử dụng SVG từ cuối thập niên 90, nhưng SVG chỉ trở nên nổi tiếng từ khi {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 9 ra mắt kèm theo hỗ trợ SVG. Tất cả các {{Glossary("browser","trình duyệt")}} lớn hiện giờ đều hỗ trợ SVG.

+ +

Dựa theo cú pháp của {{Glossary("XML")}}, SVG có thể được style bằng {{Glossary("CSS")}} và tạo ra các tương tác qua {{Glossary("JavaScript")}}. HTML5 giờ cho phép nhúng trực tiếp {{Glossary("Tag","thẻ")}} SVG vào tập tin {{Glossary("HTML")}}.

+ +

Là một định dạng hình ảnh véc tơ, SVG có thể co dãn đến vô cùng, khiến cho nó trở nên vô giá đối với {{Glossary("responsive design")}} (thiết kế đáp ứng), bởi bạn có thể tạo ra giao diện và đồ hoạ co dãn trên mọi màn hình. SVG còn cung cấp một bộ công cụ hữu ích, như là clipping, masking, filters, và animations.

+ +

Tìm hiểu thêm

+ +

Kiến thức chung

+ + + +

Học SVG

+ + + +

Thông tin kỹ thuật

+ + diff --git a/files/vi/glossary/truthy/index.html b/files/vi/glossary/truthy/index.html new file mode 100644 index 0000000000..e9b5b23291 --- /dev/null +++ b/files/vi/glossary/truthy/index.html @@ -0,0 +1,33 @@ +--- +title: Truthy +slug: Tu-dien-thuat-ngu/Truthy +translation_of: Glossary/Truthy +--- +

Trong {{Glossary("JavaScript")}}, truthy là giá trị được hiểu là true trong ngữ cảnh {{Glossary("Boolean")}}. Tất cả mọi giá trị đều là truthy, trừ phi chúng được định nghĩa là {{Glossary("Falsy", "falsy")}} (tức là, ngoại trừ false, 0, "", null, undefined, và NaN).

+ +

{{Glossary("JavaScript")}} dùng {{Glossary("Type_Conversion", "ép kiểu")}} trong ngữ cảnh Boolean.

+ +

Ví dụ về giá trị truthy trong JavaScript (sẽ được ép kiểu thành true trong ngữ cảnh Boolean, và đương nhiên thực hiện mã nguồn trong khối if):

+ +
if (true)
+if ({})
+if ([])
+if (42)
+if ("foo")
+if (new Date())
+if (-42)
+if (3.14)
+if (-3.14)
+if (Infinity)
+if (-Infinity)
+
+ +

Xem thêm

+ + + +
{{QuickLinksWithSubpages("/en-US/docs/Glossary")}}
diff --git a/files/vi/glossary/type_conversion/index.html b/files/vi/glossary/type_conversion/index.html new file mode 100644 index 0000000000..c3d2ca07c9 --- /dev/null +++ b/files/vi/glossary/type_conversion/index.html @@ -0,0 +1,14 @@ +--- +title: Type Conversion +slug: Tu-dien-thuat-ngu/Type_Conversion +translation_of: Glossary/Type_Conversion +--- +

Chuyển đổi kiểu (hay ép kiểu) tức là truyền dữ liệu từ kiểu dữ liệu này sang kiểu dữ liệu khác. Chuyển kiểu ngầm xảy ra khi bộ biên dịch tự động gán kiểu dữ liệu, song mã nguồn vẫn có thể thực hiện chuyển kiểu theo cách tường minh. Chẳng hạn, đoạn lệnh 5+2.0, số thực dấu phẩy động 2.0 được ép kiểu ngầm sang số nguyên, nhưng với lệnh Number("0x11"), xâu ký tự "0x11" được ép kiểu tường minh sang số 17.

+ +

Tìm hiểu thêm

+ +

Hiểu biết chung

+ + diff --git a/files/vi/glossary/undefined/index.html b/files/vi/glossary/undefined/index.html new file mode 100644 index 0000000000..6cad2c4b1b --- /dev/null +++ b/files/vi/glossary/undefined/index.html @@ -0,0 +1,27 @@ +--- +title: undefined +slug: Tu-dien-thuat-ngu/undefined +translation_of: Glossary/undefined +--- +

undefined là một giá trị nguyên thủy được gán tự động cho các biến vừa được khai báo hoặc cho các đối số chính thức không có đối số thực tế.

+ +

Example

+ +
var x; // tạo một biến nhưng không gán giá trị
+
+console.log("x's value is", x) //logs "x's value is undefined"
+
+ +

Tìm hiểu thêm

+ +

Kiến thức phổ thông

+ + + +

Technical reference

+ + diff --git a/files/vi/glossary/xml/index.html b/files/vi/glossary/xml/index.html new file mode 100644 index 0000000000..f76d106d37 --- /dev/null +++ b/files/vi/glossary/xml/index.html @@ -0,0 +1,14 @@ +--- +title: XML +slug: Tu-dien-thuat-ngu/XML +translation_of: Glossary/XML +--- +

eXtensible Markup Language (XML) là ngôn ngữ đánh dấu chung được W3C đặc tả. Ngành Công nghệ thông tin (IT) sử dụng nhiều ngôn ngữ dựa trên XML như là ngôn ngữ mô tả dữ liệu.

+ +

Các thẻ XML tương tự như các thẻ HTML, nhưng XML linh hoạt hơn nhiều bởi nó cho phép người dùng tự định nghĩa các thẻ riêng của họ. Theo cách này, XML hoạt động như một ngôn ngữ meta, nó có thể dùng để định nghĩa các ngôn ngữ khác, chẳng hạn như {{Glossary("RSS")}}. Ngoài ra, HTML là ngôn ngữ trình bày, trong khi XML là ngôn ngữ mô tả dữ liệu. Điều này có nghĩa là XML có phạm vi hoạt động rộng hơn thay vì chỉ ở trên Web. Ví dụ, dịch vụ Web có thể dùng XML để trao đổi request (yêu cầu) và response (phản hồi).

+ +

Tìm đọc thêm

+ + diff --git a/files/vi/labs-tab/index.html b/files/vi/labs-tab/index.html deleted file mode 100644 index 6cedf8e2d3..0000000000 --- a/files/vi/labs-tab/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Labs-tab -slug: Labs-tab ---- -

Quan tâm đến việc định hình tương lai của Web?

Mozilla Labs là một phòng thí nghiệm ảo, nơi bạn có thể tham gia với chúng tôi để tạo ra, thử nghiệm, xây dựng và
sử dụng những cải tiến và công nghệ Web mới. Đóng góp của cộng đồng chúng tôi có sự đa dạng về nguồn gốc, nhưng chia sẻ tất cả các lợi ích chung trong việc trải nghiệm Web.

Để bắt đầu, hãy tìm hiểu về các dự án của chúng tôi và sau đó góp phần vào dự án bằng cách tham gia những thảo luận với chúng tôi, thử nghiệm những thiết kế mới, khai thác mã nguồn hoặc gửi phản hồi về sản phẩm.

-



Theo dõi những thông tin mới nhất về các dự án của chúng tôi trên Twitter tại @mozlabs.

diff --git a/files/vi/learn/common_questions/how_does_the_internet_work/index.html b/files/vi/learn/common_questions/how_does_the_internet_work/index.html new file mode 100644 index 0000000000..fb9abacd43 --- /dev/null +++ b/files/vi/learn/common_questions/how_does_the_internet_work/index.html @@ -0,0 +1,97 @@ +--- +title: Internet làm việc như thế nào? +slug: Learn/Common_questions/Internet_lam_viec_nh_the_nao +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +
{{LearnSidebar}}
+ +
+

Bài viết này giải thích Internet là gì và cách nó làm việc.

+
+ + + + + + + + + + + + +
Điều kiện tiên quyết:Không yêu cầu, nhưng chúng tôi khuyên bạn trước tiên nên đọc Bài viết nói về thiết lập các mục tiêu cho dự án.
Mục tiêu:Bạn sẽ học những khái niệm cơ bản về cơ sở hạ tầng của Web và sự khác giữa Internet với Web.
+ +

Tóm tắt

+ +

Internet là xương sống của Web, là cơ sở hạ tầng kỹ thuật làm cho Web tồn tại. Nói theo nghĩa cơ bản nhất, Internet là một mạng rất lớn bao gồm các máy tính có thể giao tiếp với nhau.

+ +

Lịch sử của Internet là một cái gì đó đen tối. Nó được bắt đầu từ những năm 1960 như một dự án nghiên cứu được tài trợ bởi quân đội Mỹ, sau đó đến những năm 1980, nó phát triển thành một hệ thống cơ sở hạ tầng công cộng với sự hỗ trợ của nhiều trường đại học công lập và các công ty tư nhân. Những kỹ thuật khác nhau đã giúp Internet tiến hóa vượt thời gian, nhưng cách nó làm việc thì vẫn không thay đổi nhiều: Internet là con đường để tất cả máy tính kết nối lại với nhau, và dù cho có chuyện gì xảy ra, các máy tính vẫn tìm thấy con đường khác để tiếp tục nối kết.

+ +

Học tập tích cực

+ + + +

Lặn sâu hơn

+ +

Một mạng đơn giản

+ +

Khi hai máy tính cần giao tiếp (liên lạc) với nhau, bạn sẽ phải liên kết chúng lại, hoặc bằng hình thức vật lý (thường dùng với một dây Cáp Ethernet - Ethernet cable) hoặc không dây (ví dụ như hệ thống WiFi hoặc Bluetooth). Những máy tính hiện đại ngày nay có thể chấp nhận tất cả kết nối trên.

+ +
+

Chú ý: Phần còn lại của bài viết này, chúng ta sẽ chỉ nói về hình thức kết nối dùng cáp vật lý, còn đối với các mạng không dây thì cách làm việc cũng tương tự.

+
+ +

Two computers linked together

+ +

Bởi vì một mạng sẽ không bị giới hạn bởi hai máy tính. Nên bạn có thể kết nối bao nhiêu máy tính tùy ý. Nhưng khi đó sẽ nhanh chóng phát sinh rắc rối. Nếu bạn thử kết nối 10 máy tính, giả sử vậy, thì bạn sẽ cần 45 sợi cáp, và 9 phích cắm trên mỗi máy tính!

+ +

Ten computers all together

+ +

Để giải quyết vấn đề này, mỗi máy tính trong mạng sẽ được kết nối vào một máy tính tí hon được gọi là bộ định tuyến - router. Bộ định tuyến sẽ làm công việc giống như người ra hiệu ở trạm xe lửa, nó đảm bảo rằng một thông điệp được gửi từ máy tính này sẽ đến đúng máy tính cần nhận. Giả sử để gửi một thông điệp đến máy B, máy A phải gửi thông điệp đó đến bộ định tuyến, rồi bộ định tuyến sẽ tiếp tục chuyển nó đến máy B và đồng thời đảm bảo chắc chắn thông điệp đó không bị gửi vào máy C.

+ +

Khi chúng ta thêm một bộ định tuyến vào hệ thống, mạng 10 máy tính sẽ chỉ cần 10 sợi dây cáp: vì mỗi máy tính chỉ cần một phích cắm và bộ định tuyến sẽ có 10 phích cắm.

+ +

Ten computers with a router

+ +

Mạng của các mạng

+ +

Vậy là mọi thứ đều ổn. Nhưng còn việc kết nối hàng trăm, hàng ngàn, hàng tỉ máy tính lại với nhau thì sao? Dĩ nhiên là một bộ định tuyến đơn lẻ sẽ không thể gánh vác được số lượng đó, nhưng mà, nếu bạn đọc phần trên một cách cẩn thận, sẽ thấy chúng tôi có nói bộ định tuyến cũng chính là một máy tính giống như các máy tính khác. Thế thì có điều gì cản trở việc kết nối trực tiếp hai bộ định tuyến với nhau không? Không, vậy thì chúng ta cứ kết nối chúng thôi.

+ +

Two routers linked together

+ +

Bằng việc kết nối các máy tính vào bộ định tuyến, rồi lại kết nối các bộ định tuyến với nhau, chúng ta có thể tạo ra một mạng vô tận.

+ +

Routers linked to routers

+ +

 

+ +

Một mạng như thế tiến rất gần đến thứ mà ta gọi là Internet, nhưng chúng ta đã bỏ sót vài thứ. Chúng ta xây dựng mạng máy tính đó cho mục đích riêng của mình. Còn có rất nhiều mạng máy tính khác ở ngoài kia: của những người bạn, của hàng xóm, và bất kỳ ai khác. Nhưng mà không thể nào thiết lập hàng đống đường dây cáp để kết nối nhà bạn với phần còn lại của thế giới, thế thì bạn sẽ xử lý vấn đề này như thế nào? May thay là đã có sẵn những đường dây cáp liên kết đến nhà bạn, ví dụ như, cáp điện và điện thoại. Cơ sở hạ tầng điện thoại đã kết nối nhà bạn đến với mọi người trên thế giới, thế nên nó là đường dây hoàn hảo mà chúng ta cần. Để kết nối mạng máy tính của bạn đến cơ sở hạ tầng điện thoại, cần một thiết bị nhỏ gọi là modem. Modem sẽ biến đổi thông tin từ mạng của chúng ta thành dạng thông tin có thể điều khiển được bằng cơ sở hạ tầng điện thoại và ngược lại.

+ +

A router linked to a modem

+ +

Vậy là chúng ta đã được kết nối vào cơ sở hạ tầng điện thoại. Bước tiếp theo là gửi thông điệp từ mạng của chúng ta sang mạng cần nhận. Để làm điều đó, mạng của chúng ta cần kết nối với Nhà cung cấp dịch vụ Internet (Internet Service Provider - ISP). ISP là một công ty chuyên quản lý các bộ định tuyến đặc biệt, các bộ định tuyến đó được kết nối lẫn nhau và có thể truy cập đến các bộ định tuyến của những ISP khác. Như vậy một thông điệp gửi đi từ mạng của bạn sẽ phải đi qua mạng của các mạng ở ISP, rồi mới tới mạng cần nhận. Internet bao gồm toàn bộ cơ sở hạ tầng của các mạng.

+ +

Full Internet stack

+ +

Tìm các máy tính

+ +

Nếu bạn muốn gửi một thông điệp đến một máy tính khác, thì phải chỉ định đích danh đó là máy tính nào. Do đó mà mỗi máy tính khi kết nối vào hệ thống mạng thì đều được gán một địa chỉ duy nhất để nhận dạng, gọi là địa chỉ IP (IP là viết tắt của Internet Protocol). IP là một dãy gồm bốn số được ngăn cách nhau bằng dấu chấm, ví dụ 192.168.2.10.

+ +

Điều đó đối với các máy tính là quá tốt, nhưng con người chúng ta sẽ gặp nhiều khó khăn để nhớ dãy số địa chỉ đó. Để làm mọi thứ dễ dàng hơn, chúng ta đặt bí danh cho địa chỉ IP, tức là một cái tên nào đó dễ nhớ đối với con người, mà theo chuyên ngành người ta gọi là tên miền - domain name. Ví dụ google.com là tên miền đại diện cho địa chỉ IP 173.194.121.32. Như vậy, sử dụng tên miền là phương pháp dễ nhất để chúng ta chạm đến một máy tính khác trên Internet.

+ +

Show how a domain name can alias an IP address

+ +

Internet và web

+ +

Như bạn có thể nhận thấy, khi chúng ta duyệt Web với một trình duyệt web, chúng ta thường sử dụng tên miền để chạm đến trang web đó. Nghĩa là Internet và Web giống nhau? Không đơn giản thế. Như chúng ta đã xem qua, Internet là một cơ sở hạ tầng kỹ thuật cho phép hàng tỉ máy tính kết nối với nhau. Trong số những máy tính đó, có một số máy (được gọi là máy chủ Web - Web server) có thể gửi các thông điệp dễ hiểu đến trình duyệt web. Internet là một hệ thống cơ sở hạ tầng, ngược lạiWeb là một dịch vụ được xây dựng ở mặt trên (phần ngọn) của cơ sở hạ tầng. Phải nên nhớ rằng có những dịch vụ khác cũng được xây dựng ở mặt trên của Internet, như là email và {{Glossary("IRC")}}.

+ +

Bước tiếp theo

+ + diff --git a/files/vi/learn/common_questions/internet_lam_viec_nh_the_nao/index.html b/files/vi/learn/common_questions/internet_lam_viec_nh_the_nao/index.html deleted file mode 100644 index fb9abacd43..0000000000 --- a/files/vi/learn/common_questions/internet_lam_viec_nh_the_nao/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Internet làm việc như thế nào? -slug: Learn/Common_questions/Internet_lam_viec_nh_the_nao -translation_of: Learn/Common_questions/How_does_the_Internet_work ---- -
{{LearnSidebar}}
- -
-

Bài viết này giải thích Internet là gì và cách nó làm việc.

-
- - - - - - - - - - - - -
Điều kiện tiên quyết:Không yêu cầu, nhưng chúng tôi khuyên bạn trước tiên nên đọc Bài viết nói về thiết lập các mục tiêu cho dự án.
Mục tiêu:Bạn sẽ học những khái niệm cơ bản về cơ sở hạ tầng của Web và sự khác giữa Internet với Web.
- -

Tóm tắt

- -

Internet là xương sống của Web, là cơ sở hạ tầng kỹ thuật làm cho Web tồn tại. Nói theo nghĩa cơ bản nhất, Internet là một mạng rất lớn bao gồm các máy tính có thể giao tiếp với nhau.

- -

Lịch sử của Internet là một cái gì đó đen tối. Nó được bắt đầu từ những năm 1960 như một dự án nghiên cứu được tài trợ bởi quân đội Mỹ, sau đó đến những năm 1980, nó phát triển thành một hệ thống cơ sở hạ tầng công cộng với sự hỗ trợ của nhiều trường đại học công lập và các công ty tư nhân. Những kỹ thuật khác nhau đã giúp Internet tiến hóa vượt thời gian, nhưng cách nó làm việc thì vẫn không thay đổi nhiều: Internet là con đường để tất cả máy tính kết nối lại với nhau, và dù cho có chuyện gì xảy ra, các máy tính vẫn tìm thấy con đường khác để tiếp tục nối kết.

- -

Học tập tích cực

- - - -

Lặn sâu hơn

- -

Một mạng đơn giản

- -

Khi hai máy tính cần giao tiếp (liên lạc) với nhau, bạn sẽ phải liên kết chúng lại, hoặc bằng hình thức vật lý (thường dùng với một dây Cáp Ethernet - Ethernet cable) hoặc không dây (ví dụ như hệ thống WiFi hoặc Bluetooth). Những máy tính hiện đại ngày nay có thể chấp nhận tất cả kết nối trên.

- -
-

Chú ý: Phần còn lại của bài viết này, chúng ta sẽ chỉ nói về hình thức kết nối dùng cáp vật lý, còn đối với các mạng không dây thì cách làm việc cũng tương tự.

-
- -

Two computers linked together

- -

Bởi vì một mạng sẽ không bị giới hạn bởi hai máy tính. Nên bạn có thể kết nối bao nhiêu máy tính tùy ý. Nhưng khi đó sẽ nhanh chóng phát sinh rắc rối. Nếu bạn thử kết nối 10 máy tính, giả sử vậy, thì bạn sẽ cần 45 sợi cáp, và 9 phích cắm trên mỗi máy tính!

- -

Ten computers all together

- -

Để giải quyết vấn đề này, mỗi máy tính trong mạng sẽ được kết nối vào một máy tính tí hon được gọi là bộ định tuyến - router. Bộ định tuyến sẽ làm công việc giống như người ra hiệu ở trạm xe lửa, nó đảm bảo rằng một thông điệp được gửi từ máy tính này sẽ đến đúng máy tính cần nhận. Giả sử để gửi một thông điệp đến máy B, máy A phải gửi thông điệp đó đến bộ định tuyến, rồi bộ định tuyến sẽ tiếp tục chuyển nó đến máy B và đồng thời đảm bảo chắc chắn thông điệp đó không bị gửi vào máy C.

- -

Khi chúng ta thêm một bộ định tuyến vào hệ thống, mạng 10 máy tính sẽ chỉ cần 10 sợi dây cáp: vì mỗi máy tính chỉ cần một phích cắm và bộ định tuyến sẽ có 10 phích cắm.

- -

Ten computers with a router

- -

Mạng của các mạng

- -

Vậy là mọi thứ đều ổn. Nhưng còn việc kết nối hàng trăm, hàng ngàn, hàng tỉ máy tính lại với nhau thì sao? Dĩ nhiên là một bộ định tuyến đơn lẻ sẽ không thể gánh vác được số lượng đó, nhưng mà, nếu bạn đọc phần trên một cách cẩn thận, sẽ thấy chúng tôi có nói bộ định tuyến cũng chính là một máy tính giống như các máy tính khác. Thế thì có điều gì cản trở việc kết nối trực tiếp hai bộ định tuyến với nhau không? Không, vậy thì chúng ta cứ kết nối chúng thôi.

- -

Two routers linked together

- -

Bằng việc kết nối các máy tính vào bộ định tuyến, rồi lại kết nối các bộ định tuyến với nhau, chúng ta có thể tạo ra một mạng vô tận.

- -

Routers linked to routers

- -

 

- -

Một mạng như thế tiến rất gần đến thứ mà ta gọi là Internet, nhưng chúng ta đã bỏ sót vài thứ. Chúng ta xây dựng mạng máy tính đó cho mục đích riêng của mình. Còn có rất nhiều mạng máy tính khác ở ngoài kia: của những người bạn, của hàng xóm, và bất kỳ ai khác. Nhưng mà không thể nào thiết lập hàng đống đường dây cáp để kết nối nhà bạn với phần còn lại của thế giới, thế thì bạn sẽ xử lý vấn đề này như thế nào? May thay là đã có sẵn những đường dây cáp liên kết đến nhà bạn, ví dụ như, cáp điện và điện thoại. Cơ sở hạ tầng điện thoại đã kết nối nhà bạn đến với mọi người trên thế giới, thế nên nó là đường dây hoàn hảo mà chúng ta cần. Để kết nối mạng máy tính của bạn đến cơ sở hạ tầng điện thoại, cần một thiết bị nhỏ gọi là modem. Modem sẽ biến đổi thông tin từ mạng của chúng ta thành dạng thông tin có thể điều khiển được bằng cơ sở hạ tầng điện thoại và ngược lại.

- -

A router linked to a modem

- -

Vậy là chúng ta đã được kết nối vào cơ sở hạ tầng điện thoại. Bước tiếp theo là gửi thông điệp từ mạng của chúng ta sang mạng cần nhận. Để làm điều đó, mạng của chúng ta cần kết nối với Nhà cung cấp dịch vụ Internet (Internet Service Provider - ISP). ISP là một công ty chuyên quản lý các bộ định tuyến đặc biệt, các bộ định tuyến đó được kết nối lẫn nhau và có thể truy cập đến các bộ định tuyến của những ISP khác. Như vậy một thông điệp gửi đi từ mạng của bạn sẽ phải đi qua mạng của các mạng ở ISP, rồi mới tới mạng cần nhận. Internet bao gồm toàn bộ cơ sở hạ tầng của các mạng.

- -

Full Internet stack

- -

Tìm các máy tính

- -

Nếu bạn muốn gửi một thông điệp đến một máy tính khác, thì phải chỉ định đích danh đó là máy tính nào. Do đó mà mỗi máy tính khi kết nối vào hệ thống mạng thì đều được gán một địa chỉ duy nhất để nhận dạng, gọi là địa chỉ IP (IP là viết tắt của Internet Protocol). IP là một dãy gồm bốn số được ngăn cách nhau bằng dấu chấm, ví dụ 192.168.2.10.

- -

Điều đó đối với các máy tính là quá tốt, nhưng con người chúng ta sẽ gặp nhiều khó khăn để nhớ dãy số địa chỉ đó. Để làm mọi thứ dễ dàng hơn, chúng ta đặt bí danh cho địa chỉ IP, tức là một cái tên nào đó dễ nhớ đối với con người, mà theo chuyên ngành người ta gọi là tên miền - domain name. Ví dụ google.com là tên miền đại diện cho địa chỉ IP 173.194.121.32. Như vậy, sử dụng tên miền là phương pháp dễ nhất để chúng ta chạm đến một máy tính khác trên Internet.

- -

Show how a domain name can alias an IP address

- -

Internet và web

- -

Như bạn có thể nhận thấy, khi chúng ta duyệt Web với một trình duyệt web, chúng ta thường sử dụng tên miền để chạm đến trang web đó. Nghĩa là Internet và Web giống nhau? Không đơn giản thế. Như chúng ta đã xem qua, Internet là một cơ sở hạ tầng kỹ thuật cho phép hàng tỉ máy tính kết nối với nhau. Trong số những máy tính đó, có một số máy (được gọi là máy chủ Web - Web server) có thể gửi các thông điệp dễ hiểu đến trình duyệt web. Internet là một hệ thống cơ sở hạ tầng, ngược lạiWeb là một dịch vụ được xây dựng ở mặt trên (phần ngọn) của cơ sở hạ tầng. Phải nên nhớ rằng có những dịch vụ khác cũng được xây dựng ở mặt trên của Internet, như là email và {{Glossary("IRC")}}.

- -

Bước tiếp theo

- - diff --git a/files/vi/learn/common_questions/set_up_a_local_testing_server/index.html b/files/vi/learn/common_questions/set_up_a_local_testing_server/index.html new file mode 100644 index 0000000000..187215c53c --- /dev/null +++ b/files/vi/learn/common_questions/set_up_a_local_testing_server/index.html @@ -0,0 +1,99 @@ +--- +title: Làm sao để thiết lập web mạng nội bộ? +slug: Learn/Common_questions/thiet_lap_web_mang_noi_bo +translation_of: Learn/Common_questions/set_up_a_local_testing_server +--- +
+

 

+ +

Bài viết này sẽ giải thích làm thế nào để thiết lập web mạng nội bộ cơ bản trên máy tính của bạn và những điều cơ bản về cách sử dụng nó.

+ +

 

+
+ + + + + + + + + + + + +
Yêu Cầu:Bạn cần phải biết Internet hoạt động thế nào, và Web Server là gì
Mục Tiêu:Bạn sẽ biết cách thiết lập máy chủ nội bộ. 
+ +

Tập tin cục bộ (local) và Tập tin từ xa (remote)

+ +

Khắp những nơi học, chúng tôi bảo bạn mở những ví dụ trực tiếp trong một trình duyệt - điều này có thể được thực hiện bằng cách click đúp vào file HTML, kéo và thả nó vào trong cửa sổ trình duyệt, hoặc chọn File > Open... và chuyển hướng tới file HTML. Có rất nhiều cách để làm được điều này.

+ +

Nếu đường dẫn web bắt đầu với file://, tiếp theo bởi đường dẫn tới file của bạn trên ổ đĩa cục bộ thì một tập tin cục bộ đang được sử dụng. Ngược lại, nếu bạn xem một trong những ví dụ của chúng tôi trên Github (hoặc một ví dụ trên một máy chủ từ xa khác), địa chỉ web sẽ bắt đầu với http:// hoặchttps://, để cho thấy rằng file đó đã được nhận thông qua HTTP.

+ +

Những vấn đề trong việc thử nghiệm những tập tin cục bộ

+ +

Một số ví dụ sẽ không chạy nếu bạn mở chúng như những tệp tin cục bộ. Vấn  đề này có thể do nhiều lí do, những lí do có khả năng nhất như:

+ + + +

Running a simple local HTTP server

+ +

To get around the problem of async requests, we need to test such examples by running them through a local web server. One of the easiest ways to do this for our purposes is to use Python's SimpleHTTPServer module.

+ +

To do this:

+ +
    +
  1. +

    Install Python. If you are using Linux or Mac OS X, it should be available on your system already. If you are a Windows user, you can get an installer from the Python homepage and follow the instructions to install it:

    + +
      +
    • Go to python.org
      • +
    • Under the Download section, click the link for Python "3.xxx".
      • +
    • At the bottom of the page, choose the Windows x86 executable installer and download it.
      • +
    • When it has downloaded, run it.
      • +
    • On the first installer page, make sure you check the "Add Python 3.xxx to PATH" checkbox.
      • +
    • Click Install, then click Close when the installation has finished.
      • +
    +
    2. +
  2. +

    Open your command prompt (Windows)/terminal (OS X/Linux). To check Python is installed, enter the following command:

    + + 
    python -V
    +
    3. +
  3. +

    This should return a version number. If this is OK, navigate to the directory that your example is inside, using the cd command.

    + + 
    # include the directory name to enter it, for example
+cd Desktop
+# use two dots to jump up one directory level if you need to
+cd ..
    +
    4. +
  4. +

    Enter the command to start up the server in that directory:

    + + 
    # If Python version returned above is 3.X
+python -m http.server
+# If Python version returned above is 2.X
+python -m SimpleHTTPServer
    +
    5. +
  5. +

    By default, this will run the contents of the directory on a local web server, on port 8000. You can go to this server by going to the URL localhost:8000 in your web browser. Here you'll see the contents of the directory listed — click the HTML file you want to run.

    +
    6. +
+ +
+

Note: If you already have something running on port 8000, you can choose another port by running the server command followed by an alternative port number, e.g. python -m http.server 7800 (Python 3.x) or python -m SimpleHTTPServer 7800 (Python 2.x). You can then access your content at localhost:7800.

+
+ +

Running server-side languages locally

+ +

Python's SimpleHTTPServer (python 2.0) http.server (python 3.0) module is useful, but it doesn't know how to run code written in languages such as PHP or Python. To handle that you'll need something more — exactly what you'll need depends on the server-side language you are trying to run. Here are a few examples:

+ + diff --git a/files/vi/learn/common_questions/thiet_lap_web_mang_noi_bo/index.html b/files/vi/learn/common_questions/thiet_lap_web_mang_noi_bo/index.html deleted file mode 100644 index 187215c53c..0000000000 --- a/files/vi/learn/common_questions/thiet_lap_web_mang_noi_bo/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Làm sao để thiết lập web mạng nội bộ? -slug: Learn/Common_questions/thiet_lap_web_mang_noi_bo -translation_of: Learn/Common_questions/set_up_a_local_testing_server ---- -
-

 

- -

Bài viết này sẽ giải thích làm thế nào để thiết lập web mạng nội bộ cơ bản trên máy tính của bạn và những điều cơ bản về cách sử dụng nó.

- -

 

-
- - - - - - - - - - - - -
Yêu Cầu:Bạn cần phải biết Internet hoạt động thế nào, và Web Server là gì
Mục Tiêu:Bạn sẽ biết cách thiết lập máy chủ nội bộ. 
- -

Tập tin cục bộ (local) và Tập tin từ xa (remote)

- -

Khắp những nơi học, chúng tôi bảo bạn mở những ví dụ trực tiếp trong một trình duyệt - điều này có thể được thực hiện bằng cách click đúp vào file HTML, kéo và thả nó vào trong cửa sổ trình duyệt, hoặc chọn File > Open... và chuyển hướng tới file HTML. Có rất nhiều cách để làm được điều này.

- -

Nếu đường dẫn web bắt đầu với file://, tiếp theo bởi đường dẫn tới file của bạn trên ổ đĩa cục bộ thì một tập tin cục bộ đang được sử dụng. Ngược lại, nếu bạn xem một trong những ví dụ của chúng tôi trên Github (hoặc một ví dụ trên một máy chủ từ xa khác), địa chỉ web sẽ bắt đầu với http:// hoặchttps://, để cho thấy rằng file đó đã được nhận thông qua HTTP.

- -

Những vấn đề trong việc thử nghiệm những tập tin cục bộ

- -

Một số ví dụ sẽ không chạy nếu bạn mở chúng như những tệp tin cục bộ. Vấn  đề này có thể do nhiều lí do, những lí do có khả năng nhất như:

- - - -

Running a simple local HTTP server

- -

To get around the problem of async requests, we need to test such examples by running them through a local web server. One of the easiest ways to do this for our purposes is to use Python's SimpleHTTPServer module.

- -

To do this:

- -
    -
  1. -

    Install Python. If you are using Linux or Mac OS X, it should be available on your system already. If you are a Windows user, you can get an installer from the Python homepage and follow the instructions to install it:

    - -
      -
    • Go to python.org
      • -
    • Under the Download section, click the link for Python "3.xxx".
      • -
    • At the bottom of the page, choose the Windows x86 executable installer and download it.
      • -
    • When it has downloaded, run it.
      • -
    • On the first installer page, make sure you check the "Add Python 3.xxx to PATH" checkbox.
      • -
    • Click Install, then click Close when the installation has finished.
      • -
    -
    2. -
  2. -

    Open your command prompt (Windows)/terminal (OS X/Linux). To check Python is installed, enter the following command:

    - - 
    python -V
    -
    3. -
  3. -

    This should return a version number. If this is OK, navigate to the directory that your example is inside, using the cd command.

    - - 
    # include the directory name to enter it, for example
-cd Desktop
-# use two dots to jump up one directory level if you need to
-cd ..
    -
    4. -
  4. -

    Enter the command to start up the server in that directory:

    - - 
    # If Python version returned above is 3.X
-python -m http.server
-# If Python version returned above is 2.X
-python -m SimpleHTTPServer
    -
    5. -
  5. -

    By default, this will run the contents of the directory on a local web server, on port 8000. You can go to this server by going to the URL localhost:8000 in your web browser. Here you'll see the contents of the directory listed — click the HTML file you want to run.

    -
    6. -
- -
-

Note: If you already have something running on port 8000, you can choose another port by running the server command followed by an alternative port number, e.g. python -m http.server 7800 (Python 3.x) or python -m SimpleHTTPServer 7800 (Python 2.x). You can then access your content at localhost:7800.

-
- -

Running server-side languages locally

- -

Python's SimpleHTTPServer (python 2.0) http.server (python 3.0) module is useful, but it doesn't know how to run code written in languages such as PHP or Python. To handle that you'll need something more — exactly what you'll need depends on the server-side language you are trying to run. Here are a few examples:

- - diff --git a/files/vi/learn/dong_gop_cho_khu_vuc_hoc_tap_tren_mdn/index.html b/files/vi/learn/dong_gop_cho_khu_vuc_hoc_tap_tren_mdn/index.html deleted file mode 100644 index ca0f73fbc1..0000000000 --- a/files/vi/learn/dong_gop_cho_khu_vuc_hoc_tap_tren_mdn/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Cách đóng góp cho Khu vực học tập trên MDN -slug: Learn/Dong_gop_cho_khu_vuc_hoc_tap_tren_MDN -translation_of: Learn/How_to_contribute ---- -
{{LearnSidebar}}
- -

Nếu bạn đang ở đây lần đầu tiên hoặc sau khi tìm kiếm sâu, có thể là vì bạn quan tâm đến việc đóng góp cho Khu vực học tập MDN. Tin tốt đấy!

- -

Trên trang này, bạn sẽ tìm thấy mọi thứ bạn cần để bắt đầu giúp cải thiện nội dung học tập của MDN. Có rất nhiều thứ bạn có thể làm, tùy thuộc vào bạn có bao nhiêu thời gian và bạn là người mới bắt đầu, nhà phát triển web hoặc giáo viên.

- -
-

Lưu ý: Bạn có thể tìm thấy hướng dẫn để viết bài viết về khu vực học tập mới tại Cách viết bài viết để giúp mọi người tìm hiểu về Web.

-
- -

Tìm các tác vụ cụ thể

- -

A common way that people contribute to the Learning Area is to read the articles, fix typos, and suggest improvements. We also welcome you to add examples to our GitHub repo, and get in touch with us if you want to ask what else needs to be done.

- -

Contributing is a great way to have some fun while learning new stuff. If you ever feel lost or have questions, don't hesitate to reach us on the Learning Area Discourse thread or IRC channel (see at the bottom of this page for details). Chris Mills is the topic driver for the Learning Area — you could also try pinging him directly.

- -

The following sections provide some general ideas of the types of tasks you can do.

- -

I'm a beginner

- -

That's awesome! Beginners are very important and valuable for creating and giving feedback on learning material. You have a unique perspective on these articles as a member of their target audience, which can make you an invaluable member of our team. Indeed, if you're using one of our articles to learn something and you get stuck, or find the article confusing in some way, you can either fix it or let us know about the problem so we can be sure it gets fixed.

- -

Here are some suggested ways you can contribute:

- -
-
Add tags to our articles (5 min)
-
Tagging MDN content is one of the easiest ways to contribute to MDN. As many of our features use tags to help present information in context, helping with tagging is a very valuable contribution. Take a look at the lists of glossary entries and learning articles without any tags to get started.
-
Read and review a glossary entry (5 min)
-
As a beginner, we need your fresh eyes looking at our content. If you find a glossary entry hard to understand, it means that entry needs to be improved. Feel free to make any changes you think are necessary. If you do not think you have the proper skill to edit the entry yourself, at least tell us on our mailing list.
-
Write a new glossary entry (20 minutes)
-
This is the most effective way to learn something new. Pick a concept you want to understand, and as you learn about it, write a glossary entry about it. Explaining something to others is a great way to "cement" the knowledge in your brain, and to help you make sense of things yourself, all while helping other people. Everybody wins!
-
Read and review a learning article (2 hours)
-
This is very much like reviewing glossary entries (see above); it just takes more time, since these articles are typically quite a bit longer.
-
- -

I'm a web developer

- -

Fantastic! Your technical skills are just what we need to be sure we provide technically accurate content for beginners. As this specific part of MDN is dedicated to learning the Web, be sure your explanations are as simple as possible, without being so simple that they're not useful. It's more important to be understandable than to be overly precise.

- -
-
Read and review a glossary entry (5 min)
-
As a web developer, we need you to make sure our content is technically accurate without being too pedantic. Feel free to make any changes you think are necessary. If you want to discuss the content before editing, ping us on our mailing list or IRC channel.
-
Write a new glossary entry (20 minutes)
-
Clarifying technical jargon is a very good way to learn and be both technically accurate and simple. Beginners will thank you for that. We have many undefined terms which need your attention. Pick one and you're good to go.
-
Read and review a learning article (2 hours)
-
This is the same thing as reviewing a glossary entry (see above); it just takes a bit more time as those articles are quite a bit longer.
-
Write a new learning article (4 hours or more)
-
MDN is lacking simple straightforward articles about using web technologies (HTML, CSS, JavaScript, etc). We also have old content on MDN that deserves to be reviewed and reshaped. Push your skills to the limit to make web technologies usable even by beginners.
-
Create exercises, code samples or interactive learning tools (? hours)
-
All our learning articles require what we call "active learning" materials, because people learn best by doing something themselves. Such materials are exercises or interactive content that help a user to apply and manipulate the concepts detailed in an article. There are many possible ways to make active learning content, from creating code samples with JSFiddle or similar, to building fully hackable interactive content with Thimble. Unleash your creativity!
-
- -

I'm a teacher

- -

MDN has a long history of technical excellence, but we lack depth of understanding of the best way to teach concepts to newcomers. This is where we need you, as a teacher or educator. You can help us ensure that our materials provide a good, practical educational track for our readers.

- -
-
Read and review a glossary entry (15 min)
-
Check out a glossary entry and feel free to make any changes you think are necessary. If you want to discuss the content before editing, ping us on our mailing list or IRC channel.
-
Write a new glossary entry (1 hour)
-
Clear, simple definitions of terms and basic overviews of concepts in the glossary are critical in meeting beginners' needs. Your experience as an educator can help create excellent glossary entries; we have many undefined terms which need your attention. Pick one and go for it.
-
Add illustrations and/or schematics to articles (1 hour)
-
As you might know, illustrations are an invaluable part of any learning content. This is something we often lack on MDN and your skills can make a difference in that area. Check out the articles that lack illustrative content and pick one you'd like to create graphics for.
-
Read and review a learning article (2 hours)
-
This is similar to reviewing glossary entries (see above), but it requires more time since the articles are typically quite a bit longer.
-
Write a new learning article (4 hours)
-
We need simple, straightforward articles about the Web ecosystem and other functional topics around it. Since these learning articles need to be educational rather than trying to literally cover everything there is to know, your experience in knowing what to cover and how will be a great asset.
-
Create exercises, quizzes or interactive learning tools (? hours)
-
All our learning articles require "active learning" materials. Such materials are exercises or interactive content which help a user learn to use and expand upon the concepts detailed in an article. There are lots of things you can do here, from creating quizzes to building fully hackable interactive content with Thimble. Unleash your creativity!
-
Create learning pathways (? hours)
-
In order to provide progressive and comprehensible tutorials, we need to shape our content into pathways. It's a way to gather existing content and figure out what is missing to create a learning article to write.
-
- -

See also

- - diff --git a/files/vi/learn/forms/index.html b/files/vi/learn/forms/index.html new file mode 100644 index 0000000000..5b0215a43c --- /dev/null +++ b/files/vi/learn/forms/index.html @@ -0,0 +1,101 @@ +--- +title: HTML forms +slug: Learn/HTML/Forms +tags: + - Beginner + - Featured + - Forms + - Guide + - HTML + - Landing + - Learn + - NeedsTranslation + - TopicStub + - Web +translation_of: Learn/Forms +--- +
{{LearnSidebar}}
+ +

This module provides a series of articles that will help you master HTML forms. HTML forms are a very powerful tool for interacting with users; however, for historical and technical reasons, it's not always obvious how to use them to their full potential. In this guide, we'll cover all aspects of HTML forms, from structure to styling, from data handling to custom widgets.

+ +

Prerequisites

+ +

Before starting this module, you should at least work through our Introduction to HTML. At this point you should find the {{anch("Basic guides")}} easy to understand, and also be able to make use of our Native form widgets guide.

+ +

The rest of the module however is a bit more advanced — it is easy to put form widgets on a page, but you can't actually do much with them without using some advanced form features, CSS, and JavaScript. Therefore, before you look at the other sections we'd recommend that you go away and learn some CSS and JavaScript first.

+ +

The above text is a good indicator as to why we've put web forms into its own standalone module, rather than trying to mix bits of it into the HTML, CSS, and JavaScript topic areas — form elements are more complex than most other HTML elements, and they also require a close marriage of related CSS and JavaScript techniques to get the most out of them.

+ +
+

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Thimble.

+
+ +

Hướng dẫn mở đầu

+ +
+
Your first HTML form
+
The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.
+
How to structure an HTML form
+
With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form.
+
+ +

Các form controls khác nhau

+ +

Basic native form controls
+ Chúng ta bắt đầu phần này bằng việc nhìn vào chức năng khả dụng của của kiểu {{htmlelement("input")}} HTML, tìm hiểu những tùy chọn có thể sử dụng để thu thập các kiểu data khác nhau.

+ +

The HTML5 input types
+ Tại đây chúng ta sẽ tiếp tục đi sâu vào phần tử <input>, tìm hiểu về các kiểu input mới được thêm trong HTML5, và các loại UI controls khác nhau và cách thu thập dữ liệu nâng cao mà chúng làm được. Thêm nữa, chúng ta sẽ xem qua phần tử {{htmlelement('output')}}.

+ +

Other form controls
+ Tiếp sau đó chúng ta sẽ tìm hiểu về các non-<input> form controls và các công cụ có liên quan, ví dụ {{htmlelement('select')}}, {{htmlelement('textarea')}}, {{htmlelement('meter')}}, and {{htmlelement('progress')}}.

+ +

Form styling guides

+ +
+
+
Styling web forms
+
This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.
+
Advanced form styling
+
Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style form elements.
+
UI pseudo-classes
+
An introduction to the UI pseudo-classes enabling HTML form controls to be targeted based on their current state.
+
+ +

Kiểm tra và gửi dữ liệu form

+ +
+
Sending form data
+
Bài viết này cho biết điều gì sẽ xảy ra khi user submit một cái form - dữ liệu sẽ đi đâu, và làm sao chúng ta có thẻ xử lý dữ liệu đó khi nó đi đến đó? Chúng ta cũng nhìn vào một số vấn đề về bảo mật liên quan đến việc gửi dữ liệu đi.
+
Client-side form validation
+
Gửi dữ liệu đi thôi là chưa đủ - chúng ta cũng cần phải đảm bảo rằng dữ liêu mà user điền vào form là đúng định dạng chúng ta mong muốn để xử lý được, và chúng sẽ không làm hư hại ứng dụng của chúng ta. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know.
+
+ +

Advanced guides

+ +
+
Làm sao để xây dựng các form widgets tùy chỉnh 
+
Bạn sẽ bắt gặp các trường hợp mà form tích hợp trong cùng file là không đủ đáp ứng nhu cầu của bạn, ví dụ lý do về styling hay chức năng. Trong các trường hợp này, bạn có thể sẽ cần xây dựng widget form của riêng bạn dựa trên HTML thô. Bài viết này sẽ giải thích làm cách nào đạt được điều đó, và các điều cần cân nhắc khi bạn làm nó, với một case study thực tế.
+
Gửi form bằng JavaScript
+
This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)
+
HTML forms in legacy browsers
+
Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.
+
+ +

Form styling guides

+ +
+
Styling HTML forms
+
This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.
+
Advanced styling for HTML forms
+
Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.
+
Property compatibility table for form widgets
+
This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.
+
+ +

See also

+ + diff --git "a/files/vi/learn/getting_started_with_the_web/c\303\240i_\304\221\341\272\267t_c\303\241c_ph\341\272\247n_m\341\273\201m_c\306\241_b\341\272\243n/index.html" "b/files/vi/learn/getting_started_with_the_web/c\303\240i_\304\221\341\272\267t_c\303\241c_ph\341\272\247n_m\341\273\201m_c\306\241_b\341\272\243n/index.html" deleted file mode 100644 index 0350529f25..0000000000 --- "a/files/vi/learn/getting_started_with_the_web/c\303\240i_\304\221\341\272\267t_c\303\241c_ph\341\272\247n_m\341\273\201m_c\306\241_b\341\272\243n/index.html" +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Cài đặt các phần mềm cơ bản -slug: Learn/Getting_started_with_the_web/Cài_đặt_các_phần_mềm_cơ_bản -tags: - - Công Cụ - - Học Làm Web - - Người Mới Bắt Đầu - - Thiết Lập - - Trình Duyệt Web -translation_of: Learn/Getting_started_with_the_web/Installing_basic_software ---- -
{{LearnSidebar}}
- -
-

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

-
- -
-

Trong bài Cài đặt các phần mềm cơ bản, chúng tôi sẽ chỉ cho bạn các công cụ cần thiết để phát triển web đơn giản, và cách cài đặt chúng.

-
- -

Các chuyên gia web sử dụng gì?

- - - -

Những công cụ nào bạn thực sự cần hiện tại?

- -

Đừng để danh sách trên làm bạn sợ, thật ra bạn không cần phải biết tất cả công cụ trên để làm quen với phát triển web. Trong bài viết này, chúng tôi chỉ yêu cầu bạn công cụ căn bản nhất: một trình soạn thảo và một vài trình duyệt web. 

- -

Cài đặt trình soạn thảo

- -

Bạn có thể đã có sẵn chương trình soạn thảo trên máy tính của bạn. Trên hệ điều hành Windows là Notepad và trên OSX là TextEdit. Linux thì khá đa dạng, còn Ubuntu thì tích hợp gedit. 

- -

Để phát triển web, bạn có thể cần một phần mềm tốt hơn Notepad hoặc TextEdit. Chúng tôi khuyến khích bạn nên bắt đầu với Brackets, một chương trình soạn thảo code có thể cho bạn xem trước và có gợi ý code. 

- -

Cài đặt trình duyệt web

- -

Tiếp theo chúng ta sẽ cài đặt một vài trình duyệt để hiển thị trang web của chúng ta. Bản có thể click vào các link dưới đây để tải chương trình phù hợp với hệ điều hành của bạn: 

- - - -

Trước khi tiến hành bước tiếp theo, bạn nên cài đặt ít nhất 2 trình duyệt web và kiểm tra sử dụng thử. 

- -

Cài đặt web server trên máy tính

- -

Một vài ví dụ cần bạn phải chạy web server. bạn có thể thiết lập một máy chủ trên máy tính của bạn dựa trên hướng dẫn sau: Làm thế nào để thiết lập một máy chủ cục bộ?  

- -

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

diff --git a/files/vi/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/vi/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..0350529f25 --- /dev/null +++ b/files/vi/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,62 @@ +--- +title: Cài đặt các phần mềm cơ bản +slug: Learn/Getting_started_with_the_web/Cài_đặt_các_phần_mềm_cơ_bản +tags: + - Công Cụ + - Học Làm Web + - Người Mới Bắt Đầu + - Thiết Lập + - Trình Duyệt Web +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +
{{LearnSidebar}}
+ +
+

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

+
+ +
+

Trong bài Cài đặt các phần mềm cơ bản, chúng tôi sẽ chỉ cho bạn các công cụ cần thiết để phát triển web đơn giản, và cách cài đặt chúng.

+
+ +

Các chuyên gia web sử dụng gì?

+ + + +

Những công cụ nào bạn thực sự cần hiện tại?

+ +

Đừng để danh sách trên làm bạn sợ, thật ra bạn không cần phải biết tất cả công cụ trên để làm quen với phát triển web. Trong bài viết này, chúng tôi chỉ yêu cầu bạn công cụ căn bản nhất: một trình soạn thảo và một vài trình duyệt web. 

+ +

Cài đặt trình soạn thảo

+ +

Bạn có thể đã có sẵn chương trình soạn thảo trên máy tính của bạn. Trên hệ điều hành Windows là Notepad và trên OSX là TextEdit. Linux thì khá đa dạng, còn Ubuntu thì tích hợp gedit. 

+ +

Để phát triển web, bạn có thể cần một phần mềm tốt hơn Notepad hoặc TextEdit. Chúng tôi khuyến khích bạn nên bắt đầu với Brackets, một chương trình soạn thảo code có thể cho bạn xem trước và có gợi ý code. 

+ +

Cài đặt trình duyệt web

+ +

Tiếp theo chúng ta sẽ cài đặt một vài trình duyệt để hiển thị trang web của chúng ta. Bản có thể click vào các link dưới đây để tải chương trình phù hợp với hệ điều hành của bạn: 

+ + + +

Trước khi tiến hành bước tiếp theo, bạn nên cài đặt ít nhất 2 trình duyệt web và kiểm tra sử dụng thử. 

+ +

Cài đặt web server trên máy tính

+ +

Một vài ví dụ cần bạn phải chạy web server. bạn có thể thiết lập một máy chủ trên máy tính của bạn dựa trên hướng dẫn sau: Làm thế nào để thiết lập một máy chủ cục bộ?  

+ +

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

diff --git a/files/vi/learn/html/forms/index.html b/files/vi/learn/html/forms/index.html deleted file mode 100644 index 5b0215a43c..0000000000 --- a/files/vi/learn/html/forms/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: HTML forms -slug: Learn/HTML/Forms -tags: - - Beginner - - Featured - - Forms - - Guide - - HTML - - Landing - - Learn - - NeedsTranslation - - TopicStub - - Web -translation_of: Learn/Forms ---- -
{{LearnSidebar}}
- -

This module provides a series of articles that will help you master HTML forms. HTML forms are a very powerful tool for interacting with users; however, for historical and technical reasons, it's not always obvious how to use them to their full potential. In this guide, we'll cover all aspects of HTML forms, from structure to styling, from data handling to custom widgets.

- -

Prerequisites

- -

Before starting this module, you should at least work through our Introduction to HTML. At this point you should find the {{anch("Basic guides")}} easy to understand, and also be able to make use of our Native form widgets guide.

- -

The rest of the module however is a bit more advanced — it is easy to put form widgets on a page, but you can't actually do much with them without using some advanced form features, CSS, and JavaScript. Therefore, before you look at the other sections we'd recommend that you go away and learn some CSS and JavaScript first.

- -

The above text is a good indicator as to why we've put web forms into its own standalone module, rather than trying to mix bits of it into the HTML, CSS, and JavaScript topic areas — form elements are more complex than most other HTML elements, and they also require a close marriage of related CSS and JavaScript techniques to get the most out of them.

- -
-

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Thimble.

-
- -

Hướng dẫn mở đầu

- -
-
Your first HTML form
-
The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.
-
How to structure an HTML form
-
With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form.
-
- -

Các form controls khác nhau

- -

Basic native form controls
- Chúng ta bắt đầu phần này bằng việc nhìn vào chức năng khả dụng của của kiểu {{htmlelement("input")}} HTML, tìm hiểu những tùy chọn có thể sử dụng để thu thập các kiểu data khác nhau.

- -

The HTML5 input types
- Tại đây chúng ta sẽ tiếp tục đi sâu vào phần tử <input>, tìm hiểu về các kiểu input mới được thêm trong HTML5, và các loại UI controls khác nhau và cách thu thập dữ liệu nâng cao mà chúng làm được. Thêm nữa, chúng ta sẽ xem qua phần tử {{htmlelement('output')}}.

- -

Other form controls
- Tiếp sau đó chúng ta sẽ tìm hiểu về các non-<input> form controls và các công cụ có liên quan, ví dụ {{htmlelement('select')}}, {{htmlelement('textarea')}}, {{htmlelement('meter')}}, and {{htmlelement('progress')}}.

- -

Form styling guides

- -
-
-
Styling web forms
-
This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.
-
Advanced form styling
-
Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style form elements.
-
UI pseudo-classes
-
An introduction to the UI pseudo-classes enabling HTML form controls to be targeted based on their current state.
-
- -

Kiểm tra và gửi dữ liệu form

- -
-
Sending form data
-
Bài viết này cho biết điều gì sẽ xảy ra khi user submit một cái form - dữ liệu sẽ đi đâu, và làm sao chúng ta có thẻ xử lý dữ liệu đó khi nó đi đến đó? Chúng ta cũng nhìn vào một số vấn đề về bảo mật liên quan đến việc gửi dữ liệu đi.
-
Client-side form validation
-
Gửi dữ liệu đi thôi là chưa đủ - chúng ta cũng cần phải đảm bảo rằng dữ liêu mà user điền vào form là đúng định dạng chúng ta mong muốn để xử lý được, và chúng sẽ không làm hư hại ứng dụng của chúng ta. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know.
-
- -

Advanced guides

- -
-
Làm sao để xây dựng các form widgets tùy chỉnh 
-
Bạn sẽ bắt gặp các trường hợp mà form tích hợp trong cùng file là không đủ đáp ứng nhu cầu của bạn, ví dụ lý do về styling hay chức năng. Trong các trường hợp này, bạn có thể sẽ cần xây dựng widget form của riêng bạn dựa trên HTML thô. Bài viết này sẽ giải thích làm cách nào đạt được điều đó, và các điều cần cân nhắc khi bạn làm nó, với một case study thực tế.
-
Gửi form bằng JavaScript
-
This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)
-
HTML forms in legacy browsers
-
Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.
-
- -

Form styling guides

- -
-
Styling HTML forms
-
This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.
-
Advanced styling for HTML forms
-
Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.
-
Property compatibility table for form widgets
-
This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.
-
- -

See also

- - diff --git a/files/vi/mdn/community/index.html b/files/vi/mdn/community/index.html deleted file mode 100644 index 0242f58382..0000000000 --- a/files/vi/mdn/community/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Tham gia cộng đồng MDN -slug: MDN/Community -tags: - - Hướng dẫn - - MDN - - cộng đồng - - thông tin MDN - - trang chính -translation_of: MDN/Community ---- -
{{MDNSidebar}}
- -

Tổng quát

- -
-

MDN (viết tắt của Mozilla Developer Network) không chỉ là một thư viện: Đó là một cộng đồng mà các nhà phát triển làm việc cùng nhau, để giúp MDN trở thành một nguồn tài nguyên tuyệt vời cho các nhà phát triển sử dụng các công nghệ Web mở.

-
- -

Sẽ thật tuyệt nếu bạn đóng góp cho MDN, nhưng còn tuyệt hơn nữa nếu bạn tham gia vào cộng đồng MDN. Dưới đây là ba bước đơn giản để cùng kết nối:

- -
    -
  1. Tạo một tài khoản MDN.
    2. -
  2. Tham gia các cuộc thảo luận.
    3. -
  3. Theo dõi những gì đang diễn ra.
    4. -
- -

Hoạt động của cộng đồng

- -

Dưới đây là những bài viết cung cấp thêm thông tin cho bạn về cộng đồng MDN.

- -
-
-
-
Các vị trí đặc biệt trong cộng đồng
-
Cộng đồng có một số người có những vị trí đặc biệt, những người này có những trách nhiệm cụ thể.
-
Viết tài liệu
-
Đây là hướng dẫn để tổ chức các sự kiện viết tài liệu. Trong đó có chứa các lời khuyên và hướng dẫn từ những người từng tổ chức các sự kiện viết tài liệu, để giúp bạn cũng có thể tổ chức.
-
Theo dõi những gì đang diễn ra
-
MDN được mang đến cho bạn nhờ cộng đồng Mozilla Developer Network. Đây là một số cách mà chúng tôi chia sẻ những thông tin về những gì chúng tôi đang thực hiện.
-
- -
-
-
- -
-
-
Thảo luận trên MDN
-
Tính "làm việc" của MDN diễn ra trên MDN, nhưng tính "cộng đồng" cũng xảy ra thông qua việc thảo luận và nói chuyện trực tuyến hay gặp gỡ trực tiếp.
-
Hoạt động trong cộng đồng
-
Một phần quan trong trong việc đóng góp cho các tài liệu của MDN, dù ở mức độ nào, đó là biết được cách để hoạt động trong cộng đồng MDN. Bài viết này có các hướng dẫn giúp bạn các những tương tác tốt nhất với cả những người viết bài khác cũng như các nhóm phát triển.
-
-
-
diff --git a/files/vi/mdn/contribute/howto/create_an_mdn_account/index.html b/files/vi/mdn/contribute/howto/create_an_mdn_account/index.html deleted file mode 100644 index 796e7df30b..0000000000 --- a/files/vi/mdn/contribute/howto/create_an_mdn_account/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: How to create an MDN account -slug: MDN/Contribute/Howto/Create_an_MDN_account -translation_of: MDN/Contribute/Howto/Create_an_MDN_account ---- -
{{MDNSidebar}}
- -

Để chỉnh sửa nội dung trên MDN, bạn cần có hồ sơ MDN. Bạn không cần một hồ sơ nếu bạn chỉ muốn đọc và tìm kiếm các tài liệu MDN. Hướng dẫn này sẽ giúp bạn thiết lập hồ sơ MDN của bạn.

- -
-
Tại sao MDN cần địa chỉ email của tôi?
-
-Địa chỉ email của bạn được sử dụng để khôi phục tài khoản và, nếu cần, bởi các quản trị viên MDN để liên hệ với bạn về tài khoản hoặc hoạt động của bạn trên trang web.
-
-Ngoài ra, bạn có thể đăng ký thông báo (chẳng hạn như khi các trang cụ thể được thay đổi ) và tin nhắn (ví dụ: nếu bạn chọn tham gia nhóm thử nghiệm beta của chúng tôi, bạn có thể nhận được email về các tính năng mới cần thử nghiệm).
-
-Địa chỉ email của bạn không bao giờ được hiển thị trên MDN và sẽ chỉ được sử dụng theo chính sách bảo mật của chúng tôi .
- -
Nếu bạn đăng nhập vào MDN qua GitHub và bạn sử dụng địa chỉ email "noreply" trên GitHub, bạn sẽ không nhận được tin nhắn (bao gồm cả thông báo khi bạn đăng ký trang) từ MDN.
-
-
- -
    -
  1. Ở đầu mỗi trang trên MDN, bạn sẽ tìm thấy một nút có nhãn Đăng nhập . Trỏ chuột vào đây (hoặc chạm vào nó, nếu bạn đang sử dụng thiết bị di động) để hiển thị danh sách các dịch vụ xác thực mà chúng tôi hỗ trợ để đăng nhập vào MDN.
    2. -
  2. Chọn một dịch vụ để đăng nhập. Hiện tại, chỉ có GitHub có sẵn. Lưu ý rằng nếu bạn chọn GitHub, một liên kết đến hồ sơ GitHub của bạn sẽ được đưa vào trang hồ sơ MDN công khai của bạn.
    3. -
  3. Làm theo lời nhắc của GitHub để kết nối tài khoản của bạn với MDN.
    4. -
  4. Khi dịch vụ xác thực đưa bạn trở lại MDN, bạn sẽ được nhắc nhập tên người dùng và địa chỉ email. Tên người dùng của bạn sẽ được hiển thị công khai để ghi có cho bạn cho công việc bạn đã thực hiện. Không sử dụng địa chỉ email của bạn làm tên người dùng của bạn .
    5. -
  5. Nhấp vào Tạo hồ sơ MDN của tôi .
    6. -
  6. Nếu địa chỉ email bạn đã chỉ định trong bước 4 không giống với địa chỉ bạn sử dụng với dịch vụ xác thực, vui lòng kiểm tra email của bạn và nhấp vào liên kết trong email xác nhận chúng tôi gửi cho bạn.
    7. -
- -

Đó là nó! Bạn đã có tài khoản MDN và bạn có thể chỉnh sửa trang ngay lập tức!

- -

Bạn có thể nhấp vào tên của bạn ở đầu bất kỳ trang MDN nào để xem hồ sơ công khai của bạn. Từ đó, bạn có thể nhấp vào Chỉnh sửa để thực hiện thay đổi hoặc bổ sung vào hồ sơ của mình.

- -
-

Tên người dùng mới không thể chứa dấu cách hoặc ký tự "@". Hãy nhớ rằng tên người dùng của bạn sẽ được hiển thị công khai để xác định công việc bạn đã thực hiện.

-
diff --git a/files/vi/mdn/contribute/howto/do_a_technical_review/index.html b/files/vi/mdn/contribute/howto/do_a_technical_review/index.html deleted file mode 100644 index 61e3c1cda5..0000000000 --- a/files/vi/mdn/contribute/howto/do_a_technical_review/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: How to do a technical review -slug: MDN/Contribute/Howto/Do_a_technical_review -translation_of: MDN/Contribute/Howto/Do_a_technical_review ---- -
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
- -

A Technical review consists of reviewing the technical accuracy and completeness of an article and correcting it if necessary. If a writer of an article wants someone else to check the technical content of an article, the writer ticks the "Technical review" checkbox while editing. Often the writer contacts a specific engineer to perform the technical review, but anyone with technical expertise in the topic can do one.

- -

This article describes how to perform a technical review, thereby helping to ensure that MDN's content is accurate.

- -
-
What is the task?
-
Reviewing and correcting the articles for technical accuracy and completeness.
-
Where does it need to be done?
-
In specific articles that are marked as requiring a technical review.
-
What do you need to know to do the task?
-
-
    -
  • Expert knowledge of the topic of the article you are reviewing. If reading the article doesn't teach you anything significantly new, consider yourself an expert.
    • -
  • How to edit a wiki article on MDN.
    • -
-
-
What are the steps to do it?
-
-
    -
  1. Pick an article to review: -
      -
    1. Go to the list of pages that need technical reviews. This lists all the pages for which a technical review has been requested.
      2. -
    2. Choose a page whose topic you are very familiar with.
      3. -
    3. Click on the article link to load the page.
      4. -
    -
    2. -
  2. Read the article, paying close attention to technical details: Is the article correct? Is there anything missing? Don't hesitate to switch to a different page if the first one you choose doesn't suit you.
    3. -
  3. If there are no errors, you don't need to edit the article to mark it as reviewed. Look for the "quick review" box in the left sidebar of the page. This yellow box lists any pending reviews and lets you clear their review request flag. It looks like this if a technical review has been requested:
    - Screenshot of the sidebar's box listing reviews that have been requested and allowing the flags to be changed.
    4. -
  4. Deselect the Technical checkbox, and click Save.
    5. -
  5. If you find errors that need to be corrected, you'll be glad to know that you can also change the review request status from within the editor. Here's the workflow: -
      -
    1. To edit the page, click the Edit button near the top of the page; this puts you into the MDN editor.
      2. -
    2. Fix any technical information is not correct, and/or add any important information that is missing.
      3. -
    3. Enter a Revision Comment at the bottom of the article. This is a brief message that describes what you did, like 'Technical review completed.' If you corrected information, include that in your comment, for example 'Technical review and fixed parameter descriptions.' This helps other contributors and site editors know what you changed and why. You can also mention if there were specific bits that you didn't feel qualified to review.
      4. -
    4. Deselect the Technical box under Review Needed? just below the Revision Comment area of the page.
      5. -
    5. Click the PUBLISH button.
      6. -
    -
    6. -
- -

Congratulations! You've finished your first technical review! Thank you for your help!

-
-
diff --git a/files/vi/mdn/contribute/howto/do_an_editorial_review/index.html b/files/vi/mdn/contribute/howto/do_an_editorial_review/index.html deleted file mode 100644 index 23410f87e7..0000000000 --- a/files/vi/mdn/contribute/howto/do_an_editorial_review/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: How to do an editorial review -slug: MDN/Contribute/Howto/Do_an_editorial_review -translation_of: MDN/Contribute/Howto/Do_an_editorial_review ---- -
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
- -

Editorial reviews bao gồm việc sửa lỗi soạn thảo, chính tả, ngữ pháp, cách dùng từ, hoặc một số lỗi liên quan đến câu chữ trong bài viết. Không cần phải là nhà báo lão luyện cũng có thể đóng góp tài liệu kĩ thuật có giá trị MDN, nhưng các bài viết vẫn cần copy-editing (sửa giọng văn) và proof-reading (đọc soát lỗi, hiệu đính). Những việc này có thể làm trong editorial review.

- -

Bài viết này mô tả cách để editorial review, nhằm cải thiện độ chính xác và dễ đọc cho nội dung trên MDN.

- -
-
Công việc là gì?
-
Copy-editing và proof-reading các bài viết được đánh dấu cần editorial review.
-
Làm việc đó ở đâu?
-
Within specific articles that are marked as requiring an editorial review.
-
Bạn cần gì để làm được việc?
-
Bạn cần phải thành thạo ngữ pháp tiếng Anh và vốn từ dồi dào. ?Editorial review là để bảo đảm rằng ngữ pháp, vốn từ, và câu chữ đúng đắn và có nghĩa, và phải tuân thủ theo MDN writing style guide.
-
Các bước thực hiện:
-
-
    -
  1. Kiếm bài viết để review: -
      -
    1. Nhấp vào các bài viết cần editorial review. Trang này hiển thị ra một danh sách những bài viết cần editorial review.
      2. -
    2. Nhấp vào đường dẫn đến bài viết nhất định.
      - Chú ý: Danh sách này được sinh tự động nhưng không thường xuyên, thế nên có vài bài viết vẫn xuất hiện trong danh sách nhưng không cần editorial review nữa. Nếu bài viết bạn chọn không hiện thông báo "This article needs an editorial review", hãy lướt qua bài viết đó và chọn một bài viết khác.
      3. -
    -
    2. -
  2. Đọc bài viết thật kĩ, tìm các lỗi đánh máy, lỗi chính tả, ngữ pháp, hoặc cách dùng từ. Đừng do dự chuyển sang bài khác nếu bài bạn thấy không hợp với bài vừa chọn.
    3. -
  3. Nếu không có lỗi nào, bạn không cần phải chỉnh sửa nữa. Hãy tìm hộp thoại "quick review" ở thanh bên trái của trang:
    - Screenshot of the editorial review request sidebar box
    4. -
  4. Bỏ chọn ô Editorial và bấm vào Save.
    5. -
  5. Nếu bạn thấy có lỗi cần phải sửa: -
      -
    1. Bấm vào nút Edit ở gần đầu trang; nó sẽ đưa bạn tới trình chính sửa MDN.
      2. -
    2. Sửa tất cả các lỗi đánh máy, chính tả, ngữ pháp và lỗi dùng từ mà bạn tìm thấy. Bạn không cần phải sửa tất cả, nhưng hãy đảm bảo rằng mục editorial review vẫn được chọn nếu bạn thấy không đủ khả năng để sửa trọn vẹn toàn trang.
      3. -
    3. Điền vào mục Revision Comment ở cuối bài viết; như là 'Biên tập: sửa lỗi đánh máy, ngữ pháp và chính tả.' Cái này giúp cho các người đóng góp khác và trình biên soạn của trang biết bạn đã làm gì và lý do bạn làm vậy.
      4. -
    4. Bỏ chọn mục Editorial ở dưới Review Needed?. ?Cái này nằm ngay dưới phần Revision Comment trong trang.
      5. -
    5. Nhấn nút Publish.
      6. -
    -
    6. -
- -
-

?Chỉnh sửa của bạn có thể không hiện ra ngay tức thì sau khi đã lưu lại; thường sẽ bị trễ do trang cần có thời gian sẽ xử lý.

-
-
-
diff --git "a/files/vi/orphaned/b\341\272\243n_k\303\252_khai_c\303\240i_\304\221\341\272\267t/index.html" "b/files/vi/orphaned/b\341\272\243n_k\303\252_khai_c\303\240i_\304\221\341\272\267t/index.html" new file mode 100644 index 0000000000..e7b696b80f --- /dev/null +++ "b/files/vi/orphaned/b\341\272\243n_k\303\252_khai_c\303\240i_\304\221\341\272\267t/index.html" @@ -0,0 +1,303 @@ +--- +title: Bản Kê Khai Cài Đặt +slug: Bản_Kê_Khai_Cài_Đặt +--- +

Giới Thiệu

+

Một Bản Kê Khai Cài Đặt (Install Manifest) là một tập tin mà một ứng dụng XUL - được bật mở trình Quản lý Tiện ích - sử dụng để xác định các thông tin về tiện ích khi nó được cài đặt. Nó chứa các siêu dữ liệu (metadata) để nhận diện tiện ích, cung cấp thông tin về người đã tạo ra nó, nơi mà các thông thêm về nó có thể được tìm thấy, các phiên bản nào của ứng dụng nào mà nó tương thích, làm sao để nó luôn được cập nhật, và nhiều thứ khác.

+

Định dạng của Bản Kê Khai Cài Đặt là RDF/XML.

+

Tập tin này phải được đặt tên là install.rdf và luôn có ở cấp cao nhất trong tập tin XPI của tiện ích.

+

Bố Cục

+

Bố cục cơ bản của một Bản Kê Khai Cài Đặt tương tự như sau:

+
<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+  <Description about="urn:mozilla:install-manifest">
+    <!-- các thuộc tính -->
+  </Description>
+</RDF>
+
+

Một số thuộc tính là bắt buộc, số khác là tùy chọn. Một số cái chỉ có giá trị chuỗi đơn giản, số khác lại là tài nguyên phức tạp.

+

Các Thuộc Tính Bắt Buộc

+

Bản Kê Khai Cài Đặt phải đặc tả những thuộc tính này một cách chính xác nếu không tiện ích của bạn có lẽ sẽ không được cài.

+

id

+

Định danh (id) của phần mở rộng, nó là một:

+ +

The latter format is significantly easier to generate and manipulate. Firefox 1.5 has checking to ensure that your id falls into one format or the other and will refuse to install addons that have malformed ids.

+

Examples

+
<em:id>myextension@mysite.com</em:id>
+
+<em:id>{daf44bf7-a45e-4450-979c-91cf07434c3d}</em:id>
+

version

+

A version string identifying the version of the addon being supplied.

+

For Firefox/Thunderbird 1.0, the format must conform to the rules specified in Extension Versioning, Update and Compatibility. For Firefox/Thunderbird 1.5, see Toolkit version format.

+

Examples

+
<em:version>2.0</em:version>
+
+<em:version>1.0.2</em:version>
+
+<em:version>0.4.1.2005090112</em:version>
+

Firefox 1.5 / XULRunner 1.8 - addons that do not use a valid version format will not be installed. The version format is different from, although backwards-compatible with, 1.0's.

+

For addons hosted on addons.mozilla.org - Mozilla's update website may repackage your addon and correct or reject malformed version strings.

+

type

+

An integer value representing the type of addon.

+ + + + + + + + + + + + + + + + + + + +
2Extensions
4Themes
8Locale
32Multiple Item Package
+

Examples

+
<em:type>2</em:type>
+

{{ Fx_minversion_inline(1.5) }} This property was added for Firefox 1.5, and is only required for addon types other than Extensions and Themes.

+

{{ Fx_minversion_inline(3) }} Firefox 2 and previous supported a value of 16 to represent plug-ins. In Firefox 3 this has been removed.

+

targetApplication

+

An object specifying an application targeted by this addon. This means that the addon will work with the application identified by the id property (<em:id>) specified (for a comprehensive list of application IDs and valid min/maxVersions for them see Valid application versions for add-on developers), from the minimum version (<em:minVersion>) up to and including the maximum version (<em:maxVersion>). These version strings are formatted in the same fashion as the version property and will be compared to the application version; this allows the extension author to specify which versions of Firefox an extension has been tested with.

+
+ Extensions compatible with Firefox 3.5 should specify a maxVersion of 3.5.*, so that they are automatically compatible with security and stability updates. For Firefox 3.0, a maxVersion of 3.0.* should be used. Extensions compatible only with Firefox or Thunderbird 2 should specify a maxVersion of 2.0.0.*.
+

The Install Manifest must specify at least one of these objects, and may specify more if the addon targets multiple applications that support the Add-on Manager (e.g. Firefox and Thunderbird)

+

Examples

+
<em:targetApplication>
+ <Description>
+  <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> Firefox
+  <em:minVersion>1.5</em:minVersion>
+  <em:maxVersion>3.0.*</em:maxVersion>
+ </Description>
+</em:targetApplication>
+
+

{{ Fx_minversion_inline(3) }} Gecko 1.9 based applications allow you to use the special targetApplication id toolkit@mozilla.org to say that the add-on is compatible with any toolkit app with a toolkit version matching the minVersion and maxVersion.

+

name

+

The name of the add-on; intended for display in the UI.

+

Examples

+
<em:name>My Extension</em:name>
+

Optional Property Reference

+

You may need to supply these properties, depending on the capabilities of your add-on.

+

localized

+

{{ Fx_minversion_inline(3) }} Allows you to localize the add-on's name, description, contributors and other metadata. The localized description must specify at least one em:locale which indicates which locales to use this information for.

+

Examples

+

This declares a set of add-on metadata to be displayed when the application is running in the de-DE locale.

+
<em:localized>
+  <Description>
+    <em:locale>de-DE</em:locale>
+    <em:name>Tab Sidebar</em:name>
+    <em:description>Zeigt in einer Sidebar Vorschaubilder der Inhalte aller offenen Tabs an.</em:description>
+  </Description>
+</em:localized>
+
+

The following properties which are described elsewhere in this page can be included in the localized property:

+ +

More documentation can be found at Localizing extension descriptions.

+

description

+

A short description of the add-on - intended for display in the user interface. This description should fit on one short line of text.

+

Examples

+
<em:description>Advanced foo tools.</em:description>
+
+

creator

+

The name of the creator/principal developer - intended for display in the user interface.

+

Examples

+
<em:creator>John Doe</em:creator>
+
+

or

+
<em:creator>CoolExtension Team</em:creator>
+
+

developer

+

{{ Fx_minversion_inline(2) }} The name(s) of co-developers. You may specify more than one of this value to specify multiple developers.

+

Examples

+
<em:developer>Jane Doe</em:developer>
+<em:developer>Koos van der Merwe</em:developer>
+
+

translator

+

{{ Fx_minversion_inline(2) }} The name(s) of translators. You may specify more than one of this value to specify multiple translators.

+

Examples

+
<em:translator>Janez Novak</em:translator>
+<em:translator>Kari Nordmann</em:translator>
+
+

contributor

+

The name(s) of additional contributors. You may specify more than one of this value to specify multiple contributors.

+

Examples

+
<em:contributor>John Doe</em:contributor>
+
+<em:contributor>John Doe</em:contributor>
+<em:contributor>Jane Doe</em:contributor>
+<em:contributor>Elvis Presley</em:contributor>
+
+

homepageURL

+

A link to the addon's home page - intended for display in the user interface.

+

Examples

+
<em:homepageURL>http://www.foo.com/</em:homepageURL>
+
+

updateURL

+

A link to a custom Update Manifest file that specifies available updates to the addon. The format is described below. If enabled, the addon manager periodically checks with this Manifest file to determine if newer versions are available.

+
+ Note: It is strongly recommended that the updateURL be an HTTPS (secure) link. Non-secure update URLs can be hijacked by a malicious update.rdf file, enabling malware to infiltrate the user's computer. Alternatively, you could host your extension on AMO and leave out the updateURL completely. This provides secure updates automatically.
+

{{ Fx_minversion_inline(3) }} For security reasons, Gecko 1.9 applications require that if you specify an updateURL, it must be an https URL, or you must include an updateKey.

+

Your server must send this file as text/rdf, text/xml or application/xml+rdf or the update checker may not work.

+

The addon manager will substitute the following values into this URL in case you wish to generate the response RDF dynamically, such as using PHP or CGI:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
%REQ_VERSION%The version of the request. Currently 1
%ITEM_ID%The id of the addon being updated
%ITEM_VERSION%The version of the addon being updated
%ITEM_MAXAPPVERSION%The maxVersion of the targetApplication object corresponding to the current application for the addon being updated.
%ITEM_STATUS%{{ Fx_minversion_inline(2) }} Comma separated list of the add-ons operating status in the application. Contains at the least either userEnabled or userDisabled plus any number of incompatible, blockslisted or needsDependencies.
%APP_ID%The id of the current application
%APP_VERSION%The version of the application to check for updates for
%CURRENT_APP_VERSION%{{ Fx_minversion_inline(3.5) }} The version of the current application
%APP_OS%{{ Fx_minversion_inline(1.5) }} The value of OS_TARGET from the Firefox build system, identifying the operating system being used.
%APP_ABI%{{ Fx_minversion_inline(1.5) }} The value of the TARGET_XPCOM_ABI value from the Firefox build system, identifying the compiler/architecture combination used to compile the current application.
%APP_LOCALE%{{ Fx_minversion_inline(3) }} The current application's locale.
+

Examples

+
<em:updateURL>http://www.foo.com/update.cgi?id=%ITEM_ID%&amp;version=%ITEM_VERSION%</em:updateURL>
+<em:updateURL>http://www.foo.com/extension/windows.rdf</em:updateURL>
+
+

For addons hosted on addons.mozilla.org: You may not specify an updateURL property. By default, Mozilla applications using the Addon Manager (such as Firefox and Thunderbird) will send update requests to addons.mozilla.org using the default web service. Every time you upload a new version of your addon or change its compatibility parameters through the author interface, your update manifest will be generated automatically. Addons currently marked as experimental will not be updated due to security concerns.

+

Format of the Update Manifest: The Update Manifest is a RDF/XML datasource. For examples of an update manifest, see Extension Versioning, Update and Compatibility and Enabling Extension Updates (external).

+

updateKey

+

{{ Gecko_minversion_header(1.9) }} {{ Fx_minversion_header(3) }}

+

To ensure the security of update rdf data that is retrieved over plain http you must use a digital signature to verify the contents of the data. In order to do so you must include the public part of the cryptographic key in an updateKey entry in the install.rdf of the add-on. This can be generated using the McCoy tool. Any line breaks and whitespace as part of this entry are ignored.

+

Examples

+
 <em:updateKey>MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDK426erD/H3XtsjvaB5+PJqbhj
+               Zc9EDI5OCJS8R3FIObJ9ZHJK1TXeaE7JWqt9WUmBWTEFvwS+FI9vWu8058N9CHhD
+               NyeP6i4LuUYjTURnn7Yw/IgzyIJ2oKsYa32RuxAyteqAWqPT/J63wBixIeCxmysf
+               awB/zH4KaPiY3vnrzQIDAQAB</em:updateKey>
+
+

optionsURL

+

The chrome:// URL of the extension's options dialog box. This is only useful to extensions. If this property is specified, when the extension is selected in the Extensions list, the Options button is enabled and will show this.

+

Examples

+
<em:optionsURL>chrome://myext/content/options.xul</em:optionsURL>
+
+

aboutURL

+

Thechrome:// URL of the extension's about dialog box. This is only useful to extensions. If this property is specified, when the extension is selected in the Extensions list, the About... link in the extension's context menu will show this dialog, rather than the default.

+

Examples

+
<em:aboutURL>chrome://myext/content/about.xul</em:aboutURL>
+
+

iconURL

+

A chrome:// URL to a 32x32 icon to display in the add-ons list. If this property is not specified, a default icon is used.

+
<em:iconURL>chrome://myext/skin/icon.png</em:iconURL>
+
+ Note: For the above example to work you will also have to add a skin package line to your chrome.manifest file. See Chrome Registration#skin. Alternatively you can place your icon in the directory specified in your content package line.
+

{{ gecko_minversion_note("1.9.2", "Starting in Gecko 1.9.2 (Firefox 3.6), you can also simply include your icon, named icon.png, in the base directory of the add-on. This allows your add-on's icon to be displayed even when the add-on is disabled, or if the manifest is missing an iconURL entry.") }}

+

targetPlatform

+

{{ Fx_minversion_inline(1.5) }} A string specifying a platform that the addon supports. It contains either the value of OS_TARGET alone or combined with TARGET_XPCOM_ABI, separated by an underscore (_).

+

You can specify multiple targetPlatform properties per manifest. If any value matches the application's build parameters, it will be installed; if not, the user will get an appropriate error message.

+

Examples

+
<em:targetPlatform>WINNT_x86-msvc</em:targetPlatform>
+
+<em:targetPlatform>Linux</em:targetPlatform>
+
+<em:targetPlatform>Darwin_ppc-gcc3</em:targetPlatform>
+
+<em:targetPlatform>SunOS_sparc-sunc</em:targetPlatform>
+
+

Usually, you would use only the OS part for themes or for extensions that are not fully cross-platform. For extensions including binary (compiled) components, you should never use the OS alone, but include the ABI (s) that you compiled the components with. If you want to include multiple versions of the components, you should also use Platform-specific Subdirectories.

+

Notes

+ +

This property was added for Firefox/Thunderbird 1.5. Previous versions of these applications will ignore the restrictions and install the addon regardless of the platform.

+

requires

+

{{ Fx_minversion_inline(2) }} This tag has a similar syntax to the <em:targetApplication> tag. If the add-on specified by the <em:id> tag is not installed or has an incompatible version, the extension manager will disable your extension and show the message "Requires additional items". You can add as many <em:requires> tags as you like. Your extension will be disabled if any of the specified requirements fail.

+

Example

+
<em:requires>
+   <Description>
+     <!-- Lightning -->
+     <em:id>{e2fda1a4-762b-4020-b5ad-a41df1933103}</em:id>
+     <em:minVersion>0.5pre</em:minVersion>
+     <em:maxVersion>0.5pre</em:maxVersion>
+   </Description>
+ </em:requires>
+
+

Notes

+ +

This property was added for Firefox/Thunderbird 2. Previous versions of these applications will ignore the restrictions and install the add-on regardless of the requirements.

+

Obsolete Property Reference

+

These properties were required in older versions of the Addon Manager, but have been replaced with newer and better mechanisms.

+

file

+

Firefox 1.0 This property pointed to a chrome .jar file that contains chrome packages that require registration with the Chrome Registry.

+

The <em:file> property has a complex object value. The uri of the value is urn:mozilla:extension:file:jarFile.jar where jarFile.jar is the name of the jar file that contains the chrome package's files. This could also be the name of a directory that contains the chrome package's files, un-jarred (e.g. urn:mozilla:extension:file:directory). In either case, the referenced chrome package file(s) must be placed in the chrome subdirectory of the XPI's top level.

+

This object has a package property (with a path within the jar file or directory that leads to the location where the contents.rdf file responsible for registering that package is located), a locale property (ditto, but to register the locale) and a skin property (ditto, but to register the theme material).

+

In extensions for Firefox 1.5, this property is no longer necessary: the chrome.manifest at the top level of the XPI is used to locate chrome to register. If there is no chrome.manifest, this property is still read by the Addon Manager and a chrome.manifest is generated from old-style contents.rdf.

+

Examples

+
<em:file>
+ <Description about="urn:mozilla:extension:file:myext.jar">
+  <em:package>content/myext/</em:package>
+  <em:locale>locale/en-US/myext/</em:locale>
+  <em:skin>skin/classic/myext/<em:skin>
+ </Description>
+</em:file>
+
+

An Install Manifest may specify multiple file properties, one for each jar file or subdirectory that contains chrome to register.

+

hidden

+

Firefox 1.0 - 3.5 A boolean value that when true makes the add-on not show up in the add-ons list, provided the add-on is installed in a {{ Anch("restricted access area") }} (so it does not work for add-ons installed in the profile). This is for bundling integration hooks to larger applications where having an entry in the Extensions list does not make sense.

+
+ Note: This property is no longer supported under Gecko 1.9.2 (Firefox 3.6) or later, to prevent extensions from being installed in such a way that the user might not be able to tell they're installed.
+

Examples

+
<em:hidden>true</em:hidden>
+

Glossary

+

restricted access area

+

A restricted access area is an install location that could be restricted on a restricted-access account, regardless of whether or not the location is restricted with the current user privileges (see {{ Source("toolkit/mozapps/extensions/public/nsIExtensionManager.idl#80", "nsIInstallLocation::restricted") }}). Currently, the ($APPDIR)/extensions folder and the registry install location under HKEY_LOCAL_MACHINE (see Adding Extensions using the Windows Registry for details) are restricted.

+

The ($PROFILE)/extensions and HKEY_CURRENT_USER install locations, on the other hand, are not restricted.

diff --git a/files/vi/orphaned/dom_inspector/index.html b/files/vi/orphaned/dom_inspector/index.html new file mode 100644 index 0000000000..ec9b4e0dbb --- /dev/null +++ b/files/vi/orphaned/dom_inspector/index.html @@ -0,0 +1,5 @@ +--- +title: DOM Inspector +slug: DOM_Inspector +--- +

DOM Inspector (viết tắt là DOMi) là bộ công cụ dùng để kiểm tra, duyệt và chỉnh sửa  Document Object Model - dùng trong các trang web hoặc cửa sổ XUL. Hệ thống phân cấp DOM có thể điều hướng qua lại 2 cửa sổ cho phép xem tài liệu và các nút.

diff --git a/files/vi/orphaned/labs-tab/index.html b/files/vi/orphaned/labs-tab/index.html new file mode 100644 index 0000000000..6cedf8e2d3 --- /dev/null +++ b/files/vi/orphaned/labs-tab/index.html @@ -0,0 +1,6 @@ +--- +title: Labs-tab +slug: Labs-tab +--- +

Quan tâm đến việc định hình tương lai của Web?

Mozilla Labs là một phòng thí nghiệm ảo, nơi bạn có thể tham gia với chúng tôi để tạo ra, thử nghiệm, xây dựng và
sử dụng những cải tiến và công nghệ Web mới. Đóng góp của cộng đồng chúng tôi có sự đa dạng về nguồn gốc, nhưng chia sẻ tất cả các lợi ích chung trong việc trải nghiệm Web.

Để bắt đầu, hãy tìm hiểu về các dự án của chúng tôi và sau đó góp phần vào dự án bằng cách tham gia những thảo luận với chúng tôi, thử nghiệm những thiết kế mới, khai thác mã nguồn hoặc gửi phản hồi về sản phẩm.

+



Theo dõi những thông tin mới nhất về các dự án của chúng tôi trên Twitter tại @mozlabs.

diff --git a/files/vi/orphaned/learn/how_to_contribute/index.html b/files/vi/orphaned/learn/how_to_contribute/index.html new file mode 100644 index 0000000000..ca0f73fbc1 --- /dev/null +++ b/files/vi/orphaned/learn/how_to_contribute/index.html @@ -0,0 +1,83 @@ +--- +title: Cách đóng góp cho Khu vực học tập trên MDN +slug: Learn/Dong_gop_cho_khu_vuc_hoc_tap_tren_MDN +translation_of: Learn/How_to_contribute +--- +
{{LearnSidebar}}
+ +

Nếu bạn đang ở đây lần đầu tiên hoặc sau khi tìm kiếm sâu, có thể là vì bạn quan tâm đến việc đóng góp cho Khu vực học tập MDN. Tin tốt đấy!

+ +

Trên trang này, bạn sẽ tìm thấy mọi thứ bạn cần để bắt đầu giúp cải thiện nội dung học tập của MDN. Có rất nhiều thứ bạn có thể làm, tùy thuộc vào bạn có bao nhiêu thời gian và bạn là người mới bắt đầu, nhà phát triển web hoặc giáo viên.

+ +
+

Lưu ý: Bạn có thể tìm thấy hướng dẫn để viết bài viết về khu vực học tập mới tại Cách viết bài viết để giúp mọi người tìm hiểu về Web.

+
+ +

Tìm các tác vụ cụ thể

+ +

A common way that people contribute to the Learning Area is to read the articles, fix typos, and suggest improvements. We also welcome you to add examples to our GitHub repo, and get in touch with us if you want to ask what else needs to be done.

+ +

Contributing is a great way to have some fun while learning new stuff. If you ever feel lost or have questions, don't hesitate to reach us on the Learning Area Discourse thread or IRC channel (see at the bottom of this page for details). Chris Mills is the topic driver for the Learning Area — you could also try pinging him directly.

+ +

The following sections provide some general ideas of the types of tasks you can do.

+ +

I'm a beginner

+ +

That's awesome! Beginners are very important and valuable for creating and giving feedback on learning material. You have a unique perspective on these articles as a member of their target audience, which can make you an invaluable member of our team. Indeed, if you're using one of our articles to learn something and you get stuck, or find the article confusing in some way, you can either fix it or let us know about the problem so we can be sure it gets fixed.

+ +

Here are some suggested ways you can contribute:

+ +
+
Add tags to our articles (5 min)
+
Tagging MDN content is one of the easiest ways to contribute to MDN. As many of our features use tags to help present information in context, helping with tagging is a very valuable contribution. Take a look at the lists of glossary entries and learning articles without any tags to get started.
+
Read and review a glossary entry (5 min)
+
As a beginner, we need your fresh eyes looking at our content. If you find a glossary entry hard to understand, it means that entry needs to be improved. Feel free to make any changes you think are necessary. If you do not think you have the proper skill to edit the entry yourself, at least tell us on our mailing list.
+
Write a new glossary entry (20 minutes)
+
This is the most effective way to learn something new. Pick a concept you want to understand, and as you learn about it, write a glossary entry about it. Explaining something to others is a great way to "cement" the knowledge in your brain, and to help you make sense of things yourself, all while helping other people. Everybody wins!
+
Read and review a learning article (2 hours)
+
This is very much like reviewing glossary entries (see above); it just takes more time, since these articles are typically quite a bit longer.
+
+ +

I'm a web developer

+ +

Fantastic! Your technical skills are just what we need to be sure we provide technically accurate content for beginners. As this specific part of MDN is dedicated to learning the Web, be sure your explanations are as simple as possible, without being so simple that they're not useful. It's more important to be understandable than to be overly precise.

+ +
+
Read and review a glossary entry (5 min)
+
As a web developer, we need you to make sure our content is technically accurate without being too pedantic. Feel free to make any changes you think are necessary. If you want to discuss the content before editing, ping us on our mailing list or IRC channel.
+
Write a new glossary entry (20 minutes)
+
Clarifying technical jargon is a very good way to learn and be both technically accurate and simple. Beginners will thank you for that. We have many undefined terms which need your attention. Pick one and you're good to go.
+
Read and review a learning article (2 hours)
+
This is the same thing as reviewing a glossary entry (see above); it just takes a bit more time as those articles are quite a bit longer.
+
Write a new learning article (4 hours or more)
+
MDN is lacking simple straightforward articles about using web technologies (HTML, CSS, JavaScript, etc). We also have old content on MDN that deserves to be reviewed and reshaped. Push your skills to the limit to make web technologies usable even by beginners.
+
Create exercises, code samples or interactive learning tools (? hours)
+
All our learning articles require what we call "active learning" materials, because people learn best by doing something themselves. Such materials are exercises or interactive content that help a user to apply and manipulate the concepts detailed in an article. There are many possible ways to make active learning content, from creating code samples with JSFiddle or similar, to building fully hackable interactive content with Thimble. Unleash your creativity!
+
+ +

I'm a teacher

+ +

MDN has a long history of technical excellence, but we lack depth of understanding of the best way to teach concepts to newcomers. This is where we need you, as a teacher or educator. You can help us ensure that our materials provide a good, practical educational track for our readers.

+ +
+
Read and review a glossary entry (15 min)
+
Check out a glossary entry and feel free to make any changes you think are necessary. If you want to discuss the content before editing, ping us on our mailing list or IRC channel.
+
Write a new glossary entry (1 hour)
+
Clear, simple definitions of terms and basic overviews of concepts in the glossary are critical in meeting beginners' needs. Your experience as an educator can help create excellent glossary entries; we have many undefined terms which need your attention. Pick one and go for it.
+
Add illustrations and/or schematics to articles (1 hour)
+
As you might know, illustrations are an invaluable part of any learning content. This is something we often lack on MDN and your skills can make a difference in that area. Check out the articles that lack illustrative content and pick one you'd like to create graphics for.
+
Read and review a learning article (2 hours)
+
This is similar to reviewing glossary entries (see above), but it requires more time since the articles are typically quite a bit longer.
+
Write a new learning article (4 hours)
+
We need simple, straightforward articles about the Web ecosystem and other functional topics around it. Since these learning articles need to be educational rather than trying to literally cover everything there is to know, your experience in knowing what to cover and how will be a great asset.
+
Create exercises, quizzes or interactive learning tools (? hours)
+
All our learning articles require "active learning" materials. Such materials are exercises or interactive content which help a user learn to use and expand upon the concepts detailed in an article. There are lots of things you can do here, from creating quizzes to building fully hackable interactive content with Thimble. Unleash your creativity!
+
Create learning pathways (? hours)
+
In order to provide progressive and comprehensible tutorials, we need to shape our content into pathways. It's a way to gather existing content and figure out what is missing to create a learning article to write.
+
+ +

See also

+ + diff --git a/files/vi/orphaned/mdn/community/index.html b/files/vi/orphaned/mdn/community/index.html new file mode 100644 index 0000000000..0242f58382 --- /dev/null +++ b/files/vi/orphaned/mdn/community/index.html @@ -0,0 +1,55 @@ +--- +title: Tham gia cộng đồng MDN +slug: MDN/Community +tags: + - Hướng dẫn + - MDN + - cộng đồng + - thông tin MDN + - trang chính +translation_of: MDN/Community +--- +
{{MDNSidebar}}
+ +

Tổng quát

+ +
+

MDN (viết tắt của Mozilla Developer Network) không chỉ là một thư viện: Đó là một cộng đồng mà các nhà phát triển làm việc cùng nhau, để giúp MDN trở thành một nguồn tài nguyên tuyệt vời cho các nhà phát triển sử dụng các công nghệ Web mở.

+
+ +

Sẽ thật tuyệt nếu bạn đóng góp cho MDN, nhưng còn tuyệt hơn nữa nếu bạn tham gia vào cộng đồng MDN. Dưới đây là ba bước đơn giản để cùng kết nối:

+ +
    +
  1. Tạo một tài khoản MDN.
    2. +
  2. Tham gia các cuộc thảo luận.
    3. +
  3. Theo dõi những gì đang diễn ra.
    4. +
+ +

Hoạt động của cộng đồng

+ +

Dưới đây là những bài viết cung cấp thêm thông tin cho bạn về cộng đồng MDN.

+ +
+
+
+
Các vị trí đặc biệt trong cộng đồng
+
Cộng đồng có một số người có những vị trí đặc biệt, những người này có những trách nhiệm cụ thể.
+
Viết tài liệu
+
Đây là hướng dẫn để tổ chức các sự kiện viết tài liệu. Trong đó có chứa các lời khuyên và hướng dẫn từ những người từng tổ chức các sự kiện viết tài liệu, để giúp bạn cũng có thể tổ chức.
+
Theo dõi những gì đang diễn ra
+
MDN được mang đến cho bạn nhờ cộng đồng Mozilla Developer Network. Đây là một số cách mà chúng tôi chia sẻ những thông tin về những gì chúng tôi đang thực hiện.
+
+ +
+
+
+ +
+
+
Thảo luận trên MDN
+
Tính "làm việc" của MDN diễn ra trên MDN, nhưng tính "cộng đồng" cũng xảy ra thông qua việc thảo luận và nói chuyện trực tuyến hay gặp gỡ trực tiếp.
+
Hoạt động trong cộng đồng
+
Một phần quan trong trong việc đóng góp cho các tài liệu của MDN, dù ở mức độ nào, đó là biết được cách để hoạt động trong cộng đồng MDN. Bài viết này có các hướng dẫn giúp bạn các những tương tác tốt nhất với cả những người viết bài khác cũng như các nhóm phát triển.
+
+
+
diff --git a/files/vi/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/vi/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html new file mode 100644 index 0000000000..796e7df30b --- /dev/null +++ b/files/vi/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html @@ -0,0 +1,38 @@ +--- +title: How to create an MDN account +slug: MDN/Contribute/Howto/Create_an_MDN_account +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +
{{MDNSidebar}}
+ +

Để chỉnh sửa nội dung trên MDN, bạn cần có hồ sơ MDN. Bạn không cần một hồ sơ nếu bạn chỉ muốn đọc và tìm kiếm các tài liệu MDN. Hướng dẫn này sẽ giúp bạn thiết lập hồ sơ MDN của bạn.

+ +
+
Tại sao MDN cần địa chỉ email của tôi?
+
+Địa chỉ email của bạn được sử dụng để khôi phục tài khoản và, nếu cần, bởi các quản trị viên MDN để liên hệ với bạn về tài khoản hoặc hoạt động của bạn trên trang web.
+
+Ngoài ra, bạn có thể đăng ký thông báo (chẳng hạn như khi các trang cụ thể được thay đổi ) và tin nhắn (ví dụ: nếu bạn chọn tham gia nhóm thử nghiệm beta của chúng tôi, bạn có thể nhận được email về các tính năng mới cần thử nghiệm).
+
+Địa chỉ email của bạn không bao giờ được hiển thị trên MDN và sẽ chỉ được sử dụng theo chính sách bảo mật của chúng tôi .
+ +
Nếu bạn đăng nhập vào MDN qua GitHub và bạn sử dụng địa chỉ email "noreply" trên GitHub, bạn sẽ không nhận được tin nhắn (bao gồm cả thông báo khi bạn đăng ký trang) từ MDN.
+
+
+ +
    +
  1. Ở đầu mỗi trang trên MDN, bạn sẽ tìm thấy một nút có nhãn Đăng nhập . Trỏ chuột vào đây (hoặc chạm vào nó, nếu bạn đang sử dụng thiết bị di động) để hiển thị danh sách các dịch vụ xác thực mà chúng tôi hỗ trợ để đăng nhập vào MDN.
    2. +
  2. Chọn một dịch vụ để đăng nhập. Hiện tại, chỉ có GitHub có sẵn. Lưu ý rằng nếu bạn chọn GitHub, một liên kết đến hồ sơ GitHub của bạn sẽ được đưa vào trang hồ sơ MDN công khai của bạn.
    3. +
  3. Làm theo lời nhắc của GitHub để kết nối tài khoản của bạn với MDN.
    4. +
  4. Khi dịch vụ xác thực đưa bạn trở lại MDN, bạn sẽ được nhắc nhập tên người dùng và địa chỉ email. Tên người dùng của bạn sẽ được hiển thị công khai để ghi có cho bạn cho công việc bạn đã thực hiện. Không sử dụng địa chỉ email của bạn làm tên người dùng của bạn .
    5. +
  5. Nhấp vào Tạo hồ sơ MDN của tôi .
    6. +
  6. Nếu địa chỉ email bạn đã chỉ định trong bước 4 không giống với địa chỉ bạn sử dụng với dịch vụ xác thực, vui lòng kiểm tra email của bạn và nhấp vào liên kết trong email xác nhận chúng tôi gửi cho bạn.
    7. +
+ +

Đó là nó! Bạn đã có tài khoản MDN và bạn có thể chỉnh sửa trang ngay lập tức!

+ +

Bạn có thể nhấp vào tên của bạn ở đầu bất kỳ trang MDN nào để xem hồ sơ công khai của bạn. Từ đó, bạn có thể nhấp vào Chỉnh sửa để thực hiện thay đổi hoặc bổ sung vào hồ sơ của mình.

+ +
+

Tên người dùng mới không thể chứa dấu cách hoặc ký tự "@". Hãy nhớ rằng tên người dùng của bạn sẽ được hiển thị công khai để xác định công việc bạn đã thực hiện.

+
diff --git a/files/vi/orphaned/mdn/contribute/howto/do_a_technical_review/index.html b/files/vi/orphaned/mdn/contribute/howto/do_a_technical_review/index.html new file mode 100644 index 0000000000..61e3c1cda5 --- /dev/null +++ b/files/vi/orphaned/mdn/contribute/howto/do_a_technical_review/index.html @@ -0,0 +1,51 @@ +--- +title: How to do a technical review +slug: MDN/Contribute/Howto/Do_a_technical_review +translation_of: MDN/Contribute/Howto/Do_a_technical_review +--- +
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

A Technical review consists of reviewing the technical accuracy and completeness of an article and correcting it if necessary. If a writer of an article wants someone else to check the technical content of an article, the writer ticks the "Technical review" checkbox while editing. Often the writer contacts a specific engineer to perform the technical review, but anyone with technical expertise in the topic can do one.

+ +

This article describes how to perform a technical review, thereby helping to ensure that MDN's content is accurate.

+ +
+
What is the task?
+
Reviewing and correcting the articles for technical accuracy and completeness.
+
Where does it need to be done?
+
In specific articles that are marked as requiring a technical review.
+
What do you need to know to do the task?
+
+
    +
  • Expert knowledge of the topic of the article you are reviewing. If reading the article doesn't teach you anything significantly new, consider yourself an expert.
    • +
  • How to edit a wiki article on MDN.
    • +
+
+
What are the steps to do it?
+
+
    +
  1. Pick an article to review: +
      +
    1. Go to the list of pages that need technical reviews. This lists all the pages for which a technical review has been requested.
      2. +
    2. Choose a page whose topic you are very familiar with.
      3. +
    3. Click on the article link to load the page.
      4. +
    +
    2. +
  2. Read the article, paying close attention to technical details: Is the article correct? Is there anything missing? Don't hesitate to switch to a different page if the first one you choose doesn't suit you.
    3. +
  3. If there are no errors, you don't need to edit the article to mark it as reviewed. Look for the "quick review" box in the left sidebar of the page. This yellow box lists any pending reviews and lets you clear their review request flag. It looks like this if a technical review has been requested:
    + Screenshot of the sidebar's box listing reviews that have been requested and allowing the flags to be changed.
    4. +
  4. Deselect the Technical checkbox, and click Save.
    5. +
  5. If you find errors that need to be corrected, you'll be glad to know that you can also change the review request status from within the editor. Here's the workflow: +
      +
    1. To edit the page, click the Edit button near the top of the page; this puts you into the MDN editor.
      2. +
    2. Fix any technical information is not correct, and/or add any important information that is missing.
      3. +
    3. Enter a Revision Comment at the bottom of the article. This is a brief message that describes what you did, like 'Technical review completed.' If you corrected information, include that in your comment, for example 'Technical review and fixed parameter descriptions.' This helps other contributors and site editors know what you changed and why. You can also mention if there were specific bits that you didn't feel qualified to review.
      4. +
    4. Deselect the Technical box under Review Needed? just below the Revision Comment area of the page.
      5. +
    5. Click the PUBLISH button.
      6. +
    +
    6. +
+ +

Congratulations! You've finished your first technical review! Thank you for your help!

+
+
diff --git a/files/vi/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/vi/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html new file mode 100644 index 0000000000..23410f87e7 --- /dev/null +++ b/files/vi/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html @@ -0,0 +1,48 @@ +--- +title: How to do an editorial review +slug: MDN/Contribute/Howto/Do_an_editorial_review +translation_of: MDN/Contribute/Howto/Do_an_editorial_review +--- +
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

Editorial reviews bao gồm việc sửa lỗi soạn thảo, chính tả, ngữ pháp, cách dùng từ, hoặc một số lỗi liên quan đến câu chữ trong bài viết. Không cần phải là nhà báo lão luyện cũng có thể đóng góp tài liệu kĩ thuật có giá trị MDN, nhưng các bài viết vẫn cần copy-editing (sửa giọng văn) và proof-reading (đọc soát lỗi, hiệu đính). Những việc này có thể làm trong editorial review.

+ +

Bài viết này mô tả cách để editorial review, nhằm cải thiện độ chính xác và dễ đọc cho nội dung trên MDN.

+ +
+
Công việc là gì?
+
Copy-editing và proof-reading các bài viết được đánh dấu cần editorial review.
+
Làm việc đó ở đâu?
+
Within specific articles that are marked as requiring an editorial review.
+
Bạn cần gì để làm được việc?
+
Bạn cần phải thành thạo ngữ pháp tiếng Anh và vốn từ dồi dào. ?Editorial review là để bảo đảm rằng ngữ pháp, vốn từ, và câu chữ đúng đắn và có nghĩa, và phải tuân thủ theo MDN writing style guide.
+
Các bước thực hiện:
+
+
    +
  1. Kiếm bài viết để review: +
      +
    1. Nhấp vào các bài viết cần editorial review. Trang này hiển thị ra một danh sách những bài viết cần editorial review.
      2. +
    2. Nhấp vào đường dẫn đến bài viết nhất định.
      + Chú ý: Danh sách này được sinh tự động nhưng không thường xuyên, thế nên có vài bài viết vẫn xuất hiện trong danh sách nhưng không cần editorial review nữa. Nếu bài viết bạn chọn không hiện thông báo "This article needs an editorial review", hãy lướt qua bài viết đó và chọn một bài viết khác.
      3. +
    +
    2. +
  2. Đọc bài viết thật kĩ, tìm các lỗi đánh máy, lỗi chính tả, ngữ pháp, hoặc cách dùng từ. Đừng do dự chuyển sang bài khác nếu bài bạn thấy không hợp với bài vừa chọn.
    3. +
  3. Nếu không có lỗi nào, bạn không cần phải chỉnh sửa nữa. Hãy tìm hộp thoại "quick review" ở thanh bên trái của trang:
    + Screenshot of the editorial review request sidebar box
    4. +
  4. Bỏ chọn ô Editorial và bấm vào Save.
    5. +
  5. Nếu bạn thấy có lỗi cần phải sửa: +
      +
    1. Bấm vào nút Edit ở gần đầu trang; nó sẽ đưa bạn tới trình chính sửa MDN.
      2. +
    2. Sửa tất cả các lỗi đánh máy, chính tả, ngữ pháp và lỗi dùng từ mà bạn tìm thấy. Bạn không cần phải sửa tất cả, nhưng hãy đảm bảo rằng mục editorial review vẫn được chọn nếu bạn thấy không đủ khả năng để sửa trọn vẹn toàn trang.
      3. +
    3. Điền vào mục Revision Comment ở cuối bài viết; như là 'Biên tập: sửa lỗi đánh máy, ngữ pháp và chính tả.' Cái này giúp cho các người đóng góp khác và trình biên soạn của trang biết bạn đã làm gì và lý do bạn làm vậy.
      4. +
    4. Bỏ chọn mục Editorial ở dưới Review Needed?. ?Cái này nằm ngay dưới phần Revision Comment trong trang.
      5. +
    5. Nhấn nút Publish.
      6. +
    +
    6. +
+ +
+

?Chỉnh sửa của bạn có thể không hiện ra ngay tức thì sau khi đã lưu lại; thường sẽ bị trễ do trang cần có thời gian sẽ xử lý.

+
+
+
diff --git a/files/vi/tu-dien-thuat-ngu/ajax/index.html b/files/vi/tu-dien-thuat-ngu/ajax/index.html deleted file mode 100644 index c111812954..0000000000 --- a/files/vi/tu-dien-thuat-ngu/ajax/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: AJAX -slug: Tu-dien-thuat-ngu/AJAX -translation_of: Glossary/AJAX ---- -

AJAX (Asynchronous {{glossary("JavaScript")}} And {{glossary("XML")}}) là một kỹ thuật lập trình kết hợp {{glossary("HTML")}}, {{glossary("CSS")}}, {{glossary("JavaScript")}}, {{glossary("DOM")}}, và đối tượng XMLHttpRequest để xây dựng các trang web phức tạp hơn. Điều mà AJAX cho phép bạn thực hiện chỉ là cập nhật một số thành phần của trang web thay vì phải tải lại toàn bộ trang. AJAX cũng cho phép bạn làm việc bất đồng bộ, có nghĩa là mã nguồn của bạn tiếp tục chạy trong khi những thành phần đó sẽ cố gắng tải lại (còn đồng bộ sẽ không cho mã nguồn của bạn chạy cho đến khi các thành phần của trang web tải lại xong).

- -

Thêm nữa

- -

Hiểu biết chung

- - - -

Tài liệu chuyên môn

- - diff --git a/files/vi/tu-dien-thuat-ngu/algorithm/index.html b/files/vi/tu-dien-thuat-ngu/algorithm/index.html deleted file mode 100644 index 79accd5810..0000000000 --- a/files/vi/tu-dien-thuat-ngu/algorithm/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Thuật Toán -slug: Tu-dien-thuat-ngu/Algorithm -tags: - - thuật toán -translation_of: Glossary/Algorithm ---- -

Thuật toán là một chuỗi khép kín những hướng dẫn để thực hiện một chức năng.

- -

Nói cách khác, thuật toán mô tả phương án để giải quyết một vấn đề và nhờ đó nó có thể được sử dụng lại mỗi khi cần, bởi con người hay thậm chí là máy móc. Các nhà khoa học máy tính so sánh hiệu quả của các thuật toán thông qua khái niệm "Độ phức tạp" hay mang cái tên khác là "Big O"

- -

Lấy ví dụ:

- - - -

Những thuật toán thông dụng là thuật toán tìm đường, ví dụ như the Traveling Salemen Problem, Tree Traversal Algorithms, v..v

- -

Có cả những thuật toán chỉ dành riêng cho học máy, như là Linear Regression, Logistic Regression, Decision Tree, Random Forest, Support Vector Machine, Recurrent Neural Network (RNN), Long Short Term Memory (LSTM) Neural Network, Convolutional Neural Network (CNN), Deep Convolutional Neural Network v..v...

- -

Learn more

- -

General knowledge

- - - -

Technical reference

- - diff --git a/files/vi/tu-dien-thuat-ngu/array/index.html b/files/vi/tu-dien-thuat-ngu/array/index.html deleted file mode 100644 index d701cf9623..0000000000 --- a/files/vi/tu-dien-thuat-ngu/array/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Array -slug: Tu-dien-thuat-ngu/array -translation_of: Glossary/array ---- -

Một array (mảng) là một tập hợp sắp xếp các dữ liệu {{Glossary("primitive")}} hoặc {{Glossary("object")}}. Dựa vào các vị trí của nó trong array, mỗi item (phần tử trong mảng) dữ liệu có một số index (chỉ mục, thứ tự vị trí của các phần tử, bắt đầu từ vị trí đầu tiên có giá trị là 0), thông qua index này mà bạn có thể truy cập tới các {{glossary("giá trị")}} ({{glossary("value")}}) chứa trong mảng. {{jsxref("array")}} cũng là các đối tượng, mà nó có thể được dùng bởi nhiều phương thức khác nhau. ({{jsxref("array")}}s are also objects that can be manipulated with various {{Glossary("Method", "methods")}}.)

- -

Xem thêm

- -

Hiểu biết chung

- - - -

Tài liệu chuyên môn

- - - -

 

diff --git a/files/vi/tu-dien-thuat-ngu/attribute/index.html b/files/vi/tu-dien-thuat-ngu/attribute/index.html deleted file mode 100644 index 50079a0e56..0000000000 --- a/files/vi/tu-dien-thuat-ngu/attribute/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Thuộc tính -slug: Tu-dien-thuat-ngu/Attribute -tags: - - HTML - - Từ điển thuật ngữ -translation_of: Glossary/Attribute ---- -

Một thuộc tính mở rộng một {{Glossary("thẻ")}}, thay đổi hành vi của thẻ đó hoặc cung cấp thông tin/dữ liệu về nó. Một thuộc tính luôn luôn có dạng name=value (tên của một thuộc tính được đặt theo các thuộc tính liên quan).

- -

Tìm hiểu thêm

- -

Technical reference

- - diff --git a/files/vi/tu-dien-thuat-ngu/bandwidth/index.html b/files/vi/tu-dien-thuat-ngu/bandwidth/index.html deleted file mode 100644 index 50bee3a7cd..0000000000 --- a/files/vi/tu-dien-thuat-ngu/bandwidth/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Bandwidth -slug: Tu-dien-thuat-ngu/Bandwidth -translation_of: Glossary/Bandwidth ---- -

 

- -

Bandwidth là tổng số của bao nhiêu thông tin có thể truyền qua một sự kết nối dữ liệu theo một tổng thời gian đã đưa. Banwidth thường được tạo ra theo nhiều bit/giây (bit trên giây) (bit-per-second (bps)), ví dụ 1.000.000 bit trên giây (megabits-per-second (Mbps)) hoặc 1.000.000.000 bit trên giây (gigabits-per-second (Gbps))

- -

Tự học thêm

- -

 

- - - -

 

- - diff --git a/files/vi/tu-dien-thuat-ngu/boolean/index.html b/files/vi/tu-dien-thuat-ngu/boolean/index.html deleted file mode 100644 index 9d227fa486..0000000000 --- a/files/vi/tu-dien-thuat-ngu/boolean/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Boolean -slug: Tu-dien-thuat-ngu/Boolean -tags: - - Boolean - - JavaScript - - Loại dữ liệu - - Ngôn ngữ lập trình - - Thuật ngữ -translation_of: Glossary/Boolean ---- -

Trong khoa học máy tính, Boolean (phiên âm /bu-li-ờn/) là loại dữ liệu logic chỉ có giá trị true/đúng hoặc false/sai. Ví dụ, trong JavaScript, điều kiện Boolean thường sử dụng để quyết định đoạn mã nào được thực thi (như trong {{jsxref("Statements/if...else", "lệnh if")}}) hay lặp lại (trong {{jsxref("Statements/for", "vòng lặp for")}}).

- -

Dưới đây là vài đoạn mã JavaScript giả (không hẳng là mã chạy được) để minh họa khái niệm này.

- -
/* Lệnh if của JavaScript */
-if (điều kiện boolean) {
-   // Mã được thực thi nếu điều kiện là đúng
-}
-
-if (điều kiện boolean) {
-  console.log("điều kiện boolean resolved to true");
-} else {
-  console.log("boolean conditional resolved to false");
-}
-
-
-/* JavaScript for loop */
-for (biến điều khiển; điều kiện boolean; bộ đếm) {
-  // Mã được thực thi nếu điều kiện là đúng
-}
-
-for (var i=0; i < 4; i++) {
-  console.log("Tôi chỉ được in ra khi điều kiện boolean là đúng/true");
-}
-
- -

Giá trị Boolean được đặt tên theo nhà toán học người Anh {{interwiki("wikipedia", "George Boole")}}, ông tổ ngành toán học logic. 

- -

Tìm hiểu thêm

- -

Kiến thức phổ thông

- - - -

Tài liệu tham khảo kỹ thuật

- - diff --git a/files/vi/tu-dien-thuat-ngu/cache/index.html b/files/vi/tu-dien-thuat-ngu/cache/index.html deleted file mode 100644 index d496389bba..0000000000 --- a/files/vi/tu-dien-thuat-ngu/cache/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Cache -slug: Tu-dien-thuat-ngu/Cache -tags: - - HTTP - - Thuật ngữ -translation_of: Glossary/Cache ---- -

Cache (web cache hay HTTP cache, phiên âm /kát-sờ/) là một thành phần lưu trữ phản hồi HTTP tạm thời từ đó máy tính có thể sử dụng nó cho những yêu cầu HTTP tiếp theo miễn nó đạt được những điều kiện nhất định.

- -

Tìm hiểu thêm

- -

Kiến thức phổ thông

- - diff --git a/files/vi/tu-dien-thuat-ngu/callback_function/index.html b/files/vi/tu-dien-thuat-ngu/callback_function/index.html deleted file mode 100644 index 5aabc5fcc4..0000000000 --- a/files/vi/tu-dien-thuat-ngu/callback_function/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Callback function -slug: Tu-dien-thuat-ngu/Callback_function -translation_of: Glossary/Callback_function ---- -

Hàm gọi lại là một hàm được truyền vào một hàm khác dưới dạng đối số, sau đó được gọi bên trong hàm bên ngoài để hoàn thành một số loại quy trình hoặc hành động.  Đây là một ví dụ nhanh:

- -
function greeting(name) {
-  alert('Hello ' + name);
-}
-
-function processUserInput(callback) {
-  var name = prompt('Please enter your name.');
-  callback(name);
-}
-
-processUserInput(greeting);
- -

Ví dụ trên là một lệnh gọi lại {{glossary ("sync")}}, vì nó được thực thi ngay lập tức.  Tuy nhiên, lưu ý rằng các lệnh gọi lại thường được sử dụng để tiếp tục thực thi mã sau khi hoạt động {{glossary ("asynchronous")}} hoàn thành - chúng được gọi là lệnh gọi lại không đồng bộ.  Một ví dụ điển hình là các hàm gọi lại được thực thi bên trong một khối .then () được xâu chuỗi vào cuối một lời hứa sau khi lời hứa đó hoàn thành hoặc bị từ chối.  Cấu trúc này được sử dụng trong nhiều API web hiện đại, chẳng hạn như fetch ().

- -

Learn more

- -

General knowledge

- - diff --git a/files/vi/tu-dien-thuat-ngu/cdn/index.html b/files/vi/tu-dien-thuat-ngu/cdn/index.html deleted file mode 100644 index 9f54fcb5b4..0000000000 --- a/files/vi/tu-dien-thuat-ngu/cdn/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: CDN -slug: Tu-dien-thuat-ngu/CDN -tags: - - Cơ sở hạ tầng - - Thuật ngữ -translation_of: Glossary/CDN ---- -

CDN (Mạng lưới Phân phối Nội dung / Content Delivery Network) là một nhóm các máy chủ phân bổ trên nhiều vị trí địa lý. Những máy chủ này chứa các bản sao dữ liệu để nó có thể cung cấp dữ liệu được yêu cầu dựa trên máy chủ gần nhất so với người-dùng-cuối tương ứng. Các CDN giúp cho dịch vụ tốc ít bị ảnh hưởng bởi lưu lượng cao.

- -

Các CDN được dùng rộng rãi để phân stylesheets và tệp Javascript (tài sản tĩnh) của những thư viện như Bootstrap, jQuery, v.v... Người ta thường thích dùng CDN để tải những tập thư viện này vì vài lý do sau:

- - diff --git a/files/vi/tu-dien-thuat-ngu/computer_programming/index.html b/files/vi/tu-dien-thuat-ngu/computer_programming/index.html deleted file mode 100644 index 27c03c6afb..0000000000 --- a/files/vi/tu-dien-thuat-ngu/computer_programming/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Lập Trình Máy Tính -slug: Tu-dien-thuat-ngu/Computer_Programming -tags: - - Lập trình máy tính -translation_of: Glossary/Computer_Programming ---- -

Lập trình máy tính là một quá trình xây dựng và sắp xếp một bộ gồm các hướng dẫn. Những hướng dẫn này sẽ nói cho máy tính/ phần mềm biết nó phải làm gì bằng ngôn ngữ mà máy hiểu được. Hướng dẫn được viết bằng rất nhiều ngôn ngữ, như là C++, Java, JavaScript, HTML, Python, Ruby, and Rust.

- -

Dùng những ngôn ngữ đã có, bạn có thể lập trình/tạo ra tất cả các loại phần mềm. Cho ví dụ, một chương trình có thể giúp các nhà khoa học xử lí những bài toán phức tạp, một bộ dữ liệu có thể chứa số lượng dữ liệu khổng lồ, một website cho phép người dùng tải nhạc, phim, hình ảnh, hay một phần mềm hoạt hình cho phép người dùng tạo ra những bộ hoạt hình ấn tượng.

- -

Learn more

- -

General knowledge

- - diff --git a/files/vi/tu-dien-thuat-ngu/css/index.html b/files/vi/tu-dien-thuat-ngu/css/index.html deleted file mode 100644 index 4c6d127406..0000000000 --- a/files/vi/tu-dien-thuat-ngu/css/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: CSS -slug: Tu-dien-thuat-ngu/CSS -translation_of: Glossary/CSS ---- -

CSS (Cascading Style Sheets) là một ngôn ngữ khai báo mà điều chỉnh trang web sẽ nhìn như thế nào trong {{glossary("trình duyệt")}}. Trình duyệt gắn kiểu khai báo trong CSS vào những elements dược chọn để hiển thị nó đúng chính xác. Một kiểu khai báo bao gồm những thuộc tính và giá trị của các elements, cái mà xác định trang web sẽ nhìn như thế nào.

- -

CSS là một trong ba kỹ thhật chính của trang web, bên cạnh với {{Glossary("HTML")}} và {{Glossary("JavaScript")}}. CSS thường được dùng với {{Glossary("Element","HTML elements")}}, nhưng cũng dùng được với những ngôn ngữ đánh dấu khác như {{Glossary("SVG")}} hay {{Glossary("XML")}}.

- -

Một diều lệ của CSS là một tập hợp {{Glossary("CSS Property","properties")}} kết hợp với {{Glossary("selector")}}. Đây là một ví dụ về việc biến tất cả the p trong HTML có chữ màu vàng và nền màu đen

- -
/* The selector "p" indicate that all paragraphs in the document will be affected by that rule */
-p {
-  /* The "color" property defines the text color, in this case yellow. */
-  color: yellow;
-
-  /* The "background-color" property defines the background color, in this case black. */
-  background-color: black
-}
- -

"Nối tầng" ám chỉ điều lệ để quản lý phần được chọn sẻ được ưa tiên để thay đổi bề ngoài của trang. Đây là một chức năng rất là quan trọng, kể từ khi một trang web phức tạp có thể có hàng ngàn điều lệ của CSS.

- -

Học thêm

- -

Hiểu biết chung

- - - -

Technical reference

- - - -

Learn about CSS

- - diff --git a/files/vi/tu-dien-thuat-ngu/dynamic_programming_language/index.html b/files/vi/tu-dien-thuat-ngu/dynamic_programming_language/index.html deleted file mode 100644 index 7babbc04e7..0000000000 --- a/files/vi/tu-dien-thuat-ngu/dynamic_programming_language/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Ngôn ngữ lập trình động -slug: Tu-dien-thuat-ngu/Dynamic_programming_language -translation_of: Glossary/Dynamic_programming_language ---- -

Ngôn ngữ lập trình động là ngôn ngữ lập trình trong đó các thao tác được thực hiện tại thời gian biên dịch có thể được thực hiện trong thời gian chạy. Ví dụ: trong JavaScript, có thể thay đổi loại biến hoặc thêm các thuộc tính hoặc phương thức mới vào một đối tượng trong khi chương trình đang chạy.

- -

Điều này trái ngược với cái gọi là ngôn ngữ lập trình tĩnh, trong đó những thay đổi như vậy thường không thể thực hiện được.

- -
-

Lưu ý rằng mặc dù thực sự có một mối liên hệ giữa thuộc tính động/tĩnh này của ngôn ngữ lập trình và kiểu gõ động/tĩnh, hai từ này không đồng nghĩa với nhau.

-
- -

Tìm hiểu thêm

- -

Kiến thức chung

- - diff --git a/files/vi/tu-dien-thuat-ngu/falsy/index.html b/files/vi/tu-dien-thuat-ngu/falsy/index.html deleted file mode 100644 index c71e9cc197..0000000000 --- a/files/vi/tu-dien-thuat-ngu/falsy/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Falsy -slug: Tu-dien-thuat-ngu/Falsy -translation_of: Glossary/Falsy ---- -

Giá trị falsy là giá trị được hiểu là false trong ngữ cảnh {{Glossary("Boolean")}}.

- -

{{Glossary("JavaScript")}} sử dụng {{Glossary("Type_Conversion", "Type Conversion")}} để ép kiểu giá trị bất kì thành Boolean khi cần thiết, ví dụ trong mệnh đề điều kiện ({{Glossary("Conditional", "conditionals")}}) và vòng lặp ({{Glossary("Loop", "loops")}}).

- -

Ví dụ

- -

Sau đây là ví dụ về các giá trị falsy (sẽ được hiểu là 'false' dẫn đến không thực hiện đoạn code của if ):

- -
if (false)
-if (null)
-if (undefined)
-if (0)
-if (NaN)
-if ('')
-if ("")
-if (document.all) [1]
- -

[1] document.all trước đây được sử dụng trong việc nhận biết trình duyệt và tài liệu HTML specification defines a willful violation của chuẩn ECMAScript này để tương thích với code cũ (if (document.all) { // Internet Explorer code here } hoặc sử dụng document.all mà không kiểm tra trước về sự tồn tại của nó: document.all.foo).

- -

Đôi khi từ này được viết là falsey.

- -

Tìm hiểu thêm

- - diff --git a/files/vi/tu-dien-thuat-ngu/general_header/index.html b/files/vi/tu-dien-thuat-ngu/general_header/index.html deleted file mode 100644 index e6ac4493a9..0000000000 --- a/files/vi/tu-dien-thuat-ngu/general_header/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: General header -slug: Tu-dien-thuat-ngu/General_header -tags: - - C++ -translation_of: Glossary/General_header ---- -

A general header is an {{glossary('Header', 'HTTP header')}} that can be used in both request and response messages but doesn't apply to the content itself. Depending on the context they are used in, general headers are either {{glossary("Response header", "response")}} or {{glossary("request header", "request headers")}}. However, they are not {{glossary("entity header", "entity headers")}}.

- -

The most common general headers are {{HTTPHeader('Date')}}, {{HTTPheader("Cache-Control")}} or {{HTTPHeader("Connection")}}.

diff --git a/files/vi/tu-dien-thuat-ngu/head/index.html b/files/vi/tu-dien-thuat-ngu/head/index.html deleted file mode 100644 index c53ed73844..0000000000 --- a/files/vi/tu-dien-thuat-ngu/head/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Head -slug: Tu-dien-thuat-ngu/Head -translation_of: Glossary/Head ---- -

Head là một phần của một  văn bản {{glossary("HTML")}} chứa {{glossary("metadata")}} về văn bản đó, như tác giả, mô tả, và liên kết đến các tập tin {{glossary("CSS")}} hay {{glossary("JavaScript")}} được áp dụng vào văn bản HTML.

- -

Tìm hiểu thêm

- -

HTML head

- - diff --git a/files/vi/tu-dien-thuat-ngu/hoisting/index.html b/files/vi/tu-dien-thuat-ngu/hoisting/index.html deleted file mode 100644 index b12a7f94cc..0000000000 --- a/files/vi/tu-dien-thuat-ngu/hoisting/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Hoisting -slug: Tu-dien-thuat-ngu/Hoisting -tags: - - JavaScript -translation_of: Glossary/Hoisting ---- -

Hoisting là một thuật ngữ mà bạn sẽ không tìm thấy cách sử dụng trong bất cứ văn bản đặc tả quy chuẩn nào trước ECMAScript® 2015 Language Specification. Hoisting được nghĩ đến như một cách chung trong việc thực thi các ngữ cảnh (đặc biệt là giai đoạn tạo và thực thi) làm việc như thế nào trong JavaScript. Nhưng, hoisting có thể dẫn đến nhiều sự hiểu lầm. Ví dụ, hoisting dạy rằng định nghĩa biến và hàm được chuyển tới đầu đoạn mã của bạn, nhưng đây không hẳn là tất cả những gì xảy ra. Chuyện gì xảy ra khi các định nghĩa biến và hàm đó được lưu vào bộ nhớ trong suốt giai đoạn biên dịch, nhưng ở chính xác nơi bạn đã gõ nó trong đoạn mã của bạn?

- -

Tìm hiểu thêm

- -

Ví dụ kỹ thuật

- -

Một trong những lợi ích của việc đặt định nghĩa hàm JavaScript vào bộ nhớ trước khi nó thực thi bất cứ đoạn mã nào thì nó cho phép bạn sử dụng một hàm trước khi bạn định nghĩa nó trọng code của bạn. Ví dụ:

- -
function catName(name) {
-  console.log("My cat's name is " + name);
-}
-
-catName("Tigger");
-/*
-The result of the code above is: "My cat's name is Tigger"
-*/
-
- -

Đoạn code ở trên là cách bạn mong muốn khi viết mã để nó hoạt động. Bây giờ, hãy xem điều gì xả ra khi chúng ta gọi hàm trước khi chúng ta viết nó:

- -
catName("Chloe");
-
-function catName(name) {
-  console.log("My cat's name is " + name);
-}
-/*
-The result of the code above is: "My cat's name is Chloe"
-*/
-
- -

Thậm chí chúng ta gọi hàm trong mã của chúng ta đầu tiên, trước khi hàm được viết thì mã vẫn hoạt động. Đây là vì cách mà thực thi ngữ cảnh hoạt động trong JavaScript. 

- -

Hoisting hoạt động tốt với những kiểu dữ liệu khác và các biến. các biến có thể được khởi tạo và được sử dụng trước khi định nghĩa. nhưng chúng có thể không được sử dụng mà không kèm khởi tạo.

- -

Ví dụ kỹ thuật

- -
num = 6;
-num + 7;
-var num;
-/* gives no errors as long as num is declared*/
-
-
- -

JavaScript chỉ đưa các định nghĩa chứ không phải các khởi tạo. Nếu bạn đang sử dụng một biến mà được định nghĩa và khởi tạo sau khi sử dụng, giá trị sẽ là undefined. Hai ví dụ dưới đây mô tả cùng hành vi.

- -
var x = 1; // Initialize x
-console.log(x + " " + y); // '1 undefined'
-var y = 2; // Initialize y
-
-
-// The following code will behave the same as the previous code:
-var x = 1; // Initialize x
-var y; // Declare y
-console.log(x + " " + y); // '1 undefined'
-y = 2; // Initialize y
-
- -

Tham khảo kỹ thuật

- - diff --git a/files/vi/tu-dien-thuat-ngu/html/index.html b/files/vi/tu-dien-thuat-ngu/html/index.html deleted file mode 100644 index 68a5ba4c81..0000000000 --- a/files/vi/tu-dien-thuat-ngu/html/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: HTML -slug: Tu-dien-thuat-ngu/HTML -translation_of: Glossary/HTML ---- -

HTML (Ngôn ngữ đánh dấu siêu văn bản), là một ngôn ngữ mang tính miêu tả chỉ dành riêng cho cấu trúc trang web.

- -

LƯỢC SỬ 

- -

Vào năm 1990, như một phần của công trình thiết kế web {{glossary("World Wide Web","Web")}}, Tim Berners-Lee tạo ra định nghĩa  {{glossary("hypertext")}}, thứ mà đã được Berners-Lee chính thức công nhận vào năm tiếp theo thông qua markup được dựa phần lớn vào{{glossary("SGML")}}. The {{glossary("IETF")}} began formally specifying HTML in 1993, and after several drafts released version 2.0 in 1995. In 1994 Berners-Lee founded the {{glossary("W3C")}} to develop the Web. In 1996, the W3C took over the HTML work and published the HTML 3.2 recommendation a year later. HTML 4.0 was released in 1999 and became an {{glossary("ISO")}} standard in 2000.

- -

At that time, the W3C nearly abandoned HTML in favor of {{glossary("XHTML")}}, prompting the founding of an independent group called {{glossary("WHATWG")}} in 2004. Thanks to WHATWG, work on {{glossary("HTML5")}} continued: the two organizations released the first draft in 2008 and the final standard in 2014.

- -

Concept and syntax

- -

An HTML document is a plaintext document structured with {{glossary("element","elements")}}. Elements are surrounded by matching opening and closing {{Glossary("tag","tags")}}. Each tag begins and ends with angle brackets (<>). There are a few empty or void tags that cannot enclose any text, for instance {{htmlelement("img")}}.

- -

You can extend HTML tags with {{Glossary("attribute","attributes")}}, which provide additional information affecting how the browser interprets the element:

- -

Detail of the structure of an HTML element

- -

An HTML file is normally saved with an .htm or .html extension, served by a {{Glossary("Server","web server")}}, and can be rendered by any {{Glossary("Browser","Web browser")}}.

- -

Learn more

- -

General knowledge

- - - -

Learning HTML

- - - -

Technical reference

- - diff --git a/files/vi/tu-dien-thuat-ngu/identifier/index.html b/files/vi/tu-dien-thuat-ngu/identifier/index.html deleted file mode 100644 index 36b044a73c..0000000000 --- a/files/vi/tu-dien-thuat-ngu/identifier/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Identifier -slug: Tu-dien-thuat-ngu/Identifier -translation_of: Glossary/Identifier ---- -

Định danh là chuỗi ký tự trong mã nguồn để xác định {{glossary("variable")}}, {{glossary("function")}}, hoặc {{glossary("property")}}.

- -

Trong {{glossary("JavaScript")}}, các định danh đều phân biệt hoa thường (case-sensitive) và có thể chứa ký tự {{glossary("Unicode")}}, $, _, và ký tự số (0-9), nhưng không bắt đầu bằng ký tự số.

- -

Định danh khác với chuỗi ký tự ở chỗ: chuỗi ký tự là dữ liệu, còn định danh là một phần của mã nguồn. Trong JavaScript, không có cách nào để chuyển đổi định danh thành chuỗi ký tự, nhưng đôi khi có thể truyền chuỗi ký tự vào định danh.

- -

Xem thêm

- -

Kiến thức chung

- - diff --git a/files/vi/tu-dien-thuat-ngu/index.html b/files/vi/tu-dien-thuat-ngu/index.html deleted file mode 100644 index 053ad9b274..0000000000 --- a/files/vi/tu-dien-thuat-ngu/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Từ điển thuật ngữ -slug: Tu-dien-thuat-ngu -tags: - - Index - - Người mới - - Từ điển -translation_of: Glossary ---- -
{{LearnBox({"title":"Có thể bạn chưa biết"})}}
- -

Công nghệ  Web có rất là nhiều những thuật ngữ (jargon) và những từ viết tắt (abbreviations), nó thường được sử dụng trong các văn bản và cả trong code. Từ điển này cung cấp cho bạn các định nghĩa của các từ ngữ thuật ngữ và cả các chữ viết tắt mà bạn cần biết để hiểu về web và cũng để xây dựng thành công một trang web.

- -
Đóng góp định nghĩa cho một thuật ngữ mới - -
-
- -

{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}

- -

Góp phần giải thích các thuật ngữ

- -

Trang từ điển này là một công việc không bao giờ có thể hoàn thiện.Vì vậy bạn cũng có thể góp phần cải thiện nó bằng cách viết một thuật ngữ mới hoặc chỉnh sửa các thuật ngữ đã có chính xác hơn. Cách dễ nhất là nhấn vào nút dưới đây hoặc chọn 1 trong những thuật ngữ cần định nghĩa nằm ở phía dưới nút đó.

- -
Đóng góp định nghĩa cho một thuật ngữ mới - -

{{GlossaryList({"terms":["TTL"], "filter":"notdefined", "css":"multiColumnList"})}}

- -

Nếu bạn muốn biết thêm về cách để góp phần giải thích các thuật ngữ, nhấp vào liên kết sau: the glossary documentation status page.

-
diff --git a/files/vi/tu-dien-thuat-ngu/jquery/index.html b/files/vi/tu-dien-thuat-ngu/jquery/index.html deleted file mode 100644 index 1477abfb66..0000000000 --- a/files/vi/tu-dien-thuat-ngu/jquery/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: jQuery -slug: Tu-dien-thuat-ngu/jQuery -translation_of: Glossary/jQuery ---- -

jQuery là một {{Glossary("JavaScript")}} {{Glossary("Library")}} tập trung vào việc đơn giản hóa thao tác vơi {{Glossary("DOM")}}, gọi {{Glossary("AJAX")}}, và điều khiển {{Glossary("Event")}}.

- -

jQuery sử dụng định dạng, $(selector).action() để gán một phần tử cho một sự kiện. Để giải thích chi tiết hơn, $(selector) sẽ gọi jQuery để chọn phần tử selector , và gán nó cho một sự kiện {{Glossary("API")}} gọi là .action().

- -
$(document).ready(function(){
-  alert("Hello World!");
-  $("#blackBox").hide();
-});
- -

Đoạn mã trên thực hiện chức năng tương tự như đoạn mã sau:

- -
window.onload = function() {
-  alert("Hello World!");
-  document.getElementById("blackBox").style.display = "none";
-};
- -

Hoặc:

- -
window.addEventListener("load", () => {
-  alert("Hello World!");
-  document.getElementById("blackBox").style.display = "none";
-});
- -

Tìm hiểu thêm

- -

Kiến thức chung

- - - -

Thông tin kĩ thuật

- - diff --git a/files/vi/tu-dien-thuat-ngu/json/index.html b/files/vi/tu-dien-thuat-ngu/json/index.html deleted file mode 100644 index 8158b09c63..0000000000 --- a/files/vi/tu-dien-thuat-ngu/json/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: JSON -slug: Tu-dien-thuat-ngu/JSON -translation_of: Glossary/JSON ---- -

JavaScript Object Notation (JSON) là một data-interchange format. Mặc dù không phải là một strict subset, JSON lại rất giống với một subset theo cú pháp của {{Glossary("JavaScript")}}.

- -

Though many programming languages support JSON, JSON is especially useful for JavaScript-based apps, including websites and browser extensions.

- -

JSON can represent numbers, booleans, strings, null, arrays (ordered sequences of values), and objects (string-value mappings) made up of these values (or of other arrays and objects).  JSON does not natively represent more complex data types like functions, regular expressions, dates, and so on.  (Date objects by default serialize to a string containing the date in ISO format, so the information isn't completely lost.) If you need JSON to represent additional data types, transform values as they are serialized or before they are deserialized.

- -

Much like XML, JSON has the ability to store hierarchical data unlike the more traditional CSV format.  Many tools provide translation between these formats such as this online JSON to CSV Converter or this alternative JSON to CSV Converter.

- -

Learn more

- -

General knowledge

- - - -

Technical reference

- - diff --git a/files/vi/tu-dien-thuat-ngu/metadata/index.html b/files/vi/tu-dien-thuat-ngu/metadata/index.html deleted file mode 100644 index ff72a21192..0000000000 --- a/files/vi/tu-dien-thuat-ngu/metadata/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Metadata -slug: Tu-dien-thuat-ngu/Metadata -translation_of: Glossary/Metadata ---- -

Metadata (Siêu dữ liệu) là — in its very simplest definition — dữ liệu mô tả dữ liệu. Chẳng hạn, tài liệu {{glossary("HTML")}} là dữ liệu, nhưng HTML có thể chứa metadata trong phần tử {{htmlelement("head")}} để mô tả tài liệu đó — như là ai viết nó, và tóm lược trang web.

- -

Tìm hiểu thêm

- -

Kiến thức chung

- - - -

HTML metadata

- - diff --git a/files/vi/tu-dien-thuat-ngu/null/index.html b/files/vi/tu-dien-thuat-ngu/null/index.html deleted file mode 100644 index 4baec6b2e6..0000000000 --- a/files/vi/tu-dien-thuat-ngu/null/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: 'Null' -slug: Tu-dien-thuat-ngu/Null -translation_of: Glossary/Null ---- -

Trong khoa học máy tính, giá trị null đại điện cho một tham chiếu trỏ tới, thường là cố tình, {{glossary("object")}} hoặc địa chỉ không tồn tại hoặc không hợp lệ. Ý nghĩa của null tuỳ theo từng ngôn ngữ.

- -

Trong {{Glossary("JavaScript")}}, null là một trong các {{Glossary("Primitive", "giá trị sơ khai")}}.

- -

Tham khảo thêm

- -

Hiểu biết chung

- - - -

Tham khảo kỹ thuật

- - diff --git a/files/vi/tu-dien-thuat-ngu/operand/index.html b/files/vi/tu-dien-thuat-ngu/operand/index.html deleted file mode 100644 index 407d9c03d0..0000000000 --- a/files/vi/tu-dien-thuat-ngu/operand/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Toán hạng -slug: Tu-dien-thuat-ngu/Operand -translation_of: Glossary/Operand ---- -

Toán hạng là một phần trong câu lệnh biểu diễn thao tác dữ liệu bởi {{glossary("operator")}}. Chẳng hạn, khi bạn cộng hai số, hai số đó là toán hạng và "+" là toán tử.

- -

Đọc thêm

- - diff --git a/files/vi/tu-dien-thuat-ngu/php/index.html b/files/vi/tu-dien-thuat-ngu/php/index.html deleted file mode 100644 index f75d0f07e7..0000000000 --- a/files/vi/tu-dien-thuat-ngu/php/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: PHP -slug: Tu-dien-thuat-ngu/PHP -translation_of: Glossary/PHP ---- -

PHP (a recursive initialism for PHP: Hypertext Preprocessor) is an open-source server-side scripting language that can be embedded into HTML to build web applications and dynamic websites.

- -

Examples

- -

Basic syntax

- -
  // start of PHP code
-<?php
-     // PHP code goes here
- ?>
-// end of PHP code
- -

Printing data on screen

- -
<?php
-   echo "Hello World!";
-?>
- -

PHP variables

- -
​​​​​​​<?php
- // variables
- $nome='Danilo';
- $sobrenome='Santos';
- $pais='Brasil';
- $email='danilocarsan@gmailcom';
-​​​​​​​
- // printing the variables
- echo $nome;
- echo $sobrenome;
- echo $pais;
- echo $email;
-?>
- - diff --git a/files/vi/tu-dien-thuat-ngu/primitive/index.html b/files/vi/tu-dien-thuat-ngu/primitive/index.html deleted file mode 100644 index b65302eab7..0000000000 --- a/files/vi/tu-dien-thuat-ngu/primitive/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Primitive -slug: Tu-dien-thuat-ngu/Primitive -translation_of: Glossary/Primitive ---- -

Trong {{Glossary("JavaScript")}}, một bản nguyên (giá trị nguyên thủy, giá trị sơ khai, kiểu dữ liệu sơ khai) là dữ liệu mà dữ liệu này không phải {{Glossary("object")}} và không có {{glossary("method","phương thức")}}. Có 7 kiểu dữ liệu bản nguyên: {{Glossary("string")}}, {{Glossary("number")}}, {{Glossary("bigint")}}, {{Glossary("boolean")}}, {{Glossary("null")}}, {{Glossary("undefined")}}, {{Glossary("symbol")}} (mới thêm vào trong {{Glossary("ECMAScript")}} 2015).

- -

Most of the time, a primitive value is represented directly at the lowest level of the language implementation.

- -

Tất cả bản nguyên đều là bất biến, tức là chúng không thể bị thay đổi. Đừng để bối rối giữa một bản nguyên với một biến được gán giá trị bản nguyên. Biến đó có thể được gán lại giá trị mới, nhưng giá trị đang tồn tại không thể bị thay đổi theo cái cách mà object, mảng và hàm có thể bị thay đổi.

- -

Ví dụ

- -

Ví dụ này sẽ giúp bạn hiểu rõ thực tế là các giá trị bản nguyên không thể bị thay đổi.

- -

JavaScript

- -
 // Sử dụng phương thức chuỗi không làm biến đổi chuỗi
- var bar = "baz";
- console.log(bar);               // baz
- bar.toUpperCase();
- console.log(bar);               // baz
-
- // Sử dụng một phương thức mảng để làm biến đổi mảng
- var foo = [];
- console.log(foo);               // []
- foo.push("plugh");
- console.log(foo);               // ["plugh"]
-
- // Câu lệnh gán đã cho bản nguyên một giá trị mới (đây là giá trị mới chứ không phải biến đổi giá trị cũ)
- bar = bar.toUpperCase();       // BAZ
-
- -

Một bản nguyên có thể bị thay thế, nhưng không thể biến đổi nó trực tiếp.

- -

Ví dụ khác [ Từng-bước ]

- -

Ví dụ sau đây sẽ cho bạn thấy cách JavaScript làm việc với các bản nguyên.

- -

JavaScript

- -
// Xác định bản nguyên
-let foo = 5;
-
-// Định nghĩa hàm để thay đổi giá trị bản nguyên
-function addTwo(num) {
-   num += 2;
-}
-// Một hàm khác cố gắng làm điều tương tự
-function addTwo_v2(foo) {
-   foo += 2;
-}
-
-// Gọi hàm thứ nhất và truyền bản nguyên của chúng ta vào như là một đối số
-addTwo(foo);
-// Nhận về giá trị bản nguyên hiện tại
-console.log(foo);   // 5
-
-// Cố gắng một lần nữa với hàm thứ hai của chúng ta...
-addTwo_v2(foo);
-console.log(foo);   // 5
-
- -

Bạn có đang nghĩ rằng đó phải là 7 chứ không phải 5 không? Nếu có, dưới đây là cách đoạn mã hoạt động:

- - - -

Đó là lý do tại sao các Bản nguyên là bất biến - thay vì làm việc trực tiếp với chúng, chúng ta làm việc với bản sao, không làm ảnh hưởng bản gốc.

- -

Các object bọc bản nguyên trong JavaScript

- -

Ngoại trừ null và undefined, mọi giá trị bản nguyên đều có các object tương đương mà các object này sẽ bao bọc xung quanh các giá trị bản nguyên:

- - - -

Phương thức valueOf() của màng bọc sẽ trả về giá trị bản nguyên.

- -

Tham khảo thêm

- -

Hiểu biết chung

- - - - diff --git a/files/vi/tu-dien-thuat-ngu/responsive_web_design/index.html b/files/vi/tu-dien-thuat-ngu/responsive_web_design/index.html deleted file mode 100644 index ba3cae0d1c..0000000000 --- a/files/vi/tu-dien-thuat-ngu/responsive_web_design/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Responsive web design -slug: Tu-dien-thuat-ngu/Responsive_web_design -tags: - - Khả năng tiếp cận - - Thiết kế - - Thuật ngữ -translation_of: Glossary/Responsive_web_design ---- -

Responsive Web Design (RWD) (Thiết kế web linh hoạt) là khái niệm trong lập trình Web hướng tới tạo ra website có vẻ ngoài và cơ chế vận hành tối ưu trên tất cả thiết bị tính toán cá nhân, từ desktop (cố định) tới mobile (di động).

- -

Đọc thêm

- -

Hiểu biết chung

- - diff --git a/files/vi/tu-dien-thuat-ngu/svg/index.html b/files/vi/tu-dien-thuat-ngu/svg/index.html deleted file mode 100644 index d73e8f0d9d..0000000000 --- a/files/vi/tu-dien-thuat-ngu/svg/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: SVG -slug: Tu-dien-thuat-ngu/SVG -translation_of: Glossary/SVG ---- -

Scalable Vector Graphics (SVG) là một định dạng hình ảnh véc tơ 2D dựa trên cú pháp của {{Glossary("XML")}}.

- -

{{Glossary("W3C")}} bắt đầu sử dụng SVG từ cuối thập niên 90, nhưng SVG chỉ trở nên nổi tiếng từ khi {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 9 ra mắt kèm theo hỗ trợ SVG. Tất cả các {{Glossary("browser","trình duyệt")}} lớn hiện giờ đều hỗ trợ SVG.

- -

Dựa theo cú pháp của {{Glossary("XML")}}, SVG có thể được style bằng {{Glossary("CSS")}} và tạo ra các tương tác qua {{Glossary("JavaScript")}}. HTML5 giờ cho phép nhúng trực tiếp {{Glossary("Tag","thẻ")}} SVG vào tập tin {{Glossary("HTML")}}.

- -

Là một định dạng hình ảnh véc tơ, SVG có thể co dãn đến vô cùng, khiến cho nó trở nên vô giá đối với {{Glossary("responsive design")}} (thiết kế đáp ứng), bởi bạn có thể tạo ra giao diện và đồ hoạ co dãn trên mọi màn hình. SVG còn cung cấp một bộ công cụ hữu ích, như là clipping, masking, filters, và animations.

- -

Tìm hiểu thêm

- -

Kiến thức chung

- - - -

Học SVG

- - - -

Thông tin kỹ thuật

- - diff --git a/files/vi/tu-dien-thuat-ngu/trinh-duyet/index.html b/files/vi/tu-dien-thuat-ngu/trinh-duyet/index.html deleted file mode 100644 index 147573222b..0000000000 --- a/files/vi/tu-dien-thuat-ngu/trinh-duyet/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Trình Duyệt -slug: Tu-dien-thuat-ngu/trinh-duyet -tags: - - Thuật ngữ - - Từ điển -translation_of: Glossary/Browser ---- -

Trình duyệt Web hay trình duyệt là một chương trình có chức năng tải và hiển thị các trang {{Glossary("World Wide Web","Web")}}, và cho phép người dùng truy cập những trang web khác thông qua {{Glossary("hyperlink","hyperlinks")}}. Trình duyệt chính là những {{Glossary("user agent")}} phổ biến nhất.

- -

Tìm hiểu thêm

- -

Kiến thức chung

- - - -

Tải về một trình duyệt

- - diff --git a/files/vi/tu-dien-thuat-ngu/truthy/index.html b/files/vi/tu-dien-thuat-ngu/truthy/index.html deleted file mode 100644 index e9b5b23291..0000000000 --- a/files/vi/tu-dien-thuat-ngu/truthy/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Truthy -slug: Tu-dien-thuat-ngu/Truthy -translation_of: Glossary/Truthy ---- -

Trong {{Glossary("JavaScript")}}, truthy là giá trị được hiểu là true trong ngữ cảnh {{Glossary("Boolean")}}. Tất cả mọi giá trị đều là truthy, trừ phi chúng được định nghĩa là {{Glossary("Falsy", "falsy")}} (tức là, ngoại trừ false, 0, "", null, undefined, và NaN).

- -

{{Glossary("JavaScript")}} dùng {{Glossary("Type_Conversion", "ép kiểu")}} trong ngữ cảnh Boolean.

- -

Ví dụ về giá trị truthy trong JavaScript (sẽ được ép kiểu thành true trong ngữ cảnh Boolean, và đương nhiên thực hiện mã nguồn trong khối if):

- -
if (true)
-if ({})
-if ([])
-if (42)
-if ("foo")
-if (new Date())
-if (-42)
-if (3.14)
-if (-3.14)
-if (Infinity)
-if (-Infinity)
-
- -

Xem thêm

- - - -
{{QuickLinksWithSubpages("/en-US/docs/Glossary")}}
diff --git a/files/vi/tu-dien-thuat-ngu/type_conversion/index.html b/files/vi/tu-dien-thuat-ngu/type_conversion/index.html deleted file mode 100644 index c3d2ca07c9..0000000000 --- a/files/vi/tu-dien-thuat-ngu/type_conversion/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Type Conversion -slug: Tu-dien-thuat-ngu/Type_Conversion -translation_of: Glossary/Type_Conversion ---- -

Chuyển đổi kiểu (hay ép kiểu) tức là truyền dữ liệu từ kiểu dữ liệu này sang kiểu dữ liệu khác. Chuyển kiểu ngầm xảy ra khi bộ biên dịch tự động gán kiểu dữ liệu, song mã nguồn vẫn có thể thực hiện chuyển kiểu theo cách tường minh. Chẳng hạn, đoạn lệnh 5+2.0, số thực dấu phẩy động 2.0 được ép kiểu ngầm sang số nguyên, nhưng với lệnh Number("0x11"), xâu ký tự "0x11" được ép kiểu tường minh sang số 17.

- -

Tìm hiểu thêm

- -

Hiểu biết chung

- - diff --git a/files/vi/tu-dien-thuat-ngu/undefined/index.html b/files/vi/tu-dien-thuat-ngu/undefined/index.html deleted file mode 100644 index 6cad2c4b1b..0000000000 --- a/files/vi/tu-dien-thuat-ngu/undefined/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: undefined -slug: Tu-dien-thuat-ngu/undefined -translation_of: Glossary/undefined ---- -

undefined là một giá trị nguyên thủy được gán tự động cho các biến vừa được khai báo hoặc cho các đối số chính thức không có đối số thực tế.

- -

Example

- -
var x; // tạo một biến nhưng không gán giá trị
-
-console.log("x's value is", x) //logs "x's value is undefined"
-
- -

Tìm hiểu thêm

- -

Kiến thức phổ thông

- - - -

Technical reference

- - diff --git a/files/vi/tu-dien-thuat-ngu/xml/index.html b/files/vi/tu-dien-thuat-ngu/xml/index.html deleted file mode 100644 index f76d106d37..0000000000 --- a/files/vi/tu-dien-thuat-ngu/xml/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: XML -slug: Tu-dien-thuat-ngu/XML -translation_of: Glossary/XML ---- -

eXtensible Markup Language (XML) là ngôn ngữ đánh dấu chung được W3C đặc tả. Ngành Công nghệ thông tin (IT) sử dụng nhiều ngôn ngữ dựa trên XML như là ngôn ngữ mô tả dữ liệu.

- -

Các thẻ XML tương tự như các thẻ HTML, nhưng XML linh hoạt hơn nhiều bởi nó cho phép người dùng tự định nghĩa các thẻ riêng của họ. Theo cách này, XML hoạt động như một ngôn ngữ meta, nó có thể dùng để định nghĩa các ngôn ngữ khác, chẳng hạn như {{Glossary("RSS")}}. Ngoài ra, HTML là ngôn ngữ trình bày, trong khi XML là ngôn ngữ mô tả dữ liệu. Điều này có nghĩa là XML có phạm vi hoạt động rộng hơn thay vì chỉ ở trên Web. Ví dụ, dịch vụ Web có thể dùng XML để trao đổi request (yêu cầu) và response (phản hồi).

- -

Tìm đọc thêm

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