JavaScript
The World's Most Misunderstood Programming Language
Tiago Rodrigues
tmcrodrigues@gmail.com
http://trodrigues.net

What is it ?
JavaScript IS NOT Java

What is it ?
JavaScript IS NOT Java
Created in 1995 by Netscape (LiveScript)

What is it ?
JavaScript IS NOT Java
Created in 1995 by Netscape (LiveScript)
ECMAScript standard
JScript and ActionScript, also based on ECMAScript

What is it ?
JavaScript IS NOT Java
Created in 1995 by Netscape (LiveScript)
ECMAScript standard
JScript and ActionScript, also based on ECMAScript
Dynamic, Weakly typed

What is it ?
JavaScript IS NOT Java
Created in 1995 by Netscape (LiveScript)
ECMAScript standard
JScript and ActionScript, also based on ECMAScript
Dynamic, Weakly typed
Object Oriented, Prototype based

What is it ?
JavaScript IS NOT Java
Created in 1995 by Netscape (LiveScript)
ECMAScript standard
JScript and ActionScript, also based on ECMAScript
Dynamic, Weakly typed
Object Oriented, Prototype based
Functional features

What can we do with it ?
Scripting language created for programmatic access of
webpage objects

What can we do with it ?
Scripting language created for programmatic access of
webpage objects
Currently also used for:
Application scripting
Server side scripting

JavaScript we see everyday
This application (Google Docs)

JavaScript we see everyday
Gmail, SAPO Mail, Google Reader

JavaScript we see everyday
Rich text editors

JavaScript we see everyday
Ads

JavaScript we see everyday
Comment systems (SAPO Comments, Disqus)

Why people hate it
Bad uses
Popup ads, annoying animations

Why people hate it
Bad uses
Popup ads, annoying animations
Bad practices lead to slower code

Why people hate it
Bad uses
Popup ads, annoying animations
Bad practices lead to slower code
Many books advocated wrong practices for years
Lots of bad tutorials and bad code all over the web
People didn't want to learn, so they replicated the bad
code

Why developers hate it
Standard is incoherent

Why developers hate it
Standard is incoherent
Being solved !

Why developers hate it
Standard is incoherent
Being solved !
Bad implementations

Why developers hate it
Standard is incoherent
Being solved !
Bad implementations
Browser differences

Why developers hate it
Standard is incoherent
Being solved !
Bad implementations
Browser differences
However, it will take time...

Learning the language
Basic syntax is similar to C-like languages
Code goes in .js files or HTML <script> tag
Comments are the same as C
alert("Hello world ! JavaScript is awesome !");

Variables
var hello = "world";
var keyword: local variable
No need to declare types

Variables
Variable types
Numbers var num = 1;
Strings var str = "hi !";
Objects var obj = new Object();
Arrays var arr = ["string", 2];
Functions var fun = function() {};
Regexps var regexp = /^jssrocks/;
Numbers, Strings, Regexps and Functions are
really Objects

Variables
Be careful...
"30a".parseInt();
"40.5".parseInt();
"40.5".parseFloat();

Variables
Strings
Concatenation
"Tiago" + " " + "Rodrigues"

Variables
Strings
Concatenation
"Tiago" + " " + "Rodrigues"
typeof(26 + "px"); // string
typeof 26; // number

Variables
Other values
true, false
null
undefined

Control structures
Control structures
if (cond) { ... } else { ... }
while (cond) { ... }
do { ... } while (cond);
for (cond) { ... }
switch (expr) { case ... : ... ; break; }
try { ... } catch (exception) { ... }

Learning the language
Control structures
for (var i=0; i<10; i++) { ... }
for (var i in obj) { ... }

Objects
var obj = {
property: value
}

Objects
var obj = {
"name": "content",
other_name: 1,
this_is_an_array: [1, 2, 3],
"this-would-be": "wrong"
}
alert(obj.name); // content
alert(obj["name"]); // content

Functions
function add(a, b) {
return a + b;
}

Functions
function add(a, b) {
return a + b;
}
Wrong ! Function goes global !

Functions
function add(a, b) {
return a + b;
}
Wrong ! Function goes global !
But functions are objects !
var add = function(a, b) {
return a + b;
}

Functions
var module = {
add: function(a, b) {
return a + b;
},
sub: function(a, b) {
return a - b;
}
}
module.add(1, 2); // 3

Context
Why is context so important ?
var fun = function(){
var num = 1;
silly_var = 2;
alert(num); // 1;
}
alert(num); // undefined
alert(silly_var); // 2

Context
Why is context so important ?
var module = {
str: "blah",
print: function() {
alert(this.blah);
}
}
module.print(); // blah
However, this can be ambiguous, so be careful.

Functional features
Let's go functional !
var fun = function(callback) {
callback();
}
fun(function() {
alert("I'm anonymous !");
});

Closures
var fun = function() {
var num = 1;
var inner = function() {
alert(num);
}
inner(); // nothing happens...yet
}
fun(); // 1
inner(); // undefined

