Share
Explore

JavaScript and jQuery Lab Workbook: Browser Object Model, Selectors, and an Example Project

The Browser Object Model (BOM) is a JavaScript Accessible library of APIs that provide access to all the DOM Nodes / objects exposed by the web browser.
The BOM allows JavaScript to interact with the browser
1
⁠
.
The window object is the top-level object in the BOM and represents the browser window
2
⁠
3
⁠
.
To select an element by class name using BOM JavaScript, we can use the document.querySelector() method. This method returns the first element within the document that matches the specified CSS selector
4
⁠
.

<!DOCTYPE html><html><head> <title>Example</title> <style> .my-class { color: red; } </style></head><body> <p class="my-class">Hello, World!</p> <script> const element = document.querySelector('.my-class'); console.log(element.textContent); </script></body></html>
⁠
image.png
⁠
⁠
In this example, we have an HTML document with a paragraph element that has a class of my-class. In the JavaScript code, we use document.querySelector('.my-class') to select the element by its class name. We then log the text content of the element to the console using console.log(element.textContent). The output in the console will be Hello, World!.

Now the above experiment with id selector rather than class selector
To select an element by its ID using BOM JavaScript, we can use the document.getElementById() method. This method returns an Element object that represents an HTML element with an ID that matches a specified string
1
⁠
⁠
2
⁠
⁠
3
⁠
⁠
4
⁠
⁠
5
⁠
. Here's an example:
html<!DOCTYPE html><html><head> <title>Example</title></head><body> <p id="my-id">Hello, World!</p> <script> const element = document.getElementById('my-id'); console.log(element.textContent); </script></body></html>
In this example, we have an HTML document with a paragraph element that has an ID of my-id. In the JavaScript code, we use document.getElementById('my-id') to select the element by its ID. We then log the text content of the element to the console using console.log(element.textContent). The output in the console will be Hello, World!.
⁠
1javascripttutorial
⁠
⁠
⁠
2javascript
⁠
⁠
⁠
3tutorialrepublic
⁠
⁠
⁠
4tutorialspoint
⁠
⁠
⁠
5mozilla
⁠
⁠
Now you enter this Experiment: What happens when you run this code?
⁠
image.png
⁠
⁠

Lab Experiment 1

This lab workbook aims to teach you how to use JavaScript and jQuery to manipulate the Browser Object Model (BOM) and interact with the Document Object Model (DOM) using various selectors.
We'll build a simple web page featuring three fields, a button, and an image. Users enter numbers into two fields, and the sum appears in the third field. If the sum is greater than 50, an image of a flower appears.

JavaScript Browser Object Model and HTML DOM with Classes

Learning Outcomest: JavaScript Browser Object Model and HTML DOM with Classes
Objective:
The objective of this lab experiment is to understand and implement the usage of classes in JavaScript for manipulating the Browser Object Model (BOM) and HTML Document Object Model (DOM).
Procedure:
Step 1: Setting up the HTML file
Open your preferred text editor or IDE.
Create a new HTML file and name it "index.html".
Inside the HTML file, create a basic structure by typing the following code:
<!DOCTYPE html><html> <head> <title>Lab Experiment - BOM and DOM with Classes</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Lab Experiment - BOM and DOM with Classes</h1> <script src="script.js"></script> </body></html>
Step 2: Creating CSS file
Create a new CSS file named "styles.css" in the same directory as the HTML file.
Open the "styles.css" file and add the following CSS code:
h1 { color: #333; text-align: center;}
Step 3: Writing JavaScript code
Create a new JavaScript file named "script.js" in the same directory as the HTML file.
Open the "script.js" file and define a JavaScript class for manipulating the BOM and DOM. Name the class "LabExperiment".
class LabExperiment { constructor() { // DOM elements this.button = document.createElement('button'); this.button.textContent = 'Click Me'; document.body.appendChild(this.button);
 // Event listener this.button.addEventListener('click', this.handleClick.bind(this)); }
 handleClick() { // BOM alert alert('Button clicked!');
 // DOM manipulation const heading = document.querySelector('h1'); heading.style.color = 'blue'; }}
// Instantiate the classconst lab = new LabExperiment();
Step 4: Running the Experiment
Save all the files.
Open the "lab_experiment.html" file in a web browser.
You should see an H1 heading and a button with the label "Click Me".
Click the button and observe the changes.
A JavaScript alert should pop up with the message "Button clicked!".
The color of the H1 heading should change to blue.
Conclusion:
In this lab experiment, we successfully utilized the concept of classes in JavaScript to manipulate the BOM and DOM.
We created a class named "LabExperiment" that created a button element, added an event listener to it, and performed actions when the button was clicked. The actions included displaying an alert using the BOM and changing the color of an H1 heading using the DOM.
By using classes, we encapsulated related functionality and organized our code in a structured and reusable manner.
This approach enables easier maintenance and extensibility of our JavaScript codebase when working with BOM and DOM interactions.

Lab Book: JavaScript Browser Object Model and HTML DOM - Using the Class Selector

Lab Experiment: JavaScript Browser Object Model and HTML DOM - Using the Class Selector
Objective:
The objective of this lab experiment is to understand and implement the usage of the class selector in JavaScript to select and manipulate HTML elements with specific class names within the Document Object Model (DOM).

Procedure:

Step 1: Setting up the HTML file

Open your preferred text editor or IDE.
Create a new HTML file and name it "lab_experiment.html".
Inside the HTML file, create a basic structure by typing the following code:
<!DOCTYPE html><html> <head> <title>Lab Experiment - Class Selector</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Lab Experiment - Class Selector</h1> <div class="container"> <p class="message">This is a sample paragraph.</p> <p class="message">Another sample paragraph.</p> </div> <script src="script.js"></script> </body></html>
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.