Iniciando no Javascript

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 :-)

Pingar o BlogBlogs

Compartilhe: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Live
  • NewsVine
  • Rec6
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
  • YahooMyWeb
Tags: html, Iniciando, Javascript

Related posts

Post a Comment