JavaScript - Validação e Projeto em Sistemas Web

Prévia do material em texto

Práticas de Programação 
em Sistemas Web
JavaScript – Validação e Projeto
Produção: Gerência de Desenho Educacional - NEAD
Desenvolvimento do material: Oswaldo Peres
1ª Edição
Copyright © 2021, Unigranrio
Nenhuma parte deste material poderá ser reproduzida, transmitida e gravada, por 
qualquer meio eletrônico, mecânico, por fotocópia e outros, sem a prévia autorização, 
por escrito, da Unigranrio.
Núcleo de Educação a Distância 
www.unigranrio.com.br
Rua Prof. José de Souza Herdy, 1.160 
25 de Agosto – Duque de Caxias - RJ
Reitor
Arody Cordeiro Herdy
Pró-Reitoria de Programas de Pós-Graduação
Nara Pires
Pró-Reitoria de Programas de Graduação
Lívia Maria Figueiredo Lacerda
Pró-Reitoria Administrativa e Comunitária
Carlos de Oliveira Varella
Núcleo de Educação a Distância (NEAD)
Márcia Loch
Sumário
JavaScript – Validação e Projeto
Para Início de Conversa... ............................................................................... 4
Objetivo ......................................................................................................... 4
1. Boas Práticas .................................................................................................. 5
2. Validação de Formulários .......................................................................... 12
2.1 Document Object Model (DOM) ....................................................... 12
2.2 Javascript e DOM ................................................................................... 14
2.3 Validando Dados no Formulário ....................................................... 41
3. Criação de uma Aplicação com JavaScript ........................................... 47
Referências ......................................................................................................... 52
Práticas de Programação em Sistemas Web 3
Para Início de Conversa...
Podemos vislumbrar que, no mundo contemporâneo, nos deparamos 
com verdadeiros Sistemas de Informações na Internet. Tais sistemas 
demandam, normalmente, um número grande de entrada de dados. 
Você já deve ter percebido isso ao fazer qualquer tipo de cadastro em 
sites. Sabemos que o HTML e o CSS nos ajudarão a projetar páginas 
bem estruturadas e formatadas. Contudo, isso não basta, pois precisamos 
desenvolver uma interface que permita a entrada de dados de forma 
eficaz e eficiente. Formulários HTML podem nos ajudar nesse sentido. 
Além disso, precisamos garantir, minimamente, que os dados enviados 
sejam validados previamente no lado cliente, ainda que de forma 
limitada. O Document Object Model (DOM) permitirá que o Javascript 
tenha acesso aos elementos do HTML, como também viabilizará a 
criação de rotinas de validação. 
Objetivo 
Construir funções em JavaScript, realizando chamadas e passando 
parâmetros a elas.
Práticas de Programação em Sistemas Web 4
1. Boas Práticas
É muito comum que desenvolvedores iniciantes implementem as 
entradas e saídas por meio de funções, como prompt(), confirm() e 
alert(), que disponibilizam uma pequena janela para efetivar a interação. 
Contudo, já imaginou se essa fosse a forma padrão para as páginas 
atuais? Isso seria simplesmente contraproducente. Por isso, o HTML nos 
fornece o conceito de formulário. Certamente já nos deparamos com ele 
e nem demos conta. Um bom exemplo desse recurso é demonstrado na 
tela a seguir:
No portal da Unigranrio, para que possamos efetuar o login, o conceito 
de formulário HTML se faz presente no preenchimento do Usuário, Senha 
e Caracteres da Imagem, conforme indicado pelas setas.
Podemos definir que o objetivo dos formulários HTML é permitir a 
entrada de dados do usuário. Para tanto, estes possuem elementos, como 
caixa de entrada, caixas de seleção, botões de rádio, botões de envio e 
muitos outros.
O HTML possui um grupo de tags para implementar facilmente 
formulários, dentre as quais podemos destacar:
 ▪ Formulário:
Usada para criar um formulário HTML. Sua sintaxe é bastante simples, 
como demonstrado a seguir:
<form>
 elementos do formulário
</form>
Essas tags apenas delimitam os elementos que constituirão o 
formulário.
Práticas de Programação em Sistemas Web 5
 ▪ Entrada de texto:
Usada para entrada de dados. Sua sintaxe básica consiste em <input 
type = “tipo”>, onde o argumento tipo define o componente a ser 
implementado, como apresentado a seguir:
Tipos de entrada de texto: 
 ▪ texto de linha única:
 ▪ Usado para itens que requerem apenas uma linha de entrada 
 do usuário:
 <input type = “text”>
Exemplo:
 ▪ texto de várias linhas:
Usado para itens que requerem múltiplas linhas de entrada do 
usuário:
 <input type = “textarea”>
Exemplo:
Práticas de Programação em Sistemas Web 6
 ▪ senha:
Assim como o text, é usada para itens que requerem apenas uma linha 
de entrada do usuário, porém exibe uma máscara para os caracteres 
assim que o usuário os insere:
 <input type = “password”>
Exemplo:
 ▪ oculto:
Usado para ocultar dados dentro de uma página:
 <input type = “hidden”>
Práticas de Programação em Sistemas Web 7
 ▪ radio:
Usado quando não há muitas opções, e apenas uma deve ser 
selecionada:
 <input type = “radio”>
Exemplo:
Observe que foi definido o mesmo nome para os botões de rádio. Com 
isso, ao selecionar um, o outro será desmarcado automaticamente. Caso 
existam nomes diferentes, será possível marcar ambos.
 ▪ caixa de seleção:
Usada quando mais de uma opção deve ser selecionada.
 <input type = “checkbox”>
Exemplo:
Práticas de Programação em Sistemas Web 8
 ▪ upload de arquivo:
Usado para que o usuário possa carregar um arquivo em seu site.
 <input type = “file”>
