Object Oriented JavaScript & jQuery

Intructor: Emre Kekeç

Estimated Time:
Company: Veripark
CONTENTS

OOJS JQUERY

• JS Functions • Basics
• Objects • DOM Operations
• Prototype • Intermediate topics
• Inheritance in JS • Writing Plugins
• Performance
• Events
• AJAX
© 2012 VeriPark 2
FUNCTIONS - Defining a Function

• Always returns a value ( undefined if not specified )

• Always returns a single value

– Use an array for more than one

© 2012 VeriPark 3
Calling a Function

• If missing or excessive arguments are used when

calling;
– undefined for missing & ignored if excessive

• The arguments is created for all functions.

– i.e. SomeFunction(‘foo’) // arguments[0] == foo TRUE

© 2012 VeriPark 4
Function Scopes

• Global Variable
– Defined outside any function
– Visible to everyone

• Local Variable ( Requires var !)

– Defined in a function
– Visible only within the function

© 2012 VeriPark 5
Variable Hiding & Hoisting

someVariable=10;

function F1() {

Undefined here
someVariable=5;
}

© 2012 VeriPark 6
Function Types

• Anonymous var operation = function(){

};

• Immediate (function (opToExecute){

opToExecute();
function inner(){
• Callback }
})(operation);
• Inner ( private )

© 2012 VeriPark 7
Closures

– OPTION 1 Global
• Return B from F2 Var A

• Return F2 from F1
F1
• Save the result in global &
Var B
execute

– OPTION 2 F2
• Replace F2 with global Var C
function

© 2012 VeriPark 8
OBJECTS – Declarative Syntax

var Car = {
color: <value> // primitive
accelerate : function(){ }, // method
owner : {
name: <value> // primitive
} //object ownership
}

© 2012 VeriPark 9
OBJECTS – Programmatic Syntax

function Account() {
this.number = <value> // primitive
this.displayBalance = function(){ }, // method
}

var checkingAccount = new Account();

© 2012 VeriPark 10
Accessing and Modifying Properties

• Dot or Array notation can be used

– Car.color, Car[accelerate](), Car.owner[name]

• Defining new properties are simple

– Car.Make = ‘BMW’;

• Deleting properties
– delete Car.color;

© 2012 VeriPark 11
Global Object

• Different for environments

– E.g. window for browser

• Owns the global properties

– globalVar == window.globalVar == this.globalVar

© 2012 VeriPark 12
Constructor

• Present as a property in all objects

– var anotherBmw = new bmw.constructor();

© 2012 VeriPark 13
Object References

• When an object is copied or passed to a function, it’s

reference is passed.

• When comparing, the references are compared

© 2012 VeriPark 14
A new insight to Functions

• The following all work:

• function sum(a,b){return a+b;}

• var sum = function(a,b){return a+b;};

• var sum = new function(‘a’,’b’,’return a+b;’);

– //Not recommended

© 2012 VeriPark 15
call & apply Methods

• Indirectly invokes a function

– someFunction.call();

• It’s power: The context(owner) can be changed!

– objectA.methodOfA(objectB);
– //this keyword refers to objectB!

• apply: Same as call but parameters are in array

– call(context,’a’,’b’) vs apply(context,[‘a’,’b’])

© 2012 VeriPark 16
PROTOTYPE - Definition

• We already know that functions are objects

– Methods: call, apply
– Properties: length, constructor

• prototype is a property on a function; if it is used as a

constructor; to define properties and methods.

• The prototype property is an object itself!

© 2012 VeriPark 17
Overriding Prototype Methods

• If you define an identically named member both in an

object and it’s prototype , object’s version is used

• hasOwnProperty returns true if the object owns the

property or false otherwise.

© 2012 VeriPark 18
Enumerating Properties

• for-in loop can be used to enumerate all properties of

an object including prototype properties:

– Enumeration can be turned on/off in ES5 +

(propertyIsEnumerable())

– Most built in JS methods are not enumerable

© 2012 VeriPark 19
Checking Prototype

• isPrototypeOf checks if a JS object is the prototype of

the object it is invoked on.

animal.isPrototypeOf(zebra);

© 2012 VeriPark 20
Getting the Prototype

• Object.getPrototypeOf() //ES5+
– var prototypename = Object.getPrototypeOf(zebra);

• _proto_ property is also a link on objects to their

prototypes on ES5+.
– Use when debugging but not in scripts!

• Both may not work in some & older browsers

© 2012 VeriPark 21
Tips & Tricks – Adding new members to standard JS

