ICT & others Information

JavaScript_part17_জাভাস্ক্রিপ্ট ব্রাউজার অবজেক্ট ও বিভিন্ন রকমের অবজেক্ট এর ব্যবহার

March 05, 2020 Sharmin Khan Ishita

জাভাস্ক্রিপ্ট ব্রাউজার অবজেক্ট

সকল আধুনিক ব্রাউজারগুলো জাভাস্ক্রিপ্ট সাপোর্ট করে। অনেক সময় কিছু কিছু পুরাতন ব্রাউজার জাভাস্ক্রিপ্ট সাপোর্ট নাও করতে পারে। তবে যেহেতু এখনকার ব্রাউজারগুলো অনেক টেকনোলজিক্যালি আধুনিক তাই আমরা বলতে পারি আপনার ব্রাউজার জাভাস্ক্রপ্ট সাপোর্ট করবেই। তবে এটি এনাবেল ও ডিজাবেল করা যায়।

তবে এই অধ্যায়ের মুল বিষয় হল ভিজিটর কোন ব্রাউজার কোন ভার্সন ব্যবহার করছে , কুকি এসব নিয়ে আলোচনা করব। কারন আপনি যদি ইজারের ব্রাউজারের তথ্য বিশেস্নষন করে তাকে কোন অতিরিক্ত সুবিধা প্রদান করতে চান তবে ব্রাউজার সম্পর্কিত তথ্য অবশ্যই জানতে হবে। আসলে ব্রাউজার অবজেক্ট মডেলের (ইঙগ) সাধারনত কোন অফিসিয়াল স্ট্যান্ডার্ড নেই তবে সকল ব্রাউজার প্রায় একই মেথডে ডেভেলপ করা বলে এগুলো জাভাস্ক্রিপ্টের প্রায় সব কিছু সাপোর্ট করে।

ব্রাউজার অবজেক্টকে সাধারনত নিম্নোক্ত ভাগে ভাগ করা যায়।

জাভাস্ক্রিপ্ট Window অবজেক্ট
জাভাস্ক্রিপ্ট Navigator অবজেক্ট
জাভাস্ক্রিপ্ট Screen অবজেক্ট
জাভাস্ক্রিপ্ট History অবজেক্ট
জাভাস্ক্রিপ্ট Location অবজেক্ট

জাভাস্ক্রিপ্ট Cookies অবজেক্ট

জাভাস্ক্রিপ্ট Window অবজেক্ট

উইন্ডো অবজেক্ট সকল ব্রাউজার সাপোর্ট করে এটি মুলত ব্রাউজারের উইন্ডোকে বুঝায়। সকল গ্লোবাল জাভস্ক্রিপ্টের অবজেক্ট, ফাংশন এবং ভেরিয়েবলগুলো উইন্ডো অবজেক্ট-এর মেম্বার।

· গ্লোবাল ভেরিয়েবলগুলো উইন্ডো অবজেক্ট-এর প্রোপার্টিজ

· গ্লোবাল ফাংশনগুলো উইন্ডো অবজেক্ট-এর মেথড

· এমনকি ডকুমেন্ট বা অবজেক্ট (HTML-DOM) গুলো উইন্ডো অবজেক্ট-এর একটি প্রোপার্টি

যেমন window.document.getElementById("header");

এবং

document.getElementById("header"); একই কথা।

Window Size

ব্রাউজার উইন্ডো-এর সাইজ নির্নয় করতে তিনটি প্রোপার্টি ব্যাবহার করা হয়। ব্রাউজার ভিউপোর্ট, টুলবার, স্ক্রলবার

For Internet Explorer, Chrome, Firefox, Opera, and Safari:

window.innerHeight - ব্রাউজার উইডো-এর ইনার উচ্চতা নির্নয় করে

window.innerWidth - ব্রাউজার উইডো-এর ইনার প্রস্থ নির্নয় করে

For Internet Explorer 8, 7, 6, 5:

document.documentElement.clientHeight

document.documentElement.clientWidth

অথবা

document.body.clientHeight

document.body.clientWidth

চলুন এবার নিচের প্রোগ্রামটি প্রাক্টিস করা যাক

প্রোগ্রাম ১১০ : কেস ইনসেন্সিটিভ প্যাটার্ন ম্যাচ

১. আপনার এডিটরে নিম্নোক্ত কোডগুলো লিখুন।এবার program_0110.html নামে ফাইলটটিকে সেভ করুন।

