Code-newbies Intro to Javascript

This is a fast introduction to javascript.

Javascript Crash Course

Let's run over a bunch of javascript stuff so you research the material later on your own.

Comments

• Lines starting with // will be ignored by the javascript runtime.
• Same for blocks surrounded with /* and */.

Primitive Datatypes

• undefined
• null
• boolean
• string
• number

Objects

Objects in javascript can be thought of as a set of properties. Each property has a key and a value. The key of a property can be used to get or set values.

{
  key: 'value',
  color: 'blue',
}

Statements

In HTML, JavaScript statements are "instructions" to be "executed" by the web browser.

• var - Declares a variable, optionally initializing it to a value.
• if - Executes a statement if a statement is true.
• for - Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.

See a list of all javascript statements and declarations

Operators

Just go over the operators that are used when building the chatApp.

• = - Assignment operator. Will set a variable to a value. The left value the target of the assignment.
• === - Comparison operator. Checks type and value are equal.
• !== - Comparison operator. Checks type and value are not equal.
• + - Arithmetic operator. Returns the sum of the left and right values.

Operator example:

// Assignment
var myVariable = 1;

// Comparison
1 !== 2

// Arithmetic
1 + 1

Operators can be used together:

// Assignment and arithmetic
var two = 1 + 1;

// Assignment and comparison
var isFalse = 1 === two;

For a full list, see this list of javascript operators.

Functions

Functions, the last javascript datatype, are not primitives. They take arguments and can return values.

The function declaration declares (defines) a function with specified parameters.

function add(argument1, argument2) {
  return argument1 + argument2;
}

To use a function, you need to invoke it.

var two = add(1, 1);

Notice that when used with the assignment operator, =, that value that is returned by the function will be assigned to the variable on the left.

Workshop: Chat Application

To put these concepts to use we are going to build a simple chat room application. This will demonstrate two different javascript runtimes, the client browser and the server NodeJS runtime. You can also use the end result as a starting point for other explorative javascript projects. This repository is used to show solutions for each step of the lesson. To check your code against the working solution, you can click the title of the step below or select the tag for the corresponding step.

Step 1: Hello Worlding

Create an index.html, index.js and style.css files then add a minimal amount of code to make sure they are all working.

Step 2: HTML / CSS

Copy some styles and html into the app or write your own.

Step 3: Client Javascript

Write some code that appends the text input value to a the messages list then resets the message input.

Step 4: Server Javascript

Setup a simple node server that serves our index.html, index.js and style.css files.

Step 5: Socket.IO

Add socket.io to the project and dispatch messages to our server (instead of just appending them to our display).

Step 6: Communicate

Use socket.io from the server to listen for chat messages then dispatch those messages to all connected clients. In the client, listen for chat events and display the message value in the messages list.