Java Script

Java Script

segunda-feira, 17 de agosto de 2009

EstruturaComportamentoApresentaçãoConteúdo

JavaScript

CSS

HTML


• Rich and powerful web applications (Gmail)

• Server-side code such as ASP using for example Rhino.

• Rich media apps (Flash, Flex) using ActionScript (based on js).

• Scripts that automate tasks on your Windows

• Write extensions/plugins for apps like Firefox, Dreamweaver

• Web applications that store information in an off-line database on the user's desktop, using Google Gears

• Create Yahoo! Widgets, Mac Dashboard widgets, or Adobe Air applications that run on your desktop

Aplicação


Programação Orientada a Objetos

• Objetos, métodos, atributos

• Classes

• Encapsulamento

• Agregação / Composição

• Herança

• Polimorfismo


Firebug Console


Tipos Primitivos

• Number

• String

• Boolean

• Undefined

• Null


O Operador Typeof

>>> n = 1234;

>>> typeof n;

"number"


O Número Infinity

É um número grande demais para o JavaScript gerenciar, ou seja um número maior que 1.7976931348623157e+308


Arrays

• >>> var a = [1, 2, 3];

• >>> delete a[1];

• true

• >>> a

• [1, undefined, 3]


Arrays de Arrays

• >>> var a = [[1,2,3],[4,5,6]];

• >>> a[2] = ‘bla’;

• >>> a;

• [[1, 2, 3], [4, 5, 6],‘bla’]


For in Loops

>> var a = ['a', 'b', 'c', 'x', 'y', 'z'];

>> var result = '\n';

>> for (var i in a) {

>> result += 'index: ' + i + ', value: ' + a[i] + '\n';

>> }

index: 0, value: a

index: 1, value: b


Functions

public void sum(a1, a2, a3) { ... };

sum (1, 2);

os parâmetros não passados tem valor undefined


Flexibilidade

>>> function args() { return arguments; }

>>> args();

[]

>>> args( 1, 2, 3, 4, true, 'ninja');

[1, 2, 3, 4, true, 'ninja']


Funcões Pré Definidassegunda-feira, 17 de agosto de 2009

parseInt() e parseFloat()


parseIntparseInt('123') = 123

parseInt('abc123') = NaN

parseInt('1abc23') = 1

parseInt('FF', 10) = NaN

parseInt('FF', 16) = 255

parseInt('0377', 10) = 377

parseInt('0377', 8) = 255

parseInt('377') = 377

parseInt('0377') = 255

parseInt('0x377') = 887


parseFloatparseFloat('123') = 123

parseFloat('1.23') = 1.23

parseFloat('1.23abc.00') = 1.23

parseFloat('a.bc1.23') = NaN

parseFloat('a123.34') = NaN

parseFloat('12a3.34') = 12

parseFloat('123e-2') = 1.23

parseFloat('123e2') = 12300

parseInt('1e10') = 1


isNaN() e isInfinity()segunda-feira, 17 de agosto de 2009

isNaNisNaN(NaN) = true

isNaN(123) = false

isNaN(1.23) = false

isNaN(parseInt('abc123')) = true

isNaN('1.23') = false

isNaN('a1.23') = true


encodeURI() e decodeURI()


encodeURIComponent() e decodeURIComponent()


Enconding URIs

>>> var url = 'http://www.packtpub.com/scr ipt.php?q=this and that';

>>> encodeURI(url);

"http://www.packtpub.com/scr%20ipt.php?q=this%20and%20that"

>>> encodeURIComponent(url);

"http%3A%2F%2Fwww.packtpub.com%2Fscr%20ipt.php%3Fq%3Dthis%20and%20that"


http://www.packtpub.com/scr

http://www.packtpub.com/scr

http://www.packtpub.com/scr%20ipt.php?q=this%20and%20that

http://www.packtpub.com/scr%20ipt.php?q=this%20and%20that

eval()segunda-feira, 17 de agosto de 2009

eval

>>> eval('var ii = 2;')

>>> ii

2


Escopo de Variáveis

Local e Global


Funções são dadosvar x = function(){return 999;}

>>> function f(){return 1;}

>>> typeof f

function


Functions are Data>>> var sum = function(a, b) {return a + b;}

>>> var add = sum;

