JavaScript BanglaTutorial-55: Browser Object Model | Location Object
স্বাগতম বাঙালি ওয়েব ডেভেলপারগণ! জাভাস্ক্রিপ্ট টিউটোরিয়াল সিরিজে আপনাদের স্বাগতম। আমরা প্রাকৃতিকভাবে অগ্রসর হচ্ছি, এবং এই পর্বে আমরা ব্রাউজার অবজেক্ট মডেল এবং লোকেশন অবজেক্টে গভীরভাবে পরিচিত হব। এই টিউটোরিয়ালে, আমরা জাভাস্ক্রিপ্টে ব্রাউজার অবজেক্ট মডেল এবং লোকেশন অবজেক্ট ব্যবহারের উপায় নিয়ে আলোচনা করব।
JavaScript BanglaTutorial-55: Browser Object Model | Location Object
ব্রাউজার অবজেক্ট মডেল (Browser Object Model):
ব্রাউজার অবজেক্ট মডেল অথবা বীজিওএম হলো একটি জাভাস্ক্রিপ্ট API যা ওয়েব ব্রাউজারের সাথে সংযুক্ত। এটি ওয়েব পেজের পৃষ্ঠপুট, মেনু, টুলবার, স্থানির্দেশক ইত্যাদির মতো ব্রাউজার ইন্টারফেসে প্রতিনিধিত্ব করে। এই মডেলটি ওয়েব পেজের সম্প্রতি প্রদর্শিত হওয়া ডেটা এবং ব্রাউজারের নেটওয়ার্ক সংযোগের মাধ্যমে জাভাস্ক্রিপ্ট এপ্লিকেশনে প্রবেশ করায়।
ব্রাউজার অবজেক্ট মডেলের মাধ্যমে, আমরা ওয়েব পেজের ব্যাক-এন্ড পরিবর্তন ছাড়াই ফ্রন্ট-এন্ড পরিবর্তন করতে পারি। এটি প্রযুক্তিগতভাবে ইউজার ইন্টারফেসে পরিবর্তন সৃষ্টি করে এবং ব্যবহারকারীকে উপযুক্ত প্রতিক্রিয়া প্রদান করে।
ব্রাউজার অবজেক্ট মডেলের কিছু গুরুত্বপূর্ণ অংশগুলি নিম্নলিখিত:
- ওয়েব পেজ অবস্থান (Window): এটি ওয়েব পেজের মৌখিক পরিবেশ প্রদান করে এবং এটির মাধ্যমে আমরা নতুন ওয়েব পেজ খোলতে পারি।
- ডকুমেন্ট অবজেক্ট (Document): এটি ওয়েব পেজের ডোকুমেন্ট প্রদর্শন এবং পরিবর্তনের মাধ্যমে আমাদের ওয়েব পেজে কাজ করতে সাহায্য করে।
- নেভিগেশন অবজেক্ট (Navigator): এটি ব্রাউজারের নেটওয়ার্ক সংযোগের সম্পর্কিত তথ্য সরবরাহ করে, যা ওয়েব পেজ সার্ভিস এবং ব্যবহারকারীর ডিভাইসের তথ্য প্রদান করে।
- হিস্ট্রি অবজেক্ট (History): এটি ব্রাউজারের হিস্ট্রি সারণিত এবং ব্রাউজারের ফরওয়ার্ড এবং ব্যাকওয়ার্ড ন্যাভিগেশনে সাহায্য করে।
এই টিউটোরিয়ালে, আমরা এই অবজেক্টগুলির ব্যবহার সহ একটি উদাহরণ দ্বারা দেখাব। নীচের কোড দেখুন:
// ওয়েব পেজ অবস্থান অবজেক্ট
console.log(window.innerWidth); // উইন্ডো প্রায়শই উচ্চতা
console.log(window.location.href); // বর্তমান ওয়েব পৃষ্ঠার URL
// ডকুমেন্ট অবজেক্ট
const heading = document.createElement('h1');
heading.textContent = 'আমাদের ওয়েব পেজে স্বাগতম!';
document.body.appendChild(heading);
// নেভিগেশন অবজেক্ট
console.log(navigator.userAgent); // ব্রাউজারের ইউজার এজেন্ট সংক্ষিপ্ত বিবরণ
// হিস্ট্রি অবজেক্ট
console.log(history.length); // ব্রাউজার হিস্ট্রি লেংথJavaScript BanglaTutorial-55: Browser Object Model | Location Object
লোকেশন অবজেক্ট (Location Object):
লোকেশন অবজেক্ট ওয়েব পেজের ঠিকানা বর্ণনা এবং ওয়েব পেজের বর্তমান ঠিকানা পরিবর্তনের জন্য ব্যবহৃত হয়। এই অবজেক্টটি window.location দ্বারা অ্যাক্সেস করা যায়। লোকেশন অবজেক্ট প্রস্তাবিত মেথড এবং প্রোপার্টিগুলি ব্যবহার করে ওয়েব পেজের ঠিকানা পরিবর্তন এবং ম্যানিপুলেশন করা যায়।
লোকেশন অবজেক্ট সাধারণভাবে নিম্নলিখিত প্রোপার্টি সরবরাহ করে:
- href: বর্তমান ওয়েব পৃষ্ঠার ঠিকানা (URL)।
- protocol: ওয়েব পৃষ্ঠার প্রোটোকল (উদাহরণস্বরূপ "http:", "https:", "file:" ইত্যাদি)।
- host: ওয়েব পৃষ্ঠার হোস্ট নাম এবং পোর্ট নম্বর (উদাহরণস্বরূপ "www.example.com:80")।
- hostname: ওয়েব পৃষ্ঠার হোস্ট নাম (উদাহরণস্বরূপ "www.example.com")।
- port: ওয়েব পৃষ্ঠার পোর্ট নম্বর (উদাহরণস্বরূপ 80)।
- pathname: ওয়েব পৃষ্ঠার পাথনেম (উদাহরণস্বরূপ "/blog/post")।
- search: ওয়েব পৃষ্ঠার সার্চ প্যারামিটার (উদাহরণস্বরূপ "?q=javascript")।
- hash: ওয়েব পৃষ্ঠার হ্যাশ (উদাহরণস্বরূপ "#section1")।
নীচের উদাহরণে, আমরা কিছু লোকেশন অবজেক্ট মেথড এবং প্রোপার্টি ব্যবহার করে দেখাব:
// বর্তমান URL প্রদর্শন
console.log(window.location.href);
// প্রোটোকল পরিবর্তন
window.location.protocol = 'https:';
// নতুন পেজ ঠিকানা সেট করুন
window.location.href = 'https://www.example.com';
// সার্চ প্যারামিটার যোগ করুন
window.location.search = '?q=javascript';
// হ্যাশ পরিবর্তন
window.location.hash = '#section2';এই টিউটোরিয়ালে, আমরা ব্রাউজার অবজেক্ট মডেল এবং লোকেশন অবজেক্টের ব্যবহার সহ জাভাস্ক্রিপ্ট প্রোগ্রামিং এর মাধ্যমে ওয়েব পেজের নেভিগেশন এবং ম্যানিপুলেশন করার প্রস্তাবনা দেয়া হয়েছে। আপনি এই অবজেক্টগুলি ব্যবহার করে আপনার ওয়েব ডেভেলপমেন্ট প্রকল্পগুলি আরও প্রাকৃতিক এবং ব্যবহারযোগ্য করতে পারেন।
JavaScript BanglaTutorial-55: Browser Object Model | Location Object
Frequently Asked Questions (FAQs)
উত্তর: জাভাস্ক্রিপ্ট একটি ওয়েব ডেভেলপমেন্ট ল্যাঙ্গুয়েজ যা ওয়েব পেজে ইন্টারএকটিভিটি যোগ করার জন্য ব্যবহার হয়।
উত্তর: ভ্যারিয়েবল হলো একটি ডেটা স্টোর করার জন্য ব্যবহৃত নাম।
উত্তর: জাভাস্ক্রিপ্টের বিভিন্ন ফ্রেমওয়ার্ক রয়েছে, যেগুলির মধ্যে React, Angular এবং Vue.js সর্বশ্রেষ্ঠ প্রস্তাবনা করা হয়।
উত্তর: ফাংশন তৈরি করার জন্য "function" কিওয়ার্ড ব্যবহার করতে হয়, যেমন:
function গুণ(x, y) { return x * y;}
উত্তর: কন্ডিশনাল স্টেটমেন্ট ব্যবহার করার জন্য "if", "else if" এবং "else" কিওয়ার্ড ব্যবহার করা হয়, উদাহরণস্বরূপ:
if (শর্ত) { // যদি শর্ত সত্য হয়} else if (অন্য শর্ত) { // যদি অন্য শর্ত সত্য হয়} else { // যদি কোনও শর্ত সত্য না হয়}
উত্তর: লুপ ব্যবহার করার জন্য "for", "while" এবং "do-while" কিওয়ার্ড ব্যবহার করা হয়।
উত্তর: অ্যাসিঙ্যুমেন্ট অপারেটর ব্যবহার করে একটি মানকে একটি ভ্যারিয়েবলে অ্যাসাইন করা যায়, উদাহরণস্বরূপ: x = 5;.
উত্তর: এরর হ্যান্ডলিং ব্যবহারকারীকে জাভাস্ক্রিপ্ট এরর সম্পর্কিত তথ্য প্রদান করে এবং এরর সমস্যা সমাধানে সাহায্য করে।
উত্তর: অ্যারে তৈরি করার জন্য স্কুয়েয়ার ব্র্যাকেট [] ব্যবহার করতে হয়, উদাহরণস্বরূপ: let numbers = [1, 2, 3, 4, 5];.
উত্তর: ফাংশন ব্যবহার করা হয় কোড রিউজ করার জন্য এবং কোড সংগঠনে সাহায্য করার জন্য, যাতে একই কোডটি বারবার লিখতে না হয়।
