Tag: Estudo

Publicado em

Tratando erros em JavaScript

O JavaScript é uma linguagem amplamente utilizada em desenvolvimento web, com várias aplicações em front-end e back-end. Como em qualquer outra linguagem, é possível que ocorram erros durante a execução do código, o que pode afetar o desempenho do programa e, em alguns casos, impedir que ele funcione corretamente.

Felizmente, existem várias maneiras de lidar com erros em JavaScript, permitindo que os desenvolvedores criem códigos mais robustos e confiáveis. Nesta postagem, discutiremos as principais técnicas para tratar erros em JavaScript, juntamente com exemplos de código e as melhores práticas para aplicá-las.

Bloco Try-Catch

Uma maneira comum de lidar com erros em JavaScript é usando o bloco try-catch. O bloco try contém o código que pode gerar um erro, enquanto o bloco catch é usado para tratar o erro caso ele ocorra.

Aqui está um exemplo de como usar o bloco try-catch em JavaScript:

try {
    // código que pode gerar um erro
} 
catch (e) {
    // código que trata o erro
}

No exemplo acima, o bloco try contém o código que pode gerar um erro, enquanto o bloco catch é responsável por manipular o erro caso ele ocorra. A variável e contém informações sobre o erro, como o tipo de erro e uma mensagem de erro.

Eventos de erro

Outra maneira de lidar com erros em JavaScript é por meio de eventos. Alguns erros são gerados por eventos, como uma imagem que não foi carregada corretamente. Para lidar com esses tipos de erros, você pode usar eventos específicos do navegador, como onerror.

Veja um exemplo de como usar o evento onerror em JavaScript:

const img = document.createElement('img');
img.onerror = function() {
  // código que trata o erro
}
img.src = 'imagem_que_não_existe.png';

No exemplo acima, criamos um novo elemento img e definimos a propriedade onerror para uma função que será executada caso ocorra um erro ao carregar a imagem. Dentro dessa função, podemos inserir o código que irá lidar com o erro de acordo com as necessidades do nosso programa.

Validações

Além das técnicas acima, é importante lembrar que as validações são uma forma eficaz de prevenir erros em JavaScript. As validações podem ser usadas para verificar se o input do usuário é válido, se uma variável possui o tipo esperado, ou se um objeto possui todas as propriedades necessárias.

Veja um exemplo de validação em JavaScript:

function calculaQuadrado(x) {
  if (typeof x !== 'number') {
    throw new TypeError('O valor fornecido não é um número');
  }
  return x * x;
}

No exemplo acima, criamos uma função calculaQuadrado que recebe um parâmetro x. Antes de realizar o cálculo do quadrado, verificamos se o parâmetro é um número. Se não for, lançamos um erro de tipo usando o comando throw.

Quando evitar o tratamento de erros e usar validações

Embora seja importante tratar erros em JavaScript, existem situações em que pode ser adequado não tratar um erro. Isso pode ocorrer quando um erro é inofensivo ou irrelevante para o funcionamento do programa, ou quando o tratamento de erros pode ter um impacto significativo no desempenho.

Algumas situações em que pode ser aceitável não tratar um erro incluem:

  • Erros que ocorrem em ambientes controlados, como testes automatizados ou ambientes de desenvolvimento;
  • Erros que ocorrem em código que não é crítico para o funcionamento geral do programa;
  • Erros que ocorrem em eventos que você não tem controle, como a interrupção de uma conexão de rede.

Em vez de tratar um erro, outra abordagem pode ser usar validações para prevenir que ele ocorra em primeiro lugar. As validações podem ser usadas para verificar se o input do usuário é válido, se uma variável possui o tipo esperado ou se um objeto possui todas as propriedades necessárias. Dessa forma, é possível reduzir a probabilidade de erros ocorrerem, o que pode levar a um código mais eficiente e confiável.

Por exemplo, ao invés de tratar o erro de uma variável não ser um número dentro de uma função, podemos validar o input da função e garantir que somente números sejam passados como argumento:

