#9 - Cronômetro em JavaScript

Esse projeto consiste em um cronômetro feito com javascript. Nele, o usuário tem a possibilidade de iniciar, pausar, retomar e zerar o dispositivo.

A primeira vista, o funcionamento básico do cronômetro se daria através dos seguintes passos:

• -> Usuário inicia o cronômetro.
• -> O valor de uma variável chamada valCrono é incrementado a cada cem milissegundos através da função setInterval().
• -> O valor da variável valCrono e tratado, calculando-se quantas horas, minutos, segundos e centésimos ela possui.
• -> O Cronômetro exibido na tela para o usuário é atualizado com os valores calculados anteriormente.

Na teoria, tudo certo, porém um comportamento peculiar do javascript fez com que o cronômetro não funcionasse de forma correta seguindo a lógica acima. Esse comportamento faz com que quando a a página não está sendo visualizada (seja pela janela estar minimizada ou por outra aba estar selecionada) a função setInterval() trabalhe num ritmo bem mais lento, isso, quando o intervalo de tempo em que a função deve ser chamada é inferior a mil milissegundos (nesse caso, ele era de cem milissegundos).

Mudar o intervalo de tempo de chamamento da função para mil milissegundos resolveria esse problema, mas criaria outro, pois dessa forma não seria possível calcular os centésimos transcorridos.

Por fim, o problema foi resolvido mudando-se a lógica básica do script para a que se observa abaixo:

• -> Usuário inicia o cronômetro.
• -> O valor de uma variável chamada tmpIni é definido através da função new Date(). Com isso, essa variável passa a armazenar uma data e uma hora, no caso, a data e a hora do sistema operacional no exato momento em que o cronômetro foi iniciado.
• -> O valor de uma variável chamada tmpAtual é definido também com a função new Date() e atualizado a cada *cem milissegundos através da função setInterval().
• -> O valor da variável valCrono recebe a subtração entre as variáveis tmpAtual e tmpIni.
• valCrono = tmpAtual - tmpIni; // Essa subtração sempre retornará o total de milissegundos que se passou entre a data/hora armazenada na variável tmpAtual e a data/hora armazenada tmpIni.
• -> O valor da variável valCrono e tratado, calculando-se quantas horas, minutos, segundos e centésimos ela possui.
• -> O Cronômetro exibido na tela para o usuário é atualizado com os valores calculados anteriormente.

*A função setInterval() segue trabalhando em ritmo mais lento quando a página não está selecionada, porém, como o script não se baseia mais em simplesmente incrementar o valor de uma variável a cada cem milissegundos, isso já não é mais um problema. Sempre que a página voltar a ser visualizada a data e a hora do sistema operacional serão colhidos e os cálculos necessários serão feitos baseados neles.

Claro que existem outras peculiaridades no funcionamento do script, mas isso eu deixarei para quem tiver curiosidade de olhar para ele descobrir.

Download Link

This is the end.

#8 - Programa para Memorizar o Hiragana e o Katakana 2.0

Essa é a versão 2.0 do aplicativo que eu desenvolvi para memorizar os dois sistemas de escrita mais básicos da língua japonesa. Em relação a versão anterior se observam duas mudanças significativas:

• Na versão 1.0, sempre que uma nova coluna de letras era selecionada ou desselecionada, uma nova carta era sorteada automaticamente. Isso não acontece mais, não se tratava de um bug. Fiz a mudança apenas por achar que é mais elegante dessa forma.
• Agora o usuário pode escolher dois modos de seleção de colunas. Um onde apenas uma coluna pode ser selecionada por vez, e outro onde pode-se selecionar várias colunas. Com isso, quando se está estudando várias colunas diferentes e na sequencia se quer estudar uma nova individualmente, não é mais preciso desmarcar as colunas que já estavam selecionadas.

Post da versão 1.0

Download Link

またね！

#07 - Um jogo da forca feito com JavaScript

