 |
|
||||
Você está aqui: JavaScript ::: DOM (Document Object Model) ::: document Object |
JavaScript DOM - Como usar o objeto document em seus códigos JavaScriptQuantidade de visualizações: 7862 vezes |
O objeto document representa a página HTML e fornece possibilidades para acessar, criar e manipular todos os elementos HTML no documento. Este objeto está logo abaixo do objeto window na hierarquia do DOM (Document Object Model), ou seja, podemos dizer que este elemento é filho do objeto window. Assim, para acessá-lo a partir de nossos códigos JavaScript podemos usar window.document ou simplesmente document. Veja:----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<html>
<head>
<title>Estudos JavaScript</title>
</head>
<body>
<script type="text/javascript">
// vamos obter o título desta página
var titulo = window.document.title;
// vamos exibir o resultado em uma mensagem alert
window.alert("O título da página é: " + titulo);
</script>
</body>
</html>
Neste exemplo nós usamos o objeto window para obter o objeto document. O passo seguinte foi obter o valor de sua propriedade title, que é usada para definir ou obter o título da página HTML. Para obter um elemento em um documento HTML nós podemos usar as coleções (all, anchors, applets, etc), os métodos getElementById(), getElementsByName() e getElementsByTagName() e algumas outras propriedades e métodos. Se precisarmos acessar o elemento body ou html, podemos usar as propriedades document.documentElement e document.body. Veja um trecho de código no qual acessamos o corpo do documento HTML e definimos sua cor de fundo: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <script type="text/javascript"> // vamos definir a cor de fundo da página HTML window.document.body.bgColor = "Beige"; </script> Uma vez que o objeto document é um objeto contâiner para um documento HTML, ele fornece métodos para a crição de novos elementos (por meio do método createElement()), nós textos (createTextNode()) e nós de comentários (createComment()). Depois que um nó (node) é criado, ele pode ser inserido no documento por meio de chamadas aos métodos appendChild() e insertBefore(). Veja um trecho de código no qual usamos o método createElement() para criar um novo elemento div e logo em seguida usamos o método appendChild() para adicionar o elemento recém-criado no final do documento HTML: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<html>
<head>
<title>Estudos JavaScript</title>
</head>
<body>
<script type="text/javascript">
// vamos criar um novo elemento div
var elem = document.createElement("div");
elem.innerHTML = "Sou uma div criada dinâmicamente";
elem.style.backgroundColor = "beige";
// vamos adicionar este novo elemento no final do documento
document.body.appendChild(elem);
</script>
</body>
</html>
Os documentos HTML contidos em elementos frames e iframes possuem seus próprios objetos document. Para obter tais objetos, devemos usar a propriedade contentDocument. |
 Link para compartilhar na Internet ou com seus amigos: |