function calculaQuadrado(x) {
  if (typeof x !== 'number') {
    throw new TypeError('O valor fornecido não é um número');
  }
  return x * x;
}

Conclusão

Lidar com erros em JavaScript é uma parte importante do processo de desenvolvimento, garantindo que o código seja eficiente e confiável. Neste artigo, discutimos as principais técnicas para tratar erros em JavaScript, incluindo o uso do bloco try-catch, eventos de erro e validações. Também vimos que, em algumas situações, pode ser aceitável não tratar um erro e, em vez disso, usar validações para prevenir que ele ocorra em primeiro lugar. Esperamos que essas informações ajudem você a criar códigos JavaScript mais robustos e confiáveis em seu próximo projeto.

Publicado em

Como usar Classes no JavaScript

Classes são uma das principais características da orientação a objetos no JavaScript e servem modelos para criar objetos (instâncias) que compartilham propriedades e métodos. É uma maneira de escrever o código de uma forma mais organizada e reutilizável.

Antes do ECMAScript 2015 (ES6), o JavaScript não tinha suporte nativo para classes. Em vez disso, os desenvolvedores usavam funções construtoras e herança por protótipo para imitar a funcionalidade de classes. Com a introdução do ES6, o JavaScript agora oferece suporte nativo para classes.

Estrutura Básica

A sintaxe básica de uma classe no JavaScript é a seguinte:

class NomeDaClasse {
  constructor(propriedade1, propriedade2) {
    this.propriedade1 = propriedade1;
    this.propriedade2 = propriedade2;
  }
  metodo1() {
    // código do método 1
  }
  metodo2() {
    // código do método 2
  }
}

A classe tem um construtor, que é uma função especial chamada quando um novo objeto é criado a partir da classe. O construtor pode ter parâmetros para inicializar as propriedades do objeto. Além disso, uma classe pode ter métodos, que são funções que fazem alguma coisa com o objeto.

Para criar uma nova instância de uma classe, você usa a palavra-chave “new”:

const minhaInstancia = new NomeDaClasse(valor1, valor2);

A partir daí, você pode acessar as propriedades e métodos da instância como:

minhaInstancia.propriedade1;
minhaInstancia.metodo1();

Como era antes do ES6

Precisamos lembrar que o JavaScript é uma linguagem prototipada, então a palavra “class” é um facilitador e por baixo dos panos faz algo parecido com o seguinte código:

function NomeDaClasse(propriedade1, propriedade2) {
  this.propriedade1 = propriedade1;
  this.propriedade2 = propriedade2;

  this.metodo1 = function() {
    // código do método 1
  };

  this.metodo2 = function() {
    // código do método 2
  };
}

var objeto = new NomeDaClasse('valor1', 'valor2');

Herança

Além disso, você pode estender uma classe existente para criar uma nova classe com suas próprias propriedades e métodos adicionais. Isso é chamado de herança e é feito usando a palavra-chave extends.

O código abaixocria uma nova classe NomeDaClasseFilha que herda as propriedades e métodos da classe:

class NomeDaClasseFilha extends NomeDaClasse {
  constructor(propriedade1, propriedade2, propriedade3) {
    super(propriedade1, propriedade2);
    this.propriedade3 = propriedade3;
  }
  metodo3() {
    // código do método 3
  }
}

Conclusão

Isso ai, esse é o fundamento de utilização de classes no JavaScript. Se você teve duvida ou gostaria de um tutoria mais a fundo, prenda uma mensagem com a sua duvida e veremos o que podemos faze para te ajudar.

Publicado em

Exercício – Atravessar a Rua

Neste exercício, criaremos uma função que calcula a quantidade mínima de passos que uma pessoa precisa dar para atravessar a rua.

A nossa pessoa deseja atravessar a rua. Inicialmente, a pessoa está localizada em uma posição X, e deseja chegar a uma posição maior ou igual a Y. A cada passo que a nossa pessoa dá, ela percorre uma distância fixa que denominaremos Z. Na nossa função, precisaremos:

  • Contar a quantidade mínima de passos que a nossa pessoa precisa dar para atravessar a rua, ou seja, sair da posição X e chegar ou ultrapassar a posição Y.

