Skip to content

Latest commit

 

History

History
113 lines (71 loc) · 12.6 KB

article.md

File metadata and controls

113 lines (71 loc) · 12.6 KB

ব্রাউজার এনভায়রনমেন্ট, স্পেসিপিকেশন

শুরুতে জাভাস্ক্রিপ্ট তৈরি করা হয়েছিল ওয়েব ব্রাউজারের জন্য। তবে বর্তমানে এটি বিভিন্ন প্লাটফর্মে ব্যবহার করা হচ্ছে।

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

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

এখানে ওয়েব ব্রাউজারের জন্য জাভাস্ক্রিপ্টের বিল্ট-ইন বিভিন্ন অবজেক্ট সমূহ দেখুন:

এখানের "root" অবজেক্টটিকে বলা হয় window। এটির দুটি বৈশিষ্ট আছে:

  1. প্রথমত, এটি একটি গ্লোবাল অবজেক্ট, এই অধ্যায়ে বিস্তারিত জানতে পারবেন info:global-object।
  2. দ্বিতীয়ত, এটি "browser window" কে রিপ্রেজেন্ট করে এবং ব্রাউজারকে কন্ট্রোল করার বিভিন্ন মেথড প্রদান করে।

যেমন, এখানে আমরা এটিকে গ্লোবাল অবজেক্ট হিসেবে ব্যবহার করেছি:

function sayHi() {
  alert("Hello");
}

// গ্লোবাল ফাংশনসমূহ গ্লোবাল অবজেক্ট এর মেথড:
window.sayHi();

এখানে আমরা এটিকে "browser window" হিসেবে ব্যবহার করছি, window এর height দেখতে:

alert(window.innerHeight); // inner window height

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

DOM (Document Object Model)

ডকুমেন্ট অবজেক্ট মডেল (Document Object Model), বা সংক্ষেপে DOM, পেজের সকল কন্টেন্টকে অবজেক্ট হিসেবে দেখায় যা পরিবর্তন করা যায়।

document অবজেক্ট হল পেজের প্রপার্টি এবং মেথড সমূহের অ্যাক্সেসের "entry point"। আমরা এর সাহায্যে পেজের বিভিন্ন প্রপার্টি মোডিফাই বা সংযুক্ত করতে পারি।

যেমন:

// ব্যাকগ্রাউন্ড কালার পরিবর্তন
document.body.style.background = "red";

// ১ সেকন্ড পর পূর্বের অবস্থা
setTimeout(() => document.body.style.background = "", 1000);

এখানে শুধুমাত্র document.body.style ব্যবহার করেছি, কিন্তু এছাড়াও আরো অনেক প্রপার্টি এবং মেথড আছে। বিস্তারিত জানতে দেখুন: DOM Living Standard.

নন ব্রাউজার প্লার্টফর্ম সমূহেও DOM ব্যবহার করা যায়। DOM স্পেসিপিকেশনে অবজেক্টের স্ট্রাকচার এবং এর ম্যানিপুলেশন নিয়ে বিস্তারিত আলোচনা করা হয়। তবে ব্রাউজার ব্যতীত অন্য প্লাটফর্মের জন্যও DOM সাপোর্ট করে।

যেমন, সার্ভার সাইড স্ক্রিপ্ট HTML পেজসমুহকে ডাউনলোড করে এবং এর সাহায্যে DOM কে প্রসেস করে। তবে এরা স্পেসিপিকেশনের শুধুমাত্র কিছু প্রপার্টি বা মেথড সমর্থন করে।

এছাড়াও CSS রুলস এবং স্ট্যাইলশীট এর আলাদা স্পেসিপিকেশন আছে [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/)। এখানে বর্ণনা করা হয়েছে কিভাবে CSS প্রপার্টি সমূহকে অবজেক্ট হিসেবে দেখানো হয়, এবং এদের অ্যাক্সেস করা যায়।

 পেজের বিভিন্ন স্ট্যাইল পরিবর্তনের জন্য একসাথে CSSOM এবং DOM কে ব্যবহার করা হয়। তবে বাস্তবিক ক্ষেত্রে CSSOM কে আমরা খুব কম ব্যবহার করি, কেননা জাভাস্ক্রিপ্টে আমরা সাধারণত স্ট্যাইল পরিবর্তনের জন্য CSS ক্লাস (ADD/REMOVE) ব্যবহার করি, খুব বেশি CSS রুলস পরিবর্তন করি না, তবে এটি চাইলে করা সম্ভব।

BOM (Browser Object Model)

