Java Script

Java Script

segunda-feira, 17 de agosto de 2009

Estrutura
Comportamento
Apresentação
Conteúdo

HTML JavaScript

CSS


Aplicação
• 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


Programação Orientada
a Objetos
• Objetos, métodos, atributos
• Classes
• Encapsulamento
• Agregação / Composição
• Herança
• Polimorﬁsmo

Firebug Console


Tipos Primitivos

• Number
• String
• Boolean
• Undeﬁned
• Null


O Operador Typeof

>>> n = 1234;
>>> typeof n;
"number"


O Número Inﬁnity

É 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, undeﬁned, 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
undeﬁned


Flexibilidade
>>> function args() { return arguments; }
>>> args();
[]

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


Funcões Pré Deﬁnidas

parseInt() e parseFloat()

parseInt
parseInt('123') = 123 parseInt('0377', 8) = 255

parseInt('abc123') = NaN parseInt('377') = 377

parseInt('1abc23') = 1 parseInt('0377') = 255

parseInt('FF', 10) = NaN parseInt('0x377') = 887

parseInt('FF', 16) = 255

parseInt('0377', 10) = 377


parseFloat
parseFloat('123') = 123 parseFloat('123e-2') = 1.23

parseFloat('1.23') = 1.23 parseFloat('123e2') = 12300

parseFloat('1.23abc.00') = 1.23 parseInt('1e10') = 1

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

parseFloat('a123.34') = NaN

parseFloat('12a3.34') = 12


isNaN() e isInﬁnity()

isNaN
isNaN(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"


eval()

eval

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


Local e Global

Escopo de Variáveis

Funções são dados
var 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;
"undeﬁned"
>>> 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 deﬁned, deleted, copied, and
why not also passed as an
argument to other functions?


Callback Functions
function 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 Functions

Self-Invoking Functions
( (

function(){ function(name){

alert('Bolha!'); alert(name + '!');

} }

)(); )('Bolha')


Objetos

Objetos (key/value)
var pessoa = {
nome: 'Andre',
proﬁssao: '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();


Propriedades
var pessoa = { >>> pessoa.nome;

nome: 'Mario', "Mario"

idade: '30' >>> pessoa['idade'];

}; "30"

>>> pessoa.cor_do_cabelo

undeﬁned


Objetos com Objetos
var livro = {

titulo 'A lagoa verde',

autor: {

nome: 'Joana',

sobre_nome: 'Silveira'

}

};


Alterando Objetos
>>> var pessoa = {}; >>> delete pessoa.nome;

>>> pessoa.nome; >>> pessoa.nome;

undeﬁned undeﬁned

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

>>> pessoa.nome;

‘Zé’;


This
var pessoa = { >>> pessoa.dizerNome();

nome: 'Wende', ‘Wende’

dizerNome: function() {

return this.nome;

}

}


Construtores
function pessoa() {

this.nome = 'Beatriz';

}

>>> var p = new Pessoa();

>>> p.nome;

‘Beatriz’


O Objeto Global
>>> var x = 10; >>> window.x

>>> x; 10

10

>>> window[‘x’];

10


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

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

>>> typeof h

"undeﬁned" var h = new
>>> typeof h.name Hero('Leonardo')
h has no properties

>>> window.name + name

LeonardoLeonardo


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.


Array

Array
>>> var a = new >>> a.toString();
Array(1,2,3,'four');
"1,2,3,four"
>>> a;
>>> a.valueOf()
[1, 2, 3, "four"]
[1, 2, 3, "four"]
>>> var a2 = new Array(5);
>>> a.constructor
>>> a2;
Array()
[undefined, undefined, undefined,
undefined, undefined]


Métodos e Atributos de
um Array
• construtor • concat()

• length • pop()

• toString() • push()

• valueOf() • reverse()

• sort() • shift()

• join() • splice()

• slice() • unshift()


Array Length
Alterando o atributo length de um array para menor
os elementos do ﬁnal 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.pop()

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

• 4 • >>> a

• >>> a • [1,2,3]

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


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 O método slice não
modiﬁca o array original
[‘a’,’b’,’c’,’d’,’e’] (matriz)!

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

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

>> matriz.slice(1,3);

‘b’,’c’


splice
>>> m1

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

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

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

>>> m1

[‘a’,’e’]


Function

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

• >>> sum(1, 2)

• 3

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

• >>> sum(1, 2)
eval
• 3

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

• >>> sum(1, 2)

• 3


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


Call
var 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.


Apply
objeto1.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(); >> Boolean("test")

>>> typeof b true

"object" >>> Boolean("")

>>> typeof b.valueOf() false

"boolean" >>> Boolean({})

>>> b.valueOf() true

false


Number

Constantes do Number
>>> Number.MAX_VALUE

1.7976931348623157e+308

>>> Number.MIN_VALUE

5e-324

>>> Number.POSITIVE_INFINITY

Inﬁnity

>>> Number.NEGATIVE_INFINITY

-Inﬁnity

>>> Number.NaN

NaN


Métodos do Number
• toFixed(fractionDigits)
• Deﬁne 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 • split(string)

• toLowerCase • concat(string1, string2, ...)

• chartAt(index) • replace(string, replacement)

• chartCodeAt(index) • valueOf()

• indexOf(word, startAp) • fromCharCode(code1, code2, ...)

• lastIndexOf(word) • localeCompare(‘string’)

• slice / substring (from, to) • match(regexp)

• difere apenas com parâmetros negativos • search(regexp)


Math

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) • sqrt (n)
• ceil (n)
• ﬂor (n)
• min (n1, n2)
• max (n1, n2)
• pow (n, e)


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 consistem em:
• Um padrão para encontrar um texto
• Um ou mais modiﬁcadores (também
chamados de ﬂags) 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. Deﬁna 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


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

5


Replace

>>> 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 = "stoyan@phpied.com";

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

"stoyan"


Replace Callbacks

>>> function replaceCallback(match){

return "_" + match.toLowerCase();

}

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

"_hello_java_script_world"


Objetos de Erro

Construtores do
Objeto Error
• EvalError

• RangeError

• ReferenceError

• SyntaxError

• TypeError

• URIError


try catch
try {

iDontExist();

} catch (e){

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

} finally {

alert('Finally!');

}

ReferenceError: iDontExist is not defined


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

throw new RangeError('Division by zero!')

throw {

name: "MyError",

message: "OMG! Something terrible has happened"

}


Prototype

Prototype
Todo 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ça

Herança
function 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 Browser

Window
• window.navigator • window.frames

• userAgent • window.screen

• window.location • width / availWidth

• href • height availHeight

• location • window.open(...)

• replace() • window.close()

• assing() • window.moveTo()

• reload() • window.resizeTo()

• window.history • window.alert()

• forward() • window. conﬁrm()

• back() • window. prompt()

• go(n)


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 DOM
document.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 Before
document.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


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/


Obrigado!

Java Script

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (18)

Destaque

Destaque (17)

Mais de André Faria Gomes

Mais de André Faria Gomes (20)

Java Script