2015 advanced-web-programming

0
1
2
2.1
2.2
2.3
2.4
3
4
5
6
7
8
Table of Contents
Introduction
Course introduction
JavaScript
AJAX
Client side security
Functions and prototypes
Extensions to ES3
Developer tools
jQuery
node.js
TypeScript
Cross site -scripting and -request forgery (XSRF & XSS)
Frontend
Glossary
[Notes] Advanced Web Programming
2

About this book
These are the notes from the course of the 2015 version of advanced web programming. Do
not distribute without permission.
3Introduction

Course introduction
From lecture 1
Course topics
JavaScript, the browser API, HTML DOM
HTML5
jQuery, AngularJS, React
mostly these libraries
node.js
framework for programming server in javascript
testing web apps
vulnerabilities
flapjax
reactive programming
TypeScript
Microsoft extension of javascript
Invited talks: Dart, V8
Course Objective
About the course Modern web programming involves a range of complex technologies that
must be mastered to build software that is maintainable, secure, and efficient.
[...]
The lectures will focus on the concepts and ideas behind each of the technologies. The
participants will get practical experience through programming exercises, and the
technologies will be compared and evaluated in written reports.
Course goals The participants will after the course be able to apply, compare, discuss, and
evaluate languages and frameworks for advanced web application development.
So why bother?
it's useful
4Course introduction

Group work and assignments
6 mandatory assignments that do not influence grade directly, but are relevant to multiple
choice exam.
Send mail to quist@cs.au.dk with groups of 3-4 people
Use private repositories
Teaching Assistants
Christoffer quist@cs.au.dk: Turing-222
Erik Krogh Kristensen erik@cs.au.dk: Turing-222
Hamid hamid@cs.au.dk: Turing-218
Anders amoeller@cs.au.dk: Turing-224
How to solve problems
You will run into problems
The amateur's approach
google/stackoverflow copy/paste/test/repeat
Progresisonal approach
learn the principles
use the proper documentaiton
use available developer tools
The four rules of AWP
1. learn the principles
key concepts in languages, libraies and fram3works
central programming patterns
organization code for testability and security
2. Use proper doucmentation
3. USe the avilabile dev tools
4. Don't get stuck, ask for help
5Course introduction