JavaScript ::: Dicas & Truques ::: Matemática e Estatística |
Como calcular juros simples e montante usando JavaScriptQuantidade de visualizações: 16724 vezes |
|
O regime de juros será simples quando o percentual de juros incidir apenas sobre o valor principal. Sobre os juros gerados a cada período não incidirão novos juros. Valor Principal ou simplesmente principal é o valor inicial emprestado ou aplicado, antes de somarmos os juros. Transformando em fórmula temos: J = P . i . n Onde: J = juros P = principal (capital) i = taxa de juros n = número de períodos Imaginemos uma dívida de R$ 2.000,00 que deverá ser paga com juros de 5% a.m. pelo regime de juros simples e o prazo para o pagamento é de 2 meses. O cálculo em JavaScript pode ser feito assim: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<script type="text/javascript">
var principal = 2000.00;
var taxa = 0.08;
var meses = 2;
var juros = principal * taxa * meses;
document.write("O total de juros a ser pago é: "
+ juros);
</script>
O montante da dívida pode ser obtido das seguintes formas: a) Montante = Principal + Juros b) Montante = Principal + (Principal x Taxa de juros x Número de períodos) M = P . (1 + (i . n)) Veja o código: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<script type="text/javascript">
var principal = 2000.00;
var taxa = 0.08;
var meses = 2;
var juros = principal * taxa * meses;
var montante = principal + juros;
document.write("O total de juros a ser pago é: "
+ juros + "<br>");
document.write("O montante da dívida é: " + montante);
</script>
|
JavaScript ::: Dicas & Truques ::: Set (Conjunto) |
Como retornar elementos presentes no primeiro vetor e não presentes no segundo vetor em JavaScript usando o objeto SetQuantidade de visualizações: 1398 vezes |
|
Este é um código muito interessante de ser feito em JavaScript. Dados dois arrays a e b, temos que retornar os números que estão presentes no primeiro array, mas que não estão presentes no segundo array. Este código pode ser escrito usando diversas abordagens. Nesta dica mostrarei como resolvê-lo usando um objeto Set, adicionado à linguagem JavaScript na revisão ECMAScript 2015, também chamada de ES6 e ECMAScript 6. Vamos ao código então: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<html>
<head>
<title>O objeto Set do JavaScript</title>
</head>
<body>
<script type="text/javascript">
// primeiro vetor
var a = [4, 8, 1, 23, 65];
// segundo vetor
var b = [23, 8, 90, 3, 7];
// vetor resultante
var c = [];
// criamos um objeto Set e guardamos nele os
// elementos do segundo vetor
var set = new Set();
for (var i = 0; i < b.length; i++){
set.add(b[i]);
}
// agora varremos o primeiro vetor e usamos
// o método has() do objeto Set para verificar se
// o valor não está contido nele
for (var i = 0; i < a.length; i++){
if(!set.has(a[i])){
c.push(a[i]);
}
}
document.writeln("Primeiro vetor: " + a);
document.writeln("<br>Segundo vetor: " + b);
document.writeln("<br>Resultado: " + c);
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: Primeiro vetor: 4, 8, 1, 23, 65 Segundo vetor: 23, 8, 90, 3, 7 Resultado: 4, 1, 65 Note que os valores 4, 1 e 65 estão presentes no primeiro array mas não estão presentes no segundo. |
JavaScript ::: Dicas & Truques ::: Recursão (Recursividade) |
JavaScript Avançado - Como remover todas as ocorrências de uma substring em uma string usando uma função recursivaQuantidade de visualizações: 214 vezes |
|
Esta dica contém um ótimo exercício de recursão. Trata-se de uma função JavaScript recursiva para remover todas as ocorrências de uma substring em uma string. Analise o código cuidadosamente e você conseguirá desenvolver várias funções de recursividade a partir dele. Veja o código JavaScript completo: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<html>
<head>
<title>Estudando JavaScript</title>
</head>
<body>
<script type="text/javascript">
// função recursiva que remove todas as ocorrências
// de uma substring em uma string
function remover(string, substring){
// primeiro obtemos o índice da substring
// dentro da string
var indice = string.indexOf(substring);
var resultado = "";
// interromper a recursividade?
if(indice == -1){
return string;
}
else{
resultado += string.substring(0, indice) +
remover(string.substring(indice + substring.length),
substring);
}
return resultado;
}
// hora de testar a função recursiva
var frase = "Ontem comprei duas camisas e uma calça";
document.writeln("Original: " + frase);
frase = remover(frase, "duas");
document.writeln("<br>Nova frase: " + frase);
</script>
</body>
</html>
Ao executar este código nós teremos o seguinte resultado: Original: Ontem comprei duas camisas e uma calça Nova frase: Ontem comprei camisas e uma calça |
JavaScript ::: Elementos de Formulários HTML ::: input type file Element/Object |
Como obter a quantidade de arquivos que o usuário selecionou em um input type fileQuantidade de visualizações: 4117 vezes |
Em algumas situações nós precisamos saber quantos arquivos o usuário selecionou em um elemento input type file. Para isso podemos usar a propriedade length do FileList que representa a lista de arquivos no input file. Veja o exemplo a seguir:----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Estudos JavaScript</title>
</head>
<body>
<form>
<input id="arquivo" onChange="contarArquivos()" name="arquivo" multiple type="file">
</form>
<script type="text/javascript">
function contarArquivos(){
// vamos obter uma referência ao elemento file
var arquivo = document.getElementById("arquivo");
// agora vamos obter a quantidade de arquivos que o usuário selecionou
var quantArquivos = arquivo.files.length;
// mostramos o resultado
window.alert("Você selecionou " + quantArquivos + " arquivos.");
}
</script>
</body>
</html>
Note que tiramos proveito do evento onChange() do input file para obter a informação desejada no exato momento que o usuário escolhe o(s) arquivos(s). Neste exemplo eu criei um input file multiple, ou seja, o usuário pode escolher mais de um arquivo por vez (em geral pressionando a tecla Ctrl para múltiplas seleções). |
JavaScript ::: Dicas & Truques ::: Tratamento de Erros |
Como retornar o rastreio da pilha de um erro de tempo de execução em JavaScript usando a propriedade stack do objeto ErrorQuantidade de visualizações: 7228 vezes |
|
A propriedade stack do objeto Error da linguagem JavaScript pode ser usada quando queremos obter mais informações sobre as causas do aparecimento de um erro em tempo de execução. Dessa forma nós conseguimos rastrear o erro até a sua origem. Veja um trecho de código JavaScript completo demonstrando o seu uso: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>Estudos JavaScript</title>
</head>
<body>
<script language="javascript">
// o trecho de código a seguir vai provocar
// um erro de tempo de execução em JavaScript
try{
// y não foi definido
var x = y;
}
catch(e){
// mostra a pilha de rastreio do erro
document.write("Rastreio da pilha: " + e.stack);
}
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: Rastreio da pilha: ReferenceError: y is not defined at http://localhost/estudos/estudos_js.html:13:13 |
JavaScript ::: Dicas & Truques ::: Strings e Caracteres |
Como converter uma string para letras minúsculas em JavaScript usando a função toLowerCase() do objeto StringQuantidade de visualizações: 1 vezes |
|
Nesta dica mostrarei como usar a função toLowerCase() do JavaScript para transformar todos os caracteres de uma palavra, frase ou texto para letras minúsculas. Esta função faz parte do objeto String. Veja um página HTML completa demonstrando o exemplo: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>Strings em JavaScript</title>
</head>
<body>
<script type="text/javascript">
var frase = "Veja Esta Frase.";
document.write("String original: " +
frase + "<br>");
// agora vamos transformar todos os caracteres
// da string para letras minúsculas
frase = frase.toLowerCase();
document.write("Em letras minúsculas: " +
frase + "<br>");
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: String original: Veja Esta Frase. Em letras minúsculas: veja esta frase. |
JavaScript ::: Dicas & Truques ::: Arrays e Matrix (Vetores e Matrizes) |
Como adicionar um ou mais elementos ao início de um vetor JavaScript usando o método unshift() do objeto Array - [Revisado]Quantidade de visualizações: 7136 vezes |
O método unshift(), presente no JavaScript desde sua versão 1.2, é usado quando queremos adicionar um ou mais elementos no início de um vetor (array). Veja:----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<script type="text/javascript">
var valores = new Array(1, 2, 3, 4, 5);
document.write("Valores no vetor: " + valores + "<br>");
valores.unshift(6);
document.write("Novos valores no vetor: " + valores);
</script>
Aqui nós adicionamos o valor 6 no início do vetor. Veja agora como adicionar três valores no início do vetor: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<script type="text/javascript">
var valores = new Array(1, 2, 3, 4, 5);
window.alert("Valores no vetor: " + valores);
valores.unshift(6, 7, 8);
window.alert("Novos valores no vetor: " + valores);
</script>
É importante observar que a função unshift() modifica o vetor original, e seu retorno é a nova quantidade de elementos no vetor. |
JavaScript ::: Dicas & Truques ::: Strings e Caracteres |
Como converter uma string em um valor de ponto-flutuante em JavaScript usando a função parseFloat()Quantidade de visualizações: 7821 vezes |
|
Em algumas situações nós precisamos receber uma string informada pelo usuário e convertê-la para um valor real válido. Um valor em JavaScript é o mesmo que um valor com casas decimais, ou seja, um valor de ponto-flutuante. Esta tarefa pode ser realizada com o auxílio da função parseFloat(). Veja uma página HTML completa demonstrando o seu uso: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <!doctype html> <html> <head> <title>Strings em JavaScript</title> </head> <body> <script type="text/javascript"> var valor1 = "87.32"; var valor2 = "Arquivo"; var valor3 = "65,54"; // vamos exibir os resultados document.write(parseFloat(valor1) + "<br>"); document.write(parseFloat(valor2) + "<br>"); document.write(parseFloat(valor3)); </script> </body> </html> Ao executarmos este código JavaScript nós teremos o seguinte resultado: 87.32 NaN 65 Note que apenas a primeira string pôde ser convertida para um valor fracionário com sucesso. |
Vamos testar seus conhecimentos em Engenharia Civil - Estruturas de Aço e Madeira |
| Evolução das estruturas Até o início do século XIX os metais exerciam uma função estrutural limitada nas edificações. O aço em abundância e econômico tornou-se disponível pela primeira vez na década de 1850. Assinale a opção correta quanto aos motivos que levaram à expansão da utilização de elementos metálicos em estruturas: Selecione a resposta: A) A utilização do ferro forjado e o sentido estético da época levaram a maior utilização da estrutura metálica. B) Devido à introdução do Processo Bessemer, em que grandes quantidades de ferro podiam ser transformadas em aço, em aproximadamente 20 minutos resultando em um metal com propriedades estruturais bastante superiores ao do ferro fundido. C) A carência de profissionais capacitados, artesãos, em trabalhar a alvenaria de pedra como elemento estrutural levaram a uma mudança em termos de tecnologia estrutural, havendo a utilização da estrutura metálica em larga escala. D) O incremento da urbanização e a necessidade da rapidez na construção de casas para as pessoas que vinham para as cidades trabalhar nas fábricas levaram à larga utilização da estrutura metálica, reduzindo assim, o seu custo. E) A verticalização das cidades e a ousadia dos arquitetos e dos construtores de se construir edifícios cada vez mais altos. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em |
| Vigas a flexão simples: seções retangulares O objetivo do dimensionamento de estruturas de concreto é obter segurança e economia. Muitas vezes, o projeto arquitetônico não possibilita vigas muito altas para grandes vãos. Uma solução adotada para esse tipo de situação, quando o concreto da seção da viga mais solicitada pode não resistir ao esforço de compressão, é adotar armadura dupla. Considere que uma viga V (20x30) tem uma solicitação de momento fletor de 65,20kN.m. O concreto utilizado nessa viga tem resistência de 30MPa e a agressividade ambiental do local é classe II (considere que é uma viga pouco solicitada). Das alternativas a seguir, assinale aquela que apresenta a área de aço da armadura comprimida dessa viga. A) 1,48cm2. B) 1,94cm2. C) 5,48cm2. D) 7,83cm2. E) 9,77cm2. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Construção Civil |
| Formas: Confecção e colocação O concreto deve estar curado e liberado para a remoção das formas segundo recomendações técnicas. Quando não se utiliza concreto especial ou aditivo acelerador de pega, para vigas de pequeno vão, qual é o prazo mínimo para a retirada das formas inferiores, com a manutenção das principais escoras? A) Cinco dias. B) Sete dias. C) Dez dias. D) Quatorze dias. E) Vinte e um dias. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em |
| Aglomerantes A respeito dos aglomerantes especiais, é correto afirmar: A) Cimentos oxicloretos também chamados de cimento sorel são materiais moles e poucos resistentes à abrasão. B) Furan, que é um aglomerante orgânico, é extremamente resistente a ácido nítrico concentrado. C) Cimentos fenólicos possuem resistência ao meio alcalino. D) Resina epóxi é um aglomerante orgânico classificado como aglomerante especial. E) Enxofre fundido é um aglomerante que não resiste satisfatoriamente a ácidos. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em JavaScript |
Analise o seguinte trecho de código JavaScriptvar a = new Array(); a[0] = 12; a[1] = false; a[2] = "texto"; a[3] = a; Qual destas instruções provocará um erro de execução? A) Linha 3 B) Linha 4 C) Linha 5 D) O código executa sem provocar erros Verificar Resposta Estudar Cards Todas as Questões |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
|
PHP - Programação Orientada a Objetos em PHP - Aprenda a criar e usar métodos e classes abstratas em PHP |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
