01 Basic JavaScript and the DOM

Learning objectives for the week

Topics covered in this week are:

1. JavaScript in a browser
2. DOM intro

We are going to learn JavaScript basics and DOM manipulation this week.

The browser can be used as the excution environment for JavaScript, but you can also also exexute JavaScript from the command line using Node.js. We will use both environments in this course.

In the browser, JavaScript can be used to manipulate the DOM (Document Object Model) of a webpage. In this way we can create dynamic web pages and do all kind of cool stuff. Everything you probably wanted to do on the 2nd semester. Now it’s time to do it!

So that’s why we start with JavaScript and DOM manipulation. Later in the week we will introduce React, a library for building user interfaces. React is a JavaScript library, so it’s important to understand JavaScript first. And we will learn more and more JavaScript as we go along.

Read these parts of the JavaScript.info topics:

• javascript Datatypes
• DOM
• Debugging JavaScript

Below are some great tutorials to watch on the sideline. You don’t need to watch these from start to end, but they are great to have as a reference, and to look up specific language constructs. BUT - at least see the DOM manipulation videos. They are the fundamental building blocks for understanding the rest of the frontend course.

• javascript DOM part 1 (39:00)
• javascript DOM part 2 (21:20)
• javascript Basics (3:26:42)

Setting up your development environment

1. Install Node.js (LTS version)
2. Install Visual Studio Code
3. Install Live Server extension in Visual Studio Code
4. Add codex to VS Code You will need a paid account for this.

Main Exercises

0. Exercise 0: Getting started with JavaScript and the DOM
1. Exercise 1: Getting comfortable with arrays, filter, map, and forEach
2. Exercise 2: JavaScript, DOM Manipulation and Events
3. Exercise 3: Javascript Calculator

Part III: Bonus exercises (JavaScript training)

1. Exercise 1: Arrow function in JavaScript
2. Exercise 2: Destructuring in JavaScript
3. Exercise 3: Spread Operator in JavaScript
4. Exercise 4: Rest Parameter Syntax in JavaScript