Meu primeiro te s te !
<h3>Seria is so um programa?</h3>
Meus Documentos
Área de Trabalho Desktop
minha_pagina.html
html
Meu primeiro te s te !
<h3>Seria is so um programa?</h3>
<strong>Não</strong> consigo fazer nada além de mostrar conteúdo f i xo?
<strong> <h3>
Meu primeiro te s te !
<h3>Seria is so um programa?</h3>
<strong>Não</strong> consigo fazer nada além de mostrar conteúdo f i xo?
Conheça o site da nossa edi to ra:
<a href="http://www.casadocodigo.com.br">Clique aqui</a>!
<
>
<h3>
</h3>
<a ...> </a>
href
<strong>Não</strong>
<br>
html
<script>
alert("podemos faz er mais com JavaS cript! " );
</script>
html
alert "olá
mundo"
alert
Meu primeiro te s te !
<h3>Seria is so um programa?</h3>
<strong>Não</strong> consigo fazer nada além de mostrar conteúdo f i xo?
Conheça o site da nossa edi to ra:
<a href="http://www.casadocodigo.com.br">Clique aqui</a>!
<script>
alert("podemos faz er mais com JavaS cript! " );
</script>
minha_pagina.html
meu_primeiro_programa.html
podemos fazer
mais com JavaS cript!
alert
<script>
</script>
alert
meus_testes.html
Notepad++ v6.1.3 Installer
html
alert
script
alert
<script>
alert("podemos faz er mais com JavaS cript! " );
alert "chamando sem parenteses";
</script>
alert
"chamando sem
parenteses"
alert
alertar
alert
<meta
charset="UTF-8">
alert
comecando_javascript.html
<script>
alert("olá mundo!");
alert("esse é meu segundo programa");
</script>
alert
document.write
programa.html
<script>
document.write("olá mundo!");
document.write("esse é meu segundo programa");
</script>
<br>
document.write("olá mundo!");
document.write("olá mundo!<br>”);
<br>
"Casa do código"
"Olá Mundo"
"Eu tenho 25 anos"
<script>
document.write("Minha idade é: ");
document.write(25);
</script>
document.write("25");
25
"25"
document.write(25 + 2 5 ) ;
document.write("25" + "25");
+
string
+
string s
string
document.write("Eu nasci em: ");
document.write(2012 - 2 5 ) ;
document.write(2012 - 25)
document.write("2012 - 25")
- 25
2012
script
script
-
+
document.write("A soma das nossas idades é: ");
document.write(25 + 32 + 2 6 ) ;
*
/
document.write("A média das nossas idades é: ");
document.write(25 + 32 + 26 / 3);
26 /
3
document. w r i te ( ( 2 5 + 32 + 26) / 3);
strings
document.write("Minha idade é: " + 2 5 ) ;
"Minha idade é"
25
document.write("A média das nossas idades é: " + ((25 + 32 + 26) / 3));
testando_idades.html
<script>
document.write("Minha idade é: " + 2 5 ) ;
document.write("A soma das nossas idades é: ");
document.write(25 + 32 + 2 6 ) ;
document.write("A média das nossas idades é: " + ((25 + 32 + 26) / 3));
</script>
<br>
<br>
document.write("Minha idade é: " + 2 5 ) ;
+ "<br>"
document.write("Minha idade é: " + 25 + "<br>");
"Nossa diferença de idade é"
document.write("Eu nasci em : " + (2012 - 25) + "<br>");
document.write("Adriano nasceu em : " + (2012 - 26) + "<br>");
document.write("Paulo nasceu em : " + (2012 - 32) + "<br>");
<br>
2012
2013
2012
ano
var ano = 2012;
document.write("Eu nasci em : " + (ano - 25) + "<br>");
document.write("Adriano nasceu em : " + (ano - 26) + "<br>");
document.write("Paulo nasceu em : " + (ano - 32) + "<br>");
var ano = 2012
2012 ano
ano
var eu = 25;
var adriano = 26;
var paulo = 32;
var to t a l = eu + adriano + paulo;
document.write("A soma das idades é: " + total);
var
=
2012 = ano
=
2012
document.write(...)
string
var ano = 2012;
document.write("ano");
document. w r i te ( a n o ) ;
ano = 2012
=
document.write
document. w r i te ( ( e u + adriano + paulo) / 3);
var to t a l = eu + adriano + paulo;
var media = to t a l / 3;
document.write(media);
testando_idades_com_variaveis.html
<script>
var eu = 25;
var adriano = 26;
var paulo = 32;
var to t a l = eu + adriano + paulo;
var media = to t a l / 3;
script
document.write("A média de idade é " + media);
</script>
med
media
document.write("A média de idade é " + med);
Math.round(numero)
document.write("A média de idade é " + Math.round(media));
Math.round
calcula_consumo.html
<h3>Álcool ou Gasolina?</h3>
<script> </script>
tanque
caminhoComGasolina
480
consumoDeGasolina
consumoDeGasolina
D G
consumoDeGasolina
consumodegasolina
caminhoComAlcool
consumoDeAlcool
Math.round
0.314178473
0
0.314178473
300
numero.toFixed(2)
2
Math.round(numero)
numero.toFixed(2)
numero
precoDaGasolina
precoDoAlcool
precoPorKilometro
var ano = 2012;
document.write("Eu nasci em : " + (ano - 25) + "<br>");
document.write("Adriano nasceu em : " + (ano - 26) + "<br>");
document.write("Paulo nasceu em : " + (ano - 32) + "<br>");
<br>
document.write
var ano = 2012;
document.write("Eu nasci em : " + (ano - 25));
document.write("<br>");
document.write("Adriano nasceu em : " + (ano - 26));
document.write("<br>");
document.write("Paulo nasceu em : " + (ano - 32));
document.write("<br>");
document.write("<br>");
pulaLinha
var pulaLinha = function() {
document.write("<br>");
};
function()
{
}
document.write
function()
document.write
TAB
pulaLinha
pulaLinha();
var ano = 2012;
document.write("Eu nasci em : " + (ano - 25));
pulaLinha();
document.write("Adriano nasceu em : " + (ano - 26));
pulaLinha();
document.write("Paulo nasceu em : " + (ano - 32));
pulaLinha();
pulaLinha
pulaLinha = ...
var
<hr>
<br>
pulaLinha
var pulaLinha = function() {
document.write("<hr>");
};
mostra_idades.html
script
pulaLinha
<script>
var pulaLinha = function() {
document.write("<br>");
};
pulaLinha
alert
var ano = 2012;
document.write("Eu nasci em : " + (ano - 25));
pulaLinha();
document.write("Adriano nasceu em : " + (ano - 26));
pulaLinha();
document.write("Paulo nasceu em : " + (ano - 32));
pulaLinha();
pulaLinha();
pulaLinha
pulaLinha
frase
document.write
<br>
var mostra = function() {
document.write("alguma frase<br>");
};
frase
function(frase)
frase
var mostra = function(frase) {
document. w r i t e ( f r a s e + "<br>");
};
mostra
frase
pulaLinha
mostra
mostra("Usando funções para melhorar o código");
frase
frase
mostra
pulaLinha
<br>
var mostra = function(frase) {
document.write(frase);
pulaLinha();
};
mostra
pulaLinha
<br> <hr>
mostra
mostra_idades2.html
pulaLinha
<script>
var pulaLinha = function() {
document.write("<br>");
};
mostra
pulaLinha
var mostra = function(frase) {
document.write(frase);
pulaLinha();
};
TAB
var ano = 2012;
mostra("Eu nasci em : " + (ano - 25));
mostra("Adriano nasceu em : " + (ano - 26));
mostra("Paulo nasceu em : " + (ano - 32));
</script>
pulaLinha
<br>
hr
<hr>
<br>
big
mostra
<big>
</big>
function
pulaLinha
alert
document.write
document.write
document.write("olá mundo!<br>");
document.write
<br>
console.log
<script>
document.write("olá mundo!");
document.write("esse é meu segundo programa");
console.log("esta mensagem aparece apenas no log");
</script>
console.log
alert
document.write
console.log
//
//
// esta função mostra uma frase no navegador e pula uma linha
var mostra = function(frase) {
document.write(frase);
pulaLinha();
};
// agora vamos colocar no navegador o ano em que n a s c i :
var ano = 2012;
mostra("Eu nasci em : " + (ano - 25));
/*
*/
.html
script
CTRL+ENTER
console.log
document.write
document.write
document.write
alert
imc.html
var imc = peso / ( a l t u r a * altura);
altura peso
imc
var peso = 75;
var altur a = 1 . 7 2 ;
var imc = peso / ( a l t u r a * altura);
mostra("meu IMC é: " + i mc );
mostra
<script>
</script>
imc.html
1.72
imcDoPrimo
pesoDoPrimo alturaDoPrimo
var pesoDoPrimo = 83;
var alturaDoPrimo = 1 . 7 6 ;
var imcDoPrimo = pesoDoPrimo / (alturaDoPrimo * alturaDoPrimo);
mostra("o IMC de meu primo é: " + i m c) ;
mostra
peso altura
var calculaIMC = function(altura, peso) {
var imc = peso / ( a l t u r a * altura);
mostra("IMC calculado é " + i m c) ;
};
imc
var pesoDoPrimo = 83;
var alturaDoPrimo = 1 . 7 6 ;
calculaIMC(alturaDoPrimo, pesoDoPrimo);
imc.html
18.5
35
calculaIMC
calculaIMC
mostra
var calculaIMC = function(altura, peso) {
var imc = peso / ( a l t u r a * altura);
return imc;
};
return
var pesoDoPrimo = 83;
var alturaDoPrimo = 1 . 7 6 ;
var imcDoPrimo = calculaIMC(alturaDoPrimo, pesoDoPrimo);
mostra("O imc do meu primo é " + imcDoPrimo);
mostra(" El e ainda está " + (imcDoPrimo - 18.5)
+ " pontos acima do l i m i te da magreza.");
imcDoPrimo
calculaIMC
return
imc.html
mostra
pulaLinha
<script>
var pulaLinha = function() {
document.write("<br>");
};
var mostra = function(frase) {
document.write(frase);
pulaLinha();
};
var calculaIMC = function(altura, peso) {
var imc = peso / ( a l t u r a * altura);
return imc;
};
var peso = 75;
var altur a = 1 . 7 2 ;
var imc = calculaIMC(altura, peso);
mostra("Meu imc é " + i m c) ;
mostra("Ainda estou " + (imc - 18.5)
+ " pontos acima do l i m i te da magreza.");
</script>
var imc = calculaIMC(altura, peso);
mostra("Meu imc é " + i m c) ;
imc
mostra
mostra("Meu imc é " + calculaIMC(altura, peso));
imc
calculaIMC(altura, peso)
Math.round
mostra("Meu imc é " + Math.ro und(imc));
imc
var imc = calculaIMC(altura, peso);
var imc = Math.round(calculaIMC(altura, p eso));
Math.round
imc
Math.round
alert
prompt
perguntas.html
<script>
var nome = prompt("Bom Dia! Qual é o seu nome?");
</script>
prompt
<script>
var nome = prompt("Bom Dia! Qual é o seu nome?");
document.write("Bem vindo, " + nome);
</script>
idade
nome
<script>
var nome = prompt("Bom Dia! Qual é o seu nome?");
document.write("Bem vindo, " + nome);
var idade = prompt(nome + ", quantos anos você tem?");
document.write(nome + " tem " + idade + "anos.");
</script>
imc.html
prompt
imc.html
mostra calculaIMC
pulaLinha
var alturaDoUsuario = prompt("Bom Dia! Qual é a sua altura ?" );
var pesoDoUsuario = prompt("E o seu peso?");
var imcDoUsuario = calculaIMC(alturaDoUsuario, pesoDoUsuario);
mostra("O seu imc é " + imcDoUsuario);
</script>
prompt
nome
altura
peso
prompt
dados_vitais.html
<script>
var idade = prompt("Quantos anos você tem?");
var dias = idade * 365;
document.write("Você já viveu " + dias + " dias de vida");
</script>
document.write
var batimentos = dias * 24 * 60 * 80;
document.write("Seu coração já bateu " + batimentos
+ " vezes. Haja coração!");
var dias = idade * 365
function
var
idade
idade
var dias = idade * 365;
var dias =
calculaDiasDeVida
365
calculaDiasDeVida(idade);
calculaBatimentos
dias
var idade = 34;
var dias = calculaDiasDeVida(idade);
var batimentos = calculaBatimentos(dias);
document.write("Seu coração já bateu " + batimentos
+ " vezes. Haja coração!");
calculaDiasDeVida
calculaBatimentos
funcoes.html
<script>
var primeira = function() {
console.log("1 - antes");
segunda();
console.log("1 - depois");
};
var segunda = function() {
console.log("2 - antes");
terceira();
console.log("2 - depois");
};
var te rc e i r a = function() {
console.log("3");
};
primeira();
</script>
co n so l e .lo g(" te s te" ) ;
undefined
idade
idade + 5;
console
html
function pulaLinha() {
document.write("<br>");
}
var pulaLinha = function() {
document.write("<br>");
};
(vitorias * 3) + empates
prompt
pontos_futebol.html
mostra pulaLinha
var v i t o r i a s = prompt("Quantos jogos o CDC Futebol Clube venceu?");
var empates = prompt("Quantos jogos o CDC Futebol Clube empatou?");
var pontos = (vitorias * 3) + empates;
mostra("Nosso time tem " + pontos + " pontos!");
pontos_futebol.html
prompt
var teste = 9 + "1";
91
teste
vitorias
prompt
string
par s eI n t( )
string
var v i t o r i a s = 3;
var empates = "1"; // s t r i n g !
var pontos = v i t o r i a s * 3 + empates;
alert(total);
parseInt
var v i t o r i a s = 3;
var empates = "1"; // s t r i n g !
var empatesComoNumero = parseInt(empates);
var pontos = v i t o r i a s * 3 + empatesComoNumero;
alert(total);
var v i t o r i a s = 3;
var empates = "1"; // s t r i n g !
empates = parseInt(empates);
var pontos = v i t o r i a s * 3 + empates;
alert(total);
parseInt
var v i t o r i a s = 3;
var empates = "1"; // s t r i n g !
var pontos = v i t o r i a s * 3 + parseInt(empates);
alert(total);
pontos_futebol.html
var pontos = (vitorias * 3) + parseInt(empates);
pontos
28
if(pontos > 28) {
mostra("Nosso time está indo MELHOR que o Livros Velhos!");
}
if
if
>
<
if(pontos < 28) {
mostra("Nosso time está indo PIOR que o Livros Velhos!");
}
=
=
==
if(pontos == 28) {
mostra("Nosso time está EMPATADO com o Livros Velhos!");
}
if
}
pontos_futebol.html
<script>
var pulaLinha = function() {
document.write("<br>");
};
var mostra = function(frase) {
document.write(frase);
pulaLinha();
};
prompt
var v i t o r i a s = prompt("Quantos jogos o CDC Futebol Clube venceu?");
var empates = prompt("Quantos jogos o CDC Futebol Clube empatou?");
var pontos = (vitorias * 3) + parseInt(empates);
if
var v i t o r i a s = prompt("Quantos jogos o CDC Futebol Clube venceu?");
var empates = prompt("Quantos jogos o CDC Futebol Clube empatou?");
var pontos = (vitorias * 3) + parseInt(empates);
if(pontos > 28) {
mostra("Nosso time está indo MELHOR que o Livros Velhos!");
}
if(pontos < 28) {
mostra("Nosso time está indo PIOR que o Livros Velhos!");
}
if(pontos == 28) {
mostra("Nosso time está EMPATADO com o Livros Velhos!");
}
</script>
prompt
pontos_adversario
calculaPontos
vitorias
var calculaPontos = function(vitorias, empates) {
return (vitorias * 3) + empates;
};
parseInt
prompt
-1
if
imc.html
empates
var imcDoUsuario = calculaIMC(alturaDoUsuario, pesoDoUsuario);
mostra("O seu imc é " + imcDoUsuario);
if(imcDoUsuario < 18.5) {
mostra("Seu IMC indica que você está ABAIXO do peso.");
}
60
1.82
if(imcDoUsuario > 35) {
mostra("Seu IMC indica que você está ACIMA do peso.");
}
99
1.6
imcDoUsuario
18.5
35
if
18.5
if(imcDoUsuario > 18.5) {
// nao basta estar acima de 18.5
// preciso verificar se está abaixo de 35
}
if
if(imcDoUsuario > 18.5) {
if(imcDoUsuario < 35) {
mostra("OK! Seu IMC está entre os dois limites.");
}
}
if
if
TAB
if(imcDoUsuario > 18.5) {
if(imcDoUsuario < 35) {
mostra("OK! Seu IMC está entre os dois limites.");
}
}
TAB
mostra
if(imcDoUsuario < 35)
if(imcDoUsuario > 18.5)
ifs
&&
if(imcDoUsuario > 18.5 && imcDoUsuario < 35) {
mostra("OK! Seu IMC está entre os dois limites.");
}
18.5
35
>= <=
if(imcDoUsuario >= 18.5 && imcDoUsuario <= 35) {
mostra("OK! Seu IMC está entre os dois limites.");
}
jogo_adivinha.html
Math.random()
0 1
0.5
<script>
var numeroPensado = Math.random();
</script>
0 100
Math.random()
100
0.5
100
50
<script>
var numeroPensado = Math.random() * 100;
</script>
0.5372
53.72
Math.round()
numeroPensadoComCasasDecimais
numeroPensado
<script>
var numeroPensadoComCasasDecimais = Math.random() * 100;
var numeroPensado = Math.round(numeroPensadoComCasasDecimais);
</script>
numeroPensadoComCasasDecimais
numeroPensado
numeroPensadoComCasasDecimais
Math.random() * 100
Math.round
<script>
var numeroPensado = Math.round(Math.random() * 100);
</script>
<script>
var numeroPensado = Math.round(Math.random() * 100);
var chute = prompt(" Já pensei. Qual você acha que é?");
if(chute == numeroPensado) {
mostra("Uau! Você acer tou, pois eu pensei no " + numeroPensado);
}
</script>
==
!=
var numeroPensado = Math.round(Math.random() * 100);
var chute = prompt(" Já pensei. Qual você acha que é?");
if(chute == numeroPensado) {
mostra("Uau! Você acer tou, pois eu pensei no " + numeroPensado);
}
if(chute != numeroPensado) {
mostra("Você errou! Eu tinha pensado no " + numeroPensado);
}
if
else
else
var numeroPensado = Math.round(Math.random() * 100);
var chute = prompt(" Já pensei. Qual você acha que é?");
if(chute == numeroPensado) {
mostra("Uau! Você acer tou, pois eu pensei no " + numeroPensado);
} else {
mostra("Você errou! Eu tinha pensado no " + numeroPensado);
}
chute == numeroPensado
else
if
100
10
0 10
jogo_adivinha.html
Math.random()
<script>
var numeroPensado = Math.round(Math.random() * 100);
</script>
chute
<script>
var numeroPensado = Math.round(Math.random() * 100);
var chute = prompt(" Já pensei. Qual você acha que é?");
if(chute == numeroPensado) {
mostra("Uau! Você acer tou, pois eu pensei no " + numeroPensado);
}
</script>
mostra
else
<script>
var numeroPensado = Math.round(Math.random() * 100);
var chute = prompt(" Já pensei. Qual você acha que é?");
if(chute == numeroPensado) {
mostra("Uau! Você acer tou, pois eu pensei no " + numeroPensado);
} else {
mostra("Você errou! Eu tinha pensado no " + numeroPensado);
}
</script>
so r teia
n
n
var numeroPensado = Math.round(Math.random() * 100);
var numeroPensado = s o r te ia (10 0) ;
"banana"
isNaN(variavel)
isNaN("banana");
isNaN(123);
if(isNaN(chute))
NaN
if else
var anoDeCopa = 1930;
alert(anoDeCopa + " tem copa!");
anoDeCopa = anoDeCopa + 4;
alert(anoDeCopa + " tem copa!");
anoDeCopa = anoDeCopa + 4;
alert(anoDeCopa + " tem copa!");
anoDeCopa = anoDeCopa + 4;
alert(anoDeCopa + " tem copa!");
4
anos_de_copa.html
<script>
var anoDeCopa = 1930;
while(true) {
alert(anoDeCopa + " tem copa!");
anoDeCopa = anoDeCopa + 4;
}
</script>
anoDeCopa
while
{ }
anoDeCopa
anoDeCopa
while
anoDeCopa
if
while(true)
anoDeCopa
<script>
var anoDeCopa = 1930;
while(anoDeCopa <= 2014) {
alert(anoDeCopa + " tem copa!");
anoDeCopa = anoDeCopa + 4;
}
</script>
while
anoDeCopa
anoDeCopa
while
anos_de_copa.html
alert
mostra
alert
while
mostra
pulaLinha
pulaLinha
document.write
<br>
var mostra = function(frase) {
document. w r i t e ( f r a s e + "<br>");
};
alert
mostra(anoDeCopa + " tem copa!");
mostra
<script>
var anoDeCopa = 1930;
while(anoDeCopa <= 2014) {
mostra(anoDeCopa + " tem copa!");
anoDeCopa = anoDeCopa + 4;
}
mostra("Ufa! Esses foram os anos de copa até 2014.");
</script>
while
anoDeCopa <= 2014
true
while
anos_de_copa.html
mostra
<script>
var mostra = function(frase) {
document. w r i t e ( f r a s e + "<br>");
};
var anoDeCopa = 1930;
while(anoDeCopa <= 2014) {
mostra(anoDeCopa + " tem copa!");
anoDeCopa = anoDeCopa + 4;
}
</script>
anoDeCopa
while
while
while
mostra("Ufa! Esses foram os anos de copa até 2014.");
while
anos_de_copa.html
while(anoDeCopa <= 100000)
while
prompt
anoLimite
prompt("Qual é o ano limite?");
while
anoDeCopa <= anoLimite
var anoLimite =
while
anoDeCopa
anoLimite
while
<script>
var mostra = function(frase) {
document. w r i t e ( f r a s e + "<br>");
};
var anoDeCopa = 1930;
var anoLimite = prompt("Qual é o ano l i m i te ? " );
while(anoDeCopa <= anoLimite) {
mostra(anoDeCopa + " tem copa!");
anoDeCopa = anoDeCopa + 4;
}
mostra("Ufa! Esses foram os anos de copa até " + anoLimite);
</script>
var anoDeCopa = prompt("Informe o ano inicial");
while
1930 é ano de copa!
while
while
anoDeCopa
while(anoDeCopa <= anoLimite) {
mostra(anoDeCopa + " tem copa!");
anoDeCopa = anoDeCopa + 4;
mostra(anoDeCopa + " esse é o valor após a soma!");
}
1934
19304
1930 + 4
string
prompt
= 19304
par s eI nt ()
string
var anoComoTexto = prompt("Informe o ano inicial");
var anoDeCopa = parseInt(anoComoTexto);
anos_de_copa.html
<script>
var mostra = function(frase) {
document. w r i t e ( f r a s e + "<br>");
};
var anoDeCopa = prompt("Informe o ano inicial");
var anoLimite = prompt("Qual é o ano l i m i te ? " );
while(anoDeCopa <= anoLimite) {
mostra(anoDeCopa + " tem copa!");
anoDeCopa = 4 + anoDeCopa;
}
mostra("Ufa! Esses foram os anos de copa até " + anoLimite);
</script>
parseInt
var anoComoTexto = prompt("Informe o ano inicial");
var anoDeCopa = parseInt(anoComoTexto);
<script>
var mostra = function(frase) {
document. w r i t e ( f r a s e + "<br>");
};
var anoComoTexto = prompt("Informe o ano inicial");
var anoDeCopa = parseInt(anoComoTexto);
var anoLimite = prompt("Qual o ano l i m i te ? " );
while(anoDeCopa <= anoLimite) {
mostra(anoDeCopa + " é ano de copa!");
anoDeCopa = 4 + anoDeCopa;
}
mostra("Ufa! Esses foram os anos de copa até " + anoLimite);
</script>
anos_de_copa.html
"10"+ 10 "10"+ "10" "10"* 10 "10"* "10"
tabuadas.html
<script>
<script>
</script>
multiplicador
<script>
var multiplicador = 1;
</script>
multiplicador
mostra
tabuadas.html
<script>
var mostra = function(frase) {
document. w r i t e ( f r a s e + "<br>");
};
var multiplicador = 1;
while(multiplicador <= 10) {
mostra(7 * mult iplicado r);
}
</script>
multiplicador
<script>
var mostra = function(frase) {
document. w r i t e ( f r a s e + "<br>");
};
var multiplicador = 1;
while(multiplicador <= 10) {
mostra(7 * mult iplicado r);
multiplicador = multiplicador + 1;
}
</script>
mostra("7 vezes " + multiplicador + " é igual a " + 7 * mul tiplic ador);
prompt
multiplicador
multiplicador
while
while
for
for( ; ; ) {
alert("mensagem para repetição infinita");
}
for
for( ; ; )
while(true)
for
;
for(espaco 1; espaco 2; espaco 3)
while
var numero = 1
while(numero <= 10) {
alert(numero);
numero = numero + 1;
}
for
var numero = 1;
for(; numero <= 10; ) {
alert(numero);
numero = numero + 1;
}
while
for
numero
for(var numero = 1; numero <= 10; ) {
alert(numero);
numero = numero + 1;
}
for
var numero = 1
for
numero <= 10
numero
for(var numero = 1; numero <= 10; numero = numero + 1) {
alert(numero);
}
fo r
while
;
for([inicialização]; [condição para repetir]; [modificação do va l o r ] )
for
while
fo r
while
fo r
while
<script>
var mostra = function(frase) {
document. w r i t e ( f r a s e + "<br>");
while
};
var multiplicador = 1;
while(multiplicador <= 10) {
mostra(7 * mult iplicado r);
multiplicador = multiplicador + 1;
}
</script>
tabuada_com_for.html
fo r
multiplicador
<script>
for(var multiplicador = 1; ;) {
}
</script>
for
<script>
for(var multiplicador = 1; multiplicador <= 10; ) {
}
</script>
multiplicador
multiplicador = multiplicador + 1
multiplicador++
<script>
for(var multiplicador = 1; multiplicador <= 10; multiplicador++) {
}
</script>
multiplicador
multiplicador
multiplicador
multiplicador
<script>
for(var multiplicador = 1; multiplicador <= 10; multiplicador++) {
mostra(multiplicador * 7);
}
</script>
mostra
tabuada_com_for.html
while
for
while
while
for
var idadeAdriano = 26;
var idadePaulo = 32;
var idadeSuzana = 25;
var idadeAdriano = 26;
var idadePaulo = 32;
var idadeSuzana = 25;
var idadeMarcela = 28;
var media = (idadeAdriano + idadePaulo + idadeSuzana + idadeMarcela) / 4;
mostra(media);
media_idade_familiares.html
prompt
<script>
var totalDeFamiliares = prompt("Quantos fa mili ares são?");
</script>
var totalDeFamiliares = prompt("Quantos fa mili ares são?");
var numero = 1;
while(numero <= totalDeFamiliares) {
numero++;
}
numero
while
numero++
var totalDeFamiliares = prompt("Quantos fa mili ares são?");
var numero = 1;
while(numero <= totalDeFamiliares) {
var idadeTexto = prompt("Qual é a idade?");
var idade = parseInt(idadeTexto);
numero++;
}
parseInt
prompt
idade
string
idadeTexto
idade
parseInt(prompt("Qual é a idade?"))
prompt
prompt
var totalDeFamiliares = prompt("Quantos fa mili ares são?");
var numero = 1;
while(numero <= totalDeFamiliares) {
var idade = parseInt(prompt("Qual é a idade?"));
numero++;
}
totalDeFamiliares
parseInt
somaDeIdades
var totalDeFamiliares = prompt("Quantos fa mili ares são?");
var somaDeIdades = 0;
var numero = 1;
while(numero <= totalDeFamiliares) {
var idade = parseInt(prompt("Qual é a idade?"));
somaDeIdades = somaDeIdades + idade;
numero++;
}
somaDeIdades
somaDeIdades
somaDeIdades
somaDasIdades
totalDeFamiliares
while
var totalDeFamiliares = prompt("Quantos fa mili ares são?");
var somaDeIdades = 0;
var numero = 1;
while(numero <= totalDeFamiliares) {
var idade = parseInt(prompt("Qual é a idade?"));
somaDeIdades = somaDeIdades + idade;
numero++;
}
var media = somaDeIdades / totalDeFamiliares;
alert("A média é: " + media);
<script>
var numeroPensado = Math.round(Math.random() * 100);
var chute = prompt(" Já pensei. Qual você acha que é?");
if(chute == numeroPensado) {
mostra("Uau! Você acer tou, pois eu pensei no " + numeroPensado);
} else {
mostra("Você errou! Eu tinha pensado no " + numeroPensado);
}
</script>
while
numeroPensado
jogo_adivinha_com_tentativas.html
<script>
var numeroPensado = Math.round(Math.random() * 100);
</script>
numeroPensado
numeroDaTentativa
while
<script>
var numeroPensado = Math.round(Math.random() * 100);
var numeroDaTentativa = 1;
while(numeroDaTentativa <= 3) {
numeroDaTentativa++;
}
</script>
prompt
while
<script>
var numeroPensado = Math.round(Math.random() * 100);
var numeroDaTentativa = 1;
while(numeroDaTentativa <= 3) {
var chute = prompt("Qual você acha que é?");
numeroDaTentativa++;
}
</script>
chute
numeroPensado
<script>
var numeroPensado = Math.round(Math.random() * 100);
var numeroDaTentativa = 1;
while(numeroDaTentativa <= 3) {
var chute = prompt("Qual você acha que é?");
if(chute == numeroPensado) {
alert("Parabéns, você acertou!");
} else {
alert("Você errou. Será que ainda tem mais tentativas?" );
}
numeroDaTentativa++;
}
</script>
jogo_adivinha_com_tentativas.html
var numeroPensado = Math.round(Math.random() * 1 0 ) ;
while
break
if(chute == numeroPensado) {
alert("Parabéns, você acertou!");
break;
} else {
alert("Você errou. Será que ainda tem mais tentativas?" );
}
jogo_adivinha_com_tentativas.html
var numeroPensado = Math.round(Math.random() * 100);
var numeroDaTentativa = 1;
while(numeroDaTentativa <= 3) {
var chute = prompt("Qual você acha que é?");
numeroDaTentativa++;
}
break
var numeroDaTentativa = 1;
while(numeroDaTentativa <= 3) {
var chute = prompt("Qual você acha que é?");
if(chute == numeroPensado) {
alert("Parabéns, você acertou!");
break;
} else {
alert("Você errou. Será que ainda tem mais tentativas?" );
}
numeroDaTentativa++;
}
if
else
while
1000
break
while
&&
mostra(" * * * ** * * * * * " );
mostra(" * * * ** * * * * * " );
mostra(" * * * ** * * * * * " );
for
for(var linha = 0; linha < 3; linha = linha + 1) {
mostra(" * * * * * * * * * * " );
}
mostra
<br>
asteriscos.html
for(var linha = 0; linha < 3; linha = linha + 1) {
for(var coluna = 0; coluna < 10; coluna = coluna + 1) {
document.write(" * " );
}
document.write("<br>");
}
linha
coluna
prompt
tamanho
tamanho
tamanho
break
for
_
adivinha_mais.html
input
te x t
<input type=" te x t " />
<input type="submit" value="Compare com o meu segredo!" />
id
<input type=" te x t " id="numero" />
<input type="submit" id="adivinhar" value="Compare com o meu segredo!"/>
alert
<input type=" te x t " id="numero" />
<input type="submit" id="adivinhar" value="Compare com o meu segredo!"/>
<script>
var caixaDoNumero = document.getElementById("numero");
alert(caixaDoNumero.value);
</script>
document.getElementById("numero")
id = numero
caixaDoNumero.value
alert
alert
alert
alert
var botaoClicado = function() {
alert(caixaDoNumero.value);
};
botaoClicado
var botaoAdivinhar = document.getElementById("adivinhar");
botaoAdivinhar.onclick = botaoClicado;
botaoAdivinhar
onclick
botaoClicado
adivinha_mais.html
<input type=" te x t " id="numero" />
<input type="submit" id="adivinhar"
value="Compare com o número que estou pensando!" />
<script>
var segredo = 8;
document.getElementById
var caixaDoNumero = document.getElementById("numero");
caixaDoNumero.value
segredo
var botaoClicado = function() {
if(segredo == caixaDoNumero.value) {
alert("Parabéns! Você acertou o número secreto");
}
else {
alert("Infelizmente você errou!");
}
};
adivinhar
botaoAdivinhar
var botaoAdivinhar = document.getElementById("adivinhar");
botaoAdivinhar.onclick = botaoClicado;
</script>
segredo
caixaDoNumero.value
= "";
botao
botaoAdivinhar
onclick
var segredo1 = 16;
var segredo2 = 34;
var segredo3 = 37;
var segredo4 = 42;
var segredo5 = 50;
var segredo6 = 58;
if
||
if
segredos
var segredos = [ 1 6 , 34, 37, 42, 50, 5 8 ] ;
segredos
var segredos = [ 1 6 , 34, 37, 42, 50, 5 8 ] ;
console.log(segredos);
console.log(segredos[1]);
console.log(segredos[0]);
for
for(var i = 0; i < 6; i = i + 1) {
console.log(segredo s[i]);
}
segredos[i]
segredos
[]
console.log(segredos.length);
for
segredos.length
for(var i = 0; i < segredos.length; i = i + 1) {
console.log(segredo s[i]);
}
loter i a. ht m l
<input type=" te x t " id="numero" />
<input type="submit" id="adivinhar" value="Compare com o meu segredo!" />
var segredos = [ 1 6 , 34, 37, 42, 50, 5 8 ] ;
var caixaDoNumero = document.getElementById("numero");
for
caixaDoNumero.value
var botaoClicado = function() {
for(var i = 0; i < segredos.length; i = i + 1) {
if(segredo s[i] == caixaDoNumero.value) {
alert("Parabéns! Você acertou um dos números secretos");
}
}
};
alert
fo r
var botaoClicado = function() {
for(var i = 0; i < segredos.length; i = i + 1) {
if(segredo s[i] == caixaDoNumero.value) {
alert("Parabéns! Você acertou um dos números secretos");
}
}
alert("Infelizmente você errou!");
};
for
alert
alert
return
return
var botaoClicado = function() {
for(var i = 0; i < segredos.length; i = i + 1) {
if(segredo s[i] == caixaDoNumero.value) {
alert("Parabéns! Você acertou um dos números secretos");
return;
}
}
alert("Infelizmente você errou!");
};
return
var achou
if
achou = true
for
achou != true
var botaoAdivinhar = document.getElementById("adivinhar");
botaoAdivinhar.onclick = botaoClicado;
</script>
break
break
segredos
var segredos = [ 1 6 , 34, 37, 42, 50, 5 8 ] ;
console.log(segredos[0]);
segredos[0]
segredos[0] = 20;
console.log(segredos[0]);
push
segredos.push(60);
console.log(segredos[6]);
console.log(segredos.length);
push
60
[ 1 6 , 34, 37, 42, 50, 58, 60]
58
segredos.push(...)
console.log(...)
document.write(...)
segredos
document
console
bingo.html
<input type=" te x t " id="numero" />
<input type="submit" value="Adicione e verifique no Bingo!"
id="verificar"/>
[]
<script>
var sorteados = [];
console.log
var adicionarSorteado = function() {
var numero = document.getElementById("numero").value;
sorteados.push(numero);
console.log(sor teados);
};
document.getElementById("numero").value
document.getElementById("numero")
.value
onclick
verificar
var botao = document.getElementById("verificar");
botao.onclick = adicionarSorteado;
</script>
bingo.html
for
var adicionarSorteado = function() {
var numero = document.getElementById("numero").value;
for(var i = 0; i < sor teados.length; i = i + 1 ) {
if(so r te ado s[i] == numero) {
alert("Numero já sorteado!");
return;
}
}
sorteados.push(numero);
console.log(sor teados);
};
return
return
return
break
prompt
input
canvas.html
<canvas id=" t e l a " width="600" height="400"></canvas>
script
0,0
<script>
var te l a = document.getElementById(" t e l a " );
var c = tela.getContext("2d");
c.fillStyle="green";
c.fillRect(0, 0, 200, 400);
</script>
200,400
c
fillStyle
fillRect
fillRect
0,0
0,0
600,400
400,0
c.fillStyle="red";
c.fillRect(400, 0, 200, 400);
gray red green blue black
fillRect
gray
300,200
200,400
400,400
c.fillStyle="gray";
c.beginPath();
c.moveTo(300, 200);
c.line To(200, 400);
c.line To(400, 400);
c.fill();
fill
arc
c.fillStyle="blue";
c.beginPath();
c. arc( 300 , 200, 50, 0, 2* 3.1 4);
c.fill();
3.14
Math.PI
c.arc(3 00 ,
200, 50, 0, 2*3.14)
fillRect beginPath moveTo lineTo
fillStyle
fill
document.write
alert
tela.getContext("2d");
fillRect
canvas.html
<canvas id=" t e l a " width="600" height="400"></canvas>
<script>
var te l a = document.getElementById(" t e l a " );
var c = tela.getContext("2d");
c.fillStyle="green";
c.fillRect(0, 0, 200, 400);
400,0
c.fillStyle="red";
c.fillRect(400, 0, 200, 400);
beginPath
moveTo
fill
c.fillStyle="gray";
c.beginPath();
c.moveTo(300, 200);
c.line To(200, 400);
c.line To(400, 400);
c.fill();
script
c.fillStyle="blue";
c.beginPath();
c. arc( 300 , 200, 50, 0, 2* 3.1 4);
c.fill();
</script>
lineTo
canvas_loop.html
x y
desenhaQuadradoVerde
<canvas id=" t e l a " width="600" height="400"></canvas>
<script>
var desenhaQuadradoVerde = function(x,y) {
var te l a = document.getElementById(" t e l a " );
var c = tela.getContext("2d");
c.fillStyle="green";
c.fillRect(x, y, 50, 5 0 ) ;
};
desenhaQuadradoVerde(0,0);
</script>
canvas_loops.html
x
desenhaQuadradoVerde(0,0)
var x = 0;
while(x < 600) {
desenhaQuadradoVerde(x, 0);
x = x + 50;
}
while
desenhaQuadradoVerde
strokeStyle
var desenhaQuadradoVerde = function(x,y) {
var te l a = document.getElementById(" t e l a " );
var c = tela.getContext("2d");
c.fillStyle="green";
c.fillRect(x, y, 50, 5 0 ) ;
c.strokeStyle="black";
c.strokeRect(x, y, 50, 5 0 ) ;
};
while
fo r
while
for(var x = 0; x < 600; x = x + 50) {
desenhaQuadradoVerde(x, 0);
}
x
var desenhaQuadradoVermelho = function(x,y) {
var te l a = document.getElementById(" t e l a " );
var c = tela.getContext("2d");
c.fillStyle="red";
c.fillRect(x, y, 50, 5 0 ) ;
c.strokeStyle="black";
c.strokeRect(x, y, 50, 5 0 ) ;
};
fo r
for
50
for(var x = 0; x < 600; x = x + 50) {
desenhaQuadradoVerde(x, 0);
}
for(var x = 0; x < 600; x = x + 50) {
desenhaQuadradoVermelho(x, 5 0 ) ;
}
for
x
0, 50, 100, 150, ..., 550
fo r
for(var x = 0; x < 600; x = x + 50) {
desenhaQuadradoVerde(x, 0);
desenhaQuadradoVermelho(x, 5 0 ) ;
}
x y
x
desenhaBolaAzul(x, 100);
fo r
desenhaQuadradoVermelho
desenhaQuadradoVerde
desenhaQuadrado
x
y
cor
desenhaQuadradoVermelho
desenhaQuadradoVerde
desenhaQuadrado
for
f(x) = x*x
x
x = 2
y
f(x) = 9
f(x) = 2 * 2 = 4
for(var x = 0; x < 600; x = x + 1) {
var y = x * x;
console.log("Para x = " + x + ", o y vale " + y);
}
funcoes.html
<canvas id=" t e l a " width="600" height="400"></canvas>
<script>
var te l a = document.getElementById("tela");
var c = tela.getContext("2d");
fo r
x, y
for(var x = 0; x < 600; x = x + 1) {
var y = x * x;
x = 3
console.log("Para x = " + x + ", o y vale " + y);
c.beginPath();
c.arc(x, y, 2, 0, 2*Math.PI);
c.fill();
}
</script>
y
x, 400 - y
c.arc(x, 400 - y, 2, 0, 2*Math.PI);
x = 20
y
y = 400
f(x) = 0.01 * x * x
var y = 0.01 * x * x
for
desenhaParabola
<canvas id=" t e l a " width="600" height="400"></canvas>
<script>
var te l a = document.getElementById(" t e l a " );
var c = tela.getContext("2d");
c.fillStyle="blue";
var desenhaParabola = function() {
for(var x = 0; x < 600; x = x + 1) {
var y = 0.01 * x * x;
console.log("Para x = " + x + ", o y vale " + y);
c.beginPath();
c.arc(x, 400 - y, 2, 0, 2*Math.PI);
c.fill();
}
};
desenhaParabola();
</script>
f(x) = seno(x)
desenhaParabola
Math.sin(x)
0.01 * x * x
var funcaoQuadratica = function(x) {
return 0.01 * x * x;
}
var desenhaParabola = function() {
desenhaParabola
for(var x = 0; x < 600; x = x + 1) {
var y = funcaoQuadratica(x);
console.log("Para x = " + x + ", o y vale " + y);
c.beginPath();
c.arc(x, 400 - y, 2, 0, 2*Math.PI);
c.fill();
}
}
f(x) = seno(x)
desenhaParabola()
desenhaFuncao(funcaoQuadratica);
funcaoQuadratica
desenhaParabola
desenhaParabola
desenhaParabola
funcaoMatematica
desenhaFuncao
var desenhaFuncao = function(funcaoMatematica) {
for(var x = 0; x < 600; x = x + 1) {
var y = // O QUE FAZER AQUI?
console.log("Para x = " + x + ", o y vale " + y);
c.beginPath();
c.arc(x, 400 - y, 2, 0, 2*Math.PI);
c.fill();
}
}
y
funcaoMatematica
var y = funcaoMatematica(x)
desenhaFuncao,
desenhaFuncao(funcaoQuadratica)
desenhaFuncao
var y
= funcaoMatematica(x)
botaoAdivinhar.onclick =
botaoClicado
var funcaoSeno = function(x) {
return
Math.sin(x);
}
desenhaFuncao(funcaoSeno);
-1
1
Math.sin(x/20) * 100 + 200;
mouse.html
mouse.html
<canvas id=" t e l a " width="600" height="400"></canvas>
<script>
var te l a = document.getElementById(" t e l a " );
var c = tela.getContext("2d");
c.fillStyle="gray";
c.fillRect(0, 0, 600, 400);
</script>
mouse.html
te l a . o n c l i c k
</script>
t e l a . o n c l i c k = function() {
alert("alguém clico u no c a nva s! " ) ;
};
te l a . o n c l i c k
alert
MouseEvent
x,y
t e l a . o n c l i c k = function(evento) {
var x = evento.pageX;
var y = evento.pageY;
aler t("posição do clique : " + x + ", " + y);
};
evento
e
mouseEvent
11, 11
10,10
0,0
evento.pageX. evento.pageY
tela
t e l a . o n c l i c k = function(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tel a .off s et Top ;
aler t("po sição do clique : " + x + ", " + y);
};
drawArc
t e l a . o n c l i c k = function(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tel a .off s et Top ;
c.fillStyle="blue";
c.beginPath();
c.arc(x, y, 10, 0, 2* 3. 14);
c.fill();
console.log("posição do clique : " + x + ", " + y);
};
document.write
alert
var desenhaCirculo = function(evento) {
// código que você já viu ficaria aqui ...
}
t e l a . o n c l i c k = desenhaCirculo;
onclick
tela.onclick
canvas
tela.onmousemove
corEscolhida
ifs
c.fillStyle = corEscolhida
for
x
animacao.html
<script>
var te l a = document.getElementById("tela");
var c = tela.getContext("2d");
c . f i l l St y l e = " g r e e n" ;
c.fillRect(0, 0, 200, 400);
x, y
raio
var circ ulo = function(x, y, r a i o ) {
c.fillStyle = "blue";
c.beginPath();
c.arc(x, y, raio, 0, 2*Math.PI);
c.fill();
};
var limpaTela = function() {
c . c l e a r Re c t ( 0 , 0, 600, 400);
};
1
fo r
y
1
f o r ( va r x = 0; x < 600; x = x + 1) {
limpa Tela();
circulo(x, 100, 1 0 ) ;
}
</script>
set In te r va l
fo r
var x = 1;
var desenha = function() {
limpa Tela();
circulo(x, 100, 1 0 ) ;
x = x + 1;
};
x
100
raio
10
x
1
desenha
se tI nte r va l
</script>
setInter val(desenha, 3 0 ) ;
animacao.html
circ ul o
limpaTela
<canvas id=" t e l a " width="600" height="400"></canvas>
<script>
var te l a = document.getElementById("tela");
var c = tela.getContext("2d");
var circ ulo = functio n( x, y, r a i o ) {
c.fillStyle = " b lu e" ;
c.beginPath();
c.arc(x, y, raio, 0, 2*Math.PI);
c.fill();
};
var limpaTela = function() {
c . c l e a r Re c t ( 0 , 0, 600, 400);
};
x
desenha
setI n ter val
var x = 1;
var desenha = functio n() {
limpa Tela();
circulo(x, 100, 1 0 ) ;
x = x + 1;
};
setInter val(desenha, 3 0 ) ;
</script>
x
circulo(x, 100, x/2)
strokeStyle stroke
fillStyle
fill
limpaTela
circ ulo
desenhaImagem(x, 100)
var imagem = new Image();
imagem.src = "http://www.caelum.com.br/imagens/"
+ " instruto res/fo to s/paulo -silveira -90.jpg" ;
var desenhaImagem = function(x, y ) {
c.drawImage(imagem, x, y )
};
imagem.src = "nomeDaImagem.jpg"
.html
circulo(x, x, 1 0 ) ;
cor
var desenhaAlvo = function(x, y ) {
var raio = 40;
cor("white");
circulo(x, y, raio);
cor("red");
circulo(x, y, r a i o - 1 0 ) ;
cor("white");
circulo(x, y, r a i o - 2 0 ) ;
cor("red");
circulo(x, y, r a i o - 3 0 ) ;
};
setI n ter val
alvoX alvoY
var alvoX ;
var alvoY;
circu lo
var desenha = function() {
l i m pa ( ) ;
alvoX = sor te i a(6 00) ;
alvoY = sor te i a(4 00) ;
desenhaAlvo(alvoX, a l v o Y ) ;
};
sor teia
limpa
desenha
onclick
setInter val(desenha, 1000)
te xt
c . t e x t ( 3 0 , 30, "Pontuação: "+ pontos)
console
document
var nome = "Paulo Silveira";
var idade = 33;
var email = "paulo.silveira@casadocodigo.com.br";
var pessoa = {
nome : "Paulo Silveira",
idade : 33,
email : "paulo.silveira@casadocodigo.com.br"
};
pessoa
console.log(pessoa)
Object {nome: "Paulo Silveira", idade: 33, email:
"paulo.silveira@casadocodigo.com.br"}
console.log(pessoa.nome);
console.log(pessoa.idade);
console.log(pessoa.email);
pessoa.idade = 34
contatos
console.log
var botaoAdivinhar = document.getElementById("adivinhar");
botaoAdivinhar.onclick = botaoClicado;
var botaoAdivinhar = document.getElementById("adivinhar");
botaoAdivinhar.addEventListener('click', botaoClicado, f a l s e )
script
<script src="codigo.js" ></script>
codigo.js