From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- files/bn/_redirects.txt | 49 - files/bn/_wikihistory.json | 946 ------ .../learn/css/first_steps/how_css_works/index.html | 105 - .../web/api/canvas_api/tutorial/index.html | 44 - .../web/api/document_object_model/index.html | 23 - files/bn/conflicting/web/guide/index.html | 100 - files/bn/glossary/api/index.html | 20 - files/bn/glossary/bandwidth/index.html | 12 - files/bn/glossary/dhtml/index.html | 16 - files/bn/glossary/index.html | 27 - files/bn/glossary/localization/index.html | 66 - files/bn/glossary/webrtc/index.html | 37 - .../learn/css/building_blocks/selectors/index.html | 356 --- .../building_blocks/values_and_units/index.html | 282 -- files/bn/learn/css/css_layout/index.html | 303 -- .../first_steps/how_css_is_structured/index.html | 134 - .../learn/css/first_steps/how_css_works/index.html | 128 - files/bn/learn/css/first_steps/index.html | 29 - .../learn/css/howto/generated_content/index.html | 133 - files/bn/learn/css/howto/index.html | 88 - files/bn/learn/css/index.html | 67 - .../learn/css/styling_text/fundamentals/index.html | 111 - files/bn/learn/forms/index.html | 343 --- files/bn/learn/html/index.html | 50 - .../bn/learn/html/introduction_to_html/index.html | 73 - files/bn/learn/index.html | 99 - files/bn/learn/javascript/first_steps/index.html | 70 - .../first_steps/what_is_javascript/index.html | 422 --- files/bn/learn/javascript/index.html | 55 - files/bn/learn/server-side/django/index.html | 64 - files/bn/learn/server-side/first_steps/index.html | 53 - .../first_steps/website_security/index.html | 180 -- files/bn/learn/server-side/index.html | 59 - files/bn/mdn/at_ten/index.html | 37 - files/bn/mdn/contribute/getting_started/index.html | 130 - .../convert_code_samples_to_be_live/index.html | 38 - .../howto/create_and_edit_pages/index.html | 26 - files/bn/mdn/contribute/howto/index.html | 13 - files/bn/mdn/contribute/index.html | 70 - files/bn/mdn/guidelines/index.html | 13 - .../mdn/guidelines/writing_style_guide/index.html | 555 ---- files/bn/mdn/index.html | 38 - files/bn/mdn/structures/index.html | 16 - files/bn/mdn/structures/macros/index.html | 48 - files/bn/mozilla/add-ons/index.html | 95 - files/bn/mozilla/add-ons/webextensions/index.html | 91 - .../what_are_webextensions/index.html | 95 - .../your_first_webextension/index.html | 143 - files/bn/mozilla/firefox/index.html | 60 - files/bn/mozilla/firefox/releases/index.html | 11 - files/bn/mozilla/index.html | 13 - files/bn/orphaned/mdn/community/index.html | 52 - .../mdn/community/whats_happening/index.html | 29 - .../howto/create_an_mdn_account/index.html | 30 - files/bn/orphaned/web/guide/events/index.html | 38 - files/bn/tools/3d_view/index.html | 97 - files/bn/tools/index.html | 187 -- files/bn/tools/page_inspector/index.html | 280 -- files/bn/tools/style_editor/index.html | 94 - files/bn/web/accessibility/index.html | 65 - files/bn/web/api/battery_status_api/index.html | 156 - files/bn/web/api/canvas_api/index.html | 74 - files/bn/web/api/canvas_api/tutorial/index.html | 48 - files/bn/web/api/document/hasfocus/index.html | 67 - files/bn/web/api/document_object_model/index.html | 92 - files/bn/web/api/event/index.html | 216 -- files/bn/web/api/event/preventdefault/index.html | 160 -- files/bn/web/api/index.html | 15 - files/bn/web/api/indexeddb_api/index.html | 182 -- files/bn/web/api/inputevent/index.html | 98 - files/bn/web/api/stylesheet/index.html | 72 - files/bn/web/api/webrtc_api/index.html | 41 - files/bn/web/css/css_animations/index.html | 136 - files/bn/web/css/css_transforms/index.html | 152 - files/bn/web/css/element()/index.html | 113 - files/bn/web/css/index.html | 73 - files/bn/web/events/index.html | 3011 -------------------- files/bn/web/guide/api/index.html | 25 - files/bn/web/guide/graphics/index.html | 54 - .../bn/web/guide/html/editable_content/index.html | 45 - files/bn/web/guide/html/html5/index.html | 181 -- .../html/html5/introduction_to_html5/index.html | 30 - files/bn/web/guide/index.html | 20 - files/bn/web/guide/performance/index.html | 9 - .../bn/web/html/attributes/crossorigin/index.html | 131 - files/bn/web/html/block-level_elements/index.html | 121 - files/bn/web/html/element/a/index.html | 495 ---- files/bn/web/html/element/article/index.html | 110 - files/bn/web/html/element/b/index.html | 159 -- files/bn/web/html/element/blockquote/index.html | 155 - files/bn/web/html/element/index.html | 216 -- files/bn/web/html/element/section/index.html | 129 - files/bn/web/html/element/summary/index.html | 144 - .../html/global_attributes/accesskey/index.html | 146 - .../global_attributes/contenteditable/index.html | 103 - .../html/global_attributes/draggable/index.html | 101 - .../web/html/global_attributes/hidden/index.html | 105 - files/bn/web/html/global_attributes/index.html | 463 --- .../web/html/global_attributes/itemprop/index.html | 19 - .../html/global_attributes/itemscope/index.html | 27 - .../web/html/global_attributes/tabindex/index.html | 111 - .../html/global_attributes/translate/index.html | 96 - files/bn/web/html/index.html | 80 - files/bn/web/http/index.html | 90 - files/bn/web/http/status/index.html | 202 -- files/bn/web/index.html | 82 - .../a_re-introduction_to_javascript/index.html | 968 ------- files/bn/web/javascript/data_structures/index.html | 116 - .../javascript/guide/grammar_and_types/index.html | 635 ----- files/bn/web/javascript/guide/index.html | 123 - files/bn/web/javascript/index.html | 130 - .../inheritance_and_the_prototype_chain/index.html | 177 -- .../web/javascript/language_resources/index.html | 103 - .../javascript/reference/global_objects/index.html | 177 -- .../reference/global_objects/isfinite/index.html | 130 - .../reference/global_objects/number/index.html | 218 -- .../global_objects/number/isfinite/index.html | 125 - files/bn/web/javascript/reference/index.html | 48 - .../web/javascript/reference/statements/index.html | 127 - files/bn/web/javascript/typed_arrays/index.html | 268 -- files/bn/web/reference/index.html | 46 - files/bn/web/svg/element/index.html | 169 -- files/bn/web/svg/index.html | 93 - 123 files changed, 18916 deletions(-) delete mode 100644 files/bn/_redirects.txt delete mode 100644 files/bn/_wikihistory.json delete mode 100644 files/bn/conflicting/learn/css/first_steps/how_css_works/index.html delete mode 100644 files/bn/conflicting/web/api/canvas_api/tutorial/index.html delete mode 100644 files/bn/conflicting/web/api/document_object_model/index.html delete mode 100644 files/bn/conflicting/web/guide/index.html delete mode 100644 files/bn/glossary/api/index.html delete mode 100644 files/bn/glossary/bandwidth/index.html delete mode 100644 files/bn/glossary/dhtml/index.html delete mode 100644 files/bn/glossary/index.html delete mode 100644 files/bn/glossary/localization/index.html delete mode 100644 files/bn/glossary/webrtc/index.html delete mode 100644 files/bn/learn/css/building_blocks/selectors/index.html delete mode 100644 files/bn/learn/css/building_blocks/values_and_units/index.html delete mode 100644 files/bn/learn/css/css_layout/index.html delete mode 100644 files/bn/learn/css/first_steps/how_css_is_structured/index.html delete mode 100644 files/bn/learn/css/first_steps/how_css_works/index.html delete mode 100644 files/bn/learn/css/first_steps/index.html delete mode 100644 files/bn/learn/css/howto/generated_content/index.html delete mode 100644 files/bn/learn/css/howto/index.html delete mode 100644 files/bn/learn/css/index.html delete mode 100644 files/bn/learn/css/styling_text/fundamentals/index.html delete mode 100644 files/bn/learn/forms/index.html delete mode 100644 files/bn/learn/html/index.html delete mode 100644 files/bn/learn/html/introduction_to_html/index.html delete mode 100644 files/bn/learn/index.html delete mode 100644 files/bn/learn/javascript/first_steps/index.html delete mode 100644 files/bn/learn/javascript/first_steps/what_is_javascript/index.html delete mode 100644 files/bn/learn/javascript/index.html delete mode 100644 files/bn/learn/server-side/django/index.html delete mode 100644 files/bn/learn/server-side/first_steps/index.html delete mode 100644 files/bn/learn/server-side/first_steps/website_security/index.html delete mode 100644 files/bn/learn/server-side/index.html delete mode 100644 files/bn/mdn/at_ten/index.html delete mode 100644 files/bn/mdn/contribute/getting_started/index.html delete mode 100644 files/bn/mdn/contribute/howto/convert_code_samples_to_be_live/index.html delete mode 100644 files/bn/mdn/contribute/howto/create_and_edit_pages/index.html delete mode 100644 files/bn/mdn/contribute/howto/index.html delete mode 100644 files/bn/mdn/contribute/index.html delete mode 100644 files/bn/mdn/guidelines/index.html delete mode 100644 files/bn/mdn/guidelines/writing_style_guide/index.html delete mode 100644 files/bn/mdn/index.html delete mode 100644 files/bn/mdn/structures/index.html delete mode 100644 files/bn/mdn/structures/macros/index.html delete mode 100644 files/bn/mozilla/add-ons/index.html delete mode 100644 files/bn/mozilla/add-ons/webextensions/index.html delete mode 100644 files/bn/mozilla/add-ons/webextensions/what_are_webextensions/index.html delete mode 100644 files/bn/mozilla/add-ons/webextensions/your_first_webextension/index.html delete mode 100644 files/bn/mozilla/firefox/index.html delete mode 100644 files/bn/mozilla/firefox/releases/index.html delete mode 100644 files/bn/mozilla/index.html delete mode 100644 files/bn/orphaned/mdn/community/index.html delete mode 100644 files/bn/orphaned/mdn/community/whats_happening/index.html delete mode 100644 files/bn/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html delete mode 100644 files/bn/orphaned/web/guide/events/index.html delete mode 100644 files/bn/tools/3d_view/index.html delete mode 100644 files/bn/tools/index.html delete mode 100644 files/bn/tools/page_inspector/index.html delete mode 100644 files/bn/tools/style_editor/index.html delete mode 100644 files/bn/web/accessibility/index.html delete mode 100644 files/bn/web/api/battery_status_api/index.html delete mode 100644 files/bn/web/api/canvas_api/index.html delete mode 100644 files/bn/web/api/canvas_api/tutorial/index.html delete mode 100644 files/bn/web/api/document/hasfocus/index.html delete mode 100644 files/bn/web/api/document_object_model/index.html delete mode 100644 files/bn/web/api/event/index.html delete mode 100644 files/bn/web/api/event/preventdefault/index.html delete mode 100644 files/bn/web/api/index.html delete mode 100644 files/bn/web/api/indexeddb_api/index.html delete mode 100644 files/bn/web/api/inputevent/index.html delete mode 100644 files/bn/web/api/stylesheet/index.html delete mode 100644 files/bn/web/api/webrtc_api/index.html delete mode 100644 files/bn/web/css/css_animations/index.html delete mode 100644 files/bn/web/css/css_transforms/index.html delete mode 100644 files/bn/web/css/element()/index.html delete mode 100644 files/bn/web/css/index.html delete mode 100644 files/bn/web/events/index.html delete mode 100644 files/bn/web/guide/api/index.html delete mode 100644 files/bn/web/guide/graphics/index.html delete mode 100644 files/bn/web/guide/html/editable_content/index.html delete mode 100644 files/bn/web/guide/html/html5/index.html delete mode 100644 files/bn/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 files/bn/web/guide/index.html delete mode 100644 files/bn/web/guide/performance/index.html delete mode 100644 files/bn/web/html/attributes/crossorigin/index.html delete mode 100644 files/bn/web/html/block-level_elements/index.html delete mode 100644 files/bn/web/html/element/a/index.html delete mode 100644 files/bn/web/html/element/article/index.html delete mode 100644 files/bn/web/html/element/b/index.html delete mode 100644 files/bn/web/html/element/blockquote/index.html delete mode 100644 files/bn/web/html/element/index.html delete mode 100644 files/bn/web/html/element/section/index.html delete mode 100644 files/bn/web/html/element/summary/index.html delete mode 100644 files/bn/web/html/global_attributes/accesskey/index.html delete mode 100644 files/bn/web/html/global_attributes/contenteditable/index.html delete mode 100644 files/bn/web/html/global_attributes/draggable/index.html delete mode 100644 files/bn/web/html/global_attributes/hidden/index.html delete mode 100644 files/bn/web/html/global_attributes/index.html delete mode 100644 files/bn/web/html/global_attributes/itemprop/index.html delete mode 100644 files/bn/web/html/global_attributes/itemscope/index.html delete mode 100644 files/bn/web/html/global_attributes/tabindex/index.html delete mode 100644 files/bn/web/html/global_attributes/translate/index.html delete mode 100644 files/bn/web/html/index.html delete mode 100644 files/bn/web/http/index.html delete mode 100644 files/bn/web/http/status/index.html delete mode 100644 files/bn/web/index.html delete mode 100644 files/bn/web/javascript/a_re-introduction_to_javascript/index.html delete mode 100644 files/bn/web/javascript/data_structures/index.html delete mode 100644 files/bn/web/javascript/guide/grammar_and_types/index.html delete mode 100644 files/bn/web/javascript/guide/index.html delete mode 100644 files/bn/web/javascript/index.html delete mode 100644 files/bn/web/javascript/inheritance_and_the_prototype_chain/index.html delete mode 100644 files/bn/web/javascript/language_resources/index.html delete mode 100644 files/bn/web/javascript/reference/global_objects/index.html delete mode 100644 files/bn/web/javascript/reference/global_objects/isfinite/index.html delete mode 100644 files/bn/web/javascript/reference/global_objects/number/index.html delete mode 100644 files/bn/web/javascript/reference/global_objects/number/isfinite/index.html delete mode 100644 files/bn/web/javascript/reference/index.html delete mode 100644 files/bn/web/javascript/reference/statements/index.html delete mode 100644 files/bn/web/javascript/typed_arrays/index.html delete mode 100644 files/bn/web/reference/index.html delete mode 100644 files/bn/web/svg/element/index.html delete mode 100644 files/bn/web/svg/index.html (limited to 'files/bn') diff --git a/files/bn/_redirects.txt b/files/bn/_redirects.txt deleted file mode 100644 index f9c652b1fd..0000000000 --- a/files/bn/_redirects.txt +++ /dev/null @@ -1,49 +0,0 @@ -# DO NOT EDIT THIS FILE MANUALLY. -# Use the CLI instead: -# -# yarn content add-redirect -# -# FROM-URL TO-URL -/bn/docs/DOM /bn/docs/Web/API/Document_Object_Model -/bn/docs/HTML/HTML5 /bn/docs/Web/Guide/HTML/HTML5 -/bn/docs/HTML/HTML5/Introduction_to_HTML5 /bn/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -/bn/docs/IndexedDB /bn/docs/Web/API/IndexedDB_API -/bn/docs/Learn/JavaScript/First_steps/জাভাস্ক্রিপ্ট-কী /bn/docs/Learn/JavaScript/First_steps/What_is_JavaScript -/bn/docs/Localization /bn/docs/Glossary/Localization -/bn/docs/MDN/Community /bn/docs/orphaned/MDN/Community -/bn/docs/MDN/Community/Whats_happening /bn/docs/orphaned/MDN/Community/Whats_happening -/bn/docs/MDN/Contribute/Content /bn/docs/MDN/Guidelines -/bn/docs/MDN/Contribute/Content/Style_guide /bn/docs/MDN/Guidelines/Writing_style_guide -/bn/docs/MDN/Contribute/Creating_and_editing_pages /bn/docs/MDN/Contribute/Howto/Create_and_edit_pages -/bn/docs/MDN/Contribute/Howto/Create_an_MDN_account /bn/docs/orphaned/MDN/Contribute/Howto/Create_an_MDN_account -/bn/docs/MDN/Contribute/Structures /bn/docs/MDN/Structures -/bn/docs/MDN/Contribute/Structures/Macros /bn/docs/MDN/Structures/Macros -/bn/docs/MDN/Getting_started /bn/docs/MDN/Contribute/Getting_started -/bn/docs/MDN/Guidelines/Style_guide /bn/docs/MDN/Guidelines/Writing_style_guide -/bn/docs/MDN_at_ten /bn/docs/MDN/At_ten -/bn/docs/Mozilla/ফায়ারফক্স /bn/docs/Mozilla/Firefox -/bn/docs/Mozilla/ফায়ারফক্স/রিলিজস /bn/docs/Mozilla/Firefox/Releases -/bn/docs/Tools/ত্রিমাত্রিক_দর্শন /bn/docs/Tools/3D_View -/bn/docs/Web/CSS/Getting_Started /bn/docs/Learn/CSS/First_steps -/bn/docs/Web/CSS/Getting_Started/Color /bn/docs/Learn/CSS/Building_blocks/Values_and_units -/bn/docs/Web/CSS/Getting_Started/How_CSS_works /bn/docs/Learn/CSS/First_steps/How_CSS_works -/bn/docs/Web/CSS/Getting_Started/Readable_CSS /bn/docs/Learn/CSS/First_steps/How_CSS_is_structured -/bn/docs/Web/CSS/Getting_Started/Text_styles /bn/docs/Learn/CSS/Styling_text/Fundamentals -/bn/docs/Web/CSS/Getting_Started/Why_use_CSS /bn/docs/conflicting/Learn/CSS/First_steps/How_CSS_works -/bn/docs/Web/CSS/Getting_Started/নই /bn/docs/Learn/CSS/Building_blocks/Selectors -/bn/docs/Web/CSS/Getting_Started/লে-আউট /bn/docs/Learn/CSS/CSS_layout -/bn/docs/Web/CSS/element /bn/docs/Web/CSS/element() -/bn/docs/Web/Guide/API/DOM /bn/docs/conflicting/Web/API/Document_Object_Model -/bn/docs/Web/Guide/API/WebRTC /bn/docs/Web/API/WebRTC_API -/bn/docs/Web/Guide/Events /bn/docs/orphaned/Web/Guide/Events -/bn/docs/Web/Guide/HTML/Canvas_tutorial /bn/docs/Web/API/Canvas_API/Tutorial -/bn/docs/Web/Guide/HTML/Content_Editable /bn/docs/Web/Guide/HTML/Editable_content -/bn/docs/Web/Guide/HTML/Forms /bn/docs/Learn/Forms -/bn/docs/Web/Guide/গ্রাফিক্স /bn/docs/Web/Guide/Graphics -/bn/docs/Web/HTML/CORS_settings_attributes /bn/docs/Web/HTML/Attributes/crossorigin -/bn/docs/Web/HTML/Canvas /bn/docs/Web/API/Canvas_API -/bn/docs/Web/HTML/Canvas/Tutorial /bn/docs/conflicting/Web/API/Canvas_API/Tutorial -/bn/docs/Web/HTML/Focus_management_in_HTML /bn/docs/Web/API/Document/hasFocus -/bn/docs/Web/JavaScript/ভাষার_রিসোর্স /bn/docs/Web/JavaScript/Language_Resources -/bn/docs/Web_Development /bn/docs/conflicting/Web/Guide -/bn/docs/en /en-US/ diff --git a/files/bn/_wikihistory.json b/files/bn/_wikihistory.json deleted file mode 100644 index 940362e7ff..0000000000 --- a/files/bn/_wikihistory.json +++ /dev/null @@ -1,946 +0,0 @@ -{ - "Glossary": { - "modified": "2020-10-07T11:06:43.575Z", - "contributors": [ - "peterbe", - "SphinxKnight", - "wbamberg", - "tuxboy", - "Jeremie" - ] - }, - "Glossary/API": { - "modified": "2019-03-23T22:37:26.215Z", - "contributors": [ - "tuxboy" - ] - }, - "Glossary/Bandwidth": { - "modified": "2019-03-23T22:37:28.297Z", - "contributors": [ - "tuxboy" - ] - }, - "Glossary/DHTML": { - "modified": "2019-03-23T22:58:37.799Z", - "contributors": [ - "smsnobin77" - ] - }, - "Glossary/Localization": { - "modified": "2019-03-23T23:27:22.624Z", - "contributors": [ - "badsha_eee" - ] - }, - "Glossary/WebRTC": { - "modified": "2019-03-23T22:37:31.573Z", - "contributors": [ - "tuxboy" - ] - }, - "Learn": { - "modified": "2020-09-11T13:07:06.291Z", - "contributors": [ - "mdbiploballi81", - "mizanursajid", - "SphinxKnight", - "svarlamov", - "username-abdur", - "NaSabbir", - "Shubhobd", - "Bolaram", - "kscarfone" - ] - }, - "Learn/CSS": { - "modified": "2020-07-16T22:25:32.146Z", - "contributors": [ - "josh-wong" - ] - }, - "Learn/CSS/Building_blocks/Selectors": { - "modified": "2019-03-23T23:10:32.206Z", - "contributors": [ - "rabeya" - ] - }, - "Learn/CSS/Building_blocks/Values_and_units": { - "modified": "2019-03-23T23:11:32.781Z", - "contributors": [ - "Saki336", - "Maliha81" - ] - }, - "Learn/CSS/CSS_layout": { - "modified": "2019-03-23T23:11:30.667Z", - "contributors": [ - "Prome" - ] - }, - "Learn/CSS/First_steps": { - "modified": "2019-03-23T23:31:51.964Z", - "contributors": [ - "teoli", - "tuxboy" - ] - }, - "Learn/CSS/First_steps/How_CSS_is_structured": { - "modified": "2019-03-23T23:10:14.661Z", - "contributors": [ - "teoli", - "amena-synthia" - ] - }, - "Learn/CSS/First_steps/How_CSS_works": { - "modified": "2019-03-23T23:21:45.414Z", - "contributors": [ - "Bolaram", - "mimzi_fahia", - "kamrunNaharRuma", - "teoli" - ] - }, - "Learn/CSS/Howto": { - "modified": "2020-07-16T22:25:41.478Z", - "contributors": [ - "chrisdavidmills" - ] - }, - "Learn/CSS/Howto/Generated_content": { - "modified": "2020-07-16T22:25:46.972Z", - "contributors": [ - "chrisdavidmills", - "rsarah", - "Saki336", - "MalihaDipty" - ] - }, - "Learn/CSS/Styling_text/Fundamentals": { - "modified": "2019-03-23T23:11:32.510Z", - "contributors": [ - "MalihaDipty" - ] - }, - "Learn/Forms": { - "modified": "2020-07-16T22:20:53.344Z", - "contributors": [ - "kmsuzan" - ] - }, - "Learn/HTML": { - "modified": "2020-07-16T22:22:14.837Z", - "contributors": [ - "Saiful000" - ] - }, - "Learn/HTML/Introduction_to_HTML": { - "modified": "2020-07-16T22:22:45.239Z", - "contributors": [ - "onurbasturk" - ] - }, - "Learn/JavaScript": { - "modified": "2020-07-16T22:29:36.981Z", - "contributors": [ - "roman_sayed007" - ] - }, - "Learn/JavaScript/First_steps": { - "modified": "2020-07-16T22:29:48.439Z", - "contributors": [ - "beingtaki", - "SphinxKnight" - ] - }, - "Learn/JavaScript/First_steps/What_is_JavaScript": { - "modified": "2020-07-23T11:41:02.501Z", - "contributors": [ - "promisind" - ] - }, - "Learn/Server-side": { - "modified": "2020-07-16T22:35:55.391Z", - "contributors": [ - "chrisdavidmills" - ] - }, - "Learn/Server-side/Django": { - "modified": "2020-11-21T09:20:44.374Z", - "contributors": [ - "libnum10", - "Tariqul2h2" - ] - }, - "Learn/Server-side/First_steps": { - "modified": "2020-07-16T22:36:07.321Z", - "contributors": [ - "chrisdavidmills" - ] - }, - "Learn/Server-side/First_steps/Website_security": { - "modified": "2020-07-16T22:36:27.441Z", - "contributors": [ - "promisind" - ] - }, - "MDN": { - "modified": "2020-02-19T18:52:16.503Z", - "contributors": [ - "jswisher", - "SphinxKnight", - "wbamberg", - "Jeremie", - "Bolaram", - "teoli" - ] - }, - "MDN/At_ten": { - "modified": "2019-03-23T22:50:40.078Z", - "contributors": [ - "Bolaram", - "badsha_eee" - ] - }, - "MDN/Contribute": { - "modified": "2019-01-16T18:29:06.865Z", - "contributors": [ - "wbamberg", - "Bolaram", - "faria", - "teoli", - "Prome", - "Sheppy" - ] - }, - "MDN/Contribute/Getting_started": { - "modified": "2020-09-30T17:09:15.654Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "Bolaram", - "badsha_eee", - "shafiul" - ] - }, - "MDN/Contribute/Howto": { - "modified": "2020-12-14T11:30:10.929Z", - "contributors": [ - "wbamberg", - "Sheppy" - ] - }, - "MDN/Contribute/Howto/Convert_code_samples_to_be_live": { - "modified": "2019-01-16T18:29:38.875Z", - "contributors": [ - "wbamberg", - "badsha_eee" - ] - }, - "MDN/Contribute/Howto/Create_and_edit_pages": { - "modified": "2019-01-16T17:44:34.088Z", - "contributors": [ - "wbamberg", - "teoli", - "badsha_eee" - ] - }, - "MDN/Guidelines": { - "modified": "2020-09-30T15:28:12.396Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "Sheppy" - ] - }, - "MDN/Guidelines/Writing_style_guide": { - "modified": "2020-09-30T15:28:13.100Z", - "contributors": [ - "chrisdavidmills", - "jswisher", - "wbamberg", - "shamimsw" - ] - }, - "MDN/Structures": { - "modified": "2020-09-30T09:04:16.032Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "jswisher" - ] - }, - "MDN/Structures/Macros": { - "modified": "2020-09-30T09:04:16.202Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "jswisher" - ] - }, - "Mozilla": { - "modified": "2019-03-23T23:34:34.377Z", - "contributors": [ - "Bolaram", - "ethertank" - ] - }, - "Mozilla/Add-ons": { - "modified": "2019-09-09T13:12:22.427Z", - "contributors": [ - "SphinxKnight", - "ToufiqAminRumi", - "Bolaram", - "aialvi", - "SOFT", - "ershadul", - "wbamberg" - ] - }, - "Mozilla/Add-ons/WebExtensions": { - "modified": "2019-03-18T21:06:37.679Z", - "contributors": [ - "wbamberg" - ] - }, - "Mozilla/Add-ons/WebExtensions/What_are_WebExtensions": { - "modified": "2019-03-23T22:16:37.686Z", - "contributors": [ - "MotivatedbyGod" - ] - }, - "Mozilla/Add-ons/WebExtensions/Your_first_WebExtension": { - "modified": "2019-03-18T21:06:52.270Z", - "contributors": [ - "jQsafi" - ] - }, - "Mozilla/Firefox": { - "modified": "2020-01-18T12:34:49.048Z", - "contributors": [ - "leela52452", - "SphinxKnight", - "wbamberg", - "jwhitlock", - "badsha_eee", - "Bolaram", - "ashickur_noor", - "Sudipto.chy" - ] - }, - "Mozilla/Firefox/Releases": { - "modified": "2019-04-09T14:31:52.314Z", - "contributors": [ - "wbamberg", - "shafiul", - "Sudipto.chy" - ] - }, - "Tools": { - "modified": "2020-07-16T22:44:13.511Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "ashikCodecamper", - "Bolaram", - "jQsafi", - "badsha_eee", - "nasirkhan", - "adhikarichiranjibi", - "arifrhb", - "tuxboy" - ] - }, - "Tools/3D_View": { - "modified": "2020-07-16T22:34:24.936Z", - "contributors": [ - "wbamberg", - "MUHAMMAD_KHAN" - ] - }, - "Tools/Page_Inspector": { - "modified": "2020-07-16T22:34:26.736Z", - "contributors": [ - "wbamberg", - "bassam", - "Prome" - ] - }, - "Tools/Style_Editor": { - "modified": "2020-07-16T22:34:59.634Z", - "contributors": [ - "wbamberg", - "hossainmosharraf", - "Bolaram", - "jsx", - "Fariha_Fiha", - "mimzi_fahia" - ] - }, - "Web": { - "modified": "2019-01-16T17:29:41.603Z", - "contributors": [ - "Bolaram", - "tohin007", - "sap", - "DxMuhit", - "badsha_eee", - "towfiqueanam", - "bellayet", - "nasirkhan", - "tuxboy", - "Jan.Ruzicka" - ] - }, - "Web/API": { - "modified": "2019-03-18T20:48:16.500Z", - "contributors": [ - "duduindo", - "tuxboy", - "cse031sust02", - "khalid32", - "jswisher" - ] - }, - "Web/API/Battery_Status_API": { - "modified": "2019-03-23T22:13:35.833Z", - "contributors": [ - "itskawsar" - ] - }, - "Web/API/Canvas_API": { - "modified": "2019-03-23T23:31:43.205Z", - "contributors": [ - "SphinxKnight", - "spsumon44", - "teoli", - "tuxboy" - ] - }, - "Web/API/Canvas_API/Tutorial": { - "modified": "2019-03-23T23:22:41.275Z", - "contributors": [ - "mahmudtamim" - ] - }, - "Web/API/Document/hasFocus": { - "modified": "2019-03-23T22:41:57.848Z", - "contributors": [ - "ToufiqAminRumi" - ] - }, - "Web/API/Document_Object_Model": { - "modified": "2019-03-23T23:25:08.675Z", - "contributors": [ - "badsha_eee", - "teoli" - ] - }, - "Web/API/Event": { - "modified": "2020-10-15T22:30:24.560Z", - "contributors": [ - "Achilles1515" - ] - }, - "Web/API/Event/preventDefault": { - "modified": "2020-10-15T22:30:20.746Z", - "contributors": [ - "joydesigner24" - ] - }, - "Web/API/IndexedDB_API": { - "modified": "2020-01-13T04:47:42.155Z", - "contributors": [ - "chrisdavidmills", - "Bolaram", - "towfiqueanam" - ] - }, - "Web/API/InputEvent": { - "modified": "2019-03-18T21:09:05.849Z", - "contributors": [ - "fscholz", - "tuxboy" - ] - }, - "Web/API/StyleSheet": { - "modified": "2019-03-23T23:18:17.872Z", - "contributors": [ - "badsha_eee" - ] - }, - "Web/API/WebRTC_API": { - "modified": "2019-03-23T22:37:29.214Z", - "contributors": [ - "tuxboy" - ] - }, - "Web/Accessibility": { - "modified": "2019-09-11T08:22:02.036Z", - "contributors": [ - "SphinxKnight", - "DxMuhit", - "badsha_eee" - ] - }, - "Web/CSS": { - "modified": "2019-09-11T03:33:34.664Z", - "contributors": [ - "SphinxKnight", - "arifulhasan", - "MarufSharia", - "DxMuhit", - "anistuhin", - "teoli", - "badsha_eee", - "Maliha81", - "sharminsultana977", - "tuxboy", - "haboqueferus" - ] - }, - "Web/CSS/CSS_Animations": { - "modified": "2019-03-23T22:43:46.842Z", - "contributors": [ - "teoli" - ] - }, - "Web/CSS/CSS_Transforms": { - "modified": "2019-03-18T21:15:59.884Z", - "contributors": [ - "Sebastianz", - "Prinz_Rana", - "teoli" - ] - }, - "Web/CSS/element()": { - "modified": "2020-11-10T11:02:42.501Z", - "contributors": [ - "chrisdavidmills", - "heea" - ] - }, - "Web/Events": { - "modified": "2019-04-30T14:14:57.706Z", - "contributors": [ - "wbamberg", - "chrisdavidmills" - ] - }, - "Web/Guide": { - "modified": "2019-03-23T23:29:31.562Z", - "contributors": [ - "tuxboy" - ] - }, - "Web/Guide/API": { - "modified": "2019-09-11T09:42:45.137Z", - "contributors": [ - "SphinxKnight", - "tuxboy", - "Sheppy" - ] - }, - "Web/Guide/Graphics": { - "modified": "2019-03-23T23:20:59.963Z", - "contributors": [ - "shakil18" - ] - }, - "Web/Guide/HTML/Editable_content": { - "modified": "2019-03-23T23:22:35.093Z", - "contributors": [ - "sourav1" - ] - }, - "Web/Guide/HTML/HTML5": { - "modified": "2019-03-23T23:35:15.435Z", - "contributors": [ - "teoli", - "badsha_eee", - "ashickur_noor", - "tuxboy" - ] - }, - "Web/Guide/HTML/HTML5/Introduction_to_HTML5": { - "modified": "2019-03-23T23:22:57.838Z", - "contributors": [ - "shafiul", - "Maliha81", - "jaggedzak" - ] - }, - "Web/Guide/Performance": { - "modified": "2019-03-23T23:20:59.790Z", - "contributors": [ - "shakil18" - ] - }, - "Web/HTML": { - "modified": "2019-09-10T15:18:25.692Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "surajitbasak109", - "Bolaram", - "stephaniehobson", - "teoli", - "jaggedzak", - "badsha_eee", - "khalid32", - "mobarak.ali", - "nasirkhan", - "imondal007", - "mahir_chowdhury", - "ershadul" - ] - }, - "Web/HTML/Attributes/crossorigin": { - "modified": "2019-03-23T22:42:33.032Z", - "contributors": [ - "hmmonir" - ] - }, - "Web/HTML/Block-level_elements": { - "modified": "2019-03-23T22:42:54.998Z", - "contributors": [ - "ToufiqAminRumi" - ] - }, - "Web/HTML/Element": { - "modified": "2019-03-23T23:34:45.682Z", - "contributors": [ - "teoli", - "shafiul", - "moni", - "allergic" - ] - }, - "Web/HTML/Element/a": { - "modified": "2019-03-23T22:41:45.081Z", - "contributors": [ - "Bolaram" - ] - }, - "Web/HTML/Element/article": { - "modified": "2019-03-23T23:18:58.987Z", - "contributors": [ - "teoli", - "badsha_eee" - ] - }, - "Web/HTML/Element/b": { - "modified": "2019-03-23T22:42:07.195Z", - "contributors": [ - "hmmonir" - ] - }, - "Web/HTML/Element/blockquote": { - "modified": "2019-03-23T22:41:52.471Z", - "contributors": [ - "hmmonir" - ] - }, - "Web/HTML/Element/section": { - "modified": "2019-03-23T23:18:59.164Z", - "contributors": [ - "wbamberg", - "teoli", - "badsha_eee" - ] - }, - "Web/HTML/Element/summary": { - "modified": "2019-03-23T22:41:46.042Z", - "contributors": [ - "hmmonir" - ] - }, - "Web/HTML/Global_attributes": { - "modified": "2019-03-23T22:47:22.868Z", - "contributors": [ - "chrisdavidmills" - ] - }, - "Web/HTML/Global_attributes/accesskey": { - "modified": "2019-03-23T22:42:44.253Z", - "contributors": [ - "hmmonir" - ] - }, - "Web/HTML/Global_attributes/contenteditable": { - "modified": "2019-03-23T22:41:41.817Z", - "contributors": [ - "rubayatjamila" - ] - }, - "Web/HTML/Global_attributes/draggable": { - "modified": "2019-03-23T22:42:46.655Z", - "contributors": [ - "jswisher", - "Akashsec" - ] - }, - "Web/HTML/Global_attributes/hidden": { - "modified": "2019-03-23T22:42:27.791Z", - "contributors": [ - "hmmonir" - ] - }, - "Web/HTML/Global_attributes/itemprop": { - "modified": "2019-03-23T22:42:57.832Z", - "contributors": [ - "KawsarAhmed" - ] - }, - "Web/HTML/Global_attributes/itemscope": { - "modified": "2019-03-23T22:42:35.325Z", - "contributors": [ - "hmmonir" - ] - }, - "Web/HTML/Global_attributes/tabindex": { - "modified": "2019-03-23T22:41:47.412Z", - "contributors": [ - "ToufiqAminRumi" - ] - }, - "Web/HTML/Global_attributes/translate": { - "modified": "2019-03-23T22:42:39.382Z", - "contributors": [ - "hmmonir" - ] - }, - "Web/HTTP": { - "modified": "2020-09-11T13:11:42.013Z", - "contributors": [ - "SphinxKnight" - ] - }, - "Web/HTTP/Status": { - "modified": "2020-10-15T22:34:19.044Z", - "contributors": [ - "SphinxKnightt" - ] - }, - "Web/JavaScript": { - "modified": "2020-03-12T19:37:57.288Z", - "contributors": [ - "SphinxKnight", - "Naahid", - "pollmix", - "mobarak.ali", - "roman_sayed007", - "fscholz", - "teoli", - "badsha_eee", - "invisibl3_kngiht", - "shafiul", - "tuxboy", - "maktrix", - "mythrobin" - ] - }, - "Web/JavaScript/A_re-introduction_to_JavaScript": { - "modified": "2020-03-12T19:38:25.980Z", - "contributors": [ - "pollmix", - "fscholz", - "teoli", - "tuxboy", - "shafiul" - ] - }, - "Web/JavaScript/Data_structures": { - "modified": "2020-03-12T19:39:11.158Z", - "contributors": [ - "pollmix", - "fscholz", - "nhshojib", - "teoli", - "SOFT", - "shafiul" - ] - }, - "Web/JavaScript/Guide": { - "modified": "2020-03-12T19:38:30.752Z", - "contributors": [ - "jamal-pb95", - "fscholz", - "badsha_eee", - "teoli", - "shafiul", - "mobarak.ali", - "tuxboy" - ] - }, - "Web/JavaScript/Guide/Grammar_and_types": { - "modified": "2020-03-12T19:38:38.025Z", - "contributors": [ - "wbamberg", - "jamal-pb95", - "itskawsar", - "fscholz", - "teoli", - "mobarak.ali", - "shafiul" - ] - }, - "Web/JavaScript/Inheritance_and_the_prototype_chain": { - "modified": "2020-03-12T19:39:12.963Z", - "contributors": [ - "hasancp", - "fscholz", - "teoli", - "cse031sust02", - "shafiul", - "NOMAN123" - ] - }, - "Web/JavaScript/Language_Resources": { - "modified": "2020-03-12T19:39:11.262Z", - "contributors": [ - "fscholz", - "teoli", - "shafiul", - "arifrhb" - ] - }, - "Web/JavaScript/Reference": { - "modified": "2020-03-12T19:38:33.465Z", - "contributors": [ - "fscholz", - "teoli", - "invisibl3_kngiht", - "badsha_eee", - "shafiul", - "Norbert" - ] - }, - "Web/JavaScript/Reference/Global_Objects": { - "modified": "2020-09-18T16:05:20.895Z", - "contributors": [ - "safikulmiya961", - "fscholz", - "teoli", - "Sheppy" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number": { - "modified": "2019-03-23T23:25:01.088Z", - "contributors": [ - "wbamberg", - "fscholz", - "teoli", - "rajat_agarwal" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/isFinite": { - "modified": "2019-03-23T23:25:14.032Z", - "contributors": [ - "SphinxKnight", - "fscholz", - "teoli", - "tuxboy" - ] - }, - "Web/JavaScript/Reference/Global_Objects/isFinite": { - "modified": "2020-03-12T19:38:39.553Z", - "contributors": [ - "fscholz", - "teoli", - "tuxboy" - ] - }, - "Web/JavaScript/Reference/statements": { - "modified": "2020-03-12T19:39:11.018Z", - "contributors": [ - "fscholz", - "teoli", - "badsha_eee" - ] - }, - "Web/JavaScript/Typed_arrays": { - "modified": "2020-11-21T03:17:19.356Z", - "contributors": [ - "mohammadshohagulislam" - ] - }, - "Web/Reference": { - "modified": "2019-03-23T23:25:25.072Z", - "contributors": [ - "nasirkhan" - ] - }, - "Web/SVG": { - "modified": "2019-03-23T23:22:25.227Z", - "contributors": [ - "teoli" - ] - }, - "Web/SVG/Element": { - "modified": "2019-03-23T23:22:32.311Z", - "contributors": [ - "munny" - ] - }, - "conflicting/Learn/CSS/First_steps/How_CSS_works": { - "modified": "2019-03-23T23:21:57.361Z", - "contributors": [ - "Bolaram", - "teoli", - "mimzi_fahia" - ] - }, - "conflicting/Web/API/Canvas_API/Tutorial": { - "modified": "2019-03-23T23:31:44.732Z", - "contributors": [ - "teoli", - "tuxboy" - ] - }, - "conflicting/Web/API/Document_Object_Model": { - "modified": "2019-01-16T18:05:53.775Z", - "contributors": [ - "shahvishald" - ] - }, - "conflicting/Web/Guide": { - "modified": "2019-03-23T23:31:46.369Z", - "contributors": [ - "tuxboy", - "ethertank" - ] - }, - "orphaned/MDN/Community": { - "modified": "2019-09-04T05:42:20.308Z", - "contributors": [ - "Naahid", - "voiceofmoments", - "wbamberg", - "Shubhobd", - "teoli", - "badsha_eee" - ] - }, - "orphaned/MDN/Community/Whats_happening": { - "modified": "2019-03-23T23:27:03.844Z", - "contributors": [ - "wbamberg", - "teoli", - "badsha_eee" - ] - }, - "orphaned/MDN/Contribute/Howto/Create_an_MDN_account": { - "modified": "2019-01-16T18:29:56.107Z", - "contributors": [ - "wbamberg", - "badsha_eee" - ] - }, - "orphaned/Web/Guide/Events": { - "modified": "2019-03-23T23:10:51.342Z", - "contributors": [ - "Jeremie" - ] - } -} diff --git a/files/bn/conflicting/learn/css/first_steps/how_css_works/index.html b/files/bn/conflicting/learn/css/first_steps/how_css_works/index.html deleted file mode 100644 index b5d5f8a476..0000000000 --- a/files/bn/conflicting/learn/css/first_steps/how_css_works/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: কেন CSS ব্যবহার করবেন ? -slug: conflicting/Learn/CSS/First_steps/How_CSS_works -tags: - - NeedsReview -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS -original_slug: Web/CSS/Getting_Started/Why_use_CSS ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/bn-BD/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}এটি  CSS Getting Started টিউটোরিয়ালের দ্বিতীয় অধ্যায় এবং ব্যাখ্যা করে কেন ডকুমেন্ট CSS ব্যবহার করে। আপনি CSS ব্যবহার করেন আপনার নমুনা ডকুমেন্ট একটি স্টাইলশীট যুক্ত করতে।

- -

তথ্য:  CSS কেন ব্যবহার করব ?

- -

CSS একটি ডকুমেন্টের তথ্য সামগ্রী সেটি কিভাবে প্রদর্শিত হবে তার বিবরণ থেকে পৃথক রাখতে সাহায্য করে। ডকুমেন্ট কিভাবে প্রদর্শিত হবে তার বিবরণ স্টাইল হিসাবে পরিচিত। আপনি কন্টেন্ট থেকে স্টাইল আলাদা রাখুন যাতে আপনি পারেন :

- -
    -
  • অনুলিপি এড়াতে
    • -
  • রক্ষণাবেক্ষণ সহজ করে তুলতে
    • -
  • বিভিন্ন উদ্দেশ্যে বিভিন্ন স্টাইল এর  সঙ্গে একই কন্টেন্ট ব্যবহার করতে
    • -
- -
-
উদাহরণ
- -

আপনার ওয়েব সাইটের হাজার হাজার পৃষ্ঠা থাকতে পারে যারা অনুরূপ। CSS এর ব্যবহার করে,আপনি একটি সাধারণ ফাইলের মধ্যে তথ্য সংরক্ষণ করুন যা সকল পৃষ্ঠা শেয়ার করে।

- -

যখন একজন ব্যবহারকারী একটি ওয়েব পেইজ প্রদর্শন করে,ব্যবহারকারীর ব্রাউজার পৃষ্ঠার কন্টেন্টের পাশাপাশি স্টাইলের তথ্য লোড করে।

- -

যখন একজন ব্যবহারকারী একটি ওয়েব পেজ প্রিন্ট করে, আপনি বিভিন্ন স্টাইলের তথ্য প্রদান করেন যা মুদ্রিত পৃষ্ঠা পড়তে সহজ করে তোলে।

-
- -

HTML দিয়ে সাধারণত আপনি ডকুমেন্টের তথ্য সামগ্রী বর্ণনা করেন মার্কআপ ভাষা ব্যবহার করে,তার স্টাইল নয়।আপনি CSS ব্যবহার  করেন এর স্টাইল নির্দিষ্ট করতে,এর বিষয়বস্তু নয় ।(পরবর্তীতে এই টিউটোরিয়ালে, আপনি এই ব্যবস্থার কিছু ব্যতিক্রম দেখতে পাবেন।)

- -
-
আরো তথ্য
- -

এছাড়াও HTML এর মত একটি মার্কআপ ভাষা স্টাইল নির্দিষ্ট করতে কিছু উপায় প্রদান করে।

- -

উদাহরণস্বরূপ, HTML এ আপনি টেক্সট গাঢ় করতে একটি <b> ট্যাগ ব্যবহার করতে পারেন, এবং আপনি তার <body> ট্যাগে একটি পৃষ্ঠার ব্যাকগ্রাউন্ড রং নির্ধারণ করতে পারবেন।

- -

আপনি যখন CSS ব্যবহার করেন,আপনি সাধারণত মার্কআপ ভাষার এই বৈশিষ্ট্যগুলি ব্যবহার এড়িয়ে যান যাতে করে আপনার সকল ডকুমেন্ট এর স্টাইল সংক্রান্ত তথ্য এক জায়গায় হয়।

-
- -

অ্যাকশন: একটি স্টাইলশীট তৈরি

- -
    -
  1. পূর্বের মত একই ডিরেক্টরির মধ্যে আরেকটি টেক্সট ফাইল তৈরি করুন। এই ফাইলটি আপনার স্টাইলশীট হবে. এটির নাম দিন : style1.css
    2. -
  2. আপনার CSS ফাইলের মধ্যে, এই এক লাইন কপি এবং পেস্ট করুন, তারপর ফাইলটি সংরক্ষণ করুন: - 
    strong {color: red;}
-
    -
    3. -
- -

আপনার ডকুমেন্টের সাথে স্টাইলশীট যুক্তকরণ

- -
    -
  1. আপনার ডকুমেন্ট এর সাথে আপনার স্টাইলশীট সংযুক্ত করতে,আপনার HTML ফাইল সম্পাদনা করুন। এখানে হাইলাইট করা লাইনটি যোগ করুন: - - 
    <!DOCTYPE html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    2. -
  2. ফাইলটি সংরক্ষণ করুন এবং আপনার ব্রাউজারের ডিসপ্লে রিফ্রেশ করুন। স্টাইলশীটটি প্রথম অক্ষরগুলোকে লাল করে তোলে, এভাবে: - - - - - - -
    Cascading Style Sheets
    -
    3. -
- -
-
চ্যালেঞ্জ
- -

লাল ছাড়াও, CSS কিছু অন্যান্য রং এর নাম প্রদান করে।

- -

রেফারেন্স না দেখে, আরো পাঁচটি  রঙের নাম খুঁজে বের করুন যা আপনার স্টাইলশীট এ কাজ করে।

- -
-
Possible solution
- -

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

-Hide solution
-See a solution for the challenge.
- -

পরবর্তীতে  কি?

- -

{{nextPage("/bn-BD/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "How CSS works.")}}এখন আপনার একটি পৃথক স্টাইলশীট এর সাথে যুক্ত একটি নমুনা ডকুমেন্ট আছে, আপনি প্রস্তুত জানতে learn more কিভাবে আপনার ব্রাউজার তাদের সমন্বয় করে যখন এটি ডকুমেন্ট প্রদর্শন করে।

diff --git a/files/bn/conflicting/web/api/canvas_api/tutorial/index.html b/files/bn/conflicting/web/api/canvas_api/tutorial/index.html deleted file mode 100644 index 163ce0d09d..0000000000 --- a/files/bn/conflicting/web/api/canvas_api/tutorial/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: ক্যানভাস টিউটোরিয়াল -slug: conflicting/Web/API/Canvas_API/Tutorial -translation_of: Web/API/Canvas_API/Tutorial -translation_of_original: Canvas-tutorial-broken -original_slug: Web/HTML/Canvas/Tutorial ---- -

<canvas> হল একটি HTML এলিমেন্ট, যা দ্বারা স্ক্রিপ্টিংয়ের (সাধারণত জাভাস্ক্রিপ্ট) সাহায্যে গ্রাফিক্স আঁকা যায়। এটি অবশ্য গ্রাফিক্স আঁকা, ছবি কম্পোজিশন তৈরি করা এবং সাধারণ (এবং অসাধারণ) এনিমেশন তৈরির কাজ করতে পারে।

-

<canvas> এর জন্য মোজিলা অ্যাপ্লিকেশনসমূহ সাপোর্ট পাওয়া শুরু করেছে গিকো ১.৮ (বা ফায়ারফক্স ১.৫) থেকে। মূলত এ্যাপল তাদের ড্যাশবোর্ড এবং সাফারির জন্য এলিমেন্টটি প্রকাশ করে। <canvas> এলিমেন্টটি WhatWG Web applications 1.0 স্পেসিফিকেশনের একটি অংশ, যা HTML5 নামেও পরিচিত।

-

এই টিউটোরিয়ালে আপনার HTML পেজে <canvas> এলিমেন্ট ব্যবহারের প্রক্রিয়া আলোচনা করা হয়েছে। উদাহরণগুলো থেকে আপনি <canvas> দিয়ে কি করতে পারেন, তা আন্দাজ করতে পারেন এবং আপনার নিজের ইমপ্লিমেন্টেশন তৈরিতে সাহায্য করতে পারে।

-

শুরু করার পূর্বে

-

<canvas> ব্যবহার করা খুব কঠিন - তা নয়। কিন্তু, আপনার অবশ্যই HTML এবং জাভাস্ক্রিপ্ট এর সাধারণ ধারণা থাকতে হবে।

-

<canvas> টি অনেক পুরনো ব্রাউজার সাপোর্ট করে না কিন্তু, ফায়ারফক্স ১.৫ ও পরবর্তী ভার্সন, অপেরা ৯ ও পরবর্তী, এবং সাফারি, গুগল ক্রোমের নতুন ভার্সন ও ইন্টারনেট এক্সপ্লোরার ৯ হতে কাজ করে।

-

এই টিউটোরিয়ালে আছে

- -

আরও দেখুন

- -
- {{ Next("Canvas_tutorial/Basic_usage") }}
diff --git a/files/bn/conflicting/web/api/document_object_model/index.html b/files/bn/conflicting/web/api/document_object_model/index.html deleted file mode 100644 index 2eb76f283c..0000000000 --- a/files/bn/conflicting/web/api/document_object_model/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: DOM developer guide -slug: conflicting/Web/API/Document_Object_Model -tags: - - API - - DOM - - Guide - - NeedsTranslation - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/Guide/API/DOM -original_slug: Web/Guide/API/DOM ---- -

{{draft}}

-

The Document Object Model is an API for HTML and XML documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.

-

All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into objects (e.g., the document object that represents the document itself, the table object that represents a HTML table element, and so forth). Those objects are accessible via scripting languages in most recent web browsers.

-

The DOM is most often used in conjunction with JavaScript. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for any language.

-

The World Wide Web Consortium establishes a standard for the DOM, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.

-

Why is the DOM important?

-

"Dynamic HTML" (DHTML) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the W3C FAQ).

-

As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers. The user interface of Mozilla (also Firefox and Thunderbird) is built using XUL, using the DOM to manipulate its own UI.

-

More about the DOM

-

{{LandingPageListSubpages}}

diff --git a/files/bn/conflicting/web/guide/index.html b/files/bn/conflicting/web/guide/index.html deleted file mode 100644 index b3fb2a168f..0000000000 --- a/files/bn/conflicting/web/guide/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Web Development -slug: conflicting/Web/Guide -tags: - - NeedsTranslation - - TopicStub - - Web Development -translation_of: Web/Guide -translation_of_original: Web_Development -original_slug: Web_Development ---- -

ওয়েব ডেভেলপমেন্ট বলতে একটি ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশন তৈরির প্রতিটি দিককে বোঝানো হয়।

-

Learn how to create anything from a simple web site to complex, highly interactive web sites featuring the latest Web technologies by perusing the articles you'll find here.

- - - - - - - -
-

ডকুমেন্টেশনের বিষয়

-

প্রযুক্তি

-
-
- Introduction to Web development
-
- A guide to learning how to develop for the Web.
-
- HTML
-
- HyperText Markup Language is the basic language for creating web pages and other documents displayed in a browser.
-
- CSS
-
- Cascading Style Sheets make it possible to do advanced layout and page design on the Web.
-
- JavaScript
-
- JavaScript is the most commonly used scripting language for developing web applications; it's also used in the development of Mozilla-based software.
-
- DOM
-
- The Document Object Model is an API for HTML and XML documents, providing a structural representation of the document that you can modify in order to alter its visual presentation.
-
- AJAX
-
- Asynchronous JavaScript and XML isn't so much a technology as a combination of technologies; using JavaScript and other modern web technologies together to create dynamic web applications.
-
- XHTML
-
- Extensible HyperText Markup Language is an XML-based HTML-like language that offers a stricter syntax than HTML.
-
- SVG
-
- Scalable Vector Graphics is an XML markup language for describing 2D vector graphics.
-
-

কলা-কৌশল

-
-
- Web standards
-
- Learn how to make your Web site or application reach the largest number of users through compatibility with the open Web.
-
- Responsive Web design
-
- Use CSS to present the same content across all hardware platforms, from mobile phones to wide-screen, high-res desktop displays.
-
- Writing forward-compatible websites
-
- Best practices for creating websites that do not break when browsers are updated.
-
- Mobile Web development
-
- Developing sites for be viewed on mobile devices involves some unique approaches that may not be familiar to those accustomed to developing for desktop browsers.
-
- Mozilla Web developer FAQ
-
- Frequently asked questions from Web developers. With answers!
-
-

View All...

- 		-

কমিউনিটি

- -

টুল

- -

View All...

-
-

 

diff --git a/files/bn/glossary/api/index.html b/files/bn/glossary/api/index.html deleted file mode 100644 index ff54fdcb57..0000000000 --- a/files/bn/glossary/api/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: এপিআই (API) -slug: Glossary/API -translation_of: Glossary/API ---- -

একাধিক সফটওয়্যার কম্পোনেন্ট এর মধ্যে যোগাযোগের সুবিধা এবং এ সংক্রান্ত নিয়মগুলিকে API (Application Programming Interface) বলা হয়ে থাকে। ওয়েব ডেভেলপমেন্টের ক্ষেত্রে, API বলতে সাধারণত ওয়েবের কন্টেন্টের সঙ্গে যোগাযোগ / কাজ (ইন্টারঅ্যাক্ট) করার জন্য একগুচ্ছ {{glossary("method","methods")}}, {{Glossary("property","properties")}}, ইভেন্ট, এবং {{Glossary("URL","URLs")}} কে বুঝানো হয়।

- -

আরও জানুন

- -

সাধারণ জ্ঞান

- -
    -
  • উইকিপিডিয়ায় {{Interwiki("wikipedia", "Application_programming_interface", "API")}}
    • -
- -

কারিগরি রেফারেন্স

- - diff --git a/files/bn/glossary/bandwidth/index.html b/files/bn/glossary/bandwidth/index.html deleted file mode 100644 index d2cf7aa028..0000000000 --- a/files/bn/glossary/bandwidth/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: ব্যান্ডউইথ (Bandwidth) -slug: Glossary/Bandwidth -translation_of: Glossary/Bandwidth ---- -

নির্দিষ্টি সময়ে একটি ডাটা কানেকশন (সংযোগ) এর মধ্য দিয়ে যে পরিমাণ তথ্য যাওয়া-আসা (পরিবাহিত) করতে পারে, তাই পরিমাপই হল ব্যান্ডউইথ। এটি সাধারণত bits-per-second (bps), megabits-per-second (Mbps) or gigabits-per-second (Gbps) এককে মাপা হয়ে থাকে।

- -

আরও জানুন

- -
    -
  • উইকিপিডিয়ায় {{Interwiki("wikipedia", "Bandwidth")}}
    • -
diff --git a/files/bn/glossary/dhtml/index.html b/files/bn/glossary/dhtml/index.html deleted file mode 100644 index fb0da00644..0000000000 --- a/files/bn/glossary/dhtml/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: DHTML -slug: Glossary/DHTML -tags: - - ওয়েব -translation_of: Glossary/DHTML ---- -

DHTML (dynamic {{glossary("HTML")}}) মানে ইন্টারেক্টিভ ওয়েব পেজ এর পিছনের কোডকে বুঝায় যার  {{Glossary("Adobe Flash","Flash")}} অথবা {{Glossary("Java")}} প্লাগিন প্রয়োজন হয় না. DHTML সমষ্টিগতবাবে {{Glossary("HTML")}}, {{Glossary("CSS")}}, the {{Glossary("DOM")}} এবং {{Glossary("JavaScript")}} এর সমন্বয়ে গঠিত ।

- -

আরো জানুন

- -

সাধারণ জ্ঞান

- - diff --git a/files/bn/glossary/index.html b/files/bn/glossary/index.html deleted file mode 100644 index 8745ebc4ef..0000000000 --- a/files/bn/glossary/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Glossary -slug: Glossary -tags: - - Beginner - - Glossary - - Index - - Landing - - NeedsTranslation - - TopicStub -translation_of: Glossary ---- -
{{LearnBox({"title":"নতুন একটি শব্দ শিখুন:"})}}
- -

ওয়েবে যেসকল প্রযুক্তি ব্যবহার করা হয়, তার কোড বা ডকুমেন্টেশনে সাধারণত উদ্ভট টেকনিক্যাল শব্দ কিংবা সংক্ষিপ্ত শব্দ দেখা যায়। এই শব্দকোষের শব্দগুলোর সাহায্যে আপনি সহজেই ওয়েবের এই প্রযুক্তিগুলোকে বুঝতে ও ব্যবহার করতে পারবেন।

- -

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

- -

শব্দকোষে অবদান রাখুন

- -

এই শব্দকোষের কাজ, আসলে, শেষ হবে না কখনোই! আপনি নতুন শব্দ যোগ করে কিংবা বর্তমানগুলিকে পরিবর্তন করে অবদান রাখতে পারেন। শুরু করার সবচেয়ে সোজা উপায় হল নিচের বাটনে ক্লিক করা, কিংবা নিচের কয়েকটি শব্দ বেছে নিয়ে কাজ করা!

- -

শব্দকোষে নতুন শব্দ যুক্ত করুন

- -

{{GlossaryList({"terms":["Abstraction","ARIA","ARPA", "Arpanet","Asynchronous","BiDi","Blink","Block","Call stack","CardDAV","CDN","Certified","Class","CMS","Constant","Constructor","Content type","Closure","CORS","CRUD","CSRF","Contextual form", "Control flow","Character","Crawler","DNS","Doctype","Domain name","DTD","Dynamic typing","ECMA","Encapsulation","Entity","Exception","FTP","GIT","GPL","Host","Hypertext","I18N","IANA","ICANN","Identifier","IDE","IDL","IETF","IIFE","Immutable","Internationalization","IndexedDB","Inheritance","Instance","Internet","IP address","IPv4","IRC","ISO","ISP","Java","Keyword","Ligature", "Locale","Localization","LGPL","ltr","MathML","Method","Microsoft Internet Explorer","MIME type","Mobile First","Mozilla Firefox","Namespace","Netscape Navigator","NAT","Native","Null","OOP","OpenGL","Opera Browser","Operand","Operator","OWASP","P2P","Parameter","Parser","PDF","Polymorphism","Presto","Privileged","property","Protocol","Prototype","Pseudo-class","Pseudo-element","RDF","Recursion","Reflow","Rendering engine","Responsive design","REST","RSS","RTF","rtl","Scope","CSS Selector","Server","Signature","SOAP","Specification","SQL","SSL","Stacking context","State machine","Statement","STUN","SVN","Synchronous","Tag","TLS","Trident","TURN","Type","UDP","UTF-8", "Value","Variable","VoIP","WAI","WebIDL","Wrapper","XForm","XPath","XQuery"], "filter":"notdefined", "css":"multiColumnList"})}}

- -

আপনি যদি এই শব্দকোষের ব্যাপারে আরও জানতে চান, এই শব্দকোষ ডকুমেন্টেশন স্ট্যাটাস পেজটি দেখতে পারেন!

diff --git a/files/bn/glossary/localization/index.html b/files/bn/glossary/localization/index.html deleted file mode 100644 index 11058d9aaa..0000000000 --- a/files/bn/glossary/localization/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: স্থানীয়করণ -slug: Glossary/Localization -tags: - - অনুবাদ - - স্থানীয়করণ -translation_of: Glossary/Localization -original_slug: Localization ---- -

স্থানীয়করণ (L10n) হচ্ছে এমন একটি প্রক্রিয়া, যা দ্বারা একটি সফটওয়্যারের ইউজার ইন্টারফেস একটি ভাষা থেকে অন্য ভাষায় রুপান্তর করা হয়। এবং সেই দেশের সংস্কৃতির সাথে সামঞ্জস্যপূর্ণ ও অধিবাসীদের ব্যবহার উপযোগী করা হয়। যাদের প্রযুক্তির প্রতি ও প্রযুক্তির স্থানীয়করণের প্রতি আগ্রহ রয়েছে, এসব রিসোর্স তাঁদের সকলের জন্য উন্মুক্ত। এগুলো ডেভেলপার ও অন্যান্য অবদানকারীর জন্য।

- - - - - - - -
-

সহায়ক প্রবন্ধ সমুহ

-
-
- স্থানীয়করণের হাতে-খড়ি
-
- স্থানীয়করণে আগ্রহী স্বেচ্ছাসেবকগণের জন্য সর্ব প্রথম পাঠ্য।
-
- XUL টিউটোরিয়ালঃ স্থানীয়করণ
-
- XUL অ্যাপ্লিকেশন স্থানীয়করণের জন্য XUL টিউটোরিয়াল
-
- স্থানীয়করণ যোগ্য কোড লেখা
-
- প্রোগ্রামারদের স্থানীয়করণ যোগ্য সফটওয়্যার তৈরি করার জন্য সর্বোত্তম কার্যকৌশল এবং নির্দেশনা।
-
- Help file স্থানিয়করন
-
- এসব ফাইল আরও সহজে স্থানীয়করণ করার জন্য - HTML থেকে কন্টেন্ট কিভাবে আলাদা করব।
-
- বক্সের আকার
-
- নির্দিষ্ট স্থানীয়করণের জন্য কিভাবে উইন্ডোর আকার সমন্বয় করবো।
-
- এক্সটেনশনের বর্ণনা স্থানীয়করণ
-
- একটি এক্সটেনশনের বর্ণনা স্থানীয়করণের জন্য (extension window এর মধ্যে, extension এর নামের নিচে যে লাইনটি দেখায়) আপনার install.rdf ফাইলের মধ্যে থাকা তথ্যকে পুনরায় লিখতে হবে। এর এজন্য আপনাকে একটি বিশেষ Preference Key ব্যবহার করতে হবে। এই প্রবন্ধটিতে install.rdf ফাইল মডিফাই বা override করার বিস্তারিত নির্দেশনা আছে।
-
- স্থানীয়করণের ক্ষেত্রে সচরাচর জিজ্ঞাসিত প্রশ্ন সমূহ
-
- স্থানীয়করণের কাজ করার সময় যতরকম প্রস্ন সচরাচর করা হয়, তার উত্তর এখানে দেয়া রয়েছে।
-
-

সব দেখুন...

- 		-

সাহায্যকারী দল

-
    -
  • মজিলার ফোরাম সমূহ দেখুন...
    • -
-

{{ DiscussionList("dev-l10n", "mozilla.dev.l10n") }}

- - - -
-

 

diff --git a/files/bn/glossary/webrtc/index.html b/files/bn/glossary/webrtc/index.html deleted file mode 100644 index 6e0a0a4e47..0000000000 --- a/files/bn/glossary/webrtc/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: WebRTC -slug: Glossary/WebRTC -tags: - - ওয়েব - - ওয়েব আরটিসি - - পি-টু-পি - - ভিওআইপি -translation_of: Glossary/WebRTC ---- -

WebRTC (Web Real-Time Communication) হল ভিডিও চ্যাট, ভয়েস কল এবং পিয়ার-টু-পিয়ার ফাইল শেয়ারিং ওয়েব অ্যাপের জন্য একটি {{Glossary("API")}}।

- -

WebRTC এর মূলত ৩টি অংশ রয়েছে:

- -
-
getUserMedia
-
ডিভাইসের ক্যামেরা ও মাইক্রোফোনে {{Glossary("Browser", "browser")}} ব্যবহারে সহযোগিতা করা।
-
RTCPeerConnection
-
ভিডিও চ্যাট বা ভয়েস কল কনফিগার করা।
-
RTCDataChannels
-
ব্রাউজারের মধ্যে একটি {{Glossary("P2P", "peer-to-peer")}} ডাটা যাওয়া আসার পথ তৈরি করা
-
- -

আরও জানুন

- -

সাধারণ জ্ঞান

- -
    -
  • উইকিপিডিয়ায় {{Interwiki("wikipedia", "WebRTC")}}
    • -
- -

কারিগরি জ্ঞান

- - diff --git a/files/bn/learn/css/building_blocks/selectors/index.html b/files/bn/learn/css/building_blocks/selectors/index.html deleted file mode 100644 index 33adcb89a9..0000000000 --- a/files/bn/learn/css/building_blocks/selectors/index.html +++ /dev/null @@ -1,356 +0,0 @@ ---- -title: নির্বাচক সমুহ -slug: Learn/CSS/Building_blocks/Selectors -tags: - - Beginner - - CSS - - CSS Selector - - CSS:Getting_Started - - Example - - Guide - - NeedsBeginnerUpdate - - NeedsLiveSample - - NeedsUpdate - - Web -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors -original_slug: Web/CSS/Getting_Started/নই ---- -

{{ CSSTutorialTOC() }}

-

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}এটি CSS Getting Started টিউটোরিয়াল এর ৫ম অংশ; এটি ব্যাখ্যা করে আপনি কিভাবে স্টাইল সমুহ নির্বাচিতভাবে প্রয়োগ করবেন, এবং কিভাবে বিভিন্ন প্রকার নির্বাচক সমুহ বিভিন্ন প্রাধান্য পায়। আপনি আপনার নমুনা নিবন্ধে কিছু এট্রিবিউট যোগ করতে পারেন, এবং আপনি সেসব এট্রিবিউটগুলো আপনার নমুনা স্টাইলশীটে ব্যবহার করতে পারেন ।

-

তথ্যঃ নির্বাচকসমুহ

-

সি এস এস ভাষা ব্যাখ্যা করার জন্য সি এস এস এর নিজস্ব পারিভাষিক শব্দ আছে। এই টিউটোরিয়াল এর পূর্বে, আপনি একটি লাইন তৈরি করুন যেমনঃ

-
strong {
-  color: red;
-}
-
-

সি এস এস পারিভাষিক শব্দে, এই সমগ্র লাইন হল নিয়ম। এই নিয়ম শুরু হ্য় strong দিয়ে, যেটা একটা নির্বাচক। এটা নির্বাচন করে কোন উপাদানগুলো DOM-এ আছে কোন নিয়ম প্রয়োগ করা আছে ।

-

আরো বিস্তারিত

-

বাকা বন্ধনীর ভেতরের অংশে প্রকাশিত হয়।

-
-

মূলশব্দ color হল একটি বৈশিষ্ট্য এবং red হল একটি মান।

-

একই প্রকাশিত অংশে বৈশিষ্ট্যের জোড়া মানের পর সেমিকোলন দিয়ে অন্য বৈশিষ্ট্যের জোড়া মান থেকে আলাদা করা হয়।

-

এই টিউটোরিয়াল এ নির্বাচক যেমন strong উল্লেখ করা হয় ট্যাগ নির্বাচক হিসেবে। সি এস এস সুনির্দিষ্টভাবে এটিকে টাইপ নির্বাচক হিসেবে উল্লেখ করে।

-
-

নির্বাচকসমুহ যেগুলো আপনি সি এস এস নিয়মে ব্যবহার করতে পারেন এই টিউটোরিয়ালের পাতা সেগুলো সম্পর্কে আরো বেশি ব্যাখ্যা করে।

-

ট্যাগ নামের সাথে আপনি এট্রিবিউট এর মান নির্বাচকসমুহে ব্যবহার করতে পারেন।এটি আপনার নিয়মকে আরো সুনির্দিষ্ট করতে অনুমোদন করে।

-

সি এস এস এর দুইটি এট্রিবিউট এর বিশেষ অবস্থা আছে। তারা হল class এবং id.

-

নির্বচকসমুহের ক্লাস

-

class এট্রিবিউট একটি উপাদানকে নামকৃত ক্লাস এ বরাদ্দ করার জন্য ব্যবহার করা হয়। আপনি আপনার ক্লাস এর জন্য কোন নাম পছন্দ করবেন এটা আপনার উপর। একটা নিবন্ধে বিভিন্ন উপাদান একই নামের হতে পারে।

-

আপনার স্টাইলশীটে, ক্লাস নামের পূর্বে আপনি যখন একটি নির্বাচকে ব্যবহার করবেন তখন দাড়ি লিখুন(period) ।

-

নির্বাচকসমুহের আইডি

-

id এট্রিবিউট একটি উপাদানকে একটি আইডিতে বরাদ্দ করার জন্য ব্যবহৃত হয়। আপনি আইডিটার জন্যে কি নাম পছন্দ করবেন এটি আপনার উপর। নিবন্ধটিতে আইডি নাম অবশ্যই একটি এবং অনন্য হতে হবে।

-

আপনার স্টাইলশীটে, আপনি যখন নির্বাচকে ব্যবহার করবেন আইডির পূর্বে একটি নাম্বার সাইন(hash) লিখুন।

-
-
- উদাহরণ
- এই এইচ টি এম এল ট্যাগের একটি class এট্রিবিউট এবং একটি id এট্রিবিউট আছেঃ
- 
<p class="key" id="principal">
-
-

নিবন্ধে আইডি মান, মূল, অবশ্যই এক এবং অনন্য হতে হবে, কিন্তু অন্য ট্যাগসমুহে একই ক্লাস নাম, মূল থাকতে পারে।

-

একটি সি এস এস স্টাইলশীটে, এই নিয়ম সকল উপাদানকে একই ক্লাস key green এর অন্তর্ভূক্ত করেছে। (তারা সবাই {{ HTMLElement("p") }} এর উপাদান নাও হতে পারে)

- 
.key {
-  color: green;
-}
-
-

এই নিয়ম একটি উপাদানকে id principal বোল্ড করে :

- 
#principal {
-  font-weight: bolder;
-}
-
-
-

যদি একটির বেশি নিয়ম একটি উপাদান এ প্রয়োগ করা হয় এবং একই বৈশিষ্ট্য উল্লেখ করা হয়, তাহলে সি এস এস নিয়মের উপর প্রাধান্য দেয় যেটা আরো বেশি সুনির্দষ্ট নির্বাচক। একটি আইডি নির্বাচক ক্লাস নির্বাচক এর চেয়ে আরো সুনির্দিষ্ট, যেটা পর্যায়ক্রমে একটি ট্যাগ নির্বাচক এর চেয়ে আরো বেশি সুনির্র্দিষ্ট।

-
-
- আরো বিস্তারিত
-

আপনি নির্বাচকসমুহকে একত্রিত করতে পারেন, নির্বাচককে আরো বেশি সুনির্দিষ্ট করার জন্যে।

-

উদাহরণ স্বরুপ, নির্বাচক .key ক্লাস নাম key যুক্ত সকল উপাদানকে নির্বাচন করে। নির্বাচক p.key ক্লাস নাম key যুক্ত উপাদানকে শুধুমাত্র {{ HTMLElement("p") }} নির্বাচন করে ।

-

আপনি দুইটি বিশেষ এট্রিবিউট class এবং id দ্বারা নিয়ন্ত্রিত নন। আপনি অন্য এট্রিবিউট সুনির্দিষ্ট করতে পারেন স্কয়ার বন্ধনী ব্যবহার করে। যেমন, নির্বাচক [type='button']button মানের একটি type এট্রিবিউট দ্বারা সকল উপাদানকে নির্বাচিত করে ।

-
-

যদি স্টাইলশীটে নিয়মগুলো পরস্পর বিরোধী হ্য় এবং তারা সমানভাবে সুনির্দিষ্ট হয়, তাহলে তারা সি এস এস নিয়মকে প্রাধান্য দেয় যেটা স্টাইলশীটে পরের দিকে আছে।

-

যখন পরস্পর বিরোধী নিয়মের কারণে আপনার সমস্যা হবে, আরো সুনির্দিষ্ট কোন নিয়মের দ্বারা এটি সমাধান করার চেষ্টা করুন, তাহলে সেটাই প্রাধান্য পাবে। যদি আপনি সেটা করতে না পারেন, চেষ্টা করুন স্টাইলশীটের শেষের দিকের কোন নিয়মের কাছাকাছি যেতে তাহলে সেটিই প্রাধান্য পাবে।

-

নকল ক্লাসের নির্বাচকসমূহ

-

একটি pseudo-class সি এস এস এর মূলশব্দ নির্বাচকের সাথে যুক্ত যেটা উপাদানের বিশেষ অবস্থা নির্বাচনের জন্য সুনির্দিষ্ট করে। উদাহরণ সরূপ, {{ Cssxref(":hover") }} একটা স্টাইল প্রয়োগ করা যাবে যখন কোন ব্যবহারকারী নির্বাচকের দ্বারা সুনির্দিষ্ট করে দেয়া উপাদানের উপর চলাচল করবে।

-

নকল ক্লাসসমুহ, নকল উপাদানগুলোর সাথে, আপনাকে একটি উপাদানের উপর শুধু স্টাইল প্রয়োগ করতে দেয়না, সেই সাথে বহিরাগত কারণের সাথে সংযোগ করে যেমন নেভিগেটরের ইতিহাস ({{ cssxref(":visited") }}, উদাহরণ স্বরূপ), এটার উপাদানের অবস্থা (যেমন {{ cssxref(":checked") }} কিছু উপাদানের গঠনের উপর), অথবা মাউসের অবস্থান (যেমন {{ cssxref(":hover") }} যেটা আপনাকে জানাবে মাউসটি উপাদানের উপর আছে নাকি নাই). একটি সম্পূর্ণ নির্বাচক সমুহের তালিকা, CSS3 Selectors working spec এখানে যান।

-
-
- Syntax
- 
selector:pseudo-class {
-  property: value;
-}
-
-
-

নকল ক্লাসসমুহের তালিকা

-
    -
  • {{ Cssxref(":link") }}
    • -
  • {{ Cssxref(":visited") }}
    • -
  • {{ Cssxref(":active") }}
    • -
  • {{ Cssxref(":hover") }}
    • -
  • {{ Cssxref(":focus") }}
    • -
  • {{ Cssxref(":first-child") }}
    • -
  • {{ Cssxref(":nth-child") }}
    • -
  • {{ Cssxref(":nth-last-child") }}
    • -
  • {{ Cssxref(":nth-of-type") }}
    • -
  • {{ Cssxref(":first-of-type") }}
    • -
  • {{ Cssxref(":last-of-type") }}
    • -
  • {{ Cssxref(":empty") }}
    • -
  • {{ Cssxref(":target") }}
    • -
  • {{ Cssxref(":checked") }}
    • -
  • {{ Cssxref(":enabled") }}
    • -
  • {{ Cssxref(":disabled") }}
    • -
-

তথ্যঃ সম্পর্কের ভিত্তিতে নির্বাচক সমুহ

-

উপাদান সমুহের মধ্যে পারস্পরিক সম্পর্কের ভিত্তিতে উপাদান সমুহ নির্বাচন করার জন্য সি এস এস এর কিছু উপায় আছে। নির্বাচক সমুহকে আরো বেশি সুনির্দিষ্ট করার জন্যে আপনি এগুলো ব্যবহার করতে পারেন।

- - - - - - - - - - - - - - - - - - - - - - - - -
- সম্পর্কের ভিত্তিতে পরিচিত নির্বাচকসমুহ
নির্বাচকনির্বাচিতসমুহ
A EAny E element that is a descendant of an A element (that is: a child, or a child of a child, etc.)
A > EAny E element that is a child of an A element
E:first-childAny E element that is the first child of its parent
B + EAny E element that is the next sibling of a B element (that is: the next child of the same parent)
-

আপনি জটিল সম্পর্কগুলোকে প্রকাশ করার জন্যে এগুলো একত্রিত করতে পারেন।

-

আপনি * (asterisk) এই চিহ্নটি ব্যবহার করতে পারেন "যেকোনো উপাদান" বুঝানোর জন্যে।

-
-
- উদাহরণ
-

একটি এইচ টি এম এল টেবিলের একটি id এট্রিবিউট, কিন্তু এটির সারি এবং ছোট অংশগুলোর আলাদা আলাদা সনাক্তকারী থাকে নাঃ

- 
<table id="data-table-1">
-...
-<tr>
-<td>Prefix</td>
-<td>0001</td>
-<td>default</td>
-</tr>
-...
-
-

এই নিয়মগুলা সকল সারির প্রথম অংশকে বোল্ড করে, এবং দ্বিতীয় অংশকে মনোস্থানিক করে। তারা শুধু একটি সুনির্দিষ্ট টেবিলকে প্রভাবিত করেঃ

- 
    #data-table-1 td:first-child {font-weight: bolder;}
-    #data-table-1 td:first-child + td {font-family: monospace;}
-
-

ফলাফল এরূপ দেখায়ঃ

- - - - - - -
- - - - - - - - -
Prefix0001default
-
-
-
-
- আরো বিস্তারিত
-

প্রচলিত উপায়ে, আপনি যদি একটি নির্বাচককে আরো সুনির্দিষ্ট করেন, তখন আপনি এটার প্রাধান্য বৃদ্ধি করতে পারবেন।

-

আপনি যদি পদ্ধতিগুলো ব্যবহার করেন, আপনার নিবন্ধে অনেকগুলো ট্যাগ-এর class অথবা id এট্রিবিউটগুলোকে আপনি সুনির্দিষ্ট করার প্রয়োজন পরিহার করতে পারবেন। তা ব্যতীত, সি এস এস কাজ করবে না।

-

অনেক বড় নকশার ক্ষেত্রে যেখানে গতি গুরুত্বপূর্ণ, আপনি আপনার স্টাইলশীটকে আরো নিপুণ করতে পারবেন জটিল নিয়মসমুহকে পরিহার করে যেটা উপাদান সমুহের মধ্যে পারস্পরিক সম্পর্কের উপর নির্ভর করে।

-

টেবিল সম্পর্কে আরো বেশি উদাহরণ এর জন্যে, সি এস এস রেফারেন্স পাতায় Tables দেখুন।

-
-

কাজঃ ক্লাস এবং আইডি নির্বাচক সমুহের ব্যবহার

-

১। আপনার এইচ টি এম এল ফাইলটি সম্পাদনা করুন, কপি এবং পেস্ট করার মাধ্যমে।

-

২। তারপর প্রথম কপিতে আইডি এবং ক্লাস এট্রিবিউট ব্যবহার করুন এবং একটি আইডি এট্রিবিউট দ্বিতীয় কপিতে দিন যেমন নিচে দেখানো হয়েছে। বিকল্পরূপে, আবার সমগ্র ফাইলকে কপি এবং পেস্ট করুনঃ

-
    -
  1. - 
    <!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p id="first">
-      <strong class="carrot">C</strong>ascading
-      <strong class="spinach">S</strong>tyle
-      <strong class="spinach">S</strong>heets
-    </p>
-    <p id="second">
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    2. -
  2. এখন আপনি আপনার সি এস এস ফাইলটি সম্পাদনা করুন। সমগ্র বিষয় পুনঃস্থাপন করুনঃ
    - 
    strong { color: red; }
-.carrot { color: orange; }
-.spinach { color: green; }
-#first { font-style: italic; }
-
    -
    3. -
  3. ফাইলগুলো সংরক্ষণ করুন এবং ফলাফল দেখার জন্য আপনার ব্রাউজার রিফ্রেশ করুনঃ
    - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    - লাইনের ক্রম কোন প্রভাব ফেলে না এটি দেখানোর জন্য আপনি আপনার সি এস এস ফাইলে লাইনগুলো পুনরায় সাজানোর চেষ্টা করতে পারেন।
    -
    -

    ক্লাস নির্বাচকসমুহ .carrot এবং .spinach ট্যাগ নির্বাচক strong এর উপরে প্রাধান্য পায়।

    -

    আইডি নির্বাচক #first ক্লাস এবং ট্যাগ নির্বাচকের উপরে প্রাধান্য পায়।

    -
    4. -
-
-
- প্রতিদ্বন্দ্বিতাসমুহ
-
    -
  1. আপনার এইচ টি এম এল ফাইল পরিবর্তন করা ছাড়া, আপনার সি এস এস ফাইলে একটি একক নিয়ম যোগ করুন যেটা সকল প্রথম অক্ষরকে একই রং এর করে রাখে যেমন এখন তারা আছে, কিন্তু দ্বিতীয় বর্ণনায় অন্য সকল টেক্সটকে নীল করে।
    - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    2. -
  2. আপনি যে নিয়মটি এইমাত্র যোগ করেছেন তা এখন পরিবর্তন করে (অন্য কিছু পরিবর্তন না করে), প্রথম বর্ণনাকে নীল করার জন্যেঃ
    - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    3. -
-
-
- Possible solution
-
    -
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: - 
    #second { color: blue; }
-
    - A more specific selector, p#second also works.
    2. -
  2. Change the selector of the new rule to be a tag selector using p: - 
    p { color: blue; }
-
    -
    3. -
- Hide solution
- See a solution for the challenge.
-

কাজঃ নকল ক্লাসের নির্বাচকসমুহের ব্যবহার

-
    -
  1. নিচের মত একটি এইচ টি এম এল ফাইল তৈরি করুনঃ
    2. -
  2. - 
    <!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
-  </body>
-</html>
-
    -
    3. -
  3. এখন আপনার সি এস এস ফাইল সম্পাদনা করুন। সমগ্র বিষয়গুলো পুনঃস্থাপন করুনঃ
    - 
    a.homepage:link, a.homepage:visited {
-  padding: 1px 10px 1px 10px;
-  color: #fff;
-  background: #555;
-  border-radius: 3px;
-  border: 1px outset rgba(50,50,50,.5);
-  font-family: georgia, serif;
-  font-size: 14px;
-  font-style: italic;
-  text-decoration: none;
-}
-
-a.homepage:hover, a.homepage:focus, a.homepage:active {
-  background-color: #666;
-}
-
    -
    4. -
  4. ফাইলগুলো সংরক্ষণ করুন এবং ফলাফল দেখার জন্য আপনার ব্রাউজার রিফ্রেশ করুনঃ (আপনার মাউসটি নিচের লিংকের উপর রাখুন প্রভাব দেখার জন্য): - - - - - - -
    Go to our Home page
    -
    5. -
-

কাজঃ সম্পর্ক এবং নকল ক্লাসের ভিত্তিতে নির্বাচকসমুহের ব্যবহার

-

সম্পর্ক এবং নকল ক্লাসের ভিত্তিতে নির্বাচকসমুহ দ্বারা আপনি জটিল ক্যাসকেড এলগরিদম তৈরি করতে  পারবেন।এটি ব্যবহার করার জন্য একটি সাধারণ কৌশল , উদাহরণ স্বরূপ, in order to create pure-CSS dropdown menus তৈরি করার জন্য (এটি শুধুমাত্র সি এস এস, JavaScript ব্যতিরেকে). এই কৌশল এর সারাংশ হল নিম্নে বর্ণিত নিয়মের মত একটি নিয়ম তৈরি করাঃ

-
div.menu-bar ul ul {
-  display: none;
-}
-
-div.menu-bar li:hover > ul {
-  display: block;
-}
-

প্রয়োগ করার জন্য একটি এইচ টি এম এল গঠন নিম্নে দেয়া হলঃ

-
<div class="menu-bar">
-  <ul>
-    <li>
-      <a href="example.html">Menu</a>
-      <ul>
-        <li>
-          <a href="example.html">Link</a>
-        </li>
-        <li>
-          <a class="menu-nav" href="example.html">Submenu</a>
-          <ul>
-            <li>
-              <a class="menu-nav" href="example.html">Submenu</a>
-              <ul>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-              </ul>
-            </li>
-            <li><a href="example.html">Link</a></li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-</div>
-
-

আপনার সম্পূর্ণ CSS-based dropdown menu example দেখুন একটি সম্ভব সংকেতের জন্য।

-

পরবর্তীতে কি?

-

আপনার নমুনা স্টাইলশীট এখন এবং জটিল দেখাতে শুরু করেছে। পরবর্তী অংশ সি এস এসকে easier to read করার উপায় বর্ণনা করে {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}

diff --git a/files/bn/learn/css/building_blocks/values_and_units/index.html b/files/bn/learn/css/building_blocks/values_and_units/index.html deleted file mode 100644 index 17b93dfffb..0000000000 --- a/files/bn/learn/css/building_blocks/values_and_units/index.html +++ /dev/null @@ -1,282 +0,0 @@ ---- -title: রং -slug: Learn/CSS/Building_blocks/Values_and_units -tags: - - CSS - - Example - - Guide - - NeedsReview -translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors -translation_of_original: Web/Guide/CSS/Getting_started/Color -original_slug: Web/CSS/Getting_Started/Color ---- -

{{ CSSTutorialTOC() }}

-

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles")}}এটা হচ্ছে  যেভাবে শুরু করবেন CSS   টিউটোরিয়ালের ৮ম বিভাগ; এটা ব্যাখ্যা করবে কিভাবে আপনি CSS এ রং উল্লেখ করবেন. আপনি আপনার নমুনা স্টাইলশিট এ পরিচিত হবেন background রং এর সাথে।

-

তথ্য: রং (color)

-

এই টিউটোরিয়ালে এখন পর্যন্ত ,আপনি ব্যবহার করেছেন একটি নির্দিষ্ট সংখ্যক রং এর নাম . CSS 2 সর্বোপরি ১৭ টি রং এর নাম বহন করে। কিছু নাম হয় তো সেগুলো, যেগুলো আপনি আশা করেন না।

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 black gray silver white 
primariesred lime blue 
secondariesyellow aqua fuchsia 
 maroon orange olive purple green navy teal 
-

 

-
-
- বিস্তারিত
-

আপনার  browser হয়ত আরও অনেক রং এর নাম বহন করতে পারে, যেমনঃ

- - - - - - - - - - - - - - - -
dodgerblue peachpuff tan firebrick aquamarine 
-

এই প্রসারিত তালিকার আরও বিস্তারিত জানার জন্য দেখুন: SVG color keywords  CSS 3 এর রং এর মডিউল এ। সতর্ক থাকুন ওই সব রং এর নাম ব্যবহারে যেগুলো আপনার পাঠকের browsers এ হয়ত বহন করে না।

-
-

একটি বৃহৎ palette এর জন্য, যে রং গুলো আপনি চান সেগুলোর লাল (red), সবুজ(green) এবং নীল( blue) উপাদানগুলো উল্লেখ করুন হ্যাশট্যাগ (#) দিয়ে এবং ৩টি হেক্সাডেসিমাল(hexadecimal) সংখ্যা যাদের শ্রেণী 0 - 9 , a – f.  a – f অক্ষরগুলো দিয়ে 10 – 15 এর মান বুঝায়:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
black #000
pure red #f00
pure green #0f0
pure blue #00f
white #fff
-

সম্পূর্ণ palette এর জন্য, প্রতিটি উপাদানের ক্ষেত্রে উল্লেখ করুন দুইটি হেক্সাডেসিমাল সংখ্য:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
black #000000
pure red #ff0000
pure green #00ff00
pure blue #0000ff
white #ffffff
-

আপনি সচারচর এই ৬ সংখ্যার হেক্সাডেসিমাল কোড গুলো আপনার গ্রাফিক্স প্রোগ্রাম অথবা অন্য কোন টুলস থেকে পেতে পারেন।

-
-
- উদাহরণ
-
- সামান্য প্র্যাকটিস করে, আপনি তিন সংখ্যার রং গুলো আপনার বেশিরভাগ কাজের জন্য সুবিন্যস্ত করতে পারবেনঃ
-
-  
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
শুরু লাল এর সাথে: #f00
একে হাল্কা করার জন্য, কিছু সবুজ এবং নীল যোগ করুনঃ #f77
একে আরও কমলা করার জন্য, সামান্য একটু এক্সট্রা সবুজ যোগ করুনঃ #fa7
আরও ডার্ক করার জন্য, এর সব উপাদান মুছে ফেলুন: #c74
এর সম্পৃক্তি দূর করার জন্য, এর উপাদান গুলো কে আরও সমান করুনঃ #c98
আপনি যদি একদম সমান করেন তাহলে আপনি পাবেন ধুুসরঃ #ccc
-

একটি মোমের মত শেডের জন্য যেমন বর্ণহীন নীলঃ

- - - - - - - - - - - - - -
শুরু একদম শুভ্র সাদা থেকে: #fff
অন্যান্য উপাদানগুলো সামান্য কমান: #eef
-
-
-
- আরও বিস্তারিত
-

আপনি আরও উল্লেখ করতে পারেন একতি রং এর ডেসিমাল RGB মানগনগুলো যাদের শ্রেণী 0 – 25 অথবা percentages.

-

উদাহরণস্বরূপ ,মেরুন (dark red):

- 
rgb(128, 0, 0)
-

কিভাবে রং উল্লেখ করা যায় তার আরও বিস্তারিত জানার জন্য দেখুনঃ রং CSS সুনির্দিষ্টকরণে এ। ম্যাচিং সিস্টেম রং যেমন মেনু এবং ThreeDFace, দেখুন: CSS2 System Colors CSS সুনির্দিষ্টকরণে এ।

-
-

 

-

আপনি ইতিমধ্যে {{ cssxref("color") }} প্রপার্টি text এ ব্যবহার করেছেন ।

-

আপনি চাইলে আরও ব্যবহার করতে পারেন {{ cssxref("background-color") }} প্রপার্টি টি যাতে করে আপনি উপাদানগুলোর ব্যাকগ্রাউন্ড পরিবর্তন করতে পারেন।

-

ব্যাকগ্রাউন্ড টি আপনি সেট করতে পারেন স্বচ্ছ ভাবে যাতে করে আপনি স্পষ্টভাবে যে কোন রং মুছে ফেলতে পারেন, মূল উপাদানের ব্যাকগ্রাউন্ড প্রকাশ করে।

-
-
- উদাহরণ
-

এই টিউটোরিয়ালে উদাহরণ বাক্সগুলোতে বর্ণহীন হলুদ ব্যাকগ্রাউন্ড ব্যবহার করা হয়েছে:

- 
background-color: #fffff4;
-
-

আরও বিস্তারিত বাক্সগুলো এই বর্ণহীন ধূসর ব্যবহার করেছেঃ

- 
background-color: #f4f4f4;
-
-
-

 

-

কাজ: কালার কোড এর ব্যবহার

-
    -
  1. আপনার CSS ফাইল সম্পাদন করুন।
    2. -
  2. এখানে মোটা করে যেগুলো দেখানো হয়েছে সেগুলো পরিবর্তন করুন, যাতে করে আপনি আদি অক্ষরগুলো কে একটি বর্ণহীন নীল রং দিতে পারেন। ( যে বিন্যাসগুলো এবং মন্তব্যগুলো আপনার ফাইলে দেখানো হয়েছে সেগুলো সম্ভবত দেখানো ফাইলগুলো হতে ভিন্ন।এই বিন্যাস এবং উক্তিগুলো আপনার মত করে সেভ করে রাখুন।)
    - 
    /*** CSS Tutorial: Color page ***/
-
-/* page font */
-body {font: 16px "Comic Sans MS", cursive;}
-
-/* paragraphs */
-p {color: blue;}
-#first {font-style: italic;}
-
-/* initial letters */
-strong {
-  color: red;
-  background-color: #ddf;
-  font: 200% serif;
-  }
-
-.carrot {color: red;}
-.spinach {color: green;}
-
    -
    3. -
  3. ফাইলটি সেভ করুন এবং আপনার ব্রাউজার টিকে রিফ্রেশ করুন যাতে করে আপনি ফলাফলটি দেখতে পারেন।
    4. -
- - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- - - - - - -
-

প্রতিদন্দিতাঃ
- আপনার CSS ফাইলে ,সব গুলো কালারের নাম পরিবর্তন করে 3 ডিজিট এর কালার কোড এ পরিবর্তন করুন ফলাফলে কোন প্রভাব না ফেলে।

-

(এটা হয়ত একদম সঠিক ভাবে হবে না, কিন্তু আপনি কাছাকাছি যেতে পারবেন। একদম সঠিক ভাবে করার জন্য আপনার প্রয়োজন 6 ডিজিট এর কোডসমূহ, এবং প্রয়োজন CSS সুনির্দিষ্টকরন দেখা অথবা ব্যবহার করুন একটি গ্রাফিক্স টুল যাতে করে কালার গুলো মিল করাতে পারেন।)

-

                                                                                 প্রতিদ্বন্দ্বিতার জন্য সমাধান দেখুন।

-
-

এরপর কি?

-


- {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content")}}আপনার নমুনা ডকুমেন্ট এবং আপনার নমুনা stylesheet এর থেকে সম্পূর্ণভাবে আলাদা। এর পরে পরবর্তী বিভাগ  ব্যাখ্যা করবে কেমন করে আপনি এই সম্পূর্ণ আলাদা জিনিস থেকে ভিন্ন কিছু তৈরি করবেন।
-  

diff --git a/files/bn/learn/css/css_layout/index.html b/files/bn/learn/css/css_layout/index.html deleted file mode 100644 index c6ea906fa8..0000000000 --- a/files/bn/learn/css/css_layout/index.html +++ /dev/null @@ -1,303 +0,0 @@ ---- -title: Layout -slug: Learn/CSS/CSS_layout -tags: - - CSS - - CSS Float - - CSS Text Align - - CSS Unit - - CSS:Getting_Started - - Example - - Guide - - Intermediate - - NeedsLiveSample - - NeedsUpdate - - Web - - needs review -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout -original_slug: Web/CSS/Getting_Started/লে-আউট ---- -

{{ CSSTutorialTOC() }}

-

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")}} CSS শুরু করার ১২তম অধ্যায় এটি;  আপনার ডকুমেন্টের লে-আউট কীভাবে adjust করা যায় তা রয়েছে এখানে। আপনার নমুনা ডকুমেন্টের লে-আউট আপনি পরিবর্তন করতে পারেন।

-

তথ্যঃ লে-আউট

-

বিভিন্ন দৃশ্যমান প্রভাব বিশেষায়িত করার জন্য আপনি CSS ব্যবহার করতে পারেন যা আপনার ডকুমেন্টের লে-আউট পরিবর্তন করে। লে-আউট বিশেষায়িত করার কিছু পদ্ধতি বেশ অগ্রসর এবং সেগুলো এই বেসিক টিউটোরিয়ালের ঊর্ধ্বে।

-

আপনি যখন একাধিক ব্রাউজারে প্রায় একইরকম দৃশ্যমান লে-আউট ডিজাইন করেন, তবে তা আপনার স্টাইলশীট ব্রাউজারের ডিফল্ট স্টাইলশীট এবং লে-আউট ইঞ্জিনের সাথে যেভাবে interact করে তা বেশ জটিল হতে পারে। এটিও একটি অগ্রসরমান বিষয়, এই বেসিক টিউটোরিয়ালের ঊর্ধ্বে।

-

এই পেজে আপনার চেষ্টা করে দেখার জন্য কিছু সহজ কৌশল বর্ণনা করা আছে।

-

ডকুমেন্ট স্ট্রাকচার

-

আপনি যদি আপনার ডকুমেন্টের লে-আউট নিয়ন্ত্রণ করতে চান তবে আপনাকে এর স্ট্রাকচার পরিবর্তন করতে হতে পারে।

-

আপনার ডকুমেন্টের মার্কআপ ল্যাংগুয়েজের খুব সম্ভবত স্ট্রাকচার তৈরি করার জন্য general-purpose ট্যাগ আছে। যেমন ধরুনঃ HTMLএ আপনি স্ট্রাকচার তৈরির জন্য {{ HTMLElement("div") }} এলিমেন্ট ব্যবহার করতে পারেন।

-
-
- উদাহরণ
-

নমুনা ডকুমেন্টে, দ্বিতীয় শিরোনামের আওতায় সংখ্যায়িত প্যারাগ্রাফে নিজস্ব কোন কন্টেইনার নেই।

-

আপনার স্টাইলশীট প্যারাগ্রাফগুলোর চারদিকে বর্ডার টানতে পারে না, কারণ এই সেক্টরটি বিশেষায়িত করার জন্য কোন এলিমেন্ট নাই।

-

স্ট্রাকচারের এই সমস্যা সমাধানের জন্য, আপনি প্যারাগ্রাফের চারদিকে একটি {{ HTMLElement("div") }} ট্যাগ যোগ করতে পারেন। এই ট্যাগটি ,তাই এটি নির্দিষ্ট করা যেতে পারে একটি id অ্যাট্রিবিউট দিয়েঃ

- 
<h3>Numbered paragraphs</h3>
-<div id="numbered">
-  <p>Lorem ipsum</p>
-  <p>Dolor sit</p>
-  <p>Amet consectetuer</p>
-  <p>Magna aliquam</p>
-  <p>Autem veleum</p>
-</div>
-
-

এখন আপনার স্টাইলশীট দুটি লিস্টের চারদিকে বর্ডার দেওয়ার জন্য একটি রুল ব্যবহার করতে পারেঃ

- 
ul, #numbered {
-  border: 1em solid #69b;
-  padding-right:1em;
-}
-
-

এরকম দেখতে পাওয়ার কথাঃ

- - - - - - -
-

(A) The oceans

-
-
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
-
-

(B) Numbered paragraphs

-
-

1: Lorem ipsum

-

2: Dolor sit

-

3: Amet consectetuer

-

4: Magna aliquam

-

5: Autem veleum

-
-
-
-

সাইজ ইউনিট

-

এত দূর পর্যন্ত এই টিউটোরিয়ালে আপনি pixel (px)এ সাইজ নির্ধারণ করেছেন। কম্পিউটার স্ক্রিনের মত কিছু কিছু ডিসপ্লে ডিভাইসের ক্ষেত্রের জন্য এটি যথাযথ। কিন্তু ব্যবহারকারী যখন ফন্ট সাইজ পরিবর্তন করে তখন আপনার লে-আউটে সমস্যা দেখা দিতে পারে।

-

অধিকাংশ ক্ষেত্রেই শতকরা হিসাবে অথবা ems (em)এ সাইজ নির্দিষ্ট করে দেওয়াই ভাল। em হল nominally চলমান ফন্টের (একটি m এর প্রসস্ততা) সাইজ। ব্যবহারকারী যখন ফন্ট সাইজ পরিবর্তন করেন, আপনার লে-আউট নিজে পরিবর্তন থেকেই হয়ে যায়।

-
-
- উদাহরণ
-

এই টেক্সটের বামদিকের বর্ডারের সাইজ পিক্সেলে নির্ধারিত।

-

ডানদিকের বর্ডারের সাইজ ems দিয়ে নির্ধারিত।

-

আপনার ব্রাউজারে, ফন্ট পরিবর্তন করে দেখতে পারেন কীভাবে ডানদিকের বর্ডার adjusts হয় কিন্তু বাঁদিকের বর্ডার হয় নাঃ

- - - - - - -
-
- আমার আকার পুনঃনিরধারণ করুন
-
-
-
-
- বিস্তারিত
-

অন্যান্য ডিভাইসের ক্ষেত্রে, অন্যান্য দৈর্ঘ্য একক প্রযোজ্য।

-

এই টিউটোরিয়ালের পরবর্তী পেজে এ সংক্রান্ত আরো তথ্য আছে।

-

মান ও একক সংক্রান্ত বিস্তারিত জানার জন্য, CSS Specificationএ আপনি  see Values ব্যবহার করতে পারেন।

-
-

টেক্সট লে-আউট

-

কোন এলিমেন্টের একাধিক কন্টেন্ট কীভাবে এক লাইনে নিয়ে আসা যায় তা দুইটি প্রপার্টি দিয়ে নির্ধারিত হয়। সাধারণ লে-আউট adjustment এর জন্য আপনি সেগুলো ব্যবহার করতে পারেনঃ

-
-
- {{ cssxref("text-align") }}
-
- কন্টেন্ট এক লাইনে নিয়ে আসা। এই ভেল্যুগুলোর যেকোনটি ব্যবহার করেঃ left, right, center, justify
-
- {{ cssxref("text-indent") }}
-
- আপনার নির্ধারিত পরিমাণ অনুসারে কন্টেন্ট ইনডেন্ট করেঃ
-
-

শুধুমাত্র লেখাতেই না কোন এলিমেন্টের লেখা সদৃশ যেকোন কনটেন্টে এই প্রপার্টিগুলো প্রয়োগ করা যেতে পারে। খেয়াল রাখবেন, এগুলো এলিমেন্টের children দিয়ে inherited, তাই অবান্তর ফলাফল এড়াতে  আপনাকে খুব সম্ভবত childrenএ সেগুলো বন্ধ করে নেওয়ার প্রয়োজন হতে পারে।

-
-
- উদাহরণ
-

শিরোনাম মাঝে আনতেঃ

- 
h3 {
-  border-top: 1px solid gray;
-  text-align: center;
-}
-
-

ফলাফলঃ

- - - - - - -
-

(A) The oceans

-
-

যে কোন HTML ডকুমেন্টে, শিরোনামের নিচে আপনি যে কনটেন্ট দেখেন তা গঠনগত ভাবে শিরোনামের আওতাধীন নয়। তাই আপনি যখন এরক্ম কোন শিরোনামকে এক লাইনে নিয়ে আসেন, তখন শিরোনামের নিচের ট্যাগগুলো ওই স্টাইলের অন্তর্ভুক্ত হয় না।

-
-

Floats

-

{{ cssxref("float") }} প্রপার্টি কোন এলিমেন্টকে ডানে-বামে সরায়। এলিমেন্টের অবস্থান ও আকার নির্ধারণের জন্য এটি একটি সহজ উপায়।

-

ডকুমেন্ট কনটেন্টের বাকি অংশ সাধারণত floated এলিমেন্টের চারদিকেই থাকে। অন্যান্য এলিমেন্টগুলোতে {{ cssxref("clear") }} প্রপার্টি ব্যবহার করে আপনি তাদের ফ্লট এর বাইরে থাকা নিয়ন্ত্রণ করতে পারেন।

-
-
- উদাহরণ
-

আপনার নমুনা ডকুমেন্টে, লিস্ট উইন্ডোতে ছড়িয়ে থাতে পারে। সেগুলোকে বাঁদিকে সরিয়ে আপনি তা রোধ করতে পারেন।

-

শিরোনামগুলোকে সঠিক স্থানে রাখার জন্য, আপনাকে অবশ্যই এটি নির্দিষ্ট করে দিতে হবে যেন সেগুলো ফ্লট মুক্ত থাকেঃ

- 
ul, #numbered {float: left;}
-h3 {clear: left;}
-
-
-

এমন দেখতে পাওয়ার কথাঃ

- - - - - - -
-

(A) The oceans

-
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
-

(B) Numbered paragraphs

-
-

1: Lorem ipsum

-

2: Dolor sit

-

3: Amet consectetuer

-

4: Magna aliquam

-

5: Autem veleum

-
-
-

(বক্সের ডানদিকে সামান্য padding দরকার, সেখানে বর্ডার লেখার খুবই কাছে হয়ে গিয়েছে।)

-

অবস্থান নির্ধারণ

-

চারটি উপায়ে আপনি কোন এলিমেন্টের অবস্থান নির্ধারণ করতে পারেন {{ cssxref("position") }} প্রপার্টি এবং নিচের যেকোন একটি ভেল্যু নির্দিষ্ট করে।

-

এগুলো এডভান্সড প্রপার্টি। সহজভাবেও এগুলো ব্যবহার করা যায় — সেজন্যই এই বেসিক টিউটোরিয়ালে এ সম্পর্কে বলা হয়েছে। তবে কমপ্লেক্স লে-আউটের জন্য এগুলো ব্যবহার করা কিছুটা জটিল হতে পারে।

-
-
- relative
-
- এলিমেন্টের স্বাভাবিক অবস্থানের আপেক্ষিক পরিবর্তন করা হয়। Use this to shift an element by a specified amount. You can sometimes use the element's margin to achieve the same effect.
-
- fixed
-
- এক্ষেত্রে এলিমেন্টের অবস্থান নির্দিষ্ট। এলিমেন্টের অবস্থান ডকুমেন্ট উইন্ডো অনুযায়ী নির্ধারণ করুন। বাকি ডেকুমেন্ট স্ক্রল করলেও এ ক্ষেত্রে এলিমেন্টটি স্থির থাকবে।
-
- absolute
-
- parent এলিমেন্টের তুলনায় এলিমেন্টের অবস্থান স্থির থাকবে। শুধুমাত্র একটি parent যার নিজের অবস্থান relative, fixed অথবা absolute দিয়ে নির্ধারিত সেটি কাজ করবে। position: relative নির্দিষ্ট করে আপনি যেকোন parent এলিমেন্টকেই এর জন্য প্রস্তুত করে নিতে পারেন; এর জন্য কোন শিফট ব্যবহার না করেই।
-
- static
-
- ডিফল্ট। অবস্থান নির্ধারণ করা সম্পূর্ণ বন্ধ করার প্রয়োজন হলে এই ভেল্যুটি ব্যবহার করুন।
-
-

position প্রপার্টির এই ভেল্যুগুলোর সাথে সাথে (static ব্যতীত), আরো কিছু প্রপার্টি নির্দিষ্ট করুনঃ top, right, bottom, left, width, height। আপনি কোথায় আপনার এলিমেন্টটি দেখতে পেতে চান তা এগুলো নির্দেশ করে এবং এর সাথে সাথে আকারও।

-
-
- উদাহরণ
-

দুইটি এলিমেন্ট একে অপরের উপর অবস্থাআন দেওয়ার জন্য, আপনার ডকুমেন্টের ভেতরে দুইটি এলিমেন্টসহ একটি  parent কন্টেইনার তৈরি করুনঃ

- 
<div id="parent-div">
-  <p id="forward">/</p>
-  <p id="back">\</p>
-</div>
-
-

আপনার স্টাইলশীটে, parents এর অবস্থান relative করুন। এখানে কোন প্রকৃত শিফট নির্ধারণের কোন প্রয়োজন নেই। children এর অবস্থান absolute নির্ধারণ করুনঃ

- 
#parent-div {
-  position: relative;
-  font: bold 200% sans-serif;
-}
-
-#forward, #back {
-  position: absolute;
-  margin:0px; /* no margin around the elements */
-  top: 0px; /* distance from top */
-  left: 0px; /* distance from left */
-}
-
-#forward {
-  color: blue;
-}
-
-#back {
-  color: red;
-}
-
-

ফলাফলে ফরওয়ার্ড শ্ল্যাশের উপরে ব্যাকশ্ল্যাশ দিয়ে এমনটি দেখতে পাওয়ার কথাঃ

-
-

/

-

\

-
- - - - - - -
 
-
-
-
- আরো বিস্তারিত
-

অবস্থান নির্ধারণের পুরো বিষয়টির উপর CSS Specificationএ দুইটি জটিল অধ্যায় আছেঃ  Visual formatting model এবং Visual formatting model details.

-

আপনি যদি একাধিক ব্রাউজারে কার্যকর কোন স্টাইলশীট ডিজাইন করতে থাকেন, তবে আপনারও তা অ্যাকাউন্ট ডিফারেন্সে নেওয়ার দরকার হতে পারে, যেভাবে ব্রাউজার স্ট্যান্ডার্ডের সাথে interpret করে এবং খুব সম্ভবত নির্দিষ্ট কিছু ব্রাউজারের বিশেষ কিছু ভার্সনে বাগ করতে পারে।

-
-

Action: লে-আউট নির্ধারণ

-
    -
  1. আপনার নমুনা ডকুমেন্ট পরিবর্তন করুন, doc2.html এবং স্টাইলশীট, style2.css, এই অংশে উপরের উদাহরণ ডকুমেন্ট স্ট্রাকচার এবং ফ্লটস।
    2. -
  2. ফ্লটস উদাহরণে, আপনার padding যুক্ত করুন ডানদিকের বর্ডার থেকে টেক্সট 0.5 em দূরে সরানোর জন্য।
    3. -
-
-
- চ্যালেঞ্জ
-

আপনার নমুনা ডকুমেন্ট পরিবর্তন করুন, doc2.html, শেষ করার আগ দিয়ে এই ট্যাগটি যুক্ত করে, </body> ট্যাগের ঠিক আগে।

- 
<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
-
-

এই টিউটোরিয়ালে আপনি যদি ইমেজ ফাইলটি আগে থেকে ডাউনলোড না করে থাকেন, তবে এখন সেটি ডাউনলোড করে নিন এবং নমুনা ফাইলের মত একই ডিরেক্টরিতে এটি রাখুনঃ

- - - - - - -
Image:Yellow-pin.png
-

আপনার ডকুমেন্টের কোথায় ইমেজটি দেখা যেতে ঠিক করে নিন। এবার আপনার ব্রাউজার রিফ্রেশ করুন আপনার কাজ সঠিক হয়েছে কিনা তা দেখার জন্য।

-

আপনার স্টাইলশীটে একটি রুল যুক্ত করুন যা আপনার ডকুমেন্টে উপরের দিকে ডানে ইমেজটি রাখে।

-

আপ্নার ব্রাউজার রিফ্রেশ করে উইন্ডোটি ছোট করুন। যখন আপনি আপনার ডকুমেন্ট স্ক্রল করেন তখন দেখুন ইমেজটি উপরের দিকে ডানে থাকে কিনাঃ

-
-
-

(A) The oceans

-
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
-

(B) Numbered paragraphs

-
-

1: Lorem ipsum

-

2: Dolor sit

-

3: Amet consectetuer

-

4: Magna aliquam

-

5: Autem veleum

-
-

 

-
- Yellow map pin
-
-
-
-

 এই চ্যালেঞ্জটির একটি সমাধান দেখুন।

-

এর পরে?

-

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables") }} এইমাত্র আপনি এই বেসিক CSS টিউটোরিয়ালের সব টপিক প্রায় শেষ করে ফেলেছেন। পরবর্তী পেজটি CSS রুলের আরো অ্যাডভান্সড সিলেক্টর বর্ণনা করে এবং আরো কিছু নির্দিষ্ট উপায় যা দিয়ে আপনি টেবিল স্টাইল করতে পারেন।

diff --git a/files/bn/learn/css/first_steps/how_css_is_structured/index.html b/files/bn/learn/css/first_steps/how_css_is_structured/index.html deleted file mode 100644 index ce6781137e..0000000000 --- a/files/bn/learn/css/first_steps/how_css_is_structured/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Readable CSS -slug: Learn/CSS/First_steps/How_CSS_is_structured -tags: - - NeedsReview -translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable -translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS -original_slug: Web/CSS/Getting_Started/Readable_CSS ---- -

{{ CSSTutorialTOC() }}

-

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}This is the 6th section of the CSS Getting Started tutorial; it discusses the style and grammar of the CSS language itself. You change the way your sample CSS file looks, to make it more readable.

-

তথ্য: পাঠযোগ্য CSS

-

আপনি এগুলো আরো পাঠযোগ্য করার জন্য আপনার স্টাইলশীট  এ সাদা স্থান এবং মন্তব্য যুক্ত করতে পারেন।  You can also group selectors together? যখন একই স্টাইল নিয়ম বিভিন্ন ভাবে নির্বাচিত উপাদানের উপর প্রয়োগ করা যায় ।

-

সাদা স্থান

-

হোয়াইট স্পেস মানে প্রকৃত স্পেস, ট্যাব ও নতুন লাইন . আপনি আপনার স্টাইলশীট আরো পাঠযোগ্য করতে সাদা স্থান যোগ করতে পারেন।

-

পৃষ্ঠা বিন্যাস এবং গঠন context এর মধ্যে সাদা স্থান হচ্ছে পৃষ্ঠার অচিহ্নিত অংশ : কলাম এবং টাইপ লাইনের মধ্যে  মার্জিন, gutters, এবং স্থান।

-

 আপনার নমুনা সিএসএস ফাইল বর্তমানে এক নিয়ম প্রতি লাইনে এবং প্রায় সর্বনিম্ন সাদা স্থান  আছে। একটি জটিল স্টাইলশীটে এই বিন্যাস পড়া কঠিন হয়ে দাড়াবে এবং স্টাইলশীট বজায় রাখাও কঠিন হবে ।

-

আপনার নির্বাচিত বিন্যাস সাধারণত একটি ব্যক্তিগত পছন্দ, কিন্তু আপনার স্টাইলশীট যদি ভাগ প্রকল্পের অংশ হয়, তাহলে ঐসব প্রকল্পের তাদের নিজস্ব নিয়মাবলী থাকতে পারে।
-  

-
-
- উদাহরণ
-
- কিছু মানুষ যেমন কম্প্যাক্ট বিন্যাস আমরা  ব্যবহার করছি , শুধুমাত্র একটি লাইন বিভাজন যখন এটা খুব দীর্ঘ হয়ে যায় :
-
- 
.carrot {color: orange; text-decoration: underline; font-style: italic;}
-
-

কিছু মানুষ প্রতি লাইনে একটি মান পছন্দ করে :

- 
.carrot
-{
-color: orange;
-text-decoration: underline;
-font-style: italic;
-}
-
-

কিছু মানুষ  indention ব্যবহার করে যেমন- দুই স্পেস, চার স্পেস  অথবা একটি ট্যাব  হচ্ছে সাধারণ:

- 
.carrot {
-  color: orange;
-  text-decoration: underline;
-  font-style: italic;
-}
-
-

 কিছু মানুষ সবকিছু  ঊর্ধ্বাভাবে  লাইনে লিখতে পছন্দ করে (কিন্তু এর মত একটি বিন্যাস বজায় রাখা কঠিন):

- 
.carrot
-    {
-    color           : orange;
-    text-decoration : underline;
-    font-style      : italic;
-    }
-
-

কিছু মানুষ পাঠযোগ্যতা উন্নত করার লক্ষে্য  মিশ্র হোয়াইটস্পেস ব্যবহার করে।

- 
.vegetable         { color: green; min-height:  5px; min-width:  5px }
-.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
-.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
-
-
-

কিছু মানুষ বিন্যাসের জন্য ট্যাব ব্যবহার করেন । কিছু মানুষ শুধুমাত্র ফাঁকা স্থান ব্যবহার করেন।

-

মন্তব্য

-

CSS এর মধ্যে মন্তব্য শুরু হয় /* এবং শেষ হয় */ দিয়ে ।

-

আপনি আপনার স্টাইলশীট এ প্রকৃত মন্তব্য করতে মন্তব্য ব্যবহার করতে পারেন, এবং এছাড়াও  সাময়িকভাবে উদ্দেশ্যে পরীক্ষার জন্য একটা অংশ মন্তব্য করতে  পারেন ।

-

স্টাইলশীট  মন্তব্য অংশ আউট  করার জন্য, সে অংশ একটি একটি মন্তব্যে লিখুন যাতে ব্রাউজার এটি উপেক্ষা করে। আপনি সতর্ক থাকুন যেখানে মন্তব্য  শুরু এবং শেষ। বাকি স্টাইলশীট এ সঠিক স্যনটেক্স থাকতে হবে।

-
-
- উদাহরণ
- 
/* প্রথম অনুচ্ছেদে প্রাথমিক অক্ষর C এর জন্য শৈলী  */
-.carrot {
-  color:            orange;
-  text-decoration:  underline;
-  font-style:       italic;
-  }
-
-
-

দলবদ্ধ নির্বাচক

-

যখন অনেক উপাদানের একই শৈলী থাকে, আপনি নির্বাচক একটি গ্রুপ উল্লেখ করে কমা দিয়ে তাদের পৃথক করতে পারেন। ঘোষণা সমস্ত নির্বাচিত উপাদানের ক্ষেত্রে প্রযোজ্য।

-

অন্যত্র আপনার স্টাইলশীট আপনি আবার পৃথকভাবে একই নির্বাচক নির্দিষ্ট করতে পারেন, তাদের ব্যক্তিগত শৈলী নিয়ম প্রযোজ্য।

-
-
- উদাহরণ
-

এই নিয়ম  {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, এবং {{ HTMLElement("h3") }} উপাদান একই রং তৈরি করে।

-

 শুধুমাত্র এক জায়গায় রঙ উল্লেখ করা সুবিধাজনক, যদি না এটি পরিবর্তন করা হয়।

- 
/* color for headings */
-h1, h2, h3 {color: navy;}
-
-
-

প্রক্রিয়া: মন্তব্য যোগ এবং বিন্যাস উন্নতি

-
    -
  1. আপনার CSS ফাইল সম্পাদনা করুন, এবং এটি এই নিয়ম আছে কিনা তা নিশ্চিত করুন (in any order): - 
    strong {color: red;}
-.carrot {color: orange;}
-.spinach {color: green;}
-#first {font-style: italic;}
-p {color: blue;}
-
    -
    2. -
  2. এটি আরো পাঠযোগ্য করুন সাজানোর দ্বারা এমন একটি উপায়ে যেন এটি আপনি যৌক্তিক খুঁজে  পান , এবং হোয়াইটস্পেস এবং মন্তব্য যুক্ত করে যাই হোক না কেন  যে উপায়  আপনি সেরা মনে করেন।
    3. -
  3. আপনার ব্রাউজারে প্রদর্শন ফাইল সংরক্ষণ করুন এবং রিফ্রেশ করুন,নিশ্চিত করুন যে স্টাইলশীট যেভাবে কাজ করে আপনার পরিবর্তন তাকে প্রভাবিত না করেঃ  - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    4. -
-
-
- চ্যালেঞ্জ
-

আপনার স্টাইলশীট অংশের আউট মন্তব্য, অন্য কিছু পরিবর্তন ছাড়া, আপনার নথির খুব প্রথম অক্ষর লাল করা,

- - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
-

(এই কাজ করতে একাধিক উপায় আছে ।)

-
-
- Possible solution
- One way to do this is to put comment delimiters around the rule for .carrot: - 
/*.carrot {
-  color: orange;
-}*/
- Hide solution
- See a solution for the challenge.
-

What next?

-

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Your sample stylesheet has used italic text and underlined text. The next page describes more ways to specify the appearance of text in your document.

diff --git a/files/bn/learn/css/first_steps/how_css_works/index.html b/files/bn/learn/css/first_steps/how_css_works/index.html deleted file mode 100644 index 566a6757d9..0000000000 --- a/files/bn/learn/css/first_steps/how_css_works/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: কিভাবে CSS কাজ করে -slug: Learn/CSS/First_steps/How_CSS_works -tags: - - Beginner - - CSS - - CSS:Getting_Started - - NeedsReview - - Web -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works -original_slug: Web/CSS/Getting_Started/How_CSS_works ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}} এটিCSS Getting Started টিউটোরিয়াল এর তৃতীয় অধ্যায়; এটা আপনার ব্রাউজারে CSS কিভাবে কাজ করে ব্যাখ্যা করে। আপনার নমুনা ডকুমেন্ট বিশ্লেষণ করেন,তার স্টাইল এর বিবরণ প্রকাশের মধ্য দিয়ে।

- -

তথ্য: CSS কিভাবে কাজ করে

- -

যখন একটি ব্রাউজার একটি ডকুমেন্ট প্রদর্শন করে, এটি অবশ্যই ডকুমেন্ট এর উপকরনের সাথে এর স্টাইল তথ্য এর সমন্বয় ঘটায়।এটি ডকুমেন্ট টি কে দুই ধাপে প্রসেস করে থাকেঃ

- -
    -
  1. ব্রাউজার টি মার্ক আপ লেঙ্গুয়েজ এবং সিএসেস একটি কাঠামোতে পরিবর্তন করে যেটির নাম DOM (ডকুমেন্ট অবজেক্ট মডেল). The DOM কম্পিউটার এর মেমরি তে ডকুমেন্ট কে উপস্থাপন করে.এটি ডকুমেন্ট এর উপকরনের সাথে এর স্টাইল এর সমন্বয় ঘটায়।
    2. -
  2. ব্রাউজার টি DOM এর কন্টেন্ট গুলো কে তুলে ধরে।
    3. -
- -

একটি মার্ক আপ ল্যাঙ্গুয়েজ elementsব্যাবহার করে ডকুমেন্ট এর গঠন ব্যাখ্যা দেয়ার জন্য। ট্যাগ ব্যাবহার করে আপনি একটি elementকে মার্ক করতে পারেন, এর মধ্যে আছে স্ট্রিং যেটা শুরু হয় '<' দিয়ে এবং শেষ হয় '<' দিয়ে। বেশির ভাগ এলিমেন্ট এর জোড়া ট্যাগ আছে।একটি স্টার্ট ট্যাগ আর এন্ড ট্যাগ। স্টার্ট এর ক্ষেত্রে, elementএর নাম, '< >' এর ভিতরে ।এন্ড ট্যাগ এর ক্ষেত্রে element এর নাম এর আগে ,'<' এর পরে '/' বসাতে হবে।

- -

মার্ক আপ ল্যাঙ্গুয়েজ এর উপর ভিত্তি করে, কিছু element এর শুধু মাত্র স্টার্ট ট্যাগ অথবা শুধুমাত্র সিঙ্গেল ট্যাগ থাকবে যেখানে '/' নাম এর পরে আসে।

- -

একটি element একটি পাত্র হতে পারে , স্টার্ট ট্যাগ এবং এন্ড ট্যাগ এর মাঝে অন্যান্য উপকরন নিএ।

- -

একটি DOM এর গাছ এর মত কাঠামো থাকে. মার্ক আপ ল্যাঙ্গুয়েজ এ প্রতিটি element and টেক্সট এর রান একটি  node হিসেবে কাজ করে এই গাছ কাঠামোতে. DOM nodes গুলো পাত্র নয়। বরং, এগুলোকে শিশু node এর অভিভাবক ধরা যায়।

- -
-
উদাহরনঃ
-আপনার সেম্পল উদাহরনে, <p> ট্যাগ এবং এর অ্যান্ড ট্যাগ </p> একটি পাত্র তৈরি করে - -
<p>
-  <strong>C</strong>ascading
-  <strong>S</strong>tyle
-  <strong>S</strong>heets
-</p>
-
- -

বাস্তব উদাহরণঃ

- -

http://jsfiddle.net/djaniketster/6jbpS/

- -

DOM এ corresponding P node টি কে অভিভাবক ধরা হয় .এর শিশু node গুলো  হল স্ট্রং nodes and টেক্সট nodes. স্ট্রং nodes গুলো নিজেরাই হল অভিভাবক, text nodes গুলোকে নিয়ে নিজেদের শিশু node হিসেবে ।

- -
P
-├─STRONG
-│ └─"C"
-├─"ascading"
-├─STRONG
-│ └─"S"
-├─"tyle"
-├─STRONG
-│ └─"S"
-└─"heets"
-
- -

 DOM বোঝা আপনাকে সাহায্য করবে ডিজাইন করতে, debug করতে and আপনার CSS রক্ষণাবেক্ষণ করতে কারন  DOM হল যেখানে আপনার CSS ডকুমেন্ট এর content মিলিত হয়.

- -

কার্যকরণ: একটি DOM বিশ্লেষণ

- -

DOM Inspector ব্যাবহার

- -

একটি DOM বিশ্লেষণ করতে হলে, আপনার প্রয়জনহবে স্পেশাল সফটওয়্যার এর.এখানে আপনি ব্যাবহার করবেন মোজিলার  DOM Inspector (DOMi) add-on , একটি DOM বিশ্লেষণ এর জন্য। এই কাজ টি করার জন্য আপনাকে add-on টি ইন্সটল করতে হবে।

- -
    -
  1. মোজিলা ব্রাউজার টি ব্যাবহার করুন আপনার স্যাম্পল HTML ডকুমেন্ট টি ওপেন করবার জন্য.
    2. -
  2. আপনার ব্রাউজার এর মেনু বার থেকে , বাছাই করুন Tools > DOM Inspector, অথবা এভাবে Tools > Web Development > DOM Inspector. -
    -
    আরও
    - -

    যদি আপনার মোজিলা ব্রাউজার এ DOMi না থাকে, তাহলে এটি ব্যাবহার করতে পারেন install it from the Add-ons site এবং ব্রাউজার রি-স্টার্ট করতে হবে। তারপর ফিরে যাবেন টিউটোরিয়াল এ।

    - -

    যদি আপনি DOMi ইন্সটল করতে না চান ( অথবা আপনি নন- মোজিলা ব্রাউজার ব্যাবহার করেন), আপনি ব্যাবহার করতে পারেন Web X-Ray Goggles, যেভাবে বিবরন দেয়া আছে পরবর্তী সেকশন এ। অথবা আপনি সেকশন টি বাদ রেখে পরবর্তী পেজ এ চলে যেতে পারেন. সেকশন টি বাদ দিয়ে গেলে টিউটোরিয়াল এর বাকি অংশে কোন প্রভাব ফেলবে না।

    -
    -
    3. -
  3. DOMi এ, আপনার ডকুমেন্ট এর  nodes গুলোকে বিস্তৃত করুন arrows এ ক্লিক করার মাধ্যমে। -

    দ্রষ্টব্য:  আপনার HTML ফাইল এ স্পেসিং করলে হয়ত DOMi কিছু শুন্য text nodes দেখাতে পারে,যেগুলো আপনি উপেক্ষা করতে পারেন।

    - -

    রেসাল্ট এর অংশ হয়ত এরূপ দেখাবে যা নিরভর করছে আপনি কোন nodes গুলোকে বিস্তৃত করেছেন:

    - - 
    │ ▼╴P
-│ │ │ ▼╴STRONG
-│ │ └#text
-│ ├╴#text
-│ ►╴STRONG
-│ │
    - -

    যখন আপনি একটি node সিলেক্ট করবেন, আপনিDOMi's এর ডান-হাত প্যান টি ব্যাবহার করতে পারেন আরও কিছু খুজে বের করার জন্য. উদাহরন সরূপ , আপনি যখন একটি text node সিলেক্ট করবেন, DOMi আপনাকে ডান-হাত  প্যান এ টেক্সট টি দেখাবে.

    - -

    যখন আপনি একটি element node সিলেক্ট করবেন, DOMi সেটি বিশ্লেষণ করবে এবং ডান হাত প্যান এ অনেক তথ্য সরবরাহ করবে।স্টাইল তথ্য হল বিতরন করা তথ্য এর ই একটি অংশ।

    -
    4. -
- -
-
চেলেঞ্জঃ
-DOMi তে, স্ট্রং  node এ ক্লিক করুন।
- -

DOMi এর ডান হাত প্যান টি ব্যাবহার করুন খুজে বের করার জন্য কোথায় node এর রঙ লাল রাখা হয়েছে এবং কোথায় এটিকে সাধারন টেক্সট এর তুলনায় গাঢ় দেখান হয়েছে।

- -
-
Possible solution
- -

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

-Hide solution
-See a solution for the challenge.
- -

 Web X-Ray Goggles এর বেবহারঃ

- -

Web X-Ray Goggles ,  DOM Inspector এর তুলনায় কম তথ্য সরবরাহ  করে কিন্তু এটি ব্যাবহার করা ও ইন্সটল করা সহজ।

- -
    -
  1. Web X-Ray Goggles এর জন্য হোম পেজ এ যান।
    2. -
  2. পেজের bookmarklet এর লিংক টি কে টেনে ব্রাউজার টুলবার এ আনুন।
    3. -
  3. আপনার স্যাম্পল  HTML ডকুমেন্ট টি খুলুন।
    4. -
  4. Web X-Ray Goggles কে এক্টিভেট করুন টুলবার এর  bookmarklet এ ক্লিক করার মাধ্যমে।
    5. -
  5. আপনার কার্সর এর পয়েন্টআর টিকে, ডকুমেন্ট এর এলেমেন্ট দেখার জন্য ডকুমেন্ট এর উপর ঘোরান।
    6. -
- -

পরবর্তীতে কি আছে?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & Inheritance") }}যদি আপনি চ্যালেঞ্জ টি গ্রহন করে থাকেন,আপনি দেখতে পেয়েছেন যে একাধিক জায়গা থেকে স্টাইল তথ্য যোগাযোগ স্থাপন করে একটি এলেমেন্ট  এর জন্য একটি ফাইনাল স্টাইল তৈরি করতে।next page এই সব যোগাযোগ স্থাপনের বেপারে আরও বিবরন দিবে।

diff --git a/files/bn/learn/css/first_steps/index.html b/files/bn/learn/css/first_steps/index.html deleted file mode 100644 index 25d4dddb0c..0000000000 --- a/files/bn/learn/css/first_steps/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: যেভাবে শুরু করবেন (CSS টিউটোরিয়াল) -slug: Learn/CSS/First_steps -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started -original_slug: Web/CSS/Getting_Started ---- -

সম্পূর্ণ নতুনদের জন্য লেখা এই CSS টিউটোরিয়াল আপনাকে Cascading Style Sheets (ক্যাসকেডিং স্টাইল শিট বা CSS) এর সঙ্গে পরিচয় করিয়ে দেবে। এই গাইডটি ভাষাটির খুবই সাধারণ ফিচারগুলো সাথে উদাহরণসহ আপনাকে পরিচয় করিয়ে দেবে, যা আপনি নিজের ব্রাউজারে ঘরে বসেই চালিয়ে দেখতে পারবেন। এর ফলে আধুনিক ব্রাউজারগুলোতে CSS এর সাধারণ বিষয়গুলো আপনি সহজেই বুঝতে পারবেন।

-

CSS এ নতুন, এমন পাঠকদের জন্যই এই টিউটোরিয়াল লেখা হয়েছে, যদি আপনার CSS এর কিছু অতি সাধারণ বিষয় জানাশোনা তারপরেও আপনি এটি ব্যবহার করতে পারবেন। আপনি যদি CSS এ অভিজ্ঞ হয়ে থাকেন, তবে এই টিউটোরিয়ালটি আপনার বিশেষ একটা উপকার করতে পারবে না, CSS এর মূল পৃষ্ঠায় আরও এ্যাডভান্সড বিষয়ের তালিকা রয়েছে।

- -

শুরু করার পূর্বে আপনার কি করা প্রয়োজন?

-

এই টিউটোরিয়ালটি ভালোভাবে অনুসরণ করতে চাইলে আপনার প্রয়োজন একটি টেক্সট এডিটর এবং একটি আধুনিক ব্রাউজার। কি করে এগুলো ব্যবহার করতে হয় - এ সংক্রান্ত বেসিক জানাশোনা থাকা ভালো।

-

আপনি যদি ফাইল নিয়ে ঘাঁটাঘাঁটি না করতে চান, তবে আপনি পুরো টিউটোরিয়ালটি শুধু পড়ে যেতে পারেন, এবং ছবিগুলোর দিকে চোখ বুলিয়ে যেতে পারেন, কিন্তু এ পদ্ধতিটি খুব একটা কার্যকর বা ভালো পদ্ধতি নয় বলে আমরা মনে করি।

-

উল্লেখ্য: CSS এর সাহায্যে রং নিয়ে কাজ করা যায়, তাই এই টিউটোরিয়ালের কিছু অংশ রংয়ের ওপর নির্ভরশীল। আপনি এই অংশগুলো সহজেই কাজে লাগাতে পারবেন যদি আপনার একটি রঙিন মনিটর বা ডিসপ্লের পাশাপাশি স্বাভাবিক রং দেখায় কোন শারীরিক সমস্যা না থাকে।

-

যেভাবে টিউটোরিয়ালটি ব্যবহার করবেন

-

এই টিউটোরিয়ালটি ব্যবহারের জন্য প্রতিটা পৃষ্ঠা ভালোভাবে এবং ধারাবাহিকভাবে পড়ুন। যদি আপনি একটি পৃষ্ঠা বাদ দিয়ে ফেলেন, তাহলে পরবর্তী পৃষ্ঠাগুলো বোঝা আপনার জন্য অনেকটা কঠিন হতে পারে।

-

সিএসএস কিভাবে কাজ করে বোঝার জন্য প্রতিটি পৃষ্ঠার "তথ্যাবলী" অংশটি ভালো করে পড়ুন। "হাতে-কলমে" অংশগুলো পড়ে আপনার নিজের কম্পিউটারে CSS ব্যবহারের চেষ্টা করে দেখুন।

-

আপনি কতটুকু বুঝতে পেরেছেন, তা যাচাই করতে প্রতিটি পৃষ্ঠার শেষে থাকা "চ্যালেঞ্জ" গ্রহণ করুন। চ্যালেঞ্জের সমাধান কিন্তু চ্যানলেঞ্জের নিচেই লিংকের মাধ্যমে দেওয়া আছে, তাই ওগুলো খুব বেশি প্রয়োজন হলে না দেখাই ভালো! নিজে নিজে অবশ্যই চেষ্টা করতে হবে এবং যদি ব্যর্থ হন বারবার, তবে সামান্য একটু উঁকি মেরে দেখা দোষের কিছু না!

-

CSS আরও গভীরভাবে বুঝতে চাইলে "অতিরিক্ত তথ্য" লেখা বাক্সগুলোর তথ্য পড়ুন। লিংকগুলোর সাহায্যে CSS সংক্রান্ত আরও অনেক রেফারেন্স তথ্য খুঁজে বের করতে পারবেন।

-

টিউটোরিয়াল ২য় পর্ব

-

এই টিউটোরিয়ালের দ্বিতীয় পর্বে অন্যান্য ওয়েব ও মোজিলা প্রযুক্তির সাথে CSS ব্যবহারের কথা আলোচনা করা হয়েছে।

-
    -
  1. JavaScript (জাভাস্ক্রিপ্ট)
    2. -
  2. SVG গ্রাফিক্স
    3. -
  3. XML ডাটা
    4. -
  4. XBL বাইন্ডিং
    5. -
  5. XUL ইউজার ইন্টারফেস
    6. -
diff --git a/files/bn/learn/css/howto/generated_content/index.html b/files/bn/learn/css/howto/generated_content/index.html deleted file mode 100644 index 90cef28d3b..0000000000 --- a/files/bn/learn/css/howto/generated_content/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: বিষয়বস্তু -slug: Learn/CSS/Howto/Generated_content -tags: - - Basic - - Beginner - - CSS - - CSS Backgraound - - 'CSS:Getting_Started' - - Guide - - NeedsLiveSample - - NeedsUpdate - - Web -translation_of: Learn/CSS/Howto/Generated_content ---- -

{{ CSSTutorialTOC() }}

-

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color") }}এটি CSS Getting Started টিউটোরিয়ালের ৯ম বিভাগ; এখানে বর্ণনা করা হয়েছে কিভাবে আপনি CSS ব্যাবহার করে একটি ডকুমেন্টে বিষয়বস্তু যোগ করবেন। আপনি টেক্সট কন্টেন্ট এবং ইমেজ যোগ করার জন্য আপনার স্টাইলশীট পরিবর্তন করুন।

-

তথ্য: বিষয়বস্তু

-

CSS এর গুরুত্বপূর্ণ বৈশিষ্ট হল এটি একটি ডকুমেন্টের বিষয়বস্তু থেকে ডকুমেন্টের স্টাইলকে আলাদা করতে সাহায্য করে। এখনো সেখানে এমন কিছু অবস্থা আছে যেখানে এটা বুঝায় যে স্টাইলশিট এর অংশ হিসেবে কিছু নির্দিষ্ট বিষয়বস্তু ঠিক করতে হয়, ডকুমেন্ট এর অংশ হিসেবে নয়।

-

একটি স্টাইলশীটে নির্দিষ্ট বিষয়বস্তু টেক্সট বা ইমেজ গঠিত হতে পারে।যখন আপনি আপনার স্টাইলশীট বিষয়বস্তু উল্লেখ করেন তখন বিষয়বস্তুকে ঘনিষ্ঠভাবে ডুকুমেন্টের কাঠামো সাথে সংযুক্ত করা হয়।

-
-
- আরো বিস্তারিত
-

একটি স্টাইলশীট কন্টেন্ট উল্লেখ করতে জটিলতার সৃষ্টি হতে পারে। উদাহরণস্বরূপ, আপনি হয়ত স্টাইলশীটে আপনার ডকুমেন্টে থাকা বিভিন্ন ভাষা শেয়ার করেছেন। যদি স্টাইলশিট এর অংশ অনুবাদ করতে হয়, এর মানে হল যে আপনাকে অবশ্যই স্টাইলশিট এর সে অংশগুলো আলাদা আলাদা ফাইল এ রাখতে হবে এবং আপনার ডকুমেন্ট এর সঠিক ভাষা সংস্করণের সাথে তাদের সংযুক্ত করার ব্যবস্থা করতে হবে।

-

এই জটিলতাগুলো হয় না যদি আপনি চিহ্ন অথবা ছবি বা ইমেজ সমৃদ্ধ বিষয়বস্তু নির্দিষ্ট করেন যেটি সকল ভাষা এবং সংস্কৃতিতে প্রয়োগ করা যায়।

-

একটি স্টাইলশীট নির্দিষ্ট বিষয়বস্তু DOM এর অংশ নয়।

-
-

টেক্সট কন্টেন্ট

-
-
- একটি উপাদান আগে বা পরে আপনি CSS টেক্সট কন্টেন্ট সন্নিবেশ করতে পারেন। কিভাবে আপনি কন্টেন্টি  {{ cssxref("::before") }} অথবা {{ cssxref("::after") }} যোগ করবেন তার একটি নির্দিষ্ট নিয়ম selector এ দেয়া আছে। টেক্সট কন্টেন্ট নির্দিষ্ট মান {{ cssxref("content") }} প্রোপার্টির সাথে উল্লেখ করুন।
-
-
-
- উদাহরণ
-

এই নিয়মে টেক্সট এ যোগ করুণ Reference : before every element with the class ref:

- 
.ref:before {
-  font-weight: bold;
-  color: navy;
-  content: "Reference: ";
-}
-
-
-
-
- আরো বিস্তারিত
-

একটি স্টাইলশিট এর অক্ষরের সেট ডিফল্ট রুপে UTF-8 থাকে, কিন্তু এটা সংযুক্ত করে নির্দিষ্ট করা যায় অথবা স্টাইলশিট এটা নিজে অথবা আরও বিভিন্ন উপায়ে। আরও বিস্তারিত জানার জন্য দেখুন 4.4 CSS style sheet representation CSS নির্দিষ্টকরণ।

-

আলাদা অক্ষরগুলোও escape প্রক্রিয়ায় নির্দিষ্ট করা যায় যেটি backslash ব্যবহার করে escape অক্ষর বা চিহ্ন হিসেবে। উদাহরণস্বরূপ, \265B হচ্ছে দাবার black queen ♛ এর প্রতীক। আরও বিস্তারিত জানার জন্য দেখুন,  Referring to characters not represented in a character encoding এবং Characters and case CSS নির্দিষ্টকরণে ।

-
-

ইমেজ বা ছবি বিষয়বস্তু

-

একটি উপাদানের আগে বা পরে ছবি সংযুক্ত করার জন্য, আপনি ছবিটির URL  এই{{ cssxref("content") }} প্রপার্টি এর মানের মাঝে বসাবেন।

-
-

উদাহরণ
- এই নিয়মটি প্রতিটি link এর পরে একটি space দেয় এবং একটি icon যোগ করে  যেটিতে class glossary আছে:

- 
a.glossary:after {content: " " url("../images/glossary-icon.gif");}
-
-
-

কোন উপাদানের background এ ছবি বা ইমেজ সংযুক্ত করার জন্য, কোন একটি ছবি বা ইমেজ এর URL {{ cssxref("background") }} প্রপার্টি এর মানের মাঝে নির্দিষ্ট করুন।এটি একটি shorthand প্রপার্টি যেটি background color, ছবি, কিভাবে ছবি এবং অন্যান্য বিস্তারিত নির্দিষ্টকরণে সহায়তা করে।

-
-
- উদাহরণ
-

এই নিয়মটি একটি নির্দিষ্ট উপাদানের background সেট করে, URL ব্যবহার করে image file উল্লেখ করে।

-

selector কোন উপাদানের id উল্লেখ করে। no-repeat মানটি image কে একবার দেখাতে সাহায্য করে :

- 
#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
-
-
-
-
- আরও বিস্তারিত
-

আলাদা আলাদা প্রপার্টিজ affecting backgrounds এবং অন্যান্য options যখন আপনি background ইমেজ গুলো ঠিক করেন সেইসব তথ্য এর জন্য, দেখুন{ cssxref("background") }} রেফেরেন্স পৃষ্ঠা।

-
-

Action: Adding a background ইমেজ

-

এ ইমেজ টি একটি সাদা বর্গ যেখানে এর নিচে একটি নীল লাইনে আছে :

- - - - - - -
Image:Blue-rule.png
-
    -
  1. ইমেজ ফাইল টি Download করুন CSS file এর মত একই পদ্ধতিতে। (উদাহরণস্বরূপ, ডান পাশের বাটন এ ক্লিক করুন context মেনুটির জন্য, তারপর Save Image As টি তে ক্লিক করুন এবং এই টিউটোরিয়াল এর জন্য যে পদ্ধতি টি ব্যবাহার করছেন সেটি উল্লেখ করুন।)
    2. -
  2. আপনার CSS ফাইলটি সম্পাদন করুন এবং এই নিয়মটি body তে যোগ করুন , সম্পূর্ণ পৃষ্ঠার জন্য ব্যাকগ্রাউন্ড image যোগ করুন ।
    - 
    background: url("Blue-rule.png");
-
    -

    repeat মান টি ডিফল্ট, তাই একে কিছু করতে হবে না। ইমেজ বা ছবিটি বা অনূভুমিকপভাবে বা উলম্বভাবে পুনরাবৃত্তি হয় , যেটা রেখাযুক্ত লেখা কাগজের মত দেখায় :

    -
    -

    Image:Blue-rule-ground.png

    -
    -
    -

    Cascading Style Sheets

    -
    -
    -

    Cascading Style Sheets

    -
    -
    -
    -
    3. -
-
-
- চ্যালেঞ্জ
-

এই ইমেজ টি ডাউনলোড করুন:

- - - - - - -
Image:Yellow-pin.png
-

আপনার স্টাইলশিট এ একটি নিয়ম যোগ করুন যাতে করে এটি প্রতিটি লাইনের প্রথমে ইমেজ বা ছবি প্রদর্শন করে :

-
-

Image:Blue-rule-ground.png

-
-
- image:Yellow-pin.png Cascading Style Sheets
-
- image:Yellow-pin.png Cascading Style Sheets
-
-
-
-
- Possible solution
-

Add this rule to your stylesheet:

- 
p:before{
-  content: url("yellow-pin.png");
-}
-
-

 

- Hide solution
- See a solution for the challenge.
-

পরবর্তীতে কি আছে?

-

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}একটি সাধারণ প্রক্রিয়া  stylesheets কিভাবে লিস্টে বিভিন্ন আইটেম মার্ক করার জন্য বিষয়বস্তু যোগ করে। পরবর্তী বিভাগ বর্ণনা করবে কিভাবে specify style for list elements।

diff --git a/files/bn/learn/css/howto/index.html b/files/bn/learn/css/howto/index.html deleted file mode 100644 index d862a4cb53..0000000000 --- a/files/bn/learn/css/howto/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Use CSS to solve common problems -slug: Learn/CSS/Howto -translation_of: Learn/CSS/Howto ---- -
Translation in progress
- -
{{LearnSidebar}}
- -

The following links provide solutions to common problems you can solve with CSS.

- -

Common use cases

- -
-
-

Basics

- - - -

CSS and text

- - -
- -
-

Boxes and layouts

- - -
-
- -

Uncommon and advanced techniques

- -

CSS allows very advanced design techniques. These articles help demistify the harder use cases you may face.

- -

General

- - - -

Advanced effects

- - - -

Layout

- - - -

See also

- -

CSS FAQ — A variety of topics: from debugging to selector usage.

diff --git a/files/bn/learn/css/index.html b/files/bn/learn/css/index.html deleted file mode 100644 index 7714bdbd67..0000000000 --- a/files/bn/learn/css/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Learn to style HTML using CSS -slug: Learn/CSS -tags: - - Beginner - - CSS - - CodingScripting - - Debugging - - Landing - - NeedsContent - - NeedsTranslation - - Style - - Topic - - TopicStub - - length - - specificity -translation_of: Learn/CSS ---- -
{{LearnSidebar}}
- -

Cascading Stylesheets — or {{glossary("CSS")}} — is the first technology you should start learning after {{glossary("HTML")}}. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

- -

Learning pathway

- -

You should learn the basics of HTML before attempting any CSS. We recommend that you work through our Introduction to HTML module first. In that module, you will learn about:

- - - -

Once you understand the fundamentals of HTML, we recommend that you learn HTML and CSS at the same time, moving back and forth between the two topics. This is because HTML is far more interesting and much more fun to learn when you apply CSS, and you can't really learn CSS without knowing HTML.

- -

Before starting this topic, you should also be familiar with using computers and using the web passively (i.e., just looking at it, consuming the content). You should have a basic work environment set up as detailed in Installing basic software and understand how to create and manage files, as detailed in Dealing with files — both of which are parts of our Getting started with the web complete beginner's module.

- -

It is recommended that you work through Getting started with the web before proceeding with this topic. However, doing so isn't absolutely necessary as much of what is covered in the CSS basics article is also covered in our Introduction to CSS module, albeit in a lot more detail.

- -

Modules

- -

This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.

- -
-
Introduction to CSS
-
This module gets you started with the basics of how CSS works, including using selectors and properties; writing CSS rules; applying CSS to HTML; specifying length, color, and other units in CSS; controlling cascade and inheritance; understanding box model basics; and debugging CSS.
-
Styling text
-
Here, we look at text-styling fundamentals, including setting font, boldness, and italics; line and letter spacing; and drop shadows and other text features. We round off the module by looking at applying custom fonts to your page and styling lists and links.
-
Styling boxes
-
Next up, we look at styling boxes, one of the fundamental steps towards laying out a web page. In this module, we recap the box model, then look at controlling box layouts by setting padding, borders and margins, setting custom background colors, images, and fancy features such as drop shadows and filters on boxes.
-
CSS layout
-
At this point, we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now, it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.
-
Responsive design (TBD)
-
With so many different types of devices able to browse the web these days, responsive web design (RWD) has become a core web development skill. This module will cover the basic principles and tools of RWD; explain how to apply different CSS to a document depending on device features like screen width, orientation, and resolution; and explore the technologies available for serving different videos and images depending on such features.
-
- -

Solving common CSS problems

- -

Use CSS to solve common problems provides links to sections of content explaining how to use CSS to solve very common problems when creating a web page.

- -

From the beginning, you'll primarily apply colors to HTML elements and their backgrounds; change the size, shape, and position of elements; and add and define borders on elements. But there's not much you can't do once you have a solid understanding of even the basics of CSS. One of the best things about learning CSS is that once you know the fundamentals, usually you have a pretty good feel for what can and can't be done, even if you don't actually know how to do it yet!

- -

See also

- -
-
CSS on MDN
-
The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.
-
diff --git a/files/bn/learn/css/styling_text/fundamentals/index.html b/files/bn/learn/css/styling_text/fundamentals/index.html deleted file mode 100644 index 0c726c8886..0000000000 --- a/files/bn/learn/css/styling_text/fundamentals/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: টেক্সট স্টাইল -slug: Learn/CSS/Styling_text/Fundamentals -tags: - - Beginer - - CSS - - CSS:Getting_Started - - Guide - - NeedsLiveSample - - Web -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles -original_slug: Web/CSS/Getting_Started/Text_styles ---- -

{{ CSSTutorialTOC() }}

-

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}এটি হচ্ছে CSS Getting Started এর ৭ম টীউটোরিয়াল, এখানে টক্সট স্টাইল এর অনেক উদাহরণ দেয়া আছে। একাহে বর্ণনা করা হয়েছে কিভাবে আপনি আপনার নমুনা stylesheet এ বিভিন্ন ফন্ট ব্যাবহার করবেন।

-

তথ্য: টেক্সট স্টাইল

-

সিএসএস স্টাইলিং লেখার জন্য বিভিন্ন  ধরণ আছে।

-

এখানে {{ cssxref("font") }}আপনি আপনার লেখার বিভিন্ন দিক উল্লেখ করতে পারবেন,—যেমন:

-
    -
  • বোল্ড, ইটালিক, এবং ছোট হাতের অক্ষর ( ছোট হাতের অক্ষর)
    • -
  • আকার
    • -
  • লাইন উচ্চতা
    • -
  • ফন্টের বিভিন্ন ধরণ
    • -
-
- 
উদাহরণ
-p {font: italic 75%/125% "Comic Sans MS", cursive;}
-
-

এই নিয়মে বিভিন্ন ফন্টের ধরণ দেয়া আছে, প্রতিটি অনুচ্ছেদ এর লেখা হবে ইতালিক ফরমে।

-

প্রতিটি অনুচ্ছেদ এর মূল উপাদান আকার  ফন্ট সাইজ তিন চতুর্থাংশ সেট করা হয়েছে, লাইন উচ্চতা ১২৫% সেট করা হয়েছে। (স্বাভাবিক তুলনায় একটু বেশি ব্যবধানযুক্ত)।

-

Comic Sans MS এ,কিছু ফন্ট আকার সেট করা থাকে কিন্তু যদি তা গ্রহণ যোগ্য না হয় তবে ব্রাউজার ডিফল্ট কারসিভ (hand-written) আকার ব্যাবহার করতে পারবে।

-

এই নিয়মে বোল্ড এবং ছোট হাতের অক্ষরের পার্শ্ব প্রতিক্রিয়া আছে:(setting them to normal):

-
-

ফন্টের আকার

-

আপনি ভবিষৎ বানী করতে পারবেনা আপনার ডকুমেন্টি কোন ধরনের পাঠক পাবে। সুতরাং আপনি একটি উল্লেখযোগ্য ফন্টের আকার দিতে পারেন, সব থেকে ভাল হয় যদি আপনি পছন্দ অনুযায়ী একটি ফন্টের তালিকা দেন।

-

একটি ডিফল্ট আকার  দিয়ে লিস্টটি শেষ করুনঃ serif, sans-serif, cursive, fantasy or monospace.

-

ডকুমেন্ট এ যদি কিছু ফন্ট আকার সমর্থন না করে তবে ব্রাউজার এ আপনি ফন্ট আকার প্রতিস্থাপন করতে পারেন। ডকুমেন্ট এ সমর্থন করে না এমন বিশেষ অক্ষর থাকতে পারে। যদি ব্রাউজার ঐই অক্ষরের কোন ফন্ট আকার খুজে পায় তবে আপনি সেটি ব্যাবহার করতে পারেন।

-

তার নিজস্ব ফন্ট আকার উল্লেখ করার {{ cssxref("font-family") }}এটি ব্যাবহার করুণ।

-

ফন্টের মাপ

-

ব্রাউজার ব্যাবহারকারি পৃষ্ঠাটি পড়ার সময় ডিফল্ট ফন্টরে মার অথবা লেখার আকার পরিবর্তন করতে পারেন,তাই সবথেকে ভাল যদি আপনি একটি আপেক্ষিক মাপ ব্যাবহার করতে পারেন।

-

আপনি ফন্টের ভাল মাপের জন্য কিছু বিল্ট ইন মান ব্যবহার করতে পারেন,যেম্ন-বড়,ছোট এবং মাঝারি। আপনি চাইলে ওই মান গুলো ব্যবহার করতে পারেন যেগুলো মূল উপাদানের ফন্টের আকারের সাথে সম্পর্কিত, যেমন ছোট বড় , ১৫০% অথবা ১.৫ em।একটি "em" হচ্ছে "m" অক্ষরের সমান প্রস্থের(মূল উপাদানের ফন্টের আকারের জন্য); এইভাবে ১.৫em হচ্ছে মূল উপাদানের এক এবং অর্ধ আকার।

-

প্রয়োজনে আপনি একটি নিদ্রিষ্ট আকার , যেমন: 14px (14 pixels) ডিসপ্লে ডিভাইস  এর জন্য অথবা 14pt (14 points) প্রিন্টারের জন্য নির্ধারণ করতে পারেন। এটা তাদের পরিবর্তন করার অনুমতি দেয় না, কারণ এইটা impaired ব্যাবহারকারিদের জন্য অ্যাক্সেসযোগ্য হয় না। আরো  ভাল কৌশল ডকুমেন্টের উপরের স্তরের এবং মাঝারিতে একটি বিল্ট-ইন মান সেট করা হয়,এবং তারপর তার সমস্ত descendent উপাদানের জন্য আপেক্ষিক মাপ সেট করা হয়।

-

তার নিজস্ব একটি ফন্ট সাইজ উল্লেখ করার জন্য {{ cssxref("font-size") }}ব্যাবহার করুন।

-

লাইনের উচ্চতা

-

লাইনের উচ্চতা ২টা লাইনের মধ্যকার স্পেস উল্লেখ করে। আপনার ডকুমেন্টে দীর্ঘ লাইনের অনুচ্ছেদ থাক্লে,বিশেষ করে ফন্টের রাকার যদি ছোট হয় তবে পড়ার সুবিধারতে স্বাভাবিকের থেকে একটু বড় স্পেস দিন।

-

তার নিজস্ব একটি লাইন উচ্চতা উল্লেখ করার জন্য{{ cssxref("line-height") }} ব্যাবহার করুণ।

-

সজ্জা

-

{{ cssxref("text-decoration") }} ব্যাবহার করে আপনি আন্দার-লাইন অথবা অনন্য ডেকোরেশন করতে পারেন। আপনি স্পষ্টভাবে ডেকোরেশন অপসরণ করতেও এটি ব্যাবহার করতে পারেন।

-

অন্যান্য বৈশিষ্ট্য

-

Italic জন্য ব্যাবহার করুন {{ cssxref("font-style") }}: italic;
- Bold জন্য ব্যাবহার করুন {{ cssxref("font-weight") }}: bold;
- Small capitals জন্য ব্যাবহার করুন {{ cssxref("font-variant") }}: small-caps;

-

পৃথকভাবে এই গুলো বন্ধ করার জন্য, আপনি স্বাভাবিক মান সুনির্দিষ্টভাবে উল্লেখ করুন।

-
-
- আরো বিস্তারিত
-

আপনি অন্য কোন উপায়েও বিভিন্ন টেক্সট স্টাইল নির্দিষ্ট করতে পারেন।

-

উদাহরণস্বরূপ, এখানে উল্লিখিত অন্য কিছু মান আছে যা আপনি ব্যবহার করতে পারেন।

-

একটি জটিল স্টাইলশীট,shorthand font property এড়িয়ে চলে কারণ তার কিছু পার্শ্ব প্রতিক্রিয়া আছে (resetting other individual properties)।

-

আরো তথ্যের জন্য Fonts in the CSS Specification দেখতে পারেন। টেক্সট ডেকোরেশন এর আরো তথ্যের জন্য দেখুন Text।

-

আপনি ব্যবহারকারীদের সিস্টেমে ইনস্টল আকারেরউপর নির্ভর করতে না ছাইলে, আপনি ব্যবহার করতে পারেন{{ cssxref("@font-face") }}এটি একটি অনলাইন ফন্ট উল্লেখ করে। যদিও এই নিয়ম সমর্থন করে ব্যাবহারকারিদের এমন একটি ব্রাউজার থাকা প্রয়োজন।

-
-

কর্ম: উল্লেখ ফন্ট

-

একটি সহজ ডকুমেন্ট এর জন্য {{ HTMLElement("body") }} তে আপনি ফন্ট এবং ডকুমেন্ট এর বাকি সেটিংস সেট করতে পারেন।

-
    -
  1. আপনার সিএসএস ফাইল সম্পাদনা করুন.
    2. -
  2. ডকুমেন্ট জুড়ে ফন্ট পরিবর্তন করতে নিম্নলিখিত নিয়ম যোগ করুন. সিএসএস ফাইল উপরে এটি একটি লজিক্যাল জায়গা, কিন্তু আপনি যখন এখানে রাখবেন সেখানেও তার একই প্রভাব পরবে: - 
    body {font: 16px "Comic Sans MS", cursive;}
-
    -
    3. -
  3. একটি মন্তব্য যোগ করুন যেটি নিয়ম ব্যাখ্যা করে এবং একটি স্পেস দিন যাতে করে আপনার পছন্দের বিন্যাসের সাথে এটি মিলে যায়।
    4. -
  4. ফাইল সংরক্ষণ করুন এবং ফলাফল দেখতে আপনার ব্রাউজার রিফ্রেশ করুন। যদি আপনার  Comic Sans MS এ থাকা আকার অথবা হাতে লেখা  itlic আকার সমর্থন না করে ,তবে আপনার ব্রাউজার অন্নক্স কোন আকার পছন্দ করতে পারেঃ
    - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    5. -
  5. ব্রাউজার মেনুবার, View > Text Size > Increase (or View > Zoom > Zoom In) পছন্দ করতে পারে। আপনি স্টাইল টি 16 পিক্সেল উল্লেখ যদিও, ডকুমেন্ট পড়া একটি ব্যবহারকারী মাপ পরিবর্তন করতে পারেন।
    6. -
-
- Challenge -

Without changing anything else, make all six initial letters twice the size in the browser's default serif font:

- - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
-
-
- Possible solution
-

Add the following style declaration to the strong rule:

- 
  font: 200% serif;
-
- If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden. -

 

- Hide solution
- See a solution for the challenge.
-

পরবর্তী ?

-

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color")}}আপনার নমুনা ডকুমেন্ট ইতিমধ্যে বিভিন্ন নামে রং ব্যবহার করতে সক্ষম. The next section দেয়া আছে রং এর তালিকা এবং কিভাবে আপনি রং প্রয়োগ করবেন।

diff --git a/files/bn/learn/forms/index.html b/files/bn/learn/forms/index.html deleted file mode 100644 index 8d3c7edcf9..0000000000 --- a/files/bn/learn/forms/index.html +++ /dev/null @@ -1,343 +0,0 @@ ---- -title: HTML forms guide -slug: Learn/Forms -tags: - - NeedsReview -translation_of: Learn/Forms -original_slug: Web/Guide/HTML/Forms ---- -

এই সহায়িকা হচ্ছে একটি সামগ্রিক নির্দেশিকা যা আপনাকে মাষ্টার HTML form তৈরি করতে সাহায্য করবে । HTML from ব্যবহারকারীদের সাথে আলাপচারিতার জন্য খুব শক্তিশালী হাতিয়ার হয় না । এই সহায়িকার মধ্যে, HTML from হতে  আমরা কাস্টম উইজেট করার পরিচালনার তথ্য থেকে কাঠামো থেকে স্টাইলিং করার। তুমি এই শক্তিশালি অফার  শিখতে এবং উপভোগে পারবে।

-

বর্ন মালা

-
    -
  1. আমার প্রথম   HTML form
    2. -
  2. HTML form কি ভাবে গঠন  করতে হয় 
    3. -
  3. নেটিভ    form  উইজেট
    4. -
  4. CSS সাথে HTML forms -
      -
    1. HTML forms এর উন্নতি
      2. -
    2.  HTML forms উন্নতির ধরন
      3. -
    3.  উইজেট এর টেবিল হতে Property শামাযশ্যতা
      4. -
    -
    5. -
  5. তথ্য হতে  পাঠাতে এবং চেষ্টা করতে
    6. -
  6.  তথ্য হতে বৈধতা
    7. -
  7.  উইজেট হতে কিভাবে coustom তৈরি করতে হয়
    8. -
  8.  JavaScript কি ভাবে নিক্ষেপ করতে হয় -
      -
    1. ডাটা অবজেকট কিভাবে ব্যাবহার  করতে হয়
      2. -
    -
    9. -
  9. HTML  হতে ব্রাউজারে
    10. -
-

HTML Documentation

-

HTML Elements

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementRelated DOM interfaceDescription
{{HTMLElement("button")}}{{domxref("HTMLButtonElement")}}The button element represents a clickable button.
{{HTMLElement("datalist")}}{{domxref("HTMLDataListElement")}}The datalist element contains a set of {{ HTMLElement("option") }} elements that represent the possible options for the value of other forms elements.
{{HTMLElement("fieldset")}}{{domxref("HTMLFieldSetElement")}}The fieldset is used to group several form elements within a form.
{{HTMLElement("form")}}{{domxref("HTMLFormElement")}}The form element represents a section of document that contains interactive element that enable a user to submit information to a web server.
{{HTMLElement("input")}}{{domxref("HTMLInputElement")}}The  input element is used to create interactive controls for forms.
{{HTMLElement("keygen")}}{{domxref("HTMLKeygenElement")}}The keygen element exists to facilitate generation of key material, and submission of the public key as part of an HTML form
{{HTMLElement("label")}}{{domxref("HTMLLabelElement")}}The label element represents a caption for an item in a user interface
{{HTMLElement("legend")}}{{domxref("HTMLLegendElement")}}The legend element represents a caption for the content of its parent {{ HTMLElement("fieldset") }}.
{{HTMLElement("meter")}}{{domxref("HTMLMeterElement")}}The meter element  represents either a scalar value within a known range or a fractional value.
{{HTMLElement("optgroup")}}{{domxref("HTMLOptGroupElement")}}the optgroup element creates a group of options within a {{ HTMLElement("select") }} element.
{{HTMLElement("option")}}{{domxref("HTMLOptionElement")}}the HTML option element is used to create a control representing an item within a {{ HTMLElement("select") }}, an {{ HTMLElement("optgroup") }} or a {{ HTMLElement("datalist") }} element.
{{HTMLElement("output")}}{{domxref("HTMLOutputElement")}}The output element represents the result of a calculation.
{{HTMLElement("progress")}}{{domxref("HTMLProgressElement")}}The progress element is used to view the completion progress of a task.
{{HTMLElement("select")}}{{domxref("HTMLSelectElement")}}The select element represents a control that presents a menu of options.
{{HTMLElement("textarea")}}{{domxref("HTMLTextAreaElement")}}The textarea element represents a multi-line plain-text editing control.
-
-

Note: All form elements, as all HTML elements, support the {{domxref("HTMLElement")}} DOM interface.

-
-

HTML Attributes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attribute NameElementsDescription
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}List of types the server accepts, typically a file type.
accept-charset{{ HTMLElement("form") }}List of supported charsets.
action{{ HTMLElement("form") }}The URI of a program that processes the information submitted via the form.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indicates whether controls in this form can by default have their values automatically completed by the browser.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}The element should be automatically focused after the page loaded.
challenge{{ HTMLElement("keygen") }}A challenge string that is submitted along with the public key.
checked{{ HTMLElement("input") }}Indicates whether the element should be checked on page load.
cols{{ HTMLElement("textarea") }}Defines the number of columns in a textarea.
data{{ HTMLElement("object") }}Specifies the URL of the resource.
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether the user can interact with the element.
enctype{{ HTMLElement("form") }}Defines the content type of the form date when the method is POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Describes elements which belongs to this one.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates the form that is the owner of the element.
high{{ HTMLElement("meter") }}Indicates the lower bound of the upper range.
keytype{{ HTMLElement("keygen") }}Specifies the type of key generated.
list{{ HTMLElement("input") }}Identifies a list of pre-defined options to suggest to the user.
low{{ HTMLElement("meter") }}Indicates the upper bound of the lower range.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indicates the maximum value allowed.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Defines the maximum number of characters allowed in the element.
method{{ HTMLElement("form") }}Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indicates the minimum value allowed.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indicates whether multiple values can be entered in an input of the type email or file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Name of the element. For example used by the server to identify the fields in form submits.
novalidate{{ HTMLElement("form") }}This attribute indicates that the form shouldn't be validated when submitted.
optimum{{ HTMLElement("meter") }}Indicates the optimal numeric value.
pattern{{ HTMLElement("input") }}Defines a regular expression which the element's value will be validated against.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Provides a hint to the user of what can be entered in the field.
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indicates whether the element can be edited.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether this element is required to fill out or not.
rows{{ HTMLElement("textarea") }}Defines the number of rows in a textarea.
selected{{ HTMLElement("option") }}Defines a value which will be selected on page load.
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
src{{ HTMLElement("input") }}The URL of the embeddable content.
step{{ HTMLElement("input") }} 
target{{ HTMLElement("form") }} 
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}Defines the type of the element.
usemap{{ HTMLElement("input") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Defines a default value which will be displayed in the element on page load.
wrap{{ HTMLElement("textarea") }}Indicates whether the text should be wrapped.
-

Normative reference

- diff --git a/files/bn/learn/html/index.html b/files/bn/learn/html/index.html deleted file mode 100644 index bcfa885427..0000000000 --- a/files/bn/learn/html/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: HTML -slug: Learn/HTML -translation_of: Learn/HTML ---- -
{{LearnSidebar}}
- -

To build websites, you should know about {{Glossary('HTML')}} — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.

- -

Learning pathway

- -

Ideally you should start your learning journey by learning HTML. Start by reading Introduction to HTML. You may then move on to learning about more advanced topics such as:

- -
    -
  • HTML5 APIs
    • -
  • CSS, and how to use it to style HTML (for example alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects.)
    • -
  • JavaScript, and how to use it to add dynamic functionality to web pages (for example find your location and plot it on a map, make UI elements appear/disappear when you toggle a button, save users' data locally on their computers, and much much more.)
    • -
- -

Before starting this topic, you should have at least basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content). You should have a basic work environment set up as detailed in Installing basic software, and understand how to create and manage files, as detailed in Dealing with files — both are parts of our Getting started with the web complete beginner's module.

- -

It is recommended that you work through Getting started with the web before attempting this topic, however it isn't absolutely necessary; much of what is covered in the HTML basics article is also covered in our Introduction to HTML module, albeit in a lot more detail.

- -

Modules

- -

This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.

- -
-
Introduction to HTML
-
This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage.
-
Multimedia and embedding
-
This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.
-
HTML Tables
-
Representing tabular data on a webpage in an understandable, {{glossary("Accessibility", "accessible")}} way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.
-
HTML Forms
-
Forms are a very important part of the Web — these provide much of the functionality you need for interacting with web sites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side parts of forms.
-
- -

Solving common HTML problems

- -

Use HTML to solve common problems provides links to sections of content explaining how to use HTML to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.

- -

See also

- -
-
-
HTML (HyperText Markup Language) on MDN.
-
The main entry point for HTML documentation on MDN, including detailed element and attribute references — if you want to know what attributes an element has or what values an attribute has, for example, this is a great place to start.
-
-
diff --git a/files/bn/learn/html/introduction_to_html/index.html b/files/bn/learn/html/introduction_to_html/index.html deleted file mode 100644 index 42fc47f662..0000000000 --- a/files/bn/learn/html/introduction_to_html/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Introduction to HTML -slug: Learn/HTML/Introduction_to_HTML -tags: - - CodingScripting - - HTML - - Introduction to HTML - - Landing - - Links - - NeedsTranslation - - Structure - - Text - - TopicStub - - head - - semantics -translation_of: Learn/HTML/Introduction_to_HTML ---- -
{{LearnSidebar}}
- -

At its heart, {{glossary("HTML")}} is a fairly simple language made up of {{Glossary("Element","elements")}}, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page. This module will introduce the first two of these and introduce fundamental concepts and syntax you need to know to understand HTML.

- -

Prerequisites

- -

Before starting this module, you don't need any previous HTML knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content). You should have a basic work environment set up (as detailed in Installing basic software), and understand how to create and manage files (as detailed in Dealing with files). Both are parts of our Getting started with the web complete beginner's module.

- -
-

Note: If you are working on a computer/tablet/other devices that doesn't let you create your own files, you can try out (most of) the code examples in an online coding program such as JSBin or Glitch.

-
- -

Guides

- -

This module contains the following articles, which will take you through all the basic theory of HTML and provide ample opportunity for you to test out some skills.

- -
-
Getting started with HTML
-
Covers the absolute basics of HTML, to get you started — we define elements, attributes, and other important terms, and show where they fit in the language. We also show how a typical HTML page is structured and how an HTML element is structured, and explain other important basic language features. Along the way, we'll play with some HTML to get you interested!
-
What’s in the head? Metadata in HTML
-
The {{Glossary("Head","head")}} of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page {{htmlelement("title")}}, links to {{glossary("CSS")}} (if you want to style your HTML content with CSS), links to custom favicons, and metadata (data about the HTML, such as who wrote it, and important keywords that describe the document).
-
HTML text fundamentals
-
One of HTML's main jobs is to give text meaning (also known as {{Glossary("Semantics","semantics")}}), so that the browser knows how to display it correctly. This article looks at how to use HTML to break up a block of text into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more.
-
Creating hyperlinks
-
Hyperlinks are really important — they are what makes the web a web. This article shows the syntax required to make a link and discusses best practices for links.
-
Advanced text formatting
-
There are many other elements in HTML for formatting text that we didn't get to in the HTML text fundamentals article. The elements here are less well-known, but still useful to know about. In this article, you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.
-
Document and website structure
-
As well as defining individual parts of your page (such as "a paragraph" or "an image"), HTML is also used to define areas of your website (such as "the header," "the navigation menu," or "the main content column.") This article looks into how to plan a basic website structure and how to write the HTML to represent this structure.
-
Debugging HTML
-
Writing HTML is fine, but what if something goes wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help.
-
- -

Assessments

- -

The following assessments will test your understanding of the HTML basics covered in the guides above.

- -
-
Marking up a letter
-
We all learn to write a letter sooner or later; it is also a useful example to test out text formatting skills. In this assessment, you'll be given a letter to mark up.
-
Structuring a page of content
-
This assessment tests your ability to use HTML to structure a simple page of content, containing a header, a footer, a navigation menu, main content, and a sidebar.
-
- -

See also

- -
-
Web literacy basics 1
-
An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the Introduction to HTML module. Learners get familiar with reading, writing, and participating on the web in this six-part module. Discover the foundations of the web through production and collaboration.
-
- -
-

Feedback

- -

Help us improve our guides and tutorials like this one by taking our survey here.

-
diff --git a/files/bn/learn/index.html b/files/bn/learn/index.html deleted file mode 100644 index d97b02594f..0000000000 --- a/files/bn/learn/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Web কে শিখুনwww -slug: Learn -tags: - - Beginner - - Index - - Landing - - Learn - - NeedsTranslation - - TopicStub - - Web -translation_of: Learn ---- -
-

আপনি কি আপনার নিজের ওয়েবসাইট বা ওয়েব এ্যাপ বানাতে চান ? আপনি একেবারে সঠিক জায়গায়তেই এসেছেন।

-
- -

ওয়েব ডিজাইন এবং ডেভলোপমেন্ট শিখতে বেশ কিছু জানতে হয়, তবে এটি তেমন চিন্তার বিষয় নয়। এখানে আমরা আপনার সহযোগীতায় আছি , যেখানে আপনি শুধু কিছু কোড বেছে নিবেন আর দেখবেন ধীরে ধীরে আপনি একজন দক্ষ্য পেশাদারী ডেভলোপার এর পরিনত হয়ে যাবেন ।

- -

কোথায় থেকে শুরু করতে চান?

- -

আপনি যেখানেই যেতে চান আমরা আপনার সাথে সেখানেই নিয়ে যাব । কোন বিবরনটি আপনার কাছে বেশি সুবিধা জনক ?

- -
    -
  • আমি একজন অনভিজ্ঞ - -

    স্বাগতম!!  আমাদের এই সিরিজটি "যেভাবে ওয়েব শেখা শুরু করবেন " এটা দিয়ে শুরু করতে পারেন । এটা আপনাকে ওয়েব ডেভলোপমেন্ট এর সাধারন বিষয় বস্তু এর ধারণা প্রদান করবে যা আমি কাজে লাগাতে পারবে ।

    -
    • -
  • আমি ওয়েব সম্বন্ধে জানি -

     খুবই আনন্দের!! সেই ক্ষেত্রে আমরা আপনাকে ওয়েব এর একন্তু মূল বিষয়গুলোর গভির জ্ঞান লাভের জন্য পরামর্শ প্রদান করব । HTML, CSS, এবং JavaScript

    -
    • -
  • আমি ওয়েব এর ব্যাপারে বিশেষজ্ঞ -

    Amazing! In that case, you may be interested in exploring our advanced Guides and Tutorials. You should also consider contributing to the Learning Area. ;)

    -
    • -
- -
-

Note: In the future we're planning to publish more learning pathways, for example for experienced coders learning specific advanced techniques, native developers who are new to the Web, or people who want to learn design techniques.

-
- -

{{LearnBox({"title":"Quick learning: Vocabulary"})}}

- -

অন্যান্য জনের সাথে শিখুন

- -

 যদি আপনার কিছু জানার থাকে or are still wondering where to go, Mozilla is a global community of Web enthusiasts, including mentors and teachers who are glad to help you. Get in touch with them through WebMaker:

- - - -

Sharing knowledge

- -

This whole Learning Area is built by our contributors. We need you in our team whether you are a beginner, a teacher, or a skilled web developer. If you're interested, take a look at how you can help, and we encourage you to chat with us on our mailing lists or IRC channel. :)

- -
-
EXLskills 
-
মেন্টরশিপ এবং প্রকল্প ভিত্তিক শেখার সঙ্গে, প্রযুক্তি দক্ষতা দক্ষতা জন্য বিনামূল্যে এবং খোলা কোর্স
-
- - - -
    -
  1. Getting started with the web
    2. -
  2. Learn the web -
      -
    1. Web Literacy Map
      2. -
    2. Web mechanics
      3. -
    3. Infrastructure
      4. -
    4. Coding & Scripting
      5. -
    5. Design & Accessibility
      6. -
    6. Writing & planning
      7. -
    -
    3. -
  3. Learn technologies -
      -
    1. HTML
      2. -
    2. CSS
      3. -
    3. JavaScript
      4. -
    4. Python
      5. -
    -
    4. -
  4. Learning tutorials -
      -
    1. How to build a web site?
      2. -
    2. Information security basics
      3. -
    -
    5. -
  5. Learning resources
    6. -
  6. Getting help -
      -
    1. FAQ
      2. -
    2. Glossary
      3. -
    3. Ask your questions
      4. -
    4. Meet teachers and mentors
      5. -
    -
    7. -
  7. How to contribute
    8. -
diff --git a/files/bn/learn/javascript/first_steps/index.html b/files/bn/learn/javascript/first_steps/index.html deleted file mode 100644 index ad6df0a101..0000000000 --- a/files/bn/learn/javascript/first_steps/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: জাভাস্ক্রিপ্ট প্রথম ধাপ -slug: Learn/JavaScript/First_steps -tags: - - Arrays - - Article - - Assessment - - Beginner - - CodingScripting - - Guide - - JavaScript - - Landing - - Module - - NeedsTranslation - - Numbers - - Operators - - TopicStub - - Variables - - 'l10n:priority' - - maths - - strings -translation_of: Learn/JavaScript/First_steps ---- -
{{LearnSidebar}}
- -

আমাদের প্রথম জাভাস্ক্রিপ্ট মডিউলে আমরা কিছু ভৌত প্রশ্নের উত্তর দিব, যেমন "জাভাস্ক্রিপ্ট কি?" , "এটা  কেমন দেখতে?" , "এটা কি করতে পারে?" । আপনাকে আপনার প্রথম জাভাস্ক্রিপ্ট লেখার বাস্তব অভিজ্ঞতার মধ্য দিয়ে নিয়ে যাওয়ার আগে আমরা এগুলো শিখবো। তারপর আমরা কিছু  কি বিল্ডিং ব্লক নিয়ে বিশদে আলোচনা করবো, যেমন ভ্যারিয়েবল, স্ট্রিং, নাম্বার এবং array ।

- -

পূর্বশর্ত 

- -

এই মডিউল শুরু করার পূর্বে আপনার জাভাস্ক্রিপ্ট এর উপর কোনো পূর্ব অভিজ্ঞতা থাকা আবশ্যক নয়, কিন্তু আপনার HTML ও CSS এর সাথে পরিচিতি থাকতে হবে। আপনাকে জাভাস্ক্রিপ্ট শুরু করার পূর্বে নিম্নের মডিউলগুলোর মধ্য দিয়ে কাজ শুরু করার পরামর্শ দেওয়া হচ্ছে। 

- - - -
-

বিঃদ্রঃ : আপনি যদি এমন একটি কম্পিউটার/ট্যাবলেট কিংবা অন্যান্য ডিভাইসে কাজ করেন যেখানে আপনার নিজের কোনো ফাইল তৈরী করা সম্ভব নয়, সেক্ষেত্রে আপনার তৈরী করা কোডগুলো নিয়ে গবেষণা করতে পারেন অনলাইন কোডিং প্রোগ্রামগুলোতে যেমন JSBin অথবা Thimble। 

-
- -

গাইড

- -
-
জাভাস্ক্রিপ্ট কি?
-
নবীন শিক্ষার্থীদের জন্য আয়োজিত MDN এর জাভাস্ক্রিপ্ট কোর্সে আপনাকে স্বাগতম। এই প্রথম আর্টিকেলে আমরা জাভাস্ক্রিপ্টকে উঁচু স্তর থেকে দেখবো। আমরা উত্তর দেব "এটা কি?" , এবং "এটা কি করছে?" এবং নিশ্চিত করবো যে আপনি জাভাস্ক্রিপ্ট এর উদ্দেশ্য নিয়ে সাচ্ছন্দবোধ করছেন। 
-
জাভাস্ক্রিপ্ট এর প্রথম ঝলক
-
এখন আপনি জাভাস্ক্রিপ্ট সম্পর্কে কিছু তত্ত্ব শিখেছেন এবং আপনি জানেন আপনি এটা দিয়ে কি করতে পারবেন। আমরা আপনাকে একটি সংক্ষিপ্ত কোর্সে সম্পূর্ণ প্রাকটিকাল টিউটোরিয়াল এর মাধ্যমে জাভাস্ক্রিপ্টের ভৌত বৈশিষ্টগুলো শেখাবো। এখানে ধাপে ধাপে আপনি "Guess the number" নামের একটি সাধারণ গেম তৈরী করবেন।  
-
কি সমস্যা হলো? জাভাস্ক্রিপ্ট মেরামত
-
পূর্বের আর্টিকেলে যখন আপনি "Guess the number" গেমটি তৈরী করেছিলেন তখন নিশ্চয়ই খেয়াল করেছিলেন যে এটা কাজ করছিলো না। ভয় পাওয়ার দরকার নেই - এই আর্টিকেল সেই উদ্দেশ্য নিয়ে লেখা হয়েছে কিছু সাধারণ টিপস সহকারে যাতে আপনি সহজে জাভাস্ক্রিপ্ট প্রোগ্রামের সমস্যা নির্ণয় করতে পারেন ও তার সমাধান করতে পারেন। 
-
আপনার দরকারি তথ্য Storing (সংরক্ষণ) করা — Variables (চলক)
-
পূর্বের গুটিকতক আর্টিকেল পড়ার পরে আপনার এখন জানা উচিত জাভাস্ক্রিপ্ট কি, এটা আপনার জন্য কি করতে পারে, অন্যান্য ওয়েব টেকনোলজির পাশাপাশি আপনি এটাকে কিভাবে ব্যবহার করতে পারেন, এবং এটার মূল বৈশিষ্ট উঁচু স্তর থেকে দেখতে কেমন লাগে। এই আর্টিকেলে আমরা একেবারে মৌলিক বিষয় দেখবো যেটা হলো জাভাস্ক্রিপ্টের প্রথম মৌলিক বিল্ডিং ব্লক - Variables (চলক)। 
-
জাভাস্ক্রিপ্ট এর মৌলিক গণিত — numbers and operators
-
এই মুহূর্তে আমরা আলোচনা করবো জাভাস্ক্রিপ্টের গণিত নিয়ে - আমরা কিভাবে অপারেটর একত্র করতে পারি কিভাবে নাম্বারকে আমাদের আদেশ পালন করার জন্য পরিচালনা করতে পারি। 
-
টেক্সট সামলানো — strings in JavaScript
-
পরবর্তীতে আমরা আমাদের মনোযোগ ঘোরাবো স্ট্রিং এর দিকে - টেক্সট এর টুকরাকে প্রোগ্রামিংয়ের ভাষায় এটাই বলা হয়ে থাকে। এই আর্টিকেলে আমরা সেই সবকিছু দেখবো যেটা জাভাস্ক্রিপ্ট শেখার সময় স্ট্রিং সম্পর্কে আপনার জানা থাকার দরকার, যেমন স্ট্রিং তৈরী, স্ট্রিং থেকে কোটেশন এর মুক্তি এবং তাদেরকে একত্র করা। 
-
সুবিধাজনক স্ট্রিং মেথড
-
এখন আমরা দেখলাম স্ট্রিং এর একেবারে মৌলিক বিষয়গুলো, এখন একটু গতি বাড়িয়ে চিন্তা করে দেখা যাক বিল্ট-ইন মেথড ব্যবহার করে স্ট্রিং এর উপর কি ধরণের লাভজনক অপারেশন করা যেতে পারে, যেমন একটি স্ট্রিং এর দৈর্ঘ্য পরিমাপ করা, স্ট্রিং একত্র ও পৃথক করা, স্ট্রিং এর একটি অক্ষর অন্যটির জন্য বাদ দেওয়া, এবং আরো অনেক কিছু।  
-
Arrays
-
এই মডিউলের সর্বশেষ আর্টিকেলে আমরা দেখবো Array - একটিমাত্র চলকের মধ্যে একটি ডাটার তালিকা সংরক্ষণ করার সহজ উপায়। এখানে আমরা দেখবো কেন এটি সুবিধাজনক, তারপর দেখবো কিভাবে একটি Array তৈরী করতে হয়, Array পুনরুদ্ধার, সংযোজন এবং Array এর তালিকা থেকে আইটেম বিয়োজন, এবং এর পাশাপাশি আরো অনেক কিছু। 
-
- -

মূল্যায়ন

- -

নিচের কাজটি থেকে মূল্যায়ন করা হবে আপনি উপরের জাভাস্ক্রিপ্ট কোর্সের গাইড অনুসরণ করে কি শিখেছেন। 

- -
-
মজাদার গল্প উৎপাদক
-
এই মূল্যায়নে আপনাকে একটি কাজ দেওয়া হবে, মডিউলগুলো থেকে কিছু শিখে আপনাকে একটি মজাদার App বানাতে হবে যেটা মজাদার গল্প তৈরী করে। শুভেচ্ছা রইলো !
-
diff --git a/files/bn/learn/javascript/first_steps/what_is_javascript/index.html b/files/bn/learn/javascript/first_steps/what_is_javascript/index.html deleted file mode 100644 index 2d2f0528e1..0000000000 --- a/files/bn/learn/javascript/first_steps/what_is_javascript/index.html +++ /dev/null @@ -1,422 +0,0 @@ ---- -title: জাভাস্ক্রিপ্ট কী? -slug: Learn/JavaScript/First_steps/What_is_JavaScript -translation_of: Learn/JavaScript/First_steps/What_is_JavaScript -original_slug: Learn/JavaScript/First_steps/জাভাস্ক্রিপ্ট-কী ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
- -

মোজিলা ডেভেলপার নেটওয়ার্ক এর প্রাথমিক জাভাস্ক্রিপ্ট এর কোর্সে স্বাগতাম! এই লেখায় আমরা জাভাস্ক্রিপ্টকে গভীরভাবে জানব, কিছু প্রশ্ন নিয়ে আলোচনা করব যেমন "জাভাস্ক্রিপ্ট কী" এবং "জাভাস্ক্রিপ্ট দিয়ে কী করা যায়?", সেই সাথে সহজভাবে কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করতে সেটাও শিখব।

- - - - - - - - - - - - -
আগে থেকে যা জানতে হবেকম্পিউটার 
উদ্দেশ্য:জাভাস্ক্রিপ্ট এর সাথে পরিচিতি,
- -

জাভস্ক্রিপ্ট এর পূর্ণাঙ্গ সংজ্ঞা

- -

জাভাস্ক্রিপ্ট মূলত একটি scripting ভাষা বা programming ভাষা। জাভাস্ক্রিপ্ট ব্যবহার করে ওয়েবসাইটে জটিল বৈশিষ্ট্য যুক্ত করা যায় যেমন নির্দিষ্ট সময় অনু্যায়ী কনটেন্ট পরিবর্তন করা, মানচিত্র যোগ করা ওয়েবসাইটে  2D/3D animation যুক্ত করা ইত্যাদি। নিচের ওয়েব প্রযুক্তি রূপক যে কেক আছে সেটার তৃতীয় স্তর হচ্ছে জাভাস্ক্রিপ্ট। 

- -

- -
    -
  • {{glossary("HTML")}} হচ্ছে মার্ক আপ ভাষা। এই ভাষা ব্যবহার করে ওয়েব সাইট তৈরী করা হয় এবং ওয়েবসাইটের কনটেন্ট এ অর্থবহ করা হয়। যেমন পেইজে প্যারগ্রাফ, শিরোনাম, ডাটা টেবি অথবা ছবি বা ভিডিও যুক্ত করা ইত্যাদি। 
    • -
  • {{glossary("CSS")}} দিয়ে HTML এর কনটেন্ট এর সাথে স্টাইল যুক্ত করা হয় যাতে ওয়েবসাইট টা দৃষ্টিনন্দন হয়। যেমন ব্যাকগ্রাউন্ড এ রঙ যুক্ত করা, ফন্ট নিয়ে কাজ করা, ওয়েবসাইটের কলামকে বিভিন্ন কলামে ঠিক করা ইত্যাদি।
    • -
  • {{glossary("JavaScript")}} একটি scripting ভাষা। Scripting ভাষা হচ্ছে একটি প্রোগ্রামিং ভাষা যেটি interpreter ব্যবহার করে কোড রান করে। জাভাস্ক্রিপ্ট ব্যবহার করে সক্রিয়ভাবে কনটেন্ট পরিবর্তন, মাল্টিমিডিয়ার নিয়ন্ত্রণ, ছবির এনিমেশন, এবং আরও অনেক কাজ করা যায়। 
    • -
- -

তিনটা পর্যায় একটি আরেকটির উপর সুন্দরভাবে তৈরি। উদাহরণস্বরূপ নিচের টেক্সটটিকে দেখা যাক। HTML ব্যবহার করে আমরা লেখাটিকে মার্ক আপ করবঃ  

- -
<p>Player 1: Chris</p>
- -

- -

তারপর লেখাটিকে সুন্দর করার জন্য আমরা কিছু CSS যোগ করবঃ

- -
p {
-  font-family: 'helvetica neue', helvetica, sans-serif;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  text-align: center;
-  border: 2px solid rgba(0,0,200,0.6);
-  background: rgba(0,0,200,0.3);
-  color: rgba(0,0,200,0.6);
-  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
-  border-radius: 10px;
-  padding: 3px 10px;
-  display: inline-block;
-  cursor: pointer;
-}
- -

- -

এবং সবশেষে আমরা জাভাস্ক্রিপ্ট ব্যবহার করে কনটেন্ট যুক্ত করবঃ 

- -
const para = document.querySelector('p');
-
-para.addEventListener('click', updateName);
-
-function updateName() {
-  let name = prompt('Enter a new name');
-  para.textContent = 'Player 1: ' + name;
-}
-
- -

{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}

- -

কী ঘটছে তা দেখার জন্য লেখাটির সর্বশেষ সংস্করনে ক্লিক করে দেখুন (উল্লেখ্য আপনি এই ডেমোটা GitHub এও পাবেন — সোর্স কোড দেখুন, অথবা  সরাসরি চালিয়ে দেখুন )!

- -

জাভাস্ক্রিপ্ট আরো অনেক কিছু করতে পারে - বিস্তারিত জেনে নেওয়া যাক। 

- -

জাভাস্ক্রিপ্ট প্রকৃতভাবে কী কী করতে পারে? 

- -

মূল client-side জাভাস্ক্রিপ্ট সাধারণ কিছু প্রোগ্রামিং বৈশিষ্ট্য নিয়ে তৈরি যা দিয়ে আপনি নিচের 

- -
    -
  • Store useful values inside variables. In the above example for instance, we ask for a new name to be entered then store that name in a variable called name.
    • -
  • Operations on pieces of text (known as "strings" in programming). In the above example we take the string "Player 1: " and join it to the name variable to create the complete text label, e.g. ''Player 1: Chris".
    • -
  • Running code in response to certain events occurring on a web page. We used a {{Event("click")}} event in our example above to detect when the button is clicked and then run the code that updates the text label.
    • -
  • And much more!
    • -
- -

What is even more exciting however is the functionality built on top of the client-side JavaScript language. So-called Application Programming Interfaces (APIs) provide you with extra superpowers to use in your JavaScript code.

- -

APIs are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. They do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and then put them together to make a bookshelf.

- -

They generally fall into two categories.

- -

- -

Browser APIs are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. For example:

- -
    -
  • The {{domxref("Document_Object_Model","DOM (Document Object Model) API")}} allows you to manipulate HTML and CSS, creating, removing and changing HTML, dynamically applying new styles to your page, etc. Every time you see a popup window appear on a page, or some new content displayed (as we saw above in our simple demo) for example, that's the DOM in action.
    • -
  • The {{domxref("Geolocation","Geolocation API")}} retrieves geographical information. This is how Google Maps is able to find your location and plot it on a map.
    • -
  • The {{domxref("Canvas_API","Canvas")}} and {{domxref("WebGL_API","WebGL")}} APIs allow you to create animated 2D and 3D graphics. People are doing some amazing things using these web technologies —see Chrome Experiments and webglsamples.
    • -
  • Audio and Video APIs like {{domxref("HTMLMediaElement")}} and {{domxref("WebRTC API", "WebRTC")}} allow you to do really interesting things with multimedia, such as play audio and video right in a web page, or grab video from your web camera and display it on someone else's computer (try our simple Snapshot demo to get the idea).
    • -
- -
-

Note: Many of the above demos won't work in an older browser — when experimenting, it's a good idea to use a modern browser like Firefox, Chrome, Edge or Opera to run your code in. You will need to consider cross browser testing in more detail when you get closer to delivering production code (i.e. real code that real customers will use).

-
- -

Third party APIs are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example:

- -
    -
  • The Twitter API allows you to do things like displaying your latest tweets on your website.
    • -
  • The Google Maps API and OpenStreetMap API allows you to embed custom maps into your website, and other such functionality.
    • -
- -
-

Note: These APIs are advanced, and we'll not be covering any of these in this module. You can find out much more about these in our Client-side web APIs module.

-
- -

There's a lot more available, too! However, don't get over excited just yet. You won't be able to build the next Facebook, Google Maps, or Instagram after studying JavaScript for 24 hours — there are a lot of basics to cover first. And that's why you're here — let's move on!

- -

What is JavaScript doing on your page?

- -

Here we'll actually start looking at some code, and while doing so, explore what actually happens when you run some JavaScript in your page.

- -

Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our How CSS works article). When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).

- -

- -

A very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). Note that the code in your web documents is generally loaded and executed in the order it appears on the page. If the JavaScript loads and tries to run before the HTML and CSS it is affecting has been loaded, errors can occur. You will learn ways around this later in the article, in the Script loading strategies section.

- -

Browser security

- -

Each browser tab has its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab — or on another website. This is a good security measure — if this were not the case, then pirates could start writing code to steal information from other websites, and other such bad things.

- -
-

Note: There are ways to send code and data between different websites/tabs in a safe manner, but these are advanced techniques that we won't cover in this course.

-
- -

JavaScript running order

- -

When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in. For example, let's return to the block of JavaScript we saw in our first example:

- -
const para = document.querySelector('p');
-
-para.addEventListener('click', updateName);
-
-function updateName() {
-  let name = prompt('Enter a new name');
-  para.textContent = 'Player 1: ' + name;
-}
- -

Here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the updateName() code block (lines 5–8) is run. The updateName() code block (these types of reusable code blocks are called "functions") asks the user for a new name, and then inserts that name into the paragraph to update the display.

- -

If you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the browser developer console — TypeError: para is undefined. This means that the para object does not exist yet, so we can't add an event listener to it.

- -
-

Note: This is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them.

-
- -

Interpreted versus compiled code

- -

You might hear the terms interpreted and compiled in the context of programming. In interpreted languages, the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code into a different form before the browser runs it. The code is received in its programmer-friendly text form and processed directly from that.

- -

Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example, C/C++ are compiled into machine code that is then run by the computer. The program is executed from a binary format, which was generated from the original program source code.

- -

JavaScript is a lightweight interpreted programming language. The web browser receives the JavaScript code in its original text form and runs the script from that. From a technical standpoint, most modern JavaScript interpreters actually use a technique called just-in-time compiling to improve performance; the JavaScript source code gets compiled into a faster, binary format while the script is being used, so that it can be run as quickly as possible. However, JavaScript is still considered an interpreted language, since the compilation is handled at run time, rather than ahead of time.

- -

There are advantages to both types of language, but we won't discuss them right now.

- -

Server-side versus client-side code

- -

You might also hear the terms server-side and client-side code, especially in the context of web development. Client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser. In this module we are explicitly talking about client-side JavaScript.

- -

Server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. Examples of popular server-side web languages include PHP, Python, Ruby, ASP.NET and... JavaScript! JavaScript can also be used as a server-side language, for example in the popular Node.js environment — you can find out more about server-side JavaScript in our Dynamic Websites – Server-side programming topic.

- -

Dynamic versus static code

- -

The word dynamic is used to describe both client-side JavaScript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. Server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the client, e.g. creating a new HTML table, filling it with data requested from the server, then displaying the table in a web page shown to the user. The meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side) usually work together.

- -

A web page with no dynamically updating content is referred to as static — it just shows the same content all the time.

- -

How do you add JavaScript to your page?

- -

JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses {{htmlelement("link")}} elements to apply external stylesheets and {{htmlelement("style")}} elements to apply internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML — the {{htmlelement("script")}} element. Let's learn how this works.

- -

Internal JavaScript

- -
    -
  1. First of all, make a local copy of our example file apply-javascript.html. Save it in a directory somewhere sensible.
    2. -
  2. Open the file in your web browser and in your text editor. You'll see that the HTML creates a simple web page containing a clickable button.
    3. -
  3. Next, go to your text editor and add the following in your head — just before your closing </head> tag: - 
    <script>
-
-  // JavaScript goes here
-
-</script>
    -
    4. -
  4. Now we'll add some JavaScript inside our {{htmlelement("script")}} element to make the page do something more interesting — add the following code just below the "// JavaScript goes here" line: - 
    document.addEventListener("DOMContentLoaded", function() {
-  function createParagraph() {
-    let para = document.createElement('p');
-    para.textContent = 'You clicked the button!';
-    document.body.appendChild(para);
-  }
-
-  const buttons = document.querySelectorAll('button');
-
-  for(let i = 0; i < buttons.length ; i++) {
-    buttons[i].addEventListener('click', createParagraph);
-  }
-});
    -
    5. -
  5. Save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.
    6. -
- -
-

Note: If your example doesn't seem to work, go through the steps again and check that you did everything right. Did you save your local copy of the starting code as a .html file? Did you add your {{htmlelement("script")}} element just before the </head> tag? Did you enter the JavaScript exactly as shown? JavaScript is case sensitive, and very fussy, so you need to enter the syntax exactly as shown, otherwise it may not work.

-
- -
-

Note: You can see this version on GitHub as apply-javascript-internal.html (see it live too).

-
- -

External JavaScript

- -

This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.

- -
    -
  1. First, create a new file in the same directory as your sample HTML file. Call it script.js — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.
    2. -
  2. Replace your current {{htmlelement("script")}} element with the following: - 
    <script src="script.js" defer></script>
    -
    3. -
  3. Inside script.js, add the following script: - 
    function createParagraph() {
-  let para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
-  document.body.appendChild(para);
-}
-
-const buttons = document.querySelectorAll('button');
-
-for(let i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
    -
    4. -
  4. Save and refresh your browser, and you should see the same thing! It works just the same, but now we've got our JavaScript in an external file. This is generally a good thing in terms of organizing your code and making it reusable across multiple HTML files. Plus, the HTML is easier to read without huge chunks of script dumped in it.
    5. -
- -
-

Note: You can see this version on GitHub as apply-javascript-external.html and script.js (see it live too).

-
- -

Inline JavaScript handlers

- -

Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. It might look something like this:

- -
-
function createParagraph() {
-  let para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
-  document.body.appendChild(para);
-}
- -
<button onclick="createParagraph()">Click me!</button>
-
- -

You can try this version of our demo below.

- -

{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}

- -

This demo has exactly the same functionality as in the previous two sections, except that the {{htmlelement("button")}} element includes an inline onclick handler to make the function run when the button is pressed.

- -

Please don't do this, however. It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the onclick="createParagraph()" attribute on every button you want the JavaScript to apply to.

- -

Using a pure JavaScript construct allows you to select all the buttons using one instruction. The code we used above to serve this purpose looks like this:

- -
const buttons = document.querySelectorAll('button');
-
-for(let i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
- -

This might be a bit longer than the onclick attribute, but it will work for all buttons — no matter how many are on the page, nor how many are added or removed. The JavaScript does not need to be changed.

- -
-

Note: Try editing your version of apply-javascript.html and add a few more buttons into the file. When you reload, you should find that all of the buttons when clicked will create a paragraph. Neat, huh?

-
- -

Script loading strategies

- -

There are a number of issues involved with getting scripts to load at the right time. Nothing is as simple as it seems! A common problem is that all the HTML on a page is loaded in the order in which it appears. If you are using JavaScript to manipulate elements on the page (or more accurately, the Document Object Model), your code won't work if the JavaScript is loaded and parsed before the HTML you are trying to do something to.

- -

In the above code examples, in the internal and external examples the JavaScript is loaded and run in the head of the document, before the HTML body is parsed. This could cause an error, so we've used some constructs to get around it.

- -

In the internal example, you can see this structure around the code:

- -
document.addEventListener("DOMContentLoaded", function() {
-  ...
-});
- -

This is an event listener, which listens for the browser's "DOMContentLoaded" event, which signifies that the HTML body is completely loaded and parsed. The JavaScript inside this block will not run until after that event is fired, therefore the error is avoided (you'll learn about events later in the course).

- -

In the external example, we use a more modern JavaScript feature to solve the problem, the defer attribute, which tells the browser to continue downloading the HTML content once the <script> tag element has been reached.

- -
<script src="script.js" defer></script>
- -

In this case both the script and the HTML will load simultaneously and the code will work.

- -
-

Note: In the external case, we did not need to use the DOMContentLoaded event because the defer attribute solved the problem for us. We didn't use the defer solution for the internal JavaScript example because defer only works for external scripts.

-
- -

An old-fashioned solution to this problem used to be to put your script element right at the bottom of the body (e.g. just before the </body> tag), so that it would load after all the HTML has been parsed. The problem with this solution is that loading/parsing of the script is completely blocked until the HTML DOM has been loaded. On larger sites with lots of JavaScript, this can cause a major performance issue, slowing down your site.

- -

async and defer

- -

There are actually two modern features we can use to bypass the problem of the blocking script — async and defer (which we saw above). Let's look at the difference between these two.

- -

Scripts loaded using the async attribute (see below) will download the script without blocking rendering the page and will execute it as soon as the script finishes downloading. You get no guarantee that scripts will run in any specific order, only that they will not stop the rest of the page from displaying. It is best to use async when the scripts in the page run independently from each other and depend on no other script on the page.

- -

For example, if you have the following script elements:

- -
<script async src="js/vendor/jquery.js"></script>
-
-<script async src="js/script2.js"></script>
-
-<script async src="js/script3.js"></script>
- -

You can't rely on the order the scripts will load in. jquery.js may load before or after script2.js and script3.js and if this is the case, any functions in those scripts depending on jquery will produce an error because jquery will not be defined at the time the script runs.

- -

async should be used when you have a bunch of background scripts to load in, and you just want to get them in place asap. For example, maybe you have some game data files to load, which will be needed when the game actually begins, but for now you just want to get on with showing the game intro, titles, and lobby, without them being blocked by script loading.

- -

Scripts loaded using the defer attribute (see below) will run in the order they appear in the page and execute them as soon as the script and content are downloaded:

- -
<script defer src="js/vendor/jquery.js"></script>
-
-<script defer src="js/script2.js"></script>
-
-<script defer src="js/script3.js"></script>
- -

All the scripts with the defer attribute will load in the order they appear on the page. So in the second example, we can be sure that jquery.js will load before script2.js and script3.js and that script2.js will load before script3.js. They won't run until the page content has all loaded, which is useful if your scripts depend on the DOM being in place (e.g. they modify one of more elements on the page).

- -

To summarize:

- -
    -
  • async and defer both instruct the browser to download the script(s) in a separate thread, while the rest of the page (the DOM, etc.) is downloading, so the page loading is not blocked by the scripts.
    • -
  • If your scripts should be run immediately and they don't have any dependencies, then use async.
    • -
  • If your scripts need to wait for parsing and depend on other scripts and/or the DOM being in place, load them using defer and put their corresponding <script> elements in the order you want the browser to execute them.
    • -
- -

Comments

- -

As with HTML and CSS, it is possible to write comments into your JavaScript code that will be ignored by the browser, and exist simply to provide instructions to your fellow developers on how the code works (and you, if you come back to your code after six months and can't remember what you did). Comments are very useful, and you should use them often, particularly for larger applications. There are two types:

- -
    -
  • A single line comment is written after a double forward slash (//), e.g. - 
    // I am a comment
    -
    • -
  • A multi-line comment is written between the strings /* and */, e.g. - 
    /*
-  I am also
-  a comment
-*/
    -
    • -
- -

So for example, we could annotate our last demo's JavaScript with comments like so:

- -
// Function: creates a new paragraph and appends it to the bottom of the HTML body.
-
-function createParagraph() {
-  let para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
-  document.body.appendChild(para);
-}
-
-/*
-  1. Get references to all the buttons on the page in an array format.
-  2. Loop through all the buttons and add a click event listener to each one.
-
-  When any button is pressed, the createParagraph() function will be run.
-*/
-
-const buttons = document.querySelectorAll('button');
-
-for (let i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
- -
-

Note: In general more comments are usually better than less, but you should be careful if you find yourself adding lots of comments to explain what variables are (your variable names perhaps should be more intuitive), or to explain very simple operations (maybe your code is overcomplicated).

-
- -

Summary

- -

So there you go, your first step into the world of JavaScript. We've begun with just theory, to start getting you used to why you'd use JavaScript and what kind of things you can do with it. Along the way, you saw a few code examples and learned how JavaScript fits in with the rest of the code on your website, amongst other things.

- -

JavaScript may seem a bit daunting right now, but don't worry — in this course, we will take you through it in simple steps that will make sense going forward. In the next article, we will plunge straight into the practical, getting you to jump straight in and build your own JavaScript examples.

- -
    -
- -

{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}

- -

In this module

- - diff --git a/files/bn/learn/javascript/index.html b/files/bn/learn/javascript/index.html deleted file mode 100644 index c74e72a302..0000000000 --- a/files/bn/learn/javascript/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: JavaScript -slug: Learn/JavaScript -translation_of: Learn/JavaScript ---- -
{{LearnSidebar}}
- -

{{Glossary("JavaScript")}}  হচ্ছে একটি প্রোগ্রামিং ভাষা যা আপনাকে ওয়েব পৃষ্ঠাগুলিতে জটিল জিনিসগুলি বাস্তবায়ন করতে দেয়। প্রতিবার একটি ওয়েব পৃষ্ঠা কেবল সেখানে একিরকম থাকে এবং আপনার জন্য স্ট্যাটিক তথ্য প্রদর্শন করে - সময়মত লেখার  আপডেটগুলি, বা মিথষ্ক্রিয় মানচিত্র, বা অ্যানিমেটেড 2 ডি / 3 ডি গ্রাফিক্স বা স্ক্রোলিং ভিডিও জুকবক্সগুলি ইত্যাদি প্রদর্শন করে - এবং  সম্ভবত আপনি জড়িত জাভাস্ক্রিপ্ট বিট করতে পারেন।

- -

Learning pathway

- -

JavaScript শেখা একটু বেশী কঠিন  এর অনুষঙ্গী অন্যান্য ভাষা থেকে, যেমন  HTML এবং CSS। তোমার প্রতি আক্তি কঠিন উপদেশহবে, JavaScript শিখার আগে কমসেকম এর  অনুষঙ্গী দুইটি টেকনলজি এর সাথে একটু পরিচিত হন অন্যদের পাশাপাশি এবং নিম্নলিখিত মডিউল মাধ্যমে কাজ করে শুরু করুন:

- - - -

Having previous experience with other programming languages might also help.

- -

After getting familiar with the basics of JavaScript, you should be in a position to learn about more advanced topics, for example:

- - - -

Modules

- -

This topic contains the following modules, in a suggested order for working through them.

- -
-
JavaScript first steps
-
In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key JavaScript features in detail, such as variables, strings, numbers and arrays.
-
JavaScript building blocks
-
In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.
-
Introducing JavaScript objects
-
In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, look at how to create your own objects, and explain what JSON data is and how to work with it.
-
Client-side web APIs
-
When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. 
-
- -

Solving common JavaScript problems

- -

Use JavaScript to solve common problems provides links to sections of content explaining how to use JavaScript to solve very common problems when creating a webpage.

- -

See also

- -
-
JavaScript on MDN
-
The main entry point for core JavaScript documentation on MDN — this is where you'll find extensive reference docs on all aspects of the JavaScript language, and some advanced tutorials aimed at experienced JavaScripters.
-
Coding math
-
An excellent series of video tutorials to teach the math you need to understand to be an effective programmer, by Keith Peters.
-
diff --git a/files/bn/learn/server-side/django/index.html b/files/bn/learn/server-side/django/index.html deleted file mode 100644 index 8452a4f9d7..0000000000 --- a/files/bn/learn/server-side/django/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Django Web Framework (Python) -slug: Learn/Server-side/Django -tags: - - Beginner CodingScripting django Intro Learn Python Server-side programming -translation_of: Learn/Server-side/Django ---- -
{{LearnSidebar}}
- -
জ্যাঙ্গ সম্পুর্ন বৈশিষ্ট্যযুক্ত জনপ্রিয় server-side web framework যা Python এ লিখিত। এই মডিউল আপনাকে দেখাবে জ্যাঙ্গ কেন সবচেয়ে জনপ্রিয় web server frameworks, কিভাবে এনভাইরনমেন্ট সেটআপ করতে হবে এবং দেখাবে কিভাবে আপনি আপনার নিজস্ব ওয়েব আপ্লিকেশন তৈরি করবেন।
- -

পূর্বশর্ত 

- -

এই মডিউল শুরু করার পুর্বে আপনার জ্যাঙ্গ সম্পর্কে কোন জ্ঞানের প্রয়োজন নেই। মুলত যেটা জানতেই হবে তা হচ্ছে, server-side web programming কি, web programming এবং web frameworks সম্পর্কে বিস্তারিত জানেতে আমাদের এই অংশটি দেখুন যেইখানে মুলত প্রথম থেকে শুরু হয়েছে, Server-side website programming first steps.

- -

আপনাকে অবশ্যই কিঞ্চিত অর্থাৎ প্রোগ্রামিং এর কিছু সাধারন ধারনা রাখতে হবে এবং Python কেই আমরা রিকমেন্ড করি, যদিও মুল বিষয় খুব বেশি জরুরী না।

- -
-

মনেরাখুন: পাইথন সবচেয়ে সহজ প্রোগ্রামিং ল্যাঙ্গুয়েজ যা কিনা যেকোনো অনভিজ্ঞ লোকের পক্ষেই পড়া এবং বোঝা সহজ।  বলে রাখি, আপনি যদি এই মডিউলটি আরও ভালভাবে বুঝতে চান তবে আপনাকে সাহায্য করার জন্য ইন্টারনেটে প্রচুর বিনামূল্যে বই এবং টিউটোরিয়াল উপলব্ধ রয়েছে (নতুন প্রোগ্রামাররা python.org উইকিতে Python for Non Programmers পৃষ্ঠাগুলি চাইলে দেখতে পারেন)।

-
- -

নির্দেশনাঃ 

- -
-
Django introduction
-
এই আর্টিকেলটির প্রথমেই আমরা এই প্রশ্নের জবাব দিবো যে, "জ্যাঙ্গ কি?" এবং কি কারনে এই ওয়েব ফ্রেমওয়ার্কটি বিশেষ করে তোলে তার একটি সংক্ষিপ্ত বিবরণ আপনাকে দিবো। আমরা মুলত প্রধান বৈশিষ্ট্যগুলির বর্ননা করব এবং কিছু উন্নত কার্যকারিতা সহ যেহেতু আমাদের হাতে পর্যাপ্ত সময় নেই সবকিছু বিশদ ভাবে ব্যাখ্যা করার। এটি সেট আপ করার আগে এবং জ্যাঙ্গ নিয়ে মাঠে নামার আগে এটি কী করতে পারে তার একটি ধারণা দেওয়ার জন্য আমরা আপনাকে জ্যাঙ্গো অ্যাপ্লিকেশনের কয়েকটি মূল বিল্ডিং ব্লক প্রদর্শন করব।
-
Setting up a Django development environment
-
-

এখন যেহেতু আপনি জানলেন যে জাঙ্গো কীসের জন্য, এখন আমরা আপনাকে উইন্ডোজ, লিনাক্স (উবুন্টু), এবং macOS-এ - (আপনি যে কমন অপারেটিং সিস্টেম ব্যবহার করছেন) জ্যাঙ্গো ডেভেলপমেন্ট এনভাইরনমেন্ট কীভাবে সেটআপ এবং টেস্ট করতে হবে তা দেখিয়ে দেব। একটি জ্যাঙ্গো অ্যাপ্লিকেশনগুলির ডেভেলপমেন্ট শুরু করার জন্য যা প্রয়োজন এই নিবন্ধটি আপনাকে মুলত সেগুলই দিবে যা আপনাকে দেওয়া উচিত।

-
-
Django Tutorial: The Local Library website
-
প্রথম আর্টিকেল এ আপনি আমাদের প্রাক্টিকাল টিউটোরিয়াল সিরিজ আপনাকে দেখাবে আপনি কি শিক্ষা গ্রহন করতে যাচ্ছেন এবং মুলত আপনি লকাল লাইব্রেরি সম্পর্কেই সাধারন নির্দেশনা পাবেন -- উদাহরণ সরূপ, আমরা একটি ওয়েবসাইট নিয়ে কাজ করব এবং তাকে বিকশিত করব।
-
Django Tutorial Part 2: Creating a skeleton website
-
এই অধ্যায়ে আপনি একটি ওয়েবসাইট প্রোজেক্ট এর স্কেলেটন তৈরি করা দেখানো হবে যেখানে আপনি site-specific settings, urls, models, views, and templates সম্পর্কে জানতে পারবেন।
-
Django Tutorial Part 3: Using models
-
এই নিবন্ধটি দেখায় যে কীভাবে LocalLibrary ওয়েবসাইটের মডেলগুলি সংজ্ঞায়িত করতে হয় - মডেলগুলি আমাদের অ্যাপ্লিকেশনটির ডেটা সংরক্ষণ করতে চাই এমন ডেটা স্ট্রাকচারকে উপস্থাপন করে এবং জ্যাঙ্গোকে আমাদের জন্য একটি ডাটাবেসে ডেটা সংরক্ষণ করার অনুমতি দেয় (এবং পরে এটি সংশোধন করে)। একটি মডেল কী তা ব্যাখ্যা করা হয়েছে, এটা কিভাবে ডিক্লিয়ার করা হয়েছে এবং কিছু মেইন ফিল্ড টাইপ্স। কিভাবে আপনি মডেল ডেটা অ্যাক্সেস করতে পারবেন এমন কয়েকটি প্রধান উপায় সংক্ষেপে দেখানো হয়েছে।
-
Django Tutorial Part 4: Django admin site
-
এখন আমরা LocalLibrary ওয়েবসাইটের জন্য মডেল তৈরি করেছি, আমরা কিছু "real" বইয়ের ডেটা যুক্ত করতে জাঙ্গো অ্যাডমিন সাইটটি ব্যবহার করব। প্রথমে আমরা আপনাকে অ্যাডমিন সাইটের সাথে কীভাবে মডেলগুলি নিবন্ধভুক্ত করব তা দেখাব, তারপরে আমরা আপনাকে লগইন করতে এবং কিছু ডেটা তৈরি করার উপায় দেখাব। শেষে আমরা কয়েকটি উপায় প্রদর্শন করি যার মাধ্যমে আপনি Admin সাইটের উপস্থাপনাটি আরও উন্নত করতে পারেন।
-
Django Tutorial Part 5: Creating our home page
-
আমরা এখন আমাদের প্রথম পূর্ণ পৃষ্ঠাটি প্রদর্শন করার জন্য code যুক্ত করতে প্রস্তুত - LocalLibrary একটি হোম পৃষ্ঠা যা প্রতিটি মডেলের ধরণের আমাদের কাছে কত রেকর্ড রয়েছে তা দেখায় এবং আমাদের অন্যান্য পৃষ্ঠাগুলিতে সাইডবারের নেভিগেশন লিঙ্ক সরবরাহ করে। যেভাবে আমরা basic URL maps এবং ভিউ লিখতে, ডাটাবেস থেকে রেকর্ড পেতে এবং টেমপ্লেট ব্যবহার করে ব্যবহারিক অভিজ্ঞতা অর্জন করব।
-
Django Tutorial Part 6: Generic list and detail views
-
এই টিউটোরিয়ালটি বই এবং লেখকদের তালিকা এবং বিশদ পৃষ্ঠা যুক্ত করে আমাদের LocalLibrary  ওয়েবসাইটকে প্রসারিত করে। এখানে আমরা জেনেরিক class-based views সম্পর্কে শিখব, এবং তারা ব্যবহারের সাধারণ ক্ষেত্রে আপনার কোড লিখতে হবে এমন কোডের পরিমাণ কীভাবে হ্রাস করতে পারে তা দেখাব। আমরা বেসিক প্যাটার্নের matching পারফর্ম করব এবং তা দেখিয়ে আরও বিশদ বিবরণে url হ্যান্ডলিংয়ে যাব। 
-
Django Tutorial Part 7: Sessions framework
-
এই টিউটোরিয়ালটি home page এ একটি সেশন-ভিত্তিক ভিজিট-কাউন্টার যুক্ত করে, আমাদের LocalLibrary  ওয়েবসাইটকে প্রসারিত করে। এটি তুলনামূলকভাবে সহজ উদাহরণ, তবে এটি দেখায় যে আপনি কীভাবে আপনার নিজের সাইটগুলিতে বেনাম ব্যবহারকারীদের জন্য অবাধ চলাচল নিশ্চিত করার জন্য সেশন ফ্রেমওয়ার্কটি ব্যবহার করতে পারেন।.
-
Django Tutorial Part 8: User authentication and permissions
-
এই টিউটোরিয়ালে আমরা আপনাকে কীভাবে ব্যবহারকারীদের নিজের অ্যাকাউন্টে আপনার সাইটে লগইন করতে দেওয়া হবে এবং কীভাবে তারা কী করতে পারে তা নিয়ন্ত্রণ করতে হবে এবং লগ ইন করা হয়েছে কি না এবং তাদের অনুমতিগুলির ভিত্তিতে তা কীভাবে দেখানো হবে তা আমরা আপনাকে দেখাব। এই ব্যাখ্যার অংশ হিসাবে, আমরা LocalLibrary ওয়েবসাইট প্রসারিত করব, লগইন এবং লগ-আউট pages এবং বই যে ধার করা হয়েছে দেখার জন্য user- ও staff-specific pages নির্দিষ্ট পৃষ্ঠাগুলি যোগ করব।
-
Django Tutorial Part 9: Working with forms
-
এই টিউটোরিয়ালে আমরা আপনাকে জ্যাঙ্গ তে  HTML Forms এর সাথে কীভাবে কাজ করব এবং বিশেষত মডেল উদাহরণগুলি তৈরি করতে, আপডেট করতে এবং মুছতে ফর্মগুলি লেখার সহজ উপায়টি দেখাব। এই ব্যাখ্যার অংশ হিসাবে, আমরা LocalLibrary ওয়েবসাইট প্রসারিত করব, যাতে গ্রন্থাগারিকরা আমাদের নিজস্ব ফর্মগুলি (অ্যাডমিন অ্যাপ্লিকেশন ব্যবহার না করে) ব্যবহার করে লেখকদের বই পুনর্নবীকরণ(renew) করতে এবং তৈরি করতে, আপডেট করতে এবং মুছতে পারেন।
-
Django Tutorial Part 10: Testing a Django web application
-
ওয়েবসাইটগুলি বড় হওয়ার সাথে সাথে এগুলি ম্যানুয়ালি পরীক্ষা করা আরও শক্ত হয়ে ওঠে- পরীক্ষার জন্য মনেহতে পারে আরও অনেক কিছুই নেই, তবে components এর মধ্যে interaction আরও জটিল হয়ে উঠার সাথে সাথে, একটি ছোট্ট পরিবর্তন, পরিবর্তনের সাথে অন্যান্য area এর প্রভাবটি যাচাই করতে আরও অনেক অতিরিক্ত পরীক্ষার প্রয়োজন হতে পারে। এই সমস্যাগুলি সহজ করার একটি উপায় হ'ল স্বয়ংক্রিয় পরীক্ষাগুলি লিখুন যা আপনি প্রতিবার পরিবর্তন করার সময় সহজেই এবং নির্ভরযোগ্যতার সাথে চালানো যেতে পারে। এই টিউটোরিয়ালটি দেখায় যে কীভাবে জাঙ্গোর পরীক্ষার কাঠামোটি ব্যবহার করে আপনার ওয়েবসাইটের unit testing স্বয়ংক্রিয় করবেন।
-
Django Tutorial Part 11: Deploying Django to production
-
এখন আপনি একটি দুর্দান্ত লোকাল লাইব্রেরি ওয়েবসাইট তৈরি করেছেন (এবং পরীক্ষা করেছেন), আপনি এটিকে একটি পাবলিক ওয়েব সার্ভারে ইনস্টল করতে চাইছেন যাতে এটিতে লাইব্রেরি স্টাফ এবং সদস্যরা ইন্টারনেটে অ্যাক্সেস করতে পারে। এই আর্টিকেলটিতে আলোচনা করা হয়েছে, আপনাকে আপনার ওয়েবসাইট স্থাপন করতে কীভাবে একটি হোস্ট সন্ধান করতে হবে এবং আপনার সাইটকে প্রডাকশনের জন্য প্রস্তুত করার জন্য আপনাকে কী করতে হবে।
-
Django web application security
-
ব্যবহারকারীর ডেটা রক্ষা করা যে কোনও ওয়েবসাইট ডিজাইনের একটি অপরিহার্য অংশ। আমরা এর আগে Web security প্রবন্ধে আরও কয়েকটি সাধারণ সুরক্ষা হুমকির ব্যাখ্যা দিয়েছিলাম - এই নিবন্ধটিতে জ্যাঙ্গোর বিল্ট-ইন সুরক্ষাগুলি কীভাবে এই জাতীয় হুমকিগুলি পরিচালনা করে তার একটি ব্যাবহারিক প্রয়োগ প্রদর্শন করা হয়েছে।
-
- -

Assessments

- -

এই মূল্যায়নটি জ্যাঙ্গো ব্যবহার করে কীভাবে একটি ওয়েবসাইট তৈরি করবেন সে সম্পর্কে আপনার বোধগম্যতার পরীক্ষা করবে, যা উপরের তালিকাভুক্ত গাইডগুলিতে বর্ণিত ছিলো।

- -
-
DIY Django mini blog
-
এই মূল্যায়নটিতে আপনি আপনার নিজের ব্লগ তৈরি করতে এই মডিউলটি থেকে শিখেছেন এমন কিছু জ্ঞান ব্যবহার করবেন।
-
diff --git a/files/bn/learn/server-side/first_steps/index.html b/files/bn/learn/server-side/first_steps/index.html deleted file mode 100644 index 1b2c9597a9..0000000000 --- a/files/bn/learn/server-side/first_steps/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Server-side website programming first steps -slug: Learn/Server-side/First_steps -tags: - - Beginner - - CodingScripting - - Guide - - Intro - - Landing - - Learn - - NeedsTranslation - - Server-side programming - - TopicStub -translation_of: Learn/Server-side/First_steps ---- -
{{LearnSidebar}}
- -

In this module we answer a few fundamental questions about server-side programming — "What is it?", "How does it differ from client-side programming?", and "Why is it so useful?". We then provide an overview of some of the most popular server-side web frameworks, along with guidance on how to select the most suitable framework for creating your first site. Finally, we provide a high-level introductory article about web server security.

- -

Prerequisites

- -

Before starting this module, you don't need to have any knowledge of server-side website programming, or indeed any other type of programming. 

- -

However, you do need to understand how the web works. We recommend that you first read the following topics:

- - - -

With that basic understanding, you'll be ready to work your way through the modules in this section. 

- -

Guides

- -
-
Introduction to the server side
-
Welcome to the MDN beginner's server-side programming course! In this first article, we look at server-side programming from a high level, answering questions such as "What is it?", "How does it differ from client-side programming?", and "Why it is so useful?". After reading this article, you'll understand the additional power available to websites through server-side coding.
-
Client-Server overview
-
Now that you know the purpose and potential benefits of server-side programming, we're going to examine in detail what happens when a server receives a "dynamic request" from a browser. As most websites' server-side code handles requests and responses in a similar way, this will help you understand what you need to do when writing your own code.
-
Server-side web frameworks
-
The last article showed you what a server-side web application needs to do in order to respond to requests from a web browser. Now we show how web frameworks can simplify these tasks, and help you choose the right framework for your first server-side web application.
-
Website security
-
Website security requires vigilance in all aspects of website design and usage. This introductory article won't make you a website security guru, but it will help you understand the first important steps you can take to protect your web application against the most common threats.
-
- -
-

Note: This topic deals with server-side frameworks, and how to use them to create websites. If you are looking for information on client-side JavaScript frameworks, consult our Understanding client-side JavaScript frameworks module.

-
- -

Assessments

- -

This "first steps" module doesn't have any assessment because we haven't yet shown you any code. We do hope that at this point you have a good understanding of what sorts of functionality you can deliver using server-side programming, and that you have made a decision about what server-side web framework you will use to create your first website.

diff --git a/files/bn/learn/server-side/first_steps/website_security/index.html b/files/bn/learn/server-side/first_steps/website_security/index.html deleted file mode 100644 index dcc862f5fc..0000000000 --- a/files/bn/learn/server-side/first_steps/website_security/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: নিরাপদ ওয়েবসাইট -slug: Learn/Server-side/First_steps/Website_security -translation_of: Learn/Server-side/First_steps/Website_security ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
- -

ওয়েবসাইট ডিজাইন ও ব্যবহারের সবক্ষেত্রেই এখন নিরাপত্তার প্রয়োজন হয়। এই লেখাটি আপনাকে ওয়েবসাইট নিরাপত্তার গুরু বানিয়ে ফেলবে তবে এটি আপনাকে কীভাবে নিরাপত্তা সংক্রান্ত ঝুঁকি আসতে পারে এবং সবচেয়ে সাধারণ কিছু ঝুঁকি থেকে রক্ষা করার জন্য কী কী প্রতিরোধমূলক পদক্ষেপ নেওয়া যায় সেসব সম্পর্কে প্রাথমিক ধারণা পাবেন।

- - - - - - - - - - - - -
-

যা জানা থাকা আবশ্যক

- 		-

কম্পিউটারের সম্পর্কে মৌলিক জ্ঞান

-
-

উদ্দেশ্য:

- 		ওয়েব এপ্লিকেশনের নিরাপত্তা সংক্রান্ত সবচেয়ে সাধারণ ঝুঁকিগুলোকে সম্পর্কে জানা এবং ওয়েবসাইট হ্যাক হওয়ার ঝুঁকি কমানোর জন্য কী কী করা যায় সে সম্পর্কে ধারণা লাভ
- -

ওয়েবসাইটের নিরাপত্তা কী?

- -

ইন্টারনেট একটি ঝুঁকিপূর্ণ স্থান। আমরা হরহামেশাই ওয়েবসাইটকে খুঁজে না পাওয়া অথবা হ্যাক হয়েছে এরকম তথ্য প্রকাশ করা কথা শুনতে পাই।

- -

The purpose of website security is to prevent these (or any) sorts of attacks. The more formal definition of website security is the act/practice of protecting websites from unauthorized access, use, modification, destruction, or disruption.

- -

Effective website security requires design effort across the whole of the website: in your web application, the configuration of the web server, your policies for creating and renewing passwords, and the client-side code. While all that sounds very ominous, the good news is that if you're using a server-side web framework, it will almost certainly enable "by default" robust and well-thought-out defense mechanisms against a number of the more common attacks. Other attacks can be mitigated through your web server configuration, for example by enabling HTTPS. Finally, there are publically available vulnerability scanner tools that can help you find out if you've made any obvious mistakes.

- -

The rest of this article gives you more details about a few common threats and some of the simple steps you can take to protect your site.

- -
-

Note: This is an introductory topic, designed to help you start thinking about website security, but it is not exhaustive.

-
- -

Website security threats

- -

This section lists just a few of the most common website threats and how they are mitigated. As you read, note how threats are most successful when the web application either trusts, or is not paranoid enough about the data coming from the browser.

- -

Cross-Site Scripting (XSS)

- -

XSS is a term used to describe a class of attacks that allow an attacker to inject client-side scripts through the website into the browsers of other users. Because the injected code comes to the browser from the site, the code is trusted and can do things like send the user's site authorization cookie to the attacker. When the attacker has the cookie, they can log into a site as though they were the user and do anything the user can, such as access their credit card details, see contact details, or change passwords.

- -
-

Note: XSS vulnerabilities have been historically more common than any other type of security threat.

-
- -

The XSS vulnerabilities are divided into reflected and persistent, based on how the site returns the injected scripts to a browser.

- -
    -
  • A reflected XSS vulnerability occurs when user content that is passed to the server is returned immediately and unmodified for display in the browser. Any scripts in the original user content will be run when the new page is loaded.
    - For example, consider a site search function where the search terms are encoded as URL parameters, and these terms are displayed along with the results. An attacker can construct a search link that contains a malicious script as a parameter (e.g., http://mysite.com?q=beer<script%20src="http://evilsite.com/tricky.js"></script>) and email it to another user. If the target user clicks this "interesting link", the script will be executed when the search results are displayed. As discussed earlier, this gives the attacker all the information they need to enter the site as the target user, potentially making purchases as the user or sharing their contact information.
    • -
  • -

    A persistent XSS vulnerability occurs when the malicious script is stored on the website and then later redisplayed unmodified for other users to execute unwittingly.
    - For example, a discussion board that accepts comments that contain unmodified HTML could store a malicious script from an attacker. When the comments are displayed, the script is executed and can send to the attacker the information required to access the user's account. This sort of attack is extremely popular and powerful, because the attacker might not even have any direct engagement with the victims.

    -
    • -
- -

While the data from POST or GET requests is the most common source of XSS vulnerabilities, any data from the browser is potentially vulnerable, such as cookie data rendered by the browser, or user files that are uploaded and displayed.

- -

The best defense against XSS vulnerabilities is to remove or disable any markup that can potentially contain instructions to run the code. For HTML this includes elements, such as <script>, <object>, <embed>, and <link>.

- -
-

The process of modifying user data so that it can't be used to run scripts or otherwise affect the execution of server code is known as input sanitization. Many web frameworks automatically sanitize user input from HTML forms by default.

-
- -

SQL injection

- -

SQL injection vulnerabilities enable malicious users to execute arbitrary SQL code on a database, allowing data to be accessed, modified, or deleted irrespective of the user's permissions. A successful injection attack might spoof identities, create new identities with administration rights, access all data on the server, or destroy/modify the data to make it unusable.

- -
-

SQL injection types include Error-based SQL injection, SQL injection based on boolean errors, and Time-based SQL injection.

-
- -

This vulnerability is present if user input that is passed to an underlying SQL statement can change the meaning of the statement. For example, the following code is intended to list all users with a particular name (userName) that has been supplied from an HTML form:

- -
statement = "SELECT * FROM users WHERE name = '" + userName + "';"
- -

If the user specifies a real name, the statement will work as intended. However, a malicious user could completely change the behavior of this SQL statement to the new statement in the following example, by simply specifying the text in bold for the userName.

- -
SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't';
-
- -

The modified statement creates a valid SQL statement that deletes the users table and selects all data from the userinfo table (which reveals the information of every user). This works because the first part of the injected text (a';) completes the original statement.

- -

To avoid this sort of attack, you must ensure that any user data that is passed to an SQL query cannot change the nature of the query. One way to do this is to escape all the characters in the user input that have a special meaning in SQL.

- -
-

Note: The SQL statement treats the ' character as the beginning and end of a string literal. By putting a backslash in front of this character (\'), we escape the symbol, and tell SQL to instead treat it as a character (just a part of the string).

-
- -

In the following statement, we escape the ' character. The SQL will now interpret the name as the whole string in bold (which is a very odd name indeed, but not harmful).

- -
SELECT * FROM users WHERE name = 'a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t';
-
-
- -

Web frameworks will often take care of the character escaping for you. Django, for example, ensures that any user-data passed to querysets (model queries) is escaped.

- -
-

Note: This section draws heavily on the information in Wikipedia here.

-
- -

Cross-Site Request Forgery (CSRF)

- -

CSRF attacks allow a malicious user to execute actions using the credentials of another user without that user’s knowledge or consent.

- -

This type of attack is best explained by example. John is a malicious user who knows that a particular site allows logged-in users to send money to a specified account using an HTTP POST request that includes the account name and an amount of money. John constructs a form that includes his bank details and an amount of money as hidden fields, and emails it to other site users (with the Submit button disguised as a link to a "get rich quick" site).

- -

If a user clicks the submit button, an HTTP POST request will be sent to the server containing the transaction details and any client-side cookies that the browser associated with the site (adding associated site cookies to requests is normal browser behavior). The server will check the cookies, and use them to determine whether or not the user is logged in and has permission to make the transaction.

- -

The result is that any user who clicks the Submit button while they are logged in to the trading site will make the transaction. John gets rich.

- -
-

Note: The trick here is that John doesn't need to have access to the user's cookies (or access credentials). The browser of the user stores this information and automatically includes it in all requests to the associated server.

-
- -

One way to prevent this type of attack is for the server to require that POST requests include a user-specific site-generated secret. The secret would be supplied by the server when sending the web form used to make transfers. This approach prevents John from creating his own form, because he would have to know the secret that the server is providing for the user. Even if he found out the secret and created a form for a particular user, he would no longer be able to use that same form to attack every user.

- -

Web frameworks often include such CSRF prevention mechanisms.

- -

Other threats

- -

Other common attacks/vulnerabilities include:

- -
    -
  • Clickjacking. In this attack, a malicious user hijacks clicks meant for a visible top-level site and routes them to a hidden page beneath. This technique might be used, for example, to display a legitimate bank site but capture the login credentials into an invisible {{htmlelement("iframe")}} controlled by the attacker. Clickjacking could also be used to get the user to click a button on a visible site, but in doing so actually unwittingly click a completely different button. As a defense, your site can prevent itself from being embedded in an iframe in another site by setting the appropriate HTTP headers.
    • -
  • Denial of Service (DoS). DoS is usually achieved by flooding a target site with fake requests so that access to a site is disrupted for legitimate users. The requests may simply be numerous, or they may individually consume large amounts of resource (e.g., slow reads or uploading of large files). DoS defenses usually work by identifying and blocking "bad" traffic while allowing legitimate messages through. These defenses are typically located before or in the web server (they are not part of the web application itself).
    • -
  • Directory Traversal (File and disclosure). In this attack, a malicious user attempts to access parts of the web server file system that they should not be able to access. This vulnerability occurs when the user is able to pass filenames that include file system navigation characters (for example, ../../). The solution is to sanitize input before using it.
    • -
  • File Inclusion. In this attack, a user is able to specify an "unintended" file for display or execution in data passed to the server. When loaded, this file might be executed on the web server or the client-side (leading to an XSS attack). The solution is to sanitize input before using it.
    • -
  • Command Injection. Command injection attacks allow a malicious user to execute arbitrary system commands on the host operating system. The solution is to sanitize user input before it might be used in system calls.
    • -
- -

For a comprehensive listing of website security threats see Category: Web security exploits (Wikipedia) and Category: Attack (Open Web Application Security Project).

- -

A few key messages

- -

Almost all of the security exploits in the previous sections are successful when the web application trusts data from the browser. Whatever else you do to improve the security of your website, you should sanitize all user-originating data before it is displayed in the browser, used in SQL queries, or passed to an operating system or file system call.

- -
-

Important: The single most important lesson you can learn about website security is to never trust data from the browser. This includes, but is not limited to data in URL parameters of GET requests, POST requests, HTTP headers and cookies, and user-uploaded files. Always check and sanitize all incoming data. Always assume the worst.

-
- -

A number of other concrete steps you can take are:

- -
    -
  • Use more effective password management. Encourage strong passwords that are changed regularly. Consider two-factor authentication for your site, so that in addition to a password the user must enter another authentication code (usually one that is delivered via some physical hardware that only the user will have, such as a code in an SMS sent to their phone).
    • -
  • Configure your web server to use HTTPS and HTTP Strict Transport Security (HSTS). HTTPS encrypts data sent between your client and server. This ensures that login credentials, cookies, POST requests data and header information are not easily available to attackers.
    • -
  • Keep track of the most popular threats (the current OWASP list is here) and address the most common vulnerabilities first.
    • -
  • Use vulnerability scanning tools to perform automated security testing on your site. Later on, your very successful website may also find bugs by offering a bug bounty like Mozilla does here.
    • -
  • Only store and display data that you need. For example, if your users must store sensitive information like credit card details, only display enough of the card number that it can be identified by the user, and not enough that it can be copied by an attacker and used on another site. The most common pattern at this time is to only display the last 4 digits of a credit card number.
    • -
- -

Web frameworks can help mitigate many of the more common vulnerabilities.

- -

Summary

- -

This article has explained the concept of web security and some of the more common threats against which your website should attempt to protect. Most importantly, you should understand that a web application cannot trust any data from the web browser. All user data should be sanitized before it is displayed, or used in SQL queries and file system calls.

- -

With this article, you've come to the end of this module, covering your first steps in server-side website programming. We hope you've enjoyed learning these fundamental concepts, and you're now ready to select a Web Framework and start programming.

- -

{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}

- -

In this module

- - diff --git a/files/bn/learn/server-side/index.html b/files/bn/learn/server-side/index.html deleted file mode 100644 index 8fcc639d2c..0000000000 --- a/files/bn/learn/server-side/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Server-side website programming -slug: Learn/Server-side -tags: - - Beginner - - CodingScripting - - Intro - - Landing - - Learn - - NeedsTranslation - - Server - - Server-side programming - - Topic - - TopicStub -translation_of: Learn/Server-side ---- -
{{LearnSidebar}}
- -

The Dynamic Websites – Server-side programming topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a general introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.

- -

Most major websites use some kind of server-side technology to dynamically display data as required. For example, imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook. Displaying all of these using different static pages would be extremely inefficient, so instead such sites display static templates (built using HTML, CSS, and JavaScript), and then dynamically update the data displayed inside those templates when needed, such as when you want to view a different product on Amazon.

- -

In the modern world of web development, learning about server-side development is highly recommended.

- -

Learning pathway

- -

Getting started with server-side programming is usually easier than client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.

- -

Basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. Similarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end".

- -

You will need to understand "how the web works". We recommend that you first read the following topics:

- - - -

With that basic understanding, you'll be ready to work your way through the modules in this section. 

- -

Modules

- -

This topic contains the following modules. You should start with the first module, then go on to one of the following modules, which show how to work with two very popular server-side languages using appropriate web frameworks. 

- -
-
Server-side website programming first steps
-
This module provides technology-agnostic information about server-side website programming such as "what is it?", "how does it differ from client-side programming?", and "why is it useful?". This module also outlines some of the more popular server-side web frameworks and gives guidance on how to select the best one for your site. Lastly, an introduction to web server security is provided.
-
Django Web Framework (Python)
-
Django is an extremely popular and fully featured server-side web framework, written in Python. The module explains why Django is such a good web server framework, how to set up a development environment and how to perform common tasks with it.
-
Express Web Framework (Node.js/JavaScript)
-
Express is a popular web framework, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.
-
- -

See also

- -
-
Node server without framework
-
This article provides a simple static file server built with pure Node.js, for those of you not wanting to use a framework.
-
diff --git a/files/bn/mdn/at_ten/index.html b/files/bn/mdn/at_ten/index.html deleted file mode 100644 index eb8062239f..0000000000 --- a/files/bn/mdn/at_ten/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: মজিলা ডেভেলপার নেটওয়ার্কের ১০ বছরে পদার্পণ । -slug: MDN/At_ten -translation_of: MDN_at_ten -original_slug: MDN_at_ten ---- -
আপনার ওয়েব ডকুমেন্টেশনের ১০ বছরপূর্তি উদযাপন করুন।
- -
-
-

MDN এর ইতিহাস

- -

২০০৫ এর শুরুর দিকে কিছু আদর্শবাদী মানুষ সকল ওয়েব ডেভেলপারদের জন্য নতুন, উন্মুক্ত এবং কমিউনিটির দ্বারা তৈরি অনলাইন রিসোর্স তৈরির কাজ শুরু করেন। তাদের অসাধারন কিন্তু Their brilliant but offbeat idea grew into today’s Mozilla Developer Network—the premier resource for all open Web technologies. Ten years later, our global community is bigger than ever, and together we’re still creating documentation, sample code and learning resources for all open Web technologies, including CSS, HTML, JavaScript and everything else that makes the open Web as powerful as it is.

- -

Learn more about the history

- -

MDN এ অবদান রাখুন 

- -

For ten years, the MDN community has been documenting the open Web. From fixing simple typos to writing entire suites of an entirely new API, everyone has something to offer and no contribution is too large or too small. We have over 90,000 pages of content that have been written or translated by members of our outstanding community of Mozillians. You can become one of them.

- -

Learn more about contributing

-
- -
-
-
যখন আমি  'কেমন করে' এর পরিবর্তে 'কেন' এটা জানতে চাই   তখন MDN হল উপযুক্ত স্থান 
-— Christian Heilmann
-
-
- - - -
    -
  1. MDN at 10
    2. -
  2. The history of MDN
    3. -
  3. Contributing to MDN
    4. -
diff --git a/files/bn/mdn/contribute/getting_started/index.html b/files/bn/mdn/contribute/getting_started/index.html deleted file mode 100644 index 3eed1c3242..0000000000 --- a/files/bn/mdn/contribute/getting_started/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: মজিলা ডেভেলপার নেটওয়ার্কের সাথে পরিচিত হওয়া -slug: MDN/Contribute/Getting_started -tags: - - Documentation - - Getting Started - - Guide - - MDN - - MDN Project - - MDN পরিবারে যুক্ত হউন - - New Contributors - - গাইড - - ডকুমেন্টেশন - - নতুন অবদানকারী - - পরিচিতি -translation_of: MDN/Contribute/Getting_started ---- -
{{MDNSidebar}}

মজিলা ডেভেলপার নেটওয়ার্ক কি ?

- -

আমরা একটি মুক্ত ডেভেলপার পরিবার, যারা ওয়েব এর উত্তরোত্তর উন্নতির জন্য রিসোর্স তৈরি করছি। আমরা ব্র্যান্ড, ব্রাউজার অথবা প্ল্যাটফর্মে সীমাবদ্ধ নই। আমরা সকল ব্র্যান্ড, ব্রাউজার এবং প্ল্যাটফর্মের জন্য কাজ করি। আমাদের এখানে যে কেউ অবদান রাখতে পারে। এবং আপনাদের অবদান আমাদের আরও শক্তিশালী হতে সহায়তা করে। আমরা একসাথে ওয়েবে সৃষ্টিশীলতা আনা এবং বৃহৎ স্বার্থে কাজ চালিয়ে যেতে পারি। আপনাদেরকে সাথে নিয়েই আমরা যাত্রা শুরু করেছি, এবং থাকব।

- -

MDN (ডকুমেন্ট, ডেমো, এবং সাইট) ডেভেলপারদের একটি মুক্ত পরিবারের মাধ্যমে তৈরি করা হয়েছে। অনুগ্রহ করে আমাদের সাথে যুক্ত হোন!

- -

 যুক্ত হবার ৩ টি সহজ ধাপ

- -

১ম ধাপঃ অ্যাকাউন্ট তৈরি

- -

মজিলা ডেভেলপার নেটওয়ার্ক (সংক্ষেপে MDN) এ আপনার অবদান শুরু করার জন্য আপনাকে অ্যাকাউন্ট তৈরি করতে হবে। অ্যাকাউন্ট কিভাবে তৈরি করবেন, এ বিষয়ে জানার জন্য কিভাবে অ্যাকাউন্ট তৈরি করতে হয় এই পাতাটি দেখুন।

- -

২য় ধাপঃ কাজ নির্বাচন করা

- -

এখন যেহেতু আপনি লগ-ইন করে ফেলেছেন, নিচে উল্লেখিত তালিকায় বিভিন্ন ধরনের কাজের বিবরণ পড়ুন এবং সিদ্ধান্ত নিন যে কোনটি আপনার কাছে বেশি আকর্ষণীয় মনে হয়। আপনি আপনার অবদান রাখা শুরু করতে যেকোনো কাজ নির্বাচন করতে পারেন।

- -

৩য় ধাপঃ কাজ করা

- -

একবার যখন আপনি নির্ধারণ করে ফেলবেন যে, আপনি কি ধরনের কাজ করতে চান, তারপর একটি নির্দিষ্ট পাতা, কোডের উদাহরন ইত্যাদি কাজ করার জন্য বেছে নিন এবং করে ফেলুন!

- -

এটা একদম নিখুঁতভাবে করার জন্য চিন্তা করার প্রয়োজন নেই; অন্যান্য MDN অবদানকারীরা আপনার করা ভুলগুলো শোধরানোর জন্য এখানে রয়েছে। যদি আপনি "আসলেই" কিছু করার আগে গবেষণা করতে চান, তাহলে আপনি Sandbox পাতাটি সম্পাদনা করতে পারেন। চলার পথে স্বভাবতই আপনার মনে বিভিন্ন প্রশ্নের উদয় হবে। আপনার সব প্রশ্নের উত্তর পাওয়ার জন্য এমডিএন দলে যোগদান পাতাটি দেখতে পারেন। এখানে আমাদের মেইলিং লিস্ট এবং চ্যাট চ্যানেলের তথ্য রয়েছে।

- -

যখন আপনার কাজ শেষ হয়ে যাবে, নির্দ্বিধায় আরেকটি কাজ নির্বাচন করে কাজ করুন, অথবা নিচে MDN এ আরও যা যা করতে পারেন অংশটি দেখুন।

- -

সম্ভাব্য কাজের ধরন

- -

আপনার দক্ষতা এবং আগ্রহের উপর নির্ভর করে আপনি বিভিন্ন উপায়ে MDN এ অবদান রাখতে পারেন। এমনকি কিছু কাজ কঠিন হতে পারে, কিন্তু আমাদের অনেক সহজ/সাধারণ কাজ রয়েছে। এরমধ্যে অনেকগুলো করতে মাত্র পাঁচ মিনিট (এর থেকেও কম!) সময় লাগে। কাজ এবং তার সারসংক্ষেপের সাথে আপনি প্রত্যেক ধরনের কাজের জন্য আনুমানিক কতটা সময় লাগতে পারে, তা খুঁজে পাবেন।

- -

অপশন ১: আমি শব্দ পছন্দ করি

- -

আপনি আমাদের বর্তমান ডকুমেন্ট সমূহ পর্যালোচনা, সম্পাদনা বা সঠিক ট্যাগ বসাতে সাহায্য করতে পারেন।

- - - -
লক্ষ্য করুনঃ যদি আপনি নিবন্ধ পর্যালোচনা অথবা নতুন নিবন্ধ লেখার কাজ করেন, তবে আমরা আপনাকে স্টাইল গাইড পর্যালোচনার জন্য অনুরোধ করবো। এতে করে আপনার নিবন্ধ গুলো দৃঢ় হবে।
- -

অপশন ২: আমি কোড পছন্দ করি

- -

আমাদের আরও অনেক কোড স্যাম্পল প্রয়োজন! আপনি চাইলে আমাদের সাইটের প্ল্যাটফর্ম, Kuma ডেভেলপ করতেও সাহায্য করতে পারেন!

- - - -

অপশন ৩: আমি শব্দ এবং কোড উভয়ই পছন্দ করি

- -

আমাদের এমন কিছু কাজ রয়েছে, যাতে প্রযুক্তি ও ভাষাগত উভয় দক্ষতারই প্রয়োজন হয়। যেমনঃ নতুন একটি নিবন্ধ লেখা, প্রযুক্তিগত নির্ভুলতা যাচাইয়ের জন্য পর্যালোচনা অথবা ডকুমেন্ট অভিযোজিত করা।

- - - -

অপশন ৪: আমি আমার ভাষায় MDN চাই

- -

MDN এ করা সমস্ত লোকালাইজেশন এবং অনুবাদের কাজ আমাদের দুর্দান্ত স্বেচ্ছাসেবক পরিবার করে থাকে।

- - - -

অপশন ৫: আমি কিছু ভুল তথ্য পেয়েছি, কিন্তু আমি জানিনা এটা কিভাবে সমাধান করতে হবে

- -

ডকুমেন্টেশন বাগ ফাইল করে আপনি সমস্যার কথা জানাতে পারেন। (৫ মিনিট)

- -

এই ফিল্ডের মান গুলো ব্যবহার করুনঃ

- - - - - - - - - - - - - - - - - - - - - - - - -
Bugzilla fieldValue
productDeveloper Documentation
component[প্রাসঙ্গিক একটি জায়গা নির্বাচন করুন, অথবা আপনি যদি নিশ্চিত না হন বা সঠিকটি খুঁজে না পান, তাহলে "General" নির্বাচন করুন]
URLযেই পেজে আপনি সমস্যাটির সম্মুখীন হয়েছেন।
Descriptionসমস্যাটি সম্পর্কে আপনি যতটা জানেন তা লিখতে পারেন। অথবা সমস্যাটি বিস্তারিত বর্ণনা করতে পারেন এবং কোথায় এ সম্পর্কে বিস্তারিত তথ্য পাওয়া যাবে ইত্যাদি লিখতে পারেন। এর মধ্যে বিভিন্ন মানুষকেও অন্তর্ভুক্ত করতে পারেন ("talk to so-and-so") এবং বিভিন্ন ওয়েব লিঙ্কও দিতে পারেন।
- -

MDN এ আপনি আরও যা যা করতে পারেন

- - diff --git a/files/bn/mdn/contribute/howto/convert_code_samples_to_be_live/index.html b/files/bn/mdn/contribute/howto/convert_code_samples_to_be_live/index.html deleted file mode 100644 index 7403c4553d..0000000000 --- a/files/bn/mdn/contribute/howto/convert_code_samples_to_be_live/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: কোডের উদাহরন গুলোকে যেভাবে "জীবন্ত" করা যাবে -slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live -tags: - - Guide -translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live ---- -
{{MDNSidebar}}

MDN এর একটি "live sample" ব্যবস্থা আছে, যেখানে একটি পাতা প্রদর্শনের জন্য সরাসরি কোডের উদাহরণটিকেই ব্যবহার করা হয়। তবে এখনো এমন কিছু নিবন্ধ রয়েছে, যেগুলোতে শুধু কোড দেখানো হয়েছে, কিন্তু সেগুলো ব্যবহার করা হয়নি। এগুলো ব্যবহারোপযোগী করতে রুপান্তর করা প্রয়োজন।

- - - - - - - - - - - - - - - -
এটা কোথায় করতে হবে?যেসব নিবন্ধে NeedsLiveSample ট্যাগ রয়েছে।
এই কাজটি করার জন্য আমার কি জানা প্রয়োজন? -
    -
  • কোডের উদাহরনের উপর নির্ভর করে HTML, CSS এবং/অথবা JavaScript এর জ্ঞান থাকতে হবে।
    • -
  • নিবন্ধের মধ্যে KumaScript ম্যাক্রো সমূহ ব্যবহারের সক্ষমতা।
    • -
-
কাজটি করার জন্য কি কি ধাপ অনুসরণ করতে হবে ? -

কিভাবে লাইভ স্যাম্পল তৈরি করতে হবে সহ, লাইভ স্যাম্পল সিস্টেম সম্পর্কে সম্পূর্ণ ধারনা পেতে লাইভ স্যাম্পল সিস্টেম ব্যবহার করা নিবন্ধটি দেখুন।

-
    -
  1. NeedsLiveSample পাতায় তালিকাভুক্ত নিবন্ধ গুলো থেকে যেকোনো একটি নিবন্ধ নির্বাচন করুন, যেটাতে কাজ করতে আপনি স্বচ্ছন্দ বোধ করবেন।
    2. -
  2. কোডের উদাহরণটিকে "live" হওয়ার জন্য রুপান্তর করুন।
    3. -
  3. উদাহরণটির আউটপুট দেখানোর জন্য পূর্বে যে কোড বা ইমেজ ব্যবহার করা হয়েছিল, তা অপসারণ করুন।
    4. -
-

 

-
-

 

diff --git a/files/bn/mdn/contribute/howto/create_and_edit_pages/index.html b/files/bn/mdn/contribute/howto/create_and_edit_pages/index.html deleted file mode 100644 index c3c7f158a3..0000000000 --- a/files/bn/mdn/contribute/howto/create_and_edit_pages/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: পাতা তৈরি ও সম্পাদনা -slug: MDN/Contribute/Howto/Create_and_edit_pages -tags: - - NeedsReview -translation_of: MDN/Contribute/Howto/Create_and_edit_pages -original_slug: MDN/Contribute/Creating_and_editing_pages ---- -
{{MDNSidebar}}

মোজিলা ডেভেলপার নেটওয়ার্ক এর মৌলিক দুটি কাজ যা প্রায় সব অবদানকারী করে থাকে, তা হচ্ছে বর্তমান পৃষ্ঠাগুলো সম্পাদনা/সমৃদ্ধ করা এবং নতুন পৃষ্ঠা তৈরি করা। এই নিবন্ধটি সম্পাদনা ও নতুন পৃষ্ঠা তৈরি করার একেবারে মৌলিক কিছু কৌশল নিয়ে লেখা।

-

বর্তমান পৃষ্ঠাগুলো সমৃদ্ধকরণ

-

সম্পাদনা ও সমৃদ্ধ করা সহজ। পাতার উপরে শিরোনামের ডান পাশে থাকা নীল "Edit" বাটনে ক্লিক করলেই সম্পাদনার পাতা চলে আসবে। সম্পাদনার পাতাটিতে আপনি বিভিন্ন রকমের ফরম্যাটিং অপশন পাবেন। সেই অপশন গুলো ব্যবহার করে আপনি পাতায় থাকা সরাসরি তথ্য যোগ করা ও মোছার কাজ করতে পারবেন। অনুচ্ছেদ যুক্ত করা, লেখা মোছা, শিরোনাম যুক্ত করা সহ লেখা ও সম্পাদনা সংশ্লিষ্ট আরও মৌলিক কিছু ফাংশন এই পৃষ্ঠায় পাবেন।

-

পরিবর্তন নিরীক্ষণ

-

আপনার করা পরিবর্তন সমূহ দেখতে কেমন লাগবে, তা বোঝার জন্য পৃষ্ঠার উপরে ডান পাশে নীল রঙের "Preview changes" বাটনটি ক্লিক করুন। এরপর একটি নতুন/আলাদা ট্যাবে নিরীক্ষণ পৃষ্ঠা আসবে, যেখানে আপনার করা পরিবর্তন গুলো সহ পৃষ্ঠাটি (যে পৃষ্ঠাটি সম্পাদনা করছেন) দেখতে কেমন হবে, তা দেখতে পাবেন। যতবার আপনি এই বাটন চাপবেন, ততবারই এটি আপনার প্রিভিউ পৃষ্ঠা সর্বশেষ পরিবর্তন সহ পুনরায় লোড করবে। তবে মনে রাখবেন, প্রিভিউ পৃষ্ঠা আপনার পরিবর্তন গুলোকে আপাতত হিসেবে দেখাবে; সংরক্ষণ করবে না। তাই কখনো প্রিভিউ পাতা থেকে সেভ না করে বের হবেন না। প্রিভিউ পাতা বা এডিট পাতা থেকে চলে যাওয়ার আগে অবশ্যই সর্বশেষ পরিবর্তন সংরক্ষনের জন্য Save Changes চাপতে হবে।

-

পরিমার্জন/সংশোধন মন্তব্য

-

সংরক্ষণপূর্ব নিরীক্ষণ বা Preview দেখার পর আপনি আপনার করা পরিবর্তনগুলো সংরক্ষণ করবেন। সংরক্ষণ করার আগে পেজের নিচে থাকা মন্তব্যের জায়গায় আপনি কেন সম্পাদনা করেছেন, তা লিখুন। আপনার মন্তব্য থেকে অন্যান্য অবদানকারীরা আপনার সম্পাদনা সম্পর্কে সহজে ধারনা পাবে। মনেকরুন, আপনি হয়তো নতুন কোনো অনুচ্ছেদ যুক্ত করেছেন, বা কোন প্রবন্ধের ভাবকে আরও সহজে বোঝার জন্য কয়েকটি শব্দ পরিবর্তন করেছেন, অথবা অপ্রয়োজনীয় কিছু তথ্য মুছে দিয়েছেন। এরকম পরিবর্তন কেন করা প্রয়োজন, এ সম্পর্কে আপনি অবশ্যই মন্তব্য করবেন।

-

ট্যাগ

-

একটি পৃষ্ঠার কনটেন্ট সহজে বুঝতে ও খুঁজে পেতে ট্যাগ ব্যবহার করা হয়। আপনি চাইলে ট্যাগ যুক্ত বা অপসারণ করতে পারেন। আর এই ট্যাগ যুক্ত বা অপসারনের প্রক্রিয়াটিও যেহেতু সংশোধনের পর্যায়ে পড়ে, তাই এই কাজের সময়েও মন্তব্য করে আপনার কাজের নিরপেক্ষতা ও প্রয়োজনীয়তার স্বপক্ষে যুক্তি দেখাবেন।

-

মতামত প্রয়োজন?

-

যদি আপনি চান যে একজন দক্ষ বা অভিজ্ঞ অবদানকারী আপনার করা সম্পাদনা-সংশোধন দেখুক এবং মতামত জানান, তাহলে আপনি একটি টেকনিক্যাল (কোড, এপিআই অথবা প্রযুক্তি সম্বন্ধে) রিভিউ-এর জন্য আবেদন করতে পারেন। অথবা একটি সম্পাদকীয় রিভিউ (প্রবন্ধ, ব্যাকরণ এবং কনটেন্ট) অথবা একটি টেম্পলেট রিভিউ (কুমাস্ক্রিপ্ট কোডের জন্য) এর জন্যও আবেদন করতে পারেন। তবে এজন্য আপনাকে উক্ত পাতাটি সংরক্ষনের পূর্বে বক্সটি টিক দিয়ে রাখতে হবে।

-

ফাইল সংযুক্তি

-

যদি আপনি কোন ফাইল সংযুক্ত করতে চান, বা আপনার নিবন্ধটি সহজে বোঝার জন্য কোন ছবি সংযুক্ত করতে চান, তাহলে সেটা পৃষ্ঠার একদম শেষের দিকে করতে পারেন।

-

সংরক্ষণ, বাতিল অথবা সম্পাদনা চালিয়ে যাওয়া

-

যখন আপনার সম্পাদনা শেষ হয়ে যাবে এবং আপনি আপনার প্রিভিউ দেখে সন্তুষ্ট হবেন, তখন আপনি আপনার কাজ এবং মন্তব্য পেজের উপরে থাকা সবুজ "Save changes" লেখা বোতাম চেপে সংরক্ষণ করতে পারেন। কিন্তু পরক্ষনে যদি আবার আপনার মনে হয় যে কাজটা ঠিক হয়নি, তাহলে আপনি পেজের উপরে থাকা লাল রঙের "Discard changes" লেখা বোতাম চেপে আগের করা কাজগুলো বাতিল করতে পারেন।

-

নতুন পৃষ্ঠা তৈরি করা

-

নতুন সাব পেজ বোতাম; লিঙ্ক ফলো করা; পেজ নকল করা।

-

পেজ টাইপ নিবন্ধের লিঙ্ক।

diff --git a/files/bn/mdn/contribute/howto/index.html b/files/bn/mdn/contribute/howto/index.html deleted file mode 100644 index 650f2b8f59..0000000000 --- a/files/bn/mdn/contribute/howto/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: How-to guides -slug: MDN/Contribute/Howto -tags: - - Documentation - - Landing - - MDN - - NeedsTranslation - - TopicStub -translation_of: MDN/Contribute/Howto ---- -
{{MDNSidebar}}

These articles provide step-by-step guides to accomplishing specific goals when contributing to MDN.

-

{{LandingPageListSubpages}}

diff --git a/files/bn/mdn/contribute/index.html b/files/bn/mdn/contribute/index.html deleted file mode 100644 index 7da2ed6c9b..0000000000 --- a/files/bn/mdn/contribute/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: MDN এ অবদান রাখা -slug: MDN/Contribute -tags: - - Documentation - - Guide - - Landing - - MDN - - NeedsTranslation - - TopicStub -translation_of: MDN/Contribute ---- -
{{MDNSidebar}}

স্বাগতম! এই পেইজ দেখার মাধ্যমে MDN এর অবদানকারী হওয়ার পথে আপনি আপনার প্রথম পদক্ষেপ নিলেন। স্টাইল গাইড, আমাদের এডিটর এবং টুলস ব্যবহার করার গাইড এবং আরও অনেক কিছু সহ MDN এ অবদান রাখার সকল ক্ষেত্র সম্পর্কে এই গাইড এ লেখা আছে।

- -
-
-

অবদানকারীদের জন্য গাইড

- -
-
 শুরু করা
-
মজিলাতে আপনার প্রথম অবদান রাখতে ও সেট আপ হতে সাহায্যকারী একটি কুইক স্টার্ট গাইড এটি।
-
কনটেন্ট এবং স্টাইল গাইড
-
     MDN এর কনটেন্ট এবং স্টাইল গাইড লেখার স্টাইল, পেইজ লে-আউট এবং কনটেন্ট এর স্টাইল সম্পর্কে বিশদ তথ্য দেয়, যাতে করে আপনি যেই কনটেন্টটি লিখবেন তা MDN এর অন্যান্য কনটেন্ট এর সাথে খাপ খেয়ে যায়।
-
 
-
 এডিটর গাইড
-
MDN এর এডিটর ব্যবহার করার জন্য একটি পূর্ণাঙ্গ গাইড।   
-
Terminology and conventions
-
Our terminology and conventions guide provides information you can use to ensure that you use the correct terminology to describe things.
-
Working with the MDN community
-
A guide to working with our community, finding help, and connecting with the people with the answers to the questions that arise while you contribute to MDN.
-
Frequently asked questions
-
Tips and answers to the most common questions about contributing to MDN.
-
- -
-
Contributing to Kuma
-
A guide to contributing to the Kuma project. Kuma is the platform that powers the MDN Web site.
-
-
- -
-

How to...

- -

Our how-to guides provide step-by-step instructions to help you accomplish specific tasks when contributing to MDN.

- -
-
How to document a CSS property
-
A guide to writing documentation of CSS properties. All CSS property documents should match the style and layout described in this article.
-
How to document an HTML element
-
This guide to documenting HTML elements will ensure that the documents you write match others on MDN.
-
How to properly tag pages
-
This guide to tagging pages provides information about our standards for tagging, including lists of tags that have standard meanings on MDN. Following this guide will ensure that your content is properly categorized, more easily searchable, and that our search filtering mechanism works properly with your articles.
-
How to interpret specifications
-
This guide will help you to properly interpret standard Web specifications; being able to read these can be an art form, and knowing how to do it will help you produce better documentation.
-
- -

Localization

- -
-
Localization guided tour
-
This guided tour will teach you how to localize content on MDN.
-
Localization guide
-
This guide provides details about the localization process for MDN content.
-
Localization projects
-
Find the localization project for your language—or, if there isn't one, learn how to start a new one!
-
-
-
- -

 

diff --git a/files/bn/mdn/guidelines/index.html b/files/bn/mdn/guidelines/index.html deleted file mode 100644 index 11412724a1..0000000000 --- a/files/bn/mdn/guidelines/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: MDN content and style guides -slug: MDN/Guidelines -tags: - - Documentation - - Landing - - MDN - - NeedsTranslation - - TopicStub -translation_of: MDN/Guidelines ---- -
{{MDNSidebar}}

These guides provide details on how MDN documentation should be written and formatted, as well as how our code samples and other content should be presented. By following these guides, you can ensure that the material you produce is clean and easy to use.

-

{{LandingPageListSubpages}}

diff --git a/files/bn/mdn/guidelines/writing_style_guide/index.html b/files/bn/mdn/guidelines/writing_style_guide/index.html deleted file mode 100644 index 9581225c77..0000000000 --- a/files/bn/mdn/guidelines/writing_style_guide/index.html +++ /dev/null @@ -1,555 +0,0 @@ ---- -title: MDN style guide -slug: MDN/Guidelines/Writing_style_guide -tags: - - JavaScript - - MDN - - Project -translation_of: MDN/Guidelines/Writing_style_guide -original_slug: MDN/Guidelines/Style_guide ---- -
{{MDNSidebar}}
- -

In an effort to display documentation in an organized, standardized and easy-to-read manner, the Mozilla Developer Network style guide describes how text should be organized, spelled, formatted, and so on. These are guidelines rather than strict rules. We are more interested in content than formatting, so don't feel obligated to learn the style guide before contributing. Do not be upset or surprised, however, if an industrious volunteer later edits your work to conform to this guide.

- -

If you're looking for specifics of how a given type of page should be structured, see the MDN page layout guide.

- -

The language aspects of this guide apply primarily to English-language documentation. Other languages may have (and are welcome to create) their own style guides. These should be published as subpages of the localization team's page.

- -

For style standards that apply to content written for sites other than MDN, refer to the One Mozilla style guide.

- -

Basics

- -

Page titles

- -

Page titles are used in search results and also used to structure the page hierarchy in the breadcrumb list at the top of the page. The page title (which is displayed at the top of the page and in the search results) can be different from the page "slug," which is the portion of the page's URL following "<locale>/docs/".

- -

Title and heading capitalization

- -

Page titles and section headings should use sentence-style capitalization (only capitalize the first word and proper nouns) rather than headline-style capitalization:

- -
    -
  • Correct: "একটি নতুন পদ্ধতি তৈরি করা হয় জাভাস্ক্রিপ্ট  বসানোর জন্য"
    • -
  • Incorrect: "A New Method for Creating JavaScript Rollovers"
    • -
- -

We have many older pages that were written before this style rule was established. Feel free to update them as needed if you like. We're gradually getting to them.

- -

Choosing titles and slugs

- -

Page slugs should be kept short; when creating a new level of hierarchy, the new level's component in the slug should generally just be a word or two.

- -

Page titles, on the other hand, may be as long as you like, within reason, and they should be descriptive.

- -

Creating new subtrees

- -

When you need to add a number of articles about a topic or topic area, you will typically do so by creating a landing page, then adding subpages for each of the individual articles. The landing page should open with a paragraph or two describing the topic or technology, then provide a list of the subpages with descriptions of each page. You can automate the insertion of pages into the list using a number of macros we've created.

- -

For example, consider the JavaScript guide, which is structured like this:

- - - -

Try to avoid putting your article at the top of the hierarchy, which slows the site down and makes search and site navigation less effective.

- -

Sections, paragraphs, and newlines

- -

Use heading levels in decreasing order: {{HTMLElement("h2")}} then {{HTMLElement("h3")}} then {{HTMLElement("h4")}}, without skipping levels. H2 is the highest level allowed because H1 is reserved for the page title. If you need more than three or four levels of headers you should consider breaking up the article into several smaller articles with a landing page, linking them together using the {{TemplateLink("Next")}}, {{TemplateLink("Previous")}}, and {{TemplateLink("PreviousNext")}} macros.

- -

The enter (or return) key on your keyboard starts a new paragraph. To insert a newline without a space, hold down the shift key while pressing enter.

- -

Text formatting and styles

- -

Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.

- -
Note: The "Note" style is used to call out important notes, like this one.
- -
Warning: Similarly, the "Warning" style creates warning boxes like this.
- -

Unless specifically instructed to do so, do not use the HTML style attribute to manually style content. If you can't do it using a predefined class, drop into {{IRCLink("mdn")}} and ask for help.

- -

Code sample style and formatting

- -

Tabs and line breaks

- -

Use two spaces per tab in all code samples. Code should be indented cleanly, with open-brace ("{") characters on the same line as the statement that opens the block. For example:

- -
if (condition) {
-  /* handle the condition */
-} else {
-  /* handle the "else" case */
-}
-
- -

Long lines shouldn't be allowed to stretch off horizontally to the extent that they require horizontal scrolling to read. Instead, break at natural breaking points. Some examples follow:

- -
if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION
-       || class.YET_ANOTHER_CONDITION ) {
-  /* something */
-}
-
-var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-service;1"]
-                           .createInstance(Components.interfaces.nsIToolkitProfileService);
-
- -

Inline code formatting

- -

Use the "Code" button (labeled with two angle brackets "<>") to apply inline code-style formatting to function names, variable names, and method names (this uses the {{HTMLElement("code")}} element). For example, "the frenchText() function".

- -

Method names should be followed by a pair of parentheses: doSomethingUseful(). This helps to differentiate methods from other code terms.

- -

Syntax highlighting

- -

Screenshot of the "syntax highlighting" menu.Entire lines (or multiple lines) of code should be formatted using syntax highlighting rather than the {{HTMLElement("code")}} element. Click the "pre" button in the toolbar to create the preformatted content box in which you'll then write your code. Then, with the text entry cursor inside the code box, select the appropriate language from the language list button to the right of the "pre" button, as seen in the screenshot to the right. The following example shows text with JavaScript formatting:

- -
-
for (var i = 0, j = 9; i <= 9; i++, j--)
-  document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);
-
- -

If no appropriate transformation is available, use the pre tag without specifying a language ("No Highlight" in the language menu).

- -
x = 42;
- -

Styling HTML element references

- -

There are various specific rules to follow when writing about HTML elements, in order to consistently describe the various components of elements, and to ensure that they're properly linked to detailed documentation.

- -
-
Element names
-
Use the {{TemplateLink("HTMLElement")}} macro, which creates a link to the page for that element. For example, writing \{{HTMLElement("title")}} produces "{{HTMLElement("title")}}". If you don't want to create a link, enclose the name in angle brackets and use "Code (inline)" style (e.g., <title>).
-
Attribute names
-
Use bold face.
-
Attribute definitions
-
Use the {{TemplateLink("htmlattrdef")}} macro (e.g., \{{htmlattrdef("type")}}) for the definition term, so that it can be linked to from other pages, then use the {{TemplateLink("htmlattrxref")}} macro (e.g., \{{htmlattrxref("attr","element")}}) to reference attribute definitions.
-
Attribute values
-
Use "Code (inline)" style, and do not use quotation marks around strings, unless needed by the syntax of a code sample. E.g.: When the type attribute of an <input> element is set to email or tel ...
-
Labeling attributes
-
Use labels like {{HTMLVersionInline(5)}} thoughtfully. For example, use them next to the bold attribute name but not for every occurrence in your body text.
-
- -

Latin abbreviations

- -

In notes and parentheses

- -
    -
  • Common Latin abbreviations (etc., i.e., e.g.) may be used in parenthetical expressions and in notes. Use periods in these abbreviations. -
      -
    • Correct: Web browsers (e.g. Firefox) can be used ...
      • -
    • Incorrect: Web browsers e.g. Firefox can be used ...
      • -
    • Incorrect: Web browsers, e.g. Firefox, can be used ...
      • -
    • Incorrect: Web browsers, (eg: Firefox) can be used ...
      • -
    -
    • -
- -

In running text

- -
    -
  • In regular text (i.e. text outside of notes or parentheses), use the English equivalent of the abbreviation. -
      -
    • Correct: ... web browsers, and so on.
      • -
    • Incorrect: ... web browsers, etc.
      • -
    • Correct: Web browsers such as Firefox can be used ...
      • -
    • Incorrect: Web browsers e.g. Firefox can be used ...
      • -
    -
    • -
- -

Meanings and English equivalents of Latin abbreviations

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AbbrevLatinEnglish
cf.confercompare
e.g.exempli gratiafor example
et al.et aliiand others
etc.et ceteraand so forth, and so on
i.e.id estthat is, in other words
N.B.nota benenote well
P.S.post scriptumpostscript
- -
-

Note: Always consider whether it's truly beneficial to use a Latin abbreviation. Some of these are used so rarely that many readers won't understand the meaning, and others are often confused with one another. And be sure that you use them correctly, if you choose to do so. For example, be careful not to confuse "e.g." with "i.e.", which is a common error.

-
- -

Acronyms and abbreviations

- -

Capitalization and periods

- -

Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".

- -
    -
  • Correct: XUL
    • -
  • Incorrect: X.U.L.; Xul
    • -
- -

Expansion

- -

On the first mention of a term on a page, expand acronyms likely to be unfamiliar to users. When in doubt, expand it, or, better, link it to the article or glossary entry describing the technology.

- -
    -
  • Correct: "XUL (XML User Interface Language) is Mozilla's XML-based language..."
    • -
  • Incorrect: "XUL is Mozilla's XML-based language..."
    • -
- -

Plurals of acronyms and abbreviations

- -

For plurals of acronyms or abbreviations, add s. Don't use an apostrophe. Ever. Please.

- -
    -
  • Correct: CD-ROMs
    • -
  • Incorrect: CD-ROM's
    • -
- -

Capitalization

- -

Use standard English capitalization rules in body text, and capitalize "World Wide Web" and "Web".

- -

Contractions

- -

Use contractions (e.g. "don't", "can't", "shouldn't") if you prefer. We're not that formal!

- -

Pluralization

- -

Use English-style plurals, not the Latin- or Greek-influenced forms.

- -
    -
  • Correct: syllabuses, octopuses
    • -
  • Incorrect: syllabi, octopi
    • -
- -

Hyphenation

- -

Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.

- -
    -
  • Correct: email, re-elect, co-op
    • -
  • Incorrect: e-mail, reelect, coop
    • -
- -

Gender-neutral language

- -

It is a good idea to use gender-neutral language in any kind of writing where gender is irrelevant to the subject matter, to make the text as inclusive as possible. So for example, if you are talking about the actions of a specific man, usage of he/his would be fine, but if the subject is a person of either gender, he/his isn't really appropriate.
-
- Let's take the following example:

- -
-

A confirmation dialog appears, asking the user if he allows the web page to make use of his web cam.

-
- -
-

A confirmation dialog appears, asking the user if she allows the web page to make use of her web cam.

-
- -

Both versions in this case are gender-specific. This could be fixed by using gender-neutral pronouns:

- -
-

A confirmation dialog appears, asking the user if they allow the web page to make use of their web cam.

-
- -
-

Note: MDN allows the use of this very common but not technically correct syntax, in order to make up for the lack of a neutral gender in English. The use of the third-person plural as a neutral gender pronoun (that is, using "they," them", "their," and "theirs") is accepted practice, commonly known as "singular 'they.'"

-
- -

You can use both genders:

- -
-

A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.

-
- -

making the users plural:

- -
-

A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.

-
- -

The best solution, of course, is to just rewriting to eliminate the pronouns completely:

- -
-

A confirmation dialog appears, requesting the user's permission for web cam access.

-
- -
-

A confirmation dialog box appears, which asks the user for permission to use the web cam.

-
- -

The last way of dealing with the problem is arguably better, as it is not only grammatically more correct but removes some of the complexity associated with dealing with genders across different languages that may have wildly varying gender rules. This can make translation easier, both for readers reading English, then translating it into their own language as they read, and for localizers translating articles into their own language.

- -

Numbers and numerals

- -

Dates

- -

For dates (not including dates in code samples) use the format "January 1, 1990".

- -
    -
  • Correct: February 24, 2006
    • -
  • Incorrect: February 24th, 2006; 24 February, 2006; 24/02/2006
    • -
- -

Alternately, you can use the YYYY/MM/DD format.

- -
    -
  • Correct: 2006/02/24
    • -
  • Incorrect: 02/24/2006; 24/02/2006; 02/24/06
    • -
- -

Decades

- -

For decades, use the format "1990s". Don't use an apostrophe.

- -
    -
  • Correct: 1990s
    • -
  • Incorrect: 1990's
    • -
- -

Plurals of numerals

- -

For plurals of numerals add "s". Don't use an apostrophe.

- -
    -
  • Correct: 486s
    • -
  • Incorrect: 486's
    • -
- -

Commas

- -

In running text, use commas only in five-digit and larger numbers.

- -
    -
  • Correct: 4000; 54,000
    • -
  • Incorrect: 4,000; 54000
    • -
- -

Punctuation

- -

Serial comma

- -

Use the serial comma. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.

- -
    -
  • Correct: I will travel on trains, planes, and automobiles.
    • -
  • Incorrect: I will travel on trains, planes and automobiles.
    • -
- -
-

Note: This is in contrast to the One Mozilla style guide, which specifies that the serial comma is not to be used. MDN is an exception to this rule.

-
- -

Spelling

- -

For words with variant spellings, always use the first entry at Answers.com. Do not use variant spellings.

- -
    -
  • Correct: localize, honor
    • -
  • Incorrect: localise, honour
    • -
- -

Terminology

- -

Obsolete vs. deprecated

- -

It's important to be clear on the difference between the terms obsolete and deprecated.

- -
-
Obsolete:
-
On MDN, the term obsolete marks an API or technology that is not only no longer recommended, but also no longer implemented in the browser. For Mozilla-specific technologies, the API is no longer implemented in Mozilla code; for Web standard technology, the API or feature is no longer supported by current, commonly-used browsers.
-
Deprecated:
-
On MDN, the term deprecated marks an API or technology that is no longer recommended, but is still implemented and may still work. These technologies will in theory eventually become obsolete and be removed, so you should stop using them. For Mozilla-specific technologies, the API is still supported in Mozilla code; for Web standard technology, the API or feature has been removed or replaced in a recent version of the defining standard.
-
- -

HTML elements

- -

Use "elements" to refer to HTML and XML elements, rather than "tags". In addition, they should almost always be wrapped in "<>", and should be in the {{HTMLElement("code")}} style. Also, at least the first time you reference a given element in a section should use the {{TemplateLink("HTMLElement")}} macro, to create a link to the documentation for the element (unless you're writing within that element's reference document page).

- -
    -
  • Correct: the {{HTMLElement("span")}} element
    • -
  • Incorrect: the span tag
    • -
- -

User interface actions

- -

In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.

- -
    -
  • Correct: Click the Edit button.
    • -
  • Incorrect: Click Edit.
    • -
- -

Voice

- -

While the active voice is generally preferred, the passive voice is also acceptable, given the informal feel of our content. Try to be consistent, though.

- -

Wiki markup and usage

- - - -

To automatically create a link to a Bugzilla bug, use this template:

- -
\{{Bug(322603)}}
-
- -

This results in:

- -

{{Bug(322603)}}

- -

For WebKit bugs, you can use this template:

- -
\{{Webkitbug("322603")}}
-
- -

This results in:

- -

{{Webkitbug("322603")}}

- -

Page tags

- -

Tags provide meta information about a page and/or indicate that a page has specific improvements needed to its content. Every page in the wiki should have tags. You can find details on tagging in our How to properly tag pages guide.

- -

The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:

- -

Screenshot of the UX for adding and removing tags on MDN

- -

To add a tag, click in the edit box at the end of the tag list and type the tag name you wish to add. Tags will autocomplete as you type. Press enter (or return) to submit the new tag. Each article may have as many tags as needed. For example, an article about using JavaScript in AJAX programming might have both "JavaScript" and "AJAX" as tags.

- -

To remove a tag, simply click the little "X" icon in the tag.

- -

Tagging pages that need work

- -

In addition to using tags to track information about the documentation's quality and content, we also use them to mark articles as needing specific types of work.

- -

Tagging obsolete pages

- -

Use the following tags for pages that are not current:

- -
    -
  • Junk: Use for spam, pages created by mistake, or content that is so bad that it should be deleted. Pages with this tag are deleted from time to time.
    • -
  • Obsolete: Use for content that is technically superceded, but still valid in context. For example an HTML element that is obsolete in HTML5 is still valid in HTML 4.01. You can also use the {{TemplateLink("obsolete_header")}} macro to put a prominent banner on the topic.
    • -
  • Archive: Use for content that is technically superceded and no longer useful. If possible, add a note to the topic referring readers to a more current topic. For example, a page that describes how to use the Mozilla CVS repository should refer readers to a current topic on using Mercurial repos. (If no corresponding current topic exists, use the NeedsUpdate tag, and add an explanation on the Talk page.) Pages with the Archive tag are eventually moved from the main content of MDN to the Archive section.
    • -
- -

SEO summary

- -

The SEO summary is a very short summary of the page. It will be reported as a summary of the article to robots crawling the site, and will then appear in search results for the page. It is also used by macros that automate the construction of landing pages inside MDN itself.

- -

By default, the first pagragraph of the page is used as the SEO summary. However you can override this behavior by marking a section with the "SEO summary" style in the WYSIWYG editor.

- -

Landing pages

- -

Landing pages are pages at the root of a topic area of the site, such as the main CSS or HTML pages. They have a standard format that consists of three areas:

- -
    -
  1. A brief (typically one paragraph) overview of what the technology is and what it's used for. See {{anch("Writing a landing page overview")}} for tips.
    2. -
  2. A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.
    3. -
  3. An optional "Browser compatibility" section at the bottom of the page.
    4. -
- -

Creating a page link list

- -

The link list section of an MDN landing page consists of two columns. These are created using the following HTML:

- -
<div class="row topicpage-table">
-  <div class="section">
-    ... left column contents ...
-  </div>
-  <div class="section">
-    ... right column contents ...
-  </div>
-</div>
- -

The left-hand column should be a list of articles, with an <h2> header at the top of the left column explaining that it's a list of articles about the topic (for example "Documentation and tutorials about foo"); this header should use the CSS class "Documentation". Below that is a <dl> list of articles, with each article's link in a <dt> block and a brief one-or-two sentence summary of the article in the corresponding <dd> block.

- -

The right-hand column should contain one or more of the following sections, in order:

- -
-
Getting help from the community
-
This should provide information on Matrix chat rooms and mailing lists available about the topic. The heading should use the class "Community".
-
Tools
-
A list of tools the user can look at to help with the use of the technology described in this section of MDN. The heading should use the class "Tools".
-
Related topics
-
A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".
-
- -

<<<finish this once we finalize the landing page standards>>>

- -

Using, inserting images

- -

It's sometimes helpful to provide an image in an article you create or modify, especially if the article is very technical. To include an image:

- -
    -
  1. Attach the desired image file to the article (at the bottom of every article in edit mode)
    2. -
  2. Create an image in the WYSIWYG editor
    3. -
  3. In the WYSIWYG editor in the drop-down list listing attachments, select the newly created attachment which is your image
    4. -
  4. Press OK.
    5. -
- -

Other References

- -

Preferred style guides

- -

If you have questions about usage and style not covered here, we recommend referring to the Economist style guide or, failing that, the Chicago Manual of Style.

- -

Preferred dictionary

- -

For questions of spelling, please refer to Answers.com. The spell-checker for this site uses American English. Please do not use variant spellings (e.g., use honor rather than honour).

- -

We will be expanding the guide over time, so if you have specific questions that aren't covered in this document, please send them to the MDC mailing list or project lead so we know what should be added.

- -

MDN-specific

- - - -

Language, grammar, spelling

- -

If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.

- - diff --git a/files/bn/mdn/index.html b/files/bn/mdn/index.html deleted file mode 100644 index 27ba761d4b..0000000000 --- a/files/bn/mdn/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: MDN প্রজেক্ট -slug: MDN -tags: - - Landing - - MDN Meta - - 'l10n:priority' -translation_of: MDN ---- -
{{MDNSidebar}}
- -

MDN Web Docs is a wiki on which we document the open Web, Mozilla technologies, and other developer topics. Anyone is welcome to add and edit content. You don't need to be a programmer or know a lot about technology; there are many different tasks that need to be performed, from the simple (proof-reading and correcting typos) to the complex (writing API documentation).

- -
-

The mission of MDN Web Docs is to provide developers with the information they need to easily build projects on the web platform. We invite you to help!

-
- -

We need your help! It's easy. Don't worry about asking for permission or about making mistakes. On the other hand, please get to know the MDN community; we're here to help you! The documentation below should get you started, but don't hesitate to join the discussion in the MDN Web Docs chat room.

- -
    -
  • Newcomer quick start - -

    Are you new to MDN and want to learn how to help make it better? Start here!

    -
    • -
  • I'm an advanced user -

    Access our full, in-depth guide for MDN contributors to learn more once you've gotten comfortable.

    -
    • -
  • Spread the word -

    If you love MDN, help get the word out! Find art, tools, and guides for promoting MDN.

    -
    • -
- -

See also

- - diff --git a/files/bn/mdn/structures/index.html b/files/bn/mdn/structures/index.html deleted file mode 100644 index b8df701dac..0000000000 --- a/files/bn/mdn/structures/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Document structures -slug: MDN/Structures -tags: - - Landing - - MDN Meta - - NeedsTranslation - - Structures - - TopicStub -translation_of: MDN/Structures ---- -
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
- -

Throughout MDN, there are various document structures that are used repeatedly, to provide consistent presentation of information in MDN articles. Here are articles describing these structures, so that, as an MDN author, you can recognize, apply, and modify them as appropriate for documents you write, edit, or translate.

- -

{{LandingPageListSubPages()}}

diff --git a/files/bn/mdn/structures/macros/index.html b/files/bn/mdn/structures/macros/index.html deleted file mode 100644 index 6240e47a6b..0000000000 --- a/files/bn/mdn/structures/macros/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Macros -slug: MDN/Structures/Macros -tags: - - Guide - - Kuma - - KumaScript - - MDN Meta - - NeedsTranslation - - Structures - - TopicStub -translation_of: MDN/Structures/Macros ---- -
{{MDNSidebar}}

The Kuma platform on which MDN runs provides a powerful macro system, KumaScript, which makes it possible to do a wide variety of things automatically. This article provides information on how to invoke MDN's macros within articles.

- -

The KumaScript guide provides an in-depth look at how to use macros on MDN, so this section is more of a brief overview. If you've already read the section above on {{SectionOnPage("/en-US/docs/Project:MDN/Contributing/Editor_guide/Links", "Using link macros")}}, you're already at least a little bit familiar with the concept.

- -

How macros are implemented

- -

Macros on MDN are implemented using server-executed JavaScript code, interpreted using Node.js. On top of that we have a number of libraries we've implemented that provide wiki-oriented services and features to let macros interact with the wiki platform and its contents. If you're interested in learning more, see the KumaScript guide; the KumaScript reference provides details on the libraries and other KumaScript APIs we've implemented.

- -

Using a macro in content

- -

To actually use a macro, you simply enclose the call to the macro in a pair of double-braces, with its parameters, if any, enclosed in parentheses; that is:

- -
\{{macroname(parameter-list)}}
- -

A few notes about macro calls:

- -
    -
  • Macro names are case-sensitive, but some attempt is made to correct for common capitalization errors; you may use all lowercase even if the macro name uses caps within it, and you may capitalize a macro whose name normally starts with a lower-case letter.
    • -
  • Parameters are separated by commas.
    • -
  • If there are no parameters, you may leave out the parentheses entirely; \{{macroname()}} and \{{macroname}} are identical.
    • -
  • Numeric parameters can be in quotes, or not. It's up to you (however, if you have a version number with multiple decimals in it, it needs to be in quotes).
    • -
  • If you get errors, review your code carefully. If you still can't figure out what's going on, see Troubleshooting KumaScript errors for help.
    • -
- -

Macros are heavily cached; for any set of input values (both parameters and environmental values such as the URL for which the macro was run), the results are stored and reused. This means that the macro is only actually run when the inputs change.

- -
-

Note: You can force all the macros on a page to be re-evaluated by force-refreshing the page in your browser (that is, a shift-reload).

-
- -

Macros can be as simple as just inserting a larger block of text or swapping in contents from another part of MDN, or as complex as building an entire index of content by searching through parts of the site, styling the output, and adding links.

- -

You can read up on our most commonly-used macros on the Commonly-used macros page; also, there's a complete list of all macros here. Most macros have documentation built into them, as comments at the top.

- -

{{EditorGuideQuicklinks}}

diff --git a/files/bn/mozilla/add-ons/index.html b/files/bn/mozilla/add-ons/index.html deleted file mode 100644 index 9bbf030bdc..0000000000 --- a/files/bn/mozilla/add-ons/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: অ্যাড-অনস -slug: Mozilla/Add-ons -tags: - - Add-ons - - NeedsTranslation - - TopicStub -translation_of: Mozilla/Add-ons ---- -
মোজিলা অ্যাপ্লিকেশান গুলোর পরিবর্তন এবং পরিবর্ধন 
- -

অ্যাড-অন, গেকো ভিত্তিক অ্যাপ্লিকেশান যেমন: ফায়ারফক্স, সীমাঙ্কী এবং থান্ডারবার্ড এ নতুন কার্যকারিতা যোগ করে। মূলত দুই ধরণের অ্যাড-অন আছে: এক্সটেনশন, অ্যাপ্লিকেশানে নতুন ধরণের ফিচার যুক্ত করে, আর থিম অ্যাপ্লিকেশানের ইউজার ইন্টারফেস পরিবর্তন করে। 

- -

এক্সটেনশন এবং থিম উভয়ের জন্যই মোজিলা addons.mozilla.org তে একটি রিপোজিটরি পরিচালনা করে যা এএমও  নামে পরিচিত। আপনি যখন এএমও তে অ্যাড-অন জমা দেন , তখন সেগুলোকে পর্যালোচনা করা হয় তারপর সেগুলো পর্যালোচনাতে উত্তীর্ণ হলে ব্যাবহারকারির কাছে পৌঁছে।আপনাকে এএমও তে অ্যাড-অন জমা দিতে হবেনা, কিন্তু আপনি যদি দেন, তাহলে ব্যাবহারকারিরা আত্মবিশ্বাসী হতে পারেন যে, সেগুলো রিভিও (পর্যালোচনা) করা হয়েছে । এবং আপনি দরকারি অ্যাড-অন এর উৎস হিসেবে এএমও এর দৃশ্যমানতা এর সুবিধা নিতে পারেন। 

- -

যেসকল অ্যাপ্লিকেশান অ্যাড-অন কে হোস্ট করে অ্যাড-অন তাদের আচরণকে প্রবলভাবে প্রভাবিত করতে পারে। আমরা এক ঝাঁক দিকনির্দেশনা তৈরি করেছি যাতে ব্যাবরহারকারিদের ভাল অভিজ্ঞতা দিতে পারি । সকল ধরণের অ্যাড-অনের জন্যই এই দিকনির্দেশনা প্রযোজ্য, তা addons.mozilla.org  তে হোস্ট করা হোক বা অন্য কোথাও হোস্ট করা হোক।

- -
-

এক্সটেনশন 

- -

এক্সটেনশন ফায়ারফক্স এবং থান্ডার-বার্ড এর মত মোজিলা অ্যাপ্লিকেশান গুলোতে নতুন কার্যকারিতা যোগ করে। এরা ব্রাউজারে নতুন ফিচার যুক্ত করতে পারে, যেমন: বিভিন্ন উপায়ে ট্যাবগুলোকে পরিচালনা করা। এবং তারা বিশেষ বিশেষ ওয়েবসাইটের ব্যাবহারযোগ্যতা অথবা নিরাপত্তা বাড়াতে ওয়েব কনটেন্টের পরিবর্তন করতে সক্ষম। 

- -

এক্সটেনশন তৈরি করতে আপনি তিনটি ভিন্ন ভিন্ন কৌশল ব্যাবহার করতে পারেন: অ্যাড-অন এসডিকে ভিত্তিক এক্সটেনশন, ম্যানুয়ালী বুটস্ত্র্যাপড রিস্টার্ট বিহীন এক্সটেনশন এবং ওভারলে এক্সটেনশন।  

- - - -

আপনি যদি পারেন তবে, অ্যাড-অন এসডিকে  ব্যাবহার করা সমীচীন হবে, যা রি স্টার্ট বিহীন মেকানিজম ব্যাবহার করে কিন্তু নির্দিষ্ট কিছু কাজকে সহজ করে এবং তারপর নিজেকে পরিষ্কার করে। যদি অ্যাড-অন এসডিকে আপনার প্রয়োজনের তুলনায় পর্যাপ্ত না হয় তবে, এর পরিবর্তে ম্যানুয়াল রি স্টার্ট বিহীন এক্সটেনশন ইমপ্লিমেন্ট করতে পারেন। বর্তমানে অধিকাংশ ক্ষেত্রে ওভারলে এক্সটেনশন অপ্রচলিত , যদিও এখনো এগুলোর প্রাচুর্য রয়েছে। 

- -

কোন কৌশল অবলম্বন করবেন এ সম্পর্কে আরও জানতে পড়ুন তাদের তুলনা। 

- -
-
-

ভাল চর্চা 

- -
-
আপনি যেভাবেই এক্সটেনশন ডেভেলপ করুন না কেন, আপনাকে কিছু দিক নির্দেশ মেনে চলতে হবে, যাতে ব্যাবহারকারিরা একটা ভাল অভিজ্ঞতা পান। 
-
পারফরমেন্স 
-
নিশ্চিত করা যে আপনার এক্সটেনশন দ্রুত, প্রতিক্রিয়াশীল এবং মেমরি এফিসিয়েন্ট। 
-
নিরাপত্তা 
-
নিশ্চিত করা যে আপনার এক্সটেনশন ইউজারকে ক্ষতিকারক ওয়েবসাইটে  প্রবেশ করাবে না। 
-
ভদ্রতা 
-
নিশ্চিত করা যে আপনার এক্সটেনশন অপর এক্সটেনশনের সাথে ভালো ভাবে কাজ করতে পারে কিনা। 
-
-
- -
-

নির্দিষ্ট-অ্যাপ্লিকেশান

- -

অধিকাংশ ডকুমেন্টেশান ধরে নেয় যে আপনি ফায়ারফক্স ডেক্সটপের জন্য অ্যাড-অন ডেভেলপ করছেন। আপনি যদি গেকো ভিত্তিক অন্য অ্যাপ্লিকেশান এর জন্য ডেভেলপ করতে চান, তাহলে আপনাকে তাদের মধ্যে মুখ্য পার্থক্য গুলো জানতে হবে। 

- -
-
থান্ডারবার্ড 
-
থান্ডার বার্ড মেইল ক্লায়েন্ট এর জন্য এক্সটেনশন ডেভেলপ করা।  
-
ফায়ারফক্স এন্ড্রয়েড
-
ফায়ারফক্স এন্ড্রয়েডের জন্য এক্সটেনশন ডেভেলপ করা। 
-
সীমাঙ্কী
-
সীমাঙ্কী সফটওয়্যার সুইটের জন্য এক্সটেনশন ডেভেলপ করা। 
-
-
-
- -
-

থিম 

- -

থিম হল অ্যাড-অন যারা অ্যাপ্লিকেশানের ইউজার ইন্টারফেস পরিবর্তন করে। দুই ধরণের থিম আছে: লাইটওয়েট এবং সম্পূর্ণ থিম। 

- -
-
-

লাইটওয়েট থিম গুলো সম্পূর্ণ থিমের চেয়ে সহজে ইমপ্লিমেন্ট করা যায়, কিন্তু খুব সীমিত পরিবর্তন প্রদান করে।    

-
- -
-

সম্পূর্ণ থিম দ্বারা অ্যাপ্লিকেশান ইউআই তে গভীর পরিবর্তন আনা যায়। সম্পূর্ণ থিমের ডকুমেন্টেশান গুলো অনেক পুরনো, কিন্তু সম্ভাব্য আপডেটের জন্য এখানে লিঙ্ক দেয়া হবে।  

-
-
- -
-

অন্যান্য ধরণের অ্যাড-অন

- -

সার্চইঞ্জিন প্লাগইন হল সরল এবং খুব নির্দিষ্ট ধরণের অ্যাড-অন: তারা ব্রাউজারের সার্চবারে নতুন সার্চইঞ্জিন যুক্ত করে । 

- -

যেসকল কন্টেন্টকে অ্যাপ্লিকেশান স্বাভাবিক ভাবে সাপোর্ট করেনা তাদের বোঝার জন্য প্লাগইনের সাহায্য দরকার হয়। আমরা এসকল প্লাগ ইনের গভীরতা বাড়াতে কাজ করছি, কেননা এদের স্থায়িত্ব, পারফরমেন্স এবং নিরাপত্তার সমস্যাপূর্ণ ইতিহাস রয়েছে।

- -

{{AddonSidebar}}

- - - - diff --git a/files/bn/mozilla/add-ons/webextensions/index.html b/files/bn/mozilla/add-ons/webextensions/index.html deleted file mode 100644 index 8a47f12413..0000000000 --- a/files/bn/mozilla/add-ons/webextensions/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: WebExtensions -slug: Mozilla/Add-ons/WebExtensions -tags: - - NeedsTranslation - - TopicStub -translation_of: Mozilla/Add-ons/WebExtensions ---- -
{{AddonSidebar}}
- -
-

WebExtensions are currently in an experimental alpha state. From Firefox 46, you can publish WebExtensions to Firefox users, just like any other add-on. We're aiming for a first stable release in Firefox 48.

-
- -

WebExtensions are a cross-browser system for developing browser add-ons. To a large extent the system is compatible with the extension API supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox or Microsoft Edge with just a few changes. The API is also fully compatible with multiprocess Firefox.

- -

We're also intending to extend the APIs to support the needs of add-on developers, so if you have ideas, we'd love to hear them. You can reach us on the dev-addons mailing list or #webextensions on IRC.

- -
-
-

Getting started

- - - -

How to

- - - -

Concepts

- - - -

Porting

- - - -

Firefox workflow

- - -
- -
-

Reference

- - - -

JavaScript APIs

- -
{{ ListSubpages ("/en-US/Add-ons/WebExtensions/API") }}
- -

Manifest keys

- -
{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}
-
-
diff --git a/files/bn/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/bn/mozilla/add-ons/webextensions/what_are_webextensions/index.html deleted file mode 100644 index f92dc2ad28..0000000000 --- a/files/bn/mozilla/add-ons/webextensions/what_are_webextensions/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: What are WebExtensions? -slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions ---- -

এই পাতা গেকো ভিত্তিক অ্যাপ্লিকেশনের জন্য উন্নয়নশীল এক্সটেনশন পদ্ধতির যা ব্যবহার ডকুমেন্টেশন লিঙ্ক উপস্থিত রয়েছে
-
-
-  XUL প্রতিস্থাপক ইন্টারফেস করুন </ li> নির্দিষ্ট করার
-  <লি> যেমন <a href="/en-US/docs/XUL/tabbrowser"> <code> বিশেষ সুবিধাভোগী কোড উপলব্ধ API গুলি, tabbrowser </ code> </a> এবং <একটি href = "/ en-US / ডক্স / মজিলা / JavaScript_code_modules "> জাভাস্ক্রিপ্ট মডিউল </a>, অ্যাপ্লিকেশন এবং কন্টেন্ট সঙ্গে যোগাযোগ করার জন্য. </ li>
- </ Li>
-
- <P> ঢাকা ফায়ারফক্স 4, এবং গেকো 2 ইঞ্জিন এটি ক্ষমতা, এই এক্সটেনশন বিকাশ করার একমাত্র উপায় ছিল এর আগে. এই পদ্ধতি মূলত <a href="/en-US/docs/Extensions/Bootstrapped_extensions"> রিস্টার্টবিহীন এক্সটেনশন </a>, এবং <a দ্বারা বাতিল হয়েছে href="/en-US/Add-ons/SDK"> অ্যাড-অন এসডিকে </a>, যা তাদের উপর নির্মিত হয়. সুবিধাভোগী জাভাস্ক্রিপ্ট এপিআই এখানে বর্ণনা এখনও অ্যাড টার্ন এই নতুন ধরনের ব্যবহার করা যেতে পারে. '</ p>
-
- <H2 & id = "XUL_School"> XUL স্কুল </ h2>
-
- <পি> <a href="/en-US/Add-ons/Overlay_Extensions/XUL_School"> XUL স্কুল </a> একটি ব্যাপক অ্যাড অন উন্নয়ন টিউটোরিয়াল, কিন্তু বেশিরভাগই অন্যান্য গেকো ভিত্তিক প্রযোজ্য ফায়ারফক্স এক্সটেনশন উন্নয়ন উপর মনোযোগ নিবদ্ধ করে অ্যাপ্লিকেশন. '</ p>
-
- <H2 & id = "More_resources"> আরো সম্পদ করুন </ h2>
-
- <Div class = "কলাম-ধারক">
- <Div class = "কলাম অর্ধ">
- <DL>
-  <Dt> <a href="/en-US/Mozilla/Add-ons/Setting_up_extension_development_environment"> আপনার পরিবেশ </a> </ DT> সেট আপ
-  <DD> এক্সটেনশন উন্নয়নের জন্য আবেদন সেট আপ হচ্ছে. </ DD>
-  <Dt> <a href="/en-US/docs/XUL"> XUL </a> </ DT>
-  <DD> টিউটোরিয়াল এবং ইউজার ইন্টারফেস XUL ​​এক্সটেনশন. </ DD> দ্বারা ব্যবহৃত ভাষা জন্য রেফারেন্স
-  <Dt> <a href="/en-US/Mozilla/Add-ons/Code_snippets"> কোড স্নিপেট </a> </ DT>
-  <DD> জিনিষ আপনি করতে চাইবেন. </ DD> অনেক জন্য নমুনা কোড
-  <Dt> <a href="/en-US/Mozilla/Add-ons/Installing_extensions"> এক্সটেনশন </a> </ DT> ইনস্টল
-  <DD> অ্যাপ্লিকেশনের তালিকা ইনস্টল এক্সটেনশান ফাইল অনুলিপি দ্বারা একটি এক্সটেনশন ইনস্টল করার জন্য কিভাবে. </ DD>
-  <Dt> <a href="/en-US/Add-ons/Overlay_extensions/Firefox_addons_developer_guide"> ফায়ারফক্স অ্যাড-অন ডেভেলপার নির্দেশিকা </a> </ DT>
-  <DD> ওভারলে এক্সটেনশন. </ DD> উন্নয়নশীল একটি নির্দেশিকা
- </ DL>
- </ Div>
-
- <Div class = "কলাম অর্ধ">
- <DL>
-  <Dt> <a href="/en-US/docs/Mozilla/JavaScript_code_modules"> জাভাস্ক্রিপ্ট কোড মডিউল </a> </ DT>
-  <DD> জাভাস্ক্রিপ্ট মডিউল এক্সটেনশন ডেভেলপার. </ DD> উপলব্ধ
-  <Dt> <a href="/en-US/Mozilla/Add-ons/Inline_Options"> এক্সটেনশন পছন্দগুলি </a> </ DT>
-  <DD> কিভাবে আপনার এক্সটেনশন পছন্দগুলি যে অ্যাড-অন ম্যানেজার প্রদর্শিত হবে তা নির্দিষ্ট করার. </ DD>
-  <Dt> <a href="/en-US/Mozilla/Add-ons/Extension_Packaging"> এক্সটেনশন প্যাকেজিং </a> </ DT>
-  <DD> কিভাবে এক্সটেনশন প্যাকেজ এবং ইনস্টল করা হয়. </ DD>
-  <Dt> <a href="/en-US/Mozilla/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System"> বাইনারি ফায়ারফক্স এক্সটেনশন </a> </ DT>
-  <DD> ফায়ারফক্সের জন্য বাইনারি এক্সটেনশন তৈরি. </ DD>
- </ DL>
- </ Div>
- </ Div>
-
- <পি> & nbsp; </ p>

diff --git a/files/bn/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/bn/mozilla/add-ons/webextensions/your_first_webextension/index.html deleted file mode 100644 index c705ed4493..0000000000 --- a/files/bn/mozilla/add-ons/webextensions/your_first_webextension/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: আপনার প্রথম WebExtension -slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension -translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension ---- -

{{AddonSidebar}}

- -

এই অনুচ্ছেদে ফায়ারফক্সের WebExtension তৈরীর আদ্যপন্ত জানব। এই অ্যাড-অন "mozilla.org" অথবা এর সাবডোমেন থেকে আসা সমস্ত পেজে লাল বর্ডার যোগ করবে।

- -

এই উদাহরণের সোর্স কোড GitHub-এ দেওয়া আছেঃ

- -

https://github.com/mdn/webextensions-examples/tree/master/borderify.

- -

প্রথমে দরকার হবে ফায়ারফক্স ৪৫ অথবা তার পরবর্তী ভার্সন।

- -

WebExtension লিখা

- -

নতুন একটি ডিরেক্টরী তৈরী করে সেখানে প্রবেশ করুনঃ

- -
mkdir borderify
-cd borderify
- -

manifest.json

- -

এখন "borderify" ডিরেক্টরীর ভেতরে "manifest.json" নামে নতুন একটি ফাইল তৈরী করুন। তাতে নিম্নলিখিত কোড লিখুনঃ

- -
{
-
-  "manifest_version": 2,
-  "name": "Borderify",
-  "version": "1.0",
-
-  "description": "Adds a solid red border to all webpages matching mozilla.org.",
-
-  "icons": {
-    "48": "icons/border-48.png"
-  },
-
-  "content_scripts": [
-    {
-      "matches": ["*://*.mozilla.org/*"],
-      "js": ["borderify.js"]
-    }
-  ]
-
-}
- -
    -
  • প্রথম তিনটি key: manifest_version, name, এবং version, দিতেই হবে যাতে অ্যাড-অনের প্রাথমিক মেটাডাটা থাকে।
    • -
  • description ঐচ্ছিক কিন্তু দিতে পরাপর্শ দেওয়া হচ্ছে কারণ, অ্যাড-ম্যানেজারে এই তথ্য দেখাবে।।
    • -
  • icons ঐচ্ছিক যা অ্যাড-অনের একটি আইকন নির্দিষ্ট করে,যা অ্যাড-ম্যানেজারে দেখাবে তাই দিতে পরামর্শ দেওয়া হচ্ছে।
    • -
- -

কিছু ফায়ারফক্স ভার্সনে একটি অতিরক্ত applications key manifest.json-এ যোগ করা লাগতে পারে।

- -
"applications": {
-  "gecko": {
-    "id": "borderify@example.com",
-    "strict_min_version": "42.0",
-    "strict_max_version": "50.*",
-    "update_url": "https://example.com/updates.json"
-  }
-}
- -

সবচেয়ে মজার key হচ্ছ content_scripts. এটা ফায়ারফক্সকে সেই সব ওয়েব পেজে স্ক্রীপট লোড করতে বলবে যাদের URL-এ একটি নির্দিষ্ট প্যাটার্ন আছে।এক্ষেত্রে আমরা ফায়ারফক্সকে "mozilla.org" বা এর সাবডোমেনের সমস্ত HTTP অথবা HTTPS পেজে "borderify.js" নামে স্ক্রীপট লোড করতে বলছি।

- - - -

icons/border-48.png

- -

The add-on should have an icon. This will be shown next to the add-on's listing in the Add-ons Manager. Our manifest.json promised that we would have an icon at "icons/border-48.png".

- -

Create the "icons" directory directly under the "borderify" directory. Save an icon there named "border-48.png".  You could use the one from our example, which is taken from the Google Material Design iconset, and is used under the terms of the Creative Commons Attribution-ShareAlike license.

- -

If you choose to supply your own icon, It should be 48x48 pixels. You could also supply a 96x96 pixel icon, for high-resolution displays, and if you do this it will be specified as the 96 property of the icons object in manifest.json:

- -
"icons": {
-  "48": "icons/border-48.png",
-  "96": "icons/border-96.png"
-}
- -

Alternatively, you could supply an SVG file here, and it will be scaled correctly.

- - - -

borderify.js

- -

Finally, create a file called "borderify.js" directly under the "borderify" directory. Give it this content:

- -
document.body.style.border = "5px solid red";
- -

This script will be loaded into the pages that match the pattern given in the content_scripts manifest.json key. The script has direct access to the document, just like scripts loaded by the page itself.

- - - -

Testing it out

- -

First, double check that you have the right files in the right places:

- -
borderify/
-    icons/
-        border-48.png
-    borderify.js
-    manifest.json
- -

Open "about:debugging" in Firefox, click "Load Temporary Add-on" and select any file in your add-on's directory:

- -

{{EmbedYouTube("cer9EUKegG4")}}

- -

The add-on will now be installed, and will stay until you restart Firefox.

- -

Now try visiting a page under "mozilla.org", and you should see the red border round the page:

- -

{{EmbedYouTube("rxBQl2Z9IBQ")}}

- -

Try experimenting a bit. Edit the content script to change the color of the border, or do something else to the page content. Save the content script, then reload the add-on's files by clicking the "Reload" button in about:debugging. You can see the changes right away:

- -

{{EmbedYouTube("NuajE60jfGY")}}

- - - -

Packaging and publishing

- -

For other people to use your add-on, you need to package it and submit it to Mozilla for signing. To learn more about that, see "Publishing your WebExtension".

- -

What's next?

- -

Now you've got an idea of the process of developing a WebExtension for Firefox, try:

- - diff --git a/files/bn/mozilla/firefox/index.html b/files/bn/mozilla/firefox/index.html deleted file mode 100644 index 3be83341ec..0000000000 --- a/files/bn/mozilla/firefox/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: ফায়ারফক্স -slug: Mozilla/Firefox -tags: - - ফায়ারফক্স -translation_of: Mozilla/Firefox -original_slug: Mozilla/ফায়ারফক্স ---- -
{{FirefoxSidebar}}
- -

ফায়ারফক্স হচ্ছে মোজিলা'র  বহুল পরিচিত ওয়েব ব্রাউজার এপ্লিকেশন, যা উইন্ডোজ, ম্যাক OS এক্স, এবং লিনাক্স এর মতো বিভিন্ন প্ল্যাটফরম, এছাড়াও এনড্রোয়েড মোবাইল এ ও রয়েছে । যার সাথে রয়েছে সর্বাধুনিক ওয়েব প্রযুক্তি এবং শক্তিশালী ডেভেলপার টুল । ওয়েব ডেভলপার এবং সাধারণ ব্যবহারকারীদের জন্য ফায়ারফক্স হচ্ছে একটি উৎকৃষ্ট ব্রাউজার।

- -

ফায়ারফক্স একটি ওপেন সোর্স প্রোজেক্ট,  কোড এর অনেক কিছুই আমাদের স্বেচ্ছাসেবক সংগঠন এর মাধ্যমে  তৈরি। এখানে আপনি ফায়ারফক্স প্রোজেক্ট এ কিভাবে সাহায্য করতে হয় তা শিখতে পারবেন, কিন্তু আপনি ফায়ারফক্স ডেভলপার টুল ব্যাবহার করে ফায়ারফক্স অ্যাড-অন তৈরির ডকুমেন্টেশন লিঙ্ক  খুজে পাবেন।

- -
-

কিভাবে ফায়ারফক্স OS এ অ্যাড-অন তৈরি করতে হয় শিখুন, কিভাবে ফায়ারফক্স ডেভলপ এবং তৈরি করা যায়, এবং কিভাবে ফায়ারফক্স এর অভ্যন্তরীণ সাবপ্রজেক্ট গুলো কাজ করে তা জানুন।

-
- -
    -
  • ডেভলপার রিলিজ নোটস - -

    ডেভলপারদের জন্য রিলিজ নোট; ফায়ারফক্স এর প্রতিটি ভার্সন এর ওয়েবসাইট এবং অ্যাড-অন এর নতুন ক্ষমতা সম্বন্ধে জানুন l

    -
    • -
  • প্রোজেক্ট ডকুমেন্ট তৈরি করা -

    ফায়ারফক্স এর অভ্যন্তরীণ বিষয় এবং এর তৈরি প্রক্রিয়ার বিস্তারিত তথ্য সম্বন্ধে অবগত থাকুন এতে আপনার কোড করা সহজ হবে।

    -
    • -
  • ডেভলপার গাইড -

    আমাদের ডেভলপার গাইড, দিচ্ছে সম্পূর্ণ তথ্য কিভাবে আপনি ফায়ারফক্স সোর্স কোড কম্পাইল করতে পারেন, কিভাবে আপনি আপনার নিজস্ব কোড করার সুযোগ পান, এবং কিভাবে অন্যান্য প্রোজেক্ট এ যোগ দিতে পারেন।

    -
    • -
- -

ফায়ারফক্স চ্যানেল

- -

ফায়ারফক্স চারটি চ্যানেলেপাওয়া যায়।

- -

ফায়ারফক্স নাইটলি

- -

প্রতি রাতেমজিলা-সেন্ট্রাল থেকে ফায়ারফক্স নাইটলি বিল্ড করি। এই বিল্ড গুলো ফায়ারফক্স ডেভেলপারদের জন্য অথবা যারা সক্রিয় ডেভেলপমেন্ট এর মধ্যে থাকা সর্বশেষ আকর্ষণীয় ফিচার ব্যবহার করতে চায়।

- -

ফায়ারফক্স নাইটলি ডাউনলোড

- -

ফায়ারফক্স ডেভেলপার এডিশন

- -

ফায়ারফক্সের এই সংস্করণ ডেভেলপারদের জন্য বিশেষভাবে তৈরি করা হয়েছে। প্রতি ৬ সপ্তাহ পর পর ফায়ারফক্স নাইটলিতে থাকা মোটামুটি স্ট্যাবল ফিচার ডেভেলপার এডিশনে যুক্ত করে রিলিজ দেয়া হয়। এছাড়াও শুধু ডেভেলপারদের প্রয়োজন হবে, এমন কিছু অতিরিক্ত ফিচারও আমরা এতে যুক্ত করে থাকি।

- -

ফায়ারফক্স ডেভেলপার এডিশন সম্পর্কে আরও জানুন

- -

ফায়ারফক্স ডেভেলপার সংস্করণ ডাউনলোড

- -

ফায়ারফক্স বেটা

- -

ফায়ারফক্স ডেভেলপার এডিশনে ছয় সপ্তাহ থাকার পর, যেসব ফিচার মোটামুটি স্ট্যাবল, আমরা তা নিয়ে ফায়ারফক্স বেটার একটি নতুন সংস্করণ তৈরি করি। ফায়ারফক্স বেটা মজিলার ভলান্টিয়ারদের টেস্ট করার জন্য রিলিজ দেয়া হয় এবং এরপর ফায়ারফক্সের পুর্নাঙ্গ সংস্করণে অন্তরভুক্ত করার জন্য তৈরি করা হয়।

- -

ফায়ারফক্স বেটা ডাউনলোড

- -

ফায়ারফক্স

- -

প্রায় দেড় মাস বেটা সংস্করণে থাকার পর, আমরা এখন নতুন ফিচার হাজার কোটি মানুষের কাছে ফায়ারফক্সের নতুন সংস্করণ পৌঁছে দিতে প্রস্তুত।

- -

ফায়ারফক্স ডাউনলোড

diff --git a/files/bn/mozilla/firefox/releases/index.html b/files/bn/mozilla/firefox/releases/index.html deleted file mode 100644 index 36e5f82057..0000000000 --- a/files/bn/mozilla/firefox/releases/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: ফায়ারফক্স ডেভেলপার রিলিজ নোট্‌স -slug: Mozilla/Firefox/Releases -tags: - - NeedsReview -translation_of: Mozilla/Firefox/Releases -original_slug: Mozilla/ফায়ারফক্স/রিলিজস ---- -
{{FirefoxSidebar}}

"ফায়ারফক্স এক্স ডেভেলপারস" দেরকে ফায়ারফক্স এর প্রতিটি রিলিজ এর প্রতিবেদন এর লিঙ্ক দিচ্ছে এই পেজ। ফায়ারফক্স এর প্রতিটি ভার্শন এর সাথে কি কি ফিচার যোগ এবং ভুলগুলো মুছে ফেলা হয়েছে তা এই নোটস এর মাধ্যমে আপনি দেখতে পারবেন।

- -
{{ListSubpages("",1,0,1)}}
diff --git a/files/bn/mozilla/index.html b/files/bn/mozilla/index.html deleted file mode 100644 index 205568bf1d..0000000000 --- a/files/bn/mozilla/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: মজিলা -slug: Mozilla -tags: - - NeedsTranslation - - TopicStub -translation_of: Mozilla ---- -
{{draft}}
- -

This will soon be an awesome landing page for Mozilla internals. For now, it's not.

- -
{{ListSubpages}}
diff --git a/files/bn/orphaned/mdn/community/index.html b/files/bn/orphaned/mdn/community/index.html deleted file mode 100644 index e65a14688c..0000000000 --- a/files/bn/orphaned/mdn/community/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: যোগ দিন আমাদের দলে -slug: orphaned/MDN/Community -translation_of: MDN/Community -original_slug: MDN/Community ---- -
{{MDNSidebar}}
- -

MDN শুধু একটি উইকি নয়: এটি ডেভেলপারদের একটি কমিউনিটি, যারা উন্মুক্ত ওয়েব প্রযুক্তি ব্যবহারকারী অন্যান্য ডেভেলপারদের জন্য MDN কে অসাধারন রিসোর্স হিসেবে গড়ে তোলার জন্য কাজ করছে। "আসল কাজ" হয় MDN সাইটে, আর "কমিউনিটির কাজ" হয় আলোচনা ও চ্যাট এর মাধ্যমে।

- -

আমরা খুশি হব, যদি আপনি MDN এ অবদান রাখেন; তবে আমরা আরও বেশি খুশি হব, যদি আপনি আমাদের কমিউনিটিতে অংশগ্রহণ করেন। নিচের এই তিনটি সহজ ধাপ অনুসরণ করে আপনি আমাদের সাথে যুক্ত হতে পারেন।

- -
    -
  1. একটি MDN অ্যাকাউন্ট তৈরি  করুন।
    2. -
  2.  কথোপকথনে যোগ দিন।
    3. -
  3. চলমান ঘটনার উপর নজর রাখুন।
    4. -
- -

মোজিলার ডেভেলপার সম্পদায় কিভাবে কাজ করে

- -

নিছের আর্টিকেলগুলি MDN সম্প্রদায় সম্পর্কে আরো বেশী বর্ণনা করা হয়েছে।

- -

নেটওয়ার্কে অ্যাকাউন্ট তৈরি করা

- -

{{page("/bn-BD/docs/Project:MDN/অবদান/শুরু", "একটি অ্যাকাউন্ট তৈরি করা") }}

- -

dev-mdc আলোচনায় সাবস্ক্রাইব

- -

MDN এর কনটেন্ট এর কাজ নিয়ে আলোচনা করার জন্য মেইলিং লিস্ট হচ্ছে  dev-mdc@lists.mozilla.org। বিভিন্ন উপায়ে আপনি আমাদের কথোপকথন পড়তে পারেন। আর আপনি যদি প্রশাসকের অনুমতির অপেক্ষা না করেই আপনার বার্তা পাঠাতে চান, তাহলে আপনাকে অবশ্যই মেইলিং লিস্টে অন্তর্ভুক্ত হতে হবে। এখানে আরও কিছু ভিন্ন পদ্ধতি আছে, যার মাধ্যমে আপনি মেইলিং লিস্টে অন্তর্ভুক্ত হতে পারেনঃ{{DiscussionList("dev-mdc", "mozilla.dev.mdc")}}

- -

কেন "dev-mdc"? আগে এটা "Mozilla Developer Center" বা MDC হিসেবে পরিচিত ছিল। তাই সেই আগের নাম অনুযায়ী মেইলিং লিস্টটি dev-mdc হয়েছে। একটি dev-mdn মেইলিং লিস্টও রয়েছে। Kuma প্ল্যাটফর্ম, যেটা দিয়ে MDN চলে, সেটা ডেভেলপ করার জন্য ডেভেলপাররা এখানে আলোচনা করে। আপনাকে এখানেও যুক্ত হওয়ার জন্য স্বাগত জানানো হচ্ছে। কিন্তু আপনার যদি শুধু MDN এর কনটেন্ট এর প্রতি আগ্রহ থাকে, তবে এখানে যুক্ত হওয়ার প্রয়োজন নেই।

- -

ইন্টারনেট রিলে চ্যাট বা IRC তে যোগদান

- -

মোজিলা প্রজেক্টের অন্যান্য অংশের মতো MDN কমিউনিটি ব্যবহারকারীরা অনলাইন চ্যাট করার জন্য IRC ব্যবহার করে। irc.mozilla.org এর মধ্যে নিচের IRC চানেল গুলো MDN সংশ্লিষ্টঃ

- -
    -
  • #devmo: MDN এর কনটেন্ট নিয়ে আলোচনা করার জন্য।
    • -
  • #mdndev: MDN প্ল্যাটফর্ম এর উন্নয়নের আলোচনা করার জন্য (যা Kuma হিসেবেও পরিচিত)
    • -
  • #mdn: পাঁচমিশালি আলোচনার জন্য; MDN সম্পর্কিত কোন কিছু জিজ্ঞাসা থাকলে আপনি যদি নিশ্চিত না হন, যে কোথায় জিজ্ঞেস করবেন, এখানে জিজ্ঞেস করতে পারেন।
    • -
- -

খুব সম্ভবত এই চ্যানেল গুলো উত্তর আমেরিকায় রবিবার বাদে অন্য সব দিন চালু থাকে।

- -

যদি আপনি আগে কখনো IRC ব্যবহার নাকরে থাকেন, তবে IRC সম্পর্কে জানুন। ChatZilla হচ্ছে IRC ক্লায়েন্ট যা একটি ফায়ারফক্স অ্যাড-অন হিসেবে তৈরি করা হয়েছে।

- -

পরবর্তী ধাপ

- - diff --git a/files/bn/orphaned/mdn/community/whats_happening/index.html b/files/bn/orphaned/mdn/community/whats_happening/index.html deleted file mode 100644 index ffba033296..0000000000 --- a/files/bn/orphaned/mdn/community/whats_happening/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: চলমান ঘটনাবলি সম্পর্কে জানুন -slug: orphaned/MDN/Community/Whats_happening -translation_of: MDN/Community/Whats_happening -original_slug: MDN/Community/Whats_happening ---- -
{{MDNSidebar}}

MDN তৈরি হয়েছে মোজিলার Websites and Developer Engagement কমিউনিটির দ্বারা। নিচে কিছু রাস্তা বলে দেয়া আছে যার মাধ্যমে আমরা কি করছি, সে সম্পর্কে তথ্য ভাগাভাগি করি।

-

ব্লগ

-
-
- Mozilla Hacks
-
- ওয়েব, মোজিলা টেকনোলজি এবং ফিচার সম্পর্কে বিস্তারিত খবর এখানে পাওয়া যাবে। 
-
- ডেভেলপারদের সংযুক্ত করা
-
- শীঘ্রই আসছে! কমিউনিটির মধ্যে তৎপরতা এবং আলোচনার প্রসার করতে খুব শীঘ্রই এটি চালু করা হবে। এর মাধ্যমে ডেভেলপারদের সংঘবদ্ধ ও সংযুক্ত রাখা যাবে।
-
-

সামাজিক যোগাযোগ

-
    -
  • @MozHacks: নিত্য নতুন ওয়েব টেকনোলজি, দারুন সব HTML5 অ্যাপ এবং ফায়ারফক্স ফিচার সম্পর্কে টুইট।
    • -
  • @NewOnMDN: নতুন পৃষ্ঠা গুলোর সংকলন, উল্লেখযোগ্য হালনাগাদ এবং মোজিলা ডেভেলপার নেটওয়ার্ক সম্পর্কে অন্যান্য খবর।
    • -
  • +MozillaDeveloperNetwork
    • -
  • Mozilla Hacks (YouTube)
    • -
  • Moz Developer Engagment: ডেভেলপারদের সংযুক্ত করার জন্য টুইটারে যারা সক্রিয় রয়েছেন, তাদের লিস্ট।
    • -
-

MDN কমিউনিটি সভা

-

কমিউনিটির সভা প্রতি দুই সপ্তাহ অন্তর বুধবারে, মার্কিন প্রশান্ত মহাসাগরীয় সময় ১০:০০ টায় (UTC-0800 অক্টোবর-মার্চ, UTC-0700 মার্চ-অক্টোবর), #devmo IRC চানেলে অনুষ্ঠিত হয়। আগের সভা গুলোর আলোচ্য সূচি দেখার জন্য MDN community meetings এর উইকি পাতা দেখতে পারেন।

-

MDN Events ক্যালেন্ডারে MDN কমিউনিটির সভা, ডক এর সংকলন এবং MDN সংশ্লিষ্ট অন্যান্য অনুষ্ঠান সম্পর্কিত তথ্য থাকে।

diff --git a/files/bn/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/bn/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html deleted file mode 100644 index e28ffb74b8..0000000000 --- a/files/bn/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: যেভাবে MDN এ অ্যাকাউন্ট তৈরি করবো -slug: orphaned/MDN/Contribute/Howto/Create_an_MDN_account -translation_of: MDN/Contribute/Howto/Create_an_MDN_account -original_slug: MDN/Contribute/Howto/Create_an_MDN_account ---- -
{{MDNSidebar}}

এভাবে আমরা MDN এ একটি অ্যাকাউন্ট তৈরি করবোঃ

-
    -
  1. পাতার উপরে থাকা Sign in with Persona বাটনে ক্লিক করুন। একটি পারসোনা লগইনের উইন্ডো চালু হবে।
    2. -
  2. নতুন অ্যাকাউন্ট এর জন্য যে ইমেইল ঠিকানা ব্যবহার করতে চান, সেটি লিখুন এবং next এ ক্লিক করুন।
    3. -
  3. এরপরে যেটা হবে, তা নির্ভর করে যে, আপনি এর আগে এই ইমেইল ঠিকানাটি পারসোনায় ব্যবহার করেছেন, কি না। -
      -
    • যদি এর আগে ব্যবহার করে থাকেন, তবে পারসোনা উইন্ডোটি  আপনার পাসওয়ার্ড চাইবে। পাসওয়ার্ড দিন এবং done ক্লিক করুন।
      • -
    • যদি এর আগে কখনো পারসোনা ব্যবহার না করে থাকেন, তবে আপনাকে পাসওয়ার্ড নির্বাচন করতে বলবে। -
        -
      1. দুইবার পাসওয়ার্ড দিন এবং done ক্লিক করুন।
        2. -
      2. আপনার ইমেইল চেক করুন এবং দেখুন যে, no-reply@persona.org থেকে কোন মেইল এসেছে কি না; যদি ইনবক্সে না পান, তবে spam বক্সে দেখুন।
        3. -
      3.  মেসেজে থাকা নিবন্ধন লিঙ্কে ক্লিক করুন। আপনার পারসোনা অ্যাকাউন্ট তৈরি।
        4. -
      4. এবার আপনি যে ট্যাব বা উইন্ডো থেকে MDN এ প্রবেশ (signing in) করতে গিয়েছিলেন, সেখানে ফিরে যান।
        5. -
      -
      • -
    -
    4. -
  4. একবার যখন আপনি পারসোনায় অনুমোদিত হয়ে যাবেন, তখন MDN এর জন্য একটি নতুন ব্যবহারকারী পাতা (Profile page) পাবেন।
    5. -
  5. আপনার প্রোফাইলের জন্য একটি নাম (user name) নির্বাচন করুন এবং Create new profile ক্লিক করুন।
    6. -
-
-

বিশেষ দ্রষ্টব্য: নতুন ইউজার নামের মধ্যে কোন স্পেস বা @ থাকতে পারবে না। মনে রাখবেন, আপনি যেসব কাজ করেছেন, তা চিহ্নিত করতে আপনার ইউজারনেম সার্বজনীন ভাবে প্রদর্শন করা হবে।

-
-

 

diff --git a/files/bn/orphaned/web/guide/events/index.html b/files/bn/orphaned/web/guide/events/index.html deleted file mode 100644 index 2322c7fdf6..0000000000 --- a/files/bn/orphaned/web/guide/events/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Event developer guide -slug: orphaned/Web/Guide/Events -tags: - - DOM - - Event - - Guide - - NeedsTranslation - - NeedsUpdate - - TopicStub - - events -translation_of: Web/Guide/Events -original_slug: Web/Guide/Events ---- -

{{draft()}}

-

Events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.

-

The overview page provides an introduction to the design pattern and a summary of the types of incidents which are defined and reacted to by modern web browsers.

-

The custom events page describes how the event code design pattern can be used in custom code to define new event types emitted by user objects, register listener functions to handle those events, and trigger the events in user code.

-

The remaining pages describe how to use events of different kinds defined by web browsers. Unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers.

-

The device on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the page on orientation coordinate systems and the page on the use of 3D transforms. That is different, but similar, to the change in device vertical orientation. 

-

The window in which the browser is displayed which might trigger events, for example, change size if the user maximizes the window or otherwise changes it.

-

The process loading of a web page might trigger events in response to the completion of different steps in the downloading, parsing, and rendering of the web page for display to the user.

-

The user interaction with the web page contents might trigger events. The events triggered by user interaction evolved during the early years of browser design and include a complicated system defining the sequence in which events will be called and the manner in which that sequence can be controlled. The different types of user interaction driven events include:

- -

The modification of the web page in structure or content might trigger some events, as is explained in the mutation events page, but the use of these events has been deprecated in favour of the lighter Mutation Observer approach.

-

The media streams embedded in the HTML documents might trigger some events, as explained in the media events page.

-

The network requests made by a web page might trigger some events.

-

There are many other sources of events defined by web browsers for which pages are not yet available in this guide.

-
-

Note: This Event Developer Guide needs substantial work. The structure needs to be reorganized and the pages rewritten. Our hope is that everything you need to know about events will go under here.

-
-

Docs

-

{{LandingPageListSubpages}}

diff --git a/files/bn/tools/3d_view/index.html b/files/bn/tools/3d_view/index.html deleted file mode 100644 index caab492814..0000000000 --- a/files/bn/tools/3d_view/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: ত্রিমাত্রিক দর্শন -slug: Tools/3D_View -translation_of: Tools/3D_View -original_slug: Tools/ত্রিমাত্রিক_দর্শন ---- -
{{ToolsSidebar}}
- -

যখন আপনি ত্রিমাত্রিক(3D) দর্শন বোতাম চাপ দিবেন, পাতাটি ত্রিমাত্রিক দর্শন প্রক্রিয়ায় যাবে; এই প্রক্রিয়ায় আপনি দেখতে পাবেন আপনার পাতা ত্রিমাত্রিক(3D) দৃশ্যে উপস্থাপন করে HTML-এর চারকোনা ঘর যা ক্রমবর্ধমান "লম্বা" হয়, যেটি আপনার পৃষ্ঠাকে বাইরের দিকে ঠেলে দিচ্ছে। এই দৃশ্যে দেখা যায় আপনার বিষয়বস্তুগুলো আরও সহজে ঘরের আকৃতিতে প্রকাশ পায়।

- -

- -

চেপে রেখে এবং টেনে ধরে, বিভিন্ন কোণ থেকে দেখার জন্য আপনি আপনার পৃষ্ঠার DOM(Document Object Model) অনুক্রমের ত্রিমাত্রিক বর্ণনাটি ঘোরাতে পারেন এবং পুনরায় দ্যুতিময় করতে পারেন, এর কাঠামো ভালোমতো পরীক্ষার জন্য। পর্দার আড়ালে থাকা উপাদানসমূহ দৃশ্যমান হবে, যার ফলে আপনি দেখতে পাবেন কোথায় উপাদানগুলোর সম্পর্ক স্থাপিত হয় দৃশ্যমান উপাদান এর সাথে। আপনি উপাদানে চেপে HTML সূচি অথবা Style সূচি থেকে তাদের HTML দেখতে পারেন। বিপরীতভাবে, আপনি breadcrumb bar(এক প্রকার পরিভ্রমণ দণ্ড) এর উপাদানগুলোতে চেপে কোন কোন উপাদান ত্রিমাত্রিক দৃশ্যে থাকবে তা নির্বাচন করতে পারবেন।

- -

If you do not see the 3D button in the page inspector, it is possible that your graphics driver needs to be updated. See the blocklisted drivers page for more information.

- -

Controlling the 3D view

- -

There are keyboard shortcuts and mouse controls available for the 3D view.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FunctionKeyboardMouse
Zoom in/out+ / -Scroll wheel up/down
Rotate left/righta / dMouse left/right
Rotate up/downw / sMouse up/down
Pan left/right← / →Mouse left/right
Pan up/down↑ / ↓Mouse up/down
Reset zoom level0Resets the zoom level to the default
Focus on selected nodefMakes sure the currently selected node is visible
Reset viewrResets zoom, rotation, and panning to the default
Hide current nodexMakes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured
- -

Use cases for the 3D view

- -

There are a variety of ways the 3D view is useful:

- -
    -
  • If you have broken HTML causing layout problems, looking at the 3D view can help find where you've gone wrong. Often, layout problems are caused by improper nesting of content. This can become much more obvious when looking at the 3D view and seeing where your elements are nested wrong.
    • -
  • If content isn't displaying, you may be able to figure out why; since the 3D view lets you zoom out to see elements that are rendering outside the visible area of the page, you can find stray content this way.
    • -
  • You can get a look at how your page is structured to see if there may be ways to optimize your layout.
    • -
  • And, of course, it looks awesome.
    • -
- -

See also

- - - -

{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}

diff --git a/files/bn/tools/index.html b/files/bn/tools/index.html deleted file mode 100644 index de2b9c61ff..0000000000 --- a/files/bn/tools/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: ফায়ারফক্স ডেভেলপার টুল -slug: Tools -tags: - - NeedsReview -translation_of: Tools ---- -
{{ToolsSidebar}}
- -
ডেস্কটপ এবং মোবাইলে HTML, CSS এবং জাভাস্ক্রিপ্ট পরীক্ষা, সম্পাদন এবং ডিবাগ করুন
- -
ফায়ারফক্স অরোরা ইন্সটল করুন - -

অরোরাতে নতুন কি আছে?

- -

অরোরা হচ্ছে ফায়ারফক্সের প্রিভিউ বিল্ড, যেখানে আপনি যেকোনো নতুন ফিচার সর্বসাধারণের জন্য উন্মুক্ত করার আগেই ব্যবহারের সুযোগ পাবেন। বর্তমান অরোরাতে ডেভেলপার টুলসে নিচের আপডেট সমূহ রয়েছে:

- - -
- -
আপনার আইডিয়া শেয়ার করুন - -

আপনার আইডিয়া শেয়ার করুন

- -

ডেভেলপার টুলসে নতুন ফিচারের জন্য অনুরোধ করুন অথবা অন্যান্য ডেভেলপারের আবেদন করা আইডিয়ার জন্য ভোট করুন।

-
- -

- -
-
-

তৈরি করা

- -

ওয়েবসাইট এবং ওয়েব অ্যাপ এর জন্য অথরিং টুলস।

- -
-
স্ক্র্যাচপ্যাড
-
ফায়ারফক্স এর ভেতরে একটি টেক্সট এডিটর দেয়া আছে যা আপনাকে জাভাস্ক্রিপ্ট লিখতে এবং এক্সিকিউট করতে দেয়।
-
স্টাইল এডিটর
-
বর্তমান পেজ এর CSS স্টাইল দেখুন এবং এডিট করুন।
-
শেডার এডিটর
-
WebGL এর ব্যবহার করা ফ্র্যাগমেন্ট শেডার সহ সবকিছু দেখুন এবং সম্পাদনা করুন
-
ওয়েব অডিও এডিটর
-
একটি অডিও কনটেক্সটে অডিও নোডের গ্রাফ পরীক্ষা করুন এবং তাদের প্যারামিটার পরিবর্তন করুন।
-
-
- -
-

এক্সপ্লোর ও ডিবাগ করুন 

- -

Examine, explore, and debug websites and web apps.

- -
-
Web Console
-
See messages logged a web page, and interact with the page using JavaScript.
-
পেজ ইন্সপেক্টর
-
এইচটিএমএল , সিএসএস দেখতে  এবং সম্পাদন করতে সহায়তা করে
-
JavaScript Debugger
-
Stop, step through, examine and modify the JavaScript running in a page.
-
Network Monitor
-
See the network requests made when a page is loaded.
-
Storage Inspector
-
Inspect cookies, local storage, indexedDB and session storage present in a page.
-
Developer Toolbar
-
A command-line interface for the developer tools.
-
3D View
-
3D visualization of the page.
-
Eyedropper
-
Select a color from the page.
-
Working with iframes
-
How to target a particular iframe.
-
-
-
- -
-
-
-

মোবাইল

- -

মোবাইল ডেভেলপ করার টুলস সমূহ.

- -
-
অ্যাপ ম্যানেজার
-
ফায়ারফক্স ওএস অ্যাপ ডিজাইন এবং ডেভেলপ।
-
WebIDE
-
অ্যাাপ ম্যানেজারের প্রতিস্তাপক যা ফায়ারফক্স ৩৩ ভার্সন থেকে শুরু হয়েছে।
-
Firefox OS Simulator
-
Run and debug your Firefox OS app on the desktop, without needing a real Firefox OS device.
-
Responsive Design View
-
See how your website or app will look on different screen sizes without changing the size of your browser window.
-
Debugging on Firefox for Android
-
Connect the developer tools to Firefox for Android.
-
-
- -
-

Performance

- -

Diagnose and fix performance problems.

- -
-
Performance tool
-
Revamped JS profiler and frame rate timeline.
-
- -
-
JavaScript Profiler
-
Figure out where your JavaScript code is spending its time.
-
Paint Flashing Tool
-
Highlights the parts of the page that are repainted in response to events.
-
Reflow Event Logging
-
See reflow events in the web console.
-
Network Performance
-
See how long the parts of your site take to load.
-
-
-
- -
-
-
-

Debugging the browser

- -

By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.

- -
-
Browser Console
-
See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.
-
Browser Toolbox
-
Attach the Developer Tools to the browser itself.
-
-
- -
-

Extending the devtools

- -

The developer tools are designed to be extensible. Firefox add-ons can access the developer tools and the components they use to extend existing tools and add new tools. With the remote debugging protocol you can implement your own debugging clients and servers, enabling you to debug websites using your own tools or to debug different targets using the Firefox tools.

- -
-
Remote Debugging Protocol
-
The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.
-
Source Editor
-
A code editor built into Firefox that can be embedded in your add-on.
-
The Debugger Interface
-
An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.
-
Web Console custom output
-
How to extend and customize the output of the Web Console and the Browser Console.
-
-
-
- -
-

More resources

- -

This section lists resources which aren't maintained by Mozilla's developer tools team, but which are widely used by web developers. We've included a few Firefox add-ons in this list, but for the complete list see the “Web Development” category on addons.mozilla.org.

- -
-
-
-
Firebug
-
A very popular and powerful web development tool, including a JavaScript debugger, HTML and CSS viewer and editor, and network monitor.
-
DOM Inspector
-
Inspect, browse, and edit the DOM of web pages or XUL windows.
-
Web Developer
-
Adds a menu and a toolbar to the browser with various web developer tools.
-
-
- -
-
-
Webmaker Tools
-
A set of tools developed by Mozilla, aimed at people getting started with Web development.
-
W3C Validators
-
The W3C website hosts a number of tools to check the validity of your website, including its HTML and CSS.
-
JSHint
-
JavaScript code analysis tool.
-
-
-
diff --git a/files/bn/tools/page_inspector/index.html b/files/bn/tools/page_inspector/index.html deleted file mode 100644 index b434eaea59..0000000000 --- a/files/bn/tools/page_inspector/index.html +++ /dev/null @@ -1,280 +0,0 @@ ---- -title: পেজ ইন্সপেক্টর -slug: Tools/Page_Inspector -translation_of: Tools/Page_Inspector ---- -
{{ToolsSidebar}}

যে কোন পেজের গঠন ও লেআউট পরীক্ষা বা সংস্কারের জন্য ইন্সপেক্টর ব্যবহার করুন। 

- -

ইন্সপেক্টর ওপেন করা

- -

ইন্সপেক্টর ওপেন করার বেশ কিছু উপায় আছেঃ

- -
    -
  • 'ওয়েব ডেভলপার' মেনু থেকে 'ইন্সপেক্টর' অপশনটি choose করুন (Mac এর 'টূলস্' মেনুতে এটি একটি সাবমেনু)
    • -
  • Ctrl-Shift-C চাপুন (ম্যাক OS X ও লিনাক্সে Cmd-Option-C )
    • -
  • ওয়েব পেজের যে কোন একটি এলিমেন্টে রাইট-ক্লিক করুন এবং 'ইন্সপেক্ট এলিমেন্ট' সিলেক্ট করুন
    • -
- -

ইন্সপক্টর এক্টিভেট করার সাথে সাথে ব্রাউজার উইন্ডোর উপরে Toolbox দেখা যাবে।

- -

আপনি যদি 'ইন্সপেক্টর এলিমেন্ট' এ ক্লিক করে ইন্সপেক্টর invoke করে থাকেন তাহলে এলিমেন্ট এরই মধ্যে সিলেক্ট হয়ে থাকবে এবং ইন্সপেক্টরটি নিম্নবণিতভাবে কাজ করবে যেভাবে এটি 'সিলেক্টিং এলিমেন্টস্' এ কাজ করে।

- -

যদি তা না হয়ে থাকে তাহলে আপনি যখন আপনার মাউস পেজটিতে ঘুরাবেন তখন মাউসের নিচের এলিমেন্ট dotted বডার দিয়ে হাইলাইট হয়ে যাবে এবং একটি অ্যানোটেশন এটির HTML ট্যাগ ডিসপ্লে করবে। একই সাথে, এর HTML ডেফিনেশনও ইন্সপেক্টরের বাঁ দিকের pane কন্টেক্সটে ডিসপ্লে হয়ে যাবে।

- -

- -

এলিমেন্টের উপর ক্লিক করলে তা সিলেক্ট হয়ঃ আপনি একটি এলিমেন্ট সিলেক্ট করে থাকলে ইন্সপেক্টরটি নিচের মত দেখাবে ও কাজ করবে সেভাবে যেভাবে তা নিচের "সিলেক্টিং এলিমেন্টস্" এ কাজ কড়ে।

- -

এলিমেন্ট সিলেক্ট করা

- -

যখন একটি এলিমেন্ট সিলেক্ট করা হয় তখন তার মার্কআপ ইন্সপেক্টরের বাঁ দিকে HTML paneএ হায়লাইট হয়ে যায় এবং ইন্সপেক্টরের ডান CSS pane এর স্টাইল ইনফরমেশন শো করেঃ

- -

এভাবেই এলিমেন্ট সিলেকশনের বিভিন্ন কাজ উল্লেখযোগ্যভাবে পরিবর্তিত হ্য ফায়ারফক্স 29এ।

- -

ফায়ারফক্স 29 এর আগে

- -

আপনি যখন একবার কোন পেজে একটি এলিমেন্টে ক্লিক করে এটি সিলেক্ট করেন তখনই ইন্সপেক্টর'স ডিসপ্লে সেই এলিমেন্টে লক হয়ে যায়। সেজন্য আপনি অন্য কোন ইন্সপেক্টর না চালু করেই মাউস ঘোরাতে পারেন।

- -

এলিমেন্টের জন্য নির্ধারিত annotationটির ডানদিকে ও বাঁদিকে একটি করে বাটন থাকে। বাঁ দিকের বাটনটি আপনাকে নতুন এলিমেন্ট সিলেক্ট করার সুযোগ দিয়ে পুরনো এলিমেন্ট আনলক করে। ডানদিকের বাটনটি এলিমেন্টটির জন্য একটি পপআপ মেনু ডিসপ্লে করে।

- -

- -

ফায়ারফক্স 29 ও তার পর

- -

ফায়ারফক্স 29 থেকে পেজের কোন এলিমেন্টের সিলেক্ট করলে এর চারদিকের ডট দেওয়া বর্ডার এবং এর জন্য নির্ধারিত অনোটেশন দেখানো হয় না। এমনকি  এলিমেন্ট সিলেক্ট করার সাথে সাথে ইন্সপেক্টরগুলোও লক হয়ে যায় না। আপনি যখন মারকাপ পেন এর চারদিকে মাউসটি মুভ করেন তখন কোরেস্পন্ডিঙ এলিমেন্টের চারদিকে ডট দেওয়া বর্ডার দেখা জায়।অয়েব পেজের কোন ভিনণ এলিমেন্ট সিলেক্ট করার জন্য "Select element" বাটনটি ক্লিক করুন, যা এখন Toolbox toolbar দেখা যায়ঃ

- -

{{EmbedYouTube("zBYEg40ByCM")}}

- -

এলিমেন্ট পপআপমেনু

- -
-

ফায়ারফক্স 29 থেকে পরবর্তীতে ওয়েব পেজের অটোনেশন আর দেখা জায় না। তাই শুধুমাত্র HTML পেন এ কনট্যাক্স-ক্লিকিন এর মাধ্যমে পপআপ মেনু ওপেন করতে পারেন

-
- -

পপআপ মেনু ব্যবহার করে আপনি যে কোন নির্দিষ্ট ক্ষেত্রে বেশ কিছু সাধারণ কাজ করতে পাড়েন। আপনি দুইভাবে মেনুটি এক্টিভেট করতে পারেনঃ

- -
    -
  • ওয়েব পেজের এলিমেন্টে সংযুক্ত অ্যানোটেশনের ডানদিকের বাটনে ক্লিক করুনঃ
    • -
- -

- -
    -
  • কন্টেক্সট - HTML pane র এলিমেন্টে ক্লিক করুনঃ
    • -
- -

- -

মেনুটি আপনাকে যা যা করতে সুযোগ দেয়ঃ

- -
    -
  • এলিমেন্টের HTML এডিট করা (শুধুমাত্র ফায়ারফক্স 27 থেকে পরবর্তী)
    • -
  •  ইনার অথবা আউটার HTML কপি করা
    • -
  •  CSS সিলেক্টর কপি করা যা নিজে থেকে এলিমেন্ট সিলএক্ট করে
    • -
  • এলিমেন্ট ডিলেট করা
    • -
  • :hover, :focus এবং :active CSS সিউডো-ক্লাসগুলো সেট করা
    • -
- -

ডাটা URL হিসাবে ইমেজ কপি করা

- -
-

ডাটা URL হিসাবে কপি করা ফায়ারফক্স 29এ নতুন।

-
- -

ফায়ারফক্স 29 থেকে পরবর্তীতে, যদি currently selected এলিমেন্টটি কোন ইমেজ হয় তাহলে পপআপ মেনুতে একটি অপশন থাকে ডাটা ইউ আর এল হিসাবে ক্লিপবোর্ডে ইমেজ কপি করার জন্যঃ

- -

- -

HTML এডিট করা

- -
-

HTML এডিট করা শুধুমাত্র ফায়ারফক্স 27 এই সহজলভ্য।

-
- -

কোন এলিমেন্টের আউটারHTML এডিট করার জন্য এলিমেন্টের পপআপ মেনু এক্টিভেট করে সিলেক্ট করুন "Edit As HTML"। আপনি HTML paneএ একটি টেক্সট-বক্স দেখবেনঃ

- -

আপনি যে কোন HTML এখানে সংযোগ করতে পারবেনঃ এলিমেন্টের ট্যাগ পরিবর্তন করা, existing এলিমেন্ট পরিবর্তন করা আথবা নতুন কোন এলিমেন্ট সংযোগ করা। বক্সের বাইরে ক্লিক করার সাথে সাথে আপনার করা পরিবর্তনগুলো পেজটিতে অ্যাপ্লাই হয়ে যাবে।

- -

HTML পেন

- -

HTML পেন আপনাকে পেজটির HTML একটি গাছের আকারে দেখায় এটির শাখাগুলো collapsible. নির্ধারিত এলিমেন্টগুলোর শুরুর এবং শেষের ট্যাগগুলো ধূসর পটভূমিতে হাইলাইট করা হয়।

- -

আপনি এই পেনে সরাসরি এডিট করতে পারেন - বিভিন্ন ট্যাগ, অ্যাট্রিবিউটস এবং কন্টেন্টসঃ আপনি যেই এলিমেন্ট এডিট করতে চান তা পরিবর্তন করুন এবং পরিবর্তনগুলো সাথে সাথে দেখতে Enter ক্লিক করুন।

- -

কোন এলিমেন্টে কন্টেক্স-কিল্ক করলে তা ডিসপ্লে করে একটি পপআপ মেনু সেই এলিমেন্টে কাজ করার জন্য।

- -

HTML পেন টুলবার

- -

এই পেইন টির উপরে একটি ডেডিকেটেড টুলবার তিনটি অংশে ভাগ হয়ে আছেঃ

- -
-

ফায়ারফক্স 29 থেকে পরবর্তীতে "Select element" বাটনটি Toolbox এ মুভ করা হয়েছে।

-
- -
    -
  • এলিমেন্ট সিলেক্ট করাঃ এই বাটনটি ক্লিক করলে,আপনি ব্রাউজার উইন্ডোতে শুধুমাত্র মাউস ঘুরিয়ে বিভিন্ন এলিমেন্ট সিলেক্ট করতে পারবেন।
    • -
  • HTML ব্রেড ক্রাম্বস্ঃ যেই ব্রাঞ্চের আওতায় নির্ধারিত এলিমেন্টটি আছে তার সমস্ত hierarchy এটি দেখায়। আপনি যদি বারে কোন এলিমেন্ট ক্লিক করে ধরে থাকেন তাহলে একটি পপআপ মেনু দেখা যাবে যা আপনাকে একটি এলিমেন্টের অংশ সিলেক্ট করার সুযোগ দেয়। বারের বামদিকের ও ডানদিকের শেষের কোণার ছোট তীর চিহ্ণিত আইকনটি ক্লিক করলে সেটি বারটিকে স্ক্রল করবে যদি সেটি স্ক্রিনের থেকেও বড় হয়ে থাকে।
    • -
  • ট্যাগ খোঁজাঃ আপনি যে ট্যাগের জন্য টাইপ করেন তা খুঁজুন এখানে। "Enter" প্রেস করে পরবর্তী অকারেন্স খুঁজে পাবেন।
    • -
- -

CSS পেন

- -

CSS পেন কারেন্টলি সিলেক্টেড এলিমেন্টে ব্যবহৃত স্টাইলের তথ্য প্রদর্শন করে। চারটি ভিন্ন ভিন্ন ভিউ আছে এখানেঃ "রুলস্", "কম্পিউটেড", "ফন্টস" এবং "বক্স মডেল"। পেনের সর্ব উপরের টুলবারটি ব্যবহার করে আপনি তাদের মধ্যে সুইচ করতে পারেনঃ

- -

- -

রুলস্ ভিউ

- -

নির্ধারিত এলিমেন্টে ব্যবহৃত সব রুলস তালিকাবদ্ধ রাখে এই ভিউটি, বিশেষায়িত এর হ্রাসক্রম ভিত্তিতেঃ

- -

- -

রুলস ভিউ সিউডো-এলিমেন্টস এবং ব্যবহৃত রুলস তালিকাবদ্ধ করে।

- -

রুল ডিসপ্লে

- -

এটি একটি স্টাইলশীটে প্রত্যেকটি রুল ডিসপ্লে করে, সেক্টর এর একটি লিস্টসহ property:value; ডিকলারেশনের লিস্ট ও থাকে।

- -

যেসব রুল অন্য রুলের বিপক্ষে যায় সেগুলো কেটে দেওয়া হয়েছে। কোন নির্দেশনার উপরে মাউস রাখলে এটির নিচে একটি চেকবক্স দেখা যাবেঃকোন রুল চালু বা বন্ধ করতে আপনি এটি ব্যবহার করতে পারেন।

- -

CSS ফাইলের লিঙ্ক

- -

প্রতিটি রুলের উপরে ডান দিকে ফাইলনেম সোর্স এবং লাইন নাম্বার লিঙ্ক হিসাবে দেখানো হয়ঃ ক্লিক করলে স্টাইল এডিটর থেকে এটি ওপেন হয়ে যাবে।

- -

ফায়ারফক্স 29 থেকে পরবর্তীতে ইন্সপেক্টর CSS সোর্স ম্যাপ বোঝে। এর মানে হল আপনি যদি CSS প্রিপ্রসেসর ব্যবহার করেন যার সোর্স ম্যাপ সাপোর্ট আছে এবং তা আপনি স্টাইল এডিটর সেটিং এ সক্রিয় করেছেন তাহলে লিঙ্কটি আপনাকে প্রকৃত সোরসে নিয়ে যাবে, জেনারেটেড CSS নয়ঃ

- -

- -

CSS সোর্স ম্যাপ সাপোর্ট সম্পর্কে আরো জানুন স্টাইল এডিটর ডকুমেন্টেশন এ।

- -

রঙ নমুনা

- -
-

ফায়ারফক্স 27 থেকে পরবর্তীতে, আপনি কালার ভেল্যুর পরে দৃশ্যমান একটি রঙ নমুনা দেখতে পাবেনঃ

-
- -

- -

কালার পিকার

- -
-

ফায়ারফক্স 28 থেকে পরবর্তীতে, আপনি রঙ নমুনাতে (color sample) ক্লিক করলে রঙ পরিবর্তন করার জন্য একটি কালার পিকার দেখতে পাবেনঃ

-
- -

- -

পটভূমি-দৃশ্য পূর্ব পরিদর্শন

- -
-

ফায়ারফক্স 27 থেকে পরবর্তীতে, রুলের উপর মাউস ঘোরালে আপনি ব্যাকগ্রাউন্ড-ইমেজ বা পটভূমি-দৃশ্য  নামে বিভিন্ন ইমেজের বিশেষ ব্যবহৃত একটি প্রিভিউ দেখতে পাবেনঃ

-
- -

- -

ভিজুয়ালাইজেশন পরিবর্তন

- -
-

ফায়ারফক্স 29এ এটি নতুন।

-
- -

ফায়ারফক্স 29 থেকে পরবর্তী ক্ষেত্রে আপনি রুলস রিভিউতে কোন ট্রান্সফরম প্রপার্টিতে হোভার করলে,আপনি একটি টুলটিপ পাবেন যা আপনাকে দেখাবে এটি যা যা পরিবর্তন করে।

- -

- -

এডিট করার নিয়মাবলী

- -

আপনি যদি কোন দিক্লারেশ্নে ক্লিক করেন তবে আপনি তার বৈশিষ্ট্যাবলী বা মান সংস্কার করতে পারবেন এবং সাথে সাথেই তা দেখতে পাবেন। একটি রুলে নতুন ডিকলারেশন যুক্ত করার জন্য ক্লিক করুন রুলের সর্বশেষ লাইনটিতে (শেষ বন্ধনী দিয়ে অধিকৃত লাইনটি)। সংস্কার করার সময় যদি আপনি অপ্রচলিত মান বা কোন অজানা বৈশিষ্টের নাম প্রবেশ করান, তবে ডিকলারেশনের নিচে একটি হলুদ সতর্ক সংকেত দেখা যাবে।

- -

আপনার করা যে কোন পরিবর্তনই ক্ষণস্থায়ীঃ পেজটি পুনরায় লোড করলে প্রকৃত স্টাইল রিস্টোর হয়ে যাবে।

- -

Tip: You can use the arrow keys to increase/decrease numeric rules while editing. Up arrow will turn "1px" to 2px, and Shift+up/down will increment by 10. Alt+up/down change values by 0.1, and shift+Page up/down will add or subtract 100 from the value.

- -

কম্পিউটেড ভিউ

- -

This view organizes the style of the element by property. It lists all CSS properties which have been applied to this element in alphabetical order: it shows the calculated value that each CSS property has for for the selected element:

- -

- -

Clicking the arrow next to the property name shows the rule that set this value, along with a link to the source filename and line number:

- -

By default, it only shows values that have been explicitly set by the page: to see all values, click the "Browser styles" box.

- -

Typing in the search box performs a live filtering of the list, so, for example, if you just want to see font-related settings, you can type "font" in the search box, and only properties with "font" in the name will be listed. You can also search for the values of properties: to find the rule responsible for setting the font to "Lucida Grande", type that in the search box.

- -

ফন্টস্ ভিউ

- -

সিলেক্টেড এলিমেন্ট অনুযায়ী প্রয়োজনীয় সব ফন্ট দেখায় এটি। মনে রাখবেন, আপনি আপনার সিস্টেমে যে ফন্ট ব্যবহার করেন তাও দেখায় এটি, css এ যে ফন্ট নির্ধারণ করা আছে, তার থেকে এটি আলাদা হতে পারেঃ

- -

- -

ফন্ট ভিউতে টেক্সট ভিউ হল "Abc" ডিফল্ট অনুসারে কিন্তু আসলে এটি একটি টেক্সট এরিয়া যা পড়্যোজন মত পরিবর্তন করা যেতে পারে।

- -

বক্স মডেল ভিউ

- -

নির্দিষ্ট এই এলিমেন্টে অ্যাপ্লাই করলে এটি বক্স মডেল এর একটি গ্রাফিকাল representation দেখায়ঃ

- -

- -
    -
  • At the top-left is the total space taken by the element on the page.
    • -
  • The outside numbers tell you the margin size on each side of the element.
    • -
  • The numbers in squares on the borders tell you how wide each side's border is.
    • -
  • The next layer in shows the padding size on each side of the element.
    • -
  • Finally, in the center, is the size of the element's content.
    • -
- -

- -

 ওয়েব কনসোল এর সাহায্যে পেজ ইন্সপেক্টর ব্যবহার করা

- -

ওয়েব কনসোলকে আপনি পেজ ইন্সপেক্টর হিসাবেও ব্যবহার করতে পারেন। এমনকি আপনি একটি বোনাস ফিচার ও পIবেন! আপনি যদি পেজ ইন্সপেক্টরে কোন এলিমেন্ট সিলেক্ট করে থাকেন তবে তাও variable $0. ব্যবহার করে ওয়েব কনসোলের জাভাস্ক্রিপ্টে পাঠানো যাবে।
-  

- -

- -

ডেভলপার API

- -

ফায়ারফক্স এডঅনস্ এই কন্টেক্স chrome://browser/content/devtools/inspector/inspector.xul থেকে নিচের বিভিন্ন অবযেক্টে প্রবেশ করতে পারেঃ

- -

উইন্ডো.ইন্সপেক্টর

- -

ইন্সপেক্টর-পেনেল.js এ আলোচিত। বিভিন্ন এট্রিবিউটস্ এবং ফানশনঃ

- -
    -
  • .নির্ধারণ - ইন্সপেক্টর সেকশন সম্পর্কিত তথ্যঃ -
      -
    • .isNode() - returns true if selection is node.
      • -
    • .node - returns the actual element from the page
      • -
    • .window - the window object of the frame the selection is in.
      • -
    -
    • -
  • .markDirty() - marks that the page has been changed by the inspector - a warning will be shown when leaving the page, since changes made through the inspector are rewritten on reload.
    • -
- -

Bindable events using on:

- -

মার্কআপ লোডেড

- -

বামদিকের পেনেল রিফ্রেশ করার পর যখন পেজ পরিবর্তন কার হয় তখন এর প্রয়োজন হয়।

- -

ready

- -

প্রথম মার্কআপ লোডে দরকার হয়।

- -

সিউডোক্লাস

- -

Called after toggle of a pseudoclass.

- -

লে-আউট পরিবর্তন

- -

"paint and resize এর মত কম গুরুত্বপূর্ণ পরিবর্তন ইভেন্ট।"

- -

কীবোর্ড শর্টকাটস

- -

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "page-inspector") }}

- -

গ্লোবাল শর্ট-কাটস

- -

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

- -

{{ languages( { "ja": "ja/Tools/Page_Inspector"} ) }}

diff --git a/files/bn/tools/style_editor/index.html b/files/bn/tools/style_editor/index.html deleted file mode 100644 index 54509b86ca..0000000000 --- a/files/bn/tools/style_editor/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: স্টাইল এডিটর -slug: Tools/Style_Editor -translation_of: Tools/Style_Editor ---- -
{{ToolsSidebar}}

স্টাইল সীট এডিটর আপনাকে সক্ষম করবে ঃ

- -
    -
  • পেজ এর সাথে যুক্ত স্টাইলসীট দেখতে এবং এডিট করতে 
    • -
  • scratch থেকে নতুন স্টাইলসীট তৈরি করতে এবং পেজ তা ব্যবহার করতে
    • -
  • তৈরিক্রিত স্টাইলসীট নিয়ে আসতে এবং পেজ এ তা ব্যবহার করতে
    • -
- -

IFrame

- -

স্টাইল এডিটর খুলতে হলে  "Web developer" মেনু থেকে "Style Editor" বাছাই করতে হবে( যা Mac এর "Tools" মেনু এর সাবমেনু)।স্টাইল এডিটর সক্রিয় হউয়ার সাথে সাথে ,Toolbox ব্রাউজার এর পাদদেশ দৃশ্যমান হবে:

- -

- -

স্টাইল এডিটর প্রধান দুই ভাগ এ বিভক্ত : বামপাশ এর স্টাইল সীট প্যান , এবং ডানপাশ এর এডিটর।

- -

স্টাইল সীট প্যান

- -

বামপাশ এর স্টাইল সীট, বর্তমান ডকুমেন্ট এর ব্যবহৃত স্টাইলসীট এর তালিকা দিবে।সীট এর নাম এর বামপাশ দেওয়া  eyeball আইকন এ ক্লিক করার মাধ্যমে আপনি দ্রুত গিভেন সীট ব্যবহার এর  অন এবং অফ  এ toggle করতে পারবেন।লিস্ট এ থাকা প্রত্যেক সীট এর কোণার নীচের অংশের ডানদিকে অবস্থিত সেভ বাটন এ ক্লিক করে আপনি আপনার স্টাইল সীট এর যেকোনো পরিবর্তন আপনার লোকাল কম্পিউটার এ সেভ করতে পারবেন।

- -

এডিটর প্যান

- -

ডানপাশ এর অংশ টি হচ্ছে এডিটর প্যান। এখানে আপনার জন্য নির্বাচিত কয়েকটি স্টাইল সীট এর সোর্স পড়তে এবং এডিট করতে দেওয়া আছে । পেজ এর যেকোনো পরিবর্তন এটিতে অবিলম্বে কাজ করবে। এটি পরীক্ষা করতে,পরিবর্তন করতে এবং সংশোধন করতে সহজ করে তোলে। আপনি যখন আপনার পরিবর্তন নিয়ে সন্তুষ্ট হবেন, তখন স্টাইল সীট প্যান এর এন্ট্রিতে যে সেভ বাটন আছে তাতে ক্লিক করে একটি কপি লোকাল হিসেবে সেভ করতে পারবেন।   

- -

এডিটর আপনার  CSS কে সহজ ভাবে পরার জন্য লাইন সংখ্যা এবং syntax hightiliting দিয়ে থাকে।এতে  কয়েকটি  keyboard shortcuts ও সাপোর্ট করে।

- -

 স্টাইল এডিটর অরিজিনাল টি কে পরিবর্তন না করে,সক্রিয় ভাবে de-minimize করে।এটি খুব অনুকুলে সহজ ভাবে পেজে কাজ করতে সাহায্য করে।

- -

অটোকমপ্লিট

- -

অটোকমপ্লিট  ফায়ারফক্স ২৯ এ নতুন

- -

ফায়ারফক্স ২৯ হতে,স্টাইল এডিটর অটোকমপ্লিট সমর্থন করে।টাইপ শুরু করলে ইহা সাজেশন প্রস্তাব করে।

- -

আপনি এটি Style Editor settings এ বন্দধ করে দিতে পারবেন

- -

স্টাইলসীট তৈরি করা এবং আমদানি করা

- -

টুলবার এর নিউ বাটন এ ক্লিক করে আপনি নতুন স্টাইল সীট তৈরি করতে পারবেন।এরপর আপনি নতুন এডিটর এ  CSS দেয়ার মাধ্যমে শুরু করতে পারেন এবং নতুন স্টাইল যা ব্যবহার করেছেন তা দেখতে পারবেন অন্যান্য সীট এর মত সরাসরি।

- -

আপনি ডিস্ক থেকে স্টাইল সীট লোড করতে পারবেন এবং ইম্পোর্ট বাটন এ ক্লিক করে পেজ এ ব্যবহার করতে পারবেন।

- -

সোর্স ম্যাপ সাপোর্ট

- -
-

CSS সোর্স ম্যাপ সাপোর্ট ফায়ারফক্স ২৯ এ নতুন বৈশিষ্ট্

-
- -

{{EmbedYouTube("zu2eZbYtEUQ")}}

- -

প্রি প্রসেসর যেমন  Sass, Less, অথবা Stylus ব্যবহার করে ওয়েব ডেভেলপাররা প্রায়ই CSS ফাইল তৈরী করে।এই টুল আরও গরীয়ান এবং অভিবাক্তপূর্ণ শব্দবিন্যাস থেকে CSS ফাইল  তৈরী করতে সাহায্য করে। আপনি যদি এটি করেন তাহলে দেখতে পাবেন যে,তৈরীক্রিত CSS দেখতে পাওয়া এবং এডিট করা তেমন সুবিধা জনক না,কারন যে কোড আপনি ধারন করছেন তা প্রি প্রসেসর শব্দবিন্যাস,আপনার তৈরীক্রিত নয়। তাই আপনাকে তৈরীক্রিত CSS এডিট করতে হবে তারসাথে এটি পুনরাই অরিজিনাল সোর্স এ মানুয়াল্-ই কাজ করাতে হবে।

- -

সোর্স ম্যাপ টুল গুলো আপনাকে তৈরীক্রিত CSS থেকে অরিজিনাল শব্দবিন্যাস  এ ফিরিয়ে আনতে সাহায্য করে,যাতে তাদের দেখা যায় এবং অরিজিনাল শব্দবিন্যাস এর ফাইল গুলো কে আপনি এডিট করতে পারেন।ফায়ারফক্স ২৯ স্টাইল এডিটর CSS সোর্স ম্যাপ ধরতে পারে।

- -

এটার মানে এই যে,ধরুন আপনি  Sass দিলেন তাহলে স্টাইল এডিটর আপনাকে  Sass ফাইল দেখাবে এবং এডিট করতে দিবে,তাদের তৈরী CSS নয় :

- -

- -

এইটা কাজ করানোর জন্য আপনার উচিত :

- -
    -
  • CSS প্রসেসর ব্যবহার করতে হবে যা  Source Map Revision 3 proposal বুঝতে পারে। বর্তমানে এটা 3.3.0 prerelease version of Sass অথবা 1.5.0 version of Less কে বুঝায়।অন্যান্য প্রি প্রসেসর সরাসরি ভাবে এটাকে সাপোর্ট করতে বা ধরতে কাজ করছে।
    • -
  • আসলে প্রসেসর কে সোর্স ম্যাপ তৈরী করতে নির্দেশ দিতে হবে, যেমন  --sourcemap আর্গুমেন্ট টি Sass কমান্ড-লাইন টুল এ পাস করা।
    • -
  • ফায়ারফক্স ২৯ অথবা পরবর্তী ফায়ারফক্স ব্যবহার করা।
    • -
- -

অরিজিনাল সোর্স গুলো দেখা

- -

এখন আপনি যদি  Style Editor settings এর "Show original sources" টি দেখেন, Rules view  এর CSS রুল গুলো এর পরবর্তী লিংক স্টাইল সীট এর অরিজিনাল সোর্স এ নিয়ে যাবে।

- -

এডিট অরিজিনাল সোর্স

- -

আপনি স্টাইল এডিটর এর অরিজিনাল সোর্স গুলো এডিট করতে পারবেন এবং যা ব্যবহার করা হয়েছে তা ঠিক তখনি সরাসরি দেখা যাবে।এটা কে কাজ করানোর জন্য আরও দুটি স্টেপ আছে।

- -

প্রথমে,আপনার প্রসেসর টিকে এমন ভাবে তৈরী করুন যাতে তা অরিজিনাল সোর্স কে দেখতে পারে এবং নিজস্ব ভাবে CSS তৈরী করে সোর্স পরিবর্তন করার সাথে সাথে। Sass এ আপনি --watch অপশন টি দেওয়ার মাধ্যমে কাজ টি করতে পাড়েন:

- -

sass index.scss:index.css --sourcemap --watch

- -

পরবর্তী তে,ফাইল এর পাশে "Save" বাটন এ ক্লিক করে স্টাইল এডিটর থেকে অরিজিনাল সোর্স সেভ করতে হবে, এবং অরিজিনাল ফাইল এ সেভ করতে হবে।

- -

এখন আপনি যখন স্টাইল এডিটর এর সোর্স ফাইল পরিবর্তন করবেন,CSS একাই তৈরী হবে এবংপরিবর্তন টি আপনি তখন-ই দেখতে পারবেন।

- -

কীবোর্ড শর্টকাট

- -

সোর্স এডিটর শর্টকাট

- -

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

- -

{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}

diff --git a/files/bn/web/accessibility/index.html b/files/bn/web/accessibility/index.html deleted file mode 100644 index 3ec2777da5..0000000000 --- a/files/bn/web/accessibility/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: ব্যবহারযোগ্যতা -slug: Web/Accessibility -tags: - - Accessibility - - Advanced - - Landing - - Web Development -translation_of: Web/Accessibility ---- -

ভিতরে অনেক মানুষ as সম্ভব হিসেবে সক্ষম করা ওয়েব ব্যবহার করতে বুঝায় সাইট, যখন ওগুলো মানুষকে-এর সামর্থ্য কিছু পথে সীমাবদ্ধ করা হয়. ভিতরে অনেক মানুষ as সম্ভব হিসেবে সক্ষম করা ওয়েব ব্যবহার করতে বুঝায় সাইট, যখন ওগুলো মানুষকে-এর সামর্থ্য কিছু পথে সীমাবদ্ধ করা হয়.

- -

"accessibility সবচেয়ে বেশী ঘন ঘন সুযোগসুবিধা বা নাগরিক সুবিধা বর্ণনা করতে বিকলত্ব-এর, as এর 'সাথে মানুষকে সাহায্য করতে অভ্যস্ত আছে'. This can extend to Braille signage, wheelchair ramps, audio signals at pedestrian crossings, walkway contours, website design, and so on." Wikipedia entry for Accessibility

- - - -

"ওয়েব মৌলিকভাবে সব মানুষ-এর জন্য কাজ করতে ডিজাইন করা হয়, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability." W3C - Accessibility

- -
-
-

ডকুমেন্টেশন

- -
-
ওয়েব ডেভেলপমেন্ট
-
-
- -
- - - - - - - - -
রচনার একটি সংগ্রহ প্রবেশযোগ্যতার দুনিয়ায় ওয়েব ‌উন্নয়ন ইস্যু তুলে ধরতে মনোনীত করল।
-
-
-
ARIA
-
রচনার একটি সংগ্রহ শিখতে যেভাবে aria আপনার html ডকুমেন্ট আরও সহজগম্য বানাতে ব্যবহার করতে।
-
Assistive technology (AT) development
-
রচনার at ডেভেলাপার-এর জন্য উদ্দেশ্য করা একটি সংগ্রহ
-
- -

View all articles about Accessibility...

-
- -
-

ওয়েব ডেভেলপারদের জন্য টুল সমূহ

- - - -

View All...

- -

অন্যান্য উপকারী সাইট

- - -
-
diff --git a/files/bn/web/api/battery_status_api/index.html b/files/bn/web/api/battery_status_api/index.html deleted file mode 100644 index b75994d356..0000000000 --- a/files/bn/web/api/battery_status_api/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Battery Status API -slug: Web/API/Battery_Status_API -translation_of: Web/API/Battery_Status_API ---- -
{{DefaultAPISidebar("ব্যাটারি API")}}
- -

ব্যাটারি অবস্থা API টি, প্রায়ই ব্যাটারি API হিসাবে বলা হয়, সিস্টেমের ব্যাটারি চার্জ লেভেল সম্পর্কে তথ্য সরবরাহ করে এবং যখন ব্যাটারি লেভেল বা করার অবস্থা পরিবর্তন করা হয় তখন প্রেরিত ইভেন্টগুলি দ্বারা আপনাকে সূচিত করে। ব্যাটারির চার্জ কম থাকলে এটি আপনার অ্যাপের সম্পদ ব্যবহারকে সামঞ্জস্য করে ব্যাটারী নিষ্কাশন কমাতে  বা ডেটা ক্ষতি প্রতিরোধ করার জন্য ব্যাটারি শেষ হত্তয়ার আগে পরিবর্তন সংরক্ষণ করতে  ব্যবহার করা যেতে পারে।

- -

ব্যাটারি অবস্থা API ব্যাটারি প্রতিশ্রুতি ফিরিয়ে আনার একটি {{domxref("navigator.getBattery()")}} মেথড/পদ্ধতিতে {{domxref("window.navigator")}}- কে প্রসারিত করে, যা একটি {{domxref("BatteryManager")}} অবজেক্টে সমাধান করা হয় যা আপনাকে ব্যাটারি অবস্থা নিরীক্ষণ করার জন্য কিছু নতুন ইভেন্টগুলি পরিচালনা করতে পারে.

- -

উদাহরণ

- -

এই উদাহরণে, আমরা চার্জিং অবস্থা (আমরা প্লাগ ইন এবং চার্জিং কিনা তাও) এর ব্যাটারি স্তর এবং সময় পরিবর্তনের উভয় পরিবর্তনগুলির জন্য দেখতে পাই। এটি {{event("chargingchange")}}, {{event("levelchange")}}, {{event("chargingtimechange")}}, {{event("dischargingtimechange")}} ইভেন্টগুলি শোনার মাধ্যমে সম্পন্ন করা হয়।

- -
navigator.getBattery().then(function(battery) {
-  function updateAllBatteryInfo(){
-    updateChargeInfo();
-    updateLevelInfo();
-    updateChargingInfo();
-    updateDischargingInfo();
-  }
-  updateAllBatteryInfo();
-
-  battery.addEventListener('chargingchange', function(){
-    updateChargeInfo();
-  });
-  function updateChargeInfo(){
-    console.log("Battery charging? "
-                + (battery.charging ? "Yes" : "No"));
-  }
-
-  battery.addEventListener('levelchange', function(){
-    updateLevelInfo();
-  });
-  function updateLevelInfo(){
-    console.log("Battery level: "
-                + battery.level * 100 + "%");
-  }
-
-  battery.addEventListener('chargingtimechange', function(){
-    updateChargingInfo();
-  });
-  function updateChargingInfo(){
-    console.log("Battery charging time: "
-                 + battery.chargingTime + " seconds");
-  }
-
-  battery.addEventListener('dischargingtimechange', function(){
-    updateDischargingInfo();
-  });
-  function updateDischargingInfo(){
-    console.log("Battery discharging time: "
-                 + battery.dischargingTime + " seconds");
-  }
-
-});
-
- -

আরো দেখুন the example in the specification.

- -

সবিস্তার বিবরণী

- - - - - - - - - - - - - - - - -
সবিস্তার বিবরণীঅবস্থামন্তব্য
{{SpecName("Battery API")}}{{Spec2("Battery API")}}প্রাথমিক সংজ্ঞা
- -

উপযুক্তত ব্রাউজার

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
বৈশিষ্ট্যসূচকChromeFirefox (Gecko)Internet ExplorerOperaSafari
মৌলিক সমর্থন{{CompatChrome(39.0)}}{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}
- {{CompatGeckoDesktop("16")}}[1]
- {{CompatGeckoDesktop("43")}}[3]
- {{CompatGeckoDesktop("52")}}[4]		{{CompatNo}}25{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
বৈশিষ্ট্যসূচকAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
মৌলিক সমর্থন{{CompatNo}}{{CompatChrome(40.0)}} -

{{CompatGeckoMobile("10")}} {{property_prefix("moz")}}
- {{CompatGeckoMobile("16")}}[1]
- {{CompatGeckoMobile("43")}}[3]
- {{CompatGeckoMobile("52")}}[3]

- 		{{CompatNo}}25[2]{{CompatNo}}{{CompatChrome(42.0)}}[2]
-
- -

[1] Disabled by default in Firefox 10.0, but can be enabled setting the preference dom.battery.enabled to true. Starting with Firefox 11.0, mozBattery is enabled by default. The ব্যাটারি API is currently supported on Android, Windows, and Linux with UPower installed. Support for MacOS is available starting with Gecko 18.0 {{geckoRelease("18.0")}}. Firefox also provides support for the deprecated {{domxref("navigator.battery")}}.

- -

[2] Values for {{domxref("BatteryManager.chargingTime")}} and {{domxref("BatteryManager.dischargingTime")}} are always equal to Infinity.

- -

[3] The new promise-based syntax for {{domxref("Navigator.getBattery()")}} is supported from Firefox 43 onwards.

- -

[4] From Firefox 52 onwards, the ব্যাটারি অবস্থা API is only available in chrome/privileged code.

- -

আরো দেখুন

- - diff --git a/files/bn/web/api/canvas_api/index.html b/files/bn/web/api/canvas_api/index.html deleted file mode 100644 index 57707b86b6..0000000000 --- a/files/bn/web/api/canvas_api/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: ক্যানভাস -slug: Web/API/Canvas_API -translation_of: Web/API/Canvas_API -original_slug: Web/HTML/Canvas ---- -

 HTML5 এ যুক্ত HTML {{HTMLElement("canvas")}} এলিমেন্টটি ব্যবহার করে স্ক্রিপ্টিংয়ের (সাধারণত জাভাস্ক্রিপ্ট) সাহায্যে গ্রাফিক্স আঁকা যায়। উদাহরণস্বরুপ, এটি গ্রাফিক্স আঁকা, ছবির কম্পোজিশন তৈরি করা, অ্যানিমেশন তৈরি করা অথবা এমনি রিয়েল-টাইম ভিডিও রেন্ডারিং অথবা প্রসেসিংয়ের কাজেও ব্যবহার করা যায়।

-

<canvas> এর জন্য মোজিলা অ্যাপ্লিকেশনসমূহ সাপোর্ট পাওয়া শুরু করেছে গিকো ১.৮ (বা ফায়ারফক্স ১.৫) থেকে। মূলত এ্যাপল তাদের ড্যাশবোর্ড এবং সাফারির জন্য এলিমেন্টটি প্রকাশ করে। ইন্টারনেট এক্সপ্লোরার ৯ ভার্সন থেকে <canvas> সাপোর্ট করে; ইন্টারনেট এক্সপ্লোরারের পুরনো সংস্করণের জন্য গুগলের Explorer Canvas প্রজেক্টের একটি স্ক্রিপ্ট যুক্ত করে কার্যকরভাবে <canvas> এর সাপোর্ট যোগ করা যায়। গুগল ক্রোম এবং অপেরা ৯ <canvas> ক্যানভাস সাপোর্ট করে।

-

<canvas> টি দিয়ে WebGL এর সাহায্যে হার্ডওয়্যার-এক্সেলারেশনের মাধ্যমে ওয়েব পেজে ত্রিমাত্রিক (3D) গ্রাফিক্স দেখানো সম্ভব।

-
-
-

ডকুমেন্টেশন

-
-
- স্পেসিফিকেশন
-
- <canvas> এলিমেট হল WhatWG ওয়েব অ্যাপ্লিকেশনস ১.০ স্পেসিফিকেশন বা HTML5 এর অংশ।
-
- ক্যানভাস টিউটোরিয়াল
-
-  <canvas> এর সাধারণ ব্যবহার এবং এর অ্যাডভান্সড ফিচারের ওপর একটি বিস্তারিত টিউটোরিয়াল।
-
- কোড স্নিপেট: ক্যানভাস
-
- <canvas> সংক্রান্ত এক্সটেনশন ডেভেলপার সংশ্লিষ্ট কোড স্নিপেট।
-
- ক্যানভাস উদাহরণ
-
- কিছু <canvas> ডেমো।
-
- ক্যানভাসে DOM অবজেক্ট আঁকা
-
- যেভাবে HTML এলিমেন্টের ন্যায় DOM কন্টেন্ট একটি ক্যানভাসে আঁকবেন।
-
- একটি সাধারণ raycaster
-
- ক্যানভাসের সাহায্যে ray-tracing এনিমেশনের ডেমো।
-
- ক্যানভাস DOM ইন্টারফেস
-
- গিকোতে ক্যানভাস DOM ইন্টারফেস সমূহ।
-
-

সব দেখুন...

-
-
-

কমিউনিটি

- -

তথ্যভান্ডার

- -

লাইব্রেরি

-
    -
  • libCanvas একটি হালকা ও শক্তিশালী ক্যানভাস ফ্রেমওয়ার্ক
    • -
  • Processing.js হল প্রসেসিং ভিজ্যুয়ালাইজেশন ল্যাঙ্গুয়েজের পোর্ট
    • -
  • EaselJS হল একটি ফ্ল্যাশের মত API সমৃদ্ধ লাইব্রেরি
    • -
  • PlotKit হল একটি চার্ট ও গ্রাফ তৈরির লাইব্রেরি
    • -
  • Rekapi হল ক্যানভাসের জন্য অ্যানিমেশনের কি-ফ্রেম করার API।
    • -
  • PhiloGL হল ডাটা ভিজ্যুয়ালাইজেশন, সৃজনশীল কোডিং ও গেম ডেভেলপমেন্টের জন্য একটি WebGL ফ্রেমওয়ার্ক।
    • -
  • JavaScript InfoVis Toolkit ওয়েবের জন্য ইন্টারএ্যাক্টিভ 2D ক্যানভাস ডাটা ভিজ্যুয়ালাইজেশন তৈরি করে।
    • -
  • Frame-Engine হল অ্যাপ্লিকেশন ও গেম ডেভেলপ করার একটি ফ্রেমওয়ার্ক।
    • -
- - -
-
-
- {{HTML5ArticleTOC()}}
diff --git a/files/bn/web/api/canvas_api/tutorial/index.html b/files/bn/web/api/canvas_api/tutorial/index.html deleted file mode 100644 index 1b898bc440..0000000000 --- a/files/bn/web/api/canvas_api/tutorial/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: ক্যানভাস টিউটোরিয়াল -slug: Web/API/Canvas_API/Tutorial -tags: - - NeedsReview -translation_of: Web/API/Canvas_API/Tutorial -original_slug: Web/Guide/HTML/Canvas_tutorial ---- -

-

<canvas> হচ্ছে একটি HTML element যেটা স্ক্রিপ্টিং (সাধারণত JavaScript ) ব্যবহার করে  গ্রাফিক্স আঁকার জন্য ব্যবহার করা হয় । উদাহরণস্বরূপ  গ্রাফ আঁকতে, ছবি কম্পোজিশন অথবা সাধারন ( তবে বেশি সাধারন নয় ) অ্যানিমেশন তৈরি করতে এটি ব্যবহার করা হয় । ডানপাশের ছবিতে <canvas> প্রয়োগ করে কিছু উদাহরণ দেওয়া হয়েছে যা আমরা পরে এর টিউটোরিয়াল এ দেখবো।

-

<canvas> সর্বপ্রথম Apple এর Mac OS X ড্যাশবোর্ড এ ব্যবহার করার জন্য প্রকাশিত হয় এবং পরে Safari এবং  Google Chrome এ প্রয়োগ করা হয়. Gecko 1.8- ভিত্তিক browsers, যেমন Firefox 1.5 ও এই element কে সমর্থন করে. এই <canvas> element হচ্ছে  WhatWG Web applications 1.0 এর একটি অংশ যা HTML5 নামেও পরিচিত।

-

এই টিউটোরিয়াল কিভাবে <canvas> element ব্যবহার করে প্রাথমিক ভাবে 2D গ্রাফিক্স তৈরি করা যায় তা বর্ণনা করে । আপনি canvas ব্যবহার করে কি করতে পারবেন এই উদাহরণগুলো তার সুস্পষ্ট ধারণা দেয় এবং code কে snippets করে আপনার নিজের কাঙ্ক্ষিত বিষয়কে তৈরি করতে শুরু করে ।

-

শুরু করার পূর্বে

-

<canvas> element ব্যবহার করা কঠিন কিছু নয় তবে আপনার HTML এবং  JavaScript সম্পর্কে প্রাথমিক ধারণা থাকতে হবে । কিছু পুরাতন browsers এ  <canvas> element সমর্থন করে না, কিন্তু সম্প্রতি সকল প্রধান browsers গুলো তে সমর্থন করে ।  canvas এর default সাইজ হচ্ছে 300px * 150px (width * height). কিন্তু custom size গুলো CSS এর height এবং width property ব্যবহার করে উল্লেখ করা যায় । canvas এ গ্রাফিক্স আঁকতে গেলে আমরা javascript context object ব্যবহার করি , যা গ্রাফিক্সটিকে অনেক উন্নতমানের করে তুলে ।

-

এই টিউটোরিয়াল এ যা আছে

- -

আরও দেখুন

- -

A note to contributors

-

Due to an unfortunate technical error that occurred the week of June 17, 2013, we lost the history of this tutorial, including attributions to all past contributors to its content. We apologize for this, and hope you'll forgive this unfortunate mishap.

-
- {{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}
diff --git a/files/bn/web/api/document/hasfocus/index.html b/files/bn/web/api/document/hasfocus/index.html deleted file mode 100644 index 5942e02118..0000000000 --- a/files/bn/web/api/document/hasfocus/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Focus management in HTML -slug: Web/API/Document/hasFocus -translation_of: Web/API/Document/hasFocus -translation_of_original: Web/HTML/Focus_management_in_HTML -original_slug: Web/HTML/Focus_management_in_HTML ---- -

এইচটিএমএল৫ এর ওয়ার্কিং ড্রাফট, একটিভআলিমেন্ত ডোম অ্যাট্রিবিউট এবং হেজফোকাস() ডোম মেথড প্রোগ্রামারকে ইউজার এর কারনে পেজ এর ইন্টারআক্তিভিটিতে আরও ভালো নিয়ন্ত্রণ করার ক্ষমতা দেয়। উদাহরণস্বরূপ, দুইটিকে পরিসংখ্যান এর সাধারণ উদ্দেশে ব্যাবহার করা যায়, একটি পেজ এর কিছু লিংকের ক্লিক সংখ্যা বের করা,একটি এলিমেন্তের উপর ফোকাসের সময় বের করা, এবং আরও অনেক।অতিরিক্ত, আজাক্স টেকনোলজির সাহায্যে, সার্ভারের রিকুস্তের সংখ্যা কমানো যায় যা ইউজার এবং পেজ এর লেআউট এর উপর নির্ভর করে।

- -

ব্রাউজার কম্পাতিবিলিটি

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatUnknown}}{{CompatGeckoDesktop("1.9.2")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[১] গিককো ৮.০ তে শুরু {{geckoRelease("8.0")}},ফায়ারফক্স এখন একটি ফোকাস রিং আঁকে যেকোনো এলিমেন্ত এর উপর যখন তার তাবিনেক্স ভেলু ০ থেকে বড়, শুধু একটি সীমিত সাবসেট আইটেমস এর পরিবর্তে। এই নিয়মের কিছু বাতিক্রম আছেঃ  {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, {{HTMLElement("iframe")}}, {{HTMLElement("frame")}}, {{HTMLElement("body")}}, and {{HTMLElement("html")}}.

- -

আরও দেখুন

- -
    -
  • {{domxref("document.activeElement")}}
    • -
  • {{domxref("document.hasFocus")}}
    • -
diff --git a/files/bn/web/api/document_object_model/index.html b/files/bn/web/api/document_object_model/index.html deleted file mode 100644 index 2a99d1e376..0000000000 --- a/files/bn/web/api/document_object_model/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: ডকুমেন্ট অবজেক্ট মডেল (DOM) -slug: Web/API/Document_Object_Model -tags: - - DOM - - NeedsTranslation - - References - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: DOM -original_slug: DOM ---- -
-
- W3C DOM এর ১ম কোর লেভেল ব্যবহার করা
- W3C DOM এর হাতেখড়ি।
-
-
-

ডকুমেন্ট অবজেক্ট মডেল (Document Object Model) বা সংক্ষেপে DOM হচ্ছে HTML এবং XML ডকুমেন্ট ম্যানিপুলেট করার জন্য একটি অ্যাপ্লিকেশন প্রোগ্রামিং ইন্টারফেস বা API । এটা ডকুমেন্ট এর একটি গাঠনিক উপস্থাপনা প্রদান করে, আর আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করে এর ভেতরে থাকা কন্টেন্ট এবং দৃশ্যমান উপাদানগুলোকে সংশোধন করার সুবিধা প্রদান করে।

-
-
-
-

DOM সম্পর্কে ডকুমেন্টেশন

-
-
- DOM রেফারেন্স
-
- ডকুমেন্ট অবজেক্ট মডেল এর রেফারেন্স।
-
- ডকুমেন্ট অবজেক্ট মডেল সম্পর্কে
-
- DOM সম্পর্কে সংক্ষিপ্ত বর্ণনা।
-
- DOM এবং জাভাস্ক্রিপ্ট
-
- DOM কি ? জাভাস্ক্রিপ্ট কি ? কিভাবে আমি এই দুটোকে একসাথে আমার ওয়েব পেজে ব্যবহার করব ? এখানে পাবেন এমন সব প্রশ্নের উত্তর।
-
- ডায়নামিক স্টাইলিং তথ্য ব্যবহার করা
-
- DOM এর মাদ্ধমে কিভাবে তথ্য সংগ্রহ করা যায় এবং স্টাইলিং ম্যানিপুলেট করা যায়।
-
- DOM ইভেন্ট রেফারেন্স
-
- DOM ইভেন্ট সমূহের অর্থসহ তালিকা।
-
- History API: ব্রাউজারের ইতিহাস ম্যানিপুলেট করা
-
- HTML5-এ চালু হওয়া DOM এর বর্ণনা করে {{ domxref("window.history") }} অবজেক্ট, ব্রাউজারের ইতিহাস ডায়নামিক্যালি পরিবর্তন করার সুবিধা প্রদান করে।
-
- ফাইল API: ওয়েব অ্যাপ্লিকেশন থেকে ফাইল ব্যবহার করা
-
- HTML5-এ প্রবর্তিত লোকাল ফাইল নির্বাচন করার এবং পড়ার ক্ষমতা বর্ণনা।
-
- Page এর Visibility API ব্যবহার করা
-
- এখানে বর্ণনা করা হয়েছে, কিভাবে একটি ওয়েব পেজ সনাক্ত করতে হবে এবং উক্ত ওয়েব পেজ থেকে প্রাপ্ত তথ্য ব্যবহার করতে হবে; সেটা ব্যাকগ্রাউন্ডে ব্যবহৃত হোক বা ফোরগ্রাউন্ডে।
-
- Fullscreen API: ফুলস্ক্রিন মোড ব্যবহার করা
-
- এতে বর্ণনা করা হয়েছে, কিভাবে একটি পেজকে ব্রাউজারের কোন এলিমেন্ট ছাড়া সমগ্র স্ক্রিন জুড়ে দেখার জন্য তৈরি করতে হবে।
-
- এলিমেন্টের মাত্রা নির্ণয়
-
- আপনার প্রয়োজন অনুযায়ী সঠিক ভাবে এলিমেন্টের মাত্রা নির্ধারণের কৌশল এখানে বর্ণনা করা হয়েছে।
-
- Dynamically modifying XUL-based user interface
-
- The basics of manipulating the XUL UI with DOM methods.
-
-

View All...

-
-
-

Getting help from the community

-

You need help on a DOM-related problem and can't find the solution in the documentation?

-
    -
  • Consult the dedicated Mozilla forum: {{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}
    • -
-

Tools easing working with the DOM

- -

View All...

- - -
-
-

 

diff --git a/files/bn/web/api/event/index.html b/files/bn/web/api/event/index.html deleted file mode 100644 index 3f71223347..0000000000 --- a/files/bn/web/api/event/index.html +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: Event -slug: Web/API/Event -tags: - - API - - Constructor - - DOM - - Event - - Interface - - NeedsTranslation - - Reference - - TopicStub - - UI - - listener -translation_of: Web/API/Event ---- -

{{APIRef("DOM")}}

- -

The Event interface represents an event which takes place in the DOM.

- -

An event can be triggered by the user action e.g. clicking the mouse button or tapping keyboard, or generated by APIs to represent the progress of an asynchronous task. It can also be triggered programmatically, such as by calling the HTMLElement.click() method of an element, or by defining the event, then sending it to a specified target using EventTarget.dispatchEvent().

- -

There are many types of events, some of which use other interfaces based on the main Event interface. Event itself contains the properties and methods which are common to all events.

- -

Many DOM elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them. Event-handlers are usually connected (or "attached") to various HTML elements (such as <button>, <div>, <span>, etc.) using EventTarget.addEventListener(), and this generally replaces using the old HTML event handler attributes. Further, when properly added, such handlers can also be disconnected if needed using removeEventListener().

- -
-

Note: One element can have several such handlers, even for the exact same event—particularly if separate, independent code modules attach them, each for its own independent purposes. (For example, a webpage with an advertising-module and statistics-module both monitoring video-watching.)

-
- -

When there are many nested elements, each with its own handler(s), event processing can become very complicated—especially where a parent element receives the very same event as its child elements because "spatially" they overlap so the event technically occurs in both, and the processing order of such events depends on the Event bubbling and capture settings of each handler triggered.

- -

Interfaces based on Event

- -

Below is a list of interfaces which are based on the main Event interface, with links to their respective documentation in the MDN API reference.

- -

Note that all event interfaces have names which end in "Event".

- -
-
    -
  • {{domxref("AnimationEvent")}}
    • -
  • {{domxref("AudioProcessingEvent")}}
    • -
  • {{domxref("BeforeInputEvent")}}
    • -
  • {{domxref("BeforeUnloadEvent")}}
    • -
  • {{domxref("BlobEvent")}}
    • -
  • {{domxref("ClipboardEvent")}}
    • -
  • {{domxref("CloseEvent")}}
    • -
  • {{domxref("CompositionEvent")}}
    • -
  • {{domxref("CSSFontFaceLoadEvent")}}
    • -
  • {{domxref("CustomEvent")}}
    • -
  • {{domxref("DeviceLightEvent")}}
    • -
  • {{domxref("DeviceMotionEvent")}}
    • -
  • {{domxref("DeviceOrientationEvent")}}
    • -
  • {{domxref("DeviceProximityEvent")}}
    • -
  • {{domxref("DOMTransactionEvent")}}
    • -
  • {{domxref("DragEvent")}}
    • -
  • {{domxref("EditingBeforeInputEvent")}}
    • -
  • {{domxref("ErrorEvent")}}
    • -
  • {{domxref("FetchEvent")}}
    • -
  • {{domxref("FocusEvent")}}
    • -
  • {{domxref("GamepadEvent")}}
    • -
  • {{domxref("HashChangeEvent")}}
    • -
  • {{domxref("IDBVersionChangeEvent")}}
    • -
  • {{domxref("InputEvent")}}
    • -
  • {{domxref("KeyboardEvent")}}
    • -
  • {{domxref("MediaStreamEvent")}}
    • -
  • {{domxref("MessageEvent")}}
    • -
  • {{domxref("MouseEvent")}}
    • -
  • {{domxref("MutationEvent")}}
    • -
  • {{domxref("OfflineAudioCompletionEvent")}}
    • -
  • {{domxref("OverconstrainedError")}}
    • -
  • {{domxref("PageTransitionEvent")}}
    • -
  • {{domxref("PaymentRequestUpdateEvent")}}
    • -
  • {{domxref("PointerEvent")}}
    • -
  • {{domxref("PopStateEvent")}}
    • -
  • {{domxref("ProgressEvent")}}
    • -
  • {{domxref("RelatedEvent")}}
    • -
  • {{domxref("RTCDataChannelEvent")}}
    • -
  • {{domxref("RTCIdentityErrorEvent")}}
    • -
  • {{domxref("RTCIdentityEvent")}}
    • -
  • {{domxref("RTCPeerConnectionIceEvent")}}
    • -
  • {{domxref("SensorEvent")}}
    • -
  • {{domxref("StorageEvent")}}
    • -
  • {{domxref("SVGEvent")}}
    • -
  • {{domxref("SVGZoomEvent")}}
    • -
  • {{domxref("TimeEvent")}}
    • -
  • {{domxref("TouchEvent")}}
    • -
  • {{domxref("TrackEvent")}}
    • -
  • {{domxref("TransitionEvent")}}
    • -
  • {{domxref("UIEvent")}}
    • -
  • {{domxref("UserProximityEvent")}}
    • -
  • {{domxref("WebGLContextEvent")}}
    • -
  • {{domxref("WheelEvent")}}
    • -
-
- -

Constructor

- -
-
{{domxref("Event.Event", "Event()")}}
-
Creates an Event object, returning it to the caller.
-
- -

Properties

- -
-
{{domxref("Event.bubbles")}} {{readonlyinline}}
-
A boolean indicating whether or not the event bubbles up through the DOM.
-
{{domxref("Event.cancelBubble")}}
-
A historical alias to {{domxref("Event.stopPropagation()")}}. Setting its value to true before returning from an event handler prevents propagation of the event.
-
{{domxref("Event.cancelable")}} {{readonlyinline}}
-
A boolean indicating whether the event is cancelable.
-
{{domxref("Event.composed")}} {{ReadOnlyInline}}
-
A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
-
{{domxref("Event.currentTarget")}} {{readonlyinline}}
-
A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent. It's possible this has been changed along the way through retargeting.
-
{{domxref("Event.deepPath")}} {{non-standard_inline}}
-
An {{jsxref("Array")}} of DOM {{domxref("Node")}}s through which the event has bubbled.
-
{{domxref("Event.defaultPrevented")}} {{readonlyinline}}
-
Indicates whether or not the call to {{domxref("event.preventDefault()")}} canceled the event.
-
{{domxref("Event.eventPhase")}} {{readonlyinline}}
-
Indicates which phase of the event flow is being processed.
-
{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}
-
The explicit original target of the event (Mozilla-specific.)
-
{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}
-
The original target of the event, before any retargetings. (Mozilla-specific.)
-
{{domxref("Event.returnValue")}}
-
A historical property introduced by Internet Explorer and eventually adopted into the DOM specification in order to ensure existing sites continue to work. Ideally, you should try to use {{domxref("Event.preventDefault()")}} and {{domxref("Event.defaultPrevented")}} instead, but you can use returnValue if you choose to do so.
-
{{domxref("Event.srcElement")}} {{non-standard_inline}}
-
A non-standard alias (from old versions of Microsoft Internet Explorer) for {{domxref("Event.target")}}. Some other browsers are starting to support it for web compatibility purposes.
-
{{domxref("Event.target")}} {{readonlyinline}}
-
A reference to the target to which the event was originally dispatched.
-
{{domxref("Event.timeStamp")}} {{readonlyinline}}
-
The time at which the event was created (in milliseconds). By specification, this value is time since epoch—but in reality, browsers' definitions vary. In addition, work is underway to change this to be a {{domxref("DOMHighResTimeStamp")}} instead.
-
{{domxref("Event.type")}} {{readonlyinline}}
-
The name of the event. Case-insensitive.
-
{{domxref("Event.isTrusted")}} {{readonlyinline}}
-
Indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, like {{domxref("Event.initEvent")}}).
-
- -

Obsolete properties

- -
-
{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}
-
Obsolete; use {{domxref("Event.composed", "composed")}} instead. (A {{jsxref("Boolean")}} indicating whether the given event will bubble across through the shadow root into the standard DOM.)
-
- -

Methods

- -
-
{{domxref("Event.createEvent()")}} {{deprecated_inline}}
-
-

Creates a new event, which must then be initialized by calling its initEvent() method.

-
-
{{domxref("Event.composedPath()")}}
-
Returns the event’s path (objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its {{domxref("ShadowRoot.mode")}} closed.
-
- -
-
{{domxref("Event.initEvent()")}} {{deprecated_inline}}
-
Initializes the value of an Event created. If the event has already been dispatched, this method does nothing.
-
{{domxref("Event.preventDefault()")}}
-
Cancels the event (if it is cancelable).
-
{{domxref("Event.stopImmediatePropagation()")}}
-
For this particular event, prevent all other listeners from being called. This includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).
-
{{domxref("Event.stopPropagation()")}}
-
Stops the propagation of events further along in the DOM.
-
- -

Obsolete methods

- -
-
{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}
-
Non-standard; use {{domxref("Event.defaultPrevented")}} instead. (Returns the value of {{domxref("Event.defaultPrevented")}}.)
-
{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
-
Obsolete; use {{domxref("event.stopPropagation")}} instead. (Prevents the event from bubbling.)
-
{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
-
Obsolete; use {{domxref("event.stopPropagation")}} instead.
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}{{Spec2('DOM WHATWG')}}
- -

Browser compatibility

- - - -

{{Compat("api.Event")}}

- -

See also

- - diff --git a/files/bn/web/api/event/preventdefault/index.html b/files/bn/web/api/event/preventdefault/index.html deleted file mode 100644 index 9c14bd2e12..0000000000 --- a/files/bn/web/api/event/preventdefault/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: Event.preventDefault() -slug: Web/API/Event/preventDefault -tags: - - b -translation_of: Web/API/Event/preventDefault ---- -
{{apiref("DOM")}}
- -

The {{domxref("Event")}} interface's preventDefault() method tells the {{Glossary("user agent")}} that if the event does not get explicitly handled, its default action should not be taken as it normally would be. The event continues to propagate as usual, unless one of its event listeners calls {{domxref("Event.stopPropagation", "stopPropagation()")}} or {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}, either of which terminates propagation at once.

- -

As noted below, calling preventDefault() for a non-cancelable event, such as one dispatched via {{domxref("EventTarget.dispatchEvent()")}}, without specifying cancelable: true has no effect.

- -

Syntax

- -
event.preventDefault();
-
- -

Examples

- -

Blocking default click handling

- -

Toggling a checkbox is the default action of clicking on a checkbox. This example demonstrates how to prevent that from happening:

- -

JavaScript

- -
document.querySelector("#id-checkbox").addEventListener("click", function(event) {
-         document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>";
-         event.preventDefault();
-}, false);
- -

HTML

- -
<p>Please click on the checkbox control.</p>
-
-<form>
-  <label for="id-checkbox">Checkbox:</label>
-  <input type="checkbox" id="id-checkbox"/>
-</form>
-
-<div id="output-box"></div>
- -

Result

- -

{{EmbedLiveSample("Blocking_default_click_handling")}}

- -

Stopping keystrokes from reaching an edit field

- -

The following example demonstrates how invalid text input can be stopped from reaching the input field with preventDefault(). Nowadays, you should usually use native HTML form validation instead.

- -

HTML

- -

Here's the form:

- -
<div class="container">
-  <p>Please enter your name using lowercase letters only.</p>
-
-  <form>
-    <input type="text" id="my-textbox">
-  </form>
-</div>
- -

CSS

- -

We use a little bit of CSS for the warning box we'll draw when the user presses an invalid key:

- -
.warning {
-  border: 2px solid #f39389;
-  border-radius: 2px;
-  padding: 10px;
-  position: absolute;
-  background-color: #fbd8d4;
-  color: #3b3c40;
-}
- -

JavaScript

- -

And here's the JavaScript code that does the job. First, listen for {{domxref("Element/keypress_event", "keypress")}} events:

- -
var myTextbox = document.getElementById('my-textbox');
-myTextbox.addEventListener('keypress', checkName, false);
-
- -

The checkName() function, which looks at the pressed key and decides whether to allow it:

- -
function checkName(evt) {
-  var charCode = evt.charCode;
-  if (charCode != 0) {
-    if (charCode < 97 || charCode > 122) {
-      evt.preventDefault();
-      displayWarning(
-        "Please use lowercase letters only."
-        + "\n" + "charCode: " + charCode + "\n"
-      );
-    }
-  }
-}
-
- -

The displayWarning() function presents a notification of a problem. It's not an elegant function but does the job for the purposes of this example:

- -
var warningTimeout;
-var warningBox = document.createElement("div");
-warningBox.className = "warning";
-
-function displayWarning(msg) {
-  warningBox.innerHTML = msg;
-
-  if (document.body.contains(warningBox)) {
-    window.clearTimeout(warningTimeout);
-  } else {
-    // insert warningBox after myTextbox
-    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
-  }
-
-  warningTimeout = window.setTimeout(function() {
-      warningBox.parentNode.removeChild(warningBox);
-      warningTimeout = -1;
-    }, 2000);
-}
- -

Result

- -

{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}

- -

Notes

- -

Calling preventDefault() during any stage of event flow cancels the event, meaning that any default action normally taken by the implementation as a result of the event will not occur.

- -

You can use {{domxref("Event.cancelable")}} to check if the event is cancelable. Calling preventDefault() for a non-cancelable event has no effect.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}{{ Spec2('DOM WHATWG') }}
{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}{{ Spec2('DOM2 Events') }}Initial definition.
- -

Browser compatibility

- - - -

{{Compat("api.Event.preventDefault")}}

diff --git a/files/bn/web/api/index.html b/files/bn/web/api/index.html deleted file mode 100644 index 3ecae6505c..0000000000 --- a/files/bn/web/api/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: ওয়েব API ইন্টারফেস -slug: Web/API -tags: - - API - - Landing - - Reference - - Référence(2) - - TopicStub - - Web -translation_of: Web/API ---- -

আপনি যখন জাভাস্ক্রিট ব্যাবহার করে ওয়েব এর জ্ন্য কোড করবেন, আপনার জ্ন্য অনেকগুলি উপোযগী API আছে। নিম্নে সবগুলো interface এর লিংক দেওয়া হল।

- -
{{APIListAlpha}}
diff --git a/files/bn/web/api/indexeddb_api/index.html b/files/bn/web/api/indexeddb_api/index.html deleted file mode 100644 index 099bec9668..0000000000 --- a/files/bn/web/api/indexeddb_api/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: ইনডেক্সডডিবি -slug: Web/API/IndexedDB_API -tags: - - NeedsReview - - ইনডেক্সডডিবি - - এপিআই - - ডাটাবেজ - - রেফারেন্স -translation_of: Web/API/IndexedDB_API ---- -
-

 ইনডেক্সডডিবি (IndexedDB) ক্লায়েন্ট-সাইড স্টোরেজ এর জন্য একটি এপিআই যা গুরুত্বপূর্ণ পরিমান গাঠনিক ডাটা জমা রাখে এবং যা ইনডেক্স এর সাহায্যে উক্ত ডাটার উপর উচ্চ কর্মক্ষমতাসম্পন্ন  অনুসন্ধান চালাতে পারে।যেখানে ডোম স্টোরেজ  উপকারী ক্ষুদ্র পরিমান ডাটা জমা রাখার জন্য, এটি কম উপকারী বড় আকারের গাঠনিক ডাটা জমা করার জন্য, সেক্ষেত্রে ইনডেক্সডডিবি(indexedDB) একটি সমাধান প্রদান করে।

-
- -

এই পেজটি এপিআই অবজেক্টসমূহের টেকনিক্যাল বিবরণগুলোর  প্রবেশপথ হিসেবে কাজ করে। যদি আপনার প্রাথমিক বই এর দরকার হয় তবে আপনার  ইনডেক্সডডিবির প্রাথমিক ধারণা  দেখা উচিত। আরও বিস্তারিতের জন্য দেখুন  ইনডেক্সডডিবির ব্যবহার ।

- -

ইনডেক্সডডিবি(IndexedDB)  সিনক্রোনাস এবং এসিনক্রোনাস এক্সেস এর জন্য পৃথক এপিআই প্রদান করে। সিনক্রোনাস এপিআই কেবল ওয়েব ওয়ার্কার   এর ভিতরে ব্যবহারের জন্য কিন্তু এটি এখনও কোন ব্রাউজারে বাস্তবায়ন করা হয়নি। এসিনক্রোনাস এপিআই ওয়েবওয়ার্কার এর ভিতরে ও বাইরে উভয় জায়গাতে কাজ করে,কিন্তু ফায়ারফক্সে এখনও বাস্তবায়ন হয়নি।

- -

এসিনক্রোনাস এপিআই

- -

এসিনক্রোনাস এপিআই মেথড কলিং থ্রেডকে ব্লক না করে তা রিটার্ন করে। একটি  ডাটাবেজ এ এসিনক্রোনাস প্রবেশাধিকার নেওয়ার জন্য ,একটি   window অবজেক্টের   indexedDB এট্রিবিউট এর  open() কল করুন। এই মেথড একটি  {{domxref("IDBRequest")}} অবজেক্ট রিটার্ন করে ;এসিনক্রোনাস অপারেশনগুলো  এপ্লিকেশন এর সাথে যোগাযোগ করে {{domxref("IDBRequest")}} অবজেক্টগুলোর ইভেন্ট চালুর মাধ্যমে।

- -
-

নোট:   indexedDB অবজেক্ট পুরাতন ব্রাউজার ভার্সনগুলোতে পূর্বনির্ধারিত (property mozIndexedDB  Gecko < 16 এ , webkitIndexedDB  Chrome এ, এবং  msIndexedDB  IE 10 ে).

-
- -

এসিনক্রোনাস ইনডেক্সডডিবি (IndexedDB) এপিআই এর ইন্টারফেসগুলো নিচের ন্যায়:

- -
-
{{domxref("IDBFactory")}}
-
ডাটাবেজে প্রবেশাধিকার প্রদান করে। গ্লোবাল অবজেক্ট  indexedDB এই ইন্টারফেসটি বাস্তবায়ন করছে এবং এই এপিআই এর জন্য এটি প্রবেশমুখ।
-
{{domxref("IDBCursor")}}
-
অবজেক্ট স্টোরসমূহ এবং ইনডেক্সসমূহের উপর বারবার ইটারেট করে।
-
{{domxref("IDBCursorWithValue")}}
-
অবজেক্ট স্টোরসমূহ এবং ইনডেক্সসমূহ বারবার ইটারেট করে এবং কার্সর এর বর্তমান মান রিটার্ন করে।
-
{{domxref("IDBDatabase")}}
-
ডাটাবেজের একটি সংযোগ বুঝায়। এটি একমাত্র রাস্তা যা দিয়ে ডাটাবেজে লেনদেন সম্ভব।
-
{{domxref("IDBEnvironment")}}
-
একটি ক্লায়েন্ট-সাইড ডাটাবেজে প্রবেশাধিকার প্রদান করে। এটি {{ domxref("window") }} এবং{{ domxref("worker") }} অবজেক্টসমূহদ্বারা বাস্তবায়িত হচ্ছে।
-
{{domxref("IDBIndex")}}
-
একটি ইনডেক্স এর মেটাডাটাতে প্রবেশাধিকার প্রদান করে।
-
{{domxref("IDBKeyRange")}}
-
কীসমূহের একটি সীমা সংজ্ঞায়িত করে।
-
{{domxref("IDBObjectStore")}}
-
একটি অবজেক্ট স্টোরকে প্রতিনিধিত্ব করে।
-
{{domxref("IDBOpenDBRequest")}}
-
একটি ডাটাবেজ খোলার অনুরোধকে প্রতিনিধিত্ব করে।
-
{{domxref("IDBRequest")}}
-
ডাটাবেজ এবং ডাটাবেজ অবজেক্টসমূহে এসিনক্রোনাস অনুরোধগুলোর ফলাফলে প্রবেশাধিকার প্রদান করে। এটি হল যেটি আপনি এসিনক্রোনাস মেথডকে কল করার ফলে পান।
-
{{domxref("IDBTransaction")}}
-
একটি ডাটাবেজ ট্রানসেকশনকে প্রতিনিধিত্ব করে। আপনি একটি ডাটাবেজে ট্রানসেকশন তৈরী করেন,স্কোপটি বলে দিলে(যেমন কোন অবজেক্ট স্টোরগুলোতে আপনি প্রবেশাধিকার চাচ্ছেন) এবং কি ধরণের প্রবেশাধিকার চাচ্ছেন( কেবলমাত্র পাঠ নাকি লেখাসহ)।
-
- -
    -
- -

স্পেসিফেকেশন এর একটি প্রাথমিক ভার্সনে এই মুছে ফেলা ইন্টারফেসগুলো সংজ্ঞায়িত ছিল। কিন্তু এগুলো এখনো নথিবদ্ধ করে রাখা হয়েছে যাতে আপনার পূর্বে লেখা কোন কোড পরিবর্তনের প্রয়োজন হয়।

- -
-
{{domxref("IDBVersionChangeRequest")}}
-
একটি ডাটাবেজের ভার্সন পরিবর্তনের অনুরোধকে প্রতিনিধিত্ব কওরে। ডাটাবেজের ভার্সন পরিবর্তনের উপায় সম্প্রতি বদলানো হয়েছে ({{domxref("IDBFactory.open")}} কে কল করে এবং {{domxref("IDBDatabase.setVersion")}}কে কল না করে), এবং {{domxref("IDBOpenDBRequest")}} ইন্টারফেসটি এখন মুছে ফেলা {{domxref("IDBVersionChangeRequest")}} এর কাজ করতে পারে।
-
{{domxref("IDBDatabaseException")}}  {{ obsolete_inline() }}
-
ডাটাবেজ অপারেশন এর সময় প্রাপ্ত এক্সসেপশন শর্তগুলোকে প্রতিনিধিত্ব করে।
-
- -
    -
- -
-

নোট:  এই  এপিআই এর একটি সিনক্রোনাস ভার্সন   আছে,যা  কোন ব্রাউজার এখনও বাস্তবায়িত হয়নি। এটি  কোন ব্রাউজারে এখনও বাস্তবায়িত হয় নি। এটি  ওয়েব ওয়ার্কার  এর সাথে ব্যবহারের জন্য তৈরী।

-
- -

 স্টোরেজ সীমা

- -

একক ডাটাবেজ এর আইটেম সাইজ এর কোন সীমা নেই। কিন্তু ইনডেক্সডডিবি (IndexedDB) ডাটাবেজ সাইজ এর একটি সীমা থাকতে পারে। এই সীমা(এবং কিভাবে ইউজার ইন্টারফেস তা ব্যবহার করবে) তা এক ব্রাউজার ও অন্য ব্রাউজার এ ভিন্ন হতে পারে।

- -
    -
  • -

    ফায়ারফক্স: ইনডেক্সডডিবি ডাটাবেজ সাইজের কোন সীমা নেই। ইউজার ইন্টারফেস ৫০ এমবি এর বড় ব্লব এর জন্য অনুমতি প্রার্থনা করবে এবং এই সাইজ কোটা dom.indexedDB.warningQuota অগ্রাধিকার হতে পরিবর্তন করা যেতে পারে।  (যা সংজ্ঞায়িত আছে  http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js)

    -
    • -
  • -

    গুগল ক্রোম: দেখুন  https://developers.google.com/chrome...rage#temporary

    -
    • -
- -

উদাহারণ

- -
    -
  • মার্কো ক্যাস্টেলুচিও একটি শক্তিশালী উদাহারণ প্রদান করেছে কিভাবে ওয়েব এ ইনডেক্সডডিবি ব্যবহার সম্ভব , উল্লেখ্য তিনি ইনডেক্সডডিবি মজিলা ডেভ ডার্বি এর বিজয়ী ছিলেন। বিজয়ী ডেমোটি ছিল ইলিব্রি, একটি লাইব্রেরী এবং ইবুক রিডার এপ্লিকেশন।
    • -
  • আপনি এছাড়াও রেফারেন্স ডক এর রেফারেন্স এপ্লিকেশনটি দেখতে পারেন : টু-ডু নটিফিকেশন  (সরাসরি উদাহারণ দেখুন )। সমস্ত কোড অংশগুলো এই উদাহারণে আসে নি, কিন্তু প্রতিটি উদাহারণ একই ডাটা স্ট্রাকচার ও সিনট্যাক্স ব্যবহার করছে এবং এই এপ্লিকেশন এর প্রেক্ষাপটে তা যথাযথ।
    • -
- -

ব্রাউজার সামঞ্জস্যতা

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
বৈশিষ্ট্যক্রোমফায়ারফক্স(গেকো )ইন্টারনেট  এক্সপ্লোরারওপেরা -

সাফারি

- -

(ওয়েবকিট)

-
এসিনক্রোনাস এপিআই -

১১.0 {{ property_prefix("webkit") }}
- 24

- 		{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}
- {{ CompatGeckoDesktop("16.0") }}		১০১৭{{ CompatNo() }}
সিনক্রোনাস এপিআই
- (ওয়েব ওয়ার্কার এর সাথে ব্যবহৃত)		{{ CompatNo() }}{{ CompatNo() }}
- See {{ bug(701634) }}		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
বৈশিষ্ট্যএন্ড্রয়েডফায়ারফক্স মোবাইল (গেকো) -

আই-ই

- -

ফোন

- 		ওপেরা মোবাইলসাফারি মোবাইল
এসিনক্রোনাস  এপিআই৪.৪{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}
- {{ CompatGeckoDesktop("16.0") }}		১০১৭{{ CompatNo() }}
-
- -
-

নোট :কিছু ব্রাউজার এখনও ইনডেক্সডডিবি সাপোর্ট না করলেও ওয়েব সিকুয়েল (webSQL)সাপোর্ট করে,  যেমন সাফারি/ওয়েবকিট ডেস্কটপ ও আইওএস। এই সমস্যার একটি সমাধান হচ্ছে  ইনডেক্সডডিবি পলিফিল বা শিম  ব্যবহার করা যা অসর্মথিত ব্রাউজার এর ক্ষেত্রে ওয়েবসিকুয়েল এ  ফল ব্যাক করে।

-
- -

আরও দেখুন

- - diff --git a/files/bn/web/api/inputevent/index.html b/files/bn/web/api/inputevent/index.html deleted file mode 100644 index 3b31b83955..0000000000 --- a/files/bn/web/api/inputevent/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: InputEvent -slug: Web/API/InputEvent -translation_of: Web/API/InputEvent ---- -

{{APIRef}}

- -

InputEvent ইন্টারফেসটি সম্পাদনযোগ্য কন্টেন্টে কোন পরিবর্তন হলে, সে পরিবর্তন সম্পর্কে জানায়।

- -

প্রোপার্টি

- -

InputEvent ইন্টারফেসটির কোন প্রোপার্টি নেই।

- -

মেথড

- -

InputEvent ইন্টারফেসটির কোন মেথড নেই।

- -

ইভেন্ট

- -
-
{{domxref("InputEvent.data")}} {{readOnlyInline}}
-
লেখা বর্ণগুলি নিয়ে একটু {{domxref("DOMString")}} রিটার্ন করে। এই স্ট্রিংটি খালি হতে পারে, যদি পরিবর্তনের ফলে নতুন বর্ণ লেখা না হয়। (যেমন বর্ণ মুছার সময়)
-
{{domxref("InputEvent.isComposing")}} {{readOnlyInline}}
-
compositionstart এর আগে এবং compositionend এর পরে একটু বুলিয়ান ভ্যালু নিয়ে ইভেন্ট ফায়ার করে।
-
- -

ব্রাউজার সমর্থন

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
ফিচারক্রোমফায়ারফক্স (গেকো)ইন্টারনেট এক্সপ্লোরারঅপেরাসাফারি (ওয়েবকিট)
data{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
isComposing{{ CompatNo() }}{{ CompatGeckoDesktop("31.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
ফিচারঅ্যান্ড্রয়েডফায়ারফক্স মোবাইল (গেকো)ইন্টারনেট এক্সপ্লোরার ফোনঅপেরা মোবাইলসাফারি মোবাইল
data{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
isComposing{{ CompatNo() }}{{ CompatGeckoMobile("31.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -

আরও দেখুন

- -
    -
  • beforeinput
    • -
  • input
    • -
diff --git a/files/bn/web/api/stylesheet/index.html b/files/bn/web/api/stylesheet/index.html deleted file mode 100644 index 83286f4960..0000000000 --- a/files/bn/web/api/stylesheet/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: স্টাইলশীট -slug: Web/API/StyleSheet -tags: - - API - - CSS - - CSSOM - - DOM - - DOM Reference - - NeedsReview - - Reference - - WebAPI -translation_of: Web/API/StyleSheet ---- -
- {{APIRef}}
-

একটি অবজেক্ট, যেটি একক স্টাইল শীট তথা StyleSheet ইন্টারফেস বর্ণনা করে। সিএসএস স্টাইল শীট সমূহ আরও বিশেষ ধরণের {{domxref("CSSStyleSheet")}} ইন্টারফেস বাস্তবায়ন করবে।

-

প্রপার্টি সমূহ

-
-
- {{domxref("StyleSheet.disabled")}}
-
- এটি একটি {{domxref("Boolean")}} মান, যেটা বর্ণনা করবে যে বর্তমান স্টাইলশীট টি প্রয়োগ করা হয়েছে কি না।
-
- {{domxref("StyleSheet.href")}} {{readonlyInline}}
-
- এটি একটি {{domxref("DOMString")}} প্রদান করে, যেটার মধ্যে স্টাইলশীটের অবস্থান লেখা থাকবে।
-
- {{domxref("StyleSheet.media")}} {{readonlyInline}}
-
- এটি একটি {{domxref("MediaList")}} দেয়, যার মধ্যে স্টাইল তথ্যের কাঙ্ক্ষিত লক্ষ্যের মাধ্যম বর্ণনা করা থাকে।
-
- {{domxref("StyleSheet.ownerNode")}} {{readonlyInline}}
-
- এটা একটি {{domxref("Node")}} প্রদান করে, যা বর্তমান ডকুমেন্টের সাথে এই স্টাইলশীটকে যুক্ত করে।
-
- {{domxref("StyleSheet.parentStyleSheet")}} {{readonlyInline}}
-
- বর্তমানটির সাথে এটি আরও একটি {{domxref("StyleSheet")}} দেয় (যদি থাকে); যদি কোন স্টাইলশীট না থাকে, তাহলে null প্রদান করে।
-
- {{domxref("StyleSheet.title")}} {{readonlyInline}}
-
- বর্তমান স্টাইলশীটের শিরোনামের জন্য এটা {{domxref("DOMString")}} প্রদান করে।
-
- {{domxref("StyleSheet.type")}}{{readonlyInline}}
-
- বর্তমান স্টাইলশীটের ভাষা উপস্থাপন করার জন্য এটা {{domxref("DOMString")}} প্রদান করে।
-
-

বৈশিষ্ট্য

- - - - - - - - - - - - - - - - - - -
বৈশিষ্ট্যঅবস্থামন্তব্য
{{ SpecName('CSSOM', '#stylesheet', 'StyleSheet') }}{{ Spec2('CSSOM') }}{{ SpecName('DOM2 Style') }} এরপর থেকে কোন পরিবর্তন হয়নি।
{{ SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-StyleSheet', 'StyleSheet') }}{{ Spec2('DOM2 Style') }}প্রাথমিক সংজ্ঞা।
-

আরও দেখুন

-
    -
  • {{domxref("CSSStyleSheet")}}
    • -
diff --git a/files/bn/web/api/webrtc_api/index.html b/files/bn/web/api/webrtc_api/index.html deleted file mode 100644 index e1254a3c49..0000000000 --- a/files/bn/web/api/webrtc_api/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: ওয়েব আরটিসি (WebRTC) -slug: Web/API/WebRTC_API -tags: - - এপিআই - - ওয়েব আরটিসি - - পরিচিতি - - ল্যান্ডিং -translation_of: Web/API/WebRTC_API -translation_of_original: Web/Guide/API/WebRTC -original_slug: Web/Guide/API/WebRTC ---- -

WebRTC (যেখানে RTC এর পূর্ণরুপ Real-Time Communications) হল একটি প্রযুক্তি যা একাধিক ব্রাউজারের মধ্যে ব্রাউজার-ব্রাউজার অডিও/ভিডিও স্ট্রিমিং কিংবা ডাটা শেয়ারিং সুবিধা প্রদান করে থাকে। WebRTC এর সাহায্যে কোনরূপ প্লাগ-ইন বা এক্সটেনশন ব্যবহার ছাড়াই স্ট্যান্ডার্ড ওয়েব এপিআই এর সাহায্যে টেলিকনফারেন্সিং কিংবা ডাটা শেয়ারিং সম্ভব।

- -

WebRTC এর অংশগুলোকে জাভাস্ক্রিপ্ট এপিআই এর সাহায্য ব্যবহার করা যায়: Network Stream API একটি অডিও/ভিডিও স্ট্রিম নির্দেশ করে, PeerConnection API এর সাহায্য দুই বা ততোধিক ব্রাউজারের মধ্যে সংযোগ স্থাপন করা যায়, এবং DataChannel API এর সাহায্য অডিও/ভিডিও ব্যতীত অন্যান্য ধরণের ডাটা আদানপ্রদান করা যায় - যা গেমিং, চ্যাট কিংবা ফাইল ট্রান্সফারের জন্য অসাধারণ!

- -
-

উল্লেখ্য: এই ডকুমেন্টেশন নতুন যায়গায় চলে যাচ্ছে।

-
- -

গাইড

- -
-
WebRTC এর সাহায্যে পিয়ার-টু-পিয়ার যোগাযোগ
-
ওয়েবআরটিসি এপিআই এর সাহায্যে পিয়ার টু পিয়ার যোগাযোগ করা।
-
WebRTC এর আর্কিটেকচার পরিচিতি
-
WebRTC এর অনেকগুলো আলাদা আলাদা অংশ রয়েছে যা নবাগতদের জন্য প্রচণ্ড বিভ্রান্তকর। এই আর্টিকেলে এইসকল অংশগুলোর পরিচয় দিয়ে, তারা কিভাবে একত্রে কাজ করে - সে সম্পর্কে ধারণা দেওয়া হয়েছে।
-
WebRTC এর সাধারণ বিষয়াবলী
-
Now you understand the WebRTC architecture, you can move on to this article, which takes you through the creation of a basic cross-browser RTC App.
-
- -

রেফারেন্স

- -
-
Navigator.getUserMedia
-
মিডিয়া (ভিডিও/অডিও) ক্যাপচার করার এপিআই।
-
RTCPeerConnection
-
দুইটি পিয়ারের মধ্যে ডাটা স্ট্রিমিং করার ইন্টারফেস।
-
RTCDataChannel
-
পিয়ার কানেকশনের মধ্যে দিয়ে ডাটা (মিডিয়া নয় এমন) পাঠানোর ইন্টারফেস।
-
diff --git a/files/bn/web/css/css_animations/index.html b/files/bn/web/css/css_animations/index.html deleted file mode 100644 index 7c953b2359..0000000000 --- a/files/bn/web/css/css_animations/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: CSS Animations -slug: Web/CSS/CSS_Animations -tags: - - CSS - - CSS Animations - - Experimental - - Overview - - Reference -translation_of: Web/CSS/CSS_Animations ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

CSS Animations is a module of CSS that defines how to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, their number of repetitions, and how they repeat.

- -

Reference

- -

CSS Properties

- -
-
    -
  • {{cssxref("animation")}}
    • -
  • {{cssxref("animation")}}
    • -
  • {{cssxref("animation-delay")}}
    • -
  • {{cssxref("animation-direction")}}
    • -
  • {{cssxref("animation-duration")}}
    • -
  • {{cssxref("animation-fill-mode")}}
    • -
  • {{cssxref("animation-iteration-count")}}
    • -
  • {{cssxref("animation-name")}}
    • -
  • {{cssxref("animation-play-state")}}
    • -
  • {{cssxref("animation-timing-function")}}
    • -
-
- -

CSS At-rules

- -
-
    -
  • {{cssxref("@keyframes")}}
    • -
-
- -

Guides

- -
-
Detecting CSS animation support
-
Describes a technique for detecting if the browser supports CSS animations.
-
Using CSS animations
-
Step-by-step tutorial about how to create animations using CSS, this article describes each relevant CSS property and at-rule and explains how they interact.
-
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Animations') }}{{ Spec2('CSS3 Animations') }}Initial definition.
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
- 43.0		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
- {{CompatGeckoDesktop("16.0")}}		1012{{property_prefix("-o")}}
- 12.10[2]		4.0{{property_prefix("-webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1 {{property_prefix("-webkit")}} [1]
- 4.0 {{property_prefix("-webkit")}}		{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}
- {{CompatGeckoMobile("16.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
-
- -

[1] Partial support: {{cssxref("animation-fill-mode")}} property is not supported in Android browser below 2.3.

- -

[2] See the release notes to Opera 12.50.

- -

See also

- -
    -
  • Related to CSS Animations, CSS Transitions can trigger animations on user actions.
    • -
- -

 

diff --git a/files/bn/web/css/css_transforms/index.html b/files/bn/web/css/css_transforms/index.html deleted file mode 100644 index 142b07aed1..0000000000 --- a/files/bn/web/css/css_transforms/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: CSS Transforms -slug: Web/CSS/CSS_Transforms -tags: - - CSS - - CSS Reference - - Experimental - - NeedsTranslation - - Overview - - TopicStub -translation_of: Web/CSS/CSS_Transforms ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.

- -

Reference

- -

CSS Properties

- -
-
    -
  • {{cssxref("backface-visibility")}}
    • -
  • {{cssxref("perspective")}}
    • -
  • {{cssxref("perspective-origin")}}
    • -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("transform-box")}}
    • -
  • {{cssxref("transform-origin")}}
    • -
  • {{cssxref("transform-style")}}
    • -
-
- -

Guides

- -
-
Using CSS transforms
-
Step-by-step tutorial about how to transform elements styled with CSS.
-
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Transforms') }}{{ Spec2('CSS3 Transforms') }}Initial definition.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support -

{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
- 36

- 		{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}[1]
- {{CompatGeckoDesktop("16.0")}}[2]		9.0{{property_prefix("-ms")}}[3]
- 10.0		10.5{{property_prefix("-o")}}
- 12.10
- 15.0{{property_prefix("-webkit")}}
- 23		3.1{{property_prefix("-webkit")}}
3D Support12.0{{property_prefix("-webkit")}}
- 36		10.0{{property_prefix("-moz")}}
- {{CompatGeckoDesktop("16.0")}}		10.015.0{{property_prefix("-webkit")}}
- 23		4.0{{property_prefix("-webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatAndroid(2.1)}}{{property_prefix("-webkit")}}[4]{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
- 11.0{{property_prefix("-webkit")}}[5]		11.5{{property_prefix("-webkit")}}3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
3D Support{{CompatAndroid(3.0)}}{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{ property_prefix("-webkit")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}22{{property_prefix("-webkit")}}3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
-
- -

[1] Gecko 14.0 removed the experimental support for skew(), but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.

- -

[2] Before Firefox 16, the translation values of matrix() and matrix3d() could be {{cssxref("<length>")}}, in addition to the standard {{cssxref("<number>")}}.

- -

[3] Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.

- -

Internet Explorer 9.0 or earlier has no support for 3D transforms, mixing 3D and 2D transform functions. such as -ms-transform:rotate(10deg) translateZ(0); will prevent the entire property from being applied.

- -

[4] Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a -webkit-transform.

- -

[5] Internet Explorer 11.0 supports the {{property_prefix("-webkit")}} prefixed variant as an alias for the default one.

- -

 

diff --git a/files/bn/web/css/element()/index.html b/files/bn/web/css/element()/index.html deleted file mode 100644 index 4308a2ea5b..0000000000 --- a/files/bn/web/css/element()/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: element -slug: Web/CSS/element() -translation_of: Web/CSS/element() ---- -
- {{CSSRef}}{{SeeCompatTable}}
-

সারাংশ

-

CSS  ফাংশন এলিমে‍‌‌‍ন্টটি একটি{ {xref_cssimage}}  এর মান কে সংজ্ঞায়িত করে  যা একটি  arbitrary HTML  এলিমেন্ট থেকে উৎপন্ন হয়।এই ছবিটি জীবন্ত,  অর্থাৎ যদি HTML উপাদান পরিবর্তন করা হয় ,তবে ফলপ্রসূ মান ব্যবহারিত সিএসএস বৈশিষ্ট্যগুলো স্বয়ংক্রিয়ভাবে আধুনিকায়িত হয়ে যাবে ।

-

এটি ব্যবহার এর জন্য একটি বিশেষ দৃশ্য হবে HTML এ ছবি রেনডার করা'{{HTMLELEMENT("canvas")}} , তারপর এটিকে ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করবে ।

-

গেকো ব্রাউজার এ আপনি নন- স্ট্যান্ডর্ডটি ব্যবহার করতে পারেন ।  {{domxref("document.mozSetImageElement()")}} এই পদ্ধতিটি একটি দেয়া সিএসএস ব্যাকগ্রাউন্ড এর ব্যাকগ্রাউন্ড হিসেবে ব্যবহৃত হওয়া এলিমেন্ট এর পরিবর্তন করে।

-

পদবিন্যাস

-
element( id )
-

যেখানে,

-
-
- id
-
- একটি এলিমেন্ট এর ID কে ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করতে ,বিশেষ করে এলিমেন্ট এর উপর HTML attribute #id ব্যবহার  করা হয়।
-
-

উদাহরন

-

এই উদাহরনগুলো viewed live এ দেখা যাবে builds of Firefox এ যা -moz-element() সহায়তা করে।

-

কিছু বাস্তব উদাহরন

-

এই উদাহরনটি একটি লুকানো {{HTMLElement("div")}} কে ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করে।ব্যাকগ্রাউন্ড এলিমেন্টটি একটি নতি ব্যবহার করে কিন্তু সেই সাথে টেক্সট ও অন্তর্ভুক্ত করে যা ব্যাকগ্রাউন্ড এর অংশ হিসেবে রেনডার করা হয়।

-
<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
-  <p>This box uses the element with the #myBackground1 ID as its background!</p>
-</div>
-
-<div style="overflow:hidden; height:0;">
-  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
-  <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
-  </div>
-</div>
-

 {{HTMLElement("div")}} এলিমেন্টের সাথে  ID "myBackground1" কনটেন্ট এর  ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করা হয় যেখানে "This box uses the element with the #myBackground1 ID as its background!" এই অনুছেদটি অন্তর্ভুক্ত করা হয়।

-

example1.png

-

আরও কিছু অদ্ভুত উদাহরন

-

এই উদাহরনটি একটি লুকানো {{HTMLElement("button")}} এলিমেন্ট কে পুনরাবৃওি নমুনায় ব্যাকগ্রাউনড হিসেবে ব্যবহার করে।এটি প্রমান করে যে আপনি ব্যাকগ্রাউন্ড হিসেবে arbitrary এলিমেন্ট ব্যবহার করতে পারেন কিন্তু ভাল নকশা অনুশীলনে ততটা প্রয়োজনীয় নয়।

-
<div style="width:400px; height:100px; background:-moz-element(#myBackground2);">
-</div>
-
-<div style="overflow:hidden; height:0;">
-  <button id="myBackground2" type="button">Evil button!</button>
-</div>
-
-

example2.png

-

নির্দিষ্টকরন

- - - - - - - - - - - - - - - -
SpecificationStatusComment
CSS Image Values and Replaced Content Level 4{{Spec2('CSS4 Images')}}Actually now deferred to CSS4.
-

ব্রাউজার সুসঙ্গত

-

{{CompatibilityTable}}

-
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support4.0 (2.0) [*] {{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
-
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support4.0 (2.0) [*] {{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
-

[*] ব্যবহৃত {{cssxref("background")}} এবং {{cssxref("background-image")}} সিএসএস বৈশিষ্ট্গুলোর জন্য সিমাবদ্ধ।

-

আরও দেখুন

-
    -
  • {{domxref("document.mozSetImageElement()")}}
    • -
diff --git a/files/bn/web/css/index.html b/files/bn/web/css/index.html deleted file mode 100644 index f26dd6aaa0..0000000000 --- a/files/bn/web/css/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: CSS -slug: Web/CSS -tags: - - CSS - - Design - - Landing - - Layout - - NeedsReview - - Reference -translation_of: Web/CSS ---- -

Cascading Style Sheets,  CSS, মূলত  stylesheet সংক্রান্ত ভাষা  যা একটি HTML or XML দিয়ে (অনেক ধরনের XML ভাষা সহ যেমন  SVG অথবা XHTML) লেখা নথির উপস্থাপনায় বাবহারিত হয়ে থাকে । CSS গঠনকৃত উপাদান গুলো পর্দায় , কাগজে, বক্তব্য বা অন্য কোন মাধ্যমে  কিভাবে উপস্থাপিত হবে তা ব্যাখ্যা করে থাকে।

- -

CSS মুক্ত ওয়েবের একটি কেন্দ্রীয় ভাষা এবং এর প্রমিত  W3C specification  আছে। ধাপে ধাপে বিকশিত হবার কারণে, CSS1 বর্তমানে অপ্রচলিত , CSS2.1 একটি পরামর্শ স্বরূপ হয়ে গিয়েছে এবং CSS3, এখন ছোট ছোট মডিউলে বিভক্ত, যা প্রমিত রূপ লাভের দিকে অগ্রসর হচ্ছে।

- -
-
    -
  • সিএসএস রেফারেন্স - -

    ওয়েব ডেভেলপারদের জন্য সিএসএস এর প্রতিটি প্রোপার্টি এবং ধারণা আলোচনা করা হয়েছে আমাদের বিশাল রেফারেন্সে।

    -
    • -
  • সিএসএস টিউটোরিয়াল -

    সম্পূর্ণ নতুনদের জন্য ধারাবাহিক পরিচিতি। এতে সকল প্রয়োজনীয় বিষয়াদি উপস্থাপন করা হয়েছে।

    -
    • -
  • সিএসএস ডেমো -

    একটি ডেমোর সংগ্রহ যা সর্বশেষ সিএসএস প্রযুক্তির ক্ষমতা প্রদর্শন করে: সৃজনশীলতা বাড়ানোর জন্য দারুন!

    -
    • -
- -
-
-

ডকুমেন্টেশন এবং টিউটোরিয়াল

- -
-
সিএসএস এর মৌলিক ধারনা
-
এখানে সিনট্যাক্স ও ভাষার ধরন এবং স্পেসিফিসিটি, ইনহেরিট্যান্স, বক্স মডেল, মার্জিন কলাপসিং, স্ট্যাকিং, ব্লক ফরম্যাটিং এর ধারনা, বা প্রাথমিক, কম্পিউটকৃত, ব্যবহারকৃত ও আসল মানের সাথে পরিচিত করা হয়েছে। সিএসএস শর্টহ্যান্ড প্রপার্টি সমূহও এখানে বর্ণনা করা হয়েছে।
-
সিএসএস ডেভেলপার গাইড
-
আপনার কন্টেন্টকে আরও আকর্ষণীয় করে দেখানোর জন্য যেসব সিএসএস কৌশল সমূহ আপনার অবশ্যই শেখা দরকার, এখানে সেগুলো বর্ণনা করা হয়েছে।
-
সাধারন সিএসএস জিজ্ঞাসা
-
সিএসএস নিয়ে সাধারণত জিজ্ঞাসিত প্রশ্ন ও তার উত্তর এই নিবন্ধে দেয়া হয়েছে।
-
- -

সিএসএস এর জন্য টুল সমূহ

- -
    -
  • W3C এর সিএসএস ভ্যালিডেশন সেবা পরীক্ষা করে দেখে যে যেই সিএসএস টি দেয়া হয়েছে, সেটি ঠিকঠাক আছে কি না বা সিএসএস এর মধ্যে কোন ভুল আছে কি না। এটি একটি অমূল্য ডিবাগিং টুল।
    • -
  • ফায়ারফক্সের ফায়ারবাগ এক্সটেনশন, ডেভেলপারদের কাছে একটি জনপ্রিয় এক্সটেনশন বা টুল। এটি ব্যবহার করে আপনি একটি পাতার এইচটিএমএল, সিএসএস ও জাভাস্ক্রিপ্ট ব্রাউজারের মধ্যেই অনেক সহজে সম্পাদনা করতে পারবেন।
    • -
  • ফায়ারফক্সের ওয়েব ডেভেলপার এক্সটেনশনও লাইভ সাইট সম্পাদনা করার সুবিধা দেয়। এটা সিম্পল কিন্তু ফায়ারবাগের চেয়ে একটু কম সুবিধা দেয়।
    • -
  • ফায়ারফক্সের এডিট সিএসএস এক্সটেনশন সাইডবারে সিএসএস এডিট করার সুবিধা প্রদান করে।
    • -
-
- -
- - -
    -
  • সিএসএস টেক্সট-ডেকোরেশন লেভেল ৩ Candidate Recommandation অবস্থায় পৌছেছে। এর অর্থ হচ্ছে text-decoration-* ও text-emphasis-* প্রপার্টি দুটো খুব দ্রুত ব্যবহারোপযোগী হবে। আমাদের অনেক পরিচিত {{cssxref("text-shadow")}}ও এখানে বর্ণনা করা হয়েছে। (১লা আগস্ট, ২০১৩)
    • -
  • গেকো এখন {{cssxref("background-origin")}}: local সমর্থন করে। ফায়ারফক্স ২৫ এর পর থেকে (নাইটলিতে ইতোমধ্যে চলে এসেছে) এটা ব্যবহারযোগ্য হবে। (২৫ জুলাই, ২০১৩)
    • -
  • পয়েন্টার ইভেন্ট সমূহ Candidate Recommandation অবস্থায় পৌছেছে। তার মানে touch-action ও খুব দ্রুত ব্যবহারোপযোগী হবে। বর্তমানে এটা শুধু ইন্টারনেট এক্সপ্লোরার ১০ এ যুক্ত করা হয়েছে। তবে এটা ব্যবহার করার জন্য -ms- প্রেফিক্স ব্যবহার করতে হবে। (৬ মে, ২০১৩)
    • -
  • গেকোর flexible boxes সমর্থন সাম্প্রতিক একটি বৈশিষ্ট্যের সাথে সামঞ্জস্য স্পষ্ট করার জন্য অনুমোদিত হয়েছেঃ ফায়ারফক্স ২৩ থেকে {{cssxref("::before")}} ও {{cssxref("::after")}} ফ্লেক্সের উপকরণ হবে, এবং {{cssxref("order")}} ও {{cssxref("align-self")}} ব্যবহার করে পুনর্বিন্যাস করা যাবে। (৩ মে, ২০১৩)
    • -
- - - - -
-
-
diff --git a/files/bn/web/events/index.html b/files/bn/web/events/index.html deleted file mode 100644 index a3abc9b056..0000000000 --- a/files/bn/web/events/index.html +++ /dev/null @@ -1,3011 +0,0 @@ ---- -title: Event reference -slug: Web/Events -tags: - - NeedsTranslation - - TopicStub - - events -translation_of: Web/Events ---- -

DOM Events are sent to notify code of interesting things that have taken place. Each event is represented by an object which is based on the {{domxref("Event")}} interface, and may have additional custom fields and/or functions used to get additional information about what happened. Events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.

- -

This article offers a list of events that can be sent; some are standard events defined in official specifications, while others are events used internally by specific browsers; for example, Mozilla-specific events are listed so that add-ons can use them to interact with the browser.

- -

Most Common Categories

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Resource Events
Event NameFired When
{{event("cached")}}The resources listed in the manifest have been downloaded, and the application is now cached.
{{event("error")}}A resource failed to load.
{{event("abort")}}The loading of a resource has been aborted.
{{event("load")}}A resource and its dependent resources have finished loading.
{{event("beforeunload")}}The window, the document and its resources are about to be unloaded.
{{event("unload")}}The document or a dependent resource is being unloaded.
- - - - - - - - - - - - - - - - - - - -
Network Events
Event NameFired When
{{event("online")}}The browser has gained access to the network.
{{event("offline")}}The browser has lost access to the network.
- - - - - - - - - - - - - - - - - - - -
Focus Events
Event NameFired When
{{event("focus")}}An element has received focus (does not bubble).
{{event("blur")}}An element has lost focus (does not bubble).
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Websocket Events
Event NameFired When
openA WebSocket connection has been established.
messageA message is received through a WebSocket.
{{event("error")}}A WebSocket connection has been closed with prejudice (some data couldn't be sent for example).
closeA WebSocket connection has been closed.
- - - - - - - - - - - - - - - - - - - - - - - -
Session History Events
Event NameFired When
{{event("pagehide")}}A session history entry is being traversed from.
{{event("pageshow")}}A session history entry is being traversed to.
{{event("popstate")}}A session history entry is being navigated to (in certain cases).
- - - - - - - - - - - - - - - - - - - - - - - -
CSS Animation Events
Event NameFired When
{{event("animationstart")}}A CSS animation has started.
{{event("animationend")}}A CSS animation has completed.
{{event("animationiteration")}}A CSS animation is repeated.
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CSS Transition Events
Event NameFired When
{{event("transitionstart")}}A CSS transition has actually started (fired after any delay).
{{event("transitioncancel")}}A CSS transition has been cancelled.
{{event("transitionend")}}A CSS transition has completed.
{{event("transitionrun")}}A CSS transition has began running (fired before any delay starts).
- - - - - - - - - - - - - - - - - - - -
Form Events
Event NameFired When
{{event("reset")}}The reset button is pressed
{{event("submit")}}The submit button is pressed
- - - - - - - - - - - - - - - - - - - -
Printing Events
Event NameFired When
{{event("beforeprint")}}The print dialog is opened
{{event("afterprint")}}The print dialog is closed
- - - - - - - - - - - - - - - - - - - - - - - -
Text Composition Events
Event NameFired When
{{event("compositionstart")}}The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).
{{event("compositionupdate")}}A character is added to a passage of text being composed.
{{event("compositionend")}}The composition of a passage of text has been completed or canceled.
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
View Events
Event NameFired When
{{event("fullscreenchange")}}An element was turned to fullscreen mode or back to normal mode.
{{event("fullscreenerror")}}It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.
{{event("resize")}}The document view has been resized.
{{event("scroll")}}The document view or an element has been scrolled.
- - - - - - - - - - - - - - - - - - - - - - - -
Clipboard Events
Event NameFired When
{{event("cut")}}The selection has been cut and copied to the clipboard
{{event("copy")}}The selection has been copied to the clipboard
{{event("paste")}}The item from the clipboard has been pasted
- - - - - - - - - - - - - - - - - - - - - -
Keyboard Events
Event NameFired When
{{event("keydown")}}ANY key is pressed
{{event("keypress")}}ANY key except Shift, Fn, CapsLock is in pressed position. (Fired continously.)
{{event("keyup")}}ANY key is released
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mouse Events
Event NameFired When
{{event("mouseenter")}}A pointing device is moved onto the element that has the listener attached.
{{event("mouseover")}}A pointing device is moved onto the element that has the listener attached or onto one of its children.
{{event("mousemove")}}A pointing device is moved over an element. (Fired continously as the mouse moves.)
{{event("mousedown")}}A pointing device button is pressed on an element.
{{event("mouseup")}}A pointing device button is released over an element.
{{event("auxclick")}}A pointing device button (ANY non-primary button) has been pressed and released on an element.
{{event("click")}}A pointing device button (ANY button; soon to be primary button only) has been pressed and released on an element.
{{event("dblclick")}}A pointing device button is clicked twice on an element.
{{event("contextmenu")}}The right button of the mouse is clicked (before the context menu is displayed).
{{event("wheel")}}A wheel button of a pointing device is rotated in any direction.
{{event("mouseleave")}}A pointing device is moved off the element that has the listener attached.
{{event("mouseout")}}A pointing device is moved off the element that has the listener attached or off one of its children.
{{event("select")}}Some text is being selected.
{{event("pointerlockchange")}}The pointer was locked or released.
{{event("pointerlockerror")}}It was impossible to lock the pointer for technical reasons or because the permission was denied.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Drag & Drop Events
Event NameFired When
{{event("dragstart")}}The user starts dragging an element or text selection.
{{event("drag")}}An element or text selection is being dragged (Fired continuously every 350ms).
{{event("dragend")}}A drag operation is being ended (by releasing a mouse button or hitting the escape key).
{{event("dragenter")}}A dragged element or text selection enters a valid drop target.
{{event("dragover")}}An element or text selection is being dragged over a valid drop target. (Fired continuously every 350ms.)
{{event("dragleave")}}A dragged element or text selection leaves a valid drop target.
{{event("drop")}}An element is dropped on a valid drop target.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Media Events
Event NameFired When
{{event("durationchange")}}The duration attribute has been updated.
{{event("loadedmetadata")}}The metadata has been loaded.
{{event("loadeddata")}}The first frame of the media has finished loading.
{{event("canplay")}}The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
{{event("canplaythrough")}}The browser estimates it can play the media up to its end without stopping for content buffering.
{{event("ended")}}Playback has stopped because the end of the media was reached.
{{event("emptied")}}The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
{{event("stalled")}}The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
{{event("suspend")}}Media data loading has been suspended.
{{event("play")}}Playback has begun.
{{event("playing")}}Playback is ready to start after having been paused or delayed due to lack of data.
{{event("pause")}}Playback has been paused.
{{event("waiting")}}Playback has stopped because of a temporary lack of data.
{{event("seeking")}}A seek operation began.
{{event("seeked")}}A seek operation completed.
{{event("ratechange")}}The playback rate has changed.
{{event("timeupdate")}}The time indicated by the currentTime attribute has been updated.
{{event("volumechange")}}The volume has changed.
{{event("complete")}}The rendering of an {{domxref("OfflineAudioContext")}} is terminated.
{{event("audioprocess")}}The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Progress Events
Event NameFired When
{{event("loadstart")}}Progress has begun.
{{event("progress")}}In progress.
{{event("error")}}Progression has failed.
{{event("timeout")}}Progression is terminated due to preset time expiring.
abortProgression has been terminated (not due to an error).
loadProgression has been successful.
{{event("loadend")}}Progress has stopped (after "error", "abort" or "load" have been dispatched).
- -

Storage events

- -

{{event("change")}} (see {{anch("Non-standard events")}})
- {{event("storage")}}

- -

Update events

- -

{{event("checking")}}
- {{event("downloading")}}
- {{event("error")}}
- {{event("noupdate")}}
- {{event("obsolete")}}
- {{event("updateready")}}

- -

Value change events

- -

{{event("broadcast")}}
- {{event("CheckboxStateChange")}}
- {{event("hashchange")}}
- {{event("input")}}
- {{event("RadioStateChange")}}
- {{event("readystatechange")}}
- {{event("ValueChange")}}

- -

Uncategorized events

- -

{{event("invalid")}}
- {{event("localized")}}
- message
- message
- message
- open
- {{event("show")}}

- -

Less common and non-standard events

- -

"cancelable" Fetch events

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Event nameFired when
{{event("abort_(cancellable_fetch)", "abort")}}A fetch request is aborted, i.e. using {{domxref("FetchController.abort()")}}.
{{event("requestprogress")}}The HTTP request part of a fetch request makes progress.
{{event("responseprogress")}}The response part of a fetch request makes progress, i.e. more of the response is downloaded.
{{event("statechange_(cancellable_fetch)", "statechange")}}The {{domxref("FetchObserver.state", "state")}} of a fetch request changes.
- -

WebVR events

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Event nameFired when
{{event("vrdisplayconnect")}}when a compatible {{domxref("VRDisplay")}} is connected to the computer.
{{event("vrdisplaydisconnect")}}When a compatible {{domxref("VRDisplay")}} is disconnected from the computer.
{{event("vrdisplayactivate")}}When a VR display is able to be presented to, for example if an HMD has been moved to bring it out of standby, or woken up by being put on.
{{event("vrdisplaydeactivate")}}When a {{domxref("VRDisplay")}} can no longer be presented to, for example if an HMD has gone into standby or sleep mode due to a period of inactivity.
{{event("vrdisplayblur")}}when presentation to a {{domxref("VRDisplay")}} has been paused for some reason by the browser, OS, or VR hardware — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.
{{event("vrdisplayfocus")}}When presentation to a {{domxref("VRDisplay")}} has resumed after being blurred.
{{event("vrdisplaypresentchange")}}The presenting state of a {{domxref("VRDisplay")}} changes — i.e. goes from presenting to not presenting, or vice versa.
- -

SVG events

- -

{{event("SVGAbort")}}
- {{event("SVGError")}}
- {{event("SVGLoad")}}
- {{event("SVGResize")}}
- {{event("SVGScroll")}}
- {{event("SVGUnload")}}
- {{event("SVGZoom")}}

- -

Database events

- -

abort
- blocked
- complete
- {{event("error")}} (link)
- success
- upgradeneeded
- versionchange

- -

Notification events

- -

AlertActive
- AlertClose

- -

CSS events

- -

CssRuleViewRefreshed
- CssRuleViewChanged
- CssRuleViewCSSLinkClicked
- {{event("transitionend")}}

- -

Script events

- -

{{event("afterscriptexecute")}}
- {{event("beforescriptexecute")}}

- - - -

{{event("DOMMenuItemActive")}}
- {{event("DOMMenuItemInactive")}}

- -

Window events

- -

DOMWindowCreated
- DOMTitleChanged
- DOMWindowClose
- SSWindowClosing
- SSWindowStateReady
- SSWindowStateBusy
- close

- -

Document events

- -

DOMLinkAdded
- DOMLinkRemoved
- DOMMetaAdded
- DOMMetaRemoved
- DOMWillOpenModalDialog
- DOMModalDialogClosed

- - - -

{{event("popuphidden")}}
- {{event("popuphiding")}}
- {{event("popupshowing")}}
- {{event("popupshown")}}
- DOMPopupBlocked

- -

Tab events

- -

TabOpen
- TabClose
- TabSelect
- TabShow
- TabHide
- TabPinned
- TabUnpinned
- SSTabClosing
- SSTabRestoring
- SSTabRestored
- {{event("visibilitychange")}}

- -

Battery events

- -

{{event("chargingchange")}}
- {{event("chargingtimechange")}}
- {{event("dischargingtimechange")}}
- {{event("levelchange")}}

- -

Call events

- -

{{event("alerting")}}
- {{event("busy")}}
- {{event("callschanged")}}
- {{event("cfstatechange")}}
- {{event("connected")}}
- {{event("connecting")}}
- {{event("dialing")}}
- {{event("disconnected")}}
- {{event("disconnecting")}}
- {{event("error_(Telephony)","error")}}
- {{event("held")}}, {{event("holding")}}
- {{event("incoming")}}
- {{event("resuming")}}
- {{event("statechange")}}
- {{event("voicechange")}}

- -

Sensor events

- -

{{event("compassneedscalibration")}}
- {{event("devicelight")}}
- {{event("devicemotion")}}
- {{event("deviceorientation")}}
- {{event("deviceproximity")}}
- {{event("MozOrientation")}}
- {{event("orientationchange")}}
- {{event("userproximity")}}

- -

Smartcard events

- -

{{event("icccardlockerror")}}
- {{event("iccinfochange")}}
- {{event("smartcard-insert")}}
- {{event("smartcard-remove")}}
- {{event("stkcommand")}}
- {{event("stksessionend")}}
- {{event("cardstatechange")}}

- -

SMS and USSD events

- -

{{event("delivered")}}
- {{event("received")}}
- {{event("sent")}}
- {{event("ussdreceived")}}

- -

Frame events

- -

{{event("mozbrowserclose")}}
- {{event("mozbrowsercontextmenu")}}
- {{event("mozbrowsererror")}}
- {{event("mozbrowsericonchange")}}
- {{event("mozbrowserlocationchange")}}
- {{event("mozbrowserloadend")}}
- {{event("mozbrowserloadstart")}}
- {{event("mozbrowseropenwindow")}}
- {{event("mozbrowsersecuritychange")}}
- {{event("mozbrowsershowmodalprompt")}} (link)
- {{event("mozbrowsertitlechange")}}
- DOMFrameContentLoaded

- -

DOM mutation events

- -

DOMAttributeNameChanged
- DOMAttrModified
- DOMCharacterDataModified
- {{event("DOMContentLoaded")}}
- DOMElementNameChanged
- DOMNodeInserted
- DOMNodeInsertedIntoDocument
- DOMNodeRemoved
- DOMNodeRemovedFromDocument
- DOMSubtreeModified

- -

Touch events

- -

MozEdgeUIGesture
- MozMagnifyGesture
- MozMagnifyGestureStart
- MozMagnifyGestureUpdate
- MozPressTapGesture
- MozRotateGesture
- MozRotateGestureStart
- MozRotateGestureUpdate
- MozSwipeGesture
- MozTapGesture
- MozTouchDown
- MozTouchMove
- MozTouchUp
- {{event("touchcancel")}}
- {{event("touchend")}}
- {{event("touchenter")}}
- {{event("touchleave")}}
- {{event("touchmove")}}
- {{event("touchstart")}}

- -

Pointer events

- -

{{event("pointerover")}}
- {{event("pointerenter")}}
- {{event("pointerdown")}}
- {{event("pointermove")}}
- {{event("pointerup")}}
- {{event("pointercancel")}}
- {{event("pointerout")}}
- {{event("pointerleave")}}
- {{event("gotpointercapture")}}
- {{event("lostpointercapture")}}

- -

Standard events

- -

These events are defined in official Web specifications, and should be common across browsers. Each event is listed along with the interface representing the object sent to recipients of the event (so you can find information about what data is provided with each event) as well as a link to the specification or specifications that define the event.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Event NameEvent TypeSpecificationFired when...
{{event("abort")}}{{domxref("UIEvent")}}DOM L3The loading of a resource has been aborted.
abort{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgression has been terminated (not due to an error).
abort{{domxref("Event")}}IndexedDBA transaction has been aborted.
{{event("afterprint")}}{{gecko_minversion_inline("6")}}{{domxref("Event")}}HTML5The associated document has started printing or the print preview has been closed.
{{event("animationend")}}{{domxref("AnimationEvent")}}CSS AnimationsA CSS animation has completed.
{{event("animationiteration")}}{{domxref("AnimationEvent")}}CSS AnimationsA CSS animation is repeated.
{{event("animationstart")}}{{domxref("AnimationEvent")}}CSS AnimationsA CSS animation has started.
{{event("appinstalled")}}{{domxref("Event")}}Web App ManifestA web application is successfully installed as a progressive web app.
{{event("audioprocess")}}{{domxref("AudioProcessingEvent")}}{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.
{{event("audioend")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The user agent has finished capturing audio for speech recognition.
{{event("audiostart")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The user agent has started to capture audio for speech recognition.
{{event("beforeprint")}} {{gecko_minversion_inline("6")}}{{domxref("Event")}}HTML5The associated document is about to be printed or previewed for printing.
{{event("beforeunload")}}{{domxref("BeforeUnloadEvent")}}HTML5 The window, the document and its resources are about to be unloaded.
{{event("beginEvent")}}{{domxref("TimeEvent")}}SVGA SMIL animation element begins.
blocked IndexedDBAn open connection to a database is blocking a versionchange transaction on the same database.
{{event("blur")}}{{domxref("FocusEvent")}}DOM L3An element has lost focus (does not bubble).
{{event("boundary")}} {{experimental_inline}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The spoken utterance reaches a word or sentence boundary
{{event("cached")}}{{domxref("Event")}}OfflineThe resources listed in the manifest have been downloaded, and the application is now cached.
{{event("canplay")}}{{domxref("Event")}}HTML5 mediaThe user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
{{event("canplaythrough")}}{{domxref("Event")}}HTML5 mediaThe user agent can play the media up to its end without having to stop for further buffering of content.
{{event("change")}}{{domxref("Event")}}DOM L2, HTML5The change event is fired for {{HTMLElement("input")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}} elements when a change to the element's value is committed by the user.
{{event("chargingchange")}}{{domxref("Event")}}Battery statusThe battery begins or stops charging.
{{event("chargingtimechange")}}{{domxref("Event")}}Battery statusThe chargingTime attribute has been updated.
{{event("checking")}}{{domxref("Event")}}OfflineThe user agent is checking for an update, or attempting to download the cache manifest for the first time.
{{event("click")}}{{domxref("MouseEvent")}}DOM L3A pointing device button has been pressed and released on an element.
close{{domxref("Event")}}WebSocketA WebSocket connection has been closed.
complete IndexedDBA transaction successfully completed.
{{event("complete")}}{{domxref("OfflineAudioCompletionEvent")}}{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}The rendering of an {{domxref("OfflineAudioContext")}} is terminated.
{{event("compositionend")}}{{gecko_minversion_inline("9")}}{{domxref("CompositionEvent")}}DOM L3The composition of a passage of text has been completed or canceled.
{{event("compositionstart")}}{{gecko_minversion_inline("9")}}{{domxref("CompositionEvent")}}DOM L3The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).
{{event("compositionupdate")}}{{gecko_minversion_inline("9")}}{{domxref("CompositionEvent")}}DOM L3A character is added to a passage of text being composed.
{{event("contextmenu")}}{{domxref("MouseEvent")}}HTML5The right button of the mouse is clicked (before the context menu is displayed).
{{event("copy")}}{{domxref("ClipboardEvent")}}ClipboardThe text selection has been added to the clipboard.
{{event("cut")}}{{domxref("ClipboardEvent")}}ClipboardThe text selection has been removed from the document and added to the clipboard.
{{event("dblclick")}}{{domxref("MouseEvent")}}DOM L3A pointing device button is clicked twice on an element.
{{event("devicechange")}}{{domxref("Event")}}{{SpecName("Media Capture")}}A media device such as a camera, microphone, or speaker is connected or removed from the system.
{{event("devicelight")}}{{domxref("DeviceLightEvent")}}Ambient Light EventsFresh data is available from a light sensor.
{{event("devicemotion")}}{{domxref("DeviceMotionEvent")}}Device Orientation EventsFresh data is available from a motion sensor.
{{event("deviceorientation")}}{{domxref("DeviceOrientationEvent")}}Device Orientation EventsFresh data is available from an orientation sensor.
{{event("deviceproximity")}}{{domxref("DeviceProximityEvent")}}Proximity EventsFresh data is available from a proximity sensor (indicates an approximated distance between the device and a nearby object).
{{event("dischargingtimechange")}}{{domxref("Event")}}Battery statusThe dischargingTime attribute has been updated.
DOMActivate {{deprecated_inline}}{{domxref("UIEvent")}}DOM L3A button, link or state changing element is activated (use {{event("click")}} instead).
DOMAttributeNameChanged {{deprecated_inline}}{{domxref("MutationNameEvent")}}DOM L3 RemovedThe name of an attribute changed (use mutation observers instead).
DOMAttrModified {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3The value of an attribute has been modified (use mutation observers instead).
DOMCharacterDataModified {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A text or another CharacterData has changed (use mutation observers instead).
{{event("DOMContentLoaded")}}{{domxref("Event")}}HTML5The document has finished loading (but not its dependent resources).
DOMElementNameChanged {{deprecated_inline}}{{domxref("MutationNameEvent")}}DOM L3 RemovedThe name of an element changed (use mutation observers instead).
DOMFocusIn {{deprecated_inline}}{{domxref("FocusEvent")}}DOM L3An element has received focus (use {{event("focus")}} or {{event("focusin")}} instead).
DOMFocusOut {{deprecated_inline}}{{domxref("FocusEvent")}}DOM L3An element has lost focus (use {{event("blur")}} or {{event("focusout")}} instead).
DOMNodeInserted {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been added as a child of another node (use mutation observers instead).
DOMNodeInsertedIntoDocument {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been inserted into the document (use mutation observers instead).
DOMNodeRemoved {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been removed from its parent node (use mutation observers instead).
DOMNodeRemovedFromDocument {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been removed from the document (use mutation observers instead).
DOMSubtreeModified {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A change happened in the document (use mutation observers instead).
{{event("downloading")}}{{domxref("Event")}}OfflineThe user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time.
{{event("drag")}}{{domxref("DragEvent")}}HTML5An element or text selection is being dragged (every 350ms).
{{event("dragend")}}{{domxref("DragEvent")}}HTML5A drag operation is being ended (by releasing a mouse button or hitting the escape key).
{{event("dragenter")}}{{domxref("DragEvent")}}HTML5A dragged element or text selection enters a valid drop target.
{{event("dragleave")}}{{domxref("DragEvent")}}HTML5A dragged element or text selection leaves a valid drop target.
{{event("dragover")}}{{domxref("DragEvent")}}HTML5An element or text selection is being dragged over a valid drop target (every 350ms).
{{event("dragstart")}}{{domxref("DragEvent")}}HTML5The user starts dragging an element or text selection.
{{event("drop")}}{{domxref("DragEvent")}}HTML5An element is dropped on a valid drop target.
{{event("durationchange")}}{{domxref("Event")}}HTML5 mediaThe duration attribute has been updated.
{{event("emptied")}}{{domxref("Event")}}HTML5 mediaThe media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
{{event("end_(SpeechRecognition)","end")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The speech recognition service has disconnected.
{{event("end_(SpeechSynthesis)","end")}} {{experimental_inline}}{{domxref("SpeechSynthesisEvent")}}{{SpecName("Web Speech API")}}The utterance has finished being spoken.
{{event("ended")}}{{domxref("Event")}}HTML5 mediaPlayback has stopped because the end of the media was reached.
{{event("ended_(Web_Audio)", "ended")}}{{domxref("Event")}}{{SpecName("Web Audio API")}}Playback has stopped because the end of the media was reached.
{{event("endEvent")}}{{domxref("TimeEvent")}}SVGA SMIL animation element ends.
{{event("error")}}{{domxref("UIEvent")}}DOM L3A resource failed to load.
{{event("error")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgression has failed.
{{event("error")}}{{domxref("Event")}}OfflineAn error occurred while downloading the cache manifest or updating the content of the application.
{{event("error")}}{{domxref("Event")}}WebSocketA WebSocket connection has been closed with prejudice (some data couldn't be sent for example).
{{event("error")}}{{domxref("Event")}}Server Sent EventsAn event source connection has been failed.
{{event("error")}}{{domxref("Event")}}IndexedDBA request caused an error and failed.
{{event("error_(SpeechRecognitionError)","error")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}A speech recognition error occurs.
{{event("error_(SpeechSynthesisError)","error")}}{{domxref("SpeechSynthesisErrorEvent")}}{{SpecName('Web Speech API')}}An error occurs that prevents the utterance from being successfully spoken.
{{event("focus")}}{{domxref("FocusEvent")}}DOM L3An element has received focus (does not bubble).
{{event("focusin")}}{{domxref("FocusEvent")}}DOM L3An element is about to receive focus (bubbles).
{{event("focusout")}}{{domxref("FocusEvent")}}DOM L3An element is about to lose focus (bubbles).
{{event("fullscreenchange")}}{{gecko_minversion_inline("9")}}{{domxref("Event")}}Full ScreenAn element was turned to fullscreen mode or back to normal mode.
{{event("fullscreenerror")}}{{gecko_minversion_inline("9")}}{{domxref("Event")}}Full ScreenIt was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.
{{event("gamepadconnected")}}{{domxref("GamepadEvent")}}GamepadA gamepad has been connected.
{{event("gamepaddisconnected")}}{{domxref("GamepadEvent")}}GamepadA gamepad has been disconnected.
{{event("gotpointercapture")}}{{domxref("PointerEvent")}}Pointer EventsElement receives pointer capture.
{{event("hashchange")}}{{domxref("HashChangeEvent")}}HTML5The fragment identifier of the URL has changed (the part of the URL after the #).
{{event("lostpointercapture")}}{{domxref("PointerEvent")}}Pointer EventsElement lost pointer capture.
{{event("input")}}{{domxref("Event")}}HTML5The value of an element changes or the content of an element with the attribute contenteditable is modified.
{{event("invalid")}}{{domxref("Event")}}HTML5A submittable element has been checked and doesn't satisfy its constraints.
{{event("keydown")}}{{domxref("KeyboardEvent")}}DOM L3A key is pressed down.
{{event("keypress")}}{{domxref("KeyboardEvent")}}DOM L3A key is pressed down and that key normally produces a character value (use input instead).
{{event("keyup")}}{{domxref("KeyboardEvent")}}DOM L3A key is released.
{{event("languagechange")}} {{experimental_inline}}{{domxref("Event")}}{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}The user's preferred languages have changed.
{{event("levelchange")}}{{domxref("Event")}}Battery statusThe level attribute has been updated.
{{event("load")}}{{domxref("UIEvent")}}DOM L3A resource and its dependent resources have finished loading.
load{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgression has been successful.
{{event("loadeddata")}}{{domxref("Event")}}HTML5 mediaThe first frame of the media has finished loading.
{{event("loadedmetadata")}}{{domxref("Event")}}HTML5 mediaThe metadata has been loaded.
{{event("loadend")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgress has stopped (after "error", "abort" or "load" have been dispatched).
{{event("loadstart")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgress has begun.
{{event("mark")}} {{experimental_inline}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The spoken utterance reaches a named SSML "mark" tag.
message{{domxref("MessageEvent")}}WebSocketA message is received through a WebSocket.
message{{domxref("MessageEvent")}}Web WorkersA message is received from a Web Worker.
message{{domxref("MessageEvent")}}Web MessagingA message is received from a child (i)frame or a parent window.
message{{domxref("MessageEvent")}}Server Sent EventsA message is received through an event source.
{{event("messageerror")}}{{domxref("MessageEvent")}}{{domxref("MessagePort")}}, Web Workers, Broadcast Channel, {{domxref("Window")}}A message error is raised when a message is received by an object.
{{event("message_(ServiceWorker)","message")}} {{experimental_inline}}{{domxref("ServiceWorkerMessageEvent")}} or {{domxref("ExtendableMessageEvent")}}, depending on context.Service WorkersA message is received from a service worker, or a message is received in a service worker from another context.
{{event("mousedown")}}{{domxref("MouseEvent")}}DOM L3A pointing device button (usually a mouse) is pressed on an element.
{{event("mouseenter")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved onto the element that has the listener attached.
{{event("mouseleave")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved off the element that has the listener attached.
{{event("mousemove")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved over an element.
{{event("mouseout")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved off the element that has the listener attached or off one of its children.
{{event("mouseover")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved onto the element that has the listener attached or onto one of its children.
{{event("mouseup")}}{{domxref("MouseEvent")}}DOM L3A pointing device button is released over an element.
{{event("nomatch")}} {{experimental_inline}}{{domxref("SpeechRecognitionEvent")}}{{SpecName('Web Speech API')}}The speech recognition service returns a final result with no significant recognition.
{{event("notificationclick")}}{{domxref("NotificationEvent")}}{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}A system notification spawned by {{domxref("ServiceWorkerRegistration.showNotification()")}} has been clicked.
{{event("noupdate")}}{{domxref("Event")}}OfflineThe manifest hadn't changed.
{{event("obsolete")}}{{domxref("Event")}}OfflineThe manifest was found to have become a 404 or 410 page, so the application cache is being deleted.
{{event("offline")}}{{domxref("Event")}}HTML5 offlineThe browser has lost access to the network.
{{event("online")}}{{domxref("Event")}}HTML5 offlineThe browser has gained access to the network (but particular websites might be unreachable).
open{{domxref("Event")}}WebSocketA WebSocket connection has been established.
open{{domxref("Event")}}Server Sent EventsAn event source connection has been established.
{{event("orientationchange")}}{{domxref("Event")}}Screen OrientationThe orientation of the device (portrait/landscape) has changed
{{event("pagehide")}}{{domxref("PageTransitionEvent")}}HTML5A session history entry is being traversed from.
{{event("pageshow")}}{{domxref("PageTransitionEvent")}}HTML5A session history entry is being traversed to.
{{event("paste")}}{{domxref("ClipboardEvent")}}ClipboardData has been transferred from the system clipboard to the document.
{{event("pause")}}{{domxref("Event")}}HTML5 mediaPlayback has been paused.
{{event("pause_(SpeechSynthesis)", "pause")}} {{experimental_inline}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The utterance is paused part way through.
{{event("pointercancel")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer is unlikely to produce any more events.
{{event("pointerdown")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer enters the active buttons state.
{{event("pointerenter")}}{{domxref("PointerEvent")}}Pointer EventsPointing device is moved inside the hit-testing boundary.
{{event("pointerleave")}}{{domxref("PointerEvent")}}Pointer EventsPointing device is moved out of the hit-testing boundary.
{{event("pointerlockchange")}}{{domxref("Event")}}Pointer LockThe pointer was locked or released.
{{event("pointerlockerror")}}{{domxref("Event")}}Pointer LockIt was impossible to lock the pointer for technical reasons or because the permission was denied.
{{event("pointermove")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer changed coordinates.
{{event("pointerout")}}{{domxref("PointerEvent")}}Pointer EventsThe pointing device moved out of hit-testing boundary or leaves detectable hover range.
{{event("pointerover")}}{{domxref("PointerEvent")}}Pointer EventsThe pointing device is moved into the hit-testing boundary.
{{event("pointerup")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer leaves the active buttons state.
{{event("play")}}{{domxref("Event")}}HTML5 mediaPlayback has begun.
{{event("playing")}}{{domxref("Event")}}HTML5 mediaPlayback is ready to start after having been paused or delayed due to lack of data.
{{event("popstate")}}{{domxref("PopStateEvent")}}HTML5A session history entry is being navigated to (in certain cases).
{{event("progress")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestIn progress.
progress{{domxref("ProgressEvent")}}OfflineThe user agent is downloading resources listed by the manifest.
{{event("push")}}{{domxref("PushEvent")}}{{SpecName("Push API")}}A Service Worker has received a push message.
{{event("pushsubscriptionchange")}}{{domxref("PushEvent")}}{{SpecName("Push API")}}A PushSubscription has expired.
{{event("ratechange")}}{{domxref("Event")}}HTML5 mediaThe playback rate has changed.
{{event("readystatechange")}}{{domxref("Event")}}HTML5 and XMLHttpRequestThe readyState attribute of a document has changed.
{{event("repeatEvent")}}{{domxref("TimeEvent")}}SVGA SMIL animation element is repeated.
{{event("reset")}}{{domxref("Event")}}DOM L2, HTML5A form is reset.
{{event("resize")}}{{domxref("UIEvent")}}DOM L3The document view has been resized.
{{event("resourcetimingbufferfull")}}{{domxref("Performance")}}Resource TimingThe browser's resource timing buffer is full.
{{event("result")}} {{experimental_inline}}{{domxref("SpeechRecognitionEvent")}}{{SpecName('Web Speech API')}}The speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.
{{event("resume")}} {{experimental_inline}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}A paused utterance is resumed.
{{event("scroll")}}{{domxref("UIEvent")}}DOM L3The document view or an element has been scrolled.
{{event("seeked")}}{{domxref("Event")}}HTML5 mediaA seek operation completed.
{{event("seeking")}}{{domxref("Event")}}HTML5 mediaA seek operation began.
{{event("select")}}{{domxref("UIEvent")}}DOM L3Some text is being selected.
{{event("selectstart")}} {{experimental_inline}}{{domxref("Event")}}{{ SpecName('Selection API')}}A selection just started.
{{event("selectionchange")}} {{experimental_inline}}{{domxref("Event")}}{{ SpecName('Selection API')}}The selection in the document has been changed.
{{event("show")}}{{domxref("MouseEvent")}}HTML5A contextmenu event was fired on/bubbled to an element that has a contextmenu attribute
{{event("soundend")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Any sound — recognisable speech or not — has stopped being detected.
{{event("soundstart")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Any sound — recognisable speech or not — has been detected.
{{event("speechend")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Speech recognised by the speech recognition service has stopped being detected.
{{event("speechstart")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Sound that is recognised by the speech recognition service as speech has been detected.
{{event("stalled")}}{{domxref("Event")}}HTML5 mediaThe user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
{{event("start_(SpeechRecognition)","start")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.
{{event("start_(SpeechSynthesis)","start")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The utterance has begun to be spoken.
{{event("storage")}}{{domxref("StorageEvent")}}Web StorageA storage area (localStorage or sessionStorage) has changed.
{{event("submit")}}{{domxref("Event")}}DOM L2, HTML5A form is submitted.
success{{domxref("Event")}}IndexedDBA request successfully completed.
{{event("suspend")}}{{domxref("Event")}}HTML5 mediaMedia data loading has been suspended.
{{event("SVGAbort")}}{{domxref("SVGEvent")}}SVGPage loading has been stopped before the SVG was loaded.
{{event("SVGError")}}{{domxref("SVGEvent")}}SVGAn error has occurred before the SVG was loaded.
{{event("SVGLoad")}}{{domxref("SVGEvent")}}SVGAn SVG document has been loaded and parsed.
{{event("SVGResize")}}{{domxref("SVGEvent")}}SVGAn SVG document is being resized.
{{event("SVGScroll")}}{{domxref("SVGEvent")}}SVGAn SVG document is being scrolled.
{{event("SVGUnload")}}{{domxref("SVGEvent")}}SVGAn SVG document has been removed from a window or frame.
{{event("SVGZoom")}}{{domxref("SVGZoomEvent")}}SVGAn SVG document is being zoomed.
{{event("timeout")}}{{domxref("ProgressEvent")}}XMLHttpRequest 
{{event("timeupdate")}}{{domxref("Event")}}HTML5 mediaThe time indicated by the currentTime attribute has been updated.
{{event("touchcancel")}}{{domxref("TouchEvent")}}Touch EventsA touch point has been disrupted in an implementation-specific manners (too many touch points for example).
{{event("touchend")}}{{domxref("TouchEvent")}}Touch EventsA touch point is removed from the touch surface.
{{event("touchmove")}}{{domxref("TouchEvent")}}Touch EventsA touch point is moved along the touch surface.
{{event("touchstart")}}{{domxref("TouchEvent")}}Touch EventsA touch point is placed on the touch surface.
{{event("transitionend")}}{{domxref("TransitionEvent")}}CSS TransitionsA CSS transition has completed.
{{event("unload")}}{{domxref("UIEvent")}}DOM L3The document or a dependent resource is being unloaded.
{{event("updateready")}}{{domxref("Event")}}OfflineThe resources listed in the manifest have been newly redownloaded, and the script can use swapCache() to switch to the new cache.
upgradeneeded IndexedDBAn attempt was made to open a database with a version number higher than its current version. A versionchange transaction has been created.
{{event("userproximity")}}{{domxref("UserProximityEvent")}}{{SpecName("Proximity Events")}}Fresh data is available from a proximity sensor (indicates whether the nearby object is near the device or not).
{{event("voiceschanged")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The list of {{domxref("SpeechSynthesisVoice")}} objects that would be returned by the {{domxref("SpeechSynthesis.getVoices()")}} method has changed (when the {{event("voiceschanged")}} event fires.)
versionchange IndexedDBA versionchange transaction completed.
{{event("visibilitychange")}}{{domxref("Event")}}Page visibilityThe content of a tab has become visible or has been hidden.
{{event("volumechange")}}{{domxref("Event")}}HTML5 mediaThe volume has changed.
{{event("waiting")}}{{domxref("Event")}}HTML5 mediaPlayback has stopped because of a temporary lack of data.
{{event("wheel")}}{{gecko_minversion_inline("17")}}{{domxref("WheelEvent")}}DOM L3A wheel button of a pointing device is rotated in any direction.
- -

Non-standard events

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Event NameEvent TypeSpecificationFired when...
{{event("afterscriptexecute")}}{{domxref("Event")}}Mozilla SpecificA script has been executed.
{{event("beforescriptexecute")}}{{domxref("Event")}}Mozilla SpecificA script is about to be executed.
{{event("beforeinstallprompt")}}{{domxref("Event")}}Chrome specificA user is prompted to save a web site to a home screen on mobile.
{{event("cardstatechange")}} Firefox OS specificThe {{domxref("MozMobileConnection.cardState")}} property changes value.
{{event("change")}}{{domxref("DeviceStorageChangeEvent")}}Firefox OS specificThis event is triggered each time a file is created, modified or deleted on a given storage area.
{{event("connectionInfoUpdate")}} Firefox OS specificThe informations about the signal strength and the link speed have been updated.
{{event("cfstatechange")}} Firefox OS specificThe call forwarding state changes.
{{event("datachange")}} Firefox OS specificThe {{domxref("MozMobileConnection.data")}} object changes values.
{{event("dataerror")}} Firefox OS specificThe {{domxref("MozMobileConnection.data")}} object receive an error from the RIL.
{{event("DOMMouseScroll")}}{{deprecated_inline}} Mozilla specificThe wheel button of a pointing device is rotated (detail attribute is a number of lines). (use {{event("wheel")}} instead)
dragdrop {{deprecated_inline}}DragEventMozilla specificAn element is dropped (use {{event("drop")}} instead).
dragexit {{deprecated_inline}}DragEventMozilla specificA drag operation is being ended(use {{event("dragend")}} instead).
draggesture {{deprecated_inline}}DragEventMozilla specificThe user starts dragging an element or text selection (use {{event("dragstart")}} instead).
{{event("icccardlockerror")}} Firefox OS specificthe {{domxref("MozMobileConnection.unlockCardLock()")}} or {{domxref("MozMobileConnection.setCardLock()")}} methods fails.
{{event("iccinfochange")}} Firefox OS specificThe {{domxref("MozMobileConnection.iccInfo")}} object changes.
{{event("localized")}} Mozilla SpecificThe page has been localized using data-l10n-* attributes.
{{event("mousewheel")}}{{deprecated_inline}} IE inventedThe wheel button of a pointing device is rotated.
{{event("MozAudioAvailable")}}{{domxref("Event")}}Mozilla specificThe audio buffer is full and the corresponding raw samples are available.
MozBeforeResize {{obsolete_inline}} Mozilla specificA window is about to be resized.
{{event("mozbrowseractivitydone")}} Firefox OS Browser API-specificSent when some activity has been completed (complete description TBD.)
{{event("mozbrowserasyncscroll")}} Firefox OS Browser API-specificSent when the scroll position within a browser {{HTMLElement("iframe")}} changes.
{{event("mozbrowseraudioplaybackchange")}} Firefox OS Browser API-specificSent when audio starts or stops playing within the browser {{HTMLElement("iframe")}} content.
{{event("mozbrowsercaretstatechanged")}} Firefox OS Browser API-specificSent when the text selected inside the browser {{HTMLElement("iframe")}} content changes.
{{event("mozbrowserclose")}} Firefox OS Browser API-specificSent when window.close() is called within a browser {{HTMLElement("iframe")}}.
{{event("mozbrowsercontextmenu")}} Firefox OS Browser API-specificSent when a browser {{HTMLElement("iframe")}} try to open a context menu.
{{event("mozbrowserdocumentfirstpaint")}} Firefox OS Browser API-specificSent when a new paint occurs on any document in the browser {{HTMLElement("iframe")}}.
{{event("mozbrowsererror")}} Firefox OS Browser API-specificSent when an error occured while trying to load a content within a browser iframe
{{event("mozbrowserfindchange")}} Firefox OS Browser API-specificSent when a search operation is performed on the browser {{HTMLElement("iframe")}} content (see HTMLIFrameElement search methods.)
{{event("mozbrowserfirstpaint")}} Firefox OS Browser API-specificSent when the {{HTMLElement("iframe")}} paints content for the first time (this doesn't include the initial paint from about:blank.)
{{event("mozbrowsericonchange")}} Firefox OS Browser API-specificSent when the favicon of a browser iframe changes.
{{event("mozbrowserlocationchange")}} Firefox OS Browser API-specificSent when an browser iframe's location changes.
{{event("mozbrowserloadend")}} Firefox OS Browser API-specificSent when the browser iframe has finished loading all its assets.
{{event("mozbrowserloadstart")}} Firefox OS Browser API-specificSent when the browser iframe starts to load a new page.
{{event("mozbrowsermanifestchange")}} Firefox OS Browser API-specificSent when a the path to the app manifest changes, in the case of a browser {{HTMLElement("iframe")}} with an open web app embedded in it.
{{event("mozbrowsermetachange")}} Firefox OS Browser API-specificSent when a {{htmlelement("meta")}} elelment is added to, removed from or changed in the browser {{HTMLElement("iframe")}}'s content.
{{event("mozbrowseropensearch")}} Firefox OS Browser API-specificSent when a link to a search engine is found.
{{event("mozbrowseropentab")}} Firefox OS Browser API-specificSent when a new tab is opened within a browser {{HTMLElement("iframe")}} as a result of the user issuing a command to open a link target in a new tab (for example ctrl/cmd + click.)
{{event("mozbrowseropenwindow")}} Firefox OS Browser API-specificSent when {{domxref("window.open()")}} is called within a browser iframe.
{{event("mozbrowserresize")}} Firefox OS Browser API-specificSent when the browser {{HTMLElement("iframe")}}'s window size has changed.
{{event("mozbrowserscroll")}} Firefox OS Browser API-specificSent when the browser {{HTMLElement("iframe")}} content scrolls.
{{event("mozbrowserscrollareachanged")}} Firefox OS Browser API-specificSent when the available scrolling area  in the browser {{HTMLElement("iframe")}} changes. This can occur on resize and when the page size changes (while loading for example.)
{{event("mozbrowserscrollviewchange")}} Firefox OS Browser API-specificSent when asynchronous scrolling (i.e. APCZ) starts or stops.
{{event("mozbrowsersecuritychange")}} Firefox OS Browser API-specificSent when the SSL state changes within a browser iframe.
{{event("mozbrowserselectionstatechanged")}} Firefox OS Browser API-specificSent when the text selected inside the browser {{HTMLElement("iframe")}} content changes. Note that this is deprecated, and newer implementations use {{event("mozbrowsercaretstatechanged")}} instead.
{{event("mozbrowsershowmodalprompt")}} Firefox OS Browser API-specificSent when {{domxref("window.alert","alert()")}}, {{domxref("window.confirm","confirm()")}} or {{domxref("window.prompt","prompt()")}} are called within a browser iframe
{{event("mozbrowsertitlechange")}} Firefox OS Browser API-specificSent when the document.title changes within a browser iframe.
{{event("mozbrowserusernameandpasswordrequired")}} Firefox OS Browser API-specificSent when an HTTP authentification is requested.
{{event("mozbrowservisibilitychange")}} Firefox OS Browser API-specificSent when the visibility state of the current browser iframe {{HTMLElement("iframe")}} changes, for example due to a call to {{domxref("HTMLIFrameElement.setVisible","setVisible()")}}.
{{event("MozGamepadButtonDown")}} To be specifiedA gamepad button is pressed down.
{{event("MozGamepadButtonUp")}} To be specifiedA gamepad button is released.
{{event("MozMousePixelScroll")}} {{deprecated_inline}} Mozilla specificThe wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)
{{event("MozOrientation")}} {{deprecated_inline}} Mozilla specificFresh data is available from an orientation sensor (see deviceorientation).
{{event("MozScrolledAreaChanged")}}{{domxref("UIEvent")}}Mozilla specificThe document view has been scrolled or resized.
{{event("moztimechange")}} Mozilla specificThe time of the device has been changed.
MozTouchDown {{deprecated_inline}} Mozilla specificA touch point is placed on the touch surface (use touchstart instead).
MozTouchMove {{deprecated_inline}} Mozilla specificA touch point is moved along the touch surface (use touchmove instead).
MozTouchUp {{deprecated_inline}} Mozilla specificA touch point is removed from the touch surface (use touchend instead).
{{event("alerting")}}{{domxref("CallEvent")}}To be specifiedThe correspondent is being alerted (his/her phone is ringing).
{{event("busy")}}{{domxref("CallEvent")}}To be specifiedThe line of the correspondent is busy.
{{event("callschanged")}}{{domxref("CallEvent")}}To be specifiedA call has been added or removed from the list of current calls.
onconnected {{event("connected")}}{{domxref("CallEvent")}}To be specifiedA call has been connected.
{{event("connecting")}}{{domxref("CallEvent")}}To be specifiedA call is about to connect.
{{event("delivered")}}{{domxref("SMSEvent")}}To be specifiedAn SMS has been successfully delivered.
{{event("dialing")}}{{domxref("CallEvent")}}To be specifiedThe number of a correspondent has been dialed.
{{event("disabled")}} Firefox OS specificWifi has been disabled on the device.
{{event("disconnected")}}{{domxref("CallEvent")}}To be specifiedA call has been disconnected.
{{event("disconnecting")}}{{domxref("CallEvent")}}To be specifiedA call is about to disconnect.
{{event("enabled")}} Firefox OS specificWifi has been enabled on the device.
{{event("error_(Telephony)","error")}}{{domxref("CallEvent")}}To be specifiedAn error occurred.
{{event("held")}}{{domxref("CallEvent")}}To be specifiedA call has been held.
{{event("holding")}}{{domxref("CallEvent")}}To be specifiedA call is about to be held.
{{event("incoming")}}{{domxref("CallEvent")}}To be specifiedA call is being received.
{{event("received")}}{{domxref("SMSEvent")}}To be specifiedAn SMS has been received.
{{event("resuming")}}{{domxref("CallEvent")}}To be specifiedA call is about to resume.
{{event("sent")}}{{domxref("SMSEvent")}}To be specifiedAn SMS has been sent.
{{event("statechange")}}{{domxref("CallEvent")}}To be specifiedThe state of a call has changed.
{{event("statuschange")}} Firefox OS specificThe status of the Wifi connection changed.
{{event("overflow")}}{{domxref("UIEvent")}}Mozilla specificAn element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with overflow != visible).
{{event("smartcard-insert")}} Mozilla specificA smartcard has been inserted.
{{event("smartcard-remove")}} Mozilla specificA smartcard has been removed.
{{event("stkcommand")}} Firefox OS specificThe STK Proactive Command is issued from ICC.
{{event("stksessionend")}} Firefox OS specificThe STK Session is terminated by ICC.
text Mozilla SpecificA generic composition event occurred.
{{event("touchenter")}}{{domxref("TouchEvent")}}Touch Events Removed 
{{event("touchleave")}}{{domxref("TouchEvent")}}Touch Events Removed 
{{event("underflow")}}{{domxref("UIEvent")}}Mozilla specificAn element is no longer overflowed by its content (only works for elements styled with overflow != visible).
uploadprogress {{deprecated_inline}}{{domxref("ProgressEvent")}}Mozilla SpecificUpload is in progress (see {{event("progress")}}).
-

{{event("ussdreceived")}}

- 		 Firefox OS specificA new USSD message is received
{{event("voicechange")}} Firefox OS specificThe {{domxref("MozMobileConnection.voice")}} object changes values.
- -

Mozilla-specific events

- -
-

Note: those events are never exposed to web content and can only be used in chrome content context.

-
- -

XUL events

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Event NameEvent TypeSpecificationFired when...
{{event("broadcast")}} XULAn observer noticed a change to the attributes of a watched broadcaster.
{{event("CheckboxStateChange")}} XULThe state of a checkbox has been changed either by a user action or by a script (useful for accessibility).
close XULThe close button of the window has been clicked.
{{event("command")}} XULAn element has been activated.
{{event("commandupdate")}} XULA command update occurred on a commandset element.
{{event("DOMMenuItemActive")}} XULA menu or menuitem has been hovered or highlighted.
{{event("DOMMenuItemInactive")}} XULA menu or menuitem is no longer hovered or highlighted.
{{event("popuphidden")}}PopupEventXULA menupopup, panel or tooltip has been hidden.
{{event("popuphiding")}}PopupEventXULA menupopup, panel or tooltip is about to be hidden.
{{event("popupshowing")}}PopupEventXULA menupopup, panel or tooltip is about to become visible.
{{event("popupshown")}}PopupEventXULA menupopup, panel or tooltip has become visible.
{{event("RadioStateChange")}} XULThe state of a radio has been changed either by a user action or by a script (useful for accessibility).
{{event("ValueChange")}} XULThe value of an element has changed (a progress bar for example, useful for accessibility).
- -

Add-on-specific events

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Event NameEvent TypeSpecificationFired when...
MozSwipeGesture Addons specificA touch point is swiped across the touch surface
MozMagnifyGestureStart Addons specificTwo touch points start to move away from each other.
MozMagnifyGestureUpdate Addons specificTwo touch points move away from each other (after a MozMagnifyGestureStart).
MozMagnifyGesture Addons specificTwo touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).
MozRotateGestureStart Addons specificTwo touch points start to rotate around a point.
MozRotateGestureUpdate Addons specificTwo touch points rotate around a point (after a MozRotateGestureStart).
MozRotateGesture Addons specificTwo touch points rotate around a point (after a sequence of MozRotateGestureUpdate).
MozTapGesture Addons specificTwo touch points are tapped on the touch surface.
MozPressTapGesture Addons specificA "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).
MozEdgeUIGesture Addons specificA touch point is swiped across the touch surface to invoke the edge UI (Win8 only).
MozAfterPaint Addons specificContent has been repainted.
DOMPopupBlocked Addons specificA popup has been blocked
DOMWindowCreated Addons specificA window has been created.
DOMWindowClose Addons specificA window is about to be closed.
DOMTitleChanged Addons specifcThe title of a window has changed.
DOMLinkAdded Addons specifcA link has been added a document.
DOMLinkRemoved Addons specifcA link has been removed inside from a document.
DOMMetaAdded Addons specificA meta element has been added to a document.
DOMMetaRemoved Addons specificA meta element has been removed from a document.
DOMWillOpenModalDialog Addons specificA modal dialog is about to open.
DOMModalDialogClosed Addons specificA modal dialog has been closed.
DOMAutoComplete Addons specificThe content of an element has been auto-completed.
DOMFrameContentLoaded Addons specificThe frame has finished loading (but not its dependent resources).
AlertActive Addons specificA notification element is shown.
AlertClose Addons specificA notification element is closed.
fullscreen Addons specificBrowser fullscreen mode has been entered or left.
sizemodechange Addons specificWindow has entered/left fullscreen mode, or has been minimized/unminimized.
MozEnteredDomFullscreen Addons specificDOM fullscreen mode has been entered.
SSWindowClosing Addons specificThe session store will stop tracking this window.
SSTabClosing Addons specificThe session store will stop tracking this tab.
SSTabRestoring Addons specificA tab is about to be restored.
SSTabRestored Addons specificA tab has been restored.
SSWindowStateReady Addons specificA window state has switched to "ready".
SSWindowStateBusy Addons specificA window state has switched to "busy".
TabOpen Addons specificA tab has been opened.
TabClose Addons specificA tab has been closed.
TabSelect Addons specificA tab has been selected.
TabShow Addons specificA tab has been shown.
TabHide Addons specificA tab has been hidden.
TabPinned Addons specificA tab has been pinned.
TabUnpinned Addons specificA tab has been unpinned.
- -

Developer tool-specific events

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Event NameEvent TypeSpecificationFired when...
CssRuleViewRefreshed devtools specificThe "Rules" view of the style inspector has been updated.
CssRuleViewChanged devtools specificThe "Rules" view of the style inspector has been changed.
CssRuleViewCSSLinkClicked devtools specificA link to a CSS file has been clicked in the "Rules" view of the style inspector.
- -

See also

- - diff --git a/files/bn/web/guide/api/index.html b/files/bn/web/guide/api/index.html deleted file mode 100644 index 743350c37b..0000000000 --- a/files/bn/web/guide/api/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Guide to Web APIs -slug: Web/Guide/API -tags: - - API - - Guide - - Landing - - NeedsTranslation - - TopicStub - - Web -translation_of: Web/Guide/API ---- -

এখানে আপনি ওয়েব ডেভেলপমেন্ট আর্কিটেকচার যেসকল এপিআই এর ভিত্তিপ্রস্তরের উপর দাঁড়িয়ে আছে, তার সম্পর্কে ধারণা পেতে কিছু আর্টিকেলের লিংক এখানে পাবেন।

-

Web APIs from A to Z

- -

{{ListGroups}}

- -

See also

- - diff --git a/files/bn/web/guide/graphics/index.html b/files/bn/web/guide/graphics/index.html deleted file mode 100644 index 7d9a685af2..0000000000 --- a/files/bn/web/guide/graphics/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: গ্রাফিক্স অন দি ওয়েব -slug: Web/Guide/Graphics -tags: - - NeedsReview -translation_of: Web/Guide/Graphics -original_slug: Web/Guide/গ্রাফিক্স ---- -

আধুনিক ওয়েব সাইট এবং অ্যাপ্লিকেশনে প্রায়ই গ্রাফিক্স উপস্থাপন প্রয়োজন পরে। {{HTMLElement("img")}} উপাদান ব্যবহার করে সহজেই স্ট্যাটিক ইমেজ প্রদর্শিত করা যায়, অথবা {{cssxref("background-image")}} প্রোপার্টি ব্যবহার করে এইচটিএমএল উপাদানের পটভূমি নির্ধারণ করা যায়।

-

আপনি প্রায়ই অন-দা-ফ্লাই  গ্রাফিক্স নির্মাণ করতে চান, অথবা ঘটনার পরে ছবি প্রদর্শন করতে চান। এই নিবন্ধনটি আপনাকে সাহায্য করবে কিভাবে আপনি তা সম্পন্ন করতে পারেন।

-
-
-

2D গ্রাফিক্স

-
-
- Canvas(ক্যানভাস)
-
- এই {{HTMLElement("canvas")}}উপাদানটি APIs প্রদান করে যেন জাভাস্ক্রিপ্ট ব্যাবহার করে 2D গ্রাফিক্স তৈরি করা যায়।
-
- SVG(এস ভি জি)
- স্কেলেবল ভেক্টর গ্রাফিক্স (SVG) লাইনস, কারভস, এবং অন্যান্য জ্যামিতিক আকার প্রদান করে। bitmaps ব্যাবহার করা এড়িয়ে চলার মাধ্যমে, আপনি যেকোনো আকারের ছবি পরিছন্নভাবে তৈরি করতে পারেন।
-
-

সম্পূর্ণ দেখুন্‌...

-
-
-

3D গ্রাফিক্স

-
-
- WebGL(ওয়েব জি এল)
-
-
-
- WebGL শুরু করার একটি নির্দেশিকা, ওয়েবের জন্য 3D গ্রাফিক্স API. এই প্রযুক্তি আপনাকে ওয়েবের মধ্যে স্ট্যান্ডার্ড OpenGL ES ব্যাবহার করতে দেয়।
-
-
-
-

ভিডিও

-
-
- HTML5 (অডিও এবং ভিডিও ব্যাবহার)
-
-
-
- একটি HTML নথিতে ভিডিও এম্বেড এবং প্লেব্যাক নিয়ন্ত্রণ।
-
-
-
- WebRTC(ওয়েব আর টি সি)
-
-  WebRTC(ওয়েব আর টি সি) এর RTC (আর টি সি) বলতে Real-Time Communications (রিয়েল টাইম কমিউনিকেশন) কে বুঝায়, এই প্রযুক্তি অডিও / ভিডিও স্ট্রিমিং এবং ব্রাউজার ক্লায়েন্টস (মিত্রগণ) মধ্যে তথ্য ভাগ করতে সক্ষম।
-
-
-
-

 

diff --git a/files/bn/web/guide/html/editable_content/index.html b/files/bn/web/guide/html/editable_content/index.html deleted file mode 100644 index 6433ee1325..0000000000 --- a/files/bn/web/guide/html/editable_content/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Content Editable -slug: Web/Guide/HTML/Editable_content -tags: - - NeedsReview -translation_of: Web/Guide/HTML/Editable_content -original_slug: Web/Guide/HTML/Content_Editable ---- -

HTML5 এ যেকোনো অংশ পরিবর্তনীয়। কিছু জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার ব্যবহার করে আপনি একটি ওয়েব পেজ একটি সম্পূর্ণ এবং দ্রুত rich-text editor এ রুপান্তর করতে পারবেন । এই অনুচ্ছেদ আপনাকে এর কার্যকারিতা সম্পর্কে কিছু তথ্য প্রদান করবে।

-

সামঞ্জস্যতা

-

পরিবর্তনীয় বিষয়গুলো সম্পূর্ণভাবে বর্তমান ব্রাউজার গুলোর সাথে সামঞ্জস্যপূর্ণ।

-
    -
  • ফায়ারফক্স  ৩.৫+
    • -
  • অ্যান্ড্রয়েড-এর জন্য ফায়ারফক্স ১৯+
    • -
  • ক্রোম  ৪.০+
    • -
  • ইন্টারনেট এক্সপ্লোরার ৫.৫+
    • -
  • সাফারি ৩.১+
    • -
  • অপেরা ৯+
    • -
  • আইওএস  সাফারি ৫.০+
    • -
  • অ্যান্ড্রয়েড ব্রাউজার ৩.০+
    • -
  • অপেরা মোবাইল ১২.১+
    • -
  • অ্যান্ড্রয়েড-এর জন্য ক্রোম  ২৫+
    • -
-

এখন পর্যন্ত অপেরা মিনি তে সমর্থিত নয়।

-

এটা কিভাবে কাজ করে ?

-

contenteditable এট্রিবিউট  টি আপনার HTML উপাদান এ true সেট করুন। এটা প্রায় সকল HTML উপাদান এ ব্যবহার করা যায়।

-

উদাহরণ

-

একটি সহজ উদাহরণ

-
<!DOCTYPE html>
-<html>
-  <body>
-    <div contenteditable="true">
-      This text can be edited by the user.
-    </div>
-  </body>
-</html>
-

আপনি এখানে লোকালস্টোরেজ ব্যবহার করে জাভাস্ক্রিপ্ট ইন্টিগ্রেশন এর একটি কার্যকর উদাহরন দেখতে পারেন। এই উৎস-এর সাথে

-

আরও দেখুন

-
user_pref("capability.policy.policynames", "allowclipboard");
-user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
-user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
-user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
-

কিভাবে এই বিষয় এর সাথে কাজ করবেন  (old IE style API) এবং এখানে

-
- {{ languages({ "ja": "ja/HTML/Content_Editable", "zh-cn": "zh-cn/HTML/Content_Editable" }) }}
diff --git a/files/bn/web/guide/html/html5/index.html b/files/bn/web/guide/html/html5/index.html deleted file mode 100644 index 0f9c06003d..0000000000 --- a/files/bn/web/guide/html/html5/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: HTML5 -slug: Web/Guide/HTML/HTML5 -tags: - - Guide - - HTML - - HTML5 - - NeedsReview - - Overview - - Web - - Web Development -translation_of: Web/Guide/HTML/HTML5 -original_slug: HTML/HTML5 ---- -

HTML বলতে যা বুঝায় HTML5  তার সর্বাধুনিক বিবর্তন। বিষয়টি দুইটি ভিন্ন ধারনা কে প্রতিনিধিত্ব করে :

- -
-
    -
  • -

    এটি HTML এর নতুন সংস্করণ, এবং এতে আরো নতুন elements, attributes এবং behaviors যুক্ত হয়েছে,

    -
    • -
  • এটি বৃহৎ প্রযুক্তি ভান্ডার যা আরো শক্তিশালী এবং নানাবিধ ওয়েব সাইট এবং এপ্লিকেশন তৈরি করার সক্ষমতা দেয়। এই ভান্ডারকে মাঝে মাঝে HTML5 and friends নামে ডাকা হয় এবং প্রায় ছোট করে করে শুধু HTML5 বলে।
    • -
-
- -

সকল উন্মুক্ত ওয়েব ডেভলপারদের ব্যবহার উপযোগী করা সাজানো হয়েছে। এই পৃষ্ঠায় অসংখ্যা HTML5 প্রযুক্তির তথ্য সমৃদ্ধ পৃষ্ঠার লিংক দেওয়া আছে। কার্যকরিতার উপর ভিত্তি করে এগুলোকে বিভিন্ন দলে বিভক্ত করা হয়েছে।

- -
    -
  • সিমানটিকস: আপনার বিষয়বস্তু সম্পর্কে আপনাকে আরো যথাযথ ভাবে বর্ণনা করার সুযোগ দিবে।
    • -
  • কানেক্টিভিটি: সার্ভারের সাথে যোগাযোগ করতে আপনাকে নতুন নতুন পথ দেখাবে।
    • -
  • অফলাইন এবং স্টোরেজ: ক্লায়েন্ট সাইডে স্থানীয়ভাবে ওয়েবপেইজের তথ্য সংরক্ষণ করার সক্ষমতা দিবে এবং অফলাইনে তা ব্যবহার করতে আরো কার্যকরী করবে।
    • -
  • মাল্টিমিডিয়া: উন্মুক্ত ওয়েবে ভিডিও এবং অডিও কে প্রথম শ্রেনীতে রাখা হয়েছে।
    • -
  • দ্বিমাত্রিক/ত্রিমাত্রিক গ্রাফিক্স এবং ইফেক্ট: উপস্থাপনার জন্য আরো অনেক বিকল্প দিবে।
    • -
  • কার্যকারিতা এবং ইন্ট্রিগ্রেশন: আরো গতির উন্নতি হবে এবং কম্পিউটার হার্ডওয়্যারের আরো ভালো ব্যবহার হবে
    • -
  • যন্ত্রের ব্যবহার: আরো ইনপুট এবং আউটপুট যন্ত্রের ব্যবহারের সুযোগ দিবে।
    • -
  • সাজসজ্জা: চমৎকার চমৎকার থিম তৈরি করার সুযোগ দিবে।
    • -
- -
-
-

সিম্যানটিকস

- -
-
HTML5 এর সেকশন এবং আউটলাইন
-
HTML5 এর নতুন আউটলাই এবং সেকশন উপাদানের এক ঝলক: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} এবং {{HTMLElement("hgroup")}}.
-
HTML5 অডিও এবং ভিডিও'র ব্যবহার
-
{{HTMLElement("audio")}} এবং {{HTMLElement("video")}} উপাদান এম্বেড থাকা এবং নতুন মাল্টিমিডিয়ার ব্যবহার নিশ্চিত করা।
-
HTML5 এর ফর্ম
-
এক নজরে HTML5 এ ওয়েব ফর্মের উন্নয়নগুলো দেখে নেই: কন্সট্রেইন্ট ভ্যালিডেশন এপিআই, কিছু নতুন এট্রিবিউট, {{HTMLElement("input")}} এট্রিবিউটের জন্য নতুন নতুন ভ্যালু {{htmlattrxref("type", "input")}} এবং {{HTMLElement("output")}} নামক নতুন এলিমেনট।
-
নতুন সিমানটিকস এলিমেন্ট
-
সেকশন, মিডিয়া এবং ফর্ম এলিমেন্টের পাশাপারশি আরো নতুন নতুন এলিমেন্ট এসেছে, যেমন
-
{{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, অথবা{{HTMLElement("meter")}}, যা HTML5 এলিমেন্টের পরিমান বৃদ্ধি করে দিচ্ছে।
-
{{HTMLElement("iframe")}} এর আরো উন্নয়ন
-
‌{{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, and {{htmlattrxref("srcdoc", "iframe")}} এট্রিবিউটের ব্যবহার করে, ডেভলপারগন নিরাপত্তার মান কে আরো যথাযথ করতে পারছেন এবং  {{HTMLElement("iframe")}} এর চাহিদা মতন রেন্ডারিং করতে পারছেন।
-
MathML
-
গাণিতিক ফর্মুলার সরাসরি ব্যবহার নিশ্চিত করেছে।
-
HTML5 এর পরিচিতি
-
আপনি HTML5 এর মাধ্যমে কোন ওয়েব ডিজাইন করলে অথবা কোন ওয়েব এপ্লিকেশন তৈরি করতে চাইলে কিভাবে শুরু করবেন তা এই নিবন্ধে বলা আছে।
-
HTML5-সমর্থিত পার্সার
-
এটি একটি পার্সার, যা HTML ডকুমেন্টের বাইটকে ডকুমেন্ট অবজেক্ট মডেলে (DOM) রূপান্তর করে। এটাকে এখন বর্ধিত করা হয়েছে এবং  এখন আরো ভালভাবে সকল ক্ষেত্রে কাজ করার উপযুক্ত করা হয়েছে। এমন কি ভুল মার্কআপ পাওয়ার পরও যাতে ঠিকঠাক কাজ করতে পারে, তেমন ক্ষমতা দেয়া হয়েছে । এতে করে HTML5 সমর্থিত ব্রাউজার গুলোর মদ্ধে আন্তঃ পরিচালন ক্ষমতা ও অনুমানের দক্ষতা বৃদ্ধি পেয়েছে।
-
- -

কানেক্টিভিটি

- -
-
ওয়েব সকেট
-
ওয়েব পেজ এবং সার্ভারের মধ্যে, HTML নয় এমন তথ্য আদান-প্রদানের জন্য, একটি স্থায়ী সংযোগ তৈরি করার সুবিধা দেয়।
-
সার্ভার-প্রেরিত ইভেন্ট‌
-
আগে সার্ভার গুলো শুধু গ্রাহকের অনুরোধের ভিত্তিতে তথ্য পাঠাতে পারত। কিন্তু এই নতুন সংযোজনটি বারবার অনুরোধের ঝামেলা ছাড়াই সরাসরি গ্রাহকের কাছে ইভেন্ট প্রেরণের অনুমতি দেয়।
-
WebRTC
-
RTC মানে Real Time Communication বা তাৎক্ষণিক যোগাযোগ। এটি ব্রাউজারের মাদ্ধমে অন্যদের সাথে চ্যাট বা ভিডিও কনফারেন্সিং এর সুবিধা দেয়। আর এই প্রযুক্তি ব্যবহারের ফলে কোন প্রকার আলাদা সফটওয়্যার বা প্লাগিনেরও প্রয়োজন হয়না।
-
- -

অফলাইন এবং স্টোরেজ

- -
-
অফলাইন রিসোর্স: এপ্লিকেশন ক্যাশ
-
ফায়ারফক্স সম্পূর্ণ ভাবে HTML5 অফলাইন রিসোর্স সমর্থন করে। বাকি সবারও একই ধরনের অফলাইন রিসোর্স সমর্থন আছে।
-
অনলাইন এবং অফলাইন ইভেন্ট
-
ফায়ারফক্স ৩ WHATWG অনলাইন এবং অফলাইন ইভেন্ট সমর্থন করে, যা একটি এপ্লিকেশন এবং এক্সটেনশন কে সচল ইন্টারনেট সংযোগ আছে কিনা তা পরীক্ষা করার সুযোগ দেয়, সাথে সাথে সংযোগ কি উঠা নামা করছে কিনা তাও পরীক্ষা করে।
-
WHATWG ক্লায়েন্ট সাইড সেসন এবং স্থায়ী স্টোরেজ (এককথায় DOM স্টোরেজ)
-
ক্লায়েন্ট সাইড সেসন এবং স্থায়ী স্টোরেজ ওয়েব এপ্লিকেশন কে ক্লায়েন্ট সাইডে তথ্য সংরক্ষণে সুবিধা দেয়।
-
IndexedDB
-
ইহা একটি ওয়েব মান যা একটি উল্লেখযোগ্য পরিমান সাজানো তথ্য ব্রাজারে সংরক্ষণকে বুঝায় এবং ইন্ডেক্স ব্যবহার করে উচ্চ ক্ষমতায় তথ্য অনুসন্ধানের সুবিধা দেয়।
-
ওয়েব এপ্লিকেশন থেকে ফাইলের ব্যবহার
-
নতুন HTML5 ফাইল এপিআই গিকোতে যুক্ত হয়েছে, যা ব্যবহারকারী দ্বারা নির্বাচিত স্থানীয় ফাইল ব্যবহার করাকে সম্ভব করেছে। এরমধ্যে রয়েছে {{HTMLElement("input")}} ও multiple অ্যাট্রিবিউট ব্যবহার করে একাধিক ধরণের file নির্বাচন সমর্থন। এরমধ্যে FileReaderও আছে।
-
- -

মাল্টিমিডিয়া

- -
-
HTML5 অডিও ও ভিডিও ব্যবহার করা
-
{{HTMLElement("audio")}} এবং {{HTMLElement("video")}} এর সাহায্যে মাল্টিমিডিয়া কন্টেন্ট ওয়েবপেজে যুক্ত করার এবং ম্যানিপুলেট করার সুবিধা দেয়।
-
WebRTC
-
RTC অর্থ রিয়েল টাইম কমিউনিকেশন, যা ব্রাউজারেই অতিরিক্ত প্লাগ-ইনের সাহায্য ছাড়া অন্যান্য মানুষের সাথে যোগাযোগ করা এবং সরাসরি ভিডিও-কনফারেন্সিং নিয়ন্ত্রণ করা সম্ভব করে।
-
ক্যামেরা API ব্যবহার করা
-
কম্পিউটারের ক্যামেরা থেকে ছবি ব্যবহার, পরিবর্তন এবং সংরক্ষণের সুবিধা প্রদান করে।
-
ট্র্যাক এবং WebVTT
-
{{HTMLElement("track")}} সাবটাইটেল এবং চ্যাপ্টারের সুবিধা প্রদান করে। WebVTT একটি টেক্সট ট্র্যাক ফরম্যাট।
-
- -

ত্রিমাত্রিক গ্রাফিক্স এবং ইফেক্ট

- -
-
ক্যানভাস টিউটোরিয়াল
-
নতুন HTML {{HTMLElement("canvas")}} এলিমেন্ট এবং গ্রাফিক্স ও অন্যান্য অবজেক্ট আঁকা সম্পর্কে জানুন
-
<canvas> এলিমেন্টের জন্য HTML টেক্সট API
-
{{HTMLElement("canvas")}} এখন HTML5 টেক্সট API সমর্থন করে।
-
WebGL
-
WebGL (ওয়েব জি, এল) OpenGL ES 2.0 এর কাছাকাছি একটি API এর সাহায্যে ওয়েবে {{HTMLElement("canvas")}} এলিমেন্টে ত্রিমাত্রিক গ্রাফিক্স নিয়ে আসে। 
-
SVG
-
সরাসরি HTML এ যুক্ত করার উপযোগী ভেক্টর ইমেজের জন্য XML-ভিত্তিক ফাইল ফরম্যাট।
-
 
-
-
- -
-

কার্যকারিতা এবং ইন্ট্রিগ্রেশন

- -
-
Web Workers (ওয়েব ওয়ার্কার)
-
জাভাস্ক্রিপ্টকে ব্যাকগ্রাউন্ড থ্রেডের প্রতিনিধিত্ব ও মূল্যায়ন করার সুবিধা প্রদান করে। এরফলে ইন্টার‍্যাক্টিভ ইভেন্টগুলো ধীর গতির হয়না।
-
XMLHttpRequest লেভেল 2
-
সময় এবং ব্যবহারকারীর কার্যক্রমের উপর নির্ভর করে বিক্ষিপ্তভাবে একটি পাতার কিছু অংশ নিয়ে আসে। আর এই প্রক্রিয়ায় আনার ফলে কন্টেন্ট গুলো ডায়নামিক হওয়ার সুযোগ পায়। এটাই Ajax এর পেছনের প্রযুক্তি।
-
JIT-কম্পাইল করা জাভাস্ক্রিপ্ট ইঞ্জিন
-
নতুন প্রজন্মের জাভাস্ক্রিপ্ট ইঞ্জিন পূর্বের চেয়ে অনেক শক্তিশালী যার ফলে অধিক পারফরম্যান্স নিশ্চিত করে।
-
হিস্টোরি API
-
এটি ব্রাউজারের হিস্টোরি ম্যানিপুলেট করার সুযোগ দেয়, যেসকল ওয়েবপেজ ইন্টারএ্যাক্টিভভাবে তথ্য লোড করে, তাদের জন্য এটি বিশেষভাবে উপযোগী।
-
contentEditable attribute: আপনার ওয়েবসাইটকে উইকিতে রুপান্তর করুন!
-
HTML5 contentEditable এ্যাট্রিবিউটটি স্ট্যান্ডার্ডের অন্তর্ভুক করেছে। এই নতুন ফিচারটি সম্পর্কে জানুন।
-
ড্র্যাগ-এন্ড-ড্রপ
-
The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.
-
HTML এ ফোকাস ব্যবস্থাপনা
-
নতুন HTML5 activeElement এবং hasFocus এট্রিবিউটগুলো এখন সমর্থিত!
-
ওয়েব-ভিত্তিক প্রোটোকল হ্যান্ডেলার
-
আপনে এখন প্রটোকল হ্যান্ডেলার হিসেবে ওয়েব এ্যাপ্লিকেশন রেজিস্টার করতে পারবেন navigator.registerProtocolHandler() মেথডের সাহায্যে।
-
requestAnimationFrame
-
সর্বোত্তম পারফরম্যান্সের জন্য এ্যানিমেশন নিয়ন্ত্রণের সুবিধা প্রদান করে।
-
ফুলস্ক্রিন API
-
ব্রাউজারের ইন্টারফেস প্রদর্শন ব্যতিত আপনার ওয়েব পেজ বা এ্যাপ্লিকেশনকেই সম্পূর্ণ স্ক্রিনে প্রদর্শন নিয়ন্ত্রণ করে।
-
পয়েন্টার লক API
-
সবসময় কোন কন্টেন্ট এর পয়েন্টার লক করে রাখে, তাই গেমস অথবা একই ধরনের কোন এপ্লিকেশনের ক্ষেত্রে পয়েন্টার উইন্ডো সীমায় পৌছে গেলেও তা ফোকাস হারায় না।
-
অনলাইন এবং অফলাইন ইভেন্ট
-
অফলাইনে চলবে এমন একটি ভালো মানের এপ্লিকেশন তৈরী করতে হলে, আপনাকে জানতে হবে আপনার এপ্লিকেশন কখন অফলাইনে আছে। আপনার এপ্লিকেশন কখন অনলাইনে আসতে পারে তাও আপনাকে জাতে হবে।
-
- -

যন্ত্রের ব্যবহার

- -
-
ক্যামেরা API এর ব্যবহার
-
কম্পিউটারের ক্যামেরা থেকে ছবি ব্যবহার এবং সংরক্ষণ করে।
-
টাচ ইভেন্ট
-
টাচ স্ক্রিন চাপলে ব্যবহারকারী কর্তৃক তৈরী করা ইভেন্ট অনুযায়ি কাজ করবে।
-
জিওলোকেশনের ব্যবহার
-
জিওলোকেশন ব্যবহার করে ব্রাউজার কে ব্যবহারকারীর বর্তমান অবস্থান নির্দিষ্ট করতে দেয়।
-
ডিভাইসের স্থিতি সনাক্ত করা
-
এটা ডিভাইসের স্থিতি অর্থাৎ ডিভাইসটি উল্লম্ব ভাবে আছে, নাকি আনুভূমিক ভাবে আছে (আরও সহজ করে বলতে গেলে ডিভাইসটি সোজা করে ধরা হয়েছে না কাত করে ধরা হয়েছে) তা সনাক্ত করে ব্রাউজারকে মাপ পরিবর্তনে সহায়তা করে। এটা ইনপুট ডিভাইস হিসেবেও ব্যবহার করা যায়। যেমনঃ অবস্থান বা নড়াচড়াকে গেমের নিয়ন্ত্রণ হিসেবে ব্যবহার করা বা পেজের লেআউটে পরিবর্তন ইত্যাদি।
-
পয়েন্টার লক API
-
কন্টেন্টের সাথে পয়েন্টারকে লক করে রাখতে দেয়, যাতে করে পয়েন্টার পর্দার শেষ প্রান্তে পৌছালেও গেম এবং সদৃশ অ্যাপ গুলো আকর্ষণ না হারায়।
-
- -

সাজসজ্জা

- -

সিএসএসকে আরও জটিল নিয়মে এলিমেন্ট গুলোকে স্টাইল করার জন্য বর্ধিত করা হয়েছে। যদিও এটা এখন মনোলিথিক বৈশিষ্ট্যের মধ্যে নেই এবং আলাদা মডিউল গুলোও ৩য় স্তরে নেই, তারপরও এটাকে প্রায়ই সিএসএস৩ বলা হয়। এর মডিউল গুলোর মধ্যে কিছু ১ম স্তরে আছে, আবার কিছু ৪র্থ স্তরে আছে।

- -
-
নতুন ব্যাকগ্রাউন্ড স্টাইলিং বৈশিষ্ট্য সমূহ
-
এখন {{cssxref("box-shadow")}} ব্যবহার করে একটি বক্সের নিচে ছায়া এবং একাধিক ব্যাকগ্রাউন্ড প্রয়োগ করা যাবে।
-
আরও রুচিসম্মত বর্ডার সমূহ
-
এখন {{cssxref("border-image")}} ব্যবহার করে শুধু বর্ডার স্টাইলই করা যাবে না, এর সাথে সংশ্লিষ্ট অন্যান্য লং-হ্যান্ড প্রপার্টিও ব্যবহার করা যাবে। কিন্তু গোলাকার বর্ডার শুধু {{cssxref("border-radius")}} ব্যবহার করেই প্রয়োগ করা যাবে।
-
স্টাইল অ্যানিমেট করা
-
সিএসএস ট্রানজিশন ব্যবহার করে দুইটি ভিন্ন অবস্থার মধ্যে অ্যানিমেট করা যাবে অথবা সিএসএস অ্যানিমেশন ব্যবহার করে কোন ইভেন্ট ট্রিগার না করেই বিভিন্ন অংশ অ্যানিমেট করা যাবে। আর এসব অ্যানিমেশনের সময়, ধরন, গতি-প্রকৃতি সবই আপনি নিয়ন্ত্রণ করতে পারবেন।
-
টাইপোগ্রাফি উন্নয়ন
-
ভালো টাইপোগ্রাফি ব্যবহার করার জন্য ডিজাইনারদের এখন আরও বেশি নিয়ন্ত্রণ দেয়া হয়েছে। তারা এখন {{cssxref("text-overflow")}} এবং হাইফেনেশন নিয়ন্ত্রণ করতে পারেন। ছায়া যুক্ত করতে পারেন অথবা অনেক সূক্ষ্মভাবে অলঙ্করণ করতে পারেন। নিজের ইচ্ছামত ফন্ট ডাউনলোড করে প্রয়োগ করা যাবে। এজন্য ধন্যবাদ দিতে হয় {{cssxref("@font-face")}} নিয়মটিকে।
-
নতুন প্রেজেন্টেশন লেআউট সমূহ
-
ডিজাইনের নমনীয়তা বৃদ্ধি করার জন্য নতুন দুইটি লেআউট যুক্ত করা হয়েছেঃ একটি হচ্ছে CSS multi-column layout, এবং অপরটি CSS flexible box layout।
-
-
-
- -

 

diff --git a/files/bn/web/guide/html/html5/introduction_to_html5/index.html b/files/bn/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index 18823a0c6c..0000000000 --- a/files/bn/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: HTML5 এ হাতেখড়ি -slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -tags: - - Guide - - HTML - - HTML5 - - NeedsContent - - Web - - গাইড -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -original_slug: HTML/HTML5/Introduction_to_HTML5 ---- -

HTML এর পঞ্চম ও সর্বশেষ সংস্করণ HTML5। এর নতুন কিছু ফিচার রয়েছে যেমন শুধু রিচ মিডিয়াই সমর্থন করা, ওয়েব এপ্লিকেশন তৈরি করা এখন আরও সহজ। এসব ওয়েব এপ্লিকেশন ব্যবহারকীর সাথে ইন্টার-এক্ট করতে পারে, ব্যবহারকারীর কম্পিউটারের ডেটা নিয়ে কাজ করতে পারে, সার্ভারের সাথে যোগাযোগ করতে পারে আগের থেকে অনেক কার্যকরভাবে।

-

HTML5 এখনও ডেভেলপ হচ্ছে, সে কারণে এখনো এর নির্দেশিকায় টুকটাক পরিবর্তন চলছে। এখনো সব ব্রাউজারে সব ফিচার চলে না। যাইহোক, গেকো এবং তার এক্সটেনশন, ফায়ারফক্স খুব ভালভাবেই HTML5 সমর্থন করে, এবং এর আরও ফিচার সমর্থনের কাজ চলছে। গেকো ১.৮.১ সংস্করণ থেকে HTML5 এর ফিচার সমর্থন করা শুরু করেছে। গেকো বর্তমানে HTML5 এর কি কি ফিচার সমর্থন করে তা HTML5 এর মুল পেজে জানতে পারেন। অন্যান্য ব্রাউজারে HTML5 সাপোর্ট করে কি না, তা বিস্তারিত জানতে CanIUse ওয়েবসাইটে যেতে পারেন।

-

যেভাবে বলবেন আপনার ডকুমেন্টে HTML5 মার্ক-আপ আছে

-

HTML5 এর জন্য ডকটাইপ খুবই সাধারন। আপনার HTML কন্টেন্ট যে HTML5 ব্যাবহার করছে তা বলার জন্য ডকুমেন্টের শুরুতে নিচের কোড লিখুনঃ

-
<!DOCTYPE html>
-
-

যেসব ব্রাউজার এখনো HTML5 সমর্থন করে না, তারাও এই কোড দেখলে স্ট্যান্ডার্ড মোডে চলে যাবে, যার অর্থ হল তারা HTML এর আগের সমর্থিত কোডগুলো ঠিকমতই দেখাবে এবং শুধুমাত্র যেসব HTML5 এলিমেন্ট তারা সমর্থন করে না সেগুলোই দেখাবে না।

-

নতুন এই ডকটাইপ আগের ডক্টাইপগুলো থেকে অনেক ছোট, যে কারণে এটা সহজেই মনে রাখা যায়। তাছাড়া ছোট হওয়ার জন্য কম বাইট ডাউনলোড হয় ব্যবহারকারীর মেশিনে।

-

<meta charset> লিখে ক্যারেক্টার-সেট ডিক্লেয়ার করুন

-

সাধারণতঃ পেইজের শুরুতেই এটি কোন ক্যারেক্টার-সেট ব্যবহার করছে তা বলে দিতে হয়। HTML এর আগের সংস্করণে জটিল {{HTMLElement("meta")}} ট্যাগ দিয়ে এটি করা লাগত, কিন্তু এখন যা খুবই সহজঃ

-
<meta charset="UTF-8">
-

{{HTMLElement("head") }} এর পরেই উপরের কোড লিখুন, যেহেতু কিছু ব্রাউজার HTML ডকুমেন্ট পার্স করা নতুন করে শুরু করে, যদি আপনার ডিক্লেয়ার করা ক্যারেক্টার-সেট ব্রাউজার যেটা ধরে নিয়েছিল সেটার থেকে আলাদা হয়। এছাড়া, আপনি যদি UTF-8 ব্যবহার না করেন তাহলে আপনাকে UTF-8 ব্যবহার করতে নির্দেশনা দেওয়া হচ্ছে, কারণ এটি অনেক স্ক্রিপ্টেই ক্যারেক্টার ব্যবহার করা অনেক সহজ করে দেয়।

-

খেয়াল করুনঃ HTML5 নির্দেশনা দিয়েছে যে বৈধ ক্যারেক্টার-সেট অবশ্যই ASCII সমর্থিত হতে হবে আর কমপক্ষে ৮ বিট ব্যবহার করে এমন হতে হবে। নিরাপত্তা বাড়াতে আর কিছু এটাক (আক্রমণ!) ঠেকানোর জন্যই এই ব্যবস্থা।

-

নতুন HTML5 পার্সার

-

HTML5 পার্সিং নিয়মকানুন, (যা কিনা HTML কোডের অর্থ বের করে) HTML5 এ নিখুঁতভাবে বলা হয়েছে। HTML5 আসার আগে শুধুমাত্র বৈধ মার্ক-আপ কী সেটাই বলা থাকত, যেকারণে যখনই মার্ক-আপে কোন ভুল পাওয়া যেত (প্রায় সব ওয়েবসাইটেই কিছু না কিছু ভুল থাকে) একেক ব্রাউজার একেকভাবে আচরণ করত। কিন্তু এখন HTML5 এ যেহেতু মার্ক-আপে ভুল থাকলে কি করতে হবে সেটাও বলা হয়েছে, সব HTML5-সমর্থিত ব্রাউজার ভুল কোড পেলেও একইরকম আচরণ করবে।

-

এর ফলে ওয়েব ডেভেলপারদের এখন সুখের সময়। যদিও সব আধুনিক ব্রাউজার-ই HTML5-সমর্থিত, কিছু পুরনো ব্রাউজার পাওয়া যায় যারা কিনা HTML5 পার্সিং নিয়ম মেনে চলে না। এইসব HTML5-অসমর্থিত ব্রাউজার এখনো মানুষজন ব্যবহার করে। ডেভেলপারদের কে ভুল না করে, মার্ক-আপ লিখতে উৎসাহিত করা হয়, কারণ ভুলবিহীন কোড সহজেই বুঝা যায় আর পরেও কোড করতে সুবিধা হয়। আর বড় কথা হল, কোডে ভুল থাকলে পুরনো একেক ব্রাউজারে একেক আচরণ দেখা যাবে - কারণ পুরনো ব্রাউজারগুলো HTML5 পার্সিং নিয়ম মেনে চলে না।

-

টেনশন করার কোন দরকার-ই নেই, আপনার ওয়েবসাইটের কোন কিছু পরিবর্তন করা লাগবে না - ওয়েব ব্রাউজারের ডেভেলপার-রাই এসব নিয়ে মাথা ঘামাচ্ছে!

diff --git a/files/bn/web/guide/index.html b/files/bn/web/guide/index.html deleted file mode 100644 index e2979917bc..0000000000 --- a/files/bn/web/guide/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: ওয়েব ডেভেলপার গাইড -slug: Web/Guide -translation_of: Web/Guide ---- -

এই আর্টিকেলগুলো আপনাকে নির্দিষ্ট কিছু প্রযুক্তি এবং এপিআই ব্যবহার সংক্রান্ত তথ্য দেবে।

-
-

সাবধান: আমাদের কন্টেন্টগুলো ঠিকমত সাজানোর আগ পর্যন্ত পেজটির অবস্থা বেশ অগোছালো থাকতে পারে। দুঃখিত!

-
-

{{LandingPageListSubpages}}

-
-
- জাভাস্ক্রিপ্ট
-
- ওয়েবে অ্যাপ্লিকেশন লেখার জন্য শক্তিশালী প্রোগ্রামিং ল্যাঙ্গুয়েজটি হল জাভাস্ক্রিপ্ট।
-
-

আরও দেখুন

- diff --git a/files/bn/web/guide/performance/index.html b/files/bn/web/guide/performance/index.html deleted file mode 100644 index e8280ffae1..0000000000 --- a/files/bn/web/guide/performance/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: অপটিমাইজেশন অ্যান্ড পারফরমেন্স -slug: Web/Guide/Performance -tags: - - NeedsReview -translation_of: Web/Guide/Performance ---- -

আধুনিক ওয়েব অ্যাপ্লিকেশন এবং সাইট নির্মাণ করার সময়, আপনার কনটেন্ট সঠিক ভাবে কাজ করা অত্যন্ত জরুরি। যেন, তা দ্রুত এবং দক্ষতার সঙ্গে কাজ করতে পারে। এটি শক্তিশালী ডেস্কটপ সিস্টেম ব্যবহারকারীদের পাশাপাশি কম ক্ষমতা সম্পন্ন ডিভাইসের জন্যও কার্যকরভাবে কাজ করে থাকে।

-

{{LandingPageListSubpages}}

diff --git a/files/bn/web/html/attributes/crossorigin/index.html b/files/bn/web/html/attributes/crossorigin/index.html deleted file mode 100644 index 3290df0f0a..0000000000 --- a/files/bn/web/html/attributes/crossorigin/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: সি ও আর এস বৈশিষ্ট্যাবলী সেটিংস -slug: Web/HTML/Attributes/crossorigin -tags: - - এইচ টি এম এল -translation_of: Web/HTML/Attributes/crossorigin -original_slug: Web/HTML/CORS_settings_attributes ---- -

 

- -
-
HTML5 এর মধ্যে, যেমন {{HTMLElement ("গান")}} অথবা হিসাবে সি ও আর এস জন্য সমর্থন প্রদান যা কিছু HTML উপাদান, {{HTMLElement ("ভিডিও")}}, আপনি কনফিগার করতে দেয়, যা একটি crossorigin অ্যাট্রিবিউট (crossOrigin সম্পত্তি), আছে সি ও আর এস উপাদান এর সংগৃহীত তথ্য জন্য অনুরোধ. এই বৈশিষ্ট্যাবলী গণিত, এবং নিম্নলিখিত সম্ভব মান আছে:
-
- - - - - - - - - - - - - - - - -
KeywordDescription
anonymousCORS requests for this element will not have the credentials flag set.
use-credentialsCORS requests for this element will have the credentials flag set; this means the request will provide credentials.
- -

 

- -

ডিফল্ট (অ্যাট্রিবিউট উল্লেখ না করা হলে, যে হয়) দ্বারা, কর্ড সব সময়ে ব্যবহার করা হয় না। "বেনামী" শব্দ  সি ও আর এস স্পেসিফিকেশন পরিভাষা বিভাগে বর্ণিত হিসাবে কুকিজ, ক্লায়েন্ট প্রান্তের SSL সার্টিফিকেট বা HTTP প্রমাণীকরণের মাধ্যমে ব্যবহারকারী শংসাপত্র কোন বেচা কেনা নেই এবং হবে।
- একটি অবৈধ শব্দ এবং একটি খালি স্ট্রিং বেনামী শব্দ হিসেবে পরিচালিত হবে।

- -

 বিশেষ উল্লেখ

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}{{Spec2('HTML WHATWG')}} 
- -

 ব্রাউজার উপযুক্ততা

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support13{{ CompatGeckoDesktop("8.0") }}11{{ CompatNo() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoDesktop("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoMobile("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

 আরো দেখুন

- -
    -
  • HTTP প্রবেশাধিকার নিয়ন্ত্রণ
    • -
diff --git a/files/bn/web/html/block-level_elements/index.html b/files/bn/web/html/block-level_elements/index.html deleted file mode 100644 index e67042ed0e..0000000000 --- a/files/bn/web/html/block-level_elements/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Block-level elements -slug: Web/HTML/Block-level_elements -translation_of: Web/HTML/Block-level_elements ---- -

এইচটিএমএল (হাইপার টেক্সট মারকআপ ল্যাঙ্গুয়েজ) এর এলিমেন্টগুলো সাধানত "ব্লক-লেভেল" এলিমেন্ট অথবা "ইনলাইন" এলিমেন্ত । একটি ব্লক-লেভেল এলিমেন্ট তার প্যারেন্ট এলিমেন্তটর{কন্তাইনার} সমস্ত জায়গা দখল করে , সেজন্য একটি "ব্লক" বানানো হয় ।এগুলো বুজানোর জন্য এই প্রবন্ধটি সাহায্য করবে।

- -

ব্রাউজারস এলিমেন্টর আগে এবং পরে এক নিওলাইনের সাথে ব্লক-লেভেল এলেমেন্টকেদেখায়।. নিচের উদাহরন ব্লক-লেভেল এলেমেন্টর প্রভাবের ব্যবহারিক প্রমান দেয়। 

- -

ব্লক-লেভেল এলিমেন্টস 

- -

এইচটিএমএল

- -
<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>
- -

সিএসএস

- -
p { background-color: #8ABB55; }
-
- -

{{ EmbedLiveSample('Block-level_Example') }}

- -

ব্যবহারবিধি

- -
    -
  • ব্লক-লেভেল এলিমেন্টস কখনো {{ HTMLElement("body") }}এলিমেন্টের ভিতরে আসে।
    • -
- -

ব্লক-লেভেল বনাম. ইনলাইন

- -

ব্লক-লেভেল এলিমেন্টস এবং ইনলাইনের মধ্যে দুইটি বিশেষ পার্থক্য আসে।:

- -
-
ফরম্যাটিং
-
বাই ডিফল্ট,ব্লক-লেভেল এলিমেন্টসনতুন লাইনেই শুরু করে, কিন্ত ইনলাইন এলিমেন্টস একটি লাইনের যেকোনো জায়গা থেকে শুরু করতে পারে।
-
কনটেন্ট মডেল
-
সাধারণত, ব্লক-লেভেল এলিমেন্টস ইনলাইন এলিমেন্টস এবং বাকি ব্লক-লেভেল এলিমেন্টসকে ধরে রাখে। স্বভাবত গঠনগত স্বাতন্ত্র হল ঐ ধারনা যা ব্লক-লেভেল এলিমেন্টস ইনলাইন এলিমেন্টস থেকেও "বড়" কাঠামো তৈরি করে। 
-
- -

ব্লক-লেভেলের স্বাতন্ত্র বনাম.ইনলাইন এলিমেন্টস এইচটিএমএলের সবিস্তার বিবরণীকে ৮.০১ পর্যন্ত ব্যবহার করা হয়। এইচটিএমএল৫ এ,এই বিনারি স্বাতন্ত্রকে আরো জটিল কন্টটেন্ট ক্যাটেগরিস সেটে প্রতিস্থাপন করা হয়।এইচটিএমএল৫ এ "ব্লক-লেভেল" ক্যাটেগরিটি মোটামোটিভাবে  ফ্লও কনটেন্ট  ক্যাটাগরিতে সারা দেয়, যখন "ইনলাইন" ফ্রাসিং কনটেন্ট  এ সারা দেয়, কিন্তু কোন বাড়তি ক্যাটাগরি নেই।

- -

এলিমেন্টস

- -

নিচে এইচটিএমএলব্লক-লেভেল এলিমেন্টসের সম্পূর্ণ তালিকা দেওয়া হল (যদিও "ব্লক-লেভেল" ব্যাখ্যা করা হইনই ঐএলিমেন্টের যা এইচটিএমএল৫ এ নতুন)।

- -
-
-
{{ HTMLElement("address") }}
-
Contact information.
-
{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}
-
Article content.
-
{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}
-
Aside content.
-
{{ HTMLElement("blockquote") }}
-
Long ("block") quotation.
-
{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}
-
Drawing canvas.
-
{{ HTMLElement("dd") }}
-
Definition description.
-
{{ HTMLElement("div") }}
-
Document division.
-
{{ HTMLElement("dl") }}
-
Definition list.
-
{{ HTMLElement("fieldset") }}
-
Field set label.
-
- -
-
{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}
-
Figure caption.
-
{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}
-
Groups media content with a caption (see {{ HTMLElement("figcaption") }}).
-
{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}
-
Section or page footer.
-
{{ HTMLElement("form") }}
-
Input form.
-
{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}
-
Heading levels 1-6.
-
{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}
-
Section or page header.
-
{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}
-
Groups header information.
-
{{ HTMLElement("hr") }}
-
Horizontal rule (dividing line).
-
{{ HTMLElement("li") }}
-
List item.
-
{{ HTMLElement("main") }}
-
Contains the central content unique to this document.
-
{{ HTMLElement("nav") }}
-
Contains navigation links.
-
- -
-
{{ HTMLElement("noscript") }}
-
Content to use if scripting is not supported or turned off.
-
{{ HTMLElement("ol") }}
-
Ordered list.
-
{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}
-
Form output.
-
{{ HTMLElement("p") }}
-
Paragraph.
-
{{ HTMLElement("pre") }}
-
Preformatted text.
-
{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}
-
Section of a web page.
-
{{ HTMLElement("table") }}
-
Table.
-
{{ HTMLElement("tfoot") }}
-
Table footer.
-
{{ HTMLElement("ul") }}
-
Unordered list.
-
{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}
-
Video player.
-
-
- -

আরো দেখুন

- - diff --git a/files/bn/web/html/element/a/index.html b/files/bn/web/html/element/a/index.html deleted file mode 100644 index 1f37ace290..0000000000 --- a/files/bn/web/html/element/a/index.html +++ /dev/null @@ -1,495 +0,0 @@ ---- -title: -slug: Web/HTML/Element/a -translation_of: Web/HTML/Element/a ---- -

The HTML Anchor Element (<a>) defines a hyperlink to a location on the same page or any other page on the Web. It can also be used (in an obsolete way) to create an anchor point—a destination for hyperlinks within the content of a page, so that links aren't limited to connecting simply to the top of a page.

- -
<a href="https://developer.mozilla.org">MDN</a>
- - - - - - - - - - - - - - - - - - - - - - - - -
Content categoriesFlow content, phrasing content, interactive content, palpable content.
Permitted contentTransparent, containing either flow content or phrasing content.
Tag omission{{no_tag_omission}}
Permitted parent elementsAny element that accepts phrasing content, or any element that accepts flow content.
DOM interface{{domxref("HTMLAnchorElement")}}
- -

আট্ট্রিবিউট 

- -

This element includes the global attributes.

- -
-
{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}
-
This attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource so that when the user clicks on the link they will be prompted to save it as a local file. If the attribute has a value, the value will be used as the pre-filled file name in the Save prompt that opens when the user clicks on the link (the user can change the name before actually saving the file of course). There are no restrictions on allowed values (though / and \ will be converted to underscores, preventing specific path hints), but you should consider that most file systems have limitations with regard to what punctuation is supported in file names, and browsers are likely to adjust file names accordingly. -
-

Note:

- -
    -
  • Can be used with blob: URLs and data: URLs, to make it easy for users to download content that is generated programmatically using JavaScript (e.g. a picture created using an online drawing Web app).
    • -
  • If the HTTP header Content-Disposition: is present and gives a different filename than this attribute, the HTTP header has priority over this attribute.
    • -
  • If this attribute is present and Content-Disposition: is set to inline, Firefox gives priority to Content-Disposition, like for the filename case, while Chrome gives priority to the download attribute.
    • -
  • This attribute is only honored for links to resources with the same-origin.
    • -
-
-
-
{{htmlattrdef("href")}}
-
This was the single required attribute for anchors defining a hypertext source link, but is no longer required in HTML5. Omitting this attribute creates a placeholder link. The href attribute indicates the link target, either a URL or a URL fragment. A URL fragment is a name preceded by a hash mark (#), which specifies an internal target location (an ID) within the current document. URLs are not restricted to Web (HTTP)-based documents. URLs might use any protocol supported by the browser. For example, file, ftp, and mailto work in most user agents. -
-

Note: You can use the special fragment "top" to create a link back to the top of the page; for example <a href="#top">Return to top</a>. This behavior is specified by HTML5.

-
-
-
{{htmlattrdef("hreflang")}}
-
This attribute indicates the language of the linked resource. It is purely advisory. Allowed values are determined by BCP47 for HTML5 and by RFC1766 for HTML4. Use this attribute only if the {{htmlattrxref("href", "a")}} attribute is present.
-
{{htmlattrdef("media")}} {{HTMLVersionInline(5)}}
-
This attribute specifies the media which the linked resource applies to. Its value must be a media query. This attribute is mainly useful when linking to external stylesheets by allowing the user agent to pick the best adapted one for the device it runs on. -
-

Usage note:

- -
    -
  • In HTML 4, only simple white-space-separated list of media description literals, i.e. media types and groups, where defined and allowed as values for this attribute, like print, screen, aural, braille, ... HTML 5 extended this to any kind of media queries, which are a superset of the allowed values of HTML 4.
    • -
  • Browsers not supporting the CSS3 Media Queries won't necessarily recognize the adequate link; do not forget to set fallback links, the restricted set of media queries defined in HTML 4.
    • -
-
-
-
{{htmlattrdef("ping")}} {{HTMLVersionInline(5)}}
-
The 'ping' attribute, if present, sends the URLs of the resources a notification/ping if the user follows the hyperlink.
-
{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
-
A string indicating which referrer to use when fetching the resource: -
    -
  • "no-referrer" meaning that the Referer: header will not be sent.
    • -
  • "no-referrer-when-downgrade" meaning that no Referer: header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.
    • -
  • "origin" meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.
    • -
  • "origin-when-cross-origin" meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path. 
    • -
  • "unsafe-url" meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.
    • -
-
-
{{htmlattrdef("rel")}}
-
For anchors containing the href attribute, this attribute specifies the relationship of the target object to the link object. The value is a space-separated list of link types values. The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the href attribute is present.
-
{{htmlattrdef("target")}}
-
This attribute specifies where to display the linked resource. In HTML4, this is the name of, or a keyword for, a frame. In HTML5, it is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). The following keywords have special meanings: -
    -
  • _self: Load the response into the same HTML4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.
    • -
  • _blank: Load the response into a new unnamed HTML4 window or HTML5 browsing context.
    • -
  • _parent: Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
    • -
  • _top: In HTML4: Load the response into the full, original window, canceling all other frames. In HTML5: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
    • -
- Use this attribute only if the href attribute is present.
-
{{htmlattrdef("type")}}
-
This attribute specifies the media type in the form of a {{Glossary("MIME type")}} for the link target. Generally, this is provided strictly as advisory information; however, in the future a browser might add a small icon for multimedia types. For example, a browser might add a small speaker icon when type is set to audio/wav. For a complete list of recognized MIME types, see http://www.w3.org/TR/html4/references.html#ref-MIMETYPES. Use this attribute only if the href attribute is present.
-
- -

Obsolete

- -
-
{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}
-
This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in RFC 2045. The default value is ISO-8859-1. -
-

Usage note: This attribute is obsolete in HTML5 and should not be used by authors. To achieve its effect, use the HTTP Content-Type header on the linked resource.

-
-
-
{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
-
For use with object shapes, this attribute uses a comma-separated list of numbers to define the coordinates of the object on the page.
-
{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
-
This attribute is required in an anchor defining a target location within a page. A value for name is similar to a value for the id core attribute and should be an alphanumeric identifier unique to the document. Under the HTML 4.01 specification, id and name both can be used with the <a> element as long as they have identical values. -
-

Usage note: This attribute is obsolete in HTML5, use global attribute id instead.

-
-
-
{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
-
This attribute specifies a reverse link, the inverse relationship of the rel attribute. It is useful for indicating where an object came from, such as the author of a document.
-
{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
-
This attribute is used to define a selectable region for hypertext source links associated with a figure to create an image map. The values for the attribute are circle, default, polygon, and rect. The format of the coords attribute depends on the value of shape. For circle, the value is x,y,r where x and y are the pixel coordinates for the center of the circle and r is the radius value in pixels. For rect, the coords attribute should be x,y,w,h. The x,y values define the upper-left-hand corner of the rectangle, while w and h define the width and height respectively. A value of polygon for shape requires x1,y1,x2,y2,... values for coords. Each of the x,y pairs defines a point in the polygon, with successive points being joined by straight lines and the last point joined to the first. The value default for shape requires that the entire enclosed area, typically an image, be used. -
Note: It is advisable to use the usemap attribute for the {{HTMLElement("img")}} element and the associated {{HTMLElement("map")}} element to define hotspots instead of the shape attribute.
-
-
- -

মানসম্মত নয়

- -
-
{{htmlattrdef("datafld")}} {{Non-standard_inline}}
-
This attribute specifies the column name from that data source object that supplies the bound data. -
-

Usage note: This attribute is non-standard and should not be used by authors. To achieve its effect, use scripting and a mechanism such as XMLHttpRequest to populate the page dynamically

-
- - - - - - - - - - - - - - - - - - - - - -
SupportGeckoPrestoWebKitTrident
Not implementedNot implementedNot implementedIE4, IE5, IE6, IE7 (Removed in IE8)
Normative documentMicrosoft's Data Binding: dataFld Property (MSDN)
-
-
{{htmlattrdef("datasrc")}} {{Non-standard_inline}}
-
This attribute indicates the ID of the data source object that supplies the data that is bound to this element. -
-

Usage note: This attribute is non-standard and should not be used by authors. To achieve its effect, use scripting and a mechanism such as XMLHttpRequest to populate the page dynamically.

-
- - - - - - - - - - - - - - - - - - - - - -
SupportGeckoPrestoWebKitTrident
Not implementedNot implementedNot implementedIE4, IE5, IE6, IE7 (Removed in IE8)
Normative documentMicrosoft's Data Binding: dataSrc Property (MSDN)
-
-
{{htmlattrdef("methods")}} {{Non-standard_inline}}
-
The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the title attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4. Methods Property (MSDN)
-
- -
-
{{htmlattrdef("urn")}} {{Non-standard_inline}}
-
This supposedly Microsoft-supported attribute relates a uniform resource name (URN) with the link. While it is based on standards work years back, the meaning of URNs is still not well defined, so this attribute is meaningless. urn Property (MSDN)
-
- -

উদাহরণ 

- -

বহিঃ ঠিকানায় সংযোগ 

- -
<!-- anchor linking to external file -->
-<a href="http://www.mozilla.com/">
-External Link
-</a>
-
- -

Result

- -

External Link

- -

Creating a clickable image

- -

This small example use an image to link to the MDN home page. The home page will open in a new browsing context, that is a new page or a new tab.

- -
<a href="https://developer.mozilla.org/en-US/" target="_blank">
-  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN logo" />
-</a>
-
- -

Result

- -
-

{{EmbedLiveSample("Creating_a_clickable_image", "320", "64")}}

-
- - - -

It's common to create buttons or links that will open in the user's email program to allow them to send a new message. This is done by using a mailto link. Here's a simple example:

- -
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
- -

This results in a link that looks like this: Send email to nowhere.

- -

For additional details about the mailto URL scheme, such as how to include the subject, body, or other predetermined content, see Email links or {{RFC(6068)}}.

- -

Using the download attribute to save a canvas as a PNG

- -

If you want to allow a user to download an HTML Canvas as an image you can create a link with a download attribute and the canvas data as a file URL:

- -
var link = document.createElement('a');
-link.innerHTML = 'download image';
-
-link.addEventListener('click', function(ev) {
-    link.href = canvas.toDataURL();
-    link.download = "mypainting.png";
-}, false);
-
-document.body.appendChild(link);
- -

You can see this in action http://jsfiddle.net/codepo8/V6ufG/2/

- -

স্পেসিফিকেশন

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Added the referrer attribute.
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '<a>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-a-element', '<a>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}{{Spec2('HTML4.01')}} 
- -

ব্রাউসার কম্পিটিয়েবিলিটি

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
href="#top"{{CompatVersionUnknown}}{{CompatGeckoDesktop("10.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
download{{CompatChrome("14")}}{{CompatGeckoDesktop("20.0")}}Edge 13{{CompatOpera("15")}}{{CompatNo}}
ping{{CompatVersionUnknown}}{{CompatNo}} [2]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
referrerpolicy{{CompatChrome(46.0)}} [3] {{CompatGeckoDesktop("45")}} [4]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
href="#top"{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("10.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
download{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("20.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
ping{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
referrerpolicy{{CompatNo}}{{CompatChrome(46.0)}} [3]{{CompatGeckoMobile("45.0")}} [4]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(46.0)}} [3]
-
- -

[1] Starting from Gecko 41 {{geckoRelease("41.0")}}, {{HTMLElement("a")}} without href attribute is no more classified as interactive content. Clicking it inside {{HTMLElement("label")}} will activate labelled content ({{bug(1167816)}}).

- -

[2] Disabled by default

- -

[3] Implemented behind a flag.

- -

[4] From Firefox 42 to Firefox 44, the attribute was called referrer.

- -

ক্লিক করুন ও ফোকাস করুন 

- -

Whether clicking on an {{HTMLElement("a")}} causes it to (by default) become focused varies by browser and OS.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Does clicking on an {{HTMLElement("a")}} give it the focus?
Desktop BrowsersWindows 8.1OS X 10.9
Firefox 30.0YesYes
Chrome ≥39
- (Chromium bug 388666)		YesYes
Safari 7.0.5N/AOnly when it has a tabindex
Internet Explorer 11YesN/A
Presto (Opera 12)YesYes
- - - - - - - - - - - - - - - - - - - - -
Does tapping on an {{HTMLElement("a")}} give it the focus?
Mobile BrowsersiOS 7.1.2Android 4.4.4
Safari MobileOnly when it has a tabindexN/A
Chrome 35???Only when it has a tabindex
- -

পাদটীকা

- -

The following are reserved browser key bindings for the two major browsers and should not be used as values to accesskey: a, c, e, f, g, h, v, left arrow, and right arrow.

- -

HTML 3.2 defines only name, href, rel, rev, and title.

- -

The target attribute is not defined in browsers that do not support frames, such as Netscape 1 generation browsers. Furthermore, target is not allowed under strict variants of XHTML but is limited to frameset or transitional forms.

- -

জাভাস্ক্রিপ্ট রিকোমেন্ডিশন 

- -

It is often the case that an anchor tag is used with the onclick event. In order to prevent the page from refreshing, href is often set to either "#" or "javascript:void(0)". Both of these values can lead to some unexpected errors when copying links and opening links in a new tab and/or window. Be aware of this for usability reasons, and when users do use anchor tags and you prevent default behavior.

- -

আরও দেখুন 

- -
    -
  • Other elements conveying text-level semantics: {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.
    • -
- -
{{HTMLRef}}
diff --git a/files/bn/web/html/element/article/index.html b/files/bn/web/html/element/article/index.html deleted file mode 100644 index 66d0db941b..0000000000 --- a/files/bn/web/html/element/article/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title:
-slug: Web/HTML/Element/article -tags: - - Element - - HTML - - HTML sections - - HTML5 - - Reference - - Web -translation_of: Web/HTML/Element/article ---- -

HTML <article> এলিমেন্ট ডকুমেন্ট, পেজ, অ্যাপ বা সাইটে একটি স্বয়ংসম্পূর্ণ প্রবন্ধ উপস্থাপন করে। এই প্রবন্ধটি স্বাধীনভাবে বিতরণযোগ্য বা পুনর্ব্যবহারযোগ্য, যেমনঃ syndication। এটা একটা ফোরাম পোস্ট হতে পারে, একটি ম্যাগাজিন বা পত্রিকার নিবন্ধ হতে পারে, একটি ব্লগ পোস্ট হতে পারে, মন্তব্য হতে পারে, একটি ইন্টারেক্টিভ উইজেট বা গ্যাজেট হতে পারে অথবা কন্টেন্ট এর একটি স্বাধীন উপকরণ হতে পারে।

-
-

ব্যবহার নির্দেশিকাঃ

-
    -
  • যখন একটি <article> এলিমেন্ট নেস্ট করা হয়, তখন ভেতরে থাকা এলিমেন্টটি একটি নিবন্ধ উপস্থাপন করে, যা বাইরের এলিমেন্টের সাথে সম্পর্কযুক্ত। উদাহরণ স্বরূপ, একটি ব্লগ পোস্টের কমেন্ট সমূহ <article> এলিমেন্টের মধ্যে নেস্ট করা <article> এলিমেন্ট হতে পারে, যেগুলো ব্লগ পোস্টটির সাথে সম্পর্কিত।
    • -
  • <article> এলিমেন্টের লেখকের তথ্য {{HTMLElement("address")}} এলিমেন্টের মাধ্যমে দেয়া যায়, কিন্তু আমরা আগেই জেনেছি যে, <article> এর মধ্যে <address> এলিমেন্ট নেস্ট করা যাবেনা।
    • -
  • <article> এলিমেন্টের প্রকাশের তারিখ এবং সময় {{HTMLElement("time")}} এলিমেন্টের {{htmlattrxref("pubdate", "time")}} অ্যাট্রিবিউট ব্যবহার করে লেখা যাবে।
    • -
-
- -

অ্যাট্রিবিউট সমূহ

-

এই এলিমেন্টের মধ্যে শুধু গ্লোবাল অ্যাট্রিবিউট সমূহ ব্যবহার করা যাবে।

-

উদাহরণ

-
<article>
-  <h4>A really awesome article</h4>
-  <p>Lots of awesome text.</p>
-</article>
-
-

Specifications

- - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML5 W3C')}} 
-

ব্রাউজার কম্প্যাটিবিলিটি

-

{{CompatibilityTable}}

-
- - - - - - - - - - - - - - - - - - - -
ফিচারক্রোমফায়ারফক্স (গেকো)ইন্টারনেট এক্সপ্লোরারঅপেরাসাফারি
মৌলিক সমর্থন৫{{CompatGeckoDesktop("2.0")}}৯.০১১.১০৪.১
-
-
- - - - - - - - - - - - - - - - - - - -
ফিচারঅ্যান্ড্রয়েডফায়ারফক্স মোবাইল (গেকো)ইন্টারনেট এক্সপ্লোরার মোবাইলঅপেরা মোবাইলসাফারি মোবাইল
মৌলিক সমর্থন২.২{{CompatGeckoMobile("2.0")}}৯.০১১.০৫.০ (iOS ৪.২)
-
-

আরও দেখুন

-
    -
  • <article> সংশ্লিষ্ট আরও কিছু এলিমেন্টঃ {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}
    • -
  • Sections and outlines of an HTML5 document.
    • -
-

{{ HTMLRef }}

diff --git a/files/bn/web/html/element/b/index.html b/files/bn/web/html/element/b/index.html deleted file mode 100644 index 47bd3812f8..0000000000 --- a/files/bn/web/html/element/b/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: সামারি -slug: Web/HTML/Element/b -tags: - - এইচ টি এম এল -translation_of: Web/HTML/Element/b ---- -

 সংক্ষিপ্ত

- -

 

- -
-
এইচ টি এম এল <বি> এলিমেন্ট কোন বিশেষ গুরুত্ব বা প্রাসঙ্গিকতা conveying ছাড়াই স্বাভাবিক টেক্সট থেকে শৈলীগত বিভিন্ন লেখার একটা স্প্যান প্রতিনিধিত্ব করে। এটা সাধারণত একটি সারসংক্ষেপ মধ্যে কীওয়ার্ড, পণ্যের নাম একটি পর্যালোচনা, বা যার সাধারণত উপস্থাপনা boldfaced হবে। টেক্সট অন্য ঘটনাকাল জন্য ব্যবহার করা হয়। তার ব্যবহারের আরেকটি উদাহরণ হল একটি প্রবন্ধের প্রতিটি অনুচ্ছেদের নেতৃত্ব বাক্য চিহ্নিত করা হয়।
-
- -
-

Usage notes:

- -
    -
  • Do not confuse the <b> element with the {{HTMLElement("strong")}}, {{HTMLElement("em")}}, or {{HTMLElement("mark")}} elements. The {{HTMLElement("strong")}} element represents text of certain importance, {{HTMLElement("em")}} puts some emphasis on the text and the {{HTMLElement("mark")}} element represents text of certain relevance. The <b> element doesn't convey such special semantic information; use it only when no others fit.
    • -
  • Similarly, do not mark titles and headings using the <b> element. For this purpose, use the {{HTMLElement("h1")}} to {{HTMLElement("h6")}} tags. Further, stylesheets can change the default style of these elements, with the result that they are not necessarily displayed in bold.
    • -
  • It is a good practice to use the class attribute on the <b> in order to convey additional semantic information (for example <b class="lead"> for the first sentence in a paragraph). This eases the development of several stylings of a web document, without the need to change its HTML code.
    • -
  • Historically, the <b> element was meant to make text boldface. Styling information has been deprecated since HTML4, so the meaning of the <b> element has been changed.
    • -
  • If there is no semantic purpose on using the <b> element, using css property font-weight with bold value would be a better choice for making text bold.
    • -
-
- - - - - - - - - - - - - - - - - - - - - - - - -
Content categoriesFlow content, phrasing content, palpable content.
Permitted contentPhrasing content.
Tag omission{{no_tag_omission}}
Permitted parent elementsAny element that accepts phrasing content.
DOM interface{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the HTMLSpanElement interface for this element.
- -

 আরোপ করা

- -

এই উপাদান শুধুমাত্র গ্লোবাল গুণাবলীতে রয়েছে।

- -

 উদাহরণ

- -
<p>
-  This article describes several <b>text-level</b> elements. It explains their usage in an <b>HTML</b> document.
-</p>
-Keywords are displayed with the default style of the <b> element, likely in bold.
-
- -

 ফল

- -

 

- -

এই নিবন্ধটি কয়েকটি টেক্সট-স্তরের উপাদান বর্ণ।এটি একটি এইচ টি এম এল নথিতে তাদের ব্যবহার ব্যাখ্যা।
-
- মূলশব্দ গাঢ় সম্ভবত <বি> উপাদান, এর ডিফল্ট শৈলী সঙ্গে প্রদর্শিত হয়।

- -

 বিশেষ উল্লেখ

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-b-element', '<b>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-b-element', '<b>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}{{Spec2('HTML4.01')}} 
- -

 ব্রাউজার উপযুক্ততা

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

 আরো দেখুন

- -
    -
  • Others elements conveying text-level semantics: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("abbr")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.
    • -
  • Using <b> and <i> elements (W3C)
    • -
- -
{{HTMLRef}}
diff --git a/files/bn/web/html/element/blockquote/index.html b/files/bn/web/html/element/blockquote/index.html deleted file mode 100644 index 2de7e9d5b1..0000000000 --- a/files/bn/web/html/element/blockquote/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title:
-slug: Web/HTML/Element/blockquote -tags: - - এইচ টি এম এল -translation_of: Web/HTML/Element/blockquote ---- -

 সংক্ষিপ্ত

- -

 এইচ টি এম এল <blockquote> এলিমেন্ট (বা এইচ টি এম এল ব্লক উদ্ধৃতি এলিমেন্ট) ঘিরা টেক্সট বর্ধিত উদ্ধৃতি যে ইঙ্গিত দেয়।সাধারণত, এই (এটি পরিবর্তন করার জন্যে নোট দেখুন) খাঁজ দ্বারা দৃশ্যত অনুষ্ঠিত হয়।উৎস একটি টেক্সট উপস্থাপনা {{HTMLElement ("cite")}} উপাদান ব্যবহার দেওয়া যেতে পারে, যখন উদ্ধৃতি উৎস জন্য একটি URL, অ্যাট্রিবিউট cite ব্যবহার দেওয়া হতে পারে।

- - - - - - - - - - - - - - - - - - - - - - - - -
Content categoriesFlow content, sectioning root, palpable content.
Permitted contentFlow content.
Tag omission{{no_tag_omission}}
Permitted parent elementsAny element that accepts flow content.
DOM interface{{domxref("HTMLQuoteElement")}}
- -

 

- -

আরোপ করা
-
- এই উপাদান গ্লোবাল গুণাবলী রয়েছে।

- -
-
{{htmlattrdef("cite")}}
-
 উদ্ধৃত তথ্যের জন্য একটি উৎস নথি বা বার্তা মনোনীত যে একটি URL। এই বৈশিষ্ট্য কনটেক্সট বা উক্তির রেফারেন্স ব্যাখ্যা তথ্য নির্দেশ করার  উদ্দেশ্যে করা হচ্ছে।
-
- -

 উদাহরণ

- -
<blockquote cite="http://developer.mozilla.org">
-  <p>This is a quotation taken from the Mozilla Developer Center.</p>
-</blockquote>
-
- -

 এইচ টি এম এল কোডের আউটপুট উপরে:

- -
-

This is a quotation taken from the Mozilla Developer Center.

-
- -

বিশেষ উল্লেখ

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-blockquote-element', '<blockquote>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '<blockquote>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<blockquote>')}}{{Spec2('HTML4.01')}} 
- -

 ব্রাউজার উপযুক্ততা

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

 নোট

- -

 

- -

<Blockquote> ইন্ডেন্ট সি এস এস কোড ব্যবহার {{cssxref ("মার্জিন")}} সম্পত্তি পরিবর্তন করতে।
-
- স্বল্প কোট {{HTMLElement ("Q")}} উপাদান ব্যবহার করার জন্য।

- -

 

- -

আরো দেখুন
-
-      ইনলাইন উদ্ধৃতি জন্য {{HTMLElement ("Q")}} উপাদান।
-      উৎস উদ্ধৃতির জন্য {{HTMLElement} ("cite")} উপাদান।
-
- {{}} HTMLRef

diff --git a/files/bn/web/html/element/index.html b/files/bn/web/html/element/index.html deleted file mode 100644 index 746ff13018..0000000000 --- a/files/bn/web/html/element/index.html +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: HTML এলিমেন্ট রেফারেন্স -slug: Web/HTML/Element -tags: - - HTML - - 'HTML:Element Reference' - - NeedsReview - - TopicStub - - Web - - ওয়েব - - রেফারেন্স -translation_of: Web/HTML/Element ---- -

যেসব HTML এলিমেন্ট, HTML5 অথবা এর আগের কোন সংস্করণে ছিল, তাদের প্রত্যেককে এই পাতায় লিস্ট করা হয়েছে। যখন কোন এলিমেন্ট কে এঙ্গেল ব্র্যাকেটের ভেতর লেখা হয়, তখন তাদেরকে HTML ট্যাগ বলে, যেমনঃ <elementname>। কীভাবে একটা HTML পেইজ/ডকুমেন্ট তৈরি করা হবে, আর এই পেইজের কোন অংশে কি ধরণের কন্টেন্ট বসানো হবে তা নির্ধারিত হয় এইসব HTML এলিমেন্ট দিয়েই।

-

এই পাতায় সব স্ট্যান্ডার্ড HTML ট্যাগকে লিস্ট করা হয়েছে। নতুন HTML5 ট্যাগ আর পুরনো ট্যাগ (স্ট্যান্ডার্ড না এমন ট্যাগ আর বাতিল হয়ে যাওয়া ট্যাগও রয়েছে) সবগুলোকেই লিস্ট করা হয়েছে এখানে। যেসব এলিমেন্ট HTML5 এ নতুন এসেছে তাদেরকে প্রায়ই নতুন HTML5 এলিমেন্ট বলা হয়, যদিও আগের স্ট্যান্ডার্ড এলিমেন্টগুলোও HTML5 এ কাজ করে।

-

In an HTML document, an element is defined by a starting tag. If the element contains other content, it ends with a closing tag, where the element name is preceded by a forward slash: </elementname>. Some elements don't need to be closed, such as image elements. These are known as void elements. HTML documents contain a tree of these elements. Each is named to represent what it does. For example, the <title> element represents the title of the document. Below is an alphabetical list of the HTML Elements.

-
- A -
    -
  • {{ HTMLElement("a") }}
    • -
  • {{ HTMLElement("abbr") }}
    • -
  • {{ HTMLElement("acronym") }}
    • -
  • {{ HTMLElement("address") }}
    • -
  • {{ HTMLElement("applet") }}
    • -
  • {{ HTMLElement("area") }}
    • -
  • {{ HTMLElement("article") }}
    • -
  • {{ HTMLElement("aside") }}
    • -
  • {{ HTMLElement("audio") }}
    • -
- B -
    -
  • {{ HTMLElement("b") }}
    • -
  • {{ HTMLElement("base") }}
    • -
  • {{ HTMLElement("basefont") }}
    • -
  • {{ HTMLElement("bdi") }}
    • -
  • {{ HTMLElement("bdo") }}
    • -
  • {{ HTMLElement("bgsound") }}
    • -
  • {{ HTMLElement("big") }}
    • -
  • {{ HTMLElement("blink") }}
    • -
  • {{ HTMLElement("blockquote") }}
    • -
  • {{ HTMLElement("body") }}
    • -
  • {{ HTMLElement("br") }}
    • -
  • {{ HTMLElement("button") }}
    • -
- C -
    -
  • {{ HTMLElement("canvas") }}
    • -
  • {{ HTMLElement("caption") }}
    • -
  • {{ HTMLElement("center") }}
    • -
  • {{ HTMLElement("cite") }}
    • -
  • {{ HTMLElement("code") }}
    • -
  • {{ HTMLElement("col") }}
    • -
  • {{ HTMLElement("colgroup") }}
    • -
  • {{ HTMLElement("command") }}
    • -
- D -
    -
  • {{ HTMLElement("data") }}
    • -
  • {{ HTMLElement("datalist") }}
    • -
  • {{ HTMLElement("dd") }}
    • -
  • {{ HTMLElement("del") }}
    • -
  • {{ HTMLElement("details") }}
    • -
  • {{ HTMLElement("dfn") }}
    • -
  • {{ HTMLElement("dir") }}
    • -
  • {{ HTMLElement("div") }}
    • -
  • {{ HTMLElement("dl") }}
    • -
  • {{ HTMLElement("dt") }}
    • -
- E -
    -
  • {{ HTMLElement("em") }}
    • -
  • {{ HTMLElement("embed") }}
    • -
- F -
    -
  • {{ HTMLElement("fieldset") }}
    • -
  • {{ HTMLElement("figcaption") }}
    • -
  • {{ HTMLElement("figure") }}
    • -
  • {{ HTMLElement("font") }}
    • -
  • {{ HTMLElement("footer") }}
    • -
  • {{ HTMLElement("form") }}
    • -
  • {{ HTMLElement("frame") }}
    • -
  • {{ HTMLElement("frameset") }}
    • -
- G H -
    -
  • {{ HTMLElement("h1") }}
    • -
  • {{ HTMLElement("h2") }}
    • -
  • {{ HTMLElement("h3") }}
    • -
  • {{ HTMLElement("h4") }}
    • -
  • {{ HTMLElement("h5") }}
    • -
  • {{ HTMLElement("h6") }}
    • -
  • {{ HTMLElement("head") }}
    • -
  • {{ HTMLElement("header") }}
    • -
  • {{ HTMLElement("hgroup") }}
    • -
  • {{ HTMLElement("hr") }}
    • -
  • {{ HTMLElement("html") }}
    • -
- I -
    -
  • {{ HTMLElement("i") }}
    • -
  • {{ HTMLElement("iframe") }}
    • -
  • {{ HTMLElement("img") }}
    • -
  • {{ HTMLElement("input") }}
    • -
  • {{ HTMLElement("ins") }}
    • -
  • {{ HTMLElement("isindex") }}
    • -
- J K -
    -
  • {{ HTMLElement("kbd") }}
    • -
  • {{ HTMLElement("keygen") }}
    • -
- L -
    -
  • {{ HTMLElement("label") }}
    • -
  • {{ HTMLElement("legend") }}
    • -
  • {{ HTMLElement("li") }}
    • -
  • {{ HTMLElement("link") }}
    • -
  • {{ HTMLElement("listing") }}
    • -
- M -
    -
  • {{HTMLElement("main")}}
    • -
  • {{ HTMLElement("map") }}
    • -
  • {{ HTMLElement("mark") }}
    • -
  • {{ HTMLElement("marquee") }}
    • -
  • {{ HTMLElement("menu") }}
    • -
  • {{ HTMLElement("meta") }}
    • -
  • {{ HTMLElement("meter") }}
    • -
- N -
    -
  • {{ HTMLElement("nav") }}
    • -
  • {{ HTMLElement("nobr") }}
    • -
  • {{ HTMLElement("noframes") }}
    • -
  • {{ HTMLElement("noscript") }}
    • -
- O -
    -
  • {{ HTMLElement("object") }}
    • -
  • {{ HTMLElement("ol") }}
    • -
  • {{ HTMLElement("optgroup") }}
    • -
  • {{ HTMLElement("option") }}
    • -
  • {{ HTMLElement("output") }}
    • -
- P -
    -
  • {{ HTMLElement("p") }}
    • -
  • {{ HTMLElement("param") }}
    • -
  • {{ HTMLElement("plaintext") }}
    • -
  • {{ HTMLElement("pre") }}
    • -
  • {{ HTMLElement("progress") }}
    • -
- Q -
    -
  • {{ HTMLElement("q") }}
    • -
- R -
    -
  • {{ HTMLElement("rp") }}
    • -
  • {{ HTMLElement("rt") }}
    • -
  • {{ HTMLElement("ruby") }}
    • -
- S -
    -
  • {{ HTMLElement("s") }}
    • -
  • {{ HTMLElement("samp") }}
    • -
  • {{ HTMLElement("script") }}
    • -
  • {{ HTMLElement("section") }}
    • -
  • {{ HTMLElement("select") }}
    • -
  • {{ HTMLElement("small") }}
    • -
  • {{ HTMLElement("source") }}
    • -
  • {{ HTMLElement("spacer") }}
    • -
  • {{ HTMLElement("span") }}
    • -
  • {{ HTMLElement("strike") }}
    • -
  • {{ HTMLElement("strong") }}
    • -
  • {{ HTMLElement("style") }}
    • -
  • {{ HTMLElement("sub") }}
    • -
  • {{ HTMLElement("summary") }}
    • -
  • {{ HTMLElement("sup") }}
    • -
- T -
    -
  • {{ HTMLElement("table") }}
    • -
  • {{ HTMLElement("tbody") }}
    • -
  • {{ HTMLElement("td") }}
    • -
  • {{ HTMLElement("textarea") }}
    • -
  • {{ HTMLElement("tfoot") }}
    • -
  • {{ HTMLElement("th") }}
    • -
  • {{ HTMLElement("thead") }}
    • -
  • {{ HTMLElement("time") }}
    • -
  • {{ HTMLElement("title") }}
    • -
  • {{ HTMLElement("tr") }}
    • -
  • {{ HTMLElement("track") }}
    • -
  • {{ HTMLElement("tt") }}
    • -
- U -
    -
  • {{ HTMLElement("u") }}
    • -
  • {{ HTMLElement("ul") }}
    • -
- V -
    -
  • {{ HTMLElement("var") }}
    • -
  • {{ HTMLElement("video") }}
    • -
- W -
    -
  • {{ HTMLElement("wbr") }}
    • -
- X Y Z -
    -
  • {{ HTMLElement("xmp") }}
    • -
-
-

The symbol This element has been added in HTML5 indicates that the element has been added in HTML5. Note that other elements listed here may have been modified or extended by the HTML5 specification. Dimmed elements are non-standard, obsolete, or deprecated; they must not be used in new Web sites, and should gradually be removed from existing ones.

diff --git a/files/bn/web/html/element/section/index.html b/files/bn/web/html/element/section/index.html deleted file mode 100644 index 17eecffcd7..0000000000 --- a/files/bn/web/html/element/section/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title:
-slug: Web/HTML/Element/section -tags: - - Element - - HTML - - HTML sections - - HTML5 - - Reference - - Référence(2) - - Web - - Élément(2) -translation_of: Web/HTML/Element/section ---- -

সারাংশ

- -

HTML সেকশন এলিমেন্ট (<section>) একটি ডকুমেন্ট এর কিছু অংশকে নির্দিষ্ট করে। যেমনঃ শিরোনাম সহ কিছু কন্টেন্ট।

- -
-

ব্যবহার নির্দেশিকাঃ

- -
    -
  • যদি একটি {{HTMLElement("section")}} এর কন্টেন্ট আলাদাভাবে চিহ্নিত করার প্রয়োজন হয়, তাহলে {{HTMLElement("article")}} এলিমেন্ট ব্যবহার করতে পারেন।
    • -
  • সাধারন কন্টেইনার হিসেবে {{HTMLElement("section")}} এলিমেন্ট ব্যবহার করবেন না; সাধারন কন্টেইনার হিসেবে ব্যবহার করার জন্য{{HTMLElement("div")}} এলিমেন্ট রয়েছে। সহজ কথায়, সেকশন শুধু একটি ডকুমেন্ট এর আউটলাইন তৈরিতে ব্যবহার করা যাবে।
    • -
-
- - - -

অ্যাট্রিবিউট সমূহ

- -

এই এলিমেন্টের মধ্যে শুধু গ্লোবাল অ্যাট্রিবিউট সমূহ ব্যবহার করা যাবে।

- -

উদাহরণ

- -
<section>
-  <h1>Heading</h1>
-  <p>Bunch of awesome content</p>
-</section>
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComments
{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}{{Spec2('HTML5 W3C')}} 
- -

ব্রাউজার কম্প্যাটিবিলিটি

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
ফিচারক্রোমফায়ারফক্স (গেকো)ইন্টারনেট এক্সপ্লোরারঅপেরাসাফারি
মৌলিক সমর্থন৫{{CompatGeckoDesktop("2.0")}}৯.০১১.১০৪.১
-
- -
- - - - - - - - - - - - - - - - - - - -
ফিচারঅ্যান্ড্রয়েডফায়ারফক্স মোবাইল (গেকো)ইন্টারনেট এক্সপ্লোরার মোবাইলঅপেরা মোবাইলসাফারি মোবাইল
মৌলিক সমর্থন২.২{{CompatGeckoMobile("2.0")}}৯.০১১.০৫.০ (iOS ৪.২)
-
- -

আরও দেখুন

- -
    -
  • Other section-related elements: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};
    • -
  • Sections and outlines of an HTML5 document.
    • -
- -
{{HTMLRef}}
diff --git a/files/bn/web/html/element/summary/index.html b/files/bn/web/html/element/summary/index.html deleted file mode 100644 index 224f34c553..0000000000 --- a/files/bn/web/html/element/summary/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: -slug: Web/HTML/Element/summary -tags: - - এইচ টি এম এল -translation_of: Web/HTML/Element/summary ---- -

{{SeeCompatTable}}

- -

 

- -

সংক্ষিপ্ত
-
- এইচ টি এম এল সারসংক্ষেপ উপাদান (<সারসংক্ষেপ>) একটি {{HTMLElement ("বিবরণ")}} উপাদান বিষয়বস্তুর জন্য একটি সারসংক্ষেপ, ক্যাপশন, অথবা লেজেন্ড হিসেবে ব্যবহার করা হয়।
- উল্লেখ্য: <সারসংক্ষেপ> উপাদান বাদ দেওয়া হয়, তাহলে শিরোনাম "বিবরণ" ব্যবহার করা হবে।

- -

 ব্যবহারের প্রেক্ষাপট

- - - - - - - - - - - - - - - - - - - - -
Permitted contentPhrasing content or one element of Heading content
Tag omissionNone, both the start tag and the end tag are mandatory.
Permitted parent elementThe {{ HTMLElement("details") }} element.
Normative documentHTML5, section 4.11.2
- -

 আরোপ করা

- -

 এই উপাদান শুধুমাত্র গ্লোবাল গুণাবলী রয়েছে।

- -

 

- -

ডি ও এম  ইন্টারফেস
-
- এই উপাদান {{domxref ("HTMLElement")}} ইন্টারফেস এবং কার্যকরী।

- -

 

- -

উদাহরণ
-
-  

- -

সঙ্কলন, পরের লাইন লিঙ্ক থেকে বিবরণ পেতে

- -
 
- -

 <সারসংক্ষেপ> উপর উদাহরণ জন্য {{HTMLElement ("বিবরণ")}} পাতাটি দেখুন।

- -

 বিশেষ উল্লেখ

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '<summary>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '<summary>')}}{{Spec2('HTML5.1')}} 
- -

 ব্রাউজার উপযুক্ততা

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support12{{ CompatNo}}[1]{{CompatNo}}{{CompatNo}}6
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.0{{CompatNo}}[1]{{CompatNo}}{{CompatNo}}{{ CompatNo}}
-
- -

[1] Gecko doesn't currently implement this. See {{bug(591737)}}.

- -

 আরো দেখুন

- -
    -
  • {{ HTMLElement("details") }}
    • -
- -
{{HTMLRef}}
diff --git a/files/bn/web/html/global_attributes/accesskey/index.html b/files/bn/web/html/global_attributes/accesskey/index.html deleted file mode 100644 index 9ed0660b2c..0000000000 --- a/files/bn/web/html/global_attributes/accesskey/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: অ্যাক্সেস কী -slug: Web/HTML/Global_attributes/accesskey -tags: - - এইচ টি এম এল -translation_of: Web/HTML/Global_attributes/accesskey ---- -

{{HTMLSidebar("Global_attributes")}}

- -

 

- -
-
 অ্যাক্সেস কী গ্লোবাল অ্যাট্রিবিউট বর্তমান উপাদান জন্য একটি কীবোর্ড শর্টকাট জেনারেট করার জন্য একটি ইঙ্গিত প্রদান করে। এই বৈশিষ্ট্য অক্ষরের একটি স্থান বিচ্ছিন্ন তালিকা-র (এক একক ইউনিকোড কোড পয়েন্ট) নিয়ে গঠিত। ব্রাউজার কম্পিউটার কিবোর্ড লেআউট যে বিদ্যমান প্রথমটি ব্যবহার।
-
- অ্যাক্সেস কী সক্রিয় অপারেশন ব্রাউজার এবং তার প্ল্যাটফর্ম উপর নির্ভর করে।
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 WindowsLinuxMac
FirefoxAlt + Shift + keyOn Firefox 14 or newer, Control + Alt + key
- On Firefox 13 or older, Control + key
Internet ExplorerAlt + keyN/A
Google ChromeAlt + keyControl + Alt + key
SafariAlt + keyN/AControl + Alt + key
OperaShift + Esc opens a contents list which are accessible by accesskey, then, can choose an item by pressing key
- -

 ফায়ারফক্স ব্যবহারকারীর পছন্দ প্রয়োজন মডিফায়ার কী কাস্টমাইজ করতে পারেন মনে রাখবেন।

- -

বিশেষ উল্লেখ

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML4.01')}}, several characters can be set as the accesskey. Also, it can be set on any element.
{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}{{Spec2('HTML4.01')}}Only supported on {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }}
- -

 ব্রাউজার উপযুক্ততা

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

 আরো দেখুন

- -

সকল গ্লোবাল গুণাবলী

- -
    -
diff --git a/files/bn/web/html/global_attributes/contenteditable/index.html b/files/bn/web/html/global_attributes/contenteditable/index.html deleted file mode 100644 index 083dd6493d..0000000000 --- a/files/bn/web/html/global_attributes/contenteditable/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: contenteditable -slug: Web/HTML/Global_attributes/contenteditable -translation_of: Web/HTML/Global_attributes/contenteditable ---- -

{{HTMLSidebar("Global_attributes")}}

- -

কন্টেন্টেদিতেবল গ্লোবাল আত্রিবিয়ট একটি এনাম্বেরাতেট আত্রিবিয়ুট যা নির্দেশিত করে যে যদি এলিমেন্ত ইউজার দ্বারা এডিটিং করা যায়।তাহলে,ব্রাউজার এডিটিং এর জন্য তার ওয়িদগেট পরিবর্তন করবে। আত্রিবিয়ুটি নিম্নের যেকোনো একটি ভেলুকে নিতে হবেঃ

- -
    -
  • সত্য অথবা আম্পতি স্ট্রিং ,যা নির্দেশিত করে যে এলিমেন্তটি অবশ্যই এডিটেবল;
    • -
  • মিথ্যা,যা নির্দেশিত করে যে এলিমেন্তটি এডিটেবল নয়।
    • -
- -

যদি এই আত্রিবিয়ুট সেট না হয়,ইহার দিফোলট ভেলু ইহার প্যারেন্ট এলিমেন্ত থেকে নেয়া হবে।

- -

এই আত্রিবিয়ুট একটি এনাম্বেরাতেট এবং বুলিয়ান নয়। ইহার মানে যে সত্য, মিথ্যা অথবা আম্পটি স্ট্রিং  ভেলুর স্পষ্ট ব্যবহার কার্যভার এবং এর মত শর্টহ্যান্ড <label contenteditable>Example Label</label> অনুমোদিত নয়।সঠিক ব্যবহার হল <label contenteditable="true">Example Label</label>।

- -

স্পেসিফিকেশনস

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
- -

ব্রাউজার কম্প্যাটিবিলিটি

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.9") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

আরও দেখুন

- - diff --git a/files/bn/web/html/global_attributes/draggable/index.html b/files/bn/web/html/global_attributes/draggable/index.html deleted file mode 100644 index 47aee89b01..0000000000 --- a/files/bn/web/html/global_attributes/draggable/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: ড্রাগেবল -slug: Web/HTML/Global_attributes/draggable -tags: - - এইচ টি এম এল -translation_of: Web/HTML/Global_attributes/draggable ---- -

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

- -

টেনে আনার যোগ্য গ্লোবাল অ্যাট্রিবিউট উপাদান টেনে নিয়ে যাবে যে কিনা তার ইঙ্গিত একটি গণিত অ্যাট্রিবিউট ব্যবহার করে {{domxref("HTML_Drag_and_Drop_API","HTML Drag and Drop API")}}. এটা নিম্নলিখিত মান থাকতে পারে;

- -
    -
  • সঠিক,এটি নি্দেশ করে যে উপাদানটি টানা হতে পারে
    • -
  • ভুল,এটি নি্দেশ করে যে উপাদানটি টানা হতে পারে না
    • -
- -

যদি এই আরোপন সেট না হয়, তবে প্রাথমিক মান আপনা-আপনি হয়, আচরণ যার অর্থ ব্রাউজার দ্বারা ডিফল্টরূপে সংজ্ঞায়িত এক হওয়া উচিত।

- -

এই বৈশিষ্ট্যটি গণিত তবে একটি বুলিয়ান  না। এই মান সত্য বা মিথ্যা হোক এর স্পষ্ট ব্যবহার বাধ্যতামূলক, যে মানে এবং <ট্যাগ টেনে আনার যোগ্য> উদাহরণ ট্যাগ </ ট্যাগ> মত একটি সংক্ষিপ্ত লেখার অনুমতি দেওয়া হয় না। সঠিক ব্যবহারটি হলো <ট্যাগ টেনে আনার যোগ্য = "সত্য"> উদাহরণ ট্যাগ </ ট্যাগ> ।

- -

ডিফল্টরূপে, শুধুমাত্র টেক্সট, ছবি, লিংক নির্বাচন করা হলে টেনে নেওয়া যাবে।সকল উপাদান এর জন্য, পর্বটি {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} অবশ্যই  টেনে নেওয়া এবং ছেঁড়ে দেওয়ার কাজ এর জন্য সেট করতে হবে, যেমন দেখানো হলো কম্প্রেহেনসিভ উদাহারন.

- -

স্পেসিফিকেশন

- - - - - - - - - - - - - - - - - - - -
স্পেসিফিকেশনঅবস্থামন্তব্য
{{SpecName('HTML WHATWG', "interaction.html#the-draggable-attribute", "draggable")}}{{Spec2('HTML WHATWG')}}বর্তমান স্ন্যাপশট হতে পরিবর্তন নেই, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-draggable-attribute", "draggable")}}{{Spec2('HTML5.1')}}প্রাথমিক সংজ্ঞা এর স্ন্যাপশট {{SpecName('HTML WHATWG')}},
- -

ব্রাউজার কম্পিবিলিটি

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
বৈশিষ্ট্যক্রোমফায়ারফক্স (গেছকো)ইন্টারনেট এক্সপ্লোরারঅপেরাসাফারি
প্রাথমিক সহায়তা{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.8.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
বৈশিষ্ট্যএন্ড্রোয়েডএন্ড্রয়েডের জন্য ক্রোমফায়ারফক্স মোবাইল (গেছকো)আই ই মোবাইলঅপেরা মোবাইলসাফারি মোবাইল
প্রাথমিক সহায়তা{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.8.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

আরও দেখুন

- - diff --git a/files/bn/web/html/global_attributes/hidden/index.html b/files/bn/web/html/global_attributes/hidden/index.html deleted file mode 100644 index eb0e626582..0000000000 --- a/files/bn/web/html/global_attributes/hidden/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: গোপন -slug: Web/HTML/Global_attributes/hidden -tags: - - এইচ টি এম এল -translation_of: Web/HTML/Global_attributes/hidden ---- -

{{HTMLSidebar("Global_attributes")}}

- -

 লুকানো গ্লোবাল অ্যাট্রিবিউট উপাদান এখনো নয়, অথবা আর, প্রাসঙ্গিক তা নির্দেশ করে ।একটি বুলিয়ান বৈশিষ্ট্য হল. উদাহরণস্বরূপ, এটি লগইন প্রক্রিয়া সম্পন্ন না হওয়া পর্যন্ত ব্যবহার করা যাবে না যে পৃষ্ঠার উপাদান আড়াল করতে ব্যবহার করা যেতে পারে। ব্রাউজার যেমন উপাদান রেন্ডার করা হবে না।

- -

 

- -

এই বৈশিষ্ট্য বৈধভাবে দেখানো যেতে পারে যে কন্টেন্ট আড়াল করতে ব্যবহার করা উচিত নয়। এই একটি স্টাইলিং সিদ্ধান্ত এবং তাদের একটি পুরোপুরি সঠিক পাতা নেতৃত্ব চাই দেখাচ্ছে অন্য শৈলী হিসাবে উদাহরণস্বরূপ, এটি একটি ট্যাবযুক্ত ইন্টারফেস ট্যাব প্যানেল লুকান ব্যবহার করা উচিত নয়।
-
- গোপন উপাদান অ লুকানো উপাদান এবং যে স্ক্রিপ্ট উপাদান এখনও নির্বাহ করতে পারেন এবং ফর্ম উপাদান এখনও জমা দিতে পারেন, যার মানে সক্রিয় এখনও একটি গোপন উপাদান উত্তরপুরুষ যে উপাদান থেকে সংযুক্ত করা উচিত নয়।

- -
-

Note: Changing the value of the CSS {{cssxref("display")}} property on an element with the hidden attribute overrides the behavior. For instance, an element styled display: flex will be displayed on screen regardless of the hidden attribute being present.

-
- -

 বিশেষ উল্লেখ

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}{{Spec2('HTML WHATWG')}}Defines the suggested default rendering of the hidden attribute using CSS
{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, initial definition
- -

 ব্রাউজার উপযুক্ততা

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("2") }}11{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("2") }}11{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

 আরো দেখুন

- -
    -
  •  সকল গ্লোবাল গুণাবলী।
    • -
diff --git a/files/bn/web/html/global_attributes/index.html b/files/bn/web/html/global_attributes/index.html deleted file mode 100644 index 593c0dc6ed..0000000000 --- a/files/bn/web/html/global_attributes/index.html +++ /dev/null @@ -1,463 +0,0 @@ ---- -title: Global attributes -slug: Web/HTML/Global_attributes -tags: - - Attribute - - HTML - - NeedsBrowserCompatibility - - NeedsTranslation - - Reference - - TopicStub - - Web -translation_of: Web/HTML/Global_attributes ---- -
{{HTMLSidebar("Global_attributes")}}
- -
-

Global attributes are attributes common to all HTML elements; they can be used on all elements, though the attributes may have no effect on some elements.

-
- -

Global attributes may be specified on all HTML elements, even those not specified in the standard. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as <foo hidden>...<foo>, even though <foo> is not a valid HTML element.

- -

In addition to the basic HTML global attributes, the following global attributes also exist:

- -
    -
  • xml:lang and xml:base — these are inherited from the XHTML specifications and deprecated, but kept for compatibility purposes.
    • -
  • The multiple aria-* attributes, used for improving accessibility.
    • -
  • The event handler attributes: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting.
    • -
- -

Description

- -
-
accesskey
-
Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters. The browser should use the first one that exists on the computer keyboard layout.
-
class
-
Is a space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method {{domxref("Document.getElementsByClassName()")}}.
-
contenteditable
-
Is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values: -
    -
  • true or the empty string, which indicates that the element must be editable;
    • -
  • false, which indicates that the element must not be editable.
    • -
-
-
contextmenu
-
Is the id of an {{HTMLElement("menu")}} to use as the contextual menu for this element.
-
data-*
-
Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation that may be used by scripts. All such custom data are available via the {{domxref("HTMLElement")}} interface of the element the attribute is set on. The {{domxref("HTMLElement.dataset")}} property gives access to them.
-
dir
-
Is an enumerated attribute indicating the directionality of the element's text. It can have the following values: -
    -
  • ltr, which means left to right and is to be used for languages that are written from the left to the right (like English);
    • -
  • rtl, which means right to left and is to be used for languages that are written from the right to the left (like Arabic);
    • -
  • auto, which let the user agent decides. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then apply that directionality to the whole element.
    • -
-
-
draggable {{experimental_inline}}
-
Is an enumerated attribute indicating whether the element can be dragged, using the Drag and Drop API. It can have the following values: -
    -
  • true, which indicates that the element may be dragged
    • -
  • false, which indicates that the element may not be dragged.
    • -
-
-
dropzone {{experimental_inline}}
-
Is an enumerated attribute indicating what types of content can be dropped on an element, using the Drag and Drop API. It can have the following values: -
    -
  • copy, which indicates that dropping will create a copy of the element that was dragged
    • -
  • move, which indicates that the element that was dragged will be moved to this new location.
    • -
  • link, will create a link to the dragged data.
    • -
-
-
hidden
-
Is a Boolean attribute indicates that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.
-
id
-
Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
-
itemid {{experimental_inline}}
-
itemprop {{experimental_inline}}
-
itemref {{experimental_inline}}
-
itemscope {{experimental_inline}}
-
itemtype {{experimental_inline}}
-
These attributes are related to the WHATWG HTML Microdata feature.
-
lang
-
Participates in defining the language of the element, the language that non-editable elements are written in or the language that editable elements should be written in. The tag contains one single entry value in the format defines in the Tags for Identifying Languages (BCP47) IETF document. xml:lang has priority over it.
-
spellcheck {{experimental_inline}}
-
Is an enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values: -
    -
  • true, which indicates that the element should be, if possible, checked for spelling errors;
    • -
  • false, which indicates that the element should not be checked for spelling errors.
    • -
-
-
style
-
Contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{ HTMLElement("style") }} element have mainly the purpose of allowing for quick styling, for example for testing purposes.
-
tabindex
-
Is an integer attribute indicates if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values: -
    -
  • a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
    • -
  • 0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
    • -
  • a positive value which means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the tabindex. If several elements share the same tabindex, their relative order follows their relative position in the document).
    • -
-
-
title
-
Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.
-
translate
-
Is an enumerated attribute that is used to specify whether an element's attribute values and the values of its {{domxref("Text")}} node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values: -
    -
  • empty string and "yes", which indicates that the element will be translated.
    • -
  • "no", which indicates that the element will not be translated.
    • -
-
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML WHATWG')}}From latest snapshot, {{SpecName('HTML5.1')}}, itemid, itemprop, itemref, itemscope, and itemtype have been added.
{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML5 W3C')}}, spellcheck, draggable, and dropzone have been added.
{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the dir, lang, style, id, class, tabindex, accesskey, and title are now true global attributes.
- xml:lang which was initially part of XHTML, is now also part of HTML.
- hidden, data-*, contextmenu, contenteditable, and translate have been added.
{{SpecName('HTML4.01')}}{{Spec2('HTML4.01')}}There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.
- class and style are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
- dir is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.
- id is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
- lang is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.
- tabindex is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
- accesskey is only supported on {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }}.
- title is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
accesskey{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
class{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
contenteditable{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
contextmenu{{CompatNo}}{{CompatGeckoDesktop(9)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
data-*{{CompatVersionUnknown}}{{CompatGeckoDesktop("6")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
dir{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
draggable{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
dropzone{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
hidden{{CompatVersionUnknown}}{{CompatGeckoDesktop("2")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
id{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
itemid, itemprop, itemref, itemscope, itemtype{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
lang{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
spellcheck{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
style{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
tabindex{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
title{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
accesskey{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
class{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
contenteditable{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
contextmenu{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
data-*{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("6")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
dir{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
draggable{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
dropzone{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
hidden{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
id{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
itemid, itemprop, itemref, itemscope, itemtype{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
lang{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
spellcheck{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
style{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
tabindex{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
title{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

See also

- -
    -
  • {{domxref("Element")}} and {{domxref("GlobalEventHandlers")}} interfaces that allow to query most global attributes.
    • -
diff --git a/files/bn/web/html/global_attributes/itemprop/index.html b/files/bn/web/html/global_attributes/itemprop/index.html deleted file mode 100644 index 2ce2ce86eb..0000000000 --- a/files/bn/web/html/global_attributes/itemprop/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: আইটেমপ্রোপ -slug: Web/HTML/Global_attributes/itemprop -translation_of: Web/HTML/Global_attributes/itemprop ---- -

আমরা যেমন অভিনেতা, পরিচালক, মূল্যায়ন হিসাবে বৈশিষ্ট্য মত, পাশ ইমেজ বা তথ্য সম্পর্কে সার্চ ইঞ্জিন থেকে আরো তথ্য ট্যাগ যে কোন ধরণের দিতে পারেন। একটি আইটেম এর বৈশিষ্ট্য লেবেলে আইটেমপ্রোপ অ্যাট্রিবিউট ব্যবহার। উদাহরণস্বরূপ, একটি সিনেমা পরিচালককে চিহ্নিত করা যাক,পরিচালক এর নাম অন্তর্নিহিত উপাদান করার আইটেমপ্রোপ = "পরিচালক" যোগ করুন।

- -

এখানে একটি সহজ উদাহরনঃ

- -
<div itemscope itemtype ="http://schema.org/Movie">
-  <h1 itemprop="name">Avatar</h1>
-  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
-  <span itemprop="genre">Science fiction</span>
-  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
-</div>
- -

 

- -

             সংশ্লিষ্ট বৈশিষ্ট্যাবলী পড়ুন উপর আরও  তথ্যের জন্য https://schema.org/docs/gs.html

diff --git a/files/bn/web/html/global_attributes/itemscope/index.html b/files/bn/web/html/global_attributes/itemscope/index.html deleted file mode 100644 index 93725b7249..0000000000 --- a/files/bn/web/html/global_attributes/itemscope/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: স্কিমা মাইক্রোডাটা আইটেমস্কপ -slug: Web/HTML/Global_attributes/itemscope -tags: - - এইচটিএমএল -translation_of: Web/HTML/Global_attributes/itemscope ---- -

 এই বৈশিষ্ট্য স্ট্রাকচার্ড ডেটা প্রচার করে।স্কিমা মাইক্রোডাটা  আইটেমস্কুপ ব্যবহার করে আপনি সংশ্লিষ্ট bloe অন্তর্ভুক্ত এইচ টি এম এল একটি নির্দিষ্ট আইটেম সম্পর্কে যে নির্দিষ্ট করতে পারেন।
-
- কিন্তু এটা একটি আইটেম এটা একটি আইটেম কি ধরনের উল্লেখ না আলোচনা হচ্ছে সেখানে যে উল্লেখ করার উপযোগী নয়। আমরা আইটেমস্কুপ দ্বারা আইটেমস্কুপ অনুসরণ অ্যাট্রিবিউট ব্যবহার আইটেমটি ধরণ উল্লেখ করা যাবে।
-
- এখানে উদাহরণ হলঃ

- -

 

- -
<div itemscope itemtype="http://schema.org/Movie">
-  <h1>Avatar</h1>
-  <span>Director: James Cameron (born August 16, 1954)</span>
-  <span>Science fiction</span>
-  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
-</div>
- -

এই আইটেমস্কুপ দ্বারা <p> ... </ p> নির্দিষ্ট ধরণ সম্পর্কে ভিতর আমরা এইচ টি এম এল উল্লেখ করা হয়, এবং আমরা অ্যাট্রিবিউট আইটেম টাইপের সঙ্গে কনটেন্ট এর ধরণ উল্লেখ করা হয়।
-
- আইটেম টাইপ সম্পর্কে আরো বৈশিষ্ট্যাবলী পাওয়া যাবে  http://schema.org/Thing

- -

 

diff --git a/files/bn/web/html/global_attributes/tabindex/index.html b/files/bn/web/html/global_attributes/tabindex/index.html deleted file mode 100644 index efcf144936..0000000000 --- a/files/bn/web/html/global_attributes/tabindex/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: tabindex -slug: Web/HTML/Global_attributes/tabindex -translation_of: Web/HTML/Global_attributes/tabindex ---- -

{{HTMLSidebar("Global_attributes")}}

- -

Note: The maximum value for tabIndex should not exceed 32767 per W3C section 17.11.1

- -

ট্যাবইনডেক্স গোব্যাল আত্রিবিওট একটি পূর্ণসংখ্যা যা নির্দেশিত করে যে,যদি এলিমেন্তটি ফোকাসকে ইনপুতে নিতে পারে (ইহা ফোকাসিত),যদি ইহা সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশন অংশগ্রহন করে, এবং যেকোন অবস্তায়. ইহা সহাস্র ভেলু নিতে পারেঃ

- -
    -
  • একটি  নেগাতিভ ভেলু মানে  হল এলিমেন্তটি অবশ্যই ফোকাসিত,কিন্তু সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশনের মাধ্যমে কাছে আশা যাবে না;
    • -
  • 0 মানে হল এলিমেন্তটি ফোকাসিত করা যায় এবং সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশনের মাধ্যমে কাছে আসা যায়,কিন্ত ইহার রিলেতিভ অর্ডার প্লাটফর্ম দ্বারা সংজ্ঞায়িত;
    • -
  • একটি পসিতিভ ভেলু যার মানে হল ফোকাসিত করা যায় এবং সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশনের মাধ্যমে কাছে আসা যায়,কিন্ত ইহার রিলেতিভ অর্ডার প্লাটফর্ম দ্বারা সংজ্ঞায়িত; সেকএন্তিয়াল ট্যাবইনডেক্সের বড়দিত ভেলুকে অনুসরণ করে।যদি অনেক এলিমেন্তস একই ট্যাবইনডেক্স নিজদের মধ্যে ভাগ করে,তাদের রিলেতিভ অর্ডার তাদের রিলেতিভ পসিসনকে অনুসরন করে)।
    • -
- -

একটি এলিমেন্তের সাথে 0 ভেলু, একটি অকার্যকর ভেলু, অথবা কোন ট্যাবইনডেক্স ভেলু সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশন অর্ডারের পসিতিভ ট্যাবইনডেক্স এর এলিমেন্তের পরে বসবে না।

- -

তুমি এই প্রবন্ধটি পরযাচলনা করতে পারো ফোকাস মানেজমেন্তের ব্যাপক ব্যাখ্যা দেখার জন্য।

- -

স্পেসিফিকেসনস

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the attribute is now supported on all elements (global attributes).
{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}{{Spec2('HTML4.01')}}Only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
- -

ব্রাউজার কম্প্যাটিবিলিটি

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

আরও দেখুন

- - diff --git a/files/bn/web/html/global_attributes/translate/index.html b/files/bn/web/html/global_attributes/translate/index.html deleted file mode 100644 index f95149af69..0000000000 --- a/files/bn/web/html/global_attributes/translate/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: অনুবাদ করা -slug: Web/HTML/Global_attributes/translate -tags: - - এইচ টি এম এল -translation_of: Web/HTML/Global_attributes/translate ---- -

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

- -

 অনুবাদ গ্লোবাল অ্যাট্রিবিউট একটি উপাদান এর অ্যাট্রিবিউট মান এবং তার টেক্সট নোড শিশুদের মান পৃষ্ঠা অনূদিত হয় বা অপরিবর্তিত তাদের ছেড়ে কিনা যখন অনুবাদ করা হয় কিনা তা উল্লেখ করতে ব্যবহৃত হয় যে একটি গণিত বৈশিষ্ট্য হল।এটা নিম্নলিখিত মান থাকতে পারে:

- -
    -
  •  পাতা অনূদিত হয় যখন উপাদান অনুবাদ করা উচিত যা নির্দেশ করে যে খালি স্ট্রিং এবং "হ্যাঁ",।
    • -
  •  কোন", উপাদান অনুবাদ করা উচিত নয় যে, যা নির্দেশ করে।
    • -
- -

 বিশেষ উল্লেখ

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, initial definition
- -

 ব্রাউজার উপযুক্ততা

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo }}{{ CompatNo }}{{CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
-
- -

 আরো দেখুন

- -
    -
  • সকল গ্লোবাল গুণাবলী।
    • -
  • এই বৈশিষ্ট্য প্রতিফলিত করে {{domxref ("HTMLElement.translate")}} সম্পত্তি।
    • -
diff --git a/files/bn/web/html/index.html b/files/bn/web/html/index.html deleted file mode 100644 index b06315e384..0000000000 --- a/files/bn/web/html/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: HTML( হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ ) -slug: Web/HTML -tags: - - HTML - - HTML5 - - Landing - - Web -translation_of: Web/HTML ---- -
{{HTMLSidebar}}
- -

HTML (HyperText Markup Language) হল ওয়েব নির্মানের মূল উপাদান। এটি ওয়েবপেজের বিষয়বস্তুগুলিকে বর্ণনা এবং সংজ্ঞায়িত করে। সাধারণভাবে HTML ছাড়া অন্যান্য প্রযুক্তি একটি ওয়েবপেজের চেহারা / উপস্থাপনা (CSS) অথবা কার্যকারিতা (Javascript) বর্ণনার জন্য ব্যবহার করা হয়। আপনার ব্রাউজারে প্রদর্শিত সবকিছুই মূলত HTML দিয়ে গঠিত হয়। আরও সঠিকভাবে বলা যায় যে, HTML হল এমন একটি ভাষা যা একটি ওয়েব ডকুমেন্টের গঠন, নক্সা, বিষয়বস্তুর অবস্থান, অভ্যন্তরীণ তথ্য ইত্যাদি নিয়ন্ত্রণ করে।

- -

"হাইপার টেক্সট" বলতে একটি লিঙ্ক বোঝায় যেটা একটি ওয়েব পেজের সঙ্গে আরেকটি ওয়েবপজের সংযোগ স্থাপন করে, হয় একটি একক ওয়েবসাইট মধ্যে বা বিভিন্ন ওয়েবসাইটের মধ্যে। লিঙ্ক গুলি ওয়েবের সবচেয়ে অপরিহার্য অংশ। ইন্টারনেটে বিষয়বস্তু আপলোড এবং তা অন্যান্য ব্যক্তিদের দ্বারা নির্মিত পৃষ্ঠাগুলিতে সংযুক্ত করে আপনি ওয়ার্ল্ড ওয়াইড ওয়েবের একজন সক্রিয় অংশগ্রহণকারী হয়ে যেতে পারেন।

- -

একটি ওয়েব ব্রাউজারের মধ্যে লেখা, ছবি, এবং অন্যান্য বিষয়বস্তু প্রদর্শনের জন্য এইচটিএমএল "মার্কআপ" ব্যবহার করে। HTML এর মার্কাপগুলি বিশেষ কতগুলি উপাদান দিয়ে অন্তর্ভুক্ত যেমন {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, এবং অনেক কিছু।

- -

নিচের প্রবন্ধগুলি আপনাকে HTML শিখতে আরও সাহায্য করবে।

- -
-
    -
  • HTML প্রসঙ্গ - -

    আমাদের বিস্তীর্ণ HTML reference অধ্যায়ে HTML এর সকল এলিমেন্ট ও অ্যাট্রিবিউট এর বিস্তারিত তথ্য জানতে পারবেন।

    -
    • -
  • HTML ডেভেলপার নির্দেশিকা -

    HTML ব্যবহার সম্পর্কিত নিবন্ধ, পরিপূর্ণ উদাহরণ সহ টিউটোরিয়াল ইত্যাদি দেখতে আমাদের HTML ডেভেলপার গাইড দেখুন।

    -
    • -
  • HTML পরিচিতি -

    ওয়েব ডেভেলপমেন্ট এর ক্ষেত্রে আপনি যদি নতুন হয়ে থাকেন, তাহলে HTML কি এবং কিভাবে এটা ব্যবহার করতে হবে ইত্যাদি জানার জন্য আমাদের পরিচিতি নিবন্ধটি অবশ্যই পড়বেন।

    -
    • -
- -
-
-

রেফারেন্স সমূহ

- -

{{SubpagesWithSummaries}}

- -

সব দেখুন...

-
- -
-

গাইড এবং টিউটোরিয়াল সমূহ

- -
-
এইচটিএমএল ডেভেলপার গাইড
-
এমডিএন এর কিছু নিবন্ধ, যাতে কিছু নির্দিষ্ট কৌশল বর্ণনা করা হয়েছে যেগুলো আপনি HTML দিয়ে ওয়েব কন্টেন্ট তৈরি করার সময় ব্যবহার করতে পারেন। এখানে কিছু টিউটোরিয়ালও আছে যেগুলো আপনার কাজে লাগবে।
-
-
-
-
- -
-
HTML উপাদানসমূহের নির্দেশিকা
-
সকল HTML উপাদানের একটি তালিকা দেখুন।
-
HTML প্রসঙ্গ
-
এইচটিএমএল এলিমেন্ট নিয়ে গঠিত, যার প্রত্যেকটি কতগুলি আট্রিবিউট দ্বারা পরিবর্তিত হতে পারে. HTML documents গুলি পরস্পরের সঙ্গে অন্যান্য লিঙ্কের মাধ্যমে সংযুক্ত থাকে। 
-
Inline উপাদানসমূহ
-
এইচটিএমএল এলিমেন্ট সাধারণত "ইনলাইন" উপাদান বা "ব্লক-স্তরের" উপাদান। একটি ইনলাইন উপাদান শুধুমাত্র ট্যাগের ভিতরের স্থান অধিকার করে থাকে। 
-
Block-level উপাদানসমূহ
-
এইচটিএমএল এলিমেন্ট সাধারণত "ব্লক-স্তরের" উপাদান বা "ইনলাইন" উপাদান। একটি ব্লক স্তরের উপাদান তার  প্যারেন্ট এলিমেন্টের (container) সমস্ত জায়গা জুরে অবস্থান করে, যার ফলে একটি "ব্লক" তৈরি হয়।
-
CORS সক্রিয় ছবি
-
The crossorigin attribute, in combination with an appropriate CORS header, allows images defined by the {{HTMLElement("img")}} element to be loaded from foreign origins and used in a {{HTMLElement("canvas")}} element as if they were being loaded from the current origin.
-
CORS বৈশিষ্ট্যাবলী সেটিংস
-
Some HTML elements that provide support for CORS, such as {{HTMLElement("img")}} or {{HTMLElement("video")}}, have a crossorigin attribute (crossOrigin property), which lets you configure the CORS requests for the element's fetched data.
-
HTML এ ফোকাস ব্যবস্থাপনা
-
The activeElement DOM attribute and the hasFocus() DOM method help you track and control a user's interactions with elements on a webpage.
-
সার্বজনীন attributes
-
Global attributes may be specified on all HTML elements, even those not specified in the standard. This means that any non-standard elements must still permit these attributes, even though those elements make the document HTML5-noncompliant.
-
HTML attribute নির্দেশিকা
-
Elements in HTML have attributes. These are additional values that configure the elements or adjust their behavior in various ways.
-
লিংকের ধরন
-
In HTML, various link types can be used to establish and define the relationship between two documents. Link types include <a>, <area>, and <link>.
-
এইচটিএমএল অডিও এবং ভিডিও উপাদান দ্বারা সমর্থিত Media বিন্যাস
-
The <audio> and <video> elements allow you to play audio and video media. These elements provide a browser-native alternative to similar capabilities found in Adobe Flash and other plug-ins.
-
Using the application cache
-
Application caching lets web-based applications run offline. You can use the Application Cache (AppCache) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.
-
diff --git a/files/bn/web/http/index.html b/files/bn/web/http/index.html deleted file mode 100644 index 6e893c3ced..0000000000 --- a/files/bn/web/http/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: HTTP -slug: Web/HTTP -tags: - - HTTP - - Hypertext - - NeedsTranslation - - Reference - - TCP/IP - - TopicStub - - Web - - Web Development - - 'l10n:priority' -translation_of: Web/HTTP ---- -
{{HTTPSidebar}}
- -

Hypertext Transfer Protocol (HTTP) is an application-layer protocol for transmitting hypermedia documents, such as HTML. It was designed for communication between web browsers and web servers, but it can also be used for other purposes. HTTP follows a classical client-server model, with a client opening a connection to make a request, then waiting until it receives a response. HTTP is a stateless protocol, meaning that the server does not keep any data (state) between two requests. Though often based on a TCP/IP layer, it can be used on any reliable transport layer, that is, a protocol that doesn't lose messages silently like UDP does. RUDP — the reliable update of UDP — is a suitable alternative.

- -
-
-

Tutorials

- -

Learn how to use HTTP with guides and tutorials.

- -
-
Overview of HTTP
-
The basic features of the client-server protocol: what it can do and its intended uses.
-
HTTP Cache
-
Caching is very important for fast Web sites. This article describes different methods of caching and how to use HTTP Headers to control them.
-
HTTP Cookies
-
How cookies work is defined by RFC 6265. When serving an HTTP request, a server can send a Set-Cookie HTTP header with the response. The client then returns the cookie's value with every request to the same server in the form of a Cookie request header. The cookie can also be set to expire on a certain date, or restricted to a specific domain and path.
-
Cross-Origin Resource Sharing (CORS)
-
Cross-site HTTP requests are HTTP requests for resources from a different domain than the domain of the resource making the request. For instance, an HTML page from Domain A (http://domaina.example/) makes a request for an image on Domain B (http://domainb.foo/image.jpg) via the img element. Web pages today very commonly load cross-site resources, including CSS stylesheets, images, scripts, and other resources. CORS allows web developers to control how their site reacts to cross-site requests.
-
- -
-
Evolution of HTTP
-
A brief description of the changes between the early versions of HTTP, to the modern HTTP/2, the emergent HTTP/3 and beyond.
-
Mozilla web security guidelines
-
A collection of tips to help operational teams with creating secure web applications.
-
- -
-
HTTP Messages
-
Describes the type and structure of the different kind of messages of HTTP/1.x and HTTP/2.
-
A typical HTTP session
-
Shows and explains the flow of a usual HTTP session.
-
Connection management in HTTP/1.x
-
Describes the three connection management models available in HTTP/1.x, their strengths, and their weaknesses.
-
-
- -
-

Reference

- -

Browse through detailed HTTP reference documentation.

- -
-
HTTP Headers
-
HTTP message headers are used to describe a resource, or the behavior of the server or the client. Custom proprietary headers can be added using the X- prefix; others in an IANA registry, whose original content was defined in RFC 4229. IANA also maintains a registry of proposed new HTTP message headers.
-
HTTP Request Methods
-
The different operations that can be done with HTTP: {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, and also less common requests like {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}}, or {{HTTPMethod("TRACE")}}.
-
HTTP Status Response Codes
-
HTTP response codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.
-
- -
-
CSP directives
-
The {{HTTPHeader("Content-Security-Policy")}} response header fields allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints.
-
- -

Tools & resources

- -

Helpful tools and resources for understanding and debugging HTTP.

- -
-
Firefox Developer Tools
-
Network monitor
-
Mozilla Observatory
-
-

A project designed to help developers, system administrators, and security professionals configure their sites safely and securely.

-
-
RedBot
-
Tools to check your cache-related headers
-
How Browsers Work
-
A very comprehensive article on browser internals and request flow through HTTP protocol. A MUST-READ for any web developer.
-
-
-
diff --git a/files/bn/web/http/status/index.html b/files/bn/web/http/status/index.html deleted file mode 100644 index b39296ce25..0000000000 --- a/files/bn/web/http/status/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: HTTP response status codes -slug: Web/HTTP/Status -tags: - - HTTP - - Landing - - NeedsTranslation - - Overview - - Reference - - Status code - - TopicStub - - Web -translation_of: Web/HTTP/Status ---- -
{{HTTPSidebar}}
- -

HTTP response status codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes:

- -
    -
  1. Informational responses (100–199),
    2. -
  2. Successful responses (200–299),
    3. -
  3. Redirects (300–399),
    4. -
  4. Client errors (400–499),
    5. -
  5. and Server errors (500–599).
    6. -
- -

The below status codes are defined by section 10 of RFC 2616. You can find an updated specification in RFC 7231.

- -
-

If you receive a response that is not in this list, it is a non-standard response, possibly custom to the server's software.

-
- -

Information responses

- -
-
{{HTTPStatus(100, "100 Continue")}}
-
This interim response indicates that everything so far is OK and that the client should continue the request, or ignore the response if the request is already finished.
-
{{HTTPStatus(101, "101 Switching Protocol")}}
-
This code is sent in response to an {{HTTPHeader("Upgrade")}} request header from the client, and indicates the protocol the server is switching to.
-
{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})
-
This code indicates that the server has received and is processing the request, but no response is available yet.
-
{{HTTPStatus(103, "103 Early Hints")}}
-
This status code is primarily intended to be used with the {{HTTPHeader("Link")}} header, letting the user agent start preloading resources while the server prepares a response.
-
- -

Successful responses

- -
-
{{HTTPStatus(200, "200 OK")}}
-
The request has succeeded. The meaning of the success depends on the HTTP method: -
    -
  • GET: The resource has been fetched and is transmitted in the message body.
    • -
  • HEAD: The entity headers are in the message body.
    • -
  • PUT or POST: The resource describing the result of the action is transmitted in the message body.
    • -
  • TRACE: The message body contains the request message as received by the server
    • -
-
-
{{HTTPStatus(201, "201 Created")}}
-
The request has succeeded and a new resource has been created as a result. This is typically the response sent after POST requests, or some PUT requests.
-
{{HTTPStatus(202, "202 Accepted")}}
-
The request has been received but not yet acted upon. It is noncommittal, since there is no way in HTTP to later send an asynchronous response indicating the outcome of the request. It is intended for cases where another process or server handles the request, or for batch processing.
-
{{HTTPStatus(203, "203 Non-Authoritative Information")}}
-
This response code means the returned meta-information is not exactly the same as is available from the origin server, but is collected from a local or a third-party copy. This is mostly used for mirrors or backups of another resource. Except for that specific case, the "200 OK" response is preferred to this status.
-
{{HTTPStatus(204, "204 No Content")}}
-
There is no content to send for this request, but the headers may be useful. The user-agent may update its cached headers for this resource with the new ones.
-
{{HTTPStatus(205, "205 Reset Content")}}
-
Tells the user-agent to reset the document which sent this request.
-
{{HTTPStatus(206, "206 Partial Content")}}
-
This response code is used when the {{HTTPHeader("Range")}} header is sent from the client to request only part of a resource.
-
{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}})
-
Conveys information about multiple resources, for situations where multiple status codes might be appropriate.
-
{{HTTPStatus(208, "208 Already Reported")}} ({{Glossary("WebDAV")}})
-
Used inside a <dav:propstat> response element to avoid repeatedly enumerating the internal members of multiple bindings to the same collection.
-
{{HTTPStatus(226, "226 IM Used")}} (HTTP Delta encoding)
-
The server has fulfilled a GET request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance.
-
- -

Redirection messages

- -
-
{{HTTPStatus(300, "300 Multiple Choice")}}
-
The request has more than one possible response. The user-agent or user should choose one of them. (There is no standardized way of choosing one of the responses, but HTML links to the possibilities are recommended so the user can pick.)
-
{{HTTPStatus(301, "301 Moved Permanently")}}
-
The URL of the requested resource has been changed permanently. The new URL is given in the response.
-
{{HTTPStatus(302, "302 Found")}}
-
This response code means that the URI of requested resource has been changed temporarily. Further changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.
-
{{HTTPStatus(303, "303 See Other")}}
-
The server sent this response to direct the client to get the requested resource at another URI with a GET request.
-
{{HTTPStatus(304, "304 Not Modified")}}
-
This is used for caching purposes. It tells the client that the response has not been modified, so the client can continue to use the same cached version of the response.
-
305 Use Proxy {{deprecated_inline}}
-
Defined in a previous version of the HTTP specification to indicate that a requested response must be accessed by a proxy. It has been deprecated due to security concerns regarding in-band configuration of a proxy.
-
306 unused
-
This response code is no longer used; it is just reserved. It was used in a previous version of the HTTP/1.1 specification.
-
{{HTTPStatus(307, "307 Temporary Redirect")}}
-
The server sends this response to direct the client to get the requested resource at another URI with same method that was used in the prior request. This has the same semantics as the 302 Found HTTP response code, with the exception that the user agent must not change the HTTP method used: If a POST was used in the first request, a POST must be used in the second request.
-
{{HTTPStatus(308, "308 Permanent Redirect")}}
-
This means that the resource is now permanently located at another URI, specified by the Location: HTTP Response header. This has the same semantics as the 301 Moved Permanently HTTP response code, with the exception that the user agent must not change the HTTP method used: If a POST was used in the first request, a POST must be used in the second request.
-
- -

Client error responses

- -
-
{{HTTPStatus(400, "400 Bad Request")}}
-
The server could not understand the request due to invalid syntax.
-
{{HTTPStatus(401, "401 Unauthorized")}}
-
Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response.
-
{{HTTPStatus(402, "402 Payment Required")}} {{experimental_inline}}
-
This response code is reserved for future use. The initial aim for creating this code was using it for digital payment systems, however this status code is used very rarely and no standard convention exists.
-
{{HTTPStatus(403, "403 Forbidden")}}
-
The client does not have access rights to the content; that is, it is unauthorized, so the server is refusing to give the requested resource. Unlike 401, the client's identity is known to the server.
-
{{HTTPStatus(404, "404 Not Found")}}
-
The server can not find the requested resource. In the browser, this means the URL is not recognized. In an API, this can also mean that the endpoint is valid but the resource itself does not exist. Servers may also send this response instead of 403 to hide the existence of a resource from an unauthorized client. This response code is probably the most famous one due to its frequent occurrence on the web.
-
{{HTTPStatus(405, "405 Method Not Allowed")}}
-
The request method is known by the server but has been disabled and cannot be used. For example, an API may forbid DELETE-ing a resource. The two mandatory methods, GET and HEAD, must never be disabled and should not return this error code.
-
{{HTTPStatus(406, "406 Not Acceptable")}}
-
This response is sent when the web server, after performing server-driven content negotiation, doesn't find any content that conforms to the criteria given by the user agent.
-
{{HTTPStatus(407, "407 Proxy Authentication Required")}}
-
This is similar to 401 but authentication is needed to be done by a proxy.
-
{{HTTPStatus(408, "408 Request Timeout")}}
-
This response is sent on an idle connection by some servers, even without any previous request by the client. It means that the server would like to shut down this unused connection. This response is used much more since some browsers, like Chrome, Firefox 27+, or IE9, use HTTP pre-connection mechanisms to speed up surfing. Also note that some servers merely shut down the connection without sending this message.
-
{{HTTPStatus(409, "409 Conflict")}}
-
This response is sent when a request conflicts with the current state of the server.
-
{{HTTPStatus(410, "410 Gone")}}
-
This response is sent when the requested content has been permanently deleted from server, with no forwarding address. Clients are expected to remove their caches and links to the resource. The HTTP specification intends this status code to be used for "limited-time, promotional services". APIs should not feel compelled to indicate resources that have been deleted with this status code.
-
{{HTTPStatus(411, "411 Length Required")}}
-
Server rejected the request because the Content-Length header field is not defined and the server requires it.
-
{{HTTPStatus(412, "412 Precondition Failed")}}
-
The client has indicated preconditions in its headers which the server does not meet.
-
{{HTTPStatus(413, "413 Payload Too Large")}}
-
Request entity is larger than limits defined by server; the server might close the connection or return an Retry-After header field.
-
{{HTTPStatus(414, "414 URI Too Long")}}
-
The URI requested by the client is longer than the server is willing to interpret.
-
{{HTTPStatus(415, "415 Unsupported Media Type")}}
-
The media format of the requested data is not supported by the server, so the server is rejecting the request.
-
{{HTTPStatus(416, "416 Range Not Satisfiable")}}
-
The range specified by the Range header field in the request can't be fulfilled; it's possible that the range is outside the size of the target URI's data.
-
{{HTTPStatus(417, "417 Expectation Failed")}}
-
This response code means the expectation indicated by the Expect request header field can't be met by the server.
-
{{HTTPStatus(418, "418 I'm a teapot")}}
-
The server refuses the attempt to brew coffee with a teapot.
-
{{HTTPStatus(421, "421 Misdirected Request")}}
-
The request was directed at a server that is not able to produce a response. This can be sent by a server that is not configured to produce responses for the combination of scheme and authority that are included in the request URI.
-
{{HTTPStatus(422, "422 Unprocessable Entity")}} ({{Glossary("WebDAV")}})
-
The request was well-formed but was unable to be followed due to semantic errors.
-
{{HTTPStatus(423, "423 Locked")}} ({{Glossary("WebDAV")}})
-
The resource that is being accessed is locked.
-
{{HTTPStatus(424, "424 Failed Dependency")}} ({{Glossary("WebDAV")}})
-
The request failed due to failure of a previous request.
-
{{HTTPStatus(425, "425 Too Early")}}
-
Indicates that the server is unwilling to risk processing a request that might be replayed.
-
{{HTTPStatus(426, "426 Upgrade Required")}}
-
The server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. The server sends an {{HTTPHeader("Upgrade")}} header in a 426 response to indicate the required protocol(s).
-
{{HTTPStatus(428, "428 Precondition Required")}}
-
The origin server requires the request to be conditional. This response is intended to prevent the 'lost update' problem, where a client GETs a resource's state, modifies it, and PUTs it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.
-
{{HTTPStatus(429, "429 Too Many Requests")}}
-
The user has sent too many requests in a given amount of time ("rate limiting").
-
{{HTTPStatus(431, "431 Request Header Fields Too Large")}}
-
The server is unwilling to process the request because its header fields are too large. The request may be resubmitted after reducing the size of the request header fields.
-
{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}
-
The user-agent requested a resource that cannot legally be provided, such as a web page censored by a government.
-
- -

Server error responses

- -
-
{{HTTPStatus(500, "500 Internal Server Error")}}
-
The server has encountered a situation it doesn't know how to handle.
-
{{HTTPStatus(501, "501 Not Implemented")}}
-
The request method is not supported by the server and cannot be handled. The only methods that servers are required to support (and therefore that must not return this code) are GET and HEAD.
-
{{HTTPStatus(502, "502 Bad Gateway")}}
-
This error response means that the server, while working as a gateway to get a response needed to handle the request, got an invalid response.
-
{{HTTPStatus(503, "503 Service Unavailable")}}
-
The server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded. Note that together with this response, a user-friendly page explaining the problem should be sent. This responses should be used for temporary conditions and the Retry-After: HTTP header should, if possible, contain the estimated time before the recovery of the service. The webmaster must also take care about the caching-related headers that are sent along with this response, as these temporary condition responses should usually not be cached.
-
{{HTTPStatus(504, "504 Gateway Timeout")}}
-
This error response is given when the server is acting as a gateway and cannot get a response in time.
-
{{HTTPStatus(505, "505 HTTP Version Not Supported")}}
-
The HTTP version used in the request is not supported by the server.
-
{{HTTPStatus(506, "506 Variant Also Negotiates")}}
-
The server has an internal configuration error: the chosen variant resource is configured to engage in transparent content negotiation itself, and is therefore not a proper end point in the negotiation process.
-
{{HTTPStatus(507, "507 Insufficient Storage")}} ({{Glossary("WebDAV")}})
-
The method could not be performed on the resource because the server is unable to store the representation needed to successfully complete the request.
-
{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})
-
The server detected an infinite loop while processing the request.
-
{{HTTPStatus(510, "510 Not Extended")}}
-
Further extensions to the request are required for the server to fulfil it.
-
{{HTTPStatus(511, "511 Network Authentication Required")}}
-
The 511 status code indicates that the client needs to authenticate to gain network access.
-
- -

Browser compatibility

- - - -

{{Compat("http.status")}}

- -

See also

- - diff --git a/files/bn/web/index.html b/files/bn/web/index.html deleted file mode 100644 index bccddbc99a..0000000000 --- a/files/bn/web/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: ডেভেলপারদের জন্য ওয়েব প্রযুক্তি -slug: Web -tags: - - Landing - - NeedsTranslation - - TopicStub - - Web -translation_of: Web ---- -

উন্মুক্ত বা ওপেন ওয়েব ডেভেলপারদের অসাধারণ সকল সুযোগ-সুবিধা প্রদান করছে। এইসকল প্রযুক্তির সম্পূর্ণ সুবিধা আদায় করে নিতে হলে আপনাকে অবশ্যই এদের সম্পর্কে জানতে হবে। নিচে বিভিন্ন ওয়েব প্রযুক্তি সম্পর্কে আমাদের লেখা আর্টিকেলগুলোর লিংক পাওয়া যাবে । 

- -
-
-

ওয়েব প্রযুক্তি

- -

প্রারম্ভিক

- -
-
HTML
-
হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ হল ওয়েব পেজের মূল ভাষা, যার মাধ্যমে ওয়েব কন্টেন্টের বর্ণনা এবং নির্ধারণ করা হয়।
-
CSS
-
ক্যাসকেডিং স্টাইল শিট ওয়েব কন্টেন্টের ডিজাইন তৈরীতে ব্যবহার করা হয় । 
-
- -

স্ক্রিপ্টিং

- -
-
JavaScript
-
JavaScript হল একটা প্রোগ্রামিং ল্যাঙ্গুয়েজ যেটা ব্রাউজার এর মধ্যে চলে ,যেটা অত্যাধুনিক ইউজার ইন্টারঅ্যাক্টিভ ওয়েবসাইট ও অ্যাপ্লিকেশান তৈরি তে ব্যাবহৃত হয়।
-
Web APIs
-
Reference material for each of the individual APIs that comprise the Web's powerful scriptability, including the DOM and all of the related APIs and interfaces you can use to build Web content and apps. -
    -
  • Web API interface reference - সব ইন্টারফেস, alphabetically আয়োজন করা।
    • -
  • WebAPI page যন্ত্র প্রবেশগম্যতা apis আর অন্য apis উপকারি এ্যাপ্লিকেশন-এর জন্য সাজায়
    • -
-
-
- -

গ্রাফিক্স

- -
-
SVG
-
আকার পরিবর্তনযোগ্য ভেক্টর গ্রাফিক্স, আপনি তাদের তারা টানা করছি, যা এ নির্বিশেষে আকার সহজে আকার পরিবর্তন করার অনুমতি দেয় ,যাতে ভেক্টর এবং আকার সেট হিসাবে ইমেজ বর্ণনা দেওয়া.
-
WebGL
-
WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML {{HTMLElement("canvas")}} elements
-
- -

অন্যান্য

- -
-
MathML
-
গাণিতিক markup ভাষা এটা সম্ভব জটিল গাণিতিক সমীকরণ আর বাক্যপ্রকরণ প্রদর্শন করতে বানায়।
-
-
- -
-

ধরণ অনুযায়ী ডকুমেন্টেশন

- -
-
 ওয়েব উন্নতিকারক নির্দেশিকা
-
ওয়েব ডেভেলাপার গাইড উপকারি how-to অভ্যন্তরস্থ বস্তু আপনি ওয়েব প্রযুক্তি আসলে ব্যবহার করেন করতে যা আপনি চান বা করতে দরকার হতে সাহায্য করতে দেয়।
-
ওয়েব উন্নতিকারকদের জন্য TUTORIALS
-
tutorials-এর আপনাকে নিতে একটি লিষ্ট apis, প্রযুক্তি, বা চওড়া বিষয় এলাকা শেখা মধ্য দিয়ে ধাপে ধাপে।
-
References
-
এই পাতা mdn-এর ওপরে সব বরাত তথ্যে সংযোগ প্রস্তাব করবে, কিন্তু এখনকার জন্য প্রযুক্তি-এর ব্যবহার একটা বাঁদিকের সেকশানে সংযোগ করবে
-
- -

অন্যান্য টপিক

- -
-
Developing Web applications
-
ওয়েব এ্যাপ্লিকেশন ডেভেলাপার-এর জন্য documentation; ওয়েব অ্যাপ্লিকেশন হচ্ছে সত্য write-once, deploy যেকোথাও এ্যাপস মোবাইল, ডেস্কটপ, আর ফায়ারফক্স os জন্য।
-
Accessibility
-
ওয়েব ‌উন্নয়নে accessibility সক্ষম করা যেহেতু অনেক মানুষ as সম্ভব ওয়েব সাইট ব্যবহার করতে, এমনকি যখন ওগুলো মানুষকে-এর সামর্থ্য কিছু পথে সীমাবদ্ধ করা হয় বুঝায়। এখানে আমরা সন্তুষ্ট হতে সহজগম্য তৈরী করতে তথ্য দেই।
-
-
-
- -

সব দেখুন...

- -

 

diff --git a/files/bn/web/javascript/a_re-introduction_to_javascript/index.html b/files/bn/web/javascript/a_re-introduction_to_javascript/index.html deleted file mode 100644 index b8d2499b2a..0000000000 --- a/files/bn/web/javascript/a_re-introduction_to_javascript/index.html +++ /dev/null @@ -1,968 +0,0 @@ ---- -title: নতুন করে শিখি জাভাস্ক্রিপ্ট (জাভাস্ক্রিপ্ট টিউটোরিয়াল) -slug: Web/JavaScript/A_re-introduction_to_JavaScript -tags: - - জাভা স্ক্রিপ্ট - - জাভাস্ক্রিপ্ট - - জাভাস্ক্রিপ্ট টিউটোরিয়াল -translation_of: Web/JavaScript/A_re-introduction_to_JavaScript ---- -
{{jsSidebar}}
- -

ভূমিকা

- -

জাভাস্ক্রিপ্ট নিয়ে কেন নতুন করে ভূমিকা দেওয়ার দরকার পরল? কারণ দুনিয়ায় সবচেয়ে ভুল বোঝা প্রোগ্রামিং ভাষা হিসেবে জাভাস্ক্রিপ্টের ব্যাপক খ্যাতি (!) আছে। আমাদের অনেকেই সি/জাভা/পিএইচপি বা অন্য কোন ভাষায় কোডে মোটামোটি ভালভাবে শিখে ফেলার পরে জাভাস্ক্রিপ্ট শিখতে গিয়ে দেখি বাহ, এটা তো সি/জাভা'র মতই! তারপর ভালমত না শিখেই কাজ করতে যাই জাভাস্ক্রিপ্টে... প্রত্যাশা মত ফলাফল আসে না আর এরপর গলা খুলে জাভাস্ক্রিপ্টের গালমন্দ করি। অথচ জাভাস্ক্রিপ্ট অনেক শক্তিশালী - যেটা অনেক সময় ভাষাটির সহজ-সরল চেহারা দেখে বুঝে ওঠা হয় না। ২০০৫ এ আমরা দেখেছি অনেক নামী-দামী জাভাস্ক্রিপ্ট এপ্লিকেশন বাজারে এসেছে - কাজেই জাভাস্ক্রিপ্টে গভীর জ্ঞান রাখা যে যেকোন ডেভেলপারের জন্য আবশ্যকীয় সেটা না বললেও চলবে!

- -

ভাষাটির ইতিহাস দিয়ে শুরু করা যাক। ১৯৯৫ সালে নেটস্কেপের প্রকৌশলী Brendan Eich জাভাস্ক্রিপ্ট তৈরি করেন, যেটা মুক্তি পায় ১৯৯৬ সালের শুরুর দিকে নেটস্কেপ ২ (ব্রাউজার) এর সাথে। এর নাম দেয়া হয়েছিল LiveScript, কিন্তু মার্কেটিং কৌশলের গ্যাড়াকলে পড়ে দুর্ভাগ্যজনত এর নাম জাভাস্ক্রিপ্ট হয়ে যায়, সান মাইক্রোসিস্টেম এর জাভা ল্যাংগুয়েজের জনপ্রিয়তাকে পুঁজি করার জন্য। জাভা আর জাভাস্ক্রিপ্টের মাঝে তেমন কোন মিল না থাকা সত্ত্বেও সেই থেকে তাই জাভাস্ক্রিপ্ট নামটা নিয়ে বিভ্রান্তি থেকে গেছে।

- -

মাইক্রোসফট এই প্রোগ্রামিং ভাষার সাথে প্রায় মিলে যায় এরকম একটি ল্যাংগুয়েজ JScript নাম দিয়ে প্রায় ৩ মাস পর ইন্টারনেট এক্সপ্লোরারের সাথে বাজারে নিয়ে আসে। এদিকে নেটস্কেপ Ecma International (স্ট্যান্ডার্ড নির্ধারণ করে এরকম একটি ইউরোপীয়ান সংস্থা) এর কাছে ল্যাংগুয়েজটি উপস্থাপন করে - যার ফলাফল ১৯৯৭ সালে ECMAScript এর প্রথম সংস্করণ হিসেবে বাজারে আসে। ১৯৯৯ সালে এই স্ট্যান্ডার্ডটি আরো উন্নত হয় ECMAScript সংস্করণ ৩ হিসেবে - আর সেই থেকে ভাষাটির তেমন কোন বড় পরিবর্তন হয়নি। চতুর্থ সংস্করণটি ভেস্তে যায়, ভাষাটির জটিলতা নিয়ে মতবিরোধের ফলাফল হিসেবে। তবে এই চতুর্থ সংস্করণের অনেক অংশবিশেষ কে ভিত্তি হিসেবে ধরে ২০০৯ সালে নতুন ECMAScript এর পঞ্চম সংস্করণ প্রকাশ করা হয় এবং এর ৬ষ্ঠ মূখ্য সংস্করণ বের হয় ২০১৫ সালের জুনে। 

- -

Specification মোটামোটি অপরিবর্তিত থাকাটা আসলে ডেভেলপারদের জন্য খুশির খবর, কারণ অনেকেই এর মাঝে ভাষাটির সাথে খাপ খাইয়ে নিতে পেরেছেন। আমি বিশেষভাবে, ৩য় সংস্করণের বিশেষ বিশেষ অংশ নিয়ে আলোচনা করব এখন, আর সবার পরিচিত নাম জাভাস্ক্রিপ্ট ব্যাবহার করব।

- -

অন্য সব প্রোগ্রামিং ভাষার সাথে জাভাস্ক্রিপ্টের বড় অমিল হল - এতে কোন ইনপুট/আউটপুটের বালাই নেই। একটা হোস্ট এনভায়রনমেন্টে চলবে ধরে নিয়েই জাভাস্ক্রিপ্ট ডিজাইন করা হয়েছে - সবচেয়ে পরিচিত হোস্ট এনভায়রনমেন্ট হচ্ছে ব্রাউজার। হোস্ট এনভায়রনমেন্টের দায়িত্ব হচ্ছে জাভাস্ক্রিপ্ট কীভাবে বাইরের জগতের সাথে ডেটা আদান প্রদান বা যোগাযোগ করবে সেটার আয়োজন করা। ব্রাউজার ছাড়াও Adobe Acrobat, Photoshop, Yahoo!'র Widget engine এমনকি সার্ভারে-চলে এরকম পরিবেশেও জাভাস্ক্রিপ্ট ইন্টারপ্রেটারের ব্যবহার দেখা যায়।

- -

হালকা পাতলা ধারণা

- -

জাভাস্ক্রিপ্ট একটি ওবজেক্ট-ওরিয়েন্টেড, ডায়নামিক প্রোগ্রামিং ভাষা। এতে আছে ডেটা টাইপ, অপারেটর, গুরুত্বপূর্ণ কিছু অবজেক্ট (যেগুলো সব সময় আপনি ব্যবহার করতে পারবেন) আর ফাংশন বা মেথড। জাভা আর সি প্রোগ্রামিং ভাষা থেকে বেশ কিছু সিন্ট্যাক্স ধার করে নেওয়ায় যারা এসব ভাষায় পারদর্শী তাদের জন্য সুখবর আরকি! তবে অন্য অনেক ভাষার সাথে জাভাস্ক্রিপ্ট এর একটা বড় পার্থক্য হল এতে কোন ক্লাস (class) নেই, বরং "প্রটোটাইপ" নামের নতুন এক ধারণা কে কাজে লাগিয়ে ক্লাস এর কাজ কর্ম করা হয়ে থাকে। আরো একটা বড় পার্থক্য হল জাভাস্ক্রিপ্ট এ যেকোন "ফাংশন" আসলে একেককটি অবজেক্ট! ফাংশনে আপনি কোড রাখতে পারবেন, আরো পারবেন অবজেক্টের মত কোডের এক জায়গা থেকে আরেক জায়গায় পাস (pass) করাতে।

- -

চলুন শুরু করি যেকোন ভাষার মৌলিক উপাদান নিয়ে: type মানে কী কী রকমের ডেটা থাকতে পারে। জাভাস্ক্রিপ্টে যেসব টাইপ আছে সেগুলো হলঃ

- - - -

... আরও আছে বিশেষ দু'টি টাইপ - "Undefined" আর "Null". আর আছে Arrays, যেটি আসলে অবজেক্টের-ই একটি বিশেষ ধরণ। আছে তারিখ নিয়ে কাজকারবারের জন্যে Dates, আছে Regular Expressions - এগুলোও অবজেক্ট। আর আগেই তো বলা হয়েছে জাভাস্ক্রিপ্টে ফাংশন-ও আসলে অবজেক্ট। টাইপ হচ্ছে তাই:

- -
    -
  • সংখ্যা (Number)
    • -
  • স্ট্রিং (String)
    • -
  • বুলিয়ান
    • -
  • অবজেক্ট -
      -
    • ফাংশন
      • -
    • Array
      • -
    • Date
      • -
    • RegExp
      • -
    -
    • -
  • Null (নাল)
    • -
  • Undefined (অসংজ্ঞায়িত)
    • -
- -

ওহ আর বলতে প্রায় ভুলেই গিয়েছিলাম, ত্রুটি ধরার জন্যে কিছু Error টাইপও আছে।

- -

সংখ্যা বা Numbers

- -

সংখ্যা টাইপ জাভাস্ক্রিপ্ট এ "double-precision 64-bit format IEEE 754 values", নির্দেশনা অনুসরণ করে। ফলস্বরূপ কিছু বিশেষ ঘটনা ঘটতে পারে। জাভাস্ক্রিপ্টে কোন "Integer" ধরণের টাইপ নাই, তাই অংক কষার সময় মাঝে মাঝে একটু সচেতন থাকবেন C অথবা জাভা ডেভেলপাররা। যেমন ধরুনঃ

- -
0.1 + 0.2 == 0.30000000000000004
-
- -

বাস্তবে integer গুলোকে ৩২-বিট ইন্টেজার ধরে নিয়ে কাজ করে জাভাস্ক্রিপ্ট (আর সংরকষণ ও একই ভাবে কিছু ব্রাউজারে করা হয়ে থাকে)। Bit-wise অপারেশন করার সময় এটা মাথায় রাখতে হবে। বিস্তারিত দেখতে পারেন জাভাস্ক্রিপ্টের পূর্ণাঙ্গ Number রেফারেন্স এ।

- -

অংক কষার জন্য স্ট্যান্ডার্ড সব অপারেটর জাভাস্ক্রিপ্টে আছে, যোগ বিয়োগ, ভাগশেষ (modulus) ইত্যাদি নিয়ে কাজ করা যায়। বলতে ভুলে গেছি Math নামে একটি গ্লোবাল অবজেক্ট আছে গণিত নিয়ে বিশদভাবে কাজকারবার করার জন্যেঃ

- -
Math.sin(3.5);
-var d = Math.PI * r * r;
-
- -

বিল্ট-ইন parseInt() ফাংশন ব্যবহার করে কোন string কে integer এ রূপান্তর করতে পারবেন। আর ফাংশনের দ্বিতীয় প্যারামিটার হিসেবে রূপান্তরের ভিত্তি (base) দিতে পারবেন, যদিও এই দ্বিতীয় প্যারামিটার টা ঐচ্ছিক এটা অবশ্যই দেওয়া উচিতঃ

- -
> parseInt("123", 10)
-123
-> parseInt("010", 10)
-10
-
- -

২য় প্যারামিটারে base না পাঠালে অপ্রত্যাশিত ফলাফল আসতে পারেঃ

- -
> parseInt("010")
-8
-
- -

এমন ফল এসেছে কারণ শুরুতে 0 দেখে parseInt ফাংশনটা ধরে নিয়েছে ১ম প্যারামিটারে পাঠানো সংখ্যাটা অকটাল ভিত্তিতে আছে।

- -

বাইনারী সংখ্যাকে দশমিক ভিত্তিতে নিয়ে আসা একদম সোজাঃ

- -
> parseInt("11", 2)
-3
-
- -

একইভাবে parseFloat() নামেও বিল্ট-ইন ফাংশন আছে যেটা দিয়ে ভগ্নাংশ (floating point number) এ রূপান্তর (parse) করা যায়। তবে parseInt() এর সাথে এর একট অমিল - এটা সবসময় দশমিক ভিত্তিতে আছে ধরে নিয়ে কাজকর্ম করে।

- -

"+" অপারেটর ব্যবহার করেও কোন মান কে সংখ্যায় রূপান্তর করা যায়। এখানে "+" ইউনারী অপারেটর হিসেবে কাজ করেঃ

- -
> + "42"
-42
-
- -

তবে আপনি যদি সংখ্যা নয়, এমন কোন String কে পার্স করতে যান তাহলে বিশেষ এক ধরণের মান ফাংশনের return ভ্যালু হিসেবে পাওয়া যায় -  NaN ("Not a Number" এর সংক্ষিপ্ত রূপ):

- -
> parseInt("hello", 10)
-NaN
-
- -

গাণিতিক কোন অপারেটর এর কোন এক NaN পাশে থাকলেই ফলাফাল হিসেবে NaN পাওয়া যাবেঃ

- -
> NaN + 5
-NaN
-
- -

বিল্ট-ইন isNaN() ফাংশন ব্যবহার করে বের করতে পারবেন কোন কিছু NaN কিনাঃ

- -
> isNaN(NaN)
-true
-
- -

জাভাস্ক্রিপ্টে অসীম মান নিয়ে কাজ করার জন্য আছে বিশেষ মান Infinity এবং -Infinity:

- -
> 1 / 0
-Infinity
-> -1 / 0
--Infinity
-
- -

কোন মান Infinity, -Infinity অথবা NaN কিনা টেস্ট করতে পারবনে বিল্ট-ইন isFinite() ফাংশন দিয়েঃ

- -
> isFinite(1/0)
-false
-> isFinite(-Infinity)
-false
-> isFinite(NaN)
-false
-
- -
খেয়াল করুনঃ parseInt() আর parseFloat() ফাংশন দুইটি আপনার দেয়া প্যারামিটারকে ততক্ষণ পার্স করতে থাকবে যতক্ষণ না এটি প্যারামিটারে এমন কোন অক্ষর (character) পাচ্ছে যেটা কিনা অবৈধ (মানে যে ভিত্তিতে বা base থেকে রূপান্তর করা হচ্ছে সেই ভিত্তিতে এই অক্ষরটি থাকতে পারে না)। ফাংশনদুটি এই প্রথম অবৈধ অক্ষর এর আগ পর্যন্ত পার্স করে রিটার্ন করবে। তবে, "+" অপারেটর টি অন্যরকম, প্যারামিটারে কোন অবৈধ ক্যারেকটার থাকলে এটা সোজাসাপটা NaN রিটার্ন করে। ব্যাপারটা ভাল মত বুঝার জন্যে "10.2abc" এটাকে দুইটা ফাংশন দিয়ে পার্স করার কোড লিখে দেখুন!
- -

স্ট্রিং

- -

জাভাস্ক্রিপ্টে স্ট্রিং হল অন্য সব ভাষার মত পরপর অনেকগুলো ক্যারেকটার (character) - আরো ভালো মত বলতে গেলে ইউনিকোড ক্যারেক্টার। প্রতিটা ক্যারেকটারকে ১৬-বিট নাম্বার দিয়ে প্রকাশ করা যায়। তাই যাদের এপ্লিকেশনে বিভিন্ন ভাষাভাষী দেশের জন্যে সাপোর্ট দেয়া লাগবে তারা তালিয়া বাজাতে পারেন!

- -

আপনার যদি কখনো একটা মাত্র ক্যারেকটার ব্যবহার করার প্রয়োজন পরে, তাহলে ১ লেংথ (length) এর স্ট্রিং ব্যবহার করুন যেহেতু ক্যারেকটার বলে কোন টাইপ জাভাস্ক্রিপ্টে নাই।

- -

আগেই বলেছি জাভাস্ক্রিপ্টে সব স্ট্রিং ই একেক্টা অব্জেক্ট। কয়টা ক্যারেকটার আছে স্ট্রিং এ জানতে হলে length প্রোপার্টি (অবজেক্ট এর ফাংশন) ব্যবহার করুন।

- -
> "hello".length
-5
-
- -

এই প্রথম আমরা কোন অব্জেক্ট ব্যবহারের কোড দেখলাম! স্ট্রিং অবজেক্ট এর আরো অনেক ফাংশন ও কিন্তু আছেঃ

- -
> "hello".charAt(0)
-h
-> "hello, world".replace("hello", "goodbye")
-goodbye, world
-> "hello".toUpperCase()
-HELLO
-
- -

অন্যান্য টাইপ

- -

জাভাস্ক্রিপ্টের একটা অনন্য বৈশিষ্ট্য হল এটা null আর undefined এ দুটি জিনিস এক না। Null হচ্ছে 'অবজেক্ট' টাইপের এক ধরণের অবজেক্ট যেটা কোডার স্বেচ্ছায় কোন ভ্যারিয়েবলে এসাইন (asign) করেছেন। আর undefined হল 'undefined' টাইপের একটা অবজেক্ট - কোন ভ্যারিয়েবল যদি কোন ভ্যালু দিয়ে ইনিশিয়ালাইজ (initialize) করা না হয় (সোজা বাংলায় ভ্যারিয়েবল ডিক্লেয়ার করার সময় বা পরে যদি তাতে "=" চিহ্ন দিয়ে কোন মান এ্যাসাইন না করা হয়) তাহলে সেটা undefined অবস্থায় থাকে। ভ্যারিয়েবল নিয়ে আমরা পরে আলোচনা করব। জাভাস্ক্রিপ্টে ভ্যারিয়েবলে কোন ভ্যালু না দিয়েই ভ্যারিয়েবলটি তৈরি করা যায় - তখন তার ভ্যালু হিসেবে থাকে এই 'undefined'।

- -

জাভাস্ক্রিপ্টে বুলিয়ান বলে একটা টাইপ আছে, যার মান হতে পারে শুধুমাত্র true অথবা false (এই দুইটাই কি-ওয়ার্ড)। নিচের নিয়ম অনুযায়ী যেকোন ভ্যালু কে বুলিয়ানে কনভার্ট করা যায়ঃ

- -
    -
  1. false, 0, শূন্য স্ট্রিং (""), NaN, null, এবং undefined এগুলাকে বুলিয়ানে কনভার্ট করলে false পাওয়া যাবে।
    2. -
  2. অন্য যেকোন টাইপের ভ্যলু বুলিয়ানে কনভার্ট করলে true পাওয়া যায়।
    3. -
- -

Boolean() ফাংশন ব্যবহার করে আপনি এই কনভার্সন করেই ছাড়তে পারেনঃ

- -
> Boolean("")
-false
-> Boolean(234)
-true
-
- -

কিন্তু আমাদের এভাবে explicitly কনভার্ট করতে হবে না, কারণ জাভাস্ক্রিপ্ট যখন কোথাও বুলিয়ান প্রত্যাশা করে কিন্তু অন্য কোন টাইপ পায়, তখন সে চুপিচুপি এই কনভার্ট টি করে নেয়।

- -

অন্য ভাষার মত বুলিয়ান অপারেটর যেমন && (লজ্যিকাল AND), , || (লজ্যিকাল or), আর ! (লজ্যিকাল not) আছে।

- -

ভ্যারিয়েবল (চলক?!)

- -

var কী-ওয়ার্ড ব্যবহার করে নতুন কোন ভ্যারিয়েবল তৈরি করুনঃ

- -
var a;
-var name = "simon";
-
- -

আগেই বলেছি, ভ্যারিয়েবলে কোন ভ্যালু এসাইন না করলে সেটা undefined টাইপ হয়ে বসে থাকে।

- -

গুরুত্বপূর্ণঃ অন্যান্য প্রোগ্রামিং ভাষার সাথে বড় একটা পার্থক্য হল জাভাস্ক্রিপ্ট কোডে ব্লক লেভেলে ভ্যারিয়েবলের স্কোপ বলে কিছু নেই। ভ্যারিয়েবল টা যেই ফাংশনে আছে, পুরা ফাংশনে এই ভ্যারিয়েবলের একটাই স্কোপ থাকে। তাই যদি কোন if বা লুপের মধ্যে কোন ভ্যারিয়েবল তৈরি করেন তাহলে পুরা ফাংশনেই সেটার স্কোপ থাকবে।

- -

অপারেটর

- -

জাভাস্ক্রিপ্টের নিউমেরিক (numeric) অপারেটরগুলো হল +, -, *, / আর % - মানে কিনা ভাগশেষ বের করার অপারেটর।  = ব্যবহার করে ভ্যারিয়েবলে ভ্যালু দেয়া হয়। জটিল এসাইনমেন্ট অপারেটরও আছে যেমন += আর -=। এই জটিল অপারেটরগুলোকে ভেঙ্গে এইভাবে কল্পনা করতে পারেনঃ x = x অপারেটর y.

- -
x += 5
-x = x + 5
-
- -

ভ্যারিয়েবলের ভ্যালু এক বাড়াতে বা কমাতে যথাক্রমে ++ আর -- অপারেটর ব্যবহার করতে পারেন। সি/জাভার মত এগুলোর প্রিফিক্স/পোস্টফিক্স দুটো ফর্ম-ই আছে।

- -

আর আমরা তো আগেই জেনেছি + অপারেটর দিয়ে স্ট্রিং জোড়া লাগানো যায় (concatenation)

- -
> "hello" + " world"
-hello world
-
- -

আপনি যদি স্ট্রিং কে অন্য কোন সংখ্যা (বা অন্য কোন মান) এর সাথে যোগ করতে যান তাহলে সবকিছু প্রথমে স্ট্রিং এ কনভার্ট করে নেওয়া হয়ঃ

- -
> "3" + 4 + 5
-345
-> 3 + 4 + "5"
-75
-
- -

কোন মানকে স্ট্রিং এ কনভার্ট করার তাই আরেকটা চোরাই বুদ্ধি হচ্ছে ঐ মানের সাথে শূন্য স্ট্রিং ("")যোগ করা।

- -

তুলনা (Compare) করার জন্যে জাভাস্ক্রিপ্টের কাছে আছে <, >, <= আর >= অপারেটর। এগুলো সংখ্যা আর স্ট্রিং দুইটার বেলাতেই কাজ করে। তবে == অপারেটর ব্যবহার করে দুইটা মান সমান কিনা সেটা চেক করাটা একটু অপ্রত্যাশিত হতে পারে, কারণ == অপারেটরের দুই পাশে দুই ধরণের টাইপের ভ্যালু দিলে জাভাস্ক্রিপ্ট প্রয়োজন মত কনভার্ট করে নেয়ঃ

- -
> "dog" == "dog"
-true
-> 1 == true
-true
-
- -

জাভাস্ক্রিপ্টের এই মাতব্বরী বন্ধ করতে চাইলে === অপারেটর ব্যবহার করুনঃ

- -
> 1 === true
-false
-> true === true
-true
-
- -

আপনি হয়ত ভাবছেন != আর !== অপারেটেরের কথা - হ্যা এগুলো তো আছেই।

- -

জাভাস্ক্রিপ্ট দিয়ে বিট-লেভেলে (bitwise) অপারেশন ও করতে পারবেন।

- -

কন্ট্রোল স্ট্রাকচার

- -

C বা জাভাতে ব্যবহার করে আসা if অথবা else জাভাস্ক্রিপ্টেও একইভাবে ব্যবহার করা যাবেঃ

- -
var name = "kittens";
-if (name == "puppies") {
-  name += "!";
-} else if (name == "kittens") {
-  name += "!!";
-} else {
-  name = "!" + name;
-}
-name == "kittens!!"
-
- -

জাভাস্ক্রিপ্টে while আর do-while লুপ আছে, হুবুহু সি-জাভার মত। যদি চান যে লুপটি অন্ততঃ একবার চালাতেই হবে তাহলে do-while ব্যবহার করুন।

- -
while (true) {
-  // an infinite loop!
-}
-
-var input;
-do {
-  input = get_input();
-} while (inputIsNotValid(input))
-
- -

সি-জাভার মত for লুপ ব্যবহার করে এক লাইনেই লুপ কন্ট্রোল করতে পারেনঃ

- -
for (var i = 0; i < 5; i++) {
-  // Will execute 5 times
-}
-
- -

শর্ট-কাটে লজিক প্রয়োগ করতে পারেন && আর || অপারেটরের একটি অন্যরকম ব্যবহার করে। অপারেটর গুলোর ২য় অপারেন্ড কার্যকর (execute) হবে কিনা নির্ভর করে ১ম অপারেন্ডের ওপরঃ

- -
var name = o && o.getName();
-
- -

অথবা ডিফল্ট মান বসানোর জন্যঃ

- -
var name = otherName || "default";
-
- -

কন্ডিশনাল এক্সপ্রেশনের জন্য সি-জাভার মত টার্নারী অপারেটর (যেগুলোর অপারেন্ড ৩টি) ব্যবহার করতে পারেনঃ

- -
var allowed = (age > 18) ? "yes" : "no";
-
- -

একাধিক ব্রাঞ্চের কন্ট্রোল লজিকের জন্যে switch ব্যবহার করতে পারেন। জাভাস্ক্রিপ্টের switch-case স্ট্রিং এর জন্যে কাজ করেঃ

- -
switch(action) {
-    case 'draw':
-        drawit();
-        break;
-    case 'eat':
-        eatit();
-        break;
-    default:
-        donothing();
-}
-
- -

break না ব্যবহার করলে পরের case এও আপনার কোডের কন্ট্রোল চলে যাবে - এরকম কোডিং সাধারণতঃ করা হয়না। তাই আপনি যদি break ব্যবহার না করেন তাহলে কমেন্টে লিখে রাখুন যাতে কনফিউশন তৈরি না হয়।

- -
switch(a) {
-    case 1: // fallthrough
-    case 2:
-        eatit();
-        break;
-    default:
-        donothing();
-}
-
- -

default ক্লজটি ঐচ্ছিক। আরেকটি মজার দিক হল switch আর case দু'জায়গাতেই আপনি এক্সপ্রেশন লিখতে পারেন। তুলনা করা হয় === অপারেটর ব্যবহার করেঃ

- -
switch(1 + 3) {
-    case 2 + 2:
-        yay();
-        break;
-    default:
-        neverhappens();
-}
-
- -

অবজেক্ট

- -

জাভাস্ক্রিপ্টে অবজেক্ট হচ্ছে এক কথায় name-value pair। নিচে যেগুলো পয়েন্ট করা হয়ছে সেগুলোর সাথে কোন পার্থক্য নেইঃ

- -
    -
  • Python এর dictionary
    • -
  • Perl আর ruby'র hash
    • -
  • C/C++ এর hashtable
    • -
  • জাভা'র HashMap
    • -
  • PHP'র associative array
    • -
- -

এই ডেটা-স্ট্রাকচারটা এত বেশি ব্যবহৃত হয় যে এটা সম্পর্কে নতুন করে বলার সুযোগ কম। যেহেতু জাভাস্ক্রিপ্টে সবকিছুই অবজেক্ট এটা আশা করা স্বাভাবিক যে জাভাস্ক্রিপ্ট প্রোগ্রামে অনেক বেশি হ্যাশটেবিল লুক-আপ হবে... আমরা বেঁচে গেছি কারণ অনেক দ্রুত এই লুক-আপ করা যায়!

- -

জাভাস্ক্রিপ্ট অবজেক্টের "name" হিসেবে স্ট্রিং ব্যবহার করতে হবে, আর "value" অংশে যা মন চায় ব্যবহার করতে পারবেন। তার মানে ভ্যালু হিসেবে অন্য অবজেক্ট ও রাখতে পারেন। এভাবে যত জটিল চান সেরকম অবজেক্ট-ই তৈরি করতে পারবেন।

- -

একটা শূণ্য অবজেক্ট ২ভাবে তৈরি করতে পারেনঃ

- -
var obj = new Object();
-
- -

আরঃ

- -
var obj = {};
-
- -

ওপরের দুইটা উপায় সমার্থক। নিচের পদ্ধটি-তিকে বলা হয় অবজেক্ট লিটারেল, আর এটি JSON সিন্ট্যাক্সের ও একটি অংশ। তাই নিচের পদ্ধটি-তি যত বেশি ব্যবহার করা যায় ভাল!

- -

অবজেক্ট তৈরি হয়ে যাওয়ার পর এর প্রোপার্টি (সম্পদ?!) দুইভাবে এক্সেস করতে পারবেনঃ

- -
obj.name = "Simon";
-var name = obj.name;
-
- -

এবং...

- -
obj["name"] = "Simon";
-var name = obj["name"];
-
- -

দুইটা পদ্ধতি-ই সমার্থক, তবে ২য় পদ্ধটিতে দেখুন, অবজেক্টের name স্ট্রিং হিসেবে দেওয়া হচ্ছে, মানে এই নামটি আমরা ভ্যারিয়েবলে রেখে রানটাইমে দিতে পারি! অবশ্য এই পদ্ধটিতি ব্যবহার করলে কিছু জাভাস্ক্রিপ্ট ইঞ্জিন আর মিনিফায়ার (কোড সংক্ষিপ্ত করে যেসব টুলস) কোড অপ্টিমাইজ করতে পারে না। আবার এই পদ্ধতি ব্যবহার করে সংরক্ষিত name সমূহ গেট-সেট করতে পারেনঃ

- -
obj.for = "Simon"; // Syntax error, because 'for' is a reserved word
-obj["for"] = "Simon"; // works fine
-
- -

আগেই দেখানো অবজেক্ট লিটেরাল সিন্ট্যাক্স ব্যবহার করে পুরো অবজেক্ট গোড়াতেই ইনিশিয়ালাইজ করে নিতে পারেনঃ

- -
var obj = {
-    name: "Carrot",
-    "for": "Max",
-    details: {
-        color: "orange",
-        size: 12
-    }
-}
-
- -

অবজেক্টের এট্রিবিউট এক্সেস একের-পর-এক (চেইন) করতে পারেনঃ

- -
> obj.details.color
-orange
-> obj["details"]["size"]
-12
-
- -

Array

- -

জাভাস্ক্রিপ্টের Array আসলে বিশেষ ধরণের অবজেক্ট - রেগুলার অবজেক্টের মতই array কাজ করে বেশিরভাগ সময়ে ( numeric প্রোপার্টি, মানে ০,১,২,... ইন্ডেক্সে থাকা প্রোপার্টি শুধুমাত্র [] সিন্ট্যাক্স দিয়েই এক্সেস করা যাবে)। সব array'র 'length" ম্যাজিক প্রোপার্টি আছে, যার মান হচ্ছেঃ (ওই array'র সর্বোচ্চ ইন্ডেক্স + ১)

- -

প্রাগৈতিহাসিক(!) নিয়মে array ব্যবহার-পদ্ধতিঃ

- -
> var a = new Array();
-> a[0] = "dog";
-> a[1] = "cat";
-> a[2] = "hen";
-> a.length
-3
-
- -

তবে স্মার্ট এপ্রোচ হচ্ছে array লিটেরাল ব্যবহার করাঃ

- -
> var a = ["dog", "cat", "hen"];
-> a.length
-3
-
- -

সাবধানঃ লিটের‍্যাল ব্যবহার করে সবশেষের প্রোপার্টির পর কমা রেখে দিলে ব্রাউজার-ভেদে বিভিন্ন অবস্থা তৈরি হতে পারে - তাই সর্বশেষ array element এর পর কমা রেখে দেওয়া চলবে না।

- -

খেয়াল করুনঃ array.length মানেই যে array তে কয়টা প্রোপার্টি আছে তা কিন্তু সবসময় ঠিক না। নিচের কোড দেখুনঃ

- -
> var a = ["dog", "cat", "hen"];
-> a[100] = "fox";
-> a.length
-101
-
- -

আবারো বলছিঃ length প্রোপার্টি হচ্ছে: (সবথেকে বড় ইন্ডেক্স + ১)

- -

আপনি যদি এমন কোন প্রোপার্টি নিয়ে কাজ করতে চান যেটির ইন্ডেক্স ভুল, তাহলে 'undefined' পাবেন মান হিসেবে।

- -
> typeof a[90]
-undefined
-
- -

ওপরে যা বলা হল তা মাথায় রেখে নিচের কোড দিয়ে array এর সব এলিমেন্ট নিয়ে কাজ করতে পারবেন (iteration):

- -
for (var i = 0; i < a.length; i++) {
-    // Do something with a[i]
-}
-
- -

তবে ওপরের কোডিং টা অত ভাল হল না, কারণ বারবার array.length প্রোপার্টি'র মান খুঁজতে হচ্ছে। নিচের কোড টা বেশি ভাল (কার্যকরী):

- -
for (var i = 0, len = a.length; i < len; i++) {
-    // Do something with a[i]
-}
-
- -

আর নিচেরটা হচ্ছে বস-লেভেলের কোডিং ;-)

- -
for (var i = 0, item; item = a[i++];) {
-    // Do something with item
-}
-
- -

খেয়াল করুনঃ লুপের দুই সেমিকোলনের মাঝের অংশ ভ্যারিয়েবল এসাইনমেন্ট আর false কিনা টেস্টিং দুই-ই করা হচ্ছে। এই লুপ ব্রেক করবে প্রথম "falsy" এলিমেন্ট (যেমন 'undefined') পাওয়া মাত্রই।

- -

কাজেই, যদি array'র কোন এলিমেন্ট "falsy" হওয়ার সম্ভাবনা থাকে, তাহলে ওপরের তথাকতিত "বস-লেভেল" কোডিং ব্যবহার করা যাবে না। যেমন, কোন array এলিমেন্ট এর মান false হিসেবে গণ্য হলেই (যেমন শূণ্য স্ট্রিং) পরের ভ্যালিড এলিমেন্ট ও কিন্তু আর এক্সেস করা যাবে না। আপনি যদি নিশিচ থাকেন যে array তে কোন "falsy" এলিমেন্ট নেই (যেমন অবজেক্টের array অথবা DOM নোড ইত্যাদি) তাহলেই ওপরের পদ্ধতি ব্যবহার করুন।

- -

for...in লুপ ব্যবহার করেও array এলিমেন্টগুলোতে iterate করতে পারবেন। কেউ যদি Array.prototype (পরে আলোচনা করেছি) ব্যবহার করে নতুন নতুন প্রোপার্টি যোগ করেন এরে তে, তাহলে সেগুলোও এই লুপ দিয়ে iterate করা যাবে:

- -
for (var i in a) {
-  // Do something with a[i]
-}
-
- -

Array তে নতুন এলিমেন্ট যোগ করার সবচাইতে নিরাপদ পদ্ধতিঃ

- -
a[a.length] = item;                 // same as a.push(item);
-
- -

যেহেতু a.length সবসময় এরে এর সর্বোচ্চ ইন্ডেক্স + ১ কাজেই আপনি নিশ্চিত থাকতে পারেন যে আপনি ফাকা স্থানেই নতুন এলিমেন্ট বসাচ্ছেন।

- -

Array'র সাথে অনেক ফাংশন প্যাকেট করে দেওয়া হয়েছেঃ

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method nameDescription
a.toString() 
a.toLocaleString() 
a.concat(item[, itemN])প্রদত্ত আইটেম (এলিমেন্ট) গুলো সহ নতুন একটি Array রিটার্ন করে।
a.join(sep) 
a.pop()শেষ এলিমেন্ট-টিকে এরে থেকে মুছে দিয়ে রিটার্ন করে।
a.push(item[, itemN])এরে'র শেষে এক/একাধিক আইটেম যোগ করে
a.reverse() 
a.shift() 
a.slice(start, end)একটি সাব-এরে রিটার্ন করে
a.sort([cmpfn])তুলনা করার জন্য একটি ফাংশন প্যারামিটারে দিতে পারেন (ঐচ্ছিক)
a.splice(start, delcount[, itemN])এরে'র আইটেমগুলো মুছে দিয়ে/রিপ্লেস করতে পারবেন।
a.unshift([item])এরে'র শুরুতে আইটেম কে যোগ করে।
- -

ফাংশন

- -

জাভাস্ক্রিপ্ট ভালোমত শিখতে হলে অবজেক্টের পাশাপাশি ফাংশন সম্পর্কেও ভাল ধারণা থাকা দরকার। নিচে খুবই নিরীহ-দর্শন একটা ফাংশন দেখা যাচ্ছেঃ

- -
function add(x, y) {
-    var total = x + y;
-    return total;
-}
-
- -

ফাংশনের বেসিক জানার জন্যে এইটুকুই যথেষ্ট। ফাংশনে এক/একাধিক প্যারামিটার/আর্গুমেন্ট পাঠাতে পারেন। ফাংশনের বডিতে যত খুশি স্টেটমেন্ট লিখুন, নিজের ইচ্ছামত "লোকাল" ভ্যারিয়েবল তৈরি করুন। ফাংশনের যেকোন জায়গায় return স্টেটমেন্ট ব্যবহার করতে পারেন - এই স্টেটমেন্টের পরের কোন স্টেটমেন্ট আর কার্যকর হবে না মানে ফাংশন থেকে তখন-ই প্রোগ্রাম বের হয়ে যাবে। return এর পর যেই ভ্যালু দিবেন ফাংশনটি তার caller কে সেই ভ্যালুটি রিটার্ন করবে। return এর পর কোন ভ্যালু না দিলে (অথবা আদৌ কোন রিটার্ন স্টেটমেন্ট ব্যবহার না করলে) জাভাস্ক্রিপ্ট undefined কে রিটার্ন ভ্যালু হিসেবে পাঠিয়ে থাকে।

- -

আপনি যদি ফাংশন কল করার সময় কোন প্যারামিটারের ভ্যালু না পাঠান, তাহলে 'undefined' ঐ প্যারামিটারের ভ্যালু হিসেবে চলে যাবে ফাংশনের কাছেঃ

- -
> add()
-NaN // You can't perform addition on undefined
-
- -

অন্য প্রোগ্রামিং ভাষার সাথে একটুখানি অমিলঃ আপনি চাইলে ফাংশন যতগুলো প্যারামিটার নিয়ে কাজ করে, তার থেকে বেশি প্যারামিটারও পাঠাতে পারেন!

- -
> add(2, 3, 4)
-5 // added the first two; 4 was ignored
-
- -

একটু হাস্যকর মনে হলেও, ফাংশনের নিজস্ব arguments নামের একটা array এর মত ভ্যারিয়েবল আছে - এর এলিমেন্ট হিসেবে ফাংশনে যতগুলো ভ্যালু প্যারামিটার হিসেবে পাঠানো হয়েছে সবগুলোই থাকে। আসুন add ফাংশনটিকে এমনভাবে লিখি যাতে যত খুশি প্যারামিটার পাঠানো হোক না কেন সবগুলোই যোগ করা যায়ঃ

- -

কিছুটা "আজাইরা" ধাঁচের মনে হলেও জাভাস্ক্রিপ্টে ফাংশগুলোর মধ্যে arguments নামের একটি ভ্যারিয়েবল আছে, যাতে ফাংশনটিতে পাস করা সকল ভ্যালু থাকে! আসুন ফাংশনটিকে এমনভাবে পরিবর্তন করি যেন তা ইচ্ছেমত আর্গুমেন্ট নিতে পারে!

- -
function add() {
-    var sum = 0;
-    for (var i = 0, j = arguments.length; i < j; i++) {
-        sum += arguments[i];
-    }
-    return sum;
-}
-
-> add(2, 3, 4, 5)
-14
-
- -

এবার গড় বের করার একটি ফাংশন (ফাংশন নাম্বার ১) লিখে ফেলিঃ

- -
function avg() {
-    var sum = 0;
-    for (var i = 0, j = arguments.length; i < j; i++) {
-        sum += arguments[i];
-    }
-    return sum / arguments.length;
-}
-> avg(2, 3, 4, 5)
-3.5
-
- -

এটা কাজের ফাংশন সন্দেহ নাই, তবে নতুন একটা ঝামেলা তৈরি করলঃ avg() ফাংশন কমা-দিয়ে-আলাদা-করা এক গাদা আর্গুমেন্ট নেয় - কিন্তু আপনি যদি আর্গুমেন্ট হিসেবে শুধু একটি array পাঠাতে চান? তাহলে avg() ফাংশনটা এভাবে (ফাংশন নাম্বার ২) লেখা যেতে পারেঃ

- -
function avgArray(arr) {
-    var sum = 0;
-    for (var i = 0, j = arr.length; i < j; i++) {
-        sum += arr[i];
-    }
-    return sum / arr.length;
-}
-> avgArray([2, 3, 4, 5])
-3.5
-
- -

কিন্তু নতুন করে না লিখে আগের ১-নাম্বার ফাংশনটা-ই ব্যবহার করতে পারলে ভাল হত! এক কাজের জন্য কয়টা ফাংশন লিখব, আর কি কাজ কর্ম নাই নাকি? সৌভাগ্যবশতঃ, জাভাস্ক্রিপ্ট দিয়ে যেকোন ফাংশনের apply() মেথড কল করে (যেহেতু ফাংশন-ও এক ধরণের অবজেক্ট, তাই ফাংশনের-ও মেথড/প্রোপার্টি ইত্যাদি থাকতে পারে!) আর্গুমেন্ট হিসেবে যেকোন array পাঠাতে পারেনঃ

- -
> avg.apply(null, [2, 3, 4, 5])
-3.5
-
- -

এই apply() মেথডের ২য় প্যারামিটারের ভ্যালুটাই ফাংশনের arguments হিসেবে ব্যবহৃত হবে। প্রথম আর্গুমেন্টের কাজ কি সেটা পরে বলব। আর হ্যা, এখন তো বুঝতে পারলেন যে ফাংশন-ও জাভাস্ক্রিপ্টে আসলে অবজেক্ট! (প্রমাণিত)

- -

জাভাস্ক্রিপ্টে বেওয়ারিশ (anonymous!) ফাংশন তৈরি করতে পারবেনঃ

- -
var avg = function() {
-    var sum = 0;
-    for (var i = 0, j = arguments.length; i < j; i++) {
-        sum += arguments[i];
-    }
-    return sum / arguments.length;
-}
-
- -

ওপরের "বেওয়ারিশ" ফাংশন আর function avg() এর মাঝে কোন পার্থক্য নাই, অন্ততঃ সিমান্ট্যাকালি। কিন্তু এই anonymous ফাংশন অনেক পাওয়ারফুল - কারণ এভাবে আপনি কোডের যেকোন জায়গায় ফাংশন তৈরি করে নিতে পারেন  - যেখানে হয়ত আগে সাদামাটা এক্সপ্রেশন দেওয়া লাগত। যেমন, একটা ট্রিক দেখুনঃ আমরা জানি জাভাস্ক্রিপ্টে "ব্লক" লেভেলে ভ্যারিয়েবলের নতুন কোন স্কোপ নাই, কিন্তু ফাংশন লেভেলে ভ্যারিয়েবলের স্কোপ আছে। এখন যদি আমরা কোন ফাংশনের ভেতর C ল্যাংগুয়েজের মত ব্লক লেভেলে কোন ভ্যারিয়েবলের স্কোপ চাই, তাহলে চট করে একটা বেওয়ারিশ ফাংশন লিখে ফেলতে পারিঃ

- -
var a = 1;
-var b = 2;
-(function() {
-  var b = 3; // b ভ্যারিয়েবলের নতুন স্কোপ তৈরি করলাম!
-  a += b;
-})();
-a; // 4
-b; // 2 - b এর মান আগেরটাই আছে।
-
- -

জাভাস্ক্রিপ্টে ফাংশন রিকারসিভলি (কোন ফাংশনের ভেতর নিজেকেই আবার কল করা) কল করতে পারবেন। Tree - সদৃশ ডেটা স্ট্রাকচার নিয়ে কাজ করতে এটা উপকারী। যেমন, DOM নিয়ে কাজ করার সময় কাজে লাগে।

- -
function countChars(elm) {
-    if (elm.nodeType == 3) { // TEXT_NODE
-        return elm.nodeValue.length;
-    }
-    var count = 0;
-    for (var i = 0, child; child = elm.childNodes[i]; i++) {
-        count += countChars(child);
-    }
-    return count;
-}
-
- -

অবশ্য এভাবে কাজ করতে গিয়ে anonymous ফাংশন কল করতে গেলে ঝামেলা হবেঃ এনোনিমাস ফাংশনকে রিকার্সিভ কল কিভাবে করবেন? ওদের তো নাম-ই নাই! এই ঝামেলা দূর করতে এসে গেল "named anonymous ফাংশন":

- -
var charsInBody = (function counter(elm) {
-    if (elm.nodeType == 3) { // TEXT_NODE
-        return elm.nodeValue.length;
-    }
-    var count = 0;
-    for (var i = 0, child; child = elm.childNodes[i]; i++) {
-        count += counter(child);
-    }
-    return count;
-})(document.body);
-
- -

এভাবে এনোনিমাস ফাংশনকে দেওয়া নাম শুধুমাত্র ঐ ফাংশনের ভেতরেই কাজ করবে। এভাবে যেমন জাভাস্ক্রিপ্ট ইঞ্জিন অপ্টিমাইজ ভাবে কাজ করতে পারে, সেরকম আপনার কোডও সহজবোধ্য হয়।

- -

মনের মত অবজেক্ট

- -
খেয়াল করুন: জাভাস্ক্রিপ্ট দিয়ে অবজেক্ট-ওরিয়েন্ট প্রোগ্রামিং করতে চাইলে আরো বিস্তারিত আলোচনা দেখুন এখানেঃ জাভাস্ক্রিপ্টে অবজেক্ট-ওরিয়েন্টেডের হাতেখড়ি
- -

এই প্যারার টাইটেল নিয়ে একটু মজা করলাম... হেহে। ইংরেজিতে টাইটেল ছিল "Custom Objects" :-P

- -

ক্ল্যাসিক অবজেক্ট অরিয়েন্টেড প্রোগ্রামিং মানেই class নামের কী-ওয়ার্ড... জাভাস্ক্রিপ্ট একটু অন্যরকম। আমরা সাধারণত অবজেক্ট কে ডেটা আর সেইসব ডেটার ওপর কাজ করার জন্য মেথড এর একটা কালেকশনকেই বুঝি। জাভাস্ক্রিপ্টে কোন class স্টেটমেন্ট নাই, জাভাস্ক্রিপ্ট prototype-ভিত্তিক প্রোগ্রামিং ভাষা, তাই সবার এই ব্যাপারটা একটু শিখে নেওয়ার দরকার আছে। জাভাস্ক্রিপ্টে আসলে ফাংশন-ই ক্লাস হিসেবে কাজ করে। আসুন একটা person অবজেক্ট চিন্তা করি... যাতে firstname আর lastname দু'টি প্রোপার্টি আছে। এখন, কোন ব্যাক্তির নাম প্রিন্ট করার ২টা পদ্ধতি চিন্তা করিঃ একটা হল আগে firstname প্রিন্ট করব, পরে lastname। আর অন্য পদ্ধতিটা উল্টা, আগে lastname প্রিন্ট করবঃ

- -
function makePerson(first, last) {
-    return {
-        first: first,
-        last: last
-    }
-}
-function personFullName(person) {
-    return person.first + ' ' + person.last;
-}
-function personFullNameReversed(person) {
-    return person.last + ', ' + person.first
-}
-> s = makePerson("Simon", "Willison");
-> personFullName(s)
-Simon Willison
-> personFullNameReversed(s)
-Willison, Simon
-
- -

কিন্তু... ওপরের আজব কোড দেখে যেকারর-ই মেজাজ খারাপ হওয়ার  কথা। এভাবে কোড করতে থাকলে শেষপর্যন্ত আপনার স্ক্রিপ্টের global স্কোপেই হাজার হাজার ফাংশন পয়দা হয়ে বসে থাকবে। আমরা চাই অবজেক্টের সদস্য মেথডগুলো শুধু ওই অবজেক্টের স্কোপেই থাকুক। যেহেতু ফাংশন == অবজেক্ট, আমরা নিমেষেই সুন্দর কোডিং করে ফেলতে পারিঃ

- -
function makePerson(first, last) {
-    return {
-        first: first,
-        last: last,
-        fullName: function() {
-            return this.first + ' ' + this.last;
-        },
-        fullNameReversed: function() {
-            return this.last + ', ' + this.first;
-        }
-    }
-}
-> s = makePerson("Simon", "Willison")
-> s.fullName()
-Simon Willison
-> s.fullNameReversed()
-Willison, Simon
-
- -

ওপরের কোডে দেখুন আমরা প্রথমবারের মত 'this' কীওয়ার্ড ব্যবহার করলাম। কোন ফাংশনের ভেতর যখন this ব্যবহার করা হয় তখন সেটি ঐ ফাংশনটি'র অবজেক্ট কে রেফার (refer)  করে থাকে, যদি কিনা আপনি ডট (.) অথবা ব্রাকেট ব্যবহার করে মেথডটিকে কল করে থাকেন। কিন্তু অন্য কোন ভাবে কল করলে this আসলে global অবজেক্ট কে রেফার করে। এই ব্যাপারটা ঠিকমত না বুঝতে পারলে ভুল করার সম্ভাবনা থাকে। উদাহরণ দেখুনঃ

- -
> s = makePerson("Simon", "Willison")
-> var fullName = s.fullName;
-> fullName()
-undefined undefined
-
- -

যখন আমরা fullName() কল করলাম (s.fullname() না) , 'this' আসলে global অবজেক্ট কে রেফার করে। এই গ্লোবাল অবজেক্ট এর যেহেতু first অথবা last নামের কোন প্রোপার্টি নাই, তাই undefined পাওয়া যাচ্ছে।

- -

নতুনদের জন্য এই বিষয়টা একটু ভ্রান্তিকর মনে হতে পারে... যাই হোক! এই this কী-ওয়ার্ড ব্যবহার করে আমরা makePerson কে আরেকটু ভাল চেহারা দিতে পারিঃ

- -
function Person(first, last) {
-    this.first = first;
-    this.last = last;
-    this.fullName = function() {
-        return this.first + ' ' + this.last;
-    }
-    this.fullNameReversed = function() {
-        return this.last + ', ' + this.first;
-    }
-}
-var s = new Person("Simon", "Willison");
-
- -

দেখুন, নতুন কী-ওয়ার্ড 'new' এর ব্যবহার - এই new এর সাথে this এর সম্পর্ক খুবই শক্ত-পোক্ত! কোন ফাংশন কল করার আগে new ব্যবহার করলে যা হয়ঃ একটি নতুন অবজেক্ট তৈরি হয়, এরপর ফাংশনটিকে কল করা হয় যেন this নতুন তৈরি করা অবজেক্ট টিকে রেফার করে থাকে। যেসব ফাংশন কে new কী-ওয়ার্ড দিয়ে কল করা উচিত তাদের নাম সাধারণতঃ বড় হাতের অক্ষরে লেখা হয় প্রথম হরফটি - যাতে ডেভেলপার সহজেই বুঝতে পারে যে ফাংশনটি new কী-ওয়ার্ড দিয়ে কল করতে হবে ।

- -

দেখতে সুন্দর লাগলেও আসলে এখনো একটা ঝামেলা রয়ে গেছে, যত বার আমরা new ব্যবহার করে makePerson এর অবজেক্ট তৈরি করব, প্রতিটা অবজেক্টের জন্য fullName() আর fullNameRevesed() ফাংশনদুটি'র নতুন কপি তৈরি হবে! কিন্তু আসলে তো উচিত শুধু ক্লাসের সদস্য ভ্যারিয়েবল গুলোর অবজেক্ট-প্রতি কপি তৈরি হওয়া, ফাংশন এর কপি তৈরি করাটা অপ্রয়োজনীয়। প্রতিটা অবজেক্টের জন্য এভাবে মেম্বার ফাংশন তৈরি না করে আসলে প্রচলিত অবজেক্ট-ওরিয়েন্টেড প্রোগ্রামিং এর ধারণা অনুযায়ী কোন ক্লাসের সকল অবজেক্ট বা ইন্সট্যান্সের উচিত ক্লাসের সদস্য ফাংশন শেয়ার করা।

- -
function personFullName() {
-    return this.first + ' ' + this.last;
-}
-function personFullNameReversed() {
-    return this.last + ', ' + this.first;
-}
-function Person(first, last) {
-    this.first = first;
-    this.last = last;
-    this.fullName = personFullName;
-    this.fullNameReversed = personFullNameReversed;
-}
-
- -

এখন প্রতিটা অবজেক্টের জন্য ফাংশন গুলোর নতুন কপি তৈরি না করে ফাংশনগুলো একবার-ই তৈরি করে শেয়ার করা নেওয়া হল। কিন্তু আসলে এর থেকেও ভালভাবে কোড করা সম্ভবঃ

- -
function Person(first, last) {
-    this.first = first;
-    this.last = last;
-}
-Person.prototype.fullName = function() {
-    return this.first + ' ' + this.last;
-}
-Person.prototype.fullNameReversed = function() {
-    return this.last + ', ' + this.first;
-}
-
- -

Person.prototype এমন একটি অবজেক্ট যা Person ফাংশনের সব ইন্সট্যান্স বা অবজেক্ট শেয়ার করে। এভাবে "prototype chain" নামের বিশেষ ধরণের লুক-আপ চেইন তৈরি হয়ঃ যখন আপনি Person এর এমন কোন প্রোপার্টি এক্সেস করতে চান যেটা এখনো সেট করা হয়নি, জাভাস্ক্রিপ্ট Person.prototype এ খুজে দেখবে (লুক-আপ) সেখানে এই প্রোপার্টি টি সেট করা আছে কিনা। সহজ বাংলায়, Person.prototype এ আমরা যে সকল প্রোপার্টি (ফাংশন বা ডেটা) সেট করব সেটা Person এর সকল ইন্সট্যান্স/অবজেক্ট এক্সেস করতে পারবে।

- -
-

অবজেক্ট-ওরিয়েন্টেড প্রোগ্রামিং করার জন্য নতুন রা চোখ বন্ধ করে ওপরে দেখানো প্রটোটাইপ পদ্ধতি ব্যবহার করতে পারেন। ভাল-মন্দ এতগুলো উদাহরণ শুধুমাত্র কন্সেপ্ট পরিষ্কার করার জন্যই দেখানো হল - তবে গুলিয়ে ফেললে ভয় পাওয়ার কিছু নাই।

-
- -

এই প্রটোটাইপ আসলে অনেক পাওয়ারফুল টুল। জাভাস্ক্রিপ্ট আপনাকে যেকোন কিছুর প্রটোটাইপ যেকোন সময় পরিবর্তন করার সুযোগ দেয়। যার মানে, রানটাইমেই আপনি অবজেক্টে নতুন নতুন মেথড যোগ করতে পারেন! এটাও সি/জাভার সাথে অন্যতম পার্থক্য প্রটোটাইপ-ভিত্তিক ল্যাংগুয়েজ যেমন জাভাস্ক্রিপ্ট এর।

- -
> s = new Person("Simon", "Willison");
-> s.firstNameCaps();
-TypeError on line 1: s.firstNameCaps is not a function
-> Person.prototype.firstNameCaps = function() {
-    return this.first.toUpperCase()
-}
-> s.firstNameCaps()
-SIMON
-
- -

মজা দেখুনঃ বিল্ট-ইন অবজেক্টের প্রটোটাইপ ও এভাবে পরিবর্তন করা সম্ভব! আসুন আমরা বিল্ট ইন String এ নতুন একটা মেথড যোগ করি স্ট্রিং উল্টে দেওয়ার জন্যঃ

- -
> var s = "Simon";
-> s.reversed()
-TypeError on line 1: s.reversed is not a function
-> String.prototype.reversed = function() {
-    var r = "";
-    for (var i = this.length - 1; i >= 0; i--) {
-        r += this[i];
-    }
-    return r;
-}
-> s.reversed()
-nomiS
-
- -

এই নতুন মেথড স্ট্রিং লিট্যারেল এও কাজ করবেঃ

- -
> "This can now be reversed".reversed()
-desrever eb won nac sihT
-
- -

আগে যেমনটা বলেছিলাম, prototype হচ্ছে একটা বিশেষ চেইনের অংশ। এই চেইনের গোড়ায় আছে Object.prototype, যার একটা মেথড হল toString() - এই মেথড টা কল হয় যখন আপনি কোন একটা অবজেক্ট কে স্ট্রিং হিসেবে পেতে চাচ্ছেন (জাভা'র toString() এর মতন)। ডিবাগিং করার জন্য এটা উপকারী হবেঃ

- -
> var s = new Person("Simon", "Willison");
-> s
-[object Object]
-> Person.prototype.toString = function() {
-    return '<Person: ' + this.fullName() + '>';
-}
-> s
-<Person: Simon Willison>
-
- -

মনে আছে আমরা avg.apply() এর প্রথম প্যারামিটারে null পাঠিয়েছিলাম? এই apply() এর প্রথম প্যারামিটারে যেই অবজেক্ট পাঠাবেন, this সেটাকে রেফার করবে। আমরা new এর একটা সহজ-সরল ইমপ্লেমেন্টেশন করতে পারিঃ

- -
function trivialNew(constructor) {
-    var o = {}; // Create an object
-    constructor.apply(o, arguments);
-    return o;
-}
-
- -

অবশ্য এটা পুরোপুরি new হিসেবে ব্যবহার করা যাবে না কারণ প্রটোটাইপ চেইন তৈরি করা হয়নি। এরকম কোড সচরাচর দেখা যায়না, তবে চাইলে যে করতে পারবেন সেটা দেখানো হল আরকি।

- -

call নামের apply() এর মতই একটা ফাংশন আছে। পার্থক্য হল, array এর বদলে এটি বিশদ-ভাবে (কমা সেপারেটেড) আর্গুমেন্ট নিয়ে থাকেঃ

- -
function lastNameCaps() {
-    return this.last.toUpperCase();
-}
-var s = new Person("Simon", "Willison");
-lastNameCaps.call(s);
-// Is the same as:
-s.lastNameCaps = lastNameCaps;
-s.lastNameCaps();
-
- -

ফাংশনের ভেতরে ফাংশন (Inner functions)

- -

জাভাস্ক্রিপ্টে ফাংশনের ভেতরে ফাংশন লেখা যায় এটা আমরা আগে makePerson() উদাহরণে দেখেছি। একটা গুরুত্বপূর্ণ ব্যাপার খেয়াল রাখতে হবে যে জাভাস্ক্রিপ্টে এই Inner ফাংশন তার প্যারেন্ট ফাংশনের স্কোপ এক্সেস করতে পারেঃ

- -
function betterExampleNeeded() {
-    var a = 1;
-    function oneMoreThanA() {
-        return a + 1;
-    }
-    return oneMoreThanA();
-}
-
- -

তাই কোড বুঝার আওতায় রাখা আর মেইন্টেইন করা সহজ জাভাস্ক্রিপ্টেঃ যদি কোন ফাংশন (ফাংশন নাম্বার-১) এমন কয়েকটা ফাংশনের ওপর নির্ভর করে যেই ফাংশনগুলা অন্য কোথাও কাজে লাগে না, তাহলে আমরা সেই ফাংশনগুলোকে এই ১-নাম্বার ফাংশনের ইনার (inner) ফাংশন হিসেবে রেখে দিতে পারি। এতে করে, global স্কোপের আওতায় থাকা ফাংশনের সংখ্যা কমবে - এটা সবসময় ভাল অভ্যাস হিসেবে বিবেচনা করা হয়।

- -

এমন করে আসলে এক গাদা গ্লোবাল ভ্যারিয়েবল তৈরি করে গ্লোবাল স্কোপ নষ্ট করে ফেলার অভ্যাস থেকেও বেচে যাওয়া যায়। গ্লোবাল স্কোপে সুযোগ মত ভ্যারিয়েবল তৈরি করে ফাংশনে ডেটা শেয়ার করার প্রবণতা খুবই লক্ষ্যণীয়  - কিন্তু এভাবে কোড করলে একটা সময় পর আর কোড মেইন্টেইন করা যায় না। জাভাস্ক্রিপ্টের inner ফাংশন ব্যবহার করে আমরা যেসব ফাংশন কোন গ্লোবাল ভ্যারিয়েবল শেয়ার করতে চায়, তাদের একটা প্যারেন্ট ফাংশনের inner ফাংশন হিসেবে ঢুকিয়ে দিতে পারি। এভাবে যেখানে প্রয়োজন, সম্পর্কিত ফাংশনগুলোকে couple করে ফেললেও গ্লোবাল স্কোপে ভ্যারিয়েবলের সংখ্যা কমে যাবে। এই অভ্যাস সতর্কতার সাথেই করা উচিত, যদিও এরকম কোড করার সুযোগ থাকাটা খুবই উপকারী।

- -

 ক্লোজার (Closures)

- -

ক্লোজার জাভাস্ক্রিপ্টের অফার করা সেরা এবস্ট্রাকশন (abstractions) গুলোর একটি - অবশ্য ঠিকভাবে না বুঝলে কনফিউজিং হতে পারে। এটা আসলে কী?

- -
function makeAdder(a) {
-    return function(b) {
-        return a + b;
-    }
-}
-x = makeAdder(5);
-y = makeAdder(20);
-x(6)
-?
-y(7)
-?
-
- -

makeAdder নাম দেখেই বুঝা যাচ্ছে এটা নতুন নতুন adder ফাংশন তৈরি করে! এই নতুন ফাংশনগুলো কে যখন কিনা আবার কল করা হবে কোন আর্গুমেন্ট দিয়ে, makeAdder ফাংশনে দেয়া আর্গুমেন্টটির সাথে এই নতুন আর্গুমেন্ট কে যোগ করবে।

- -

এখানে যা হচ্ছে অনেকটাই Inner ফাংশনের সাথে মিলে যায়ঃ একটা ফাংশনকে অন্য কোন ফাংশনের মধ্যে তৈরি করা হয়ছে - ভেতরের ফাংশনটি বাইরের (প্যারেন্ট) ফাংশনের সব ভ্যারিয়েবল এক্সেস করতে পারে। একমাত্র পার্থক্য হচ্ছে বাইরের (outer) ফাংশনটি কিন্তু রিটার্ন করে গিয়েছে, তাই কমন-সেন্স থেকে মনেহতে পারে যে এর লোকাল ভ্যারিয়েবল গুলো আর নেই। কিন্তু আসলে, এগুলো এখনো বহাল তবিয়তেই আছে - না থাকলে adder ফাংশনগুলো তো কাজ করত না! আরো লক্ষ্যণীয় যে makeAdder এর লোকাল ভ্যারিয়েবলের দু'টি আলাদা, ভিন্ন "কপি" দেখা যাচ্ছে - যার একটিতে a ভ্যারিয়েবলের মানে 5 আর অন্যটিতে এই মান 20। তাই, ওপরের ফাংশন কল  দু'টির ফলাফল হবে নিম্নরূপঃ

- -
x(6) // returns 11
-y(7) // returns 27
-
- -

পর্দার আড়ালেঃ যখন জাভাস্ক্রিপ্ট কোন ফাংশন execute করে, ঐ ফাংশনের লোকাল ভ্যারিয়েবল গুলো রাখার জন্যে একটি 'স্কোপ' অবজেক্ট তৈরি করা হয়। এই স্কোপ ভ্যারিয়েবল ইনিশিয়ালাইজ করা হয় ফাংশনে প্যারামিটার হিসেবে যেসব ভ্যারিয়েবল পাঠানো হয়েছিল সেগুলো দ্বারা। এটা গ্লোবাল অবজেক্টের মতই যেখানে সব গ্লোবাল ভ্যারিয়েবল আর ফাংশনগুলো থাকে, কিন্তু দু'টি পার্থক্য সহ। প্রথমতঃ প্রতিবার একটি ফাংশন execute হওয়া শুরু করে একটি নতুন স্কোপ অবজেক্ট তৈরি হয়ে যায়। গ্লোবাল স্কোপ অবজেক্টের সাথে দ্বিতীয় পার্থক্যটি হল, গ্লোবাল স্কোপের প্রোপার্টি সরাসরি এক্সেস করা যায় (যেমন ব্রাউজারের ক্ষেত্রে এই গ্লোবাল অবজেক্ট টি হল window), কিন্তু ফাংশনের স্কোপের ক্ষেত্রে এটি সম্ভব নয়। উদাহরণস্বরূপ বলা যায়, ফাংশনের স্কোপ অবজেক্টের প্রোপার্টিকে iterate করে এক্সেস করা সম্ভব নয়।

- -

তাই যখন makeAdder কল করা হয়েছিল, একটা স্কোপ অবজেট তৈরি হয়ে গেছে। এই স্কোপ অবজেক্টের একটাই প্রোপার্টিঃ a ভ্যারিয়েবল যেটি কিনা এই ফাংশনের একমাত্র প্যারামিটার। makeAdder তারপর নতুন একটা ফাংশন তৈরি করে রিটার্ন করে। এই মুহূর্তে জাভাস্ক্রিপ্টের গারবেজ কালেকটর (কোন ভ্যারিয়েবল গুলোর আর প্রয়োজন নাই সেগুলো খুজে বের করে এরা যে মেমরি দখল করে রেখেছিল তা অন্য নতুন ভ্যারিয়েবলের জন্য ফ্রি করে দেওয়া'র পদ্ধতি) এর makeAdder এর স্কোপ অবজেট গায়েব করে ফেলার কথা, কিন্তু makeAdder যে ফাংশনটি তৈরি করে রিটার্ন করল তার মাঝে makeAdder এর স্কোপ অবজেক্টের একটা রেফারেন্স থেকে যায়। যে কারণে, যতক্ষণ makeAdder এর রিটার্ন করা ফাংশনের কোন না কোন রেফারেন্স কোডে অবশিষ্ট থাকছে (সহজভাবে যতক্ষণ এটি ব্যবহৃত হচ্ছে), ততক্ষণ makeAdder এর স্কোপ অবজেক্ট-টিও অক্ষত থাকবে।

- -

স্কোপ অবজেক্টেরা প্রোটোটাইপ চেইনে মত স্কোপ চেইন মেইনটেইন করে।

- -

ক্লোজার হচ্ছে একট ফাংশন আর এই ফাংশনকে যেই ফাংশন তৈরি করেছিল তার স্কোপ অবজেক্টের একটা সমন্বয় (combination)।

- -

ক্লোজার আপনাকে স্টেট মনে রাখার একটা সুবিধা দেয় - যে কারণে অবজেক্টের বদলে ক্লোজার ব্যবহার করা যেতে পারে।

- -

মেমরি অপচয় (Memory leaks)

- -

ক্লোজার ব্যবহারের একটি দুর্ভাগ্যজনক পার্শ্বপ্রতিক্রিয়া হল এটি ইন্টার্নেট এক্সপ্লোরারে মেমরি অপচয় করে। জাভাস্ক্রিপ্টে গার্বেজ কালেকশন পদ্ধতি ব্যবহার করা হয় অবজেক্টের দখল করা মেমরি ফ্রি করার জন্যে। অবজেক্ট যখন তৈরি হয় তখন তাদের মেমরি দেওয়া (allocate) করা হয় - যখন ঐ অবজেক্টের আর কোন রেফারেন্স কোডে অবশিষ্ট থাকে না তখন সেই মেমরি ফ্রি করে দেওয়া হয়। হোস্ট যেসব অবজেক্ট সরবরাহ করে সেগুলো হ্যান্ডেল সেই হোস্ট নিজেই করে।

- -

ব্রাউজার হোস্টগুলোর বিশাল পরিমাণে অবজেক্ট ম্যানেজ করা লাগে - যেই HTML পাতাটি দেখানো হচ্ছে - তার জন্যে DOM এর অবজেক্ট গুলো। এই অবজেক্টগুলো ম্যানেজ আর রিকভারি করার দায়িত্ব ব্রাউজারের।

- -

এই কাজের জন্যে ইন্টারনেট এক্সপ্লোরার (IE) তার নিজের গার্বেজ কালেকশন পদ্ধতি ব্যবহার করে, জাভাস্ক্রিপ্টের পদ্ধতি থেকে যেটি আলাদা। এই দুই এর মাঝে ইন্টারেকশনের জন্যে মেমরি অপচয় হতে পারে।

- -

IE তে মেমরি অপচয় হবে যখনি কোন জাভাস্ক্রিপ্ট অবজেক্ট আর নেটিভ অবজেক্টের মাঝে সার্কুলার (circular) রেফারেন্স তৈরি হবে। নিচের কোড দেখুনঃ

- -
function leakMemory() {
-    var el = document.getElementById('el');
-    var o = { 'el': el };
-    el.o = o;
-}
-
- -

ওপরের কোডে যে সার্কুলার রেফারেন্স তৈরি হল তার জন্যে IE, el আর o অবজেক্টের দখল করা মেমরি ফ্রি করবে না যতক্ষণ না ব্রাউজার পুরোপুরি রিস্টার্ট করা হচ্ছে। ফলাফল মেমরি অপচয়...

- -

ওপরের কেইসটি প্রোগ্রামারের চোখ এড়িয়ে যেতে পারে, কারণ এই মেমরি অপচয় অনেক্ষণ-ধরে-চলছে এরকম বড়সর এপ্লিকেশনের ক্ষেত্রেই প্রভাব ফেলে। কোন এপ্লিকেশন জটিল ডেটা স্ট্রাকচার ব্যবহার করে বা লুপের মধ্যে মমরি অপচয় করলেও সেটা চোখে পড়বে।

- -

সার্কুলার রেফারেন্স ওপরের কোডের মত এত সহজে চোখে নাও পড়তে পারে। অনেক সময় মেমরি নষ্ট করা ডেটা স্ট্রাকচারে অনেক লেভেলের রেফারেন্সের পরে সার্কুলার রেফারেন্স তৈরি হতে পারে - তখন আর চট করে সার্কুলার রেফারেন্স ধরা যাবে না।

- -

ক্লোজার ব্যবহার করলে অনিচ্ছাকৃত মেমরি অপচয় হতে পারে। নিচের কোড টা দেখুনঃ

- -
function addHandler() {
-    var el = document.getElementById('el');
-    el.onclick = function() {
-        this.style.backgroundColor = 'red';
-    }
-}
-
- -

ওপরের কোডে HTML এলিমেন্ট টিকে লাল  রং করা হবে যখন কেউ এর উপরে ক্লিক করবে। একই সাথে মেমরি লীক ও হতে থাকবে। কেন? কারণ এনোনিমাস inner ফাংশনটি'র ক্লোজারে el এর একটা রেফারেন্স অনিচ্ছাকৃতভাবে থেকে যাবে। এর ফলে একটা জাভাস্ক্রিপ্ট অবজেক্ট (ফাংশনটি) আর একটা নেটিভ অবজেক্ট (el) এর মাঝে সার্কুলার রেফারেন্স তৈরি হল।

- -

এই সমস্যা সমাধানের কয়েকটা উপায় আছে। সবথেকে সহজটি হল আদৌ কোন el ভ্যারিয়েবল ব্যবহার না করাঃ

- -
function addHandler(){
-    document.getElementById('el').onclick = function(){
-        this.style.backgroundColor = 'red';
-    }
-}
-
- -

আরেকটা মজার উপায় হল এক ক্লোজার এর সার্কুলার রেফারেন্স অন্য আরেকটি ক্লোজার দিয়ে নষ্ট করাঃ

- -
function addHandler() {
-    var clickHandler = function() {
-        this.style.backgroundColor = 'red';
-    };
-    (function() {
-        var el = document.getElementById('el');
-        el.onclick = clickHandler;
-    })();
-}
-
- -

Inner ফাংশনটি সরাসরি execute হয়, এর ভেতরের সবকিছু clickHandler এর তৈরি করা ক্লোজার থেকে আড়াল করে।

- -

ক্লোজার থেকে দূরে থাকার আরেকটি ভাল বুদ্ধি হল window.onunload ইভেন্টে সার্কুলার রেফারেন্স দূর করা। অনেক ইভেন্ট লাইব্রেরী এই পদ্ধতি ব্যবহার করে। কিন্তু এরকম করলে আবার ফারায়ফক্স ১.5 এর bfcache কাজ করবে না, তাই ফায়ারফক্সে unload লিসেনার রেজিস্টার করা উচিত হবে না (যদি এমন হয় যে ব্যবহার না করে উপায় নাই তাহলে অবশ্য ভিন্ন কথা)।

- -
-

মূল ডকুমেন্টের খবরাখবর...

- -
    -
  • লেখকঃ Simon Willison
    • -
  • শেষ সম্পাদনাঃ মার্চ ৭, ২০০৬
    • -
  • কপিরাইটঃ © 2006 Simon Willison, contributed under the Creative Commons: Attribute-Sharealike 2.0 license.
    • -
  • আরো তথ্যঃ এই টিউটোরিয়াল নিয়ে আরো তথ্যের জন্য (আর মূল আলোচনার স্লাইডের লিংক পেতে) দেখুন Simon's Etech weblog post.
    • -
-
- -

 

- -

অনুবাদ সংক্রান্ত তথ্যঃ টেকনিকাল তথ্য অপরিবর্তিত রেখে ভাবানুবাদের পাশাপাশি সামান্য পরিমার্জনা করা হয়েছে।

diff --git a/files/bn/web/javascript/data_structures/index.html b/files/bn/web/javascript/data_structures/index.html deleted file mode 100644 index ab05a49d7a..0000000000 --- a/files/bn/web/javascript/data_structures/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: জাভাস্ক্রিপ্টে ডেটা স্ট্রাকচার -slug: Web/JavaScript/Data_structures -tags: - - JavaScript -translation_of: Web/JavaScript/Data_structures ---- -
{{jsSidebar("More")}}
- -

সব প্রোগ্রামিং ল্যাংগুয়েজের নিজস্ব ডেটা স্ট্রাকচার থাকে (যা ব্যবহার করে আপনি আপনার ডেটা বা তথ্য প্রোগ্রামে রাখতে পারেন) - তবে একেক প্রোগ্রামিং ভাষায় একেক রকম ডেটা স্ট্রাকচার দেখা যায়। এই আর্টিকেলে জাভাস্ক্রিপ্টের নিজস্ব ডেটা স্ট্রাকচার আর সেগুলোর বিভিন্ন প্রোপার্টি (বৈশিষ্ট্য) নিয়ে আলোচনা করা হয়েছে। এই নিজস্ব ডেটা স্ট্রাকচার গুলো ব্যবহার করে অন্যান্য ডেটা স্ট্রাকচার বানানো যাবে। যেখানে সম্ভব অন্য ভাষার সাথে পার্থক্য ও দেখানো হয়েছে।

- -

ডাইনামিক টাইপিং 

- -

JavaScript একটি loosely typed বা dynamic ভাষা। যার মানে হচ্ছে আমাদের আগে থেকে কোন variable এর type বলে দিতে বা ঠিক করে দিতে হবে না। কোন প্রোগ্রাম চলাকালে অটোমেটিক এর type ঠিক হয়ে যায়। যার মানে দাঁড়ায়, আমরা একই নামের বিভিন্ন type এর variable তৈরি করতে পারি!! 

- -
var foo = 42;    // foo is now a Number
-var foo = 'bar'; // foo is now a String
-var foo = true;  // foo is now a Boolean
- -

ডেটা টাইপ 

- -

ECMAScript স্ট্যান্ডার্ড অনুযায়ী ৭ ধরণের ডেটা স্ট্রাকচার আছেঃ

- -

 

- -
    -
  • প্রথম ৬টি হল মৌলিক বা {{Glossary("Primitive", "primitives")}}: -
      -
    • বুলিয়ান {{Glossary("Boolean")}}
      • -
    • নাল {{Glossary("Null")}}
      • -
    • অসংগায়িত {{Glossary("Undefined")}}
      • -
    • সংখ্যা {{Glossary("Number")}}
      • -
    • স্ট্রিং {{Glossary("String")}}
      • -
    • সিম্বল {{Glossary("Symbol")}} (new in ECMAScript 6)
      • -
    -
    • -
  • এবং অবজেক্ট  {{Glossary("Object")}}
    • -
- -

নিচের আলোচনায় আমরা দেখব কিভাবে এগুলো ব্যবহার করে ডেটা রাখা যায় আর কীভাবে এগুলোর সাহায্যে আরও উন্নতমানের ডেটা স্ট্রাকচার তৈরি করা যায়।

- -

মৌলিক/বেসিক মানসমূহ

- -

অবজেক্ট ছাড়া বাকি সব টাইপের ডেটার মান তৈরি করার পর আর পরিবর্তন করা যায় না। বিশেষকরে, স্ট্রিং (যেখানে C ভাষায় স্ট্রিং এর মান পরিবর্তন করা যায়)। এই টাইপের ডেটাকে আমরা মৌলিক (primitive) টাইপের বলে থাকি। নিচে {{ anch("Strings") }} নিয়ে আলোচনায় এই বিষয়ে বিস্তারিত রয়েছে।

- -

বুলিয়ান, নাল এবং অসংজ্ঞায়িত

- -

শুধুমাত্র চারটি ধ্রুবক (কন্সট্যান্ট) দিয়েই এই ডেটাটাইপ গুলো প্রকাশ করা সম্ভবঃ বুলিয়ান প্রকাশ করার জন্য  true, false, নাল প্রকাশের জন্য null, আর অসংজ্ঞায়িত প্রকাশের জন্য undefined। যেহেতু এগুলো কন্সট্যান্ট, এগুলো উঁচুমানের ডেটা রাখতে পারে না।

- -

সংখ্যা

- -

ECMAScript স্ট্যান্ডার্ড অনুযায়ী সংখ্যা প্রকাশ করার জন্য একটি মাত্র নাম্বার-টাইপ আছেঃ "double-precision 64-bit binary format IEEE 754 value"। অন্যান্য প্রোগ্রামিং ভাষার মত Integer (পূর্ণ সংখ্যা) প্রকাশ করার জন্য আলাদা কোন টাইপ নেই! ভগ্নাংশ রাখার পাশাপাশি জাভাস্ক্রিপ্টের এই একমাত্র নাম্বার টাইপ দিয়ে +Infinity, -Infinity, এবং NaN (not-a-number) এই বিশেষ প্রতীক গুলোও প্রকাশ করা যায়।

- -

যদিও একটি সংখ্যা সাধারণত শুধুমাত্র এর মানই প্রকাশ করে, জাভাস্ক্রিপ্টের কিছু বাইনারী অপারেটর আছে, যেগুলো দিয়ে বিট মাস্কিং পদ্ধতিতে একটি মাত্র সংখ্যা থেকেই অনেকগুলো বুলিয়ান মান প্রকাশ করা সম্ভব। তবে এরকম ব্যবহার নিরুৎসাহিত করা হয়, কারণ জাভাস্ক্রিপ্টে অন্য পদ্ধতিতে বুলিয়ান মান রাখা যায় (যেমন বুলিয়ান মানের array ব্যবহার করে অথবা অবজেক্টে প্রত্যেকটা বুলিয়ান মানের জন্য একটা করে প্রোপার্টি ব্যবহার করে)। বিট মাসস্কিং ব্যবহার করলে কোড দুর্বোধ্য হয়, পরে এই কোড নিয়ে আর কাজ করাও যায় না। ক্ষেত্র বিশেষে বিট মাসস্কিং ব্যবহার না করে কোন উপায় থাকে না, যেমন স্টোরেজ সীমাবদ্ধতা থাকলে অথবা নেটওয়ার্ক দিয়ে প্রত্যেক্টা বিট পাঠানোর সময়। তবে যখনই পারা যায়, বিট মাসস্কিং শেষ সম্বল হিসেব রেখে দিয়ে দেখতে হবে অন্য কোন উপায়ে কোডটা করে ফেলা যায় কিনা!

- -

স্ট্রিং

- -

স্ট্রিং হচ্ছে "বাক্য" বা একসাথে অনেকগুলো অক্ষর।  C ভাষার সাথে জাভাস্ক্রিপ্টের পার্থক্য হচ্ছে জাভাস্ক্রিপ্টের স্ট্রিং তৈরি করার পর পরিবর্তন করা যায় না। তবে একটি স্ট্রিং এর ওপর কোন অপারেশন প্রয়োগ করে নতুন অন্য স্ট্রিং তৈরি করা যায়। যেমনঃ

- -
    -
  • মূল স্ট্রিং এর যেকোন অংশ থেকে যেকোন সংখ্যক অক্ষর নিয়ে সাব-স্ট্রিং তৈরি করা যায়। অথবা সরাসরি এই ফাংশন ব্যবহার করে সাবস্ট্রিং তৈরি করা যায়ঃ String.substr()।
    • -
  • যোগ করার অপারেটর (+) ব্যবহার করে দুইটা স্ট্রিং একের পর এক বসিয়ে নতুন আরেকটা স্ট্রিং তৈরি করা যায়। একই কাজ হয় String.concat() ফাংশন ব্যবহার করে।
    • -
- -

আপনার কোডের সব ডেটা স্ট্রিং দিয়ে প্রকাশ করবেন না!

- -

জটিল রকমের ডেটাকে স্ট্রিং দিয়ে প্রকাশ করার প্রবণতা খুবই লক্ষ্য করা যায়। কারণ, কিছু সুবিধা পাওয়া যায় প্রায় সবকিছু স্ট্রিং দিয়ে প্রকাশ করতে গেলেঃ

- -
    -
  • স্ট্রিং এর পর স্ট্রিং বসিয়ে অনেক জটিল ডেটা তৈরি করা যায়।
    • -
  • স্ট্রিং ডেটাকে ডিবাগ করা খুব সহজ।
    • -
  • অনেক API তেই স্ট্রিং খুব পরিচিত একটা মুখ। এসব API এর মধ্যে উদাহরণ হিসেবে input fields, local storage মান, {{ domxref("XMLHttpRequest") }} responses  যখন responseText ব্যবহার করা হচ্ছে, ইত্যাদি।) তাই মনে হতে পারে সব ডেটাই তো স্ট্রিং দিয়ে প্রকাশ করা যাচ্ছে!
    • -
- -

এটা সত্য যে প্রায় সব ডেটা স্ট্রাকচার কেই স্ট্রিং দিয়ে প্রকাশ করা সম্ভব, কিন্তু এটা ভাল আইডিয়া না। যেমন, আলাদা করার জন্য কিছু একটা ব্যবহার করে কেউ স্ট্রিং দিয়ে লিস্ট তৈরি করার চেষ্টা করতে পারে (যেখানে array বেশি উপযুক্ত হত)। এখন আলাদা করার জন্য যেই অক্ষরটা ব্যবহার করা হয়েছে, সেটিই যদি লিস্টের সদস্য হিসেবে হাজির হয় তাহলে সমস্যা দেখা দিবে। কোন এসকেপ অক্ষর ব্যবহার করা যেতে পারে হয়ত, কিন্তু এত কাহিনী কীর্তি করার তো দরকার নেই কারণ লিস্ট রাখার জন্য নিবেদিত ডেটা স্ট্রাকচার ই আছে, যেটা ব্যবহার না করে স্ট্রিং ব্যবহার করলে অপ্রয়োজনীয় বোঝা বহন করতে হবে।

- -

তাই শুধুমাত্র টেক্সট-জাতীয় ডেটা রাখার জন্যই স্ট্রিং ব্যবহার করা উচিত। জটিল ডেটা রাখার জন্য স্ট্রিংটিকে পার্স করে উপযুক্ত ডেটা স্ট্রেকচার ব্যবহার করতে হবে।

- -

অবজেক্ট

- -

জাভাস্ক্রিপ্টে, অবজেক্টকে আমরা অনেকগুলো ডেটা রাখার জন্য একটা প্যাকেট হিসেবে চিন্তা করতে পারি। অবজেক্ট লিটেরেল সিনট্যাক্স ব্যবহার করে আমরা অবজেক্টের অল্প কিছু প্রোপার্টির মান দিয়ে দিতে পারি। তবে পরে যেকোন সময় যেকোন প্রোপার্টি ঐ অবজেক্টে যোগ বা বিয়োগ করা যাবে। যেকোন টাইপের ডেটা আমরা প্রোপার্টি হিসেবে রাখতে পারি অবজেক্টের, অন্য অবজেক্টের ডেটাও। এভাবে, জটিল ডেটা স্ট্রাকচার তৈরি করা সম্ভব।

- -

"সাধারণ"  অবজেক্ট, আর ফাংশন

- -

জাভাস্ক্রিপ্টে অবজেক্ট হচ্ছে key-value ম্যাপিং। মানে অবজেক্টের কোন একটা স্ট্রিং key এর মান হিসেবে যেকোন ডেটা টাইপের value রাখা যাবে। তাই অবজেক্ট কে হ্যাশ-ম্যাপের বিকল্প হিসেবে ব্যবহার করা যায়। তবে, নন-স্ট্যান্ডার্ড __proto__ pseudo প্রোপার্টি সাবধানে ব্যবহার করতে হবে। যেখানে প্রযোজ্য, সেখানে __proto__ এর ভুল মান বসালে অবজেক্টের নিজস্ব প্রোটোটাইপ (ধরণ) বদলে যাবে। যেসব ক্ষেত্রে আমরা জানি না কোন স্ট্রিং এর উৎস কী (যেমন কোন ইনপুট ফিল্ড) সেসব ক্ষেত্রে সাবধান থাকতে হবেঃ অন্যরা এই সমস্যায় ভুগেছে। এসব ক্ষেত্রে কোন StringMap abstraction ব্যবহার করা যেতে পারে।

- -

ফাংশনও অবজেক্ট, জাভাস্ক্রিপ্টে। পার্থক্য হল, ফাংশন কে কল করা যায়।

- -

Arrays

- -

Arrays ও অবজেক্ট, জাভাস্ক্রিপ্টে। তবে এখানে, প্রোপার্টি গুলোর key হচ্ছে পূর্ণ সংখ্যা আর বিশেষ 'length' প্রোপার্টি রয়েছে এদের। আরও কাহিনী হল, এরেগুলো ইনহেরিট হয় Array.prototype  থেকে - যার ফলে বেশ কিছু দরকারি ফাংশন পাওয়া যায় এরে অবজেক্ট গুলো থেকে। যেমন, indexOf ফাংশন ব্যবহার করে array তে কোন একটা মান (সদস্য) আছে কিনা জানা যায় আবার push ফাংশন ব্যবহার করে এরে এর শেষে কোন সদস্য যোগ করা যায়। লিস্ট কিংবা সেট হিসেবে ব্যবহার করার জন্য তাই এরে হচ্ছে সবচেয়ে উপযুক্ত ডেটা-স্ট্রাকচার।

- -

তারিখ

- -

তারিখ প্রকাশ করার জন্য সবচেয়ে উপযুক্ত হবে নিজস্ব Date ইউটিলিটি ব্যবহার করা। 

- -

WeakMaps, ম্যাপ, সেট

- -

স্ট্যান্ডার্ড নয়। আশা করা যায় ECMAScript 6. ভার্সনে স্ট্যান্ডার্ড হবে।

- -

এসব ডেটা স্ট্রাকচার কোন অবজেক্টের রেফারেন্স কে key হিসেবে নিতে পারে। সেট দিয়ে একসারি (set) অব্জেট প্রকাশ করা হয়, আবার WeakMaps আর ম্যাপ দিয়ে কোন অবজেক্ট কে ভ্যালু হিসেবে রাখা হয়। ম্যাপ আর উইকম্যাপ এর মাঝে পার্থক্য হচ্ছেঃ ম্যাপে অবজেক্ট key, enumerate করা যায়। আর উইকম্যাপে গার্বেজ-কালেকশন বেশি ভালভাবে কাজ করে।

- -

শুধুমাত্র ECMAScript 5 ব্যবহার করেই ম্যাপ ও সেট ইমপ্লিমেন্ট করা সম্ভব। কিন্তু যেহেতু অবজেক্ট compare (যেমন, কোনটা কার থেকে ছোট সেই তুলনা করতে গেলে) করা সম্ভব না, লুক-আপ পারফরমেন্স linear হয়ে যাবে এতে। এর থেকে নেটিভ ইমপ্লেমেন্টেশন ভাল হবে কারণ তাহলে লুক-আপ পারফরমেন্স লগারিদমিক থেকে কন্সটান্ট পর্যন্ত হতে পারবে।

- -

সাধারণভাবে, DOM নোডে ডেটা bind করার জন্য যে কেউ সরাসরিভাবে অবজেক্টে প্রোপার্টি হিসেবে দিয়ে দিতে পারে, অথবা data-* attribute গুলো ব্যবহার করতে পারে। এর সমস্যা হল একই context এ চলছে এরকম যেকোন স্ক্রিপ্ট এই ডেটা ব্যবহার করতে পারবে। ম্যাপ আর উইকম্যাপ দিয়ে ডেটা কোন অব্জেক্টের সাথে সহজেই প্রাইভেট ভাবে bind করা যায়।

- -

TypedArrays

- -

স্ট্যান্ডার্ড নয়। আশা করা যায় ECMAScript 6. ভার্সনে স্ট্যান্ডার্ড হবে।

- -

আরও দেখুন

- - diff --git a/files/bn/web/javascript/guide/grammar_and_types/index.html b/files/bn/web/javascript/guide/grammar_and_types/index.html deleted file mode 100644 index b5dbd8bda4..0000000000 --- a/files/bn/web/javascript/guide/grammar_and_types/index.html +++ /dev/null @@ -1,635 +0,0 @@ ---- -title: 'ভ্যালু, ভ্যারিয়েবল, এবং লিটারেল' -slug: Web/JavaScript/Guide/Grammar_and_types -tags: - - জাভাস্ক্রিপ্ট -translation_of: Web/JavaScript/Guide/Grammar_and_types ---- -

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

- -

এই চ্যাপ্টারের আলোচ্য বিষয় হল ভ্যালু যা জাভাস্ক্রিপ্ট চেনে এবং জাভাস্ক্রিপ্ট এক্সপ্রেশন গঠনের মূল কাঠামো: ভেরিয়েবল, কনস্টান্ট, এবং লিটারেল সম্পর্কে বর্ণনা করে।

- -

Values(মান)

- -

জাভাস্ক্রিপ্ট নিচে উল্লেখিত পাঁচ ধরণের প্রাথমিক টাইপের ভ্যালুগুলো চেনে:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 
টাইপভ্যালু টাইপের উদাহরন / ব্যাখ্যা
সংখ্যা/Number42, 3.14159
বুলিয়ান/Booleantrue / false
স্ট্রিং/String"Howdy"
nullnull বা "শুন্য" ভ্যালু নির্দেশ করার জন্য এই কী-ওয়ার্ড টি ব্যবহার করা হয়। এছাড়া নাল একপ্রকার প্রিমিটিভ ভ্যালু। যেহেতু জাভাস্ক্রিপ্ট ইংরেজী হরফের কেইস-সংবেদনশীল(case-sensitive), null তাই Null, NULL অথবা এগুলোর সমমানের সবগুলো-ই ভিন্ন।
undefinedundefined হল top-level প্রোপার্টি যার ভ্যালু হচ্ছে এটা বা'অসংজ্ঞায়িত' হিসেবে চিহ্নিত করার জন্য । এটাএকটি প্রিমিটিভ ভ্যালু। 
- -

 

- -

এই গুটিকয়েক টাইপের ভ্যালু অথবা ডেটা টাইপ ব্যবহার করেই আসলে যেকোন কাজের কোড লিখে ফেলা সম্ভব। Integer আর ভগ্নাংশ  (floating value) রাখার জন্য পৃথক ডেটা-টাইপ নাই। একইভাবে, তারিখ রাখার জন্যে কোন আলাদা ডেটা-টাইপ নাই, অবশ্য আপনি চাইলে Date অবজেক্ট আর এর বিভিন্ন কাজের মেথড ব্যবহার করতে পারেন।

- -

Objects আর functions হচ্ছে ভাষাটির অন্যতম গুরুত্বপূর্ণ উপাদান। ফাংশন অন্যান্য প্রোগ্রামিং ভাষার মতই - কোন একটি বিশেষ কাজ করার জন্য লেখা হয় ফাংশন। আর অবজেক্টে থাকে নাম-ভ্যালু যুগল! (key-value pairs) - নাম ব্যবহার করে ভ্যালুতে কি রাখা আছে জানতে পারবেন।

- -

ডেটা-টাইপের রূপান্তর/কনভার্সন

- -

জাভাস্ক্রিপ্ট ডায়নামিক-টাইপ (dynamically typed) ভাষা, মানে কোন ভ্যারিয়েবলের টাইপ কি সেটা বলে দিতে হয়না, জাভাস্ক্রিপ্ট নিজেই রান-টাইমে বের করবে। এই টাইপ পরিবর্তন ও করা যায় রান-টাইমে। স্ক্রিপ্ট চলার সময় প্রয়োজনমত ভ্যারিয়েবলের টাইপ ও কনভার্ট করে নেওয়া হয়। ধরে নেই, আপনি নিচের মত করে ভ্যারিয়েবল ডিক্লেয়ার করেছেনঃ

- -
-
var answer = 42;
-
-
- -

পরে কোন এক সময় আপনি একই ভ্যারিয়েবলে স্ট্রিং মান বসালেনঃ

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

জাভাস্ক্রিপ্ট ডায়নামিক-টাইপ বলেই এই লাইনে কোন ভুল হয়নি। কোডের ভাষা জাভা/সি হলে এই লাইনেই ভুল হত।

- -

যদি কোন এক্সপ্রেশনে সংখ্যা আর স্ট্রিং মান এর মাঝে '+' ওপারেটের ব্যবহার করেন, তাহলে সংখ্যা-ভ্যালু গুলো স্ট্রিং এ কনভার্ট হয়ে যাবে। যেমনঃ

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

তবে '+' ব্যাতীত অন্য অপারেটরের ক্ষেত্রে কিন্তু সংখ্যাকে স্ট্রিং এ কনভার্ট করা হয় না! যেমনঃ

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

আসলে জাভাস্ক্রিপ্টে '+' সাইন দিয়ে যেমন নিউমেরিক সংখ্যার যোগ এর কাজ করা হয়। ঠিক তেমনি স্ট্রিং এর ক্ষেত্রে দুইটা স্ট্রিং কে জোড়া দেয়ার কাজ করে থাকে। যাকে ইংরেজিতে concatenation বলা হয়। এই কাজটা concat() নামক ফাংশন ব্যবহার করেও করা হয়ে থাকে।

- -

স্ট্রিং থেকে সংখ্যা

- -

স্ট্রিং কে সংখ্যায় কনভার্ট করতে পারবেন নিচের মেথডগুলো ব্যবহার করেঃ

- -

parseInt() আর parseFloat()

- -

দেখুনঃ parseInt() আর parseFloat() পাতায়।

- -

parseInt শুধুমাত্র integer রিটার্ন করে, তাই দশমিক সংখ্যা নিয়ে কাজকারবারেই এর ব্যবহার সীমিত। এছাড়া, একটি ভাল অভ্যাস হল এই ফাংশনে ২য় প্যারামিটারে কনভার্সনের ভিত্তি (base) পাঠিয়ে দেওয়া।

- -

'+' অপারেটর

- -

স্ট্রিং কে সংখ্যায় কনভার্ট করার আরেকটা বুদ্ধি হল '+' অপারেটর ব্যবহার করাঃ

- -
"1.1" + "1.1" = "1.11.1"
-(+"1.1") + (+"1.1") = 2.2   // শুধুমাত্র বোঝার সুবিধার জন্যে বন্ধনী ব্যবহার করা হয়েছে।
- -

ভ্যারিয়েবল

- -

আপনার এপ্লিকেশনে ব্যবহার করার জন্য যেকোন ভ্যালু, মেমরী তে সংরক্ষণ করে রাখতে ভ্যারিয়েবল ব্যবহার করুন। ভ্যারিয়েবল হিসেবে আমরা যে নামগুলো দিতে পারব তাদের identifiers বলা হয়। এগুলো দেওয়ার কিছু নিয়ম আছেঃ

- -

জাভাস্ক্রিপ্টে identifiers অবশ্যই কোন বর্ণ (letter), আন্ডারস্কোর (_) অথবা ডলার চিহ্ন ($) দিয়ে শুরু করতে হবে; পরবর্তী অক্ষরে সংখ্যা (0-9) ব্যবহার করা যাবে। জাভাস্ক্রিপ্টে হরফের case (ইংরেজীতে বড় হাতের বা ছোট হাতের হরফ) গুরুত্বপূর্ণ - ইংরেজী "A" থেকে শুরু করে "Z" পর্যন্ত বর্ণগুলো বড় হাতের, আর "a" থেকে শুরু করে "z" পর্যন্ত বর্ণগুলো ছোট হাতের।

- -

জাভাস্ক্রিপ্ট ১.৫ বা এর ওপরের ভার্সনগুলোতে আপনি ISO 8859-1 বা ইউনিকোড অক্ষর যেমন অ/আ/ক/খ ব্যবহার করতে পারবেনঃ

- -
var ফল = "কলা";
-alert(ফল);
- -

ভ্যারিয়েবলের নাম হিসেবে বাংলা অক্ষর ব্যবহার করছি! এছাড়াও \uXXXX {{anch("Unicode escape sequences")}} ক্যারেকটার হিসেবে আইডেন্টিফায়ারে ব্যবহার করা যাবে।

- -

বৈধ ভ্যারিয়েবলের নামের কিছু উদাহরণঃ Number_hits, temp99, এবং _name।

- -

ভ্যারিয়েবল তৈরি করা

- -

দু'টি উপায়ে ভ্যারিয়েবল তৈরি (declare) করা যায়ঃ

- -
    -
  • var কী-ওয়ার্ড ব্যবহার করে। যেমনঃ var x = 42। লোকাল আর গ্লোবাল দুই ধরণের ভ্যারিয়েবল-ই এই কীওয়ার্ড দিয়ে তৈরি করা যায়।
    • -
  • সরাসরি ভ্যালু এসাইন করে দিয়ে। যেমনঃ x = 42। এটি করলে global ভ্যারিয়েবল তৈরি হবে আর strict লেভেলের ওয়ার্নিং তৈরি হবে। তাই এই পদ্ধতি ব্যবহার করা অনুচিত।
    • -
- -

ভ্যারিয়েবলের মান কী?

- -

var স্টেটমেন্ট ব্যবহার করে কোন ভ্যালু দিয়ে ইনিশিয়ালাইজ না করলে তার মান হিসেবে থাকবে undefined।

- -

তৈরি করা হয়নি (undeclared) এমন কোন ভ্যারিয়েবল নিয়ে কাজ করতে গেলে ReferenceError এক্সেপশন পাবেনঃ

- -
var a;
-console.log("The value of a is " + a); // logs "The value of a is undefined"
-console.log("The value of b is " + b); // throws ReferenceError exception
-
- -

কোন ভ্যারিয়েবলে ভ্যালু দেওয়া হয়েছে কিনা জানতে তাই undefined ব্যবহার করুন। নিচের কোডে input ভ্যারিয়েবলে কোন ভ্যালু দেই নি, তাই if স্টেটমেন্টে true পাওয়া যাচ্ছেঃ

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

The following is related to "Variables" section as potential values in assignment.

- -

বুলিয়ান কন্টেক্সট এ ব্যবহার করলে অবশ্য undefined, false হিসেবে আচরণ করে। যেমনঃ নিচের কোডে myFunction ফাংশনটি একজিকিউট হবে কারণ myArray এলিমেন্ট টি তৈরি করা হয় নি।

- -
var myArray = new Array();
-if (!myArray[0]) myFunction();
-
- -

তবে numeric কন্টেক্সটে ব্যবহৃত হলে undefined কনভার্ট হবে NaN এঃ

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

যখন কোন নাল ভ্যারিয়েবল ব্যবহারের চেষ্টা করেন, তখন বুলিয়ান কন্টেক্সটে false আর numeric কন্টেক্সটে 0 হিসেবে এর মান নির্ণিত হয়ঃ

- -
var n = null;
-console.log(n * 32); // logs 0
-
- -

ভ্যারিয়েবলের স্থায়িত্ব/স্কোপ (scope)

- -

যখন একটা ভ্যারিয়েবল কে কোন ফাংশনের বাইরে তৈরি করেন তখন তাকে global ভ্যারিয়েবল বলি, কারণ ডকুমেন্টের যেকোন জায়গায় ঐ ভ্যারিয়েবল টা ব্যবহার করা যাবে। অপরদিকে, কোন ফাংশনের ভিতর যদি ভ্যারিয়েবলটি তৈরি করেন, তাহলে সেটি local ভ্যারিয়েবল, কারণ ঐ ফাংশনের বাইরে ঐ ভ্যারিয়েবলের কোন অস্তিত্ব নাই।

- -

জাভাস্ক্রিপ্টে ব্লক স্টেটেমেন্টের আলাদা কোন স্কোপ নেই; বরং একটা ফাংশনে যতগুলো ব্লক-ই থাকুক না কেন সবগুলো একই স্কোপে - ঐ ফাংশনের স্কোপে থাকে। যেমন নিচের কোড 5 লগ করবে (জাভাস্ক্রিপ্ট কনসোলে 5 লিখবে) কারণ x ভ্যারিয়েবলের স্কোপ if ব্লকের বাইরেও আছে।

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

অন্য প্রোগ্রামিং ভাষার সাথে জাভাস্ক্রিপ্টের অমিল এখানেই। আরেকটা অপ্রত্যাশিত ব্যাপার হলঃ পরে তৈরি করা হয়েছে এমন ভ্যারিয়েবল আগে ব্যবহার করতে পারবেন অনায়াসে। কারণ ধরে নেওয়া হয় যে ভ্যারিয়েবল গুলো ফাংশনের শুরুতেই টুকে নেওয়া হয়েছে। তবে যাই হোক, যদি কোন ভ্যালু দিয়ে ভ্যারিয়েবল initialize  না করেন তাহলে এর মান undefined পাবেন ।

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

২ নাম্বার উদাহরণ টি খুব সাবধানে দেখুন! ২ নম্বর উদাহরণটি এভাবে কাজ করবেঃ

- -
var myvar = "my value";
-
-(function() {
-  var myvar;
-  console.log(myvar); // undefined
-  myvar = "local value";
-})();
- -

যেমনটা বলেছিলাম, সব var স্টেটমেন্টগুলো যেন ফাংশনের শুরুতেই তৈরি করা হয়েছে। এভাবে কোড করলে ভুল হওয়ার সম্ভাবনা কমে যায় আর সহজেই বুঝতে পারা যায় কী হচ্ছে!

- -

গ্লোবাল ভ্যারিয়েবল

- -

গ্লোবাল ভ্যারিয়েবল হচ্ছে আসলে একটা global object এর প্রোপার্টি! ওয়েবপেইজে গ্লোবাল অবজেক্ট টা হচ্ছে window, তাই আপনি window.variable সিন্ট্যাক্স ব্যবহার করেও গ্লোবাল ভ্যারিয়েবল এক্সেস করতে পারবেন।

- -

need links to pages discussing scope chains and the global objectফলস্বরূপ, ব্রাউজারের এক উইন্ডো তে তৈরি করা  গ্লোবাল ভ্যারিয়েবল কে ব্রাউজারের অন্য উইন্ডোতে বা ফ্রেম থেকে এক্সেস করা যাবে উইন্ডো বা ফ্রেমটির name ব্যবহার করে। যেমন, কোন একটা FRAMESET ডকুমেন্টে তৈরি করা phoneNumber ভ্যারিয়েবলকে এর কোন বাচ্চা ফ্রেম (child frame) থেকে parent.phoneNumber ব্যবহার করে এক্সেস করতে পারবেন।

- -

কন্সট্যান্ট

- -

শুধু পড়া যাবে, মান পরিবর্তন করা যাব্বে না এমন ভ্যারিয়েবল তৈরি করতে পারেন const কী-ওয়ার্ড দিয়ে। এর আইডেন্টিফায়ার এর সিন্ট্যাক্স ভ্যারিয়েবলের আইডেন্টিফায়ার এর মতইঃ অবশ্যি অক্ষর, আন্ডারস্কোর অথবা $ চিহ্ন দিয়ে শুরু হতে হবে আর এরপর অক্ষর, সংখ্যা বা আন্ডারস্কোর থাকতে পারবে।

- -
const prefix = '212';
-
- -

শুরুতেই মান নির্ধারণ করে দেওয়ার পর কন্সট্যান্ট এর মান পরিবর্তন করা যায় না বা নতুন করে একই নামে কন্সট্যান্ট তৈরি করা যায় না।

- -

কন্সট্যান্ট এর স্কোপ ভ্যারিয়েবলের মতই। তবে const কী-ওয়ার্ড টা অবশ্যই লিখতে হবে, না হলে জাভাস্ক্রিপ্ট কীভাবে ধরবে আপনি ভ্যারিয়েবল নাকি কন্সট্যান্ট কোনটা তৈরি করতে চাচ্ছেন! কীওয়ার্ড টা ব্যবহার না করলে তাই একে ভ্যারিয়েবল হিসেবেই গণ্য করা হবে।

- -

একই স্কোপের ভেতর কোণ ফাংশন অথবা ভ্যারিয়েবলের নামে কন্সট্যান্ট তৈরি করা যায় না। যেমনঃ

- -
// নিচের কোডে ভুল আছে
-function f() {};
-const f = 5;
-
-// নিচেরটাও ভুল!
-function f() {
-  const g = 5;
-  var g;
-
-  //statements
-}
-
- -

লিট্যারেল

- -

লিটারেল কে জাভাস্ক্রিপ্টে ভ্যালু হিসেবে ব্যবহার করা যায়। এগুলো যেভাবে দেখানো হয়, সেভাবেই লিখতে হবে - এগুলো ভ্যারিয়েবল না। যেভাবে দেখানো হচ্ছে সেভাবেই কোডে লিখতে হবে বলেই এদের নাম লিটারেল (literal)! এই অংশে নিচের লিট্যারেল গুলো নিয়ে আলোচনা করেছিঃ

- -
    -
  • {{anch("Array লিটারেল")}}
    • -
  • {{anch("বুলিয়ান লিটারেল")}}
    • -
  • {{anch("ভগ্নাংশের লিটারেল")}}
    • -
  • {{anch("Integers")}}
    • -
  • {{anch("Object literals")}}
    • -
  • {{anch("String literals")}}
    • -
- -

Array লিটারেল

- -

Array লিটারেল হচ্ছে শূণ্য বা এর থেকে বেশি সংখ্যক "এক্সপ্রেশনের" একটা লিস্ট - এই সব এক্সপ্রেশনের প্রত্যেকেই হচ্ছে array টির একেকটি সদস্য - এই লিস্টের সামনে আর পরে তৃতীয় বন্ধনী ([]) ব্যবহার করতে হবে। যখন আপনি array লিটারেল ব্যবহার করে array তৈরি করবেন, তখন এই লিস্টের ভ্যালুগুলোকে array টির সদস্য হিসেবে বিবেচনা করে arrayটি ইনিশিয়ালাইজ করা হয়। আর যতগুলো সদস্য দিলাম, array এর length তত।

- -

নিচের উদাহরণে ৩ সদস্য বিশিষ্ট তদন্ত কমিটি থুক্কু coffees নামের array তৈরি করা হয়েছে - array টির length ও তাই তিনঃ

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

খেয়াল করুনঃ array লিটারেল হচ্ছে বিশেষ ধরণের অবজেক্ট ইনিশিয়ালাইজার। দেখুন কিভাবে অবজেক্ট ইনিশিয়ালাইজার ব্যবহার করা যায়।

- -

যদি টপ-লেভেল কোডে (মানে ফাংশনের বাইরের কোডে) array তৈরি করা হয়, যেই এক্সপ্রেশনে array লিটারেলটি আছে - সেই এক্সপ্রেশনটি যতবার execute করা হবে ততবার-ই array টি ইন্টারপ্রেট (নতুন করে তৈরি) করা হবে। এছাড়া কোন ফাংশনের ভেতর array লিটারেল ব্যবহার করলে যতবার ফাংশনটি কল করবেন ততবার লিটারেলটি তৈরি করা হবে।

- -

Array লিটারেল Array অবজেক্ট-ও বটে। পড়ুন বিস্তারিত।

- -

Array লিটারেলে বাড়তি কমা'র ব্যবহার

- -

Array লিটারেলে যে সব সদস্য দিতেই হবে এমন কথা নাই - যদি কোন row তে পরপর দুইটা কমা ব্যবহার করেন তাহলে কমা দুটোর মাঝের সদস্যটি undefined হিসেবে থাকে। নিচের উদাহরণে fish array তৈরি করা হয়েছে এভাবেঃ

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

এই array তে দুটো সদস্যের মান আছে আর একটির ভ্যালু নাই। (fish[0] হচ্ছে "Lion", fish[1] হচ্ছে undefined, আর fish[2] হচ্ছে "Angel")।

- -

সদস্যের লিস্টের শেষে যদি কমা দিয়ে রাখেন সেটি অগ্রাহ্য করা হবে। নিচের উদাহরণে array এর length তিন। myList[3] বলে কোন সদস্য নেই। শেষের এই অতরিক্ত কমা ছাড়া বাকি সব কমা-ই নতুন সদস্য নির্দেশ করে। (খেয়াল করুনঃ পুরোনো ব্রাউজারে শেষের অতিরিক্ত কমা ত্রুটি তৈরি করতে পারে তাই লিস্টের শেষে বাড়তি কমা না দেওয়াই ভাল।)

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

নিচের উদাহরণে array এর length চার।  myList[0] আর myList[2] অসংজ্ঞায়িত।

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

নিচের উদাহরণে array এর length চার।  myList[1] আর myList[3] অসংজ্ঞায়িত। শুধুমাত্র শেষের কমা অগ্রাহ্য করা হয়েছেঃ

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

অতিরিক্ত কমা'র ব্যবহারে ফলাফল কী আসে সেটা ঠিকমত বুঝতে পারাটা গুরুত্বপূর্ণ। নিজে কোড লেখার সময় array'র যে সদস্যগুলোর মান দিতে চান না, সরাসরি undefined মান বসিয়ে দিলে আপনার কোড সহজেই বুঝা যাবে আর ভবিষ্যতে কাজ করাও সহজ হবে।

- -

বুলিয়ান লিটারেল

- -

বুলিয়ান টাইপের দু'ধরণের লিটারেল আছেঃ true আর false।

- -

প্রিমিটিভ (যেগুলো অবজেক্ট না) true আর false বুলিয়ান ভ্যালু কে Boolean অবজেক্টের true আর false ভ্যালুর সাথে গুলিয়ে ফেলবেন না - এটি প্রিমিটিভ ভ্যালুগুলোর wrapper হিসেবেই কাজ করে। আরো তথ্যের জন্য বুলিয়ান অবজেক্ট নিয়ে পড়ুন।

- -

Integers

- -

Integers (পূর্ণ সংখ্যা) কে ১০ (দশমিক), ১৬ (হেক্সাডেসিমাল) বা ৮(অক্টাল) এর ভিত্তিতে (base) প্রকাশ করা যায়।

- -
    -
  • দশমিক পূর্ণ সংখ্যার লিটারেল হচ্ছে এক বা একাধিক সংখ্যার ক্রম যার শুরুতে শূণ্য থাকতে পারবে না।
    • -
  • শুরুতে শূণ্য সহ এক বা একাধিক সংখ্যার ক্রম ব্যবহার করলে সেটি অক্টাল বলে গণ্য হয়। অক্টাল ভিত্তিতে শুধুমাত্র ০-৭ এই কয়টি ডিজিট ব্যবহার করা যায়।
    • -
  • শুরুতে 0x (অথবা 0X) সহ এক বা একাধিক সংখ্যার ক্রম ব্যবহার করলে সেটি হেক্সাডেসিমাল বলে গণ্য হয়। এই ভিত্তিতে 0-9 এই কয়টি ডিজিট ছাড়াও a-f বা A - F এই অক্ষরগুলো ব্যবহার করা যায়।
    • -
- -

অক্টাল লিটেরেল ব্যবহার নিরুতসাহিত আর ECMA-262 ৩য় সংস্করণে বাদ দিয়ে দেওয়া হয়েছে। অবশ্য পুরনো কোড যাতে চলতে পারে সেহেতু জাভাস্ক্রিপ্ট ১.৫ এ এখনো অক্টাল সমর্থন করে।

- -

Integer লিটেরেলের কিছু ব্যবহারঃ

- -
0, 117 and -345 (দশমিক, base 10)
-015, 0001 and -077 (অক্টাল, base 8)
-0x1123, 0x00111 and -0xF1A7 (হেক্সাডেসিমাল, "hex" or base 16)
-
- -

ভগ্নাংশের লিটারেল

- -

ভগ্নাংশে নিচের বিষয়গুলো থাকেঃ

- -
    -
  • চিহ্ন (sign) সহ/ছাড়া দশমিক ভিত্তির পূর্ণ সংখ্যা (শুরুতে ''+'' অথবা ''- '' চিহ্ন থাকতে পারে)
    • -
  • একটা দশমিক ফোটা ("."),
    • -
  • দশমিক ফোটার পরের অংশ (যেটা কিনা ১০-ভিত্তির পূর্ণ সংখ্যা),
    • -
  • এক্সপোনেন্ট (exponent)
    • -
- -

Exponent অংশ "e" অথবা "E" দিয়ে শুরু হয় আর এর পর থাকে ১০-ভিত্তির পূর্ণসংখ্যা, যেটার শুরুতে আবার + অথবা - চিহ্ন থাকতে পারে নাও পারে। একটা ভগ্নাংশ লিটেরেলে কমপক্ষে একটি ডিজিট (সংখ্যা) এবং হয় দশমিক ফোটা অথবা "e" (অথবা "E") থাকতে হবে।

- -

ভগ্নাংশ লিটেরেলের কিছু উদাহরণ হলঃ 3.1415, -3.1E12, .1e12, আর 2E-12।

- -

পরিষ্কার করে বলতে গেলে, সিন্ট্যাক্স হচ্ছেঃ

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

যেমনঃ

- -
3.14
-2345.789
-.3333333333333333333
-
- -

অবজেক্ট লিটেরেল

- -

দ্বিতীয় বন্ধনীর ({}) ভেতর শূণ্য/এক/একাধিক নাম-ভ্যালু যুগল (name-value pairs) লিখে অবজেক্ট লিটেরেল তৈরি করা যায়। তবে কোন স্টেটমেন্টের শুরুতেই অবজেক্ট লিটেরেল ব্যবহার করা যায় না। এমনটা করলে ত্রুটি তৈরি হবে অথবা আপনি যেমনটা আশা করছিলেন সেরকম ফল পাবেন না - কারণ শুরুতেই { দেখে জাভাস্ক্রিপ্ট মনে করতে পারে আপনি ব্লক শুরু করছেন।

- -

নিচের উদাহরণে অবজেক্ট লিটেরেল দেখানো হয়েছে। car অবজেক্টের প্রথম সদস্য myCar নামের একটি প্রোপার্টি; দ্বিতীয় সদস্য getCar একটি ফাংশন (CarTypes("Honda")); ইনভোক করে, আর তৃতীয় সদস্য special ইতোমধ্যে তৈরি করা একটা ভ্যারিয়েবল ব্যবহার করে (Sales)।

- -
var Sales = "Toyota";
-
-function CarTypes(name) {
-  return (name == "Honda") ?
-    name :
-    "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
-
- -

এছাড়াও, কোন প্রোপার্টির নাম হিসেবে সংখ্যা কিংবা স্ট্রিং লিটেরেল ব্যবহার করতে পারেন অথবা এক অবজেক্টের ভেতর আরেকটিকে নেস্ট করতে পারেন। নিচের উদাহরণে দেখুনঃ

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

দয়া করে খেয়াল করুনঃ

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

স্ট্রিং লিটেরেল

- -

স্ট্রিং লিটেরেল তৈরি হয় শূণ্য বা এর থেকে বেশি ক্যারেকটার ডবল-কোটেশন (") বা উদ্ধৃতি চিহ্ন বা single quotation (') চিহ্ন এর মধ্যে রাখলে। তবে double বা single যেই উদ্ধৃতি চিহ্ন-ই ব্যবহার করুন না কেন স্ট্রিং লিটেরেলের শুরুতে আর শেষে একই প্রকারের চিহ্ন ব্যবহার করতে হবে। নিচে কিছু স্ট্রিং লিটেরেলের উদাহরণ দেখুনঃ

- -
    -
  • "foo"
    • -
  • 'bar'
    • -
  • "1234"
    • -
  • "one line \n another line"
    • -
  • "John's cat"
    • -
- -

স্ট্রিং লিটেরেলে আপনি স্ট্রিং অবজেক্টের যেকোন ফাংশন কল করতে পারবেন - জাভাস্ক্রিপ্ট স্বয়ংক্রিয়ভাবে স্ট্রিং লিটেরেল কে অস্থায়ী অবজেক্টে কনভার্ট করে, এরপর মেথডটি কল করে, তারপর অস্থায়ী অবজেক্টটি ফেলে দেয়। আপনি String.length প্রোপার্টি ব্যবহার করতে পারেন স্ট্রিং লিটেরেলের ওপরঃ

- -
"John's cat".length
-
- -

স্ট্রিং অবজেক্ট ব্যবহারেরে বিশেষ কোন কারণ না থাকলে আপনার উচিত হবে স্ট্রিং লিটেরেল-ই ব্যবহার করা। বিস্তারিত দেখুনঃ String Object ।

- -

স্ট্রিং এ বিশেষ অক্ষর ব্যবহার

- -

গতানুগতিক অক্ষরের পাশাপাশি বিশেহ অক্ষ্র ও স্ট্রিং এ ব্যবহার করতে পারবেন, যেমনটা দেখানো হয়েছে উদাহরণেঃ

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

নিচের টেবিলে জাভাস্ক্রিপ্টের বিশেষ অক্ষরগুলো যেগুলো স্ট্রিং এ ব্যবহার করতে পারবেন সেগুলো দেখানো হয়েছেঃ

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
টেবিল ২.১ জাভাস্ক্রিপ্টের বিশেষ অক্ষর
অক্ষরঅর্থ
\bBackspace
\fForm feed
\nনতুন লাইন
\rCarriage return
\tTab
\vVertical tab
\'ঊর্ধকমা or single quote
\"Double quote
\\Backslash character (\).
\XXXLatin-1 এনকোডিং সহ অক্ষরটি 0 এবং 377 এর মধ্যে তিনটি অক্টাল সংখ্যা দ্বারা XXX নির্দিষ্ট করা হয়েছে। উদাহরণস্বরূপ, \251 হল কপিরাইট প্রতীকের অকটাল ক্রম।
\xXXLatin-1 এনকোডিং সহ অক্ষরটি 00 এবং FF এর মধ্যকার সংখ্যাগুলি দ্বারা XXX নির্দিষ্ট করা হয়েছে। উদাহরণস্বরূপ, \xA9 হল কপিরাইট প্রতীকের হেক্সাডেসিমেল ক্রম।
\uXXXXইউনিকোড অক্ষর চারটি হেক্সাডেসিমেল সংখ্যা দ্বারা XXXX নির্দিষ্ট করা হয়। উদাহরণস্বরূপ, \u00A9 হল কপিরাইট প্রতীকের ইউনিকোড ক্রম। {{anch("Unicode escape sequences")}} এ দেখুন.
- -

অক্ষর এস্কেপ (escape) করা

- -

যেই অক্ষরগুলো টেবিল ২.১ এ দেখানো হয়নি সেগুলোর সামনের ব্যাক-স্ল্যাশ অগ্রাহ্য করা হয়। কিন্তু এই ব্যবহার নিরুতসাহিত করা হয় এবং করাও উচিত নয়।

- -

স্ট্রিং এর মধ্যে উদ্ধৃতি চিহ্ন দিতে পারেন এটির সামনে ব্যাক-স্ল্যাশ ব্যবহার করে। এটি-ই এসকেপ করা (উদ্ধৃতি চিহ্ন কে) হিসেবে পরিচিত। যেমনঃ

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

এর ফলাফল হবে এমনঃ

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

অবশ্য স্ট্রিং এ ব্যাক-স্ল্যাশ ব্যবহার করতে একেও এসকেপ করতে হবে! যেমন, স্ট্রিং এ c:\temp মান ব্যবহার করতে চাইলেঃ

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

লাইন-বিরতি এসকেপ করতে পারেন সেগুলোর আগে ব্যাক-স্ল্যাশ ব্যবহার করে। ব্যাক-স্ল্যাশ আর লাইন-বিরতি (কীবোর্ডের এন্টার চেপে লাইন বিরতি দেওয়া যায়) দুটোই স্ট্রিং এর মান থেকে সরিয়ে নেওয়া হবেঃ

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

যদিও জাভাস্ক্রিপ্টে "heredoc" সিন্ট্যাক্স  নেই, আপনি কাছাকাছি কিছু একটা পেতে পারেন লাইন-বিরতি এসকেপ ব্যবহার করে আর এসকেপ করা লাইনব্রেক প্রতি লাইনের শেষে দিয়েঃ

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

ইউনিকোড

- -

ইউনিকোড হচ্ছে বিশ্বব্যাপী স্বীকৃত ক্যারেকটার-কোডিং স্ট্যান্ডার্ড, কোন ভাষা (যেমনঃ বাংলা) লেখার জন্য ব্যবহৃত হয়। আমেরিকা, ইউরোপ, মধ্যপ্রাচ্য, আফ্রিকা, ভারত, এশিয়া, প্যাসিফিকা সব অঞ্চলের ভাষার-ই সাপোর্ট আছে ইউনিকোডে। শুধু তাই নয় ঐতিহাসিক পাণ্ডুলিপি আর টেকনিক্যাল সিম্বল দেওয়ার ও ব্যবস্থা আছে। পৃথিবীর বিভিন্ন ভাষায় লেখালেখির আদান-প্রদান, প্রসেস করা, উপ্সথাপন করা সবকিছুই ইউনিকোড দিয়ে করা যায় (যেমনটা আপনারা এখন এই লেখাটা বাংলায় পড়তে পারছেন ইউনিকোড এর জন্য-ই!)। এছাড়া সাধারণ গাণিতিক আর টেকনিকাল চিহ্ন-ও দেওয়া যায়। বহুভাষায় কম্পিউটিং করার যে আন্তর্জাতিক সমস্যা ছিল, ইউনিকোড তার সমাধান করেছে। অবশ্য নতুন কিছু ভাষা বা প্রাগৈতিহাসিক পাণ্ডুলিপির জন্য সাপোর্ট নাও পেতে পারেন।

- -

সব এনকোডিং এর জন্যে-ই ইউনিকোড বর্ণমালা ব্যবহার করা যায়। ASCII (American Standard Code for Information Interchange) বর্ণমালার ওপর ভিত্তি করে ইউনিকোড মডেল করা হয়েছে। প্রত্যেকটি হরফের জন্য এটি একটি সংখ্যা আর নাম ব্যবহার করে। এই সংখ্যাটি'র বিট রিপ্রেজেন্টেশন ও ক্যারেক্টার এনকোডিং এ বলা থাকে। ১৬-বিটের সংখ্যাটি হেক্সাডেসিমালে প্রকাশ করা হয়, আর এর সামনে থাকে U অক্ষরটি। যেমন, U+0041 দিয়ে A বুঝানো হয়। আর এই অক্ষরটির অনন্য নাম হল LATIN CAPITAL LETTER A।

- -

জাভাস্ক্রিপ্টের ১.৩ এর আগের ভার্সনে ইউনিকোড সাপোর্ট নেই।

- -

ASCII এবং ISO এর সাথে ইউনিকোড কম্প্যাটিবিলিটি

- -

ইউনিকোড আন্তর্জাতিক স্ট্যান্ডার্ড ISO/IEC 10646-1; 1993 দ্বারা সম্পূর্ণভাবে সমর্থিত, যেটা কিনা ISO 10646 এর অংশ।

- -

বেশকিছু ইউনিকোড স্ট্যান্ডার্ড (UTF-8, UTF-16 এবং ISO UCS-2 সহ) ব্যবহার করা হয় ইউনিকোড কে বিট হিসেবে দেখানোর জন্য। (মানে ব্যবহারিক প্রয়োগের জন্য!)

- -

ইউনিকোডের UTF-8 এনকোডিং ASCII বর্ণমালার সাথে সমর্থিত আর অনেক প্রোগ্রামেই একে ব্যবহার করা হয়। প্রথম ১২৮ টি ইউনিকোড অক্ষর দিয়ে ASCII অক্ষরগুলোকে প্রকাশ করা হয়, আর এগুলোর বাইট-মান ও একই (ASCII তে যেই মান ছিল) রাখা হয়েছে। U+0020 থেকে শুরু করে U+007E পর্যন্ত ইউনিকোড অক্ষরগুলো 0x20 থেকে  0x7E পর্যন্ত ASCII অক্ষরগুলোকে নির্দেশ করে। ASCII এর সাথে পার্থক্য হল ASCII ল্যাটিন বর্ণমালা সমর্থন করে (আর ৭ বিটের ক্যারেক্টার সেট দিয়ে তৈরি), যেখানে UTF-8 ১ থেকে ৪ টি অক্টেট ("অক্টেট" মানে হল ৮ বিট, বা ১ বাইট) দিয়ে প্রতিটি অক্ষর নির্দেশ করে। তাই, কয়েক মিলিয়ন অক্ষর UTF-8 দিয়ে দেখানো সম্ভব। আরো একটি বিকল্প এনকোডিং স্ট্যান্ডার্ড হল UTF-16 যেখানে প্রতিটি অক্ষর এর জন্য ২টি করে অক্টেট ব্যবহার করা হয়। এসকেপ সিকোয়েন্স ব্যবহার করে UTF-16 দিয়ে ইউনিকোড রেঞ্জে যত অক্ষর আছে সবগুলো দেখানো যায়, ৪টি অক্টেট ব্যবহার করে। ISO UCS-2 (Universal Character Set) দু'টি অক্টেট ব্যবহার করে।

- -

UTF-8/ইউনিকোডের জন্য জাভাস্ক্রিপ্ট আর নেভিগেটরের সাপোর্ট থাকার ফলাফল স্বরূপ আপনি ল্যাটিন নয়-এমন, আন্তর্জাতিক আর এলাকাভিত্তিক, আপনার নিজের ভাষার বর্ণমালা ব্যবহার করতে পারছেন, আরো পারছেন বিশেষ সব টেকনিকাল হরফ ব্যবহার করতে। বহুভাষায় ভাব প্রকাশ সমর্থন করার জন্য ইউনিকোড একটি স্ট্যান্ডার্ড পদ্ধতি। যেহেতু ইউনিকোডের UTF-8 এনকোডিং ASCII সমর্থন করে, প্রোগ্রামগুলো ASCII বর্ণমালাও ব্যবহার করতে পারে ইউনিকোডের পাশাপাশি, আর ASCII নয় এমন বর্ণমালা (যেমন, বাংলা!) ও ব্যবহার করতে পারেন জাভাস্ক্রিপ্টের কমেন্টে, স্ট্রিং লিটেরেলে, ভ্যারিয়েবলের আইডেন্টিফায়ারে, রেগুলার এক্সপ্রেশনে।

- -

ইউনিকোড এসকেপ সিকোয়েন্স

- -

আপনি স্ট্রিং লিটেরেল, রেগুলার এক্সপ্রেশন আর ভ্যারিয়েবলের আইডেন্টিফায়ারে ইউনিকোড এসকেপ সিকোয়েন্স ব্যবহার করতে পারেন। এসকেপ সিকোয়েন্সে ৬টি ASCII অক্ষর থাকেঃ \u আর ৪-ডিজিটের হেক্সাডেসিমেল সংখ্যা। যেমনঃ \u00A9 দিয়ে কপিরাইট চিহ্নটিকে প্রকাশ করা হয়। আর বুঝতেই পারছেন, প্রতিটি এসকেপ সিকোয়েন্স দিয়ে ১টি মাত্র অক্ষর প্রকাশ করা হয়।

- -

নিচের কোডে দেখিয়েছি কিভাবে কপিরাইট চিহ্ন আর "Netscape Communications" স্ট্রিংটি তৈরি করা হয়েছেঃ

- -
var x = "\u00A9 Netscape Communications";
- -

নিচের সারণিতে প্রায়-ই ব্যবহার করা হয় এমন কিছু বিশেষ অক্ষর আর তাদের ইউনিকোড ভ্যালু দেওয়া হলঃ

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
সারণী ২.২ বিশেষ অক্ষরের ইউনিকোড মান
প্রকৃতিইউনিকোড মাননামফর্ম্যাট
White space values\u0009Tab<TAB>
\u000BVertical Tab<VT>
\u000CForm Feed<FF>
\u0020Space<SP>
Line terminator values\u000ALine Feed<LF>
\u000DCarriage Return<CR>
Additional Unicode escape sequence values\u0008Backspace<BS>
\u0009Horizontal Tab<HT>
\u0022Double Quote"
\u0027Single Quote'
\u005CBackslash\
- -

জাভাস্ক্রিপ্টে ব্যবহৃত এসকেপ সিকোয়েন্স আর জাভাতে এর ব্যবহারের মাঝে পার্থক্য আছে। জাভাস্ক্রিপ্টে কখনোই এস্কেপ সিকোয়েন্স কে বিশেষ কোন অক্ষর হিসেবে ধরা হয় না প্রথমে। যেমন, কোন স্ট্রিং এর ভেতর লাইন-শেষ-করার-জন্য কোন এসকেপ সিকোয়েন্স ব্যবহার করলে সেটি লাইন বিরতি দেয় না, যতক্ষণ না ফাংশন একে ব্যবহার করছে। জাভাস্ক্রিপ্ট কমেন্টে ব্যবহার করা যেকোন এসকেপ সিকোয়েন্স উপেক্ষা করে। যদি কোন এসকেপ সিকোয়েন্স এক-লাইনের কমেন্টে ব্যবহার করা হয়, জাভা একে ইউনিকোড অক্ষর হিসেবে নেয়। স্ট্রিং লিটেরেলের ক্ষেত্রে জাভা কম্পাইলার প্রথমেই এসকেপ সিকোয়েন্সকে ইন্টারপ্রেট করে। যেমন, লাইন-বিরতি এস্কেপ অক্ষর (যেমন \u000A) যদি জাভায় ব্যবহার করেন, স্ট্রিং লিটেরেল টি ঐখানেই শেষ হয়ে যাবে। ফলস্বরূপ ত্রুটি তৈরি হবে কারণ জাভার স্ট্রিং লিটেরেলে লাইন-বিরতি চিহ্ন ব্যবহার করা যায় না। লাইন ফিড দেওয়ার জন্য জাভাতে আপনাকে \n ব্যবহার করতে হবে। জাভাস্ক্রিপ্টে এই \n এর কাজ এসকেপ সিকোয়েন্স দিয়েই করতে পারবেন।

- -

জাভাস্ক্রিপ্ট ফাইলে ইউনিকোড অক্ষর

- -

Gecko এর পুরোনো ভার্সন ধরে নিত XUL যেই জাভাস্ক্রিপ্ট ফাইল লোড করে, সেগুলো ল্যাটিন-১ ক্যারেক্টার এনকোডিং এ আছে।  Gecko ১.৮ আর পরের ভার্সনগুলোতে ফাইলটা যেই এনকোডিং এ থাকবে, সেই এনকোডিং ই ব্যবহার করা হয়। XUL জাভাস্ক্রিপ্টে আন্তর্জাতিক অক্ষর দেখুন আরো তথ্যের জন্য।

- -

ইউনিকোড ব্যবহার করে অক্ষর দেখানো

- -

বিভিন্ন ভাষার অক্ষর কিংবা টেকনিকাল চিহ্ন দেখানোর জন্য ইউনিকোড ব্যবহার করুন। অক্ষরগুলো ঠিকমত দেখানোর জন্য ক্লায়েন্ট (যেমন মজিলা ফায়ারফক্স বা নেটস্কেপ) এর ইউনিকোড সমর্থন করা প্রয়োজন। এছাড়াও, ক্লায়েন্টের কাছে উপযুক্ত ইউনিকোড ফন্ট থাকাটাও দরকার, আর ক্লায়েন্ট যেই প্ল্যাটফর্মে আছে সেখানেও ইউনিকোড সমর্থন করতে হবে। প্রায়ই দেখা যায় ইউনিকোড ফন্ট যেটি ব্যবহার করা হয়েছে সেটি সব ইউনিকোড অক্ষর দেখায় না। কিছু প্ল্যাটফর্ম, যেমন উইন্ডোজ ৯৫ এ ইউনিকোডের আংশিক সমর্থন রয়েছে।

- -

ASCII নয় এমন অক্ষর ইনপুট নেওয়ার জন্য ক্লায়েন্টকে ইউনিকোড হিসেবে ইনপুট নিতে হবে। শুধুমাত্র স্ট্যান্ডার্ড কীবোর্ড ব্যবহার করেই ইউনিকোড-সমর্থিত অতিরিক্ত অক্ষরগুলো ইনপুট নেওয়া সম্ভব নয়। মাঝে মাঝে, ইউনিকোড ইনপুট নেওয়ার একমাত্র উপায় হয়ে দাড়ায় ইউনিকোড এসকেপ সিকোয়েন্স ব্যবহার করে।

- -

ইউনিকোড নিয়ে আরো তথ্যের জন্য দেখুন Unicode হোমপেইজ আর ইউনিকোড স্ট্যান্ডার্ড, ২.০ সংস্করণ, প্রকাশকঃ Addison-Wesley, 1996।

- -

তথ্যাদি

- - diff --git a/files/bn/web/javascript/guide/index.html b/files/bn/web/javascript/guide/index.html deleted file mode 100644 index 856da74c7a..0000000000 --- a/files/bn/web/javascript/guide/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: জাভাস্ক্রিপ্ট গাইড -slug: Web/JavaScript/Guide -tags: - - JavaScript - - গাইড - - চ্যাপ্টার - - জাভাস্ক্রিপ্ট - - ভুমিকা -translation_of: Web/JavaScript/Guide ---- -
{{jsSidebar("জাভাস্ক্রিপ্ট গাইড")}}
- -

এই জাভাস্ক্রিপ্ট গাইডটি আপনাকে দেখাবে যে কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করতে হয় এবং এই ল্যাঙ্গুয়েজ টি সম্পর্কে একটি ওভারভিউ প্রদান করবে। আপনি যদি আরও বেশি জানতে আগ্রহী হয়ে থাকেন, তাহলে দয়া করে জাভাস্ক্রিপ্ট রেফেরেন্স লিঙ্কটিতে প্রবেশ করুন।

- - - - - - - - - -

{{Next("Web/JavaScript/Guide/Introduction")}}

diff --git a/files/bn/web/javascript/index.html b/files/bn/web/javascript/index.html deleted file mode 100644 index 11f2a43a50..0000000000 --- a/files/bn/web/javascript/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: জাভাস্ক্রিপ্ট -slug: Web/JavaScript -tags: - - জাভা স্ক্রিপ্ট - - জাভাস্ক্রিপ্ট -translation_of: Web/JavaScript ---- -
{{JsSidebar}}
- -

JavaScript (সংক্ষেপে JS) একটি lightweight ইন্টারপ্রেটেড বা যথাসময়ে কম্পাইল করা প্রোগ্রামিং ভাষা যাতে রয়েছে {{Glossary("First-class Function", "first-class functions")}}। যদিও এটি ওয়েব পেজের স্ক্রিপ্টিং ভাষা হিসেবে বেশি পরিচিত, এছাড়া ব্রাউজার ছাড়াও অন্যান্য জায়গায় ব্যবহার করা হয়, যেমন node.js and Apache CouchDB. JavaScript হল {{Glossary("Prototype-based programming", "prototype-based")}}, multi-paradigm, dynamic scripting language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. JavaScript সম্পর্কে আরো পড়ুন.

- -

সাইটের এই সেকশনটি JavaScript ভাষার জন্য নিবেদিত, এবং ওয়েব পেইজ অথবা হোস্ট এনভাইরনমেন্টের সাথে সম্পৃক্ত নয়। {{Glossary("API","APIs")}} সম্পর্কে জানতে Web APIs এবং DOM দেখুন।

- -

JavaScript  স্ট্যান্ডার্ড এর নাম ECMAScript। ২০১২ সাল পর্যন্ত পাওয়া তথ্য অনুযায়ী সব নতুন ব্রাউজার ECMAScript 5.1 সমর্থন করে। পুরোনো ব্রাউজারগুলো অন্তত ECMAScript 3 সমর্থন করে। ২০১৫ সালের ১৭ জুন ECMA International তার ষষ্ঠ প্রধান সংস্করণ প্রকাশ করে, আনুষ্ঠানিক ভাবে যা ECMAScript 2015 নামে অভিহিত, এবং সাধারন ভাবে এটি ECMAScript 6 বা ES6 নামে পরিচিত। তখন থেকেই বাৎসরিক প্রকাশ চক্র অনুযায়ী ECMAScript -এর মান প্রকাশিত হচ্ছে। এই ডকুমেন্টেশনটি সর্বশেষ খসড়া সংস্করণ, যা ECMAScript 2018 কে বোঝায়।

- -

 JavaScript এর সাথে  Java programming language কে গুলিয়ে ফেলবেন না। "Java" এবং "JavaScript" উভয় প্রোগ্রামিং ভাষাই Oracle কোম্পানির ট্রেডমার্ক বা ট্রেডমার্ক হিসেবে নিবন্ধিত যুক্তরাষ্ট্র এবং অন্যান্য দেশে। যাইহোক, এই দুই প্রোগ্রামিং ভাষার বাক্য গঠন প্রণালী (syntax), শব্দার্থবিদ্যা(semantics), এবং ব্যবহার একেবারেই আলাদা।

- -
-
-

টিউটোরিয়াল

- -

জাভাস্ক্রিপ্ট দিয়ে কিভাবে প্রোগ্রাম করা হয় সেটা শিখুন টিউটোরিয়াল এবং নির্দেশিকার মাধ্যমে।

- -

যারা একেবারেই নতুন

- -

আপনি যদি জাভাস্ক্রিপ্ট শিখতে চান কিন্তু আপনার জাভাস্ক্রিপ্ট বা অন্য কোন প্রোগ্রামিং সম্পকে কোন পূর্ব অভিজ্ঞতা নেই তাহলে আমাদের জাভাস্ক্রিপ্ট শিক্ষাক্ষেত্রের দিকে এগিয়ে যান। নিম্নে সম্পূর্ণ মডিউলগুলো রয়েছে।

- -

জাভাস্ক্রিপ্টের প্রথম ধাপ

- -

জাভাস্ক্রিপ্ট এর বৈশিষ্ট “ভেরিয়েবল, স্ট্রিং, নাম্বারস, এবং এরেইস” এগুলোর আলোচনার সাথে  কিছু মৌলিক প্রশ্নের উত্তর দিন যেমন “জাভাস্ক্রিপ্ট কি?”, “ এটা দেখতে কেমন?”, এবং “এটা কি করে?”

- -

জাভাস্ক্রিপ্ট নির্মান অংশ

- -

জাভাস্ক্রিপ্ট এর মৌলিক বৈশিষ্ট এর সাথে সাধারণভাবে সম্মুক্ষীন হওয়া বিভিন্ন ধরনের কোড ব্লকের দিকে আমাদের দৃষ্টি আকর্ষন করা যেমন conditional statements, loops, functions, এবং events. 

- -

জাভাস্ক্রিপ্ট অবজেক্ট এর পরিচিতি 

- -

 জাভাস্ক্রিপ্ট এর অবজেক্ট ওরিন্টেড প্রকৃতিটা বুঝা গুরুত্বপূর্ণ  যদি আপনি ভাষার জ্ঞান নিয়ে সামনে এগিয়ে যেতে চান   এবং  আধিক কার্যকর কোড লিখতে চান, এখানে আমাদের দেয়া মডিউল আপনাকে সহযোগিতা করবে।

- -

জাভাস্ক্রিপ্ট নির্দেশনা

- -
-
জাভাস্কিপ্ট নির্দেশনা
-
জাভাস্ক্রিপ্ট ভাষা এর একটি বিস্তারিত নির্দেশনার উদ্দেশ্য যাদের জাভাস্ক্রিপ্ট বা অন্য কোনো প্রোগ্রামিং ভাষা সম্পর্কে পূর্বপর্তী অভিজ্ঞতা আছে ।
-
- -

মধ্যবর্তী

- -
-
ক্লায়েন্ট সাইড ওয়েব APIs
-
- -

ওয়েব সাইট বা এপ্লিকেশনগুলির জন্য ক্লায়েন্ট সাইড জাভাস্ক্রিপ্ট লেখার সময় API গুলি ব্যবহার শুরু করার আগে খুব বেশী দুরে যাবেন না--ব্রাউজার ও ওপারের্টং সিস্টেম চলন্ত অবস্থায় ইন্টারফেইসগুলি বিভিন্ন দিক সুচারু রূপে পরিচালনা করার জন্য বা এমনকি অন্য ওয়েব সাইট বা সেবাগুলি থেকে আসা ডাটা। এই মডিউলে আমরা এপিআই কি ? এবং কিভাবে খুবই প্রচলিত কিছু এপিআই  আপনার ডেভেলপমেন্টের কাজে ব্যবহার করতে হয় সেই সম্পর্কে জানবো।

- -
-
-
-
জাভাস্ক্রিপ্ট এর  পুনঃউপস্থাপন
-
যারা মনে করে , তারা জাভাস্ক্রিপ্ট সম্পর্কে জানে, তাদের জন্য একটি সংক্ষিপ্ত বিবরণ।
-
- -
-
জাভাস্ক্রিপ্ট এর ডাটার গঠনশৈলী
-
জাভাস্ক্রিপ্ট এর ডাটার গঠনশৈলী সম্পর্কে সংক্ষিপ্ত বিবরন।
-
সমতুল্যতা এবং অভিন্নতা 
-
- -

জাভাস্ক্রিপ্ট তিন ধরনের মান সরবরাহ করে- তুলনার ক্ষেত্রে: কঠোর সমতার ক্ষেত্রে === এবং শিথিল সমতার ক্ষেত্রে == ।

- -
-
 Closures
-
closure হচ্ছে একটি ফাংশন এবং lexical environment এর সমাহার যেটি পূর্বেই ঘোষনা করা হয়েছে।
-
- -

এডভান্স

- -
-
ইনহেরিটেন্স এবং প্রোটোটাইপ চেইন
-
ব্যাপকভাবে ভুল বুঝা বুঝি এবং অবহেলা করা হচ্ছে প্রোটোটাইপ ইনহেরিটেন্স ব্যাখ্য ।
-
কঠোর মুড
-
কঠোর মুড( Strict mode ) এর সঙ্গা হচ্ছে  যে আপনি এটি আরম্ভ করার পূর্বে কোনো ভেরিয়েবল ব্যবহার করতে পারবেন না। এটা ECMAScript 5 একটি সীমাবদ্ধতা, দ্রুত কর্মক্ষমতা এবং সহজ ডিবাগিংএর জন্য। 
-
জাভাস্ক্রিপ্টের অ্যারে টাইপ
-
জাভাস্ক্রিপ্টের অ্যারে নতুন বাইনারি তথ্য অ্যাক্সেসের জন্য একটি প্রক্রিয়া প্রদান  করে।
-
মেমরি ম্যানেজমেন্ট
-
মেমরীর জীবনচক্র এবং জাভাস্ক্রিপ্টের মধ্যেকার আবর্জনা সংগ্রহ।
-
-
-
- - - -
-

Reference

- -

ব্রাউজ করুন.সম্পূর্ণ  জেএস- রেফারেন্স ডকুমেন্টেশন ।

- -
-
Standard objects
-
Get to know standard built-in objects Array, Boolean, Date, Error, Function, JSON, Math, Number, Object, RegExp, String, Map, Set, WeakMap, WeakSet, and others.
-
Expressions & operators
-
Learn more about the behavior of JavaScript's operators instanceof, typeof, new, this, and more.
-
Statements & declarations
-
Learn how do-while, for-in, for-of, try-catch, let, var, const, if-else, switch, and more JavaScript statements and keywords work.
-
Functions
-
Learn how to work with JS functions to develop your applications.
-
- -

Tools & resources

- -

Helpful tools while writing and debugging your JavaScript code.

- -
-
Firefox Developer Tools
-
Scratchpad, Web Console, JavaScript Profiler, Debugger, and more.
-
Firebug
-
Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
-
JavaScript Shells
-
A JavaScript shell allows you to quickly test snippets of JavaScript code.
-
TogetherJS
-
-

Collaboration made easy.

-
-
Stack Overflow
-
Stack Overflow questions tagged with "JavaScript".
-
JavaScript versions and release notes
-
Browse JavaScript's feature history and implementation status.
-
-
-
diff --git a/files/bn/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/bn/web/javascript/inheritance_and_the_prototype_chain/index.html deleted file mode 100644 index 0db75f2c69..0000000000 --- a/files/bn/web/javascript/inheritance_and_the_prototype_chain/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: ইনহেরিটেন্স এবং প্রোটোটাইপ-চেইন -slug: Web/JavaScript/Inheritance_and_the_prototype_chain -tags: - - Guide - - Inheritence - - JavaScript - - NeedsContent - - OOP - - অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং - - ইনহেরিটেন্স - - গাইড - - জাভাস্ক্রিপ্ট -translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain ---- -
{{jsSidebar("Advanced")}}
- -

যেসব ডেভেলপার আগে ক্লাস-ভিত্তিক প্রোগ্রামিং ল্যাংগুয়েজে (যেমন সি++ বা জাভা) কোড করছেন, তারা জাভাস্ক্রিপ্টে কোড করতে গিয়ে একটু বিভ্রান্ত হবেন, কেননা জাভাস্ক্রিপ্ট একটি ডায়নামিক ল্যাংগুয়েজ আর এতে কোন class ইমপ্লিমেন্টেশন নেই ( যদিও class নামে একটি কীওয়ার্ড জাভাস্ক্রিপ্ট সংরক্ষণ করে রেখেছে - তাই এই নামে কোন ভ্যারিয়েবল তৈরি করতে পারবেন না )।

- -

জাভাস্ক্রিপ্টে ইনহেরিটেন্স বিষয়ক একটি মাত্র কন্সট্রাক্ট আছেঃ অবজেক্ট। সব অবজেক্ট এরই আরেকটা অবজেক্ট এর সাথে অভ্যন্তরীণ লিঙ্ক থাকে যাকে তার প্রটোটাইপ বলে। আবার এই প্রোটাটাইপ অবজেক্টের ও নিজস্ব একটি প্রটোটাইপ থাকে। এভাবে চলতেই থাকে, যতক্ষণ না আমরা null হিসেবে কোন অবজেক্টের প্রটোটাইপ পাই। null এর কোন প্রটোটাইপ থাকে না, তাই যখন null পাব তখন বুঝতে হবে প্রটোটাইপ চেইনের শেষপ্রান্তে এসে গেছি।

- -

প্রটোটাইপ মডেল কে অনেকে জাভাস্ক্রিপ্টের দুর্বলতা বললেও আসলে প্রটোটাইপ-ভিত্তিক ইনহেরিটেন্স মডেল সি++/জাভা ভিত্তিক ক্লাসিকাল মডেলের থেকে অনেক শক্তিশালী। যেমন, প্রটোটাইপ মডেল কে ভিত্তি করে আমরা সহজেই ক্ল্যাসিকাল মডেল তৈরি করতে পারি, কিন্তু ক্লাসিকাল মডেলের ওপর ভিত্তি করে চাইলেই প্রটোটাইপ ভিত্তিক মডেল তৈরি করা সম্ভব না।

- -

প্রটোটাইপ-চেইন ভিত্তিক ইনহেরিটেন্স

- -

প্রোপার্টি ইনহেরিট করা

- -

জাভাস্ক্রিপ্টে অবজেক্ট কে আমরা বিভিন্ন প্রোপার্টির "ব্যাগ" (থলে) হিসেবে কল্পনা করতে পারিঃ এই ব্যাগে যেকোন সময় যেকোন প্রোপার্টি ঢুকানো যায়, ব্যাগ থেকে ফেলেও দেওয়া যায় (যে কারণে আমরা জাভাস্ক্রিপ্টকে ডায়নামিক বলি) । প্রতিটা অবজেক্টের সাথে একটা বিশেষ অবজেক্টের লিংক থাকে, এই বিশেষ অবজেক্ট টাকে আমরা মূল অবজেক্টটার প্রটোটাইপ বলি। আমরা যখন কোন অবজেক্টের কোন প্রোপার্টি কে ব্যবহার করতে চাই, তখন যা ঘটেঃ

- -
// ধরে নেই, আমার o নামের একটা অবজেক্ট আছে যেটার প্রোটোটাইপ চেইন এমনঃ
-// {a:1, b:2} ---> {b:3, c:4} ---> null
-// মানে হল, o অবজেক্ট হচ্ছে {a:1, b:2}, যেটার প্রোটোটাইপ হচ্ছে {b:3, c:4} ইনহেরিটেন্স হিসেবে চিন্তা করলে,
-// {a:1, b:2} অবজেক্ট টা {b:3, c:4} অবজেক্ট থেকে ইনহেরিট করা হয়েছে। {b:3, c:4} এর কোন প্রোটোটাইপ নাই, যেকারণে null দেখানো হয়েছে।
-// 'a' আর 'b' এই দুইটা কেবল o অবজেক্টের নিজস্ব প্রোপার্টি।
-
-// এই উদাহরণে, someObject.[[Prototype]] দিয়ে আমরা someObject অবজেক্টের প্রোটোটাইপ বুঝিয়েছি।
-// এইটা শুধুই উদাহরণের জন্য (ECMAScript স্ট্যান্ডার্ড অনুযায়ী) আর আসল কোডে এরকম কিছু লেখা যাবে না!
-
-console.log(o.a); // 1
-// o অবজেক্টের কি 'a' নামে কোন প্রোপার্টী আছে? হ্যাঁ, আর এর মান হল 1
-
-console.log(o.b); // 2
-// o অবজেক্টের কি 'b' নামে কোন প্রোপার্টী আছে? হ্যাঁ, আর এর মান হল 2
-// o অবজেক্টের প্রোটোটাইপেরও কিন্তু 'b' প্রোপার্টী ছিল, কিন্তু এটি দেখা যাবে না। একে বলে "property shadowing"
-
-console.log(o.c); // 4
-// o অবজেক্টের কি 'c' নামে কোন প্রোপার্টী আছে? নাই, তাহলে এর প্রোটোটাইপে দেখতে হবে এই নামে প্রোপার্টি আছে কিনা।
-// o.[[Prototype]] এ কি 'c' প্রোপার্টি আছে? ? হ্যাঁ, আর এর মান হল 4
-
-console.log(o.d); // undefined
-// o অবজেক্টের কি 'd' নামে কোন প্রোপার্টী আছে? নাই, তাহলে এর প্রোটোটাইপে দেখতে হবে এই নামে প্রোপার্টি আছে কিনা।
-// o.[[Prototype]] অবজেক্টের কি 'd' নামে কোন প্রোপার্টী আছে? নাই, তাহলে এর প্রোটোটাইপে দেখতে হবে এই নামে প্রোপার্টি আছে কিনা।
-// o.[[Prototype]].[[Prototype]] এ null পেয়েছি, তারমানে আর খোজার কিছু নাই। undefined রিটার্ন করতে হবে।
-
- -

কোন অবজেক্টের প্রোপার্টি সেট করে দিলে সেটা সেই অবজেক্টের নিজস্ব প্রোপার্টি হিসেবে কাজ করে। একমাত্র ব্যতিক্রম হলঃ getter অথবা setter দিয়ে যখন ইনহেরিটেড প্রোপার্টি নিয়ে কাজ করা হয়।

- -

"মেথড" ইনহেরিট করা

- -

ক্লাস-ভিত্তিক প্রোগ্রামিং ভাষাতে যেভাবে "মেথড" বা ফাংশন এর ধারণা প্রচলিত আছে, জাভাস্ক্রিপ্টে মেথডের ধারণা টা ঠিক সেভাবে নয়। জাভাস্ক্রিপ্টে, যেকোন ফাংশন সাধারণ প্রোপার্টির মতই অবজেক্টে যোগ করা যায়। ইনহেরিট করা ফাংশন অবজেক্টের বাদবাকি প্রোপার্টির মতই স্বাভাবিকভাবে কাজ করবে। উপরের উদাহরণে দেখানো property shadowing এখানেও কাজ করবে (এক্ষেত্রে একে বলা হবে method overriding বা ফাংশন ওভাররাইডিং)

- -

যখন ইনহেরিট-হওয়া কোন ফাংশন একজিকিউট হয়, তখন this এর মান হিসেবে ইনহেরিট-হওয়া অবজেক্ট টা থাকে, প্রোটোটাইপ অবজেক্ট টা না যেখানে ফাংশনটা নিজস্ব প্রোপার্টি হিসেবে দেওয়া হয়েছিল।

- -
var o = {
-  a: 2,
-  m: function(b){
-    return this.a + 1;
-  }
-};
-
-console.log(o.m()); // 3
-// এখানে o.m কল করার সময়, 'this' পয়েন্ট করে আছে o কে।
-
-var p = Object.create(o);
-// p অবজেক্ট টা o থেকে ইনহেরিট করা হয়েছে
-
-p.a = 12; // 'a' নামে p অবজেক্টে নিজস্ব প্রোপার্টি তৈরি হল
-console.log(p.m()); // 13
-// এখানে p.m কল করার সময়, 'this' পয়েন্ট করে আছে p কে।
-// তাই যখন o অবজেক্টের m ফাংশনটা p ইনহেরিট করল, 'this.a' এর মানে দাঁড়ালো p.a, 'a' নামের p এর নিজস্ব প্রোপার্টি।
-
- -

অবজেক্ট তৈরি করার বিভিন্ন উপায় এবং ফলাফল হিসেবে প্রোটোটাইপ চেইন

- -

সিন্ট্যাক্স কন্সট্রাক্টস ব্যবহার করে অবজেক্ট তৈরি করা

- -
var o = {a: 1};
-
-// নতুন তৈরি করা o অবজেক্টের প্রটোটাইপ হচ্ছে Object.prototype
-// o এর 'hasOwnProperty' নামের কোন নিজস্ব প্রোপার্টি নেই।
-// hasOwnProperty হচ্ছে Object.prototype এর একটি নিজস্ব প্রোপার্টি। তাই o, Object.prototype থেকে hasOwnProperty ইনহেরিট করেছে।
-// Object.prototype এর প্রোটোটাইপ হচ্ছে null
-// o ---> Object.prototype ---> null
-
-var a = ["yo", "whadup", "?"];
-
-// Arrays inherit from Array.prototype (which has methods like indexOf, forEach, etc.)
-// The prototype chain looks like:
-// a ---> Array.prototype ---> Object.prototype ---> null
-
-function f(){
-  return 2;
-}
-
-// Functions inherit from Function.prototype (which has methods like call, bind, etc.)
-// f ---> Function.prototype ---> Object.prototype ---> null
-
- -

কন্সট্রাক্টর এর সাহায্যে

- -

জাভাস্ক্রিপ্টে "কন্সট্রাক্টর", "শুধুই" সাধারণ যেকোন ফাংশন যাকে কিনা new অপারেটর দিয়ে কল করা হয়।

- -
function Graph() {
-  this.vertexes = [];
-  this.edges = [];
-}
-
-Graph.prototype = {
-  addVertex: function(v){
-    this.vertexes.push(v);
-  }
-};
-
-var g = new Graph();
-// g is an object with own properties 'vertexes' and 'edges'.
-// g.[[Prototype]] is the value of Graph.prototype when new Graph() is executed.
-
- -

Object.create দিয়ে

- -

ECMAScript 5 নতুন একটি মেথড নিয়ে এসেছেঃ Object.create। এই মেথড কল করলে নতুন একটি অবজেক্ট তৈরি হয় যার প্রোটোটাইপ হল মেথডটির প্রথম প্যারামিটারঃ

- -
var a = {a: 1};
-// a ---> Object.prototype ---> null
-
-var b = Object.create(a);
-// b ---> a ---> Object.prototype ---> null
-console.log(b.a); // 1 (inherited)
-
-var c = Object.create(b);
-// c ---> b ---> a ---> Object.prototype ---> null
-
-var d = Object.create(null);
-// d ---> null
-console.log(d.hasOwnProperty); // undefined, because d doesn't inherit from Object.prototype
-
- -
-

পারদর্শীতা

- -

কোন অবজেক্টে কোন প্রোপার্টি আছে কিনা সেটা জানার জন্য, অবজেক্টের পুরো প্রটোটাইপ-চেইন খুঁজে দেখতে হয়। কোডের পার্ফরমেন্সে এটা ভালই বাজে প্রভাব ফেলে। যেসব কোডের পারফরমেন্স খুব ভাল হওয়া দরকার, সেখানে এই ইস্যু প্রভাব ফেলতে পারে। অবজেক্টে কোন প্রোপার্টি খুঁজে না পেলে পুরো প্রোটোটাইপ চেইনের কোথাও প্রোপার্টি টা আছে কিনা খুঁজা হয়।

- -

এছাড়াও, অবজেক্টের প্রোপার্টি গুলো ঘুরে দেখার সময় (iterate করার সময়) প্রোটোটাইপ-চেইনের প্রত্যেকটা প্রোপার্টি খুঁজে দেখা (enumerate করা) হবে।

- -

অবজেক্টে কোন প্রোপার্টি শুধুমাত্র নিজস্ব প্রোপার্টি হিসেবে আছে কিনা (প্রোটোটাইপ চেইনের অন্য কোথাও নয়) hasOwnProperty মেথড ব্যবহার উচিত। সব অবজেক্ট এই মেথডটাকে Object.prototype থেকে ইনহেরিট করে।

- -

জাভাস্ক্রিপ্টে hasOwnProperty-ই একমাত্র ফাংশন যা প্রোপার্টি নিয়ে কাজ করে এবং পুরো প্রোটোটাইপ চেইন ঘুরে (traverse) না।

- - -
খেয়াল করুনঃ কোন প্রোপার্টি undefined কিনা এই চেক করাই যথেষ্ট নয়।  হতে পারে প্রোপার্টি টি বহাল তবিয়তেই আছে, কেবল এর মান undefined দেওয়া হয়েছে।
- -
-

বদ অভ্যাসঃ নেটিভ প্রোটোটাইপ এক্সটেন্ড করা

- -

একটা বাজে ব্যাপার প্রায়ই করা হয় তা হল Object.prototype অথবা অন্য কোন বিল্ট-ইন প্রটোটাইপ এক্সটেন্ড করা।

- -

এই পদ্ধতিকে বলা হয় monkey patching যা encapsulation এর সর্বনাশ ছাড়া আর কিছুই নয়। Prototype.js এর মত কিছু জনপ্রিয় ফ্রেমওয়ার্কে এর ব্যবহার দেখা গেলেও, স্ট্যান্ডার্ড-নয়, এমন ফিচার দিয়ে বিল্ট-ইন টাইপগুলোর বোঝা বাড়ানোর কোন মানে হয় না।

- -

বিল্ট-ইন টাইপ এক্সটেন্ড করার একমাত্র যৌক্তিক কারণ হতে পারে জাভাস্ক্রিপ্টের নতুন ফিচার গুলো পুরনো ইঞ্জিনে দেওয়া; যেমন Array.forEach, ইত্যাদি।

-
- -
-

পরিশেষে

- -

প্রটোটাইপ ইনহেরিটেন্স মডেল এর ভিত্তি করে জটিল জটিল কোড লেখার আগে একে ভালভাবে বুঝা উচিত। এছাড়াও, পারফরমেন্স জনিত সমস্যা থেকে দূরে থাকার জন্য লম্বা প্রটোটাইপ চেইন পরিহার করতে হবে আর যেখানে সম্ভব প্রটোটাইপ চেইন ভেঙ্গে ছোট করতে হবে। সবশেষে, জাভাস্ক্রিপ্টের নতুন ফিচার যাতে সব ইঞ্জিনেই চলে, শুধুমাত্র সেক্ষেত্রে নেটিভ প্রোটোটাইপ এক্সটেন্ড করা যাবে, এছাড়া এর ব্যবহার সর্বক্ষেত্রে নিরুৎসাহিত করা হয়।

-
-
diff --git a/files/bn/web/javascript/language_resources/index.html b/files/bn/web/javascript/language_resources/index.html deleted file mode 100644 index 4aed82dadb..0000000000 --- a/files/bn/web/javascript/language_resources/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: জাভাস্কিপ্ট ভাষার রিসোর্স -slug: Web/JavaScript/Language_Resources -tags: - - JavaScript - - JavaScript Language Resource - - জাভাস্ক্রিপ্ট -translation_of: Web/JavaScript/Language_Resources -original_slug: Web/JavaScript/ভাষার_রিসোর্স ---- -
{{JsSidebar}}
- -

ECMAScript হচ্ছে এক প্রকার স্ক্রিপ্টিং ভাষা যার ওপর ভিত্তি করে জাভাস্ক্রিপ্ট তৈরি। আন্তর্জাতিক ECMA সংস্থা ECMA স্ক্রিপ্ট এর জন্য ECMA-262 এবং ECMA-402 এই দুইটি মান নির্ধারণ করে দিয়েছে। নিচের ECMAScript স্টান্ডার্ডগুলো অনুমোদিত হয়েছে:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
নামলিঙ্কতারিখবর্ননা
ECMA-262 সংস্করণ ৫.১PDF, HTMLজুন ২০১১ -

ECMAScript ৫.১, জাভাস্ক্রিপ্ট নির্দেশনার সর্বশেষ প্রকাশিত সংস্করণ
- এই সংস্করণ সম্পূর্ণরূপে আন্তর্জাতিক আইএসও/আইইসি ১৬২৬২:২০১১ এর তৃতীয় সংস্করণ সমর্থিত। এতে ES5 Errata সংশোধন অন্তর্ভূক্ত করা হয়েছে, নতুন কোন বৈশিষ্ট্য অন্তর্ভুক্ত করা হয়নি।

-
CMA-402PDF, HTMLডিসেম্বর ২০১২ECMAScript আন্তর্জাতিকায়ন API
ECMA-357 সংস্করণ ২PDFডিসেম্বর ২০০৫এক্সএমএল (E4X) এর জন্য ECMAScript.
অপ্রচলিত সংস্করণ
ECMA-262PDFজুন ১৯৯৭ECMAScript এর আদি সংস্করণ।
ECMA-262 সংস্করণ ২PDFআগস্ট ১৯৯৮ -

ECMAScript স্ট্যান্ডার্ড এর দ্বিতীয় সংস্করণ; এছাড়াও আইএসও স্ট্যান্ডার্ড ১৬২৬২।

-
ECMA-262 সংস্করণ ৩PDFডিসেম্বর ১৯৯৯ECMAScript প্রমিত তৃতীয় সংস্করণ; জাভাস্ক্রিপ্ট এর ১.৫ এর অনুরূপ।
- আরো দেখুন errata
ECMA-262 সংস্করণ ৫PDFডিসেম্বর ২০০৯ECMAScript ৫
- আরো দেখুন ES5 errata এবং ECMAScript ৫ মোজিলা সমর্থন
ECMA-357PDFজুন ২০০৪এক্সএমএল (E4X) এর জন্য ECMAScript
- আরো দেখুন E4X errata
- -

ECMAScript এর ইতিহাস সম্পর্কে আরও তথ্যের জন্য উইকিপিডিয়া ECMAScript এন্ট্রি দেখুন।

- -

ECMAScript ভাষার স্পেসিফিকেশন এর পরবর্তী সংস্করণ, কোড-নাম "হারমনি" এর কাজ এ আপনি অংশগ্রহণ বা শুধু ট্র্যাক করতে পারেন, এবং পাবলিক উইকির মাধ্যমে ECMAScript আন্তর্জাতিকায়ন এপিআই স্পেসিফিকেশন এবং ecmascript.org হতে es-discuss মেইলিং তালিকায় অংশগ্রহণ করতে পারেন।

- -

বাস্তবায়ন

- -
    -
  • SpiderMonkey - ফায়ারফক্স এ ব্যবহৃত জাভাস্ক্রিপ্ট ইঞ্জিন;
    • -
  • Rhino - জাভায় লেখা জাভাস্ক্রিপ্ট ইঞ্জিন;
    • -
  • Tamarin - (অ্যাডোবি ® ফ্ল্যাশ ® প্লেয়ার এ ব্যবহৃত) ActionScript ভার্চুয়াল মেশিন;
    • -
  • অন্যান্য বাস্তবায়ন (উইকিপিডিয়া)
    • -
- -

আরো দেখুন

- - diff --git a/files/bn/web/javascript/reference/global_objects/index.html b/files/bn/web/javascript/reference/global_objects/index.html deleted file mode 100644 index 91433921eb..0000000000 --- a/files/bn/web/javascript/reference/global_objects/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: Global Objects -slug: Web/JavaScript/Reference/Global_Objects -tags: - - JavaScript -translation_of: Web/JavaScript/Reference/Global_Objects ---- -
{{jsSidebar("Objects")}}
- -

This chapter documents all of JavaScript's standard, built-in objects, including their methods and properties.

- -
-

The term "global objects" (or standard built-in objects) here is not to be confused with the global object. Here, global objects refer to objects in the global scope (but only if ECMAScript 5 strict mode is not used; in that case it returns undefined). The global object itself can be accessed using the {{jsxref("Operators/this", "this")}} operator in the global scope. In fact, the global scope consists of the properties of the global object, including inherited properties, if any.

- -

Other objects in the global scope are either created by the user script or provided by the host application. The host objects available in browser contexts are documented in the API reference. For more information about the distinction between the DOM and core JavaScript, see JavaScript technologies overview.

- -

Standard objects (by category)

- -

Value properties

- -

These global properties return a simple value; they have no properties or methods.

- -
    -
  • {{jsxref("Infinity")}}
    • -
  • {{jsxref("NaN")}}
    • -
  • {{jsxref("undefined")}}
    • -
  • {{jsxref("null")}} literal
    • -
- -

Function properties

- -

These global functions—functions which are called globally rather than on an object—directly return their results to the caller.

- -
    -
  • {{jsxref("Global_Objects/eval", "eval()")}}
    • -
  • {{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}
    • -
  • {{jsxref("Global_Objects/isFinite", "isFinite()")}}
    • -
  • {{jsxref("Global_Objects/isNaN", "isNaN()")}}
    • -
  • {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}
    • -
  • {{jsxref("Global_Objects/parseInt", "parseInt()")}}
    • -
  • {{jsxref("Global_Objects/decodeURI", "decodeURI()")}}
    • -
  • {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}
    • -
  • {{jsxref("Global_Objects/encodeURI", "encodeURI()")}}
    • -
  • {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}
    • -
  • {{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}
    • -
  • {{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}
    • -
- -

Fundamental objects

- -

These are the fundamental, basic objects upon which all other objects are based. This includes objects that represent general objects, functions, and errors.

- -
    -
  • {{jsxref("Object")}}
    • -
  • {{jsxref("Function")}}
    • -
  • {{jsxref("Boolean")}}
    • -
  • {{jsxref("Symbol")}} {{experimental_inline}}
    • -
  • {{jsxref("Error")}}
    • -
  • {{jsxref("EvalError")}}
    • -
  • {{jsxref("InternalError")}}
    • -
  • {{jsxref("RangeError")}}
    • -
  • {{jsxref("ReferenceError")}}
    • -
  • {{jsxref("SyntaxError")}}
    • -
  • {{jsxref("TypeError")}}
    • -
  • {{jsxref("URIError")}}
    • -
- -

Numbers and dates

- -

These are the base objects representing numbers, dates, and mathematical calculations.

- -
    -
  • {{jsxref("Number")}}
    • -
  • {{jsxref("Math")}}
    • -
  • {{jsxref("Date")}}
    • -
- -

Text processing

- -

These objects represent strings and support manipulating them.

- -
    -
  • {{jsxref("String")}}
    • -
  • {{jsxref("RegExp")}}
    • -
- -

Indexed collections

- -

These objects represent collections of data which are ordered by an index value. This includes (typed) arrays and array-like constructs.

- -
    -
  • {{jsxref("Array")}}
    • -
  • {{jsxref("Int8Array")}}
    • -
  • {{jsxref("Uint8Array")}}
    • -
  • {{jsxref("Uint8ClampedArray")}}
    • -
  • {{jsxref("Int16Array")}}
    • -
  • {{jsxref("Uint16Array")}}
    • -
  • {{jsxref("Int32Array")}}
    • -
  • {{jsxref("Uint32Array")}}
    • -
  • {{jsxref("Float32Array")}}
    • -
  • {{jsxref("Float64Array")}}
    • -
- -

Keyed collections

- -

These objects represent collections which use keys; these contain elements which are iterable in the order of insertion.

- -
    -
  • {{jsxref("Map")}} {{experimental_inline}}
    • -
  • {{jsxref("Set")}} {{experimental_inline}}
    • -
  • {{jsxref("WeakMap")}} {{experimental_inline}}
    • -
  • {{jsxref("WeakSet")}} {{experimental_inline}}
    • -
- -

Vector collections

- -

{{Glossary("SIMD")}} vector data types are objects where data is arranged into lanes.

- -
    -
  • {{jsxref("SIMD")}} {{experimental_inline}}
    • -
  • {{jsxref("float32x4", "SIMD.float32x4")}} {{experimental_inline}}
    • -
  • {{jsxref("float64x2", "SIMD.float64x2")}} {{experimental_inline}}
    • -
  • {{jsxref("int8x16", "SIMD.int8x16")}} {{experimental_inline}}
    • -
  • {{jsxref("int16x8", "SIMD.int16x8")}} {{experimental_inline}}
    • -
  • {{jsxref("int32x4", "SIMD.int32x4")}} {{experimental_inline}}
    • -
- -

Structured data

- -

These objects represent and interact with structured data buffers and data coded using JavaScript Object Notation (JSON).

- -
    -
  • {{jsxref("ArrayBuffer")}}
    • -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("JSON")}}
    • -
- -

Control abstraction objects

- -
    -
  • {{jsxref("Promise")}} {{experimental_inline}}
    • -
  • {{jsxref("Generator")}} {{experimental_inline}}
    • -
  • {{jsxref("GeneratorFunction")}} {{experimental_inline}}
    • -
- -

Reflection

- -
    -
  • {{jsxref("Reflect")}} {{experimental_inline}}
    • -
  • {{jsxref("Proxy")}} {{experimental_inline}}
    • -
- -

Internationalization

- -

Additions to the ECMAScript core for language-sensitive functionalities.

- -
    -
  • {{jsxref("Intl")}}
    • -
  • {{jsxref("Global_Objects/Collator", "Intl.Collator")}}
    • -
  • {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}
    • -
  • {{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}
    • -
- -

Non-standard objects

- -
    -
  • {{jsxref("Iterator")}} {{non-standard_inline}}
    • -
  • {{jsxref("ParallelArray")}} {{non-standard_inline}}
    • -
  • {{jsxref("StopIteration")}} {{non-standard_inline}}
    • -
- -

Other

- - -
diff --git a/files/bn/web/javascript/reference/global_objects/isfinite/index.html b/files/bn/web/javascript/reference/global_objects/isfinite/index.html deleted file mode 100644 index 0ff5ef06bc..0000000000 --- a/files/bn/web/javascript/reference/global_objects/isfinite/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: isFinite -slug: Web/JavaScript/Reference/Global_Objects/isFinite -translation_of: Web/JavaScript/Reference/Global_Objects/isFinite ---- -
-
-
{{jsSidebar("Objects")}}
-
-
- -

সারসংক্ষেপ

- -

একটি আর্গুমেন্টকে যাচাই করে বলে এটি সসীম সংখ্যা কিনা।

- -

সিনট্যাক্স

- -

isFinite(number)

- -

প্যারামিটার

- -
-
number
-
যে সংখ্যাটিকে যাচাই করতে হবে।
-
- -

বিবরণ

- -

isFinite একটি টপ লেভেল ফাংশন এবং কোন অবজেক্টের সঙ্গে সংশ্লিষ্ট নয়।

- -

এই ফাংশনটির সাহায্যে আপনি জানতে পারবেন কোন সংখ্যা সসীম সংখ্যা কিনা। isFinite এর আর্গুমেন্টে আসা সংখ্যাটিকে পরীক্ষা করে দেখে। আর্গুমেন্টটি NaN, ধনাত্বক অসীম অথবা ঋণাত্মক অসীম হলে এই মেথডটি false রিটার্ন করে; নয়তো true রিটার্ন করে।

- -

উদাহরণ

- -

উদাহরণ: isFinite ব্যবহার করা

- -

আপনি আপনার ক্লায়েন্টের ইনপুট নিয়ে পরীক্ষা করে দেখতে পারেন তা সসীম সংখ্যা কিনা।

- -
if (isFinite(ClientInput)) {
-   /* take specific steps */
-}
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
ECMAScript 2nd Edition.StandardInitial definition.
{{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}}{{Spec2('ES6')}} 
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

See also

- -
    -
  • {{jsxref("Number.isFinite()")}}
    • -
  • {{jsxref("Number.NaN()")}}
    • -
  • {{jsxref("Number.POSITIVE_INFINITY")}}
    • -
  • {{jsxref("Number.NEGATIVE_INFINITY")}}
    • -
diff --git a/files/bn/web/javascript/reference/global_objects/number/index.html b/files/bn/web/javascript/reference/global_objects/number/index.html deleted file mode 100644 index a4740d7dab..0000000000 --- a/files/bn/web/javascript/reference/global_objects/number/index.html +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: Number -slug: Web/JavaScript/Reference/Global_Objects/Number -tags: - - JavaScript - - JavaScript Reference - - Number - - Reference - - Référence(2) -translation_of: Web/JavaScript/Reference/Global_Objects/Number ---- -
{{JSRef}}
- -

The Number JavaScript object is a wrapper object allowing you to work with numerical values. A Number object is created using the Number() constructor.

- -

Constructor

- -
new Number(value);
- -

Parameters

- -
-
value
-
The numeric value of the object being created.
-
- -

Description

- -

The primary uses for the Number object are:

- -
    -
  • If the argument cannot be converted into a number, it returns {{jsxref("Global_Objects/NaN", "NaN")}}.
    • -
  • In a non-constructor context (i.e., without the {{jsxref("Operators/new", "new")}} operator), Number can be used to perform a type conversion.
    • -
- -

Properties

- -
-
{{jsxref("Number.EPSILON")}} {{experimental_inline}}
-
The smallest interval between two representable numbers.
-
{{jsxref("Number.MAX_SAFE_INTEGER")}} {{experimental_inline}}
-
The maximum safe integer in JavaScript (253 - 1).
-
{{jsxref("Number.MAX_VALUE")}}
-
The largest positive representable number.
-
{{jsxref("Number.MIN_SAFE_INTEGER")}} {{experimental_inline}}
-
The minimum safe integer in JavaScript (-(253 - 1)).
-
{{jsxref("Number.MIN_VALUE")}}
-
The smallest positive representable number - that is, the positive number closest to zero (without actually being zero).
-
{{jsxref("Number.NaN")}}
-
Special "not a number" value.
-
{{jsxref("Number.NEGATIVE_INFINITY")}}
-
Special value representing negative infinity; returned on overflow.
-
{{jsxref("Number.POSITIVE_INFINITY")}}
-
Special value representing infinity; returned on overflow.
-
{{jsxref("Number.prototype")}}
-
Allows the addition of properties to a Number object.
-
- -
{{jsOverrides("Function", "properties", "MAX_VALUE", "MIN_VALUE", "NaN", "NEGATIVE_INFINITY", "POSITIVE_INFINITY", "protoype")}}
- -

Methods

- -
-
{{jsxref("Number.isNaN()")}} {{experimental_inline}}
-
Determine whether the passed value is NaN.
-
{{jsxref("Number.isFinite()")}} {{experimental_inline}}
-
Determine whether the passed value is a finite number.
-
{{jsxref("Number.isInteger()")}} {{experimental_inline}}
-
Determine whether the passed value is an integer.
-
{{jsxref("Number.isSafeInteger()")}} {{experimental_inline}}
-
Determine whether the passed value is a safe integer (number between -(253 - 1) and 253 - 1).
-
{{jsxref("Number.toInteger()")}} {{obsolete_inline}}
-
Used to evaluate the passed value and convert it to an integer (or {{jsxref("Global_Objects/Infinity", "Infinity")}}), but has been removed.
-
{{jsxref("Number.parseFloat()")}} {{experimental_inline}}
-
The value is the same as {{jsxref("Global_Objects/parseFloat", "parseFloat")}} of the global object.
-
{{jsxref("Number.parseInt()")}} {{experimental_inline}}
-
The value is the same as {{jsxref("Global_Objects/parseInt", "parseInt")}} of the global object.
-
- -
{{jsOverrides("Function", "Methods", "isNaN")}}
- -

Number instances

- -

All Number instances inherit from {{jsxref("Number.prototype")}}. The prototype object of the Number constructor can be modified to affect all Number instances.

- -

Methods

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

Examples

- -

Example: Using the Number object to assign values to numeric variables

- -

The following example uses the Number object's properties to assign values to several numeric variables:

- -
var biggestNum = Number.MAX_VALUE;
-var smallestNum = Number.MIN_VALUE;
-var infiniteNum = Number.POSITIVE_INFINITY;
-var negInfiniteNum = Number.NEGATIVE_INFINITY;
-var notANum = Number.NaN;
-
- -

Example: Integer range for Number

- -

The following example shows minimum and maximum integer values that can be represented as Number object (for details, refer to EcmaScript standard, chapter 8.5 The Number Type):

- -
var biggestInt = 9007199254740992;
-var smallestInt = -9007199254740992;
-
- -

When parsing data that has been serialized to JSON, integer values falling out of this range can be expected to become corrupted when JSON parser coerces them to Number type. Using {{jsxref("Global_Objects/String", "String")}} instead is a possible workaround.

- -

Example: Using Number to convert a Date object

- -

The following example converts the {{jsxref("Global_Objects/Date", "Date")}} object to a numerical value using Number as a function:

- -
var d = new Date('December 17, 1995 03:24:00');
-print(Number(d));
-
- -

This displays "819199440000".

- -

Example: Convert numeric strings to numbers

- -
Number("123")     // 123
-Number("")        // 0
-Number("0x11")    // 17
-Number("0b11")    // 3
-Number("0o11")    // 9
-Number("foo")     // NaN
-Number("100a")    // NaN
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
ECMAScript 1st Edition.StandardInitial definition. Implemented in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7', 'Number')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number-objects', 'Number')}}{{Spec2('ES6')}}New methods and properties added: ({{jsxref("Number.EPSILON", "EPSILON")}}, {{jsxref("Number.isFinite", "isFinite")}}, {{jsxref("Number.isInteger", "isInteger")}}, {{jsxref("Number.isNaN", "isNaN")}}, {{jsxref("Number.parseFloat", "parseFloat")}}, {{jsxref("Number.parseInt", "parseInt")}})
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

See also

- -
    -
  • {{jsxref("Global_Objects/NaN", "NaN")}}
    • -
  • The {{jsxref("Global_Objects/Math", "Math")}} global object
    • -
diff --git a/files/bn/web/javascript/reference/global_objects/number/isfinite/index.html b/files/bn/web/javascript/reference/global_objects/number/isfinite/index.html deleted file mode 100644 index 0ad18815ef..0000000000 --- a/files/bn/web/javascript/reference/global_objects/number/isfinite/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Number.isFinite -slug: Web/JavaScript/Reference/Global_Objects/Number/isFinite -translation_of: Web/JavaScript/Reference/Global_Objects/Number/isFinite ---- -
-
{{JSRef}}
-
- -

সারসংক্ষেপ

- -

পাস করা ভ্যালু সসীম কিনা তা জানায়। গ্লোবাল isFinite এর উন্নততর সংস্করণ।

- -

সিনট্যাক্স

- -
Number.isFinite(testValue);
- -

প্যারামিটার

- -
-
testValue
-
সে সংখ্যা পরীক্ষা করে বলা হবে সসীম কিনা।
-
- -

বিবরণ

- -

গ্লোবাল isFinite ফাংশনটির সঙ্গে তুলনা করে বলা যায়, এই মেথডটি জোর পূর্বক প্যারামিটারকে সংখ্যার রুপান্তর করে না। কেবলমাত্র যে সকল নাম্বার টাইপের আর্গুমেন্ট সসীম সংখ্যা হবে, তাদের জন্যই মেথডটি true রিটার্ন করবে।

- -

উদাহরণ

- -
Number.isFinite(Infinity);  // false
-Number.isFinite(NaN);       // false
-Number.isFinite(-Infinity); // false
-
-// all other numbers true
-Number.isFinite(0);
-Number.isFinite(2e64);
-
-// everything else is false
-Number.isFinite("0");       // false, would've been true with global isFinite
-
- -

Polyfill

- -
Number.isFinite = Number.isFinite || function(value) {
-    return typeof value === "number" && isFinite(value);
-}
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
-

{{SpecName('ES6', '#sec-number.isfinite', 'Number.isInteger')}}

- 		{{Spec2('ES6')}}Initial definition.
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("19")}}{{CompatGeckoDesktop("16")}}{{CompatNo}}{{CompatOpera("15")}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("16")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

See also

- -
    -
  • The {{jsxref("Global_Objects/Number", "Number")}} object it belongs to.
    • -
diff --git a/files/bn/web/javascript/reference/index.html b/files/bn/web/javascript/reference/index.html deleted file mode 100644 index e749b0831e..0000000000 --- a/files/bn/web/javascript/reference/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: জাভাস্ক্রিপ্ট রেফারেন্স -slug: Web/JavaScript/Reference -tags: - - JavaScript -translation_of: Web/JavaScript/Reference ---- -
{{JsSidebar}}
- -

This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more about this reference.

- -

Global Objects

- -

This chapter documents all the JavaScript standard built-in objects, along with their methods and properties.

- -
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects', 'Standard objects (by category)')}}
- -

Statements

- -

This chapter documents all the JavaScript statements and declarations.

- -
{{page('/en-US/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}
- -

Expressions and operators

- -

This chapter documents all the JavaScript expressions and operators.

- -
{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}
- -

Functions

- -

This chapter documents how to work with JavaScript functions to develop your applications.

- - - -

Additional reference pages

- - diff --git a/files/bn/web/javascript/reference/statements/index.html b/files/bn/web/javascript/reference/statements/index.html deleted file mode 100644 index cfda7a107f..0000000000 --- a/files/bn/web/javascript/reference/statements/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: জাভাস্ক্রিপ্ট স্টেটমেন্ট সমুহ -slug: Web/JavaScript/Reference/statements -tags: - - JavaScript -translation_of: Web/JavaScript/Reference/Statements ---- -
{{jsSidebar("Statements")}}
- -

জাভাস্ক্রিপ্ট স্টেটমেন্ট এর মধ্যে কিওয়ার্ড থাকে, যা যথাযথ সিনট্যাক্স এর সাথে ব্যবহার করা হয়। একটি একক স্টেটমেন্ট এর মধ্যে একাধিক লাইন থাকতে পারে। সেমিকোলন দিয়ে আলাদা করা হলে একাধিক স্টেটমেন্ট এক লাইনেই লেখা সম্ভব। এক্ষেত্রে একটি কিওয়ার্ড হবে না, কিওয়ার্ড এর একটি গ্রুপ হবে।

- -

Statements and declarations by category

- -

For an alphabetical listing see the sidebar on the left.

- -

Control flow

- -
-
{{jsxref("Statements/block", "Block")}}
-
A block statement is used to group zero or more statements. The block is delimited by a pair of curly brackets.
-
{{jsxref("Statements/break", "break")}}
-
Terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement.
-
{{jsxref("Statements/continue", "continue")}}
-
Terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.
-
{{jsxref("Statements/Empty", "Empty")}}
-
An empty statement is used to provide no statement, although the JavaScript syntax would expect one.
-
{{jsxref("Statements/if...else", "if...else")}}
-
Executes a statement if a specified condition is true. If the condition is false, another statement can be executed.
-
{{jsxref("Statements/switch", "switch")}}
-
Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.
-
{{jsxref("Statements/throw", "throw")}}
-
Throws a user-defined exception.
-
{{jsxref("Statements/try...catch", "try...catch")}}
-
Marks a block of statements to try, and specifies a response, should an exception be thrown.
-
- -

Declarations

- -
-
{{jsxref("Statements/var", "var")}}
-
Declares a variable, optionally initializing it to a value.
-
{{experimental_inline}} {{jsxref("Statements/let", "let")}}
-
Declares a block scope local variable, optionally initializing it to a value.
-
{{experimental_inline}} {{jsxref("Statements/const", "const")}}
-
Declares a read-only named constant.
-
- -

Functions and classes

- -
-
{{jsxref("Statements/function", "function")}}
-
Declares a function with the specified parameters.
-
{{experimental_inline}} {{jsxref("Statements/function*", "function*")}}
-
Generators functions enable writing iterators more easily.
-
{{jsxref("Statements/return", "return")}}
-
Specifies the value to be returned by a function.
-
{{experimental_inline}} {{jsxref("Statements/class", "class")}}
-
Declares a class.
-
- -

Iterations

- -
-
{{jsxref("Statements/do...while", "do...while")}}
-
Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.
-
{{jsxref("Statements/for", "for")}}
-
Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.
-
{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}
-
Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.
-
{{jsxref("Statements/for...in", "for...in")}}
-
Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.
-
{{experimental_inline}} {{jsxref("Statements/for...of", "for...of")}}
-
Iterates over iterable objects (including arrays, array-like objects, iterators and generators), invoking a custom iteration hook with statements to be executed for the value of each distinct property.
-
{{jsxref("Statements/while", "while")}}
-
Creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.
-
- -

Others

- -
-
{{jsxref("Statements/debugger", "debugger")}}
-
Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.
-
{{experimental_inline}} {{jsxref("Statements/export", "export")}}
-
Used to export functions to make them available for imports in external modules, another scripts.
-
{{experimental_inline}} {{jsxref("Statements/import", "import")}}
-
Used to import functions exported from an external module, another script.
-
{{jsxref("Statements/label", "label")}}
-
Provides a statement with an identifier that you can refer to using a break or continue statement.
-
- -
-
{{deprecated_inline}} {{jsxref("Statements/with", "with")}}
-
Extends the scope chain for a statement.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
ECMAScript 1st Edition.StandardInitial definition.
{{SpecName('ES5.1', '#sec-12', 'Statements')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}{{Spec2('ES6')}}New: function*, let, for...of, yield, class
- -

See also

- - diff --git a/files/bn/web/javascript/typed_arrays/index.html b/files/bn/web/javascript/typed_arrays/index.html deleted file mode 100644 index 8bcdf2a39d..0000000000 --- a/files/bn/web/javascript/typed_arrays/index.html +++ /dev/null @@ -1,268 +0,0 @@ ---- -title: JavaScript typed arrays -slug: Web/JavaScript/Typed_arrays -translation_of: Web/JavaScript/Typed_arrays ---- -
Swa{{JsSidebar("Advanced")}}
- -

JavaScript typed arrays are array-like objects that provide a mechanism for reading and writing raw binary data in memory buffers. As you may already know, {{jsxref("Array")}} objects grow and shrink dynamically and can have any JavaScript value. JavaScript engines perform optimizations so that these arrays are fast.

- -

However, as web applications become more and more powerful, adding features such as audio and video manipulation, access to raw data using WebSockets, and so forth, it has become clear that there are times when it would be helpful for JavaScript code to be able to quickly and easily manipulate raw binary data. This is where typed arrays come in. Each entry in a JavaScript typed array is a raw binary value in one of a number of supported formats, from 8-bit integers to 64-bit floating-point numbers.

- -

However, typed arrays are not to be confused with normal arrays, as calling {{jsxref("Array.isArray()")}} on a typed array returns false. Moreover, not all methods available for normal arrays are supported by typed arrays (e.g. push and pop).

- -

Buffers and views: typed array architecture

- -

To achieve maximum flexibility and efficiency, JavaScript typed arrays split the implementation into buffers and views. A buffer (implemented by the {{jsxref("ArrayBuffer")}} object) is an object representing a chunk of data; it has no format to speak of and offers no mechanism for accessing its contents. In order to access the memory contained in a buffer, you need to use a view. A view provides a context — that is, a data type, starting offset, and the number of elements — that turns the data into a typed array.

- -

Typed arrays in an ArrayBuffer

- -

ArrayBuffer

- -

The {{jsxref("ArrayBuffer")}} is a data type that is used to represent a generic, fixed-length binary data buffer. You can't directly manipulate the contents of an ArrayBuffer; instead, you create a typed array view or a {{jsxref("DataView")}} which represents the buffer in a specific format, and use that to read and write the contents of the buffer.

- -

Typed array views

- -

Typed array views have self-descriptive names and provide views for all the usual numeric types like Int8, Uint32, Float64 and so forth. There is one special typed array view, the Uint8ClampedArray. It clamps the values between 0 and 255. This is useful for Canvas data processing, for example.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TypeValue RangeSize in bytesDescriptionWeb IDL typeEquivalent C type
{{jsxref("Int8Array")}}-128 to 12718-bit two's complement signed integerbyteint8_t
{{jsxref("Uint8Array")}}0 to 25518-bit unsigned integeroctetuint8_t
{{jsxref("Uint8ClampedArray")}}0 to 25518-bit unsigned integer (clamped)octetuint8_t
{{jsxref("Int16Array")}}-32768 to 32767216-bit two's complement signed integershortint16_t
{{jsxref("Uint16Array")}}0 to 65535216-bit unsigned integerunsigned shortuint16_t
{{jsxref("Int32Array")}}-2147483648 to 2147483647432-bit two's complement signed integerlongint32_t
{{jsxref("Uint32Array")}}0 to 4294967295432-bit unsigned integerunsigned longuint32_t
{{jsxref("Float32Array")}}1.2×10-38 to 3.4×1038432-bit IEEE floating point number (7 significant digits e.g., 1.123456)unrestricted floatfloat
{{jsxref("Float64Array")}}5.0×10-324 to 1.8×10308864-bit IEEE floating point number (16 significant digits e.g., 1.123...15)unrestricted doubledouble
{{jsxref("BigInt64Array")}}-263 to 263-1864-bit two's complement signed integerbigintint64_t (signed long long)
{{jsxref("BigUint64Array")}}0 to 264-1864-bit unsigned integerbigintuint64_t (unsigned long long)
- -

DataView

- -

The {{jsxref("DataView")}} is a low-level interface that provides a getter/setter API to read and write arbitrary data to the buffer. This is useful when dealing with different types of data, for example. Typed array views are in the native byte-order (see Endianness) of your platform. With a DataView you are able to control the byte-order. It is big-endian by default and can be set to little-endian in the getter/setter methods.

- -

Web APIs using typed arrays

- -

These are some examples of APIs that make use of typed arrays; there are others, and more are being added all the time.

- -
-
FileReader.prototype.readAsArrayBuffer()
-
The FileReader.prototype.readAsArrayBuffer() method starts reading the contents of the specified Blob or File.
-
XMLHttpRequest.prototype.send()
-
XMLHttpRequest instances' send() method now supports typed arrays and {{jsxref("ArrayBuffer")}} objects as argument.
-
ImageData.data
-
Is a {{jsxref("Uint8ClampedArray")}} representing a one-dimensional array containing the data in the RGBA order, with integer values between 0 and 255 inclusive.
-
- -

Examples

- -

Using views with buffers

- -

First of all, we will need to create a buffer, here with a fixed length of 16-bytes:

- -
let buffer = new ArrayBuffer(16);
-
- -

At this point, we have a chunk of memory whose bytes are all pre-initialized to 0. There's not a lot we can do with it, though. We can confirm that it is indeed 16 bytes long, and that's about it:

- -
if (buffer.byteLength === 16) {
-  console.log("Yes, it's 16 bytes.");
-} else {
-  console.log("Oh no, it's the wrong size!");
-}
-
- -

Before we can really work with this buffer, we need to create a view. Let's create a view that treats the data in the buffer as an array of 32-bit signed integers:

- -
let int32View = new Int32Array(buffer);
-
- -

Now we can access the fields in the array just like a normal array:

- -
for (let i = 0; i < int32View.length; i++) {
-  int32View[i] = i * 2;
-}
-
- -

This fills out the 4 entries in the array (4 entries at 4 bytes each makes 16 total bytes) with the values 0, 2, 4, and 6.

- -

Multiple views on the same data

- -

Things start to get really interesting when you consider that you can create multiple views onto the same data. For example, given the code above, we can continue like this:

- -
let int16View = new Int16Array(buffer);
-
-for (let i = 0; i < int16View.length; i++) {
-  console.log('Entry ' + i + ': ' + int16View[i]);
-}
-
- -

Here we create a 16-bit integer view that shares the same buffer as the existing 32-bit view and we output all the values in the buffer as 16-bit integers. Now we get the output 0, 0, 2, 0, 4, 0, 6, 0.

- -

You can go a step farther, though. Consider this:

- -
int16View[0] = 32;
-console.log('Entry 0 in the 32-bit array is now ' + int32View[0]);
-
- -

The output from this is "Entry 0 in the 32-bit array is now 32".

- -

In other words, the two arrays are indeed simply viewed on the same data buffer, treating it as different formats. You can do this with any view types.

- -

Working with complex data structures

- -

By combining a single buffer with multiple views of different types, starting at different offsets into the buffer, you can interact with data objects containing multiple data types. This lets you, for example, interact with complex data structures from WebGL, data files, or C structures you need to use while using js-ctypes.

- -

Consider this C structure:

- -
struct someStruct {
-  unsigned long id;
-  char username[16];
-  float amountDue;
-};
- -

You can access a buffer containing data in this format like this:

- -
let buffer = new ArrayBuffer(24);
-
-// ... read the data into the buffer ...
-
-let idView = new Uint32Array(buffer, 0, 1);
-let usernameView = new Uint8Array(buffer, 4, 16);
-let amountDueView = new Float32Array(buffer, 20, 1);
- -

Then you can access, for example, the amount due with amountDueView[0].

- -
Note: The data structure alignment in a C structure is platform-dependent. Take precautions and considerations for these padding differences.
- -

Conversion to normal arrays

- -

After processing a typed array, it is sometimes useful to convert it back to a normal array in order to benefit from the {{jsxref("Array")}} prototype. This can be done using {{jsxref("Array.from()")}}, or using the following code where Array.from() is unsupported.

- -
let typedArray = new Uint8Array([1, 2, 3, 4]),
-    normalArray = Array.prototype.slice.call(typedArray);
-normalArray.length === 4;
-normalArray.constructor === Array;
-
- -

Specifications

- - - - - - - - - - - - -
Specification
{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}
- -

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/bn/web/reference/index.html b/files/bn/web/reference/index.html deleted file mode 100644 index 6aa3c80ebb..0000000000 --- a/files/bn/web/reference/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: ওয়েব প্রযুক্তি রেফারেন্স -slug: Web/Reference -tags: - - Landing - - Reference - - Web -translation_of: Web/Reference ---- -

মুক্ত ওয়েব তৈরী হয়েছে বেশ কিছু প্রযুক্তির উপর ভিত্তি করে। নিচে এই সকল প্রযুক্তির নাম এবং বিস্তারিত তথ্য সম্বলিত লিংক দেয়া হল।

-
-
-

মূল ওয়েব প্রযুক্তি

-
-
- API
-
- ওয়েব এপিআই এর সাথে সম্পর্কিত সকল ধরনের ইন্টারফেস সম্পর্কিত তথ্যের রেফারেন্স পাওয়া যাবে এখানে। DOM এবং এর সম্পর্কিত সকল এপিআই, এবং ওয়েব কন্টেন্ট এবং অ্যাপ তৈরীর কাজে লাগবে এমন এপিআই গুলো বর্ণক্রম অনুযায়ী সাজানো হয়েছে।
-
- Web APIs
-
- A list of the individual APIs and technology suites that make up the overall Web API.
-
- HTML
-
- হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ হল ওয়েব পেজের মূল ভাষা, যার মাধ্যমে ওয়েব কন্টেন্টের বর্ণনা এবং নির্ধারণ করা হয়।
-
- CSS
-
- ক্যাসকেডিং স্টাইল শিট ওয়েব কন্টেন্টের ডিজাইন তৈরীতে ব্যবহার করা হয়।
-
- SVG
-
- স্কেলেবল ভেক্টর গ্রাফিক্স ব্যবহার করে ছবিগুলো বিভিন্ন ভেক্টর এবং অন্যান্য আকার হিসাবে সংরক্ষন করা হয়। এর ফলে ছবির আকার পরিবর্তন করা হলেও ছবির মানের কোনো পরিবর্তন করা হয় না।
-
- MathML
-
- ম্যাথ মার্কআপ ল্যাঙ্গুয়েজ ব্যবহার করে জটিল গাণিতিক সূত্র লেখা যায়।
-
-
-
-

অন্যান্য প্রযুক্ত

-

শিঘ্রই যুক্ত করা হবে।

-
-
-

 

diff --git a/files/bn/web/svg/element/index.html b/files/bn/web/svg/element/index.html deleted file mode 100644 index 2d574515bf..0000000000 --- a/files/bn/web/svg/element/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: SVG element reference -slug: Web/SVG/Element -translation_of: Web/SVG/Element ---- -

« SVG / SVG Attribute reference »

-

SVG এর উপাদানসমূহ

-
- A -
    -
  • {{SVGElement("a")}}
    • -
  • {{SVGElement("altGlyph")}}
    • -
  • {{SVGElement("altGlyphDef")}}
    • -
  • {{SVGElement("altGlyphItem")}}
    • -
  • {{SVGElement("animate")}}
    • -
  • {{SVGElement("animateColor")}}
    • -
  • {{SVGElement("animateMotion")}}
    • -
  • {{SVGElement("animateTransform")}}
    • -
- B C -
    -
  • {{SVGElement("circle")}}
    • -
  • {{SVGElement("clipPath")}}
    • -
  • {{SVGElement("color-profile")}}
    • -
  • {{SVGElement("cursor")}}
    • -
- D -
    -
  • {{SVGElement("defs")}}
    • -
  • {{SVGElement("desc")}}
    • -
- E -
    -
  • {{SVGElement("ellipse")}}
    • -
- F -
    -
  • {{SVGElement("feBlend")}}
    • -
  • {{SVGElement("feColorMatrix")}}
    • -
  • {{SVGElement("feComponentTransfer")}}
    • -
  • {{SVGElement("feComposite")}}
    • -
  • {{SVGElement("feConvolveMatrix")}}
    • -
  • {{SVGElement("feDiffuseLighting")}}
    • -
  • {{SVGElement("feDisplacementMap")}}
    • -
  • {{SVGElement("feDistantLight")}}
    • -
  • {{SVGElement("feFlood")}}
    • -
  • {{SVGElement("feFuncA")}}
    • -
  • {{SVGElement("feFuncB")}}
    • -
  • {{SVGElement("feFuncG")}}
    • -
  • {{SVGElement("feFuncR")}}
    • -
  • {{SVGElement("feGaussianBlur")}}
    • -
  • {{SVGElement("feImage")}}
    • -
  • {{SVGElement("feMerge")}}
    • -
  • {{SVGElement("feMergeNode")}}
    • -
  • {{SVGElement("feMorphology")}}
    • -
  • {{SVGElement("feOffset")}}
    • -
  • {{SVGElement("fePointLight")}}
    • -
  • {{SVGElement("feSpecularLighting")}}
    • -
  • {{SVGElement("feSpotLight")}}
    • -
  • {{SVGElement("feTile")}}
    • -
  • {{SVGElement("feTurbulence")}}
    • -
  • {{SVGElement("filter")}}
    • -
  • {{SVGElement("font")}}
    • -
  • {{SVGElement("font-face")}}
    • -
  • {{SVGElement("font-face-format")}}
    • -
  • {{SVGElement("font-face-name")}}
    • -
  • {{SVGElement("font-face-src")}}
    • -
  • {{SVGElement("font-face-uri")}}
    • -
  • {{SVGElement("foreignObject")}}
    • -
- G -
    -
  • {{SVGElement("g")}}
    • -
  • {{SVGElement("glyph")}}
    • -
  • {{SVGElement("glyphRef")}}
    • -
- H -
    -
  • {{SVGElement("hkern")}}
    • -
- I -
    -
  • {{SVGElement("image")}}
    • -
- J K L -
    -
  • {{SVGElement("line")}}
    • -
  • {{SVGElement("linearGradient")}}
    • -
- M -
    -
  • {{SVGElement("marker")}}
    • -
  • {{SVGElement("mask")}}
    • -
  • {{SVGElement("metadata")}}
    • -
  • {{SVGElement("missing-glyph")}}
    • -
  • {{SVGElement("mpath")}}
    • -
- N O P -
    -
  • {{SVGElement("path")}}
    • -
  • {{SVGElement("pattern")}}
    • -
  • {{SVGElement("polygon")}}
    • -
  • {{SVGElement("polyline")}}
    • -
- Q R -
    -
  • {{SVGElement("radialGradient")}}
    • -
  • {{SVGElement("rect")}}
    • -
- S -
    -
  • {{SVGElement("script")}}
    • -
  • {{SVGElement("set")}}
    • -
  • {{SVGElement("stop")}}
    • -
  • {{SVGElement("style")}}
    • -
  • {{SVGElement("svg")}}
    • -
  • {{SVGElement("switch")}}
    • -
  • {{SVGElement("symbol")}}
    • -
- T -
    -
  • {{SVGElement("text")}}
    • -
  • {{SVGElement("textPath")}}
    • -
  • {{SVGElement("title")}}
    • -
  • {{SVGElement("tref")}}
    • -
  • {{SVGElement("tspan")}}
    • -
- U -
    -
  • {{SVGElement("use")}}
    • -
- V — Z -
    -
  • {{SVGElement("view")}}
    • -
  • {{SVGElement("vkern")}}
    • -
-
-

বিভাগসমুহ

-

Animation এর উপাদানসমূহ

-

 

-

{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}

-

প্রাথমিক আকারসমূহ

-

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

-

উপাদানসমূহের ধারক

-

 

-

{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("glyph")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}

-

বর্ণনামূলক উপাদানসমূহ

-

{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}

-

Filter এর প্রাচীন উপাদানসমূহ

-

{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}

-

Font এর উপাদানসমূহ

-

{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}

-

Gradient এর উপাদানসমূহ

-

{{SVGElement("linearGradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}

-

Graphics এর উপাদানসমূহ

-

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}

-

Light source এর উপাদানসমূহ

-

{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}

-

 

-

Shape এর উপাদানসমূহ

-

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

-

কাঠামোগত উপাদানসমূহ

-

{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}

-

Text content এর উপাদানসমূহ

-

{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

-

Text content child এর উপাদানসমূহ

-

{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}} এর উপাদানসমুহ

-

Uncategorized এর উপাদানসমূহ

-

{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}

diff --git a/files/bn/web/svg/index.html b/files/bn/web/svg/index.html deleted file mode 100644 index 491cb1d099..0000000000 --- a/files/bn/web/svg/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: SVG -slug: Web/SVG -tags: - - NeedsTranslation - - References - - SVG - - TopicStub -translation_of: Web/SVG ---- -
- Getting Started
- This tutorial will help get you started using SVG.
-

Scalable Vector Graphics (SVG) is an XML markup language for describing two-dimensional vector graphics. SVG is essentially to graphics what XHTML is to text.

-

SVG is similar in scope to Adobe's proprietary Flash technology, but what distinguishes SVG from Flash is that it is a W3C recommendation (i.e., a standard) and that it is XML-based as opposed to a closed binary format. It is explicitly designed to work with other W3C standards such as CSS, DOM and SMIL.

-
-
-

Documentation

-
-
- SVG element reference
-
- Get details about each SVG element.
-
- SVG attribute reference
-
- Get details about each SVG attribute.
-
- SVG DOM interface reference
-
- Get details about the whole SVG DOM API.
-
- Enhance HTML content
-
- SVG works together with HTML, CSS and JavaScript. Use SVG to enhance a regular HTML page or web application.
-
- SVG in Mozilla
-
- Notes and information on how SVG is implemented in Mozilla. - -
-
-

View All...

-

Community

-
    -
  • View Mozilla forums... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}
    • -
-

Tools

- -
-
- - -

Animation and interactions

-

Like HTML, SVG has a document model (DOM), events and is accessible from JavaScript. This allows developers to create rich animations and interactive images.

- -

Mapping, charting, games & 3D experiments

-

While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.

- -
-
-

 

-- cgit v1.2.3-54-g00ecf