Week 1 Getting Started

Welcome to the Course

In this course, you will learn the fundamentals of programming with JavaScript. We will start slowly for those who have never programmed before, and then pick-up the pace as the term progresses.

For this week, you have the first Hybrid (asynchronous) assignment to complete. Don't worry! It is super simple. We just want to make sure that everybody has the right tools installed before we dig in next week.

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 VS Code.

You need to download and install it on macOS for now. VS Code download link (opens new window). We will be installing it on Windows towards the end of the semester.

Node.js

Node.js (opens new window) is a JavaScript runtime environment that allows you to write programs using JavaScript outside the browser.

WARNING

Install version 16.x.x of Node.js on macOS.

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

NPM

NPM (opens new window) Is the Node package management system for distributing open source modules written with JavaScript and including them with your application. It gets installed when you install Node.js.

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

JavaScript

Background

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

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 2009 the only place you could use a JavaScript file would be in the browser with a web page. The browser would read an HTML file and see that it needed to load and interpret the JavaScript file too.

Now, with Node.js, you can run your JavaScript files on the command line in the terminal, or embed scripts inside other applications or devices. There are many Internet of Things (IoT) devices that use embedded JavaScript to run programs. There are even desktop applications, like VS Code and Slack, that are build with JavaScript.

Declaring Variables

A variable is a container for holding information. When you write software programs in JavaScript (or any other language) you need to be able to hold pieces of information and pass that information around to different functions in your application. 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 var keyword. You will see many older code samples online that use var to declare a variable.

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, or const followed by a name is called declaring a variable.

When we want to put a value inside the variable, this is known as assigning a value to a variable. In JavaScript, the = operator is used to assign a value to a variable.

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

The convention for naming constants is to write the name in all capitals. There are exceptions to this which you will learn later, but this is a good rule to follow for now.

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

Data types

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

In statically 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 data type 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 Primitive values (opens new window): String, Number, BigInt, Boolean, null, undefined, and Symbol. We probably won't be talking about BitInt or Symbol this semester. BigInt was recently added to the language and isn't supported in most places yet and cannot be used interchangeably with the Number type. Symbols are used in very specific places and mostly with built-in language 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 a 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 asterisk * to start the comment and an asterisk * 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 (opens new window)

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
 */
function setting(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 (opens new window). Also see the JSDoc reference above.

TODO

TODO before next week

• Watch the videos embedded on this page.
• Read through the content on this page about variables, data types, and comments.
• Complete the first Hybrid exercises before class next week.
• Read ahead the notes for week 2 to prepare for class and the quiz/discussion.