Em nossa função, precisamos passar os parâmetros. Por exemplo, daremos 3 números inteiros, X, Y e Z, e a função deverá retornar um número mínimo de passos que inicie da posição X e vá para uma posição maior ou igual a Y.

Dando como exemplo os números de entrada:

  • X = 5;
  • Y = 40;
  • D = 1;

Ao dar um passo, deve ser somada a distância inicial + a distância do passo dado, ou seja:

Ao dar um passo = 5 + 1;

Dois passos: 5 + 1 + 1.

E assim, sucessivamente, até chegar ou passar a distância final de 40.

Para realizar esse exercício, você precisará:

  • Criar uma função chamada atravessaRua;
  • Essa função deverá receber três parâmetros: X, Y e Z;
  • Calcular a distância necessária;

Você pode fazer o download da solução aqui: [download id=”4210″]

Publicado em

Estrutura de Dados com Classes JavaScript

FILA:

Image for post

class Fila {
    constructor(head = null, tail = null, count = 0){
        this.head = head;
        this.tail = tail;
        this.count = count;
    }
    GetContador(){
        return this.count;
    }
}

Enqueue:

Enqueue(data){
    let no = {
        data: data,
        next: this.head
    };
    if (this.head === null){
        this.tail = no;
    }
    this.head = no;
    this.count++;
}

Dequeue:

Dequeue(){
    if (this.count === 0){
        return;
    } else {
        let current = this.head;
        let previous = null;
        while (current.next){
            previous = current;
            current = current.next;
        }
        if (this.count > 1){
            previous.next = null;
            this.tail = previous;
        } else {
            this.head = null;
            this.tail = null;
        }
        this.count--;
    }
}

MostrarTudo:

MostrarTudo(){
    if (this.head === null){
        return null;
    } else {
        let arr = [];
        let current = this.head;
        for (let i = 0; i < this.count; i++) {
            arr[i] = current.data;
            current = current.next;
        }
        return arr;
    }
}

VisualizarEm:

VisualizarEm(index){
    if (index > -1 && index < this.count){
        let current = this.head;
        for (let i = 0; i < index; i++) {
            current = current.next;
        }
        return current.data;
    } else {
        return null;
    }
}

Agora, vamos testar:

let fila = new Fila();
fila.Enqueue(1);
fila.Enqueue(2);
fila.Enqueue(3);
fila.Enqueue(4);
fila.Enqueue(5);
fila.Enqueue(6);
fila.Dequeue();
fila.Dequeue();
console.log(fila.VisualizarEm(1));
console.log(fila.MostrarTudo());
console.log(fila);
Image for post

PILHA:

Image for post

Então, para começarmos a implementar a pilha, precisamos construir a nossa classe Pilha e seu construtor. Vamos implementar também um contador, que será útil para nos mostrar a quantidade de itens na pilha. No nosso construtor, precisamos setar nossos valores do contador e do topo da pilha. Como ainda não há nada na pilha, o topo é null e o contador é 0:

class Pilha {
    constructor(top = null, count = 0){
        this.top = top;
        this.count = count;
    }
    GetContador(){
        return this.count;
    }
}

Push:

Push(data){
    let no = {
       data: data,
       next: null
    };
    no.next = this.top;
    this.top = no;
    this.count++;
}

Visualizar:

Visualizar(){
    if (this.top === null){
        return null;
    } else {
        return this.top.data;
    }
}

Remover:

Remover(){
    if (this.top === null){
        return null;
    } else {
        let remover = this.top;
        this.top = this.top.next;
        if (this.count > 0){
            this.count--;
        }
        return remover.data;
    }
}

MostrarTodos:

