1
20CSI504-PHP & JS FRAMEWORK
Module :II
Module name :JavaScript Fundamentals
Topic : JS Browser BOM
Faculty :Dr. S. Karthikeyini, AP/M.Tech CSE
2
JAVASCRIPT BOM-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");
3
WINDOW SIZE
• Two properties can be used to determine the size of the
browser window.
• Both properties return the sizes in pixels:
• window.innerHeight - the inner height of the browser
window (in pixels)
• window.innerWidth - the inner width of the browser
window (in pixels)
• Example
• let w = window.innerWidth;
let h = window.innerHeight;
4
JS 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
• screen.pixelDepth
5
WINDOW SCREEN WIDTH
• The screen.width property returns the width of the visitor's
screen in pixels.
6
WINDOW SCREEN HEIGHT
• The screen.height property returns the height of the
visitor's screen in pixels.
7
Window Screen Available Width
• The screen.availWidth property returns the width of the
visitor's screen, in pixels, minus interface features like the
Windows Taskbar.
8
Window Screen Available Height
• The screen.availHeight property returns the height of the
visitor's screen, in pixels, minus interface features like the
Windows Taskbar.
9
JAVASCRIPT WINDOW LOCATION
• The window.location object can be written without the
window prefix.
• Some examples:
• window.location.href returns the href (URL) of the current
page
• window.location.hostname returns the domain name of
the 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
10
Window Location Href
• The window.location.href property returns the URL of the
current page.
11
Window Location Hostname
• The window.location.hostname property returns the name
of the internet host (of the current page).
12
Window Location Pathname
• The window.location.pathname property returns the
pathname of the current page.
13
Window Location Protocol
• The window.location.protocol property returns the web
protocol of the page.
14
Window Location Port
• The window.location.port property returns the number of
the internet host port (of the current page).
15
JAVASCRIPT WINDOW 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.
• Some methods:
• history.back() - same as clicking back in the browser
• history.forward() - same as clicking forward in the browser
16
Window History Back
• The history.back() method loads the previous URL in the
history list.
17
Window History Forward
• The history.forward() method loads the next URL in the
history list.
18
JavaScript Timing Events
• The window object allows execution of code at specified
time intervals.
• These time intervals are called timing events.
• The two key methods to use with JavaScript are:
• setTimeout(function, milliseconds)
Executes a function, after waiting a specified number of
milliseconds.
•
setInterval(function, milliseconds)
Same as setTimeout(), but repeats the execution of the
function continuously.
• The setTimeout() and setInterval() are both methods of the
HTML DOM Window object.
19
The setTimeout() Method
• window.setTimeout(function, milliseconds);
• The window.setTimeout() method can be written without
the window prefix.
• The first parameter is a function to be executed.
• The second parameter indicates the number of
milliseconds before execution.
20
EXAMPLE
21
The setInterval() Method
• The setInterval() method repeats a given function at every
given time-interval.
• window.setInterval(function, milliseconds);
• The window.setInterval() method can be written without
the window prefix.
• The first parameter is the function to be executed.
• The second parameter indicates the length of the time-
interval between each execution.
22
EXAMPLE
23
JavaScript Cookies
• Cookies are data, stored in small text files, on your
computer.
• When a web server has sent a web page to a browser,
the connection is shut down, and the server forgets
everything about the user.
• Cookies were invented to solve the problem "how to
remember information about the user":
• When a user visits a web page, his/her name can be
stored in a cookie.
• Next time the user visits the page, the cookie
"remembers" his/her name.
24
Create a Cookie with JavaScript
• JavaScript can create, read, and delete cookies with
the document.cookie property.
25
Read a Cookie with JavaScript
• With JavaScript, cookies can be read like this:
• let x = document.cookie;
26
JavaScript Popup Boxes
• Alert Box
• An alert box is often used if you want to make sure
information comes through to the user.
• When an alert box pops up, the user will have to click
"OK" to proceed.
• Syntax
• window.alert("sometext");
• The window.alert() method can be written without the
window prefix.
27
EXAMPLE
28
CONFIRM BOX
• A confirm box is often used if you want the user to verify
or accept something.
• When a confirm box pops up, the user will have to click
either "OK" or "Cancel" to proceed.
• If the user clicks "OK", the box returns true. If the user
clicks "Cancel", the box returns false.
• Syntax
• window.confirm("sometext");
29
EXAMPLE
30