<!DOCTYPE html>

<html>

<body>

var w = window.innerWidth

//document.documentElement.clientWidth

//document.body.clientWidth;

var h = window.innerHeight

//document.documentElement.clientHeight

//document.body.clientHeight;

x = document.getElementById("para");

x.innerHTML = "Browser inner window width: " + w + ", heigth: " + h + "."

</script>

</body>

</html>

ফলাফল : এবার আপনার ব্রাউজারে program_0110.html ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল দেখতে পাবেন।

উইন্ডো ওপেন বা বন্ধ কিনা

১. আপনার এডিটরে নিম্নোক্ত কোডগুলো লিখুন।এবার program_0111.html নামে ফাইলটটিকে সেভ করুন।

<!DOCTYPE html>

<html>

<head>

<title>Window Close Example</title>

var yourWindow;

function openWin() {

yourWindow = window.open("", "", "width=500,height=300");

}

function closeWin() {

if (yourWindow) {

yourWindow.close();

}

function checkWin() {

if (!yourWindow) {

document.getElementById("msg").innerHTML = "'yourWindow' has never been opened!";

}

else {

if (yourWindow.closed) {

document.getElementById("msg").innerHTML = "'yourWindow's closed!";

}

else {

document.getElementById("msg").innerHTML = "'yourWindow' not closed!";

}

</script>

</head>

<body>

</body>

</html>

ফলাফল : এবার আপনার ব্রাউজারে program_0111.html ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল দেখতে পাবেন।

বাটন তিনটিতে একে একে ক্লিক করে ফলাফল টেষ্ট করুন এবং প্রোগ্রামটি ভালভাবে বোঝার চেষ্টা করুন।

১. আপনার এডিটরে নিম্নোক্ত কোডগুলো লিখুন।এবার program_0112.html নামে ফাইলটটিকে সেভ করুন।

<html>

<body>

for (var i = 0; i < frames.length; i++) {

frames[i].location = "http://novacomputerbd.com"

}

</script>

</body>

</html>

ফলাফল : এবার আপনার ব্রাউজারে program_0112.html ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল দেখতে পাবেন।

১। আপনার এডিটরে নিম্নোক্ত কোডগুলো লিখুন।এবার program_0113.html নামে ফাইলটটিকে সেভ করুন।

<!DOCTYPE html>

<html>

<head>

var yourWindow;

function openWin() {

yourWindow = window.open('', 'Nova Computer', 'width=200,height=100');

yourWindow.document.write("<p>This window's name is: " + yourWindow.name + "</p>");

}

</script>

</head>

<body>

</body>

</html>

ফলাফল : এবার আপনার ব্রাউজারে program_0113.html ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত

ফলাফল দেখতে পাবেন।

১. আপনার এডিটরে নিম্নোক্ত কোডগুলো লিখুন।এবার program_0114.html নামে ফাইলটটিকে সেভ করুন।

<!DOCTYPE html>

<html>

<head>

function openWin() {

yourWindow = window.open('', '', 'width=200,height=100');

yourWindow.document.write("<p>This is 'Child Window'</p>");

yourWindow.focus();

yourWindow.opener.document.write("<p>This is the Parent window!</p>");

}

</script>

</head>

<body>

</body>

</html>

ফলাফল : এবার আপনার ব্রাউজারে program_0114.html ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল দেখতে পাবেন।

১. আপনার এডিটরে নিম্নোক্ত কোডগুলো লিখুন।এবার program_0115.html নামে ফাইলটটিকে সেভ করুন।

<!DOCTYPE html>

<html>

<body>

<p id="demo">Window's height and width (including toolbars and scrollbars).</p>

function myFunction() {

var w = window.outerWidth;

var h = window.outerHeight;

x = document.getElementById("demo");

x.innerHTML = "Width: " + w + " Heigth: " + h;

} </script> </body> </html>

১. আপনার এডিটরে নিম্নোক্ত কোডগুলো লিখুন।এবার program_0116.html নামে ফাইলটটিকে সেভ করুন।

<!DOCTYPE html>

<html>

<head>

function scrollWindow() {

window.scrollBy(100, 100)

alert("pageXOffset: " + window.pageXOffset + ", pageYOffset: " + window.pageYOffset)

}

</script>

</head>

<body>