Lecture 5: Client Side Programming 1

adapted from slides by Alan Smith and Paweł Dorofiejczyk.

Web Information Systems - 2015

Client Side Programming 1

Javascript IntroductionJust an overview

1

Javascript Introduction

Javascript is

◦ A prototype-based scripting

language

◦ Dynamic

◦ Loosely typed

◦ Multi-Paradigm

▫ Object-Oriented

▫ Functional

▫ Imperative

Javascript Introduction

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

Javascript Introduction

Anything Else?

◦ Scripting

▫ OpenOffice

▫ Adobe CS

Photoshop

Illustrator

Dreamweaver

◦ Cross-Platform

▫ Enyo

▫ WinJS

Javascript BasicsHow 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 ModelJavascript 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 LibrariesUsable Javascript in the browser

4

Javascript Libraries

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

Javascript Libraries

JQuery

var element =$(“#content”);

element.css(“color”, “blue”);

or element.css({color:”blue”})

$(‘body:first-child’).remove();

Javascript Libraries

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

Javascript Libraries

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

Javascript Libraries

More advanced topics next time...

CREDITS

Special thanks to:

◦ Alan Smith

◦ Paweł Dorofiejczyk

▫ http://www.slideshare.net/PaweD

orofiejczyk/lets-

javascript?qid=35826bbe-211d-

4f50-ad02-29143c7efff2