Javascript para desenvolvedores

Palestra ministrada para o pessoal do projeto GT-GIIRO no POP-Ba.

Transcript

1. Javascript Para desenvolvedores 1
2. 2 Full stack web developer Amante de boas práticas de programação e otimização de algoritmo. Amo assistir filmes e séries, jogar e surfar. Marcos A. de S. Silva
3. • O que é? • Escopo • Closures • Constructors + Prototype • Entendendo o ‘this’ • Biblioteca(Jquery) ◦ Introdução ◦ Seletores ◦ Eventos • Conversa cliente - servidor ◦ JSON ◦ Ajax 3
5. O que é Javascript ? 5
6. Javascript == Java + script 6
8. Javascript == Java + script 8
9. Multi-paradigma: • com base em protótipo funcional • imperativo • scripts 9 Características Estilo de tipagem: • Dinâmica, • fraca, • implícita
10. • O que é? • Escopo • Closures • Constructors + Prototype • Entendendo o ‘this’ • Biblioteca(Jquery) ◦ Introdução ◦ Seletores ◦ Eventos • Conversa cliente - servidor ◦ JSON ◦ Ajax 10
11. Escopo global e escopo local 11
12. 12 var global_var = "Global"; var dados = {"menu": { "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }} function foo(){ var local_var = "Local"; dados.value = local_var; } console.log(local_var); //reference error
13. 13 Companheiro de todas as horas
14. IIFE (Immediately Invoked Function Expression) 14
15. 15 var global_var = true; ;(function() { 'use strict'; var local_var = "local variável da função imediata"; function foo2(){ var local_var = "foo2"; console.log(local_var);// foo2 } console.log(local_var); //local variável da função imediata }());
16. 16 var global_var = true; //Escopo global ;(function() { //Escopo 1 'use strict'; var local_var = "local variável da função imediata"; function foo2(){ //Escopo 2 var local_var = "foo2"; console.log(local_var);// foo2 } console.log(local_var); //local variável da função imediata }());
17. • O que é? • Escopo • Closures • Constructors + Prototype • Entendendo o ‘this’ • Biblioteca(Jquery) ◦ Introdução ◦ Seletores ◦ Eventos • Conversa cliente - servidor ◦ JSON ◦ Ajax 17
18. 18 function fazerSaudacao(nome) { var saudacao = "Olá " + nome; function mostrarSaudacao() { alert(saudacao); } return mostrarSaudacao; } var saudacao = fazerSaudacao("Marcos"); saudacao(); //mostra a saudação
19. • O que é? • Escopo • Closures • Constructors + Prototype • Entendendo o ‘this’ • Biblioteca(Jquery) ◦ Introdução ◦ Seletores ◦ Eventos • Conversa cliente - servidor ◦ JSON ◦ Ajax 19
20. ;(function() { 'use strict'; function Pessoa(nome, sobrenome){ this.nome = nome; this.sobrenome = sobrenome; } Pessoa.prototype.nomeCompleto = function(){ return this.nome + " " + this.sobrenome; }; var marcos = new Pessoa("Marcos","Silva"); console.log(marcos.nomeCompleto()); //Marcos Silva }()); 20
21. Quando um objeto é criado, um link é feito entre esse objeto e o prototype do constructor var marcos = new Pessoa("Marcos","Silva"); marcos.__proto__ === Pessoa.prototype; //true 21
22. • O que é? • Escopo • Closures • Constructors + Prototype • Entendendo o ‘this’ • Biblioteca(Jquery) ◦ Introdução ◦ Seletores ◦ Eventos • Conversa cliente - servidor ◦ JSON ◦ Ajax 22
23. ;(function() { 'use strict'; function Pessoa(nome, sobrenome){ this.nome = nome; this.sobrenome = sobrenome; } Pessoa.prototype.nomeCompleto = function(){ return this.nome + " " + this.sobrenome; }; var marcos = new Pessoa("Marcos","Silva"); console.log(marcos.nomeCompleto()); //Marcos Silva }()); 23
24. • O que é? • Escopo • Closures • Constructors + Prototype • Entendendo o ‘this’ • Biblioteca(Jquery) ◦ Introdução ◦ Seletores ◦ Eventos • Conversa cliente - servidor ◦ JSON ◦ Ajax 24
26. (function($){ 'use strict'; // Ao término do carregamento da página $(document).ready(function(){ //Add evento clique ao elemento pelo id $("#btn_1").on("click",function(){ console.log("Cliquei botão 1."); }); //Mudando atributo css pela classe $(".display-none").css("display","none"); //Selecionando elemento pela tag $("select").addClass("estilo1"); }); })(jQuery); 26
27. • O que é? • Escopo • Closures • Constructors + Prototype • Entendendo o ‘this’ • Biblioteca(Jquery) ◦ Introdução ◦ Seletores ◦ Eventos • Conversa cliente - servidor ◦ JSON ◦ Ajax 27
28. Json {"menu": { "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }} 28 <menu value="File"> <popup> <menuitem value="New" onclick="CreateNewDoc()" /> <menuitem value="Open" onclick="OpenDoc()" /> <menuitem value="Close" onclick="CloseDoc()" /> </popup> </menu> XML
29. Json {"menu": { "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }} 29 var dados = {"menu": { "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }} Objeto em Javascript
30. $.ajax({ url: “url”, type: “método”, //POST ou GET, contentType: “tipo” , //'application/json', dataType: “tipo dados de retorno”, //json, data: {..}, //dados no formato ContentType success: function(data){} }); 30 $.get(“url”, function(resposta){ //... }); POST e GET GET
31. Atividade da rede 31
32. • O que é? • Escopo • Closures • Constructors + Prototype • Entendendo o ‘this’ • Biblioteca(Jquery) ◦ Introdução ◦ Seletores ◦ Eventos • Conversa cliente - servidor ◦ JSON ◦ Ajax 32
33. Obrigado ! 33 http://massilva.github.io/ https://github.com/massilva https://pt-br.facebook.com/massilva1 https://www.linkedin.com/in/massilva