WEB 150 - Winter 2015

Intro to JavaScript

Logistics

  • Location: BE 3156
  • Time: 7:15-9:05pm, Tuesdays and Thursdays
  • Dates: Jan. 1 - Mar. 25
  • Credits: 4

Class Summary

JavaScript is the language of the web, the only programming language available in browsers for creating rich interactive pages. In this class, we'll learn how to the browser loads and executes JavaScript, and write our own scripts ranging from simple menus to complex graphics and animations. We'll also learn how to retrieve results from a server without a full-page refresh (AJAX), and use templating systems like Mustache to place that information into the page.

Modern web development is a highly social discipline, and is tightly integrated with tooling systems and source control. We'll take full advantage of these industry-standard tools for this class. All assignments will be turned in and evaluated using GitHub, and JavaScript package managers like NPM and Bower will be discussed and used for dependency management. We will also spend time learning to effectively use the developer tools built into the browser, with a strong emphasis on the JavaScript console, the debugger, and the document tree.

Required Materials

There is no printed textbook for this course. We will use JavaScript for the Web Savvy as our primary text, which was written specifically for this program. Additional readings will be made available on the resources page, or posted to the class's GitHub repo. Students should also acquire the following free resources:

  • A GitHub account. Note that with a student e-mail address, you can sign up for an educational account, which includes free private repositories and other benefits. You should also download and install the GitHub client software to the computer where you'll be doing your homework.
  • A modern, syntax-highlighting code editor (i.e., not Dreamweaver, Crimson Editor, Notepad, or TextEdit). Komodo Edit, Brackets, and Atom are all well-supported cross-platform choices. The industry standard is Sublime Text, but at $70, it does require some investment. In a pinch, I've written an open-source editor called Caret that can be installed and run through the Chrome web store.

Class Structure and Topics

Each week, we'll cover a different topic, building on the previous week's work. In general, Tuesdays will be mostly lecture, so that I can cover the topic conceptually, and Thursdays will be more about putting what we've learned into practice. We will cover the following topics, although the order and precise list is subject to revision:

  1. Variables, values, and types
  2. Conditional statements
  3. Loops and arrays
  4. Objects and object iteration
  5. Functions
  6. Basic jQuery and DOM selectors
  7. jQuery event listeners
  8. AJAX and JSON
  9. Templating
  10. HTML5 Canvas
  11. Constructors and prototypes

Every Thursday, you'll be given an assignment to test what you've picked up on that week's topic. Assignments are due by the start of class on the following Tuesday. It is important to understand that the purpose of assignments is not to provide a "pop quiz," but more to evaluate your progress and understanding, and to provide me with an opportunity to offer feedback. As such, most of your grade each week will come from turning the assignment in on time and showing that you tried to solve it using your own original work. Whether the assignment "works" or not is a relatively small priority for me. Your homework should be completely your own: plagiarism will not be tolerated, at all.

This quarter, we're going to try a little experiment. Instead of having a final test, or a project, I want to stress code literacy — as students and beginning programmers, you should be reading more code. Doing so is a fundamental skill, both for improving your skills and when working on a team with other people, whose code you will need to read before you can add to or enhance it. So while 70% of your grade will come from homework, and 10% for class participation, 20% will come from a "book report" that you'll present at the end of the quarter on a piece of open-source JavaScript that you find interesting. You'll also present a copy of the source, annotated with your comments.

ADA Accessibility Note

Students with documented disabilities requesting class accommodations, requiring special arrangements in case of building evacuation, or have emergency medical information I should know about are asked to contact the disability support services office (DSS) in Rm. 1112. Once the disability is verified with DSS you will be given a letter of accommodation, and I'll be happy to help work with you for the best possible class experience.