Exercícios JavaScript

Objetivos

Estes exercícios orientam a prática de JavaScript

Exemplo: Imprimindo a hora

Este script mostra a hora do computador no browse:
<HTML>
 <HEAD>
  <TITLE>Hora certa</TITLE>
 </HEAD>
<BODY>
<SCRIPT TYPE="text/ecmascript" LANGUAGE="JavaScript">
<!--
today = new Date();
document.write("A data e hora agora é " + 
today.toString())
//-->
</SCRIPT>
</BODY>
</HTML>

Tutorial: Associando eventos a botões de formulário

No primeiro passo, vamos criar um formulário com apenas um botão
<HTML>
<HEAD>
<TITLE> Botão de teste </TITLE>
</HEAD>
<BODY>

<FORM>
<INPUT type="button" name="botao" value="teste">
</FORM>

</BODY>
</HTML>
Associe um evento ao formulário. O evento onclick e' associado "a função Dê um nome ao formulário "meuform".
<FORM name="meuform">
<INPUT type="button" name="botao" value="teste" onclick="iteste()">
Insira a função no cabeçalho do documento. Esta função irá reescrever o código HTML do documento utilizando o método write()
<SCRIPT type="text/javascript">
function iteste() {
 document.write("<h1>Oi<h1><p>Após o <i>clique</i>, o documento foi reescrito.<br> O título também!")
 document.title="Novo teste"
}
</SCRIPT>

Tutorial: Abrindo uma janela pop-up

Utilizando o DOM, pode-se abrir uma janela quando o documento é carregado. Para isto utiliza-se o método open() do objeto window.
var win=window.open("css1.html")
A função é ativada quando a janela é carregada. Isto é especificado através do evento onload=win  no elemento <BODY>. Observe que a variável win está associada ao método window.open().
<BODY onload="win">
O código completo pode ser visto abaixo:
<HTML>
<HEAD>
<TITLE> Usando JavaScript </TITLE>
<SCRIPT type="text/javascript">
var win=window.open("css1.html")
</SCRIPT>
</HEAD>
<BODY onload="win">
<p>Como você viu, a janela é aberta automaticamente quando esta página é carregada.</p>
</BODY>
</HTML>
Veja o programa funcionando. A janela vai abrir utilizando o tamanho padrão do seu browser.

Tutorial: Validando formulários com JavaScript

É muito comum validar campos de um formulário antes de enviar os dados utilizando programas scripts. O exemplo abaixo mostra um simples programa que valida um campo de formulário.
Criando um formulário simples:
<HTML>
<HEAD>
<TITLE> Formulário com JavaScript </TITLE>
</HEAD>

<BODY>
<H1> Formulário de registro </H1>
<HR>
<FORM NAME="regform">

Nome: <INPUT NAME="nome" TYPE="TEXT" SIZE="20" MAXLENGTH="40" VALUE="">
<BR><BR>
<INPUT TYPE="BUTTON" VALUE="registrar">
</FORM>
</BODY>
</HTML>
Acrescente a uma função JavaScript, logo após <TITLE>
<HTML>
<HEAD>
<TITLE> Exemplo com JavaScript </TITLE>
<SCRIPT>
<!--
function valida()
{
if (regform.nome.value == "")
{
alert("Voce esqueceu de fornecer seu nome");
return;
}
else regform.submit();
}
//-->
</SCRIPT>
</HEAD>
Acrescente um evento "onclick" ao botão que ative a função valida:
<INPUT TYPE="BUTTON" VALUE="registrar" onClick="valida()">

Tutorial: Construindo uma calculadora simples.

Este programa cria uma calculadora utilizando javascript e formulários. O usuário fornece o valor no campo "expr". O botão "calcula" ativa o script valida(). Este script faz uma verificação com o usuário e em caso afirmativo, ativa a a função eval(). Esta função utiliza o valor que estar no campo "expr" (form.expr.value) e coloca o resultado em (form.expr.result) que é um outro campo do formulário.
<HTML>
<HEAD>
<SCRIPT>
<!--- Escondendo o script de browsers antigos
function calcula(form) {
  if (confirm("Tem certeza?"))
 form.result.value = eval(form.expr.value)
  else
 alert("Tente novamente")
}
// fim do script -->
</SCRIPT>
</HEAD>

<BODY>
<h1>Calculadora</h1>
<FORM>
Forneça uma expressão matemática:
<INPUT TYPE="text" NAME="expr" SIZE=15 >
<p>
<INPUT TYPE="button" VALUE="Calcule" onClick="calcula(this.form)">
<INPUT TYPE="reset" VALUE="Limpar"> 
<p>
Resultado:
<INPUT TYPE="text" NAME="result" SIZE=15 >
</FORM>
</BODY>
</HTML>
Marcadores:

2 comentários:

Assinar: Postar comentários (Atom)