The document discusses advanced JavaScript concepts including function prototypes, object constructors, adding properties and methods, and using callbacks. It then covers using JavaScript libraries like jQuery and Underscore to simplify DOM manipulation, event handling, and iterating over objects and arrays. Finally, it mentions how JavaScript frameworks like Backbone.js can help build production-ready code by enforcing patterns like MVC and abstracting common functionality.

1. Client Side Programming 2
Web Information Systems - 2015

2. Advanced Javascript
Let’s take this a step further
1

3. 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

4. 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

5. 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

6. 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

7. Advanced Javascript
Adding via prototype
person.prototype.getName = function() {
return this.firstName+” “+this.lastName;
}
person.prototype.setFaveFood =
function(food) {
this.favoriteFood = food;
} src: w3schools

8. 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)

9. 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.

10. 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.

11. 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

12. Advanced Libraries
Doing more with less
2

13. 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.

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

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

16. 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

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

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

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

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

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

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

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

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

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

26. Javascript Frameworks
Production Ready Code
3

27. 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.

28. 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

29. All Done