Your SlideShare is downloading. ×
Aula2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Aula2

829
views

Published on

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
829
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
68
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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