ব্রাউজার অবজেক্ট মডেল (Browser Object Model) বা BOM এর মাধ্যমে document অবজেক্ট ছাড়া হোস্ট এনভায়রনমেন্টের অন্যান্য প্রপার্টি এবং মেথড নিয়ে কাজ করা যায়।

যেমন:

  • navigator অবজেক্ট এর সাহায্যে ব্রাউজার এবং অপারেটিং সিস্টেমের বিভিন্ন তথ্য জানা যায়। এর বিভিন্ন প্রপার্টি আছে, কিন্তু সবচেয়ে দুটি ্বহুল ব্যবহৃত প্রপার্টি হল: navigator.userAgent -- ব্রাউজার সম্পর্কে জানতে, এবং navigator.platform -- অপারেটিং সিস্টেম সম্পর্কে জানতে(যেমন Windows/Linux/Mac ইত্যাদি)।
  • location অবজেক্ট এর সাহায্যে পেজের URL জানা যায় এবং নতুন URL এ রিডিরেক্ট করা যায়।

এখানে location অবজেক্ট এর ব্যবহার দেখুন:

alert(location.href); // পেজের URL
if (confirm("Go to Wikipedia?")) {
  location.href = "https://wikipedia.org"; // নতুন URL এ রিডিরেক্ট
}

এছাড়াও alert/confirm/prompt এরা BOM এর মেথড: এরা সরাসরি document এর সাথে সম্পর্কিত না, তবে এদের সাহায্যে ইউজার ব্রাউজারের সাথে সম্পর্ক স্থাপন করে।

BOM হল [HTML specification](https://html.spec.whatwg.org) এর একটি অংশ।

হ্যাঁ, আপনি সঠিক শুনছেন। HTML স্পেসিপিকেশন্স <https://html.spec.whatwg.org> শুধুমাত্র "HTML language" (tags, attributes) এর মধ্যে সীমাবদ্ধ নয়, এছাড়াও অবজেক্ট, মেথড এবং DOM এর বিভিন্ন অংশ নিয়ে আলোচনা করা হয়। এছাড়াও আরো বিস্তারিত জানতে <https://spec.whatwg.org>।

সারাংশ

এখানে আমরা জেনেছি:

DOM স্পেসিপিকেশন : ডকুমেন্ট স্ট্রাকচার, ম্যানিপুলেশন এবং ইভেন্ট সম্পর্কে জানতে, দেখুন https://dom.spec.whatwg.org।

CSSOM স্পেসিপিকেশন : স্ট্যাইল শীট এবং স্ট্যাইল রুল, ম্যানিপুলেশন এবং ডকুমেন্টের সাথে এদের বাইন্ডিং জানতে, দেখুন https://www.w3.org/TR/cssom-1/।

HTML স্পেসিপিকেশন : HTML ল্যাংগুয়েজ (যেমন ট্যাগ) এবং BOM (browser object model) -- বিভিন্ন ব্রাউজার ফাংশন: setTimeout, alert, location ইত্যাদি সম্পর্কে বিস্তারিত জানতে, দেখুন https://html.spec.whatwg.org। এটি DOM স্পেসিপিকেশন সমূহকেও নেয় এবং বিভিন্ন প্রপার্টি এবং মেথডকে এক্সট্যান্ড করে।

এছাড়াও, আরো কিছু ক্লাস সম্পর্কে এখানে আলোচনা হয়েছে https://spec.whatwg.org/।

দয়া করে মনে রাখুন, উপরে বর্ণিত অনেক কিছু আছে শিখার, সব কিছু এখানে বিস্তারিত আলোচনা বা মনে রাখা প্রায় অসম্ভব।

এছাড়াও আপনার কোন মেথড বা প্রপার্টি সম্পর্কে জানতে হলে মোজিলা ম্যানুয়ালে https://developer.mozilla.org/en-US/search দেখতে পারেন, কিন্তু স্পেসিফিকেশন রিসোর্স থেকে জানতে পারলে আপনার মৌলিক জ্ঞান আরো দৃঢ হবে, যদিও বা এটি পড়া কিছুটা জটিল এবং সময় সাপেক্ষ।

এছাড়াও কোন ব্যাপারে বিস্তারিত জানতে সার্চ ইঞ্জিনে সার্চ এর সময় এভাবে সার্চ করুন "WHATWG [term]" অথবা "MDN [term]", যেমন https://google.com?q=whatwg+localstorage, https://google.com?q=mdn+localstorage।

এখন আমরা পরবর্তী অধ্যায় গুলোতে ডম সম্পর্কে আরো বিস্তারিত জানব, এবং UI এ বিভিন্ন ধরণের পরীক্ষা নিরীক্ষা চালাব।