Linguagem Javascript. Referências. Aula 1. O que é JavaScript? Capacidades de Javascript. Tipos de JavaScript
|
|
|
- Ana Clara Valgueiro de Vieira
- 8 Há anos
- Visualizações:
Transcrição
1 Referências Linguagem Javascript João Sérgio S. Assis Núcleo de Computação Eletrônica da UFRJ Tel. (021) Fax. (021) Slides originais: Maurício Bomfim Bibliográficas: Aprenda em 24 horas JavaScript 1.3 Editora Campus Javascript, a Bíblia Danny Goodman Editora Campus Na Internet: Formação de Webmaster NCE/UFRJ 2 Aula 1 Entendendo Javascript O que é possível fazer com Javascript? Embutindo código Javascript numa página Utilizando e armazenando valores Alguns scripts simples O que é JavaScript? Linguagem de script (interpretada) criada pela Netscape-Sun O código fonte é incluído na página HTML Interpretador embutido nos navegadores Sintaxe parecida com C, C++ e Java Características rudimentares de OO Programação dirigida por eventos Javascript não é Java!!! Linguagem de programação completa Linguagem Orientada a objetos Compilada Formação de Webmaster NCE/UFRJ 3 Formação de Webmaster NCE/UFRJ 4 Capacidades de Javascript Interação com o usuário Validação de formulários Manipular o conteúdo da página Manipulação de imagens e animação Detectar versão do navegador Detectar necessidade de instalação de plug-ins Abrir e fechar janelas Ler e escrever o estado do cliente em Cookies Tipos de JavaScript Client-Side JavaScript (Web browser) código é embutido no HTML precisa ser interpretado pelo browser Server-Side JavaScript: LiveWire pode ser usado com Netscape Server alternativa para scripts CGI permite ler e escrever arquivos e bancos de dados no servidor Formação de Webmaster NCE/UFRJ 5 Formação de Webmaster NCE/UFRJ 6 1
2 Versões de Javascript Incluindo javascript numa página Netscape 2.0 Javascript 1.0 Netscape 3.0 Javascript 1.1 Netscape 4.0 Javascript 1.2 Netscape 4.5 Javascript 1.3 Netscape 6.0 Javascript 1.5 I.Explorer 3.0 JScript 1.0 I.Explorer 4.0 JScript 3.0 I.Explorer 5.0 JScript 5.0 Há 3 formas de incluir código numa página Dentro da tag <SCRIPT>... </SCRIPT> No atributo HREF da tag <A>... </A> Num atributo associado a um evento A tag <SCRIPT> Código na página <script language= Javascript > <!-- /* Comandos da Linguagem */ //--> </script> Código num arquivo à parte <script language= Javascript src= arquivo.js ></script> Formação de Webmaster NCE/UFRJ 7 Formação de Webmaster NCE/UFRJ 8 Código incluído na tag <SCRIPT> A tag <SCRIPT> pode ser colocada em qualquer lugar do documento O código é executado na ordem em que aparece na página Quando a tag é incluída na seção <HEAD>, é executado antes da página ser exibida Não é possível fazer referência a elementos HTML ainda não criados Tag <noscript> </noscript> Estrutura da linguagem Letras maiúsculas letras minúsculas Espaços, tabs e newlines são ignorados Comentários // ignora todo o texto até o fim da linha /* ignora todo o texto até a seqüência */ Valores constantes João Sérgio String delimitada por aspas Linguagem Javascript String delimitada por plicas 8, -12 Inteiros na base , Inteiros na base 8 0x5F, -0x10 Inteiros na base Números de ponto flutuante true, false Valores booleanos Formação de Webmaster NCE/UFRJ 9 Formação de Webmaster NCE/UFRJ 10 Declaração e uso de variáveis Nomes de variáveis: Letras, números, _ e $ Não pode começar com número Não pode ser igual a palavra reservada. Ex: true, var, if, etc. Exemplos válidos: var i; // Cria a variável i i = 10; // Guarda o valor 10 dentro de i var i = 2; // Faz as duas coisas ao mesmo tempo i = 11; // A palavra var é opcional a princípio Tipos assumidos dinamicamente i = 11; i = onze ; Entrada e Saída window.prompt Abre uma janela para pedir uma string ao usuário nome = window.prompt( Qual o seu nome, ); window.alert Abre uma janela para exibir um aviso ao usuário window.alert ( Senha incorreta: Acesso negado ); document.write document.writeln Escreve alguma coisa na página document.write( <H1>Minha Página</H1> ); Formação de Webmaster NCE/UFRJ 11 Formação de Webmaster NCE/UFRJ 12 2
3 Meu primeiro Javascript Exemplo: <html> <head><title>meu primeiro Javascript</title></head> <body> <h1>meu primeiro Javascript</h1> <script language= javascript > document.write( <h3>alo mundo!!!</h3> ); </script> <font size=4>acabou o script volta ao html</font> </body> </html> Meu segundo javascript Exemplo: <html><head><title>meu segundo Javascript</title> <script language="javascript"> var nome = window.prompt ( qual o seu nome?, ); </script> </head> <body bgcolor=white> <h2 align=center>esta é a minha página.<hr></h2> <script language="javascript"> document.write ( <h3>seja bemvindo a minha página, ); document.write (nome, </h3><p><hr> ); </script> </body></html> Formação de Webmaster NCE/UFRJ 13 Formação de Webmaster NCE/UFRJ 14 Aula 2 Operadores Operadores Conversão de tipos Desvio condicional Similares a C, C++, Java Aritméticos + - Soma / Subtração * / Multiplicação / Divisão % Resto da divisão ++ Incremento -- Decremento Atribuição = Simples += /= %= Composta Relacionais == Igualdade!= Desigualdade < <= Menor / Menor igual > >= Maior / Maior igual Lógicos! NOT && AND OR Formação de Webmaster NCE/UFRJ 15 Formação de Webmaster NCE/UFRJ 16 Operadores Concatenação de strings (+): nome = joão ; sobrenome = sérgio ; nomecompleto = nome + + sobrenome; Atribuição Composta: a += b; é o mesmo que a = a + b; x *= y; é o mesmo que x = x * y; Notação pré-fixa e pós-fixa x = 10; a = ++x * 2; // x 11 a 22 y = 10; b = y++ * 2; // y 11 b 20 Conversão implícita de tipos Números, strings e booleanos comparados por valor: 3 == 3 // Resultado true 1 && true // Resultado true Concatenação dia = 15; mes = agosto ; data = dia + de + mes; // data 15 de agosto x = 555 ; a = x + 10; // a b = x - 10; // b 545 Formação de Webmaster NCE/UFRJ 17 Formação de Webmaster NCE/UFRJ 18 3
4 Conversão explícita de tipos parseint (str) ou parseint (str,base) Converte uma string num número inteiro Exemplo: num = 3A ; x = parseint(num); // x 3 y = parseint(num,16); // y 58 parsefloat (str) Converte uma string num número real Exemplo: z = parsefloat( 3.15 ); // z 3.15 Comando if - else Permite executar comandos de acordo com uma condição. Sintaxe: if ( condição ) comando; if ( condição ) comando; else comando; Formação de Webmaster NCE/UFRJ 19 Formação de Webmaster NCE/UFRJ 20 Bloco de comandos Forma de colocar mais de um comando sujeito a condição do if. Um conjunto de comandos delimitado por chaves. Sintaxe: comando; comando;... comando; Exemplos de if-else Exemplos: if (estado== RJ ) cidade = Rio de Janeiro ; if ( hora < 12 ) manha = true; document.write ( bom dia! ); else manha = false; document.write ( boa tarde! ); Formação de Webmaster NCE/UFRJ 21 Formação de Webmaster NCE/UFRJ 22 Funções Predefinidas isnan (valor) Retorna true se o valor não for numérico Exemplo: x = window.prompt( Entre um numero:, ); if (isnan(x)) window.alert( Valor não é numérico! ); window.confirm (pergunta) Abre uma janela para pedir uma string ao usuário Exemplo: if (window.confirm( Quer realmente sair da página? )) window.alert( Então adeus! ); Operador condicional ternário Em situações como: if (x == 20) y = 50; else y = 70; Substitui o if: y = (x == 20)? 50 : 70; Formação de Webmaster NCE/UFRJ 23 Formação de Webmaster NCE/UFRJ 24 4
5 Aula 3 Laço while Laço for Comando break Comando continue Sintaxe mínima de funções Funções com parâmetros Usando links para executar funções Laços While Permite repetir um comando ou bloco enquanto uma condição for verdadeira Forma geral: while ( condição ) comandos; Exemplo: var i = 1; while ( i <= 10 ) document.write(i, <br> ); i++; Formação de Webmaster NCE/UFRJ 25 Formação de Webmaster NCE/UFRJ 26 Laços do - while Laços For Repete um bloco de comandos enquanto uma condição for verdadeira. Teste da condição é realizado no final da iteração. Comandos são executados pelo menos uma vez Exemplo: var i = 0; do document.write (i, <br> ); i++; while ( i <= 10 ); Repete um comando ou bloco controlado por uma variável. Forma geral: for (atribuição; condição; incremento) comandos; Seguinte; Atribuição F condição V Comandos seguinte incremento Formação de Webmaster NCE/UFRJ 27 Formação de Webmaster NCE/UFRJ 28 Separador de comandos no For Vírgula funciona como separador de comandos na atribuição e no incremento. Exemplos: for ( i = 0; i < 5; i++ ) document.write (i, <br> ); document.write ( <h3>tabela de Fatoriais</h3> ); for ( i = 1, fat = 1; i < 6; i++, fat *= i ) document.write(i,!=, fat, <br> ); Comandos Break e Continue Permitem um controle adicional sobre os laços de repetição Break: Pare a repetição já! Continue: Passe para a próxima iteração do laço! Formação de Webmaster NCE/UFRJ 29 Formação de Webmaster NCE/UFRJ 30 5
6 Funções (sintaxe mínima) Funções em Javascript São identificadas por um NOME Podem ou não receber PARÂMETROS Podem ou não retornar um VALOR Parênteses são obrigatórios mesmo sem parâmetros. Declaração x Invocação Sintaxe mínima: Invocação: function nomedafuncao() comandos; nomedafuncao(); Funções com parâmetros Passagem de parâmetros É feita dentro do ( ) que se segue ao nome da função Feita por valor para tipos simples e strings. Definição: function junta (a, b, r) r = a + b; document.write( r =, r, <br> ); Utilização: x = 100; junta ( João, 23, x); document.write( x =, x, <br> ); junta ( 123, 45, x); document.write( x =, x, <br> ); Formação de Webmaster NCE/UFRJ 31 Formação de Webmaster NCE/UFRJ 32 Funções com parâmetros Exemplos: function abretabela (cor, borda) document.writeln ( <table bgcolor=, cor, border=, borda, > ); Chamada: abretabela ( white, 2); Usando links para executar código É possível associar uma função à seleção de um link Exemplo: <script> function clicou() window.alert ( Ei, você clicou!!! ); </script> <a href= javascript:clicou() >Não clique aqui</a> Formação de Webmaster NCE/UFRJ 33 Formação de Webmaster NCE/UFRJ 34 Aula 4 Entendendo objetos Tipos de objeto Objeto String Objeto Array Objeto Math Entendendo objetos Programação Orientada a Objetos Modelo de programação que busca refletir o problema de uma forma mais próxima da realidade. Javascript NÃO É considerada uma linguagem orientada a objetos. O que é um objeto? Forma de agrupar dados para representar estruturas mais complexas. Vinculação entre os dados e as operações neles relizadas. Formação de Webmaster NCE/UFRJ 35 Formação de Webmaster NCE/UFRJ 36 6
7 Métodos, atributos e classes Os dados que compõem um objeto são chamados de atributos ou propriedades. As funções que manipulam estes dados são chamados de métodos. Objetos com os mesmos atributos e operações pertencem a mesma classe. Uma classe funciona como um tipo de dado da linguagem e é possível criar variáveis com estes tipos (chamadas objetos ou instâncias). Classes e Objetos Exemplo: Classe Aluno nome nota trabalho nota prova nota_final() Objeto A nome = joao nota trabalho = 10 nota prova = 8 Objeto B nome = sergio nota trabalho = 7 nota prova = 9 Formação de Webmaster NCE/UFRJ 37 Formação de Webmaster NCE/UFRJ 38 Propriedades e Métodos Propriedades são como variáveis da linguagem, podem ser de qualquer tipo (inclusive um objeto). É possível acessar o valor do nome do aluno através da sintaxe: document.write( Nome =, a.nome); a.nome = João Sérgio ; É possível calcular a nota final através da sintaxe: a.nota_final (); Criação de uma instância Os objetos são criados através de uma função especial chamada construtor. O construtor é executado através do operador new. Exemplo: O código abaixo cria duas variáveis do tipo Aluno. a = new Aluno( João ); b = new Aluno( Sérgio ); a.nota_trabalho = 10; a.nota_prova = 8; b.nota_trabalho = 7; Formação de Webmaster NCE/UFRJ 39 Formação de Webmaster NCE/UFRJ 40 Tipos de objeto Embutidos ou predefinidos Definem alguns tipos de dados compostos úteis. Date, Array, String, Math Do browser Refletem o documento e o navegador Window, Document, Navigator, etc Personalizados Criados pelo programador para representar os dados de seus problema. Objetos String São implementadas em Javascript como objetos embutidos. Atribuindo: nome = Maria de Fátima Rodrigues ; telefone = ; nce = new String( Núcleo de Computação Eletrônica ); Concatenando: dados = nome + : + telefone; Calculando o comprimento da string: tamanho = dados.length; Formação de Webmaster NCE/UFRJ 41 Formação de Webmaster NCE/UFRJ 42 7
8 Alguns métodos de String tolowercase() touppercase() charat (n) indexof (str, p) substring (pi, pf) Converte para minúsculas. Converte para maiúsculas. Retorna o n-ésimo caracter (o primeiro caracter está em zero). Procura str a partir da posição p, se não achar retorna 1. Retorna a string começada em pi e terminada em pf 1. Exemplos: frase = O rato roeu a roupa do rei de roma ; x = frase.indexof ( ro ); // x 7 y = frase.indexof ( ro, 8); // y 14 s = frase. substring (2, 6); // s rato Objeto Array Variável indexada capaz de armazenar um conjunto de valores. Tamanho pode ser alterado dinamicamente. Acessando os elementos: operador [ ] Inicializando: va = new Array(); vb = new Array(39, 40, 100, 49); vc = new Array(30); vc[0] = 39; vc[1] = 40; vc[2] = 100; vc[3] = 49; Formação de Webmaster NCE/UFRJ 43 Formação de Webmaster NCE/UFRJ 44 Métodos e tamanho do Array Consultando o tamanho: tamanho = valores.length; Métodos sort () reverse () Arrays x Strings string.split (sep) array.join (sep) Ordena o vetor. Inverte a ordem dos elementos. Divide uma string num Array, elementos delimitados por sep. Junta elementos de um array numa string, intercalando sep. Objeto Math Usado para efetuar cálculos matemáticos Algumas propriedades PI Valor de PI SQRT2 Raiz quadrada de 2 Alguns Métodos abs(), max(), min() Valor absoluto, máximo e mínimo cos(), sin(), tan() Funções trigonométricas exp(), log() Exponencial e logaritmo round(), ceil(), floor() Truncamento e arredondamento pow(), sqrt() Potência e raiz quadrada random() Gerador de números aleatórios Formação de Webmaster NCE/UFRJ 45 Formação de Webmaster NCE/UFRJ 46 Utilização do Math Este objeto não precisa ser instanciado. Já existe uma instancia criada: Math. Exemplos: Conversão de Graus para radianos radianos = graus * Math.PI / 180; Número aleatório entre 1 e 100 num = Math.floor (Math.random() * 100) + 1; Delta da equação do segundo grau x= -b + Math.sqrt(Math.pow(b,2) - 4*a*c); Aula 5 Retornando valores de funções Variáveis locais Definindo objetos personalizados Criando uma hierarquia de objetos Criando e utilizando métodos Propriedades como métodos Formação de Webmaster NCE/UFRJ 47 Formação de Webmaster NCE/UFRJ 48 8
9 Comando return Interrompe a execução da função e retorna para o local onde a função foi chamada. Exemplo: function montalista() while ( true ) num = window.prompt( Digite um número:, ); if ( parseint(num) == 0 ) return; document.write( <li>, num); Retorno de valores Comando return seguido de uma expressão. Valor é enviado para onde a função foi chamada. Definindo uma função: function quadrado(x) return x * x; Utilização: k = quadrado( quadrado( x ) ); if ( quadrado(x) > 100 ) y = 3 * quadrado (x) + 5; // Como parâmetro // Numa comparação // Numa expressão Formação de Webmaster NCE/UFRJ 49 Formação de Webmaster NCE/UFRJ 50 Variáveis locais Criando objetos personalizados Variáveis locais: Só existem dentro da função, enquanto ela estiver sendo executada. Precisam ser declaradas com var. Exemplo: function quadrado(x) var a = x * x; document.write( a =, a); return a; Permite criar estruturas de dados mais sofisticadas A criação é feita em duas etapas: Definição da classe, através da definição de sua função construtora. a = 10; y = quadrado(5); document.write( a =, a); Criação de uma ocorrência (instância) do objeto com o operador new Formação de Webmaster NCE/UFRJ 51 Formação de Webmaster NCE/UFRJ 52 Definindo o construtor // Definindo a classe Aluno function Aluno(n) this.nome = n; this.nota_trabalho = this.nota_prova = 0; // Criando uma instância (variável da classe) var a = new Aluno( João ); var b = new Aluno( Sérgio ); // Referenciando as propriedades a.nota_trabalho = 10; a.nota_prova = 8; b.nota_trabalho = 7; b.nota_prova = 9; Criando uma hierarquia de objetos // Definindo as classes Data e Aluno function Data(d, m, a) this.dia = d; this.mes = m; this.ano = a; function Aluno(nom, aniv) this.nome = n; this.aniversario = aniv; this.nota_trabalho = this.nota_prova = 0; // Criando instâncias (variáveis da classe) d = new Data(11, 2, 1969); a = new Aluno( João, d); // Referenciando às propriedades a.aniversario.dia = 10; a.aniversario.mes = 3; Formação de Webmaster NCE/UFRJ 53 Formação de Webmaster NCE/UFRJ 54 9
10 Criando um método // Definindo a classe Aluno function media ( ) return (this.nota_trabalho + this.nota_prova) / 2; function Aluno (nom, d, m, a) this.nome = nom; this.aniversario = new Data(d, m, a); this.nota_trabalho = this.nota_prova = 0; // Associando a função à classe this.nota_final = media; Utilizando o método // Criando instâncias (variáveis da classe) var a = new Aluno( João, 11, 2, 1969); a.nota_trabalho = 10; a.nota_prova = 8; // Referenciando as propriedades e métodos document.write( Aluno:, a.nome); document.write( Nascimento:, a.aniversario.dia, /, a.aniversario.mes, /, a.aniversario.ano); document.write( Nota final:, a.nota_final() ); Formação de Webmaster NCE/UFRJ 55 Formação de Webmaster NCE/UFRJ 56 Criando um Array de objetos Exemplo: turma = new Array(); turma[0] = new Aluno( João, 11, 2, 1969); turma[0].nota_trabalho = 10; turma[0].nota_prova = 8; turma[1] = new Aluno( Sérgio, 20, 1, 1972); turma[1].nota_trabalho = 7; turma[1].nota_prova = 9; for ( i = 0; i < turma.length; i++ ) document.write(turma[i].nome, -, turma[i].nota_trabalho, -, turma[i].nota_prova); Propriedades como Array Como alternativa a sintaxe: objeto.prop Pode-se usar a sintaxe: objeto [ prop ] Exemplo: document.bgcolor = red ; // == document[ bgcolor ] = red ; Formação de Webmaster NCE/UFRJ 57 Formação de Webmaster NCE/UFRJ 58 Comando for in Forma de percorrer as propriedades de um objeto Em cada iteração a variável de controle assume o valor do nome de uma propriedade Exemplo: for (prop in document) document.write(prop + = + document[prop] ); Aula 6 Objeto Date Hierarquia de objetos do browser Objeto navigator Identificando o navegador do usuário Criando scripts independentes do navegador Objeto window.document Comando with Formação de Webmaster NCE/UFRJ 59 Formação de Webmaster NCE/UFRJ 60 10
11 Objeto Date Permite trabalhar com datas e horários O objeto date precisa ser instanciado Criando um objeto date: // Pega data atual no sistema DataHoje = new Date() ; // Define uma data específica Data1 = new Date( February 15, :02:00"); Data2 = new Date(1997, 1, 15); Data3 = new Date(1997, 1, 15, 14, 02, 12); Métodos do objeto Date Obtendo partes da data: getdate() dia do mês getday() dia da semana gethours() horas getminutes() minutos getmonth() mês getseconds() segundos gettime() nº miliseg. desde 01/01/70 getyear() ano getfullyear() ano com 4 dígitos Existem tambem os métodos set para alterar a data armazenada no objeto Formação de Webmaster NCE/UFRJ 61 Formação de Webmaster NCE/UFRJ 62 Comparação entre datas Utilização da função gettime é a forma mais eficiente de comparar datas. A data com o maior gettime é a mais recente. if ( data.gettime() > hoje.getime() ) document.write( data ainda não chegou! ); É possível calcular o número de dias entre duas datas utilizando o número de ms de um dia: msperday = 24 * 60 * 60 * 1000; ndias = (data.gettime() - hoje.gettime()) / msperday; Objetos do browser O navegador cria automaticamente uma hierarquia de objetos refletindo alguns elementos inseridos na página. Os atributos da tag viram propriedades do objeto. Algumas propriedades podem ter seu valor modificado. O navegador mantém a coerência entre o valor da propriedade e o que está sendo visualizado pelo usuário. Formação de Webmaster NCE/UFRJ 63 Formação de Webmaster NCE/UFRJ 64 Hierarquia de Objetos JavaScript Página exemplo Navigator Window frames [ ] document forms [ ] elements [ ] : button, checkbox, radio, text, textarea... options [ ] (quando o elemento é um select) links [ ] anchors [ ] images [ ] history location images[0] forms[0] images[1] links[0] links[1] elements[0] elements[1] elements[2] Formação de Webmaster NCE/UFRJ 65 Formação de Webmaster NCE/UFRJ 66 11
12 Objeto navigator Objeto navigator Permite configurar as aplicações para navegadores diferentes Propriedades: appcodename appname appversion platform language (no explorer userlanguage e systemlanguage) Identificando o browser Exemplo: if (navigator.appname == Netscape ) document.write( Navegador Netscape! ); else if (navigator.appname.indexof( Explorer )!= -1) document.write( Navegador Explorer! ); else document.write( Navegador desconhecido! ); valor de appname Netscape Netscape Explorer Microsoft Internet Explorer Formação de Webmaster NCE/UFRJ 67 Formação de Webmaster NCE/UFRJ 68 Características do browser Escrevendo as informações do navegador: <SCRIPT LANGUAGE="JavaScript"> document.write("<li><b>code Name:</B>, navigator.appcodename); document.write("<li><b>app Name:</B>, navigator.appname); document.write("<li><b>app Version:</B>, navigator.appversion); document.write("<li><b>user Agent:</B>, navigator.useragent); document.write("<li><b>language:</b>, navigator.language); document.write("<li><b>platform:</b>, navigator.platform); </SCRIPT> Objeto Document Serve para definir/consultar características do documento corrente Algumas Propriedades: bgcolor, fgcolor, linkcolor, vlinkcolor, alinkcolor lastmodified, referrer, title, etc Objetos contidos num documento links[ ]; anchors[ ]; forms [ ]; images[ ]; etc Escrevendo texto num documento: write (valor1, valor2,, valorn) writeln (valor1, valor2,, valorn) Formação de Webmaster NCE/UFRJ 69 Formação de Webmaster NCE/UFRJ 70 Comando with Economiza digitação quando se deseja referenciar várias propriedades de um mesmo objeto Exemplo: with (document) fgcolor = # ; bgcolor = #FFFFFF ; Aula 7 Eventos básico O que são eventos Captura e tratamento de eventos Tipos de eventos Formação de Webmaster NCE/UFRJ 71 Formação de Webmaster NCE/UFRJ 72 12
13 Eventos Objetos que podem sofrer eventos Um evento é um acontecimento envolvendo: Alguma atitude do usuário o movimentar do mouse o pressionar de uma tecla o envio de um formulário, etc O funcionamento do navegador o carregamento de uma página para a exibição não conseguir carregar uma imagem, etc. O evento é associado àquele objeto da página HTML onde ocorreu Três modelos de tratamento de evento: Explorer Netscape 4.x Netscape 6.x No Explorer e Netscape 6.x qualquer objeto No Netscape 4.x imagens links formulários elementos de formulários input select textarea window document layer Formação de Webmaster NCE/UFRJ 73 Formação de Webmaster NCE/UFRJ 74 Associando código a Eventos Nome dos eventos Atributos de tags HTML <FORM NAME=f> <INPUT TYPE=button VALUE= Calcula Raiz Quadrada NAME= calcula onclick= calcularaiz() > </FORM> Propriedades do objeto nome do evento todo em minúsculas nome da função sem os parênteses Exemplo: <SCRIPT> document.f.calcula.onclick = calcularaiz; </SCRIPT> Mouse onmouseover onmouseout onmousemove onclick onmousedown onmouseup Página (window) onload onunload onfocus onblur Teclado onkeypress onkeydown onkeyup Formulário onsubmit onreset Elementos de formulários eventos de mouse onfocus onblur onselect onchange Formação de Webmaster NCE/UFRJ 75 Formação de Webmaster NCE/UFRJ 76 Comportamento Padrão Comportamento padrão associado: Submit do form Click do botão SUBMIT Click em links O comportamento padrão é executado após a rotina de tratamento de evento do usuário Evitando o Comportamento Padrão O comportamento padrão pode ser evitado se a rotina de tratamento de evento terminar com return false Forma de invocar a rotina do evento (Exemplo): <form onsubmit= return criticaformulario(); > Evento Rotina do Usuário Tratamento Padrão Evento Rotina do Usuário return true Tratamento Padrão return false Formação de Webmaster NCE/UFRJ 77 Formação de Webmaster NCE/UFRJ 78 13
14 Referenciando um objeto A palavra-chave this Atribuir um objeto a uma variável cria uma referência para o objeto. Modificações em uma propriedade da variável modifica a propriedade correspondente do objeto. obj = document.links[1]; obj.href = ; Objetos passados como parâmetros para funções são passados por REFERÊNCIA: function ApagaCampo( campo ) campo.value = ; ApagaCampo( document.forms[0].elements[2] ); Serve para referenciar o objeto corrente. O seu significado depende do contexto de onde ela é usada. O código: <form onsubmit= envia(this) > <INPUT TYPE=TEXT onchange= critica(this) > </form> <a href= inicio.htm onmouseover= message(this) > É o mesmo que: <form onsubmit= envia( document.forms[0] ) > <input type=text onchange= critica( document.forms[0].elements[0] ) > </form> <a href= inicio.htm onmouseover= message( document.links[0] ) > Formação de Webmaster NCE/UFRJ 79 Formação de Webmaster NCE/UFRJ 80 Aula 8 Formulário em Javascript Crítica de Campo Crítica de formulário window.document.forms[] Obtendo dados de formulários Formulários e Javascript Uma das principais aplicações de Javascript é a possibilidade de criticar dados fornecidos pelo usuário através de formulários HTML O conteúdo dos formulários pode ser acessado pelo script através do objeto FORM Formação de Webmaster NCE/UFRJ 81 Formação de Webmaster NCE/UFRJ 82 Acessando o formulário <form name= meuform > </form> Acessando um formulário document.forms [0] Pelo índice document.meuform Nome como propriedade document.forms [ meuform ] Nome como índice Propriedades: action, length, method elements[ ] Métodos submit() reset() Acesso individual aos elementos Envia o formulário ao servidor Limpa os campos do formulário Captura de eventos onsubmit Dispara a rotina se o usuário clicar no botão submit. Se a função de tratamento do evento retornar false, o formulário não será submetido. onsubmit= return criticaformulario(); onreset Dispara a rotina se o usuário clicar no botão reset. Se a função de tratamento do evento retornar false, o formulário não será apagado. onreset= return confirm( Quer mesmo apagar tudo? ); Formação de Webmaster NCE/UFRJ 83 Formação de Webmaster NCE/UFRJ 84 14
![br ; Objetos passados como parâmetros para funções são passados por REFERÊNCIA: function ApagaCampo( campo ) campo.value = ; ApagaCampo( document.forms[0].](/docs-images/41/3421484/images/page_14.jpg "elements[2] ); Serve para referenciar o objeto corrente. O seu significado depende do contexto de onde ela é usada.")
15 Elementos de um Formulário Cada elementos de interação do formulário vira um elemento do vetor elements. O tipo do objeto de cada posição do vetor elements depende do elemento do formulário que ele representa. Um elemento pode ser um dos seguintes objetos: Campos de texto: text, hidden, password, file Áreas de texto: textarea Botões: button, reset, submit Caixas de seleção: checkbox Botões de opção: radio Listas drop-down: select Campos de texto Propriedades: name, type, form, value, defaultvalue Métodos: focus(), blur(), select() Eventos: onfocus, onblur, onchange, onselect Exemplo Formação de Webmaster NCE/UFRJ 85 Formação de Webmaster NCE/UFRJ 86 Botões Propriedades: name, type, form, value Métodos: focus(), blur(), click() Eventos: onfocus, onblur, onclick, onmousedown, onmouseup CheckBox Propriedades: name, type, form, value, checked, defaultchecked Métodos: focus(), blur(), click() Eventos: onfocus, onblur, onclick Exemplo Formação de Webmaster NCE/UFRJ 87 Formação de Webmaster NCE/UFRJ 88 Radio Propriedades: name, type, form, value, checked, defaultchecked Métodos: focus(), blur(), click() Eventos: onfocus, onblur, onclick Botões que tem o mesmo name formam um vetor Exemplo: If (document.forms[0].sexo[0].checked) document.write( Masculino ); else if (document.forms[0].sexo[1].checked) document.write( Feminino ); Listas drop-down (select) Propriedades: name, type, form, length, options [ ], selectedindex Métodos: focus(), blur() Eventos: onfocus, onblur, onchange Formação de Webmaster NCE/UFRJ 89 Formação de Webmaster NCE/UFRJ 90 15
16 Listas drop-down (option) Propriedades: value, length, text, selected, defaultselected, index Construtor: Option ([text [, value [, defaultselected [, selected]]]]) Exemplo Crítica de formulário Três formas: captura do evento onsubmit do form captura do evento onclick de um botão SUBMIT captura do evento onclick de um botão comum Botão submit tem a funcionalidade predefinida de enviar o formulário Para evitar a ação padrão de envio do formulário a função deve retornar false O envio do formulário no terceiro caso deve ser feito pelo método submit() do form Formação de Webmaster NCE/UFRJ 91 Formação de Webmaster NCE/UFRJ 92 Critica no evento submit function criticar(formulario) if ( formulario.nome.value == ) // verifica se há erro no formulário alert ( Erro: campo nome não preenchido."); return false; return true; // Está ok, pode ser enviado <form action="/cgi-bin/x" onsubmit= return criticar(this)"> Nome: <input type=text name=nome> </form> Critica no evento click function criticar(formulario) if ( isnan(formulario.telefone.value) ) // verifica se há erro no formulário alert ( Erro: telefone não numérico."); return false; formulario.submit(); // Está ok, pode ser enviado <form action="/cgi-bin/x"> Telefone: <input type=text name=telefone><br> <input type=button value= Enviar onclick= criticar(this.form) > </form> Formação de Webmaster NCE/UFRJ 93 Formação de Webmaster NCE/UFRJ 94 Aula 9 Propriedades de window Propriedades de window Criando uma nova janela Agendando execução de comando Redimensionando, rolando e imprimindo Acessando outros frames Propriedades do vídeo Shopping cart Objeto central a todo o ambiente de execução Ao referenciar a própria janela, o objeto pode ser omitido Propriedades: location método reload() history método go(-1) defaultstatus, status name, opener, self, top, parent Métodos: alert (), confirm (), prompt () open (), close () blur (), focus () settimeout (), cleartimeout () Formação de Webmaster NCE/UFRJ 95 Formação de Webmaster NCE/UFRJ 96 16
17 Abrindo novas janelas Método open() Abrindo janelas secundárias var jan = open( outrapag.html, janelanova ); Configurando a janela var jan = open( outrapag.html, janelanova, toolbar=no,location=no,directories=no,status=no, menubar=no,scrollbars=yes,resizable=no,width=400, height=350 ); // sem espaços entre as vírgulas! Referenciando outras janelas Fechando janelas window.close(); jan.close( ); if ( jan.closed ) // Fecha a própria janela // Fecha uma janela filha // Informa se a janela está fechada Escrevendo na janela jan.document.write( <h2>janela secundária</h2> ); jan.focus(); // Traz a janela para o primeiro plano Acessando um método ou variável de outra janela cost = opener.items[i].price * opener.items[i].quantity; jan.updatecart(); Formação de Webmaster NCE/UFRJ 97 Formação de Webmaster NCE/UFRJ 98 Limites de tempo Os métodos settimeout e cleartimeout variavel = settimeout( instrucao, tempo); Aguarda um intervalo de tempo antes de executar a instrução cleartimeout (variavel); interrompe contagem de tempo do settimeout Outros métodos Redimensionando resizeby(dx,dy) Relativo resizeto(tamx, tamy) Absoluto Rolando scrollby(dx, dy) Relativo scrollto(posx, posy) Absoluto Imprimindo (Netscape 6.x e Explorer 5.x) print() Formação de Webmaster NCE/UFRJ 99 Formação de Webmaster NCE/UFRJ 100 Frames Cada tag frame é gera um objeto no array frames da window do arquivo de layout. Documentos exibidos em um frame podem acessar este vetor através das propriedades de window: parent window do arquivo de layout mais próximo. top window do arquivo de layout topo da hierarquia. O objeto frame é equivalente a um objeto window. Os frames podem ser acessados: Pelo índice de frames[ ]. Pelo seu nome definido no atributo name do HTML. Top e parent combinada às propriedades parent e top, é útil para fazer referências entre frames top.frames[0] // sempre o frame superior parent.frames[0] // depende de quem referencia top.frames[2] top.centro // frame inferior central // através do nome Formação de Webmaster NCE/UFRJ 101 Formação de Webmaster NCE/UFRJ
18 Vários níveis de layout Propriedades do vídeo Exemplo: Arq. Layout A Objeto screen Top B == A Parent B == A Frame Frameset Frameset Resolução: screen.width screen.height Top D == A Parent D == C Frame B Arq. Layout C Frame Area útil: screen.availwidth screen.availheight Frameset Profundidade de cor: Frame D Frame screen.colordepth Formação de Webmaster NCE/UFRJ 103 Formação de Webmaster NCE/UFRJ 104 Principios de Shopping Cart Exemplo de Shopping cart A estrutura de dados deve ficar num documento que não fecha nunca (no menu, por exemplo). Variáveis e funções globais podem ser acessados como propriedades e métodos do objeto window onde estão definidos. Utilização de parent, top e opener para acessar a estruturas e funções que estiverem em outros frames ou janelas. Formação de Webmaster NCE/UFRJ 105 Formação de Webmaster NCE/UFRJ 106 Aula 10 O que é um cookie Propriedade document.cookie Escrevendo um cookie Lendo um cookie escape e unescape O que são Cookies? Artifício que permite que uma página web salve temporariamente uma variável na máquina do usuário Cada cookie é um par: nome=valor Uso limitado por questões de segurança arquivo cookies.txt pouca quantidade de dados 300 cookies por web browser 20 cookies por web server 4K por cookie múltiplas variáveis são armazenadas em um só cookie Formação de Webmaster NCE/UFRJ 107 Formação de Webmaster NCE/UFRJ
19 Cookies com Javascript Propriedade cookie do objeto document Permite criar, ler e modificar um ou mais cookies relativos à página corrente. Nome e valor não podem conter os caracteres ponto e vírgula, igual, espaço ou caracteres de controle. Codificação do cookie escape Troca caracteres proibidos por um código (%nn onde nn é o código do caracter). unescape Inverso da função escape. Escrevendo cookies Atribuir um valor a document.cookie cria novo cookie. Cookies com o mesmo nome, valor é sobreescrito. Exemplos: // cria um cookie chamado Produto com valor 123 document.cookie = Produto=123 ; // cria um novo cookie chamado User document.cookie = User=Joao ; // redefine o cookie chamado Produto, que agora vale 789 document.cookie = Produto=789 ; Formação de Webmaster NCE/UFRJ 109 Formação de Webmaster NCE/UFRJ 110 Componentes de um cookie Podem ser especificados quando um cookie é criado. Servem para definir a funcionalidade do cookie de uma maneira geral. São especificados separados por ; dentro da string que define o cookie. Uma vez definidos não podem mais ser acessados pela aplicação. Componentes de um cookie Nome = Valor Nome identifica o cookie. Valor é a informação propriamente dita. Expires = Wdy, DD-Mon-YYYY HH:MM:SS GMT Define data de validade do Cookie (formato GMT). Se omitido, o cookie vale só durante a sessão do browser. Domain = dominio Domínio para onde o Cookie deve ser devolvido Se omitido, assume o nome do servidor a partir do qual o cookie foi escrito. Formação de Webmaster NCE/UFRJ 111 Formação de Webmaster NCE/UFRJ 112 Componentes de um cookie Path = caminho Define os caminhos dentro do domínio, para onde o Cookie deve ser devolvido. Se omitido, assume o mesmo caminho do documento que escreveu o cookie. Secure Se especificado, indica que o cookie só pode ser devolvido através de uma conexão segura. Definindo componentes document.cookie = Codigo= + escape(codigo) + ;expires=sun, 25-Jul :00:00 GMT ; document.cookie = User= + escape(usuario) + ;expires= + data.togmtstring() + ;domain= + ;path=/ + ;secure ; Formação de Webmaster NCE/UFRJ 113 Formação de Webmaster NCE/UFRJ
20 Lendo cookies Basta consultar document.cookie Retorna todos os cookies previamente gravados, que devem ser devolvidos para esta página Se houver mais de um cookie gravado, cabe ao programa separa-los convenientemente. Exemplo: // meucookie recebe Produto=789;User=Joao meucookie = document.cookie; Separando os cookies function getcookie(nome) var cookievet = document.cookie.split( ; ); for (c = 0; c < cookievet.length; c++) cv = cookievet[c].split( = ); if ( cv[0] == nome) return unescape( cv[1] ); return ; Formação de Webmaster NCE/UFRJ 115 Formação de Webmaster NCE/UFRJ
Linguagem Javascript. Referências. Capacidades de Javascript. O que é JavaScript? Tipos de JavaScript. Versões de Javascript
Linguagem Javascript João Sérgio S. Assis Núcleo de Computação Eletrônica da UFRJ Tel. (021) 2598-3214 Fax. (021) 2 270-8554 e-mail: joao@nce.ufrj.br Slides originais: Maurício Bomfim Referências Bibliográficas:
Tecnologias para Web Design
Tecnologias para Javascript e DOM Introdução à Scripts Um script do lado cliente é um programa que acompanha um documento HTML Pode estar incluído no próprio documento embutido ou acompanha-lo num arquivo
JavaScript: Validação de Formulários. Prof. Ivanilton Polato ipolato@utfpr.edu.br ipolato@gmail.com
JavaScript: Validação de Formulários Prof. Ivanilton Polato ipolato@utfpr.edu.br ipolato@gmail.com Validação de Formulários Um dos usos mais frequentes do JS é a validação de formulários. Além de garantir
Lista de operadores de comparação - > Maior que - < Menor que - <= Menor ou igual a - >= Maior ou igual a - === Igual a -!
Página1 Javascript JavaScript (JS) é uma linguagem de programação client side Funciona no navegador do usuário. É uma linguagem baseada em objetos. "Walmir".length; 6 Para que serve - fazer websites responder
JavaScript (Funções, Eventos e Manipulação de Formulários)
Linguagem de Programação para Web JavaScript (Funções, Eventos e Manipulação de Formulários) Prof. Mauro Lopes 1-31 23 Objetivos Iremos avançar um pouco mais em nosso estudo sobre o JavaScript. Iremos
O que é o Javascript?
O que é o Javascript? JavaScript é uma linguagem para criação de Home-Pages. Funções escritas em JavaScript podem ser embutidas dentro de seu documento HTML. Com JavaScript você tem muitas possibilidades
Conteúdo. DHTML tópicos Hamilton Lima - 2002-2004
DHTML tópicos Hamilton Lima - 2002-2004 Conteúdo 1. meu primeiro script... 2 2. DOM Document Object Model...2 3. tipo de execução de scripts...2 4. resposta a um evento... 3 5. tipos de dados, variaveis
Criando um script simples
Criando um script simples As ferramentas de script Diferente de muitas linguagens de programação, você não precisará de quaisquer softwares especiais para criar scripts de JavaScript. A primeira coisa
Utilizando Janelas e Frames
Utilizando Janelas e Frames Aprenderemos agora algumas técnicas mais específicas para fazer o JavaScript trabalhar com várias partes das páginas e navegadores da Web. Controlando janelas com objetos Já
O código JavaScript deve ser colocado entre tags de comentário para ficar escondido no caso de navegadores antigos que não reconhecem a linguagem.
1 - O que é JAVASCRIPT? É uma linguagem de script orientada a objetos, usada para aumentar a interatividade de páginas Web. O JavaScript foi introduzido pela Netscape em seu navegador 2.0 e posteriormente
Programação para web JavaScript
Programação para web JavaScript Professor: Harlley Lima E-mail: harlley@decom.cefetmg.br Departamento de Computação Centro Federal de Educação Tecnológica de Minas Gerais Belo Horizonte, 4 de maio 2016
1-03/11/03 INTRODUÇÃO
1-03/11/03 INTRODUÇÃO JavaScript é uma linguagem que permite injetar lógica em páginas escritas em HTML (HiperText Mark-up Language). As páginas HTML podem ser escritas utilizando-se editores de texto,
$XOD2V2EMHWRVdocumentHnavigator
$XOD2V2EMHWRVdocumentHnavigator Nesta aula continuaremos a tratar dos objetos em JavaScript. Veremos agora detalhes sobre os objetos document e navigator. 2EMHWLYRV Aprender: - as características e métodos
Prof Evandro Manara Miletto. parte 2
Prof Evandro Manara Miletto parte 2 Sumário Estruturas de Controle Eventos Estruturas de controle características Estruturas de controle (ou condicionais) são executadas caso um teste seja atendido Permite
JavaScript Eventos e Objetos Nativos
JavaScript Eventos e Objetos Nativos Ferramentas para Internet Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) Eventos Um evento é um acontecimento
Introdução ao Javascript
Programação WEB I Introdução ao Javascript Apresentação da Disciplina,Introdução a linguagem Javascript Objetivos da Disciplina Apresentar os principais conceitos da linguagem Javascript referente à programação
Primeiro contato com JavaScript
Primeiro contato com JavaScript Visão Geral JavaScript É uma linguagem em formato script; Permite dinamizar funções do site e criar interatividade em páginas web. O JavaScript permite: Coletar dados dos
indica o nome do campo pelo qual podemos acessar.
Formulários Em geral Com o Javascript, os formulários Html tomam outra dimensão. Não esqueça que em Javascript, podemos acessar cada elemento de um formulário para, por exemplo, ler ou escrever um valor,
Aula de JavaScript 05/03/10
Objetos Sabe-se que variável são contêiners que podem armazenar um número, uma string de texto ou outro valor. O JavaScript também suporta objetos. Objetos são contêiners que podem armazenar dados e inclusive
JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos.
JavaScript JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. Pode ser usada dentro do próprio arquivo HTML ou estruturada em um
JavaScript. Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Notas de Aula Aula 12 1º Semestre - 2011. UNIJUÍ DETEC Ciência da Computação
UNIJUÍ DETEC Ciência da Computação Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) JavaScript Notas de Aula Aula 12 1º Semestre - 2011 Tecnologias Web jgw@unijui.edu.br Introdução Com JavaScript implementamos
O que é o JavaScript?
JavaScript Introdução O JavaScript é utilizado por milhões de páginas na web para melhorar o design, validar forms, e muito mais O JavaScript foi inicialmente desenvolvido pela Netscape e é a linguagem
WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira
WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Formulários e JavaScript Como visto anteriormente, JavaScript pode ser usada para
JavaScript (ou JScript)
1. Introdução JavaScript (ou JScript) Uma linguagem como o JavaScript permite criar interfaces interativas na web (permite a interação do usuário). Para desenvolver web sites interativos precisamos de
Informática I. Aula 6. http://www.ic.uff.br/~bianca/informatica1/ Aula 6-12/09/2007 1
Informática I Aula 6 http://www.ic.uff.br/~bianca/informatica1/ Aula 6-12/09/2007 1 Ementa Noções Básicas de Computação (Hardware, Software e Internet) HTML e Páginas Web Internet e a Web Javascript e
Universidade Federal do Espírito Santo CCA UFES. Centro de Ciências Agrárias CCA UFES Departamento de Computação. JavaScript
Universidade Federal do Espírito Santo Centro de Ciências Agrárias CCA UFES Departamento de Computação Universidade Federal do Espírito Santo CCA UFES JavaScript Desenvolvimento de Sistemas para WEB Site:
Mais sobre uso de formulários Site sem Ajax
Mais sobre uso de formulários Site sem Ajax Página com busca padrão 1 Página com o resultado da busca carregada no local da anterior (o formulário está vazio) Site com Ajax 2 Site usando Ajax para preencher
COMO FUNCIONA UM FORMULÁRIO
FORMULÁRIOS Constitui-se numa das formas de a máquina cliente enviar informações para que um programa no servidor receba estes dados, processe-os e devolva uma resposta ao usuário, por meio do navegador,
INTRODUÇÃO AO DESENVOLVIMENTO WEB
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Formulários Os formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário. Um formulário é uma área que
PROF. DANIELA PIRES. Aplicações para Web. Aplicações para Web - FMU - 2012 - Prof. Daniela Pires
PROF. DANIELA PIRES Aplicações para Web 1 *JavaScript * Validação de Formulários * HTML Dinâmico 2 *Linguagem de scripting * orientada para objeto * interpretada pelo browser *versão atual: 1.3 (para IE)
Tecnologias para apresentação de dados - Java Script. Aécio Costa
Tecnologias para apresentação de dados - Java Script Aécio Costa Foi originalmente implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem
Os objetivos indicados aplicam-se a duas linguagens de programação: C e PHP
AGRUPAMENTO DE ESCOLAS DE SANTA COMBA DÃO CURSO PROFISSIONAL DE TÉCNICO DE GESTÃO E PROGRAMAÇÃO DE SISTEMAS INFORMÁTICOS 2012-2015 PROGRAMAÇÃO E SISTEMAS DE INFORMAÇÃO MÓDULO 2 Mecanismos de Controlo de
4. A Linguagem JavaScript
4. A Linguagem JavaScript! A linguagem XHTML, por não ser uma linguagem de programação e sim uma linguagem de marcação, não permite interação entre o usuário e a página, além de clicar em um link, fazendo
Faça um Site PHP 5.2 com MySQL 5.0 Comércio Eletrônico
Editora Carlos A. J. Oliviero Faça um Site PHP 5.2 com MySQL 5.0 Comércio Eletrônico Orientado por Projeto 1a Edição 2 Reimpressão São Paulo 2011 Érica Ltda. Noções Livrarse Preparação muitas muita Sumário
Programação Web Prof. Wladimir
Programação Web Prof. Wladimir Linguagem PHP @wre2008 1 Sumário PHP: Tipos de dados; Manipulação de dados; Utilizando formulário. @wre2008 2 Tipos de dados As variáveis são declaradas no momento de sua
Java Script Pág: 1. Índice
Java Script Pág: 1 Índice Índice... 1 Introdução ao JavaScript Básico... 2 Configurações... 2 Usando o Java Script.... 2 Comandos: script language - alert - /script... 3 Variáveis... 4 Regras para criar
JavaScript Aplicações Interativas para a Web
JavaScript Aplicações Interativas para a Web ADRIANO GOMES LIMA BELO HORIZONTE 2006 INTRODUÇÃO A LINGUAGEM JAVASCRIPT...9 JAVA E JAVASCRIPT...9 VBSCRIPT E JAVASCRIPT... 10 AS VERSÕES DO JAVASCRIPT... 10
Internet e Programação Web
COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 3 Técnico Prof. Cesar 2014 1 SUMÁRIO Criar sites dinâmicos em PHP --------------------------------------------------------
Construção de Sites 2. Prof. Christiano Lima Santos
Construção de Sites 2 Prof. Christiano Lima Santos Introdução a JavaScript Parte 01 Como usar JavaScript em uma página 1.1 Forma #1 aplicando diretamente à tag HTML teste
Exercícios Práticos de HTML e JavaScript. <FORM ACTION="mailto:teste@gmail.com" METHOD="POST" ENCTYPE="text/plain" NAME="cadastro">
Exercícios Práticos de HTML e JavaScript Exercício 1: Formulário Padrão HTML SEM JavaScript
Logo abaixo temos a Barra de Menus que é onde podemos acessar todos os recursos do PHP Editor.
Nessa aula iremos estudar: A anatomia da janela do PHP Editor Iniciando o servidor Web O primeiro exemplo de PHP Anatomia da janela do PHP Editor Barra de Títulos: É a barra azul que se encontra na parte
Algoritmos em Javascript
Algoritmos em Javascript Sumário Algoritmos 1 O que é um programa? 1 Entrada e Saída de Dados 3 Programando 4 O que é necessário para programar 4 em JavaScript? Variáveis 5 Tipos de Variáveis 6 Arrays
Resumo da Matéria de Linguagem de Programação. Linguagem C
Resumo da Matéria de Linguagem de Programação Linguagem C Vitor H. Migoto de Gouvêa 2011 Sumário Como instalar um programa para executar o C...3 Sintaxe inicial da Linguagem de Programação C...4 Variáveis
Programação WEB II. Sessions e Cookies. progweb2@thiagomiranda.net. Thiago Miranda dos Santos Souza
Sessions e Cookies progweb2@thiagomiranda.net Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Cookies e Sessions Geralmente, um bom projeto
Respondendo a eventos
Respondendo a eventos Até agora, a maioria dos scripts que você escreveu foi executado de uma forma tranqüila e ordenada, movendo-se da primeira instrução para a última. Agora aprenderemos a utilizar a
2 echo "PHP e outros.";
PHP (Hypertext Preprocessor) Antes de qualquer coisa, precisamos entender o que é o PHP: O PHP(Hypertext Preprocessor) é uma linguagem interpretada gratuita, usada originalmente apenas para o desenvolvimento
Formulário (Send & Recieve) Prof. Celso H. Masotti
Formulário (Send & Recieve) Prof. Celso H. Masotti O Send e o Recieve A partir desse momento os exercícios serão realizados com dois arquivos, um de envio de dados (send) e o que recebe esse dados (recieve)
As janelas do browser
Capítulo 5 As janelas do browser 5 As janelas do browser A JANELA DO BROWSER é manipulável de várias formas através da linguagem JavaScript. Pode-se alterar dinamicamente várias de suas características
Javascript. Javascript
Javascript 1 1 INTRODUÇÃO...3 2 JAVASCRIPT...3 2.1 O QUE É JAVASCRIPT...3 2.1.1 CARACTERÍSTICAS BÁSICAS...3 2.1.2 O QUE JAVASCRIPT NÃO É...4 2.1.3 PARTICULARIDADES E LIMITAÇÕES...4 2.2 ELEMENTO SCRIPT...5
Dicas para Javascript (parte1) <style TYPE="text/css"><!--a.menu {color:000000;}a.menu:hover {color:cc0000;}-- ></style>
Dicas para Javascript (parte1) 1 - DETECTANDO A RESOLUÇÃO DO USUÁRIO
0,5 pelo negrito das palavras ID, Nome, E-mail e Analisar em outro momento.
IFES - Campus Cachoeiro de Itapemirim-ES Curso Técnico em Informática Disciplina: Programação Web Professor: Flávio Izo e Rafael Vargas Data: 07/04/2015 Aluno: GABARITO Valor: 12,5 Conteúdo: HTML + Formulários
PROGRAMAÇÃO WEB DO LADO DO CLIENTE
PROGRAMAÇÃO WEB DO LADO DO CLIENTE FORMULÁRIO Na linguagem HTML é permitido que o usuário interaja com o servidor através de formulários ligados a scripts desenvolvidos em linguagens como PHP, Servlets,
HTML - 7. Vitor Vaz da Silva Paula Graça
HTML - 7 Vitor Vaz da Silva Paula Graça 1 Formulários Os formulários forms no HTML, são utilizados para a introdução de dados de uma determinada aplicação Os programas JavaScript têm como um dos seus maiores
Programação para Internet I
Programação para Internet I Aulas 09 e 10 Fernando F. Costa nando@fimes.edu.br Formulários O formulário representa o modo mais importante de interatividade que a linguagem HTML oferece. Um formulário pode
Aula 12: Funções. Pré-requisitos: Todas as aulas anteriores deste módulo. 1. Aproveitando Códigos no Programa
Aula 12: Funções Nesta aula explicaremos o que são e como usar funções nos seus programas em JavaScript. Você aprenderá como elas podem receber e retornar valores à estrutura que as acionou. Entenderá
UENF Curso de Javascript Prof. Sérgio Rodrigues Pg 1 ÍNDICE
UENF Curso de Javascript Prof. Sérgio Rodrigues Pg 1 ÍNDICE Javascript - Módulo I 02 Introdução 02 Escrevendo no documento 02 Criando variáveis 03 Mensagens 04 Alerta 04 Confirmação 04 Receptor 05 Operadores
HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web;
HTML Introdução Introdução ao HTML HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; É uma linguagem de hipertexto; Permite escrever texto de forma estruturada, que está
Incorporando JavaScript em HTML
Incorporando JavaScript em HTML Existem quatro maneiras de incorporar JavaScript em HTML. Vamos abordar as três primeiras, por ser mais comum: Entre as tags dentro do código HTML. A partir
Introdução à Linguagem
Introdução à Linguagem Curso de Nivelamento do PPGMNE Janeiro / 2011 Juliano J. Scremin jjscremin@jjscremin.t5.com.br Um pouco de história Um pouco de história: Nascimento do Python Um pouco de história:
Escrito por Sáb, 15 de Outubro de 2011 21:16 - Última atualização Seg, 26 de Março de 2012 03:31
Preço R$ 129.00 Compre aqui Entre definitivamente para o mundo de desenvolvimento web. Curso Webdesigner, criação de Sites com HTML, DHTML, javascript e CSS + dreamweaver cs4. São 147 videoaulas, 2 dvd
Linguagem de. Aula 06. Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br
Linguagem de Programação IV -PHP Aula 06 Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br Criação de Formulários o Um formulário consiste em uma série de campos que são preenchidos pelo usuário
PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL
PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Formulários HTML Aula 07: Formulários e Frames HTML Os formulários HTML são utilizados, geralmente, como entradas de dados prépreenchimento,
Introdução a Javascript
Introdução a Javascript André Tavares da Silva andre.silva@udesc.br Introdução Javascript Javascript é uma linguagem que permite injetar lógica em páginas escritas em HTML Podem estar "soltos" ou atrelados
Aplicações e Serviços de Internet
Aplicações e Serviços de Internet Scripting no Cliente JavaScript & DOM Controlo de Dados Conteúdo JavaScript DOM 2 2 Lado Cliente: Como chamar JavaScript?. Escrever sua função* e inseri-la na página HTML
Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário
Introdução HyperText Markup Language HTML Formulário Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ O usuário interage com os serviços
JavaScript Aplicações Interativas para a Web
JavaScript Aplicações Interativas para a Web ADRIANO GOMES LIMA BELO HORIZONTE 2006 INTRODUÇÃO A LINGUAGEM JAVASCRIPT...9 JAVA E JAVASCRIPT...9 VBSCRIPT E JAVASCRIPT... 10 AS VERSÕES DO JAVASCRIPT... 10
OPERADORES E ESTRUTURAS DE CONTROLE
OPERADORES E ESTRUTURAS DE CONTROLE 3.1 Operadores Os operadores indicam o tipo de operação matemática que será executada gerando novos valores a partir de um ou mais operadores. São muito utilizados em
SUMÁRIO Acesso ao sistema... 2 Atendente... 3
SUMÁRIO Acesso ao sistema... 2 1. Login no sistema... 2 Atendente... 3 1. Abrindo uma nova Solicitação... 3 1. Consultando Solicitações... 5 2. Fazendo uma Consulta Avançada... 6 3. Alterando dados da
Lista de Revisão. 3. Analise a afirmativa a seguir como verdadeira ou falsa e justifique.
Lista de Revisão 1. Nos sistemas web, geralmente os usuários apresentam dois problemas típicos, a desorientação e a sobrecarga cognitiva. Discorra sobre esses problemas. 2. Apresente as principais diferenças
Scriptlets e Formulários
2 Scriptlets e Formulários Prof. Autor: Daniel Morais dos Reis e-tec Brasil Programação Avançada Para Web Página1 Meta Permitir ao aluno aprender a criar um novo projeto Java para web no Netbeans IDE,
Ferramentas para Multimídia e Internet - 1486
1 Ferramentas para Multimídia e Internet - 1486 HTML BÁSICO: O que é uma página WEB? Uma página WEB, também conhecida pelo termo inglês webpage, é uma "página" na World Wide Web, geralmente em formato
Para testar seu primeiro código utilizando PHP, abra um editor de texto (bloco de notas no Windows) e digite o código abaixo:
Disciplina: Tópicos Especiais em TI PHP Este material foi produzido com base nos livros e documentos citados abaixo, que possuem direitos autorais sobre o conteúdo. Favor adquiri-los para dar continuidade
Características do PHP. Começando a programar
PHP Introdução Olá pessoal. Desculpe o atraso na publicação da aula. Pude perceber pelas respostas (poucas) ao fórum que a realização da atividade do módulo I foi relativamente tranquila. Assistam ao vídeo
www.coldfusionbrasil.com.br
www.coldfusionbrasil.com.br 2000 PASSANDO VARIÁVEIS ATRAVÉS DE FORM E URL 3 ALTERA.CFM 3 FORMALTERA.CFM 4 ALTERA.CFM 4 FORMALTERA.CFM 4 CRIANDO E MANIPULANDO VARIÁVEIS COM CFSET 4 VALORES ESTÁTICOS 5 PARÂMETROS
HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.).
HTML / JAVASCRIPT Estamos iniciando o estudo do HTML através das TAGS (comandos) para construir formulários. Isso facilitará a continuidade dos nossos estudos da linguagem de programação JavaScript, a
PHP. Hypertext Pre-Processor
PHP Hypertext Pre-Processor O que é o PHP? Uma linguagem de scripting é uma linguagem cujo código não tem de ser compilado para ser executado! O código escrito é interpretado em tempo de execução para
JAVA NETBEANS PGOO Prof. Daniela Pires Conteúdo
Conteúdo Estruturas de repetição (loops, laços)... 2 WHILE (enquanto)... 2 DO... WHILE (faça... enquanto)... 2 FOR... 3 FOREACH... 4 EXERCICIO LOOP FOR... 4 Novo Projeto... 5 Controles SWING... 10 1 Estruturas
TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com
Luiz Leão luizleao@gmail.com http://luizleao.com CONTEÚDO PROGRAMÁTICO DESTA UNIDADE HTML TAG S HTML LINGUAGEM HTML Hypertext Markup Language Interpretada pelo navegador Não linearidade da informação Formatação
PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL
PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Introdução Aula 10: Introdução à linguagem PHP O PHP é uma linguagem interpretada de uso livre, utilizada originalmente para o desenvolvimento
Os componentes de um formulário são: Form, Input, Select e AreaText
HTML Formulário O elemento FORM, da HTML, é o responsável por prover documentos interativos no ambiente WWW de forma que uma pagina web exibida a um usuário possa submeter um conjunto de dados, informados
Introdução aos cálculos de datas
Page 1 of 7 Windows SharePoint Services Introdução aos cálculos de datas Aplica-se a: Microsoft Office SharePoint Server 2007 Ocultar tudo Você pode usar fórmulas e funções em listas ou bibliotecas para
Programação Web com PHP. Prof. Wylliams Barbosa Santos wylliamss@gmail.com Optativa IV Projetos de Sistemas Web
Programação Web com PHP Prof. Wylliams Barbosa Santos wylliamss@gmail.com Optativa IV Projetos de Sistemas Web Agenda O que é PHP? O que da pra fazer com PHP? Como a web funciona? Onde, quando e por que
Índice. 1 Introdução ao Javascript...1 1.1 HTML e Javascript...1 1.2 Resumo do capítulo...2
Índice 1 Introdução ao Javascript...1 1.1 HTML e Javascript...1 1.2 Resumo do capítulo...2 2 Elementos da Linguagem...3 2.1 Variáveis...3 2.2 Tipos de dados...4 2.3 Operadores...4 2.4 Comparação...5 2.5
Microsoft Office PowerPoint 2007
INTRODUÇÃO AO MICROSOFT POWERPOINT 2007 O Microsoft Office PowerPoint 2007 é um programa destinado à criação de apresentação através de Slides. A apresentação é um conjunto de Sides que são exibidos em
Programação Web Prof. Wladimir
Programação Web Prof. Wladimir Linguagem de Script e PHP @wre2008 1 Sumário Introdução; PHP: Introdução. Enviando dados para o servidor HTTP; PHP: Instalação; Formato básico de um programa PHP; Manipulação
PHP() é uma linguagem de integração de servidor que permite a criação de paginas dinâmicas. Como todas
O que é PHP? Acrônimo de PHP: Hipertext Language PostProcessor Inicialmente escrita para o desenvolvimento de aplicações Web Facilidade para iniciantes e recursos poderosos para programadores profissionais
MANUAL DE UTILIZAÇÃO SISTEMA DE CADASTRO INTRANET
MANUAL DE UTILIZAÇÃO SISTEMA DE CADASTRO INTRANET I Sumário 1. Objetivo do Documento... 1 2. Início... 1 3. Cadastro de Pessoa Física... 3 3.1. Preenchimentos Obrigatórios.... 4 3.2. Acesso aos Campos
Apostila sobre Java Script
Apostila sobre Java Script 1 Java Script Básico... 3 1. Introdução... 3 1.1 O que é Java Script?... 3 1.2 Qual é a diferença entre Java e JavaScript?... 3 1.3 Um pequeno exemplo do uso de scripts... 4
Web Design Aula 09: Formulários
Web Design Aula 09: Formulários Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Roteiro Tag ... Tag Tag ... Rádio Checkbox Atributo name Form Um
mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos
Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.
Algoritmos com VisuAlg
Algoritmos com VisuAlg Prof Gerson Volney Lagemann Depto Eng de Produção e Sistemas UDESC - CCT Algoritmos com VisuAlg Introdução A linguagem VisuAlg é simples, seu objetivo é disponibilizar um ambiente
CAPITULO 5 COMANDO DE FLUXO IF
CAPITULO 5 COMANDO DE FLUXO IF Sempre que for necessária a tomada de decisão dentro de um programa, você terá que utilizar um comando condicional, pois é por meio dele que o PHP decidirá que lógica deverá
JSP - ORIENTADO A OBJETOS
JSP Orientação a Objetos... 2 CLASSE:... 2 MÉTODOS:... 2 Método de Retorno... 2 Método de Execução... 2 Tipos de Dados... 3 Boolean... 3 Float... 3 Integer... 4 String... 4 Array... 4 Primeira:... 4 Segunda:...
1) Ao ser executado o código abaixo, em PHP, qual será o resultado impresso em tela?
Exercícios sobre Linguagem PHP: 1) Ao ser executado o código abaixo, em PHP, qual será o resultado impresso em tela? 2) Considere a linguagem de programação PHP e seus operadores. A execução da sentença: