março 15, 2008 – 12:33 am
Neste tutorial falaremos um pouco sobre Javascript.
O Javascript
Há pouco tempo atrás o Javascript era uma linguagem que tinha muito má fama. Era sub-utilizada pelos “desenvolvedores” da época. Normalmente era aplicada para criar pop-ups insistentes, questionários sem fundamento algum do tipo de “Diga seu nome” e coisas mais que não serviam para nada além de te encher o saco. Desculpa o termo, mas era assim que você falava mesmo. Graças a Deus este tipo de uso tem se extingüido da web e hoje raramente é encontrado um site assim.
O Javascript serve para executar comandos e é interpretado no browser do visitante sem o servidor envolver-se. Com criatividade seu uso pode ser muito satisfatório.
Dica de possíveis problemas:
- Para que você consiga utilizar o javascript certifique-se de que ele está ativado em seu browser. Normalmente está;
- Um pequeno erro basta para atrapalhar a execução do código. O javascript diferentemente do PHP não avisa qual foi o erro ocorrido nem onde ocorreu;
- Existem algumas diferenças de interpretação do código de browser para browser. Normalmente testo meus códigos no Firefox e Internet Explorer 6. Dica: Sempre faça o mesmo em quantos browsers for possível;
- Por hora é isso.
Iniciando:
Para este tutorial usaremos uma página html padrão como a do post Misturando HTML com PHP.
O código javascript na sua página deve ficar entre <script> e </script>. Na sua página ficaria assim:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <!--codificação da página-->
<title>Seu titulo</title>
</head>
<script type="text/javascript" language="javascript">
//aqui seu código javascript;
</script>
<body>
<!--aqui fica a parte visivel da sua pagina-->
<? echo "Isto foi escrito via PHP";?>
</body>
</html>
Vamos dar mais um passo, dentro das tag script escreva:
//As frases após as duas barras não influenciam no código. É apenas um comentário feito no código
function somar(valor1,valor2){
var resultado=0; //define a variável resultado inicialmente como zero
resultado = eval(valor1+'+'+valor2); //resultado recebe o valor da soma de valor1+valor2
alert("Resultado da soma é "+resultado); //emite uma mensagem informando o resultado da soma
}
Salve o arquivo e repare em uma coisinha.. Quando somamos usamos ‘+’ para somar os dois números a sua volta, mas quando vamos emitir a mensagem existe um ‘+’ também e não serve para somar. Na primeira ocorrência o ‘+’ é um operador aritmético utilizado para somar e na segunda o ‘+’ tem função de concatenar, quer dizer, juntar uma coisa (string) com outra. O ‘eval’ interpreta uma string onde nela está escrita a expressão aritmética é como se escrevessemos eval(”1 + 1″). O ‘alert’ é a função que emite uma mensagem de alerta na tela.
(continuando…)
A seguir entre as tags body da sua página vamos adicionar dois campos de textos. Os valores adicionados a eles serão atribuídos respectivamente a valor1 e valor2 no código javascript após clicar no botão “Somar” da página. Lembre que o código a seguir fica entre as tags body:
<input type="text" name="valor1">
<input type="text" name="valor2">
<input type="button" value="Somar" onclick="somar(valor1.value,valor2.value);">
Testando:
Para testar você precisa apenas abrir o arquivo no seu browser, digitar os valores numéricos nos dois campos e clicar no botão “Somar”. Se tudo der certo aparecerá para você uma mensagem informando o resultado da soma.
Conseguiu? Um probleminha encontrado..
No Internet Explorer 6 o código funcionou, mas no Firefox não. INCOMPATIBILIDADE!
É um bom motivo para você pesquisar um pouquinho e fazer novos testes assim como estou fazendo.
Acompanhe este post para conferir as atualizações e correções.
Finalizando
Da mesma forma como você somou utilizando o operador ‘+’ você pode efetuar outros tipos de operações seguindo o mesmo formato deste tutorial, como subtração, multiplicação, divisão e mais outras.
Se seu teste não dá certo, se existe erro no meu código ou incompatibilidade entre browsers (Foi testado no Internet Explorer) deixa um comentário, assim como para dúvidas e sugestões.
Um Abraço!
- Jonas Ruth 
Compartilhe:
These icons link to social bookmarking sites where readers can share and discover new web pages.
Posted in Iniciando, Javascript, html | No Comments »