MostrarTodos(){
    if (this.top === null){
        return null;
    } else {
        let arr = [];
        let current = this.top;
        for (let i = 0; i < this.count; i++){
            arr[i] = current.data;
            current = current.next;
        }
        return arr;
    }
}

E podemos testar a nossa estrutura de dados, instanciando uma nova pilha:

let pilha = new Pilha();
pilha.Push(1);
pilha.Push(2);
pilha.Push(3);
pilha.Push(4);
pilha.Push(5);
pilha.Push(6);
pilha.Push(7);
pilha.Remover();
console.log(pilha.Visualizar());
console.log(pilha.MostrarTodos());
console.log(pilha);

E a saída será:

Image for post

Continue lendo “Estrutura de Dados com Classes JavaScript”

Publicado em

JS Fest 2020

A JS Fest acontecerá na Ucrânia, nos dias 30-31 de Outubro de 2020. A JS Fest é um evento/conferência internacional que considera sobre todos os aspectos do desenvolvimento com javaScript. É uma das maiores conferências sobre desenvolvimento JavaScript de toda a Europa, reunindo centenas de pessoas com experiência na tecnologia. A conferência acontecerá pelo terceiro ano consecutivo e são esperados palestrantes de 10 países ao redor do mundo. Por tradição, a conferência ocorrerá na cidade de Kyiv – Ucrânia.

Será falado sobre:

  • Arquitetura de apps;
  • Frameworks modernos, como GraphQL, TypeScript, etc;
  • Blockchain;
  • Desenvolvimento mobile, em particular com Flutter;
  • Aplicativos JS de IA;
  • Tópicos recentes em desenvolvimento de software;
  • Como se manter atento com as tecnologias e requisitos de mercado.

Você pode esperar palestras sobre os temas:

  • Frameworks;
  • JavaScript no Backend;
  • Embarcados;
  • Mobile;
  • JS Core;
  • Arquitetura de software;
  • Design de software;
  • Otimização de aplicações;
  • Teste de aplicações;
  • Blockchain;
  • Inteligência Artificial;
  • Machine Learning.

O que você pode esperar do evento?

Abordagens e Ferramentas:

Na conferência, será abordado o tema de uso de ferramentas, frameworks e boas práticas no desenvolvimento.

Palestrantes famosos mundo afora:

Foram convidados especialistas dos Estados Unidos, Europa e Ucrânia que irão realizar palestras cheia de exemplos práticos sobre projetos utilizados na vida real.

Novos tópicos no mundo da tecnologia:

É uma oportunidade para aprender sobre as inovações e receber os insights em primeira mão.

Atmosfera especial:

Será criada uma atmosfera especial para a comunicação, receber novos conhecimentos, aprender, compartilhar ideias e inspirações.

Novas conexões e networking:

Este evento em larga-escala é uma excelente chance de adquirir novos contatos que poderão ser úteis no futuro de sua carreira no desenvolvimento.

Excelente Organização:

Trabalhando apenas com fornecedores comprovados e com estrito cumprimento de cronograma, para não haver surpresas ruins para você.

Sorteios:

Os parceiros prepararam surpresas e concursos interessantes para os participantes do evento, então você pode, além do conhecimento, ganhar alguns presentes!

Casos práticos:

Profissionais com experiência prática compartilharão conhecimentos e contarão sobre os desafios enfrentados nos seus projetos.

Você pode verificar em: https://jsfest.com.ua/indexe.html

Gostou desta notícia? Comente abaixo e compartilhe com seus amigos!

Referências:

https://jsfest.com.ua/indexe.html

https://armacad.info/

 

Publicado em

Exercício – Rotacionando vetor

Um vetor é um conjunto de dados que pode armazenar vários dados em apenas um lugar. Por exemplo, em um vetor, podemos armazenar uma lista de itens de, por exemplo, uma lista de compras.

Uma lista de compras armazenada em um vetor seria algo como:

let listaDeCompras = ["arroz", "massa", "carne", "alface"];

Um vetor também pode ser criado vazio e, depois, utilizando métodos de inserção, podemos inserir itens neste vetor.

