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