Module 39 : Window and Document Objects.
1. Introduction
In JavaScript, the Window and Document objects are two essential components of the Browser Object Model (BOM) and Document Object Model (DOM) respectively. They allow you to interact with the browser and the web page content.
🧠2.Explanation
2.1. Window Object (BOM)
The window object is the global object in the browser. It represents the browser window and provides methods and properties to control it.
✅ Key Properties:
Property
Description
window.innerWidth
Width of the viewport
window.innerHeight
Height of the viewport
window.location
Info about current URL
window.navigator
Info about the browser
window.history
Browser history
✅ Key Methods:
Method
Description
alert()
Display an alert box
confirm()
Display a confirmation dialog
prompt()
Ask the user for input
open()
Opens a new browser window
setTimeout()
Run code after a delay
setInterval()
Run code repeatedly at intervals
2.2. Document Object (DOM)
The document object represents the webpage loaded in the browser. It’s the root of the DOM tree.
✅ Key Properties:
Property
Description
document.title
Title of the webpage
document.body
The <body> element
document.URL
URL of the current document
document.forms
All forms in the document
✅ Key Methods:
Method
Description
getElementById()
Get an element by its ID
getElementsByClassName()
Get elements by class name
querySelector()
Get the first matching element
createElement()
Create a new HTML element
appendChild()
Add a new element to the DOM
3. Explanation
✅ Example 1: Using window object
alert("Welcome to the Website!"); console.log("Window height is: " + window.innerHeight);
Explanation:
alert() shows a message to the user.
innerHeight gives the visible height of the browser window.
✅ Example 2: Using document object
document.title = "New Page Title"; document.getElementById("header").innerText = "Updated Header!";
Explanation:
The first line changes the title of the webpage.
The second line updates the text of the element with ID header.
✅ Example 3: Creating and appending a new element
let newPara = document.createElement("p"); newPara.innerText = "This is a new paragraph."; document.body.appendChild(newPara);
Explanation:
A new paragraph (<p>) is created.
It’s added to the <body> of the webpage.
4. Explanation
DOM Interaction with Button Click
✅ Objective:
Manipulate HTML elements using window and document objects dynamically.
✅ Setup:
HTML Code:
<!DOCTYPE html> <html> <head> <title>Lab Experiment</title> </head> <body> <h1 id="mainHeading">Hello!</h1> <button onclick="changeHeading()">Click Me</button> </body> <script src="script.js"></script> </html>
JS Code (script.js):
function changeHeading() { let userInput = prompt("Enter new heading:"); document.getElementById("mainHeading").innerText = userInput; }
✅ Explanation:
prompt() asks for user input.
getElementById() locates the heading.
innerText updates the heading on the page.
✅ Questions:
What is the role of prompt()?
How does document.getElementById() work internally?
What happens if the ID doesn't exist?
5. Exercises
🔸 Exercise 1:
Create a timer using setInterval() that updates a <div> every second.
🔸 Exercise 2:
Create a button that when clicked, changes the background color of the page randomly.
🔸 Exercise 3:
Use document.querySelector() to change the first <p> element’s text to "Updated!".
📚 6. Research Insights
✅ Evolution of window and document Objects
ECMAScript defines the standard JavaScript behavior, but browsers added window and document for web functionality.
Over time, modern APIs like fetch(), localStorage, and ResizeObserver were added to window.
✅ Use in Projects:
Single Page Applications (SPAs) heavily rely on document for dynamic UI updates.
window.location is used for routing/navigation.
7. Summary
Concept
Summary
window
Global object for browser controls and utilities
document
Interface to manipulate webpage content
Practical Use
Alerts, DOM manipulation, user input handling
Advanced Use
Creating dynamic content, UI behavior, interactivity
8.Submission Checklist
HTML file with at least one button and one heading.
JS file using document and window methods.
A paragraph dynamically created using createElement().
9. References
Web Docs - Window
Web Docs - Document
Eloquent JavaScript (Book) - DOM Chapter
JavaScript.info – Browser Environment
No comments:
Post a Comment