Unidade B – Linguagem do lado cliente

Sintaxe

Para começar, a programação JavaScript é incluída dentro dos documentos (X)HTML, porém precisamos indicar que estamos programando em JavaScript. Para isso, identifica-se da seguinte forma:

• <script>      comandos... </script>

Tudo que for escrito entre o <script></script> será considerado programação JavaScript. Porém, recomenda-se utilizar o atributo type que define o tipo de conteúdo do script. Ficando assim:

• <script type="text/javascript">      comandos... </script>

Outra forma é gerar um documento com a programação JavaScript a parte e fazer referência a este arquivo. Para tanto se utiliza o atributo src.  Isso é bastante comum e até recomendado. Veja o exemplo abaixo.

• <script type="text/javascript" src="js/funcoes.js"> </script>

Neste caso só vai a referência ao arquivo e o elemento é fechado. Veja que o padrão para extensão de arquivos que contenham programação JavaScript é js.  Também é recomendado que se crie uma pasta específica para estes arquivos.

Além disso, é importante observar que existe uma padronização quanto a inclusão da programação JavaScript no documento. A convenção especifica que o elemento script deva estar dentro do cabeçalho do documento. Veja na figura B1.

Comentários

A convenção JavaScript para comentários é apresentada abaixo:

• Tudo o que está escrito entre o // e o fim da linha será ignorado.
  // comentário de linha


• Também é possível incluir comentários em diversas linhas como abaixo:
  /* comentário em
  diversas linhas */

Não confundir os comentários Javascript e os comentários (X)HTML (<!—comentário -->).

Faça uso dos comentários ao longo da sua programação, isso pode ajudar na manutenção posterior do código e ainda faz você compreender melhor os recursos da linguagem.

Variáveis

Trabalhar com variáveis na linguagem JavaScript vai parecer mais fácil que outras linguagens, pois não é necessário declarar o tipo da variável. Para fazer a declaração use a palavra var. O nome da variável pode ser de qualquer tamanho, conter números, dígitos e underlines (‘_’).   Exemplos:

• <script type="text/javascript">      var nome;      var preco_unitario;      var valor1;      var email = ‘aaaa@teste.com.br’; </script>

A variável assumirá um tipo de acordo com o valor que lhe for atribuído. Cabe ressaltar que a palavra var é opcional, porém é altamente recomendado que faça uso na declaração de forma a evitar erros.

como JavaScript é case sensitive, a variável de nome teste é diferente da variável de nome Teste.

Na linguagem JavaScript você pode usar tanto aspas simples como duplas para indicar que um conteúdo é String, e o ponto e vírgula (;) no fim da linha de comando é opcional, porém seu uso é recomendado.

Primeiro Script

Bem pessoal, vamos fazer o nosso “Olá mundo!” em JavaScript. Vocês podem usar o bloco de notas para codificar (não se esqueçam de salvar o arquivo com a extensão html). Veja o código da figura B.2:

-  Na linha 11 foi criada a variável chamada teste com valor “olá mundo!!”.

- Na linha 12 estamos mostrando o valor da variável teste no navegador. Para isso, estamos usando o document.write(). Isto significa que estamos escrevendo no documento.

Na figura B.2 o script está dentro do elemento body, isso porque estamos escrevendo no documento.

 

A figura B.3 mostra o resultado da página no navegador.

Operadores Lógicos

Operadores lógicos são operadores normalmente utilizados em comandos condicionais, como if, for e while.

Operador lógico	Finalidade
==	Igual
!=	Diferente
>	Maior
<	Menor
>=	Maior ou igual
<=	Menor ou igual
&&	E
||	Ou

Operadores Matemáticos

Operador Matemático	Finalidade
+	Este operador serve para adição de valores e ao mesmo tempo, este operador pode ser usado na concatenação de strings. (concatenação = junção ou união). Exemplo: “programação” + “I” //retorna programaçãoI
-	Subtração de valores
*	Multiplicação de valores
/	Divisão de valores
%	Retorna o resto de uma divisão. Exemplo: 150 % 13 retornará 7 7 % 3 retornará 1

