JavaScript - A Linguagem

3,008 views

Published on

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

No Downloads
Views
Total views
3,008
On SlideShare
0
From Embeds
0
Number of Embeds
156
Actions
Shares
0
Downloads
127
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

JavaScript - A Linguagem

  1. 1. JavaScript: A Linguagem Prof. Sérgio Souza Costa
  2. 2. Sobre mim Sérgio Souza Costa Professor - UFMA Doutor em Computação Aplicada (INPE) prof.sergio.costa@gmail.com https://sites.google.com/site/profsergiocosta/home https://twitter.com/profsergiocosta http://gplus.to/sergiosouzacosta http://www.slideshare.net/skosta/presentations?order=popular
  3. 3. Interfaces de usuário Estrutura: HTML Apresentação: CSS Comportamento: JavaScript
  4. 4. Interfaces de usuário Estrutura: HTML Apresentação: CSS Comportamento: JavaScript
  5. 5. $(document).ready(function(){ $("#p1").mouseenter(function(){ $.ajax({ url: "endereco_web", success: function(html){ $("#a1").html(html); }}) }) }) Um exemplo de código em JavaScript Observem este código, voltaremos nele mais a frente
  6. 6. "Combining a functional style with prototypal inheritance JavaScript is arguably the most widely deployed language of either type. Considering that virtually every computer user has an interpreter capable of running it, JavaScript serves to be one of the best languages to learn." John Resig "Considered a “toy” language by serious web developers for most of its lifetime, Java-Script has regained its prestige in the past few years as a result of the renewed interest in Rich Internet Applications and Ajax technologies". John Resig - jQuery in Action
  7. 7. O que preciso saber ? 1. Saber programar 2. Conhecer a linguagem 3. Conhecer suas APIs
  8. 8. O que preciso saber ? 1. Saber programar 2. Conhecer a linguagem 3. Conhecer suas APIs
  9. 9. Como começar ?
  10. 10. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <a href="javascript:alert('BOO Bad way')"> Click</a> </body> </html> Opção 1: Inline Javascript – Bad
  11. 11. Opção 2: Embedded Javascript – Good <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" > function faca_algo(){ alert ("OK") } </script> </head> <body> <a href="#" onclick ="faca_algo()" > Click</a> </body> </html>
  12. 12. Opção 3: External Javascript – Best <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="fool.js" ></script> </head> <body> <a href="#" onclick ="faca_algo()" > Click</a> </body> </html> function faca_algo(){ alert ("OK") }
  13. 13. JavaScript é uma linguagem de programação
  14. 14. JavaScript é uma linguagem de programação JavaScript ≠ Java
  15. 15. JavaScript ● Inicialmente com o nome de Cmm (C menos menos) e depois ScriptEase. ● Netscape usa o projeto em seu Browser, nomeando como LiveScript e depois JavaScript. ● Não é derivada do Java, o nome pode ter sido usado como estratégia de marketing. ● Microsoft incorpora no teu browser com outro nome - JScript.
  16. 16. Ranking das Linguagens do lado do cliente
  17. 17. Linguagem Imperativa
  18. 18. Linguagem Imperativa Variáveis
  19. 19. Linguagem Imperativa Variáveis Valores
  20. 20. Linguagem Imperativa Variáveis Valores Atribuição
  21. 21. Linguagem Imperativa Variáveis Valores Atribuição Estado
  22. 22. Sintaxe Inspirada em C, como Java e C++ for (var i = 0; i < 10; i++) { if (algumaCoisa) { break; } }
  23. 23. ●Variáveis Principais Elementos
  24. 24. ●Nome ●Tipo ●Valor VariáveisVariáveis
  25. 25. ●Nome ●Tipo ●Valor Variáveis
  26. 26. ●Nome ●Tipo ●Valor Variáveis
  27. 27. Tipo
  28. 28. ●Dinamicamente tipada Tipo
  29. 29. Dinamicamente tipada - Vantagens
  30. 30. Dinamicamente tipada - Vantagens Códigos menores + Funções aplicadas a diferentes valores
  31. 31. Dinamicamente tipada - Vantagens Códigos menores + Funções aplicadas a diferentes valores = +Produtivade
  32. 32. Dinamicamente tipada - Vantagens Códigos menores + Funções aplicadas a diferentes valores = +Produtivade =+Manutenabilidade =+Legibilidade
  33. 33. Dinamicamente tipada - Desvantagens
  34. 34. Dinamicamente tipada - Desvantagens Códigos poucos seguros
  35. 35. Dinamicamente tipada - Desvantagens Códigos poucos seguros Baixa eficiência
  36. 36. Dinamicamente tipada - Desvantagens Códigos poucos seguros Baixa eficiência Mais disciplina nos testes
  37. 37. var a = 12; var b = {animal:”cat”,age:10}; var c = true; ... Nome Valor Variáveis
  38. 38. var a = 12; var b = {animal:”cat”,age:10}; var c = true; ... Nome Valor Variáveis Tipo de uma váriavel é tipo de seu valor corrente
  39. 39. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" > function teste (){ a = 20 b = 10 } teste() console.log (a, b) </script> <title></title> </head> <body> </body> </html> Exemplo
  40. 40. Tipos - JavaScript
  41. 41. Primitivo X Referência
  42. 42. Exemplo <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" > var a = 40 var b = a b = 30 var p1 = {x:10, y: 20}; var p2 = p1; p2.x = 50; p2.y = 80; console.log (p1, p2, a, b) </script> <title></title> </head> <body> </body> </html>
  43. 43. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" > var a = 40 var b = a b = 30 var p1 = {x:10, y: 20}; var p2 = p1; p2.x = 50; p2.y = 80; console.log (p1, p2, a, b) </script> <title></title> </head> <body> </body> </html> Exemplo Tipos primitivos é sempre atribuído como cópia.
  44. 44. Referência
  45. 45. Referência Similar a diversas outras linguagens como Java, Lua, Ruby ...
  46. 46. As vezes é necessário saber qual o tipo de uma determinada variável, para decidir qual o comportamento ou evitar erros de execução. typeof
  47. 47. Tipos primitivos ●Numéricos → inteiro ou real ○10, 10.5, 12.1, 0 ●Booleanos ○False, True ●null and undefined
  48. 48. Conversão explícita ●parseFloat() ●parseInt() ●Object.toString()
  49. 49. Corrijam este código. Exercício – “Somadora”
  50. 50. var myPi = “3.1415”; var result = myPi - 1.1; var myPi = “3.1415”; var result = myPi + 1.1; Regras de coerção
  51. 51. var result1 = 1 + true; var result2 = 1 + false; var result3 = “true” + true; var result4 = null + true; var result5 = undefined + 0; var result6 = undefined + “0“ ; Regras de coerção
  52. 52. São tipos primitivos, imutáveis Métodos e propriedades como objeto ● length, substring, toLowerCase, charAt, concat s = "sergio" s[0] = "S" console.log(s) String
  53. 53. Funções function nome(args) { comandos; } function dobro(x) { return 2*x; } nome = function (args) { comandos; } dobro = function (x) { return 2*x; } Forma 1 Forma 2
  54. 54. function twice (f, a) { return f (f (a))} function dobra (a) { return 2* a} console.log (twice (dobra, 4)) Função como parâmetro
  55. 55. function twice (f, a) { return f (f (a))} console.log (twice(function (x) {return 2*x;}, 4 )) Funções anônimas
  56. 56. function add (x) { return function (y) { return y+x } } add1 = add (1) console.log (add1(10)) Retornando função (closure)
  57. 57. function f () { for (i in arguments ) { console.log (i) } } f (1,2) Funções – Número de argumentos indefinido
  58. 58. Sobrecarga é um tipo de polimorfismo muito útil e existente em diversas linguagens, mas não existe nativamente em JavaScript, mas pode ser simulada: ● A partir do número de argumentos passados, dos valores dos argumentos passados. Sobrecarga de funções
  59. 59. function f (arg) { if (arg) console.log (arg) else console.log (“ola mundo“) } f("oi") f() function f (arg) { if (arguments.length != 0) console.log (arg) else console.log ("ola mundo") } f("oi") f() Exemplos
  60. 60. function f(par) { par = par || 1 console.log(par) } Parâmetros padrão
  61. 61. ●Array var a = [1,2,3] ●Object var o = {nome: “joao“, idade:25} Tipos referência
  62. 62. var a = [1,2,3,4] for (v in a) { console.lo g (v) } Array
  63. 63. var o = {chave1 : valor1, chave2 : valor2 } Valores podem ser de qualquer dos valores existentes em JavaScript: numéricos, string, funções, arrays ou objetos Object
  64. 64. var person = new Object(); person.name = “Nicholas”; person.age = 29; person.job = “Software Engineer”; person.sayName = function(){ Console.log(this.name); }; person.sayName() Object - Simulando POO
  65. 65. var person = new Object(); person.name = “Nicholas”; person.age = 29; person.job = “Software Engineer”; person.sayName = function(){ Console.log(this.name); }; person.sayName() Object - Simulando POO Sempre que criar um novo „person“, terei que escrever a função sayName ?
  66. 66. var person = new Object(); person.name = “Nicholas”; person.age = 29; person.job = “Software Engineer”; person.sayName = function(){ Console.log(this.name); }; person.sayName() Object - Simulando POO Sempre que criar um novo „person“, terei que escrever a função sayName ?Criem uma função para fazer isso
  67. 67. function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.name); }; return o; } var person1 = createPerson(“Nicholas”, 29, “Software Engineer”); var person2 = createPerson(“Greg”, 27, “Doctor”); Object - Simulando POO
  68. 68. function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.name); }; return o; } var person1 = createPerson(“Nicholas”, 29, “Software Engineer”); var person2 = createPerson(“Greg”, 27, “Doctor”); Object - Simulando POO Linguagens orientadas a objetos tem uma solução melhor: construtoras.
  69. 69. function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.sayName = function(){ alert(this.name); }; } var person1 = new Person(“Nicholas”, 29, “Software Engineer”); var person2 = new Person(“Greg”, 27, “Doctor”); Object - Simulando POO
  70. 70. function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.sayName = function(){ alert(this.name); }; } var person1 = new Person(“Nicholas”, 29, “Software Engineer”); var person2 = new Person(“Greg”, 27, “Doctor”); Object - Simulando POO Um problema: sayName é replicada em todos os objetos
  71. 71. function Person(name, age, job){ this.name = name; this.age = age; this.job = job; } Person.prototype.sayName = function(){ alert(this.name); }; var person1 = new Person("Nicholas", 29,"Software Engineer"); var person2 = new Person("Greg", 27, "Doctor"); Console.log (person1.sayName == person2.sayName ) Object - Prototype
  72. 72. function Person(name, age, job){ this.name = name; this.age = age; this.job = job; } Person.prototype.sayName = function(){ alert(this.name); }; var person1 = new Person("Nicholas", 29,"Software Engineer"); var person2 = new Person("Greg", 27, "Doctor"); Console.log (person1.sayName == person2.sayName ) Object - Prototype Prototype permite extender as funcionalidades de um objeto, ex: plugins do Jquery
  73. 73. Person.prototype = { constructor: Person, sayName: function(){ alert(this.name); } } Object - Prototype
  74. 74. Objetos como String e Array, utilizam prototypes para definir seus “métodos”. alert(typeof Array.prototype.sort); alert(typeof String.prototype.substring); Object - Prototype
  75. 75. String.prototype.iniciaCom = function (text) { return this.indexOf(text) == 0; }; var msg = "Hello world!"; console.log(msg.iniciaCom("Hello") ); Objetos como String e Array, utilizam prototypes para definir seus “métodos”. Object - Prototype
  76. 76. function Pessoa (name) { this._name = name; } Pessoa.prototype = { constructor: Pessoa, getName : function(){ return (this._name); }, setName : function(name){this._name = name; } } var p = new Pessoa ("sergio") console.log (p.getName()) p.setName ("joao") console.log (p.getName()) Getters e Setters
  77. 77. function Pessoa (name) { this._name = name; } Pessoa.prototype = { constructor: Pessoa, getName : function(){ return (this._name); }, setName : function(name){this._name = name; } } var p = new Pessoa ("sergio") console.log (p.getName()) p.setName ("joao") console.log (p.getName()) Getters e Setters Compo possso usar “sobrecarga” aqui ?
  78. 78. function Pessoa (name) { this._name = name; } Pessoa.prototype = { constructor: Pessoa, getName : function(){ return (this._name); }, setName : function(name){this._name = name; } name : function () { if (arguments[0] && typeof (arguments[0]) == "string") return this.setName (arguments[0]) else return this.getName () } } var p = new Pessoa ("sergio") console.log (p.name()) p.name ("joao") console.log (p.name()) Getters e Setters
  79. 79. function Person(name ){ this._name = name; } Person.prototype = { constructor: Person, get name () { return this._name; }, set name (name) { this._name = name } } a = new Person ("jose") console.log (a.name); a.name = "joao" console.log (a.name); Getters e Setters A partir do JavaScript 1.5 (2000), o java script permitiu escrever getter e setters
  80. 80. Exemplo em jQuery O método $.fn.html usado como setter $('h1').html('olá mundo'); O método html usado como getter $('h1').html(); Getters e Setters
  81. 81. Avalia uma expressão JavaScript. Exemplos: console.log (eval("12*15")) console.log (eval("[12,13]")[0]) console.log (eval("({x:12.5,y:14.3})").x) Eval
  82. 82. JSON JSON é um objeto JavaScript no formato de String eval ('( {"skillz": { "web":[ {"name": "html", "years": "5" }, {"name": "css", "years": "3" }], "database":[ {"name": "sql", "years": "7" }] }} )')
  83. 83. JSON JSON é um objeto JavaScript no formato de String eval ('( {"skillz": { "web":[ {"name": "html", "years": "5" }, {"name": "css", "years": "3" }], "database":[ {"name": "sql", "years": "7" }] }} )') Problem at line 13 character 19: eval is evil. http://www.jslint.com/
  84. 84. Eval is Evil eval (' ( {"evilcode": function(){ window.location="http://dsfsd342d.com"; }() } ) ')
  85. 85. Json Criando e parseando JSON p = new Object ({ "nome" : "sergio", "idade" : 30 }) console.log (JSON.stringify (p)) console.log (JSON.parse (JSON.stringify (p))) http://www.json.org/json2.js. Browser mais antigos não inclue esse objeto JSON
  86. 86. JSON - Parse Tratando erro var jsonString = "{nao eh um json}”" try { var jsonObj = JSON.parse(jsonString); } catch(e) { console.log("json invalido:", e)
  87. 87. JSON - Parse var jsontext = '{"nome":"sergio", "nascimento":"05 Janeiro 1981"}'; var pessoa = JSON.parse(jsontext); var pessoa = JSON.parse(jsontext, function (key, value) { var bDate; if (key == "nascimento") { bDate = new Date(value); return bDate; } return value; });
  88. 88. JSON - Stringfy Formatando a saída console.log (JSON.stringify (pessoa, function (key, value) { var bDate; if (key == "nascimento") { bDate = new Date (value) return ( bDate.getDate() +"/"+ bDate.getMonth()+1 +"/"+ bDate.getFullYear() ) } return value; }));
  89. 89. Date ●getDate() Retorna um número inteiro entre 1 e 31, que representa o dia do mês do objeto Date. ●getDay() Retorna um número inteiro do dia da semana. Domingo 0, segunda 1, terça 2, etc. ●getFullYear() Retorna o ano do objeto Date em números absolutos, por exemplo 1998. ●getMonth() Retorna o mês do objeto Date, um inteiro entre 0 e 11 (0 janeiro, 1 fevereiro, etc).
  90. 90. XML e JSON <animals> <dog> <name>Rufus</name> <breed>labrador</breed> </dog> <dog> <name>Marty</name> <breed>whippet</breed> </dog> <cat name="Matilda"/> </animals> Passem este XML para o formato de Object - JSON
  91. 91. Compatibilidade ●JavaScript, Jscript, ECMAScript, ActionScript ●ECMAScript é uma linguagem de programação baseada em scripts, padronizada pela Ecma International na especificação ECMA-262. ○http://www.ecma-international.org/publications/files/ECMA-ST /ECMA-262.pdf ●JavaScript, Jscript e ActionScript são dialetos do ECMAScript ○Usando apenas elementos do ECMAScript, você garante compatibilidade. http://www.jslint.com
  92. 92. Todos estes conceitos são amplamente utilizados em bibliotecas e frameworks, como o JQuery Closures Funções de primeira Ordem “Sobrecarga” Funções anônimas Objetos
  93. 93. $(document).ready(function(){ $("#p1").mouseenter(function(){ $.ajax({ url: "endereco_web", success: function(html){ $("#a1").html(html); }}) }) }) Um exemplo de código em JavaScript Agora identifiquem alguns elementos discutidos nessa apresentação.
  94. 94. Boas práticas
  95. 95. Boas práticas Códigos legíveis (nome de variáveis...)
  96. 96. Boas práticas Códigos legíveis (nome de variáveis...) Variáveis globais
  97. 97. Variáveis Globais „ JavaScript's biggest problem is its dependence on global variables, particularly implied global variables. If a variable is not explicitly declared (usually with the var statement), then JavaScript assumes that the variable was global. This can mask misspelled names and other problems.“ ●JSLint
  98. 98. Variáveis Globais „ JavaScript's biggest problem is its dependence on global variables, particularly implied global variables. If a variable is not explicitly declared (usually with the var statement), then JavaScript assumes that the variable was global. This can mask misspelled names and other problems.“ ●JSLint Use sempre o var e declare antes de usar
  99. 99. Boas práticas Códigos legíveis (nome de variáveis...) Variáveis globais Opte por notações curtas
  100. 100. Notações curtas if(v){ var x = v; } else { var x = 10; } È equivalente a: var x = v || 10;
  101. 101. Boas práticas Códigos legíveis (nome de variáveis...) Variáveis globais Opte por notações curtas Modularize
  102. 102. Modularize ●Modularizar sempre é uma boa prática. Dividir para conquistar. ○Bom exemplo: JQuery
  103. 103. Boas práticas Códigos legíveis (nome de variáveis...) Variáveis globais Opte por notações curtas Modularize
  104. 104. Boas práticas Códigos legíveis (nome de variáveis...) Variáveis globais Opte por notações curtas Modularize Valide http://www.jslint.com/
  105. 105. Validar ●Códigos válidos são códigos que atendem a um consenso.
  106. 106. Boas práticas Códigos legíveis (nome de variáveis...) Variáveis globais Opte por notações curtas Modularize Valide http://www.jslint.com/
  107. 107. Boas práticas Códigos legíveis (nome de variáveis...) Variáveis globais Opte por notações curtas Modularize Valide http://www.jslint.com/ Use ponto e vírgula
  108. 108. Boas práticas Códigos legíveis (nome de variáveis...) Variáveis globais Opte por notações curtas Modularize Valide http://www.jslint.com/ Use ponto e virgula Escopo
  109. 109. Escopo Não existe escopo por bloco, apenas por funções. function f(p) { if (p) { var a = 15 } console.log (a) } f(1)
  110. 110. Boas práticas Códigos legíveis (nome de variáveis...) Variáveis globais Opte por notações curtas Modularize Valide http://www.jslint.com/ Use ponto e virgula Escopo Use blocos
  111. 111. Blocos {} Uso de blocos evita erros, use sempre mesmo onde não é obrigatório. if (condicao) { .. } else { }
  112. 112. Boas práticas Códigos legíveis (nome de variáveis...) Variáveis globais Opte por notações curtas Modularize Valide http://www.jslint.com/ Use ponto e virgula Escopo Use blocos
  113. 113. Boas práticas Códigos legíveis (nome de variáveis...) Variáveis globais Opte por notações curtas Modularize Valide http://www.jslint.com/ Use ponto e virgula Escopo Use blocos Comprima
  114. 114. Boas práticas Códigos legíveis (nome de variáveis...) Variáveis globais Opte por notações curtas ModularizeValide http://www.jslint.co m/ Use ponto e virgula Escop o Use blocos Comprima Eval is Evil
  115. 115. Boas práticas Códigos legíveis (nome de variáveis...) Variáveis globais Opte por notações curtas ModularizeValide http://www.jslint.co m/ Use ponto e virgula Escop o Use blocos Comprima Eval is Evil Consultem o jslint

×