Criando um script simples
As ferramentas de script
Diferente de muitas linguagens de programação, você não precisará de quaisquer softwares especiais para criar scripts de JavaScript.
A primeira coisa de que você precisará para trabalhar com JavaScript é um editor. Os scripts de JavaScript são armazenados em arquivos de texto simples, normalmente como parte de documentos de HTML. Qualquer editor que pode armazenar arquivos de texto ASCII servirá.
Para computadores Windows, eis alguns editores recomendados: ¾ Mircosoft FrontPage
¾ Bloco de Notas
Iniciando o script
Seu script, como a maioria dos programas de JavaScript, inicia com a tag <SCRIPT> de HTML. A tag <SCRIPT> diz ao navegador para começar tratando o texto como um script e a tag </SCRIPT>
retorna à HTML normal. Na maioria dos casos, você não pode utilizar instruções JavaScript exceto dentro das tags <SCRIPT>. A exceção são os handlers de evento, descritos mais adiante.
Para começar a criar o script, abra seu editor de texto e digite as tags <SCRIPT> de início e de fim, como mostrado abaixo:
<SCRIPT LANGUAGE="JavaScript1.1"> </SCRIPT>
Já que este exemplo utilizará alguns recursos que não estavam disponíveis no JavaScript 1.0, foi especificado o JavaScript 1.1 na tag <SCRIPT>. Esse script funcionará no Netscape 3.0 ou superior.
Adicionando instruções JavaScript
Vamos implementar um script para calcular o número de segundos que faltam para o ano 2001. É importante observar que o JavaScript armazena as datas em número de milisegundos desde o 1o de janeiro de 1970.
Armazenando dados em variáveis
Para armazenar o script, você utilizará uma variável para armazenar a data atual e outra para representar o começo do ano 2001
Para começar a escrever o script, adicione as seguintes linhas depois da primeira tag
<SCRIPT>.
now = new Date( );
Cada uma dessas instruções atribui um valor (uma data) a uma variável. A primeira instrução cria uma variável chamada now e armazena a data e a hora atuais nela. A segunda instrução cria uma variável chamada y2k1 e armazena o primeiro instante do ano 2001 nela.
.
Calculando o resultado
Como o JavaScript armazena datas em milisegundos; temos duas variáveis contendo números de milisegundos. Para calcular o tempo restante até o ano 2001, você simplesmente subtrai a data futura da data de hoje:
y2k1 - now
O resultado seria o número de milisegundos que falta até o ano 2001. Para converter este valor de milisegundos para segundos, basta inserir a seguinte linha de código
segundos = (y2k1 - now) / 1000;
Essa instrução diz ao computador para criar uma terceira variável denominada segundos e armazenar nela o resultado da expressão que vem à direita (Os parênteses da última instrução asseguram que a subtração acontecerá antes da divisão).
Criando uma saída
Você agora tem uma variável, segundos, que armazena o número de segundos até o ano 2001. O JavaScript inclui diversas maneiras de exibir as informações e uma das mais simples é a instrução de document.write.
A instrução de document.write exibe texto ou um número na tela. Já que seu programa de JavaScript será utilizado dentro de uma página da Web, a saída será exibida como parte da página. Para exibir o resultado, adicione a seguinte instrução:
document.write ("Segundos até o ano 2001: "+ segundos);
Note o sinal de (+) entre a mensagem de texto e a variável segundos. Nesse caso, ela diz ao navegador para combinar os dois valores em uma string de texto.
Adicionando o script a uma página da Web
Você agora tem um script completo que calcula um resultado e o exibe. Sua listagem deve estar parecida com:
<html> <head>
<title> O ano 2001</title> </head>
<body>
<h1> Listagem 2.2 - Contagem de segundos até o ano 2001 </h1> <hr>
<script language="JavaScript"> now = new Date();
y2k1 = new Date("Jan 01 2001 00:00:00"); segundos = (y2k1 - now) / 1000;
document.write ("Segundos até o ano 2001 : "+ segundos); </script>
</body> </html>
Salve-o com a extensão .htm ou .html.
Testando o script
Para testar seu script, você simplesmente precisa carregar o documento de HTML que criou em um navegador da Web. Inicie o Netscape e selecione Open Page do menu File. Pressione o botão Choose File, então procure seu arquivo de HTML. Uma vez que o selecionou, pressione o botão Open para visualizar a página, que deverá ficar da seguinte forma:
Modificando o script
Uma coisa que você provavelmente notou quando executou o script é que havia duas ou mais casas decimais listadas depois do número de segundos. Embora isso possa ser útil se você estiver interessado em precisão, não torna uma exibição muito atraente.
O JavaScript inclui um recurso que arredondará os números para você. Tudo o que você precisa fazer é usar a função Math.round, que arredonda as casas decimais e oferece um número inteiro, como mostrado abaixo:
segundos = Math.round(segundos);
Exercício 1: Já tendo calculado quantos segundos faltam até o ano 2001, calcule também quantos minutos faltam até o ano 2001, apresentando uma mensagem similar àquela apresentada para os segundos ( obs: a divisão em JavaScript é feita da seguinte forma: a= b / c; )
Como os programas em JavaScript funcionam
Utilizando funções
O programa que você viu era uma simples lista de instruções. O navegador inicia com a primeira instrução depois da tag <SCRIPT> e segue cada instrução na ordem até alcançar a tag </SCRIPT> de fechamento (ou encontrar um erro).
Embora esta seja uma abordagem simples e direta para scripts curtos, pode ser confuso ler um script enorme escrito dessa forma. Para tornar mais fácil para você organizar seu script, o JavaScript suporta funções.
Definindo uma função
Uma função é um grupo de instruções de JavaScript que pode ser tratada como uma entidade única. A fim de utilizar uma função, você deve primeiro defini-la. A listagem abaixo mostra um exemplo simples de uma definição de função:
function Sauda( ) {
alert("Saudações."); }
A listagem acima define uma função que exibe uma mensagem de alerta para o usuário. Esta inicia com a palavra-chave function. O nome da função é Sauda. Note os parênteses depois do nome da função. Como você aprenderá a seguir, o espaço entre eles não está sempre vazio.
As primeiras e últimas linhas da definição de função incluem chaves ( { e } ). Você as utiliza para incluir todas as instruções na função. O navegador utiliza as chaves para determinar onde a função inicia e termina.
Entre as chaves, essa função particular armazena uma única linha. Esta utiliza a função de alerta do JavaScript, que exibe uma mensagem de alerta. A mensagem conterá o texto “Saudações”.
Para tornar uma função mais flexível, você pode adicionar parâmetros, também conhecidos como argumentos. Estes são variáveis que são recebidas pela função toda vez que ela é chamada. Por exemplo, você pode adicionar um parâmetro chamado nome que diz para a função o nome da pessoa a saudar. A listagem abaixo mostra como ficaria a função com um argumento:
function Sauda(nome) {
alert("Saudações,"+nome); }
Para utilizar esta função, você deveria incluí-la em um documento de HTML. Tradicionalmente, o melhor lugar para uma definição de função é dentro da seção <HEAD> do documento, Já que as instruções na seção <HEAD> são executadas primeiro, isso assegura que a função seja definida antes de ser utilizada.
A listagem abaixo mostra a função Saúda embutida na seção de cabeçalho de um documento de HTML.
<html> <head>
<title>Declaração de Funções</title> <script language = "JavaScript">
//Abaixo temos a definição da função ‘Sauda’. function Sauda(nome) { alert("Saudações,"+nome); } </script> </head> <body>
Este é o corpo da função. </body>
</html>
Chamando a função
Você já definiu uma função e a colocou em um documento de HTML. Entretanto, se você carregar a listagem anterior em um navegador, notará que ela não faz absolutamente nada. A razão disso é que a função está definida – ou seja, pronta para ser utilizada – mas não foi utilizada ainda.
Fazer uso de uma função é na realidade chamar a função. Para chamar uma função, utilize o nome da função como uma instrução em um script. Você precisará incluir os parênteses e os valores para os parâmetros da função. Por exemplo, eis uma instrução que chama a função
Sauda:
Isso diz ao interpretador de JavaScript para transferir a execução do programa para a primeira instrução na função Sauda. Também passa o parâmetro “Edson” para a função. Esse valor será atribuído à variável dentro da função (nome).
Obs: As funções podem ter mais de um parâmetro. Para definir uma função com múltiplos parâmetros, liste
um nome variável para cada parâmetro, separado por vírgulas. Para chamar a função, especifique os valores para cada parâmetro, separado por vírgulas.
A listagem abaixo mostra um documento completo de HTML que inclui a definição de uma função e um segundo script no corpo da página que realmente chama a função. Para demonstrar a utilidade das funções, nós a chamaremos duas vezes para saudar duas pessoas diferentes.
<html> <head>
<title> Exemplo 1 - Declaração de Funções </title> <script language = "JavaScript">
//Esta é uma linha de comentário. //Abaixo temos a definição da função. function Sauda(nome) { alert("Saudações,"+nome); } </script> </head> <body>
<h1> Exemplo de chamada de função <h1> <script language = "JavaScript">
Sauda("Edson"); Sauda("Paulo"); </script>
</body> </html>
Esta listagem inclui um segundo conjunto de tags <SCRIPT> no corpo da página. O segundo script inclui duas chamadas de função para a função Saúda, cada uma com um nome diferente. Agora que você tem um script que realmente faz algo, tente carrega-lo em um navegador. Você deverá ver algo como mostrado abaixo:
Note que a segunda mensagem de alerta não é exibida até que você pressione o botão de OK no primeiro alerta. Isso é porque o processamento de JavaScript é parado enquanto os alertas são exibidos.
Retornando um valor
Embora a função que você acabou de criar exiba uma mensagem para o usuário, as funções também podem retornar um valor para o script que as chamou. Isso permite que as funções sejam utilizadas para calcular valores. Como um exemplo, você pode criar uma função que calcula a média de quatro números
Sua função deve iniciar com a palavra-chave function, o nome da função e os parâmetros que ela aceita. Utilizaremos os nomes de variável valor1, valor2, valor3 e valor4 para os quatro números cuja média queremos calcular. Eis a primeira linha da função:
function Media(valor1, valor2, valor3, valor4) {
A seguir, a função precisa calcular a média dos quatro números. Você pode calcular isso somando os números, depois dividindo pela quantidade de números (neste caso, 4). Assim sendo, a próxima linha da função ficaria da seguinte forma:
media_calculada = (valor1+valor2+valor3+valor4)/4;
Essa instrução cria uma variável chamada media_calculada e calcula o resultado adicionando os quatro números, depois dividindo por 4. (Os parênteses são necessários para dizer ao JavaScript executar a adição antes da divisão.)
Para enviar esse resultado de volta ao script que chamou a função, você utiliza a palavra-chave return. E a última parte da função fica da seguinte forma:
return media_calculada; }
A listagem abaixo mostra o script completo com chamada da função e passagem de parâmetros.
<html> <head>
<title> Exemplo 2 - Declaração de Funções com parâmetros </title> <script language = "JavaScript">
//Esta é uma linha de comentário.
//Abaixo temos a definição de uma função com quatro parâmetros. function Media(valor1, valor2, valor3, valor4) {
media_calculada = (valor1+valor2+valor3+valor4)/4; return media_calculada; } </script> </head> <body>
<h1> Exemplo de chamada de função com retorno de valor </h1> <script language="JavaScript">
//A linha abaixo chama a função Media e retorna a média calculada para a variável resultado. resultado = Media(3,4,5,6);
document.write ("<h3><i>Resultado = "+ resultado+"</i></h3>"); </script>
<p> </p> </body> </html>
Utilização da função prompt
Essa função é semelhante a função alert, mas solicita ao usuário uma entrada. Utiliza-se esta função quando se deseja que o usuário entre com algum tipo de dado. Por exemplo, a listagem abaixo mostra uma script onde o usuário digita algo e o que ele digitou é apresentado no vídeo.
<html> <head>
<title> Exemplo de Utilização da Função Prompt </title> </head>
<body>
<h1> Exemplo de utilização da Função Prompt </h1> <script language="javascript">
coisa = prompt ("Digite algo e pressione a tecla <ENTER>"); document.write("Você digitou "+ coisa);
</script> </body> </html>
A tela de saída pode ser algo da seguinte forma:
Obs: Caso você esteja lendo um número, pode precisar usar a função parseInt ( ) para converter uma string em um número inteiro ou a função parseFloat( ) para converter uma string em um número com ponto flutuante.
Exemplo:
numero = parseInt(prompt ("Entre com um número”));
Exercício 2: Utilizando o que você aprendeu da função prompt, modifique o script Exemplo 1 - Declaração de Funções , de forma que os nomes sejam digitados pelo usuário no teclado. Exercício 3: Utilizando o que você aprendeu da função prompt, modifique o script Exemplo 2 - Declaração de Funções com parâmetros , de forma que os números sejam digitados pelo usuário no teclado.
Exercício 4: Modifique o script Exemplo 2 - Declaração de Funções com parâmetros , de forma que, além da função Media já existente, sejam criadas mais duas funções: uma que calcule a soma dos quatro números e outra que calcule o produto dos quatro números. Neste script, os quatro números também deverão ser digitados pelo usuário no teclado ( usar a função prompt ).
