JavaScript Pre-defined and User-defined
Objects
1 What are JavaScript Objects?
In JavaScript, everything is an object (except primitive types).
An object contains:
Properties → Variables inside object
Methods → Functions inside object
Example:
let person = {
name: "Mike", // property
greet: function() { // method
[Link]("Hello");
}
};
2 Pre-defined (Built-in) Objects
JavaScript provides built-in objects like:
document
window
Array
Math
String
RegExp
Date
These are already available in the browser.
Browser
↓
window (Top Level Object)
↓
document (HTML Page Object)
↓
HTML Elements
So:
window → represents the entire browser window
document → represents the HTML page inside the window
document is actually inside the window object.
Example:
[Link]
1 Difference Between window and
document
Feature window Object document Object
Represents Entire browser window HTML page
Level Top-level object Child of window
Used for Alerts, timers, browser size, location Accessing and modifying HTML elements
Example functions alert(), setTimeout(), innerWidth getElementById(), querySelector()
Access [Link] [Link]
Example:
[Link]("Hello");
[Link]("id");
2 Combined Example (Both window +
document)
Below is one program using both objects.
<!DOCTYPE html>
<html>
<head>
<title>Window vs Document Example</title>
</head>
<body>
<h2 id="heading">Welcome Students</h2>
<button onclick="runExample()">Click Me</button>
<script>
function runExample(){
// -------- DOCUMENT OBJECT --------
// Access HTML element
let element = [Link]("heading");
// Modify content
[Link] = "Text Changed using Document Object";
// Change style
[Link] = "green";
// -------- WINDOW OBJECT --------
// Show alert box
[Link]("This alert is from Window Object");
// Display browser window size
[Link]("Window Width: " + [Link]);
[Link]("Window Height: " + [Link]);
</script>
</body>
</html>
3 Step-by-Step Explanation
Step 1 – Page Loads
Browser creates objects automatically:
window
└── document
└── HTML Elements
Step 2 – User Clicks Button
Button calls:
runExample()
Step 3 – Using document Object
[Link]("heading")
This:
finds <h2> element
stores it in element
Example element:
<h2 id="heading">Welcome Students</h2>
Step 4 – Modify Content
[Link] = "Text Changed using Document Object";
Result on page:
Text Changed using Document Object
Step 5 – Change Style
[Link] = "green";
Text color becomes green.
This is DOM manipulation using document object.
Step 6 – Using window Object
[Link]()
Shows popup message.
This alert is from Window Object
Step 7 – Access Browser Properties
[Link]
[Link]
These show browser window size in console.
Example:
Window Width: 1366
Window Height: 657
4 Important Concept
window → controls browser
Examples:
alert()
location
history
screen
timers
document → controls webpage
Examples:
getElementById()
querySelector()
innerHTML
style
5 Simple Real-Life Analogy
Think of:
window = House
document = Room
HTML elements = Furniture
So:
window manages the whole house
document manages the room
elements are things inside the room
6 Important Note
Even if we write:
alert("Hello");
JavaScript actually runs:
[Link]("Hello");
Because window is the default object in browser.
3 User-defined Objects
Objects created by programmer using:
Object literals
Constructor functions
Classes