Javascript - Marx Gomes Van der Linden
Transcrição
Javascript - Marx Gomes Van der Linden
APOSTILA JAVASCRIPT Professor: Msc. Marx Gomes van der Linden Curso Superior em Tecnologia: Redes de Computadores IFPB – 2009 Introdução a JavaScript É uma linguagem de programação interpretada com características de orientação a objetos Desenvolvida pela Netscape a fim de estender as capacidades de seu browser Permite que conteúdo executável seja incluído em páginas web Sintaticamente semelhante a C e C++ Javascript NÃO É Java! Java é uma linguagem orientada a objetos desenvolvida pela Sun Microsystems com um escopo bastante amplo (não necessariamente ligado à web) O nome JavaScript foi escolhido por mera questão de marketing... o Seu nome ia ser LiveScript DOM Combina as características de uma linguagem de script com o Modelo de Objetos de Documentos DOM : Document Object Model Define uma hierarquia de objetos que são baseados no conteúdo de uma página web: Formulários, Imagens, Elementos de Bloco, etc. Destaques da linguagem Controlar a aparência e conteúdo do documento Escrever código em documento enquanto ele está sendo interpretado pelo browser Controlar o browser Abrir novas janelas, exibir mensagens na barra de status, etc. Manipular formulários HTML Código JavaScript Podemos dividir o código JavaScript em três partes: Código comum o Realiza qualquer tarefa Manipulação de eventos o Funções devem ser chamadas para manipular os eventos Manipulação do Browser o O browser é tratado como uma hierarquia de objetos O código pode ser posicionado em Blocos <script> http://marx.vanderlinden.com.br 2 o Usado para definir funções que serão usadas dentro da mesma página, gerar HTML Arquivos externos o Definir funções que serão usadas por várias páginas (.js) Junto à tags HTML o Manipulação de eventos Bloco <script> <html> <head> <title>.::javascript::.</title> </head> <body> <script language="javascript"> document.write("Hello World!"); </script> </body> </html> Sintaxe e estrutura a b c d a = = = = = Estrutura Léxica Case Sensitive Valor, VALOR e VaLOR são variáveis diferentes Na maior parte dos casos, Javascript ignora espaços em branco. Inclusive tabulações e quebras de linha. Ponto e vírgula opcional Inserido automaticamente 3; 4; 5 6 3; b = 4; Comentários Suporta estilos de C e C++ /* texto entre duas marcas */ // texto até o fim da linha /* isso é um comentário de várias linhas */ // comenta // até o fim da linha http://marx.vanderlinden.com.br 3 Declaração de variáveis Não é necessário inicializar a variável na declaração Nesse caso o valor é indefinido (undefined) Tipos de dados e literais Tipos Primitivos o string o number o boolean o undefined o null Os tipos de dados em Javascript são implícitos o Interpretador faz tudo automaticamente Strings → "Texto de uma string" Números → 15, 15.6, 18.23e10 Arrays e tipos complexos Variáveis Uma variável associa um nome a um valor na memória do computador. Javascript permite declarações explícitas ou implícitas de variáveis. Declaração implícita o Atribui-se um valor a um identificador cujo nome não seja uma palavra reservada salario = 1000; nome = "João"; Declaração explicita o Usa-se a palavra reservada var para definir que o identificador a seguir é uma variável var salario; var nome; Declaração de variáveis var var var var var i; soma; i, soma; i = "olá, mundo" soma = 0, y = 10, x = 20; Strings Literais entre aspas simples (‘ e ’) ou duplas (“ e ”) var frase = "aspas duplas"; var frase2 = 'aspas simples'; http://marx.vanderlinden.com.br 4 Combinações de aspas simples e duplas facilitam a mesclagem de código HTML e Javascript txt = '<a href="link.html"> Link </a>'; document.write(txt); <a href="link.html"> Link </a> Strings podem ter caracteres especiais: o \n Quebra de Linha o \r Quebra de Linha (Carriage Return) o \t Tab o \" " (em aspas duplas) o \' ' (em aspas simples) Números Podem ser inteiros ou de ponto flutuante Representações Decimais: 1, 200, -20 Hexadecimais: 0Xffac, 0Xaa11 Operadores aritméticos Javascript define os 4 operadores aritméticos: + - * / Operador de concatenação O operador + tem duas funções em Javascript: var ola = 'Hello'; var mundo = 'World' document.write(ola + ' ' + mundo + '!' ); Hello World! Conversão de tipos Em JavaScript, os tipos das variáveis são implícitos o O tipo da variável depende do valor assumido naquele instante y = 10 y = "nome" A conversão de tipos é automática e transparente ao usuário http://marx.vanderlinden.com.br 5 o Não existe casting saída var a = 9; var b = 4; var c = '4' document.write( document.write( document.write( document.write( a a a a + – – + b b c c + + + + '<br>' '<br>' '<br>' '<br>' ); ); ); ); 13 5 5 94 Conversão de tipos Vantagem o Simplicidade o Flexibilidade Desvantagem o Programador tem que estar atento à utilização de cada variável Teste de condições if A construção if executa um bloco de instruções caso uma expressão seja verdadeira Sintaxe: if( x == 8 ){ document.write("X é igual a oito."); } else A instrução else só pode ocorrer após um bloco if. Indica o que fazer, caso a expressão seja avaliada como falsa. if( x == 8 ){ document.write("X é igual a oito."); } else { document.write("X é diferente de oito."); } Bloco if-else Parênteses são obrigatórios ao redor da expressão. Os caracteres {} delimitando o bloco são opcionais, se este contiver apenas uma instrução if( x == 8 ) document.write("X é igual a oito."); http://marx.vanderlinden.com.br 6 else document.write("X é diferente de oito."); else if A construção else if pode servir para testar várias condições: if( x < 8 ){ document.write("X é menor que oito."); } else if( x == 8){ document.write("X é igual a oito."); } else { document.write("X é maior que oito."); } Operador ? ? é o operador ternário Permite expressar de forma mais concisa uma operação de decisão Sintaxe: condição? expressão1 : expressão2 document.write( (x == 8)? "X é igual a 8" : "X é diferente de 8" ); Expressões booleanas Uma expressão boolena pode ter dois valores: o Verdadeiro (true) o False (false) Em Javascript, todas as expressões podem ser avaliadas como booleanas Quase todas as expressões são avaliadas como verdadeiras, exceto se seu resultado for: o O inteiro 0 o O número real 0.0 o O string '' o null ou undefined Operadores booleanos Operadores booleanos permitem construir expressões booleanas complexas && (e) || (ou) ! (não) http://marx.vanderlinden.com.br 7 var a = true; var b = false; document.write((a && b)? 'Sim' : 'Não' ); document.write( ' <br> ' ); document.write( (a || b)? 'Sim' : 'Não' ); Não <br> Sim switch-case Compara uma expressão a vários valores. switch (cor) { case "azul": document.write("color: blue;"); break; case "vermelho": document.write("color: #FF0000;"); document.write("text-decoration: line-through;"); break; case "preto": document.write("color: #000000;"); break; } Funciona com strings, inteiros e números reais. A instrução break, ao fim de cada caso, indica que a execução deve parar. o Se for omitida, a execução continua. default: o que fazer se nenhuma das condições for cumprida switch-case-default switch (acao) { case 'preparar': document.write("<li> case 'embalar': document.write("<li> case 'enviar': document.write("<li> break; default: document.write("<em> } Preparar </li>\n"); Embalar </li>\n"); Enviar</li>\n"); Erro! </em>"); Loops Loops são estruturas que permite repetir várias vezes a mesma peça de código, até que uma condição seja satisfeita while A instrução while repete um bloco de instruções, enquanto a condição especificada for verdadeira http://marx.vanderlinden.com.br 8 var num = 1; while (num <= 10){ document.write( "O número é " + num + "<br>\n" ); num++; } document.write('Fim'); O número O número O número O número O número O número O número O número O número O número Fim é é é é é é é é é é 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 6 <br> 7 <br> 8 <br> 9 <br> 10 <br> O número é 1 O número é 2 O número é 3 O número é 4 O número é 5 O número é 6 O número é 7 O número é 8 O número é 9 O número é 10 Fim do... while A instrução do .. while funciona da mesma maneira que o while, mas o bloco é executado ao menos uma vez. var num = 1; do { document.write( "O número é " + num + "<br>\n" ); num++; } while (num <= 10); document.write('Fim'); var num = 11; do { document.write( "O número é " + num + "<br>\n" ); num++; } while (num <= 10); http://marx.vanderlinden.com.br 9 document.write('Fim'); O número é 11 <br> Fim for Um bloco for define uma maneira padronizada de se especificar um loop seqüenciado Sintaxe: for(inicialização; condição; modificação) { ... } for (num = 1; num <= 10; num++) { document.write( "O número é " + num + "<br>\n" ); } document.write('Fim'); num = 1; for (; num <= 10; num++) { document.write( "O número é " + num + "<br>\n" ); } num = 1; for (; num <= 10; ) { document.write( "O número é " + num + "<br>\n" ); num++; } Objetos e arrays Objetos Javascript define um tipo especial de variável chamado Objeto. o Objetos não pertencem a classes explicitamente definidas. Um objeto em Javascript é uma associação de múltiplos valores, organizados por nomes. o Tipo de dados especial que contém conjuntos de dados de outros tipos. o Pode ser visto como um array associativo ou lista associativa. http://marx.vanderlinden.com.br 10 Objetos como listas associativas Uma lista associativa é análoga a um dicionário. A cada chave da lista, é associado um valor. o "Milho" → "Amarelo" o "Arroz" → "Branco" o "Limão" → "Verde Para criar um objeto, basta associá-lo ao valor {}. Depois, podem-se associar valores (propriedades) ao objeto usando a sintaxe: var cores = {}; cores['milho'] = 'Amarelo'; cores['arroz'] = 'Branco'; cores['limao'] = 'Verde'; A mesma sintaxe é usada para recuperar os elementos do objeto: document.write(cores['milho']); Saída: Amarelo A mesma variável pode, em diferentes momentos, representar diferentes tipos de valores, inclusive outros objetos. var valor = {}; valor['teste'] = 385; valor['blabla'] = 'Meu texto'; document.write( valor['teste'] + "<br>\n" ); valor = 50.3; document.write(valor); 385<br> 50.3 Criando um objeto É possível criar todos as propriedades de um objeto em uma única instrução: var computers = { 'trs-80' : 'Radio Shack', 2600 : 'Atari', 'adam' : 'Coleco' }; document.write( computers['adam'] + ', ' + computers[2600] ); Coleco, Atari http://marx.vanderlinden.com.br 11 Para adicionar um novo elemento a um objeto já existente, basta defini-lo: var computers = { 'trs-80' : 'Radio Shack', 2600 : 'Atari', 'adam' : 'Coleco' }; computers['mac'] = 'Apple'; document.write(computers['adam'] + ', ' + computers[2600] + ', ' + computers['mac'] ); Coleco, Atari, Apple É possível utilizar uma sintaxe alternativa (mais comum) para acessar alguns elementos de um objeto. o objeto['nome'] → objeto.nome 'nome' deve seguir a convenção para nomenclatura de variáveis: o Iniciar com letra o Não ter espaços ou caracteres especiais Exemplos: var sistemas = { stallman : 'GNU', 'linus' : "Linux" }; sistemas.apple = 'Mac OS X'; sistemas["microsoft"] = 'Windows'; document.write( sistemas['stallman'] + " " ); document.write(sistemas.linus + " "); document.write(sistemas.microsoft + " "); document.write(sistemas["apple"]); GNU Linux Windows Mac OS X for/in A estrutura de controle for/in serve para percorrer todas as propriedades de um objeto, mesmo que não se conheça seus nomes. Sintaxe: o for (tmpvar in objeto) o Percorre o objeto X vezes, onde X = número de propriedades do objeto. o A cada iteração, assumem os valores: tmpvar → nome da propriedade atual objeto[tmpvar] → valor da propriedade atual http://marx.vanderlinden.com.br 12 var sistemas = { stallman : 'GNU', 'linus' : "Linux" }; sistemas.apple = 'Mac OS X'; sistemas["microsoft"] = 'Windows'; for (var x in sistemas) { document.write( x + ': ' + sistemas[x] + ' | ' ); } stallman: GNU | linus: Linux | apple: Mac OS X | microsoft: Windows | Atenção: var sistemas = { stallman : 'GNU', 'linus' : "Linux" }; sistemas.apple = 'Mac OS X'; sistemas["microsoft"] = 'Windows'; for (var x in sistemas) { document.write( x + ': ' + sistemas.x + ' | ' ); } stallman: GNU | linus: Linux | apple: Mac OS X | microsoft: Windows | Um objeto pode ter outros objetos como membros: var comp = {}; comp.mac = {}; comp.mac.sistema = "Mac OS X"; comp.mac.fabricante = "Apple"; comp.winpc = {} comp.winpc.sistema = "Windows"; comp.winpc.fabricante = "Microsoft"; for(tipo in comp){ document.write("<h1>" + tipo + "</h2><ul>"); for(prop in comp[tipo]) document.write("<li><em>" + prop + "</em>: " + comp[tipo][prop] + "</li>" ); document.write("</ul>"); for(tipo in comp){ document.write("<h1>" + tipo + "</h2><ul>"); for(prop in comp[tipo]) document.write("<li><em>" + prop + "</em>: " + comp[tipo][prop] + "</li>" http://marx.vanderlinden.com.br 13 ); document.write("</ul>"); Arrays Um objeto pode ser tratado como um array, que armazena uma lista seqüencial de valores. Os elementos de um array podem ser de qualquer tipo. Para criar um objeto como um array, basta usar a sintaxe [ ]: var vazio = []; var primos = [2, 3, 5, 7, 11]; var outros = [ 1.1, true, "a" ]; Os elementos de um array são acessados pelos seus índices, que são números inteiros. O primeiro elemento tem índice 0. O último índice é sempre N-1, onde N é o número de elementos do array. Não há necessidade de se preocupar com alocação de espaço. A sintaxe [ ] também para recuperar elementos do array, a partir do índice. var pratos = ['Pizza', 'Chocolate', 'Lasanha', 'Feijoada']; document.write( "Eu quero " + pratos[2] + " com " + pratos[3] + "." ); Eu quero Lasanha com Feijoada. Arrays e objetos Um array é um objeto como qualquer outro. Um array pode ter propriedades (como qualquer objeto). As propriedades e os índices do array não se misturam. Inteiros e strings que podem ser convertidas em inteiros são consideradas índices. http://marx.vanderlinden.com.br 14 pratos = [ 'Pizza', 'Chocolate', 'Lasanha', 'Feijoada' ]; pratos['extra'] = 'Surpresa do dia'; document.write("Eu quero " + pratos.length + " pratos: "); for(var i=0; i<pratos.length; i++) document.write(pratos[i] + ' '); document.write(pratos['extra']); Eu quero 4 pratos: Pizza Chocolate Lasanha Feijoada Surpresa do dia pratos = [ 'Pizza', 'Chocolate', 'Lasanha', 'Feijoada' ]; pratos['extra'] = 'Surpresa do dia'; pratos['6'] = 'Salada'; pratos[0.5] = 'Promoção'; pratos[true] = 'Molho'; document.write( "Eu quero " + pratos.length + " pratos: " ); for(var i=0; i<pratos.length; i++) document.write( pratos[i] + ' ' ); document.write( '<br>' ); document.write( pratos.extra + ', ' + pratos[0.5] + ', ' + pratos[true] ); Eu quero 7 pratos: Pizza Chocolate Lasanha Feijoada undefined undefined Salada Surpresa do dia, Promoção, Molho Funções Uma função (ou subrotina, procedimento...) é um pedaço de código reutilizável. A função é definida apenas uma vez, e pode ser utilizada um número indefinido de vezes. Em Javascript, não é necessário fazer declaração de funções. Uma função é definida com o uso da palavra function. Definição: function exibeMensagem(){ document.write("Olá!"); } Uso: exibeMensagem(); Argumentos Uma função pode receber argumentos (parâmetros). Na definição da função especifica-se um nome de variável que será associado a cada argumento, na ordem especificada. function exibeMensagem(nome, cor){ document.write( 'Olá, <span style="color:' + cor + '">' + nome + '</span>!'); } http://marx.vanderlinden.com.br 15 exibeMensagem('Fulano de Tal', 'blue'); Saída: Olá, <span style="color:blue">Fulano de Tal</span>! Escopo de variáveis Parâmetros têm escopo local. Variávels declaradas dentro da função também têm escopo local. o Só são válidos dentro da função. Variáveis não-declaradas são consideradas globais. function exibeMensagem(nome){ var mensagem = 'Boa tarde'; document.write( mensagem + ', ' + nome + '!<br>\n' ); } exibeMensagem('Fulano de Tal'); //document.write( mensagem ); //Erro! //document.write( nome ); //Erro! Saída: Boa tarde, Fulano de Tal!<br> Exemplo: function exibeMensagem(nome){ mensagem = 'Boa tarde'; document.write( mensagem + ', ' + nome + '!<br>\n' ); } exibeMensagem('Fulano de Tal'); document.write( mensagem ); // OK! //document.write( nome ); //Erro! Saída: Boa tarde, Fulano de Tal!<br> Boa tarde Passando variáveis por valor Quando um valor primitivo é passado como um parâmetro para uma função, o interpretador Javascript cria uma cópia desse valor no escopo interno da função A modificação desse valor dentro da função não interfere no valor original function exibeMensagem(nome){ document.write( 'Boa tarde, ' + nome + '!<br>\n' ); nome = 'Beltrano Segundo'; } var nome = 'Fulano de Tal'; exibeMensagem(nome); http://marx.vanderlinden.com.br 16 document.write(nome); Saída: Boa tarde, Fulano de Tal!<br> Fulano de Tal Passando objetos por referência Objetos (incluindo arrays), por outro lado são passados em Javascript por referência. A mesma posição de memória é referenciada dentro e fora da função. function exibeMensagem(obj){ document.write( 'Boa tarde, ' + obj.nome + '!<br>\n' ); obj.nome = 'Beltrano Segundo'; } var dados = { nome : 'Fulano de Tal' }; exibeMensagem(dados); document.write(dados.nome); Saída: Boa tarde, Fulano de Tal!<br> Beltrano Segundo Retornando um valor Uma função pode retornar um valor à expressão que a chamou. Para retornar um valor dentro da função, basta usar a estrutura return. Ao se atingir a instrução return, a função finaliza a execução e retorna o valor ao programa principal. Não é necessário fazer qualquer alteração no cabeçalho da função, ou fazer qualquer especificação de tipo de dados. function media3(a, b, c){ return (a + b +c) / 3; } var x = media3(480,720,1080); document.write( "A média é " + x + "<br>\n" ); A média é 760<br> Uma Função é um Objeto Em Javascript, toda função é um Objeto. Pode ser armazenada em uma variável. Podem-se usar os objetos de funções para simular ponteiros para funções (C). http://marx.vanderlinden.com.br 17 Funções como Objetos var f1 = function soma2(a, b) { return a + b; } var f2 = function multi2(a, b) { return a * b; } var f3 = function exp2(a, b){ return Math.pow(a, b);} document.write(f1(4,5) + "; "); var x = [f1, f2, f3]; for(i in x){ document.write(x[i](3,4) + " "); } 9; 7 12 81 Funções pertencentes a Objetos Uma função pode ser associada a um objeto, como uma de suas propriedades. Uma função que pertence a um objeto é comumente chamada método. function quack(){ document.write("Quack!<br>\n"); } function arara(){ document.write("Arara!<br>\n"); } var pato = {}; pato.falar = quack; var arara = { falar : arara }; pato.falar(); arara.falar(); Saída: Quack!<br> Arara!<br> function quack(){ document.write("Quack!<br>\n"); } function arara(){ document.write("Arara!<br>\n"); } var pato = {}; pato.falar = quack; var arara = { falar : arara }; var aves = [pato, arara]; for(var i in aves){ document.write("Ave " + i + ": "); aves[i].falar(); } http://marx.vanderlinden.com.br 18 Saída: Ave 0: Quack!<br> Ave 1: Arara!<br> Criando métodos no objeto var pato = {}; pato.quack = function() { document.write("Quack!<br>\n"); }; pato.nadar = function(){ document.write( "Nadando como um pato.<br>\n"); }; pato.andar = function(){ document.write( "Andando como um pato.<br>\n"); }; pato.nadar(); Nadando como um pato. this Em uma função, a palavra-chave this se refere ao objeto ao qual aquela função pertence. É possível reaproveitar a mesma função para vários objetos, e this sempre se referirá ao objeto certo. var pato = {}; pato.verCor = function(){ document.write( "Sou um pato " + this.cor + "."); } pato.cor = 'cinza'; pato.verCor(); Sou um pato cinza. verCor = function(){ document.write( "Sou um pato " + this.cor + "."); } var pato1 = { verCor : verCor, cor : 'cinza'}; var pato2 = {}; pato2.verCor = verCor; pato2.cor = 'azul'; pato1.verCor(); document.write(" "); pato2.verCor(); Sou um pato cinza. Sou um pato azul. http://marx.vanderlinden.com.br 19 Construtores Um construtor: É definido como uma função comum. É chamado com o operador new. o Automatiza a criação e retorno de um novo objeto. nadar = function(){ document.write( "Nadando como um pato.<br>\n"); }; verCor = function(){ document.write( "Sou um pato " + this.cor + "."); } mudaCor = function(cor){this.cor = cor; } function Pato(c) { this.cor = c; this.verCor = verCor; this.mudaCor = mudaCor; this.nadar = nadar; } pato = new Pato('amarelo'); pato.nadar(); pato.verCor(); pato.mudaCor('verde'); pato.verCor(); Saída: Nadando como um pato.<br> Sou um pato amarelo.Sou um pato verde. Protótipo A melhor maneira de se emular o uso de classes em Javascript é através de um construtor e do uso de protótipos. Toda função tem uma propriedade chamada prototype. Todas as propriedades do prototype de um construtor são compartilhadas por todos os objetos criados por ele. Para usar protótipos, o construtor não pode ter parâmetros; function Pato() {} Pato.prototype.cor = 'azul'; Pato.prototype.verCor = function(){ document.write( "Sou um pato " + this.cor + "."); }; Pato.prototype.mudaCor = function(cor) { this.cor = cor; }; Pato.prototype.nadar = function(){ document.write( "Nadando como um pato.<br>\n"); }; http://marx.vanderlinden.com.br 20 pato = new Pato(); pato.nadar(); pato.verCor(); pato.mudaCor('verde'); pato.verCor(); Saída: Nadando como um pato.<br> Sou um pato azul.Sou um pato verde. Exemplo: donald = new Pato(); patolino = new Pato(); donald.mudaCor('branco'); patolino.mudaCor('preto'); donald.verCor(); patolino.verCor(); Sou um pato branco.Sou um pato preto. function Pato() {} Pato.prototype.cor = 'azul'; Pato.prototype.origem = {nome: '', ano: 0}; Pato.prototype.verCor = function(){ document.write( "Sou um pato " + this.cor + "."); }; Pato.prototype.mudaCor = function(cor) { this.cor = cor; }; Pato.prototype.nadar = function(){ document.write( "Nadando como um pato.<br>\n"); }; donald = new Pato(); donald.mudaCor('branco'); donald.origem.nome = 'Disney'; donald.origem.ano = 1934; patolino = new Pato(); patolino.mudaCor('preto'); patolino.origem.nome = 'WB'; patolino.origem.ano = 1937; document.write("Patolino: "); patolino.verCor(); document.write( "<br>\n" + patolino.origem.nome + ", " + patolino.origem.ano + "<br>\n\n" ); document.write("Donald: "); donald.verCor(); document.write( "<br>\n" + donald.origem.nome + ", " + donald.origem.ano + "<br>\n\n" ); http://marx.vanderlinden.com.br 21 Saída: Patolino: Sou um pato preto.<br> WB, 1937<br> Donald: Sou um pato branco.<br> WB, 1937<br> Solução Usar o construtor para propriedades. Usar o protótipo para métodos. function Pato() { this.cor = 'azul'; this.origem = {nome: '', ano: 0}; } Pato.prototype.verCor = function(){ document.write( "Sou um pato " + this.cor + "."); }; Pato.prototype.mudaCor = function(cor) { this.cor = cor; }; Pato.prototype.nadar = function(){ document.write( "Nadando como um pato.<br>\n"); }; Patolino: Sou um pato preto.<br> WB, 1937<br> Donald: Sou um pato branco.<br> Disney, 1934<br> Eventos Um evento é um acontecimento ocorrido em algum momento durante O carregamento da página pelo navegador. ou A utilização da da página pelo usuário. A cada evento, pode-se associar um código Javascript. Exemplos Objeto é clicado pelo mouse. O mouse passa por cima de um objeto. Texto de um formulário é modificado. Formulário é enviado. Página é carregada. Página é fechada. ... http://marx.vanderlinden.com.br 22 A maneira mais fácil de se associar um evento a um código Javascript é através das propriedades HTML. Todas começam com on... Não há distinção entre maiúsculas e minúsculas HTML × Javascript Eventos em HTML Exemplo: <img src="javascript.jpg" onClick="alert('Olá!')"> DOM – Document Object Model O mecanismo de Document Object Model (DOM) é a ferramenta que permite a total integração entre Javascript e o documento HTML no qual ele está integrado. Web sites dinâmicos = Aplicações Web http://marx.vanderlinden.com.br 23 O mecanismo de DOM mapeia o documento HTML como uma árvore composta por nós (Node). O nó-raiz que, contém todas as tags, é chamado document. Exemplo: Acesso a elementos específicos Para cada nó, o DOM define três métodos que podem ser usados para encontrar mais facilmente elementos específicos: getElementsByTagName() getElementsByName() getElementById() http://marx.vanderlinden.com.br 24 getElementsByTagName <html> <head><title>Teste</title> <style>(...)</style></head> <body> <img src="javascript.jpg"> <img src="goomba.jpg"> <script> function exibeProps(noh, nome){ ... } var imgs = document.getElementsByTagName('img'); exibeProps(imgs[0], 'imgs[0]'); exibeProps(imgs[1], 'imgs[1]'); </script> </body></html> Obter todas as imagens pertencentes ao primeiro parágrafo da página: var par = document.getElementsByTagname("p"); var imgs = par[0].getElementsByTagName("img"); getElementsByName() Retorna um array contendo todos os elementos com a propriedade "name" especificada. <img name="js" src="javascript.jpg"> <img name="goomba" src="goomba.jpg"> <script> var goomba = document.getElementsByName('goomba')[0]; </script> http://marx.vanderlinden.com.br 25 Problema no Internet Explorer 6.0: o getElementsByName() só verifica as tags input e img. getElementById() Retorna um único elemento HTML, o qual tem o atributo id especificado. Geralmente, é a melhor a maneira de se acessar um elemento específico. Exemplo: <img id="js" src="javascript.jpg"> <img id="goomba" src="goomba.jpg"> <script> var goomba = document.getElementById('goomba'); </script> Atributos Os atributos HTML de uma tag são mapeados como propriedades do elemento DOM: <html><head><title>Teste</title></head> <script> function mudaImg(){ var goomba = document.getElementById('goomba'); goomba.src = 'spikey.png'; } </script><body> <img id="goomba" src="goomba.jpg"> <p style="text-align:center" onClick="mudaImg()">Mudar imagem</p> </body></html> Criando e manipulando nós Além de alterar as propriedades de nós já existentes, DOM inclui métodos para adicionar nós à estrutura do documento. createElement(nome) createTextNode() appendChild() createElement() O método createElement funciona como um método de fábrica, isto é, cria e retorna um novo elemento HTML. Sintaxe: createElement(nome) O elemento é criado, mas não é adicionado ainda à árvore. http://marx.vanderlinden.com.br 26 createTextNode() createTextNode é análogo a createElement, mas cria um nó de texto; Sintaxe: createTextNode(texto) appendChild O método appendChild adiciona um elemento à arvore, como um filho do elemento que o chamou. Sintaxe: appendChild(obj) exemplo: <html> <head><title>Teste</title> <script> function inicializa(){ var p = document.createElement('p'); var texto = document.createTextNode('Hello, World!'); p.appendChild(texto); document.body.appendChild(p); } </script> </head> <body onLoad="inicializa()"></body> </html> Saída: Exemplo: <html><head><title>Teste</title><style> div { border:1px solid black; width: 20em ; text-align:center; backgroundcolor:#D5EAFF } </style><script> function inicializa(){ var div = document.createElement('div'); var p = document.createElement('p'); var texto = document.createTextNode('Hello, World!'); div.appendChild(p); p.appendChild(texto); document.body.appendChild(div); } </script></head> <body onLoad="inicializa()"></body></html> http://marx.vanderlinden.com.br 27 Saída: CSS e JavaScript É possível utilizar Javascript para modificar a classe de um elemento HTML. Como class é uma palavra reservada (embora não usada) em Javascript, a propriedade equivalente se chama className. <html><head><title>Teste</title><style> .c1 { background-color: green; color: white;} .c2 { background-color: blue; color: black; } </style></head><body> <p id="p1" class="c1" onClick="muda()"> The book is on the table.</p> </body><script> function muda(){ var p = document.getElementById('p1'); if(p.className == 'c1') p.className = 'c2' else p.className = 'c1'; } </script></html> Saída: http://marx.vanderlinden.com.br 28