Javascript
Motivation
you can run it everywhere
browsers, gui, node.js
“Any application that can be written in javascript will eventually be written in javascript”
~ Atwood's law
Hello world
<html>
<head><title>Hello World!</title></head>
<body>
<script type="text/javascript">
window.alert("Hello World!")
</script>
</body>
</html>
Key concepts of the week
JavaScript as a programming language
Dynamic typing, coercion rules
Dynamic objects
First-class functions, functions as constructors and methods
Dynamic code evalutaiton, exceptions regular expressions
Predefines objects (standard library)
JavaScript in a browser environment
DOM & browser API
event handling, single-threaded event-driven execution
Highlights
Inspired by Java
syntax, name
memory-safe (very strong part of JS()
6JavaScript

Inspired by Self (programming language from '60s or '70s)
class-less object-oriented, prototype-based inheritance
dynamic typing
Inspired by Perl
built in regex
Inspired by functional programming languages
higher-order functions, closures
Dynamic typing
JavaScript has no static type checking
Every value has a type at runtime Automatic typeconversations rather than runtime errors
The type of a variable may change during execution
Memory safety
Example of dynamic typing
var x = 42 // now a number
document.writeln(x) // now a string
x = "foo" // now a string
document.writeln(x) // now a string
Dynamic v static typing
values.sort(function(v1, v2) {
return v2 - v1;
});
Arrays.sort(values, new Comparator<Integer>(){
public int compare(Integer v1, Integer v2) {
return v2 - v1;
}
});
large applications can benefit from the latter solution as types like this also serves as
documentation
7JavaScript

Built-in types
boolean (true, false)
number (IEEE floating point)
string (UTF-16)
null (null)
undefined (undefined)
object
Note: no integer type! no byte type!
Objects
An object is an identity with a collection of named properties
Each property is a primitive value or a reference to an object
That is, an object is just a map from strings to values (associative array)
some properties have special attributes: ReadOnly / DontEnum / DontDelete (most
don't have that)
Tricky example using Rhino
js> var x = { a: 42 }
js> x.a
42
js> x["a"]
42
js> "a" in x
true
js> x.b
js> print(x.b)
undefined
js> x["undefined"] = 7
7
js> x[x.b]
7
js> x.b.c
[...] uncaught JavaScript runtime exception:
TypeError: Cannot read property "c" from undefined
js> delete x.a
js> "a" in x
false
Reflection
8JavaScript

The language's ability to reflect upon it self (check for values etc)
Don't use with keyword
Predefines objects
Boolean
Number
String
Function
Object
Array
Date
Math
RegExp
Type conversion
“The keep on trucking principle”
Some make good sense:
2 is converted to "2" (and vice versa)
1 is converted to true (and vice versa)
"1" == true is true (both sides are converted to 1 )
Some less so:
any whitespace string is converted to 0
1 == "true" is false ( "true" becomes NaN )
"1" + 2 – "3" is 9
if (undefined) A else B takes the else branch, but undefined == false is false
Interesting operators
Assignment: a=b
Equality: a==b (allows coercion)
Identity: a===b
Object.is(...): Object.is(a,b) (new in ES6)
9JavaScript

null == undefined (evaluates to true )
NaN == NaN (evaluates to false )
NaN === NaN (evaluates to false )
0 === -0 (evaluates to true )
Object.is(0,-0) 21 (evaluates to false )
Boolean conversions
All objects coerse to the boolean true (good for checking if object exists, and if you know it
is) “Falsy values”: false, null, undefined "", 0, NaN
Compact way to coerce x from any type to boolean !!x
Surprises with wrapping
creates a wrapper object… and throws it away
js> var x = "AWP"
js> x.a = 42
42
js> print(x.a)
undefined
type coercion from object to boolean
js> var False = new Boolean(false)
js> False
false
js> if (False) {print("TRUE")} else {print("FALSE")}
TRUE
Other surprises with type coercion
var x = ["Advanced","Web","Programming"];
for (var i = 0; i < x.lenght; i++) {
console.log(x[i]);
}
x.lenght has a spelling error, so it acceses the lenght which converts to NaN which
evaluates into false
10JavaScript

Conditional operators
Now they work on any value
a || b has the value b if a is falsy and a otherwise
a && b has the value a if a is falsy and b otherwise
result is not necessarily a boolean
var a = 0;
var b = null;
var c = b || a; // assigns a
var d = b && c; // assigns b
Arrays
Arrays are a special kind of objects
Arrays has a lot of array-specific methods
the length property is automatically updated
setting the length property expands or truncates
var x = [ 1.1, true, "a" ]
var y = new Array(1.1, true, "a")
x[10000] = 42 // arrays may be sparse
var obj = { name: "John Doe", phone: "(202) 555-1414" }
obj[10000] = 42 // normal objects are array-like!!!
Fun with functions
Functions as lambda expressions inc = function(x) {return x+1} (this is a function
expression, not a function declaration)
fibonacci = function f(x) {
if (x <= 1)
return 1
else
return f(x-1) + f(x-2)
}
f is only visible inside the function body
Number of parameters need not match:
11JavaScript

js> function inc(x) { return x+1 }
js> inc(7)
8
js> inc()
NaN
js> inc("x",42)
x1
(inc is a function declaration, not a function expression)
A method is a function that is associated with an object:
js> var counter = {
value: 0,
inc: function() { this.value++ }
}
js> counter.value
0
js> counter.inc()
js> counter.inc()
js> counter.value
2
Careful with this
var x = {
a: 42,
b: function() {return a;}
}
print(x.b())
returns: uncaught JavaScript runtime exception: ReferenceError: "a" is not defined.
var x = {
a: 42,
b: function() {return this.a;}
}
print(x.b())
returns: 42
Functions are objects
function inc(x) { return x+1 }
inc.description = "adds 1 to the given value"
12JavaScript

Good rule of thumb: always write semicolons
and be careful where you insert line breaks
Dynamic code evaluation
eval(s) parses and evaluates the code in the string 's' using hte current scope
Can be used to executing dynamically generated code Use with care (or not at all)
dynamic loading of code from other domains
online JavaScript IDEs
avoid: eval("x."+y) - use x[y]
Exceptions and runtime errors
JavaScript has the usual mechanism with throw, and try-catch-finally (it catches all
exceptions)
JavaScript in a browser environment
JavaScript code embedded in HTML/XHTML documents
Access to
14JavaScript

the DOM (HTML, CSS, events)
general browser state (windows, history buffer..)
See Mozilla's DOM reference here
A few browser functions
The window object provices a basic browser API
window.alert("Hello visitor");
“Level 0 DOM”
(that is incompatable with each other)
DOM level 1 ("W3C DOM")
First and basic DOM standard
15JavaScript

W3C standard
most of it supported uniformly across browsers
Each node has – a childNodes array – an attributes array – a parentNode field – … –
appendChild, removeChild, insertBefore,… functions to update the tree –
getElementsByTagName for querying descendants
Javascript part 2
Monday 9th of November
Key concepts of the week
even handling
AJAX, JSON
Javascript language continued
16JavaScript

prototype machanism
first class closure functions
Event handling
The anciemnt model
<a href="foo.html" onmouseout="alert(’Click me!’)">Hover me!</a>
gives a too tight connection between HTML code and JavaScript (hard to maintain)
<a href="foo.html" id="node42">Hover me!</a>
...
var n = document.getElementById(’node42’);
n.onmouseout = function(e) {alert(’Click me!’);};
a way to fix it is using id, like above -- but only allows one even handler per element and
even type
Using the observer pattern
Old IE (obsolete from IE11)
myNode.attachEvent("onmousemove", myHandlerFunc);
myNode.detachEvent("onmousemove", myHandlerFunc);
Firefox et al. (now also IE) recommended
myNode.addEventListener("mousemove", myHandlerFunc, false);
myNode.removeEventListener("mousemove", myHandlerFunc);
false means register for the bubbling phase
using feature detection (and a closure) (this is a typical example of compatibility
patching)
17JavaScript

It is often useful to listen for events in an entire subtree
Capturing events (Netscape style): an ancestor of the target node may intercept the event
(works top-down)
Bubbling events (Microsoft style): the nearest event handler is processed first (works
bottom-up)
W3C compromise: first capturing, then bubbling
The target is where the event actually occurs (available as event.target in the event handler)
19JavaScript

AJAX
Asynchronous JavasCript and XML
Extends the traditional request-response cycle from HTTP
Allows JavaScript code on the client ot issue HTTP requests back to the server
20AJAX

Example
A primitive AJAX library ajax.js
21AJAX

var http;
if (navigator.appName == "Microsoft Internet Explorer")
http = new ActiveXObject("Microsoft.XMLHTTP");
else
http = new XMLHttpRequest();
function sendRequest(action, responseHandler) {
http.open("GET", action);
http.onreadystatechange = responseHandler;
http.send(null);
}
HTTP persistent connections are not generally exploited (yet?) ajax-demo.html
22AJAX

<html>
<head>
<title>AJAX demo</title>
<script type="text/javascript" src="ajax.js"></script>
var timeout;
function buttonClicked() {
if (http.readyState == 0 || http.readyState == 4) {
// the request object is free
var v = document.getElementById("x").value;
sendRequest("http://cgi-www.cs.au.dk/cgi-amoeller/ixwt/echo?X="+
encodeURIComponent(v), responseReceived);
} else { // let's try again in .5 sec
window.clearTimeout(timeout);
timeout = window.setTimeout(buttonClicked, 500);
}
}
function responseReceived() {
if (http.readyState == 4) // operation completed?
try {
if (http.status == 200) { // OK?
var d = document.createElement("div");
d.innerHTML = http.responseText; // parse HTML
var t = d.getElementsByTagName("table")[0]; // extract table
var r = document.getElementById("result");
r.replaceChild(t, r.firstChild);
} else
alert("Error " + http.status);
} catch (e) { // may occur in case of network error
alert(e);
}
}
</script>
<body>
Enter some text:
<input name="text" id="x" onkeyup="buttonClicked()">
<p>
<div id="result">
no data yet...
</div>
</body>
</html>
Examples
http://cgi-www.cs.au.dk/cgi-amoeller/ixwt/echo?X=y
http://cgi-www.cs.au.dk/~amoeller/ajax/demo.html
23AJAX

Client-side security
No access to client file system etc.
but the JavaScript code can mimic user events (clicking on links, submitting forms, …)
Same-origin policy
a script can read only the properties of window and documents that have the same
origin as the document containing the script
XMLHttpRequest can only contact the origin server
JSON
JavaScript Object Notation
It's a light-weight alternative to XML for data interchange
typically used with AJAX
See json.org
Example
Designed to allow easy parsing
var str_person =
'({"name": "John Doe", "age": 13, "has_kids": false})‘;
var json_person = eval(str_person);
console.log(json_person.name) ;
... security concerns with .eval() -> use JSON.parse
24Client side security

Functions in Javascript
Functions as constructors
this.name = n;
}
var x = new Person("John Doe");
now x is a new object with a name property
Prototypes
Every function object has a prototype property (aka. the explicit prototype link) for sharing
information between instances
new Foo(...) constructs a new empty object, sets the __proto__ property (aka. the internal
prototype link) to the prototype of Foo, and invokes Foo as a constructor
Property lookup searches via the internal prototype link
This is heavily used in the HTML DOM!
Sharing with prototypes
25Functions and prototypes

js> function Foo(n) { this.name = n; Foo.prototype.counter++; }
js> Foo.prototype.counter = 0;
0
js> var x = new Foo("hello");
js> var y = new Foo("world");
js> x.name
hello
js> y.name
world
js> x.counter
2
js> y.counter
2
Another example
Object.prototype.equals = function(other) {
this === other;
}
Object.prototype.hashCode = function() {
if (!(myHashCode in this)) {
this.myHashCode = Math.random();
}
return this.myHashCode;
}

this.name = n || "???";
Person.prototype.count++;
}
Person.prototype.count = 0;
function Student(n,s) {
Person.call(this, n);
this.studentid = s;
}
Student.prototype = new Person;

