Você está aqui: 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 JavaScript

Quantidade de visualizações: 101 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:

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:

<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:

    a = 00000000 00000000 00000000 00000101 (5) 
    b = 00000000 00000000 00000000 00000100 (4)
a & b = 00000000 00000000 00000000 00000100 (4)



JavaScript ::: Dicas & Truques ::: Matemática e Estatística

JavaScript para matemática - Como obter o maior entre dois ou mais valores numéricos usando a função max() do JavaScript

Quantidade de visualizações: 8419 vezes
A função max() do objeto Math da linguagem JavaScript pode ser usada quando temos dois ou mais valores numéricos e gostaríamos de retornar o maior deles. Note que esta função não aceita um vetor (array) como argumento, ou seja, os valores devem ser fornecidos de forma literal ou passados como variáveis independentes.

Veja o código JavaScript completo para o exemplo:

<html>
<head>
<title>Estudando JavaScript</title>
</head>
<body>

<script type="text/javascript">
  var n1 = 45;
  var n2 = 18;
  var maior = Math.max(n1, n2);
  document.write("O maior número é " + maior);
</script>
 
</body>
</html>

Ao executar este código nós teremos o seguinte resultado:

O maior número é 43

O retorno do método max() é um objeto Number representando o maior dos valores fornecidos. Se nenhum argumento for informado, o retorno será um objeto Infinity, enquanto um objeto NaN será retornado se algum dos valores fornecidos não for um valor numérico válido.


JavaScript ::: Dicas & Truques ::: Validação de Formulários

Validação de formulários em JavaScript - Como validar CPF (com pontos e hífen) usando expressões regulares

Quantidade de visualizações: 39635 vezes
Nesta dica mostrarei como podemos escrever uma função JavaScript para a validação de números de CPF, dessa vez usando pontos e o hífen. Isso é interessante porque, muitas vezes, o usuário copia seu CPF de outro lugar e cola nas caixas de texto de nossas aplicações.

A pagina HTML que contém o formulário se parece com a imagem abaixo:



E agora veja o código JavaScript completo para o exemplo, incluindo o código HTML para a página:

<html>
<head>
<title>Estudando JavaScript</title>

<style type="text/css">
  input {margin-bottom: 3px; margin-top: 3px}
</style>
 
<script type="text/javascript">
 function validarCPF(){
   var cpf = document.cadastro.cpf.value;
   var filtro = /^\d{3}.\d{3}.\d{3}-\d{2}$/i;
   if(!filtro.test(cpf)){
     window.alert("CPF inválido. Tente novamente.");
     return false;
   }
    
   cpf = remove(cpf, ".");
   cpf = remove(cpf, "-");
     
   if(cpf.length != 11 || cpf == "00000000000" || 
      cpf == "11111111111" ||
      cpf == "22222222222" || cpf == "33333333333" || 
      cpf == "44444444444" ||
      cpf == "55555555555" || cpf == "66666666666" || 
      cpf == "77777777777" ||
      cpf == "88888888888" || cpf == "99999999999"){
      window.alert("CPF inválido. Tente novamente.");
      return false;
   }
 
   soma = 0;
   for(i = 0; i < 9; i++){
     soma += parseInt(cpf.charAt(i)) * (10 - i);
   }   

   resto = 11 - (soma % 11);
   
   if(resto == 10 || resto == 11){
     resto = 0;
   }
   
   if(resto != parseInt(cpf.charAt(9))){
     window.alert("CPF inválido. Tente novamente.");
     return false;
   }

   soma = 0;
   for(i = 0; i < 10; i ++){
     soma += parseInt(cpf.charAt(i)) * (11 - i);
   }   

   resto = 11 - (soma % 11);
   if(resto == 10 || resto == 11){
     resto = 0;
   }

   if(resto != parseInt(cpf.charAt(10))){
     window.alert("CPF inválido. Tente novamente.");
     return false;
   }

   window.alert("CPF válido. Muito obrigado."); 
   return true;
 }
  
 function remove(str, sub) {
   i = str.indexOf(sub);
   r = "";
   if (i == -1) return str;
   r += str.substring(0,i) + remove(str.substring(i + sub.length), sub);
   return r;
 }
</script>
 
</head>
<body>
 
<form name="cadastro" onSubmit="return validarCPF()">
  Informe seu CPF (use os pontos e o hífen):<br>
  <input type="text" maxlength="14" name="cpf">
  <input type="submit" value="Enviar!">
</form>
 
</body>
</html>



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 JavaScript

Quantidade de visualizações: 466 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.


JavaScript ::: Dicas & Truques ::: Mouse e Teclado

Como bloquear o botão direito do mouse em suas páginas HTML usando JavaScript

