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.
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.
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 (