• Usually, changing the prototypes of built-in JS

functions is not recommended.

• Exception: A newer JS spec has a great function, and

you want to employ this in your project.
– Apply the new stuff to old JS core lib prototype.
– Always check the function’s existence!!

© 2012 VeriPark 22
Tips & Tricks – Messing with prototypes

• Unless you completely replace a prototype, it is live.

• If you replace a prototype, it’s constructor must be

reset!

© 2012 VeriPark 23
Tips & Tricks – Messing with prototypes

Dog
+bark();

Puppy1 can bark.

Dog.prototype +shakeTail(); Puppy1 can shake tail.

© 2012 VeriPark 24
Tips & Tricks – Messing with prototypes

Dog
+bark();

Puppy1 can bark. Puppy2 can shake tail.

Dog.prototype = {
Puppy2.constructor is a new object
shakeTail();
}; Puppy2.constructor = Dog;
//RESET WITH NEW PROTOTYPE
© 2012 VeriPark 25
REGULAR OOD (CLASS) vs JavaScript OOD (OBJECT)

PARENT
PARENT OBJECT
-properties
-methods

VS CHILD PROTOTYPE

CHILD
-childProperties
-childMethods
CHILD OBJECT

© 2012 VeriPark 26
Technique 1 – Prototype Chaining

OBJECT
__PROTO__

ANIMAL
__PROTO__

CAT
__PROTO__

© 2012 VeriPark 27
Using Intermediary Prototypes for Breaking Dependency

OBJECT
__PROTO__

ANIMAL
__PROTO__

ANIMALCLONE
__PROTO__

CAT
__PROTO__

© 2012 VeriPark 28
Technique 2 - Copy

• Shallow Copy

• Deep Copy (Also clone references)

© 2012 VeriPark 29
Multiple Inheritance : Mixin Objects / Functions

PARENT OBJECT 1 PARENT OBJECT 2

MIXIN OBJECT

CHILD PROTOTYPE

CHILD OBJECT
© 2012 VeriPark 30
Borrowing Constructors

Child Constructor Function

+property
+prototype
Parent Constructor Function
+property
+prototype

2.Extend Prototype

© 2012 VeriPark 31
JQUERY - Installation

• Use Google CDN

• Download your own version and place it in your project

(Preferred)

© 2012 VeriPark 32
Ready Event

$(document).ready(function(){

});

– window.onLoad() ?

© 2012 VeriPark 33
Selecting elements

