Formulários HTML

Lista de Exercícios 1

Formulários HTML
JavaScript
■ Linguagem HTML
– Trata-se de uma linguagem para
formatação de páginas e criação de links.
– É desprovida de recursos:
• para validação de conteúdo;
• comandos condicionais;
• Comandos estruturais que permitam a
execução repetitiva de trechos do código.
O que fazer?

■ Pode-se utilizar uma linguagem de

script para realizar tais operações.
Ex.: JavaScript
VBScript
O que é JavaScript?

■ É uma linguagem de script, isto é, texto

ASCII interpretado sem necessidade de
compilação, que permite adicionar
características ativas ao código HTML
em que está inserida.
Características do JavaScript
■ JavaScript não é Java;
■ JavaScript é uma liguagem de script que se aloja
dentro de uma página desenvolvida em HTML;
■ Seu primeiro nome foi LiveScript, depois de
associados com a Sun passou a ser chamado de
JavaScript;
■ É uma linguagem interpretada, ou seja, o código-
fonte sempre é traduzido para uma linguagem que o
computador entenda na hora em que for executado;
■ É baseado em objetos, ou seja, o programador pode
utilizar-se de objetos predefinidos ou então criar
novos objetos para satisfazer suas necessidades;
■ É uma linguagem baseada em objetos, ou seja, trata
todos os elementos de uma página Web como
objetos;
Ferramentas Necessárias:

– Um browser compatível com o Javascript.

– Um bom conhecimento de Html.
– Um simples editor de texto.
 Browser compatível

■ Netscape 2.0 Javascript 1.0 (primeiro a suportar)

■ Netscape 3.0 Javascript 1.1
■ Netscape 4.0 Javascript 1.2

■ IExplorer 3.0 Alguma codificação de Javascript 1.0

■ IExplorer 4.0 Javascript 1.2
História do JavaScript

■ Chamado antigamente de Livescript

■ Inventado por Brendan Eich, da Netscape Communitations
■ Concorrente Jscript 1.0 da Microsoft, compatível com
Internet Explorer 3.
■ Netscape fez acordo com várias empresas inclusive a
Microsoft no sentido de criar um padrão

■ Devido a incompatibilidade de navegadores, ECMA, um

grupo suíço de padronização começou a desenvolver em
novembro de 1996

■ Em julho de 1997 o padrão foi lançado e chamado de

linguagem ECMScript
Script X Programa

■ Script é uma sequência de instruções que são

interpretadas e executadas em um outro programa e não
pelo processador do computador
■ Para escrever um programa você precisa de no mínimo um
outro programa (compilador)
■ Para escrever um script você apenas precisará de um
editor de textos
Java X JavaScript:
Java
■ Modulo (applet) distinto da
página Html
■ O código é compilado antes
JavaScript
■ Código integrado na página
Html
■ Código interpretado pelo

da sua execução browser no momento da

execução Códigos de
■ Linguagem de programação programação simples mas
muito mais complexa mas para aplicações limitadas
mais poderosa
■ Código é visível
■ Segurança (Código
compilado)

Os códigos de Javascript não atrasam o carregamento da página,

enquanto que um applet Java pode demorar minutos a carregar.
Objetos

■ Quando um documento é carregado no

browser, ele cria um certo número de
objetos JavaScript, com propriedades e
valores, os quais são ajustados pelo
conteúdo do próprio documento.
■ Estes objetos respeitam uma
hierarquia.
Hierarquia dos Objetos
WINDOW
LOCATION
HISTORY
DOCUMENT
LAYER
LINK
IMAGE
AREA
ANCHOR
APPLET
PLUGIN
FORM
TEXT AREA
TEXT
FILEUPLOAD
PASSWORD
HIDDEN
SUBMIT
RESET
RADIO
CHECKBOX
BUTTON
SELECT
OPTION
■ Window: É o objeto mais importante, tem o mais alto nível na
escala hierárquica e, em caso de frames, cada frame tem seu
próprio objeto window;

■ Document: Contém todas as propriedades baseadas no

documento tais como formulários, links, imagens e outros;

■ Navigator: Trabalha com as propriedades relativas ao

navegador, plug-ins e tipos de dados MIME (Multi-purpose
Internet Mail Extension);

■ Location: Trata das propriedades relativas à URL do

documento;

■ History: Trata das propriedades das URLs dos documentos

visitados;
 es
ad
ir ed
rop
P
s e
to
je
Ob
O objeto janela contém o objeto documento que contém o
objeto formulário que contém por sua vez os objetos
radio, botão, e texto.

A hierarquia deste exemplo é então:

> radio
janela > documento > formulário > botão
> texto
Como acessar um objeto

■ É necessário dar o caminho completo do objeto

começando pelo objeto mais externo até ao objeto de
referência.
Seja por exemplo para o botão radio "semana":
(window).document.form.radio[0].

■ Insire-se o objeto window entre parentes, porque ele ocupa

a primeira posição na hierarquia.
Propriedade de Objeto

■ Em Javascript, parar acessar as propriedades, utiliza-se a

sintaxe:

nome_do_objeto.nome_da_propriedade

No caso do botão radio "semana", para testar a propriedade de

seleção, escreva-se:

document.form.radio[0].checked
■ Nome_do_objeto.nome_da_propriedade
■ Exemplo:
(window).document.form.radio[0]
Objetos:

