Explore

Lab Exercises Workbook: Working with the Browser Object Model using JavaScript and CSS
Lab Exercises Workbook: Working with the Browser Object Model using JavaScript and CSS

Introduction:

The Browser Object Model (BOM) is a set of properties, methods, and objects that allow JavaScript to interact with the browser.

In this Student Lecture Note and Lab Workbook, we will explore the BOM, its properties, and methods, and how to use them to create dynamic web pages.

As the world becomes more digital, it is increasingly important for web developers to understand the Browser Object Model (BOM) and its role in creating dynamic web pages. The BOM is a powerful tool that allows developers to interact with the browser and manipulate the elements of a web page in real-time.

You will experiment with the fundamental concepts of the BOM and how it works with JavaScript to create dynamic and interactive web pages. The course content is designed to give students a solid understanding of JavaScript and the BOM, as well as the skills to create dynamic and interactive web pages using these technologies.

⁠

Loading coda.io⁠

⁠

Chapter 1: Getting Started with JavaScript

JavaScript is a programming language that adds interactivity and smartness to web pages. It is a good first language for beginners to programming. Learning a programming language is like learning another language, with its own set of words and rules of syntax. In this chapter, we will learn the basics of JavaScript, including variables, functions, and conditional statements.

Install Node.js and Visual Studio Code, and use these tools to perform the exercises in the notebook linked below:

⁠

Loading coda.io⁠

⁠

Chapter 2: Introduction to the Browser Object Model

In this chapter, we will explore the BOM and its objects, including the Window object, the Document object, and the Location object. We will learn how to use the Window object to open and close windows, and how to use the Document object to manipulate the content of a web page.

Section 1: Introduction to the BOM

javascriptCopy code// Accessing the window objectconsole.log(window);

// Accessing the document object inside the window objectconsole.log(window.document);

// Accessing the location object inside the window objectconsole.log(window.location);

// Accessing the history object inside the window objectconsole.log(window.history);

// Accessing the navigator object inside the window objectconsole.log(window.navigator);

This code demonstrates how to access the five main objects in the BOM: the window object, the document object, the location object, the history object, and the navigator object. By logging these objects to the console, we can see all the properties and methods they contain.

Section 2: Working with Forms and Events

<form> <label for="name">Name:</label> <input type="text" id="name" name="name"> <button type="submit">Submit</button></form> // Getting the form by its IDconst form = document.getElementById('my-form');

// Listening for the submit eventform.addEventListener('submit', event => { // Preventing the form from submitting event.preventDefault(); // Getting the value of the name input const nameInput = document.getElementById('name'); const name = nameInput.value; // Displaying the name in a message const message = `Hello, ${name}!`; alert(message);});

This code demonstrates how to work with HTML forms and events in JavaScript. We start with a basic form that contains a text input and a submit button. We then use JavaScript to get the form by its ID and listen for the submit event. When the event is triggered, we prevent the form from submitting and retrieve the value of the name input. We then use that value to display a personalized message using the alert() function.

Section 3: Introduction to jQuery

<button id="my-button">Click me!</button>

// Adding a click event listener using jQuery$('#my-button').click(() => { alert('You clicked the button!');});

This code demonstrates how to use jQuery to add an event listener to an HTML element. We start with a simple button element that has an ID of my-button. We then use jQuery to select the button and add a click event listener using the click() function. When the button is clicked, we display a message using the alert() function.

Section 3: Working with Forms and Events

Forms are an essential part of web pages, and JavaScript can be used to create dynamic and interactive forms. In this chapter, we will learn how to use JavaScript to validate forms, manipulate form elements, and respond to events such as mouse clicks and key presses.

<form> <label for="name">Name:</label> <input type="text" id="name" name="name"> <button type="submit">Submit</button></form>

// Getting the form by its IDconst form = document.getElementById('my-form');

This code demonstrates how to work with HTML forms and events in JavaScript.

We start with a basic form that contains a text input and a submit button.

We then use JavaScript to get the form by its ID and listen for the submit event.

When the event is triggered, we prevent the form from submitting and retrieve the value of the name input.

We then use that value to display a personalized message using the alert() function.

Section 4: Introduction to jQuery

jQuery is a popular JavaScript library that simplifies complex programming. In this chapter, we will explore jQuery and its features, including its selectors, events, and effects. We will learn how to use jQuery to create animations, handle events, and manipulate the content of a web page.

In this example, we'll demonstrate how to use jQuery to create animations, handle events, and manipulate the content of a web page. To get started, make sure to include the jQuery library in your HTML file using the following script tag:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Here's a sample HTML structure for our example:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery Example</title> <style> .box { width: 100px; height: 100px; background-color: red; margin: 10px; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script></head><body> <button id="animateBtn">Animate</button> <button id="toggleBtn">Toggle</button> <div class="box"></div> <p id="content">This is some sample content.</p> <script src="script.js"></script></body></html>

Now, let's create a script.js file and write jQuery code to handle animations, events, and content manipulation.

Animations using .animate()

$("#animateBtn").click(function() { $(".box").animate({ width: "200px", height: "200px", opacity: 0.5 }, 1000, function() { // Animation complete console.log('Animation completed'); });});

In this example, when the "Animate" button is clicked, the .box element will change its width and height to 200px and opacity to 0.5 over 1000 milliseconds (1 second).

Handling events using .click() and .hover()

$("#toggleBtn").click(function() { $(".box").toggle(1000);});

$(".box").hover( function() { $(this).css("background-color", "blue"); },

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.

Lab Exercises Workbook: Working with the Browser Object Model using JavaScript and CSSLab Exercises Workbook: Working with the Browser Object Model using JavaScript and CSS