Quantidade de visualizações: 19494 vezes
Em algumas situações, principalmente games desenvolvidos em JavaScript ou HTML5, nós gostaríamos de evitar o botão direito do mouse, ou seja, o menu de contexto no corpo da página web.

Para isso só precisamos retornar false para o evento oncontextmenu. Veja como isso pode ser feito no trecho de código JavaScript abaixo:

<html>
<head>
  <title>Estudos JavaScript</title>
</head>
 
<body oncontextmenu="return false">

<h1>Você não pode usar o botão direito nessa página</h1>

</body>
</html>

Uma boa idéia é avisar ao usuário (por meio de uma mensagem window.alert) que ele não pode usar o botão de contexto no documento HTML. Veja:

<html>
<head>
  <title>Estudos JavaScript</title>
</head>
 
<body oncontextmenu="return aviso()">

<script type="text/javascript">
  function aviso(){
    window.alert("Botão direito não permitido.");
    return false;
  }
</script>

</body>
</html>

Agora, ao clicarmos com o botão direito do mouse na página, uma mensagem window.alert será exibida com o seguinte texto:

Botão direito não permitido.


JavaScript ::: Dicas & Truques ::: Arrays e Matrix (Vetores e Matrizes)

Vetores e matrizes em JavaScript - Como ordenar um array de strings em ordem alfabética em JavaScript

Quantidade de visualizações: 16457 vezes
Nesta dica mostrarei como podemos usar a função sort() do objeto Array da linguagem JavaScript para classificar em ordem alfabética crescente, um vetor (array) de strings, ou seja, um vetor contendo palavras, frases ou texto.

Veja o código completo para o exemplo:

<html>
<head>
<title>Estudando JavaScript</title>
</head>
<body>
 
<script type="text/javascript">
  var nomes = new Array();
  nomes[0] = "Fernanda";
  nomes[1] = "Amanda";
  nomes[2] = "Márcia";
  nomes[3] = "Carolina";
 
  document.write("Valores no vetor: " + nomes + "<br>");
  document.write("Ordenando o vetor agora<br>");
  nomes.sort();
  document.write("Valores no vetor: " + nomes);
</script>
 
</body>
</html>

Ao executar este código nós teremos o seguinte resultado:

Valores no vetor: Fernanda,Amanda,Márcia,Carolina
Ordenando o vetor agora
Valores no vetor: Amanda,Carolina,Fernanda,Márcia


Veja mais Dicas e truques de JavaScript

Dicas e truques de outras linguagens

Quem Somos

Osmar J. Silva
WhatsApp +55 (062) 98553-6711

Goiânia-GO
Full Stack Developer, Professional Java Developer, PHP, C/C++, Python Programmer, wxWidgets Professional C++ Programmer, Freelance Programmer. Formado em Ciência da Computação pela UNIP (Universidade Paulista Campus Goiânia) e cursando Engenharia Elétrica pela PUC-Goiás. Possuo conhecimentos avançados de Java, Python, JavaScript, C, C++, PHP, C#, VB.NET, Delphi, Android, Perl, e várias tecnologias que envolvem o desenvolvimento web, desktop, front-end e back-end. Atuo há mais de 15 anos como programador freelancer, atendendo clientes no Brasil, Portugal, Argentina e vários outros paises.
Entre em contato comigo para, juntos, vermos em que posso contribuir para resolver ou agilizar o desenvolvimento de seus códigos.
José de Angelis
WhatsApp +55 (062) 98243-1195

Goiânia-GO
Formado em Sistemas de Informação pela Faculdade Delta, Pós graduado em Engenharia de Software (PUC MINAS), Pós graduado Marketing Digital (IGTI) com ênfase em Growth Hacking. Mais de 15 anos de experiência em programação Web. Marketing Digital focado em desempenho, desenvolvimento de estratégia competitiva, analise de concorrência, SEO, webvitals, e Adwords, Métricas de retorno. Especialista Google Certificado desde 2011 Possui domínio nas linguagens PHP, C#, JavaScript, MySQL e frameworks Laravel, jQuery, flutter. Atualmente aluno de mestrado em Ciência da Computação (UFG)
Não basta ter um site. É necessário ter um site que é localizado e converte usuários em clientes. Se sua página não faz isso, Fale comigo e vamos fazer uma analise e conseguir resultados mais satisfatórios..

Linguagens Mais Populares

1º lugar: Java
2º lugar: C#
3º lugar: PHP
4º lugar: Delphi
5º lugar: Python
6º lugar: JavaScript
7º lugar: C
8º lugar: C++
9º lugar: VB.NET
10º lugar: JSP (Java Server Pages)



© 2021 Arquivo de Códigos - Todos os direitos reservados | Versión en Español | Versão em Português