var x = new Student("Joe Average", "100026");
console.log(x.count); // prints 2
Yet another example
Here we see that writing to a property does not follow the prototype chain! This is of course
not shared with the y property
Reading using the dot or square bracket operator uses the prototype chain
Writing does not!
Variable scope
Declarations may be local to a function or global

<html>
<head><title>AWP</title></head>
<body>
var c = 42;
function f() {
a = 0;
var b = 1;
}
function g() {
alert(a);
}
...
</script>
</body>
</html>
c is global, i.e. a property of the global object (=window)
a is not declared with var and becomes global
b is local to f
f and g are declared in the global scope
no runtime error here if f is called before g
The scope of a variable declaration is the entire function
function f () {
if (condition) {
var b = 1;
}
alert(b); // 1 or ‘undefined’
}
the variable declaration initializes b to undefined the assignment b = 1 is only executed
if the branch is taken
Tricky rules for declarations

Extensions to ES3
E4X
Language extension that adds native XML support
<script type="text/javascript;e4x=1"> (with Firefox )
these days people use JSON
ECMAScript 5
Clarifies various ambiguities and cleaned up minor issues
e.g. the NaN property of the global object is now read-only and evaluation order of > is
now left-to-right (sigh…)
More object reflection capabilities
e.g. Object.getPrototypeOf() , Object.getOwnPropertyDescriptor(obj,prop)
Built-in support for JSON
JSON.parse(text) , JSON.stringify(value)
“Getters” and “setters”
“Sealed” and “frozen” objects
“Strict mode”
well supported by all modern browsers
Getters and setters
33Extensions to ES3