let vetor = [];

Podemos inserir no vetor utilizando o método push(), e remover itens usando o método pop().

O método push() adiciona um valor ao fim do vetor, e o método pop() remove o elemento do final do vetor. Também temos outros métodos, por exemplo:

  • unshift(): adiciona um elemento na primeira posição do vetor;
  • shift(): remove o elemento na primeira posição do vetor.

Entre outros métodos. Você pode verificar os outros métodos em: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array

Exercício:

Neste exercício, criaremos uma função que rotaciona o nosso vetor. Levaremos em consideração as letras do alfabeto, de A a E.

let vetorAlfabeto = ["A", "B", "C", "D", "E"];

O que queremos que aconteça é: rotacionar o vetor a quantidade de vezes indicada. Essa quantidade será representada pela letra Q.

Caso o valor apresentado por Q for 1, o array deverá rotacionar um elemento:

["E", "A", "B", "C", "D"]

Para realizar esse exercício, você precisará:

  • Criar uma função rotacao(), que receberá dois parâmetros. O vetor e a quantidade (V, Q);
  • Adicione um índice para percorrer o vetor;
  • Caso o vetor passado por parâmetro for um vetor vazio, retorne um vetor vazio.

Solução:

Você pode fazer o download da solução aqui:

[download id=”4138″]

Publicado em

Tornando o código mais rápido usando Sets JavaScript

Muitos desenvolvedores limitam-se a utilização de objetos globais básicos, como strings, objetos, números, arrays e booleanos. Na maioria das vezes, isso realmente é tudo que você precisa mas, para tornar o código mais eficiente, nem sempre isso é todo o necessário.

Para isso, existem os Sets JavaScript, que tornam o seu código mais rápido a medida que ele é escalonado. O uso de sets traz resultados que seriam impossíveis de obter somente com arrays.

E como os sets são diferentes?

Bom, os arrays são coleções de dados indexados, ou seja, cada valor dos dados em um array é ordenado por um índice. Por exemplo:

let mainArray = [a, b, c, d];
console.log(mainArray.indexOf(a));
// 0
console.log(mainArray.indexOf(c));
// 2

Já os Sets são coleções codificadas. Não usam índices, mas ordenam os seus dados utilizando chaves. Seus elementos são iteráveis na ordem de inserção e não podem conter dados duplicados, ou seja, cada conjunto de dados deve ser único.

E quais são os benefícios?

  • Utilizar métodos como indexOf() ou includes() para verificar a existência de um elemento em um array é muito lento;
  • Nos Sets, você pode excluir o elemento pelo seu valor. Em um array, você pode utilizar o splice com base no índice do elemento, tornando-o lento pela dependência de índices;
  • É mais rápido adicionar elementos aos Sets do que adicionar elementos em um array utilizando metodos como push() ou unshift();
  • Um Set pode armazenar NaN;
  • Sets armazenam apenas valores únicos. Se você não pode trabalhar com duplicatas, esta é uma vantagem.

O quão mais rápido são os Sets?

Os métodos que o array utiliza possuem uma complexidade de tempo linear de O (N), ou seja, o tempo de execução necessário aumenta conforme aumenta o tamanho dos dados. Mas métodos que utilizam Sets para manipulações como inserção, exclusão e pesquisa possuem uma complexidade de tempo  O (1), e isso significa que o tempo de execução não varia, pois o tamanho dos dados não influencia no tempo de execução dos métodos.

Teste:

Realizando um teste, vamos criar um array e um set com um milhão de entradas cada:

let newArray = [], newSet = new Set(), n = 1000000;

for (let i = 0; i < n; i++){
    newArray.push(i);
    newSet.add(i);
}

Agora, pesquisaremos o número 425123 no array e no set:

let result; 
console.time('Array');
result = newArray.indexOf(425123) !== -1;
console.timeEnd('Array');

console.time('Set');
result = newSet.has(425123);
console.timeEnd('Set');

E a saída foi:

// Array: 1.201ms
// Set: 0.029ms

