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>

const element = document.querySelector('.my-class');

console.log(element.textContent);

</script>

</body>

</html>

⁠

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>

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?

⁠

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>

</head>

<body>

<h1>Lab Experiment - BOM and DOM with Classes</h1>

</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 class

const 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>

</head>

<body>

<h1>Lab Experiment - Class Selector</h1>

<p class="message">This is a sample paragraph.</p>

<p class="message">Another sample paragraph.</p>

</div>

</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:

.container {

background-color: #f2f2f2;

padding: 20px;

}

.message {

color: #333;

font-weight: bold;

}

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 write the JavaScript code to select and manipulate elements using the class selector.

// Selecting elements by class name and manipulating them

const paragraphs = document.getElementsByClassName('message');

for (let i = 0; i < paragraphs.length; i++) {

paragraphs[i].textContent = 'Updated Message';

paragraphs[i].style.color = 'blue';

}

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 div container with two paragraphs inside.

Observe the changes made by the JavaScript code.

The text content of both paragraphs should change to "Updated Message".

The color of both paragraphs should change to blue.

Conclusion:

In this lab experiment, we successfully demonstrated the use of the class selector in JavaScript to select and manipulate HTML elements within the DOM. We created an HTML structure with a div container and two paragraphs, each having the class name "message".

By using the getElementsByClassName() method, we selected all the elements with the class name "message" and looped through them to update their text content and apply styling changes. We modified the text content of the paragraphs to "Updated Message" and changed their color to blue using the textContent and style properties, respectively.

The class selector is a powerful tool that allows us to target specific elements based on their class names, providing a convenient way to manipulate multiple elements at once. This approach simplifies our JavaScript code and enables efficient handling of class-based operations within the DOM.

1. JavaScript and jQuery Selectors

1.1 Selectors in JavaScript

In JavaScript, you can select DOM elements by HTML tag name, class, or ID.

1.1.1 Selecting by Tag Name

const elements = document.getElementsByTagName('<P>');

1.1.2 Selecting by Class Name

Copy code

const elements = document.getElementsByClassName('className');

1.1.3 Selecting by ID

Copy code

const element = document.getElementById('elementId');

1.2 Selectors in jQuery

In jQuery, you can also select DOM elements by tag name, class, or ID.

1.2.1 Selecting by Tag Name

Copy code

const elements = $('tagName');

1.2.2 Selecting by Class Name

Copy code

const elements = $('.className');

1.2.3 Selecting by ID

Copy code

const element = $('#elementId');

2. JavaScript and jQuery BOM

The Browser Object Model (BOM) is an in-memory data structure, a set of APIs, whcih provide a way to interact with a web browser, such as changing the URL or opening a new window, via a set of APIs in JavaScript.

In this lab, we won't dive deep into BOM, but it's essential to know that JavaScript and jQuery provide mechanisms to interact with the browser.

3. Project: Adding Numbers and Showing an Image

3.1 HTML Structure

Create an HTML file with the following structure:

<!DOCTYPE html>

<head>

<title>JavaScript and jQuery Lab</title>

<style>

/* Add your custom CSS styles here */

</style>

</head>

<body>

// Add your JavaScript/jQuery code here

</script>

</body>

</html>

Replace path/to/flower-image.jpg with the actual path to your flower image.

3.2 JavaScript/jQuery Code

Add the following code in the <script> section within the <body> tag:

// Function to add two numbers and display the result

function addNumbers() {

const num1 = parseFloat($('#num1').val());

const num2 = parseFloat($('#num2').val());

const result = num1 + num2;

$('#result').val(result);

if (result > 50) {

$('#flowerImg').show();

} else {

$('#flowerImg').hide();

}

// Add event listener to the button

$('#addBtn').click(addNumbers);

This code adds an event listener to the button and calls the addNumbers function when clicked. The function calculates the sum of the input values, displays the result, and shows or hides the flower image based on the result's value.

3.3 Testing the Project

Open the HTML file in your web browser and test the functionality by entering numbers into the fields and clicking the "Add" button. The result should appear, and the flower image should show or hide based on the result's value.

Conclusion

In this lab workbook, you learned about JavaScript and jQuery selectors, the Browser Object Model, and built a simple project. You can now apply these concepts to create more complex applications and improve your web development skills.

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.