>>> delete sum;

>>> typeof sum;

"undefined"

>>> typeof add;

"function"

>>> add(1, 2);

3


Callback Functions

Because a function is just like any other data assigned to a variable, it can be defined, deleted, copied, and why not also passed as an argument to other functions?


Callback Functionsfunction invoke_and_add(a, b){

return a() + b();

}

function one() { return 1; }

function two() { return 2;}

>>> invoke_and_add(one, two);

3

>>> invoke_and_add(function(){return 1;}, function(){return 2;})

3


Self-Invoking Functionssegunda-feira, 17 de agosto de 2009

Self-Invoking Functions(

function(){

alert('Bolha!');

}

)();

(

function(name){

alert(name + '!');

}

)('Bolha')


Objetossegunda-feira, 17 de agosto de 2009

Objetos (key/value)var pessoa = {

nome: 'Andre',

profissao: 'Desenvolvedor'

};


Objetos (key/value)var o = {

something: 1,

'yes or no': 'yes',

'!@#$%^&*': true

};

it’s a valid object!


Objetos (key/value)var dog = {

name: 'Benji',

talk: function(){

alert('Woof, woof!');

}

};

>>> dog.talk();


Propriedadesvar pessoa = {

nome: 'Mario',

idade: '30'

};

>>> pessoa.nome;

"Mario"

>>> pessoa['idade'];

"30"

>>> pessoa.cor_do_cabelo

undefined


Objetos com Objetosvar livro = {

titulo 'A lagoa verde',

autor: {

nome: 'Joana',

sobre_nome: 'Silveira'

}

};


Alterando Objetos>>> var pessoa = {};

>>> pessoa.nome;

undefined

>>> pessoa.nome = ‘Zé’;

>>> pessoa.nome;

‘Zé’;

>>> delete pessoa.nome;

>>> pessoa.nome;

undefined


Thisvar pessoa = {

nome: 'Wende',

dizerNome: function() {

return this.nome;

}

}

>>> pessoa.dizerNome();

‘Wende’


Construtoresfunction pessoa() {

this.nome = 'Beatriz';

}

>>> var p = new Pessoa();

>>> p.nome;

‘Beatriz’


O Objeto Global>>> var x = 10;

>>> x;

10

>>> window[‘x’];

10

>>> window.x

10


Cuidado!>>> function Hero(name) {this.name = name;}

>>> var h = Hero('Leonardo');

>>> typeof h

"undefined"

>>> typeof h.name

h has no properties

>>> window.name + name

LeonardoLeonardo

var h = new Hero('Leonardo')


Global Functions

>>> window.parseInt('101 dalmatians')

101


Constructor Reference

>>> var h3 = new h2.constructor('Mané');

>>> typeof o.constructor;

‘function’


O Operador instanceof>>> function Hero(){}

>>> var h = new Hero();

>>> var o = {};

>>> h instanceof Hero;

true

>>> h instanceof Object;

false


Built-in Objects

• Data wrapper Objects

• Object, Function, Array, Boolean, Number and String.

• Utility Objects

• Math, Date, RegExp

• Error Objects


Object>>> var o = {};

>>> var o = new Object();

• o.constructor - the construtor

• o.toString - A string that represent it.

• o.valueOf - A single value that represents it.


Arraysegunda-feira, 17 de agosto de 2009

Array>>> var a = new Array(1,2,3,'four');

>>> a;

[1, 2, 3, "four"]

>>> var a2 = new Array(5);

>>> a2;

[undefined, undefined, undefined, undefined, undefined]

>>> a.toString();

"1,2,3,four"

>>> a.valueOf()

[1, 2, 3, "four"]

>>> a.constructor

Array()


Métodos e Atributos de um Array

• construtor

• length

• toString()

• valueOf()

• sort()

• join()

• slice()

• concat()

• pop()

• push()

• reverse()

• shift()

• splice()

• unshift()


Array Length

Alterando o atributo length de um array para menor os elementos do final são removidos:

>>> a

[1, 2, 3, 4, 5, 6, 7]

>>> a.length = 2;

>>> a

[1, 2]


métodos push e pop• >>> var a = [1,2,3];

• >>> a.push('new')

• 4

• >>> a

• [1,2,3, "new"]

• >>> a.pop()

