These are the topics for week 4:
- Functions
- The Document-Object Model (DOM)?
- JavaScript and the browser
- The DOM
- The Critical Rendering Path
- Traversing the DOM
- What is DOM Manipulation?
- Manipulating elements
- Browser events
- Event listeners and handlers
We use the study book that is shared across all HackYourFuture chapters to explain the concepts rather than having the explanations here. You can click on each concept in the list above to go to the explanation! There are usually also extra reading links that you can go into if you need a little more help, but those are optional.
If you haven't yet, make sure to follow the setup guide to have everything set up!
Currently all code you have written only happens once when you run your file, but we want to write code that reacts to certain events. To do that we can define functions that allow you to group lines of code and run them whenever you want. Have a look how this works over here.
As upcoming web developers we want to work in the browser. An important thing to know about coding and browsers is that JavaScript the only language is that all browsers understand. That is where JavaScript started and the reason why we teach it. The way JavaScript interacts with the webpage is via the Document-Object Model, so let's first learn about what that is here
Now that we know what the DOM is, we want to learn about how to manipulate it using the JavaScript so that we can actually affect the page with our code. This is called DOM manipulation and you can read all about it over here
Are you finished with going through the materials? Nice job!!! If you feel ready to get practical, click here.