diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/bn | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/bn')
123 files changed, 0 insertions, 18916 deletions
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 <fromURL> <toURL> -# -# 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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/bn-BD/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}<span class="seoSummary"><span class="seoSummary">এটি <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> <span id="result_box" lang="bn"><span class="alt-edited hps">টিউটোরিয়ালের <span id="result_box" lang="bn"><span class="hps">দ্বিতীয়</span> <span class="alt-edited hps">অধ্যায়</span></span></span></span> <span id="result_box" lang="bn"><span class="alt-edited hps">এবং ব্যাখ্যা করে কেন</span></span></span><span id="result_box" lang="bn"><span class="alt-edited hps"> ডকুমেন্ট</span> <span class="alt-edited hps">CSS</span> <span class="alt-edited hps">ব্যবহার করে।</span></span> আপনি CSS ব্যবহার করেন <span id="result_box" lang="bn"><span class="hps">আপনার নমুনা</span> <span class="alt-edited hps">ডকুমেন্ট</span> <span class="hps">একটি</span> <span class="hps">স্টাইলশীট</span> <span class="hps">যুক্ত করতে।</span></span></span></p> - -<h2 class="clearLeft" id="তথ্য_CSS_কেন_ব্যবহার_করব">তথ্য: CSS কেন ব্যবহার করব ?</h2> - -<p>CSS <span id="result_box" lang="bn"><span class="hps">একটি</span> <span class="alt-edited hps">ডকুমেন্টের</span> <span class="hps">তথ্য</span> <span class="alt-edited hps">সামগ্রী</span></span> সেটি কিভাবে <span id="result_box" lang="bn"><span class="alt-edited hps">প্রদর্শিত হবে তার <span id="result_box" lang="bn"><span class="hps">বিবরণ</span> <span class="hps">থেকে পৃথক রাখতে <span id="result_box" lang="bn"><span class="hps">সাহায্য করে। <span id="result_box" lang="bn"><span class="alt-edited hps">ডকুমেন্ট </span></span></span></span></span></span></span></span>কিভাবে <span id="result_box" lang="bn"><span class="alt-edited hps">প্রদর্শিত হবে তার <span id="result_box" lang="bn"><span class="hps">বিবরণ <span id="result_box" lang="bn"><span class="alt-edited hps">স্টাইল</span> <span class="hps">হিসাবে পরিচিত। </span></span></span></span></span></span><span id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="alt-edited hps">কন্টেন্ট</span> <span class="hps">থেকে </span></span><span id="result_box" lang="bn"><span class="alt-edited hps"><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="alt-edited hps">স্টাইল </span></span></span></span></span></span>আলাদা রাখুন <span id="result_box" lang="bn"><span>যাতে আপনি পারেন </span></span>:</p> - -<ul> - <li><span class="short_text" id="result_box" lang="bn"><span class="hps">অনুলিপি</span> <span class="alt-edited hps">এড়াতে</span></span></li> - <li><span class="short_text" id="result_box" lang="bn"><span class="hps">রক্ষণাবেক্ষণ</span> <span class="hps">সহজ</span> <span class="alt-edited hps">করে তুলতে</span></span></li> - <li><span id="result_box" lang="bn"><span class="alt-edited hps">বিভিন্ন উদ্দেশ্যে</span> <span class="hps">বিভিন্ন </span>স্টাইল এর <span class="hps">সঙ্গে একই</span> <span class="alt-edited hps">কন্টেন্ট</span> <span class="hps">ব্যবহার করতে</span></span></li> -</ul> - -<div class="tuto_example"> -<div class="tuto_type">উদাহরণ</div> - -<p><span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">ওয়েব</span> <span class="hps">সাইটের <span id="result_box" lang="bn"><span class="hps">হাজার হাজার</span> <span id="result_box" lang="bn"><span class="hps">পৃষ্ঠা </span></span><span class="hps">থাকতে পারে</span></span></span></span> যারা <span id="result_box" lang="bn"><span class="alt-edited hps">অনুরূপ। <span id="result_box" lang="bn"><span class="hps">CSS এর</span> <span class="hps">ব্যবহার করে,<span id="result_box" lang="bn"><span class="alt-edited hps">আপনি একটি <span id="result_box" lang="bn"><span class="hps">সাধারণ</span> <span class="hps">ফাইলের মধ্যে</span> <span id="result_box" lang="bn"><span class="hps">তথ্য সংরক্ষণ করুন <span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="alt-edited hps"><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="alt-edited hps"><span id="result_box" lang="bn"><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="alt-edited hps">যা</span> </span></span></span></span></span></span></span></span></span></span>সকল পৃষ্ঠা</span> <span class="alt-edited hps">শেয়ার</span> </span></span></span></span></span></span></span></span></span></span>করে।</p> - -<p>যখন একজন ব্যবহারকারী একটি ওয়েব পেইজ <span id="result_box" lang="bn"><span class="alt-edited hps">প্রদর্শন করে,<span id="result_box" lang="bn"><span class="hps">ব্যবহারকারীর</span> <span class="hps">ব্রাউজার</span> <span class="hps">পৃষ্ঠার</span> <span class="hps">কন্টেন্টের</span> <span class="alt-edited hps">পাশাপাশি</span> <span class="alt-edited hps">স্টাইলের</span> <span class="hps">তথ্য</span> <span class="hps">লোড করে।</span></span></span></span></p> - -<p><span id="result_box" lang="bn"><span class="hps">যখন একজন ব্যবহারকারী</span> <span class="hps">একটি</span> <span class="hps">ওয়েব পেজ</span> <span class="alt-edited hps">প্রিন্ট করে</span><span>, আপনি</span></span> <span id="result_box" lang="bn"><span class="alt-edited hps">বিভিন্ন</span> <span class="alt-edited hps">স্টাইলের</span> <span class="hps">তথ্য প্রদান করেন যা <span id="result_box" lang="bn"><span class="hps">মুদ্রিত</span> <span class="alt-edited hps">পৃষ্ঠা <span id="result_box" lang="bn"><span class="hps">পড়তে <span id="result_box" lang="bn"><span class="hps">সহজ করে তোলে।</span></span></span></span></span></span></span></span></p> -</div> - -<p><span id="result_box" lang="bn">HTML <span class="hps">দিয়ে</span> <span class="hps">সাধারণত </span><span class="hps">আপনি <span id="result_box" lang="bn"><span class="alt-edited hps">ডকুমেন্টের</span> <span class="hps">তথ্য</span> <span class="alt-edited hps">সামগ্রী<span id="result_box" lang="bn"><span class="alt-edited hps"> বর্ণনা করেন</span> <span class="hps">মার্কআপ</span> <span class="hps">ভাষা</span> <span class="hps">ব্যবহার</span></span></span></span></span></span> করে,<span id="result_box" lang="bn"><span class="hps">তার</span> <span class="alt-edited hps">স্টাইল নয়।</span></span>আপনি CSS ব্যবহার করেন এর স্টাইল <span id="result_box" lang="bn"><span class="hps">নির্দিষ্ট করতে,<span id="result_box" lang="bn"><span class="hps">এর বিষয়বস্তু নয়</span></span></span></span> ।(<span id="result_box" lang="bn"><span class="hps">পরবর্তীতে</span> <span class="alt-edited hps">এই টিউটোরিয়ালে</span><span>, আপনি এই</span> <span class="hps">ব্যবস্থার</span> <span class="hps">কিছু</span> <span class="hps">ব্যতিক্রম</span> <span class="hps">দেখতে পাবেন।</span></span>)</p> - -<div class="tuto_details"> -<div class="tuto_type"><span class="short_text" id="result_box" lang="bn"><span class="hps">আরো তথ্য</span></span></div> - -<p><span id="result_box" lang="bn"><span class="hps">এছাড়াও <span id="result_box" lang="bn"><span class="alt-edited hps">HTML এর</span> <span class="hps">মত</span> <span class="hps">একটি</span> <span class="hps">মার্কআপ</span> <span class="hps">ভাষা <span id="result_box" lang="bn"><span class="alt-edited hps">স্টাইল</span> <span class="hps">নির্দিষ্ট করতে</span> <span class="hps">কিছু উপায়</span> <span class="hps">প্রদান করে।</span></span></span></span></span></span></p> - -<p><span id="result_box" lang="bn"><span class="hps">উদাহরণস্বরূপ,</span> <span class="hps">HTML এ</span> <span class="hps">আপনি টেক্সট</span> <span class="hps">গাঢ়</span> <span class="hps">করতে একটি</span> <span class="hps"><b></span> <span class="hps">ট্যাগ</span> <span class="hps">ব্যবহার করতে পারেন</span><span>, <span id="result_box" lang="bn"><span>এবং আপনি</span> <span class="hps">তার</span> <span class="hps"><body></span> <span class="hps">ট্যাগ</span>ে <span class="hps">একটি</span> <span class="hps">পৃষ্ঠার</span> <span class="alt-edited hps">ব্যাকগ্রাউন্ড রং</span> <span class="hps">নির্ধারণ করতে পারবেন</span></span></span></span>।</p> - -<p>আপনি যখন CSS ব্যবহার করেন,<span id="result_box" lang="bn"><span class="hps">আপনি সাধারণত</span> <span class="hps">মার্কআপ</span> <span class="hps">ভাষার</span> <span class="alt-edited hps">এই বৈশিষ্ট্যগুলি</span> <span class="hps">ব্যবহার</span> <span class="hps">এড়িয়ে যান যাতে করে <span id="result_box" lang="bn"><span class="hps">আপনার সকল</span> <span class="alt-edited hps">ডকুমেন্ট</span> <span class="alt-edited hps">এর স্টাইল</span> <span class="alt-edited hps">সংক্রান্ত তথ্য</span> <span class="hps">এক জায়গায়</span> <span class="hps">হয়।</span></span></span></span></p> -</div> - -<h2 id="অ্যাকশন_একটি_স্টাইলশীট_তৈরি"><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">অ্যাকশন</span><span>:</span> <span class="hps">একটি</span> <span class="hps">স্টাইলশীট</span> <span class="hps">তৈরি</span></span></h2> - -<ol> - <li><span id="result_box" lang="bn"><span class="alt-edited hps">পূর্বের</span> মত <span class="hps">একই ডিরেক্টরির মধ্যে</span> <span class="hps">আরেকটি</span> <span class="hps">টেক্সট ফাইল</span> <span class="hps">তৈরি করুন।</span> <span class="alt-edited hps">এই</span> <span class="hps">ফাইলটি</span> <span class="hps">আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">হবে.</span> <span class="alt-edited hps">এটির</span> <span class="hps">নাম দিন </span></span>: <code>style1.css</code></li> - <li><span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="alt-edited hps">CSS</span> <span class="hps">ফাইলের</span> <span class="hps">মধ্যে,</span> <span class="hps"><span id="result_box" lang="bn"><span class="hps">এই এক</span> <span class="hps">লাইন </span></span>কপি</span> <span class="hps">এবং </span><span class="hps">পেস্ট করুন</span><span>, তারপর</span> <span class="alt-edited hps">ফাইলটি সংরক্ষণ করুন</span></span>: - <pre class="brush: css">strong {color: red;} -</pre> - </li> -</ol> - -<h3 id="আপনার_ডকুমেন্টের_সাথে_স্টাইলশীট_যুক্তকরণ"><span class="short_text" id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="alt-edited hps">ডকুমেন্টের সাথে <span class="short_text" id="result_box" lang="bn"><span class="hps">স্টাইলশীট <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">যুক্তকরণ</span></span></span></span></span></span></h3> - -<ol> - <li><span id="result_box" lang="bn"><span class="hps">আপনার</span> <span id="result_box" lang="bn"><span class="alt-edited hps">ডকুমেন্ট এর সাথে <span id="result_box" lang="bn"><span class="hps">আপনার </span></span></span></span><span class="hps">স্টাইলশীট</span> <span class="hps">সংযুক্ত করতে,<span id="result_box" lang="bn"><span>আপনার</span> <span class="hps">HTML ফাইল</span> <span class="hps">সম্পাদনা করুন।<span id="result_box" lang="bn"><span class="hps"> এখানে</span> <span class="hps">হাইলাইট করা লাইনটি <span id="result_box" lang="bn"><span class="hps">যোগ করুন</span></span></span></span></span></span></span></span>: - - <pre class="brush: html; highlight:[6];"><!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> -</pre> - </li> - <li><span id="result_box" lang="bn"><span class="hps">ফাইলটি</span> <span class="hps">সংরক্ষণ করুন</span> <span class="hps">এবং আপনার</span> <span class="hps">ব্রাউজারের</span> <span class="alt-edited hps">ডিসপ্লে</span> <span class="hps">রিফ্রেশ করুন। <span id="result_box" lang="bn"><span class="hps">স্টাইলশীটটি <span id="result_box" lang="bn"><span class="alt-edited hps">প্রথম</span> <span class="hps">অক্ষরগুলোকে</span> <span class="hps">লাল</span> <span class="hps">করে তোলে, এভাবে</span></span></span></span></span></span>: - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td><span style="color: red;"><strong>C</strong></span>ascading <span style="color: red;"><strong>S</strong></span>tyle <span style="color: red;"><strong>S</strong></span>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> - -<div class="tuto_example" id="challenge"> -<div class="tuto_type"><span class="short_text" id="result_box" lang="bn"><span class="hps">চ্যালেঞ্জ</span></span></div> - -<p><span class="short_text" id="result_box" lang="bn"><span class="hps">লাল</span> <span class="hps">ছাড়াও,</span> <span class="alt-edited hps">CSS</span> <span class="hps">কিছু অন্যান্য</span> <span class="hps">রং </span></span>এর নাম প্রদান করে।</p> - -<p><span id="result_box" lang="bn"><span class="hps">রেফারেন্স না দেখে, <span id="result_box" lang="bn"><span id="result_box" lang="bn"><span class="hps">আরো </span></span></span><span id="result_box" lang="bn"><span class="hps">পাঁচটি</span> <span class="alt-edited hps">রঙের</span> <span class="hps">নাম</span> <span class="hps">খুঁজে বের করুন যা <span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="alt-edited hps">এ কাজ করে।</span></span></span></span></span></span></p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> - -<h2 id="পরবর্তীতে_কি"><span class="short_text" id="result_box" lang="bn"><span class="hps">পরবর্তী</span></span><span class="short_text" id="result_box" lang="bn"><span>তে কি?</span></span></h2> - -<p>{{nextPage("/bn-BD/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "How CSS works.")}}<span id="result_box" lang="bn"><span class="alt-edited hps">এখন আপনার</span> <span class="hps">একটি পৃথক</span> <span class="hps">স্টাইলশীট</span> এর <span class="alt-edited hps">সাথে যুক্ত</span> <span class="hps">একটি নমুনা</span> <span class="alt-edited hps">ডকুমেন্ট</span> <span class="hps">আছে</span><span>,</span></span> আপনি প্রস্তুত জানতে <a href="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">learn more</a> কিভাবে <span id="result_box" lang="bn"><span class="alt-edited hps">আপনার ব্রাউজার</span> <span class="hps">তাদের</span> <span class="alt-edited hps">সমন্বয় করে যখন এটি <span id="result_box" lang="bn"><span class="alt-edited hps">ডকুমেন্ট</span> <span class="alt-edited hps">প্রদর্শন করে।</span></span></span></span></p> 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 ---- -<p><strong><code><a href="/bn-BD/docs/HTML/Canvas" title="HTML/Canvas"><canvas></a></code></strong> হল একটি <a href="/bn-BD/docs/HTML" title="HTML">HTML</a> এলিমেন্ট, যা দ্বারা স্ক্রিপ্টিংয়ের (সাধারণত <a href="/bn-BD/docs/JavaScript" title="JavaScript">জাভাস্ক্রিপ্ট</a>) সাহায্যে গ্রাফিক্স আঁকা যায়। এটি অবশ্য গ্রাফিক্স আঁকা, ছবি কম্পোজিশন তৈরি করা এবং সাধারণ (এবং <a href="/bn-BD/docs/HTML/Canvas/A_Basic_RayCaster" title="A_Basic_RayCaster">অসাধারণ</a>) এনিমেশন তৈরির কাজ করতে পারে।</p> -<p><code><canvas></code> এর জন্য মোজিলা অ্যাপ্লিকেশনসমূহ সাপোর্ট পাওয়া শুরু করেছে গিকো ১.৮ (বা <a class="new" href="https://developer.mozilla.org/bn-BD/docs/Firefox_1.5_for_developers" title="Firefox_1.5_for_developers">ফায়ারফক্স ১.৫</a>) থেকে। মূলত এ্যাপল তাদের <a class="external" href="http://www.apple.com/macosx/features/dashboard/">ড্যাশবোর্ড</a> এবং সাফারির জন্য এলিমেন্টটি প্রকাশ করে। <code><canvas></code> এলিমেন্টটি <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> স্পেসিফিকেশনের একটি অংশ, যা HTML5 নামেও পরিচিত।</p> -<p>এই টিউটোরিয়ালে আপনার HTML পেজে <code><canvas></code> এলিমেন্ট ব্যবহারের প্রক্রিয়া আলোচনা করা হয়েছে। উদাহরণগুলো থেকে আপনি <code><canvas></code> দিয়ে কি করতে পারেন, তা আন্দাজ করতে পারেন এবং আপনার নিজের ইমপ্লিমেন্টেশন তৈরিতে সাহায্য করতে পারে।</p> -<h2 id="Before_you_start" name="Before_you_start">শুরু করার পূর্বে</h2> -<p><code><canvas></code> ব্যবহার করা খুব কঠিন - তা নয়। কিন্তু, আপনার অবশ্যই <a href="/bn-BD/docs/HTML" title="HTML">HTML</a> এবং <a href="/bn-BD/docs/JavaScript" title="JavaScript">জাভাস্ক্রিপ্ট</a> এর সাধারণ ধারণা থাকতে হবে।</p> -<p><code><canvas></code> টি অনেক পুরনো ব্রাউজার সাপোর্ট করে না কিন্তু, ফায়ারফক্স ১.৫ ও পরবর্তী ভার্সন, অপেরা ৯ ও পরবর্তী, এবং সাফারি, গুগল ক্রোমের নতুন ভার্সন ও ইন্টারনেট এক্সপ্লোরার ৯ হতে কাজ করে।</p> -<h2 id="In_this_tutorial" name="In_this_tutorial">এই টিউটোরিয়ালে আছে</h2> -<ul> - <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">সাধারণ ব্যবহার</a></li> - <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">শেপ (জ্যামিতিক আকৃতি) আঁকা</a></li> - <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Using_images" title="Canvas_tutorial/Using_images">ছবি (ইমেজ) ব্যবহার</a></li> - <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">স্টাইল এবং রং প্রয়োগ করা</a></li> - <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Transformations" title="Canvas_tutorial/Transformations">ট্রান্সফরমেশন (রুপান্তর)</a></li> - <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Compositing" title="Canvas_tutorial/Compositing">কম্পোজিট করা</a></li> - <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">সাধারণ এনিমেশন</a></li> - <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Optimizing_canvas" title="https://developer.mozilla.org/bn-BD/docs/Canvas_tutorial/Optimizing_canvas">ক্যানভাস অপটিমাইজ করা</a></li> -</ul> -<h2 id="See_also" name="See_also">আরও দেখুন</h2> -<ul> - <li><a href="/bn-BD/docs/HTML/Canvas" title="HTML/Canvas">ক্যানভাস টপিক পেজ</a></li> - <li><a href="/bn-BD/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">ক্যানভাসের সাহায্যে গ্রাফিক্স আঁকা</a></li> - <li><a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">ক্যানভাসের উদাহরণ</a></li> - <li><a class="external" href="http://html5tutorial.com" title="http://html5tutorial.com">HTML5 টিউটোরিয়াল</a></li> - <li><a href="/bn-BD/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">ক্যানভাস ব্যবহার করে টেক্সট আঁকা</a></li> - <li><a class="external" href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingText/AddingText.html#//apple_ref/doc/uid/TP40010542-CH6-SW4" title="Adding Text to Canvas">ক্যানভাসে টেক্সট যুক্ত করা</a></li> - <li><a class="external" href="http://www.canvasdemos.com/" title="Canvas Demos">ক্যানভাস ডেমো - গেম, অ্যাপ্লিকেশন, টুল এবং টিউটোরিয়াল</a></li> - <li><a class="external" href="http://canvimation.github.com/" title="http://canvimation.github.com/">ক্যানভাস ড্রয়িং এবং অ্যানিমেশন অ্যাপ্লিকেশন</a></li> - <li><a class="external" href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">ইন্টারঅ্যাক্টিভ ক্যানভাস টিউটোরিয়াল</a></li> - <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">সকল এট্রিবিউট ও মেথড সহ ক্যানভাস চিট শিট</a></li> - <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">এডোব ইলাস্ট্রেটর -> ক্যানভাস প্লাগ-ইন</a></li> - <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li> - <li><a class="external" href="http://html5tutorial.com/how-to-draw-a-point-with-the-canvas-api" title="http://html5tutorial.com/how-to-draw-a-point-with-the-canvas-api">ক্যানভাস API এর সাহায্যে একটি বিন্দু আঁকা</a></li> - <li><a class="external" href="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api" title="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api">ক্যানভাস API এর সাহায্যে N grade Bézier curve আঁকা</a></li> - <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">৩১ দিনের ক্যানভাস টিউটোরিয়াল</a></li> -</ul> -<div> - {{ Next("Canvas_tutorial/Basic_usage") }}</div> 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 ---- -<p>{{draft}}</p> -<p>The <a href="/docs/DOM">Document Object Model</a> is an API for <a href="/en-US/docs/HTML">HTML</a> and <a href="/en-US/docs/XML">XML</a> 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.</p> -<p>All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into <a href="/en-US/docs/Gecko_DOM_Reference">objects</a> (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.</p> -<p>The DOM is most often used in conjunction with <a href="/en-US/docs/JavaScript">JavaScript</a>. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">a single, consistent API</a>. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for <a href="http://www.w3.org/DOM/Bindings">any language</a>.</p> -<p>The <a href="http://www.w3.org/">World Wide Web Consortium</a> establishes a <a href="http://www.w3.org/DOM/">standard for the DOM</a>, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.</p> -<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Why is the DOM important?</h2> -<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) 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 <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>).</p> -<p>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 <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, using the DOM to <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipulate its own UI</a>.</p> -<h2 id="More_about_the_DOM">More about the DOM</h2> -<p>{{LandingPageListSubpages}}</p> 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 ---- -<p><strong>ওয়েব ডেভেলপমেন্ট </strong>বলতে একটি ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশন তৈরির প্রতিটি দিককে বোঝানো হয়।</p> -<p>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.</p> -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="ডকুমেন্টেশনের_বিষয়">ডকুমেন্টেশনের বিষয়</h2> - <h3 id="প্রযুক্তি">প্রযুক্তি</h3> - <dl> - <dt> - <a class="internal" href="/bn-BD/docs/Web_Development/Introduction_to_Web_development" title="bn-BD/docs/Web Development/Introduction to Web development">Introduction to Web development</a></dt> - <dd> - A guide to learning how to develop for the Web.</dd> - <dt> - <a class="internal" href="/bn-BD/docs/HTML" rel="internal">HTML</a></dt> - <dd> - HyperText Markup Language is the basic language for creating web pages and other documents displayed in a browser.</dd> - <dt> - <a class="internal" href="/bn-BD/docs/CSS" rel="internal">CSS</a></dt> - <dd> - Cascading Style Sheets make it possible to do advanced layout and page design on the Web.</dd> - <dt> - <a class="internal" href="/bn-BD/docs/JavaScript" rel="internal">JavaScript</a></dt> - <dd> - JavaScript is the most commonly used scripting language for developing web applications; it's also used in the development of Mozilla-based software.</dd> - <dt> - <a class="internal" href="/bn-BD/docs/DOM" rel="internal">DOM</a></dt> - <dd> - 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.</dd> - <dt> - <a class="internal" href="/bn-BD/docs/AJAX" rel="internal">AJAX</a></dt> - <dd> - 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.</dd> - <dt> - <a class="internal" href="/bn-BD/docs/XHTML" title="bn-BD/docs/XHTML">XHTML</a></dt> - <dd> - Extensible HyperText Markup Language is an XML-based HTML-like language that offers a stricter syntax than HTML.</dd> - <dt> - <a class="internal" href="/bn-BD/docs/SVG" rel="internal">SVG</a></dt> - <dd> - Scalable Vector Graphics is an XML markup language for describing 2D vector graphics.</dd> - </dl> - <h3 id="কলা-কৌশল">কলা-কৌশল</h3> - <dl> - <dt> - <a class="internal" href="/bn-BD/docs/Web_Standards" title="bn-BD/docs/Web Standards">Web standards</a></dt> - <dd> - Learn how to make your Web site or application reach the largest number of users through compatibility with the open Web.</dd> - <dt> - <a href="/bn-BD/docs/Web_Development/Responsive_Web_design" title="bn-BD/docs/Web development/Responsive Web design">Responsive Web design</a></dt> - <dd> - Use CSS to present the same content across all hardware platforms, from mobile phones to wide-screen, high-res desktop displays.</dd> - <dt> - <a href="/bn-BD/docs/Web_development/Writing_forward-compatible_websites" title="Writing forward-compatible websites">Writing forward-compatible websites</a></dt> - <dd> - Best practices for creating websites that do not break when browsers are updated.</dd> - <dt> - <a href="/bn-BD/docs/Web_Development/Mobile" title="/bn-BD/docs/Web development/Mobile">Mobile Web development</a></dt> - <dd> - 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.</dd> - <dt> - <a class="internal" href="/bn-BD/docs/Mozilla_Web_Developer_FAQ" title="bn-BD/docs/Mozilla Web Developer FAQ">Mozilla Web developer FAQ</a></dt> - <dd> - Frequently asked questions from Web developers. With answers!</dd> - </dl> - <p><span class="alllinks"><a href="/bn-BD/docs/tag/Web_Development" title="bn-BD/docs/tag/Web_Development">View All...</a></span></p> - </td> - <td> - <h2 class="Community" id="কমিউনিটি">কমিউনিটি</h2> - <ul> - <li><a class="external" href="http://hacks.mozilla.org" title="http://hacks.mozilla.org">মোজিলা হ্যাকস ব্লগ</a></li> - <li><a class="external" href="http://www.whatwg.org/" rel="external nofollow" title="http://www.whatwg.org/">WHAT Working Group</a></li> - <li><a class="external" href="http://webdevfeedhouse.com/" rel="external nofollow" title="http://webdevfeedhouse.com/">WebDev FeedHouse</a></li> - </ul> - <h2 class="Tools" id="টুল">টুল</h2> - <ul> - <li><a href="/bn-BD/docs/Tools" title="bn-BD/docs/Tools">Main Tools page</a></li> - <li><a class="link-https" href="https://addons.mozilla.org/bn-BD/firefox/addon/1843" rel="external nofollow" title="https://addons.mozilla.org/bn-BD/firefox/addon/1843">Firebug এক্সটেনশন</a></li> - <li><a class="link-https" href="https://addons.mozilla.org/bn-BD/firefox/addon/60" rel="external nofollow" title="https://addons.mozilla.org/bn-BD/firefox/addon/60">Web Developer extension</a></li> - <li><a href="/bn-BD/docs/Venkman" rel="internal">Venkman</a> জাভাস্ক্রিপ্ট ডিবাগার</li> - <li><a href="/bn-BD/docs/DOM_Inspector" rel="internal" title="bn-BD/docs/DOM Inspector">DOM Inspector</a></li> - <li><a href="/bn-BD/docs/Tools/Scratchpad" title="bn-BD/docs/Tools/Scratchpad">Scratchpad</a></li> - </ul> - <p><span class="alllinks"><a href="/bn-BD/docs/tag/Web_Development:Tools" title="bn-BD/docs/tag/Web_Development:Tools">View All...</a></span></p> - </td> - </tr> - </tbody> -</table> -<p> </p> 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 ---- -<p>একাধিক সফটওয়্যার কম্পোনেন্ট এর মধ্যে যোগাযোগের সুবিধা এবং এ সংক্রান্ত নিয়মগুলিকে API (Application Programming Interface) বলা হয়ে থাকে। ওয়েব ডেভেলপমেন্টের ক্ষেত্রে, API বলতে সাধারণত ওয়েবের কন্টেন্টের সঙ্গে যোগাযোগ / কাজ (ইন্টারঅ্যাক্ট) করার জন্য একগুচ্ছ {{glossary("method","methods")}}, {{Glossary("property","properties")}}, ইভেন্ট, এবং {{Glossary("URL","URLs")}} কে বুঝানো হয়।</p> - -<h2 id="আরও_জানুন">আরও জানুন</h2> - -<h3 id="সাধারণ_জ্ঞান">সাধারণ জ্ঞান</h3> - -<ul> - <li>উইকিপিডিয়ায় {{Interwiki("wikipedia", "Application_programming_interface", "API")}}</li> -</ul> - -<h3 id="কারিগরি_রেফারেন্স">কারিগরি রেফারেন্স</h3> - -<ul> - <li><a href="https://developer.mozilla.org/bn-BD/docs/Web/API">Web API রেফারেন্স</a></li> -</ul> 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 ---- -<p><span style="color: rgb(37, 37, 37); font-family: sans-serif; line-height: 22.3999996185303px;">নির্দিষ্টি সময়ে একটি ডাটা কানেকশন (সংযোগ) এর মধ্য দিয়ে যে পরিমাণ তথ্য যাওয়া-আসা (পরিবাহিত) করতে পারে, তাই পরিমাপই হল ব্যান্ডউইথ। এটি সাধারণত bits-per-second (bps), megabits-per-second (Mbps) or gigabits-p</span>er-second (Gbps) এককে মাপা হয়ে থাকে।</p> - -<h2 id="আরও_জানুন">আরও জানুন</h2> - -<ul> - <li>উইকিপিডিয়ায় {{Interwiki("wikipedia", "Bandwidth")}}</li> -</ul> 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 ---- -<p><b>DHTM</b><strong>L</strong> (dynamic {{glossary("HTML")}}) মানে ইন্টারেক্টিভ ওয়েব পেজ এর পিছনের কোডকে বুঝায় যার {{Glossary("Adobe Flash","Flash")}} অথবা {{Glossary("Java")}} প্লাগিন প্রয়োজন হয় না. DHTML সমষ্টিগতবাবে {{Glossary("HTML")}}, {{Glossary("CSS")}}, the {{Glossary("DOM")}} এবং {{Glossary("JavaScript")}} এর সমন্বয়ে গঠিত ।</p> - -<h2 id="আরো_জানুন">আরো জানুন</h2> - -<h3 id="সাধারণ_জ্ঞান">সাধারণ জ্ঞান</h3> - -<ul> - <li><a href="http://en.wikipedia.org/wiki/Dynamic_HTML">Dynamic HTML on Wikipedia</a></li> -</ul> 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 ---- -<div style="max-width: 300px; float: right; margin: 0 0 .5em 1em;">{{LearnBox({"title":"নতুন একটি শব্দ শিখুন:"})}}</div> - -<p>ওয়েবে যেসকল প্রযুক্তি ব্যবহার করা হয়, তার কোড বা ডকুমেন্টেশনে সাধারণত উদ্ভট টেকনিক্যাল শব্দ কিংবা সংক্ষিপ্ত শব্দ দেখা যায়। এই শব্দকোষের শব্দগুলোর সাহায্যে আপনি সহজেই ওয়েবের এই প্রযুক্তিগুলোকে বুঝতে ও ব্যবহার করতে পারবেন।</p> - -<p>{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}</p> - -<h2 id="শব্দকোষে_অবদান_রাখুন">শব্দকোষে অবদান রাখুন</h2> - -<p>এই শব্দকোষের কাজ, আসলে, শেষ হবে না কখনোই! আপনি <a href="/bn-BD/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">নতুন শব্দ যোগ করে</a> কিংবা বর্তমানগুলিকে পরিবর্তন করে অবদান রাখতে পারেন। শুরু করার সবচেয়ে সোজা উপায় হল নিচের বাটনে ক্লিক করা, কিংবা নিচের কয়েকটি শব্দ বেছে নিয়ে কাজ করা!</p> - -<p><strong><a href="/bn-BD/docs/new?parent=4391">শব্দকোষে নতুন শব্দ যুক্ত করুন</a></strong></p> - -<p>{{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"})}}</p> - -<p>আপনি যদি এই শব্দকোষের ব্যাপারে আরও জানতে চান, এই <a href="/bn-BD/docs/MDN/Doc_status/Glossary">শব্দকোষ ডকুমেন্টেশন স্ট্যাটাস পেজটি</a> দেখতে পারেন!</p> 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 ---- -<p><strong>স্থানীয়করণ</strong> (L10n) হচ্ছে এমন একটি প্রক্রিয়া, যা দ্বারা একটি সফটওয়্যারের ইউজার ইন্টারফেস একটি ভাষা থেকে অন্য ভাষায় রুপান্তর করা হয়। এবং সেই দেশের সংস্কৃতির সাথে সামঞ্জস্যপূর্ণ ও অধিবাসীদের ব্যবহার উপযোগী করা হয়। যাদের প্রযুক্তির প্রতি ও প্রযুক্তির স্থানীয়করণের প্রতি আগ্রহ রয়েছে, এসব রিসোর্স তাঁদের সকলের জন্য উন্মুক্ত। এগুলো ডেভেলপার ও অন্যান্য অবদানকারীর জন্য।</p> -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="সহায়ক_প্রবন্ধ_সমুহ">সহায়ক প্রবন্ধ সমুহ</h2> - <dl> - <dt> - <a href="/en-US/docs/Localization_Quick_Start_Guide" title="https://developer.mozilla.org/en-US/docs/Localization_Quick_Start_Guide">স্থানীয়করণের হাতে-খড়ি</a></dt> - <dd> - স্থানীয়করণে আগ্রহী স্বেচ্ছাসেবকগণের জন্য সর্ব প্রথম পাঠ্য।</dd> - <dt> - <a href="/en-US/docs/XUL_Tutorial/Localization" title="en-US/docs/XUL_Tutorial/Localization">XUL টিউটোরিয়ালঃ স্থানীয়করণ</a></dt> - <dd> - XUL অ্যাপ্লিকেশন স্থানীয়করণের জন্য <a href="https://developer.mozilla.org/en-US/docs/XUL_Tutorial" title="https://developer.mozilla.org/en-US/docs/XUL_Tutorial">XUL টিউটোরিয়াল </a></dd> - <dt> - <a href="/en-US/docs/Writing_localizable_code" title="en-US/docs/Writing_localizable_code">স্থানীয়করণ যোগ্য কোড লেখা</a></dt> - <dd> - প্রোগ্রামারদের স্থানীয়করণ যোগ্য সফটওয়্যার তৈরি করার জন্য সর্বোত্তম কার্যকৌশল এবং নির্দেশনা।</dd> - <dt> - <a class="external" href="http://wiki.babelzilla.org/index.php?title=Tutorials#How_to_localize_strings_from_the_help.html_file_of_an_extension" title="http://wiki.babelzilla.org/index.php?title=Tutorials#How_to_localize_strings_from_the_help.html_file_of_an_extension">Help file স্থানিয়করন</a></dt> - <dd> - এসব ফাইল আরও সহজে স্থানীয়করণ করার জন্য - HTML থেকে কন্টেন্ট কিভাবে আলাদা করব।</dd> - <dt> - <a class="external" href="http://wiki.babelzilla.org/index.php?title=Tutorials#How_to_resize_a_xul_pref_dialog_according_to_every_language" title="http://wiki.babelzilla.org/index.php?title=Tutorials#How_to_resize_a_xul_pref_dialog_according_to_every_language">বক্সের আকার</a></dt> - <dd> - নির্দিষ্ট স্থানীয়করণের জন্য কিভাবে উইন্ডোর আকার সমন্বয় করবো।</dd> - <dt> - <a href="/en-US/docs/Localizing_extension_descriptions" title="en-US/docs/Localizing_extension_descriptions">এক্সটেনশনের বর্ণনা স্থানীয়করণ</a></dt> - <dd> - একটি এক্সটেনশনের বর্ণনা স্থানীয়করণের জন্য (extension window এর মধ্যে, extension এর নামের নিচে যে লাইনটি দেখায়) আপনার install.rdf ফাইলের মধ্যে থাকা তথ্যকে পুনরায় লিখতে হবে। এর এজন্য আপনাকে একটি বিশেষ Preference Key ব্যবহার করতে হবে। এই প্রবন্ধটিতে install.rdf ফাইল মডিফাই বা override করার বিস্তারিত নির্দেশনা আছে।</dd> - <dt> - <a href="/en-US/docs/Frequently_Asked_Localization_Questions" title="en-US/docs/Frequently_Asked_Localization_Questions">স্থানীয়করণের ক্ষেত্রে সচরাচর জিজ্ঞাসিত প্রশ্ন সমূহ</a></dt> - <dd> - স্থানীয়করণের কাজ করার সময় যতরকম প্রস্ন সচরাচর করা হয়, তার উত্তর এখানে দেয়া রয়েছে।</dd> - </dl> - <p><span class="alllinks"><a href="/en-US/docs/tag/Localization" title="en-US/docs/tag/Localization">সব দেখুন...</a></span></p> - </td> - <td> - <h2 class="Community" id="সাহায্যকারী_দল">সাহায্যকারী দল</h2> - <ul> - <li>মজিলার ফোরাম সমূহ দেখুন...</li> - </ul> - <p>{{ DiscussionList("dev-l10n", "mozilla.dev.l10n") }}</p> - <ul> - <li><a href="/Special:Tags?tag=Localization:Tools&language=en" title="Special:Tags?tag=Localization:Tools&language=en">টুলস</a></li> - <li><a class="link-https" href="https://wiki.mozilla.org/L10n" title="https://wiki.mozilla.org/L10n">কমিউনিটি</a></li> - </ul> - <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">সম্পর্কিত বিষয়াবলী</h2> - <ul> - <li><a href="/en-US/docs/Extensions" title="en-US/docs/Extensions">Extensions</a>, <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a></li> - </ul> - </td> - </tr> - </tbody> -</table> -<p> </p> 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 ---- -<p><strong>WebRTC</strong> (<em>Web Real-Time Communication</em>) হল ভিডিও চ্যাট, ভয়েস কল এবং পিয়ার-টু-পিয়ার ফাইল শেয়ারিং ওয়েব অ্যাপের জন্য একটি {{Glossary("API")}}।</p> - -<p>WebRTC এর মূলত ৩টি অংশ রয়েছে:</p> - -<dl> - <dt><code>getUserMedia</code></dt> - <dd>ডিভাইসের ক্যামেরা ও মাইক্রোফোনে {{Glossary("Browser", "browser")}} ব্যবহারে সহযোগিতা করা।</dd> - <dt><code>RTCPeerConnection</code></dt> - <dd>ভিডিও চ্যাট বা ভয়েস কল কনফিগার করা।</dd> - <dt><code>RTCDataChannels</code></dt> - <dd>ব্রাউজারের মধ্যে একটি {{Glossary("P2P", "peer-to-peer")}} ডাটা যাওয়া আসার পথ তৈরি করা</dd> -</dl> - -<h2 id="আরও_জানুন">আরও জানুন</h2> - -<h3 id="সাধারণ_জ্ঞান" style="line-height: 24px;">সাধারণ জ্ঞান</h3> - -<ul> - <li>উইকিপিডিয়ায় {{Interwiki("wikipedia", "WebRTC")}}</li> -</ul> - -<h3 id="কারিগরি_জ্ঞান">কারিগরি জ্ঞান</h3> - -<ul> - <li><a href="/bn-BD/docs/Web/Guide/API/WebRTC">MDN এ WebRTC গাইড</a></li> - <li><a href="http://caniuse.com/#feat=rtcpeerconnection">WebRTC এর ব্রাউজার সাপোর্ট</a></li> -</ul> 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/নই ---- -<p>{{ CSSTutorialTOC() }}</p> -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}<span class="seoSummary">এটি <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> টিউটোরিয়াল এর ৫ম অংশ; এটি ব্যাখ্যা করে আপনি কিভাবে স্টাইল সমুহ নির্বাচিতভাবে প্রয়োগ করবেন, এবং কিভাবে বিভিন্ন প্রকার নির্বাচক সমুহ বিভিন্ন প্রাধান্য পায়। আপনি আপনার নমুনা নিবন্ধে কিছু এট্রিবিউট যোগ করতে পারেন, এবং আপনি সেসব এট্রিবিউটগুলো আপনার নমুনা স্টাইলশীটে ব্যবহার করতে পারেন ।</span></p> -<h2 class="clearLeft" id="তথ্যঃ_নির্বাচকসমুহ">তথ্যঃ নির্বাচকসমুহ</h2> -<p>সি এস এস ভাষা ব্যাখ্যা করার জন্য সি এস এস এর নিজস্ব পারিভাষিক শব্দ আছে। এই টিউটোরিয়াল এর পূর্বে, আপনি একটি লাইন তৈরি করুন যেমনঃ</p> -<pre class="brush: css">strong { - color: red; -} -</pre> -<p>সি এস এস পারিভাষিক শব্দে, এই সমগ্র লাইন হল নিয়ম। এই নিয়ম শুরু হ্য়<code> strong</code> দিয়ে, যেটা একটা নির্বাচক। এটা নির্বাচন করে কোন উপাদানগুলো DOM-এ আছে কোন নিয়ম প্রয়োগ করা আছে ।</p> -<p>আরো বিস্তারিত</p> -<p>বাকা বন্ধনীর ভেতরের অংশে প্রকাশিত হয়।</p> -<div class="tuto_details"> - <p>মূলশব্দ <code>color</code> হল একটি বৈশিষ্ট্য এবং <code>red</code> হল একটি মান।</p> - <p>একই প্রকাশিত অংশে বৈশিষ্ট্যের জোড়া মানের পর সেমিকোলন দিয়ে অন্য বৈশিষ্ট্যের জোড়া মান থেকে আলাদা করা হয়।</p> - <p>এই টিউটোরিয়াল এ নির্বাচক যেমন <code>strong</code> উল্লেখ করা হয় ট্যাগ নির্বাচক হিসেবে। সি এস এস সুনির্দিষ্টভাবে এটিকে টাইপ নির্বাচক হিসেবে উল্লেখ করে।</p> -</div> -<p>নির্বাচকসমুহ যেগুলো আপনি সি এস এস নিয়মে ব্যবহার করতে পারেন এই টিউটোরিয়ালের পাতা সেগুলো সম্পর্কে আরো বেশি ব্যাখ্যা করে।</p> -<p>ট্যাগ নামের সাথে আপনি এট্রিবিউট এর মান নির্বাচকসমুহে ব্যবহার করতে পারেন।এটি আপনার নিয়মকে আরো সুনির্দিষ্ট করতে অনুমোদন করে।</p> -<p>সি এস এস এর দুইটি এট্রিবিউট এর বিশেষ অবস্থা আছে। তারা হল <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> এবং <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p> -<h3 id="নির্বচকসমুহের_ক্লাস">নির্বচকসমুহের ক্লাস</h3> -<p><a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> এট্রিবিউট একটি উপাদানকে নামকৃত ক্লাস এ বরাদ্দ করার জন্য ব্যবহার করা হয়। আপনি আপনার ক্লাস এর জন্য কোন নাম পছন্দ করবেন এটা আপনার উপর। একটা নিবন্ধে বিভিন্ন উপাদান একই নামের হতে পারে।</p> -<p>আপনার স্টাইলশীটে, ক্লাস নামের পূর্বে আপনি যখন একটি নির্বাচকে ব্যবহার করবেন তখন দাড়ি লিখুন(period) ।</p> -<h3 id="নির্বাচকসমুহের_আইডি">নির্বাচকসমুহের আইডি</h3> -<p><a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a> এট্রিবিউট একটি উপাদানকে একটি আইডিতে বরাদ্দ করার জন্য ব্যবহৃত হয়। আপনি আইডিটার জন্যে কি নাম পছন্দ করবেন এটি আপনার উপর। নিবন্ধটিতে আইডি নাম অবশ্যই একটি এবং অনন্য হতে হবে।</p> -<p>আপনার স্টাইলশীটে, আপনি যখন নির্বাচকে ব্যবহার করবেন আইডির পূর্বে একটি নাম্বার সাইন(hash) লিখুন।</p> -<div class="tuto_example"> - <div class="tuto_type"> - উদাহরণ</div> - এই এইচ টি এম এল ট্যাগের একটি <code>class</code> এট্রিবিউট এবং একটি <code>id</code> এট্রিবিউট আছেঃ<br> - <pre class="brush: html"><p class="key" id="principal"> -</pre> - <p>নিবন্ধে আইডি মান, মূল, অবশ্যই এক এবং অনন্য হতে হবে, কিন্তু অন্য ট্যাগসমুহে একই ক্লাস নাম, মূল থাকতে পারে।</p> - <p>একটি সি এস এস স্টাইলশীটে, এই নিয়ম সকল উপাদানকে একই ক্লাস <code>key</code> green এর অন্তর্ভূক্ত করেছে। (তারা সবাই {{ HTMLElement("p") }} এর উপাদান নাও হতে পারে)</p> - <pre class="brush: css">.key { - color: green; -} -</pre> - <p>এই নিয়ম একটি উপাদানকে <strong>id</strong> <code>principal</code> বোল্ড করে :</p> - <pre class="brush: css">#principal { - font-weight: bolder; -} -</pre> -</div> -<p>যদি একটির বেশি নিয়ম একটি উপাদান এ প্রয়োগ করা হয় এবং একই বৈশিষ্ট্য উল্লেখ করা হয়, তাহলে সি এস এস নিয়মের উপর প্রাধান্য দেয় যেটা আরো বেশি সুনির্দষ্ট নির্বাচক। একটি আইডি নির্বাচক ক্লাস নির্বাচক এর চেয়ে আরো সুনির্দিষ্ট, যেটা পর্যায়ক্রমে একটি ট্যাগ নির্বাচক এর চেয়ে আরো বেশি সুনির্র্দিষ্ট।</p> -<div class="tuto_details"> - <div class="tuto_type"> - আরো বিস্তারিত</div> - <p>আপনি নির্বাচকসমুহকে একত্রিত করতে পারেন, নির্বাচককে আরো বেশি সুনির্দিষ্ট করার জন্যে।</p> - <p>উদাহরণ স্বরুপ, নির্বাচক <code>.key</code> <code>ক্লাস নাম key যুক্ত </code>সকল উপাদানকে নির্বাচন করে। নির্বাচক <code>p.key</code> ক্লাস নাম <code>key যুক্ত উপাদানকে </code>শুধুমাত্র {{ HTMLElement("p") }} নির্বাচন করে ।</p> - <p>আপনি দুইটি বিশেষ এট্রিবিউট <code>class</code> এবং <code>id দ্বারা নিয়ন্ত্রিত নন</code>। আপনি অন্য এট্রিবিউট সুনির্দিষ্ট করতে পারেন স্কয়ার বন্ধনী ব্যবহার করে। যেমন, নির্বাচক <code>[type='button']</code><code>button মানের একটি </code><code>type এট্রিবিউট দ্বারা</code> সকল উপাদানকে নির্বাচিত করে ।</p> -</div> -<p>যদি স্টাইলশীটে নিয়মগুলো পরস্পর বিরোধী হ্য় এবং তারা সমানভাবে সুনির্দিষ্ট হয়, তাহলে তারা সি এস এস নিয়মকে প্রাধান্য দেয় যেটা স্টাইলশীটে পরের দিকে আছে।</p> -<p>যখন পরস্পর বিরোধী নিয়মের কারণে আপনার সমস্যা হবে, আরো সুনির্দিষ্ট কোন নিয়মের দ্বারা এটি সমাধান করার চেষ্টা করুন, তাহলে সেটাই প্রাধান্য পাবে। যদি আপনি সেটা করতে না পারেন, চেষ্টা করুন স্টাইলশীটের শেষের দিকের কোন নিয়মের কাছাকাছি যেতে তাহলে সেটিই প্রাধান্য পাবে।</p> -<h3 id="নকল_ক্লাসের_নির্বাচকসমূহ">নকল ক্লাসের নির্বাচকসমূহ</h3> -<p>একটি <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="en-US/docs/Web/Guide/CSS/Pseudo-classes">pseudo-class</a> সি এস এস এর মূলশব্দ নির্বাচকের সাথে যুক্ত যেটা উপাদানের বিশেষ অবস্থা নির্বাচনের জন্য সুনির্দিষ্ট করে। উদাহরণ সরূপ, {{ Cssxref(":hover") }} একটা স্টাইল প্রয়োগ করা যাবে যখন কোন ব্যবহারকারী নির্বাচকের দ্বারা সুনির্দিষ্ট করে দেয়া উপাদানের উপর চলাচল করবে।</p> -<p>নকল ক্লাসসমুহ, নকল উপাদানগুলোর সাথে, আপনাকে একটি উপাদানের উপর শুধু স্টাইল প্রয়োগ করতে দেয়না, সেই সাথে বহিরাগত কারণের সাথে সংযোগ করে যেমন নেভিগেটরের ইতিহাস ({{ cssxref(":visited") }}, উদাহরণ স্বরূপ), এটার উপাদানের অবস্থা (যেমন {{ cssxref(":checked") }} কিছু উপাদানের গঠনের উপর), অথবা মাউসের অবস্থান (যেমন {{ cssxref(":hover") }} যেটা আপনাকে জানাবে মাউসটি উপাদানের উপর আছে নাকি নাই). একটি সম্পূর্ণ নির্বাচক সমুহের তালিকা, <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a> এখানে যান।</p> -<div class="tuto_example"> - <div class="tuto_type"> - Syntax</div> - <pre class="brush:css">selector:pseudo-class { - property: value; -} -</pre> -</div> -<h4 id="নকল_ক্লাসসমুহের_তালিকা">নকল ক্লাসসমুহের তালিকা</h4> -<ul> - <li>{{ Cssxref(":link") }}</li> - <li>{{ Cssxref(":visited") }}</li> - <li>{{ Cssxref(":active") }}</li> - <li>{{ Cssxref(":hover") }}</li> - <li>{{ Cssxref(":focus") }}</li> - <li>{{ Cssxref(":first-child") }}</li> - <li>{{ Cssxref(":nth-child") }}</li> - <li>{{ Cssxref(":nth-last-child") }}</li> - <li>{{ Cssxref(":nth-of-type") }}</li> - <li>{{ Cssxref(":first-of-type") }}</li> - <li>{{ Cssxref(":last-of-type") }}</li> - <li>{{ Cssxref(":empty") }}</li> - <li>{{ Cssxref(":target") }}</li> - <li>{{ Cssxref(":checked") }}</li> - <li>{{ Cssxref(":enabled") }}</li> - <li>{{ Cssxref(":disabled") }}</li> -</ul> -<h2 id="তথ্যঃ_সম্পর্কের_ভিত্তিতে_নির্বাচক_সমুহ">তথ্যঃ সম্পর্কের ভিত্তিতে নির্বাচক সমুহ</h2> -<p>উপাদান সমুহের মধ্যে পারস্পরিক সম্পর্কের ভিত্তিতে উপাদান সমুহ নির্বাচন করার জন্য সি এস এস এর কিছু উপায় আছে। নির্বাচক সমুহকে আরো বেশি সুনির্দিষ্ট করার জন্যে আপনি এগুলো ব্যবহার করতে পারেন।</p> -<table id="relselectors"> - <caption> - সম্পর্কের ভিত্তিতে পরিচিত নির্বাচকসমুহ</caption> - <tbody> - <tr> - <td style="width: 10em;"><strong>নির্বাচক</strong></td> - <td><strong>নির্বাচিতসমুহ</strong></td> - </tr> - <tr> - <td><code>A E</code></td> - <td>Any E element that is a <em>descendant</em> of an A element (that is: a child, or a child of a child, <em>etc</em>.)</td> - </tr> - <tr> - <td><code>A > E</code></td> - <td>Any E element that is a child of an A element</td> - </tr> - <tr> - <td><code>E:first-child</code></td> - <td>Any E element that is the first child of its parent</td> - </tr> - <tr> - <td><code>B + E</code></td> - <td>Any E element that is the next <em>sibling</em> of a B element (that is: the next child of the same parent)</td> - </tr> - </tbody> -</table> -<p>আপনি জটিল সম্পর্কগুলোকে প্রকাশ করার জন্যে এগুলো একত্রিত করতে পারেন।</p> -<p>আপনি <code>*</code> (asterisk) এই চিহ্নটি ব্যবহার করতে পারেন "যেকোনো উপাদান" বুঝানোর জন্যে।</p> -<div class="tuto_example"> - <div class="tuto_type"> - উদাহরণ</div> - <p>একটি এইচ টি এম এল টেবিলের একটি <code>id</code> এট্রিবিউট, কিন্তু এটির সারি এবং ছোট অংশগুলোর আলাদা আলাদা সনাক্তকারী থাকে নাঃ</p> - <pre class="brush: html"><table id="data-table-1"> -... -<tr> -<td>Prefix</td> -<td>0001</td> -<td>default</td> -</tr> -... -</pre> - <p>এই নিয়মগুলা সকল সারির প্রথম অংশকে বোল্ড করে, এবং দ্বিতীয় অংশকে মনোস্থানিক করে। তারা শুধু একটি সুনির্দিষ্ট টেবিলকে প্রভাবিত করেঃ</p> - <pre class="brush:css"> #data-table-1 td:first-child {font-weight: bolder;} - #data-table-1 td:first-child + td {font-family: monospace;} -</pre> - <p>ফলাফল এরূপ দেখায়ঃ</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <table style="width: 18em; margin-right: 2em;"> - <tbody> - <tr> - <td><strong>Prefix</strong></td> - <td><code>0001</code></td> - <td>default</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> -</div> -<div class="tuto_details"> - <div class="tuto_type"> - আরো বিস্তারিত</div> - <p>প্রচলিত উপায়ে, আপনি যদি একটি নির্বাচককে আরো সুনির্দিষ্ট করেন, তখন আপনি এটার প্রাধান্য বৃদ্ধি করতে পারবেন।</p> - <p>আপনি যদি পদ্ধতিগুলো ব্যবহার করেন, আপনার নিবন্ধে অনেকগুলো ট্যাগ-এর <code>class</code> অথবা <code>id এট্রিবিউটগুলোকে আপনি সুনির্দিষ্ট করার প্রয়োজন পরিহার করতে পারবেন। </code>তা ব্যতীত, সি এস এস কাজ করবে না।</p> - <p>অনেক বড় নকশার ক্ষেত্রে যেখানে গতি গুরুত্বপূর্ণ, আপনি আপনার স্টাইলশীটকে আরো নিপুণ করতে পারবেন জটিল নিয়মসমুহকে পরিহার করে যেটা উপাদান সমুহের মধ্যে পারস্পরিক সম্পর্কের উপর নির্ভর করে।</p> - <p>টেবিল সম্পর্কে আরো বেশি উদাহরণ এর জন্যে, সি এস এস রেফারেন্স পাতায় <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables </a>দেখুন।</p> -</div> -<h2 id="কাজঃ_ক্লাস_এবং_আইডি_নির্বাচক_সমুহের_ব্যবহার">কাজঃ ক্লাস এবং আইডি নির্বাচক সমুহের ব্যবহার</h2> -<p style="margin-left: 40px;">১। আপনার এইচ টি এম এল ফাইলটি সম্পাদনা করুন, কপি এবং পেস্ট করার মাধ্যমে।</p> -<p style="margin-left: 40px;">২। তারপর প্রথম কপিতে আইডি এবং ক্লাস এট্রিবিউট ব্যবহার করুন এবং একটি আইডি এট্রিবিউট দ্বিতীয় কপিতে দিন যেমন নিচে দেখানো হয়েছে। বিকল্পরূপে, আবার সমগ্র ফাইলকে কপি এবং পেস্ট করুনঃ</p> -<ol> - <li> - <pre class="brush: html"><!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> -</pre> - </li> - <li>এখন আপনি আপনার সি এস এস ফাইলটি সম্পাদনা করুন। সমগ্র বিষয় পুনঃস্থাপন করুনঃ<br> - <pre class="brush:css">strong { color: red; } -.carrot { color: orange; } -.spinach { color: green; } -#first { font-style: italic; } -</pre> - </li> - <li>ফাইলগুলো সংরক্ষণ করুন এবং ফলাফল দেখার জন্য আপনার ব্রাউজার রিফ্রেশ করুনঃ<br> - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - লাইনের ক্রম কোন প্রভাব ফেলে না এটি দেখানোর জন্য আপনি আপনার সি এস এস ফাইলে লাইনগুলো পুনরায় সাজানোর চেষ্টা করতে পারেন।<br> - <br> - <p>ক্লাস নির্বাচকসমুহ <code>.carrot</code> এবং <code>.spinach</code> ট্যাগ নির্বাচক <code>strong</code> এর উপরে প্রাধান্য পায়।</p> - <p>আইডি নির্বাচক <code>#first</code> ক্লাস এবং ট্যাগ নির্বাচকের উপরে প্রাধান্য পায়।</p> - </li> -</ol> -<div class="tuto_example"> - <div class="tuto_type"> - প্রতিদ্বন্দ্বিতাসমুহ</div> - <ol> - <li>আপনার এইচ টি এম এল ফাইল পরিবর্তন করা ছাড়া, আপনার সি এস এস ফাইলে একটি একক নিয়ম যোগ করুন যেটা সকল প্রথম অক্ষরকে একই রং এর করে রাখে যেমন এখন তারা আছে, কিন্তু দ্বিতীয় বর্ণনায় অন্য সকল টেক্সটকে নীল করে।<br> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> - <li>আপনি যে নিয়মটি এইমাত্র যোগ করেছেন তা এখন পরিবর্তন করে (অন্য কিছু পরিবর্তন না করে), প্রথম বর্ণনাকে নীল করার জন্যেঃ<br> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> - </ol> - <div class="tuto_details" id="tutochallenge"> - <div class="tuto_type"> - Possible solution</div> - <ol> - <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below: - <pre class="brush: css">#second { color: blue; } -</pre> - A more specific selector, <code>p#second</code> also works.</li> - <li>Change the selector of the new rule to be a tag selector using <code>p</code>: - <pre class="brush: css">p { color: blue; } -</pre> - </li> - </ol> - <a class="hideAnswer" href="#challenge">Hide solution</a></div> - <a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> -<h2 id="কাজঃ_নকল_ক্লাসের_নির্বাচকসমুহের_ব্যবহার">কাজঃ নকল ক্লাসের নির্বাচকসমুহের ব্যবহার</h2> -<ol> - <li>নিচের মত একটি এইচ টি এম এল ফাইল তৈরি করুনঃ</li> - <li> - <pre class="brush: html"><!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> -</pre> - </li> - <li>এখন আপনার সি এস এস ফাইল সম্পাদনা করুন। সমগ্র বিষয়গুলো পুনঃস্থাপন করুনঃ<br> - <pre class="brush: css">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; -} -</pre> - </li> - <li>ফাইলগুলো সংরক্ষণ করুন এবং ফলাফল দেখার জন্য আপনার ব্রাউজার রিফ্রেশ করুনঃ (আপনার মাউসটি নিচের লিংকের উপর রাখুন প্রভাব দেখার জন্য): - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span class="hidden"> </span><span class="hidden"> </span></td> - </tr> - </tbody> - </table> - </li> -</ol> -<h2 id="কাজঃ_সম্পর্ক_এবং_নকল_ক্লাসের_ভিত্তিতে_নির্বাচকসমুহের_ব্যবহার">কাজঃ সম্পর্ক এবং নকল ক্লাসের ভিত্তিতে নির্বাচকসমুহের ব্যবহার</h2> -<p>সম্পর্ক এবং নকল ক্লাসের ভিত্তিতে নির্বাচকসমুহ দ্বারা আপনি জটিল ক্যাসকেড এলগরিদম তৈরি করতে পারবেন।এটি ব্যবহার করার জন্য একটি সাধারণ কৌশল , উদাহরণ স্বরূপ, in order to create <strong>pure-CSS dropdown menus</strong> তৈরি করার জন্য (এটি শুধুমাত্র সি এস এস, <a href="/en-US/docs/Web/JavaScript" title="en-US/docs/Web/JavaScript">JavaScript </a>ব্যতিরেকে). এই কৌশল এর সারাংশ হল নিম্নে বর্ণিত নিয়মের মত একটি নিয়ম তৈরি করাঃ</p> -<pre class="brush: css">div.menu-bar ul ul { - display: none; -} - -div.menu-bar li:hover > ul { - display: block; -}</pre> -<p>প্রয়োগ করার জন্য একটি এইচ টি এম এল গঠন নিম্নে দেয়া হলঃ</p> -<pre class="brush: html"><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> -</pre> -<p>আপনার সম্পূর্ণ <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a> দেখুন একটি সম্ভব সংকেতের জন্য।</p> -<h2 id="পরবর্তীতে_কি">পরবর্তীতে কি?</h2> -<p>আপনার নমুনা স্টাইলশীট এখন এবং জটিল দেখাতে শুরু করেছে। পরবর্তী অংশ সি এস এসকে <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">easier to read</a> করার উপায় বর্ণনা করে {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p> 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 ---- -<p>{{ CSSTutorialTOC() }}</p> -<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles")}}এটা হচ্ছে <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">যেভাবে শুরু করবেন CSS </a> টিউটোরিয়ালের ৮ম বিভাগ; এটা ব্যাখ্যা করবে কিভাবে আপনি CSS এ রং উল্লেখ করবেন. আপনি আপনার নমুনা স্টাইলশিট এ পরিচিত হবেন background রং এর সাথে।</p> -<h2 class="clearLeft" id="তথ্য_রং_(color)">তথ্য: রং (color)</h2> -<p>এই টিউটোরিয়ালে এখন পর্যন্ত ,আপনি ব্যবহার করেছেন একটি নির্দিষ্ট সংখ্যক রং এর নাম . CSS 2 সর্বোপরি ১৭ টি রং এর নাম বহন করে। কিছু নাম হয় তো সেগুলো, যেগুলো আপনি আশা করেন না।</p> -<table style="border: 0px; margin-left: 2em; text-align: right;"> - <tbody> - <tr> - <td> </td> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: black;"> </td> - <td>gray</td> - <td style="width: 2em; height: 2em; background-color: gray;"> </td> - <td>silver</td> - <td style="width: 2em; height: 2em; background-color: silver;"> </td> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td> - </tr> - <tr> - <td>primaries</td> - <td>red</td> - <td style="width: 2em; height: 2em; background-color: red;"> </td> - <td>lime</td> - <td style="width: 2em; height: 2em; background-color: lime;"> </td> - <td>blue</td> - <td style="width: 2em; height: 2em; background-color: blue;"> </td> - </tr> - <tr> - <td>secondaries</td> - <td>yellow</td> - <td style="width: 2em; height: 2em; background-color: yellow;"> </td> - <td>aqua</td> - <td style="width: 2em; height: 2em; background-color: aqua;"> </td> - <td>fuchsia</td> - <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td> - </tr> - <tr> - <td> </td> - <td>maroon</td> - <td style="width: 2em; height: 2em; background-color: maroon;"> </td> - <td>orange</td> - <td style="width: 2em; height: 2em; background-color: orange;"> </td> - <td>olive</td> - <td style="width: 2em; height: 2em; background-color: olive;"> </td> - <td>purple</td> - <td style="width: 2em; height: 2em; background-color: purple;"> </td> - <td>green</td> - <td style="width: 2em; height: 2em; background-color: green;"> </td> - <td>navy</td> - <td style="width: 2em; height: 2em; background-color: navy;"> </td> - <td>teal</td> - <td style="width: 2em; height: 2em; background-color: teal;"> </td> - </tr> - </tbody> -</table> -<p> </p> -<div class="tuto_details"> - <div class="tuto_type"> - বিস্তারিত</div> - <p>আপনার browser হয়ত আরও অনেক রং এর নাম বহন করতে পারে, যেমনঃ</p> - <table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;"> - <tbody> - <tr> - <td>dodgerblue</td> - <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td> - <td>peachpuff</td> - <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td> - <td>tan</td> - <td style="width: 2em; height: 2em; background-color: tan;"> </td> - <td>firebrick</td> - <td style="width: 2em; height: 2em; background-color: firebrick;"> </td> - <td>aquamarine</td> - <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td> - </tr> - </tbody> - </table> - <p>এই প্রসারিত তালিকার আরও বিস্তারিত জানার জন্য দেখুন: <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG color keywords</a> CSS 3 এর রং এর মডিউল এ। সতর্ক থাকুন ওই সব রং এর নাম ব্যবহারে যেগুলো আপনার পাঠকের browsers এ হয়ত বহন করে না।</p> -</div> -<p>একটি বৃহৎ palette এর জন্য, যে রং গুলো আপনি চান সেগুলোর লাল (red), সবুজ(green) এবং নীল( blue) উপাদানগুলো উল্লেখ করুন হ্যাশট্যাগ (#) দিয়ে এবং ৩টি <em>হেক্সাডেসিমাল</em>(<em>hexadecimal)</em> সংখ্যা যাদের শ্রেণী 0 - 9 , a – f. a – f অক্ষরগুলো দিয়ে 10 – 15 এর মান বুঝায়:</p> -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: #000;"> </td> - <td><code>#000</code></td> - </tr> - <tr> - <td>pure red</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#f00</code></td> - </tr> - <tr> - <td>pure green</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> - <td><code>#0f0</code></td> - </tr> - <tr> - <td>pure blue</td> - <td style="width: 2em; height: 2em; background-color: #00f;"> </td> - <td><code>#00f</code></td> - </tr> - <tr> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#fff</code></td> - </tr> - </tbody> -</table> -<p>সম্পূর্ণ palette এর জন্য, প্রতিটি উপাদানের ক্ষেত্রে উল্লেখ করুন দুইটি হেক্সাডেসিমাল সংখ্য:</p> -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: #000;"> </td> - <td><code>#000000</code></td> - </tr> - <tr> - <td>pure red</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#ff0000</code></td> - </tr> - <tr> - <td>pure green</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> - <td><code>#00ff00</code></td> - </tr> - <tr> - <td>pure blue</td> - <td style="width: 2em; height: 2em; background-color: #00f;"> </td> - <td><code>#0000ff</code></td> - </tr> - <tr> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#ffffff</code></td> - </tr> - </tbody> -</table> -<p>আপনি সচারচর এই ৬ সংখ্যার হেক্সাডেসিমাল কোড গুলো আপনার গ্রাফিক্স প্রোগ্রাম অথবা অন্য কোন টুলস থেকে পেতে পারেন।</p> -<div class="tuto_example"> - <div class="tuto_type"> - উদাহরণ</div> - <div class="tuto_type"> - <strong>সামান্য প্র্যাকটিস করে, আপনি তিন সংখ্যার রং গুলো আপনার বেশিরভাগ কাজের জন্য সুবিন্যস্ত করতে পারবেনঃ</strong></div> - <div class="tuto_type"> - </div> - <table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> - <tbody> - <tr> - <td>শুরু লাল এর সাথে:</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#f00</code></td> - </tr> - <tr> - <td>একে হাল্কা করার জন্য, কিছু সবুজ এবং নীল যোগ করুনঃ</td> - <td style="width: 2em; height: 2em; background-color: #f77;"> </td> - <td><code>#f77</code></td> - </tr> - <tr> - <td>একে আরও কমলা করার জন্য, সামান্য একটু এক্সট্রা সবুজ যোগ করুনঃ</td> - <td style="width: 2em; height: 2em; background-color: #fa7;"> </td> - <td><code>#fa7</code></td> - </tr> - <tr> - <td>আরও ডার্ক করার জন্য, এর সব উপাদান মুছে ফেলুন:</td> - <td style="width: 2em; height: 2em; background-color: #c74;"> </td> - <td><code>#c74</code></td> - </tr> - <tr> - <td>এর সম্পৃক্তি দূর করার জন্য, এর উপাদান গুলো কে আরও সমান করুনঃ</td> - <td style="width: 2em; height: 2em; background-color: #c98;"> </td> - <td><code>#c98</code></td> - </tr> - <tr> - <td>আপনি যদি একদম সমান করেন তাহলে আপনি পাবেন ধুুসরঃ</td> - <td style="width: 2em; height: 2em; background-color: #ccc;"> </td> - <td><code>#ccc</code></td> - </tr> - </tbody> - </table> - <p>একটি মোমের মত শেডের জন্য যেমন বর্ণহীন নীলঃ</p> - <table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> - <tbody> - <tr> - <td>শুরু একদম শুভ্র সাদা থেকে:</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#fff</code></td> - </tr> - <tr> - <td>অন্যান্য উপাদানগুলো সামান্য কমান:</td> - <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td> - <td><code>#eef</code></td> - </tr> - </tbody> - </table> -</div> -<div class="tuto_details"> - <div class="tuto_type"> - আরও বিস্তারিত</div> - <p>আপনি আরও উল্লেখ করতে পারেন একতি রং এর ডেসিমাল RGB মানগনগুলো যাদের শ্রেণী 0 – 25 অথবা percentages.</p> - <p>উদাহরণস্বরূপ ,মেরুন (dark red):</p> - <pre class="brush:css language-css"><code class="language-css"><span class="token function">rgb</span>(128, 0, 0)</code></pre> - <p>কিভাবে রং উল্লেখ করা যায় তার আরও বিস্তারিত জানার জন্য দেখুনঃ <a class="external external-icon" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">রং</a> CSS সুনির্দিষ্টকরণে এ। ম্যাচিং সিস্টেম রং যেমন মেনু এবং ThreeDFace, দেখুন: <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 System Colors</a> CSS সুনির্দিষ্টকরণে এ।</p> -</div> -<p> </p> -<p>আপনি ইতিমধ্যে {{ cssxref("color") }} প্রপার্টি text এ ব্যবহার করেছেন ।</p> -<p>আপনি চাইলে আরও ব্যবহার করতে পারেন {{ cssxref("background-color") }} প্রপার্টি টি যাতে করে আপনি উপাদানগুলোর ব্যাকগ্রাউন্ড পরিবর্তন করতে পারেন।</p> -<p>ব্যাকগ্রাউন্ড টি আপনি সেট করতে পারেন স্বচ্ছ ভাবে যাতে করে আপনি স্পষ্টভাবে যে কোন রং মুছে ফেলতে পারেন, মূল উপাদানের ব্যাকগ্রাউন্ড প্রকাশ করে।</p> -<div class="tuto_example"> - <div class="tuto_type"> - উদাহরণ</div> - <p>এই টিউটোরিয়ালে <strong>উদাহরণ</strong> বাক্সগুলোতে বর্ণহীন হলুদ ব্যাকগ্রাউন্ড ব্যবহার করা হয়েছে:</p> - <pre class="brush:css">background-color: #fffff4; -</pre> - <p><strong>আরও বিস্তারিত</strong> বাক্সগুলো এই বর্ণহীন ধূসর ব্যবহার করেছেঃ</p> - <pre class="brush:css">background-color: #f4f4f4; -</pre> -</div> -<p> </p> -<h2 id="কাজ_কালার_কোড_এর_ব্যবহার">কাজ: কালার কোড এর ব্যবহার</h2> -<ol> - <li>আপনার CSS ফাইল সম্পাদন করুন।</li> - <li>এখানে মোটা করে যেগুলো দেখানো হয়েছে সেগুলো পরিবর্তন করুন, যাতে করে আপনি আদি অক্ষরগুলো কে একটি বর্ণহীন নীল রং দিতে পারেন। ( যে বিন্যাসগুলো এবং মন্তব্যগুলো আপনার ফাইলে দেখানো হয়েছে সেগুলো সম্ভবত দেখানো ফাইলগুলো হতে ভিন্ন।এই বিন্যাস এবং উক্তিগুলো আপনার মত করে সেভ করে রাখুন।)<br> - <pre class="brush:css;highlight:[13]">/*** 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;} -</pre> - </li> - <li>ফাইলটি সেভ করুন এবং আপনার ব্রাউজার টিকে রিফ্রেশ করুন যাতে করে আপনি ফলাফলটি দেখতে পারেন।</li> -</ol> -<table> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</td> - </tr> - </tbody> -</table> -<table class="standard-table"> - <tbody> - <tr> - <td> - <p><strong>প্রতিদন্দিতাঃ</strong><br> - আপনার CSS ফাইলে ,সব গুলো কালারের নাম পরিবর্তন করে 3 ডিজিট এর কালার কোড এ পরিবর্তন করুন ফলাফলে কোন প্রভাব না ফেলে।</p> - <p>(এটা হয়ত একদম সঠিক ভাবে হবে না, কিন্তু আপনি কাছাকাছি যেতে পারবেন। একদম সঠিক ভাবে করার জন্য আপনার প্রয়োজন 6 ডিজিট এর কোডসমূহ, এবং প্রয়োজন CSS সুনির্দিষ্টকরন দেখা অথবা ব্যবহার করুন একটি গ্রাফিক্স টুল যাতে করে কালার গুলো মিল করাতে পারেন।)</p> - <p> <a href="https://developer.mozilla.org/bn-BD/docs/Web/CSS/Getting_Started/Color$edit#tutochallenge">প্রতিদ্বন্দ্বিতার জন্য সমাধান দেখুন।</a></p> - </td> - </tr> - </tbody> -</table> -<h2 id="এরপর_কি"><strong>এরপর কি?</strong></h2> -<p><br> - {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content")}}আপনার নমুনা ডকুমেন্ট এবং আপনার নমুনা stylesheet এর থেকে সম্পূর্ণভাবে আলাদা। এর পরে <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Content">পরবর্তী বিভাগ</a> ব্যাখ্যা করবে কেমন করে আপনি এই সম্পূর্ণ আলাদা জিনিস থেকে ভিন্ন কিছু তৈরি করবেন।<br> - </p> 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/লে-আউট ---- -<p style="margin-left: 40px;">{{ CSSTutorialTOC() }}</p> -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")}} <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS শুরু করা</a>র ১২তম অধ্যায় এটি; আপনার ডকুমেন্টের লে-আউট কীভাবে adjust করা যায় তা রয়েছে এখানে। আপনার নমুনা ডকুমেন্টের লে-আউট আপনি পরিবর্তন করতে পারেন।</p> -<h2 class="clearLeft" id="তথ্যঃ_লে-আউট">তথ্যঃ লে-আউট</h2> -<p>বিভিন্ন দৃশ্যমান প্রভাব বিশেষায়িত করার জন্য আপনি CSS ব্যবহার করতে পারেন যা আপনার ডকুমেন্টের লে-আউট পরিবর্তন করে। লে-আউট বিশেষায়িত করার কিছু পদ্ধতি বেশ অগ্রসর এবং সেগুলো এই বেসিক টিউটোরিয়ালের ঊর্ধ্বে।</p> -<p>আপনি যখন একাধিক ব্রাউজারে প্রায় একইরকম দৃশ্যমান লে-আউট ডিজাইন করেন, তবে তা আপনার স্টাইলশীট ব্রাউজারের ডিফল্ট স্টাইলশীট এবং লে-আউট ইঞ্জিনের সাথে যেভাবে interact করে তা বেশ জটিল হতে পারে। এটিও একটি অগ্রসরমান বিষয়, এই বেসিক টিউটোরিয়ালের ঊর্ধ্বে।</p> -<p>এই পেজে আপনার চেষ্টা করে দেখার জন্য কিছু সহজ কৌশল বর্ণনা করা আছে।</p> -<h3 id="ডকুমেন্ট_স্ট্রাকচার">ডকুমেন্ট স্ট্রাকচার</h3> -<p>আপনি যদি আপনার ডকুমেন্টের লে-আউট নিয়ন্ত্রণ করতে চান তবে আপনাকে এর স্ট্রাকচার পরিবর্তন করতে হতে পারে।</p> -<p>আপনার ডকুমেন্টের মার্কআপ ল্যাংগুয়েজের খুব সম্ভবত স্ট্রাকচার তৈরি করার জন্য general-purpose ট্যাগ আছে। যেমন ধরুনঃ HTMLএ আপনি স্ট্রাকচার তৈরির জন্য {{ HTMLElement("div") }} এলিমেন্ট ব্যবহার করতে পারেন।</p> -<div class="tuto_example"> - <div class="tuto_type"> - উদাহরণ</div> - <p>নমুনা ডকুমেন্টে, দ্বিতীয় শিরোনামের আওতায় সংখ্যায়িত প্যারাগ্রাফে নিজস্ব কোন কন্টেইনার নেই।</p> - <p>আপনার স্টাইলশীট প্যারাগ্রাফগুলোর চারদিকে বর্ডার টানতে পারে না, কারণ এই সেক্টরটি বিশেষায়িত করার জন্য কোন এলিমেন্ট নাই।</p> - <p>স্ট্রাকচারের এই সমস্যা সমাধানের জন্য, আপনি প্যারাগ্রাফের চারদিকে একটি {{ HTMLElement("div") }} ট্যাগ যোগ করতে পারেন। এই ট্যাগটি ,তাই এটি নির্দিষ্ট করা যেতে পারে একটি <code>id</code> অ্যাট্রিবিউট দিয়েঃ</p> - <pre class="brush:html;highlight:[2,8]"><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> -</pre> - <p>এখন আপনার স্টাইলশীট দুটি লিস্টের চারদিকে বর্ডার দেওয়ার জন্য একটি রুল ব্যবহার করতে পারেঃ</p> - <pre class="brush:css">ul, #numbered { - border: 1em solid #69b; - padding-right:1em; -} -</pre> - <p>এরকম দেখতে পাওয়ার কথাঃ</p> - <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> - <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </div> - </div> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> - <p><strong>1: </strong>Lorem ipsum</p> - <p><strong>2: </strong>Dolor sit</p> - <p><strong>3: </strong>Amet consectetuer</p> - <p><strong>4: </strong>Magna aliquam</p> - <p><strong>5: </strong>Autem veleum</p> - </div> - </td> - </tr> - </tbody> - </table> -</div> -<h3 id="সাইজ_ইউনিট">সাইজ ইউনিট</h3> -<p>এত দূর পর্যন্ত এই টিউটোরিয়ালে আপনি pixel (<code>px</code>)এ সাইজ নির্ধারণ করেছেন। কম্পিউটার স্ক্রিনের মত কিছু কিছু ডিসপ্লে ডিভাইসের ক্ষেত্রের জন্য এটি যথাযথ। কিন্তু ব্যবহারকারী যখন ফন্ট সাইজ পরিবর্তন করে তখন আপনার লে-আউটে সমস্যা দেখা দিতে পারে।</p> -<p>অধিকাংশ ক্ষেত্রেই শতকরা হিসাবে অথবা ems (<code>em</code>)এ সাইজ নির্দিষ্ট করে দেওয়াই ভাল। em হল nominally চলমান ফন্টের (একটি m এর প্রসস্ততা) সাইজ। ব্যবহারকারী যখন ফন্ট সাইজ পরিবর্তন করেন, আপনার লে-আউট নিজে পরিবর্তন থেকেই হয়ে যায়।</p> -<div class="tuto_example"> - <div class="tuto_type"> - উদাহরণ</div> - <p>এই টেক্সটের বামদিকের বর্ডারের সাইজ পিক্সেলে নির্ধারিত।</p> - <p>ডানদিকের বর্ডারের সাইজ ems দিয়ে নির্ধারিত।</p> - <p>আপনার ব্রাউজারে, ফন্ট পরিবর্তন করে দেখতে পারেন কীভাবে ডানদিকের বর্ডার adjusts হয় কিন্তু বাঁদিকের বর্ডার হয় নাঃ</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <div style=""> - আমার আকার পুনঃনিরধারণ করুন</div> - </td> - </tr> - </tbody> - </table> -</div> -<div class="tuto_details"> - <div class="tuto_type"> - বিস্তারিত</div> - <p>অন্যান্য ডিভাইসের ক্ষেত্রে, অন্যান্য দৈর্ঘ্য একক প্রযোজ্য।</p> - <p>এই টিউটোরিয়ালের পরবর্তী পেজে এ সংক্রান্ত আরো তথ্য আছে।</p> - <p>মান ও একক সংক্রান্ত বিস্তারিত জানার জন্য, CSS Specificationএ আপনি see <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> ব্যবহার করতে পারেন।</p> -</div> -<h3 id="টেক্সট_লে-আউট">টেক্সট লে-আউট</h3> -<p>কোন এলিমেন্টের একাধিক কন্টেন্ট কীভাবে এক লাইনে নিয়ে আসা যায় তা দুইটি প্রপার্টি দিয়ে নির্ধারিত হয়। সাধারণ লে-আউট adjustment এর জন্য আপনি সেগুলো ব্যবহার করতে পারেনঃ</p> -<dl> - <dt> - {{ cssxref("text-align") }}</dt> - <dd> - কন্টেন্ট এক লাইনে নিয়ে আসা। এই ভেল্যুগুলোর যেকোনটি ব্যবহার করেঃ <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code></dd> - <dt> - {{ cssxref("text-indent") }}</dt> - <dd> - আপনার নির্ধারিত পরিমাণ অনুসারে কন্টেন্ট ইনডেন্ট করেঃ</dd> -</dl> -<p>শুধুমাত্র লেখাতেই না কোন এলিমেন্টের লেখা সদৃশ যেকোন কনটেন্টে এই প্রপার্টিগুলো প্রয়োগ করা যেতে পারে। খেয়াল রাখবেন, এগুলো এলিমেন্টের children দিয়ে inherited, তাই অবান্তর ফলাফল এড়াতে আপনাকে খুব সম্ভবত childrenএ সেগুলো বন্ধ করে নেওয়ার প্রয়োজন হতে পারে।</p> -<div class="tuto_example"> - <div class="tuto_type"> - উদাহরণ</div> - <p>শিরোনাম মাঝে আনতেঃ</p> - <pre class="brush:css">h3 { - border-top: 1px solid gray; - text-align: center; -} -</pre> - <p>ফলাফলঃ</p> - <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p> - </td> - </tr> - </tbody> - </table> - <p>যে কোন HTML ডকুমেন্টে, শিরোনামের নিচে আপনি যে কনটেন্ট দেখেন তা গঠনগত ভাবে শিরোনামের আওতাধীন নয়। তাই আপনি যখন এরক্ম কোন শিরোনামকে এক লাইনে নিয়ে আসেন, তখন শিরোনামের নিচের ট্যাগগুলো ওই স্টাইলের অন্তর্ভুক্ত হয় না।</p> -</div> -<h3 id="Floats">Floats</h3> -<p>{{ cssxref("float") }} প্রপার্টি কোন এলিমেন্টকে ডানে-বামে সরায়। এলিমেন্টের অবস্থান ও আকার নির্ধারণের জন্য এটি একটি সহজ উপায়।</p> -<p>ডকুমেন্ট কনটেন্টের বাকি অংশ সাধারণত floated এলিমেন্টের চারদিকেই থাকে। অন্যান্য এলিমেন্টগুলোতে {{ cssxref("clear") }} প্রপার্টি ব্যবহার করে আপনি তাদের ফ্লট এর বাইরে থাকা নিয়ন্ত্রণ করতে পারেন।</p> -<div class="tuto_example"> - <div class="tuto_type"> - উদাহরণ</div> - <p>আপনার নমুনা ডকুমেন্টে, লিস্ট উইন্ডোতে ছড়িয়ে থাতে পারে। সেগুলোকে বাঁদিকে সরিয়ে আপনি তা রোধ করতে পারেন।</p> - <p>শিরোনামগুলোকে সঠিক স্থানে রাখার জন্য, আপনাকে অবশ্যই এটি নির্দিষ্ট করে দিতে হবে যেন সেগুলো ফ্লট মুক্ত থাকেঃ</p> - <pre class="brush:css">ul, #numbered {float: left;} -h3 {clear: left;} -</pre> -</div> -<p>এমন দেখতে পাওয়ার কথাঃ</p> -<table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </div> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> - <p><strong>1: </strong>Lorem ipsum</p> - <p><strong>2: </strong>Dolor sit</p> - <p><strong>3: </strong>Amet consectetuer</p> - <p><strong>4: </strong>Magna aliquam</p> - <p><strong>5: </strong>Autem veleum</p> - </div> - </td> - </tr> - </tbody> -</table> -<p>(বক্সের ডানদিকে সামান্য padding দরকার, সেখানে বর্ডার লেখার খুবই কাছে হয়ে গিয়েছে।)</p> -<h3 id="অবস্থান_নির্ধারণ">অবস্থান নির্ধারণ</h3> -<p>চারটি উপায়ে আপনি কোন এলিমেন্টের অবস্থান নির্ধারণ করতে পারেন {{ cssxref("position") }} প্রপার্টি এবং নিচের যেকোন একটি ভেল্যু নির্দিষ্ট করে।</p> -<p>এগুলো এডভান্সড প্রপার্টি। সহজভাবেও এগুলো ব্যবহার করা যায় — সেজন্যই এই বেসিক টিউটোরিয়ালে এ সম্পর্কে বলা হয়েছে। তবে কমপ্লেক্স লে-আউটের জন্য এগুলো ব্যবহার করা কিছুটা জটিল হতে পারে।</p> -<dl> - <dt> - <code>relative</code></dt> - <dd> - এলিমেন্টের স্বাভাবিক অবস্থানের আপেক্ষিক পরিবর্তন করা হয়। Use this to shift an element by a specified amount. You can sometimes use the element's margin to achieve the same effect.</dd> - <dt> - <code>fixed</code></dt> - <dd> - এক্ষেত্রে এলিমেন্টের অবস্থান নির্দিষ্ট। এলিমেন্টের অবস্থান ডকুমেন্ট উইন্ডো অনুযায়ী নির্ধারণ করুন। বাকি ডেকুমেন্ট স্ক্রল করলেও এ ক্ষেত্রে এলিমেন্টটি স্থির থাকবে।</dd> - <dt> - <code>absolute</code></dt> - <dd> - parent এলিমেন্টের তুলনায় এলিমেন্টের অবস্থান স্থির থাকবে। শুধুমাত্র একটি parent যার নিজের অবস্থান <code>relative</code>, <code>fixed</code> অথবা <code>absolute</code> দিয়ে নির্ধারিত সেটি কাজ করবে। <code>position: relative নির্দিষ্ট করে আপনি যেকোন </code>parent<code> এলিমেন্টকেই এর জন্য প্রস্তুত করে নিতে পারেন;</code> এর জন্য কোন শিফট ব্যবহার না করেই।</dd> - <dt> - <code>static</code></dt> - <dd> - ডিফল্ট। অবস্থান নির্ধারণ করা সম্পূর্ণ বন্ধ করার প্রয়োজন হলে এই ভেল্যুটি ব্যবহার করুন।</dd> -</dl> -<p><code>position</code> প্রপার্টির এই ভেল্যুগুলোর সাথে সাথে (<code>static ব্যতীত</code>), আরো কিছু প্রপার্টি নির্দিষ্ট করুনঃ <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>width</code>, <code>height</code>। আপনি কোথায় আপনার এলিমেন্টটি দেখতে পেতে চান তা এগুলো নির্দেশ করে এবং এর সাথে সাথে আকারও।</p> -<div class="tuto_example"> - <div class="tuto_type"> - উদাহরণ</div> - <p>দুইটি এলিমেন্ট একে অপরের উপর অবস্থাআন দেওয়ার জন্য, আপনার ডকুমেন্টের ভেতরে দুইটি এলিমেন্টসহ একটি parent কন্টেইনার তৈরি করুনঃ</p> - <pre class="brush:html"><div id="parent-div"> - <p id="forward">/</p> - <p id="back">\</p> -</div> -</pre> - <p>আপনার স্টাইলশীটে, parents এর অবস্থান <code>relative</code> করুন। এখানে কোন প্রকৃত শিফট নির্ধারণের কোন প্রয়োজন নেই। children এর অবস্থান <code>absolute</code> নির্ধারণ করুনঃ</p> - <pre class="brush:css">#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; -} -</pre> - <p>ফলাফলে ফরওয়ার্ড শ্ল্যাশের উপরে ব্যাকশ্ল্যাশ দিয়ে এমনটি দেখতে পাওয়ার কথাঃ</p> - <div style="position: relative; left: .33em; font: bold 300% sans-serif;"> - <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p> - <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p> - </div> - <table style="border: 2px outset #36b; padding: 1em; width: 30em; height: 5em; background-color: white;"> - <tbody> - <tr> - <td> </td> - </tr> - </tbody> - </table> -</div> -<div class="tuto_details"> - <div class="tuto_type"> - আরো বিস্তারিত</div> - <p>অবস্থান নির্ধারণের পুরো বিষয়টির উপর CSS Specificationএ দুইটি জটিল অধ্যায় আছেঃ <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> এবং <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>.</p> - <p>আপনি যদি একাধিক ব্রাউজারে কার্যকর কোন স্টাইলশীট ডিজাইন করতে থাকেন, তবে আপনারও তা অ্যাকাউন্ট ডিফারেন্সে নেওয়ার দরকার হতে পারে, যেভাবে ব্রাউজার স্ট্যান্ডার্ডের সাথে interpret করে এবং খুব সম্ভবত নির্দিষ্ট কিছু ব্রাউজারের বিশেষ কিছু ভার্সনে বাগ করতে পারে।</p> -</div> -<h2 id="Action_লে-আউট_নির্ধারণ">Action: লে-আউট নির্ধারণ</h2> -<ol> - <li>আপনার নমুনা ডকুমেন্ট পরিবর্তন করুন, <code>doc2.html</code> এবং স্টাইলশীট, <code>style2.css</code>, এই অংশে উপরের উদাহরণ <a href="#Document_structure" title="#Document structure"><strong>ডকুমেন্ট স্ট্রাকচার</strong></a> এবং <a href="#Floats" title="#Floats"><strong>ফ্লটস</strong></a>।</li> - <li><a href="#Floats" title="#Floats"><strong>ফ্লটস</strong></a> উদাহরণে, আপনার padding যুক্ত করুন ডানদিকের বর্ডার থেকে টেক্সট 0.5 em দূরে সরানোর জন্য।</li> -</ol> -<div class="tuto_example"> - <div class="tuto_type"> - চ্যালেঞ্জ</div> - <p>আপনার<strong> </strong>নমুনা ডকুমেন্ট পরিবর্তন করুন, <code>doc2.html</code>, শেষ করার আগ দিয়ে এই ট্যাগটি যুক্ত করে, <code></body> ট্যাগের </code>ঠিক আ<code>গে।</code></p> - <pre class="brush:html"><img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> -</pre> - <p>এই টিউটোরিয়ালে আপনি যদি ইমেজ ফাইলটি আগে থেকে ডাউনলোড না করে থাকেন, তবে এখন সেটি ডাউনলোড করে নিন এবং <code>নমুনা ফাইলের মত </code>একই ডিরেক্টরিতে এটি রাখুনঃ</p> - <table style="border: 2px solid #ccc;"> - <tbody> - <tr> - <td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td> - </tr> - </tbody> - </table> - <p>আপনার ডকুমেন্টের কোথায় ইমেজটি দেখা যেতে ঠিক করে নিন। এবার আপনার ব্রাউজার রিফ্রেশ করুন আপনার কাজ সঠিক হয়েছে কিনা তা দেখার জন্য।</p> - <p>আপনার স্টাইলশীটে একটি রুল যুক্ত করুন যা আপনার ডকুমেন্টে উপরের দিকে ডানে ইমেজটি রাখে।</p> - <p>আপ্নার ব্রাউজার রিফ্রেশ করে উইন্ডোটি ছোট করুন। যখন আপনি আপনার ডকুমেন্ট স্ক্রল করেন তখন দেখুন ইমেজটি উপরের দিকে ডানে থাকে কিনাঃ</p> - <div style="position: relative; width: 29.5em; height: 18em;"> - <div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </div> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - <div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> - <p><strong>1: </strong>Lorem ipsum</p> - <p><strong>2: </strong>Dolor sit</p> - <p><strong>3: </strong>Amet consectetuer</p> - <p><strong>4: </strong>Magna aliquam</p> - <p><strong>5: </strong>Autem veleum</p> - </div> - <p style=""> </p> - <div style="position: absolute; top: 2px; right: 0px;"> - <img alt="Yellow map pin" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></div> - </div> - </div> -</div> -<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout"> এই চ্যালেঞ্জটির একটি সমাধান দেখুন।</a></p> -<h2 id="এর_পরে">এর পরে?</h2> -<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables") }} এইমাত্র আপনি এই বেসিক CSS টিউটোরিয়ালের সব টপিক প্রায় শেষ করে ফেলেছেন। পরবর্তী পেজটি CSS রুলের আরো অ্যাডভান্সড সিলেক্টর বর্ণনা করে এবং আরো কিছু নির্দিষ্ট উপায় যা দিয়ে আপনি <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables">টেবিল</a> স্টাইল করতে পারেন।</p> 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 ---- -<p>{{ CSSTutorialTOC() }}</p> -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}<span class="seoSummary">This is the 6th section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> 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.</span></p> -<h2 class="clearLeft" id="তথ্য_পাঠযোগ্য_CSS"><span class="short_text" id="result_box" lang="bn"><span class="hps">তথ্য</span></span>: <span class="short_text" id="result_box" lang="bn"><span class="hps">পাঠযোগ্য</span> </span>CSS</h2> -<p><span id="result_box" lang="bn"><span class="hps">আপনি এগুলো</span> <span class="hps">আরো পাঠযোগ্য</span> <span class="hps">করার জন্য আপনার</span> <span class="hps">স্টাইলশীট</span> এ <span class="hps">সাদা</span> <span class="hps">স্থান এবং</span> <span class="hps">মন্তব্য যুক্ত করতে পারেন</span></span>। <span id="result_box" lang="bn"><span class="hps">You can also group selectors together? যখন একই</span> <span class="hps">স্টাইল নিয়ম</span> <span class="hps">বিভিন্ন ভাবে</span> <span class="hps">নির্বাচিত</span> <span class="hps">উপাদানের উপর প্রয়োগ করা যায় </span>।</span></p> -<h3 id="সাদা_স্থান">সাদা স্থান</h3> -<p><span id="result_box" lang="bn"><span class="hps">হোয়াইট স্পেস</span> <span class="hps"><span id="result_box" lang="bn"><span class="hps">মানে </span></span>প্রকৃত</span> <span class="hps">স্পেস,</span> <span class="hps">ট্যাব ও</span> <span class="hps">নতুন লাইন</span> <span class="hps">.</span> <span class="hps">আপনি আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">আরো পাঠযোগ্য করতে</span> <span class="hps">সাদা স্থান</span> <span class="hps">যোগ করতে পারেন।</span></span></p> -<p>পৃষ্ঠা বিন্যাস এবং গঠন context এর মধ্যে <span id="result_box" lang="bn"><span class="hps">সাদা স্থান হচ্ছে পৃষ্ঠার </span></span><span id="result_box" lang="bn"><span class="hps">অচিহ্নিত </span></span><span id="result_box" lang="bn"><span class="hps">অংশ </span></span><span id="result_box" lang="bn"><span>: <span id="result_box" lang="bn"><span class="hps">কলাম</span> <span class="hps">এবং টাইপ</span> <span class="hps">লাইনের মধ্যে </span></span></span></span> <span id="result_box" lang="bn"><span class="hps">মার্জিন,</span> <span class="hps">gutters</span><span>, এবং স্থান</span></span>।</p> -<p><span id="result_box" lang="bn"> <span><span id="result_box" lang="bn"><span class="hps">আপনার নমুনা</span> <span class="hps">সিএসএস ফাইল</span> <span class="hps">বর্তমানে</span> <span class="hps">এক</span> <span class="hps"><span id="result_box" lang="bn"><span><span id="result_box" lang="bn"><span class="hps">নিয়ম <span id="result_box" lang="bn"><span><span id="result_box" lang="bn"><span class="hps">প্রতি</span></span></span></span> </span></span></span></span>লাইনে </span><span>এবং <span id="result_box" lang="bn"><span><span id="result_box" lang="bn"><span class="hps">প্রায়</span> <span class="hps">সর্বনিম্ন </span></span></span></span>সাদা</span> <span class="hps">স্থান</span> <span class="hps"> আছে।</span> <span class="hps">একটি জটিল</span> <span class="hps">স্টাইলশীটে</span> <span class="hps">এই</span> <span class="hps">বিন্যাস</span><span id="result_box" lang="bn"><span><span id="result_box" lang="bn"><span class="hps"> পড়া</span> <span class="hps">কঠিন হয়ে দাড়াবে এবং</span></span></span></span> <span id="result_box" lang="bn"><span><span id="result_box" lang="bn"><span class="hps">স্টাইলশীট</span> </span></span></span> <span class="hps">বজায় রাখা</span>ও <span class="hps">কঠিন হবে</span> <span class="hps">।</span> </span></span></span></p> -<p><span id="result_box" lang="bn"><span class="hps">আপনার নির্বাচিত</span> <span class="hps">বিন্যাস</span> <span class="hps">সাধারণত একটি</span> <span class="hps">ব্যক্তিগত পছন্দ</span><span>, কিন্তু আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">যদি</span> ভাগ <span class="hps">প্রকল্পের</span> <span class="hps">অংশ হয়</span><span>, তাহলে ঐসব</span> <span class="hps">প্রকল্পের</span> <span class="hps">তাদের নিজস্ব</span> <span class="hps">নিয়মাবলী</span> <span class="hps">থাকতে পারে।</span></span><br> - </p> -<div class="tuto_example"> - <div class="tuto_type"> - <span id="result_box" lang="bn"><span class="hps">উদাহরণ</span><br> - <br> - <span class="hps"><span id="result_box" lang="bn"><span class="hps">কিছু মানুষ যেমন <span id="result_box" lang="bn"><span class="hps">কম্প্যাক্ট বিন্যাস </span></span></span></span>আমরা <span id="result_box" lang="bn"><span class="hps">ব্যবহার করছি</span></span> , <span id="result_box" lang="bn"><span class="hps">শুধুমাত্র</span> <span class="hps">একটি লাইন</span> <span class="hps">বিভাজন</span><span> <span id="result_box" lang="bn"><span class="hps">যখন</span></span></span></span> এটা</span> <span class="hps">খুব দীর্ঘ</span> <span class="hps">হয়ে</span> যায় <span>:</span></span></div> - <br> - <pre class="brush: css">.carrot {color: orange; text-decoration: underline; font-style: italic;} -</pre> - <p><span class="short_text" id="result_box" lang="bn"><span class="hps">কিছু মানুষ</span> <span class="hps">প্রতি লাইনে একটি</span> <span class="hps">মান</span> <span class="hps">পছন্দ </span><span>করে :</span></span></p> - <pre class="brush: css">.carrot -{ -color: orange; -text-decoration: underline; -font-style: italic; -} -</pre> - <p><span id="result_box" lang="bn"><span class="hps">কিছু মানুষ</span> <span class="hps">indention ব্যবহার করে যেমন- দুই</span> <span class="hps">স্পেস,</span> <span class="hps">চার</span> <span class="hps">স্পেস</span> <span class="hps"> অথবা</span> <span class="hps">একটি ট্যাব</span> হচ্ছে <span class="hps">সাধারণ</span></span>:</p> - <pre class="brush: css">.carrot { - color: orange; - text-decoration: underline; - font-style: italic; -} -</pre> - <p><span id="result_box" lang="bn"> <span class="hps">কিছু মানুষ</span> <span class="hps">সবকিছু </span>ঊর্ধ্বাভাবে লাইনে লিখতে পছন্দ করে <span class="hps">(কিন্তু</span> <span class="hps">এর মত একটি</span> <span class="hps">বিন্যাস</span> <span class="hps">বজায় রাখা কঠিন</span><span>):</span></span></p> - <pre class="brush: css">.carrot - { - color : orange; - text-decoration : underline; - font-style : italic; - } -</pre> - <p><span id="result_box" lang="bn"><span class="hps">কিছু মানুষ</span> <span class="hps">পাঠযোগ্যতা</span> <span class="hps">উন্নত করার লক্ষে্য </span> <span class="hps">মিশ্র</span> <span class="hps">হোয়াইটস্পেস</span> <span class="hps">ব্যবহার করে।</span></span></p> - <pre class="brush: css">.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 } -</pre> -</div> -<p><span id="result_box" lang="bn"><span class="hps">কিছু মানুষ</span> <span class="hps">বিন্যাসের</span> <span class="hps">জন্য ট্যাব</span> <span class="hps">ব্যবহার করেন ।</span> <span class="hps">কিছু মানুষ শুধুমাত্র</span> <span class="hps">ফাঁকা স্থান ব্যবহার</span><span> করেন।</span></span></p> -<h3 id="মন্তব্য"><span class="short_text" id="result_box" lang="bn"><span class="hps">মন্তব্য</span></span></h3> -<p><span class="short_text" id="result_box" lang="bn"><span class="hps">CSS এর মধ্যে</span> <span class="hps">মন্তব্য</span> <span class="hps">শুরু</span></span> <code>হয় /*</code> <span class="short_text" id="result_box" lang="bn"><span class="hps">এবং</span> <span class="hps">শেষ হয়</span></span> <code>*/</code> দিয়ে ।</p> -<p><span id="result_box" lang="bn"><span class="hps">আপনি <span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">স্টাইলশীট</span> এ <span class="hps">প্রকৃত</span> <span class="hps">মন্তব্য</span> <span class="hps">করতে</span> <span class="hps">মন্তব্য ব্যবহার</span> <span class="hps">করতে পারেন, <span id="result_box" lang="bn"><span class="hps">এবং </span></span></span></span><span class="short_text" id="result_box" lang="bn"><span class="hps">এছাড়াও</span> <span id="result_box" lang="bn"><span class="hps">সাময়িকভাবে</span> <span class="hps">উদ্দেশ্যে</span> <span class="hps">পরীক্ষার জন্য</span> </span><span class="hps"><span id="result_box" lang="bn"><span class="hps">একটা </span></span>অংশ</span> <span class="hps">মন্তব্য </span></span></span><span class="hps"> করতে</span> পারেন<span class="hps"> </span><span>।</span></span></p> -<p><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">স্টাইলশীট</span> <span class="hps"><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">মন্তব্য </span></span></span></span>অংশ</span> <span class="hps">আউট </span> <span class="hps">করার জন্য,</span></span></span><span> <span id="result_box" lang="bn"><span class="hps">সে অংশ</span></span> একটি</span> <span class="hps">একটি মন্তব্যে</span> <span class="hps">লিখুন <span id="result_box" lang="bn"><span>যাতে </span></span><span id="result_box" lang="bn"><span class="hps">ব্রাউজার এটি</span> <span class="hps">উপেক্ষা করে</span><span>। </span></span></span><span class="hps">আপনি <span id="result_box" lang="bn"><span class="hps">সতর্ক থাকুন </span></span><span id="result_box" lang="bn"><span class="hps">যেখানে</span></span> <span id="result_box" lang="bn"><span class="hps">মন্তব্য</span> <span class="hps"> </span></span>শুরু</span> <span class="hps">এবং </span><span class="hps">শেষ</span><span class="hps">।</span> <span id="result_box" lang="bn"><span class="hps">বাকি </span></span><span class="hps">স্টাইলশীট</span> এ <span class="hps">সঠিক স্যন</span></span><span lang="bn"><span class="hps">টেক্স</span> <span class="hps">থাকতে হবে।</span></span></p> -<div class="tuto_example"> - <div class="tuto_type"> - <span class="short_text" id="result_box" lang="bn"><span class="hps">উদাহরণ</span></span></div> - <pre class="brush: css">/* <span class="short_text" id="result_box" lang="bn"><span class="hps"><span class="short_text" id="result_box" lang="bn"><span class="hps">প্রথম</span> <span class="hps">অনুচ্ছেদে </span></span>প্রাথমিক</span> <span class="hps">অক্ষর C এর জন্য</span> <span class="hps">শৈলী </span></span> */ -.carrot { - color: orange; - text-decoration: underline; - font-style: italic; - } -</pre> -</div> -<h3 id="দলবদ্ধ_নির্বাচক"><span class="short_text" id="result_box" lang="bn"><span class="hps">দলবদ্ধ</span> <span class="hps">নির্বাচক</span></span></h3> -<p><span id="result_box" lang="bn"><span class="hps">যখন অনেক উপাদানের</span> <span class="hps">একই</span> <span class="hps">শৈলী</span> <span class="hps">থাকে, <span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">আপনি </span></span>নির্বাচক</span> <span class="hps">একটি গ্রুপ</span> <span class="hps">উল্লেখ করে </span></span></span><span class="hps">কমা দিয়ে</span> <span class="hps">তাদের পৃথক<span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps"> করতে পারেন</span></span></span>।</span></span> <span class="hps">ঘোষণা</span> <span class="hps">সমস্ত নির্বাচিত</span> <span class="hps">উপাদানের ক্ষেত্রে</span> <span class="hps">প্রযোজ্য।</span></span></p> -<p><span id="result_box" lang="bn"><span class="hps">অন্যত্র</span> <span class="hps">আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">আপনি আবার</span> <span class="hps">পৃথকভাবে</span> <span class="hps">একই</span> <span class="hps">নির্বাচক</span> <span class="hps">নির্দিষ্ট করতে পারেন</span>, <span class="hps">তাদের</span> <span class="hps">ব্যক্তিগত</span> <span class="hps">শৈলী নিয়ম</span> <span class="hps">প্রযোজ্য।</span></span></p> -<div class="tuto_example"> - <div class="tuto_type"> - <span class="short_text" id="result_box" lang="bn"><span class="hps">উদাহরণ</span></span></div> - <p><span class="short_text" id="result_box" lang="bn"><span class="hps">এই নিয়ম</span> </span> {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, এবং {{ HTMLElement("h3") }} <span class="short_text" id="result_box" lang="bn"><span class="hps">উপাদান</span> <span class="hps">একই রং</span></span> <span class="short_text" id="result_box" lang="bn"><span class="hps">তৈরি করে</span></span>।</p> - <p><span class="short_text" id="result_box" lang="bn"><span class="hps"> শুধুমাত্র</span> <span class="hps">এক জায়গায়</span> <span class="hps">রঙ উল্লেখ</span> <span class="hps">করা সুবিধাজনক</span></span>,<span class="short_text" id="result_box" lang="bn"><span class="hps"> যদি না এটি</span> <span class="hps">পরিবর্তন করা</span> <span class="hps">হয়।</span></span></p> - <pre class="brush: css">/* color for headings */ -h1, h2, h3 {color: navy;} -</pre> -</div> -<h2 id="প্রক্রিয়া_মন্তব্য_যোগ_এবং_বিন্যাস_উন্নতি">প্রক্রিয়া: মন্তব্য যোগ এবং বিন্যাস উন্নতি</h2> -<ol> - <li>আপনার CSS ফাইল সম্পাদনা করুন, এবং এটি এই নিয়ম আছে কিনা তা নিশ্চিত করুন (in any order): - <pre class="brush: css">strong {color: red;} -.carrot {color: orange;} -.spinach {color: green;} -#first {font-style: italic;} -p {color: blue;} -</pre> - </li> - <li><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">এটি আরো</span> <span class="hps">পাঠযোগ্য</span> <span class="hps">করুন <span id="result_box" lang="bn"><span class="hps">সাজানোর দ্বারা এমন <span id="result_box" lang="bn"><span class="hps">একটি উপায়ে </span></span></span></span></span></span><span id="result_box" lang="bn"><span class="hps">যে</span>ন <span id="result_box" lang="bn"><span class="hps">এটি</span></span> </span>আপনি যৌক্তিক</span> <span class="hps">খুঁজে</span> পান </span>, এবং <span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">হোয়াইটস্পেস</span> <span class="hps">এবং মন্তব্য</span> <span class="hps">যুক্ত করে </span></span>যাই হোক না কেন</span> <span class="hps">যে উপায়</span> <span class="hps">আপনি</span> <span class="hps">সেরা</span> <span class="hps">মনে </span></span>করেন।</li> - <li><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span>আপনার ব্রাউজারে</span> <span class="hps">প্রদর্শন</span> <span class="hps">ফাইল সংরক্ষণ করুন</span> <span class="hps">এবং রিফ্রেশ করুন,</span></span>নিশ্চিত করুন যে </span></span>স্টাইলশীট</span> যে<span class="hps">ভাবে কাজ করে</span> <span class="hps">আপনার</span> <span class="hps">পরিবর্তন</span> তাকে <span class="hps">প্রভাবিত না করেঃ </span></span> - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> -<div class="tuto_details"> - <div class="tuto_type"> - চ্যালেঞ্জ</div> - <p><span class="short_text" id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">অংশের</span> <span class="hps">আউট মন্তব্য</span></span>,<span id="result_box" lang="bn"> <span class="hps">অন্য কিছু</span> <span class="hps">পরিবর্তন ছাড়া</span></span>,<span id="result_box" lang="bn"><span class="hps"> আপনার নথির</span> <span class="hps">খুব প্রথম</span> <span class="hps">অক্ষর <span id="result_box" lang="bn"><span class="hps">লাল</span></span></span> <span class="hps">করা,</span></span></p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - <p>(<span class="short_text" id="result_box" lang="bn"><span class="hps">এই কাজ করতে</span> <span class="hps">একাধিক</span> <span class="hps">উপায় আছে </span></span>।)</p> - <div class="tuto_details" id="tutochallenge"> - <div class="tuto_type"> - Possible solution</div> - One way to do this is to put comment delimiters around the rule for <code>.carrot</code>: - <pre class="brush: css">/*.carrot { - color: orange; -}*/</pre> - <a class="hideAnswer" href="#challenge">Hide solution</a></div> - <a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> -<h2 id="What_next">What next?</h2> -<p>{{ 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 <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles">specify the appearance of text</a> in your document<strong>.</strong></p> 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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}} এটি<span class="seoSummary"><a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> <span class="short_text" id="result_box" lang="bn"><span class="hps">টিউটোরিয়াল</span> এর <span class="hps">তৃতীয়</span> <span class="hps">অধ্যায়</span></span>; <span id="result_box" lang="bn"><span class="hps">এটা</span> <span class="hps">আপনার ব্রাউজারে</span> CSS <span class="hps">কিভাবে কাজ করে</span> <span class="hps">ব্যাখ্যা করে</span></span>। <span id="result_box" lang="bn"><span class="hps">আপনার নমুনা</span> <span class="alt-edited hps">ডকুমেন্ট</span> <span class="hps">বিশ্লেষণ করেন,<span id="result_box" lang="bn"><span class="hps">তার</span> <span class="alt-edited hps">স্টাইল</span> এর <span class="hps">বিবরণ</span> <span class="hps">প্রকাশের মধ্য দিয়ে।</span></span></span></span></span></p> - -<h2 class="clearLeft" id="তথ্য_CSS_কিভাবে_কাজ_করে">তথ্য: CSS কিভাবে কাজ করে</h2> - -<p>যখন একটি ব্রাউজার একটি ডকুমেন্ট প্রদর্শন করে, এটি অবশ্যই ডকুমেন্ট এর উপকরনের সাথে এর স্টাইল তথ্য এর সমন্বয় ঘটায়।এটি ডকুমেন্ট টি কে দুই ধাপে প্রসেস করে থাকেঃ</p> - -<ol> - <li>ব্রাউজার টি মার্ক আপ লেঙ্গুয়েজ এবং সিএসেস একটি কাঠামোতে পরিবর্তন করে যেটির নাম <a href="/en-US/docs/DOM" title="/en-US/docs/HTML/DOM"><em>DOM</em></a> (ডকুমেন্ট অবজেক্ট মডেল). The DOM কম্পিউটার এর মেমরি তে ডকুমেন্ট কে উপস্থাপন করে.এটি ডকুমেন্ট এর উপকরনের সাথে এর স্টাইল এর সমন্বয় ঘটায়।</li> - <li>ব্রাউজার টি DOM এর কন্টেন্ট গুলো কে তুলে ধরে।</li> -</ol> - -<p>একটি মার্ক আপ ল্যাঙ্গুয়েজ <em>elements</em>ব্যাবহার করে ডকুমেন্ট এর গঠন ব্যাখ্যা দেয়ার জন্য। ট্যাগ ব্যাবহার করে আপনি একটি elementকে মার্ক করতে পারেন, এর মধ্যে আছে স্ট্রিং যেটা শুরু হয় '<' দিয়ে এবং শেষ হয় '<' দিয়ে। বেশির ভাগ এলিমেন্ট এর জোড়া ট্যাগ আছে।একটি স্টার্ট ট্যাগ আর এন্ড ট্যাগ। স্টার্ট এর ক্ষেত্রে, elementএর নাম, '<code>< ></code>' এর ভিতরে ।এন্ড ট্যাগ <code>এর ক্ষেত্রে element</code> এর নাম এর আগে ,'<' এর পরে '/' বসাতে হবে।</p> - -<p>মার্ক আপ ল্যাঙ্গুয়েজ এর উপর ভিত্তি করে, কিছু element এর শুধু মাত্র স্টার্ট ট্যাগ অথবা শুধুমাত্র সিঙ্গেল ট্যাগ থাকবে যেখানে '/' নাম এর পরে আসে।</p> - -<p>একটি element একটি পাত্র হতে পারে , স্টার্ট ট্যাগ এবং এন্ড ট্যাগ এর মাঝে অন্যান্য উপকরন নিএ।</p> - -<p>একটি DOM এর গাছ এর মত কাঠামো থাকে. মার্ক আপ ল্যাঙ্গুয়েজ এ প্রতিটি element and টেক্সট এর রান একটি <em>node</em> হিসেবে কাজ করে এই গাছ কাঠামোতে. DOM nodes গুলো পাত্র নয়। বরং, এগুলোকে শিশু node এর অভিভাবক ধরা যায়।</p> - -<div class="tuto_example"> -<div class="tuto_type">উদাহরনঃ</div> -আপনার সেম্পল উদাহরনে, <code><p></code> ট্যাগ এবং এর অ্যান্ড ট্যাগ <code></p></code> একটি পাত্র তৈরি করে - -<pre class="brush:html"><p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets -</p> -</pre> - -<h2 id="বাস্তব_উদাহরণঃ">বাস্তব উদাহরণঃ</h2> - -<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p> - -<p>DOM এ corresponding P node টি কে অভিভাবক ধরা হয় .এর শিশু node গুলো হল<small> </small>স্ট্রং nodes and টেক্সট nodes. স্ট্রং nodes গুলো নিজেরাই হল অভিভাবক, text nodes গুলোকে নিয়ে নিজেদের শিশু node হিসেবে ।</p> - -<pre><span style="color: black;">P</span> -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">C</span>" -├─"<span style="color: black;">ascading</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -├─"<span style="color: black;">tyle</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -└─"<span style="color: black;">heets</span>"</pre> -</div> - -<p> DOM বোঝা আপনাকে সাহায্য করবে ডিজাইন করতে, debug করতে and আপনার CSS রক্ষণাবেক্ষণ করতে কারন DOM হল যেখানে আপনার CSS ডকুমেন্ট এর content মিলিত হয়.</p> - -<h2 id="কার্যকরণ_একটি_DOM_বিশ্লেষণ">কার্যকরণ: একটি DOM বিশ্লেষণ</h2> - -<h3 id="DOM_Inspector_ব্যাবহার">DOM Inspector ব্যাবহার</h3> - -<p>একটি DOM বিশ্লেষণ করতে হলে, আপনার প্রয়জনহবে স্পেশাল সফটওয়্যার এর.এখানে আপনি ব্যাবহার করবেন মোজিলার <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) add-on , একটি DOM বিশ্লেষণ এর জন্য। এই কাজ টি করার জন্য আপনাকে add-on টি ইন্সটল করতে হবে।</p> - -<ol> - <li>মোজিলা ব্রাউজার টি ব্যাবহার করুন আপনার স্যাম্পল HTML ডকুমেন্ট টি ওপেন করবার জন্য.</li> - <li>আপনার ব্রাউজার এর মেনু বার থেকে , <strong>বাছাই করুন Tools > DOM Inspector</strong>, অথবা এভাবে <strong>Tools > Web Development > DOM Inspector</strong>. - <div class="tuto_details"> - <div class="tuto_type">আরও</div> - - <p>যদি আপনার মোজিলা ব্রাউজার এ DOMi না থাকে, তাহলে এটি ব্যাবহার করতে পারেন <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">install it from the Add-ons site</a> এবং ব্রাউজার রি-স্টার্ট করতে হবে। তারপর ফিরে যাবেন টিউটোরিয়াল এ।</p> - - <p>যদি আপনি DOMi ইন্সটল করতে না চান ( অথবা আপনি নন- মোজিলা ব্রাউজার ব্যাবহার করেন), আপনি ব্যাবহার করতে পারেন Web X-Ray Goggles, যেভাবে বিবরন দেয়া আছে পরবর্তী সেকশন এ। অথবা আপনি সেকশন টি বাদ রেখে পরবর্তী পেজ এ চলে যেতে পারেন. সেকশন টি বাদ দিয়ে গেলে টিউটোরিয়াল এর বাকি অংশে কোন প্রভাব ফেলবে না।</p> - </div> - </li> - <li>DOMi এ, আপনার ডকুমেন্ট এর nodes গুলোকে বিস্তৃত করুন arrows এ ক্লিক করার মাধ্যমে। - <p><strong>দ্রষ্টব্য: </strong> আপনার HTML ফাইল এ স্পেসিং করলে হয়ত DOMi কিছু শুন্য text nodes দেখাতে পারে,যেগুলো আপনি উপেক্ষা করতে পারেন।</p> - - <p>রেসাল্ট এর অংশ হয়ত এরূপ দেখাবে যা নিরভর করছে আপনি কোন nodes গুলোকে বিস্তৃত করেছেন:</p> - - <pre>│ ▼╴<span style="color: black;">P</span> -│ │ │ ▼╴<span style="color: black;">STRONG</span> -│ │ └<span style="color: darkblue;">#text</span> -│ ├╴<span style="color: darkblue;">#text</span> -│ ►╴<span style="color: black;">STRONG</span> -│ │</pre> - - <p>যখন আপনি একটি node সিলেক্ট করবেন, আপনিDOMi's এর ডান-হাত প্যান টি ব্যাবহার করতে পারেন আরও কিছু খুজে বের করার জন্য. উদাহরন সরূপ , আপনি যখন একটি text node সিলেক্ট করবেন, DOMi আপনাকে ডান-হাত প্যান এ টেক্সট টি দেখাবে.</p> - - <p>যখন আপনি একটি element node সিলেক্ট করবেন, DOMi সেটি বিশ্লেষণ করবে এবং ডান হাত প্যান এ অনেক তথ্য সরবরাহ করবে।স্টাইল তথ্য হল বিতরন করা তথ্য এর ই একটি অংশ।</p> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">চেলেঞ্জঃ<br> -DOMi তে, স্ট্রং node এ ক্লিক করুন।</div> - -<p>DOMi এর ডান হাত প্যান টি ব্যাবহার করুন খুজে বের করার জন্য কোথায় node এর রঙ লাল রাখা হয়েছে এবং কোথায় এটিকে সাধারন টেক্সট এর তুলনায় গাঢ় দেখান হয়েছে।</p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> - -<h3 id="Web_X-Ray_Goggles_এর_বেবহারঃ"> Web X-Ray Goggles এর বেবহারঃ</h3> - -<p><a class="link-https" href="http://hackasaurus.org/en-US/goggles/install/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a>, DOM Inspector এর তুলনায় কম তথ্য সরবরাহ করে কিন্তু এটি ব্যাবহার করা ও ইন্সটল করা সহজ।</p> - -<ol> - <li><a class="link-https" href="http://hackasaurus.org/en-US/goggles/install/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a> এর জন্য হোম পেজ এ যান।</li> - <li>পেজের bookmarklet এর লিংক টি কে টেনে ব্রাউজার টুলবার এ আনুন।</li> - <li>আপনার স্যাম্পল HTML ডকুমেন্ট টি খুলুন।</li> - <li>Web X-Ray Goggles কে এক্টিভেট করুন টুলবার এর bookmarklet এ ক্লিক করার মাধ্যমে।</li> - <li>আপনার কার্সর এর পয়েন্টআর টিকে, ডকুমেন্ট এর এলেমেন্ট দেখার জন্য ডকুমেন্ট এর উপর ঘোরান।</li> -</ol> - -<h2 id="পরবর্তীতে_কি_আছে">পরবর্তীতে কি আছে?</h2> - -<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & Inheritance") }}যদি আপনি চ্যালেঞ্জ টি গ্রহন করে থাকেন,আপনি দেখতে পেয়েছেন যে একাধিক জায়গা থেকে স্টাইল তথ্য যোগাযোগ স্থাপন করে একটি এলেমেন্ট এর জন্য একটি ফাইনাল স্টাইল তৈরি করতে।<a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">next page</a> এই সব যোগাযোগ স্থাপনের বেপারে আরও বিবরন দিবে।</p> 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 ---- -<p>সম্পূর্ণ নতুনদের জন্য লেখা এই CSS টিউটোরিয়াল আপনাকে <a href="/bn-BD/docs/CSS" title="/bn-BD/docs/CSS">Cascading Style Sheets</a> (<em>ক্যাসকেডিং স্টাইল শিট</em> বা CSS) এর সঙ্গে পরিচয় করিয়ে দেবে। এই গাইডটি ভাষাটির খুবই সাধারণ ফিচারগুলো সাথে উদাহরণসহ আপনাকে পরিচয় করিয়ে দেবে, যা আপনি নিজের ব্রাউজারে ঘরে বসেই চালিয়ে দেখতে পারবেন। এর ফলে আধুনিক ব্রাউজারগুলোতে CSS এর সাধারণ বিষয়গুলো আপনি সহজেই বুঝতে পারবেন।</p> -<p>CSS এ নতুন, এমন পাঠকদের জন্যই এই টিউটোরিয়াল লেখা হয়েছে, যদি আপনার CSS এর কিছু অতি সাধারণ বিষয় জানাশোনা তারপরেও আপনি এটি ব্যবহার করতে পারবেন। আপনি যদি CSS এ অভিজ্ঞ হয়ে থাকেন, তবে এই টিউটোরিয়ালটি আপনার বিশেষ একটা উপকার করতে পারবে না, CSS এর মূল পৃষ্ঠায় আরও এ্যাডভান্সড বিষয়ের <a href="/bn-BD/docs/CSS" title="/bn-BD/docs/CSS">তালিকা</a> রয়েছে।</p> -<nav class="fancyTOC"> - <a class="button" href="/bn-BD/docs/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">CSS কি</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">কেন CSS</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">CSS যেভাবে কাজ করে</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Cascading_and_inheritance" style="font-size: 19px;" title="Chapter 'Cascading and inheritance' of the CSS tutorial">ক্যাসকেডিং এবং ইনহেরিটেন্স</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">সিলেক্টর</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">সহজে পড়ার উপযোগী CSS</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">লেখার স্টাইল</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">রং</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Contbn-BDt" title="Chapter 'Contbn-BDt' of the CSS tutorial">কন্টেন্ট </a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">লিস্ট (তালিকা)</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">বক্স (বাক্স)</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">লেআউট</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">টেবিল</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">মিডিয়া</a></nav> -<h3 id="শুরু_করার_পূর্বে_আপনার_কি_করা_প্রয়োজন">শুরু করার পূর্বে আপনার কি করা প্রয়োজন?</h3> -<p>এই টিউটোরিয়ালটি ভালোভাবে অনুসরণ করতে চাইলে আপনার প্রয়োজন একটি টেক্সট এডিটর এবং একটি আধুনিক ব্রাউজার। কি করে এগুলো ব্যবহার করতে হয় - এ সংক্রান্ত বেসিক জানাশোনা থাকা ভালো।</p> -<p>আপনি যদি ফাইল নিয়ে ঘাঁটাঘাঁটি না করতে চান, তবে আপনি পুরো টিউটোরিয়ালটি শুধু পড়ে যেতে পারেন, এবং ছবিগুলোর দিকে চোখ বুলিয়ে যেতে পারেন, কিন্তু এ পদ্ধতিটি খুব একটা কার্যকর বা ভালো পদ্ধতি নয় বলে আমরা মনে করি।</p> -<p><strong>উল্লেখ্য: </strong>CSS এর সাহায্যে রং নিয়ে কাজ করা যায়, তাই এই টিউটোরিয়ালের কিছু অংশ রংয়ের ওপর নির্ভরশীল। আপনি এই অংশগুলো সহজেই কাজে লাগাতে পারবেন যদি আপনার একটি রঙিন মনিটর বা ডিসপ্লের পাশাপাশি স্বাভাবিক রং দেখায় কোন শারীরিক সমস্যা না থাকে।</p> -<h3 id="যেভাবে_টিউটোরিয়ালটি_ব্যবহার_করবেন">যেভাবে টিউটোরিয়ালটি ব্যবহার করবেন</h3> -<p>এই টিউটোরিয়ালটি ব্যবহারের জন্য প্রতিটা পৃষ্ঠা ভালোভাবে এবং ধারাবাহিকভাবে পড়ুন। যদি আপনি একটি পৃষ্ঠা বাদ দিয়ে ফেলেন, তাহলে পরবর্তী পৃষ্ঠাগুলো বোঝা আপনার জন্য অনেকটা কঠিন হতে পারে।</p> -<p>সিএসএস কিভাবে কাজ করে বোঝার জন্য প্রতিটি পৃষ্ঠার "<em>তথ্যাবলী</em>" অংশটি ভালো করে পড়ুন। "<em>হাতে-কলমে</em>" অংশগুলো পড়ে আপনার নিজের কম্পিউটারে CSS ব্যবহারের চেষ্টা করে দেখুন।</p> -<p>আপনি কতটুকু বুঝতে পেরেছেন, তা যাচাই করতে প্রতিটি পৃষ্ঠার শেষে থাকা "চ্যালেঞ্জ" গ্রহণ করুন। চ্যালেঞ্জের সমাধান কিন্তু চ্যানলেঞ্জের নিচেই লিংকের মাধ্যমে দেওয়া আছে, তাই ওগুলো খুব বেশি প্রয়োজন হলে না দেখাই ভালো! নিজে নিজে অবশ্যই চেষ্টা করতে হবে এবং যদি ব্যর্থ হন বারবার, তবে সামান্য একটু উঁকি মেরে দেখা দোষের কিছু না!</p> -<p>CSS আরও গভীরভাবে বুঝতে চাইলে "অতিরিক্ত তথ্য" লেখা বাক্সগুলোর তথ্য পড়ুন। লিংকগুলোর সাহায্যে CSS সংক্রান্ত আরও অনেক রেফারেন্স তথ্য খুঁজে বের করতে পারবেন।</p> -<h2 id="টিউটোরিয়াল_২য়_পর্ব">টিউটোরিয়াল ২য় পর্ব</h2> -<p>এই টিউটোরিয়ালের দ্বিতীয় পর্বে অন্যান্য ওয়েব ও মোজিলা প্রযুক্তির সাথে CSS ব্যবহারের কথা আলোচনা করা হয়েছে।</p> -<ol> - <li><strong><a href="/bn-BD/CSS/Getting_Started/JavaScript" title="bn-BD/CSS/Getting_Started/JavaScript">JavaScript (জাভাস্ক্রিপ্ট)</a></strong></li> - <li><strong><a href="/bn-BD/CSS/Getting_Started/SVG_graphics" title="bn-BD/CSS/Getting_Started/SVG_graphics">SVG গ্রাফিক্স</a></strong></li> - <li><strong><a href="/bn-BD/CSS/Getting_Started/XML_data" title="bn-BD/CSS/Getting_Started/XML_data">XML ডাটা</a></strong></li> - <li><strong><a href="/bn-BD/CSS/Getting_Started/XBL_bindings" title="bn-BD/CSS/Getting_Started/XBL_bindings">XBL বাইন্ডিং</a></strong></li> - <li><strong><a href="/bn-BD/CSS/Getting_Started/XUL_user_interfaces" title="bn-BD/CSS/Getting_Started/XUL_user_interfaces">XUL ইউজার ইন্টারফেস</a></strong></li> -</ol> 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 ---- -<p>{{ CSSTutorialTOC() }}</p> -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color") }}<span class="seoSummary">এটি <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> টিউটোরিয়ালের ৯ম বিভাগ; এখানে বর্ণনা করা হয়েছে কিভাবে আপনি CSS ব্যাবহার করে একটি ডকুমেন্টে বিষয়বস্তু যোগ করবেন। <span id="result_box" lang="bn"><span class="hps">আপনি টেক্সট</span> <span class="hps">কন্টেন্ট এবং</span> <span class="hps">ইমেজ যোগ</span> <span class="hps">করার জন্য আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">পরিবর্তন করুন।</span></span></span></p> -<h2 class="clearLeft" id="তথ্য_বিষয়বস্তু">তথ্য: বিষয়বস্তু</h2> -<p>CSS এর <span id="result_box" lang="bn"><span class="hps">গুরুত্বপূর্ণ বৈশিষ্ট হল এটি একটি ডকুমেন্টের বিষয়বস্তু থেকে ডকুমেন্টের স্টাইলকে আলাদা করতে সাহায্য করে</span></span>। এখনো সেখানে এমন কিছু অবস্থা আছে যেখানে এটা বুঝায় যে স্টাইলশিট এর অংশ হিসেবে কিছু নির্দিষ্ট বিষয়বস্তু ঠিক করতে হয়, ডকুমেন্ট এর অংশ হিসেবে নয়।</p> -<p><span id="result_box" lang="bn"><span class="hps">একটি স্টাইলশীটে</span> <span class="hps">নির্দিষ্ট</span> <span class="hps">বিষয়বস্তু</span> <span class="hps">টেক্সট বা</span> <span class="hps">ইমেজ</span> <span class="hps">গঠিত হতে পারে।</span></span><span id="result_box" lang="bn"><span class="hps">যখন</span> <span class="hps">আপনি আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">বিষয়বস্তু</span> <span class="hps">উল্লেখ করেন তখন <span id="result_box" lang="bn"><span class="hps">বিষয়বস্তুকে</span> <span class="hps">ঘনিষ্ঠভাবে</span> <span class="hps">ডুকুমেন্টের</span> <span class="hps">কাঠামো সাথে</span> <span class="hps">সংযুক্ত করা হয়</span></span>।</span></span></p> -<div class="tuto_details"> - <div class="tuto_type"> - <span class="short_text" id="result_box" lang="bn"><span class="hps">আরো বিস্তারিত</span></span></div> - <p><span id="result_box" lang="bn"><span class="hps">একটি স্টাইলশীট</span> <span class="hps">কন্টেন্ট</span> <span class="hps">উল্লেখ</span> করতে <span class="hps">জটিলতার</span> <span class="hps">সৃষ্টি হতে পারে।</span></span> <span id="result_box" lang="bn"><span class="hps">উদাহরণস্বরূপ, আপনি হয়ত</span><span class="hps"> স্টাইলশীটে আপনার ডকুমেন্টে থাকা বিভিন্ন ভাষা শেয়ার করেছেন। যদি স্টাইলশিট এর অংশ অনুবাদ করতে হয়, এর মানে হল যে আপনাকে অবশ্যই স্টাইলশিট এর সে অংশগুলো আলাদা আলাদা ফাইল এ রাখতে হবে এবং আপনার ডকুমেন্ট এর সঠিক ভাষা সংস্করণের সাথে তাদের সংযুক্ত করার ব্যবস্থা করতে হবে।</span></span></p> - <p>এই জটিলতাগুলো হয় না যদি আপনি চিহ্ন অথবা ছবি বা ইমেজ সমৃদ্ধ বিষয়বস্তু নির্দিষ্ট করেন যেটি সকল ভাষা এবং সংস্কৃতিতে প্রয়োগ করা যায়।</p> - <p><span id="result_box" lang="bn"><span class="hps">একটি স্টাইলশীট</span> <span class="hps">নির্দিষ্ট</span> <span class="hps">বিষয়বস্তু</span> <span class="hps">DOM এর</span> <span class="hps">অংশ</span> </span>নয়।</p> -</div> -<h3 id="টেক্সট_কন্টেন্ট"><span class="short_text" id="result_box" lang="bn"><span class="hps">টেক্সট কন্টেন্ট</span></span></h3> -<div class="almost_half_cell" id="gt-res-content"> - <div dir="ltr" style="zoom: 1;"> - <span id="result_box" lang="bn"><span class="hps">একটি উপাদান</span> আগে বা <span class="hps">পরে আপনি CSS</span> <span class="hps">টেক্সট কন্টেন্ট</span> <span class="hps">সন্নিবেশ করতে পারেন</span></span>। কিভাবে আপনি কন্টেন্টি {{ cssxref("::before") }} অথবা {{ cssxref("::after") }} যোগ করবেন তার একটি<span class="short_text" id="result_box" lang="bn"><span class="hps"> নির্দিষ্ট</span></span> নিয়ম selector এ দেয়া আছে। <span id="result_box" lang="bn"><span class="hps">টেক্সট কন্টেন্ট <span class="short_text" id="result_box" lang="bn"><span class="hps">নির্দিষ্ট মান</span></span></span> </span> {{ cssxref("content") }} প্রোপার্টির সাথে উল্লেখ করুন।</div> -</div> -<div class="tuto_example"> - <div class="tuto_type"> - উদাহরণ</div> - <p>এই নিয়মে টেক্সট এ যোগ করুণ <span style="font-weight: bold; color: navy;">Reference :</span> before every element with the class <code>ref</code>:</p> - <pre class="brush:css">.ref:before { - font-weight: bold; - color: navy; - content: "Reference: "; -} -</pre> -</div> -<div class="tuto_details"> - <div class="tuto_type"> - আরো বিস্তারিত</div> - <p>একটি স্টাইলশিট এর অক্ষরের সেট ডিফল্ট রুপে UTF-8 থাকে, কিন্তু এটা সংযুক্ত করে নির্দিষ্ট করা যায় অথবা স্টাইলশিট এটা নিজে অথবা আরও বিভিন্ন উপায়ে। আরও বিস্তারিত জানার জন্য দেখুন <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a> CSS নির্দিষ্টকরণ।</p> - <p>আলাদা অক্ষরগুলোও escape প্রক্রিয়ায় নির্দিষ্ট করা যায় যেটি backslash ব্যবহার করে escape অক্ষর বা চিহ্ন হিসেবে। উদাহরণস্বরূপ, \265B হচ্ছে দাবার black queen ♛ এর প্রতীক। আরও বিস্তারিত জানার জন্য দেখুন, <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">Referring to characters not represented in a character encoding</a> এবং <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Characters and case</a> CSS নির্দিষ্টকরণে ।</p> -</div> -<h3 id="ইমেজ_বা_ছবি_বিষয়বস্তু">ইমেজ বা ছবি বিষয়বস্তু</h3> -<p>একটি উপাদানের আগে বা পরে ছবি সংযুক্ত করার জন্য, আপনি ছবিটির URL এই{{ cssxref("content") }} প্রপার্টি এর মানের মাঝে বসাবেন।</p> -<div class="tuto_example"> - <p><strong>উদাহরণ</strong><br> - এই নিয়মটি <span style="line-height: 1.5;">প্রতিটি link এর পরে</span><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">একটি space দেয় এবং একটি icon যোগ করে যেটিতে class </span><code style="font-style: normal; line-height: 1.5;">glossary আছে</code><span style="line-height: 1.5;">:</span></p> - <pre class="brush:css">a.glossary:after {content: " " url("../images/glossary-icon.gif");} -</pre> -</div> -<p>কোন উপাদানের background এ ছবি বা ইমেজ সংযুক্ত করার জন্য, কোন একটি ছবি বা ইমেজ এর URL {{ cssxref("background") }} প্রপার্টি এর মানের মাঝে নির্দিষ্ট করুন।এটি একটি shorthand প্রপার্টি যেটি background color, ছবি, কিভাবে ছবি এবং অন্যান্য বিস্তারিত নির্দিষ্টকরণে সহায়তা করে।</p> -<div class="tuto_example"> - <div class="tuto_type"> - উদাহরণ</div> - <p>এই নিয়মটি একটি নির্দিষ্ট উপাদানের background সেট করে, URL ব্যবহার করে image file উল্লেখ করে।</p> - <p>selector কোন উপাদানের id উল্লেখ করে। <code>no-repeat মানটি </code>image কে একবার দেখাতে সাহায্য করে :</p> - <pre class="brush:css">#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;} -</pre> -</div> -<div class="tuto_details"> - <div class="tuto_type"> - আরও বিস্তারিত</div> - <p>আলাদা আলাদা প্রপার্টিজ affecting backgrounds এবং অন্যান্য options যখন আপনি background ইমেজ গুলো ঠিক করেন সেইসব তথ্য এর জন্য, দেখুন{ cssxref("background") }} রেফেরেন্স পৃষ্ঠা।</p> -</div> -<h2 id="Action_Adding_a_background_ইমেজ">Action: Adding a background ইমেজ</h2> -<p>এ ইমেজ টি একটি সাদা বর্গ যেখানে এর নিচে একটি নীল লাইনে আছে :</p> -<table style="border: 2px solid #ccc;"> - <tbody> - <tr> - <td><img alt="Image:Blue-rule.png" class="internal" src="https://mdn.mozillademos.org/files/160/Blue-rule.png"></td> - </tr> - </tbody> -</table> -<ol> - <li>ইমেজ ফাইল টি Download করুন CSS file এর মত একই পদ্ধতিতে। (উদাহরণস্বরূপ, ডান পাশের বাটন এ ক্লিক করুন context মেনুটির জন্য, তারপর Save Image As টি তে ক্লিক করুন এবং এই টিউটোরিয়াল এর জন্য যে পদ্ধতি টি ব্যবাহার করছেন সেটি উল্লেখ করুন।)</li> - <li>আপনার CSS ফাইলটি সম্পাদন করুন এবং এই নিয়মটি body তে যোগ করুন , সম্পূর্ণ পৃষ্ঠার জন্য ব্যাকগ্রাউন্ড image যোগ করুন ।<br> - <pre class="brush:css">background: url("Blue-rule.png"); -</pre> - <p><code>repeat মান টি ডিফল্ট</code>, তাই একে কিছু করতে হবে না। ইমেজ বা ছবিটি বা অনূভুমিকপভাবে বা উলম্বভাবে পুনরাবৃত্তি হয় , যেটা রেখাযুক্ত লেখা কাগজের মত দেখায় :</p> - <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> - <p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p> - <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> - <div style="font-style: italic; width: 24em;"> - <p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</p> - </div> - <div style="font-style: normal; padding-top: 2px; height: 8em;"> - <p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</p> - </div> - </div> - </div> - </li> -</ol> -<div class="tuto_example"> - <div class="tuto_type"> - চ্যালেঞ্জ</div> - <p>এই ইমেজ টি ডাউনলোড করুন:</p> - <table style="border: 2px solid #ccc;"> - <tbody> - <tr> - <td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td> - </tr> - </tbody> - </table> - <p>আপনার স্টাইলশিট এ একটি নিয়ম যোগ করুন যাতে করে এটি প্রতিটি লাইনের প্রথমে ইমেজ বা ছবি প্রদর্শন করে :</p> - <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> - <p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p> - <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> - <div style="font-style: italic; width: 24em; padding-top: 8px;"> - <img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</div> - <div style="font-style: normal; padding-top: 12px; height: 8em;"> - <img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</div> - </div> - </div> - <div class="tuto_details" id="tutochallenge"> - <div class="tuto_type"> - Possible solution</div> - <p>Add this rule to your stylesheet:</p> - <pre class="brush: css">p:before{ - content: url("yellow-pin.png"); -} -</pre> - <p> </p> - <a class="hideAnswer" href="#challenge">Hide solution</a></div> - <a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> -<h2 id="পরবর্তীতে_কি_আছে">পরবর্তীতে কি আছে?</h2> -<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}একটি সাধারণ প্রক্রিয়া stylesheets কিভাবে লিস্টে বিভিন্ন আইটেম মার্ক করার জন্য বিষয়বস্তু যোগ করে। পরবর্তী বিভাগ বর্ণনা করবে কিভাবে <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists">specify style for list elements।</a></p> 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 ---- -<div>Translation in progress</div> - -<div>{{LearnSidebar}}</div> - -<p class="summary">The following links provide solutions to common problems you can solve with CSS.</p> - -<h2 id="Common_use_cases">Common use cases</h2> - -<div class="column-container"> -<div class="column-half"> -<h3 id="Basics">Basics</h3> - -<ul> - <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">How to apply CSS to HTML</a></li> - <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#White_space">How to use whitespace in CSS</a></li> - <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#Comments">How to write comments in CSS</a></li> - <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Simple_selectors">How to select elements via element name, class or ID</a></li> - <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">How to select elements via attribute name and content</a></li> - <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">How to use pseudo-classes</a></li> - <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-elements">How to use pseudo-elements</a></li> - <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Multiple_selectors_on_one_rule">How to apply multiple selectors to the same rule</a></li> - <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">How to specify colors in CSS</a></li> - <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">How to debug CSS in the browser</a></li> -</ul> - -<h3 id="CSS_and_text">CSS and text</h3> - -<ul> - <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">How to style text</a></li> - <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">How to customize a list of elements</a></li> - <li><a href="/en-US/Learn/CSS/Styling_text/Styling_links">How to style links</a></li> - <li><a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows">How to add shadows to text</a></li> -</ul> -</div> - -<div class="column-half"> -<h3 id="Boxes_and_layouts">Boxes and layouts</h3> - -<ul> - <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">How to size CSS boxes</a></li> - <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Overflow">How to control overflowing content</a></li> - <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to control the part of a CSS box that the background is drawn under</a></li> - <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">How do I define inline, block, and inline-block?</a></li> - <li><a href="/en-US/docs/Learn/CSS/Howto/create_fancy_boxes">How to create fancy boxes</a> (also see the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module, generally).</li> - <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to use <code>background-clip</code> to control how much of the box your background image covers</a>.</li> - <li><a href="/en-US/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">How to change the box model completely using <code>box-sizing</code></a></li> - <li><a href="/en-US/Learn/CSS/Styling_boxes/Backgrounds">How to control backgrounds</a></li> - <li><a href="/en-US/Learn/CSS/Styling_boxes/Borders">How to control borders</a></li> - <li><a href="/en-US/Learn/CSS/Styling_boxes/Styling_tables">How to style an HTML table</a></li> - <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">How to add shadows to boxes</a></li> -</ul> -</div> -</div> - -<h2 id="Uncommon_and_advanced_techniques">Uncommon and advanced techniques</h2> - -<p>CSS allows very advanced design techniques. These articles help demistify the harder use cases you may face.</p> - -<h3 id="General">General</h3> - -<ul> - <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">How to calculate specificity of a CSS selector</a></li> - <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance">How to control inheritance in CSS</a></li> -</ul> - -<h3 id="Advanced_effects">Advanced effects</h3> - -<ul> - <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">How to use filters in CSS</a></li> - <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">How to use blend modes in CSS</a></li> -</ul> - -<h3 id="Layout">Layout</h3> - -<ul> - <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Content">Using CSS generated content</a></li> -</ul> - -<h2 id="See_also">See also</h2> - -<p><a href="/en-US/docs/Learn/CSS/Howto/CSS_FAQ">CSS FAQ</a> — A variety of topics: from debugging to selector usage.</p> 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 ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">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.</p> - -<h2 id="Learning_pathway">Learning pathway</h2> - -<p>You should learn the basics of HTML before attempting any CSS. We recommend that you work through our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module first. In that module, you will learn about:</p> - -<ul> - <li>CSS, starting with the <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> module</li> - <li>More advanced <a href="/en-US/docs/Learn/HTML#Modules">HTML modules</a></li> - <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages</li> -</ul> - -<p>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.</p> - -<p>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 <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a> and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both of which are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> - -<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> 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 <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> module, albeit in a lot more detail.</p> - -<h2 id="Modules">Modules</h2> - -<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt> - <dd>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.</dd> - <dt>Responsive design (TBD)</dt> - <dd>With so many different types of devices able to browse the web these days, <a href="/en-US/docs/Web/Guide/Responsive_design">responsive web design</a> (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.</dd> -</dl> - -<h2 id="Solving_common_CSS_problems">Solving common CSS problems</h2> - -<p><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a> provides links to sections of content explaining how to use CSS to solve very common problems when creating a web page.</p> - -<p>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!</p> - -<h2 id="See_also">See also</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS">CSS on MDN</a></dt> - <dd>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.</dd> -</dl> 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 ---- -<p>{{ CSSTutorialTOC() }}</p> -<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}<span class="seoSummary">এটি হচ্ছে <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> এর ৭ম টীউটোরিয়াল, এখানে টক্সট স্টাইল এর অনেক উদাহরণ দেয়া আছে। একাহে বর্ণনা করা হয়েছে কিভাবে আপনি আপনার নমুনা stylesheet এ বিভিন্ন ফন্ট ব্যাবহার করবেন।</span></p> -<h2 class="clearLeft" id="তথ্য_টেক্সট_স্টাইল">তথ্য: টেক্সট স্টাইল</h2> -<p><span class="short_text" id="result_box" lang="bn"><span class="hps">সিএসএস</span> <span class="hps">স্টাইলিং</span> <span class="hps">লেখার জন্য</span> <span class="hps">বিভিন্ন</span> <span class="hps">ধরণ আছে।</span></span></p> -<p>এখানে {{ cssxref("font") }}আপনি আপনার লেখার বিভিন্ন দিক উল্লেখ করতে পারবেন,—যেমন:</p> -<ul> - <li><span class="short_text" id="result_box" lang="bn"><span class="hps">বোল্ড,</span> <span class="hps">ইটালিক,</span> <span class="hps">এবং ছোট</span> <span class="hps">হাতের অক্ষর</span></span> (<span class="short_text" id="result_box" lang="bn"><span class="hps"> ছোট</span> <span class="hps">হাতের অক্ষর</span></span>)</li> - <li>আকার</li> - <li><span class="short_text" id="result_box" lang="bn"><span class="hps">লাইন উচ্চতা</span></span></li> - <li>ফন্টের বিভিন্ন ধরণ</li> -</ul> -<div class="tuto_example"> - <pre class="brush:css">উদাহরণ -p {font: italic 75%/125% "Comic Sans MS", cursive;} -</pre> - <p>এই নিয়মে বিভিন্ন ফন্টের ধরণ দেয়া আছে, <span id="result_box" lang="bn"><span>প্রতিটি</span> <span class="hps">অনুচ্ছেদ</span> এর লেখা হবে ইতালিক ফরমে।</span></p> - <p><span id="result_box" lang="bn"><span>প্রতিটি</span> <span class="hps">অনুচ্ছেদ</span> <span class="hps">এর মূল</span> <span class="hps">উপাদান</span> <span class="hps">আকার ফন্ট সাইজ <span id="result_box" lang="bn"><span class="hps">তিন চতুর্থাংশ</span> <span class="hps">সেট করা হয়েছে, <span id="result_box" lang="bn"><span>লাইন</span> <span class="hps">উচ্চতা</span> <span class="hps">১২৫%</span> <span class="hps">সেট করা হয়েছে।</span></span> </span></span></span></span>(<span id="result_box" lang="bn"><span>স্বাভাবিক তুলনায়</span> <span class="hps">একটু বেশি</span> <span class="hps">ব্যবধানযুক্ত</span></span>)।</p> - <p>Comic Sans MS এ,কিছু ফন্ট আকার সেট করা থাকে কিন্তু যদি তা গ্রহণ যোগ্য না হয় তবে ব্রাউজার ডিফল্ট কারসিভ (hand-written) আকার ব্যাবহার করতে পারবে।</p> - <p><span id="result_box" lang="bn"><span class="hps">এই নিয়মে</span> <span class="hps">বোল্ড এবং</span> <span class="hps">ছোট</span> <span class="hps">হাতের অক্ষরের</span></span> <span id="result_box" lang="bn"><span class="hps">পার্শ্ব প্রতিক্রিয়া</span> <span class="hps">আছে:</span></span>(setting them to <code>normal</code>):</p> -</div> -<h3 id="ফন্টের_আকার">ফন্টের আকার</h3> -<p>আপনি ভবিষৎ বানী করতে পারবেনা আপনার ডকুমেন্টি কোন ধরনের পাঠক পাবে। সুতরাং আপনি একটি উল্লেখযোগ্য ফন্টের আকার দিতে পারেন, সব থেকে ভাল হয় যদি আপনি পছন্দ অনুযায়ী একটি ফন্টের তালিকা দেন।</p> -<p>একটি ডিফল্ট আকার দিয়ে লিস্টটি শেষ করুনঃ <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> or <code>monospace</code>.</p> -<p>ডকুমেন্ট এ যদি কিছু ফন্ট আকার সমর্থন না করে তবে ব্রাউজার এ আপনি ফন্ট আকার প্রতিস্থাপন করতে পারেন। ডকুমেন্ট এ সমর্থন করে না এমন বিশেষ অক্ষর থাকতে পারে। যদি ব্রাউজার ঐই অক্ষরের কোন ফন্ট আকার খুজে পায় তবে আপনি সেটি ব্যাবহার করতে পারেন।</p> -<p>তার <span id="result_box" lang="bn"><span class="hps">নিজস্ব ফন্ট আকার উল্লেখ করার</span></span> {{ cssxref("font-family") }}এটি ব্যাবহার করুণ।</p> -<h3 id="ফন্টের_মাপ">ফন্টের মাপ</h3> -<p>ব্রাউজার ব্যাবহারকারি <span id="result_box" lang="bn"><span class="hps">পৃষ্ঠাটি পড়ার সময় ডিফল্ট ফন্টরে মার অথবা লেখার আকার পরিবর্তন করতে পারেন,তাই সবথেকে ভাল যদি আপনি একটি আপেক্ষিক মাপ ব্যাবহার করতে পারেন।</span></span></p> -<p><span id="result_box" lang="bn"><span class="hps">আপনি ফন্টের ভাল মাপের</span> <span class="hps">জন্য</span> <span class="hps">কিছু বিল্ট ইন</span> <span class="hps">মান ব্যবহার করতে পারেন,যেম্ন-বড়,ছোট এবং মাঝারি</span></span>।<span class="_5yl5"><span class="null"> আপনি চাইলে ওই মান গুলো ব্যবহার করতে পারেন যেগুলো মূল উপাদানের ফন্টের আকারের সাথে সম্পর্কিত, যেমন ছোট বড় , ১৫০% অথবা ১.৫ em।<span class="_5yl5"><span class="null">একটি "em" হচ্ছে "m" অক্ষরের সমান প্রস্থের(মূল উপাদানের ফন্টের আকারের জন্য); এইভাবে ১.৫em হচ্ছে মূল উপাদানের এক এবং অর্ধ আকার।</span></span></span></span></p> -<p>প্রয়োজনে আপনি একটি নিদ্রিষ্ট আকার , যেমন: <code>14px</code> (14 pixels) <span id="result_box" lang="bn"><span class="hps">ডিসপ্লে ডিভাইস</span> এর জন্য</span> অথবা 14pt (14 points) প্রিন্টারের জন্য নির্ধারণ করতে পারেন। <span id="result_box" lang="bn"><span class="hps">এটা</span> <span class="hps">তাদের পরিবর্তন</span> <span class="hps">করার অনুমতি দেয় না</span><span>, কারণ এইটা impaired ব্যাবহারকারিদের</span></span> জন্য <span id="result_box" lang="bn"><span class="hps">অ্যাক্সেসযোগ্য হয় না</span></span>। <span id="result_box" lang="bn"> <span class="hps">আরো ভাল</span> <span class="hps">কৌশল</span> <span class="hps">ডকুমেন্টের</span> <span class="hps">উপরের</span> <span class="hps">স্তরের</span> এবং <span class="hps">মাঝারিতে</span> <span class="hps">একটি বিল্ট-ইন</span> <span class="hps">মান সেট</span> <span class="hps">করা হয়,</span></span><span id="result_box" lang="bn"><span class="hps">এবং তারপর</span> <span class="hps">তার সমস্ত</span> <span class="hps">descendent</span> <span class="hps">উপাদানের জন্য</span> <span class="hps">আপেক্ষিক</span> <span class="hps">মাপ সেট করা হয়</span><span>।</span></span></p> -<p><span id="result_box" lang="bn"><span class="hps">তার নিজস্ব একটি</span> <span class="hps">ফন্ট সাইজ</span> <span class="hps">উল্লেখ করার জন্য</span></span> {{ cssxref("font-size") }}ব্যাবহার করুন।</p> -<h3 id="লাইনের_উচ্চতা"><span class="short_text" id="result_box" lang="bn"><span class="hps">লাইনের</span> <span class="hps">উচ্চতা</span></span></h3> -<p>লাইনের উচ্চতা ২টা লাইনের মধ্যকার স্পেস উল্লেখ করে। আপনার ডকুমেন্টে দীর্ঘ লাইনের অনুচ্ছেদ থাক্লে,বিশেষ করে ফন্টের রাকার যদি ছোট হয় তবে পড়ার সুবিধারতে স্বাভাবিকের থেকে একটু বড় স্পেস দিন।</p> -<p><span id="result_box" lang="bn"><span class="hps">তার নিজস্ব একটি</span> <span class="hps">লাইন উচ্চতা</span> <span class="hps">উল্লেখ করার জন্য</span></span>{{ cssxref("line-height") }} ব্যাবহার করুণ।</p> -<h3 id="সজ্জা"><span class="short_text" id="result_box" lang="bn"><span class="hps">সজ্জা</span></span></h3> -<p>{{ cssxref("text-decoration") }}<code> ব্যাবহার করে আপনি আন্দার-লাইন অথবা অনন্য ডেকোরেশন করতে পারেন।</code> <code>আপনি স্পষ্টভাবে</code> ডেকোরেশন অপসরণ করতেও এটি ব্যাবহার করতে পারেন।</p> -<h3 id="অন্যান্য_বৈশিষ্ট্য"><span class="short_text" id="result_box" lang="bn"><span class="hps">অন্যান্য</span> <span class="hps">বৈশিষ্ট্য</span></span></h3> -<p>Italic জন্য ব্যাবহার করুন {{ cssxref("font-style") }}<code>: italic;</code><br> - Bold জন্য ব্যাবহার করুন <code>{{ cssxref("font-weight") }}: bold;</code><br> - Small capitals জন্য ব্যাবহার করুন <code>{{ cssxref("font-variant") }}: small-caps;</code></p> -<p><span id="result_box" lang="bn"><span class="hps">পৃথকভাবে এই</span> গুলো <span class="hps">বন্ধ</span> <span class="hps">করার জন্য, আপনি</span> <span class="hps">স্বাভাবিক</span> <span class="hps">মান</span> <span class="hps">সুনির্দিষ্টভাবে উল্লেখ করুন</span></span>।</p> -<div class="tuto_details"> - <div class="tuto_type"> - <span class="short_text" id="result_box" lang="bn"><span class="hps">আরো বিস্তারিত</span></span></div> - <p><span id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="hps">অন্য কোন উপায়ে</span>ও <span class="hps">বিভিন্ন</span> <span class="hps">টেক্সট স্টাইল</span> <span class="hps">নির্দিষ্ট করতে পারেন।</span></span></p> - <p><span id="result_box" lang="bn"><span class="hps">উদাহরণস্বরূপ, এখানে</span> <span class="hps">উল্লিখিত</span> <span class="hps">অন্য কিছু</span> মান আছে যা <span class="hps">আপনি ব্যবহার করতে পারেন</span>।</span></p> - <p>একটি জটিল স্টাইলশীট,shorthand <code>font</code> property এড়িয়ে চলে কারণ তার কিছু <span id="result_box" lang="bn"><span class="hps">পার্শ্ব প্রতিক্রিয়া আছে</span></span> (resetting other individual properties)।</p> - <p>আরো তথ্যের জন্য <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> in the CSS Specification দেখতে পারেন। টেক্সট ডেকোরেশন এর আরো তথ্যের জন্য দেখুন <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>।</p> - <p><span id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="hps">ব্যবহারকারীদের সিস্টেমে</span> <span class="hps">ইনস্টল</span> <span class="hps">আকারেরউপর নির্ভর</span> <span class="hps">করতে না ছাইলে</span><span>, আপনি</span> <span class="hps">ব্যবহার করতে পারেন</span></span>{{ cssxref("@font-face") }}এটি একটি অনলাইন ফন্ট উল্লেখ করে। যদিও এই নিয়ম সমর্থন করে ব্যাবহারকারিদের এমন একটি ব্রাউজার থাকা প্রয়োজন।</p> -</div> -<h2 id="কর্ম_উল্লেখ_ফন্ট"><span class="short_text" id="result_box" lang="bn"><span class="hps">কর্ম:</span> <span class="hps">উল্লেখ</span> <span class="hps">ফন্ট</span></span></h2> -<p>একটি সহজ ডকুমেন্ট এর জন্য {{ HTMLElement("body") }} তে আপনি ফন্ট এবং ডকুমেন্ট এর বাকি সেটিংস সেট করতে পারেন।</p> -<ol> - <li><span class="short_text" id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">সিএসএস ফাইল</span> <span class="hps">সম্পাদনা করুন.</span></span></li> - <li><span lang="bn"><span class="hps">ডকুমেন্ট জুড়ে</span> <span class="hps">ফন্ট পরিবর্তন করতে</span> <span class="hps">নিম্নলিখিত</span> <span class="hps">নিয়ম</span> <span class="hps">যোগ করুন.</span></span> <span id="result_box" lang="bn"><span class="hps">সিএসএস</span> <span class="hps">ফাইল উপরে</span> <span class="hps">এটি একটি</span> <span class="hps">লজিক্যাল</span> <span class="hps">জায়গা</span><span>, কিন্তু আপনি যখন এখানে রাখবেন সেখানেও তার</span> <span class="hps">একই প্রভাব</span> পরবে<span class="hps">:</span></span> - <pre class="eval">body {font: 16px "Comic Sans MS", cursive;} -</pre> - </li> - <li><span class="_5yl5"><span class="null">একটি মন্তব্য যোগ করুন যেটি নিয়ম ব্যাখ্যা করে এবং একটি স্পেস দিন যাতে করে আপনার পছন্দের বিন্যাসের সাথে এটি মিলে যায়।</span></span></li> - <li><span id="result_box" lang="bn"><span class="hps">ফাইল সংরক্ষণ করুন</span> <span class="hps">এবং ফলাফল</span> <span class="hps">দেখতে আপনার ব্রাউজার</span> <span class="hps">রিফ্রেশ করুন।</span></span> যদি আপনার Comic Sans MS এ থাকা আকার অথবা হাতে লেখা itlic আকার সমর্থন না করে ,তবে আপনার ব্রাউজার অন্নক্স কোন আকার পছন্দ করতে পারেঃ<br> - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> - <li>ব্রাউজার মেনুবার, <strong>View > Text Size > Increase</strong> (or <strong>View > Zoom > Zoom In</strong>) পছন্দ করতে পারে। <span id="result_box" lang="bn"><span class="hps">আপনি স্টাইল টি</span> <span class="hps">16</span> <span class="hps">পিক্সেল</span> <span class="hps">উল্লেখ</span> <span class="hps">যদিও</span><span>, ডকুমেন্ট</span> <span class="hps">পড়া</span> <span class="hps">একটি ব্যবহারকারী</span> <span class="hps">মাপ পরিবর্তন করতে পারেন</span></span>।</li> -</ol> -<div class="tuto_example"> - Challenge - <p>Without changing anything else, make all six initial letters twice the size in the browser's default serif font:</p> - <table> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> - </tr> - </tbody> - </table> - <div class="tuto_details" id="tutochallenge"> - <div class="tuto_type"> - Possible solution</div> - <p>Add the following style declaration to the <code>strong</code> rule:</p> - <pre class="brush: css"> font: 200% serif; -</pre> - If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden. - <p> </p> - <a class="hideAnswer" href="#challenge">Hide solution</a></div> - <a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> -<h2 id="পরবর্তী">পরবর্তী ?</h2> -<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color")}}<span id="result_box" lang="bn"><span class="hps">আপনার নমুনা</span> <span class="hps">ডকুমেন্ট</span> <span class="hps">ইতিমধ্যে</span> <span class="hps">বিভিন্ন</span> <span class="hps">নামে</span> <span class="hps">রং ব্যবহার করতে সক্ষম.</span></span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Color">The next section</a> দেয়া আছে রং এর তালিকা এবং কিভাবে আপনি রং প্রয়োগ করবেন।</p> 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 ---- -<p>এই সহায়িকা হচ্ছে একটি সামগ্রিক নির্দেশিকা যা আপনাকে মাষ্টার<span style="background-color: #40e0d0;"> HTML</span> form তৈরি করতে সাহায্য করবে । <span id="result_box" lang="bn"><span class="hps"><span style="background-color: #00ffff;">HTML</span> from</span> <span class="hps">ব্যবহারকারীদের সাথে</span> <span class="hps">আলাপচারিতার</span> <span class="hps">জন্য খুব</span> <span class="hps">শক্তিশালী হাতিয়ার</span> <span class="hps">হয়</span></span> না । <span id="result_box" lang="bn"><span class="hps">এই সহায়িকার মধ্যে,<span style="background-color: #00ffff;"> </span></span><span id="result_box" lang="bn"><span class="hps"><span style="background-color: #00ffff;">HTML</span></span> from <span class="hps">হতে </span></span><span class="hps">আমরা</span> <span class="hps">কাস্টম উইজেট</span> <span class="hps">করার</span> <span class="hps">পরিচালনার</span> <span class="hps">তথ্য</span> <span class="hps">থেকে</span> <span class="hps">কাঠামো</span> <span class="hps">থেকে</span> <span class="hps">স্টাইলিং</span> <span class="hps">করার</span></span>। তুমি এই শক্তিশালি অফার শিখতে এবং উপভোগে পারবে।</p> -<h2 id="বর্ন_মালা">বর্ন মালা</h2> -<ol> - <li><a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">আমার প্রথম HTML form</a></li> - <li><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form"><span>HTML form </span></a>কি ভাবে গঠন করতে হয় </li> - <li><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>নেটিভ form <span id="result_box" lang="bn"><span class="hps">উইজেট</span></span></span></a></li> - <li>CSS সাথে HTML forms - <ol> - <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms"><span>HTML forms</span></a> এর উন্নতি</li> - <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms"> HTML forms উন্নতির ধরন</a></li> - <li> উইজেট এর টেবিল হতে <a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Property </a>শামাযশ্যতা</li> - </ol> - </li> - <li><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>তথ্য হতে </span></a>পাঠাতে এবং চেষ্টা করতে</li> - <li> তথ্য হতে বৈধতা</li> - <li> উইজেট হতে কিভাবে coustom তৈরি করতে হয়</li> - <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript"> JavaScript কি ভাবে নিক্ষেপ করতে হয়</a> - <ol> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">ডাটা অবজে</a>কট কিভাবে ব্যাবহার করতে হয়</li> - </ol> - </li> - <li><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">HTML হতে <span id="result_box" lang="bn"><span class="hps">ব্রাউজারে </span></span></a></li> -</ol> -<h2 id="HTML_Documentation">HTML Documentation</h2> -<h3 id="HTML_Elements">HTML Elements</h3> -<table> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Related DOM interface</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td style="vertical-align: top;">{{HTMLElement("button")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td> - <td style="vertical-align: top;">The <code>button</code> element represents a clickable button.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td> - <td style="vertical-align: top;">The <span style="font-family: Courier New;">datalist</span> element contains a set of {{ HTMLElement("option") }} elements that represent the possible options for the value of other forms elements.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td> - <td style="vertical-align: top;">The <span style="font-family: Courier New;">fieldset</span> is used to group several form elements within a form.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("form")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td> - <td style="vertical-align: top;">The <code>form</code> element represents a section of document that contains interactive element that enable a user to submit information to a web server.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("input")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td> - <td style="vertical-align: top;">The <code>input</code> element is used to create interactive controls for forms.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td> - <td style="vertical-align: top;">The <code>keygen</code> element exists to facilitate generation of key material, and submission of the public key as part of an HTML form</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("label")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td> - <td style="vertical-align: top;">The <code>label</code> element represents a caption for an item in a user interface</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("legend")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td> - <td style="vertical-align: top;">The <code>legend</code> element represents a caption for the content of its parent {{ HTMLElement("fieldset") }}.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("meter")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td> - <td style="vertical-align: top;">The <code>meter</code> element represents either a scalar value within a known range or a fractional value.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td> - <td style="vertical-align: top;">the <code>optgroup</code> element creates a group of options within a {{ HTMLElement("select") }} element.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("option")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td> - <td style="vertical-align: top;">the HTML<em> </em><code>option<em> </em></code>element is used to create a control representing an item within a {{ HTMLElement("select") }}, an {{ HTMLElement("optgroup") }} or a {{ HTMLElement("datalist") }} element.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("output")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td> - <td style="vertical-align: top;">The <code>output</code> element represents the result of a calculation.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("progress")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td> - <td style="vertical-align: top;">The <code>progress</code> element is used to view the completion progress of a task.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("select")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td> - <td style="vertical-align: top;">The <code>select</code> element represents a control that presents a menu of options.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td> - <td style="vertical-align: top;">The <code>textarea</code> element represents a multi-line plain-text editing control.</td> - </tr> - </tbody> -</table> -<div class="note"> - <p><strong>Note:</strong> All form elements, as all HTML elements, support the {{domxref("HTMLElement")}} DOM interface.</p> -</div> -<h3 id="HTML_Attributes">HTML Attributes</h3> -<table class="standard-table"> - <thead> - <tr> - <th>Attribute Name</th> - <th>Elements</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>accept</td> - <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> - <td>List of types the server accepts, typically a file type.</td> - </tr> - <tr> - <td style="white-space: nowrap;">accept-charset</td> - <td>{{ HTMLElement("form") }}</td> - <td>List of supported charsets.</td> - </tr> - <tr> - <td>action</td> - <td>{{ HTMLElement("form") }}</td> - <td>The URI of a program that processes the information submitted via the form.</td> - </tr> - <tr> - <td>autocomplete</td> - <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> - <td>Indicates whether controls in this form can by default have their values automatically completed by the browser.</td> - </tr> - <tr> - <td>autofocus</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>The element should be automatically focused after the page loaded.</td> - </tr> - </tbody> - <tbody> - <tr> - <td>challenge</td> - <td>{{ HTMLElement("keygen") }}</td> - <td>A challenge string that is submitted along with the public key.</td> - </tr> - <tr> - <td>checked</td> - <td>{{ HTMLElement("input") }}</td> - <td>Indicates whether the element should be checked on page load.</td> - </tr> - <tr> - <td>cols</td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Defines the number of columns in a textarea.</td> - </tr> - <tr> - <td>data</td> - <td>{{ HTMLElement("object") }}</td> - <td>Specifies the URL of the resource.</td> - </tr> - <tr> - <td>dirname</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td> </td> - </tr> - <tr> - <td>disabled</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Indicates whether the user can interact with the element.</td> - </tr> - <tr> - <td>enctype</td> - <td>{{ HTMLElement("form") }}</td> - <td>Defines the content type of the form date when the <code>method</code> is POST.</td> - </tr> - <tr> - <td>for</td> - <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> - <td>Describes elements which belongs to this one.</td> - </tr> - <tr> - <td>form</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Indicates the form that is the owner of the element.</td> - </tr> - </tbody> - <tbody> - <tr> - <td>high</td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indicates the lower bound of the upper range.</td> - </tr> - <tr> - <td>keytype</td> - <td>{{ HTMLElement("keygen") }}</td> - <td>Specifies the type of key generated.</td> - </tr> - <tr> - <td>list</td> - <td>{{ HTMLElement("input") }}</td> - <td>Identifies a list of pre-defined options to suggest to the user.</td> - </tr> - <tr> - <td>low</td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indicates the upper bound of the lower range.</td> - </tr> - <tr> - <td>max</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> - <td>Indicates the maximum value allowed.</td> - </tr> - <tr> - <td>maxlength</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Defines the maximum number of characters allowed in the element.</td> - </tr> - <tr> - <td>method</td> - <td>{{ HTMLElement("form") }}</td> - <td>Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.</td> - </tr> - <tr> - <td>min</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> - <td>Indicates the minimum value allowed.</td> - </tr> - <tr> - <td>multiple</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> - <td>Indicates whether multiple values can be entered in an input of the type <code>email</code> or <code>file</code>.</td> - </tr> - <tr> - <td>name</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Name of the element. For example used by the server to identify the fields in form submits.</td> - </tr> - <tr> - <td>novalidate</td> - <td>{{ HTMLElement("form") }}</td> - <td>This attribute indicates that the form shouldn't be validated when submitted.</td> - </tr> - <tr> - <td>optimum</td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indicates the optimal numeric value.</td> - </tr> - <tr> - <td>pattern</td> - <td>{{ HTMLElement("input") }}</td> - <td>Defines a regular expression which the element's value will be validated against.</td> - </tr> - <tr> - <td>placeholder</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Provides a hint to the user of what can be entered in the field.</td> - </tr> - <tr> - <td>readonly</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Indicates whether the element can be edited.</td> - </tr> - <tr> - <td>required</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Indicates whether this element is required to fill out or not.</td> - </tr> - <tr> - <td>rows</td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Defines the number of rows in a textarea.</td> - </tr> - <tr> - <td>selected</td> - <td>{{ HTMLElement("option") }}</td> - <td>Defines a value which will be selected on page load.</td> - </tr> - <tr> - <td>size</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> - <td>Defines the width of the element (in pixels). If the element's <code>type</code> attribute is <code>text</code> or <code>password</code> then it's the number of characters.</td> - </tr> - <tr> - <td>src</td> - <td>{{ HTMLElement("input") }}</td> - <td>The URL of the embeddable content.</td> - </tr> - <tr> - <td>step</td> - <td>{{ HTMLElement("input") }}</td> - <td> </td> - </tr> - <tr> - <td>target</td> - <td>{{ HTMLElement("form") }}</td> - <td> </td> - </tr> - <tr> - <td>type</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> - <td>Defines the type of the element.</td> - </tr> - <tr> - <td>usemap</td> - <td>{{ HTMLElement("input") }}</td> - <td> </td> - </tr> - <tr> - <td>value</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> - <td>Defines a default value which will be displayed in the element on page load.</td> - </tr> - <tr> - <td>wrap</td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Indicates whether the text should be wrapped.</td> - </tr> - </tbody> -</table> -<h3 id="Normative_reference">Normative reference</h3> -<ul> - <li><a href="http://www.w3.org/TR/html5/forms.html" lang="en" rel="external" title="http://www.w3.org/TR/html5/forms.html">W3C HTML5 Specification (Forms)</a></li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Living Standard (Forms)</a></li> -</ul> 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 ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">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.</p> - -<h2 id="Learning_pathway">Learning pathway</h2> - -<p>Ideally you should start your learning journey by learning HTML. Start by reading <a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a>. You may then move on to learning about more advanced topics such as:</p> - -<ul> - <li><a href="/en-US/docs/Web/API">HTML5 APIs</a></li> - <li><a href="/en-US/docs/Learn/CSS">CSS</a>, 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.)</li> - <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, 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.)</li> -</ul> - -<p>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 <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> - -<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web </a>before attempting this topic, however it isn't absolutely necessary; much of what is covered in the <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> article is also covered in our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, albeit in a lot more detail.</p> - -<h2 id="Modules">Modules</h2> - -<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML Tables</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></dt> - <dd>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.</dd> -</dl> - -<h2 id="Solving_common_HTML_problems">Solving common HTML problems</h2> - -<p><a href="/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a> 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.</p> - -<h2 id="See_also">See also</h2> - -<div class="document-head" id="wiki-document-head"> -<dl> - <dt><a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> on MDN.</dt> - <dd>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.</dd> -</dl> -</div> 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 ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">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.</p> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>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 <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>), and understand how to create and manage files (as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>). Both are parts of our <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> - -<div class="note"> -<p><strong>Note</strong>: 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 <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> -</div> - -<h2 id="Guides">Guides</h2> - -<p>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.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></dt> - <dd>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!</dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></dt> - <dd>The {{Glossary("Head","head")}} of an HTML document is the part that <strong>is not</strong> 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).</dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></dt> - <dd>There are many other elements in HTML for formatting text that we didn't get to in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a> 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.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></dt> - <dd>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.</dd> -</dl> - -<h2 id="Assessments">Assessments</h2> - -<p>The following assessments will test your understanding of the HTML basics covered in the guides above.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></dt> - <dd>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.</dd> -</dl> - -<h2 id="See_also">See also</h2> - -<dl> - <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Web literacy basics 1</a></dt> - <dd>An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the <em>Introduction to HTML</em> 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.</dd> -</dl> - -<div class="note"> -<h2 id="Feedback">Feedback</h2> - -<p>Help us improve our guides and tutorials like this one by taking <a href="https://www.surveygizmo.com/s3/4871248/MDN-Guides-Survey">our survey here</a>.</p> -</div> 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 ---- -<div class="summary"> -<p><u><strong id="docs-internal-guid-882eb067-dfbc-b1a1-15fd-8230d416ac78">আপনি কি আপনার নিজের ওয়েবসাইট বা ওয়েব এ্যাপ বানাতে চান ? আপনি একেবারে সঠিক জায়গায়তেই এসেছেন।</strong></u></p> -</div> - -<p><font face="FreeSans"><font face="SolaimanLipi">ওয়েব ডিজাইন এবং ডেভলোপমেন্ট শিখতে বেশ কিছু জানতে হয়</font></font><font face="SolaimanLipi">, </font><font face="FreeSans"><font face="SolaimanLipi">তবে এটি তেমন চিন্তার বিষয় নয়। এখানে আমরা আপনার সহযোগীতায় আছি </font></font><font face="SolaimanLipi">, </font><font face="FreeSans"><font face="SolaimanLipi">যেখানে আপনি শুধু কিছু কোড বেছে নিবেন আর দেখবেন ধীরে ধীরে আপনি একজন দক্ষ্য পেশাদারী ডেভলোপার এর পরিনত হয়ে যাবেন ।</font></font></p> - -<h2 id="কোথায়_থেকে_শুরু_করতে_চান">কোথায় থেকে শুরু করতে চান?</h2> - -<p><font face="FreeSans"><font face="SolaimanLipi">আপনি যেখানেই যেতে চান আমরা আপনার সাথে সেখানেই নিয়ে যাব । কোন বিবরনটি আপনার কাছে বেশি সুবিধা জনক </font></font><font face="SolaimanLipi">?</font><strong> </strong></p> - -<ul class="card-grid"> - <li><strong id="docs-internal-guid-7da75c9c-dfcb-0613-512e-903b8f31af91">আমি </strong><strong>একজন অনভিজ্ঞ</strong> - - <p><font face="FreeSans"><font face="SolaimanLipi">স্বাগতম</font></font><font face="SolaimanLipi">!! </font><font face="FreeSans"><font face="SolaimanLipi">আমাদের এই সিরিজটি</font></font> <a href="/en-US/Learn/Getting_started_with_the_web">"যেভাবে ওয়েব শেখা শুরু করবেন "</a> এটা<font face="FreeSans"><strong><font face="SolaimanLipi"> </font></strong><font face="SolaimanLipi">দিয়ে শুরু করতে পারেন । এটা আপনাকে ওয়েব ডেভলোপমেন্ট এর সাধারন বিষয় বস্তু এর ধারণা প্রদান করবে যা আমি কাজে লাগাতে পারবে ।</font></font></p> - </li> - <li><strong id="docs-internal-guid-7da75c9c-dfca-c553-2f44-21afe2603352">আমি ওয়েব সম্বন্ধে জানি</strong> - <p><strong id="docs-internal-guid-882eb067-e8e4-cce6-30f2-0bb4764ccf68"> </strong><font face="FreeSans"><font face="SolaimanLipi">খুবই আনন্দের</font></font><font face="SolaimanLipi">!! </font><font face="FreeSans"><font face="SolaimanLipi">সেই ক্ষেত্রে আমরা আপনাকে ওয়েব এর একন্তু মূল বিষয়গুলোর গভির জ্ঞান লাভের জন্য পরামর্শ প্রদান করব । </font></font><a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, এবং <a href="/en-US/docs/Learn/JavaScript">JavaScript</a></p> - </li> - <li><strong id="docs-internal-guid-7da75c9c-dfcc-5d84-9629-bb0fffa3c10c">আমি ওয়েব এর ব্যাপারে বিশেষজ্ঞ</strong> - <p>Amazing! In that case, you may be interested in exploring our advanced <a href="/en-US/docs/Web/Guide">Guides</a> and <a href="/en-US/docs/Web/Tutorials">Tutorials</a>. You should also consider <a href="/en-US/Learn/How_to_contribute">contributing to the Learning Area</a>. ;)</p> - </li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: 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.</p> -</div> - -<p>{{LearnBox({"title":"Quick learning: Vocabulary"})}}</p> - -<h2 id="অন্যান্য_জনের_সাথে_শিখুন">অন্যান্য জনের সাথে শিখুন</h2> - -<p> যদি আপনার কিছু জানার থাকে 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:</p> - -<ul> - <li>মেন্টর ও শিক্ষকদের সাথে কথা বলতে এবং দেখা করতে <a href="http://discourse.webmaker.org/" rel="external">ডিসকোর্স ফোরাম</a> এ আসুন।</li> - <li><a href="https://events.webmaker.org/">ইভেন্ট খুঁজুন</a> and learn the web with awesome folks.</li> -</ul> - -<h2 id="Sharing_knowledge">Sharing knowledge</h2> - -<p>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 <a href="/en-US/Learn/How_to_contribute">how you can help</a>, and we encourage you to chat with us on our <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">mailing lists</a> or <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>. :)</p> - -<dl> - <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a> </dt> - <dd>মেন্টরশিপ এবং প্রকল্প ভিত্তিক শেখার সঙ্গে, প্রযুক্তি দক্ষতা দক্ষতা জন্য বিনামূল্যে এবং খোলা কোর্স</dd> -</dl> - -<h2 id="Subnav">Subnav</h2> - -<ol> - <li><a href="/en-US/Learn/Getting_started_with_the_web">Getting started with the web</a></li> - <li><a href="/en-US/Learn/Skills">Learn the web</a> - <ol> - <li><a href="https://webmaker.org/en-US/literacy" rel="external">Web Literacy Map</a></li> - <li><a href="/en-US/Learn/Web_Mechanics">Web mechanics</a></li> - <li><a href="/en-US/Learn/Infrastructure">Infrastructure</a></li> - <li><a href="/en-US/Learn/Coding-Scripting">Coding & Scripting</a></li> - <li><a href="/en-US/Learn/Design_and_Accessibility">Design & Accessibility</a></li> - <li><a href="/en-US/Learn/Composing_for_the_web">Writing & planning</a></li> - </ol> - </li> - <li><a href="#">Learn technologies</a> - <ol> - <li><a href="/en-US/Learn/HTML">HTML</a></li> - <li><a href="/en-US/Learn/CSS">CSS</a></li> - <li><a href="/en-US/Learn/JavaScript">JavaScript</a></li> - <li><a href="/en-US/Learn/Python">Python</a></li> - </ol> - </li> - <li><a href="/en-US/Learn/tutorial">Learning tutorials</a> - <ol> - <li><a href="/en-US/Learn/tutorial/How_to_build_a_web_site">How to build a web site?</a></li> - <li><a href="/en-US/Learn/tutorial/Information_Security_Basics">Information security basics</a></li> - </ol> - </li> - <li><a href="http://weblitmapper.webmakerprototypes.org/">Learning resources</a></li> - <li><a href="/en-US/Learn/help">Getting help</a> - <ol> - <li><a href="/en-US/Learn/FAQ">FAQ</a></li> - <li><a href="/en-US/docs/Glossary">Glossary</a></li> - <li><a href="http://discourse.webmakerprototypes.org/" rel="external">Ask your questions</a></li> - <li><a href="https://events.webmaker.org/" rel="external">Meet teachers and mentors</a></li> - </ol> - </li> - <li><a href="/en-US/Learn/How_to_contribute">How to contribute</a></li> -</ol> 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 ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">আমাদের প্রথম জাভাস্ক্রিপ্ট মডিউলে আমরা কিছু ভৌত প্রশ্নের উত্তর দিব, যেমন "জাভাস্ক্রিপ্ট কি?" , "এটা কেমন দেখতে?" , "এটা কি করতে পারে?" । আপনাকে আপনার প্রথম জাভাস্ক্রিপ্ট লেখার বাস্তব অভিজ্ঞতার মধ্য দিয়ে নিয়ে যাওয়ার আগে আমরা এগুলো শিখবো। তারপর আমরা কিছু কি বিল্ডিং ব্লক নিয়ে বিশদে আলোচনা করবো, যেমন ভ্যারিয়েবল, স্ট্রিং, নাম্বার এবং array ।</p> - -<h2 id="পূর্বশর্ত">পূর্বশর্ত </h2> - -<p>এই মডিউল শুরু করার পূর্বে আপনার জাভাস্ক্রিপ্ট এর উপর কোনো পূর্ব অভিজ্ঞতা থাকা আবশ্যক নয়, কিন্তু আপনার HTML ও CSS এর সাথে পরিচিতি থাকতে হবে। আপনাকে জাভাস্ক্রিপ্ট শুরু করার পূর্বে নিম্নের মডিউলগুলোর মধ্য দিয়ে কাজ শুরু করার পরামর্শ দেওয়া হচ্ছে। </p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> (which includes a really <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">basic JavaScript introduction</a>).</li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</li> -</ul> - -<div class="note"> -<p><strong>বিঃদ্রঃ </strong>: আপনি যদি এমন একটি কম্পিউটার/ট্যাবলেট কিংবা অন্যান্য ডিভাইসে কাজ করেন যেখানে আপনার নিজের কোনো ফাইল তৈরী করা সম্ভব নয়, সেক্ষেত্রে আপনার তৈরী করা কোডগুলো নিয়ে গবেষণা করতে পারেন অনলাইন কোডিং প্রোগ্রামগুলোতে যেমন <a href="http://jsbin.com/">JSBin</a> অথবা <a href="https://thimble.mozilla.org/">Thimble</a>। </p> -</div> - -<h2 id="গাইড">গাইড</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">জাভাস্ক্রিপ্ট কি?</a></dt> - <dd>নবীন শিক্ষার্থীদের জন্য আয়োজিত MDN এর জাভাস্ক্রিপ্ট কোর্সে আপনাকে স্বাগতম। এই প্রথম আর্টিকেলে আমরা জাভাস্ক্রিপ্টকে উঁচু স্তর থেকে দেখবো। আমরা উত্তর দেব "এটা কি?" , এবং "এটা কি করছে?" এবং নিশ্চিত করবো যে আপনি জাভাস্ক্রিপ্ট এর উদ্দেশ্য নিয়ে সাচ্ছন্দবোধ করছেন। </dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">জাভাস্ক্রিপ্ট এর প্রথম ঝলক</a></dt> - <dd>এখন আপনি জাভাস্ক্রিপ্ট সম্পর্কে কিছু তত্ত্ব শিখেছেন এবং আপনি জানেন আপনি এটা দিয়ে কি করতে পারবেন। আমরা আপনাকে একটি সংক্ষিপ্ত কোর্সে সম্পূর্ণ প্রাকটিকাল টিউটোরিয়াল এর মাধ্যমে জাভাস্ক্রিপ্টের ভৌত বৈশিষ্টগুলো শেখাবো। এখানে ধাপে ধাপে আপনি "Guess the number" নামের একটি সাধারণ গেম তৈরী করবেন। </dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">কি সমস্যা হলো? জাভাস্ক্রিপ্ট মেরামত</a></dt> - <dd>পূর্বের আর্টিকেলে যখন আপনি "Guess the number" গেমটি তৈরী করেছিলেন তখন নিশ্চয়ই খেয়াল করেছিলেন যে এটা কাজ করছিলো না। ভয় পাওয়ার দরকার নেই - এই আর্টিকেল সেই উদ্দেশ্য নিয়ে লেখা হয়েছে কিছু সাধারণ টিপস সহকারে যাতে আপনি সহজে জাভাস্ক্রিপ্ট প্রোগ্রামের সমস্যা নির্ণয় করতে পারেন ও তার সমাধান করতে পারেন। </dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">আপনার দরকারি তথ্য Storing (সংরক্ষণ) করা — Variables (চলক)</a></dt> - <dd>পূর্বের গুটিকতক আর্টিকেল পড়ার পরে আপনার এখন জানা উচিত জাভাস্ক্রিপ্ট কি, এটা আপনার জন্য কি করতে পারে, অন্যান্য ওয়েব টেকনোলজির পাশাপাশি আপনি এটাকে কিভাবে ব্যবহার করতে পারেন, এবং এটার মূল বৈশিষ্ট উঁচু স্তর থেকে দেখতে কেমন লাগে। এই আর্টিকেলে আমরা একেবারে মৌলিক বিষয় দেখবো যেটা হলো জাভাস্ক্রিপ্টের প্রথম মৌলিক বিল্ডিং ব্লক - Variables (চলক)। </dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">জাভাস্ক্রিপ্ট এর মৌলিক গণিত — numbers and operators</a></dt> - <dd>এই মুহূর্তে আমরা আলোচনা করবো জাভাস্ক্রিপ্টের গণিত নিয়ে - আমরা কিভাবে অপারেটর একত্র করতে পারি কিভাবে নাম্বারকে আমাদের আদেশ পালন করার জন্য পরিচালনা করতে পারি। </dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">টেক্সট সামলানো — strings in JavaScript</a></dt> - <dd>পরবর্তীতে আমরা আমাদের মনোযোগ ঘোরাবো স্ট্রিং এর দিকে - টেক্সট এর টুকরাকে প্রোগ্রামিংয়ের ভাষায় এটাই বলা হয়ে থাকে। এই আর্টিকেলে আমরা সেই সবকিছু দেখবো যেটা জাভাস্ক্রিপ্ট শেখার সময় স্ট্রিং সম্পর্কে আপনার জানা থাকার দরকার, যেমন স্ট্রিং তৈরী, স্ট্রিং থেকে কোটেশন এর মুক্তি এবং তাদেরকে একত্র করা। </dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">সুবিধাজনক স্ট্রিং মেথড</a></dt> - <dd>এখন আমরা দেখলাম স্ট্রিং এর একেবারে মৌলিক বিষয়গুলো, এখন একটু গতি বাড়িয়ে চিন্তা করে দেখা যাক বিল্ট-ইন মেথড ব্যবহার করে স্ট্রিং এর উপর কি ধরণের লাভজনক অপারেশন করা যেতে পারে, যেমন একটি স্ট্রিং এর দৈর্ঘ্য পরিমাপ করা, স্ট্রিং একত্র ও পৃথক করা, স্ট্রিং এর একটি অক্ষর অন্যটির জন্য বাদ দেওয়া, এবং আরো অনেক কিছু। </dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></dt> - <dd>এই মডিউলের সর্বশেষ আর্টিকেলে আমরা দেখবো Array - একটিমাত্র চলকের মধ্যে একটি ডাটার তালিকা সংরক্ষণ করার সহজ উপায়। এখানে আমরা দেখবো কেন এটি সুবিধাজনক, তারপর দেখবো কিভাবে একটি Array তৈরী করতে হয়, Array পুনরুদ্ধার, সংযোজন এবং Array এর তালিকা থেকে আইটেম বিয়োজন, এবং এর পাশাপাশি আরো অনেক কিছু। </dd> -</dl> - -<h2 id="মূল্যায়ন">মূল্যায়ন</h2> - -<p>নিচের কাজটি থেকে মূল্যায়ন করা হবে আপনি উপরের জাভাস্ক্রিপ্ট কোর্সের গাইড অনুসরণ করে কি শিখেছেন। </p> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">মজাদার গল্প উৎপাদক</a></dt> - <dd>এই মূল্যায়নে আপনাকে একটি কাজ দেওয়া হবে, মডিউলগুলো থেকে কিছু শিখে আপনাকে একটি মজাদার App বানাতে হবে যেটা মজাদার গল্প তৈরী করে। শুভেচ্ছা রইলো !</dd> -</dl> 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/জাভাস্ক্রিপ্ট-কী ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div> - -<p class="summary">মোজিলা ডেভেলপার নেটওয়ার্ক এর প্রাথমিক জাভাস্ক্রিপ্ট এর কোর্সে স্বাগতাম! এই লেখায় আমরা জাভাস্ক্রিপ্টকে গভীরভাবে জানব, কিছু প্রশ্ন নিয়ে আলোচনা করব যেমন "জাভাস্ক্রিপ্ট কী" এবং "জাভাস্ক্রিপ্ট দিয়ে কী করা যায়?", সেই সাথে সহজভাবে কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করতে সেটাও শিখব।</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">আগে থেকে যা জানতে হবে</th> - <td>কম্পিউটার </td> - </tr> - <tr> - <th scope="row">উদ্দেশ্য:</th> - <td>জাভাস্ক্রিপ্ট এর সাথে পরিচিতি,</td> - </tr> - </tbody> -</table> - -<h2 id="জাভস্ক্রিপ্ট_এর_পূর্ণাঙ্গ_সংজ্ঞা">জাভস্ক্রিপ্ট এর পূর্ণাঙ্গ সংজ্ঞা</h2> - -<p>জাভাস্ক্রিপ্ট মূলত একটি scripting ভাষা বা programming ভাষা। জাভাস্ক্রিপ্ট ব্যবহার করে ওয়েবসাইটে জটিল বৈশিষ্ট্য যুক্ত করা যায় যেমন নির্দিষ্ট সময় অনু্যায়ী কনটেন্ট পরিবর্তন করা, মানচিত্র যোগ করা ওয়েবসাইটে 2D/3D animation যুক্ত করা ইত্যাদি। নিচের ওয়েব প্রযুক্তি রূপক যে কেক আছে সেটার তৃতীয় স্তর হচ্ছে জাভাস্ক্রিপ্ট। </p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p> - -<ul> - <li>{{glossary("HTML")}} হচ্ছে মার্ক আপ ভাষা। এই ভাষা ব্যবহার করে ওয়েব সাইট তৈরী করা হয় এবং ওয়েবসাইটের কনটেন্ট এ অর্থবহ করা হয়। যেমন পেইজে প্যারগ্রাফ, শিরোনাম, ডাটা টেবি অথবা ছবি বা ভিডিও যুক্ত করা ইত্যাদি। </li> - <li>{{glossary("CSS")}} দিয়ে HTML এর কনটেন্ট এর সাথে স্টাইল যুক্ত করা হয় যাতে ওয়েবসাইট টা দৃষ্টিনন্দন হয়। যেমন ব্যাকগ্রাউন্ড এ রঙ যুক্ত করা, ফন্ট নিয়ে কাজ করা, ওয়েবসাইটের কলামকে বিভিন্ন কলামে ঠিক করা ইত্যাদি।</li> - <li>{{glossary("JavaScript")}} একটি scripting ভাষা। Scripting ভাষা হচ্ছে একটি প্রোগ্রামিং ভাষা যেটি interpreter ব্যবহার করে কোড রান করে। জাভাস্ক্রিপ্ট ব্যবহার করে সক্রিয়ভাবে কনটেন্ট পরিবর্তন, মাল্টিমিডিয়ার নিয়ন্ত্রণ, ছবির এনিমেশন, এবং আরও অনেক কাজ করা যায়। </li> -</ul> - -<p>তিনটা পর্যায় একটি আরেকটির উপর সুন্দরভাবে তৈরি। উদাহরণস্বরূপ নিচের টেক্সটটিকে দেখা যাক। HTML ব্যবহার করে আমরা লেখাটিকে মার্ক আপ করবঃ </p> - -<pre class="brush: html notranslate"><p>Player 1: Chris</p></pre> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p> - -<p>তারপর লেখাটিকে সুন্দর করার জন্য আমরা কিছু CSS যোগ করবঃ</p> - -<pre class="brush: css notranslate">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; -}</pre> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p> - -<p>এবং সবশেষে আমরা জাভাস্ক্রিপ্ট ব্যবহার করে কনটেন্ট যুক্ত করবঃ </p> - -<pre class="brush: js notranslate">const para = document.querySelector('p'); - -para.addEventListener('click', updateName); - -function updateName() { - let name = prompt('Enter a new name'); - para.textContent = 'Player 1: ' + name; -} -</pre> - -<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>কী ঘটছে তা দেখার জন্য লেখাটির সর্বশেষ সংস্করনে ক্লিক করে দেখুন (উল্লেখ্য আপনি এই ডেমোটা GitHub এও পাবেন — <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">সোর্স কোড দেখুন</a>, অথবা <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html"> সরাসরি চালিয়ে দেখুন </a>)!</p> - -<p>জাভাস্ক্রিপ্ট আরো অনেক কিছু করতে পারে - বিস্তারিত জেনে নেওয়া যাক। </p> - -<h2 id="জাভাস্ক্রিপ্ট_প্রকৃতভাবে_কী_কী_করতে_পারে">জাভাস্ক্রিপ্ট প্রকৃতভাবে কী কী করতে পারে? </h2> - -<p>মূল client-side জাভাস্ক্রিপ্ট সাধারণ কিছু প্রোগ্রামিং বৈশিষ্ট্য নিয়ে তৈরি যা দিয়ে আপনি নিচের </p> - -<ul> - <li>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 <code>name</code>.</li> - <li>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 <code>name</code> variable to create the complete text label, e.g. ''Player 1: Chris".</li> - <li>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.</li> - <li>And much more!</li> -</ul> - -<p>What is even more exciting however is the functionality built on top of the client-side JavaScript language. So-called <strong>Application Programming Interfaces</strong> (<strong>APIs</strong>) provide you with extra superpowers to use in your JavaScript code.</p> - -<p>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 <em>then</em> put them together to make a bookshelf.</p> - -<p>They generally fall into two categories.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p> - -<p><strong>Browser APIs</strong> are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. For example:</p> - -<ul> - <li>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.</li> - <li>The {{domxref("Geolocation","Geolocation API")}} retrieves geographical information. This is how <a href="https://www.google.com/maps">Google Maps</a> is able to find your location and plot it on a map.</li> - <li>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 <a href="https://www.chromeexperiments.com">Chrome Experiments</a> and <a href="http://webglsamples.org/">webglsamples</a>.</li> - <li><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video APIs</a> 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 <a href="http://chrisdavidmills.github.io/snapshot/">Snapshot demo</a> to get the idea).</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: 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 <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a> in more detail when you get closer to delivering production code (i.e. real code that real customers will use).</p> -</div> - -<p><strong>Third party APIs</strong> 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:</p> - -<ul> - <li>The <a href="https://dev.twitter.com/overview/documentation">Twitter API</a> allows you to do things like displaying your latest tweets on your website.</li> - <li>The <a href="https://developers.google.com/maps/">Google Maps API</a> and <a href="https://wiki.openstreetmap.org/wiki/API">OpenStreetMap API</a> allows you to embed custom maps into your website, and other such functionality.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: 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 <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs module</a>.</p> -</div> - -<p>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!</p> - -<h2 id="What_is_JavaScript_doing_on_your_page">What is JavaScript doing on your page?</h2> - -<p>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.</p> - -<p>Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">How CSS works</a> 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).</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p> - -<p>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 <a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Script_loading_strategies">Script loading strategies</a> section.</p> - -<h3 id="Browser_security">Browser security</h3> - -<p>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.</p> - -<div class="note"> -<p><strong>Note</strong>: 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.</p> -</div> - -<h3 id="JavaScript_running_order">JavaScript running order</h3> - -<p>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:</p> - -<pre class="brush: js notranslate">const para = document.querySelector('p'); - -para.addEventListener('click', updateName); - -function updateName() { - let name = prompt('Enter a new name'); - para.textContent = 'Player 1: ' + name; -}</pre> - -<p>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 <code>updateName()</code> code block (lines 5–8) is run. The <code>updateName()</code> 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.</p> - -<p>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 <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer console</a> — <code>TypeError: para is undefined</code>. This means that the <code>para</code> object does not exist yet, so we can't add an event listener to it.</p> - -<div class="note"> -<p><strong>Note</strong>: 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.</p> -</div> - -<h3 id="Interpreted_versus_compiled_code">Interpreted versus compiled code</h3> - -<p>You might hear the terms <strong>interpreted</strong> and <strong>compiled</strong> 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.</p> - -<p>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.</p> - -<p>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 <strong>just-in-time compiling</strong> 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.</p> - -<p>There are advantages to both types of language, but we won't discuss them right now.</p> - -<h3 id="Server-side_versus_client-side_code">Server-side versus client-side code</h3> - -<p>You might also hear the terms <strong>server-side</strong> and <strong>client-side</strong> 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 <strong>client-side JavaScript</strong>.</p> - -<p>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 <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a> topic.</p> - -<h3 id="Dynamic_versus_static_code">Dynamic versus static code</h3> - -<p>The word <strong>dynamic</strong> 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.</p> - -<p>A web page with no dynamically updating content is referred to as <strong>static</strong> — it just shows the same content all the time.</p> - -<h2 id="How_do_you_add_JavaScript_to_your_page">How do you add JavaScript to your page?</h2> - -<p>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.</p> - -<h3 id="Internal_JavaScript">Internal JavaScript</h3> - -<ol> - <li>First of all, make a local copy of our example file <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>. Save it in a directory somewhere sensible.</li> - <li>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.</li> - <li>Next, go to your text editor and add the following in your head — just before your closing <code></head></code> tag: - <pre class="brush: html notranslate"><script> - - // JavaScript goes here - -</script></pre> - </li> - <li>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: - <pre class="brush: js notranslate">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); - } -});</pre> - </li> - <li>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.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: 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 <code>.html</code> file? Did you add your {{htmlelement("script")}} element just before the <code></head></code> tag? Did you enter the JavaScript exactly as shown? <strong>JavaScript is case sensitive, and very fussy, so you need to enter the syntax exactly as shown, otherwise it may not work.</strong></p> -</div> - -<div class="note"> -<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">see it live too</a>).</p> -</div> - -<h3 id="External_JavaScript">External JavaScript</h3> - -<p>This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.</p> - -<ol> - <li>First, create a new file in the same directory as your sample HTML file. Call it <code>script.js</code> — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.</li> - <li>Replace your current {{htmlelement("script")}} element with the following: - <pre class="brush: html notranslate"><script src="script.js" defer></script></pre> - </li> - <li>Inside <code>script.js</code>, add the following script: - <pre class="brush: js notranslate">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); -}</pre> - </li> - <li>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.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">see it live too</a>).</p> -</div> - -<h3 id="Inline_JavaScript_handlers">Inline JavaScript handlers</h3> - -<p>Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. It might look something like this:</p> - -<div id="inline_js_example"> -<pre class="brush: js example-bad notranslate">function createParagraph() { - let para = document.createElement('p'); - para.textContent = 'You clicked the button!'; - document.body.appendChild(para); -}</pre> - -<pre class="brush: html example-bad notranslate"><button onclick="createParagraph()">Click me!</button></pre> -</div> - -<p>You can try this version of our demo below.</p> - -<p>{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>This demo has exactly the same functionality as in the previous two sections, except that the {{htmlelement("button")}} element includes an inline <code>onclick</code> handler to make the function run when the button is pressed.</p> - -<p><strong>Please don't do this, however.</strong> It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the <code>onclick="createParagraph()"</code> attribute on every button you want the JavaScript to apply to.</p> - -<p>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:</p> - -<pre class="brush: js notranslate">const buttons = document.querySelectorAll('button'); - -for(let i = 0; i < buttons.length ; i++) { - buttons[i].addEventListener('click', createParagraph); -}</pre> - -<p>This might be a bit longer than the <code>onclick</code> 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.</p> - -<div class="note"> -<p><strong>Note</strong>: Try editing your version of <code>apply-javascript.html</code> 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?</p> -</div> - -<h3 id="Script_loading_strategies">Script loading strategies</h3> - -<p>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 <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">Document Object Model</a>), your code won't work if the JavaScript is loaded and parsed before the HTML you are trying to do something to.</p> - -<p>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.</p> - -<p>In the internal example, you can see this structure around the code:</p> - -<pre class="brush: js notranslate">document.addEventListener("DOMContentLoaded", function() { - ... -});</pre> - -<p>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 <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">learn about events</a> later in the course).</p> - -<p>In the external example, we use a more modern JavaScript feature to solve the problem, the <code>defer</code> attribute, which tells the browser to continue downloading the HTML content once the <code><script></code> tag element has been reached.</p> - -<pre class="brush: js notranslate"><script src="script.js" defer></script></pre> - -<p>In this case both the script and the HTML will load simultaneously and the code will work.</p> - -<div class="note"> -<p><strong>Note</strong>: In the external case, we did not need to use the <code>DOMContentLoaded</code> event because the <code>defer</code> attribute solved the problem for us. We didn't use the <code>defer</code> solution for the internal JavaScript example because <code>defer</code> only works for external scripts.</p> -</div> - -<p>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 <code></body></code> 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.</p> - -<h4 id="async_and_defer">async and defer</h4> - -<p>There are actually two modern features we can use to bypass the problem of the blocking script — <code>async</code> and <code>defer</code> (which we saw above). Let's look at the difference between these two.</p> - -<p>Scripts loaded using the <code>async</code> 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 <code>async</code> when the scripts in the page run independently from each other and depend on no other script on the page.</p> - -<p>For example, if you have the following script elements:</p> - -<pre class="brush: html notranslate"><script async src="js/vendor/jquery.js"></script> - -<script async src="js/script2.js"></script> - -<script async src="js/script3.js"></script></pre> - -<p>You can't rely on the order the scripts will load in. <code>jquery.js</code> may load before or after <code>script2.js</code> and <code>script3.js</code> and if this is the case, any functions in those scripts depending on <code>jquery</code> will produce an error because <code>jquery</code> will not be defined at the time the script runs.</p> - -<p><code>async</code> 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.</p> - -<p>Scripts loaded using the <code>defer</code> 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:</p> - -<pre class="brush: html notranslate"><script defer src="js/vendor/jquery.js"></script> - -<script defer src="js/script2.js"></script> - -<script defer src="js/script3.js"></script></pre> - -<p>All the scripts with the <code>defer</code> attribute will load in the order they appear on the page. So in the second example, we can be sure that <code>jquery.js</code> will load before <code>script2.js</code> and <code>script3.js</code> and that <code>script2.js</code> will load before <code>script3.js</code>. 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).</p> - -<p>To summarize:</p> - -<ul> - <li><code>async</code> and <code>defer</code> 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.</li> - <li>If your scripts should be run immediately and they don't have any dependencies, then use <code>async</code>.</li> - <li>If your scripts need to wait for parsing and depend on other scripts and/or the DOM being in place, load them using <code>defer</code> and put their corresponding <code><script></code> elements in the order you want the browser to execute them.</li> -</ul> - -<h2 id="Comments">Comments</h2> - -<p>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:</p> - -<ul> - <li>A single line comment is written after a double forward slash (//), e.g. - <pre class="brush: js notranslate">// I am a comment</pre> - </li> - <li>A multi-line comment is written between the strings /* and */, e.g. - <pre class="brush: js notranslate">/* - I am also - a comment -*/</pre> - </li> -</ul> - -<p>So for example, we could annotate our last demo's JavaScript with comments like so:</p> - -<pre class="brush: js notranslate">// 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); -}</pre> - -<div class="note"> -<p><strong>Note</strong>: 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).</p> -</div> - -<h2 id="Summary">Summary</h2> - -<p>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.</p> - -<p>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 <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">plunge straight into the practical</a>, getting you to jump straight in and build your own JavaScript examples.</p> - -<ul> -</ul> - -<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> -</ul> 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 ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">{{Glossary("JavaScript")}} হচ্ছে <span id="result_box" lang="bn"><span>একটি প্রোগ্রামিং ভাষা যা আপনাকে ওয়েব পৃষ্ঠাগুলিতে জটিল জিনিসগুলি বাস্তবায়ন করতে দেয়।</span> </span> <span id="result_box" lang="bn"><span>প্রতিবার একটি ওয়েব পৃষ্ঠা কেবল সেখানে একিরকম থাকে এবং আপনার জন্য স্ট্যাটিক তথ্য প্রদর্শন করে - সময়মত লেখার </span></span><span lang="bn"><span> আপডেটগুলি, বা </span></span>মিথষ্ক্রিয়<span lang="bn"><span> মানচিত্র, বা অ্যানিমেটেড 2 ডি / 3 ডি গ্রাফিক্স বা স্ক্রোলিং ভিডিও জুকবক্সগুলি ইত্যাদি প্রদর্শন করে - এবং সম্ভবত আপনি</span> <span>জড়িত </span><span>জাভাস্ক্রিপ্ট বিট করতে পারেন।</span></span></p> - -<h2 id="Learning_pathway">Learning pathway</h2> - -<p>JavaScript শেখা একটু বেশী কঠিন এর অনুষঙ্গী অন্যান্য ভাষা থেকে, যেমন <a href="/en-US/docs/Learn/HTML">HTML</a> এবং <a href="/en-US/docs/Learn/CSS">CSS</a>। তোমার প্রতি আক্তি কঠিন উপদেশহবে, JavaScript শিখার আগে কমসেকম এর অনুষঙ্গী দুইটি টেকনলজি এর সাথে একটু পরিচিত হন <span id="result_box" lang="bn"><span>অন্যদের পাশাপাশি এবং</span></span><span id="result_box" lang="bn"> <span>নিম্নলিখিত মডিউল মাধ্যমে কাজ করে শুরু করুন:</span></span></p> - -<ul> - <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></li> -</ul> - -<p>Having previous experience with other programming languages might also help.</p> - -<p>After getting familiar with the basics of JavaScript, you should be in a position to learn about more advanced topics, for example:</p> - -<ul> - <li>JavaScript in depth, as taught in our <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a></li> - <li><a href="/en-US/docs/Web/API">Web APIs</a></li> -</ul> - -<h2 id="Modules">Modules</h2> - -<p>This topic contains the following modules, in a suggested order for working through them.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a></dt> - <dd>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. </dd> -</dl> - -<h2 id="Solving_common_JavaScript_problems">Solving common JavaScript problems</h2> - -<p><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a> provides links to sections of content explaining how to use JavaScript to solve very common problems when creating a webpage.</p> - -<h2 id="See_also">See also</h2> - -<dl> - <dt><a href="/en-US/docs/Web/JavaScript">JavaScript on MDN</a></dt> - <dd>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.</dd> - <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt> - <dd>An excellent series of video tutorials to teach the math you need to understand to be an effective programmer, by <a href="https://twitter.com/bit101">Keith Peters</a>.</dd> -</dl> 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 ---- -<div>{{LearnSidebar}}</div> - -<div>জ্যাঙ্গ সম্পুর্ন বৈশিষ্ট্যযুক্ত জনপ্রিয় server-side web framework যা Python এ লিখিত। এই মডিউল আপনাকে দেখাবে জ্যাঙ্গ কেন সবচেয়ে জনপ্রিয় web server frameworks, কিভাবে এনভাইরনমেন্ট সেটআপ করতে হবে এবং দেখাবে কিভাবে আপনি আপনার নিজস্ব ওয়েব আপ্লিকেশন তৈরি করবেন।</div> - -<h2 id="পূর্বশর্ত">পূর্বশর্ত </h2> - -<p>এই মডিউল শুরু করার পুর্বে আপনার জ্যাঙ্গ সম্পর্কে কোন জ্ঞানের প্রয়োজন নেই। মুলত যেটা জানতেই হবে তা হচ্ছে, server-side web programming কি, web programming এবং web frameworks সম্পর্কে বিস্তারিত জানেতে আমাদের এই অংশটি দেখুন যেইখানে মুলত প্রথম থেকে শুরু হয়েছে, <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a>.</p> - -<p>আপনাকে অবশ্যই কিঞ্চিত অর্থাৎ প্রোগ্রামিং এর কিছু সাধারন ধারনা রাখতে হবে এবং <a href="/en-US/docs/Glossary/Python">Python</a> কেই আমরা রিকমেন্ড করি, যদিও মুল বিষয় খুব বেশি জরুরী না।</p> - -<div class="note"> -<p><strong>মনেরাখুন</strong>: পাইথন সবচেয়ে সহজ প্রোগ্রামিং ল্যাঙ্গুয়েজ যা কিনা যেকোনো অনভিজ্ঞ লোকের পক্ষেই পড়া এবং বোঝা সহজ। বলে রাখি, আপনি যদি এই মডিউলটি আরও ভালভাবে বুঝতে চান তবে আপনাকে সাহায্য করার জন্য ইন্টারনেটে প্রচুর বিনামূল্যে বই এবং টিউটোরিয়াল উপলব্ধ রয়েছে (নতুন প্রোগ্রামাররা python.org উইকিতে <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python for Non Programmers</a> পৃষ্ঠাগুলি চাইলে দেখতে পারেন)।</p> -</div> - -<h2 id="নির্দেশনাঃ">নির্দেশনাঃ </h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction </a></dt> - <dd>এই আর্টিকেলটির প্রথমেই আমরা এই প্রশ্নের জবাব দিবো যে, "জ্যাঙ্গ কি?" এবং কি কারনে এই ওয়েব ফ্রেমওয়ার্কটি বিশেষ করে তোলে তার একটি সংক্ষিপ্ত বিবরণ আপনাকে দিবো। আমরা মুলত প্রধান বৈশিষ্ট্যগুলির বর্ননা করব এবং কিছু উন্নত কার্যকারিতা সহ যেহেতু আমাদের হাতে পর্যাপ্ত সময় নেই সবকিছু বিশদ ভাবে ব্যাখ্যা করার। এটি সেট আপ করার আগে এবং জ্যাঙ্গ নিয়ে মাঠে নামার আগে এটি কী করতে পারে তার একটি ধারণা দেওয়ার জন্য আমরা আপনাকে জ্যাঙ্গো অ্যাপ্লিকেশনের কয়েকটি মূল বিল্ডিং ব্লক প্রদর্শন করব।</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></dt> - <dd> - <p dir="ltr" id="tw-target-text">এখন যেহেতু আপনি জানলেন যে জাঙ্গো কীসের জন্য, এখন আমরা আপনাকে উইন্ডোজ, লিনাক্স (উবুন্টু), এবং macOS-এ - (আপনি যে কমন অপারেটিং সিস্টেম ব্যবহার করছেন) জ্যাঙ্গো ডেভেলপমেন্ট এনভাইরনমেন্ট কীভাবে সেটআপ এবং টেস্ট করতে হবে তা দেখিয়ে দেব। একটি জ্যাঙ্গো অ্যাপ্লিকেশনগুলির ডেভেলপমেন্ট শুরু করার জন্য যা প্রয়োজন এই নিবন্ধটি আপনাকে মুলত সেগুলই দিবে যা আপনাকে দেওয়া উচিত।</p> - </dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></dt> - <dd>প্রথম আর্টিকেল এ আপনি আমাদের প্রাক্টিকাল টিউটোরিয়াল সিরিজ আপনাকে দেখাবে আপনি কি শিক্ষা গ্রহন করতে যাচ্ছেন এবং মুলত আপনি লকাল লাইব্রেরি সম্পর্কেই সাধারন নির্দেশনা পাবেন -- উদাহরণ সরূপ, আমরা একটি ওয়েবসাইট নিয়ে কাজ করব এবং তাকে বিকশিত করব।</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></dt> - <dd>এই অধ্যায়ে আপনি একটি ওয়েবসাইট প্রোজেক্ট এর স্কেলেটন তৈরি করা দেখানো হবে যেখানে আপনি site-specific settings, urls, models, views, and templates সম্পর্কে জানতে পারবেন।</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></dt> - <dd>এই নিবন্ধটি দেখায় যে কীভাবে <em>LocalLibrary</em> ওয়েবসাইটের মডেলগুলি সংজ্ঞায়িত করতে হয় - মডেলগুলি আমাদের অ্যাপ্লিকেশনটির ডেটা সংরক্ষণ করতে চাই এমন ডেটা স্ট্রাকচারকে উপস্থাপন করে এবং জ্যাঙ্গোকে আমাদের জন্য একটি ডাটাবেসে ডেটা সংরক্ষণ করার অনুমতি দেয় (এবং পরে এটি সংশোধন করে)। একটি মডেল কী তা ব্যাখ্যা করা হয়েছে, এটা কিভাবে ডিক্লিয়ার করা হয়েছে এবং কিছু মেইন ফিল্ড টাইপ্স। কিভাবে আপনি মডেল ডেটা অ্যাক্সেস করতে পারবেন এমন কয়েকটি প্রধান উপায় সংক্ষেপে দেখানো হয়েছে।</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></dt> - <dd>এখন আমরা <em>LocalLibrary</em> ওয়েবসাইটের জন্য মডেল তৈরি করেছি, আমরা কিছু "real" বইয়ের ডেটা যুক্ত করতে জাঙ্গো অ্যাডমিন সাইটটি ব্যবহার করব। প্রথমে আমরা আপনাকে অ্যাডমিন সাইটের সাথে কীভাবে মডেলগুলি নিবন্ধভুক্ত করব তা দেখাব, তারপরে আমরা আপনাকে লগইন করতে এবং কিছু ডেটা তৈরি করার উপায় দেখাব। শেষে আমরা কয়েকটি উপায় প্রদর্শন করি যার মাধ্যমে আপনি Admin সাইটের উপস্থাপনাটি আরও উন্নত করতে পারেন।</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></dt> - <dd>আমরা এখন আমাদের প্রথম পূর্ণ পৃষ্ঠাটি প্রদর্শন করার জন্য code যুক্ত করতে প্রস্তুত - <em>LocalLibrary</em> একটি হোম পৃষ্ঠা যা প্রতিটি মডেলের ধরণের আমাদের কাছে কত রেকর্ড রয়েছে তা দেখায় এবং আমাদের অন্যান্য পৃষ্ঠাগুলিতে সাইডবারের নেভিগেশন লিঙ্ক সরবরাহ করে। যেভাবে আমরা basic URL maps এবং ভিউ লিখতে, ডাটাবেস থেকে রেকর্ড পেতে এবং টেমপ্লেট ব্যবহার করে ব্যবহারিক অভিজ্ঞতা অর্জন করব।</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></dt> - <dd>এই টিউটোরিয়ালটি বই এবং লেখকদের তালিকা এবং বিশদ পৃষ্ঠা যুক্ত করে আমাদের <em>LocalLibrary</em> ওয়েবসাইটকে প্রসারিত করে। এখানে আমরা জেনেরিক class-based views সম্পর্কে শিখব, এবং তারা ব্যবহারের সাধারণ ক্ষেত্রে আপনার কোড লিখতে হবে এমন কোডের পরিমাণ কীভাবে হ্রাস করতে পারে তা দেখাব। আমরা বেসিক প্যাটার্নের matching পারফর্ম করব এবং তা দেখিয়ে আরও বিশদ বিবরণে url হ্যান্ডলিংয়ে যাব। </dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></dt> - <dd>এই টিউটোরিয়ালটি home page এ একটি সেশন-ভিত্তিক ভিজিট-কাউন্টার যুক্ত করে, আমাদের <em>LocalLibrary</em> ওয়েবসাইটকে প্রসারিত করে। এটি তুলনামূলকভাবে সহজ উদাহরণ, তবে এটি দেখায় যে আপনি কীভাবে আপনার নিজের সাইটগুলিতে বেনাম ব্যবহারকারীদের জন্য অবাধ চলাচল নিশ্চিত করার জন্য সেশন ফ্রেমওয়ার্কটি ব্যবহার করতে পারেন।.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></dt> - <dd>এই টিউটোরিয়ালে আমরা আপনাকে কীভাবে ব্যবহারকারীদের নিজের অ্যাকাউন্টে আপনার সাইটে লগইন করতে দেওয়া হবে এবং কীভাবে তারা কী করতে পারে তা নিয়ন্ত্রণ করতে হবে এবং লগ ইন করা হয়েছে কি না এবং তাদের অনুমতিগুলির ভিত্তিতে তা কীভাবে দেখানো হবে তা আমরা আপনাকে দেখাব। এই ব্যাখ্যার অংশ হিসাবে, আমরা LocalLibrary ওয়েবসাইট প্রসারিত করব, লগইন এবং লগ-আউট pages এবং বই যে ধার করা হয়েছে দেখার জন্য user- ও staff-specific pages নির্দিষ্ট পৃষ্ঠাগুলি যোগ করব।</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></dt> - <dd>এই টিউটোরিয়ালে আমরা আপনাকে জ্যাঙ্গ তে <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> এর সাথে কীভাবে কাজ করব এবং বিশেষত মডেল উদাহরণগুলি তৈরি করতে, আপডেট করতে এবং মুছতে ফর্মগুলি লেখার সহজ উপায়টি দেখাব। এই ব্যাখ্যার অংশ হিসাবে, আমরা LocalLibrary ওয়েবসাইট প্রসারিত করব, যাতে গ্রন্থাগারিকরা আমাদের নিজস্ব ফর্মগুলি (অ্যাডমিন অ্যাপ্লিকেশন ব্যবহার না করে) ব্যবহার করে লেখকদের বই পুনর্নবীকরণ(renew) করতে এবং তৈরি করতে, আপডেট করতে এবং মুছতে পারেন।</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></dt> - <dd>ওয়েবসাইটগুলি বড় হওয়ার সাথে সাথে এগুলি ম্যানুয়ালি পরীক্ষা করা আরও শক্ত হয়ে ওঠে- পরীক্ষার জন্য মনেহতে পারে আরও অনেক কিছুই নেই, তবে components এর মধ্যে interaction আরও জটিল হয়ে উঠার সাথে সাথে, একটি ছোট্ট পরিবর্তন, পরিবর্তনের সাথে অন্যান্য area এর প্রভাবটি যাচাই করতে আরও অনেক অতিরিক্ত পরীক্ষার প্রয়োজন হতে পারে। এই সমস্যাগুলি সহজ করার একটি উপায় হ'ল স্বয়ংক্রিয় পরীক্ষাগুলি লিখুন যা আপনি প্রতিবার পরিবর্তন করার সময় সহজেই এবং নির্ভরযোগ্যতার সাথে চালানো যেতে পারে। এই টিউটোরিয়ালটি দেখায় যে কীভাবে জাঙ্গোর পরীক্ষার কাঠামোটি ব্যবহার করে আপনার ওয়েবসাইটের <em>unit testing</em> স্বয়ংক্রিয় করবেন।</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></dt> - <dd><span class="VIiyi" lang="bn"><span class="ChMk0b JLqJ4b"><span>এখন আপনি একটি দুর্দান্ত লোকাল লাইব্রেরি ওয়েবসাইট তৈরি করেছেন (এবং পরীক্ষা করেছেন), আপনি এটিকে একটি পাবলিক ওয়েব সার্ভারে ইনস্টল করতে চাইছেন যাতে এটিতে লাইব্রেরি স্টাফ এবং সদস্যরা ইন্টারনেটে অ্যাক্সেস করতে পারে।</span></span> <span class="ChMk0b JLqJ4b"><span>এই আর্টিকেলটিতে আলোচনা করা হয়েছে, আপনাকে আপনার ওয়েবসাইট স্থাপন করতে কীভাবে একটি হোস্ট সন্ধান করতে হবে এবং আপনার সাইটকে প্রডাকশনের জন্য প্রস্তুত করার জন্য আপনাকে কী করতে হবে।</span></span></span></dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></dt> - <dd><span class="VIiyi" lang="bn"><span class="ChMk0b JLqJ4b"><span>ব্যবহারকারীর ডেটা রক্ষা করা যে কোনও ওয়েবসাইট ডিজাইনের একটি অপরিহার্য অংশ।</span></span> <span class="ChMk0b JLqJ4b"><span>আমরা এর আগে </span></span></span><a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a><span class="VIiyi" lang="bn"><span class="ChMk0b JLqJ4b"><span> প্রবন্ধে আরও কয়েকটি সাধারণ সুরক্ষা হুমকির ব্যাখ্যা দিয়েছিলাম - এই নিবন্ধটিতে জ্যাঙ্গোর বিল্ট-ইন সুরক্ষাগুলি কীভাবে এই জাতীয় হুমকিগুলি পরিচালনা করে তার একটি ব্যাবহারিক প্রয়োগ প্রদর্শন করা হয়েছে। </span></span></span></dd> -</dl> - -<h2 id="Assessments">Assessments</h2> - -<p><span class="VIiyi" lang="bn"><span class="ChMk0b JLqJ4b"><span>এই মূল্যায়নটি জ্যাঙ্গো ব্যবহার করে কীভাবে একটি ওয়েবসাইট তৈরি করবেন সে সম্পর্কে আপনার বোধগম্যতার পরীক্ষা করবে, যা উপরের তালিকাভুক্ত গাইডগুলিতে বর্ণিত ছিলো। </span></span></span></p> - -<dl> - <dt><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></dt> - <dd><span class="VIiyi" lang="bn"><span class="ChMk0b JLqJ4b"><span>এই মূল্যায়নটিতে আপনি আপনার নিজের ব্লগ তৈরি করতে এই মডিউলটি থেকে শিখেছেন এমন কিছু জ্ঞান ব্যবহার করবেন।</span></span></span></dd> -</dl> 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 ---- -<div>{{LearnSidebar}}</div> - -<p>In this module <span class="seoSummary">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?".</span> 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.</p> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>Before starting this module, you don't need to have any knowledge of server-side website programming, or indeed any other type of programming. </p> - -<p>However, you do need to understand how the web works. We recommend that you first read the following topics:</p> - -<ul> - <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server?</a></li> - <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></li> - <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></li> -</ul> - -<p>With that basic understanding, you'll be ready to work your way through the modules in this section. </p> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Introduction">Introduction to the server side</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">Server-side web frameworks</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a></dt> - <dd>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.</dd> -</dl> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: 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 <a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Understanding client-side JavaScript frameworks</a> module.</p> -</div> - -<h2 id="Assessments">Assessments</h2> - -<p>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.</p> 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 ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</div> - -<p class="summary">ওয়েবসাইট ডিজাইন ও ব্যবহারের সবক্ষেত্রেই এখন নিরাপত্তার প্রয়োজন হয়। এই লেখাটি আপনাকে ওয়েবসাইট নিরাপত্তার গুরু বানিয়ে ফেলবে তবে এটি আপনাকে কীভাবে নিরাপত্তা সংক্রান্ত ঝুঁকি আসতে পারে এবং সবচেয়ে সাধারণ কিছু ঝুঁকি থেকে রক্ষা করার জন্য কী কী প্রতিরোধমূলক পদক্ষেপ নেওয়া যায় সেসব সম্পর্কে প্রাথমিক ধারণা পাবেন।</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row"> - <p>যা জানা থাকা আবশ্যক</p> - </th> - <td> - <p>কম্পিউটারের সম্পর্কে মৌলিক জ্ঞান</p> - </td> - </tr> - <tr> - <th scope="row"> - <p>উদ্দেশ্য:</p> - </th> - <td>ওয়েব এপ্লিকেশনের নিরাপত্তা সংক্রান্ত সবচেয়ে সাধারণ ঝুঁকিগুলোকে সম্পর্কে জানা এবং ওয়েবসাইট হ্যাক হওয়ার ঝুঁকি কমানোর জন্য কী কী করা যায় সে সম্পর্কে ধারণা লাভ</td> - </tr> - </tbody> -</table> - -<h2 id="ওয়েবসাইটের_নিরাপত্তা_কী">ওয়েবসাইটের নিরাপত্তা কী?</h2> - -<p>ইন্টারনেট একটি ঝুঁকিপূর্ণ স্থান। আমরা হরহামেশাই ওয়েবসাইটকে খুঁজে না পাওয়া অথবা হ্যাক হয়েছে এরকম তথ্য প্রকাশ করা কথা শুনতে পাই।</p> - -<p>The purpose of website security is to prevent these (or any) sorts of attacks. The more formal definition of website security<em> is the act/practice of protecting websites from unauthorized access, use, modification, destruction, or disruption</em>.</p> - -<p>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.</p> - -<p>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.</p> - -<div class="note"> -<p><strong>Note</strong>: This is an introductory topic, designed to help you start thinking about website security, but it is not exhaustive.</p> -</div> - -<h2 id="Website_security_threats">Website security threats</h2> - -<p>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 <em>not paranoid enough</em> about the data coming from the browser.</p> - -<h3 id="Cross-Site_Scripting_XSS">Cross-Site Scripting (XSS)</h3> - -<p>XSS is a term used to describe a class of attacks that allow an attacker to inject client-side scripts <em>through</em> the website into the browsers of other users. Because the injected code comes to the browser from the site, the code is <em>trusted</em> 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.</p> - -<div class="note"> -<p><strong>Note</strong>: XSS vulnerabilities have been historically more common than any other type of security threat.</p> -</div> - -<p>The XSS vulnerabilities are divided into <em>reflected</em> and <em>persistent</em>, based on how the site returns the injected scripts to a browser.</p> - -<ul> - <li>A <em>reflected</em> XSS vulnerability occurs when user content that is passed to the server is returned <em>immediately</em> and <em>unmodified</em> for display in the browser. Any scripts in the original user content will be run when the new page is loaded.<br> - 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., <code>http://mysite.com?q=beer<script%20src="http://evilsite.com/tricky.js"></script></code>) 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.</li> - <li> - <p>A <em>persistent</em> XSS vulnerability occurs when the malicious script is <em>stored</em> on the website and then later redisplayed unmodified for other users to execute unwittingly.<br> - 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.</p> - </li> -</ul> - -<p>While the data from <code>POST</code> or <code>GET</code> 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.</p> - -<p>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 <code><script></code>, <code><object></code>, <code><embed></code>, and <code><link></code>.</p> - -<div> -<p>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.</p> -</div> - -<h3 id="SQL_injection">SQL injection</h3> - -<p>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.</p> - -<div> -<p>SQL injection types include Error-based SQL injection, SQL injection based on boolean errors, and Time-based SQL injection.</p> -</div> - -<p>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 (<code>userName</code>) that has been supplied from an HTML form:</p> - -<pre class="brush: sql notranslate">statement = "SELECT * FROM users WHERE name = '" + <strong>userName</strong> + "';"</pre> - -<p>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 <code>userName</code>.</p> - -<pre class="brush: sql notranslate">SELECT * FROM users WHERE name = '<strong>a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't</strong>'; -</pre> - -<p>The modified statement creates a valid SQL statement that deletes the <code>users</code> table and selects all data from the <code>userinfo</code> table (which reveals the information of every user). This works because the first part of the injected text (<code>a';</code>) completes the original statement.</p> - -<p>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 <a href="https://en.wikipedia.org/wiki/Escape_character">escape</a> all the characters in the user input that have a special meaning in SQL.</p> - -<div class="note"> -<p><strong>Note</strong>: The SQL statement treats the <strong>'</strong> character as the beginning and end of a string literal. By putting a backslash in front of this character (<strong>\'</strong>), we escape the symbol, and tell SQL to instead treat it as a character (just a part of the string).</p> -</div> - -<p>In the following statement, we escape the <strong>'</strong> character. The SQL will now interpret the name as the whole string in bold (which is a very odd name indeed, but not harmful).</p> - -<pre class="brush: sql notranslate">SELECT * FROM users WHERE name = '<strong>a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t'</strong>; - -</pre> - -<p>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.</p> - -<div class="note"> -<p><strong>Note</strong>: This section draws heavily on the information in <a href="https://en.wikipedia.org/wiki/SQL_injection">Wikipedia here</a>.</p> -</div> - -<h3 id="Cross-Site_Request_Forgery_CSRF">Cross-Site Request Forgery (CSRF)</h3> - -<p>CSRF attacks allow a malicious user to execute actions using the credentials of another user without that user’s knowledge or consent.</p> - -<p>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 <code>POST</code> 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 <em>Submit</em> button disguised as a link to a "get rich quick" site).</p> - -<p>If a user clicks the submit button, an HTTP <code>POST</code> 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.</p> - -<p>The result is that a<span style="line-height: 1.5;">ny user who clicks the <em>Submit</em> button while they are logged in to the trading site will make the transaction. John gets rich.</span></p> - -<div class="note"> -<p><strong>Note</strong>: 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.</p> -</div> - -<p>One way to prevent this type of attack is for the server to require that <code>POST</code> 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.</p> - -<p>Web frameworks often include such CSRF prevention mechanisms.</p> - -<h3 id="Other_threats">Other threats</h3> - -<p>Other common attacks/vulnerabilities include:</p> - -<ul> - <li><a href="https://www.owasp.org/index.php/Clickjacking">Clickjacking</a>. 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.</li> - <li><a href="/en-US/docs/Glossary/Distributed_Denial_of_Service">Denial of Service</a> (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).</li> - <li><a href="https://en.wikipedia.org/wiki/Directory_traversal_attack">Directory Traversal</a> (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, <code>../../</code>). The solution is to sanitize input before using it.</li> - <li><a href="https://en.wikipedia.org/wiki/File_inclusion_vulnerability">File Inclusion</a>. 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.</li> - <li><a href="https://www.owasp.org/index.php/Command_Injection">Command Injection</a>. 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.</li> -</ul> - -<p>For a comprehensive listing of website security threats see <a href="https://en.wikipedia.org/wiki/Category:Web_security_exploits">Category: Web security exploits</a> (Wikipedia) and <a href="https://www.owasp.org/index.php/Category:Attack">Category: Attack</a> (Open Web Application Security Project).</p> - -<h2 id="A_few_key_messages">A few key messages</h2> - -<p>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.</p> - -<div class="warning"> -<p>Important: The single most important lesson you can learn about website security is to <strong>never trust data from the browser</strong>. This includes, but is not limited to data in URL parameters of <code>GET</code> requests, <code>POST</code> requests, HTTP headers and cookies, and user-uploaded files. Always check and sanitize all incoming data. Always assume the worst.</p> -</div> - -<p>A number of other concrete steps you can take are:</p> - -<ul> - <li>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).</li> - <li>Configure your web server to use <a href="/en-US/docs/Glossary/https">HTTPS</a> and <a href="/en-US/docs/Web/Security/HTTP_strict_transport_security">HTTP Strict Transport Security</a> (HSTS). HTTPS encrypts data sent between your client and server. This ensures that login credentials, cookies, <code>POST</code> requests data and header information are not easily available to attackers.</li> - <li>Keep track of the most popular threats (the <a href="https://owasp.org/www-project-top-ten/">current OWASP list is here</a>) and address the most common vulnerabilities first.</li> - <li>Use <a href="https://owasp.org/www-community/Vulnerability_Scanning_Tools">vulnerability scanning tools</a> to perform automated security testing on your site. Later on, your very successful website may also find bugs by offering a bug bounty <a href="https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/">like Mozilla does here</a>.</li> - <li>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.</li> -</ul> - -<p>Web frameworks can help mitigate many of the more common vulnerabilities.</p> - -<h2 id="Summary">Summary</h2> - -<p>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.</p> - -<p>With this article, you've come to the end of <a href="/en-US/docs/Learn/Server-side/First_steps">this module</a>, 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.</p> - -<p>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/Server-side/First_steps/Introduction">Introduction to the server side</a></li> - <li><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a></li> - <li><a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">Server-side web frameworks</a></li> - <li><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a></li> -</ul> 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 ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">The <strong><em>Dynamic Websites </em></strong>–<em><strong> Server-side programming</strong></em> 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.</p> - -<p>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 <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>), and then dynamically update the data displayed inside those templates when needed, such as when you want to view a different product on Amazon.</p> - -<p>In the modern world of web development, learning about server-side development is highly recommended.</p> - -<h2 id="Learning_pathway">Learning pathway</h2> - -<p>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.</p> - -<p>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".</p> - -<p>You will need to understand "how the web works". We recommend that you first read the following topics:</p> - -<ul> - <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server</a></li> - <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></li> - <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></li> -</ul> - -<p>With that basic understanding, you'll be ready to work your way through the modules in this section. </p> - -<h2 id="Modules">Modules</h2> - -<p>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. </p> - -<dl> - <dt><a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt> - <dd>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.</dd> -</dl> - -<h2 id="See_also">See also</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Server-side/Node_server_without_framework">Node server without framework</a></dt> - <dd>This article provides a simple static file server built with pure Node.js, for those of you not wanting to use a framework.</dd> -</dl> 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 ---- -<div class="summary">আপনার ওয়েব ডকুমেন্টেশনের ১০ বছরপূর্তি উদযাপন করুন।</div> - -<div class="column-container"> -<div class="column-8"> -<h2 id="MDN_এর_ইতিহাস">MDN এর ইতিহাস</h2> - -<p>২০০৫ এর শুরুর দিকে কিছু আদর্শবাদী মানুষ সকল ওয়েব ডেভেলপারদের জন্য নতুন, উন্মুক্ত এবং কমিউনিটির দ্বারা তৈরি অনলাইন রিসোর্স তৈরির কাজ শুরু করেন। তাদের অসাধারন কিন্তু 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.</p> - -<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/History_of_MDN">Learn more <span class="offscreen">about the history</span></a></p> - -<h2 id="MDN_এ_অবদান_রাখুন">MDN এ অবদান রাখুন </h2> - -<p>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.</p> - -<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Learn more <span class="offscreen">about contributing</span></a></p> -</div> - -<div class="column-4"> -<div class="quote"> -<blockquote>যখন আমি 'কেমন করে' এর পরিবর্তে 'কেন' এটা জানতে চাই তখন MDN হল উপযুক্ত স্থান </blockquote> -<span class="attribution">— <a href="https://twitter.com/codepo8/status/621009648875868160">Christian Heilmann</a></span></div> -</div> -</div> - -<h2 id="Subnav">Subnav</h2> - -<ol> - <li><a href="/en-US/docs/MDN_at_ten/">MDN at 10</a></li> - <li><a href="/en-US/docs/MDN_at_ten/History_of_MDN">The history of MDN</a></li> - <li><a href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Contributing to MDN</a></li> -</ol> 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 ---- -<div>{{MDNSidebar}}</div><h2 id="মজিলা_ডেভেলপার_নেটওয়ার্ক_কি">মজিলা ডেভেলপার নেটওয়ার্ক কি ?</h2> - -<p>আমরা একটি মুক্ত ডেভেলপার পরিবার, যারা ওয়েব এর উত্তরোত্তর উন্নতির জন্য রিসোর্স তৈরি করছি। আমরা ব্র্যান্ড, ব্রাউজার অথবা প্ল্যাটফর্মে সীমাবদ্ধ নই। আমরা সকল ব্র্যান্ড, ব্রাউজার এবং প্ল্যাটফর্মের জন্য কাজ করি। আমাদের এখানে যে কেউ অবদান রাখতে পারে। এবং আপনাদের অবদান আমাদের আরও শক্তিশালী হতে সহায়তা করে। আমরা একসাথে ওয়েবে সৃষ্টিশীলতা আনা এবং বৃহৎ স্বার্থে কাজ চালিয়ে যেতে পারি। আপনাদেরকে সাথে নিয়েই আমরা যাত্রা শুরু করেছি, এবং থাকব।</p> - -<p><span>MDN (ডকুমেন্ট, ডেমো, এবং সাইট) ডেভেলপারদের একটি মুক্ত পরিবারের মাধ্যমে তৈরি করা হয়েছে। অনুগ্রহ করে আমাদের সাথে যুক্ত হোন!</span></p> - -<h2 id="যুক্ত_হবার_৩_টি_সহজ_ধাপ"><span> যুক্ত হবার ৩ টি সহজ ধাপ</span></h2> - -<h3 id="১ম_ধাপঃ_অ্যাকাউন্ট_তৈরি">১ম ধাপঃ অ্যাকাউন্ট তৈরি</h3> - -<p>মজিলা ডেভেলপার নেটওয়ার্ক (সংক্ষেপে MDN) এ আপনার অবদান শুরু করার জন্য আপনাকে অ্যাকাউন্ট তৈরি করতে হবে। অ্যাকাউন্ট কিভাবে তৈরি করবেন, এ বিষয়ে জানার জন্য <a href="/bn-BD/docs/MDN/Contribute/Howto/Create_an_MDN_account">কিভাবে অ্যাকাউন্ট তৈরি করতে হয়</a> এই পাতাটি দেখুন।</p> - -<h3 id="২য়_ধাপঃ_কাজ_নির্বাচন_করা">২য় ধাপঃ কাজ নির্বাচন করা</h3> - -<p>এখন যেহেতু আপনি লগ-ইন করে ফেলেছেন, নিচে উল্লেখিত তালিকায় বিভিন্ন ধরনের কাজের বিবরণ পড়ুন এবং সিদ্ধান্ত নিন যে কোনটি আপনার কাছে বেশি আকর্ষণীয় মনে হয়। আপনি আপনার অবদান রাখা শুরু করতে যেকোনো কাজ নির্বাচন করতে পারেন।</p> - -<h3 id="৩য়_ধাপঃ_কাজ_করা">৩য় ধাপঃ কাজ করা</h3> - -<p>একবার যখন আপনি নির্ধারণ করে ফেলবেন যে, আপনি কি ধরনের কাজ করতে চান, তারপর একটি নির্দিষ্ট পাতা, কোডের উদাহরন ইত্যাদি কাজ করার জন্য বেছে নিন এবং করে ফেলুন!</p> - -<p>এটা একদম নিখুঁতভাবে করার জন্য চিন্তা করার প্রয়োজন নেই; অন্যান্য MDN অবদানকারীরা আপনার করা ভুলগুলো শোধরানোর জন্য এখানে রয়েছে। যদি আপনি "আসলেই" কিছু করার আগে গবেষণা করতে চান, তাহলে আপনি <a href="/en-US/docs/Sandbox">Sandbox</a> পাতাটি সম্পাদনা করতে পারেন। চলার পথে স্বভাবতই আপনার মনে বিভিন্ন প্রশ্নের উদয় হবে। আপনার সব প্রশ্নের উত্তর পাওয়ার জন্য <a href="/bn-BD/docs/Project:MDN/অবদান/দলে_যোগদান">এমডিএন দলে যোগদান</a> পাতাটি দেখতে পারেন। এখানে আমাদের মেইলিং লিস্ট এবং চ্যাট চ্যানেলের তথ্য রয়েছে।</p> - -<p>যখন আপনার কাজ শেষ হয়ে যাবে, নির্দ্বিধায় আরেকটি কাজ নির্বাচন করে কাজ করুন, অথবা নিচে <a href="#Other_things_you_can_do_on_MDN">MDN এ আরও যা যা করতে পারেন</a> অংশটি দেখুন।</p> - -<h2 id="সম্ভাব্য_কাজের_ধরন">সম্ভাব্য কাজের ধরন</h2> - -<p>আপনার দক্ষতা এবং আগ্রহের উপর নির্ভর করে আপনি বিভিন্ন উপায়ে MDN এ অবদান রাখতে পারেন। এমনকি কিছু কাজ কঠিন হতে পারে, কিন্তু আমাদের অনেক সহজ/সাধারণ কাজ রয়েছে। এরমধ্যে অনেকগুলো করতে মাত্র পাঁচ মিনিট (এর থেকেও কম!) সময় লাগে। কাজ এবং তার সারসংক্ষেপের সাথে আপনি প্রত্যেক ধরনের কাজের জন্য আনুমানিক কতটা সময় লাগতে পারে, তা খুঁজে পাবেন।</p> - -<h3 id="অপশন_১_আমি_শব্দ_পছন্দ_করি">অপশন ১: আমি শব্দ পছন্দ করি</h3> - -<p>আপনি আমাদের বর্তমান ডকুমেন্ট সমূহ পর্যালোচনা, সম্পাদনা বা সঠিক ট্যাগ বসাতে সাহায্য করতে পারেন।</p> - -<ul> - <li><a href="/en-US/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page">একটি পাতার জন্য সারাংশ বানান</a> (৫-১৫ মিনিট)</li> - <li><a href="/en-US/docs/Project:MDN/Contributing/How_to/Do_an_editorial_review">সম্পাদকীয় পর্যালোচনা </a>(৫–৩০ মিনিট)</li> -</ul> - -<div class="note"><strong>লক্ষ্য করুনঃ</strong> যদি আপনি নিবন্ধ পর্যালোচনা অথবা নতুন নিবন্ধ লেখার কাজ করেন, তবে আমরা আপনাকে <a href="/en-US/docs/Project:MDN/Style_guide">স্টাইল গাইড</a> পর্যালোচনার জন্য অনুরোধ করবো। এতে করে আপনার নিবন্ধ গুলো দৃঢ় হবে।</div> - -<h3 id="অপশন_২_আমি_কোড_পছন্দ_করি">অপশন ২: আমি কোড পছন্দ করি</h3> - -<p>আমাদের আরও অনেক কোড স্যাম্পল প্রয়োজন! আপনি চাইলে আমাদের সাইটের প্ল্যাটফর্ম, <a href="https://developer.mozilla.org/en-US/docs/Project:MDN/Kuma">Kuma</a> ডেভেলপ করতেও সাহায্য করতে পারেন!</p> - -<ul> - <li><a href="/bn-BD/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">কোড স্যাম্পল "লাইভ (live)" করার জন্য রুপান্তর</a> (৩০ মিনিট)</li> - <li><a href="https://kuma.readthedocs.org/en/latest/installation-vagrant.html">Kuma পরীক্ষা করার পরিবেশ তৈরি করা</a> (১ ঘণ্টা)</li> - <li><a href="https://github.com/mozilla/kuma#readme">Kuma'র কোডবেসে আপনার কোড প্যাচ পাঠান</a> (১ ঘণ্টা)</li> - <li><a href="https://developer.mozilla.org/en-US/demos/submit">নতুন একটি ডেমো জমা </a>(১ ঘণ্টা)</li> -</ul> - -<h3 id="অপশন_৩_আমি_শব্দ_এবং_কোড_উভয়ই_পছন্দ_করি">অপশন ৩: আমি শব্দ এবং কোড উভয়ই পছন্দ করি</h3> - -<p>আমাদের এমন কিছু কাজ রয়েছে, যাতে প্রযুক্তি ও ভাষাগত উভয় দক্ষতারই প্রয়োজন হয়। যেমনঃ নতুন একটি নিবন্ধ লেখা, প্রযুক্তিগত নির্ভুলতা যাচাইয়ের জন্য পর্যালোচনা অথবা ডকুমেন্ট অভিযোজিত করা।</p> - -<ul> - <li><a href="/en-US/docs/Project:MDN/Contributing/How_to/Tag_JavaScript_pages">জাভাস্ক্রিপ্ট পেজ সমূহ ট্যাগ করা</a> (৫ মিনিট)</li> - <li><a href="/en-US/docs/MDN/Promote">আপনার ওয়েবসাইটে MDN এর প্রচার করা</a> (৫ মিনিট)</li> - <li><a href="/en-US/docs/Project:MDN/Contributing/How_to/Do_a_technical_review">টেকনিক্যাল অনুমোদন</a> (৩০ মিনিট)</li> - <li><a href="/en-US/docs/Project:MDN/Contributing/How_to/Update_API_page_layout">API লেআউট পেজ হালনাগাদ </a> (৩০ মিনিট)</li> - <li><a href="/en-US/docs/MDN/Contribute/Creating_and_editing_pages#Creating_a_new_page">আপনার জানা বিষয়ে নতুন একটি নিবন্ধ লিখুন </a> (১ ঘণ্টা বা তার বেশী )</li> -</ul> - -<h3 id="অপশন_৪_আমি_আমার_ভাষায়_MDN_চাই">অপশন ৪: আমি আমার ভাষায় MDN চাই</h3> - -<p>MDN এ করা সমস্ত লোকালাইজেশন এবং অনুবাদের কাজ আমাদের দুর্দান্ত স্বেচ্ছাসেবক পরিবার করে থাকে।</p> - -<ul> - <li><a href="/en-US/docs/MDN/Contribute/Localize/Translating_pages">পৃষ্ঠা সমূহ অনুবাদ করা</a> (২ ঘণ্টা)</li> - <li><a href="/en-US/docs/Project:MDN/Localizing/Localization_projects">লোকালাইজেশন প্রজেক্ট সমূহ</a> পাতায় তালিকাভুক্ত অন্যান্য লোকালাইজারদের সাথে যুক্ত হউন (৩০ মিনিট)</li> -</ul> - -<h3 id="অপশন_৫_আমি_কিছু_ভুল_তথ্য_পেয়েছি_কিন্তু_আমি_জানিনা_এটা_কিভাবে_সমাধান_করতে_হবে">অপশন ৫: আমি কিছু ভুল তথ্য পেয়েছি, কিন্তু আমি জানিনা এটা কিভাবে সমাধান করতে হবে</h3> - -<p><a class="external" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Developer%20Network">ডকুমেন্টেশন বাগ ফাইল</a> করে আপনি সমস্যার কথা জানাতে পারেন। (৫ মিনিট)</p> - -<p>এই ফিল্ডের মান গুলো ব্যবহার করুনঃ</p> - -<table class="standard-table"> - <tbody> - <tr> - <td><strong>Bugzilla field</strong></td> - <td><strong>Value</strong></td> - </tr> - <tr> - <td><code>product</code></td> - <td><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Developer+Documentation">Developer Documentation</a></td> - </tr> - <tr> - <td><code>component</code></td> - <td>[প্রাসঙ্গিক একটি জায়গা নির্বাচন করুন, অথবা আপনি যদি নিশ্চিত না হন বা সঠিকটি খুঁজে না পান, তাহলে "General" নির্বাচন করুন]</td> - </tr> - <tr> - <td><code>URL</code></td> - <td>যেই পেজে আপনি সমস্যাটির সম্মুখীন হয়েছেন।</td> - </tr> - <tr> - <td><code>Description</code></td> - <td>সমস্যাটি সম্পর্কে আপনি যতটা জানেন তা লিখতে পারেন। অথবা সমস্যাটি বিস্তারিত বর্ণনা করতে পারেন এবং কোথায় এ সম্পর্কে বিস্তারিত তথ্য পাওয়া যাবে ইত্যাদি লিখতে পারেন। এর মধ্যে বিভিন্ন মানুষকেও অন্তর্ভুক্ত করতে পারেন ("talk to so-and-so") এবং বিভিন্ন ওয়েব লিঙ্কও দিতে পারেন।</td> - </tr> - </tbody> -</table> - -<h2 id="MDN_এ_আপনি_আরও_যা_যা_করতে_পারেন">MDN এ আপনি আরও যা যা করতে পারেন</h2> - -<ul> - <li><a href="/bn-BD/docs/Project:en/Project:Community">MDN পরিবারে যুক্ত হউন</a>।</li> - <li><a href="/en-US/profile">আপনার প্রোফাইলে তথ্যপূর্ণ করুন</a> যাতে অন্যেরা আপনার সম্পর্কে আরও জানতে পারে।</li> - <li><a href="/bn-BD/docs/MDN/Contribute">MDN এ অবদান রাখা</a> সম্পর্কে আরও জানুন। - <ul> - <li><strong>বাংলায় অনুবাদ </strong>শুরু করবেন যেভাবে - <a href="/bn-BD/docs/Project:MDN/%E0%A6%85%E0%A6%AC%E0%A6%A6%E0%A6%BE%E0%A6%A8/mozillabd-l10n-team">স্ক্রিনশট ও গাইড</a></li> - </ul> - </li> -</ul> 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 ---- -<div>{{MDNSidebar}}</div><p class="summary">MDN এর একটি "live sample" ব্যবস্থা আছে, যেখানে একটি পাতা প্রদর্শনের জন্য সরাসরি কোডের উদাহরণটিকেই ব্যবহার করা হয়। তবে এখনো এমন কিছু নিবন্ধ রয়েছে, যেগুলোতে শুধু কোড দেখানো হয়েছে, কিন্তু সেগুলো ব্যবহার করা হয়নি। এগুলো ব্যবহারোপযোগী করতে রুপান্তর করা প্রয়োজন।</p> -<table class="full-width-table"> - <tbody> - <tr> - <td><strong>এটা কোথায় করতে হবে?</strong></td> - <td>যেসব নিবন্ধে <a href="/en-US/docs/tag/NeedsLiveSample">NeedsLiveSample</a> ট্যাগ রয়েছে।</td> - </tr> - <tr> - <td><strong>এই কাজটি করার জন্য আমার কি জানা প্রয়োজন?</strong></td> - <td> - <ul> - <li>কোডের উদাহরনের উপর নির্ভর করে HTML, CSS এবং/অথবা JavaScript এর জ্ঞান থাকতে হবে।</li> - <li>নিবন্ধের মধ্যে <a href="/en-US/docs/Project:Introduction_to_KumaScript">KumaScript</a> ম্যাক্রো সমূহ ব্যবহারের সক্ষমতা।</li> - </ul> - </td> - </tr> - <tr> - <td><strong>কাজটি করার জন্য কি কি ধাপ অনুসরণ করতে হবে ?</strong></td> - <td> - <p>কিভাবে লাইভ স্যাম্পল তৈরি করতে হবে সহ, লাইভ স্যাম্পল সিস্টেম সম্পর্কে সম্পূর্ণ ধারনা পেতে <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide/Live_samples">লাইভ স্যাম্পল সিস্টেম ব্যবহার করা</a> নিবন্ধটি দেখুন।</p> - <ol> - <li><a href="/en-US/docs/tag/NeedsLiveSample">NeedsLiveSample</a> পাতায় তালিকাভুক্ত নিবন্ধ গুলো থেকে যেকোনো একটি নিবন্ধ নির্বাচন করুন, যেটাতে কাজ করতে আপনি স্বচ্ছন্দ বোধ করবেন।</li> - <li>কোডের উদাহরণটিকে "live" হওয়ার জন্য রুপান্তর করুন।</li> - <li>উদাহরণটির আউটপুট দেখানোর জন্য পূর্বে যে কোড বা ইমেজ ব্যবহার করা হয়েছিল, তা অপসারণ করুন।</li> - </ol> - <p> </p> - </td> - </tr> - </tbody> -</table> -<p> </p> 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 ---- -<div>{{MDNSidebar}}</div><p>মোজিলা ডেভেলপার নেটওয়ার্ক এর মৌলিক দুটি কাজ যা প্রায় সব অবদানকারী করে থাকে, তা হচ্ছে বর্তমান পৃষ্ঠাগুলো সম্পাদনা/সমৃদ্ধ করা এবং নতুন পৃষ্ঠা তৈরি করা। এই নিবন্ধটি সম্পাদনা ও নতুন পৃষ্ঠা তৈরি করার একেবারে মৌলিক কিছু কৌশল নিয়ে লেখা।</p> -<h2 id="বর্তমান_পৃষ্ঠাগুলো_সমৃদ্ধকরণ">বর্তমান পৃষ্ঠাগুলো সমৃদ্ধকরণ</h2> -<p>সম্পাদনা ও সমৃদ্ধ করা সহজ। পাতার উপরে শিরোনামের ডান পাশে থাকা নীল "Edit" বাটনে ক্লিক করলেই সম্পাদনার পাতা চলে আসবে। সম্পাদনার পাতাটিতে আপনি বিভিন্ন রকমের ফরম্যাটিং অপশন পাবেন। সেই অপশন গুলো ব্যবহার করে আপনি পাতায় থাকা সরাসরি তথ্য যোগ করা ও মোছার কাজ করতে পারবেন। অনুচ্ছেদ যুক্ত করা, লেখা মোছা, শিরোনাম যুক্ত করা সহ লেখা ও সম্পাদনা সংশ্লিষ্ট আরও মৌলিক কিছু ফাংশন এই পৃষ্ঠায় পাবেন।</p> -<h3 id="পরিবর্তন_নিরীক্ষণ">পরিবর্তন নিরীক্ষণ</h3> -<p>আপনার করা পরিবর্তন সমূহ দেখতে কেমন লাগবে, তা বোঝার জন্য পৃষ্ঠার উপরে ডান পাশে নীল রঙের "Preview changes" বাটনটি ক্লিক করুন। এরপর একটি নতুন/আলাদা ট্যাবে নিরীক্ষণ পৃষ্ঠা আসবে, যেখানে আপনার করা পরিবর্তন গুলো সহ পৃষ্ঠাটি (যে পৃষ্ঠাটি সম্পাদনা করছেন) দেখতে কেমন হবে, তা দেখতে পাবেন। যতবার আপনি এই বাটন চাপবেন, ততবারই এটি আপনার প্রিভিউ পৃষ্ঠা সর্বশেষ পরিবর্তন সহ পুনরায় লোড করবে। তবে মনে রাখবেন, প্রিভিউ পৃষ্ঠা আপনার পরিবর্তন গুলোকে আপাতত হিসেবে দেখাবে; সংরক্ষণ করবে না। তাই কখনো প্রিভিউ পাতা থেকে সেভ না করে বের হবেন না। প্রিভিউ পাতা বা এডিট পাতা থেকে চলে যাওয়ার আগে অবশ্যই সর্বশেষ পরিবর্তন সংরক্ষনের জন্য <strong>Save Changes</strong> চাপতে হবে।</p> -<h3 id="পরিমার্জনসংশোধন_মন্তব্য">পরিমার্জন/সংশোধন মন্তব্য</h3> -<p>সংরক্ষণপূর্ব নিরীক্ষণ বা <b>Preview</b> দেখার পর আপনি আপনার করা পরিবর্তনগুলো সংরক্ষণ করবেন। সংরক্ষণ করার আগে পেজের নিচে থাকা মন্তব্যের জায়গায় আপনি কেন সম্পাদনা করেছেন, তা লিখুন। আপনার মন্তব্য থেকে অন্যান্য অবদানকারীরা আপনার সম্পাদনা সম্পর্কে সহজে ধারনা পাবে। মনেকরুন, আপনি হয়তো নতুন কোনো অনুচ্ছেদ যুক্ত করেছেন, বা<span style="line-height: 1.572;"> কোন প্রবন্ধের ভাবকে আরও সহজে বোঝার জন্য কয়েকটি শব্দ পরিবর্তন করেছেন, অথবা অপ্রয়োজনীয় কিছু তথ্য মুছে দিয়েছেন। এরকম পরিবর্তন কেন করা প্রয়োজন, এ সম্পর্কে আপনি অবশ্যই মন্তব্য করবেন।</span></p> -<h3 id="ট্যাগ">ট্যাগ</h3> -<p>একটি পৃষ্ঠার কনটেন্ট সহজে বুঝতে ও খুঁজে পেতে ট্যাগ ব্যবহার করা হয়। আপনি চাইলে ট্যাগ যুক্ত বা অপসারণ করতে পারেন। আর এই ট্যাগ যুক্ত বা অপসারনের প্রক্রিয়াটিও যেহেতু সংশোধনের পর্যায়ে পড়ে, তাই এই কাজের সময়েও মন্তব্য করে আপনার কাজের নিরপেক্ষতা ও প্রয়োজনীয়তার স্বপক্ষে যুক্তি দেখাবেন।</p> -<h3 id="মতামত_প্রয়োজন">মতামত প্রয়োজন?</h3> -<p>যদি আপনি চান যে একজন দক্ষ বা অভিজ্ঞ অবদানকারী আপনার করা সম্পাদনা-সংশোধন দেখুক এবং মতামত জানান, তাহলে আপনি একটি টেকনিক্যাল (কোড, এপিআই অথবা প্রযুক্তি সম্বন্ধে) রিভিউ-এর জন্য আবেদন করতে পারেন। অথবা একটি সম্পাদকীয় রিভিউ (প্রবন্ধ, ব্যাকরণ এবং কনটেন্ট) অথবা একটি টেম্পলেট রিভিউ (কুমাস্ক্রিপ্ট কোডের জন্য) এর জন্যও আবেদন করতে পারেন। তবে এজন্য আপনাকে উক্ত পাতাটি সংরক্ষনের পূর্বে বক্সটি টিক দিয়ে রাখতে হবে।</p> -<h3 id="ফাইল_সংযুক্তি">ফাইল সংযুক্তি</h3> -<p>যদি আপনি কোন ফাইল সংযুক্ত করতে চান, বা আপনার নিবন্ধটি সহজে বোঝার জন্য কোন ছবি সংযুক্ত করতে চান, তাহলে সেটা পৃষ্ঠার একদম শেষের দিকে করতে পারেন।</p> -<h3 id="সংরক্ষণ_বাতিল_অথবা_সম্পাদনা_চালিয়ে_যাওয়া">সংরক্ষণ, বাতিল অথবা সম্পাদনা চালিয়ে যাওয়া</h3> -<p>যখন আপনার সম্পাদনা শেষ হয়ে যাবে এবং আপনি আপনার প্রিভিউ দেখে সন্তুষ্ট হবেন, তখন আপনি আপনার কাজ এবং মন্তব্য পেজের উপরে থাকা সবুজ "Save changes" লেখা বোতাম চেপে সংরক্ষণ করতে পারেন। কিন্তু পরক্ষনে যদি আবার আপনার মনে হয় যে কাজটা ঠিক হয়নি, তাহলে আপনি পেজের উপরে থাকা লাল রঙের "Discard changes" লেখা বোতাম চেপে আগের করা কাজগুলো বাতিল করতে পারেন।</p> -<h2 id="নতুন_পৃষ্ঠা_তৈরি_করা">নতুন পৃষ্ঠা তৈরি করা</h2> -<p>নতুন সাব পেজ বোতাম; লিঙ্ক ফলো করা; পেজ নকল করা।</p> -<p><a href="/en-US/docs/Project:MDN/Contributing/Page_types" title="/en-US/docs/Project:MDN/Contributing/Page_types">পেজ টাইপ</a> নিবন্ধের লিঙ্ক।</p> 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 ---- -<div>{{MDNSidebar}}</div><p>These articles provide step-by-step guides to accomplishing specific goals when contributing to MDN.</p> -<p>{{LandingPageListSubpages}}</p> 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 ---- -<div>{{MDNSidebar}}</div><p>স্বাগতম! এই পেইজ দেখার মাধ্যমে MDN এর অবদানকারী হওয়ার পথে আপনি আপনার প্রথম পদক্ষেপ নিলেন। স্টাইল গাইড, আমাদের এডিটর এবং টুলস ব্যবহার করার গাইড এবং আরও অনেক কিছু সহ MDN এ অবদান রাখার সকল ক্ষেত্র সম্পর্কে এই গাইড এ লেখা আছে।</p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 id="অবদানকারীদের_জন্য_গাইড">অবদানকারীদের জন্য গাইড</h2> - -<dl> - <dt><a href="/bn-BD/docs/MDN/Quick_start"> শুরু করা</a></dt> - <dd>মজিলাতে আপনার প্রথম অবদান রাখতে ও সেট আপ হতে সাহায্যকারী একটি কুইক স্টার্ট গাইড এটি।</dd> - <dt><a href="/bn-BD/docs/MDN/Contribute/Style_guide">কনটেন্ট এবং স্টাইল গাইড</a></dt> - <dt><span style="font-weight: normal; line-height: 1.5;"> MDN এর কনটেন্ট এবং স্টাইল গাইড লেখার স্টাইল, পেইজ লে-আউট এবং কনটেন্ট এর স্টাইল সম্পর্কে বিশদ তথ্য দেয়, যাতে করে আপনি যেই কনটেন্টটি লিখবেন তা MDN এর অন্যান্য কনটেন্ট এর সাথে খাপ খেয়ে যায়।</span></dt> - <dd> </dd> - <dt><a href="/bn-BD/docs/MDN/Contribute/Editor"> এডিটর গাইড</a></dt> - <dd>MDN এর এডিটর ব্যবহার করার জন্য একটি পূর্ণাঙ্গ গাইড। </dd> - <dt><a href="/bn-BD/docs/MDN/Contribute/Conventions">Terminology and conventions</a></dt> - <dd>Our terminology and conventions guide provides information you can use to ensure that you use the correct terminology to describe things.</dd> - <dt><a href="/bn-BD/docs/MDN/Contribute/Community">Working with the MDN community</a></dt> - <dd>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.</dd> - <dt><a href="/bn-BD/docs/MDN/Contribute/FAQ">Frequently asked questions</a></dt> - <dd>Tips and answers to the most common questions about contributing to MDN.</dd> -</dl> - -<dl> - <dt><a href="/bn-BD/docs/MDN/Contribute/Kuma">Contributing to Kuma</a></dt> - <dd>A guide to contributing to the Kuma project. Kuma is the platform that powers the MDN Web site.</dd> -</dl> -</div> - -<div class="section"> -<h2 id="How_to...">How to...</h2> - -<p>Our <a href="/bn-BD/docs/MDN/Contribute/Howto">how-to guides</a> provide step-by-step instructions to help you accomplish specific tasks when contributing to MDN.</p> - -<dl> - <dt><a href="/bn-BD/docs/MDN/Contribute/Howto/Document_a_CSS_property">How to document a CSS property</a></dt> - <dd>A guide to writing documentation of CSS properties. All CSS property documents should match the style and layout described in this article.</dd> - <dt>How to document an HTML element</dt> - <dd>This guide to documenting HTML elements will ensure that the documents you write match others on MDN.</dd> - <dt><a href="/bn-BD/docs/MDN/Contribute/Howto/Tag">How to properly tag pages</a></dt> - <dd>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.</dd> - <dt><a href="/bn-BD/docs/MDN/Contribute/Howto/Interpret_specifications">How to interpret specifications</a></dt> - <dd>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.</dd> -</dl> - -<h2 id="Localization">Localization</h2> - -<dl> - <dt><a href="/bn-BD/docs/MDN/Contribute/Localize/Tour">Localization guided tour</a></dt> - <dd>This guided tour will teach you how to localize content on MDN.</dd> - <dt><a href="/bn-BD/docs/MDN/Contribute/Localize/Guide">Localization guide</a></dt> - <dd>This guide provides details about the localization process for MDN content.</dd> - <dt><a href="/bn-BD/docs/MDN/Contribute/Localize/Localization_projects">Localization projects</a></dt> - <dd>Find the localization project for your language—or, if there isn't one, learn how to start a new one!</dd> -</dl> -</div> -</div> - -<p> </p> 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 ---- -<div>{{MDNSidebar}}</div><p><span class="seoSummary">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.</span> By following these guides, you can ensure that the material you produce is clean and easy to use.</p> -<p>{{LandingPageListSubpages}}</p> 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 ---- -<div>{{MDNSidebar}}</div> - -<p><span class="seoSummary">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.</span> 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.</p> - -<p>If you're looking for specifics of how a given type of page should be structured, see the <a href="/en-US/docs/MDN/Contribute/Content/Layout">MDN page layout guide</a>.</p> - -<p>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.</p> - -<p>For style standards that apply to content written for sites other than MDN, refer to the <a href="http://www.mozilla.org/en-US/styleguide/" title="http://www.mozilla.org/en-US/styleguide/">One Mozilla style guide</a>.</p> - -<h2 id="Page_name_and_heading_capitalization" name="Page_name_and_heading_capitalization">Basics</h2> - -<h3 id="Page_titles">Page titles</h3> - -<p>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 "<em><locale>/docs/</em>".</p> - -<h4 id="Title_and_heading_capitalization">Title and heading capitalization</h4> - -<p>Page titles and section headings should use sentence-style capitalization (only capitalize the first word and proper nouns) rather than headline-style capitalization:</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: "একটি নতুন পদ্ধতি তৈরি করা হয় জাভাস্ক্রিপ্ট বসানোর জন্য"</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: "A New Method for Creating JavaScript Rollovers"</li> -</ul> - -<p>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.</p> - -<h4 id="Choosing_titles_and_slugs">Choosing titles and slugs</h4> - -<p>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.</p> - -<p>Page titles, on the other hand, may be as long as you like, within reason, and they should be descriptive.</p> - -<h4 id="Creating_new_subtrees">Creating new subtrees</h4> - -<p>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.</p> - -<p>For example, consider the <a href="/en-US/docs/Web/JavaScript">JavaScript</a> guide, which is structured like this:</p> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Guide" title="JavaScript/Guide">JavaScript/Guide</a> - Main table-of-contents page</li> - <li><a href="/en-US/docs/Web/JavaScript/Guide/JavaScript_Overview" title="JavaScript/Guide/JavaScript_Overview">JavaScript/Guide/JavaScript Overview</a></li> - <li><a href="/en-US/docs/JavaScript/Guide/Functions" title="JavaScript/Guide/Functions">JavaScript/Guide/Functions</a></li> - <li><a href="/en-US/docs/JavaScript/Guide/Details_of_the_Object_Model" title="JavaScript/Guide/Details_of_the_Object_Model">JavaScript/Guide/Details of the Object Model</a></li> -</ul> - -<p>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.</p> - -<h3 id="Sections.2C_Paragraphs.2C_Newlines" name="Sections.2C_Paragraphs.2C_Newlines">Sections, paragraphs, and newlines</h3> - -<p>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.</p> - -<p>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.</p> - -<h3 id="Text_Formatting" name="Text_Formatting">Text formatting and styles</h3> - -<p>Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.</p> - -<div class="note"><strong>Note: </strong>The "Note" style is used to call out important notes, like this one.</div> - -<div class="warning"><strong>Warning:</strong> Similarly, the "Warning" style creates warning boxes like this.</div> - -<p>Unless specifically instructed to do so, <strong>do not</strong> use the HTML <code>style</code> attribute to manually style content. If you can't do it using a predefined class, drop into {{IRCLink("mdn")}} and ask for help.</p> - -<h3 id="Code_sample_style_and_formatting">Code sample style and formatting</h3> - -<h4 id="Tabs_and_line_breaks">Tabs and line breaks</h4> - -<p>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:</p> - -<pre class="brush: js notranslate">if (condition) { - /* handle the condition */ -} else { - /* handle the "else" case */ -} -</pre> - -<p>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:</p> - -<pre class="brush: js notranslate">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); -</pre> - -<h4 id="Inline_code_formatting">Inline code formatting</h4> - -<p>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 <code class="js plain">frenchText()</code> function".</p> - -<p>Method names should be followed by a pair of parentheses: <code>doSomethingUseful()</code>. This helps to differentiate methods from other code terms.</p> - -<h4 id="Syntax_highlighting">Syntax highlighting</h4> - -<p><img alt='Screenshot of the "syntax highlighting" menu.' src="https://mdn.mozillademos.org/files/7857/syntax-highlighting-menu.png" style="border-style: solid; border-width: 1px; float: right; height: 315px; margin: 2px 4px; width: 183px;">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:</p> - -<div class="line number2 index1 alt1"> -<pre class="brush: js notranslate">for (var i = 0, j = 9; i <= 9; i++, j--) - document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);</pre> -</div> - -<p>If no appropriate transformation is available, use the <code>pre</code> tag without specifying a language ("No Highlight" in the language menu).</p> - -<pre class="notranslate">x = 42;</pre> - -<h4 id="Styling_HTML_element_references">Styling HTML element references</h4> - -<p>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.</p> - -<dl> - <dt>Element names</dt> - <dd>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, <strong>enclose the name in angle brackets</strong> and use "Code (inline)" style (e.g., <code><title></code>).</dd> - <dt>Attribute names</dt> - <dd>Use <strong>bold face</strong>.</dd> - <dt>Attribute definitions</dt> - <dd>Use the {{TemplateLink("htmlattrdef")}} macro (e.g., <span class="nowiki">\{{htmlattrdef("type")}}</span>) for the definition term, so that it can be linked to from other pages, then use the {{TemplateLink("htmlattrxref")}} macro (e.g., <span class="nowiki">\{{htmlattrxref("attr","element")}}</span>) to reference attribute definitions.</dd> - <dt>Attribute values</dt> - <dd>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 <strong>type</strong> attribute of an <code><input></code> element is set to <code>email</code> or <code>tel</code> ...</dd> - <dt>Labeling attributes</dt> - <dd>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.</dd> -</dl> - -<h3 id="Latin_abbreviations" name="Latin_abbreviations">Latin abbreviations</h3> - -<h4 id="In_notes_and_parentheses" name="In_notes_and_parentheses">In notes and parentheses</h4> - -<ul> - <li>Common Latin abbreviations (etc., i.e., e.g.) may be used in parenthetical expressions and in notes. Use periods in these abbreviations. - <ul> - <li><span class="correct"><strong>Correct</strong></span>: Web browsers (e.g. Firefox) can be used ...</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, e.g. Firefox, can be used ...</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, (eg: Firefox) can be used ...</li> - </ul> - </li> -</ul> - -<h4 id="In_running_text" name="In_running_text">In running text</h4> - -<ul> - <li>In regular text (i.e. text outside of notes or parentheses), use the English equivalent of the abbreviation. - <ul> - <li><span class="correct"><strong>Correct</strong></span>: ... web browsers, and so on.</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: ... web browsers, etc.</li> - <li><span class="correct"><strong>Correct</strong></span>: Web browsers such as Firefox can be used ...</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li> - </ul> - </li> -</ul> - -<h4 id="Meanings_and_English_equivalents_of_Latin_abbreviations" name="Meanings_and_English_equivalents_of_Latin_abbreviations">Meanings and English equivalents of Latin abbreviations</h4> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Abbrev</th> - <th>Latin</th> - <th>English</th> - </tr> - <tr> - <td>cf.</td> - <td><em>confer</em></td> - <td>compare</td> - </tr> - <tr> - <td>e.g.</td> - <td><em>exempli gratia</em></td> - <td>for example</td> - </tr> - <tr> - <td>et al.</td> - <td><em>et alii</em></td> - <td>and others</td> - </tr> - <tr> - <td>etc.</td> - <td><em>et cetera</em></td> - <td>and so forth, and so on</td> - </tr> - <tr> - <td>i.e.</td> - <td><em>id est</em></td> - <td>that is, in other words</td> - </tr> - <tr> - <td>N.B.</td> - <td><em>nota bene</em></td> - <td>note well</td> - </tr> - <tr> - <td>P.S.</td> - <td><em>post scriptum</em></td> - <td>postscript</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Note:</strong> 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 <strong>you</strong> 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.</p> -</div> - -<h3 id="Acronyms_and_abbreviations" name="Acronyms_and_abbreviations">Acronyms and abbreviations</h3> - -<h4 id="Capitalization_and_periods" name="Capitalization_and_periods">Capitalization and periods</h4> - -<p>Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: XUL</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: X.U.L.; Xul</li> -</ul> - -<h4 id="Expansion" name="Expansion">Expansion</h4> - -<p>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 <a href="/en-US/docs/Glossary">glossary</a> entry describing the technology.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: "XUL (XML User Interface Language) is Mozilla's XML-based language..."</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: "XUL is Mozilla's XML-based language..."</li> -</ul> - -<h4 id="Plurals_of_acronyms_and_abbreviations" name="Plurals_of_acronyms_and_abbreviations">Plurals of acronyms and abbreviations</h4> - -<p>For plurals of acronyms or abbreviations, add <em>s</em>. Don't use an apostrophe. Ever. Please.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: CD-ROMs</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: CD-ROM's</li> -</ul> - -<h3 id="Contractions" name="Contractions">Capitalization</h3> - -<p>Use standard English capitalization rules in body text, and capitalize "World Wide Web" and "Web".</p> - -<h3 id="Contractions" name="Contractions">Contractions</h3> - -<p>Use contractions (e.g. "don't", "can't", "shouldn't") if you prefer. We're not that formal!</p> - -<h3 id="Pluralization" name="Pluralization">Pluralization</h3> - -<p>Use English-style plurals, not the Latin- or Greek-influenced forms.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: syllabuses, octopuses</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: syllabi, octopi</li> -</ul> - -<h3 id="Hyphenation" name="Hyphenation">Hyphenation</h3> - -<p>Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.</p> - -<ul> - <li><font color="green"><strong>Correct</strong></font>: email, re-elect, co-op</li> - <li><font color="red"><strong>Incorrect</strong></font>: e-mail, reelect, coop</li> -</ul> - -<h3 id="Gender-neutral_language">Gender-neutral language</h3> - -<p>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.<br> - <br> - Let's take the following example:</p> - -<blockquote> -<p>A confirmation dialog appears, asking the user if he allows the web page to make use of his web cam.</p> -</blockquote> - -<blockquote> -<p>A confirmation dialog appears, asking the user if she allows the web page to make use of her web cam.</p> -</blockquote> - -<p>Both versions in this case are gender-specific. This could be fixed by using gender-neutral pronouns:</p> - -<blockquote> -<p>A confirmation dialog appears, asking the user if they allow the web page to make use of their web cam.</p> -</blockquote> - -<div class="note"> -<p><strong>Note:</strong> 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 "<a href="http://en.wikipedia.org/wiki/Singular_they">singular 'they.'</a>"</p> -</div> - -<p>You can use both genders:</p> - -<blockquote> -<p>A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.</p> -</blockquote> - -<p>making the users plural:</p> - -<blockquote> -<p>A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.</p> -</blockquote> - -<p>The best solution, of course, is to just rewriting to eliminate the pronouns completely:</p> - -<blockquote> -<p>A confirmation dialog appears, requesting the user's permission for web cam access.</p> -</blockquote> - -<blockquote> -<p>A confirmation dialog box appears, which asks the user for permission to use the web cam.</p> -</blockquote> - -<p>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.</p> - -<h3 id="Numbers_and_numerals" name="Numbers_and_numerals">Numbers and numerals</h3> - -<h4 id="Dates">Dates</h4> - -<p>For dates (not including dates in code samples) use the format "January 1, 1990".</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: February 24, 2006</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: February 24th, 2006; 24 February, 2006; 24/02/2006</li> -</ul> - -<p>Alternately, you can use the YYYY/MM/DD format.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: 2006/02/24</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: 02/24/2006; 24/02/2006; 02/24/06</li> -</ul> - -<h4 id="Decades" name="Decades">Decades</h4> - -<p>For decades, use the format "1990s". Don't use an apostrophe.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: 1990s</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: 1990's</li> -</ul> - -<h4 id="Plurals_of_numerals" name="Plurals_of_numerals">Plurals of numerals</h4> - -<p>For plurals of numerals add <em>"s"</em>. Don't use an apostrophe.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: 486s</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: 486's</li> -</ul> - -<h4 id="Commas" name="Commas">Commas</h4> - -<p>In running text, use commas only in five-digit and larger numbers.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: 4000; 54,000</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: 4,000; 54000</li> -</ul> - -<h3 id="Punctuation" name="Punctuation">Punctuation</h3> - -<h4 id="Serial_comma" name="Serial_comma">Serial comma</h4> - -<p><strong>Use the serial comma</strong>. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: I will travel on trains, planes, and automobiles.</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: I will travel on trains, planes and automobiles.</li> -</ul> - -<div class="note"> -<p><strong>Note:</strong> This is in contrast to the <a href="http://www.mozilla.org/en-US/styleguide/" title="http://www.mozilla.org/en-US/styleguide/">One Mozilla style guide</a>, which specifies that the serial comma is not to be used. MDN is an exception to this rule.</p> -</div> - -<h3 id="Spelling" name="Spelling">Spelling</h3> - -<p>For words with variant spellings, always use the first entry at <a href="http://www.answers.com/library/Dictionary">Answers.com</a>. Do not use variant spellings.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: localize, honor</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: localise, honour</li> -</ul> - -<h3 id="Terminology">Terminology</h3> - -<h4 id="Obsolete_vs._deprecated">Obsolete vs. deprecated</h4> - -<p>It's important to be clear on the difference between the terms <strong>obsolete</strong> and <strong>deprecated</strong>.</p> - -<dl> - <dt>Obsolete:</dt> - <dd>On MDN, the term <strong>obsolete</strong> 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.</dd> - <dt>Deprecated:</dt> - <dd>On MDN, the term <strong>deprecated</strong> 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 <em>obsolete</em> 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.</dd> -</dl> - -<h4 id="HTML_elements">HTML elements</h4> - -<p>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).</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: the {{HTMLElement("span")}} element</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: the span tag</li> -</ul> - -<h4 id="User_interface_actions">User interface actions</h4> - -<p>In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: Click the Edit button.</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: Click Edit.</li> -</ul> - -<h3 id="Voice">Voice</h3> - -<p>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.</p> - -<h2 id="Wiki_markup_and_usage">Wiki markup and usage</h2> - -<h3 id="External_links">External links</h3> - -<p>To automatically create a link to a Bugzilla bug, use this template:</p> - -<pre class="notranslate">\{{Bug(322603)}} -</pre> - -<p>This results in:</p> - -<p>{{Bug(322603)}}</p> - -<p>For WebKit bugs, you can use this template:</p> - -<pre class="notranslate">\{{Webkitbug("322603")}} -</pre> - -<p>This results in:</p> - -<p>{{Webkitbug("322603")}}</p> - -<h3 id="Page_tags">Page tags</h3> - -<p>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 <a href="/en-US/docs/MDN/Contribute/Howto/Tag">How to properly tag pages</a> guide.</p> - -<p>The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:</p> - -<p><img alt="Screenshot of the UX for adding and removing tags on MDN" src="https://mdn.mozillademos.org/files/7859/tag-interface.png" style="border-style: solid; border-width: 1px; height: 167px; width: 863px;"></p> - -<p>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.</p> - -<p>To remove a tag, simply click the little "X" icon in the tag.</p> - -<h4 id="Tagging_pages_that_need_work">Tagging pages that need work</h4> - -<p>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.</p> - -<h4 id="Tagging_obsolete_pages">Tagging obsolete pages</h4> - -<p>Use the following tags for pages that are not current:</p> - -<ul> - <li><em>Junk</em>: 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.</li> - <li><em>Obsolete</em>: 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 <span class="nowiki">{{TemplateLink("obsolete_header")}}</span> macro to put a prominent banner on the topic.</li> - <li><em>Archive</em>: 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 <em>NeedsUpdate</em> 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 <a href="/en-US/docs/Archive">Archive</a> section.</li> -</ul> - -<h3 id="SEO_summary">SEO summary</h3> - -<p>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.</p> - -<p>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 <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide/Editing#Formatting_styles">"SEO summary" style in the WYSIWYG editor</a>.</p> - -<h3 id="Landing_pages">Landing pages</h3> - -<p><strong>Landing pages</strong> are pages at the root of a topic area of the site, such as the main <a href="/en-US/docs/CSS" title="CSS">CSS</a> or <a href="/en-US/docs/HTML" title="HTML">HTML</a> pages. They have a standard format that consists of three areas:</p> - -<ol> - <li>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.</li> - <li>A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.</li> - <li>An <strong>optional</strong> "Browser compatibility" section at the bottom of the page.</li> -</ol> - -<h4 id="Creating_a_page_link_list">Creating a page link list</h4> - -<p>The link list section of an MDN landing page consists of two columns. These are created using the following HTML:</p> - -<pre class="brush: html notranslate"><div class="row topicpage-table"> - <div class="section"> - ... left column contents ... - </div> - <div class="section"> - ... right column contents ... - </div> -</div></pre> - -<p>The left-hand column should be a list of articles, with an <code><h2></code> 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 <code><dl></code> list of articles, with each article's link in a <code><dt></code> block and a brief one-or-two sentence summary of the article in the corresponding <code><dd></code> block.</p> - -<p>The right-hand column should contain one or more of the following sections, in order:</p> - -<dl> - <dt>Getting help from the community</dt> - <dd>This should provide information on Matrix chat rooms and mailing lists available about the topic. The heading should use the class "Community".</dd> - <dt>Tools</dt> - <dd>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".</dd> - <dt>Related topics</dt> - <dd>A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".</dd> -</dl> - -<p><strong><<<finish this once we finalize the landing page standards>>></strong></p> - -<h2 id="Using_inserting_images">Using, inserting images</h2> - -<p>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:</p> - -<ol> - <li>Attach the desired image file to the article (at the bottom of every article in edit mode)</li> - <li>Create an image in the WYSIWYG editor</li> - <li>In the WYSIWYG editor in the drop-down list listing attachments, select the newly created attachment which is your image</li> - <li>Press OK.</li> -</ol> - -<h2 id="Other_References">Other References</h2> - -<h3 id="Preferred_style_guides" name="Preferred_style_guides">Preferred style guides</h3> - -<p>If you have questions about usage and style not covered here, we recommend referring to the <a href="http://www.economist.com/research/StyleGuide/">Economist style guide</a> or, failing that, the <a href="http://www.amazon.com/gp/product/0226104036/">Chicago Manual of Style</a>.</p> - -<h3 id="Preferred_dictionary" name="Preferred_dictionary">Preferred dictionary</h3> - -<p>For questions of spelling, please refer to <a href="http://www.answers.com/library/Dictionary">Answers.com</a>. The spell-checker for this site uses American English. Please do not use variant spellings (e.g., use <em>honor</em> rather than <em>honour</em>).</p> - -<p>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 <a href="/en-US/docs/Project:Community" title="Project:en/Community">MDC mailing list</a> or <a href="/User:Sheppy" title="User:Sheppy">project lead</a> so we know what should be added.</p> - -<h3 id="MDC-specific" name="MDC-specific">MDN-specific</h3> - -<ul> - <li><a href="/en-US/docs/Project:Custom_CSS_Classes" title="Project:en/Custom_CSS_Classes">Custom CSS classes</a> defined for all MDC pages.</li> - <li><a href="/en-US/docs/Project:Custom_Templates" title="Project:en/Custom_Templates">Custom templates</a> created for use on MDC, with explanations.</li> -</ul> - -<h3 id="Other_resources" name="Other_resources">Language, grammar, spelling</h3> - -<p>If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.</p> - -<ul> - <li><a href="http://www.amazon.com/Writing-Well-30th-Anniversary-Nonfiction/dp/0060891548">On Writing Well</a>, by William Zinsser (Amazon link)</li> - <li><a href="http://www.amazon.com/Style-Basics-Clarity-Grace-4th/dp/0205830765/" title="http://www.amazon.com/Style-Lessons-Clarity-Grace-Edition/dp/0321898680">Style: The Basics of Clarity and Grace</a>, by Joseph Williams and Gregory Colomb (Amazon link)</li> - <li><a href="http://www.bartleby.com/64/">American Heritage Book of English Usage</a></li> - <li><a href="http://www.wsu.edu/~brians/errors/">Common Errors in English</a></li> - <li><a href="http://www-personal.umich.edu/~jlawler/aue.html">English Grammar FAQ</a> (alt.usage.english)</li> - <li><a href="http://www.angryflower.com/bobsqu.gif">Bob's quick guide to the apostrophe, you idiots</a> (funny)</li> - <li><a href="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2" title="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2">Merriam-Webster's Concise Dictionary of English Usage</a> (Amazon link): Scholarly but user-friendly, evidence-based advice; very good for non-native speakers, especially for preposition usage.</li> -</ul> 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 ---- -<div>{{MDNSidebar}}</div> - -<p><strong>MDN Web Docs</strong> 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).</p> - -<div class="summary"> -<p>The mission of MDN Web Docs is to provide <em>developers</em> with the <em>information</em> they need to <em>easily</em> build projects on the <em>web platform</em>. We invite you to help!</p> -</div> - -<p>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 <a href="/en-US/docs/MDN/Community" title="/en-US/docs/MDN/Community">MDN community</a>; we're here to help you! The documentation below should get you started, but don't hesitate to join the discussion in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a>.</p> - -<ul class="card-grid"> - <li><span><a href="/en-US/docs/MDN/Getting_started">Newcomer quick start</a></span> - - <p>Are you new to MDN and want to learn how to help make it better? Start here!</p> - </li> - <li><span><a href="/en-US/docs/MDN/Contribute">I'm an advanced user</a></span> - <p>Access our full, in-depth guide for MDN contributors to learn more once you've gotten comfortable.</p> - </li> - <li><span><a href="/en-US/docs/MDN/Promote">Spread the word</a></span> - <p>If you love MDN, help get the word out! Find art, tools, and guides for promoting MDN.</p> - </li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/MDN/Community">Join the MDN Community</a></li> - <li><a href="https://app.zenhub.com/workspace/o/mdn/sprints/boards?repos=121649843,55001853,70901646,134759439,90252175,1352520,3311772,82040629,121278372,33677290,132630865">Scrum board</a></li> -</ul> 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 ---- -<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> - -<p>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.</p> - -<p>{{LandingPageListSubPages()}}</p> 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 ---- -<div>{{MDNSidebar}}</div><p><span class="seoSummary">The <a href="/en-US/docs/Project:MDN/Kuma" title="/en-US/docs/Project:MDN/Kuma">Kuma</a> platform on which MDN runs provides a powerful macro system, <a href="/en-US/docs/Project:MDN/Kuma/KumaScript_guide" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript</a>, 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.</span></p> - -<p>The <a href="/en-US/docs/Project:MDN/Kuma/KumaScript_guide" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript guide</a> 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.</p> - -<h2 id="How_macros_are_implemented">How macros are implemented</h2> - -<p>Macros on MDN are implemented using server-executed <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a> code, interpreted using <a href="http://nodejs.org/" title="http://nodejs.org/">Node.js</a>. 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 <a href="/en-US/docs/Project:MDN/Kuma/KumaScript_guide" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript guide</a>; the <a href="/en-US/docs/Project:MDN/Kuma/KumaScript_reference" title="/en-US/docs/Project:MDN/Kuma/KumaScript_reference">KumaScript reference</a> provides details on the libraries and other KumaScript APIs we've implemented.</p> - -<h2 id="Using_a_macro_in_content">Using a macro in content</h2> - -<p>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:</p> - -<pre class="notranslate">\{{macroname(parameter-list)}}</pre> - -<p>A few notes about macro calls:</p> - -<ul> - <li>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.</li> - <li>Parameters are separated by commas.</li> - <li>If there are no parameters, you may leave out the parentheses entirely; <code>\{{macroname()}}</code> and <code>\{{macroname}}</code> are identical.</li> - <li>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).</li> - <li>If you get errors, review your code carefully. If you still can't figure out what's going on, see <a href="/en-US/docs/MDN/Kuma/Troubleshooting_KumaScript_errors">Troubleshooting KumaScript errors</a> for help.</li> -</ul> - -<p>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.</p> - -<div class="note"> -<p><strong>Note:</strong> 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).</p> -</div> - -<p>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.</p> - -<p>You can read up on our most commonly-used macros on the <a href="/en-US/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros" title="/en-US/docs/Project:MDN/Contributing/Custom_macros">Commonly-used macros</a> page; also, there's a <a href="https://developer.mozilla.org/en-US/docs/templates" title="https://developer.mozilla.org/en-US/docs/templates">complete list of all macros</a> here. Most macros have documentation built into them, as comments at the top.</p> - -<p>{{EditorGuideQuicklinks}}</p> 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 ---- -<div class="summary"><span style="color: #000000;">মোজিলা অ্যাপ্লিকেশান গুলোর পরিবর্তন এবং পরিবর্ধন </span></div> - -<p>অ্যাড-অন, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Gecko">গেকো</a> ভিত্তিক অ্যাপ্লিকেশান যেমন: ফায়ারফক্স, সীমাঙ্কী এবং থান্ডারবার্ড এ নতুন কার্যকারিতা যোগ করে। মূলত দুই ধরণের অ্যাড-অন আছে: <a href="https://developer.mozilla.org/en-US/Add-ons#Extensions">এক্সটেনশন</a>, অ্যাপ্লিকেশানে নতুন ধরণের ফিচার যুক্ত করে, আর <a href="https://developer.mozilla.org/en-US/Add-ons#Themes">থিম</a> অ্যাপ্লিকেশানের ইউজার ইন্টারফেস পরিবর্তন করে। </p> - -<p>এক্সটেনশন এবং থিম উভয়ের জন্যই মোজিলা <a href="https://addons.mozilla.org/">addons.mozilla.org</a> তে একটি রিপোজিটরি পরিচালনা করে যা এএমও নামে পরিচিত। আপনি যখন <a href="https://developer.mozilla.org/en-US/Add-ons/Submitting_an_add-on_to_AMO">এএমও তে অ্যাড-অন জমা দেন</a> , তখন সেগুলোকে পর্যালোচনা করা হয় তারপর সেগুলো পর্যালোচনাতে উত্তীর্ণ হলে ব্যাবহারকারির কাছে পৌঁছে।<span style="font-family: helvetica;">আপনাকে এএমও তে অ্যাড-অন জমা দিতে হবেনা, কিন্তু আপনি যদি দেন, তাহলে ব্যাবহারকারিরা আত্মবিশ্বাসী হতে পারেন যে, সেগুলো রিভিও (পর্যালোচনা) করা হয়েছে । এবং আপনি দরকারি অ্যাড-অন এর উৎস হিসেবে এএমও এর দৃশ্যমানতা এর সুবিধা নিতে পারেন। </span></p> - -<p><span style="font-family: helvetica;">যেসকল অ্যাপ্লিকেশান অ্যাড-অন কে হোস্ট করে অ্যাড-অন তাদের আচরণকে প্রবলভাবে প্রভাবিত করতে পারে। আমরা এক ঝাঁক দিকনির্দেশনা তৈরি করেছি যাতে ব্যাবরহারকারিদের ভাল অভিজ্ঞতা দিতে পারি । সকল ধরণের অ্যাড-অনের জন্যই এই দিকনির্দেশনা প্রযোজ্য, তা </span><a class="external" href="https://addons.mozilla.org/" style="text-decoration: none;">addons.mozilla.org</a><span style="font-family: helvetica;"> তে হোস্ট করা হোক বা অন্য কোথাও হোস্ট করা হোক। </span></p> - -<hr> -<h2 id="এক্সটেনশন">এক্সটেনশন </h2> - -<p>এক্সটেনশন ফায়ারফক্স এবং থান্ডার-বার্ড এর মত মোজিলা অ্যাপ্লিকেশান গুলোতে নতুন কার্যকারিতা যোগ করে। এরা ব্রাউজারে নতুন ফিচার যুক্ত করতে পারে, যেমন: বিভিন্ন উপায়ে ট্যাবগুলোকে পরিচালনা করা। এবং তারা বিশেষ বিশেষ ওয়েবসাইটের ব্যাবহারযোগ্যতা অথবা নিরাপত্তা বাড়াতে ওয়েব কনটেন্টের পরিবর্তন করতে সক্ষম। </p> - -<p>এক্সটেনশন তৈরি করতে আপনি তিনটি ভিন্ন ভিন্ন কৌশল ব্যাবহার করতে পারেন: অ্যাড-অন এসডিকে ভিত্তিক এক্সটেনশন, ম্যানুয়ালী বুটস্ত্র্যাপড রিস্টার্ট বিহীন এক্সটেনশন এবং ওভারলে এক্সটেনশন। </p> - -<ul class="card-grid"> - <li><span><a href="https://developer.mozilla.org/en-US/Add-ons/SDK">অ্যাড-অন এসডিকে এক্সটেনশন</a> </span><br> - এক গুচ্ছ হাই-লেভেল জাভাস্ক্রিপ্ট এপিআই দ্বারা রিস্টার্টবিহীন এক্সটেনশন ডেভেলপ করুন। </li> - <li><a href="https://developer.mozilla.org/en-US/Add-ons/Bootstrapped_extensions">রিস্টার্টবিহীন এক্সটেনশন </a><br> - এমন এক্সটেনশন ডেভেলপ করুন যাতে ব্রাউজার রিস্টার্টের প্রয়োজন না হয়। </li> - <li><a href="https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions">ওভারলে এক্সটেনশন</a> <br> - এক্সইউএল ওভার লে দ্বারা গতানুগতিক এক্সটেনশন ডেভেলপ করুন। </li> -</ul> - -<p>আপনি যদি পারেন তবে, অ্যাড-অন এসডিকে ব্যাবহার করা সমীচীন হবে, যা রি স্টার্ট বিহীন মেকানিজম ব্যাবহার করে কিন্তু নির্দিষ্ট কিছু কাজকে সহজ করে এবং তারপর নিজেকে পরিষ্কার করে। যদি অ্যাড-অন এসডিকে আপনার প্রয়োজনের তুলনায় পর্যাপ্ত না হয় তবে, এর পরিবর্তে ম্যানুয়াল রি স্টার্ট বিহীন এক্সটেনশন ইমপ্লিমেন্ট করতে পারেন। বর্তমানে অধিকাংশ ক্ষেত্রে ওভারলে এক্সটেনশন অপ্রচলিত , যদিও এখনো এগুলোর প্রাচুর্য রয়েছে। </p> - -<p>কোন কৌশল অবলম্বন করবেন এ সম্পর্কে আরও জানতে পড়ুন তাদের <a href="https://developer.mozilla.org/en-US/Add-ons/Comparing_Extension_Toolchains">তুলনা</a>। </p> - -<div class="column-container"> -<div class="column-half"> -<h2 id="ভাল_চর্চা">ভাল চর্চা </h2> - -<dl> - <dd>আপনি যেভাবেই এক্সটেনশন ডেভেলপ করুন না কেন, আপনাকে কিছু দিক নির্দেশ মেনে চলতে হবে, যাতে ব্যাবহারকারিরা একটা ভাল অভিজ্ঞতা পান। </dd> - <dt><a href="https://developer.mozilla.org/en-US/Add-ons/Performance_best_practices_in_extensions">পারফরমেন্স </a></dt> - <dd>নিশ্চিত করা যে আপনার এক্সটেনশন দ্রুত, প্রতিক্রিয়াশীল এবং মেমরি এফিসিয়েন্ট। </dd> - <dt><a href="https://developer.mozilla.org/en-US/Add-ons/Security_best_practices_in_extensions">নিরাপত্তা </a></dt> - <dd>নিশ্চিত করা যে আপনার এক্সটেনশন ইউজারকে ক্ষতিকারক ওয়েবসাইটে প্রবেশ করাবে না। </dd> - <dt><a href="https://developer.mozilla.org/en-US/Add-ons/Extension_etiquette">ভদ্রতা </a></dt> - <dd>নিশ্চিত করা যে আপনার এক্সটেনশন অপর এক্সটেনশনের সাথে ভালো ভাবে কাজ করতে পারে কিনা। </dd> -</dl> -</div> - -<div class="column-half"> -<h3 id="নির্দিষ্ট-অ্যাপ্লিকেশান">নির্দিষ্ট-অ্যাপ্লিকেশান</h3> - -<p>অধিকাংশ ডকুমেন্টেশান ধরে নেয় যে আপনি ফায়ারফক্স ডেক্সটপের জন্য অ্যাড-অন ডেভেলপ করছেন। আপনি যদি গেকো ভিত্তিক অন্য অ্যাপ্লিকেশান এর জন্য ডেভেলপ করতে চান, তাহলে আপনাকে তাদের মধ্যে মুখ্য পার্থক্য গুলো জানতে হবে। </p> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/Add-ons/Thunderbird">থান্ডারবার্ড </a></dt> - <dd>থান্ডার বার্ড মেইল ক্লায়েন্ট এর জন্য এক্সটেনশন ডেভেলপ করা। </dd> - <dt><a href="https://developer.mozilla.org/en-US/Add-ons/Firefox_for_Android">ফায়ারফক্স এন্ড্রয়েড</a></dt> - <dd>ফায়ারফক্স এন্ড্রয়েডের জন্য এক্সটেনশন ডেভেলপ করা। </dd> - <dt><a href="https://developer.mozilla.org/en-US/Add-ons/SeaMonkey_2">সীমাঙ্কী</a></dt> - <dd><a href="http://www.seamonkey-project.org/">সীমাঙ্কী</a> সফটওয়্যার সুইটের জন্য এক্সটেনশন ডেভেলপ করা। </dd> -</dl> -</div> -</div> - -<hr> -<h2 id="থিম"><a name="Themes">থিম </a></h2> - -<p>থিম হল অ্যাড-অন যারা অ্যাপ্লিকেশানের ইউজার ইন্টারফেস পরিবর্তন করে। দুই ধরণের থিম আছে: লাইটওয়েট এবং সম্পূর্ণ থিম। </p> - -<div class="column-container"> -<div class="column-half"> -<p><a href="https://addons.mozilla.org/en-US/developers/docs/themes">লাইটওয়েট থিম</a> গুলো সম্পূর্ণ থিমের চেয়ে সহজে ইমপ্লিমেন্ট করা যায়, কিন্তু খুব সীমিত পরিবর্তন প্রদান করে। </p> -</div> - -<div class="column-half"> -<p><a href="https://developer.mozilla.org/en-US/docs/Themes">সম্পূর্ণ থিম</a> দ্বারা অ্যাপ্লিকেশান ইউআই তে গভীর পরিবর্তন আনা যায়। সম্পূর্ণ থিমের ডকুমেন্টেশান গুলো অনেক পুরনো, কিন্তু সম্ভাব্য আপডেটের জন্য এখানে লিঙ্ক দেয়া হবে। </p> -</div> -</div> - -<hr> -<h2 id="অন্যান্য_ধরণের_অ্যাড-অন">অন্যান্য ধরণের অ্যাড-অন</h2> - -<p><a href="https://developer.mozilla.org/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">সার্চইঞ্জিন প্লাগইন</a> হল সরল এবং খুব নির্দিষ্ট ধরণের অ্যাড-অন: তারা ব্রাউজারের সার্চবারে নতুন সার্চইঞ্জিন যুক্ত করে । </p> - -<p>যেসকল কন্টেন্টকে অ্যাপ্লিকেশান স্বাভাবিক ভাবে সাপোর্ট করেনা তাদের বোঝার জন্য <a href="https://developer.mozilla.org/en-US/docs/Plugins">প্লাগইনের</a> সাহায্য দরকার হয়। আমরা এসকল প্লাগ ইনের গভীরতা বাড়াতে কাজ করছি, কেননা এদের স্থায়িত্ব, পারফরমেন্স এবং নিরাপত্তার সমস্যাপূর্ণ ইতিহাস রয়েছে।</p> - -<p>{{AddonSidebar}}</p> - -<div id="__if72ru4sdfsdfrkjahiuyi_once" class="hidden"></div> - -<div id="__hggasdgjhsagd_once" class="hidden"></div> 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 ---- -<div>{{AddonSidebar}}</div> - -<div class="note"> -<p>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.</p> -</div> - -<p>WebExtensions are a cross-browser system for developing browser add-ons. To a large extent the system is compatible with the <a class="external-icon external" href="https://developer.chrome.com/extensions">extension API</a> supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox or <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> with <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">just a few changes</a>. The API is also fully compatible with <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">multiprocess Firefox</a>.</p> - -<p>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 <a href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mailing list</a> or <a href="irc://irc.mozilla.org/webextensions">#webextensions</a> on <a href="https://wiki.mozilla.org/IRC">IRC</a>.</p> - -<div class="row topicpage-table"> -<div class="section"> -<h3 id="Getting_started">Getting started</h3> - -<ul> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions_">What are WebExtensions?</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Your_first_WebExtension">Your first WebExtension</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">Your second WebExtension</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomy of a WebExtension</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Examples">Example WebExtensions</a></li> -</ul> - -<h3 id="How_to">How to</h3> - -<ul> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">Intercept HTTP requests</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">Modify a web page</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Add a button to the toolbar</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implement a settings page</a></li> - <li>Manipulate browser tabs</li> - <li>Access and modify bookmarks</li> - <li>Access and modify cookies</li> -</ul> - -<h3 id="Concepts">Concepts</h3> - -<ul> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Using_the_JavaScript_APIs">Using the JavaScript APIs</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Content scripts</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Match patterns</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization">Internationalization</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a></li> -</ul> - -<h3 id="Porting">Porting</h3> - -<ul> - <li><a href="/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">Porting a Google Chrome extension</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">Porting a legacy Firefox add-on</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK">Comparison with the Add-on SDK</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">Comparison with XUL/XPCOM extensions</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities">Chrome incompatibilities</a></li> -</ul> - -<h3 id="Firefox_workflow">Firefox workflow</h3> - -<ul> - <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Installation</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">Getting started with web-ext</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference">web-ext command reference</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">WebExtensions and the Add-on ID</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">Publishing your WebExtension</a></li> -</ul> -</div> - -<div class="section"> -<h3 id="Reference">Reference</h3> - -<ul> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript API overview</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser compatibility tables for JavaScript APIs</a></li> -</ul> - -<h4 id="JavaScript_APIs">JavaScript APIs</h4> - -<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/API") }}</div> - -<h4 id="Manifest_keys">Manifest keys</h4> - -<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}</div> -</div> -</div> 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 ---- -<p><span id="result_box" lang="bn"><span title="<p>This page contains links to documentation for the approach to developing extensions for Gecko-based applications which uses:</p> - -">এই পাতা গেকো ভিত্তিক অ্যাপ্লিকেশনের জন্য উন্নয়নশীল এক্সটেনশন পদ্ধতির যা ব্যবহার ডকুমেন্টেশন লিঙ্ক উপস্থিত রয়েছে</span><br> - <br> - <br> - <span title="<li>XUL overlays to specify the interface</li> - "> XUL প্রতিস্থাপক ইন্টারফেস করুন </ li> নির্দিষ্ট করার<br> - </span><span title='&lt;li>APIs available to privileged code, such as &lt;a href="/en-US/docs/XUL/tabbrowser">&lt;code>tabbrowser&lt;/code>&lt;/a> and &lt;a href="/en-US'><লি> যেমন <a href="/en-US/docs/XUL/tabbrowser"> <code> বিশেষ সুবিধাভোগী কোড উপলব্ধ API গুলি, tabbrowser </ code> </a> এবং <একটি href = "/ en-US </span><span title='/docs/Mozilla/JavaScript_code_modules">JavaScript modules&lt;/a>, to interact with the application and content.&lt;/li> -'>/ ডক্স / মজিলা / JavaScript_code_modules "> জাভাস্ক্রিপ্ট মডিউল </a>, অ্যাপ্লিকেশন এবং কন্টেন্ট সঙ্গে যোগাযোগ করার জন্য. </ li></span><br> - <span title="</ul> - -"></ Li></span><br> - <br> - <span title="<p>Prior to Firefox 4, and the Gecko 2 engine that powers it, this was the only way to develop extensions."><P> ঢাকা ফায়ারফক্স 4, এবং গেকো 2 ইঞ্জিন এটি ক্ষমতা, এই এক্সটেনশন বিকাশ করার একমাত্র উপায় ছিল এর আগে. </span><span title='This methodology has largely been superseded by &lt;a href="/en-US/docs/Extensions/Bootstrapped_extensions">restartless extensions&lt;/a>, and the &lt;a href="/en-US/Add-ons/SDK">'>এই পদ্ধতি মূলত <a href="/en-US/docs/Extensions/Bootstrapped_extensions"> রিস্টার্টবিহীন এক্সটেনশন </a>, এবং <a দ্বারা বাতিল হয়েছে href="/en-US/Add-ons/SDK"> </span><span title="Add-on SDK</a>, which is built on top of them.">অ্যাড-অন এসডিকে </a>, যা তাদের উপর নির্মিত হয়. </span><span title="The privileged JavaScript APIs described here can still be used in these newer types of add-ons.</p> - -">সুবিধাভোগী জাভাস্ক্রিপ্ট এপিআই এখানে বর্ণনা এখনও অ্যাড টার্ন এই নতুন ধরনের ব্যবহার করা যেতে পারে. '</ p></span><br> - <br> - <span title='&lt;h2 id="XUL_School">XUL School&lt;/h2> - -'><H2 & id = "XUL_School"> XUL স্কুল </ h2></span><br> - <br> - <span title='&lt;p>&lt;a href="/en-US/Add-ons/Overlay_Extensions/XUL_School">XUL School&lt;/a> is a comprehensive add-on development tutorial, focusing on Firefox extension development but mostly applicable to other Gecko-based'><পি> <a href="/en-US/Add-ons/Overlay_Extensions/XUL_School"> XUL স্কুল </a> একটি ব্যাপক অ্যাড অন উন্নয়ন টিউটোরিয়াল, কিন্তু বেশিরভাগই অন্যান্য গেকো ভিত্তিক প্রযোজ্য ফায়ারফক্স এক্সটেনশন উন্নয়ন উপর মনোযোগ নিবদ্ধ করে </span><span title="applications.</p> - -">অ্যাপ্লিকেশন. '</ p></span><br> - <br> - <span title='&lt;h2 id="More_resources">More resources&lt;/h2> - -'><H2 & id = "More_resources"> আরো সম্পদ করুন </ h2></span><br> - <br> - <span title='&lt;div class="column-container"> -'><Div class = "কলাম-ধারক"></span><br> - <span title='&lt;div class="column-half"> -'><Div class = "কলাম অর্ধ"></span><br> - <span title="<dl> - "><DL><br> - </span><span title='&lt;dt>&lt;a href="/en-US/Mozilla/Add-ons/Setting_up_extension_development_environment">Setting up your environment&lt;/a>&lt;/dt> - '><Dt> <a href="/en-US/Mozilla/Add-ons/Setting_up_extension_development_environment"> আপনার পরিবেশ </a> </ DT> সেট আপ<br> - </span><span title="<dd>Setting up the application for extension development.</dd> - "><DD> এক্সটেনশন উন্নয়নের জন্য আবেদন সেট আপ হচ্ছে. </ DD><br> - </span><span title='&lt;dt>&lt;a href="/en-US/docs/XUL">XUL&lt;/a>&lt;/dt> - '><Dt> <a href="/en-US/docs/XUL"> XUL </a> </ DT><br> - </span><span title="<dd>Tutorials and reference for the user interface language used by XUL extensions.</dd> - "><DD> টিউটোরিয়াল এবং ইউজার ইন্টারফেস XUL এক্সটেনশন. </ DD> দ্বারা ব্যবহৃত ভাষা জন্য রেফারেন্স<br> - </span><span title='&lt;dt>&lt;a href="/en-US/Mozilla/Add-ons/Code_snippets">Code snippets&lt;/a>&lt;/dt> - '><Dt> <a href="/en-US/Mozilla/Add-ons/Code_snippets"> কোড স্নিপেট </a> </ DT><br> - </span><span title="<dd>Sample code for many of the things you'll want to do.</dd> - "><DD> জিনিষ আপনি করতে চাইবেন. </ DD> অনেক জন্য নমুনা কোড<br> - </span><span title='&lt;dt>&lt;a href="/en-US/Mozilla/Add-ons/Installing_extensions">Installing extensions&lt;/a>&lt;/dt> - '><Dt> <a href="/en-US/Mozilla/Add-ons/Installing_extensions"> এক্সটেনশন </a> </ DT> ইনস্টল<br> - </span><span title="<dd>How to install an extension by copying the extension files into the application's install directory.</dd> - "><DD> অ্যাপ্লিকেশনের তালিকা ইনস্টল এক্সটেনশান ফাইল অনুলিপি দ্বারা একটি এক্সটেনশন ইনস্টল করার জন্য কিভাবে. </ DD><br> - </span><span title='&lt;dt>&lt;a href="/en-US/Add-ons/Overlay_extensions/Firefox_addons_developer_guide">Firefox add-ons developer guide&lt;/a>&lt;/dt> - '><Dt> <a href="/en-US/Add-ons/Overlay_extensions/Firefox_addons_developer_guide"> ফায়ারফক্স অ্যাড-অন ডেভেলপার নির্দেশিকা </a> </ DT><br> - </span><span title="<dd>A guide to developing overlay extensions.</dd> -"><DD> ওভারলে এক্সটেনশন. </ DD> উন্নয়নশীল একটি নির্দেশিকা</span><br> - <span title="</dl> -"></ DL></span><br> - <span title="</div> - -"></ Div></span><br> - <br> - <span title='&lt;div class="column-half"> -'><Div class = "কলাম অর্ধ"></span><br> - <span title="<dl> - "><DL><br> - </span><span title='&lt;dt>&lt;a href="/en-US/docs/Mozilla/JavaScript_code_modules">JavaScript code modules&lt;/a>&lt;/dt> - '><Dt> <a href="/en-US/docs/Mozilla/JavaScript_code_modules"> জাভাস্ক্রিপ্ট কোড মডিউল </a> </ DT><br> - </span><span title="<dd>JavaScript modules available to extension developers.</dd> - "><DD> জাভাস্ক্রিপ্ট মডিউল এক্সটেনশন ডেভেলপার. </ DD> উপলব্ধ<br> - </span><span title='&lt;dt>&lt;a href="/en-US/Mozilla/Add-ons/Inline_Options">Extension preferences&lt;/a>&lt;/dt> - '><Dt> <a href="/en-US/Mozilla/Add-ons/Inline_Options"> এক্সটেনশন পছন্দগুলি </a> </ DT><br> - </span><span title="<dd>How to specify the preferences for your extension that will appear in the Add-ons Manager.</dd> - "><DD> কিভাবে আপনার এক্সটেনশন পছন্দগুলি যে অ্যাড-অন ম্যানেজার প্রদর্শিত হবে তা নির্দিষ্ট করার. </ DD><br> - </span><span title='&lt;dt>&lt;a href="/en-US/Mozilla/Add-ons/Extension_Packaging">Extension packaging&lt;/a>&lt;/dt> - '><Dt> <a href="/en-US/Mozilla/Add-ons/Extension_Packaging"> এক্সটেনশন প্যাকেজিং </a> </ DT><br> - </span><span title="<dd>How extensions are packaged and installed.</dd> - "><DD> কিভাবে এক্সটেনশন প্যাকেজ এবং ইনস্টল করা হয়. </ DD><br> - </span><span title='&lt;dt>&lt;a href="/en-US/Mozilla/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System">Binary Firefox extensions&lt;/a>&lt;/dt> - '><Dt> <a href="/en-US/Mozilla/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System"> বাইনারি ফায়ারফক্স এক্সটেনশন </a> </ DT><br> - </span><span title="<dd>Creating binary extensions for Firefox.</dd> -"><DD> ফায়ারফক্সের জন্য বাইনারি এক্সটেনশন তৈরি. </ DD></span><br> - <span title="</dl> -"></ DL></span><br> - <span title="</div> -"></ Div></span><br> - <span title="</div> - -"></ Div></span><br> - <br> - <span title="<p>&nbsp;</p>"><পি> & nbsp; </ p></span></span></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 ---- -<p>{{AddonSidebar}}</p> - -<p>এই অনুচ্ছেদে ফায়ারফক্সের WebExtension তৈরীর আদ্যপন্ত জানব। এই অ্যাড-অন "mozilla.org" অথবা এর সাবডোমেন থেকে আসা সমস্ত পেজে লাল বর্ডার যোগ করবে।</p> - -<p>এই উদাহরণের সোর্স কোড GitHub-এ দেওয়া আছেঃ</p> - -<p><a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</p> - -<p>প্রথমে দরকার হবে ফায়ারফক্স ৪৫ অথবা তার পরবর্তী ভার্সন।</p> - -<h2 id="WebExtension_লিখা">WebExtension লিখা</h2> - -<p>নতুন একটি ডিরেক্টরী তৈরী করে সেখানে প্রবেশ করুনঃ</p> - -<pre class="brush: bash">mkdir borderify -cd borderify</pre> - -<h3 id="manifest.json">manifest.json</h3> - -<p>এখন "borderify" ডিরেক্টরীর ভেতরে "manifest.json" নামে নতুন একটি ফাইল তৈরী করুন। তাতে নিম্নলিখিত কোড লিখুনঃ</p> - -<pre class="brush: 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"] - } - ] - -}</pre> - -<ul> - <li>প্রথম তিনটি key: <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/name">name</a></code>, এবং <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code>, দিতেই হবে যাতে অ্যাড-অনের প্রাথমিক মেটাডাটা থাকে।</li> - <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code> ঐচ্ছিক কিন্তু দিতে পরাপর্শ দেওয়া হচ্ছে কারণ, অ্যাড-ম্যানেজারে এই তথ্য দেখাবে।।</li> - <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> ঐচ্ছিক যা অ্যাড-অনের একটি আইকন নির্দিষ্ট করে,যা অ্যাড-ম্যানেজারে দেখাবে তাই দিতে পরামর্শ দেওয়া হচ্ছে।</li> -</ul> - -<p>কিছু ফায়ারফক্স ভার্সনে একটি অতিরক্ত <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/applications">applications </a></code>key manifest.json-এ যোগ করা লাগতে পারে।</p> - -<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"applications":</span> <span class="punctuation token">{</span> - <span class="key token">"gecko":</span> <span class="punctuation token">{</span> - <span class="key token">"id":</span> <span class="string token">"borderify@example.com"</span><span class="punctuation token">,</span> - <span class="key token">"strict_min_version":</span> <span class="string token">"42.0"</span><span class="punctuation token">,</span> - <span class="key token">"strict_max_version":</span> <span class="string token">"50.*"</span><span class="punctuation token">,</span> - <span class="key token">"update_url":</span> <span class="string token">"https://example.com/updates.json"</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code></pre> - -<p>সবচেয়ে মজার key হচ্ছ <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>. এটা ফায়ারফক্সকে সেই সব ওয়েব পেজে স্ক্রীপট লোড করতে বলবে যাদের URL-এ একটি নির্দিষ্ট প্যাটার্ন আছে।এক্ষেত্রে আমরা ফায়ারফক্সকে "mozilla.org" বা এর সাবডোমেনের সমস্ত HTTP অথবা HTTPS পেজে "borderify.js" নামে স্ক্রীপট লোড করতে বলছি।</p> - -<ul> - <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Learn more about content scripts.</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Learn more about match patterns</a>.</li> -</ul> - -<h3 id="iconsborder-48.png">icons/border-48.png</h3> - -<p>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".</p> - -<p>Create the "icons" directory directly under the "borderify" directory. Save an icon there named "border-48.png". You could use <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">the one from our example</a>, which is taken from the Google Material Design iconset, and is used under the terms of the <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a> license.</p> - -<p>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 <code>96</code> property of the <code>icons</code> object in manifest.json:</p> - -<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"icons":</span> <span class="punctuation token">{</span> - <span class="key token">"48":</span> <span class="string token">"icons/border-48.png", - "96": "icons/border-96.png"</span> -<span class="punctuation token">}</span></code></pre> - -<p>Alternatively, you could supply an SVG file here, and it will be scaled correctly.</p> - -<ul> - <li><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">Learn more about specifying icons.</a></li> -</ul> - -<h3 id="borderify.js">borderify.js</h3> - -<p>Finally, create a file called "borderify.js" directly under the "borderify" directory. Give it this content:</p> - -<pre class="brush: js">document.body.style.border = "5px solid red";</pre> - -<p>This script will be loaded into the pages that match the pattern given in the <code>content_scripts</code> manifest.json key. The script has direct access to the document, just like scripts loaded by the page itself.</p> - -<ul> - <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Learn more about content scripts.</a></li> -</ul> - -<h2 id="Testing_it_out">Testing it out</h2> - -<p>First, double check that you have the right files in the right places:</p> - -<pre>borderify/ - icons/ - border-48.png - borderify.js - manifest.json</pre> - -<p>Open "about:debugging" in Firefox, click "Load Temporary Add-on" and select any file in your add-on's directory:</p> - -<p>{{EmbedYouTube("cer9EUKegG4")}}</p> - -<p>The add-on will now be installed, and will stay until you restart Firefox.</p> - -<p>Now try visiting a page under "mozilla.org", and you should see the red border round the page:</p> - -<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p> - -<p>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:</p> - -<p>{{EmbedYouTube("NuajE60jfGY")}}</p> - -<ul> - <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Learn more about loading add-ons</a></li> -</ul> - -<h2 id="Packaging_and_publishing">Packaging and publishing</h2> - -<p>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 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">"Publishing your WebExtension"</a>.</p> - -<h2 id="What's_next">What's next?</h2> - -<p>Now you've got an idea of the process of developing a WebExtension for Firefox, try:</p> - -<ul> - <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">reading more about the anatomy of WebExtensions</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">writing a more complex WebExtension</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/API">reading about the JavaScript APIs available to WebExtensions.</a></li> -</ul> 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/ফায়ারফক্স ---- -<div>{{FirefoxSidebar}}</div> - -<p><a class="external external-icon" href="https://www.mozilla.org/firefox">ফায়ারফক্স</a> হচ্ছে মোজিলা'র বহুল পরিচিত ওয়েব ব্রাউজার এপ্লিকেশন, যা উইন্ডোজ, ম্যাক OS এক্স, এবং লিনাক্স এর মতো বিভিন্ন প্ল্যাটফরম, এছাড়াও এনড্রোয়েড মোবাইল এ ও রয়েছে । যার সাথে রয়েছে সর্বাধুনিক ওয়েব প্রযুক্তি এবং শক্তিশালী <a href="https://developer.mozilla.org/en-US/docs/Tools">ডেভেলপার টুল</a> । ওয়েব ডেভলপার এবং সাধারণ ব্যবহারকারীদের জন্য ফায়ারফক্স হচ্ছে একটি উৎকৃষ্ট ব্রাউজার।</p> - -<p>ফায়ারফক্স একটি ওপেন সোর্স প্রোজেক্ট, কোড এর অনেক কিছুই আমাদের স্বেচ্ছাসেবক সংগঠন এর মাধ্যমে তৈরি। এখানে আপনি ফায়ারফক্স প্রোজেক্ট এ কিভাবে সাহায্য করতে হয় তা শিখতে পারবেন, কিন্তু আপনি ফায়ারফক্স ডেভলপার টুল ব্যাবহার করে ফায়ারফক্স অ্যাড-অন তৈরির ডকুমেন্টেশন লিঙ্ক খুজে পাবেন।</p> - -<div class="summary"> -<p>কিভাবে ফায়ারফক্স OS এ অ্যাড-অন তৈরি করতে হয় শিখুন, কিভাবে ফায়ারফক্স ডেভলপ এবং তৈরি করা যায়, এবং কিভাবে ফায়ারফক্স এর অভ্যন্তরীণ সাবপ্রজেক্ট গুলো কাজ করে তা জানুন।</p> -</div> - -<ul class="card-grid"> - <li><span>ডেভলপার রিলিজ নোটস </span> - - <p><a href="https://developer.mozilla.org/en-US/Firefox/Releases">ডেভলপারদের জন্য রিলিজ নোট</a>; ফায়ারফক্স এর প্রতিটি ভার্সন এর ওয়েবসাইট এবং অ্যাড-অন এর নতুন ক্ষমতা সম্বন্ধে জানুন l</p> - </li> - <li><span>প্রোজেক্ট ডকুমেন্ট তৈরি করা </span> - <p><a href="/bn/docs/Mozilla">ফায়ারফক্স এর অভ্যন্তরীণ</a> বিষয় এবং এর তৈরি প্রক্রিয়ার বিস্তারিত তথ্য সম্বন্ধে অবগত থাকুন এতে আপনার কোড করা সহজ হবে।</p> - </li> - <li><span>ডেভলপার গাইড </span> - <p>আমাদের <a href="/bn/docs/Developer_Guide">ডেভলপার গাইড</a>, দিচ্ছে সম্পূর্ণ তথ্য কিভাবে আপনি ফায়ারফক্স সোর্স কোড কম্পাইল করতে পারেন, কিভাবে আপনি আপনার নিজস্ব কোড করার সুযোগ পান, এবং কিভাবে অন্যান্য প্রোজেক্ট এ যোগ দিতে পারেন।</p> - </li> -</ul> - -<h2 id="ফায়ারফক্স_চ্যানেল">ফায়ারফক্স চ্যানেল</h2> - -<p>ফায়ারফক্স চারটি <strong>চ্যানেলে</strong>পাওয়া যায়।</p> - -<h3 id="ফায়ারফক্স_নাইটলি">ফায়ারফক্স নাইটলি</h3> - -<p>প্রতি রাতে<a href="/en-US/docs/mozilla-central">মজিলা-সেন্ট্রাল</a> থেকে ফায়ারফক্স নাইটলি বিল্ড করি। এই বিল্ড গুলো ফায়ারফক্স ডেভেলপারদের জন্য অথবা যারা সক্রিয় ডেভেলপমেন্ট এর মধ্যে থাকা সর্বশেষ আকর্ষণীয় ফিচার ব্যবহার করতে চায়।</p> - -<p><a href="https://nightly.mozilla.org/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">ফায়ারফক্স নাইটলি ডাউনলোড</a></p> - -<h3 id="ফায়ারফক্স_ডেভেলপার_এডিশন">ফায়ারফক্স ডেভেলপার এডিশন</h3> - -<p>ফায়ারফক্সের এই সংস্করণ ডেভেলপারদের জন্য বিশেষভাবে তৈরি করা হয়েছে। প্রতি ৬ সপ্তাহ পর পর ফায়ারফক্স নাইটলিতে থাকা মোটামুটি স্ট্যাবল ফিচার ডেভেলপার এডিশনে যুক্ত করে রিলিজ দেয়া হয়। এছাড়াও শুধু ডেভেলপারদের প্রয়োজন হবে, এমন কিছু অতিরিক্ত ফিচারও আমরা এতে যুক্ত করে থাকি।</p> - -<p><a href="/en-US/Firefox/Developer_Edition">ফায়ারফক্স ডেভেলপার এডিশন সম্পর্কে আরও জানুন</a></p> - -<p><a href="https://www.mozilla.org/en-US/firefox/developer/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">ফায়ারফক্স ডেভেলপার সংস্করণ ডাউনলোড</a></p> - -<h3 id="ফায়ারফক্স_বেটা">ফায়ারফক্স বেটা</h3> - -<p>ফায়ারফক্স ডেভেলপার এডিশনে ছয় সপ্তাহ থাকার পর, যেসব ফিচার মোটামুটি স্ট্যাবল, আমরা তা নিয়ে ফায়ারফক্স বেটার একটি নতুন সংস্করণ তৈরি করি। ফায়ারফক্স বেটা মজিলার ভলান্টিয়ারদের টেস্ট করার জন্য রিলিজ দেয়া হয় এবং এরপর ফায়ারফক্সের পুর্নাঙ্গ সংস্করণে অন্তরভুক্ত করার জন্য তৈরি করা হয়।</p> - -<p><a href="https://www.mozilla.org/firefox/channel/#beta" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">ফায়ারফক্স বেটা ডাউনলোড</a></p> - -<h3 id="ফায়ারফক্স">ফায়ারফক্স</h3> - -<p>প্রায় দেড় মাস বেটা সংস্করণে থাকার পর, আমরা এখন নতুন ফিচার হাজার কোটি মানুষের কাছে ফায়ারফক্সের নতুন সংস্করণ পৌঁছে দিতে প্রস্তুত।</p> - -<p><a href="https://www.mozilla.org/firefox/channel/#firefox" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">ফায়ারফক্স ডাউনলোড</a></p> 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/ফায়ারফক্স/রিলিজস ---- -<div>{{FirefoxSidebar}}</div><p>"ফায়ারফক্স এক্স ডেভেলপারস" দেরকে ফায়ারফক্স এর প্রতিটি রিলিজ এর প্রতিবেদন এর লিঙ্ক দিচ্ছে এই পেজ। ফায়ারফক্স এর প্রতিটি ভার্শন এর সাথে কি কি ফিচার যোগ এবং ভুলগুলো মুছে ফেলা হয়েছে তা এই নোটস এর মাধ্যমে আপনি দেখতে পারবেন।</p> - -<div class="multiColumnList">{{ListSubpages("",1,0,1)}}</div> 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 ---- -<div>{{draft}}</div> - -<p>This will soon be an awesome landing page for Mozilla internals. For now, it's not.</p> - -<div>{{ListSubpages}}</div> 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 ---- -<div>{{MDNSidebar}}</div> - -<p>MDN শুধু একটি উইকি নয়: এটি ডেভেলপারদের একটি কমিউনিটি, যারা উন্মুক্ত ওয়েব প্রযুক্তি ব্যবহারকারী অন্যান্য ডেভেলপারদের জন্য MDN কে অসাধারন রিসোর্স হিসেবে গড়ে তোলার জন্য কাজ করছে। "আসল কাজ" হয় MDN সাইটে, আর "কমিউনিটির কাজ" হয় আলোচনা ও চ্যাট এর মাধ্যমে।</p> - -<p>আমরা খুশি হব, যদি আপনি MDN এ অবদান রাখেন; তবে আমরা আরও বেশি খুশি হব, যদি আপনি আমাদের কমিউনিটিতে অংশগ্রহণ করেন। নিচের এই তিনটি সহজ ধাপ অনুসরণ করে আপনি আমাদের সাথে যুক্ত হতে পারেন।</p> - -<ol style="list-style-type: -moz-bengali; list-style-type: bengali;"> - <li>একটি MDN অ্যাকাউন্ট তৈরি করুন।</li> - <li> কথোপকথনে যোগ দিন।</li> - <li>চলমান ঘটনার উপর নজর রাখুন।</li> -</ol> - -<h2 id="মোজিলার_ডেভেলপার_সম্পদায়_কিভাবে_কাজ_করে">মোজিলার ডেভেলপার সম্পদায় কিভাবে কাজ করে</h2> - -<p>নিছের আর্টিকেলগুলি MDN সম্প্রদায় সম্পর্কে আরো বেশী বর্ণনা করা হয়েছে।</p> - -<h2 id="নেটওয়ার্কে_অ্যাকাউন্ট_তৈরি_করা">নেটওয়ার্কে অ্যাকাউন্ট তৈরি করা</h2> - -<p>{{page("/bn-BD/docs/Project:MDN/অবদান/শুরু", "একটি অ্যাকাউন্ট তৈরি করা") }}</p> - -<h2 id="dev-mdc_আলোচনায়_সাবস্ক্রাইব">dev-mdc আলোচনায় সাবস্ক্রাইব</h2> - -<p>MDN এর কনটেন্ট এর কাজ নিয়ে আলোচনা করার জন্য মেইলিং লিস্ট হচ্ছে <span style="line-height: inherit;"> </span><a href="https://lists.mozilla.org/listinfo/dev-mdc" style="line-height: inherit;" title="https://lists.mozilla.org/listinfo/dev-mdc">dev-mdc@lists.mozilla.org</a>। বিভিন্ন উপায়ে আপনি আমাদের কথোপকথন পড়তে পারেন। আর আপনি যদি প্রশাসকের অনুমতির অপেক্ষা না করেই আপনার বার্তা পাঠাতে চান, তাহলে আপনাকে অবশ্যই মেইলিং লিস্টে অন্তর্ভুক্ত হতে হবে। এখানে আরও কিছু ভিন্ন পদ্ধতি আছে, যার মাধ্যমে আপনি মেইলিং লিস্টে অন্তর্ভুক্ত হতে পারেনঃ<span style="line-height: inherit;">{{DiscussionList("dev-mdc", "mozilla.dev.mdc")}}</span></p> - -<p>কেন "dev-mdc"? আগে এটা "Mozilla Developer Center" বা MDC হিসেবে পরিচিত ছিল। তাই সেই আগের নাম অনুযায়ী মেইলিং লিস্টটি <span style="line-height: 21px;">dev-mdc হয়েছে। একটি </span><a href="https://lists.mozilla.org/listinfo/dev-mdn" style="line-height: inherit;" title="https://lists.mozilla.org/listinfo/dev-mdn">dev-mdn</a><span style="line-height: inherit;"> মেইলিং লিস্টও রয়েছে। </span><a href="https://github.com/mozilla/kuma" style="line-height: inherit;" title="https://github.com/mozilla/kuma">Kuma</a><span style="line-height: inherit;"> প্ল্যাটফর্ম, যেটা দিয়ে MDN চলে, সেটা ডেভেলপ করার জন্য ডেভেলপাররা এখানে আলোচনা করে। আপনাকে এখানেও যুক্ত হওয়ার জন্য স্বাগত জানানো হচ্ছে। কিন্তু আপনার যদি শুধু MDN এর কনটেন্ট এর প্রতি আগ্রহ থাকে, তবে এখানে যুক্ত হওয়ার প্রয়োজন নেই।</span></p> - -<h2 id="ইন্টারনেট_রিলে_চ্যাট_বা_IRC_তে_যোগদান">ইন্টারনেট রিলে চ্যাট বা IRC তে যোগদান</h2> - -<p>মোজিলা প্রজেক্টের অন্যান্য অংশের মতো MDN কমিউনিটি ব্যবহারকারীরা অনলাইন চ্যাট করার জন্য IRC ব্যবহার করে। <span style="line-height: inherit;">irc.mozilla.org এর মধ্যে</span><span style="line-height: inherit;"> নিচের IRC চানেল গুলো </span><span style="line-height: inherit;">MDN সংশ্লিষ্টঃ</span></p> - -<ul> - <li><a href="irc://irc.mozilla.org/devmo" title="irc://irc.mozilla.org/devmo">#devmo</a>: MDN এর কনটেন্ট নিয়ে আলোচনা করার জন্য।</li> - <li><a href="irc://irc.mozilla.org/mdndev" title="http://irc.mozilla.org/devmo">#mdndev</a>: MDN প্ল্যাটফর্ম এর উন্নয়নের আলোচনা করার জন্য (যা <a href="/en-US/docs/Project:MDN/Kuma" title="/en-US/docs/Project:MDN/Kuma">Kuma</a> হিসেবেও পরিচিত)</li> - <li><a href="irc://irc.mozilla.org/mdn" title="irc://irc.mozilla.org/mdn">#mdn</a>: পাঁচমিশালি আলোচনার জন্য; MDN সম্পর্কিত কোন কিছু জিজ্ঞাসা থাকলে আপনি যদি নিশ্চিত না হন, যে কোথায় জিজ্ঞেস করবেন, এখানে জিজ্ঞেস করতে পারেন।</li> -</ul> - -<p>খুব সম্ভবত এই চ্যানেল গুলো উত্তর আমেরিকায় রবিবার বাদে অন্য সব দিন চালু থাকে।</p> - -<p>যদি আপনি আগে কখনো IRC ব্যবহার নাকরে থাকেন, তবে <a href="http://wiki.mozilla.org/IRC" title="http://wiki.mozilla/org/IRC">IRC সম্পর্কে জানুন</a>। <a href="https://addons.mozilla.org/en-US/firefox/addon/chatzilla/" title="https://addons.mozilla.org/en-US/firefox/addon/chatzilla/">ChatZilla</a> হচ্ছে IRC ক্লায়েন্ট যা একটি ফায়ারফক্স অ্যাড-অন হিসেবে তৈরি করা হয়েছে।</p> - -<h2 id="পরবর্তী_ধাপ">পরবর্তী ধাপ</h2> - -<ul> - <li><a href="/bn-BD/docs/Project:MDN/%E0%A6%85%E0%A6%AC%E0%A6%A6%E0%A6%BE%E0%A6%A8" title="/bn-BD/docs/Project:MDN/%E0%A6%85%E0%A6%AC%E0%A6%A6%E0%A6%BE%E0%A6%A8">MDN এ অবদান রাখাঃ</a> MDN এ কাজ করার জন্য সহায়িকা এবং সাজেশনের জন্য এখানে দেখুন।</li> - <li><a href="/bn-BD/docs/Project:MDN/অবদান/চলমান_ঘটনাবলি_সম্পর্কে" title="/en-US/docs/Project:MDN/Contributing/Follow_what_s_happening">চলমান ঘটনাবলি সম্পর্কে জানুনঃ</a> MDN এর সাথে যুক্ত থাকার জন্য আরও কিছু পথ। আসলে এটি মোজিলার ডেভেলপারদের একসঙ্গে থাকার জন্য।</li> -</ul> 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 ---- -<div>{{MDNSidebar}}</div><p>MDN তৈরি হয়েছে মোজিলার <a href="https://wiki.mozilla.org/Engagement/Developer_Engagement" title="https://wiki.mozilla.org/Engagement/Developer_Engagement">Websites and Developer Engagement</a> কমিউনিটির দ্বারা। নিচে কিছু রাস্তা বলে দেয়া আছে যার মাধ্যমে আমরা কি করছি, সে সম্পর্কে তথ্য ভাগাভাগি করি।</p> -<h3 id="ব্লগ">ব্লগ</h3> -<dl> - <dt> - <a href="https://hacks.mozilla.org/" title="https://hacks.mozilla.org/">Mozilla Hacks</a></dt> - <dd> - ওয়েব, মোজিলা টেকনোলজি এবং ফিচার সম্পর্কে বিস্তারিত খবর এখানে পাওয়া যাবে। </dd> - <dt> - ডেভেলপারদের সংযুক্ত করা</dt> - <dd> - শীঘ্রই আসছে! কমিউনিটির মধ্যে তৎপরতা এবং আলোচনার প্রসার করতে খুব শীঘ্রই এটি চালু করা হবে। এর মাধ্যমে ডেভেলপারদের সংঘবদ্ধ ও সংযুক্ত রাখা যাবে।</dd> -</dl> -<h3 id="সামাজিক_যোগাযোগ">সামাজিক যোগাযোগ</h3> -<ul> - <li><a href="https://twitter.com/mozhacks" title="https://twitter.com/mozhacks"><span id="cke_bm_286S" class="hidden"> </span>@MozHacks</a>: নিত্য নতুন ওয়েব টেকনোলজি, দারুন সব HTML5 অ্যাপ এবং ফায়ারফক্স ফিচার সম্পর্কে টুইট।</li> - <li><a href="https://twitter.com/NewOnMDN" title="https://twitter.com/NewOnMDN">@NewOnMDN</a>: নতুন পৃষ্ঠা গুলোর সংকলন, উল্লেখযোগ্য হালনাগাদ এবং মোজিলা ডেভেলপার নেটওয়ার্ক সম্পর্কে অন্যান্য খবর।</li> - <li><a href="https://plus.google.com/+MozillaDeveloperNetwork" title="https://plus.google.com/+MozillaDeveloperNetwork">+MozillaDeveloperNetwork</a></li> - <li><a href="http://www.youtube.com/user/mozhacks" title="http://www.youtube.com/user/mozhacks">Mozilla Hacks (YouTube)</a></li> - <li><a href="https://twitter.com/mozhacks/moz-developer-engagement" title="https://twitter.com/mozhacks/moz-developer-engagement">Moz Developer Engagment</a>: ডেভেলপারদের সংযুক্ত করার জন্য টুইটারে যারা সক্রিয় রয়েছেন, তাদের লিস্ট।</li> -</ul> -<h3 id="MDN_কমিউনিটি_সভা">MDN কমিউনিটি সভা</h3> -<p>কমিউনিটির সভা প্রতি দুই সপ্তাহ অন্তর বুধবারে, মার্কিন প্রশান্ত মহাসাগরীয় সময় ১০:০০ টায় (UTC-0800 অক্টোবর-মার্চ, UTC-0700 মার্চ-অক্টোবর), <a href="irc://irc.mozilla.org/devmo" title="irc://irc.mozilla.org/devmo">#devmo</a> <a href="http://wiki.mozilla.org/IRC" title="http://wiki.mozilla.org/IRC">IRC</a> চানেলে অনুষ্ঠিত হয়। <span style="line-height: inherit;">আগের সভা গুলোর আলোচ্য সূচি দেখার জন্য</span><span style="line-height: inherit;"> </span><a href="https://wiki.mozilla.org/MDN/Community_meetings" style="line-height: inherit;" title="https://wiki.mozilla.org/MDN/Community_meetings">MDN community meetings</a> এর উইকি পাতা দেখতে পারেন।</p> -<p><a class="external text" href="https://mail.mozilla.com/home/publiccalendar@mozilla.com/MDN_Events.html" rel="nofollow">MDN Events</a> ক্যালেন্ডারে MDN কমিউনিটির সভা, ডক এর সংকলন এবং MDN সংশ্লিষ্ট অন্যান্য অনুষ্ঠান সম্পর্কিত তথ্য থাকে।</p> 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 ---- -<div>{{MDNSidebar}}</div><p>এভাবে আমরা MDN এ একটি অ্যাকাউন্ট তৈরি করবোঃ</p> -<ol style="list-style-type: -moz-bengali; list-style-type: bengali;"> - <li>পাতার উপরে থাকা<strong> Sign in</strong> <strong>with Persona</strong> বাটনে ক্লিক করুন। একটি পারসোনা লগইনের উইন্ডো চালু হবে।</li> - <li>নতুন অ্যাকাউন্ট এর জন্য যে ইমেইল ঠিকানা ব্যবহার করতে চান, সেটি লিখুন এবং <strong>next </strong>এ ক্লিক করুন।</li> - <li>এরপরে যেটা হবে, তা নির্ভর করে যে, আপনি এর আগে এই ইমেইল ঠিকানাটি পারসোনায় ব্যবহার করেছেন, কি না। - <ul> - <li>যদি এর আগে ব্যবহার করে থাকেন, তবে পারসোনা উইন্ডোটি আপনার পাসওয়ার্ড চাইবে। পাসওয়ার্ড দিন এবং <strong>done</strong> ক্লিক করুন।</li> - <li>যদি এর আগে কখনো পারসোনা ব্যবহার না করে থাকেন, তবে আপনাকে পাসওয়ার্ড নির্বাচন করতে বলবে। - <ol style="list-style-type: -moz-bengali; list-style-type: bengali;"> - <li>দুইবার পাসওয়ার্ড দিন এবং <strong>done</strong> ক্লিক করুন।</li> - <li>আপনার ইমেইল চেক করুন এবং দেখুন যে, no-reply@persona.org থেকে কোন মেইল এসেছে কি না; যদি ইনবক্সে না পান, তবে spam বক্সে দেখুন।</li> - <li> মেসেজে থাকা নিবন্ধন লিঙ্কে ক্লিক করুন। আপনার পারসোনা অ্যাকাউন্ট তৈরি।</li> - <li>এবার আপনি যে ট্যাব বা উইন্ডো থেকে MDN এ প্রবেশ (signing in) করতে গিয়েছিলেন, সেখানে ফিরে যান।</li> - </ol> - </li> - </ul> - </li> - <li>একবার যখন আপনি পারসোনায় অনুমোদিত হয়ে যাবেন, তখন MDN এর জন্য একটি নতুন ব্যবহারকারী পাতা (Profile page) পাবেন।</li> - <li>আপনার প্রোফাইলের জন্য একটি নাম (user name) নির্বাচন করুন এবং <strong>Create new profile</strong> ক্লিক করুন।</li> -</ol> -<div class="note"> - <p><strong>বিশেষ দ্রষ্টব্য:</strong> নতুন ইউজার নামের মধ্যে কোন স্পেস বা @ থাকতে পারবে না। মনে রাখবেন, আপনি যেসব কাজ করেছেন, তা চিহ্নিত করতে আপনার ইউজারনেম সার্বজনীন ভাবে প্রদর্শন করা হবে।</p> -</div> -<p> </p> 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 ---- -<p>{{draft()}}</p> -<p>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.</p> -<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">overview page</a> 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.</p> -<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">custom events page</a> 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.</p> -<p>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.</p> -<p>The <strong>device</strong> 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 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> and the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a>. That is different, but similar, to the change in device vertical orientation. </p> -<p>The <strong>window</strong> in which the browser is displayed which might trigger events, for example, change size if the user maximizes the window or otherwise changes it.</p> -<p>The <strong>process</strong> 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.</p> -<p>The <strong>user interaction</strong> 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:</p> -<ul> - <li>the original 'click' event,</li> - <li>mouse events,</li> - <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events">mouse gesture events</a>, and</li> - <li>both <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">touch events</a> and the earlier, but deprecated, <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)">mozilla experimental touch events</a>.</li> -</ul> -<p>The <strong>modification of the web page</strong> in structure or content might trigger some events, as is explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events">mutation events page</a>, but the use of these events has been deprecated in favour of the lighter <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> approach.</p> -<p>The <strong>media streams</strong> embedded in the HTML documents might trigger some events, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Media_events">media events</a> page.</p> -<p>The <strong>network requests</strong> made by a web page might trigger some events.</p> -<p>There are many other sources of events defined by web browsers for which pages are not yet available in this guide.</p> -<div class="note"> - <p>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.</p> -</div> -<h2 id="Docs">Docs</h2> -<p>{{LandingPageListSubpages}}</p> 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/ত্রিমাত্রিক_দর্শন ---- -<div>{{ToolsSidebar}}</div> - -<p><span id="result_box" lang="bn"><span class="hps">যখন আপনি ত্রিমাত্রিক(<span id="result_box" lang="bn"><span class="hps">3D</span></span>) দর্শন</span> বোতাম চাপ দিবেন<span class="hps">,</span><span class="hps"> পাতা</span>টি ত্রিমাত্রিক দর্শন <span class="hps">প্রক্রিয়ায় যাবে</span><span>;</span><span class="hps"> এই</span> <span class="hps">প্রক্রিয়ায় আপনি</span><span id="result_box" lang="bn"><span class="hps"> দেখতে পাবেন</span></span> আপনার পাতা <span id="result_box" lang="bn"><span class="hps">ত্রিমাত্রিক(</span></span><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">3D)</span> <span class="hps">দৃশ্যে<span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps"> উপস্থাপন</span></span></span></span> করে <span id="result_box" lang="bn"><span class="hps">HTML-এর</span></span></span></span></span></span><span class="hps"> চারকোনা<span id="result_box" lang="bn"><span id="result_box" lang="bn"><span class="hps"> ঘর যা ক্রমবর্ধমান</span> <span class="atn hps">"</span><span>লম্বা</span><span>"</span> <span class="hps">হয়, যেটি </span></span></span></span><span class="hps">আপনার পৃষ্ঠা</span>কে বাইরের দিকে ঠেলে দিচ্ছে<span>।</span><span class="hps"> এই দৃশ্যে দেখা যায় আপনার বিষয়বস্তু</span><span class="hps">গুলো আরও সহজে ঘরের আকৃতিতে প্রকাশ পায়।</span></span></p> - -<p><img alt="" class="default internal" src="/files/3625/3dview.png"></p> - -<p><span id="result_box" lang="bn"><span class="hps">চেপে রেখে এবং টেনে ধরে</span><span class="hps">, বিভিন্ন কোণ থেকে দেখার জন্য আপনি</span> <span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">পৃষ্ঠার</span> <span class="hps">DOM(</span></span></span><span id="result_box" lang="bn"><span id="result_box" lang="bn"><span class="hps">Document Object Model)</span> <span class="hps">অনুক্রমের</span> </span>ত্রিমাত্রিক বর্ণনাটি <span class="hps">ঘোরাতে পারেন</span> <span class="hps">এবং</span> <span class="hps">পুনরায়</span> দ্যুতিময় করতে পারেন<span>, </span><span class="hps">এর</span> কাঠামো <span id="result_box" lang="bn"><span class="hps">ভালো</span></span>মতো <span class="hps">পরীক্ষার জন্য</span><span>।</span> <span class="hps">পর্দার আড়ালে থাকা উপাদানসমূহ দৃশ্যমান হবে</span><span class="hps">, যার ফলে আপনি দেখতে পাবেন কোথায় উপাদানগুলোর সম্পর্ক স্থাপিত হয় দৃশ্যমান উপাদান এর সাথে।</span> আপনি উপাদানে চেপে HTML সূচি অথবা Style সূচি থেকে তাদের HTML<span class="hps"> দেখতে পারেন।</span> <span class="hps">বিপরীতভাবে, আপনি breadcrumb bar(এক প্রকার পরিভ্রমণ দণ্ড) এর উপাদানগুলোতে চেপে কোন কোন উপাদান ত্রিমাত্রিক দৃশ্যে থাকবে তা নির্বাচন করতে পারবেন</span><span class="hps">।</span></span></p> - -<p>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 <a class="link-https" href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers" title="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">blocklisted drivers page</a> for more information.</p> - -<h2 id="Controlling_the_3D_view">Controlling the 3D view</h2> - -<p>There are keyboard shortcuts and mouse controls available for the 3D view.</p> - -<table class="standard-table" style="width: auto;"> - <tbody> - <tr> - <td class="header">Function</td> - <td class="header">Keyboard</td> - <td class="header">Mouse</td> - </tr> - <tr> - <td>Zoom in/out</td> - <td>+ / -</td> - <td>Scroll wheel up/down</td> - </tr> - <tr> - <td>Rotate left/right</td> - <td>a / d</td> - <td>Mouse left/right</td> - </tr> - <tr> - <td>Rotate up/down</td> - <td>w / s</td> - <td>Mouse up/down</td> - </tr> - <tr> - <td>Pan left/right</td> - <td>← / →</td> - <td>Mouse left/right</td> - </tr> - <tr> - <td>Pan up/down</td> - <td>↑ / ↓</td> - <td>Mouse up/down</td> - </tr> - <tr> - <td>Reset zoom level</td> - <td>0</td> - <td>Resets the zoom level to the default</td> - </tr> - <tr> - <td>Focus on selected node</td> - <td>f</td> - <td>Makes sure the currently selected node is visible</td> - </tr> - <tr> - <td>Reset view</td> - <td>r</td> - <td>Resets zoom, rotation, and panning to the default</td> - </tr> - <tr> - <td>Hide current node</td> - <td>x</td> - <td>Makes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured</td> - </tr> - </tbody> -</table> - -<h2 id="Use_cases_for_the_3D_view">Use cases for the 3D view</h2> - -<p>There are a variety of ways the 3D view is useful:</p> - -<ul> - <li>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.</li> - <li>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.</li> - <li>You can get a look at how your page is structured to see if there may be ways to optimize your layout.</li> - <li>And, of course, it looks <strong>awesome</strong>.</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li> - <li><a href="/en/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li> - <li><a href="/en/Tools/Page_Inspector/Style_panel" title="en/Tools/Page_Inspector/Style panel">Style panel</a></li> - <li><a href="/en/Tools" title="Tools">Tools</a></li> - <li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (blog post)</li> -</ul> - -<p>{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}</p> 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 ---- -<div>{{ToolsSidebar}}</div> - -<div class="summary"><span class="seoSummary">ডেস্কটপ এবং মোবাইলে HTML, CSS এবং জাভাস্ক্রিপ্ট পরীক্ষা, সম্পাদন এবং ডিবাগ করুন</span></div> - -<div class="column-container zone-callout"><a href="https://www.mozilla.org/firefox/channel/#aurora" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">ফায়ারফক্স অরোরা ইন্সটল করুন</a> - -<h3 id="What's_new_in_Aurora.3F" name="What's_new_in_Aurora.3F">অরোরাতে নতুন কি আছে?</h3> - -<p>অরোরা হচ্ছে ফায়ারফক্সের প্রিভিউ বিল্ড, যেখানে আপনি যেকোনো নতুন ফিচার সর্বসাধারণের জন্য উন্মুক্ত করার আগেই ব্যবহারের সুযোগ পাবেন। বর্তমান অরোরাতে ডেভেলপার টুলসে নিচের আপডেট সমূহ রয়েছে:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Storage_Inspector">স্টোরেজ ইনস্পেক্টর: একটি নতুন টূল, যেটা আপনাকে ওয়েব পেজ সমূহের স্টোর করা ডাটা সমূহ দেখতে সহায়তা করবে</a></li> - <li><a href="/en-US/docs/Tools/Performance">পারফরম্যান্স টূল: উন্নত প্রফাইলার ইউজার ইন্টারফেস এবং ফ্রেমরেট টাইমলাইন</a></li> - <li><a href="/en-US/docs/tools/Working_with_iframes">ফ্রেম সুইচিং: পেজের মধ্যে একটি নির্দিষ্ট iframe এ ডেভেলপার টুলসকে কেন্দ্রীভূত করতে পারবেন</a></li> - <li><a href="/en-US/docs/Web/API/Console.table">console.table সমর্থন</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector#Examining_event_listeners">পেজ ইনস্পেক্টরের মধ্যে এখন jQuery ইভেন্ট দেখা যায়</a></li> - <li><a href="/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">টুলবক্সে নতুন প্যানেল যুক্ত করার জন্য এক্সটেনশন এপিআই।</a></li> -</ul> -</div> - -<div class="column-container zone-callout"><a href="http://mzl.la/devtools" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">আপনার আইডিয়া শেয়ার করুন</a> - -<h3 id="Share_your_ideas" name="Share_your_ideas">আপনার আইডিয়া শেয়ার করুন</h3> - -<p>ডেভেলপার টুলসে নতুন ফিচারের জন্য অনুরোধ করুন অথবা অন্যান্য ডেভেলপারের আবেদন করা আইডিয়ার জন্য ভোট করুন।</p> -</div> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7307/inspector.png" style="display: block; height: 467px; margin-left: auto; margin-right: auto; width: 815px;"></p> - -<div class="column-container"> -<div class="column-half"> -<h2 id="Creating" name="Creating">তৈরি করা</h2> - -<p>ওয়েবসাইট এবং ওয়েব অ্যাপ এর জন্য অথরিং টুলস।</p> - -<dl> - <dt><a href="/en-US/docs/Tools/Scratchpad">স্ক্র্যাচপ্যাড</a></dt> - <dd>ফায়ারফক্স এর ভেতরে একটি টেক্সট এডিটর দেয়া আছে যা আপনাকে জাভাস্ক্রিপ্ট লিখতে এবং এক্সিকিউট করতে দেয়।</dd> - <dt><a href="/en-US/docs/Tools/Style_Editor">স্টাইল এডিটর</a></dt> - <dd>বর্তমান পেজ এর CSS স্টাইল দেখুন এবং এডিট করুন।</dd> - <dt><a href="/en-US/docs/Tools/Shader_Editor">শেডার এডিটর</a></dt> - <dd>WebGL এর ব্যবহার করা ফ্র্যাগমেন্ট শেডার সহ সবকিছু দেখুন এবং সম্পাদনা করুন</dd> - <dt><a href="/en-US/docs/Tools/Web_Audio_Editor">ওয়েব অডিও এডিটর</a></dt> - <dd>একটি অডিও কনটেক্সটে অডিও নোডের গ্রাফ পরীক্ষা করুন এবং তাদের প্যারামিটার পরিবর্তন করুন।</dd> -</dl> -</div> - -<div class="column-half"> -<h2 id="Exploring" name="Exploring">এক্সপ্লোর ও ডিবাগ করুন </h2> - -<p>Examine, explore, and debug websites and web apps.</p> - -<dl> - <dt><a href="/en-US/docs/Tools/Web_Console">Web Console</a></dt> - <dd>See messages logged a web page, and interact with the page using JavaScript.</dd> - <dt>পেজ ইন্সপেক্টর</dt> - <dd>এইচটিএমএল , সিএসএস দেখতে এবং সম্পাদন করতে সহায়তা করে</dd> - <dt><a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a></dt> - <dd>Stop, step through, examine and modify the JavaScript running in a page.</dd> - <dt><a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></dt> - <dd>See the network requests made when a page is loaded.</dd> - <dt><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></dt> - <dd>Inspect cookies, local storage, indexedDB and session storage present in a page.</dd> - <dt><a href="/en-US/docs/Tools/GCLI">Developer Toolbar</a></dt> - <dd>A command-line interface for the developer tools.</dd> - <dt><a href="/en-US/docs/Tools/3D_View">3D View</a></dt> - <dd>3D visualization of the page.</dd> - <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt> - <dd>Select a color from the page.</dd> - <dt><a href="/en-US/docs/Tools/Working_with_iframes">Working with iframes</a></dt> - <dd>How to target a particular iframe.</dd> -</dl> -</div> -</div> - -<hr> -<div class="column-container"> -<div class="column-half"> -<h2 id="Mobile" name="Mobile">মোবাইল</h2> - -<p>মোবাইল ডেভেলপ করার টুলস সমূহ.</p> - -<dl> - <dt>অ্যাপ ম্যানেজার</dt> - <dd>ফায়ারফক্স ওএস অ্যাপ ডিজাইন এবং ডেভেলপ।</dd> - <dt><a href="/en-US/docs/Tools/WebIDE">WebIDE</a></dt> - <dd>অ্যাাপ ম্যানেজারের প্রতিস্তাপক যা ফায়ারফক্স ৩৩ ভার্সন থেকে শুরু হয়েছে।</dd> - <dt><a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a></dt> - <dd>Run and debug your Firefox OS app on the desktop, without needing a real Firefox OS device.</dd> - <dt><a href="/en-us/docs/Tools/Responsive_Design_View">Responsive Design View</a></dt> - <dd>See how your website or app will look on different screen sizes without changing the size of your browser window.</dd> - <dt><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Debugging on Firefox for Android</a></dt> - <dd>Connect the developer tools to Firefox for Android.</dd> -</dl> -</div> - -<div class="column-half"> -<h2 id="Performance" name="Performance">Performance</h2> - -<p>Diagnose and fix performance problems.</p> - -<dl> - <dt><a href="/en-US/docs/Tools/Performance">Performance tool</a></dt> - <dd>Revamped JS profiler and frame rate timeline.</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/Tools/Profiler">JavaScript Profiler</a></dt> - <dd>Figure out where your JavaScript code is spending its time.</dd> - <dt><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></dt> - <dd>Highlights the parts of the page that are repainted in response to events.</dd> - <dt><a href="/en-US/docs/Tools/Web_Console#Reflow_events">Reflow Event Logging</a></dt> - <dd>See reflow events in the web console.</dd> - <dt><a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Network Performance</a></dt> - <dd>See how long the parts of your site take to load.</dd> -</dl> -</div> -</div> - -<hr> -<div class="column-container"> -<div class="column-half"> -<h2 id="Debugging_the_browser" name="Debugging_the_browser">Debugging the browser</h2> - -<p>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.</p> - -<dl> - <dt><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></dt> - <dd>See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.</dd> - <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt> - <dd>Attach the Developer Tools to the browser itself.</dd> -</dl> -</div> - -<div class="column-half"> -<h2 id="Extending_the_devtools" name="Extending_the_devtools">Extending the devtools</h2> - -<p>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.</p> - -<dl> - <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></dt> - <dd>The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.</dd> - <dt><a href="/en-US/docs/Tools/Editor">Source Editor</a></dt> - <dd>A code editor built into Firefox that can be embedded in your add-on.</dd> - <dt><a href="/en-US/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></dt> - <dd>How to extend and customize the output of the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> and the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>.</dd> -</dl> -</div> -</div> - -<hr> -<h2 id="More_resources" name="More_resources">More resources</h2> - -<p>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 <a href="https://addons.mozilla.org/en-US/firefox/extensions/web-development/">“Web Development” category on addons.mozilla.org</a>.</p> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt><a href="https://www.getfirebug.com/">Firebug</a></dt> - <dd>A very popular and powerful web development tool, including a JavaScript debugger, HTML and CSS viewer and editor, and network monitor.</dd> - <dt><a href="/en-US/docs/DOM_Inspector">DOM Inspector</a></dt> - <dd>Inspect, browse, and edit the DOM of web pages or XUL windows.</dd> - <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer</a></dt> - <dd>Adds a menu and a toolbar to the browser with various web developer tools.</dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt><a href="https://webmaker.org/en-US/tools/">Webmaker Tools</a></dt> - <dd>A set of tools developed by Mozilla, aimed at people getting started with Web development.</dd> - <dt><a href="http://www.w3.org/Status.html">W3C Validators</a></dt> - <dd>The W3C website hosts a number of tools to check the validity of your website, including its <a href="http://validator.w3.org/" title="http://validator.w3.org/">HTML</a> and <a href="http://jigsaw.w3.org/css-validator/" title="http://jigsaw.w3.org/css-validator/">CSS</a>.</dd> - <dt><a href="http://www.jshint.com/">JSHint</a></dt> - <dd>JavaScript code analysis tool.</dd> -</dl> -</div> -</div> 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 ---- -<div>{{ToolsSidebar}}</div><p>যে কোন পেজের গঠন ও লেআউট পরীক্ষা বা সংস্কারের জন্য ইন্সপেক্টর ব্যবহার করুন। </p> - -<h2 id="ইন্সপেক্টর_ওপেন_করা">ইন্সপেক্টর ওপেন করা</h2> - -<p>ইন্সপেক্টর ওপেন করার বেশ কিছু উপায় আছেঃ</p> - -<ul> - <li>'ওয়েব ডেভলপার' মেনু থেকে 'ইন্সপেক্টর' অপশনটি choose করুন (Mac এর 'টূলস্' মেনুতে এটি একটি সাবমেনু)</li> - <li>Ctrl-Shift-C চাপুন (ম্যাক OS X ও লিনাক্সে Cmd-Option-C )</li> - <li>ওয়েব পেজের যে কোন একটি এলিমেন্টে রাইট-ক্লিক করুন এবং 'ইন্সপেক্ট এলিমেন্ট' সিলেক্ট করুন</li> -</ul> - -<p>ইন্সপক্টর এক্টিভেট করার সাথে সাথে ব্রাউজার উইন্ডোর উপরে <a href="/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> দেখা যাবে।</p> - -<p>আপনি যদি 'ইন্সপেক্টর এলিমেন্ট' এ ক্লিক করে ইন্সপেক্টর invoke করে থাকেন তাহলে এলিমেন্ট এরই মধ্যে সিলেক্ট হয়ে থাকবে এবং ইন্সপেক্টরটি নিম্নবণিতভাবে কাজ করবে যেভাবে এটি <a href="#Selecting-Elements" title="#Selecting-Elements">'সিলেক্টিং এলিমেন্টস্'</a> এ কাজ করে।</p> - -<p>যদি তা না হয়ে থাকে তাহলে আপনি যখন আপনার মাউস পেজটিতে ঘুরাবেন তখন মাউসের নিচের এলিমেন্ট dotted বডার দিয়ে হাইলাইট হয়ে যাবে এবং একটি অ্যানোটেশন এটির HTML ট্যাগ ডিসপ্লে করবে। একই সাথে, এর HTML ডেফিনেশনও ইন্সপেক্টরের বাঁ দিকের pane কন্টেক্সটে ডিসপ্লে হয়ে যাবে।</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5323/inspector-no-element-selected.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>এলিমেন্টের উপর ক্লিক করলে তা সিলেক্ট হয়ঃ আপনি একটি এলিমেন্ট সিলেক্ট করে থাকলে ইন্সপেক্টরটি নিচের মত দেখাবে ও কাজ করবে সেভাবে যেভাবে তা নিচের <a href="#Selecting-Elements" title="#Selecting-Elements">"সিলেক্টিং এলিমেন্টস্"</a> এ কাজ কড়ে।</p> - -<h2 id="এলিমেন্ট_সিলেক্ট_করা"><a name="Selecting-Elements">এলিমেন্ট সিলেক্ট করা</a></h2> - -<p>যখন একটি এলিমেন্ট সিলেক্ট করা হয় তখন তার মার্কআপ ইন্সপেক্টরের বাঁ দিকে HTML paneএ হায়লাইট হয়ে যায় এবং ইন্সপেক্টরের ডান CSS pane এর স্টাইল ইনফরমেশন শো করেঃ</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6919/inspector-annotated3.png" style="display: block; margin-left: auto; margin-right: auto;">এভাবেই এলিমেন্ট সিলেকশনের বিভিন্ন কাজ উল্লেখযোগ্যভাবে পরিবর্তিত হ্য ফায়ারফক্স 29এ।</p> - -<h3 id="ফায়ারফক্স_29_এর_আগে">ফায়ারফক্স 29 এর আগে</h3> - -<p>আপনি যখন একবার কোন পেজে একটি এলিমেন্টে ক্লিক করে এটি সিলেক্ট করেন তখনই ইন্সপেক্টর'স ডিসপ্লে সেই এলিমেন্টে লক হয়ে যায়। সেজন্য আপনি অন্য কোন ইন্সপেক্টর না চালু করেই মাউস ঘোরাতে পারেন।</p> - -<p>এলিমেন্টের জন্য নির্ধারিত annotationটির ডানদিকে ও বাঁদিকে একটি করে বাটন থাকে। বাঁ দিকের বাটনটি আপনাকে নতুন এলিমেন্ট সিলেক্ট করার সুযোগ দিয়ে পুরনো এলিমেন্ট আনলক করে। ডানদিকের বাটনটি এলিমেন্টটির জন্য একটি <a href="/en-US/docs/Tools/Page_Inspector#Element_popup_menu">পপআপ মেনু</a> ডিসপ্লে করে।</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6921/inspector-element-annotation.png" style="display: block; height: 167px; margin-left: auto; margin-right: auto; width: 389px;"></p> - -<h3 id="ফায়ারফক্স_29_ও_তার_পর">ফায়ারফক্স 29 ও তার পর</h3> - -<p>ফায়ারফক্স 29 থেকে পেজের কোন এলিমেন্টের সিলেক্ট করলে এর চারদিকের ডট দেওয়া বর্ডার এবং এর জন্য নির্ধারিত অনোটেশন দেখানো হয় না। এমনকি এলিমেন্ট সিলেক্ট করার সাথে সাথে ইন্সপেক্টরগুলোও লক হয়ে যায় না। আপনি যখন মারকাপ পেন এর চারদিকে মাউসটি মুভ করেন তখন কোরেস্পন্ডিঙ এলিমেন্টের চারদিকে ডট দেওয়া বর্ডার দেখা জায়।অয়েব পেজের কোন ভিনণ এলিমেন্ট সিলেক্ট করার জন্য "Select element" বাটনটি ক্লিক করুন, যা এখন <a href="/en-US/docs/Tools_Toolbox#Toolbar">Toolbox toolbar</a> দেখা যায়ঃ</p> - -<p>{{EmbedYouTube("zBYEg40ByCM")}}</p> - -<h2 id="এলিমেন্ট_পপআপমেনু"><a name="Element_popup_menu">এলিমেন্ট পপআপমেনু </a></h2> - -<div class="geckoVersionNote"> -<p>ফায়ারফক্স 29 থেকে পরবর্তীতে ওয়েব পেজের অটোনেশন আর দেখা জায় না। তাই শুধুমাত্র HTML পেন এ কনট্যাক্স-ক্লিকিন এর মাধ্যমে পপআপ মেনু ওপেন করতে পারেন</p> -</div> - -<p>পপআপ মেনু ব্যবহার করে আপনি যে কোন নির্দিষ্ট ক্ষেত্রে বেশ কিছু সাধারণ কাজ করতে পাড়েন। আপনি দুইভাবে মেনুটি এক্টিভেট করতে পারেনঃ</p> - -<ul> - <li>ওয়েব পেজের এলিমেন্টে সংযুক্ত অ্যানোটেশনের ডানদিকের বাটনে ক্লিক করুনঃ</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6347/inspector-element-selected-context-menu-cropped.png" style="display: block; height: 291px; margin-left: auto; margin-right: auto; width: 399px;"></p> - -<ul> - <li>কন্টেক্সট - <a href="#HTML_pane">HTML pane</a> র এলিমেন্টে ক্লিক করুনঃ</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6349/inspector-html-context-menu.png" style="display: block; height: 299px; margin-left: auto; margin-right: auto; width: 399px;"></p> - -<p>মেনুটি আপনাকে যা যা করতে সুযোগ দেয়ঃ</p> - -<ul> - <li><a href="#Editing_HTML">এলিমেন্টের HTML এডিট করা</a> (শুধুমাত্র ফায়ারফক্স 27 থেকে পরবর্তী)</li> - <li> ইনার অথবা আউটার HTML কপি করা</li> - <li> CSS সিলেক্টর কপি করা যা নিজে থেকে এলিমেন্ট সিলএক্ট করে</li> - <li>এলিমেন্ট ডিলেট করা</li> - <li><a href="/en-US/docs/Web/CSS/:hover" title="/en-US/docs/Web/CSS/:hover">:hover</a>, <a href="/en-US/docs/Web/CSS/:focus" title="/en-US/docs/Web/CSS/:focus">:focus</a> এবং <a href="/en-US/docs/Web/CSS/:active" title="/en-US/docs/Web/CSS/:active">:active</a> CSS সিউডো-ক্লাসগুলো সেট করা</li> -</ul> - -<h3 id="ডাটা_URL_হিসাবে_ইমেজ_কপি_করা">ডাটা URL হিসাবে ইমেজ কপি করা</h3> - -<div class="geckoVersionNote"> -<p>ডাটা URL হিসাবে কপি করা ফায়ারফক্স 29এ নতুন।</p> -</div> - -<p>ফায়ারফক্স 29 থেকে পরবর্তীতে, যদি currently selected এলিমেন্টটি কোন ইমেজ হয় তাহলে পপআপ মেনুতে একটি অপশন থাকে ডাটা ইউ আর এল হিসাবে ক্লিপবোর্ডে ইমেজ কপি করার জন্যঃ</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7011/inspector-copyasdatauri.png" style="display: block; height: 282px; margin-left: auto; margin-right: auto; width: 529px;"></p> - -<h3 id="HTML_এডিট_করা"><a name="Editing_HTML">HTML এডিট করা</a></h3> - -<div class="geckoVersionNote"> -<p>HTML এডিট করা শুধুমাত্র ফায়ারফক্স 27 এই সহজলভ্য।</p> -</div> - -<p>কোন এলিমেন্টের <a href="/en-US/docs/Web/API/Element.outerHTML">আউটারHTML</a> এডিট করার জন্য এলিমেন্টের পপআপ মেনু এক্টিভেট করে সিলেক্ট করুন "Edit As HTML"। আপনি HTML paneএ একটি টেক্সট-বক্স দেখবেনঃ</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6351/inspector-html-edit-html.png" style="display: block; margin-left: auto; margin-right: auto;">আপনি যে কোন HTML এখানে সংযোগ করতে পারবেনঃ এলিমেন্টের ট্যাগ পরিবর্তন করা, existing এলিমেন্ট পরিবর্তন করা আথবা নতুন কোন এলিমেন্ট সংযোগ করা। বক্সের বাইরে ক্লিক করার সাথে সাথে আপনার করা পরিবর্তনগুলো পেজটিতে অ্যাপ্লাই হয়ে যাবে।</p> - -<h2 id="HTML_পেন"><a name="HTML_pane">HTML পেন</a></h2> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5459/inspector-html-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"> HTML পেন আপনাকে পেজটির HTML একটি গাছের আকারে দেখায় এটির শাখাগুলো collapsible. নির্ধারিত এলিমেন্টগুলোর শুরুর এবং শেষের ট্যাগগুলো ধূসর পটভূমিতে হাইলাইট করা হয়।</p> - -<p>আপনি এই পেনে সরাসরি এডিট করতে পারেন - বিভিন্ন ট্যাগ, অ্যাট্রিবিউটস এবং কন্টেন্টসঃ আপনি যেই এলিমেন্ট এডিট করতে চান তা পরিবর্তন করুন এবং পরিবর্তনগুলো সাথে সাথে দেখতে Enter ক্লিক করুন।</p> - -<p>কোন এলিমেন্টে কন্টেক্স-কিল্ক করলে তা ডিসপ্লে করে একটি <a href="#Element_popup_menu">পপআপ মেনু সেই এলিমেন্টে কাজ করার জন্য</a>।</p> - -<h3 id="HTML_পেন_টুলবার">HTML পেন টুলবার</h3> - -<h3 id="এই_পেইন_টির_উপরে_একটি_ডেডিকেটেড_টুলবার_তিনটি_অংশে_ভাগ_হয়ে_আছেঃ">এই পেইন টির উপরে একটি ডেডিকেটেড টুলবার তিনটি অংশে ভাগ হয়ে আছেঃ</h3> - -<div class="geckoVersionNote"> -<p>ফায়ারফক্স 29 থেকে পরবর্তীতে "Select element" বাটনটি <a href="/en-US/docs/Tools_Toolbox#Toolbar">Toolbox </a>এ মুভ করা হয়েছে।</p> -</div> - -<ul> - <li><em>এলিমেন্ট সিলেক্ট করাঃ </em>এই বাটনটি ক্লিক করলে,আপনি ব্রাউজার উইন্ডোতে শুধুমাত্র মাউস ঘুরিয়ে বিভিন্ন এলিমেন্ট সিলেক্ট করতে পারবেন।</li> - <li><em>HTML ব্রেড ক্রাম্বস্ঃ যেই ব্রাঞ্চের আওতায় নির্ধারিত এলিমেন্টটি আছে তার সমস্ত </em>hierarchy<em> </em>এটি দেখায়। আপনি যদি বারে কোন এলিমেন্ট ক্লিক করে ধরে থাকেন তাহলে একটি পপআপ মেনু দেখা যাবে যা আপনাকে একটি এলিমেন্টের অংশ সিলেক্ট করার সুযোগ দেয়। বারের বামদিকের ও ডানদিকের শেষের কোণার ছোট তীর চিহ্ণিত আইকনটি ক্লিক করলে সেটি বারটিকে স্ক্রল করবে যদি সেটি স্ক্রিনের থেকেও বড় হয়ে থাকে।</li> - <li><em>ট্যাগ খোঁজাঃ </em>আপনি যে ট্যাগের জন্য টাইপ করেন তা খুঁজুন এখানে। "Enter" প্রেস করে পরবর্তী অকারেন্স খুঁজে পাবেন।</li> -</ul> - -<h2 id="CSS_পেন">CSS পেন</h2> - -<p>CSS পেন কারেন্টলি সিলেক্টেড এলিমেন্টে ব্যবহৃত স্টাইলের তথ্য প্রদর্শন করে। চারটি ভিন্ন ভিন্ন ভিউ আছে এখানেঃ "রুলস্", "কম্পিউটেড", "ফন্টস" এবং "বক্স মডেল"। পেনের সর্ব উপরের টুলবারটি ব্যবহার করে আপনি তাদের মধ্যে সুইচ করতে পারেনঃ</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5463/inspector-css-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h3 id="রুলস্_ভিউ">রুলস্ ভিউ</h3> - -<p>নির্ধারিত এলিমেন্টে ব্যবহৃত সব রুলস তালিকাবদ্ধ রাখে এই ভিউটি, বিশেষায়িত এর হ্রাসক্রম ভিত্তিতেঃ</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5467/inspector-css-rules.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>রুলস ভিউ <a href="/en-US/docs/Web/CSS/Pseudo-elements">সিউডো-এলিমেন্টস</a> এবং ব্যবহৃত রুলস তালিকাবদ্ধ করে।</p> - -<h4 id="রুল_ডিসপ্লে">রুল ডিসপ্লে</h4> - -<p>এটি একটি স্টাইলশীটে প্রত্যেকটি রুল ডিসপ্লে করে, সেক্টর এর একটি লিস্টসহ <code>property:value;</code> ডিকলারেশনের লিস্ট ও থাকে।</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5659/inspector-css-rules-singlerule-annotated.png" style="display: block; height: 206px; margin-left: auto; margin-right: auto; width: 544px;">যেসব রুল অন্য রুলের বিপক্ষে যায় সেগুলো কেটে দেওয়া হয়েছে। কোন নির্দেশনার উপরে মাউস রাখলে এটির নিচে একটি চেকবক্স দেখা যাবেঃকোন রুল চালু বা বন্ধ করতে আপনি এটি ব্যবহার করতে পারেন।</p> - -<h4 id="CSS_ফাইলের_লিঙ্ক">CSS ফাইলের লিঙ্ক</h4> - -<p>প্রতিটি রুলের উপরে ডান দিকে ফাইলনেম সোর্স এবং লাইন নাম্বার লিঙ্ক হিসাবে দেখানো হয়ঃ ক্লিক করলে <a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">স্টাইল এডিটর</a> থেকে এটি ওপেন হয়ে যাবে।</p> - -<p>ফায়ারফক্স 29 থেকে পরবর্তীতে ইন্সপেক্টর CSS সোর্স ম্যাপ বোঝে। এর মানে হল আপনি যদি CSS প্রিপ্রসেসর ব্যবহার করেন যার সোর্স ম্যাপ সাপোর্ট আছে এবং তা আপনি <a href="/en-US/docs/Tools_Toolbox#Style_Editor">স্টাইল এডিটর সেটিং</a> এ সক্রিয় করেছেন তাহলে লিঙ্কটি আপনাকে প্রকৃত সোরসে নিয়ে যাবে, জেনারেটেড CSS নয়ঃ</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6947/inspector-css-sourcemap-detail.png" style="display: block; height: 133px; margin-left: auto; margin-right: auto; width: 390px;"></p> - -<p>CSS সোর্স ম্যাপ সাপোর্ট সম্পর্কে আরো জানুন <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">স্টাইল এডিটর ডকুমেন্টেশন</a> এ।</p> - -<h4 id="রঙ_নমুনা">রঙ নমুনা</h4> - -<div class="geckoVersionNote"> -<p>ফায়ারফক্স 27 থেকে পরবর্তীতে, আপনি কালার ভেল্যুর পরে দৃশ্যমান একটি রঙ নমুনা দেখতে পাবেনঃ</p> -</div> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6361/inspector-css-color-swatch.png" style="display: block; height: 158px; margin-left: auto; margin-right: auto; width: 487px;"></p> - -<h4 id="কালার_পিকার">কালার পিকার</h4> - -<div class="geckoVersionNote"> -<p>ফায়ারফক্স 28 থেকে পরবর্তীতে, আপনি রঙ নমুনাতে (color sample) ক্লিক করলে রঙ পরিবর্তন করার জন্য একটি কালার পিকার দেখতে পাবেনঃ</p> -</div> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6659/inspector-color-picker.png" style="display: block; height: 321px; margin-left: auto; margin-right: auto; width: 411px;"></p> - -<h4 id="পটভূমি-দৃশ্য_পূর্ব_পরিদর্শন">পটভূমি-দৃশ্য পূর্ব পরিদর্শন</h4> - -<div class="geckoVersionNote"> -<p>ফায়ারফক্স 27 থেকে পরবর্তীতে, রুলের উপর মাউস ঘোরালে আপনি <a href="/en-US/docs/Web/CSS/background-image">ব্যাকগ্রাউন্ড-ইমেজ বা পটভূমি-দৃশ্য </a> নামে বিভিন্ন ইমেজের বিশেষ ব্যবহৃত একটি প্রিভিউ দেখতে পাবেনঃ</p> -</div> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6413/inspector-background-image-preview.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h4 id="ভিজুয়ালাইজেশন_পরিবর্তন">ভিজুয়ালাইজেশন পরিবর্তন</h4> - -<div class="geckoVersionNote"> -<p>ফায়ারফক্স 29এ এটি নতুন।</p> -</div> - -<p>ফায়ারফক্স 29 থেকে পরবর্তী ক্ষেত্রে আপনি রুলস রিভিউতে কোন <a href="/en-US/docs/Web/CSS/transform"><code>ট্রান্সফরম</code></a> প্রপার্টিতে হোভার করলে,আপনি একটি টুলটিপ পাবেন যা আপনাকে দেখাবে এটি যা যা পরিবর্তন করে।</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7133/transform-tooltip.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h4 id="এডিট_করার_নিয়মাবলী">এডিট করার নিয়মাবলী</h4> - -<p>আপনি যদি কোন দিক্লারেশ্নে ক্লিক করেন তবে আপনি তার বৈশিষ্ট্যাবলী বা মান সংস্কার করতে পারবেন এবং সাথে সাথেই তা দেখতে পাবেন। একটি রুলে নতুন ডিকলারেশন যুক্ত করার জন্য ক্লিক করুন রুলের সর্বশেষ লাইনটিতে (শেষ বন্ধনী দিয়ে অধিকৃত লাইনটি)। সংস্কার করার সময় যদি আপনি অপ্রচলিত মান বা কোন অজানা বৈশিষ্টের নাম প্রবেশ করান, তবে ডিকলারেশনের নিচে একটি হলুদ সতর্ক সংকেত দেখা যাবে।</p> - -<p>আপনার করা যে কোন পরিবর্তনই ক্ষণস্থায়ীঃ পেজটি পুনরায় লোড করলে প্রকৃত স্টাইল রিস্টোর হয়ে যাবে।</p> - -<p><strong>Tip:</strong> 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.</p> - -<h3 id="কম্পিউটেড_ভিউ">কম্পিউটেড ভিউ</h3> - -<p>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:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5473/inspector-css-computed.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>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:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5665/inspector-css-computed-show-rule.png" style="display: block; margin-left: auto; margin-right: auto;">By default, it only shows values that have been explicitly set by the page: to see all values, click the "Browser styles" box.</p> - -<p>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.</p> - -<h3 id="ফন্টস্_ভিউ">ফন্টস্ ভিউ</h3> - -<p>সিলেক্টেড এলিমেন্ট অনুযায়ী প্রয়োজনীয় সব ফন্ট দেখায় এটি। মনে রাখবেন, আপনি আপনার সিস্টেমে যে ফন্ট ব্যবহার করেন তাও দেখায় এটি, css এ যে ফন্ট নির্ধারণ করা আছে, তার থেকে এটি আলাদা হতে পারেঃ</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5469/inspector-css-fonts.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>ফন্ট ভিউতে টেক্সট ভিউ হল "Abc" ডিফল্ট অনুসারে কিন্তু আসলে এটি একটি টেক্সট এরিয়া যা পড়্যোজন মত পরিবর্তন করা যেতে পারে।</p> - -<h3 id="বক্স_মডেল_ভিউ">বক্স মডেল ভিউ</h3> - -<p>নির্দিষ্ট এই এলিমেন্টে অ্যাপ্লাই করলে এটি <a href="/en-US/docs/Web/CSS/box_model" title="/en-US/docs/Web/CSS/box_model">বক্স মডেল</a> এর একটি গ্রাফিকাল representation দেখায়ঃ</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5667/inspector-css-box-model.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<ul> - <li>At the top-left is the total space taken by the element on the page.</li> - <li>The outside numbers tell you the margin size on each side of the element.</li> - <li>The numbers in squares on the borders tell you how wide each side's border is.</li> - <li>The next layer in shows the padding size on each side of the element.</li> - <li>Finally, in the center, is the size of the element's content.</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5671/inspector-css-box-model-annotated.png" style="display: block; height: 435px; margin-left: auto; margin-right: auto; width: 680px;"></p> - -<h2 id="ওয়েব_কনসোল_এর_সাহায্যে_পেজ_ইন্সপেক্টর_ব্যবহার_করা"> ওয়েব কনসোল এর সাহায্যে পেজ ইন্সপেক্টর ব্যবহার করা</h2> - -<p>ওয়েব কনসোলকে আপনি পেজ ইন্সপেক্টর হিসাবেও ব্যবহার করতে পারেন। এমনকি আপনি একটি বোনাস ফিচার ও পIবেন! আপনি যদি পেজ ইন্সপেক্টরে কোন এলিমেন্ট সিলেক্ট করে থাকেন তবে তাও variable <code>$0</code>. ব্যবহার করে ওয়েব কনসোলের জাভাস্ক্রিপ্টে পাঠানো যাবে।<br> - </p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5461/inspector-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h2 id="ডেভলপার_API">ডেভলপার API</h2> - -<p>ফায়ারফক্স এডঅনস্ এই কন্টেক্স chrome://browser/content/devtools/inspector/inspector.xul থেকে নিচের বিভিন্ন অবযেক্টে প্রবেশ করতে পারেঃ</p> - -<h3 id="উইন্ডো.ইন্সপেক্টর">উইন্ডো.ইন্সপেক্টর</h3> - -<p><a href="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js" title="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js">ইন্সপেক্টর-পেনেল.js</a> এ আলোচিত। বিভিন্ন এট্রিবিউটস্ এবং ফানশনঃ</p> - -<ul> - <li>.নির্ধারণ - ইন্সপেক্টর সেকশন সম্পর্কিত তথ্যঃ - <ul> - <li>.isNode() - returns true if selection is node.</li> - <li>.node - returns the actual element from the page</li> - <li>.window - the window object of the frame the selection is in.</li> - </ul> - </li> - <li>.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.</li> -</ul> - -<p>Bindable events using on:</p> - -<h4 id="মার্কআপ_লোডেড">মার্কআপ লোডেড</h4> - -<p>বামদিকের পেনেল রিফ্রেশ করার পর যখন পেজ পরিবর্তন কার হয় তখন এর প্রয়োজন হয়।</p> - -<h4 id="ready">ready</h4> - -<p>প্রথম মার্কআপ লোডে দরকার হয়।</p> - -<h4 id="সিউডোক্লাস">সিউডোক্লাস</h4> - -<p>Called after toggle of a pseudoclass.</p> - -<h4 id="লে-আউট_পরিবর্তন">লে-আউট পরিবর্তন</h4> - -<p>"paint and resize এর মত কম গুরুত্বপূর্ণ পরিবর্তন ইভেন্ট।"</p> - -<h2 id="কীবোর্ড_শর্টকাটস">কীবোর্ড শর্টকাটস</h2> - -<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "page-inspector") }}</p> - -<h3 id="গ্লোবাল_শর্ট-কাটস">গ্লোবাল শর্ট-কাটস</h3> - -<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p> - -<p>{{ languages( { "ja": "ja/Tools/Page_Inspector"} ) }}</p> 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 ---- -<div>{{ToolsSidebar}}</div><p>স্টাইল সীট এডিটর আপনাকে সক্ষম করবে ঃ</p> - -<ul> - <li>পেজ এর সাথে যুক্ত স্টাইলসীট দেখতে এবং এডিট করতে </li> - <li>scratch থেকে নতুন স্টাইলসীট তৈরি করতে এবং পেজ তা ব্যবহার করতে</li> - <li>তৈরিক্রিত স্টাইলসীট নিয়ে আসতে এবং পেজ এ তা ব্যবহার করতে</li> -</ul> - -<p><img alt="IFrame" style="height: 1px; width: 1px;"></p> - -<p>স্টাইল এডিটর খুলতে হলে "Web developer" মেনু থেকে "Style Editor" বাছাই করতে হবে( যা Mac এর "Tools" মেনু এর সাবমেনু)।স্টাইল এডিটর সক্রিয় হউয়ার সাথে সাথে<a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window"> ,Toolbox</a> ব্রাউজার এর পাদদেশ দৃশ্যমান হবে:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6941/style-editor.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>স্টাইল এডিটর প্রধান দুই ভাগ এ বিভক্ত : বামপাশ এর স্টাইল সীট প্যান , এবং ডানপাশ এর এডিটর।</p> - -<h2 id="স্টাইল_সীট_প্যান"><strong>স্টাইল সীট প্যান</strong></h2> - -<p>বামপাশ এর স্টাইল সীট, বর্তমান ডকুমেন্ট এর ব্যবহৃত স্টাইলসীট এর তালিকা দিবে।সীট এর নাম এর বামপাশ দেওয়া eyeball আইকন এ ক্লিক করার মাধ্যমে আপনি দ্রুত গিভেন সীট ব্যবহার এর অন এবং অফ এ toggle করতে পারবেন।লিস্ট এ থাকা প্রত্যেক সীট এর কোণার নীচের অংশের ডানদিকে অবস্থিত সেভ বাটন এ ক্লিক করে আপনি আপনার স্টাইল সীট এর যেকোনো পরিবর্তন আপনার লোকাল কম্পিউটার এ সেভ করতে পারবেন।</p> - -<h2 id="এডিটর_প্যান"><strong>এডিটর প্যান</strong></h2> - -<p>ডানপাশ এর অংশ টি হচ্ছে এডিটর প্যান। এখানে আপনার জন্য নির্বাচিত কয়েকটি স্টাইল সীট এর সোর্স পড়তে এবং এডিট করতে দেওয়া আছে । পেজ এর যেকোনো পরিবর্তন এটিতে অবিলম্বে কাজ করবে। এটি পরীক্ষা করতে,পরিবর্তন করতে এবং সংশোধন করতে সহজ করে তোলে। আপনি যখন আপনার পরিবর্তন নিয়ে সন্তুষ্ট হবেন, তখন স্টাইল সীট প্যান এর এন্ট্রিতে যে সেভ বাটন আছে তাতে ক্লিক করে একটি কপি লোকাল হিসেবে সেভ করতে পারবেন। </p> - -<p>এডিটর আপনার CSS কে সহজ ভাবে পরার জন্য লাইন সংখ্যা এবং syntax hightiliting দিয়ে থাকে।এতে কয়েকটি <a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#Source_editor_shortcuts">keyboard shortcuts</a> ও সাপোর্ট করে।</p> - -<p> স্টাইল এডিটর অরিজিনাল টি কে পরিবর্তন না করে,সক্রিয় ভাবে de-minimize করে।এটি খুব অনুকুলে সহজ ভাবে পেজে কাজ করতে সাহায্য করে।</p> - -<h2 id="অটোকমপ্লিট"><strong>অটোকমপ্লিট </strong></h2> - -<h4 id="অটোকমপ্লিট_ফায়ারফক্স_২৯_এ_নতুন">অটোকমপ্লিট ফায়ারফক্স ২৯ এ নতুন</h4> - -<p>ফায়ারফক্স ২৯ হতে,স্টাইল এডিটর অটোকমপ্লিট সমর্থন করে।টাইপ শুরু করলে ইহা সাজেশন প্রস্তাব করে।</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6943/style-editor-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">আপনি এটি <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a> এ বন্দধ করে দিতে পারবেন</p> - -<h3 id="স্টাইলসীট_তৈরি_করা_এবং_আমদানি_করা"><strong>স্টাইলসীট তৈরি করা এবং আমদানি করা</strong></h3> - -<p>টুলবার এর নিউ বাটন এ ক্লিক করে আপনি নতুন স্টাইল সীট তৈরি করতে পারবেন।এরপর আপনি নতুন এডিটর এ CSS দেয়ার মাধ্যমে শুরু করতে পারেন এবং নতুন স্টাইল যা ব্যবহার করেছেন তা দেখতে পারবেন অন্যান্য সীট এর মত সরাসরি।</p> - -<p>আপনি ডিস্ক থেকে স্টাইল সীট লোড করতে পারবেন এবং ইম্পোর্ট বাটন এ ক্লিক করে পেজ এ ব্যবহার করতে পারবেন।</p> - -<h3 id="সোর্স_ম্যাপ_সাপোর্ট"><strong>সোর্স ম্যাপ সাপোর্ট</strong></h3> - -<div class="geckoVersionNote"> -<p>CSS সোর্স ম্যাপ সাপোর্ট ফায়ারফক্স ২৯ এ নতুন বৈশিষ্ট্</p> -</div> - -<p>{{EmbedYouTube("zu2eZbYtEUQ")}}</p> - -<p>প্রি প্রসেসর যেমন <a href="http://sass-lang.com/">Sass</a>, <a href="http://lesscss.org/">Less</a>, অথবা <a href="http://learnboost.github.io/stylus/">Stylus</a> ব্যবহার করে ওয়েব ডেভেলপাররা প্রায়ই CSS ফাইল তৈরী করে।এই টুল আরও গরীয়ান এবং অভিবাক্তপূর্ণ শব্দবিন্যাস থেকে CSS ফাইল তৈরী করতে সাহায্য করে। আপনি যদি এটি করেন তাহলে দেখতে পাবেন যে,তৈরীক্রিত CSS দেখতে পাওয়া এবং এডিট করা তেমন সুবিধা জনক না,কারন যে কোড আপনি ধারন করছেন তা প্রি প্রসেসর শব্দবিন্যাস,আপনার তৈরীক্রিত নয়। তাই আপনাকে তৈরীক্রিত CSS এডিট করতে হবে তারসাথে এটি পুনরাই অরিজিনাল সোর্স এ মানুয়াল্-ই কাজ করাতে হবে।</p> - -<p>সোর্স ম্যাপ টুল গুলো আপনাকে তৈরীক্রিত CSS থেকে অরিজিনাল শব্দবিন্যাস এ ফিরিয়ে আনতে সাহায্য করে,যাতে তাদের দেখা যায় এবং অরিজিনাল শব্দবিন্যাস এর ফাইল গুলো কে আপনি এডিট করতে পারেন।ফায়ারফক্স ২৯ স্টাইল এডিটর CSS সোর্স ম্যাপ ধরতে পারে।</p> - -<p>এটার মানে এই যে,ধরুন আপনি Sass দিলেন তাহলে স্টাইল এডিটর আপনাকে Sass ফাইল দেখাবে এবং এডিট করতে দিবে,তাদের তৈরী CSS নয় :</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6939/style-editor-sourcemap-820.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>এইটা কাজ করানোর জন্য আপনার উচিত :</p> - -<ul> - <li>CSS প্রসেসর ব্যবহার করতে হবে যা <a href="https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit">Source Map Revision 3 proposal</a> বুঝতে পারে। বর্তমানে এটা <a href="http://davidwalsh.name/future-sass">3.3.0 prerelease version of Sass</a> অথবা <a href="http://roots.io/using-less-source-maps/">1.5.0 version of Less </a>কে বুঝায়।অন্যান্য প্রি প্রসেসর সরাসরি ভাবে এটাকে সাপোর্ট করতে বা ধরতে কাজ করছে।</li> - <li>আসলে প্রসেসর কে সোর্স ম্যাপ তৈরী করতে নির্দেশ দিতে হবে, যেমন --sourcemap আর্গুমেন্ট টি Sass কমান্ড-লাইন টুল এ পাস করা।</li> - <li>ফায়ারফক্স ২৯ অথবা পরবর্তী ফায়ারফক্স ব্যবহার করা।</li> -</ul> - -<h3 id="অরিজিনাল_সোর্স_গুলো_দেখা"><strong>অরিজিনাল সোর্স গুলো দেখা</strong></h3> - -<p>এখন আপনি যদি <a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a> এর "Show original sources" টি দেখেন, <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Rules_view">Rules view</a> এর CSS রুল গুলো এর পরবর্তী লিংক স্টাইল সীট এর অরিজিনাল সোর্স এ নিয়ে যাবে।</p> - -<h3 id="এডিট_অরিজিনাল_সোর্স"><strong>এডিট অরিজিনাল সোর্স</strong></h3> - -<p>আপনি স্টাইল এডিটর এর অরিজিনাল সোর্স গুলো এডিট করতে পারবেন এবং যা ব্যবহার করা হয়েছে তা ঠিক তখনি সরাসরি দেখা যাবে।এটা কে কাজ করানোর জন্য আরও দুটি স্টেপ আছে।</p> - -<p>প্রথমে,আপনার প্রসেসর টিকে এমন ভাবে তৈরী করুন যাতে তা অরিজিনাল সোর্স কে দেখতে পারে এবং নিজস্ব ভাবে CSS তৈরী করে সোর্স পরিবর্তন করার সাথে সাথে। Sass এ আপনি --watch অপশন টি দেওয়ার মাধ্যমে কাজ টি করতে পাড়েন:</p> - -<p>sass index.scss:index.css --sourcemap --watch</p> - -<p>পরবর্তী তে,ফাইল এর পাশে "Save" বাটন এ ক্লিক করে স্টাইল এডিটর থেকে অরিজিনাল সোর্স সেভ করতে হবে, এবং অরিজিনাল ফাইল এ সেভ করতে হবে।</p> - -<p>এখন আপনি যখন স্টাইল এডিটর এর সোর্স ফাইল পরিবর্তন করবেন,CSS একাই তৈরী হবে এবংপরিবর্তন টি আপনি তখন-ই দেখতে পারবেন।</p> - -<h2 id="কীবোর্ড_শর্টকাট"><strong>কীবোর্ড শর্টকাট</strong></h2> - -<h3 id="সোর্স_এডিটর_শর্টকাট"><strong>সোর্স এডিটর শর্টকাট</strong></h3> - -<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p> - -<p>{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}</p> 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 ---- -<p><span class="seoSummary"><span style="color: #000000; font-family: Georgia; font-size: 16px; line-height: normal;">ভিতরে অনেক মানুষ as সম্ভব হিসেবে সক্ষম করা ওয়েব ব্যবহার করতে বুঝায় সাইট, যখন ওগুলো মানুষকে-এর সামর্থ্য কিছু পথে সীমাবদ্ধ করা হয়</span>. </span><span style="color: #000000; font-family: Georgia; font-size: 16px; line-height: normal;">ভিতরে অনেক মানুষ as সম্ভব হিসেবে সক্ষম করা ওয়েব ব্যবহার করতে বুঝায় সাইট, যখন ওগুলো মানুষকে-এর সামর্থ্য কিছু পথে সীমাবদ্ধ করা হয়.</span></p> - -<p>"<span style="color: #000000; font-family: Georgia; font-size: 16px; line-height: normal;">accessibility সবচেয়ে বেশী ঘন ঘন সুযোগসুবিধা বা নাগরিক সুবিধা বর্ণনা করতে বিকলত্ব-এর</span>, as এর '<span style="color: #000000; font-family: Georgia; font-size: 16px; line-height: normal;">সাথে মানুষকে সাহায্য করতে অভ্যস্ত আছে</span>'. This can extend to Braille signage, wheelchair ramps, audio signals at pedestrian crossings, walkway contours, website design, and so on." <a class="external" href="http://en.wikipedia.org/wiki/Accessibility">Wikipedia entry for Accessibility</a></p> - - - -<p>"<span style="color: #000000; font-family: Georgia; font-size: 16px; line-height: normal;">ওয়েব মৌলিকভাবে সব মানুষ-এর জন্য কাজ করতে ডিজাইন করা হয়</span>, 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." <a href="http://www.w3.org/standards/webdesign/accessibility" title="http://www.w3.org/standards/webdesign/accessibility">W3C - Accessibility</a></p> - -<div class="cleared topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Documentation" name="Documentation">ডকুমেন্টেশন</h2> - -<dl> - <dt><a href="/en-US/docs/Accessibility/Web_Development" title="Accessibility Web Development">ওয়েব ডেভেলপমেন্ট</a></dt> - <dd> - <div></div> - - <div> - <table style="height: 40px; overflow: auto; width: 400px;"> - <tbody> - <tr style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 12px; line-height: normal;"> - <td><span style="font-size: 16px;">রচনার একটি সংগ্রহ প্রবেশযোগ্যতার দুনিয়ায় ওয়েব উন্নয়ন ইস্যু তুলে ধরতে মনোনীত করল।</span></td> - </tr> - <tr style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 12px; line-height: normal;"> - </tr> - </tbody> - </table> - </div> - </dd> - <dt><a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a></dt> - <dd><span style="color: #000000; font-family: Georgia; font-size: 16px; line-height: normal;">রচনার একটি সংগ্রহ শিখতে যেভাবে aria আপনার html ডকুমেন্ট আরও সহজগম্য বানাতে ব্যবহার করতে।</span></dd> - <dt><a href="/en-US/docs/Accessibility/AT_Development" title="AT Development">Assistive technology (AT) development</a></dt> - <dd><span style="color: #000000; font-family: Georgia; font-size: 16px; line-height: normal;">রচনার at ডেভেলাপার-এর জন্য উদ্দেশ্য করা একটি সংগ্রহ</span></dd> -</dl> - -<p><span class="alllinks"><a href="/en-US/docs/tag/Accessibility" title="/en-US/docs/tag/Accessibility">View all articles about Accessibility...</a></span></p> -</div> - -<div class="section"> -<h2 class="Tools" id="Tools" name="Tools">ওয়েব ডেভেলপারদের জন্য টুল সমূহ</h2> - -<ul> - <li><a class="external" href="http://www-archive.mozilla.org/quality/embed/plans/accessibility/nsIAccessibleTestPlan.html" title="http://www-archive.mozilla.org/quality/embed/plans/accessibility/nsIAccessibleTestPlan.html">Automated accessibility tests</a></li> - <li><a class="external" href="http://www.standards-schmandards.com/index.php?show/fangs">Fangs screen reader emulator</a></li> -</ul> - -<p><span class="alllinks"><a href="/en-US/docs/tag/Accessibility:Tools" title="en-US/docs/tag/Accessibility:Tools">View All...</a></span></p> - -<h2 class="Tools" id="Tools" name="Tools">অন্যান্য উপকারী সাইট</h2> - -<ul> - <li><a class="external" href="https://support.mozilla.org/kb/accessibility-features-firefox-make-firefox-and-we">Screen reader list</a></li> -</ul> -</div> -</div> 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 ---- -<div>{{DefaultAPISidebar("ব্যাটারি API")}}</div> - -<p><strong>ব্যাটারি অবস্থা API </strong>টি, প্রায়ই <strong>ব্যাটারি API</strong> হিসাবে বলা হয়, সিস্টেমের ব্যাটারি চার্জ লেভেল সম্পর্কে তথ্য সরবরাহ করে এবং যখন ব্যাটারি লেভেল বা করার অবস্থা পরিবর্তন করা হয় তখন প্রেরিত ইভেন্টগুলি দ্বারা আপনাকে সূচিত করে। ব্যাটারির চার্জ কম থাকলে এটি আপনার অ্যাপের সম্পদ ব্যবহারকে সামঞ্জস্য করে ব্যাটারী নিষ্কাশন কমাতে বা ডেটা ক্ষতি প্রতিরোধ করার জন্য ব্যাটারি শেষ হত্তয়ার আগে পরিবর্তন সংরক্ষণ করতে ব্যবহার করা যেতে পারে।</p> - -<p>ব্যাটারি অবস্থা API ব্যাটারি প্রতিশ্রুতি ফিরিয়ে আনার একটি {{domxref("navigator.getBattery()")}} মেথড/পদ্ধতিতে {{domxref("window.navigator")}}- কে প্রসারিত করে, যা একটি {{domxref("BatteryManager")}} অবজেক্টে সমাধান করা হয় যা আপনাকে ব্যাটারি অবস্থা নিরীক্ষণ করার জন্য কিছু নতুন ইভেন্টগুলি পরিচালনা করতে পারে.</p> - -<h2 id="উদাহরণ">উদাহরণ</h2> - -<p>এই উদাহরণে, আমরা চার্জিং অবস্থা (আমরা প্লাগ ইন এবং চার্জিং কিনা তাও) এর ব্যাটারি স্তর এবং সময় পরিবর্তনের উভয় পরিবর্তনগুলির জন্য দেখতে পাই। এটি {{event("chargingchange")}}, {{event("levelchange")}}, {{event("chargingtimechange")}}, {{event("dischargingtimechange")}} ইভেন্টগুলি শোনার মাধ্যমে সম্পন্ন করা হয়।</p> - -<pre class="brush: js">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"); - } - -}); -</pre> - -<p>আরো দেখুন <a class="external" href="http://www.w3.org/TR/battery-status/#examples">the example in the specification</a>.</p> - -<h2 id="সবিস্তার_বিবরণী">সবিস্তার বিবরণী</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">সবিস্তার বিবরণী</th> - <th scope="col">অবস্থা</th> - <th scope="col">মন্তব্য</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Battery API")}}</td> - <td>{{Spec2("Battery API")}}</td> - <td>প্রাথমিক সংজ্ঞা</td> - </tr> - </tbody> -</table> - -<h2 id="উপযুক্তত_ব্রাউজার">উপযুক্তত ব্রাউজার</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>বৈশিষ্ট্যসূচক</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>মৌলিক সমর্থন</td> - <td>{{CompatChrome(39.0)}}</td> - <td>{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}<br> - {{CompatGeckoDesktop("16")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("43")}}<sup>[3]</sup><br> - {{CompatGeckoDesktop("52")}}<sup>[4]</sup></td> - <td>{{CompatNo}}</td> - <td>25</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>বৈশিষ্ট্যসূচক</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>মৌলিক সমর্থন</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(40.0)}}</td> - <td> - <p>{{CompatGeckoMobile("10")}} {{property_prefix("moz")}}<br> - {{CompatGeckoMobile("16")}}<sup>[1]</sup><br> - {{CompatGeckoMobile("43")}}<sup>[3]</sup><br> - {{CompatGeckoMobile("52")}}<sup>[3]</sup></p> - </td> - <td>{{CompatNo}}</td> - <td>25<sup>[2]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(42.0)}}<sup>[2]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Disabled by default in Firefox 10.0, but can be enabled setting the preference <code>dom.battery.enabled</code> to <code>true</code>. Starting with Firefox 11.0, <code>mozBattery</code> 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")}}.</p> - -<p>[2] Values for {{domxref("BatteryManager.chargingTime")}} and {{domxref("BatteryManager.dischargingTime")}} are always equal to <code>Infinity</code>.</p> - -<p>[3] The new promise-based syntax for {{domxref("Navigator.getBattery()")}} is supported from Firefox 43 onwards.</p> - -<p>[4] From Firefox 52 onwards, the ব্যাটারি অবস্থা API is only available in chrome/privileged code.</p> - -<h2 id="আরো_দেখুন">আরো দেখুন</h2> - -<ul> - <li><a href="/en-US/Apps/Build/gather_and_modify_data/retrieving_battery_status_information">Retrieving battery status information - demo & article</a></li> - <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Hacks blog post - Using the Battery API</a></li> -</ul> 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 ---- -<p> <a href="/bn-BD/docs/HTML/HTML5" title="/bn-BD/docs/HTML/HTML5">HTML5</a> এ যুক্ত <strong>HTML {{HTMLElement("canvas")}} এলিমেন্টটি</strong> ব্যবহার করে স্ক্রিপ্টিংয়ের (সাধারণত <a href="/bn-BD/docs/JavaScript" title="JavaScript">জাভাস্ক্রিপ্ট</a>) সাহায্যে গ্রাফিক্স আঁকা যায়। উদাহরণস্বরুপ, এটি গ্রাফিক্স আঁকা, ছবির কম্পোজিশন তৈরি করা, অ্যানিমেশন তৈরি করা অথবা এমনি রিয়েল-টাইম ভিডিও রেন্ডারিং অথবা প্রসেসিংয়ের কাজেও ব্যবহার করা যায়।</p> -<p><code><canvas></code> এর জন্য মোজিলা অ্যাপ্লিকেশনসমূহ সাপোর্ট পাওয়া শুরু করেছে গিকো ১.৮ (বা <a href="/bn-BD/docs/Firefox_1.5_for_developers" title="Firefox_1.5_for_developers">ফায়ারফক্স ১.৫</a>) থেকে। মূলত এ্যাপল তাদের <a class="external" href="http://www.apple.com/macosx/features/dashboard/">ড্যাশবোর্ড</a> এবং সাফারির জন্য এলিমেন্টটি প্রকাশ করে। ইন্টারনেট এক্সপ্লোরার ৯ ভার্সন থেকে <code><canvas></code> সাপোর্ট করে; ইন্টারনেট এক্সপ্লোরারের পুরনো সংস্করণের জন্য গুগলের <a class="external" href="http://excanvas.sourceforge.net/">Explorer Canvas</a> প্রজেক্টের একটি স্ক্রিপ্ট যুক্ত করে কার্যকরভাবে <code><canvas></code> এর সাপোর্ট যোগ করা যায়। গুগল ক্রোম এবং অপেরা ৯ <code><canvas></code> ক্যানভাস সাপোর্ট করে।</p> -<p><code><canvas></code> টি দিয়ে <a href="/bn-BD/docs/WebGL" title="WebGL">WebGL</a> এর সাহায্যে হার্ডওয়্যার-এক্সেলারেশনের মাধ্যমে ওয়েব পেজে ত্রিমাত্রিক (3D) গ্রাফিক্স দেখানো সম্ভব।</p> -<div class="row topicpage-table"> - <div class="section"> - <h2 class="Documentation" id="Documentation" name="Documentation">ডকুমেন্টেশন</h2> - <dl> - <dt> - <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element">স্পেসিফিকেশন</a></dt> - <dd> - <code><canvas></code> এলিমেট হল WhatWG ওয়েব অ্যাপ্লিকেশনস ১.০ স্পেসিফিকেশন বা HTML5 এর অংশ।</dd> - <dt> - <a href="/bn-BD/docs/HTML/Canvas/Tutorial" title="Canvas_tutorial">ক্যানভাস টিউটোরিয়াল</a></dt> - <dd> - <code><canvas></code> এর সাধারণ ব্যবহার এবং এর অ্যাডভান্সড ফিচারের ওপর একটি বিস্তারিত টিউটোরিয়াল।</dd> - <dt> - <a href="/bn-BD/docs/Code_snippets/Canvas" title="Code_snippets/Canvas">কোড স্নিপেট: ক্যানভাস</a></dt> - <dd> - <code><canvas></code> সংক্রান্ত এক্সটেনশন ডেভেলপার সংশ্লিষ্ট কোড স্নিপেট।</dd> - <dt> - <a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">ক্যানভাস উদাহরণ</a></dt> - <dd> - কিছু <code><canvas></code> ডেমো।</dd> - <dt> - <a href="/bn-BD/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas" title="HTML/Canvas/Drawing DOM objects into a canvas">ক্যানভাসে DOM অবজেক্ট আঁকা</a></dt> - <dd> - যেভাবে HTML এলিমেন্টের ন্যায় DOM কন্টেন্ট একটি ক্যানভাসে আঁকবেন।</dd> - <dt> - <a href="/bn-BD/docs/A_Basic_RayCaster" title="A Basic RayCaster">একটি সাধারণ raycaster</a></dt> - <dd> - ক্যানভাসের সাহায্যে ray-tracing এনিমেশনের ডেমো।</dd> - <dt> - <a href="/bn-BD/docs/Gecko_DOM_Reference#Canvas_interfaces" title="Gecko_DOM_Reference#Canvas_interfaces">ক্যানভাস DOM ইন্টারফেস</a></dt> - <dd> - গিকোতে ক্যানভাস DOM ইন্টারফেস সমূহ।</dd> - </dl> - <p><span class="alllinks"><a href="/bn-BD/docs/tag/HTML:Canvas" title="tag/HTML:Canvas">সব দেখুন...</a></span></p> - </div> - <div class="section"> - <h2 class="Community" id="কমিউনিটি">কমিউনিটি</h2> - <ul> - <li>মোজিলা ফোরাম দেখুন... {{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}</li> - <li><a class="external" href="http://groups.yahoo.com/group/canvas-developers/">ক্যানভাস-ডেভেলপার ইয়াহু গ্রুপ</a></li> - </ul> - <h2 class="Resources" id="Resources" name="Resources">তথ্যভান্ডার</h2> - <ul> - <li><a class="external" href="http://joshondesign.com/p/books/canvasdeepdive/title.html" title="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html">HTML5 Canvas Deep Dive</a></li> - <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Canvas cheat sheet</a> (<a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.png" title="HTML5_Canvas_Cheat_Sheet.png (1388×1027)">PNG</a> / <a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf" title="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf">PDF</a>)</li> - </ul> - <h2 class="Libraries" id="Libraries" name="Libraries">লাইব্রেরি</h2> - <ul> - <li><a class="external" href="http://libcanvas.github.com/" title="http://libcanvas.github.com/">libCanvas</a> একটি হালকা ও শক্তিশালী ক্যানভাস ফ্রেমওয়ার্ক</li> - <li><a class="external" href="http://processingjs.org" title="http://processingjs.org/">Processing.js</a> হল প্রসেসিং ভিজ্যুয়ালাইজেশন ল্যাঙ্গুয়েজের পোর্ট</li> - <li><a class="external" href="http://easeljs.com/" title="http://easeljs.com/">EaselJS</a> হল একটি ফ্ল্যাশের মত API সমৃদ্ধ লাইব্রেরি</li> - <li><a class="external" href="http://www.liquidx.net/plotkit/" title="http://www.liquidx.net/plotkit/">PlotKit</a> হল একটি চার্ট ও গ্রাফ তৈরির লাইব্রেরি</li> - <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi" title="https://github.com/jeremyckahn/rekapi">Rekapi</a> হল ক্যানভাসের জন্য অ্যানিমেশনের কি-ফ্রেম করার API।</li> - <li><a class="external" href="http://senchalabs.github.com/philogl/" title="http://senchalabs.github.com/philogl/">PhiloGL</a> হল ডাটা ভিজ্যুয়ালাইজেশন, সৃজনশীল কোডিং ও গেম ডেভেলপমেন্টের জন্য একটি WebGL ফ্রেমওয়ার্ক।</li> - <li><a class="external" href="http://thejit.org/" title="http://thejit.org/">JavaScript InfoVis Toolkit</a> ওয়েবের জন্য ইন্টারএ্যাক্টিভ 2D ক্যানভাস ডাটা ভিজ্যুয়ালাইজেশন তৈরি করে।</li> - <li><a href="http://www.frame-engine.com" title="http://www.frame-engine.com">Frame-Engine</a> হল অ্যাপ্লিকেশন ও গেম ডেভেলপ করার একটি ফ্রেমওয়ার্ক।</li> - </ul> - <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">সম্পর্কিত টপিক</h2> - <ul> - <li><a href="/bn-BD/docs/HTML" title="HTML">HTML</a>, <a href="/bn-BD/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/bn-BD/docs/CSS" title="CSS">CSS</a>, <a href="/bn-BD/docs/AJAX" title="AJAX">AJAX</a>, <a href="/bn-BD/docs/DOM" title="DOM">DOM</a>, <a href="/bn-BD/docs/SVG" title="SVG">SVG</a>, <a href="/bn-BD/docs/WebGL" title="WebGL">WebGL</a></li> - </ul> - </div> -</div> -<div> - {{HTML5ArticleTOC()}}</div> 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 ---- -<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="width: 200px; height: 450px; float: right;"></a></p> -<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a> হচ্ছে একটি <a href="/en-US/docs/HTML" title="HTML">HTML</a> element যেটা স্ক্রিপ্টিং (সাধারণত <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> ) ব্যবহার করে গ্রাফিক্স আঁকার জন্য ব্যবহার করা হয় । উদাহরণস্বরূপ গ্রাফ আঁকতে, ছবি কম্পোজিশন অথবা সাধারন ( তবে<a href="/en-US/docs/HTML/Canvas/A_Basic_RayCaster" title="A_Basic_RayCaster"> বেশি সাধারন নয় </a>) অ্যানিমেশন তৈরি করতে এটি ব্যবহার করা হয় । ডানপাশের ছবিতে <code><canvas></code> প্রয়োগ করে কিছু উদাহরণ দেওয়া হয়েছে যা আমরা পরে এর টিউটোরিয়াল এ দেখবো।</p> -<p><code><canvas></code> সর্বপ্রথম Apple এর Mac OS X ড্যাশবোর্ড এ ব্যবহার করার জন্য প্রকাশিত হয় এবং পরে Safari এবং Google Chrome এ প্রয়োগ করা হয়. <a href="/en-US/docs/Gecko" title="Gecko">Gecko</a> 1.8- ভিত্তিক browsers, যেমন Firefox 1.5 ও এই element কে সমর্থন করে. এই <code><canvas></code> element হচ্ছে <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> এর একটি অংশ যা HTML5 নামেও পরিচিত।</p> -<p><span class="seoSummary">এই টিউটোরিয়াল কিভাবে <code><canvas></code> element ব্যবহার করে প্রাথমিক ভাবে 2D গ্রাফিক্স তৈরি করা যায় তা বর্ণনা করে । আপনি canvas ব্যবহার করে কি করতে পারবেন এই উদাহরণগুলো তার সুস্পষ্ট ধারণা দেয় এবং code কে snippets করে আপনার নিজের কাঙ্ক্ষিত বিষয়কে</span> তৈরি করতে শুরু করে ।</p> -<h2 id="Before_you_start" name="Before_you_start">শুরু করার পূর্বে</h2> -<p><code><canvas></code> element ব্যবহার করা কঠিন কিছু নয় তবে আপনার <a href="/en-US/docs/HTML" title="HTML">HTML</a> এবং <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> সম্পর্কে প্রাথমিক ধারণা থাকতে হবে । কিছু পুরাতন browsers এ <code><canvas></code> element সমর্থন করে না, কিন্তু সম্প্রতি সকল প্রধান browsers গুলো তে সমর্থন করে । canvas এর default সাইজ হচ্ছে 300px * 150px (width * height). কিন্তু custom size গুলো CSS এর height এবং width property ব্যবহার করে উল্লেখ করা যায় । canvas এ গ্রাফিক্স আঁকতে গেলে আমরা javascript context object ব্যবহার করি , যা গ্রাফিক্সটিকে অনেক উন্নতমানের করে তুলে ।</p> -<h2 id="In_this_tutorial" name="In_this_tutorial">এই টিউটোরিয়াল এ যা আছে</h2> -<ul> - <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">প্রাথমিক ব্যবহার</a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">আকৃতি</a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images" title="Canvas_tutorial/Using_images">ছবি ব্যবহার করা</a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">styles এবং color প্রয়োগ করা</a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations" title="Canvas_tutorial/Transformations">রূপান্তরকরণ</a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing" title="Canvas_tutorial/Compositing">একত্রীকরণ</a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">প্রাথমিক অ্যানিম্যাশন</a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">canvas সাজানো</a></li> -</ul> -<h2 id="See_also" name="See_also">আরও দেখুন</h2> -<ul> - <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas ভিত্তিক পৃষ্ঠা</a></li> - <li><a href="/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">Canvas এর সাথে গ্রাফিক্স আঁকা</a></li> - <li><a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">Canvas এর উদাহরণসমূহ</a></li> - <li><a class="external" href="http://html5tutorial.com" title="http://html5tutorial.com">HTML5 টিউটোরিয়াল</a></li> - <li><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">Canvas ব্যবহার করে টেক্সট আঁকা</a></li> - <li><a class="external" href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingText/AddingText.html#//apple_ref/doc/uid/TP40010542-CH6-SW4" title="Adding Text to Canvas">Canvas এ টেক্সট যোগ করা</a></li> - <li><a class="external" href="http://www.canvasdemos.com/" title="Canvas Demos">Canvas নমুনাসমূহ- গেইমস, অ্যাপ্লিকেশনস, টুলস এবং টিউটোরিয়ালস</a></li> - <li><a class="external" href="http://canvimation.github.com/" title="http://canvimation.github.com/">Canvas আঁকা এবং অ্যানিম্যাশন অ্যাপ্লিকেশন</a></li> - <li><a class="external" href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">ইন্টার্যাক্টিভ canvas টিউটোরিয়াল</a></li> - <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">গুণ এবং পদ্ধতিসহ Canvas Cheat শিট</a></li> - <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">অ্যাডোব ইলাস্ট্রেটর এর জন্য Canvas plug-in</a></li> - <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5 Canvas টিউটোরিয়াল</a></li> - <li><a class="external" href="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api" title="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api">Canvas API ব্যবহার করে কিভাবে N grade Bézier curves আঁকা যায়</a></li> - <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">canvas টিউটোরিয়াল এর ৩১ দিন</a></li> - <li><a href="http://www.w3.org/TR/2dcontext/" title="http://www.w3.org/TR/2dcontext/">W3C স্ট্যান্ডার্ড</a></li> - <li><a href="http://www.tutorialspark.com/html5/HTML5_canvas_Intro.php" title="http://www.tutorialspark.com/html5/HTML5_canvas_Intro.php">HTML5 Canvas টিউটোরিয়াল এবং সহায়িকা</a></li> -</ul> -<h2 id="A_note_to_contributors">A note to contributors</h2> -<p>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.</p> -<div> - {{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}</div> 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 ---- -<p>এইচটিএমএল৫ এর ওয়ার্কিং ড্রাফট, <code><a href="/en-US/docs/Web/API/Document/activeElement">একটিভআলিমেন্ত</a></code> ডোম অ্যাট্রিবিউট এবং <code><a href="/en-US/docs/Web/API/Document/hasFocus">হেজফোকাস()</a></code> ডোম মেথড প্রোগ্রামারকে ইউজার এর কারনে পেজ এর ইন্টারআক্তিভিটিতে আরও ভালো নিয়ন্ত্রণ করার ক্ষমতা দেয়। উদাহরণস্বরূপ, দুইটিকে পরিসংখ্যান এর সাধারণ উদ্দেশে ব্যাবহার করা যায়, একটি পেজ এর কিছু লিংকের ক্লিক সংখ্যা বের করা,একটি এলিমেন্তের উপর ফোকাসের সময় বের করা, এবং আরও অনেক।অতিরিক্ত, আজাক্স টেকনোলজির সাহায্যে, সার্ভারের রিকুস্তের সংখ্যা কমানো যায় যা ইউজার এবং পেজ এর লেআউট এর উপর নির্ভর করে।</p> - -<h2 id="ব্রাউজার_কম্পাতিবিলিটি">ব্রাউজার কম্পাতিবিলিটি</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("2.0")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[১] গিককো ৮.০ তে শুরু {{geckoRelease("8.0")}},ফায়ারফক্স এখন একটি ফোকাস রিং আঁকে <strong>যেকোনো</strong> এলিমেন্ত এর উপর যখন তার তাবিনেক্স ভেলু ০ থেকে বড়, শুধু একটি সীমিত সাবসেট আইটেমস এর পরিবর্তে। এই নিয়মের কিছু বাতিক্রম আছেঃ {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, {{HTMLElement("iframe")}}, {{HTMLElement("frame")}}, {{HTMLElement("body")}}, and {{HTMLElement("html")}}.</p> - -<h2 id="আরও_দেখুন">আরও দেখুন</h2> - -<ul> - <li>{{domxref("document.activeElement")}}</li> - <li>{{domxref("document.hasFocus")}}</li> -</ul> 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 ---- -<div class="geckoVersionNote"> - <div class="callout-box"> - <strong><a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="en-US/docs/Using_the_W3C_DOM_Level_1_Core">W3C DOM এর ১ম কোর লেভেল ব্যবহার করা</a></strong><br> - W3C DOM এর হাতেখড়ি।</div> -</div> -<div> - <p><span class="seoSummary"><strong>ডকুমেন্ট অবজেক্ট মডেল </strong>(Document Object Model) বা সংক্ষেপে DOM হচ্ছে <a href="/bn-BD/docs/HTML">HTML</a> এবং <a href="/bn-BD/docs/XML">XML</a> ডকুমেন্ট ম্যানিপুলেট করার জন্য একটি অ্যাপ্লিকেশন প্রোগ্রামিং ইন্টারফেস বা API । এটা ডকুমেন্ট এর একটি গাঠনিক উপস্থাপনা প্রদান করে, আর আপনাকে <a href="/bn-BD/docs/JavaScript">জাভাস্ক্রিপ্ট</a> ব্যবহার করে এর ভেতরে থাকা কন্টেন্ট এবং দৃশ্যমান উপাদানগুলোকে সংশোধন করার সুবিধা প্রদান করে।</span></p> -</div> -<div class="cleared topicpage-table row"> - <div class="section"> - <h2 class="Documentation" id="Documentation" name="Documentation">DOM সম্পর্কে ডকুমেন্টেশন</h2> - <dl> - <dt> - <a href="/bn-BD/docs/DOM/DOM_Reference" title="en-US/docs/Gecko_DOM_Reference">DOM রেফারেন্স</a></dt> - <dd> - ডকুমেন্ট অবজেক্ট মডেল এর রেফারেন্স।</dd> - <dt> - <a href="/bn-BD/docs/DOM/About_the_Document_Object_Model" title="en-US/docs/About_the_Document_Object_Model">ডকুমেন্ট অবজেক্ট মডেল সম্পর্কে</a></dt> - <dd> - DOM সম্পর্কে সংক্ষিপ্ত বর্ণনা।</dd> - <dt> - <a href="/bn-BD/docs/JavaScript/JavaScript_technologies_overview" title="en-US/docs/The_DOM_and_JavaScript">DOM এবং জাভাস্ক্রিপ্ট</a></dt> - <dd> - DOM কি ? জাভাস্ক্রিপ্ট কি ? কিভাবে আমি এই দুটোকে একসাথে আমার ওয়েব পেজে ব্যবহার করব ? এখানে পাবেন এমন সব প্রশ্নের উত্তর।</dd> - <dt> - <a href="/bn-BD/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information" title="en-US/docs/DOM/Using_dynamic_styling_information">ডায়নামিক স্টাইলিং তথ্য ব্যবহার করা</a></dt> - <dd> - DOM এর মাদ্ধমে কিভাবে তথ্য সংগ্রহ করা যায় এবং স্টাইলিং ম্যানিপুলেট করা যায়।</dd> - <dt> - <a href="/bn-BD/docs/DOM/DOM_event_reference" title="DOM event reference">DOM ইভেন্ট রেফারেন্স</a></dt> - <dd> - DOM ইভেন্ট সমূহের অর্থসহ তালিকা।</dd> - <dt> - <a href="/bn-BD/docs/DOM/Manipulating_the_browser_history" title="en-US/docs/DOM/Manipulating_the_browser_history">History API: ব্রাউজারের ইতিহাস ম্যানিপুলেট করা</a></dt> - <dd> - HTML5-এ চালু হওয়া DOM এর বর্ণনা করে {{ domxref("window.history") }} অবজেক্ট, ব্রাউজারের ইতিহাস ডায়নামিক্যালি পরিবর্তন করার সুবিধা প্রদান করে।</dd> - <dt> - <a href="/en-US/docs/Using_files_from_web_applications" title="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications">ফাইল API: ওয়েব অ্যাপ্লিকেশন থেকে ফাইল ব্যবহার করা</a></dt> - <dd> - HTML5-এ প্রবর্তিত লোকাল ফাইল নির্বাচন করার এবং পড়ার ক্ষমতা বর্ণনা।</dd> - <dt> - <a href="/en-US/docs/DOM/Using_the_Page_Visibility_API" title="en-US/docs/DOM/Using_the_Page_Visibility_API">Page এর Visibility API ব্যবহার করা</a></dt> - <dd> - এখানে বর্ণনা করা হয়েছে, কিভাবে একটি ওয়েব পেজ সনাক্ত করতে হবে এবং উক্ত ওয়েব পেজ থেকে প্রাপ্ত তথ্য ব্যবহার করতে হবে; সেটা ব্যাকগ্রাউন্ডে ব্যবহৃত হোক বা ফোরগ্রাউন্ডে।</dd> - <dt> - <a href="/en-US/docs/DOM/Using_full-screen_mode" title="Using full-screen mode">Fullscreen API: ফুলস্ক্রিন মোড ব্যবহার করা</a></dt> - <dd> - এতে বর্ণনা করা হয়েছে, কিভাবে একটি পেজকে ব্রাউজারের কোন এলিমেন্ট ছাড়া সমগ্র স্ক্রিন জুড়ে দেখার জন্য তৈরি করতে হবে।</dd> - <dt> - <a href="/en-US/docs/Determining_the_dimensions_of_elements" title="en-US/docs/Determining_the_dimensions_of_elements">এলিমেন্টের মাত্রা নির্ণয়</a></dt> - <dd> - আপনার প্রয়োজন অনুযায়ী সঠিক ভাবে এলিমেন্টের মাত্রা নির্ধারণের কৌশল এখানে বর্ণনা করা হয়েছে।</dd> - <dt> - <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface" title="en-US/docs/Dynamically_modifying_XUL-based_user_interface">Dynamically modifying XUL-based user interface</a></dt> - <dd> - The basics of manipulating the XUL UI with DOM methods.</dd> - </dl> - <p><span class="alllinks"><a href="/en-US/docs/tag/DOM" title="/en-US/docs/tag/DOM">View All...</a></span></p> - </div> - <div class="section"> - <h2 class="Community" id="Community" name="Community">Getting help from the community</h2> - <p>You need help on a DOM-related problem and can't find the solution in the documentation?</p> - <ul> - <li>Consult the dedicated Mozilla forum: {{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}</li> - </ul> - <h2 class="Tools" id="Tools" name="Tools">Tools easing working with the DOM</h2> - <ul> - <li><a class="external" href="http://www.getfirebug.com/">Firebug </a></li> - <li><a href="/en-US/docs/DOM_Inspector" title="en-US/docs/DOM_Inspector">DOM Inspector</a></li> - <li><a class="external" href="http://slayeroffice.com/tools/modi/v2.0/modi_help.html">Mouse-over DOM Inspector</a></li> - <li><a class="external" href="http://www.karmatics.com/aardvark/">Aardvark Firefox extension</a></li> - </ul> - <p><span class="alllinks"><a href="/en-US/docs/tag/DOM:Tools" title="/en-US/docs/tag/DOM:Tools">View All...</a></span></p> - <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> - <ul> - <li><a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DHTML" title="en-US/docs/DHTML">DHTML</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li> - </ul> - </div> -</div> -<p> </p> 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 ---- -<p>{{APIRef("DOM")}}</p> - -<p><span class="seoSummary">The <code><strong>Event</strong></code> interface represents an event which takes place in the DOM.</span></p> - -<p>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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click" title="The HTMLElement.click() method simulates a mouse click on an element."><code>HTMLElement.click()</code></a> method of an element, or by defining the event, then sending it to a specified target using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent" title="Dispatches an Event at the specified EventTarget, (synchronously) invoking the affected EventListeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent()."><code>EventTarget.dispatchEvent()</code></a>.</p> - -<p>There are many types of events, some of which use other interfaces based on the main <code>Event</code> interface. <code>Event</code> itself contains the properties and methods which are common to all events.</p> - -<p>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 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">HTML elements</a> (such as <code><button></code>, <code><div></code>, <code><span></code>, etc.) using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" title="The EventTarget method addEventListener() sets up a function that will be called whenever the specified event is delivered to the target."><code>EventTarget.addEventListener()</code></a>, and this generally replaces using the old HTML <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">event handler attributes</a>. Further, when properly added, such handlers can also be disconnected if needed using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener" title="The EventTarget.removeEventListener() method removes from the EventTarget an event listener previously registered with EventTarget.addEventListener(). The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal"><code>removeEventListener()</code></a>.</p> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> 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.)</p> -</div> - -<p>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 <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">Event bubbling and capture</a> settings of each handler triggered.</p> - -<h2 id="Introduction" name="Introduction">Interfaces based on Event</h2> - -<p>Below is a list of interfaces which are based on the main <code>Event</code> interface, with links to their respective documentation in the MDN API reference.</p> - -<p>Note that all event interfaces have names which end in "Event".</p> - -<div class="index"> -<ul> - <li>{{domxref("AnimationEvent")}}</li> - <li>{{domxref("AudioProcessingEvent")}}</li> - <li>{{domxref("BeforeInputEvent")}}</li> - <li>{{domxref("BeforeUnloadEvent")}}</li> - <li>{{domxref("BlobEvent")}}</li> - <li>{{domxref("ClipboardEvent")}}</li> - <li>{{domxref("CloseEvent")}}</li> - <li>{{domxref("CompositionEvent")}}</li> - <li>{{domxref("CSSFontFaceLoadEvent")}}</li> - <li>{{domxref("CustomEvent")}}</li> - <li>{{domxref("DeviceLightEvent")}}</li> - <li>{{domxref("DeviceMotionEvent")}}</li> - <li>{{domxref("DeviceOrientationEvent")}}</li> - <li>{{domxref("DeviceProximityEvent")}}</li> - <li>{{domxref("DOMTransactionEvent")}}</li> - <li>{{domxref("DragEvent")}}</li> - <li>{{domxref("EditingBeforeInputEvent")}}</li> - <li>{{domxref("ErrorEvent")}}</li> - <li>{{domxref("FetchEvent")}}</li> - <li>{{domxref("FocusEvent")}}</li> - <li>{{domxref("GamepadEvent")}}</li> - <li>{{domxref("HashChangeEvent")}}</li> - <li>{{domxref("IDBVersionChangeEvent")}}</li> - <li>{{domxref("InputEvent")}}</li> - <li>{{domxref("KeyboardEvent")}}</li> - <li>{{domxref("MediaStreamEvent")}}</li> - <li>{{domxref("MessageEvent")}}</li> - <li>{{domxref("MouseEvent")}}</li> - <li>{{domxref("MutationEvent")}}</li> - <li>{{domxref("OfflineAudioCompletionEvent")}}</li> - <li>{{domxref("OverconstrainedError")}}</li> - <li>{{domxref("PageTransitionEvent")}}</li> - <li>{{domxref("PaymentRequestUpdateEvent")}}</li> - <li>{{domxref("PointerEvent")}}</li> - <li>{{domxref("PopStateEvent")}}</li> - <li>{{domxref("ProgressEvent")}}</li> - <li>{{domxref("RelatedEvent")}}</li> - <li>{{domxref("RTCDataChannelEvent")}}</li> - <li>{{domxref("RTCIdentityErrorEvent")}}</li> - <li>{{domxref("RTCIdentityEvent")}}</li> - <li>{{domxref("RTCPeerConnectionIceEvent")}}</li> - <li>{{domxref("SensorEvent")}}</li> - <li>{{domxref("StorageEvent")}}</li> - <li>{{domxref("SVGEvent")}}</li> - <li>{{domxref("SVGZoomEvent")}}</li> - <li>{{domxref("TimeEvent")}}</li> - <li>{{domxref("TouchEvent")}}</li> - <li>{{domxref("TrackEvent")}}</li> - <li>{{domxref("TransitionEvent")}}</li> - <li>{{domxref("UIEvent")}}</li> - <li>{{domxref("UserProximityEvent")}}</li> - <li>{{domxref("WebGLContextEvent")}}</li> - <li>{{domxref("WheelEvent")}}</li> -</ul> -</div> - -<h2 id="Constructor" name="Constructor">Constructor</h2> - -<dl> - <dt>{{domxref("Event.Event", "Event()")}}</dt> - <dd>Creates an <code>Event</code> object, returning it to the caller.</dd> -</dl> - -<h2 id="Properties" name="Properties">Properties</h2> - -<dl> - <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt> - <dd>A boolean indicating whether or not the event bubbles up through the DOM.</dd> - <dt>{{domxref("Event.cancelBubble")}}</dt> - <dd>A historical alias to {{domxref("Event.stopPropagation()")}}. Setting its value to <code>true</code> before returning from an event handler prevents propagation of the event.</dd> - <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt> - <dd>A boolean indicating whether the event is cancelable.</dd> - <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt> - <dd>A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.</dd> - <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt> - <dd>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 <em>retargeting</em>.</dd> - <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt> - <dd>An {{jsxref("Array")}} of DOM {{domxref("Node")}}s through which the event has bubbled.</dd> - <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt> - <dd>Indicates whether or not the call to {{domxref("event.preventDefault()")}} canceled the event.</dd> - <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt> - <dd>Indicates which phase of the event flow is being processed.</dd> - <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> - <dd>The explicit original target of the event (Mozilla-specific.)</dd> - <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> - <dd>The original target of the event, before any retargetings. (Mozilla-specific.)</dd> - <dt>{{domxref("Event.returnValue")}}</dt> - <dd>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 <code>returnValue</code> if you choose to do so.</dd> - <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt> - <dd>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.</dd> - <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt> - <dd>A reference to the target to which the event was originally dispatched.</dd> - <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt> - <dd>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.</dd> - <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt> - <dd>The name of the event. Case-insensitive.</dd> - <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt> - <dd>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")}}).</dd> -</dl> - -<h3 id="Obsolete_properties">Obsolete properties</h3> - -<dl> - <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt> - <dd>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.)</dd> -</dl> - -<h2 id="Methods" name="Methods">Methods</h2> - -<dl> - <dt>{{domxref("Event.createEvent()")}} {{deprecated_inline}}</dt> - <dd> - <p>Creates a new event, which must then be initialized by calling its <code>initEvent()</code> method.</p> - </dd> - <dt>{{domxref("Event.composedPath()")}}</dt> - <dd>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.</dd> -</dl> - -<dl> - <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt> - <dd>Initializes the value of an Event created. If the event has already been dispatched, this method does nothing.</dd> - <dt>{{domxref("Event.preventDefault()")}}</dt> - <dd>Cancels the event (if it is cancelable).</dd> - <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt> - <dd>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).</dd> - <dt>{{domxref("Event.stopPropagation()")}}</dt> - <dd>Stops the propagation of events further along in the DOM.</dd> -</dl> - -<h3 id="Obsolete_methods">Obsolete methods</h3> - -<dl> - <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt> - <dd>Non-standard; use {{domxref("Event.defaultPrevented")}} instead. (Returns the value of {{domxref("Event.defaultPrevented")}}.)</dd> - <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt> - <dd>Obsolete; use {{domxref("event.stopPropagation")}} instead. (Prevents the event from bubbling.)</dd> - <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt> - <dd>Obsolete; use {{domxref("event.stopPropagation")}} instead.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Event")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>Types of events available: <a href="/en-US/docs/Web/Reference/Events">Event reference</a></li> - <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a> (<code>target</code> vs <code>currentTarget</code> vs <code>relatedTarget</code> vs <code>originalTarget</code>)</li> - <li><a href="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Creating and triggering custom events</a></li> - <li>For Firefox add-on developers: - <ul> - <li><a href="/en-US/docs/Listening_to_events_in_Firefox_extensions">Listening to events in Firefox extensions</a></li> - <li><a href="/en-US/docs/Listening_to_events_on_all_tabs">Listening to events on all tabs</a></li> - </ul> - </li> -</ul> 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 ---- -<div>{{apiref("DOM")}}</div> - -<p><span class="seoSummary">The {{domxref("Event")}} interface's <strong><code>preventDefault()</code></strong> 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.</span> 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.</p> - -<p>As noted below, calling <code><strong>preventDefault()</strong></code> for a non-cancelable event, such as one dispatched via {{domxref("EventTarget.dispatchEvent()")}}, without specifying <code>cancelable: true</code> has no effect.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><em>event</em>.preventDefault(); -</pre> - -<h2 id="Examples">Examples</h2> - -<h3 id="Blocking_default_click_handling">Blocking default click handling</h3> - -<p>Toggling a checkbox is the default action of clicking on a checkbox. This example demonstrates how to prevent that from happening:</p> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">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);</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: 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></pre> - -<h4 id="Result">Result</h4> - -<p>{{EmbedLiveSample("Blocking_default_click_handling")}}</p> - -<h3 id="Stopping_keystrokes_from_reaching_an_edit_field">Stopping keystrokes from reaching an edit field</h3> - -<p>The following example demonstrates how invalid text input can be stopped from reaching the input field with <code>preventDefault()</code>. Nowadays, you should usually use <a href="/en-US/docs/Learn/HTML/Forms/Form_validation">native HTML form validation</a> instead.</p> - -<h4 id="HTML_2">HTML</h4> - -<p>Here's the form:</p> - -<pre class="brush: html"><div class="container"> - <p>Please enter your name using lowercase letters only.</p> - - <form> - <input type="text" id="my-textbox"> - </form> -</div></pre> - -<h4 id="CSS">CSS</h4> - -<p>We use a little bit of CSS for the warning box we'll draw when the user presses an invalid key:</p> - -<pre class="brush: css">.warning { - border: 2px solid #f39389; - border-radius: 2px; - padding: 10px; - position: absolute; - background-color: #fbd8d4; - color: #3b3c40; -}</pre> - -<h4 id="JavaScript_2">JavaScript</h4> - -<p>And here's the JavaScript code that does the job. First, listen for {{domxref("Element/keypress_event", "keypress")}} events:</p> - -<pre class="brush: js">var myTextbox = document.getElementById('my-textbox'); -myTextbox.addEventListener('keypress', checkName, false); -</pre> - -<p>The <code>checkName()</code> function, which looks at the pressed key and decides whether to allow it:</p> - -<pre class="brush: js">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" - ); - } - } -} -</pre> - -<p>The <code>displayWarning()</code> function presents a notification of a problem. It's not an elegant function but does the job for the purposes of this example:</p> - -<pre class="brush: js">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); -}</pre> - -<h4 id="Result_2">Result</h4> - -<p>{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}</p> - -<h2 id="Notes">Notes</h2> - -<p>Calling <code>preventDefault()</code> 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.</p> - -<p>You can use {{domxref("Event.cancelable")}} to check if the event is cancelable. Calling <code>preventDefault()</code> for a non-cancelable event has no effect.</p> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}</td> - <td>{{ Spec2('DOM WHATWG') }}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}</td> - <td>{{ Spec2('DOM2 Events') }}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Event.preventDefault")}}</p> 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 ---- -<p><span style="background-color: #ffffff; color: #4d4e53; display: inline !important; float: none; font-family: 'Open Sans',sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">আপনি যখন জাভাস্ক্রিট ব্যাবহার করে ওয়েব এর জ্ন্য কোড করবেন, আপনার জ্ন্য অনেকগুলি উপোযগী API আছে। নিম্নে সবগুলো interface এর লিংক দেওয়া হল।</span></p> - -<div>{{APIListAlpha}}</div> 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 ---- -<div class="summary"> -<p> ইনডেক্সডডিবি (IndexedDB) ক্লায়েন্ট-সাইড স্টোরেজ এর জন্য একটি এপিআই যা গুরুত্বপূর্ণ পরিমান গাঠনিক ডাটা জমা রাখে এবং যা ইনডেক্স এর সাহায্যে উক্ত ডাটার উপর উচ্চ কর্মক্ষমতাসম্পন্ন অনুসন্ধান চালাতে পারে।যেখানে <a href="/bn-BD/docs/DOM/Storage" title="en-US/docs/DOM/Storage">ডোম স্টোরেজ </a> উপকারী ক্ষুদ্র পরিমান ডাটা জমা রাখার জন্য, এটি কম উপকারী বড় আকারের গাঠনিক ডাটা জমা করার জন্য, সেক্ষেত্রে ইনডেক্সডডিবি(indexedDB) একটি সমাধান প্রদান করে।</p> -</div> - -<p>এই পেজটি এপিআই অবজেক্টসমূহের টেকনিক্যাল বিবরণগুলোর প্রবেশপথ হিসেবে কাজ করে। যদি আপনার প্রাথমিক বই এর দরকার হয় তবে আপনার <a href="/bn-BD/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">ইনডেক্সডডিবির প্রাথমিক ধারণা </a>দেখা উচিত। আরও বিস্তারিতের জন্য দেখুন <a href="https://developer.mozilla.org/bn-BD/docs/IndexedDB/Using_IndexedDB" title="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB">ইনডেক্সডডিবির ব্যবহার</a> ।</p> - -<p>ইনডেক্সডডিবি(IndexedDB) সিনক্রোনাস এবং এসিনক্রোনাস এক্সেস এর জন্য পৃথক এপিআই প্রদান করে। সিনক্রোনাস এপিআই কেবল <a href="/bn-BD/docs/DOM/Worker" title="Worker">ওয়েব ওয়ার্কার </a> এর ভিতরে ব্যবহারের জন্য কিন্তু এটি এখনও কোন ব্রাউজারে বাস্তবায়ন করা হয়নি। এসিনক্রোনাস এপিআই ওয়েবওয়ার্কার এর ভিতরে ও বাইরে উভয় জায়গাতে কাজ করে,কিন্তু ফায়ারফক্সে এখনও বাস্তবায়ন হয়নি।</p> - -<h2 id="এসিনক্রোনাস_এপিআই">এসিনক্রোনাস এপিআই</h2> - -<p>এসিনক্রোনাস এপিআই মেথড কলিং থ্রেডকে ব্লক না করে তা রিটার্ন করে। একটি ডাটাবেজ এ এসিনক্রোনাস প্রবেশাধিকার নেওয়ার জন্য ,একটি <a href="/en-US/docs/Web/API/IDBFactory.open"><code> </code></a><code><a href="/bn-BD/docs/DOM/window" title="en-US/docs/DOM/window">window</a> অবজেক্টের <a href="/bn-BD/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> এট্রিবিউট এর <a href="https://developer.mozilla.org/bn-BD/docs/Web/API/IDBFactory.open">open()</a></code> কল করুন। এই মেথড একটি {{domxref("IDBRequest")}} অবজেক্ট রিটার্ন করে ;এসিনক্রোনাস অপারেশনগুলো এপ্লিকেশন এর সাথে যোগাযোগ করে {{domxref("IDBRequest")}} অবজেক্টগুলোর ইভেন্ট চালুর মাধ্যমে।</p> - -<div class="note"> -<p>নোট: <code>indexedDB</code> অবজেক্ট পুরাতন ব্রাউজার ভার্সনগুলোতে পূর্বনির্ধারিত (property <code>mozIndexedDB</code> Gecko < 16 এ , <code>webkitIndexedDB</code> Chrome এ, এবং <code>msIndexedDB</code> IE 10 ে).</p> -</div> - -<p>এসিনক্রোনাস ইনডেক্সডডিবি (IndexedDB) এপিআই এর ইন্টারফেসগুলো নিচের ন্যায়:</p> - -<dl> - <dt>{{domxref("IDBFactory")}}</dt> - <dd>ডাটাবেজে প্রবেশাধিকার প্রদান করে। গ্লোবাল অবজেক্ট <a href="/bn-BD/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> এই ইন্টারফেসটি বাস্তবায়ন করছে এবং এই এপিআই এর জন্য এটি প্রবেশমুখ।</dd> - <dt>{{domxref("IDBCursor")}}</dt> - <dd>অবজেক্ট স্টোরসমূহ এবং ইনডেক্সসমূহের উপর বারবার ইটারেট করে।</dd> - <dt>{{domxref("IDBCursorWithValue")}}</dt> - <dd>অবজেক্ট স্টোরসমূহ এবং ইনডেক্সসমূহ বারবার ইটারেট করে এবং কার্সর এর বর্তমান মান রিটার্ন করে।</dd> - <dt>{{domxref("IDBDatabase")}}</dt> - <dd>ডাটাবেজের একটি সংযোগ বুঝায়। এটি একমাত্র রাস্তা যা দিয়ে ডাটাবেজে লেনদেন সম্ভব।</dd> - <dt>{{domxref("IDBEnvironment")}}</dt> - <dd>একটি ক্লায়েন্ট-সাইড ডাটাবেজে প্রবেশাধিকার প্রদান করে। এটি {{ domxref("window") }} এবং{{ domxref("worker") }} অবজেক্টসমূহদ্বারা বাস্তবায়িত হচ্ছে।</dd> - <dt>{{domxref("IDBIndex")}}</dt> - <dd>একটি ইনডেক্স এর মেটাডাটাতে প্রবেশাধিকার প্রদান করে।</dd> - <dt>{{domxref("IDBKeyRange")}}</dt> - <dd>কীসমূহের একটি সীমা সংজ্ঞায়িত করে।</dd> - <dt>{{domxref("IDBObjectStore")}}</dt> - <dd>একটি অবজেক্ট স্টোরকে প্রতিনিধিত্ব করে।</dd> - <dt>{{domxref("IDBOpenDBRequest")}}</dt> - <dd>একটি ডাটাবেজ খোলার অনুরোধকে প্রতিনিধিত্ব করে।</dd> - <dt>{{domxref("IDBRequest")}}</dt> - <dd>ডাটাবেজ এবং ডাটাবেজ অবজেক্টসমূহে এসিনক্রোনাস অনুরোধগুলোর ফলাফলে প্রবেশাধিকার প্রদান করে। এটি হল যেটি আপনি এসিনক্রোনাস মেথডকে কল করার ফলে পান।</dd> - <dt>{{domxref("IDBTransaction")}}</dt> - <dd>একটি ডাটাবেজ ট্রানসেকশনকে প্রতিনিধিত্ব করে। আপনি একটি ডাটাবেজে ট্রানসেকশন তৈরী করেন,স্কোপটি বলে দিলে(যেমন কোন অবজেক্ট স্টোরগুলোতে আপনি প্রবেশাধিকার চাচ্ছেন) এবং কি ধরণের প্রবেশাধিকার চাচ্ছেন( কেবলমাত্র পাঠ নাকি লেখাসহ)।</dd> -</dl> - -<ul> -</ul> - -<p>স্পেসিফেকেশন এর একটি প্রাথমিক ভার্সনে এই মুছে ফেলা ইন্টারফেসগুলো সংজ্ঞায়িত ছিল। কিন্তু এগুলো এখনো নথিবদ্ধ করে রাখা হয়েছে যাতে আপনার পূর্বে লেখা কোন কোড পরিবর্তনের প্রয়োজন হয়।</p> - -<dl> - <dt>{{domxref("IDBVersionChangeRequest")}}</dt> - <dd>একটি ডাটাবেজের ভার্সন পরিবর্তনের অনুরোধকে প্রতিনিধিত্ব কওরে। ডাটাবেজের ভার্সন পরিবর্তনের উপায় সম্প্রতি বদলানো হয়েছে ({{domxref("IDBFactory.open")}} কে কল করে এবং {{domxref("IDBDatabase.setVersion")}}কে কল না করে), এবং {{domxref("IDBOpenDBRequest")}} ইন্টারফেসটি এখন মুছে ফেলা {{domxref("IDBVersionChangeRequest")}} এর কাজ করতে পারে।</dd> - <dt>{{domxref("IDBDatabaseException")}} {{ obsolete_inline() }}</dt> - <dd>ডাটাবেজ অপারেশন এর সময় প্রাপ্ত এক্সসেপশন শর্তগুলোকে প্রতিনিধিত্ব করে।</dd> -</dl> - -<ul> -</ul> - -<div class="note"> -<p><strong>নোট: </strong> এই <a href="/bn-BD/docs/IndexedDB/Syncronous_API" title="/en-US/docs/IndexedDB/SyncronousAPI"> এপিআই এর একটি সিনক্রোনাস ভার্সন </a> আছে,যা কোন ব্রাউজার এখনও বাস্তবায়িত হয়নি। এটি কোন ব্রাউজারে এখনও বাস্তবায়িত হয় নি। এটি <a href="/bn-BD/docs/DOM/Using_web_workers" title="https://developer.mozilla.org/en-US/docs/Using_web_workers">ওয়েব ওয়ার্কার </a>এর সাথে ব্যবহারের জন্য তৈরী।</p> -</div> - -<h2 id="স্টোরেজ_সীমা"> স্টোরেজ সীমা</h2> - -<p>একক ডাটাবেজ এর আইটেম সাইজ এর কোন সীমা নেই। কিন্তু ইনডেক্সডডিবি (IndexedDB) ডাটাবেজ সাইজ এর একটি সীমা থাকতে পারে। এই সীমা(এবং কিভাবে ইউজার ইন্টারফেস তা ব্যবহার করবে) তা এক ব্রাউজার ও অন্য ব্রাউজার এ ভিন্ন হতে পারে।</p> - -<ul> - <li> - <p>ফায়ারফক্স: ইনডেক্সডডিবি ডাটাবেজ সাইজের কোন সীমা নেই। ইউজার ইন্টারফেস ৫০ এমবি এর বড় ব্লব এর জন্য অনুমতি প্রার্থনা করবে এবং এই সাইজ কোটা <code>dom.indexedDB.warningQuota</code> অগ্রাধিকার হতে পরিবর্তন করা যেতে পারে। (যা সংজ্ঞায়িত আছে <a href="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js" title="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js">http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js</a>)</p> - </li> - <li> - <p>গুগল ক্রোম: দেখুন <a class="link-https" href="https://developers.google.com/chrome/whitepapers/storage#temporary" rel="freelink">https://developers.google.com/chrome...rage#temporary</a></p> - </li> -</ul> - -<h2 id="Example" name="Example">উদাহারণ</h2> - -<ul> - <li>মার্কো ক্যাস্টেলুচিও একটি শক্তিশালী উদাহারণ প্রদান করেছে কিভাবে ওয়েব এ ইনডেক্সডডিবি ব্যবহার সম্ভব , উল্লেখ্য তিনি ইনডেক্সডডিবি মজিলা ডেভ ডার্বি এর বিজয়ী ছিলেন। বিজয়ী ডেমোটি ছিল <a href="/en-US/demos/detail/elibri" title="https://developer.mozilla.org/en-US/demos/detail/elibri">ইলিব্রি</a>, একটি লাইব্রেরী এবং ইবুক রিডার এপ্লিকেশন।</li> - <li>আপনি এছাড়াও রেফারেন্স ডক এর রেফারেন্স এপ্লিকেশনটি দেখতে পারেন : <a class="external" href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">টু-ডু নটিফিকেশন </a> (<a class="external" href="http://chrisdavidmills.github.io/to-do-notifications/">সরাসরি উদাহারণ দেখুন </a>)। সমস্ত কোড অংশগুলো এই উদাহারণে আসে নি, কিন্তু প্রতিটি উদাহারণ একই ডাটা স্ট্রাকচার ও সিনট্যাক্স ব্যবহার করছে এবং এই এপ্লিকেশন এর প্রেক্ষাপটে তা যথাযথ।</li> -</ul> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ব্রাউজার সামঞ্জস্যতা</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>বৈশিষ্ট্য</th> - <th>ক্রোম</th> - <th>ফায়ারফক্স(গেকো )</th> - <th>ইন্টারনেট এক্সপ্লোরার</th> - <th>ওপেরা</th> - <th> - <p>সাফারি</p> - - <p>(ওয়েবকিট)</p> - </th> - </tr> - <tr> - <td>এসিনক্রোনাস এপিআই</td> - <td> - <p>১১.0 {{ property_prefix("webkit") }}<br> - 24</p> - </td> - <td>{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}<br> - {{ CompatGeckoDesktop("16.0") }}</td> - <td>১০</td> - <td>১৭</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>সিনক্রোনাস এপিআই<br> - (<a href="/bn-BD/docs/DOM/Using_web_workers" title="https://developer.mozilla.org/en-US/docs/Using_web_workers">ওয়েব ওয়ার্কার</a> এর সাথে ব্যবহৃত)</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}<br> - See {{ bug(701634) }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>বৈশিষ্ট্য</th> - <th>এন্ড্রয়েড</th> - <th>ফায়ারফক্স মোবাইল (গেকো)</th> - <th> - <p>আই-ই</p> - - <p>ফোন</p> - </th> - <th>ওপেরা মোবাইল</th> - <th>সাফারি মোবাইল</th> - </tr> - <tr> - <td>এসিনক্রোনাস এপিআই</td> - <td>৪.৪</td> - <td>{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}<br> - {{ CompatGeckoDesktop("16.0") }}</td> - <td>১০</td> - <td>১৭</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div class="note"> -<p>নোট :কিছু ব্রাউজার এখনও ইনডেক্সডডিবি সাপোর্ট না করলেও <a href="http://caniuse.com/sql-storage" title="http://caniuse.com/sql-storage">ওয়েব সিকুয়েল (webSQL)সাপোর্ট করে</a>, যেমন সাফারি/ওয়েবকিট ডেস্কটপ ও আইওএস। এই সমস্যার একটি সমাধান হচ্ছে <a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">ইনডেক্সডডিবি পলিফিল বা শিম </a> ব্যবহার করা যা অসর্মথিত ব্রাউজার এর ক্ষেত্রে ওয়েবসিকুয়েল এ ফল ব্যাক করে।</p> -</div> - -<h2 id="আরও_দেখুন">আরও দেখুন</h2> - -<ul> - <li><a href="/bn-BD/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="en-US/docs/IndexedDB/Basic Concepts Behind IndexedDB">ইনডেক্সডডিবি এর প্রাথমিক ধারণা </a></li> - <li><a href="/bn-BD/docs/IndexedDB/Using_IndexedDB" title="en-US/docs/IndexedDB/IndexedDB primer">ইনডেক্সডডিবি এর ব্যবহার </a></li> - <li><a class="external" href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/" title="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">ইনডেক্সডডিবিতে ছবি ও ফাইল স্টোর </a></li> - <li><a class="external" href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">ইনডেক্সড ডাটাবেজ এপিআই স্পেসিফিকেশন </a></li> - <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">ইনডেক্সড ডিবি- আপনার ব্রাউজার স্টোরেজ </a></li> - <li><a class="external" href="http://nparashuram.com/IndexedDB/trialtool/index.html" title="http://nparashuram.com/IndexedDB/trialtool/index.html">ইনডেক্সড ডিবি উদাহারণ </a></li> - <li><a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">ইনডেক্সডডিবি পলিফিল/শিম </a>যে সমস্ত ব্রাউজারে কেবল ওয়েব সিকুয়েল সর্মথিত(যেমন মোবাইল ওয়েবকিট )</li> - <li><a href="http://nparashuram.com/IndexedDBShim/" title="http://nparashuram.com/IndexedDBShim/">ইনডেক্সডডিবি জেকুয়েরি প্লাগইন</a></li> -</ul> 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 ---- -<p>{{APIRef}}</p> - -<p><strong><code>InputEvent</code></strong> ইন্টারফেসটি সম্পাদনযোগ্য কন্টেন্টে কোন পরিবর্তন হলে, সে পরিবর্তন সম্পর্কে জানায়।</p> - -<h2 id="প্রোপার্টি">প্রোপার্টি</h2> - -<p><em><code>InputEvent</code></em><em> ইন্টারফেসটির কোন প্রোপার্টি নেই।</em></p> - -<h2 id="মেথড">মেথড</h2> - -<p><em><code>InputEvent</code></em> <em>ইন্টারফেসটির কোন মেথড নেই।</em></p> - -<h2 id="ইভেন্ট">ইভেন্ট</h2> - -<dl> - <dt>{{domxref("InputEvent.data")}} {{readOnlyInline}}</dt> - <dd>লেখা বর্ণগুলি নিয়ে একটু {{domxref("DOMString")}} রিটার্ন করে। এই স্ট্রিংটি খালি হতে পারে, যদি পরিবর্তনের ফলে নতুন বর্ণ লেখা না হয়। (যেমন বর্ণ মুছার সময়)</dd> - <dt>{{domxref("InputEvent.isComposing")}} {{readOnlyInline}}</dt> - <dd><code>compositionstart</code> এর আগে এবং <code>compositionend</code> এর পরে একটু বুলিয়ান ভ্যালু নিয়ে ইভেন্ট ফায়ার করে।</dd> -</dl> - -<h2 id="ব্রাউজার_সমর্থন">ব্রাউজার সমর্থন</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>ফিচার</th> - <th>ক্রোম</th> - <th>ফায়ারফক্স (গেকো)</th> - <th>ইন্টারনেট এক্সপ্লোরার</th> - <th>অপেরা</th> - <th>সাফারি (ওয়েবকিট)</th> - </tr> - <tr> - <td><code>data</code></td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code>isComposing</code></td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatGeckoDesktop("31.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>ফিচার</th> - <th>অ্যান্ড্রয়েড</th> - <th>ফায়ারফক্স মোবাইল (গেকো)</th> - <th>ইন্টারনেট এক্সপ্লোরার ফোন</th> - <th>অপেরা মোবাইল</th> - <th>সাফারি মোবাইল</th> - </tr> - <tr> - <td><code>data</code></td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code>isComposing</code></td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatGeckoMobile("31.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 class="note" id="আরও_দেখুন">আরও দেখুন</h2> - -<ul> - <li><code>beforeinput</code></li> - <li><code>input</code></li> -</ul> 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 ---- -<div> - {{APIRef}}</div> -<p>একটি অবজেক্ট, যেটি একক স্টাইল শীট তথা <code>StyleSheet</code> ইন্টারফেস বর্ণনা করে। সিএসএস স্টাইল শীট সমূহ আরও বিশেষ ধরণের {{domxref("CSSStyleSheet")}} ইন্টারফেস বাস্তবায়ন করবে।</p> -<h2 id="Properties" name="Properties">প্রপার্টি সমূহ</h2> -<dl> - <dt> - {{domxref("StyleSheet.disabled")}}</dt> - <dd> - এটি একটি {{domxref("Boolean")}} মান, যেটা বর্ণনা করবে যে বর্তমান স্টাইলশীট টি প্রয়োগ করা হয়েছে কি না।</dd> - <dt> - {{domxref("StyleSheet.href")}} {{readonlyInline}}</dt> - <dd> - এটি একটি {{domxref("DOMString")}} প্রদান করে, যেটার মধ্যে স্টাইলশীটের অবস্থান লেখা থাকবে।</dd> - <dt> - {{domxref("StyleSheet.media")}} {{readonlyInline}}</dt> - <dd> - এটি একটি {{domxref("MediaList")}} দেয়, যার মধ্যে স্টাইল তথ্যের কাঙ্ক্ষিত লক্ষ্যের মাধ্যম বর্ণনা করা থাকে।</dd> - <dt> - {{domxref("StyleSheet.ownerNode")}} {{readonlyInline}}</dt> - <dd> - এটা একটি {{domxref("Node")}} প্রদান করে, যা বর্তমান ডকুমেন্টের সাথে এই স্টাইলশীটকে যুক্ত করে।</dd> - <dt> - {{domxref("StyleSheet.parentStyleSheet")}} {{readonlyInline}}</dt> - <dd> - বর্তমানটির সাথে এটি আরও একটি {{domxref("StyleSheet")}} দেয় (যদি থাকে); যদি কোন স্টাইলশীট না থাকে, তাহলে <code>null</code> প্রদান করে।</dd> - <dt> - {{domxref("StyleSheet.title")}} {{readonlyInline}}</dt> - <dd> - বর্তমান স্টাইলশীটের শিরোনামের জন্য এটা {{domxref("DOMString")}} প্রদান করে।</dd> - <dt> - {{domxref("StyleSheet.type")}}{{readonlyInline}}</dt> - <dd> - বর্তমান স্টাইলশীটের ভাষা উপস্থাপন করার জন্য এটা {{domxref("DOMString")}} প্রদান করে।</dd> -</dl> -<h2 id="Specification" name="Specification">বৈশিষ্ট্য</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">বৈশিষ্ট্য</th> - <th scope="col">অবস্থা</th> - <th scope="col">মন্তব্য</th> - </tr> - <tr> - <td>{{ SpecName('CSSOM', '#stylesheet', 'StyleSheet') }}</td> - <td>{{ Spec2('CSSOM') }}</td> - <td>{{ SpecName('DOM2 Style') }} এরপর থেকে কোন পরিবর্তন হয়নি।</td> - </tr> - <tr> - <td>{{ SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-StyleSheet', 'StyleSheet') }}</td> - <td>{{ Spec2('DOM2 Style') }}</td> - <td>প্রাথমিক সংজ্ঞা।</td> - </tr> - </tbody> -</table> -<h2 id="আরও_দেখুন">আরও দেখুন</h2> -<ul> - <li>{{domxref("CSSStyleSheet")}}</li> -</ul> 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 ---- -<p><strong>WebRTC</strong> (যেখানে RTC এর পূর্ণরুপ Real-Time Communications) হল একটি প্রযুক্তি যা একাধিক ব্রাউজারের মধ্যে ব্রাউজার-ব্রাউজার অডিও/ভিডিও স্ট্রিমিং কিংবা ডাটা শেয়ারিং সুবিধা প্রদান করে থাকে। WebRTC এর সাহায্যে কোনরূপ প্লাগ-ইন বা এক্সটেনশন ব্যবহার ছাড়াই স্ট্যান্ডার্ড ওয়েব এপিআই এর সাহায্যে টেলিকনফারেন্সিং কিংবা ডাটা শেয়ারিং সম্ভব।</p> - -<p>WebRTC এর অংশগুলোকে জাভাস্ক্রিপ্ট এপিআই এর সাহায্য ব্যবহার করা যায়: Network Stream API একটি অডিও/ভিডিও স্ট্রিম নির্দেশ করে, PeerConnection API এর সাহায্য দুই বা ততোধিক ব্রাউজারের মধ্যে সংযোগ স্থাপন করা যায়, এবং DataChannel API এর সাহায্য অডিও/ভিডিও ব্যতীত অন্যান্য ধরণের ডাটা আদানপ্রদান করা যায় - যা গেমিং, চ্যাট কিংবা ফাইল ট্রান্সফারের জন্য অসাধারণ!</p> - -<div class="note"> -<p><span style="color: #000000;"><strong>উল্লেখ্য:</strong> এই ডকুমেন্টেশন <a href="/bn-BD/docs/Web/API/WebRTC_API">নতুন যায়গায়</a> চলে যাচ্ছে। </span></p> -</div> - -<h2 id="গাইড">গাইড</h2> - -<dl> - <dt><a href="/bn-BD/docs/WebRTC/Peer-to-peer_communications_with_WebRTC" title="/bn-BD/docs/WebRTC/Peer-to-peer_communications_with_WebRTC">WebRTC এর সাহায্যে পিয়ার-টু-পিয়ার যোগাযোগ</a></dt> - <dd>ওয়েবআরটিসি এপিআই এর সাহায্যে পিয়ার টু পিয়ার যোগাযোগ করা।</dd> - <dt><a href="/bn-BD/docs/Web/Guide/API/WebRTC/WebRTC_architecture" title="/bn-BD/docs/Web/Guide/API/WebRTC/WebRTC_architecture">WebRTC এর আর্কিটেকচার পরিচিতি</a></dt> - <dd>WebRTC এর অনেকগুলো আলাদা আলাদা অংশ রয়েছে যা নবাগতদের জন্য প্রচণ্ড বিভ্রান্তকর। এই আর্টিকেলে এইসকল অংশগুলোর পরিচয় দিয়ে, তারা কিভাবে একত্রে কাজ করে - সে সম্পর্কে ধারণা দেওয়া হয়েছে।</dd> - <dt><a href="/bn-BD/docs/Web/Guide/API/WebRTC/WebRTC_basics" title="/bn-BD/docs/Web/Guide/API/WebRTC/WebRTC_basics">WebRTC এর সাধারণ বিষয়াবলী</a></dt> - <dd>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.</dd> -</dl> - -<h2 id="রেফারেন্স">রেফারেন্স</h2> - -<dl> - <dt><a href="/bn-BD/docs/Web/API/Navigator.getUserMedia">Navigator.getUserMedia</a></dt> - <dd>মিডিয়া (ভিডিও/অডিও) ক্যাপচার করার এপিআই।</dd> - <dt><a href="/bn-BD/docs/Web/API/RTCPeerConnection"><span style="color: #0095dd;">RTCPeerConnection</span></a></dt> - <dd>দুইটি পিয়ারের মধ্যে ডাটা স্ট্রিমিং করার ইন্টারফেস।</dd> - <dt><a href="/bn-BD/docs/Web/API/RTCDataChannel">RTCDataChannel</a></dt> - <dd>পিয়ার কানেকশনের মধ্যে দিয়ে ডাটা (মিডিয়া নয় এমন) পাঠানোর ইন্টারফেস।</dd> -</dl> 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 ---- -<p>{{CSSRef}}{{SeeCompatTable}}</p> - -<p><strong>CSS Animations</strong> 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.</p> - -<h2 id="Reference">Reference</h2> - -<h3 id="CSS_Properties">CSS Properties</h3> - -<div class="index"> -<ul> - <li>{{cssxref("animation")}}</li> - <li>{{cssxref("animation")}}</li> - <li>{{cssxref("animation-delay")}}</li> - <li>{{cssxref("animation-direction")}}</li> - <li>{{cssxref("animation-duration")}}</li> - <li>{{cssxref("animation-fill-mode")}}</li> - <li>{{cssxref("animation-iteration-count")}}</li> - <li>{{cssxref("animation-name")}}</li> - <li>{{cssxref("animation-play-state")}}</li> - <li>{{cssxref("animation-timing-function")}}</li> -</ul> -</div> - -<h3 id="CSS_At-rules">CSS At-rules</h3> - -<div class="index"> -<ul> - <li>{{cssxref("@keyframes")}}</li> -</ul> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Detecting CSS animation support</a></dt> - <dd>Describes a technique for detecting if the browser supports CSS animations.</dd> - <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using CSS animations</a></dt> - <dd>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.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Animations') }}</td> - <td>{{ Spec2('CSS3 Animations') }}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> - 43.0</td> - <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br> - {{CompatGeckoDesktop("16.0")}}</td> - <td>10</td> - <td>12{{property_prefix("-o")}}<br> - 12.10<sup>[2]</sup></td> - <td>4.0{{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>2.1 {{property_prefix("-webkit")}} [1]<br> - 4.0 {{property_prefix("-webkit")}}</td> - <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br> - {{CompatGeckoMobile("16.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Partial support: {{cssxref("animation-fill-mode")}} property is not supported in Android browser below 2.3.</p> - -<p>[2] See the <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">release notes to Opera 12.50</a>.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>Related to CSS Animations, <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a> can trigger animations on user actions.</li> -</ul> - -<p> </p> 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 ---- -<p>{{CSSRef}}{{SeeCompatTable}}</p> - -<p><strong>CSS Transforms</strong> is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.</p> - -<h2 id="Reference">Reference</h2> - -<h3 id="CSS_Properties">CSS Properties</h3> - -<div class="index"> -<ul> - <li>{{cssxref("backface-visibility")}}</li> - <li>{{cssxref("perspective")}}</li> - <li>{{cssxref("perspective-origin")}}</li> - <li>{{cssxref("transform")}}</li> - <li>{{cssxref("transform-box")}}</li> - <li>{{cssxref("transform-origin")}}</li> - <li>{{cssxref("transform-style")}}</li> -</ul> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Using CSS transforms</a></dt> - <dd>Step-by-step tutorial about how to transform elements styled with CSS.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Transforms') }}</td> - <td>{{ Spec2('CSS3 Transforms') }}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td> - <p>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> - 36</p> - </td> - <td>{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("16.0")}}<sup>[2]</sup></td> - <td>9.0{{property_prefix("-ms")}}<sup>[3]</sup><br> - 10.0</td> - <td>10.5{{property_prefix("-o")}}<br> - 12.10<br> - 15.0{{property_prefix("-webkit")}}<br> - 23</td> - <td>3.1{{property_prefix("-webkit")}}</td> - </tr> - <tr> - <td>3D Support</td> - <td>12.0{{property_prefix("-webkit")}}<br> - 36</td> - <td>10.0{{property_prefix("-moz")}}<br> - {{CompatGeckoDesktop("16.0")}}</td> - <td>10.0</td> - <td>15.0{{property_prefix("-webkit")}}<br> - 23</td> - <td>4.0{{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatAndroid(2.1)}}{{property_prefix("-webkit")}}<sup>[4]</sup></td> - <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}<br> - 11.0{{property_prefix("-webkit")}}<sup>[5]</sup></td> - <td>11.5{{property_prefix("-webkit")}}</td> - <td>3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> - </tr> - <tr> - <td>3D Support</td> - <td>{{CompatAndroid(3.0)}}{{property_prefix("-webkit")}}</td> - <td>{{CompatVersionUnknown}}{{ property_prefix("-webkit")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>22{{property_prefix("-webkit")}}</td> - <td>3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Gecko 14.0 removed the experimental support for <code>skew()</code>, 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.</p> - -<p>[2] Before Firefox 16, the translation values of <code>matrix()</code> and <code>matrix3d()</code> could be {{cssxref("<length>")}}, in addition to the standard {{cssxref("<number>")}}.</p> - -<p>[3] Internet Explorer 5.5 or later supports a proprietary <a href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx">Matrix Filter</a> which can be used to achieve a similar effect.</p> - -<p>Internet Explorer 9.0 or earlier has no support for 3D transforms, mixing 3D and 2D transform functions. such as <code>-ms-transform:rotate(10deg) translateZ(0);</code> will prevent the entire property from being applied.</p> - -<p>[4] Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a <code>-webkit-transform</code>.</p> - -<p>[5] Internet Explorer 11.0 supports the {{property_prefix("-webkit")}} <a href="https://msdn.microsoft.com/library/jj127312#code-snippet-1">prefixed variant as an alias for the default one</a>.</p> - -<p> </p> 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() ---- -<div> - {{CSSRef}}{{SeeCompatTable}}</div> -<h2 id="Summary" name="Summary">সারাংশ</h2> -<h2 id="Summary" name="Summary"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;"><span style="color: #0000cd;"><a href="https://developer.mozilla.org/en-US/docs/CSS" title="CSS">CSS</a> </span> ফাংশন এলিমেন্টটি একটি{ {xref_cssimage}} এর মান কে সংজ্ঞায়িত করে যা একটি arbitrary HTML এলিমেন্ট থেকে উৎপন্ন হয়।এই ছবিটি জীবন্ত, অর্থাৎ যদি HTML উপাদান পরিবর্তন করা হয় ,তবে ফলপ্রসূ মান ব্যবহারিত সিএসএস বৈশিষ্ট্যগুলো স্বয়ংক্রিয়ভাবে আধুনিকায়িত হয়ে যাবে ।</span></h2> -<p>এটি ব্যবহার এর জন্য একটি বিশেষ দৃশ্য হবে HTML এ ছবি রেনডার করা'{{HTMLELEMENT("canvas")}} , তারপর এটিকে ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করবে ।</p> -<p>গেকো ব্রাউজার এ আপনি নন- স্ট্যান্ডর্ডটি ব্যবহার করতে পারেন । {{domxref("document.mozSetImageElement()")}} এই পদ্ধতিটি একটি দেয়া সিএসএস ব্যাকগ্রাউন্ড এর ব্যাকগ্রাউন্ড হিসেবে ব্যবহৃত হওয়া এলিমেন্ট এর পরিবর্তন করে।</p> -<h2 id="Syntax" name="Syntax">পদবিন্যাস</h2> -<pre class="syntaxbox notranslate">element( <em>id</em> )</pre> -<p>যেখানে,</p> -<dl> - <dt> - <strong><code>id</code></strong></dt> - <dd> - একটি এলিমেন্ট এর ID কে ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করতে ,বিশেষ করে এলিমেন্ট এর উপর HTML attribute #id ব্যবহার করা হয়।</dd> -</dl> -<h2 id="Examples" name="Examples">উদাহরন</h2> -<p>এই উদাহরনগুলো <a href="https://developer.mozilla.org/samples/cssref/moz-element.html" title="https://developer.mozilla.org/samples/cssref/moz-element.html">viewed live</a> এ দেখা যাবে <span style="line-height: 1.5;">builds of Firefox এ যা </span><code style="font-style: normal; line-height: 1.5;">-moz-element() সহায়তা করে।</code></p> -<h3 id="কিছু_বাস্তব_উদাহরন">কিছু বাস্তব উদাহরন</h3> -<p>এই উদাহরনটি একটি লুকানো {{HTMLElement("div")}} কে ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করে।ব্যাকগ্রাউন্ড এলিমেন্টটি একটি নতি ব্যবহার করে কিন্তু সেই সাথে টেক্সট ও অন্তর্ভুক্ত করে যা ব্যাকগ্রাউন্ড এর অংশ হিসেবে রেনডার করা হয়।</p> -<pre class="brush: html notranslate"><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></pre> -<p> {{HTMLElement("div")}} এলিমেন্টের সাথে ID "myBackground1" কনটেন্ট এর ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করা হয় যেখানে "This box uses the element with the #myBackground1 ID as its background!" এই অনুছেদটি অন্তর্ভুক্ত করা হয়।</p> -<p><img alt="example1.png" class="internal default" src="/@api/deki/files/4624/=example1.png"></p> -<h3 id="আরও_কিছু_অদ্ভুত_উদাহরন">আরও কিছু অদ্ভুত উদাহরন</h3> -<p>এই উদাহরনটি একটি লুকানো {{HTMLElement("button")}} এলিমেন্ট কে পুনরাবৃওি নমুনায় ব্যাকগ্রাউনড হিসেবে ব্যবহার করে।এটি প্রমান করে যে আপনি ব্যাকগ্রাউন্ড হিসেবে arbitrary এলিমেন্ট ব্যবহার করতে পারেন কিন্তু ভাল নকশা অনুশীলনে ততটা প্রয়োজনীয় নয়।</p> -<pre class="brush: html notranslate"><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> -</pre> -<p><img alt="example2.png" class="internal default" src="/@api/deki/files/4625/=example2.png"></p> -<h2 id="নির্দিষ্টকরন">নির্দিষ্টকরন</h2> -<table class="standard-table"> - <thead> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="http://dev.w3.org/csswg/css4-images/" title="http://dev.w3.org/csswg/css4-images/">CSS Image Values and Replaced Content Level 4</a></td> - <td>{{Spec2('CSS4 Images')}}</td> - <td>Actually now deferred to CSS4.</td> - </tr> - </tbody> -</table> -<h2 id="Browser_compatibility" name="Browser_compatibility">ব্রাউজার সুসঙ্গত</h2> -<p>{{CompatibilityTable}}</p> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>4.0 (2.0) [*] {{property_prefix("-moz")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>4.0 (2.0) [*] {{property_prefix("-moz")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> - </table> -</div> -<p>[*] ব্যবহৃত {{cssxref("background")}} এবং {{cssxref("background-image")}} সিএসএস বৈশিষ্ট্গুলোর জন্য সিমাবদ্ধ।</p> -<h2 id="আরও_দেখুন">আরও দেখুন</h2> -<ul> - <li>{{domxref("document.mozSetImageElement()")}}</li> -</ul> 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 ---- -<p><span class="seoSummary"><strong>Cascading Style Sheets</strong>, <strong>CSS</strong>, মূলত <a href="https://developer.mozilla.org/bn-BD/docs/DOM/stylesheet">stylesheet</a> সংক্রান্ত ভাষা যা একটি <a href="https://developer.mozilla.org/bn-BD/docs/HTML" title="The HyperText Mark-up Language">HTML</a></span> or <a href="https://developer.mozilla.org/bn-BD/docs/XML" title="en-US/docs/XML">XML</a> দিয়ে (অনেক ধরনের XML ভাষা সহ যেমন <a href="https://developer.mozilla.org/bn-BD/docs/SVG" title="en-US/docs/SVG">SVG</a> অথবা <a href="https://developer.mozilla.org/bn-BD/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>) লেখা নথির উপস্থাপনায় বাবহারিত হয়ে থাকে ।<span class="seoSummary"> CSS </span>গঠনকৃত উপাদান গুলো পর্দায় , কাগজে, <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">বক্তব্য বা অন্য কোন মাধ্যমে </span></span> কিভাবে <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">উপস্থাপিত হবে তা ব্যাখ্যা করে থাকে।</span></span></p> - -<p>CSS মুক্ত ওয়েবের একটি কেন্দ্রীয় ভাষা এবং এর <span class="short_text" id="result_box" lang="bn"><span class="hps">প্রমিত</span></span> <a class="external external-icon" href="http://w3.org/Style/CSS/#specs">W3C specification</a> আছে। ধাপে ধাপে <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">বিকশিত হবার কারণে</span></span>, CSS1 বর্তমানে অপ্রচলিত , CSS2.1 একটি পরামর্শ স্বরূপ হয়ে গিয়েছে এবং <a href="https://developer.mozilla.org/bn-BD/docs/CSS/CSS3" title="CSS3">CSS3</a>, <span class="short_text" id="result_box" lang="bn"><span class="hps">এখন</span> <span class="hps">ছোট</span> <span class="short_text" id="result_box" lang="bn"><span class="hps">ছোট</span></span> <span class="alt-edited hps">মডিউলে</span> <span class="hps">বিভক্ত</span></span>, যা প্রমিত রূপ লাভের দিকে অগ্রসর হচ্ছে।</p> - -<section id="sect1"> -<ul class="card-grid"> - <li><span>সিএসএস রেফারেন্স</span> - - <p>ওয়েব ডেভেলপারদের জন্য সিএসএস এর প্রতিটি প্রোপার্টি এবং ধারণা আলোচনা করা হয়েছে আমাদের <a href="https://developer.mozilla.org/bn-BD/docs/CSS/CSS_Reference" title="en-US/docs/CSS/CSS_Reference">বিশাল রেফারেন্সে</a>।</p> - </li> - <li><span>সিএসএস টিউটোরিয়াল</span> - <p>সম্পূর্ণ নতুনদের জন্য <a href="https://developer.mozilla.org/bn-BD/docs/CSS/Getting_Started" title="en-US/docs/CSS/Getting_Started">ধারাবাহিক পরিচিতি</a>। এতে সকল প্রয়োজনীয় বিষয়াদি উপস্থাপন করা হয়েছে।</p> - </li> - <li><span>সিএসএস ডেমো</span> - <p>একটি <a href="https://developer.mozilla.org/bn-BD/demos/tag/tech:css3" title="https://developer.mozilla.org/bn-BD/demos/tag/tech:css3">ডেমোর সংগ্রহ</a> যা সর্বশেষ সিএসএস প্রযুক্তির ক্ষমতা প্রদর্শন করে: সৃজনশীলতা বাড়ানোর জন্য দারুন!</p> - </li> -</ul> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Documentation" name="Documentation">ডকুমেন্টেশন এবং টিউটোরিয়াল</h2> - -<dl> - <dt>সিএসএস এর মৌলিক ধারনা</dt> - <dd>এখানে <a href="/bn-BD/docs/CSS/Syntax" title="/bn-BD/docs/CSS/Syntax">সিনট্যাক্স ও ভাষার ধরন</a> এবং <a href="/bn-BD/docs/CSS/Specificity" title="Specificity">স্পেসিফিসিটি</a>, <a href="/bn-BD/docs/CSS/inheritance" title="inheritance">ইনহেরিট্যান্স</a>, <a href="/bn-BD/docs/CSS/box_model" title="Box model">বক্স মডেল</a>, <a href="/bn-BD/docs/CSS/margin_collapsing" title="Margin collapsing">মার্জিন কলাপসিং</a>, <a href="/bn-BD/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">স্ট্যাকিং</a>, <a href="/bn-BD/docs/CSS/block_formatting_context" title="block formatting context">ব্লক ফরম্যাটিং</a> এর ধারনা, বা <a href="/bn-BD/docs/CSS/initial_value" title="initial value">প্রাথমিক</a>, <a href="/bn-BD/docs/CSS/computed_value" title="computed value">কম্পিউটকৃত</a>, <a href="/bn-BD/docs/CSS/used_value" title="used value">ব্যবহারকৃত </a>ও <a href="/bn-BD/docs/CSS/actual_value" title="actual value">আসল</a> মানের সাথে পরিচিত করা হয়েছে। <a href="/bn-BD/docs/CSS/Shorthand_properties" title="CSS/Shorthand_properties">সিএসএস শর্টহ্যান্ড প্রপার্টি সমূহও</a> এখানে বর্ণনা করা হয়েছে।</dd> - <dt><a href="/bn-BD/docs/Web/Guide/CSS" title="/bn-BD/docs/Web/Guide/CSS">সিএসএস ডেভেলপার গাইড</a></dt> - <dd>আপনার কন্টেন্টকে আরও আকর্ষণীয় করে দেখানোর জন্য যেসব সিএসএস কৌশল সমূহ আপনার অবশ্যই শেখা দরকার, এখানে সেগুলো বর্ণনা করা হয়েছে।</dd> - <dt><a href="/bn-BD/docs/Web/CSS/Common_CSS_Questions">সাধারন সিএসএস জিজ্ঞাসা</a></dt> - <dd>সিএসএস নিয়ে সাধারণত জিজ্ঞাসিত প্রশ্ন ও তার উত্তর এই নিবন্ধে দেয়া হয়েছে।</dd> -</dl> - -<h2 class="Tools" id="Tools" name="Tools">সিএসএস এর জন্য টুল সমূহ</h2> - -<ul> - <li><a class="external" href="http://jigsaw.w3.org/css-validator/">W3C এর সিএসএস ভ্যালিডেশন সেবা</a> পরীক্ষা করে দেখে যে যেই সিএসএস টি দেয়া হয়েছে, সেটি ঠিকঠাক আছে কি না বা সিএসএস এর মধ্যে কোন ভুল আছে কি না। এটি একটি অমূল্য ডিবাগিং টুল।</li> - <li>ফায়ারফক্সের <a class="link-https" href="https://addons.mozilla.org/bn-BD/firefox/addon/1843">ফায়ারবাগ এক্সটেনশন</a><span class="external">, ডেভেলপারদের কাছে একটি জনপ্রিয় এক্সটেনশন বা টুল। এটি ব্যবহার করে আপনি একটি পাতার এইচটিএমএল, সিএসএস ও জাভাস্ক্রিপ্ট ব্রাউজারের মধ্যেই অনেক সহজে সম্পাদনা করতে পারবেন।</span></li> - <li><span class="external">ফায়ারফক্সের </span><a class="link-https" href="https://addons.mozilla.org/bn-BD/firefox/addon/60">ওয়েব ডেভেলপার এক্সটেনশন</a>ও লাইভ সাইট সম্পাদনা করার সুবিধা দেয়। এটা সিম্পল কিন্তু ফায়ারবাগের চেয়ে একটু কম সুবিধা দেয়।</li> - <li>ফায়ারফক্সের <a class="external link-https" href="https://addons.mozilla.org/bn-BD/firefox/addon/179">এডিট সিএসএস এক্সটেনশন</a> সাইডবারে সিএসএস এডিট করার সুবিধা প্রদান করে।</li> -</ul> -</div> - -<div class="section"> -<h2 class="Related_Topics" id="News" name="News">খবর</h2> - -<ul> - <li><a href="http://www.w3.org/TR/css-text-decor-3/" title="http://www.w3.org/TR/css-text-decor-3/">সিএসএস টেক্সট-ডেকোরেশন লেভেল ৩</a> <em>Candidate Recommandation</em> অবস্থায় পৌছেছে। এর অর্থ হচ্ছে <code>text-decoration-*</code> ও <code>text-emphasis-*</code> প্রপার্টি দুটো খুব দ্রুত ব্যবহারোপযোগী হবে। আমাদের অনেক পরিচিত {{cssxref("text-shadow")}}ও এখানে বর্ণনা করা হয়েছে। (১লা আগস্ট<em>, ২০১৩)</em></li> - <li>গেকো এখন {{cssxref("background-origin")}}<code>: local</code> সমর্থন করে। ফায়ারফক্স ২৫ এর পর থেকে (নাইটলিতে ইতোমধ্যে চলে এসেছে) এটা ব্যবহারযোগ্য হবে। <em>(২৫ জুলাই, ২০১৩)</em></li> - <li><a href="http://www.w3.org/TR/pointerevents/" title="http://www.w3.org/TR/pointerevents/">পয়েন্টার ইভেন্ট সমূহ</a> <em>Candidate Recommandation</em> অবস্থায় পৌছেছে। তার মানে<code> touch-action </code>ও খুব দ্রুত ব্যবহারোপযোগী হবে। বর্তমানে এটা শুধু ইন্টারনেট এক্সপ্লোরার ১০ এ যুক্ত করা হয়েছে। তবে এটা ব্যবহার করার জন্য <code>-ms-</code> প্রেফিক্স ব্যবহার করতে হবে। <em>(৬ মে, ২০১৩)</em></li> - <li>গেকোর <a href="/bn-BD/docs/CSS/Tutorials/Using_CSS_flexible_boxes" title="/bn-BD/docs/CSS/Tutorials/Using_CSS_flexible_boxes"><em>flexible boxes</em></a> সমর্থন সাম্প্রতিক একটি বৈশিষ্ট্যের সাথে সামঞ্জস্য স্পষ্ট করার জন্য অনুমোদিত হয়েছেঃ ফায়ারফক্স ২৩ থেকে {{cssxref("::before")}} ও {{cssxref("::after")}} ফ্লেক্সের উপকরণ হবে, এবং {{cssxref("order")}} ও {{cssxref("align-self")}} ব্যবহার করে পুনর্বিন্যাস করা যাবে। <em>(৩ মে, ২০১৩)</em></li> -</ul> - -<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">সংশ্লিষ্ট বিষয়াবলী</h2> - -<ul> - <li>মজিলার <a href="/bn-BD/learn/css" title="https://developer.mozilla.org/bn-BD/learn/css">সিএসএস শেখার রিসোর্স সমূহ</a>।</li> - <li>মুক্ত ওয়েবের ভাষা, যেগুলোতে প্রায়ই সিএসএস প্রয়োগ করা হয়ঃ <a href="/bn-BD/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/bn-BD/docs/SVG" title="SVG">SVG</a>, <a href="/bn-BD/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/bn-BD/docs/XML" title="en-US/docs/XML">XML</a>।</li> - <li>মজিলার প্রযুক্তি সমূহ, যেগুলোতে অনেক বেশি সিএসএস বাবহৃত হয়ঃ <a href="/bn-BD/docs/XUL" title="en-US/docs/XUL">XUL</a>, ফায়ারফক্স ও থান্ডারবার্ড <a href="/bn-BD/docs/Extensions" title="en-US/docs/Extensions">এক্সটেনশন সমূহ</a> এবং <a href="/bn-BD/docs/Themes" title="en-US/docs/Themes">থিম সমূহ</a>।</li> -</ul> -</div> -</div> -</section> 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 ---- -<p>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.</p> - -<p>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 <a href="/en-US/docs/Mozilla/Add-ons">add-ons</a> can use them to interact with the browser.</p> - -<h2 id="Most_Common_Categories">Most Common Categories</h2> - -<table class="standard-table"> - <caption>Resource Events</caption> - <thead> - <tr> - <th scope="col">Event Name</th> - <th scope="col">Fired When</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{event("cached")}}</td> - <td>The resources listed in the manifest have been downloaded, and the application is now cached.</td> - </tr> - <tr> - <td>{{event("error")}}</td> - <td>A resource failed to load.</td> - </tr> - <tr> - <td>{{event("abort")}}</td> - <td>The loading of a resource has been aborted.</td> - </tr> - <tr> - <td>{{event("load")}}</td> - <td>A resource and its dependent resources have finished loading.</td> - </tr> - <tr> - <td>{{event("beforeunload")}}</td> - <td>The window, the document and its resources are about to be unloaded.</td> - </tr> - <tr> - <td>{{event("unload")}}</td> - <td>The document or a dependent resource is being unloaded.</td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>Network Events</caption> - <thead> - <tr> - <th scope="col">Event Name</th> - <th scope="col">Fired When</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{event("online")}}</td> - <td>The browser has gained access to the network.</td> - </tr> - <tr> - <td>{{event("offline")}}</td> - <td>The browser has lost access to the network.</td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>Focus Events</caption> - <thead> - <tr> - <th scope="col">Event Name</th> - <th scope="col">Fired When</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{event("focus")}}</td> - <td>An element has received focus (does not bubble).</td> - </tr> - <tr> - <td>{{event("blur")}}</td> - <td>An element has lost focus (does not bubble).</td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>Websocket Events</caption> - <thead> - <tr> - <th scope="col">Event Name</th> - <th scope="col">Fired When</th> - </tr> - </thead> - <tbody> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></td> - <td>A WebSocket connection has been established.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code></td> - <td>A message is received through a WebSocket.</td> - </tr> - <tr> - <td>{{event("error")}}</td> - <td>A WebSocket connection has been closed with prejudice (some data couldn't be sent for example).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code></td> - <td>A WebSocket connection has been closed.</td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>Session History Events</caption> - <thead> - <tr> - <th scope="col">Event Name</th> - <th scope="col">Fired When</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{event("pagehide")}}</td> - <td>A session history entry is being traversed from.</td> - </tr> - <tr> - <td>{{event("pageshow")}}</td> - <td>A session history entry is being traversed to.</td> - </tr> - <tr> - <td>{{event("popstate")}}</td> - <td>A session history entry is being navigated to (in certain cases).</td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>CSS Animation Events</caption> - <thead> - <tr> - <th scope="col">Event Name</th> - <th scope="col">Fired When</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{event("animationstart")}}</td> - <td>A <a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_animations">CSS animation</a> has started.</td> - </tr> - <tr> - <td>{{event("animationend")}}</td> - <td>A <a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_animations">CSS animation</a> has completed.</td> - </tr> - <tr> - <td>{{event("animationiteration")}}</td> - <td>A <a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_animations">CSS animation</a> is repeated.</td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>CSS Transition Events</caption> - <thead> - <tr> - <th scope="col">Event Name</th> - <th scope="col">Fired When</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{event("transitionstart")}}</td> - <td>A <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has actually started (fired after any delay).</td> - </tr> - <tr> - <td>{{event("transitioncancel")}}</td> - <td>A <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has been cancelled.</td> - </tr> - <tr> - <td>{{event("transitionend")}}</td> - <td>A <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has completed.</td> - </tr> - <tr> - <td>{{event("transitionrun")}}</td> - <td>A <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has began running (fired before any delay starts).</td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>Form Events</caption> - <thead> - <tr> - <th scope="col">Event Name</th> - <th scope="col">Fired When</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{event("reset")}}</td> - <td>The reset button is pressed</td> - </tr> - <tr> - <td>{{event("submit")}}</td> - <td>The submit button is pressed</td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>Printing Events</caption> - <thead> - <tr> - <th scope="col">Event Name</th> - <th scope="col">Fired When</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{event("beforeprint")}}</td> - <td>The print dialog is opened</td> - </tr> - <tr> - <td>{{event("afterprint")}}</td> - <td>The print dialog is closed</td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>Text Composition Events</caption> - <thead> - <tr> - <th scope="col">Event Name</th> - <th scope="col">Fired When</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{event("compositionstart")}}</td> - <td>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).</td> - </tr> - <tr> - <td>{{event("compositionupdate")}}</td> - <td>A character is added to a passage of text being composed.</td> - </tr> - <tr> - <td>{{event("compositionend")}}</td> - <td>The composition of a passage of text has been completed or canceled.</td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>View Events</caption> - <thead> - <tr> - <th scope="col">Event Name</th> - <th scope="col">Fired When</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{event("fullscreenchange")}}</td> - <td>An element was turned to fullscreen mode or back to normal mode.</td> - </tr> - <tr> - <td>{{event("fullscreenerror")}}</td> - <td>It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.</td> - </tr> - <tr> - <td>{{event("resize")}}</td> - <td>The document view has been resized.</td> - </tr> - <tr> - <td>{{event("scroll")}}</td> - <td>The document view or an element has been scrolled.</td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>Clipboard Events</caption> - <thead> - <tr> - <th scope="col">Event Name</th> - <th scope="col">Fired When</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{event("cut")}}</td> - <td>The selection has been cut and copied to the clipboard</td> - </tr> - <tr> - <td>{{event("copy")}}</td> - <td>The selection has been copied to the clipboard</td> - </tr> - <tr> - <td>{{event("paste")}}</td> - <td>The item from the clipboard has been pasted</td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>Keyboard Events</caption> - <tbody> - <tr> - <th scope="col">Event Name</th> - <th scope="col">Fired When</th> - </tr> - <tr> - <td>{{event("keydown")}}</td> - <td>ANY key is pressed</td> - </tr> - <tr> - <td>{{event("keypress")}}</td> - <td>ANY key except Shift, Fn, CapsLock is in pressed position. (Fired continously.)</td> - </tr> - <tr> - <td>{{event("keyup")}}</td> - <td>ANY key is released</td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>Mouse Events</caption> - <thead> - <tr> - <th scope="col">Event Name</th> - <th scope="col">Fired When</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{event("mouseenter")}}</td> - <td>A pointing device is moved onto the element that has the listener attached.</td> - </tr> - <tr> - <td>{{event("mouseover")}}</td> - <td>A pointing device is moved onto the element that has the listener attached or onto one of its children.</td> - </tr> - <tr> - <td>{{event("mousemove")}}</td> - <td>A pointing device is moved over an element. (Fired continously as the mouse moves.)</td> - </tr> - <tr> - <td>{{event("mousedown")}}</td> - <td>A pointing device button is pressed on an element.</td> - </tr> - <tr> - <td>{{event("mouseup")}}</td> - <td>A pointing device button is released over an element.</td> - </tr> - <tr> - <td>{{event("auxclick")}}</td> - <td>A pointing device button (ANY non-primary button) has been pressed and released on an element.</td> - </tr> - <tr> - <td>{{event("click")}}</td> - <td>A pointing device button (ANY button; soon to be primary button only) has been pressed and released on an element.</td> - </tr> - <tr> - <td>{{event("dblclick")}}</td> - <td>A pointing device button is clicked twice on an element.</td> - </tr> - <tr> - <td>{{event("contextmenu")}}</td> - <td>The right button of the mouse is clicked (before the context menu is displayed).</td> - </tr> - <tr> - <td>{{event("wheel")}}</td> - <td>A wheel button of a pointing device is rotated in any direction.</td> - </tr> - <tr> - <td>{{event("mouseleave")}}</td> - <td>A pointing device is moved off the element that has the listener attached.</td> - </tr> - <tr> - <td>{{event("mouseout")}}</td> - <td>A pointing device is moved off the element that has the listener attached or off one of its children.</td> - </tr> - <tr> - <td>{{event("select")}}</td> - <td>Some text is being selected.</td> - </tr> - <tr> - <td>{{event("pointerlockchange")}}</td> - <td>The pointer was locked or released.</td> - </tr> - <tr> - <td>{{event("pointerlockerror")}}</td> - <td>It was impossible to lock the pointer for technical reasons or because the permission was denied.</td> - </tr> - </tbody> -</table> - -<table class="standard-table" style="height: 276px; width: 856px;"> - <caption>Drag & Drop Events</caption> - <thead> - <tr> - <th scope="col">Event Name</th> - <th scope="col">Fired When</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{event("dragstart")}}</td> - <td>The user starts dragging an element or text selection.</td> - </tr> - <tr> - <td>{{event("drag")}}</td> - <td>An element or text selection is being dragged (Fired continuously every 350ms).</td> - </tr> - <tr> - <td>{{event("dragend")}}</td> - <td>A drag operation is being ended (by releasing a mouse button or hitting the escape key).</td> - </tr> - <tr> - <td>{{event("dragenter")}}</td> - <td>A dragged element or text selection enters a valid drop target.</td> - </tr> - <tr> - <td>{{event("dragover")}}</td> - <td>An element or text selection is being dragged over a valid drop target. (Fired continuously every 350ms.)</td> - </tr> - <tr> - <td>{{event("dragleave")}}</td> - <td>A dragged element or text selection leaves a valid drop target.</td> - </tr> - <tr> - <td>{{event("drop")}}</td> - <td>An element is dropped on a valid drop target.</td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>Media Events</caption> - <thead> - <tr> - <th scope="col">Event Name</th> - <th scope="col">Fired When</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{event("durationchange")}}</td> - <td>The <code>duration</code> attribute has been updated.</td> - </tr> - <tr> - <td>{{event("loadedmetadata")}}</td> - <td>The metadata has been loaded.</td> - </tr> - <tr> - <td>{{event("loadeddata")}}</td> - <td>The first frame of the media has finished loading.</td> - </tr> - <tr> - <td>{{event("canplay")}}</td> - <td>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.</td> - </tr> - <tr> - <td>{{event("canplaythrough")}}</td> - <td>The browser estimates it can play the media up to its end without stopping for content buffering.</td> - </tr> - <tr> - <td>{{event("ended")}}</td> - <td>Playback has stopped because the end of the media was reached.</td> - </tr> - <tr> - <td>{{event("emptied")}}</td> - <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method is called to reload it.</td> - </tr> - <tr> - <td>{{event("stalled")}}</td> - <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td> - </tr> - <tr> - <td>{{event("suspend")}}</td> - <td>Media data loading has been suspended.</td> - </tr> - <tr> - <td>{{event("play")}}</td> - <td>Playback has begun.</td> - </tr> - <tr> - <td>{{event("playing")}}</td> - <td>Playback is ready to start after having been paused or delayed due to lack of data.</td> - </tr> - <tr> - <td>{{event("pause")}}</td> - <td>Playback has been paused.</td> - </tr> - <tr> - <td>{{event("waiting")}}</td> - <td>Playback has stopped because of a temporary lack of data.</td> - </tr> - <tr> - <td>{{event("seeking")}}</td> - <td>A <em>seek</em> operation began.</td> - </tr> - <tr> - <td>{{event("seeked")}}</td> - <td>A <em>seek</em> operation completed.</td> - </tr> - <tr> - <td>{{event("ratechange")}}</td> - <td>The playback rate has changed.</td> - </tr> - <tr> - <td>{{event("timeupdate")}}</td> - <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td> - </tr> - <tr> - <td>{{event("volumechange")}}</td> - <td>The volume has changed.</td> - </tr> - <tr> - <td>{{event("complete")}}</td> - <td>The rendering of an {{domxref("OfflineAudioContext")}} is terminated.</td> - </tr> - <tr> - <td>{{event("audioprocess")}}</td> - <td>The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.</td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>Progress Events</caption> - <thead> - <tr> - <th scope="col">Event Name</th> - <th scope="col">Fired When</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{event("loadstart")}}</td> - <td>Progress has begun.</td> - </tr> - <tr> - <td>{{event("progress")}}</td> - <td>In progress.</td> - </tr> - <tr> - <td>{{event("error")}}</td> - <td>Progression has failed.</td> - </tr> - <tr> - <td>{{event("timeout")}}</td> - <td>Progression is terminated due to preset time expiring.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code></td> - <td>Progression has been terminated (not due to an error).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code></td> - <td>Progression has been successful.</td> - </tr> - <tr> - <td>{{event("loadend")}}</td> - <td>Progress has stopped (after "error", "abort" or "load" have been dispatched).</td> - </tr> - </tbody> -</table> - -<h3 id="Storage_events">Storage events</h3> - -<p>{{event("change")}} (see {{anch("Non-standard events")}})<br> - {{event("storage")}}</p> - -<h3 id="Update_events">Update events</h3> - -<p>{{event("checking")}}<br> - {{event("downloading")}}<br> - {{event("error")}}<br> - {{event("noupdate")}}<br> - {{event("obsolete")}}<br> - {{event("updateready")}}</p> - -<h3 id="Value_change_events">Value change events</h3> - -<p>{{event("broadcast")}}<br> - {{event("CheckboxStateChange")}}<br> - {{event("hashchange")}}<br> - {{event("input")}}<br> - {{event("RadioStateChange")}}<br> - {{event("readystatechange")}}<br> - {{event("ValueChange")}}</p> - -<h3 id="Uncategorized_events">Uncategorized events</h3> - -<p>{{event("invalid")}}<br> - {{event("localized")}}<br> - <code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code><br> - <code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code><br> - <code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code><br> - <code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code><br> - {{event("show")}}</p> - -<h2 id="Less_common_and_non-standard_events">Less common and non-standard events</h2> - -<h3 id="cancelable_Fetch_events">"cancelable" Fetch events</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Event name</th> - <th scope="col">Fired when</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{event("abort_(cancellable_fetch)", "abort")}}</td> - <td>A fetch request is aborted, i.e. using {{domxref("FetchController.abort()")}}.</td> - </tr> - <tr> - <td>{{event("requestprogress")}}</td> - <td>The HTTP request part of a fetch request makes progress.</td> - </tr> - <tr> - <td>{{event("responseprogress")}}</td> - <td>The response part of a fetch request makes progress, i.e. more of the response is downloaded.</td> - </tr> - <tr> - <td>{{event("statechange_(cancellable_fetch)", "statechange")}}</td> - <td>The {{domxref("FetchObserver.state", "state")}} of a fetch request changes.</td> - </tr> - </tbody> -</table> - -<h3 id="WebVR_events">WebVR events</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Event name</th> - <th scope="col">Fired when</th> - </tr> - <tr> - <td>{{event("vrdisplayconnect")}}</td> - <td>when a compatible {{domxref("VRDisplay")}} is connected to the computer.</td> - </tr> - <tr> - <td>{{event("vrdisplaydisconnect")}}</td> - <td>When a compatible {{domxref("VRDisplay")}} is disconnected from the computer.</td> - </tr> - <tr> - <td>{{event("vrdisplayactivate")}}</td> - <td>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.</td> - </tr> - <tr> - <td>{{event("vrdisplaydeactivate")}}</td> - <td>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.</td> - </tr> - <tr> - <td>{{event("vrdisplayblur")}}</td> - <td>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.</td> - </tr> - <tr> - <td>{{event("vrdisplayfocus")}}</td> - <td>When presentation to a {{domxref("VRDisplay")}} has resumed after being blurred.</td> - </tr> - <tr> - <td>{{event("vrdisplaypresentchange")}}</td> - <td>The presenting state of a {{domxref("VRDisplay")}} changes — i.e. goes from presenting to not presenting, or vice versa.</td> - </tr> - </thead> -</table> - -<h3 id="SVG_events">SVG events</h3> - -<p>{{event("SVGAbort")}}<br> - {{event("SVGError")}}<br> - {{event("SVGLoad")}}<br> - {{event("SVGResize")}}<br> - {{event("SVGScroll")}}<br> - {{event("SVGUnload")}}<br> - {{event("SVGZoom")}}</p> - -<h3 id="Database_events">Database events</h3> - -<p><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code><br> - <code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code><br> - <code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code><br> - {{event("error")}} (<a href="/en-US/docs/Web/Reference/Events/error">link</a>)<br> - <code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code><br> - <code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code><br> - <code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></p> - -<h3 id="Notification_events">Notification events</h3> - -<p><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a><br> - <a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></p> - -<h3 id="CSS_events">CSS events</h3> - -<p><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a><br> - <a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a><br> - <a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a><br> - {{event("transitionend")}}</p> - -<h3 id="Script_events">Script events</h3> - -<p>{{event("afterscriptexecute")}}<br> - {{event("beforescriptexecute")}}</p> - -<h3 id="Menu_events">Menu events</h3> - -<p>{{event("DOMMenuItemActive")}}<br> - {{event("DOMMenuItemInactive")}}</p> - -<h3 id="Window_events">Window events</h3> - -<p><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a><br> - <a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a><br> - <a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a><br> - <a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a><br> - <a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a><br> - <a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a><br> - <a href="/en-US/docs/Web/Reference/Events/close_event">close</a></p> - -<h3 id="Document_events">Document events</h3> - -<p><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a><br> - <a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a><br> - <a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a><br> - <a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a><br> - <a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a><br> - <a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a></p> - -<h3 id="Popup_events">Popup events</h3> - -<p>{{event("popuphidden")}}<br> - {{event("popuphiding")}}<br> - {{event("popupshowing")}}<br> - {{event("popupshown")}}<br> - <a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></p> - -<h3 id="Tab_events">Tab events</h3> - -<p><a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a><br> - <a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a><br> - <a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a><br> - <a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a><br> - <a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a><br> - <a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a><br> - <a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a><br> - <a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a><br> - <a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a><br> - <a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a><br> - {{event("visibilitychange")}}</p> - -<h3 id="Battery_events">Battery events</h3> - -<p>{{event("chargingchange")}}<br> - {{event("chargingtimechange")}}<br> - {{event("dischargingtimechange")}}<br> - {{event("levelchange")}}</p> - -<h3 id="Call_events">Call events</h3> - -<p>{{event("alerting")}}<br> - {{event("busy")}}<br> - {{event("callschanged")}}<br> - {{event("cfstatechange")}}<br> - {{event("connected")}}<br> - {{event("connecting")}}<br> - {{event("dialing")}}<br> - {{event("disconnected")}}<br> - {{event("disconnecting")}}<br> - {{event("error_(Telephony)","error")}}<br> - {{event("held")}}, {{event("holding")}}<br> - {{event("incoming")}}<br> - {{event("resuming")}}<br> - {{event("statechange")}}<br> - {{event("voicechange")}}</p> - -<h3 id="Sensor_events">Sensor events</h3> - -<p>{{event("compassneedscalibration")}}<br> - {{event("devicelight")}}<br> - {{event("devicemotion")}}<br> - {{event("deviceorientation")}}<br> - {{event("deviceproximity")}}<br> - {{event("MozOrientation")}}<br> - {{event("orientationchange")}}<br> - {{event("userproximity")}}</p> - -<h3 id="Smartcard_events">Smartcard events</h3> - -<p>{{event("icccardlockerror")}}<br> - {{event("iccinfochange")}}<br> - {{event("smartcard-insert")}}<br> - {{event("smartcard-remove")}}<br> - {{event("stkcommand")}}<br> - {{event("stksessionend")}}<br> - {{event("cardstatechange")}}</p> - -<h3 id="SMS_and_USSD_events">SMS and USSD events</h3> - -<p>{{event("delivered")}}<br> - {{event("received")}}<br> - {{event("sent")}}<br> - {{event("ussdreceived")}}</p> - -<h3 id="Frame_events">Frame events</h3> - -<p>{{event("mozbrowserclose")}}<br> - {{event("mozbrowsercontextmenu")}}<br> - {{event("mozbrowsererror")}}<br> - {{event("mozbrowsericonchange")}}<br> - {{event("mozbrowserlocationchange")}}<br> - {{event("mozbrowserloadend")}}<br> - {{event("mozbrowserloadstart")}}<br> - {{event("mozbrowseropenwindow")}}<br> - {{event("mozbrowsersecuritychange")}}<br> - {{event("mozbrowsershowmodalprompt")}} (<a href="/en-US/docs/Web/Reference/Events/mozbrowsershowmodalprompt">link</a>)<br> - {{event("mozbrowsertitlechange")}}<br> - <a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></p> - -<h3 id="DOM_mutation_events">DOM mutation events</h3> - -<p><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code><br> - <code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code><br> - <code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code><br> - {{event("DOMContentLoaded")}}<br> - <code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code><br> - <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code><br> - <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code><br> - <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code><br> - <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code><br> - <code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code></p> - -<h3 id="Touch_events">Touch events</h3> - -<p><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a><br> - <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a><br> - <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a><br> - <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a><br> - <a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a><br> - <a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a><br> - <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a><br> - <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a><br> - <a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a><br> - <a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a><br> - <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a><br> - <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a><br> - <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a><br> - {{event("touchcancel")}}<br> - {{event("touchend")}}<br> - {{event("touchenter")}}<br> - {{event("touchleave")}}<br> - {{event("touchmove")}}<br> - {{event("touchstart")}}</p> - -<h3 id="Pointer_events">Pointer events</h3> - -<p>{{event("pointerover")}}<br> - {{event("pointerenter")}}<br> - {{event("pointerdown")}}<br> - {{event("pointermove")}}<br> - {{event("pointerup")}}<br> - {{event("pointercancel")}}<br> - {{event("pointerout")}}<br> - {{event("pointerleave")}}<br> - {{event("gotpointercapture")}}<br> - {{event("lostpointercapture")}}</p> - -<h2 id="Standard_events">Standard events</h2> - -<p>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.</p> - -<table class="standard-table" style="height: 9388px; width: 1781px;"> - <thead> - <tr> - <th class="header" style="width: 220px;">Event Name</th> - <th class="header" style="width: 90px;">Event Type</th> - <th class="header" style="width: 100px;">Specification</th> - <th class="header">Fired when...</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{event("abort")}}</td> - <td>{{domxref("UIEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></td> - <td>The loading of a resource has been aborted.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code></td> - <td>{{domxref("ProgressEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a> and <a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-abort">XMLHttpRequest</a></td> - <td>Progression has been terminated (not due to an error).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code></td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td> - <td>A transaction has been aborted.</td> - </tr> - <tr> - <td>{{event("afterprint")}}{{gecko_minversion_inline("6")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td> - <td>The associated document has started printing or the print preview has been closed.</td> - </tr> - <tr> - <td>{{event("animationend")}}</td> - <td>{{domxref("AnimationEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td> - <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> has completed.</td> - </tr> - <tr> - <td>{{event("animationiteration")}}</td> - <td>{{domxref("AnimationEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td> - <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> is repeated.</td> - </tr> - <tr> - <td>{{event("animationstart")}}</td> - <td>{{domxref("AnimationEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td> - <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> has started.</td> - </tr> - <tr> - <td>{{event("appinstalled")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="/en-US/docs/Web/Manifest">Web App Manifest</a></td> - <td>A web application is successfully installed as a <a href="https://developer.mozilla.org/en-US/Apps/Progressive">progressive web app</a>.</td> - </tr> - <tr> - <td>{{event("audioprocess")}}</td> - <td>{{domxref("AudioProcessingEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}</td> - <td>The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.</td> - </tr> - <tr> - <td>{{event("audioend")}} {{experimental_inline}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The user agent has finished capturing audio for speech recognition.</td> - </tr> - <tr> - <td>{{event("audiostart")}} {{experimental_inline}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The user agent has started to capture audio for speech recognition.</td> - </tr> - <tr> - <td>{{event("beforeprint")}} {{gecko_minversion_inline("6")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td> - <td>The associated document is about to be printed or previewed for printing.</td> - </tr> - <tr> - <td>{{event("beforeunload")}}</td> - <td>{{domxref("BeforeUnloadEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/browsers.html#unloading-documents">HTML5 </a></td> - <td>The window, the document and its resources are about to be unloaded.</td> - </tr> - <tr> - <td>{{event("beginEvent")}}</td> - <td>{{domxref("TimeEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> - <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element begins.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code></td> - <td> </td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> - <td>An open connection to a database is blocking a <code>versionchange</code> transaction on the same database.</td> - </tr> - <tr> - <td>{{event("blur")}}</td> - <td>{{domxref("FocusEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></td> - <td>An element has lost focus (does not bubble).</td> - </tr> - <tr> - <td>{{event("boundary")}} {{experimental_inline}}</td> - <td>{{domxref("SpeechSynthesisEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The spoken utterance reaches a word or sentence boundary</td> - </tr> - <tr> - <td>{{event("cached")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> - <td>The resources listed in the manifest have been downloaded, and the application is now cached.</td> - </tr> - <tr> - <td>{{event("canplay")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay">HTML5 media</a></td> - <td>The 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.</td> - </tr> - <tr> - <td>{{event("canplaythrough")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough">HTML5 media</a></td> - <td>The user agent can play the media up to its end without having to stop for further buffering of content.</td> - </tr> - <tr> - <td>{{event("change")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-change">HTML5</a></td> - <td>The <code>change</code> 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.</td> - </tr> - <tr> - <td>{{event("chargingchange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> - <td>The battery begins or stops charging.</td> - </tr> - <tr> - <td>{{event("chargingtimechange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> - <td>The <code>chargingTime</code> attribute has been updated.</td> - </tr> - <tr> - <td>{{event("checking")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> - <td>The user agent is checking for an update, or attempting to download the cache manifest for the first time.</td> - </tr> - <tr> - <td>{{event("click")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click">DOM L3</a></td> - <td>A pointing device button has been pressed and released on an element.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code></td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> - <td>A WebSocket connection has been closed.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code></td> - <td> </td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#transaction">IndexedDB</a></td> - <td>A transaction successfully completed.</td> - </tr> - <tr> - <td>{{event("complete")}}</td> - <td>{{domxref("OfflineAudioCompletionEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}</td> - <td>The rendering of an {{domxref("OfflineAudioContext")}} is terminated.</td> - </tr> - <tr> - <td>{{event("compositionend")}}{{gecko_minversion_inline("9")}}</td> - <td>{{domxref("CompositionEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionend">DOM L3</a></td> - <td>The composition of a passage of text has been completed or canceled.</td> - </tr> - <tr> - <td>{{event("compositionstart")}}{{gecko_minversion_inline("9")}}</td> - <td>{{domxref("CompositionEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionstart">DOM L3</a></td> - <td>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).</td> - </tr> - <tr> - <td>{{event("compositionupdate")}}{{gecko_minversion_inline("9")}}</td> - <td>{{domxref("CompositionEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionupdate">DOM L3</a></td> - <td>A character is added to a passage of text being composed.</td> - </tr> - <tr> - <td>{{event("contextmenu")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="https://html.spec.whatwg.org/multipage/forms.html#context-menus">HTML5</a></td> - <td>The right button of the mouse is clicked (before the context menu is displayed).</td> - </tr> - <tr> - <td>{{event("copy")}}</td> - <td>{{domxref("ClipboardEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#copy-event">Clipboard</a></td> - <td>The text selection has been added to the clipboard.</td> - </tr> - <tr> - <td>{{event("cut")}}</td> - <td>{{domxref("ClipboardEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#cut-event">Clipboard</a></td> - <td>The text selection has been removed from the document and added to the clipboard.</td> - </tr> - <tr> - <td>{{event("dblclick")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-dblclick">DOM L3</a></td> - <td>A pointing device button is clicked twice on an element.</td> - </tr> - <tr> - <td>{{event("devicechange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName("Media Capture")}}</td> - <td>A media device such as a camera, microphone, or speaker is connected or removed from the system.</td> - </tr> - <tr> - <td>{{event("devicelight")}}</td> - <td>{{domxref("DeviceLightEvent")}}</td> - <td style="white-space: nowrap;"><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/light/Overview.html" lang="en" title="The definition of 'Ambient Light Events' in that specification.">Ambient Light Events</a></td> - <td>Fresh data is available from a light sensor.</td> - </tr> - <tr> - <td>{{event("devicemotion")}}</td> - <td>{{domxref("DeviceMotionEvent")}}</td> - <td style="white-space: nowrap;"><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td> - <td>Fresh data is available from a motion sensor.</td> - </tr> - <tr> - <td>{{event("deviceorientation")}}</td> - <td>{{domxref("DeviceOrientationEvent")}}</td> - <td style="white-space: nowrap;"><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td> - <td>Fresh data is available from an orientation sensor.</td> - </tr> - <tr> - <td>{{event("deviceproximity")}}</td> - <td>{{domxref("DeviceProximityEvent")}}</td> - <td style="white-space: nowrap;"><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/proximity/Overview.html" lang="en" title="The definition of 'Proximity Events' in that specification.">Proximity Events</a></td> - <td>Fresh data is available from a proximity sensor (indicates an approximated distance between the device and a nearby object).</td> - </tr> - <tr> - <td>{{event("dischargingtimechange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> - <td>The <code>dischargingTime</code> attribute has been updated.</td> - </tr> - <tr> - <td><code>DOMActivate</code> {{deprecated_inline}}</td> - <td>{{domxref("UIEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMActivate">DOM L3</a></td> - <td>A button, link or state changing element is activated (use {{event("click")}} instead).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code> {{deprecated_inline}}</td> - <td>{{domxref("MutationNameEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMAttributeNameChanged">DOM L3</a> Removed</td> - <td>The name of an attribute changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code> {{deprecated_inline}}</td> - <td>{{domxref("MutationEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttrModified">DOM L3</a></td> - <td>The value of an attribute has been modified (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code> {{deprecated_inline}}</td> - <td>{{domxref("MutationEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMCharacterDataModified">DOM L3</a></td> - <td>A text or another <a href="/en-US/docs/DOM/CharacterData">CharacterData</a> has changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> - </tr> - <tr> - <td>{{event("DOMContentLoaded")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></td> - <td>The document has finished loading (but not its dependent resources).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code> {{deprecated_inline}}</td> - <td>{{domxref("MutationNameEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMElementNameChanged">DOM L3</a> Removed</td> - <td>The name of an element changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> - </tr> - <tr> - <td><code>DOMFocusIn</code> {{deprecated_inline}}</td> - <td>{{domxref("FocusEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusIn">DOM L3</a></td> - <td>An element has received focus (use {{event("focus")}} or {{event("focusin")}} instead).</td> - </tr> - <tr> - <td><code>DOMFocusOut</code> {{deprecated_inline}}</td> - <td>{{domxref("FocusEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusOut">DOM L3</a></td> - <td>An element has lost focus (use {{event("blur")}} or {{event("focusout")}} instead).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code> {{deprecated_inline}}</td> - <td>{{domxref("MutationEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted">DOM L3</a></td> - <td>A node has been added as a child of another node (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code> {{deprecated_inline}}</td> - <td>{{domxref("MutationEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInsertedIntoDocument">DOM L3</a></td> - <td>A node has been inserted into the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code> {{deprecated_inline}}</td> - <td>{{domxref("MutationEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemoved">DOM L3</a></td> - <td>A node has been removed from its parent node (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code> {{deprecated_inline}}</td> - <td>{{domxref("MutationEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemovedFromDocument">DOM L3</a></td> - <td>A node has been removed from the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code> {{deprecated_inline}}</td> - <td>{{domxref("MutationEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified">DOM L3</a></td> - <td>A change happened in the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> - </tr> - <tr> - <td>{{event("downloading")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> - <td>The user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time.</td> - </tr> - <tr> - <td>{{event("drag")}}</td> - <td>{{domxref("DragEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drag">HTML5</a></td> - <td>An element or text selection is being dragged (every 350ms).</td> - </tr> - <tr> - <td>{{event("dragend")}}</td> - <td>{{domxref("DragEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragend">HTML5</a></td> - <td>A drag operation is being ended (by releasing a mouse button or hitting the escape key).</td> - </tr> - <tr> - <td>{{event("dragenter")}}</td> - <td>{{domxref("DragEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragenter">HTML5</a></td> - <td>A dragged element or text selection enters a valid drop target.</td> - </tr> - <tr> - <td>{{event("dragleave")}}</td> - <td>{{domxref("DragEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragleave">HTML5</a></td> - <td>A dragged element or text selection leaves a valid drop target.</td> - </tr> - <tr> - <td>{{event("dragover")}}</td> - <td>{{domxref("DragEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragover">HTML5</a></td> - <td>An element or text selection is being dragged over a valid drop target (every 350ms).</td> - </tr> - <tr> - <td>{{event("dragstart")}}</td> - <td>{{domxref("DragEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragstart">HTML5</a></td> - <td>The user starts dragging an element or text selection.</td> - </tr> - <tr> - <td>{{event("drop")}}</td> - <td>{{domxref("DragEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drop">HTML5</a></td> - <td>An element is dropped on a valid drop target.</td> - </tr> - <tr> - <td>{{event("durationchange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange">HTML5 media</a></td> - <td>The <code>duration</code> attribute has been updated.</td> - </tr> - <tr> - <td>{{event("emptied")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied">HTML5 media</a></td> - <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method is called to reload it.</td> - </tr> - <tr> - <td>{{event("end_(SpeechRecognition)","end")}} {{experimental_inline}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The speech recognition service has disconnected.</td> - </tr> - <tr> - <td>{{event("end_(SpeechSynthesis)","end")}} {{experimental_inline}}</td> - <td>{{domxref("SpeechSynthesisEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName("Web Speech API")}}</td> - <td>The utterance has finished being spoken.</td> - </tr> - <tr> - <td>{{event("ended")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a></td> - <td>Playback has stopped because the end of the media was reached.</td> - </tr> - <tr> - <td>{{event("ended_(Web_Audio)", "ended")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName("Web Audio API")}}</td> - <td>Playback has stopped because the end of the media was reached.</td> - </tr> - <tr> - <td>{{event("endEvent")}}</td> - <td>{{domxref("TimeEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> - <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element ends.</td> - </tr> - <tr> - <td>{{event("error")}}</td> - <td>{{domxref("UIEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error">DOM L3</a></td> - <td>A resource failed to load.</td> - </tr> - <tr> - <td>{{event("error")}}</td> - <td>{{domxref("ProgressEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-error">XMLHttpRequest</a></td> - <td>Progression has failed.</td> - </tr> - <tr> - <td>{{event("error")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> - <td>An error occurred while downloading the cache manifest or updating the content of the application.</td> - </tr> - <tr> - <td>{{event("error")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> - <td>A WebSocket connection has been closed with prejudice (some data couldn't be sent for example).</td> - </tr> - <tr> - <td>{{event("error")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td> - <td>An event source connection has been failed.</td> - </tr> - <tr> - <td>{{event("error")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> - <td>A request caused an error and failed.</td> - </tr> - <tr> - <td>{{event("error_(SpeechRecognitionError)","error")}} {{experimental_inline}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>A speech recognition error occurs.</td> - </tr> - <tr> - <td>{{event("error_(SpeechSynthesisError)","error")}}</td> - <td>{{domxref("SpeechSynthesisErrorEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>An error occurs that prevents the utterance from being successfully spoken.</td> - </tr> - <tr> - <td>{{event("focus")}}</td> - <td>{{domxref("FocusEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focus">DOM L3</a></td> - <td>An element has received focus (does not bubble).</td> - </tr> - <tr> - <td>{{event("focusin")}}</td> - <td>{{domxref("FocusEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn">DOM L3</a></td> - <td>An element is about to receive focus (bubbles).</td> - </tr> - <tr> - <td>{{event("focusout")}}</td> - <td>{{domxref("FocusEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></td> - <td>An element is about to lose focus (bubbles).</td> - </tr> - <tr> - <td>{{event("fullscreenchange")}}{{gecko_minversion_inline("9")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td> - <td>An element was turned to fullscreen mode or back to normal mode.</td> - </tr> - <tr> - <td>{{event("fullscreenerror")}}{{gecko_minversion_inline("9")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td> - <td>It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.</td> - </tr> - <tr> - <td>{{event("gamepadconnected")}}</td> - <td>{{domxref("GamepadEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></td> - <td>A gamepad has been connected.</td> - </tr> - <tr> - <td>{{event("gamepaddisconnected")}}</td> - <td>{{domxref("GamepadEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></td> - <td>A gamepad has been disconnected.</td> - </tr> - <tr> - <td>{{event("gotpointercapture")}}</td> - <td>{{domxref("PointerEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-gotpointercapture-event">Pointer Events</a></td> - <td>Element receives pointer capture.</td> - </tr> - <tr> - <td>{{event("hashchange")}}</td> - <td>{{domxref("HashChangeEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-hashchange">HTML5</a></td> - <td>The fragment identifier of the URL has changed (the part of the URL after the #).</td> - </tr> - <tr> - <td>{{event("lostpointercapture")}}</td> - <td>{{domxref("PointerEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-lostpointercapture-event">Pointer Events</a></td> - <td>Element lost pointer capture.</td> - </tr> - <tr> - <td>{{event("input")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/forms.html#common-event-behaviors">HTML5</a></td> - <td>The value of an element changes or the content of an element with the attribute <a href="/en-US/docs/DOM/Element.contentEditable">contenteditable</a> is modified.</td> - </tr> - <tr> - <td>{{event("invalid")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#constraint-validation">HTML5</a></td> - <td>A submittable element has been checked and doesn't satisfy its constraints.</td> - </tr> - <tr> - <td>{{event("keydown")}}</td> - <td>{{domxref("KeyboardEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown">DOM L3</a></td> - <td>A key is pressed down.</td> - </tr> - <tr> - <td>{{event("keypress")}}</td> - <td>{{domxref("KeyboardEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress">DOM L3</a></td> - <td>A key is pressed down and that key normally produces a character value (use input instead).</td> - </tr> - <tr> - <td>{{event("keyup")}}</td> - <td>{{domxref("KeyboardEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup">DOM L3</a></td> - <td>A key is released.</td> - </tr> - <tr> - <td>{{event("languagechange")}} {{experimental_inline}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}</td> - <td>The user's preferred languages have changed.</td> - </tr> - <tr> - <td>{{event("levelchange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> - <td>The <code>level</code> attribute has been updated.</td> - </tr> - <tr> - <td>{{event("load")}}</td> - <td>{{domxref("UIEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></td> - <td>A resource and its dependent resources have finished loading.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code></td> - <td>{{domxref("ProgressEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-load">XMLHttpRequest</a></td> - <td>Progression has been successful.</td> - </tr> - <tr> - <td>{{event("loadeddata")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadeddata">HTML5 media</a></td> - <td>The first frame of the media has finished loading.</td> - </tr> - <tr> - <td>{{event("loadedmetadata")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadedmetadata">HTML5 media</a></td> - <td>The metadata has been loaded.</td> - </tr> - <tr> - <td>{{event("loadend")}}</td> - <td>{{domxref("ProgressEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadend">XMLHttpRequest</a></td> - <td>Progress has stopped (after "error", "abort" or "load" have been dispatched).</td> - </tr> - <tr> - <td>{{event("loadstart")}}</td> - <td>{{domxref("ProgressEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress </a><span>and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadstart">XMLHttpRequest</a></td> - <td>Progress has begun.</td> - </tr> - <tr> - <td>{{event("mark")}} {{experimental_inline}}</td> - <td>{{domxref("SpeechSynthesisEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The spoken utterance reaches a named SSML "mark" tag.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code></td> - <td>{{domxref("MessageEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> - <td>A message is received through a WebSocket.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code></td> - <td>{{domxref("MessageEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/workers/#communicating-with-a-dedicated-worker">Web Workers</a></td> - <td>A message is received from a Web Worker.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code></td> - <td>{{domxref("MessageEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webmessaging/">Web Messaging</a></td> - <td>A message is received from a child (i)frame or a parent window.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code></td> - <td>{{domxref("MessageEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td> - <td>A message is received through an event source.</td> - </tr> - <tr> - <td>{{event("messageerror")}}</td> - <td>{{domxref("MessageEvent")}}</td> - <td style="white-space: nowrap;">{{domxref("MessagePort")}}, <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>, <a href="/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast Channel</a>, {{domxref("Window")}}</td> - <td>A message error is raised when a message is received by an object.</td> - </tr> - <tr> - <td>{{event("message_(ServiceWorker)","message")}} {{experimental_inline}}</td> - <td>{{domxref("ServiceWorkerMessageEvent")}} or {{domxref("ExtendableMessageEvent")}}, depending on context.</td> - <td style="white-space: nowrap;"><a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></td> - <td>A message is received from a service worker, or a message is received in a service worker from another context.</td> - </tr> - <tr> - <td>{{event("mousedown")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown">DOM L3</a></td> - <td>A pointing device button (usually a mouse) is pressed on an element.</td> - </tr> - <tr> - <td>{{event("mouseenter")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter">DOM L3</a></td> - <td>A pointing device is moved onto the element that has the listener attached.</td> - </tr> - <tr> - <td>{{event("mouseleave")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave">DOM L3</a></td> - <td>A pointing device is moved off the element that has the listener attached.</td> - </tr> - <tr> - <td>{{event("mousemove")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousemove">DOM L3</a></td> - <td>A pointing device is moved over an element.</td> - </tr> - <tr> - <td>{{event("mouseout")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout">DOM L3</a></td> - <td>A pointing device is moved off the element that has the listener attached or off one of its children.</td> - </tr> - <tr> - <td>{{event("mouseover")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseover">DOM L3</a></td> - <td>A pointing device is moved onto the element that has the listener attached or onto one of its children.</td> - </tr> - <tr> - <td>{{event("mouseup")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseup">DOM L3</a></td> - <td>A pointing device button is released over an element.</td> - </tr> - <tr> - <td>{{event("nomatch")}} {{experimental_inline}}</td> - <td>{{domxref("SpeechRecognitionEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The speech recognition service returns a final result with no significant recognition.</td> - </tr> - <tr> - <td>{{event("notificationclick")}}</td> - <td>{{domxref("NotificationEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}</td> - <td>A system notification<span style="line-height: 19.0909080505371px;"> spawned by {{domxref("ServiceWorkerRegistration.showNotification()")}} has been clicked.</span></td> - </tr> - <tr> - <td>{{event("noupdate")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> - <td>The manifest hadn't changed.</td> - </tr> - <tr> - <td>{{event("obsolete")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> - <td>The manifest was found to have become a 404 or 410 page, so the application cache is being deleted.</td> - </tr> - <tr> - <td>{{event("offline")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-offline">HTML5 offline</a></td> - <td>The browser has lost access to the network.</td> - </tr> - <tr> - <td>{{event("online")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-online">HTML5 offline</a></td> - <td>The browser has gained access to the network (but particular websites might be unreachable).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> - <td>A WebSocket connection has been established.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code></td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td> - <td>An event source connection has been established.</td> - </tr> - <tr> - <td>{{event("orientationchange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/screen-orientation/">Screen Orientation</a></td> - <td>The orientation of the device (portrait/landscape) has changed</td> - </tr> - <tr> - <td>{{event("pagehide")}}</td> - <td>{{domxref("PageTransitionEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide">HTML5</a></td> - <td>A session history entry is being traversed from.</td> - </tr> - <tr> - <td>{{event("pageshow")}}</td> - <td>{{domxref("PageTransitionEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow">HTML5</a></td> - <td>A session history entry is being traversed to.</td> - </tr> - <tr> - <td>{{event("paste")}}</td> - <td>{{domxref("ClipboardEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#paste-event">Clipboard</a></td> - <td>Data has been transferred from the system clipboard to the document.</td> - </tr> - <tr> - <td>{{event("pause")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-pause">HTML5 media</a></td> - <td>Playback has been paused.</td> - </tr> - <tr> - <td>{{event("pause_(SpeechSynthesis)", "pause")}} {{experimental_inline}}</td> - <td>{{domxref("SpeechSynthesisEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The utterance is paused part way through.</td> - </tr> - <tr> - <td>{{event("pointercancel")}}</td> - <td>{{domxref("PointerEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointercancel-event">Pointer Events</a></td> - <td>The pointer is unlikely to produce any more events.</td> - </tr> - <tr> - <td>{{event("pointerdown")}}</td> - <td>{{domxref("PointerEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerdown-event">Pointer Events</a></td> - <td>The pointer enters the active buttons state.</td> - </tr> - <tr> - <td>{{event("pointerenter")}}</td> - <td>{{domxref("PointerEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerenter-event">Pointer Events</a></td> - <td>Pointing device is moved inside the hit-testing boundary.</td> - </tr> - <tr> - <td>{{event("pointerleave")}}</td> - <td>{{domxref("PointerEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerleave-event">Pointer Events</a></td> - <td>Pointing device is moved out of the hit-testing boundary.</td> - </tr> - <tr> - <td>{{event("pointerlockchange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td> - <td>The pointer was locked or released.</td> - </tr> - <tr> - <td>{{event("pointerlockerror")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td> - <td>It was impossible to lock the pointer for technical reasons or because the permission was denied.</td> - </tr> - <tr> - <td>{{event("pointermove")}}</td> - <td>{{domxref("PointerEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointermove-event">Pointer Events</a></td> - <td>The pointer changed coordinates.</td> - </tr> - <tr> - <td>{{event("pointerout")}}</td> - <td>{{domxref("PointerEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerout-event">Pointer Events</a></td> - <td>The pointing device moved out of hit-testing boundary or leaves detectable hover range.</td> - </tr> - <tr> - <td>{{event("pointerover")}}</td> - <td>{{domxref("PointerEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerover-event">Pointer Events</a></td> - <td>The pointing device is moved into the hit-testing boundary.</td> - </tr> - <tr> - <td>{{event("pointerup")}}</td> - <td>{{domxref("PointerEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerup-event">Pointer Events</a></td> - <td>The pointer leaves the active buttons state.</td> - </tr> - <tr> - <td>{{event("play")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-play">HTML5 media</a></td> - <td>Playback has begun.</td> - </tr> - <tr> - <td>{{event("playing")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td> - <td>Playback is ready to start after having been paused or delayed due to lack of data.</td> - </tr> - <tr> - <td>{{event("popstate")}}</td> - <td>{{domxref("PopStateEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></td> - <td>A session history entry is being navigated to (in certain cases).</td> - </tr> - <tr> - <td>{{event("progress")}}</td> - <td>{{domxref("ProgressEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-progress">XMLHttpRequest</a></td> - <td>In progress.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/progress_(appcache_event)">progress</a></code></td> - <td>{{domxref("ProgressEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> - <td>The user agent is downloading resources listed by the manifest.</td> - </tr> - <tr> - <td>{{event("push")}}</td> - <td>{{domxref("PushEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName("Push API")}}</td> - <td>A <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker</a> has received a push message.</td> - </tr> - <tr> - <td>{{event("pushsubscriptionchange")}}</td> - <td>{{domxref("PushEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName("Push API")}}</td> - <td>A <a href="/en-US/docs/Web/API/PushSubscription">PushSubscription</a> has expired.</td> - </tr> - <tr> - <td>{{event("ratechange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ratechange">HTML5 media</a></td> - <td>The playback rate has changed.</td> - </tr> - <tr> - <td>{{event("readystatechange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><span>HTML5 <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-readystatechange">XMLHttpRequest</a></td> - <td>The readyState attribute of a document has changed.</td> - </tr> - <tr> - <td>{{event("repeatEvent")}}</td> - <td>{{domxref("TimeEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> - <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element is repeated.</td> - </tr> - <tr> - <td>{{event("reset")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-0#resetting-a-form">HTML5</a></td> - <td>A form is reset.</td> - </tr> - <tr> - <td>{{event("resize")}}</td> - <td>{{domxref("UIEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize">DOM L3</a></td> - <td>The document view has been resized.</td> - </tr> - <tr> - <td>{{event("resourcetimingbufferfull")}}</td> - <td>{{domxref("Performance")}}</td> - <td style="white-space: nowrap;"><a href="https://w3c.github.io/resource-timing/#dom-performance-onresourcetimingbufferfull">Resource Timing</a></td> - <td>The browser's resource timing buffer is full.</td> - </tr> - <tr> - <td>{{event("result")}} {{experimental_inline}}</td> - <td>{{domxref("SpeechRecognitionEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.</td> - </tr> - <tr> - <td>{{event("resume")}} {{experimental_inline}}</td> - <td>{{domxref("SpeechSynthesisEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>A paused utterance is resumed.</td> - </tr> - <tr> - <td>{{event("scroll")}}</td> - <td>{{domxref("UIEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll">DOM L3</a></td> - <td>The document view or an element has been scrolled.</td> - </tr> - <tr> - <td>{{event("seeked")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeked">HTML5 media</a></td> - <td>A <em>seek</em> operation completed.</td> - </tr> - <tr> - <td>{{event("seeking")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeking">HTML5 media</a></td> - <td>A <em>seek</em> operation began.</td> - </tr> - <tr> - <td>{{event("select")}}</td> - <td>{{domxref("UIEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select">DOM L3</a></td> - <td>Some text is being selected.</td> - </tr> - <tr> - <td>{{event("selectstart")}} {{experimental_inline}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{ SpecName('Selection API')}}</td> - <td>A selection just started.</td> - </tr> - <tr> - <td>{{event("selectionchange")}} {{experimental_inline}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{ SpecName('Selection API')}}</td> - <td>The selection in the document has been changed.</td> - </tr> - <tr> - <td>{{event("show")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menus">HTML5</a></td> - <td>A contextmenu event was fired on/bubbled to an element that has a <a href="/en-US/docs/DOM/element.contextmenu">contextmenu</a> attribute</td> - </tr> - <tr> - <td>{{event("soundend")}} {{experimental_inline}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>Any sound — recognisable speech or not — has stopped being detected.</td> - </tr> - <tr> - <td>{{event("soundstart")}} {{experimental_inline}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>Any sound — recognisable speech or not — has been detected.</td> - </tr> - <tr> - <td>{{event("speechend")}} {{experimental_inline}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>Speech recognised by the speech recognition service has stopped being detected.</td> - </tr> - <tr> - <td>{{event("speechstart")}} {{experimental_inline}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>Sound that is recognised by the speech recognition service as speech has been detected.</td> - </tr> - <tr> - <td>{{event("stalled")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-stalled">HTML5 media</a></td> - <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td> - </tr> - <tr> - <td>{{event("start_(SpeechRecognition)","start")}} {{experimental_inline}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current <code>SpeechRecognition</code>.</td> - </tr> - <tr> - <td>{{event("start_(SpeechSynthesis)","start")}}</td> - <td>{{domxref("SpeechSynthesisEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The utterance has begun to be spoken.</td> - </tr> - <tr> - <td>{{event("storage")}}</td> - <td>{{domxref("StorageEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></td> - <td>A storage area (<a href="/en-US/docs/DOM/Storage#localStorage">localStorage</a> or <a href="/en-US/docs/DOM/Storage#sessionStorage">sessionStorage</a>) has changed.</td> - </tr> - <tr> - <td>{{event("submit")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></td> - <td>A form is submitted.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code></td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> - <td>A request successfully completed.</td> - </tr> - <tr> - <td>{{event("suspend")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-suspend">HTML5 media</a></td> - <td>Media data loading has been suspended.</td> - </tr> - <tr> - <td>{{event("SVGAbort")}}</td> - <td>{{domxref("SVGEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> - <td>Page loading has been stopped before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td> - </tr> - <tr> - <td>{{event("SVGError")}}</td> - <td>{{domxref("SVGEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> - <td>An error has occurred before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td> - </tr> - <tr> - <td>{{event("SVGLoad")}}</td> - <td>{{domxref("SVGEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> - <td>An <a href="/en-US/docs/SVG">SVG</a> document has been loaded and parsed.</td> - </tr> - <tr> - <td>{{event("SVGResize")}}</td> - <td>{{domxref("SVGEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> - <td>An <a href="/en-US/docs/SVG">SVG</a> document is being resized.</td> - </tr> - <tr> - <td>{{event("SVGScroll")}}</td> - <td>{{domxref("SVGEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> - <td>An <a href="/en-US/docs/SVG">SVG</a> document is being scrolled.</td> - </tr> - <tr> - <td>{{event("SVGUnload")}}</td> - <td>{{domxref("SVGEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> - <td>An <a href="/en-US/docs/SVG">SVG</a> document has been removed from a window or frame.</td> - </tr> - <tr> - <td>{{event("SVGZoom")}}</td> - <td>{{domxref("SVGZoomEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> - <td>An <a href="/en-US/docs/SVG">SVG</a> document is being zoomed.</td> - </tr> - <tr> - <td>{{event("timeout")}}</td> - <td>{{domxref("ProgressEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-timeout">XMLHttpRequest</a></td> - <td> </td> - </tr> - <tr> - <td>{{event("timeupdate")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-timeupdate">HTML5 media</a></td> - <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td> - </tr> - <tr> - <td>{{event("touchcancel")}}</td> - <td>{{domxref("TouchEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a></td> - <td>A touch point has been disrupted in an implementation-specific manners (too many touch points for example).</td> - </tr> - <tr> - <td>{{event("touchend")}}</td> - <td>{{domxref("TouchEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchend-event">Touch Events</a></td> - <td>A touch point is removed from the touch surface.</td> - </tr> - <tr> - <td>{{event("touchmove")}}</td> - <td>{{domxref("TouchEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchmove-event">Touch Events</a></td> - <td>A touch point is moved along the touch surface.</td> - </tr> - <tr> - <td>{{event("touchstart")}}</td> - <td>{{domxref("TouchEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a></td> - <td>A touch point is placed on the touch surface.</td> - </tr> - <tr> - <td>{{event("transitionend")}}</td> - <td>{{domxref("TransitionEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-transitions/#transition-events">CSS Transitions</a></td> - <td>A <a href="/en-US/docs/CSS/CSS_transitions">CSS transition</a> has completed.</td> - </tr> - <tr> - <td>{{event("unload")}}</td> - <td>{{domxref("UIEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload">DOM L3</a></td> - <td>The document or a dependent resource is being unloaded.</td> - </tr> - <tr> - <td>{{event("updateready")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td> - <td>The resources listed in the manifest have been newly redownloaded, and the script can use <code>swapCache()</code> to switch to the new cache.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code></td> - <td> </td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> - <td>An attempt was made to open a database with a version number higher than its current version. A <code>versionchange</code> transaction has been created.</td> - </tr> - <tr> - <td>{{event("userproximity")}}</td> - <td>{{domxref("UserProximityEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName("Proximity Events")}}</td> - <td>Fresh data is available from a proximity sensor (indicates whether the nearby object is <code>near</code> the device or not).</td> - </tr> - <tr> - <td>{{event("voiceschanged")}} {{experimental_inline}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The list of {{domxref("SpeechSynthesisVoice")}} objects that would be returned by the {{domxref("SpeechSynthesis.getVoices()")}} method has changed (when the {{event("voiceschanged")}} event fires.)</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></td> - <td> </td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td> - <td>A <code>versionchange</code> transaction completed.</td> - </tr> - <tr> - <td>{{event("visibilitychange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/page-visibility/#sec-visibilitychange-event">Page visibility</a></td> - <td>The content of a tab has become visible or has been hidden.</td> - </tr> - <tr> - <td>{{event("volumechange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-volumechange">HTML5 media</a></td> - <td>The volume has changed.</td> - </tr> - <tr> - <td>{{event("waiting")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-waiting">HTML5 media</a></td> - <td>Playback has stopped because of a temporary lack of data.</td> - </tr> - <tr> - <td>{{event("wheel")}}{{gecko_minversion_inline("17")}}</td> - <td>{{domxref("WheelEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-wheel">DOM L3</a></td> - <td>A wheel button of a pointing device is rotated in any direction.</td> - </tr> - </tbody> -</table> - -<h2 id="Non-standard_events">Non-standard events</h2> - -<table class="standard-table" style="width: 100%;"> - <thead> - <tr> - <th class="header" style="width: 220px;">Event Name</th> - <th class="header" style="width: 90px;">Event Type</th> - <th class="header" style="width: 100px;">Specification</th> - <th class="header">Fired when...</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{event("afterscriptexecute")}}</td> - <td>{{domxref("Event")}}</td> - <td><em>Mozilla Specific</em></td> - <td>A script has been executed.</td> - </tr> - <tr> - <td>{{event("beforescriptexecute")}}</td> - <td>{{domxref("Event")}}</td> - <td><em>Mozilla Specific</em></td> - <td>A script is about to be executed.</td> - </tr> - <tr> - <td>{{event("beforeinstallprompt")}}</td> - <td>{{domxref("Event")}}</td> - <td><em>Chrome specific</em></td> - <td>A user is prompted to save a web site to a home screen on mobile.</td> - </tr> - <tr> - <td>{{event("cardstatechange")}}</td> - <td> </td> - <td><em>Firefox OS specific</em></td> - <td>The {{domxref("MozMobileConnection.cardState")}} property changes value.</td> - </tr> - <tr> - <td>{{event("change")}}</td> - <td>{{domxref("DeviceStorageChangeEvent")}}</td> - <td><em>Firefox OS specific</em></td> - <td>This event is triggered each time a file is created, modified or deleted on a given storage area.</td> - </tr> - <tr> - <td>{{event("connectionInfoUpdate")}}</td> - <td> </td> - <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#176"><em>Firefox OS specific</em></a></td> - <td>The informations about the signal strength and the link speed have been updated.</td> - </tr> - <tr> - <td>{{event("cfstatechange")}}</td> - <td> </td> - <td><em>Firefox OS specific</em></td> - <td>The call forwarding state changes.</td> - </tr> - <tr> - <td>{{event("datachange")}}</td> - <td> </td> - <td><em>Firefox OS specific</em></td> - <td>The {{domxref("MozMobileConnection.data")}} object changes values.</td> - </tr> - <tr> - <td>{{event("dataerror")}}</td> - <td> </td> - <td><em>Firefox OS specific</em></td> - <td>The {{domxref("MozMobileConnection.data")}} object receive an error from the <abbr title="Radio Interface Layer">RIL</abbr>.</td> - </tr> - <tr> - <td>{{event("DOMMouseScroll")}}{{deprecated_inline}}</td> - <td> </td> - <td><em>Mozilla specific</em></td> - <td>The wheel button of a pointing device is rotated (detail attribute is a number of lines). (use {{event("wheel")}} instead)</td> - </tr> - <tr> - <td><code>dragdrop</code> {{deprecated_inline}}</td> - <td><code>DragEvent</code></td> - <td><em>Mozilla specific</em></td> - <td>An element is dropped (use {{event("drop")}} instead).</td> - </tr> - <tr> - <td><code>dragexit</code> {{deprecated_inline}}</td> - <td><code>DragEvent</code></td> - <td><em>Mozilla specific</em></td> - <td>A drag operation is being ended(use {{event("dragend")}} instead).</td> - </tr> - <tr> - <td><code>draggesture</code> {{deprecated_inline}}</td> - <td><code>DragEvent</code></td> - <td><em>Mozilla specific</em></td> - <td>The user starts dragging an element or text selection (use {{event("dragstart")}} instead).</td> - </tr> - <tr> - <td>{{event("icccardlockerror")}}</td> - <td> </td> - <td><em>Firefox OS specific</em></td> - <td>the {{domxref("MozMobileConnection.unlockCardLock()")}} or {{domxref("MozMobileConnection.setCardLock()")}} methods fails.</td> - </tr> - <tr> - <td>{{event("iccinfochange")}}</td> - <td> </td> - <td><em>Firefox OS specific</em></td> - <td>The {{domxref("MozMobileConnection.iccInfo")}} object changes.</td> - </tr> - <tr> - <td>{{event("localized")}}</td> - <td> </td> - <td><em><a href="https://github.com/fabi1cazenave/webL10n">Mozilla Specific</a></em></td> - <td>The page has been localized using data-l10n-* attributes.</td> - </tr> - <tr> - <td>{{event("mousewheel")}}{{deprecated_inline}}</td> - <td> </td> - <td><a href="http://msdn.microsoft.com/en-us/library/ie/ms536951%28v=vs.85%29.aspx"><em>IE invented</em></a></td> - <td>The wheel button of a pointing device is rotated.</td> - </tr> - <tr> - <td>{{event("MozAudioAvailable")}}</td> - <td>{{domxref("Event")}}</td> - <td><em>Mozilla specific</em></td> - <td>The audio buffer is full and the corresponding raw samples are available.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozBeforeResize"><code>MozBeforeResize</code></a> {{obsolete_inline}}</td> - <td> </td> - <td><em>Mozilla specific</em></td> - <td>A window is about to be resized.</td> - </tr> - <tr> - <td>{{event("mozbrowseractivitydone")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when some activity has been completed (complete description TBD.)</td> - </tr> - <tr> - <td>{{event("mozbrowserasyncscroll")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the scroll position within a browser<code> </code>{{HTMLElement("iframe")}} changes.</td> - </tr> - <tr> - <td>{{event("mozbrowseraudioplaybackchange")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when audio starts or stops playing within the browser {{HTMLElement("iframe")}} content.</td> - </tr> - <tr> - <td>{{event("mozbrowsercaretstatechanged")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the text selected inside the browser {{HTMLElement("iframe")}} content changes.</td> - </tr> - <tr> - <td>{{event("mozbrowserclose")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when window.close() is called within a browser {{HTMLElement("iframe")}}.</td> - </tr> - <tr> - <td>{{event("mozbrowsercontextmenu")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when a browser {{HTMLElement("iframe")}} try to open a context menu.</td> - </tr> - <tr> - <td>{{event("mozbrowserdocumentfirstpaint")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when a new paint occurs on any document in the browser {{HTMLElement("iframe")}}.</td> - </tr> - <tr> - <td>{{event("mozbrowsererror")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when an error occured while trying to load a content within a browser iframe</td> - </tr> - <tr> - <td>{{event("mozbrowserfindchange")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when a search operation is performed on the browser {{HTMLElement("iframe")}} content (see <a href="/en-US/docs/Web/API/HTMLIFrameElement#Search_methods">HTMLIFrameElement search methods</a>.)</td> - </tr> - <tr> - <td>{{event("mozbrowserfirstpaint")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the {{HTMLElement("iframe")}} paints content for the first time (this doesn't include the initial paint from <em>about:blank</em>.)</td> - </tr> - <tr> - <td>{{event("mozbrowsericonchange")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the favicon of a browser iframe changes.</td> - </tr> - <tr> - <td>{{event("mozbrowserlocationchange")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when an browser iframe's location changes.</td> - </tr> - <tr> - <td>{{event("mozbrowserloadend")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the browser iframe has finished loading all its assets.</td> - </tr> - <tr> - <td>{{event("mozbrowserloadstart")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the browser iframe starts to load a new page.</td> - </tr> - <tr> - <td>{{event("mozbrowsermanifestchange")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent 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.</td> - </tr> - <tr> - <td>{{event("mozbrowsermetachange")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when a {{htmlelement("meta")}} elelment is added to, removed from or changed in the browser {{HTMLElement("iframe")}}'s content.</td> - </tr> - <tr> - <td>{{event("mozbrowseropensearch")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when a link to a search engine is found.</td> - </tr> - <tr> - <td>{{event("mozbrowseropentab")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent 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 <kbd>ctrl</kbd>/<kbd>cmd</kbd> + click.)</td> - </tr> - <tr> - <td>{{event("mozbrowseropenwindow")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when {{domxref("window.open()")}} is called within a browser iframe.</td> - </tr> - <tr> - <td>{{event("mozbrowserresize")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the browser {{HTMLElement("iframe")}}'s window size has changed.</td> - </tr> - <tr> - <td>{{event("mozbrowserscroll")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the browser {{HTMLElement("iframe")}} content scrolls.</td> - </tr> - <tr> - <td>{{event("mozbrowserscrollareachanged")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent 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.)</td> - </tr> - <tr> - <td>{{event("mozbrowserscrollviewchange")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when asynchronous scrolling (i.e. APCZ) starts or stops.</td> - </tr> - <tr> - <td>{{event("mozbrowsersecuritychange")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the SSL state changes within a browser iframe.</td> - </tr> - <tr> - <td>{{event("mozbrowserselectionstatechanged")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the text selected inside the browser {{HTMLElement("iframe")}} content changes. Note that this is deprecated, and newer implementations use {{event("mozbrowsercaretstatechanged")}} instead.</td> - </tr> - <tr> - <td>{{event("mozbrowsershowmodalprompt")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when {{domxref("window.alert","alert()")}}, {{domxref("window.confirm","confirm()")}} or {{domxref("window.prompt","prompt()")}} are called within a browser iframe</td> - </tr> - <tr> - <td>{{event("mozbrowsertitlechange")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the document.title changes within a browser iframe.</td> - </tr> - <tr> - <td>{{event("mozbrowserusernameandpasswordrequired")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when an HTTP authentification is requested.</td> - </tr> - <tr> - <td>{{event("mozbrowservisibilitychange")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the visibility state of the current browser iframe {{HTMLElement("iframe")}} changes, for example due to a call to {{domxref("HTMLIFrameElement.setVisible","setVisible()")}}.</td> - </tr> - <tr> - <td>{{event("MozGamepadButtonDown")}}</td> - <td> </td> - <td><em>To be specified</em></td> - <td>A gamepad button is pressed down.</td> - </tr> - <tr> - <td>{{event("MozGamepadButtonUp")}}</td> - <td> </td> - <td><em>To be specified</em></td> - <td>A gamepad button is released.</td> - </tr> - <tr> - <td>{{event("MozMousePixelScroll")}} {{deprecated_inline}}</td> - <td> </td> - <td><em>Mozilla specific</em></td> - <td>The wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)</td> - </tr> - <tr> - <td>{{event("MozOrientation")}} {{deprecated_inline}}</td> - <td> </td> - <td><em>Mozilla specific</em></td> - <td>Fresh data is available from an orientation sensor (see deviceorientation).</td> - </tr> - <tr> - <td>{{event("MozScrolledAreaChanged")}}</td> - <td>{{domxref("UIEvent")}}</td> - <td><em>Mozilla specific</em></td> - <td>The document view has been scrolled or resized.</td> - </tr> - <tr> - <td>{{event("moztimechange")}}</td> - <td> </td> - <td><em>Mozilla specific</em></td> - <td>The time of the device has been changed.</td> - </tr> - <tr> - <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a> {{deprecated_inline}}</td> - <td> </td> - <td><em>Mozilla specific</em></td> - <td>A touch point is placed on the touch surface (use touchstart instead).</td> - </tr> - <tr> - <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a> {{deprecated_inline}}</td> - <td> </td> - <td><em>Mozilla specific</em></td> - <td>A touch point is moved along the touch surface (use touchmove instead).</td> - </tr> - <tr> - <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a> {{deprecated_inline}}</td> - <td> </td> - <td><em>Mozilla specific</em></td> - <td>A touch point is removed from the touch surface (use touchend instead).</td> - </tr> - <tr> - <td>{{event("alerting")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>The correspondent is being alerted (his/her phone is ringing).</td> - </tr> - <tr> - <td>{{event("busy")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>The line of the correspondent is busy.</td> - </tr> - <tr> - <td>{{event("callschanged")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>A call has been added or removed from the list of current calls.</td> - </tr> - <tr> - <td><a href="/en-US/docs/DOM/onconnected">onconnected</a> {{event("connected")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>A call has been connected.</td> - </tr> - <tr> - <td>{{event("connecting")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>A call is about to connect.</td> - </tr> - <tr> - <td>{{event("delivered")}}</td> - <td>{{domxref("SMSEvent")}}</td> - <td><em>To be specified</em></td> - <td>An SMS has been successfully delivered.</td> - </tr> - <tr> - <td>{{event("dialing")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>The number of a correspondent has been dialed.</td> - </tr> - <tr> - <td>{{event("disabled")}}</td> - <td> </td> - <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td> - <td>Wifi has been disabled on the device.</td> - </tr> - <tr> - <td>{{event("disconnected")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>A call has been disconnected.</td> - </tr> - <tr> - <td>{{event("disconnecting")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>A call is about to disconnect.</td> - </tr> - <tr> - <td>{{event("enabled")}}</td> - <td> </td> - <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td> - <td>Wifi has been enabled on the device.</td> - </tr> - <tr> - <td>{{event("error_(Telephony)","error")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>An error occurred.</td> - </tr> - <tr> - <td>{{event("held")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>A call has been held.</td> - </tr> - <tr> - <td>{{event("holding")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>A call is about to be held.</td> - </tr> - <tr> - <td>{{event("incoming")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>A call is being received.</td> - </tr> - <tr> - <td>{{event("received")}}</td> - <td>{{domxref("SMSEvent")}}</td> - <td><em>To be specified</em></td> - <td>An SMS has been received.</td> - </tr> - <tr> - <td>{{event("resuming")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>A call is about to resume.</td> - </tr> - <tr> - <td>{{event("sent")}}</td> - <td>{{domxref("SMSEvent")}}</td> - <td><em>To be specified</em></td> - <td>An SMS has been sent.</td> - </tr> - <tr> - <td>{{event("statechange")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>The state of a call has changed.</td> - </tr> - <tr> - <td>{{event("statuschange")}}</td> - <td> </td> - <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#156"><em>Firefox OS specific</em></a></td> - <td>The status of the Wifi connection changed.</td> - </tr> - <tr> - <td>{{event("overflow")}}</td> - <td>{{domxref("UIEvent")}}</td> - <td><em>Mozilla specific</em></td> - <td>An element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td> - </tr> - <tr> - <td>{{event("smartcard-insert")}}</td> - <td> </td> - <td><em>Mozilla specific</em></td> - <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been inserted.</td> - </tr> - <tr> - <td>{{event("smartcard-remove")}}</td> - <td> </td> - <td><em>Mozilla specific</em></td> - <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been removed.</td> - </tr> - <tr> - <td>{{event("stkcommand")}}</td> - <td> </td> - <td><em>Firefox OS specific</em></td> - <td>The <abbr title="SIM Application Toolkit">STK</abbr> Proactive Command is issued from <abbr title="Integrated Circuit Card">ICC</abbr>.</td> - </tr> - <tr> - <td>{{event("stksessionend")}}</td> - <td> </td> - <td><em>Firefox OS specific</em></td> - <td>The <abbr title="SIM Application Toolkit">STK</abbr> Session is terminated by <abbr title="Integrated Circuit Card">ICC</abbr>.</td> - </tr> - <tr> - <td><code>text</code></td> - <td> </td> - <td><em>Mozilla Specific</em></td> - <td>A generic composition event occurred.</td> - </tr> - <tr> - <td>{{event("touchenter")}}</td> - <td>{{domxref("TouchEvent")}}</td> - <td><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a> Removed</td> - <td> </td> - </tr> - <tr> - <td>{{event("touchleave")}}</td> - <td>{{domxref("TouchEvent")}}</td> - <td><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a> Removed</td> - <td> </td> - </tr> - <tr> - <td>{{event("underflow")}}</td> - <td>{{domxref("UIEvent")}}</td> - <td><em>Mozilla specific</em></td> - <td>An element is no longer overflowed by its content (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td> - </tr> - <tr> - <td><code>uploadprogress</code> {{deprecated_inline}}</td> - <td>{{domxref("ProgressEvent")}}</td> - <td><em>Mozilla Specific</em></td> - <td>Upload is in progress (see {{event("progress")}}).</td> - </tr> - <tr> - <td> - <p>{{event("ussdreceived")}}</p> - </td> - <td> </td> - <td><em>Firefox OS specific</em></td> - <td>A new <abbr title="Unstructured Supplementary Service Data">USSD</abbr> message is received</td> - </tr> - <tr> - <td>{{event("voicechange")}}</td> - <td> </td> - <td><em>Firefox OS specific</em></td> - <td>The {{domxref("MozMobileConnection.voice")}} object changes values.</td> - </tr> - </tbody> -</table> - -<h2 id="Mozilla-specific_events">Mozilla-specific events</h2> - -<div class="note"> -<p><strong>Note:</strong> those events are never exposed to web content and can only be used in chrome content context.</p> -</div> - -<h3 id="XUL_events">XUL events</h3> - -<table class="standard-table" style="height: 554px; width: 1033px;"> - <tbody> - <tr> - <th class="header" style="width: 220px;">Event Name</th> - <th class="header" style="width: 90px;">Event Type</th> - <th class="header" style="width: 100px;">Specification</th> - <th class="header">Fired when...</th> - </tr> - <tr> - <td>{{event("broadcast")}}</td> - <td> </td> - <td><a href="/en-US/docs/XUL/Tutorial/Broadcasters_and_Observers#Broadcast_event">XUL</a></td> - <td>An <code>observer</code> noticed a change to the attributes of a watched broadcaster.</td> - </tr> - <tr> - <td>{{event("CheckboxStateChange")}}</td> - <td> </td> - <td>XUL</td> - <td>The state of a <code>checkbox</code> has been changed either by a user action or by a script (useful for accessibility).</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/close_event">close</a></td> - <td> </td> - <td>XUL</td> - <td>The close button of the window has been clicked.</td> - </tr> - <tr> - <td>{{event("command")}}</td> - <td> </td> - <td>XUL</td> - <td>An element has been activated.</td> - </tr> - <tr> - <td>{{event("commandupdate")}}</td> - <td> </td> - <td>XUL</td> - <td>A command update occurred on a <code>commandset</code> element.</td> - </tr> - <tr> - <td>{{event("DOMMenuItemActive")}}</td> - <td> </td> - <td>XUL</td> - <td>A menu or menuitem has been hovered or highlighted.</td> - </tr> - <tr> - <td>{{event("DOMMenuItemInactive")}}</td> - <td> </td> - <td><em>XUL</em></td> - <td>A menu or menuitem is no longer hovered or highlighted.</td> - </tr> - <tr> - <td>{{event("popuphidden")}}</td> - <td><code>PopupEvent</code></td> - <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> - <td>A menupopup, panel or tooltip has been hidden.</td> - </tr> - <tr> - <td>{{event("popuphiding")}}</td> - <td><code>PopupEvent</code></td> - <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> - <td>A menupopup, panel or tooltip is about to be hidden.</td> - </tr> - <tr> - <td>{{event("popupshowing")}}</td> - <td><code>PopupEvent</code></td> - <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> - <td>A menupopup, panel or tooltip is about to become visible.</td> - </tr> - <tr> - <td>{{event("popupshown")}}</td> - <td><code>PopupEvent</code></td> - <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> - <td>A menupopup, panel or tooltip has become visible.</td> - </tr> - <tr> - <td>{{event("RadioStateChange")}}</td> - <td> </td> - <td>XUL</td> - <td>The state of a <code>radio</code> has been changed either by a user action or by a script (useful for accessibility).</td> - </tr> - <tr> - <td>{{event("ValueChange")}}</td> - <td> </td> - <td>XUL</td> - <td>The value of an element has changed (a progress bar for example, useful for accessibility).</td> - </tr> - </tbody> -</table> - -<h3 id="Add-on-specific_events">Add-on-specific events</h3> - -<table class="standard-table" style="width: 100%;"> - <tbody> - <tr> - <th class="header" style="width: 220px;">Event Name</th> - <th class="header" style="width: 90px;">Event Type</th> - <th class="header" style="width: 100px;">Specification</th> - <th class="header">Fired when...</th> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A touch point is swiped across the touch surface</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>Two touch points start to move away from each other.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>Two touch points move away from each other (after a MozMagnifyGestureStart).</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>Two touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>Two touch points start to rotate around a point.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>Two touch points rotate around a point (after a MozRotateGestureStart).</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>Two touch points rotate around a point (after a sequence of MozRotateGestureUpdate).</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>Two touch points are tapped on the touch surface.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A touch point is swiped across the touch surface to invoke the edge UI (Win8 only).</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>Content has been repainted.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A popup has been blocked</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A window has been created.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A window is about to be closed.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a></td> - <td> </td> - <td><em>Addons specifc</em></td> - <td>The title of a window has changed.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a></td> - <td> </td> - <td><em>Addons specifc</em></td> - <td>A link has been added a document.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a></td> - <td> </td> - <td><em>Addons specifc</em></td> - <td>A link has been removed inside from a document.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A <code>meta</code> element has been added to a document.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A <code>meta</code> element has been removed from a document.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A modal dialog is about to open.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A modal dialog has been closed.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>The content of an element has been auto-completed.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>The frame has finished loading (but not its dependent resources).</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is shown.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is closed.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/fullscreen">fullscreen</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>Browser fullscreen mode has been entered or left.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>Window has entered/left fullscreen mode, or has been minimized/unminimized.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td><a href="/en-US/docs/DOM/Using_full-screen_mode">DOM fullscreen</a> mode has been entered.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>The session store will stop tracking this window.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>The session store will stop tracking this tab.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A tab is about to be restored.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A tab has been restored.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A window state has switched to "ready".</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A window state has switched to "busy".</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A tab has been opened.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A tab has been closed.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A tab has been selected.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A tab has been shown.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A tab has been hidden.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A tab has been pinned.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A tab has been unpinned.</td> - </tr> - </tbody> -</table> - -<h3 id="Developer_tool-specific_events">Developer tool-specific events</h3> - -<table class="standard-table" style="width: 100%;"> - <tbody> - <tr> - <th class="header" style="width: 220px;">Event Name</th> - <th class="header" style="width: 90px;">Event Type</th> - <th class="header" style="width: 100px;">Specification</th> - <th class="header">Fired when...</th> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a></td> - <td> </td> - <td><em>devtools specific</em></td> - <td>The "Rules" view of the style inspector has been updated.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a></td> - <td> </td> - <td><em>devtools specific</em></td> - <td>The "Rules" view of the style inspector has been changed.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a></td> - <td> </td> - <td><em>devtools specific</em></td> - <td>A link to a CSS file has been clicked in the "Rules" view of the style inspector.</td> - </tr> - </tbody> -</table> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Event")}}</li> - <li><a href="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li> -</ul> 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 ---- -<p>এখানে আপনি ওয়েব ডেভেলপমেন্ট আর্কিটেকচার যেসকল এপিআই এর ভিত্তিপ্রস্তরের উপর দাঁড়িয়ে আছে, তার সম্পর্কে ধারণা পেতে কিছু আর্টিকেলের লিংক এখানে পাবেন।</p> -<h2 id="Web_APIs_from_A_to_Z">Web APIs from A to Z</h2> - -<p>{{ListGroups}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API">Web API interface reference</a> (an index of all of the interfaces comprising all of these APIs)</li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a> (DOM)</li> - <li><a href="/en-US/docs/Web/Events">Web API event reference</a></li> - <li><a href="/en-US/docs/Learn">Learning web development</a></li> -</ul> 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/গ্রাফিক্স ---- -<p><span id="result_box" lang="bn"><span class="hps">আধুনিক ওয়েব</span> <span class="hps">সাইট এবং</span> <span class="hps">অ্যাপ্লিকেশনে</span> <span class="hps">প্রায়ই</span> <span class="hps">গ্রাফিক্স</span> <span class="hps">উপস্থাপন</span> <span class="hps">প্রয়োজন পরে। </span></span><span id="result_box" lang="bn"><span class="hps">{{HTMLElement("img")}} উপাদান <span id="result_box" lang="bn"><span class="hps">ব্যবহার করে </span></span><span id="result_box" lang="bn"><span class="hps">সহজে</span>ই </span>স্ট্যাটিক</span> <span class="hps">ইমেজ</span> <span class="hps">প্রদর্শিত করা</span></span><span lang="bn"><span class="hps"> </span><span class="hps">যায়, অথবা</span></span> {{cssxref("background-image")}} প্রোপার্টি <span id="result_box" lang="bn"><span class="hps">ব্যবহার করে</span> <span class="hps">এইচটিএমএল</span> <span class="hps">উপাদানের</span> <span class="hps">পটভূমি</span> <span class="hps">নির্ধারণ করা যায়।</span></span></p> -<p><span class="short_text" id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="hps">প্রায়ই</span> <span class="hps">অন</span>-দা-ফ্লাই <span class="hps">গ্রাফিক্স</span> <span class="hps">নির্মাণ করতে</span> <span class="hps">চান</span></span>, অথবা ঘটনার পরে ছবি প্রদর্শন করতে চান। এই নিবন্ধনটি আপনাকে সাহায্য করবে কিভাবে আপনি তা সম্পন্ন করতে পারেন।</p> -<div class="row topicpage-table"> - <div class="section"> - <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">2D গ্রাফিক্স</h2> - <dl> - <dt> - <a href="/en-US/docs/HTML/Canvas">Canvas(ক্যানভাস)</a></dt> - <dd> - এই {{HTMLElement("canvas")}}উপাদানটি APIs প্রদান করে যেন জাভাস্ক্রিপ্ট ব্যাবহার করে 2D গ্রাফিক্স তৈরি করা যায়।</dd> - <dd> - <a href="/en-US/docs/Web/SVG">SVG(এস ভি জি)</a><br> - স্কেলেবল ভেক্টর গ্রাফিক্স (SVG) লাইনস, কারভস, এবং অন্যান্য <span class="short_text" id="result_box" lang="bn"><span class="hps">জ্যামিতিক আকার প্রদান </span></span>করে। bitmaps ব্যাবহার করা এড়িয়ে চলার মাধ্যমে, আপনি যেকোনো আকারের ছবি পরিছন্নভাবে <span id="result_box" lang="bn"><span class="hps">তৈরি করতে পারেন।</span></span></dd> - </dl> - <p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">সম্পূর্ণ দেখুন্...</a></span></p> - </div> - <div class="section"> - <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">3D গ্রাফিক্স</h2> - <dl> - <dt> - <a href="/en-US/docs/Web/WebGL">WebGL(ওয়েব জি এল)</a></dt> - <dd> - <div class="almost_half_cell" id="gt-res-content"> - <div dir="ltr" style="zoom: 1;"> - <span class="short_text" id="result_box" lang="bn"><span class="hps">WebGL</span> <span class="hps">শুরু</span> <span class="hps">করার একটি নির্দেশিকা</span></span>, ওয়েবের জন্য <span class="short_text" id="result_box" lang="bn"><span class="hps">3D গ্রাফিক্স API</span></span>. এই প্রযুক্তি আপনাকে <span class="short_text" id="result_box" lang="bn"><span class="hps">ওয়েবের মধ্যে স্ট্যান্ডার্ড</span></span> OpenGL ES ব্যাবহার করতে দেয়।</div> - </div> - </dd> - </dl> - <h2 id="ভিডিও">ভিডিও</h2> - <dl> - <dt> - <a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">HTML5 (অডিও এবং ভিডিও ব্যাবহার)</a></dt> - </dl> - <div class="almost_half_cell" id="gt-res-content"> - <div dir="ltr" style="zoom: 1;"> - <span id="result_box" lang="bn"><span class="hps">একটি HTML</span> <span class="hps">নথিতে</span> <span class="hps">ভিডিও এম্বেড</span> <span class="hps">এবং প্লেব্যাক</span> <span class="hps">নিয়ন্ত্রণ</span><span>।</span></span></div> - </div> - <dl> - <dt> - <a href="/en-US/docs/WebRTC">WebRTC(ওয়েব আর টি সি)</a></dt> - <dd> - WebRTC(ওয়েব আর টি সি) এর RTC (আর টি সি) বলতে Real-Time Communications (রিয়েল টাইম কমিউনিকেশন) কে বুঝায়, এই প্রযুক্তি <span id="result_box" lang="bn"><span class="hps">অডিও / ভিডিও</span> <span class="hps">স্ট্রিমিং</span> <span class="hps">এবং ব্রাউজার</span> <span class="hps">ক্লায়েন্ট</span>স <span class="hps atn">(</span><span>মিত্রগণ</span><span>)</span> <span class="hps">মধ্যে তথ্য</span> <span class="hps">ভাগ</span> <span class="hps">করতে সক্ষম</span><span>।</span></span></dd> - </dl> - </div> -</div> -<p> </p> 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 ---- -<p><span class="seoSummary">HTML5 এ যেকোনো অংশ পরিবর্তনীয়। কিছু জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার ব্যবহার করে আপনি একটি ওয়েব পেজ একটি সম্পূর্ণ এবং দ্রুত rich-text editor এ রুপান্তর করতে পারবেন । এই অনুচ্ছেদ আপনাকে এর কার্যকারিতা সম্পর্কে কিছু তথ্য প্রদান করবে।</span></p> -<h2 id="সামঞ্জস্যতা"><span class="short_text" id="result_box" lang="bn"><span class="hps">সামঞ্জস্যতা</span></span></h2> -<p>পরিবর্তনীয় বিষয়গুলো সম্পূর্ণভাবে বর্তমান ব্রাউজার গুলোর সাথে সামঞ্জস্যপূর্ণ।</p> -<ul> - <li>ফায়ারফক্স ৩.৫+</li> - <li><span class="short_text" id="result_box" lang="bn"><span class="hps">অ্যান্ড্রয়েড-এর জন্য </span></span>ফায়ারফক্স ১৯+</li> - <li>ক্রোম ৪.০+</li> - <li><span class="short_text" id="result_box" lang="bn"><span class="hps">ইন্টারনেট এক্সপ্লোরার</span></span> ৫.৫+</li> - <li>সাফারি ৩.১+</li> - <li>অপেরা ৯+</li> - <li>আইওএস সাফারি ৫.০+</li> - <li><span class="short_text" id="result_box" lang="bn"><span class="hps">অ্যান্ড্রয়েড</span></span> ব্রাউজার ৩.০+</li> - <li>অপেরা মোবাইল ১২.১+</li> - <li><span class="short_text" id="result_box" lang="bn"><span class="hps">অ্যান্ড্রয়েড-এর জন্য ক্রোম </span></span>২৫+</li> -</ul> -<p>এখন পর্যন্ত অপেরা মিনি তে সমর্থিত নয়।</p> -<h2 id="এটা_কিভাবে_কাজ_করে">এটা কিভাবে কাজ করে ?</h2> -<p><code>contenteditable</code> এট্রিবিউট টি আপনার HTML উপাদান এ <code>true</code> সেট করুন। এটা প্রায় সকল HTML উপাদান এ ব্যবহার করা যায়।</p> -<h2 id="উদাহরণ">উদাহরণ</h2> -<p>একটি সহজ উদাহরণ</p> -<pre><!DOCTYPE html> -<html> - <body> - <div contenteditable="true"> - This text can be edited by the user. - </div> - </body> -</html> </pre> -<p>আপনি এখানে লোকালস্টোরেজ ব্যবহার করে জাভাস্ক্রিপ্ট ইন্টিগ্রেশন এর একটি কার্যকর উদাহরন দেখতে পারেন। এই উৎস-এর সাথে</p> -<h2 id="আরও_দেখুন">আরও দেখুন</h2> -<pre class="code">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");</pre> -<p><a href="/en/Midas" title="en/Midas">কিভাবে এই বিষয় এর সাথে কাজ করবেন </a> (old IE style API) এবং <a href="/en/Rich-Text_Editing_in_Mozilla" title="en/rich-text editing in mozilla">এখানে</a></p> -<div> - {{ languages({ "ja": "ja/HTML/Content_Editable", "zh-cn": "zh-cn/HTML/Content_Editable" }) }}</div> 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 ---- -<p><span class="seoSummary"><a href="/bn-BD/docs/HTML" title="HTML">HTML</a> বলতে যা বুঝায় </span><span class="seoSummary"><strong>HTML5</strong> তার সর্বাধুনিক বিবর্তন</span><span class="seoSummary">। </span>বিষয়টি দুইটি ভিন্ন ধারনা কে প্রতিনিধিত্ব করে :</p> - -<div class="note"> -<ul> - <li> - <p><span class="seoSummary">এটি HTML এর নতুন সংস্করণ, এবং এতে আরো নতুন elements, attributes এবং behaviors যুক্ত হয়েছে,</span></p> - </li> - <li><span class="seoSummary">এটি বৃহৎ প্রযুক্তি ভান্ডার যা আরো শক্তিশালী এবং নানাবিধ ওয়েব সাইট এবং এপ্লিকেশন তৈরি করার সক্ষমতা দেয়।</span> এই ভান্ডারকে মাঝে মাঝে <em>HTML5 and friends</em> নামে ডাকা হয় এবং প্রায় ছোট করে করে শুধু <em>HTML5</em> বলে।</li> -</ul> -</div> - -<p>সকল উন্মুক্ত ওয়েব ডেভলপারদের ব্যবহার উপযোগী করা সাজানো হয়েছে। এই পৃষ্ঠায় অসংখ্যা HTML5 প্রযুক্তির তথ্য সমৃদ্ধ পৃষ্ঠার লিংক দেওয়া আছে। কার্যকরিতার উপর ভিত্তি করে এগুলোকে বিভিন্ন দলে বিভক্ত করা হয়েছে।</p> - -<ul> - <li><em>সিমানটিকস</em>: আপনার বিষয়বস্তু সম্পর্কে আপনাকে আরো যথাযথ ভাবে বর্ণনা করার সুযোগ দিবে।</li> - <li><em>কানেক্টিভিটি</em>: সার্ভারের সাথে যোগাযোগ করতে আপনাকে নতুন নতুন পথ দেখাবে।</li> - <li><em>অফলাইন এবং স্টোরেজ</em>: ক্লায়েন্ট সাইডে স্থানীয়ভাবে ওয়েবপেইজের তথ্য সংরক্ষণ করার সক্ষমতা দিবে এবং অফলাইনে তা ব্যবহার করতে আরো কার্যকরী করবে।</li> - <li><em>মাল্টিমিডিয়া</em>: উন্মুক্ত ওয়েবে ভিডিও এবং অডিও কে প্রথম শ্রেনীতে রাখা হয়েছে।</li> - <li><em>দ্বিমাত্রিক/ত্রিমাত্রিক গ্রাফিক্স এবং ইফেক্ট</em>: উপস্থাপনার জন্য আরো অনেক বিকল্প দিবে।</li> - <li><em>কার্যকারিতা এবং ইন্ট্রিগ্রেশন</em>: আরো গতির উন্নতি হবে এবং কম্পিউটার হার্ডওয়্যারের আরো ভালো ব্যবহার হবে</li> - <li><em>যন্ত্রের ব্যবহার</em>: আরো ইনপুট এবং আউটপুট যন্ত্রের ব্যবহারের সুযোগ দিবে।</li> - <li>সাজসজ্জা: চমৎকার চমৎকার থিম তৈরি করার সুযোগ দিবে।</li> -</ul> - -<div class="cleared row topicpage-table"> -<div class="section"> -<h2 id="সিম্যানটিকস" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;"><em>সিম্যানটিকস</em></h2> - -<dl> - <dt><a href="/bn-BD/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">HTML5 এর সেকশন এবং আউটলাইন</a></dt> - <dd>HTML5 এর নতুন আউটলাই এবং সেকশন উপাদানের এক ঝলক: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} এবং {{HTMLElement("hgroup")}}.</dd> - <dt><a href="/bn-BD/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">HTML5 অডিও এবং ভিডিও'র ব্যবহার</a></dt> - <dd>{{HTMLElement("audio")}} এবং {{HTMLElement("video")}} উপাদান এম্বেড থাকা এবং নতুন মাল্টিমিডিয়ার ব্যবহার নিশ্চিত করা।</dd> - <dt><a href="/bn-BD/docs/HTML/Forms_in_HTML" title="Forms in HTML5">HTML5 এর ফর্ম</a></dt> - <dd>এক নজরে HTML5 এ ওয়েব ফর্মের উন্নয়নগুলো দেখে নেই: কন্সট্রেইন্ট ভ্যালিডেশন এপিআই, কিছু নতুন এট্রিবিউট, {{HTMLElement("input")}} এট্রিবিউটের জন্য নতুন নতুন ভ্যালু {{htmlattrxref("type", "input")}} এবং {{HTMLElement("output")}} নামক নতুন এলিমেনট।</dd> - <dt>নতুন সিমানটিকস এলিমেন্ট</dt> - <dd>সেকশন, মিডিয়া এবং ফর্ম এলিমেন্টের পাশাপারশি আরো নতুন নতুন এলিমেন্ট এসেছে, যেমন</dd> - <dd>{{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, অথবা{{HTMLElement("meter")}}, যা <a href="/bn-BD/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">HTML5 এলিমেন্টের পরিমান বৃদ্ধি করে দিচ্ছে।</a></dd> - <dt>{{HTMLElement("iframe")}} এর আরো উন্নয়ন</dt> - <dd>{{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, and {{htmlattrxref("srcdoc", "iframe")}} এট্রিবিউটের ব্যবহার করে, ডেভলপারগন নিরাপত্তার মান কে আরো যথাযথ করতে পারছেন এবং {{HTMLElement("iframe")}} এর চাহিদা মতন রেন্ডারিং করতে পারছেন।</dd> - <dt><a href="/bn-BD/docs/MathML" title="MathML">MathML</a></dt> - <dd>গাণিতিক ফর্মুলার সরাসরি ব্যবহার নিশ্চিত করেছে।</dd> - <dt><a href="/bn-BD/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">HTML5 এর পরিচিতি</a></dt> - <dd>আপনি HTML5 এর মাধ্যমে কোন ওয়েব ডিজাইন করলে অথবা কোন ওয়েব এপ্লিকেশন তৈরি করতে চাইলে কিভাবে শুরু করবেন তা এই নিবন্ধে বলা আছে।</dd> - <dt><a href="/bn-BD/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-সমর্থিত পার্সার</a></dt> - <dd>এটি একটি পার্সার, যা HTML ডকুমেন্টের বাইটকে ডকুমেন্ট অবজেক্ট মডেলে (DOM) রূপান্তর করে। এটাকে এখন বর্ধিত করা হয়েছে এবং এখন আরো ভালভাবে সকল ক্ষেত্রে কাজ করার উপযুক্ত করা হয়েছে। এমন কি ভুল মার্কআপ পাওয়ার পরও যাতে ঠিকঠাক কাজ করতে পারে, তেমন ক্ষমতা দেয়া হয়েছে । এতে করে HTML5 সমর্থিত ব্রাউজার গুলোর মদ্ধে আন্তঃ পরিচালন ক্ষমতা ও অনুমানের দক্ষতা বৃদ্ধি পেয়েছে।</dd> -</dl> - -<h2 id="কানেক্টিভিটি" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;"><em>কানেক্টিভিটি</em></h2> - -<dl> - <dt><a href="/bn-BD/docs/WebSockets" title="WebSockets">ওয়েব সকেট</a></dt> - <dd>ওয়েব পেজ এবং সার্ভারের মধ্যে, HTML নয় এমন তথ্য আদান-প্রদানের জন্য, একটি স্থায়ী সংযোগ তৈরি করার সুবিধা দেয়।</dd> - <dt><a href="/bn-BD/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">সার্ভার-প্রেরিত ইভেন্ট</a></dt> - <dd>আগে সার্ভার গুলো শুধু গ্রাহকের অনুরোধের ভিত্তিতে তথ্য পাঠাতে পারত। কিন্তু এই নতুন সংযোজনটি বারবার অনুরোধের ঝামেলা ছাড়াই সরাসরি গ্রাহকের কাছে ইভেন্ট প্রেরণের অনুমতি দেয়।</dd> - <dt><a href="/bn-BD/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>RTC মানে Real Time Communication বা তাৎক্ষণিক যোগাযোগ। এটি ব্রাউজারের মাদ্ধমে অন্যদের সাথে চ্যাট বা ভিডিও কনফারেন্সিং এর সুবিধা দেয়। আর এই প্রযুক্তি ব্যবহারের ফলে কোন প্রকার আলাদা সফটওয়্যার বা প্লাগিনেরও প্রয়োজন হয়না।</dd> -</dl> - -<h2 id="অফলাইন_এবং_স্টোরেজ" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;"><em>অফলাইন এবং স্টোরেজ</em></h2> - -<dl> - <dt><a href="/bn-BD/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">অফলাইন রিসোর্স: এপ্লিকেশন ক্যাশ</a></dt> - <dd>ফায়ারফক্স সম্পূর্ণ ভাবে HTML5 অফলাইন রিসোর্স সমর্থন করে। বাকি সবারও একই ধরনের অফলাইন রিসোর্স সমর্থন আছে।</dd> - <dt><a href="/bn-BD/docs/Online_and_offline_events" title="Online_and_offline_events">অনলাইন এবং অফলাইন ইভেন্ট</a></dt> - <dd>ফায়ারফক্স ৩ WHATWG অনলাইন এবং অফলাইন ইভেন্ট সমর্থন করে, যা একটি এপ্লিকেশন এবং এক্সটেনশন কে সচল ইন্টারনেট সংযোগ আছে কিনা তা পরীক্ষা করার সুযোগ দেয়, সাথে সাথে সংযোগ কি উঠা নামা করছে কিনা তাও পরীক্ষা করে।</dd> - <dt><a href="/bn-BD/docs/DOM/Storage" title="DOM/Storage">WHATWG ক্লায়েন্ট সাইড সেসন এবং স্থায়ী স্টোরেজ (এককথায় DOM স্টোরেজ)</a></dt> - <dd>ক্লায়েন্ট সাইড সেসন এবং স্থায়ী স্টোরেজ ওয়েব এপ্লিকেশন কে ক্লায়েন্ট সাইডে তথ্য সংরক্ষণে সুবিধা দেয়।</dd> - <dt><a href="/bn-BD/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> - <dd>ইহা একটি ওয়েব মান যা একটি উল্লেখযোগ্য পরিমান সাজানো তথ্য ব্রাজারে সংরক্ষণকে বুঝায় এবং ইন্ডেক্স ব্যবহার করে উচ্চ ক্ষমতায় তথ্য অনুসন্ধানের সুবিধা দেয়।</dd> - <dt><a href="/bn-BD/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">ওয়েব এপ্লিকেশন থেকে ফাইলের ব্যবহার</a></dt> - <dd>নতুন HTML5 ফাইল এপিআই গিকোতে যুক্ত হয়েছে, যা ব্যবহারকারী দ্বারা নির্বাচিত স্থানীয় ফাইল ব্যবহার করাকে সম্ভব করেছে। এরমধ্যে রয়েছে <span style="font-family: monospace;">{{HTMLElement("input")}} ও <a href="/bn-BD/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> অ্যাট্রিবিউট ব্যবহার করে একাধিক <a href="/bn-BD/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>ধরণের</strong></a> <span style="font-family: courier new;">file</span> নির্বাচন সমর্থন।</span> এরমধ্যে <a href="/bn-BD/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>ও আছে।</dd> -</dl> - -<h2 id="মাল্টিমিডিয়া" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">মাল্টিমিডিয়া</h2> - -<dl> - <dt><a href="/bn-BD/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">HTML5 অডিও ও ভিডিও ব্যবহার করা</a></dt> - <dd>{{HTMLElement("audio")}} এবং {{HTMLElement("video")}} এর সাহায্যে মাল্টিমিডিয়া কন্টেন্ট ওয়েবপেজে যুক্ত করার এবং ম্যানিপুলেট করার সুবিধা দেয়।</dd> - <dt><a href="/bn-BD/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>RTC অর্থ রিয়েল টাইম কমিউনিকেশন, যা ব্রাউজারেই অতিরিক্ত প্লাগ-ইনের সাহায্য ছাড়া অন্যান্য মানুষের সাথে যোগাযোগ করা এবং সরাসরি ভিডিও-কনফারেন্সিং নিয়ন্ত্রণ করা সম্ভব করে।</dd> - <dt><a href="/bn-BD/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">ক্যামেরা API ব্যবহার করা</a></dt> - <dd>কম্পিউটারের ক্যামেরা থেকে ছবি ব্যবহার, পরিবর্তন এবং সংরক্ষণের সুবিধা প্রদান করে।</dd> - <dt>ট্র্যাক এবং WebVTT</dt> - <dd>{{HTMLElement("track")}} সাবটাইটেল এবং চ্যাপ্টারের সুবিধা প্রদান করে। <a href="/bn-BD/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> একটি টেক্সট ট্র্যাক ফরম্যাট।</dd> -</dl> - -<h2 id="ত্রিমাত্রিক_গ্রাফিক্স_এবং_ইফেক্ট" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">ত্রিমাত্রিক গ্রাফিক্স এবং ইফেক্ট</h2> - -<dl> - <dt><a href="/bn-BD/docs/Canvas_tutorial" title="Canvas tutorial">ক্যানভাস টিউটোরিয়াল</a></dt> - <dd>নতুন HTML <code>{{HTMLElement("canvas")}}</code> এলিমেন্ট এবং গ্রাফিক্স ও অন্যান্য অবজেক্ট আঁকা সম্পর্কে জানুন</dd> - <dt><a href="/bn-BD/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas"><code><canvas></code> এলিমেন্টের জন্য HTML টেক্সট API</a></dt> - <dd>{{HTMLElement("canvas")}} এখন HTML5 টেক্সট API সমর্থন করে।</dd> - <dt><a href="/bn-BD/docs/WebGL" title="WebGL">WebGL</a></dt> - <dd>WebGL (ওয়েব জি, এল) OpenGL ES 2.0 এর কাছাকাছি একটি API এর সাহায্যে ওয়েবে {{HTMLElement("canvas")}} এলিমেন্টে ত্রিমাত্রিক গ্রাফিক্স নিয়ে আসে। </dd> - <dt><a href="/bn-BD/docs/SVG" title="SVG">SVG</a></dt> - <dd>সরাসরি HTML এ যুক্ত করার উপযোগী ভেক্টর ইমেজের জন্য XML-ভিত্তিক ফাইল ফরম্যাট।</dd> - <dt> </dt> -</dl> -</div> - -<div class="section"> -<h2 id="কার্যকারিতা_এবং_ইন্ট্রিগ্রেশন" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;"><em>কার্যকারিতা এবং ইন্ট্রিগ্রেশন</em></h2> - -<dl> - <dt><a href="/bn-BD/docs/DOM/Using_web_workers" title="Using web workers">Web Workers (ওয়েব ওয়ার্কার)</a></dt> - <dd>জাভাস্ক্রিপ্টকে ব্যাকগ্রাউন্ড থ্রেডের প্রতিনিধিত্ব ও মূল্যায়ন করার সুবিধা প্রদান করে। এরফলে ইন্টার্যাক্টিভ ইভেন্টগুলো ধীর গতির হয়না।</dd> - <dt><code><a href="/bn-BD/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> লেভেল 2</dt> - <dd>সময় এবং ব্যবহারকারীর কার্যক্রমের উপর নির্ভর করে বিক্ষিপ্তভাবে একটি পাতার কিছু অংশ নিয়ে আসে। আর এই প্রক্রিয়ায় আনার ফলে কন্টেন্ট গুলো ডায়নামিক হওয়ার সুযোগ পায়। এটাই <a href="/bn-BD/docs/AJAX" title="AJAX">Ajax</a> এর পেছনের প্রযুক্তি।</dd> - <dt>JIT-কম্পাইল করা জাভাস্ক্রিপ্ট ইঞ্জিন</dt> - <dd>নতুন প্রজন্মের জাভাস্ক্রিপ্ট ইঞ্জিন পূর্বের চেয়ে অনেক শক্তিশালী যার ফলে অধিক পারফরম্যান্স নিশ্চিত করে।</dd> - <dt><a href="https://developer.mozilla.org/bn-BD/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">হিস্টোরি API</a></dt> - <dd>এটি ব্রাউজারের হিস্টোরি ম্যানিপুলেট করার সুযোগ দেয়, যেসকল ওয়েবপেজ ইন্টারএ্যাক্টিভভাবে তথ্য লোড করে, তাদের জন্য এটি বিশেষভাবে উপযোগী।</dd> - <dt><a href="/bn-BD/docs/HTML/Content_Editable" title="HTML/Content Editable">contentEditable attribute: আপনার ওয়েবসাইটকে উইকিতে রুপান্তর করুন!</a></dt> - <dd>HTML5 contentEditable এ্যাট্রিবিউটটি স্ট্যান্ডার্ডের অন্তর্ভুক করেছে। এই নতুন ফিচারটি সম্পর্কে জানুন।</dd> - <dt><a href="/bn-BD/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">ড্র্যাগ-এন্ড-ড্রপ</a></dt> - <dd>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.</dd> - <dt><a href="/bn-BD/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">HTML এ ফোকাস ব্যবস্থাপনা</a></dt> - <dd>নতুন HTML5 <code>activeElement</code> এবং <code>hasFocus</code> এট্রিবিউটগুলো এখন সমর্থিত!</dd> - <dt><a href="/bn-BD/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">ওয়েব-ভিত্তিক প্রোটোকল হ্যান্ডেলার</a></dt> - <dd>আপনে এখন প্রটোকল হ্যান্ডেলার হিসেবে ওয়েব এ্যাপ্লিকেশন রেজিস্টার করতে পারবেন <code>navigator.registerProtocolHandler()</code> মেথডের সাহায্যে।</dd> - <dt><a href="/bn-BD/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> - <dd>সর্বোত্তম পারফরম্যান্সের জন্য এ্যানিমেশন নিয়ন্ত্রণের সুবিধা প্রদান করে।</dd> - <dt><a href="/bn-BD/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">ফুলস্ক্রিন API</a></dt> - <dd>ব্রাউজারের ইন্টারফেস প্রদর্শন ব্যতিত আপনার ওয়েব পেজ বা এ্যাপ্লিকেশনকেই সম্পূর্ণ স্ক্রিনে প্রদর্শন নিয়ন্ত্রণ করে।</dd> - <dt><a href="/bn-BD/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">পয়েন্টার লক API</a></dt> - <dd>সবসময় কোন কন্টেন্ট এর পয়েন্টার লক করে রাখে, তাই গেমস অথবা একই ধরনের কোন এপ্লিকেশনের ক্ষেত্রে পয়েন্টার উইন্ডো সীমায় পৌছে গেলেও তা ফোকাস হারায় না।</dd> - <dt><a href="/bn-BD/docs/Online_and_offline_events" title="Online_and_offline_events">অনলাইন এবং অফলাইন ইভেন্ট</a></dt> - <dd>অফলাইনে চলবে এমন একটি ভালো মানের এপ্লিকেশন তৈরী করতে হলে, আপনাকে জানতে হবে আপনার এপ্লিকেশন কখন অফলাইনে আছে। আপনার এপ্লিকেশন কখন অনলাইনে আসতে পারে তাও আপনাকে জাতে হবে।</dd> -</dl> - -<h2 id="যন্ত্রের_ব্যবহার" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;"><em>যন্ত্রের ব্যবহার</em></h2> - -<dl> - <dt><a href="/bn-BD/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">ক্যামেরা API এর ব্যবহার</a></dt> - <dd>কম্পিউটারের ক্যামেরা থেকে ছবি ব্যবহার এবং সংরক্ষণ করে।</dd> - <dt><a href="/bn-BD/docs/DOM/Touch_events" title="DOM/Touch_events">টাচ ইভেন্ট</a></dt> - <dd>টাচ স্ক্রিন চাপলে ব্যবহারকারী কর্তৃক তৈরী করা ইভেন্ট অনুযায়ি কাজ করবে।</dd> - <dt><a href="/bn-BD/docs/Using_geolocation" title="Using geolocation">জিওলোকেশনের ব্যবহার</a></dt> - <dd>জিওলোকেশন ব্যবহার করে ব্রাউজার কে ব্যবহারকারীর বর্তমান অবস্থান নির্দিষ্ট করতে দেয়।</dd> - <dt><a href="/bn-BD/docs/Detecting_device_orientation" title="Detecting_device_orientation">ডিভাইসের স্থিতি সনাক্ত করা</a></dt> - <dd>এটা ডিভাইসের স্থিতি অর্থাৎ ডিভাইসটি উল্লম্ব ভাবে আছে, নাকি আনুভূমিক ভাবে আছে (আরও সহজ করে বলতে গেলে ডিভাইসটি সোজা করে ধরা হয়েছে না কাত করে ধরা হয়েছে) তা সনাক্ত করে ব্রাউজারকে মাপ পরিবর্তনে সহায়তা করে। এটা ইনপুট ডিভাইস হিসেবেও ব্যবহার করা যায়। যেমনঃ অবস্থান বা নড়াচড়াকে গেমের নিয়ন্ত্রণ হিসেবে ব্যবহার করা বা পেজের লেআউটে পরিবর্তন ইত্যাদি।</dd> - <dt><a href="/bn-BD/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">পয়েন্টার লক API</a></dt> - <dd>কন্টেন্টের সাথে পয়েন্টারকে লক করে রাখতে দেয়, যাতে করে পয়েন্টার পর্দার শেষ প্রান্তে পৌছালেও গেম এবং সদৃশ অ্যাপ গুলো আকর্ষণ না হারায়।</dd> -</dl> - -<h2 id="সাজসজ্জা" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;"><em>সাজসজ্জা</em></h2> - -<p><a href="/bn-BD/docs/CSS" title="CSS">সিএসএস</a>কে আরও জটিল নিয়মে এলিমেন্ট গুলোকে স্টাইল করার জন্য বর্ধিত করা হয়েছে। যদিও এটা এখন মনোলিথিক বৈশিষ্ট্যের মধ্যে নেই এবং আলাদা মডিউল গুলোও ৩য় স্তরে নেই, তারপরও এটাকে প্রায়ই <a href="/bn-BD/docs/CSS/CSS3" title="CSS/CSS3">সিএসএস৩</a> বলা হয়। এর মডিউল গুলোর মধ্যে কিছু ১ম স্তরে আছে, আবার কিছু ৪র্থ স্তরে আছে।</p> - -<dl> - <dt>নতুন ব্যাকগ্রাউন্ড স্টাইলিং বৈশিষ্ট্য সমূহ</dt> - <dd>এখন {{cssxref("box-shadow")}} ব্যবহার করে একটি বক্সের নিচে ছায়া এবং <a href="/bn-BD/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">একাধিক ব্যাকগ্রাউন্ড</a> প্রয়োগ করা যাবে।</dd> - <dt>আরও রুচিসম্মত বর্ডার সমূহ</dt> - <dd>এখন {{cssxref("border-image")}} ব্যবহার করে শুধু বর্ডার স্টাইলই করা যাবে না, এর সাথে সংশ্লিষ্ট অন্যান্য লং-হ্যান্ড প্রপার্টিও ব্যবহার করা যাবে। কিন্তু গোলাকার বর্ডার শুধু {{cssxref("border-radius")}} ব্যবহার করেই প্রয়োগ করা যাবে।</dd> - <dt>স্টাইল অ্যানিমেট করা</dt> - <dd><a href="/bn-BD/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">সিএসএস ট্রানজিশন</a> ব্যবহার করে দুইটি ভিন্ন অবস্থার মধ্যে অ্যানিমেট করা যাবে অথবা <a href="/bn-BD/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">সিএসএস অ্যানিমেশন</a> ব্যবহার করে কোন ইভেন্ট ট্রিগার না করেই বিভিন্ন অংশ অ্যানিমেট করা যাবে। আর এসব অ্যানিমেশনের সময়, ধরন, গতি-প্রকৃতি সবই আপনি নিয়ন্ত্রণ করতে পারবেন।</dd> - <dt>টাইপোগ্রাফি উন্নয়ন</dt> - <dd>ভালো টাইপোগ্রাফি ব্যবহার করার জন্য ডিজাইনারদের এখন আরও বেশি নিয়ন্ত্রণ দেয়া হয়েছে। তারা এখন {{cssxref("text-overflow")}} এবং <a href="/bn-BD/docs/CSS/hyphens" title="CSS/hyphens">হাইফেনেশন</a> নিয়ন্ত্রণ করতে পারেন। <a href="/bn-BD/docs/CSS/text-shadow" title="CSS/text-shadow">ছায়া</a> যুক্ত করতে পারেন অথবা অনেক সূক্ষ্মভাবে <a href="/bn-BD/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">অলঙ্করণ</a> করতে পারেন। নিজের ইচ্ছামত ফন্ট ডাউনলোড করে প্রয়োগ করা যাবে। এজন্য ধন্যবাদ দিতে হয় {{cssxref("@font-face")}} নিয়মটিকে।</dd> - <dt>নতুন প্রেজেন্টেশন লেআউট সমূহ</dt> - <dd>ডিজাইনের নমনীয়তা বৃদ্ধি করার জন্য নতুন দুইটি লেআউট যুক্ত করা হয়েছেঃ একটি হচ্ছে <a href="/bn-BD/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layout</a>, এবং অপরটি <a href="/bn-BD/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>।</dd> -</dl> -</div> -</div> - -<p> </p> 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 ---- -<p><span id="result_box" lang="bn"><span class="hps">HTML এর</span> <span class="hps">পঞ্চম</span> <span class="hps">ও </span><span class="hps">সর্বশেষ</span> <span class="hps">সংস্করণ <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a></span></span>। <span id="result_box" lang="bn"><span class="hps">এর</span> নতুন কিছু ফিচার রয়েছে যেমন শুধু <span class="hps">রিচ</span> <span class="hps">মিডিয়া</span>ই <span class="hps">সমর্থন</span> <span class="hps">করা, ওয়েব </span></span><span id="result_box" lang="bn"><span class="hps">এপ্লিকেশন তৈরি করা এখন আরও সহজ। এসব ওয়েব এপ্লিকেশন ব্যবহারকীর সাথে ইন্টার-এক্ট করতে পারে, ব্যবহারকারীর কম্পিউটারের ডেটা নিয়ে কাজ করতে পারে, সার্ভারের সাথে যোগাযোগ </span></span>করতে পারে আগের থেকে অনেক কার্যকরভাবে।</p> -<p><span id="result_box" lang="bn"><span class="hps">HTML5</span> <span class="hps">এখনও</span> ডেভেলপ<span class="hps"> হচ্ছে</span><span>, সে কারণে</span> এখনো এর নির্দেশিকায় টুকটাক পরিবর্তন চলছে<span>।</span></span> <span id="result_box" lang="bn"><span class="hps">এখনো</span> <span class="hps">সব</span> <span class="hps">ব্রাউজারে সব ফিচার চলে না</span><span class="hps">।</span></span> যাইহোক, <em>গেকো</em> এবং তার এক্সটেনশন, ফায়ারফক্স খুব ভালভাবেই HTML5 সমর্থন করে, এবং এর আরও ফিচার সমর্থনের কাজ চলছে। <span id="result_box" lang="bn"><span class="hps">গেকো</span> <span class="hps">১.৮.১</span> <span id="result_box" lang="bn"><span class="hps">সংস্করণ</span></span> <span class="hps">থেকে HTML5 এর</span> ফিচার <span class="hps">সমর্থন করা</span> <span class="hps">শুরু করেছে। </span></span>গেকো বর্তমানে HTML5 এর কি কি ফিচার সমর্থন করে তা <a href="/bn/HTML/HTML5" title="en/HTML/HTML5">HTML5 এর মুল</a><a href="/bn-BD/HTML/HTML5"> পেজে </a> জানতে পারেন। অন্যান্য ব্রাউজারে HTML5 সাপোর্ট করে কি না, তা বিস্তারিত জানতে <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a> ওয়েবসাইটে যেতে পারেন।</p> -<h2 id="যেভাবে_বলবেন_আপনার_ডকুমেন্টে_HTML5_মার্ক-আপ_আছে">যেভাবে বলবেন আপনার ডকুমেন্টে HTML5 মার্ক-আপ আছে</h2> -<p>HTML5 এর জন্য ডকটাইপ খুবই সাধারন। আপনার HTML কন্টেন্ট যে HTML5 ব্যাবহার করছে তা বলার জন্য ডকুমেন্টের শুরুতে নিচের কোড লিখুনঃ</p> -<pre class="brush:html;"><!DOCTYPE html> -</pre> -<p>যেসব ব্রাউজার এখনো HTML5 সমর্থন করে না, তারাও এই কোড দেখলে স্ট্যান্ডার্ড মোডে চলে যাবে, যার অর্থ হল তারা HTML এর আগের সমর্থিত কোডগুলো ঠিকমতই দেখাবে এবং শুধুমাত্র যেসব HTML5 এলিমেন্ট তারা সমর্থন করে না সেগুলোই দেখাবে না।</p> -<p>নতুন এই ডকটাইপ আগের ডক্টাইপগুলো থেকে অনেক ছোট, যে কারণে এটা সহজেই মনে রাখা যায়। তাছাড়া ছোট হওয়ার জন্য কম বাইট ডাউনলোড হয় ব্যবহারকারীর মেশিনে।</p> -<h2 id="<meta_charset>_লিখে_ক্যারেক্টার-সেট_ডিক্লেয়ার_করুন"><code><meta charset> লিখে ক্যারেক্টার-সেট ডিক্লেয়ার করুন</code></h2> -<p>সাধারণতঃ পেইজের শুরুতেই এটি কোন ক্যারেক্টার-সেট ব্যবহার করছে তা বলে দিতে হয়। HTML এর আগের সংস্করণে জটিল {{HTMLElement("meta")}} ট্যাগ দিয়ে এটি করা লাগত, কিন্তু এখন যা খুবই সহজঃ</p> -<pre class="brush:html;"><meta charset="UTF-8"></pre> -<p>{{HTMLElement("head") }} এর পরেই উপরের কোড লিখুন, যেহেতু কিছু ব্রাউজার HTML ডকুমেন্ট পার্স করা নতুন করে শুরু করে, যদি আপনার ডিক্লেয়ার করা ক্যারেক্টার-সেট ব্রাউজার যেটা ধরে নিয়েছিল সেটার থেকে আলাদা হয়। এছাড়া, আপনি যদি UTF-8 ব্যবহার না করেন তাহলে আপনাকে UTF-8 ব্যবহার করতে নির্দেশনা দেওয়া হচ্ছে, কারণ এটি অনেক স্ক্রিপ্টেই ক্যারেক্টার ব্যবহার করা অনেক সহজ করে দেয়।</p> -<p>খেয়াল করুনঃ HTML5 নির্দেশনা দিয়েছে যে বৈধ ক্যারেক্টার-সেট অবশ্যই ASCII সমর্থিত হতে হবে আর কমপক্ষে ৮ বিট ব্যবহার করে এমন হতে হবে। নিরাপত্তা বাড়াতে আর কিছু এটাক (আক্রমণ!) ঠেকানোর জন্যই এই ব্যবস্থা।</p> -<h2 id="নতুন_HTML5_পার্সার">নতুন HTML5 পার্সার</h2> -<p>HTML5 পার্সিং নিয়মকানুন, (যা কিনা HTML কোডের অর্থ বের করে) HTML5 এ নিখুঁতভাবে বলা হয়েছে। HTML5 আসার আগে শুধুমাত্র বৈধ মার্ক-আপ কী সেটাই বলা থাকত, যেকারণে যখনই মার্ক-আপে কোন ভুল পাওয়া যেত (প্রায় সব ওয়েবসাইটেই কিছু না কিছু ভুল থাকে) একেক ব্রাউজার একেকভাবে আচরণ করত। কিন্তু এখন HTML5 এ যেহেতু মার্ক-আপে ভুল থাকলে কি করতে হবে সেটাও বলা হয়েছে, সব HTML5-সমর্থিত ব্রাউজার ভুল কোড পেলেও একইরকম আচরণ করবে।</p> -<p>এর ফলে ওয়েব ডেভেলপারদের এখন সুখের সময়। যদিও সব আধুনিক ব্রাউজার-ই HTML5-সমর্থিত, কিছু পুরনো ব্রাউজার পাওয়া যায় যারা কিনা HTML5 পার্সিং নিয়ম মেনে চলে না। এইসব HTML5-অসমর্থিত ব্রাউজার এখনো মানুষজন ব্যবহার করে। ডেভেলপারদের কে ভুল না করে, মার্ক-আপ লিখতে উৎসাহিত করা হয়, কারণ ভুলবিহীন কোড সহজেই বুঝা যায় আর পরেও কোড করতে সুবিধা হয়। আর বড় কথা হল, কোডে ভুল থাকলে পুরনো একেক ব্রাউজারে একেক আচরণ দেখা যাবে - কারণ পুরনো ব্রাউজারগুলো HTML5 পার্সিং নিয়ম মেনে চলে না।</p> -<p>টেনশন করার কোন দরকার-ই নেই, আপনার ওয়েবসাইটের কোন কিছু পরিবর্তন করা লাগবে না - ওয়েব ব্রাউজারের ডেভেলপার-রাই এসব নিয়ে মাথা ঘামাচ্ছে!</p> 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 ---- -<p>এই আর্টিকেলগুলো আপনাকে নির্দিষ্ট কিছু প্রযুক্তি এবং এপিআই ব্যবহার সংক্রান্ত তথ্য দেবে।</p> -<div class="note"> - <p><strong>সাবধান:</strong> আমাদের কন্টেন্টগুলো ঠিকমত সাজানোর আগ পর্যন্ত পেজটির অবস্থা বেশ অগোছালো থাকতে পারে। দুঃখিত!</p> -</div> -<p>{{LandingPageListSubpages}}</p> -<dl> - <dt> - <a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">জাভাস্ক্রিপ্ট</a></dt> - <dd> - ওয়েবে অ্যাপ্লিকেশন লেখার জন্য শক্তিশালী প্রোগ্রামিং ল্যাঙ্গুয়েজটি হল জাভাস্ক্রিপ্ট।</dd> -</dl> -<h2 id="আরও_দেখুন">আরও দেখুন</h2> -<ul> - <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">ওয়েব ডেভেলপার রেফারেন্স</a></li> -</ul> 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 ---- -<p><span id="result_box" lang="bn"><span class="hps">আধুনিক</span> <span class="hps">ওয়েব</span> <span class="hps">অ্যাপ্লিকেশন এবং</span> <span class="hps">সাইট</span> <span class="hps">নির্মাণ</span> <span class="hps">করার সময়, আপনার কনটেন্ট সঠিক ভাবে কাজ করা অত্যন্ত জরুরি।</span></span> যেন, তা <span class="short_text" id="result_box" lang="bn"><span class="hps">দ্রুত এবং</span> <span class="hps">দক্ষতার সঙ্গে কাজ</span> <span class="hps">করতে পারে।</span></span> <span class="short_text" id="result_box" lang="bn"><span class="hps">এটি</span> <span class="hps"><span id="result_box" lang="bn"><span class="hps">শক্তিশালী</span> <span class="hps">ডেস্কটপ</span> <span class="hps">সিস্টেম</span> <span class="hps">ব্যবহারকারীদের</span> <span class="hps">পাশাপাশি</span> <span class="hps">কম</span> <span class="hps">ক্ষমতা সম্পন্ন</span> <span class="hps">ডিভাইসের জন্যও</span></span></span></span><span class="short_text" lang="bn"><span class="hps"><span lang="bn"> </span>কার্যকরভাবে</span> <span class="hps">কাজ</span> করে থাকে</span>।</p> -<p>{{LandingPageListSubpages}}</p> 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 ---- -<p><span class="seoSummary"> </span></p> - -<div class="almost_half_cell" id="gt-res-content"> -<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="bn"><span class="hps">HTML5 এর মধ্যে</span><span>,</span> <span class="hps">যেমন</span> <span class="atn hps">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>গান"</span><span>)</span><span>}</span><span>}</span> <span class="hps">অথবা</span> <span class="hps">হিসাবে</span> </span>সি ও আর এস <span lang="bn"> <span class="hps">জন্য</span> <span class="hps">সমর্থন</span> <span class="hps">প্রদান</span> <span class="hps">যা</span> <span class="hps">কিছু</span> <span class="hps">HTML উপাদান</span><span>,</span> <span class="atn hps">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>ভিডিও</span><span>"</span><span>)</span><span>}</span><span>}</span><span>,</span> <span class="hps">আপনি</span> <span class="hps">কনফিগার</span> <span class="hps">করতে দেয়</span><span>, যা একটি</span> <span class="hps">crossorigin</span> <span class="hps">অ্যাট্রিবিউট</span> <span class="atn hps">(</span><span>crossOrigin</span> <span class="hps">সম্পত্তি</span><span>)</span><span>,</span> <span class="hps">আছে</span> </span>সি ও আর এস <span lang="bn"> <span class="hps">উপাদান</span> <span class="hps">এর</span> <span class="hps">সংগৃহীত</span> <span class="hps">তথ্য</span> <span class="hps">জন্য</span> <span class="hps">অনুরোধ</span><span>.</span> <span class="hps">এই</span> <span class="hps">বৈশিষ্ট্যাবলী</span> <span class="hps">গণিত</span><span>,</span> <span class="hps">এবং</span> <span class="hps">নিম্নলিখিত সম্ভব</span> <span class="hps">মান</span> <span class="hps">আছে</span><span>:</span></span></div> -</div> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Keyword</td> - <td class="header">Description</td> - </tr> - <tr> - <td><code>anonymous</code></td> - <td>CORS requests for this element will not have the credentials flag set.</td> - </tr> - <tr> - <td><code>use-credentials</code></td> - <td>CORS requests for this element will have the credentials flag set; this means the request will provide credentials.</td> - </tr> - </tbody> -</table> - -<p> </p> - -<p><span id="result_box" lang="bn"><span class="hps">ডিফল্ট</span> <span class="atn hps">(</span><span>অ্যাট্রিবিউট</span> <span class="hps">উল্লেখ না করা</span> <span class="hps">হলে</span><span>, যে</span> <span class="hps">হয়</span><span>)</span> <span class="hps">দ্বারা</span><span>, কর্ড</span> <span class="hps">সব সময়ে</span> <span class="hps">ব্যবহার করা হয় না</span><span>।</span> <span class="atn hps">"</span><span>বেনামী</span><span>"</span> <span class="hps">শব্দ</span> </span> সি ও আর এস<span lang="bn"> <span class="hps">স্পেসিফিকেশন</span> <span class="hps">পরিভাষা</span> <span class="hps">বিভাগে বর্ণিত</span> <span class="hps">হিসাবে</span> <span class="hps">কুকিজ</span><span>,</span> <span class="hps">ক্লায়েন্ট প্রান্তের</span> <span class="hps">SSL সার্টিফিকেট</span> <span class="hps">বা</span> <span class="hps">HTTP প্রমাণীকরণের</span> <span class="hps">মাধ্যমে</span> <span class="hps">ব্যবহারকারী শংসাপত্র</span> <span class="hps">কোন</span> <span class="hps">বেচা কেনা নেই এবং</span> <span class="hps">হবে।</span><br> - <span class="hps">একটি অবৈধ</span> <span class="hps">শব্দ</span> <span class="hps">এবং</span> <span class="hps">একটি খালি</span> <span class="hps">স্ট্রিং</span> <span class="hps">বেনামী</span> <span class="hps">শব্দ</span> <span class="hps">হিসেবে</span> <span class="hps">পরিচালিত হবে</span><span>।</span></span></p> - -<h2 id="বিশেষ_উল্লেখ"> <span class="short_text" id="result_box" lang="bn"><span class="hps">বিশেষ উল্লেখ</span></span></h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="ব্রাউজার_উপযুক্ততা"> <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্রাউজার</span> <span class="hps">উপযুক্ততা</span></span></h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>13</td> - <td>{{ CompatGeckoDesktop("8.0") }}</td> - <td>11</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td>{{ HTMLElement("video")}}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatGeckoDesktop("12.0") }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatGeckoMobile("8.0") }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td>{{ HTMLElement("video")}}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatGeckoMobile("12.0") }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="আরো_দেখুন"> <span class="short_text" id="result_box" lang="bn"><span class="hps">আরো দেখুন</span></span></h2> - -<ul> - <li><a href="/En/HTTP_access_control" title="en/HTTP access control">HTTP </a><span class="short_text" id="result_box" lang="bn"><span class="hps">প্রবেশাধিকার নিয়ন্ত্রণ</span></span></li> -</ul> 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><span class="seoSummary">এইচটিএমএল (<strong>হাইপার টেক্সট মারকআপ ল্যাঙ্গুয়েজ</strong>) এর এলিমেন্টগুলো সাধানত "ব্লক-লেভেল" এলিমেন্ট অথবা <a href="/en-US/docs/HTML/Inline_elements" title="/en-US/docs/HTML/inline_elements">"ইনলাইন" এলিমেন্ত</a> । একটি ব্লক-লেভেল এলিমেন্ট তার প্যারেন্ট এলিমেন্তটর{কন্তাইনার} সমস্ত জায়গা দখল করে , সেজন্য একটি "ব্লক" বানানো হয় ।এগুলো বুজানোর জন্য এই প্রবন্ধটি সাহায্য করবে।</span></p> - -<p>ব্রাউজারস এলিমেন্টর আগে এবং পরে এক নিওলাইনের সাথে ব্লক-লেভেল এলেমেন্টকেদেখায়।. নিচের উদাহরন ব্লক-লেভেল এলেমেন্টর প্রভাবের ব্যবহারিক প্রমান দেয়। </p> - -<h2 id="Block-level_Example" name="Block-level_Example"><span style="color: rgb(51, 51, 51); margin-left: -3px; text-transform: none;">ব্লক-লেভেল এলিমেন্টস </span></h2> - -<h3 id="এইচটিএমএল">এইচটিএমএল</h3> - -<pre class="brush: html"><p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p></pre> - -<h3 id="সিএসএস">সিএসএস</h3> - -<pre class="brush: css">p { background-color: #8ABB55; } -</pre> - -<p>{{ EmbedLiveSample('Block-level_Example') }}</p> - -<h2 id="ব্যবহারবিধি">ব্যবহারবিধি</h2> - -<ul> - <li><span class="seoSummary">ব্লক-লেভেল এলিমেন্টস কখনো</span> {{ HTMLElement("body") }}এলিমেন্টের ভিতরে আসে।</li> -</ul> - -<h2 id="ব্লক-লেভেল_বনাম._ইনলাইন"><span class="seoSummary">ব্লক-লেভেল</span> বনাম. ইনলাইন</h2> - -<p><span class="seoSummary">ব্লক-লেভেল এলিমেন্টস এবং ইনলাইনের মধ্যে দুইটি বিশেষ পার্থক্য আসে।</span>:</p> - -<dl> - <dt>ফরম্যাটিং</dt> - <dd>বাই ডিফল্ট,<span class="seoSummary">ব্লক-লেভেল এলিমেন্টস</span>নতুন লাইনেই শুরু করে, কিন্ত ইনলাইন এলিমেন্টস একটি লাইনের যেকোনো জায়গা থেকে শুরু করতে পারে।</dd> - <dt>কনটেন্ট মডেল</dt> - <dd>সাধারণত, <span class="seoSummary">ব্লক-লেভেল এলিমেন্টস ইনলাইন এলিমেন্টস</span> এবং বাকি ব্লক-লেভেল এলিমেন্টসকে ধরে রাখে। স্বভাবত গঠনগত স্বাতন্ত্র হল ঐ ধারনা যা ব্লক-লেভেল এলিমেন্টস ইনলাইন এলিমেন্টস থেকেও "বড়" কাঠামো তৈরি করে। </dd> -</dl> - -<p>ব্লক-লেভেলের স্বাতন্ত্র বনাম.<span class="seoSummary">ইনলাইন এলিমেন্টস</span> এইচটিএমএলের সবিস্তার বিবরণীকে ৮.০১ পর্যন্ত ব্যবহার করা হয়। এইচটিএমএল৫ এ,এই বিনারি স্বাতন্ত্রকে আরো জটিল <a href="/en-US/docs/HTML/Content_categories" title="/en-US/docs/HTML/Content_categories">কন্টটেন্ট ক্যাটেগরিস </a>সেটে প্রতিস্থাপন করা হয়।এইচটিএমএল৫ এ "ব্লক-লেভেল" ক্যাটেগরিটি মোটামোটিভাবে <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="/en-US/docs/HTML/Content_categories#Flow_content">ফ্লও কনটেন্ট </a> ক্যাটাগরিতে সারা দেয়, যখন "ইনলাইন" <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="/en-US/docs/HTML/Content_categories#Phrasing_content">ফ্রাসিং কনটেন্ট </a> এ সারা দেয়, কিন্তু কোন বাড়তি ক্যাটাগরি নেই।</p> - -<h2 id="এলিমেন্টস"><span class="seoSummary">এলিমেন্টস</span></h2> - -<p>নিচে এইচটিএমএল<span class="seoSummary">ব্লক-লেভেল এলিমেন্টসের সম্পূর্ণ তালিকা দেওয়া</span> হল (যদিও "ব্লক-লেভেল" ব্যাখ্যা করা হইনই ঐএলিমেন্টের যা এইচটিএমএল৫ এ নতুন)।</p> - -<div class="threecolumns"> -<dl> - <dt>{{ HTMLElement("address") }}</dt> - <dd>Contact information.</dd> - <dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Article content.</dd> - <dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Aside content.</dd> - <dt>{{ HTMLElement("blockquote") }}</dt> - <dd>Long ("block") quotation.</dd> - <dt>{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Drawing canvas.</dd> - <dt>{{ HTMLElement("dd") }}</dt> - <dd>Definition description.</dd> - <dt>{{ HTMLElement("div") }}</dt> - <dd>Document division.</dd> - <dt>{{ HTMLElement("dl") }}</dt> - <dd>Definition list.</dd> - <dt>{{ HTMLElement("fieldset") }}</dt> - <dd>Field set label.</dd> -</dl> - -<dl> - <dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Figure caption.</dd> - <dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Groups media content with a caption (see {{ HTMLElement("figcaption") }}).</dd> - <dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Section or page footer.</dd> - <dt>{{ HTMLElement("form") }}</dt> - <dd>Input form.</dd> - <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt> - <dd>Heading levels 1-6.</dd> - <dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Section or page header.</dd> - <dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Groups header information.</dd> - <dt>{{ HTMLElement("hr") }}</dt> - <dd>Horizontal rule (dividing line).</dd> - <dt>{{ HTMLElement("li") }}</dt> - <dd>List item.</dd> - <dt>{{ HTMLElement("main") }}</dt> - <dd>Contains the central content unique to this document.</dd> - <dt>{{ HTMLElement("nav") }}</dt> - <dd>Contains navigation links.</dd> -</dl> - -<dl> - <dt>{{ HTMLElement("noscript") }}</dt> - <dd>Content to use if scripting is not supported or turned off.</dd> - <dt>{{ HTMLElement("ol") }}</dt> - <dd>Ordered list.</dd> - <dt>{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Form output.</dd> - <dt>{{ HTMLElement("p") }}</dt> - <dd>Paragraph.</dd> - <dt>{{ HTMLElement("pre") }}</dt> - <dd>Preformatted text.</dd> - <dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Section of a web page.</dd> - <dt>{{ HTMLElement("table") }}</dt> - <dd>Table.</dd> - <dt>{{ HTMLElement("tfoot") }}</dt> - <dd>Table footer.</dd> - <dt>{{ HTMLElement("ul") }}</dt> - <dd>Unordered list.</dd> - <dt>{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Video player.</dd> -</dl> -</div> - -<h3 id="See_also" name="See_also">আরো দেখুন</h3> - -<ul> - <li><a href="/en-US/docs/HTML/Inline_elements" title="en/HTML/Inline_elements">ইনলাইন এলিমেন্ট</a></li> -</ul> 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: <a> -slug: Web/HTML/Element/a -translation_of: Web/HTML/Element/a ---- -<p>The <em>HTML <code>Anchor</code> Element</em> (<strong><code><a></code></strong>) 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.</p> - -<pre class="brush: html"><a href="https://developer.mozilla.org">MDN</a></pre> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> - <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, interactive content, palpable content.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td><a href="/en-US/docs/HTML/Content_categories#Transparent_content_model" title="HTML/Content_categories#Transparent_content_model">Transparent</a>, containing either <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">flow content</a> or <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Permitted parent elements</th> - <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>, or any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">flow content</a>.</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLAnchorElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="আট্ট্রিবিউট">আট্ট্রিবিউট </h2> - -<p><span style="line-height: 21px;">This element includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> - -<dl> - <dt>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</dt> - <dd>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 <code>/</code> and <code>\</code> 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. - <div class="note"> - <p><strong>Note:</strong></p> - - <ul> - <li>Can be used with <a href="/en-US/docs/Web/API/URL.createObjectURL" title="/en-US/docs/Web/API/URL.createObjectURL"><code>blob:</code> URLs</a> and <code>data:</code> 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).</li> - <li>If the HTTP header <code>Content-Disposition:</code> is present and gives a different filename than this attribute, the HTTP header has priority over this attribute.</li> - <li>If this attribute is present and <code>Content-Disposition:</code> is set to <code>inline</code>, Firefox gives priority to <code>Content-Disposition</code>, like for the filename case, while Chrome gives priority to the <code>download</code> attribute.</li> - <li>This attribute is only honored for links to resources with the same-origin.</li> - </ul> - </div> - </dd> - <dt>{{htmlattrdef("href")}}</dt> - <dd>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 <code>href</code> 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 <a href="/en-US/docs/HTML/Global_attributes#attr-id" title="Global attributes#attr-id">ID</a>) within the current document. URLs are not restricted to Web (HTTP)-based documents. URLs might use any protocol supported by the browser. For example, <code>file</code>, <code>ftp</code>, and <code>mailto</code> work in most user agents. - <div class="note"> - <p><strong>Note:</strong> You can use the special fragment "top" to create a link back to the top of the page; for example <code><a href="#top">Return to top</a></code>. <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid" lang="en" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid">This behavior is specified by HTML5</a>.</p> - </div> - </dd> - <dt>{{htmlattrdef("hreflang")}}</dt> - <dd>This attribute indicates the language of the linked resource. It is purely advisory. Allowed values are determined by <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> for HTML5 and by <a class="external" href="http://www.ietf.org/rfc/rfc1766.txt" title="http://www.ietf.org/rfc/rfc1766.txt">RFC1766</a> for HTML4. Use this attribute only if the {{htmlattrxref("href", "a")}} attribute is present.</dd> - <dt>{{htmlattrdef("media")}} {{HTMLVersionInline(5)}}</dt> - <dd>This attribute specifies the media which the linked resource applies to. Its value must be a <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">media query</a>. 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. - <div class="note"> - <p><strong>Usage note:</strong></p> - - <ul> - <li>In HTML 4, only simple white-space-separated list of media description literals, i.e. <a href="/en-US/docs/CSS/@media" title="https://developer.mozilla.org/en-US/docs/CSS/@media">media types and groups</a>, where defined and allowed as values for this attribute, like <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>, ... HTML 5 extended this to any kind of <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">media queries</a>, which are a superset of the allowed values of HTML 4.</li> - <li>Browsers not supporting the <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">CSS3 Media Queries</a> won't necessarily recognize the adequate link; do not forget to set fallback links, the restricted set of media queries defined in HTML 4.</li> - </ul> - </div> - </dd> - <dt>{{htmlattrdef("ping")}} {{HTMLVersionInline(5)}}</dt> - <dd>The 'ping' attribute, if present, sends the URLs of the resources a notification/ping if the user follows the hyperlink.</dd> - <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> - <dd>A string indicating which referrer to use when fetching the resource: - <ul> - <li><code>"no-referrer"</code> meaning that the <code>Referer:</code> header will not be sent.</li> - <li>"<code>no-referrer-when-downgrade</code>" meaning that no <code>Referer:</code> 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.</li> - <li><code>"origin"</code> meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.</li> - <li>"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. </li> - <li><code>"unsafe-url"</code> 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.</li> - </ul> - </dd> - <dt>{{htmlattrdef("rel")}}</dt> - <dd>For anchors containing the <strong>href</strong> attribute, this attribute specifies the relationship of the target object to the link object. The value is a space-separated list of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types">link types values</a>. 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 <strong>href</strong> attribute is present.</dd> - <dt>{{htmlattrdef("target")}}</dt> - <dd>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 <em>browsing context</em> (for example, tab, window, or inline frame). The following keywords have special meanings: - <ul> - <li><code>_self</code>: 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.</li> - <li><code>_blank</code>: Load the response into a new unnamed HTML4 window or HTML5 browsing context.</li> - <li><code>_parent</code>: 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 <code>_self</code>.</li> - <li><code>_top</code>: 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 <code>_self</code>.</li> - </ul> - Use this attribute only if the <strong>href</strong> attribute is present.</dd> - <dt>{{htmlattrdef("type")}}</dt> - <dd>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 <a class="linkification-ext external" href="http://www.w3.org/TR/html4/references.html#ref-MIMETYPES" title="Linkification: http://www.w3.org/TR/html4/references.html#ref-MIMETYPES">http://www.w3.org/TR/html4/references.html#ref-MIMETYPES</a>. Use this attribute only if the <code>href</code> attribute is present.</dd> -</dl> - -<h3 id="Obsolete">Obsolete</h3> - -<dl> - <dt>{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}</dt> - <dd>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 <a class="external" href="http://tools.ietf.org/html/rfc2045" title="http://tools.ietf.org/html/rfc2045">RFC 2045</a>. The default value is ISO-8859-1. - <div class="note"> - <p><strong>Usage note: </strong>This attribute is obsolete in HTML5 and <strong>should not be used by authors</strong>. To achieve its effect, use the HTTP Content-Type header on the linked resource.</p> - </div> - </dd> - <dt>{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> - <dd>For use with object shapes, this attribute uses a comma-separated list of numbers to define the coordinates of the object on the page.</dd> - <dt>{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> - <dd>This attribute is required in an anchor defining a target location within a page. A value for <strong>name</strong> is similar to a value for the <strong>id</strong> core attribute and should be an alphanumeric identifier unique to the document. Under the HTML 4.01 specification, <strong>id</strong> and <strong>name</strong> both can be used with the <a> element as long as they have identical values. - <div class="note"> - <p><strong>Usage note:</strong> This attribute is obsolete in HTML5, use <a href="/en-US/docs/HTML/Global_attributes#attr-id" title="HTML/Global attributes#id">global attribute <strong>id</strong></a> instead.</p> - </div> - </dd> - <dt>{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> - <dd>This attribute specifies a reverse link, the inverse relationship of the <strong>rel</strong> attribute. It is useful for indicating where an object came from, such as the author of a document.</dd> - <dt>{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> - <dd>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 <code>circle</code>, <code>default</code>, <code>polygon</code>, and <code>rect</code>. The format of the <strong>coords</strong> attribute depends on the value of shape. For <code>circle</code>, the value is <code>x,y,r</code> where <code>x</code> and <code>y</code> are the pixel coordinates for the center of the circle and <code>r</code> is the radius value in pixels. For <code>rect</code>, the <strong>coords</strong> attribute should be <code>x,y,w,h</code>. The <code>x,y</code> values define the upper-left-hand corner of the rectangle, while <code>w</code> and <code>h</code> define the width and height respectively. A value of <code>polygon</code> for <strong>shape</strong> requires <code>x1,y1,x2,y2,...</code> values for <strong>coords</strong>. Each of the <code>x,y</code> 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 <code>default</code> for shape requires that the entire enclosed area, typically an image, be used. - <div class="note"><strong>Note: </strong>It is advisable to use the <code>usemap</code> attribute for the {{HTMLElement("img")}} element and the associated {{HTMLElement("map")}} element to define hotspots instead of the <code>shape</code> attribute.</div> - </dd> -</dl> - -<h3 id="মানসম্মত_নয়">মানসম্মত নয়</h3> - -<dl> - <dt>{{htmlattrdef("datafld")}} {{Non-standard_inline}}</dt> - <dd>This attribute specifies the column name from that data source object that supplies the bound data. - <div class="note"> - <p><strong>Usage note: </strong>This attribute is non-standard and <strong>should not be used by authors</strong>. To achieve its effect, use scripting and a mechanism such as <a href="/en-US/docs/nsIXMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a> to populate the page dynamically</p> - </div> - - <table class="fullwidth-table"> - <tbody> - <tr> - <td rowspan="2">Support</td> - <td>Gecko</td> - <td>Presto</td> - <td>WebKit</td> - <td>Trident</td> - </tr> - <tr> - <td>Not implemented</td> - <td>Not implemented</td> - <td>Not implemented</td> - <td>IE4, IE5, IE6, IE7 (Removed in IE8)</td> - </tr> - <tr> - <td>Normative document</td> - <td colspan="4"><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533703%28VS.85%29.aspx">Microsoft's Data Binding: dataFld Property (MSDN)</a></td> - </tr> - </tbody> - </table> - </dd> - <dt>{{htmlattrdef("datasrc")}} {{Non-standard_inline}}</dt> - <dd>This attribute indicates the ID of the data source object that supplies the data that is bound to this element. - <div class="note"> - <p><strong>Usage note: </strong>This attribute is non-standard and <strong>should not be used by authors</strong>. To achieve its effect, use scripting and a mechanism such as <a href="/en-US/docs/nsIXMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a> to populate the page dynamically.</p> - </div> - - <table class="fullwidth-table"> - <tbody> - <tr> - <td rowspan="2">Support</td> - <td>Gecko</td> - <td>Presto</td> - <td>WebKit</td> - <td>Trident</td> - </tr> - <tr> - <td>Not implemented</td> - <td>Not implemented</td> - <td>Not implemented</td> - <td>IE4, IE5, IE6, IE7 (Removed in IE8)</td> - </tr> - <tr> - <td>Normative document</td> - <td colspan="4"><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533709(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms533709(VS.85).aspx">Microsoft's Data Binding: dataSrc Property (MSDN)</a></td> - </tr> - </tbody> - </table> - </dd> - <dt>{{htmlattrdef("methods")}} {{Non-standard_inline}}</dt> - <dd>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. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534168(VS.85).aspx">Methods Property (MSDN)</a></dd> -</dl> - -<dl> - <dt>{{htmlattrdef("urn")}} {{Non-standard_inline}}</dt> - <dd>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. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534710(VS.85).aspx">urn Property (MSDN)</a></dd> -</dl> - -<h2 id="উদাহরণ">উদাহরণ </h2> - -<h3 id="বহিঃ_ঠিকানায়_সংযোগ">বহিঃ ঠিকানায় সংযোগ </h3> - -<pre class="brush: html"><!-- anchor linking to external file --> -<a href="http://www.mozilla.com/"> -External Link -</a> -</pre> - -<h4 id="Result" name="Result">Result</h4> - -<p><a class="external" href="http://www.mozilla.com/">External Link</a></p> - -<h3 id="Creating_a_clickable_image">Creating a clickable image</h3> - -<p>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.</p> - -<pre class="brush: html"><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> -</pre> - -<h4 id="Result" name="Result">Result</h4> - -<figure> -<p>{{EmbedLiveSample("Creating_a_clickable_image", "320", "64")}}</p> -</figure> - -<h3 id="Creating_an_email_link">Creating an email link</h3> - -<p>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 <code>mailto</code> link. Here's a simple example:</p> - -<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a></pre> - -<p>This results in a link that looks like this: <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>.</p> - -<p>For additional details about the <code>mailto</code> URL scheme, such as how to include the subject, body, or other predetermined content, see <a href="/en-US/docs/Web/Guide/HTML/Email_links">Email links</a> or {{RFC(6068)}}.</p> - -<h3 id="Using_the_download_attribute_to_save_a_canvas_as_a_PNG">Using the download attribute to save a canvas as a PNG</h3> - -<p>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:</p> - -<pre class="brush: js"><strong style="color: #000066; font-weight: bold;">var</strong> link <span style="color: #339933;">=</span> document.<span style="color: #660066;">createElement</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'a'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> -link.<span style="color: #660066;">innerHTML</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'download image'</span><span style="color: #339933;">;</span> - -link.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span> <strong style="color: #000066; font-weight: bold;">function</strong><span style="color: #009900;">(</span>ev<span style="color: #009900;">)</span> <span style="color: #009900;">{</span> - link.<span style="color: #660066;">href</span> <span style="color: #339933;">=</span> canvas.<span style="color: #660066;">toDataURL</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> - link.<span style="color: #660066;">download</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">"mypainting.png"</span><span style="color: #339933;">;</span> -<span style="color: #009900;">}</span><span style="color: #339933;">,</span> <strong style="color: #003366; font-weight: bold;">false</strong><span style="color: #009900;">)</span><span style="color: #339933;">;</span> - -document.<span style="color: #660066;">body</span>.<span style="color: #660066;">appendChild</span><span style="color: #009900;">(</span>link<span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre> - -<p>You can see this in action <a href="http://jsfiddle.net/codepo8/V6ufG/2/">http://jsfiddle.net/codepo8/V6ufG/2/</a></p> - -<h2 id="Specifications" name="Specifications">স্পেসিফিকেশন</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> - <td>{{Spec2('Referrer Policy')}}</td> - <td>Added the <code>referrer</code> attribute.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '<a>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-a-element', '<a>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="ব্রাউসার_কম্পিটিয়েবিলিটি">ব্রাউসার কম্পিটিয়েবিলিটি</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.0")}} [1]</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>href="#top"</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("10.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>download</td> - <td>{{CompatChrome("14")}}</td> - <td>{{CompatGeckoDesktop("20.0")}}</td> - <td>Edge 13</td> - <td>{{CompatOpera("15")}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>ping</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}} [2]</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>referrerpolicy</code></td> - <td>{{CompatChrome(46.0)}} [3] </td> - <td>{{CompatGeckoDesktop("45")}} [4]</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.0")}} [1]</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>href="#top"</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("10.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>download</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("20.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>ping</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}} [2]</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>referrerpolicy</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(46.0)}} [3]</td> - <td>{{CompatGeckoMobile("45.0")}} [4]</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(46.0)}} [3]</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Starting from Gecko 41 {{geckoRelease("41.0")}}, {{HTMLElement("a")}} without <code>href</code> attribute is no more classified as interactive content. Clicking it inside {{HTMLElement("label")}} will activate labelled content ({{bug(1167816)}}).</p> - -<p>[2] <a href="http://kb.mozillazine.org/Browser.send_pings">Disabled by default</a></p> - -<p>[3] Implemented behind a flag.</p> - -<p>[4] From Firefox 42 to Firefox 44, the attribute was called <code>referrer</code>.</p> - -<h2 id="ক্লিক_করুন_ও_ফোকাস_করুন">ক্লিক করুন ও ফোকাস করুন </h2> - -<p>Whether clicking on an {{HTMLElement("a")}} causes it to (by default) become focused varies by browser and OS.</p> - -<table> - <caption>Does clicking on an {{HTMLElement("a")}} give it the focus?</caption> - <tbody> - <tr> - <td>Desktop Browsers</td> - <th>Windows 8.1</th> - <th>OS X 10.9</th> - </tr> - <tr> - <th>Firefox 30.0</th> - <td style="background-color: LawnGreen;">Yes</td> - <td style="background-color: LawnGreen;">Yes</td> - </tr> - <tr> - <th>Chrome ≥39<br> - (<a href="https://code.google.com/p/chromium/issues/detail?id=388666" title="Issue 388666: Focus anchor (A) elements on mousedown">Chromium bug 388666</a>)</th> - <td style="background-color: LawnGreen;">Yes</td> - <td style="background-color: LawnGreen;">Yes</td> - </tr> - <tr> - <th>Safari 7.0.5</th> - <td style="background-color: silver;">N/A</td> - <td style="background-color: yellow;">Only when it has a <code>tabindex</code></td> - </tr> - <tr> - <th>Internet Explorer 11</th> - <td style="background-color: LawnGreen;">Yes</td> - <td style="background-color: silver;">N/A</td> - </tr> - <tr> - <th>Presto (Opera 12)</th> - <td style="background-color: LawnGreen;">Yes</td> - <td style="background-color: LawnGreen;">Yes</td> - </tr> - </tbody> -</table> - -<table> - <caption>Does tapping on an {{HTMLElement("a")}} give it the focus?</caption> - <tbody> - <tr> - <td>Mobile Browsers</td> - <th>iOS 7.1.2</th> - <th>Android 4.4.4</th> - </tr> - <tr> - <th>Safari Mobile</th> - <td style="background-color: yellow;">Only when it has a <code>tabindex</code></td> - <td style="background-color: silver;">N/A</td> - </tr> - <tr> - <th>Chrome 35</th> - <td>???</td> - <td style="background-color: yellow;">Only when it has a <code>tabindex</code></td> - </tr> - </tbody> -</table> - -<h2 id="পাদটীকা">পাদটীকা</h2> - -<p>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.</p> - -<p>HTML 3.2 defines only <strong>name</strong>, <strong>href</strong>, <strong>rel</strong>, <strong>rev</strong>, and <strong>title</strong>.</p> - -<p>The <strong>target</strong> 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 <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> but is limited to frameset or transitional forms.</p> - -<h3 id="জাভাস্ক্রিপ্ট_রিকোমেন্ডিশন">জাভাস্ক্রিপ্ট রিকোমেন্ডিশন </h3> - -<p>It is often the case that an anchor tag is used with the <code>onclick</code> event. In order to prevent the page from refreshing, <strong>href</strong> 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.</p> - -<h2 id="আরও_দেখুন">আরও দেখুন </h2> - -<ul> - <li>Other elements conveying <a href="/en-US/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">text-level semantics</a>: {{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")}}.</li> -</ul> - -<div>{{HTMLRef}}</div> 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: <article> -slug: Web/HTML/Element/article -tags: - - Element - - HTML - - HTML sections - - HTML5 - - Reference - - Web -translation_of: Web/HTML/Element/article ---- -<p><em>HTML <code><article></code> এলিমেন্ট</em> ডকুমেন্ট, পেজ, অ্যাপ বা সাইটে একটি স্বয়ংসম্পূর্ণ প্রবন্ধ উপস্থাপন করে। এই প্রবন্ধটি স্বাধীনভাবে বিতরণযোগ্য বা পুনর্ব্যবহারযোগ্য, যেমনঃ syndication। এটা একটা ফোরাম পোস্ট হতে পারে, একটি ম্যাগাজিন বা পত্রিকার নিবন্ধ হতে পারে, একটি ব্লগ পোস্ট হতে পারে, মন্তব্য হতে পারে, একটি ইন্টারেক্টিভ উইজেট বা গ্যাজেট হতে পারে অথবা কন্টেন্ট এর একটি স্বাধীন উপকরণ হতে পারে।</p> -<div class="note"> - <p><strong>ব্যবহার নির্দেশিকাঃ</strong></p> - <ul> - <li>যখন একটি <code><article></code> এলিমেন্ট নেস্ট করা হয়, তখন ভেতরে থাকা এলিমেন্টটি একটি নিবন্ধ উপস্থাপন করে, যা বাইরের এলিমেন্টের সাথে সম্পর্কযুক্ত। উদাহরণ স্বরূপ, একটি ব্লগ পোস্টের কমেন্ট সমূহ <code><article></code> এলিমেন্টের মধ্যে নেস্ট করা <code><article></code> এলিমেন্ট হতে পারে, যেগুলো ব্লগ পোস্টটির সাথে সম্পর্কিত।</li> - <li><code><article></code> এলিমেন্টের লেখকের তথ্য {{HTMLElement("address")}} এলিমেন্টের মাধ্যমে দেয়া যায়, কিন্তু আমরা আগেই জেনেছি যে, <code><article></code> এর মধ্যে <code><address></code> এলিমেন্ট নেস্ট করা যাবেনা।</li> - <li><code><article> এলিমেন্টের </code>প্রকাশের তারিখ এবং সময় {{HTMLElement("time")}} এলিমেন্টের {{htmlattrxref("pubdate", "time")}} অ্যাট্রিবিউট ব্যবহার করে লেখা যাবে।</li> - </ul> -</div> -<ul class="htmlelt"> - <li><dfn><a class="new" href="/bn-BD/docs/Web/HTML/Content_categories">কন্টেন্ট ক্যাটাগরি</a></dfn> <a class="new" href="/bn-BD/docs/Web/HTML/Content_categories#Flow_content">ফ্লো কন্টেন্ট</a>, <a class="new" href="/docs/Web/HTML/Content_categories#Sectioning_content">সেকশনিং কন্টেন্ট</a>, পাল্পেবল কন্টেন্ট।</li> - <li><dfn>অনুমোদিত কন্টেন্ট</dfn><a class="new" href="/bn-BD/docs/Web/HTML/Content_categories#Flow_content">ফ্লো কন্টেন্ট</a></li> - <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> - <li><dfn>অনুমোদিত প্যারেন্ট এলিমেন্ট সমূহ</dfn> যেকোনো এলিমেন্ট, যা <a class="new" href="/bn-BD/docs/Web/HTML/Content_categories#Flow_content">ফ্লো কন্টেন্ট</a> সমর্থন করে। তবে খেয়াল রাখবেন, <code><article></code> এলিমেন্ট কে কখনো {{HTMLElement("address")}}এলিমেন্ট এর ভেতরে ব্যবহার করা যাবে না।</li> - <li><dfn>DOM ইন্টারফেস</dfn> {{domxref("HTMLElement")}}</li> -</ul> -<h2 id="অ্যাট্রিবিউট_সমূহ">অ্যাট্রিবিউট সমূহ</h2> -<p>এই এলিমেন্টের মধ্যে শুধু <a class="new" href="/bn-BD/docs/Web/HTML/Global_attributes">গ্লোবাল অ্যাট্রিবিউট সমূহ</a> ব্যবহার করা যাবে।</p> -<h2 id="উদাহরণ">উদাহরণ</h2> -<pre class="brush: html"><article> - <h4>A really awesome article</h4> - <p>Lots of awesome text.</p> -</article> -</pre> -<h2 id="Specifications" name="Specifications">Specifications</h2> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'sections.html#the-article-element', '<article>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - </tbody> -</table> -<h2 id="ব্রাউজার_কম্প্যাটিবিলিটি">ব্রাউজার কম্প্যাটিবিলিটি</h2> -<p>{{CompatibilityTable}}</p> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>ফিচার</th> - <th>ক্রোম</th> - <th>ফায়ারফক্স (গেকো)</th> - <th>ইন্টারনেট এক্সপ্লোরার</th> - <th>অপেরা</th> - <th>সাফারি</th> - </tr> - <tr> - <td>মৌলিক সমর্থন</td> - <td>৫</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>৯.০</td> - <td>১১.১০</td> - <td>৪.১</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>ফিচার</th> - <th>অ্যান্ড্রয়েড</th> - <th>ফায়ারফক্স মোবাইল (গেকো)</th> - <th>ইন্টারনেট এক্সপ্লোরার মোবাইল</th> - <th>অপেরা মোবাইল</th> - <th>সাফারি মোবাইল</th> - </tr> - <tr> - <td>মৌলিক সমর্থন</td> - <td>২.২</td> - <td>{{CompatGeckoMobile("2.0")}}</td> - <td>৯.০</td> - <td>১১.০</td> - <td>৫.০ (iOS ৪.২)</td> - </tr> - </tbody> - </table> -</div> -<h2 id="আরও_দেখুন">আরও দেখুন</h2> -<ul> - <li><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")}}</li> - <li class="last"><a class="deki-ns current" href="/bn-BD/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li> -</ul> -<p>{{ HTMLRef }}</p> 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 ---- -<h2 id="সংক্ষিপ্ত"> <span class="short_text" id="result_box" lang="bn"><span class="hps">সংক্ষিপ্ত</span></span></h2> - -<p> </p> - -<div class="almost_half_cell" id="gt-res-content"> -<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="bn"><span class="hps">এইচ টি এম এল</span> <span class="atn hps"><</span><span>বি</span><span>></span> <span class="hps">এলিমেন্ট</span> <span class="hps">কোন</span> <span class="hps">বিশেষ</span> <span class="hps">গুরুত্ব বা প্রাসঙ্গিকতা</span> <span class="hps">conveying</span> <span class="hps">ছাড়াই</span> <span class="hps">স্বাভাবিক</span> <span class="hps">টেক্সট</span> <span class="hps">থেকে</span> <span class="hps">শৈলীগত</span> <span class="hps">বিভিন্ন</span> <span class="hps">লেখার একটা</span> <span class="hps">স্প্যান</span> <span class="hps">প্রতিনিধিত্ব করে।</span> <span class="hps">এটা</span> <span class="hps">সাধারণত</span> <span class="hps">একটি</span> <span class="hps">সারসংক্ষেপ</span> <span class="hps">মধ্যে কীওয়ার্ড</span><span>, পণ্যের নাম</span> <span class="hps">একটি পর্যালোচনা</span><span>,</span> <span class="hps">বা</span> <span class="hps">যার</span> <span class="hps">সাধারণত</span> <span class="hps">উপস্থাপনা</span> <span class="hps">boldfaced</span> <span class="hps">হবে</span>। <span class="hps">টেক্সট</span> <span class="hps">অন্য</span> <span class="hps">ঘটনাকাল জন্য</span> <span class="hps">ব্যবহার করা হয়</span><span>। </span><span class="hps">তার</span> <span class="hps">ব্যবহারের</span> <span class="hps">আরেকটি</span> <span class="hps">উদাহরণ হল একটি</span> <span class="hps">প্রবন্ধের</span> <span class="hps">প্রতিটি</span> <span class="hps">অনুচ্ছেদের</span> <span class="hps">নেতৃত্ব</span> <span class="hps">বাক্য চিহ্নিত</span> <span class="hps">করা হয়</span><span>।</span></span></div> -</div> - -<div class="note"> -<p><strong>Usage notes:</strong></p> - -<ul> - <li>Do not confuse the <code><b></code> element with the {{HTMLElement("strong")}}, {{HTMLElement("em")}}, or {{HTMLElement("mark")}} elements. The {{HTMLElement("strong")}} element represents text of certain <em>importance</em>, {{HTMLElement("em")}} puts some emphasis on the text and the {{HTMLElement("mark")}} element represents text of certain <em>relevance</em>. The <code><b></code> element doesn't convey such special semantic information; use it only when no others fit.</li> - <li>Similarly, do not mark titles and headings using the <code><b></code> 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 <em>necessaril</em><em>y</em><em> </em>displayed in bold.</li> - <li>It is a good practice to use the <strong>class</strong> attribute on the <code><b></code> in order to convey additional semantic information (for example <code><b class="lead"></code> 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.</li> - <li>Historically, the <code><b></code> element was meant to make text boldface. Styling information has been deprecated since HTML4, so the meaning of the <code><b></code> element has been changed.</li> - <li>If there is no semantic purpose on using the <b> element, using css property <a href="/en-US/docs/CSS/font-weight" title="font-weight">font-weight</a> with bold value would be a better choice for making text bold.</li> -</ul> -</div> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> - <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Permitted parent elements</th> - <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <a href="/en-US/docs/DOM/span" title="DOM/span"><code>HTMLSpanElement</code></a> interface for this element.</td> - </tr> - </tbody> -</table> - -<h2 id="আরোপ_করা"> <span class="short_text" id="result_box" lang="bn"><span class="hps">আরোপ করা</span></span></h2> - -<p><span class="short_text" id="result_box" lang="bn"><span class="hps">এই</span> <span class="hps">উপাদান</span> <span class="hps">শুধুমাত্র</span> <span class="hps">গ্লোবাল</span> <span class="hps">গুণাবলী</span>তে <span class="hps">রয়েছে</span><span>।</span></span></p> - -<h2 id="উদাহরণ"> <span class="short_text" id="result_box" lang="bn"><span class="hps">উদাহরণ</span></span></h2> - -<pre class="brush: html"><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. -</pre> - -<h3 id="ফল"> <span class="short_text" id="result_box" lang="bn"><span class="hps">ফল</span></span></h3> - -<p> </p> - -<p><span id="result_box" lang="bn"><span class="hps">এই নিবন্ধটি</span> <span class="hps">কয়েকটি</span> <span class="hps">টেক্সট</span><span class="atn">-</span><span>স্তরের উপাদান</span> <span class="hps">বর্ণ।</span><span class="hps">এটি একটি এইচ টি এম এল</span> <span class="hps">নথিতে</span> <span class="hps">তাদের</span> <span class="hps">ব্যবহার</span> <span class="hps">ব্যাখ্যা</span><span>।</span><br> - <br> - <span class="hps">মূলশব্দ</span> <span class="hps">গাঢ়</span> <span class="hps">সম্ভবত</span> <span class="atn hps"><</span><span>বি</span><span>></span> <span class="hps">উপাদান</span><span>,</span> <span class="hps">এর</span> <span class="hps">ডিফল্ট</span> <span class="hps">শৈলী সঙ্গে</span> <span class="hps">প্রদর্শিত হয়</span><span>।</span></span></p> - -<h2 id="Specifications" name="Specifications"> <span class="short_text" id="result_box" lang="bn"><span class="hps">বিশেষ উল্লেখ</span></span></h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-b-element', '<b>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-b-element', '<b>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="ব্রাউজার_উপযুক্ততা"> <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্রাউজার</span> <span class="hps">উপযুক্ততা</span></span></h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="আরো_দেখুন"> <span class="short_text" id="result_box" lang="bn"><span class="hps">আরো দেখুন</span></span></h2> - -<ul> - <li>Others elements conveying <a href="/en-US/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">text-level semantics</a>: {{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")}}.</li> - <li><a class="external" href="http://www.w3.org/International/questions/qa-b-and-i-tags">Using <b> and <i> elements (W3C)</a></li> -</ul> - -<div>{{HTMLRef}}</div> 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: <blockquote> -slug: Web/HTML/Element/blockquote -tags: - - এইচ টি এম এল -translation_of: Web/HTML/Element/blockquote ---- -<h2 id="সংক্ষিপ্ত"> <span class="short_text" id="result_box" lang="bn"><span class="hps">সংক্ষিপ্ত</span></span></h2> - -<p> <span id="result_box" lang="bn"><span class="hps">এইচ টি এম এল</span> <span class="atn hps"><</span><span>blockquote</span><span>></span> <span class="hps">এলিমেন্ট</span> <span class="atn hps">(</span><span>বা</span> <span class="hps">এইচ টি এম এল</span> <span class="hps">ব্লক</span> <span class="hps">উদ্ধৃতি</span> <span class="hps">এলিমেন্ট</span><span>)</span> <span class="hps">ঘিরা টেক্সট</span> <span class="hps">বর্ধিত</span> <span class="hps">উদ্ধৃতি</span> <span class="hps">যে ইঙ্গিত দেয়।</span><span class="hps">সাধারণত</span><span>,</span> <span class="hps">এই</span> <span class="atn hps">(</span><span>এটি পরিবর্তন</span> <span class="hps">করার জন্যে</span> <span class="hps">নোট দেখুন</span><span>)</span> <span class="hps">খাঁজ</span> <span class="hps">দ্বারা</span> <span class="hps">দৃশ্যত</span> <span class="hps">অনুষ্ঠিত</span> <span class="hps">হয়</span><span>।</span><span class="hps">উৎস</span> <span class="hps">একটি</span> <span class="hps">টেক্সট উপস্থাপনা</span> <span class="atn hps">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>cite</span><span>"</span><span>)</span><span>}</span><span>}</span> <span class="hps">উপাদান</span> <span class="hps">ব্যবহার</span> <span class="hps">দেওয়া যেতে পারে</span><span>, যখন</span> <span class="hps">উদ্ধৃতি</span> <span class="hps">উৎস</span> <span class="hps">জন্য একটি URL</span><span>,</span> <span class="hps">অ্যাট্রিবিউট</span> <span class="hps">cite</span> <span class="hps">ব্যবহার</span> <span class="hps">দেওয়া হতে পারে।</span></span></p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> - <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, sectioning root, palpable content.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">Flow content</a>.</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Permitted parent elements</th> - <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">flow content</a>.</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLQuoteElement")}}</td> - </tr> - </tbody> -</table> - -<p> </p> - -<p><span class="short_text" id="result_box" lang="bn"><span class="hps">আরোপ করা</span><br> - <br> - <span class="hps">এই</span> <span class="hps">উপাদান</span> <span class="hps">গ্লোবাল</span> <span class="hps">গুণাবলী</span> <span class="hps">রয়েছে</span><span>।</span></span></p> - -<dl> - <dt>{{htmlattrdef("cite")}}</dt> - <dd> <span id="result_box" lang="bn"><span class="hps">উদ্ধৃত</span> <span class="hps">তথ্যের জন্য একটি</span> <span class="hps">উৎস নথি</span> <span class="hps">বা</span> <span class="hps">বার্তা</span> <span class="hps">মনোনীত</span> <span class="hps">যে একটি URL</span><span>।</span> <span class="hps">এই বৈশিষ্ট্য</span> <span class="hps">কনটেক্সট</span> <span class="hps">বা</span> <span class="hps">উক্তি</span>র <span class="hps">রেফারেন্স</span> <span class="hps">ব্যাখ্যা</span> <span class="hps">তথ্য</span> <span class="hps">নির্দেশ করার </span><span class="hps"> উদ্দেশ্যে করা হচ্ছে</span><span>।</span></span></dd> -</dl> - -<h2 id="উদাহরণ"> <span class="short_text" id="result_box" lang="bn"><span class="hps">উদাহরণ</span></span></h2> - -<pre class="brush: html"><blockquote cite="http://developer.mozilla.org"> - <p>This is a quotation taken from the Mozilla Developer Center.</p> -</blockquote> -</pre> - -<p> <span class="short_text" id="result_box" lang="bn"><span class="hps">এইচ টি এম এল</span> <span class="hps">কোডের </span><span class="hps">আউটপুট</span> <span class="hps">উপরে</span><span>:</span></span></p> - -<blockquote cite="http://developer.mozilla.org"> -<p>This is a quotation taken from the Mozilla Developer Center.</p> -</blockquote> - -<h2 id="Specifications" name="Specifications"><span class="short_text" id="result_box" lang="bn"><span class="hps">বিশেষ উল্লেখ</span></span></h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'semantics.html#the-blockquote-element', '<blockquote>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '<blockquote>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<blockquote>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="ব্রাউজার_উপযুক্ততা"> <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্রাউজার</span> <span class="hps">উপযুক্ততা</span></span></h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="নোট"> <span class="short_text" id="result_box" lang="bn"><span class="hps">নোট</span></span></h2> - -<p> </p> - -<p><span id="result_box" lang="bn"><span class="atn hps"><</span><span>Blockquote</span><span>></span> <span class="hps">ইন্ডেন্ট</span> সি এস এস<span class="hps"> কোড ব্যবহার</span> <span class="atn hps">{</span><span class="atn">{</span><span>cssxref</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>মার্জিন</span><span>"</span><span>)</span><span>}</span><span>}</span> <span class="hps">সম্পত্তি পরিবর্তন করতে</span><span>।</span><br> - <br> - <span class="hps">স্বল্প</span> <span class="hps">কোট</span> <span class="atn hps">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>Q</span><span>"</span><span>)</span><span>}</span><span>}</span> <span class="hps">উপাদান</span> <span class="hps">ব্যবহার করার জন্য।</span></span></p> - -<p> </p> - -<p><span id="result_box" lang="bn"><span class="hps">আরো দেখুন</span><br> - <br> - <span class="hps">ইনলাইন</span> <span class="hps">উদ্ধৃতি</span> <span class="hps">জন্য</span> <span class="atn hps">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>Q</span><span>"</span><span>)</span><span>}</span><span>}</span> <span class="hps">উপাদান</span><span>।</span><br> - <span class="hps">উৎস</span> <span class="hps">উদ্ধৃতির</span> <span class="hps">জন্য</span> <span class="atn hps">{</span><span class="atn">{</span><span>HTMLElement</span><span>}</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>cite</span><span>"</span><span>)</span><span>}</span> <span class="hps">উপাদান</span><span>।</span><br> - <br> - <span class="atn hps">{</span><span class="atn">{</span><span>}}</span> <span class="hps">HTMLRef</span></span></p> 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 ---- -<p>যেসব <strong>HTML এলিমেন্ট</strong>, HTML5 অথবা এর আগের কোন সংস্করণে ছিল, তাদের প্রত্যেককে এই পাতায় লিস্ট করা হয়েছে। যখন কোন এলিমেন্ট কে <em>এঙ্গেল ব্র্যাকেটের</em> ভেতর লেখা হয়, তখন তাদেরকে HTML ট্যাগ বলে, যেমনঃ <code><elementname></code>। কীভাবে একটা HTML পেইজ/ডকুমেন্ট তৈরি করা হবে, আর এই পেইজের কোন অংশে কি ধরণের কন্টেন্ট বসানো হবে তা নির্ধারিত হয় এইসব HTML এলিমেন্ট দিয়েই।</p> -<p>এই পাতায় সব স্ট্যান্ডার্ড HTML ট্যাগকে লিস্ট করা হয়েছে। নতুন HTML5 ট্যাগ আর পুরনো ট্যাগ (স্ট্যান্ডার্ড না এমন ট্যাগ আর বাতিল হয়ে যাওয়া ট্যাগও রয়েছে) সবগুলোকেই লিস্ট করা হয়েছে এখানে। যেসব এলিমেন্ট <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a> এ নতুন এসেছে তাদেরকে প্রায়ই নতুন HTML5 এলিমেন্ট বলা হয়, যদিও আগের স্ট্যান্ডার্ড এলিমেন্টগুলোও HTML5 এ কাজ করে।</p> -<p>In an HTML document, an element is defined by a <em>starting tag</em>. If the element contains other content, it ends with a <em>closing tag</em>, where the element name is preceded by a forward slash: <code></elementname></code>. Some elements don't need to be closed, such as image elements. These are known as <em>void</em> elements. HTML documents contain a tree of these elements. Each is named to represent what it does. For example, the <code><title></code> element represents the title of the document. Below is an alphabetical list of the HTML Elements.</p> -<div class="index widgeted"> - <span id="A">A</span> - <ul> - <li>{{ HTMLElement("a") }}</li> - <li>{{ HTMLElement("abbr") }}</li> - <li><s class="obsoleteElement">{{ HTMLElement("acronym") }}</s></li> - <li>{{ HTMLElement("address") }}</li> - <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("applet") }}</s></li> - <li>{{ HTMLElement("area") }}</li> - <li class="html5">{{ HTMLElement("article") }}</li> - <li class="html5">{{ HTMLElement("aside") }}</li> - <li class="html5">{{ HTMLElement("audio") }}</li> - </ul> - <span id="B">B</span> - <ul> - <li>{{ HTMLElement("b") }}</li> - <li>{{ HTMLElement("base") }}</li> - <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("basefont") }}</s></li> - <li class="html5">{{ HTMLElement("bdi") }}</li> - <li>{{ HTMLElement("bdo") }}</li> - <li><s class="nonStdElement">{{ HTMLElement("bgsound") }}</s></li> - <li><s class="obsoleteElement">{{ HTMLElement("big") }}</s></li> - <li><s class="nonStdElement">{{ HTMLElement("blink") }}</s></li> - <li>{{ HTMLElement("blockquote") }}</li> - <li>{{ HTMLElement("body") }}</li> - <li>{{ HTMLElement("br") }}</li> - <li>{{ HTMLElement("button") }}</li> - </ul> - <span id="C">C</span> - <ul> - <li class="html5">{{ HTMLElement("canvas") }}</li> - <li>{{ HTMLElement("caption") }}</li> - <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("center") }}</s></li> - <li>{{ HTMLElement("cite") }}</li> - <li>{{ HTMLElement("code") }}</li> - <li>{{ HTMLElement("col") }}</li> - <li>{{ HTMLElement("colgroup") }}</li> - <li class="html5">{{ HTMLElement("command") }}</li> - </ul> - <span id="D">D</span> - <ul> - <li class="html5">{{ HTMLElement("data") }}</li> - <li class="html5">{{ HTMLElement("datalist") }}</li> - <li>{{ HTMLElement("dd") }}</li> - <li>{{ HTMLElement("del") }}</li> - <li class="html5">{{ HTMLElement("details") }}</li> - <li>{{ HTMLElement("dfn") }}</li> - <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("dir") }}</s></li> - <li>{{ HTMLElement("div") }}</li> - <li>{{ HTMLElement("dl") }}</li> - <li>{{ HTMLElement("dt") }}</li> - </ul> - <span id="E">E</span> - <ul> - <li>{{ HTMLElement("em") }}</li> - <li class="html5">{{ HTMLElement("embed") }}</li> - </ul> - <span id="F">F</span> - <ul> - <li>{{ HTMLElement("fieldset") }}</li> - <li>{{ HTMLElement("figcaption") }}</li> - <li class="html5">{{ HTMLElement("figure") }}</li> - <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("font") }}</s></li> - <li class="html5">{{ HTMLElement("footer") }}</li> - <li>{{ HTMLElement("form") }}</li> - <li><s class="obsoleteElement">{{ HTMLElement("frame") }}</s></li> - <li><s class="obsoleteElement">{{ HTMLElement("frameset") }}</s></li> - </ul> - <span id="G">G H</span> - <ul> - <li>{{ HTMLElement("h1") }}</li> - <li>{{ HTMLElement("h2") }}</li> - <li>{{ HTMLElement("h3") }}</li> - <li>{{ HTMLElement("h4") }}</li> - <li>{{ HTMLElement("h5") }}</li> - <li>{{ HTMLElement("h6") }}</li> - <li>{{ HTMLElement("head") }}</li> - <li class="html5">{{ HTMLElement("header") }}</li> - <li class="html5">{{ HTMLElement("hgroup") }}</li> - <li>{{ HTMLElement("hr") }}</li> - <li>{{ HTMLElement("html") }}</li> - </ul> - <span id="I">I</span> - <ul> - <li>{{ HTMLElement("i") }}</li> - <li>{{ HTMLElement("iframe") }}</li> - <li>{{ HTMLElement("img") }}</li> - <li>{{ HTMLElement("input") }}</li> - <li>{{ HTMLElement("ins") }}</li> - <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("isindex") }}</s></li> - </ul> - <span id="J">J K</span> - <ul> - <li>{{ HTMLElement("kbd") }}</li> - <li class="html5">{{ HTMLElement("keygen") }}</li> - </ul> - <span id="L">L</span> - <ul> - <li>{{ HTMLElement("label") }}</li> - <li>{{ HTMLElement("legend") }}</li> - <li>{{ HTMLElement("li") }}</li> - <li>{{ HTMLElement("link") }}</li> - <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("listing") }}</s></li> - </ul> - <span id="M">M</span> - <ul> - <li class="html5">{{HTMLElement("main")}}</li> - <li>{{ HTMLElement("map") }}</li> - <li class="html5">{{ HTMLElement("mark") }}</li> - <li><s class="nonStdElement">{{ HTMLElement("marquee") }}</s></li> - <li class="html5">{{ HTMLElement("menu") }}</li> - <li>{{ HTMLElement("meta") }}</li> - <li class="html5">{{ HTMLElement("meter") }}</li> - </ul> - <span id="N">N</span> - <ul> - <li class="html5">{{ HTMLElement("nav") }}</li> - <li><s class="nonStdElement">{{ HTMLElement("nobr") }}</s></li> - <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("noframes") }}</s></li> - <li>{{ HTMLElement("noscript") }}</li> - </ul> - <span id="O">O</span> - <ul> - <li>{{ HTMLElement("object") }}</li> - <li>{{ HTMLElement("ol") }}</li> - <li>{{ HTMLElement("optgroup") }}</li> - <li>{{ HTMLElement("option") }}</li> - <li class="html5">{{ HTMLElement("output") }}</li> - </ul> - <span id="P">P</span> - <ul> - <li>{{ HTMLElement("p") }}</li> - <li>{{ HTMLElement("param") }}</li> - <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("plaintext") }}</s></li> - <li>{{ HTMLElement("pre") }}</li> - <li class="html5">{{ HTMLElement("progress") }}</li> - </ul> - <span id="Q">Q</span> - <ul> - <li>{{ HTMLElement("q") }}</li> - </ul> - <span id="R">R</span> - <ul> - <li class="html5">{{ HTMLElement("rp") }}</li> - <li class="html5">{{ HTMLElement("rt") }}</li> - <li class="html5">{{ HTMLElement("ruby") }}</li> - </ul> - <span id="S">S</span> - <ul> - <li>{{ HTMLElement("s") }}</li> - <li>{{ HTMLElement("samp") }}</li> - <li>{{ HTMLElement("script") }}</li> - <li class="html5">{{ HTMLElement("section") }}</li> - <li>{{ HTMLElement("select") }}</li> - <li>{{ HTMLElement("small") }}</li> - <li class="html5">{{ HTMLElement("source") }}</li> - <li><s class="nonStdElement">{{ HTMLElement("spacer") }}</s></li> - <li>{{ HTMLElement("span") }}</li> - <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("strike") }}</s></li> - <li>{{ HTMLElement("strong") }}</li> - <li>{{ HTMLElement("style") }}</li> - <li>{{ HTMLElement("sub") }}</li> - <li class="html5">{{ HTMLElement("summary") }}</li> - <li>{{ HTMLElement("sup") }}</li> - </ul> - <span id="T">T</span> - <ul> - <li>{{ HTMLElement("table") }}</li> - <li>{{ HTMLElement("tbody") }}</li> - <li>{{ HTMLElement("td") }}</li> - <li>{{ HTMLElement("textarea") }}</li> - <li>{{ HTMLElement("tfoot") }}</li> - <li>{{ HTMLElement("th") }}</li> - <li>{{ HTMLElement("thead") }}</li> - <li class="html5">{{ HTMLElement("time") }}</li> - <li>{{ HTMLElement("title") }}</li> - <li>{{ HTMLElement("tr") }}</li> - <li class="html5">{{ HTMLElement("track") }}</li> - <li><s class="obsoleteElement">{{ HTMLElement("tt") }}</s></li> - </ul> - <span id="U">U</span> - <ul> - <li>{{ HTMLElement("u") }}</li> - <li>{{ HTMLElement("ul") }}</li> - </ul> - <span id="V">V</span> - <ul> - <li>{{ HTMLElement("var") }}</li> - <li class="html5">{{ HTMLElement("video") }}</li> - </ul> - <span id="W">W</span> - <ul> - <li class="html5">{{ HTMLElement("wbr") }}</li> - </ul> - <span id="X">X Y Z </span> - <ul> - <li><span id="X"><s class="obsoleteElement deprecatedElement">{{ HTMLElement("xmp") }}</s></span></li> - </ul> -</div> -<p>The symbol <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="width: 16px; height: 16px; vertical-align: middle;" title="This element has been added in HTML5"></a> 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.</p> 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: <section> -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 ---- -<h2 id="সারাংশ">সারাংশ</h2> - -<p><em>HTML সেকশন এলিমেন্ট</em> (<code><section></code>) একটি ডকুমেন্ট এর কিছু অংশকে নির্দিষ্ট করে। যেমনঃ শিরোনাম সহ কিছু কন্টেন্ট।</p> - -<div class="note"> -<p><em>ব্যবহার নির্দেশিকাঃ</em></p> - -<ul> - <li>যদি একটি {{HTMLElement("section")}} এর কন্টেন্ট আলাদাভাবে চিহ্নিত করার প্রয়োজন হয়, তাহলে {{HTMLElement("article")}} এলিমেন্ট ব্যবহার করতে পারেন।</li> - <li>সাধারন কন্টেইনার হিসেবে {{HTMLElement("section")}} এলিমেন্ট ব্যবহার করবেন না; সাধারন কন্টেইনার হিসেবে ব্যবহার করার জন্য{{HTMLElement("div")}} এলিমেন্ট রয়েছে। সহজ কথায়, সেকশন শুধু একটি ডকুমেন্ট এর আউটলাইন তৈরিতে ব্যবহার করা যাবে।</li> -</ul> -</div> - -<ul class="htmlelt"> - <li><dfn><a href="/bn-BD/docs/Web/HTML/Content_categories">কন্টেন্ট ক্যাটাগরি</a></dfn><a href="/bn-BD/docs/Web/HTML/Content_categories#Flow_content">ফ্লো কন্টেন্ট</a>, <a href="/bn-BD/docs/Web/HTML/Content_categories#Sectioning_content">সেকশনিং কন্টেন্ট</a>, পাল্পেবল কন্টেন্ট।</li> - <li><dfn>অনুমোদিত কন্টেন্ট</dfn> <a href="/bn-BD/docs/Web/HTML/Content_categories#Flow_content">ফ্লো কন্টেন্ট</a></li> - <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> - <li><dfn>অনুমোদিত প্যারেন্ট এলিমেন্ট সমূহ</dfn> যেকোনো এলিমেন্ট, যা <a href="/bn-BD/docs/Web/HTML/Content_categories#Flow_content">ফ্লো কন্টেন্ট</a> সমর্থন করে। তবে খেয়াল রাখবেন, {{HTMLElement("section")}} এলিমেন্ট কে কখনো {{HTMLElement("address")}} এলিমেন্ট এর ভেতরে ব্যবহার করা যাবে না।</li> - <li><dfn>DOM ইন্টারফেস</dfn> {{domxref("HTMLElement")}}</li> -</ul> - -<h2 id="অ্যাট্রিবিউট_সমূহ">অ্যাট্রিবিউট সমূহ</h2> - -<p>এই এলিমেন্টের মধ্যে শুধু <a href="/bn-BD/docs/Web/HTML/Global_attributes">গ্লোবাল অ্যাট্রিবিউট সমূহ</a> ব্যবহার করা যাবে।</p> - -<h2 id="উদাহরণ">উদাহরণ</h2> - -<pre class="brush: html"><section> - <h1>Heading</h1> - <p>Bunch of awesome content</p> -</section> -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comments</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="ব্রাউজার_কম্প্যাটিবিলিটি">ব্রাউজার কম্প্যাটিবিলিটি</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>ফিচার</th> - <th>ক্রোম</th> - <th>ফায়ারফক্স (গেকো)</th> - <th>ইন্টারনেট এক্সপ্লোরার</th> - <th>অপেরা</th> - <th>সাফারি</th> - </tr> - <tr> - <td>মৌলিক সমর্থন</td> - <td>৫</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>৯.০</td> - <td>১১.১০</td> - <td>৪.১</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>ফিচার</th> - <th>অ্যান্ড্রয়েড</th> - <th>ফায়ারফক্স মোবাইল (গেকো)</th> - <th>ইন্টারনেট এক্সপ্লোরার মোবাইল</th> - <th>অপেরা মোবাইল</th> - <th>সাফারি মোবাইল</th> - </tr> - <tr> - <td>মৌলিক সমর্থন</td> - <td>২.২</td> - <td>{{CompatGeckoMobile("2.0")}}</td> - <td>৯.০</td> - <td>১১.০</td> - <td>৫.০ (iOS ৪.২)</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="আরও_দেখুন">আরও দেখুন</h2> - -<ul> - <li>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")}};</li> - <li><a href="/bn-BD/docs/Sections_and_Outlines_of_an_HTML5_document">Sections and outlines of an HTML5 document</a>.</li> -</ul> - -<div>{{HTMLRef}}</div> 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: <summary> -slug: Web/HTML/Element/summary -tags: - - এইচ টি এম এল -translation_of: Web/HTML/Element/summary ---- -<p>{{SeeCompatTable}}</p> - -<p> </p> - -<p><span id="result_box" lang="bn"><span class="hps">সংক্ষিপ্ত</span><br> - <br> - <span class="hps">এইচ টি এম এল</span> <span class="hps">সারসংক্ষেপ</span> <span class="hps">উপাদান</span> <span class="atn hps">(</span><span class="atn"><</span><span>সারসংক্ষেপ</span><span>></span><span>)</span> <span class="hps">একটি</span> <span class="atn hps">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>বিবরণ</span><span>"</span><span>)</span><span>}</span><span>}</span> <span class="hps">উপাদান</span> <span class="hps">বিষয়বস্তুর জন্য</span> <span class="hps">একটি</span> <span class="hps">সারসংক্ষেপ</span><span>,</span> <span class="hps">ক্যাপশন</span><span>,</span> <span class="hps">অথবা</span> <span class="hps">লেজেন্ড</span> <span class="hps">হিসেবে</span> <span class="hps">ব্যবহার করা হয়</span><span>।</span><br> - <span class="hps">উল্লেখ্য</span><span>:</span> <span class="atn hps"><</span><span>সারসংক্ষেপ</span><span>></span> <span class="hps">উপাদান</span> <span class="hps">বাদ দেওয়া হয়</span><span>, তাহলে</span> <span class="hps">শিরোনাম</span> <span class="atn hps">"</span><span>বিবরণ</span><span>"</span> <span class="hps">ব্যবহার করা</span> <span class="hps">হবে</span><span>।</span></span></p> - -<h2 id="ব্যবহারের_প্রেক্ষাপট"> <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্যবহারের</span> <span class="hps">প্রেক্ষাপট</span></span></h2> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Permitted content</th> - <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">Phrasing content</a> or one element of <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Heading_content" title="en/HTML/Content categories#Heading content">Heading content</a></td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>None, both the start tag and the end tag are mandatory.</td> - </tr> - <tr> - <th scope="row">Permitted parent element</th> - <td>The {{ HTMLElement("details") }} element.</td> - </tr> - <tr> - <th scope="row">Normative document</th> - <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-summary-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-summary-element">HTML5, section 4.11.2</a></td> - </tr> - </tbody> -</table> - -<h2 id="আরোপ_করা"> <span class="short_text" id="result_box" lang="bn"><span class="hps">আরোপ করা</span></span></h2> - -<p> <span class="short_text" id="result_box" lang="bn"><span class="hps">এই</span> <span class="hps">উপাদান</span> <span class="hps">শুধুমাত্র</span> <span class="hps">গ্লোবাল</span> <span class="hps">গুণাবলী</span> <span class="hps">রয়েছে</span><span>।</span></span></p> - -<p> </p> - -<p><span id="result_box" lang="bn"><span class="hps">ডি ও এম </span> <span class="hps">ইন্টারফেস</span><br> - <br> - <span class="hps">এই</span> <span class="hps">উপাদান</span> <span class="atn hps">{</span><span class="atn">{</span><span>domxref</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>HTMLElement</span><span>"</span><span>)</span><span>}</span><span>}</span> <span class="hps">ইন্টারফেস এবং কার্যকরী</span><span>।</span></span></p> - -<p> </p> - -<p><span class="short_text" id="result_box" lang="bn"><span class="hps">উদাহরণ</span></span><br> - <br> - </p> - -<p><span class="short_text" id="result_box" lang="bn"><span class="hps">সঙ্কলন</span><span>, পরের</span> <span class="hps">লাইন</span> <span class="hps">লিঙ্ক থেকে</span> <span class="hps">বিবরণ</span> <span class="hps">পেতে</span></span></p> - -<details style="color: blue; margin-left: 15px; margin-bottom: 10px;"> </details> - -<p> <span id="result_box" lang="bn"><span class="atn hps"><</span><span>সারসংক্ষেপ</span><span>></span> <span class="hps">উপর</span> <span class="hps">উদাহরণ</span> <span class="hps">জন্য</span> <span class="atn hps">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>বিবরণ</span><span>"</span><span>)</span><span>}</span><span>}</span> <span class="hps">পাতাটি দেখুন।</span></span></p> - -<h2 id="Specifications" name="Specifications"> <span class="short_text" id="result_box" lang="bn"><span class="hps">বিশেষ উল্লেখ</span></span></h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="ব্রাউজার_উপযুক্ততা"> <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্রাউজার</span> <span class="hps">উপযুক্ততা</span></span></h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>12</td> - <td>{{ CompatNo}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>4.0</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{ CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Gecko doesn't currently implement this. See {{bug(591737)}}.</p> - -<h2 id="আরো_দেখুন"> <span class="short_text" id="result_box" lang="bn"><span class="hps">আরো দেখুন</span></span></h2> - -<ul> - <li>{{ HTMLElement("details") }}</li> -</ul> - -<div class="noinclude">{{HTMLRef}}</div> 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 ---- -<p>{{HTMLSidebar("Global_attributes")}}</p> - -<p> </p> - -<div class="almost_half_cell" id="gt-res-content"> -<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="bn"><span class="hps"> </span></span><span class="short_text" id="result_box" lang="bn"><span class="hps">অ্যাক্সেস কী</span></span><span lang="bn"> <span class="hps">গ্লোবাল</span> <span class="hps">অ্যাট্রিবিউট</span> <span class="hps">বর্তমান উপাদান</span> <span class="hps">জন্য</span> <span class="hps">একটি</span> <span class="hps">কীবোর্ড</span> <span class="hps">শর্টকাট</span> <span class="hps">জেনারেট করার জন্য</span> <span class="hps">একটি</span> <span class="hps">ইঙ্গিত প্রদান করে</span><span>। </span><span class="hps">এই বৈশিষ্ট্য</span> <span class="hps">অক্ষরের</span> <span class="hps">একটি</span> <span class="hps">স্থান</span> <span class="hps">বিচ্ছিন্ন তালিকা-র</span> <span class="atn hps">(</span><span>এক</span> <span class="hps">একক</span> <span class="hps">ইউনিকোড</span> <span class="hps">কোড</span> <span class="hps">পয়েন্ট</span><span>)</span> <span class="hps">নিয়ে গঠিত</span><span>।</span> <span class="hps">ব্রাউজার</span> <span class="hps">কম্পিউটার কিবোর্ড</span> <span class="hps">লেআউট</span> <span class="hps">যে বিদ্যমান</span> <span class="hps">প্রথমটি</span> <span class="hps">ব্যবহার</span><span>।</span><br> -<br> -<span class="hps"> </span></span><span class="short_text" id="result_box" lang="bn"><span class="hps">অ্যাক্সেস কী </span></span><span lang="bn"><span class="hps">সক্রিয়</span> <span class="hps">অপারেশন</span> <span class="hps">ব্রাউজার</span> <span class="hps">এবং</span> <span class="hps">তার</span> <span class="hps">প্ল্যাটফর্ম</span> <span class="hps">উপর নির্ভর করে।</span></span></div> -</div> - -<table class="standard-table"> - <tbody> - <tr> - <th> </th> - <th>Windows</th> - <th>Linux</th> - <th>Mac</th> - </tr> - <tr> - <th>Firefox</th> - <td colspan="2" rowspan="1"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> - <td>On Firefox 14 or newer, <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> - On Firefox 13 or older, <kbd>Control</kbd> + <kbd><em>key</em></kbd></td> - </tr> - <tr> - <th>Internet Explorer</th> - <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> - <td colspan="2" rowspan="1">N/A</td> - </tr> - <tr> - <th>Google Chrome</th> - <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> - <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> - </tr> - <tr> - <th>Safari</th> - <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> - <td>N/A</td> - <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> - </tr> - <tr> - <th>Opera</th> - <td colspan="3" rowspan="1"><kbd>Shift</kbd> + <kbd>Esc</kbd> opens a contents list which are accessible by accesskey, then, can choose an item by pressing <kbd><em>key</em></kbd></td> - </tr> - </tbody> -</table> - -<p> <span id="result_box" lang="bn"><span class="hps">ফায়ারফক্স</span> <span class="hps">ব্যবহারকারীর</span> <span class="hps">পছন্দ প্রয়োজন</span> <span class="hps">মডিফায়ার কী</span> <span class="hps">কাস্টমাইজ</span> <span class="hps">করতে পারেন মনে রাখবেন</span><span>।</span></span></p> - -<p><span class="short_text" id="result_box" lang="bn"><span class="hps">বিশেষ উল্লেখ</span></span></p> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML4.01')}}, several characters can be set as the <code>accesskey</code>. Also, it can be set on any element.</td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td>Only supported on {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }}</td> - </tr> - </tbody> -</table> - -<h2 id="ব্রাউজার_উপযুক্ততা"> <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্রাউজার</span> <span class="hps">উপযুক্ততা</span></span></h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="আরো_দেখুন"> <span class="short_text" id="result_box" lang="bn"><span class="hps">আরো দেখুন</span></span></h2> - -<p><span class="short_text" id="result_box" lang="bn"><span class="hps">সকল</span> <span class="hps">গ্লোবাল</span> <span class="hps">গুণাবলী</span><span> </span></span></p> - -<ul> -</ul> 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 ---- -<p class="note">{{HTMLSidebar("Global_attributes")}}</p> - -<p><strong>কন্টেন্টেদিতেবল</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">গ্লোবাল আত্রিবিয়ট</a> একটি এনাম্বেরাতেট আত্রিবিয়ুট যা নির্দেশিত করে যে যদি এলিমেন্ত ইউজার দ্বারা এডিটিং করা যায়।তাহলে,ব্রাউজার এডিটিং এর জন্য তার ওয়িদগেট পরিবর্তন করবে। আত্রিবিয়ুটি নিম্নের যেকোনো একটি ভেলুকে নিতে হবেঃ</p> - -<ul> - <li><span style="font-family: courier new;">সত্য</span> অথবা আম্পতি <em>স্ট্রিং </em>,যা নির্দেশিত করে যে এলিমেন্তটি অবশ্যই এডিটেবল;</li> - <li><span style="font-family: courier new;">মিথ্যা</span>,যা নির্দেশিত করে যে এলিমেন্তটি এডিটেবল নয়।</li> -</ul> - -<p>যদি এই আত্রিবিয়ুট সেট না হয়,ইহার দিফোলট ভেলু ইহার প্যারেন্ট<em> এলিমেন্ত থেকে নেয়া হবে</em>।</p> - -<p>এই আত্রিবিয়ুট একটি এনাম্বেরাতেট এবং বুলিয়ান নয়। ইহার মানে যে <span style="font-family: courier new;">সত্য</span>, <span style="font-family: courier new;">মিথ্যা</span> অথবা আম্পটি <em>স্ট্রিং</em> ভেলুর স্পষ্ট ব্যবহার কার্যভার এবং এর মত শর্টহ্যান্ড <code><label contenteditable>Example Label</label> </code>অনুমোদিত নয়।সঠিক ব্যবহার হল <code><label contenteditable="true">Example Label</label></code>।</p> - -<h2 id="স্পেসিফিকেশনস">স্পেসিফিকেশনস</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "editing.html#attr-contenteditable", "contenteditable")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#attr-contenteditable", "contenteditable")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "editing.html#attr-contenteditable", "contenteditable")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="ব্রাউজার_কম্প্যাটিবিলিটি">ব্রাউজার কম্প্যাটিবিলিটি</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.9") }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoMobile("1.9") }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="আরও_দেখুন">আরও দেখুন</h2> - -<ul> - <li>সব <a href="/en-US/docs/Web/HTML/Global_attributes">গ্লোবাল আত্রিবুয়তস।</a></li> - <li>{{domxref("HTMLElement.contentEditable")}} এবং {{domxref("HTMLElement.isContentEditable")}}</li> -</ul> 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 ---- -<p>{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> - -<p><span id="result_box" lang="bn"><span class="hps">টেনে আনার যোগ্য</span> <a href="/en-US/docs/">গ্লোবাল অ্যাট্রিবিউট </a><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes"> </a><span class="hps">উপাদান</span> <span class="hps">টেনে নিয়ে যাবে</span> <span class="hps">যে কিনা তার ইঙ্গিত</span> <span class="hps">একটি</span> <span class="hps">গণিত</span> <span class="hps">অ্যাট্রিবিউট</span></span> ব্যবহার করে {{domxref("HTML_Drag_and_Drop_API","HTML Drag and Drop API")}}. <span class="short_text" id="result_box" lang="bn"><span class="hps">এটা</span> <span class="hps">নিম্নলিখিত</span> <span class="hps">মান থাকতে পারে;</span></span></p> - -<ul> - <li><span style="font-family: courier new;">সঠিক,এটি নি্দেশ করে যে উপাদানটি টানা হতে পারে</span></li> - <li>ভুল,<span style="font-family: courier new;">এটি নি্দেশ করে যে উপাদানটি টানা হতে পারে না</span></li> -</ul> - -<p>যদি এই আরোপন সেট না হয়, তবে প্রাথমিক মান আপনা-আপনি হয়, <span id="result_box" lang="bn"><span class="hps">আচরণ যার অর্থ</span> <span class="hps">ব্রাউজার</span> <span class="hps">দ্বারা</span> <span class="hps">ডিফল্টরূপে</span> <span class="hps">সংজ্ঞায়িত</span> <span class="hps">এক</span> <span class="hps">হওয়া উচিত</span><span>।</span></span></p> - -<p><span id="result_box" lang="bn"><span class="hps">এই বৈশিষ্ট্য</span>টি <em><span class="hps">গণিত</span></em> <span class="hps">তবে</span> <span class="hps">একটি</span> <em><span class="hps">বুলিয়ান</span></em> <span class="hps">না</span><span>। </span><span class="hps">এই</span> <span class="hps">মান সত্য বা মিথ্যা</span> হোক এর <span class="hps">স্পষ্ট</span> <span class="hps">ব্যবহার</span> <span class="hps">বাধ্যতামূলক, যে</span> <span class="hps">মানে</span> <span class="hps">এবং</span> <span class="atn hps"><</span><span>ট্যাগ</span> <span class="hps">টেনে আনার যোগ্য</span><span>></span> <span class="hps">উদাহরণ</span> <span class="hps">ট্যাগ</span> <span class="atn hps"><</span><span>/</span> <span class="hps">ট্যাগ</span><span>></span> <span class="hps">মত</span> <span class="hps">একটি</span> <span class="hps">সংক্ষিপ্ত লেখার</span> <span class="hps">অনুমতি দেওয়া হয় না।</span> <span class="hps">সঠিক</span> <span class="hps">ব্যবহারটি হলো</span> <span class="atn hps"><</span><span>ট্যাগ</span> <span class="hps">টেনে আনার যোগ্য</span> <span class="hps">=</span> <span class="atn hps">"</span><span>সত্য</span><span>"</span><span>></span> <span class="hps">উদাহরণ</span> <span class="hps">ট্যাগ</span> <span class="atn hps"><</span><span>/</span> <span class="hps">ট্যাগ</span><span>></span> ।</span></p> - -<p><span id="result_box" lang="bn"><span class="hps">ডিফল্টরূপে</span><span>,</span> <span class="hps">শুধুমাত্র</span> <span class="hps">টেক্সট</span><span class="hps">,</span> <span class="hps">ছবি, লিংক নির্বাচন করা হলে </span></span><span lang="bn"><span class="hps">টেনে নেওয়া যাবে।সকল উপাদান এর জন্য, পর্বটি</span></span> <strong>{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} </strong>অবশ্যই<strong> </strong>টেনে নেওয়া এবং ছেঁড়ে দেওয়ার কাজ এর জন্য সেট করতে হবে, যেমন দেখানো হলো <a href="/en-US/docs/DragDrop/Drag_Operations" title="https://developer.mozilla.org/En/DragDrop/Drag_Operations">কম্প্রেহেনসিভ উদাহারন</a>.</p> - -<h2 id="স্পেসিফিকেশন">স্পেসিফিকেশন</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">স্পেসিফিকেশন</th> - <th scope="col">অবস্থা</th> - <th scope="col">মন্তব্য</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "interaction.html#the-draggable-attribute", "draggable")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>বর্তমান স্ন্যাপশট হতে পরিবর্তন নেই, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#the-draggable-attribute", "draggable")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>প্রাথমিক সংজ্ঞা এর স্ন্যাপশট {{SpecName('HTML WHATWG')}},</td> - </tr> - </tbody> -</table> - -<h2 id="ব্রাউজার_কম্পিবিলিটি">ব্রাউজার কম্পিবিলিটি</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>বৈশিষ্ট্য</th> - <th>ক্রোম</th> - <th>ফায়ারফক্স (গেছকো)</th> - <th>ইন্টারনেট এক্সপ্লোরার</th> - <th>অপেরা</th> - <th>সাফারি</th> - </tr> - <tr> - <td>প্রাথমিক সহায়তা</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.8.1") }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>বৈশিষ্ট্য</th> - <th>এন্ড্রোয়েড</th> - <th>এন্ড্রয়েডের জন্য ক্রোম</th> - <th>ফায়ারফক্স মোবাইল (গেছকো)</th> - <th>আই ই মোবাইল</th> - <th>অপেরা মোবাইল</th> - <th>সাফারি মোবাইল</th> - </tr> - <tr> - <td>প্রাথমিক সহায়তা</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoMobile("1.8.1") }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="আরও_দেখুন">আরও দেখুন</h2> - -<ul> - <li>সব <a href="/en-US/docs/Web/HTML/Global_attributes">গ্লোবাল এট্রিবিউটস</a>.</li> -</ul> 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 ---- -<p class="note">{{HTMLSidebar("Global_attributes")}}</p> - -<p> <span id="result_box" lang="bn"><span class="hps">লুকানো</span> <span class="hps">গ্লোবাল</span> <span class="hps">অ্যাট্রিবিউট</span> <span class="hps">উপাদান</span> <span class="hps">এখনো</span> <span class="hps">নয়</span><span>,</span> <span class="hps">অথবা আর</span><span>,</span> <span class="hps">প্রাসঙ্গিক</span> <span class="hps">তা নির্দেশ করে ।একটি</span> <span class="hps">বুলিয়ান</span> <span class="hps">বৈশিষ্ট্য হল.</span> <span class="hps">উদাহরণস্বরূপ, এটি</span> <span class="hps">লগইন</span> <span class="hps">প্রক্রিয়া সম্পন্ন</span> <span class="hps">না হওয়া পর্যন্ত</span> <span class="hps">ব্যবহার করা যাবে না</span> <span class="hps">যে</span> <span class="hps">পৃষ্ঠার</span> <span class="hps">উপাদান</span> <span class="hps">আড়াল</span> <span class="hps">করতে ব্যবহার করা যেতে</span> <span class="hps">পারে</span><span>। </span><span class="hps">ব্রাউজার</span> <span class="hps">যেমন</span> <span class="hps">উপাদান</span> <span class="hps">রেন্ডার</span> <span class="hps">করা হবে না।</span></span></p> - -<p> </p> - -<p><span id="result_box" lang="bn"><span class="hps">এই বৈশিষ্ট্য</span> <span class="hps">বৈধভাবে</span> <span class="hps">দেখানো</span> <span class="hps">যেতে পারে</span> <span class="hps">যে</span> <span class="hps">কন্টেন্ট</span> <span class="hps">আড়াল</span> <span class="hps">করতে</span> <span class="hps">ব্যবহার করা</span> <span class="hps">উচিত নয়</span><span>। </span><span class="hps">এই</span> <span class="hps">একটি</span> <span class="hps">স্টাইলিং</span> <span class="hps">সিদ্ধান্ত</span> <span class="hps">এবং</span> <span class="hps">তাদের</span> <span class="hps">একটি</span> <span class="hps">পুরোপুরি</span> <span class="hps">সঠিক</span> <span class="hps">পাতা</span> <span class="hps">নেতৃত্ব চাই</span> <span class="hps">দেখাচ্ছে</span> <span class="hps">অন্য শৈলী</span> <span class="hps">হিসাবে</span> <span class="hps">উদাহরণস্বরূপ</span><span>, এটি একটি</span> <span class="hps">ট্যাবযুক্ত</span> <span class="hps">ইন্টারফেস</span> <span class="hps">ট্যাব</span> <span class="hps">প্যানেল লুকান</span> <span class="hps">ব্যবহার করা</span> <span class="hps">উচিত নয়</span><span>।</span><br> - <br> - <span class="hps">গোপন উপাদান</span> <span class="hps">অ</span> <span class="hps">লুকানো</span> <span class="hps">উপাদান</span> <span class="hps">এবং</span> <span class="hps">যে</span> <span class="hps">স্ক্রিপ্ট</span> <span class="hps">উপাদান</span> <span class="hps">এখনও</span> <span class="hps">নির্বাহ করতে পারেন</span> <span class="hps">এবং</span> <span class="hps">ফর্ম উপাদান</span> <span class="hps">এখনও</span> <span class="hps">জমা দিতে পারেন</span><span>, যার মানে</span> <span class="hps">সক্রিয়</span> <span class="hps">এখনও</span> <span class="hps">একটি</span> <span class="hps">গোপন</span> <span class="hps">উপাদান</span> <span class="hps">উত্তরপুরুষ</span> <span class="hps">যে উপাদান</span> <span class="hps">থেকে</span> <span class="hps">সংযুক্ত করা উচিত নয়</span><span>।</span></span></p> - -<div class="note"> -<p><strong>Note:</strong> Changing the value of the CSS {{cssxref("display")}} property on an element with the <code>hidden</code> attribute overrides the behavior. For instance, an element styled <code>display: flex</code> will be displayed on screen regardless of the <code>hidden</code> attribute being present.</p> -</div> - -<h2 id="বিশেষ_উল্লেখ"> <span class="short_text" id="result_box" lang="bn"><span class="hps">বিশেষ উল্লেখ</span></span></h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Defines the suggested default rendering of the <code>hidden</code> attribute using CSS</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="ব্রাউজার_উপযুক্ততা"> <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্রাউজার</span> <span class="hps">উপযুক্ততা</span></span></h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoDesktop("2") }}</td> - <td>11</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>4</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoMobile("2") }}</td> - <td>11</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="আরো_দেখুন"> <span class="short_text" id="result_box" lang="bn"><span class="hps">আরো দেখুন</span></span></h2> - -<ul> - <li> <span class="short_text" id="result_box" lang="bn"><span class="hps">সকল</span> <span class="hps">গ্লোবাল</span> <span class="hps">গুণাবলী</span><span>।</span></span></li> -</ul> 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 ---- -<div>{{HTMLSidebar("Global_attributes")}}</div> - -<div class="summary"> -<p><strong>Global attributes</strong> are attributes common to all HTML elements; they can be used on all elements, though the attributes may have no effect on some elements.</p> -</div> - -<p>Global attributes may be specified on all <a href="/en-US/docs/Web/HTML/Element">HTML elements</a>, <em>even those not specified in the standard</em>. 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 <code><foo hidden>...<foo></code><code>, </code>even though <code><foo></code> is not a valid HTML element.</p> - -<p>In addition to the basic HTML global attributes, the following global attributes also exist:</p> - -<ul> - <li><strong><code>xml:lang</code></strong> and <code><strong>xml:base</strong></code> — these are inherited from the XHTML specifications and deprecated, but kept for compatibility purposes.</li> - <li>The multiple <code><strong><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">aria-*</a></strong></code> attributes, used for improving accessibility.</li> - <li>The event handler attributes: <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li> -</ul> - -<h2 id="Description">Description</h2> - -<dl> - <dt id="attr-accesskey"><code><a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code></dt> - <dd>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.</dd> - <dt id="attr-class"><code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code></dt> - <dd>Is a space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the <a href="/En/CSS/Class_selectors" title="https://developer.mozilla.org/En/CSS/Class_selectors">class selectors</a> or functions like the method {{domxref("Document.getElementsByClassName()")}}.</dd> - <dt id="attr-contenteditable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code></dt> - <dd>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: - <ul> - <li><code>true</code> or the <em>empty string</em>, which indicates that the element must be editable;</li> - <li><code>false</code>, which indicates that the element must not be editable.</li> - </ul> - </dd> - <dt id="attr-contextmenu"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code></dt> - <dd>Is the <code><a href="#attr-id"><strong>id</strong></a></code> of an {{HTMLElement("menu")}} to use as the contextual menu for this element.</dd> - <dt id="attr-dataset"><code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*">data-*</a></code></dt> - <dd>Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the <a href="/en-US/docs/Web/HTML" title="en/HTML">HTML</a> and its <a href="/en-US/docs/Glossary/DOM" title="en/DOM">DOM</a> 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.</dd> - <dt id="attr-dir"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code></dt> - <dd>Is an enumerated attribute indicating the directionality of the element's text. It can have the following values: - <ul> - <li><code>ltr</code>, which means <em>left to right </em>and is to be used for languages that are written from the left to the right (like English);</li> - <li><code>rtl</code>, which means <em>right to left</em> and is to be used for languages that are written from the right to the left (like Arabic);</li> - <li><code>auto</code>, 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.</li> - </ul> - </dd> - <dt id="attr-draggable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/draggable">draggable</a></code> {{experimental_inline}}</dt> - <dd>Is an enumerated attribute indicating whether the element can be dragged, using the <a href="/en-us/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values: - <ul> - <li><code>true</code>, which indicates that the element may be dragged</li> - <li><code>false</code>, which indicates that the element may not be dragged.</li> - </ul> - </dd> - <dt id="attr-dropzone"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dropzone">dropzone</a></code> {{experimental_inline}}</dt> - <dd>Is an enumerated attribute indicating what types of content can be dropped on an element, using the <a href="/En-us/docs/DragDrop/Drag_and_Drop" title="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values: - <ul> - <li><code>copy</code>, which indicates that dropping will create a copy of the element that was dragged</li> - <li><code>move</code>, which indicates that the element that was dragged will be moved to this new location.</li> - <li><code>link</code>, will create a link to the dragged data.</li> - </ul> - </dd> - <dt id="attr-hidden"><code><a href="/en-US/docs/Web/HTML/Global_attributes/hidden">hidden</a></code></dt> - <dd>Is a Boolean attribute indicates that the element is not yet, or is no longer, <em>relevant</em>. 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.</dd> - <dt id="attr-id"><code><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></code></dt> - <dd>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).</dd> - <dt id="attr-itemid"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemid">itemid</a></code> {{experimental_inline}}</dt> - <dt id="attr-itemprop"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code> {{experimental_inline}}</dt> - <dt id="attr-itemref"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemref">itemref</a></code> {{experimental_inline}}</dt> - <dt id="attr-itemscope"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">itemscope</a> </code>{{experimental_inline}}</dt> - <dt id="attr-itemtype"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> {{experimental_inline}}</dt> - <dd>These attributes are related to the <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata">WHATWG HTML Microdata feature</a>.</dd> - <dt id="attr-lang"><code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code></dt> - <dd>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 <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a> IETF document. <a href="#attr-xml:lang"><strong>xml:lang</strong></a> has priority over it.</dd> - <dt id="attr-spellcheck"><code><a href="/en-US/docs/Web/HTML/Global_attributes/spellcheck">spellcheck</a></code> {{experimental_inline}}</dt> - <dd>Is an enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values: - <ul> - <li><code>true</code>, which indicates that the element should be, if possible, checked for spelling errors;</li> - <li><code>false</code>, which indicates that the element should not be checked for spelling errors.</li> - </ul> - </dd> - <dt id="attr-style"><code><a href="/en-US/docs/Web/HTML/Global_attributes/style">style</a></code></dt> - <dd>Contains <a href="/en/CSS" title="en/CSS">CSS</a> 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.</dd> - <dt id="attr-tabindex"><code><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code></dt> - <dd>Is an integer attribute indicates if the element can take input focus (is <em>focusable</em>), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values: - <ul> - <li>a <em>negative value</em> means that the element should be focusable, but should not be reachable via sequential keyboard navigation;</li> - <li><code>0</code> means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;</li> - <li>a <em>positive value</em> 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 <a href="#attr-tabindex"><strong>tabindex</strong></a>. If several elements share the same tabindex, their relative order follows their relative position in the document).</li> - </ul> - </dd> - <dt id="attr-title"><code><a href="/en-US/docs/Web/HTML/Global_attributes/title">title</a></code></dt> - <dd>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.</dd> - <dt id="attr-translate"><code><a href="/en-US/docs/Web/HTML/Global_attributes/translate">translate</a></code></dt> - <dd>Is an enumerated attribute that is used to specify whether an element's attribute values and the values of it<code>s</code> {{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: - <ul> - <li>empty string and <code>"yes"</code>, which indicates that the element will be translated.</li> - <li><code>"no</code>", which indicates that the element will not be translated.</li> - </ul> - </dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "dom.html#global-attributes", "Global attributes")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>From latest snapshot, {{SpecName('HTML5.1')}}, <strong>itemid</strong>, <strong>itemprop</strong>, <strong>itemref</strong>, <strong>itemscope</strong>, and <strong>itemtype</strong> have been added.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML5 W3C')}}, <strong>spellcheck</strong>, <strong>draggable</strong>, and <strong>dropzone</strong> have been added.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the <strong>dir</strong>, <strong>lang</strong>, <strong>style</strong>, <strong>id</strong>, <strong>class</strong>, <strong>tabindex</strong>, <strong>accesskey</strong>, and <strong>title</strong> are now true global attributes.<br> - <strong>xml:lang</strong> which was initially part of XHTML, is now also part of HTML.<br> - <strong>hidden</strong>, <strong>data-*</strong>, <strong>contextmenu</strong>, <strong>contenteditable</strong>, and<strong> <strong>translate</strong></strong> have been added.</td> - </tr> - <tr> - <td>{{SpecName('HTML4.01')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td>There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.<br> - <strong>class</strong> and <strong>style</strong> 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")}}.<br> - <strong>dir</strong> 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")}}.<br> - <strong>id</strong> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> - <strong>lang</strong> 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")}}.<br> - <strong>tabindex</strong> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br> - <strong>accesskey</strong> is only supported on {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }}.<br> - <strong>title</strong> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>accesskey</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>class</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>contenteditable</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.9")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>contextmenu</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop(9)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>data-*</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("6")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>dir</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>draggable</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.8.1")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>dropzone</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>hidden</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("2")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>id</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>itemid, itemprop, itemref, itemscope, itemtype</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>lang</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>spellcheck</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.8.1")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>style</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>tabindex</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>title</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>accesskey</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>class</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>contenteditable</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.9")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>contextmenu</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>data-*</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("6")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>dir</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>draggable</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.8.1")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>dropzone</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>hidden</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("2")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>id</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>itemid, itemprop, itemref, itemscope, itemtype</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>lang</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>spellcheck</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.8.1")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>style</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>tabindex</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>title</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Element")}} and {{domxref("GlobalEventHandlers")}} interfaces that allow to query most global attributes.</li> -</ul> 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 ---- -<p style="margin: 0.5em 0px 0px 50px; padding-top: 0px; padding-bottom: 2px; color: rgb(58, 73, 86); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Tahoma, Arial, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal;"><span id="result_box" lang="bn"><span class="hps">আমরা</span> <span class="hps">যেমন</span> <span class="hps">অভিনেতা</span><span>,</span> <span class="hps">পরিচালক</span><span>,</span> <span class="hps">মূল্যায়ন</span> <span class="hps">হিসাবে</span> <span class="hps">বৈশিষ্ট্য</span> <span class="hps">মত</span><span>,</span> <span class="hps">পাশ</span> <span class="hps">ইমেজ</span> <span class="hps">বা</span> <span class="hps">তথ্য</span> <span class="hps">সম্পর্কে</span> <span class="hps">সার্চ ইঞ্জিন থেকে</span> <span class="hps">আরো</span> <span class="hps">তথ্য</span> <span class="hps">ট্যাগ</span> <span class="hps">যে কোন ধরণের</span> <span class="hps">দিতে</span> <span class="hps">পারেন</span></span>। <span id="result_box" lang="bn"><span class="hps">একটি আইটেম</span> <span class="hps">এর</span> <span class="hps">বৈশিষ্ট্য</span> <span class="hps">লেবেলে</span> আইটেমপ্রোপ</span><span lang="bn"> <span class="hps">অ্যাট্রিবিউট</span> <span class="hps">ব্যবহার</span></span><code>।</code> <span class="short_text" id="result_box" lang="bn"><span class="hps">উদাহরণস্বরূপ</span><span>,</span> <span class="hps">একটি সিনেমা</span> <span class="hps">পরিচালককে</span> <span class="hps">চিহ্নিত করা যাক</span><span>,</span></span><span id="result_box" lang="bn"><span class="hps">পরিচালক</span> <span class="hps">এর</span> <span class="hps">নাম</span> <span class="hps">অন্তর্নিহিত উপাদান</span> <span class="hps">করার</span> আইটেমপ্রোপ <span class="hps">=</span> <span class="atn hps">"</span><span>পরিচালক</span><span>"</span> <span class="hps">যোগ করুন।</span></span></p> - -<p style="margin: 0.5em 0px 0px 50px; padding-top: 0px; padding-bottom: 2px; color: rgb(58, 73, 86); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Tahoma, Arial, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal;">এখানে একটি সহজ উদাহরনঃ</p> - -<pre style="font-family: Courier, monospace; font-size: 14.4px; width: auto; padding: 0px 5px 2px 10px; margin: 0.5em 0px 0px 50px; text-align: left; overflow: auto; color: rgb(58, 73, 86); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; text-indent: 0px; text-transform: none; background: rgb(225, 225, 225);"><div itemscope itemtype ="http://schema.org/Movie"> - <h1 <strong>itemprop="name"</strong>>Avatar</h1> - <span>Director: <span <strong>itemprop="director"</strong>>James Cameron</span> (born August 16, 1954)</span> - <span <strong>itemprop="genre"</strong>>Science fiction</span> - <a href="../movies/avatar-theatrical-trailer.html" <strong>itemprop="trailer"</strong>>Trailer</a> -</div></pre> - -<p> </p> - -<p> <span class="short_text" id="result_box" lang="bn"><span class="hps">সংশ্লিষ্ট</span> <span class="hps">বৈশিষ্ট্যাবলী</span> <span class="hps">পড়ুন</span> <span class="hps">উপর</span> <span class="hps">আরও তথ্যের জন্য</span></span> https://schema.org/docs/gs.html</p> 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 ---- -<p><span id="result_box" lang="bn"><span class="hps"> এই বৈশিষ্ট্য</span> <span class="hps">স্ট্রাকচার্ড ডেটা</span> <span class="hps">প্রচার করে।</span><span class="hps">স্কিমা মাইক্রোডাটা আইটেমস্কুপ </span><span class="hps">ব্যবহার করে আপনি</span> <span class="hps">সংশ্লিষ্ট</span> <span class="hps">bloe</span> <span class="hps">অন্তর্ভুক্ত</span> <span class="hps">এইচ টি এম এল</span> <span class="hps">একটি নির্দিষ্ট আইটেম</span> <span class="hps">সম্পর্কে</span> <span class="hps">যে</span> <span class="hps">নির্দিষ্ট করতে পারেন</span><span>।</span></span><br> - <br> - <span lang="bn"><span class="hps">কিন্তু</span> <span class="hps">এটা</span> <span class="hps">একটি আইটেম</span> <span class="hps">এটা</span> <span class="hps">একটি আইটেম</span> <span class="hps">কি ধরনের</span> <span class="hps">উল্লেখ না</span> <span class="hps">আলোচনা হচ্ছে</span> <span class="hps">সেখানে</span> <span class="hps">যে</span> <span class="hps">উল্লেখ করার</span> <span class="hps">উপযোগী</span> <span class="hps">নয়</span><span>।</span> <span class="hps">আমরা</span> <span class="hps">আইটেমস্কুপ </span> <span class="hps">দ্বারা আইটেমস্কুপ অনুসরণ</span> <span class="hps">অ্যাট্রিবিউট ব্যবহার</span> <span class="hps">আইটেমটি</span> <span class="hps">ধরণ উল্লেখ করা যাবে</span><span>।</span><br> - <br> - <span class="hps">এখানে</span> <span class="hps">উদাহরণ</span> <span class="hps">হলঃ</span></span></p> - -<p> </p> - -<pre><div itemscope <strong>itemtype="http://schema.org/Movie"</strong>> - <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></pre> - -<p><span id="result_box" lang="bn"><span class="hps">এই আইটেমস্কুপ</span> <span class="hps">দ্বারা</span> <span class="atn hps"><</span><span>p></span> <span class="hps">...</span> <span class="atn hps"><</span><span>/ p</span><span>></span> <span class="hps">নির্দিষ্ট ধরণ সম্পর্কে</span> <span class="hps">ভিতর</span> <span class="hps">আমরা</span> <span class="hps">এইচ টি এম এল</span> <span class="hps">উল্লেখ</span> <span class="hps">করা হয়</span><span>,</span> <span class="hps">এবং</span> <span class="hps">আমরা</span> <span class="hps">অ্যাট্রিবিউট</span> <span class="hps">আইটেম টাইপের</span> <span class="hps">সঙ্গে</span> <span class="hps">কনটেন্ট এর</span> <span class="hps">ধরণ</span> <span class="hps">উল্লেখ</span> <span class="hps">করা হয়</span><span>।</span><br> - <br> - <span class="hps">আইটেম টাইপ</span> <span class="hps">সম্পর্কে</span> <span class="hps">আরো</span> <span class="hps">বৈশিষ্ট্যাবলী</span></span><span lang="bn"> <span class="hps">পাওয়া যাবে </span><span class="hps">http://schema.org/Thing</span> </span></p> - -<p> </p> 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 ---- -<p>{{HTMLSidebar("Global_attributes")}}</p> - -<p class="note">Note: The maximum value for tabIndex should not exceed 32767 per W3C section 17.11.1</p> - -<p><strong>ট্যাবইনডেক্স</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">গোব্যাল আত্রিবিওট </a>একটি পূর্ণসংখ্যা যা নির্দেশিত করে যে,যদি এলিমেন্তটি ফোকাসকে ইনপুতে নিতে পারে (ইহা ফোকাসিত),যদি ইহা সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশন অংশগ্রহন করে, এবং যেকোন অবস্তায়. ইহা সহাস্র ভেলু নিতে পারেঃ</p> - -<ul> - <li><em>একটি নেগাতিভ ভেলু মানে</em> হল এলিমেন্তটি অবশ্যই ফোকাসিত,কিন্তু সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশনের মাধ্যমে কাছে আশা যাবে না;</li> - <li><code>0</code> মানে হল এলিমেন্তটি ফোকাসিত করা যায় এবং সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশনের মাধ্যমে কাছে আসা যায়,কিন্ত ইহার রিলেতিভ অর্ডার প্লাটফর্ম দ্বারা সংজ্ঞায়িত;</li> - <li>একটি <em>পসিতিভ ভেলু যার মানে হল</em><em> </em>ফোকাসিত করা যায় এবং সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশনের মাধ্যমে কাছে আসা যায়,কিন্ত ইহার রিলেতিভ অর্ডার প্লাটফর্ম দ্বারা সংজ্ঞায়িত; সেকএন্তিয়াল <strong>ট্যাবইনডেক্সের</strong> বড়দিত ভেলুকে অনুসরণ করে।যদি অনেক এলিমেন্তস একই ট্যাবইনডেক্স নিজদের মধ্যে ভাগ করে,তাদের রিলেতিভ অর্ডার তাদের রিলেতিভ পসিসনকে অনুসরন করে)।</li> -</ul> - -<p>একটি এলিমেন্তের সাথে <code>0 ভেলু</code>, একটি অকার্যকর ভেলু, অথবা কোন <strong>ট্যাবইনডেক্স</strong> ভেলু সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশন অর্ডারের পসিতিভ<strong> ট্যাবইনডেক্স</strong> এর এলিমেন্তের পরে বসবে না।</p> - -<p>তুমি <a href="/en/Focus_management_in_HTML" title="en/Focus management in HTML">এই প্রবন্ধটি</a> পরযাচলনা করতে পারো ফোকাস মানেজমেন্তের ব্যাপক ব্যাখ্যা দেখার জন্য।</p> - -<h2 id="স্পেসিফিকেসনস">স্পেসিফিকেসনস</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "editing.html#attr-tabindex", "tabindex")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the attribute is now supported on all elements (global attributes).</td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td>Only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="ব্রাউজার_কম্প্যাটিবিলিটি">ব্রাউজার কম্প্যাটিবিলিটি</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="আরও_দেখুন">আরও দেখুন</h2> - -<ul> - <li>সব <a href="/en-US/docs/Web/HTML/Global_attributes">গোব্যাল আত্রিবিওট</a>.</li> - <li>{{domxref("HTMLElement.tabindex")}} যা প্রতিফলিত করে এই আত্রিবিওটকে।</li> -</ul> 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 ---- -<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> - -<p> <span id="result_box" lang="bn"><span class="hps">অনুবাদ</span> <span class="hps">গ্লোবাল</span> <span class="hps">অ্যাট্রিবিউট</span> <span class="hps">একটি উপাদান</span> <span class="hps">এর</span> <span class="hps">অ্যাট্রিবিউট</span> <span class="hps">মান</span> <span class="hps">এবং</span> <span class="hps">তার টেক্সট</span> <span class="hps">নোড</span> <span class="hps">শিশুদের</span> <span class="hps">মান</span> <span class="hps">পৃষ্ঠা</span> <span class="hps">অনূদিত হয়</span> <span class="hps">বা</span> <span class="hps">অপরিবর্তিত</span> <span class="hps">তাদের</span> <span class="hps">ছেড়ে কিনা</span> <span class="hps">যখন</span> <span class="hps">অনুবাদ</span> <span class="hps">করা</span> <span class="hps">হয়</span> <span class="hps">কিনা তা উল্লেখ করতে</span> <span class="hps">ব্যবহৃত</span> <span class="hps">হয়</span> <span class="hps">যে</span> <span class="hps">একটি</span> <span class="hps">গণিত</span> <span class="hps">বৈশিষ্ট্য হল।</span><span class="hps">এটা</span> <span class="hps">নিম্নলিখিত</span> <span class="hps">মান</span> <span class="hps">থাকতে পারে</span><span>:</span></span></p> - -<ul> - <li> <span id="result_box" lang="bn"><span class="hps">পাতা</span> <span class="hps">অনূদিত হয়</span> <span class="hps">যখন</span> <span class="hps">উপাদান</span> <span class="hps">অনুবাদ</span> <span class="hps">করা</span> <span class="hps">উচিত</span> <span class="hps">যা নির্দেশ করে যে</span> <span class="hps">খালি স্ট্রিং</span> <span class="hps">এবং</span> <span class="atn hps">"</span><span>হ্যাঁ</span><span>"</span><span>,</span><span>।</span></span></li> - <li><code> </code><span id="result_box" lang="bn"><span>কোন</span><span>"</span><span>,</span> <span class="hps">উপাদান</span> <span class="hps">অনুবাদ</span> <span class="hps">করা</span> <span class="hps">উচিত নয়</span> <span class="hps">যে</span><span>, যা নির্দেশ করে</span><span>।</span></span></li> -</ul> - -<h2 id="বিশেষ_উল্লেখ"> <span class="short_text" id="result_box" lang="bn"><span class="hps">বিশেষ উল্লেখ</span></span></h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="ব্রাউজার_উপযুক্ততা"> <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্রাউজার</span> <span class="hps">উপযুক্ততা</span></span></h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="আরো_দেখুন"> <span class="short_text" id="result_box" lang="bn"><span class="hps">আরো দেখুন</span></span></h2> - -<ul> - <li><span class="short_text" id="result_box" lang="bn"><span class="hps">সকল</span> <span class="hps">গ্লোবাল</span> <span class="hps">গুণাবলী</span><span>।</span></span></li> - <li><span id="result_box" lang="bn"><span class="hps">এই</span> <span class="hps">বৈশিষ্ট্য</span> <span class="hps">প্রতিফলিত করে</span> <span class="atn hps">{</span><span class="atn">{</span><span>domxref</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>HTMLElement.translate</span><span>"</span><span>)</span><span>}</span><span>}</span> <span class="hps">সম্পত্তি</span><span>।</span></span></li> -</ul> 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 ---- -<div>{{HTMLSidebar}}</div> - -<p><span class="seoSummary"><strong>HTML</strong> (HyperText Markup Language) হল ওয়েব নির্মানের মূল উপাদান। এটি ওয়েবপেজের বিষয়বস্তুগুলিকে বর্ণনা এবং সংজ্ঞায়িত করে। সাধারণভাবে HTML ছাড়া অন্যান্য প্রযুক্তি একটি ওয়েবপেজের চেহারা / উপস্থাপনা (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>) অথবা কার্যকারিতা (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">Javascript</a>) বর্ণনার জন্য ব্যবহার করা হয়। আপনার ব্রাউজারে প্রদর্শিত সবকিছুই মূলত HTML দিয়ে গঠিত হয়। আরও সঠিকভাবে বলা যায় যে, HTML হল এমন একটি ভাষা যা একটি ওয়েব ডকুমেন্টের গঠন, নক্সা, বিষয়বস্তুর অবস্থান, অভ্যন্তরীণ তথ্য ইত্যাদি নিয়ন্ত্রণ করে।</span></p> - -<p>"হাইপার টেক্সট" বলতে একটি লিঙ্ক বোঝায় যেটা একটি ওয়েব পেজের সঙ্গে আরেকটি ওয়েবপজের সংযোগ স্থাপন করে, হয় একটি একক ওয়েবসাইট মধ্যে বা বিভিন্ন ওয়েবসাইটের মধ্যে। লিঙ্ক গুলি ওয়েবের সবচেয়ে অপরিহার্য অংশ। ইন্টারনেটে বিষয়বস্তু আপলোড এবং তা অন্যান্য ব্যক্তিদের দ্বারা নির্মিত পৃষ্ঠাগুলিতে সংযুক্ত করে আপনি ওয়ার্ল্ড ওয়াইড ওয়েবের একজন সক্রিয় অংশগ্রহণকারী হয়ে যেতে পারেন।</p> - -<p>একটি ওয়েব ব্রাউজারের মধ্যে লেখা, ছবি, এবং অন্যান্য বিষয়বস্তু প্রদর্শনের জন্য এইচটিএমএল "মার্কআপ" ব্যবহার করে। HTML এর মার্কাপগুলি বিশেষ কতগুলি উপাদান দিয়ে অন্তর্ভুক্ত যেমন {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, এবং অনেক কিছু।</p> - -<p>নিচের প্রবন্ধগুলি আপনাকে HTML শিখতে আরও সাহায্য করবে।</p> - -<section class="cleared" id="sect1"> -<ul class="card-grid"> - <li><span>HTML প্রসঙ্গ</span> - - <p>আমাদের বিস্তীর্ণ <a href="/bn-BD/docs/Web/HTML/Reference">HTML reference</a> অধ্যায়ে HTML এর সকল এলিমেন্ট ও অ্যাট্রিবিউট এর বিস্তারিত তথ্য জানতে পারবেন।</p> - </li> - <li><span>HTML ডেভেলপার নির্দেশিকা</span> - <p>HTML ব্যবহার সম্পর্কিত নিবন্ধ, পরিপূর্ণ উদাহরণ সহ টিউটোরিয়াল ইত্যাদি দেখতে আমাদের <a href="/bn-BD/docs/Web/Guide/HTML">HTML ডেভেলপার গাইড</a> দেখুন।</p> - </li> - <li><span>HTML পরিচিতি</span> - <p>ওয়েব ডেভেলপমেন্ট এর ক্ষেত্রে আপনি যদি নতুন হয়ে থাকেন, তাহলে HTML কি এবং কিভাবে এটা ব্যবহার করতে হবে ইত্যাদি জানার জন্য আমাদের <a href="https://developer.mozilla.org/bn-BD/docs/Web/Guide/HTML/Introduction">পরিচিতি</a> নিবন্ধটি অবশ্যই পড়বেন।</p> - </li> -</ul> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Documentation" name="Documentation">রেফারেন্স সমূহ</h2> - -<p>{{SubpagesWithSummaries}}</p> - -<p><span class="alllinks"><a href="/bn-BD/docs/tag/HTML" title="Article tagged: HTML">সব দেখুন...</a></span></p> -</div> - -<div class="section"> -<h2 class="Tools" id="Tools" name="Tools">গাইড এবং টিউটোরিয়াল সমূহ</h2> - -<dl> - <dt><a href="/bn-BD/docs/Web/Guide/HTML">এইচটিএমএল ডেভেলপার গাইড</a></dt> - <dd>এমডিএন এর কিছু নিবন্ধ, যাতে কিছু নির্দিষ্ট কৌশল বর্ণনা করা হয়েছে যেগুলো আপনি HTML দিয়ে ওয়েব কন্টেন্ট তৈরি করার সময় ব্যবহার করতে পারেন। এখানে কিছু টিউটোরিয়ালও আছে যেগুলো আপনার কাজে লাগবে।</dd> -</dl> -</div> -</div> -</section> - -<dl> - <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/Element">HTML উপাদানসমূহের নির্দেশিকা</a></dt> - <dd class="landingPageList">সকল <a class="glossaryLink" href="/bn-BD/docs/Glossary/HTML">HTML</a> <a class="glossaryLink" href="/bn-BD/docs/Glossary/Element">উপাদানের</a> একটি তালিকা দেখুন।</dd> - <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/Reference">HTML প্রসঙ্গ</a></dt> - <dd class="landingPageList">এইচটিএমএল এলিমেন্ট নিয়ে গঠিত, যার প্রত্যেকটি কতগুলি আট্রিবিউট দ্বারা পরিবর্তিত হতে পারে. HTML documents গুলি পরস্পরের সঙ্গে অন্যান্য <a href="/bn-BD/docs/Web/HTML/Link_types">লিঙ্কের</a> মাধ্যমে সংযুক্ত থাকে। </dd> - <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/Inline_elements">Inline উপাদানসমূহ</a></dt> - <dd class="landingPageList">এইচটিএমএল এলিমেন্ট সাধারণত "ইনলাইন" উপাদান বা <a href="/bn-BD/docs/Web/HTML/Block-level_elements">"ব্লক-স্তরের"</a> উপাদান। একটি ইনলাইন উপাদান শুধুমাত্র ট্যাগের ভিতরের স্থান অধিকার করে থাকে। </dd> - <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/Block-level_elements">Block-level উপাদানসমূহ</a></dt> - <dd class="landingPageList">এইচটিএমএল এলিমেন্ট সাধারণত "ব্লক-স্তরের" উপাদান বা <a href="/bn-BD/docs/HTML/Inline_elements">"ইনলাইন"</a> উপাদান। একটি ব্লক স্তরের উপাদান তার প্যারেন্ট এলিমেন্টের (container) সমস্ত জায়গা জুরে অবস্থান করে, যার ফলে একটি "ব্লক" তৈরি হয়।</dd> - <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/CORS_enabled_image">CORS সক্রিয় ছবি</a></dt> - <dd class="landingPageList">The <code><a href="/bn-BD/docs/Web/HTML/Element/img#attr-crossorigin">crossorigin</a></code> attribute, in combination with an appropriate <a class="glossaryLink" href="/bn-BD/docs/Glossary/CORS">CORS</a> 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.</dd> - <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/CORS_settings_attributes">CORS বৈশিষ্ট্যাবলী সেটিংস</a></dt> - <dd class="landingPageList">Some HTML elements that provide support for <a href="/bn-BD/docs/HTTP/Access_control_CORS">CORS</a>, such as {{HTMLElement("img")}} or {{HTMLElement("video")}}, have a <code>crossorigin</code> attribute (<code>crossOrigin</code> property), which lets you configure the CORS requests for the element's fetched data.</dd> - <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/Focus_management_in_HTML">HTML এ ফোকাস ব্যবস্থাপনা</a></dt> - <dd class="landingPageList">The <code><a href="/bn-BD/docs/Web/API/Document/activeElement">activeElement</a></code> DOM attribute and the <code><a href="/bn-BD/docs/Web/API/Document/hasFocus">hasFocus()</a></code> DOM method help you track and control a user's interactions with elements on a webpage.</dd> - <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/Global_attributes">সার্বজনীন attributes</a></dt> - <dd class="landingPageList">Global attributes may be specified on all <a href="/bn-BD/docs/Web/HTML/Element">HTML elements</a>, <em>even those not specified in the standard</em>. This means that any non-standard elements must still permit these attributes, even though those elements make the document HTML5-noncompliant.</dd> - <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/Attributes">HTML attribute নির্দেশিকা</a></dt> - <dd class="landingPageList">Elements in HTML have <strong>attributes</strong>. These are additional values that configure the elements or adjust their behavior in various ways.</dd> - <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/Link_types">লিংকের ধরন</a></dt> - <dd class="landingPageList">In HTML, various link types can be used to establish and define the relationship between two documents. Link types include <a href="/bn-BD/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/bn-BD/docs/Web/HTML/Element/area"><code><area></code></a>, and <a href="/bn-BD/docs/Web/HTML/Element/link"><code><link></code></a>.</dd> - <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/Supported_media_formats">এইচটিএমএল অডিও এবং ভিডিও উপাদান দ্বারা সমর্থিত Media বিন্যাস</a></dt> - <dd class="landingPageList">The <a href="/bn-BD/docs/Web/HTML/Element/audio"><code><audio></code></a> and <a href="/bn-BD/docs/Web/HTML/Element/video"><code><video></code></a> 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.</dd> - <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/Using_the_application_cache">Using the application cache</a></dt> - <dd class="landingPageList">Application caching lets web-based applications run offline. You can use the <strong>Application Cache</strong> (<em>AppCache</em>) 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.</dd> -</dl> 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 ---- -<div>{{HTTPSidebar}}</div> - -<p class="summary"><strong><dfn>Hypertext Transfer Protocol (HTTP)</dfn></strong> is an <a href="https://en.wikipedia.org/wiki/Application_Layer">application-layer</a> 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 <a href="https://en.wikipedia.org/wiki/Client%E2%80%93server_model">client-server model</a>, with a client opening a connection to make a request, then waiting until it receives a response. HTTP is a <a href="https://en.wikipedia.org/wiki/Stateless_protocol">stateless protocol</a>, 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 <a href="https://en.wikipedia.org/wiki/Transport_Layer">transport layer</a>, that is, a protocol that doesn't lose messages silently like UDP does. <a href="https://en.wikipedia.org/wiki/Reliable_User_Datagram_Protocol">RUDP</a> — the reliable update of UDP — is a suitable alternative.</p> - -<div class="column-container"> -<div class="column-half"> -<h2 id="Tutorials">Tutorials</h2> - -<p>Learn how to use HTTP with guides and tutorials.</p> - -<dl> - <dt><a href="/en-US/docs/Web/HTTP/Overview">Overview of HTTP</a></dt> - <dd>The basic features of the client-server protocol: what it can do and its intended uses.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Caching">HTTP Cache</a></dt> - <dd>Caching is very important for fast Web sites. This article describes different methods of caching and how to use HTTP Headers to control them.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Cookies">HTTP Cookies</a></dt> - <dd>How cookies work is defined by <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a>. When serving an HTTP request, a server can send a <code>Set-Cookie</code> 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 <code>Cookie</code> request header. The cookie can also be set to expire on a certain date, or restricted to a specific domain and path.</dd> - <dt><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></dt> - <dd><strong>Cross-site HTTP requests</strong> are HTTP requests for resources from a <strong>different domain</strong> than the domain of the resource making the request. For instance, an HTML page from Domain A (<code>http://domaina.example/</code>) makes a request for an image on Domain B (<code>http://domainb.foo/image.jpg</code>) via the <code>img</code> 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.</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Evolution of HTTP</a></dt> - <dd>A brief description of the changes between the early versions of HTTP, to the modern HTTP/2, the emergent HTTP/3 and beyond.</dd> - <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Mozilla web security guidelines</a></dt> - <dd>A collection of tips to help operational teams with creating secure web applications.</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/Web/HTTP/Messages">HTTP Messages</a></dt> - <dd>Describes the type and structure of the different kind of messages of HTTP/1.x and HTTP/2.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Session">A typical HTTP session</a></dt> - <dd>Shows and explains the flow of a usual HTTP session.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></dt> - <dd>Describes the three connection management models available in HTTP/1.x, their strengths, and their weaknesses.</dd> -</dl> -</div> - -<div class="column-half"> -<h2 id="Reference">Reference</h2> - -<p>Browse through detailed HTTP reference documentation.</p> - -<dl> - <dt><a href="/en-US/docs/Web/HTTP/Headers">HTTP Headers</a></dt> - <dd>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 <code>X-</code> prefix; others in an <a href="https://www.iana.org/assignments/message-headers/message-headers.xhtml#perm-headers">IANA registry</a>, whose original content was defined in <a href="https://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA also maintains a <a href="https://www.iana.org/assignments/message-headers/message-headers.xhtml#prov-headers">registry of proposed new HTTP message headers</a>.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Methods">HTTP Request Methods</a></dt> - <dd>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")}}.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Response_codes">HTTP Status Response Codes</a></dt> - <dd>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.</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">CSP directives</a></dt> - <dd>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.</dd> -</dl> - -<h2 id="Tools_resources">Tools & resources</h2> - -<p>Helpful tools and resources for understanding and debugging HTTP.</p> - -<dl> - <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt> - <dd><a href="/en-US/docs/Tools/Network_Monitor">Network monitor</a></dd> - <dt><a href="https://observatory.mozilla.org/">Mozilla Observatory</a></dt> - <dd> - <p>A project designed to help developers, system administrators, and security professionals configure their sites safely and securely.</p> - </dd> - <dt><a class="external" href="https://redbot.org/">RedBot</a></dt> - <dd>Tools to check your cache-related headers</dd> - <dt><a href="https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How Browsers Work</a></dt> - <dd>A very comprehensive article on browser internals and request flow through HTTP protocol. A MUST-READ for any web developer.</dd> -</dl> -</div> -</div> 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 ---- -<div>{{HTTPSidebar}}</div> - -<p class="summary"><span class="seoSummary">HTTP response status codes indicate whether a specific <a href="/en-US/docs/Web/HTTP">HTTP</a> request has been successfully completed. Responses are grouped in five classes: </span></p> - -<ol> - <li><span class="seoSummary">Informational responses (<code>100</code>–<code>199</code>),</span></li> - <li><span class="seoSummary">Successful responses (<code>200</code>–<code>299</code>),</span></li> - <li><span class="seoSummary">Redirects (<code>300</code>–<code>399</code>),</span></li> - <li><span class="seoSummary">Client errors (<code>400</code>–<code>499</code>),</span></li> - <li><span class="seoSummary">and Server errors (<code>500</code>–<code>599</code>).</span></li> -</ol> - -<p>The below status codes are defined by <a href="https://tools.ietf.org/html/rfc2616#section-10">section 10 of RFC 2616</a>. You can find an updated specification in <a href="https://tools.ietf.org/html/rfc7231#section-6.5.1">RFC 7231</a>.</p> - -<div class="blockIndicator note"> -<p>If you receive a response that is not in this list, it is a non-standard response, possibly custom to the server's software.</p> -</div> - -<h2 id="Information_responses">Information responses</h2> - -<dl> - <dt>{{HTTPStatus(100, "100 Continue")}}</dt> - <dd>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.</dd> - <dt>{{HTTPStatus(101, "101 Switching Protocol")}}</dt> - <dd>This code is sent in response to an {{HTTPHeader("Upgrade")}} request header from the client, and indicates the protocol the server is switching to.</dd> - <dt>{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})</dt> - <dd>This code indicates that the server has received and is processing the request, but no response is available yet.</dd> - <dt>{{HTTPStatus(103, "103 Early Hints")}}</dt> - <dd>This status code is primarily intended to be used with the {{HTTPHeader("Link")}} header, letting the user agent start <a href="/en-US/docs/Web/HTML/Preloading_content">preloading</a> resources while the server prepares a response.</dd> -</dl> - -<h2 id="Successful_responses">Successful responses</h2> - -<dl> - <dt>{{HTTPStatus(200, "200 OK")}}</dt> - <dd>The request has succeeded. The meaning of the success depends on the HTTP method: - <ul> - <li><code>GET</code>: The resource has been fetched and is transmitted in the message body.</li> - <li><code>HEAD</code>: The entity headers are in the message body.</li> - <li><code>PUT</code> or <code>POST</code>: The resource describing the result of the action is transmitted in the message body.</li> - <li><code>TRACE</code>: The message body contains the request message as received by the server</li> - </ul> - </dd> - <dt>{{HTTPStatus(201, "201 Created")}}</dt> - <dd>The request has succeeded and a new resource has been created as a result. This is typically the response sent after <code>POST</code> requests, or some <code>PUT</code> requests.</dd> - <dt>{{HTTPStatus(202, "202 Accepted")}}</dt> - <dd>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.</dd> - <dt>{{HTTPStatus(203, "203 Non-Authoritative Information")}}</dt> - <dd>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.</dd> - <dt>{{HTTPStatus(204, "204 No Content")}}</dt> - <dd>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.</dd> - <dt>{{HTTPStatus(205, "205 Reset Content")}}</dt> - <dd>Tells the user-agent to reset the document which sent this request.</dd> - <dt>{{HTTPStatus(206, "206 Partial Content")}}</dt> - <dd>This response code is used when the {{HTTPHeader("Range")}} header is sent from the client to request only part of a resource.</dd> - <dt>{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}})</dt> - <dd>Conveys information about multiple resources, for situations where multiple status codes might be appropriate.</dd> - <dt>{{HTTPStatus(208, "208 Already Reported")}} ({{Glossary("WebDAV")}})</dt> - <dd>Used inside a <code><dav:propstat></code> response element to avoid repeatedly enumerating the internal members of multiple bindings to the same collection.</dd> - <dt>{{HTTPStatus(226, "226 IM Used")}} (<a href="https://tools.ietf.org/html/rfc3229">HTTP Delta encoding</a>)</dt> - <dd>The server has fulfilled a <code>GET</code> request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance.</dd> -</dl> - -<h2 id="Redirection_messages">Redirection messages</h2> - -<dl> - <dt>{{HTTPStatus(300, "300 Multiple Choice")}}</dt> - <dd>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.)</dd> - <dt>{{HTTPStatus(301, "301 Moved Permanently")}}</dt> - <dd>The URL of the requested resource has been changed permanently. The new URL is given in the response.</dd> - <dt>{{HTTPStatus(302, "302 Found")}}</dt> - <dd>This response code means that the URI of requested resource has been changed <em>temporarily</em>. Further changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.</dd> - <dt>{{HTTPStatus(303, "303 See Other")}}</dt> - <dd>The server sent this response to direct the client to get the requested resource at another URI with a GET request.</dd> - <dt>{{HTTPStatus(304, "304 Not Modified")}}</dt> - <dd>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.</dd> - <dt><code>305 Use Proxy</code> {{deprecated_inline}}</dt> - <dd>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.</dd> - <dt><code>306 unused</code></dt> - <dd>This response code is no longer used; it is just reserved. It was used in a previous version of the HTTP/1.1 specification.</dd> - <dt>{{HTTPStatus(307, "307 Temporary Redirect")}}</dt> - <dd>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 <code>302 Found</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: If a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd> - <dt>{{HTTPStatus(308, "308 Permanent Redirect")}}</dt> - <dd>This means that the resource is now permanently located at another URI, specified by the <code>Location:</code> HTTP Response header. This has the same semantics as the <code>301 Moved Permanently</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: If a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd> -</dl> - -<h2 id="Client_error_responses">Client error responses</h2> - -<dl> - <dt>{{HTTPStatus(400, "400 Bad Request")}}</dt> - <dd>The server could not understand the request due to invalid syntax.</dd> - <dt>{{HTTPStatus(401, "401 Unauthorized")}}</dt> - <dd>Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response.</dd> - <dt>{{HTTPStatus(402, "402 Payment Required")}} {{experimental_inline}}</dt> - <dd>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.</dd> - <dt>{{HTTPStatus(403, "403 Forbidden")}}</dt> - <dd>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.</dd> - <dt>{{HTTPStatus(404, "404 Not Found")}}</dt> - <dd>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.</dd> - <dt>{{HTTPStatus(405, "405 Method Not Allowed")}}</dt> - <dd>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, <code>GET</code> and <code>HEAD</code>, must never be disabled and should not return this error code.</dd> - <dt>{{HTTPStatus(406, "406 Not Acceptable")}}</dt> - <dd>This response is sent when the web server, after performing <a href="/en-US/docs/HTTP/Content_negotiation#Server-driven_negotiation">server-driven content negotiation</a>, doesn't find any content that conforms to the criteria given by the user agent.</dd> - <dt>{{HTTPStatus(407, "407 Proxy Authentication Required")}}</dt> - <dd>This is similar to 401 but authentication is needed to be done by a proxy.</dd> - <dt>{{HTTPStatus(408, "408 Request Timeout")}}</dt> - <dd>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.</dd> - <dt>{{HTTPStatus(409, "409 Conflict")}}</dt> - <dd>This response is sent when a request conflicts with the current state of the server.</dd> - <dt>{{HTTPStatus(410, "410 Gone")}}</dt> - <dd>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.</dd> - <dt>{{HTTPStatus(411, "411 Length Required")}}</dt> - <dd>Server rejected the request because the <code>Content-Length</code> header field is not defined and the server requires it.</dd> - <dt>{{HTTPStatus(412, "412 Precondition Failed")}}</dt> - <dd>The client has indicated preconditions in its headers which the server does not meet.</dd> - <dt>{{HTTPStatus(413, "413 Payload Too Large")}}</dt> - <dd>Request entity is larger than limits defined by server; the server might close the connection or return an <code>Retry-After</code> header field.</dd> - <dt>{{HTTPStatus(414, "414 URI Too Long")}}</dt> - <dd>The URI requested by the client is longer than the server is willing to interpret.</dd> - <dt>{{HTTPStatus(415, "415 Unsupported Media Type")}}</dt> - <dd>The media format of the requested data is not supported by the server, so the server is rejecting the request.</dd> - <dt>{{HTTPStatus(416, "416 Range Not Satisfiable")}}</dt> - <dd>The range specified by the <code>Range</code> 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.</dd> - <dt>{{HTTPStatus(417, "417 Expectation Failed")}}</dt> - <dd>This response code means the expectation indicated by the <code>Expect</code> request header field can't be met by the server.</dd> - <dt>{{HTTPStatus(418, "418 I'm a teapot")}}</dt> - <dd>The server refuses the attempt to brew coffee with a teapot.</dd> - <dt>{{HTTPStatus(421, "421 Misdirected Request")}}</dt> - <dd>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.</dd> - <dt>{{HTTPStatus(422, "422 Unprocessable Entity")}} ({{Glossary("WebDAV")}})</dt> - <dd>The request was well-formed but was unable to be followed due to semantic errors.</dd> - <dt>{{HTTPStatus(423, "423 Locked")}} ({{Glossary("WebDAV")}})</dt> - <dd>The resource that is being accessed is locked.</dd> - <dt>{{HTTPStatus(424, "424 Failed Dependency")}} ({{Glossary("WebDAV")}})</dt> - <dd>The request failed due to failure of a previous request.</dd> - <dt>{{HTTPStatus(425, "425 Too Early")}}</dt> - <dd>Indicates that the server is unwilling to risk processing a request that might be replayed.</dd> - <dt>{{HTTPStatus(426, "426 Upgrade Required")}}</dt> - <dd>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).</dd> - <dt>{{HTTPStatus(428, "428 Precondition Required")}}</dt> - <dd>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.</dd> - <dt>{{HTTPStatus(429, "429 Too Many Requests")}}</dt> - <dd>The user has sent too many requests in a given amount of time ("rate limiting").</dd> - <dt>{{HTTPStatus(431, "431 Request Header Fields Too Large")}}</dt> - <dd>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.</dd> - <dt>{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}</dt> - <dd>The user-agent requested a resource that cannot legally be provided, such as a web page censored by a government.</dd> -</dl> - -<h2 id="Server_error_responses">Server error responses</h2> - -<dl> - <dt>{{HTTPStatus(500, "500 Internal Server Error")}}</dt> - <dd>The server has encountered a situation it doesn't know how to handle.</dd> - <dt>{{HTTPStatus(501, "501 Not Implemented")}}</dt> - <dd>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 <code>GET</code> and <code>HEAD</code>.</dd> - <dt>{{HTTPStatus(502, "502 Bad Gateway")}}</dt> - <dd>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.</dd> - <dt>{{HTTPStatus(503, "503 Service Unavailable")}}</dt> - <dd>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 <code>Retry-After:</code> 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.</dd> - <dt>{{HTTPStatus(504, "504 Gateway Timeout")}}</dt> - <dd>This error response is given when the server is acting as a gateway and cannot get a response in time.</dd> - <dt>{{HTTPStatus(505, "505 HTTP Version Not Supported")}}</dt> - <dd>The HTTP version used in the request is not supported by the server.</dd> - <dt>{{HTTPStatus(506, "506 Variant Also Negotiates")}}</dt> - <dd>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.</dd> - <dt>{{HTTPStatus(507, "507 Insufficient Storage")}} ({{Glossary("WebDAV")}})</dt> - <dd>The method could not be performed on the resource because the server is unable to store the representation needed to successfully complete the request.</dd> - <dt>{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})</dt> - <dd>The server detected an infinite loop while processing the request.</dd> - <dt>{{HTTPStatus(510, "510 Not Extended")}}</dt> - <dd>Further extensions to the request are required for the server to fulfil it.</dd> - <dt>{{HTTPStatus(511, "511 Network Authentication Required")}}</dt> - <dd>The 511 status code indicates that the client needs to authenticate to gain network access.</dd> -</dl> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("http.status")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes">List of HTTP status codes on Wikipedia</a></li> - <li><a href="http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml">IANA official registry of HTTP status codes</a></li> -</ul> 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 ---- -<p>উন্মুক্ত বা ওপেন ওয়েব ডেভেলপারদের অসাধারণ সকল সুযোগ-সুবিধা প্রদান করছে। এইসকল প্রযুক্তির সম্পূর্ণ সুবিধা আদায় করে নিতে হলে আপনাকে অবশ্যই এদের সম্পর্কে জানতে হবে। নিচে বিভিন্ন ওয়েব প্রযুক্তি সম্পর্কে আমাদের লেখা আর্টিকেলগুলোর লিংক পাওয়া যাবে । </p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="ওয়েব_প্রযুক্তি">ওয়েব প্রযুক্তি</h2> - -<h3 id="প্রারম্ভিক">প্রারম্ভিক</h3> - -<dl> - <dt><a href="/en-US/docs/Web/HTML">HTML</a></dt> - <dd>হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ হল ওয়েব পেজের মূল ভাষা, যার মাধ্যমে ওয়েব কন্টেন্টের বর্ণনা এবং নির্ধারণ করা হয়।</dd> - <dt><a href="/en-US/docs/Web/CSS">CSS</a></dt> - <dd>ক্যাসকেডিং স্টাইল শিট ওয়েব কন্টেন্টের ডিজাইন তৈরীতে ব্যবহার করা হয় । </dd> -</dl> - -<h3 id="স্ক্রিপ্টিং">স্ক্রিপ্টিং</h3> - -<dl> - <dt><a href="/en-US/docs/Web/JavaScript">JavaScript</a></dt> - <dd>JavaScript হল একটা প্রোগ্রামিং ল্যাঙ্গুয়েজ যেটা ব্রাউজার এর মধ্যে চলে ,যেটা অত্যাধুনিক ইউজার ইন্টারঅ্যাক্টিভ ওয়েবসাইট ও অ্যাপ্লিকেশান তৈরি তে ব্যাবহৃত হয়।</dd> - <dt><a href="/en-US/docs/Web/Reference/API">Web APIs</a></dt> - <dd>Reference material for each of the individual APIs that comprise the Web's powerful scriptability, including the <a href="/en-US/docs/DOM">DOM</a> and all of the related APIs and interfaces you can use to build Web content and apps. - <ul> - <li><a href="/en-US/docs/Web/API" title="/en-US/docs/Web/API">Web API interface reference</a> <span style="color: rgb(0, 0, 0); font-family: georgia; font-size: 16px; line-height: normal;">- সব ইন্টারফেস, alphabetically আয়োজন করা।</span></li> - <li><a href="/en-US/docs/WebAPI">WebAPI</a> <span style="color: rgb(0, 0, 0); font-family: georgia; font-size: 16px; line-height: normal;">page যন্ত্র প্রবেশগম্যতা apis আর অন্য apis উপকারি এ্যাপ্লিকেশন-এর জন্য সাজায়</span></li> - </ul> - </dd> -</dl> - -<h3 id="গ্রাফিক্স">গ্রাফিক্স</h3> - -<dl> - <dt><a href="/en-US/docs/SVG">SVG</a></dt> - <dd>আকার পরিবর্তনযোগ্য ভেক্টর গ্রাফিক্স, আপনি তাদের তারা টানা করছি, যা এ নির্বিশেষে আকার সহজে আকার পরিবর্তন করার অনুমতি দেয় ,যাতে ভেক্টর এবং আকার সেট হিসাবে ইমেজ বর্ণনা দেওয়া.</dd> - <dt><a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a></dt> - <dd>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</dd> -</dl> - -<h3 id="অন্যান্য">অন্যান্য</h3> - -<dl> - <dt><a href="/en-US/docs/Web/MathML">MathML</a></dt> - <dd><span style="color: rgb(0, 0, 0); font-family: georgia; font-size: 16px; line-height: normal;">গাণিতিক markup ভাষা এটা সম্ভব জটিল গাণিতিক সমীকরণ আর বাক্যপ্রকরণ প্রদর্শন করতে বানায়।</span></dd> -</dl> -</div> - -<div class="section"> -<h2 class="Documentation" id="ধরণ_অনুযায়ী_ডকুমেন্টেশন">ধরণ অনুযায়ী ডকুমেন্টেশন</h2> - -<dl> - <dt><a href="/en-US/docs/Web/Guide"> ওয়েব উন্নতিকারক নির্দেশিকা</a></dt> - <dd><span style="color: rgb(0, 0, 0); font-family: georgia; font-size: 16px; line-height: normal;">ওয়েব ডেভেলাপার গাইড উপকারি how-to অভ্যন্তরস্থ বস্তু আপনি ওয়েব প্রযুক্তি আসলে ব্যবহার করেন করতে যা আপনি চান বা করতে দরকার হতে সাহায্য করতে দেয়।</span></dd> - <dt><a href="/en-US/docs/Web/Tutorials">ওয়েব উন্নতিকারকদের জন্য TUTORIALS</a></dt> - <dd><span style="color: rgb(0, 0, 0); font-family: georgia; font-size: 16px; line-height: normal;">tutorials-এর আপনাকে নিতে একটি লিষ্ট apis, প্রযুক্তি, বা চওড়া বিষয় এলাকা শেখা মধ্য দিয়ে ধাপে ধাপে।</span></dd> - <dt><a href="/en-US/docs/Web/Reference">References</a></dt> - <dd><span style="color: rgb(0, 0, 0); font-family: georgia; font-size: 16px; line-height: normal;">এই পাতা mdn-এর ওপরে সব বরাত তথ্যে সংযোগ প্রস্তাব করবে, কিন্তু এখনকার জন্য প্রযুক্তি-এর ব্যবহার একটা বাঁদিকের সেকশানে সংযোগ করবে</span></dd> -</dl> - -<h2 id="অন্যান্য_টপিক">অন্যান্য টপিক</h2> - -<dl> - <dt><a href="/en-US/docs/Web/Apps">Developing Web applications</a></dt> - <dd><span style="color: rgb(0, 0, 0); font-family: georgia; font-size: 16px; line-height: normal;">ওয়েব এ্যাপ্লিকেশন ডেভেলাপার-এর জন্য documentation; ওয়েব অ্যাপ্লিকেশন হচ্ছে সত্য write-once, deploy যেকোথাও এ্যাপস মোবাইল, ডেস্কটপ, আর ফায়ারফক্স os জন্য।</span></dd> - <dt><a href="/en-US/docs/Web/Accessibility">Accessibility</a></dt> - <dd><span style="color: rgb(0, 0, 0); font-family: georgia; font-size: 16px; line-height: normal;">ওয়েব উন্নয়নে accessibility সক্ষম করা যেহেতু অনেক মানুষ as সম্ভব ওয়েব সাইট ব্যবহার করতে, এমনকি যখন ওগুলো মানুষকে-এর সামর্থ্য কিছু পথে সীমাবদ্ধ করা হয় বুঝায়। এখানে আমরা সন্তুষ্ট হতে সহজগম্য তৈরী করতে তথ্য দেই।</span></dd> -</dl> -</div> -</div> - -<p><span class="alllinks"><a href="/bn-BD/docs/tag/Web">সব দেখুন...</a></span></p> - -<p> </p> 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 ---- -<div>{{jsSidebar}}</div> - -<h2 id="ভূমিকা">ভূমিকা</h2> - -<p><a href="/bn-BD/JavaScript" title="/bn-BD/JavaScript">জাভাস্ক্রিপ্ট</a> নিয়ে কেন নতুন করে ভূমিকা দেওয়ার দরকার পরল? কারণ <a href="http://javascript.crockford.com/javascript.html" title="http://javascript.crockford.com/javascript.html">দুনিয়ায় সবচেয়ে ভুল বোঝা প্রোগ্রামিং ভাষা</a> হিসেবে জাভাস্ক্রিপ্টের ব্যাপক খ্যাতি (!) আছে। আমাদের অনেকেই সি/জাভা/পিএইচপি বা অন্য কোন ভাষায় কোডে মোটামোটি ভালভাবে শিখে ফেলার পরে জাভাস্ক্রিপ্ট শিখতে গিয়ে দেখি বাহ, এটা তো সি/জাভা'র মতই! তারপর ভালমত না শিখেই কাজ করতে যাই জাভাস্ক্রিপ্টে... প্রত্যাশা মত ফলাফল আসে না আর এরপর গলা খুলে জাভাস্ক্রিপ্টের গালমন্দ করি। অথচ জাভাস্ক্রিপ্ট অনেক শক্তিশালী - যেটা অনেক সময় ভাষাটির সহজ-সরল চেহারা দেখে বুঝে ওঠা হয় না। ২০০৫ এ আমরা দেখেছি অনেক নামী-দামী জাভাস্ক্রিপ্ট এপ্লিকেশন বাজারে এসেছে - কাজেই জাভাস্ক্রিপ্টে গভীর জ্ঞান রাখা যে যেকোন ডেভেলপারের জন্য আবশ্যকীয় সেটা না বললেও চলবে!</p> - -<p>ভাষাটির ইতিহাস দিয়ে শুরু করা যাক। ১৯৯৫ সালে নেটস্কেপের প্রকৌশলী Brendan Eich জাভাস্ক্রিপ্ট তৈরি করেন, যেটা মুক্তি পায় ১৯৯৬ সালের শুরুর দিকে নেটস্কেপ ২ (ব্রাউজার) এর সাথে। এর নাম দেয়া হয়েছিল LiveScript, কিন্তু মার্কেটিং কৌশলের গ্যাড়াকলে পড়ে দুর্ভাগ্যজনত এর নাম জাভাস্ক্রিপ্ট হয়ে যায়, সান মাইক্রোসিস্টেম এর জাভা ল্যাংগুয়েজের জনপ্রিয়তাকে পুঁজি করার জন্য। জাভা আর জাভাস্ক্রিপ্টের মাঝে তেমন কোন মিল না থাকা সত্ত্বেও সেই থেকে তাই জাভাস্ক্রিপ্ট নামটা নিয়ে বিভ্রান্তি থেকে গেছে।</p> - -<p>মাইক্রোসফট এই প্রোগ্রামিং ভাষার সাথে প্রায় মিলে যায় এরকম একটি ল্যাংগুয়েজ JScript নাম দিয়ে প্রায় ৩ মাস পর ইন্টারনেট এক্সপ্লোরারের সাথে বাজারে নিয়ে আসে। এদিকে নেটস্কেপ <a class="external" href="http://www.ecma-international.org/">Ecma International</a> (স্ট্যান্ডার্ড নির্ধারণ করে এরকম একটি ইউরোপীয়ান সংস্থা) এর কাছে ল্যাংগুয়েজটি উপস্থাপন করে - যার ফলাফল ১৯৯৭ সালে <a href="https://developer.mozilla.org/en/JavaScript/Language_Resources" title="en/ECMAScript">ECMAScript</a> এর প্রথম সংস্করণ হিসেবে বাজারে আসে। ১৯৯৯ সালে এই স্ট্যান্ডার্ডটি আরো উন্নত হয় <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript সংস্করণ ৩</a> হিসেবে - আর সেই থেকে ভাষাটির তেমন কোন বড় পরিবর্তন হয়নি। চতুর্থ সংস্করণটি ভেস্তে যায়, ভাষাটির জটিলতা নিয়ে মতবিরোধের ফলাফল হিসেবে। তবে এই চতুর্থ সংস্করণের অনেক অংশবিশেষ কে ভিত্তি হিসেবে ধরে ২০০৯ সালে নতুন ECMAScript এর পঞ্চম সংস্করণ প্রকাশ করা হয় এবং এর ৬ষ্ঠ মূখ্য সংস্করণ বের হয় ২০১৫ সালের জুনে। </p> - -<p>Specification মোটামোটি অপরিবর্তিত থাকাটা আসলে ডেভেলপারদের জন্য খুশির খবর, কারণ অনেকেই এর মাঝে ভাষাটির সাথে খাপ খাইয়ে নিতে পেরেছেন। আমি বিশেষভাবে, ৩য় সংস্করণের বিশেষ বিশেষ অংশ নিয়ে আলোচনা করব এখন, আর সবার পরিচিত নাম জাভাস্ক্রিপ্ট ব্যাবহার করব।</p> - -<p>অন্য সব প্রোগ্রামিং ভাষার সাথে জাভাস্ক্রিপ্টের বড় অমিল হল - এতে কোন ইনপুট/আউটপুটের বালাই নেই। একটা হোস্ট এনভায়রনমেন্টে চলবে ধরে নিয়েই জাভাস্ক্রিপ্ট ডিজাইন করা হয়েছে - সবচেয়ে পরিচিত হোস্ট এনভায়রনমেন্ট হচ্ছে ব্রাউজার। হোস্ট এনভায়রনমেন্টের দায়িত্ব হচ্ছে জাভাস্ক্রিপ্ট কীভাবে বাইরের জগতের সাথে ডেটা আদান প্রদান বা যোগাযোগ করবে সেটার আয়োজন করা। ব্রাউজার ছাড়াও Adobe Acrobat, Photoshop, Yahoo!'র Widget engine এমনকি সার্ভারে-চলে এরকম পরিবেশেও জাভাস্ক্রিপ্ট ইন্টারপ্রেটারের ব্যবহার দেখা যায়।</p> - -<h2 id="হালকা_পাতলা_ধারণা">হালকা পাতলা ধারণা</h2> - -<p>জাভাস্ক্রিপ্ট একটি ওবজেক্ট-ওরিয়েন্টেড, ডায়নামিক প্রোগ্রামিং ভাষা। এতে আছে ডেটা টাইপ, অপারেটর, গুরুত্বপূর্ণ কিছু অবজেক্ট (যেগুলো সব সময় আপনি ব্যবহার করতে পারবেন) আর ফাংশন বা মেথড। জাভা আর সি প্রোগ্রামিং ভাষা থেকে বেশ কিছু সিন্ট্যাক্স ধার করে নেওয়ায় যারা এসব ভাষায় পারদর্শী তাদের জন্য সুখবর আরকি! তবে অন্য অনেক ভাষার সাথে জাভাস্ক্রিপ্ট এর একটা বড় পার্থক্য হল এতে কোন ক্লাস (class) নেই, বরং "প্রটোটাইপ" নামের নতুন এক ধারণা কে কাজে লাগিয়ে ক্লাস এর কাজ কর্ম করা হয়ে থাকে। আরো একটা বড় পার্থক্য হল জাভাস্ক্রিপ্ট এ যেকোন "ফাংশন" আসলে একেককটি অবজেক্ট! ফাংশনে আপনি কোড রাখতে পারবেন, আরো পারবেন অবজেক্টের মত কোডের এক জায়গা থেকে আরেক জায়গায় পাস (pass) করাতে।</p> - -<p>চলুন শুরু করি যেকোন ভাষার মৌলিক উপাদান নিয়ে: type মানে কী কী রকমের ডেটা থাকতে পারে। জাভাস্ক্রিপ্টে যেসব টাইপ আছে সেগুলো হলঃ</p> - -<ul> - <li><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Number">সংখ্যা (Numbers)</a></li> - <li><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/String" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String">স্ট্রিং (Strings</a>)</li> - <li><a href="/en/JavaScript/Reference/Global_Objects/Boolean" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">বুলিয়ান (Boolean)</a></li> - <li><a href="/en/JavaScript/Reference/Global_Objects/Function" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Function">ফাংশন (Functions)</a></li> - <li><a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Object">অবজেক্ট (Objects)</a></li> -</ul> - -<p>... আরও আছে বিশেষ দু'টি টাইপ - "Undefined" আর "Null". আর আছে <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Arrays</a>, যেটি আসলে অবজেক্টের-ই একটি বিশেষ ধরণ। আছে তারিখ নিয়ে কাজকারবারের জন্যে <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Date">Dates</a>, আছে <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp" title="en/Core_JavaScript_1.5_Reference/Global_Objects/RegExp">Regular Expressions</a> - এগুলোও অবজেক্ট। আর আগেই তো বলা হয়েছে জাভাস্ক্রিপ্টে ফাংশন-ও আসলে অবজেক্ট। টাইপ হচ্ছে তাই:</p> - -<ul> - <li>সংখ্যা (Number)</li> - <li>স্ট্রিং (String)</li> - <li>বুলিয়ান</li> - <li>অবজেক্ট - <ul> - <li>ফাংশন</li> - <li>Array</li> - <li>Date</li> - <li>RegExp</li> - </ul> - </li> - <li>Null (নাল)</li> - <li>Undefined (অসংজ্ঞায়িত)</li> -</ul> - -<p>ওহ আর বলতে প্রায় ভুলেই গিয়েছিলাম, ত্রুটি ধরার জন্যে কিছু <a href="/en/JavaScript/Reference/Global_Objects/Error" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Error">Error</a> টাইপও আছে।</p> - -<h2 id="সংখ্যা_বা_Numbers">সংখ্যা বা Numbers</h2> - -<p>সংখ্যা টাইপ জাভাস্ক্রিপ্ট এ "<a href="http://en.wikipedia.org/wiki/Double-precision_floating-point_format" title="http://en.wikipedia.org/wiki/Double-precision_floating-point_format">double-precision 64-bit format IEEE 754 values</a>", নির্দেশনা অনুসরণ করে। ফলস্বরূপ কিছু বিশেষ ঘটনা ঘটতে পারে। জাভাস্ক্রিপ্টে কোন "Integer" ধরণের টাইপ নাই, তাই অংক কষার সময় মাঝে মাঝে একটু সচেতন থাকবেন C অথবা জাভা ডেভেলপাররা। যেমন ধরুনঃ</p> - -<pre class="eval">0.1 + 0.2 == 0.30000000000000004 -</pre> - -<p>বাস্তবে integer গুলোকে ৩২-বিট ইন্টেজার ধরে নিয়ে কাজ করে জাভাস্ক্রিপ্ট (আর সংরকষণ ও একই ভাবে কিছু ব্রাউজারে করা হয়ে থাকে)। Bit-wise অপারেশন করার সময় এটা মাথায় রাখতে হবে। বিস্তারিত দেখতে পারেন <a href="http://www.hunlock.com/blogs/The_Complete_Javascript_Number_Reference" title="http://www.hunlock.com/blogs/The_Complete_Javascript_Number_Reference">জাভাস্ক্রিপ্টের পূর্ণাঙ্গ Number রেফারেন্স </a>এ।</p> - -<p>অংক কষার জন্য স্ট্যান্ডার্ড সব <a href="/en/JavaScript/Reference/Operators/Arithmetic_Operators" title="/en/JavaScript/Reference/Operators/Arithmetic_Operators">অপারেটর</a> জাভাস্ক্রিপ্টে আছে, যোগ বিয়োগ, ভাগশেষ (modulus) ইত্যাদি নিয়ে কাজ করা যায়। বলতে ভুলে গেছি <a href="/en/JavaScript/Reference/Global_Objects/Math" title="/en/JavaScript/Reference/Global_Objects/Math">Math</a> নামে একটি গ্লোবাল অবজেক্ট আছে গণিত নিয়ে বিশদভাবে কাজকারবার করার জন্যেঃ</p> - -<pre class="brush: js">Math.sin(3.5); -var d = Math.PI * r * r; -</pre> - -<p>বিল্ট-ইন <code><a href="/en/JavaScript/Reference/Global_Objects/parseInt" title="en/Core_JavaScript_1.5_Reference/Global_Functions/parseInt">parseInt()</a></code> ফাংশন ব্যবহার করে কোন string কে integer এ রূপান্তর করতে পারবেন। আর ফাংশনের দ্বিতীয় প্যারামিটার হিসেবে রূপান্তরের ভিত্তি (base) দিতে পারবেন, যদিও এই দ্বিতীয় প্যারামিটার টা ঐচ্ছিক এটা অবশ্যই দেওয়া উচিতঃ</p> - -<pre class="brush: js">> parseInt("123", 10) -123 -> parseInt("010", 10) -10 -</pre> - -<p>২য় প্যারামিটারে base না পাঠালে অপ্রত্যাশিত ফলাফল আসতে পারেঃ</p> - -<pre class="brush: js">> parseInt("010") -8 -</pre> - -<p>এমন ফল এসেছে কারণ শুরুতে 0 দেখে parseInt ফাংশনটা ধরে নিয়েছে ১ম প্যারামিটারে পাঠানো সংখ্যাটা অকটাল ভিত্তিতে আছে।</p> - -<p>বাইনারী সংখ্যাকে দশমিক ভিত্তিতে নিয়ে আসা একদম সোজাঃ</p> - -<pre class="brush: js">> parseInt("11", 2) -3 -</pre> - -<p>একইভাবে <code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/parseFloat" title="en/JavaScript/Reference/Global Objects/parseFloat">parseFloat()</a> </code>নামেও বিল্ট-ইন ফাংশন আছে যেটা দিয়ে ভগ্নাংশ (floating point number) এ রূপান্তর (parse) করা যায়। তবে parseInt() এর সাথে এর একট অমিল - এটা সবসময় দশমিক ভিত্তিতে আছে ধরে নিয়ে কাজকর্ম করে।</p> - -<p>"+" অপারেটর ব্যবহার করেও কোন মান কে সংখ্যায় রূপান্তর করা যায়। এখানে "+" ইউনারী অপারেটর হিসেবে কাজ করেঃ</p> - -<pre>> + "42" -42 -</pre> - -<p>তবে আপনি যদি সংখ্যা নয়, এমন কোন String কে পার্স করতে যান তাহলে বিশেষ এক ধরণের মান ফাংশনের return ভ্যালু হিসেবে পাওয়া যায় - <code><a href="/en/JavaScript/Reference/Global_Objects/NaN" title="en/Core_JavaScript_1.5_Reference/Global_Properties/NaN">NaN</a></code> ("Not a Number" এর সংক্ষিপ্ত রূপ):</p> - -<pre class="brush: js">> parseInt("hello", 10) -NaN -</pre> - -<p><code>গাণিতিক কোন অপারেটর এর কোন এক </code><code>NaN</code><code> পাশে থাকলেই ফলাফাল হিসেবে </code><code>NaN</code><code> পাওয়া যাবেঃ</code></p> - -<pre class="brush: js">> NaN + 5 -NaN -</pre> - -<p>বিল্ট-ইন <code><a href="/en/JavaScript/Reference/Global_Objects/isNaN" title="en/Core_JavaScript_1.5_Reference/Global_Functions/isNaN">isNaN()</a></code> ফাংশন ব্যবহার করে বের করতে পারবেন কোন কিছু NaN কিনাঃ</p> - -<pre class="brush: js">> isNaN(NaN) -true -</pre> - -<p>জাভাস্ক্রিপ্টে অসীম মান নিয়ে কাজ করার জন্য আছে বিশেষ মান <code><a href="/en/JavaScript/Reference/Global_Objects/Infinity" title="en/Core_JavaScript_1.5_Reference/Global_Properties/Infinity">Infinity</a></code> এবং <code>-Infinity</code>:</p> - -<pre class="brush: js">> 1 / 0 -Infinity -> -1 / 0 --Infinity -</pre> - -<p>কোন মান <code>Infinity</code>, <code>-Infinity</code> অথবা <code>NaN</code> কিনা টেস্ট করতে পারবনে বিল্ট-ইন <code><a href="/en/JavaScript/Reference/Global_Objects/isFinite" title="en/Core_JavaScript_1.5_Reference/Global_Functions/isFinite">isFinite()</a></code> ফাংশন দিয়েঃ</p> - -<pre class="brush: js">> isFinite(1/0) -false -> isFinite(-Infinity) -false -> isFinite(NaN) -false -</pre> - -<div class="note"><strong>খেয়াল করুনঃ </strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/parseInt" title="en/JavaScript/Reference/Global Objects/parseInt"><code>parseInt()</code></a> আর <code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/parseFloat" title="en/JavaScript/Reference/Global Objects/parseFloat">parseFloat()</a></code> ফাংশন দুইটি আপনার দেয়া প্যারামিটারকে ততক্ষণ পার্স করতে থাকবে যতক্ষণ না এটি প্যারামিটারে এমন কোন অক্ষর (character) পাচ্ছে যেটা কিনা অবৈধ (মানে যে ভিত্তিতে বা base থেকে রূপান্তর করা হচ্ছে সেই ভিত্তিতে এই অক্ষরটি থাকতে পারে না)। ফাংশনদুটি এই প্রথম অবৈধ অক্ষর এর আগ পর্যন্ত পার্স করে রিটার্ন করবে। তবে, "+" অপারেটর টি অন্যরকম, প্যারামিটারে কোন অবৈধ ক্যারেকটার থাকলে এটা সোজাসাপটা NaN রিটার্ন করে। ব্যাপারটা ভাল মত বুঝার জন্যে "10.2abc" এটাকে দুইটা ফাংশন দিয়ে পার্স করার কোড লিখে দেখুন!</div> - -<h2 id="স্ট্রিং">স্ট্রিং</h2> - -<p>জাভাস্ক্রিপ্টে স্ট্রিং হল অন্য সব ভাষার মত পরপর অনেকগুলো ক্যারেকটার (character) - আরো ভালো মত বলতে গেলে <em>ইউনিকোড</em> ক্যারেক্টার। প্রতিটা ক্যারেকটারকে ১৬-বিট নাম্বার দিয়ে প্রকাশ করা যায়। তাই যাদের এপ্লিকেশনে বিভিন্ন ভাষাভাষী দেশের জন্যে সাপোর্ট দেয়া লাগবে তারা তালিয়া বাজাতে পারেন!</p> - -<p>আপনার যদি কখনো একটা মাত্র ক্যারেকটার ব্যবহার করার প্রয়োজন পরে, তাহলে ১ লেংথ (length) এর স্ট্রিং ব্যবহার করুন যেহেতু ক্যারেকটার বলে কোন টাইপ জাভাস্ক্রিপ্টে নাই।</p> - -<p>আগেই বলেছি জাভাস্ক্রিপ্টে সব স্ট্রিং ই একেক্টা অব্জেক্ট। কয়টা ক্যারেকটার আছে স্ট্রিং এ জানতে হলে <code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/length" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/length">length</a></code> প্রোপার্টি (অবজেক্ট এর ফাংশন) ব্যবহার করুন।</p> - -<pre class="brush: js">> "hello".length -5 -</pre> - -<p>এই প্রথম আমরা কোন অব্জেক্ট ব্যবহারের কোড দেখলাম! স্ট্রিং অবজেক্ট এর আরো অনেক <a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/String#Methods" title="/En/Core_JavaScript_1.5_Reference/Global_Objects/String#Methods">ফাংশন</a> ও কিন্তু আছেঃ</p> - -<pre class="brush: js">> "hello".charAt(0) -h -> "hello, world".replace("hello", "goodbye") -goodbye, world -> "hello".toUpperCase() -HELLO -</pre> - -<h2 id="অন্যান্য_টাইপ">অন্যান্য টাইপ</h2> - -<p>জাভাস্ক্রিপ্টের একটা অনন্য বৈশিষ্ট্য হল এটা null আর undefined এ দুটি জিনিস এক না। Null হচ্ছে 'অবজেক্ট' টাইপের এক ধরণের অবজেক্ট যেটা কোডার স্বেচ্ছায় কোন ভ্যারিয়েবলে এসাইন (asign) করেছেন। আর undefined হল 'undefined' টাইপের একটা অবজেক্ট - কোন ভ্যারিয়েবল যদি কোন ভ্যালু দিয়ে ইনিশিয়ালাইজ (initialize) করা না হয় (সোজা বাংলায় ভ্যারিয়েবল ডিক্লেয়ার করার সময় বা পরে যদি তাতে "=" চিহ্ন দিয়ে কোন মান এ্যাসাইন না করা হয়) তাহলে সেটা undefined অবস্থায় থাকে। ভ্যারিয়েবল নিয়ে আমরা পরে আলোচনা করব। জাভাস্ক্রিপ্টে ভ্যারিয়েবলে কোন ভ্যালু না দিয়েই ভ্যারিয়েবলটি তৈরি করা যায় - তখন তার ভ্যালু হিসেবে থাকে এই 'undefined'।</p> - -<p>জাভাস্ক্রিপ্টে বুলিয়ান বলে একটা টাইপ আছে, যার মান হতে পারে শুধুমাত্র true অথবা false (এই দুইটাই কি-ওয়ার্ড)। নিচের নিয়ম অনুযায়ী যেকোন ভ্যালু কে বুলিয়ানে কনভার্ট করা যায়ঃ</p> - -<ol> - <li><code>false</code>, <code>0</code>, শূন্য স্ট্রিং (<code>""</code>), <code>NaN</code>, <code>null</code>, এবং <code>undefined</code> এগুলাকে বুলিয়ানে কনভার্ট করলে <code>false পাওয়া যাবে।</code></li> - <li>অন্য যেকোন টাইপের ভ্যলু বুলিয়ানে কনভার্ট করলে <code>true পাওয়া যায়।</code></li> -</ol> - -<p><code>Boolean()</code> ফাংশন ব্যবহার করে আপনি এই কনভার্সন করেই ছাড়তে পারেনঃ</p> - -<pre class="brush: js">> Boolean("") -false -> Boolean(234) -true -</pre> - -<p>কিন্তু আমাদের এভাবে explicitly কনভার্ট করতে হবে না, কারণ জাভাস্ক্রিপ্ট যখন কোথাও বুলিয়ান প্রত্যাশা করে কিন্তু অন্য কোন টাইপ পায়, তখন সে চুপিচুপি এই কনভার্ট টি করে নেয়।</p> - -<p>অন্য ভাষার মত বুলিয়ান অপারেটর যেমন && (লজ্যিকাল AND), , <code>||</code> (লজ্যিকাল <em>or</em>), আর <code>!</code> (লজ্যিকাল <em>not</em>) আছে।</p> - -<h2 id="ভ্যারিয়েবল_(চলক!)">ভ্যারিয়েবল (চলক?!)</h2> - -<p><code><a href="/en/JavaScript/Reference/Statements/var" title="en/Core_JavaScript_1.5_Reference/Statements/var">var</a></code> কী-ওয়ার্ড ব্যবহার করে নতুন কোন ভ্যারিয়েবল তৈরি করুনঃ</p> - -<pre class="brush: js">var a; -var name = "simon"; -</pre> - -<p>আগেই বলেছি, ভ্যারিয়েবলে কোন ভ্যালু এসাইন না করলে সেটা <code>undefined</code> টাইপ হয়ে বসে থাকে।</p> - -<p><span style="color: #ff0000;">গুরুত্বপূর্ণঃ</span> অন্যান্য প্রোগ্রামিং ভাষার সাথে বড় একটা পার্থক্য হল জাভাস্ক্রিপ্ট কোডে ব্লক লেভেলে ভ্যারিয়েবলের স্কোপ বলে কিছু নেই। ভ্যারিয়েবল টা যেই ফাংশনে আছে, পুরা ফাংশনে এই ভ্যারিয়েবলের একটাই স্কোপ থাকে। তাই যদি কোন if বা লুপের মধ্যে কোন ভ্যারিয়েবল তৈরি করেন তাহলে পুরা ফাংশনেই সেটার স্কোপ থাকবে।</p> - -<h2 id="অপারেটর">অপারেটর</h2> - -<p>জাভাস্ক্রিপ্টের নিউমেরিক (numeric) অপারেটরগুলো হল <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code> আর <code>%</code> - মানে কিনা ভাগশেষ বের করার অপারেটর। <code>= ব্যবহার করে ভ্যারিয়েবলে ভ্যালু দেয়া হয়। জটিল এসাইনমেন্ট অপারেটরও আছে যেমন</code> <code>+=</code> আর <code>-=</code>। এই জটিল অপারেটরগুলোকে ভেঙ্গে এইভাবে কল্পনা করতে পারেনঃ <code>x = x <em>অপারেটর</em> y</code>.</p> - -<pre class="brush: js">x += 5 -x = x + 5 -</pre> - -<p>ভ্যারিয়েবলের ভ্যালু এক বাড়াতে বা কমাতে যথাক্রমে ++ আর -- অপারেটর ব্যবহার করতে পারেন। সি/জাভার মত এগুলোর প্রিফিক্স/পোস্টফিক্স দুটো ফর্ম-ই আছে।</p> - -<p>আর আমরা তো আগেই জেনেছি <a href="/en/JavaScript/Reference/Operators/String_Operators" title="en/Core_JavaScript_1.5_Reference/Operators/String_Operators"><code>+</code> অপারেটর</a> দিয়ে স্ট্রিং জোড়া লাগানো যায় (concatenation)</p> - -<pre class="brush: js">> "hello" + " world" -hello world -</pre> - -<p>আপনি যদি স্ট্রিং কে অন্য কোন সংখ্যা (বা অন্য কোন মান) এর সাথে যোগ করতে যান তাহলে সবকিছু প্রথমে স্ট্রিং এ কনভার্ট করে নেওয়া হয়ঃ</p> - -<pre class="brush: js">> "3" + 4 + 5 -345 -> 3 + 4 + "5" -75 -</pre> - -<p>কোন মানকে স্ট্রিং এ কনভার্ট করার তাই আরেকটা চোরাই বুদ্ধি হচ্ছে ঐ মানের সাথে <em>শূন্য স্ট্রিং</em> ("")যোগ করা।</p> - -<p><a href="/en/JavaScript/Reference/Operators/Comparison_Operators" title="/en/JavaScript/Reference/Operators/Comparison_Operators">তুলনা</a> (Compare) করার জন্যে জাভাস্ক্রিপ্টের কাছে আছে <code><</code>, <code>></code>, <code><=</code> আর <code>>=</code> অপারেটর। এগুলো সংখ্যা আর স্ট্রিং দুইটার বেলাতেই কাজ করে। তবে == অপারেটর ব্যবহার করে দুইটা মান সমান কিনা সেটা চেক করাটা একটু অপ্রত্যাশিত হতে পারে, কারণ == অপারেটরের দুই পাশে দুই ধরণের টাইপের ভ্যালু দিলে জাভাস্ক্রিপ্ট প্রয়োজন মত কনভার্ট করে নেয়ঃ</p> - -<pre class="brush: js">> "dog" == "dog" -true -> 1 == true -true -</pre> - -<p>জাভাস্ক্রিপ্টের এই মাতব্বরী বন্ধ করতে চাইলে === অপারেটর ব্যবহার করুনঃ</p> - -<pre class="brush: js">> 1 === true -false -> true === true -true -</pre> - -<p>আপনি হয়ত ভাবছেন <code>!=</code> আর <code>!==</code> অপারেটেরের কথা - হ্যা এগুলো তো আছেই।</p> - -<p>জাভাস্ক্রিপ্ট দিয়ে <a href="/en/JavaScript/Reference/Operators/Bitwise_Operators" title="/en/JavaScript/Reference/Operators/Bitwise_Operators">বিট-লেভেলে (bitwise) অপারেশন</a> ও করতে পারবেন।</p> - -<h2 id="কন্ট্রোল_স্ট্রাকচার">কন্ট্রোল স্ট্রাকচার</h2> - -<p>C বা জাভাতে ব্যবহার করে আসা if অথবা else জাভাস্ক্রিপ্টেও একইভাবে ব্যবহার করা যাবেঃ</p> - -<pre class="brush: js">var name = "kittens"; -if (name == "puppies") { - name += "!"; -} else if (name == "kittens") { - name += "!!"; -} else { - name = "!" + name; -} -name == "kittens!!" -</pre> - -<p>জাভাস্ক্রিপ্টে while আর do-while লুপ আছে, হুবুহু সি-জাভার মত। যদি চান যে লুপটি অন্ততঃ একবার চালাতেই হবে তাহলে do-while ব্যবহার করুন।</p> - -<pre class="brush: js">while (true) { - // an infinite loop! -} - -var input; -do { - input = get_input(); -} while (inputIsNotValid(input)) -</pre> - -<p>সি-জাভার মত for লুপ ব্যবহার করে এক লাইনেই লুপ কন্ট্রোল করতে পারেনঃ</p> - -<pre class="brush: js">for (var i = 0; i < 5; i++) { - // Will execute 5 times -} -</pre> - -<p>শর্ট-কাটে লজিক প্রয়োগ করতে পারেন && আর || অপারেটরের একটি অন্যরকম ব্যবহার করে। অপারেটর গুলোর ২য় অপারেন্ড কার্যকর (execute) হবে কিনা নির্ভর করে ১ম অপারেন্ডের ওপরঃ</p> - -<pre class="brush: js">var name = o && o.getName(); -</pre> - -<p>অথবা ডিফল্ট মান বসানোর জন্যঃ</p> - -<pre class="brush: js">var name = otherName || "default"; -</pre> - -<p>কন্ডিশনাল এক্সপ্রেশনের জন্য সি-জাভার মত টার্নারী অপারেটর (যেগুলোর অপারেন্ড ৩টি) ব্যবহার করতে পারেনঃ</p> - -<pre class="brush: js">var allowed = (age > 18) ? "yes" : "no"; -</pre> - -<p>একাধিক ব্রাঞ্চের কন্ট্রোল লজিকের জন্যে switch ব্যবহার করতে পারেন। জাভাস্ক্রিপ্টের switch-case স্ট্রিং এর জন্যে কাজ করেঃ</p> - -<pre class="brush: js">switch(action) { - case 'draw': - drawit(); - break; - case 'eat': - eatit(); - break; - default: - donothing(); -} -</pre> - -<p>break না ব্যবহার করলে পরের case এও আপনার কোডের কন্ট্রোল চলে যাবে - এরকম কোডিং সাধারণতঃ করা হয়না। তাই আপনি যদি break ব্যবহার না করেন তাহলে কমেন্টে লিখে রাখুন যাতে কনফিউশন তৈরি না হয়।</p> - -<pre class="brush: js">switch(a) { - case 1: // fallthrough - case 2: - eatit(); - break; - default: - donothing(); -} -</pre> - -<p>default ক্লজটি ঐচ্ছিক। আরেকটি মজার দিক হল switch আর case দু'জায়গাতেই আপনি এক্সপ্রেশন লিখতে পারেন। তুলনা করা হয় === অপারেটর ব্যবহার করেঃ</p> - -<pre class="brush: js">switch(1 + 3) { - case 2 + 2: - yay(); - break; - default: - neverhappens(); -} -</pre> - -<h2 id="অবজেক্ট">অবজেক্ট</h2> - -<p>জাভাস্ক্রিপ্টে অবজেক্ট হচ্ছে এক কথায় name-value pair। নিচে যেগুলো পয়েন্ট করা হয়ছে সেগুলোর সাথে কোন পার্থক্য নেইঃ</p> - -<ul> - <li>Python এর dictionary</li> - <li>Perl আর ruby'র hash</li> - <li>C/C++ এর hashtable</li> - <li>জাভা'র HashMap</li> - <li>PHP'র associative array</li> -</ul> - -<p>এই ডেটা-স্ট্রাকচারটা এত বেশি ব্যবহৃত হয় যে এটা সম্পর্কে নতুন করে বলার সুযোগ কম। যেহেতু জাভাস্ক্রিপ্টে সবকিছুই অবজেক্ট এটা আশা করা স্বাভাবিক যে জাভাস্ক্রিপ্ট প্রোগ্রামে অনেক বেশি হ্যাশটেবিল লুক-আপ হবে... আমরা বেঁচে গেছি কারণ অনেক দ্রুত এই লুক-আপ করা যায়!</p> - -<p>জাভাস্ক্রিপ্ট অবজেক্টের "name" হিসেবে স্ট্রিং ব্যবহার করতে হবে, আর "value" অংশে যা মন চায় ব্যবহার করতে পারবেন। তার মানে ভ্যালু হিসেবে অন্য অবজেক্ট ও রাখতে পারেন। এভাবে যত জটিল চান সেরকম অবজেক্ট-ই তৈরি করতে পারবেন।</p> - -<p>একটা শূণ্য অবজেক্ট ২ভাবে তৈরি করতে পারেনঃ</p> - -<pre class="brush: js">var obj = new Object(); -</pre> - -<p>আরঃ</p> - -<pre class="brush: js">var obj = {}; -</pre> - -<p>ওপরের দুইটা উপায় সমার্থক। নিচের পদ্ধটি-তিকে বলা হয় অবজেক্ট লিটারেল, আর এটি JSON সিন্ট্যাক্সের ও একটি অংশ। তাই নিচের পদ্ধটি-তি যত বেশি ব্যবহার করা যায় ভাল!</p> - -<p>অবজেক্ট তৈরি হয়ে যাওয়ার পর এর প্রোপার্টি (সম্পদ?!) দুইভাবে এক্সেস করতে পারবেনঃ</p> - -<pre class="brush: js">obj.name = "Simon"; -var name = obj.name; -</pre> - -<p>এবং...</p> - -<pre class="brush: js">obj["name"] = "Simon"; -var name = obj["name"]; -</pre> - -<p>দুইটা পদ্ধতি-ই সমার্থক, তবে ২য় পদ্ধটিতে দেখুন, অবজেক্টের name স্ট্রিং হিসেবে দেওয়া হচ্ছে, মানে এই নামটি আমরা ভ্যারিয়েবলে রেখে রানটাইমে দিতে পারি! অবশ্য এই পদ্ধটিতি ব্যবহার করলে কিছু জাভাস্ক্রিপ্ট ইঞ্জিন আর মিনিফায়ার (কোড সংক্ষিপ্ত করে যেসব টুলস) কোড অপ্টিমাইজ করতে পারে না। আবার এই পদ্ধতি ব্যবহার করে <a href="/en/JavaScript/Reference/Reserved_Words" title="/en/JavaScript/Reference/Reserved_Words">সংরক্ষিত name সমূহ</a> গেট-সেট করতে পারেনঃ</p> - -<pre class="brush: js">obj.for = "Simon"; // Syntax error, because 'for' is a reserved word -obj["for"] = "Simon"; // works fine -</pre> - -<p>আগেই দেখানো অবজেক্ট লিটেরাল সিন্ট্যাক্স ব্যবহার করে পুরো অবজেক্ট গোড়াতেই ইনিশিয়ালাইজ করে নিতে পারেনঃ</p> - -<pre class="brush: js">var obj = { - name: "Carrot", - "for": "Max", - details: { - color: "orange", - size: 12 - } -} -</pre> - -<p>অবজেক্টের এট্রিবিউট এক্সেস একের-পর-এক (চেইন) করতে পারেনঃ</p> - -<pre class="brush: js">> obj.details.color -orange -> obj["details"]["size"] -12 -</pre> - -<h2 id="Array">Array</h2> - -<p>জাভাস্ক্রিপ্টের Array আসলে বিশেষ ধরণের অবজেক্ট - রেগুলার অবজেক্টের মতই array কাজ করে বেশিরভাগ সময়ে ( numeric প্রোপার্টি, মানে ০,১,২,... ইন্ডেক্সে থাকা প্রোপার্টি শুধুমাত্র [] সিন্ট্যাক্স দিয়েই এক্সেস করা যাবে)। সব array'র 'length" ম্যাজিক প্রোপার্টি আছে, যার মান হচ্ছেঃ (ওই array'র সর্বোচ্চ ইন্ডেক্স + ১)</p> - -<p>প্রাগৈতিহাসিক(!) নিয়মে array ব্যবহার-পদ্ধতিঃ</p> - -<pre class="brush: js">> var a = new Array(); -> a[0] = "dog"; -> a[1] = "cat"; -> a[2] = "hen"; -> a.length -3 -</pre> - -<p>তবে স্মার্ট এপ্রোচ হচ্ছে <em>array লিটেরাল</em> ব্যবহার করাঃ</p> - -<pre class="brush: js">> var a = ["dog", "cat", "hen"]; -> a.length -3 -</pre> - -<p>সাবধানঃ লিটের্যাল ব্যবহার করে সবশেষের প্রোপার্টির পর কমা রেখে দিলে ব্রাউজার-ভেদে বিভিন্ন অবস্থা তৈরি হতে পারে - তাই সর্বশেষ array element এর পর কমা রেখে দেওয়া চলবে না।</p> - -<p>খেয়াল করুনঃ array.length মানেই যে array তে কয়টা প্রোপার্টি আছে তা কিন্তু সবসময় ঠিক না। নিচের কোড দেখুনঃ</p> - -<pre class="brush: js">> var a = ["dog", "cat", "hen"]; -> a[100] = "fox"; -> a.length -101 -</pre> - -<p>আবারো বলছিঃ length প্রোপার্টি হচ্ছে: (সবথেকে বড় ইন্ডেক্স + ১)</p> - -<p>আপনি যদি এমন কোন প্রোপার্টি নিয়ে কাজ করতে চান যেটির ইন্ডেক্স ভুল, তাহলে 'undefined' পাবেন মান হিসেবে।</p> - -<pre class="brush: js">> typeof a[90] -undefined -</pre> - -<p>ওপরে যা বলা হল তা মাথায় রেখে নিচের কোড দিয়ে array এর সব এলিমেন্ট নিয়ে কাজ করতে পারবেন (iteration):</p> - -<pre class="brush: js">for (var i = 0; i < a.length; i++) { - // Do something with a[i] -} -</pre> - -<p>তবে ওপরের কোডিং টা অত ভাল হল না, কারণ বারবার array.length প্রোপার্টি'র মান খুঁজতে হচ্ছে। নিচের কোড টা বেশি ভাল (কার্যকরী):</p> - -<pre class="brush: js">for (var i = 0, len = a.length; i < len; i++) { - // Do something with a[i] -} -</pre> - -<p>আর নিচেরটা হচ্ছে <em>বস-লেভেলের</em> কোডিং ;-)</p> - -<pre class="brush: js">for (var i = 0, item; item = a[i++];) { - // Do something with item -} -</pre> - -<p>খেয়াল করুনঃ লুপের দুই সেমিকোলনের মাঝের অংশ ভ্যারিয়েবল এসাইনমেন্ট আর false কিনা টেস্টিং দুই-ই করা হচ্ছে। এই লুপ ব্রেক করবে প্রথম "falsy" এলিমেন্ট (যেমন 'undefined') পাওয়া মাত্রই।</p> - -<p>কাজেই, যদি array'র কোন এলিমেন্ট "falsy" হওয়ার সম্ভাবনা থাকে, তাহলে ওপরের তথাকতিত "বস-লেভেল" কোডিং ব্যবহার করা যাবে না। যেমন, কোন array এলিমেন্ট এর মান false হিসেবে গণ্য হলেই (যেমন শূণ্য স্ট্রিং) পরের ভ্যালিড এলিমেন্ট ও কিন্তু আর এক্সেস করা যাবে না। আপনি যদি নিশিচ থাকেন যে array তে কোন "falsy" এলিমেন্ট নেই (যেমন অবজেক্টের array অথবা <a href="/en/DOM" title="en/DOM">DOM</a> নোড ইত্যাদি) তাহলেই ওপরের পদ্ধতি ব্যবহার করুন।</p> - -<p><code><a href="/en/JavaScript/Reference/Statements/for...in" title="en/Core_JavaScript_1.5_Reference/Statements/for...in">for...in</a></code> লুপ ব্যবহার করেও array এলিমেন্টগুলোতে <em>iterate </em>করতে পারবেন। কেউ যদি Array.prototype (পরে আলোচনা করেছি) ব্যবহার করে নতুন নতুন প্রোপার্টি যোগ করেন এরে তে, তাহলে সেগুলোও এই লুপ দিয়ে iterate করা যাবে:</p> - -<pre class="brush: js">for (var i in a) { - // Do something with a[i] -} -</pre> - -<p>Array তে নতুন এলিমেন্ট যোগ করার সবচাইতে নিরাপদ পদ্ধতিঃ</p> - -<pre class="brush: js">a[a.length] = item; // same as a.push(item); -</pre> - -<p>যেহেতু a.length সবসময় এরে এর সর্বোচ্চ ইন্ডেক্স + ১ কাজেই আপনি নিশ্চিত থাকতে পারেন যে আপনি ফাকা স্থানেই নতুন এলিমেন্ট বসাচ্ছেন।</p> - -<p>Array'র সাথে অনেক ফাংশন প্যাকেট করে দেওয়া হয়েছেঃ</p> - -<table style="height: 124px; width: 598px;"> - <thead> - <tr> - <th scope="col">Method name</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>a.toString()</code></td> - <td> </td> - </tr> - <tr> - <td><code>a.toLocaleString()</code></td> - <td> </td> - </tr> - <tr> - <td><code>a.concat(item[, itemN])</code></td> - <td>প্রদত্ত আইটেম (এলিমেন্ট) গুলো সহ নতুন একটি Array রিটার্ন করে।</td> - </tr> - <tr> - <td><code>a.join(sep)</code></td> - <td> </td> - </tr> - <tr> - <td><code>a.pop()</code></td> - <td>শেষ এলিমেন্ট-টিকে এরে থেকে মুছে দিয়ে রিটার্ন করে।</td> - </tr> - <tr> - <td><code>a.push(item[, itemN])</code></td> - <td><code>এরে'র শেষে এক/একাধিক আইটেম যোগ করে</code></td> - </tr> - <tr> - <td><code>a.reverse()</code></td> - <td> </td> - </tr> - <tr> - <td><code>a.shift()</code></td> - <td> </td> - </tr> - <tr> - <td><code>a.slice(start, end)</code></td> - <td>একটি সাব-এরে রিটার্ন করে</td> - </tr> - <tr> - <td><code>a.sort([cmpfn])</code></td> - <td>তুলনা করার জন্য একটি ফাংশন প্যারামিটারে দিতে পারেন (ঐচ্ছিক)</td> - </tr> - <tr> - <td><code>a.splice(start, delcount[, itemN])</code></td> - <td>এরে'র আইটেমগুলো মুছে দিয়ে/রিপ্লেস করতে পারবেন।</td> - </tr> - <tr> - <td><code>a.unshift([item])</code></td> - <td>এরে'র শুরুতে আইটেম কে যোগ করে।</td> - </tr> - </tbody> -</table> - -<h2 id="ফাংশন">ফাংশন</h2> - -<p>জাভাস্ক্রিপ্ট ভালোমত শিখতে হলে অবজেক্টের পাশাপাশি ফাংশন সম্পর্কেও ভাল ধারণা থাকা দরকার। নিচে খুবই নিরীহ-দর্শন একটা ফাংশন দেখা যাচ্ছেঃ</p> - -<pre class="brush: js">function add(x, y) { - var total = x + y; - return total; -} -</pre> - -<p>ফাংশনের বেসিক জানার জন্যে এইটুকুই যথেষ্ট। ফাংশনে এক/একাধিক প্যারামিটার/আর্গুমেন্ট পাঠাতে পারেন। ফাংশনের বডিতে যত খুশি স্টেটমেন্ট লিখুন, নিজের ইচ্ছামত "লোকাল" ভ্যারিয়েবল তৈরি করুন। ফাংশনের যেকোন জায়গায় return স্টেটমেন্ট ব্যবহার করতে পারেন - এই স্টেটমেন্টের পরের কোন স্টেটমেন্ট আর কার্যকর হবে না মানে ফাংশন থেকে তখন-ই প্রোগ্রাম বের হয়ে যাবে। return এর পর যেই ভ্যালু দিবেন ফাংশনটি তার caller কে সেই ভ্যালুটি রিটার্ন করবে। return এর পর কোন ভ্যালু না দিলে (অথবা আদৌ কোন রিটার্ন স্টেটমেন্ট ব্যবহার না করলে) জাভাস্ক্রিপ্ট undefined কে রিটার্ন ভ্যালু হিসেবে পাঠিয়ে থাকে।</p> - -<p>আপনি যদি ফাংশন কল করার সময় কোন প্যারামিটারের ভ্যালু না পাঠান, তাহলে 'undefined' ঐ প্যারামিটারের ভ্যালু হিসেবে চলে যাবে ফাংশনের কাছেঃ</p> - -<pre class="brush: js">> add() -NaN // You can't perform addition on undefined -</pre> - -<p>অন্য প্রোগ্রামিং ভাষার সাথে একটুখানি অমিলঃ আপনি চাইলে ফাংশন যতগুলো প্যারামিটার নিয়ে কাজ করে, তার থেকে বেশি প্যারামিটারও পাঠাতে পারেন!</p> - -<pre class="brush: js">> add(2, 3, 4) -5 // added the first two; 4 was ignored -</pre> - -<p>একটু হাস্যকর মনে হলেও, ফাংশনের নিজস্ব <a href="/en/JavaScript/Reference/Functions_and_function_scope/arguments" title="En/Core_JavaScript_1.5_Reference/Functions_and_function_scope/arguments"><code>arguments</code></a> নামের একটা array এর মত ভ্যারিয়েবল আছে - এর এলিমেন্ট হিসেবে ফাংশনে যতগুলো ভ্যালু প্যারামিটার হিসেবে পাঠানো হয়েছে সবগুলোই থাকে। আসুন add ফাংশনটিকে এমনভাবে লিখি যাতে যত খুশি প্যারামিটার পাঠানো হোক না কেন সবগুলোই যোগ করা যায়ঃ</p> - -<p>কিছুটা "আজাইরা" ধাঁচের মনে হলেও জাভাস্ক্রিপ্টে ফাংশগুলোর মধ্যে <a href="/en/JavaScript/Reference/Functions_and_function_scope/arguments" title="En/Core_JavaScript_1.5_Reference/Functions_and_function_scope/arguments"><code>arguments</code></a> নামের একটি ভ্যারিয়েবল আছে, যাতে ফাংশনটিতে পাস করা সকল ভ্যালু থাকে! আসুন ফাংশনটিকে এমনভাবে পরিবর্তন করি যেন তা ইচ্ছেমত আর্গুমেন্ট নিতে পারে!</p> - -<pre class="brush: js">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 -</pre> - -<p>এবার গড় বের করার একটি ফাংশন (ফাংশন নাম্বার ১) লিখে ফেলিঃ</p> - -<pre class="brush: js">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 -</pre> - -<p>এটা কাজের ফাংশন সন্দেহ নাই, তবে নতুন একটা ঝামেলা তৈরি করলঃ avg() ফাংশন কমা-দিয়ে-আলাদা-করা এক গাদা আর্গুমেন্ট নেয় - কিন্তু আপনি যদি আর্গুমেন্ট হিসেবে শুধু একটি array পাঠাতে চান? তাহলে avg() ফাংশনটা এভাবে (ফাংশন নাম্বার ২) লেখা যেতে পারেঃ</p> - -<pre class="brush: js">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 -</pre> - -<p>কিন্তু নতুন করে না লিখে আগের ১-নাম্বার ফাংশনটা-ই ব্যবহার করতে পারলে ভাল হত! এক কাজের জন্য কয়টা ফাংশন লিখব, আর কি কাজ কর্ম নাই নাকি? সৌভাগ্যবশতঃ, জাভাস্ক্রিপ্ট দিয়ে যেকোন ফাংশনের <a href="/en/JavaScript/Reference/Global_Objects/Function/apply" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply"><code>apply()</code></a> মেথড কল করে (যেহেতু ফাংশন-ও এক ধরণের অবজেক্ট, তাই ফাংশনের-ও মেথড/প্রোপার্টি ইত্যাদি থাকতে পারে!) আর্গুমেন্ট হিসেবে যেকোন array পাঠাতে পারেনঃ</p> - -<pre class="brush: js">> avg.apply(null, [2, 3, 4, 5]) -3.5 -</pre> - -<p>এই apply() মেথডের ২য় প্যারামিটারের ভ্যালুটাই ফাংশনের <a href="/en/JavaScript/Reference/Functions_and_function_scope/arguments" title="En/Core_JavaScript_1.5_Reference/Functions_and_function_scope/arguments"><code>arguments</code></a> হিসেবে ব্যবহৃত হবে। প্রথম আর্গুমেন্টের কাজ কি সেটা পরে বলব। আর হ্যা, এখন তো বুঝতে পারলেন যে ফাংশন-ও জাভাস্ক্রিপ্টে আসলে অবজেক্ট! (প্রমাণিত)</p> - -<p>জাভাস্ক্রিপ্টে <strong>বেওয়ারিশ </strong>(anonymous!) ফাংশন তৈরি করতে পারবেনঃ</p> - -<pre class="brush: js">var avg = function() { - var sum = 0; - for (var i = 0, j = arguments.length; i < j; i++) { - sum += arguments[i]; - } - return sum / arguments.length; -} -</pre> - -<p>ওপরের "বেওয়ারিশ" ফাংশন আর function avg() এর মাঝে কোন পার্থক্য নাই, অন্ততঃ সিমান্ট্যাকালি। কিন্তু এই anonymous ফাংশন অনেক পাওয়ারফুল - কারণ এভাবে আপনি কোডের যেকোন জায়গায় ফাংশন তৈরি করে নিতে পারেন - যেখানে হয়ত আগে সাদামাটা এক্সপ্রেশন দেওয়া লাগত। যেমন, একটা ট্রিক দেখুনঃ আমরা জানি জাভাস্ক্রিপ্টে "ব্লক" লেভেলে ভ্যারিয়েবলের নতুন কোন স্কোপ নাই, কিন্তু ফাংশন লেভেলে ভ্যারিয়েবলের স্কোপ আছে। এখন যদি আমরা কোন ফাংশনের ভেতর C ল্যাংগুয়েজের মত ব্লক লেভেলে কোন ভ্যারিয়েবলের স্কোপ চাই, তাহলে চট করে একটা বেওয়ারিশ ফাংশন লিখে ফেলতে পারিঃ</p> - -<pre class="brush: js">var a = 1; -var b = 2; -(function() { - var b = 3; // b ভ্যারিয়েবলের নতুন স্কোপ তৈরি করলাম! - a += b; -})(); -a; // 4 -b; // 2 - b এর মান আগেরটাই আছে। -</pre> - -<p>জাভাস্ক্রিপ্টে ফাংশন রিকারসিভলি (কোন ফাংশনের ভেতর নিজেকেই আবার কল করা) কল করতে পারবেন। Tree - সদৃশ ডেটা স্ট্রাকচার নিয়ে কাজ করতে এটা উপকারী। যেমন, <a href="/en/DOM" title="en/DOM">DOM</a> নিয়ে কাজ করার সময় কাজে লাগে।</p> - -<pre class="brush: js">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; -} -</pre> - -<p>অবশ্য এভাবে কাজ করতে গিয়ে anonymous ফাংশন কল করতে গেলে ঝামেলা হবেঃ এনোনিমাস ফাংশনকে রিকার্সিভ কল কিভাবে করবেন? ওদের তো নাম-ই নাই! এই ঝামেলা দূর করতে এসে গেল "named anonymous ফাংশন":</p> - -<pre class="brush: js">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); -</pre> - -<p>এভাবে এনোনিমাস ফাংশনকে দেওয়া নাম শুধুমাত্র ঐ ফাংশনের ভেতরেই কাজ করবে। এভাবে যেমন জাভাস্ক্রিপ্ট ইঞ্জিন অপ্টিমাইজ ভাবে কাজ করতে পারে, সেরকম আপনার কোডও সহজবোধ্য হয়।</p> - -<h2 id="মনের_মত_অবজেক্ট">মনের মত অবজেক্ট</h2> - -<div class="note"><strong>খেয়াল করুন:</strong> জাভাস্ক্রিপ্ট দিয়ে অবজেক্ট-ওরিয়েন্ট প্রোগ্রামিং করতে চাইলে আরো বিস্তারিত আলোচনা দেখুন এখানেঃ <a href="/en/JavaScript/Introduction_to_Object-Oriented_JavaScript" title="/en/JavaScript/Introduction_to_Object-Oriented_JavaScript">জাভাস্ক্রিপ্টে অবজেক্ট-ওরিয়েন্টেডের হাতেখড়ি</a></div> - -<p><em>এই প্যারার টাইটেল নিয়ে একটু মজা করলাম... হেহে। ইংরেজিতে টাইটেল ছিল "Custom Objects" :-P</em></p> - -<p>ক্ল্যাসিক অবজেক্ট অরিয়েন্টেড প্রোগ্রামিং মানেই class নামের কী-ওয়ার্ড... জাভাস্ক্রিপ্ট একটু অন্যরকম। আমরা সাধারণত অবজেক্ট কে ডেটা আর সেইসব ডেটার ওপর কাজ করার জন্য মেথড এর একটা কালেকশনকেই বুঝি। জাভাস্ক্রিপ্টে কোন class স্টেটমেন্ট নাই, জাভাস্ক্রিপ্ট prototype-ভিত্তিক প্রোগ্রামিং ভাষা, তাই সবার এই ব্যাপারটা একটু শিখে নেওয়ার দরকার আছে। জাভাস্ক্রিপ্টে আসলে <strong>ফাংশন-ই</strong> ক্লাস হিসেবে কাজ করে। আসুন একটা person অবজেক্ট চিন্তা করি... যাতে firstname আর lastname দু'টি প্রোপার্টি আছে। এখন, কোন ব্যাক্তির নাম প্রিন্ট করার ২টা পদ্ধতি চিন্তা করিঃ একটা হল আগে firstname প্রিন্ট করব, পরে lastname। আর অন্য পদ্ধতিটা উল্টা, আগে lastname প্রিন্ট করবঃ</p> - -<pre class="brush: js">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 -</pre> - -<p>কিন্তু... ওপরের আজব কোড দেখে যেকারর-ই মেজাজ খারাপ হওয়ার কথা। এভাবে কোড করতে থাকলে শেষপর্যন্ত আপনার স্ক্রিপ্টের global স্কোপেই হাজার হাজার ফাংশন পয়দা হয়ে বসে থাকবে। আমরা চাই অবজেক্টের সদস্য মেথডগুলো শুধু ওই অবজেক্টের স্কোপেই থাকুক। যেহেতু ফাংশন == অবজেক্ট, আমরা নিমেষেই সুন্দর কোডিং করে ফেলতে পারিঃ</p> - -<pre class="brush: js">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 -</pre> - -<p>ওপরের কোডে দেখুন আমরা প্রথমবারের মত '<code><a href="/en/JavaScript/Reference/Operators/this" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator">this</a></code>' কীওয়ার্ড ব্যবহার করলাম। কোন ফাংশনের ভেতর যখন this ব্যবহার করা হয় তখন সেটি ঐ ফাংশনটি'র অবজেক্ট কে রেফার (refer) করে থাকে, যদি কিনা আপনি <a href="/en/JavaScript/Reference/Operators/Member_Operators" title="/en/JavaScript/Reference/Operators/Member_Operators">ডট (.) অথবা ব্রাকেট</a> ব্যবহার করে মেথডটিকে কল করে থাকেন। কিন্তু অন্য কোন ভাবে কল করলে this আসলে global অবজেক্ট কে রেফার করে। এই ব্যাপারটা ঠিকমত না বুঝতে পারলে ভুল করার সম্ভাবনা থাকে। উদাহরণ দেখুনঃ</p> - -<pre class="brush: js">> s = makePerson("Simon", "Willison") -> var fullName = s.fullName; -> fullName() -undefined undefined -</pre> - -<p>যখন আমরা <code>fullName()</code> কল করলাম (s.fullname() না) , '<code>this</code>' আসলে global অবজেক্ট কে রেফার করে। এই গ্লোবাল অবজেক্ট এর যেহেতু <code>first</code> অথবা <code>last</code> নামের কোন প্রোপার্টি নাই, তাই <code>undefined</code> পাওয়া যাচ্ছে।</p> - -<p>নতুনদের জন্য এই বিষয়টা একটু ভ্রান্তিকর মনে হতে পারে... যাই হোক! এই this কী-ওয়ার্ড ব্যবহার করে আমরা makePerson কে আরেকটু ভাল চেহারা দিতে পারিঃ</p> - -<pre class="brush: js">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"); -</pre> - -<p>দেখুন, নতুন কী-ওয়ার্ড '<code><a href="/en/JavaScript/Reference/Operators/new" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator">new</a></code>' এর ব্যবহার - এই new এর সাথে this এর সম্পর্ক খুবই শক্ত-পোক্ত! কোন ফাংশন কল করার আগে new ব্যবহার করলে যা হয়ঃ একটি নতুন অবজেক্ট তৈরি হয়, এরপর ফাংশনটিকে কল করা হয় যেন this নতুন তৈরি করা অবজেক্ট টিকে রেফার করে থাকে। যেসব ফাংশন কে new কী-ওয়ার্ড দিয়ে কল করা উচিত তাদের নাম সাধারণতঃ বড় হাতের অক্ষরে লেখা হয় প্রথম হরফটি - যাতে ডেভেলপার সহজেই বুঝতে পারে যে ফাংশনটি new কী-ওয়ার্ড দিয়ে কল করতে হবে ।</p> - -<p>দেখতে সুন্দর লাগলেও আসলে এখনো একটা ঝামেলা রয়ে গেছে, যত বার আমরা new ব্যবহার করে makePerson এর অবজেক্ট তৈরি করব, প্রতিটা অবজেক্টের জন্য fullName() আর fullNameRevesed() ফাংশনদুটি'র নতুন কপি তৈরি হবে! কিন্তু আসলে তো উচিত শুধু ক্লাসের সদস্য ভ্যারিয়েবল গুলোর অবজেক্ট-প্রতি কপি তৈরি হওয়া, ফাংশন এর কপি তৈরি করাটা অপ্রয়োজনীয়। প্রতিটা অবজেক্টের জন্য এভাবে মেম্বার ফাংশন তৈরি না করে আসলে প্রচলিত অবজেক্ট-ওরিয়েন্টেড প্রোগ্রামিং এর ধারণা অনুযায়ী কোন ক্লাসের সকল অবজেক্ট বা ইন্সট্যান্সের উচিত ক্লাসের সদস্য ফাংশন <strong>শেয়ার </strong>করা।</p> - -<pre class="brush: js">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; -} -</pre> - -<p>এখন প্রতিটা অবজেক্টের জন্য ফাংশন গুলোর নতুন কপি তৈরি না করে ফাংশনগুলো একবার-ই তৈরি করে শেয়ার করা নেওয়া হল। কিন্তু আসলে এর থেকেও ভালভাবে কোড করা সম্ভবঃ</p> - -<pre class="brush: js">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; -} -</pre> - -<p><code>Person.prototype এমন একটি অবজেক্ট যা Person ফাংশনের সব ইন্সট্যান্স বা অবজেক্ট শেয়ার করে। এভাবে "prototype chain" নামের বিশেষ ধরণের লুক-আপ চেইন তৈরি হয়ঃ যখন আপনি Person এর এমন কোন প্রোপার্টি এক্সেস করতে চান যেটা এখনো সেট করা হয়নি, জাভাস্ক্রিপ্ট Person.prototype</code> এ <code>খুজে দেখবে (লুক-আপ) সেখানে এই প্রোপার্টি টি সেট করা আছে কিনা। <strong>সহজ বাংলায়, Person.prototype এ আমরা যে সকল প্রোপার্টি (ফাংশন বা ডেটা) সেট করব সেটা Person এর সকল ইন্সট্যান্স/অবজেক্ট এক্সেস করতে পারবে।</strong></code></p> - -<div class="note"> -<p><em><code>অবজেক্ট-ওরিয়েন্টেড প্রোগ্রামিং করার জন্য নতুন রা চোখ বন্ধ করে ওপরে দেখানো প্রটোটাইপ পদ্ধতি ব্যবহার করতে পারেন। ভাল-মন্দ এতগুলো উদাহরণ শুধুমাত্র কন্সেপ্ট পরিষ্কার করার জন্যই দেখানো হল - তবে গুলিয়ে ফেললে ভয় পাওয়ার কিছু নাই।</code></em></p> -</div> - -<p>এই প্রটোটাইপ আসলে অনেক পাওয়ারফুল টুল। জাভাস্ক্রিপ্ট আপনাকে যেকোন কিছুর প্রটোটাইপ যেকোন সময় পরিবর্তন করার সুযোগ দেয়। যার মানে, রানটাইমেই আপনি অবজেক্টে নতুন নতুন মেথড যোগ করতে পারেন! এটাও সি/জাভার সাথে অন্যতম পার্থক্য প্রটোটাইপ-ভিত্তিক ল্যাংগুয়েজ যেমন জাভাস্ক্রিপ্ট এর।</p> - -<pre class="brush: js">> 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 -</pre> - -<p>মজা দেখুনঃ বিল্ট-ইন অবজেক্টের প্রটোটাইপ ও এভাবে পরিবর্তন করা সম্ভব! আসুন আমরা বিল্ট ইন String এ নতুন একটা মেথড যোগ করি স্ট্রিং উল্টে দেওয়ার জন্যঃ</p> - -<pre class="brush: js">> 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 -</pre> - -<p>এই নতুন মেথড স্ট্রিং লিট্যারেল এও কাজ করবেঃ</p> - -<pre class="brush: js">> "This can now be reversed".reversed() -desrever eb won nac sihT -</pre> - -<p>আগে যেমনটা বলেছিলাম, prototype হচ্ছে একটা বিশেষ চেইনের অংশ। এই চেইনের গোড়ায় আছে Object.prototype, যার একটা মেথড হল toString() - এই মেথড টা কল হয় যখন আপনি কোন একটা অবজেক্ট কে স্ট্রিং হিসেবে পেতে চাচ্ছেন (জাভা'র toString() এর মতন)। ডিবাগিং করার জন্য এটা উপকারী হবেঃ</p> - -<pre class="brush: js">> var s = new Person("Simon", "Willison"); -> s -[object Object] -> Person.prototype.toString = function() { - return '<Person: ' + this.fullName() + '>'; -} -> s -<Person: Simon Willison> -</pre> - -<p>মনে আছে আমরা avg.apply() এর প্রথম প্যারামিটারে null পাঠিয়েছিলাম? এই apply() এর প্রথম প্যারামিটারে যেই অবজেক্ট পাঠাবেন, this সেটাকে রেফার করবে। আমরা new এর একটা সহজ-সরল ইমপ্লেমেন্টেশন করতে পারিঃ</p> - -<pre class="brush: js">function trivialNew(constructor) { - var o = {}; // Create an object - constructor.apply(o, arguments); - return o; -} -</pre> - -<p>অবশ্য এটা পুরোপুরি new হিসেবে ব্যবহার করা যাবে না কারণ প্রটোটাইপ চেইন তৈরি করা হয়নি। এরকম কোড সচরাচর দেখা যায়না, তবে চাইলে যে করতে পারবেন সেটা দেখানো হল আরকি।</p> - -<p><a href="/en/JavaScript/Reference/Global_Objects/Function/call" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Function/call"><code>call</code></a> নামের apply() এর মতই একটা ফাংশন আছে। পার্থক্য হল, array এর বদলে এটি বিশদ-ভাবে (কমা সেপারেটেড) আর্গুমেন্ট নিয়ে থাকেঃ</p> - -<pre class="brush: js">function lastNameCaps() { - return this.last.toUpperCase(); -} -var s = new Person("Simon", "Willison"); -lastNameCaps.call(s); -// Is the same as: -s.lastNameCaps = lastNameCaps; -s.lastNameCaps(); -</pre> - -<h2 id="ফাংশনের_ভেতরে_ফাংশন_(Inner_functions)">ফাংশনের ভেতরে ফাংশন (Inner functions)</h2> - -<p>জাভাস্ক্রিপ্টে ফাংশনের ভেতরে ফাংশন লেখা যায় এটা আমরা আগে makePerson() উদাহরণে দেখেছি। একটা গুরুত্বপূর্ণ ব্যাপার খেয়াল রাখতে হবে যে জাভাস্ক্রিপ্টে এই Inner ফাংশন তার প্যারেন্ট ফাংশনের স্কোপ এক্সেস করতে পারেঃ</p> - -<pre class="brush: js">function betterExampleNeeded() { - var a = 1; - function oneMoreThanA() { - return a + 1; - } - return oneMoreThanA(); -} -</pre> - -<p>তাই কোড বুঝার আওতায় রাখা আর মেইন্টেইন করা সহজ জাভাস্ক্রিপ্টেঃ যদি কোন ফাংশন (ফাংশন নাম্বার-১) এমন কয়েকটা ফাংশনের ওপর নির্ভর করে যেই ফাংশনগুলা অন্য কোথাও কাজে লাগে না, তাহলে আমরা সেই ফাংশনগুলোকে এই ১-নাম্বার ফাংশনের ইনার (inner) ফাংশন হিসেবে রেখে দিতে পারি। এতে করে, global স্কোপের আওতায় থাকা ফাংশনের সংখ্যা কমবে - এটা সবসময় ভাল অভ্যাস হিসেবে বিবেচনা করা হয়।</p> - -<p>এমন করে আসলে এক গাদা গ্লোবাল ভ্যারিয়েবল তৈরি করে গ্লোবাল স্কোপ নষ্ট করে ফেলার অভ্যাস থেকেও বেচে যাওয়া যায়। গ্লোবাল স্কোপে সুযোগ মত ভ্যারিয়েবল তৈরি করে ফাংশনে ডেটা শেয়ার করার প্রবণতা খুবই লক্ষ্যণীয় - কিন্তু এভাবে কোড করলে একটা সময় পর আর কোড মেইন্টেইন করা যায় না। জাভাস্ক্রিপ্টের inner ফাংশন ব্যবহার করে আমরা যেসব ফাংশন কোন গ্লোবাল ভ্যারিয়েবল শেয়ার করতে চায়, তাদের একটা প্যারেন্ট ফাংশনের inner ফাংশন হিসেবে ঢুকিয়ে দিতে পারি। এভাবে যেখানে প্রয়োজন, সম্পর্কিত ফাংশনগুলোকে couple করে ফেললেও গ্লোবাল স্কোপে ভ্যারিয়েবলের সংখ্যা কমে যাবে। এই অভ্যাস সতর্কতার সাথেই করা উচিত, যদিও এরকম কোড করার সুযোগ থাকাটা খুবই উপকারী।</p> - -<h2 id="ক্লোজার_(Closures)"> ক্লোজার (Closures)</h2> - -<p>ক্লোজার জাভাস্ক্রিপ্টের অফার করা সেরা এবস্ট্রাকশন (abstractions) গুলোর একটি - অবশ্য ঠিকভাবে না বুঝলে কনফিউজিং হতে পারে। এটা আসলে কী?</p> - -<pre class="brush: js">function makeAdder(a) { - return function(b) { - return a + b; - } -} -x = makeAdder(5); -y = makeAdder(20); -x(6) -? -y(7) -? -</pre> - -<p>makeAdder নাম দেখেই বুঝা যাচ্ছে এটা নতুন <strong>নতুন</strong> adder ফাংশন তৈরি করে! এই <strong>নতুন </strong>ফাংশনগুলো কে যখন কিনা আবার কল করা হবে কোন আর্গুমেন্ট দিয়ে, makeAdder ফাংশনে দেয়া আর্গুমেন্টটির সাথে এই নতুন আর্গুমেন্ট কে যোগ করবে।</p> - -<p>এখানে যা হচ্ছে অনেকটাই Inner ফাংশনের সাথে মিলে যায়ঃ একটা ফাংশনকে অন্য কোন ফাংশনের মধ্যে তৈরি করা হয়ছে - ভেতরের ফাংশনটি বাইরের (প্যারেন্ট) ফাংশনের সব ভ্যারিয়েবল এক্সেস করতে পারে। একমাত্র পার্থক্য হচ্ছে বাইরের (outer) ফাংশনটি কিন্তু রিটার্ন করে গিয়েছে, তাই কমন-সেন্স থেকে মনেহতে পারে যে এর লোকাল ভ্যারিয়েবল গুলো আর নেই। কিন্তু আসলে, এগুলো এখনো বহাল তবিয়তেই আছে - না থাকলে adder ফাংশনগুলো তো কাজ করত না! আরো লক্ষ্যণীয় যে makeAdder এর লোকাল ভ্যারিয়েবলের দু'টি আলাদা, ভিন্ন "কপি" দেখা যাচ্ছে - যার একটিতে a ভ্যারিয়েবলের মানে 5 আর অন্যটিতে এই মান 20। তাই, ওপরের ফাংশন কল দু'টির ফলাফল হবে নিম্নরূপঃ</p> - -<pre class="brush: js">x(6) // returns 11 -y(7) // returns 27 -</pre> - -<p>পর্দার আড়ালেঃ যখন জাভাস্ক্রিপ্ট কোন ফাংশন execute করে, ঐ ফাংশনের লোকাল ভ্যারিয়েবল গুলো রাখার জন্যে একটি 'স্কোপ' অবজেক্ট তৈরি করা হয়। এই স্কোপ ভ্যারিয়েবল ইনিশিয়ালাইজ করা হয় ফাংশনে প্যারামিটার হিসেবে যেসব ভ্যারিয়েবল পাঠানো হয়েছিল সেগুলো দ্বারা। এটা গ্লোবাল অবজেক্টের মতই যেখানে সব গ্লোবাল ভ্যারিয়েবল আর ফাংশনগুলো থাকে, কিন্তু দু'টি পার্থক্য সহ। প্রথমতঃ প্রতিবার একটি ফাংশন execute হওয়া শুরু করে একটি নতুন স্কোপ অবজেক্ট তৈরি হয়ে যায়। গ্লোবাল স্কোপ অবজেক্টের সাথে দ্বিতীয় পার্থক্যটি হল, গ্লোবাল স্কোপের প্রোপার্টি সরাসরি এক্সেস করা যায় (যেমন ব্রাউজারের ক্ষেত্রে এই গ্লোবাল অবজেক্ট টি হল window), কিন্তু ফাংশনের স্কোপের ক্ষেত্রে এটি সম্ভব নয়। উদাহরণস্বরূপ বলা যায়, ফাংশনের স্কোপ অবজেক্টের প্রোপার্টিকে iterate করে এক্সেস করা সম্ভব নয়।</p> - -<p>তাই যখন makeAdder কল করা হয়েছিল, একটা স্কোপ অবজেট তৈরি হয়ে গেছে। এই স্কোপ অবজেক্টের একটাই প্রোপার্টিঃ a ভ্যারিয়েবল যেটি কিনা এই ফাংশনের একমাত্র প্যারামিটার। makeAdder তারপর নতুন একটা ফাংশন তৈরি করে রিটার্ন করে। এই মুহূর্তে জাভাস্ক্রিপ্টের গারবেজ কালেকটর (কোন ভ্যারিয়েবল গুলোর আর প্রয়োজন নাই সেগুলো খুজে বের করে এরা যে মেমরি দখল করে রেখেছিল তা অন্য নতুন ভ্যারিয়েবলের জন্য ফ্রি করে দেওয়া'র পদ্ধতি) এর makeAdder এর স্কোপ অবজেট গায়েব করে ফেলার কথা, কিন্তু makeAdder যে ফাংশনটি তৈরি করে রিটার্ন করল তার মাঝে makeAdder এর স্কোপ অবজেক্টের একটা রেফারেন্স থেকে যায়। যে কারণে, যতক্ষণ makeAdder এর রিটার্ন করা ফাংশনের কোন না কোন রেফারেন্স কোডে অবশিষ্ট থাকছে (সহজভাবে যতক্ষণ এটি ব্যবহৃত হচ্ছে), ততক্ষণ makeAdder এর স্কোপ অবজেক্ট-টিও অক্ষত থাকবে।</p> - -<p>স্কোপ অবজেক্টেরা প্রোটোটাইপ চেইনে মত স্কোপ চেইন মেইনটেইন করে।</p> - -<p>ক্লোজার হচ্ছে একট ফাংশন আর এই ফাংশনকে যেই ফাংশন তৈরি করেছিল তার স্কোপ অবজেক্টের একটা সমন্বয় (combination)।</p> - -<p>ক্লোজার আপনাকে স্টেট মনে রাখার একটা সুবিধা দেয় - যে কারণে অবজেক্টের বদলে ক্লোজার ব্যবহার করা যেতে পারে।</p> - -<h3 id="মেমরি_অপচয়_(Memory_leaks)">মেমরি অপচয় (Memory leaks)</h3> - -<p>ক্লোজার ব্যবহারের একটি দুর্ভাগ্যজনক পার্শ্বপ্রতিক্রিয়া হল এটি ইন্টার্নেট এক্সপ্লোরারে মেমরি অপচয় করে। জাভাস্ক্রিপ্টে গার্বেজ কালেকশন পদ্ধতি ব্যবহার করা হয় অবজেক্টের দখল করা মেমরি ফ্রি করার জন্যে। অবজেক্ট যখন তৈরি হয় তখন তাদের মেমরি দেওয়া (allocate) করা হয় - যখন ঐ অবজেক্টের আর কোন রেফারেন্স কোডে অবশিষ্ট থাকে না তখন সেই মেমরি ফ্রি করে দেওয়া হয়। হোস্ট যেসব অবজেক্ট সরবরাহ করে সেগুলো হ্যান্ডেল সেই হোস্ট নিজেই করে।</p> - -<p>ব্রাউজার হোস্টগুলোর বিশাল পরিমাণে অবজেক্ট ম্যানেজ করা লাগে - যেই HTML পাতাটি দেখানো হচ্ছে - তার জন্যে <a href="/en/DOM" title="en/DOM">DOM</a> এর অবজেক্ট গুলো। এই অবজেক্টগুলো ম্যানেজ আর রিকভারি করার দায়িত্ব ব্রাউজারের।</p> - -<p>এই কাজের জন্যে ইন্টারনেট এক্সপ্লোরার (IE) তার নিজের গার্বেজ কালেকশন পদ্ধতি ব্যবহার করে, জাভাস্ক্রিপ্টের পদ্ধতি থেকে যেটি আলাদা। এই দুই এর মাঝে ইন্টারেকশনের জন্যে মেমরি অপচয় হতে পারে।</p> - -<p>IE তে মেমরি অপচয় হবে যখনি কোন জাভাস্ক্রিপ্ট অবজেক্ট আর নেটিভ অবজেক্টের মাঝে সার্কুলার (circular) রেফারেন্স তৈরি হবে। নিচের কোড দেখুনঃ</p> - -<pre class="brush: js">function leakMemory() { - var el = document.getElementById('el'); - var o = { 'el': el }; - el.o = o; -} -</pre> - -<p>ওপরের কোডে যে সার্কুলার রেফারেন্স তৈরি হল তার জন্যে IE, el <code>আর o অবজেক্টের দখল করা মেমরি ফ্রি করবে না যতক্ষণ না ব্রাউজার পুরোপুরি রিস্টার্ট করা হচ্ছে। ফলাফল মেমরি অপচয়...</code></p> - -<p>ওপরের কেইসটি প্রোগ্রামারের চোখ এড়িয়ে যেতে পারে, কারণ এই মেমরি অপচয় অনেক্ষণ-ধরে-চলছে এরকম বড়সর এপ্লিকেশনের ক্ষেত্রেই প্রভাব ফেলে। কোন এপ্লিকেশন জটিল ডেটা স্ট্রাকচার ব্যবহার করে বা লুপের মধ্যে মমরি অপচয় করলেও সেটা চোখে পড়বে।</p> - -<p>সার্কুলার রেফারেন্স ওপরের কোডের মত এত সহজে চোখে নাও পড়তে পারে। অনেক সময় মেমরি নষ্ট করা ডেটা স্ট্রাকচারে অনেক লেভেলের রেফারেন্সের পরে সার্কুলার রেফারেন্স তৈরি হতে পারে - তখন আর চট করে সার্কুলার রেফারেন্স ধরা যাবে না।</p> - -<p>ক্লোজার ব্যবহার করলে অনিচ্ছাকৃত মেমরি অপচয় হতে পারে। নিচের কোড টা দেখুনঃ</p> - -<pre class="brush: js">function addHandler() { - var el = document.getElementById('el'); - el.onclick = function() { - this.style.backgroundColor = 'red'; - } -} -</pre> - -<p>ওপরের কোডে HTML এলিমেন্ট টিকে লাল রং করা হবে যখন কেউ এর উপরে ক্লিক করবে। একই সাথে মেমরি লীক ও হতে থাকবে। কেন? কারণ এনোনিমাস inner ফাংশনটি'র ক্লোজারে el এর একটা রেফারেন্স অনিচ্ছাকৃতভাবে থেকে যাবে। এর ফলে একটা জাভাস্ক্রিপ্ট অবজেক্ট (ফাংশনটি) আর একটা নেটিভ অবজেক্ট (el) এর মাঝে সার্কুলার রেফারেন্স তৈরি হল।</p> - -<p>এই সমস্যা সমাধানের কয়েকটা উপায় আছে। সবথেকে সহজটি হল আদৌ কোন el ভ্যারিয়েবল ব্যবহার না করাঃ</p> - -<pre class="brush: js">function addHandler(){ - document.getElementById('el').onclick = function(){ - this.style.backgroundColor = 'red'; - } -} -</pre> - -<p>আরেকটা মজার উপায় হল এক ক্লোজার এর সার্কুলার রেফারেন্স অন্য আরেকটি ক্লোজার দিয়ে নষ্ট করাঃ</p> - -<pre class="brush: js">function addHandler() { - var clickHandler = function() { - this.style.backgroundColor = 'red'; - }; - (function() { - var el = document.getElementById('el'); - el.onclick = clickHandler; - })(); -} -</pre> - -<p>Inner ফাংশনটি সরাসরি execute হয়, এর ভেতরের সবকিছু clickHandler এর তৈরি করা ক্লোজার থেকে আড়াল করে।</p> - -<p>ক্লোজার থেকে দূরে থাকার আরেকটি ভাল বুদ্ধি হল window.onunload ইভেন্টে সার্কুলার রেফারেন্স দূর করা। অনেক ইভেন্ট লাইব্রেরী এই পদ্ধতি ব্যবহার করে। কিন্তু এরকম করলে আবার ফারায়ফক্স ১.5 এর bfcache কাজ করবে না, তাই ফায়ারফক্সে unload লিসেনার রেজিস্টার করা উচিত হবে না (যদি এমন হয় যে ব্যবহার না করে উপায় নাই তাহলে অবশ্য ভিন্ন কথা)।</p> - -<div class="originaldocinfo"> -<h2 id="Original_Document_Information" name="Original_Document_Information">মূল ডকুমেন্টের খবরাখবর...</h2> - -<ul> - <li>লেখকঃ <a class="external" href="http://simon.incutio.com/">Simon Willison</a></li> - <li>শেষ সম্পাদনাঃ মার্চ ৭, ২০০৬</li> - <li>কপিরাইটঃ © 2006 Simon Willison, contributed under the Creative Commons: Attribute-Sharealike 2.0 license.</li> - <li>আরো তথ্যঃ এই টিউটোরিয়াল নিয়ে আরো তথ্যের জন্য (আর মূল আলোচনার স্লাইডের লিংক পেতে) দেখুন Simon's <a class="external" href="http://simon.incutio.com/archive/2006/03/07/etech">Etech weblog post</a>.</li> -</ul> -</div> - -<p> </p> - -<p><em><strong>অনুবাদ সংক্রান্ত তথ্যঃ</strong> টেকনিকাল তথ্য অপরিবর্তিত রেখে ভাবানুবাদের পাশাপাশি সামান্য পরিমার্জনা করা হয়েছে।</em></p> 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 ---- -<div>{{jsSidebar("More")}}</div> - -<p>সব প্রোগ্রামিং ল্যাংগুয়েজের নিজস্ব ডেটা স্ট্রাকচার থাকে (যা ব্যবহার করে আপনি আপনার ডেটা বা তথ্য প্রোগ্রামে রাখতে পারেন) - তবে একেক প্রোগ্রামিং ভাষায় একেক রকম ডেটা স্ট্রাকচার দেখা যায়। এই আর্টিকেলে জাভাস্ক্রিপ্টের নিজস্ব ডেটা স্ট্রাকচার আর সেগুলোর বিভিন্ন প্রোপার্টি (বৈশিষ্ট্য) নিয়ে আলোচনা করা হয়েছে। এই নিজস্ব ডেটা স্ট্রাকচার গুলো ব্যবহার করে অন্যান্য ডেটা স্ট্রাকচার বানানো যাবে। যেখানে সম্ভব অন্য ভাষার সাথে পার্থক্য ও দেখানো হয়েছে।</p> - -<h2 id="ডাইনামিক_টাইপিং">ডাইনামিক টাইপিং </h2> - -<p>JavaScript একটি loosely typed বা dynamic ভাষা। যার মানে হচ্ছে আমাদের আগে থেকে কোন variable এর type বলে দিতে বা ঠিক করে দিতে হবে না। কোন প্রোগ্রাম চলাকালে অটোমেটিক এর type ঠিক হয়ে যায়। যার মানে দাঁড়ায়, আমরা একই নামের বিভিন্ন type এর variable তৈরি করতে পারি!! </p> - -<pre><code>var foo = 42; // foo is now a Number -var foo = 'bar'; // foo is now a String -var foo = true; // foo is now a Boolean</code></pre> - -<h2 id="ডেটা_টাইপ">ডেটা টাইপ </h2> - -<p>ECMAScript স্ট্যান্ডার্ড অনুযায়ী ৭ ধরণের ডেটা স্ট্রাকচার আছেঃ</p> - -<p> </p> - -<ul> - <li>প্রথম ৬টি হল মৌলিক বা {{Glossary("Primitive", "primitives")}}: - <ul> - <li>বুলিয়ান {{Glossary("Boolean")}}</li> - <li>নাল {{Glossary("Null")}}</li> - <li>অসংগায়িত {{Glossary("Undefined")}}</li> - <li>সংখ্যা {{Glossary("Number")}}</li> - <li>স্ট্রিং {{Glossary("String")}}</li> - <li>সিম্বল {{Glossary("Symbol")}} (new in ECMAScript 6)</li> - </ul> - </li> - <li>এবং অবজেক্ট {{Glossary("Object")}}</li> -</ul> - -<p>নিচের আলোচনায় আমরা দেখব কিভাবে এগুলো ব্যবহার করে ডেটা রাখা যায় আর কীভাবে এগুলোর সাহায্যে আরও উন্নতমানের ডেটা স্ট্রাকচার তৈরি করা যায়।</p> - -<h2 id="মৌলিকবেসিক_মানসমূহ">মৌলিক/বেসিক মানসমূহ</h2> - -<p>অবজেক্ট ছাড়া বাকি সব টাইপের ডেটার মান তৈরি করার পর আর পরিবর্তন করা যায় না। বিশেষকরে, স্ট্রিং (যেখানে C ভাষায় স্ট্রিং এর মান পরিবর্তন করা যায়)। এই টাইপের ডেটাকে আমরা মৌলিক (primitive) টাইপের বলে থাকি। নিচে {{ anch("Strings") }} নিয়ে আলোচনায় এই বিষয়ে বিস্তারিত রয়েছে।</p> - -<h3 id="বুলিয়ান_নাল_এবং_অসংজ্ঞায়িত">বুলিয়ান, নাল এবং অসংজ্ঞায়িত</h3> - -<p>শুধুমাত্র চারটি ধ্রুবক (কন্সট্যান্ট) দিয়েই এই ডেটাটাইপ গুলো প্রকাশ করা সম্ভবঃ বুলিয়ান প্রকাশ করার জন্য <code>true</code>, <code>false</code>, নাল প্রকাশের জন্য <code>null</code>, আর অসংজ্ঞায়িত প্রকাশের জন্য <code>undefined</code>। যেহেতু এগুলো কন্সট্যান্ট, এগুলো উঁচুমানের ডেটা রাখতে পারে না।</p> - -<h3 id="সংখ্যা">সংখ্যা</h3> - -<p>ECMAScript স্ট্যান্ডার্ড অনুযায়ী সংখ্যা প্রকাশ করার জন্য একটি মাত্র নাম্বার-টাইপ আছেঃ "double-precision 64-bit binary format IEEE 754 value"। অন্যান্য প্রোগ্রামিং ভাষার মত Integer (পূর্ণ সংখ্যা) প্রকাশ করার জন্য আলাদা কোন টাইপ নেই! ভগ্নাংশ রাখার পাশাপাশি জাভাস্ক্রিপ্টের এই একমাত্র নাম্বার টাইপ দিয়ে <code>+Infinity</code>, <code>-Infinity</code>, এবং <code>NaN</code> (not-a-number) এই বিশেষ প্রতীক গুলোও প্রকাশ করা যায়।</p> - -<p>যদিও একটি সংখ্যা সাধারণত শুধুমাত্র এর মানই প্রকাশ করে, জাভাস্ক্রিপ্টের কিছু <a href="/en/JavaScript/Reference/Operators/Bitwise_Operators">বাইনারী অপারেটর</a> আছে, যেগুলো দিয়ে <a href="http://en.wikipedia.org/wiki/Mask_%28computing%29">বিট মাস্কিং</a> পদ্ধতিতে একটি মাত্র সংখ্যা থেকেই অনেকগুলো বুলিয়ান মান প্রকাশ করা সম্ভব। তবে এরকম ব্যবহার নিরুৎসাহিত করা হয়, কারণ জাভাস্ক্রিপ্টে অন্য পদ্ধতিতে বুলিয়ান মান রাখা যায় (যেমন বুলিয়ান মানের array ব্যবহার করে অথবা অবজেক্টে প্রত্যেকটা বুলিয়ান মানের জন্য একটা করে প্রোপার্টি ব্যবহার করে)। বিট মাসস্কিং ব্যবহার করলে কোড দুর্বোধ্য হয়, পরে এই কোড নিয়ে আর কাজ করাও যায় না। ক্ষেত্র বিশেষে বিট মাসস্কিং ব্যবহার না করে কোন উপায় থাকে না, যেমন স্টোরেজ সীমাবদ্ধতা থাকলে অথবা নেটওয়ার্ক দিয়ে প্রত্যেক্টা বিট পাঠানোর সময়। তবে যখনই পারা যায়, বিট মাসস্কিং শেষ সম্বল হিসেব রেখে দিয়ে দেখতে হবে অন্য কোন উপায়ে কোডটা করে ফেলা যায় কিনা!</p> - -<h3 id="স্ট্রিং">স্ট্রিং</h3> - -<p>স্ট্রিং হচ্ছে "বাক্য" বা একসাথে অনেকগুলো অক্ষর। C ভাষার সাথে জাভাস্ক্রিপ্টের পার্থক্য হচ্ছে জাভাস্ক্রিপ্টের স্ট্রিং তৈরি করার পর পরিবর্তন করা যায় না। তবে একটি স্ট্রিং এর ওপর কোন অপারেশন প্রয়োগ করে নতুন অন্য স্ট্রিং তৈরি করা যায়। যেমনঃ</p> - -<ul> - <li>মূল স্ট্রিং এর যেকোন অংশ থেকে যেকোন সংখ্যক অক্ষর নিয়ে সাব-স্ট্রিং তৈরি করা যায়। অথবা সরাসরি এই ফাংশন ব্যবহার করে সাবস্ট্রিং তৈরি করা যায়ঃ <a href="/en/JavaScript/Reference/Global_Objects/String/substr" title="substr"><code>String.substr()</code></a>।</li> - <li>যোগ করার অপারেটর (+) ব্যবহার করে দুইটা স্ট্রিং একের পর এক বসিয়ে নতুন আরেকটা স্ট্রিং তৈরি করা যায়। একই কাজ হয় <a href="/en/JavaScript/Reference/Global_Objects/String/concat" title="concat"><code>String.concat()</code></a> ফাংশন ব্যবহার করে।</li> -</ul> - -<h4 id="আপনার_কোডের_সব_ডেটা_স্ট্রিং_দিয়ে_প্রকাশ_করবেন_না!">আপনার কোডের সব ডেটা স্ট্রিং দিয়ে প্রকাশ করবেন না!</h4> - -<p>জটিল রকমের ডেটাকে স্ট্রিং দিয়ে প্রকাশ করার প্রবণতা খুবই লক্ষ্য করা যায়। কারণ, কিছু সুবিধা পাওয়া যায় প্রায় সবকিছু স্ট্রিং দিয়ে প্রকাশ করতে গেলেঃ</p> - -<ul> - <li>স্ট্রিং এর পর স্ট্রিং বসিয়ে অনেক জটিল ডেটা তৈরি করা যায়।</li> - <li>স্ট্রিং ডেটাকে ডিবাগ করা খুব সহজ।</li> - <li>অনেক API তেই স্ট্রিং খুব পরিচিত একটা মুখ। এসব API এর মধ্যে উদাহরণ হিসেবে <a href="/en/DOM/HTMLInputElement" title="HTMLInputElement">input fields</a>, <a href="/en/Storage" title="Storage">local storage</a> মান, {{ domxref("XMLHttpRequest") }} responses যখন <code>responseText ব্যবহার করা হচ্ছে</code>, ইত্যাদি।) তাই মনে হতে পারে সব ডেটাই তো স্ট্রিং দিয়ে প্রকাশ করা যাচ্ছে!</li> -</ul> - -<p>এটা সত্য যে প্রায় সব ডেটা স্ট্রাকচার কেই স্ট্রিং দিয়ে প্রকাশ করা সম্ভব, কিন্তু এটা ভাল আইডিয়া না। যেমন, আলাদা করার জন্য কিছু একটা ব্যবহার করে কেউ স্ট্রিং দিয়ে লিস্ট তৈরি করার চেষ্টা করতে পারে (যেখানে array বেশি উপযুক্ত হত)। এখন আলাদা করার জন্য যেই অক্ষরটা ব্যবহার করা হয়েছে, সেটিই যদি লিস্টের সদস্য হিসেবে হাজির হয় তাহলে সমস্যা দেখা দিবে। কোন এসকেপ অক্ষর ব্যবহার করা যেতে পারে হয়ত, কিন্তু এত কাহিনী কীর্তি করার তো দরকার নেই কারণ লিস্ট রাখার জন্য নিবেদিত ডেটা স্ট্রাকচার ই আছে, যেটা ব্যবহার না করে স্ট্রিং ব্যবহার করলে অপ্রয়োজনীয় বোঝা বহন করতে হবে।</p> - -<p>তাই শুধুমাত্র টেক্সট-জাতীয় ডেটা রাখার জন্যই স্ট্রিং ব্যবহার করা উচিত। জটিল ডেটা রাখার জন্য স্ট্রিংটিকে পার্স করে উপযুক্ত ডেটা স্ট্রেকচার ব্যবহার করতে হবে।</p> - -<h2 id="অবজেক্ট">অবজেক্ট</h2> - -<p>জাভাস্ক্রিপ্টে, অবজেক্টকে আমরা অনেকগুলো ডেটা রাখার জন্য একটা প্যাকেট হিসেবে চিন্তা করতে পারি। <a href="/en/JavaScript/Guide/Values,_variables,_and_literals#Object_literals">অবজেক্ট লিটেরেল সিনট্যাক্স</a> ব্যবহার করে আমরা অবজেক্টের অল্প কিছু প্রোপার্টির মান দিয়ে দিতে পারি। তবে পরে যেকোন সময় যেকোন প্রোপার্টি ঐ অবজেক্টে যোগ বা বিয়োগ করা যাবে। যেকোন টাইপের ডেটা আমরা প্রোপার্টি হিসেবে রাখতে পারি অবজেক্টের, অন্য অবজেক্টের ডেটাও। এভাবে, জটিল ডেটা স্ট্রাকচার তৈরি করা সম্ভব।</p> - -<h3 id="সাধারণ_অবজেক্ট_আর_ফাংশন">"সাধারণ" অবজেক্ট, আর ফাংশন</h3> - -<p>জাভাস্ক্রিপ্টে অবজেক্ট হচ্ছে key-value ম্যাপিং। মানে অবজেক্টের কোন একটা স্ট্রিং key এর মান হিসেবে যেকোন ডেটা টাইপের value রাখা যাবে। তাই অবজেক্ট কে <a href="http://en.wikipedia.org/wiki/Hash_table">হ্যাশ-ম্যাপের</a> বিকল্প হিসেবে ব্যবহার করা যায়। তবে, নন-স্ট্যান্ডার্ড <code><a href="/en/JavaScript/Reference/Global_Objects/Object/proto" title="__proto__">__proto__</a></code> pseudo প্রোপার্টি সাবধানে ব্যবহার করতে হবে। যেখানে প্রযোজ্য, সেখানে <code><a href="/en/JavaScript/Reference/Global_Objects/Object/proto" title="__proto__">__proto__</a></code> এর ভুল মান বসালে অবজেক্টের নিজস্ব প্রোটোটাইপ (ধরণ) বদলে যাবে। যেসব ক্ষেত্রে আমরা জানি না কোন স্ট্রিং এর উৎস কী (যেমন কোন ইনপুট ফিল্ড) সেসব ক্ষেত্রে সাবধান থাকতে হবেঃ <a href="http://productforums.google.com/forum/#!category-topic/docs/documents/0hQWeOvCcHU">অন্যরা এই সমস্যায় ভুগেছে</a>। এসব ক্ষেত্রে কোন <a class="external" href="http://code.google.com/p/google-caja/source/browse/trunk/src/com/google/caja/ses/StringMap.js?r=4779">StringMap abstraction</a> ব্যবহার করা যেতে পারে।</p> - -<p>ফাংশনও অবজেক্ট, জাভাস্ক্রিপ্টে। পার্থক্য হল, ফাংশন কে কল করা যায়।</p> - -<h3 id="Arrays">Arrays</h3> - -<p><a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array">Arrays</a> ও অবজেক্ট, জাভাস্ক্রিপ্টে। তবে এখানে, প্রোপার্টি গুলোর key হচ্ছে পূর্ণ সংখ্যা আর বিশেষ 'length' প্রোপার্টি রয়েছে এদের। আরও কাহিনী হল, এরেগুলো ইনহেরিট হয় <code>Array.prototype</code> থেকে - যার ফলে বেশ কিছু দরকারি ফাংশন পাওয়া যায় এরে অবজেক্ট গুলো থেকে। যেমন, <code><a href="/en/JavaScript/Reference/Global_Objects/Array/indexOf" title="en/JavaScript/Reference/Global_Objects/Array/indexOf">indexOf</a></code> ফাংশন ব্যবহার করে array তে কোন একটা মান (সদস্য) আছে কিনা জানা যায় আবার <code><a href="/en/JavaScript/Reference/Global_Objects/Array/push" title="en/JavaScript/Reference/Global_Objects/Array/push">push</a></code> ফাংশন ব্যবহার করে এরে এর শেষে কোন সদস্য যোগ করা যায়। লিস্ট কিংবা সেট হিসেবে ব্যবহার করার জন্য তাই এরে হচ্ছে সবচেয়ে উপযুক্ত ডেটা-স্ট্রাকচার।</p> - -<h3 id="তারিখ">তারিখ</h3> - -<p>তারিখ প্রকাশ করার জন্য সবচেয়ে উপযুক্ত হবে নিজস্ব <a href="/en/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global_Objects/Date"><code>Date</code></a> ইউটিলিটি ব্যবহার করা। </p> - -<h3 id="WeakMaps_ম্যাপ_সেট">WeakMaps, ম্যাপ, সেট</h3> - -<p>স্ট্যান্ডার্ড নয়। আশা করা যায় ECMAScript 6. ভার্সনে স্ট্যান্ডার্ড হবে।</p> - -<p>এসব ডেটা স্ট্রাকচার কোন অবজেক্টের রেফারেন্স কে key হিসেবে নিতে পারে। সেট দিয়ে একসারি (set) অব্জেট প্রকাশ করা হয়, আবার WeakMaps আর ম্যাপ দিয়ে কোন অবজেক্ট কে ভ্যালু হিসেবে রাখা হয়। ম্যাপ আর উইকম্যাপ এর মাঝে পার্থক্য হচ্ছেঃ ম্যাপে অবজেক্ট key, enumerate করা যায়। আর উইকম্যাপে গার্বেজ-কালেকশন বেশি ভালভাবে কাজ করে।</p> - -<p>শুধুমাত্র ECMAScript 5 ব্যবহার করেই ম্যাপ ও সেট ইমপ্লিমেন্ট করা সম্ভব। কিন্তু যেহেতু অবজেক্ট compare (যেমন, কোনটা কার থেকে ছোট সেই তুলনা করতে গেলে) করা সম্ভব না, লুক-আপ পারফরমেন্স linear হয়ে যাবে এতে। এর থেকে নেটিভ ইমপ্লেমেন্টেশন ভাল হবে কারণ তাহলে লুক-আপ পারফরমেন্স লগারিদমিক থেকে কন্সটান্ট পর্যন্ত হতে পারবে।</p> - -<p>সাধারণভাবে, DOM নোডে ডেটা bind করার জন্য যে কেউ সরাসরিভাবে অবজেক্টে প্রোপার্টি হিসেবে দিয়ে দিতে পারে, অথবা <code>data-*</code> attribute গুলো ব্যবহার করতে পারে। এর সমস্যা হল একই context এ চলছে এরকম যেকোন স্ক্রিপ্ট এই ডেটা ব্যবহার করতে পারবে। ম্যাপ আর উইকম্যাপ দিয়ে ডেটা কোন অব্জেক্টের সাথে সহজেই প্রাইভেট ভাবে bind করা যায়।</p> - -<h3 id="TypedArrays">TypedArrays</h3> - -<p>স্ট্যান্ডার্ড নয়। আশা করা যায় ECMAScript 6. ভার্সনে স্ট্যান্ডার্ড হবে।</p> - -<h2 id="আরও_দেখুন">আরও দেখুন</h2> - -<ul> - <li><a class="link-https" href="https://github.com/nzakas/computer-science-in-javascript/">Nicholas Zakas এরঃ জাভাস্ক্রিপ্টে বহুল-প্রচলিত ডেটা স্ট্রাকচার আর এলগরিদমের সংগ্রহশালা </a></li> - <li><a href="https://github.com/monmohan/DataStructures_In_Javascript" title="https://github.com/monmohan/DataStructures_In_Javascript">জাভাস্ক্রিপ্টে Search Tre(i)es ইমপ্লিমেন্টেশন</a></li> -</ul> 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 ---- -<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p> - -<p>এই চ্যাপ্টারের আলোচ্য বিষয় হল ভ্যালু যা জাভাস্ক্রিপ্ট চেনে এবং জাভাস্ক্রিপ্ট এক্সপ্রেশন গঠনের মূল কাঠামো: ভেরিয়েবল, কনস্টান্ট, এবং লিটারেল সম্পর্কে বর্ণনা করে।</p> - -<h2 id="Values(মান)">Values(মান)</h2> - -<p>জাভাস্ক্রিপ্ট নিচে উল্লেখিত পাঁচ ধরণের প্রাথমিক টাইপের ভ্যালুগুলো চেনে:</p> - -<table> - <caption> </caption> - <thead> - <tr> - <th scope="col">টাইপ</th> - <th scope="col">ভ্যালু টাইপের উদাহরন / ব্যাখ্যা</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number" style="color: rgb(34, 85, 170); text-decoration: underline; line-height: 21px;" title="en-US/docs/JavaScript/Reference/Global Objects/Number">সংখ্যা/Number</a></td> - <td>42, 3.14159</td> - </tr> - <tr> - <td><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean" style="color: rgb(34, 85, 170); text-decoration: underline; line-height: 21px;" title="en-US/docs/JavaScript/Reference/Global Objects/Boolean">বুলিয়ান/Boolean</a></td> - <td>true / false</td> - </tr> - <tr> - <td><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" style="color: rgb(34, 85, 170); text-decoration: underline; line-height: 21px;" title="en-US/docs/JavaScript/Reference/Global Objects/String">স্ট্রিং/String</a></td> - <td>"Howdy"</td> - </tr> - <tr> - <td><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">null</span></td> - <td><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">null বা "শুন্য"</span><span style="line-height: 21px;"> ভ্যালু নির্দেশ করার জন্য এই কী-ওয়ার্ড টি ব্যবহার করা হয়। এছাড়া নাল একপ্রকার প্রিমিটিভ ভ্যালু। যেহেতু জাভাস্ক্রিপ্ট ইংরেজী হরফের কেইস-সংবেদনশীল(</span>case-sensitive), <code style="font-size: 14px;">null তাই</code> <code style="font-size: 14px;">Null</code>, <code style="font-size: 14px;">NULL অথবা এগুলোর সমমানের </code>সবগুলো-ই ভিন্ন।</td> - </tr> - <tr> - <td><a href="/en-US/docs/JavaScript/Reference/Global_Objects/undefined" style="color: rgb(34, 85, 170); text-decoration: underline; font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;" title="en-US/docs/JavaScript/Reference/Global Objects/undefined">undefined</a></td> - <td><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">undefined হল </span>top-level প্রোপার্টি যার <span style="line-height: 1.5;">ভ্যালু হচ্ছে </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">এটা বা</span>'অসংজ্ঞায়িত' হিসেবে চিহ্নিত করার জন্য <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">। এটা</span><span style="line-height: 1.5;">একটি প্রিমিটিভ ভ্যালু। </span></td> - </tr> - </tbody> -</table> - -<p> </p> - -<p>এই গুটিকয়েক টাইপের ভ্যালু অথবা <em>ডেটা টাইপ</em> ব্যবহার করেই আসলে যেকোন কাজের কোড লিখে ফেলা সম্ভব। Integer আর ভগ্নাংশ (floating value) রাখার জন্য পৃথক ডেটা-টাইপ নাই। একইভাবে, তারিখ রাখার জন্যে কোন আলাদা ডেটা-টাইপ নাই, অবশ্য আপনি চাইলে <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date" title="en-US/docs/JavaScript/Reference/Global Objects/Date">Date</a></code> অবজেক্ট আর এর বিভিন্ন কাজের মেথড ব্যবহার করতে পারেন।</p> - -<p><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global Objects/Object">Objects</a> আর <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global Objects/Function">functions</a> হচ্ছে ভাষাটির অন্যতম গুরুত্বপূর্ণ উপাদান। ফাংশন অন্যান্য প্রোগ্রামিং ভাষার মতই - কোন একটি বিশেষ কাজ করার জন্য লেখা হয় ফাংশন। আর অবজেক্টে থাকে নাম-ভ্যালু যুগল! (key-value pairs) - নাম ব্যবহার করে ভ্যালুতে কি রাখা আছে জানতে পারবেন।</p> - -<h3 id="ডেটা-টাইপের_রূপান্তরকনভার্সন">ডেটা-টাইপের রূপান্তর/কনভার্সন</h3> - -<p>জাভাস্ক্রিপ্ট ডায়নামিক-টাইপ (dynamically typed) ভাষা, মানে কোন ভ্যারিয়েবলের টাইপ কি সেটা বলে দিতে হয়না, জাভাস্ক্রিপ্ট নিজেই রান-টাইমে বের করবে। এই টাইপ পরিবর্তন ও করা যায় রান-টাইমে। স্ক্রিপ্ট চলার সময় প্রয়োজনমত ভ্যারিয়েবলের টাইপ ও কনভার্ট করে নেওয়া হয়। ধরে নেই, আপনি নিচের মত করে ভ্যারিয়েবল ডিক্লেয়ার করেছেনঃ</p> - -<div style="overflow: hidden;"> -<pre class="brush: js">var answer = 42; -</pre> -</div> - -<p>পরে কোন এক সময় আপনি একই ভ্যারিয়েবলে স্ট্রিং মান বসালেনঃ</p> - -<div style="overflow: hidden;"> -<pre class="brush: js">answer = "Thanks for all the fish..."; -</pre> -</div> - -<p>জাভাস্ক্রিপ্ট ডায়নামিক-টাইপ বলেই এই লাইনে কোন ভুল হয়নি। কোডের ভাষা জাভা/সি হলে এই লাইনেই ভুল হত।</p> - -<p>যদি কোন এক্সপ্রেশনে সংখ্যা আর স্ট্রিং মান এর মাঝে '+' ওপারেটের ব্যবহার করেন, তাহলে সংখ্যা-ভ্যালু গুলো স্ট্রিং এ কনভার্ট হয়ে যাবে। যেমনঃ</p> - -<pre class="brush: js">x = "The answer is " + 42 // "The answer is 42" -y = 42 + " is the answer" // "42 is the answer" -</pre> - -<p>তবে '+' ব্যাতীত অন্য অপারেটরের ক্ষেত্রে কিন্তু সংখ্যাকে স্ট্রিং এ কনভার্ট করা হয় না! যেমনঃ</p> - -<pre class="brush: js">"37" - 7 // 30 -"37" + 7 // "377" - -</pre> - -<p>আসলে জাভাস্ক্রিপ্টে '+' সাইন দিয়ে যেমন নিউমেরিক সংখ্যার যোগ এর কাজ করা হয়। ঠিক তেমনি স্ট্রিং এর ক্ষেত্রে দুইটা স্ট্রিং কে জোড়া দেয়ার কাজ করে থাকে। যাকে ইংরেজিতে <code>concatenation</code> বলা হয়। এই কাজটা <code>concat()</code> নামক ফাংশন ব্যবহার করেও করা হয়ে থাকে।</p> - -<h3 id="স্ট্রিং_থেকে_সংখ্যা">স্ট্রিং থেকে সংখ্যা</h3> - -<p>স্ট্রিং কে সংখ্যায় কনভার্ট করতে পারবেন নিচের মেথডগুলো ব্যবহার করেঃ</p> - -<h4 id="parseInt()_আর_parseFloat()"><code>parseInt()</code> আর <code>parseFloat()</code></h4> - -<p>দেখুনঃ <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/parseInt" title="en-US/docs/JavaScript/Reference/Global Objects/parseInt">parseInt()</a></code> আর <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/parseFloat" title="en-US/docs/JavaScript/Reference/Global Objects/parseFloat">parseFloat()</a></code> পাতায়।</p> - -<p><code>parseInt</code> শুধুমাত্র integer রিটার্ন করে, তাই দশমিক সংখ্যা নিয়ে কাজকারবারেই এর ব্যবহার সীমিত। এছাড়া, একটি ভাল অভ্যাস হল এই ফাংশনে ২য় প্যারামিটারে কনভার্সনের ভিত্তি (base) পাঠিয়ে দেওয়া।</p> - -<h4 id="''_অপারেটর">'+' অপারেটর</h4> - -<p>স্ট্রিং কে সংখ্যায় কনভার্ট করার আরেকটা বুদ্ধি হল '+' অপারেটর ব্যবহার করাঃ</p> - -<pre class="brush: js">"1.1" + "1.1" = "1.11.1" -(+"1.1") + (+"1.1") = 2.2 // শুধুমাত্র বোঝার সুবিধার জন্যে বন্ধনী ব্যবহার করা হয়েছে।</pre> - -<h2 id="ভ্যারিয়েবল">ভ্যারিয়েবল</h2> - -<p>আপনার এপ্লিকেশনে ব্যবহার করার জন্য যেকোন ভ্যালু, মেমরী তে সংরক্ষণ করে রাখতে ভ্যারিয়েবল ব্যবহার করুন। ভ্যারিয়েবল হিসেবে আমরা যে নামগুলো দিতে পারব তাদের <em>identifiers</em> বলা হয়। এগুলো দেওয়ার কিছু নিয়ম আছেঃ</p> - -<p>জাভাস্ক্রিপ্টে <em>identifiers </em>অবশ্যই কোন বর্ণ (letter), আন্ডারস্কোর (_) অথবা ডলার চিহ্ন ($) দিয়ে শুরু করতে হবে; পরবর্তী অক্ষরে সংখ্যা (0-9) ব্যবহার করা যাবে। জাভাস্ক্রিপ্টে হরফের case (ইংরেজীতে বড় হাতের বা ছোট হাতের হরফ) গুরুত্বপূর্ণ - ইংরেজী "A" থেকে শুরু করে "Z" পর্যন্ত বর্ণগুলো বড় হাতের, আর "a" থেকে শুরু করে "z" পর্যন্ত বর্ণগুলো ছোট হাতের।</p> - -<p>জাভাস্ক্রিপ্ট ১.৫ বা এর ওপরের ভার্সনগুলোতে আপনি ISO 8859-1 বা ইউনিকোড অক্ষর যেমন অ/আ/ক/খ ব্যবহার করতে পারবেনঃ</p> - -<pre class="brush: js">var ফল = "কলা"; -alert(ফল);</pre> - -<p>ভ্যারিয়েবলের নাম হিসেবে বাংলা অক্ষর ব্যবহার করছি! এছাড়াও \uXXXX {{anch("Unicode escape sequences")}} ক্যারেকটার হিসেবে আইডেন্টিফায়ারে ব্যবহার করা যাবে।</p> - -<p>বৈধ ভ্যারিয়েবলের নামের কিছু উদাহরণঃ <code>Number_hits</code>, <code>temp99</code>, এবং <code>_name</code>।</p> - -<h3 id="ভ্যারিয়েবল_তৈরি_করা">ভ্যারিয়েবল তৈরি করা</h3> - -<p>দু'টি উপায়ে ভ্যারিয়েবল তৈরি (declare) করা যায়ঃ</p> - -<ul> - <li><a href="/en-US/docs/JavaScript/Reference/Statements/var" title="en-US/docs/JavaScript/Reference/Statements/var">var</a> কী-ওয়ার্ড ব্যবহার করে। যেমনঃ <code>var x = 42</code>। লোকাল আর গ্লোবাল দুই ধরণের ভ্যারিয়েবল-ই এই কীওয়ার্ড দিয়ে তৈরি করা যায়।</li> - <li>সরাসরি ভ্যালু এসাইন করে দিয়ে। যেমনঃ <code>x = 42</code>। এটি করলে <a href="#Global_Variables">global ভ্যারিয়েবল</a> তৈরি হবে আর strict লেভেলের ওয়ার্নিং তৈরি হবে। তাই এই পদ্ধতি ব্যবহার করা অনুচিত।</li> -</ul> - -<h3 id="ভ্যারিয়েবলের_মান_কী">ভ্যারিয়েবলের মান কী?</h3> - -<p><code>var</code> স্টেটমেন্ট ব্যবহার করে কোন ভ্যালু দিয়ে ইনিশিয়ালাইজ না করলে তার মান হিসেবে থাকবে <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/undefined" title="en-US/docs/JavaScript/Reference/Global Objects/undefined">undefined</a></code>।</p> - -<p>তৈরি করা হয়নি (undeclared) এমন কোন ভ্যারিয়েবল নিয়ে কাজ করতে গেলে <code>ReferenceError</code> এক্সেপশন পাবেনঃ</p> - -<pre class="brush: js">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 -</pre> - -<p>কোন ভ্যারিয়েবলে ভ্যালু দেওয়া হয়েছে কিনা জানতে তাই <code>undefined</code> ব্যবহার করুন। নিচের কোডে <code>input</code> ভ্যারিয়েবলে কোন ভ্যালু দেই নি, তাই <code><a href="/en-US/docs/JavaScript/Reference/Statements/if...else" title="en-US/docs/JavaScript/Reference/Statements/if...else">if</a></code> স্টেটমেন্টে <code>true</code> পাওয়া যাচ্ছেঃ</p> - -<pre class="brush: js">var input; -if(input === undefined){ - doThis(); -} else { - doThat(); -} -</pre> - -<p><span class="comment">The following is related to "Variables" section as potential values in assignment.</span></p> - -<p>বুলিয়ান কন্টেক্সট এ ব্যবহার করলে অবশ্য <code>undefined</code>, <code>false</code> হিসেবে আচরণ করে। যেমনঃ নিচের কোডে <code>myFunction</code> ফাংশনটি একজিকিউট হবে কারণ <code>myArray</code> এলিমেন্ট টি তৈরি করা হয় নি।</p> - -<pre class="brush: js">var myArray = new Array(); -if (!myArray[0]) myFunction(); -</pre> - -<p>তবে numeric কন্টেক্সটে ব্যবহৃত হলে <code>undefined</code> কনভার্ট হবে <code>NaN</code> এঃ</p> - -<pre class="brush: js">var a; -a + 2 = NaN</pre> - -<p>যখন কোন নাল ভ্যারিয়েবল ব্যবহারের চেষ্টা করেন, তখন বুলিয়ান কন্টেক্সটে false আর numeric কন্টেক্সটে 0 হিসেবে এর মান নির্ণিত হয়ঃ</p> - -<pre class="brush: js">var n = null; -console.log(n * 32); // logs 0 -</pre> - -<h3 id="ভ্যারিয়েবলের_স্থায়িত্বস্কোপ_(scope)">ভ্যারিয়েবলের স্থায়িত্ব/স্কোপ (scope)</h3> - -<p>যখন একটা ভ্যারিয়েবল কে কোন ফাংশনের বাইরে তৈরি করেন তখন তাকে <em>global </em>ভ্যারিয়েবল বলি, কারণ ডকুমেন্টের যেকোন জায়গায় ঐ ভ্যারিয়েবল টা ব্যবহার করা যাবে। অপরদিকে, কোন ফাংশনের ভিতর যদি ভ্যারিয়েবলটি তৈরি করেন, তাহলে সেটি <em>local </em>ভ্যারিয়েবল, কারণ ঐ ফাংশনের বাইরে ঐ ভ্যারিয়েবলের কোন অস্তিত্ব নাই।</p> - -<p>জাভাস্ক্রিপ্টে <a href="/bn-BD/docs/JavaScript/Guide/Statements#Block_Statement" title="/bn-BD/docs/JavaScript/Guide/Statements#Block_Statement">ব্লক স্টেটেমেন্টের</a> আলাদা কোন স্কোপ নেই; বরং একটা ফাংশনে যতগুলো ব্লক-ই থাকুক না কেন সবগুলো একই স্কোপে - ঐ ফাংশনের স্কোপে থাকে। যেমন নিচের কোড 5 লগ করবে (জাভাস্ক্রিপ্ট কনসোলে 5 লিখবে) কারণ x ভ্যারিয়েবলের স্কোপ if ব্লকের বাইরেও আছে।</p> - -<pre class="brush: js">if (true) { - var x = 5; -} -console.log(x); -</pre> - -<p>অন্য প্রোগ্রামিং ভাষার সাথে জাভাস্ক্রিপ্টের অমিল এখানেই। আরেকটা অপ্রত্যাশিত ব্যাপার হলঃ পরে তৈরি করা হয়েছে এমন ভ্যারিয়েবল আগে ব্যবহার করতে পারবেন অনায়াসে। কারণ ধরে নেওয়া হয় যে ভ্যারিয়েবল গুলো ফাংশনের শুরুতেই টুকে নেওয়া হয়েছে। তবে যাই হোক, যদি কোন ভ্যালু দিয়ে ভ্যারিয়েবল initialize না করেন তাহলে এর মান <code>undefined</code> পাবেন ।</p> - -<pre class="brush: js">/** - * 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"; -})(); -</pre> - -<p>২ নাম্বার উদাহরণ টি খুব সাবধানে দেখুন! ২ নম্বর উদাহরণটি এভাবে কাজ করবেঃ</p> - -<pre class="brush: js">var myvar = "my value"; - -(function() { - var myvar; - console.log(myvar); // undefined - myvar = "local value"; -})();</pre> - -<p>যেমনটা বলেছিলাম, সব <code>var স্টেটমেন্টগুলো যেন ফাংশনের শুরুতেই তৈরি করা হয়েছে। এভাবে কোড করলে ভুল হওয়ার সম্ভাবনা কমে যায় আর সহজেই বুঝতে পারা যায় কী হচ্ছে!</code></p> - -<h3 id="গ্লোবাল_ভ্যারিয়েবল">গ্লোবাল ভ্যারিয়েবল</h3> - -<p>গ্লোবাল ভ্যারিয়েবল হচ্ছে আসলে একটা <em>global object</em> এর প্রোপার্টি! ওয়েবপেইজে গ্লোবাল অবজেক্ট টা হচ্ছে <code><a href="/en-US/docs/DOM/window" title="en-US/docs/DOM/window">window</a>, তাই আপনি </code><code>window.<em>variable </em>সিন্ট্যাক্স ব্যবহার করেও গ্লোবাল ভ্যারিয়েবল এক্সেস করতে পারবেন।</code></p> - -<p><span class="comment">need links to pages discussing scope chains and the global object</span>ফলস্বরূপ, ব্রাউজারের এক উইন্ডো তে তৈরি করা গ্লোবাল ভ্যারিয়েবল কে ব্রাউজারের অন্য উইন্ডোতে বা ফ্রেম থেকে এক্সেস করা যাবে উইন্ডো বা ফ্রেমটির name ব্যবহার করে। যেমন, কোন একটা <code>FRAMESET ডকুমেন্টে তৈরি করা </code><code>phoneNumber ভ্যারিয়েবলকে এর কোন বাচ্চা ফ্রেম (child frame) থেকে </code><code>parent.phoneNumber ব্যবহার করে এক্সেস করতে পারবেন।</code></p> - -<h2 id="কন্সট্যান্ট">কন্সট্যান্ট</h2> - -<p>শুধু পড়া যাবে, মান পরিবর্তন করা যাব্বে না এমন ভ্যারিয়েবল তৈরি করতে পারেন <code><a href="/en-US/docs/JavaScript/Reference/Statements/const" title="en-US/docs/JavaScript/Reference/Statements/const">const</a> কী-ওয়ার্ড দিয়ে। এর আইডেন্টিফায়ার এর সিন্ট্যাক্স ভ্যারিয়েবলের আইডেন্টিফায়ার এর মতইঃ অবশ্যি অক্ষর, আন্ডারস্কোর অথবা $ চিহ্ন দিয়ে শুরু হতে হবে আর এরপর অক্ষর, সংখ্যা বা আন্ডারস্কোর থাকতে পারবে।</code></p> - -<pre class="brush: js">const prefix = '212'; -</pre> - -<p>শুরুতেই মান নির্ধারণ করে দেওয়ার পর কন্সট্যান্ট এর মান পরিবর্তন করা যায় না বা নতুন করে একই নামে কন্সট্যান্ট তৈরি করা যায় না।</p> - -<p>কন্সট্যান্ট এর স্কোপ ভ্যারিয়েবলের মতই। তবে <code>const কী-ওয়ার্ড টা অবশ্যই লিখতে হবে, না হলে জাভাস্ক্রিপ্ট কীভাবে ধরবে আপনি ভ্যারিয়েবল নাকি কন্সট্যান্ট কোনটা তৈরি করতে চাচ্ছেন! কীওয়ার্ড টা ব্যবহার না করলে তাই একে ভ্যারিয়েবল হিসেবেই গণ্য করা হবে।</code></p> - -<p>একই স্কোপের ভেতর কোণ ফাংশন অথবা ভ্যারিয়েবলের নামে কন্সট্যান্ট তৈরি করা যায় না। যেমনঃ</p> - -<pre class="brush: js">// নিচের কোডে ভুল আছে -function f() {}; -const f = 5; - -// নিচেরটাও ভুল! -function f() { - const g = 5; - var g; - - //statements -} -</pre> - -<h2 id="লিট্যারেল">লিট্যারেল</h2> - -<p>লিটারেল কে জাভাস্ক্রিপ্টে ভ্যালু হিসেবে ব্যবহার করা যায়। এগুলো যেভাবে দেখানো হয়, সেভাবেই লিখতে হবে - এগুলো ভ্যারিয়েবল না। যেভাবে দেখানো হচ্ছে সেভাবেই কোডে লিখতে হবে বলেই এদের নাম লিটারেল (literal)! এই অংশে নিচের লিট্যারেল গুলো নিয়ে আলোচনা করেছিঃ</p> - -<ul> - <li>{{anch("Array লিটারেল")}}</li> - <li>{{anch("বুলিয়ান লিটারেল")}}</li> - <li>{{anch("ভগ্নাংশের লিটারেল")}}</li> - <li>{{anch("Integers")}}</li> - <li>{{anch("Object literals")}}</li> - <li>{{anch("String literals")}}</li> -</ul> - -<h3 id="Array_লিটারেল">Array লিটারেল</h3> - -<p>Array লিটারেল হচ্ছে শূণ্য বা এর থেকে বেশি সংখ্যক "এক্সপ্রেশনের" একটা লিস্ট - এই সব এক্সপ্রেশনের প্রত্যেকেই হচ্ছে array টির একেকটি সদস্য - এই লিস্টের সামনে আর পরে তৃতীয় বন্ধনী ([]) ব্যবহার করতে হবে। যখন আপনি array লিটারেল ব্যবহার করে array তৈরি করবেন, তখন এই লিস্টের ভ্যালুগুলোকে array টির সদস্য হিসেবে বিবেচনা করে arrayটি ইনিশিয়ালাইজ করা হয়। আর যতগুলো সদস্য দিলাম, array এর length তত।</p> - -<p>নিচের উদাহরণে ৩ সদস্য বিশিষ্ট তদন্ত কমিটি থুক্কু <code>coffees নামের array তৈরি করা হয়েছে - array টির length ও তাই তিনঃ</code></p> - -<pre class="brush: js">var coffees = ["French Roast", "Colombian", "Kona"]; -</pre> - -<p><strong>খেয়াল করুনঃ</strong> array লিটারেল হচ্ছে বিশেষ ধরণের অবজেক্ট ইনিশিয়ালাইজার। দেখুন <a href="/bn-BD/docs/JavaScript/Guide/Working_with_Objects#Using_Object_Initializers" title="/bn-BD/docs/JavaScript/Guide/Working_with_Objects#Using_Object_Initializers">কিভাবে অবজেক্ট ইনিশিয়ালাইজার ব্যবহার করা যায়।</a></p> - -<p>যদি টপ-লেভেল কোডে (মানে ফাংশনের বাইরের কোডে) array তৈরি করা হয়, যেই এক্সপ্রেশনে array লিটারেলটি আছে - সেই এক্সপ্রেশনটি যতবার execute করা হবে ততবার-ই array টি ইন্টারপ্রেট (নতুন করে তৈরি) করা হবে। এছাড়া কোন ফাংশনের ভেতর array লিটারেল ব্যবহার করলে যতবার ফাংশনটি কল করবেন ততবার লিটারেলটি তৈরি করা হবে।</p> - -<p>Array লিটারেল <code>Array</code> অবজেক্ট-ও বটে। পড়ুন <a href="/bn-BD/docs/JavaScript/Guide/Predefined_Core_Objects#Array_Object" title="/bn-BD/docs/JavaScript/Guide/Predefined_Core_Objects#Array_Object">বিস্তারিত</a>।</p> - -<h4 id="Array_লিটারেলে_বাড়তি_কমা'র_ব্যবহার">Array লিটারেলে বাড়তি কমা'র ব্যবহার</h4> - -<p>Array লিটারেলে যে সব সদস্য দিতেই হবে এমন কথা নাই - যদি কোন row তে পরপর দুইটা কমা ব্যবহার করেন তাহলে কমা দুটোর মাঝের সদস্যটি <code>undefined</code> হিসেবে থাকে। নিচের উদাহরণে <code>fish</code> array তৈরি করা হয়েছে এভাবেঃ</p> - -<pre class="brush: js">var fish = ["Lion", , "Angel"]; -</pre> - -<p>এই array তে দুটো সদস্যের মান আছে আর একটির ভ্যালু নাই। (<code>fish[0] </code>হচ্ছে "Lion", <code>fish[1]</code> হচ্ছে <code>undefined</code>, আর <code>fish[2]</code> হচ্ছে "Angel")।</p> - -<p>সদস্যের লিস্টের শেষে যদি কমা দিয়ে রাখেন সেটি অগ্রাহ্য করা হবে। নিচের উদাহরণে array এর length তিন। <code>myList[3]</code> বলে কোন সদস্য নেই। শেষের এই অতরিক্ত কমা ছাড়া বাকি সব কমা-ই নতুন সদস্য নির্দেশ করে। (<strong>খেয়াল করুনঃ</strong> পুরোনো ব্রাউজারে শেষের অতিরিক্ত কমা ত্রুটি তৈরি করতে পারে তাই লিস্টের শেষে বাড়তি কমা না দেওয়াই ভাল।)</p> - -<pre class="brush: js">var myList = ['home', , 'school', ]; -</pre> - -<p>নিচের উদাহরণে array এর length চার। <code>myList[0]</code> আর <code>myList[2]</code> অসংজ্ঞায়িত।</p> - -<pre class="brush: js">var myList = [ , 'home', , 'school']; -</pre> - -<p>নিচের উদাহরণে array এর length চার। <code>myList[1]</code> আর <code>myList[3]</code> অসংজ্ঞায়িত।<code> শুধুমাত্র শেষের কমা অগ্রাহ্য করা হয়েছেঃ</code></p> - -<pre class="brush: js">var myList = ['home', , 'school', , ]; -</pre> - -<p>অতিরিক্ত কমা'র ব্যবহারে ফলাফল কী আসে সেটা ঠিকমত বুঝতে পারাটা গুরুত্বপূর্ণ। নিজে কোড লেখার সময় array'র যে সদস্যগুলোর মান দিতে চান না, সরাসরি <code>undefined</code> মান বসিয়ে দিলে আপনার কোড সহজেই বুঝা যাবে আর ভবিষ্যতে কাজ করাও সহজ হবে।</p> - -<h3 id="বুলিয়ান_লিটারেল">বুলিয়ান লিটারেল</h3> - -<p>বুলিয়ান টাইপের দু'ধরণের লিটারেল আছেঃ <code>true</code> আর <code>false</code>।</p> - -<p>প্রিমিটিভ (যেগুলো অবজেক্ট না) <code>true</code> আর <code>false</code> বুলিয়ান ভ্যালু কে Boolean অবজেক্টের true আর false ভ্যালুর সাথে গুলিয়ে ফেলবেন না - এটি প্রিমিটিভ ভ্যালুগুলোর wrapper হিসেবেই কাজ করে। আরো তথ্যের জন্য <a href="/bn-BD/docs/JavaScript/Guide/Predefined_Core_Objects#Boolean_Object" title="/bn-BD/docs/JavaScript/Guide/Predefined_Core_Objects#Boolean_Object">বুলিয়ান অবজেক্ট</a> নিয়ে পড়ুন।</p> - -<h3 id="Integers">Integers</h3> - -<p>Integers (পূর্ণ সংখ্যা) কে ১০ (দশমিক), ১৬ (হেক্সাডেসিমাল) বা ৮(অক্টাল) এর ভিত্তিতে (base) প্রকাশ করা যায়।</p> - -<ul> - <li>দশমিক পূর্ণ সংখ্যার লিটারেল হচ্ছে এক বা একাধিক সংখ্যার ক্রম যার শুরুতে শূণ্য থাকতে পারবে না।</li> - <li>শুরুতে শূণ্য সহ এক বা একাধিক সংখ্যার ক্রম ব্যবহার করলে সেটি অক্টাল বলে গণ্য হয়। অক্টাল ভিত্তিতে শুধুমাত্র ০-৭ এই কয়টি ডিজিট ব্যবহার করা যায়।</li> - <li>শুরুতে 0x (অথবা 0X) সহ এক বা একাধিক সংখ্যার ক্রম ব্যবহার করলে সেটি হেক্সাডেসিমাল বলে গণ্য হয়। এই ভিত্তিতে 0-9 এই কয়টি ডিজিট ছাড়াও a-f বা A - F এই অক্ষরগুলো ব্যবহার করা যায়।</li> -</ul> - -<p>অক্টাল লিটেরেল ব্যবহার নিরুতসাহিত আর ECMA-262 ৩য় সংস্করণে বাদ দিয়ে দেওয়া হয়েছে। অবশ্য পুরনো কোড যাতে চলতে পারে সেহেতু জাভাস্ক্রিপ্ট ১.৫ এ এখনো অক্টাল সমর্থন করে।</p> - -<p>Integer লিটেরেলের কিছু ব্যবহারঃ</p> - -<pre class="eval">0, 117 and -345 (দশমিক, base 10) -015, 0001 and -077 (অক্টাল, base 8) -0x1123, 0x00111 and -0xF1A7 (হেক্সাডেসিমাল, "hex" or base 16) -</pre> - -<h3 id="ভগ্নাংশের_লিটারেল">ভগ্নাংশের লিটারেল</h3> - -<p>ভগ্নাংশে নিচের বিষয়গুলো থাকেঃ</p> - -<ul> - <li>চিহ্ন (sign) সহ/ছাড়া দশমিক ভিত্তির পূর্ণ সংখ্যা (শুরুতে ''+'' অথবা ''- '' চিহ্ন থাকতে পারে)</li> - <li>একটা দশমিক ফোটা ("."),</li> - <li>দশমিক ফোটার পরের অংশ (যেটা কিনা ১০-ভিত্তির পূর্ণ সংখ্যা),</li> - <li>এক্সপোনেন্ট (exponent)</li> -</ul> - -<p>Exponent অংশ "e" অথবা "E" দিয়ে শুরু হয় আর এর পর থাকে ১০-ভিত্তির পূর্ণসংখ্যা, যেটার শুরুতে আবার + অথবা - চিহ্ন থাকতে পারে নাও পারে। একটা ভগ্নাংশ লিটেরেলে কমপক্ষে একটি ডিজিট (সংখ্যা) এবং হয় দশমিক ফোটা অথবা "e" (অথবা "E") থাকতে হবে।</p> - -<p>ভগ্নাংশ লিটেরেলের কিছু উদাহরণ হলঃ 3.1415, -3.1E12, .1e12, আর 2E-12।</p> - -<p>পরিষ্কার করে বলতে গেলে, সিন্ট্যাক্স হচ্ছেঃ</p> - -<pre class="eval">[digits][.digits][(E|e)[(+|-)]digits] -</pre> - -<p>যেমনঃ</p> - -<pre class="eval">3.14 -2345.789 -.3333333333333333333 -</pre> - -<h3 id="অবজেক্ট_লিটেরেল">অবজেক্ট লিটেরেল</h3> - -<p>দ্বিতীয় বন্ধনীর ({}) ভেতর শূণ্য/এক/একাধিক নাম-ভ্যালু যুগল (name-value pairs) লিখে অবজেক্ট লিটেরেল তৈরি করা যায়। তবে কোন স্টেটমেন্টের শুরুতেই অবজেক্ট লিটেরেল ব্যবহার করা যায় না। এমনটা করলে ত্রুটি তৈরি হবে অথবা আপনি যেমনটা আশা করছিলেন সেরকম ফল পাবেন না - কারণ শুরুতেই { দেখে জাভাস্ক্রিপ্ট মনে করতে পারে আপনি ব্লক শুরু করছেন।</p> - -<p>নিচের উদাহরণে অবজেক্ট লিটেরেল দেখানো হয়েছে। <code>car</code> অবজেক্টের প্রথম সদস্য <code>myCar</code> নামের একটি প্রোপার্টি; দ্বিতীয় সদস্য <code>getCar</code> একটি ফাংশন <code>(CarTypes("Honda"));</code> ইনভোক করে, আর তৃতীয় সদস্য <code>special</code> ইতোমধ্যে তৈরি করা একটা ভ্যারিয়েবল ব্যবহার করে (<code>Sales</code>)।</p> - -<pre class="brush: js">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 -</pre> - -<p>এছাড়াও, কোন প্রোপার্টির নাম হিসেবে সংখ্যা কিংবা স্ট্রিং লিটেরেল ব্যবহার করতে পারেন অথবা এক অবজেক্টের ভেতর আরেকটিকে নেস্ট করতে পারেন। নিচের উদাহরণে দেখুনঃ</p> - -<pre class="brush: js">var car = { manyCars: {a: "Saab", "b": "Jeep"}, 7: "Mazda" }; - -console.log(car.manyCars.b); // Jeep -console.log(car[7]); // Mazda -</pre> - -<p>দয়া করে খেয়াল করুনঃ</p> - -<pre class="brush: js">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 -</pre> - -<h3 id="স্ট্রিং_লিটেরেল">স্ট্রিং লিটেরেল</h3> - -<p>স্ট্রিং লিটেরেল তৈরি হয় শূণ্য বা এর থেকে বেশি ক্যারেকটার ডবল-কোটেশন (") বা উদ্ধৃতি চিহ্ন বা single quotation (') চিহ্ন এর মধ্যে রাখলে। তবে double বা single যেই উদ্ধৃতি চিহ্ন-ই ব্যবহার করুন না কেন স্ট্রিং লিটেরেলের শুরুতে আর শেষে একই প্রকারের চিহ্ন ব্যবহার করতে হবে। নিচে কিছু স্ট্রিং লিটেরেলের উদাহরণ দেখুনঃ</p> - -<ul> - <li><code>"foo"</code></li> - <li><code>'bar'</code></li> - <li><code>"1234"</code></li> - <li><code>"one line \n another line"</code></li> - <li><code>"John's cat"</code></li> -</ul> - -<p>স্ট্রিং লিটেরেলে আপনি স্ট্রিং অবজেক্টের যেকোন ফাংশন কল করতে পারবেন - জাভাস্ক্রিপ্ট স্বয়ংক্রিয়ভাবে স্ট্রিং লিটেরেল কে অস্থায়ী অবজেক্টে কনভার্ট করে, এরপর মেথডটি কল করে, তারপর অস্থায়ী অবজেক্টটি ফেলে দেয়। আপনি <code>String.length </code>প্রোপার্টি ব্যবহার করতে পারেন স্ট্রিং লিটেরেলের ওপরঃ</p> - -<pre class="brush: js">"John's cat".length -</pre> - -<p>স্ট্রিং অবজেক্ট ব্যবহারেরে বিশেষ কোন কারণ না থাকলে আপনার উচিত হবে স্ট্রিং লিটেরেল-ই ব্যবহার করা। বিস্তারিত দেখুনঃ <a href="/en-US/docs/JavaScript/Guide/Predefined_Core_Objects#String_Object" title="en-US/docs/JavaScript/Guide/Predefined Core Objects#String Object">String Object</a> ।</p> - -<h4 id="স্ট্রিং_এ_বিশেষ_অক্ষর_ব্যবহার">স্ট্রিং এ বিশেষ অক্ষর ব্যবহার</h4> - -<p>গতানুগতিক অক্ষরের পাশাপাশি বিশেহ অক্ষ্র ও স্ট্রিং এ ব্যবহার করতে পারবেন, যেমনটা দেখানো হয়েছে উদাহরণেঃ</p> - -<pre class="brush: js">"one line \n another line" -</pre> - -<p>নিচের টেবিলে জাভাস্ক্রিপ্টের বিশেষ অক্ষরগুলো যেগুলো স্ট্রিং এ ব্যবহার করতে পারবেন সেগুলো দেখানো হয়েছেঃ</p> - -<table class="standard-table"> - <caption>টেবিল ২.১ জাভাস্ক্রিপ্টের বিশেষ অক্ষর</caption> - <thead> - <tr> - <th scope="col">অক্ষর</th> - <th scope="col">অর্থ</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>\b</code></td> - <td>Backspace</td> - </tr> - <tr> - <td><code>\f</code></td> - <td>Form feed</td> - </tr> - <tr> - <td><code>\n</code></td> - <td>নতুন লাইন</td> - </tr> - <tr> - <td><code>\r</code></td> - <td>Carriage return</td> - </tr> - <tr> - <td><code>\t</code></td> - <td>Tab</td> - </tr> - <tr> - <td><code>\v</code></td> - <td>Vertical tab</td> - </tr> - <tr> - <td><code>\'</code></td> - <td>ঊর্ধকমা or single quote</td> - </tr> - <tr> - <td><code>\"</code></td> - <td>Double quote</td> - </tr> - <tr> - <td><code>\\</code></td> - <td>Backslash character (\).</td> - </tr> - <tr> - <td><code>\<em>XXX</em></code></td> - <td>Latin-1 এনকোডিং সহ অক্ষরটি 0 এবং 377 এর মধ্যে তিনটি অক্টাল সংখ্যা দ্বারা XXX নির্দিষ্ট করা হয়েছে। উদাহরণস্বরূপ, \251 হল কপিরাইট প্রতীকের অকটাল ক্রম।</td> - </tr> - <tr> - <td><code>\x<em>XX</em></code></td> - <td>Latin-1 এনকোডিং সহ অক্ষরটি 00 এবং FF এর মধ্যকার সংখ্যাগুলি দ্বারা XXX নির্দিষ্ট করা হয়েছে। উদাহরণস্বরূপ, \xA9 হল কপিরাইট প্রতীকের হেক্সাডেসিমেল ক্রম।</td> - </tr> - <tr> - <td><code>\u<em>XXXX</em></code></td> - <td>ইউনিকোড অক্ষর চারটি হেক্সাডেসিমেল সংখ্যা দ্বারা XXXX নির্দিষ্ট করা হয়। উদাহরণস্বরূপ, \u00A9 হল কপিরাইট প্রতীকের ইউনিকোড ক্রম। {{anch("Unicode escape sequences")}} এ দেখুন.</td> - </tr> - </tbody> -</table> - -<h4 id="অক্ষর_এস্কেপ_(escape)_করা">অক্ষর এস্কেপ (escape) করা</h4> - -<p>যেই অক্ষরগুলো টেবিল ২.১ এ দেখানো হয়নি সেগুলোর সামনের ব্যাক-স্ল্যাশ অগ্রাহ্য করা হয়। কিন্তু এই ব্যবহার নিরুতসাহিত করা হয় এবং করাও উচিত নয়।</p> - -<p>স্ট্রিং এর মধ্যে উদ্ধৃতি চিহ্ন দিতে পারেন এটির সামনে ব্যাক-স্ল্যাশ ব্যবহার করে। এটি-ই <em>এসকেপ</em> করা (উদ্ধৃতি চিহ্ন কে) হিসেবে পরিচিত। যেমনঃ</p> - -<pre class="brush: js">var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service."; -console.log(quote); -</pre> - -<p>এর ফলাফল হবে এমনঃ</p> - -<pre class="eval">He read "The Cremation of Sam McGee" by R.W. Service. -</pre> - -<p>অবশ্য স্ট্রিং এ ব্যাক-স্ল্যাশ ব্যবহার করতে একেও এসকেপ করতে হবে! যেমন, স্ট্রিং এ <code>c:\temp</code> মান ব্যবহার করতে চাইলেঃ</p> - -<pre class="brush: js">var home = "c:\\temp"; -</pre> - -<p>লাইন-বিরতি এসকেপ করতে পারেন সেগুলোর আগে ব্যাক-স্ল্যাশ ব্যবহার করে। ব্যাক-স্ল্যাশ আর লাইন-বিরতি (কীবোর্ডের এন্টার চেপে লাইন বিরতি দেওয়া যায়) দুটোই স্ট্রিং এর মান থেকে সরিয়ে নেওয়া হবেঃ</p> - -<pre class="brush: js">var str = "this string \ -is broken \ -across multiple\ -lines." -<span class="objectBox objectBox-text">console.log(str);</span> // <span class="objectBox objectBox-text">this string is broken across multiplelines.</span> -</pre> - -<p>যদিও জাভাস্ক্রিপ্টে "heredoc" সিন্ট্যাক্স নেই, আপনি কাছাকাছি কিছু একটা পেতে পারেন লাইন-বিরতি এসকেপ ব্যবহার করে আর এসকেপ করা লাইনব্রেক প্রতি লাইনের শেষে দিয়েঃ</p> - -<pre class="brush: js">var poem = -"Roses are red,\n\ -Violets are blue.\n\ -I'm schizophrenic,\n\ -And so am I." -</pre> - -<h2 id="ইউনিকোড">ইউনিকোড</h2> - -<p>ইউনিকোড হচ্ছে বিশ্বব্যাপী স্বীকৃত ক্যারেকটার-কোডিং স্ট্যান্ডার্ড, কোন ভাষা (যেমনঃ বাংলা) লেখার জন্য ব্যবহৃত হয়। আমেরিকা, ইউরোপ, মধ্যপ্রাচ্য, আফ্রিকা, ভারত, এশিয়া, প্যাসিফিকা সব অঞ্চলের ভাষার-ই সাপোর্ট আছে ইউনিকোডে। শুধু তাই নয় ঐতিহাসিক পাণ্ডুলিপি আর টেকনিক্যাল সিম্বল দেওয়ার ও ব্যবস্থা আছে। পৃথিবীর বিভিন্ন ভাষায় লেখালেখির আদান-প্রদান, প্রসেস করা, উপ্সথাপন করা সবকিছুই ইউনিকোড দিয়ে করা যায় (যেমনটা আপনারা এখন এই লেখাটা বাংলায় পড়তে পারছেন ইউনিকোড এর জন্য-ই!)। এছাড়া সাধারণ গাণিতিক আর টেকনিকাল চিহ্ন-ও দেওয়া যায়। বহুভাষায় কম্পিউটিং করার যে আন্তর্জাতিক সমস্যা ছিল, ইউনিকোড তার সমাধান করেছে। অবশ্য নতুন কিছু ভাষা বা প্রাগৈতিহাসিক পাণ্ডুলিপির জন্য সাপোর্ট নাও পেতে পারেন।</p> - -<p>সব এনকোডিং এর জন্যে-ই ইউনিকোড বর্ণমালা ব্যবহার করা যায়। ASCII (American Standard Code for Information Interchange) বর্ণমালার ওপর ভিত্তি করে ইউনিকোড মডেল করা হয়েছে। প্রত্যেকটি হরফের জন্য এটি একটি সংখ্যা আর নাম ব্যবহার করে। এই সংখ্যাটি'র বিট রিপ্রেজেন্টেশন ও ক্যারেক্টার এনকোডিং এ বলা থাকে। ১৬-বিটের সংখ্যাটি হেক্সাডেসিমালে প্রকাশ করা হয়, আর এর সামনে থাকে U অক্ষরটি। যেমন, U+0041 দিয়ে A বুঝানো হয়। আর এই অক্ষরটির অনন্য নাম হল LATIN CAPITAL LETTER A।</p> - -<p><strong>জাভাস্ক্রিপ্টের ১.৩ এর আগের ভার্সনে ইউনিকোড সাপোর্ট নেই।</strong></p> - -<h3 id="ASCII_এবং_ISO_এর_সাথে_ইউনিকোড_কম্প্যাটিবিলিটি">ASCII এবং ISO এর সাথে ইউনিকোড কম্প্যাটিবিলিটি</h3> - -<p>ইউনিকোড আন্তর্জাতিক স্ট্যান্ডার্ড ISO/IEC 10646-1; 1993 দ্বারা সম্পূর্ণভাবে সমর্থিত, যেটা কিনা ISO 10646 এর অংশ।</p> - -<p>বেশকিছু ইউনিকোড স্ট্যান্ডার্ড (UTF-8, UTF-16 এবং ISO UCS-2 সহ) ব্যবহার করা হয় ইউনিকোড কে বিট হিসেবে দেখানোর জন্য। (মানে ব্যবহারিক প্রয়োগের জন্য!)</p> - -<p>ইউনিকোডের 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) দু'টি অক্টেট ব্যবহার করে।</p> - -<p>UTF-8/ইউনিকোডের জন্য জাভাস্ক্রিপ্ট আর নেভিগেটরের সাপোর্ট থাকার ফলাফল স্বরূপ আপনি ল্যাটিন নয়-এমন, আন্তর্জাতিক আর এলাকাভিত্তিক, আপনার নিজের ভাষার বর্ণমালা ব্যবহার করতে পারছেন, আরো পারছেন বিশেষ সব টেকনিকাল হরফ ব্যবহার করতে। বহুভাষায় ভাব প্রকাশ সমর্থন করার জন্য ইউনিকোড একটি স্ট্যান্ডার্ড পদ্ধতি। যেহেতু ইউনিকোডের UTF-8 এনকোডিং ASCII সমর্থন করে, প্রোগ্রামগুলো ASCII বর্ণমালাও ব্যবহার করতে পারে ইউনিকোডের পাশাপাশি, আর ASCII নয় এমন বর্ণমালা (যেমন, বাংলা!) ও ব্যবহার করতে পারেন জাভাস্ক্রিপ্টের কমেন্টে, স্ট্রিং লিটেরেলে, ভ্যারিয়েবলের আইডেন্টিফায়ারে, রেগুলার এক্সপ্রেশনে।</p> - -<h3 id="ইউনিকোড_এসকেপ_সিকোয়েন্স">ইউনিকোড এসকেপ সিকোয়েন্স</h3> - -<p>আপনি স্ট্রিং লিটেরেল, রেগুলার এক্সপ্রেশন আর ভ্যারিয়েবলের আইডেন্টিফায়ারে ইউনিকোড এসকেপ সিকোয়েন্স ব্যবহার করতে পারেন। এসকেপ সিকোয়েন্সে ৬টি ASCII অক্ষর থাকেঃ \u আর ৪-ডিজিটের হেক্সাডেসিমেল সংখ্যা। যেমনঃ \u00A9 দিয়ে কপিরাইট চিহ্নটিকে প্রকাশ করা হয়। আর বুঝতেই পারছেন, প্রতিটি এসকেপ সিকোয়েন্স দিয়ে ১টি মাত্র অক্ষর প্রকাশ করা হয়।</p> - -<p>নিচের কোডে দেখিয়েছি কিভাবে কপিরাইট চিহ্ন আর "Netscape Communications" স্ট্রিংটি তৈরি করা হয়েছেঃ</p> - -<pre class="brush: js">var x = "\u00A9 Netscape Communications";</pre> - -<p>নিচের সারণিতে প্রায়-ই ব্যবহার করা হয় এমন কিছু বিশেষ অক্ষর আর তাদের ইউনিকোড ভ্যালু দেওয়া হলঃ</p> - -<table class="standard-table"> - <caption>সারণী ২.২ বিশেষ অক্ষরের ইউনিকোড মান</caption> - <thead> - <tr> - <th scope="col">প্রকৃতি</th> - <th scope="col">ইউনিকোড মান</th> - <th scope="col">নাম</th> - <th scope="col">ফর্ম্যাট</th> - </tr> - </thead> - <tbody> - <tr> - <td rowspan="4">White space values</td> - <td>\u0009</td> - <td>Tab</td> - <td><TAB></td> - </tr> - <tr> - <td>\u000B</td> - <td>Vertical Tab</td> - <td><VT></td> - </tr> - <tr> - <td>\u000C</td> - <td>Form Feed</td> - <td><FF></td> - </tr> - <tr> - <td>\u0020</td> - <td>Space</td> - <td><SP></td> - </tr> - <tr> - <td rowspan="2">Line terminator values</td> - <td>\u000A</td> - <td>Line Feed</td> - <td><LF></td> - </tr> - <tr> - <td>\u000D</td> - <td>Carriage Return</td> - <td><CR></td> - </tr> - <tr> - <td rowspan="5">Additional Unicode escape sequence values</td> - <td>\u0008</td> - <td>Backspace</td> - <td><BS></td> - </tr> - <tr> - <td>\u0009</td> - <td>Horizontal Tab</td> - <td><HT></td> - </tr> - <tr> - <td>\u0022</td> - <td>Double Quote</td> - <td>"</td> - </tr> - <tr> - <td>\u0027</td> - <td>Single Quote</td> - <td>'</td> - </tr> - <tr> - <td>\u005C</td> - <td>Backslash</td> - <td>\</td> - </tr> - </tbody> -</table> - -<p>জাভাস্ক্রিপ্টে ব্যবহৃত এসকেপ সিকোয়েন্স আর জাভাতে এর ব্যবহারের মাঝে পার্থক্য আছে। জাভাস্ক্রিপ্টে কখনোই এস্কেপ সিকোয়েন্স কে বিশেষ কোন অক্ষর হিসেবে ধরা হয় না প্রথমে। যেমন, কোন স্ট্রিং এর ভেতর লাইন-শেষ-করার-জন্য কোন এসকেপ সিকোয়েন্স ব্যবহার করলে সেটি লাইন বিরতি দেয় না, যতক্ষণ না ফাংশন একে ব্যবহার করছে। জাভাস্ক্রিপ্ট কমেন্টে ব্যবহার করা যেকোন এসকেপ সিকোয়েন্স উপেক্ষা করে। যদি কোন এসকেপ সিকোয়েন্স এক-লাইনের কমেন্টে ব্যবহার করা হয়, জাভা একে ইউনিকোড অক্ষর হিসেবে নেয়। স্ট্রিং লিটেরেলের ক্ষেত্রে জাভা কম্পাইলার প্রথমেই এসকেপ সিকোয়েন্সকে ইন্টারপ্রেট করে। যেমন, লাইন-বিরতি এস্কেপ অক্ষর (যেমন \u000A) যদি জাভায় ব্যবহার করেন, স্ট্রিং লিটেরেল টি ঐখানেই শেষ হয়ে যাবে। ফলস্বরূপ ত্রুটি তৈরি হবে কারণ জাভার স্ট্রিং লিটেরেলে লাইন-বিরতি চিহ্ন ব্যবহার করা যায় না। লাইন ফিড দেওয়ার জন্য জাভাতে আপনাকে \n ব্যবহার করতে হবে। জাভাস্ক্রিপ্টে এই \n এর কাজ এসকেপ সিকোয়েন্স দিয়েই করতে পারবেন।</p> - -<h3 id="জাভাস্ক্রিপ্ট_ফাইলে_ইউনিকোড_অক্ষর">জাভাস্ক্রিপ্ট ফাইলে ইউনিকোড অক্ষর</h3> - -<p><a href="/en-US/docs/Gecko" title="en-US/docs/Gecko">Gecko</a> এর পুরোনো ভার্সন ধরে নিত XUL যেই জাভাস্ক্রিপ্ট ফাইল লোড করে, সেগুলো ল্যাটিন-১ ক্যারেক্টার এনকোডিং এ আছে। Gecko ১.৮ আর পরের ভার্সনগুলোতে ফাইলটা যেই এনকোডিং এ থাকবে, সেই এনকোডিং ই ব্যবহার করা হয়। <a href="/en-US/docs/International_characters_in_XUL_JavaScript" title="en-US/docs/International_characters_in_XUL_JavaScript">XUL জাভাস্ক্রিপ্টে আন্তর্জাতিক অক্ষর</a> দেখুন আরো তথ্যের জন্য।</p> - -<h3 id="ইউনিকোড_ব্যবহার_করে_অক্ষর_দেখানো">ইউনিকোড ব্যবহার করে অক্ষর দেখানো</h3> - -<p>বিভিন্ন ভাষার অক্ষর কিংবা টেকনিকাল চিহ্ন দেখানোর জন্য ইউনিকোড ব্যবহার করুন। অক্ষরগুলো ঠিকমত দেখানোর জন্য ক্লায়েন্ট (যেমন মজিলা ফায়ারফক্স বা নেটস্কেপ) এর ইউনিকোড সমর্থন করা প্রয়োজন। এছাড়াও, ক্লায়েন্টের কাছে উপযুক্ত ইউনিকোড ফন্ট থাকাটাও দরকার, আর ক্লায়েন্ট যেই প্ল্যাটফর্মে আছে সেখানেও ইউনিকোড সমর্থন করতে হবে। প্রায়ই দেখা যায় ইউনিকোড ফন্ট যেটি ব্যবহার করা হয়েছে সেটি সব ইউনিকোড অক্ষর দেখায় না। কিছু প্ল্যাটফর্ম, যেমন উইন্ডোজ ৯৫ এ ইউনিকোডের আংশিক সমর্থন রয়েছে।</p> - -<p>ASCII নয় এমন অক্ষর ইনপুট নেওয়ার জন্য ক্লায়েন্টকে ইউনিকোড হিসেবে ইনপুট নিতে হবে। শুধুমাত্র স্ট্যান্ডার্ড কীবোর্ড ব্যবহার করেই ইউনিকোড-সমর্থিত অতিরিক্ত অক্ষরগুলো ইনপুট নেওয়া সম্ভব নয়। মাঝে মাঝে, ইউনিকোড ইনপুট নেওয়ার একমাত্র উপায় হয়ে দাড়ায় ইউনিকোড এসকেপ সিকোয়েন্স ব্যবহার করে।</p> - -<p>ইউনিকোড নিয়ে আরো তথ্যের জন্য দেখুন <a class="external" href="http://www.unicode.org/">Unicode হোমপেইজ</a> আর ইউনিকোড স্ট্যান্ডার্ড, ২.০ সংস্করণ, প্রকাশকঃ Addison-Wesley, 1996।</p> - -<h2 id="তথ্যাদি">তথ্যাদি</h2> - -<ul> - <li><a class="external" href="http://0xcc.net/jsescape/" title="Text Escaping and Unescaping in JavaScript">জাভাস্ক্রিপ্টে লেখা এসকেপ করা আর এসকেপ-না-করা</a> – অক্ষর কে জাভাস্ক্রিপ্ট ইউনিকোড অক্ষরে রূপান্তরের ইউটিলিটি।</li> -</ul> 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 ---- -<div>{{jsSidebar("জাভাস্ক্রিপ্ট গাইড")}}</div> - -<p class="summary">এই জাভাস্ক্রিপ্ট গাইডটি আপনাকে দেখাবে যে কিভাবে <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">জাভাস্ক্রিপ্ট</a> ব্যবহার করতে হয় এবং এই ল্যাঙ্গুয়েজ টি সম্পর্কে একটি ওভারভিউ প্রদান করবে। আপনি যদি আরও বেশি জানতে আগ্রহী হয়ে থাকেন, তাহলে দয়া করে <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">জাভাস্ক্রিপ্ট রেফেরেন্স</a> লিঙ্কটিতে প্রবেশ করুন।</p> - -<ul class="card-grid"> - <li><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction">ভূমিকাঃ</a></span> - - <p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction#Where_to_find_JavaScript_information">এই গাইড সম্পর্কে কিছু কথা</a><br> - <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript">জাভাস্ক্রিপ্ট সম্পর্কে কিছু কথা</a><br> - <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">জাভা ও জাভাস্ক্রিপ্ট</a><br> - <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">(ইকমাস্ক্রিপ্ট) ECMAScript</a><br> - <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">টুল সমুহ</a><br> - <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction#Hello_world">প্রথম জাভাস্ক্রিপ্ট প্রোগ্রামঃ Hello World</a></p> - </li> - <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Grammar_and_types">Grammar and types</a></span> - <p><a href="/bn-BD/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">Basic syntax & comments</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Declarations</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Variable scope</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">Variable hoisting</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">Data structures and types</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">Literals</a></p> - </li> - <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Control flow and error handling</a></span> - <p><code><a href="/bn-BD/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br> - <code><a href="/bn-BD/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Error objects</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Promises">Promises</a></p> - </li> - <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration</a></span> - <p><code><a href="/bn-BD/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/bn-BD/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p> - </li> -</ul> - -<ul class="card-grid"> - <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Functions">ফাংশন</a></span> - - <p><a href="/bn-BD/docs/Web/JavaScript/Guide/Functions#Defining_functions">Defining functions</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Functions#Calling_functions">Calling functions</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Functions#Function_scope">Function scope</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Functions#Closures">Closures</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Arguments</a> & <a href="/bn-BD/docs/Web/JavaScript/Guide/Functions#Function_parameters">parameters</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Arrow functions</a></p> - </li> - <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Expressions_and_Operators">এক্সপ্রেশন এবং অপারেটর</a></span> - <p><a href="/bn-BD/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">Assignment</a> & <a href="/bn-BD/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">Comparisons</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">Arithmetic operators</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">Bitwise</a> & <a href="/bn-BD/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">logical operators</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Conditional (ternary) operator</a></p> - </li> - <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and dates</a></span><a href="/bn-BD/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> Number literals</a> - <p><a href="/bn-BD/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object"><code>Number</code> object</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object"><code>Math</code> object</a><br> - <a href="https://developer.mozilla.org/bn-BD/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object"><code>Date</code> object</a></p> - </li> - <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Text_formatting">Text formatting</a></span> - <p><a href="/bn-BD/docs/Web/JavaScript/Guide/Text_formatting#String_literals">String literals</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Text_formatting#String_objects"><code>String</code> object</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_strings">Template strings</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Internationalization</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Regular_Expressions">রেগুলার এক্সপ্রেশন</a></p> - </li> -</ul> - -<ul class="card-grid"> - <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a></span> - - <p><a href="/bn-BD/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Arrays</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Indexed_collections#Array_comprehensions">Array comprehensions</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Typed arrays</a></p> - </li> - <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Keyed_collections">Keyed collections</a></span> - <p><code><a href="/bn-BD/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br> - <code><a href="/bn-BD/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br> - <code><a href="/bn-BD/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br> - <code><a href="/bn-BD/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p> - </li> - <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Working_with_Objects">Working with objects</a></span> - <p><a href="/bn-BD/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">Objects and properties</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">Creating objects</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">Defining methods</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Getter and setter</a></p> - </li> - <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the object model</a></span> - <p><a href="/bn-BD/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">Prototype-based OOP</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">Creating object hierarchies</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">Inheritance</a></p> - </li> -</ul> - -<ul class="card-grid"> - <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></span> - - <p><a href="/bn-BD/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Iterators</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Iterables</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Generators</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generator_comprehensions">Generator comprehensions</a></p> - </li> - <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Meta_programming">Meta programming</a></span> - <p><code><a href="/bn-BD/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Handlers and traps</a><br> - <a href="/bn-BD/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Revocable Proxy</a><br> - <code><a href="/bn-BD/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p> - </li> -</ul> - -<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> 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 ---- -<div>{{JsSidebar}}</div> - -<p class="summary"><strong>JavaScript</strong> (সংক্ষেপে <strong>JS</strong>) একটি lightweight ইন্টারপ্রেটেড বা যথাসময়ে কম্পাইল করা প্রোগ্রামিং ভাষা যাতে রয়েছে {{Glossary("First-class Function", "first-class functions")}}। যদিও এটি ওয়েব পেজের স্ক্রিপ্টিং ভাষা হিসেবে বেশি পরিচিত, এছাড়া <a class="external" href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_Web_pages">ব্রাউজার ছাড়াও অন্যান্য জায়গায়</a> ব্যবহার করা হয়, যেমন <a class="external" href="https://nodejs.org/">node.js</a> and <a href="https://couchdb.apache.org/">Apache CouchDB</a>. JavaScript হল {{Glossary("Prototype-based programming", "prototype-based")}}, multi-paradigm, dynamic scripting language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. <a href="/en-US/docs/Web/JavaScript/About_JavaScript">JavaScript সম্পর্কে</a> আরো পড়ুন.</p> - -<p>সাইটের এই সেকশনটি JavaScript ভাষার জন্য নিবেদিত, এবং ওয়েব পেইজ অথবা হোস্ট এনভাইরনমেন্টের সাথে সম্পৃক্ত নয়। {{Glossary("API","APIs")}} সম্পর্কে জানতে <a href="https://developer.mozilla.org/en-US/docs/Web/API">Web APIs</a> এবং <a href="https://developer.mozilla.org/en-US/docs/Glossary/DOM">DOM</a> দেখুন।</p> - -<p>JavaScript স্ট্যান্ডার্ড এর নাম <a href="/bn-BD/docs/JavaScript/%E0%A6%AD%E0%A6%BE%E0%A6%B7%E0%A6%BE%E0%A6%B0_%E0%A6%B0%E0%A6%BF%E0%A6%B8%E0%A7%8B%E0%A6%B0%E0%A7%8D%E0%A6%B8" title="ECMAScript">ECMAScript</a>। ২০১২ সাল পর্যন্ত পাওয়া তথ্য অনুযায়ী সব <a href="https://kangax.github.io/compat-table/es5/">নতুন ব্রাউজার</a> ECMAScript 5.1 সমর্থন করে। পুরোনো ব্রাউজারগুলো অন্তত ECMAScript 3 সমর্থন করে। ২০১৫ সালের ১৭ জুন <a href="http://www.ecma-international.org">ECMA International</a> তার ষষ্ঠ প্রধান সংস্করণ প্রকাশ করে, আনুষ্ঠানিক ভাবে যা ECMAScript 2015 নামে অভিহিত, এবং সাধারন ভাবে এটি ECMAScript 6 বা ES6 নামে পরিচিত। তখন থেকেই বাৎসরিক প্রকাশ চক্র অনুযায়ী ECMAScript -এর মান প্রকাশিত হচ্ছে। এই ডকুমেন্টেশনটি সর্বশেষ খসড়া সংস্করণ, যা <a href="https://tc39.github.io/ecma262/">ECMAScript 2018</a> কে বোঝায়।</p> - -<p> JavaScript এর সাথে <a href="https://en.wikipedia.org/wiki/Java_%28programming_language%29">Java programming language</a> কে গুলিয়ে ফেলবেন না। "Java" এবং "JavaScript" উভয় প্রোগ্রামিং ভাষাই Oracle কোম্পানির ট্রেডমার্ক বা ট্রেডমার্ক হিসেবে নিবন্ধিত যুক্তরাষ্ট্র এবং অন্যান্য দেশে। যাইহোক, এই দুই প্রোগ্রামিং ভাষার বাক্য গঠন প্রণালী (syntax), শব্দার্থবিদ্যা(semantics), এবং ব্যবহার একেবারেই আলাদা।</p> - -<div class="column-container"> -<div class="column-half"> -<h2 id="টিউটোরিয়াল">টিউটোরিয়াল</h2> - -<p>জাভাস্ক্রিপ্ট দিয়ে কিভাবে প্রোগ্রাম করা হয় সেটা শিখুন টিউটোরিয়াল এবং নির্দেশিকার মাধ্যমে।</p> - -<h3 id="যারা_একেবারেই_নতুন">যারা একেবারেই নতুন</h3> - -<p>আপনি যদি জাভাস্ক্রিপ্ট শিখতে চান কিন্তু আপনার জাভাস্ক্রিপ্ট বা অন্য কোন প্রোগ্রামিং সম্পকে কোন পূর্ব অভিজ্ঞতা নেই তাহলে আমাদের জাভাস্ক্রিপ্ট শিক্ষাক্ষেত্রের দিকে এগিয়ে যান। নিম্নে সম্পূর্ণ মডিউলগুলো রয়েছে।</p> - -<p><strong><a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">জাভাস্ক্রিপ্টের প্রথম ধাপ</a></strong></p> - -<p>জাভাস্ক্রিপ্ট এর বৈশিষ্ট “ভেরিয়েবল, স্ট্রিং, নাম্বারস, এবং এরেইস” এগুলোর আলোচনার সাথে কিছু মৌলিক প্রশ্নের উত্তর দিন যেমন “জাভাস্ক্রিপ্ট কি?”, “ এটা দেখতে কেমন?”, এবং “এটা কি করে?”</p> - -<p><strong><a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">জাভাস্ক্রিপ্ট নির্মান অংশ</a></strong></p> - -<p>জাভাস্ক্রিপ্ট এর মৌলিক বৈশিষ্ট এর সাথে সাধারণভাবে সম্মুক্ষীন হওয়া বিভিন্ন ধরনের কোড ব্লকের দিকে আমাদের দৃষ্টি আকর্ষন করা যেমন conditional statements, loops, functions, এবং events. </p> - -<p><strong><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">জাভাস্ক্রিপ্ট অবজেক্ট এর পরিচিতি </a></strong></p> - -<p> জাভাস্ক্রিপ্ট এর অবজেক্ট ওরিন্টেড প্রকৃতিটা বুঝা গুরুত্বপূর্ণ যদি আপনি ভাষার জ্ঞান নিয়ে সামনে এগিয়ে যেতে চান এবং আধিক কার্যকর কোড লিখতে চান, এখানে আমাদের দেয়া মডিউল আপনাকে সহযোগিতা করবে।</p> - -<h3 id="জাভাস্ক্রিপ্ট_নির্দেশনা">জাভাস্ক্রিপ্ট নির্দেশনা</h3> - -<dl> - <dt><a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">জাভাস্কিপ্ট নির্দেশনা</a></dt> - <dd>জাভাস্ক্রিপ্ট ভাষা এর একটি বিস্তারিত নির্দেশনার উদ্দেশ্য যাদের জাভাস্ক্রিপ্ট বা অন্য কোনো প্রোগ্রামিং ভাষা সম্পর্কে পূর্বপর্তী অভিজ্ঞতা আছে ।</dd> -</dl> - -<h3 id="মধ্যবর্তী">মধ্যবর্তী</h3> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">ক্লায়েন্ট সাইড ওয়েব </a> <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs">APIs</a></dt> -</dl> - -<p>ওয়েব সাইট বা এপ্লিকেশনগুলির জন্য ক্লায়েন্ট সাইড জাভাস্ক্রিপ্ট লেখার সময় API গুলি ব্যবহার শুরু করার আগে খুব বেশী দুরে যাবেন না--ব্রাউজার ও ওপারের্টং সিস্টেম চলন্ত অবস্থায় ইন্টারফেইসগুলি বিভিন্ন দিক সুচারু রূপে পরিচালনা করার জন্য বা এমনকি অন্য ওয়েব সাইট বা সেবাগুলি থেকে আসা ডাটা। এই মডিউলে আমরা এপিআই কি ? এবং কিভাবে খুবই প্রচলিত কিছু এপিআই আপনার ডেভেলপমেন্টের কাজে ব্যবহার করতে হয় সেই সম্পর্কে জানবো।</p> - -<dl> - <dt></dt> - <dt></dt> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">জাভাস্ক্রিপ্ট এর পুনঃউপস্থাপন</a></dt> - <dd>যারা মনে করে , তারা জাভাস্ক্রিপ্ট সম্পর্কে জানে, তাদের জন্য একটি সংক্ষিপ্ত বিবরণ।</dd> -</dl> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">জাভাস্ক্রিপ্ট এর ডাটার গঠনশৈলী </a></dt> - <dd>জাভাস্ক্রিপ্ট এর ডাটার গঠনশৈলী সম্পর্কে সংক্ষিপ্ত বিবরন।</dd> - <dt><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">সমতুল্যতা এবং অভিন্নতা </a></dt> -</dl> - -<p><code>জাভাস্ক্রিপ্ট তিন ধরনের মান সরবরাহ করে- তুলনার ক্ষেত্রে: কঠোর সমতার ক্ষেত্রে === এবং শিথিল সমতার ক্ষেত্রে == ।</code></p> - -<dl> - <dt> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures">Closures</a></dt> - <dd>closure হচ্ছে একটি ফাংশন এবং lexical environment এর সমাহার যেটি পূর্বেই ঘোষনা করা হয়েছে।</dd> -</dl> - -<h3 id="এডভান্স">এডভান্স</h3> - -<dl> - <dt><a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">ইনহেরিটেন্স এবং প্রোটোটাইপ চেইন</a></dt> - <dd>ব্যাপকভাবে ভুল বুঝা বুঝি এবং অবহেলা করা হচ্ছে প্রোটোটাইপ ইনহেরিটেন্স ব্যাখ্য ।</dd> - <dt><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">কঠোর মুড</a></dt> - <dd>কঠোর মুড( Strict mode ) এর সঙ্গা হচ্ছে যে আপনি এটি আরম্ভ করার পূর্বে কোনো ভেরিয়েবল ব্যবহার করতে পারবেন না। এটা ECMAScript 5 একটি সীমাবদ্ধতা, দ্রুত কর্মক্ষমতা এবং সহজ ডিবাগিংএর জন্য। </dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">জাভাস্ক্রিপ্টের অ্যারে টাইপ</a></dt> - <dd>জাভাস্ক্রিপ্টের অ্যারে নতুন বাইনারি তথ্য অ্যাক্সেসের জন্য একটি প্রক্রিয়া প্রদান করে।</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management">মেমরি ম্যানেজমেন্ট</a></dt> - <dd>মেমরীর জীবনচক্র এবং জাভাস্ক্রিপ্টের মধ্যেকার আবর্জনা সংগ্রহ।</dd> - <dt></dt> -</dl> -</div> - - - -<div class="column-half"> -<h2 id="Reference">Reference</h2> - -<p>ব্রাউজ করুন.সম্পূর্ণ <a href="/en-US/docs/Web/JavaScript/Reference">জেএস- রেফারেন্স</a> ডকুমেন্টেশন ।</p> - -<dl> - <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">Standard objects</a></dt> - <dd>Get to know standard built-in objects <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="The JavaScript Array global object is a constructor for arrays, which are high-level, list-like objects."><code>Array</code></a></code>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" title="Creates a JavaScript Date instance that represents a single moment in time. Date objects are based on a time value that is the number of milliseconds since 1 January, 1970 UTC."><code>Date</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error" title="The Error constructor creates an error object. Instances of Error objects are thrown when runtime errors occur. The Error object can also be used as a base objects for user-defined exceptions. See below for standard built-in error types."><code>Error</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" title="The Function constructor creates a new Function object. In JavaScript every function is actually a Function object."><code>Function</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON" title="The JSON object contains methods for parsing JavaScript Object Notation (JSON) and converting values to JSON. It can't be called or constructed, and aside from its two method properties it has no interesting functionality of its own."><code>JSON</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math" title="Math is a built-in object that has properties and methods for mathematical constants and functions. Not a function object."><code>Math</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="The Number JavaScript object is a wrapper object allowing you to work with numerical values. A Number object is created using the Number() constructor."><code>Number</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp" title="The RegExp constructor creates a regular expression object for matching text with a pattern."><code>RegExp</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="The String global object is a constructor for strings, or a sequence of characters."><code>String</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" title="The Map object is a simple key/value map. Any value (both objects and primitive values) may be used as either a key or a value."><code>Map</code></a>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap" title="The WeakMap object is a collection of key/value pairs in which the keys are objects and the values can be arbitrary values."><code>WeakMap</code></a></code>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet" title="The WeakSet object lets you store weakly held objects in a collection."><code>WeakSet</code></a>, and others.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Expressions & operators</a></dt> - <dd>Learn more about the behavior of JavaScript's operators <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, and more.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/Reference/Statements">Statements & declarations</a></dt> - <dd>Learn how <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do-while</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for-in</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for-of</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try-catch</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if-else</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch">switch</a></code>, and more JavaScript statements and keywords work.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></dt> - <dd>Learn how to work with JS functions to develop your applications.</dd> -</dl> - -<h2 id="Tools_resources">Tools & resources</h2> - -<p>Helpful tools while writing and debugging your JavaScript code.</p> - -<dl> - <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt> - <dd><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>, <a href="/en-US/docs/Tools/Web_Console">Web Console</a>, <a href="/en-US/docs/Tools/Profiler">JavaScript Profiler</a>, <a href="/en-US/docs/Tools/Debugger">Debugger</a>, and more.</dd> - <dt><a class="external" href="http://www.getfirebug.com/">Firebug</a></dt> - <dd>Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/Shells">JavaScript Shells</a></dt> - <dd>A JavaScript shell allows you to quickly test snippets of JavaScript code.</dd> - <dt><a href="https://togetherjs.com/">TogetherJS</a></dt> - <dd> - <p class="hero-header-text large">Collaboration made easy.</p> - </dd> - <dt><a href="http://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt> - <dd>Stack Overflow questions tagged with "JavaScript".</dd> - <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">JavaScript versions and release notes</a></dt> - <dd>Browse JavaScript's feature history and implementation status.</dd> -</dl> -</div> -</div> 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 ---- -<div>{{jsSidebar("Advanced")}}</div> - -<p>যেসব ডেভেলপার আগে ক্লাস-ভিত্তিক প্রোগ্রামিং ল্যাংগুয়েজে (যেমন সি++ বা জাভা) কোড করছেন, তারা জাভাস্ক্রিপ্টে কোড করতে গিয়ে একটু বিভ্রান্ত হবেন, কেননা জাভাস্ক্রিপ্ট একটি ডায়নামিক ল্যাংগুয়েজ আর এতে কোন <code>class</code> ইমপ্লিমেন্টেশন নেই ( যদিও <code>class </code>নামে একটি কীওয়ার্ড জাভাস্ক্রিপ্ট সংরক্ষণ করে রেখেছে - তাই এই নামে কোন ভ্যারিয়েবল তৈরি করতে পারবেন না )।</p> - -<p>জাভাস্ক্রিপ্টে ইনহেরিটেন্স বিষয়ক একটি মাত্র কন্সট্রাক্ট আছেঃ অবজেক্ট। সব অবজেক্ট এরই আরেকটা অবজেক্ট এর সাথে অভ্যন্তরীণ লিঙ্ক থাকে যাকে তার <strong>প্রটোটাইপ </strong>বলে। আবার এই প্রোটাটাইপ অবজেক্টের ও নিজস্ব একটি প্রটোটাইপ থাকে। এভাবে চলতেই থাকে, যতক্ষণ না আমরা <code>null</code> হিসেবে কোন অবজেক্টের প্রটোটাইপ পাই। <code>null</code> এর কোন প্রটোটাইপ থাকে না, তাই যখন null পাব তখন বুঝতে হবে <strong>প্রটোটাইপ চেইনের</strong> শেষপ্রান্তে এসে গেছি।</p> - -<p>প্রটোটাইপ মডেল কে অনেকে জাভাস্ক্রিপ্টের দুর্বলতা বললেও আসলে প্রটোটাইপ-ভিত্তিক ইনহেরিটেন্স মডেল সি++/জাভা ভিত্তিক ক্লাসিকাল মডেলের থেকে অনেক শক্তিশালী। যেমন, প্রটোটাইপ মডেল কে ভিত্তি করে আমরা সহজেই ক্ল্যাসিকাল মডেল তৈরি করতে পারি, কিন্তু ক্লাসিকাল মডেলের ওপর ভিত্তি করে চাইলেই প্রটোটাইপ ভিত্তিক মডেল তৈরি করা সম্ভব না।</p> - -<h2 id="প্রটোটাইপ-চেইন_ভিত্তিক_ইনহেরিটেন্স">প্রটোটাইপ-চেইন ভিত্তিক ইনহেরিটেন্স</h2> - -<h3 id="প্রোপার্টি_ইনহেরিট_করা"><strong>প্রোপার্টি </strong>ইনহেরিট করা</h3> - -<p>জাভাস্ক্রিপ্টে অবজেক্ট কে আমরা বিভিন্ন <strong>প্রোপার্টির</strong> "ব্যাগ" (থলে) হিসেবে কল্পনা করতে পারিঃ এই ব্যাগে যেকোন সময় যেকোন প্রোপার্টি ঢুকানো যায়, ব্যাগ থেকে ফেলেও দেওয়া যায় (যে কারণে আমরা জাভাস্ক্রিপ্টকে ডায়নামিক বলি) । প্রতিটা অবজেক্টের সাথে একটা বিশেষ অবজেক্টের লিংক থাকে, এই বিশেষ অবজেক্ট টাকে আমরা মূল অবজেক্টটার প্রটোটাইপ বলি। আমরা যখন কোন অবজেক্টের কোন প্রোপার্টি কে ব্যবহার করতে চাই, তখন যা ঘটেঃ</p> - -<pre class="brush: js">// ধরে নেই, আমার 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 রিটার্ন করতে হবে। -</pre> - -<p>কোন অবজেক্টের প্রোপার্টি সেট করে দিলে সেটা সেই অবজেক্টের নিজস্ব প্রোপার্টি হিসেবে কাজ করে। একমাত্র ব্যতিক্রম হলঃ <a href="/bn-BD/docs/JavaScript/Guide/Working_with_Objects?redirectlocale=en-US&redirectslug=Core_JavaScript_1.5_Guide%2FWorking_with_Objects#Defining_getters_and_setters">getter অথবা setter</a> দিয়ে যখন ইনহেরিটেড প্রোপার্টি নিয়ে কাজ করা হয়।</p> - -<h3 id="মেথড_ইনহেরিট_করা">"মেথড" ইনহেরিট করা</h3> - -<p>ক্লাস-ভিত্তিক প্রোগ্রামিং ভাষাতে যেভাবে "মেথড" বা ফাংশন এর ধারণা প্রচলিত আছে, জাভাস্ক্রিপ্টে মেথডের ধারণা টা ঠিক সেভাবে নয়। জাভাস্ক্রিপ্টে, যেকোন ফাংশন সাধারণ প্রোপার্টির মতই অবজেক্টে যোগ করা যায়। ইনহেরিট করা ফাংশন অবজেক্টের বাদবাকি প্রোপার্টির মতই স্বাভাবিকভাবে কাজ করবে। উপরের উদাহরণে দেখানো property shadowing এখানেও কাজ করবে (এক্ষেত্রে একে বলা হবে <em>method overriding</em> বা ফাংশন ওভাররাইডিং)</p> - -<p>যখন ইনহেরিট-হওয়া কোন ফাংশন একজিকিউট হয়, তখন <a href="/bn-BD/JavaScript/Reference/Operators/this" title="this"><code>this</code></a> এর মান হিসেবে ইনহেরিট-হওয়া অবজেক্ট টা থাকে, প্রোটোটাইপ অবজেক্ট টা না যেখানে ফাংশনটা নিজস্ব প্রোপার্টি হিসেবে দেওয়া হয়েছিল।</p> - -<pre class="brush: js">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 এর নিজস্ব প্রোপার্টি। -</pre> - -<h2 id="অবজেক্ট_তৈরি_করার_বিভিন্ন_উপায়_এবং_ফলাফল_হিসেবে_প্রোটোটাইপ_চেইন">অবজেক্ট তৈরি করার বিভিন্ন উপায় এবং ফলাফল হিসেবে প্রোটোটাইপ চেইন</h2> - -<h3 id="সিন্ট্যাক্স_কন্সট্রাক্টস_ব্যবহার_করে_অবজেক্ট_তৈরি_করা">সিন্ট্যাক্স কন্সট্রাক্টস ব্যবহার করে অবজেক্ট তৈরি করা</h3> - -<pre class="brush: js">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 -</pre> - -<h3 id="কন্সট্রাক্টর_এর_সাহায্যে">কন্সট্রাক্টর এর সাহায্যে</h3> - -<p>জাভাস্ক্রিপ্টে "কন্সট্রাক্টর", "শুধুই" সাধারণ যেকোন ফাংশন যাকে কিনা <a href="/bn-BD/docs/Web/JavaScript/Reference/Operators/new?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FOperators%2Fnew" title="new">new</a> অপারেটর দিয়ে কল করা হয়।</p> - -<pre class="brush: js">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. -</pre> - -<h3 id="Object.create_দিয়ে">Object.create দিয়ে</h3> - -<p>ECMAScript 5 নতুন একটি মেথড নিয়ে এসেছেঃ <a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="create">Object.create</a>। এই মেথড কল করলে নতুন একটি অবজেক্ট তৈরি হয় যার প্রোটোটাইপ হল মেথডটির প্রথম প্যারামিটারঃ</p> - -<pre class="brush: js">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 -</pre> - -<div> -<h3 id="পারদর্শীতা">পারদর্শীতা</h3> - -<p>কোন অবজেক্টে কোন প্রোপার্টি আছে কিনা সেটা জানার জন্য, অবজেক্টের পুরো প্রটোটাইপ-চেইন খুঁজে দেখতে হয়। কোডের পার্ফরমেন্সে এটা ভালই বাজে প্রভাব ফেলে। যেসব কোডের পারফরমেন্স খুব ভাল হওয়া দরকার, সেখানে এই ইস্যু প্রভাব ফেলতে পারে। অবজেক্টে কোন প্রোপার্টি খুঁজে না পেলে পুরো প্রোটোটাইপ চেইনের কোথাও প্রোপার্টি টা আছে কিনা খুঁজা হয়।</p> - -<p>এছাড়াও, অবজেক্টের প্রোপার্টি গুলো ঘুরে দেখার সময় (iterate করার সময়) প্রোটোটাইপ-চেইনের <strong>প্রত্যেকটা</strong> প্রোপার্টি খুঁজে দেখা (enumerate করা) হবে।</p> - -<p>অবজেক্টে কোন প্রোপার্টি শুধুমাত্র <em>নিজস্ব</em> প্রোপার্টি হিসেবে আছে কিনা (প্রোটোটাইপ চেইনের অন্য কোথাও নয়) <a href="/bn-BD/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> মেথড ব্যবহার উচিত। সব অবজেক্ট এই মেথডটাকে <code>Object.prototype থেকে ইনহেরিট করে।</code></p> - -<p>জাভাস্ক্রিপ্টে <a href="/bn-BD/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a>-ই একমাত্র ফাংশন যা প্রোপার্টি নিয়ে কাজ করে এবং পুরো প্রোটোটাইপ চেইন ঘুরে (traverse) <strong>না</strong>।</p> - - -<div class="note">খেয়াল করুনঃ কোন প্রোপার্টি <a href="/bn-BD/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a> কিনা এই চেক করাই যথেষ্ট <strong>নয়</strong>। হতে পারে প্রোপার্টি টি বহাল তবিয়তেই আছে, কেবল এর মান <code>undefined</code> দেওয়া হয়েছে।</div> - -<div> -<h3 id="বদ_অভ্যাসঃ_নেটিভ_প্রোটোটাইপ_এক্সটেন্ড_করা">বদ অভ্যাসঃ নেটিভ প্রোটোটাইপ এক্সটেন্ড করা</h3> - -<p>একটা বাজে ব্যাপার প্রায়ই করা হয় তা হল <code>Object.prototype</code> অথবা অন্য কোন বিল্ট-ইন প্রটোটাইপ এক্সটেন্ড করা।</p> - -<p>এই পদ্ধতিকে বলা হয় monkey patching যা <em>encapsulation</em> এর সর্বনাশ ছাড়া আর কিছুই নয়। Prototype.js এর মত কিছু জনপ্রিয় ফ্রেমওয়ার্কে এর ব্যবহার দেখা গেলেও, স্ট্যান্ডার্ড-নয়, এমন ফিচার দিয়ে বিল্ট-ইন টাইপগুলোর বোঝা বাড়ানোর কোন মানে হয় না।</p> - -<p>বিল্ট-ইন টাইপ এক্সটেন্ড করার একমাত্র যৌক্তিক কারণ হতে পারে জাভাস্ক্রিপ্টের নতুন ফিচার গুলো পুরনো ইঞ্জিনে দেওয়া; যেমন <code>Array.forEach</code>, ইত্যাদি।</p> -</div> - -<div> -<h3 id="পরিশেষে">পরিশেষে</h3> - -<p>প্রটোটাইপ ইনহেরিটেন্স মডেল এর ভিত্তি করে জটিল জটিল কোড লেখার আগে একে ভালভাবে বুঝা <strong>উচিত</strong>। এছাড়াও, পারফরমেন্স জনিত সমস্যা থেকে দূরে থাকার জন্য লম্বা প্রটোটাইপ চেইন পরিহার করতে হবে আর যেখানে সম্ভব প্রটোটাইপ চেইন ভেঙ্গে ছোট করতে হবে। সবশেষে, জাভাস্ক্রিপ্টের নতুন ফিচার যাতে সব ইঞ্জিনেই চলে, শুধুমাত্র সেক্ষেত্রে নেটিভ প্রোটোটাইপ এক্সটেন্ড করা যাবে, এছাড়া এর ব্যবহার সর্বক্ষেত্রে <strong>নিরুৎসাহিত</strong> করা হয়।</p> -</div> -</div> 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/ভাষার_রিসোর্স ---- -<div>{{JsSidebar}}</div> - -<p><strong>ECMAScript</strong> হচ্ছে এক প্রকার স্ক্রিপ্টিং ভাষা যার ওপর ভিত্তি করে <a href="/bn-BD/docs/JavaScript">জাভাস্ক্রিপ্ট</a> তৈরি। <span class="chatlinetext"><a href="http://www.ecma-international.org/">আন্তর্জাতিক ECMA</a> সংস্থা ECMA স্ক্রিপ্ট এর জন্য ECMA-262 এবং ECMA-402 এই দুইটি মান নির্ধারণ করে দিয়েছে।</span> নিচের<span class="short_text" id="result_box" lang="bn"> <span class="hps">ECMAScript</span> স্টান্ডার্ডগুলো <span class="hps">অনুমোদিত হয়েছে</span><span>:</span></span></p> - -<table class="standard-table"> - <tbody> - <tr> - <th>নাম</th> - <th>লিঙ্ক</th> - <th>তারিখ</th> - <th>বর্ননা</th> - </tr> - <tr> - <td>ECMA-262 <span class="short_text" id="result_box" lang="bn"><span class="hps">সংস্করণ</span></span> ৫.১</td> - <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/">HTML</a></td> - <td>জুন ২০১১</td> - <td> - <p>ECMAScript ৫.১, জাভাস্ক্রিপ্ট নির্দেশনার সর্বশেষ প্রকাশিত সংস্করণ<br> - <span id="result_box" lang="bn"><span class="hps">এই সংস্করণ</span> <span class="hps">সম্পূর্ণরূপে</span> <span class="hps">আন্তর্জাতিক</span> <a href="http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=55755"><span class="hps">আইএসও</span><span class="hps">/</span><span class="hps">আইইসি</span> <span class="hps">১৬২৬২</span></a></span><a href="http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=55755"><span class="short_text" id="result_box" lang="bn"><span>:২০১১</span></span></a><span id="result_box" lang="bn"> <span class="hps">এর</span> <span class="hps alt-edited">তৃতীয়</span> <span class="hps">সংস্করণ</span> <span class="hps">সমর্থিত</span><span class="hps">। </span></span><span id="result_box" lang="bn"><span class="hps alt-edited">এতে</span> <span class="hps">ES5</span> <span class="hps">Errata</span> <span class="hps alt-edited">সংশোধন অন্তর্ভূক্ত করা হয়েছে</span>, <span class="hps">নতুন কোন বৈশিষ্ট্য</span> <span class="hps alt-edited">অন্তর্ভুক্ত করা হয়নি।</span></span></p> - </td> - </tr> - <tr> - <td>CMA-402</td> - <td><a href="http://ecma-international.org/ecma-402/1.0/ECMA-402.pdf">PDF</a>, <a href="http://ecma-international.org/ecma-402/1.0/index.html">HTML</a></td> - <td>ডিসেম্বর ২০১২</td> - <td>ECMAScript <span class="short_text" id="result_box" lang="bn"><span class="hps">আন্তর্জাতিকায়ন</span></span> API</td> - </tr> - <tr> - <td>ECMA-357 <span class="short_text" id="result_box" lang="bn"><span class="hps">সংস্করণ</span></span> ২</td> - <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-357.pdf">PDF</a></td> - <td>ডিসেম্বর ২০০৫</td> - <td>এক্সএমএল<a href="/en-US/docs/E4X"> (E4X)</a> এর জন্য ECMAScript.</td> - </tr> - <tr> - <th colspan="4"><span class="short_text" id="result_box" lang="bn"><span class="hps">অপ্রচলিত</span> সংস্করণ</span></th> - </tr> - <tr> - <td>ECMA-262</td> - <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf">PDF</a></td> - <td>জুন ১৯৯৭</td> - <td><span class="short_text" id="result_box" lang="bn"><span class="hps">ECMAScript</span> এর আদি সংস্করণ<span>।</span></span></td> - </tr> - <tr> - <td>ECMA-262 <span class="short_text" id="result_box" lang="bn"><span class="hps">সংস্করণ</span></span> ২</td> - <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%202nd%20edition,%20August%201998.pdf">PDF</a></td> - <td>আগস্ট ১৯৯৮</td> - <td> - <p><span id="result_box" lang="bn"><span class="hps">ECMAScript</span> স্ট্যান্ডার্ড এর <span class="hps">দ্বিতীয়</span> <span class="hps">সংস্করণ</span><span>;</span> <span class="hps">এছাড়াও</span> <span class="hps">আইএসও</span> <span class="hps">স্ট্যান্ডার্ড</span> <span class="hps">১৬২৬২।</span></span></p> - </td> - </tr> - <tr> - <td>ECMA-262 <span class="short_text" id="result_box" lang="bn"><span class="hps">সংস্করণ ৩</span></span></td> - <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf">PDF</a></td> - <td>ডিসেম্বর ১৯৯৯</td> - <td>ECMAScript প্রমিত তৃতীয় সংস্করণ; জাভাস্ক্রিপ্ট এর ১.৫ এর অনুরূপ।<br> - <span class="short_text" id="result_box" lang="bn"><span class="hps">আরো দেখুন</span></span> <a href="http://www.mozilla.org/js/language/E262-3-errata.html">errata</a></td> - </tr> - <tr> - <td>ECMA-262 <span class="short_text" id="result_box" lang="bn"><span class="hps">সংস্করণ ৫</span></span></td> - <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262%205th%20edition%20December%202009.pdf">PDF</a></td> - <td>ডিসেম্বর ২০০৯</td> - <td>ECMAScript ৫<br> - আরো দেখুন <a href="http://wiki.ecmascript.org/doku.php?id=es3.1:es3.1_proposal_working_draft">ES5 errata</a> এবং <a href="/bn-BD/docs/JavaScript/ECMAScript_5_support_in_Mozilla" title="JavaScript/ECMAScript 5 support in Mozilla">ECMAScript ৫ মোজিলা সমর্থন</a></td> - </tr> - <tr> - <td>ECMA-357</td> - <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/ECMA-357,%201st%20edition,%20June%202004.pdf">PDF</a></td> - <td>জুন ২০০৪</td> - <td><a href="/en-US/docs/E4X" title="E4X">এক্সএমএল (E4X) এর জন্য ECMAScript</a><br> - আরো দেখুন <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=169406">E4X errata</a></td> - </tr> - </tbody> -</table> - -<p><span id="result_box" lang="bn"><span class="hps">ECMAScript</span> এর <span class="hps">ইতিহাস</span> সম্পর্কে <span class="hps">আরও তথ্যের</span> <span class="hps">জন্য</span> <a href="http://en.wikipedia.org/wiki/ECMAScript"><span class="hps">উইকিপিডিয়া</span> <span class="hps">ECMAScript</span></a> <span class="hps">এন্ট্রি</span> <span class="hps">দেখুন।</span></span></p> - -<p>ECMAScript ভাষার স্পেসিফিকেশন এর পরবর্তী সংস্করণ, কোড-নাম "হারমনি" এর কাজ এ <span class="short_text" id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="hps">অংশগ্রহণ</span> <span class="hps">বা শুধু</span> <span class="hps">ট্র্যাক করতে পারেন, এবং </span></span><span id="result_box" lang="bn"><span class="hps">পাবলিক</span> <span class="hps">উইকি</span>র <span class="hps">মাধ্যমে</span> <span class="hps">ECMAScript</span> <span class="hps">আন্তর্জাতিকায়ন</span> <span class="hps">এপিআই</span> <span class="hps">স্পেসিফিকেশন </span></span>এবং <a href="http://www.ecmascript.org/community.php" title="http://www.ecmascript.org/community.php">ecmascript.org</a> হতে <span class="link-https"><a href="https://mail.mozilla.org/listinfo/es-discuss">es-discuss</a> মেইলিং তালিকায় অংশগ্রহণ করতে পারেন।</span></p> - -<h2 id="বাস্তবায়ন">বাস্তবায়ন</h2> - -<ul> - <li><a href="/bn-BD/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a> - ফায়ারফক্স এ ব্যবহৃত জাভাস্ক্রিপ্ট ইঞ্জিন;</li> - <li><a href="/bn-BD/docs/Rhino" title="Rhino">Rhino</a> - জাভায় লেখা জাভাস্ক্রিপ্ট ইঞ্জিন;</li> - <li><a href="/bn-BD/docs/Tamarin" title="Tamarin">Tamarin</a> - <span id="result_box" lang="bn"><span class="hps atn">(</span><span>অ্যাডোবি</span> <span class="hps">®</span> <span class="hps">ফ্ল্যাশ</span> <span class="hps">®</span> <span class="hps">প্লেয়ার</span> এ <span class="hps">ব্যবহৃত</span><span>)</span> <span class="hps">ActionScript</span> <span class="hps">ভার্চুয়াল মেশিন</span><span>; </span></span></li> - <li><a href="http://en.wikipedia.org/wiki/List_of_ECMAScript_engines" title="http://en.wikipedia.org/wiki/List_of_ECMAScript_engines"><span class="short_text" id="result_box" lang="bn"><span class="hps">অন্যান্য</span> <span class="hps">বাস্তবায়ন</span></span></a> (<span class="short_text" id="result_box" lang="bn"><span class="hps">উইকিপিডিয়া</span></span>)</li> -</ul> - -<h2 id="আরো_দেখুন">আরো দেখুন</h2> - -<ul> - <li><a href="http://brendaneich.com/" title="http://brendaneich.com/">Brendan Eich এর ব্লগ</a>। Brendan হল জাভাস্ক্রিপ্ট এবং <span class="short_text" id="result_box" lang="bn"><span class="hps">SpiderMonkey JS এর প্রস্তুতকারক।</span></span> <span id="result_box" lang="bn"><span class="hps">তিনি</span> <span class="hps">এখনও</span> <span class="hps">ভাষা</span> <span class="hps">অভিব্যক্ত</span>করণ <span class="hps">ECMA</span> <span class="hps">দলের সাথে</span> <span class="hps">কাজ করছেন।</span></span></li> - <li><a href="http://dmitrysoshnikov.com/" title="http://dmitrysoshnikov.com/"><span id="result_box" lang="bn"><span class="hps atn">ECMA-</span><span>262</span> <span class="hps">সংস্করণ</span> ৩<span class="hps"> এবং</span> ৫ <span class="hps">এর</span> </span></a><a href="http://dmitrysoshnikov.com/" title="http://dmitrysoshnikov.com/">Dmitry Soshnikov</a><a href="http://dmitrysoshnikov.com/" title="http://dmitrysoshnikov.com/"><span id="result_box" lang="bn"> <span class="hps">এর</span> <span class="hps">বিশ্লেষণ</span></span></a></li> -</ul> 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 ---- -<div>{{jsSidebar("Objects")}}</div> - -<p>This chapter documents all of JavaScript's standard, built-in objects, including their methods and properties.</p> - -<div class="onlyinclude"> -<p>The term "global objects" (or standard built-in objects) here is not to be confused with the <strong>global object</strong>. Here, global objects refer to <strong>objects in the global scope</strong> (but only if ECMAScript 5 strict mode is not used; in that case it returns <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>). The <strong>global object</strong> itself can be accessed using the {{jsxref("Operators/this", "this")}} operator in the global scope. In fact, the global scope <strong>consists of</strong> the properties of the global object, including inherited properties, if any.</p> - -<p>Other objects in the global scope are either <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">created by the user script</a> or provided by the host application. The host objects available in browser contexts are documented in the <a href="/en-US/docs/Web/API/Reference">API reference</a>. For more information about the distinction between the <a href="/en-US/docs/DOM/DOM_Reference">DOM</a> and core <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, see <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> - -<h2 id="Standard_objects_by_category">Standard objects (by category)</h2> - -<h3 id="Value_properties">Value properties</h3> - -<p>These global properties return a simple value; they have no properties or methods.</p> - -<ul> - <li>{{jsxref("Infinity")}}</li> - <li>{{jsxref("NaN")}}</li> - <li>{{jsxref("undefined")}}</li> - <li>{{jsxref("null")}} literal</li> -</ul> - -<h3 id="Function_properties">Function properties</h3> - -<p>These global functions—functions which are called globally rather than on an object—directly return their results to the caller.</p> - -<ul> - <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> - <li>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</li> - <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li> - <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> - <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li> - <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li> - <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li> - <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> - <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li> - <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> - <li>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</li> - <li>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</li> -</ul> - -<h3 id="Fundamental_objects">Fundamental objects</h3> - -<p>These are the fundamental, basic objects upon which all other objects are based. This includes objects that represent general objects, functions, and errors.</p> - -<ul> - <li>{{jsxref("Object")}}</li> - <li>{{jsxref("Function")}}</li> - <li>{{jsxref("Boolean")}}</li> - <li>{{jsxref("Symbol")}} {{experimental_inline}}</li> - <li>{{jsxref("Error")}}</li> - <li>{{jsxref("EvalError")}}</li> - <li>{{jsxref("InternalError")}}</li> - <li>{{jsxref("RangeError")}}</li> - <li>{{jsxref("ReferenceError")}}</li> - <li>{{jsxref("SyntaxError")}}</li> - <li>{{jsxref("TypeError")}}</li> - <li>{{jsxref("URIError")}}</li> -</ul> - -<h3 id="Numbers_and_dates">Numbers and dates</h3> - -<p>These are the base objects representing numbers, dates, and mathematical calculations.</p> - -<ul> - <li>{{jsxref("Number")}}</li> - <li>{{jsxref("Math")}}</li> - <li>{{jsxref("Date")}}</li> -</ul> - -<h3 id="Text_processing">Text processing</h3> - -<p>These objects represent strings and support manipulating them.</p> - -<ul> - <li>{{jsxref("String")}}</li> - <li>{{jsxref("RegExp")}}</li> -</ul> - -<h3 id="Indexed_collections">Indexed collections</h3> - -<p>These objects represent collections of data which are ordered by an index value. This includes (typed) arrays and array-like constructs.</p> - -<ul> - <li>{{jsxref("Array")}}</li> - <li>{{jsxref("Int8Array")}}</li> - <li>{{jsxref("Uint8Array")}}</li> - <li>{{jsxref("Uint8ClampedArray")}}</li> - <li>{{jsxref("Int16Array")}}</li> - <li>{{jsxref("Uint16Array")}}</li> - <li>{{jsxref("Int32Array")}}</li> - <li>{{jsxref("Uint32Array")}}</li> - <li>{{jsxref("Float32Array")}}</li> - <li>{{jsxref("Float64Array")}}</li> -</ul> - -<h3 id="Keyed_collections">Keyed collections</h3> - -<p>These objects represent collections which use keys; these contain elements which are iterable in the order of insertion.</p> - -<ul> - <li>{{jsxref("Map")}} {{experimental_inline}}</li> - <li>{{jsxref("Set")}} {{experimental_inline}}</li> - <li>{{jsxref("WeakMap")}} {{experimental_inline}}</li> - <li>{{jsxref("WeakSet")}} {{experimental_inline}}</li> -</ul> - -<h3 id="Vector_collections">Vector collections</h3> - -<p>{{Glossary("SIMD")}} vector data types are objects where data is arranged into lanes.</p> - -<ul> - <li>{{jsxref("SIMD")}} {{experimental_inline}}</li> - <li>{{jsxref("float32x4", "SIMD.float32x4")}} {{experimental_inline}}</li> - <li>{{jsxref("float64x2", "SIMD.float64x2")}} {{experimental_inline}}</li> - <li>{{jsxref("int8x16", "SIMD.int8x16")}} {{experimental_inline}}</li> - <li>{{jsxref("int16x8", "SIMD.int16x8")}} {{experimental_inline}}</li> - <li>{{jsxref("int32x4", "SIMD.int32x4")}} {{experimental_inline}}</li> -</ul> - -<h3 id="Structured_data">Structured data</h3> - -<p>These objects represent and interact with structured data buffers and data coded using JavaScript Object Notation (JSON).</p> - -<ul> - <li>{{jsxref("ArrayBuffer")}}</li> - <li>{{jsxref("DataView")}}</li> - <li>{{jsxref("JSON")}}</li> -</ul> - -<h3 id="Control_abstraction_objects">Control abstraction objects</h3> - -<ul> - <li>{{jsxref("Promise")}} {{experimental_inline}}</li> - <li>{{jsxref("Generator")}} {{experimental_inline}}</li> - <li>{{jsxref("GeneratorFunction")}} {{experimental_inline}}</li> -</ul> - -<h3 id="Reflection">Reflection</h3> - -<ul> - <li>{{jsxref("Reflect")}} {{experimental_inline}}</li> - <li>{{jsxref("Proxy")}} {{experimental_inline}}</li> -</ul> - -<h3 id="Internationalization">Internationalization</h3> - -<p>Additions to the ECMAScript core for language-sensitive functionalities.</p> - -<ul> - <li>{{jsxref("Intl")}}</li> - <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li> - <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> - <li>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li> -</ul> - -<h3 id="Non-standard_objects">Non-standard objects</h3> - -<ul> - <li>{{jsxref("Iterator")}} {{non-standard_inline}}</li> - <li>{{jsxref("ParallelArray")}} {{non-standard_inline}}</li> - <li>{{jsxref("StopIteration")}} {{non-standard_inline}}</li> -</ul> - -<h3 id="Other">Other</h3> - -<ul> - <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code></li> -</ul> -</div> 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 ---- -<div> -<div> -<div>{{jsSidebar("Objects")}}</div> -</div> -</div> - -<h3 id="Summary" name="Summary">সারসংক্ষেপ</h3> - -<p>একটি আর্গুমেন্টকে যাচাই করে বলে এটি সসীম সংখ্যা কিনা।</p> - -<h3 id="Syntax" name="Syntax">সিনট্যাক্স</h3> - -<p><code>isFinite(<em>number</em>) </code></p> - -<h3 id="Parameters" name="Parameters">প্যারামিটার</h3> - -<dl> - <dt><code>number</code></dt> - <dd>যে সংখ্যাটিকে যাচাই করতে হবে।</dd> -</dl> - -<h3 id="Description" name="Description">বিবরণ</h3> - -<p><code>isFinite</code> একটি টপ লেভেল ফাংশন এবং কোন অবজেক্টের সঙ্গে সংশ্লিষ্ট নয়।</p> - -<p>এই ফাংশনটির সাহায্যে আপনি জানতে পারবেন কোন সংখ্যা সসীম সংখ্যা কিনা। <code>isFinite</code> এর আর্গুমেন্টে আসা সংখ্যাটিকে পরীক্ষা করে দেখে। আর্গুমেন্টটি <code>NaN, ধনাত্বক অসীম অথবা ঋণাত্মক অসীম হলে এই মেথডটি</code> <code>false</code> রিটার্ন করে; নয়তো <code>true</code> রিটার্ন করে।</p> - -<h3 id="Examples" name="Examples">উদাহরণ</h3> - -<h4 id="Example:_Using_isFinite" name="Example:_Using_isFinite">উদাহরণ: <code>isFinite</code> ব্যবহার করা</h4> - -<p>আপনি আপনার ক্লায়েন্টের ইনপুট নিয়ে পরীক্ষা করে দেখতে পারেন তা সসীম সংখ্যা কিনা।</p> - -<pre class="brush: js">if (isFinite(ClientInput)) { - /* take specific steps */ -} -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>ECMAScript 2nd Edition.</td> - <td>Standard</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_Also" name="See_Also">See also</h2> - -<ul> - <li>{{jsxref("Number.isFinite()")}}</li> - <li>{{jsxref("Number.NaN()")}}</li> - <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li> - <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li> -</ul> 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 ---- -<div>{{JSRef}}</div> - -<p>The <strong><code>Number</code></strong> JavaScript object is a wrapper object allowing you to work with numerical values. A <code>Number</code> object is created using the <code>Number()</code> constructor.</p> - -<h2 id="Syntax" name="Syntax">Constructor</h2> - -<pre class="syntaxbox">new Number(value);</pre> - -<h3 id="Parameters" name="Parameters">Parameters</h3> - -<dl> - <dt><code>value</code></dt> - <dd>The numeric value of the object being created.</dd> -</dl> - -<h2 id="Description" name="Description">Description</h2> - -<p>The primary uses for the <code>Number</code> object are:</p> - -<ul> - <li>If the argument cannot be converted into a number, it returns {{jsxref("Global_Objects/NaN", "NaN")}}.</li> - <li>In a non-constructor context (i.e., without the {{jsxref("Operators/new", "new")}} operator), <code>Number</code> can be used to perform a type conversion.</li> -</ul> - -<h2 id="Properties" name="Properties">Properties</h2> - -<dl> - <dt>{{jsxref("Number.EPSILON")}} {{experimental_inline}}</dt> - <dd>The smallest interval between two representable numbers.</dd> - <dt>{{jsxref("Number.MAX_SAFE_INTEGER")}} {{experimental_inline}}</dt> - <dd>The maximum safe integer in JavaScript (<code>2<sup>53</sup> - 1</code>).</dd> - <dt>{{jsxref("Number.MAX_VALUE")}}</dt> - <dd>The largest positive representable number.</dd> - <dt>{{jsxref("Number.MIN_SAFE_INTEGER")}} {{experimental_inline}}</dt> - <dd>The minimum safe integer in JavaScript (<code>-(2<sup>53</sup> - 1)</code>).</dd> - <dt>{{jsxref("Number.MIN_VALUE")}}</dt> - <dd>The smallest positive representable number - that is, the positive number closest to zero (without actually being zero).</dd> - <dt>{{jsxref("Number.NaN")}}</dt> - <dd>Special "not a number" value.</dd> - <dt>{{jsxref("Number.NEGATIVE_INFINITY")}}</dt> - <dd>Special value representing negative infinity; returned on overflow.</dd> - <dt>{{jsxref("Number.POSITIVE_INFINITY")}}</dt> - <dd>Special value representing infinity; returned on overflow.</dd> - <dt>{{jsxref("Number.prototype")}}</dt> - <dd>Allows the addition of properties to a <code>Number</code> object.</dd> -</dl> - -<div>{{jsOverrides("Function", "properties", "MAX_VALUE", "MIN_VALUE", "NaN", "NEGATIVE_INFINITY", "POSITIVE_INFINITY", "protoype")}}</div> - -<h2 id="Methods" name="Methods">Methods</h2> - -<dl> - <dt>{{jsxref("Number.isNaN()")}} {{experimental_inline}}</dt> - <dd>Determine whether the passed value is NaN.</dd> - <dt>{{jsxref("Number.isFinite()")}} {{experimental_inline}}</dt> - <dd>Determine whether the passed value is a finite number.</dd> - <dt>{{jsxref("Number.isInteger()")}} {{experimental_inline}}</dt> - <dd>Determine whether the passed value is an integer.</dd> - <dt>{{jsxref("Number.isSafeInteger()")}} {{experimental_inline}}</dt> - <dd>Determine whether the passed value is a safe integer (number between <code>-(2<sup>53</sup> - 1)</code> and <code>2<sup>53</sup> - 1</code>).</dd> - <dt><s class="obsoleteElement">{{jsxref("Number.toInteger()")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Used to evaluate the passed value and convert it to an integer (or {{jsxref("Global_Objects/Infinity", "Infinity")}}), but has been removed.</s></dd> - <dt>{{jsxref("Number.parseFloat()")}} {{experimental_inline}}</dt> - <dd>The value is the same as {{jsxref("Global_Objects/parseFloat", "parseFloat")}} of the global object.</dd> - <dt>{{jsxref("Number.parseInt()")}} {{experimental_inline}}</dt> - <dd>The value is the same as {{jsxref("Global_Objects/parseInt", "parseInt")}} of the global object.</dd> -</dl> - -<div>{{jsOverrides("Function", "Methods", "isNaN")}}</div> - -<h2 id="Number_instances" name="Number_instances"><code>Number</code> instances</h2> - -<p>All <code>Number</code> instances inherit from {{jsxref("Number.prototype")}}. The prototype object of the <code>Number</code> constructor can be modified to affect all <code>Number</code> instances.</p> - -<h3 id="Methods_of_Number_instance" name="Methods_of_Number_instance">Methods</h3> - -<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/prototype', 'Methods')}}</div> - -<h2 id="Examples" name="Examples">Examples</h2> - -<h3 id="Example:_Using_the_Number_object_to_assign_values_to_numeric_variables" name="Example:_Using_the_Number_object_to_assign_values_to_numeric_variables">Example: Using the <code>Number</code> object to assign values to numeric variables</h3> - -<p>The following example uses the <code>Number</code> object's properties to assign values to several numeric variables:</p> - -<pre class="brush: js">var biggestNum = Number.MAX_VALUE; -var smallestNum = Number.MIN_VALUE; -var infiniteNum = Number.POSITIVE_INFINITY; -var negInfiniteNum = Number.NEGATIVE_INFINITY; -var notANum = Number.NaN; -</pre> - -<h3 id="Example:_Using_Number_to_convert_a_Date_object" name="Example:_Using_Number_to_convert_a_Date_object">Example: Integer range for <code>Number</code></h3> - -<p>The following example shows minimum and maximum integer values that can be represented as <code>Number</code> object (for details, refer to EcmaScript standard, chapter <em>8.5 The Number Type</em>):</p> - -<pre class="brush: js">var biggestInt = 9007199254740992; -var smallestInt = -9007199254740992; -</pre> - -<p>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 <code>Number</code> type. Using {{jsxref("Global_Objects/String", "String")}} instead is a possible workaround.</p> - -<h3 id="Example:_Using_Number_to_convert_a_Date_object" name="Example:_Using_Number_to_convert_a_Date_object">Example: Using <code>Number</code> to convert a <code>Date</code> object</h3> - -<p>The following example converts the {{jsxref("Global_Objects/Date", "Date")}} object to a numerical value using <code>Number</code> as a function:</p> - -<pre class="brush: js">var d = new Date('December 17, 1995 03:24:00'); -print(Number(d)); -</pre> - -<p>This displays "819199440000".</p> - -<h3 id="Example_Convert_numeric_strings_to_numbers">Example: Convert numeric strings to numbers</h3> - -<pre class="brush: js">Number("123") // 123 -Number("") // 0 -Number("0x11") // 17 -Number("0b11") // 3 -Number("0o11") // 9 -Number("foo") // NaN -Number("100a") // NaN -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>ECMAScript 1st Edition.</td> - <td>Standard</td> - <td>Initial definition. Implemented in JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.7', 'Number')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-number-objects', 'Number')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>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")}})</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>{{jsxref("Global_Objects/NaN", "NaN")}}</li> - <li>The {{jsxref("Global_Objects/Math", "Math")}} global object</li> -</ul> 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 ---- -<div> -<div>{{JSRef}}</div> -</div> - -<h2 id="সারসংক্ষেপ">সারসংক্ষেপ</h2> - -<p>পাস করা ভ্যালু সসীম কিনা তা জানায়। গ্লোবাল <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isFinite"><code>isFinite</code></a> এর উন্নততর সংস্করণ।</p> - -<h2 id="Syntax" name="Syntax">সিনট্যাক্স</h2> - -<pre class="syntaxbox"><code>Number.isFinite(test<em>Value</em>);</code></pre> - -<h3 id="Parameters" name="Parameters">প্যারামিটার</h3> - -<dl> - <dt><code>test<em>Value</em></code></dt> - <dd>সে সংখ্যা পরীক্ষা করে বলা হবে সসীম কিনা।</dd> -</dl> - -<h2 id="বিবরণ">বিবরণ</h2> - -<p>গ্লোবাল <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isFinite"><code>isFinite</code></a> ফাংশনটির সঙ্গে তুলনা করে বলা যায়, এই মেথডটি জোর পূর্বক প্যারামিটারকে সংখ্যার রুপান্তর করে না। কেবলমাত্র যে সকল নাম্বার টাইপের আর্গুমেন্ট সসীম সংখ্যা হবে, তাদের জন্যই মেথডটি <code>true</code> রিটার্ন করবে।</p> - -<h2 id="উদাহরণ">উদাহরণ</h2> - -<pre class="brush:js;">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 -</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<pre class="brush: js">Number.isFinite = Number.isFinite || function(value) { - return typeof value === "number" && isFinite(value); -} -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td> - <p>{{SpecName('ES6', '#sec-number.isfinite', 'Number.isInteger')}}</p> - </td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome("19")}}</td> - <td>{{CompatGeckoDesktop("16")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatOpera("15")}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("16")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>The {{jsxref("Global_Objects/Number", "Number")}} object it belongs to.</li> -</ul> 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 ---- -<div>{{JsSidebar}}</div> - -<p>This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more <a href="/en-US/docs/Web/JavaScript/Reference/About">about this reference</a>.</p> - -<h2 id="Global_Objects">Global Objects</h2> - -<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript standard built-in objects</a>, along with their methods and properties.</p> - -<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects', 'Standard objects (by category)')}}</div> - -<h2 id="Statements">Statements</h2> - -<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements and declarations</a>.</p> - -<div>{{page('/en-US/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}</div> - -<h2 id="Expressions_and_operators">Expressions and operators</h2> - -<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Operators">JavaScript expressions and operators</a>.</p> - -<div>{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}</div> - -<h2 id="Functions">Functions</h2> - -<p>This chapter documents how to work with <a href="/en-US/docs/Web/JavaScript/Reference/Functions">JavaScript functions</a> to develop your applications.</p> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameters</a></li> -</ul> - -<h2 id="Additional_reference_pages">Additional reference pages</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated features</a></li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>জাভাস্ক্রিপ্ট স্টেটমেন্ট এর মধ্যে কিওয়ার্ড থাকে, যা যথাযথ সিনট্যাক্স এর সাথে ব্যবহার করা হয়। একটি একক স্টেটমেন্ট এর মধ্যে একাধিক লাইন থাকতে পারে। সেমিকোলন দিয়ে আলাদা করা হলে একাধিক স্টেটমেন্ট এক লাইনেই লেখা সম্ভব। এক্ষেত্রে একটি কিওয়ার্ড হবে না, কিওয়ার্ড এর একটি গ্রুপ হবে।</p> - -<h2 id="Statements_and_declarations_by_category">Statements and declarations by category</h2> - -<p>For an alphabetical listing see the sidebar on the left.</p> - -<h3 id="Control_flow">Control flow</h3> - -<dl> - <dt>{{jsxref("Statements/block", "Block")}}</dt> - <dd>A block statement is used to group zero or more statements. The block is delimited by a pair of curly brackets.</dd> - <dt>{{jsxref("Statements/break", "break")}}</dt> - <dd>Terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement.</dd> - <dt>{{jsxref("Statements/continue", "continue")}}</dt> - <dd>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.</dd> - <dt>{{jsxref("Statements/Empty", "Empty")}}</dt> - <dd>An empty statement is used to provide no statement, although the JavaScript syntax would expect one.</dd> - <dt>{{jsxref("Statements/if...else", "if...else")}}</dt> - <dd>Executes a statement if a specified condition is true. If the condition is false, another statement can be executed.</dd> - <dt>{{jsxref("Statements/switch", "switch")}}</dt> - <dd>Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.</dd> - <dt>{{jsxref("Statements/throw", "throw")}}</dt> - <dd>Throws a user-defined exception.</dd> - <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt> - <dd>Marks a block of statements to try, and specifies a response, should an exception be thrown.</dd> -</dl> - -<h3 id="Declarations">Declarations</h3> - -<dl> - <dt>{{jsxref("Statements/var", "var")}}</dt> - <dd>Declares a variable, optionally initializing it to a value.</dd> - <dt>{{experimental_inline}} {{jsxref("Statements/let", "let")}}</dt> - <dd>Declares a block scope local variable, optionally initializing it to a value.</dd> - <dt>{{experimental_inline}} {{jsxref("Statements/const", "const")}}</dt> - <dd>Declares a read-only named constant.</dd> -</dl> - -<h3 id="Functions_and_classes">Functions and classes</h3> - -<dl> - <dt>{{jsxref("Statements/function", "function")}}</dt> - <dd>Declares a function with the specified parameters.</dd> - <dt>{{experimental_inline}} {{jsxref("Statements/function*", "function*")}}</dt> - <dd>Generators functions enable writing <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterators</a> more easily.</dd> - <dt>{{jsxref("Statements/return", "return")}}</dt> - <dd>Specifies the value to be returned by a function.</dd> - <dt>{{experimental_inline}} {{jsxref("Statements/class", "class")}}</dt> - <dd>Declares a class.</dd> -</dl> - -<h3 id="Iterations">Iterations</h3> - -<dl> - <dt>{{jsxref("Statements/do...while", "do...while")}}</dt> - <dd>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.</dd> - <dt>{{jsxref("Statements/for", "for")}}</dt> - <dd>Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.</dd> - <dt>{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}</dt> - <dd>Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.</dd> - <dt>{{jsxref("Statements/for...in", "for...in")}}</dt> - <dd>Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.</dd> - <dt>{{experimental_inline}} {{jsxref("Statements/for...of", "for...of")}}</dt> - <dd>Iterates over iterable objects (including <a href="https://developer.mozilla.org/en-US/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="Array">arrays</a>, array-like objects, <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Iterators_and_Generators" title="Iterators and generators">iterators and generators</a>), invoking a custom iteration hook with statements to be executed for the value of each distinct property.</dd> - <dt>{{jsxref("Statements/while", "while")}}</dt> - <dd>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.</dd> -</dl> - -<h3 id="Others">Others</h3> - -<dl> - <dt>{{jsxref("Statements/debugger", "debugger")}}</dt> - <dd>Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.</dd> - <dt>{{experimental_inline}} {{jsxref("Statements/export", "export")}}</dt> - <dd>Used to export functions to make them available for imports in external modules, another scripts.</dd> - <dt>{{experimental_inline}} {{jsxref("Statements/import", "import")}}</dt> - <dd>Used to import functions exported from an external module, another script.</dd> - <dt>{{jsxref("Statements/label", "label")}}</dt> - <dd>Provides a statement with an identifier that you can refer to using a <code>break</code> or <code>continue</code> statement.</dd> -</dl> - -<dl> - <dt>{{deprecated_inline}} {{jsxref("Statements/with", "with")}}</dt> - <dd>Extends the scope chain for a statement.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>ECMAScript 1st Edition.</td> - <td>Standard</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>New: function*, let, for...of, yield, class</td> - </tr> - </tbody> -</table> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Operators</a></li> -</ul> 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 ---- -<div>Swa{{JsSidebar("Advanced")}}</div> - -<p><span class="seoSummary"><strong>JavaScript typed arrays</strong> are array-like objects that provide a mechanism for reading and writing raw binary data in memory buffers.</span> 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.</p> - -<p>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.</p> - -<p>However, typed arrays are <em>not</em> to be confused with normal arrays, as calling {{jsxref("Array.isArray()")}} on a typed array returns <code>false</code>. Moreover, not all methods available for normal arrays are supported by typed arrays (e.g. push and pop).</p> - -<h2 id="Buffers_and_views_typed_array_architecture">Buffers and views: typed array architecture</h2> - -<p>To achieve maximum flexibility and efficiency, JavaScript typed arrays split the implementation into <strong>buffers</strong> and <strong>views</strong>. 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.</p> - -<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p> - -<h3 id="ArrayBuffer">ArrayBuffer</h3> - -<p>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 <code>ArrayBuffer</code>; 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.</p> - -<h3 id="Typed_array_views">Typed array views</h3> - -<p>Typed array views have self-descriptive names and provide views for all the usual numeric types like <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> and so forth. There is one special typed array view, the <code>Uint8ClampedArray</code>. It clamps the values between 0 and 255. This is useful for <a href="/en-US/docs/Web/API/ImageData">Canvas data processing</a>, for example.</p> - -<table class="standard-table"> - <thead> - <tr> - <th class="header" scope="col">Type</th> - <th class="header" scope="col">Value Range</th> - <th class="header" scope="col">Size in bytes</th> - <th class="header" scope="col">Description</th> - <th class="header" scope="col">Web IDL type</th> - <th class="header" scope="col">Equivalent C type</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{jsxref("Int8Array")}}</td> - <td><code>-128</code> to <code>127</code></td> - <td>1</td> - <td>8-bit two's complement signed integer</td> - <td><code>byte</code></td> - <td><code>int8_t</code></td> - </tr> - <tr> - <td>{{jsxref("Uint8Array")}}</td> - <td><code>0</code> to <code>255</code></td> - <td>1</td> - <td>8-bit unsigned integer</td> - <td><code>octet</code></td> - <td><code>uint8_t</code></td> - </tr> - <tr> - <td>{{jsxref("Uint8ClampedArray")}}</td> - <td><code>0</code> to <code>255</code></td> - <td>1</td> - <td>8-bit unsigned integer (clamped)</td> - <td><code>octet</code></td> - <td><code>uint8_t</code></td> - </tr> - <tr> - <td>{{jsxref("Int16Array")}}</td> - <td><code>-32768</code> to <code>32767</code></td> - <td>2</td> - <td>16-bit two's complement signed integer</td> - <td><code>short</code></td> - <td><code>int16_t</code></td> - </tr> - <tr> - <td>{{jsxref("Uint16Array")}}</td> - <td><code>0</code> to <code>65535</code></td> - <td>2</td> - <td>16-bit unsigned integer</td> - <td><code>unsigned short</code></td> - <td><code>uint16_t</code></td> - </tr> - <tr> - <td>{{jsxref("Int32Array")}}</td> - <td><code>-2147483648</code> to <code>2147483647</code></td> - <td>4</td> - <td>32-bit two's complement signed integer</td> - <td><code>long</code></td> - <td><code>int32_t</code></td> - </tr> - <tr> - <td>{{jsxref("Uint32Array")}}</td> - <td><code>0</code> to <code>4294967295</code></td> - <td>4</td> - <td>32-bit unsigned integer</td> - <td><code>unsigned long</code></td> - <td><code>uint32_t</code></td> - </tr> - <tr> - <td>{{jsxref("Float32Array")}}</td> - <td><code>1.2</code><span style="">×</span><code>10<sup>-38</sup></code> to <code>3.4</code><span style="">×</span><code>10<sup>38</sup></code></td> - <td>4</td> - <td>32-bit IEEE floating point number (7 significant digits e.g., <code>1.123456</code>)</td> - <td><code>unrestricted float</code></td> - <td><code>float</code></td> - </tr> - <tr> - <td>{{jsxref("Float64Array")}}</td> - <td><code>5.0</code><span style="">×</span><code>10<sup>-324</sup></code> to <code>1.8</code><span style="">×</span><code>10<sup>308</sup></code></td> - <td>8</td> - <td>64-bit IEEE floating point number (16 significant digits e.g., <code>1.123...15</code>)</td> - <td><code>unrestricted double</code></td> - <td><code>double</code></td> - </tr> - <tr> - <td>{{jsxref("BigInt64Array")}}</td> - <td><code>-2<sup>63</sup></code> to <code>2<sup>63</sup>-1</code></td> - <td>8</td> - <td>64-bit two's complement signed integer</td> - <td><code>bigint</code></td> - <td><code>int64_t (signed long long)</code></td> - </tr> - <tr> - <td>{{jsxref("BigUint64Array")}}</td> - <td><code>0</code> to <code>2<sup>64</sup>-1</code></td> - <td>8</td> - <td>64-bit unsigned integer</td> - <td><code>bigint</code></td> - <td><code>uint64_t (unsigned long long)</code></td> - </tr> - </tbody> -</table> - -<h3 id="DataView">DataView</h3> - -<p>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 <a href="/en-US/docs/Glossary/Endianness">Endianness</a>) of your platform. With a <code>DataView</code> 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.</p> - -<h2 id="Web_APIs_using_typed_arrays">Web APIs using typed arrays</h2> - -<p>These are some examples of APIs that make use of typed arrays; there are others, and more are being added all the time.</p> - -<dl> - <dt><a href="/en-US/docs/Web/API/FileReader#readAsArrayBuffer()" title="/en-US/docs/Web/API/FileReader#readAsArrayBuffer()"><code>FileReader.prototype.readAsArrayBuffer()</code></a></dt> - <dd>The <code>FileReader.prototype.readAsArrayBuffer()</code> method starts reading the contents of the specified <a href="/en-US/docs/Web/API/Blob" title="/en-US/docs/DOM/Blob"><code>Blob</code></a> or <a href="/en-US/docs/Web/API/File" title="/en-US/docs/DOM/File"><code>File</code></a>.</dd> - <dt><a href="/en-US/docs/Web/API/XMLHttpRequest#send()" title="/en-US/docs/Web/API/XMLHttpRequest#send()"><code>XMLHttpRequest.prototype.send()</code></a></dt> - <dd><code>XMLHttpRequest</code> instances' <code>send()</code> method now supports typed arrays and {{jsxref("ArrayBuffer")}} objects as argument.</dd> - <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/ImageData">ImageData.data</a></code></dt> - <dd>Is a {{jsxref("Uint8ClampedArray")}} representing a one-dimensional array containing the data in the RGBA order, with integer values between <code>0</code> and <code>255</code> inclusive.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<h3 id="Using_views_with_buffers">Using views with buffers</h3> - -<p>First of all, we will need to create a buffer, here with a fixed length of 16-bytes:</p> - -<pre class="brush:js notranslate">let buffer = new ArrayBuffer(16); -</pre> - -<p>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:</p> - -<pre class="brush:js notranslate">if (buffer.byteLength === 16) { - console.log("Yes, it's 16 bytes."); -} else { - console.log("Oh no, it's the wrong size!"); -} -</pre> - -<p>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:</p> - -<pre class="brush:js notranslate">let int32View = new Int32Array(buffer); -</pre> - -<p>Now we can access the fields in the array just like a normal array:</p> - -<pre class="brush:js notranslate">for (let i = 0; i < int32View.length; i++) { - int32View[i] = i * 2; -} -</pre> - -<p>This fills out the 4 entries in the array (4 entries at 4 bytes each makes 16 total bytes) with the values <code>0</code>, <code>2</code>, <code>4</code>, and <code>6</code>.</p> - -<h3 id="Multiple_views_on_the_same_data">Multiple views on the same data</h3> - -<p>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:</p> - -<pre class="brush:js notranslate">let int16View = new Int16Array(buffer); - -for (let i = 0; i < int16View.length; i++) { - console.log('Entry ' + i + ': ' + int16View[i]); -} -</pre> - -<p>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 <code>0</code>, <code>0</code>, <code>2</code>, <code>0</code>, <code>4</code>, <code>0</code>, <code>6</code>, <code>0</code>.</p> - -<p>You can go a step farther, though. Consider this:</p> - -<pre class="brush:js notranslate">int16View[0] = 32; -console.log('Entry 0 in the 32-bit array is now ' + int32View[0]); -</pre> - -<p>The output from this is <code>"Entry 0 in the 32-bit array is now 32"</code>.</p> - -<p>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 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects" title="JavaScript typed arrays/ArrayBufferView#Typed array subclasses">view types</a>.</p> - -<h3 id="Working_with_complex_data_structures">Working with complex data structures</h3> - -<p>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 <a href="/en-US/docs/Web/WebGL" title="WebGL">WebGL</a>, data files, or C structures you need to use while using <a href="/en-US/docs/Mozilla/js-ctypes" title="js-ctypes">js-ctypes</a>.</p> - -<p>Consider this C structure:</p> - -<pre class="brush:cpp notranslate">struct someStruct { - unsigned long id; - char username[16]; - float amountDue; -};</pre> - -<p>You can access a buffer containing data in this format like this:</p> - -<pre class="brush:js notranslate">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);</pre> - -<p>Then you can access, for example, the amount due with <code>amountDueView[0]</code>.</p> - -<div class="note"><strong>Note:</strong> The <a href="http://en.wikipedia.org/wiki/Data_structure_alignment" title="http://en.wikipedia.org/wiki/Data_structure_alignment">data structure alignment</a> in a C structure is platform-dependent. Take precautions and considerations for these padding differences.</div> - -<h3 id="Conversion_to_normal_arrays">Conversion to normal arrays</h3> - -<p>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 <code>Array.from()</code> is unsupported.</p> - -<pre class="brush:js notranslate">let typedArray = new Uint8Array([1, 2, 3, 4]), - normalArray = Array.prototype.slice.call(typedArray); -normalArray.length === 4; -normalArray.constructor === Array; -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.builtins.Int8Array")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Getting <code>ArrayBuffer</code>s or typed arrays from <em>Base64</em>-encoded strings</a></li> - <li><a href="/en-US/docs/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li> - <li><a href="https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays">Faster Canvas Pixel Manipulation with Typed Arrays</a></li> - <li><a href="http://www.html5rocks.com/en/tutorials/webgl/typed_arrays">Typed Arrays: Binary Data in the Browser</a></li> - <li><a href="/en-US/docs/Glossary/Endianness">Endianness</a></li> -</ul> 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 ---- -<p>মুক্ত ওয়েব তৈরী হয়েছে বেশ কিছু প্রযুক্তির উপর ভিত্তি করে। নিচে এই সকল প্রযুক্তির নাম এবং বিস্তারিত তথ্য সম্বলিত লিংক দেয়া হল।</p> -<div class="row topicpage-table"> - <div class="section"> - <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">মূল ওয়েব প্রযুক্তি</h2> - <dl> - <dt> - <a href="/bn-BD/docs/Web/API" title="/en-US/docs/Web/API">API</a></dt> - <dd> - ওয়েব এপিআই এর সাথে সম্পর্কিত সকল ধরনের ইন্টারফেস সম্পর্কিত তথ্যের রেফারেন্স পাওয়া যাবে এখানে। DOM এবং এর সম্পর্কিত সকল এপিআই, এবং ওয়েব কন্টেন্ট এবং অ্যাপ তৈরীর কাজে লাগবে এমন এপিআই গুলো বর্ণক্রম অনুযায়ী সাজানো হয়েছে।</dd> - <dt> - <a href="/en-US/docs/Web/Reference/API" title="/en-US/docs/Web/Reference/API">Web APIs</a></dt> - <dd> - A list of the individual APIs and technology suites that make up the overall Web API.</dd> - <dt> - <a href="/bn-BD/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></dt> - <dd> - হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ হল ওয়েব পেজের মূল ভাষা, যার মাধ্যমে ওয়েব কন্টেন্টের বর্ণনা এবং নির্ধারণ করা হয়।</dd> - <dt> - <a href="/bn-BD/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></dt> - <dd> - ক্যাসকেডিং স্টাইল শিট ওয়েব কন্টেন্টের ডিজাইন তৈরীতে ব্যবহার করা হয়।</dd> - <dt> - <a href="/bn-BD/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></dt> - <dd> - স্কেলেবল ভেক্টর গ্রাফিক্স ব্যবহার করে ছবিগুলো বিভিন্ন ভেক্টর এবং অন্যান্য আকার হিসাবে সংরক্ষন করা হয়। এর ফলে ছবির আকার পরিবর্তন করা হলেও ছবির মানের কোনো পরিবর্তন করা হয় না।</dd> - <dt> - <a href="/bn-BD/docs/Web/MathML" title="/en-US/docs/Web/MathML">MathML</a></dt> - <dd> - ম্যাথ মার্কআপ ল্যাঙ্গুয়েজ ব্যবহার করে জটিল গাণিতিক সূত্র লেখা যায়।</dd> - </dl> - </div> - <div class="section"> - <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">অন্যান্য প্রযুক্ত</h2> - <p>শিঘ্রই যুক্ত করা হবে।</p> - </div> -</div> -<p> </p> 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 ---- -<p>« <a href="/en-US/docs/SVG" title="SVG">SVG</a> / <a href="/en-US/docs/SVG/Attribute" title="SVG/Attribute">SVG Attribute reference</a> »</p> -<h2 id="SVG_এর_উপাদানসমূহ">SVG এর উপাদানসমূহ</h2> -<div class="index"> - <span id="A">A</span> - <ul> - <li>{{SVGElement("a")}}</li> - <li>{{SVGElement("altGlyph")}}</li> - <li>{{SVGElement("altGlyphDef")}}</li> - <li>{{SVGElement("altGlyphItem")}}</li> - <li>{{SVGElement("animate")}}</li> - <li>{{SVGElement("animateColor")}}</li> - <li>{{SVGElement("animateMotion")}}</li> - <li>{{SVGElement("animateTransform")}}</li> - </ul> - <span id="C">B C</span> - <ul> - <li>{{SVGElement("circle")}}</li> - <li>{{SVGElement("clipPath")}}</li> - <li>{{SVGElement("color-profile")}}</li> - <li>{{SVGElement("cursor")}}</li> - </ul> - <span id="D">D</span> - <ul> - <li>{{SVGElement("defs")}}</li> - <li>{{SVGElement("desc")}}</li> - </ul> - <span id="E">E</span> - <ul> - <li>{{SVGElement("ellipse")}}</li> - </ul> - <span id="F">F</span> - <ul> - <li>{{SVGElement("feBlend")}}</li> - <li>{{SVGElement("feColorMatrix")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feComposite")}}</li> - <li>{{SVGElement("feConvolveMatrix")}}</li> - <li>{{SVGElement("feDiffuseLighting")}}</li> - <li>{{SVGElement("feDisplacementMap")}}</li> - <li>{{SVGElement("feDistantLight")}}</li> - <li>{{SVGElement("feFlood")}}</li> - <li>{{SVGElement("feFuncA")}}</li> - <li>{{SVGElement("feFuncB")}}</li> - <li>{{SVGElement("feFuncG")}}</li> - <li>{{SVGElement("feFuncR")}}</li> - <li>{{SVGElement("feGaussianBlur")}}</li> - <li>{{SVGElement("feImage")}}</li> - <li>{{SVGElement("feMerge")}}</li> - <li>{{SVGElement("feMergeNode")}}</li> - <li>{{SVGElement("feMorphology")}}</li> - <li>{{SVGElement("feOffset")}}</li> - <li>{{SVGElement("fePointLight")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("feSpotLight")}}</li> - <li>{{SVGElement("feTile")}}</li> - <li>{{SVGElement("feTurbulence")}}</li> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("font")}}</li> - <li>{{SVGElement("font-face")}}</li> - <li>{{SVGElement("font-face-format")}}</li> - <li>{{SVGElement("font-face-name")}}</li> - <li>{{SVGElement("font-face-src")}}</li> - <li>{{SVGElement("font-face-uri")}}</li> - <li>{{SVGElement("foreignObject")}}</li> - </ul> - <span id="G">G</span> - <ul> - <li>{{SVGElement("g")}}</li> - <li>{{SVGElement("glyph")}}</li> - <li>{{SVGElement("glyphRef")}}</li> - </ul> - <span id="H">H</span> - <ul> - <li>{{SVGElement("hkern")}}</li> - </ul> - <span id="I">I</span> - <ul> - <li>{{SVGElement("image")}}</li> - </ul> - <span id="L">J K L</span> - <ul> - <li>{{SVGElement("line")}}</li> - <li>{{SVGElement("linearGradient")}}</li> - </ul> - <span id="M">M</span> - <ul> - <li>{{SVGElement("marker")}}</li> - <li>{{SVGElement("mask")}}</li> - <li>{{SVGElement("metadata")}}</li> - <li>{{SVGElement("missing-glyph")}}</li> - <li>{{SVGElement("mpath")}}</li> - </ul> - <span id="P">N O P</span> - <ul> - <li>{{SVGElement("path")}}</li> - <li>{{SVGElement("pattern")}}</li> - <li>{{SVGElement("polygon")}}</li> - <li>{{SVGElement("polyline")}}</li> - </ul> - <span id="R">Q R</span> - <ul> - <li>{{SVGElement("radialGradient")}}</li> - <li>{{SVGElement("rect")}}</li> - </ul> - <span id="S">S</span> - <ul> - <li>{{SVGElement("script")}}</li> - <li>{{SVGElement("set")}}</li> - <li>{{SVGElement("stop")}}</li> - <li>{{SVGElement("style")}}</li> - <li>{{SVGElement("svg")}}</li> - <li>{{SVGElement("switch")}}</li> - <li>{{SVGElement("symbol")}}</li> - </ul> - <span id="T">T</span> - <ul> - <li>{{SVGElement("text")}}</li> - <li>{{SVGElement("textPath")}}</li> - <li>{{SVGElement("title")}}</li> - <li>{{SVGElement("tref")}}</li> - <li>{{SVGElement("tspan")}}</li> - </ul> - <span id="U">U</span> - <ul> - <li>{{SVGElement("use")}}</li> - </ul> - <span id="V">V — Z</span> - <ul> - <li>{{SVGElement("view")}}</li> - <li>{{SVGElement("vkern")}}</li> - </ul> -</div> -<h2 id="বিভাগসমুহ">বিভাগসমুহ</h2> -<h3 id="Animation_এর_উপাদানসমূহ">Animation এর উপাদানসমূহ</h3> -<h2 id="sect1"> </h2> -<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}</p> -<h3 id="প্রাথমিক_আকারসমূহ">প্রাথমিক আকারসমূহ</h3> -<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> -<h3 id="উপাদানসমূহের_ধারক">উপাদানসমূহের ধারক</h3> -<h3 id="sect2"> </h3> -<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("glyph")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}</p> -<h3 id="বর্ণনামূলক_উপাদানসমূহ">বর্ণনামূলক উপাদানসমূহ</h3> -<p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p> -<h3 id="Filter_এর_প্রাচীন_উপাদানসমূহ">Filter এর প্রাচীন উপাদানসমূহ</h3> -<p>{{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")}}</p> -<h3 id="Font_এর_উপাদানসমূহ">Font এর উপাদানসমূহ</h3> -<p>{{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")}}</p> -<h3 id="Gradient_এর_উপাদানসমূহ">Gradient এর উপাদানসমূহ</h3> -<p>{{SVGElement("linearGradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p> -<h3 id="Graphics_এর_উপাদানসমূহ">Graphics এর উপাদানসমূহ</h3> -<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}</p> -<h3 id="Light_source_এর_উপাদানসমূহ">Light source এর উপাদানসমূহ</h3> -<p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}</p> -<h3 id="sect3"> </h3> -<h3 id="Shape_এর_উপাদানসমূহ">Shape এর উপাদানসমূহ</h3> -<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> -<h3 id="কাঠামোগত_উপাদানসমূহ">কাঠামোগত উপাদানসমূহ</h3> -<p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p> -<h3 id="Text_content_এর_উপাদানসমূহ">Text content এর উপাদানসমূহ</h3> -<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> -<h3 id="Text_content_child_এর_উপাদানসমূহ">Text content child এর উপাদানসমূহ</h3> -<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}} এর উপাদানসমুহ</p> -<h3 id="Uncategorized_এর_উপাদানসমূহ">Uncategorized এর উপাদানসমূহ</h3> -<p>{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}</p> 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 ---- -<div class="callout-box"> - <strong><a href="/en-US/docs/SVG/Tutorial" title="SVG/Tutorial">Getting Started</a></strong><br> - This tutorial will help get you started using SVG.</div> -<p><strong>Scalable Vector Graphics (SVG)</strong> is an <a href="/en-US/docs/XML" title="XML">XML</a> markup language for describing two-dimensional vector graphics. SVG is essentially to graphics what XHTML is to text.</p> -<p>SVG is similar in scope to Adobe's proprietary Flash technology, but what distinguishes SVG from Flash is that it is a <a href="http://www.w3.org/Graphics/SVG/">W3C recommendation</a> (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 <a href="http://www.w3.org/">W3C</a> standards such as <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/DOM" title="DOM">DOM</a> and <a href="http://www.w3.org/AudioVideo/">SMIL</a>.</p> -<div class="cleared row topicpage-table"> - <div class="section"> - <h2 class="Documentation" id="Documentation">Documentation</h2> - <dl> - <dt> - <a href="/en-US/docs/SVG/Element">SVG element reference</a></dt> - <dd> - Get details about each SVG element.</dd> - <dt> - <a href="/en-US/docs/SVG/Attribute">SVG attribute reference</a></dt> - <dd> - Get details about each SVG attribute.</dd> - <dt> - <a href="/en-US/docs/DOM/DOM_Reference#SVG_interfaces">SVG DOM interface reference</a></dt> - <dd> - Get details about the whole SVG DOM API.</dd> - <dt> - Enhance HTML content</dt> - <dd> - SVG works together with HTML, CSS and JavaScript. Use SVG to enhance a regular HTML page or web application.</dd> - <dt> - SVG in Mozilla</dt> - <dd> - Notes and information on how SVG is implemented in Mozilla. - <ul> - <li><a href="/en-US/docs/SVG_in_Firefox">How much SVG is implemented in Firefox</a></li> - <li><a href="/en-US/docs/SVG_in_Firefox">Tutorial for how to use </a></li> - <li><a href="/en-US/docs/SVG_In_HTML_Introduction">SVG in XHTML</a></li> - </ul> - </dd> - </dl> - <p><span class="alllinks"><a href="/en-US/docs/tag/SVG">View All...</a></span></p> - <h2 class="Community" id="Community">Community</h2> - <ul> - <li>View Mozilla forums... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li> - </ul> - <h2 class="Tools" id="Tools">Tools</h2> - <ul> - <li><a href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li> - <li><a href="http://jiggles.w3.org/svgvalidator/">SVG Validator</a> (Discontinued)</li> - <li><a href="/en-US/docs/tag/SVG:Tools" title="tag/SVG:Tools">More Tools...</a></li> - <li>Other resources: <a href="/en-US/docs/XML">XML</a>, <a href="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/HTML/Canvas">Canvas</a></li> - </ul> - </div> - <div class="section"> - <h2 class="Related_Topics" id="Examples">Examples</h2> - <ul> - <li>Google <a href="http://maps.google.com">Maps</a> (route overlay) & <a href="http://docs.google.com">Docs</a> (spreadsheet charting)</li> - <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG bubble menus</a></li> - <li><a href="http://jwatt.org/svg/authoring/">SVG authoring guidelines</a></li> - <li>An overview of the <a href="/en-US/docs/Mozilla_SVG_Project">Mozilla SVG Project</a></li> - <li><a href="/en-US/docs/SVG/FAQ" title="SVG/FAQ">Frequently asked questions</a> regarding SVG and Mozilla</li> - <li>Slides and demos from talk on <a href="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml">SVG and Mozilla</a> at SVG Open 2009</li> - <li><a href="/en-US/docs/SVG/SVG_as_an_Image">SVG as an image</a></li> - <li><a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SVG animation with SMIL</a></li> - <li><a href="http://plurib.us/1shot/2007/svg_gallery/">SVG art gallery</a></li> - <li>More samples (<a href="http://croczilla.com/bits_and_pieces/svg/samples">SVG Samples croczilla.com</a>, <a href="http://www.carto.net/papers/svg/samples/">carto.net</a>)</li> - </ul> - <h3 id="Animation_and_interactions">Animation and interactions</h3> - <p>Like HTML, SVG has a document model (DOM), events and is accessible from JavaScript. This allows developers to create rich animations and interactive images.</p> - <ul> - <li>Some real eye-candy SVG at <a href="http://svg-wow.org/">svg-wow.org</a></li> - <li>Firefox extension (<a href="http://schepers.cc/grafox/">Grafox</a>) to add a subset of SMIL animation support</li> - <li>Interactive <a href="http://people.mozilla.com/~vladimir/demos/photos.svg">photos</a> manipulation</li> - <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using SVG's <code>foreignObject</code></li> - </ul> - <h3 id="Mapping_charting_games_3D_experiments">Mapping, charting, games & 3D experiments</h3> - <p>While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.</p> - <ul> - <li><a href="http://www.codedread.com/yastframe.php">An SVG Tetris</a> & <a href="http://www.treebuilder.de/svg/connect4.svg">Connect 4</a></li> - <li><a href="http://files.myopera.com/orinoco/svg/USStates.svg">Find the State</a> game</li> - <li><a href="http://www.carto.net/papers/svg/us_population/index.html">US population map</a></li> - <li><a href="http://www.treebuilder.de/default.asp?file=441875.xml">3D box</a> & <a href="http://www.treebuilder.de/default.asp?file=206524.xml">3D boxes</a></li> - <li><a href="http://jvectormap.com/">jVectorMap</a> (interactive maps for data visualization)</li> - </ul> - </div> -</div> -<p> </p> |