Javascript - Marx Gomes Van der Linden

Transcrição

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
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';
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
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 ){
}
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 )
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){
}
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)
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':
case 'enviar':
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
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(
);
num++;
} while (num <= 10);
var num = 11;
do {
document.write(
);
num++;
} while (num <= 10);
9
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(
);
}
num = 1;
for (; num <= 10; num++) {
document.write(
);
}
num = 1;
for (; num <= 10; ) {
document.write(
);
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.
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
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
12
var sistemas = {
stallman : 'GNU',
'linus' : "Linux"
};
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"
};
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>"
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.
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>!');
}
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:
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
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
document.write( 'Boa tarde, '
+ nome + '!<br>\n' );
nome = 'Beltrano Segundo';
}
var nome = 'Fulano de Tal';
exibeMensagem(nome);
16
document.write(nome);
Saída:
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:
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).
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(){
}
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();
}
18
Saída:
Ave 0: Quack!<br>
Ave 1: Arara!<br>
Criando métodos no objeto
var pato = {};
pato.quack = function() {
};
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(
}
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.
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(
};
verCor = function(){
document.write(
}
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(
};
Pato.prototype.mudaCor =
function(cor) { this.cor = cor; };
Pato.prototype.nadar = function(){
document.write(
};
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};
document.write(
};
document.write(
};
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"
);
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};
}
document.write(
};
document.write(
};
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.
...
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
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()
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>
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.
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>
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:
28

Javascript - Marx Gomes Van der Linden

Transcrição

Documentos relacionados

Textos Luminosos Descrição: Este é um script muito interessante

Cursor Animado

Comunicação oral Sala G – Educação e Comunicação T2

8,76% (oit - sintracon - pato branco

Parque Tecnológico de Pato Branco recebe oficialmente mais uma

Boletim de Atualização Document Light – Versão 1.14

Roteiro 13 - André Moraes [email protected]

Principal - Regimento Osorio

Cursor com Texto

Edital - www.simonleiloes.com.br.