 |
|
||||
Você está aqui: JavaScript ::: Dicas & Truques ::: Validação de Formulários |
Como validar um endereço de e-mail usando expressões regulares em JavaScriptQuantidade de visualizações: 28885 vezes |
|
Nesta dica eu mostro como é possível validar um endereço de e-mail em JavaScript usando expressões regulares. Não se assuste com o tamanho da expressão regular. Ela pode ser um pouco complexa mesmo, mas é a mais completa que você vai encontrar na internet, e consegue validar praticamente todos os tipos de endereço de e-mails que o usuário poderá informar. É claro que você não pode se descuidar da validação do lado do servidor, pois há situações nas quais o usuário consegue burlar a validação somente do lado do cliente, ou seja, do lado do navegador. Veja o código JavaScript completo para 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
----------------------------------------------------------------------
<html>
<head>
<title>Estudando JavaScript</title>
</head>
<body>
<form name="cadastro" onSubmit="return validar()">
Informe seu E-Mail:<br>
<input type="text" name="email">
<input type="submit" value="Enviar!">
</form>
<script language="JavaScript">
var valido;
function validar(){
var str = document.cadastro.email.value;
var filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if(filter.test(str)){
alert("Este endereço de e-mail é válido!");
valido = true;
}
else{
alert("Este endereço de e-mail não é válido!");
document.cadastro.email.focus();
valido = false;
}
return valido;
}
</script>
</body>
</html>
|
 Link para compartilhar na Internet ou com seus amigos: |
