O documento introduz os principais conceitos de JavaScript, incluindo tipos de dados, funções, objetos, escopo, eventos e bibliotecas. Apresenta também as melhores práticas de programação em JavaScript, como estruturar o código, nomear variáveis e funções, além de explicar o que é Ajax.

1. Introdução a JavaScript Marcos Roberto Ferreira marcos.wp@gmail.com @marcoooos

2. BRAVA ECM 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. 10 anos de atuação no mercado + de 1.000 projetos entregues + de 1.000.000 horas aplicadas em projetos Equipe certificada e altamente qualificada para atendimento em toda a América Latina

3. Programação Motivação O que é JS Tipos de dados Funções Objetos Escopo de execução Eventos Melhores práticas Ajax Bibliotecas 3

4. Qual é nossa BRAVA missão? 4

5. Elevar a geração de resultados de nossos clientes através da automação e gestão de seus processos.

6. Qual a principal arma para cumprir nossa missão? 6

7. 7

8. ByYou ECM 8

9. E como podemos nos diferenciar na utilização do ByYou ECM? 9

10. Datasets 10

11. Workflows 11

12. Fichários 12

13. Fichários? 13

14. 14

15. HTML... 15

16. HTML CSS JavaScript 16

17. Mas o que é JavaScript? 17

18. 18 JavaScripté umaimplementação do ECMAScript. Pode ser caracterizadapor ser dinâmica,fracamentetipada,orientada a objetos, baseadaemprototypeefirst-class function

19. 19 Na web, JavaScript é utilizado para criarinteração com páginas HTML através da manipulação do Document Object Model (DOM) Após o advento do AJAX, JavaScript se tornouuma das principaisferramentasnaconstrução da Web 2.0

20. 20 Document Object Model (DOM) <script type="text/javascript"> /* aqui fica o script */ </script> <script type="text/javascript“ src=“lib.js”> </script>

21. 21 Document Object Model (DOM)

