Javascript

838 visualizações

Publicada em

Palestra sobre Javascript realizada no primeiro ciclo do Plano de Geração de Conhecimento realizado em outubro de 2013, no LEMAF - Universidade Federal de Lavras.

O Plano de geração de conhecimento é um trabalho realizado para tutoria de desenvolvedores com estagiários no estudo de tecnologias, com o objetivo de disseminação de conhecimento.

Palestra ministrada por Fernando Simeone , Carlos Eduardo Chessi Melo, Eduardo Assis da Silva e José Henrique Santos Andrade.

### Atualização 20/02/2015

Palestra melhorada, com algumas correções. Reapresentada por Fernando Simeone e Carlos Eduardo Chessi Melo na SETI (Semana de Tecnologia da Informação) na Universidade Federal de Lavras.

Publicada em: Tecnologia
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
838
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
30
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Javascript

  1. 1. Javascript Fernando Simeone Carlos Eduardo Chessi Melo LEMAF – Universidade Federal de Lavras
  2. 2. Referências
  3. 3. Carlos Eduardo  Graduando em Sistemas de Informação;  Desde de 2011 no LEMAF;  Há dois anos atuando na área de desenvolvimento de software;
  4. 4. Fernando Simeone  Graduação em Ciência da Computação (UFLA); • Pós-graduação em Engenharia de Software Centrada em Métodos Ágeis (UNA); • Mestrado em Ciência da Computação (em andamento) • Há 7 anos trabalhando com desenvolvimento (desde 2010 no LEMAF).
  5. 5. Introdução
  6. 6. A linguagem • 1995 – Netscape 2 • Interpretada • Linguagem de scripts para páginas web • NodeJS
  7. 7. Página web HTML CSS Javascri pt ApresentaçãoConteúdo Comportamento
  8. 8. Antes e agora Application
  9. 9. Conhecimento JQuery Mootools KnockoutAngularJS BackboneJS Javascript
  10. 10. Execução Java Javascript hello() ------- -------- ---- -------- --- User.java hello() ------- -------- ---- -------- --- Car.java hello() ------- -------- ---- -------- --- Client.java hello() ------- -------- ---- -------- --- Product.java main() ------- ------------ ----------- App.java <html> <script> <script> </html> index.html function() { ... } User.js function() { ... } Car.js function() { ... } App.js 1 2 3
  11. 11. Variáveis e Operadores
  12. 12. Declaração var cargo = “desenvolvedor”; Palavra reservada Nome da variável Operador atribuição Valor (literal ou outra variável)
  13. 13. Tipos e Literais String “Desenvolvedor” ‘DBA’ Number 1 3.14 1e2 1E2 5E2 Boolean true false Object { “id”: 12, nome: “João”, perfil: { id: 1 } } Array [1, true, ‘test’, {}, [3]] Function function test (arg) {} Regular Expression /w+s/ 1*(10^2) 5*(10^2)
  14. 14. Operações var a = 10 + 5; // a = 15 a += 4; // a = 19 a++; // a = 20 a = a / 2; // a = 10 a = a * 2; // a = 20 2 == “2”; // true 2 === “2”; // false
  15. 15. Tipos e Conversões parseInt(3.4) // 3 parseInt(“4.7”) // 4 parseFloat(5) // 5 parseFloat(“4.5”) // 4.5 (6.4).toString() // “6.4” typeof 5 // “number” typeof “5” // “string” typeof {} // “object” typeof null // “object” typeof [] // “object” [] instanceof Array // true
  16. 16. NaN e isNaN parseInt(“3“) // 3 parseInt(“tres”) // NaN isNaN(“4”) // false isNaN(“3.4”) // false isNaN(“quatro”) // true isNaN(4) // false isNaN(NaN) // true NaN == NaN // false typeof NaN // “number” not a number
  17. 17. Falsy Values false null undefined “” ‘’ 0 NaN
  18. 18. Operações com Expressões Lógicas var user = {}; var rua = user.endereco.rua; // TypeError var rua = user.endereco && user.endereco.rua; // trata erro var i = 1 || 10; var num = 0 || 10;
  19. 19. Estrutura de Controle
  20. 20. If if (user && user.name) { // ... } else if (name) { // ... } else { // ... } x = (condicao) ? 10 : 20;
  21. 21. For for (i = 0; i < 3; i++) { // ... } • i = 0 • i = 1 • i = 2 { id: 1, nome: “João”, idade: 26 } • p = “id” • p = “nome” • p = “idade” for (p in obj) { // ... }
  22. 22. Switchswitch (x) { case 1: // ... break; case “test”: // ... break; case y: case w: // ... break; default: //... } Expressão pode gerar Number ou String Cláusula Case não precisa ser constante
  23. 23. While while (exp_condicao) { // ... } do { // ... } while (exp_condicao);
  24. 24. Objetos
  25. 25. Objetos var usuario = { id: 12, nome: “João”, casado: false, “cpf-cnpj”: 12222233322, endereco: {} }; usuario.nome // “João” usuario[“nome”] // “João” usuario.nome = “José”; // atribuindo nome usuario[“nome”] = “José”; // atribuindo nome delete usuario.nome; // deleta a prop. usuario.nome // undefined usuario.sexo = “masculino”; // cria um novo atributo usuario.hasOwnProperty(“nome”); // false
  26. 26. Funções
  27. 27. var multiplica = function (n1, n2) { return n1 * n2; }; Declaração e Chamadafunction soma (n1, n2) { return n1 + n2; } Função anônima Se não tiver “return”, o valor retornado é undefined soma(3, 5); // retorna 8 multiplica(5, 10); // retorna 50
  28. 28. Argumentos function soma (n1, n2) { return n1 + n2; } soma (3, 4, 5, 6, 7); // argumentos 5, 6, 7 serão ignorados soma (); // retorna undefined
  29. 29. Arguments Toda função recebe uma variável arguments, que é um objeto similar a um array. function testArgs() { return arguments.length; } testArgs(1, 4, 5, 2); // retorna 4 testArgs(true, false) // retorna 2 testArgs( [1, 2, 3] ) // retorna 1
  30. 30. Acessando itens de arguments function soma () { var result = 0, i = 0; for (i = 0; i < arguments.length; i++) { result += arguments[i]; } return result; } soma (1, 3, 6, 1); // retorna 11
  31. 31. Escopos e Closures
  32. 32. Escopo Escopos são definidos por funções. function () { var i = 3; // um monte de código aqui. for (var i = 0; i < 10; i++) { // ... } } Declaração duplicada
  33. 33. EscopoArquivo teste.js Escopo Global Escopo função soma Escopo função teste Escopo função testeInterno var x = 1; function soma (n1, n2) { return n1 + n2; } function teste () { var y = 3; function testeInterno () { var z = 4; w = 10; // variável global } }
  34. 34. Closure Closure é uma função que referencia as variáveis que foram declaradas no mesmo escopo que ela. Em Javascript, todas as funções são closures.
  35. 35. Closure sayHello = null msg = “Hello!” var sayHello = null; function init() { var msg = “Hello!”; sayHello = function() { alert(msg); }; } init(); sayHello = Function Escopo referenciado pela função sayHello(); // exibe “Hello!”
  36. 36. Chamada de Funções e this
  37. 37. Chamadas de Função • Método • Função • Construtor • Apply e Call obj.sayHello(); sayHello(); new sayHello(); sayHello.apply(obj, [p1, p2]); sayHello.call(obj, p1, p2);
  38. 38. Chamada tipo “método” var user = { name: “João”, sayHello: function(n) { this.name = n alert(this.name); } }; Chamada utilizando ponto user.sayHello(“Pedro”); // Altera “nome” do objeto e exibe “Teste”
  39. 39. Chamada tipo “função” function sayHello(text){ alert(text); } sayHello(“teste”); // Exibe “teste” e retorna undefined
  40. 40. Chamada tipo “função” var user = { name: “João”, sayHello: function(n) { this.name = n alert(this.name); } }; Chamada não utilizando ponto var hello2 = user.sayHello; hello2(“teste”); // Exibe “teste” e retorna undefined e // não altera o objeto
  41. 41. Chamada tipo “Construtor”function User (username) { this.name = username; } Chamada utilizando new var user1 = new User(“joao”); // retorna um novo objeto // com a propriedade “name” = “joao”.
  42. 42. Apply e Call user.sayHello.apply(obj2, [“teste”]); var user = { name: “João”, sayHello: function(n) { this.name = n alert(this.name); } }; var obj2 = {}; user.sayHello.call(obj2, “teste”);
  43. 43. “Orientação a Objetos”
  44. 44. Exemplo Animal - peso + nome + andar(distancia); Cachorro + raça + latir();
  45. 45. Função Construtora function Animal(nome, peso) { this.nome = nome; this._peso = peso; } var a = new Animal(“Jimmy”, 20); Animal - peso + nome +
  46. 46. Prototype Object Animal prototype function Animal(nome, peso) { this.nome = nome; this._peso = peso; } Animal.prototype = {};
  47. 47. Prototype Animal.prototype Animal { } __proto__ a1 = new Animal(); a1.andar(40); a1.toString(); a1.__proto__ == a2.__proto__; // true Animal { } a2 = new Animal(); __proto__ Animal { } a3 = new Animal(); __proto__
  48. 48. Prototype function Animal(nome, peso) { this.nome = nome; this._peso = peso; } Animal.prototype.andar = function(d){ alert(“andando ” + d + “ Km”); }; var a = new Animal(); a.andar(400); // andando 400 km
  49. 49. Herança function Cachorro(raca) { this.raca = raca; } Animal Cachorro + raça + latir(); + getPeso(); Cachorro.prototype = new Animal(); Cachorro.prototype.latir = function(){ alert(“augh”); }; var c = new Cachorro(); c.andar(400); // andando 400 km c.latir(); // augh
  50. 50. Padrões
  51. 51. Module Pattern function mover(obj, direcao, dist) { // alguma implementação aqui } function Animal(nome) { this.nome = nome; } Animal.prototype.andar = function(d) { mover(this, “right”, d); } Animal.js
  52. 52. Module Pattern function mover() { // alguma outra implementação aqui } // ... Mais código aqui OutroArquivo.js
  53. 53. Module Pattern function () { } ( ) function mover(obj, direcao, dist) { // alguma implementação aqui } function Animal(nome) { this.nome = nome; } Animal.prototype.andar = function(d) { mover(this, “right”, d); } window.Animal = Animal; ();
  54. 54. Callback var pessoa = get("http://myapp.com/pessoas/12"); alert(pessoa.nome); //undefined get("http://myapp.com/pessoas/12", function (){ alert(pessoa.nome) } ); get("http://myapp.com/pessoas/12", function (){ console.log(pessoa.nome) } );
  55. 55. function() { // Sua implementação aqui. }
  56. 56. alert(“Obrigado”);

×