Aula2

PHP E MYSQL AULA 2 – JAVASCRIPT 28-01-2009 Instrutor: Nelson Luis Rodrigues Pereira

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

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.

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.

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.

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.

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.

Características de JS É dinamicamente tipado: tipos não são definidos. É interpretada: o código é lido e interpretado diretamente.

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

EXEMPLO <html> <head> <title> Primeiro Java Script</title> <script language="JavaScript">  </script> </head> <body> <form action="Exemplo1.php" method="post" name="form“ onSubmit="iniciando()"> Nome: <Input type="text" name="nome" /> <Input type="submit" name="submit" value="Confirme" /> </form> </body> </html>

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”

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

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.

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 (!=)

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.

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.

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.

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 }

ESTRUTURA DE LOOP WHILE: Executa uma ou várias ações enquanto uma condição for verdadeira. While (condição){ comandos }

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.

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

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.

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.

FUNÇÕES DE MENSAGENS ALERT: Mostrar um aviso ou uma observação ao usuário. alert ( "mensagem" ); CONFIRM: Exibe uma mensagem que retorna uma confirmação de OK ou Cancelar. confirm ("mensagem"); PROMPT: Exibe uma caixa em que serão solicitadas informações do usuário. UmaVariável = prompt ("Minha mensagem", "Meu texto") ;

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.

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("busca") retorna o número da posição onde começa a primeira "busca" SuaString.lastIndexOf("busca") 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.

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 ("string") retorna o valor ASCII da string (vem precedido de %) unscape("string") retorna o caracter a partir de um valor ASCII (precedido de %)

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)

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

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.

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 ("Url", "Nome da janela", "Opções") 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 "". Nome da Janela: É um nome que identficará a janela (não confundir com as tags <title></title> )

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 "Back", "Forward", etc. location: Abre a barra de location do browser directories: Abre a barra de ferramentas tipo "What's New", "Handbook", 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 "File", "Edit", 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

JANELA ABRINDO DOCUMENTO: Para abrir um documento dentro da janela, deve ser utilizado o seguinte método: Variavel.document.open( ) Onde "Variavel" é 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 ("Comandos html, Comandos JavaScript, Textos, etc.")

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

EXEMPLO Vamos elaborar um exemplo em que temos dois campos check para que se escolha qual empresa será exibida em nova janela

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.

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.

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

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.

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

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.

Aula2

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Aula2

Aula2