Developer day 2010 - javascript

942 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
942
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Brackets go on the same line, that’s not negotiable!Can you tell the difference between the two codes?What’s gonna be the result of the function foo in each case?Analogy with which side of the street you pick
  • Brackets go on the same line, that’s not negotiable!Can you tell the difference between the two codes?What’s gonna be the result of the function foo in each case?Analogy with which side of the street you pick
  • Developer day 2010 - javascript

    1. 1. Introdução a JavaScript<br />Marcos Roberto Ferreira<br />marcos.wp@gmail.com<br />@marcoooos<br />
    2. 2. BRAVA ECM<br />Empresa especialista na distribuição e prestação de serviços em soluções de GED/CM, Workflow/BPM, Qualidade e Portais, que conta com a credibilidade de ser uma empresa com o selo TOTVS Business Partner.<br />10 anos de atuação no mercado<br />+ de 1.000 projetos entregues<br />+ de 1.000.000 horas <br />aplicadas em projetos<br />Equipe certificada e<br />altamente qualificada para atendimento em toda a América Latina<br />
    3. 3. Programação<br />Motivação<br />O que é JS<br />Tipos de dados<br />Funções<br />Objetos<br />Escopo de execução<br />Eventos<br />Melhores práticas<br />Ajax<br />Bibliotecas<br />3<br />
    4. 4. Qual é nossa BRAVA missão?<br />4<br />
    5. 5. Elevar a geração de resultados de nossos clientes através da automação e gestão de seus processos. <br />
    6. 6. Qual a principal arma para cumprir nossa missão?<br />6<br />
    7. 7. 7<br />
    8. 8. ByYou ECM<br />8<br />
    9. 9. E como podemos nos diferenciar na utilização do ByYou ECM?<br />9<br />
    10. 10. Datasets<br />10<br />
    11. 11. Workflows<br />11<br />
    12. 12. Fichários<br />12<br />
    13. 13. Fichários?<br />13<br />
    14. 14. 14<br />
    15. 15. HTML...<br />15<br />
    16. 16. HTML<br />CSS<br />JavaScript<br />16<br />
    17. 17. Mas o que é JavaScript?<br />17<br />
    18. 18. 18<br />JavaScripté umaimplementação do ECMAScript.<br />Pode ser caracterizadapor ser dinâmica,fracamentetipada,orientada a objetos, baseadaemprototypeefirst-class function<br />
    19. 19. 19<br />Na web, JavaScript é utilizado para criarinteração com páginas HTML através da manipulação do Document Object Model (DOM)<br />Após o advento do AJAX, JavaScript se tornouuma das principaisferramentasnaconstrução da Web 2.0<br />
    20. 20. 20<br />Document Object Model (DOM)<br /><script type="text/javascript"> /* aqui fica o script */ </script><br /><script type="text/javascript“ src=“lib.js”> </script><br />
    21. 21. 21<br />Document Object Model (DOM)<br />
    22. 22. 22<br />Document Object Model (DOM)<br /><ul><li>x.getElementById(id)
    23. 23. x.getElementsByTagName(name
    24. 24. x.appendChild(node)
    25. 25. x.removeChild(node)</li></li></ul><li>Tipos de dados<br />23<br />
    26. 26. 24<br /><ul><li>Numbers (1, 1.2, 42, -10, NaN)
    27. 27. Strings (“forty two”, “”)
    28. 28. Booleans (true, false)
    29. 29. Objects ( {}, { foo: “bar”} )
    30. 30. Functions (alert, eval)
    31. 31. null
    32. 32. undefined</li></li></ul><li>25<br />?<br />typeof(null); <br />typeof(undefined); <br />typeof(NaN);<br />
    33. 33. 26<br />typeof(null); //object<br />typeof(undefined); // undefined<br />typeof(NaN); // number<br />
    34. 34. 27<br />var a = null;<br />alert(a) // null<br />var a;<br />alert(a); // undefined<br />var a = 0/0<br />alert(a) // NaN<br />
    35. 35. 28<br />?<br />var a = 10/0<br />alert(a)<br />
    36. 36. 29<br />var a = 10/0<br />alert(a) // Infinity<br />
    37. 37. 30<br />a == b<br />vs<br />a === b<br />
    38. 38. ?<br /><ul><li>“” == “0”
    39. 39. 0 == “”
    40. 40. 0 == “0”
    41. 41. false == “false”
    42. 42. false == “0”
    43. 43. false == undefined
    44. 44. false == null
    45. 45. null == undefined
    46. 46. “ ” == 0 </li></li></ul><li><ul><li>“” == “0” // false
    47. 47. 0 == “” // true
    48. 48. 0 == “0” // true
    49. 49. false == “false” // false
    50. 50. false == “0” // true
    51. 51. false == undefined // false
    52. 52. false == null // false
    53. 53. null == undefined // true
    54. 54. “ ” == 0 // true</li></li></ul><li><ul><li>“” === “0” // false
    55. 55. 0 === “” // false
    56. 56. 0 === “0” // false
    57. 57. false === “false” // false
    58. 58. false === “0” // false
    59. 59. false === undefined // false
    60. 60. false === null // false
    61. 61. null === undefined // false
    62. 62. “ ” === 0 // false</li></ul>‘’ === ‘0’ // false<br />0 === ‘’ // false<br />0 === ‘0’ // false<br />false === ‘false’ // false<br />false === ‘0’ // false<br />false === undefined // false<br />false === null // false<br />null === undefined // false<br />“ ” === 0 // false<br />
    63. 63. Funções<br />34<br />
    64. 64. Declaração de uma função<br />‘’ === ‘0’ // false<br />0 === ‘’ // false<br />0 === ‘0’ // false<br />false === ‘false’ // false<br />false === ‘0’ // false<br />false === undefined // false<br />false === null // false<br />null === undefined // false<br />“ ” === 0 // false<br />functionnomeDaFuncao(var1,var2,...,varX){ linha de código 1<br /> linha de código 2<br /> linha de código 3<br />}<br />Chamada de uma função<br />function soma(num1, num2){<br />alert(num1+num2);<br />}<br />soma(1, 1);<br />
    65. 65. Propriedades de uma função<br />‘’ === ‘0’ // false<br />0 === ‘’ // false<br />0 === ‘0’ // false<br />false === ‘false’ // false<br />false === ‘0’ // false<br />false === undefined // false<br />false === null // false<br />null === undefined // false<br />“ ” === 0 // false<br />arguments – parâmetrospassados para a função<br />caller – funçãoqueestáchamando a função. <br />prototype – utilizado para adicionaratributosoufunções. <br />Retorno de uma função<br />function soma(num1, num2){<br />return num1+num2;<br />}<br />var resultado = soma(1, 1);<br />alert(resultado);<br />
    66. 66. Objetos<br />37<br />
    67. 67. Template de Objeto<br />‘’ === ‘0’ // false<br />0 === ‘’ // false<br />0 === ‘0’ // false<br />false === ‘false’ // false<br />false === ‘0’ // false<br />false === undefined // false<br />false === null // false<br />null === undefined // false<br />“ ” === 0 // false<br />functionPerson(firstName, lastName) {<br />this.name = firstName;<br />if(lastName==undefined){<br />this.name = "Sr." + this.name;<br /> }<br />this.sayHello = function(){<br />alert("hello: " + this.name);<br /> }<br />this.sayGoodbye = function () { <br />alert("goodbye: " + this.name);<br /> }<br />}<br />var p = newPerson("Marcos", "Ferreira");<br />p.sayHello();<br />p.sayGoodbye();<br />
    68. 68. Instância direta de Objeto<br />‘’ === ‘0’ // false<br />0 === ‘’ // false<br />0 === ‘0’ // false<br />false === ‘false’ // false<br />false === ‘0’ // false<br />false === undefined // false<br />false === null // false<br />null === undefined // false<br />“ ” === 0 // false<br />var person = newObject();<br />person.name = "Marcos";<br />person.sayHello = function() {<br />alert("hello: " + this.name);<br />}<br />person.sayGoodbye = function() {<br />alert("goodbye: " + this.name);<br />}<br />person.sayHello();<br />person.sayGoodbye();<br />
    69. 69. Objeto com notação literal<br />‘’ === ‘0’ // false<br />0 === ‘’ // false<br />0 === ‘0’ // false<br />false === ‘false’ // false<br />false === ‘0’ // false<br />false === undefined // false<br />false === null // false<br />null === undefined // false<br />“ ” === 0 // false<br />var person = {<br />name:"marcos",<br /> idade:25,<br /> email: “marcos.wp@gmail.com”,<br />sayHello:function(){<br />alert("hello: " +name)<br /> },<br />sayGoodbye:function(){<br />alert("goodbye: " + name)<br /> }<br />}<br />person.sayHello();<br />person.sayGoodbye();<br />
    70. 70. Herança com funções<br />‘’ === ‘0’ // false<br />0 === ‘’ // false<br />0 === ‘0’ // false<br />false === ‘false’ // false<br />false === ‘0’ // false<br />false === undefined // false<br />false === null // false<br />null === undefined // false<br />“ ” === 0 // false<br />functionPerson(firstName) {<br />this.name = firstName;<br />this.sayHello = function() { ... }<br />this.sayGoodbye = function() { ... }<br />}<br />functionStudent(studentName){<br />this.inheritFrom = Person;<br />this.inheritFrom(studentName);<br />this.sayHello = function(){ ... }<br />}<br />var p = newStudent("Marcos");<br />p.sayHello();<br />p.sayGoodbye();<br />
    71. 71. Herança com Prototype<br />‘’ === ‘0’ // false<br />0 === ‘’ // false<br />0 === ‘0’ // false<br />false === ‘false’ // false<br />false === ‘0’ // false<br />false === undefined // false<br />false === null // false<br />null === undefined // false<br />“ ” === 0 // false<br />functionPerson(firstName, lastName) {<br />this.name = firstName;<br />this.sayHello = function() { ... }<br />this.sayGoodbye = function() { ... }<br />}<br />functionStudent(studentName){<br />this.name = studentName;<br />this.sayHello = function(){ ... }<br />}<br />Student.prototype = newPerson;<br />var p = newStudent("Marcos");<br />p.sayHello();<br />p.sayGoodbye();<br />
    72. 72. Escopo de execução<br />
    73. 73. Atributo de objeto<br />function escopo() {<br />this.var1 = "um valor";<br />this.fazAlgo = function (){<br />alert(this.var1); // um valor<br /> }<br />}<br />new escopo().fazAlgo();<br />alert(this.var1) //undefined<br />
    74. 74. Variáveis locais<br />functionfazAlgo() {<br /> var var1 = "um valor";<br />alert(var1); // um valor<br />}<br />fazAlgo();<br />alert(var1); //var1 is notdefined<br />
    75. 75. Variáveis globais<br />‘’ === ‘0’ // false<br />0 === ‘’ // false<br />0 === ‘0’ // false<br />false === ‘false’ // false<br />false === ‘0’ // false<br />false === undefined // false<br />false === null // false<br />null === undefined // false<br />“ ” === 0 // false<br />functionfazAlgo() {<br /> var1 = "um valor";<br />alert(var1); // um valor<br />}<br />fazAlgo();<br />alert(var1); // um valor<br />
    76. 76. Eventos<br />
    77. 77. onFocus, onBlur, onChange<br /><input type="text" id="email" onchange="checkEmail()"><br />onSubmit<br /><form action="xxx.htm" onsubmit="return checkForm()"><br />onMouseOver, onMouseOut<br /><a href=“..." onmouseover="alert(‘hello')">hello</a><br />‘’ === ‘0’ // false<br />0 === ‘’ // false<br />0 === ‘0’ // false<br />false === ‘false’ // false<br />false === ‘0’ // false<br />false === undefined // false<br />false === null // false<br />null === undefined // false<br />“ ” === 0 // false<br />
    78. 78. ‘’ === ‘0’ // false<br />0 === ‘’ // false<br />0 === ‘0’ // false<br />false === ‘false’ // false<br />false === ‘0’ // false<br />false === undefined // false<br />false === null // false<br />null === undefined // false<br />“ ” === 0 // false<br />Boas práticas<br />
    79. 79. function foo() {<br /> return {<br /> bar: 42<br /> };<br />}<br />function foo() <br />{<br /> return <br />{<br /> bar: 42<br /> };<br />}<br />
    80. 80. function foo() {<br /> return {<br /> bar: 42<br /> };<br />}<br />alert(foo());<br />// object<br />alert(foo().bar);<br />// 42<br />function foo() <br />{<br /> return <br />{<br /> bar: 42<br /> };<br />}<br />alert(foo());<br />// undefined<br />
    81. 81. function foo() {<br /> return {<br /> bar: 42<br /> };<br />}<br />function foo() <br />{<br />return;<br />{<br /> bar: 42;<br /> };<br />}<br />Adicionado <br />automáticamente<br />
    82. 82. <ul><li>Abra chaves sempre na mesma linha do comando
    83. 83. Muito cuidado com ponto e vírgula adicionado automáticamente</li></li></ul><li>// java<br />if (true) { <br />varx = 10; <br />}<br />System.out.print(x);<br />// undefined x<br />// compile time<br />// javascript<br />if (true) { <br />var x = 10; <br />}<br />alert(x);<br />// 10<br />
    84. 84. // javascript<br />if (true) { <br /> (function () {<br />var x = 10; <br /> }());<br />}<br />alert(x);<br />// undefined<br />// javascript<br />if (true) { <br />var x = 10; <br />}<br />alert(x);<br />// 10<br />
    85. 85. // javascript<br />if (true) { <br /> (function () {<br />var x = 10; <br /> }());<br />}<br />alert(x);<br />// undefined<br />// javascript<br />if (true) { <br /> (function () {<br /> x = 10; <br /> }());<br />}<br />alert(x);<br />// 10<br />
    86. 86. <ul><li>Chaves não definem escopo de execução
    87. 87. Não use variáveis globais.</li></li></ul><li>Ajax<br />58<br />
    88. 88. <ul><li>Ajax é uma sigla para AsynchronousJavaScriptand XML
    89. 89. Com Ajax é possível acessar dados de maneira assíncrona e sem alterar estado de uma página</li></li></ul><li>A base do Ajax é o protocolo HTTP<br />
    90. 90. 61<br />Bibliotecas<br />
    91. 91. Não reinvente a roda!<br />
    92. 92. QUESTÕES?<br />bravaecm@totvs.com.br <br />

    ×