"Javascript" por Tiago Rodrigues

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 ?


Created in 1995 by Netscape (LiveScript)

What is it ?



ECMAScript standard
JScript and ActionScript, also based on ECMAScript

What is it ?



ECMAScript standard

Dynamic, Weakly typed

What is it ?



ECMAScript standard


Object Oriented, Prototype based

What is it ?



ECMAScript standard


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)


Gmail, SAPO Mail, Google Reader


Rich text editors


Ads


Comment systems (SAPO Comments, Disqus)

Why people hate it

Bad uses

Popup ads, annoying animations

Why people hate it

Bad uses


Bad practices lead to slower code

Why people hate it

Bad uses


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



Being solved !



Being solved !

Bad implementations



Being solved !

Bad implementations

Browser differences



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

return a + b;
}

Wrong ! Function goes global !

Functions

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>


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


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


Problems

Many library users don't learn the base language


Problems


Because of this, they abuse the base language


Problems



This leads to performance problems


Problems



This leads to performance problems

So...be careful !


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

"Javascript" por Tiago Rodrigues

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (7)

Semelhante a "Javascript" por Tiago Rodrigues

Semelhante a "Javascript" por Tiago Rodrigues (20)

Mais de Núcleo de Electrónica e Informática da Universidade do Algarve

Mais de Núcleo de Electrónica e Informática da Universidade do Algarve (12)

Último

Último (20)

"Javascript" por Tiago Rodrigues