Fundamental JavaScript: The Language

Presented by Brian Dukes

Where are we going?

• Feature Overview• Syntax• Objects• Functions• Inheritance• Miscellaneous

Feature Overview

• 1st Class Functions• Loose Typing• Dynamic Objects• Prototypal Inheritance• Global Variables

Where are we?

• Feature Overview• Syntax• Objects• Functions• Inheritance• Miscellaneous

Syntax: Primitive Types

• Numbero 64-bit floating, "double"

• Stringo Surrounded by single or double quotes

• Booleano true or false

• Objectso Key/value pairs

• Arrayso Indexed collection

• Functionso Callable code

Syntax: Truthy & Falsy Values

• Falsy values:ofalseonulloundefinedo''o0oNaN

• Truthy values:oEverything elseotrue, 'false', {}

Syntax: Statements & Operators

• var • if• switch• while• for• for in• do while• try• throw• return• break • with

• ternary (? :)• typeof• ||• &&• == & ===• != & !==• +• !

Where are we?

• Feature Overview• Syntax• Objects• Functions• Inheritance• Miscellaneous

Objects: Literals

• JSON (plus functions)oName/value pairsoName is any string

Quotes are optional for legal nameoValue can be any JavaScript value:

Other objectsFunctionsArrays

Objects: Setting & Getting

var flight = {    airline: "Oceanic",    number:  815};alert(flight.airline);alert(flight.equipment); // undefined flight.equipment.status // throw "TypeError" flight.equipment = {    model: 'Boeing 777' };flight['flight-status'] = 'overdue';alert(flight["flight-status"]);

Where are we?

• Feature Overview• Syntax• Objects• Functions• Inheritance• Miscellaneous

Functions: Definition

• Functions are objectsoFunctions have a prototypeoFunctions can have propertiesoFunctions can have methodsoFunctions can be passed as arguments to

functionsoFunctions can be returned from functions

• Functions can be invoked

Functions: Closure

• Functions have access to outer variables•this & arguments are different for each

function 

var i;for (i = 0; i < 10; i++) {    setTimeout(function () {        console.log(i*i);    }, i);}

 

Functions: Scope

• Does not have block scopeoUnlike every other language with C style

syntax• Function scopefunction outer () {    for (var i = 0; i < 10; i++) {        var double = i+i;        $link.click(function () {             alert(double)         });    }} 

Functions: Callbacks

• Functions can be passed to other functions  makeAjaxCall(function (result) {    alert(result); }); 

Functions: Module Pattern

• Call an anonymous function after declaring it (IIFE)

• Keeps inner values from being accessible outside of the function

 (function () {    var x = 1;}());

Where are we?

• Feature Overview• Syntax• Objects• Functions• Inheritance• Miscellaneous

Inheritance: Pseudoclassical

•new operator• Function names are capitalized, by

convention• Lots of downfalls

Inheritance: Prototype

• All objects has a prototype property• When retrieving properties, any property not

on the object is retrieved from its prototype• If the property isn't on the prototype, its

prototype is checked, etc.

Where are we?

• Feature Overview• Syntax• Objects• Functions• Inheritance• Miscellaneous

Miscellaneous: Arrays

• Literal notation: [true, 1, "string", {}]•length property• Not bounded

oUse push method to add to the end• Is a weird object, not a "real" array

Miscellaneous: Regular Expressions

• Pattern Matching• Literal notation: /pattern/options

Resources

• JavaScript Weekly - http://javascriptweekly.com/• JSLint - http://www.jslint.com/• JSLint.VS2010 - http://bit.ly/JSLint-VS2010• jsFiddle - http://jsfiddle.net/• MDC - https://developer.mozilla.org• This - http://www.slideshare.net/EngageSoftware/