Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Iniciando com javaScript 2017

253 views

Published on

Material utilizado no Workshop Iniciando com JavaScript no JS Day Recife 2017.
Código fonte dos exemplos: https://github.com/romualdoandre/exemplo-jsday

Published in: Education
  • Be the first to comment

  • Be the first to like this

Iniciando com javaScript 2017

  1. 1. Iniciando com JavaScript Romualdo André da Costa Analista de TI - UFRB
  2. 2. ● Motociclista viajante ● Engenheiro de Computação UEFS ● GDG Feira de Santana ● JS Day Brasil ● Feira de Santana e Cruz das Almas
  3. 3. www.ufrb.edu.br
  4. 4. Sumário ● Um pouco de história ● Características ● Como isso funciona? ● Declarando uma variável ● Expressões ● Template strings ● Laços ● Decisões ● Arrays
  5. 5. Sumário ● Destructuring assignment ● Funções ● Usando JavaScript ● DOM ● Interação entre JavaScript e DOM
  6. 6. Um pouco de história No início as páginas eram estáticas
  7. 7. Um pouco de história Brendan Eich
  8. 8. Um pouco de história ● Mocha → LiveScript → JavaScript ● Netscape 2.0: 1995 ● Baseado em ECMAScript
  9. 9. Características ● Imperativa e Estruturada ● Tipagem Dinâmica ● Baseada em objetos ● Funcional: funções são objetos de primeira classe. ● Vários ambientes: web, desktop, servidor, IoT
  10. 10. Como funciona?
  11. 11. Declarando uma variável ● Comece o nome com uma letra, _ ou $ ● Depois use qualquer letra, número, _, $ ● Evite as palavras reservadas ● Escolha nomes significativos ● camelCase ● Use $ e _ apenas com bom motivo: convenção utilizada em algumas bibliotecas
  12. 12. Declarando uma variável episodes=8; floatNumber=3.14; name=”JS Day Brasil”; isPunkDead=false; var spaceShip;
  13. 13. Declarando uma variável ● const: significa que a variável não pode ser alterada. ● let: variável pode ser alterada no algoritmo. ● var: é a forma mais “fraca” de definir uma variável em JavaScript.
  14. 14. Hoisting foo = 2 var foo; // é implicitamente entendido como: var foo; foo = 2; hoisted(); // logs "foo" function hoisted() { console.log("foo"); }
  15. 15. Expressões var scoop+=1; var x=Math.random()*10; var selic=10.15; var isGood=selic>10; var greeting=”Hello ”+name;
  16. 16. Template Strings Antigamente a=15; b=19; console.log(“Quinze é ”+(a+b)); Agora console.log(`Quinze é ${a+b}`);
  17. 17. Laços var enemys=10; while(enemys>0){ console.log(`Restam ${enemys} inimigos do Império.`) enemys=enemys-1; }
  18. 18. Laços for(let cups=1;cups<3;cups++){ console.log(‘Bebi ${cups} de cerveja.’); } alert(‘Não dirija’);
  19. 19. Decisões var hour=8; if(hour < 9){ alert('Chegou cedo!'); } else if(hour == 9){ alert('na hora!'); } else{ alert('Atrasado!'); }
  20. 20. Array var sabores=new Array(); sabores[0]='chocolate'; sabores[1]='creme'; sabores[3]='limão'; var androids=[16,17,18,19,20,30,40,44,50,60,70,71]; var mix=['a',true,4.67];
  21. 21. Array let iterable=[10,20,30]; for(let value of iterable){ console.log(value); } iterable.forEach(function (item,index,array){ console.log(item,index); });
  22. 22. Arrays var hunters=["Boba Fett","Jango Fett"]; var newLength=hunters.push("Bossk"); var last=hunters.pop(); var first=hunters.shift(); var newLength=hunters.unshift("Cad Bane"); var pos=hunters.indexOf("Cad Bane"); var removedHunter=hunters.splice(pos,1); var shallowCopy=hunters.slice();
  23. 23. Destructuring assignment var a,b,rest; [a,b]=[1,2]; console.log(a,b); [a,b,...rest]=[1,2,3,4,5]; console.log(a); console.log(b); console.log(rest);
  24. 24. Funções function soma(a,b){ return a+b; } console.log(soma(3,4)); var pula=function (){ console.log('pulei!'); } pula();
  25. 25. Funções function compara(comparador){ var c=4,d=5; console.log(comparador(c,d)); } //função anônima compara(function(a,b){return a<b});
  26. 26. Funções //função anônima compara(function (a, b) { return a < b }); compara((a, b) => a < b);
  27. 27. Callback hell
  28. 28. Funções function fun1(...args){ console.log(args.length); } function fun2(a,b,..args){ console.log(args.length); }
  29. 29. Funções function funDefault(a=1,b=2){ console.log(a+b); }
  30. 30. Objeto let moto={ cilindrada: 250, ano: 2012, acelera(){ console.log("vvrrruuuummmmm"); } }
  31. 31. Usando JavaScript O script pode ficar dentro do <head> Referenciar um arquivo separado dentro do <head> Colocar o script ou a referencia ao arquivo dentro do <body> Exemplo nos arquivos hello.html e hello.js
  32. 32. DOM
  33. 33. Interação entre JavaScript e DOM Ver arquivos hello.html e hello.js
  34. 34. Referências Head First: HTML5 Programming JavaScript: a bíblia World Wide Web: Como programar www.codecademy.com https://developer.mozilla.org/pt-BR/docs/Web/JavaScript https://www.caelum.com.br/apostila-html-css-javascript/
  35. 35. www.programadorfeirense.com.br/blog
  36. 36. https://www.facebook.com/fsagdg/ https://www.facebook.com/devfsa/ https://www.facebook.com/jsdaybr https://twitter.com/jsdaybr

×