• "new"

• >>> a

• [1,2,3]


sort• >>> a

• [3, 5, 1, 7, "test"]

• >>> a.sort;

• [1, 3, 5, 7, "test"]


join>>> a

[1, 2, 3]

>>> a.join(' bla ');

"1 bla 2 bla 3 bla"


slice>>> matriz

[‘a’,’b’,’c’,’d’,’e’]

>>> matriz.slice(0,1);

a

>> matriz.slice(1,3);

‘b’,’c’

O método slice não modifica o array original (matriz)!

>>> matriz

[‘a’,’b’,’c’,’d’,’e’]


splice>>> m1

[‘a’,’b’,’c’,’d’,’e’]

>>> m2 = m1.splice(1, 3)

[‘b’,’c’,’d’]

>>> m1

[‘a’,’e’]


Functionsegunda-feira, 17 de agosto de 2009

Function• >>> function sum(a, b) {return a + b;};

• >>> sum(1, 2)

• 3

• >>> var sum = function(a, b) {return a + b;};

• >>> sum(1, 2)

• 3

• >>> var sum = new Function('a', 'b', 'return a + b;');

• >>> sum(1, 2)

• 3

eval


Atributos e Propriedades de um Function

• constructor - construtor

• length - número de parametros

• caller - objecto que chamou a função

• toString - retorna o código fonte da função

• call

• apply

• prototype


Callvar some_obj = {

name: 'Ninja',

say: function(who){ return 'Haya ' + who + ', I am a ' + this.name; }

}

>>> some_obj.say('Dude');

"Haya Dude, I am a Ninja"

>>> my_obj = {name: 'Scripting guru'};

>>> some_obj.say.call(my_obj, 'Dude');

"Haya Dude, I am a Scripting guru"


Call

objeto1.metodo.call(objeto2, p1, p2)

se você não passar um objeto como primeiro parâmetro ou passar null, o objeto global (window) será assumido.


Applyobjeto1.metodo.apply(objeto2, [p1, p2])

objeto1.metodo.call(objeto2, p1, p2)

O método apply funciona da mesma forma que o método call com a diferença de que os parâmetros são passados em um Array.


O atributos arguments

>>> function f() {return arguments;}

>>> f(1,2,3)

[1, 2, 3]

Parece um Array mas não é um Array!

Não contém métodos como slide e sort.


O Atributo callee do objeto arguments

• >>> function f(){return arguments.callee;}

• >>> f()

• f()

• O Atributo callee é uma referência a função sendo chamada.


Boolean>>> var b = new Boolean();

>>> typeof b

"object"

>>> typeof b.valueOf()

"boolean"

>>> b.valueOf()

false

>> Boolean("test")

true

>>> Boolean("")

false

>>> Boolean({})

true


Numbersegunda-feira, 17 de agosto de 2009

Constantes do Number>>> Number.MAX_VALUE

1.7976931348623157e+308

>>> Number.MIN_VALUE

5e-324

>>> Number.POSITIVE_INFINITY

Infinity

>>> Number.NEGATIVE_INFINITY

-Infinity

>>> Number.NaN

NaN


Métodos do Number• toFixed(fractionDigits)

• Define o número de decimais e arredonda

• toExponencial(fractionDigits)

• Retorna a notação exponencial do número

• 56789 = 5.68e+4

• toPrecision(precision)

• Retorna o número ou exponencial dependendo da precisão

• new Number(56789). toPrecision(2) = "5.7e+4"

• new Number(56789). toPrecision(5) = "56789"


Strings• Podem ser tipos primitivos ou objetos

• >>> var primitive = 'Hello';

• >>> typeof primitive;

• "string"

• >>> var obj = new String('world');

• >>> typeof obj;

• "object"


Atributos de Strings

• length


Um Array de Caracteres

>>> var obj = new String('world');

>>> obj[0]

"w"

>>> obj[4]

"d"

>>> obj.length

5


Métodos de String• toUpperCase

• toLowerCase

• chartAt(index)

• chartCodeAt(index)

• indexOf(word, startAp)

• lastIndexOf(word)

• slice / substring (from, to)

• difere apenas com parâmetros negativos

• split(string)

• concat(string1, string2, ...)

• replace(string, replacement)

• valueOf()