Esse projeto é a resolução de um desafio proposto na aula 49 do curso de javascript do canal do youtube cfb cursos. Mais um que entra para lista do "teria sido mais simples, se eu não fosse tão surtado perfeccionista". Mas tudo bem, afinal não existem muitas coisas melhores para se fazer além de digitar e ler código. Em compensação, existem muitas coisa piores.

Download Link

Por hoje é só.

#6 - Gerador de Cores em JavaScript

No sistema RGB as cores são formadas a partir da combinação de três cores base, são elas R (vermelho), G (verde) e B (azul). Cada uma dessas cores pode receber valores que vão de 0 até 255, quanto maior o valor, maior é a intensidade da cor. Para se obter a cor vermelho, por exemplo, devemos escrever rgb(255,0,0). Aqui o valor referente ao vermelho está no máximo e os valores referentes a verde e azul estão zerados. Podemos obter variações desse vermelho aumentando um pouco a intensidade das outras cores e/ou diminuindo a intensidade do vermelho, e é isso que essa aplicação se propõe a fazer.

Para uma explicação mais detalhada sobre como funciona o sistema RGB, recomendo esse vídeo do canal CFB Cursos no youtube.

Nessa aplicação, o usuário escolhe uma cor através da TAG . Após isso, o script cria variações dessa cor, hora mudando a intensidade de apenas uma cor base, hora mudando a intensidade de duas cores base, e por fim mudando a intensidade das três cores base. Também existe uma área onde o usuário pode fazer alguns testes, mudando as cores e a opacidade do background de alguns elementos.

Foi particularmente difícil para mim bolar uma lógica onde em um momento apenas uma cor base variasse, e em outro duas e em outro as três. Mas no fim a persistência venceu a frustração.

Download Link

E assim esse post colorido chega ao fim, adíos!

#5 - Gerador de Números Aleatórios em JavaScript

Em JavaScript, números aleatórios são gerados através da função Math.random(), nesse post faremos algumas observações e demonstrações acerca da mesma, para um maior entendimento peço que o leitor sempre copie e teste o código gerado abaixo.

Para começar nossos trabalhos, atribuiremos o número aleatório gerado pela função a uma variável e em seguida a mostraremos no console.

var numeroAleatorio = Math.random();
console.log(numeroAleatorio);

A função Math.random() sempre retorna um número entre 0 e 0.999999999999... (que na prática é 1). O que resulta em muitas casas decimais, e pouca praticidade. Podemos melhorar as coisas utilizando a a função Math.round() que arredonda o número passado como parâmetro. Com o código abaixo exibiremos no console tanto o número "puro" quanto o número arredondado.

var numeroAleatorio = Math.random();
console.log("Numero Original: " + numeroAleatorio + " | Número arredondado: " + Math.round(numeroAleatorio));

Agora, afim de obter vários números colocaremos o código acima dentro de um loop for.

var numeroAleatorio;
for(var x = 0; x < 10; x++){
numeroAleatorio = Math.random();
console.log("Numero Original: " + numeroAleatorio +
" | Número arredondado: " + Math.round(numeroAleatorio));
}

O que temos é um festival de zeros e ums. Isso acontece porque primeiro a função Math.random() gera um número entre 0 e 0.999999999999... e em seguida a função Math.round() o arredonda seguindo a seguinte lógica. Se o número gerado estiver mais próximo de 0 que de 1 ele é arredondado para 0, senão ele é arredondado para 1.

Para obter números em um intervalo maior devemos utilizar a função Math.random() em conjunto com algumas operações aritméticas. No código abaixo multiplicaremos o número gerado por 10.