– Janela
– Documento
– Formulário
– Botões Rádio
– Botão
– Texto
Exemplo:
■ document.image[0].src=“figura.jpg”
■ document.form[0].element[1].value = texto;
■ Javascript não é propriamente uma linguagem orientada
para os objetos tal o como C++ ou Java.

■ Dizemos que Javascript é uma linguagem baseada nos

objetos.
■ Para que o script seja executado antes de qualquer coisa
colocaremos nossos scripts entre as tags <head> e
</head>

■ Para indicar que é um script delimitamos o código entre as

tags <script> e </scritp>
■ Para avisar ao navegador que linguagem de script
usaremos:

<script language=“JavaScript”>

Default é JavaScript
■ Se quiser que só rode em Internet Explorer <script
language=“Jscript”>

■ Se quiser que rode somente em uma determinada versão

<script language=“JavaScript1.1”>
(Somente o Netscape 3.0 poderia rodar)
■ Versões anteriores a Netscape 2.0 não podem rodar
JavaScript, por isso para evitar erros devemos ocultar
qualquer script colocando-s entre tags de comentário HTML

<script language=“JavaScript”>
<!- -
Código escrito em JavaScript
-->
</script>

■ Comentário em JavaScript:
// comentário
ou
/* comentário em
diversas linhas */
Caixas de Mensagem

■ Alert: apresentar informações

■ Confirm: apresentar informações, permitindo que o usuário

ente com uma escolha na forma de resposta sim/não

■ Prompt: apresentar informações, permitindo que o usuário

digite uma resposta.
Exemplo - Mensagem Alert
Exemplo - Mensagem Confirm
Exemplo - Mensagem Prompt
Métodos

■ Métodos são funções pré-definidas pela linguagem

JavaScript que irão executar determinada operação.

■ Para document o Javascript dedicou o método "escrever no

documento" , é o método write().
A chamada do método se faz segundo a notação:

– nome_do_objeto.nome_do_método(argumentos)
■ Para chamar o método write() do documento, escreva-se:
– document.write();
Escrevendo

■ Para associar texto (cadeia de caracteres) e variáveis, utiliza-se

a instrução
write("O resultado é" + resultado);

■ Pode-se utilizar os tags Html para incrementar o texto

write("<B>O resultado é</B>" + resultado); ou
write ("<B>" + "O resultado é" + "</B>" + resultado)
Exemplos:
■ Agora vamos escrever texto em Html e em Javascript.
• <HTML>
<BODY>
<H1>Isto é Html</H1>
<SCRIPT LANGUAGE="Javascript">
<!--
document.write("<H1>E isto é Javascript</H1>");
//-->
</SCRIPT>
</BODY>
</HTML>
Formatando a fonte:

str="Texto";

document.write("<B>"+str+"</B>");
document.write("<B>Texto</B>");
document.write(str.bold());
document.write("Texto".bold());
■ str1="Texto";
str2="red"

document.write("<FONT COLOR='red'>"+str1+"</FONT>");
document.write("<FONT COLOR='red'>"+"Texto</FONT>");
document.write(str1.fontcolor(str2));
document.write("Texto".fontcolor("red"));
■ str="Texto";
x=3

document.write('<FONT SIZE=3>'+str+'</FONT>');
document.write("<FONT SIZE=3>"+"Texto</FONT>");
document.write(str.fontsize(x)));
document.write(str.fontsize(3));
Eventos

■ Em Html clássico, há um evento que conhecem bem. É o clique

sobre um link que vai abrir outra página Web. Infelizmente, é
praticamente o único.
■ Felizmente, o Javascript vai acrescentar uma boa dezena.
■ Os eventos Javascript, associados as funções, aos métodos e
aos formulários, abrem uma grande porta para uma verdadeira
interatividade das páginas.
Eventos

■ Sua utilização se dá como atributos da linguagem HTML, ou

seja dentro dos próprios Tag’s HTML.
■ Sua sintaxe tem a seguinte formação:
<TAG nomeEvento="Instruções JavaScript">

■ Onde é apresentado TAG é uma instrução da linguagem HTML.

■ Onde é evento é o nome do evento gerado da linguagem
JavaScript.
■ Onde “Instruções JavaScript” serão as instruções JavaScript à
serem executadas. Elas estarão sempre entre aspas.
Exemplo de Evento:

<INPUT TYPE="button“ NAME="botao" VALUE="Qual é o

elemento escolhido?" onClick=“alert(‘O elemento escolhido
foi este!’)">
Alguns Eventos
load: Quando a página é carregada pelo browser.
Unload: Quando o utilizador saia da página.
MouseOver: Quando o utilizador coloca o ponteiro sobre um link ou
outro elemento.
MouseOut: Quando o ponteiro não está sobre um link ou outro
elemento.
Focus: Quando um elemento de formulário tem o focus.
Blur: Quando um elemento de formulário perde o focus.
Change: Quando o valor de um campo de formulário é modificado.
Select: Quando o utilizador seleciona um campo dentro de elemento
de formulário.
Submit: Quando o utilizador clica sobre o botão Submit para enviar
um formulário.
Alguns Eventos
■ mouseDown: mouse é pressionado.
■ mouseMove: Ocorre quando o ponteiro do mouse se movimenta
sobre o objeto.
■ mouseOut: Ocorre quando o ponteiro do mouse afasta de um
objeto. Válidos apenas para hiperlinks.
■ mouseUp: Ocorre quando uma tecla é segurada.
■ keyPress: Ocorre quando uma tecla é pressionada.
■ keyUp: Ocorre quando uma tecla é solta.
Lista de Exercícios 2