Gostaram deste artigo? Comente abaixo!

Referência: https://medium.com/@bretcameron/how-to-make-your-code-faster-using-javascript-sets-b432457a4a77

Publicado em

O método Call

Neste artigo falaremos mais sobre o método call() que nos permite reaproveitar métodos em contextos (this) diferentes. No artigo tentarei explicar as coisas com a menor complexidade possível e resumirei alguns itens, então para aquele que sabem bem JavaScript por favor calma ai… rsrsrsr

Primeiro vamos entender mais sobre a chamada em si. É importante saber que ela:

  • É nativa, não precisa chamar biblioteca, framework, etc…
  • É um método das funções. Sim, se você ainda não sabia as funções são um tipo de dado que possui métodos/funções próprias;
    • Se ficou confuso, aguarde o exemplo.
  • Recebe um parâmetro que informa o seu contexto onde estarão os dados a executar;
    • Nesse caso contexto é uma função, objeto ou até o window se você estiver procurando pelo em ovo.
  • Pode receber mais parâmetros depois do this. Estes parâmetros se referem qualquer outro valor que você queira enviar para a função;

Note que eu estou usando as palavras função e método de forma alternada. Isso é porque eles são a mesma e tem mais diferença entre function e arrow function do que eles. 🙂

Exemplo básico

// Se chamar essa função do jeito que está aqui, vai exibir undefined pois this.umLocal não tem um valor atribuido a ele.
function ola(){
    console.log(`Olá ${this.umLocal}`);
}

// Agora vamos criar um objeto mais simples possível com a variavel umLocal
const teste = {
    umLocal : "MundoJS"
}

//Lembra quando eu disse que o call é um método das funções? Olhá só…
ola.call(teste);

Se você executar o código acima verá que ele exibirá Olá MundoJS no console. Vejamos o que aconteceu então:

  1. Criamos uma função chamada ola().
  2. Essa função exibe algo no console e chama o this.umLocal
  3. Sem fazer a chamada call() a função olha dentro de seu contexto (o this dela), não acha nada e exibe a mesma coisa
  4. Criamos um objeto com uma variável.
    1. Note que não precisamos dizer que é no contexto do objeto, mas está lá
  5. Invocamos o método call() da função ola passando o “teste” como novo contexto.
  6. Ao tentar executar a função, desta vez ela olha no teste e encontra a variável para usá-la no console.log()

Vejamos então mais alguns exemplos

1 – Passando os parâmetros da função:

// Desta vez ola recebe um parâmetro chamado saudacao
function ola(saudacao){
// aviso: se colocar this.saudacao ele não vai achar no call()…
// a explicação do porque sai bastante do artigo, mas se você entender bem de “this” e functions já deve ter se ligado. Caso queira saber mais, prende um comentário pedindo um tutorial sobre this
    console.log(`${saudacao} ${this.umLocal}`);
}

const teste = {
    umLocal : "Universo"
}
// O primeirpo parâmetro do call sempre é o “this”, depois disso você pode chamar todos os parâmetros da própria função.
ola.call(teste, "Olá");

2 – Usando métodos de Arrays em objetos que são listas mas não vetores.

Com o ES6 vieram diversos métodos muito uteis como o filter, forEach,reduce, etc… dai você tenta usar ele em uma lista que não é um vetor/array [] e não da certo pois eles não possuem isso.

// Erro pois é um HTMLCollection
document.getElementsByTagName("p").forEach(x => console.log(x));

// Vamos criar um objeto parecido com um vetor
let arrayLike = {
  0: "Olá",
  1: "MundoJS",
  length: 2
};

// e uma função para ser chamada no reduce()
function juntar(acc, cur){
    acc = `${acc} ${cur}`;
}

// Erro
// Motivo: O seu objeto parece um array (possui indices e length) mas não é um vetor e por isso não tem o método reduce nele
arrayLike.reduce(juntar);