• CSS Syntax
– $(‘p’), $(‘.userComments’), $(‘#username’)

• Javascript reference of the DOM element

© 2012 VeriPark 34
Selecting within a specific context

• $(‘a’, ‘body’), $(‘p’,’div.content’);

© 2012 VeriPark 35
Filtering the result set

$(‘li’).filter( function(index){
return index % 2 == 0;
});

© 2012 VeriPark 36
Finding descendant elements

• jQuery('p').find('em');

© 2012 VeriPark 37
DOM - Traversing

• eq(index)
• next()
• prev()
• parent()
• children()
• nextAll()
• prevAll()

© 2012 VeriPark 38
Operating on DOM elements

• append()
– appendTo() – Target version

• prepend()
– prependTo() – Target version

• after()
– insertAfter() – Target version

• before()
– insertBefore() – Target version

• wrap()
– wrapAll()
– wrapInner()

© 2012 VeriPark 39
Removing & Replacing DOM elements

• remove()

• replaceWith()
– replaceAll()

© 2012 VeriPark 40
Cloning DOM elements

• clone()

© 2012 VeriPark 41
Working on attributes

• attr()

• removeAttr(attributeName)

• Applies to the 1st element when run on a set!

© 2012 VeriPark 42
Dealing with element classes

• addClass()

• hasClass()

• removeClass()

• toggleClass()
© 2012 VeriPark 43
Attribute filtering

– [attr]
– [attr=val]
– [attr!=val]
– [attr^=val]
– [attr$=val]
– [attr~=val]
– [attr*=val]

© 2012 VeriPark 44
INTERMEDIATE TOPICS – Loops in jQuery

• $(selector).each(); //EXCLUSIVELY JQUERY OBJECTS

• JQuery.each(object,callback) // SUPPORTS ALL

© 2012 VeriPark 45
Converting jQuery Objects to DOM Objects

• RAW DOM OBJECT = $(selector).get();

• $jQueryCollection[0] – First element in the set

© 2012 VeriPark 46
Checking the index of an item

• $resultSet.index(elementToSearch)

• If the subject is not found, it returns -1

© 2012 VeriPark 47
Maintaining state

• $jQueryObject.data(object);

© 2012 VeriPark 48
Mapping an array

• $.map(source,callback)

© 2012 VeriPark 49
Handling library conflict and protecting the $ sign

• JQuery.noConflict();

• (function($){})(jQuery);

© 2012 VeriPark 50
PLUGINS – Composing Standards

• Name as jQuery.pluginName-version.js

• Protect the $

• Beware of what to return or if you need the call stack

• Always provide default options and get them

• Watch the this context

• Maintain state

© 2012 VeriPark 51
Context of this and return type

(function($){

$.fn.myPlugin = function() {

return this;
};

})(jQuery);
© 2012 VeriPark 52
Chainability

(function($){

$.fn.myPlugin = function() {
var array = [this[0]];
return this.pushStack(array);
};

})(jQuery);
© 2012 VeriPark 53
PERFORMANCE - Writing faster selectors

• Use the most recent jQuery plugin if possible

• Reduce the selection context size

• Pay attention to Sizzle engine execution order

• Order of selection performance from high to low:

– jQuery built-in filters
– DOM id,
– class,
– tagname
© 2012 VeriPark 54
DOM operations

• When adding new content to DOM, group items in a

container

• Prefer direct JavaScript functions over jQuery when

performance is critical

© 2012 VeriPark 55
Better loops

• jQuery each has a performance hit since it involves

callbacks.
– Prefer for loops when performance is critical
– Avoid for-in on jQuery objects! (WHY?)

• Pay attention to memory leaks in the loop

– Cache selected items in a variable before the loop

© 2012 VeriPark 56
Reduce name lookups

• The closure concept in OOJS section is handy but

requires a global lookup

• Avoid global lookups by creating cached instances of

global or higher scoped functions/variables

© 2012 VeriPark 57
EVENTS - Definition

EVENTS CAN OCCUR WHEN

– An object is clicked or the user enters input

– When the document finishes loading to the browser from the

server

– When an AJAX call gets the response asynchronously

– A totally custom event is fired in response to something

© 2012 VeriPark 58
Event Handler Binding Methods

• bind() – Attaches to element, obsolete

• live() – Attaches to document, obsolete

• delegate() – Attaches to every level, older but

supported by many versions

• on() – Best approach, but supported in newer versions

© 2012 VeriPark 59
Shortcut handlers

– There are many shortwired event handlers built-in to

jQuery with their event names:

click()
ready()
keyDown()
load() … and much more

© 2012 VeriPark 60
Passing data to handlers

Static Data
– The event handler can receive a data object
• .on( events [, selector ] [, data ], handler(eventObject) )

Dynamic Data
– METHOD 1 - data() method of jQuery can hold DOM state.

– METHOD 2 - trigger() method can be supplied with arguments

• Passing: Trigger(‘click’,’data’)
• Usage: .click(function(event,data))

© 2012 VeriPark 61
Event namespaces

• A special notation is present to classify events

in groups similar to CSS class.

– Eventname.Namespace

© 2012 VeriPark 62
Preventing Propagation & Execution

• preventDefault()

• stopPropagation()

• stopImmediatePropagation()

© 2012 VeriPark 63
Event Targets

– event.target

– event.currentTarget

– When delegation is used they are both the same

© 2012 VeriPark 64
AJAX – Methods to use

– load(url,data,completeCallback)
• Loads an HTML fragment into an element

– $.get(url,data,callback,datatype)
• Issues GET request with callback

– $.post(url,data,callback,datatype)
• Issues POST request with callback

– $.getJSON(url,data,callback)
• Gets JSON data with callback

– $.getScript()
• Gets JS code with callback IF the request suceeds (Not JS Execution!)
© 2012 VeriPark 65
The general purpose .ajax() method

– $.ajax(url,settings)

– SETTINGS
• Context
• Filters
• Status Handlers
• XMLHttpObject …
• Deferred and Promise objects ( When – Then )

© 2012 VeriPark 66
JSONP in Action

SCRIPT

JSON { data }

© 2012 VeriPark 67
JSONP in Action

SOLUTION?

SCRIPT

JSON { data }

SCRIPT CONTENT OK CDN e.g. jQ uery

© 2012 VeriPark 68
JSONP in Action

SCRIPT

JSON { data }

When loaded
Runs Callback

$.getScript (AJAX) Create a script that calls

a function with server JSON data

© 2012 VeriPark 69
THANK YOU !