Lecture 5: Client Side Programming 1

adapted from slides by Alan Smith and Paweł Dorofiejczyk.
Web Information Systems - 2015
Client Side Programming 1

Javascript Introduction
Just an overview
1

Javascript is
◦ A prototype-based scripting
language
◦ Dynamic
◦ Loosely typed
◦ Multi-Paradigm
▫ Object-Oriented
▫ Functional
▫ Imperative

What’s it Good For?
◦ Web Apps (Client Side)
▫ Provides programmatic access to
certain browser features, your
page's elements, their properties,
and their styles
◦ Server Side
▫ node.js
◦ Databases
▫ MongoDB, CouchDB

Anything Else?
◦ Scripting
▫ OpenOffice
▫ Adobe CS
 Photoshop
 Illustrator
 Dreamweaver
◦ Cross-Platform
▫ Enyo
▫ WinJS

Javascript Basics
How to use it
2

Javascript Basics
Local Variables
Introduce Variables with “var”
◦ var myString = “Hi”;
◦ var myNumber = 1;
◦ var myOtherNumber = 1.1;
◦ var myBoolean = true;

Don’t Create a
Variable Without
var!
This is a Global Variable Declaration.
Don’t do this!

Javascript Basics
Variable Types
typeof
◦ typeof “hi”; // string
Gotchas
◦ typeof []; // object
◦ typeof null; // object
◦ typeof NaN;// number

Javascript Basics
Functions
◦ Are objects
◦ Can be anonymous with reference
stored in a variable
▫ no name necessary
◦ Can create other functions
▫ try not to do this
◦ Are closures
▫ have there own scope
◦ Prototypes
▫ more on this later

Javascript Basics
Function Syntax
function foo() {
console.log(“hello world”);
}
is equivalent to the anonymous
var foo = function() {
console.log(“hello world”);
}

Javascript Basics
Function Args
Primitives
◦ always passed by value
Objects
◦ passed by reference

Javascript Basics
Function Args
var test = function(a, b, obj) {
obj.modified = true;
console.log(arguments);
}
var obj = {};
console.log(obj.modified); // undefined
test(1, 'a', obj);
// { '0': 1, '1': 'a', '2': { modified: true } }
console.log(obj.modified); // true

Javascript Basics
Function Scope
◦ Static (lexical)
◦ Created only by function
◦ Function arguments becomes part of
scope
◦ Child scope have reference to
parent scope (scope chain)
◦ this is not scope (!!!)

Javascript Basics
Function Scope
var accumulator = function(x) {
this.sum = (this.sum || 0) + x;
return this.sum;
}
console.log(accumulator(1)); //1
console.log(accumulator(1)); //2
console.log(accumulator.sum); //undefined
console.log(sum); // 2 !!!

Javascript Basics
Notes on “this”
}
var bar = function(x) {
this.x = x;
return this.x;
}
} ← this refers to the global scope by default
In the browser, “this” refers to window

Javascript Basics
Objects
◦ Dynamic
◦ non-ordered
◦ key-value pairs
◦ Array access or object access
◦ Iterable
◦ Created in runtime
◦ Object literal {}
◦ No privacy control at object level
◦ Prototypal inheritance
◦ Constructor functions

Javascript Basics
A Simple Object
◦ var obj = {};
A Little More
◦ var obj = {
name: “Simple Object”
}
Access via
◦ obj.name
◦ obj[“name”]

Javascript Basics
Special Operators
◦ “+” will also concat two strings
▫ 1 + 2 = 3 (as expected)
▫ “foo”+”bar” = “foobar”
◦ Unary “+” will change type
▫ +”1” = 1
◦ “===” and “!==” should be used
instead of “==” and “!=” as the former
will not attempt type conversion.

Javascript Basics
More Special Operators
◦ “&&” and “||” can be used outside of
conditionals for smaller, though less
readable code.
▫ “&&” will guard against null refs
 return obj && obj.name;
▫ “||” will let you assign values only if
they exist.
 var x = name || obj.name;

The Document Object Model
Javascript in the browser
3

The DOM
In the DOM, everything is a node:
◦ The document itself is a document node
◦ All HTML elements are element nodes
◦ All HTML attributes are attribute nodes
◦ Text inside HTML elements are text nodes
◦ Comments are comment nodes
w3Schools

The DOM
Programmatically access page
elements
Create new elements by:
◦ var paragraph = document.createElement('p');
◦ paragraph.id = 'content';
◦ paragraph.appendChild(document.createText
Node('Hello, world'));
Don’t forget to add the element to the DOM
◦ document.body.appendChild(paragraph);

The DOM
Manipulate them by:
Setting properties
◦ var element =
document.getElementById('content');
element.style.color = 'blue';
Calling methods
◦ var firstNode = document.body.childNodes[0];
document.body.removeChild(firstNode);

The DOM
Understanding the DOM is important…
But it is verbose, tedious, may not
behave as expected across browsers.
This leads to implementation and
maintainability issues.

Javascript Libraries
Usable Javascript in the browser
4

Popular Libraries
◦ jQuery
◦ Underscore
◦ Backbone
◦ Angular
Let’s take a look at the difference...

Javascript
var element =
document.getElementById('content');
element.style.color = 'blue';
var firstNode =
document.body.childNodes[0];
document.body.removeChild(firstNode);
JQuery
var element =$(“#content”);
element.css(“color”, “blue”);
or element.css({color:”blue”})
$(‘body:first-child’).remove();

$ is the global jQuery object
◦ It has its own properties and methods
$ is also a function you can call
◦ $.getJSON('student-list.php');
Relies heavily upon the familiar CSS selector
syntax and the Composite design pattern
◦ $('.urgent').css({ backgroundColor: 'red', color:
'white' });

Many methods are both getters and setters,
depending on the parameter(s), or lack thereof
Many of its functions return a jQuery object as
well, which allows method chaining
◦ $("p.neat").addClass("ohmy").show("slow");

Lecture 5: Client Side Programming 1

More Related Content

What's hot

Similar to Lecture 5: Client Side Programming 1

Recently uploaded

Lecture 5: Client Side Programming 1