Scribd
Carregar
12 visualizações

Exercícios JavaScript

O documento apresenta vários tutoriais sobre JavaScript, incluindo como imprimir a hora, associar eventos a botões de formulário, abrir janelas pop-up, validar campos de formulário e construir uma calculadora simples.

Enviado por

Murilo Minghini
Direitos autorais
© © All Rights Reserved
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
12 visualizações

Exercícios JavaScript

O documento apresenta vários tutoriais sobre JavaScript, incluindo como imprimir a hora, associar eventos a botões de formulário, abrir janelas pop-up, validar campos de formulário e construir uma calculadora simples.

Enviado por

Murilo Minghini
Direitos autorais
© © All Rights Reserved
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 3

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>

Veja o resultado.

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>

Veja o programa funcionando.


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


eventoonload=win no elemento <BODY>. Observe que a variável win está associada ao
métodowindow.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()">

Veja o programa funcionando.

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>

Veja o programa funcionando

Referência: http://www.dimap.ufrn.br/~jair/webdesign/exerciciosjavascript.html

Você também pode gostar