23. x.getElementsByTagName(name

24. x.appendChild(node)

27. Strings (“forty two”, “”)

28. Booleans (true, false)

29. Objects ( {}, { foo: “bar”} )

30. Functions (alert, eval)

31. null

33. 26 typeof(null); //object typeof(undefined); // undefined typeof(NaN); // number

34. 27 var a = null; alert(a) // null var a; alert(a); // undefined var a = 0/0 alert(a) // NaN

35. 28 ? var a = 10/0 alert(a)

36. 29 var a = 10/0 alert(a) // Infinity

37. 30 a == b vs a === b

39. 0 == “”

40. 0 == “0”

41. false == “false”

42. false == “0”

43. false == undefined

44. false == null

45. null == undefined

47. 0 == “” // true

48. 0 == “0” // true

49. false == “false” // false

50. false == “0” // true

51. false == undefined // false

52. false == null // false

53. null == undefined // true

55. 0 === “” // false

56. 0 === “0” // false

57. false === “false” // false

58. false === “0” // false

59. false === undefined // false

60. false === null // false

61. null === undefined // false

62. “ ” === 0 // false‘’ === ‘0’ // false 0 === ‘’ // false 0 === ‘0’ // false false === ‘false’ // false false === ‘0’ // false false === undefined // false false === null // false null === undefined // false “ ” === 0 // false

63. Funções 34

64. Declaração de uma função ‘’ === ‘0’ // false 0 === ‘’ // false 0 === ‘0’ // false false === ‘false’ // false false === ‘0’ // false false === undefined // false false === null // false null === undefined // false “ ” === 0 // false functionnomeDaFuncao(var1,var2,...,varX){ linha de código 1 linha de código 2 linha de código 3 } Chamada de uma função function soma(num1, num2){ alert(num1+num2); } soma(1, 1);

65. Propriedades de uma função ‘’ === ‘0’ // false 0 === ‘’ // false 0 === ‘0’ // false false === ‘false’ // false false === ‘0’ // false false === undefined // false false === null // false null === undefined // false “ ” === 0 // false arguments – parâmetrospassados para a função caller – funçãoqueestáchamando a função. prototype – utilizado para adicionaratributosoufunções. Retorno de uma função function soma(num1, num2){ return num1+num2; } var resultado = soma(1, 1); alert(resultado);

66. Objetos 37

67. Template de Objeto ‘’ === ‘0’ // false 0 === ‘’ // false 0 === ‘0’ // false false === ‘false’ // false false === ‘0’ // false false === undefined // false false === null // false null === undefined // false “ ” === 0 // false functionPerson(firstName, lastName) { this.name = firstName; if(lastName==undefined){ this.name = "Sr." + this.name; } this.sayHello = function(){ alert("hello: " + this.name); } this.sayGoodbye = function () { alert("goodbye: " + this.name); } } var p = newPerson("Marcos", "Ferreira"); p.sayHello(); p.sayGoodbye();

68. Instância direta de Objeto ‘’ === ‘0’ // false 0 === ‘’ // false 0 === ‘0’ // false false === ‘false’ // false false === ‘0’ // false false === undefined // false false === null // false null === undefined // false “ ” === 0 // false var person = newObject(); person.name = "Marcos"; person.sayHello = function() { alert("hello: " + this.name); } person.sayGoodbye = function() { alert("goodbye: " + this.name); } person.sayHello(); person.sayGoodbye();

69. Objeto com notação literal ‘’ === ‘0’ // false 0 === ‘’ // false 0 === ‘0’ // false false === ‘false’ // false false === ‘0’ // false false === undefined // false false === null // false null === undefined // false “ ” === 0 // false var person = { name:"marcos", idade:25, email: “marcos.wp@gmail.com”, sayHello:function(){ alert("hello: " +name) }, sayGoodbye:function(){ alert("goodbye: " + name) } } person.sayHello(); person.sayGoodbye();

70. Herança com funções ‘’ === ‘0’ // false 0 === ‘’ // false 0 === ‘0’ // false false === ‘false’ // false false === ‘0’ // false false === undefined // false false === null // false null === undefined // false “ ” === 0 // false functionPerson(firstName) { this.name = firstName; this.sayHello = function() { ... } this.sayGoodbye = function() { ... } } functionStudent(studentName){ this.inheritFrom = Person; this.inheritFrom(studentName); this.sayHello = function(){ ... } } var p = newStudent("Marcos"); p.sayHello(); p.sayGoodbye();

71. Herança com Prototype ‘’ === ‘0’ // false 0 === ‘’ // false 0 === ‘0’ // false false === ‘false’ // false false === ‘0’ // false false === undefined // false false === null // false null === undefined // false “ ” === 0 // false functionPerson(firstName, lastName) { this.name = firstName; this.sayHello = function() { ... } this.sayGoodbye = function() { ... } } functionStudent(studentName){ this.name = studentName; this.sayHello = function(){ ... } } Student.prototype = newPerson; var p = newStudent("Marcos"); p.sayHello(); p.sayGoodbye();

72. Escopo de execução

73. Atributo de objeto function escopo() { this.var1 = "um valor"; this.fazAlgo = function (){ alert(this.var1); // um valor } } new escopo().fazAlgo(); alert(this.var1) //undefined

74. Variáveis locais functionfazAlgo() { var var1 = "um valor"; alert(var1); // um valor } fazAlgo(); alert(var1); //var1 is notdefined

75. Variáveis globais ‘’ === ‘0’ // false 0 === ‘’ // false 0 === ‘0’ // false false === ‘false’ // false false === ‘0’ // false false === undefined // false false === null // false null === undefined // false “ ” === 0 // false functionfazAlgo() { var1 = "um valor"; alert(var1); // um valor } fazAlgo(); alert(var1); // um valor

76. Eventos

77. onFocus, onBlur, onChange <input type="text" id="email" onchange="checkEmail()"> onSubmit <form action="xxx.htm" onsubmit="return checkForm()"> onMouseOver, onMouseOut <a href=“..." onmouseover="alert(‘hello')">hello</a> ‘’ === ‘0’ // false 0 === ‘’ // false 0 === ‘0’ // false false === ‘false’ // false false === ‘0’ // false false === undefined // false false === null // false null === undefined // false “ ” === 0 // false

78. ‘’ === ‘0’ // false 0 === ‘’ // false 0 === ‘0’ // false false === ‘false’ // false false === ‘0’ // false false === undefined // false false === null // false null === undefined // false “ ” === 0 // false Boas práticas

79. function foo() { return { bar: 42 }; } function foo() { return { bar: 42 }; }

80. function foo() { return { bar: 42 }; } alert(foo()); // object alert(foo().bar); // 42 function foo() { return { bar: 42 }; } alert(foo()); // undefined

81. function foo() { return { bar: 42 }; } function foo() { return; { bar: 42; }; } Adicionado automáticamente

84. // javascript if (true) { (function () { var x = 10; }()); } alert(x); // undefined // javascript if (true) { var x = 10; } alert(x); // 10

85. // javascript if (true) { (function () { var x = 10; }()); } alert(x); // undefined // javascript if (true) { (function () { x = 10; }()); } alert(x); // 10

90. 61 Bibliotecas

91. Não reinvente a roda!

92. Referências http://www.slideshare.net/cheilmann/javascript-best-practices-1041724 http://www.slideshare.net/thomanil/javascript-neednt-hurt-javabin-talk http://www.w3schools.com/js/default.asp http://www.w3schools.com/htmldom/default.asp http://www.slideshare.net/Dmitry.Baranovskiy/java-script-workshop

93. QUESTÕES? bravaecm@totvs.com.br