JavaScript_part17_জাভাস্ক্রিপ্ট ব্রাউজার অবজেক্ট ও বিভিন্ন রকমের অবজেক্ট এর ব্যবহার
জাভাস্ক্রিপ্ট ব্রাউজার অবজেক্ট
সকল আধুনিক ব্রাউজারগুলো জাভাস্ক্রিপ্ট সাপোর্ট করে। অনেক সময় কিছু কিছু
পুরাতন ব্রাউজার জাভাস্ক্রিপ্ট সাপোর্ট নাও করতে পারে। তবে যেহেতু এখনকার
ব্রাউজারগুলো অনেক টেকনোলজিক্যালি আধুনিক তাই আমরা বলতে পারি আপনার ব্রাউজার
জাভাস্ক্রপ্ট সাপোর্ট করবেই। তবে এটি এনাবেল ও ডিজাবেল করা যায়।
তবে এই অধ্যায়ের মুল বিষয় হল ভিজিটর কোন ব্রাউজার কোন ভার্সন ব্যবহার করছে
, কুকি এসব নিয়ে আলোচনা করব। কারন আপনি
যদি ইজারের ব্রাউজারের তথ্য বিশেস্নষন করে তাকে কোন অতিরিক্ত সুবিধা প্রদান করতে
চান তবে ব্রাউজার সম্পর্কিত তথ্য অবশ্যই জানতে হবে। আসলে ব্রাউজার অবজেক্ট মডেলের
(ইঙগ) সাধারনত কোন অফিসিয়াল স্ট্যান্ডার্ড নেই তবে সকল ব্রাউজার প্রায় একই মেথডে
ডেভেলপ করা বলে এগুলো জাভাস্ক্রিপ্টের প্রায় সব কিছু সাপোর্ট করে।
ব্রাউজার অবজেক্টকে সাধারনত নিম্নোক্ত ভাগে ভাগ করা যায়।
জাভাস্ক্রিপ্ট Window অবজেক্ট
জাভাস্ক্রিপ্ট Navigator অবজেক্ট
জাভাস্ক্রিপ্ট Screen অবজেক্ট
জাভাস্ক্রিপ্ট History অবজেক্ট
জাভাস্ক্রিপ্ট Location অবজেক্ট
জাভাস্ক্রিপ্ট 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>
<p
id="para"></p>
<script
type="text/javascript">
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>
<script type="text/javascript">
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>
<input type="button" value="Open
'yourWindow'" onclick="openWin()" />
<input type="button" value="Close
'yourWindow'" onclick="closeWin()" />
<br><br>
<input type="button" value="Has 'yourWindow'
been closed?" onclick="checkWin()" />
<br><br>
<div id="msg"></div>
</body>
</html>
ফলাফল : এবার আপনার ব্রাউজারে program_0111.html
ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল
দেখতে পাবেন।
বাটন তিনটিতে একে একে ক্লিক করে ফলাফল টেষ্ট করুন এবং প্রোগ্রামটি ভালভাবে
বোঝার চেষ্টা করুন।
১. আপনার
এডিটরে নিম্নোক্ত কোডগুলো লিখুন।এবার program_0112.html নামে ফাইলটটিকে সেভ করুন।
<html>
<body>
<iframe
src="http://novacomputerbd.com"></iframe>
<iframe src="http://google.com"></iframe>
<iframe src="http://yahoo.com"></iframe>
<script>
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>
<script>
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>
<input type="button" value="Open"
onclick="openWin()" />
</body>
</html>
ফলাফল : এবার আপনার ব্রাউজারে program_0113.html
ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত
ফলাফল দেখতে পাবেন।
১. আপনার
এডিটরে নিম্নোক্ত কোডগুলো লিখুন।এবার program_0114.html নামে ফাইলটটিকে সেভ করুন।
<!DOCTYPE html>
<html>
<head>
<script>
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>
<input type="button" value="Open" onclick="openWin()"
/>
</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>
<button onclick="myFunction()">OK</button>
<script>
function myFunction()
{
var w =
window.outerWidth;
var h =
window.outerHeight;
x = document.getElementById("demo");
x.innerHTML =
"Width: " + w + " Heigth: " + h;
} </script> </body>
</html>
ফলাফল : এবার আপনার ব্রাউজারে program_0114.html
ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল
দেখতে পাবেন।
১. আপনার
এডিটরে নিম্নোক্ত কোডগুলো লিখুন।এবার program_0116.html নামে ফাইলটটিকে সেভ করুন।
<!DOCTYPE html>
<html>
<head>
<script>
function
scrollWindow() {
window.scrollBy(100, 100)
alert("pageXOffset: " + window.pageXOffset + ",
pageYOffset: " + window.pageYOffset)
}
</script>
</head>
<body>
<input type="button"
onclick="scrollWindow()" value="Nova Computer" />
<p>Nova Computer Nova Computer Nova Computer Nova Computer
Nova Computer Nova Computer Nova Computer Nova Computer</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>Nova Computer Nova Computer Nova Computer Nova Computer
Nova Computer Nova Computer Nova Computer Nova Computer</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>Nova Computer Nova Computer Nova Computer Nova Computer
Nova Computer Nova Computer Nova Computer Nova Computer</p>
<br />
<p>Nova Computer Nova Computer Nova Computer Nova Computer
Nova Computer Nova Computer Nova Computer Nova Computer</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>Nova Computer Nova Computer Nova
Computer Nova Computer Nova Computer Nova Computer Nova Computer Nova Computer
</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>Nova Computer Nova Computer Nova Computer Nova Computer
Nova Computer Nova Computer Nova Computer Nova Computer</p>
</body> </html>
ফলাফল : এবার আপনার ব্রাউজারে program_0116.html
ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল
দেখতে পাবেন।
১। আপনার
এডিটরে নিম্নোক্ত কোডগুলো লিখুন।এবার program_0120.html নামে ফাইলটটিকে সেভ করুন।
<!DOCTYPE html>
<html>
<head>
<script>
function check() {
if (window.top !=
window.self) {
document.write("<p>This window is not the topmost window! Am
I in a frame?</p>")
}
else {
document.write("<p>This window is the topmost
window!</p>")
}
}
</script>
</head>
<body>
<input type="button" onclick="check()"
value="Check window">
</body>
</html>
ফলাফল :এবার আপনার ব্রাউজারে program_0120.html
ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল
দেখতে পাবেন।
Window অবজেক্ট মেথড
মেথড
|
বর্ননা
|
Displays an alert box with a message and an OK button
|
|
Removes focus from the current window
|
|
Clears a timer set with setInterval()
|
|
Clears a timer set with setTimeout()
|
|
Closes the current window
|
|
Displays a dialog box with a message and an OK and a
Cancel button
|
|
Creates a pop-up window
|
|
Sets focus to the current window
|
|
Moves a window relative to its
current position
|
|
Moves a window to the specified
position
|
|
Opens a new browser window
|
|
Prints the content of the current
window
|
|
Displays a dialog box that prompts
the visitor for input
|
|
Resizes the window by the
specified pixels
|
|
Resizes the window to the
specified width and height
|
|
scroll()
|
|
Scrolls the content by the specified
number of pixels
|
|
Scrolls the content to the
specified coordinates
|
|
Calls a function or evaluates an
expression at specified intervals (in milliseconds)
|
|
Calls a function or evaluates an expression after a
specified number of milliseconds
|
মেথডগূলোর কিছু কিছু উদাহরন আমরা ইতোমধ্য দেখেছি।
বাকি গুলো অন্যান্য উদাহরনের মধ্যে দেখে নিব।
Navigator অবজেক্ট
Navigator অবজেক্টটি সাধারনত ব্রাউজারের সকল ইনফরমেশন ধারন
করে তবে এর কোনো সার্বজনীন স্ট্যান্ডার্ড
নেই কিন্তু সকল প্রধান ব্রাউজার এটিকে
সমর্থন করে.
Navigator অবজেক্টটি নিম্নোক্ত প্রোপার্টিজ নিয়ে গঠিত।
Navigator অবজেক্ট প্রোপার্টিজ
প্রোপার্টিজ
|
বর্ননা
|
ব্রাউজারের
কোডের নামে রিটার্ন করে
|
|
ব্রাউজারের নাম
রিটার্ন করে
|
|
ব্রাউজারের
ভার্সন রিটার্ন করে
|
|
ব্রাউজারের
কুকি এনাবেল আছে কিনা তা রিটার্ন করে
|
|
ব্রাউজার অনলাইনে
আছে কিনা তা রিটার্ন করে
|
|
ব্রাউজার কোন প্লাটফরমে কম্পাইল হচ্ছে তা রিটার্ন করে কোডের নামে রিটার্ন
করে
|
|
ব্রাউজার ইউজার
হেডার কে সার্ভারে রিটার্ন করে
|
উপরোক্ত প্রোপারটিজ গুলোর ব্যাবহার নিচের একটি
প্রোগ্রামের মাধ্যমে দেখানো হলঃ
১. আপনার
এডিটরে নিম্নোক্ত কোডগুলো লিখুন।এবার program_0121.html নামে ফাইলটটিকে সেভ করুন।
<!DOCTYPE html>
<html>
<body>
<div id="example"></div>
<script>
txt =
"<p>Browser CodeName: " + navigator.appCodeName +
"</p>";
txt +=
"<p>Browser Name: " + navigator.appName +
"</p>";
txt +=
"<p>Browser Version: " + navigator.appVersion +
"</p>";
txt +=
"<p>Cookies Enabled: " + navigator.cookieEnabled +
"</p>";
txt +=
"<p>Platform: " + navigator.platform + "</p>";
txt +=
"<p>User-agent header: " + navigator.userAgent +
"</p>";
txt +=
"<p>User-agent language: " + navigator.systemLanguage +
"</p>";
document.getElementById("example").innerHTML = txt;
</script> </body> </html>
ফলাফল : এবার আপনার ব্রাউজারে program_0121.html
ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল
দেখতে পাবেন।
Navigator অবজেক্ট মেথড
মেথড
|
বর্ননা
|
ব্রাউজার জাভা
এনাবেল্ড কিনা তা নির্নয় করে
|
|
ব্রাউজার ডাটা
টেইন্টিং এনাবেল্ড কিনা তা নির্নয় করে
|
উপরোক্ত মেথড গুলোর ব্যাবহার নিচের একটি প্রোগ্রামের মাধ্যমে দেখানো হলঃ
১. আপনার
এডিটরে নিম্নোক্ত কোডগুলো লিখুন।এবার program_0122.html নামে ফাইলটটিকে সেভ করুন।
<!DOCTYPE html>
<html>
<body>
<script>
document.write("Java enabled: " + navigator.javaEnabled());
document.write("<br>");
document.write("Data tainting enabled: " +
navigator.taintEnabled());
</script>
</body>
</html>
ফলাফল : এবার আপনার ব্রাউজারে program_0122.html
ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল
দেখতে পাবেন।
বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
The
writer of this book has told that he has written this book with the
concept of "teach yourself". On the other hand, Web Design is a thing which is
interesting to learn. He has also told that the book is full of fan and
enjoyment so that a person can learn Web Design by himself by playing with
the example projects of this book. Book's CD Link below...
