3.1.  উইন্ডো এবং ডকুমেন্ট অবজেক্ট

উইন্ডো অবজেক্ট

Window Object একটি ব্রাউজারে একটি খোলা উইন্ডো উপস্থাপন করে। যদি একটি ডকুমেন্ট এ ফ্রেম থাকে (<iframe> ট্যাগ), ব্রাউজার HTML ডকুমেন্ট এর জন্য একটি উইন্ডো অবজেক্ট এবং প্রতিটি ফ্রেমের জন্য একটি অতিরিক্ত উইন্ডো অবজেক্ট তৈরি করে।

উইন্ডো অবজেক্ট বৈশিষ্ট্য

Property
Description
closed উইন্ডো বন্ধ হলে boolean true return করে।
console উইন্ডোটির console অবজেক্ট return করে।
document উইন্ডোটির document অবজেক্ট return করে।
frameElement যে ফ্রেমে উইন্ডোটি চলে সে frame টি return করে।
frames উইন্ডোতে চলমান সমস্ত Window Object return করে।
history উইন্ডোটির history অবজেক্ট return করে।
innerHeight স্ক্রলবার সহ উইন্ডোর content area (ভিউপোর্ট) উচ্চতা প্রদান করে
innerWidth স্ক্রলবার সহ উইন্ডোর content area (ভিউপোর্ট) প্রস্থ প্রদান করে
length বর্তমান উইন্ডোতে <iframe> উপাদানের সংখ্যা প্রদান করে
localStorage একটি ওয়েব ব্রাউজারে Key/Value pair সংরক্ষণ করার অনুমতি দেয়। মেয়াদ শেষ হওয়ার তারিখ ছাড়াই ডেটা সংরক্ষণ করে
location উইন্ডোর জন্য অবস্থান object প্রদান করে।
name একটি উইন্ডোর নাম Set বা return করে
navigator উইন্ডোটির navigator অবজেক্ট return করে।
opener উইন্ডোটি যে উইন্ডোটি তৈরি করেছে তার একটি reference প্রদান করে
outerHeight টুলবার/স্ক্রলবার সহ ব্রাউজার উইন্ডোর উচ্চতা প্রদান করে
outerWidth টুলবার/স্ক্রলবার সহ ব্রাউজার উইন্ডোর প্রস্থ প্রদান করে
pageXOffset উইন্ডোর উপরের বাম কোণ থেকে বর্তমান document টি (অনুভূমিকভাবে) স্ক্রোল করা পিক্সেলগুলি ফিরিয়ে দেয়
pageYOffset উইন্ডোর উপরের বাম কোণ থেকে বর্তমান document টি (উল্লম্বভাবে) স্ক্রোল করা পিক্সেলগুলি ফিরিয়ে দেয়
screen উইন্ডোর জন্য স্ক্রীন object প্রদান করে।
screenLeft Screen এর সাপেক্ষে উইন্ডোর অনুভূমিক স্থানাঙ্ক প্রদান করে
screenTop Screen এর সাপেক্ষে উইন্ডোর উল্লম্ব স্থানাঙ্ক প্রদান করে
screenX Screen এর সাপেক্ষে উইন্ডোর অনুভূমিক স্থানাঙ্ক প্রদান করে
screenY Screen এর সাপেক্ষে উইন্ডোর উল্লম্ব স্থানাঙ্ক প্রদান করে
sessionStorage একটি ওয়েব ব্রাউজারে Key/Value pair সংরক্ষণ করার অনুমতি দেয়। এক session এর জন্য ডেটা সঞ্চয় করে
scrollX pageXOffset এর একটি উপনাম
scrollY pageYOffset এর একটি উপনাম
self বর্তমান window return করে
status শীর্ষস্থানীয় browser window Return করে।
top Return করে।

 

ডকুমেন্ট অবজেক্ট

HTML DOM ডকুমেন্ট অবজেক্ট হল আপনার ওয়েব পেজের অন্য সব অবজেক্টের মালিক। document object আপনার ওয়েব পৃষ্ঠা প্রতিনিধিত্ব করে। আপনি যদি একটি এইচটিএমএল পৃষ্ঠার কোনো উপাদান অ্যাক্সেস করতে চান, আপনি সর্বদা document object দিয়ে অ্যাক্সেস শুরু করুন।

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

