JavaScript - Básico ao Avançado

Prévia do material em texto

Java Script
segunda-feira, 17 de agosto de 2009
Estrutura
Comportamento
Apresentação
Conteúdo
JavaScript
CSS
HTML
segunda-feira, 17 de agosto de 2009
• 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
segunda-feira, 17 de agosto de 2009
Programação Orientada 
a Objetos
• Objetos, métodos, atributos
• Classes
• Encapsulamento
• Agregação / Composição
• Herança
• Polimorfismo
segunda-feira, 17 de agosto de 2009
Firebug Console
segunda-feira, 17 de agosto de 2009
Tipos Primitivos
• Number
• String
• Boolean
• Undefined
• Null
segunda-feira, 17 de agosto de 2009
O Operador Typeof
>>> n = 1234;
>>> typeof n;
"number"
segunda-feira, 17 de agosto de 2009
O Número Infinity
É um número grande demais para o 
JavaScript gerenciar, ou seja um número 
maior que 1.7976931348623157e+308
segunda-feira, 17 de agosto de 2009
Arrays
• >>> var a = [1, 2, 3];
• >>> delete a[1];
• true
• >>> a
• [1, undefined, 3]
segunda-feira, 17 de agosto de 2009
Arrays de Arrays
• >>> var a = [[1,2,3],[4,5,6]];
• >>> a[2] = ‘bla’;
• >>> a;
• [[1, 2, 3], [4, 5, 6],‘bla’]
segunda-feira, 17 de agosto de 2009
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
segunda-feira, 17 de agosto de 2009
Functions
public void sum(a1, a2, a3) { ... };
sum (1, 2);
os parâmetros não passados tem valor 
undefined
segunda-feira, 17 de agosto de 2009
Flexibilidade
>>> function args() { return arguments; }
>>> args();
[]
>>> args( 1, 2, 3, 4, true, 'ninja');
[1, 2, 3, 4, true, 'ninja']
segunda-feira, 17 de agosto de 2009
Funcões Pré Definidas
segunda-feira, 17 de agosto de 2009
parseInt() e parseFloat()
segunda-feira, 17 de agosto de 2009
parseInt
parseInt('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
segunda-feira, 17 de agosto de 2009
parseFloat
parseFloat('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
segunda-feira, 17 de agosto de 2009
isNaN() e isInfinity()
segunda-feira, 17 de agosto de 2009
isNaN
isNaN(NaN) = true
isNaN(123) = false
isNaN(1.23) = false
isNaN(parseInt('abc123')) = true
isNaN('1.23') = false
isNaN('a1.23') = true
segunda-feira, 17 de agosto de 2009
encodeURI() e decodeURI()
segunda-feira, 17 de agosto de 2009
encodeURIComponent() e 
decodeURIComponent()
segunda-feira, 17 de agosto de 2009
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"
segunda-feira, 17 de agosto de 2009
eval()
segunda-feira, 17 de agosto de 2009
eval
>>> eval('var ii = 2;')
>>> ii
2
segunda-feira, 17 de agosto de 2009
Escopo de Variáveis
Local e Global
segunda-feira, 17 de agosto de 2009
Funções são dados
var x = function(){return 999;}
>>> function f(){return 1;}
>>> typeof f 
function
segunda-feira, 17 de agosto de 2009
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
segunda-feira, 17 de agosto de 2009
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?
segunda-feira, 17 de agosto de 2009
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
segunda-feira, 17 de agosto de 2009
Self-Invoking Functions
segunda-feira, 17 de agosto de 2009
Self-Invoking Functions
(
 function(){
 alert('Bolha!');
 }
)();
(
 function(name){
 alert(name + '!');
 }
)('Bolha')
segunda-feira, 17 de agosto de 2009
Objetos
segunda-feira, 17 de agosto de 2009
Objetos (key/value)
var pessoa = {
nome: 'Andre',
profissao: 'Desenvolvedor'
};
segunda-feira, 17 de agosto de 2009
Objetos (key/value)
var o = {
 something: 1,
 'yes or no': 'yes',
 '!@#$%^&*': true
};
it’s a valid object!
segunda-feira, 17 de agosto de 2009
Objetos (key/value)
var dog = {
 name: 'Benji',
 talk: function(){
 alert('Woof, woof!');
 }
};
>>> dog.talk();
segunda-feira, 17 de agosto de 2009
Propriedades
var pessoa = {
 nome: 'Mario',
 idade: '30'
};
>>> pessoa.nome;
"Mario"
>>> pessoa['idade'];
"30"
>>> pessoa.cor_do_cabelo
undefined
segunda-feira, 17 de agosto de 2009
Objetos com Objetos
var livro = {
 titulo 'A lagoa verde', 
 autor: {
 nome: 'Joana',
 sobre_nome: 'Silveira'
 }
};
segunda-feira, 17 de agosto de 2009
Alterando Objetos
>>> var pessoa = {};
>>> pessoa.nome;
undefined
>>> pessoa.nome = ‘Zé’;
>>> pessoa.nome;
‘Zé’;
>>> delete pessoa.nome;
>>> pessoa.nome;
undefined
segunda-feira, 17 de agosto de 2009
This
var pessoa = {
 nome: 'Wende',
 dizerNome: function() {
 return this.nome;
 }
}
>>> pessoa.dizerNome();
‘Wende’
segunda-feira, 17 de agosto de 2009
Construtores
function pessoa() {
 this.nome = 'Beatriz';
}
>>> var p = new Pessoa();
>>> p.nome;
‘Beatriz’
segunda-feira, 17 de agosto de 2009
O Objeto Global
>>> var x = 10;
>>> x;
10
>>> window[‘x’];
10
>>> window.x
10
segunda-feira, 17 de agosto de 2009
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')
segunda-feira, 17 de agosto de 2009
Global Functions
>>> window.parseInt('101 dalmatians')
101
segunda-feira, 17 de agosto de 2009
Constructor Reference
>>> var h3 = new h2.constructor('Mané');
>>> typeof o.constructor;
‘function’
segunda-feira, 17 de agosto de 2009
O Operador instanceof
>>> function Hero(){}
>>> var h = new Hero();
>>> var o = {};
>>> h instanceof Hero;
true
>>> h instanceof Object;
false
segunda-feira, 17 de agosto de 2009
Built-in Objects
• Data wrapper Objects
• Object, Function, Array, Boolean, Number 
and String.
• Utility Objects
• Math, Date, RegExp
• Error Objects
segunda-feira, 17 de agosto de 2009
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.
segunda-feira, 17 de agosto de 2009
Array
segunda-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()
segunda-feira, 17 de agosto de 2009
Métodos e Atributos de 
um Array
• construtor
• length
• toString()
• valueOf()
• sort()
• join()
• slice()
• concat()
• pop()
• push()
• reverse()• shift()
• splice()
• unshift()
segunda-feira, 17 de agosto de 2009
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]
segunda-feira, 17 de agosto de 2009
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]
segunda-feira, 17 de agosto de 2009
sort
• >>> a
• [3, 5, 1, 7, "test"]
• >>> a.sort;
• [1, 3, 5, 7, "test"]
segunda-feira, 17 de agosto de 2009
join
>>> a
[1, 2, 3]
>>> a.join(' bla ');
"1 bla 2 bla 3 bla"
segunda-feira, 17 de agosto de 2009
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’]
segunda-feira, 17 de agosto de 2009
splice
>>> m1
[‘a’,’b’,’c’,’d’,’e’]
>>> m2 = m1.splice(1, 3)
[‘b’,’c’,’d’]
>>> m1
[‘a’,’e’]
segunda-feira, 17 de agosto de 2009
Function
segunda-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
segunda-feira, 17 de agosto de 2009
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
segunda-feira, 17 de agosto de 2009
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"
segunda-feira, 17 de agosto de 2009
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.
segunda-feira, 17 de agosto de 2009
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.
segunda-feira, 17 de agosto de 2009
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.
segunda-feira, 17 de agosto de 2009
O Atributo callee do 
objeto arguments
• >>> function f(){return arguments.callee;}
• >>> f()
• f()
• O Atributo callee é uma referência a função 
sendo chamada.
segunda-feira, 17 de agosto de 2009
Boolean
>>> var b = new Boolean();
>>> typeof b
"object"
>>> typeof b.valueOf()
"boolean"
>>> b.valueOf()
false
>> Boolean("test")
true
>>> Boolean("")
false
>>> Boolean({})
true
segunda-feira, 17 de agosto de 2009
Number
segunda-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
segunda-feira, 17 de agosto de 2009
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"
segunda-feira, 17 de agosto de 2009
Strings
• Podem ser tipos primitivos ou objetos
• >>> var primitive = 'Hello';
• >>> typeof primitive;
• "string"
• >>> var obj = new String('world');
• >>> typeof obj;
• "object"
segunda-feira, 17 de agosto de 2009
Atributos de Strings 
• length
segunda-feira, 17 de agosto de 2009
Um Array de 
Caracteres
>>> var obj = new String('world');
>>> obj[0]
"w"
>>> obj[4]
"d"
>>> obj.length
5
segunda-feira, 17 de agosto de 2009
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)
segunda-feira, 17 de agosto de 2009
Math
segunda-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.
segunda-feira, 17 de agosto de 2009
Métodos de Math
• round (n)
• ceil (n)
• flor (n)
• min (n1, n2)
• max (n1, n2)
• pow (n, e)
• sqrt (n)
segunda-feira, 17 de agosto de 2009
Expressões Regulares
segunda-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.
segunda-feira, 17 de agosto de 2009
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.
segunda-feira, 17 de agosto de 2009
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.
segunda-feira, 17 de agosto de 2009
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).
segunda-feira, 17 de agosto de 2009
Propriedades do 
RegExp
>>> var re = new RegExp('j.*t', 'gmi');
>>> re.global;
true
>>> var re = /j.*t/ig;
>>> re.global
true
segunda-feira, 17 de agosto de 2009
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
segunda-feira, 17 de agosto de 2009
Método Exec
>>> /j.*t/i.exec("Javascript")[0]
"Javascript"
segunda-feira, 17 de agosto de 2009
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() 
segunda-feira, 17 de agosto de 2009
Match
>>> var s = new String('HelloJavaScriptWorld');
>>> s.match(/a/);
["a"]
>>> s.match(/a/g);
["a", "a"]
>>> s.match(/j.*a/i);
["Java"]
segunda-feira, 17 de agosto de 2009
Search
>>> var s = new String('HelloJavaScriptWorld');
>>> s.search(/j.*a/i);
5
segunda-feira, 17 de agosto de 2009
Replace
>>> var s = new String('HelloJavaScriptWorld');
>>> s.replace(/[A-Z]/g, '');
"elloavacriptorld"
>>> s.replace(/[A-Z]/, '');
"elloJavaScriptWorld"
segunda-feira, 17 de agosto de 2009
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"
segunda-feira, 17 de agosto de 2009
Replace Callbacks
>>> var s = new String('HelloJavaScriptWorld');
>>> function replaceCallback(match){
return "_" + match.toLowerCase();
}
>>> s.replace(/[A-Z]/g, replaceCallback);
"_hello_java_script_world"
segunda-feira, 17 de agosto de 2009
Objetos de Erro
segunda-feira, 17 de agosto de 2009
Construtores do 
Objeto Error
• EvalError• RangeError 
• ReferenceError
• SyntaxError
• TypeError
• URIError
segunda-feira, 17 de agosto de 2009
try catch
try {
 iDontExist();
} catch (e){
 alert(e.name + ': ' + e.message);
} finally {
 alert('Finally!');
}
ReferenceError: iDontExist is not defined
segunda-feira, 17 de agosto de 2009
Lançando Erros
throw new Error('Division by zero!');
throw new RangeError('Division by zero!')
throw {
 name: "MyError",
 message: "OMG! Something terrible has happened"
}
segunda-feira, 17 de agosto de 2009
Prototype
segunda-feira, 17 de agosto de 2009
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"
segunda-feira, 17 de agosto de 2009
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;}
};
segunda-feira, 17 de agosto de 2009
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.
segunda-feira, 17 de agosto de 2009
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"
segunda-feira, 17 de agosto de 2009
Herança
segunda-feira, 17 de agosto de 2009
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;};
}
segunda-feira, 17 de agosto de 2009
Herança
TwoDShape.prototype = new Shape();
Triangle.prototype = new TwoDShape();
segunda-feira, 17 de agosto de 2009
Herança
>>> var my = new Triangle(5, 10);
>>> my instanceof Shape
true
>>> my instanceof TwoDShape
true
>>> my instanceof Triangle
true
>>> my instanceof Array
segunda-feira, 17 de agosto de 2009
Herança
>>> Shape.prototype.isPrototypeOf(my)
true
>>> TwoDShape.prototype.isPrototypeOf(my)
true
>>> Triangle.prototype.isPrototypeOf(my)
true
>>> String.prototype.isPrototypeOf(my)
false
segunda-feira, 17 de agosto de 2009
O Ambiente do Browser
segunda-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()
segunda-feira, 17 de agosto de 2009
setTimeout
• function funcao(){alert('Boo!');}
• var tempoEmMillisegundos = 2000;
• setTimeout(funcao, tempoEmMillisegundos);
segunda-feira, 17 de agosto de 2009
setInterval
• function funcao(){alert('Boo!');}
• var tempoEmMillisegundos = 2000;
• setInterval(funcao, tempoEmMillisegundos);
segunda-feira, 17 de agosto de 2009
DOM - Document Object Model
segunda-feira, 17 de agosto de 2009
<html>
 <head>
 <title>My page</title>
 </head>
 <body>
 <p class="opener">first paragraph</p>
 <p><em>second</em> paragraph</p>
 <p id="closer">final</p>
 <!-- and that's about it -->
 </body>
