Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Java Script

2,352 views

Published on

Palestra sobre Java Script apresentada na Bluesoft em 2009

Published in: Technology
  • Be the first to comment

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

×