UNIPAC – ARAGUARI CAMPUS – IX PROF. EVERTON HIPÓLITO DE FREITAS Antes de começar com J2EE.
Transcript of UNIPAC – ARAGUARI CAMPUS – IX PROF. EVERTON HIPÓLITO DE FREITAS Antes de começar com J2EE.
U N I PA C – A R A G U A R IC A M P U S – I X
P R O F. E V E R T O N H I P Ó L I T O D E F R E I T A S
Antes de começar com J2EE
Agenda
IntroduçãoHTML com formulárioFolha de estiloJavascriptDHTML (Javascript e folha de estilo)
Introdução
As página de internet são utilizadas para apresentação de produtos e descrição de serviços, entre outros objetivos.
A linguagem utilizada é a HTML(Linguagem de marcação de hipertexto). Quando utilizamos HTML puro, ou seja, somente
HTML, as nossas páginas se tornam estáticas, isto é, sem mudanças, sem alterações. Isto acontece porque o HTML puro não permite criação
de páginas dinâmicas, que se alteram de acordo com alguma característica qualquer.
Introdução
Para permitir que as páginas sejam dinâmicas, diversas outras tecnologias devem ser utilizadas com as mesmas. Alguns exemplos de página dinâmica seriam: Dependendo da cidade do usuário a página terá seu
layout totalmente diferente. Dependendo do horário de acesso, a página altera
suas cores de exibição. Dependendo do usuário que está acessando, a página
apresenta menus diferentes.
Introdução
Para permitir que suas páginas fiquem dinâmicas, algumas tecnologias podem ser utilizadas, tais como: Javascript CSS
DHTML (Javascript com CSS) Servlets.
Antes de tudo ...
Vamos entender como as coisas funcionam: HTML
A Linguagem HTML serve para apresentar a estrutura da página e seus conteúdos.
CSS – folha de estilos A folha de estilos permite que seu site ganhe “vida”, ela trabalha
com a formatação do site, imagens, fundos e cores. Javascript
A linguagem javascript permite a validação dos campos de formulários bem como alteração de layout (Classes em CSS) em tempo de execução (no lado cliente).
Servlet Os servlets são os programas desenvolvidos em Java que rodam
no lado do servidor. Eles são responsáveis por acessar banco de dados, tratar as regras dos negócios, etc....
Papel do HTML e CSS
HTMLFolha de estilo
Papel do Javascript
HTMLFolha de estiloJavascript
Papel do Servlet
HTMLFolha de estiloBanco de dadosServlet
Papel do Servlet – acesso do usuário “joao”
HTMLFolha de estiloBanco de dadosServlet
Papel do Servlet – acesso do usuário “maria”
HTMLFolha de estiloBanco de dadosServlet
HTML - Formulário
Para permitir uma maior interação entre “sistemas computacionais” e os seus usuários, é necessário a existência de mecanismos de entrada que permita o computador identificar o que seus usuários querem, quais ações a serem executadas, etc...
O formulário em HTML é um meio do usuário entrar com informações para um sistema.
Exemplo de formulário HTML
Como ocorre o tratamento dos dados no formulário?
Primeiramente, a página com o formulário é carregada. Após o preenchimento do formulário, o javascript valida os
campos que são obrigatórios. Caso estejam preenchidos, envia os dados dos campos para um servidor
tratar as informações. Caso campos obrigatórios estejam em branco, emitir uma mensagem de
erro. Após o javascript validar os campos, os dados do formulário são
enviados para o servidor que irá tratá-los. A tarefa de tratar os dados consta na verificação se os campos obrigatórios
foram validados, se os valores esperados foram informados, armazenamento dos dados no banco de dados, etc...
Após o tratamento dos dados, as informações são armazenadas no banco de dados e uma mensagem de confirmação é retornada pelo servidor. Continua o processo normalmente .....
Tag Form
Os formulários são delimitados pela Tag<FORM>… </FORM>. Esta Tag permite agrupar vários elementos de formulário (botões,
campos de texto, campos de seleção,…) e possui os atributos obrigatórios: NAME
Indica o nome que identifica o elemento formulário na página. Um id pode ser especificado, ou não. (como se fosse um apelido)
METHOD indica sob qual método de envio dos dados (digitados no formulário) será
utilizado:• “POST” os dados são enviados em pacotes.• “GET” os dados são enviados e codificados na URL.
ACTION indica o endereço para onde os dados serão enviados. mailto:adresse.email@machine
• Permite abrir o programa de email correspondente.
Lembrete
Atenção, todos os elementos (tag) em uma página HTML pode possuir o atributo id para definir um apelido.
<html><head><title>Untitled Document</title></head><body id="paginaCliente"><table id="dadosPessoa"><tr>
<td id="columnName"> Maria Helena</td><td id="columnCor"> Morena</td>
</tr></table></body></html>
Exemplo do uso da tag Form
Sintaxe da tag form<FORM METHOD="POST" ou "GET" ACTION="url“
NAME=“nomeFormulario”>... </FORM>
Exemplo<FORM METHOD=“POST” ACTION=
mailto:[email protected] name=“formCli”> ...</FORM>
Por dentro da tag Form
É possível inserir qualquer elemento HTML básico numa tag FORM (textos, botões, quadros, relações,…) mas, sobretudo, é interessante inserir elementos interativos.
Estes elementos interativos são : Campos INPUT ,TEXTAREA e SELECT
Tag Form : campo input
A Tag INPUT é a tag essencial dos formulários, pois permite criar um bom número de elementos “interativos”.
A sintaxe desta tag é a seguinte: <INPUT type=“tipo" value=“valor padrão"
name=“nome do elemento"> Atributo name é essencial pois ele permite a manipulação
do campo nos javascript ou servlets (linguagem script). Atributo value permite definir um valor padrão para o
campo. O atributo type permite definir o tipo de elemento que
será exibido no form. A seguir veremos os tipos possíveis.
Form: input: type=“tipos”
Text trata-se de um campo que permite receber uma linha de texto. A dimensão do campo pode ser definida através do atributo size
e a quantidade máxima do texto (caracteres) pode ser definido através do atributo maxlength.
Exemplo
<form id="formCLiente" name="formCli" action="" method="post">Nome do cliente
<input type="text" name="campoNome" value="<digite aqui>" size="40" maxlength="30"></form>
No lado do servidor:Variável chama “campoNome”Seu conteúdo será o valor digitado no campo
Form: input: type=“tipos”
hidden trata-se de um campo escondido.
Ele não está visível no formulário, porém, será enviado para o servidor.
Permite definir um valor fixo (que não será informado pelo usuário) para uma variável.
Exemplo
No lado do servidor:Variável chama “faculdade”Seu conteúdo será ‘unipac araguari’
<form id="formCLiente" name="formCli" action="" method="post"><input type="hidden" name="faculdade" value="unipac araguari">
</form>
Form: input: type=“tipos”
Password trata-se de um campo de texto utilizado para digitar
senhas. A medida que o usuário digita alguma senha, o mesmo
apresenta asteriscos ao invés do caracter que foi pressionado. Exemplo
No lado do servidor:Variável chama “senha”Seu conteúdo será o valor digitado no campo
<form id="formCLiente" name="formCli" action="" method="post">Informe a senha de acesso ao aluno WEB:
<input type="password" name="senha" size="20" maxlength="20"> </form>
Form: input: type=“tipos”
Checkbox Trata-se de um campo de seleção, ativo (checked) ou
inativo(unchecked). Quando ativo, assume o valor que estiver no campo value. Quando inativo, este campos se torna inexistente, portanto não
será enviado para página que trata os dados. Mais de um campo poderá ser selecionado (cada campo
possuirá o mesmo nome, porém, valores “value” diferentes). Quando ativo, no momento que os dados são enviados para o
servidor, para serem tratados, o formato name/value é enviado. O servidor acessa o valor (value) deste campo através do seu nome
(name) O servidor recebera um array (identificado pelo name)
contendo os valores dos campos que foram selecionados.
Form: input: type=“tipos”
Exemplo de Checkbox <form id="formCLiente" name="formCli" action="" method="post">Selecione as disciplinas que cursa:
<input type="checkbox" name="disciplina" value="Portugues" checked="checked"> Português
<input type="checkbox" name="disciplina" value="Matemática"> Matemática<input type="checkbox" name="disciplina" value=“111"> Programação
</form>
No lado do servidor:Variável chama “disciplina”Seu conteúdo será [Portugues, 111]
Atenção: o atributo “checked” traz o elemento selecionado por padrão.
Form: input: type=“tipos”
Radio Trata-se de um campo de seleção.
Quando selecionado, assume o valor que estiver no campo value.
Poderá ter mais de uma opção de seleção, porém, somente uma opção pode ser selecionada (cada campo possuirá o mesmo nome, porém, valores “value” diferentes).
Quando selecionado, no momento que os dados são enviados para o servidor, para serem tratados, o formato name/value é enviado. O servidor acessa o valor (value) deste campo através do seu
nome (name) O servidor recebera uma única variável identificada pelo
“name” contendo o valor do campo que foi selecionado.
Form: input: type=“tipos”
Exemplo Radio
<form id="formCLiente" name="formCli" action="" method="post">Selecione o seu sexo:
<input type="radio" name="sexo" value="M" checked="checked"> Masculino<input type="radio" name="sexo" value="Feminino" > Feminino
</form>
No lado do servidor:Variável chama “sexo”Seu conteúdo será M
Atenção: o atributo “checked” traz o elemento selecionado por padrão.
Form: input: type=“tipos”
Submit Exibe o botão responsável por enviar os dados do
formulário para o servidor que irá tratá-la. O botão submit dispara o evento responsável por enviar
os dados que foram digitados no formulário para o servidor que irá tratá-los.
<form id="formCLiente" name="formCli" action="" method="post"><input type="submit" name="enviarDados" value="Cadastrar
cliente“checked="checked" ></form>
Atenção: o atributo “checked” indica que: Se a tecla <ENTER> for pressionada, o botãoserá ativado.
Form: input: type=“tipos”
Reset Este campo permite que os dados do formulário
retornem ao seus valores iniciais.
<form id="formCLiente" name="formCli" action="" method="post"><input type="reset" name="limpar" value="Limpar campos">
</form>
Form: input: type=“tipos”
Button Botões do tipo button não têm comportamento pré-
definido, sendo usados apenas em scripts no lado cliente.
<form id="formCLiente" name="formCli" action="" method="post"><input type=“button" name=“exibirSenha” value=“Mostrar senha" >
</form>
Atenção: o botão está associados a eventos no lado do javascript.
Form: input: type=“tipos”
File O campo de entrada de arquivo permite ao usuário
especificar um arquivo local cujo conteúdo será enviado junto com o formulário submetido, como upload. Para isso, o elemento form do formulário que o contém
deve especificar os atributos method="POST" e enctype="multipart/form-data".
<form id="formCLiente" name="formCli" action="" method="post"><input type="file" name="arquivo“ />
</form>
Form:select
A tag select exibe o campo de seleção baseado em uma lista previamente definida.
Sintaxe:<select name=“nome” size=“10”>
Quem define o nome (name) do controle é o elemento select, enquanto cada valor (value) é dado por um option.
O rótulo de cada opção é dado pelo texto entre as tags de abre e fecha option.
O atributo size define o número de opções (linhas) exibidas da lista. A exibição da barra de rolagem é automática e fica a cargo do
browser. O atributo selected define uma opção pré-selecionada (inicialmente
"ligada"). É recomendado sempre definir explicitamente o que estará pré-selecionado, para evitar ambigüidade de comportamento em diferentes browsers.
Form:select
Exemplo select<form id="formCLiente" name="formCli" action="" method="post"><select name="cidade" size="1"> <option value="1" selected="selected">Ipatinga</option> <option value="Udia">Uberlândia</option> <option value="araguari">Araguari</option> <option value="SP">São Paulo</option></select></form>
<form id="formCLiente" name="formCli" action="" method="post"><select name="cidade" size="1"> <option value="1" selected="selected">Ipatinga</option> <option value="Udia">Uberlândia</option> <option value="araguari">Araguari</option> <option value="SP">São Paulo</option></select></form>’
A lista com o atributo multiple (multiple="multiple") pode ter mais de uma opção selecionada, normalmente pressionando-se CONTROL e/ou SHIFT ao selecionar outro elemento.
Form:textarea
O controle textarea é um campo de texto multi-linha. Os atributos rows e cols definem o número de linhas de altura e o de
"caracteres" de largura, respectivamente. O atributo wrap define se a mudança de linha será automática durante
a digitação ("on"), ou somente quando for pressionado ENTER ("off").
Todos os elementos do formulário podem ter atributo:- readonly (readonly="readonly" somente leitura, o elemento é enviado para o servidor) - disabled (disabled="disabled" desabilitado, o elemento não será enviado para o servidor).
<form id="formCLiente" name="formCli" action="" method="post">Observações:<textarea name="parea" rows="5" cols="60" wrap="off"></form>
Referências bibliográficas
http://pt.kioskea.net/contents/html/htmlform.php3
http://www.mhavila.com.br/topicos/web/controles.html
Trabalho
Descreva os conceitos e defina exemplos que apresente-os: