 |
|
||||
Você está aqui: JavaScript ::: Dicas & Truques ::: Cookies |
Cookies em JavaScript - Como excluir um cookie usando JavaScriptQuantidade de visualizações: 2 vezes |
|
Nesta dica mostrarei como podemos escrever uma função JavaScript excluirCookie() que recebe o nome do cookie e o remove do navegador. Em alguns browsers pode ser necessário reiniciar para que o cookie seja realmente excluído. Note que coloquei também uma função obterCookie() que permite verificar se o cookie foi realmente excluído. Veja o código JavaScript completo, incluindo o código HTML da página de teste: ----------------------------------------------------------------------
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>
<script type="text/javascript">
// função que permite excluir um cookie. Pode
// ser necessário reiniciar o navegador
function excluirCookie(nome){
var exdate = new Date();
exdate.setTime(exdate.getTime() + (-1 * 24 * 3600
* 1000));
document.cookie = nome + "=" + escape("")+ ((-1
== null) ? "" : "; expires=" + exdate);
}
// função que permite obter um cookie
function obterCookie(nome){
if(document.cookie.length > 0){
c_start = document.cookie.indexOf(nome + "=");
if(c_start != -1){
c_start = c_start + nome.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if(c_end == -1){
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(
c_start, c_end));
}
}
return null;
}
</script>
</head>
<body>
<script type="text/javascript">
// vamos excluir o cookie
excluirCookie('nome_visitante');
// verifica se o cookie "nome_visitante" existe
// e obtém seu valor
var nome_visitante = obterCookie('nome_visitante');
if(nome_visitante != null){
document.writeln("O cookie nome_visitante existe. " +
"Seu valor é: " + nome_visitante);
}
else{
document.writeln("O cookie nome_visitante não existe");
}
</script>
</body>
</html>
Ao executar este código, sabendo que o cookie "nome_visitante" existia anteriormente, nós teremos o seguinte resultado: O cookie nome_visitante não existe |
 Link para compartilhar na Internet ou com seus amigos: |
