Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Javascript do jeito certo

2.599 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • Login to see the comments

Javascript do jeito certo

  1. 1. Javascript do jeito certo Alexandre Gomes
  2. 2. javascript ?a que te remete o termo
  3. 3. <form> <input type=button value="Close Window" onClick="javascript:window.close();"></form>
  4. 4. <script> function open_window(url) { mywin = window.open(url,"win",...); }</script><body> <a href = "javascript:open_window(page1.html)"> <img src ="image.gif"> </a> <a href = "javascript:open_window(page2.html)"> <img src ="image.gif"> </a></body>
  5. 5. function validateForm() { var x = document.forms["myForm"]["fname"].value if (x == null || x == "") { alert("Nome obrigatório!"); return false; }}
  6. 6. para a grande maioria,javascript = magia negra
  7. 7. Javascript
  8. 8. http://corte.si/posts/code/devsurvey/index.html
  9. 9. https://github.com/blog/99-popular-languages
  10. 10. javascriptAfinal, é do mal ou do bem?
  11. 11. http://www.ecma-international.org/publications/standards/Ecma-262.htm
  12. 12. ISO IEC 16262http://www.ecma-international.org/publications/standards/Ecma-262.htm
  13. 13. “ ECMAScript is an object-oriented programming language for performing computations and manipulating computational objects within a host environment. ECMAScript Language Specification 5th edition (December 2009)
  14. 14. “ ECMAScript as defined here is not intended to be computationally self- sufficient; indeed, there are no provisions in this specification for input of external data or output of computed results. ECMAScript Language Specification 5th edition (December 2009)
  15. 15. “ Instead, it is expected that the computational environment (host environment) of an ECMAScript program will provide not only the objects and other facilities described in this specification but also certain environment-specific host objects ECMAScript Language Specification 5th edition (December 2009)
  16. 16. “ Some of the facilities of ECMAScript are similar to those used in other programming languages; in particular Java TM, Self, and Scheme ECMAScript Language Specification 5th edition (December 2009)
  17. 17. “ A web browser provides an ECMAScript host environment for client-side computation including, for instance, objects that represent windows, menus, pop-ups, dialog boxes, text areas, anchors, frames, history, cookies, and input/output. navigator.appName; window.moveTo(100,100); ECMAScript Language Specification 5th edition (December 2009)
  18. 18. “ Further, the host environment provides a means to attach scripting code to events such as change of focus, page and image loading, unloading, error and abort, selection, form submission, and mouse actions.<button type="button" onclick="displayDate()"> Display Date</button> ECMAScript Language Specification 5th edition (December 2009)
  19. 19. “ The scripting code is reactive to user interaction and there is no need for a main program.<!-- Ate parece, mas nao e o ‘main’ do javascript --><script type="text/javascript"> function load() { alert("Page is loaded"); }</script><body onload="load()"> ECMAScript Language Specification 5th edition (December 2009)
  20. 20. “ A web server provides a different host environment for server-side computation including objects representing requests, clients, and files; and mechanisms to lock and share data. ECMAScript Language Specification 5th edition (December 2009)
  21. 21. “ Each Web browser and server that supports ECMAScript supplies its own host environment, completing the ECMAScript execution environment. ECMAScript Language Specification 5th edition (December 2009)
  22. 22. “ ECMAScript is an object-oriented programming language (...) ECMAScript Language Specification 5th edition (December 2009)
  23. 23. “ ECMAScript is an object-oriented programming language (...) Tipos Boolean, Number, String, Array, RegExpOperadores + - * / >> << >>> < > <= >= | & *= ^ ++Comentários // /* */ Estruturas do while for if else try catch switch ECMAScript Language Specification 5th edition (December 2009)
  24. 24. Tipos (construtores)Boolean ObjectNumber FunctionString RegExp Array Date
  25. 25. Tipos undefinedvar x;alert(x); ECMAScript Language Specification 5th edition (December 2009)
  26. 26. Tipos nullvar x = null;alert(x); ECMAScript Language Specification 5th edition (December 2009)
  27. 27. Tipos Booleanvar x = true;if(x) { alert(Verdadeiro);}Obs: 0 e null equivalem a false ECMAScript Language Specification 5th edition (December 2009)
  28. 28. Tipos Numbervar x = 10;var y = 15;alert(x+y);var x = 10.1;var y = 15.2;alert(x+y); ECMAScript Language Specification 5th edition (December 2009)
  29. 29. Tipos Stringvar x = “Alexandre”;alert(x); ECMAScript Language Specification 5th edition (December 2009)
  30. 30. Tipos Functionvar x = function() { alert("Alexandre"); };x(); ECMAScript Language Specification 5th edition (December 2009)
  31. 31. > var x = true;> x.constructor;Boolean()> var x = "Alexandre";> x.constructor;String()> var x = 3467;> x.constructor;Number()> var x = function() { alert("Alexandre"); };> x.constructor;Function()
  32. 32. var x = new Boolean(true);if(x) { alert(Verdadeiro); }var x = new String(“Alexandre”);alert(x);var x = new Number(10);var y = new Number(15);alert(x+y);
  33. 33. Operadores / <<= ? :delete % >>= = void >> == *=typeof << != /= ++ >>> === %= -- < !== += + > & -= - <= ^ >>>= ~ >= | &= ! instanceof && ˆ= * || in |=
  34. 34. Operadores deletevar a = 1undefineda1delete atrueaReferenceError: a is not defined ECMAScript Language Specification 5th edition (December 2009)
  35. 35. Operadores typeoftypeof 1"number"typeof true"boolean"typeof "Alexandre""string"typeof function() { alert(Oi) }"function"typeof null"object" ECMAScript Language Specification 5th edition (December 2009)
  36. 36. Operadores ++ e --var a = 1undefineda++1a2++a3 ECMAScript Language Specification 5th edition (December 2009)
  37. 37. Operadores instanceofvar a = "alexandre"undefineda instanceof Stringfalsevar a = new String("alexandre")undefineda instanceof Stringtruea instanceof Objecttrue ECMAScript Language Specification 5th edition (December 2009)
  38. 38. Operadores ==, !=, ===, !==3 == "3"true3 === "3"false2 != "2"false2 !== "2"true ECMAScript Language Specification 5th edition (December 2009)
  39. 39. Estruturasif/else continue switchdo/while break throw while return try/catch for with debugger for/in
  40. 40. Estruturas if/elsevar a = trueif (a) { alert(Verdadeiro)} else { alert(Falso)} ECMAScript Language Specification 5th edition (December 2009)
  41. 41. Estruturas do/whilevar i = 1do { alert(i); (...) i++;} while (i < 5) ECMAScript Language Specification 5th edition (December 2009)
  42. 42. Estruturas forfor ( var i = 1; i < 5; i++) { alert(i);} (...) ECMAScript Language Specification 5th edition (December 2009)
  43. 43. Estruturas for/invar array = [1,3,5,7,9]for (var i in array) { alert(array[i])} (...) ECMAScript Language Specification 5th edition (December 2009)
  44. 44. Estruturas for/each/in> var obj = { a: 1, b: 3, c: 5 }> obj.a1> for(p in obj) { alert(p + ": " + obj[p]) }> for each (v in obj) { alert(v) // v aqui igual ao obj[p] acima } ECMAScript Language Specification 5th edition (December 2009)
  45. 45. Estruturas withvar obj = { a: 1, b: 3, c: 5 }alert(obj.a); // 1alert(obj.b); // 3alert(obj.c); // 5with(obj) { alert(a); // 1 alert(b); // 3 alert(c); // 5} ECMAScript Language Specification 5th edition (December 2009)
  46. 46. Estruturas switch/casevar a = "alexandre";switch (a) {case "sebastiao": alert("Tião?"); break;case "raimunda": alert("Raimundinha?"); break; case "alexandre": alert("Alê!"); break;} ECMAScript Language Specification 5th edition (December 2009)
  47. 47. “ ECMAScript is object-based: basic language and host facilities are provided by objects, and an ECMAScript program is a cluster of communicating objects. ECMAScript Language Specification 5th edition (December 2009)
  48. 48. Numa aplicação Javascript, coexistirão 3 grupos de objetosobjetos definidos pela objetos definidos pelo objetos definidos pelo especificação web browser desenvolvedor ECMAScript Boolean window alexandre Number document mensagem String XMLHttpRequest ... Array ... ...
  49. 49. “ An ECMAScript object is a collection of properties each with zero or more attributes that determine how each property can be used alexandre nome: “Alexandre” sobrenome: “Gomes” idade: 34 ECMAScript Language Specification 5th edition (December 2009)
  50. 50. “ An ECMAScript object is a collection of properties each with zero or more attributes that determine how each property can be used alexandre nome: “Alexandre” sobrenome: “Gomes” idade: 34 modificável: false ECMAScript Language Specification 5th edition (December 2009)
  51. 51. > var ale = new Object()> ale.nome = "Alexandre Gomes""Alexandre Gomes"> ale.nascimento = new Date(1977,8,8)Thu Sep 08 1977 00:00:00 GMT-0300 (BRT)> ale.nome"Alexandre Gomes"> ale.nascimentoThu Sep 08 1977 00:00:00 GMT-0300 (BRT)> ale[‘nome’]"Alexandre Gomes"> ale[‘nascimento’]Thu Sep 08 1977 00:00:00 GMT-0300 (BRT)
  52. 52. “ Properties are containers (slots) that hold other objects, primitive values, or functions. alexandre nome: “Alexandre” nascimento: new Date(1977,8,8,0,0,0,0) idade: function() { ... } ECMAScript Language Specification 5th edition (December 2009)
  53. 53. “ ECMAScript defines acollection of built-in objectsFunction, Array, String, Boolean, Number, Math, Date, RegExp, JSON Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError e URIError ECMAScript Language Specification 5th edition (December 2009)
  54. 54. > var x = "Alexandre";> x.length String9> x.charAt(5);"n"> x + " Gomes""Alexandre Gomes"> x.replace("dre", "dro");"Alexandro"> x.big()"<big>Alexandre</big>"> x.link("http://alegom.es")"<a href="http://alegom.es">Alexandre</a>"
  55. 55. Boolean>>> var x = true;>>> if(x) { alert(yes); } else { alert(no) } // yes>>> !xfalse>>> x & false0>>> x && falsefalse>>> x | false1>>> x || falsetrue>>> var x = false;>>> if(x) { alert(yes); } else { alert(no) } // no
  56. 56. Number>>> var x = 10>>> var y = 15;>>> z = x + y25>>> z.toFixed(2);"25.00">>> z.toExponential(2);"2.50e+1">>> 2.toExponential(2);SyntaxError: identifier starts immediatelyafter numeric literal
  57. 57. Math>>> Math.PI3.141592653589793>>> Math.sqrt(81);9>>> Math.tan(45);1.6197751905438615>>> Math.pow(3,2);9>>> Math.random();0.8528815588353642>>> Math.random();0.955940929887219
  58. 58. >>> var x = new Date(); Date>>> x.toString();"Sun Apr 03 2011 12:20:42 GMT-0300 (BRT)">>> x.getHours() + ":" + x.getMinutes() + ":" + x.getSeconds();"12:20:42">>> x.getDate() + "/" + x.getMonth() + "/" + x.getFullYear();"3/3/2011">>> var x = new Date("5/18/2006");>>> x.toString();"Thu May 18 2006 00:00:00 GMT-0300 (BRT)">>> var x = new Date("2006-5-18");>>> x.toString();"Invalid Date">>> var x = Date(2006,5,18,10,11,12,13);>>> x.toString();"Sun Jun 18 2006 10:11:12 GMT-0300 (BRT)"
  59. 59. >>> var x = new Date();>>> x.toString(); Date"Sun Apr 03 2011 12:20:42 GMT-0300 (BRT)">>> x.getHours() + ":" + x.getMinutes() + ":" + x.getSeconds();"12:20:42">>> x.getDate() + "/" + x.getMonth() + "/" + x.getFullYear();"3/3/2011">>> var x = new Date("5/18/2006");>>> x.toString();"Thu May 18 2006 00:00:00 GMT-0300 (BRT)">>> var x = new Date("2006-5-18");>>> x.toString();"Invalid Date">>> var x = Date(2006,5,18,10,11,12,13);>>> x.toString();"Sun Jun 18 2006 10:11:12 GMT-0300 (BRT)"
  60. 60. >>> var texto = "O gato roeu a roupa do rei de roma";>>> var regex = new RegExp("gato", “”);>>> texto.match(regex);["gato"] Regex>>> regex.exec(texto);["gato"]>>> texto.match(/gato/);["gato"]>>> texto.match(/O gato/);["O gato"]>>> texto.match(/o gato/);null>>> texto.match(/o gato/i);["O gato"]>>> texto.match(/o gato.*/i);["O gato roeu a roupa do rei de roma"]
  61. 61. >>> var obj = { "nome": "Alexandre", "idade" : "33" }>>> obj.constructor;Object() JSON>>> obj.nome"Alexandre">>> obj.idade"33">>> var msg = JSON.stringify(obj);>>> msg.constructor;String()>>> msg"{"nome":"Alexandre","idade":"33"}">>> var msg = { "nome": "Alexandre", "idade" : "33" }"{ "nome": "Alexandre", "idade" : "33" }">>> msg.constructor;String()>>> msg.nome;undefined>>> obj = JSON.parse(msg);Object { nome="Alexandre", idade="33"}>>> obj.constructor;Object()>>> obj.nome;"Alexandre"
  62. 62. var x = new Array();>>> [] Arrayx[0] = "laranja">>> ["laranja"]x[2] = "maçã">>> ["laranja", undefined, "maçã"]x.length>>> 3x.sort();>>> ["laranja", "maçã", undefined]x.reverse();>>> [undefined, "maçã", "laranja"]x = ["pera", "uva", new Date()]x.toString();>>> "pera,uva,Sun Apr 03 2011 11:53:18 GMT-0300 (BRT
  63. 63. “ A web browser provides an ECMAScript host environment (...)
  64. 64. > document.body 1. <body id=​"docs" class=​"section-docs en ltr yui-skin-sam PageDW- enDOMdocument js" role=​"document">​…​</body>​> document.domain"developer.mozilla.org"> document.links[ <a href=​"#content-main">​Skip to the main content​</a>, <a href=​"#q">​Skip to the site search​</a>, <a href=​"/​">​…​</a>, <a href=​"/​index.php?" class=​"user-login">​Log in​</a>, <a href=​"/​docs">​Doc Center​</a>, …
  65. 65. {{Gecko Webkit
  66. 66. e agora, prendam a respiração...
  67. 67. “ apesar de ser OO, ECMAScript does not useclasses such as those in C+ +, Smalltalk, or Java. ECMAScript Language Specification 5th edition (December 2009)
  68. 68. “Classful” “Classless”reuso por herança de reuso por clonagem classes de objetos Pessoa joao nome nome: “João” sexo idade: 28 <<herda>> <<clona>> Funcionári maria o salário nome: “Maria” idade: 20
  69. 69. “Classful” “Classless” modelagem modelagem top-down bottom-upprimeiro a taxonomia e primeiro oseus relacionamentos... comportamento...
  70. 70. “Classful” “Classless”objetos criados a objetos criados apartir de classes partir de clonagem...hoje = new Date() hoje = new Date() ...ou por ‘geração expontânea’ var x = { one: 1, two: 2 }
  71. 71. “Classful” “Classless”objetos carregam a objetos carregam as estrutura e o características de comportamento de sua classe seu protótipo
  72. 72. Programação baseada em protótiposprotótipo
  73. 73. Programação baseada em protótiposprotótipo clone
  74. 74. Programação baseada em protótiposprotótipo clone
  75. 75. Programação baseada em protótipos>>> var conta = { saldo: 1000.00 };>>> conta.saldo1000>>> conta.limiteundefined>>> var conta_especial = { limite: 500.00 }>>> conta_especial.limite500>>> conta_especial.saldoundefined>>> conta_especial.__proto__ = conta // referência explícitaObject { saldo=1000}>>> conta_especial.saldo1000
  76. 76. Herança baseada em protótipos> var conta = function(saldo) { this.saldo = saldo; this.ver_saldo = function() { alert(saldo = + this.saldo) } }> c1 = new conta(1000)> c1.ver_saldo()> var conta_especial = function(saldo, limite) { this.inheritFrom = conta; this.inheritFrom(); this.saldo = saldo; this.limite = limite; }> c2 = new conta_especial(2000,3000)> c2.ver_saldo()
  77. 77. “ objects may be created in various ways including via a literal notation var conta = { saldo: 1000.00 } ECMAScript Language Specification 5th edition (December 2009)
  78. 78. “ objects may be created in various ways including via a literal notation var conta = { saldo: 1000.00 } or via constructors hoje = new Date() ECMAScript Language Specification 5th edition (December 2009)
  79. 79. “ Each constructor is a function hoje = new Date() function Date() { ... } ECMAScript Language Specification 5th edition (December 2009)
  80. 80. mas function é também um objeto Date()var Date = function() {...}hoje = new Date()
  81. 81. construtor function Date() objeto
  82. 82. construtor function Date() objetopropriedades
  83. 83. “ Each constructor is afunction that has a propertynamed “prototype” that is used to implementprototype-based inheritance and shared properties. ECMAScript Language Specification 5th edition (December 2009)
  84. 84. “ Each constructor is a function that has a property named “prototype”(...) Date() <<construtor prototype Protótipo do Date() ECMAScript Language Specification 5th edition (December 2009)
  85. 85. Date()<<construtorprototype Protótipo do Date() ECMAScript Language Specification 5th edition (December 2009)
  86. 86. “ Every object created by a constructor Date() <<construtor hoje = new Date() hoje prototype Protótipo do Date() ECMAScript Language Specification 5th edition (December 2009)
  87. 87. “ Every object created by a constructor has an implicit reference (called the object’s prototype) Date() <<construtor hoje = new Date() hoje prototype prototype Protótipo do Date() ECMAScript Language Specification 5th edition (December 2009)
  88. 88. “ Every object created by a constructor has an implicit reference (called the object’s prototype) to the value of its constructor’s “prototype” property. Date() <<construtor hoje = new Date() hoje prototype prototype Protótipo do Date() ECMAScript Language Specification 5th edition (December 2009)
  89. 89. “ Furthermore, a prototype may have a non-null implicit reference to its prototype, and so on; this is called the prototype chain. Date() <<construtor Protótipo do Date() ECMAScript Language Specification 5th edition (December 2009)
  90. 90. “ Furthermore, a prototype may have a non-null implicit reference to its prototype, and so on; this is called the prototype chain. Date() <<construtor Protótipo do protótipo do Date() Protótipo do Protótipo protótipo do do Date() protótipo do Date() ECMAScript Language Specification 5th edition (December 2009)
  91. 91. “ When a reference is made to a property in an object, that reference is to the property of that name in the first object in the prototype chain that contains a property of that name. ECMAScript Language Specification 5th edition (December 2009)
  92. 92. “ When a reference is made to a property in an object, that reference is to the property of that name in the first object in the prototype chain that contains a property of that name. obj p3:p1: “um” “tres” p2: p4: “dois” “quatro” ECMAScript Language Specification 5th edition (December 2009)
  93. 93. “ When a reference is made to a property in an object, that reference is to the property of that name in the first object in the prototype chain that contains a property of that name. obj obj.p1 p3:p1: “um” “tres” p2: p4: “dois” “quatro” ECMAScript Language Specification 5th edition (December 2009)
  94. 94. “ When a reference is made to a property in an object, that reference is to the property of that name in the first object in the prototype chain that contains a property of that name. obj obj.p1 p3:p1: “um” “tres” obj.p2 p2: p4: “dois” “quatro” ECMAScript Language Specification 5th edition (December 2009)
  95. 95. “ When a reference is made to a property in an object, that reference is to the property of that name in the first object in the prototype chain that contains a property of that name. obj obj.p1 p3:p1: “um” “tres” obj.p2 obj.p3 p2: p4: “dois” “quatro” ECMAScript Language Specification 5th edition (December 2009)
  96. 96. “ When a reference is made to a property in an object, that reference is to the property of that name in the first object in the prototype chain that contains a property of that name. obj obj.p1 p3:p1: “um” “tres” obj.p2 obj.p3 p2: p4: obj.p4 “dois” “quatro” ECMAScript Language Specification 5th edition (December 2009)
  97. 97. > var Pessoa = function(nome, idade) { this.nome = nome; this.idade = idade; }> var alexandre = new Pessoa(Ale, 33);> alexandre.nome"Ale"> alexandre.idade33> var sebastiana = new Pessoa(Sebastiana, 88);> sebastiana.nome"Sebastiana"> sebastiana.idade88
  98. 98. > var Pessoa = function(nome, idade) { this.nome = nome; this.idade = idade; } construtor> var alexandre = new Pessoa(Ale, 33);> alexandre.nome"Ale"> alexandre.idade33> var sebastiana = new Pessoa(Sebastiana, 88);> sebastiana.nome"Sebastiana"> sebastiana.idade88
  99. 99. > var Pessoa = function(nome, idade) { this.nome = nome; this.idade = idade; }> var alexandre = new Pessoa(Ale, 33);> alexandre.nome"Ale"> alexandre.idade33 objeto 1> var sebastiana = new Pessoa(Sebastiana, 88);> sebastiana.nome"Sebastiana"> sebastiana.idade88
  100. 100. > var Pessoa = function(nome, idade) { this.nome = nome; this.idade = idade; }> var alexandre = new Pessoa(Ale, 33);> alexandre.nome"Ale"> alexandre.idade33> var sebastiana = new Pessoa(Sebastiana, 88);> sebastiana.nome"Sebastiana"> sebastiana.idade88 objeto 2
  101. 101. Pessoa()<<construtor> nome idade
  102. 102. Protótipo do Pessoa()Pessoa()<<construtor> nome idade
  103. 103. Protótipo do Pessoa() Pessoa() <<construtor> nome idadealexandre sebastiananome = ‘Ale’ nome = ‘Seb...’ idade = 33 idade = 88
  104. 104. Protótipo do Pessoa() ? > alexandre.nome Pessoa() <<construtor> nome idadealexandre sebastiananome = ‘Ale’ nome = ‘Seb...’ idade = 33 idade = 88
  105. 105. Protótipo do > alexandre.nome Pessoa() “Ale” Pessoa() <<construtor> nome idadealexandre sebastiananome = ‘Ale’ nome = ‘Seb...’ idade = 33 idade = 88
  106. 106. Protótipo do > alexandre.nome Pessoa() “Ale” > sebastiana.idade 88 Pessoa() <<construtor> nome idadealexandre sebastiananome = ‘Ale’ nome = ‘Seb...’ idade = 33 idade = 88
  107. 107. Protótipo do > alexandre.nome Pessoa() “Ale” > sebastiana.idade 88 Pessoa() ? <<construtor> > alexandre.sexo nome idadealexandre sebastiananome = ‘Ale’ nome = ‘Seb...’ idade = 33 idade = 88
  108. 108. Protótipo do > alexandre.nome Pessoa() “Ale” > sebastiana.idade 88 Pessoa() <<construtor> > alexandre.sexo nome undefined idadealexandre sebastiananome = ‘Ale’ nome = ‘Seb...’ idade = 33 idade = 88
  109. 109. Protótipo do > alexandre.nome Pessoa() “Ale” > sebastiana.idade 88 Pessoa() <<construtor> > alexandre.sexo nome undefined idade > sebastiana.sexo undefinedalexandre sebastiananome = ‘Ale’ nome = ‘Seb...’ idade = 33 idade = 88
  110. 110. Protótipo Pessoa() <<construtor> nome idadealexandre sebastiananome = ‘Ale’ nome = ‘Seb...’ idade = 33 idade = 88
  111. 111. Protótipo > Pessoa.prototype.sexo = “M” sexo Pessoa() <<construtor> nome idadealexandre sebastiananome = ‘Ale’ nome = ‘Seb...’ idade = 33 idade = 88
  112. 112. Protótipo > Pessoa.prototype.sexo = “M” sexo > alexandre.sexo “M” Pessoa() <<construtor> nome idadealexandre sebastiananome = ‘Ale’ nome = ‘Seb...’ idade = 33 idade = 88
  113. 113. Protótipo > Pessoa.prototype.sexo = “M” sexo > alexandre.sexo “M” > sebastiana.sexo “M” Pessoa() <<construtor> nome idadealexandre sebastiananome = ‘Ale’ nome = ‘Seb...’ idade = 33 idade = 88
  114. 114. Protótipo > Pessoa.prototype.sexo = “M” sexo > alexandre.sexo “M” > sebastiana.sexo “M” Pessoa() <<construtor> nome > sebastiana.sexo = “F” idadealexandre sebastiananome = ‘Ale’ nome = ‘Seb...’ idade = 33 idade = 88
  115. 115. Protótipo > Pessoa.prototype.sexo = “M” sexo > alexandre.sexo “M” > sebastiana.sexo “M” Pessoa() <<construtor> nome > sebastiana.sexo = “F” idade > sebastiana.sexo “F”alexandre sebastiananome = ‘Ale’ nome = ‘Seb...’ idade = 33 idade = 88
  116. 116. Object
  117. 117. Object Prototipo de Object
  118. 118. Object Prototipo de ObjectObject.prototype.pO = 1
  119. 119. Object Prototipo de Object pO = 1Object.prototype.pO = 1
  120. 120. Object Prototipo de Object pO = 1 A a=2var A = function() { this.a = 2;}
  121. 121. Object Prototipo de Object pO = 1 A Prototipo de A a=2
  122. 122. Object Prototipo de Object pO = 1 A Prototipo de A a=2 pA = 3A.prototype.pA = 3
  123. 123. Object Prototipo de Object pO = 1 A Prototipo de A a=2 pA = 3 B var B = function() { this.b = 4;b=4 }
  124. 124. Object Prototipo de Object pO = 1 A Prototipo de A a=2 pA = 3 B Prototipo de Bb=4
  125. 125. Object Prototipo de Object B.prototype = new A pO = 1 A Prototipo de A a=2 pA = 3 B Prototipo de Bb=4
  126. 126. Object Prototipo de Object B.prototype = new A pO = 1 A Prototipo de A a=2 pA = 3 B new A()b=4
  127. 127. Object Prototipo de Object B.prototype.pB = 5 pO = 1 A Prototipo de A a=2 pA = 3 B new A()b=4 pB = 5
  128. 128. Object Prototipo de Object pO = 1 A Prototipo de A a=2 pA = 3 B new A()b=4 pB = 5
  129. 129. Object Prototipo de Object x = new= 1 pO B() A Prototipo de A a=2 pA = 3 B new A() Xb=4 pB = 5
  130. 130. Object Prototipo de Object pO = 1 A Prototipo de A a=2 pA = 3 B new A() Xb=4 pB = 5
  131. 131. Object Prototipo de Object pO = 1 A Prototipo de A a=2 pA = 3 x.pB ? B new A() Xb=4 pB = 5
  132. 132. Object Prototipo de Object pO = 1 A Prototipo de A a=2 pA = 3 x.b B new A() Xb=4 pB = 5
  133. 133. Object Prototipo de Object pO = 1 A Prototipo de A a=2 pA = 3 x.b ? B new A() Xb=4 pB = 5
  134. 134. Object Prototipo de Object pO = 1 A Prototipo de A a=2 pA = 3 x.pA B new A() Xb=4 pB = 5
  135. 135. Object Prototipo de Object pO = 1 A Prototipo de A a=2 pA = 3 x.pA ? B new A() Xb=4 pB = 5
  136. 136. Object Prototipo de Object pO = 1 A Prototipo de A a=2 pA = 3 x.a B new A() Xb=4 pB = 5
  137. 137. Object Prototipo de Object pO = 1 A Prototipo de A a=2 pA = 3 x.a ? B new A() Xb=4 pB = 5
  138. 138. Object Prototipo de Object pO = 1 A Prototipo de A a=2 pA = 3 x.pO B new A() Xb=4 pB = 5
  139. 139. Object Prototipo de Object pO = 1 A Prototipo de A a=2 pA = 3 x.pO ? B new A() Xb=4 pB = 5
  140. 140. @see http://www.w3schools.com/js/default.asp https://developer.mozilla.org/en/JavaScript/Referencehttps://developer.mozilla.org/en/Gecko_DOM_Referencehttp://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/WebKitDOMRef/index.html
  141. 141. o que tem sido feito comjavascript
  142. 142. http://jquery.com/
  143. 143. http://plugins.jquery.com/• Ajax • Layout• Animation and Effects • Media• Browser Tweaks • Menus• Data • Metaplugin• DOM • Navigation• Drag-and-Drop • Tables• Events • User Interface• Forms • Utilities• Integration • Widgets• JavaScript • Windows and Overlays• jQuery Extensions
  144. 144. http://www.prototypejs.org/
  145. 145. http://script.aculo.us/
  146. 146. http://madrobby.github.com/scriptaculous/combination-effects-demo/
  147. 147. http://raphaeljs.com/
  148. 148. Nodes goal is to provide aneasy way to build scalable network programs. http://nodejs.org/
  149. 149. Backbone supplies structure to JavaScript-heavy applications by providing models with key-valuebinding and custom events, collections with a richAPI of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface. http://documentcloud.github.com/backbone/
  150. 150. CoffeeScript is a little languagethat compiles into JavaScript. (...) CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way. http://jashkenas.github.com/coffee-script/
  151. 151. if (opposite) { number = -42; }number = -42 if opposite
  152. 152. square = function(x) { return x * x;};square = (x) -> x * x
  153. 153. cubes = (function() { var _i, _len, _results; _results = []; for (_i = 0, _len = list.length; _i < _len; _i++) { num = list[_i]; _results.push(math.cube(num)); } return _results;})(); cubes = (math.cube num for num in list)
  154. 154. P&R

×