Javascript & jQuery

Note: These are notes taken from the book Javascript & Jquery by Jon Duckett, it’s not meant to replace the book but as a quick reference sheet for some of the concepts covered in book. It is a work in progress and should be updated regularly ( aiming for daily). Feel free to leave any comments and share with beginner JS learners.

There are six data types in JS.

Simple/Primitive Data Types

Strings, numbers and boolean have methods and properties that you can call on variables.

  1. String
  2. Number
  3. Boolean
  4. Undefined – a variable that has been declared, but no value has been assigned to it yet
  5. Null – a variable with no value – it may have had one at some point, but no longer has a value

Simple/Primitive Data Types

Arrays and functions are considered types of objects.

  1. Object

Arrays

An array is a variable that stores a list of values. It is a set of key/value pairs where you do not specify the name because it is an index number.

There are two ways of creating arrays:

Array Literals
Array Constructor
This is the preferred way of creating an array.

var colors;
colors = ['white','black','custom'];

var el = document.getElementById('colors');
el.textContent = colors[0]
This uses the new keyword followed by Array();

var colors = new Array('white',
                       'black',
                       'custom');

var el = document.getElementById('colors');
el.textContent = colors[0];

Computers use data to create models of things in the real world. The events, methods, properties of an object all relate to each other: Event can trigger methods, and methods can retrieve or update an object’s properties

Functions

Functions are a type of object in JS that are callable, ie you can tell the interpreter when you want to execute the statements it contains.

Function Declaration
Function Expression
A function declaration creates named functions that you can call later in the code

function area(width,height){
    return width * height;
};

var area = area(3,4);
Function expressions are anonymous functions that are treated as an expression by the interpreter

var area = function(width, height){
    return width * height;
};

var size = area(3,4);
Immediately Invoked Function Expressions(IIFE)
The variable holds the value returned from the function (rather than storing the function itself so that it can be called later).

var area = (function(){
    var width = 3;
    var height = 2;
    return width * height;
}());
The final parentheses after the closing curly brace of the code block tell the interpreter to call the function immediately.The grouping operators are parentheses there to ensure the interpreter treats this as an expression.

Anonymous functions and IIFEs can be used for code that only needs to be run once within a task. IIFEs are often used as a wrapper around a set of code to restrict the scope of the variables.

Variable Scope

The location where you declare a variable will affect its scope: where it can be used within the code.

function getArea(width,height){
    var area = width*height;
    return area;
}

var wallSize = getArea(3,2);
document.write(wallSize);
Local variables
Global variables
  • variables created inside a function using the var keyword.
  • have local or functional level scope and cannot be accessed outside of the function in which it was declared.
  • variables outside of a function, variables declared without the var keyword
  • have global scope, can be used anyway within a script
  • interpreter creates local variables when the function is run, and removes them as soon as the function has finished its task.
  • stored in memory for as long as the web page is loaded into the web browser, which means they take up memory and may cause the web page to take longer to respond
  • two different functions can use variables with the same name without any naming conflicts
  • may cause naming collision especially when using scripts written by several people

Objects

Objects group together a set of variables and functions to create a model. Variables in an object are known as properties and functions are known as methods. The name of the properties and methods, otherwise known as keys, must be unique.

There are two ways of creating objects. In the examples below, we’re creating objects to represent a hotel:

Literal Notation
Object Constructor Notation
var hotel = {} // Create a new hotel object

// Create a new object with properties & methods
var hotel = { 
  name: 'Quay',
  rooms: 40,
  booked: 25,
  gym: true,
  roomTypes: ['twin','double','suite'],
  checkAvailability: function() {
    return this.rooms - this.booked;
  }
};


var hotel = new Object(); // Create a new hotel object

/* Create a hotel function that can used as a 
template to create multiple objects */

function Hotel(name, rooms, booked, gym) {
  this.name = name;
  this.rooms = rooms;
  this.booked = booked;
  this.gym = gym;
  this.checkAvailability = function() {
    return this.rooms - this.booked;
  };
} 

var quayHotel = new Hotel('Quay', 40, 25, true);
var parkHotel = new Hotel('Park', 120, 88, false);

The name of a constructor function usually begins with a capital letter to help remind developers to use the new keyword when they create an object using that function.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s