Explore

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.

⁠

The History of JavaScript: Timeline, Business Drivers, and Key Players 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:

⁠

Lab work book JavaScript: Loops, Branching, and Functions 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

javascript

Copy code

// Accessing the window object

console.log(window);

// Accessing the document object inside the window object

console.log(window.document);

// Accessing the location object inside the window object

console.log(window.location);

// Accessing the history object inside the window object

console.log(window.history);

// Accessing the navigator object inside the window object

console.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 ID

const form = document.getElementById('my-form');

// Listening for the submit event

form.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 ID

const form = document.getElementById('my-form');

// Listening for the submit event

form.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 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");

},

function() {

$(this).css("background-color", "red");

}

);

When the "Toggle" button is clicked, the .box element will toggle its visibility over 1 second. Also, when the mouse pointer hovers over the .box element, its background color changes to blue, and when the mouse pointer is moved away, the background color changes back to red.

Manipulating content using .text(), .html(), and .append()

$("#content").text("This is the updated content using .text() method.");

$("#content").html("<strong>This is the updated content using .html() method.</strong>");

$("body").append("<p>This is a new paragraph added using .append() method.</p>");

In this example, we first update the content of the paragraph with the id="content" using the .text() and .html() methods. Then, we add a new paragraph to the body of the HTML document using the .append() method.

Combine all these code snippets in the script.js file, and you'll have a complete example of how to use jQuery to create animations, handle events, and manipulate the content of a web page.

Lab Workbook:

In this lab workbook, you will create your first JavaScript page, which will introduce two JavaScript objects using a method of one and two properties of the other. The lab workbook will guide you through the process of creating dynamic and interactive web pages using JavaScript and the BOM.

Conclusion:

By the end of this Student Lecture Note and Lab Workbook, you will have a solid understanding of JavaScript and the BOM, as well as the skills to create dynamic and interactive web pages. Remember, programming can be seen as complex magic, but with some effort, you can master it. So, let's get started!

Working with CSS to Decorate Your Webpage: How to Use CSS with JavaScript and jQuery

CSS (Cascading Style Sheets) is a stylesheet language used to control the appearance of HTML elements. JavaScript and jQuery can be used to modify CSS properties on the fly, allowing for dynamic styling changes. In this section, we'll explore how to use CSS with JavaScript and jQuery through various code examples.

JavaScript and CSS

To modify CSS properties using plain JavaScript, you can access the style property of an element and then change the specific property you want. Here's an example:

<!DOCTYPE html>

<html>

<head>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

}

</style>

</head>

<body>

<button onclick="changeColor()">Change Color</button>

function changeColor() {

const box = document.querySelector(".box");

box.style.backgroundColor = "blue";

}

</script>

</body>

</html>

In this example, we have a div element with the class box and a button. When the button is clicked, it calls the changeColor() function, which changes the background color of the box from red to blue.

jQuery and CSS

jQuery makes it even easier to work with CSS properties. You can use the .css() method to get or set the value of a CSS property.

Getting CSS Property Values

To get the current value of a CSS property, use the .css() method with the property name as an argument:

$("selector").css("property-name");

For example, to get the background color of an element with the class box:

const backgroundColor = $(".box").css("background-color");

Setting CSS Property Values

To set the value of a CSS property, use the .css() method with the property name and the new value as arguments:

$("selector").css("property-name", "new-value");

For example, to change the background color of an element with the class box to blue:

$(".box").css("background-color", "blue");

Setting Multiple CSS Properties at Once

You can also set multiple CSS properties at once by passing an object to the .css() method:

$("selector").css({

"property-name-1": "value-1",

"property-name-2": "value-2",

// ...

});

For example, to change the background color, width, and height of an element with the class box:

$(".box").css({

"background-color": "blue",

"width": "200px",

"height": "200px"

});

Complete Example

Here's a complete example that combines JavaScript, jQuery, and CSS:

<!DOCTYPE html>

<html>

<head>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

}

</style>

</head>

<body>

<button id="changeColorButton">Change Color</button>

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.