Content ITV PRO
This is Itvedant Content department
Exploring BOM and Timers in Javascript
Working with Browser Objects and Time-Based Functions
Learning Outcome
5
Apply BOM concepts in real web applications
4
Understand browser timers (setTimeout, setInterval)
3
Use window, location, history, and console
2
Identify major BOM objects
1
Understand what the Browser Object Model (BOM) is
Topic Name-Recall(Slide3)
Hook/Story/Analogy(Slide 4)
Transition from Analogy to Technical Concept(Slide 5)
What is BOM?
The Browser Object Model(BOM) allows Javascript to control the browser
DOM
BOM
Document Object Model
Browser Object Model
For manipulating page content
<button>
<form>
<div>
For controlling the browser
URL bar
alerts
history
DOM manipulates page content, while BOM controls the browser itself
The window object represents the browser window or tab and lets JavaScript interact with the browser.
What is window object?
Info about the User's screen
What is screen object?
Accessing the screen object
window.screen
Key properties of 'screen'
Screen Size
Available Size
Color Depth
Pixel Depth
screen.width
screen.heigth
Full resolution size
screen.availWidth
screen.availHeight
Excludes Taskbar
screen.colorDepth
Color Quality
screen.pixelDepth
Bits per Pixel
Screen size is NOT browser window size
What is console object?
console.method() shows messages in the browser's console, helping developers debug and understand code.
Why do we use console.method()?
- To check values while coding
- To find errors
- To debug programs
- To understand code flow
console.log()
console.warn()
console.error()
console.clear()
Displays normal messages
Displays warning messages
Displays error messages
clears the console
List of methods are as follows:
What is location object?
Javascript gives us the location object to work with this address
Assume the current webpage URL is:
https://www.example.com/products/mobile.htmlFull URL of the current page
console.log(location.href);https://www.example.com/products/mobile.htmlWhat is location object?
Javascript gives us the location object to work with this address
Website (domain) name
console.log(location.hostname);Full URL of the current page
console.log(location.href);https://www.example.com/products/mobile.htmlSummary
4
Timers help run delayed or repeated tasks
3
Important BOM objects: screen,console,location,href
2
window is the top-level BOM object
1
BOM allows JavaScript to control the browser
Quiz
Which object is the root of BOM?
A. document
B. screen
C. window
D. console
Quiz
A. document
B. screen
C. window
D. console
Which object is the root of BOM?
Quiz
A. document
B. screen
C. window
D. console
Which object is the root of BOM?
Quiz-Answer
A. document
B. screen
C. window
D. console
Which object is the root of BOM?
Exploring BOM and Timers in Javascript
By Content ITV
