JAVASCRIPT- PARTE 6

 

Objetivos:

 

Essa é a sexta parte de uma série de tutoriais sobre JavaScript básico. Na quinta parte deste tutorial você aprendeu alguns princípios básicos de programação em JavaSript, como definir e utilizar funções, aprendeu alguns princípios básicos de tratadores de eventos.

 

Pré-requisitos: Para acompanhar a lição você deve estudar as primeiras partes desse tutorial .

 

Introdução

 

Nessa tutorial você aprenderá alguns recursos de scripts específicos e técnicas freqüentemente usadas em programas JavaScript . Irá aprender a focalizar variáveis e expressões , atribuindo nomes e declarando variáveis .

 

Utilizando Variáveis

 

No decorrer desses turoriais você aprendeu a utilizar algumas variáveis. Contudo, há alguns aspectos das variáveis que ainda não foi abordado.

 

As variáveis são “caminhões” identificados que podem armazenar dados como números, string texto ou objetos, como você já aprendeu cada variável tem um nome. Mais o que você não sabe é que a regras especificas que devem seguir quando escolher um nome de variável:

1. Os nomes de variável podem incluir letras do alfabeto, tanto letras minúsculas como maiúsculas. Eles também podem incluir os dígitos 0-9 e o caractere sublinhado .
   
2. Os nomes de variável não podem incluir espaços nem quaisquer outros caracteres de pontuação.
   
3. O primeiro caractere do nome da variável só pode ser uma letra ou um sublinhado.
   
4. Os nomes de variável diferenciam letras maiúsculas de minúsculas exemplo : total media e Total Media são nomes de variáveis diferentes.
   
5. Não há limite oficial no comprimento de nomes de variáveis , mas eles devem se ajustar dentro de uma linha

Utilizando essas regras , você será capaz de criar nomes de variáveis válidas. Outra dica é que você pode escolher utilizar tanto nomes amigáveis e fáceis de ler como um completamentes criptografados.

 

Utilizando variáveis locais e globais

 

Algumas linguagens de computador exigem que declare uma variável antes de utiliza-la. O JavaScript inclui a palavra-chave var , que pode ser utilizada para declarar uma variável. Você pode omitir var em muitos casos ou ainda declara-la na primeira vez que você atribuir um valor a ela.

 

Para entender melhor onde declarar uma variável , você precisara entender o conceito de escopo. O escopo de uma variável é a área do script em que a variável pode ser utilizada. Há dois tipos de variáveis :

• Variáveis globais » Têm o script inteiro e outros scripts no mesmo documento de HTML como seu escopo. Elas podem ser utilizadas em qualquer lugar , mesmo dentro de funções.

• Variáveis locais » Têm uma única função como seu escopo. Elas podem ser utilizadas somente dentro da função em que foram criadas.

Para criar uma variável global, você a declara no script principal , fora de quaisquer funções. Você pode utilizar a palavra-chave var para declarar a variável, como nesse exemplo :

 

var numero= 25 ;

 

Essa instrução declara uma variável chamada numero e atribui um valor de 25. Se essa instrução for utilizada fora de funções , ela cria uma variável global. A palavra-chave var é opcional nesse caso, podendo você simplesmente declarar da seguinte forma :

 

numero=25;

 

 Nota: Antes de você obter o habito de omitir a palavra-chave var, certifique-se de entender exatamente quando ela é exigida. Por isso é bom sempre utilizar a palavra-chave var, assim você evitará erros e tornará seu script mais fácil de ler. Nos exemplos dos tutoriais anteriores a maioria das variáveis que utilizamos eram globais.

 

Uma variável local pertence a uma função particular. Qualquer variável que você declara ou utilizar pela primeira vez em uma função é uma variável local. Por exemplo, as variáveis na lista de parâmetro da função são variáveis locais.

 

Para certifica-se de que está criando uma variável local dentro de uma função, você pode utilizar a palavra-chave var. Isso força o JavaScript a criar uma variável local, mesmo se existir uma variável global com o mesmo nome.

 

Para entender melhor os tipos de variáveis e declarações , vamos fazer um exemplo. Este exemplo é uma versão modificada do exemplo AloMundo do tutorial anterior:

 

<HTML>

<HEAD>

<TITLE>Definindo Variáveis</TITLE>

<SCRIPT>

 

var nome1= “Carla”;

var nome2=“Joel”;

function AloMundo(who) { alert ("Alô Mundo,"+who);

var nome2=” JavaScript”;

}

 

</SCRIPT>

</HEAD>

<BODY>

<H1> Exemplo de Variável </H1>

<P> Saudação</P>

<SCRIPT>

AloMundo(nome1);

AloMundo(nome2);

</SCRIPT>

</BODY>

</HTML>

 

O script do exemplo acima utiliza as seguintes variáveis :