eval still allowed, but it cannot introduce new variables into the surrounding scope (e.g.
eval("var i=3"))
restricted use of arguments, caller, callee
limits access to the global object
…
ECMAScript 2015 (ECMAScript 6)
Convenient syntax:
classes
modules (discussed later in the course…)
arrows (example: v => v+1 shorthand for function(v) {return v+1})
enhanced object literals
string interpolation
destructuring assignment (example: {name, age} = getData();)
default parameters
let, const
…
Improved standard library:
Map, Set – no longer necessary to hack everything into general objects! (but still no
equals/hashCode) – promises – for asynchronous programming (more later in the
course…) – …
New features:
generators and iterators
proxies
symbols (a new primitive type that can be used instead of strings as property names)
tail calls
…
See concise overview at https://github.com/lukehoban/es6features
Classes in ES6 vs. ES3/5
35Extensions to ES3

ES6 support
See http://kangax.github.io/compat-table/es6/
Babel + core.js, Traceur, …
translation to ES5, together with “polyfill”
babel is a “compiler“ from new to old style
core.js adds compatability for new core library to old js
Best practices in JavaScript
Selected best practices from Opera:
avoid globals
stick to a strict coding style (do no rely on browser corrections)
modularize
detect features, not browsers
validate all data
http://dev.opera.com/articles/view/javascript-best-practices/
Google JavaScript Style Guide:
36Extensions to ES3

