Intermediate Programming @Woodbury

Javascript, A Reintroduction

JS image

Javascript, A Reintroduction

  • We won’t be starting from the ground floor with Javascript. For introductory tutorials, check out:

Where to use Javascript

  • In the console
  • Between <script> and </script> in your HTML page
  • In an external file called by <script src="myfile.js"></script> on your HTML page
  • And in the commandline/Terminal using NodeJs

Javascript Output

JavaScript can “display” data in different ways:

  • Writing into an HTML element, using innerHTML. Example
  • Writing into the HTML output using document.write(). Example
  • Writing into an alert box, using window.alert(). Example
  • Writing into the browser console, using console.log(). Example

JavaScript Statements

JavaScript statements are composed of:

  • Values
  • Operators
  • Expressions
  • Keywords
  • Comments

Single Line Comments

  • Single line comments start with //

Data Types

  • JavaScript variables can hold many data types: numbers, strings, objects and more. Javascript is weakly typed.
var length = 16;                               // Number
var lastName = "Johnson";                      // String
var x = {firstName:"John", lastName:"Doe"};    // Object

Values

  • Numbers - There’s no such thing as an integer in Javascript!
  • Strings - sequences of Unicode characters
  • Strings can be accessed like objects
'hello'.length; // 5
'hello'.charAt(0); // "h"
'hello, world'.replace('hello', 'goodbye'); // "goodbye, world"
'hello'.toUpperCase(); // "HELLO"
  • null - a non-value
  • undefined - not yet initialized
  • boolean - true or false

Operations

  • Boolean operations such as && (logical and), || (logical or), and ! (logical not)

Variables

  • Javascript is a weakly typed language. You don’t need to declare a variable’s type and there is no error checking.
  • ES6 (ECMAScript 2015) was adopted by all the browsers beginning 2015. Where we previously used var to declare a variable, we now have let and const.
  • let is the new var - let has block scope while var does not.
  • const is a variable whose value will not change! Reassigning its value will throw an error. It also has block scope.

Control Structures

  • if, else if, else
if (myvar === 0) {
    // then do this
}
  • While loops for basic looping. Do-while for execution at least once.
while (true) {
  // an infinite loop!
}

VS

var input; // happens at least once!
do {
  input = get_input();
} while (inputIsNotValid(input));

For loops

for (var i=0; i < arr.length; i++) {
        console.log(arr[i]);
    }

Classes and Objects

Classes are templates used to create objects. Objects are instances of a class. They have instance variables and methods (functions).

var obj = new Object();

OR

var obj = {}; - Object Literal Syntax - similar to JSON structure

  • can be declared and initialized

Example

var obj = {
  name: 'refridgerator',
  details: {
    color: 'white',
    size: 64
  }
};

Functions

function add(param1, param2) {
       return param1 + param2;
   }

function Person(name, age) {
  this.name = name;
  this.age = age;
}

// Define an object
var you = new Person('You', 24);
// We are creating a new person named "You" aged 24.

ES6 arrow functions

  • more concise
  • they are anonymous and change the way this binds in functions.
  • function (arguments) { expression } becomes arguments => expression
const sayHello = () => {
  console.log("Hello");
}