ডকুমেন্ট অবজেক্ট মডেল (DOM) ওয়েব পৃষ্ঠাগুলিকে স্ক্রিপ্ট বা প্রোগ্রামিং ভাষার সাথে সংযুক্ত করে একটি document গঠন উপস্থাপন করে – যেমন HTML একটি ওয়েব পৃষ্ঠাকে প্রদর্শন করে – মেমরিতে। সাধারণত এটি জাভাস্ক্রিপ্টকে বোঝায়, যদিও HTML, SVG, বা XML documents গুলি অবজেক্ট হিসেবে মডেলিং করা মূল জাভাস্ক্রিপ্ট ভাষার অংশ নয়।

Document 3.1. উইন্ডো এবং ডকুমেন্ট অবজেক্ট

 

DOM একটি লজিক্যাল ট্রি সহ একটি document উপস্থাপন করে। ট্রি প্রতিটি শাখা একটি নোডে শেষ হয় এবং প্রতিটি নোডে object থাকে। DOM methods গুলি ট্রিতে প্রোগ্রাম্যাটিক অ্যাক্সেসের অনুমতি দেয়। তার সাথে, আপনি document এর গঠন, শৈলী বা বিষয়বস্তু পরিবর্তন করতে পারেন।

নোডের সাথে ইভেন্ট হ্যান্ডলারও সংযুক্ত থাকতে পারে। একবার একটি ইভেন্ট ট্রিগার হয়ে গেলে, ইভেন্ট হ্যান্ডলাররা কার্যকর হয়।

document.addEventListener(type, listener, options);

const element = document.getElementById("element_name");
element.addEventListener("click", myFunction);
function myFunction() {
  console.log("Hello World");
}

DOM কী এবং এটি কীভাবে document উপস্থাপন করে সে সম্পর্কে আরও জানতে, আমাদের নিবন্ধটি দেখুন …….

মেথড বর্ণনা
document.getElementById(id) id দ্বারা একটি উপাদান খোজে
document.getElementsByTagName(name) Tag name দ্বারা একাধিক উপাদান খোজে
document.getElementsByClassname(name) Class name দ্বারা একাধিক উপাদান খোজে
উদাহরন
  • alert(): ok button সহ message সম্বলিত alert box প্রদর্শন করে।
    <script type="text/javascript">
        function alertMethod() {
            alert("Hello Alert Box");
        }
    </script>
    <input type="button" value="alert" onclick="alertMethod()" />

 

  • confirm(): ok এবং cancel button সহ message সম্বলিত confirm dialog box প্রদর্শন করে।
    <script type="text/javascript">
        function confirmMethod() {
            var conf = confirm("Are u sure?");
            if (conf == true) {
                alert("ok");
            } else {
                alert("cancel");
            }
        }
    </script>
    <input type="button" value="delete record" onclick="confirmMethod()" />

     

  • prompt(): ব্যবহারকারীর কাছ থেকে ইনপুট পেতে একটি ডায়ালগ বক্স প্রদর্শন করে।
    <script type="text/javascript">
        function promptMethod() {
            var name = prompt("Who are you?");
            alert("I am " + name);
        }
    </script>
    <input type="button" value="click" onclick="promptMethod()" />

     

  • open(): নতুন উইন্ডো খোলে।
    <script type="text/javascript">
        function openMethod() {
        open("https://www.vivasoftltd.com/");
        }
    </script>
    <input type="button" value="Open Vivasoft" onclick="openMethod()" />

     

  • setTimeout(): নির্দিষ্ট সময়ের পরে কাজ করে যেমন calling function, evaluating expressions etc
    <script type="text/javascript">
        function setTimeoutMethod() {
            setTimeout(function () {
                alert("Welcome to JS after 2 seconds");
            }, 2000);
        }
    </script>
    <input type="button" value="click" onclick="setTimeoutMethod()" />

     

এসো নিজে করি
  • টুলবার/স্ক্রলবার সহ ব্রাউজার উইন্ডোর উচ্চতা এবং প্রস্থ প্রদর্শন করুন?
  • উইন্ডোর জন্য location, host, hostname, pathname, protocol objects খুঁজে বের করুন।
  • একটি নতুন উইন্ডো খুলুন এবং উইথ ও হাইট রিসাজ করুন।
  • বর্তমান উইন্ডোর contents Print করুন।
  • পসিশন ৫০০ পর্যন্ত ডকুমেন্টটি Scroll করান।