JavaScript ::: Dicas & Truques ::: Data e Hora |
Como subtrair dias de uma data em JavaScript - Data e horas em JavaScriptQuantidade de visualizações: 16682 vezes |
|
Em algumas situações, principalmente quando estamos desenvolvendo aplicações que envolvem datas, horas e calendários em JavaScript, nós precisamos subtrair dias de uma data. Nesta dica eu mostro como isso pode ser feito. Veja o código completo abaixo: ----------------------------------------------------------------------
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">
function subtrairDias(data, dias){
return new Date(data.getTime() -
(dias * 24 * 60 * 60 * 1000));
}
document.write('Hoje é: ' +
(new Date()).toLocaleDateString() + '<br>');
document.write('5 dias atrás era: ' +
subtrairDias(new Date(), 5).toLocaleDateString());
</script>
</body>
</html>
Ao executarmos este código nós teremos o seguinte resultado: Hoje é: 25/03/2021 5 dias atrás era: 20/03/2021 |
JavaScript ::: Dicas & Truques ::: Geometria, Trigonometria e Figuras Geométricas |
Como testar se um ponto está dentro de um círculo em JavaScript - Desenvolvimento de Games com JavaScriptQuantidade de visualizações: 1526 vezes |
|
Quando estamos trabalhando com computação gráfica, geometria e trigonometria ou desenvolvimento de jogos em JavaScript, é comum precisarmos verificar se um determinado ponto (uma coordenada x, y) está contido dentro de um círculo. Para melhor entendimento, veja a imagem a seguir:  Veja que temos um círculo com raio igual a 115 e com centro nas coordenadas (x = 205; y = 166). Temos também dois pontos. O ponto vermelho está nas coordenadas (x = 140; y = 90) e o ponto azul está nas coordenadas (x = 330; y = 500. Como podemos ver na imagem, o ponto vermelho está dentro do círculo, enquanto o ponto azul está fora. E nosso intenção nesta dica é escrever o código JavaScript que permite fazer essa verificação. Tenha em mente que está técnica é muito útil para o teste de colisões no desenvolvimento de games. Veja o código completo para 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>Desenvolvimento de Games usando HTML5 e JavaScript</title>
</head>
<body>
<script type="text/javascript">
// vamos declarar a classe Circulo
class Circulo{
constructor(xc, yc, raio){
this.xc = xc; // x do centro
this.yc = yc; // y do centro
this.raio = raio; // raio do círculo
}
}
// agora vamos declarar a classe Ponto
class Ponto{
constructor(x, y){
this.x = x; // coordenada x
this.y = y; // coordenada y
}
}
// vamos criar um objeto Circulo
var c = new Circulo(90, 50, 115);
// vamos criar um objeto Ponto
var p = new Ponto(140, 90);
// vamos verificar se o ponto está dentro do
// círculo
var dx = p.x - c.xc;
var dy = p.y - c.yc;
if((Math.pow(dx, 2) + Math.pow(dy, 2)) < Math.pow(c.raio, 2)){
document.writeln("O ponto está dentro do círculo");
}
else{
document.writeln("O ponto NÃO está dentro do círculo");
}
</script>
</body>
</html>
Ao executar este código nós teremos o seguinte resultado: O ponto está dentro do círculo. Experimente com círculos de raios e coordenadas centrais diferentes e também com pontos em várias coordenadas e veja como os resultados são interessantes. |
JavaScript ::: Dicas & Truques ::: Formatação de datas, strings e números |
Como exibir apenas dois dígitos após o ponto decimal em JavaScript usando a função toFixed() do objeto NumberQuantidade de visualizações: 12650 vezes |
|
Nesta dica mostrarei como podemos usar a função toFixed() do objeto Number da linguagem JavaScript para convertermos um valor de ponto flutuante em uma string (em texto). Durante a conversão nós vamos especificar que queremos apenas dois dígitos depois do ponto decimal. Veja o código JavaScript completo para 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>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Estudos JavaScript</title>
</head>
<body>
<script type="text/javascript">
// vamos obter o valor de
// PI 3.141592653589793
var valor = Math.PI;
document.write("PI: " + valor);
// agora vamos converter o valor de PI para
// string e arredondar para o número de
// decimais desejados
var res = valor.toFixed(2);
document.write("<br>Resultado: " + res);
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: PI: 3.141592653589793 Resultado: 3.14 |
JavaScript ::: Dicas & Truques ::: Data e Hora |
Como formatar datas em JavaScript de acordo com as configurações do computador do usuário usando a função toLocaleDateString()Quantidade de visualizações: 7412 vezes |
|
Nesta dica mostrarei como podemos usar a função toLocaleDateString() do objeto Date do JavaScript para formatar e exibir a data atual (ou uma data construída) usando as configurações regionais do computador do usuário. Veja a página HTML completa para 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>Datas em JavaScript</title>
</head>
<body>
<script type="text/javascript">
// vamos obter a data atual
var data = new Date();
// formatamos a data
var data_formatada = data.toLocaleDateString();
// e mostramos o resultado
document.write("Hoje é: " + data_formatada);
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: Hoje é: 04/02/2022 |
JavaScript ::: Dicas & Truques ::: Matemática e Estatística |
Como calcular juros simples e montante usando JavaScriptQuantidade de visualizações: 16726 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 ::: Arrays e Matrix (Vetores e Matrizes) |
Como ordenar um array de strings em ordem alfabética em JavaScript - Vetores e matrizes em JavaScriptQuantidade de visualizações: 19458 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: ----------------------------------------------------------------------
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">
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 |
JavaScript ::: Web APIs (APIs Web) ::: MediaDevices Interface (Interface MediaDevices) |
HTML5 + JavaScript - Como usar a interface MediaDevices em seus códigos JavaScriptQuantidade de visualizações: 1625 vezes |
|
A interface MediaDevices é um daqueles objetos que vemos com frequencia em códigos JavaScript e não entendemos muito bem o seu funcionamento. Nesta dica vou decifrá-la. O objetivo da interface MediaDevices é fornecer acesso aos dispositivos de entrada de mídia conectadas e às quais o navegador tem acesso, a saber, câmeras, microfone e compartilhamento de tela. É por meio dessa interface que acessamos tais dispositivos. A interface MediaDevices está disponível como um objeto do objeto navigator. Veja como testar sua existência e suporte no seu navegador web: ----------------------------------------------------------------------
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>A interface MediaDevices</title>
</head>
<body>
<script type="text/javascript">
// o browser suporta o MediaDevices?
if(navigator.mediaDevices){
window.alert("O navegador suporta o MediaDevices");
}
else{
window.alert("O navegador não suporta o MediaDevices");
}
</script>
</body>
</html>
Note que mediaDevices é um objeto Singleton do objeto navigator, ou seja, só há uma instância desse objeto disponível no contexto de execução de códigos no navegador. Há também a preocupação em relação à segurança. Alguns navegador podem restringir o acesso a este objeto se você não estiver em um ambiente HTTPS ou localhost. |
JavaScript ::: Dicas & Truques ::: Trigonometria - Funções Trigonométricas |
Como calcular o cateto oposto dadas as medidas da hipotenusa e do cateto adjascente em JavaScriptQuantidade de visualizações: 1454 vezes |
|
Todos estamos acostumados com o Teorema de Pitágoras, que diz que "o quadrado da hipotenusa é igual à soma dos quadrados dos catetos". Baseado nessa informação, fica fácil retornar a medida do cateto oposto quando temos as medidas da hipotenusa e do cateto adjascente. Isso, claro, via programação em linguagem JavaScript. Comece observando a imagem a seguir:  Veja que, nessa imagem, eu já coloquei os comprimentos da hipotenusa, do cateto oposto e do cateto adjascente. Para facilitar a conferência dos cálculos, eu coloquei também os ângulos theta (que alguns livros chamam de alfa) e beta já devidamente calculados. A medida da hipotenusa é, sem arredondamentos, 36.056 metros. Então, sabendo que o quadrado da hipotenusa é igual à soma dos quadrados dos catetos (Teorema de Pitógoras): \[c^2 = a^2 + b^2\] Tudo que temos que fazer é mudar a fórmula para: \[a^2 = c^2 - b^2\] Veja que agora o quadrado do cateto oposto é igual ao quadrado da hipotenusa menos o quadrado do cateto adjascente. Não se esqueça de que a hipotenusa é o maior lado do triângulo retângulo. Veja agora como esse cálculo é feito em linguagem JavaScript: ----------------------------------------------------------------------
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">
var c = 36.056; // medida da hipotenusa
var b = 30; // medida do cateto adjascente
// agora vamos calcular o comprimento da cateto oposto
var a = Math.sqrt(Math.pow(c, 2) - Math.pow(b, 2));
// e mostramos o resultado
document.writeln("A medida do cateto oposto é: " + a);
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: A medida do cateto oposto é: 20.00087838071118 Como podemos ver, o resultado retornado com o código JavaScript confere com os valores da imagem apresentada. |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