JavaScript ::: Dicas & Truques ::: Strings e Caracteres |
Como remover os espaços no final de uma string em JavaScript usando uma função trim_final() personalizadaQuantidade de visualizações: 101 vezes |
|
Há muitos anos eu precisava remover espaços no final de uma string em JavaScript e percebi que o objeto String, na época, não oferecia a função trim(). Não me restou opção a não ser sentar e escrever o código na mão mesmo. Hoje em dia não precisamos mais dele, mas fica aí para que você entenda a lógica empregada na resolução do problema. Veja a página HTML completa com 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">
// função personalizada que remove os espaços
// no final de uma string
function trim_final(string){
// primeiro definimos o código do espaço
var espaco = String.fromCharCode(32);
// obtemos o tamanho da string
var tamanho = string.length;
// e criamos uma string temporária
var temp = "";
// a string está vazia?
if(tamanho < 0){
return "";
}
// uma variável temporária para percorrermos
// a string de trás para frente
var temp2 = tamanho - 1;
while(temp2 > -1){
if(string.charAt(temp2) == espaco){
// não faz nada
}
else{
temp = string.substring(0, temp2 + 1);
break;
}
// decrementamos a variável temp2
temp2--;
}
return temp;
}
// vamos testar a função trim_final()
var frase = "Gosto muito de JavaScript ";
document.write("Com espaços no final: " +
frase + "#" + "<br>");
// vamos remover os espaços no final da string
frase = trim_final(frase);
document.write("Sem espaços no final: " +
frase + "#" + "<br>");
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: Com espaços no final: Gosto muito de JavaScript # Sem espaços no final: Gosto muito de JavaScript# |
JavaScript ::: Dicas & Truques ::: Data e Hora |
Como calcular a quantidade de dias restantes para uma determinada data em JavaScriptQuantidade de visualizações: 9040 vezes |
|
Em algumas situações nós precisamos calcular quantos dias faltam para uma determinada data em JavaScript. Por exemplo, você gostaria de saber quantos dias ainda falta para o Natal, ou para o seu aniversá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>Data e hora em JavaScript</title>
</head>
<body>
<script type="text/javascript">
// vamos obter a data de hoje
var hoje = new Date();
// vamos construir a data do Natal
var data_natal = new Date(hoje.getFullYear(), 11, 25);
// quantidade de milisegundos em um dia
var dia = 1000 * 60 * 60 * 24;
// calculamos os dias restantes para a data escolhida
var restantes = Math.ceil((data_natal.getTime() -
hoje.getTime()) / dia);
// e mostramos o resultado
document.write("Hoje é: " + hoje.toLocaleDateString() + "<br>");
document.write("Faltam " + restantes + " dias para o natal.");
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: Hoje é: 06/02/2023 Faltam 322 dias para o natal. |
JavaScript ::: Dicas & Truques ::: Strings e Caracteres |
Como adicionar zeros (ou outro caractere) no início de uma string usando o método padStart() da linguagem JavaScriptQuantidade de visualizações: 2907 vezes |
|
Como adicionar zeros (ou outro caractere) no início de uma string usando o método padStart() da linguagem JavaScript O método padStart(), adicionado ao objeto String no ES2017 (ECMAScript 8) é usado quando queremos preencher o início de uma string com zeros ou qualquer outro caractere até alcançarmos um comprimento determinado. Veja, por exemplo, como adicionar zeros na frente de uma string para alcançar o tamanho de cinco caracteres: ----------------------------------------------------------------------
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 valor = 17;
// vamos mostrar o valor com o tamanho de cinco caracteres
document.write("O valor é: " + valor.toString().padStart(5, "0"));
</script>
Ao executar o exemplo você verá o valor "00017" ser exibido. Porém, como o método padStart() foi adicionado no ES2017, pode ser que você encontre navegadores que ainda não o suportem. Assim, é sempre uma idéia testar a sua existência. 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">
if(String.prototype.padStart){
window.alert("Seu browser já suporta a função padStart().");
}
else{
window.alert("Seu browser NÃO suporta a função padStart().");
}
</script>
Se o navegador não oferecer suporte a este método, você poderá usar um Polyfill, de terceiros ou uma solução que você mesmo poderá desenvolver. |
JavaScript ::: Dicas & Truques ::: Data e Hora |
Como usar o objeto Date em JavaScript - Curso de JavaScript para iniciantesQuantidade de visualizações: 7359 vezes |
O objeto Date é um tipo de dados embutido na linguagem JavaScript. Objetos Date são criados, em sua forma mais simples (construtor sem argumentos), da seguinte forma:----------------------------------------------------------------------
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 objeto Date
var hoje = new Date();
// vamos exibir a representação deste objeto Date
document.write("Data e hora atual: " + hoje);
</script>
</body>
</html>
Ao executarmos este código teremos um resultado parecido com: Data e hora atual: Fri Mar 18 10:02:02 UTC-0300 2011 Note que a representação textual de um objeto Date é a data atual no formato curto (em inglês), as horas e a diferença em relação ao horário UTC (Universal Time Coordinated, sucessor do GMT - Greenwich Mean Time). Uma vez criado um objeto Date, podemos usar vários de seus métodos para operar sobre seus valores de datas e horas. A maioria dos métodos serve simplesmente para obter ou definir os valores dos campos ano, mês, dia, horas, minutos, segundos e milisegundos, usando a hora local ou UTC. O método toString() e suas variantes nos permitem converter datas e horas para os formatos comumente exibidos aos usuários. Veja um 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
----------------------------------------------------------------------
<script type="text/javascript">
// vamos criar um novo objeto Date
var hoje = new Date();
// vamos exibir a representação deste objeto Date
document.write("Data e hora atual: " + hoje.toLocaleString());
</script>
Ao executarmos este código teremos um resultado parecido com: Data e hora atual: sexta-feira, 18 de março de 2011 15:44:07 Aqui nós usamos o método toLocaleString() do objeto Date para exibir a data e hora de acordo com as configurações regionais do computador local. Os métodos getTime() e setTime() obtém ou definem a representação interna do objeto Date como o número de milisegundos decorridos desde a meia-noite do dia 1º de janeiro de 1970 (GMT). Neste formato padrão de milisegundos, a data e hora são representadas por um único inteiro, o que facilita os cálculos envolvendo datas e horas. O padrão ECMAScript exige que o objeto Date seja capaz de representar qualquer data e hora, na precisão de milisegundos, na faixa de 100 milhões de anos antes ou depois de 01/01/1970. |
JavaScript ::: Dicas & Truques ::: Set (Conjunto) |
Como converter um Set em um Array JavaScript usando a função Array.from()Quantidade de visualizações: 1131 vezes |
|
Em algumas situações nós gostaríamos de tratar um objeto Set da linguagem JavaScript como se ele fosse um Array, ou seja, um vetor (matriz de apenas uma linha e várias colunas). Para estes casos nós podemos usar o método Array.from(), adicionado à linguagem JavaScript na revisão ECMAScript 2015 (ES6 ou ECMAScript 6). Este método recebe vários objetos, entre eles Map e Set, e retorna um array. Assim, veja um trecho de código no qual criamos um Set com três elementos, usamos o método Array.from() para obter um Array a partir dele e, em seguida, percorremos e exibimos os elementos do array. Eis 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>O objeto Set do JavaScript</title>
</head>
<body>
<script type="text/javascript">
// vamos criar um novo conjunto contendo
// 3 linguagens de programação
var linguagens = new Set(["Java", "PHP", "Delphi"]);
// agora vamos converter este Set em um Array
var vetor = Array.from(linguagens);
// vamos percorrer os elementos do vetor
for(var i = 0; i < vetor.length; i++){
document.writeln(vetor[i] + "<br>");
}
</script>
</body>
</html>
Ao executar este código nós teremos o seguinte resultado: Java PHP Delphi |
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 ::: Validação de Formulários |
Validação de formulários em JavaScript - Como validar CPF (com pontos e hífen) usando expressões regularesQuantidade de visualizações: 44261 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: ----------------------------------------------------------------------
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>
<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 ::: 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. |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
