Java Script

2,262 views

Published on

Palestra sobre Java Script apresentada na Bluesoft em 2009

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,262
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
77
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Java Script

  1. 1. Java Script segunda-feira, 17 de agosto de 2009
  2. 2. Estrutura Comportamento Apresentação Conteúdo HTML JavaScript CSS segunda-feira, 17 de agosto de 2009
  3. 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. 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. 5. Firebug Console segunda-feira, 17 de agosto de 2009
  6. 6. Tipos Primitivos • Number • String • Boolean • Undefined • Null segunda-feira, 17 de agosto de 2009
  7. 7. O Operador Typeof >>> n = 1234; >>> typeof n; "number" segunda-feira, 17 de agosto de 2009
  8. 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. 9. Arrays • >>> var a = [1, 2, 3]; • >>> delete a[1]; • true • >>> a • [1, undefined, 3] segunda-feira, 17 de agosto de 2009
  10. 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. 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. 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. 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. 14. Funcões Pré Definidas segunda-feira, 17 de agosto de 2009
  15. 15. parseInt() e parseFloat() segunda-feira, 17 de agosto de 2009
  16. 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. 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. 18. isNaN() e isInfinity() segunda-feira, 17 de agosto de 2009
  19. 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. 20. encodeURI() e decodeURI() segunda-feira, 17 de agosto de 2009
  21. 21. encodeURIComponent() e decodeURIComponent() segunda-feira, 17 de agosto de 2009
  22. 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. 23. eval() segunda-feira, 17 de agosto de 2009
  24. 24. eval >>> eval('var ii = 2;') >>> ii 2 segunda-feira, 17 de agosto de 2009
  25. 25. Local e Global Escopo de Variáveis segunda-feira, 17 de agosto de 2009
  26. 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. 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. 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. 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. 30. Self-Invoking Functions segunda-feira, 17 de agosto de 2009
  31. 31. Self-Invoking Functions ( ( function(){ function(name){ alert('Bolha!'); alert(name + '!'); } } )(); )('Bolha') segunda-feira, 17 de agosto de 2009
  32. 32. Objetos segunda-feira, 17 de agosto de 2009
  33. 33. Objetos (key/value) var pessoa = { nome: 'Andre', profissao: 'Desenvolvedor' }; segunda-feira, 17 de agosto de 2009
  34. 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. 35. Objetos (key/value) var dog = { name: 'Benji', talk: function(){ alert('Woof, woof!'); } }; >>> dog.talk(); segunda-feira, 17 de agosto de 2009
  36. 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. 37. Objetos com Objetos var livro = { titulo 'A lagoa verde', autor: { nome: 'Joana', sobre_nome: 'Silveira' } }; segunda-feira, 17 de agosto de 2009
  38. 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. 39. This var pessoa = { >>> pessoa.dizerNome(); nome: 'Wende', ‘Wende’ dizerNome: function() { return this.nome; } } segunda-feira, 17 de agosto de 2009
  40. 40. Construtores function pessoa() { this.nome = 'Beatriz'; } >>> var p = new Pessoa(); >>> p.nome; ‘Beatriz’ segunda-feira, 17 de agosto de 2009
  41. 41. O Objeto Global >>> var x = 10; >>> window.x >>> x; 10 10 >>> window[‘x’]; 10 segunda-feira, 17 de agosto de 2009
  42. 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. 43. Global Functions >>> window.parseInt('101 dalmatians') 101 segunda-feira, 17 de agosto de 2009
  44. 44. Constructor Reference >>> var h3 = new h2.constructor('Mané'); >>> typeof o.constructor; ‘function’ segunda-feira, 17 de agosto de 2009
  45. 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. 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. 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. 48. Array segunda-feira, 17 de agosto de 2009
  49. 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. 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. 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. 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. 53. sort • >>> a • [3, 5, 1, 7, "test"] • >>> a.sort; • [1, 3, 5, 7, "test"] segunda-feira, 17 de agosto de 2009
  54. 54. join >>> a [1, 2, 3] >>> a.join(' bla '); "1 bla 2 bla 3 bla" segunda-feira, 17 de agosto de 2009
  55. 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. 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. 57. Function segunda-feira, 17 de agosto de 2009
  58. 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. 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. 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. 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. 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. 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. 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. 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. 66. Number segunda-feira, 17 de agosto de 2009
  67. 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. 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. 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. 70. Atributos de Strings • length segunda-feira, 17 de agosto de 2009
  71. 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. 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. 73. Math segunda-feira, 17 de agosto de 2009
  74. 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. 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. 76. Expressões Regulares segunda-feira, 17 de agosto de 2009
  77. 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. 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. 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. 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. 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. 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. 83. Método Exec >>> /j.*t/i.exec("Javascript")[0] "Javascript" segunda-feira, 17 de agosto de 2009
  84. 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. 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. 86. Search >>> var s = new String('HelloJavaScriptWorld'); >>> s.search(/j.*a/i); 5 segunda-feira, 17 de agosto de 2009
  87. 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. 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. 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. 90. Objetos de Erro segunda-feira, 17 de agosto de 2009
  91. 91. Construtores do Objeto Error • EvalError • RangeError • ReferenceError • SyntaxError • TypeError • URIError segunda-feira, 17 de agosto de 2009
  92. 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. 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. 94. Prototype segunda-feira, 17 de agosto de 2009
  95. 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. 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. 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. 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. 99. Herança segunda-feira, 17 de agosto de 2009
  100. 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. 101. Herança TwoDShape.prototype = new Shape(); Triangle.prototype = new TwoDShape(); segunda-feira, 17 de agosto de 2009
  102. 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. 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. 104. O Ambiente do Browser segunda-feira, 17 de agosto de 2009
  105. 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. 106. setTimeout • function funcao(){alert('Boo!');} • var tempoEmMillisegundos = 2000; • setTimeout(funcao, tempoEmMillisegundos); segunda-feira, 17 de agosto de 2009
  107. 107. setInterval • function funcao(){alert('Boo!');} • var tempoEmMillisegundos = 2000; • setInterval(funcao, tempoEmMillisegundos); segunda-feira, 17 de agosto de 2009
  108. 108. DOM - Document Object Model segunda-feira, 17 de agosto de 2009
  109. 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. 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. 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. 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. 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. 114. Criando Elementos var myp = document.createElement('p'); myp.innerHTML = 'yet another'; document.body.appendChild(myp) segunda-feira, 17 de agosto de 2009
  115. 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. 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. 117. Apagar Elementos var myp = document.getElementsByTagName('p')[1]; var removed = document.body.removeChild(myp); segunda-feira, 17 de agosto de 2009
  118. 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. 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. 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. 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. 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. 123. Obrigado! segunda-feira, 17 de agosto de 2009

×