UNIPAC – ARAGUARI CAMPUS – IX PROF. EVERTON HIPÓLITO DE FREITAS Antes de começar com J2EE

Agenda Introdução HTML com formulário Folha de estilo Javascript DHTML (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 HTML Folha de estilo HTML Folha de estilo

Papel do Javascript HTML Folha de estilo Javascript HTML Folha de estilo Javascript

Papel do Servlet HTML Folha de estilo Banco de dados Servlet HTML Folha de estilo Banco de dados Servlet

Papel do Servlet – acesso do usuário “joao” HTML Folha de estilo Banco de dados Servlet HTML Folha de estilo Banco de dados Servlet

Papel do Servlet – acesso do usuário “maria” HTML Folha de estilo Banco de dados Servlet HTML Folha de estilo Banco de dados Servlet

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 ….  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. Permite abrir o programa de correspondente.

Lembrete Atenção, todos os elementos (tag) em uma página HTML pode possuir o atributo id para definir um apelido. Untitled Document Maria Helena Morena

Exemplo do uso da tag Form Sintaxe da tag form... Exemplo

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:   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 Nome do cliente " size="40" maxlength="30"> 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: 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 Informe a senha de acesso ao aluno WEB:

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 Selecione as disciplinas que cursa: Português Matemática Programação 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 Selecione o seu sexo: Masculino Feminino 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. Atenção: o atributo “checked” indica que: Se a tecla for pressionada, o botão será ativado.

Form: input: type=“tipos” Reset  Este campo permite que os dados do formulário retornem ao seus valores iniciais.

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. 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:select A tag select exibe o campo de seleção baseado em uma lista previamente definida. Sintaxe:  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 Ipatinga Uberlândia Araguari São Paulo Ipatinga Uberlândia Araguari São Paulo ’ 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). 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). Observações:

Referências bibliográficas html html

Trabalho Descreva os conceitos e defina exemplos que apresente-os: