Week 1 Introduction to JavaScript and Tech

Welcome to the Course

Just because of the way the schedule happened this semester, we do not have a face-to-face class in this first week.

However, we do still have the Hybrid (asynchronous) part of the class.

This video will cover everything you need to do and know for this first week in MAD9014.

Inspiration

Here is a series of videos to help get you thinking about what is coming and how you can contribute to the world.

Tools and Software

You can also find most of these links on the Resources page.

VSCode

The main IDE (Integrated Development Environment) that we will use for all our web technology related work will be VSCode.

You need to download and install it on both MacOS. VSCode download link. We will be installing it on Windows at the end of the semester.

NodeJS

NodeJS is a JavaScript runtime that allows us to write programs using JavaScript without the browser.

WARNING

Install version 12.x of NodeJS on MacOS.

We will be installing it on Windows at the end of the semester.

NPM

NPM Is the Node package management system for programs written with JavaScript and running with NodeJS. It gets installed when you install NodeJS.

Over the next 4 semesters we will be using this A LOT.

JavaScript

JavaScript is a dynamic interpreted language. This means that you create your program as a text file, then that text file will be passed to and read by another program, like a browser, without any changes to what you wrote. The file is interpreted by the program that the end user is using.

Some languages are compiled, which means you write your text file and then send it to a compiler. The compiler reads your file, combines it with others possibly, and generates a binary file which is often the final application which the user will run. Applications get compiled to run on a specific platform - like Windows or Android.

If you open up a compiled program you will not be able to see the original code that was written to create it.

Javascript files are text files with a .js file extension. Until quite recently the only place you would use a JavaScript file would be in the browser with a webpage. The browser would read an HTML file and see that it needed to load and interpret the JavaScript file too.

Now, with NodeJS, we can run our JavaScript files on the command line. We can embed our scripts inside other applications or devices. There are many iot devices that use embedded JavaScript to run programs.

Declaring Variables

A variable is a container for holding information. When we write programs in JavaScript we need to be able to hold pieces of information and pass that information around. A variable is the thing that holds that data.

There are three ways to declare a variable in Javascript.

var name;
let age;
const id;

The original way of creating a variable was with the keyword var. You will see many code samples online that use var.

In 2015, a new version of JavaScript was released with two new keywords - let and const. These are new and improved versions of var.

For most of what we do this semester we will just use let to create our variables.

A variable is, as the name implies, something that can change its value. We will use let to create our variables.

Something that never changes is constant. We will use const to create variables whose value is not allowed to change.

The process of writing let followed by a name is called declaring a value.

When we want to put a value inside the variable, this is known as assigning.

var name = 'Bob';
let alive = true;
const ID = 40123456;

The convention for naming constants is to write the name in all capitals.

Strings need to have either single ' or double quotes " around the value. Numbers and Booleans do NOT use quotation marks.

Datatypes

In JavaScript, the variables (not the constants) are dynamic. This means that you can replace one value with any other value you want.

In staticly typed languages, like C++, when you create a variable you also have to state WHAT KIND of value you want to put in the variable.

A datatype defines what kind of information you can store in a variable. In JavaScript there are two main groups of data types: Primitives and Objects.

There are seven types of Primitives: String, Number, Bigint, Boolean, null, undefined, and Symbol. We probably won't be talking about BitInt or Symbol this semester. BigInt was just added to the language and isn't supported in most places yet. Symbols are used in very specific places and mostly with built-in features.

Everything else is an Object, non-primitive. If you can create one and it is not one of the primitives then it IS an Object.

A Primitive is only a value. It has no other capabilities.

If the thing that you are working with has properties or methods then it is some type of Object. There are lots of kinds of Objects. Most of what we do will be creating Objects and using Objects.

Comments

When programming it is recommended that you add lots of comments to your files. this helps to identify who wrote the file, the current version of the code, what things need to be updated or changed, which features still need to be finished, things that need to be fixed, and also notes to yourself about what certain lines of code do.

Sometimes there will be months between the times that you look at your file. In cases like this it can be very helpful to yourself as well as people who work with you if you add comments explaining your thinking behind your code.

Single Line Comments

If you want to add a comment on a single line in JavaScript, do this:

let name = 'Steve'; //Create the variable to hold the user's name

Multi-line Comments

If your comment is more extensive and extends beyond a single line then we use a forward slash and an asterix * to start the comment and an asterix * and forward slash to end the comment.

const ID = 40123456;
/*
This is a multi-line
comment.
It can be as long as we want.
*/
const KEY = 'af7d64e9b10a';

Comment File Header

It is considered a best practice to add a multi-line comment at the top of your JavaScript file. Inside this you would include information like a description of the purpose of the file, your name, the date and version of the most recent update.

/**
 * @file
 * This file controls the main web app. It
 * loads data from thee MovieDB API and displays
 * a list of current recommended movies to
 * the user.
 *
 * @author abcd0001@algonquinlive.com
 * @version 1.2.16
 *
 ***************************************/

This method of naming the parts of the header is following a convention known as JSDoc. Learn more about JSDoc tags

Function Comments

Another place you can add comments is to describe the purpose of a function.

/**
 * Update the settings object
 * @param  {String} key The setting key
 * @param  {*}      val The new value
 */
var setting = function(key, val) {
  // if the setting doesn't exist, bail
  if (!(key in settings)) return;

  // Update the settings
  settings[key] = val;
};

Read more about documenting code. Also see the JSDoc reference above.

TODO

TODO before next week

• Watch the Welcome video as well as the other videos embedded on this page.
• Read through the content on this page about variables, datatypes, and comments.
• Complete the first three Hybrid exercises before class next week.
• Read ahead the notes for week 2 to prepare for class and the quiz.