JavaScript ::: DOM (Document Object Model) ::: Eventos JavaScript + DOM (Document Object Model) |
Como usar o evento DOMContentLoaded para verificar se o DOM (Document Object Model) já está disponível para manipulação via JavaScriptQuantidade de visualizações: 3179 vezes |
|
Em algumas situações nós precisamos iniciar a manipulação dos elementos de uma página HTML a partir de nossos códigos JavaScript mas não sabemos com certeza se os elementos do DOM (Document Object Model) já estão disponíveis para acesso. Para essas situações nós podemos usar o evento DOMContentLoaded, que é disparado quando todo o conteúdo DOM já estiver carregado, mesmo que imagens e folhas de estilo CSS ainda estejam pendentes de carregamento. Vamos ver um exemplo? Considere o código JavaScript abaixo (incluindo o código HTML):
<html>
<head>
<title>Estudos PHP</title>
<script type="text/javascript">
// vamos obter uma referência ao elemento DIV
var divElem = document.getElementById("m_div");
// vamos a cor do texto da DIV
divElem.style.color = 'blue';
</script>
</head>
<body>
<div id="m_div">Sou um elemento DIV</div>
</body>
</html>
Veja que temos um elemento DIV na parte <body> do página e, na parte <head> temos um código JavaScript que tenta alterar a cor do texto da DIV. Como já era de se esperar, ao abrirmos este documento HTM no navegador, teremos o seguinte erro: Uncaught TypeError: Cannot read property 'style' of null at index.html:9 Isso aconteceu porque o código JavaScript foi executado antes que o elemento DIV fosse inserido no DOM da página. Para evitar isso, só precisamos usar o evento DOMContentLoaded. Veja a nova versão do código:
<html>
<head>
<title>Estudos PHP</title>
<script type="text/javascript">
// vamos tratar o evento DOMContentLoaded
document.addEventListener('DOMContentLoaded', function(e){
// vamos obter uma referência ao elemento DIV
var divElem = document.getElementById("m_div");
// vamos a cor do texto da DIV
divElem.style.color = 'blue';
});
</script>
</head>
<body>
<div id="m_div">Sou um elemento DIV</div>
</body>
</html>
Agora execute o exemplo novamente e veja como o texto do elemento DIV é colorido de azul, uma boa indicação de que o evento DOMContentLoaded foi disparado com sucesso. Note ainda como usamos o método addEventListener() do objeto document para fazer a associação do evento. |
Java ::: Estruturas de Dados ::: Lista Ligada Simples |
Estruturas de dados em Java - Introdução às listas ligadas em JavaQuantidade de visualizações: 289 vezes |
|
Então você se interessou pelo assunto de listas ligadas em Java? Recomendo que leia esta anotação com muita atenção. É o ponto de partida para o entendimento e implementação desta estrutura de dados tão importante. Uma lista singularmente ou duplamente ligada (singly or doubly linked list) é uma lista dinâmica no sentido de que ela pode crescer ou diminuir de acordo com as necessidades do programa. As matrizes (arrays) comuns também têm seu papel assegurado no estudo das estruturas de dados. No entanto, uma de suas limitações é que seus elementos são dispostos lado a lado na memória. Isso torna a inserção de um novo elemento no meio do array uma tarefa dispendiosa, visto que os demais elementos precisam ser movidos para outras posições. Em uma lista dinâmica isso não acontece. O conceito principal das listas ligadas é a capacidade de um nó (cada elemento da lista é chamado de nó) poder apontar para um outro nó com estrutura semelhante. Veja a estrutura típica de um nó em uma lista ligada:
// classe No
public class No{
public int valor;
public No proximo;
}
// fim da classe No
Note que esta classe contém dois campos: um campo do tipo int que guarda o valor do nó e um campo do tipo referência apontando para um objeto do mesmo tipo que o nó atual. Isso permite a circularidade das listas, ou seja, um nó apontando para um elemento de seu mesmo tipo. Com este conhecimento já podemos criar o início de uma lista singularmente ligada, para isso só precisamos declarar uma variável do tipo No. Veja: // declara o início da lista No inicio; Até agora temos uma lista ligada vazia. A criação do primeiro elemento da lista pode ser feito da seguinte forma:
public class Lista{
// declara o início da lista
static No inicio = null;
public static void main(String args[]){
// verifica se a lista está vazia
if(inicio == null){
// reserva memória para o novo nó
inicio = new No();
// a memória foi alocada com sucesso?
if(inicio != null){
inicio.valor = 150;
// é o primeiro nó...seu campo proximo não deve
// apontar para lugar nenhum
inicio.proximo = null;
}
}
System.out.println(inicio.valor);
System.exit(0);
}
}
Aqui nós temos a criação do primeiro nó de uma lista singularmente ligada. Note como usamos a palavra-chave new para alocar memória para o nó atual. Veja também que o valor null é fornecido para o campo próximo do nó. Isso aconteceu porque temos apenas um nó. Em outras dicas desta seção abordaremos como inserir os demais nós e também listar todos os nós existentes na lista. Até lá. |
Portugol ::: Desafios e Lista de Exercícios Resolvidos ::: Laços de Repetição |
Exercícios Resolvidos de Portugol - A concessionária de veículos "CARANGO VELHO" está vendendo os seus veículos com descontos. Faça um algoritmo PortugolQuantidade de visualizações: 1362 vezes |
|
Pergunta/Tarefa: A concessionária de veículos "CARANGO VELHO" está vendendo os seus veículos com descontos. Faça um algoritmo Portugol que calcule e exiba o valor do desconto e o valor a ser pago pelo cliente de vários carros. O desconto deverá ser calculado de acordo com o ano do veículo. Até o ano 2000 o desconto é 12%, e acima de 2000 o desconto é de 7%. Seu código deverá solicitar o valor do carro e o seu ano e aplicar o desconto correspondente. Além disso o sistema deverá perguntar se deseja continuar calculando descontos até que a resposta seja: "(N) Não". Informar o total de carros com ano até 2000 e o total geral a ser pago pelo cliente. Sua saída deve ser parecida com: Informe o valor do carro sem desconto: 25000 Informe o ano do carro: 2010 Desconto concedido: 1750 Valor do carro com desconto: 23250 Deseja adicionar mais carros? [S, N]: S Informe o valor do carro sem desconto: 30500 Informe o ano do carro: 1985 Desconto concedido: 3660 Valor do carro com desconto: 26840 Deseja adicionar mais carros? [S, N]: S Informe o valor do carro sem desconto: 16800 Informe o ano do carro: 1990 Desconto concedido: 2016 Valor do carro com desconto: 14784 Deseja adicionar mais carros? [S, N]: N Total de carros com ano até 2000: 2 Total geral a pagar: 64874 Veja a resolução comentada deste exercício usando Portugol Webstudio:
programa {
funcao inicio() {
// variáveis usadas na resolução do problema
real valor_carro, valor_desconto, valor_carro_desconto
real total_geral
inteiro ano
inteiro total_carros_ano_2000
caracter resposta
// vamos inicializar os valores de algumas variáveis
total_geral = 0
total_carros_ano_2000 = 0
// repete até que o usuário informe o valor "N"
faca {
// vamos ler o valor do carro sem desconto
escreva("\nInforme o valor do carro sem desconto: ")
leia(valor_carro)
// vamos ler o ano do carro
escreva("Informe o ano do carro: ")
leia(ano)
// o ano é menor ou igual a 2000
se (ano <= 2000) {
valor_desconto = valor_carro * (12.0 / 100.0)
// vamos somar mais este carro
total_carros_ano_2000 = total_carros_ano_2000 + 1
}
senao {
valor_desconto = valor_carro * (7.0 / 100.0)
}
// calculamos o valor do carro com o desconto
valor_carro_desconto = valor_carro - valor_desconto
escreva("Desconto concedido: ", valor_desconto)
escreva("\nValor do carro com desconto: ", valor_carro_desconto)
// somamos mais este valor ao total geral
total_geral = total_geral + valor_carro_desconto
// perguntamos se o usuário deseja adicionar mais carros
escreva("\nDeseja adicionar mais carros? [S, N]: ")
leia(resposta)
} enquanto((resposta != 'N') e (resposta != 'n'))
// mostramos os resultados
escreva("\nTotal de carros com ano até 2000: ", total_carros_ano_2000)
escreva("\nTotal geral a pagar: ", total_geral)
}
}
|
Portugol ::: Desafios e Lista de Exercícios Resolvidos ::: Estruturas de Controle |
Exercício Resolvido de Portugol - Como testar se um ano é bissexto em Portugol - Um programa que lê um ano com quatro dígitos e informa se ele é bissexto ou nãoQuantidade de visualizações: 2488 vezes |
|
Pergunta/Tarefa: Chama-se ano bissexto o ano ao qual é acrescentado um dia extra, ficando ele com 366 dias, um dia a mais do que os anos normais de 365 dias, ocorrendo a cada quatro anos (exceto anos múltiplos de 100 que não são múltiplos de 400). Isto é feito com o objetivo de manter o calendário anual ajustado com a translação da Terra e com os eventos sazonais relacionados às estações do ano. O último ano bissexto foi 2012 e o próximo será 2016. Um ano é bissexto se ele for divisível por 4 mas não por 100, ou se for divisível por 400. Escreva um programa Portugol que pede ao usuário um ano com quatro dígitos e informa se ele é bissexto ou não. Sua saída deverá ser parecida com: Informe o ano: 2024 O ano informado é bissexto. Veja a resolução comentada deste exercício usando Portugol Webstudio:
// Como testar se um ano é bissexto em Portugol
programa {
funcao inicio() {
// variáveis usadas na resolução do problema
inteiro ano
// vamos solicitar que o usuário informe um ano
escreva("Informe o ano: ")
leia(ano)
// vamos verificar se o ano informado é bissexto
se (((ano % 4 == 0) e (ano % 100 != 0)) ou (ano % 400 == 0)) {
escreva("O ano informado é bissexto.")
}
senao {
escreva("O ano informado não é bissexto.")
}
}
}
|
Nossas 20 dicas & truques de programação mais populares |
|
JavaScript - Como elevar uma base a um determinado expoente usando o método pow() do objeto Math do JavaScript VB.NET - Como inverter o conteúdo de uma string em VB.NET usando os métodos ToCharArray() e Reverse() Python - Como inserir uma determinada quantidade de espaços à esquerda de um valor numérico usando Python JavaScript - Como construir uma determinada data e hora usando o construtor do objeto Date do JavaScript |
Você também poderá gostar das dicas e truques de programação abaixo |
|
Delphi - Como verificar se um arquivo existe usando a função FileExists() da unit SysUtils do Delphi Java - Estruturas de dados em Java - Como obter a quantidade de nós em uma árvore binária usando Java |
Nossas 20 dicas & truques de programação mais recentes |
Últimos Projetos e Códigos Fonte Liberados Para Apoiadores do Site |
|
Python - Como criar o jogo Pedra, Papel, Tesoura em Python - Jogo completo em Python com código comentado |
Últimos Exercícios Resolvidos |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |




