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>No</strong> consigo fazer nada alm de mostrar contedo f i xo?

<strong> <h3>
Meu primeiro te s te !
<h3>Seria is so um programa?</h3>

<strong>No</strong> consigo fazer nada alm de mostrar contedo f i xo?

Conhea o site da nossa edi to ra:

<a href="http://www.casadocodigo.com.br">Clique aqui</a>!

< >
<h3>
</h3> <a ...> </a>
href

<strong>No</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>No</strong> consigo fazer nada alm de mostrar contedo f i xo?

Conhea 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 cdigo"
"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) 2012

- 25 document.write("2012 - 25")
script

script
- + * /

document.write("A soma das nossas idades : ");

document.write(25 + 32 + 2 6 ) ;
document.write("A mdia 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 mdia 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 mdia das nossas idades : " + ((25 + 32 + 26) / 3));
</script>
 <br>
<br>

document.write("Minha idade : " + 2 5 ) ;

+ "<br>"

document.write("Minha idade : " + 25 + "<br>");

"Nossa diferena 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 ano = 2012
= 2012 =

document.write(...)

string

var ano = 2012;

document.write("ano");
document. w r i te ( a n o ) ;
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 mdia de idade " + media);

</script>

med
media
document.write("A mdia de idade " + med);

Math.round(numero)

document.write("A mdia 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 300
consumoDeAlcool

Math.round

0.314178473 0
0.314178473
 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 var
pulaLinha = ...
 <hr> pulaLinha
<br>

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 frase

mostra("Usando funes para melhorar o cdigo");

 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 <br>
document.write("ol mundo!<br>");
document.write
 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 funo 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 return

var calculaIMC = function(altura, peso) {

var imc = peso / ( a l t u r a * altura);
return imc;
};
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 pulaLinha
mostra calculaIMC

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 corao j bateu " + batimentos
+ " vezes. Haja corao!");

var dias = idade * 365

var
calculaDiasDeVida function idade
idade
365
var dias = idade * 365; var dias =
calculaDiasDeVida(idade);

calculaBatimentos dias

var idade = 34;

var dias = calculaDiasDeVida(idade);
var batimentos = calculaBatimentos(dias);
document.write("Seu corao j bateu " + batimentos
+ " vezes. Haja corao!");

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";

teste 91
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 empates

var calculaPontos = function(vitorias, empates) {

return (vitorias * 3) + empates;
};

parseInt prompt

-1

if
imc.html
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) if(isNaN(chute))
NaN

isNaN("banana"); isNaN(123);
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 anoDeCopa

anos_de_copa.html

<script>
var anoDeCopa = 1930;

while(true) {
alert(anoDeCopa + " tem copa!");
anoDeCopa = anoDeCopa + 4;
}
</script>

anoDeCopa
while
{ }
 anoDeCopa anoDeCopa

while 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

mostra(anoDeCopa + " tem copa!");

<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 anoDeCopa

<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>
 while
while

while

mostra("Ufa! Esses foram os anos de copa at 2014.");

while
anos_de_copa.html

while(anoDeCopa <= 100000)

while

prompt anoLimite var anoLimite =

prompt("Qual o ano limite?");
while anoDeCopa <= 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 aps a soma!");
}

1934 19304 1930 + 4

= 19304

par s eI nt ()
string prompt
 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 repetio 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

for
numero

for(var numero = 1; numero <= 10; ) {

alert(numero);
numero = numero + 1;
}
 var numero = 1 for
numero <= 10

numero

for(var numero = 1; numero <= 10; numero = numero + 1) {

alert(numero);
}

fo r

while

for([inicializao]; [condio para repetir]; [modificao do va l o r ] )

for while
fo r
while

fo r while

while

<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>

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 so?");
</script>

var totalDeFamiliares = prompt("Quantos fa mili ares so?");

var numero = 1;
while(numero <= totalDeFamiliares) {
 numero++;
}

numero
while
numero++

var totalDeFamiliares = prompt("Quantos fa mili ares so?");

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 parseInt

var totalDeFamiliares = prompt("Quantos fa mili ares so?");

var numero = 1;
while(numero <= totalDeFamiliares) {
var idade = parseInt(prompt("Qual a idade?"));
numero++;
}

totalDeFamiliares
somaDeIdades

var totalDeFamiliares = prompt("Quantos fa mili ares so?");

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 so?");

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 mdia : " + 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("Parabns, 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("Parabns, 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("Parabns, 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 nmero 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("Parabns! Voc acertou o nmero 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("Parabns! Voc acertou um dos nmeros secretos");
}
}
};
 alert fo r
var botaoClicado = function() {
for(var i = 0; i < segredos.length; i = i + 1) {
if(segredo s[i] == caixaDoNumero.value) {
alert("Parabns! Voc acertou um dos nmeros 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("Parabns! Voc acertou um dos nmeros 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 58
[ 1 6 , 34, 37, 42, 50, 58, 60]

segredos.push(...)
console.log(...) document.write(...)
segredos console
document
 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 200,400

<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>
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 fill
fillStyle

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 lineTo

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>
 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 while
x
desenhaQuadradoVerde(0,0)

var x = 0;
while(x < 600) {
desenhaQuadradoVerde(x, 0);
x = x + 50;
}
 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
y x = 2 f(x) = 2 * 2 = 4 x = 3
f(x) = 9

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;
 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 = 400
f(x) = 0.01 * x * x
y 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 desenhaParabola

var funcaoQuadratica = function(x) {

return 0.01 * x * x;
}

var desenhaParabola = function() {

 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 desenhaFuncao
funcaoMatematica
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("algum 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("posio do clique : " + x + ", " + y);
};

evento mouseEvent
e
 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 sio 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("posio do clique : " + x + ", " + y);

};

document.write alert
var desenhaCirculo = function(evento) {
// cdigo que voc j viu ficaria aqui ...
}

t e l a . o n c l i c k = desenhaCirculo;
 onclick canvas

tela.onclick 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);
};

fo r x
1 1 y 100 raio 10

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
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) limpaTela
strokeStyle stroke fillStyle fill 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 circu lo

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;
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, "Pontuao: "+ 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