JavaScript (parte 1)

1.Introdução

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[bb], 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. Só não garanto que á resolver o problema da fome no mundo. ;)

2.Onde coloco o código JavaScript?

O Código JavaScript fica Entre o <script> e o </script>, e dentros da tags <head> e </head>. Ficaremos com a seguinte estrutura:

1
2
3
4
5
6
7
8
9
10

<html>
  <head>
    <title>Minha página</title>
    <script>
      alert("Minha primeira mensagem!")
    </script>
  </head>
  <body>
  </body>
</html>

Eis nosso primeiro código. Vamos analisá-lo?

Entendendo o código:

1

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.

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

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

1
2
3
4

a=2
b=9
c=a+b
alert(c)

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

Entendendo o código:

1
2
3

a=2
b=9
c=a+b

Faz com que a variável a receba o número 2, a variável b receba o número 9, a variável c receba o resultado de a + b.

1

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.

4.Expressões condicionais “if”

1
2
3
4

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

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:

1

bananas = 6

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

1
2
3

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

Esta é a expressão condicional (linha 1). 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. A abertura de chaves { 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.

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

Na última linha, temos o fechamento de chave }, que 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”).

5.Expressões condicionais “if / else”

Utilizamos o else, quando o if não for verdadeiro.

1
2
3
4
5
6

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

Neste exemplo estamos utilizando o if e o 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”).

Também podemos trabalhar com condicionais, resumindo códigos simples a uma linha. A sintaxe da condicional é:

1

(condição ? verdadeiro : falso)

Desta forma podemos substituir certos códigos com quatro linhas:

1
2
3
4
5

if (preco>10) {
  resultado="Muito Caro!"
} else {
  resultado="Podemos comprar"
}

A apenas uma linha de código:

1

resultado = ( preco>10 ? "Muito Caro!" : "Podemos comprar" )

6.Expressões condicionais “if / else” encadeadas

1
2
3
4
5
6
7
8

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")
}

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.

7.Expressões seletoras “switch”

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

farol = "amarelo"
switch (farol) {
  case "vermelho":
    alert("Pare")
    break
  case "amarelo":
    alert("Atencao")
    break
  case "verde":
    alert("Prossiga")
    break
  default:
    alert("Cor ilegal")
}

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:

1
2
3
4
5
6
7
8
9
10
11
12

letra="e"
switch (letra) {
  case "a":
  case "e":
  case "i":
  case "o":
  case "u":
    alert("Vogal")
    break;
  default:
    alert("Outro caracter")
}

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

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

1
2
3
4
5

  numero = 0
  while (numero < 10) {
    numero++
  }
  alert(numero)

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.

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

1
2
3
4
5

  numero = 0
  do {
    numero++
  } while (numero < 10)
  alert(numero)

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.

10.Expressões de loops “for”

Usa-se o for quando se quer que um trecho de código se repita n vezes.

1
2
3
4
5

a=2
for (i=0;i<2;i++) {
  a=i
}
alert(a)

A novidade é a linha de código acima mostrada na linha 2. Vamos analizá-la. Utilizamos uma variável temporária chamada i. Inicializamos ela com valor igual a zero. O bloco do meio funciona como um if. Se o valor de i for menor que 2, ele entra no loop.

A última parte diz o que fazer com a variável i. Neste caso a cada repetição, estamos incrementando o valor de i. Se não fizéssemos isto, a condição anterior (i<2) sempre seria verdadeira, e entraríamos em um loop infinito, pois o valor de i sempre seria menor que dois.

Neste caso, o for funciona como um encurtador de código e você pode substituí-lo pelo código abaixo.

1
2
3
4
5

i=0
while (i<2) {
  a=i
  i++
}

Trackbacks
  • Duas novidades « DGmike says:
    December 16, 2006 at 7:46 pm

    [...] A primeira vocês já devem ter percebido, mudei de cara mais uma vez. Apenas dois layouts do WordPress me agradam: este e um outro que é pálido e não cabe na resolução de 800×600. Cmo trabalho muito com esta resolução no meu serviço, este layout foi escolhido. Escolhido mesmo pelos código. Eles são os únicos com barra de rolagem em meus códigos, como o código deve ser. A outra novidade é o tutorial de JavaScript que estou disponibilizando para vocês. Está na sessão de artigos, mas você pode acessar direto daqui. Estava fazendo uma apostila para meus alunos de JavaScript e por falta de tempo mesmo eu tive que ir ao oráculo em busca de um bom tutorial. Encontrei este que é muito bom. Adaptei e está ai. Não está completo, mas pretendo melhorá-lo aos poucos. É um bom presente para seu natal. Por hoje é só e até semana que vem! [...]

Comments
  • aa:

    Muiiito bom mano! Ajudo no meu probleminha com o case x.x
    vlw!

    Reply April 29, 2007 at 1:02 am
  • rodrigo:

    coeu faço para incluir uma quebra de linha dentro do alert e escrever uma palavra com aspas(a palavra ten que aparecer com aspas para o usuario)?

    Reply August 25, 2007 at 2:41 pm
  • Michael:

    Para incluir uma quera, use \n dentro de aspas duplas. Em muitas linguagens como o PHP também ocorre isto, seria uma chamada a “new line”.

    Por exemplo:

    alert ('Falha'+"\n\n"+'Você esqueceu de digitar o nome');

    Seria o mesmo de:

    alert ("Falha\n\nVocê esqueceu de digitar o nome");

    Cabe a você escolher…

    Quanto as aspas podemos fazer o seguinte: \”

    Isso se chama “escapar um caractere”. Perceba que sempre iniciamos com uma contra barra, ela indica que o próximo caractere é especial.

    Aí vc vai me perguntar, e como eu coloco uma barra então?

    Assim oh: \\

    :D

    Reply August 25, 2007 at 9:15 pm
  • thallyson:

    Nosssa, muito muito bom,
    ta de parabens cara!!

    Reply April 4, 2008 at 9:44 am
  • Ronaldo Nunes:

    kara muito bom mesmo esse ajuda bastante mais so tem uma coisa q num entendi po kara c da para colocar todas essa mensagens q vc colocou um monte de codigo javascript apenas utilizando o:

    1
2
3
4

    a=9
b=2
c=a+b
alert ("atenção")

    kara num é so trocar o nome atenção por outro nome sem precisar dos outro

    super duvidada:. no caso so precisa de um c quizer pode me mandar um email qualquer um q tiver lido isso souber responder minha duvida.

    vlw pessoal!!!!!!!!!!!

    Reply September 12, 2008 at 11:30 am
Leave a Comment

Add Music To Your Comment

Clear All

Selected Songs (0): Allowed A Maximum Of 1