Class Days
19 JavaScript

Class 19: Javascript

Instructions

Javascript Intro

Watch this introductory video on Javascript (opens in a new tab), which is our next important web development language

Javascript (opens in a new tab) allows us to directly interact with a webpage without needing to talk to a server (hence the term client-side), which will allow us to build more dynamic and responsive webpages. Javascript is a language where functions are first class citizens and is the basis for many popular languages and frameworks, including:

FYI: We will not be going over any of these frameworks in this class, as they fall outside the scope of what we can do, but I encourage you to look into or start a side project where you look to build your knowledge. If you don't feel comfortable learning a new language, I would encourage you to jump in! However, I also have resources, including the grad school version of this course, which covers a different set of technologies.

Javascript vs PHP

The next video (opens in a new tab) provides some differences between Javascript and PHP.

These include that:

  • unlike PHP, JavaScript does not have $ before its variables
  • like PHP, JavaScript tries to infer types and automatically converts them
  • unlike PHP, JavaScript was not built specifically to run in any one side of the client server interactions.
    • it was previously based on ECMAScript
  • Javascript can respond to user actions (like clicks and other controls that happen on the client side)

Javascript in Practice

This live coding video (opens in a new tab) demonstrates how to use javascript in practice, by showing how javascript works with HTML to create interactive elements.

As you start coding in Javascript, the best reference to keep open is Mozilla's Javascript reference (opens in a new tab)

Important: The keyboard shortcut for the oft-used developer tools to help diagnose and debug problems is Ctrl-Shift-I

HTML and Javascript

Now with some basics the following video (opens in a new tab) reviews functions and how Javascript can begin to interact with the HTML page via the Document Object Model or DOM for short.

Remember that:

  • We tend to separate HTML from Javascript to promote code modularity
  • How to make functions
  • How to manipulate the DOM by accessing the elements and changing their properties.

Debugging in Javascript

This video covers all aspects of debugging (opens in a new tab).

Some of the points that were made are:

  • debugger > using console.log > using an alert
  • well placed breakpoints (and knowing when to trigger them) as well as watch expressions can be OP
  • Use let over var. If you see var in your code, it should give you the ick.

Types

Our next video (opens in a new tab) goes over javascript types

  • Javascript supports a variety of types, including number, boolean, string, array, object, function, null, and undefined.
  • Javascript also has a typeof function that can be used to figure out an expression's type
  • null means that the value is empty, while undefined means that it has no value associated with it (it may not know about that variable)
  • you can use conversion functions like parseInt to convert between other types into an integer

Arrays

This next video covering arrays in Javasript (opens in a new tab) shows how arrays have many of the same characters of other languages.

DOM and an example

That last video from today on how to manipulate the DOM and Debugging (opens in a new tab) finishes our long day surrounding Javascript.

We use document.getElementById (opens in a new tab) to get information from HTML elements. For a recap of events, please look through Mozilla's explanation of events (opens in a new tab)

18 Forms Part 220 JavaScript Part 2