http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
JavaScript libraries
prototype
jQuery
Dojo
Yahoo UI
mootools
MochiKit
...
37Extensions to ES3

Developer tools
IDEs
WebStorm
Sublime Text
Atom
Visual Studio
eclipse
Cloud9 (online IDE, collab)
Shells
– JS Bin
– JSFiddle
Debugging tools
Developer tools in the browsers
Built in to modern browsers
Essential for ebugging and testing JS
Linters
Proactive code quality tools
Enable in WebStorm in preferences -> Languages & Frameworks -> JavaScript -> Code
Quality Tools
Browser dev tools
good idea to consult websites (eg chrome))
Javascript Minifiers
Size files matters when sending files via HTTP
38Developer tools

Google's closure compiler
One of the most popular minifiers
Demo closure-compiler.blogspot.com
Download link
Browser testing
Browser differences make testing difficults
Browser stack
these are not free, but trails exist
http://browserstack.com
Cross browser testing
http://crossbrowsertesting.com
Grunt
Grunt is a task automation tool
for JSHint and JavaScript minification, it is very common to use Grunt to have a bunch of
tasks (for example hinters and minifiers) run before setting out in production
39Developer tools

jQuery
Quick history
Developed isnce '95
users: wikipedia, msg.org, twitter, wordpress, google ...
67% of the top million web sites use jQuery
Convenient abstractions
CSS3-based DOM navigation
Avoids browser incompatabilities (more relevant previously, but still a good thing)
Convinienves for even handling
Easy to use AJAX
Easy to do animations
Lots of Widgets and user interface components
Tons of plug ins
40jQuery

Appetizer
var checkedValue;
var elements = document.getElementsByTagName('input');
for (var n = 0; n < elements.length; n++) {
if (elements[n].name == 'someRadioGroup' &&
elements[n].checked) {
checkedValue = elements[n].value;
}
}
var checkedValue = $('[name="someRadioGroup"]:checked').val();
Template
<html>
<head><title>my page</title></head>
<script type="text/javascript" src="jquery.js">
</script>
...
</script>
<body>
...
</body>
</html>
Download your own copy of jquery.js
or link to e.g.http://code.jquery.com/jquery-2.1.1.min.js
Two branches: v1.X and v2.X (2 removes lots of compatability features)
$ function
Main object in jQuery
highly overloaded
function with different meanings depending on arguments
object with properties giving access to lots of other functionality
41jQuery

