1.
Java Script
segunda-feira, 17 de agosto de 2009

2.
Estrutura
Comportamento
Apresentação
Conteúdo
HTML JavaScript
CSS
segunda-feira, 17 de agosto de 2009

3.
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
segunda-feira, 17 de agosto de 2009

4.
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

5.
Firebug Console
segunda-feira, 17 de agosto de 2009

6.
Tipos Primitivos
• Number
• String
• Boolean
• Undefined
• Null
segunda-feira, 17 de agosto de 2009

7.
O Operador Typeof
>>> n = 1234;
>>> typeof n;
"number"
segunda-feira, 17 de agosto de 2009

8.
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

9.
Arrays
• >>> var a = [1, 2, 3];
• >>> delete a[1];
• true
• >>> a
• [1, undefined, 3]
segunda-feira, 17 de agosto de 2009

10.
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

11.
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

12.
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

13.
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

14.
Funcões Pré Definidas
segunda-feira, 17 de agosto de 2009

15.
parseInt() e parseFloat()
segunda-feira, 17 de agosto de 2009

16.
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
segunda-feira, 17 de agosto de 2009

17.
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
segunda-feira, 17 de agosto de 2009

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

19.
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

20.
encodeURI() e decodeURI()
segunda-feira, 17 de agosto de 2009

21.
encodeURIComponent() e
decodeURIComponent()
segunda-feira, 17 de agosto de 2009

22.
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

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

24.
eval
>>> eval('var ii = 2;')
>>> ii
2
segunda-feira, 17 de agosto de 2009

25.
Local e Global
Escopo de Variáveis
segunda-feira, 17 de agosto de 2009

26.
Funções são dados
var x = function(){return 999;}
>>> function f(){return 1;}
>>> typeof f
function
segunda-feira, 17 de agosto de 2009

27.
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

28.
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

29.
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

30.
Self-Invoking Functions
segunda-feira, 17 de agosto de 2009

31.
Self-Invoking Functions
( (
function(){ function(name){
alert('Bolha!'); alert(name + '!');
} }
)(); )('Bolha')
segunda-feira, 17 de agosto de 2009

32.
Objetos
segunda-feira, 17 de agosto de 2009

33.
Objetos (key/value)
var pessoa = {
nome: 'Andre',
profissao: 'Desenvolvedor'
};
segunda-feira, 17 de agosto de 2009

34.
Objetos (key/value)
var o = {
something: 1,
'yes or no': 'yes',
'!@#$%^&*': true
};
it’s a valid object!
segunda-feira, 17 de agosto de 2009

35.
Objetos (key/value)
var dog = {
name: 'Benji',
talk: function(){
alert('Woof, woof!');
}
};
>>> dog.talk();
segunda-feira, 17 de agosto de 2009

36.
Propriedades
var pessoa = { >>> pessoa.nome;
nome: 'Mario', "Mario"
idade: '30' >>> pessoa['idade'];
}; "30"
>>> pessoa.cor_do_cabelo
undefined
segunda-feira, 17 de agosto de 2009

37.
Objetos com Objetos
var livro = {
titulo 'A lagoa verde',
autor: {
nome: 'Joana',
sobre_nome: 'Silveira'
}
};
segunda-feira, 17 de agosto de 2009

38.
Alterando Objetos
>>> var pessoa = {}; >>> delete pessoa.nome;
>>> pessoa.nome; >>> pessoa.nome;
undefined undefined
>>> pessoa.nome = ‘Zé’;
>>> pessoa.nome;
‘Zé’;
segunda-feira, 17 de agosto de 2009

39.
This
var pessoa = { >>> pessoa.dizerNome();
nome: 'Wende', ‘Wende’
dizerNome: function() {
return this.nome;
}
}
segunda-feira, 17 de agosto de 2009

40.
Construtores
function pessoa() {
this.nome = 'Beatriz';
}
>>> var p = new Pessoa();
>>> p.nome;
‘Beatriz’
segunda-feira, 17 de agosto de 2009

41.
O Objeto Global
>>> var x = 10; >>> window.x
>>> x; 10
10
>>> window[‘x’];
10
segunda-feira, 17 de agosto de 2009

42.
Cuidado!
>>> function Hero(name) {this.name = name;}
>>> var h = Hero('Leonardo');
>>> typeof h
"undefined" var h = new
>>> typeof h.name Hero('Leonardo')
h has no properties
>>> window.name + name
LeonardoLeonardo
segunda-feira, 17 de agosto de 2009

43.
Global Functions
>>> window.parseInt('101 dalmatians')
101
segunda-feira, 17 de agosto de 2009

44.
Constructor Reference
>>> var h3 = new h2.constructor('Mané');
>>> typeof o.constructor;
‘function’
segunda-feira, 17 de agosto de 2009

45.
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

46.
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

47.
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

48.
Array
segunda-feira, 17 de agosto de 2009

