Schedule > 6. Intro to JavaScript & DOM manipulation
Week 5: Mon, Sep 16
Readings
Intro to the JavaScript Language (Monday)
- Please read the Intro to Programming with JavaScript page.
DOM Manipulation (Wednesday)
Required
- Intro to the DOM. Digital Ocean
- How To Access Elements in the DOM.Digital Ocean
- How to Modify Attributes, Classes, and Styles in the DOM. Digital Ocean
- Understanding Events in JavaScript. Digital Ocean
- Sarah’s interactive DOM manipulation worksheet
Recommended but Optional
- Understanding the DOM Tree and Nodes. Digital Ocean
- How to Traverse the DOM. Digital Ocean
- How to Make Changes to the DOM. Digital Ocean
Slides
- Lecture 8: JavaScript Primer (Monday, 09/16)
- Lecture 9: Intro to DOM Manipulation (Monday, 09/18)
Activities
- Lecture 8 files: Intro to the language (Monday, 09/16)
- Lecture 9 files: DOM manipulation practice (Wednesday, 09/18)
Check Your Understanding
After this week, you should be familiar with:
1. JavaScript syntax
- JavaScript is an interpreted language (not compiled)
- Variables are not strongly typed (any kind of data can be assigned to a variable)
- There are 3 ways to declare a variable:
let
,const
, andvar
– avoid usingvar
- We will be using 2 different function syntaxes (but there are others): function declarations and arrow functions
- Know the differences between equality (==) and strict equality (===) – use strict equality as much as possible
- Control syntax is almost identical to Java (if/else if/else, for loops, while loops)
- JavaScript can be interpreted with Node.js or by a web browser
- See the programming with JavaScript cheatsheet for a review
2. JavaScript and the DOM
- JavaScript DOM objects and methods are only used in “client-side” programming (within a browser). They are not supported in Node.js
- JavaScript allows you to manipulate HTML and CSS dynamically – usually through event handlers.
- Practice targeting and changing DOM elements using the DOM manipulation worksheet
- Please refer to the working with the DOM section of the JavaScript cheatsheet and make sure you know how to interact with the DOM.