Gallery
Share
Explore

JavaScript in HTML

Student lab learning workbook with detailed fully worked out progressively building exercises on putting javascript and css into the HTML document object model.
We will see both inline code and code in a separate file.
Use Visual Studio code as our IDE.
We will do many fully worked out examples of JavaScript APIs to manipulate the HTML DOM with the Browser Object Model.

Student Lab Learning Workbook: JavaScript, CSS, and the DOM

Introduction:

Welcome to this workbook on integrating JavaScript and CSS into the HTML Document Object Model (DOM).

This comprehensive guide will cover both inline and external code implementation, showcasing how to manipulate the DOM effectively using JavaScript. (=The BOM)
We will use Visual Studio Code (VS Code) as our Integrated Development Environment (IDE) for writing, editing, and running our code.

Pre-requisites:

Basic knowledge of HTML, CSS, and JavaScript.
Visual Studio Code installed on your computer.
⁠

Epoch 1: Inline JavaScript and CSS in HTML

Section 1: Inline JavaScript

Exercise 1.1:

Task: Create an HTML page that uses inline JavaScript to change the text in a paragraph element when a button is clicked.
Note: There are 3 ways to access ELEMENTS of the HTML Document Object Model via the BOM.
HTML Tag.
Class
ID
Steps:
Open VS Code and create a new file with the .html extension (e.g., index.html).
Write the basic structure of an HTML document.
Within the body tags, add a button and a p (paragraph) element.
Use the onclick EVENT emitter in the button element to call a JavaScript function that will change the text of the paragraph element.
Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline JavaScript Example</title>
</head>
<body>
<button onclick="changeText()">Click Me!</button>
<p id="myParagraph">Original Text</p>

<script>
function changeText() {
document.getElementById("myParagraph").innerText = "Text Changed!";
}
</script>
</body>
</html>

Section 2: Inline CSS

Exercise 1.2:

Task: Style the button and paragraph elements using inline CSS.
Steps:
Use the style attribute in the button and p elements to add CSS styles.
Code Modification:
htmlCopy code
<button style="color: blue; padding: 10px;" onclick="changeText()">Click Me!</button>
<p id="myParagraph" style="font-size: 18px;">Original Text</p>

Outcome:

When you open this HTML file in a web browser and click the button, the text in the paragraph should change, demonstrating basic inline JavaScript and CSS functioning.

Part 2: External JavaScript and CSS in HTML

Introduction

In this epoch, we learn to separate JavaScript and CSS from HTML by placing them in external files. This practice promotes cleaner and more maintainable code.
⁠

Section 3: External JavaScript

Exercise 2.1:

Task: Modify the HTML page from Epoch 1 to use an external JavaScript file to handle the button click event.
Steps:
Create a new file with a .js extension (e.g., script.js) in the same directory as your HTML file.
Cut the <script> content from the HTML file and paste it into script.js.
Link the script.js file in the HTML file using the <script src="script.js"></script> tag just before the closing </body> tag.
Code Example in script.js:
javascriptCopy code
function changeText() {
document.getElementById("myParagraph").innerText = "Text Changed!";
}

Modified HTML:
htmlCopy code
<!-- Other content remains unchanged -->
<body>
<button style="color: blue; padding: 10px;" onclick="changeText()">Click Me!</button>
<p id="myParagraph" style="font-size: 18px;">Original Text</p>
<script src="script.js"></script>
</body>
</html>

Section 4: External CSS

Exercise 2.2:

Task: Further modify the HTML page to use an external CSS file for styling.
Steps:
Create a new file with a .css extension (e.g., styles.css) in the same directory as your HTML file.
Cut the inline style attributes from the HTML elements and define the styles in styles.css.
Link the styles.css file in the HTML file using the <link rel="stylesheet" href="styles.css"> tag within the <head> tags.
Code Example in styles.css:
cssCopy code
button {
color: blue;
padding: 10px;
}

p {
font-size: 18px;
}

Modified HTML:
htmlCopy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>External JavaScript and CSS Example</title>
</head>
<body>
<button onclick="changeText()">Click Me!</button>
<p id="myParagraph">Original Text</p>
<script src="script.js"></script>
</body>
</html>

Outcome:

This structure enhances the separation of concerns, improving code maintainability and reusability.

Part 3: Advanced DOM Manipulation and BOM

⁠

Introduction

In this epoch, we'll delve deeper into the advanced JavaScript APIs to manipulate the HTML DOM and explore the Browser Object Model (BOM).
⁠

Section 5: Advanced DOM Manipulation

Exercise 3.1:

Task: Use JavaScript to dynamically create a list of items and append it to the DOM.
Steps:
In your script.js file, write a function to create an unordered list (<ul>) with three list items (<li>).
Use document.createElement() to create elements and element.appendChild() to append the items to the list and the list to the body.
Code Example in script.js:
javascriptCopy code
function createList() {
const ul = document.createElement("ul");
for (let i = 1; i <= 3; i++) {
const li = document.createElement("li");
li.textContent = `Item ${i}`;
ul.appendChild(li);
}
document.body.appendChild(ul);
}

Modified HTML:
Add a new button in your HTML to call the createList() function.
htmlCopy code
<button onclick="createList()">Create List</button>

Section 6: Browser Object Model (BOM)

Exercise 3.2:

Task: Use the window object to display the width and height of the browser window in a div.
Steps:
In your script.js, write a function to get the window.innerWidth and window.innerHeight and display them in a div.
Use window.onresize to update the dimensions whenever the window is resized.
Code Example in script.js:
javascriptCopy code
function displayWindowSize() {
const dimensionsDiv = document.getElementById("dimensions");
dimensionsDiv.textContent = `Width: ${window.innerWidth}, Height: ${window.innerHeight}`;
}

window.onresize = displayWindowSize;

Modified HTML:
Add a div in your HTML to display the dimensions.
htmlCopy code
<div id="dimensions"></div>

Initialization: Call displayWindowSize() on page load to ensure dimensions are displayed initially.
javascriptCopy code
window.onload = displayWindowSize;

Outcome:

With the completion of these exercises, you will have hands-on experience in advanced DOM manipulation and a basic understanding of the Browser Object Model.
⁠

Additional Notes:

Debugging: Utilize the built-in debugger in Visual Studio Code or browser developer tools to debug and test your JavaScript code.
DOM Methods: Explore other DOM manipulation methods like insertBefore(), removeChild(), replaceChild(), and many more.
BOM: Explore other properties and methods of the window object to further understand the Browser Object Model.
⁠

Conclusion:

Congratulations on completing the workbook! By now, you should be comfortable with integrating and working with JavaScript, CSS, and HTML in the context of the Document Object Model, and have a foundational understanding of the Browser Object Model. Make sure to continue practicing and building more complex projects to reinforce your learning.
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.