Lecture 6: Client Side Programming 2

Client Side Programming 2
Web Information Systems - 2015

Advanced Javascript
Let’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 Libraries
Doing 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.

DOM Event listeners in JQuery
$(“#submit”).click(function(e){
// do something
})
is shorthand for
$(document).on.(“click”, “#submit”,
function(e){
// do something
})

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”
})

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

Programmatically Triggering Events
$(“#submit”).trigger(“click”);

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
});

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”
});

Underscore
An awesome library for accessing data,
and much more...
instead of JQuery’s “$”, use “_”
First, a comparison.

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()

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”
});

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” }
];

_.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" }
]}

Underscore also provides helper
functions.
_.isNaN()
_.isNull()
_.isEmpty()
_.isFunction()
_.isUndefined()
And more

Javascript Frameworks
Production Ready Code
3

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.

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

Lecture 6: Client Side Programming 2

More Related Content

What's hot (20)

Similar to Lecture 6: Client Side Programming 2 (20)

Recently uploaded (20)

Lecture 6: Client Side Programming 2