Document ready handler
$(function() {…})
function is executed when all html has been loaded, but before external resources (images)
has been loaded
Declarative DOM navigation
$(selector)
evaluates to a "wrapped set" of DOM elements
$(img').toggle()
can be chained $('img').toggle().addClass('anImage')
variant $(selector, context) select realtive to the given context instead of document
root
Operations on wrapped element sets
most of the functions in the jQuery API are methods on wrapped sets
get(index) - obtains the underlying DOM element
each(function) - applies the function to each element
$('img').each(function(n) {
alert('Image ' + n + ' has ID ' + this.id);
})
Wrapping a DOM element
$(element) where element is a DOM element
evaluates to a wrapped set containing the element
42jQuery

$('div.foo').click(function() {
$(this).slideUp();
});
also works for arrays of DOM elements
CSS3 selectors
elem – matches elements with tag name elem
#id – matches elements by ID
.class – matches elements by class name
e f – matches f if descendant of e
e > f – matches f if child of e
e[a] – matches e elements with an a attribute
e[a='v'] – matches e elements with an a="v" attribute
:first – matches the first within the context
:nth-child(N) – matches the N’th child
...
Extra selectors
:animated
:hidden
:visible
:checked
:selected
...
Dom construction
$(html) where html is a string that looks like HTML
creates a wrapped set of new DOM elements corresponding to the HTML string
$('<p id="test">My <em>new</em> text</p>')
.appendTo('body');
the variant $(html, props) adds attributes specified by the props object
43jQuery

$("<div/>", {
"class": "test",
text: "Click me!",
click: function() {
$(this).toggleClass("test");
}
}).appendTo('body');
DOM manipulation
More operations on wrapped sets
attr(name), attr(name,value), attr(attributes) – attributes
prop(name), prop(name,value), prop(properties) – properties
data(name,value), data(name) – custom data
addClass(names), removeClass(names), toggleClass(names,switch) – change class
attributes
css(name,value), css(properties), css(name) – CSS properties
html(), html(content), text(), text(content) – HTML
empty(), append(content), appendTo(targets), wrap(wrapper), remove(selector),
replaceWith(content) – element content
44jQuery

val() – value attributes
We have many different ways of writing the same thing
if (elem.checked) {...}
if ($(elem).prop("checked" )) {...}
if ($(elem).is(":checked" )) {...}
if ($(elem).attr("checked" )) {...}
They do slightly different things the last is very bad, as it only checks for the initial
values, and the first doesn't really handle incompatability issues
(notice the use of overloading!)
Utlity functions
$.foo
$.trim(str)
$.each(container, function
$.map(array, function)
$.param(params)
$.parseJSON(json)
$.getScript(url, callback)
$.extend(target, source1, ..., sourceN)
$.support - feature detection
Event handling
jQuery provides a unified model for establishing event handlers
$('img').on('click', function(event) {
alert('Hi there!');
});
$('img').on({
click: function(event) { ... },
mouseenter: function(event) { ... },
mouseleave: function(event) { ... },
});
45jQuery

The event object is normalized according to w3c standards
target
relatedTarget
pageX
pageY
which
metaKey
jQuery.Event
Event delegation
$("#dataTable tbody tr").on("click", function() {
alert($(this).text());
});
vs (using event delegation)
$("#dataTable tbody").on("click", "tr", function() {
alert($(this).text());
});
event delegation only registers one event handler
2nd version also works for elements creates later, because tbody object works as it is
Animations
$('div.caption img').click(function() {
$(this).closest('div.module').find('div.body')
.toggle('slow');
});
.show(), hide(), toggle()
.fadeIn(), fadeOut()
slideDown(), slideUp()
Internally use CSS properties and timeout 33 event handlers...
46jQuery

Custom animations
$('.animateMe').each(function() {
var pos = $(this).position();
$(this)
.css({
position: 'absolute',
top: pos.top,
left: pos.left})
.animate({
opacity: 'hide',
width: $(this).width()*5,
height: $(this).height()*5,
top: pos.top–($(this).height()*5/2),
left: pos.left-($(this).width()*5/2)
}, 'normal');
});
AJAX
Load HTML from the server, insert it using .innerHTML
$('foo').load('/myapp/bar');
load(url,parameters,callback)
POST if parameters specified, otherwise GET (create GET parameters with
$.param(parameters))
x.serialize() – creates query string from form elements in the wrapped set x
Useful variants
$.get(...),$.post(...),$.getJSON(...),$.ajax(...)
jQuery UI
http://jqueryui.com/demos/
http://jqueryui.com/download
Interactions
Draggable
Droppable
Resizable
47jQuery

Selectable
Sortable
Widgets
Accordion
Autocomplete
Button
Datepicker
Dialog
Progressbar
Slider
Tabs
A jQuery UI example
<style>
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif')
right center no-repeat;
}
</style>
<div class="ui-widget">
<label for="search">Search: </label>
<input id="search" />
</div>
<div class="ui-widget">
Result:
<div id="log" class="ui-widget-content"></div>
</div>
<script>
$(function() {
function log(message) {
$('<div/>').text(message).appendTo('#log');
}
$('#search').autocomplete({
source: "/myapp/search",
minLength: 2,
select: function(event,ui) {
log(ui.item
? "Selected: " + ui.item.value + " aka " + ui.item.id
: "Nothing selected, input was " + this.value );
}
});
});
</script>
48jQuery

49jQuery

node.js
Hello world
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello Worldn');
}).listen(8080, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8080/');
50node.js

TypeScript
What is TypeScript TypeScript is a programming language that adds to JavaScript (thus
making TypeScript a superset of JavaScript) and can be compiled back in to JavaScript. It
adds optional typing, as well as the ability to declare interfaces, modules (namespace) and
classes. Because of this, any valid JavaScript code is also valid TypeScript.
Setup
Installing
npm install -g typescript
Compiling
tsc helloworld.ts
Typing
Optional typing is demonstrated in the example below
function greeter(object: string) {
return "Hello " + object;
}
console.log(greeter("world")); // Works fine
console.log(greeter({})); // Throws error
Classes
Creating classes and extending them is possible with TypeScript without accessing the
prototype object directly. An example of this is below
51TypeScript

class Pet {
constructor(private name: string) {
}
getName() {
return this.name
}
}
class Dog extends Pet {
constructor() {
super("Dog");
}
}
var dog = new Dog();
console.log(dog.getName()); // outputs Dog
Namespaces
Namespaces are an implementation of the module pattern often used in JavaScript.
TypeScript has a keyword that simplifies this pattern.
namespace pets {
class Pet {
}
getName() {
return this.name
}
}
export class Dog extends Pet {
constructor() {
super("Dog");
}
}
}
var pet = new pets.Pet("Pet"); // creates a TypeError because Pet isn't exposed
var dog = new pets.Dog(); // possible because of the export keyword
Interfaces
interface Point { x: number; y: number; } var coord: Point = {x: 0, y: 0}; // works because the
object contains both elements var axis: Point = {x: 0}; // creates a warning as the object only
contains one object
52TypeScript