Expressões Simples com operadores

Operador MatemÁtico	Finalidade
+=	Concatena /adiciona ao string/valor já existente. Exemplo: x += y é o mesmo que x = x + y, da mesma forma podem ser utilizados: -= , *= , /= ou %=
++	Acrescenta 1 no valor Exemplo: X = 3; X++; // X valerá 4
--	Decrementa 1 no valor Exemplo: X = 3; X--; // X valerá 2

Conversão de tipos

Em expressões que envolvam valores numéricos e strings com o operador +, os valores numéricos serão convertidos implicitamente para strings. Exemplo:

X = "A resposta é " + 35; // retorna "A resposta é 35"
Y = 35 + " é a resposta"    // retorna "35 é a resposta"
Y = "37" + 7 // retorna 377

Assim, as vezes torna-se necessário fazer a conversão de valores que estão como string para que possamos fazer cálculos. Para converter explicitamente strings em números existem as funções predefinidas parseInt e parseFloat.

• parseInt: Converte uma string em um número inteiro.

Ex.:

num = "3A";
x = parseInt(num);       // x recebe 3

• parseFloat: Converte uma string em um número real.

Ex.:

z = parseFloat("3.15"); // z recebe 3.15

Instruções

A seguir veremos as principais instruções condicionais e de repetição. Veremos que seguem uma sintaxe muito parecida de outras linguagens.

• if
  

  A instrução if é utilizada quando é necessário tomar decisões. Sua estrutura é:

  • if (<expressão>)           <Instrução>

  A expressão é avaliada, caso seja true (verdadeira) a instrução é executada, caso contrário a instrução não é executada;

  Se o bloco de instrução possuir mais de uma instrução, deve-se usar início de bloco e fim de bloco, ou seja { }.

  • if (<expressão>){      <Instrução>    }

  Caso exista instrução a ser executada quando a expressão retornar false(falso), pode ser usar o else.

  • if (<expressão>){       <Instrução>    }else{      <instrução>    }

  
  
• switch

  O switch também pode ser utilizado para testes condicionais e é indicado para situações que exijam vários testes.

  Sintaxe:

  • switch (variavel_de_controle) {      case opção1 :          comandos ;          break;      case opção2 :          comandos ;          break;      default :          comandos; }

  É importante observar que a instrução break é utilizada ao final de cada opção. O break faz com que a execução pule para o fim do switch. Isto é importante, uma vez que quando uma opção verdadeira for encontrada o switch segue executando todas as instruções até o fim se não possuir um break.

• for
  

  Para situações em que precisamos realizar um bloco de instrução diversas vezes, uma opção de solução é o comando de repetição for. Vamos supor que você tenha que escrever em seu código (X)HTML os números de 1 até 20. Para tanto, você pode utilizar o laço for.

  Sintaxe:

  for (<inicialização>;<condição>;<atualização variável>){

       <instruções>

  }

  Veja na figura B.4 como fica a construção do laço for para mostrar os números de 1 a 20. Na linha 5 foi concatenado o elemento “<br/>” para quebrar a linha cada vez que mostra o valor da variável x.

  

  
  
• while

O while é semelhante ao comando for, porém às vezes o while é aplicado quando não sabemos determinar a quantidade de vezes que nosso laço vai executar as instruções. Neste laço, enquanto a condição do while for verdadeira as instruções serão executadas.

Sintaxe:

while(<condição>){
    
     <instruções>

}



Cuidado para que seu laço não seja infinito. A condição precisa ser falsa em algum momento para sair do laço ou pode usar o comando exit para sair do laço.


A figura B.5 apresenta o exemplo que mostra os valores de 1 até 10. A variável i é que controla o laço. Observe que dentro do comando que mostra o valor da variável i,  ela já é incrementada (i++).