Blog

JavaScript Location অবজেক্ট

JavaScript Location অবজেক্ট – সম্পূর্ণ বাংলা টিউটোরিয়াল

JavaScript Location অবজেক্ট হলো একটি বিল্ট-ইন অবজেক্ট যা window.location এর মাধ্যমে অ্যাক্সেস করা হয়। এটি ব্রাউজারে বর্তমান পেজের URL বা ঠিকানা নিয়ন্ত্রণ করতে ও জানতে ব্যবহৃত হয়।

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

Location অবজেক্টের প্রধান প্রপার্টিগুলো

প্রপার্টি / মেথড বর্ণনা উদাহরণ
href বর্তমান পেজের সম্পূর্ণ URL window.location.href
protocol URL এর প্রোটোকল (যেমন: http:, https:) window.location.protocol
hostname ডোমেইন নাম (যেমন: www.example.com) window.location.hostname
pathname ডোমেইনের পরের পাথ (যেমন: /folder/page.html) window.location.pathname
search URL এর কুয়েরি স্ট্রিং (যেমন: ?id=5&name=abc) window.location.search
hash URL এর হ্যাশ/অ্যাঙ্কর অংশ (যেমন: #section1) window.location.hash
assign() নতুন URL এ রিডাইরেক্ট করে window.location.assign('https://google.com')
replace() নতুন URL এ রিডাইরেক্ট করে, বেক বাটন নষ্ট করে window.location.replace('https://google.com')
reload() বর্তমান পেজ রিফ্রেশ করে window.location.reload()

উদাহরণ সহ ব্যাখ্যা

কোড:

<button onclick="showLocationDetails()">বর্তমান URL বিস্তারিত দেখাও</button>
<div id="locationDetails" style="margin-top:15px; font-weight:bold;"></div>

<script>
function showLocationDetails() {
  let loc = window.location;
  let info = `
    পূর্ণ URL: ${loc.href} <br>
    প্রোটোকল: ${loc.protocol} <br>
    হোস্টনেম: ${loc.hostname} <br>
    পাথনেম: ${loc.pathname} <br>
    কুয়েরি স্ট্রিং: ${loc.search} <br>
    হ্যাশ: ${loc.hash}
  `;
  document.getElementById('locationDetails').innerHTML = info;
}
</script>

ব্যাখ্যা:

  • window.location দিয়ে Location অবজেক্ট পাওয়া যায়।
  • পরে আমরা তার বিভিন্ন প্রপার্টি থেকে URL এর বিস্তারিত অংশ আলাদাভাবে নিচ্ছি।
  • innerHTML দিয়ে UI তে সেটি দেখাচ্ছি।
  • বাটনে ক্লিক করলে পেজের URL এর সব ডিটেইলস দেখা যাবে।

Location অবজেক্ট দিয়ে পেজ রিডাইরেক্ট বা নতুন URL লোড করা

আমরা চাইলে JavaScript দিয়ে সহজেই অন্য URL এ নিয়ে যেতে পারি। এর জন্য ব্যবহার হয় assign() বা সরাসরি href সেট করা।

কোড:

<button onclick="redirectToGoogle()">Google এ যান</button>

<script>
function redirectToGoogle() {
  // পেজ অন্য ঠিকানায় নিয়ে যায়
  window.location.href = "https://www.google.com";
  // অথবা window.location.assign("https://www.google.com");
}
</script>

পেজ রিলোড বা রিফ্রেশ

যখন আপনার প্রয়োজন পেজকে রিলোড করতে, তখন ব্যবহার করবেন window.location.reload()। এটি ব্রাউজারের রিফ্রেশ বোতাম চেপে দেওয়ার মতো কাজ করে।

কোড:

<button onclick="reloadPage()">পেজ রিফ্রেশ করুন</button>

<script>
function reloadPage() {
  window.location.reload();
}
</script>

Location এর হ্যাশ (hash) এর ব্যবহার

URL এর হ্যাশ অংশ সাধারণত পেজের মধ্যে নির্দিষ্ট সেকশন বা এঙ্কর পয়েন্ট নির্দেশ করতে ব্যবহৃত হয়। JavaScript দিয়ে এর মান পড়া বা পরিবর্তন করা যায়।

কোড:

<button onclick="changeHash()">Hash পরিবর্তন করুন</button>

<script>
function changeHash() {
  window.location.hash = "contact-section";
  alert("Hash এখন: " + window.location.hash);
}
</script>

গুরুত্বপূর্ণ টিপস

  • URL থেকে আলাদা অংশ পাওয়ার জন্য যেমন hostname, pathname, protocol, search, hash খুবই উপকারী।
  • রিডাইরেকশন করার সময় assign() এবং replace() ব্যবহারে পার্থক্য বুঝতে হবে – replace করলে back button কাজ করবে না।
  • পেজ রিলোড করানোর জন্য reload() সহজ ও কার্যকর।
  • Hash পরিবর্তন করলে পেজ reload হয় না, যা SPA (Single Page Application) তৈরিতে কাজে লাগে।

Tags: , , , , , , , , , , , , , , , , , ,

Leave a Reply