docRoteiro 13 - André Moraes [email protected]
download 
Denúncia Transcrição
Roteiro 13 - André Moraes [email protected]
Desenvolvimento de Sites com PHP e Mysql
Docente – André Luiz Silva de Moraes
Roteiro 13: javaScript – geração de conteúdo HTML / Agrupamento de Elementos 1
Objetivos
•
Gerar marcação HTML com document.write;
•
Acessar conteúdos de elementos com a propriedade innerHTML;
•
Acessar elementos da página com getElementsByTagName();
•
Acessar elementos da página com getElementsByName();
Introdução
Neste roteiro serão explorados comandos para realizar a geração de conteúdo HTML, inserção de conteúdo em
elementos já existentes, através de javaScript Também serão explorados métodos para realizar a seleção de vários elementos
simultaneamente com uso da função getElementsByTagName(). Estes comandos são importantes para dinamizar o controle
sobre os elementos da página e possibilitarão criar ferramentas que possam interagir mais com o usuário.
Gerando marcação HTML com document.writeln
O javaScript oferece uma forma de inserir Strings HTML diretamente com o comando document.writeln(), que recebe como
argumento apenas o texto a ser inserido no formato HTML. O texto inserido pode ser formatado em formato de TAGS da mesma
forma como se estivéssemos digitando no <body> da página. a vantagem de utilizar o comando é a produção dinâmica de
conteúdo, a figura 51 ilustra um exemplo de uso do comando:
Figura 51: Exemplo de uso de document.writeln
Resultado:
Alteração de marcação com innerHTML
Além da geração de marcação pelo javaScript, é possível também alterar o conteúdo de elementos já existentes na página
através da propriedade innerHTML. A propriedade permite que seja alterado, acrescentado ou recuperado o conteúdo de
elementos HTML, ela pode por exemplo, preencher o conteúdo de texto de uma caixa de texto ou ainda inserir um conteúdo
qualquer dentro de uma div existente na página.
Exemplo de uso de innerHTML para alterar o conteúdo de um elemento HTML
Instituto Federal de Santa Catarina- Campus Garopaba
Pág | 60
Desenvolvimento de Sites com PHP e Mysql
Docente – André Luiz Silva de Moraes
OBSERVAÇÃO: Praticamente qualquer elemento HTML pode ter o seu conteúdo alterado. O método innerHTML também é muito
utilizado para exibir informações de avisos ao usuário utilizando DIV's que servem como contêiner de informações.
Agrupamentos de Elementos
Quando é necessário alterar um elemento em uma página é comum o uso da funcionalidade proposta com o método
document.getElementById(“idElemento”).propriedade, porém quando é necessário aplicar alguma funcionalidade ou
recuperar o valor de vários elementos simultaneamente é necessário fazer uso de métodos que permitam tal ação. A seguir são
ilustrados alguns métodos capazes de controlar vários elementos ao mesmo tempo:
Métodos para agrupamento de elementos
Comando
Significado
document.getElementsByTagName(“ ”)
Retorna um array contendo os elementos
encontrados referentes a uma tag HTML.
O array retornado obedece a ordem em
que os elementos aparecem na página.
Document.getElementsByName("")
Exemplo de utilização
var radios =
Retorna um array contendo os elementos document.getElementsByName('equipam
referentes a um determinado name HTML entos');
OBSERVAÇÃO: Para manipular vários elementos ao mesmo tempo e realizar operações de cálculo, por exemplo, será
necessário utilizar os comandos para repetição como for e while. A seguir um exemplo ilustrando o uso desta funcionalidade com
getElementsByTagName e getElementsByName:
Exemplo de uso de getElementsByTagName para checkBox:
var todasCheck = document.getElementsByTagName('input');
for(i=0;i< todasCheck.length;i++){
if(todasCheck [i].type == 'checkbox'){
todasCheck [i].onclick = funcaoQualquer;
}
}
Atenção: Para capturar valores de checkbox pode-se utilizar o método getElementsByTagName utilizando-se o teste com a
propriedade type para delimitar os elementos a serem pesquisados verificando se os mesmos são do tipo checkbox. Para
calcular valores ou verificar se estão ou não marcadas pode-se utilizar a propriedade checked.
Instituto Federal de Santa Catarina- Campus Garopaba
Pág | 61
Desenvolvimento de Sites com PHP e Mysql
Docente – André Luiz Silva de Moraes
Exemplo de uso de getElementsByName():
//arquivo funcoes.js
function calculaSexo(){
var radiosSexo = document.getElementsByName('sexo');
for(i=0;i<radiosSexo.length;i++){
if(radiosSexo[i].checked){
var sexo = radiosSexo[i].value;
}
}
document.getElementById('txtSexo').value = sexo;
}
Tabela 19: Exemplo de captura de valor com uso de radio Button
Tarefas
Criar um formulário de cadastro dentro de uma div com ID = “auxiliar” contendo 5 caixas de texto (nome, sobrenome, telefone,
cidade e email.) e um botão de enviar. Em seguida, realizar as seguintes tarefas:
1.
Desenvolver a função colorirCaixas(), e com uso da propriedade getElementsByTagName() fazer com que ao
movimentar o mouse sobre uma das caixas, todas as caixas de texto e o botão fiquem com a sua cor de borda
verde-escuro (#228B22);
2.
Desenvolver uma função validaConteudo(), fazendo com que ao clicar no botão enviar verifique os itens do
formulário e caso algum seja deixado em branco, inserir uma mensagem em uma nova div de id =’mensagem’.
3.
◦
A mensagem deverá estar localizada logo acima do formulário avisando que as caixas não podem ficar em
branco.
◦
O script deverá pintar cada caixa vazia com o seu fundo vermelho até que o problema seja
corrigido. Utilizar as funções document.getElementsByTagName e innerHTML para as mensagens;
Desenvolver uma função copiaConteudo(), e fazer com que ao evento onblur todo o texto inserido nas 3 caixas,
nome, email e cidade seja copiado para um novo elemento textarea. Cada vez que o usuário deixar a caixa, a
textarea deve ser alimentada com o novo conteúdo.
Referências
“W3SCHOOLS”, disponível em http://www.w3schools.com
“Java2S”, disponível em http://www.java2s.com/
Instituto Federal de Santa Catarina- Campus Garopaba
Pág | 62
Documentos relacionados
JavaScript - Marx Gomes Van der Linden
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()
getElem...
Javascript - Marx Gomes Van der Linden
pratos['extra'] = 'Surpresa do dia';
document.write("Eu quero " + pratos.length + " pratos: ");
