Week 4 - JavaScript

Wednesday Agenda

  • Talk about first deliverable
  • Meet with teams

Monday

Tuesday

Thursday

General References for JS

The MDN JavaScript documentation has everything you might need to learn JS. But there should be no need to read it like a textbook. Use it as a reference anytime you need to look up something.

There is also a nice free book on JS that is available: Eloquent Javascript. I recommend it if you do want something you can read like a book to learn more than we are covering in this course.

JS Basics

Watch these videos on the basics of JavaScript:

Then try a few of these practice problems. They are not graded and you do not have to turn anything in. You do not need to do all of them. But you should put in a little time practicing with JS syntax. So pick a few and try to implement them.

JS Debugging

While working on JS, you will likely want to use the debugger. Here are some tips for how to debug code running in your browser:

JS Arrays

This video covers the basics of working with arrays in JS:

Here are a few practice problems that use arrays:

JS Regexes

Regular expressions are not something you are going to need to program with this week, but we are going to make use of them for a few purposes later on.

You should be familiar with the concepts and the basic syntax of them:

Here are some tools you can use to play with regular expressions a bit:

  • Regexr - test out regular expressions. It will explain the regular expression you type in in English. Make sure to select ECMA Script(JavaScript) syntax from the left sidebar.
  • Regexper - make pretty diagrams
  • Debuggex.com - test out regular expressions and make diagrams. Not as good as the two above, but all in one place.

JS Objects

Objects in JS are much simpler than in C++. An object does not have to be made from a class. They are essentially just a blob of data that we can add to or remove attributes from at will.

There is a mechanism for making classes of objects called Prototypes. But even that is much more free-form than we are used to in C++.

This video explains:

Here are a few practice problems involving basic objects:

Modern JS (ES6) introduced a syntax for Classes that works much more like other languages (including C++). Under the hood, the new syntax gets turned into prototypes, but it is much cleaner and simpler to write if you are coming from another language to JS. Here is that syntax:

Here are a few problems that involve classes and objects: