Class 20 (and Lab Session 6): JavaScript for Interactive User Interfaces

Today's class

Make sure to go over the content from the lecture first, which is below Then, you can start working on Lab 6.

Javascript Logic, Operators and Scope

Our first video today (opens in a new tab) covers logic, operators and scope specifically with Javascript.

Key points

• Just like PHP, make sure to use === instead of == for checking types to avoid Javascript's complex type coercion (opens in a new tab)
• Javascript has a set of which has: 0, 0n, "", null, undefined, NaN and false. Anything else that isn't falsy becomes truthy (opens in a new tab) and evaluates as true.
• All the control structures (opens in a new tab) (for, while, if, etc) work syntactically you expect in C/C++/Java.

Var vs let in practice

While we mentioned that var should give us the ick, this video goes more in-depth into why (opens in a new tab)

Variables declared with var behave much differently (opens in a new tab), (especially when used in loops) with scope than what most of you are used to, which can lead to unexpected bugs in your code. The solution is to use let and const, which behave like you expect variables in C/C++/Java to behave.

Functions

Since javascript treats functions as first class citizens, the next video (opens in a new tab) covers Javascript functions (opens in a new tab), parameters (opens in a new tab), and returning values (opens in a new tab).

FYI: While we don't cover it here, you should really learn how to use the shorthand arrow function syntax => (opens in a new tab) which is prevalent in modern Javascript code.

Advanced Arrays, Pop Ups and Dates

This video (opens in a new tab) explores more javascript features

• Arrays in Javascript can have associative mappings (e.g. scores["Osvaldo"]) just like PHP.
• You can also manipulate arrays like lists with functions such as:
  • shift (opens in a new tab)
  • unshift (opens in a new tab)
  • push (opens in a new tab)
  • split (opens in a new tab)
  • reverse (opens in a new tab)
  • join (opens in a new tab)
• Javascript also has a lot of support with dates (opens in a new tab) as objects.
• We also discussed many of the legacy UI components which should make you cringe as much as when you see two family members arguing about politics.
  • alert (opens in a new tab)
  • confirm (opens in a new tab)
  • prompt (opens in a new tab)

ESLint and more Debugging

Our last video (opens in a new tab) on javascript covers a few more of the issues that I should really have you do in the server side lab

Because debugging in Javascript can be so tough to debug (since it tries to autoconvert and assume it knows what you want to do), it's important that we use as many error checkers as possible. This is where static analysis tools like JSHint (opens in a new tab) and ESLint (opens in a new tab) come in. Both analyze the code and point out potential mistakes that neither Javascript, JSLint nor PHPStorm immediately warn us about.

You also want to use Ctrl-Shift-R to bypass any cache when doing a refresh of the webpage to make sure it loads your most recent Javascript changes.