Combining it
Below is an example of using all of the above features in a single code base
namespace pets {
class Pet {
}
getName() {
return this.name
}
}
export class Dog extends Pet {
constructor() {
super("Dog");
}
sound() {
return "Wuf";
}
}
}
class Leaf {
getName() {
return "Leaf"
}
}
interface Animal {
getName()
sound()
}
function makeNoise(thing: Animal) {
document.body.innerHTML = thing.sound();
}
var leaf = new Leaf();
var dog = new pets.Dog();
makeNoise(dog); // sets document text to "Wuf"
makeNoise(leaf); // creates a TypeError: thing.sound is not a function
53TypeScript

Cross site -scripting and -request forgery
(XSRF & XSS)
XSS
Cross site scripting XSS enables attackers to inject client-side script into web pages
viewed by other users. (source wiki)
Example from exercies
You can also do XSS by injecting a value into an HTML attribute. Inject a script by setting the
color value in a profile
green' onMouseOver="alert(hi xss)"
XSRF
Cross site request forgery also known as one-click attack or session riding is a type of
malicious exploit of a website where unauthorized commands are transmitted from a user
that the website trusts. Unlike cross-site scripting (XSS), which exploits the trust a user has
for a particular site, CSRF exploits the trust that a site has in a user's browser. (source wiki)
Example from exercies
Find a way to get someone to delete one of their Gruyere snippets.
To delete someone's snippet (the top one is always zero) just redirect to the following url.
https://google-gruyere.appspot.com/142183708691/deletesnippet?index=0
54Cross site -scripting and -request forgery (XSRF & XSS)

Frontend
Reflections on React, Angular and Flapjax These are the group's reflections based on the
movie rating assignment
Presenting content
React stands out by using JSX, a mixture between Javascript and XML to emulate HTML
syntax but actually manipulating the DOM through javascript. An example that shows JSX
and it's Javascript counterpart taken from the react docs below:
// Input (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// Output (JS):
var app = React.createElement(
Nav,
{color:"blue"},
React.createElement(Profile, null, "click")
);
This differs from Angular that uses a templating language or Flapjax that only really uses
javascript.
Custom elements
Both React (through components) or Angular (through directives) provides a mean of
creating reusable elements that can be produced in the DOM. Flapjax differs having only
short hands for creative reactive default html elements, but not an internal function in the
language to define your own (which is good for reusability)
Application architecture
Angular relies on one or more controllers, an application and then directives that ultimately
describe views and their models. React has a similar separation of concerns yet it seems
each component handles its view as well as its own internal model. Flapjax architectures
resemble a more functional approach, everything being able to be described as a function of
an event from a stream.
55Frontend

Glossary
AJAX
Asynchronous Java and XML
2.1. AJAX 2.2. Client side security 2. JavaScript 4. jQuery
Atwood's law
“Any application that can be written in JavaScript will eventually be written in JavaScript”
2. JavaScript
DOM
Document Object Model
2.3. Functions and prototypes 1. Course introduction 8. Frontend 2. JavaScript
4. jQuery
encapsulation
The combination of program code and data, and/or restriction of access to data from except
through dedicated code
2.3. Functions and prototypes 2.4. Extensions to ES3
ES6
ES6 - ECMAScript 6
2.4. Extensions to ES3 2. JavaScript
Rhino
56Glossary

Rhino is a JavaScript engine written fully in Java and managed by the Mozilla Foundation as
open source software. It is separate from the SpiderMonkey engine, which is also developed
by Mozilla, but written in C++ and used in Mozilla Firefox.
57Glossary

2015 advanced-web-programming

More Related Content

What's hot

Similar to 2015 advanced-web-programming

Recently uploaded

2015 advanced-web-programming