Intro to JavaScript: Arrays, Objects, Functions

Build an Interactive Web Page

Overview

This course gives an overview of JavaScript and programming generally. It does not cover libraries like jQuery or the DOM.

Class Schedule

The course is divided into 3 lessons in 2 days (12 hours of in-class instruction).

• Lesson 1: Variables & Functions
• Lesson 2: Control Flow & Arrays
• Lesson 3: Objects

Prerequisites

The students should have some familiarity with HTML/CSS (classes/ids). They do not need prior programming experience.

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.
• In-class example: An example of what the teacher should build up during the course of the lesson, switching between talking over the slides and demonstrating the concepts in the example page.
• 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.
• Take-home assignment and solution: A take-home assignment that incorporates many of the concepts from the class, along with a solution. We recommend an additional study group for the students to review their solutions.
• 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.
• Room for Improvement: A list of ways that the particular lesson might be improved.
• Make testing your code easier by loading javascript to an HTML page. Click here for instructions.

For this course, I recommend having the students use repl.it for the first two lessons, for easy JS debugging. That's also useful for in-class examples.

Related Resources

The content for the slides was based on consultation with a number of fantastic online resources, including the Eloquent JavaScript and MDN Guide on JavaScript. Those are recommended reading for teachers of this course. It was also inspired by these JS slidesets: Estelle's Intro to JS, Cathy's JS 101, WASP JS Intro, and GDI JS Materials.

History

This course was given by Pamela Fox in May, 2012 as part of Girl Develop It in San Francisco, California. More recently, this has been taught and updated by Brenda Jin, Bianca Gandolfo, and Claire Bendersky.

If you are using this material and have questions/comments, feel free to leave them here or on the individual lesson pages.