JavaScript

OBJECT -> “Namespace”, “classes”, “constructor”, prototypes, fluent “interface”, jQuery live example, MVVM, Knockoutjs

starter

• JavaScript is object based, everything in JS is an object

• Variables created using var

• You should always use semicolons, and an object is a collection of name/value

name: value

• JavaScript is case sensitive

• Always use strict mode, declared with “use strict”

Restrictions Cannot use a variable without declaring it Cannot write to a read-only property Cannot add properties to non-extensible objects Cannot illegally delete functions and variables Cannot define a property more than once in an object literal Cannot use a parameter name more than once in a function Cannot use reserved words, eval, or arguments, as names for

functions and variables The value of this in a function is no longer the window object Cannot declare functions inside of statements Cannot change the members of the arguments array

Nulland

undefined

• NULL• One of the JavaScript primitive types• Represents the absence of value• Evaluates to false in Boolean expressions

• UNDEFINED• Primitive type• Represents an unknown value• Returned when a non-existent object property is called• Evaluates to false in Boolean expressions

Avoid coercive equality

operators

Objects are only equal to themselves

Primitives are equal if the values match (“salvo” === “salvo”)

Two sets of equality operators ( == and ===)

never use == or != INSTEAD of === or !==0 == '0'; //true0 === '0'; //falsefalse == '0'; //truefalse === '0'; //false

isNaN

Top-level function

Simple way to test for numbers and failed mathematical expressions

parseFloat method is helpful to convert a string in a number

Comparision == OR ===

PrototypeDEMO

Namespace

The window object in browsers is a global namespace

Variables defined outside a function are in the global namespace

Variables defined without the var keyword are in the global namespace

Always create your own namespace by a pattern The module pattern was made by Eric Miraglia of YUI in the 2007 Use it to prevent name collisions and polluting parent namespace Keep everything tidy Module Export Pattern:

var MODULE = (function () { var my = {}, privateVariable = 1;

function privateMethod() { // ... }

my.moduleProperty = 1; my.moduleMethod = function () { // ... }; return my;}());

Anonymous Closures Pattern:

(function () { // ... all vars and functions are in this scope only // still maintains access to all globals}());

Classes We create a class in js by a pattern

Use it to prevent name collisions and polluting parent namespace

Keep everything tidy

Use the new keyword to invoke the constructor

Functions

A function start with the keyword function

A function can have a name or not

A function can have parameters

The delimiters of the function are { }

A function can return a value, and that value can be itself

Cannot be overloaded!!! Parameters not passed are setted undefined

Function without parameters has a default param called (arguments)

Is possible to have a function inside a function Closure

Functions have this

Every function has a property named prototype

Useful to add a new function to a “class”

Closure

Class

Namespace – Module

Namespace – Inherit

DEMO

MVVM Pattern

http://en.wikipedia.org/wiki/Model_View_ViewModel

The Model View ViewModel (MVVM) is an architectural pattern used in software engineering that originated from Microsoft as a specialization of the presentation model design pattern introduced by Martin Fowler.[1] Largely based on the model–view–controller pattern (MVC), MVVM is targeted at modern UI development platforms which support Event-driven programming, such as HTML5,[2]

[3] Windows Presentation Foundation(WPF), Silverlight and the ZK framework.

MVVM facilitates a clear separation of the development of the graphical user interface (either as markup language or GUI code) from the development of the business logic or back end logic known as the model (also known as the data model to distinguish it from the view model).

Knockoutjs Simplify dynamic JavaScript UIs by applying the Model-View-ViewModel (MVVM)

Knockout – visible or invisible

Knockout – list

Matt and Leigh exampleDEMO

Some useful links• Strict Mode -

http://msdn.microsoft.com/en-us/library/ie/br230269(v=vs.94).aspx

• Strict Mode - http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

• Knockoutjs - http://knockoutjs.com/

• JavaScript info - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/

• Namespace function - https://github.com/smith/namespacedotjs/blob/master/example/sandbox.js