Introdução JavaScript e DOM

770 visualizações

Publicada em

Mini-curso de introdução a JavaScript e DOM ministrado no evento JS Day Feira de Santana 2015

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

  • Seja a primeira pessoa a gostar disto

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

Nenhuma nota no slide

Introdução JavaScript e DOM

  1. 1. Introdução ao JavaScript e DOM Romualdo André da Costa Engenheiro de Computação – UEFS Analista de TI – UFRB http://www.programadorfeirense.com.br
  2. 2. Sumário ● Um pouco de história ● Características ● Como isso funciona? ● Declarando uma variável ● Expressões ● Laços ● Decisões ● Arrays
  3. 3. Sumário ● Funções ● Objetos ● 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 isso funciona?
  9. 9. Declarando uma variável ● var number=2; ● var floatNumber=3.14; ● var name=”Dr. Light”; ● var isValid=false; ● var cupsOfBeer;
  10. 10. 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
  11. 11. Expressões ● var scoop+=1; ● var x=Math.random() * 10; ● var ipi=0; ● var full=volume >= 10; ● var greeting=”Hello ”+name;
  12. 12. Laços var enemys=10; while (enemys > 0){ console.log('Resta '+enemys+' inimigos.'); enemys=enemys-1; }
  13. 13. Laços for(var cups=1; cups<3;cups++){ console.log('Bebi '+cups+' copos de cerveja.'); } alert('Não dirija!');
  14. 14. Decisões var hour=12; if(hour < 9){ alert('Chegou cedo!'); } else if(hour == 9){ alert('na hora!'); } else{ alert('Atrasado!'); } var i; if(i) console.log('definido'); else console.log('undefined');
  15. 15. Arrays 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,51,60]; var mix=['a',true,4.67];
  16. 16. Funções function soma(a,b){ a=a+b; return a; } console.log(soma(3,4)); var pula=function (){ console.log('pulei!'); } pula();
  17. 17. Funções function compara(comparador){ var c=4,d=5; console.log(comparador(a,b)); } //função anônima compara(function (a,b){ return a<b;});
  18. 18. Objeto var moto={ cilindrada: 150, ano: 2014, acelera: function (){ console.log('vvvruuummmmm!'); } }; moto.modelo=2015;
  19. 19. 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
  20. 20. DOM document html head title Hello script window.onload=hello; Input id=”nome”
  21. 21. Interação entre JavaScript e DOM ● Ver arquivos index.html e hello.js
  22. 22. Referências ● Head First: HTML5 Programming ● JavaScript: a bíblia ● World Wide Web: Como programar ● Site: www.codecademy.com

×