</html>
segunda-feira, 17 de agosto de 2009
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>
segunda-feira, 17 de agosto de 2009
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"
segunda-feira, 17 de agosto de 2009
Nós
>>> bd.childNodes[1].nodeName
"P"
>>> bg.childNodes[1].textContent
"first paragraph"
>>> bd.childNodes[1].innerHTML
"first paragraph"
>>> bd.childNodes[3].innerHTML
"<em>second</em> paragraph"
>>> bd.childNodes[3].textContent
"second paragraph"
segunda-feira, 17 de agosto de 2009
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
segunda-feira, 17 de agosto de 2009
Criando Elementos
var myp = document.createElement('p');
myp.innerHTML = 'yet another';
document.body.appendChild(myp)
segunda-feira, 17 de agosto de 2009
Clones
var el = document.getElementsByTagName('p')[1];
document.body.appendChild(el.cloneNode(true))
Clona Elementos 
Filhos Também
segunda-feira, 17 de agosto de 2009
Insert Before
document.body.insertBefore(
 document.createTextNode('boo!'),
 document.body.firstChild
);
document.body.appendChild(document.createTextNode('boo!'));
segunda-feira, 17 de agosto de 2009
Apagar Elementos
var myp = document.getElementsByTagName('p')[1];
var removed = document.body.removeChild(myp);
segunda-feira, 17 de agosto de 2009
HTML DOM Objects
• document.images
• document.getElementsByTagName()
• document.applets
• document.links (a href)
• document.anchors (a name)
• document.forms
• document.
segunda-feira, 17 de agosto de 2009
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
segunda-feira, 17 de agosto de 2009
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);
segunda-feira, 17 de agosto de 2009
Eventos
• Mouse (click, double click, up, down, etc...)
• Keyboard (key down, key up, key press)
• Window (load, abort, resize)
• Form (focus, change, reset, submit)
segunda-feira, 17 de agosto de 2009
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/
segunda-feira, 17 de agosto de 2009
Obrigado!
segunda-feira, 17 de agosto de 2009