Introdução ao JavaScript e DOM
Romualdo André da Costa
Engenheiro de Computação – UEFS
Analista de TI – UFRB
http://www.pr...
Sumário
● Um pouco de história
● Características
● Como isso funciona?
● Declarando uma variável
● Expressões
● Laços
● De...
Sumário
● Funções
● Objetos
● Usando JavaScript
● DOM
● Interação entre JavaScript e DOM
Um pouco de história
● No início, as páginas eram estáticas
Um pouco de história
● Brendan Eich
Um pouco de história
● Mocha → LiveScript → JavaScript
● Netscape 2.0: 1995
● Baseado em ECMAScript
Características
● Imperativa e Estruturada
● Tipagem Dinâmica
● Baseada em objetos
● Funcional: funções são objetos de pri...
Como isso funciona?
Declarando uma variável
● var number=2;
● var floatNumber=3.14;
● var name=”Dr. Light”;
● var isValid=false;
● var cupsOfB...
Declarando uma variável
● Comece o nome com uma letra, _ ou $
● Depois use qualquer letra, número, _, $
● Evite as palavra...
Expressões
● var scoop+=1;
● var x=Math.random() * 10;
● var ipi=0;
● var full=volume >= 10;
● var greeting=”Hello ”+name;
Laços
var enemys=10;
while (enemys > 0){
console.log('Resta '+enemys+' inimigos.');
enemys=enemys-1;
}
Laços
for(var cups=1; cups<3;cups++){
console.log('Bebi '+cups+' copos de cerveja.');
}
alert('Não dirija!');
Decisões
var hour=12;
if(hour < 9){
alert('Chegou cedo!');
}
else if(hour == 9){
alert('na hora!');
}
else{
alert('Atrasad...
Arrays
var sabores=new Array();
sabores[0]='chocolate';
sabores[1]='creme';
sabores[3]='limão';
var androids=[16,17,18,19,...
Funções
function soma(a,b){
a=a+b;
return a;
}
console.log(soma(3,4));
var pula=function (){
console.log('pulei!');
}
pula...
Funções
function compara(comparador){
var c=4,d=5;
console.log(comparador(a,b));
}
//função anônima
compara(function (a,b)...
Objeto
var moto={
cilindrada: 150,
ano: 2014,
acelera: function (){
console.log('vvvruuummmmm!');
}
};
moto.modelo=2015;
Usando JavaScript
● O script pode ficar dentro do <head>
● Referenciar um arquivo separado dentro do
<head>
● Colocar o sc...
DOM
document
html
head
title
Hello
script
window.onload=hello;
Input id=”nome”
Interação entre JavaScript e DOM
● Ver arquivos index.html e hello.js
Referências
● Head First: HTML5 Programming
● JavaScript: a bíblia
● World Wide Web: Como programar
● Site: www.codecademy...
Próximos SlideShares
Carregando em…5
×

Introdução JavaScript e DOM

805 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
805
No SlideShare
0
A partir de incorporações
0
Número de incorporações
478
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

×