Expressões de loops do while

Usa-se o do while quando se quer que um trecho de código se repita n vezes, mas executa o bloco de código antes da verificação da condição.

<html>  <body>    <script>    numero = 0    do  {   numero++  }  while (numero < 10)    alert(numero)    </script>    </body>  </html>  

A diferença de ter um do na frente é que o código será executado antes da condição ser verificada. Execute exemplo e verifique se o resultado é diferente do while normal.

Expressões de loops while

Usa-se o while quando se quer que um trecho de código se repita n vezes, com condicional bem simples.

<html>  <body>    <script>    numero = 0    while (numero < 10)  {   numero++  }    alert(numero)    </script>    </body>  </html>  

Enquanto a condição for verdadeira, o bloco será executado. Note que dentro do bloco estamos executando um código que fará a condição ser falsa depois de algumas repetições. Se não fizéssemos a condição ficar falsa, ele entraria no que chamamos de loop infinito, o que não é nada bom.

Expressões seletoras switch

Usar o switch para condições de comparações simples, ao invés de utilizar o if

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

Atenção, não esqueça do break!

Sempre inclua um default. Se todas as condições anteriores forem falsas, o switch entrará no default. Ele é muito importante. O sistema de telefonia dos Estados Unidos já foi uma vez paralisada por várias horas por causa da falta de um default!

Agrupando condições:

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

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

Expressões condicionais if else encadeadas

Demonstrar o uso encadeado do if else

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

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 condições.

Expressões condicionais if else

Utilizar o else, quando o if não for verdadeiro

<html>  <body>    <script>    bananas = 22    if (bananas == 6)  {   alert("É verdade. Temos meia dúzia de bananas")  }  else  {   alert("Não é verdade. Temos outra quantidade de bananas")  }    </script>    </body>  </html>  

Neste exemplo estamos utilizando o if else.

Leia-se: Se (if) o número de bananas for igual a 6, faça alert("É verdade. Temos meia dúzia de bananas"). Senão (else), faça alert("Não é verdade. Temos outra quantidade de bananas").

Expressões condicionais if

Implementar o uso de expressões condicionais

<html>  <body>    <script>    bananas = 6    if (bananas == 6)  {   alert("É verdade. Temos meia dúzia de bananas")  }    </script>    </body>  </html>  

O if é a mais básica das expressões condicionais no JavaScript. Com ele, você pode decidir se quer executar uma ação ou não.

Entendendo o código:

bananas = 6

Faz com que a variável "bananas" receba o número 6.

if (bananas == 6)  {   alert("É verdade. Temos meia dúzia de bananas")  }  

O trecho acima é uma expressão condicional if.

Vamos analisar:

if (bananas == 6)  {   alert("É verdade. Temos meia dúzia de bananas")  }  

Esta é a expressão condicional. Se ela for verdadeira (no caso, se bananas for igual a seis), entraremos no bloco de código. A seguir, temos a estrutura de um bloco de código.

if (bananas == 6)  {   alert("É verdade. Temos meia dúzia de bananas")  }  

Abre o bloco de código. Este é conjunto de operações que se deseja realizar. Reforçando, só estaremos executando esta parte se a condicional for verdadeira.

if (bananas == 6)  {   alert("É verdade. Temos meia dúzia de bananas")  }  

Nos mostra uma janelinha de aviso o seguinte texto: É verdade. Temos meia dúzia de bananas

if (bananas == 6)  {   alert("É verdade. Temos meia dúzia de bananas")  }  

Fecha o conjunto de operações.

Você pode fazer experimentos, trocando o "bananas = 6" por "bananas = 10" ou qualquer outro valor que não seja 6.

Já que a condicional não vai ser verdadeira, ele simplesmente não entra no bloco do código que faz o alert("É verdade. Temos meia dúzia de bananas").

Exemplo básico, manipulação de variável

Fazer aparecer na tela o resultado de um cálculo.

<html>  <body>    <script>    a = 2  b = 9  c = a + b    alert(c)    </script>    </body>  </html>  

Temos aqui manipulação de variáveis, assim como na matemática tradicional.

Entendendo o código:

a = 2

Faz com que a variável a receba o número 2.

b = 9

Faz com que a variável b receba o número 9.

c = a + b

Faz com que a variável c receba o resultado de a + b.

alert(c)

Faz com que uma janela exiba o conteúdo da variável c. Note que não usamos aspas na frente e atrás do c porque estamos consultando o valor de uma variável. Se colocássemos aspas, ele iria mostrar apenas a letra c, literalmente.

Onde coloco o código JavaScript?

02 - Onde coloco o código JavaScript?

Mostrar onde se digita o código JavaScript dentro de uma página HTML.

O Código 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 código. Vamos analisá-lo?

Entendendo o código:

alert("Minha primeira mensagem!")

Exibe uma janela com a frase Minha primeira mensagem! com apenas um botão de OK. Teste você mesmo, crie um arquivo com extensão .htm e execute.

Há mais três diferentes maneiras de colocar o código JavaScript na página, mas iremos utilizar o método acima em nosso tutorial.

01 - Introdução

Iniciando o Tutorial...

Para quem é direcionado este Tutorial de JavaScript?

Para quem não sabe nada de JavaScript ainda, mas já sabe básico de HTML.

O que é JavaScript?

É uma linguagem utilizada principalmente para auxílio de desenvolvimento de páginas para a Internet.

JavaScript é a mesma coisa que Java?

Não, JavaScript é mais simples que Java. Aprender JavaScript é o melhor começo se você quer aprender Java, C, C++, PHP, pois a sintaxe (forma de escrever a linguagem) é semelhante.

O que posso fazer com o JavaScript?

Você pode tornar suas páginas mais "inteligentes", com recursos adicionais como: botões que mudam ao passar o mouse em cima, exibir o horário atual, verificar se o preenchimento de um formulário está correto, e muito mais! O JavaScript pode lhe salvar nas horas em que você menos espera, pois as possibilidades de utilização são infinitas.