49.
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]
segunda-feira, 17 de agosto de 2009

50.
Métodos e Atributos de
um Array
• construtor • concat()
• length • pop()
• toString() • push()
• valueOf() • reverse()
• sort() • shift()
• join() • splice()
• slice() • unshift()
segunda-feira, 17 de agosto de 2009

51.
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

52.
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"]
segunda-feira, 17 de agosto de 2009

53.
sort
• >>> a
• [3, 5, 1, 7, "test"]
• >>> a.sort;
• [1, 3, 5, 7, "test"]
segunda-feira, 17 de agosto de 2009

54.
join
>>> a
[1, 2, 3]
>>> a.join(' bla ');
"1 bla 2 bla 3 bla"
segunda-feira, 17 de agosto de 2009

55.
slice
>>> matriz O método slice não
modifica 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’
segunda-feira, 17 de agosto de 2009

56.
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

57.
Function
segunda-feira, 17 de agosto de 2009

58.
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
segunda-feira, 17 de agosto de 2009

59.
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

60.
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

61.
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

62.
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

63.
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

64.
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

65.
Boolean
>>> var b = new Boolean(); >> Boolean("test")
>>> typeof b true
"object" >>> Boolean("")
>>> typeof b.valueOf() false
"boolean" >>> Boolean({})
>>> b.valueOf() true
false
segunda-feira, 17 de agosto de 2009

66.
Number
segunda-feira, 17 de agosto de 2009

67.
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

68.
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

69.
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

70.
Atributos de Strings
• length
segunda-feira, 17 de agosto de 2009

71.
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

72.
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)
segunda-feira, 17 de agosto de 2009

73.
Math
segunda-feira, 17 de agosto de 2009

74.
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

75.
Métodos de Math
• round (n) • sqrt (n)
• ceil (n)
• flor (n)
• min (n1, n2)
• max (n1, n2)
• pow (n, e)
segunda-feira, 17 de agosto de 2009

76.
Expressões Regulares
segunda-feira, 17 de agosto de 2009

77.
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

78.
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

79.
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

80.
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

81.
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

82.
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

83.
Método Exec
>>> /j.*t/i.exec("Javascript")[0]
"Javascript"
segunda-feira, 17 de agosto de 2009

84.
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

85.
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

86.
Search
>>> var s = new String('HelloJavaScriptWorld');
>>> s.search(/j.*a/i);
5
segunda-feira, 17 de agosto de 2009

87.
Replace
>>> var s = new String('HelloJavaScriptWorld');
>>> s.replace(/[A-Z]/g, '');
"elloavacriptorld"
>>> s.replace(/[A-Z]/, '');
"elloJavaScriptWorld"
segunda-feira, 17 de agosto de 2009

88.
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

89.
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

90.
Objetos de Erro
segunda-feira, 17 de agosto de 2009

91.
Construtores do
Objeto Error
• EvalError
• RangeError
• ReferenceError
• SyntaxError
• TypeError
• URIError
segunda-feira, 17 de agosto de 2009

92.
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

93.
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

94.
Prototype
segunda-feira, 17 de agosto de 2009

95.
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

96.
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

97.
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

98.
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

99.
Herança
segunda-feira, 17 de agosto de 2009

100.
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

101.
Herança
TwoDShape.prototype = new Shape();
Triangle.prototype = new TwoDShape();
segunda-feira, 17 de agosto de 2009

102.
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

103.
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

104.
O Ambiente do Browser
segunda-feira, 17 de agosto de 2009

105.
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. confirm()
• back() • window. prompt()
• go(n)
segunda-feira, 17 de agosto de 2009

106.
setTimeout
• function funcao(){alert('Boo!');}
• var tempoEmMillisegundos = 2000;
• setTimeout(funcao, tempoEmMillisegundos);
segunda-feira, 17 de agosto de 2009

107.
setInterval
• function funcao(){alert('Boo!');}
• var tempoEmMillisegundos = 2000;
• setInterval(funcao, tempoEmMillisegundos);
segunda-feira, 17 de agosto de 2009

108.
DOM - Document Object Model
segunda-feira, 17 de agosto de 2009

109.
<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

110.
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

111.
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

112.
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

113.
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

114.
Criando Elementos
var myp = document.createElement('p');
myp.innerHTML = 'yet another';
document.body.appendChild(myp)
segunda-feira, 17 de agosto de 2009

115.
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

116.
Insert Before
document.body.insertBefore(
document.createTextNode('boo!'),
document.body.firstChild
);
document.body.appendChild(document.createTextNode('boo!'));
segunda-feira, 17 de agosto de 2009

117.
Apagar Elementos
var myp = document.getElementsByTagName('p')[1];
var removed = document.body.removeChild(myp);
segunda-feira, 17 de agosto de 2009

118.
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

119.
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

120.
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

121.
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

122.
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

123.
Obrigado!
segunda-feira, 17 de agosto de 2009