• fromCharCode(code1, code2, ...)

• localeCompare(‘string’)

• match(regexp)

• search(regexp)


Mathsegunda-feira, 17 de agosto de 2009

Math Random

• Math.random()

• Retorna um númeo entre 0 e 1.

• 100 * Math.random()

• Retorna um número entre 0 e 100.


Métodos de Math• round (n)

• ceil (n)

• flor (n)

• min (n1, n2)

• max (n1, n2)

• pow (n, e)

• sqrt (n)


Expressões Regularessegunda-feira, 17 de agosto de 2009

Expressões Regulares

Provêem uma forma poderosa de buscar e manipular texto. Você pode pensar nelas como SQL porem ao invés de buscar e atualizar dados em um banco de dados, você pode buscar e atualizar dados em um pedaço de texto.


Expressões Regulares

• Expressões regulares consistem em:

• Um padrão para encontrar um texto

• Um ou mais modificadores (também chamados de flags) que oferecem instruções de como o padrão deve ser aplicado.


O Objeto RegExp var re = new RegExp("j.*t");

var re = /j.*t/;

Selecione qualquer string que começe com a letra j e termine com t e que tenha ou não caracteres entre elas.


Propriedades do RegExp

• global (g): Se for false (o que é o padrão) a busca pára quando o primeiro resultado é encontrado. Defina true se quiser todas os resultados.

• ignoreCase (i): Case sensitive ou não (false por padrão).

• multiline (m): Busca em mais de uma linha (false por padrão).

• lastIndex: Posição para começar a busca (padrão 0).

• source: Contém a expressão regular (pattern).


Propriedades do RegExp

>>> var re = new RegExp('j.*t', 'gmi');

>>> re.global;

true

>>> var re = /j.*t/ig;

>>> re.global

true


Método Test

Não encontra porque a letra J está maiúscula:

>>> /j.*t/.test("Javascript")

false

Ignora case dos caracteres:

>>> /j.*t/i.test("Javascript")

true


Método Exec

>>> /j.*t/i.exec("Javascript")[0]

"Javascript"


Métodos do String que aceitam Regex

• match()

• retorna um array com resultados

• search()

• retorna a posição do primeiro resultado

• replace()

• substitui todas as ocorrências por outra string

• split()


Match>>> var s = new String('HelloJavaScriptWorld');

>>> s.match(/a/);

["a"]

>>> s.match(/a/g);

["a", "a"]

>>> s.match(/j.*a/i);

["Java"]


Search

>>> var s = new String('HelloJavaScriptWorld');

>>> s.search(/j.*a/i);

5


Replace>>> var s = new String('HelloJavaScriptWorld');

>>> s.replace(/[A-Z]/g, '');

"elloavacriptorld"

>>> s.replace(/[A-Z]/, '');

"elloJavaScriptWorld"


Replace• //The operator $&

>>> s.replace(/[A-Z]/g, "_$&");

"_Hello_Java_Script_World"

>>> s.replace(/([A-Z])/g, "_$1");

"_Hello_Java_Script_World"

>>> var email = "[email protected]";

email.replace(/(.*)@.*/, "$1");

"stoyan"


mailto:[email protected]

mailto:[email protected]

Replace Callbacks

>>> var s = new String('HelloJavaScriptWorld');

>>> function replaceCallback(match){

return "_" + match.toLowerCase();

}

>>> s.replace(/[A-Z]/g, replaceCallback);

"_hello_java_script_world"


Objetos de Errosegunda-feira, 17 de agosto de 2009

Construtores do Objeto Error

• EvalError

• RangeError

• ReferenceError

• SyntaxError

• TypeError

• URIError


try catchtry {

iDontExist();

} catch (e){

alert(e.name + ': ' + e.message);

} finally {

alert('Finally!');

}

ReferenceError: iDontExist is not defined


Lançando Errosthrow new Error('Division by zero!');

throw new RangeError('Division by zero!')

throw {

name: "MyError",

message: "OMG! Something terrible has happened"

}


Prototypesegunda-feira, 17 de agosto de 2009

PrototypeTodo objeto Function possui um atributo prototype

>>> function foo(a, b){return a * b;}

>>> foo.length

2

>>> foo.constructor

Function()

>>> typeof foo.prototype

"object"


