PHP E MYSQL AULA 2 – JAVASCRIPT  28-01-2009 Instrutor: Nelson Luis Rodrigues Pereira
AGENDA DA AULA 2 <ul><li>Ferramenta PHPEclipse </li></ul><ul><li>Conceitos de JavaScript </li></ul><ul><li>Formas de apres...
APRESENTAÇÃO DO PHPECLIPSE
PRÁTICA 1 <ul><li>1) Crie dois arquivos HTML com os nomes que quiser. EX: Exe01.html e Exe02.html . </li></ul><ul><li>2)Cr...
PRÁTICA 2 <ul><li>Baixe uma imagem na internet e insira ela através do código. </li></ul><ul><li>Insira outra imagem como ...
Exercícios <ul><li>As questões referem-se ao arquivo Aula11.pdf: </li></ul><ul><ul><li>Passar o texto apresentado para o f...
Exercícios  <ul><ul><li>Passar o texto apresentado para o formato HTML, aplicando a divisão por parágrafos e utilizando a ...
JavaScript <ul><li>Linguagem de Programação criada pela NETSCAPE em 1995. </li></ul><ul><li>Seus Objetivos principais são:...
Características de JS <ul><li>É dinamicamente tipado: tipos não são definidos. </li></ul><ul><li>É interpretada: o código ...
Formas de apresentação do JS <ul><li>Os códigos JS podem vim embutidos em qualquer parte do seu HTML a depender da sua fin...
EXEMPLO <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Primeiro Java Script</title>  </li></ul><ul><li>...
VARIÁVEIS <ul><li>Em JavaScript, as variáveis são criadas automaticamente, através de uma associação de valores simples. <...
EXEMPLO <ul><li>Substitua no código anterior a função  iniciando()  pela função abaixo: </li></ul><ul><li>Curso = “Program...
OPERADORES <ul><li>Aplicados a tipos numéricos: </li></ul><ul><ul><li>Adição (+). </li></ul></ul><ul><ul><li>Subtração ()....
OPERADORES RELACIONAIS <ul><li>Estabelece uma relação ou uma comparação entre variáveis. </li></ul><ul><ul><li>Menor que (...
OPERADORES LÓGICOS <ul><li>Estabelece uma relação lógica entre as variáveis ou valores. </li></ul><ul><ul><li>&& (AND): O ...
ESTRUTURAS CONDICIONAIS <ul><li>IF...ELSE: Comando utilizado para criação de condições, ou seja, dado uma condição, se est...
ESTRUTUTAS CONDICIONAIS <ul><li>CASE: Comando de seleção múltipla, onde tenta encontrar uma igualdade para executar os com...
ESTRUTURAS DE LOOP <ul><li>FOR: Uma estrutura de repetição de comandos com a seguinte forma: </li></ul><ul><li>for (criaçã...
ESTRUTURA DE LOOP <ul><li>WHILE: Executa uma ou várias ações enquanto uma condição for verdadeira. </li></ul><ul><li>While...
EXEMPLOS <ul><li>EXEMPLO 1:  Vamos trabalhar a validação de um campo telefone de tamanho 9, para não aceitar letras e o qu...
EXEMPLOS <ul><li>EXEMPLO 2:  Vamos agora verificar se os campos email, nome e telefone estão vazios </li></ul><ul><ul><li>...
FUNÇÕES <ul><li>Funções em JavaScript são declaradas como em outras linguagens, usando a palavra reservada  function  junt...
FUNÇÕES <ul><li>Existe uma biblioteca de funções intrínsecas do JavaScript. </li></ul><ul><li>As mais utilizadas são as qu...
FUNÇÕES DE MENSAGENS <ul><li>ALERT:  Mostrar um aviso ou uma observação ao usuário. </li></ul><ul><ul><li>alert ( &quot;me...
FUNÇÕES INSTRÍNSECAS <ul><li>eval( ) ­ Calcula o conteúdo da string; </li></ul><ul><li>parseInt( ) ­ Transforma string em ...
FUNÇÕES DE STRING <ul><li>SuaString.length ­ retorna o tamanho da string (quantidade de caracteres) </li></ul><ul><li>SuaS...
FUNÇÕES DE STRING <ul><li>SuaString.toUpperCase( ) ­ Transforma o conteúdo da string   para maiúsculo (Caixa Alta) </li></...
FUNÇÕES DE DATA E HORA <ul><li>Date() ­ Retorna a data do dia na seguinte ordem: Dia da Semana, Mês, Dia, Hora, Minutos,  ...
EVENTOS <ul><li>São  ações que ocorrem dentro da página  com alguns dos  elementos HTML  que  podem  ou  não  apresentar u...
EVENTOS <ul><li>onFocus:  Ocorre quando o objeto recebe o focus. Válido para os objetos Text, Select e Textarea. </li></ul...
JANELA <ul><li>Uma das aplicações interessantes de JavaScript é a criação de janelas durante a exibição de um site. </li><...
JANELA <ul><li>ABRINDO JANELAS: </li></ul><ul><li>Opções:  São as opções que definem as características da  janela, quais ...
JANELA <ul><li>ABRINDO DOCUMENTO: </li></ul><ul><li>Para abrir um documento dentro da janela, deve ser utilizado o seguint...
JANELA <ul><li>FECHANDO DOCUMENTO: </li></ul><ul><li>Para fechar o documento, utilize o seguinte método: </li></ul><ul><li...
EXEMPLO <ul><li>Vamos elaborar um exemplo em que temos dois campos check para que se escolha qual empresa será exibida em ...
VALIDANDO FORMULÁRIOS <ul><li>O que validar? </li></ul><ul><ul><li>Campos obrigatórios </li></ul></ul><ul><ul><li>Campos c...
EXERCÍCIOS DE AULA <ul><li>EXERCÍCIO 1: Definir uma máscara para o campo telefone. </li></ul><ul><ul><li>A criação de másc...
EXERCÍCIOS <ul><li>EXERCÍCIO 1: </li></ul><ul><ul><li>Elaborarem  uma  calculadora  que  realizem  as   quatro operações b...
EXERCÍCIOS <ul><li>EXERCÍCIO 2: </li></ul><ul><ul><li>Elabore um formulário com os campos Nome, Endereço, Telefone, CNPJ, ...
PROJETO – SEMANA I <ul><li>Definição dos Grupos: Individual ou grupos de 2 ou 3 pessoas. </li></ul><ul><li>Definição do Te...
PROJETO – SEMANA I <ul><li>Horários de orientação: </li></ul><ul><ul><li>Segunda e quarta a tarde, a partir das 15h </li><...
Próximos SlideShares
Carregando em…5
×

Aula2

983 visualizações

Publicada em

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Aula2

  1. 1. PHP E MYSQL AULA 2 – JAVASCRIPT 28-01-2009 Instrutor: Nelson Luis Rodrigues Pereira
  2. 2. AGENDA DA AULA 2 <ul><li>Ferramenta PHPEclipse </li></ul><ul><li>Conceitos de JavaScript </li></ul><ul><li>Formas de apresentação do Java Script </li></ul><ul><li>Variáveis </li></ul><ul><li>Operadores </li></ul><ul><li>Estruturas condicionais </li></ul><ul><li>Estruturas de repetição </li></ul><ul><li>Funções </li></ul><ul><li>Eventos e Validação de Formulários </li></ul><ul><li>Janelas </li></ul>
  3. 3. APRESENTAÇÃO DO PHPECLIPSE
  4. 4. PRÁTICA 1 <ul><li>1) Crie dois arquivos HTML com os nomes que quiser. EX: Exe01.html e Exe02.html . </li></ul><ul><li>2)Crie um link no arquivo Exe01.html para o arquivo Exe02.html . </li></ul><ul><li>3)No arquivo Exe02 crie um link para http://www.softeam.com.br </li></ul><ul><li>4)Crie um link para o arquivo aula2.pdf. </li></ul><ul><li>5)Crie um link para o seu email. </li></ul><ul><li>6)Crie uma âncora para um trecho dentro da sua página. </li></ul>
  5. 5. PRÁTICA 2 <ul><li>Baixe uma imagem na internet e insira ela através do código. </li></ul><ul><li>Insira outra imagem como pano de fundo da página. </li></ul>
  6. 6. Exercícios <ul><li>As questões referem-se ao arquivo Aula11.pdf: </li></ul><ul><ul><li>Passar o texto apresentado para o formato HTML, aplicando a divisão de parágrafos. </li></ul></ul><ul><ul><li>Aplicar 3 níveis de cabeçalho ao texto. </li></ul></ul><ul><ul><li>Aplicar alinhamento ao texto. </li></ul></ul><ul><ul><li>Aplicar linhas horizontais para separar partes do texto. </li></ul></ul><ul><ul><li>Aplicar 5 formatações de fontes diferentes no texto, mudando FACE, SIZE e COLOR. </li></ul></ul><ul><ul><li>Aplicar 5 os Estilos de Textos. </li></ul></ul>
  7. 7. Exercícios <ul><ul><li>Passar o texto apresentado para o formato HTML, aplicando a divisão por parágrafos e utilizando a tag BR para delimitar os tópicos. </li></ul></ul><ul><ul><li>Aplicar as formatações de fonte e estilo apresentadas no texto. </li></ul></ul><ul><ul><li>Aplicar cor de fundo e estabelecer uma cor padrão para o texto que não seja o branco. </li></ul></ul><ul><ul><li>Aplicar um nível de texto para o dois títulos do texto e um outro para a fonte do texto. </li></ul></ul><ul><ul><li>Buscar um texto na Internet, transformar para HTML e aplicar todas as tags vistas em sala de aula. </li></ul></ul>
  8. 8. JavaScript <ul><li>Linguagem de Programação criada pela NETSCAPE em 1995. </li></ul><ul><li>Seus Objetivos principais são: </li></ul><ul><ul><li>Validação de formulários no lado cliente </li></ul></ul><ul><ul><li>Interação com a página. </li></ul></ul><ul><li>Sua união com HTML e CSS resultou no DHTML: </li></ul><ul><ul><li>Modificação dinâmica de estilos </li></ul></ul><ul><li>Serviu de base para a construção do Mozilla e o desenvolvimento do Action Script. </li></ul>
  9. 9. Características de JS <ul><li>É dinamicamente tipado: tipos não são definidos. </li></ul><ul><li>É interpretada: o código é lido e interpretado diretamente. </li></ul>
  10. 10. Formas de apresentação do JS <ul><li>Os códigos JS podem vim embutidos em qualquer parte do seu HTML a depender da sua finalidade. </li></ul><ul><li>Preferencialmente, os scripts devem vim no HEAD, dentro da TAG <SCRIPT>...</SCRIPT> </li></ul><ul><li>Para scripts aplicados em layout, costuma se utilizar scripts em arquivos separados com a extensão .js </li></ul>
  11. 11. EXEMPLO <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Primeiro Java Script</title> </li></ul><ul><li><script language=&quot;JavaScript&quot;> </li></ul><ul><li><!-- </li></ul><ul><li>function iniciando() </li></ul><ul><li>{alert(&quot;Seu nome é &quot;+document.form.nome.value); </li></ul><ul><li>} </li></ul><ul><li>--> </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><form action=&quot;Exemplo1.php&quot; method=&quot;post&quot; name=&quot;form“ onSubmit=&quot;iniciando()&quot;> </li></ul><ul><li>Nome: <Input type=&quot;text&quot; name=&quot;nome&quot; /> </li></ul><ul><li><Input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Confirme&quot; /> </li></ul><ul><li></form> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  12. 12. VARIÁVEIS <ul><li>Em JavaScript, as variáveis são criadas automaticamente, através de uma associação de valores simples. </li></ul><ul><li>As variáveis podem ser globais e locais. </li></ul><ul><li>GLOBAIS: Variáveis que são declaradas fora de uma função e que podem ser usado em qualquer contexto. </li></ul><ul><li>LOCAIS: São variáveis declaradas dentro de uma função que só podem ser acessadas no contexto dessa função. Para sua declaração faz-se necessário o uso da palavra reservada VAR antes do nome da variável. </li></ul><ul><li>EX: var Curso = “Programação para Web” </li></ul>
  13. 13. EXEMPLO <ul><li>Substitua no código anterior a função iniciando() pela função abaixo: </li></ul><ul><li>Curso = “Programação para Web” </li></ul><ul><li>function inicializando() { </li></ul><ul><li>alert (“Seu nome é “+document.form.nome.value +” do curso “+Curso); </li></ul><ul><li>} </li></ul><ul><li>A seguir, acrescente uma variável local Curso na função iniciando() . </li></ul>
  14. 14. OPERADORES <ul><li>Aplicados a tipos numéricos: </li></ul><ul><ul><li>Adição (+). </li></ul></ul><ul><ul><li>Subtração (). </li></ul></ul><ul><ul><li>Multiplicação (*) </li></ul></ul><ul><ul><li>Divisão (/) </li></ul></ul><ul><ul><li>Módulo da Divisão (%) </li></ul></ul><ul><ul><li>Incremento ou decremento: i++ ou ++i ; i-- ou --i. </li></ul></ul>
  15. 15. OPERADORES RELACIONAIS <ul><li>Estabelece uma relação ou uma comparação entre variáveis. </li></ul><ul><ul><li>Menor que (<) e Menor ou igual (<=) </li></ul></ul><ul><ul><li>Maior que (>) e Maior ou igual (>=) </li></ul></ul><ul><ul><li>Igual (==) </li></ul></ul><ul><ul><li>Diferente (!=) </li></ul></ul>
  16. 16. OPERADORES LÓGICOS <ul><li>Estabelece uma relação lógica entre as variáveis ou valores. </li></ul><ul><ul><li>&& (AND): O resultado é verdadeiro se todos os seus valores são verdadeiros. </li></ul></ul><ul><ul><li>|| (OR): O resultado é verdadeiro se pelo menos um for verdadeiro. </li></ul></ul>
  17. 17. ESTRUTURAS CONDICIONAIS <ul><li>IF...ELSE: Comando utilizado para criação de condições, ou seja, dado uma condição, se esta for verdadeira faça tais comandos, caso contrário faça tais comandos. </li></ul>
  18. 18. ESTRUTUTAS CONDICIONAIS <ul><li>CASE: Comando de seleção múltipla, onde tenta encontrar uma igualdade para executar os comandos referentes a ela. </li></ul><ul><li>A sintaxe é a mesma de Java, usando switch e case. </li></ul>
  19. 19. ESTRUTURAS DE LOOP <ul><li>FOR: Uma estrutura de repetição de comandos com a seguinte forma: </li></ul><ul><li>for (criação da variável de controle; condição de parada do loop; incremento da variável de controle) </li></ul><ul><li>{ </li></ul><ul><li>comandos </li></ul><ul><li>} </li></ul>
  20. 20. ESTRUTURA DE LOOP <ul><li>WHILE: Executa uma ou várias ações enquanto uma condição for verdadeira. </li></ul><ul><li>While (condição){ </li></ul><ul><li>comandos </li></ul><ul><li>} </li></ul>
  21. 21. EXEMPLOS <ul><li>EXEMPLO 1: Vamos trabalhar a validação de um campo telefone de tamanho 9, para não aceitar letras e o quinto caracter ser “-”. </li></ul><ul><ul><li>Aplicar a função charAt </li></ul></ul><ul><ul><li>Neste exemplo veremos uma outra forma de chamar funções javaScript numa página. </li></ul></ul><ul><ul><li>Será criada uma função é dígito para verificar se um número é digito ou não </li></ul></ul><ul><ul><li>Será criada uma função para verificar se o hífen está na posição correta. </li></ul></ul>
  22. 22. EXEMPLOS <ul><li>EXEMPLO 2: Vamos agora verificar se os campos email, nome e telefone estão vazios </li></ul><ul><ul><li>Criar a função isNull() para verificar se os campos estão vazios </li></ul></ul>
  23. 23. FUNÇÕES <ul><li>Funções em JavaScript são declaradas como em outras linguagens, usando a palavra reservada function juntamente com o nome dado a função e os seus parâmetros, caso existam. </li></ul><ul><li>As chamadas as funções podem ser feitas dentro de outras funções de Scripts ou por algum elemento ou propriedade do HTML como visto nos exemplos anteriores. </li></ul>
  24. 24. FUNÇÕES <ul><li>Existe uma biblioteca de funções intrínsecas do JavaScript. </li></ul><ul><li>As mais utilizadas são as que servem para manipular Strings, Operações Matemáticas e Datas. </li></ul><ul><li>Nos Slides a seguir são apresentadas algumas dessas funções para uso em exercícios posteriores. </li></ul>
  25. 25. FUNÇÕES DE MENSAGENS <ul><li>ALERT:  Mostrar um aviso ou uma observação ao usuário. </li></ul><ul><ul><li>alert ( &quot;mensagem&quot; ); </li></ul></ul><ul><li>CONFIRM:  Exibe uma mensagem que retorna uma confirmação de OK ou Cancelar. </li></ul><ul><ul><li>confirm (&quot;mensagem&quot;); </li></ul></ul><ul><li>PROMPT:  Exibe uma caixa em que serão solicitadas informações do usuário. </li></ul><ul><ul><li>UmaVariável = prompt (&quot;Minha mensagem&quot;, &quot;Meu texto&quot;) ; </li></ul></ul>
  26. 26. FUNÇÕES INSTRÍNSECAS <ul><li>eval( ) ­ Calcula o conteúdo da string; </li></ul><ul><li>parseInt( ) ­ Transforma string em inteiro; </li></ul><ul><li>parseFloat( ) ­ Transforma string em número com ponto flutuante. </li></ul><ul><li>date( ) ­ Retorna a data e a hora. </li></ul>
  27. 27. FUNÇÕES DE STRING <ul><li>SuaString.length ­ retorna o tamanho da string (quantidade de caracteres) </li></ul><ul><li>SuaString.charAt(posição) ­ retorna o caracter da posição especificada (inicia em 0) </li></ul><ul><li>SuaString.indexOf(&quot;busca&quot;) ­ retorna o número da posição onde começa a primeira &quot;busca&quot; </li></ul><ul><li>SuaString.lastIndexOf(&quot;busca&quot;) ­ retorna o número da posição onde começa a última busca </li></ul><ul><li>SuaString.substring(index1, index2) ­ retorna oconteúdo da string que corresponde ao intervalo especificado. Começando no caracter posicionado em index1 e terminando no caracter imediatamente anterior ao valor especificado em index2. </li></ul>
  28. 28. FUNÇÕES DE STRING <ul><li>SuaString.toUpperCase( ) ­ Transforma o conteúdo da string  para maiúsculo (Caixa Alta) </li></ul><ul><li>SuaString.toLowerCase( ) ­ Transforma o conteúdo da string  para minúsculo (Caixa Baixa) </li></ul><ul><li>escape (&quot;string&quot;) ­ retorna o valor ASCII da string (vem  precedido de %) </li></ul><ul><li>unscape(&quot;string&quot;) ­ retorna o caracter a partir de um valor  ASCII (precedido de %) </li></ul>
  29. 29. FUNÇÕES DE DATA E HORA <ul><li>Date() ­ Retorna a data do dia na seguinte ordem: Dia da Semana, Mês, Dia, Hora, Minutos,  Segundos , Codificação , Ano. </li></ul><ul><li>getDate( )    Obtém o dia do mês (numérico de 1 a 31) </li></ul><ul><li>getDay( )    Obtém o dia da semana (0 a 6) </li></ul><ul><li>getMonth( ) Obtém o mês (numérico de 0 a 11) </li></ul><ul><li>getYear( ) Obtém o ano </li></ul><ul><li>getHours( ) Obtém a hora (numérico de 0 a 23) </li></ul><ul><li>getMinutes( ) Obtém os minutos (numérico de 0 a 59) </li></ul><ul><li>getSeconds( ) Obtém os segundos (numérico de 0 a 59) </li></ul>
  30. 30. EVENTOS <ul><li>São ações que ocorrem dentro da página com alguns dos elementos HTML que podem ou não apresentar um conjunto de comandos JS associados a elas. </li></ul><ul><li>Alguns eventos são: </li></ul><ul><ul><li>onLoad: Ocorre na carga do documento. Ou seja, só ocorre no BODY do documento </li></ul></ul><ul><ul><li>onUnload: Ocorre na descarga (saída) do documento. Também só ocorre no BODY </li></ul></ul><ul><ul><li>onChange: Ocorre quando o objeto perde o foco e há mudança de conteúdo. Válido para os objetos Text, Select e Textarea </li></ul></ul>
  31. 31. EVENTOS <ul><li>onFocus: Ocorre quando o objeto recebe o focus. Válido para os objetos Text, Select e Textarea. </li></ul><ul><li>onClick: Ocorre quando o objeto recebe um Click do Mouse.Válido para os objetos Buton, Checkbox, Radio, Link, Reset e Submit. </li></ul><ul><li>onMouseOver: Ocorre quando o ponteiro do mouse está sobre o objeto. Válido para Links e Imagens. </li></ul><ul><li>onMouseOut: Ocorre quando o ponteiro do mouse sai de cima do objeto. Válido para Links, Imagens e Camadas. </li></ul><ul><li>onSelect: Ocorre quando o objeto é selecionado. Válido para os objetos Text e Textarea. </li></ul><ul><li>onSubmit: Ocorre quando um botão tipo Submit recebe um click do mouse. </li></ul>
  32. 32. JANELA <ul><li>Uma das aplicações interessantes de JavaScript é a criação de janelas durante a exibição de um site. </li></ul><ul><li>ABRINDO JANELAS: </li></ul><ul><li>Variavel = window.open (&quot;Url&quot;, &quot;Nome da janela&quot;, &quot;Opções&quot;) </li></ul><ul><li>Onde: </li></ul><ul><ul><li>Variavel: Nome que será atribuido como propriedade da janela. </li></ul></ul><ul><ul><li>Url: Endereço Internet onde a janela será aberta. Normalmente voce estará utilizando a sua própria Url, neste caso, preencha com &quot;&quot;. </li></ul></ul><ul><ul><li>Nome da Janela: É um nome que identficará a janela (não confundir com as tags <title></title> ) </li></ul></ul>
  33. 33. JANELA <ul><li>ABRINDO JANELAS: </li></ul><ul><li>Opções: São as opções que definem as características da janela, quais sejam: </li></ul><ul><ul><li>toolbar: Cria uma barra de ferramentas tipo &quot;Back&quot;, &quot;Forward&quot;, etc. </li></ul></ul><ul><ul><li>location: Abre a barra de location do browser </li></ul></ul><ul><ul><li>directories: Abre a barra de ferramentas tipo &quot;What's New&quot;, &quot;Handbook&quot;, etc. </li></ul></ul><ul><ul><li>status: Abre uma barra de status no rodapé da janela </li></ul></ul><ul><ul><li>scrollbars: Abre barras de rolamento vertical e horizontal </li></ul></ul><ul><ul><li>menubar: Cria uma barra de menu tipo &quot;File&quot;, &quot;Edit&quot;, etc. </li></ul></ul><ul><ul><li>resizable: Permite ao usuário redimencionar a janela </li></ul></ul><ul><ul><li>width: Especifica a largura da janela, em pixels </li></ul></ul><ul><ul><li>height: Especifica a altura da janela, em pixels </li></ul></ul>
  34. 34. JANELA <ul><li>ABRINDO DOCUMENTO: </li></ul><ul><li>Para abrir um documento dentro da janela, deve ser utilizado o seguinte método: </li></ul><ul><ul><li>Variavel.document.open( ) </li></ul></ul><ul><ul><li>Onde &quot;Variavel&quot; é o nome da variável associada ao método window.open. </li></ul></ul><ul><li>ESCREVER NO DOCUMENTO: </li></ul><ul><li>Para escrever a tela no documento, deve ser utilizado o seguinte método: </li></ul><ul><ul><li>Variavel.document.write (&quot;Comandos html, Comandos JavaScript, Textos, etc.&quot;) </li></ul></ul>
  35. 35. JANELA <ul><li>FECHANDO DOCUMENTO: </li></ul><ul><li>Para fechar o documento, utilize o seguinte método: </li></ul><ul><li>Variavel.document.close ( ) </li></ul><ul><li>FECHANDO JANELA: </li></ul><ul><li>Para fechar a janela, utilize o seguinte método: </li></ul><ul><li>Variavel.window.close( ) </li></ul>
  36. 36. EXEMPLO <ul><li>Vamos elaborar um exemplo em que temos dois campos check para que se escolha qual empresa será exibida em nova janela </li></ul>
  37. 37. VALIDANDO FORMULÁRIOS <ul><li>O que validar? </li></ul><ul><ul><li>Campos obrigatórios </li></ul></ul><ul><ul><li>Campos com limite de espaço (mínimo e máximo) </li></ul></ul><ul><ul><li>Campos com formato específico, como data, hora, cpf, cnpj, dentre outros. </li></ul></ul><ul><li>Como validar? </li></ul><ul><ul><li>Definir qual evento será utilizado para fazer a validação. </li></ul></ul>
  38. 38. EXERCÍCIOS DE AULA <ul><li>EXERCÍCIO 1: Definir uma máscara para o campo telefone. </li></ul><ul><ul><li>A criação de máscaras em JavaScript utiliza o que chamamos de expressão regulares. </li></ul></ul><ul><ul><li>Aqui não utilizaremos Expressões regulares, mas a função substring de strings. </li></ul></ul><ul><ul><li>Utiliza-se também o evento KeyPress dos Campos input. </li></ul></ul>
  39. 39. EXERCÍCIOS <ul><li>EXERCÍCIO 1: </li></ul><ul><ul><li>Elaborarem  uma  calculadora  que  realizem  as  quatro operações básicas.  </li></ul></ul><ul><ul><li>Vocês  irão  obter  as  informações  do  usuário  atr avés  de  três  perguntas  usando prompt  (Operando 1, Operando 2 e Operador) e escrever no html o  resultado da  seguinte  forma: “O resultado de “+Operando1+” “+Operador+” “+Operando2+” é “+TOTAL. </li></ul></ul><ul><ul><li>Agora farão com que o usuário escolha quando quer parar de usar a calcular, ou seja,  de  relizar  as  operações.  Para  tanto  deverão  usar  mais  um  prompt  perguntando  se deseja continuar. Em caso afirmativo retorna ao início para realizar uma nova operação (sem o acúmulo de resultados antigos). Em caso negativo retorne um alert dizendo que ele saiu do sistema. </li></ul></ul><ul><ul><li>O  próximo  passo  é  acrescentar  a  calculadora  as  operações  de Cosseno,  seno,  tangente, logaritmo, raiz quadrada e potência </li></ul></ul>
  40. 40. EXERCÍCIOS <ul><li>EXERCÍCIO 2: </li></ul><ul><ul><li>Elabore um formulário com os campos Nome, Endereço, Telefone, CNPJ, CPF, Email, CEP. </li></ul></ul><ul><ul><li>Os campos Nome, email e Telefone devem ser obrigatórios. </li></ul></ul><ul><ul><li>Os campos Endereço e CEP são facultativos </li></ul></ul><ul><ul><li>Os campos CNPJ não devem estar vazios ao mesmo tempo e nem preenchidos ao mesmo tempo. Somente um dos dois deve ser preenchido. </li></ul></ul><ul><ul><li>Crie as máscaras para CNPJ, CPF, Email e CEP </li></ul></ul><ul><ul><li>Acrescente um combo para que o usuário escolha o estado pela Sigla. </li></ul></ul><ul><ul><li>Ao confirmar devem ser exibidas numa outra janela todos os dados que foram informados, e o estado deve ser mostrado pelo nome e não pela sigla. </li></ul></ul>
  41. 41. PROJETO – SEMANA I <ul><li>Definição dos Grupos: Individual ou grupos de 2 ou 3 pessoas. </li></ul><ul><li>Definição do Tema: Definir qual o tipo de sistemas ou site irá desenvolver e fazer uma pesquisa. </li></ul><ul><li>Criação de Interfaces: Começar a definir as interfaces dos formulários, e dos outros arquivos, como menu e apresentação </li></ul><ul><li>Validações de Formulários </li></ul>
  42. 42. PROJETO – SEMANA I <ul><li>Horários de orientação: </li></ul><ul><ul><li>Segunda e quarta a tarde, a partir das 15h </li></ul></ul><ul><ul><li>Sábado, a partir das 8h </li></ul></ul><ul><ul><li>Outros horários a combinar. </li></ul></ul><ul><li>Data entrega por email: 06/02/2009, até às18h </li></ul><ul><li>Deve-se entregar os arquivos fontes e documento com uma descrição de como foram compridas as etapas solicitadas. </li></ul>

×