See also: Learn Web Code example and the README.md for a list of resources.

Hellow Worldy

Node JS

Node is the Javascript engine from the Chrome browser wrapped in C++. From a terminal you can type Node my-js-file.js and Node will run the program.

Primatives and Reference Types

Primatives / Value types

  • String
  • Number
  • Boolean
  • Undefined
  • Null

Reference types

  • Object
  • Array
  • Function

These are Primatives

let name = 'Cyamodus'; // String literal
let text = 'This is another string';
let apples = 7;     // Number
let age = 30.75;         
let isApproved = true;    // Boolean
let isApproved = false;    
let firstName = undefined;  // not used very often
let selectedColor = null;     // When the user hasn't chosen a color

console.log(name);

const interestRate = '0.3'; // a contant
console.log(interestRate);

Operators

If variables are Javascript's nouns Operators are it's verbs.

Examples are: + is used for addition and to combine strings
= is used to assign variables
== to test whether something is just like something else
=== equals or is the same as
!= not equal to something else

Objects

An object is like an object in real life. It has properties and values. A person for example has a name, age, hair color etc. Each of these properties has a value: Bob, 31, Ginger etc..

NB. In an object the property:value pairs are separated by commas not semi-colons.

let person = { name: 'Cyamodus', age: 147, hairColor: bald }

If you want to use just one property from an object you can use a dot to reference that property:

console.log(person.age);

Javascript likes objects and there are number of built in objects such as window and document.

Objects have properties. Any named something in an object is a property.

Arrays

An array is simply a list. It could be a list of strings, numbers or other primative types. Or it could be list of objects or arrays too. But an array is also an object itself.

An array can be a collection of string variables. The syntax is to use the const myName = like a variable but then list different values followed by a comma separated list inside square brackets.

const turd = ['brown', 'slippery', 'smelly']

You can also nest arrays inside each other:

let farmAnimals = [['pigs', 127], ['cows', 472], ['chickens', 23]]

Functions

Functions perform tasks or do calculations.

The syntax is first declare a function: function

Then give it a name followed by brackets: function greet ()

Next you add curly braces and inside here goes the body of the funcction

function greet() {
  console.log('Hello World');
}

To call the function it's simply: greet();

Adding a parameter

You can add parameter to this function. For instance you might want someone’s name instead of World. So “Hello John’ but where the name could vary. So you use the bracket and put in the variable: function greet(name)

function greet (name) {
    console.log('Hello ' + name);
}

greet('John');

The word 'John' above is an argument of the greet function. Whereas 'name' is a parameter of the greet function.

It's then easy to pass further arguments: greet('Mary');

A function can have multiple parameters. These are written in the same brackets as the first but separated by commas. function greet(name, lastName) {

So:

function greet(name, lastName) {
          console.log('Hello ' + name + '' + lastName)
        }

Arguments vs Parameters

The parameters are the aliases for the values that will be passed to the function. The arguments are the actual values.

var foo = function( a, b, c ) {
    // some code ...
}; 

// a, b, and c are the parameters

foo( 1, 2, 3 ); // 1, 2, and 3 are the arguments

(from a Stack Overflow question)

Methods

A method is a function that is built in to an object.

The DOM (Document Object Model) has many built in methods. A common one is getElementById(). This is part of the document object so it's preceeded with document and a dot:

document.getElementById()

Just like functions methods are followed by brackets where you can pass optional arguments. This particular method is the fastest way to access something in the DOM.

Getting tricky: Mosh vid on functions