Overview
This course gives an overview of using JavaScript to manipulate web pages. It does not cover libraries like jQuery. The course is divided into 3 lessons and is about 5 hours total.
Prerequisite
The students should be familiar with JavaScript (variables, functions, loops, arrays, objects). The students should have some familiarity with HTML/CSS (classes/ids).
Materials
Each lesson includes:
- Slides: An HTML5-based slideset (not a PowerPoint) which actually embeds the actual HTML tags being described in order to better demonstrate them.
- Exercise(s): These can be started in class and then continued outside of it, and the teacher can decide when to reveal the solution for the exercises. For the most part, the solution to an exercise serves as the starting point for the next exercise.
- Additional Reading: Links that teachers can recommend students read after a lesson.
- Related Resources: Slides or tutorials that were useful in the creation of the lesson content. Teachers can visit these to get an idea of how other people present the content.
If you are using this material and have questions/comments, feel free to leave them here or on the individual lesson pages.
Lesson 1: Welcome & Review
Topics:
JS 101 concepts, JS in different environments
Materials:
Additional Reading:
Lesson 2: The DOM
Topics:
HTML/CSS review, DOM access/modifying
Materials:
- Slides: The DOM
- Exercise: DOM Detective
- Exercise: The Logo Hijack
- Exercise: Master of (DOM) Manipulation
- Bonus Exercise: GreaseMonkey
Additional Reading:
Lesson 3: Events & Animation
Topics:
The window object, setInterval/setTimeout, Events, JS best practices