JavaScript: Working with the Web Page

Name: JavaScript: Working with the Web Page
Author: Joseph Barrett

How to best utilize the Document Object Model.

Preview the first lesson free — get full access to all 8 lessons.

Course: On-Demand

Welcome, and in this chapter of the course, we're going to look at interacting with the web page with JavaScript, and we'll do that by working with the DOM, the document object model. So, this chapter will encompass things like looking at common DOM properties and methods you'll encounter, finding out what events are available, finding out how to tie our code to an event being raised by the user, and a few different approaches to do that efficiently. So, in this first lesson, we're just going to introduce you to the DOM, the document object model. If the question is, why should I learn JavaScript? One of the main answers to that is so that you can interact with the web page, and the way you do that is this consistent hierarchical structure called the document object model or DOM for short. All browsers have them. This is the object model of the page. It's built by the browser using the HTML it gets from the server. So, think of it as a tree of element nodes all nested together. This gives JavaScript access to all the HTML and all the CSS on the page. Now, you can see this by bringing up your F12 tools. I'm in Firefox right now, I hit my F12 key. And on the inspector tab, it shows the rendered document object model. Now, if you want to mouse around in the page and see specific elements, you can just click that little logo there to the left of inspector. And then as you mouse around, it highlights the current element that you're moused over. If you want to see it highlighted, just click that once and you get a highlight down on the inspector tab. And it doesn't matter. This can be a page that you authored, somebody else's page doesn't matter, available for everyone. So the DOM creates this tree of elements that we can iterate through with code. So for example, I can do things like get properties of existing elements. In this case, I asked for the inner text property of the form, and I got a nice big string there with all of the text options in that select box. I can also do things like changing CSS style on a page. Say which will amount that from a designer perspective, but it does work from a JavaScript perspective. I can add new elements to the page, like when I click this button, now I've got a new label and a new checkbox. I can also do things like deleting existing elements, I can handle events, which is what these buttons are doing, when a click event happens, I have code that runs in my JavaScript. One final note in this lesson, let's talk about the HTML versus the DOM. They do look the same, but JavaScript can make changes. So when the page first renders, the HTML and the DOM match, as JavaScript makes changes, the DOM is different. But if I reload the page, all else being equal, like I'm going to do right now, we're back to the HTML and the DOM being identical. Thanks for watching our introduction. In the next lesson, we'll get into looking at some DOM properties and methods, some common ones that you may encounter as you're coding.

Beginner Provider : Joseph Barrett 8 Lessons · 35m in English

Course Description

In this course, you’ll be introduced to interacting with web pages and how to work with the document object model (DOM). You’ll learn about DOM methods and how to change DOM properties. You’ll understand what events are available and how to tie codes to events using the most efficient approaches. You’ll gain an understanding of passing parameters to event handlers and common event types when dealing with form controls. Finally, you’ll apply what you’ve learned through a real-life exercise.

What You'll Learn

Explore the document object model (DOM) and its basics
Work with DOM properties and methods, including how to change them
Create event handling functions and tie code to events efficiently
Pass parameters to event handlers
Examine different event types, including those for form controls
Practice choosing event handlers through a real-life exercise

Key Takeaways

The course introduces interacting with web pages through the document object model (DOM).
It covers DOM methods and how to change DOM properties.
It explains what events are available and how to tie code to events using efficient approaches.
It addresses passing parameters to event handlers and common event types when dealing with form controls.
Learners apply what they have studied through a real-life exercise on choosing event handlers.

Frequently Asked Questions

What does this course cover?

It introduces interacting with web pages and the document object model (DOM), DOM properties and methods and how to change them, events and event handling functions, passing parameters, and different event types, including those for form controls.

What skills will I gain from this course?

The course develops skills in DOM Scripting, HTML Scripting, Java Scripting Languages, JavaScript (Programming Language), and Object-Oriented JavaScript, and is associated with the JavaScript Development Certified Professional skill.

Does the course include hands-on practice?

Yes. You apply what you've learned through a real-life exercise, including an exercise on choosing event handlers.

What topics are taught about events?

The course introduces what events are available, how to create event handling functions and tie code to events using efficient approaches, how to pass parameters to event handlers, common event types when dealing with form controls, and how to choose event handlers.