var numeroAleatorio;
for(var x = 0; x < 100; x++){
numeroAleatorio = Math.random();
console.log("Numero Original: " + numeroAleatorio + "
| Número multiplicado pro 10: " + (numeroAleatorio * 10) + "
| Número multiplicado por 10 e arredondado: " + Math.round(numeroAleatorio * 10));
}

Vou pegar o primeiro número que foi gerado para mim e explicar o resultado do código:

• Primeiro a função Math.random() gerou o número 0.9140966973810001
• Este número foi multiplicado por 10 resultando em 9.14096697381
• Por fim esse número foi arredondado seguindo a lógica de "se está mais perto de 9 que de 10 ele é arredondado para 9 senão ele é arredondado para 10". Nesse caso o resultado foi 9.

Podemos simplificar o código utilizando a função Math.round() e a multiplicação por 10 logo na atribuição da variável

var numeroAleatorio;
for(var x = 0; x < 100; x++){
numeroAleatorio = Math.Round(Math.random() * 10);
console.log(numeroAleatorio);
}

O código acima já retorna o valor final do número, que sempre será um número entre 0 e 10.

Podemos obter números entre 0 e qualquer número positivo utilizando a mesma lógica, apenas mudando o valor pelo qual o Math.random() será multiplicado.

var numeroAleatorio;
for(var x = 0; x < 100; x++){
numeroAleatorio = Math.Round(Math.random() * 5);
console.log(numeroAleatorio);
}

Com o código acima sempre obteremos números entre 0 e 5.

Se quisermos obter números a partir de um intervalo exato, entre 8 e 10 por exemplo. Devemos seguir a foŕmula abaixo

Math.round(numero do limite inferior + Math.random() * (numero do limite superior - numero do limite inferior))

O Código para gerar números entre 8 e 10 seria o seguinte:

var numeroAleatorio;
for(var x = 0; x < 100; x++){
numeroAleatorio = Math.round(8 + Math.random() * (10 - 8));
console.log(numeroAleatorio);
}

No código acima temos a mesma lógica já apresentada anteriormente, de que podemos obter números de um intervalo entre 0 e qualquer número positivo apenas multiplicando o math.random() por esse número. Nesse caso, obteremos sempre números entre 0 e 2, pois Math.random() * 2 sempre irá gerar números dentro desse intervalo, após isso o número gerado será somado com 8, o que garante que o menor número do intervalo sempre seja 8. Por fim, o número é arredondado com a função Math.round().

Seguindo as premissas mostradas acima criei uma aplicação onde o usuário entra com dois números e em seguida gera um número aleatório dentro do intervalo entre esses dois números.

Download Link

A assim esse post aleatório sobres números aleatórios chega ao fim.

#4 - Programa para Memorizar o Hiragana e o Katakana

Ao se iniciar os estudos em língua japonesa, o primeiro passo deve ser aprender os dois sistemas de escrita mais básicos do idioma, sendo eles o Hiragana e o Katakana. Esse programa tem como objetivo ajudar o estudante nessa tarefa.

A dinâmica do programa é inspirada no Anki.Não por acaso eu o apelidei de Mini Anki.Um outro famoso programa muito utilizado no estudo de idiomas. Primeiro é mostrada a letra e após um determinado tempo é mostrado o som que ela representa. O usuário pode escolher quais colunas de letras estudar e também mudar a velocidade em que o som da letra é revelado.

Para mais detalhes sobre como funciona a escrita da língua japonesa recomendo o vídeo abaixo, do canal do youtube 123 japonês.

Download Link
さいおなら!

#3 - Timer / Despertador Feito com Javascript | Versão 2.0

Com bastante atraso, afinal é muito fácil se perder e gastar todo o tempo com coisas inúteis enquanto a vida passa, eu trago a versão 2.0 do timer / despertador feito com javascript.

Novidades

• O código javascipt está muito melhor estruturado e repleto de comentários, o que dá um norte para quem quiser se aventurar por ele.
• Além do som de alarme padrão, o usuário agora tem a possibilidade de escolher que uma janela no navegador seja aberta, com uma url definida por ele.
• As preferências do usuário agora são salvas com localStorage.

Download Link
That's all folks!