• nome1 e nome2 são variáveis globais definidas no cabeçalho;

• who é uma variável local criada no parâmetro de lista da função AloMundo( );

• A função AloMundo( ) cria uma variável local denominada nome2. Já que a palavra-chave var é utilizada, isso não afeta a variável global nome2 , se afetasse, o nome na Segunda saudação mudaria;

Nota: Se você acha que ter duas variáveis com o mesmo nome é confuso , você tem razão . Para evitar isso, é melhor utilizar nomes únicos para todas as variáveis .

 

Se você observar o script , vai notar que as variáveis globais são declaradas dentro do cabeçalho do documento de HTML. Na realidade você pode declarar variáveis em qualquer script no documento, mas o cabeçalho é um bom lugar para variáveis globais porque ela é executada primeiro. Se você tentar utilizar uma variável antes de ela ser declarada ou de um valor lhe ser atribuído, ela conterá valor nulo.

 

Você agora deve entender a diferença entre variáveis locais e globais. Se você estiver ainda um pouco confuso, não se preocupe se você utilizar a palavra- chave var toda vez, você quase sempre terminara com o tipo de variável certa.

 

Atribuindo valores a variáveis

 

Como você aprendeu nos tutoriais anteriores você pode utilizar o sinal de igual para atribuir um valor a uma variável. Por exemplo:

 

i = 40;

 

Nessa instrução atribuir o valor 40 à variável i . Você pode utilizar qualquer expressão à direita do sinal igual, incluindo outras variáveis, como por exemplo

 

i=i+1

 

Nessa instrução foi utilizada uma sintaxe para adicionar um a uma variável.

 

Através de instruções você pode incrementar ou decrementar variáveis , o JavaScript inclui dois tipos de abreviação para essa sintaxe: A primeira utilizar o operador + = , por exemplo :

 

i+=1;

 

De forma semelhante, você pode subtrair um numero de uma variável utilizando o operador - =;, por exemplo

 

i-=1;

 

Se você ainda achar que é muito para digitar, o JavaScript também inclui operadores de incremento e decremento , ++ e --. Essa instrução adiciona um ao valor de i :

 

i++;

 

De forma semelhante, essa instrução subtrai um do valor de i:

 

i--;

 

Você também pode utilizar o operador ++ ou – antes do nome de uma variável, como em ++i. Entretanto, estes não são idênticos. A diferença é quanto o incremento ou decremento acontece :

• Se o operador está depois do nome da variável, o incremento ou decremento acontece depois de a expressão atual ser avaliada.

• Se o operador esta antes do nome da variável, o incremento ou decremento acontece antes de a expressão atual ser avaliada.

Essa diferença é somente uma questão quando você utiliza a variável em uma expressão e incrementa ou decrementa na mesma instrução. Como por exemplo, suponha que você atribuiu à variável i o valor 40, temos as seguintes instruções com efeitos diferentes:

 

alert( i++);

alert(++i);

 

Nota: Esse operadores são para sua conveniência. Se fizer mais sentido para você inserir i=i+1,faça isso.

 

Tipos de dados em JavaScript

 

Em algumas linguagens, você tem que especificar os tipos de dados que uma variável armazenará: por exemplo , um numero ou uma string. No JavaScript, você não precisa especificar um tipo de dados exceto em casos raros, porém você deve conhecer os tipos de dados que o JavaScript pode tratar:

• Números: O JavaScript suporta tanto inteiros como números de ponto flutuante , como por exemplo: 1,4 .

• Valores booleanos ou lógicos: Estes podem Ter um de dois valores: verdadeiro ou falso. Esses tipos de dados é útil para indicar se uma certa condição é verdadeira.

• String: Estas consistem em um ou mais caracteres de texto, como por exemplo : “Meu nome é Bruno”.

• Valor nulo : Representada pela palavra-chave null. Esse é o valor indefinido de uma variável. Por exemplo, a instrução document.write(resultado) resultara nesse valor se a variável resultado não foi previamente utilizada ou definida.

Embora o JavaScript monitore o tipo de dados atualmente armazenado em cada variável, ele não impede você de alterar os tipos intermediários. Por exemplo, suponha que você declarou uma variável atribuindo-lhe um valor:

 

resultado= 3;

 

Essa instrução declara uma variável chamada resultado e lhe atribui o valor 3. Essa é variável numérica. Agora suponha que você alterou o valor total:

 

resultado= JavaScript;

 

Isso atribui um valor de string à resultado. JavaScript não exibirá um erro quando essa instrução executar , pois ela é perfeitamente valida , embora provavelmente não seja um resultado muito útil.

 