Available objects
Numbers, Strings, Arrays all have methods
There are many more available objects:
Math, Date, etc*
* https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference

Available objects
Examples:
var str = "Tiago Rodrigues";
str.split(" "); // ["Tiago", "Rodrigues"];
Math.sqrt(36); // 6
var arr = [4, 6, 3, 7];
arr.sort(); // [3, 4, 6, 7]

Object orientation
But JavaScript is Object Oriented
So how do we create object instances ?
We use prototypes !

Classes
Defining a class
var Book = function(name) {
this.init(name);
}
Book is a constructor

Prototypes
Let's add attributes and methods to our class
Book.prototype = {
name: "", // this is an attribute
// this is a method
init: function(name) {
this.name = name;
},
sayName: function() {
alert(this.name);
}
};

Prototypes
So let's create some books
var good_parts = Book("The Good Parts");
good_parts.sayName(); // The Good Parts
var def_guide = Book("The Definitive Guide");
def_guide.sayName(); // The Definitive Guide

Prototypes
But why is this so great ?
Book.prototype.removeName = function() {
this.name = "";
}
Extending default objects
String.prototype.trim = function() {
return this.replace(/^s+|s+$|n+$/g, '');
}
" trim me ".trim(); // "trim me"

The Document Object Model
API for (X)HTML files
Tree representation of all the objects in a file
Each object has properties and methods
Not the same in every browser
Mostly IE not up to date

The Document Object Model
window represents your browser window
document represents your current document
document.forms is an array with all your form fields
Many other objects are available

Selecting objects
<div id="content">
blah
</div>
var div = document.getElementById("content");
alert(content.innerHTML); // blah

Event handling
<a href="#" onClick="alert('hi')">click me</a>
<a href="#" id="link">click me</a>

Event handling
<a href="#" onClick="alert('hi')">click me</a>
<a href="#" id="link">click me</a>
On the JS file:
var lnk = document.getElementById("link");
if (lnk.addEventListener){
lnk.addEventListener(
'click', handler, false);
} else if (lnk.attachEvent){
lnk.attachEvent('onclick', handler);
}

Object properties
<a href="#" id="link">click me</a>
On the JS file:
var lnk = document.getElementById("link");
lnk.href = "file.html";
lnk.style.color = "#000";

Basic output on a browser
Alert
alert("Hi !");
Confirm
confirm("Are you there ?");
// returns true or false
Prompt
prompt("What's your name ?");

Timing
Flashing an alert box after 5 seconds
setTimeout(function() {
alert("click me !");
}, 5000);

Timing
Flashing an alert box after 5 seconds
setTimeout(function() {
alert("click me !");
}, 5000);
Flashing a box every 5 seconds
var int = setInterval(function() {
if(confirm("Stop ?")) {
clearInterval(int);
}
}, 5000);

JSON
JavaScript Object Notation *
{
"name" : "Tiago Rodrigues",
"age" : 24,
"profession" : "JavaScript developer"
}
Other languages have similar structures
There are libraries available on every popular language
* http://json.org

Ajax
Asynchronous Javascript And XML*
Fetching content through JavaScript
with the use of the XMLHttpRequest object
Server doesn't send an entire page, only what's needed
Insert the content in the current page through JavaScript
* http://adaptivepath.com/ideas/essays/archives/000385.php

Ajax
* http://adaptivepath.com/ideas/essays/archives/000385.php

Ajax
Content can be
HTML
XML
JSON

Libraries and frameworks
Extend the base language
Abstract browser differences
Selectors
Events
AJAX
Add widgets and reusable modules

Libraries and frameworks
Problems
Many library users don't learn the base language

Libraries and frameworks
Problems
Many library users don't learn the base language
Because of this, they abuse the base language

Libraries and frameworks
Problems
Many library users don't learn the base language
Because of this, they abuse the base language
This leads to performance problems

Libraries and frameworks
Problems
Many library users don't learn the base language
Because of this, they abuse the base language
This leads to performance problems
So...be careful !

Libraries and frameworks
Prototype / script.aculo.us
jQuery / jQuery UI
Dojo
LibSAPO.js
Many others: extjs, Mootools, etc
Ajaxian* has a great list
* http://ajaxian.com

Good practices
Unobtrusive JavaScript
Not blocking possible actions
Making them available without JavaScript
Progressive Enhancement and Graceful Degradation
Build your website with no JavaScript at all
Add it later to improve user experience
This way, the website will degrade gracefully
Verify your code !
http://jslint.com/
* http://andr3.net/blog/post/141

Other uses
Server Side JS
Narwhal
Node.js
Adobe AIR / Tweetanium
Extensões Google Chrome
Extensões Mozilla Firefox (Jetpack)
Phonegap, Mojo, W3C Widgets (Opera widgets)
Platform scripting
.NET
J2EE (Rhino)

References
Books
JavaScript: The Definitive Guide
JavaScript: The Good Parts
http://javascript.crockford.com
http://developer.mozilla.org