Adicionado métodos e atributos ao prototype

Gadget.prototype.price = 100;

Gadget.prototype.rating = 3;

Gadget.prototype.getInfo = function() {

return 'Rating: ' + this.rating + ', price: ' + this.price;

};

Gadget.prototype = {

price: 100,

rating: 3,

getInfo: function() {return 'Rating: ' + this.rating + ', price: ' + this.price;}

};


Prototype

Todos os métodos e atributos que você adicionar ao prototype serão disponibilizados assim que o objeto for instanciado através de seu construtor.

Ao instanciar um novo objeto, este recebe uma referência do prototype e não uma cópia.

Funciona de forma semelhante aos métodos e atributos estáticos na linguagem Java.


Prioridade dos Atributos

function Gadget(name) {this.name = name;}

Gadget.prototype.name = 'foo';

>>> var toy = new Gadget('camera');

>>> toy.name;

"camera"

>>> delete toy.name;

true

>>> toy.name;

"foo"


Herançasegunda-feira, 17 de agosto de 2009

Herançafunction Shape(){

this.name = 'shape';

this.toString = function() {return this.name;};

}

function TwoDShape(){ this.name = '2D shape';}

function Triangle(side, height) {

this.name = 'Triangle';

this.side = side;

this.height = height;

this.getArea = function(){return this.side * this.height / 2;};

}


Herança

TwoDShape.prototype = new Shape();

Triangle.prototype = new TwoDShape();


Herança>>> var my = new Triangle(5, 10);

>>> my instanceof Shape

true

>>> my instanceof TwoDShape

true

>>> my instanceof Triangle

true

>>> my instanceof Array


Herança>>> Shape.prototype.isPrototypeOf(my)

true

>>> TwoDShape.prototype.isPrototypeOf(my)

true

>>> Triangle.prototype.isPrototypeOf(my)

true

>>> String.prototype.isPrototypeOf(my)

false


O Ambiente do Browsersegunda-feira, 17 de agosto de 2009

Window• window.navigator

• userAgent

• window.location

• href

• location

• replace()

• assing()

• reload()

• window.history

• forward()

• back()

• go(n)

• window.frames

• window.screen

• width / availWidth

• height availHeight

• window.open(...)

• window.close()

• window.moveTo()

• window.resizeTo()

• window.alert()

• window. confirm()

• window. prompt()


setTimeout

• function funcao(){alert('Boo!');}

• var tempoEmMillisegundos = 2000;

• setTimeout(funcao, tempoEmMillisegundos);


setInterval

• function funcao(){alert('Boo!');}

• var tempoEmMillisegundos = 2000;

• setInterval(funcao, tempoEmMillisegundos);


DOM - Document Object Model


<html> <head> <title>My page</title> </head> <body> first paragraph second paragraph final  </body></html>


Os Nós da Árvore>>> document.documentElement.nodeName

"HTML"

>>> document.documentElement.tagName

"HTML"

>>> document.documentElement.childNodes.length

2

>>> document.documentElement.childNodes[0]

<head>

>>> document.documentElement.childNodes[1]

<body>


Nós>>> body.childNodes[1].attributes.length

1

>>> body.childNodes[1].attributes[0].nodeName

"class"

>>> body.childNodes[1].attributes[0].nodeValue

"opener"

>>> body.childNodes[1].attributes['class'].nodeValue

"opener"

>>> body.childNodes[1].getAttribute('class')

"opener"


Nós>>> bd.childNodes[1].nodeName

"P"

>>> bg.childNodes[1].textContent

"first paragraph"

>>> bd.childNodes[1].innerHTML

"first paragraph"

>>> bd.childNodes[3].innerHTML

"second paragraph"

>>> bd.childNodes[3].textContent

"second paragraph"


Atalhos DOMdocument.getElementsByTagName('p').length

document.getElementsByTagName('p').item(0)

document.getElementsByTagName('p')[0]

document.getElementById('closer')

document.getElementById('closer').nextSibling

document.getElementById('closer').previousSibling

document.body.firstChild

document.body.lastChild


Criando Elementos

var myp = document.createElement('p');

myp.innerHTML = 'yet another';

document.body.appendChild(myp)


Clones

var el = document.getElementsByTagName('p')[1];

