Sie sind auf Seite 1von 19

Introduo ao JavaScript

Prof. Leando Migliari / Prof. Anderson Oliveira

ETEC Jacinto Ferreira de S - Ourinhos

Onde coloco o cdigo JavaScript?


Mostrar onde se digita o cdigo JavaScript dentro de uma pgina HTML.
O Cdigo JavaScript fica Entre o <script> e o </script>. Ficaremos com a seguinte estrutura:
<html> <body>

<script>
alert("Minha primeira mensagem!"); </script> </body> </html>

Eis nosso primeiro cdigo. Vamos analis-lo?

Entendendo o Cdigo

alert("Minha primeira mensagem!");

Exibe uma janela com a frase Minha primeira mensagem! com apenas um boto de OK. Teste voc mesmo, crie um arquivo com extenso .htm e execute. H mais trs diferentes maneiras de colocar o cdigo JavaScript na pgina, mas iremos utilizar o mtodo acima em nosso tutorial.

Exemplo bsico, manipulao de varivel


Faz aparecer na tela o resultado de um clculo.
<html> <body> <script> a = 2; b = 9; c = a + b; alert(c) </script>

</body> </html>
Temos aqui manipulao de variveis, assim como na matemtica tradicional.

Entendendo o Cdigo

a =2
Faz com que a varivel a receba o nmero 2.

b =9
Faz com que a varivel b receba o nmero 9.

c =a+b
Faz com que a varivel c receba o resultado de a + b.

alert = (c)
Faz com que uma janela exiba o contedo da varivel c. Note que no usamos aspas na frente e atrs do c porque estamos consultando o valor de uma varivel. Se colocssemos aspas, ele iria mostrar apenas a letra c, literalmente.

Expresses condicionais if
Implementar o uso de expresses condicionais.
<html> <body> <script> bananas = 6; if (bananas == 6) { alert(" verdade. Temos meia dzia de bananas"); } </script>

</body> </html>
O if a mais bsica das expresses condicionais no JavaScript. Com ele, voc pode decidir se quer executar uma ao ou no.

Entendendo o Cdigo

bananas = 6
Faz com que a varivel "bananas" receba o nmero 6.

if (bananas == 6) { alert(" verdade. Temos meia dzia de bananas"); }


O trecho acima uma expresso condicional if.

Vamos Analisar
if (bananas == 6) { alert(" verdade. Temos meia dzia de bananas") } Esta a expresso condicional. Se ela for verdadeira (no caso, se bananas for igual a
seis), entraremos no bloco de cdigo. A seguir, temos a estrutura de um bloco de cdigo.

if (bananas == 6) { alert(" verdade. Temos meia dzia de bananas") }


Abre o bloco de cdigo. Este conjunto de operaes que se deseja realizar. Reforando, s estaremos executando esta parte se a condicional for verdadeira.

Vamos Analisar
if (bananas == 6) { alert(" verdade. Temos meia dzia de bananas") } Nos mostra uma janelinha de aviso o seguinte texto: verdade. Temos meia dzia
de bananas

if (bananas == 6) { alert(" verdade. Temos meia dzia de bananas") } Fecha o conjunto de operaes.
Voc pode fazer experimentos, trocando o "bananas = 6" por "bananas = 10" ou qualquer outro valor que no seja 6. J que a condicional no vai ser verdadeira, ele simplesmente no entra no bloco do cdigo que faz o alert(" verdade. Temos meia dzia de bananas").

Expresses condicionais if else


Utilizar o else, quando o if no for verdadeiro.
<html> <body> <script> bananas = 6; if (bananas == 6) { alert(" verdade. Temos meia dzia de bananas"); } else { alert("No verdade. Temos outra quantidade de bananas"); } </script> </body> </html> Neste exemplo estamos utilizando o if else. Leia-se: Se (if) o nmero de bananas for igual a 6, faa alert(" verdade. Temos meia dzia de bananas"). Seno (else), faa alert(" verdade. Temos meia dzia de bananas").

Expresses condicionais if eles encadeadas


Demonstrar o uso encadeado do if else.

No exemplo acima, cairemos em "Temos outra quantidade de bananas". Experimente trocar o valor de bananas (para seis ou para dez) para cair nas outras condies.

<html> <body>
<script> bananas = 22; if (bananas == 6) { alert("Temos seis de bananas"); } else if (bananas == 10) { alert("Temos dez bananas"); } else { alert("Temos outra quantidade de bananas"); } </script>

</body> </html>

Expresses seletoras switch


Usar o switch para condies de comparaes simples, ao invs de usar o if.

Ateno, no esquea do break!

Sempre inclua um default. Se todas as condies anteriores forem falsas, o switch entrar no default. Ele muito importante. O sistema de telefonia dos Estados Unidos j foi uma vez paralisada por vrias horas por causa da falta de um default!

<html> <body> <script> farol = "amarelo;

switch (farol) { case "vermelho": alert("Pare") break case "amarelo": alert("Atencao") break case "verde": alert("Prossiga") break default: alert("Cor ilegal") }
</script> </body> </html>

Agrupando solues
<html> <body> <script> letra = "e;

switch (letra) { case "a": case "e": case "i": case "o": case "u": alert("Vogal") break default: alert("Outro caracter"); }
</script> </body> </html>

Ilustramos acima o porqu do uso (ou desuso) do break.

Expresses de loops for


Use o for quando se quer que um trecho de cdigo se repita n vezes.
<html> <body> <script> a = 2; for (i = 0; i < 2; i++) { a = i; } alert(a); </script> </body> </html>

A novidade a linha de cdigo acima mostrada em vermelho. Vamos analis-la.

Entendendo o Cdigo

for (i = 0; i < 2; i++)


Utilizamos uma varivel temporria chamada i. Inicializamos ela com valor igual a zero.

for (i = 0; i < 2; i++)


O bloco do meio funciona como um if. Se o valor de i for menor que 2, ele entra no loop.

for (i = 0; i < 2; i++)


A ltima parte diz o que fazer com a varivel i. Neste caso a cada repetio, estamos incrementando o valor de i. Se no fizssemos isto, a condio anterior (i < 2) sempre seria verdadeira, e entraramos em um loop infinito, pois o valor de i sempre seria menor que dois.

Expresses de loops while


Usa-se o while quando se quer que um trecho de cdigo se repita n vezes, com condicional bem simples.
<html> <body> <script> numero = 0; while (numero < 10) { numero++; } alert(numero); </script> </body> </html> Enquanto a condio for verdadeira, o bloco ser executado. Note que dentro do bloco estamos executando um cdigo que far a condio ser falsa depois de algumas repeties. Se no fizssemos a condio ficar falsa, ele entraria no que chamamos de loop infinito, o que no nada bom.

Expresses de loops do while


Usa-se o do while quando se quer que um trecho de cdigo se repita n vezes, mas executa o bloco de cdigo antes da verificao da condio.
<html> <body> <script> numero = 0; do { numero++;

} while (numero < 10)


alert(numero); </script> </body> </html> A diferena de ter um do na frente que o cdigo ser executado antes da condio ser verificada. Execute exemplo e verifique se o resultado diferente do while normal.