Lecture 5: Client Side Programming 1
-
Upload
knoesis-center-wright-state-university -
Category
Education
-
view
66 -
download
4
Transcript of Lecture 5: Client Side Programming 1
![Page 1: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/1.jpg)
adapted from slides by Alan Smith and Paweł Dorofiejczyk.
Web Information Systems - 2015
Client Side Programming 1
![Page 2: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/2.jpg)
Javascript IntroductionJust an overview
1
![Page 3: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/3.jpg)
Javascript Introduction
Javascript is
◦ A prototype-based scripting
language
◦ Dynamic
◦ Loosely typed
◦ Multi-Paradigm
▫ Object-Oriented
▫ Functional
▫ Imperative
![Page 4: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/4.jpg)
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
![Page 5: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/5.jpg)
Javascript Introduction
Anything Else?
◦ Scripting
▫ OpenOffice
▫ Adobe CS
Photoshop
Illustrator
Dreamweaver
◦ Cross-Platform
▫ Enyo
▫ WinJS
![Page 6: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/6.jpg)
Javascript BasicsHow to use it
2
![Page 7: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/7.jpg)
Javascript Basics
Local Variables
Introduce Variables with “var”
◦ var myString = “Hi”;
◦ var myNumber = 1;
◦ var myOtherNumber = 1.1;
◦ var myBoolean = true;
![Page 8: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/8.jpg)
Don’t Create a
Variable Without
var!This is a Global Variable Declaration.
Don’t do this!
![Page 9: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/9.jpg)
Javascript Basics
Variable Types
typeof
◦ typeof “hi”; // string
Gotchas
◦ typeof []; // object
◦ typeof null; // object
◦ typeof NaN;// number
![Page 10: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/10.jpg)
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
![Page 11: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/11.jpg)
Javascript Basics
Function Syntax
function foo() {
console.log(“hello world”);
}
is equivalent to the anonymous
var foo = function() {
console.log(“hello world”);
}
![Page 12: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/12.jpg)
Javascript Basics
Function Args
Primitives
◦ always passed by value
Objects
◦ passed by reference
![Page 13: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/13.jpg)
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
![Page 14: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/14.jpg)
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 (!!!)
![Page 15: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/15.jpg)
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 !!!
![Page 16: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/16.jpg)
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
![Page 17: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/17.jpg)
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
![Page 18: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/18.jpg)
Javascript Basics
A Simple Object
◦ var obj = {};
A Little More
◦ var obj = {
name: “Simple Object”
}
Access via
◦ obj.name
◦ obj[“name”]
![Page 19: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/19.jpg)
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.
![Page 20: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/20.jpg)
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;
![Page 21: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/21.jpg)
The Document Object ModelJavascript in the browser
3
![Page 22: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/22.jpg)
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
![Page 23: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/23.jpg)
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);
![Page 24: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/24.jpg)
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);
![Page 25: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/25.jpg)
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.
![Page 26: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/26.jpg)
Javascript LibrariesUsable Javascript in the browser
4
![Page 27: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/27.jpg)
Javascript Libraries
Popular Libraries
◦ jQuery
◦ Underscore
◦ Backbone
◦ Angular
Let’s take a look at the difference...
![Page 28: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/28.jpg)
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();
![Page 29: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/29.jpg)
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' });
![Page 30: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/30.jpg)
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");
![Page 31: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/31.jpg)
Javascript Libraries
More advanced topics next time...
![Page 32: Lecture 5: Client Side Programming 1](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4de011a28ab4e768b4653/html5/thumbnails/32.jpg)
CREDITS
Special thanks to:
◦ Alan Smith
◦ Paweł Dorofiejczyk
▫ http://www.slideshare.net/PaweD
orofiejczyk/lets-
javascript?qid=35826bbe-211d-
4f50-ad02-29143c7efff2