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.

Império JavaScript

371 views

Published on

Material utilizado durante o workshop de Iniciando com JavaScript no JS Day Feira de Santana 2017.
Código fonte: https://github.com/romualdoandre/exemplo-jsday

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Império JavaScript

  1. 1. Império JavaScript Romualdo André da Costa Analista de TI - UFRB
  2. 2. 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
  3. 3. Sumário Destructuring assignment Funções Usando JavaScript DOM Interação entre JavaScript e DOM
  4. 4. Um pouco de história No início as páginas eram estáticas
  5. 5. Um pouco de história Brendan Eich
  6. 6. Um pouco de história Mocha → LiveScript → JavaScript Netscape 2.0: 1995 Baseado em ECMAScript
  7. 7. 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
  8. 8. Como funciona?
  9. 9. 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
  10. 10. Declarando uma variável episodes=7; floatNumber=3.14; name=”Skywalker”; isPunkDead=false; var starFighter;
  11. 11. 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.
  12. 12. Hoisting foo = 2 var foo; // é implicitamente entendido como: var foo; foo = 2; hoisted(); // logs "foo" function hoisted() { console.log("foo"); }
  13. 13. Expressões var scoop+=1; var x=Math.random()*10; var selic=10.15; var isGood=selic>10; var greeting=”Hello ”+name;
  14. 14. Template Strings Antigamente a=15; b=19; console.log(“Quinze é ”+(a+b)); Agora console.log(`Quinze é ${a+b}`);
  15. 15. Laços var enemys=10; while(enemys>0){ console.log(`Restam ${enemys} inimigos do Império.`) enemys=enemys-1; }
  16. 16. Laços for(let cups=1;cups<3;cups++){ console.log(‘Bebi ${cups} de cerveja.’); } alert(‘Não dirija’);
  17. 17. Decisões var hour=8; if(hour < 9){ alert('Chegou cedo!'); } else if(hour == 9){ alert('na hora!'); } else{ alert('Atrasado!'); }
  18. 18. 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];
  19. 19. Array let iterable=[10,20,30]; for(let value of iterable){ console.log(value); } iterable.forEach(function (item,index,array){ console.log(item,index); });
  20. 20. 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();
  21. 21. 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);
  22. 22. Funções function soma(a,b){ return a+b; } console.log(soma(3,4)); var pula=function (){ console.log('pulei!'); } pula();
  23. 23. 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});
  24. 24. Funções //função anônima compara(function (a, b) { return a < b }); compara((a, b) => a < b);
  25. 25. Funções function fun1(...args){ console.log(args.length); } function fun2(a,b,..args){ console.log(args.length); }
  26. 26. Funções function funDefault(a=1,b=2){ console.log(a+b); }
  27. 27. Objeto var deathStar={ energy: 100, model: 'DS-1 Orbital Battle Station', shoot(){ console.log(" ,_~"""~-,n*---====*)------`,n |===========|n `,---------,'n ~-.___.-~ "); } }
  28. 28. 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
  29. 29. DOM
  30. 30. Interação entre JavaScript e DOM Ver arquivos hello.html e hello.js
  31. 31. Referências Head First: HTML5 Programming JavaScript: a bíblia World Wide Web: Como programar Site: www.codecademy.com Site: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript
  32. 32. Use o código JSDAY e ganhe 25% desconto em todo o site da Novatec até dia 07/08/17.
  33. 33. www.programadorfeirense.com.br/blog

×