📚 JavaScript Study Guide

Browser Window Objects & Document Object Model

🎯 Course Overview

This study guide covers two essential topics in JavaScript web development:

  • Browser Object Model (BOM) - Objects that control the browser
  • Document Object Model (DOM) - Objects that represent the HTML page

Browser Object Model (BOM)

When you launch a browser, it automatically creates built-in objects:

  • window - Top-level object (main browser window)
  • screen - Information about the monitor
  • navigator - Browser and OS information
  • history - Browser history navigation
  • location - Current URL information
⚠️ Key Point: The window object is at the top of the hierarchy. All other objects are accessed through it.

Document Object Model (DOM)

When you load an HTML page, the browser creates a document object representing the page structure:

  • document - Represents the HTML page
  • forms - HTML forms on the page
  • images - Images on the page
  • links/anchors - Hyperlinks and anchors
  • All HTML elements - Accessible via various methods

🪟 Window Object

The window object is the topmost object in the BOM hierarchy. Every browser window, tab, frame, or iframe has its own window object.

💡 Tip: Because window is the top object, you can omit "window." when accessing its properties and methods.

Key Properties

Property Description Example
status Text in the status bar window.status = "Loading..."
innerWidth/innerHeight Browser viewport size console.log(window.innerWidth)
closed Whether window is closed if (popwin.closed)
opener Reference to parent window opener.focus()

Try It: Window Methods

🖥️ Screen Object

Provides information about the user's monitor/display.

Property Description
width Total screen width in pixels
height Total screen height in pixels
availWidth Available width (minus taskbar)
availHeight Available height (minus taskbar)

Your Screen Information

📍 Location Object

Contains information about the current URL and allows navigation.

Property Description
href Complete URL
protocol http:, https:, ftp:
hostname Domain name
pathname Path and filename

Location Methods

// Reload the current page location.reload(); // Navigate to a new page location.href = "https://google.com";

🌳 Document Object Model (DOM)

The DOM represents the HTML document as a tree of objects that can be manipulated with JavaScript.

Accessing DOM Elements

Method Returns
getElementById(id) Single element
getElementsByTagName(tag) Array of elements
querySelector(selector) First match

Try It: DOM Manipulation

This is sample text

📝 Working with Forms

Forms are the primary way users interact with web pages. JavaScript allows you to validate and manipulate form data.

Form Validation Example

function validateForm() { let name = document.getElementById('name').value; if (name.trim() == "") { alert('Please enter your name'); return false; } return true; }

Try It: Form Validation

⚡ Events & Event Handling

Events are actions that occur in the browser (mouse clicks, key presses, page loads, etc.). Event handlers are JavaScript code that responds to these events.

Common Events

Event Occurs When...
click Element is clicked
mouseover Mouse enters element
mouseout Mouse leaves element
load Page finishes loading
change Form element value changes

Try It: Interactive Events

Hover over me!

Timer Events

// setTimeout - Execute once setTimeout(function() { alert('5 seconds passed'); }, 5000); // setInterval - Execute repeatedly setInterval(function() { console.log('Tick'); }, 1000);

Try It: Timer Demo