Entendendo validações e operações aritméticas com Javascript
Nesse tutorial abordo alguns temas da linguagem Javascript, tais como: variáveis, operadores, caixas de diálogo, comando de impressão, funções, eventos e conversão de tipos.
[ Hits: 25.261 ]
Por: jose claudio em 04/08/2010
Funções, eventos e conversão de tipos
Funções
Funções são trechos de códigos que podem ser acionados através de uma chamada ou através de um evento.Podemos chamar uma função em qualquer ponto da página e se a mesma estiver em um arquivo .js, podemos chamá-la em qualquer página que faz referência ao arquivo Javascript.
As funções geralmente são criadas em um arquivo .js ou no cabeçalho (<head>) do documento html.
Uma função pode ou não retornar uma resposta para o ponto em que foi chamada, caso necessite de um retorno (resposta), utilizamos o comando return.
<script language="javascript">
function nomeDoMetodo(param1, param2, ....)
{
//instruções
return valor; // opcional, usado somente quando necessário
}
</script>
function nomeDoMetodo(param1, param2, ....)
{
//instruções
return valor; // opcional, usado somente quando necessário
}
</script>
- Palavra-chave utilizada para criar a função Nome do método
- Parâmetros necessários para a função ser processada ((param1)(param2)(opcional))
- Corpo da função, sempre delimitado por chaves {...}
- Comando return, usado quando precisamos retornar uma resposta da função.
Exemplos básicos de funções:
<script language="javascript">
// Função soma, recebe dois parâmetros (a , b), efetua a soma entre eles e imprime na página, pulando uma linha com o BR.
function soma(a , b)
{
document.write((a+b)+"<br/>");
}
// Função lerNome, não recebe parâmetros, lê um nome através da janela de prompt e depois retorna esse nome (return) para o ponto em que foi chamada.
function lerNome()
{
var nome;
nome = prompt("Digite seu nome","");
return nome;
}
//chama a primeira função
//chama a função soma duas vezes com valores diferentes para a e b.
soma(2,2);
soma(3,4);
//chama a segunda função
//chama a função lerNome, como a função retorna um valor, devemos atribuir este retorno para uma variável, para que posteriormente possamos manipular essa informação.
var resp;
resp= lerNome();
alert(resp);
</script>
// Função soma, recebe dois parâmetros (a , b), efetua a soma entre eles e imprime na página, pulando uma linha com o BR.
function soma(a , b)
{
document.write((a+b)+"<br/>");
}
// Função lerNome, não recebe parâmetros, lê um nome através da janela de prompt e depois retorna esse nome (return) para o ponto em que foi chamada.
function lerNome()
{
var nome;
nome = prompt("Digite seu nome","");
return nome;
}
//chama a primeira função
//chama a função soma duas vezes com valores diferentes para a e b.
soma(2,2);
soma(3,4);
//chama a segunda função
//chama a função lerNome, como a função retorna um valor, devemos atribuir este retorno para uma variável, para que posteriormente possamos manipular essa informação.
var resp;
resp= lerNome();
alert(resp);
</script>
Eventos
Os eventos são ações que o usuário faz em uma página e que são associados geralmente as funções do Javascript ou as funções que nós criamos em nossos códigos.Com a utilização dos eventos, podemos criar páginas mais dinâmicas.
Principais eventos:
Obs.: Existem outros eventos para mouse e alguns para tratarmos o teclado, neste artigo, citamos somente os principais, porém você poderá encontrar uma referência completa em livros ou em alguns sites da web.
| Evento | Quando é acionado |
| onload | Sempre que a página é carregada ou recarregada. |
| onunload | Sempre que a página é trocada ou fechada. |
| onfocus | Quando um elemento recebe o foco. |
| onblur | Sempre que um campo de formulário perde o foco. |
| onchange | Sempre que um campo tiver seu conteúdo alterado. |
| onclick | Sempre que um elemento receber um clique. |
| onmouseover | Quando o mouse fica sobre o elemento. |
| onmouseout | Quando o mouse for retirado de cima do elemento. |
| onselect | Sempre que um conteúdo de um campo é selecionado. |
| onsubmit | Quando enviamos (botão submit) um formulário. |
Exemplo:
<html>
<head>
<script language="javascript">
function lerNome()
{
var nome;
nome = prompt("Digite seu nome","");
alert("Seu nome é: "+ nome);
}
</script>
</head>
<body>
<input type="button" value="Ler o nome" onclick="lerNome()" />
</body>
</html>
<head>
<script language="javascript">
function lerNome()
{
var nome;
nome = prompt("Digite seu nome","");
alert("Seu nome é: "+ nome);
}
</script>
</head>
<body>
<input type="button" value="Ler o nome" onclick="lerNome()" />
</body>
</html>
Conversão de tipos
Como comentado anteriormente, quando utilizamos a caixa de prompt para entrada de dados do usuário, ou até mesmo através de campos de texto de formulários, os valores lidos são sempre textos.Caso seja necessário realizar alguma operação matemática com os valores lidos, precisamos inicialmente convertê-los em números, para isso temos duas funções em Javascript que convertem para inteiro ou para float.
Para converter um texto em número inteiro utilizado a função parseInt. Sintaxe:
// Valor a ser convertido.
variável = parseInt(valor [, base]);
// Base da conversão (opcional).
variável = parseInt(valor [, base]);
// Base da conversão (opcional).
Para converter um texto em número real (float), utilizamos a função parseFloat. Sintaxe:
variável = parseFloat(valor);
Valor a ser convertido.
Exemplo de conversão de tipos:
<script language="javascript">
function soma(a , b)
{
alert(a + " + " + b + " = " + (a+b));
}
//modo 1
var a;
var aux = prompt("Digite o valor de a","");
a = parseInt(aux);
//modo 2
var b = parseInt(prompt("Digite o valor de b",""));
//chama a função
soma(a,b);
</script>
function soma(a , b)
{
alert(a + " + " + b + " = " + (a+b));
}
//modo 1
var a;
var aux = prompt("Digite o valor de a","");
a = parseInt(aux);
//modo 2
var b = parseInt(prompt("Digite o valor de b",""));
//chama a função
soma(a,b);
</script>
Pessoal, gostaria de agradecer a todos que já contribuíram com o VOL e que continuem ajudando ao próximo sempre. Estou sempre online no MSN.
MSN: claudio [] linuxtec.com.br
Site: www.linuxtec.com.br
Abraços e bom estudo a todos!
Páginas do artigo
1. Entendendo Javascript2. Variáveis e operadores
3. Caixas de diálogo e comando de impressão
4. Funções, eventos e conversão de tipos
Outros artigos deste autor
Nenhum artigo encontrado.
Leitura recomendada
CSS - Manual de Estilo (parte 2)
Extensões imperdíveis para quem usa o Git (e o GitHub) no Brackets
Servidor LAMP no Linux Mint e Ubuntu
JavaScript - Programação orientada a objetos
Comentários
[1] Comentário enviado por psfdeveloper em 25/08/2010 - 12:44h
Caro José,
eu programo há bastante tempo em Javascript e vi a evolução recente da linguagem, de uma ferramenta para pequenos programas web, para uma linguagem completa de programação utilizada em grandes projetos (Como o navegador Firefox, implementado em javascript e C++ sobre uma API imensa baseada no Gecko e em uma linguagem de interface gráfica chamada XUL (ver https://developer.mozilla.org/en-US/).
O Google levou o Javascript para um novo patamar, ao programar aplicativos como o GMail e o Google Docs em HTML e Javascript. Esses sistemas são longe de serem pequenos ou simples scripts.
O Javascript pode ser utilizado para fazer aplicativos stand-alone (usando o XULRunner, o SpiderMonkey/TraceMonkey ou o Rhino, o Javascript desenvolvido sobre a plataforma Java).
Mas nada disso tira o mérito de sua explicação, principalmente quanto à comparação com a linguagem Java, cuja proposta é completamente diferente.
A única coisa que eu possa, realmente, discordar é que Javascript "simule" programação orientada a Objetos. Uma linguagem Orientada a Objetos não é apenas uma que tenha uma palavra reservada "class", como o Java ou o C++, mas uma que possua ferramentas necessárias para a programação orientada a objetos. Quando você diz que o Javascript não é orientada a objetos, é porque o Javascript é uma linguagem que não força utilização de determinado paradigma de programação.
Javascript é considerada Orientada a Objetos em sentido estrito e suporta totalmente o OOP através do conceito de "protótipos", como pode ser visto no link http://en.wikipedia.org/wiki/Prototype-based . Além disso, Javascript possui poderosas capacidades dinâmicas que podem classificá-la como uma linguagem funcional, par a par com o Lisp.
Infelizmente, os maiores usuários de JavaScript são designers que possuem conhecimento restrito de programação adequado ao trabalho deles, que é fazer design, não programar. Acho que a internet seria muito melhor se mais programadores se aproximassem do JavaScript ou se mais Designers se tornassem programadores efetivamente.
Parabéns pelo seu artigo.
Caro José,
eu programo há bastante tempo em Javascript e vi a evolução recente da linguagem, de uma ferramenta para pequenos programas web, para uma linguagem completa de programação utilizada em grandes projetos (Como o navegador Firefox, implementado em javascript e C++ sobre uma API imensa baseada no Gecko e em uma linguagem de interface gráfica chamada XUL (ver https://developer.mozilla.org/en-US/).
O Google levou o Javascript para um novo patamar, ao programar aplicativos como o GMail e o Google Docs em HTML e Javascript. Esses sistemas são longe de serem pequenos ou simples scripts.
O Javascript pode ser utilizado para fazer aplicativos stand-alone (usando o XULRunner, o SpiderMonkey/TraceMonkey ou o Rhino, o Javascript desenvolvido sobre a plataforma Java).
Mas nada disso tira o mérito de sua explicação, principalmente quanto à comparação com a linguagem Java, cuja proposta é completamente diferente.
A única coisa que eu possa, realmente, discordar é que Javascript "simule" programação orientada a Objetos. Uma linguagem Orientada a Objetos não é apenas uma que tenha uma palavra reservada "class", como o Java ou o C++, mas uma que possua ferramentas necessárias para a programação orientada a objetos. Quando você diz que o Javascript não é orientada a objetos, é porque o Javascript é uma linguagem que não força utilização de determinado paradigma de programação.
Javascript é considerada Orientada a Objetos em sentido estrito e suporta totalmente o OOP através do conceito de "protótipos", como pode ser visto no link http://en.wikipedia.org/wiki/Prototype-based . Além disso, Javascript possui poderosas capacidades dinâmicas que podem classificá-la como uma linguagem funcional, par a par com o Lisp.
Infelizmente, os maiores usuários de JavaScript são designers que possuem conhecimento restrito de programação adequado ao trabalho deles, que é fazer design, não programar. Acho que a internet seria muito melhor se mais programadores se aproximassem do JavaScript ou se mais Designers se tornassem programadores efetivamente.
Parabéns pelo seu artigo.
Patrocínio
Site hospedado pelo provedor RedeHost.
Destaques
Artigos
Enviar mensagem ao usuário trabalhando com as opções do php.ini
Meu Fork do Plugin de Integração do CVS para o KDevelop
Compartilhando a tela do Computador no Celular via Deskreen
Como Configurar um Túnel SSH Reverso para Acessar Sua Máquina Local a Partir de uma Máquina Remota
Configuração para desligamento automatizado de Computadores em um Ambiente Comercial
Dicas
Compartilhamento de Rede com samba em modo Público/Anônimo de forma simples, rápido e fácil
Cups: Mapear/listar todas as impressoras de outro Servidor CUPS de forma rápida e fácil
Criando uma VPC na AWS via CLI
Tópicos
xubuntu sem sons de eventos (3)
Erro ao iniciar serviço samba4 como novo dc em um ambiente com ad (9)
Dificuldade para renderizar vídeo no kdenlive (5)
Top 10 do mês
-
Xerxes
1° lugar - 66.635 pts -
Fábio Berbert de Paula
2° lugar - 49.384 pts -
Renato Michnik de Carvalho
3° lugar - 27.289 pts -
Buckminster
4° lugar - 17.720 pts -
Mauricio Ferrari
5° lugar - 15.012 pts -
Alberto Federman Neto.
6° lugar - 13.963 pts -
Diego Mendes Rodrigues
7° lugar - 13.727 pts -
Daniel Lara Souza
8° lugar - 13.519 pts -
edps
9° lugar - 11.436 pts -
Alessandro de Oliveira Faria (A.K.A. CABELO)
10° lugar - 10.962 pts
Scripts
A maior comunidade GNU/Linux da América Latina! Artigos, dicas, tutoriais, fórum, scripts e muito mais. Ideal para quem busca auto-ajuda.
Site hospedado por:
