UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas

Apresentação em tema: "UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas"— Transcrição da apresentação:

1 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas
Programação para Aplicações WEB Profa. Semíramis Assis 2015.2

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.

3 Estrutura dos arquivos de um projeto

4 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.

5 Introdução ao Javascript
Estrutura básica dentro de uma página HTML: Toda parte Javascript é delimitada com a tag <script>. Propriedade “language” é opcional.

6 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.

7 Introdução ao Javascript
Funções são chamadas através de eventos: Eventos de Objetos: onLoad onResize Eventos de teclado: onKeyDown onKeyPress onKeyUp Eventos de mouse: onClick onDbClick onMouseOver onMouseDown onMouseMove onMouseOut onMouseUp Eventos de formulário: onBlur onFocus onChange onReset onSelect onSubmit

8 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.

9 Introdução ao Javascript
Exemplo: Campo tem o foco automático no carregamento da página. Chamada da função:

10 Introdução ao Javascript
Exercício! Utilizar os seguintes eventos em campos de texto e verificar seus funcionamentos: onKeyDown onKeyUp onFocus onBlur

11 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.

12 Introdução ao Javascript
Abrindo uma nova janela com controle da aparência: Chamada da função no botão:

13 Introdução ao Javascript
Abrindo uma nova janela, de forma simples: OU

14 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.

15 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).

16 Introdução ao Javascript
Validando campos Instruções para validação: if - else for switch While Operadores lógicos 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 -> !

17 Introdução ao Javascript

18 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();

19 Introdução ao Javascript
Exercício! Fazer um formulário em uma página HTML contendo campos texto (nome, e telefone). Validar os campos nome e como obrigatórios. Caso o campo telefone esteja vazio na submissão, preencher com o valor

20 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.”.

21 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.

22 Introdução ao Javascript
Bibliografia: