2015 advanced-web-programming
- 4. 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
[Notes] Advanced Web Programming
4Course introduction
- 18. function myAddEventListener(myNode, eventType, myHandlerFunc) {
if (myNode.addEventListener)
myNode.addEventListener(eventType, myHandlerFunc, false);
else
myNode.attachEvent("on" + eventType,
function(event) { myHandlerFunc.call(myNode, event); });
}
Temporary methods using call
a small trick to use compatibility function
f.call(x, 1, 2);
has same effect as
x.foo = f;
x.foo(1, 2);
delete x.foo;
where foo is fresh
( apply is a variant where the arguments are specified as an array)
Implementing listeners
function myHandler(event) {
var e = event ? event : window.event;
this.innerHTML = "Position: " + e.clientX + " x " + e.clientY;
// return ’false’ or ’undefined’ to stop propagation,
// e.g. to prevent default action
}
Using the myAddEventListener helper function, the DOM node where the event handler is
registered is available as ‘this’
Cancelation: the browser’s default actions can be canceled (e.g. form submission)
Capturing and bubbling
[Notes] Advanced Web Programming
18JavaScript
- 44. $("<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
[Notes] Advanced Web Programming
44jQuery
- 45. 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) { ... },
});
[Notes] Advanced Web Programming
45jQuery
- 47. 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
[Notes] Advanced Web Programming
47jQuery
- 56. 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
[Notes] Advanced Web Programming
56Glossary