document.body.appendChild(el.cloneNode(true))

Clona Elementos Filhos Também


Insert Beforedocument.body.insertBefore(

document.createTextNode('boo!'),

document.body.firstChild

);

document.body.appendChild(document.createTextNode('boo!'));


Apagar Elementos

var myp = document.getElementsByTagName('p')[1];

var removed = document.body.removeChild(myp);


HTML DOM Objects

• document.images

• document.getElementsByTagName()

• document.applets

• document.links (a href)

• document.anchors (a name)

• document.forms

• document.


Document>>> document.cookie;

"CNNid=Ga50a0c6f-14404-1198821758-6; SelectedEdition=www; s_sess=%...”

>>> document.title = ‘Meu título’;

‘Meu título’;

>>> document.referrer; //previously-visited page

"http://www.andrefaria.com/links/js"

>>> document.domain;

www.andrefaria.com


http://search.yahoo.com/search?p=cnn&ei=UTF-8&fr=moz2

http://search.yahoo.com/search?p=cnn&ei=UTF-8&fr=moz2

http://www.andrefaria.com

http://www.andrefaria.com

Eventos

document.body.addEventListener('click', function(){alert('body')}, false);

document.addEventListener('click', function(){alert('doc')}, false);

window.addEventListener('click', function(){alert('win')}, false);

>>> var para = document.getElementById('closer');

>>> para.addEventListener('click', paraHandler, false);

>>> para.removeEventListener('click', paraHandler, false);


Eventos

• Mouse (click, double click, up, down, etc...)

• Keyboard (key down, key up, key press)

• Window (load, abort, resize)

• Form (focus, change, reset, submit)


CC Images• http://www.flickr.com/photos/monstershaq2000/3008436618/

• http://www.flickr.com/photos/jantik/254695220/

• http://www.flickr.com/photos/curiousexpeditions/1568278214/

• http://www.flickr.com/photos/slambo_42/1393841369/

• http://www.flickr.com/photos/zenera/462727735/

• http://www.flickr.com/photos/artysmokes/3154354974/

• http://www.flickr.com/photos/dragonflycustomcakes/3650746207/

• http://www.flickr.com/photos/milon15/2382845410/

• http://www.flickr.com/photos/roll_initiative/3278642272/

• http://www.flickr.com/photos/stuartpilbrow/2938100285/

• http://farm3.static.flickr.com/2300/2421129047_22e2176008.jpg

• http://www.flickr.com/photos/cocreatr/2347460526/

• http://www.flickr.com/photos/didier/318620915/

• http://www.flickr.com/photos/jaredchapman/482538719/

• http://www.flickr.com/photos/ericbegin/2462706533/


http://www.flickr.com/photos/monstershaq2000/3008436618/

http://www.flickr.com/photos/monstershaq2000/3008436618/

http://www.flickr.com/photos/jantik/254695220/




http://www.flickr.com/photos/slambo_42/1393841369/

http://www.flickr.com/photos/slambo_42/1393841369/

http://www.flickr.com/photos/zenera/462727735/

http://www.flickr.com/photos/zenera/462727735/

http://www.flickr.com/photos/artysmokes/3154354974/

http://www.flickr.com/photos/artysmokes/3154354974/

http://www.flickr.com/photos/dragonflycustomcakes/3650746207/

http://www.flickr.com/photos/dragonflycustomcakes/3650746207/

http://www.flickr.com/photos/milon15/2382845410/

http://www.flickr.com/photos/milon15/2382845410/

http://www.flickr.com/photos/roll_initiative/3278642272/




http://farm3.static.flickr.com/2300/2421129047_22e2176008.jpg

http://farm3.static.flickr.com/2300/2421129047_22e2176008.jpg

http://www.flickr.com/photos/cocreatr/2347460526/

http://www.flickr.com/photos/cocreatr/2347460526/

http://www.flickr.com/photos/didier/318620915/

http://www.flickr.com/photos/didier/318620915/

http://www.flickr.com/photos/jaredchapman/482538719/

http://www.flickr.com/photos/jaredchapman/482538719/

http://www.flickr.com/photos/ericbegin/2462706533/

http://www.flickr.com/photos/ericbegin/2462706533/

Obrigado!segunda-feira, 17 de agosto de 2009

Technology

Java Script