 |
|
Você está aqui: JavaScript ::: DOM (Document Object Model) ::: document Object |
Usando o método getElementsByName() do objeto document para retornar uma coleção de elementos HTML com o mesmo nome (atributo name)Quantidade de visualizações: 11819 vezes |
O método getElementsByName() do objeto document é usado quando precisamos obter uma lista (coleção NodeList ou matriz) de elementos HTML que possuem o mesmo valor para sua propriedade name. Veja:----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Estudos JavaScript</title>
<script type="text/javascript">
function localizarElementos(){
// vamos obter os elementos com o valor "linguagens"
// para sua propriedade name
var elems = document.getElementsByName("linguagens");
// encontramos algum elemento
if(elems.length > 0){
// vamos percorrer os elementos encontrados
for(var i = 0; i < elems.length; i++){
// vamos verificar se este radio button está selecionado
if(elems[i].checked){
window.alert("O " + (i + 1) +
"º radio button ESTÁ selecionado");
}
else{
window.alert("O " + (i + 1) +
"º radio button NÃO está selecionado");
}
}
}
else{
window.alert("Nenhum elemento localizado.");
}
}
</script>
</head>
<body>
<form name="form1">
<input name="linguagens" type="radio" value="1"
checked="checked" /> Java
<input name="linguagens" type="radio" value="1" /> Delphi
<input name="linguagens" type="radio" value="1" /> C#<br />
<input type="button" name="btn" onclick="localizarElementos()"
value="Verificar Radio Buttons" />
</form>
</body>
</html>
Neste exemplo nós temos três botões do tipo radio button, todos com o mesmo valor para seu atributo name. Quando clicamos no botão, este chama uma função personalizada que usa o método getElementsByName() do objeto document para obter os elementos como uma matriz. Note que é sempre uma boa idéia testar o tamanho da matriz retornada antes de efetuar qualquer procedimento. O método getElementsByName() funciona de forma diferente dependendo do browser: a) No Internet Explorer e Opera, o método pesquisa e retorna os elementos que possuem correspondência nos atributos id e name. b) No Firefox, Google Chrome e Safari, somente elementos com correspondência no atributo name são retornados. c) No Firefox, Opera, Google Chrome e Safari, o método é case-sensitive (sensível a maiúsculas e minúsculas) em relação ao valor da propriedade name (e id no Opera). d) No Internet Explorer (IE), o método não é case-sensitive (sensível a maiúsculas e minúsculas) em relação ao valor da propriedade name e id. |
 Link para compartilhar na Internet ou com seus amigos: |
JavaScript ::: Dicas & Truques ::: Operadores de Manipulação de Bits (Bitwise Operators) |
JavaScript Avançado - Como usar o operador de bits & (E/AND sobre bits) da linguagem JavaScriptQuantidade de visualizações: 1211 vezes |
|
O operador de bits & (E/AND sobre bits) da linguagem JavaScript é usado quando queremos comparar os bits individuais de dois valores integrais (inteiros) e produzir um terceiro resultado. Os bits no resultado serão configurados como 1 se os bits correspondentes nos dois outros valores foram 1. Em caso contrário os bits são configurados como 0. Para quem gosta de Lógica Matemática, ou a Tabela Verdade da Lógica de Boole, vai se lembrar do conectivo "^", que diz que a proposição resultante da conjunção só será verdadeira quando as proposições simples individuais forem verdadeiras. O operador de bits & do JavaScript é similar ao conectivo "^" da Lógica Proposicional. Vamos analisar os seguintes valores binários: a) 0101 (5 decimal) b) 0100 (4 decimal) Quando aplicamos o operador & nestes dois valores teremos o seguinte resultado: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- 0101 0100 ---- 0100 Veja que o resultado é 0100, uma vez que apenas o segundo bit de cada valor está configurado como 1. Vamos ver isso em JavaScript agora. Observe o seguinte trecho de código: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Manipulação de Bits em JavaScript</title>
</head>
<body>
<script type="text/javascript">
var a = 5;
var b = 4;
var c = a & b;
// exibe o resultado (em binário e em decimal)
document.writeln("a = " + obterBits(a) + " (" + a + ")");
document.writeln("<br>b = " + obterBits(b) + " (" + b + ")");
document.writeln("<br>a & b = " + obterBits(c) + " (" + c + ")");
// função auxiliar que converte um decimal em sua representação em bits
function obterBits(valor){
var mascara = 1 << 31; // 10000000 00000000 00000000 00000000
var buffer = ""; // um buffer para guardar os bits dos bytes
for(var i = 1; i <= 32; i++){
// compara os bits individuais dos dois valores inteiros
if((valor & mascara) == 0){
buffer = buffer + "0";
}
else{
buffer = buffer + "1";
}
valor = valor << 1; // desloca uma posição para a esquerda
// Cada troca à esquerda corresponde à multiplicação do
// valor por 2
if(i % 8 == 0){ // completou um byte?
buffer = buffer + " ";
}
}
return buffer;
}
</script>
</body>
</html>
Ao executar este código teremos o seguinte resultado: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
a = 00000000 00000000 00000000 00000101 (5)
b = 00000000 00000000 00000000 00000100 (4)
a & b = 00000000 00000000 00000000 00000100 (4)
|
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: 2183 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): ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<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: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<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. |
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: 7100 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<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. |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
Códigos Fonte |
 Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
 Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
Linguagens Mais Populares |
|
1º lugar: Java |
