From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/bn/web/accessibility/index.html | 65 + files/bn/web/api/battery_status_api/index.html | 156 + files/bn/web/api/event/index.html | 216 ++ files/bn/web/api/event/preventdefault/index.html | 160 ++ files/bn/web/api/index.html | 15 + files/bn/web/api/indexeddb_api/index.html | 182 ++ files/bn/web/api/inputevent/index.html | 98 + files/bn/web/api/stylesheet/index.html | 72 + files/bn/web/css/css_animations/index.html | 136 + files/bn/web/css/css_transforms/index.html | 152 + files/bn/web/css/element()/index.html | 113 + files/bn/web/css/getting_started/color/index.html | 280 ++ .../css/getting_started/how_css_works/index.html | 126 + files/bn/web/css/getting_started/index.html | 27 + .../css/getting_started/readable_css/index.html | 132 + .../web/css/getting_started/text_styles/index.html | 109 + .../web/css/getting_started/why_use_css/index.html | 103 + .../\340\246\250\340\246\207/index.html" | 354 +++ .../index.html" | 301 ++ files/bn/web/css/index.html | 73 + files/bn/web/events/index.html | 3011 ++++++++++++++++++++ files/bn/web/guide/api/dom/index.html | 21 + files/bn/web/guide/api/index.html | 25 + files/bn/web/guide/api/webrtc/index.html | 39 + files/bn/web/guide/events/index.html | 37 + files/bn/web/guide/html/canvas_tutorial/index.html | 47 + .../bn/web/guide/html/content_editable/index.html | 44 + files/bn/web/guide/html/forms/index.html | 342 +++ files/bn/web/guide/index.html | 20 + files/bn/web/guide/performance/index.html | 9 + .../index.html" | 53 + files/bn/web/html/block-level_elements/index.html | 121 + files/bn/web/html/canvas/index.html | 73 + files/bn/web/html/canvas/tutorial/index.html | 42 + .../web/html/cors_settings_attributes/index.html | 130 + files/bn/web/html/element/a/index.html | 495 ++++ files/bn/web/html/element/article/index.html | 110 + files/bn/web/html/element/b/index.html | 159 ++ files/bn/web/html/element/blockquote/index.html | 155 + files/bn/web/html/element/index.html | 216 ++ files/bn/web/html/element/section/index.html | 129 + files/bn/web/html/element/summary/index.html | 144 + .../web/html/focus_management_in_html/index.html | 65 + .../html/global_attributes/accesskey/index.html | 146 + .../global_attributes/contenteditable/index.html | 103 + .../html/global_attributes/draggable/index.html | 101 + .../web/html/global_attributes/hidden/index.html | 105 + files/bn/web/html/global_attributes/index.html | 463 +++ .../web/html/global_attributes/itemprop/index.html | 19 + .../html/global_attributes/itemscope/index.html | 27 + .../web/html/global_attributes/tabindex/index.html | 111 + .../html/global_attributes/translate/index.html | 96 + files/bn/web/html/index.html | 80 + files/bn/web/http/index.html | 90 + files/bn/web/http/status/index.html | 202 ++ files/bn/web/index.html | 82 + .../a_re-introduction_to_javascript/index.html | 968 +++++++ files/bn/web/javascript/data_structures/index.html | 116 + .../javascript/guide/grammar_and_types/index.html | 635 +++++ files/bn/web/javascript/guide/index.html | 123 + files/bn/web/javascript/index.html | 130 + .../inheritance_and_the_prototype_chain/index.html | 177 ++ .../javascript/reference/global_objects/index.html | 177 ++ .../reference/global_objects/isfinite/index.html | 130 + .../reference/global_objects/number/index.html | 218 ++ .../global_objects/number/isfinite/index.html | 125 + files/bn/web/javascript/reference/index.html | 48 + .../web/javascript/reference/statements/index.html | 127 + files/bn/web/javascript/typed_arrays/index.html | 268 ++ .../index.html" | 102 + files/bn/web/reference/index.html | 46 + files/bn/web/svg/element/index.html | 169 ++ files/bn/web/svg/index.html | 93 + 73 files changed, 13634 insertions(+) create mode 100644 files/bn/web/accessibility/index.html create mode 100644 files/bn/web/api/battery_status_api/index.html create mode 100644 files/bn/web/api/event/index.html create mode 100644 files/bn/web/api/event/preventdefault/index.html create mode 100644 files/bn/web/api/index.html create mode 100644 files/bn/web/api/indexeddb_api/index.html create mode 100644 files/bn/web/api/inputevent/index.html create mode 100644 files/bn/web/api/stylesheet/index.html create mode 100644 files/bn/web/css/css_animations/index.html create mode 100644 files/bn/web/css/css_transforms/index.html create mode 100644 files/bn/web/css/element()/index.html create mode 100644 files/bn/web/css/getting_started/color/index.html create mode 100644 files/bn/web/css/getting_started/how_css_works/index.html create mode 100644 files/bn/web/css/getting_started/index.html create mode 100644 files/bn/web/css/getting_started/readable_css/index.html create mode 100644 files/bn/web/css/getting_started/text_styles/index.html create mode 100644 files/bn/web/css/getting_started/why_use_css/index.html create mode 100644 "files/bn/web/css/getting_started/\340\246\250\340\246\207/index.html" create mode 100644 "files/bn/web/css/getting_started/\340\246\262\340\247\207-\340\246\206\340\246\211\340\246\237/index.html" create mode 100644 files/bn/web/css/index.html create mode 100644 files/bn/web/events/index.html create mode 100644 files/bn/web/guide/api/dom/index.html create mode 100644 files/bn/web/guide/api/index.html create mode 100644 files/bn/web/guide/api/webrtc/index.html create mode 100644 files/bn/web/guide/events/index.html create mode 100644 files/bn/web/guide/html/canvas_tutorial/index.html create mode 100644 files/bn/web/guide/html/content_editable/index.html create mode 100644 files/bn/web/guide/html/forms/index.html create mode 100644 files/bn/web/guide/index.html create mode 100644 files/bn/web/guide/performance/index.html create mode 100644 "files/bn/web/guide/\340\246\227\340\247\215\340\246\260\340\246\276\340\246\253\340\246\277\340\246\225\340\247\215\340\246\270/index.html" create mode 100644 files/bn/web/html/block-level_elements/index.html create mode 100644 files/bn/web/html/canvas/index.html create mode 100644 files/bn/web/html/canvas/tutorial/index.html create mode 100644 files/bn/web/html/cors_settings_attributes/index.html create mode 100644 files/bn/web/html/element/a/index.html create mode 100644 files/bn/web/html/element/article/index.html create mode 100644 files/bn/web/html/element/b/index.html create mode 100644 files/bn/web/html/element/blockquote/index.html create mode 100644 files/bn/web/html/element/index.html create mode 100644 files/bn/web/html/element/section/index.html create mode 100644 files/bn/web/html/element/summary/index.html create mode 100644 files/bn/web/html/focus_management_in_html/index.html create mode 100644 files/bn/web/html/global_attributes/accesskey/index.html create mode 100644 files/bn/web/html/global_attributes/contenteditable/index.html create mode 100644 files/bn/web/html/global_attributes/draggable/index.html create mode 100644 files/bn/web/html/global_attributes/hidden/index.html create mode 100644 files/bn/web/html/global_attributes/index.html create mode 100644 files/bn/web/html/global_attributes/itemprop/index.html create mode 100644 files/bn/web/html/global_attributes/itemscope/index.html create mode 100644 files/bn/web/html/global_attributes/tabindex/index.html create mode 100644 files/bn/web/html/global_attributes/translate/index.html create mode 100644 files/bn/web/html/index.html create mode 100644 files/bn/web/http/index.html create mode 100644 files/bn/web/http/status/index.html create mode 100644 files/bn/web/index.html create mode 100644 files/bn/web/javascript/a_re-introduction_to_javascript/index.html create mode 100644 files/bn/web/javascript/data_structures/index.html create mode 100644 files/bn/web/javascript/guide/grammar_and_types/index.html create mode 100644 files/bn/web/javascript/guide/index.html create mode 100644 files/bn/web/javascript/index.html create mode 100644 files/bn/web/javascript/inheritance_and_the_prototype_chain/index.html create mode 100644 files/bn/web/javascript/reference/global_objects/index.html create mode 100644 files/bn/web/javascript/reference/global_objects/isfinite/index.html create mode 100644 files/bn/web/javascript/reference/global_objects/number/index.html create mode 100644 files/bn/web/javascript/reference/global_objects/number/isfinite/index.html create mode 100644 files/bn/web/javascript/reference/index.html create mode 100644 files/bn/web/javascript/reference/statements/index.html create mode 100644 files/bn/web/javascript/typed_arrays/index.html create mode 100644 "files/bn/web/javascript/\340\246\255\340\246\276\340\246\267\340\246\276\340\246\260_\340\246\260\340\246\277\340\246\270\340\247\213\340\246\260\340\247\215\340\246\270/index.html" create mode 100644 files/bn/web/reference/index.html create mode 100644 files/bn/web/svg/element/index.html create mode 100644 files/bn/web/svg/index.html (limited to 'files/bn/web') diff --git a/files/bn/web/accessibility/index.html b/files/bn/web/accessibility/index.html new file mode 100644 index 0000000000..3ec2777da5 --- /dev/null +++ b/files/bn/web/accessibility/index.html @@ -0,0 +1,65 @@ +--- +title: ব্যবহারযোগ্যতা +slug: Web/Accessibility +tags: + - Accessibility + - Advanced + - Landing + - Web Development +translation_of: Web/Accessibility +--- +

ভিতরে অনেক মানুষ as সম্ভব হিসেবে সক্ষম করা ওয়েব ব্যবহার করতে বুঝায় সাইট, যখন ওগুলো মানুষকে-এর সামর্থ্য কিছু পথে সীমাবদ্ধ করা হয়. ভিতরে অনেক মানুষ as সম্ভব হিসেবে সক্ষম করা ওয়েব ব্যবহার করতে বুঝায় সাইট, যখন ওগুলো মানুষকে-এর সামর্থ্য কিছু পথে সীমাবদ্ধ করা হয়.

+ +

"accessibility সবচেয়ে বেশী ঘন ঘন সুযোগসুবিধা বা নাগরিক সুবিধা বর্ণনা করতে বিকলত্ব-এর, as এর 'সাথে মানুষকে সাহায্য করতে অভ্যস্ত আছে'. This can extend to Braille signage, wheelchair ramps, audio signals at pedestrian crossings, walkway contours, website design, and so on." Wikipedia entry for Accessibility

+ + + +

"ওয়েব মৌলিকভাবে সব মানুষ-এর জন্য কাজ করতে ডিজাইন করা হয়, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability." W3C - Accessibility

+ +
+
+

ডকুমেন্টেশন

+ +
+
ওয়েব ডেভেলপমেন্ট
+
+
+ +
+ + + + + + + + +
রচনার একটি সংগ্রহ প্রবেশযোগ্যতার দুনিয়ায় ওয়েব ‌উন্নয়ন ইস্যু তুলে ধরতে মনোনীত করল।
+
+
+
ARIA
+
রচনার একটি সংগ্রহ শিখতে যেভাবে aria আপনার html ডকুমেন্ট আরও সহজগম্য বানাতে ব্যবহার করতে।
+
Assistive technology (AT) development
+
রচনার at ডেভেলাপার-এর জন্য উদ্দেশ্য করা একটি সংগ্রহ
+
+ +

View all articles about Accessibility...

+
+ +
+

ওয়েব ডেভেলপারদের জন্য টুল সমূহ

+ + + +

View All...

+ +

অন্যান্য উপকারী সাইট

+ + +
+
diff --git a/files/bn/web/api/battery_status_api/index.html b/files/bn/web/api/battery_status_api/index.html new file mode 100644 index 0000000000..b75994d356 --- /dev/null +++ b/files/bn/web/api/battery_status_api/index.html @@ -0,0 +1,156 @@ +--- +title: Battery Status API +slug: Web/API/Battery_Status_API +translation_of: Web/API/Battery_Status_API +--- +
{{DefaultAPISidebar("ব্যাটারি API")}}
+ +

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

+ +

ব্যাটারি অবস্থা API ব্যাটারি প্রতিশ্রুতি ফিরিয়ে আনার একটি {{domxref("navigator.getBattery()")}} মেথড/পদ্ধতিতে {{domxref("window.navigator")}}- কে প্রসারিত করে, যা একটি {{domxref("BatteryManager")}} অবজেক্টে সমাধান করা হয় যা আপনাকে ব্যাটারি অবস্থা নিরীক্ষণ করার জন্য কিছু নতুন ইভেন্টগুলি পরিচালনা করতে পারে.

+ +

উদাহরণ

+ +

এই উদাহরণে, আমরা চার্জিং অবস্থা (আমরা প্লাগ ইন এবং চার্জিং কিনা তাও) এর ব্যাটারি স্তর এবং সময় পরিবর্তনের উভয় পরিবর্তনগুলির জন্য দেখতে পাই। এটি {{event("chargingchange")}}, {{event("levelchange")}}, {{event("chargingtimechange")}}, {{event("dischargingtimechange")}} ইভেন্টগুলি শোনার মাধ্যমে সম্পন্ন করা হয়।

+ +
navigator.getBattery().then(function(battery) {
+  function updateAllBatteryInfo(){
+    updateChargeInfo();
+    updateLevelInfo();
+    updateChargingInfo();
+    updateDischargingInfo();
+  }
+  updateAllBatteryInfo();
+
+  battery.addEventListener('chargingchange', function(){
+    updateChargeInfo();
+  });
+  function updateChargeInfo(){
+    console.log("Battery charging? "
+                + (battery.charging ? "Yes" : "No"));
+  }
+
+  battery.addEventListener('levelchange', function(){
+    updateLevelInfo();
+  });
+  function updateLevelInfo(){
+    console.log("Battery level: "
+                + battery.level * 100 + "%");
+  }
+
+  battery.addEventListener('chargingtimechange', function(){
+    updateChargingInfo();
+  });
+  function updateChargingInfo(){
+    console.log("Battery charging time: "
+                 + battery.chargingTime + " seconds");
+  }
+
+  battery.addEventListener('dischargingtimechange', function(){
+    updateDischargingInfo();
+  });
+  function updateDischargingInfo(){
+    console.log("Battery discharging time: "
+                 + battery.dischargingTime + " seconds");
+  }
+
+});
+
+ +

আরো দেখুন the example in the specification.

+ +

সবিস্তার বিবরণী

+ + + + + + + + + + + + + + + + +
সবিস্তার বিবরণীঅবস্থামন্তব্য
{{SpecName("Battery API")}}{{Spec2("Battery API")}}প্রাথমিক সংজ্ঞা
+ +

উপযুক্তত ব্রাউজার

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
বৈশিষ্ট্যসূচকChromeFirefox (Gecko)Internet ExplorerOperaSafari
মৌলিক সমর্থন{{CompatChrome(39.0)}}{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}
+ {{CompatGeckoDesktop("16")}}[1]
+ {{CompatGeckoDesktop("43")}}[3]
+ {{CompatGeckoDesktop("52")}}[4]		{{CompatNo}}25{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
বৈশিষ্ট্যসূচকAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
মৌলিক সমর্থন{{CompatNo}}{{CompatChrome(40.0)}} +

{{CompatGeckoMobile("10")}} {{property_prefix("moz")}}
+ {{CompatGeckoMobile("16")}}[1]
+ {{CompatGeckoMobile("43")}}[3]
+ {{CompatGeckoMobile("52")}}[3]

+ 		{{CompatNo}}25[2]{{CompatNo}}{{CompatChrome(42.0)}}[2]
+
+ +

[1] Disabled by default in Firefox 10.0, but can be enabled setting the preference dom.battery.enabled to true. Starting with Firefox 11.0, mozBattery is enabled by default. The ব্যাটারি API is currently supported on Android, Windows, and Linux with UPower installed. Support for MacOS is available starting with Gecko 18.0 {{geckoRelease("18.0")}}. Firefox also provides support for the deprecated {{domxref("navigator.battery")}}.

+ +

[2] Values for {{domxref("BatteryManager.chargingTime")}} and {{domxref("BatteryManager.dischargingTime")}} are always equal to Infinity.

+ +

[3] The new promise-based syntax for {{domxref("Navigator.getBattery()")}} is supported from Firefox 43 onwards.

+ +

[4] From Firefox 52 onwards, the ব্যাটারি অবস্থা API is only available in chrome/privileged code.

+ +

আরো দেখুন

+ + diff --git a/files/bn/web/api/event/index.html b/files/bn/web/api/event/index.html new file mode 100644 index 0000000000..3f71223347 --- /dev/null +++ b/files/bn/web/api/event/index.html @@ -0,0 +1,216 @@ +--- +title: Event +slug: Web/API/Event +tags: + - API + - Constructor + - DOM + - Event + - Interface + - NeedsTranslation + - Reference + - TopicStub + - UI + - listener +translation_of: Web/API/Event +--- +

{{APIRef("DOM")}}

+ +

The Event interface represents an event which takes place in the DOM.

+ +

An event can be triggered by the user action e.g. clicking the mouse button or tapping keyboard, or generated by APIs to represent the progress of an asynchronous task. It can also be triggered programmatically, such as by calling the HTMLElement.click() method of an element, or by defining the event, then sending it to a specified target using EventTarget.dispatchEvent().

+ +

There are many types of events, some of which use other interfaces based on the main Event interface. Event itself contains the properties and methods which are common to all events.

+ +

Many DOM elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them. Event-handlers are usually connected (or "attached") to various HTML elements (such as <button>, <div>, <span>, etc.) using EventTarget.addEventListener(), and this generally replaces using the old HTML event handler attributes. Further, when properly added, such handlers can also be disconnected if needed using removeEventListener().

+ +
+

Note: One element can have several such handlers, even for the exact same event—particularly if separate, independent code modules attach them, each for its own independent purposes. (For example, a webpage with an advertising-module and statistics-module both monitoring video-watching.)

+
+ +

When there are many nested elements, each with its own handler(s), event processing can become very complicated—especially where a parent element receives the very same event as its child elements because "spatially" they overlap so the event technically occurs in both, and the processing order of such events depends on the Event bubbling and capture settings of each handler triggered.

+ +

Interfaces based on Event

+ +

Below is a list of interfaces which are based on the main Event interface, with links to their respective documentation in the MDN API reference.

+ +

Note that all event interfaces have names which end in "Event".

+ +
+ +
+ +

Constructor

+ +
+
{{domxref("Event.Event", "Event()")}}
+
Creates an Event object, returning it to the caller.
+
+ +

Properties

+ +
+
{{domxref("Event.bubbles")}} {{readonlyinline}}
+
A boolean indicating whether or not the event bubbles up through the DOM.
+
{{domxref("Event.cancelBubble")}}
+
A historical alias to {{domxref("Event.stopPropagation()")}}. Setting its value to true before returning from an event handler prevents propagation of the event.
+
{{domxref("Event.cancelable")}} {{readonlyinline}}
+
A boolean indicating whether the event is cancelable.
+
{{domxref("Event.composed")}} {{ReadOnlyInline}}
+
A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
+
{{domxref("Event.currentTarget")}} {{readonlyinline}}
+
A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent. It's possible this has been changed along the way through retargeting.
+
{{domxref("Event.deepPath")}} {{non-standard_inline}}
+
An {{jsxref("Array")}} of DOM {{domxref("Node")}}s through which the event has bubbled.
+
{{domxref("Event.defaultPrevented")}} {{readonlyinline}}
+
Indicates whether or not the call to {{domxref("event.preventDefault()")}} canceled the event.
+
{{domxref("Event.eventPhase")}} {{readonlyinline}}
+
Indicates which phase of the event flow is being processed.
+
{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
The explicit original target of the event (Mozilla-specific.)
+
{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
The original target of the event, before any retargetings. (Mozilla-specific.)
+
{{domxref("Event.returnValue")}}
+
A historical property introduced by Internet Explorer and eventually adopted into the DOM specification in order to ensure existing sites continue to work. Ideally, you should try to use {{domxref("Event.preventDefault()")}} and {{domxref("Event.defaultPrevented")}} instead, but you can use returnValue if you choose to do so.
+
{{domxref("Event.srcElement")}} {{non-standard_inline}}
+
A non-standard alias (from old versions of Microsoft Internet Explorer) for {{domxref("Event.target")}}. Some other browsers are starting to support it for web compatibility purposes.
+
{{domxref("Event.target")}} {{readonlyinline}}
+
A reference to the target to which the event was originally dispatched.
+
{{domxref("Event.timeStamp")}} {{readonlyinline}}
+
The time at which the event was created (in milliseconds). By specification, this value is time since epoch—but in reality, browsers' definitions vary. In addition, work is underway to change this to be a {{domxref("DOMHighResTimeStamp")}} instead.
+
{{domxref("Event.type")}} {{readonlyinline}}
+
The name of the event. Case-insensitive.
+
{{domxref("Event.isTrusted")}} {{readonlyinline}}
+
Indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, like {{domxref("Event.initEvent")}}).
+
+ +

Obsolete properties

+ +
+
{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}
+
Obsolete; use {{domxref("Event.composed", "composed")}} instead. (A {{jsxref("Boolean")}} indicating whether the given event will bubble across through the shadow root into the standard DOM.)
+
+ +

Methods

+ +
+
{{domxref("Event.createEvent()")}} {{deprecated_inline}}
+
+

Creates a new event, which must then be initialized by calling its initEvent() method.

+
+
{{domxref("Event.composedPath()")}}
+
Returns the event’s path (objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its {{domxref("ShadowRoot.mode")}} closed.
+
+ +
+
{{domxref("Event.initEvent()")}} {{deprecated_inline}}
+
Initializes the value of an Event created. If the event has already been dispatched, this method does nothing.
+
{{domxref("Event.preventDefault()")}}
+
Cancels the event (if it is cancelable).
+
{{domxref("Event.stopImmediatePropagation()")}}
+
For this particular event, prevent all other listeners from being called. This includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).
+
{{domxref("Event.stopPropagation()")}}
+
Stops the propagation of events further along in the DOM.
+
+ +

Obsolete methods

+ +
+
{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}
+
Non-standard; use {{domxref("Event.defaultPrevented")}} instead. (Returns the value of {{domxref("Event.defaultPrevented")}}.)
+
{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Obsolete; use {{domxref("event.stopPropagation")}} instead. (Prevents the event from bubbling.)
+
{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Obsolete; use {{domxref("event.stopPropagation")}} instead.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}{{Spec2('DOM WHATWG')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.Event")}}

+ +

See also

+ + diff --git a/files/bn/web/api/event/preventdefault/index.html b/files/bn/web/api/event/preventdefault/index.html new file mode 100644 index 0000000000..9c14bd2e12 --- /dev/null +++ b/files/bn/web/api/event/preventdefault/index.html @@ -0,0 +1,160 @@ +--- +title: Event.preventDefault() +slug: Web/API/Event/preventDefault +tags: + - b +translation_of: Web/API/Event/preventDefault +--- +
{{apiref("DOM")}}
+ +

The {{domxref("Event")}} interface's preventDefault() method tells the {{Glossary("user agent")}} that if the event does not get explicitly handled, its default action should not be taken as it normally would be. The event continues to propagate as usual, unless one of its event listeners calls {{domxref("Event.stopPropagation", "stopPropagation()")}} or {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}, either of which terminates propagation at once.

+ +

As noted below, calling preventDefault() for a non-cancelable event, such as one dispatched via {{domxref("EventTarget.dispatchEvent()")}}, without specifying cancelable: true has no effect.

+ +

Syntax

+ +
event.preventDefault();
+
+ +

Examples

+ +

Blocking default click handling

+ +

Toggling a checkbox is the default action of clicking on a checkbox. This example demonstrates how to prevent that from happening:

+ +

JavaScript

+ +
document.querySelector("#id-checkbox").addEventListener("click", function(event) {
+         document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>";
+         event.preventDefault();
+}, false);
+ +

HTML

+ +
<p>Please click on the checkbox control.</p>
+
+<form>
+  <label for="id-checkbox">Checkbox:</label>
+  <input type="checkbox" id="id-checkbox"/>
+</form>
+
+<div id="output-box"></div>
+ +

Result

+ +

{{EmbedLiveSample("Blocking_default_click_handling")}}

+ +

Stopping keystrokes from reaching an edit field

+ +

The following example demonstrates how invalid text input can be stopped from reaching the input field with preventDefault(). Nowadays, you should usually use native HTML form validation instead.

+ +

HTML

+ +

Here's the form:

+ +
<div class="container">
+  <p>Please enter your name using lowercase letters only.</p>
+
+  <form>
+    <input type="text" id="my-textbox">
+  </form>
+</div>
+ +

CSS

+ +

We use a little bit of CSS for the warning box we'll draw when the user presses an invalid key:

+ +
.warning {
+  border: 2px solid #f39389;
+  border-radius: 2px;
+  padding: 10px;
+  position: absolute;
+  background-color: #fbd8d4;
+  color: #3b3c40;
+}
+ +

JavaScript

+ +

And here's the JavaScript code that does the job. First, listen for {{domxref("Element/keypress_event", "keypress")}} events:

+ +
var myTextbox = document.getElementById('my-textbox');
+myTextbox.addEventListener('keypress', checkName, false);
+
+ +

The checkName() function, which looks at the pressed key and decides whether to allow it:

+ +
function checkName(evt) {
+  var charCode = evt.charCode;
+  if (charCode != 0) {
+    if (charCode < 97 || charCode > 122) {
+      evt.preventDefault();
+      displayWarning(
+        "Please use lowercase letters only."
+        + "\n" + "charCode: " + charCode + "\n"
+      );
+    }
+  }
+}
+
+ +

The displayWarning() function presents a notification of a problem. It's not an elegant function but does the job for the purposes of this example:

+ +
var warningTimeout;
+var warningBox = document.createElement("div");
+warningBox.className = "warning";
+
+function displayWarning(msg) {
+  warningBox.innerHTML = msg;
+
+  if (document.body.contains(warningBox)) {
+    window.clearTimeout(warningTimeout);
+  } else {
+    // insert warningBox after myTextbox
+    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
+  }
+
+  warningTimeout = window.setTimeout(function() {
+      warningBox.parentNode.removeChild(warningBox);
+      warningTimeout = -1;
+    }, 2000);
+}
+ +

Result

+ +

{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}

+ +

Notes

+ +

Calling preventDefault() during any stage of event flow cancels the event, meaning that any default action normally taken by the implementation as a result of the event will not occur.

+ +

You can use {{domxref("Event.cancelable")}} to check if the event is cancelable. Calling preventDefault() for a non-cancelable event has no effect.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}{{ Spec2('DOM WHATWG') }}
{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}{{ Spec2('DOM2 Events') }}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Event.preventDefault")}}

diff --git a/files/bn/web/api/index.html b/files/bn/web/api/index.html new file mode 100644 index 0000000000..3ecae6505c --- /dev/null +++ b/files/bn/web/api/index.html @@ -0,0 +1,15 @@ +--- +title: ওয়েব API ইন্টারফেস +slug: Web/API +tags: + - API + - Landing + - Reference + - Référence(2) + - TopicStub + - Web +translation_of: Web/API +--- +

আপনি যখন জাভাস্ক্রিট ব্যাবহার করে ওয়েব এর জ্ন্য কোড করবেন, আপনার জ্ন্য অনেকগুলি উপোযগী API আছে। নিম্নে সবগুলো interface এর লিংক দেওয়া হল।

+ +
{{APIListAlpha}}
diff --git a/files/bn/web/api/indexeddb_api/index.html b/files/bn/web/api/indexeddb_api/index.html new file mode 100644 index 0000000000..099bec9668 --- /dev/null +++ b/files/bn/web/api/indexeddb_api/index.html @@ -0,0 +1,182 @@ +--- +title: ইনডেক্সডডিবি +slug: Web/API/IndexedDB_API +tags: + - NeedsReview + - ইনডেক্সডডিবি + - এপিআই + - ডাটাবেজ + - রেফারেন্স +translation_of: Web/API/IndexedDB_API +--- +
+

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

+
+ +

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

+ +

ইনডেক্সডডিবি(IndexedDB)  সিনক্রোনাস এবং এসিনক্রোনাস এক্সেস এর জন্য পৃথক এপিআই প্রদান করে। সিনক্রোনাস এপিআই কেবল ওয়েব ওয়ার্কার   এর ভিতরে ব্যবহারের জন্য কিন্তু এটি এখনও কোন ব্রাউজারে বাস্তবায়ন করা হয়নি। এসিনক্রোনাস এপিআই ওয়েবওয়ার্কার এর ভিতরে ও বাইরে উভয় জায়গাতে কাজ করে,কিন্তু ফায়ারফক্সে এখনও বাস্তবায়ন হয়নি।

+ +

এসিনক্রোনাস এপিআই

+ +

এসিনক্রোনাস এপিআই মেথড কলিং থ্রেডকে ব্লক না করে তা রিটার্ন করে। একটি  ডাটাবেজ এ এসিনক্রোনাস প্রবেশাধিকার নেওয়ার জন্য ,একটি   window অবজেক্টের   indexedDB এট্রিবিউট এর  open() কল করুন। এই মেথড একটি  {{domxref("IDBRequest")}} অবজেক্ট রিটার্ন করে ;এসিনক্রোনাস অপারেশনগুলো  এপ্লিকেশন এর সাথে যোগাযোগ করে {{domxref("IDBRequest")}} অবজেক্টগুলোর ইভেন্ট চালুর মাধ্যমে।

+ +
+

নোট:   indexedDB অবজেক্ট পুরাতন ব্রাউজার ভার্সনগুলোতে পূর্বনির্ধারিত (property mozIndexedDB  Gecko < 16 এ , webkitIndexedDB  Chrome এ, এবং  msIndexedDB  IE 10 ে).

+
+ +

এসিনক্রোনাস ইনডেক্সডডিবি (IndexedDB) এপিআই এর ইন্টারফেসগুলো নিচের ন্যায়:

+ +
+
{{domxref("IDBFactory")}}
+
ডাটাবেজে প্রবেশাধিকার প্রদান করে। গ্লোবাল অবজেক্ট  indexedDB এই ইন্টারফেসটি বাস্তবায়ন করছে এবং এই এপিআই এর জন্য এটি প্রবেশমুখ।
+
{{domxref("IDBCursor")}}
+
অবজেক্ট স্টোরসমূহ এবং ইনডেক্সসমূহের উপর বারবার ইটারেট করে।
+
{{domxref("IDBCursorWithValue")}}
+
অবজেক্ট স্টোরসমূহ এবং ইনডেক্সসমূহ বারবার ইটারেট করে এবং কার্সর এর বর্তমান মান রিটার্ন করে।
+
{{domxref("IDBDatabase")}}
+
ডাটাবেজের একটি সংযোগ বুঝায়। এটি একমাত্র রাস্তা যা দিয়ে ডাটাবেজে লেনদেন সম্ভব।
+
{{domxref("IDBEnvironment")}}
+
একটি ক্লায়েন্ট-সাইড ডাটাবেজে প্রবেশাধিকার প্রদান করে। এটি {{ domxref("window") }} এবং{{ domxref("worker") }} অবজেক্টসমূহদ্বারা বাস্তবায়িত হচ্ছে।
+
{{domxref("IDBIndex")}}
+
একটি ইনডেক্স এর মেটাডাটাতে প্রবেশাধিকার প্রদান করে।
+
{{domxref("IDBKeyRange")}}
+
কীসমূহের একটি সীমা সংজ্ঞায়িত করে।
+
{{domxref("IDBObjectStore")}}
+
একটি অবজেক্ট স্টোরকে প্রতিনিধিত্ব করে।
+
{{domxref("IDBOpenDBRequest")}}
+
একটি ডাটাবেজ খোলার অনুরোধকে প্রতিনিধিত্ব করে।
+
{{domxref("IDBRequest")}}
+
ডাটাবেজ এবং ডাটাবেজ অবজেক্টসমূহে এসিনক্রোনাস অনুরোধগুলোর ফলাফলে প্রবেশাধিকার প্রদান করে। এটি হল যেটি আপনি এসিনক্রোনাস মেথডকে কল করার ফলে পান।
+
{{domxref("IDBTransaction")}}
+
একটি ডাটাবেজ ট্রানসেকশনকে প্রতিনিধিত্ব করে। আপনি একটি ডাটাবেজে ট্রানসেকশন তৈরী করেন,স্কোপটি বলে দিলে(যেমন কোন অবজেক্ট স্টোরগুলোতে আপনি প্রবেশাধিকার চাচ্ছেন) এবং কি ধরণের প্রবেশাধিকার চাচ্ছেন( কেবলমাত্র পাঠ নাকি লেখাসহ)।
+
+ + + +

স্পেসিফেকেশন এর একটি প্রাথমিক ভার্সনে এই মুছে ফেলা ইন্টারফেসগুলো সংজ্ঞায়িত ছিল। কিন্তু এগুলো এখনো নথিবদ্ধ করে রাখা হয়েছে যাতে আপনার পূর্বে লেখা কোন কোড পরিবর্তনের প্রয়োজন হয়।

+ +
+
{{domxref("IDBVersionChangeRequest")}}
+
একটি ডাটাবেজের ভার্সন পরিবর্তনের অনুরোধকে প্রতিনিধিত্ব কওরে। ডাটাবেজের ভার্সন পরিবর্তনের উপায় সম্প্রতি বদলানো হয়েছে ({{domxref("IDBFactory.open")}} কে কল করে এবং {{domxref("IDBDatabase.setVersion")}}কে কল না করে), এবং {{domxref("IDBOpenDBRequest")}} ইন্টারফেসটি এখন মুছে ফেলা {{domxref("IDBVersionChangeRequest")}} এর কাজ করতে পারে।
+
{{domxref("IDBDatabaseException")}}  {{ obsolete_inline() }}
+
ডাটাবেজ অপারেশন এর সময় প্রাপ্ত এক্সসেপশন শর্তগুলোকে প্রতিনিধিত্ব করে।
+
+ + + +
+

নোট:  এই  এপিআই এর একটি সিনক্রোনাস ভার্সন   আছে,যা  কোন ব্রাউজার এখনও বাস্তবায়িত হয়নি। এটি  কোন ব্রাউজারে এখনও বাস্তবায়িত হয় নি। এটি  ওয়েব ওয়ার্কার  এর সাথে ব্যবহারের জন্য তৈরী।

+
+ +

 স্টোরেজ সীমা

+ +

একক ডাটাবেজ এর আইটেম সাইজ এর কোন সীমা নেই। কিন্তু ইনডেক্সডডিবি (IndexedDB) ডাটাবেজ সাইজ এর একটি সীমা থাকতে পারে। এই সীমা(এবং কিভাবে ইউজার ইন্টারফেস তা ব্যবহার করবে) তা এক ব্রাউজার ও অন্য ব্রাউজার এ ভিন্ন হতে পারে।

+ + + +

উদাহারণ

+ + + +

ব্রাউজার সামঞ্জস্যতা

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
বৈশিষ্ট্যক্রোমফায়ারফক্স(গেকো )ইন্টারনেট  এক্সপ্লোরারওপেরা +

সাফারি

+ +

(ওয়েবকিট)

+
এসিনক্রোনাস এপিআই +

১১.0 {{ property_prefix("webkit") }}
+ 24

+ 		{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		১০১৭{{ CompatNo() }}
সিনক্রোনাস এপিআই
+ (ওয়েব ওয়ার্কার এর সাথে ব্যবহৃত)		{{ CompatNo() }}{{ CompatNo() }}
+ See {{ bug(701634) }}		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
বৈশিষ্ট্যএন্ড্রয়েডফায়ারফক্স মোবাইল (গেকো) +

আই-ই

+ +

ফোন

+ 		ওপেরা মোবাইলসাফারি মোবাইল
এসিনক্রোনাস  এপিআই৪.৪{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		১০১৭{{ CompatNo() }}
+
+ +
+

নোট :কিছু ব্রাউজার এখনও ইনডেক্সডডিবি সাপোর্ট না করলেও ওয়েব সিকুয়েল (webSQL)সাপোর্ট করে,  যেমন সাফারি/ওয়েবকিট ডেস্কটপ ও আইওএস। এই সমস্যার একটি সমাধান হচ্ছে  ইনডেক্সডডিবি পলিফিল বা শিম  ব্যবহার করা যা অসর্মথিত ব্রাউজার এর ক্ষেত্রে ওয়েবসিকুয়েল এ  ফল ব্যাক করে।

+
+ +

আরও দেখুন

+ + diff --git a/files/bn/web/api/inputevent/index.html b/files/bn/web/api/inputevent/index.html new file mode 100644 index 0000000000..3b31b83955 --- /dev/null +++ b/files/bn/web/api/inputevent/index.html @@ -0,0 +1,98 @@ +--- +title: InputEvent +slug: Web/API/InputEvent +translation_of: Web/API/InputEvent +--- +

{{APIRef}}

+ +

InputEvent ইন্টারফেসটি সম্পাদনযোগ্য কন্টেন্টে কোন পরিবর্তন হলে, সে পরিবর্তন সম্পর্কে জানায়।

+ +

প্রোপার্টি

+ +

InputEvent ইন্টারফেসটির কোন প্রোপার্টি নেই।

+ +

মেথড

+ +

InputEvent ইন্টারফেসটির কোন মেথড নেই।

+ +

ইভেন্ট

+ +
+
{{domxref("InputEvent.data")}} {{readOnlyInline}}
+
লেখা বর্ণগুলি নিয়ে একটু {{domxref("DOMString")}} রিটার্ন করে। এই স্ট্রিংটি খালি হতে পারে, যদি পরিবর্তনের ফলে নতুন বর্ণ লেখা না হয়। (যেমন বর্ণ মুছার সময়)
+
{{domxref("InputEvent.isComposing")}} {{readOnlyInline}}
+
compositionstart এর আগে এবং compositionend এর পরে একটু বুলিয়ান ভ্যালু নিয়ে ইভেন্ট ফায়ার করে।
+
+ +

ব্রাউজার সমর্থন

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ফিচারক্রোমফায়ারফক্স (গেকো)ইন্টারনেট এক্সপ্লোরারঅপেরাসাফারি (ওয়েবকিট)
data{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
isComposing{{ CompatNo() }}{{ CompatGeckoDesktop("31.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ফিচারঅ্যান্ড্রয়েডফায়ারফক্স মোবাইল (গেকো)ইন্টারনেট এক্সপ্লোরার ফোনঅপেরা মোবাইলসাফারি মোবাইল
data{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
isComposing{{ CompatNo() }}{{ CompatGeckoMobile("31.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

আরও দেখুন

+ + diff --git a/files/bn/web/api/stylesheet/index.html b/files/bn/web/api/stylesheet/index.html new file mode 100644 index 0000000000..83286f4960 --- /dev/null +++ b/files/bn/web/api/stylesheet/index.html @@ -0,0 +1,72 @@ +--- +title: স্টাইলশীট +slug: Web/API/StyleSheet +tags: + - API + - CSS + - CSSOM + - DOM + - DOM Reference + - NeedsReview + - Reference + - WebAPI +translation_of: Web/API/StyleSheet +--- +
+ {{APIRef}}
+

একটি অবজেক্ট, যেটি একক স্টাইল শীট তথা StyleSheet ইন্টারফেস বর্ণনা করে। সিএসএস স্টাইল শীট সমূহ আরও বিশেষ ধরণের {{domxref("CSSStyleSheet")}} ইন্টারফেস বাস্তবায়ন করবে।

+

প্রপার্টি সমূহ

+
+
+ {{domxref("StyleSheet.disabled")}}
+
+ এটি একটি {{domxref("Boolean")}} মান, যেটা বর্ণনা করবে যে বর্তমান স্টাইলশীট টি প্রয়োগ করা হয়েছে কি না।
+
+ {{domxref("StyleSheet.href")}} {{readonlyInline}}
+
+ এটি একটি {{domxref("DOMString")}} প্রদান করে, যেটার মধ্যে স্টাইলশীটের অবস্থান লেখা থাকবে।
+
+ {{domxref("StyleSheet.media")}} {{readonlyInline}}
+
+ এটি একটি {{domxref("MediaList")}} দেয়, যার মধ্যে স্টাইল তথ্যের কাঙ্ক্ষিত লক্ষ্যের মাধ্যম বর্ণনা করা থাকে।
+
+ {{domxref("StyleSheet.ownerNode")}} {{readonlyInline}}
+
+ এটা একটি {{domxref("Node")}} প্রদান করে, যা বর্তমান ডকুমেন্টের সাথে এই স্টাইলশীটকে যুক্ত করে।
+
+ {{domxref("StyleSheet.parentStyleSheet")}} {{readonlyInline}}
+
+ বর্তমানটির সাথে এটি আরও একটি {{domxref("StyleSheet")}} দেয় (যদি থাকে); যদি কোন স্টাইলশীট না থাকে, তাহলে null প্রদান করে।
+
+ {{domxref("StyleSheet.title")}} {{readonlyInline}}
+
+ বর্তমান স্টাইলশীটের শিরোনামের জন্য এটা {{domxref("DOMString")}} প্রদান করে।
+
+ {{domxref("StyleSheet.type")}}{{readonlyInline}}
+
+ বর্তমান স্টাইলশীটের ভাষা উপস্থাপন করার জন্য এটা {{domxref("DOMString")}} প্রদান করে।
+
+

বৈশিষ্ট্য

+ + + + + + + + + + + + + + + + + + +
বৈশিষ্ট্যঅবস্থামন্তব্য
{{ SpecName('CSSOM', '#stylesheet', 'StyleSheet') }}{{ Spec2('CSSOM') }}{{ SpecName('DOM2 Style') }} এরপর থেকে কোন পরিবর্তন হয়নি।
{{ SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-StyleSheet', 'StyleSheet') }}{{ Spec2('DOM2 Style') }}প্রাথমিক সংজ্ঞা।
+

আরও দেখুন

+ diff --git a/files/bn/web/css/css_animations/index.html b/files/bn/web/css/css_animations/index.html new file mode 100644 index 0000000000..7c953b2359 --- /dev/null +++ b/files/bn/web/css/css_animations/index.html @@ -0,0 +1,136 @@ +--- +title: CSS Animations +slug: Web/CSS/CSS_Animations +tags: + - CSS + - CSS Animations + - Experimental + - Overview + - Reference +translation_of: Web/CSS/CSS_Animations +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

CSS Animations is a module of CSS that defines how to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, their number of repetitions, and how they repeat.

+ +

Reference

+ +

CSS Properties

+ +
+ +
+ +

CSS At-rules

+ +
+ +
+ +

Guides

+ +
+
Detecting CSS animation support
+
Describes a technique for detecting if the browser supports CSS animations.
+
Using CSS animations
+
Step-by-step tutorial about how to create animations using CSS, this article describes each relevant CSS property and at-rule and explains how they interact.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Animations') }}{{ Spec2('CSS3 Animations') }}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ 43.0		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1012{{property_prefix("-o")}}
+ 12.10[2]		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1 {{property_prefix("-webkit")}} [1]
+ 4.0 {{property_prefix("-webkit")}}		{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+
+ +

[1] Partial support: {{cssxref("animation-fill-mode")}} property is not supported in Android browser below 2.3.

+ +

[2] See the release notes to Opera 12.50.

+ +

See also

+ + + +

 

diff --git a/files/bn/web/css/css_transforms/index.html b/files/bn/web/css/css_transforms/index.html new file mode 100644 index 0000000000..142b07aed1 --- /dev/null +++ b/files/bn/web/css/css_transforms/index.html @@ -0,0 +1,152 @@ +--- +title: CSS Transforms +slug: Web/CSS/CSS_Transforms +tags: + - CSS + - CSS Reference + - Experimental + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Transforms +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.

+ +

Reference

+ +

CSS Properties

+ +
+ +
+ +

Guides

+ +
+
Using CSS transforms
+
Step-by-step tutorial about how to transform elements styled with CSS.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transforms') }}{{ Spec2('CSS3 Transforms') }}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support +

{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ 36

+ 		{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("16.0")}}[2]		9.0{{property_prefix("-ms")}}[3]
+ 10.0		10.5{{property_prefix("-o")}}
+ 12.10
+ 15.0{{property_prefix("-webkit")}}
+ 23		3.1{{property_prefix("-webkit")}}
3D Support12.0{{property_prefix("-webkit")}}
+ 36		10.0{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10.015.0{{property_prefix("-webkit")}}
+ 23		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatAndroid(2.1)}}{{property_prefix("-webkit")}}[4]{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+ 11.0{{property_prefix("-webkit")}}[5]		11.5{{property_prefix("-webkit")}}3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
3D Support{{CompatAndroid(3.0)}}{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{ property_prefix("-webkit")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}22{{property_prefix("-webkit")}}3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+
+ +

[1] Gecko 14.0 removed the experimental support for skew(), but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.

+ +

[2] Before Firefox 16, the translation values of matrix() and matrix3d() could be {{cssxref("<length>")}}, in addition to the standard {{cssxref("<number>")}}.

+ +

[3] Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.

+ +

Internet Explorer 9.0 or earlier has no support for 3D transforms, mixing 3D and 2D transform functions. such as -ms-transform:rotate(10deg) translateZ(0); will prevent the entire property from being applied.

+ +

[4] Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a -webkit-transform.

+ +

[5] Internet Explorer 11.0 supports the {{property_prefix("-webkit")}} prefixed variant as an alias for the default one.

+ +

 

diff --git a/files/bn/web/css/element()/index.html b/files/bn/web/css/element()/index.html new file mode 100644 index 0000000000..4308a2ea5b --- /dev/null +++ b/files/bn/web/css/element()/index.html @@ -0,0 +1,113 @@ +--- +title: element +slug: Web/CSS/element() +translation_of: Web/CSS/element() +--- +
+ {{CSSRef}}{{SeeCompatTable}}
+

সারাংশ

+

CSS  ফাংশন এলিমে‍‌‌‍ন্টটি একটি{ {xref_cssimage}}  এর মান কে সংজ্ঞায়িত করে  যা একটি  arbitrary HTML  এলিমেন্ট থেকে উৎপন্ন হয়।এই ছবিটি জীবন্ত,  অর্থাৎ যদি HTML উপাদান পরিবর্তন করা হয় ,তবে ফলপ্রসূ মান ব্যবহারিত সিএসএস বৈশিষ্ট্যগুলো স্বয়ংক্রিয়ভাবে আধুনিকায়িত হয়ে যাবে ।

+

এটি ব্যবহার এর জন্য একটি বিশেষ দৃশ্য হবে HTML এ ছবি রেনডার করা'{{HTMLELEMENT("canvas")}} , তারপর এটিকে ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করবে ।

+

গেকো ব্রাউজার এ আপনি নন- স্ট্যান্ডর্ডটি ব্যবহার করতে পারেন ।  {{domxref("document.mozSetImageElement()")}} এই পদ্ধতিটি একটি দেয়া সিএসএস ব্যাকগ্রাউন্ড এর ব্যাকগ্রাউন্ড হিসেবে ব্যবহৃত হওয়া এলিমেন্ট এর পরিবর্তন করে।

+

পদবিন্যাস

+
element( id )
+

যেখানে,

+
+
+ id
+
+ একটি এলিমেন্ট এর ID কে ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করতে ,বিশেষ করে এলিমেন্ট এর উপর HTML attribute #id ব্যবহার  করা হয়।
+
+

উদাহরন

+

এই উদাহরনগুলো viewed live এ দেখা যাবে builds of Firefox এ যা -moz-element() সহায়তা করে।

+

কিছু বাস্তব উদাহরন

+

এই উদাহরনটি একটি লুকানো {{HTMLElement("div")}} কে ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করে।ব্যাকগ্রাউন্ড এলিমেন্টটি একটি নতি ব্যবহার করে কিন্তু সেই সাথে টেক্সট ও অন্তর্ভুক্ত করে যা ব্যাকগ্রাউন্ড এর অংশ হিসেবে রেনডার করা হয়।

+
<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
+  <p>This box uses the element with the #myBackground1 ID as its background!</p>
+</div>
+
+<div style="overflow:hidden; height:0;">
+  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
+  <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
+  </div>
+</div>
+

 {{HTMLElement("div")}} এলিমেন্টের সাথে  ID "myBackground1" কনটেন্ট এর  ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করা হয় যেখানে "This box uses the element with the #myBackground1 ID as its background!" এই অনুছেদটি অন্তর্ভুক্ত করা হয়।

+

example1.png

+

আরও কিছু অদ্ভুত উদাহরন

+

এই উদাহরনটি একটি লুকানো {{HTMLElement("button")}} এলিমেন্ট কে পুনরাবৃওি নমুনায় ব্যাকগ্রাউনড হিসেবে ব্যবহার করে।এটি প্রমান করে যে আপনি ব্যাকগ্রাউন্ড হিসেবে arbitrary এলিমেন্ট ব্যবহার করতে পারেন কিন্তু ভাল নকশা অনুশীলনে ততটা প্রয়োজনীয় নয়।

+
<div style="width:400px; height:100px; background:-moz-element(#myBackground2);">
+</div>
+
+<div style="overflow:hidden; height:0;">
+  <button id="myBackground2" type="button">Evil button!</button>
+</div>
+
+

example2.png

+

নির্দিষ্টকরন

+ + + + + + + + + + + + + + + +
SpecificationStatusComment
CSS Image Values and Replaced Content Level 4{{Spec2('CSS4 Images')}}Actually now deferred to CSS4.
+

ব্রাউজার সুসঙ্গত

+

{{CompatibilityTable}}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support4.0 (2.0) [*] {{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support4.0 (2.0) [*] {{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+

[*] ব্যবহৃত {{cssxref("background")}} এবং {{cssxref("background-image")}} সিএসএস বৈশিষ্ট্গুলোর জন্য সিমাবদ্ধ।

+

আরও দেখুন

+ diff --git a/files/bn/web/css/getting_started/color/index.html b/files/bn/web/css/getting_started/color/index.html new file mode 100644 index 0000000000..fd6c5a64e4 --- /dev/null +++ b/files/bn/web/css/getting_started/color/index.html @@ -0,0 +1,280 @@ +--- +title: রং +slug: Web/CSS/Getting_Started/Color +tags: + - CSS + - Example + - Guide + - NeedsReview +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +--- +

{{ CSSTutorialTOC() }}

+

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

+

তথ্য: রং (color)

+

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

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

 

+
+
+ বিস্তারিত
+

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

+ + + + + + + + + + + + + + + +
dodgerblue peachpuff tan firebrick aquamarine 
+

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

+
+

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

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

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

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

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

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

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

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

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

+

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

+ 
rgb(128, 0, 0)
+

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

+
+

 

+

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

+

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

+

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

+
+
+ উদাহরণ
+

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

+ 
background-color: #fffff4;
+
+

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

+ 
background-color: #f4f4f4;
+
+
+

 

+

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

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

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

+

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

+

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

+
+

এরপর কি?

+


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

diff --git a/files/bn/web/css/getting_started/how_css_works/index.html b/files/bn/web/css/getting_started/how_css_works/index.html new file mode 100644 index 0000000000..652802841f --- /dev/null +++ b/files/bn/web/css/getting_started/how_css_works/index.html @@ -0,0 +1,126 @@ +--- +title: কিভাবে CSS কাজ করে +slug: Web/CSS/Getting_Started/How_CSS_works +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - NeedsReview + - Web +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

{{ CSSTutorialTOC() }}

+ +

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

+ +

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

+ +

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

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

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

+ +

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

+ +

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

+ +

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

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

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

+ +

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

+ +

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

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

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

+ +

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

+ +

DOM Inspector ব্যাবহার

+ +

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

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

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

    + +

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

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

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

    + +

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

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

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

    + +

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

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

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

+ +
+
Possible solution
+ +

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

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

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

+ +

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

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

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

+ +

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

diff --git a/files/bn/web/css/getting_started/index.html b/files/bn/web/css/getting_started/index.html new file mode 100644 index 0000000000..7b53c8c554 --- /dev/null +++ b/files/bn/web/css/getting_started/index.html @@ -0,0 +1,27 @@ +--- +title: যেভাবে শুরু করবেন (CSS টিউটোরিয়াল) +slug: Web/CSS/Getting_Started +translation_of: Learn/CSS/First_steps +--- +

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

+

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

+ +

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

+

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

+

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

+

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

+

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

+

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

+

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

+

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

+

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

+

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

+

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

+
    +
  1. JavaScript (জাভাস্ক্রিপ্ট)
    2. +
  2. SVG গ্রাফিক্স
    3. +
  3. XML ডাটা
    4. +
  4. XBL বাইন্ডিং
    5. +
  5. XUL ইউজার ইন্টারফেস
    6. +
diff --git a/files/bn/web/css/getting_started/readable_css/index.html b/files/bn/web/css/getting_started/readable_css/index.html new file mode 100644 index 0000000000..07801c10fa --- /dev/null +++ b/files/bn/web/css/getting_started/readable_css/index.html @@ -0,0 +1,132 @@ +--- +title: Readable CSS +slug: Web/CSS/Getting_Started/Readable_CSS +tags: + - NeedsReview +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +--- +

{{ CSSTutorialTOC() }}

+

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

+

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

+

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

+

সাদা স্থান

+

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

+

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

+

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

+

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

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

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

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

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

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

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

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

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

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

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

+

মন্তব্য

+

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

+

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

+

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

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

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

+

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

+

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

+
+
+ উদাহরণ
+

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

+

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

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

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

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

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

+ + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+

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

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

What next?

+

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

diff --git a/files/bn/web/css/getting_started/text_styles/index.html b/files/bn/web/css/getting_started/text_styles/index.html new file mode 100644 index 0000000000..2906e46215 --- /dev/null +++ b/files/bn/web/css/getting_started/text_styles/index.html @@ -0,0 +1,109 @@ +--- +title: টেক্সট স্টাইল +slug: Web/CSS/Getting_Started/Text_styles +tags: + - Beginer + - CSS + - 'CSS:Getting_Started' + - Guide + - NeedsLiveSample + - Web +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +

{{ CSSTutorialTOC() }}

+

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

+

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

+

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

+

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

+ +
+ 
উদাহরণ
+p {font: italic 75%/125% "Comic Sans MS", cursive;}
+
+

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

+

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

+

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

+

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

+
+

ফন্টের আকার

+

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

+

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

+

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

+

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

+

ফন্টের মাপ

+

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

+

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

+

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

+

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

+

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

+

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

+

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

+

সজ্জা

+

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

+

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

+

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

+

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

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

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

+

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

+

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

+

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

+

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

+
+

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

+

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

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

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

+ + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+
+
+ Possible solution
+

Add the following style declaration to the strong rule:

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

 

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

পরবর্তী ?

+

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

diff --git a/files/bn/web/css/getting_started/why_use_css/index.html b/files/bn/web/css/getting_started/why_use_css/index.html new file mode 100644 index 0000000000..2fb9df45a8 --- /dev/null +++ b/files/bn/web/css/getting_started/why_use_css/index.html @@ -0,0 +1,103 @@ +--- +title: কেন CSS ব্যবহার করবেন ? +slug: Web/CSS/Getting_Started/Why_use_CSS +tags: + - NeedsReview +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

{{ CSSTutorialTOC() }}

+ +

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

+ +

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

+ +

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

+ + + +
+
উদাহরণ
+ +

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

+ +

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

+ +

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

+
+ +

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

+ +
+
আরো তথ্য
+ +

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

+ +

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

+ +

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

+
+ +

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

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

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

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

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

+ +

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

+ +
+
Possible solution
+ +

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

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

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

+ +

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

diff --git "a/files/bn/web/css/getting_started/\340\246\250\340\246\207/index.html" "b/files/bn/web/css/getting_started/\340\246\250\340\246\207/index.html" new file mode 100644 index 0000000000..54e48ada6a --- /dev/null +++ "b/files/bn/web/css/getting_started/\340\246\250\340\246\207/index.html" @@ -0,0 +1,354 @@ +--- +title: নির্বাচক সমুহ +slug: Web/CSS/Getting_Started/নই +tags: + - Beginner + - CSS + - CSS Selector + - 'CSS:Getting_Started' + - Example + - Guide + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/Building_blocks/Selectors +--- +

{{ CSSTutorialTOC() }}

+

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

+

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

+

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

+
strong {
+  color: red;
+}
+
+

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

+

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

+

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

+
+

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

+

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

+

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

+
+

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

+

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

+

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

+

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

+

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

+

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

+

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

+

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

+

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

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

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

+

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

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

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

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

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

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

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

+

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

+

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

+
+

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

+

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

+

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

+

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

+

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

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

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

+ +

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

+

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

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

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

+

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

+
+
+ উদাহরণ
+

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

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

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

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

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

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

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

+

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

+

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

+

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

+
+

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

+

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

+

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

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

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

    +

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

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

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

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

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

+

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

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

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

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

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

+

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

+

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

diff --git "a/files/bn/web/css/getting_started/\340\246\262\340\247\207-\340\246\206\340\246\211\340\246\237/index.html" "b/files/bn/web/css/getting_started/\340\246\262\340\247\207-\340\246\206\340\246\211\340\246\237/index.html" new file mode 100644 index 0000000000..40292c7e7e --- /dev/null +++ "b/files/bn/web/css/getting_started/\340\246\262\340\247\207-\340\246\206\340\246\211\340\246\237/index.html" @@ -0,0 +1,301 @@ +--- +title: Layout +slug: Web/CSS/Getting_Started/লে-আউট +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 +--- +

{{ CSSTutorialTOC() }}

+

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

+

তথ্যঃ লে-আউট

+

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

+

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

+

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

+

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

+

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

+

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

+
+
+ উদাহরণ
+

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

+

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

+

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

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

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

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

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

+ + + + + + +
+

(A) The oceans

+
+
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+
+

(B) Numbered paragraphs

+
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+
+

সাইজ ইউনিট

+

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

+

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

+
+
+ উদাহরণ
+

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

+

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

+

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

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

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

+

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

+

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

+
+

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

+

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

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

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

+
+
+ উদাহরণ
+

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

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

ফলাফলঃ

+ + + + + + +
+

(A) The oceans

+
+

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

+
+

Floats

+

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

+

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

+
+
+ উদাহরণ
+

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

+

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

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

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

+ + + + + + +
+

(A) The oceans

+
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+

(B) Numbered paragraphs

+
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+

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

+

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

+

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

+

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

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

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

+
+
+ উদাহরণ
+

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

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

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

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

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

+
+

/

+

\

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

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

+

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

+
+

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

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

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

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

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

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

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

+

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

+

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

+
+
+

(A) The oceans

+
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+

(B) Numbered paragraphs

+
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+

 

+
+ Yellow map pin
+
+
+
+

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

+

এর পরে?

+

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

diff --git a/files/bn/web/css/index.html b/files/bn/web/css/index.html new file mode 100644 index 0000000000..f26dd6aaa0 --- /dev/null +++ b/files/bn/web/css/index.html @@ -0,0 +1,73 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Design + - Landing + - Layout + - NeedsReview + - Reference +translation_of: Web/CSS +--- +

Cascading Style Sheets,  CSS, মূলত  stylesheet সংক্রান্ত ভাষা  যা একটি HTML or XML দিয়ে (অনেক ধরনের XML ভাষা সহ যেমন  SVG অথবা XHTML) লেখা নথির উপস্থাপনায় বাবহারিত হয়ে থাকে । CSS গঠনকৃত উপাদান গুলো পর্দায় , কাগজে, বক্তব্য বা অন্য কোন মাধ্যমে  কিভাবে উপস্থাপিত হবে তা ব্যাখ্যা করে থাকে।

+ +

CSS মুক্ত ওয়েবের একটি কেন্দ্রীয় ভাষা এবং এর প্রমিত  W3C specification  আছে। ধাপে ধাপে বিকশিত হবার কারণে, CSS1 বর্তমানে অপ্রচলিত , CSS2.1 একটি পরামর্শ স্বরূপ হয়ে গিয়েছে এবং CSS3, এখন ছোট ছোট মডিউলে বিভক্ত, যা প্রমিত রূপ লাভের দিকে অগ্রসর হচ্ছে।

+ +
+ + +
+
+

ডকুমেন্টেশন এবং টিউটোরিয়াল

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

সিএসএস এর জন্য টুল সমূহ

+ +
    +
  • W3C এর সিএসএস ভ্যালিডেশন সেবা পরীক্ষা করে দেখে যে যেই সিএসএস টি দেয়া হয়েছে, সেটি ঠিকঠাক আছে কি না বা সিএসএস এর মধ্যে কোন ভুল আছে কি না। এটি একটি অমূল্য ডিবাগিং টুল।
    • +
  • ফায়ারফক্সের ফায়ারবাগ এক্সটেনশন, ডেভেলপারদের কাছে একটি জনপ্রিয় এক্সটেনশন বা টুল। এটি ব্যবহার করে আপনি একটি পাতার এইচটিএমএল, সিএসএস ও জাভাস্ক্রিপ্ট ব্রাউজারের মধ্যেই অনেক সহজে সম্পাদনা করতে পারবেন।
    • +
  • ফায়ারফক্সের ওয়েব ডেভেলপার এক্সটেনশনও লাইভ সাইট সম্পাদনা করার সুবিধা দেয়। এটা সিম্পল কিন্তু ফায়ারবাগের চেয়ে একটু কম সুবিধা দেয়।
    • +
  • ফায়ারফক্সের এডিট সিএসএস এক্সটেনশন সাইডবারে সিএসএস এডিট করার সুবিধা প্রদান করে।
    • +
+
+ +
+ + +
    +
  • সিএসএস টেক্সট-ডেকোরেশন লেভেল ৩ Candidate Recommandation অবস্থায় পৌছেছে। এর অর্থ হচ্ছে text-decoration-* ও text-emphasis-* প্রপার্টি দুটো খুব দ্রুত ব্যবহারোপযোগী হবে। আমাদের অনেক পরিচিত {{cssxref("text-shadow")}}ও এখানে বর্ণনা করা হয়েছে। (১লা আগস্ট, ২০১৩)
    • +
  • গেকো এখন {{cssxref("background-origin")}}: local সমর্থন করে। ফায়ারফক্স ২৫ এর পর থেকে (নাইটলিতে ইতোমধ্যে চলে এসেছে) এটা ব্যবহারযোগ্য হবে। (২৫ জুলাই, ২০১৩)
    • +
  • পয়েন্টার ইভেন্ট সমূহ Candidate Recommandation অবস্থায় পৌছেছে। তার মানে touch-action ও খুব দ্রুত ব্যবহারোপযোগী হবে। বর্তমানে এটা শুধু ইন্টারনেট এক্সপ্লোরার ১০ এ যুক্ত করা হয়েছে। তবে এটা ব্যবহার করার জন্য -ms- প্রেফিক্স ব্যবহার করতে হবে। (৬ মে, ২০১৩)
    • +
  • গেকোর flexible boxes সমর্থন সাম্প্রতিক একটি বৈশিষ্ট্যের সাথে সামঞ্জস্য স্পষ্ট করার জন্য অনুমোদিত হয়েছেঃ ফায়ারফক্স ২৩ থেকে {{cssxref("::before")}} ও {{cssxref("::after")}} ফ্লেক্সের উপকরণ হবে, এবং {{cssxref("order")}} ও {{cssxref("align-self")}} ব্যবহার করে পুনর্বিন্যাস করা যাবে। (৩ মে, ২০১৩)
    • +
+ + + + +
+
+
diff --git a/files/bn/web/events/index.html b/files/bn/web/events/index.html new file mode 100644 index 0000000000..a3abc9b056 --- /dev/null +++ b/files/bn/web/events/index.html @@ -0,0 +1,3011 @@ +--- +title: Event reference +slug: Web/Events +tags: + - NeedsTranslation + - TopicStub + - events +translation_of: Web/Events +--- +

DOM Events are sent to notify code of interesting things that have taken place. Each event is represented by an object which is based on the {{domxref("Event")}} interface, and may have additional custom fields and/or functions used to get additional information about what happened. Events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.

+ +

This article offers a list of events that can be sent; some are standard events defined in official specifications, while others are events used internally by specific browsers; for example, Mozilla-specific events are listed so that add-ons can use them to interact with the browser.

+ +

Most Common Categories

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Resource Events
Event NameFired When
{{event("cached")}}The resources listed in the manifest have been downloaded, and the application is now cached.
{{event("error")}}A resource failed to load.
{{event("abort")}}The loading of a resource has been aborted.
{{event("load")}}A resource and its dependent resources have finished loading.
{{event("beforeunload")}}The window, the document and its resources are about to be unloaded.
{{event("unload")}}The document or a dependent resource is being unloaded.
+ + + + + + + + + + + + + + + + + + + +
Network Events
Event NameFired When
{{event("online")}}The browser has gained access to the network.
{{event("offline")}}The browser has lost access to the network.
+ + + + + + + + + + + + + + + + + + + +
Focus Events
Event NameFired When
{{event("focus")}}An element has received focus (does not bubble).
{{event("blur")}}An element has lost focus (does not bubble).
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Websocket Events
Event NameFired When
openA WebSocket connection has been established.
messageA message is received through a WebSocket.
{{event("error")}}A WebSocket connection has been closed with prejudice (some data couldn't be sent for example).
closeA WebSocket connection has been closed.
+ + + + + + + + + + + + + + + + + + + + + + + +
Session History Events
Event NameFired When
{{event("pagehide")}}A session history entry is being traversed from.
{{event("pageshow")}}A session history entry is being traversed to.
{{event("popstate")}}A session history entry is being navigated to (in certain cases).
+ + + + + + + + + + + + + + + + + + + + + + + +
CSS Animation Events
Event NameFired When
{{event("animationstart")}}A CSS animation has started.
{{event("animationend")}}A CSS animation has completed.
{{event("animationiteration")}}A CSS animation is repeated.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CSS Transition Events
Event NameFired When
{{event("transitionstart")}}A CSS transition has actually started (fired after any delay).
{{event("transitioncancel")}}A CSS transition has been cancelled.
{{event("transitionend")}}A CSS transition has completed.
{{event("transitionrun")}}A CSS transition has began running (fired before any delay starts).
+ + + + + + + + + + + + + + + + + + + +
Form Events
Event NameFired When
{{event("reset")}}The reset button is pressed
{{event("submit")}}The submit button is pressed
+ + + + + + + + + + + + + + + + + + + +
Printing Events
Event NameFired When
{{event("beforeprint")}}The print dialog is opened
{{event("afterprint")}}The print dialog is closed
+ + + + + + + + + + + + + + + + + + + + + + + +
Text Composition Events
Event NameFired When
{{event("compositionstart")}}The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).
{{event("compositionupdate")}}A character is added to a passage of text being composed.
{{event("compositionend")}}The composition of a passage of text has been completed or canceled.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
View Events
Event NameFired When
{{event("fullscreenchange")}}An element was turned to fullscreen mode or back to normal mode.
{{event("fullscreenerror")}}It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.
{{event("resize")}}The document view has been resized.
{{event("scroll")}}The document view or an element has been scrolled.
+ + + + + + + + + + + + + + + + + + + + + + + +
Clipboard Events
Event NameFired When
{{event("cut")}}The selection has been cut and copied to the clipboard
{{event("copy")}}The selection has been copied to the clipboard
{{event("paste")}}The item from the clipboard has been pasted
+ + + + + + + + + + + + + + + + + + + + + +
Keyboard Events
Event NameFired When
{{event("keydown")}}ANY key is pressed
{{event("keypress")}}ANY key except Shift, Fn, CapsLock is in pressed position. (Fired continously.)
{{event("keyup")}}ANY key is released
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mouse Events
Event NameFired When
{{event("mouseenter")}}A pointing device is moved onto the element that has the listener attached.
{{event("mouseover")}}A pointing device is moved onto the element that has the listener attached or onto one of its children.
{{event("mousemove")}}A pointing device is moved over an element. (Fired continously as the mouse moves.)
{{event("mousedown")}}A pointing device button is pressed on an element.
{{event("mouseup")}}A pointing device button is released over an element.
{{event("auxclick")}}A pointing device button (ANY non-primary button) has been pressed and released on an element.
{{event("click")}}A pointing device button (ANY button; soon to be primary button only) has been pressed and released on an element.
{{event("dblclick")}}A pointing device button is clicked twice on an element.
{{event("contextmenu")}}The right button of the mouse is clicked (before the context menu is displayed).
{{event("wheel")}}A wheel button of a pointing device is rotated in any direction.
{{event("mouseleave")}}A pointing device is moved off the element that has the listener attached.
{{event("mouseout")}}A pointing device is moved off the element that has the listener attached or off one of its children.
{{event("select")}}Some text is being selected.
{{event("pointerlockchange")}}The pointer was locked or released.
{{event("pointerlockerror")}}It was impossible to lock the pointer for technical reasons or because the permission was denied.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Drag & Drop Events
Event NameFired When
{{event("dragstart")}}The user starts dragging an element or text selection.
{{event("drag")}}An element or text selection is being dragged (Fired continuously every 350ms).
{{event("dragend")}}A drag operation is being ended (by releasing a mouse button or hitting the escape key).
{{event("dragenter")}}A dragged element or text selection enters a valid drop target.
{{event("dragover")}}An element or text selection is being dragged over a valid drop target. (Fired continuously every 350ms.)
{{event("dragleave")}}A dragged element or text selection leaves a valid drop target.
{{event("drop")}}An element is dropped on a valid drop target.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Media Events
Event NameFired When
{{event("durationchange")}}The duration attribute has been updated.
{{event("loadedmetadata")}}The metadata has been loaded.
{{event("loadeddata")}}The first frame of the media has finished loading.
{{event("canplay")}}The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
{{event("canplaythrough")}}The browser estimates it can play the media up to its end without stopping for content buffering.
{{event("ended")}}Playback has stopped because the end of the media was reached.
{{event("emptied")}}The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
{{event("stalled")}}The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
{{event("suspend")}}Media data loading has been suspended.
{{event("play")}}Playback has begun.
{{event("playing")}}Playback is ready to start after having been paused or delayed due to lack of data.
{{event("pause")}}Playback has been paused.
{{event("waiting")}}Playback has stopped because of a temporary lack of data.
{{event("seeking")}}A seek operation began.
{{event("seeked")}}A seek operation completed.
{{event("ratechange")}}The playback rate has changed.
{{event("timeupdate")}}The time indicated by the currentTime attribute has been updated.
{{event("volumechange")}}The volume has changed.
{{event("complete")}}The rendering of an {{domxref("OfflineAudioContext")}} is terminated.
{{event("audioprocess")}}The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Progress Events
Event NameFired When
{{event("loadstart")}}Progress has begun.
{{event("progress")}}In progress.
{{event("error")}}Progression has failed.
{{event("timeout")}}Progression is terminated due to preset time expiring.
abortProgression has been terminated (not due to an error).
loadProgression has been successful.
{{event("loadend")}}Progress has stopped (after "error", "abort" or "load" have been dispatched).
+ +

Storage events

+ +

{{event("change")}} (see {{anch("Non-standard events")}})
+ {{event("storage")}}

+ +

Update events

+ +

{{event("checking")}}
+ {{event("downloading")}}
+ {{event("error")}}
+ {{event("noupdate")}}
+ {{event("obsolete")}}
+ {{event("updateready")}}

+ +

Value change events

+ +

{{event("broadcast")}}
+ {{event("CheckboxStateChange")}}
+ {{event("hashchange")}}
+ {{event("input")}}
+ {{event("RadioStateChange")}}
+ {{event("readystatechange")}}
+ {{event("ValueChange")}}

+ +

Uncategorized events

+ +

{{event("invalid")}}
+ {{event("localized")}}
+ message
+ message
+ message
+ open
+ {{event("show")}}

+ +

Less common and non-standard events

+ +

"cancelable" Fetch events

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Event nameFired when
{{event("abort_(cancellable_fetch)", "abort")}}A fetch request is aborted, i.e. using {{domxref("FetchController.abort()")}}.
{{event("requestprogress")}}The HTTP request part of a fetch request makes progress.
{{event("responseprogress")}}The response part of a fetch request makes progress, i.e. more of the response is downloaded.
{{event("statechange_(cancellable_fetch)", "statechange")}}The {{domxref("FetchObserver.state", "state")}} of a fetch request changes.
+ +

WebVR events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event nameFired when
{{event("vrdisplayconnect")}}when a compatible {{domxref("VRDisplay")}} is connected to the computer.
{{event("vrdisplaydisconnect")}}When a compatible {{domxref("VRDisplay")}} is disconnected from the computer.
{{event("vrdisplayactivate")}}When a VR display is able to be presented to, for example if an HMD has been moved to bring it out of standby, or woken up by being put on.
{{event("vrdisplaydeactivate")}}When a {{domxref("VRDisplay")}} can no longer be presented to, for example if an HMD has gone into standby or sleep mode due to a period of inactivity.
{{event("vrdisplayblur")}}when presentation to a {{domxref("VRDisplay")}} has been paused for some reason by the browser, OS, or VR hardware — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.
{{event("vrdisplayfocus")}}When presentation to a {{domxref("VRDisplay")}} has resumed after being blurred.
{{event("vrdisplaypresentchange")}}The presenting state of a {{domxref("VRDisplay")}} changes — i.e. goes from presenting to not presenting, or vice versa.
+ +

SVG events

+ +

{{event("SVGAbort")}}
+ {{event("SVGError")}}
+ {{event("SVGLoad")}}
+ {{event("SVGResize")}}
+ {{event("SVGScroll")}}
+ {{event("SVGUnload")}}
+ {{event("SVGZoom")}}

+ +

Database events

+ +

abort
+ blocked
+ complete
+ {{event("error")}} (link)
+ success
+ upgradeneeded
+ versionchange

+ +

Notification events

+ +

AlertActive
+ AlertClose

+ +

CSS events

+ +

CssRuleViewRefreshed
+ CssRuleViewChanged
+ CssRuleViewCSSLinkClicked
+ {{event("transitionend")}}

+ +

Script events

+ +

{{event("afterscriptexecute")}}
+ {{event("beforescriptexecute")}}

+ + + +

{{event("DOMMenuItemActive")}}
+ {{event("DOMMenuItemInactive")}}

+ +

Window events

+ +

DOMWindowCreated
+ DOMTitleChanged
+ DOMWindowClose
+ SSWindowClosing
+ SSWindowStateReady
+ SSWindowStateBusy
+ close

+ +

Document events

+ +

DOMLinkAdded
+ DOMLinkRemoved
+ DOMMetaAdded
+ DOMMetaRemoved
+ DOMWillOpenModalDialog
+ DOMModalDialogClosed

+ + + +

{{event("popuphidden")}}
+ {{event("popuphiding")}}
+ {{event("popupshowing")}}
+ {{event("popupshown")}}
+ DOMPopupBlocked

+ +

Tab events

+ +

TabOpen
+ TabClose
+ TabSelect
+ TabShow
+ TabHide
+ TabPinned
+ TabUnpinned
+ SSTabClosing
+ SSTabRestoring
+ SSTabRestored
+ {{event("visibilitychange")}}

+ +

Battery events

+ +

{{event("chargingchange")}}
+ {{event("chargingtimechange")}}
+ {{event("dischargingtimechange")}}
+ {{event("levelchange")}}

+ +

Call events

+ +

{{event("alerting")}}
+ {{event("busy")}}
+ {{event("callschanged")}}
+ {{event("cfstatechange")}}
+ {{event("connected")}}
+ {{event("connecting")}}
+ {{event("dialing")}}
+ {{event("disconnected")}}
+ {{event("disconnecting")}}
+ {{event("error_(Telephony)","error")}}
+ {{event("held")}}, {{event("holding")}}
+ {{event("incoming")}}
+ {{event("resuming")}}
+ {{event("statechange")}}
+ {{event("voicechange")}}

+ +

Sensor events

+ +

{{event("compassneedscalibration")}}
+ {{event("devicelight")}}
+ {{event("devicemotion")}}
+ {{event("deviceorientation")}}
+ {{event("deviceproximity")}}
+ {{event("MozOrientation")}}
+ {{event("orientationchange")}}
+ {{event("userproximity")}}

+ +

Smartcard events

+ +

{{event("icccardlockerror")}}
+ {{event("iccinfochange")}}
+ {{event("smartcard-insert")}}
+ {{event("smartcard-remove")}}
+ {{event("stkcommand")}}
+ {{event("stksessionend")}}
+ {{event("cardstatechange")}}

+ +

SMS and USSD events

+ +

{{event("delivered")}}
+ {{event("received")}}
+ {{event("sent")}}
+ {{event("ussdreceived")}}

+ +

Frame events

+ +

{{event("mozbrowserclose")}}
+ {{event("mozbrowsercontextmenu")}}
+ {{event("mozbrowsererror")}}
+ {{event("mozbrowsericonchange")}}
+ {{event("mozbrowserlocationchange")}}
+ {{event("mozbrowserloadend")}}
+ {{event("mozbrowserloadstart")}}
+ {{event("mozbrowseropenwindow")}}
+ {{event("mozbrowsersecuritychange")}}
+ {{event("mozbrowsershowmodalprompt")}} (link)
+ {{event("mozbrowsertitlechange")}}
+ DOMFrameContentLoaded

+ +

DOM mutation events

+ +

DOMAttributeNameChanged
+ DOMAttrModified
+ DOMCharacterDataModified
+ {{event("DOMContentLoaded")}}
+ DOMElementNameChanged
+ DOMNodeInserted
+ DOMNodeInsertedIntoDocument
+ DOMNodeRemoved
+ DOMNodeRemovedFromDocument
+ DOMSubtreeModified

+ +

Touch events

+ +

MozEdgeUIGesture
+ MozMagnifyGesture
+ MozMagnifyGestureStart
+ MozMagnifyGestureUpdate
+ MozPressTapGesture
+ MozRotateGesture
+ MozRotateGestureStart
+ MozRotateGestureUpdate
+ MozSwipeGesture
+ MozTapGesture
+ MozTouchDown
+ MozTouchMove
+ MozTouchUp
+ {{event("touchcancel")}}
+ {{event("touchend")}}
+ {{event("touchenter")}}
+ {{event("touchleave")}}
+ {{event("touchmove")}}
+ {{event("touchstart")}}

+ +

Pointer events

+ +

{{event("pointerover")}}
+ {{event("pointerenter")}}
+ {{event("pointerdown")}}
+ {{event("pointermove")}}
+ {{event("pointerup")}}
+ {{event("pointercancel")}}
+ {{event("pointerout")}}
+ {{event("pointerleave")}}
+ {{event("gotpointercapture")}}
+ {{event("lostpointercapture")}}

+ +

Standard events

+ +

These events are defined in official Web specifications, and should be common across browsers. Each event is listed along with the interface representing the object sent to recipients of the event (so you can find information about what data is provided with each event) as well as a link to the specification or specifications that define the event.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
{{event("abort")}}{{domxref("UIEvent")}}DOM L3The loading of a resource has been aborted.
abort{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgression has been terminated (not due to an error).
abort{{domxref("Event")}}IndexedDBA transaction has been aborted.
{{event("afterprint")}}{{gecko_minversion_inline("6")}}{{domxref("Event")}}HTML5The associated document has started printing or the print preview has been closed.
{{event("animationend")}}{{domxref("AnimationEvent")}}CSS AnimationsA CSS animation has completed.
{{event("animationiteration")}}{{domxref("AnimationEvent")}}CSS AnimationsA CSS animation is repeated.
{{event("animationstart")}}{{domxref("AnimationEvent")}}CSS AnimationsA CSS animation has started.
{{event("appinstalled")}}{{domxref("Event")}}Web App ManifestA web application is successfully installed as a progressive web app.
{{event("audioprocess")}}{{domxref("AudioProcessingEvent")}}{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.
{{event("audioend")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The user agent has finished capturing audio for speech recognition.
{{event("audiostart")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The user agent has started to capture audio for speech recognition.
{{event("beforeprint")}} {{gecko_minversion_inline("6")}}{{domxref("Event")}}HTML5The associated document is about to be printed or previewed for printing.
{{event("beforeunload")}}{{domxref("BeforeUnloadEvent")}}HTML5 The window, the document and its resources are about to be unloaded.
{{event("beginEvent")}}{{domxref("TimeEvent")}}SVGA SMIL animation element begins.
blocked IndexedDBAn open connection to a database is blocking a versionchange transaction on the same database.
{{event("blur")}}{{domxref("FocusEvent")}}DOM L3An element has lost focus (does not bubble).
{{event("boundary")}} {{experimental_inline}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The spoken utterance reaches a word or sentence boundary
{{event("cached")}}{{domxref("Event")}}OfflineThe resources listed in the manifest have been downloaded, and the application is now cached.
{{event("canplay")}}{{domxref("Event")}}HTML5 mediaThe user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
{{event("canplaythrough")}}{{domxref("Event")}}HTML5 mediaThe user agent can play the media up to its end without having to stop for further buffering of content.
{{event("change")}}{{domxref("Event")}}DOM L2, HTML5The change event is fired for {{HTMLElement("input")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}} elements when a change to the element's value is committed by the user.
{{event("chargingchange")}}{{domxref("Event")}}Battery statusThe battery begins or stops charging.
{{event("chargingtimechange")}}{{domxref("Event")}}Battery statusThe chargingTime attribute has been updated.
{{event("checking")}}{{domxref("Event")}}OfflineThe user agent is checking for an update, or attempting to download the cache manifest for the first time.
{{event("click")}}{{domxref("MouseEvent")}}DOM L3A pointing device button has been pressed and released on an element.
close{{domxref("Event")}}WebSocketA WebSocket connection has been closed.
complete IndexedDBA transaction successfully completed.
{{event("complete")}}{{domxref("OfflineAudioCompletionEvent")}}{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}The rendering of an {{domxref("OfflineAudioContext")}} is terminated.
{{event("compositionend")}}{{gecko_minversion_inline("9")}}{{domxref("CompositionEvent")}}DOM L3The composition of a passage of text has been completed or canceled.
{{event("compositionstart")}}{{gecko_minversion_inline("9")}}{{domxref("CompositionEvent")}}DOM L3The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).
{{event("compositionupdate")}}{{gecko_minversion_inline("9")}}{{domxref("CompositionEvent")}}DOM L3A character is added to a passage of text being composed.
{{event("contextmenu")}}{{domxref("MouseEvent")}}HTML5The right button of the mouse is clicked (before the context menu is displayed).
{{event("copy")}}{{domxref("ClipboardEvent")}}ClipboardThe text selection has been added to the clipboard.
{{event("cut")}}{{domxref("ClipboardEvent")}}ClipboardThe text selection has been removed from the document and added to the clipboard.
{{event("dblclick")}}{{domxref("MouseEvent")}}DOM L3A pointing device button is clicked twice on an element.
{{event("devicechange")}}{{domxref("Event")}}{{SpecName("Media Capture")}}A media device such as a camera, microphone, or speaker is connected or removed from the system.
{{event("devicelight")}}{{domxref("DeviceLightEvent")}}Ambient Light EventsFresh data is available from a light sensor.
{{event("devicemotion")}}{{domxref("DeviceMotionEvent")}}Device Orientation EventsFresh data is available from a motion sensor.
{{event("deviceorientation")}}{{domxref("DeviceOrientationEvent")}}Device Orientation EventsFresh data is available from an orientation sensor.
{{event("deviceproximity")}}{{domxref("DeviceProximityEvent")}}Proximity EventsFresh data is available from a proximity sensor (indicates an approximated distance between the device and a nearby object).
{{event("dischargingtimechange")}}{{domxref("Event")}}Battery statusThe dischargingTime attribute has been updated.
DOMActivate {{deprecated_inline}}{{domxref("UIEvent")}}DOM L3A button, link or state changing element is activated (use {{event("click")}} instead).
DOMAttributeNameChanged {{deprecated_inline}}{{domxref("MutationNameEvent")}}DOM L3 RemovedThe name of an attribute changed (use mutation observers instead).
DOMAttrModified {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3The value of an attribute has been modified (use mutation observers instead).
DOMCharacterDataModified {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A text or another CharacterData has changed (use mutation observers instead).
{{event("DOMContentLoaded")}}{{domxref("Event")}}HTML5The document has finished loading (but not its dependent resources).
DOMElementNameChanged {{deprecated_inline}}{{domxref("MutationNameEvent")}}DOM L3 RemovedThe name of an element changed (use mutation observers instead).
DOMFocusIn {{deprecated_inline}}{{domxref("FocusEvent")}}DOM L3An element has received focus (use {{event("focus")}} or {{event("focusin")}} instead).
DOMFocusOut {{deprecated_inline}}{{domxref("FocusEvent")}}DOM L3An element has lost focus (use {{event("blur")}} or {{event("focusout")}} instead).
DOMNodeInserted {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been added as a child of another node (use mutation observers instead).
DOMNodeInsertedIntoDocument {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been inserted into the document (use mutation observers instead).
DOMNodeRemoved {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been removed from its parent node (use mutation observers instead).
DOMNodeRemovedFromDocument {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been removed from the document (use mutation observers instead).
DOMSubtreeModified {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A change happened in the document (use mutation observers instead).
{{event("downloading")}}{{domxref("Event")}}OfflineThe user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time.
{{event("drag")}}{{domxref("DragEvent")}}HTML5An element or text selection is being dragged (every 350ms).
{{event("dragend")}}{{domxref("DragEvent")}}HTML5A drag operation is being ended (by releasing a mouse button or hitting the escape key).
{{event("dragenter")}}{{domxref("DragEvent")}}HTML5A dragged element or text selection enters a valid drop target.
{{event("dragleave")}}{{domxref("DragEvent")}}HTML5A dragged element or text selection leaves a valid drop target.
{{event("dragover")}}{{domxref("DragEvent")}}HTML5An element or text selection is being dragged over a valid drop target (every 350ms).
{{event("dragstart")}}{{domxref("DragEvent")}}HTML5The user starts dragging an element or text selection.
{{event("drop")}}{{domxref("DragEvent")}}HTML5An element is dropped on a valid drop target.
{{event("durationchange")}}{{domxref("Event")}}HTML5 mediaThe duration attribute has been updated.
{{event("emptied")}}{{domxref("Event")}}HTML5 mediaThe media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
{{event("end_(SpeechRecognition)","end")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The speech recognition service has disconnected.
{{event("end_(SpeechSynthesis)","end")}} {{experimental_inline}}{{domxref("SpeechSynthesisEvent")}}{{SpecName("Web Speech API")}}The utterance has finished being spoken.
{{event("ended")}}{{domxref("Event")}}HTML5 mediaPlayback has stopped because the end of the media was reached.
{{event("ended_(Web_Audio)", "ended")}}{{domxref("Event")}}{{SpecName("Web Audio API")}}Playback has stopped because the end of the media was reached.
{{event("endEvent")}}{{domxref("TimeEvent")}}SVGA SMIL animation element ends.
{{event("error")}}{{domxref("UIEvent")}}DOM L3A resource failed to load.
{{event("error")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgression has failed.
{{event("error")}}{{domxref("Event")}}OfflineAn error occurred while downloading the cache manifest or updating the content of the application.
{{event("error")}}{{domxref("Event")}}WebSocketA WebSocket connection has been closed with prejudice (some data couldn't be sent for example).
{{event("error")}}{{domxref("Event")}}Server Sent EventsAn event source connection has been failed.
{{event("error")}}{{domxref("Event")}}IndexedDBA request caused an error and failed.
{{event("error_(SpeechRecognitionError)","error")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}A speech recognition error occurs.
{{event("error_(SpeechSynthesisError)","error")}}{{domxref("SpeechSynthesisErrorEvent")}}{{SpecName('Web Speech API')}}An error occurs that prevents the utterance from being successfully spoken.
{{event("focus")}}{{domxref("FocusEvent")}}DOM L3An element has received focus (does not bubble).
{{event("focusin")}}{{domxref("FocusEvent")}}DOM L3An element is about to receive focus (bubbles).
{{event("focusout")}}{{domxref("FocusEvent")}}DOM L3An element is about to lose focus (bubbles).
{{event("fullscreenchange")}}{{gecko_minversion_inline("9")}}{{domxref("Event")}}Full ScreenAn element was turned to fullscreen mode or back to normal mode.
{{event("fullscreenerror")}}{{gecko_minversion_inline("9")}}{{domxref("Event")}}Full ScreenIt was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.
{{event("gamepadconnected")}}{{domxref("GamepadEvent")}}GamepadA gamepad has been connected.
{{event("gamepaddisconnected")}}{{domxref("GamepadEvent")}}GamepadA gamepad has been disconnected.
{{event("gotpointercapture")}}{{domxref("PointerEvent")}}Pointer EventsElement receives pointer capture.
{{event("hashchange")}}{{domxref("HashChangeEvent")}}HTML5The fragment identifier of the URL has changed (the part of the URL after the #).
{{event("lostpointercapture")}}{{domxref("PointerEvent")}}Pointer EventsElement lost pointer capture.
{{event("input")}}{{domxref("Event")}}HTML5The value of an element changes or the content of an element with the attribute contenteditable is modified.
{{event("invalid")}}{{domxref("Event")}}HTML5A submittable element has been checked and doesn't satisfy its constraints.
{{event("keydown")}}{{domxref("KeyboardEvent")}}DOM L3A key is pressed down.
{{event("keypress")}}{{domxref("KeyboardEvent")}}DOM L3A key is pressed down and that key normally produces a character value (use input instead).
{{event("keyup")}}{{domxref("KeyboardEvent")}}DOM L3A key is released.
{{event("languagechange")}} {{experimental_inline}}{{domxref("Event")}}{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}The user's preferred languages have changed.
{{event("levelchange")}}{{domxref("Event")}}Battery statusThe level attribute has been updated.
{{event("load")}}{{domxref("UIEvent")}}DOM L3A resource and its dependent resources have finished loading.
load{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgression has been successful.
{{event("loadeddata")}}{{domxref("Event")}}HTML5 mediaThe first frame of the media has finished loading.
{{event("loadedmetadata")}}{{domxref("Event")}}HTML5 mediaThe metadata has been loaded.
{{event("loadend")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgress has stopped (after "error", "abort" or "load" have been dispatched).
{{event("loadstart")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgress has begun.
{{event("mark")}} {{experimental_inline}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The spoken utterance reaches a named SSML "mark" tag.
message{{domxref("MessageEvent")}}WebSocketA message is received through a WebSocket.
message{{domxref("MessageEvent")}}Web WorkersA message is received from a Web Worker.
message{{domxref("MessageEvent")}}Web MessagingA message is received from a child (i)frame or a parent window.
message{{domxref("MessageEvent")}}Server Sent EventsA message is received through an event source.
{{event("messageerror")}}{{domxref("MessageEvent")}}{{domxref("MessagePort")}}, Web Workers, Broadcast Channel, {{domxref("Window")}}A message error is raised when a message is received by an object.
{{event("message_(ServiceWorker)","message")}} {{experimental_inline}}{{domxref("ServiceWorkerMessageEvent")}} or {{domxref("ExtendableMessageEvent")}}, depending on context.Service WorkersA message is received from a service worker, or a message is received in a service worker from another context.
{{event("mousedown")}}{{domxref("MouseEvent")}}DOM L3A pointing device button (usually a mouse) is pressed on an element.
{{event("mouseenter")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved onto the element that has the listener attached.
{{event("mouseleave")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved off the element that has the listener attached.
{{event("mousemove")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved over an element.
{{event("mouseout")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved off the element that has the listener attached or off one of its children.
{{event("mouseover")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved onto the element that has the listener attached or onto one of its children.
{{event("mouseup")}}{{domxref("MouseEvent")}}DOM L3A pointing device button is released over an element.
{{event("nomatch")}} {{experimental_inline}}{{domxref("SpeechRecognitionEvent")}}{{SpecName('Web Speech API')}}The speech recognition service returns a final result with no significant recognition.
{{event("notificationclick")}}{{domxref("NotificationEvent")}}{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}A system notification spawned by {{domxref("ServiceWorkerRegistration.showNotification()")}} has been clicked.
{{event("noupdate")}}{{domxref("Event")}}OfflineThe manifest hadn't changed.
{{event("obsolete")}}{{domxref("Event")}}OfflineThe manifest was found to have become a 404 or 410 page, so the application cache is being deleted.
{{event("offline")}}{{domxref("Event")}}HTML5 offlineThe browser has lost access to the network.
{{event("online")}}{{domxref("Event")}}HTML5 offlineThe browser has gained access to the network (but particular websites might be unreachable).
open{{domxref("Event")}}WebSocketA WebSocket connection has been established.
open{{domxref("Event")}}Server Sent EventsAn event source connection has been established.
{{event("orientationchange")}}{{domxref("Event")}}Screen OrientationThe orientation of the device (portrait/landscape) has changed
{{event("pagehide")}}{{domxref("PageTransitionEvent")}}HTML5A session history entry is being traversed from.
{{event("pageshow")}}{{domxref("PageTransitionEvent")}}HTML5A session history entry is being traversed to.
{{event("paste")}}{{domxref("ClipboardEvent")}}ClipboardData has been transferred from the system clipboard to the document.
{{event("pause")}}{{domxref("Event")}}HTML5 mediaPlayback has been paused.
{{event("pause_(SpeechSynthesis)", "pause")}} {{experimental_inline}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The utterance is paused part way through.
{{event("pointercancel")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer is unlikely to produce any more events.
{{event("pointerdown")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer enters the active buttons state.
{{event("pointerenter")}}{{domxref("PointerEvent")}}Pointer EventsPointing device is moved inside the hit-testing boundary.
{{event("pointerleave")}}{{domxref("PointerEvent")}}Pointer EventsPointing device is moved out of the hit-testing boundary.
{{event("pointerlockchange")}}{{domxref("Event")}}Pointer LockThe pointer was locked or released.
{{event("pointerlockerror")}}{{domxref("Event")}}Pointer LockIt was impossible to lock the pointer for technical reasons or because the permission was denied.
{{event("pointermove")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer changed coordinates.
{{event("pointerout")}}{{domxref("PointerEvent")}}Pointer EventsThe pointing device moved out of hit-testing boundary or leaves detectable hover range.
{{event("pointerover")}}{{domxref("PointerEvent")}}Pointer EventsThe pointing device is moved into the hit-testing boundary.
{{event("pointerup")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer leaves the active buttons state.
{{event("play")}}{{domxref("Event")}}HTML5 mediaPlayback has begun.
{{event("playing")}}{{domxref("Event")}}HTML5 mediaPlayback is ready to start after having been paused or delayed due to lack of data.
{{event("popstate")}}{{domxref("PopStateEvent")}}HTML5A session history entry is being navigated to (in certain cases).
{{event("progress")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestIn progress.
progress{{domxref("ProgressEvent")}}OfflineThe user agent is downloading resources listed by the manifest.
{{event("push")}}{{domxref("PushEvent")}}{{SpecName("Push API")}}A Service Worker has received a push message.
{{event("pushsubscriptionchange")}}{{domxref("PushEvent")}}{{SpecName("Push API")}}A PushSubscription has expired.
{{event("ratechange")}}{{domxref("Event")}}HTML5 mediaThe playback rate has changed.
{{event("readystatechange")}}{{domxref("Event")}}HTML5 and XMLHttpRequestThe readyState attribute of a document has changed.
{{event("repeatEvent")}}{{domxref("TimeEvent")}}SVGA SMIL animation element is repeated.
{{event("reset")}}{{domxref("Event")}}DOM L2, HTML5A form is reset.
{{event("resize")}}{{domxref("UIEvent")}}DOM L3The document view has been resized.
{{event("resourcetimingbufferfull")}}{{domxref("Performance")}}Resource TimingThe browser's resource timing buffer is full.
{{event("result")}} {{experimental_inline}}{{domxref("SpeechRecognitionEvent")}}{{SpecName('Web Speech API')}}The speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.
{{event("resume")}} {{experimental_inline}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}A paused utterance is resumed.
{{event("scroll")}}{{domxref("UIEvent")}}DOM L3The document view or an element has been scrolled.
{{event("seeked")}}{{domxref("Event")}}HTML5 mediaA seek operation completed.
{{event("seeking")}}{{domxref("Event")}}HTML5 mediaA seek operation began.
{{event("select")}}{{domxref("UIEvent")}}DOM L3Some text is being selected.
{{event("selectstart")}} {{experimental_inline}}{{domxref("Event")}}{{ SpecName('Selection API')}}A selection just started.
{{event("selectionchange")}} {{experimental_inline}}{{domxref("Event")}}{{ SpecName('Selection API')}}The selection in the document has been changed.
{{event("show")}}{{domxref("MouseEvent")}}HTML5A contextmenu event was fired on/bubbled to an element that has a contextmenu attribute
{{event("soundend")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Any sound — recognisable speech or not — has stopped being detected.
{{event("soundstart")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Any sound — recognisable speech or not — has been detected.
{{event("speechend")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Speech recognised by the speech recognition service has stopped being detected.
{{event("speechstart")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Sound that is recognised by the speech recognition service as speech has been detected.
{{event("stalled")}}{{domxref("Event")}}HTML5 mediaThe user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
{{event("start_(SpeechRecognition)","start")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.
{{event("start_(SpeechSynthesis)","start")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The utterance has begun to be spoken.
{{event("storage")}}{{domxref("StorageEvent")}}Web StorageA storage area (localStorage or sessionStorage) has changed.
{{event("submit")}}{{domxref("Event")}}DOM L2, HTML5A form is submitted.
success{{domxref("Event")}}IndexedDBA request successfully completed.
{{event("suspend")}}{{domxref("Event")}}HTML5 mediaMedia data loading has been suspended.
{{event("SVGAbort")}}{{domxref("SVGEvent")}}SVGPage loading has been stopped before the SVG was loaded.
{{event("SVGError")}}{{domxref("SVGEvent")}}SVGAn error has occurred before the SVG was loaded.
{{event("SVGLoad")}}{{domxref("SVGEvent")}}SVGAn SVG document has been loaded and parsed.
{{event("SVGResize")}}{{domxref("SVGEvent")}}SVGAn SVG document is being resized.
{{event("SVGScroll")}}{{domxref("SVGEvent")}}SVGAn SVG document is being scrolled.
{{event("SVGUnload")}}{{domxref("SVGEvent")}}SVGAn SVG document has been removed from a window or frame.
{{event("SVGZoom")}}{{domxref("SVGZoomEvent")}}SVGAn SVG document is being zoomed.
{{event("timeout")}}{{domxref("ProgressEvent")}}XMLHttpRequest 
{{event("timeupdate")}}{{domxref("Event")}}HTML5 mediaThe time indicated by the currentTime attribute has been updated.
{{event("touchcancel")}}{{domxref("TouchEvent")}}Touch EventsA touch point has been disrupted in an implementation-specific manners (too many touch points for example).
{{event("touchend")}}{{domxref("TouchEvent")}}Touch EventsA touch point is removed from the touch surface.
{{event("touchmove")}}{{domxref("TouchEvent")}}Touch EventsA touch point is moved along the touch surface.
{{event("touchstart")}}{{domxref("TouchEvent")}}Touch EventsA touch point is placed on the touch surface.
{{event("transitionend")}}{{domxref("TransitionEvent")}}CSS TransitionsA CSS transition has completed.
{{event("unload")}}{{domxref("UIEvent")}}DOM L3The document or a dependent resource is being unloaded.
{{event("updateready")}}{{domxref("Event")}}OfflineThe resources listed in the manifest have been newly redownloaded, and the script can use swapCache() to switch to the new cache.
upgradeneeded IndexedDBAn attempt was made to open a database with a version number higher than its current version. A versionchange transaction has been created.
{{event("userproximity")}}{{domxref("UserProximityEvent")}}{{SpecName("Proximity Events")}}Fresh data is available from a proximity sensor (indicates whether the nearby object is near the device or not).
{{event("voiceschanged")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The list of {{domxref("SpeechSynthesisVoice")}} objects that would be returned by the {{domxref("SpeechSynthesis.getVoices()")}} method has changed (when the {{event("voiceschanged")}} event fires.)
versionchange IndexedDBA versionchange transaction completed.
{{event("visibilitychange")}}{{domxref("Event")}}Page visibilityThe content of a tab has become visible or has been hidden.
{{event("volumechange")}}{{domxref("Event")}}HTML5 mediaThe volume has changed.
{{event("waiting")}}{{domxref("Event")}}HTML5 mediaPlayback has stopped because of a temporary lack of data.
{{event("wheel")}}{{gecko_minversion_inline("17")}}{{domxref("WheelEvent")}}DOM L3A wheel button of a pointing device is rotated in any direction.
+ +

Non-standard events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
{{event("afterscriptexecute")}}{{domxref("Event")}}Mozilla SpecificA script has been executed.
{{event("beforescriptexecute")}}{{domxref("Event")}}Mozilla SpecificA script is about to be executed.
{{event("beforeinstallprompt")}}{{domxref("Event")}}Chrome specificA user is prompted to save a web site to a home screen on mobile.
{{event("cardstatechange")}} Firefox OS specificThe {{domxref("MozMobileConnection.cardState")}} property changes value.
{{event("change")}}{{domxref("DeviceStorageChangeEvent")}}Firefox OS specificThis event is triggered each time a file is created, modified or deleted on a given storage area.
{{event("connectionInfoUpdate")}} Firefox OS specificThe informations about the signal strength and the link speed have been updated.
{{event("cfstatechange")}} Firefox OS specificThe call forwarding state changes.
{{event("datachange")}} Firefox OS specificThe {{domxref("MozMobileConnection.data")}} object changes values.
{{event("dataerror")}} Firefox OS specificThe {{domxref("MozMobileConnection.data")}} object receive an error from the RIL.
{{event("DOMMouseScroll")}}{{deprecated_inline}} Mozilla specificThe wheel button of a pointing device is rotated (detail attribute is a number of lines). (use {{event("wheel")}} instead)
dragdrop {{deprecated_inline}}DragEventMozilla specificAn element is dropped (use {{event("drop")}} instead).
dragexit {{deprecated_inline}}DragEventMozilla specificA drag operation is being ended(use {{event("dragend")}} instead).
draggesture {{deprecated_inline}}DragEventMozilla specificThe user starts dragging an element or text selection (use {{event("dragstart")}} instead).
{{event("icccardlockerror")}} Firefox OS specificthe {{domxref("MozMobileConnection.unlockCardLock()")}} or {{domxref("MozMobileConnection.setCardLock()")}} methods fails.
{{event("iccinfochange")}} Firefox OS specificThe {{domxref("MozMobileConnection.iccInfo")}} object changes.
{{event("localized")}} Mozilla SpecificThe page has been localized using data-l10n-* attributes.
{{event("mousewheel")}}{{deprecated_inline}} IE inventedThe wheel button of a pointing device is rotated.
{{event("MozAudioAvailable")}}{{domxref("Event")}}Mozilla specificThe audio buffer is full and the corresponding raw samples are available.
MozBeforeResize {{obsolete_inline}} Mozilla specificA window is about to be resized.
{{event("mozbrowseractivitydone")}} Firefox OS Browser API-specificSent when some activity has been completed (complete description TBD.)
{{event("mozbrowserasyncscroll")}} Firefox OS Browser API-specificSent when the scroll position within a browser {{HTMLElement("iframe")}} changes.
{{event("mozbrowseraudioplaybackchange")}} Firefox OS Browser API-specificSent when audio starts or stops playing within the browser {{HTMLElement("iframe")}} content.
{{event("mozbrowsercaretstatechanged")}} Firefox OS Browser API-specificSent when the text selected inside the browser {{HTMLElement("iframe")}} content changes.
{{event("mozbrowserclose")}} Firefox OS Browser API-specificSent when window.close() is called within a browser {{HTMLElement("iframe")}}.
{{event("mozbrowsercontextmenu")}} Firefox OS Browser API-specificSent when a browser {{HTMLElement("iframe")}} try to open a context menu.
{{event("mozbrowserdocumentfirstpaint")}} Firefox OS Browser API-specificSent when a new paint occurs on any document in the browser {{HTMLElement("iframe")}}.
{{event("mozbrowsererror")}} Firefox OS Browser API-specificSent when an error occured while trying to load a content within a browser iframe
{{event("mozbrowserfindchange")}} Firefox OS Browser API-specificSent when a search operation is performed on the browser {{HTMLElement("iframe")}} content (see HTMLIFrameElement search methods.)
{{event("mozbrowserfirstpaint")}} Firefox OS Browser API-specificSent when the {{HTMLElement("iframe")}} paints content for the first time (this doesn't include the initial paint from about:blank.)
{{event("mozbrowsericonchange")}} Firefox OS Browser API-specificSent when the favicon of a browser iframe changes.
{{event("mozbrowserlocationchange")}} Firefox OS Browser API-specificSent when an browser iframe's location changes.
{{event("mozbrowserloadend")}} Firefox OS Browser API-specificSent when the browser iframe has finished loading all its assets.
{{event("mozbrowserloadstart")}} Firefox OS Browser API-specificSent when the browser iframe starts to load a new page.
{{event("mozbrowsermanifestchange")}} Firefox OS Browser API-specificSent when a the path to the app manifest changes, in the case of a browser {{HTMLElement("iframe")}} with an open web app embedded in it.
{{event("mozbrowsermetachange")}} Firefox OS Browser API-specificSent when a {{htmlelement("meta")}} elelment is added to, removed from or changed in the browser {{HTMLElement("iframe")}}'s content.
{{event("mozbrowseropensearch")}} Firefox OS Browser API-specificSent when a link to a search engine is found.
{{event("mozbrowseropentab")}} Firefox OS Browser API-specificSent when a new tab is opened within a browser {{HTMLElement("iframe")}} as a result of the user issuing a command to open a link target in a new tab (for example ctrl/cmd + click.)
{{event("mozbrowseropenwindow")}} Firefox OS Browser API-specificSent when {{domxref("window.open()")}} is called within a browser iframe.
{{event("mozbrowserresize")}} Firefox OS Browser API-specificSent when the browser {{HTMLElement("iframe")}}'s window size has changed.
{{event("mozbrowserscroll")}} Firefox OS Browser API-specificSent when the browser {{HTMLElement("iframe")}} content scrolls.
{{event("mozbrowserscrollareachanged")}} Firefox OS Browser API-specificSent when the available scrolling area  in the browser {{HTMLElement("iframe")}} changes. This can occur on resize and when the page size changes (while loading for example.)
{{event("mozbrowserscrollviewchange")}} Firefox OS Browser API-specificSent when asynchronous scrolling (i.e. APCZ) starts or stops.
{{event("mozbrowsersecuritychange")}} Firefox OS Browser API-specificSent when the SSL state changes within a browser iframe.
{{event("mozbrowserselectionstatechanged")}} Firefox OS Browser API-specificSent when the text selected inside the browser {{HTMLElement("iframe")}} content changes. Note that this is deprecated, and newer implementations use {{event("mozbrowsercaretstatechanged")}} instead.
{{event("mozbrowsershowmodalprompt")}} Firefox OS Browser API-specificSent when {{domxref("window.alert","alert()")}}, {{domxref("window.confirm","confirm()")}} or {{domxref("window.prompt","prompt()")}} are called within a browser iframe
{{event("mozbrowsertitlechange")}} Firefox OS Browser API-specificSent when the document.title changes within a browser iframe.
{{event("mozbrowserusernameandpasswordrequired")}} Firefox OS Browser API-specificSent when an HTTP authentification is requested.
{{event("mozbrowservisibilitychange")}} Firefox OS Browser API-specificSent when the visibility state of the current browser iframe {{HTMLElement("iframe")}} changes, for example due to a call to {{domxref("HTMLIFrameElement.setVisible","setVisible()")}}.
{{event("MozGamepadButtonDown")}} To be specifiedA gamepad button is pressed down.
{{event("MozGamepadButtonUp")}} To be specifiedA gamepad button is released.
{{event("MozMousePixelScroll")}} {{deprecated_inline}} Mozilla specificThe wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)
{{event("MozOrientation")}} {{deprecated_inline}} Mozilla specificFresh data is available from an orientation sensor (see deviceorientation).
{{event("MozScrolledAreaChanged")}}{{domxref("UIEvent")}}Mozilla specificThe document view has been scrolled or resized.
{{event("moztimechange")}} Mozilla specificThe time of the device has been changed.
MozTouchDown {{deprecated_inline}} Mozilla specificA touch point is placed on the touch surface (use touchstart instead).
MozTouchMove {{deprecated_inline}} Mozilla specificA touch point is moved along the touch surface (use touchmove instead).
MozTouchUp {{deprecated_inline}} Mozilla specificA touch point is removed from the touch surface (use touchend instead).
{{event("alerting")}}{{domxref("CallEvent")}}To be specifiedThe correspondent is being alerted (his/her phone is ringing).
{{event("busy")}}{{domxref("CallEvent")}}To be specifiedThe line of the correspondent is busy.
{{event("callschanged")}}{{domxref("CallEvent")}}To be specifiedA call has been added or removed from the list of current calls.
onconnected {{event("connected")}}{{domxref("CallEvent")}}To be specifiedA call has been connected.
{{event("connecting")}}{{domxref("CallEvent")}}To be specifiedA call is about to connect.
{{event("delivered")}}{{domxref("SMSEvent")}}To be specifiedAn SMS has been successfully delivered.
{{event("dialing")}}{{domxref("CallEvent")}}To be specifiedThe number of a correspondent has been dialed.
{{event("disabled")}} Firefox OS specificWifi has been disabled on the device.
{{event("disconnected")}}{{domxref("CallEvent")}}To be specifiedA call has been disconnected.
{{event("disconnecting")}}{{domxref("CallEvent")}}To be specifiedA call is about to disconnect.
{{event("enabled")}} Firefox OS specificWifi has been enabled on the device.
{{event("error_(Telephony)","error")}}{{domxref("CallEvent")}}To be specifiedAn error occurred.
{{event("held")}}{{domxref("CallEvent")}}To be specifiedA call has been held.
{{event("holding")}}{{domxref("CallEvent")}}To be specifiedA call is about to be held.
{{event("incoming")}}{{domxref("CallEvent")}}To be specifiedA call is being received.
{{event("received")}}{{domxref("SMSEvent")}}To be specifiedAn SMS has been received.
{{event("resuming")}}{{domxref("CallEvent")}}To be specifiedA call is about to resume.
{{event("sent")}}{{domxref("SMSEvent")}}To be specifiedAn SMS has been sent.
{{event("statechange")}}{{domxref("CallEvent")}}To be specifiedThe state of a call has changed.
{{event("statuschange")}} Firefox OS specificThe status of the Wifi connection changed.
{{event("overflow")}}{{domxref("UIEvent")}}Mozilla specificAn element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with overflow != visible).
{{event("smartcard-insert")}} Mozilla specificA smartcard has been inserted.
{{event("smartcard-remove")}} Mozilla specificA smartcard has been removed.
{{event("stkcommand")}} Firefox OS specificThe STK Proactive Command is issued from ICC.
{{event("stksessionend")}} Firefox OS specificThe STK Session is terminated by ICC.
text Mozilla SpecificA generic composition event occurred.
{{event("touchenter")}}{{domxref("TouchEvent")}}Touch Events Removed 
{{event("touchleave")}}{{domxref("TouchEvent")}}Touch Events Removed 
{{event("underflow")}}{{domxref("UIEvent")}}Mozilla specificAn element is no longer overflowed by its content (only works for elements styled with overflow != visible).
uploadprogress {{deprecated_inline}}{{domxref("ProgressEvent")}}Mozilla SpecificUpload is in progress (see {{event("progress")}}).
+

{{event("ussdreceived")}}

+ 		 Firefox OS specificA new USSD message is received
{{event("voicechange")}} Firefox OS specificThe {{domxref("MozMobileConnection.voice")}} object changes values.
+ +

Mozilla-specific events

+ +
+

Note: those events are never exposed to web content and can only be used in chrome content context.

+
+ +

XUL events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
{{event("broadcast")}} XULAn observer noticed a change to the attributes of a watched broadcaster.
{{event("CheckboxStateChange")}} XULThe state of a checkbox has been changed either by a user action or by a script (useful for accessibility).
close XULThe close button of the window has been clicked.
{{event("command")}} XULAn element has been activated.
{{event("commandupdate")}} XULA command update occurred on a commandset element.
{{event("DOMMenuItemActive")}} XULA menu or menuitem has been hovered or highlighted.
{{event("DOMMenuItemInactive")}} XULA menu or menuitem is no longer hovered or highlighted.
{{event("popuphidden")}}PopupEventXULA menupopup, panel or tooltip has been hidden.
{{event("popuphiding")}}PopupEventXULA menupopup, panel or tooltip is about to be hidden.
{{event("popupshowing")}}PopupEventXULA menupopup, panel or tooltip is about to become visible.
{{event("popupshown")}}PopupEventXULA menupopup, panel or tooltip has become visible.
{{event("RadioStateChange")}} XULThe state of a radio has been changed either by a user action or by a script (useful for accessibility).
{{event("ValueChange")}} XULThe value of an element has changed (a progress bar for example, useful for accessibility).
+ +

Add-on-specific events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
MozSwipeGesture Addons specificA touch point is swiped across the touch surface
MozMagnifyGestureStart Addons specificTwo touch points start to move away from each other.
MozMagnifyGestureUpdate Addons specificTwo touch points move away from each other (after a MozMagnifyGestureStart).
MozMagnifyGesture Addons specificTwo touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).
MozRotateGestureStart Addons specificTwo touch points start to rotate around a point.
MozRotateGestureUpdate Addons specificTwo touch points rotate around a point (after a MozRotateGestureStart).
MozRotateGesture Addons specificTwo touch points rotate around a point (after a sequence of MozRotateGestureUpdate).
MozTapGesture Addons specificTwo touch points are tapped on the touch surface.
MozPressTapGesture Addons specificA "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).
MozEdgeUIGesture Addons specificA touch point is swiped across the touch surface to invoke the edge UI (Win8 only).
MozAfterPaint Addons specificContent has been repainted.
DOMPopupBlocked Addons specificA popup has been blocked
DOMWindowCreated Addons specificA window has been created.
DOMWindowClose Addons specificA window is about to be closed.
DOMTitleChanged Addons specifcThe title of a window has changed.
DOMLinkAdded Addons specifcA link has been added a document.
DOMLinkRemoved Addons specifcA link has been removed inside from a document.
DOMMetaAdded Addons specificA meta element has been added to a document.
DOMMetaRemoved Addons specificA meta element has been removed from a document.
DOMWillOpenModalDialog Addons specificA modal dialog is about to open.
DOMModalDialogClosed Addons specificA modal dialog has been closed.
DOMAutoComplete Addons specificThe content of an element has been auto-completed.
DOMFrameContentLoaded Addons specificThe frame has finished loading (but not its dependent resources).
AlertActive Addons specificA notification element is shown.
AlertClose Addons specificA notification element is closed.
fullscreen Addons specificBrowser fullscreen mode has been entered or left.
sizemodechange Addons specificWindow has entered/left fullscreen mode, or has been minimized/unminimized.
MozEnteredDomFullscreen Addons specificDOM fullscreen mode has been entered.
SSWindowClosing Addons specificThe session store will stop tracking this window.
SSTabClosing Addons specificThe session store will stop tracking this tab.
SSTabRestoring Addons specificA tab is about to be restored.
SSTabRestored Addons specificA tab has been restored.
SSWindowStateReady Addons specificA window state has switched to "ready".
SSWindowStateBusy Addons specificA window state has switched to "busy".
TabOpen Addons specificA tab has been opened.
TabClose Addons specificA tab has been closed.
TabSelect Addons specificA tab has been selected.
TabShow Addons specificA tab has been shown.
TabHide Addons specificA tab has been hidden.
TabPinned Addons specificA tab has been pinned.
TabUnpinned Addons specificA tab has been unpinned.
+ +

Developer tool-specific events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
CssRuleViewRefreshed devtools specificThe "Rules" view of the style inspector has been updated.
CssRuleViewChanged devtools specificThe "Rules" view of the style inspector has been changed.
CssRuleViewCSSLinkClicked devtools specificA link to a CSS file has been clicked in the "Rules" view of the style inspector.
+ +

See also

+ + diff --git a/files/bn/web/guide/api/dom/index.html b/files/bn/web/guide/api/dom/index.html new file mode 100644 index 0000000000..d5171efe4e --- /dev/null +++ b/files/bn/web/guide/api/dom/index.html @@ -0,0 +1,21 @@ +--- +title: DOM developer guide +slug: Web/Guide/API/DOM +tags: + - API + - DOM + - Guide + - NeedsTranslation + - TopicStub +translation_of: Web/API/Document_Object_Model +--- +

{{draft}}

+

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

+

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

+

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

+

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

+

Why is the DOM important?

+

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

+

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

+

More about the DOM

+

{{LandingPageListSubpages}}

diff --git a/files/bn/web/guide/api/index.html b/files/bn/web/guide/api/index.html new file mode 100644 index 0000000000..743350c37b --- /dev/null +++ b/files/bn/web/guide/api/index.html @@ -0,0 +1,25 @@ +--- +title: Guide to Web APIs +slug: Web/Guide/API +tags: + - API + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide/API +--- +

এখানে আপনি ওয়েব ডেভেলপমেন্ট আর্কিটেকচার যেসকল এপিআই এর ভিত্তিপ্রস্তরের উপর দাঁড়িয়ে আছে, তার সম্পর্কে ধারণা পেতে কিছু আর্টিকেলের লিংক এখানে পাবেন।

+

Web APIs from A to Z

+ +

{{ListGroups}}

+ +

See also

+ + diff --git a/files/bn/web/guide/api/webrtc/index.html b/files/bn/web/guide/api/webrtc/index.html new file mode 100644 index 0000000000..c4dbedf65c --- /dev/null +++ b/files/bn/web/guide/api/webrtc/index.html @@ -0,0 +1,39 @@ +--- +title: ওয়েব আরটিসি (WebRTC) +slug: Web/Guide/API/WebRTC +tags: + - এপিআই + - ওয়েব আরটিসি + - পরিচিতি + - ল্যান্ডিং +translation_of: Web/API/WebRTC_API +--- +

WebRTC (যেখানে RTC এর পূর্ণরুপ Real-Time Communications) হল একটি প্রযুক্তি যা একাধিক ব্রাউজারের মধ্যে ব্রাউজার-ব্রাউজার অডিও/ভিডিও স্ট্রিমিং কিংবা ডাটা শেয়ারিং সুবিধা প্রদান করে থাকে। WebRTC এর সাহায্যে কোনরূপ প্লাগ-ইন বা এক্সটেনশন ব্যবহার ছাড়াই স্ট্যান্ডার্ড ওয়েব এপিআই এর সাহায্যে টেলিকনফারেন্সিং কিংবা ডাটা শেয়ারিং সম্ভব।

+ +

WebRTC এর অংশগুলোকে জাভাস্ক্রিপ্ট এপিআই এর সাহায্য ব্যবহার করা যায়: Network Stream API একটি অডিও/ভিডিও স্ট্রিম নির্দেশ করে, PeerConnection API এর সাহায্য দুই বা ততোধিক ব্রাউজারের মধ্যে সংযোগ স্থাপন করা যায়, এবং DataChannel API এর সাহায্য অডিও/ভিডিও ব্যতীত অন্যান্য ধরণের ডাটা আদানপ্রদান করা যায় - যা গেমিং, চ্যাট কিংবা ফাইল ট্রান্সফারের জন্য অসাধারণ!

+ +
+

উল্লেখ্য: এই ডকুমেন্টেশন নতুন যায়গায় চলে যাচ্ছে।

+
+ +

গাইড

+ +
+
WebRTC এর সাহায্যে পিয়ার-টু-পিয়ার যোগাযোগ
+
ওয়েবআরটিসি এপিআই এর সাহায্যে পিয়ার টু পিয়ার যোগাযোগ করা।
+
WebRTC এর আর্কিটেকচার পরিচিতি
+
WebRTC এর অনেকগুলো আলাদা আলাদা অংশ রয়েছে যা নবাগতদের জন্য প্রচণ্ড বিভ্রান্তকর। এই আর্টিকেলে এইসকল অংশগুলোর পরিচয় দিয়ে, তারা কিভাবে একত্রে কাজ করে - সে সম্পর্কে ধারণা দেওয়া হয়েছে।
+
WebRTC এর সাধারণ বিষয়াবলী
+
Now you understand the WebRTC architecture, you can move on to this article, which takes you through the creation of a basic cross-browser RTC App.
+
+ +

রেফারেন্স

+ +
+
Navigator.getUserMedia
+
মিডিয়া (ভিডিও/অডিও) ক্যাপচার করার এপিআই।
+
RTCPeerConnection
+
দুইটি পিয়ারের মধ্যে ডাটা স্ট্রিমিং করার ইন্টারফেস।
+
RTCDataChannel
+
পিয়ার কানেকশনের মধ্যে দিয়ে ডাটা (মিডিয়া নয় এমন) পাঠানোর ইন্টারফেস।
+
diff --git a/files/bn/web/guide/events/index.html b/files/bn/web/guide/events/index.html new file mode 100644 index 0000000000..02a20ce36e --- /dev/null +++ b/files/bn/web/guide/events/index.html @@ -0,0 +1,37 @@ +--- +title: Event developer guide +slug: Web/Guide/Events +tags: + - DOM + - Event + - Guide + - NeedsTranslation + - NeedsUpdate + - TopicStub + - events +translation_of: Web/Guide/Events +--- +

{{draft()}}

+

Events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.

+

The overview page provides an introduction to the design pattern and a summary of the types of incidents which are defined and reacted to by modern web browsers.

+

The custom events page describes how the event code design pattern can be used in custom code to define new event types emitted by user objects, register listener functions to handle those events, and trigger the events in user code.

+

The remaining pages describe how to use events of different kinds defined by web browsers. Unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers.

+

The device on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the page on orientation coordinate systems and the page on the use of 3D transforms. That is different, but similar, to the change in device vertical orientation. 

+

The window in which the browser is displayed which might trigger events, for example, change size if the user maximizes the window or otherwise changes it.

+

The process loading of a web page might trigger events in response to the completion of different steps in the downloading, parsing, and rendering of the web page for display to the user.

+

The user interaction with the web page contents might trigger events. The events triggered by user interaction evolved during the early years of browser design and include a complicated system defining the sequence in which events will be called and the manner in which that sequence can be controlled. The different types of user interaction driven events include:

+ +

The modification of the web page in structure or content might trigger some events, as is explained in the mutation events page, but the use of these events has been deprecated in favour of the lighter Mutation Observer approach.

+

The media streams embedded in the HTML documents might trigger some events, as explained in the media events page.

+

The network requests made by a web page might trigger some events.

+

There are many other sources of events defined by web browsers for which pages are not yet available in this guide.

+
+

Note: This Event Developer Guide needs substantial work. The structure needs to be reorganized and the pages rewritten. Our hope is that everything you need to know about events will go under here.

+
+

Docs

+

{{LandingPageListSubpages}}

diff --git a/files/bn/web/guide/html/canvas_tutorial/index.html b/files/bn/web/guide/html/canvas_tutorial/index.html new file mode 100644 index 0000000000..2118fa3c97 --- /dev/null +++ b/files/bn/web/guide/html/canvas_tutorial/index.html @@ -0,0 +1,47 @@ +--- +title: ক্যানভাস টিউটোরিয়াল +slug: Web/Guide/HTML/Canvas_tutorial +tags: + - NeedsReview +translation_of: Web/API/Canvas_API/Tutorial +--- +

+

<canvas> হচ্ছে একটি HTML element যেটা স্ক্রিপ্টিং (সাধারণত JavaScript ) ব্যবহার করে  গ্রাফিক্স আঁকার জন্য ব্যবহার করা হয় । উদাহরণস্বরূপ  গ্রাফ আঁকতে, ছবি কম্পোজিশন অথবা সাধারন ( তবে বেশি সাধারন নয় ) অ্যানিমেশন তৈরি করতে এটি ব্যবহার করা হয় । ডানপাশের ছবিতে <canvas> প্রয়োগ করে কিছু উদাহরণ দেওয়া হয়েছে যা আমরা পরে এর টিউটোরিয়াল এ দেখবো।

+

<canvas> সর্বপ্রথম Apple এর Mac OS X ড্যাশবোর্ড এ ব্যবহার করার জন্য প্রকাশিত হয় এবং পরে Safari এবং  Google Chrome এ প্রয়োগ করা হয়. Gecko 1.8- ভিত্তিক browsers, যেমন Firefox 1.5 ও এই element কে সমর্থন করে. এই <canvas> element হচ্ছে  WhatWG Web applications 1.0 এর একটি অংশ যা HTML5 নামেও পরিচিত।

+

এই টিউটোরিয়াল কিভাবে <canvas> element ব্যবহার করে প্রাথমিক ভাবে 2D গ্রাফিক্স তৈরি করা যায় তা বর্ণনা করে । আপনি canvas ব্যবহার করে কি করতে পারবেন এই উদাহরণগুলো তার সুস্পষ্ট ধারণা দেয় এবং code কে snippets করে আপনার নিজের কাঙ্ক্ষিত বিষয়কে তৈরি করতে শুরু করে ।

+

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

+

<canvas> element ব্যবহার করা কঠিন কিছু নয় তবে আপনার HTML এবং  JavaScript সম্পর্কে প্রাথমিক ধারণা থাকতে হবে । কিছু পুরাতন browsers এ  <canvas> element সমর্থন করে না, কিন্তু সম্প্রতি সকল প্রধান browsers গুলো তে সমর্থন করে ।  canvas এর default সাইজ হচ্ছে 300px * 150px (width * height). কিন্তু custom size গুলো CSS এর height এবং width property ব্যবহার করে উল্লেখ করা যায় । canvas এ গ্রাফিক্স আঁকতে গেলে আমরা javascript context object ব্যবহার করি , যা গ্রাফিক্সটিকে অনেক উন্নতমানের করে তুলে ।

+

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

+ +

আরও দেখুন

+ +

A note to contributors

+

Due to an unfortunate technical error that occurred the week of June 17, 2013, we lost the history of this tutorial, including attributions to all past contributors to its content. We apologize for this, and hope you'll forgive this unfortunate mishap.

+
+ {{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}
diff --git a/files/bn/web/guide/html/content_editable/index.html b/files/bn/web/guide/html/content_editable/index.html new file mode 100644 index 0000000000..0e8770f603 --- /dev/null +++ b/files/bn/web/guide/html/content_editable/index.html @@ -0,0 +1,44 @@ +--- +title: Content Editable +slug: Web/Guide/HTML/Content_Editable +tags: + - NeedsReview +translation_of: Web/Guide/HTML/Editable_content +--- +

HTML5 এ যেকোনো অংশ পরিবর্তনীয়। কিছু জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার ব্যবহার করে আপনি একটি ওয়েব পেজ একটি সম্পূর্ণ এবং দ্রুত rich-text editor এ রুপান্তর করতে পারবেন । এই অনুচ্ছেদ আপনাকে এর কার্যকারিতা সম্পর্কে কিছু তথ্য প্রদান করবে।

+

সামঞ্জস্যতা

+

পরিবর্তনীয় বিষয়গুলো সম্পূর্ণভাবে বর্তমান ব্রাউজার গুলোর সাথে সামঞ্জস্যপূর্ণ।

+ +

এখন পর্যন্ত অপেরা মিনি তে সমর্থিত নয়।

+

এটা কিভাবে কাজ করে ?

+

contenteditable এট্রিবিউট  টি আপনার HTML উপাদান এ true সেট করুন। এটা প্রায় সকল HTML উপাদান এ ব্যবহার করা যায়।

+

উদাহরণ

+

একটি সহজ উদাহরণ

+
<!DOCTYPE html>
+<html>
+  <body>
+    <div contenteditable="true">
+      This text can be edited by the user.
+    </div>
+  </body>
+</html>
+

আপনি এখানে লোকালস্টোরেজ ব্যবহার করে জাভাস্ক্রিপ্ট ইন্টিগ্রেশন এর একটি কার্যকর উদাহরন দেখতে পারেন। এই উৎস-এর সাথে

+

আরও দেখুন

+
user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
+

কিভাবে এই বিষয় এর সাথে কাজ করবেন  (old IE style API) এবং এখানে

+
+ {{ languages({ "ja": "ja/HTML/Content_Editable", "zh-cn": "zh-cn/HTML/Content_Editable" }) }}
diff --git a/files/bn/web/guide/html/forms/index.html b/files/bn/web/guide/html/forms/index.html new file mode 100644 index 0000000000..2e0e03ea83 --- /dev/null +++ b/files/bn/web/guide/html/forms/index.html @@ -0,0 +1,342 @@ +--- +title: HTML forms guide +slug: Web/Guide/HTML/Forms +tags: + - NeedsReview +translation_of: Learn/Forms +--- +

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

+

বর্ন মালা

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

HTML Documentation

+

HTML Elements

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

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

+
+

HTML Attributes

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

Normative reference

+ diff --git a/files/bn/web/guide/index.html b/files/bn/web/guide/index.html new file mode 100644 index 0000000000..e2979917bc --- /dev/null +++ b/files/bn/web/guide/index.html @@ -0,0 +1,20 @@ +--- +title: ওয়েব ডেভেলপার গাইড +slug: Web/Guide +translation_of: Web/Guide +--- +

এই আর্টিকেলগুলো আপনাকে নির্দিষ্ট কিছু প্রযুক্তি এবং এপিআই ব্যবহার সংক্রান্ত তথ্য দেবে।

+
+

সাবধান: আমাদের কন্টেন্টগুলো ঠিকমত সাজানোর আগ পর্যন্ত পেজটির অবস্থা বেশ অগোছালো থাকতে পারে। দুঃখিত!

+
+

{{LandingPageListSubpages}}

+
+
+ জাভাস্ক্রিপ্ট
+
+ ওয়েবে অ্যাপ্লিকেশন লেখার জন্য শক্তিশালী প্রোগ্রামিং ল্যাঙ্গুয়েজটি হল জাভাস্ক্রিপ্ট।
+
+

আরও দেখুন

+ diff --git a/files/bn/web/guide/performance/index.html b/files/bn/web/guide/performance/index.html new file mode 100644 index 0000000000..e8280ffae1 --- /dev/null +++ b/files/bn/web/guide/performance/index.html @@ -0,0 +1,9 @@ +--- +title: অপটিমাইজেশন অ্যান্ড পারফরমেন্স +slug: Web/Guide/Performance +tags: + - NeedsReview +translation_of: Web/Guide/Performance +--- +

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

+

{{LandingPageListSubpages}}

diff --git "a/files/bn/web/guide/\340\246\227\340\247\215\340\246\260\340\246\276\340\246\253\340\246\277\340\246\225\340\247\215\340\246\270/index.html" "b/files/bn/web/guide/\340\246\227\340\247\215\340\246\260\340\246\276\340\246\253\340\246\277\340\246\225\340\247\215\340\246\270/index.html" new file mode 100644 index 0000000000..fdf50fc2b7 --- /dev/null +++ "b/files/bn/web/guide/\340\246\227\340\247\215\340\246\260\340\246\276\340\246\253\340\246\277\340\246\225\340\247\215\340\246\270/index.html" @@ -0,0 +1,53 @@ +--- +title: গ্রাফিক্স অন দি ওয়েব +slug: Web/Guide/গ্রাফিক্স +tags: + - NeedsReview +translation_of: Web/Guide/Graphics +--- +

আধুনিক ওয়েব সাইট এবং অ্যাপ্লিকেশনে প্রায়ই গ্রাফিক্স উপস্থাপন প্রয়োজন পরে। {{HTMLElement("img")}} উপাদান ব্যবহার করে সহজেই স্ট্যাটিক ইমেজ প্রদর্শিত করা যায়, অথবা {{cssxref("background-image")}} প্রোপার্টি ব্যবহার করে এইচটিএমএল উপাদানের পটভূমি নির্ধারণ করা যায়।

+

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

+
+
+

2D গ্রাফিক্স

+
+
+ Canvas(ক্যানভাস)
+
+ এই {{HTMLElement("canvas")}}উপাদানটি APIs প্রদান করে যেন জাভাস্ক্রিপ্ট ব্যাবহার করে 2D গ্রাফিক্স তৈরি করা যায়।
+
+ SVG(এস ভি জি)
+ স্কেলেবল ভেক্টর গ্রাফিক্স (SVG) লাইনস, কারভস, এবং অন্যান্য জ্যামিতিক আকার প্রদান করে। bitmaps ব্যাবহার করা এড়িয়ে চলার মাধ্যমে, আপনি যেকোনো আকারের ছবি পরিছন্নভাবে তৈরি করতে পারেন।
+
+

সম্পূর্ণ দেখুন্‌...

+
+
+

3D গ্রাফিক্স

+
+
+ WebGL(ওয়েব জি এল)
+
+
+
+ WebGL শুরু করার একটি নির্দেশিকা, ওয়েবের জন্য 3D গ্রাফিক্স API. এই প্রযুক্তি আপনাকে ওয়েবের মধ্যে স্ট্যান্ডার্ড OpenGL ES ব্যাবহার করতে দেয়।
+
+
+
+

ভিডিও

+
+
+ HTML5 (অডিও এবং ভিডিও ব্যাবহার)
+
+
+
+ একটি HTML নথিতে ভিডিও এম্বেড এবং প্লেব্যাক নিয়ন্ত্রণ।
+
+
+
+ WebRTC(ওয়েব আর টি সি)
+
+  WebRTC(ওয়েব আর টি সি) এর RTC (আর টি সি) বলতে Real-Time Communications (রিয়েল টাইম কমিউনিকেশন) কে বুঝায়, এই প্রযুক্তি অডিও / ভিডিও স্ট্রিমিং এবং ব্রাউজার ক্লায়েন্টস (মিত্রগণ) মধ্যে তথ্য ভাগ করতে সক্ষম।
+
+
+
+

 

diff --git a/files/bn/web/html/block-level_elements/index.html b/files/bn/web/html/block-level_elements/index.html new file mode 100644 index 0000000000..e67042ed0e --- /dev/null +++ b/files/bn/web/html/block-level_elements/index.html @@ -0,0 +1,121 @@ +--- +title: Block-level elements +slug: Web/HTML/Block-level_elements +translation_of: Web/HTML/Block-level_elements +--- +

এইচটিএমএল (হাইপার টেক্সট মারকআপ ল্যাঙ্গুয়েজ) এর এলিমেন্টগুলো সাধানত "ব্লক-লেভেল" এলিমেন্ট অথবা "ইনলাইন" এলিমেন্ত । একটি ব্লক-লেভেল এলিমেন্ট তার প্যারেন্ট এলিমেন্তটর{কন্তাইনার} সমস্ত জায়গা দখল করে , সেজন্য একটি "ব্লক" বানানো হয় ।এগুলো বুজানোর জন্য এই প্রবন্ধটি সাহায্য করবে।

+ +

ব্রাউজারস এলিমেন্টর আগে এবং পরে এক নিওলাইনের সাথে ব্লক-লেভেল এলেমেন্টকেদেখায়।. নিচের উদাহরন ব্লক-লেভেল এলেমেন্টর প্রভাবের ব্যবহারিক প্রমান দেয়। 

+ +

ব্লক-লেভেল এলিমেন্টস 

+ +

এইচটিএমএল

+ +
<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>
+ +

সিএসএস

+ +
p { background-color: #8ABB55; }
+
+ +

{{ EmbedLiveSample('Block-level_Example') }}

+ +

ব্যবহারবিধি

+ + + +

ব্লক-লেভেল বনাম. ইনলাইন

+ +

ব্লক-লেভেল এলিমেন্টস এবং ইনলাইনের মধ্যে দুইটি বিশেষ পার্থক্য আসে।:

+ +
+
ফরম্যাটিং
+
বাই ডিফল্ট,ব্লক-লেভেল এলিমেন্টসনতুন লাইনেই শুরু করে, কিন্ত ইনলাইন এলিমেন্টস একটি লাইনের যেকোনো জায়গা থেকে শুরু করতে পারে।
+
কনটেন্ট মডেল
+
সাধারণত, ব্লক-লেভেল এলিমেন্টস ইনলাইন এলিমেন্টস এবং বাকি ব্লক-লেভেল এলিমেন্টসকে ধরে রাখে। স্বভাবত গঠনগত স্বাতন্ত্র হল ঐ ধারনা যা ব্লক-লেভেল এলিমেন্টস ইনলাইন এলিমেন্টস থেকেও "বড়" কাঠামো তৈরি করে। 
+
+ +

ব্লক-লেভেলের স্বাতন্ত্র বনাম.ইনলাইন এলিমেন্টস এইচটিএমএলের সবিস্তার বিবরণীকে ৮.০১ পর্যন্ত ব্যবহার করা হয়। এইচটিএমএল৫ এ,এই বিনারি স্বাতন্ত্রকে আরো জটিল কন্টটেন্ট ক্যাটেগরিস সেটে প্রতিস্থাপন করা হয়।এইচটিএমএল৫ এ "ব্লক-লেভেল" ক্যাটেগরিটি মোটামোটিভাবে  ফ্লও কনটেন্ট  ক্যাটাগরিতে সারা দেয়, যখন "ইনলাইন" ফ্রাসিং কনটেন্ট  এ সারা দেয়, কিন্তু কোন বাড়তি ক্যাটাগরি নেই।

+ +

এলিমেন্টস

+ +

নিচে এইচটিএমএলব্লক-লেভেল এলিমেন্টসের সম্পূর্ণ তালিকা দেওয়া হল (যদিও "ব্লক-লেভেল" ব্যাখ্যা করা হইনই ঐএলিমেন্টের যা এইচটিএমএল৫ এ নতুন)।

+ +
+
+
{{ HTMLElement("address") }}
+
Contact information.
+
{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}
+
Article content.
+
{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}
+
Aside content.
+
{{ HTMLElement("blockquote") }}
+
Long ("block") quotation.
+
{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}
+
Drawing canvas.
+
{{ HTMLElement("dd") }}
+
Definition description.
+
{{ HTMLElement("div") }}
+
Document division.
+
{{ HTMLElement("dl") }}
+
Definition list.
+
{{ HTMLElement("fieldset") }}
+
Field set label.
+
+ +
+
{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}
+
Figure caption.
+
{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}
+
Groups media content with a caption (see {{ HTMLElement("figcaption") }}).
+
{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}
+
Section or page footer.
+
{{ HTMLElement("form") }}
+
Input form.
+
{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}
+
Heading levels 1-6.
+
{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}
+
Section or page header.
+
{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}
+
Groups header information.
+
{{ HTMLElement("hr") }}
+
Horizontal rule (dividing line).
+
{{ HTMLElement("li") }}
+
List item.
+
{{ HTMLElement("main") }}
+
Contains the central content unique to this document.
+
{{ HTMLElement("nav") }}
+
Contains navigation links.
+
+ +
+
{{ HTMLElement("noscript") }}
+
Content to use if scripting is not supported or turned off.
+
{{ HTMLElement("ol") }}
+
Ordered list.
+
{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}
+
Form output.
+
{{ HTMLElement("p") }}
+
Paragraph.
+
{{ HTMLElement("pre") }}
+
Preformatted text.
+
{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}
+
Section of a web page.
+
{{ HTMLElement("table") }}
+
Table.
+
{{ HTMLElement("tfoot") }}
+
Table footer.
+
{{ HTMLElement("ul") }}
+
Unordered list.
+
{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}
+
Video player.
+
+
+ +

আরো দেখুন

+ + diff --git a/files/bn/web/html/canvas/index.html b/files/bn/web/html/canvas/index.html new file mode 100644 index 0000000000..b64f663d74 --- /dev/null +++ b/files/bn/web/html/canvas/index.html @@ -0,0 +1,73 @@ +--- +title: ক্যানভাস +slug: Web/HTML/Canvas +translation_of: Web/API/Canvas_API +--- +

 HTML5 এ যুক্ত HTML {{HTMLElement("canvas")}} এলিমেন্টটি ব্যবহার করে স্ক্রিপ্টিংয়ের (সাধারণত জাভাস্ক্রিপ্ট) সাহায্যে গ্রাফিক্স আঁকা যায়। উদাহরণস্বরুপ, এটি গ্রাফিক্স আঁকা, ছবির কম্পোজিশন তৈরি করা, অ্যানিমেশন তৈরি করা অথবা এমনি রিয়েল-টাইম ভিডিও রেন্ডারিং অথবা প্রসেসিংয়ের কাজেও ব্যবহার করা যায়।

+

<canvas> এর জন্য মোজিলা অ্যাপ্লিকেশনসমূহ সাপোর্ট পাওয়া শুরু করেছে গিকো ১.৮ (বা ফায়ারফক্স ১.৫) থেকে। মূলত এ্যাপল তাদের ড্যাশবোর্ড এবং সাফারির জন্য এলিমেন্টটি প্রকাশ করে। ইন্টারনেট এক্সপ্লোরার ৯ ভার্সন থেকে <canvas> সাপোর্ট করে; ইন্টারনেট এক্সপ্লোরারের পুরনো সংস্করণের জন্য গুগলের Explorer Canvas প্রজেক্টের একটি স্ক্রিপ্ট যুক্ত করে কার্যকরভাবে <canvas> এর সাপোর্ট যোগ করা যায়। গুগল ক্রোম এবং অপেরা ৯ <canvas> ক্যানভাস সাপোর্ট করে।

+

<canvas> টি দিয়ে WebGL এর সাহায্যে হার্ডওয়্যার-এক্সেলারেশনের মাধ্যমে ওয়েব পেজে ত্রিমাত্রিক (3D) গ্রাফিক্স দেখানো সম্ভব।

+
+
+

ডকুমেন্টেশন

+
+
+ স্পেসিফিকেশন
+
+ <canvas> এলিমেট হল WhatWG ওয়েব অ্যাপ্লিকেশনস ১.০ স্পেসিফিকেশন বা HTML5 এর অংশ।
+
+ ক্যানভাস টিউটোরিয়াল
+
+  <canvas> এর সাধারণ ব্যবহার এবং এর অ্যাডভান্সড ফিচারের ওপর একটি বিস্তারিত টিউটোরিয়াল।
+
+ কোড স্নিপেট: ক্যানভাস
+
+ <canvas> সংক্রান্ত এক্সটেনশন ডেভেলপার সংশ্লিষ্ট কোড স্নিপেট।
+
+ ক্যানভাস উদাহরণ
+
+ কিছু <canvas> ডেমো।
+
+ ক্যানভাসে DOM অবজেক্ট আঁকা
+
+ যেভাবে HTML এলিমেন্টের ন্যায় DOM কন্টেন্ট একটি ক্যানভাসে আঁকবেন।
+
+ একটি সাধারণ raycaster
+
+ ক্যানভাসের সাহায্যে ray-tracing এনিমেশনের ডেমো।
+
+ ক্যানভাস DOM ইন্টারফেস
+
+ গিকোতে ক্যানভাস DOM ইন্টারফেস সমূহ।
+
+

সব দেখুন...

+
+
+

কমিউনিটি

+ +

তথ্যভান্ডার

+ +

লাইব্রেরি

+
    +
  • libCanvas একটি হালকা ও শক্তিশালী ক্যানভাস ফ্রেমওয়ার্ক
    • +
  • Processing.js হল প্রসেসিং ভিজ্যুয়ালাইজেশন ল্যাঙ্গুয়েজের পোর্ট
    • +
  • EaselJS হল একটি ফ্ল্যাশের মত API সমৃদ্ধ লাইব্রেরি
    • +
  • PlotKit হল একটি চার্ট ও গ্রাফ তৈরির লাইব্রেরি
    • +
  • Rekapi হল ক্যানভাসের জন্য অ্যানিমেশনের কি-ফ্রেম করার API।
    • +
  • PhiloGL হল ডাটা ভিজ্যুয়ালাইজেশন, সৃজনশীল কোডিং ও গেম ডেভেলপমেন্টের জন্য একটি WebGL ফ্রেমওয়ার্ক।
    • +
  • JavaScript InfoVis Toolkit ওয়েবের জন্য ইন্টারএ্যাক্টিভ 2D ক্যানভাস ডাটা ভিজ্যুয়ালাইজেশন তৈরি করে।
    • +
  • Frame-Engine হল অ্যাপ্লিকেশন ও গেম ডেভেলপ করার একটি ফ্রেমওয়ার্ক।
    • +
+ + +
+
+
+ {{HTML5ArticleTOC()}}
diff --git a/files/bn/web/html/canvas/tutorial/index.html b/files/bn/web/html/canvas/tutorial/index.html new file mode 100644 index 0000000000..8ac4e04195 --- /dev/null +++ b/files/bn/web/html/canvas/tutorial/index.html @@ -0,0 +1,42 @@ +--- +title: ক্যানভাস টিউটোরিয়াল +slug: Web/HTML/Canvas/Tutorial +translation_of: Web/API/Canvas_API/Tutorial +--- +

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

+

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

+

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

+

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

+

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

+

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

+

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

+ +

আরও দেখুন

+ +
+ {{ Next("Canvas_tutorial/Basic_usage") }}
diff --git a/files/bn/web/html/cors_settings_attributes/index.html b/files/bn/web/html/cors_settings_attributes/index.html new file mode 100644 index 0000000000..4888d9d63c --- /dev/null +++ b/files/bn/web/html/cors_settings_attributes/index.html @@ -0,0 +1,130 @@ +--- +title: সি ও আর এস বৈশিষ্ট্যাবলী সেটিংস +slug: Web/HTML/CORS_settings_attributes +tags: + - এইচ টি এম এল +translation_of: Web/HTML/Attributes/crossorigin +--- +

 

+ +
+
HTML5 এর মধ্যে, যেমন {{HTMLElement ("গান")}} অথবা হিসাবে সি ও আর এস জন্য সমর্থন প্রদান যা কিছু HTML উপাদান, {{HTMLElement ("ভিডিও")}}, আপনি কনফিগার করতে দেয়, যা একটি crossorigin অ্যাট্রিবিউট (crossOrigin সম্পত্তি), আছে সি ও আর এস উপাদান এর সংগৃহীত তথ্য জন্য অনুরোধ. এই বৈশিষ্ট্যাবলী গণিত, এবং নিম্নলিখিত সম্ভব মান আছে:
+
+ + + + + + + + + + + + + + + + +
KeywordDescription
anonymousCORS requests for this element will not have the credentials flag set.
use-credentialsCORS requests for this element will have the credentials flag set; this means the request will provide credentials.
+ +

 

+ +

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

+ +

 বিশেষ উল্লেখ

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}{{Spec2('HTML WHATWG')}} 
+ +

 ব্রাউজার উপযুক্ততা

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support13{{ CompatGeckoDesktop("8.0") }}11{{ CompatNo() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoDesktop("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoMobile("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 আরো দেখুন

+ + diff --git a/files/bn/web/html/element/a/index.html b/files/bn/web/html/element/a/index.html new file mode 100644 index 0000000000..1f37ace290 --- /dev/null +++ b/files/bn/web/html/element/a/index.html @@ -0,0 +1,495 @@ +--- +title: +slug: Web/HTML/Element/a +translation_of: Web/HTML/Element/a +--- +

The HTML Anchor Element (<a>) defines a hyperlink to a location on the same page or any other page on the Web. It can also be used (in an obsolete way) to create an anchor point—a destination for hyperlinks within the content of a page, so that links aren't limited to connecting simply to the top of a page.

+ +
<a href="https://developer.mozilla.org">MDN</a>
+ + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, phrasing content, interactive content, palpable content.
Permitted contentTransparent, containing either flow content or phrasing content.
Tag omission{{no_tag_omission}}
Permitted parent elementsAny element that accepts phrasing content, or any element that accepts flow content.
DOM interface{{domxref("HTMLAnchorElement")}}
+ +

আট্ট্রিবিউট 

+ +

This element includes the global attributes.

+ +
+
{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}
+
This attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource so that when the user clicks on the link they will be prompted to save it as a local file. If the attribute has a value, the value will be used as the pre-filled file name in the Save prompt that opens when the user clicks on the link (the user can change the name before actually saving the file of course). There are no restrictions on allowed values (though / and \ will be converted to underscores, preventing specific path hints), but you should consider that most file systems have limitations with regard to what punctuation is supported in file names, and browsers are likely to adjust file names accordingly. +
+

Note:

+ +
    +
  • Can be used with blob: URLs and data: URLs, to make it easy for users to download content that is generated programmatically using JavaScript (e.g. a picture created using an online drawing Web app).
    • +
  • If the HTTP header Content-Disposition: is present and gives a different filename than this attribute, the HTTP header has priority over this attribute.
    • +
  • If this attribute is present and Content-Disposition: is set to inline, Firefox gives priority to Content-Disposition, like for the filename case, while Chrome gives priority to the download attribute.
    • +
  • This attribute is only honored for links to resources with the same-origin.
    • +
+
+
+
{{htmlattrdef("href")}}
+
This was the single required attribute for anchors defining a hypertext source link, but is no longer required in HTML5. Omitting this attribute creates a placeholder link. The href attribute indicates the link target, either a URL or a URL fragment. A URL fragment is a name preceded by a hash mark (#), which specifies an internal target location (an ID) within the current document. URLs are not restricted to Web (HTTP)-based documents. URLs might use any protocol supported by the browser. For example, file, ftp, and mailto work in most user agents. +
+

Note: You can use the special fragment "top" to create a link back to the top of the page; for example <a href="#top">Return to top</a>. This behavior is specified by HTML5.

+
+
+
{{htmlattrdef("hreflang")}}
+
This attribute indicates the language of the linked resource. It is purely advisory. Allowed values are determined by BCP47 for HTML5 and by RFC1766 for HTML4. Use this attribute only if the {{htmlattrxref("href", "a")}} attribute is present.
+
{{htmlattrdef("media")}} {{HTMLVersionInline(5)}}
+
This attribute specifies the media which the linked resource applies to. Its value must be a media query. This attribute is mainly useful when linking to external stylesheets by allowing the user agent to pick the best adapted one for the device it runs on. +
+

Usage note:

+ +
    +
  • In HTML 4, only simple white-space-separated list of media description literals, i.e. media types and groups, where defined and allowed as values for this attribute, like print, screen, aural, braille, ... HTML 5 extended this to any kind of media queries, which are a superset of the allowed values of HTML 4.
    • +
  • Browsers not supporting the CSS3 Media Queries won't necessarily recognize the adequate link; do not forget to set fallback links, the restricted set of media queries defined in HTML 4.
    • +
+
+
+
{{htmlattrdef("ping")}} {{HTMLVersionInline(5)}}
+
The 'ping' attribute, if present, sends the URLs of the resources a notification/ping if the user follows the hyperlink.
+
{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
+
A string indicating which referrer to use when fetching the resource: +
    +
  • "no-referrer" meaning that the Referer: header will not be sent.
    • +
  • "no-referrer-when-downgrade" meaning that no Referer: header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.
    • +
  • "origin" meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.
    • +
  • "origin-when-cross-origin" meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path. 
    • +
  • "unsafe-url" meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.
    • +
+
+
{{htmlattrdef("rel")}}
+
For anchors containing the href attribute, this attribute specifies the relationship of the target object to the link object. The value is a space-separated list of link types values. The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the href attribute is present.
+
{{htmlattrdef("target")}}
+
This attribute specifies where to display the linked resource. In HTML4, this is the name of, or a keyword for, a frame. In HTML5, it is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). The following keywords have special meanings: +
    +
  • _self: Load the response into the same HTML4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.
    • +
  • _blank: Load the response into a new unnamed HTML4 window or HTML5 browsing context.
    • +
  • _parent: Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
    • +
  • _top: In HTML4: Load the response into the full, original window, canceling all other frames. In HTML5: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
    • +
+ Use this attribute only if the href attribute is present.
+
{{htmlattrdef("type")}}
+
This attribute specifies the media type in the form of a {{Glossary("MIME type")}} for the link target. Generally, this is provided strictly as advisory information; however, in the future a browser might add a small icon for multimedia types. For example, a browser might add a small speaker icon when type is set to audio/wav. For a complete list of recognized MIME types, see http://www.w3.org/TR/html4/references.html#ref-MIMETYPES. Use this attribute only if the href attribute is present.
+
+ +

Obsolete

+ +
+
{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}
+
This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in RFC 2045. The default value is ISO-8859-1. +
+

Usage note: This attribute is obsolete in HTML5 and should not be used by authors. To achieve its effect, use the HTTP Content-Type header on the linked resource.

+
+
+
{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
For use with object shapes, this attribute uses a comma-separated list of numbers to define the coordinates of the object on the page.
+
{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
This attribute is required in an anchor defining a target location within a page. A value for name is similar to a value for the id core attribute and should be an alphanumeric identifier unique to the document. Under the HTML 4.01 specification, id and name both can be used with the <a> element as long as they have identical values. +
+

Usage note: This attribute is obsolete in HTML5, use global attribute id instead.

+
+
+
{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
This attribute specifies a reverse link, the inverse relationship of the rel attribute. It is useful for indicating where an object came from, such as the author of a document.
+
{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
This attribute is used to define a selectable region for hypertext source links associated with a figure to create an image map. The values for the attribute are circle, default, polygon, and rect. The format of the coords attribute depends on the value of shape. For circle, the value is x,y,r where x and y are the pixel coordinates for the center of the circle and r is the radius value in pixels. For rect, the coords attribute should be x,y,w,h. The x,y values define the upper-left-hand corner of the rectangle, while w and h define the width and height respectively. A value of polygon for shape requires x1,y1,x2,y2,... values for coords. Each of the x,y pairs defines a point in the polygon, with successive points being joined by straight lines and the last point joined to the first. The value default for shape requires that the entire enclosed area, typically an image, be used. +
Note: It is advisable to use the usemap attribute for the {{HTMLElement("img")}} element and the associated {{HTMLElement("map")}} element to define hotspots instead of the shape attribute.
+
+
+ +

মানসম্মত নয়

+ +
+
{{htmlattrdef("datafld")}} {{Non-standard_inline}}
+
This attribute specifies the column name from that data source object that supplies the bound data. +
+

Usage note: This attribute is non-standard and should not be used by authors. To achieve its effect, use scripting and a mechanism such as XMLHttpRequest to populate the page dynamically

+
+ + + + + + + + + + + + + + + + + + + + + +
SupportGeckoPrestoWebKitTrident
Not implementedNot implementedNot implementedIE4, IE5, IE6, IE7 (Removed in IE8)
Normative documentMicrosoft's Data Binding: dataFld Property (MSDN)
+
+
{{htmlattrdef("datasrc")}} {{Non-standard_inline}}
+
This attribute indicates the ID of the data source object that supplies the data that is bound to this element. +
+

Usage note: This attribute is non-standard and should not be used by authors. To achieve its effect, use scripting and a mechanism such as XMLHttpRequest to populate the page dynamically.

+
+ + + + + + + + + + + + + + + + + + + + + +
SupportGeckoPrestoWebKitTrident
Not implementedNot implementedNot implementedIE4, IE5, IE6, IE7 (Removed in IE8)
Normative documentMicrosoft's Data Binding: dataSrc Property (MSDN)
+
+
{{htmlattrdef("methods")}} {{Non-standard_inline}}
+
The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the title attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4. Methods Property (MSDN)
+
+ +
+
{{htmlattrdef("urn")}} {{Non-standard_inline}}
+
This supposedly Microsoft-supported attribute relates a uniform resource name (URN) with the link. While it is based on standards work years back, the meaning of URNs is still not well defined, so this attribute is meaningless. urn Property (MSDN)
+
+ +

উদাহরণ 

+ +

বহিঃ ঠিকানায় সংযোগ 

+ +
<!-- anchor linking to external file -->
+<a href="http://www.mozilla.com/">
+External Link
+</a>
+
+ +

Result

+ +

External Link

+ +

Creating a clickable image

+ +

This small example use an image to link to the MDN home page. The home page will open in a new browsing context, that is a new page or a new tab.

+ +
<a href="https://developer.mozilla.org/en-US/" target="_blank">
+  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN logo" />
+</a>
+
+ +

Result

+ +
+

{{EmbedLiveSample("Creating_a_clickable_image", "320", "64")}}

+
+ + + +

It's common to create buttons or links that will open in the user's email program to allow them to send a new message. This is done by using a mailto link. Here's a simple example:

+ +
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
+ +

This results in a link that looks like this: Send email to nowhere.

+ +

For additional details about the mailto URL scheme, such as how to include the subject, body, or other predetermined content, see Email links or {{RFC(6068)}}.

+ +

Using the download attribute to save a canvas as a PNG

+ +

If you want to allow a user to download an HTML Canvas as an image you can create a link with a download attribute and the canvas data as a file URL:

+ +
var link = document.createElement('a');
+link.innerHTML = 'download image';
+
+link.addEventListener('click', function(ev) {
+    link.href = canvas.toDataURL();
+    link.download = "mypainting.png";
+}, false);
+
+document.body.appendChild(link);
+ +

You can see this in action http://jsfiddle.net/codepo8/V6ufG/2/

+ +

স্পেসিফিকেশন

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Added the referrer attribute.
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '<a>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-a-element', '<a>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}{{Spec2('HTML4.01')}} 
+ +

ব্রাউসার কম্পিটিয়েবিলিটি

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
href="#top"{{CompatVersionUnknown}}{{CompatGeckoDesktop("10.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
download{{CompatChrome("14")}}{{CompatGeckoDesktop("20.0")}}Edge 13{{CompatOpera("15")}}{{CompatNo}}
ping{{CompatVersionUnknown}}{{CompatNo}} [2]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
referrerpolicy{{CompatChrome(46.0)}} [3] {{CompatGeckoDesktop("45")}} [4]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
href="#top"{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("10.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
download{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("20.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
ping{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
referrerpolicy{{CompatNo}}{{CompatChrome(46.0)}} [3]{{CompatGeckoMobile("45.0")}} [4]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(46.0)}} [3]
+
+ +

[1] Starting from Gecko 41 {{geckoRelease("41.0")}}, {{HTMLElement("a")}} without href attribute is no more classified as interactive content. Clicking it inside {{HTMLElement("label")}} will activate labelled content ({{bug(1167816)}}).

+ +

[2] Disabled by default

+ +

[3] Implemented behind a flag.

+ +

[4] From Firefox 42 to Firefox 44, the attribute was called referrer.

+ +

ক্লিক করুন ও ফোকাস করুন 

+ +

Whether clicking on an {{HTMLElement("a")}} causes it to (by default) become focused varies by browser and OS.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Does clicking on an {{HTMLElement("a")}} give it the focus?
Desktop BrowsersWindows 8.1OS X 10.9
Firefox 30.0YesYes
Chrome ≥39
+ (Chromium bug 388666)		YesYes
Safari 7.0.5N/AOnly when it has a tabindex
Internet Explorer 11YesN/A
Presto (Opera 12)YesYes
+ + + + + + + + + + + + + + + + + + + + +
Does tapping on an {{HTMLElement("a")}} give it the focus?
Mobile BrowsersiOS 7.1.2Android 4.4.4
Safari MobileOnly when it has a tabindexN/A
Chrome 35???Only when it has a tabindex
+ +

পাদটীকা

+ +

The following are reserved browser key bindings for the two major browsers and should not be used as values to accesskey: a, c, e, f, g, h, v, left arrow, and right arrow.

+ +

HTML 3.2 defines only name, href, rel, rev, and title.

+ +

The target attribute is not defined in browsers that do not support frames, such as Netscape 1 generation browsers. Furthermore, target is not allowed under strict variants of XHTML but is limited to frameset or transitional forms.

+ +

জাভাস্ক্রিপ্ট রিকোমেন্ডিশন 

+ +

It is often the case that an anchor tag is used with the onclick event. In order to prevent the page from refreshing, href is often set to either "#" or "javascript:void(0)". Both of these values can lead to some unexpected errors when copying links and opening links in a new tab and/or window. Be aware of this for usability reasons, and when users do use anchor tags and you prevent default behavior.

+ +

আরও দেখুন 

+ + + +
{{HTMLRef}}
diff --git a/files/bn/web/html/element/article/index.html b/files/bn/web/html/element/article/index.html new file mode 100644 index 0000000000..66d0db941b --- /dev/null +++ b/files/bn/web/html/element/article/index.html @@ -0,0 +1,110 @@ +--- +title:
+slug: Web/HTML/Element/article +tags: + - Element + - HTML + - HTML sections + - HTML5 + - Reference + - Web +translation_of: Web/HTML/Element/article +--- +

HTML <article> এলিমেন্ট ডকুমেন্ট, পেজ, অ্যাপ বা সাইটে একটি স্বয়ংসম্পূর্ণ প্রবন্ধ উপস্থাপন করে। এই প্রবন্ধটি স্বাধীনভাবে বিতরণযোগ্য বা পুনর্ব্যবহারযোগ্য, যেমনঃ syndication। এটা একটা ফোরাম পোস্ট হতে পারে, একটি ম্যাগাজিন বা পত্রিকার নিবন্ধ হতে পারে, একটি ব্লগ পোস্ট হতে পারে, মন্তব্য হতে পারে, একটি ইন্টারেক্টিভ উইজেট বা গ্যাজেট হতে পারে অথবা কন্টেন্ট এর একটি স্বাধীন উপকরণ হতে পারে।

+
+

ব্যবহার নির্দেশিকাঃ

+
    +
  • যখন একটি <article> এলিমেন্ট নেস্ট করা হয়, তখন ভেতরে থাকা এলিমেন্টটি একটি নিবন্ধ উপস্থাপন করে, যা বাইরের এলিমেন্টের সাথে সম্পর্কযুক্ত। উদাহরণ স্বরূপ, একটি ব্লগ পোস্টের কমেন্ট সমূহ <article> এলিমেন্টের মধ্যে নেস্ট করা <article> এলিমেন্ট হতে পারে, যেগুলো ব্লগ পোস্টটির সাথে সম্পর্কিত।
    • +
  • <article> এলিমেন্টের লেখকের তথ্য {{HTMLElement("address")}} এলিমেন্টের মাধ্যমে দেয়া যায়, কিন্তু আমরা আগেই জেনেছি যে, <article> এর মধ্যে <address> এলিমেন্ট নেস্ট করা যাবেনা।
    • +
  • <article> এলিমেন্টের প্রকাশের তারিখ এবং সময় {{HTMLElement("time")}} এলিমেন্টের {{htmlattrxref("pubdate", "time")}} অ্যাট্রিবিউট ব্যবহার করে লেখা যাবে।
    • +
+
+ +

অ্যাট্রিবিউট সমূহ

+

এই এলিমেন্টের মধ্যে শুধু গ্লোবাল অ্যাট্রিবিউট সমূহ ব্যবহার করা যাবে।

+

উদাহরণ

+
<article>
+  <h4>A really awesome article</h4>
+  <p>Lots of awesome text.</p>
+</article>
+
+

Specifications

+ + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML5 W3C')}} 
+

ব্রাউজার কম্প্যাটিবিলিটি

+

{{CompatibilityTable}}

+
+ + + + + + + + + + + + + + + + + + + +
ফিচারক্রোমফায়ারফক্স (গেকো)ইন্টারনেট এক্সপ্লোরারঅপেরাসাফারি
মৌলিক সমর্থন৫{{CompatGeckoDesktop("2.0")}}৯.০১১.১০৪.১
+
+
+ + + + + + + + + + + + + + + + + + + +
ফিচারঅ্যান্ড্রয়েডফায়ারফক্স মোবাইল (গেকো)ইন্টারনেট এক্সপ্লোরার মোবাইলঅপেরা মোবাইলসাফারি মোবাইল
মৌলিক সমর্থন২.২{{CompatGeckoMobile("2.0")}}৯.০১১.০৫.০ (iOS ৪.২)
+
+

আরও দেখুন

+ +

{{ HTMLRef }}

diff --git a/files/bn/web/html/element/b/index.html b/files/bn/web/html/element/b/index.html new file mode 100644 index 0000000000..47bd3812f8 --- /dev/null +++ b/files/bn/web/html/element/b/index.html @@ -0,0 +1,159 @@ +--- +title: সামারি +slug: Web/HTML/Element/b +tags: + - এইচ টি এম এল +translation_of: Web/HTML/Element/b +--- +

 সংক্ষিপ্ত

+ +

 

+ +
+
এইচ টি এম এল <বি> এলিমেন্ট কোন বিশেষ গুরুত্ব বা প্রাসঙ্গিকতা conveying ছাড়াই স্বাভাবিক টেক্সট থেকে শৈলীগত বিভিন্ন লেখার একটা স্প্যান প্রতিনিধিত্ব করে। এটা সাধারণত একটি সারসংক্ষেপ মধ্যে কীওয়ার্ড, পণ্যের নাম একটি পর্যালোচনা, বা যার সাধারণত উপস্থাপনা boldfaced হবে। টেক্সট অন্য ঘটনাকাল জন্য ব্যবহার করা হয়। তার ব্যবহারের আরেকটি উদাহরণ হল একটি প্রবন্ধের প্রতিটি অনুচ্ছেদের নেতৃত্ব বাক্য চিহ্নিত করা হয়।
+
+ +
+

Usage notes:

+ +
    +
  • Do not confuse the <b> element with the {{HTMLElement("strong")}}, {{HTMLElement("em")}}, or {{HTMLElement("mark")}} elements. The {{HTMLElement("strong")}} element represents text of certain importance, {{HTMLElement("em")}} puts some emphasis on the text and the {{HTMLElement("mark")}} element represents text of certain relevance. The <b> element doesn't convey such special semantic information; use it only when no others fit.
    • +
  • Similarly, do not mark titles and headings using the <b> element. For this purpose, use the {{HTMLElement("h1")}} to {{HTMLElement("h6")}} tags. Further, stylesheets can change the default style of these elements, with the result that they are not necessarily displayed in bold.
    • +
  • It is a good practice to use the class attribute on the <b> in order to convey additional semantic information (for example <b class="lead"> for the first sentence in a paragraph). This eases the development of several stylings of a web document, without the need to change its HTML code.
    • +
  • Historically, the <b> element was meant to make text boldface. Styling information has been deprecated since HTML4, so the meaning of the <b> element has been changed.
    • +
  • If there is no semantic purpose on using the <b> element, using css property font-weight with bold value would be a better choice for making text bold.
    • +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, phrasing content, palpable content.
Permitted contentPhrasing content.
Tag omission{{no_tag_omission}}
Permitted parent elementsAny element that accepts phrasing content.
DOM interface{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the HTMLSpanElement interface for this element.
+ +

 আরোপ করা

+ +

এই উপাদান শুধুমাত্র গ্লোবাল গুণাবলীতে রয়েছে।

+ +

 উদাহরণ

+ +
<p>
+  This article describes several <b>text-level</b> elements. It explains their usage in an <b>HTML</b> document.
+</p>
+Keywords are displayed with the default style of the <b> element, likely in bold.
+
+ +

 ফল

+ +

 

+ +

এই নিবন্ধটি কয়েকটি টেক্সট-স্তরের উপাদান বর্ণ।এটি একটি এইচ টি এম এল নথিতে তাদের ব্যবহার ব্যাখ্যা।
+
+ মূলশব্দ গাঢ় সম্ভবত <বি> উপাদান, এর ডিফল্ট শৈলী সঙ্গে প্রদর্শিত হয়।

+ +

 বিশেষ উল্লেখ

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-b-element', '<b>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-b-element', '<b>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}{{Spec2('HTML4.01')}} 
+ +

 ব্রাউজার উপযুক্ততা

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 আরো দেখুন

+ + + +
{{HTMLRef}}
diff --git a/files/bn/web/html/element/blockquote/index.html b/files/bn/web/html/element/blockquote/index.html new file mode 100644 index 0000000000..2de7e9d5b1 --- /dev/null +++ b/files/bn/web/html/element/blockquote/index.html @@ -0,0 +1,155 @@ +--- +title:
+slug: Web/HTML/Element/blockquote +tags: + - এইচ টি এম এল +translation_of: Web/HTML/Element/blockquote +--- +

 সংক্ষিপ্ত

+ +

 এইচ টি এম এল <blockquote> এলিমেন্ট (বা এইচ টি এম এল ব্লক উদ্ধৃতি এলিমেন্ট) ঘিরা টেক্সট বর্ধিত উদ্ধৃতি যে ইঙ্গিত দেয়।সাধারণত, এই (এটি পরিবর্তন করার জন্যে নোট দেখুন) খাঁজ দ্বারা দৃশ্যত অনুষ্ঠিত হয়।উৎস একটি টেক্সট উপস্থাপনা {{HTMLElement ("cite")}} উপাদান ব্যবহার দেওয়া যেতে পারে, যখন উদ্ধৃতি উৎস জন্য একটি URL, অ্যাট্রিবিউট cite ব্যবহার দেওয়া হতে পারে।

+ + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, sectioning root, palpable content.
Permitted contentFlow content.
Tag omission{{no_tag_omission}}
Permitted parent elementsAny element that accepts flow content.
DOM interface{{domxref("HTMLQuoteElement")}}
+ +

 

+ +

আরোপ করা
+
+ এই উপাদান গ্লোবাল গুণাবলী রয়েছে।

+ +
+
{{htmlattrdef("cite")}}
+
 উদ্ধৃত তথ্যের জন্য একটি উৎস নথি বা বার্তা মনোনীত যে একটি URL। এই বৈশিষ্ট্য কনটেক্সট বা উক্তির রেফারেন্স ব্যাখ্যা তথ্য নির্দেশ করার  উদ্দেশ্যে করা হচ্ছে।
+
+ +

 উদাহরণ

+ +
<blockquote cite="http://developer.mozilla.org">
+  <p>This is a quotation taken from the Mozilla Developer Center.</p>
+</blockquote>
+
+ +

 এইচ টি এম এল কোডের আউটপুট উপরে:

+ +
+

This is a quotation taken from the Mozilla Developer Center.

+
+ +

বিশেষ উল্লেখ

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-blockquote-element', '<blockquote>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '<blockquote>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<blockquote>')}}{{Spec2('HTML4.01')}} 
+ +

 ব্রাউজার উপযুক্ততা

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 নোট

+ +

 

+ +

<Blockquote> ইন্ডেন্ট সি এস এস কোড ব্যবহার {{cssxref ("মার্জিন")}} সম্পত্তি পরিবর্তন করতে।
+
+ স্বল্প কোট {{HTMLElement ("Q")}} উপাদান ব্যবহার করার জন্য।

+ +

 

+ +

আরো দেখুন
+
+      ইনলাইন উদ্ধৃতি জন্য {{HTMLElement ("Q")}} উপাদান।
+      উৎস উদ্ধৃতির জন্য {{HTMLElement} ("cite")} উপাদান।
+
+ {{}} HTMLRef

diff --git a/files/bn/web/html/element/index.html b/files/bn/web/html/element/index.html new file mode 100644 index 0000000000..746ff13018 --- /dev/null +++ b/files/bn/web/html/element/index.html @@ -0,0 +1,216 @@ +--- +title: HTML এলিমেন্ট রেফারেন্স +slug: Web/HTML/Element +tags: + - HTML + - 'HTML:Element Reference' + - NeedsReview + - TopicStub + - Web + - ওয়েব + - রেফারেন্স +translation_of: Web/HTML/Element +--- +

যেসব HTML এলিমেন্ট, HTML5 অথবা এর আগের কোন সংস্করণে ছিল, তাদের প্রত্যেককে এই পাতায় লিস্ট করা হয়েছে। যখন কোন এলিমেন্ট কে এঙ্গেল ব্র্যাকেটের ভেতর লেখা হয়, তখন তাদেরকে HTML ট্যাগ বলে, যেমনঃ <elementname>। কীভাবে একটা HTML পেইজ/ডকুমেন্ট তৈরি করা হবে, আর এই পেইজের কোন অংশে কি ধরণের কন্টেন্ট বসানো হবে তা নির্ধারিত হয় এইসব HTML এলিমেন্ট দিয়েই।

+

এই পাতায় সব স্ট্যান্ডার্ড HTML ট্যাগকে লিস্ট করা হয়েছে। নতুন HTML5 ট্যাগ আর পুরনো ট্যাগ (স্ট্যান্ডার্ড না এমন ট্যাগ আর বাতিল হয়ে যাওয়া ট্যাগও রয়েছে) সবগুলোকেই লিস্ট করা হয়েছে এখানে। যেসব এলিমেন্ট HTML5 এ নতুন এসেছে তাদেরকে প্রায়ই নতুন HTML5 এলিমেন্ট বলা হয়, যদিও আগের স্ট্যান্ডার্ড এলিমেন্টগুলোও HTML5 এ কাজ করে।

+

In an HTML document, an element is defined by a starting tag. If the element contains other content, it ends with a closing tag, where the element name is preceded by a forward slash: </elementname>. Some elements don't need to be closed, such as image elements. These are known as void elements. HTML documents contain a tree of these elements. Each is named to represent what it does. For example, the <title> element represents the title of the document. Below is an alphabetical list of the HTML Elements.

+
+ A +
    +
  • {{ HTMLElement("a") }}
    • +
  • {{ HTMLElement("abbr") }}
    • +
  • {{ HTMLElement("acronym") }}
    • +
  • {{ HTMLElement("address") }}
    • +
  • {{ HTMLElement("applet") }}
    • +
  • {{ HTMLElement("area") }}
    • +
  • {{ HTMLElement("article") }}
    • +
  • {{ HTMLElement("aside") }}
    • +
  • {{ HTMLElement("audio") }}
    • +
+ B +
    +
  • {{ HTMLElement("b") }}
    • +
  • {{ HTMLElement("base") }}
    • +
  • {{ HTMLElement("basefont") }}
    • +
  • {{ HTMLElement("bdi") }}
    • +
  • {{ HTMLElement("bdo") }}
    • +
  • {{ HTMLElement("bgsound") }}
    • +
  • {{ HTMLElement("big") }}
    • +
  • {{ HTMLElement("blink") }}
    • +
  • {{ HTMLElement("blockquote") }}
    • +
  • {{ HTMLElement("body") }}
    • +
  • {{ HTMLElement("br") }}
    • +
  • {{ HTMLElement("button") }}
    • +
+ C +
    +
  • {{ HTMLElement("canvas") }}
    • +
  • {{ HTMLElement("caption") }}
    • +
  • {{ HTMLElement("center") }}
    • +
  • {{ HTMLElement("cite") }}
    • +
  • {{ HTMLElement("code") }}
    • +
  • {{ HTMLElement("col") }}
    • +
  • {{ HTMLElement("colgroup") }}
    • +
  • {{ HTMLElement("command") }}
    • +
+ D +
    +
  • {{ HTMLElement("data") }}
    • +
  • {{ HTMLElement("datalist") }}
    • +
  • {{ HTMLElement("dd") }}
    • +
  • {{ HTMLElement("del") }}
    • +
  • {{ HTMLElement("details") }}
    • +
  • {{ HTMLElement("dfn") }}
    • +
  • {{ HTMLElement("dir") }}
    • +
  • {{ HTMLElement("div") }}
    • +
  • {{ HTMLElement("dl") }}
    • +
  • {{ HTMLElement("dt") }}
    • +
+ E +
    +
  • {{ HTMLElement("em") }}
    • +
  • {{ HTMLElement("embed") }}
    • +
+ F +
    +
  • {{ HTMLElement("fieldset") }}
    • +
  • {{ HTMLElement("figcaption") }}
    • +
  • {{ HTMLElement("figure") }}
    • +
  • {{ HTMLElement("font") }}
    • +
  • {{ HTMLElement("footer") }}
    • +
  • {{ HTMLElement("form") }}
    • +
  • {{ HTMLElement("frame") }}
    • +
  • {{ HTMLElement("frameset") }}
    • +
+ G H +
    +
  • {{ HTMLElement("h1") }}
    • +
  • {{ HTMLElement("h2") }}
    • +
  • {{ HTMLElement("h3") }}
    • +
  • {{ HTMLElement("h4") }}
    • +
  • {{ HTMLElement("h5") }}
    • +
  • {{ HTMLElement("h6") }}
    • +
  • {{ HTMLElement("head") }}
    • +
  • {{ HTMLElement("header") }}
    • +
  • {{ HTMLElement("hgroup") }}
    • +
  • {{ HTMLElement("hr") }}
    • +
  • {{ HTMLElement("html") }}
    • +
+ I +
    +
  • {{ HTMLElement("i") }}
    • +
  • {{ HTMLElement("iframe") }}
    • +
  • {{ HTMLElement("img") }}
    • +
  • {{ HTMLElement("input") }}
    • +
  • {{ HTMLElement("ins") }}
    • +
  • {{ HTMLElement("isindex") }}
    • +
+ J K +
    +
  • {{ HTMLElement("kbd") }}
    • +
  • {{ HTMLElement("keygen") }}
    • +
+ L +
    +
  • {{ HTMLElement("label") }}
    • +
  • {{ HTMLElement("legend") }}
    • +
  • {{ HTMLElement("li") }}
    • +
  • {{ HTMLElement("link") }}
    • +
  • {{ HTMLElement("listing") }}
    • +
+ M +
    +
  • {{HTMLElement("main")}}
    • +
  • {{ HTMLElement("map") }}
    • +
  • {{ HTMLElement("mark") }}
    • +
  • {{ HTMLElement("marquee") }}
    • +
  • {{ HTMLElement("menu") }}
    • +
  • {{ HTMLElement("meta") }}
    • +
  • {{ HTMLElement("meter") }}
    • +
+ N +
    +
  • {{ HTMLElement("nav") }}
    • +
  • {{ HTMLElement("nobr") }}
    • +
  • {{ HTMLElement("noframes") }}
    • +
  • {{ HTMLElement("noscript") }}
    • +
+ O +
    +
  • {{ HTMLElement("object") }}
    • +
  • {{ HTMLElement("ol") }}
    • +
  • {{ HTMLElement("optgroup") }}
    • +
  • {{ HTMLElement("option") }}
    • +
  • {{ HTMLElement("output") }}
    • +
+ P +
    +
  • {{ HTMLElement("p") }}
    • +
  • {{ HTMLElement("param") }}
    • +
  • {{ HTMLElement("plaintext") }}
    • +
  • {{ HTMLElement("pre") }}
    • +
  • {{ HTMLElement("progress") }}
    • +
+ Q +
    +
  • {{ HTMLElement("q") }}
    • +
+ R +
    +
  • {{ HTMLElement("rp") }}
    • +
  • {{ HTMLElement("rt") }}
    • +
  • {{ HTMLElement("ruby") }}
    • +
+ S +
    +
  • {{ HTMLElement("s") }}
    • +
  • {{ HTMLElement("samp") }}
    • +
  • {{ HTMLElement("script") }}
    • +
  • {{ HTMLElement("section") }}
    • +
  • {{ HTMLElement("select") }}
    • +
  • {{ HTMLElement("small") }}
    • +
  • {{ HTMLElement("source") }}
    • +
  • {{ HTMLElement("spacer") }}
    • +
  • {{ HTMLElement("span") }}
    • +
  • {{ HTMLElement("strike") }}
    • +
  • {{ HTMLElement("strong") }}
    • +
  • {{ HTMLElement("style") }}
    • +
  • {{ HTMLElement("sub") }}
    • +
  • {{ HTMLElement("summary") }}
    • +
  • {{ HTMLElement("sup") }}
    • +
+ T +
    +
  • {{ HTMLElement("table") }}
    • +
  • {{ HTMLElement("tbody") }}
    • +
  • {{ HTMLElement("td") }}
    • +
  • {{ HTMLElement("textarea") }}
    • +
  • {{ HTMLElement("tfoot") }}
    • +
  • {{ HTMLElement("th") }}
    • +
  • {{ HTMLElement("thead") }}
    • +
  • {{ HTMLElement("time") }}
    • +
  • {{ HTMLElement("title") }}
    • +
  • {{ HTMLElement("tr") }}
    • +
  • {{ HTMLElement("track") }}
    • +
  • {{ HTMLElement("tt") }}
    • +
+ U +
    +
  • {{ HTMLElement("u") }}
    • +
  • {{ HTMLElement("ul") }}
    • +
+ V +
    +
  • {{ HTMLElement("var") }}
    • +
  • {{ HTMLElement("video") }}
    • +
+ W +
    +
  • {{ HTMLElement("wbr") }}
    • +
+ X Y Z +
    +
  • {{ HTMLElement("xmp") }}
    • +
+
+

The symbol This element has been added in HTML5 indicates that the element has been added in HTML5. Note that other elements listed here may have been modified or extended by the HTML5 specification. Dimmed elements are non-standard, obsolete, or deprecated; they must not be used in new Web sites, and should gradually be removed from existing ones.

diff --git a/files/bn/web/html/element/section/index.html b/files/bn/web/html/element/section/index.html new file mode 100644 index 0000000000..17eecffcd7 --- /dev/null +++ b/files/bn/web/html/element/section/index.html @@ -0,0 +1,129 @@ +--- +title:
+slug: Web/HTML/Element/section +tags: + - Element + - HTML + - HTML sections + - HTML5 + - Reference + - Référence(2) + - Web + - Élément(2) +translation_of: Web/HTML/Element/section +--- +

সারাংশ

+ +

HTML সেকশন এলিমেন্ট (<section>) একটি ডকুমেন্ট এর কিছু অংশকে নির্দিষ্ট করে। যেমনঃ শিরোনাম সহ কিছু কন্টেন্ট।

+ +
+

ব্যবহার নির্দেশিকাঃ

+ +
    +
  • যদি একটি {{HTMLElement("section")}} এর কন্টেন্ট আলাদাভাবে চিহ্নিত করার প্রয়োজন হয়, তাহলে {{HTMLElement("article")}} এলিমেন্ট ব্যবহার করতে পারেন।
    • +
  • সাধারন কন্টেইনার হিসেবে {{HTMLElement("section")}} এলিমেন্ট ব্যবহার করবেন না; সাধারন কন্টেইনার হিসেবে ব্যবহার করার জন্য{{HTMLElement("div")}} এলিমেন্ট রয়েছে। সহজ কথায়, সেকশন শুধু একটি ডকুমেন্ট এর আউটলাইন তৈরিতে ব্যবহার করা যাবে।
    • +
+
+ + + +

অ্যাট্রিবিউট সমূহ

+ +

এই এলিমেন্টের মধ্যে শুধু গ্লোবাল অ্যাট্রিবিউট সমূহ ব্যবহার করা যাবে।

+ +

উদাহরণ

+ +
<section>
+  <h1>Heading</h1>
+  <p>Bunch of awesome content</p>
+</section>
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComments
{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}{{Spec2('HTML5 W3C')}} 
+ +

ব্রাউজার কম্প্যাটিবিলিটি

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
ফিচারক্রোমফায়ারফক্স (গেকো)ইন্টারনেট এক্সপ্লোরারঅপেরাসাফারি
মৌলিক সমর্থন৫{{CompatGeckoDesktop("2.0")}}৯.০১১.১০৪.১
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ফিচারঅ্যান্ড্রয়েডফায়ারফক্স মোবাইল (গেকো)ইন্টারনেট এক্সপ্লোরার মোবাইলঅপেরা মোবাইলসাফারি মোবাইল
মৌলিক সমর্থন২.২{{CompatGeckoMobile("2.0")}}৯.০১১.০৫.০ (iOS ৪.২)
+
+ +

আরও দেখুন

+ +
    +
  • Other section-related elements: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};
    • +
  • Sections and outlines of an HTML5 document.
    • +
+ +
{{HTMLRef}}
diff --git a/files/bn/web/html/element/summary/index.html b/files/bn/web/html/element/summary/index.html new file mode 100644 index 0000000000..224f34c553 --- /dev/null +++ b/files/bn/web/html/element/summary/index.html @@ -0,0 +1,144 @@ +--- +title: +slug: Web/HTML/Element/summary +tags: + - এইচ টি এম এল +translation_of: Web/HTML/Element/summary +--- +

{{SeeCompatTable}}

+ +

 

+ +

সংক্ষিপ্ত
+
+ এইচ টি এম এল সারসংক্ষেপ উপাদান (<সারসংক্ষেপ>) একটি {{HTMLElement ("বিবরণ")}} উপাদান বিষয়বস্তুর জন্য একটি সারসংক্ষেপ, ক্যাপশন, অথবা লেজেন্ড হিসেবে ব্যবহার করা হয়।
+ উল্লেখ্য: <সারসংক্ষেপ> উপাদান বাদ দেওয়া হয়, তাহলে শিরোনাম "বিবরণ" ব্যবহার করা হবে।

+ +

 ব্যবহারের প্রেক্ষাপট

+ + + + + + + + + + + + + + + + + + + + +
Permitted contentPhrasing content or one element of Heading content
Tag omissionNone, both the start tag and the end tag are mandatory.
Permitted parent elementThe {{ HTMLElement("details") }} element.
Normative documentHTML5, section 4.11.2
+ +

 আরোপ করা

+ +

 এই উপাদান শুধুমাত্র গ্লোবাল গুণাবলী রয়েছে।

+ +

 

+ +

ডি ও এম  ইন্টারফেস
+
+ এই উপাদান {{domxref ("HTMLElement")}} ইন্টারফেস এবং কার্যকরী।

+ +

 

+ +

উদাহরণ
+
+  

+ +

সঙ্কলন, পরের লাইন লিঙ্ক থেকে বিবরণ পেতে

+ +
 
+ +

 <সারসংক্ষেপ> উপর উদাহরণ জন্য {{HTMLElement ("বিবরণ")}} পাতাটি দেখুন।

+ +

 বিশেষ উল্লেখ

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '<summary>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '<summary>')}}{{Spec2('HTML5.1')}} 
+ +

 ব্রাউজার উপযুক্ততা

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support12{{ CompatNo}}[1]{{CompatNo}}{{CompatNo}}6
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.0{{CompatNo}}[1]{{CompatNo}}{{CompatNo}}{{ CompatNo}}
+
+ +

[1] Gecko doesn't currently implement this. See {{bug(591737)}}.

+ +

 আরো দেখুন

+ +
    +
  • {{ HTMLElement("details") }}
    • +
+ +
{{HTMLRef}}
diff --git a/files/bn/web/html/focus_management_in_html/index.html b/files/bn/web/html/focus_management_in_html/index.html new file mode 100644 index 0000000000..f468a3570b --- /dev/null +++ b/files/bn/web/html/focus_management_in_html/index.html @@ -0,0 +1,65 @@ +--- +title: Focus management in HTML +slug: Web/HTML/Focus_management_in_HTML +translation_of: Web/API/Document/hasFocus +--- +

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

+ +

ব্রাউজার কম্পাতিবিলিটি

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatUnknown}}{{CompatGeckoDesktop("1.9.2")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[১] গিককো ৮.০ তে শুরু {{geckoRelease("8.0")}},ফায়ারফক্স এখন একটি ফোকাস রিং আঁকে যেকোনো এলিমেন্ত এর উপর যখন তার তাবিনেক্স ভেলু ০ থেকে বড়, শুধু একটি সীমিত সাবসেট আইটেমস এর পরিবর্তে। এই নিয়মের কিছু বাতিক্রম আছেঃ  {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, {{HTMLElement("iframe")}}, {{HTMLElement("frame")}}, {{HTMLElement("body")}}, and {{HTMLElement("html")}}.

+ +

আরও দেখুন

+ +
    +
  • {{domxref("document.activeElement")}}
    • +
  • {{domxref("document.hasFocus")}}
    • +
diff --git a/files/bn/web/html/global_attributes/accesskey/index.html b/files/bn/web/html/global_attributes/accesskey/index.html new file mode 100644 index 0000000000..9ed0660b2c --- /dev/null +++ b/files/bn/web/html/global_attributes/accesskey/index.html @@ -0,0 +1,146 @@ +--- +title: অ্যাক্সেস কী +slug: Web/HTML/Global_attributes/accesskey +tags: + - এইচ টি এম এল +translation_of: Web/HTML/Global_attributes/accesskey +--- +

{{HTMLSidebar("Global_attributes")}}

+ +

 

+ +
+
 অ্যাক্সেস কী গ্লোবাল অ্যাট্রিবিউট বর্তমান উপাদান জন্য একটি কীবোর্ড শর্টকাট জেনারেট করার জন্য একটি ইঙ্গিত প্রদান করে। এই বৈশিষ্ট্য অক্ষরের একটি স্থান বিচ্ছিন্ন তালিকা-র (এক একক ইউনিকোড কোড পয়েন্ট) নিয়ে গঠিত। ব্রাউজার কম্পিউটার কিবোর্ড লেআউট যে বিদ্যমান প্রথমটি ব্যবহার।
+
+ অ্যাক্সেস কী সক্রিয় অপারেশন ব্রাউজার এবং তার প্ল্যাটফর্ম উপর নির্ভর করে।
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 WindowsLinuxMac
FirefoxAlt + Shift + keyOn Firefox 14 or newer, Control + Alt + key
+ On Firefox 13 or older, Control + key
Internet ExplorerAlt + keyN/A
Google ChromeAlt + keyControl + Alt + key
SafariAlt + keyN/AControl + Alt + key
OperaShift + Esc opens a contents list which are accessible by accesskey, then, can choose an item by pressing key
+ +

 ফায়ারফক্স ব্যবহারকারীর পছন্দ প্রয়োজন মডিফায়ার কী কাস্টমাইজ করতে পারেন মনে রাখবেন।

+ +

বিশেষ উল্লেখ

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML4.01')}}, several characters can be set as the accesskey. Also, it can be set on any element.
{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}{{Spec2('HTML4.01')}}Only supported on {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }}
+ +

 ব্রাউজার উপযুক্ততা

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 আরো দেখুন

+ +

সকল গ্লোবাল গুণাবলী

+ +
    +
diff --git a/files/bn/web/html/global_attributes/contenteditable/index.html b/files/bn/web/html/global_attributes/contenteditable/index.html new file mode 100644 index 0000000000..083dd6493d --- /dev/null +++ b/files/bn/web/html/global_attributes/contenteditable/index.html @@ -0,0 +1,103 @@ +--- +title: contenteditable +slug: Web/HTML/Global_attributes/contenteditable +translation_of: Web/HTML/Global_attributes/contenteditable +--- +

{{HTMLSidebar("Global_attributes")}}

+ +

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

+ +
    +
  • সত্য অথবা আম্পতি স্ট্রিং ,যা নির্দেশিত করে যে এলিমেন্তটি অবশ্যই এডিটেবল;
    • +
  • মিথ্যা,যা নির্দেশিত করে যে এলিমেন্তটি এডিটেবল নয়।
    • +
+ +

যদি এই আত্রিবিয়ুট সেট না হয়,ইহার দিফোলট ভেলু ইহার প্যারেন্ট এলিমেন্ত থেকে নেয়া হবে।

+ +

এই আত্রিবিয়ুট একটি এনাম্বেরাতেট এবং বুলিয়ান নয়। ইহার মানে যে সত্য, মিথ্যা অথবা আম্পটি স্ট্রিং  ভেলুর স্পষ্ট ব্যবহার কার্যভার এবং এর মত শর্টহ্যান্ড <label contenteditable>Example Label</label> অনুমোদিত নয়।সঠিক ব্যবহার হল <label contenteditable="true">Example Label</label>।

+ +

স্পেসিফিকেশনস

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
+ +

ব্রাউজার কম্প্যাটিবিলিটি

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.9") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

আরও দেখুন

+ + diff --git a/files/bn/web/html/global_attributes/draggable/index.html b/files/bn/web/html/global_attributes/draggable/index.html new file mode 100644 index 0000000000..47aee89b01 --- /dev/null +++ b/files/bn/web/html/global_attributes/draggable/index.html @@ -0,0 +1,101 @@ +--- +title: ড্রাগেবল +slug: Web/HTML/Global_attributes/draggable +tags: + - এইচ টি এম এল +translation_of: Web/HTML/Global_attributes/draggable +--- +

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

+ +

টেনে আনার যোগ্য গ্লোবাল অ্যাট্রিবিউট উপাদান টেনে নিয়ে যাবে যে কিনা তার ইঙ্গিত একটি গণিত অ্যাট্রিবিউট ব্যবহার করে {{domxref("HTML_Drag_and_Drop_API","HTML Drag and Drop API")}}. এটা নিম্নলিখিত মান থাকতে পারে;

+ +
    +
  • সঠিক,এটি নি্দেশ করে যে উপাদানটি টানা হতে পারে
    • +
  • ভুল,এটি নি্দেশ করে যে উপাদানটি টানা হতে পারে না
    • +
+ +

যদি এই আরোপন সেট না হয়, তবে প্রাথমিক মান আপনা-আপনি হয়, আচরণ যার অর্থ ব্রাউজার দ্বারা ডিফল্টরূপে সংজ্ঞায়িত এক হওয়া উচিত।

+ +

এই বৈশিষ্ট্যটি গণিত তবে একটি বুলিয়ান  না। এই মান সত্য বা মিথ্যা হোক এর স্পষ্ট ব্যবহার বাধ্যতামূলক, যে মানে এবং <ট্যাগ টেনে আনার যোগ্য> উদাহরণ ট্যাগ </ ট্যাগ> মত একটি সংক্ষিপ্ত লেখার অনুমতি দেওয়া হয় না। সঠিক ব্যবহারটি হলো <ট্যাগ টেনে আনার যোগ্য = "সত্য"> উদাহরণ ট্যাগ </ ট্যাগ> ।

+ +

ডিফল্টরূপে, শুধুমাত্র টেক্সট, ছবি, লিংক নির্বাচন করা হলে টেনে নেওয়া যাবে।সকল উপাদান এর জন্য, পর্বটি {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} অবশ্যই  টেনে নেওয়া এবং ছেঁড়ে দেওয়ার কাজ এর জন্য সেট করতে হবে, যেমন দেখানো হলো কম্প্রেহেনসিভ উদাহারন.

+ +

স্পেসিফিকেশন

+ + + + + + + + + + + + + + + + + + + +
স্পেসিফিকেশনঅবস্থামন্তব্য
{{SpecName('HTML WHATWG', "interaction.html#the-draggable-attribute", "draggable")}}{{Spec2('HTML WHATWG')}}বর্তমান স্ন্যাপশট হতে পরিবর্তন নেই, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-draggable-attribute", "draggable")}}{{Spec2('HTML5.1')}}প্রাথমিক সংজ্ঞা এর স্ন্যাপশট {{SpecName('HTML WHATWG')}},
+ +

ব্রাউজার কম্পিবিলিটি

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
বৈশিষ্ট্যক্রোমফায়ারফক্স (গেছকো)ইন্টারনেট এক্সপ্লোরারঅপেরাসাফারি
প্রাথমিক সহায়তা{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.8.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
বৈশিষ্ট্যএন্ড্রোয়েডএন্ড্রয়েডের জন্য ক্রোমফায়ারফক্স মোবাইল (গেছকো)আই ই মোবাইলঅপেরা মোবাইলসাফারি মোবাইল
প্রাথমিক সহায়তা{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.8.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

আরও দেখুন

+ + diff --git a/files/bn/web/html/global_attributes/hidden/index.html b/files/bn/web/html/global_attributes/hidden/index.html new file mode 100644 index 0000000000..eb0e626582 --- /dev/null +++ b/files/bn/web/html/global_attributes/hidden/index.html @@ -0,0 +1,105 @@ +--- +title: গোপন +slug: Web/HTML/Global_attributes/hidden +tags: + - এইচ টি এম এল +translation_of: Web/HTML/Global_attributes/hidden +--- +

{{HTMLSidebar("Global_attributes")}}

+ +

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

+ +

 

+ +

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

+ +
+

Note: Changing the value of the CSS {{cssxref("display")}} property on an element with the hidden attribute overrides the behavior. For instance, an element styled display: flex will be displayed on screen regardless of the hidden attribute being present.

+
+ +

 বিশেষ উল্লেখ

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}{{Spec2('HTML WHATWG')}}Defines the suggested default rendering of the hidden attribute using CSS
{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, initial definition
+ +

 ব্রাউজার উপযুক্ততা

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("2") }}11{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("2") }}11{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

 আরো দেখুন

+ +
    +
  •  সকল গ্লোবাল গুণাবলী।
    • +
diff --git a/files/bn/web/html/global_attributes/index.html b/files/bn/web/html/global_attributes/index.html new file mode 100644 index 0000000000..593c0dc6ed --- /dev/null +++ b/files/bn/web/html/global_attributes/index.html @@ -0,0 +1,463 @@ +--- +title: Global attributes +slug: Web/HTML/Global_attributes +tags: + - Attribute + - HTML + - NeedsBrowserCompatibility + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/HTML/Global_attributes +--- +
{{HTMLSidebar("Global_attributes")}}
+ +
+

Global attributes are attributes common to all HTML elements; they can be used on all elements, though the attributes may have no effect on some elements.

+
+ +

Global attributes may be specified on all HTML elements, even those not specified in the standard. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as <foo hidden>...<foo>, even though <foo> is not a valid HTML element.

+ +

In addition to the basic HTML global attributes, the following global attributes also exist:

+ +
    +
  • xml:lang and xml:base — these are inherited from the XHTML specifications and deprecated, but kept for compatibility purposes.
    • +
  • The multiple aria-* attributes, used for improving accessibility.
    • +
  • The event handler attributes: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting.
    • +
+ +

Description

+ +
+
accesskey
+
Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters. The browser should use the first one that exists on the computer keyboard layout.
+
class
+
Is a space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method {{domxref("Document.getElementsByClassName()")}}.
+
contenteditable
+
Is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values: +
    +
  • true or the empty string, which indicates that the element must be editable;
    • +
  • false, which indicates that the element must not be editable.
    • +
+
+
contextmenu
+
Is the id of an {{HTMLElement("menu")}} to use as the contextual menu for this element.
+
data-*
+
Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation that may be used by scripts. All such custom data are available via the {{domxref("HTMLElement")}} interface of the element the attribute is set on. The {{domxref("HTMLElement.dataset")}} property gives access to them.
+
dir
+
Is an enumerated attribute indicating the directionality of the element's text. It can have the following values: +
    +
  • ltr, which means left to right and is to be used for languages that are written from the left to the right (like English);
    • +
  • rtl, which means right to left and is to be used for languages that are written from the right to the left (like Arabic);
    • +
  • auto, which let the user agent decides. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then apply that directionality to the whole element.
    • +
+
+
draggable {{experimental_inline}}
+
Is an enumerated attribute indicating whether the element can be dragged, using the Drag and Drop API. It can have the following values: +
    +
  • true, which indicates that the element may be dragged
    • +
  • false, which indicates that the element may not be dragged.
    • +
+
+
dropzone {{experimental_inline}}
+
Is an enumerated attribute indicating what types of content can be dropped on an element, using the Drag and Drop API. It can have the following values: +
    +
  • copy, which indicates that dropping will create a copy of the element that was dragged
    • +
  • move, which indicates that the element that was dragged will be moved to this new location.
    • +
  • link, will create a link to the dragged data.
    • +
+
+
hidden
+
Is a Boolean attribute indicates that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.
+
id
+
Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
+
itemid {{experimental_inline}}
+
itemprop {{experimental_inline}}
+
itemref {{experimental_inline}}
+
itemscope {{experimental_inline}}
+
itemtype {{experimental_inline}}
+
These attributes are related to the WHATWG HTML Microdata feature.
+
lang
+
Participates in defining the language of the element, the language that non-editable elements are written in or the language that editable elements should be written in. The tag contains one single entry value in the format defines in the Tags for Identifying Languages (BCP47) IETF document. xml:lang has priority over it.
+
spellcheck {{experimental_inline}}
+
Is an enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values: +
    +
  • true, which indicates that the element should be, if possible, checked for spelling errors;
    • +
  • false, which indicates that the element should not be checked for spelling errors.
    • +
+
+
style
+
Contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{ HTMLElement("style") }} element have mainly the purpose of allowing for quick styling, for example for testing purposes.
+
tabindex
+
Is an integer attribute indicates if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values: +
    +
  • a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
    • +
  • 0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
    • +
  • a positive value which means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the tabindex. If several elements share the same tabindex, their relative order follows their relative position in the document).
    • +
+
+
title
+
Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.
+
translate
+
Is an enumerated attribute that is used to specify whether an element's attribute values and the values of its {{domxref("Text")}} node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values: +
    +
  • empty string and "yes", which indicates that the element will be translated.
    • +
  • "no", which indicates that the element will not be translated.
    • +
+
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML WHATWG')}}From latest snapshot, {{SpecName('HTML5.1')}}, itemid, itemprop, itemref, itemscope, and itemtype have been added.
{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML5 W3C')}}, spellcheck, draggable, and dropzone have been added.
{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the dir, lang, style, id, class, tabindex, accesskey, and title are now true global attributes.
+ xml:lang which was initially part of XHTML, is now also part of HTML.
+ hidden, data-*, contextmenu, contenteditable, and translate have been added.
{{SpecName('HTML4.01')}}{{Spec2('HTML4.01')}}There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.
+ class and style are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
+ dir is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.
+ id is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
+ lang is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.
+ tabindex is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
+ accesskey is only supported on {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }}.
+ title is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
accesskey{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
class{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
contenteditable{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
contextmenu{{CompatNo}}{{CompatGeckoDesktop(9)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
data-*{{CompatVersionUnknown}}{{CompatGeckoDesktop("6")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
dir{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
draggable{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
dropzone{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
hidden{{CompatVersionUnknown}}{{CompatGeckoDesktop("2")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
id{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
itemid, itemprop, itemref, itemscope, itemtype{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
lang{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
spellcheck{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
style{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
tabindex{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
title{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
accesskey{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
class{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
contenteditable{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
contextmenu{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
data-*{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("6")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
dir{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
draggable{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
dropzone{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
hidden{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
id{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
itemid, itemprop, itemref, itemscope, itemtype{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
lang{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
spellcheck{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
style{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
tabindex{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
title{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ +
    +
  • {{domxref("Element")}} and {{domxref("GlobalEventHandlers")}} interfaces that allow to query most global attributes.
    • +
diff --git a/files/bn/web/html/global_attributes/itemprop/index.html b/files/bn/web/html/global_attributes/itemprop/index.html new file mode 100644 index 0000000000..2ce2ce86eb --- /dev/null +++ b/files/bn/web/html/global_attributes/itemprop/index.html @@ -0,0 +1,19 @@ +--- +title: আইটেমপ্রোপ +slug: Web/HTML/Global_attributes/itemprop +translation_of: Web/HTML/Global_attributes/itemprop +--- +

আমরা যেমন অভিনেতা, পরিচালক, মূল্যায়ন হিসাবে বৈশিষ্ট্য মত, পাশ ইমেজ বা তথ্য সম্পর্কে সার্চ ইঞ্জিন থেকে আরো তথ্য ট্যাগ যে কোন ধরণের দিতে পারেন। একটি আইটেম এর বৈশিষ্ট্য লেবেলে আইটেমপ্রোপ অ্যাট্রিবিউট ব্যবহার। উদাহরণস্বরূপ, একটি সিনেমা পরিচালককে চিহ্নিত করা যাক,পরিচালক এর নাম অন্তর্নিহিত উপাদান করার আইটেমপ্রোপ = "পরিচালক" যোগ করুন।

+ +

এখানে একটি সহজ উদাহরনঃ

+ +
<div itemscope itemtype ="http://schema.org/Movie">
+  <h1 itemprop="name">Avatar</h1>
+  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
+  <span itemprop="genre">Science fiction</span>
+  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
+</div>
+ +

 

+ +

             সংশ্লিষ্ট বৈশিষ্ট্যাবলী পড়ুন উপর আরও  তথ্যের জন্য https://schema.org/docs/gs.html

diff --git a/files/bn/web/html/global_attributes/itemscope/index.html b/files/bn/web/html/global_attributes/itemscope/index.html new file mode 100644 index 0000000000..93725b7249 --- /dev/null +++ b/files/bn/web/html/global_attributes/itemscope/index.html @@ -0,0 +1,27 @@ +--- +title: স্কিমা মাইক্রোডাটা আইটেমস্কপ +slug: Web/HTML/Global_attributes/itemscope +tags: + - এইচটিএমএল +translation_of: Web/HTML/Global_attributes/itemscope +--- +

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

+ +

 

+ +
<div itemscope itemtype="http://schema.org/Movie">
+  <h1>Avatar</h1>
+  <span>Director: James Cameron (born August 16, 1954)</span>
+  <span>Science fiction</span>
+  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
+</div>
+ +

এই আইটেমস্কুপ দ্বারা <p> ... </ p> নির্দিষ্ট ধরণ সম্পর্কে ভিতর আমরা এইচ টি এম এল উল্লেখ করা হয়, এবং আমরা অ্যাট্রিবিউট আইটেম টাইপের সঙ্গে কনটেন্ট এর ধরণ উল্লেখ করা হয়।
+
+ আইটেম টাইপ সম্পর্কে আরো বৈশিষ্ট্যাবলী পাওয়া যাবে  http://schema.org/Thing

+ +

 

diff --git a/files/bn/web/html/global_attributes/tabindex/index.html b/files/bn/web/html/global_attributes/tabindex/index.html new file mode 100644 index 0000000000..efcf144936 --- /dev/null +++ b/files/bn/web/html/global_attributes/tabindex/index.html @@ -0,0 +1,111 @@ +--- +title: tabindex +slug: Web/HTML/Global_attributes/tabindex +translation_of: Web/HTML/Global_attributes/tabindex +--- +

{{HTMLSidebar("Global_attributes")}}

+ +

Note: The maximum value for tabIndex should not exceed 32767 per W3C section 17.11.1

+ +

ট্যাবইনডেক্স গোব্যাল আত্রিবিওট একটি পূর্ণসংখ্যা যা নির্দেশিত করে যে,যদি এলিমেন্তটি ফোকাসকে ইনপুতে নিতে পারে (ইহা ফোকাসিত),যদি ইহা সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশন অংশগ্রহন করে, এবং যেকোন অবস্তায়. ইহা সহাস্র ভেলু নিতে পারেঃ

+ +
    +
  • একটি  নেগাতিভ ভেলু মানে  হল এলিমেন্তটি অবশ্যই ফোকাসিত,কিন্তু সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশনের মাধ্যমে কাছে আশা যাবে না;
    • +
  • 0 মানে হল এলিমেন্তটি ফোকাসিত করা যায় এবং সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশনের মাধ্যমে কাছে আসা যায়,কিন্ত ইহার রিলেতিভ অর্ডার প্লাটফর্ম দ্বারা সংজ্ঞায়িত;
    • +
  • একটি পসিতিভ ভেলু যার মানে হল ফোকাসিত করা যায় এবং সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশনের মাধ্যমে কাছে আসা যায়,কিন্ত ইহার রিলেতিভ অর্ডার প্লাটফর্ম দ্বারা সংজ্ঞায়িত; সেকএন্তিয়াল ট্যাবইনডেক্সের বড়দিত ভেলুকে অনুসরণ করে।যদি অনেক এলিমেন্তস একই ট্যাবইনডেক্স নিজদের মধ্যে ভাগ করে,তাদের রিলেতিভ অর্ডার তাদের রিলেতিভ পসিসনকে অনুসরন করে)।
    • +
+ +

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

+ +

তুমি এই প্রবন্ধটি পরযাচলনা করতে পারো ফোকাস মানেজমেন্তের ব্যাপক ব্যাখ্যা দেখার জন্য।

+ +

স্পেসিফিকেসনস

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the attribute is now supported on all elements (global attributes).
{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}{{Spec2('HTML4.01')}}Only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
+ +

ব্রাউজার কম্প্যাটিবিলিটি

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

আরও দেখুন

+ + diff --git a/files/bn/web/html/global_attributes/translate/index.html b/files/bn/web/html/global_attributes/translate/index.html new file mode 100644 index 0000000000..f95149af69 --- /dev/null +++ b/files/bn/web/html/global_attributes/translate/index.html @@ -0,0 +1,96 @@ +--- +title: অনুবাদ করা +slug: Web/HTML/Global_attributes/translate +tags: + - এইচ টি এম এল +translation_of: Web/HTML/Global_attributes/translate +--- +

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

+ +

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

+ +
    +
  •  পাতা অনূদিত হয় যখন উপাদান অনুবাদ করা উচিত যা নির্দেশ করে যে খালি স্ট্রিং এবং "হ্যাঁ",।
    • +
  •  কোন", উপাদান অনুবাদ করা উচিত নয় যে, যা নির্দেশ করে।
    • +
+ +

 বিশেষ উল্লেখ

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, initial definition
+ +

 ব্রাউজার উপযুক্ততা

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo }}{{ CompatNo }}{{CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +

 আরো দেখুন

+ +
    +
  • সকল গ্লোবাল গুণাবলী।
    • +
  • এই বৈশিষ্ট্য প্রতিফলিত করে {{domxref ("HTMLElement.translate")}} সম্পত্তি।
    • +
diff --git a/files/bn/web/html/index.html b/files/bn/web/html/index.html new file mode 100644 index 0000000000..b06315e384 --- /dev/null +++ b/files/bn/web/html/index.html @@ -0,0 +1,80 @@ +--- +title: HTML( হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ ) +slug: Web/HTML +tags: + - HTML + - HTML5 + - Landing + - Web +translation_of: Web/HTML +--- +
{{HTMLSidebar}}
+ +

HTML (HyperText Markup Language) হল ওয়েব নির্মানের মূল উপাদান। এটি ওয়েবপেজের বিষয়বস্তুগুলিকে বর্ণনা এবং সংজ্ঞায়িত করে। সাধারণভাবে HTML ছাড়া অন্যান্য প্রযুক্তি একটি ওয়েবপেজের চেহারা / উপস্থাপনা (CSS) অথবা কার্যকারিতা (Javascript) বর্ণনার জন্য ব্যবহার করা হয়। আপনার ব্রাউজারে প্রদর্শিত সবকিছুই মূলত HTML দিয়ে গঠিত হয়। আরও সঠিকভাবে বলা যায় যে, HTML হল এমন একটি ভাষা যা একটি ওয়েব ডকুমেন্টের গঠন, নক্সা, বিষয়বস্তুর অবস্থান, অভ্যন্তরীণ তথ্য ইত্যাদি নিয়ন্ত্রণ করে।

+ +

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

+ +

একটি ওয়েব ব্রাউজারের মধ্যে লেখা, ছবি, এবং অন্যান্য বিষয়বস্তু প্রদর্শনের জন্য এইচটিএমএল "মার্কআপ" ব্যবহার করে। HTML এর মার্কাপগুলি বিশেষ কতগুলি উপাদান দিয়ে অন্তর্ভুক্ত যেমন {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, এবং অনেক কিছু।

+ +

নিচের প্রবন্ধগুলি আপনাকে HTML শিখতে আরও সাহায্য করবে।

+ +
+
    +
  • HTML প্রসঙ্গ + +

    আমাদের বিস্তীর্ণ HTML reference অধ্যায়ে HTML এর সকল এলিমেন্ট ও অ্যাট্রিবিউট এর বিস্তারিত তথ্য জানতে পারবেন।

    +
    • +
  • HTML ডেভেলপার নির্দেশিকা +

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

    +
    • +
  • HTML পরিচিতি +

    ওয়েব ডেভেলপমেন্ট এর ক্ষেত্রে আপনি যদি নতুন হয়ে থাকেন, তাহলে HTML কি এবং কিভাবে এটা ব্যবহার করতে হবে ইত্যাদি জানার জন্য আমাদের পরিচিতি নিবন্ধটি অবশ্যই পড়বেন।

    +
    • +
+ +
+
+

রেফারেন্স সমূহ

+ +

{{SubpagesWithSummaries}}

+ +

সব দেখুন...

+
+ +
+

গাইড এবং টিউটোরিয়াল সমূহ

+ +
+
এইচটিএমএল ডেভেলপার গাইড
+
এমডিএন এর কিছু নিবন্ধ, যাতে কিছু নির্দিষ্ট কৌশল বর্ণনা করা হয়েছে যেগুলো আপনি HTML দিয়ে ওয়েব কন্টেন্ট তৈরি করার সময় ব্যবহার করতে পারেন। এখানে কিছু টিউটোরিয়ালও আছে যেগুলো আপনার কাজে লাগবে।
+
+
+
+
+ +
+
HTML উপাদানসমূহের নির্দেশিকা
+
সকল HTML উপাদানের একটি তালিকা দেখুন।
+
HTML প্রসঙ্গ
+
এইচটিএমএল এলিমেন্ট নিয়ে গঠিত, যার প্রত্যেকটি কতগুলি আট্রিবিউট দ্বারা পরিবর্তিত হতে পারে. HTML documents গুলি পরস্পরের সঙ্গে অন্যান্য লিঙ্কের মাধ্যমে সংযুক্ত থাকে। 
+
Inline উপাদানসমূহ
+
এইচটিএমএল এলিমেন্ট সাধারণত "ইনলাইন" উপাদান বা "ব্লক-স্তরের" উপাদান। একটি ইনলাইন উপাদান শুধুমাত্র ট্যাগের ভিতরের স্থান অধিকার করে থাকে। 
+
Block-level উপাদানসমূহ
+
এইচটিএমএল এলিমেন্ট সাধারণত "ব্লক-স্তরের" উপাদান বা "ইনলাইন" উপাদান। একটি ব্লক স্তরের উপাদান তার  প্যারেন্ট এলিমেন্টের (container) সমস্ত জায়গা জুরে অবস্থান করে, যার ফলে একটি "ব্লক" তৈরি হয়।
+
CORS সক্রিয় ছবি
+
The crossorigin attribute, in combination with an appropriate CORS header, allows images defined by the {{HTMLElement("img")}} element to be loaded from foreign origins and used in a {{HTMLElement("canvas")}} element as if they were being loaded from the current origin.
+
CORS বৈশিষ্ট্যাবলী সেটিংস
+
Some HTML elements that provide support for CORS, such as {{HTMLElement("img")}} or {{HTMLElement("video")}}, have a crossorigin attribute (crossOrigin property), which lets you configure the CORS requests for the element's fetched data.
+
HTML এ ফোকাস ব্যবস্থাপনা
+
The activeElement DOM attribute and the hasFocus() DOM method help you track and control a user's interactions with elements on a webpage.
+
সার্বজনীন attributes
+
Global attributes may be specified on all HTML elements, even those not specified in the standard. This means that any non-standard elements must still permit these attributes, even though those elements make the document HTML5-noncompliant.
+
HTML attribute নির্দেশিকা
+
Elements in HTML have attributes. These are additional values that configure the elements or adjust their behavior in various ways.
+
লিংকের ধরন
+
In HTML, various link types can be used to establish and define the relationship between two documents. Link types include <a>, <area>, and <link>.
+
এইচটিএমএল অডিও এবং ভিডিও উপাদান দ্বারা সমর্থিত Media বিন্যাস
+
The <audio> and <video> elements allow you to play audio and video media. These elements provide a browser-native alternative to similar capabilities found in Adobe Flash and other plug-ins.
+
Using the application cache
+
Application caching lets web-based applications run offline. You can use the Application Cache (AppCache) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.
+
diff --git a/files/bn/web/http/index.html b/files/bn/web/http/index.html new file mode 100644 index 0000000000..6e893c3ced --- /dev/null +++ b/files/bn/web/http/index.html @@ -0,0 +1,90 @@ +--- +title: HTTP +slug: Web/HTTP +tags: + - HTTP + - Hypertext + - NeedsTranslation + - Reference + - TCP/IP + - TopicStub + - Web + - Web Development + - 'l10n:priority' +translation_of: Web/HTTP +--- +
{{HTTPSidebar}}
+ +

Hypertext Transfer Protocol (HTTP) is an application-layer protocol for transmitting hypermedia documents, such as HTML. It was designed for communication between web browsers and web servers, but it can also be used for other purposes. HTTP follows a classical client-server model, with a client opening a connection to make a request, then waiting until it receives a response. HTTP is a stateless protocol, meaning that the server does not keep any data (state) between two requests. Though often based on a TCP/IP layer, it can be used on any reliable transport layer, that is, a protocol that doesn't lose messages silently like UDP does. RUDP — the reliable update of UDP — is a suitable alternative.

+ +
+
+

Tutorials

+ +

Learn how to use HTTP with guides and tutorials.

+ +
+
Overview of HTTP
+
The basic features of the client-server protocol: what it can do and its intended uses.
+
HTTP Cache
+
Caching is very important for fast Web sites. This article describes different methods of caching and how to use HTTP Headers to control them.
+
HTTP Cookies
+
How cookies work is defined by RFC 6265. When serving an HTTP request, a server can send a Set-Cookie HTTP header with the response. The client then returns the cookie's value with every request to the same server in the form of a Cookie request header. The cookie can also be set to expire on a certain date, or restricted to a specific domain and path.
+
Cross-Origin Resource Sharing (CORS)
+
Cross-site HTTP requests are HTTP requests for resources from a different domain than the domain of the resource making the request. For instance, an HTML page from Domain A (http://domaina.example/) makes a request for an image on Domain B (http://domainb.foo/image.jpg) via the img element. Web pages today very commonly load cross-site resources, including CSS stylesheets, images, scripts, and other resources. CORS allows web developers to control how their site reacts to cross-site requests.
+
+ +
+
Evolution of HTTP
+
A brief description of the changes between the early versions of HTTP, to the modern HTTP/2, the emergent HTTP/3 and beyond.
+
Mozilla web security guidelines
+
A collection of tips to help operational teams with creating secure web applications.
+
+ +
+
HTTP Messages
+
Describes the type and structure of the different kind of messages of HTTP/1.x and HTTP/2.
+
A typical HTTP session
+
Shows and explains the flow of a usual HTTP session.
+
Connection management in HTTP/1.x
+
Describes the three connection management models available in HTTP/1.x, their strengths, and their weaknesses.
+
+
+ +
+

Reference

+ +

Browse through detailed HTTP reference documentation.

+ +
+
HTTP Headers
+
HTTP message headers are used to describe a resource, or the behavior of the server or the client. Custom proprietary headers can be added using the X- prefix; others in an IANA registry, whose original content was defined in RFC 4229. IANA also maintains a registry of proposed new HTTP message headers.
+
HTTP Request Methods
+
The different operations that can be done with HTTP: {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, and also less common requests like {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}}, or {{HTTPMethod("TRACE")}}.
+
HTTP Status Response Codes
+
HTTP response codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.
+
+ +
+
CSP directives
+
The {{HTTPHeader("Content-Security-Policy")}} response header fields allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints.
+
+ +

Tools & resources

+ +

Helpful tools and resources for understanding and debugging HTTP.

+ +
+
Firefox Developer Tools
+
Network monitor
+
Mozilla Observatory
+
+

A project designed to help developers, system administrators, and security professionals configure their sites safely and securely.

+
+
RedBot
+
Tools to check your cache-related headers
+
How Browsers Work
+
A very comprehensive article on browser internals and request flow through HTTP protocol. A MUST-READ for any web developer.
+
+
+
diff --git a/files/bn/web/http/status/index.html b/files/bn/web/http/status/index.html new file mode 100644 index 0000000000..b39296ce25 --- /dev/null +++ b/files/bn/web/http/status/index.html @@ -0,0 +1,202 @@ +--- +title: HTTP response status codes +slug: Web/HTTP/Status +tags: + - HTTP + - Landing + - NeedsTranslation + - Overview + - Reference + - Status code + - TopicStub + - Web +translation_of: Web/HTTP/Status +--- +
{{HTTPSidebar}}
+ +

HTTP response status codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes:

+ +
    +
  1. Informational responses (100–199),
    2. +
  2. Successful responses (200–299),
    3. +
  3. Redirects (300–399),
    4. +
  4. Client errors (400–499),
    5. +
  5. and Server errors (500–599).
    6. +
+ +

The below status codes are defined by section 10 of RFC 2616. You can find an updated specification in RFC 7231.

+ +
+

If you receive a response that is not in this list, it is a non-standard response, possibly custom to the server's software.

+
+ +

Information responses

+ +
+
{{HTTPStatus(100, "100 Continue")}}
+
This interim response indicates that everything so far is OK and that the client should continue the request, or ignore the response if the request is already finished.
+
{{HTTPStatus(101, "101 Switching Protocol")}}
+
This code is sent in response to an {{HTTPHeader("Upgrade")}} request header from the client, and indicates the protocol the server is switching to.
+
{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})
+
This code indicates that the server has received and is processing the request, but no response is available yet.
+
{{HTTPStatus(103, "103 Early Hints")}}
+
This status code is primarily intended to be used with the {{HTTPHeader("Link")}} header, letting the user agent start preloading resources while the server prepares a response.
+
+ +

Successful responses

+ +
+
{{HTTPStatus(200, "200 OK")}}
+
The request has succeeded. The meaning of the success depends on the HTTP method: +
    +
  • GET: The resource has been fetched and is transmitted in the message body.
    • +
  • HEAD: The entity headers are in the message body.
    • +
  • PUT or POST: The resource describing the result of the action is transmitted in the message body.
    • +
  • TRACE: The message body contains the request message as received by the server
    • +
+
+
{{HTTPStatus(201, "201 Created")}}
+
The request has succeeded and a new resource has been created as a result. This is typically the response sent after POST requests, or some PUT requests.
+
{{HTTPStatus(202, "202 Accepted")}}
+
The request has been received but not yet acted upon. It is noncommittal, since there is no way in HTTP to later send an asynchronous response indicating the outcome of the request. It is intended for cases where another process or server handles the request, or for batch processing.
+
{{HTTPStatus(203, "203 Non-Authoritative Information")}}
+
This response code means the returned meta-information is not exactly the same as is available from the origin server, but is collected from a local or a third-party copy. This is mostly used for mirrors or backups of another resource. Except for that specific case, the "200 OK" response is preferred to this status.
+
{{HTTPStatus(204, "204 No Content")}}
+
There is no content to send for this request, but the headers may be useful. The user-agent may update its cached headers for this resource with the new ones.
+
{{HTTPStatus(205, "205 Reset Content")}}
+
Tells the user-agent to reset the document which sent this request.
+
{{HTTPStatus(206, "206 Partial Content")}}
+
This response code is used when the {{HTTPHeader("Range")}} header is sent from the client to request only part of a resource.
+
{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}})
+
Conveys information about multiple resources, for situations where multiple status codes might be appropriate.
+
{{HTTPStatus(208, "208 Already Reported")}} ({{Glossary("WebDAV")}})
+
Used inside a <dav:propstat> response element to avoid repeatedly enumerating the internal members of multiple bindings to the same collection.
+
{{HTTPStatus(226, "226 IM Used")}} (HTTP Delta encoding)
+
The server has fulfilled a GET request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance.
+
+ +

Redirection messages

+ +
+
{{HTTPStatus(300, "300 Multiple Choice")}}
+
The request has more than one possible response. The user-agent or user should choose one of them. (There is no standardized way of choosing one of the responses, but HTML links to the possibilities are recommended so the user can pick.)
+
{{HTTPStatus(301, "301 Moved Permanently")}}
+
The URL of the requested resource has been changed permanently. The new URL is given in the response.
+
{{HTTPStatus(302, "302 Found")}}
+
This response code means that the URI of requested resource has been changed temporarily. Further changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.
+
{{HTTPStatus(303, "303 See Other")}}
+
The server sent this response to direct the client to get the requested resource at another URI with a GET request.
+
{{HTTPStatus(304, "304 Not Modified")}}
+
This is used for caching purposes. It tells the client that the response has not been modified, so the client can continue to use the same cached version of the response.
+
305 Use Proxy {{deprecated_inline}}
+
Defined in a previous version of the HTTP specification to indicate that a requested response must be accessed by a proxy. It has been deprecated due to security concerns regarding in-band configuration of a proxy.
+
306 unused
+
This response code is no longer used; it is just reserved. It was used in a previous version of the HTTP/1.1 specification.
+
{{HTTPStatus(307, "307 Temporary Redirect")}}
+
The server sends this response to direct the client to get the requested resource at another URI with same method that was used in the prior request. This has the same semantics as the 302 Found HTTP response code, with the exception that the user agent must not change the HTTP method used: If a POST was used in the first request, a POST must be used in the second request.
+
{{HTTPStatus(308, "308 Permanent Redirect")}}
+
This means that the resource is now permanently located at another URI, specified by the Location: HTTP Response header. This has the same semantics as the 301 Moved Permanently HTTP response code, with the exception that the user agent must not change the HTTP method used: If a POST was used in the first request, a POST must be used in the second request.
+
+ +

Client error responses

+ +
+
{{HTTPStatus(400, "400 Bad Request")}}
+
The server could not understand the request due to invalid syntax.
+
{{HTTPStatus(401, "401 Unauthorized")}}
+
Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response.
+
{{HTTPStatus(402, "402 Payment Required")}} {{experimental_inline}}
+
This response code is reserved for future use. The initial aim for creating this code was using it for digital payment systems, however this status code is used very rarely and no standard convention exists.
+
{{HTTPStatus(403, "403 Forbidden")}}
+
The client does not have access rights to the content; that is, it is unauthorized, so the server is refusing to give the requested resource. Unlike 401, the client's identity is known to the server.
+
{{HTTPStatus(404, "404 Not Found")}}
+
The server can not find the requested resource. In the browser, this means the URL is not recognized. In an API, this can also mean that the endpoint is valid but the resource itself does not exist. Servers may also send this response instead of 403 to hide the existence of a resource from an unauthorized client. This response code is probably the most famous one due to its frequent occurrence on the web.
+
{{HTTPStatus(405, "405 Method Not Allowed")}}
+
The request method is known by the server but has been disabled and cannot be used. For example, an API may forbid DELETE-ing a resource. The two mandatory methods, GET and HEAD, must never be disabled and should not return this error code.
+
{{HTTPStatus(406, "406 Not Acceptable")}}
+
This response is sent when the web server, after performing server-driven content negotiation, doesn't find any content that conforms to the criteria given by the user agent.
+
{{HTTPStatus(407, "407 Proxy Authentication Required")}}
+
This is similar to 401 but authentication is needed to be done by a proxy.
+
{{HTTPStatus(408, "408 Request Timeout")}}
+
This response is sent on an idle connection by some servers, even without any previous request by the client. It means that the server would like to shut down this unused connection. This response is used much more since some browsers, like Chrome, Firefox 27+, or IE9, use HTTP pre-connection mechanisms to speed up surfing. Also note that some servers merely shut down the connection without sending this message.
+
{{HTTPStatus(409, "409 Conflict")}}
+
This response is sent when a request conflicts with the current state of the server.
+
{{HTTPStatus(410, "410 Gone")}}
+
This response is sent when the requested content has been permanently deleted from server, with no forwarding address. Clients are expected to remove their caches and links to the resource. The HTTP specification intends this status code to be used for "limited-time, promotional services". APIs should not feel compelled to indicate resources that have been deleted with this status code.
+
{{HTTPStatus(411, "411 Length Required")}}
+
Server rejected the request because the Content-Length header field is not defined and the server requires it.
+
{{HTTPStatus(412, "412 Precondition Failed")}}
+
The client has indicated preconditions in its headers which the server does not meet.
+
{{HTTPStatus(413, "413 Payload Too Large")}}
+
Request entity is larger than limits defined by server; the server might close the connection or return an Retry-After header field.
+
{{HTTPStatus(414, "414 URI Too Long")}}
+
The URI requested by the client is longer than the server is willing to interpret.
+
{{HTTPStatus(415, "415 Unsupported Media Type")}}
+
The media format of the requested data is not supported by the server, so the server is rejecting the request.
+
{{HTTPStatus(416, "416 Range Not Satisfiable")}}
+
The range specified by the Range header field in the request can't be fulfilled; it's possible that the range is outside the size of the target URI's data.
+
{{HTTPStatus(417, "417 Expectation Failed")}}
+
This response code means the expectation indicated by the Expect request header field can't be met by the server.
+
{{HTTPStatus(418, "418 I'm a teapot")}}
+
The server refuses the attempt to brew coffee with a teapot.
+
{{HTTPStatus(421, "421 Misdirected Request")}}
+
The request was directed at a server that is not able to produce a response. This can be sent by a server that is not configured to produce responses for the combination of scheme and authority that are included in the request URI.
+
{{HTTPStatus(422, "422 Unprocessable Entity")}} ({{Glossary("WebDAV")}})
+
The request was well-formed but was unable to be followed due to semantic errors.
+
{{HTTPStatus(423, "423 Locked")}} ({{Glossary("WebDAV")}})
+
The resource that is being accessed is locked.
+
{{HTTPStatus(424, "424 Failed Dependency")}} ({{Glossary("WebDAV")}})
+
The request failed due to failure of a previous request.
+
{{HTTPStatus(425, "425 Too Early")}}
+
Indicates that the server is unwilling to risk processing a request that might be replayed.
+
{{HTTPStatus(426, "426 Upgrade Required")}}
+
The server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. The server sends an {{HTTPHeader("Upgrade")}} header in a 426 response to indicate the required protocol(s).
+
{{HTTPStatus(428, "428 Precondition Required")}}
+
The origin server requires the request to be conditional. This response is intended to prevent the 'lost update' problem, where a client GETs a resource's state, modifies it, and PUTs it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.
+
{{HTTPStatus(429, "429 Too Many Requests")}}
+
The user has sent too many requests in a given amount of time ("rate limiting").
+
{{HTTPStatus(431, "431 Request Header Fields Too Large")}}
+
The server is unwilling to process the request because its header fields are too large. The request may be resubmitted after reducing the size of the request header fields.
+
{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}
+
The user-agent requested a resource that cannot legally be provided, such as a web page censored by a government.
+
+ +

Server error responses

+ +
+
{{HTTPStatus(500, "500 Internal Server Error")}}
+
The server has encountered a situation it doesn't know how to handle.
+
{{HTTPStatus(501, "501 Not Implemented")}}
+
The request method is not supported by the server and cannot be handled. The only methods that servers are required to support (and therefore that must not return this code) are GET and HEAD.
+
{{HTTPStatus(502, "502 Bad Gateway")}}
+
This error response means that the server, while working as a gateway to get a response needed to handle the request, got an invalid response.
+
{{HTTPStatus(503, "503 Service Unavailable")}}
+
The server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded. Note that together with this response, a user-friendly page explaining the problem should be sent. This responses should be used for temporary conditions and the Retry-After: HTTP header should, if possible, contain the estimated time before the recovery of the service. The webmaster must also take care about the caching-related headers that are sent along with this response, as these temporary condition responses should usually not be cached.
+
{{HTTPStatus(504, "504 Gateway Timeout")}}
+
This error response is given when the server is acting as a gateway and cannot get a response in time.
+
{{HTTPStatus(505, "505 HTTP Version Not Supported")}}
+
The HTTP version used in the request is not supported by the server.
+
{{HTTPStatus(506, "506 Variant Also Negotiates")}}
+
The server has an internal configuration error: the chosen variant resource is configured to engage in transparent content negotiation itself, and is therefore not a proper end point in the negotiation process.
+
{{HTTPStatus(507, "507 Insufficient Storage")}} ({{Glossary("WebDAV")}})
+
The method could not be performed on the resource because the server is unable to store the representation needed to successfully complete the request.
+
{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})
+
The server detected an infinite loop while processing the request.
+
{{HTTPStatus(510, "510 Not Extended")}}
+
Further extensions to the request are required for the server to fulfil it.
+
{{HTTPStatus(511, "511 Network Authentication Required")}}
+
The 511 status code indicates that the client needs to authenticate to gain network access.
+
+ +

Browser compatibility

+ + + +

{{Compat("http.status")}}

+ +

See also

+ + diff --git a/files/bn/web/index.html b/files/bn/web/index.html new file mode 100644 index 0000000000..bccddbc99a --- /dev/null +++ b/files/bn/web/index.html @@ -0,0 +1,82 @@ +--- +title: ডেভেলপারদের জন্য ওয়েব প্রযুক্তি +slug: Web +tags: + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web +--- +

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

+ +
+
+

ওয়েব প্রযুক্তি

+ +

প্রারম্ভিক

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

স্ক্রিপ্টিং

+ +
+
JavaScript
+
JavaScript হল একটা প্রোগ্রামিং ল্যাঙ্গুয়েজ যেটা ব্রাউজার এর মধ্যে চলে ,যেটা অত্যাধুনিক ইউজার ইন্টারঅ্যাক্টিভ ওয়েবসাইট ও অ্যাপ্লিকেশান তৈরি তে ব্যাবহৃত হয়।
+
Web APIs
+
Reference material for each of the individual APIs that comprise the Web's powerful scriptability, including the DOM and all of the related APIs and interfaces you can use to build Web content and apps. +
    +
  • Web API interface reference - সব ইন্টারফেস, alphabetically আয়োজন করা।
    • +
  • WebAPI page যন্ত্র প্রবেশগম্যতা apis আর অন্য apis উপকারি এ্যাপ্লিকেশন-এর জন্য সাজায়
    • +
+
+
+ +

গ্রাফিক্স

+ +
+
SVG
+
আকার পরিবর্তনযোগ্য ভেক্টর গ্রাফিক্স, আপনি তাদের তারা টানা করছি, যা এ নির্বিশেষে আকার সহজে আকার পরিবর্তন করার অনুমতি দেয় ,যাতে ভেক্টর এবং আকার সেট হিসাবে ইমেজ বর্ণনা দেওয়া.
+
WebGL
+
WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML {{HTMLElement("canvas")}} elements
+
+ +

অন্যান্য

+ +
+
MathML
+
গাণিতিক markup ভাষা এটা সম্ভব জটিল গাণিতিক সমীকরণ আর বাক্যপ্রকরণ প্রদর্শন করতে বানায়।
+
+
+ +
+

ধরণ অনুযায়ী ডকুমেন্টেশন

+ +
+
 ওয়েব উন্নতিকারক নির্দেশিকা
+
ওয়েব ডেভেলাপার গাইড উপকারি how-to অভ্যন্তরস্থ বস্তু আপনি ওয়েব প্রযুক্তি আসলে ব্যবহার করেন করতে যা আপনি চান বা করতে দরকার হতে সাহায্য করতে দেয়।
+
ওয়েব উন্নতিকারকদের জন্য TUTORIALS
+
tutorials-এর আপনাকে নিতে একটি লিষ্ট apis, প্রযুক্তি, বা চওড়া বিষয় এলাকা শেখা মধ্য দিয়ে ধাপে ধাপে।
+
References
+
এই পাতা mdn-এর ওপরে সব বরাত তথ্যে সংযোগ প্রস্তাব করবে, কিন্তু এখনকার জন্য প্রযুক্তি-এর ব্যবহার একটা বাঁদিকের সেকশানে সংযোগ করবে
+
+ +

অন্যান্য টপিক

+ +
+
Developing Web applications
+
ওয়েব এ্যাপ্লিকেশন ডেভেলাপার-এর জন্য documentation; ওয়েব অ্যাপ্লিকেশন হচ্ছে সত্য write-once, deploy যেকোথাও এ্যাপস মোবাইল, ডেস্কটপ, আর ফায়ারফক্স os জন্য।
+
Accessibility
+
ওয়েব ‌উন্নয়নে accessibility সক্ষম করা যেহেতু অনেক মানুষ as সম্ভব ওয়েব সাইট ব্যবহার করতে, এমনকি যখন ওগুলো মানুষকে-এর সামর্থ্য কিছু পথে সীমাবদ্ধ করা হয় বুঝায়। এখানে আমরা সন্তুষ্ট হতে সহজগম্য তৈরী করতে তথ্য দেই।
+
+
+
+ +

সব দেখুন...

+ +

 

diff --git a/files/bn/web/javascript/a_re-introduction_to_javascript/index.html b/files/bn/web/javascript/a_re-introduction_to_javascript/index.html new file mode 100644 index 0000000000..b8d2499b2a --- /dev/null +++ b/files/bn/web/javascript/a_re-introduction_to_javascript/index.html @@ -0,0 +1,968 @@ +--- +title: নতুন করে শিখি জাভাস্ক্রিপ্ট (জাভাস্ক্রিপ্ট টিউটোরিয়াল) +slug: Web/JavaScript/A_re-introduction_to_JavaScript +tags: + - জাভা স্ক্রিপ্ট + - জাভাস্ক্রিপ্ট + - জাভাস্ক্রিপ্ট টিউটোরিয়াল +translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +--- +
{{jsSidebar}}
+ +

ভূমিকা

+ +

জাভাস্ক্রিপ্ট নিয়ে কেন নতুন করে ভূমিকা দেওয়ার দরকার পরল? কারণ দুনিয়ায় সবচেয়ে ভুল বোঝা প্রোগ্রামিং ভাষা হিসেবে জাভাস্ক্রিপ্টের ব্যাপক খ্যাতি (!) আছে। আমাদের অনেকেই সি/জাভা/পিএইচপি বা অন্য কোন ভাষায় কোডে মোটামোটি ভালভাবে শিখে ফেলার পরে জাভাস্ক্রিপ্ট শিখতে গিয়ে দেখি বাহ, এটা তো সি/জাভা'র মতই! তারপর ভালমত না শিখেই কাজ করতে যাই জাভাস্ক্রিপ্টে... প্রত্যাশা মত ফলাফল আসে না আর এরপর গলা খুলে জাভাস্ক্রিপ্টের গালমন্দ করি। অথচ জাভাস্ক্রিপ্ট অনেক শক্তিশালী - যেটা অনেক সময় ভাষাটির সহজ-সরল চেহারা দেখে বুঝে ওঠা হয় না। ২০০৫ এ আমরা দেখেছি অনেক নামী-দামী জাভাস্ক্রিপ্ট এপ্লিকেশন বাজারে এসেছে - কাজেই জাভাস্ক্রিপ্টে গভীর জ্ঞান রাখা যে যেকোন ডেভেলপারের জন্য আবশ্যকীয় সেটা না বললেও চলবে!

+ +

ভাষাটির ইতিহাস দিয়ে শুরু করা যাক। ১৯৯৫ সালে নেটস্কেপের প্রকৌশলী Brendan Eich জাভাস্ক্রিপ্ট তৈরি করেন, যেটা মুক্তি পায় ১৯৯৬ সালের শুরুর দিকে নেটস্কেপ ২ (ব্রাউজার) এর সাথে। এর নাম দেয়া হয়েছিল LiveScript, কিন্তু মার্কেটিং কৌশলের গ্যাড়াকলে পড়ে দুর্ভাগ্যজনত এর নাম জাভাস্ক্রিপ্ট হয়ে যায়, সান মাইক্রোসিস্টেম এর জাভা ল্যাংগুয়েজের জনপ্রিয়তাকে পুঁজি করার জন্য। জাভা আর জাভাস্ক্রিপ্টের মাঝে তেমন কোন মিল না থাকা সত্ত্বেও সেই থেকে তাই জাভাস্ক্রিপ্ট নামটা নিয়ে বিভ্রান্তি থেকে গেছে।

+ +

মাইক্রোসফট এই প্রোগ্রামিং ভাষার সাথে প্রায় মিলে যায় এরকম একটি ল্যাংগুয়েজ JScript নাম দিয়ে প্রায় ৩ মাস পর ইন্টারনেট এক্সপ্লোরারের সাথে বাজারে নিয়ে আসে। এদিকে নেটস্কেপ Ecma International (স্ট্যান্ডার্ড নির্ধারণ করে এরকম একটি ইউরোপীয়ান সংস্থা) এর কাছে ল্যাংগুয়েজটি উপস্থাপন করে - যার ফলাফল ১৯৯৭ সালে ECMAScript এর প্রথম সংস্করণ হিসেবে বাজারে আসে। ১৯৯৯ সালে এই স্ট্যান্ডার্ডটি আরো উন্নত হয় ECMAScript সংস্করণ ৩ হিসেবে - আর সেই থেকে ভাষাটির তেমন কোন বড় পরিবর্তন হয়নি। চতুর্থ সংস্করণটি ভেস্তে যায়, ভাষাটির জটিলতা নিয়ে মতবিরোধের ফলাফল হিসেবে। তবে এই চতুর্থ সংস্করণের অনেক অংশবিশেষ কে ভিত্তি হিসেবে ধরে ২০০৯ সালে নতুন ECMAScript এর পঞ্চম সংস্করণ প্রকাশ করা হয় এবং এর ৬ষ্ঠ মূখ্য সংস্করণ বের হয় ২০১৫ সালের জুনে। 

+ +

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

+ +

অন্য সব প্রোগ্রামিং ভাষার সাথে জাভাস্ক্রিপ্টের বড় অমিল হল - এতে কোন ইনপুট/আউটপুটের বালাই নেই। একটা হোস্ট এনভায়রনমেন্টে চলবে ধরে নিয়েই জাভাস্ক্রিপ্ট ডিজাইন করা হয়েছে - সবচেয়ে পরিচিত হোস্ট এনভায়রনমেন্ট হচ্ছে ব্রাউজার। হোস্ট এনভায়রনমেন্টের দায়িত্ব হচ্ছে জাভাস্ক্রিপ্ট কীভাবে বাইরের জগতের সাথে ডেটা আদান প্রদান বা যোগাযোগ করবে সেটার আয়োজন করা। ব্রাউজার ছাড়াও Adobe Acrobat, Photoshop, Yahoo!'র Widget engine এমনকি সার্ভারে-চলে এরকম পরিবেশেও জাভাস্ক্রিপ্ট ইন্টারপ্রেটারের ব্যবহার দেখা যায়।

+ +

হালকা পাতলা ধারণা

+ +

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

+ +

চলুন শুরু করি যেকোন ভাষার মৌলিক উপাদান নিয়ে: type মানে কী কী রকমের ডেটা থাকতে পারে। জাভাস্ক্রিপ্টে যেসব টাইপ আছে সেগুলো হলঃ

+ + + +

... আরও আছে বিশেষ দু'টি টাইপ - "Undefined" আর "Null". আর আছে Arrays, যেটি আসলে অবজেক্টের-ই একটি বিশেষ ধরণ। আছে তারিখ নিয়ে কাজকারবারের জন্যে Dates, আছে Regular Expressions - এগুলোও অবজেক্ট। আর আগেই তো বলা হয়েছে জাভাস্ক্রিপ্টে ফাংশন-ও আসলে অবজেক্ট। টাইপ হচ্ছে তাই:

+ +
    +
  • সংখ্যা (Number)
    • +
  • স্ট্রিং (String)
    • +
  • বুলিয়ান
    • +
  • অবজেক্ট +
      +
    • ফাংশন
      • +
    • Array
      • +
    • Date
      • +
    • RegExp
      • +
    +
    • +
  • Null (নাল)
    • +
  • Undefined (অসংজ্ঞায়িত)
    • +
+ +

ওহ আর বলতে প্রায় ভুলেই গিয়েছিলাম, ত্রুটি ধরার জন্যে কিছু Error টাইপও আছে।

+ +

সংখ্যা বা Numbers

+ +

সংখ্যা টাইপ জাভাস্ক্রিপ্ট এ "double-precision 64-bit format IEEE 754 values", নির্দেশনা অনুসরণ করে। ফলস্বরূপ কিছু বিশেষ ঘটনা ঘটতে পারে। জাভাস্ক্রিপ্টে কোন "Integer" ধরণের টাইপ নাই, তাই অংক কষার সময় মাঝে মাঝে একটু সচেতন থাকবেন C অথবা জাভা ডেভেলপাররা। যেমন ধরুনঃ

+ +
0.1 + 0.2 == 0.30000000000000004
+
+ +

বাস্তবে integer গুলোকে ৩২-বিট ইন্টেজার ধরে নিয়ে কাজ করে জাভাস্ক্রিপ্ট (আর সংরকষণ ও একই ভাবে কিছু ব্রাউজারে করা হয়ে থাকে)। Bit-wise অপারেশন করার সময় এটা মাথায় রাখতে হবে। বিস্তারিত দেখতে পারেন জাভাস্ক্রিপ্টের পূর্ণাঙ্গ Number রেফারেন্স এ।

+ +

অংক কষার জন্য স্ট্যান্ডার্ড সব অপারেটর জাভাস্ক্রিপ্টে আছে, যোগ বিয়োগ, ভাগশেষ (modulus) ইত্যাদি নিয়ে কাজ করা যায়। বলতে ভুলে গেছি Math নামে একটি গ্লোবাল অবজেক্ট আছে গণিত নিয়ে বিশদভাবে কাজকারবার করার জন্যেঃ

+ +
Math.sin(3.5);
+var d = Math.PI * r * r;
+
+ +

বিল্ট-ইন parseInt() ফাংশন ব্যবহার করে কোন string কে integer এ রূপান্তর করতে পারবেন। আর ফাংশনের দ্বিতীয় প্যারামিটার হিসেবে রূপান্তরের ভিত্তি (base) দিতে পারবেন, যদিও এই দ্বিতীয় প্যারামিটার টা ঐচ্ছিক এটা অবশ্যই দেওয়া উচিতঃ

+ +
> parseInt("123", 10)
+123
+> parseInt("010", 10)
+10
+
+ +

২য় প্যারামিটারে base না পাঠালে অপ্রত্যাশিত ফলাফল আসতে পারেঃ

+ +
> parseInt("010")
+8
+
+ +

এমন ফল এসেছে কারণ শুরুতে 0 দেখে parseInt ফাংশনটা ধরে নিয়েছে ১ম প্যারামিটারে পাঠানো সংখ্যাটা অকটাল ভিত্তিতে আছে।

+ +

বাইনারী সংখ্যাকে দশমিক ভিত্তিতে নিয়ে আসা একদম সোজাঃ

+ +
> parseInt("11", 2)
+3
+
+ +

একইভাবে parseFloat() নামেও বিল্ট-ইন ফাংশন আছে যেটা দিয়ে ভগ্নাংশ (floating point number) এ রূপান্তর (parse) করা যায়। তবে parseInt() এর সাথে এর একট অমিল - এটা সবসময় দশমিক ভিত্তিতে আছে ধরে নিয়ে কাজকর্ম করে।

+ +

"+" অপারেটর ব্যবহার করেও কোন মান কে সংখ্যায় রূপান্তর করা যায়। এখানে "+" ইউনারী অপারেটর হিসেবে কাজ করেঃ

+ +
> + "42"
+42
+
+ +

তবে আপনি যদি সংখ্যা নয়, এমন কোন String কে পার্স করতে যান তাহলে বিশেষ এক ধরণের মান ফাংশনের return ভ্যালু হিসেবে পাওয়া যায় -  NaN ("Not a Number" এর সংক্ষিপ্ত রূপ):

+ +
> parseInt("hello", 10)
+NaN
+
+ +

গাণিতিক কোন অপারেটর এর কোন এক NaN পাশে থাকলেই ফলাফাল হিসেবে NaN পাওয়া যাবেঃ

+ +
> NaN + 5
+NaN
+
+ +

বিল্ট-ইন isNaN() ফাংশন ব্যবহার করে বের করতে পারবেন কোন কিছু NaN কিনাঃ

+ +
> isNaN(NaN)
+true
+
+ +

জাভাস্ক্রিপ্টে অসীম মান নিয়ে কাজ করার জন্য আছে বিশেষ মান Infinity এবং -Infinity:

+ +
> 1 / 0
+Infinity
+> -1 / 0
+-Infinity
+
+ +

কোন মান Infinity, -Infinity অথবা NaN কিনা টেস্ট করতে পারবনে বিল্ট-ইন isFinite() ফাংশন দিয়েঃ

+ +
> isFinite(1/0)
+false
+> isFinite(-Infinity)
+false
+> isFinite(NaN)
+false
+
+ +
খেয়াল করুনঃ parseInt() আর parseFloat() ফাংশন দুইটি আপনার দেয়া প্যারামিটারকে ততক্ষণ পার্স করতে থাকবে যতক্ষণ না এটি প্যারামিটারে এমন কোন অক্ষর (character) পাচ্ছে যেটা কিনা অবৈধ (মানে যে ভিত্তিতে বা base থেকে রূপান্তর করা হচ্ছে সেই ভিত্তিতে এই অক্ষরটি থাকতে পারে না)। ফাংশনদুটি এই প্রথম অবৈধ অক্ষর এর আগ পর্যন্ত পার্স করে রিটার্ন করবে। তবে, "+" অপারেটর টি অন্যরকম, প্যারামিটারে কোন অবৈধ ক্যারেকটার থাকলে এটা সোজাসাপটা NaN রিটার্ন করে। ব্যাপারটা ভাল মত বুঝার জন্যে "10.2abc" এটাকে দুইটা ফাংশন দিয়ে পার্স করার কোড লিখে দেখুন!
+ +

স্ট্রিং

+ +

জাভাস্ক্রিপ্টে স্ট্রিং হল অন্য সব ভাষার মত পরপর অনেকগুলো ক্যারেকটার (character) - আরো ভালো মত বলতে গেলে ইউনিকোড ক্যারেক্টার। প্রতিটা ক্যারেকটারকে ১৬-বিট নাম্বার দিয়ে প্রকাশ করা যায়। তাই যাদের এপ্লিকেশনে বিভিন্ন ভাষাভাষী দেশের জন্যে সাপোর্ট দেয়া লাগবে তারা তালিয়া বাজাতে পারেন!

+ +

আপনার যদি কখনো একটা মাত্র ক্যারেকটার ব্যবহার করার প্রয়োজন পরে, তাহলে ১ লেংথ (length) এর স্ট্রিং ব্যবহার করুন যেহেতু ক্যারেকটার বলে কোন টাইপ জাভাস্ক্রিপ্টে নাই।

+ +

আগেই বলেছি জাভাস্ক্রিপ্টে সব স্ট্রিং ই একেক্টা অব্জেক্ট। কয়টা ক্যারেকটার আছে স্ট্রিং এ জানতে হলে length প্রোপার্টি (অবজেক্ট এর ফাংশন) ব্যবহার করুন।

+ +
> "hello".length
+5
+
+ +

এই প্রথম আমরা কোন অব্জেক্ট ব্যবহারের কোড দেখলাম! স্ট্রিং অবজেক্ট এর আরো অনেক ফাংশন ও কিন্তু আছেঃ

+ +
> "hello".charAt(0)
+h
+> "hello, world".replace("hello", "goodbye")
+goodbye, world
+> "hello".toUpperCase()
+HELLO
+
+ +

অন্যান্য টাইপ

+ +

জাভাস্ক্রিপ্টের একটা অনন্য বৈশিষ্ট্য হল এটা null আর undefined এ দুটি জিনিস এক না। Null হচ্ছে 'অবজেক্ট' টাইপের এক ধরণের অবজেক্ট যেটা কোডার স্বেচ্ছায় কোন ভ্যারিয়েবলে এসাইন (asign) করেছেন। আর undefined হল 'undefined' টাইপের একটা অবজেক্ট - কোন ভ্যারিয়েবল যদি কোন ভ্যালু দিয়ে ইনিশিয়ালাইজ (initialize) করা না হয় (সোজা বাংলায় ভ্যারিয়েবল ডিক্লেয়ার করার সময় বা পরে যদি তাতে "=" চিহ্ন দিয়ে কোন মান এ্যাসাইন না করা হয়) তাহলে সেটা undefined অবস্থায় থাকে। ভ্যারিয়েবল নিয়ে আমরা পরে আলোচনা করব। জাভাস্ক্রিপ্টে ভ্যারিয়েবলে কোন ভ্যালু না দিয়েই ভ্যারিয়েবলটি তৈরি করা যায় - তখন তার ভ্যালু হিসেবে থাকে এই 'undefined'।

+ +

জাভাস্ক্রিপ্টে বুলিয়ান বলে একটা টাইপ আছে, যার মান হতে পারে শুধুমাত্র true অথবা false (এই দুইটাই কি-ওয়ার্ড)। নিচের নিয়ম অনুযায়ী যেকোন ভ্যালু কে বুলিয়ানে কনভার্ট করা যায়ঃ

+ +
    +
  1. false, 0, শূন্য স্ট্রিং (""), NaN, null, এবং undefined এগুলাকে বুলিয়ানে কনভার্ট করলে false পাওয়া যাবে।
    2. +
  2. অন্য যেকোন টাইপের ভ্যলু বুলিয়ানে কনভার্ট করলে true পাওয়া যায়।
    3. +
+ +

Boolean() ফাংশন ব্যবহার করে আপনি এই কনভার্সন করেই ছাড়তে পারেনঃ

+ +
> Boolean("")
+false
+> Boolean(234)
+true
+
+ +

কিন্তু আমাদের এভাবে explicitly কনভার্ট করতে হবে না, কারণ জাভাস্ক্রিপ্ট যখন কোথাও বুলিয়ান প্রত্যাশা করে কিন্তু অন্য কোন টাইপ পায়, তখন সে চুপিচুপি এই কনভার্ট টি করে নেয়।

+ +

অন্য ভাষার মত বুলিয়ান অপারেটর যেমন && (লজ্যিকাল AND), , || (লজ্যিকাল or), আর ! (লজ্যিকাল not) আছে।

+ +

ভ্যারিয়েবল (চলক?!)

+ +

var কী-ওয়ার্ড ব্যবহার করে নতুন কোন ভ্যারিয়েবল তৈরি করুনঃ

+ +
var a;
+var name = "simon";
+
+ +

আগেই বলেছি, ভ্যারিয়েবলে কোন ভ্যালু এসাইন না করলে সেটা undefined টাইপ হয়ে বসে থাকে।

+ +

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

+ +

অপারেটর

+ +

জাভাস্ক্রিপ্টের নিউমেরিক (numeric) অপারেটরগুলো হল +, -, *, / আর % - মানে কিনা ভাগশেষ বের করার অপারেটর।  = ব্যবহার করে ভ্যারিয়েবলে ভ্যালু দেয়া হয়। জটিল এসাইনমেন্ট অপারেটরও আছে যেমন += আর -=। এই জটিল অপারেটরগুলোকে ভেঙ্গে এইভাবে কল্পনা করতে পারেনঃ x = x অপারেটর y.

+ +
x += 5
+x = x + 5
+
+ +

ভ্যারিয়েবলের ভ্যালু এক বাড়াতে বা কমাতে যথাক্রমে ++ আর -- অপারেটর ব্যবহার করতে পারেন। সি/জাভার মত এগুলোর প্রিফিক্স/পোস্টফিক্স দুটো ফর্ম-ই আছে।

+ +

আর আমরা তো আগেই জেনেছি + অপারেটর দিয়ে স্ট্রিং জোড়া লাগানো যায় (concatenation)

+ +
> "hello" + " world"
+hello world
+
+ +

আপনি যদি স্ট্রিং কে অন্য কোন সংখ্যা (বা অন্য কোন মান) এর সাথে যোগ করতে যান তাহলে সবকিছু প্রথমে স্ট্রিং এ কনভার্ট করে নেওয়া হয়ঃ

+ +
> "3" + 4 + 5
+345
+> 3 + 4 + "5"
+75
+
+ +

কোন মানকে স্ট্রিং এ কনভার্ট করার তাই আরেকটা চোরাই বুদ্ধি হচ্ছে ঐ মানের সাথে শূন্য স্ট্রিং ("")যোগ করা।

+ +

তুলনা (Compare) করার জন্যে জাভাস্ক্রিপ্টের কাছে আছে <, >, <= আর >= অপারেটর। এগুলো সংখ্যা আর স্ট্রিং দুইটার বেলাতেই কাজ করে। তবে == অপারেটর ব্যবহার করে দুইটা মান সমান কিনা সেটা চেক করাটা একটু অপ্রত্যাশিত হতে পারে, কারণ == অপারেটরের দুই পাশে দুই ধরণের টাইপের ভ্যালু দিলে জাভাস্ক্রিপ্ট প্রয়োজন মত কনভার্ট করে নেয়ঃ

+ +
> "dog" == "dog"
+true
+> 1 == true
+true
+
+ +

জাভাস্ক্রিপ্টের এই মাতব্বরী বন্ধ করতে চাইলে === অপারেটর ব্যবহার করুনঃ

+ +
> 1 === true
+false
+> true === true
+true
+
+ +

আপনি হয়ত ভাবছেন != আর !== অপারেটেরের কথা - হ্যা এগুলো তো আছেই।

+ +

জাভাস্ক্রিপ্ট দিয়ে বিট-লেভেলে (bitwise) অপারেশন ও করতে পারবেন।

+ +

কন্ট্রোল স্ট্রাকচার

+ +

C বা জাভাতে ব্যবহার করে আসা if অথবা else জাভাস্ক্রিপ্টেও একইভাবে ব্যবহার করা যাবেঃ

+ +
var name = "kittens";
+if (name == "puppies") {
+  name += "!";
+} else if (name == "kittens") {
+  name += "!!";
+} else {
+  name = "!" + name;
+}
+name == "kittens!!"
+
+ +

জাভাস্ক্রিপ্টে while আর do-while লুপ আছে, হুবুহু সি-জাভার মত। যদি চান যে লুপটি অন্ততঃ একবার চালাতেই হবে তাহলে do-while ব্যবহার করুন।

+ +
while (true) {
+  // an infinite loop!
+}
+
+var input;
+do {
+  input = get_input();
+} while (inputIsNotValid(input))
+
+ +

সি-জাভার মত for লুপ ব্যবহার করে এক লাইনেই লুপ কন্ট্রোল করতে পারেনঃ

+ +
for (var i = 0; i < 5; i++) {
+  // Will execute 5 times
+}
+
+ +

শর্ট-কাটে লজিক প্রয়োগ করতে পারেন && আর || অপারেটরের একটি অন্যরকম ব্যবহার করে। অপারেটর গুলোর ২য় অপারেন্ড কার্যকর (execute) হবে কিনা নির্ভর করে ১ম অপারেন্ডের ওপরঃ

+ +
var name = o && o.getName();
+
+ +

অথবা ডিফল্ট মান বসানোর জন্যঃ

+ +
var name = otherName || "default";
+
+ +

কন্ডিশনাল এক্সপ্রেশনের জন্য সি-জাভার মত টার্নারী অপারেটর (যেগুলোর অপারেন্ড ৩টি) ব্যবহার করতে পারেনঃ

+ +
var allowed = (age > 18) ? "yes" : "no";
+
+ +

একাধিক ব্রাঞ্চের কন্ট্রোল লজিকের জন্যে switch ব্যবহার করতে পারেন। জাভাস্ক্রিপ্টের switch-case স্ট্রিং এর জন্যে কাজ করেঃ

+ +
switch(action) {
+    case 'draw':
+        drawit();
+        break;
+    case 'eat':
+        eatit();
+        break;
+    default:
+        donothing();
+}
+
+ +

break না ব্যবহার করলে পরের case এও আপনার কোডের কন্ট্রোল চলে যাবে - এরকম কোডিং সাধারণতঃ করা হয়না। তাই আপনি যদি break ব্যবহার না করেন তাহলে কমেন্টে লিখে রাখুন যাতে কনফিউশন তৈরি না হয়।

+ +
switch(a) {
+    case 1: // fallthrough
+    case 2:
+        eatit();
+        break;
+    default:
+        donothing();
+}
+
+ +

default ক্লজটি ঐচ্ছিক। আরেকটি মজার দিক হল switch আর case দু'জায়গাতেই আপনি এক্সপ্রেশন লিখতে পারেন। তুলনা করা হয় === অপারেটর ব্যবহার করেঃ

+ +
switch(1 + 3) {
+    case 2 + 2:
+        yay();
+        break;
+    default:
+        neverhappens();
+}
+
+ +

অবজেক্ট

+ +

জাভাস্ক্রিপ্টে অবজেক্ট হচ্ছে এক কথায় name-value pair। নিচে যেগুলো পয়েন্ট করা হয়ছে সেগুলোর সাথে কোন পার্থক্য নেইঃ

+ +
    +
  • Python এর dictionary
    • +
  • Perl আর ruby'র hash
    • +
  • C/C++ এর hashtable
    • +
  • জাভা'র HashMap
    • +
  • PHP'র associative array
    • +
+ +

এই ডেটা-স্ট্রাকচারটা এত বেশি ব্যবহৃত হয় যে এটা সম্পর্কে নতুন করে বলার সুযোগ কম। যেহেতু জাভাস্ক্রিপ্টে সবকিছুই অবজেক্ট এটা আশা করা স্বাভাবিক যে জাভাস্ক্রিপ্ট প্রোগ্রামে অনেক বেশি হ্যাশটেবিল লুক-আপ হবে... আমরা বেঁচে গেছি কারণ অনেক দ্রুত এই লুক-আপ করা যায়!

+ +

জাভাস্ক্রিপ্ট অবজেক্টের "name" হিসেবে স্ট্রিং ব্যবহার করতে হবে, আর "value" অংশে যা মন চায় ব্যবহার করতে পারবেন। তার মানে ভ্যালু হিসেবে অন্য অবজেক্ট ও রাখতে পারেন। এভাবে যত জটিল চান সেরকম অবজেক্ট-ই তৈরি করতে পারবেন।

+ +

একটা শূণ্য অবজেক্ট ২ভাবে তৈরি করতে পারেনঃ

+ +
var obj = new Object();
+
+ +

আরঃ

+ +
var obj = {};
+
+ +

ওপরের দুইটা উপায় সমার্থক। নিচের পদ্ধটি-তিকে বলা হয় অবজেক্ট লিটারেল, আর এটি JSON সিন্ট্যাক্সের ও একটি অংশ। তাই নিচের পদ্ধটি-তি যত বেশি ব্যবহার করা যায় ভাল!

+ +

অবজেক্ট তৈরি হয়ে যাওয়ার পর এর প্রোপার্টি (সম্পদ?!) দুইভাবে এক্সেস করতে পারবেনঃ

+ +
obj.name = "Simon";
+var name = obj.name;
+
+ +

এবং...

+ +
obj["name"] = "Simon";
+var name = obj["name"];
+
+ +

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

+ +
obj.for = "Simon"; // Syntax error, because 'for' is a reserved word
+obj["for"] = "Simon"; // works fine
+
+ +

আগেই দেখানো অবজেক্ট লিটেরাল সিন্ট্যাক্স ব্যবহার করে পুরো অবজেক্ট গোড়াতেই ইনিশিয়ালাইজ করে নিতে পারেনঃ

+ +
var obj = {
+    name: "Carrot",
+    "for": "Max",
+    details: {
+        color: "orange",
+        size: 12
+    }
+}
+
+ +

অবজেক্টের এট্রিবিউট এক্সেস একের-পর-এক (চেইন) করতে পারেনঃ

+ +
> obj.details.color
+orange
+> obj["details"]["size"]
+12
+
+ +

Array

+ +

জাভাস্ক্রিপ্টের Array আসলে বিশেষ ধরণের অবজেক্ট - রেগুলার অবজেক্টের মতই array কাজ করে বেশিরভাগ সময়ে ( numeric প্রোপার্টি, মানে ০,১,২,... ইন্ডেক্সে থাকা প্রোপার্টি শুধুমাত্র [] সিন্ট্যাক্স দিয়েই এক্সেস করা যাবে)। সব array'র 'length" ম্যাজিক প্রোপার্টি আছে, যার মান হচ্ছেঃ (ওই array'র সর্বোচ্চ ইন্ডেক্স + ১)

+ +

প্রাগৈতিহাসিক(!) নিয়মে array ব্যবহার-পদ্ধতিঃ

+ +
> var a = new Array();
+> a[0] = "dog";
+> a[1] = "cat";
+> a[2] = "hen";
+> a.length
+3
+
+ +

তবে স্মার্ট এপ্রোচ হচ্ছে array লিটেরাল ব্যবহার করাঃ

+ +
> var a = ["dog", "cat", "hen"];
+> a.length
+3
+
+ +

সাবধানঃ লিটের‍্যাল ব্যবহার করে সবশেষের প্রোপার্টির পর কমা রেখে দিলে ব্রাউজার-ভেদে বিভিন্ন অবস্থা তৈরি হতে পারে - তাই সর্বশেষ array element এর পর কমা রেখে দেওয়া চলবে না।

+ +

খেয়াল করুনঃ array.length মানেই যে array তে কয়টা প্রোপার্টি আছে তা কিন্তু সবসময় ঠিক না। নিচের কোড দেখুনঃ

+ +
> var a = ["dog", "cat", "hen"];
+> a[100] = "fox";
+> a.length
+101
+
+ +

আবারো বলছিঃ length প্রোপার্টি হচ্ছে: (সবথেকে বড় ইন্ডেক্স + ১)

+ +

আপনি যদি এমন কোন প্রোপার্টি নিয়ে কাজ করতে চান যেটির ইন্ডেক্স ভুল, তাহলে 'undefined' পাবেন মান হিসেবে।

+ +
> typeof a[90]
+undefined
+
+ +

ওপরে যা বলা হল তা মাথায় রেখে নিচের কোড দিয়ে array এর সব এলিমেন্ট নিয়ে কাজ করতে পারবেন (iteration):

+ +
for (var i = 0; i < a.length; i++) {
+    // Do something with a[i]
+}
+
+ +

তবে ওপরের কোডিং টা অত ভাল হল না, কারণ বারবার array.length প্রোপার্টি'র মান খুঁজতে হচ্ছে। নিচের কোড টা বেশি ভাল (কার্যকরী):

+ +
for (var i = 0, len = a.length; i < len; i++) {
+    // Do something with a[i]
+}
+
+ +

আর নিচেরটা হচ্ছে বস-লেভেলের কোডিং ;-)

+ +
for (var i = 0, item; item = a[i++];) {
+    // Do something with item
+}
+
+ +

খেয়াল করুনঃ লুপের দুই সেমিকোলনের মাঝের অংশ ভ্যারিয়েবল এসাইনমেন্ট আর false কিনা টেস্টিং দুই-ই করা হচ্ছে। এই লুপ ব্রেক করবে প্রথম "falsy" এলিমেন্ট (যেমন 'undefined') পাওয়া মাত্রই।

+ +

কাজেই, যদি array'র কোন এলিমেন্ট "falsy" হওয়ার সম্ভাবনা থাকে, তাহলে ওপরের তথাকতিত "বস-লেভেল" কোডিং ব্যবহার করা যাবে না। যেমন, কোন array এলিমেন্ট এর মান false হিসেবে গণ্য হলেই (যেমন শূণ্য স্ট্রিং) পরের ভ্যালিড এলিমেন্ট ও কিন্তু আর এক্সেস করা যাবে না। আপনি যদি নিশিচ থাকেন যে array তে কোন "falsy" এলিমেন্ট নেই (যেমন অবজেক্টের array অথবা DOM নোড ইত্যাদি) তাহলেই ওপরের পদ্ধতি ব্যবহার করুন।

+ +

for...in লুপ ব্যবহার করেও array এলিমেন্টগুলোতে iterate করতে পারবেন। কেউ যদি Array.prototype (পরে আলোচনা করেছি) ব্যবহার করে নতুন নতুন প্রোপার্টি যোগ করেন এরে তে, তাহলে সেগুলোও এই লুপ দিয়ে iterate করা যাবে:

+ +
for (var i in a) {
+  // Do something with a[i]
+}
+
+ +

Array তে নতুন এলিমেন্ট যোগ করার সবচাইতে নিরাপদ পদ্ধতিঃ

+ +
a[a.length] = item;                 // same as a.push(item);
+
+ +

যেহেতু a.length সবসময় এরে এর সর্বোচ্চ ইন্ডেক্স + ১ কাজেই আপনি নিশ্চিত থাকতে পারেন যে আপনি ফাকা স্থানেই নতুন এলিমেন্ট বসাচ্ছেন।

+ +

Array'র সাথে অনেক ফাংশন প্যাকেট করে দেওয়া হয়েছেঃ

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method nameDescription
a.toString() 
a.toLocaleString() 
a.concat(item[, itemN])প্রদত্ত আইটেম (এলিমেন্ট) গুলো সহ নতুন একটি Array রিটার্ন করে।
a.join(sep) 
a.pop()শেষ এলিমেন্ট-টিকে এরে থেকে মুছে দিয়ে রিটার্ন করে।
a.push(item[, itemN])এরে'র শেষে এক/একাধিক আইটেম যোগ করে
a.reverse() 
a.shift() 
a.slice(start, end)একটি সাব-এরে রিটার্ন করে
a.sort([cmpfn])তুলনা করার জন্য একটি ফাংশন প্যারামিটারে দিতে পারেন (ঐচ্ছিক)
a.splice(start, delcount[, itemN])এরে'র আইটেমগুলো মুছে দিয়ে/রিপ্লেস করতে পারবেন।
a.unshift([item])এরে'র শুরুতে আইটেম কে যোগ করে।
+ +

ফাংশন

+ +

জাভাস্ক্রিপ্ট ভালোমত শিখতে হলে অবজেক্টের পাশাপাশি ফাংশন সম্পর্কেও ভাল ধারণা থাকা দরকার। নিচে খুবই নিরীহ-দর্শন একটা ফাংশন দেখা যাচ্ছেঃ

+ +
function add(x, y) {
+    var total = x + y;
+    return total;
+}
+
+ +

ফাংশনের বেসিক জানার জন্যে এইটুকুই যথেষ্ট। ফাংশনে এক/একাধিক প্যারামিটার/আর্গুমেন্ট পাঠাতে পারেন। ফাংশনের বডিতে যত খুশি স্টেটমেন্ট লিখুন, নিজের ইচ্ছামত "লোকাল" ভ্যারিয়েবল তৈরি করুন। ফাংশনের যেকোন জায়গায় return স্টেটমেন্ট ব্যবহার করতে পারেন - এই স্টেটমেন্টের পরের কোন স্টেটমেন্ট আর কার্যকর হবে না মানে ফাংশন থেকে তখন-ই প্রোগ্রাম বের হয়ে যাবে। return এর পর যেই ভ্যালু দিবেন ফাংশনটি তার caller কে সেই ভ্যালুটি রিটার্ন করবে। return এর পর কোন ভ্যালু না দিলে (অথবা আদৌ কোন রিটার্ন স্টেটমেন্ট ব্যবহার না করলে) জাভাস্ক্রিপ্ট undefined কে রিটার্ন ভ্যালু হিসেবে পাঠিয়ে থাকে।

+ +

আপনি যদি ফাংশন কল করার সময় কোন প্যারামিটারের ভ্যালু না পাঠান, তাহলে 'undefined' ঐ প্যারামিটারের ভ্যালু হিসেবে চলে যাবে ফাংশনের কাছেঃ

+ +
> add()
+NaN // You can't perform addition on undefined
+
+ +

অন্য প্রোগ্রামিং ভাষার সাথে একটুখানি অমিলঃ আপনি চাইলে ফাংশন যতগুলো প্যারামিটার নিয়ে কাজ করে, তার থেকে বেশি প্যারামিটারও পাঠাতে পারেন!

+ +
> add(2, 3, 4)
+5 // added the first two; 4 was ignored
+
+ +

একটু হাস্যকর মনে হলেও, ফাংশনের নিজস্ব arguments নামের একটা array এর মত ভ্যারিয়েবল আছে - এর এলিমেন্ট হিসেবে ফাংশনে যতগুলো ভ্যালু প্যারামিটার হিসেবে পাঠানো হয়েছে সবগুলোই থাকে। আসুন add ফাংশনটিকে এমনভাবে লিখি যাতে যত খুশি প্যারামিটার পাঠানো হোক না কেন সবগুলোই যোগ করা যায়ঃ

+ +

কিছুটা "আজাইরা" ধাঁচের মনে হলেও জাভাস্ক্রিপ্টে ফাংশগুলোর মধ্যে arguments নামের একটি ভ্যারিয়েবল আছে, যাতে ফাংশনটিতে পাস করা সকল ভ্যালু থাকে! আসুন ফাংশনটিকে এমনভাবে পরিবর্তন করি যেন তা ইচ্ছেমত আর্গুমেন্ট নিতে পারে!

+ +
function add() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i < j; i++) {
+        sum += arguments[i];
+    }
+    return sum;
+}
+
+> add(2, 3, 4, 5)
+14
+
+ +

এবার গড় বের করার একটি ফাংশন (ফাংশন নাম্বার ১) লিখে ফেলিঃ

+ +
function avg() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i < j; i++) {
+        sum += arguments[i];
+    }
+    return sum / arguments.length;
+}
+> avg(2, 3, 4, 5)
+3.5
+
+ +

এটা কাজের ফাংশন সন্দেহ নাই, তবে নতুন একটা ঝামেলা তৈরি করলঃ avg() ফাংশন কমা-দিয়ে-আলাদা-করা এক গাদা আর্গুমেন্ট নেয় - কিন্তু আপনি যদি আর্গুমেন্ট হিসেবে শুধু একটি array পাঠাতে চান? তাহলে avg() ফাংশনটা এভাবে (ফাংশন নাম্বার ২) লেখা যেতে পারেঃ

+ +
function avgArray(arr) {
+    var sum = 0;
+    for (var i = 0, j = arr.length; i < j; i++) {
+        sum += arr[i];
+    }
+    return sum / arr.length;
+}
+> avgArray([2, 3, 4, 5])
+3.5
+
+ +

কিন্তু নতুন করে না লিখে আগের ১-নাম্বার ফাংশনটা-ই ব্যবহার করতে পারলে ভাল হত! এক কাজের জন্য কয়টা ফাংশন লিখব, আর কি কাজ কর্ম নাই নাকি? সৌভাগ্যবশতঃ, জাভাস্ক্রিপ্ট দিয়ে যেকোন ফাংশনের apply() মেথড কল করে (যেহেতু ফাংশন-ও এক ধরণের অবজেক্ট, তাই ফাংশনের-ও মেথড/প্রোপার্টি ইত্যাদি থাকতে পারে!) আর্গুমেন্ট হিসেবে যেকোন array পাঠাতে পারেনঃ

+ +
> avg.apply(null, [2, 3, 4, 5])
+3.5
+
+ +

এই apply() মেথডের ২য় প্যারামিটারের ভ্যালুটাই ফাংশনের arguments হিসেবে ব্যবহৃত হবে। প্রথম আর্গুমেন্টের কাজ কি সেটা পরে বলব। আর হ্যা, এখন তো বুঝতে পারলেন যে ফাংশন-ও জাভাস্ক্রিপ্টে আসলে অবজেক্ট! (প্রমাণিত)

+ +

জাভাস্ক্রিপ্টে বেওয়ারিশ (anonymous!) ফাংশন তৈরি করতে পারবেনঃ

+ +
var avg = function() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i < j; i++) {
+        sum += arguments[i];
+    }
+    return sum / arguments.length;
+}
+
+ +

ওপরের "বেওয়ারিশ" ফাংশন আর function avg() এর মাঝে কোন পার্থক্য নাই, অন্ততঃ সিমান্ট্যাকালি। কিন্তু এই anonymous ফাংশন অনেক পাওয়ারফুল - কারণ এভাবে আপনি কোডের যেকোন জায়গায় ফাংশন তৈরি করে নিতে পারেন  - যেখানে হয়ত আগে সাদামাটা এক্সপ্রেশন দেওয়া লাগত। যেমন, একটা ট্রিক দেখুনঃ আমরা জানি জাভাস্ক্রিপ্টে "ব্লক" লেভেলে ভ্যারিয়েবলের নতুন কোন স্কোপ নাই, কিন্তু ফাংশন লেভেলে ভ্যারিয়েবলের স্কোপ আছে। এখন যদি আমরা কোন ফাংশনের ভেতর C ল্যাংগুয়েজের মত ব্লক লেভেলে কোন ভ্যারিয়েবলের স্কোপ চাই, তাহলে চট করে একটা বেওয়ারিশ ফাংশন লিখে ফেলতে পারিঃ

+ +
var a = 1;
+var b = 2;
+(function() {
+  var b = 3; // b ভ্যারিয়েবলের নতুন স্কোপ তৈরি করলাম!
+  a += b;
+})();
+a; // 4
+b; // 2 - b এর মান আগেরটাই আছে।
+
+ +

জাভাস্ক্রিপ্টে ফাংশন রিকারসিভলি (কোন ফাংশনের ভেতর নিজেকেই আবার কল করা) কল করতে পারবেন। Tree - সদৃশ ডেটা স্ট্রাকচার নিয়ে কাজ করতে এটা উপকারী। যেমন, DOM নিয়ে কাজ করার সময় কাজে লাগে।

+ +
function countChars(elm) {
+    if (elm.nodeType == 3) { // TEXT_NODE
+        return elm.nodeValue.length;
+    }
+    var count = 0;
+    for (var i = 0, child; child = elm.childNodes[i]; i++) {
+        count += countChars(child);
+    }
+    return count;
+}
+
+ +

অবশ্য এভাবে কাজ করতে গিয়ে anonymous ফাংশন কল করতে গেলে ঝামেলা হবেঃ এনোনিমাস ফাংশনকে রিকার্সিভ কল কিভাবে করবেন? ওদের তো নাম-ই নাই! এই ঝামেলা দূর করতে এসে গেল "named anonymous ফাংশন":

+ +
var charsInBody = (function counter(elm) {
+    if (elm.nodeType == 3) { // TEXT_NODE
+        return elm.nodeValue.length;
+    }
+    var count = 0;
+    for (var i = 0, child; child = elm.childNodes[i]; i++) {
+        count += counter(child);
+    }
+    return count;
+})(document.body);
+
+ +

এভাবে এনোনিমাস ফাংশনকে দেওয়া নাম শুধুমাত্র ঐ ফাংশনের ভেতরেই কাজ করবে। এভাবে যেমন জাভাস্ক্রিপ্ট ইঞ্জিন অপ্টিমাইজ ভাবে কাজ করতে পারে, সেরকম আপনার কোডও সহজবোধ্য হয়।

+ +

মনের মত অবজেক্ট

+ +
খেয়াল করুন: জাভাস্ক্রিপ্ট দিয়ে অবজেক্ট-ওরিয়েন্ট প্রোগ্রামিং করতে চাইলে আরো বিস্তারিত আলোচনা দেখুন এখানেঃ জাভাস্ক্রিপ্টে অবজেক্ট-ওরিয়েন্টেডের হাতেখড়ি
+ +

এই প্যারার টাইটেল নিয়ে একটু মজা করলাম... হেহে। ইংরেজিতে টাইটেল ছিল "Custom Objects" :-P

+ +

ক্ল্যাসিক অবজেক্ট অরিয়েন্টেড প্রোগ্রামিং মানেই class নামের কী-ওয়ার্ড... জাভাস্ক্রিপ্ট একটু অন্যরকম। আমরা সাধারণত অবজেক্ট কে ডেটা আর সেইসব ডেটার ওপর কাজ করার জন্য মেথড এর একটা কালেকশনকেই বুঝি। জাভাস্ক্রিপ্টে কোন class স্টেটমেন্ট নাই, জাভাস্ক্রিপ্ট prototype-ভিত্তিক প্রোগ্রামিং ভাষা, তাই সবার এই ব্যাপারটা একটু শিখে নেওয়ার দরকার আছে। জাভাস্ক্রিপ্টে আসলে ফাংশন-ই ক্লাস হিসেবে কাজ করে। আসুন একটা person অবজেক্ট চিন্তা করি... যাতে firstname আর lastname দু'টি প্রোপার্টি আছে। এখন, কোন ব্যাক্তির নাম প্রিন্ট করার ২টা পদ্ধতি চিন্তা করিঃ একটা হল আগে firstname প্রিন্ট করব, পরে lastname। আর অন্য পদ্ধতিটা উল্টা, আগে lastname প্রিন্ট করবঃ

+ +
function makePerson(first, last) {
+    return {
+        first: first,
+        last: last
+    }
+}
+function personFullName(person) {
+    return person.first + ' ' + person.last;
+}
+function personFullNameReversed(person) {
+    return person.last + ', ' + person.first
+}
+> s = makePerson("Simon", "Willison");
+> personFullName(s)
+Simon Willison
+> personFullNameReversed(s)
+Willison, Simon
+
+ +

কিন্তু... ওপরের আজব কোড দেখে যেকারর-ই মেজাজ খারাপ হওয়ার  কথা। এভাবে কোড করতে থাকলে শেষপর্যন্ত আপনার স্ক্রিপ্টের global স্কোপেই হাজার হাজার ফাংশন পয়দা হয়ে বসে থাকবে। আমরা চাই অবজেক্টের সদস্য মেথডগুলো শুধু ওই অবজেক্টের স্কোপেই থাকুক। যেহেতু ফাংশন == অবজেক্ট, আমরা নিমেষেই সুন্দর কোডিং করে ফেলতে পারিঃ

+ +
function makePerson(first, last) {
+    return {
+        first: first,
+        last: last,
+        fullName: function() {
+            return this.first + ' ' + this.last;
+        },
+        fullNameReversed: function() {
+            return this.last + ', ' + this.first;
+        }
+    }
+}
+> s = makePerson("Simon", "Willison")
+> s.fullName()
+Simon Willison
+> s.fullNameReversed()
+Willison, Simon
+
+ +

ওপরের কোডে দেখুন আমরা প্রথমবারের মত 'this' কীওয়ার্ড ব্যবহার করলাম। কোন ফাংশনের ভেতর যখন this ব্যবহার করা হয় তখন সেটি ঐ ফাংশনটি'র অবজেক্ট কে রেফার (refer)  করে থাকে, যদি কিনা আপনি ডট (.) অথবা ব্রাকেট ব্যবহার করে মেথডটিকে কল করে থাকেন। কিন্তু অন্য কোন ভাবে কল করলে this আসলে global অবজেক্ট কে রেফার করে। এই ব্যাপারটা ঠিকমত না বুঝতে পারলে ভুল করার সম্ভাবনা থাকে। উদাহরণ দেখুনঃ

+ +
> s = makePerson("Simon", "Willison")
+> var fullName = s.fullName;
+> fullName()
+undefined undefined
+
+ +

যখন আমরা fullName() কল করলাম (s.fullname() না) , 'this' আসলে global অবজেক্ট কে রেফার করে। এই গ্লোবাল অবজেক্ট এর যেহেতু first অথবা last নামের কোন প্রোপার্টি নাই, তাই undefined পাওয়া যাচ্ছে।

+ +

নতুনদের জন্য এই বিষয়টা একটু ভ্রান্তিকর মনে হতে পারে... যাই হোক! এই this কী-ওয়ার্ড ব্যবহার করে আমরা makePerson কে আরেকটু ভাল চেহারা দিতে পারিঃ

+ +
function Person(first, last) {
+    this.first = first;
+    this.last = last;
+    this.fullName = function() {
+        return this.first + ' ' + this.last;
+    }
+    this.fullNameReversed = function() {
+        return this.last + ', ' + this.first;
+    }
+}
+var s = new Person("Simon", "Willison");
+
+ +

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

+ +

দেখতে সুন্দর লাগলেও আসলে এখনো একটা ঝামেলা রয়ে গেছে, যত বার আমরা new ব্যবহার করে makePerson এর অবজেক্ট তৈরি করব, প্রতিটা অবজেক্টের জন্য fullName() আর fullNameRevesed() ফাংশনদুটি'র নতুন কপি তৈরি হবে! কিন্তু আসলে তো উচিত শুধু ক্লাসের সদস্য ভ্যারিয়েবল গুলোর অবজেক্ট-প্রতি কপি তৈরি হওয়া, ফাংশন এর কপি তৈরি করাটা অপ্রয়োজনীয়। প্রতিটা অবজেক্টের জন্য এভাবে মেম্বার ফাংশন তৈরি না করে আসলে প্রচলিত অবজেক্ট-ওরিয়েন্টেড প্রোগ্রামিং এর ধারণা অনুযায়ী কোন ক্লাসের সকল অবজেক্ট বা ইন্সট্যান্সের উচিত ক্লাসের সদস্য ফাংশন শেয়ার করা।

+ +
function personFullName() {
+    return this.first + ' ' + this.last;
+}
+function personFullNameReversed() {
+    return this.last + ', ' + this.first;
+}
+function Person(first, last) {
+    this.first = first;
+    this.last = last;
+    this.fullName = personFullName;
+    this.fullNameReversed = personFullNameReversed;
+}
+
+ +

এখন প্রতিটা অবজেক্টের জন্য ফাংশন গুলোর নতুন কপি তৈরি না করে ফাংশনগুলো একবার-ই তৈরি করে শেয়ার করা নেওয়া হল। কিন্তু আসলে এর থেকেও ভালভাবে কোড করা সম্ভবঃ

+ +
function Person(first, last) {
+    this.first = first;
+    this.last = last;
+}
+Person.prototype.fullName = function() {
+    return this.first + ' ' + this.last;
+}
+Person.prototype.fullNameReversed = function() {
+    return this.last + ', ' + this.first;
+}
+
+ +

Person.prototype এমন একটি অবজেক্ট যা Person ফাংশনের সব ইন্সট্যান্স বা অবজেক্ট শেয়ার করে। এভাবে "prototype chain" নামের বিশেষ ধরণের লুক-আপ চেইন তৈরি হয়ঃ যখন আপনি Person এর এমন কোন প্রোপার্টি এক্সেস করতে চান যেটা এখনো সেট করা হয়নি, জাভাস্ক্রিপ্ট Person.prototype এ খুজে দেখবে (লুক-আপ) সেখানে এই প্রোপার্টি টি সেট করা আছে কিনা। সহজ বাংলায়, Person.prototype এ আমরা যে সকল প্রোপার্টি (ফাংশন বা ডেটা) সেট করব সেটা Person এর সকল ইন্সট্যান্স/অবজেক্ট এক্সেস করতে পারবে।

+ +
+

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

+
+ +

এই প্রটোটাইপ আসলে অনেক পাওয়ারফুল টুল। জাভাস্ক্রিপ্ট আপনাকে যেকোন কিছুর প্রটোটাইপ যেকোন সময় পরিবর্তন করার সুযোগ দেয়। যার মানে, রানটাইমেই আপনি অবজেক্টে নতুন নতুন মেথড যোগ করতে পারেন! এটাও সি/জাভার সাথে অন্যতম পার্থক্য প্রটোটাইপ-ভিত্তিক ল্যাংগুয়েজ যেমন জাভাস্ক্রিপ্ট এর।

+ +
> s = new Person("Simon", "Willison");
+> s.firstNameCaps();
+TypeError on line 1: s.firstNameCaps is not a function
+> Person.prototype.firstNameCaps = function() {
+    return this.first.toUpperCase()
+}
+> s.firstNameCaps()
+SIMON
+
+ +

মজা দেখুনঃ বিল্ট-ইন অবজেক্টের প্রটোটাইপ ও এভাবে পরিবর্তন করা সম্ভব! আসুন আমরা বিল্ট ইন String এ নতুন একটা মেথড যোগ করি স্ট্রিং উল্টে দেওয়ার জন্যঃ

+ +
> var s = "Simon";
+> s.reversed()
+TypeError on line 1: s.reversed is not a function
+> String.prototype.reversed = function() {
+    var r = "";
+    for (var i = this.length - 1; i >= 0; i--) {
+        r += this[i];
+    }
+    return r;
+}
+> s.reversed()
+nomiS
+
+ +

এই নতুন মেথড স্ট্রিং লিট্যারেল এও কাজ করবেঃ

+ +
> "This can now be reversed".reversed()
+desrever eb won nac sihT
+
+ +

আগে যেমনটা বলেছিলাম, prototype হচ্ছে একটা বিশেষ চেইনের অংশ। এই চেইনের গোড়ায় আছে Object.prototype, যার একটা মেথড হল toString() - এই মেথড টা কল হয় যখন আপনি কোন একটা অবজেক্ট কে স্ট্রিং হিসেবে পেতে চাচ্ছেন (জাভা'র toString() এর মতন)। ডিবাগিং করার জন্য এটা উপকারী হবেঃ

+ +
> var s = new Person("Simon", "Willison");
+> s
+[object Object]
+> Person.prototype.toString = function() {
+    return '<Person: ' + this.fullName() + '>';
+}
+> s
+<Person: Simon Willison>
+
+ +

মনে আছে আমরা avg.apply() এর প্রথম প্যারামিটারে null পাঠিয়েছিলাম? এই apply() এর প্রথম প্যারামিটারে যেই অবজেক্ট পাঠাবেন, this সেটাকে রেফার করবে। আমরা new এর একটা সহজ-সরল ইমপ্লেমেন্টেশন করতে পারিঃ

+ +
function trivialNew(constructor) {
+    var o = {}; // Create an object
+    constructor.apply(o, arguments);
+    return o;
+}
+
+ +

অবশ্য এটা পুরোপুরি new হিসেবে ব্যবহার করা যাবে না কারণ প্রটোটাইপ চেইন তৈরি করা হয়নি। এরকম কোড সচরাচর দেখা যায়না, তবে চাইলে যে করতে পারবেন সেটা দেখানো হল আরকি।

+ +

call নামের apply() এর মতই একটা ফাংশন আছে। পার্থক্য হল, array এর বদলে এটি বিশদ-ভাবে (কমা সেপারেটেড) আর্গুমেন্ট নিয়ে থাকেঃ

+ +
function lastNameCaps() {
+    return this.last.toUpperCase();
+}
+var s = new Person("Simon", "Willison");
+lastNameCaps.call(s);
+// Is the same as:
+s.lastNameCaps = lastNameCaps;
+s.lastNameCaps();
+
+ +

ফাংশনের ভেতরে ফাংশন (Inner functions)

+ +

জাভাস্ক্রিপ্টে ফাংশনের ভেতরে ফাংশন লেখা যায় এটা আমরা আগে makePerson() উদাহরণে দেখেছি। একটা গুরুত্বপূর্ণ ব্যাপার খেয়াল রাখতে হবে যে জাভাস্ক্রিপ্টে এই Inner ফাংশন তার প্যারেন্ট ফাংশনের স্কোপ এক্সেস করতে পারেঃ

+ +
function betterExampleNeeded() {
+    var a = 1;
+    function oneMoreThanA() {
+        return a + 1;
+    }
+    return oneMoreThanA();
+}
+
+ +

তাই কোড বুঝার আওতায় রাখা আর মেইন্টেইন করা সহজ জাভাস্ক্রিপ্টেঃ যদি কোন ফাংশন (ফাংশন নাম্বার-১) এমন কয়েকটা ফাংশনের ওপর নির্ভর করে যেই ফাংশনগুলা অন্য কোথাও কাজে লাগে না, তাহলে আমরা সেই ফাংশনগুলোকে এই ১-নাম্বার ফাংশনের ইনার (inner) ফাংশন হিসেবে রেখে দিতে পারি। এতে করে, global স্কোপের আওতায় থাকা ফাংশনের সংখ্যা কমবে - এটা সবসময় ভাল অভ্যাস হিসেবে বিবেচনা করা হয়।

+ +

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

+ +

 ক্লোজার (Closures)

+ +

ক্লোজার জাভাস্ক্রিপ্টের অফার করা সেরা এবস্ট্রাকশন (abstractions) গুলোর একটি - অবশ্য ঠিকভাবে না বুঝলে কনফিউজিং হতে পারে। এটা আসলে কী?

+ +
function makeAdder(a) {
+    return function(b) {
+        return a + b;
+    }
+}
+x = makeAdder(5);
+y = makeAdder(20);
+x(6)
+?
+y(7)
+?
+
+ +

makeAdder নাম দেখেই বুঝা যাচ্ছে এটা নতুন নতুন adder ফাংশন তৈরি করে! এই নতুন ফাংশনগুলো কে যখন কিনা আবার কল করা হবে কোন আর্গুমেন্ট দিয়ে, makeAdder ফাংশনে দেয়া আর্গুমেন্টটির সাথে এই নতুন আর্গুমেন্ট কে যোগ করবে।

+ +

এখানে যা হচ্ছে অনেকটাই Inner ফাংশনের সাথে মিলে যায়ঃ একটা ফাংশনকে অন্য কোন ফাংশনের মধ্যে তৈরি করা হয়ছে - ভেতরের ফাংশনটি বাইরের (প্যারেন্ট) ফাংশনের সব ভ্যারিয়েবল এক্সেস করতে পারে। একমাত্র পার্থক্য হচ্ছে বাইরের (outer) ফাংশনটি কিন্তু রিটার্ন করে গিয়েছে, তাই কমন-সেন্স থেকে মনেহতে পারে যে এর লোকাল ভ্যারিয়েবল গুলো আর নেই। কিন্তু আসলে, এগুলো এখনো বহাল তবিয়তেই আছে - না থাকলে adder ফাংশনগুলো তো কাজ করত না! আরো লক্ষ্যণীয় যে makeAdder এর লোকাল ভ্যারিয়েবলের দু'টি আলাদা, ভিন্ন "কপি" দেখা যাচ্ছে - যার একটিতে a ভ্যারিয়েবলের মানে 5 আর অন্যটিতে এই মান 20। তাই, ওপরের ফাংশন কল  দু'টির ফলাফল হবে নিম্নরূপঃ

+ +
x(6) // returns 11
+y(7) // returns 27
+
+ +

পর্দার আড়ালেঃ যখন জাভাস্ক্রিপ্ট কোন ফাংশন execute করে, ঐ ফাংশনের লোকাল ভ্যারিয়েবল গুলো রাখার জন্যে একটি 'স্কোপ' অবজেক্ট তৈরি করা হয়। এই স্কোপ ভ্যারিয়েবল ইনিশিয়ালাইজ করা হয় ফাংশনে প্যারামিটার হিসেবে যেসব ভ্যারিয়েবল পাঠানো হয়েছিল সেগুলো দ্বারা। এটা গ্লোবাল অবজেক্টের মতই যেখানে সব গ্লোবাল ভ্যারিয়েবল আর ফাংশনগুলো থাকে, কিন্তু দু'টি পার্থক্য সহ। প্রথমতঃ প্রতিবার একটি ফাংশন execute হওয়া শুরু করে একটি নতুন স্কোপ অবজেক্ট তৈরি হয়ে যায়। গ্লোবাল স্কোপ অবজেক্টের সাথে দ্বিতীয় পার্থক্যটি হল, গ্লোবাল স্কোপের প্রোপার্টি সরাসরি এক্সেস করা যায় (যেমন ব্রাউজারের ক্ষেত্রে এই গ্লোবাল অবজেক্ট টি হল window), কিন্তু ফাংশনের স্কোপের ক্ষেত্রে এটি সম্ভব নয়। উদাহরণস্বরূপ বলা যায়, ফাংশনের স্কোপ অবজেক্টের প্রোপার্টিকে iterate করে এক্সেস করা সম্ভব নয়।

+ +

তাই যখন makeAdder কল করা হয়েছিল, একটা স্কোপ অবজেট তৈরি হয়ে গেছে। এই স্কোপ অবজেক্টের একটাই প্রোপার্টিঃ a ভ্যারিয়েবল যেটি কিনা এই ফাংশনের একমাত্র প্যারামিটার। makeAdder তারপর নতুন একটা ফাংশন তৈরি করে রিটার্ন করে। এই মুহূর্তে জাভাস্ক্রিপ্টের গারবেজ কালেকটর (কোন ভ্যারিয়েবল গুলোর আর প্রয়োজন নাই সেগুলো খুজে বের করে এরা যে মেমরি দখল করে রেখেছিল তা অন্য নতুন ভ্যারিয়েবলের জন্য ফ্রি করে দেওয়া'র পদ্ধতি) এর makeAdder এর স্কোপ অবজেট গায়েব করে ফেলার কথা, কিন্তু makeAdder যে ফাংশনটি তৈরি করে রিটার্ন করল তার মাঝে makeAdder এর স্কোপ অবজেক্টের একটা রেফারেন্স থেকে যায়। যে কারণে, যতক্ষণ makeAdder এর রিটার্ন করা ফাংশনের কোন না কোন রেফারেন্স কোডে অবশিষ্ট থাকছে (সহজভাবে যতক্ষণ এটি ব্যবহৃত হচ্ছে), ততক্ষণ makeAdder এর স্কোপ অবজেক্ট-টিও অক্ষত থাকবে।

+ +

স্কোপ অবজেক্টেরা প্রোটোটাইপ চেইনে মত স্কোপ চেইন মেইনটেইন করে।

+ +

ক্লোজার হচ্ছে একট ফাংশন আর এই ফাংশনকে যেই ফাংশন তৈরি করেছিল তার স্কোপ অবজেক্টের একটা সমন্বয় (combination)।

+ +

ক্লোজার আপনাকে স্টেট মনে রাখার একটা সুবিধা দেয় - যে কারণে অবজেক্টের বদলে ক্লোজার ব্যবহার করা যেতে পারে।

+ +

মেমরি অপচয় (Memory leaks)

+ +

ক্লোজার ব্যবহারের একটি দুর্ভাগ্যজনক পার্শ্বপ্রতিক্রিয়া হল এটি ইন্টার্নেট এক্সপ্লোরারে মেমরি অপচয় করে। জাভাস্ক্রিপ্টে গার্বেজ কালেকশন পদ্ধতি ব্যবহার করা হয় অবজেক্টের দখল করা মেমরি ফ্রি করার জন্যে। অবজেক্ট যখন তৈরি হয় তখন তাদের মেমরি দেওয়া (allocate) করা হয় - যখন ঐ অবজেক্টের আর কোন রেফারেন্স কোডে অবশিষ্ট থাকে না তখন সেই মেমরি ফ্রি করে দেওয়া হয়। হোস্ট যেসব অবজেক্ট সরবরাহ করে সেগুলো হ্যান্ডেল সেই হোস্ট নিজেই করে।

+ +

ব্রাউজার হোস্টগুলোর বিশাল পরিমাণে অবজেক্ট ম্যানেজ করা লাগে - যেই HTML পাতাটি দেখানো হচ্ছে - তার জন্যে DOM এর অবজেক্ট গুলো। এই অবজেক্টগুলো ম্যানেজ আর রিকভারি করার দায়িত্ব ব্রাউজারের।

+ +

এই কাজের জন্যে ইন্টারনেট এক্সপ্লোরার (IE) তার নিজের গার্বেজ কালেকশন পদ্ধতি ব্যবহার করে, জাভাস্ক্রিপ্টের পদ্ধতি থেকে যেটি আলাদা। এই দুই এর মাঝে ইন্টারেকশনের জন্যে মেমরি অপচয় হতে পারে।

+ +

IE তে মেমরি অপচয় হবে যখনি কোন জাভাস্ক্রিপ্ট অবজেক্ট আর নেটিভ অবজেক্টের মাঝে সার্কুলার (circular) রেফারেন্স তৈরি হবে। নিচের কোড দেখুনঃ

+ +
function leakMemory() {
+    var el = document.getElementById('el');
+    var o = { 'el': el };
+    el.o = o;
+}
+
+ +

ওপরের কোডে যে সার্কুলার রেফারেন্স তৈরি হল তার জন্যে IE, el আর o অবজেক্টের দখল করা মেমরি ফ্রি করবে না যতক্ষণ না ব্রাউজার পুরোপুরি রিস্টার্ট করা হচ্ছে। ফলাফল মেমরি অপচয়...

+ +

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

+ +

সার্কুলার রেফারেন্স ওপরের কোডের মত এত সহজে চোখে নাও পড়তে পারে। অনেক সময় মেমরি নষ্ট করা ডেটা স্ট্রাকচারে অনেক লেভেলের রেফারেন্সের পরে সার্কুলার রেফারেন্স তৈরি হতে পারে - তখন আর চট করে সার্কুলার রেফারেন্স ধরা যাবে না।

+ +

ক্লোজার ব্যবহার করলে অনিচ্ছাকৃত মেমরি অপচয় হতে পারে। নিচের কোড টা দেখুনঃ

+ +
function addHandler() {
+    var el = document.getElementById('el');
+    el.onclick = function() {
+        this.style.backgroundColor = 'red';
+    }
+}
+
+ +

ওপরের কোডে HTML এলিমেন্ট টিকে লাল  রং করা হবে যখন কেউ এর উপরে ক্লিক করবে। একই সাথে মেমরি লীক ও হতে থাকবে। কেন? কারণ এনোনিমাস inner ফাংশনটি'র ক্লোজারে el এর একটা রেফারেন্স অনিচ্ছাকৃতভাবে থেকে যাবে। এর ফলে একটা জাভাস্ক্রিপ্ট অবজেক্ট (ফাংশনটি) আর একটা নেটিভ অবজেক্ট (el) এর মাঝে সার্কুলার রেফারেন্স তৈরি হল।

+ +

এই সমস্যা সমাধানের কয়েকটা উপায় আছে। সবথেকে সহজটি হল আদৌ কোন el ভ্যারিয়েবল ব্যবহার না করাঃ

+ +
function addHandler(){
+    document.getElementById('el').onclick = function(){
+        this.style.backgroundColor = 'red';
+    }
+}
+
+ +

আরেকটা মজার উপায় হল এক ক্লোজার এর সার্কুলার রেফারেন্স অন্য আরেকটি ক্লোজার দিয়ে নষ্ট করাঃ

+ +
function addHandler() {
+    var clickHandler = function() {
+        this.style.backgroundColor = 'red';
+    };
+    (function() {
+        var el = document.getElementById('el');
+        el.onclick = clickHandler;
+    })();
+}
+
+ +

Inner ফাংশনটি সরাসরি execute হয়, এর ভেতরের সবকিছু clickHandler এর তৈরি করা ক্লোজার থেকে আড়াল করে।

+ +

ক্লোজার থেকে দূরে থাকার আরেকটি ভাল বুদ্ধি হল window.onunload ইভেন্টে সার্কুলার রেফারেন্স দূর করা। অনেক ইভেন্ট লাইব্রেরী এই পদ্ধতি ব্যবহার করে। কিন্তু এরকম করলে আবার ফারায়ফক্স ১.5 এর bfcache কাজ করবে না, তাই ফায়ারফক্সে unload লিসেনার রেজিস্টার করা উচিত হবে না (যদি এমন হয় যে ব্যবহার না করে উপায় নাই তাহলে অবশ্য ভিন্ন কথা)।

+ +
+

মূল ডকুমেন্টের খবরাখবর...

+ +
    +
  • লেখকঃ Simon Willison
    • +
  • শেষ সম্পাদনাঃ মার্চ ৭, ২০০৬
    • +
  • কপিরাইটঃ © 2006 Simon Willison, contributed under the Creative Commons: Attribute-Sharealike 2.0 license.
    • +
  • আরো তথ্যঃ এই টিউটোরিয়াল নিয়ে আরো তথ্যের জন্য (আর মূল আলোচনার স্লাইডের লিংক পেতে) দেখুন Simon's Etech weblog post.
    • +
+
+ +

 

+ +

অনুবাদ সংক্রান্ত তথ্যঃ টেকনিকাল তথ্য অপরিবর্তিত রেখে ভাবানুবাদের পাশাপাশি সামান্য পরিমার্জনা করা হয়েছে।

diff --git a/files/bn/web/javascript/data_structures/index.html b/files/bn/web/javascript/data_structures/index.html new file mode 100644 index 0000000000..ab05a49d7a --- /dev/null +++ b/files/bn/web/javascript/data_structures/index.html @@ -0,0 +1,116 @@ +--- +title: জাভাস্ক্রিপ্টে ডেটা স্ট্রাকচার +slug: Web/JavaScript/Data_structures +tags: + - JavaScript +translation_of: Web/JavaScript/Data_structures +--- +
{{jsSidebar("More")}}
+ +

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

+ +

ডাইনামিক টাইপিং 

+ +

JavaScript একটি loosely typed বা dynamic ভাষা। যার মানে হচ্ছে আমাদের আগে থেকে কোন variable এর type বলে দিতে বা ঠিক করে দিতে হবে না। কোন প্রোগ্রাম চলাকালে অটোমেটিক এর type ঠিক হয়ে যায়। যার মানে দাঁড়ায়, আমরা একই নামের বিভিন্ন type এর variable তৈরি করতে পারি!! 

+ +
var foo = 42;    // foo is now a Number
+var foo = 'bar'; // foo is now a String
+var foo = true;  // foo is now a Boolean
+ +

ডেটা টাইপ 

+ +

ECMAScript স্ট্যান্ডার্ড অনুযায়ী ৭ ধরণের ডেটা স্ট্রাকচার আছেঃ

+ +

 

+ +
    +
  • প্রথম ৬টি হল মৌলিক বা {{Glossary("Primitive", "primitives")}}: +
      +
    • বুলিয়ান {{Glossary("Boolean")}}
      • +
    • নাল {{Glossary("Null")}}
      • +
    • অসংগায়িত {{Glossary("Undefined")}}
      • +
    • সংখ্যা {{Glossary("Number")}}
      • +
    • স্ট্রিং {{Glossary("String")}}
      • +
    • সিম্বল {{Glossary("Symbol")}} (new in ECMAScript 6)
      • +
    +
    • +
  • এবং অবজেক্ট  {{Glossary("Object")}}
    • +
+ +

নিচের আলোচনায় আমরা দেখব কিভাবে এগুলো ব্যবহার করে ডেটা রাখা যায় আর কীভাবে এগুলোর সাহায্যে আরও উন্নতমানের ডেটা স্ট্রাকচার তৈরি করা যায়।

+ +

মৌলিক/বেসিক মানসমূহ

+ +

অবজেক্ট ছাড়া বাকি সব টাইপের ডেটার মান তৈরি করার পর আর পরিবর্তন করা যায় না। বিশেষকরে, স্ট্রিং (যেখানে C ভাষায় স্ট্রিং এর মান পরিবর্তন করা যায়)। এই টাইপের ডেটাকে আমরা মৌলিক (primitive) টাইপের বলে থাকি। নিচে {{ anch("Strings") }} নিয়ে আলোচনায় এই বিষয়ে বিস্তারিত রয়েছে।

+ +

বুলিয়ান, নাল এবং অসংজ্ঞায়িত

+ +

শুধুমাত্র চারটি ধ্রুবক (কন্সট্যান্ট) দিয়েই এই ডেটাটাইপ গুলো প্রকাশ করা সম্ভবঃ বুলিয়ান প্রকাশ করার জন্য  true, false, নাল প্রকাশের জন্য null, আর অসংজ্ঞায়িত প্রকাশের জন্য undefined। যেহেতু এগুলো কন্সট্যান্ট, এগুলো উঁচুমানের ডেটা রাখতে পারে না।

+ +

সংখ্যা

+ +

ECMAScript স্ট্যান্ডার্ড অনুযায়ী সংখ্যা প্রকাশ করার জন্য একটি মাত্র নাম্বার-টাইপ আছেঃ "double-precision 64-bit binary format IEEE 754 value"। অন্যান্য প্রোগ্রামিং ভাষার মত Integer (পূর্ণ সংখ্যা) প্রকাশ করার জন্য আলাদা কোন টাইপ নেই! ভগ্নাংশ রাখার পাশাপাশি জাভাস্ক্রিপ্টের এই একমাত্র নাম্বার টাইপ দিয়ে +Infinity, -Infinity, এবং NaN (not-a-number) এই বিশেষ প্রতীক গুলোও প্রকাশ করা যায়।

+ +

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

+ +

স্ট্রিং

+ +

স্ট্রিং হচ্ছে "বাক্য" বা একসাথে অনেকগুলো অক্ষর।  C ভাষার সাথে জাভাস্ক্রিপ্টের পার্থক্য হচ্ছে জাভাস্ক্রিপ্টের স্ট্রিং তৈরি করার পর পরিবর্তন করা যায় না। তবে একটি স্ট্রিং এর ওপর কোন অপারেশন প্রয়োগ করে নতুন অন্য স্ট্রিং তৈরি করা যায়। যেমনঃ

+ +
    +
  • মূল স্ট্রিং এর যেকোন অংশ থেকে যেকোন সংখ্যক অক্ষর নিয়ে সাব-স্ট্রিং তৈরি করা যায়। অথবা সরাসরি এই ফাংশন ব্যবহার করে সাবস্ট্রিং তৈরি করা যায়ঃ String.substr()।
    • +
  • যোগ করার অপারেটর (+) ব্যবহার করে দুইটা স্ট্রিং একের পর এক বসিয়ে নতুন আরেকটা স্ট্রিং তৈরি করা যায়। একই কাজ হয় String.concat() ফাংশন ব্যবহার করে।
    • +
+ +

আপনার কোডের সব ডেটা স্ট্রিং দিয়ে প্রকাশ করবেন না!

+ +

জটিল রকমের ডেটাকে স্ট্রিং দিয়ে প্রকাশ করার প্রবণতা খুবই লক্ষ্য করা যায়। কারণ, কিছু সুবিধা পাওয়া যায় প্রায় সবকিছু স্ট্রিং দিয়ে প্রকাশ করতে গেলেঃ

+ +
    +
  • স্ট্রিং এর পর স্ট্রিং বসিয়ে অনেক জটিল ডেটা তৈরি করা যায়।
    • +
  • স্ট্রিং ডেটাকে ডিবাগ করা খুব সহজ।
    • +
  • অনেক API তেই স্ট্রিং খুব পরিচিত একটা মুখ। এসব API এর মধ্যে উদাহরণ হিসেবে input fields, local storage মান, {{ domxref("XMLHttpRequest") }} responses  যখন responseText ব্যবহার করা হচ্ছে, ইত্যাদি।) তাই মনে হতে পারে সব ডেটাই তো স্ট্রিং দিয়ে প্রকাশ করা যাচ্ছে!
    • +
+ +

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

+ +

তাই শুধুমাত্র টেক্সট-জাতীয় ডেটা রাখার জন্যই স্ট্রিং ব্যবহার করা উচিত। জটিল ডেটা রাখার জন্য স্ট্রিংটিকে পার্স করে উপযুক্ত ডেটা স্ট্রেকচার ব্যবহার করতে হবে।

+ +

অবজেক্ট

+ +

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

+ +

"সাধারণ"  অবজেক্ট, আর ফাংশন

+ +

জাভাস্ক্রিপ্টে অবজেক্ট হচ্ছে key-value ম্যাপিং। মানে অবজেক্টের কোন একটা স্ট্রিং key এর মান হিসেবে যেকোন ডেটা টাইপের value রাখা যাবে। তাই অবজেক্ট কে হ্যাশ-ম্যাপের বিকল্প হিসেবে ব্যবহার করা যায়। তবে, নন-স্ট্যান্ডার্ড __proto__ pseudo প্রোপার্টি সাবধানে ব্যবহার করতে হবে। যেখানে প্রযোজ্য, সেখানে __proto__ এর ভুল মান বসালে অবজেক্টের নিজস্ব প্রোটোটাইপ (ধরণ) বদলে যাবে। যেসব ক্ষেত্রে আমরা জানি না কোন স্ট্রিং এর উৎস কী (যেমন কোন ইনপুট ফিল্ড) সেসব ক্ষেত্রে সাবধান থাকতে হবেঃ অন্যরা এই সমস্যায় ভুগেছে। এসব ক্ষেত্রে কোন StringMap abstraction ব্যবহার করা যেতে পারে।

+ +

ফাংশনও অবজেক্ট, জাভাস্ক্রিপ্টে। পার্থক্য হল, ফাংশন কে কল করা যায়।

+ +

Arrays

+ +

Arrays ও অবজেক্ট, জাভাস্ক্রিপ্টে। তবে এখানে, প্রোপার্টি গুলোর key হচ্ছে পূর্ণ সংখ্যা আর বিশেষ 'length' প্রোপার্টি রয়েছে এদের। আরও কাহিনী হল, এরেগুলো ইনহেরিট হয় Array.prototype  থেকে - যার ফলে বেশ কিছু দরকারি ফাংশন পাওয়া যায় এরে অবজেক্ট গুলো থেকে। যেমন, indexOf ফাংশন ব্যবহার করে array তে কোন একটা মান (সদস্য) আছে কিনা জানা যায় আবার push ফাংশন ব্যবহার করে এরে এর শেষে কোন সদস্য যোগ করা যায়। লিস্ট কিংবা সেট হিসেবে ব্যবহার করার জন্য তাই এরে হচ্ছে সবচেয়ে উপযুক্ত ডেটা-স্ট্রাকচার।

+ +

তারিখ

+ +

তারিখ প্রকাশ করার জন্য সবচেয়ে উপযুক্ত হবে নিজস্ব Date ইউটিলিটি ব্যবহার করা। 

+ +

WeakMaps, ম্যাপ, সেট

+ +

স্ট্যান্ডার্ড নয়। আশা করা যায় ECMAScript 6. ভার্সনে স্ট্যান্ডার্ড হবে।

+ +

এসব ডেটা স্ট্রাকচার কোন অবজেক্টের রেফারেন্স কে key হিসেবে নিতে পারে। সেট দিয়ে একসারি (set) অব্জেট প্রকাশ করা হয়, আবার WeakMaps আর ম্যাপ দিয়ে কোন অবজেক্ট কে ভ্যালু হিসেবে রাখা হয়। ম্যাপ আর উইকম্যাপ এর মাঝে পার্থক্য হচ্ছেঃ ম্যাপে অবজেক্ট key, enumerate করা যায়। আর উইকম্যাপে গার্বেজ-কালেকশন বেশি ভালভাবে কাজ করে।

+ +

শুধুমাত্র ECMAScript 5 ব্যবহার করেই ম্যাপ ও সেট ইমপ্লিমেন্ট করা সম্ভব। কিন্তু যেহেতু অবজেক্ট compare (যেমন, কোনটা কার থেকে ছোট সেই তুলনা করতে গেলে) করা সম্ভব না, লুক-আপ পারফরমেন্স linear হয়ে যাবে এতে। এর থেকে নেটিভ ইমপ্লেমেন্টেশন ভাল হবে কারণ তাহলে লুক-আপ পারফরমেন্স লগারিদমিক থেকে কন্সটান্ট পর্যন্ত হতে পারবে।

+ +

সাধারণভাবে, DOM নোডে ডেটা bind করার জন্য যে কেউ সরাসরিভাবে অবজেক্টে প্রোপার্টি হিসেবে দিয়ে দিতে পারে, অথবা data-* attribute গুলো ব্যবহার করতে পারে। এর সমস্যা হল একই context এ চলছে এরকম যেকোন স্ক্রিপ্ট এই ডেটা ব্যবহার করতে পারবে। ম্যাপ আর উইকম্যাপ দিয়ে ডেটা কোন অব্জেক্টের সাথে সহজেই প্রাইভেট ভাবে bind করা যায়।

+ +

TypedArrays

+ +

স্ট্যান্ডার্ড নয়। আশা করা যায় ECMAScript 6. ভার্সনে স্ট্যান্ডার্ড হবে।

+ +

আরও দেখুন

+ + diff --git a/files/bn/web/javascript/guide/grammar_and_types/index.html b/files/bn/web/javascript/guide/grammar_and_types/index.html new file mode 100644 index 0000000000..b5dbd8bda4 --- /dev/null +++ b/files/bn/web/javascript/guide/grammar_and_types/index.html @@ -0,0 +1,635 @@ +--- +title: 'ভ্যালু, ভ্যারিয়েবল, এবং লিটারেল' +slug: Web/JavaScript/Guide/Grammar_and_types +tags: + - জাভাস্ক্রিপ্ট +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +

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

+ +

এই চ্যাপ্টারের আলোচ্য বিষয় হল ভ্যালু যা জাভাস্ক্রিপ্ট চেনে এবং জাভাস্ক্রিপ্ট এক্সপ্রেশন গঠনের মূল কাঠামো: ভেরিয়েবল, কনস্টান্ট, এবং লিটারেল সম্পর্কে বর্ণনা করে।

+ +

Values(মান)

+ +

জাভাস্ক্রিপ্ট নিচে উল্লেখিত পাঁচ ধরণের প্রাথমিক টাইপের ভ্যালুগুলো চেনে:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 
টাইপভ্যালু টাইপের উদাহরন / ব্যাখ্যা
সংখ্যা/Number42, 3.14159
বুলিয়ান/Booleantrue / false
স্ট্রিং/String"Howdy"
nullnull বা "শুন্য" ভ্যালু নির্দেশ করার জন্য এই কী-ওয়ার্ড টি ব্যবহার করা হয়। এছাড়া নাল একপ্রকার প্রিমিটিভ ভ্যালু। যেহেতু জাভাস্ক্রিপ্ট ইংরেজী হরফের কেইস-সংবেদনশীল(case-sensitive), null তাই Null, NULL অথবা এগুলোর সমমানের সবগুলো-ই ভিন্ন।
undefinedundefined হল top-level প্রোপার্টি যার ভ্যালু হচ্ছে এটা বা'অসংজ্ঞায়িত' হিসেবে চিহ্নিত করার জন্য । এটাএকটি প্রিমিটিভ ভ্যালু। 
+ +

 

+ +

এই গুটিকয়েক টাইপের ভ্যালু অথবা ডেটা টাইপ ব্যবহার করেই আসলে যেকোন কাজের কোড লিখে ফেলা সম্ভব। Integer আর ভগ্নাংশ  (floating value) রাখার জন্য পৃথক ডেটা-টাইপ নাই। একইভাবে, তারিখ রাখার জন্যে কোন আলাদা ডেটা-টাইপ নাই, অবশ্য আপনি চাইলে Date অবজেক্ট আর এর বিভিন্ন কাজের মেথড ব্যবহার করতে পারেন।

+ +

Objects আর functions হচ্ছে ভাষাটির অন্যতম গুরুত্বপূর্ণ উপাদান। ফাংশন অন্যান্য প্রোগ্রামিং ভাষার মতই - কোন একটি বিশেষ কাজ করার জন্য লেখা হয় ফাংশন। আর অবজেক্টে থাকে নাম-ভ্যালু যুগল! (key-value pairs) - নাম ব্যবহার করে ভ্যালুতে কি রাখা আছে জানতে পারবেন।

+ +

ডেটা-টাইপের রূপান্তর/কনভার্সন

+ +

জাভাস্ক্রিপ্ট ডায়নামিক-টাইপ (dynamically typed) ভাষা, মানে কোন ভ্যারিয়েবলের টাইপ কি সেটা বলে দিতে হয়না, জাভাস্ক্রিপ্ট নিজেই রান-টাইমে বের করবে। এই টাইপ পরিবর্তন ও করা যায় রান-টাইমে। স্ক্রিপ্ট চলার সময় প্রয়োজনমত ভ্যারিয়েবলের টাইপ ও কনভার্ট করে নেওয়া হয়। ধরে নেই, আপনি নিচের মত করে ভ্যারিয়েবল ডিক্লেয়ার করেছেনঃ

+ +
+
var answer = 42;
+
+
+ +

পরে কোন এক সময় আপনি একই ভ্যারিয়েবলে স্ট্রিং মান বসালেনঃ

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

জাভাস্ক্রিপ্ট ডায়নামিক-টাইপ বলেই এই লাইনে কোন ভুল হয়নি। কোডের ভাষা জাভা/সি হলে এই লাইনেই ভুল হত।

+ +

যদি কোন এক্সপ্রেশনে সংখ্যা আর স্ট্রিং মান এর মাঝে '+' ওপারেটের ব্যবহার করেন, তাহলে সংখ্যা-ভ্যালু গুলো স্ট্রিং এ কনভার্ট হয়ে যাবে। যেমনঃ

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

তবে '+' ব্যাতীত অন্য অপারেটরের ক্ষেত্রে কিন্তু সংখ্যাকে স্ট্রিং এ কনভার্ট করা হয় না! যেমনঃ

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

আসলে জাভাস্ক্রিপ্টে '+' সাইন দিয়ে যেমন নিউমেরিক সংখ্যার যোগ এর কাজ করা হয়। ঠিক তেমনি স্ট্রিং এর ক্ষেত্রে দুইটা স্ট্রিং কে জোড়া দেয়ার কাজ করে থাকে। যাকে ইংরেজিতে concatenation বলা হয়। এই কাজটা concat() নামক ফাংশন ব্যবহার করেও করা হয়ে থাকে।

+ +

স্ট্রিং থেকে সংখ্যা

+ +

স্ট্রিং কে সংখ্যায় কনভার্ট করতে পারবেন নিচের মেথডগুলো ব্যবহার করেঃ

+ +

parseInt() আর parseFloat()

+ +

দেখুনঃ parseInt() আর parseFloat() পাতায়।

+ +

parseInt শুধুমাত্র integer রিটার্ন করে, তাই দশমিক সংখ্যা নিয়ে কাজকারবারেই এর ব্যবহার সীমিত। এছাড়া, একটি ভাল অভ্যাস হল এই ফাংশনে ২য় প্যারামিটারে কনভার্সনের ভিত্তি (base) পাঠিয়ে দেওয়া।

+ +

'+' অপারেটর

+ +

স্ট্রিং কে সংখ্যায় কনভার্ট করার আরেকটা বুদ্ধি হল '+' অপারেটর ব্যবহার করাঃ

+ +
"1.1" + "1.1" = "1.11.1"
+(+"1.1") + (+"1.1") = 2.2   // শুধুমাত্র বোঝার সুবিধার জন্যে বন্ধনী ব্যবহার করা হয়েছে।
+ +

ভ্যারিয়েবল

+ +

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

+ +

জাভাস্ক্রিপ্টে identifiers অবশ্যই কোন বর্ণ (letter), আন্ডারস্কোর (_) অথবা ডলার চিহ্ন ($) দিয়ে শুরু করতে হবে; পরবর্তী অক্ষরে সংখ্যা (0-9) ব্যবহার করা যাবে। জাভাস্ক্রিপ্টে হরফের case (ইংরেজীতে বড় হাতের বা ছোট হাতের হরফ) গুরুত্বপূর্ণ - ইংরেজী "A" থেকে শুরু করে "Z" পর্যন্ত বর্ণগুলো বড় হাতের, আর "a" থেকে শুরু করে "z" পর্যন্ত বর্ণগুলো ছোট হাতের।

+ +

জাভাস্ক্রিপ্ট ১.৫ বা এর ওপরের ভার্সনগুলোতে আপনি ISO 8859-1 বা ইউনিকোড অক্ষর যেমন অ/আ/ক/খ ব্যবহার করতে পারবেনঃ

+ +
var ফল = "কলা";
+alert(ফল);
+ +

ভ্যারিয়েবলের নাম হিসেবে বাংলা অক্ষর ব্যবহার করছি! এছাড়াও \uXXXX {{anch("Unicode escape sequences")}} ক্যারেকটার হিসেবে আইডেন্টিফায়ারে ব্যবহার করা যাবে।

+ +

বৈধ ভ্যারিয়েবলের নামের কিছু উদাহরণঃ Number_hits, temp99, এবং _name।

+ +

ভ্যারিয়েবল তৈরি করা

+ +

দু'টি উপায়ে ভ্যারিয়েবল তৈরি (declare) করা যায়ঃ

+ +
    +
  • var কী-ওয়ার্ড ব্যবহার করে। যেমনঃ var x = 42। লোকাল আর গ্লোবাল দুই ধরণের ভ্যারিয়েবল-ই এই কীওয়ার্ড দিয়ে তৈরি করা যায়।
    • +
  • সরাসরি ভ্যালু এসাইন করে দিয়ে। যেমনঃ x = 42। এটি করলে global ভ্যারিয়েবল তৈরি হবে আর strict লেভেলের ওয়ার্নিং তৈরি হবে। তাই এই পদ্ধতি ব্যবহার করা অনুচিত।
    • +
+ +

ভ্যারিয়েবলের মান কী?

+ +

var স্টেটমেন্ট ব্যবহার করে কোন ভ্যালু দিয়ে ইনিশিয়ালাইজ না করলে তার মান হিসেবে থাকবে undefined।

+ +

তৈরি করা হয়নি (undeclared) এমন কোন ভ্যারিয়েবল নিয়ে কাজ করতে গেলে ReferenceError এক্সেপশন পাবেনঃ

+ +
var a;
+console.log("The value of a is " + a); // logs "The value of a is undefined"
+console.log("The value of b is " + b); // throws ReferenceError exception
+
+ +

কোন ভ্যারিয়েবলে ভ্যালু দেওয়া হয়েছে কিনা জানতে তাই undefined ব্যবহার করুন। নিচের কোডে input ভ্যারিয়েবলে কোন ভ্যালু দেই নি, তাই if স্টেটমেন্টে true পাওয়া যাচ্ছেঃ

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

The following is related to "Variables" section as potential values in assignment.

+ +

বুলিয়ান কন্টেক্সট এ ব্যবহার করলে অবশ্য undefined, false হিসেবে আচরণ করে। যেমনঃ নিচের কোডে myFunction ফাংশনটি একজিকিউট হবে কারণ myArray এলিমেন্ট টি তৈরি করা হয় নি।

+ +
var myArray = new Array();
+if (!myArray[0]) myFunction();
+
+ +

তবে numeric কন্টেক্সটে ব্যবহৃত হলে undefined কনভার্ট হবে NaN এঃ

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

যখন কোন নাল ভ্যারিয়েবল ব্যবহারের চেষ্টা করেন, তখন বুলিয়ান কন্টেক্সটে false আর numeric কন্টেক্সটে 0 হিসেবে এর মান নির্ণিত হয়ঃ

+ +
var n = null;
+console.log(n * 32); // logs 0
+
+ +

ভ্যারিয়েবলের স্থায়িত্ব/স্কোপ (scope)

+ +

যখন একটা ভ্যারিয়েবল কে কোন ফাংশনের বাইরে তৈরি করেন তখন তাকে global ভ্যারিয়েবল বলি, কারণ ডকুমেন্টের যেকোন জায়গায় ঐ ভ্যারিয়েবল টা ব্যবহার করা যাবে। অপরদিকে, কোন ফাংশনের ভিতর যদি ভ্যারিয়েবলটি তৈরি করেন, তাহলে সেটি local ভ্যারিয়েবল, কারণ ঐ ফাংশনের বাইরে ঐ ভ্যারিয়েবলের কোন অস্তিত্ব নাই।

+ +

জাভাস্ক্রিপ্টে ব্লক স্টেটেমেন্টের আলাদা কোন স্কোপ নেই; বরং একটা ফাংশনে যতগুলো ব্লক-ই থাকুক না কেন সবগুলো একই স্কোপে - ঐ ফাংশনের স্কোপে থাকে। যেমন নিচের কোড 5 লগ করবে (জাভাস্ক্রিপ্ট কনসোলে 5 লিখবে) কারণ x ভ্যারিয়েবলের স্কোপ if ব্লকের বাইরেও আছে।

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

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

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

২ নাম্বার উদাহরণ টি খুব সাবধানে দেখুন! ২ নম্বর উদাহরণটি এভাবে কাজ করবেঃ

+ +
var myvar = "my value";
+
+(function() {
+  var myvar;
+  console.log(myvar); // undefined
+  myvar = "local value";
+})();
+ +

যেমনটা বলেছিলাম, সব var স্টেটমেন্টগুলো যেন ফাংশনের শুরুতেই তৈরি করা হয়েছে। এভাবে কোড করলে ভুল হওয়ার সম্ভাবনা কমে যায় আর সহজেই বুঝতে পারা যায় কী হচ্ছে!

+ +

গ্লোবাল ভ্যারিয়েবল

+ +

গ্লোবাল ভ্যারিয়েবল হচ্ছে আসলে একটা global object এর প্রোপার্টি! ওয়েবপেইজে গ্লোবাল অবজেক্ট টা হচ্ছে window, তাই আপনি window.variable সিন্ট্যাক্স ব্যবহার করেও গ্লোবাল ভ্যারিয়েবল এক্সেস করতে পারবেন।

+ +

need links to pages discussing scope chains and the global objectফলস্বরূপ, ব্রাউজারের এক উইন্ডো তে তৈরি করা  গ্লোবাল ভ্যারিয়েবল কে ব্রাউজারের অন্য উইন্ডোতে বা ফ্রেম থেকে এক্সেস করা যাবে উইন্ডো বা ফ্রেমটির name ব্যবহার করে। যেমন, কোন একটা FRAMESET ডকুমেন্টে তৈরি করা phoneNumber ভ্যারিয়েবলকে এর কোন বাচ্চা ফ্রেম (child frame) থেকে parent.phoneNumber ব্যবহার করে এক্সেস করতে পারবেন।

+ +

কন্সট্যান্ট

+ +

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

+ +
const prefix = '212';
+
+ +

শুরুতেই মান নির্ধারণ করে দেওয়ার পর কন্সট্যান্ট এর মান পরিবর্তন করা যায় না বা নতুন করে একই নামে কন্সট্যান্ট তৈরি করা যায় না।

+ +

কন্সট্যান্ট এর স্কোপ ভ্যারিয়েবলের মতই। তবে const কী-ওয়ার্ড টা অবশ্যই লিখতে হবে, না হলে জাভাস্ক্রিপ্ট কীভাবে ধরবে আপনি ভ্যারিয়েবল নাকি কন্সট্যান্ট কোনটা তৈরি করতে চাচ্ছেন! কীওয়ার্ড টা ব্যবহার না করলে তাই একে ভ্যারিয়েবল হিসেবেই গণ্য করা হবে।

+ +

একই স্কোপের ভেতর কোণ ফাংশন অথবা ভ্যারিয়েবলের নামে কন্সট্যান্ট তৈরি করা যায় না। যেমনঃ

+ +
// নিচের কোডে ভুল আছে
+function f() {};
+const f = 5;
+
+// নিচেরটাও ভুল!
+function f() {
+  const g = 5;
+  var g;
+
+  //statements
+}
+
+ +

লিট্যারেল

+ +

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

+ +
    +
  • {{anch("Array লিটারেল")}}
    • +
  • {{anch("বুলিয়ান লিটারেল")}}
    • +
  • {{anch("ভগ্নাংশের লিটারেল")}}
    • +
  • {{anch("Integers")}}
    • +
  • {{anch("Object literals")}}
    • +
  • {{anch("String literals")}}
    • +
+ +

Array লিটারেল

+ +

Array লিটারেল হচ্ছে শূণ্য বা এর থেকে বেশি সংখ্যক "এক্সপ্রেশনের" একটা লিস্ট - এই সব এক্সপ্রেশনের প্রত্যেকেই হচ্ছে array টির একেকটি সদস্য - এই লিস্টের সামনে আর পরে তৃতীয় বন্ধনী ([]) ব্যবহার করতে হবে। যখন আপনি array লিটারেল ব্যবহার করে array তৈরি করবেন, তখন এই লিস্টের ভ্যালুগুলোকে array টির সদস্য হিসেবে বিবেচনা করে arrayটি ইনিশিয়ালাইজ করা হয়। আর যতগুলো সদস্য দিলাম, array এর length তত।

+ +

নিচের উদাহরণে ৩ সদস্য বিশিষ্ট তদন্ত কমিটি থুক্কু coffees নামের array তৈরি করা হয়েছে - array টির length ও তাই তিনঃ

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

খেয়াল করুনঃ array লিটারেল হচ্ছে বিশেষ ধরণের অবজেক্ট ইনিশিয়ালাইজার। দেখুন কিভাবে অবজেক্ট ইনিশিয়ালাইজার ব্যবহার করা যায়।

+ +

যদি টপ-লেভেল কোডে (মানে ফাংশনের বাইরের কোডে) array তৈরি করা হয়, যেই এক্সপ্রেশনে array লিটারেলটি আছে - সেই এক্সপ্রেশনটি যতবার execute করা হবে ততবার-ই array টি ইন্টারপ্রেট (নতুন করে তৈরি) করা হবে। এছাড়া কোন ফাংশনের ভেতর array লিটারেল ব্যবহার করলে যতবার ফাংশনটি কল করবেন ততবার লিটারেলটি তৈরি করা হবে।

+ +

Array লিটারেল Array অবজেক্ট-ও বটে। পড়ুন বিস্তারিত।

+ +

Array লিটারেলে বাড়তি কমা'র ব্যবহার

+ +

Array লিটারেলে যে সব সদস্য দিতেই হবে এমন কথা নাই - যদি কোন row তে পরপর দুইটা কমা ব্যবহার করেন তাহলে কমা দুটোর মাঝের সদস্যটি undefined হিসেবে থাকে। নিচের উদাহরণে fish array তৈরি করা হয়েছে এভাবেঃ

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

এই array তে দুটো সদস্যের মান আছে আর একটির ভ্যালু নাই। (fish[0] হচ্ছে "Lion", fish[1] হচ্ছে undefined, আর fish[2] হচ্ছে "Angel")।

+ +

সদস্যের লিস্টের শেষে যদি কমা দিয়ে রাখেন সেটি অগ্রাহ্য করা হবে। নিচের উদাহরণে array এর length তিন। myList[3] বলে কোন সদস্য নেই। শেষের এই অতরিক্ত কমা ছাড়া বাকি সব কমা-ই নতুন সদস্য নির্দেশ করে। (খেয়াল করুনঃ পুরোনো ব্রাউজারে শেষের অতিরিক্ত কমা ত্রুটি তৈরি করতে পারে তাই লিস্টের শেষে বাড়তি কমা না দেওয়াই ভাল।)

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

নিচের উদাহরণে array এর length চার।  myList[0] আর myList[2] অসংজ্ঞায়িত।

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

নিচের উদাহরণে array এর length চার।  myList[1] আর myList[3] অসংজ্ঞায়িত। শুধুমাত্র শেষের কমা অগ্রাহ্য করা হয়েছেঃ

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

অতিরিক্ত কমা'র ব্যবহারে ফলাফল কী আসে সেটা ঠিকমত বুঝতে পারাটা গুরুত্বপূর্ণ। নিজে কোড লেখার সময় array'র যে সদস্যগুলোর মান দিতে চান না, সরাসরি undefined মান বসিয়ে দিলে আপনার কোড সহজেই বুঝা যাবে আর ভবিষ্যতে কাজ করাও সহজ হবে।

+ +

বুলিয়ান লিটারেল

+ +

বুলিয়ান টাইপের দু'ধরণের লিটারেল আছেঃ true আর false।

+ +

প্রিমিটিভ (যেগুলো অবজেক্ট না) true আর false বুলিয়ান ভ্যালু কে Boolean অবজেক্টের true আর false ভ্যালুর সাথে গুলিয়ে ফেলবেন না - এটি প্রিমিটিভ ভ্যালুগুলোর wrapper হিসেবেই কাজ করে। আরো তথ্যের জন্য বুলিয়ান অবজেক্ট নিয়ে পড়ুন।

+ +

Integers

+ +

Integers (পূর্ণ সংখ্যা) কে ১০ (দশমিক), ১৬ (হেক্সাডেসিমাল) বা ৮(অক্টাল) এর ভিত্তিতে (base) প্রকাশ করা যায়।

+ +
    +
  • দশমিক পূর্ণ সংখ্যার লিটারেল হচ্ছে এক বা একাধিক সংখ্যার ক্রম যার শুরুতে শূণ্য থাকতে পারবে না।
    • +
  • শুরুতে শূণ্য সহ এক বা একাধিক সংখ্যার ক্রম ব্যবহার করলে সেটি অক্টাল বলে গণ্য হয়। অক্টাল ভিত্তিতে শুধুমাত্র ০-৭ এই কয়টি ডিজিট ব্যবহার করা যায়।
    • +
  • শুরুতে 0x (অথবা 0X) সহ এক বা একাধিক সংখ্যার ক্রম ব্যবহার করলে সেটি হেক্সাডেসিমাল বলে গণ্য হয়। এই ভিত্তিতে 0-9 এই কয়টি ডিজিট ছাড়াও a-f বা A - F এই অক্ষরগুলো ব্যবহার করা যায়।
    • +
+ +

অক্টাল লিটেরেল ব্যবহার নিরুতসাহিত আর ECMA-262 ৩য় সংস্করণে বাদ দিয়ে দেওয়া হয়েছে। অবশ্য পুরনো কোড যাতে চলতে পারে সেহেতু জাভাস্ক্রিপ্ট ১.৫ এ এখনো অক্টাল সমর্থন করে।

+ +

Integer লিটেরেলের কিছু ব্যবহারঃ

+ +
0, 117 and -345 (দশমিক, base 10)
+015, 0001 and -077 (অক্টাল, base 8)
+0x1123, 0x00111 and -0xF1A7 (হেক্সাডেসিমাল, "hex" or base 16)
+
+ +

ভগ্নাংশের লিটারেল

+ +

ভগ্নাংশে নিচের বিষয়গুলো থাকেঃ

+ +
    +
  • চিহ্ন (sign) সহ/ছাড়া দশমিক ভিত্তির পূর্ণ সংখ্যা (শুরুতে ''+'' অথবা ''- '' চিহ্ন থাকতে পারে)
    • +
  • একটা দশমিক ফোটা ("."),
    • +
  • দশমিক ফোটার পরের অংশ (যেটা কিনা ১০-ভিত্তির পূর্ণ সংখ্যা),
    • +
  • এক্সপোনেন্ট (exponent)
    • +
+ +

Exponent অংশ "e" অথবা "E" দিয়ে শুরু হয় আর এর পর থাকে ১০-ভিত্তির পূর্ণসংখ্যা, যেটার শুরুতে আবার + অথবা - চিহ্ন থাকতে পারে নাও পারে। একটা ভগ্নাংশ লিটেরেলে কমপক্ষে একটি ডিজিট (সংখ্যা) এবং হয় দশমিক ফোটা অথবা "e" (অথবা "E") থাকতে হবে।

+ +

ভগ্নাংশ লিটেরেলের কিছু উদাহরণ হলঃ 3.1415, -3.1E12, .1e12, আর 2E-12।

+ +

পরিষ্কার করে বলতে গেলে, সিন্ট্যাক্স হচ্ছেঃ

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

যেমনঃ

+ +
3.14
+2345.789
+.3333333333333333333
+
+ +

অবজেক্ট লিটেরেল

+ +

দ্বিতীয় বন্ধনীর ({}) ভেতর শূণ্য/এক/একাধিক নাম-ভ্যালু যুগল (name-value pairs) লিখে অবজেক্ট লিটেরেল তৈরি করা যায়। তবে কোন স্টেটমেন্টের শুরুতেই অবজেক্ট লিটেরেল ব্যবহার করা যায় না। এমনটা করলে ত্রুটি তৈরি হবে অথবা আপনি যেমনটা আশা করছিলেন সেরকম ফল পাবেন না - কারণ শুরুতেই { দেখে জাভাস্ক্রিপ্ট মনে করতে পারে আপনি ব্লক শুরু করছেন।

+ +

নিচের উদাহরণে অবজেক্ট লিটেরেল দেখানো হয়েছে। car অবজেক্টের প্রথম সদস্য myCar নামের একটি প্রোপার্টি; দ্বিতীয় সদস্য getCar একটি ফাংশন (CarTypes("Honda")); ইনভোক করে, আর তৃতীয় সদস্য special ইতোমধ্যে তৈরি করা একটা ভ্যারিয়েবল ব্যবহার করে (Sales)।

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

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

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

দয়া করে খেয়াল করুনঃ

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

স্ট্রিং লিটেরেল

+ +

স্ট্রিং লিটেরেল তৈরি হয় শূণ্য বা এর থেকে বেশি ক্যারেকটার ডবল-কোটেশন (") বা উদ্ধৃতি চিহ্ন বা single quotation (') চিহ্ন এর মধ্যে রাখলে। তবে double বা single যেই উদ্ধৃতি চিহ্ন-ই ব্যবহার করুন না কেন স্ট্রিং লিটেরেলের শুরুতে আর শেষে একই প্রকারের চিহ্ন ব্যবহার করতে হবে। নিচে কিছু স্ট্রিং লিটেরেলের উদাহরণ দেখুনঃ

+ +
    +
  • "foo"
    • +
  • 'bar'
    • +
  • "1234"
    • +
  • "one line \n another line"
    • +
  • "John's cat"
    • +
+ +

স্ট্রিং লিটেরেলে আপনি স্ট্রিং অবজেক্টের যেকোন ফাংশন কল করতে পারবেন - জাভাস্ক্রিপ্ট স্বয়ংক্রিয়ভাবে স্ট্রিং লিটেরেল কে অস্থায়ী অবজেক্টে কনভার্ট করে, এরপর মেথডটি কল করে, তারপর অস্থায়ী অবজেক্টটি ফেলে দেয়। আপনি String.length প্রোপার্টি ব্যবহার করতে পারেন স্ট্রিং লিটেরেলের ওপরঃ

+ +
"John's cat".length
+
+ +

স্ট্রিং অবজেক্ট ব্যবহারেরে বিশেষ কোন কারণ না থাকলে আপনার উচিত হবে স্ট্রিং লিটেরেল-ই ব্যবহার করা। বিস্তারিত দেখুনঃ String Object ।

+ +

স্ট্রিং এ বিশেষ অক্ষর ব্যবহার

+ +

গতানুগতিক অক্ষরের পাশাপাশি বিশেহ অক্ষ্র ও স্ট্রিং এ ব্যবহার করতে পারবেন, যেমনটা দেখানো হয়েছে উদাহরণেঃ

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

নিচের টেবিলে জাভাস্ক্রিপ্টের বিশেষ অক্ষরগুলো যেগুলো স্ট্রিং এ ব্যবহার করতে পারবেন সেগুলো দেখানো হয়েছেঃ

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
টেবিল ২.১ জাভাস্ক্রিপ্টের বিশেষ অক্ষর
অক্ষরঅর্থ
\bBackspace
\fForm feed
\nনতুন লাইন
\rCarriage return
\tTab
\vVertical tab
\'ঊর্ধকমা or single quote
\"Double quote
\\Backslash character (\).
\XXXLatin-1 এনকোডিং সহ অক্ষরটি 0 এবং 377 এর মধ্যে তিনটি অক্টাল সংখ্যা দ্বারা XXX নির্দিষ্ট করা হয়েছে। উদাহরণস্বরূপ, \251 হল কপিরাইট প্রতীকের অকটাল ক্রম।
\xXXLatin-1 এনকোডিং সহ অক্ষরটি 00 এবং FF এর মধ্যকার সংখ্যাগুলি দ্বারা XXX নির্দিষ্ট করা হয়েছে। উদাহরণস্বরূপ, \xA9 হল কপিরাইট প্রতীকের হেক্সাডেসিমেল ক্রম।
\uXXXXইউনিকোড অক্ষর চারটি হেক্সাডেসিমেল সংখ্যা দ্বারা XXXX নির্দিষ্ট করা হয়। উদাহরণস্বরূপ, \u00A9 হল কপিরাইট প্রতীকের ইউনিকোড ক্রম। {{anch("Unicode escape sequences")}} এ দেখুন.
+ +

অক্ষর এস্কেপ (escape) করা

+ +

যেই অক্ষরগুলো টেবিল ২.১ এ দেখানো হয়নি সেগুলোর সামনের ব্যাক-স্ল্যাশ অগ্রাহ্য করা হয়। কিন্তু এই ব্যবহার নিরুতসাহিত করা হয় এবং করাও উচিত নয়।

+ +

স্ট্রিং এর মধ্যে উদ্ধৃতি চিহ্ন দিতে পারেন এটির সামনে ব্যাক-স্ল্যাশ ব্যবহার করে। এটি-ই এসকেপ করা (উদ্ধৃতি চিহ্ন কে) হিসেবে পরিচিত। যেমনঃ

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

এর ফলাফল হবে এমনঃ

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

অবশ্য স্ট্রিং এ ব্যাক-স্ল্যাশ ব্যবহার করতে একেও এসকেপ করতে হবে! যেমন, স্ট্রিং এ c:\temp মান ব্যবহার করতে চাইলেঃ

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

লাইন-বিরতি এসকেপ করতে পারেন সেগুলোর আগে ব্যাক-স্ল্যাশ ব্যবহার করে। ব্যাক-স্ল্যাশ আর লাইন-বিরতি (কীবোর্ডের এন্টার চেপে লাইন বিরতি দেওয়া যায়) দুটোই স্ট্রিং এর মান থেকে সরিয়ে নেওয়া হবেঃ

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

যদিও জাভাস্ক্রিপ্টে "heredoc" সিন্ট্যাক্স  নেই, আপনি কাছাকাছি কিছু একটা পেতে পারেন লাইন-বিরতি এসকেপ ব্যবহার করে আর এসকেপ করা লাইনব্রেক প্রতি লাইনের শেষে দিয়েঃ

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

ইউনিকোড

+ +

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

+ +

সব এনকোডিং এর জন্যে-ই ইউনিকোড বর্ণমালা ব্যবহার করা যায়। ASCII (American Standard Code for Information Interchange) বর্ণমালার ওপর ভিত্তি করে ইউনিকোড মডেল করা হয়েছে। প্রত্যেকটি হরফের জন্য এটি একটি সংখ্যা আর নাম ব্যবহার করে। এই সংখ্যাটি'র বিট রিপ্রেজেন্টেশন ও ক্যারেক্টার এনকোডিং এ বলা থাকে। ১৬-বিটের সংখ্যাটি হেক্সাডেসিমালে প্রকাশ করা হয়, আর এর সামনে থাকে U অক্ষরটি। যেমন, U+0041 দিয়ে A বুঝানো হয়। আর এই অক্ষরটির অনন্য নাম হল LATIN CAPITAL LETTER A।

+ +

জাভাস্ক্রিপ্টের ১.৩ এর আগের ভার্সনে ইউনিকোড সাপোর্ট নেই।

+ +

ASCII এবং ISO এর সাথে ইউনিকোড কম্প্যাটিবিলিটি

+ +

ইউনিকোড আন্তর্জাতিক স্ট্যান্ডার্ড ISO/IEC 10646-1; 1993 দ্বারা সম্পূর্ণভাবে সমর্থিত, যেটা কিনা ISO 10646 এর অংশ।

+ +

বেশকিছু ইউনিকোড স্ট্যান্ডার্ড (UTF-8, UTF-16 এবং ISO UCS-2 সহ) ব্যবহার করা হয় ইউনিকোড কে বিট হিসেবে দেখানোর জন্য। (মানে ব্যবহারিক প্রয়োগের জন্য!)

+ +

ইউনিকোডের UTF-8 এনকোডিং ASCII বর্ণমালার সাথে সমর্থিত আর অনেক প্রোগ্রামেই একে ব্যবহার করা হয়। প্রথম ১২৮ টি ইউনিকোড অক্ষর দিয়ে ASCII অক্ষরগুলোকে প্রকাশ করা হয়, আর এগুলোর বাইট-মান ও একই (ASCII তে যেই মান ছিল) রাখা হয়েছে। U+0020 থেকে শুরু করে U+007E পর্যন্ত ইউনিকোড অক্ষরগুলো 0x20 থেকে  0x7E পর্যন্ত ASCII অক্ষরগুলোকে নির্দেশ করে। ASCII এর সাথে পার্থক্য হল ASCII ল্যাটিন বর্ণমালা সমর্থন করে (আর ৭ বিটের ক্যারেক্টার সেট দিয়ে তৈরি), যেখানে UTF-8 ১ থেকে ৪ টি অক্টেট ("অক্টেট" মানে হল ৮ বিট, বা ১ বাইট) দিয়ে প্রতিটি অক্ষর নির্দেশ করে। তাই, কয়েক মিলিয়ন অক্ষর UTF-8 দিয়ে দেখানো সম্ভব। আরো একটি বিকল্প এনকোডিং স্ট্যান্ডার্ড হল UTF-16 যেখানে প্রতিটি অক্ষর এর জন্য ২টি করে অক্টেট ব্যবহার করা হয়। এসকেপ সিকোয়েন্স ব্যবহার করে UTF-16 দিয়ে ইউনিকোড রেঞ্জে যত অক্ষর আছে সবগুলো দেখানো যায়, ৪টি অক্টেট ব্যবহার করে। ISO UCS-2 (Universal Character Set) দু'টি অক্টেট ব্যবহার করে।

+ +

UTF-8/ইউনিকোডের জন্য জাভাস্ক্রিপ্ট আর নেভিগেটরের সাপোর্ট থাকার ফলাফল স্বরূপ আপনি ল্যাটিন নয়-এমন, আন্তর্জাতিক আর এলাকাভিত্তিক, আপনার নিজের ভাষার বর্ণমালা ব্যবহার করতে পারছেন, আরো পারছেন বিশেষ সব টেকনিকাল হরফ ব্যবহার করতে। বহুভাষায় ভাব প্রকাশ সমর্থন করার জন্য ইউনিকোড একটি স্ট্যান্ডার্ড পদ্ধতি। যেহেতু ইউনিকোডের UTF-8 এনকোডিং ASCII সমর্থন করে, প্রোগ্রামগুলো ASCII বর্ণমালাও ব্যবহার করতে পারে ইউনিকোডের পাশাপাশি, আর ASCII নয় এমন বর্ণমালা (যেমন, বাংলা!) ও ব্যবহার করতে পারেন জাভাস্ক্রিপ্টের কমেন্টে, স্ট্রিং লিটেরেলে, ভ্যারিয়েবলের আইডেন্টিফায়ারে, রেগুলার এক্সপ্রেশনে।

+ +

ইউনিকোড এসকেপ সিকোয়েন্স

+ +

আপনি স্ট্রিং লিটেরেল, রেগুলার এক্সপ্রেশন আর ভ্যারিয়েবলের আইডেন্টিফায়ারে ইউনিকোড এসকেপ সিকোয়েন্স ব্যবহার করতে পারেন। এসকেপ সিকোয়েন্সে ৬টি ASCII অক্ষর থাকেঃ \u আর ৪-ডিজিটের হেক্সাডেসিমেল সংখ্যা। যেমনঃ \u00A9 দিয়ে কপিরাইট চিহ্নটিকে প্রকাশ করা হয়। আর বুঝতেই পারছেন, প্রতিটি এসকেপ সিকোয়েন্স দিয়ে ১টি মাত্র অক্ষর প্রকাশ করা হয়।

+ +

নিচের কোডে দেখিয়েছি কিভাবে কপিরাইট চিহ্ন আর "Netscape Communications" স্ট্রিংটি তৈরি করা হয়েছেঃ

+ +
var x = "\u00A9 Netscape Communications";
+ +

নিচের সারণিতে প্রায়-ই ব্যবহার করা হয় এমন কিছু বিশেষ অক্ষর আর তাদের ইউনিকোড ভ্যালু দেওয়া হলঃ

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
সারণী ২.২ বিশেষ অক্ষরের ইউনিকোড মান
প্রকৃতিইউনিকোড মাননামফর্ম্যাট
White space values\u0009Tab<TAB>
\u000BVertical Tab<VT>
\u000CForm Feed<FF>
\u0020Space<SP>
Line terminator values\u000ALine Feed<LF>
\u000DCarriage Return<CR>
Additional Unicode escape sequence values\u0008Backspace<BS>
\u0009Horizontal Tab<HT>
\u0022Double Quote"
\u0027Single Quote'
\u005CBackslash\
+ +

জাভাস্ক্রিপ্টে ব্যবহৃত এসকেপ সিকোয়েন্স আর জাভাতে এর ব্যবহারের মাঝে পার্থক্য আছে। জাভাস্ক্রিপ্টে কখনোই এস্কেপ সিকোয়েন্স কে বিশেষ কোন অক্ষর হিসেবে ধরা হয় না প্রথমে। যেমন, কোন স্ট্রিং এর ভেতর লাইন-শেষ-করার-জন্য কোন এসকেপ সিকোয়েন্স ব্যবহার করলে সেটি লাইন বিরতি দেয় না, যতক্ষণ না ফাংশন একে ব্যবহার করছে। জাভাস্ক্রিপ্ট কমেন্টে ব্যবহার করা যেকোন এসকেপ সিকোয়েন্স উপেক্ষা করে। যদি কোন এসকেপ সিকোয়েন্স এক-লাইনের কমেন্টে ব্যবহার করা হয়, জাভা একে ইউনিকোড অক্ষর হিসেবে নেয়। স্ট্রিং লিটেরেলের ক্ষেত্রে জাভা কম্পাইলার প্রথমেই এসকেপ সিকোয়েন্সকে ইন্টারপ্রেট করে। যেমন, লাইন-বিরতি এস্কেপ অক্ষর (যেমন \u000A) যদি জাভায় ব্যবহার করেন, স্ট্রিং লিটেরেল টি ঐখানেই শেষ হয়ে যাবে। ফলস্বরূপ ত্রুটি তৈরি হবে কারণ জাভার স্ট্রিং লিটেরেলে লাইন-বিরতি চিহ্ন ব্যবহার করা যায় না। লাইন ফিড দেওয়ার জন্য জাভাতে আপনাকে \n ব্যবহার করতে হবে। জাভাস্ক্রিপ্টে এই \n এর কাজ এসকেপ সিকোয়েন্স দিয়েই করতে পারবেন।

+ +

জাভাস্ক্রিপ্ট ফাইলে ইউনিকোড অক্ষর

+ +

Gecko এর পুরোনো ভার্সন ধরে নিত XUL যেই জাভাস্ক্রিপ্ট ফাইল লোড করে, সেগুলো ল্যাটিন-১ ক্যারেক্টার এনকোডিং এ আছে।  Gecko ১.৮ আর পরের ভার্সনগুলোতে ফাইলটা যেই এনকোডিং এ থাকবে, সেই এনকোডিং ই ব্যবহার করা হয়। XUL জাভাস্ক্রিপ্টে আন্তর্জাতিক অক্ষর দেখুন আরো তথ্যের জন্য।

+ +

ইউনিকোড ব্যবহার করে অক্ষর দেখানো

+ +

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

+ +

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

+ +

ইউনিকোড নিয়ে আরো তথ্যের জন্য দেখুন Unicode হোমপেইজ আর ইউনিকোড স্ট্যান্ডার্ড, ২.০ সংস্করণ, প্রকাশকঃ Addison-Wesley, 1996।

+ +

তথ্যাদি

+ + diff --git a/files/bn/web/javascript/guide/index.html b/files/bn/web/javascript/guide/index.html new file mode 100644 index 0000000000..856da74c7a --- /dev/null +++ b/files/bn/web/javascript/guide/index.html @@ -0,0 +1,123 @@ +--- +title: জাভাস্ক্রিপ্ট গাইড +slug: Web/JavaScript/Guide +tags: + - JavaScript + - গাইড + - চ্যাপ্টার + - জাভাস্ক্রিপ্ট + - ভুমিকা +translation_of: Web/JavaScript/Guide +--- +
{{jsSidebar("জাভাস্ক্রিপ্ট গাইড")}}
+ +

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

+ + + + + + + + + +

{{Next("Web/JavaScript/Guide/Introduction")}}

diff --git a/files/bn/web/javascript/index.html b/files/bn/web/javascript/index.html new file mode 100644 index 0000000000..11f2a43a50 --- /dev/null +++ b/files/bn/web/javascript/index.html @@ -0,0 +1,130 @@ +--- +title: জাভাস্ক্রিপ্ট +slug: Web/JavaScript +tags: + - জাভা স্ক্রিপ্ট + - জাভাস্ক্রিপ্ট +translation_of: Web/JavaScript +--- +
{{JsSidebar}}
+ +

JavaScript (সংক্ষেপে JS) একটি lightweight ইন্টারপ্রেটেড বা যথাসময়ে কম্পাইল করা প্রোগ্রামিং ভাষা যাতে রয়েছে {{Glossary("First-class Function", "first-class functions")}}। যদিও এটি ওয়েব পেজের স্ক্রিপ্টিং ভাষা হিসেবে বেশি পরিচিত, এছাড়া ব্রাউজার ছাড়াও অন্যান্য জায়গায় ব্যবহার করা হয়, যেমন node.js and Apache CouchDB. JavaScript হল {{Glossary("Prototype-based programming", "prototype-based")}}, multi-paradigm, dynamic scripting language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. JavaScript সম্পর্কে আরো পড়ুন.

+ +

সাইটের এই সেকশনটি JavaScript ভাষার জন্য নিবেদিত, এবং ওয়েব পেইজ অথবা হোস্ট এনভাইরনমেন্টের সাথে সম্পৃক্ত নয়। {{Glossary("API","APIs")}} সম্পর্কে জানতে Web APIs এবং DOM দেখুন।

+ +

JavaScript  স্ট্যান্ডার্ড এর নাম ECMAScript। ২০১২ সাল পর্যন্ত পাওয়া তথ্য অনুযায়ী সব নতুন ব্রাউজার ECMAScript 5.1 সমর্থন করে। পুরোনো ব্রাউজারগুলো অন্তত ECMAScript 3 সমর্থন করে। ২০১৫ সালের ১৭ জুন ECMA International তার ষষ্ঠ প্রধান সংস্করণ প্রকাশ করে, আনুষ্ঠানিক ভাবে যা ECMAScript 2015 নামে অভিহিত, এবং সাধারন ভাবে এটি ECMAScript 6 বা ES6 নামে পরিচিত। তখন থেকেই বাৎসরিক প্রকাশ চক্র অনুযায়ী ECMAScript -এর মান প্রকাশিত হচ্ছে। এই ডকুমেন্টেশনটি সর্বশেষ খসড়া সংস্করণ, যা ECMAScript 2018 কে বোঝায়।

+ +

 JavaScript এর সাথে  Java programming language কে গুলিয়ে ফেলবেন না। "Java" এবং "JavaScript" উভয় প্রোগ্রামিং ভাষাই Oracle কোম্পানির ট্রেডমার্ক বা ট্রেডমার্ক হিসেবে নিবন্ধিত যুক্তরাষ্ট্র এবং অন্যান্য দেশে। যাইহোক, এই দুই প্রোগ্রামিং ভাষার বাক্য গঠন প্রণালী (syntax), শব্দার্থবিদ্যা(semantics), এবং ব্যবহার একেবারেই আলাদা।

+ +
+
+

টিউটোরিয়াল

+ +

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

+ +

যারা একেবারেই নতুন

+ +

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

+ +

জাভাস্ক্রিপ্টের প্রথম ধাপ

+ +

জাভাস্ক্রিপ্ট এর বৈশিষ্ট “ভেরিয়েবল, স্ট্রিং, নাম্বারস, এবং এরেইস” এগুলোর আলোচনার সাথে  কিছু মৌলিক প্রশ্নের উত্তর দিন যেমন “জাভাস্ক্রিপ্ট কি?”, “ এটা দেখতে কেমন?”, এবং “এটা কি করে?”

+ +

জাভাস্ক্রিপ্ট নির্মান অংশ

+ +

জাভাস্ক্রিপ্ট এর মৌলিক বৈশিষ্ট এর সাথে সাধারণভাবে সম্মুক্ষীন হওয়া বিভিন্ন ধরনের কোড ব্লকের দিকে আমাদের দৃষ্টি আকর্ষন করা যেমন conditional statements, loops, functions, এবং events. 

+ +

জাভাস্ক্রিপ্ট অবজেক্ট এর পরিচিতি 

+ +

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

+ +

জাভাস্ক্রিপ্ট নির্দেশনা

+ +
+
জাভাস্কিপ্ট নির্দেশনা
+
জাভাস্ক্রিপ্ট ভাষা এর একটি বিস্তারিত নির্দেশনার উদ্দেশ্য যাদের জাভাস্ক্রিপ্ট বা অন্য কোনো প্রোগ্রামিং ভাষা সম্পর্কে পূর্বপর্তী অভিজ্ঞতা আছে ।
+
+ +

মধ্যবর্তী

+ +
+
ক্লায়েন্ট সাইড ওয়েব APIs
+
+ +

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

+ +
+
+
+
জাভাস্ক্রিপ্ট এর  পুনঃউপস্থাপন
+
যারা মনে করে , তারা জাভাস্ক্রিপ্ট সম্পর্কে জানে, তাদের জন্য একটি সংক্ষিপ্ত বিবরণ।
+
+ +
+
জাভাস্ক্রিপ্ট এর ডাটার গঠনশৈলী
+
জাভাস্ক্রিপ্ট এর ডাটার গঠনশৈলী সম্পর্কে সংক্ষিপ্ত বিবরন।
+
সমতুল্যতা এবং অভিন্নতা 
+
+ +

জাভাস্ক্রিপ্ট তিন ধরনের মান সরবরাহ করে- তুলনার ক্ষেত্রে: কঠোর সমতার ক্ষেত্রে === এবং শিথিল সমতার ক্ষেত্রে == ।

+ +
+
 Closures
+
closure হচ্ছে একটি ফাংশন এবং lexical environment এর সমাহার যেটি পূর্বেই ঘোষনা করা হয়েছে।
+
+ +

এডভান্স

+ +
+
ইনহেরিটেন্স এবং প্রোটোটাইপ চেইন
+
ব্যাপকভাবে ভুল বুঝা বুঝি এবং অবহেলা করা হচ্ছে প্রোটোটাইপ ইনহেরিটেন্স ব্যাখ্য ।
+
কঠোর মুড
+
কঠোর মুড( Strict mode ) এর সঙ্গা হচ্ছে  যে আপনি এটি আরম্ভ করার পূর্বে কোনো ভেরিয়েবল ব্যবহার করতে পারবেন না। এটা ECMAScript 5 একটি সীমাবদ্ধতা, দ্রুত কর্মক্ষমতা এবং সহজ ডিবাগিংএর জন্য। 
+
জাভাস্ক্রিপ্টের অ্যারে টাইপ
+
জাভাস্ক্রিপ্টের অ্যারে নতুন বাইনারি তথ্য অ্যাক্সেসের জন্য একটি প্রক্রিয়া প্রদান  করে।
+
মেমরি ম্যানেজমেন্ট
+
মেমরীর জীবনচক্র এবং জাভাস্ক্রিপ্টের মধ্যেকার আবর্জনা সংগ্রহ।
+
+
+
+ + + +
+

Reference

+ +

ব্রাউজ করুন.সম্পূর্ণ  জেএস- রেফারেন্স ডকুমেন্টেশন ।

+ +
+
Standard objects
+
Get to know standard built-in objects Array, Boolean, Date, Error, Function, JSON, Math, Number, Object, RegExp, String, Map, Set, WeakMap, WeakSet, and others.
+
Expressions & operators
+
Learn more about the behavior of JavaScript's operators instanceof, typeof, new, this, and more.
+
Statements & declarations
+
Learn how do-while, for-in, for-of, try-catch, let, var, const, if-else, switch, and more JavaScript statements and keywords work.
+
Functions
+
Learn how to work with JS functions to develop your applications.
+
+ +

Tools & resources

+ +

Helpful tools while writing and debugging your JavaScript code.

+ +
+
Firefox Developer Tools
+
Scratchpad, Web Console, JavaScript Profiler, Debugger, and more.
+
Firebug
+
Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
+
JavaScript Shells
+
A JavaScript shell allows you to quickly test snippets of JavaScript code.
+
TogetherJS
+
+

Collaboration made easy.

+
+
Stack Overflow
+
Stack Overflow questions tagged with "JavaScript".
+
JavaScript versions and release notes
+
Browse JavaScript's feature history and implementation status.
+
+
+
diff --git a/files/bn/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/bn/web/javascript/inheritance_and_the_prototype_chain/index.html new file mode 100644 index 0000000000..0db75f2c69 --- /dev/null +++ b/files/bn/web/javascript/inheritance_and_the_prototype_chain/index.html @@ -0,0 +1,177 @@ +--- +title: ইনহেরিটেন্স এবং প্রোটোটাইপ-চেইন +slug: Web/JavaScript/Inheritance_and_the_prototype_chain +tags: + - Guide + - Inheritence + - JavaScript + - NeedsContent + - OOP + - অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং + - ইনহেরিটেন্স + - গাইড + - জাভাস্ক্রিপ্ট +translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain +--- +
{{jsSidebar("Advanced")}}
+ +

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

+ +

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

+ +

প্রটোটাইপ মডেল কে অনেকে জাভাস্ক্রিপ্টের দুর্বলতা বললেও আসলে প্রটোটাইপ-ভিত্তিক ইনহেরিটেন্স মডেল সি++/জাভা ভিত্তিক ক্লাসিকাল মডেলের থেকে অনেক শক্তিশালী। যেমন, প্রটোটাইপ মডেল কে ভিত্তি করে আমরা সহজেই ক্ল্যাসিকাল মডেল তৈরি করতে পারি, কিন্তু ক্লাসিকাল মডেলের ওপর ভিত্তি করে চাইলেই প্রটোটাইপ ভিত্তিক মডেল তৈরি করা সম্ভব না।

+ +

প্রটোটাইপ-চেইন ভিত্তিক ইনহেরিটেন্স

+ +

প্রোপার্টি ইনহেরিট করা

+ +

জাভাস্ক্রিপ্টে অবজেক্ট কে আমরা বিভিন্ন প্রোপার্টির "ব্যাগ" (থলে) হিসেবে কল্পনা করতে পারিঃ এই ব্যাগে যেকোন সময় যেকোন প্রোপার্টি ঢুকানো যায়, ব্যাগ থেকে ফেলেও দেওয়া যায় (যে কারণে আমরা জাভাস্ক্রিপ্টকে ডায়নামিক বলি) । প্রতিটা অবজেক্টের সাথে একটা বিশেষ অবজেক্টের লিংক থাকে, এই বিশেষ অবজেক্ট টাকে আমরা মূল অবজেক্টটার প্রটোটাইপ বলি। আমরা যখন কোন অবজেক্টের কোন প্রোপার্টি কে ব্যবহার করতে চাই, তখন যা ঘটেঃ

+ +
// ধরে নেই, আমার o নামের একটা অবজেক্ট আছে যেটার প্রোটোটাইপ চেইন এমনঃ
+// {a:1, b:2} ---> {b:3, c:4} ---> null
+// মানে হল, o অবজেক্ট হচ্ছে {a:1, b:2}, যেটার প্রোটোটাইপ হচ্ছে {b:3, c:4} ইনহেরিটেন্স হিসেবে চিন্তা করলে,
+// {a:1, b:2} অবজেক্ট টা {b:3, c:4} অবজেক্ট থেকে ইনহেরিট করা হয়েছে। {b:3, c:4} এর কোন প্রোটোটাইপ নাই, যেকারণে null দেখানো হয়েছে।
+// 'a' আর 'b' এই দুইটা কেবল o অবজেক্টের নিজস্ব প্রোপার্টি।
+
+// এই উদাহরণে, someObject.[[Prototype]] দিয়ে আমরা someObject অবজেক্টের প্রোটোটাইপ বুঝিয়েছি।
+// এইটা শুধুই উদাহরণের জন্য (ECMAScript স্ট্যান্ডার্ড অনুযায়ী) আর আসল কোডে এরকম কিছু লেখা যাবে না!
+
+console.log(o.a); // 1
+// o অবজেক্টের কি 'a' নামে কোন প্রোপার্টী আছে? হ্যাঁ, আর এর মান হল 1
+
+console.log(o.b); // 2
+// o অবজেক্টের কি 'b' নামে কোন প্রোপার্টী আছে? হ্যাঁ, আর এর মান হল 2
+// o অবজেক্টের প্রোটোটাইপেরও কিন্তু 'b' প্রোপার্টী ছিল, কিন্তু এটি দেখা যাবে না। একে বলে "property shadowing"
+
+console.log(o.c); // 4
+// o অবজেক্টের কি 'c' নামে কোন প্রোপার্টী আছে? নাই, তাহলে এর প্রোটোটাইপে দেখতে হবে এই নামে প্রোপার্টি আছে কিনা।
+// o.[[Prototype]] এ কি 'c' প্রোপার্টি আছে? ? হ্যাঁ, আর এর মান হল 4
+
+console.log(o.d); // undefined
+// o অবজেক্টের কি 'd' নামে কোন প্রোপার্টী আছে? নাই, তাহলে এর প্রোটোটাইপে দেখতে হবে এই নামে প্রোপার্টি আছে কিনা।
+// o.[[Prototype]] অবজেক্টের কি 'd' নামে কোন প্রোপার্টী আছে? নাই, তাহলে এর প্রোটোটাইপে দেখতে হবে এই নামে প্রোপার্টি আছে কিনা।
+// o.[[Prototype]].[[Prototype]] এ null পেয়েছি, তারমানে আর খোজার কিছু নাই। undefined রিটার্ন করতে হবে।
+
+ +

কোন অবজেক্টের প্রোপার্টি সেট করে দিলে সেটা সেই অবজেক্টের নিজস্ব প্রোপার্টি হিসেবে কাজ করে। একমাত্র ব্যতিক্রম হলঃ getter অথবা setter দিয়ে যখন ইনহেরিটেড প্রোপার্টি নিয়ে কাজ করা হয়।

+ +

"মেথড" ইনহেরিট করা

+ +

ক্লাস-ভিত্তিক প্রোগ্রামিং ভাষাতে যেভাবে "মেথড" বা ফাংশন এর ধারণা প্রচলিত আছে, জাভাস্ক্রিপ্টে মেথডের ধারণা টা ঠিক সেভাবে নয়। জাভাস্ক্রিপ্টে, যেকোন ফাংশন সাধারণ প্রোপার্টির মতই অবজেক্টে যোগ করা যায়। ইনহেরিট করা ফাংশন অবজেক্টের বাদবাকি প্রোপার্টির মতই স্বাভাবিকভাবে কাজ করবে। উপরের উদাহরণে দেখানো property shadowing এখানেও কাজ করবে (এক্ষেত্রে একে বলা হবে method overriding বা ফাংশন ওভাররাইডিং)

+ +

যখন ইনহেরিট-হওয়া কোন ফাংশন একজিকিউট হয়, তখন this এর মান হিসেবে ইনহেরিট-হওয়া অবজেক্ট টা থাকে, প্রোটোটাইপ অবজেক্ট টা না যেখানে ফাংশনটা নিজস্ব প্রোপার্টি হিসেবে দেওয়া হয়েছিল।

+ +
var o = {
+  a: 2,
+  m: function(b){
+    return this.a + 1;
+  }
+};
+
+console.log(o.m()); // 3
+// এখানে o.m কল করার সময়, 'this' পয়েন্ট করে আছে o কে।
+
+var p = Object.create(o);
+// p অবজেক্ট টা o থেকে ইনহেরিট করা হয়েছে
+
+p.a = 12; // 'a' নামে p অবজেক্টে নিজস্ব প্রোপার্টি তৈরি হল
+console.log(p.m()); // 13
+// এখানে p.m কল করার সময়, 'this' পয়েন্ট করে আছে p কে।
+// তাই যখন o অবজেক্টের m ফাংশনটা p ইনহেরিট করল, 'this.a' এর মানে দাঁড়ালো p.a, 'a' নামের p এর নিজস্ব প্রোপার্টি।
+
+ +

অবজেক্ট তৈরি করার বিভিন্ন উপায় এবং ফলাফল হিসেবে প্রোটোটাইপ চেইন

+ +

সিন্ট্যাক্স কন্সট্রাক্টস ব্যবহার করে অবজেক্ট তৈরি করা

+ +
var o = {a: 1};
+
+// নতুন তৈরি করা o অবজেক্টের প্রটোটাইপ হচ্ছে Object.prototype
+// o এর 'hasOwnProperty' নামের কোন নিজস্ব প্রোপার্টি নেই।
+// hasOwnProperty হচ্ছে Object.prototype এর একটি নিজস্ব প্রোপার্টি। তাই o, Object.prototype থেকে hasOwnProperty ইনহেরিট করেছে।
+// Object.prototype এর প্রোটোটাইপ হচ্ছে null
+// o ---> Object.prototype ---> null
+
+var a = ["yo", "whadup", "?"];
+
+// Arrays inherit from Array.prototype (which has methods like indexOf, forEach, etc.)
+// The prototype chain looks like:
+// a ---> Array.prototype ---> Object.prototype ---> null
+
+function f(){
+  return 2;
+}
+
+// Functions inherit from Function.prototype (which has methods like call, bind, etc.)
+// f ---> Function.prototype ---> Object.prototype ---> null
+
+ +

কন্সট্রাক্টর এর সাহায্যে

+ +

জাভাস্ক্রিপ্টে "কন্সট্রাক্টর", "শুধুই" সাধারণ যেকোন ফাংশন যাকে কিনা new অপারেটর দিয়ে কল করা হয়।

+ +
function Graph() {
+  this.vertexes = [];
+  this.edges = [];
+}
+
+Graph.prototype = {
+  addVertex: function(v){
+    this.vertexes.push(v);
+  }
+};
+
+var g = new Graph();
+// g is an object with own properties 'vertexes' and 'edges'.
+// g.[[Prototype]] is the value of Graph.prototype when new Graph() is executed.
+
+ +

Object.create দিয়ে

+ +

ECMAScript 5 নতুন একটি মেথড নিয়ে এসেছেঃ Object.create। এই মেথড কল করলে নতুন একটি অবজেক্ট তৈরি হয় যার প্রোটোটাইপ হল মেথডটির প্রথম প্যারামিটারঃ

+ +
var a = {a: 1};
+// a ---> Object.prototype ---> null
+
+var b = Object.create(a);
+// b ---> a ---> Object.prototype ---> null
+console.log(b.a); // 1 (inherited)
+
+var c = Object.create(b);
+// c ---> b ---> a ---> Object.prototype ---> null
+
+var d = Object.create(null);
+// d ---> null
+console.log(d.hasOwnProperty); // undefined, because d doesn't inherit from Object.prototype
+
+ +
+

পারদর্শীতা

+ +

কোন অবজেক্টে কোন প্রোপার্টি আছে কিনা সেটা জানার জন্য, অবজেক্টের পুরো প্রটোটাইপ-চেইন খুঁজে দেখতে হয়। কোডের পার্ফরমেন্সে এটা ভালই বাজে প্রভাব ফেলে। যেসব কোডের পারফরমেন্স খুব ভাল হওয়া দরকার, সেখানে এই ইস্যু প্রভাব ফেলতে পারে। অবজেক্টে কোন প্রোপার্টি খুঁজে না পেলে পুরো প্রোটোটাইপ চেইনের কোথাও প্রোপার্টি টা আছে কিনা খুঁজা হয়।

+ +

এছাড়াও, অবজেক্টের প্রোপার্টি গুলো ঘুরে দেখার সময় (iterate করার সময়) প্রোটোটাইপ-চেইনের প্রত্যেকটা প্রোপার্টি খুঁজে দেখা (enumerate করা) হবে।

+ +

অবজেক্টে কোন প্রোপার্টি শুধুমাত্র নিজস্ব প্রোপার্টি হিসেবে আছে কিনা (প্রোটোটাইপ চেইনের অন্য কোথাও নয়) hasOwnProperty মেথড ব্যবহার উচিত। সব অবজেক্ট এই মেথডটাকে Object.prototype থেকে ইনহেরিট করে।

+ +

জাভাস্ক্রিপ্টে hasOwnProperty-ই একমাত্র ফাংশন যা প্রোপার্টি নিয়ে কাজ করে এবং পুরো প্রোটোটাইপ চেইন ঘুরে (traverse) না।

+ + +
খেয়াল করুনঃ কোন প্রোপার্টি undefined কিনা এই চেক করাই যথেষ্ট নয়।  হতে পারে প্রোপার্টি টি বহাল তবিয়তেই আছে, কেবল এর মান undefined দেওয়া হয়েছে।
+ +
+

বদ অভ্যাসঃ নেটিভ প্রোটোটাইপ এক্সটেন্ড করা

+ +

একটা বাজে ব্যাপার প্রায়ই করা হয় তা হল Object.prototype অথবা অন্য কোন বিল্ট-ইন প্রটোটাইপ এক্সটেন্ড করা।

+ +

এই পদ্ধতিকে বলা হয় monkey patching যা encapsulation এর সর্বনাশ ছাড়া আর কিছুই নয়। Prototype.js এর মত কিছু জনপ্রিয় ফ্রেমওয়ার্কে এর ব্যবহার দেখা গেলেও, স্ট্যান্ডার্ড-নয়, এমন ফিচার দিয়ে বিল্ট-ইন টাইপগুলোর বোঝা বাড়ানোর কোন মানে হয় না।

+ +

বিল্ট-ইন টাইপ এক্সটেন্ড করার একমাত্র যৌক্তিক কারণ হতে পারে জাভাস্ক্রিপ্টের নতুন ফিচার গুলো পুরনো ইঞ্জিনে দেওয়া; যেমন Array.forEach, ইত্যাদি।

+
+ +
+

পরিশেষে

+ +

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

+
+
diff --git a/files/bn/web/javascript/reference/global_objects/index.html b/files/bn/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..91433921eb --- /dev/null +++ b/files/bn/web/javascript/reference/global_objects/index.html @@ -0,0 +1,177 @@ +--- +title: Global Objects +slug: Web/JavaScript/Reference/Global_Objects +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects +--- +
{{jsSidebar("Objects")}}
+ +

This chapter documents all of JavaScript's standard, built-in objects, including their methods and properties.

+ +
+

The term "global objects" (or standard built-in objects) here is not to be confused with the global object. Here, global objects refer to objects in the global scope (but only if ECMAScript 5 strict mode is not used; in that case it returns undefined). The global object itself can be accessed using the {{jsxref("Operators/this", "this")}} operator in the global scope. In fact, the global scope consists of the properties of the global object, including inherited properties, if any.

+ +

Other objects in the global scope are either created by the user script or provided by the host application. The host objects available in browser contexts are documented in the API reference. For more information about the distinction between the DOM and core JavaScript, see JavaScript technologies overview.

+ +

Standard objects (by category)

+ +

Value properties

+ +

These global properties return a simple value; they have no properties or methods.

+ +
    +
  • {{jsxref("Infinity")}}
    • +
  • {{jsxref("NaN")}}
    • +
  • {{jsxref("undefined")}}
    • +
  • {{jsxref("null")}} literal
    • +
+ +

Function properties

+ +

These global functions—functions which are called globally rather than on an object—directly return their results to the caller.

+ +
    +
  • {{jsxref("Global_Objects/eval", "eval()")}}
    • +
  • {{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}
    • +
  • {{jsxref("Global_Objects/isFinite", "isFinite()")}}
    • +
  • {{jsxref("Global_Objects/isNaN", "isNaN()")}}
    • +
  • {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}
    • +
  • {{jsxref("Global_Objects/parseInt", "parseInt()")}}
    • +
  • {{jsxref("Global_Objects/decodeURI", "decodeURI()")}}
    • +
  • {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}
    • +
  • {{jsxref("Global_Objects/encodeURI", "encodeURI()")}}
    • +
  • {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}
    • +
  • {{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}
    • +
  • {{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}
    • +
+ +

Fundamental objects

+ +

These are the fundamental, basic objects upon which all other objects are based. This includes objects that represent general objects, functions, and errors.

+ +
    +
  • {{jsxref("Object")}}
    • +
  • {{jsxref("Function")}}
    • +
  • {{jsxref("Boolean")}}
    • +
  • {{jsxref("Symbol")}} {{experimental_inline}}
    • +
  • {{jsxref("Error")}}
    • +
  • {{jsxref("EvalError")}}
    • +
  • {{jsxref("InternalError")}}
    • +
  • {{jsxref("RangeError")}}
    • +
  • {{jsxref("ReferenceError")}}
    • +
  • {{jsxref("SyntaxError")}}
    • +
  • {{jsxref("TypeError")}}
    • +
  • {{jsxref("URIError")}}
    • +
+ +

Numbers and dates

+ +

These are the base objects representing numbers, dates, and mathematical calculations.

+ +
    +
  • {{jsxref("Number")}}
    • +
  • {{jsxref("Math")}}
    • +
  • {{jsxref("Date")}}
    • +
+ +

Text processing

+ +

These objects represent strings and support manipulating them.

+ +
    +
  • {{jsxref("String")}}
    • +
  • {{jsxref("RegExp")}}
    • +
+ +

Indexed collections

+ +

These objects represent collections of data which are ordered by an index value. This includes (typed) arrays and array-like constructs.

+ +
    +
  • {{jsxref("Array")}}
    • +
  • {{jsxref("Int8Array")}}
    • +
  • {{jsxref("Uint8Array")}}
    • +
  • {{jsxref("Uint8ClampedArray")}}
    • +
  • {{jsxref("Int16Array")}}
    • +
  • {{jsxref("Uint16Array")}}
    • +
  • {{jsxref("Int32Array")}}
    • +
  • {{jsxref("Uint32Array")}}
    • +
  • {{jsxref("Float32Array")}}
    • +
  • {{jsxref("Float64Array")}}
    • +
+ +

Keyed collections

+ +

These objects represent collections which use keys; these contain elements which are iterable in the order of insertion.

+ +
    +
  • {{jsxref("Map")}} {{experimental_inline}}
    • +
  • {{jsxref("Set")}} {{experimental_inline}}
    • +
  • {{jsxref("WeakMap")}} {{experimental_inline}}
    • +
  • {{jsxref("WeakSet")}} {{experimental_inline}}
    • +
+ +

Vector collections

+ +

{{Glossary("SIMD")}} vector data types are objects where data is arranged into lanes.

+ +
    +
  • {{jsxref("SIMD")}} {{experimental_inline}}
    • +
  • {{jsxref("float32x4", "SIMD.float32x4")}} {{experimental_inline}}
    • +
  • {{jsxref("float64x2", "SIMD.float64x2")}} {{experimental_inline}}
    • +
  • {{jsxref("int8x16", "SIMD.int8x16")}} {{experimental_inline}}
    • +
  • {{jsxref("int16x8", "SIMD.int16x8")}} {{experimental_inline}}
    • +
  • {{jsxref("int32x4", "SIMD.int32x4")}} {{experimental_inline}}
    • +
+ +

Structured data

+ +

These objects represent and interact with structured data buffers and data coded using JavaScript Object Notation (JSON).

+ +
    +
  • {{jsxref("ArrayBuffer")}}
    • +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("JSON")}}
    • +
+ +

Control abstraction objects

+ +
    +
  • {{jsxref("Promise")}} {{experimental_inline}}
    • +
  • {{jsxref("Generator")}} {{experimental_inline}}
    • +
  • {{jsxref("GeneratorFunction")}} {{experimental_inline}}
    • +
+ +

Reflection

+ +
    +
  • {{jsxref("Reflect")}} {{experimental_inline}}
    • +
  • {{jsxref("Proxy")}} {{experimental_inline}}
    • +
+ +

Internationalization

+ +

Additions to the ECMAScript core for language-sensitive functionalities.

+ +
    +
  • {{jsxref("Intl")}}
    • +
  • {{jsxref("Global_Objects/Collator", "Intl.Collator")}}
    • +
  • {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}
    • +
  • {{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}
    • +
+ +

Non-standard objects

+ +
    +
  • {{jsxref("Iterator")}} {{non-standard_inline}}
    • +
  • {{jsxref("ParallelArray")}} {{non-standard_inline}}
    • +
  • {{jsxref("StopIteration")}} {{non-standard_inline}}
    • +
+ +

Other

+ + +
diff --git a/files/bn/web/javascript/reference/global_objects/isfinite/index.html b/files/bn/web/javascript/reference/global_objects/isfinite/index.html new file mode 100644 index 0000000000..0ff5ef06bc --- /dev/null +++ b/files/bn/web/javascript/reference/global_objects/isfinite/index.html @@ -0,0 +1,130 @@ +--- +title: isFinite +slug: Web/JavaScript/Reference/Global_Objects/isFinite +translation_of: Web/JavaScript/Reference/Global_Objects/isFinite +--- +
+
+
{{jsSidebar("Objects")}}
+
+
+ +

সারসংক্ষেপ

+ +

একটি আর্গুমেন্টকে যাচাই করে বলে এটি সসীম সংখ্যা কিনা।

+ +

সিনট্যাক্স

+ +

isFinite(number)

+ +

প্যারামিটার

+ +
+
number
+
যে সংখ্যাটিকে যাচাই করতে হবে।
+
+ +

বিবরণ

+ +

isFinite একটি টপ লেভেল ফাংশন এবং কোন অবজেক্টের সঙ্গে সংশ্লিষ্ট নয়।

+ +

এই ফাংশনটির সাহায্যে আপনি জানতে পারবেন কোন সংখ্যা সসীম সংখ্যা কিনা। isFinite এর আর্গুমেন্টে আসা সংখ্যাটিকে পরীক্ষা করে দেখে। আর্গুমেন্টটি NaN, ধনাত্বক অসীম অথবা ঋণাত্মক অসীম হলে এই মেথডটি false রিটার্ন করে; নয়তো true রিটার্ন করে।

+ +

উদাহরণ

+ +

উদাহরণ: isFinite ব্যবহার করা

+ +

আপনি আপনার ক্লায়েন্টের ইনপুট নিয়ে পরীক্ষা করে দেখতে পারেন তা সসীম সংখ্যা কিনা।

+ +
if (isFinite(ClientInput)) {
+   /* take specific steps */
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
ECMAScript 2nd Edition.StandardInitial definition.
{{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}}{{Spec2('ES6')}} 
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

See also

+ +
    +
  • {{jsxref("Number.isFinite()")}}
    • +
  • {{jsxref("Number.NaN()")}}
    • +
  • {{jsxref("Number.POSITIVE_INFINITY")}}
    • +
  • {{jsxref("Number.NEGATIVE_INFINITY")}}
    • +
diff --git a/files/bn/web/javascript/reference/global_objects/number/index.html b/files/bn/web/javascript/reference/global_objects/number/index.html new file mode 100644 index 0000000000..a4740d7dab --- /dev/null +++ b/files/bn/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,218 @@ +--- +title: Number +slug: Web/JavaScript/Reference/Global_Objects/Number +tags: + - JavaScript + - JavaScript Reference + - Number + - Reference + - Référence(2) +translation_of: Web/JavaScript/Reference/Global_Objects/Number +--- +
{{JSRef}}
+ +

The Number JavaScript object is a wrapper object allowing you to work with numerical values. A Number object is created using the Number() constructor.

+ +

Constructor

+ +
new Number(value);
+ +

Parameters

+ +
+
value
+
The numeric value of the object being created.
+
+ +

Description

+ +

The primary uses for the Number object are:

+ +
    +
  • If the argument cannot be converted into a number, it returns {{jsxref("Global_Objects/NaN", "NaN")}}.
    • +
  • In a non-constructor context (i.e., without the {{jsxref("Operators/new", "new")}} operator), Number can be used to perform a type conversion.
    • +
+ +

Properties

+ +
+
{{jsxref("Number.EPSILON")}} {{experimental_inline}}
+
The smallest interval between two representable numbers.
+
{{jsxref("Number.MAX_SAFE_INTEGER")}} {{experimental_inline}}
+
The maximum safe integer in JavaScript (253 - 1).
+
{{jsxref("Number.MAX_VALUE")}}
+
The largest positive representable number.
+
{{jsxref("Number.MIN_SAFE_INTEGER")}} {{experimental_inline}}
+
The minimum safe integer in JavaScript (-(253 - 1)).
+
{{jsxref("Number.MIN_VALUE")}}
+
The smallest positive representable number - that is, the positive number closest to zero (without actually being zero).
+
{{jsxref("Number.NaN")}}
+
Special "not a number" value.
+
{{jsxref("Number.NEGATIVE_INFINITY")}}
+
Special value representing negative infinity; returned on overflow.
+
{{jsxref("Number.POSITIVE_INFINITY")}}
+
Special value representing infinity; returned on overflow.
+
{{jsxref("Number.prototype")}}
+
Allows the addition of properties to a Number object.
+
+ +
{{jsOverrides("Function", "properties", "MAX_VALUE", "MIN_VALUE", "NaN", "NEGATIVE_INFINITY", "POSITIVE_INFINITY", "protoype")}}
+ +

Methods

+ +
+
{{jsxref("Number.isNaN()")}} {{experimental_inline}}
+
Determine whether the passed value is NaN.
+
{{jsxref("Number.isFinite()")}} {{experimental_inline}}
+
Determine whether the passed value is a finite number.
+
{{jsxref("Number.isInteger()")}} {{experimental_inline}}
+
Determine whether the passed value is an integer.
+
{{jsxref("Number.isSafeInteger()")}} {{experimental_inline}}
+
Determine whether the passed value is a safe integer (number between -(253 - 1) and 253 - 1).
+
{{jsxref("Number.toInteger()")}} {{obsolete_inline}}
+
Used to evaluate the passed value and convert it to an integer (or {{jsxref("Global_Objects/Infinity", "Infinity")}}), but has been removed.
+
{{jsxref("Number.parseFloat()")}} {{experimental_inline}}
+
The value is the same as {{jsxref("Global_Objects/parseFloat", "parseFloat")}} of the global object.
+
{{jsxref("Number.parseInt()")}} {{experimental_inline}}
+
The value is the same as {{jsxref("Global_Objects/parseInt", "parseInt")}} of the global object.
+
+ +
{{jsOverrides("Function", "Methods", "isNaN")}}
+ +

Number instances

+ +

All Number instances inherit from {{jsxref("Number.prototype")}}. The prototype object of the Number constructor can be modified to affect all Number instances.

+ +

Methods

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

Examples

+ +

Example: Using the Number object to assign values to numeric variables

+ +

The following example uses the Number object's properties to assign values to several numeric variables:

+ +
var biggestNum = Number.MAX_VALUE;
+var smallestNum = Number.MIN_VALUE;
+var infiniteNum = Number.POSITIVE_INFINITY;
+var negInfiniteNum = Number.NEGATIVE_INFINITY;
+var notANum = Number.NaN;
+
+ +

Example: Integer range for Number

+ +

The following example shows minimum and maximum integer values that can be represented as Number object (for details, refer to EcmaScript standard, chapter 8.5 The Number Type):

+ +
var biggestInt = 9007199254740992;
+var smallestInt = -9007199254740992;
+
+ +

When parsing data that has been serialized to JSON, integer values falling out of this range can be expected to become corrupted when JSON parser coerces them to Number type. Using {{jsxref("Global_Objects/String", "String")}} instead is a possible workaround.

+ +

Example: Using Number to convert a Date object

+ +

The following example converts the {{jsxref("Global_Objects/Date", "Date")}} object to a numerical value using Number as a function:

+ +
var d = new Date('December 17, 1995 03:24:00');
+print(Number(d));
+
+ +

This displays "819199440000".

+ +

Example: Convert numeric strings to numbers

+ +
Number("123")     // 123
+Number("")        // 0
+Number("0x11")    // 17
+Number("0b11")    // 3
+Number("0o11")    // 9
+Number("foo")     // NaN
+Number("100a")    // NaN
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
ECMAScript 1st Edition.StandardInitial definition. Implemented in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7', 'Number')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number-objects', 'Number')}}{{Spec2('ES6')}}New methods and properties added: ({{jsxref("Number.EPSILON", "EPSILON")}}, {{jsxref("Number.isFinite", "isFinite")}}, {{jsxref("Number.isInteger", "isInteger")}}, {{jsxref("Number.isNaN", "isNaN")}}, {{jsxref("Number.parseFloat", "parseFloat")}}, {{jsxref("Number.parseInt", "parseInt")}})
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ +
    +
  • {{jsxref("Global_Objects/NaN", "NaN")}}
    • +
  • The {{jsxref("Global_Objects/Math", "Math")}} global object
    • +
diff --git a/files/bn/web/javascript/reference/global_objects/number/isfinite/index.html b/files/bn/web/javascript/reference/global_objects/number/isfinite/index.html new file mode 100644 index 0000000000..0ad18815ef --- /dev/null +++ b/files/bn/web/javascript/reference/global_objects/number/isfinite/index.html @@ -0,0 +1,125 @@ +--- +title: Number.isFinite +slug: Web/JavaScript/Reference/Global_Objects/Number/isFinite +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isFinite +--- +
+
{{JSRef}}
+
+ +

সারসংক্ষেপ

+ +

পাস করা ভ্যালু সসীম কিনা তা জানায়। গ্লোবাল isFinite এর উন্নততর সংস্করণ।

+ +

সিনট্যাক্স

+ +
Number.isFinite(testValue);
+ +

প্যারামিটার

+ +
+
testValue
+
সে সংখ্যা পরীক্ষা করে বলা হবে সসীম কিনা।
+
+ +

বিবরণ

+ +

গ্লোবাল isFinite ফাংশনটির সঙ্গে তুলনা করে বলা যায়, এই মেথডটি জোর পূর্বক প্যারামিটারকে সংখ্যার রুপান্তর করে না। কেবলমাত্র যে সকল নাম্বার টাইপের আর্গুমেন্ট সসীম সংখ্যা হবে, তাদের জন্যই মেথডটি true রিটার্ন করবে।

+ +

উদাহরণ

+ +
Number.isFinite(Infinity);  // false
+Number.isFinite(NaN);       // false
+Number.isFinite(-Infinity); // false
+
+// all other numbers true
+Number.isFinite(0);
+Number.isFinite(2e64);
+
+// everything else is false
+Number.isFinite("0");       // false, would've been true with global isFinite
+
+ +

Polyfill

+ +
Number.isFinite = Number.isFinite || function(value) {
+    return typeof value === "number" && isFinite(value);
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
+

{{SpecName('ES6', '#sec-number.isfinite', 'Number.isInteger')}}

+ 		{{Spec2('ES6')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("19")}}{{CompatGeckoDesktop("16")}}{{CompatNo}}{{CompatOpera("15")}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("16")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ +
    +
  • The {{jsxref("Global_Objects/Number", "Number")}} object it belongs to.
    • +
diff --git a/files/bn/web/javascript/reference/index.html b/files/bn/web/javascript/reference/index.html new file mode 100644 index 0000000000..e749b0831e --- /dev/null +++ b/files/bn/web/javascript/reference/index.html @@ -0,0 +1,48 @@ +--- +title: জাভাস্ক্রিপ্ট রেফারেন্স +slug: Web/JavaScript/Reference +tags: + - JavaScript +translation_of: Web/JavaScript/Reference +--- +
{{JsSidebar}}
+ +

This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more about this reference.

+ +

Global Objects

+ +

This chapter documents all the JavaScript standard built-in objects, along with their methods and properties.

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects', 'Standard objects (by category)')}}
+ +

Statements

+ +

This chapter documents all the JavaScript statements and declarations.

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}
+ +

Expressions and operators

+ +

This chapter documents all the JavaScript expressions and operators.

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}
+ +

Functions

+ +

This chapter documents how to work with JavaScript functions to develop your applications.

+ + + +

Additional reference pages

+ + diff --git a/files/bn/web/javascript/reference/statements/index.html b/files/bn/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..cfda7a107f --- /dev/null +++ b/files/bn/web/javascript/reference/statements/index.html @@ -0,0 +1,127 @@ +--- +title: জাভাস্ক্রিপ্ট স্টেটমেন্ট সমুহ +slug: Web/JavaScript/Reference/statements +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Statements +--- +
{{jsSidebar("Statements")}}
+ +

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

+ +

Statements and declarations by category

+ +

For an alphabetical listing see the sidebar on the left.

+ +

Control flow

+ +
+
{{jsxref("Statements/block", "Block")}}
+
A block statement is used to group zero or more statements. The block is delimited by a pair of curly brackets.
+
{{jsxref("Statements/break", "break")}}
+
Terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement.
+
{{jsxref("Statements/continue", "continue")}}
+
Terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.
+
{{jsxref("Statements/Empty", "Empty")}}
+
An empty statement is used to provide no statement, although the JavaScript syntax would expect one.
+
{{jsxref("Statements/if...else", "if...else")}}
+
Executes a statement if a specified condition is true. If the condition is false, another statement can be executed.
+
{{jsxref("Statements/switch", "switch")}}
+
Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.
+
{{jsxref("Statements/throw", "throw")}}
+
Throws a user-defined exception.
+
{{jsxref("Statements/try...catch", "try...catch")}}
+
Marks a block of statements to try, and specifies a response, should an exception be thrown.
+
+ +

Declarations

+ +
+
{{jsxref("Statements/var", "var")}}
+
Declares a variable, optionally initializing it to a value.
+
{{experimental_inline}} {{jsxref("Statements/let", "let")}}
+
Declares a block scope local variable, optionally initializing it to a value.
+
{{experimental_inline}} {{jsxref("Statements/const", "const")}}
+
Declares a read-only named constant.
+
+ +

Functions and classes

+ +
+
{{jsxref("Statements/function", "function")}}
+
Declares a function with the specified parameters.
+
{{experimental_inline}} {{jsxref("Statements/function*", "function*")}}
+
Generators functions enable writing iterators more easily.
+
{{jsxref("Statements/return", "return")}}
+
Specifies the value to be returned by a function.
+
{{experimental_inline}} {{jsxref("Statements/class", "class")}}
+
Declares a class.
+
+ +

Iterations

+ +
+
{{jsxref("Statements/do...while", "do...while")}}
+
Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.
+
{{jsxref("Statements/for", "for")}}
+
Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.
+
{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}
+
Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.
+
{{jsxref("Statements/for...in", "for...in")}}
+
Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.
+
{{experimental_inline}} {{jsxref("Statements/for...of", "for...of")}}
+
Iterates over iterable objects (including arrays, array-like objects, iterators and generators), invoking a custom iteration hook with statements to be executed for the value of each distinct property.
+
{{jsxref("Statements/while", "while")}}
+
Creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.
+
+ +

Others

+ +
+
{{jsxref("Statements/debugger", "debugger")}}
+
Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.
+
{{experimental_inline}} {{jsxref("Statements/export", "export")}}
+
Used to export functions to make them available for imports in external modules, another scripts.
+
{{experimental_inline}} {{jsxref("Statements/import", "import")}}
+
Used to import functions exported from an external module, another script.
+
{{jsxref("Statements/label", "label")}}
+
Provides a statement with an identifier that you can refer to using a break or continue statement.
+
+ +
+
{{deprecated_inline}} {{jsxref("Statements/with", "with")}}
+
Extends the scope chain for a statement.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
ECMAScript 1st Edition.StandardInitial definition.
{{SpecName('ES5.1', '#sec-12', 'Statements')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}{{Spec2('ES6')}}New: function*, let, for...of, yield, class
+ +

See also

+ + diff --git a/files/bn/web/javascript/typed_arrays/index.html b/files/bn/web/javascript/typed_arrays/index.html new file mode 100644 index 0000000000..8bcdf2a39d --- /dev/null +++ b/files/bn/web/javascript/typed_arrays/index.html @@ -0,0 +1,268 @@ +--- +title: JavaScript typed arrays +slug: Web/JavaScript/Typed_arrays +translation_of: Web/JavaScript/Typed_arrays +--- +
Swa{{JsSidebar("Advanced")}}
+ +

JavaScript typed arrays are array-like objects that provide a mechanism for reading and writing raw binary data in memory buffers. As you may already know, {{jsxref("Array")}} objects grow and shrink dynamically and can have any JavaScript value. JavaScript engines perform optimizations so that these arrays are fast.

+ +

However, as web applications become more and more powerful, adding features such as audio and video manipulation, access to raw data using WebSockets, and so forth, it has become clear that there are times when it would be helpful for JavaScript code to be able to quickly and easily manipulate raw binary data. This is where typed arrays come in. Each entry in a JavaScript typed array is a raw binary value in one of a number of supported formats, from 8-bit integers to 64-bit floating-point numbers.

+ +

However, typed arrays are not to be confused with normal arrays, as calling {{jsxref("Array.isArray()")}} on a typed array returns false. Moreover, not all methods available for normal arrays are supported by typed arrays (e.g. push and pop).

+ +

Buffers and views: typed array architecture

+ +

To achieve maximum flexibility and efficiency, JavaScript typed arrays split the implementation into buffers and views. A buffer (implemented by the {{jsxref("ArrayBuffer")}} object) is an object representing a chunk of data; it has no format to speak of and offers no mechanism for accessing its contents. In order to access the memory contained in a buffer, you need to use a view. A view provides a context — that is, a data type, starting offset, and the number of elements — that turns the data into a typed array.

+ +

Typed arrays in an ArrayBuffer

+ +

ArrayBuffer

+ +

The {{jsxref("ArrayBuffer")}} is a data type that is used to represent a generic, fixed-length binary data buffer. You can't directly manipulate the contents of an ArrayBuffer; instead, you create a typed array view or a {{jsxref("DataView")}} which represents the buffer in a specific format, and use that to read and write the contents of the buffer.

+ +

Typed array views

+ +

Typed array views have self-descriptive names and provide views for all the usual numeric types like Int8, Uint32, Float64 and so forth. There is one special typed array view, the Uint8ClampedArray. It clamps the values between 0 and 255. This is useful for Canvas data processing, for example.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeValue RangeSize in bytesDescriptionWeb IDL typeEquivalent C type
{{jsxref("Int8Array")}}-128 to 12718-bit two's complement signed integerbyteint8_t
{{jsxref("Uint8Array")}}0 to 25518-bit unsigned integeroctetuint8_t
{{jsxref("Uint8ClampedArray")}}0 to 25518-bit unsigned integer (clamped)octetuint8_t
{{jsxref("Int16Array")}}-32768 to 32767216-bit two's complement signed integershortint16_t
{{jsxref("Uint16Array")}}0 to 65535216-bit unsigned integerunsigned shortuint16_t
{{jsxref("Int32Array")}}-2147483648 to 2147483647432-bit two's complement signed integerlongint32_t
{{jsxref("Uint32Array")}}0 to 4294967295432-bit unsigned integerunsigned longuint32_t
{{jsxref("Float32Array")}}1.2×10-38 to 3.4×1038432-bit IEEE floating point number (7 significant digits e.g., 1.123456)unrestricted floatfloat
{{jsxref("Float64Array")}}5.0×10-324 to 1.8×10308864-bit IEEE floating point number (16 significant digits e.g., 1.123...15)unrestricted doubledouble
{{jsxref("BigInt64Array")}}-263 to 263-1864-bit two's complement signed integerbigintint64_t (signed long long)
{{jsxref("BigUint64Array")}}0 to 264-1864-bit unsigned integerbigintuint64_t (unsigned long long)
+ +

DataView

+ +

The {{jsxref("DataView")}} is a low-level interface that provides a getter/setter API to read and write arbitrary data to the buffer. This is useful when dealing with different types of data, for example. Typed array views are in the native byte-order (see Endianness) of your platform. With a DataView you are able to control the byte-order. It is big-endian by default and can be set to little-endian in the getter/setter methods.

+ +

Web APIs using typed arrays

+ +

These are some examples of APIs that make use of typed arrays; there are others, and more are being added all the time.

+ +
+
FileReader.prototype.readAsArrayBuffer()
+
The FileReader.prototype.readAsArrayBuffer() method starts reading the contents of the specified Blob or File.
+
XMLHttpRequest.prototype.send()
+
XMLHttpRequest instances' send() method now supports typed arrays and {{jsxref("ArrayBuffer")}} objects as argument.
+
ImageData.data
+
Is a {{jsxref("Uint8ClampedArray")}} representing a one-dimensional array containing the data in the RGBA order, with integer values between 0 and 255 inclusive.
+
+ +

Examples

+ +

Using views with buffers

+ +

First of all, we will need to create a buffer, here with a fixed length of 16-bytes:

+ +
let buffer = new ArrayBuffer(16);
+
+ +

At this point, we have a chunk of memory whose bytes are all pre-initialized to 0. There's not a lot we can do with it, though. We can confirm that it is indeed 16 bytes long, and that's about it:

+ +
if (buffer.byteLength === 16) {
+  console.log("Yes, it's 16 bytes.");
+} else {
+  console.log("Oh no, it's the wrong size!");
+}
+
+ +

Before we can really work with this buffer, we need to create a view. Let's create a view that treats the data in the buffer as an array of 32-bit signed integers:

+ +
let int32View = new Int32Array(buffer);
+
+ +

Now we can access the fields in the array just like a normal array:

+ +
for (let i = 0; i < int32View.length; i++) {
+  int32View[i] = i * 2;
+}
+
+ +

This fills out the 4 entries in the array (4 entries at 4 bytes each makes 16 total bytes) with the values 0, 2, 4, and 6.

+ +

Multiple views on the same data

+ +

Things start to get really interesting when you consider that you can create multiple views onto the same data. For example, given the code above, we can continue like this:

+ +
let int16View = new Int16Array(buffer);
+
+for (let i = 0; i < int16View.length; i++) {
+  console.log('Entry ' + i + ': ' + int16View[i]);
+}
+
+ +

Here we create a 16-bit integer view that shares the same buffer as the existing 32-bit view and we output all the values in the buffer as 16-bit integers. Now we get the output 0, 0, 2, 0, 4, 0, 6, 0.

+ +

You can go a step farther, though. Consider this:

+ +
int16View[0] = 32;
+console.log('Entry 0 in the 32-bit array is now ' + int32View[0]);
+
+ +

The output from this is "Entry 0 in the 32-bit array is now 32".

+ +

In other words, the two arrays are indeed simply viewed on the same data buffer, treating it as different formats. You can do this with any view types.

+ +

Working with complex data structures

+ +

By combining a single buffer with multiple views of different types, starting at different offsets into the buffer, you can interact with data objects containing multiple data types. This lets you, for example, interact with complex data structures from WebGL, data files, or C structures you need to use while using js-ctypes.

+ +

Consider this C structure:

+ +
struct someStruct {
+  unsigned long id;
+  char username[16];
+  float amountDue;
+};
+ +

You can access a buffer containing data in this format like this:

+ +
let buffer = new ArrayBuffer(24);
+
+// ... read the data into the buffer ...
+
+let idView = new Uint32Array(buffer, 0, 1);
+let usernameView = new Uint8Array(buffer, 4, 16);
+let amountDueView = new Float32Array(buffer, 20, 1);
+ +

Then you can access, for example, the amount due with amountDueView[0].

+ +
Note: The data structure alignment in a C structure is platform-dependent. Take precautions and considerations for these padding differences.
+ +

Conversion to normal arrays

+ +

After processing a typed array, it is sometimes useful to convert it back to a normal array in order to benefit from the {{jsxref("Array")}} prototype. This can be done using {{jsxref("Array.from()")}}, or using the following code where Array.from() is unsupported.

+ +
let typedArray = new Uint8Array([1, 2, 3, 4]),
+    normalArray = Array.prototype.slice.call(typedArray);
+normalArray.length === 4;
+normalArray.constructor === Array;
+
+ +

Specifications

+ + + + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git "a/files/bn/web/javascript/\340\246\255\340\246\276\340\246\267\340\246\276\340\246\260_\340\246\260\340\246\277\340\246\270\340\247\213\340\246\260\340\247\215\340\246\270/index.html" "b/files/bn/web/javascript/\340\246\255\340\246\276\340\246\267\340\246\276\340\246\260_\340\246\260\340\246\277\340\246\270\340\247\213\340\246\260\340\247\215\340\246\270/index.html" new file mode 100644 index 0000000000..c539ad7321 --- /dev/null +++ "b/files/bn/web/javascript/\340\246\255\340\246\276\340\246\267\340\246\276\340\246\260_\340\246\260\340\246\277\340\246\270\340\247\213\340\246\260\340\247\215\340\246\270/index.html" @@ -0,0 +1,102 @@ +--- +title: জাভাস্কিপ্ট ভাষার রিসোর্স +slug: Web/JavaScript/ভাষার_রিসোর্স +tags: + - JavaScript + - JavaScript Language Resource + - জাভাস্ক্রিপ্ট +translation_of: Web/JavaScript/Language_Resources +--- +
{{JsSidebar}}
+ +

ECMAScript হচ্ছে এক প্রকার স্ক্রিপ্টিং ভাষা যার ওপর ভিত্তি করে জাভাস্ক্রিপ্ট তৈরি। আন্তর্জাতিক ECMA সংস্থা ECMA স্ক্রিপ্ট এর জন্য ECMA-262 এবং ECMA-402 এই দুইটি মান নির্ধারণ করে দিয়েছে। নিচের ECMAScript স্টান্ডার্ডগুলো অনুমোদিত হয়েছে:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
নামলিঙ্কতারিখবর্ননা
ECMA-262 সংস্করণ ৫.১PDF, HTMLজুন ২০১১ +

ECMAScript ৫.১, জাভাস্ক্রিপ্ট নির্দেশনার সর্বশেষ প্রকাশিত সংস্করণ
+ এই সংস্করণ সম্পূর্ণরূপে আন্তর্জাতিক আইএসও/আইইসি ১৬২৬২:২০১১ এর তৃতীয় সংস্করণ সমর্থিত। এতে ES5 Errata সংশোধন অন্তর্ভূক্ত করা হয়েছে, নতুন কোন বৈশিষ্ট্য অন্তর্ভুক্ত করা হয়নি।

+
CMA-402PDF, HTMLডিসেম্বর ২০১২ECMAScript আন্তর্জাতিকায়ন API
ECMA-357 সংস্করণ ২PDFডিসেম্বর ২০০৫এক্সএমএল (E4X) এর জন্য ECMAScript.
অপ্রচলিত সংস্করণ
ECMA-262PDFজুন ১৯৯৭ECMAScript এর আদি সংস্করণ।
ECMA-262 সংস্করণ ২PDFআগস্ট ১৯৯৮ +

ECMAScript স্ট্যান্ডার্ড এর দ্বিতীয় সংস্করণ; এছাড়াও আইএসও স্ট্যান্ডার্ড ১৬২৬২।

+
ECMA-262 সংস্করণ ৩PDFডিসেম্বর ১৯৯৯ECMAScript প্রমিত তৃতীয় সংস্করণ; জাভাস্ক্রিপ্ট এর ১.৫ এর অনুরূপ।
+ আরো দেখুন errata
ECMA-262 সংস্করণ ৫PDFডিসেম্বর ২০০৯ECMAScript ৫
+ আরো দেখুন ES5 errata এবং ECMAScript ৫ মোজিলা সমর্থন
ECMA-357PDFজুন ২০০৪এক্সএমএল (E4X) এর জন্য ECMAScript
+ আরো দেখুন E4X errata
+ +

ECMAScript এর ইতিহাস সম্পর্কে আরও তথ্যের জন্য উইকিপিডিয়া ECMAScript এন্ট্রি দেখুন।

+ +

ECMAScript ভাষার স্পেসিফিকেশন এর পরবর্তী সংস্করণ, কোড-নাম "হারমনি" এর কাজ এ আপনি অংশগ্রহণ বা শুধু ট্র্যাক করতে পারেন, এবং পাবলিক উইকির মাধ্যমে ECMAScript আন্তর্জাতিকায়ন এপিআই স্পেসিফিকেশন এবং ecmascript.org হতে es-discuss মেইলিং তালিকায় অংশগ্রহণ করতে পারেন।

+ +

বাস্তবায়ন

+ +
    +
  • SpiderMonkey - ফায়ারফক্স এ ব্যবহৃত জাভাস্ক্রিপ্ট ইঞ্জিন;
    • +
  • Rhino - জাভায় লেখা জাভাস্ক্রিপ্ট ইঞ্জিন;
    • +
  • Tamarin - (অ্যাডোবি ® ফ্ল্যাশ ® প্লেয়ার এ ব্যবহৃত) ActionScript ভার্চুয়াল মেশিন;
    • +
  • অন্যান্য বাস্তবায়ন (উইকিপিডিয়া)
    • +
+ +

আরো দেখুন

+ + diff --git a/files/bn/web/reference/index.html b/files/bn/web/reference/index.html new file mode 100644 index 0000000000..6aa3c80ebb --- /dev/null +++ b/files/bn/web/reference/index.html @@ -0,0 +1,46 @@ +--- +title: ওয়েব প্রযুক্তি রেফারেন্স +slug: Web/Reference +tags: + - Landing + - Reference + - Web +translation_of: Web/Reference +--- +

মুক্ত ওয়েব তৈরী হয়েছে বেশ কিছু প্রযুক্তির উপর ভিত্তি করে। নিচে এই সকল প্রযুক্তির নাম এবং বিস্তারিত তথ্য সম্বলিত লিংক দেয়া হল।

+
+
+

মূল ওয়েব প্রযুক্তি

+
+
+ API
+
+ ওয়েব এপিআই এর সাথে সম্পর্কিত সকল ধরনের ইন্টারফেস সম্পর্কিত তথ্যের রেফারেন্স পাওয়া যাবে এখানে। DOM এবং এর সম্পর্কিত সকল এপিআই, এবং ওয়েব কন্টেন্ট এবং অ্যাপ তৈরীর কাজে লাগবে এমন এপিআই গুলো বর্ণক্রম অনুযায়ী সাজানো হয়েছে।
+
+ Web APIs
+
+ A list of the individual APIs and technology suites that make up the overall Web API.
+
+ HTML
+
+ হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ হল ওয়েব পেজের মূল ভাষা, যার মাধ্যমে ওয়েব কন্টেন্টের বর্ণনা এবং নির্ধারণ করা হয়।
+
+ CSS
+
+ ক্যাসকেডিং স্টাইল শিট ওয়েব কন্টেন্টের ডিজাইন তৈরীতে ব্যবহার করা হয়।
+
+ SVG
+
+ স্কেলেবল ভেক্টর গ্রাফিক্স ব্যবহার করে ছবিগুলো বিভিন্ন ভেক্টর এবং অন্যান্য আকার হিসাবে সংরক্ষন করা হয়। এর ফলে ছবির আকার পরিবর্তন করা হলেও ছবির মানের কোনো পরিবর্তন করা হয় না।
+
+ MathML
+
+ ম্যাথ মার্কআপ ল্যাঙ্গুয়েজ ব্যবহার করে জটিল গাণিতিক সূত্র লেখা যায়।
+
+
+
+

অন্যান্য প্রযুক্ত

+

শিঘ্রই যুক্ত করা হবে।

+
+
+

 

diff --git a/files/bn/web/svg/element/index.html b/files/bn/web/svg/element/index.html new file mode 100644 index 0000000000..2d574515bf --- /dev/null +++ b/files/bn/web/svg/element/index.html @@ -0,0 +1,169 @@ +--- +title: SVG element reference +slug: Web/SVG/Element +translation_of: Web/SVG/Element +--- +

« SVG / SVG Attribute reference »

+

SVG এর উপাদানসমূহ

+
+ A +
    +
  • {{SVGElement("a")}}
    • +
  • {{SVGElement("altGlyph")}}
    • +
  • {{SVGElement("altGlyphDef")}}
    • +
  • {{SVGElement("altGlyphItem")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("animateColor")}}
    • +
  • {{SVGElement("animateMotion")}}
    • +
  • {{SVGElement("animateTransform")}}
    • +
+ B C +
    +
  • {{SVGElement("circle")}}
    • +
  • {{SVGElement("clipPath")}}
    • +
  • {{SVGElement("color-profile")}}
    • +
  • {{SVGElement("cursor")}}
    • +
+ D +
    +
  • {{SVGElement("defs")}}
    • +
  • {{SVGElement("desc")}}
    • +
+ E +
    +
  • {{SVGElement("ellipse")}}
    • +
+ F +
    +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feDistantLight")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feFuncA")}}
    • +
  • {{SVGElement("feFuncB")}}
    • +
  • {{SVGElement("feFuncG")}}
    • +
  • {{SVGElement("feFuncR")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMergeNode")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("fePointLight")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feSpotLight")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("font")}}
    • +
  • {{SVGElement("font-face")}}
    • +
  • {{SVGElement("font-face-format")}}
    • +
  • {{SVGElement("font-face-name")}}
    • +
  • {{SVGElement("font-face-src")}}
    • +
  • {{SVGElement("font-face-uri")}}
    • +
  • {{SVGElement("foreignObject")}}
    • +
+ G +
    +
  • {{SVGElement("g")}}
    • +
  • {{SVGElement("glyph")}}
    • +
  • {{SVGElement("glyphRef")}}
    • +
+ H +
    +
  • {{SVGElement("hkern")}}
    • +
+ I +
    +
  • {{SVGElement("image")}}
    • +
+ J K L +
    +
  • {{SVGElement("line")}}
    • +
  • {{SVGElement("linearGradient")}}
    • +
+ M +
    +
  • {{SVGElement("marker")}}
    • +
  • {{SVGElement("mask")}}
    • +
  • {{SVGElement("metadata")}}
    • +
  • {{SVGElement("missing-glyph")}}
    • +
  • {{SVGElement("mpath")}}
    • +
+ N O P +
    +
  • {{SVGElement("path")}}
    • +
  • {{SVGElement("pattern")}}
    • +
  • {{SVGElement("polygon")}}
    • +
  • {{SVGElement("polyline")}}
    • +
+ Q R +
    +
  • {{SVGElement("radialGradient")}}
    • +
  • {{SVGElement("rect")}}
    • +
+ S +
    +
  • {{SVGElement("script")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("stop")}}
    • +
  • {{SVGElement("style")}}
    • +
  • {{SVGElement("svg")}}
    • +
  • {{SVGElement("switch")}}
    • +
  • {{SVGElement("symbol")}}
    • +
+ T +
    +
  • {{SVGElement("text")}}
    • +
  • {{SVGElement("textPath")}}
    • +
  • {{SVGElement("title")}}
    • +
  • {{SVGElement("tref")}}
    • +
  • {{SVGElement("tspan")}}
    • +
+ U +
    +
  • {{SVGElement("use")}}
    • +
+ V — Z +
    +
  • {{SVGElement("view")}}
    • +
  • {{SVGElement("vkern")}}
    • +
+
+

বিভাগসমুহ

+

Animation এর উপাদানসমূহ

+

 

+

{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}

+

প্রাথমিক আকারসমূহ

+

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

+

উপাদানসমূহের ধারক

+

 

+

{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("glyph")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}

+

বর্ণনামূলক উপাদানসমূহ

+

{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}

+

Filter এর প্রাচীন উপাদানসমূহ

+

{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}

+

Font এর উপাদানসমূহ

+

{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}

+

Gradient এর উপাদানসমূহ

+

{{SVGElement("linearGradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}

+

Graphics এর উপাদানসমূহ

+

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}

+

Light source এর উপাদানসমূহ

+

{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}

+

 

+

Shape এর উপাদানসমূহ

+

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

+

কাঠামোগত উপাদানসমূহ

+

{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}

+

Text content এর উপাদানসমূহ

+

{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

+

Text content child এর উপাদানসমূহ

+

{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}} এর উপাদানসমুহ

+

Uncategorized এর উপাদানসমূহ

+

{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}

diff --git a/files/bn/web/svg/index.html b/files/bn/web/svg/index.html new file mode 100644 index 0000000000..491cb1d099 --- /dev/null +++ b/files/bn/web/svg/index.html @@ -0,0 +1,93 @@ +--- +title: SVG +slug: Web/SVG +tags: + - NeedsTranslation + - References + - SVG + - TopicStub +translation_of: Web/SVG +--- +
+ Getting Started
+ This tutorial will help get you started using SVG.
+

Scalable Vector Graphics (SVG) is an XML markup language for describing two-dimensional vector graphics. SVG is essentially to graphics what XHTML is to text.

+

SVG is similar in scope to Adobe's proprietary Flash technology, but what distinguishes SVG from Flash is that it is a W3C recommendation (i.e., a standard) and that it is XML-based as opposed to a closed binary format. It is explicitly designed to work with other W3C standards such as CSS, DOM and SMIL.

+
+
+

Documentation

+
+
+ SVG element reference
+
+ Get details about each SVG element.
+
+ SVG attribute reference
+
+ Get details about each SVG attribute.
+
+ SVG DOM interface reference
+
+ Get details about the whole SVG DOM API.
+
+ Enhance HTML content
+
+ SVG works together with HTML, CSS and JavaScript. Use SVG to enhance a regular HTML page or web application.
+
+ SVG in Mozilla
+
+ Notes and information on how SVG is implemented in Mozilla. + +
+
+

View All...

+

Community

+
    +
  • View Mozilla forums... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}
    • +
+

Tools

+ +
+
+ + +

Animation and interactions

+

Like HTML, SVG has a document model (DOM), events and is accessible from JavaScript. This allows developers to create rich animations and interactive images.

+ +

Mapping, charting, games & 3D experiments

+

While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.

+ +
+
+

 

-- cgit v1.2.3-54-g00ecf