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 প্রদান করে।
screenLeftScreen এর সাপেক্ষে উইন্ডোর অনুভূমিক স্থানাঙ্ক প্রদান করে
screenTopScreen এর সাপেক্ষে উইন্ডোর উল্লম্ব স্থানাঙ্ক প্রদান করে
screenXScreen এর সাপেক্ষে উইন্ডোর অনুভূমিক স্থানাঙ্ক প্রদান করে
screenYScreen এর সাপেক্ষে উইন্ডোর উল্লম্ব স্থানাঙ্ক প্রদান করে
sessionStorageএকটি ওয়েব ব্রাউজারে Key/Value pair সংরক্ষণ করার অনুমতি দেয়। এক session এর জন্য ডেটা সঞ্চয় করে
scrollXpageXOffset এর একটি উপনাম
scrollYpageYOffset এর একটি উপনাম
selfবর্তমান window return করে
statusশীর্ষস্থানীয় browser window Return করে।
topReturn করে।

 

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

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 করান।