1. HTML5 & JavaScript
New JavaScript APIs

2. Introduction
• Petri Niemi
• Specialist, Tieturi Oy
• petri.niemi@tieturi.fi
• Currently focusing mainly on JavaScript
• Naturally also HTML and CSS
• Other areas of interest:
• Java, C++
• Mobile
Copyright © Tieturi Oy
2

3. Web Standards – JavaScript
• ECMAScript (ECMA 262)
• http://www.ecma-international.org/publications/standards/Ecma-262.htm
• ECMAScript 6 currently under development
Copyright © Tieturi Oy
3
JavaScript
yr. 1995
ECMAScript
yr. 1997
ECMA 262
3rd rev.
yr. 1999
ECMA 262
5th rev.
yr. 2009

4. HTML5 & JavaScript
• HTML5 alone does not take you very far
• It's mostly about semantics, semantics, semantics, …
• …and a little bit about media and graphics
• Most of the "cool stuff" is actually implemented using
JavaScript
• Basics of JavaScript are easy to learn
• However, it is actually a very difficult language to master
• Most of the new JavaScript APIs are not part of the
HTML5 specification
• Developed separately
Copyright © Tieturi Oy
4

5. New APIs
http://en.wikipedia.org/wiki/File:HTML5-APIs-and-related-technologies-by-Sergey-Mavrody.png
Copyright © Tieturi Oy
5

6. Why Is JavaScript Important?
• Thick clients
• Less traffic between client and server
• RIA
• Rich internet applications
• User experience closer to native applications
• SPA
• Single page applications
• More on this later
Copyright © Tieturi Oy
6

7. Selected Examples
• Let's take a brief look at some example code
• Download code from:
http://www.tieturi.fi/media/code_examples.zip
• Web Storage
• Geolocation API
• File API
• Web Workers
• Web Sockets
• Canvas
Copyright © Tieturi Oy
7

8. Single Page Applications
• Most of the APIs we saw are fairly trivial to use
• Anyone can copy-paste and understand the examples
• However, more and more web applications are so called
"single page applications" (SPA)
• Very few lines of static HTML code
• Almost all the content is generated in JavaScript dynamically
• Try e.g. Hotmail or Gmail with JavaScript turned off in your
browser…
• This is when your code becomes non-trivial
• You will need to modularize your code
• And perhaps use a MVC library of some sort
Copyright © Tieturi Oy
8

9. Thank You!
• Let's end with a tiny teaser…
• Can you figure out what happens here?
• If it is not clear what the code does, feel free to ask:
petri.niemi@tieturi.fi
Copyright © Tieturi Oy
9
var foo = "AAA";
function bar() {
if (!foo) { // If foo does not exist already
var foo = "BBB";
}
alert(foo); // What does this print and why?
}
bar();

10. Tieturi Web Courses
• http://www.tieturi.fi/web
• JavaScript Programming
• Advanced JavaScript Programming
• HTML & CSS courses
• Mobile web courses
• Social media courses
• Web analytics – Google analytics
• Search engine optimization, web site usability and accessibility
Copyright © Tieturi Oy
10