Client Side Programming 2

Web Information Systems - 2015

Advanced JavascriptLet’s take this a step further

1

Advanced Javascript

Function Prototypes

● Every JavaScript object has a

prototype.

● The prototype is also an object.

● All JavaScript objects inherit their

properties and methods from their

prototype.

src: w3schools

Advanced Javascript

Object Constructor

function person(first, last, age) {

this.firstName = first;

this.lastName = last;

this.age = age;

}

var me = new person(“jeremy”, “Brunn”, 34) src: w3schools

Advanced Javascript

Add a property

● me.favoriteFood = “pizza”

Add a property to a prototype

● person.favoriteFood = “”

Add a method

● me.getName = function() {

return firstName+”“+lastName;

}

src: w3schools

Advanced Javascript

Adding to constructors

function person(first, last, age) {

this.firstName = first;

this.lastName = last;

this.age = age;

this.getName = function() {

return firstName+”

“+lastName;

}

}

src: w3schools

Advanced Javascript

Adding via prototype

person.prototype.getName = function() {

return this.firstName+” “+this.lastName;

}

person.prototype.setFaveFood =

function(food) {

this.favoriteFood = food;

} src: w3schools

Advanced Javascript

Ajax and Callbacks

Asynchronous Javascript and XML

● data to/from the server side

$.ajax({

url: “http://www.someServer.com”

}).done(success_callback)

.fail(fail_callback)

.always(always_callback)

Advanced Javascript

Callbacks

● functions passed to other functions as

arguments.

In the previous example, success_callback

references a function that will be called when

the ajax request completes successfully;

otherwise, the function referenced by

fail_callback will be called. No matter what,

always_callback will be called.

Advanced Javascript

Special Considerations

When requesting data from another domain,

it will probably be necessary to add {

dataType: “jsonp” } to the ajax argument

object.

● Same-origin Policy

● Cross-origin resource sharing

Also, you can’t make an ajax call to your

local computer's file system, you’ll need a

local server running to test.

Advanced Javascript

Javascript Aids

These help clean code and suggest

corrections to problems before they arise.

● JSLint

● JSHint - I prefer this one. It’s not quite so

restrictive.

src: w3schools

Advanced LibrariesDoing more with less

2

Javascript Libraries

Previously, we looked at accessing

elements on the DOM with JQuery.

Now we’ll examine some other things

that we can do with Javascript through

JQuery and other libraries.

Javascript Libraries

DOM Event listeners in JQuery

$(“#submit”).click(function(e){

// do something

})

is shorthand for

$(document).on.(“click”, “#submit”,

function(e){

// do something

})

Javascript Libraries

DOM Event listeners in JQuery

$(“#submit”).click(function(e){

// e is the event to handle

e.preventDefault();

e.stopPropagation();

targetElement = e.currentTarget;

var id = targetElement.id;

// id = “submit”

})

Javascript Libraries

Common Events

◦ click - an element is clicked

◦ dblclick - an element is dbl clicked

◦ focus - an element gets focus

◦ change - an element’s value changes▫ <input>, <textarea>, or <select>

◦ hover - an element is hovered over

◦ keydown - user presses a key on

keyboard

◦ keyup - user releases a key on the

keyboard

Javascript Libraries

Programmatically Triggering Events

$(“#submit”).trigger(“click”);

Javascript Libraries

Iterating elements in JQuery

var liArray = [];

$(“ul#myList > li”).each( function(i) {

liArray.push( $(this).text() );

// add the li text (string) to the array

// this is the current element

// i is the index

});

Javascript Libraries

Iterating in JQuery (and appending el)

var numArray = [ 1, 2, 3, 4, 5 ];

$.each(numArray, function(index, value) {

$(“#myList”).append($(“<li>”).text(value));

// adds lis to the ul “#myList”

});

Javascript Libraries

Underscore

An awesome library for accessing data,

and much more...

instead of JQuery’s “$”, use “_”

First, a comparison.

Javascript Libraries

Iterating lists in underscore

var numArray = [ 1, 2, 3, 4 ];

_.each(numArray, function(value, index) {

$(“#myUL”).append($(“<li>”).text(value));

// adds lis to the ul “#myUL”

});

Notice “value” and “index” are reversed

Also, you cannot break from _.each()

Javascript Libraries

Iterating objects in undescore

var numObj = { a: 1, b: 2, c: 3, d: 4 };

_.each(numObj, function(value, key) {

$(“#myUL”).append(

$(“<li>”).text(key+” : “+value));

// adds lis to the ul “#myUL”

});

Javascript Libraries

Some more examples using this list of

people objects.

var peopleList = [

{ name: ”Jeremy”, role: “student” },

{ name: ”Tanvi”, role: “instructor”

},

{ name: ”Pavan”, role: “student” },

{ name: “Pramod”, role: “student” }

];

Javascript Libraries

_.pluck(numObj, “name”);// [“Jeremy”, ”Tanvi”, “Pavan”, “Pramod”]

_.where(numObj, { role: “instructor”});// [{ name: “Tanvi”, role: “instructor” }]

_.groupBy(peopleList, {role: "student"})// { false: [ { name: "Tanvi", role: "instructor" } ],

true: [ { name: "Jeremy", role: "student" },

{ name: "Pavan", role: "student" },

{ name: "Pramod", role: "student" }

]}

Javascript Libraries

Underscore also provides helper

functions.

_.isNaN()

_.isNull()

_.isEmpty()

_.isFunction()

_.isUndefined()

And more

Javascript FrameworksProduction Ready Code

3

Javascript Frameworks

Javascript is a great language, but it’s

very open, often misunderstood, and

ease to write poorly.

Using a framework can help you

conform to some common

programming practices, like MVC.

Javascript Frameworks

Backbone.js is a great framework that

provides Models, Views, and

Collections that abstract abstracts a lot

of the common functionality of a web

app.

◦ ajax calls

◦ event bindings

◦ model changes

TODO example

All Done