// Agora se chamarmos o reduce e passarmos forçarmos ele a aceitar nosso objeto como o contextosArray.prototype.reduce.call(arrayLike, juntar);

Isso ai então pessoal, espero que o artigo ajude a matar algumas duvidas sobre o call e qualquer coisa perguntem aqui nos cometários. Até mais.

Publicado em

Criando sistema de login com NodeJS parte 1

Neste artigo, começaremos a criar um sistema de login básico utilizando JavaScript. Utilizaremos a ferramenta NodeJS para criar o BackEnd. Utilizaremos as dependências Express, que realiza a parte middleware de nossa aplicação; EJS, para gerar os templates HTML e Nodemon + dotenv, que atualiza a nossa aplicação ao alterar os arquivos.

Então vamos lá:

Para inicializar o projeto, crie uma pasta com o nome Nodejs_Login. Abra essa pasta com o Visual Studio Code ou com seu editor favorito. No terminal, iniciaremos a aplicação com o comando:

npm init

Pressione enter até terminar de configurar o package.json. Não entraremos nos detalhes de configuração do arquivo package.json.

Para instalar as dependências, utilize os seguintes comandos:

npm i express ejs

Para instalar o nodemon e o dotenv:

npm i –save-dev nodemon dotenv

Agora, crie um arquivo chamado .env, que conterá as nossas variáveis de ambiente que poderemos carregar no nosso servidor. Crie também um arquivo chamado .gitignore, que ignora arquivos, não comprometendo nosso ambiente.

Dentro do arquivo .gitignore, adicione:

.env
node_modules

Fazemos isso pois esses arquivos possuem informações confidenciais, que não poderão er compartilhadas.

Dentro do seu package.json, criaremos um script chamado devStart que conterá o nodemon server.js. Isso fará nosso atualizar a cada vez que alterarmos algo no nosso código.

"scripts": {
    "devStart": "nodemon server.js"
}

Começaremos agora a criar o nosso sistema de login!

Crie um arquivo chamado server.js. Esse arquivo conterá o código que iniciará o servidor. Precisamos importar o express:

const express = require('express');
const app = express();

app.set('view-engine', 'ejs');
app.get('/', (req, res) => {
    res.render('index.ejs', {nome: 'João'});
})
app.listen(3000);

Dentro da sua pasta principal, crie uma subpasta chamada views e, dentro dela, um arquivo chamado index.ejs. Esse arquivo conterá o seguinte código:

<h1>Olá <%= nome %></h1>

Continue lendo “Criando sistema de login com NodeJS parte 1”

Publicado em

Criando jogo Snake em JavaScript e Canvas

Hoje criaremos um jogo Snake utilizando HTML5 e JavaScript.

Para isso, criaremos um arquivo HTML que servirá de base para nosso jogo. Crie um arquivo chamado index.html e insira o código:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jogo Snake</title>

</head>
<body>
        <script src="scripts.js"></script>
</body>
</html>

Dentro do nosso elemento body, adicionaremos um elemento canvas:

<canvas id="canvas" width="400" height="400"></canvas>

E agora, adicionaremos o JavaScript:

Agora que temos o Canvas adicionado, adicionaremos o JavaScript. Crie um arquivo chamado scripts.js, e nele, adicionaremos a lógica do nosso jogo. O nosso arquivo irá renderizar o canvas e os elementos do jogo.

Primeiro, precisamos definir o que acontece quando o window.onload é chamado. Precisamos obter o elemento Canvas e adicionar um evento de pressionar teclas. Esse evento faz o canvas se redesenhar com a nova posição da cobra e onde o alimento aparecerá.

let canvas;
let ctx;

window.onload = function(){
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    document.addEventListener("keydown", keyDownEvent);
    let x = 8;
    setInterval(desenharJogo, 1000 / x);
};

Tratamento das teclas:

Precisamos definir o que a nossa função keyDownEvent chamada no addEventListener faz. Para isso, utilizaremos keyCodes, que representam o que cada seta do teclado faz:

function keyDownEvent(event){
    // nextX e nextY representam as direções que a cobra irá percorrer
    // nos eixos X e Y, respectivamente
    switch(event.keyCode){
        case 37:
            nextX = -1;
            nextY = 0;
            break;
        case 38:
            nextX = 0;
            nextY = -1;
            break;
        case 39:
            nextX = 1;
            nextY = 0;
            break;
        case 40:
            nextX = 0;
            nextY = 1;
            break;
    }
}

O nextX e nextY representam a direção em que a cobra se desloca.

Serpente:

Vamos definir as variáveis que serão utilizadas para criar a serpente.

let defaultTamanhoCauda = 3;
let tamanhoCauda = defaultTamanhoCauda;
let caminhoCobra = [];
let cobraEixoX = cobraEixoY = 10;

Definimos um tamanho inicial da serpente como 3. A cada vez que ela ingerir o alimento, será incrementado em 1 esse valor. O caminho que a serpente percorrerá é uma matriz de posições X e Y, onde cobraEixoX e cobraEixoY serão a posição inicial da cobra.

Tela do jogo:

Criaremos a tela onde o jogo funcionará. É uma grade 20×20, que corresponde à largura e altura da tela.

//Criação da tela de jogo
let tamanhoTela = tamanhoCaminho = 20;
let nextX = nextY = 0;

Comida:

Criaremos a comida, que ficará em uma posição X e Y:

//Criação da comida
let appleX = (appleY = 15);

Atualizando o jogo:

Toda vez que chamamos a função, movemos a cobra em alguma próxima posição, e também verificar se a serpente não está fora dos limites do jogo e redefinir a posição para ela sair do outro lado. Essas verificações estarão dentro de uma função chamada desenharJogo():

 

function desenharJogo(){
    cobraEixoX += nextX;
    cobraEixoY += nextY;

    if (cobraEixoX < 0){
        cobraEixoX = tamanhoTela -1;
    }
    
    if (cobraEixoX > tamanhoTela - 1){
        cobraEixoX = 0;
    }
    
    if (cobraEixoY < 0){
        cobraEixoY = tamanhoTela -1;
    }
    
    if (cobraEixoY > tamanhoTela - 1){
        cobraEixoY = 0;
    }

}

Verificaremos se a cobra mordeu o alimento. Se isso acontecer, precisamos aumentar o tamanho da cauda da serpente e calcular uma nova posição:

//Se a cobra comer o alimento
    if (cobraEixoX == appleX && cobraEixoY == appleY){
        tamanhoCauda++;
        appleX = Math.floor(Math.random() * tamanhoTela);
        appleY = Math.floor(Math.random() * tamanhoTela);
    }

Agora, pintaremos o fundo do jogo de preto. Desenharemos a dobra, devemos também verificar se a cobra morde o próprio rabo, e também precisamos redefinir o tamanho da cauda para o tamanho inicial.

ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = "green";
    for (let i = 0; i < caminhoCobra.length; i++){
        ctx.fillRect(
            caminhoCobra[i].x * tamanhoCaminho,
            caminhoCobra[i].y * tamanhoCaminho,
            tamanhoCaminho,
            tamanhoCaminho
        );
        if (caminhoCobra[i].x == cobraEixoX && caminhoCobra[i].y == cobraEixoY){
            tamanhoCauda = defaultTamanhoCauda;
        }
    }

E pintaremos a maçã:

ctx.fillStyle = "red";
    ctx.fillRect(appleX * tamanhoCaminho, appleY * tamanhoCaminho, tamanhoCaminho, tamanhoCaminho);

E, no final, verificaremos se o caminho da cobra excede o tamanho da cauda. Caso isso aconteça, mudaremos as últimas posições para fora da trilha.

caminhoCobra.push({
        x:cobraEixoX,
        y:cobraEixoY
    });
    while (caminhoCobra.length > tamanhoCauda){
        caminhoCobra.shift(); }

E com isso, terminamos o nosso jogo!

O código está disponível para download aqui:

[download id=”3784″]