Exemplo: 
Observe que para esse elemento usamos o parâmetro accept, que nos 
permite definir que tipos de arquivo o usuário pode escolher na caixa 
de diálogo de entrada de arquivo. Dentre vários argumentos para esse 
parâmetro, temos:
 ▪ audio/*:
Selecionar arquivos de som
 ▪ video/*:
Selecionar arquivos de vídeo
 ▪ image/*:
Selecionar arquivos de imagem
 ▪ extensão:
Podemos definir uma determinada extensão
Podemos, ainda, combinar os parâmetros anteriores apenas definindo-os 
separados por vírgula.
 ▪ botão:
Usado para criar um elemento do tipo botão: 
 ▪ submit:
Usado para enviar dados do formulário.
 <input type = “submit”>
Práticas de Programação em Sistemas Web 9
 ▪ reset:
Usado para redefinir os elementos do formulário para seus 
valores iniciais.
 <input type = “reset”>
Exemplo:
Se você observar atentamente, perceberá que em todos os elementos do 
formulário que estou apresentando tenho definido o parâmetro name, 
que é importante para definir um nome ao componente. Já para os 
componentes submit e reset também definimos o parâmetro value, que 
definirá o texto a ser exibido nos botões.
 ▪ button:
Utilizado para criar um botão clicável. Normalmente é usado 
para acionar um script do lado do cliente quando o usuário clica 
nesse botão.
 <input type = “button”>
 ▪ image:
Usado para criar um botão clicável. No entanto, diferentemente do 
seu antecessor, podemos associar uma imagem como plano de fundo 
do botão.
 <input type = “image”>
Práticas de Programação em Sistemas Web 10
Exemplo: ▪ lista de seleção:
Usado para criar um elemento com várias opções na forma de lista 
suspensa, de onde um usuário pode selecionar uma ou mais opções. 
Sua sintaxe é composta basicamente pelas tags <select> e <option>.
Exemplo:
Práticas de Programação em Sistemas Web 11
Observe que, embora Espírito Santo não seja o primeiro da lista de 
opções, ele apareceu comopré-selecionado. Isso ocorre por causa do 
parâmetro selected.
Ao acessarmos uma página, o navegador recupera o texto HTML e constrói 
um modelo estruturado, usado-o para renderizar a página na tela.
2. Validação de Formulários
Os formulários são largamente implementados para a entrada de dados. 
Contudo, é muito importante que os dados fornecidos sejam validados 
previamente no lado cliente. Com o Javascript, podemos implementar 
rotinas de validação facilmente, mas para isso precisamos entender o 
conceito de Document Object Model (DOM).
2.1 Document Object Model (DOM)
O DOM nada mais é do que um mapa referente a um documento HTML. 
Ao acessarmos uma página, o navegador recupera o texto HTML e 
constrói um modelo estruturado, ou seja, define uma estrutura lógica 
para o documento HTML que permite o acesso e a manipulação dos 
seus elementos. Com isso, qualquer coisa encontrada em um documento 
HTML ou XML pode ser acessada, alterada, excluída ou adicionada por 
um programador usando o DOM. 
Estudamos que nossos códigos HTML são organizados por tags, conforme 
demonstrado no exemplo a seguir: 
Práticas de Programação em Sistemas Web 12
Para tanto, ao desenvolver os scripts, imaginamos o documento HTML 
como sendo um conjunto de caixas aninhadas. Observe:
É justamente dessa forma que o nosso browser pensa. Ele organiza o 
documento HTML em objetos com os quais podemos interagir. Essa 
representação é chamada de Document Object Model ou simplesmente 
DOM. Quando a página Web é carregada, o navegador cria um DOM da 
página como sendo uma árvore de objetos. A imagem a seguir demonstra 
como o nosso browser organiza o DOM do exemplo anterior:
Embora estejamos enfatizando o HTML, o DOM é, na verdade, um padrão 
W3C (World Wide Web Consortium) muito mais amplo para definir 
acessos dinâmicos a documentos. Esse modelo padrão é subdividido em 
três partes:
 ▪ Core DOM:
Todos os tipos de documentos
 ▪ XML DOM:
Documentos XML
html
head
body
title
h1
h2
p
Exemplo
DOM
Prof. Oswaldo
Universidade:
a Unigranrio
HTML
HEAD
TITLE
 Exemplo
BODY
H1
 DOM
H2
 Prof. Oswaldo
P
 Universidade
A
 Unigranrio
Práticas de Programação em Sistemas Web 13
 ▪ HTML DOM:
Documentos HTML
2.2 Javascript e DOM
Vimos que o DOM é um modelo padrão que não só associa os elementos 
HTML a objetos, como também define suas propriedades, métodos e 
eventos. A seguir, temos uma imagem que contempla alguns de seus 
objetos:
FRAME
DOCUMENT
LOCATION
HISTORY
WINDOW TEXTAREA
TEXT
FILEUPLOAD
PASSWORD
HIDDEN
SUBMIT
RESET
RADIO
CHECKBOX
BUTTON
SELECT
PLUGIN
MIMETYPE
OPTION
LAYER
LINK
IMAGE
AREA
ANCHOR
APPLET
PLUGIN
FORM
NAVIGATOR
O objeto window pode ser considerado o principal objeto, pois é dele 
que todos são derivados. Ele faz referência às janelas do navegador. Você 
já fez uso dele e nem percebeu. Lembra quando, em nossos exemplos 
anteriores, implementamos os métodos alert() e o prompt()? Estavamos 
acessando o objeto window de forma velada. Sempre que um método 
ou propriedade de objeto é referenciado em um script sem o nome do 
objeto e o prefixo de ponto, o JavaScript assume que é um membro do 
objeto de window. Logo, as chamadas ao método alert() são iguais:
window.alert (); 
alerta();
Podemos afirmar que o objeto window permite implementação de 
tarefas como abrir e fechar janelas do navegador, exibir caixas de 
diálogo de alerta e prompt e muitas outras. Para tanto, esse objeto nos 
disponibiliza várias propriedades e métodos. Vejamos, a seguir, alguns 
exemplos:
 ▪ window.closed:
Se a janela tiver sido fechada, seu valor corresponderá a true.
 ▪ window.defaultstatus:
Define uma mensagem padrão a ser exibida na barra de status do 
browser. 
Práticas de Programação em Sistemas Web 14
 ▪ window.status:
Define uma mensagem temporária a ser exibida na barra de status do 
browser em substituição à mensagem padrão.
As propriedades de status e defaultstatus não são suportadas pela 
configuração padrão do Internet Explorer, Firefox, Google Chrome, Safari 
ou Opera 15, por isso, sugiro evitá-las.
 ▪ window.frames[]:
Se a janela possuir algum frame, este representará o array de objetos 
window.
Exemplo:
Práticas de Programação em Sistemas Web 15
Observe que usamos a propriedade frames.length para encontrar o 
número de frames da página. Agora, ao executar esse código para 
visualizar uma tela similar à demonstrada:
Agora click no botão para que os vídeos sejam alterados:
 ▪ window.innerHeight:
Referente à altura interna, em pixels, da janela do navegador.
 ▪ window.innerWidth:
Referente à largura interna, em pixels, da janela do navegador. 
Experimente implementar e rodar o exemplo a seguir para verificar as 
propriedades innerHeight e innerWidth em ação: 
Práticas de Programação em Sistemas Web 16
 ▪ window.screen:
Possui várias informações referentes à tela do usuário, como: 
resolução, largura, altura, profundidade de cor, profundidade de pixel 
etc. Fica fácil de verificar a partir de suas propriedades:
 ▪ screen.width:
Valor da largura da tela do usuário em pixels.
 ▪ screen.height:
Valor da altura da tela do usuário em pixels.
Exemplo:
Práticas de Programação em Sistemas Web 17
Após executar o script, sua tela será semelhante à demonstrada:
 ▪ screen.availWidth:
Valor da largura disponível da tela do usuário em pixels.
 ▪ screen.availHeight:
Valor da altura disponível da tela do usuário em pixel.
Exemplo:
Abra o script em seu browser para ver a tela a seguir:
Práticas de Programação em Sistemas Web 18
Click no botão:
 ▪ screen.colorDepth:
Número de bits usados para representar a cor de um único pixel, 
permitindo identificar quantas cores a tela do dispositivo é capaz 
de reproduzir.
Exemplo:
A maioria dos dispositivos possui a profundidade de cor de 24 ou 32. 
Quanto mais bits, mais variações de cores. Como exemplo, temos: 24 bits 
podem reproduzir 224 cores, ou seja, 16.777.216 cores diferentes. Já no 
caso de 232, seriam 4.294.967.296 de cores.
 ▪ screen.pixelDepth:
Número de bits usados por pixel pelo hardware.
Práticas de Programação em Sistemas Web 19
Exemplo:
Para dispositivos modernos, a profundidade de cor e a profundidade de 
pixel são iguais.
 ▪ window.name:
Define o nome do objeto window correspondente. É importante que 
todas as janelas recebam um nome, pois frequentemente usamos 
essa propriedade para modificar o nome de uma janela após ter 
sido criada. 
 ▪ window.opener:
Quando uma janela é aberta em um script contido em outra janela, 
essa propriedade da janela filha contém uma janela de referência 
que a abriu. Caso a janela tenha sido aberta pelo usuário, seu valor 
será null.
Práticas de Programação em Sistemas Web 20
Exemplo:
Práticas de Programação em Sistemas Web 21
 ▪ window.parent:
Referência à janela pai da janela atual. 
 ▪ window.top:
Referência à janela superior na hierarquia de janelas.
 ▪ window.self:
Referência à janela atual. 
 ▪ window.location:
Representa o endereço atual da página que está sendo exibida. Com 
ela, por exemplo, podemos obter não só a URL da página, como 
redirecionar o navegador para uma nova página. Suas principais 
propriedades são:
 ▪ href: 
Retorna o URL completo da página atual.
 ▪ protocol:
Retorna o protocolo pelo qual o documento atual foi acessado, ou seja, 
tudo o que precede o “//”.
 ▪ host:
Retorna o nome do host e a porta.
 ▪ hostname
Retorna o nome do host excluindo protocolo, porta e outras informações.
 ▪ pathname:
Retorna o caminho e o nome do arquivo da página atual.
Práticas de Programação em Sistemas Web 22
Exemplo:
Práticas de Programação em Sistemas Web 23
Dentre os principais métodos, temos:
 ▪ assign():
Carrega um novo documento a partir de um URL fornecido como 
parâmetro.
Exemplo:
 ▪ replace():
Carrega um novo documento a partir de um URL fornecido como 
parâmetro. Porém, diferentementedo método assign(), não cria uma 
entrada no histórico do navegador, o que significa que o usuário não 
poderá usar o botão Voltar para navegar até ele.
Exemplo:
Práticas de Programação em Sistemas Web 24
 ▪ reload():
Recarrega a página atual dinamicamente.
Exemplo:
 ▪ window.history:
Representa o histórico de navegação do browser, ou seja, é uma 
referência à lista de todas as páginas visitadas ou à atual. Talvez a 
propriedade mais explorada, no uso desse objeto, seja a length. Ela 
informa o número de páginas no histórico da sessão do navegador 
para a janela atual, incluindo a página carregada no momento.
Exemplo:
Também temos os métodos back(), forward() e go(), que nos permitem, 
respectivamente, voltar à página anterior e avançar para a próxima 
página específica do histórico. 
Práticas de Programação em Sistemas Web 25
Exemplo:
Caso não existam páginas no histórico do browser, os métodos back(), 
forward() e go() simplesmente não farão nada. 
 ▪ window.document:
Representa o documento HTML carregado. Em outras palavras, faz 
referência aos elementos HTML de uma página web e, por meio de 
seus métodos e propriedades, nos permite realizar alterações básicas 
no conteúdo de uma página a partir de um script JavaScript. 
O document é bastante rico em propriedades e métodos, dentro os 
quais podemos destacar:
 ▪ innerHTML:
Faz referência ao conteúdo HTML de um elemento, permitindo obter 
ou definir a marcação HTML contida no elemento.
 ▪ body:
Faz referência ao elemento <body> ou <frameset> do documento 
atual. Caso não exista, retornará null.
Práticas de Programação em Sistemas Web 26
Exemplo: ▪ head:
Faz referência ao elemento <head>. 
Exemplo:
Práticas de Programação em Sistemas Web 27
 ▪ title:
Faz referência ao elemento <title>.
Exemplo:
 ▪ documentElement:
Faz referência ao elemento raiz do documento. Caso ausente, 
retornará null. 
Essa propriedade é muito similar a body. A diferença consiste em que 
o body retorna o elemento <body>, enquanto o documentElement 
retorna o elemento <html>.
Exemplo:
Práticas de Programação em Sistemas Web 28
 ▪ documentURI:
Faz referência ao local do documento.
Exemplo:
 ▪ forms:
Faz referência à lista dos elementos <form> existentes do 
documento atual.
Exemplo:
Práticas de Programação em Sistemas Web 29
 ▪ images:
Faz referência à lista das imagens do documento atual.
Exemplo:
Práticas de Programação em Sistemas Web 30
 ▪ links:
Faz referência à lista de todos os hiperlinks do documento atual.
Exemplo:
 ▪ children:
Faz referência à lista de elementos filhos de um elemento.
 ▪ firstChild:
Faz referência ao primeiro nó filho do nó especificado.
Práticas de Programação em Sistemas Web 31
 ▪ lastChild:
Faz referência ao último nó filho do nó especificado.
 ▪ childElementCount:
Faz referência ao número de elementos filhos que um elemento 
possui.
 ▪ firstElementChild:
Faz referência ao primeiro elemento filho do elemento especificado.
 ▪ lastElementChild:
Faz referência ao último elemento filho do elemento especificado.
Exemplo:
Práticas de Programação em Sistemas Web 32
blur():
Remove o foco de um elemento.
 ▪ focus():
Atribui o foco a um elemento.
Exemplo:
 ▪ click():
Simula o clique do mouse em um elemento.
Práticas de Programação em Sistemas Web 33
Exemplo:
 ▪ addEventListener():
Adiciona um manipulador de eventos a um elemento.
 ▪ removeEventListener():
Remove um manipulador de eventos de um elemento que foi anexado 
pelo método addEventListener()
Exemplo:
Práticas de Programação em Sistemas Web 34
 ▪ getElementById():
Faz referência a elementos pelos seus ids.
Exemplo:
Práticas de Programação em Sistemas Web 35
 ▪ getElementsByTagName():
Faz referência à lista de elementos com os nomes das tags.
Exemplo:
 
Práticas de Programação em Sistemas Web 36
 ▪ getElementsByName():
Faz referência a elementos pelos seus nomes.
Exemplo:
Práticas de Programação em Sistemas Web 37
 ▪ getElementsByClassName():
Faz referência à lista de elementos com o nome das classes.
Exemplo:
Práticas de Programação em Sistemas Web 38
 ▪ createElement():
Permite criar um novo elemento HTML.
 ▪ appendChild():
Permite adicionar um elemento HTML.
Exemplo:
 ▪ removeChild():
Permite remover um elemento HTML.
Exemplo:
Práticas de Programação em Sistemas Web 39
 ▪ replaceChild():
Permite substituir um elemento HTML.
 ▪ write() e writeln():
Permitem escrever uma sequência de caracteres em um documento 
aberto por document.open().
 ▪ open():
Permite abrir um fluxo de documento para escrita.
 ▪ close():
Fecha o fluxo de saída aberto pelo document.open () e exibe os dados.
Exemplo:
Práticas de Programação em Sistemas Web 40
2.3 Validando Dados no Formulário
A validação de formulário é o processo no qual se verifica se um 
formulário foi preenchido corretamente antes que ele seja processado. 
Imagine que um formulário possui uma caixa para o usuário digitar o 
endereço de e-mail. Poderíamos verificar, por meio de um script, se foi 
preenchido antes de seguir com o restante do formulário. 
A validação pode ser realizada tanto no lado servidor como no lado 
cliente. Geralmente é implementada em ambos os lados. No lado do 
servidor, a validação é mais segura, mas também mais complexa em sua 
implementação, ao passo que, no lado do cliente, é bem mais fácil e 
rápida de implementar.
Embora haja validação no lado servidor, para garantir a segurança e 
integridade dos dados, é importante validar também no lado cliente, pois 
isso reduz a sobrecarga nos servidores, além de promover a usabilidade. 
Veja o exemplo a seguir para entender de forma mais clara o processo 
de validação:
Práticas de Programação em Sistemas Web 41
Se clicarmos em enviar sem digitar nada no quadro de texto referente 
ao nome, será exibida a seguinte tela:
A linha if(document.meuFormulario.txtNome.value == “” ) checa se o 
campo está vazio ou não.
Experimente digitar o seu nome e clicar em enviar. Sua tela resultante 
será similar à exibida a seguir:
Normalmente quando efetuamos uma validação no lado cliente, 
prezamos por garantir que os campos obrigatórios sejam preenchidos e 
que os dados digitados sejam válidos quanto à forma e, muitas vezes, se 
os valores digitados estão corretos. O exemplo a seguir ilustra a situação:
Práticas de Programação em Sistemas Web 42
Nesse caso, evitamos implementar a formatação com CSS para que 
nosso exemplo fique um pouco menor e mais didático. Perceba que a 
validação se dá, principalmente, pelas linhas:
 ▪ if(document.formulario.txtName.value == “”)
Verifica se o nome foi preenchido.
 ▪ if (indiceArroba < 1 || ( indicePonto - indiceArroba < 2))
Verifica se o e-mail é válido.
 ▪ document.formulario.txtCep.value == “” || isNaN( document.
formulario.txtCep.value ) || document.formulario.txtCep.value.length 
!= 8)
Verifica se o CEP é válido. 
 ▪ document.formulario.Campus.value == “-1”
Verifica se alguns campos foram selecionados.
Práticas de Programação em Sistemas Web 43
Experimente abrir, em seu browser, o nosso HTML para verificar telas 
similares às demonstradas:
Práticas de Programação em Sistemas Web 44
Práticas de Programação em Sistemas Web 45
Práticas de Programação em Sistemas Web 46
3. Criação de uma Aplicação com JavaScript
A aplicação a seguir, apesar de simples, integra HTML, CSS e Javascript, 
demonstrando o conceito de validação no lado cliente na prática.
Para tanto, a imagem demonstra a tela que será desenvolvida:
Queremos impor, para este exemplo, as seguintes validações:
 ▪ ID Usuário:
Deve possuir de 5 a 12 caracteres.
 ▪ Senha:
Deve possuir de 7 a 12 caracteres. Deve possuir, pelo menos, um 
número.
 ▪ Nome:
Deve possuir somente letras.
 ▪ Endereço:
Deve possuir somente letras.
 ▪ País:
É preciso selecionar um país.
 ▪ CEP:
Deve possuir somente números.
 ▪ E-mail:
Deve aceitar somente e-mails válidos.
 ▪ Sexo:
Deve ser selecionado.
Práticas de Programação em Sistemas Web 47Será construída uma função central, chamada formValidation(), que 
invocará uma função específica para cada um dos campos a serem 
validados. A saber, são as funções
 validarUsuario(), validarSenha(), validarNome(), validarEndereco(), 
validarPais(), validarCep(), validarEmail() e validarSexo().
Código HTML:
Práticas de Programação em Sistemas Web 48
Mesmo com nosso foco na validação, não devemos relaxar com a 
formatação.
Veja, a seguir, o código-fonte referente ao nosso arquivo .css:
Para facilitar a visualização de nosso script, o arquivo .js foi divido em 
quatro imagens. Observe:
Imagem 1:
Práticas de Programação em Sistemas Web 49
Imagem 2: Imagem 3:
Práticas de Programação em Sistemas Web 50
Imagem 4: Embora os códigos de todas as funções sejam simples e empreguem 
estruturas estudadas, temos como novidades as expressões regulares 
que permitem realizar uma correspondência de texto com um padrão. 
Fizemos uso do método .test(), das expressões regulares, para testar 
se uma correspondência foi encontrada ou não. Este aceita uma string 
que testamos contra uma expressão regular e retorna true ou false, 
dependendo se a correspondência for encontrada ou não. De forma 
similar, também fizemos uso do método .match(), que recupera o 
resultado da correspondência de uma string com uma expressão regular.
Nesse capítulo, vimos que um formulário HTML corresponde à seção de 
um documento que contém controles como campos de texto, campos 
de senha, caixas de seleção, botões de opção, botão de envio, menus e 
muitos outros, visando facilitar ao usuário a inserção de dados que serão 
enviados ao servidor para processamento. 
Entendemos, também, que no mundo da web todas as páginas HTML 
são chamadas de documentos e que o Document Object Model (DOM) 
representa cada uma dessas páginas em uma estrutura em árvore para 
facilitar o acesso e o gerenciamento dos elementos. 
Para tanto, estudamos os principais métodos e propriedades do DOM. 
Além disso, aprendemos a implementar a validação de dados no 
lado cliente, para garantir que todos os campos obrigatórios sejam 
preenchidos e que a forma e o valor estejam corretos, antes de enviá-los 
ao servidor web.
Práticas de Programação em Sistemas Web 51
Referências
ALVES, W. P. Desenvolvimento e design de sites. São Paulo: Érica, 2014.
DEITEL, P. J.; DEITEL, H. M. Ajax Rich Internet Aplications e 
desenvolvimento web para programadores. São Paulo: Pearson Prentice 
Hall, 2009. 
FLANAGAN, D. JavaScript: o guia definitivo. 6 ed. São Paulo: Bookman, 
2013.
FLATSCHART, F. HTML 5: embarque imediato. Rio de Janeiro: Brasport, 
2011.
HAROLD, E. R. Refatorando HTML: como melhorar o projeto de aplicações 
web existentes. Porto Alegre: Bookman, 2010.
LEMAY, L. Aprenda a criar páginas web com HTML e XHTML em 21 dias. 3 
ed. São Paulo: Pearson Education do Brasil, 2002.
MILETTO, E. M.; BERTAGNOLLI, S. C. Desenvolvimento de software II: 
introdução ao desenvolvimento Web com HTML, CSS, JAVASCRIPT e PHP. 
Porto Alegre: Bookman, 2014.
NICK COUGHLIN. CSS: Box Model Basics. 2018. Disponível em: https://
ncoughlin.com/posts/css-box-model-basics/. Acesso em: 10 out. 2020.
SEGURADO, V. S. Projetando a interface com o usuário. São Paulo: Pearson 
Education do Brasil, 2015.
TERUEL, E. C. HTML5 Guia Prático. 2 ed. São Paulo: Érica, 2014.
W3SCHOOLS.COM. CSS Reference. 2020. Disponível em: https://www.
w3schools.com/cssref/default.asp. Acesso em: 10 out. 2020.
W3SCHOOLS.COM. CSS Tutorial. 2020. Disponível em: https://www.
w3schools.com/css/default.asp. Acesso em: 10 out. 2020.
W3SCHOOLS.COM. HTML Element Reference. 2020. Disponível em: 
https://www.w3schools.com/tags/default.asp. Acesso em: 10 out. 2020.
W3SCHOOLS.COM. HTML Tutorial. 2020. Disponível em: https://www.
w3schools.com/html/default.asp. Acesso em: 10 out. 2020.
W3SCHOOLS.COM. JavaScript and HTML DOM Reference. 2020. 
Disponível em: https://www.w3schools.com/jsref/default.asp. Acesso 
em: 10 out. 2020.
W3SCHOOLS.COM. JavaScript Tutorial. 2020. Disponível em: https://
www.w3schools.com/js/default.asp. Acesso em: 10 out. 2020.
Práticas de Programação em Sistemas Web 52
	_GoBack
	JavaScript – Validação e Projeto
	Para Início de Conversa...
	Objetivo 
	1. Boas Práticas
	2. Validação de Formulários
	2.1 Document Object Model (DOM)
	2.2 Javascript e DOM
	2.3 Validando Dados no Formulário
	3. Criação de uma Aplicação com JavaScript
	Referências