E-Book 650 Dicas e Truques de Python - PDF com 1.200 páginas
Você está aqui: JavaScript ::: Dicas & Truques ::: Strings e Caracteres

Como inverter a ordem dos caracteres das palavras de uma string em JavaScript usando as funções map(), split(), reverse() e join()

Quantidade de visualizações: 402 vezes
O código que mostrarei nessa dica é muito interessante e abre a possibilidade para a criação de algorítmos muito úteis. Trata-se de inverter a ordem dos caracteres das palavras de uma frase ou texto. Para isso faremos uso das funções map(), split(), reverse() e join() do JavaScript.

Veja a página HTML completa para o exemplo:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<!doctype html>
<html>
<head>
  <title>Strings em JavaScript</title>
</head>
<body>

<script type="text/javascript">
  // vamos criar uma string
  var frase = "GOSTO MUITO DE JAVA";
  document.write("A frase é: " + frase + "<br>");
  
  // agora vamos inverter os caracteres de cada
  // uma das palavras na frase
  var frase = frase.split(" ").map(palavra => 
    palavra.split("").reverse().join("")).join(" ");
	
  // e mostramos o resultado
  document.write("Com palavras invertidas: " + frase);  
</script>
  
</body>
</html>

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

A frase é: GOSTO MUITO DE JAVA
Com palavras invertidas: OTSOG OTIUM ED AVAJ

Link para compartilhar na Internet ou com seus amigos:

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

Como remover o primeiro elemento de um array em JavaScript - Como usar a função shift() do objeto Array do JavaScript

Quantidade de visualizações: 8380 vezes
Neste dica mostrarei como usar o método shift() do objeto Array da linguagem JavaScript para remover e retornar o primeiro elemento de um vetor. A ação de remover o primeiro elemento, ou seja, o elemento do topo do vetor é muito usada na construção da estrutura de dados pilha.

Veja o código completo, incluindo a página HTML que permite executar o exemplo:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<html>
<head>
  <meta charset="utf-8">
  <title>Estudos JavaScript</title>
</head>
<body>

<script language="javascript">
  // vamos declarar e instanciar um vetor com 5 elementos
  var valores = new Array(1, 2, 3, 4, 5);
  document.write("Valores no vetor: " + valores + "<br>");
  
  // vamos remover o primeiro elemento
  var primeiro = valores.shift();
  document.write("Removendo o primeiro elemento: " +
     primeiro + "<br>");
  document.write("Valores no vetor: " + valores);
</script>

</body>
</html>

Ao abrir esta página HTML nós teremos o seguinte resultado:

Valores no vetor: 1,2,3,4,5
Removendo o primeiro elemento: 1
Valores no vetor: 2,3,4,5


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

Validação de formulários em JavaScript - Como validar um formulário contendo usuário e senha em JavaScript

Quantidade de visualizações: 33717 vezes
A validação de formulários em JavaScript é uma das primeiras técnicas que devemos aprender, pois ela avita a perda de tempo que ocorre com a validação somente do lado do servidor (não se esqueça: as duas são necessárias).

Ao validar no navegador, o usuário já vai as devidas correções sem ter que esperar o processamento de seus dados para, só então, ser comunicado de que alguma informação está incorreta.

Assim, nesta dica, mostrarei como podemos validar um nome de usuário e senha em JavaScript. Deixei o exemplo bem mais, mas você pode melhorá-lo, adicionando até expressões regulares para ampliar as situações que podem ocorrer.

O código abaixo vai gerar o seguinte formulário HTML:



E agora o código completo para o exemplo:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

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

<style type="text/css">
  input {margin-bottom: 3px; margin-top: 3px}
</style>

<script language="JavaScript">
  function validar(){
    // só permitirá o envio se os dados forem fornecidos
    if(document.login.nome.value == ""){
      alert("Forneça o nome do usuário");
      document.login.nome.focus();
      return false;
    }
    else if(document.login.senha.value == ""){
      alert("Forneça a senha do usuário");
      document.login.senha.focus();
      return false;
    }
    else{
      return true;
    }
  }
</script>

</head>
<body>

<form name="login" action="gravar.php" method="post" 
     onsubmit="return validar()">
  Usuário:<br>
  <input type="text" id="nome" name="nome"><br>
  Senha:<br>
  <input type="password" id="senha" name="senha"><br>
  <input type="submit" value="Entrar!">
</form>
 
</body>
</html>



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

Como retornar apenas os três primeiros elementos de um array em JavaScript usando a função slice() do objeto Array

Quantidade de visualizações: 8559 vezes
Nesta dica eu mostrarei como é possível usar o método slice() do objeto Array da linguagem JavaScript para retornar um ou mais elementos de um vetor, como um novo objeto array.

Para isso só precisamos fornecer ao método o índice inicial e o índice final (não incluindo) dos elementos a serem retornados. É importante observar que o método slice() não modifica o vetor original.

Veja o exemplo completo:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<html>
<head>
<title>Estudando JavaScript</title>
</head>
<body>
 
<script type="text/javascript">
  var valores = new Array(1, 2, 3, 4, 5, 6, 7);
  document.write("Valores no vetor: " + valores + "<br>");
  document.write("Retornando os três primeiros elementos<br>");
  var valores2 = valores.slice(0, 3);
  document.write("Valores no novo vetor: " + valores2);
</script>
 
</body>
</html>

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

Valores no vetor: 1,2,3,4,5,6,7
Retornando os três primeiros elementos
Valores no novo vetor: 1,2,3


JavaScript ::: Dicas & Truques ::: Set (Conjunto)

Como retornar elementos presentes no primeiro vetor e não presentes no segundo vetor em JavaScript usando o objeto Set

Quantidade de visualizações: 1268 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

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

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

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


Desafios, Exercícios e Algoritmos Resolvidos de JavaScript

Veja mais Dicas e truques de JavaScript

Dicas e truques de outras linguagens

Quem Somos

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

Goiânia-GO
Programador Freelancer - 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 Civil 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 20 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
Programador Freelancer
WhatsApp +55 (062) 98243-1195

Goiânia-GO
Programador Freelancer - 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: Python
3º lugar: C#
4º lugar: PHP
5º lugar: Delphi
6º lugar: C
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby

Códigos Fonte

Programa de Gestão Financeira Controle de Contas a Pagar e a Receber com Cadastro de Clientes e FornecedoresSoftware de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimento
Diga 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 funcionalidadesControle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidades
Tenha 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


© 2024 Arquivo de Códigos - Todos os direitos reservados
Neste momento há 62 usuários muito felizes estudando em nosso site.