Scribd
Upload
26 views

Chapter-4 Cookies LO2

Uploaded by

pushpak84shinde
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
26 views

Chapter-4 Cookies LO2

Uploaded by

pushpak84shinde
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

K. K.

Wagh Polytechnic, Nashik-3

Chapter 4
Cookies and Browser Data
Browser Object Model (BOM):
• The Browser Object Model (BOM) allows JavaScript to
"talk to" the browser.
• There are no official standards for the Browser Object
Model.
• Since modern browsers have implemented (almost) the
same methods and properties for JavaScript interactivity, it
is often referred to, as methods and properties of the BOM.
The Window Object:
• The window object is supported by all browsers. It
represents the browser's window.
• All global JavaScript objects, functions, and variables
automatically become members of the window object.
• Global variables are properties of the window object.
• Global functions are methods of the window object.
• Even the document object (of the HTML DOM) is a
property of the window object:
window.document.getElementById("header");
is the same as:
document.getElementById("header");
The Window Size:
• Two properties can be used to determine the size of the browser
window.
• Both properties return the sizes in pixels:
• window.innerHeight - Inner height of browser window (in pixels)
• window.innerWidth - Inner width of browser window (in pixels)
• The browser window (the browser viewport) is NOT including
toolbars and scrollbars.
• For IE 5,6,7,8
document.documentElement.clientHeight
document.documentElement.clientWidth
or
document.body.clientHeight
document.body.clientWidth
The Window Size:
<html>
<body>
<p id="demo"></p>
<script>
var w = window.innerWidth || document.documentElement.clientWidth ||
document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight ||
document.body.clientHeight;

var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
</script>

</body>
</html>
Other Window Methods:
• window.open() - The open() method opens a new browser window,
or a new tab, depending on your browser settings and the parameter
values.
• window.close() - close the current window
• window.moveTo() - move the current window
• window.resizeTo() - resize the current window
Opening a Window in new browser tab:
• Open "www.w3schools.com" in a new browser tab
<html>
<body>
<p>Click the button to open a new browser window.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
window.open("https://www.w3schools.com");
}
</script>
</body>
</html>
Opening a blank page in new Window:
• Open an about:blank page in a new window/tab:
<html>
<body>
<p>Click the button to open an about:blank page in a new browser
window that is 200px wide and 100px tall.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var myWindow = window.open("", "", "width=200,height=100");
}
</script>
</body>
</html>
Opening Multiple tabs:
• Open Multiple tabs:
<html>
<body>
<p>Click the button to open multiple tabs.</p>
<button onclick="myFunction()">Open Windows</button>
<script>
function myFunction() {
window.open("http://www.google.com/");
window.open("https://www.w3schools.com/");
}
</script>
</body>
</html>
Closing a Window:
<html>
<body>
<button onclick="openWin()">Open "myWindow"</button>
<button onclick="closeWin()">Close "myWindow"</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "myWindow", "width=200,height=100");
myWindow.document.write("<p>This is 'myWindow'</p>");
}
function closeWin() {
myWindow.close(); }
</script>
</body>
</html>
Getting a focus to new Window:
The focus() method sets focus to the current window.
<html>
<body>
<p>Click the button to open a new window, and assure that the new window GETS
focus (send the new window to the front).</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var myWindow = window.open("", "", "width=200,height=100");
myWindow.document.write("<p>A new window!</p>");
myWindow.focus();
}
</script>
</body>
</html>
Changing contents of a Window:
• The replace() method replaces the current document with a new one.
• The replace() removes the URL of the current document from the
document history, meaning that it is not possible to use the "back" button
to navigate back to the original document.
Ex:
<html>
<body>
<button onclick="myFunction()">Replace document</button>
<script>
function myFunction() {
location.replace("https://www.w3schools.com") }
</script>
</body>
</html>
Scrolling the page of a Window:

<html>
<head>
<style>
body { width: 5000px; }
</style>
</head>
<body>
<p>Click the button to scroll the document window to 500 pixels horizontally.</p>
<button onclick="scrollWin()">Click me to scroll horizontally!</button><br><br>
<script>
function scrollWin() { window.scrollTo(500, 0); }
</script>
</body>
</html>
Window Screen:
• The window.screen object contains information about the user's
screen.
• The window.screen object can be written without the window
prefix.
• Properties:
– screen.width
– screen.height
– screen.availWidth
– screen.availHeight
– screen.colorDepth: returns the number of bits used to display
one color.
– screen.pixelDepth: returns the pixel depth of the screen
Window Screen:
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Screen width is "
+ screen.width;
</script>
</body>
</html>
Window Location:
• The window.location object can be used to get the current page
address (URL) and to redirect the browser to a new page.
• The window.location object can be written without the window
prefix.
• Ex:
• window.location.href: returns the href (URL) of the current page
• window.location.hostname: returns the domain name of web host
• window.location.pathname: returns the path and filename of the
current page
• window.location.protocol: returns the web protocol used (http: or
https:)
• window.location.assign(): loads a new document
Window Location:
<html>
<body>
<h2>JavaScript</h2>
<h3>The window.location object</h3>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"The full URL of this page is:<br>" + window.location.href;
</script>

</body>
</html>
Window Location:
<html>
<head>
<script>
function newDoc()
{
window.location.assign("https://www.w3schools.com")
}
</script>
</head>
<body>
<input type="button" value="Load new
document" onclick="newDoc()">
</body>
</html>
Window History:
• The window.history object contains the browsers history.
• The window.history object can be written without the window
prefix.
• To protect the privacy of the users, there are limitations to how
JavaScript can access this object.
• Methods:
• history.back() - same as clicking back in the browser
• history.forward() - same as clicking forward in the browser
Window Navigator:
• The window.navigator object contains information about the
visitor's browser.
• The window.navigator object can be written without the window
prefix.
• Properties:
▪ navigator.cookieEnabled: returns true if cookies are enabled,
otherwise false
▪ navigator.appName:returns the application name of the browser
▪ navigator.appCodeName: returns application code name of
browser
▪ navigator.product: returns product name of the browser engine
▪ navigator.appVersion:returns version information about the
browser

You might also like