Nota : Embora esse recursos do JavaScript seja conveniente , ela também pode tornar fácil para se cometer equívocos. Por exemplo, se a variável resultado for mais tarde utilizada em um calculo matemático, o resultado da operação será invalido, o JavaSript não o adverte de que você cometeu esse equivoco.

 

Convertendo entre tipos de dados

 

O JavaScript trata conversões entre tipos de dados para você sempre que ele pode. Por exemplo, você já utilizou instruções como essa :

 

document.write(“ O Resultado é “+resultado);

 

Essa instrução imprime uma mensagem como “ o resultado é 3 “. Já que a função de document.write trabalha com strings, o interpretador de JavaScript automaticamente converte quaisquer não-strings na expressão nesse caso, o valor de resultado, em string antes de desempenhar a função.

 

Isso funciona igualmente bem com valores de ponto flutuante e booleanos. Entretanto, há algumas situações onde não funcionara. Por exemplo, a seguinte instrução funcionará bem se o valor de resultado for 40.

 

Valor=resultado/3 ;

Entretanto , a variável resultado também pode conter uma string, nesse caso, a instrução acima resultaria em um erro.

 

Em algumas situações, você pode terminar com uma string contendo um numero e precisar convertê-la em uma variável numérica regular. O JavaScript incluir duas funções para esse propósito que já foi vista nos tutoriais anteriores :

• parseInt ( ): converte uma string em um numero inteiro.

• parseFloat( ) : converte uma string em um numero de ponto flutuante.

As duas funções lerão um numero desde o inicio da string e retornarão uma versão numérica . Por exemplo, essa instrução converte a string “30 bebidas “em um numero :

 

stringvar= “30 bebidas”

numvar= parseInt(stringvar);

 

Depois que essas instruções executarem, a variável numvar armazena o numero 30. A parte não-numerica da string é ignorada.

 

Nota: Essas funções procuram um numero do tipo apropriado no começo da string. Se um número válido não for localizado, a função retorna a string “NaN”, o que significa não um numero ( Not a Number)

 

Armazenando dados do usuário em variáveis

 

Uma utilização comum de variáveis é armazenar as informações que vêm do usuário. Como exemplo, você agora criará um script que solicita informações do usuário e criará um documento de HTML contendo essas informações.

 

Nesse script, criaremos uma home page personalizada para o usuário. Você utilizará a função prompt para solicitar cada parte das informações, lembre-se que você já utilizou essa função nos tutoriais anteriores. Essa função é semelhante a alert, mas solicita ao usuário uma entrada.

 

No script, você solicitara um primeiro nome, um sobrenome e um titulo para a pagina. Essas instruções solicitam três variáveis :

 

nome=prompt(“Digite seu primeiro nome:”);

sobrenome= prompt(“Digite seu sobrenome:”);

titulo= prompt(“Digite o titulo da pagina:”);

 

Você agora pode utilizar o conteúdo das variáveis para personalizar o documento de HTML . Inicie com o titulo que o usuário inseriu :

 

document.write(“<H1>”+ titulo+”</H1>”);

 

Essa instrução adiciona o titulo da pagina , incluindo em :

 

document.write(“<H2> By”+ nome+” “+sobrenome+”</H2>”);

 

Isso inicia com uma tag <H2>, seguindo pela palavra “By”, o primeiro nome, um espaço, o sobrenome e a tag </H2> de fechamento.

 

Para completar esse script, adicione as tags < SCRIPT> normais e uma estrutura HTML. O exemplo abaixo mostra o documento final de HTML.

 

< HTML>

<HEAD>

<TITLE> Construindo uma pagina </TITLE>

</HEAD>

<BODY>

<SCRIPT>

nome=prompt(“Digite seu primeiro nome:”);

sobrenome= prompt(“Digite seu sobrenome:”);

titulo= prompt(“Digite o titulo da pagina:”);

document.write(“<H1>”+ titulo+”</H1>”);

document.write(“<H2> By ”+ nome+” “+sobrenome+”</H2>”);

</SCRIPT>

<P> Esta página esta em construção.</P>

</BODY>

</HTML>

 

Para testar esse script, carregue o documento de HTML em um navegador. Os três itens lhe serão solicitados, um por vez. Depois que você inserir todos os dados, a página completa é exibida. A pagina final deve se parecer como da figura abaixo:

 

Conclusão

 

Nessa parte do Tutorial você aprendeu sobre as variáveis e como o JavaScript as trata. Aprendeu como atribuir nomes a variáveis utilizando certas regras , como declara-las e as diferenças entre variáveis globais e locais, também aprendeu como armazenar dados do usuário , tanto inicio a construção de uma home page.

 

Você explorou os tipos de dados suportados pelo JavaScript e como convertê-los e a criar expressões utilizando variáveis em literais. No próximo tutorial você ira ver como criar e manipular mais dois de tipos de variáveis muito utilizada no JavaScript.