UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas
Programação para Aplicações WEB
Profa. Semíramis Assis
2015.2
Estrutura dos arquivos em um projeto


Em um projeto Web,
cada arquivo deve ser
criado e mantido em
uma pasta específica,
como a pasta imagens,
css, scripts.
Desta forma, é possível
utilizar
o
caminho
relativo dos arquivos,
referenciando a pasta
ao qual ele pertence.
Estrutura dos arquivos de um projeto
Introdução ao Javascript







Linguagem de Script para Web.
Validação de campos em formulários.
Submissão de formulários.
Agrega funções à página HTML.
Pode ser utilizado para debugação da página.
É case sensitive (diferencia minúsculas de
maiúsculas).
Não é obrigatório inserção de ‘;’ no final de
cada linha.
Introdução ao Javascript

Estrutura básica
dentro de uma
página HTML:


Toda parte Javascript
é delimitada com a
tag <script>.
Propriedade
“language” é
opcional.
Introdução ao Javascript

Estrutura:




Comandos são
organizados em funções
(function).
Funções podem ou não
retornar valor.
Funções podem ou não
possuir parâmetros.
Comandos fora de
funções são executados
automaticamente ao
carregar a página.
Introdução ao Javascript

Funções são chamadas através
de eventos:

Eventos de Objetos:



Eventos de teclado:




onLoad
onResize
onKeyDown
onKeyPress
onKeyUp
Eventos de mouse:







onClick
onDbClick
onMouseOver
onMouseDown
onMouseMove
onMouseOut
onMouseUp

Eventos de
formulário:






onBlur
onFocus
onChange
onReset
onSelect
onSubmit
Introdução ao Javascript

Tipos de dados


String – Principais atributos:

Length – comprimento (em caracteres);

indexOf(“texto”) – Pesquisa existência
de ‘texto’ dentro da string;

Replace() – Substitui um caracter ou
conjunto de caracter por outro em uma
string;

toUpperCase() e toLowerCase() –
Colocar a string em maiúscula ou
minúscula;

Split(‘separador’) – Quebra a String em
um array contendo a separação
informada em ‘separador’;

Substr() – Retorna uma substring da
string informada;
Date – Principais atributos:

getTime() – Retorna a data e hora atual
da máquina em milissegundos;

getDay() – Retorna o dia da semana;
getDate() – Retorna o dia do mês;

getHours() – Retorna a hora (0-23);

getMinutes() – Retorna os minutos;

getSeconds() – Retorna os segundos;

toString() – Converte a data em String.



Number – Principais atributos:

isNaN(valor) – Not a number. Indica
se o número testado (valor) é um
número ou não.

toString() – Converte o número em
String.
Boolean – Principais atributos:

toString() – Converte em String;

valueOf() – Retorna o valor do
objeto.
Array – Principais características:

Podem existir diferentes objetos
dentro de um mesmo array (data,
string, funções), pois tudo em
javascript é objeto;

Length – Tamanho (comprimento);

indexOf(“valor”) – Posição do texto
“valor” no array.

Pode ser criado de diferentes
formas.
Introdução ao Javascript

Exemplo:

Campo tem o foco automático no carregamento
da página.
•Chamada da função:
Introdução ao Javascript

Exercício! Utilizar os seguintes eventos
em campos de texto e verificar seus
funcionamentos:




onKeyDown
onKeyUp
onFocus
onBlur
Introdução ao Javascript

Algumas funções importantes:

Objeto Window (janela)








Name – Define ou retorna o nome de uma janela.
Alert() – Exibe uma mensagem na tela.
Blur() – Remove o foco da janela atual.
Close() – Fecha a janela.
createPopup() – Cria uma janela popup.
Focus() – Dá foco à janela.
Open() – Abre uma nova janela.
Print() – Imprime o conteúdo da janela.
Introdução ao Javascript

Abrindo uma nova janela com controle da
aparência:
•Chamada da função no botão:
Introdução ao Javascript

Abrindo uma nova janela, de forma simples:
OU
Introdução ao Javascript

Exercício! Chamar uma função
Javascript no carregamento da página
que abra uma nova página em uma
outra janela com a função de impressão
ativada.
Introdução ao Javascript

Validação de formulários:



Podem ser validados campos e exibidas
mensagens com erros.
Validação de ausência de preenchimentos,
tipo de dado incorreto, formato do dado
incorreto.
Validação ocorre no lado cliente
(navegador) e por isso é passível a falhas
(desativação de scripts no navegador).
Introdução ao Javascript

Validando campos

Instruções para validação:





Operadores lógicos











if - else
for
switch
While
E -> &&
OU -> ||
Atribuição de valores -> =
Comentários -> //
Incremento -> ++
Decremento -> -Adição ou concatenação -> +
Subtração -> Multiplicação -> *
Divisão -> /
Módulo -> %

Comparações:
 Igual a -> ==
 Exatamente igual a (tipo e
valor) -> ===
 Diferente -> !=
 Exatamente diferente (tipo
e valor) -> !==
 Maior que -> >
 Menor que -> <
 Maior ou igual a -> >=
 Menor ou igual a -> <=
 Negação -> !
Introdução ao Javascript
Introdução a Javascript


Elementos do
formulário podem ser
criados dinamicamente
através dos comandos
createElement() e
appendChild();
Elementos podem ser
removidos do formulário
dinamicamente através
do comando
removeChild();
Introdução ao Javascript

Exercício! Fazer um formulário em uma
página HTML contendo campos texto
(nome, e-mail e telefone). Validar os
campos nome e e-mail como
obrigatórios. Caso o campo telefone
esteja vazio na submissão, preencher
com o valor 123456.
Introdução ao Javascript

Exercício! Fazer um formulário contendo
os campos Senha e Confirmação da
Senha. Validar se os campos são iguais
em valor. Caso sejam, exibir uma
mensagem ao usuário de “Cadastro
efetuado.”. Caso sejam diferentes, exibir
uma mensagem “Senhas não
coincidem.”.
Introdução ao Javascript

Fazer um formulário com um campo
Opção, do tipo radio button, com as
opções SIM e NÃO, que, caso seja
clicado em Sim, insira um novo campo
no formulário de nome Comentário, tipo
texto.
Introdução ao Javascript

Bibliografia:

http://www.w3schools.com/js/