Pilhas e Filas (Estrutura de dados)

[download id=”589″]

Neste artigo estarei explicando o funcionamento das estruturas de dados conhecidas como Pilha e Fila. O código fonte JavaScript será deixado disponível e uma breve explicação junto com o uso serão dados para cada uma delas.

Pilha

Conceito Básico

A pilha é uma estrutura de dados básica que fornece a lógica conhecida por LIFO(Last In, First out). Isso significa que o ultimo dado adicionado a estrutura será o primeiro removido dela e por isso foca a entrada e saída de dados na mesma ponta do vetor/lista.

Na prática, a pilha como um controle para serviços que dependem da conclusão do ultimo recurso ativado antes de prosseguirem. Exemplos de rotinas que utilizam essa lógica são o “desfazer” do Word e o gerenciamento da execução de funções (de programação), que causa o conhecido erro de stackoverflow.

Código Fonte

O código fonte abaixo não vai usar o vetor do JavaScript simplesmente para podermos ver em mais detalhes o funcionamento desta estrutura de dados. não será uitlizado um vetor, mas sim nós (nodes) que se conectam uns aos outros.

function Pilha() {
    var topo = null;
    var quantidade = 0;

    //Retorna o número de itens na Pilha
    this.GetCount = function () {
        return quantidade;
    }
    //Push: Adiciona itens ao topo da pilha
    this.Push = function (dados) {
        var node = {
            dados: dados,
            proximo: null
        };

        node.proximo = topo;
        topo = node;

        quantidade++;
    }
    //Pop: Remove itens do topo da pilha
    this.Pop = function () {
        if (topo === null) {
            return null;
        } else {
            var removido = topo;
            topo = topo.proximo;

            if (quantidade > 0) {
                quantidade--;
            }

            return removido.dados;
        }
    }
    //Exibe o Item do topo da pilha
    this.VerTopo = function () {
        if (topo === null) {
            return null;
        } else {
            return topo.dados;
        }
    }
    //Retorna um vetor com todos iitens da Pilha
    this.VerTodos = function () {
        if (topo === null) {
            return null;
        } else {
            var arr = new Array();
            var current = topo;

            for (var i = 0; i < quantidade; i++) {
                arr[i] = current.dados;
                current = current.proximo;
            }

            return arr;
        }
    }
}

Fila

Conceito Básico

Fila é um tipo de estrutura de dados com um controle definido pela lógica FIFO (do inglês first in, last out). Esse controle quer dizer que os dados contidos nela são podem entrar apenas por uma ponta e deverão sair pela outra. Com isso, garante-se que o primeiro dado que entrou será o primeiro a sair da fila.

A fila é uma estrutura de dados muito útil quando se possui um serviço ao qual o sistema recebe alimentação de diversas fontes, mas precisa manter uma ordem do “primeiro que chegou será o primeiro servido”. Um exemplo simples é o sistema que administra diversos computadores ligados a uma única impressora.

Código Fonte

O código fonte abaixo não vai usar o vetor do JavaScript simplesmente para podermos ver em mais detalhes o funcionamento desta estrutura de dados. Não será utilizado um vetor como forma de controle mas sim nós contectados uns aos outros, irei também fazer com que o ato de adicionar o faça no começo da fila e o de remover será na outra ponta.

function Fila() {
    var quantidade = 0;
    var primeiro = null;
    var ultimo = null;

    //Retorna a quantidade na fila
    this.GetQuantidade = function () {
        return quantidade;
    }
    //adiciona um item a fila
    this.Adicionar = function (data) {
        var node = {
            data: data,
            prox: primeiro
        };

        if (primeiro === null) {
            ultimo = node;
        }

        primeiro = node;

        quantidade++;
    }
    //Remove um item da fila
    this.Remover = function () {
        //se a fila estiver vaiza, retorna nulo
        if (ultimo === null) {
            return null;
        }
        else {
            //senão percorre a fila até o ultimo item para removelo e ajusta a lista
            var current = primeiro;
            var previous = null;

            while (current.prox) {
                previous = current;
                current = current.prox;
            }

            if (quantidade > 1) {
                previous.prox = null;

                ultimo = previous;
            }
            //zera/reseta a fila
            else {
                primeiro = null;
                ultimo = null;
            }
            quantidade--;
        }
        //Exibe todos os itens da fila
        this.ExibirTodos = function () {
            if (primeiro === null) {
                return null;
            } else {
                var arr = new Array();
                var current = primeiro;

                for (var i = 0; i < quantidade; i++) {
                    arr[i] = current.data;
                    current = current.prox;
                }

                return arr;
            }
        }
    }
}

 

O que é ECMAScript, ES6, ES8?

Aprender JavaScript pode ser confuso por uma série de razões. Não permita que essas siglas o confundam mais. Vamos dividir e conquistar as abreviaturas do JS eES neste post!

O que é ECMAScript?

Aqui está o que aconteceu há muito tempo atrás: O JavaScript foi originalmente chamado de assim na esperança de capitalizar o sucesso do Java. Então a Netscape enviou JavaScript para a organização que padroniza informações, conhecida como ECMA International for Standardization. Isso resultou em um novo padrão de idioma, conhecido como ECMAScript.

Simplificando, o ECMAScript é um padrão. Enquanto o JavaScript é a implementação mais popular desse padrão. O JavaScript implementa o ECMAScript e constrói em cima dele.

 

Ok, então é o ‘ES’?

ES é simplesmente curto para ECMAScript. Toda vez que você vê ES seguido de um número, ele está fazendo referência a uma edição do ECMAScript. Na verdade, existem oito edições do ECMAScript publicadas. Abaixo listaremos quais foram as primeiras 4 edições do ECMAScript, e para economizar tempo, não vamos também em profundidade. Apenas saiba que as três primeiras edições foram anuais, e a quarta foi abandonada devido a diferenças políticas.

  • ES1: junho de 1997
  • ES2: junho de 1998
  • ES3: dezembro de 1999
  • ES4: Abandonado

Agora veremos as versões mais recentes e o que elas fizeram de diferente

ES5

Dezembro de 2009: quase 10 anos depois, o ES5 foi lançado em 2009. Levaria quase seis anos para que a próxima versão do ECMAScript fosse divulgada. Adiciona “strict mode”, ao subconjunto destinado a fornecer uma verificação de erros mais completas e construções propensas a erros. Esclarece muitas ambiguidades nas especificações da 3ª edição e acomoda o comportamento de implementações do mundo real que diferiram consistentemente dessa especificação. Adiciona alguns novos recursos, como getters e setters, suporte de biblioteca para JSON e reflexão mais completa sobre propriedades do objeto.

 

ES6 / ES2015

Talvez a causa de toda a sua confusão começa aqui. Você vê, ES6 e ES2015 são a mesma coisa. ES6 foi o nome popularizado antes da liberação. No entanto, o comitê que supervisiona as especificações do ECMAScript tomou a decisão de passar às atualizações anuais. Com essa mudança, a edição foi renomeada para ES 2015 para refletir o ano de lançamento. Os lançamentos subsequentes também serão nomeados de acordo com o ano em que forem divulgados.

Adiciona nova sintaxe significativa para escrever aplicativos complexos, incluindo classes e módulos, mas os define semanticamente nos mesmos termos que o modo estrito ECMAScript 5. Outros novos recursos incluem iteradores e repetições for/of, funções de seta (arrow), dados binários, arrays digitados, coleções (mapas, conjuntos e mapas fracos), promessas, número e aprimoramentos matemáticos.

 

ES2016 (ES7)

A Sétima Edição, também conhecida como ECMAScript 2016, pretende continuar os temas de reforma da linguagem, isolamento de código, controle de efeitos e habilitação de biblioteca / ferramenta de ES2015, inclui dois novos recursos: o operador de exponenciação (**) e Array.prototype.includes.

 

ES2017 (ES8)

Novos recursos propostos incluem simultaneidade e atômica, transferência de dados binários de cópia zero, mais número e aprimoramentos de matemática, integração sintática com promessas (aguardar / assíncrono), fluxos observáveis, tipos de SIMD, melhor meta-programação com classes, propriedades de classe e instância, sobrecarga de operador, Tipos de valor, registros, tuplas and traits.

Conheça o Ember.js

De acordo com os autores do Ember, o framework foi concebido para “criar aplicações ambiciosas na web”. Não só as aplicações web de uma única página (SPAs), mas também aplicativos de desktop e móveis. A Apple Music é um dos exemplos mais notáveis ​​de um aplicativo criado com o Ember, um serviço de transmissão de música capaz de suportar milhões de usuários.

O Núcleo do Ember foi criado pensando em um aspecto do desenvolvimento web que irritava seus fundadores. Olhando para o cenário de framework JavaScript, os autores do Ember queriam solucionar algumas falhas que percebem em outros frameworks. Eles sentiram que a capacidade de marcar e compartilhar URLs na web tornou-se mais um recurso de estrutura secundária. O roteamento está sendo visto como em segundo plano, por isso eles o tornaram prioridade no Ember.js.

Além disso, a abordagem popular do model-view-controller (MVC) para frameworks back-end como Rails e .NET não agradava a equipe do Ember. Outras estruturas de MVC JavaScript tendem a se concentrar na View, com os aspectos do Model e do Controller (ferramentas de dados e back-end) mais como segundo plano. A equipe do Ember queria abordar essas questões no Front-End e fornecer uma sensação mais semelhante a uma área de trabalho e que fosse mais fácil de trabalhar.

Embora possa não ter tanta visibilidade quanto o AngularJS ou BackboneJS, o Ember provou seu valor e tem sido usado por desenvolvedores em empresas como Zendesk, LivingSocial, Yahoo !, Timbuk2 e Square.


Do ponto de vista de um desenvolvedor, aqui estão algumas razões para amar a estrutura do Ember.

  1. Com a ajuda do transpiler de JavaScript Babel, o Ember permite que os desenvolvedores usem os futuros padrões de JavaScript e os transpilam para uso nos navegadores de hoje.
  2. “Convenção acima da configuração”. O Ember tem boas práticas bem definidas sobre como é estruturado. Isso significa que os desenvolvedores podem se concentrar mais na funcionalidade de suas aplicações e recursos únicos, e menos em reinventar a roda com código tedioso. Há mais construções e menos técnicas. Simplificando, Ember.js é construído para produtividade e suas convenções são o núcleo disso. É projetado com os desenvolvedores em mente, com muitas APIs incríveis para ajudá-los a obter aplicativos construídos de forma rápida.
  3. Ember é o WordPress do JavaScript. Enquanto o Ember é mais novo e menor em termos de base de usuários, a equipe principal está absolutamente comprometida com a compatibilidade com versões anteriores. A compatibilidade com versões anteriores é uma filosofia de fazer alterações em um software através de novas versões, mas nenhuma alteração que faria com que as versões mais antigas parem de funcionar – o sistema de gerenciamento de conteúdo do WordPress permanece e é extremamente bom. As principais atualizações de versão no Ember removem as depreciações, mas não adicionam novos recursos com alterações que quebrarão aplicativos usando versões mais antigas do framework.
  4. Modelos Ember. Construído naquela linda UI são os modelos do Ember, que são escritos com a linguagem de modelos do Handlebars. Handlebars é nomeado pelo uso de suportes de duas chaves “{ }” e permite que os desenvolvedores usem menos código. Os modelos criam muitos recursos possíveis no Ember, como componentes, tomadas e expressões. As placas também são atualizadas automaticamente se alguma coisa mudar nos dados subjacentes. Isso ocorre porque dentro da arquitetura MVC do Ember, seus modelos são suportados por modelos (o M do MVC ou a camada de dados) e eles suportam a ligação de dados. As atualizações para o modelo são imediatamente refletidas no modelo, sem trabalho extra.
  5. com. Este é o repositório de plugins do Ember, contribuído pela comunidade de desenvolvedores Ember.js. Tem tudo que você precisa. Precisa de um módulo de autenticação? Basta executar “$ ember install ember-simple-auth” e você está fazendo 90%. Outros plugins na biblioteca addons incluem ferramentas para APIs JSON, cache, solicitações AJAX e funcionalidades de preenchimento automático.
  6. Ember-CLI. Ember e Ember-CLI são duas coisas diferentes inteiramente, mas nenhuma delas seria totalmente total sem a outra. O Ember-CLI é um utilitário de linha de comando que acompanha a pilha de software da estruturo Ember. Para o não desenvolvedor, uma CLI ou uma interface de linha de comando, é uma interface visual simples que permite aos humanos interagir com o sistema operacional de um computador. O Ember-CLI é um foguete de produtividade, com suporte para ferramentas como o CoffeeScript, Handlebars, MENOS e Sass. O Ember também vem com a opção de usar outros componentes de sua pilha de software, incluindo o Ember Data, uma biblioteca de dados e o Ember Inspector, uma extensão de teste para depurar aplicativos.

Cursos gratuitos de JavaScript para iniciantes

Até onde sei, estudar JavaScript não está incluso em cursos de CC, nem em cursos técnicos (quando muito um basicão para web designers). Por isso, estudar e achar cursos acaba ficando a critério daqueles que querem aprender a programar com essa linguagem.

Acredito que não seja somente comigo, mas quando quero aprender uma tecnologia nova, prefiro não investir dinheiro antes de saber se realmente vale apena me aprofundar no conhecimento. Com o fim de ajudar que está começando ou migrando, estou colocando aqui uma lista de cursos Grátis e material de JavaScript para iniciantes.

Udacity – JavaScript básico

Segundo eles: “Neste curso, você vai explorar a linguagem de programação JavaScript, criando uma versão interativa do seu currículo. Você vai aprender os fundamentos de programação JavaScript que você precisa enquanto a constrói novos elementos e seções para melhorar o seu currículo.”

 

W3Cx – JavaScript Introduction (Ingles)

Ótimo curso feito pela equipe da W3C (não confundir com W3schools). Nele, além do JavaScript básico, é visto várias coisas que se tornam necessárias para aqueles que precisaram trabalhar com aplicações web
Continue lendo “Cursos gratuitos de JavaScript para iniciantes”

Módulo para criação de tags e componentes

[download id=”390″]

Introdução

Nesse artigo serão mostradas funções que podem ser utilizadas para a criação de componentes HTML. O projeto será uma versão simplificada de uma biblioteca que estou montando para agilizar o desenvolvimento e gerenciamento de objetos criados dinamicamente.

Como requisito, você precisa ter conhecimentos básicos de JavaScript e HTML5, acesso a biblioteca CSS w3.css e um navegador atualizado que aceite o básico do ES6.

  • Criando as Tags básicas

    Como você deve saber, o JavaScript oferece uma função que permite a criação de qualquer tag. Basta fornecer corretamente o nome da tag como uma string por parâmetro que a função retornará o elemento para que você possa manipulá-lo. Segue abaixo um exemplo:

    document.createElement("p");

    O código acima retorna um elemento do tipo paragrafo. Ele pode ser manipulado (adicionadas, classes, estilo, texto, etc..) da mesma maneira que os elementos da função getElementById() também podem ser manipulados. Mas ele é simples e dependendo das necessidades, você acabará tendo diversos trechos de código onde cria uma tag, adiciona classes e adiciona conteúdo. Para nos ajudar com isso, teremos as duas seguintes funções:

    function CriarElementoComClasse(nomeTag, listaDeClasses) {
        let element = document.createElement(nomeTag);
        if (listaDeClasses) {
            listaDeClasses.forEach(classe => {
                element.classList.add(classe);
            });
        }
        return element;
    }
    
    function CriarElementoComClasseTexto(nomeTag, listaDeClasses, texto) {
        let element = CriarElementoComClasse(nomeTag, listaDeClasses);
        element.innerHTML = texto;
        return element;
    }

     

    A primeira função recebe uma string com o nome da tag e uma lista de strings com o nome das classes que serão adicionadas. Ela cria o elemento, confere se a lista não é nula ou indefinida e a percorre adicionando as classes uma a uma.

    A segunda função faz o mesmo que a primeira, mas também adiciona texto dentro da tag. É importante notar que esta função depende da anterior e que texto talvez seja uma definição muito ampla pois foi utilizado a propriedade innerHTML que permite que sejam adicionadas mais coisas. Por enquanto vamos com a ideia de adicionar texto, isso a torna uma boa candidata para criar <span>, <p>, <strong>, stc…

  • Criando Links e Imagens

    Como a parte simples e mais abstrata já foi feita, agora iremos implementar funções que nos auxiliaram a criar mais rapidamente tags de imagens e para links de hipertexto. Segue abaixo o código de implementação de ambas funções

    function CriarImagemCompleta(src, imgClasses, imgAlt = "imagem") {
        let element = CriarElementoComClasse("img", imgClasses);
        element.alt = imgAlt;
        element.src = src;
        return element;
    }
    
    function CriarLinkCompleto(link, linkClasses, texto) {
        let element = CriarElementoComClasseTexto("a", linkClasses, texto);
        element.href = link;
        return element;
    }

    Após analisar o código você poderá notar que ambas funções reutilizam as rotinas que criamos anteriormente, sendo que apenas implementamos o código que falta para que a criação de tag de imagem e link possam ser implementadas sem precisarmos ficar repetindo o código adicional que cada uma precisa toda vez que precisarmos cria-las.

  • Anexando diversos elementos juntos

    Até agora vimos 4 funções que nos permitem criar alguns componentes que podem ser bem úteis. No entanto, se você trabalha com códigos mais extensos, coisas parecidas ou piores que o código abaixo podem aparecer

    let umaDiv = CriarElementoComClasse("div", ["classe1","classe2","classe3"]);
    let umaDiv2 = CriarElementoComClasse("div",["classe1","classe2","classe3"]);
    let umSpan = CriarElementoComClasseTexto("span", ["classe2","classe2","classe3"],"Lorem Ipsum"); 
    let umSpan2 = CriarElementoComClasseTexto("span", ["classe2","classe2","classe3"],"Lorem Ipsum dolor"); 
    let umaImagem = CriarImagemCompleta("https://mundojs.com.br/images/logo.png", ["classe1","classe2","classe3"], "Logo MundoJS"); 
    let umLink = CriarLinkCompleto("https://mundojs.com.br", ["classe1","classe2","classe3"], "MundoJS"); 
    let umLink2 = CriarLinkCompleto("https://mundojs.com.br/artigos/index.html", ["classe1","classe2","classe3"], "MundoJS - artigos");
    
    umaDiv.appendChild(umSpan); 
    umaDiv.appendChild(umaImagem);
    umaDiv.appendChild(umLink); 
    umaDiv.appendChild(umaDiv2); 
    
    umaDiv2.appendChild(umSpan2); 
    umaDiv2.appendChild(umLink2);

    E quanto mais elementos tivermos, maior será o comprimento de código repetido. Por isso, iremos criar uma função ao qual passamos o elemento onde será feito o append e uma lista dos arquivos que serão adicionados a ele.

    function AppendElementos(pai, filhos) {
        filhos.forEach(element => {
            pai.appendChild(element);
        });
    }

    E isso nos permite transformar os diversos append anteriores em 2 linhas de código

    AppendElementos(umaDiv, [umSpan, umaImagem, umLink, umaDiv2]); 
    AppendElementos(umaDiv2, [umSpan2, umLink2]);
  • Criação de Thumbnail

    Por padrão, um thumbnail é uma área com uma imagem no topo seguida de um titulo e/ou texto descritivo. O interessante deste tipo de componente o fato que ele pode ser facilmente incorporado em páginas responsivas devido ao seu formato. Antes de continuarmos, no seu arquivo CSS será necessário adicionar as seguintes classes:

    .mundojs-media{
        overflow: hidden;
        display: block;
        text-decoration: none;
        -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
        box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    }

    Segue abaixo o código para implementarmos thumbnails utilizando nossas funções já criadas e a formatação fornecida pelo w3.css:

    function CriarThumbnail(linkArquivo, titulo, descricao, imagem) {
        let linkThumbnail = CriarLinkCompleto(linkArquivo, ["w3-third", "w3-margin-bottom", "mundojs-media"]);
        let divCard = CriarElementoComClasse("div", ["w3-card-4"]);
        linkThumbnail.appendChild(divCard);
    
        let imgThumbnail = CriarImagemCompleta(imagem, ["w3-image"]);
    
        let divConteudo = CriarElementoComClasse("div", ["w3-container", "w3-center"]);
        let h4Titulo = CriarElementoComClasseTexto("h4", null, titulo);
        let pDescricao = CriarElementoComClasseTexto("p", ["w3-small"], descricao);
    
        AppendElementos(divConteudo, [h4Titulo, pDescricao]);
        AppendElementos(linkThumbnail, [imgThumbnail, divConteudo]);
    
        return linkThumbnail;
    }

    Você poderá ver pelo código que ele sempre terá 1/3 do comprimento do container dele em telas maiores e 100% em telas de smartphones. Isso pode ser adaptado simplesmente trocando as classes fornecidas no elemento linkThumbnail.

  • Criado um Media Card

    Por último criaremos o media card, uma espécie de cartão que possui uma imagem em sua lateral. Ele é um estilo bem utilizado para a criação de objetos representando notícias, lista de notícias ou posts com o gravatar.

    function CriarMedia(linkArquivo, titulo, descricao, imagem) {
        function AreaImagem() {
            let divImagem = CriarElementoComClasse("div", ["w3-quarter"]);
            divImagem.appendChild(CriarImagemCompleta(imagem, ["w3-image"]));
    
            return divImagem;
        }
    
        function AreaConteudo() {
            let divConteudo = CriarElementoComClasse("div", ["w3-threequarter", "w3-container", "w3-margin-bottom"])
            let h2Titulo = CriarElementoComClasseTexto("h2", ["w3-xlarge"], titulo);
            let pDescricao = CriarElementoComClasseTexto("p", null, descricao);
            let linkArquivo = CriarLinkCompleto(linkArquivo, ["w3-btn", "w3-theme-l4", "w3-border", "w3-border-theme", "w3-round-large"], "Saiba Mais");
    
            AppendElementos(divConteudo, [h2Titulo, pDescricao, linkArquivo]);
    
            return divConteudo;
        }
    
        let divMedia = CriarElementoComClasse("div", ["w3-row", "w3-margin", "w3-border-bottom", "w3-border-theme-l4", "mundojs-media"]);
    
        AppendElementos(divMedia, [AreaImagem(), AreaConteudo()]);
    
        return divMedia;
    }

    Apesar de ser um pouco mais extenso que as funções anteriores, o resultado fica bem legal e pode ser utilizado facilmente para gerar uma lista de newsfeed, comentários de posts entre outras opções.

Conclusão

Como você pode ver, foi possível criar diversas ferramentas para auxiliar na montagem de itens na tela. Na minha experiência pessoal, eles não auxiliam muito se você utiliza um site estático. No entanto, caso você esteja trabalhando com dados dinâmicos ou simplesmente informações que se repetem muito, este tipo de técnica auxilia muita a reduzir o HTML e o JS comparado a criação manual sob demanda.

Como fazer um jogo em JavaScript

[download id=”285″]

Olá Pessoal do MundoJs !

Esse é um artigo/tutorial sobre mecanismos básicos de jogos em javascript

Será apresentada uma maneira bem básica de como fazer um jogo da cobrinha em javascript. É um jogo para ser jogado no browser/navegador (chrome/firefox/explorer) mas não funciona em tablets e celulares porque precisa do teclado…

Vamos começar criando um arquivo .html em branco. E logo em seguida escrever um pouco de html:

<html>
<body>
    <div id=principal></div>
    <script>
        document.getElementById('principal').innerHTML='Daqui surge o jogo';
    </script>
</body>
</html>

Até aqui sem maiores surpresas… um simples arquivo sem muita complicação.

Logo em seguida vamos criar o tabuleiro por onde a cobra irá se movimentar:

<html>
<body>
    <div id=principal></div>
    <script>
    tabuleiro="<table align=center border=1>";
    for(x=0;x<10;x++){
        tabuleiro+="<tr>";
        for(y=0;y<10;y++)
            tabuleiro+="<td>"+x+"_"+y+"</td>";
        tabuleiro+="</tr>";
    }
    document.getElementById('principal').innerHTML=tabuleiro+"</table>";
    </script>
</body>
</html>

Vamos dar um id para cada celula do tabuleiro:

for(y=0;y<10;y++){
    tabuleiro+="<td id=td"+x+"_"+y+" style='width:30px; height:30px;'> </td>";
}

Vamos ‘pintar’ uma celula do tabuleiro:

document.getElementById('td3_3').style.background="#333333";

Vamos criar uma variavel cobra[] que armazena a coordenada (x,y) da cobra:

cobra=[5,0];
document.getElementById('td'+cobra[0]+'_'+cobra[1]).style.background="#333333";

Vamos fazer a cobra ‘andar’ com a função ‘setTimeout’:

function anda(){
    cobra[1]++;
    document.getElementById('td'+cobra[0]+'_'+cobra[1]).style.background="#333333";
    setTimeout('anda()',300);
}
anda();

Essa função setTimeout é a base do movimento em javascript. Existem alternativas mas essa é nativa e tem vantagens…

E vamos ‘apagar’ o rastro da cobrinha:

function anda(){
    document.getElementById('td'+cobra[0]+'_'+cobra[1]).style.background="#ffffff";
    cobra[1]++;
}

Vamos ‘interceptar/interpretar’ a tecla que o usuário aperta no teclado:

<body onKeyDown="pegadirecao(event.keyCode);">
function pegadirecao(tecla){
    alert(tecla);
}

Vamos criar uma variavel direcao que armazena/determina pra onde a cobra deve se mover:

direcao=2;
function pegadirecao(tecla){
    /*alert(tecla);*/
    if(tecla==37)direcao=0;
    if(tecla==38)direcao=1;
    if(tecla==39)direcao=2;
    if(tecla==40)direcao=3;
}

E dentro da função anda

if(direcao==0)cobra[1]--;
if(direcao==1)cobra[0]--;
if(direcao==2)cobra[1]++;
if(direcao==3)cobra[0]++;

vamos criar a maçã:

mx=parseInt(Math.random()*10);
my=parseInt(Math.random()*10);

E na função ‘anda()’

document.getElementById('td'+mx+'_'+my).style.background="#ff3333";

Vamos fazer a maçã ser gerada novamente:

if(mx==cobra[0]&&my==cobra[1]){
    mx=parseInt(Math.random()*10);
    my=parseInt(Math.random()*10);
    cobra[cobra.length]=[10,10];
}

Agora vem a parte mais sofisticada do jogo. Vamos transformar a variável cobra de um array para um array de arrays. Até agora a variavel cobra armazenava um ponto. A partir daqui essa variavel armazenará um array de pontos…

cobra=[[5,0]];
function anda(){
    document.getElementById('td'+cobra[cobra.length-1][0]+'_'+cobra[cobra.length-1][1]).style.background="#ffffff";
    if(mx==cobra[cobra.length-1][0]&&my==cobra[cobra.length-1][1]){
        mx=parseInt(Math.random()*10);
        my=parseInt(Math.random()*10);
        cobra[cobra.length]=[10,10];
    }
    if(direcao==0)cobra[0][1]--;
    if(direcao==1)cobra[0][0]--;
    if(direcao==2)cobra[0][1]++;
    if(direcao==3)cobra[0][0]++;
    document.getElementById('td'+cobra[0][0]+'_'+cobra[0][1]).style.background="#333333";
    document.getElementById('td'+mx+'_'+my).style.background="#ff3333";
    setTimeout('anda()',300);
}

Para fazer a cobra se movimentar devemos passar os valores de cada coordenada de cada ‘gomo’ da cobra para o ‘gomo de traz’:

for(x=cobra.length-1;x>0;x--){
    cobra[x][0]=cobra[x-1][0];
    cobra[x][1]=cobra[x-1][1];
}

Agora só falta fazer função que executará quando a cobra ‘morrer’:

vivo=true;
if(vivo)setTimeout('anda()',300);
else alert('Fim de jogo');
for(x=1;x<cobra.length;x++){
    if(cobra[0][0]==cobra[x][0]&&cobra[0][1]==cobra[x][1])vivo=false;
    if(cobra[0][0]<0||cobra[0][1]<0||cobra[0][0]>9||cobra[0][1]>9)vivo=false;
}

O código completo fica:

<html>
<body onKeyDown="pegadirecao(event.keyCode);">
<div id=principal></div>
<script>
    tabuleiro="<table align=center border=1>";
    for(x=0;x<10;x++){
        tabuleiro+="<tr>";
        for(y=0;y<10;y++)
            tabuleiro+="<td id=td"+x+"_"+y+" style='width:30px; height:30px;'> </td>";
        tabuleiro+="</tr>";
    }
    document.getElementById('principal').innerHTML=tabuleiro+"</table>";
    cobra=[[5,0]];
    direcao=2;
    mx=parseInt(Math.random()*10);
    my=parseInt(Math.random()*10);
    vivo=true;
    function anda(){
        document.getElementById('td'+cobra[cobra.length-1][0]+'_'+cobra[cobra.length-1][1]).style.background="#ffffff";
        if(mx==cobra[cobra.length-1][0]&&my==cobra[cobra.length-1][1]){
            mx=parseInt(Math.random()*10);
            my=parseInt(Math.random()*10);
            cobra[cobra.length]=[10,10];
        }
        for(x=cobra.length-1;x>0;x--){
            cobra[x][0]=cobra[x-1][0];
            cobra[x][1]=cobra[x-1][1];
        }
        if(direcao==0)cobra[0][1]--;
        if(direcao==1)cobra[0][0]--;
        if(direcao==2)cobra[0][1]++;
        if(direcao==3)cobra[0][0]++;
        for(x=1;x<cobra.length;x++)if(cobra[0][0]==cobra[x][0]&&cobra[0][1]==cobra[x][1])vivo=false;
        if(cobra[0][0]<0||cobra[0][1]<0||cobra[0][0]>9||cobra[0][1]>9)vivo=false;
        document.getElementById('td'+cobra[0][0]+'_'+cobra[0][1]).style.background="#333333";
        document.getElementById('td'+mx+'_'+my).style.background="#ff3333";
        if(vivo)setTimeout('anda()',300);
        else alert('Fim de jogo');
    }
    anda();
    function pegadirecao(tecla){
        /*alert(tecla);*/
        if(tecla==37)direcao=0;
        if(tecla==38)direcao=1;
        if(tecla==39)direcao=2;
        if(tecla==40)direcao=3;
    }
</script>
</body>
</html>

 

Construindo um slider e parallax com JavaScript

[download id=”257″]

Nesse artigo prático e rápido você verá como construir um slider utilizando apenas o JavaScript, sem precisar importar nenhuma biblioteca e ou editar o CSS fora das funções. O objetivo aqui é trabalhar os conhecimentos de manipulação do DOM e o básico de estrutura de dados.

Configurando o HTML

Então vamos começar. Primeiro é necessário preparar no HTML o local onde será definido slider. Qualquer TAG de bloco serve, mas para simplicidade e por boas práticas, vamos utilizar uma DIV com o ID igual a slider. O código JavaScript ficará separado, mas por se tratar de um exemplo rápido, vamos manter tudo dentro da mesma pasta (incluído as imagens que serão adicionadas).

<html>
<head>
</head>
<body>
  <div id="slider"><div>
  <script src="slider.js"><script>
</body>
</html>

Adicionando uma imagem de fundo

Certo, está área terá o local que utilizaremos como referência, mas neste exemplo, as imagens serão parte do plano de fundo, então além de definir qual imagem aparecerá, teremos que estabelecer um tamanho para ela. Então quando a janela estiver carregada, vamos chamar a função criarSlider() que no momento apenas colocará uma imagem de fundo com tamanho igual a 40% da altura da tela.

window.onload = function(){
  criarSlider();
}
 
function criarSlider(){
  let slider = document.getElementById("slider");
  slider.style.height = "40vh";
  slider.style.backgroundSize = "cover";
  slider.style.backgroundImage = "url(imagem1.jpg)";
}

Adicionando o efeito Parallax

Para fazermos esse efeito de forma fácil e prática, utilizaremos a propriedade “backgroundAttachment” e a definiremos como “fixed”. OBS.: Ainda existem navegadores que não dão suporte ao atributo “fixed” (confira https://caniuse.com/#search=background-att).

function criarSlider(){
  let slider = document.getElementById("slider");
  slider.style.height = "40vh";
  slider.style.backgroundSize = "cover";
  slider.style.backgroundImage = "url(imagem1.jpg)";
  /*Efeito Parallax*/
  slider.style.backgroundAttachment = "fixed";
}

Definindo uma lista de imagens

Com esse código já é possível rodar a tela inicial e você verá sua imagem ocupado todo o espaço da div e com a altura fixa e possui o efeito. No entanto, nada acontece. Para mudarmos isso, vamos utilizar a função JavaScript chamada setInterval() que fará uma ação fixa a cada intervalo de tempo.

Poderíamos definir as imagens que serão passadas de forma fixa, mas para dar mais flexibilidade, vamos coloca-las em um vetor para que uma quantidade indefinida de arquivos possa ser utilizada, reduzindo assim o retrabalho futuro (basta adicionar a nova imagem ao vetor).

Para esta sessão, serão necessárias 3 implementações

  • Adicionar o vetor no começo da função
let imagens = ["imagem1.jpg","imagem2.jpg", "imagem3.jpg"];
  • Substituir a backgroundImage pelo primeiro item do vetor
slider.style.backgroundImage = "url(" + imagens[0] + ")";
  • Adicionar uma variável de contador e a função setInterval() conforme abaixo
let i = 1;
  setInterval(function () {
    slider.style.backgroundImage = "url(" + imagens[i] + ")";
    i = i + 1;
    if (i === imagens.length) {
    i = 0;
  }
}, 3000);

Melhorando o efeito

Você deve ter notado que a troca de imagens está meio crua, apenas piscando rapidamente e alternado entre elas. Para deixar esse efeito mais suave, adicione uma transição entre elas conforme a linha abaixo (pode ser colocado abaixo do style.backgroundSize):

slider.style.transition = "all 400ms linear";

Melhorando o código

Agora temos um slider parallax com um efeito de transição de imagens melhorado. Mas nosso código permite montar apenas um slider por tela pois todas as variáveis foram montadas dentro da função. Vamos passar como parâmetros da função os valores do Id do slider, o vetor de imagens, se será parallax e o tempo de troca entre imagens. Com isso teremos uma função que permite fazer diversos sliders com configurações diferente entre eles e sem precisar alterar muito o código como você pode ver abaixo:

function criarSlider(slider, imagens, isParalalx, tempo){
  let slider = document.getElementById("slider");
  slider.style.height = "40vh";
  slider.style.backgroundSize = "cover";
  slider.style.backgroundImage = "url(" + imagens[0] + ")";
  slider.style.backgroundAttachment = "fixed";
 
  if (isParalalx) {
    slider.style.backgroundAttachment = "fixed";
  }
 
  let i = 1;
  setInterval(function () {
    slider.style.backgroundImage = "url(" + imagens[i] + ")";
    i = i + 1;
    if (i === imagens.length) {
    i = 0;
    }
  }, tempo);
}

Conclusão

O projeto apresentado já é funcional e poderia ser aplicado em qualquer website, mas caso você queira se desafiar, existem coisas que podem ser implementadas. As variáveis de configuração poderiam ser em apenas um objeto com os todos os parâmetros que possam ser configurados e valores padrões (default), poderiam haver conferencias para garantir que dados incorretos ou nulos não travem o slider entre outras possibilidades.

De toda forma, o código do projeto pode ser utilizado em qualquer website pois oferece todas as funcionalidades necessárias para a montagem de forma simples e rápida. Caso você tenha gostado deste artigo, por favor, compartilhe-o e deixe seu comentário. Se você achou um bug ou tem uma sugestão, por favor avise que atualizarei o código.

Como remover o Required de uma Tag com JavaScript

[download id=”239″]

Esta é uma forma fácil e rápida de remover o atributo required sem a necessidade de importar bibliotecas com o JQuery ou qualquer outra. Normalmente não existe motivo para remove-lo, ou em muitos casos este tipo de validação é feita no back-end, mas veremos um jeito simples e que permitirá o post de um form quando um condição ocorrer.

O código

Como mencionado anteriormente, utilizaremos um form abaixo para testarmos nosso exemplo:

<form method="post" style="border:1px solid black; padding:10px;">
  <label>Nome:</label>
  <input type="text" id="name" required/>
  <br/>
  <label>Telefone:</label>
  <input type="text" id="requiredInput" required/>
  <br/>
  <input type="submit"/>
</form>

Se você rodar o código acima e não adicionar nenhum valor no campo telefone, o form será impedido de enviar os dados pois o campo é obrigatório. Agora, após um tempo tornou-se necessário que certas pessoas não precisem enviar o telefone delas pois já são clientes, ou funcionários (mundo imaginário, você cria o motivo). Em nosso exemplo qualquer pessoa que se chamar “Pedro Silva” não precisará colocar o número de telefone. A função javascript que a acompanha pode ser bem simples quanto o código abaixo

function removeRequired() {
  if( document.getElementById("name").value === "Pedro Silva"){
    document.getElementById("requiredInput").removeAttribute("required");
  }
}

Tendo nossa condição definida, podemos começar a vincular o nosso código. Neste caso é importante lembrar que não adianta colocar o evento dentro do onsubmit do form, pois a validação ocorre antes disto. O melhor local que achei para fazê-lo é no onclick do próprio input utilizar para enviar este form.

<input onclick="removeRequired()" type="submit"/>

Conclusão

Como vocês podem ver, é fácil e rápido remover o required das tags html. O difícil é achar artigos em português que falem de como fazê-lo. Acredito que essa tarefa é tão simples que realmente não vale o peso de uma biblioteca para implementar essa funcionalidade, mas se você já a está usando para outras coisas e ela reduz ainda mais a complexidades, então ela é provavelmente o jeito mais correto do que o mencionado aqui.

Diferença de className, classList e setAttribute

A linguagem JavaScript nos permite manipular elementos HTML de diversas formas e algumas vezes precisamos montar componentes “on the fly” pois eles dependem de atualizações vindas de fontes externas, ações do usuário ou que o banco de dados finalmente termine de processar algum calculo monstruoso que aquele cliente disse ser fundamental.

Quando isso acontece, precisamos trabalhar para criar elementos que além de uteis sejam bonitos e com isso vem as implementações de CSS. Agora você que a passou por isso pode ter se deparado com a possibilidade de usar os métodos

  • Classname
  • Classlist.add
  • Setattribute

A performance

Mas qual é o melhor? Vale a pena ter um método para definir classes e um para definir atributos? Tendo isso em vista, resolvi pesquisar para saber qual seria a melhor opção. Segundo o site https://measurethat.net/Benchmarks/Show/54/0/classname-vs-setattribute-vs-classlist, alguém já havia se perguntado o mesmo. Eles fizeram o seguinte teste que rodei no Chrome, Edge e Firefox:

<div id="foo"></div>

className

var element = document.getElementById("foo");
var i = 1000;
while (i--) {
    element.className = "bar";
}

setAttribute

var element = document.getElementById("foo");
var i = 1000;
while (i--) {
    element.setAttribute("class", "bar");
}
classList
var element = document.getElementById("foo");
var i = 1000;
while (i--) {
    element.classList.add("bar");
}

Resultado em operações por segundo

Chrome

Firefox

Edge

Na prática

Mesmo sendo bem claro, o teste acima não é um absoluto, devemos levar em consideração outros fatores como manipulação, funcionalidades e boas práticas.

  1. className: Permite a manipulação das classes no formato string, nesse caso tendo uma string com todas as classes escritas dentro e permitindo a manipulação dos dados neste formato. Por ser uma funcionalidade antiga, é utilizado por diversos navegadores
  2. setAttribute: O set atribute simplesmente faz isso, define o valor dentro de um atributo. Existe o getAttribute que permite visualizar este valor, mas a manipulação é limitada a isso.
  3. classList: Coloca as classes dentro de uma lista para serem manipuladas de forma ordenada através de diversos métodos específicos. A nível de funcionalidade é a mais prática, mas além de ter uma performance inferior, não foi implementada em navegadores mais antigos.

Conclusão

Acredito que o className e o classList sejam os melhores candidatos. Se você precisa de performance e está apenas definindo e apagando classes, utilize o className. Agora se você tem um sistema que precisa procurar por classes dentro da tag ou adicionar apenas se não existe, poupe o esforço de criar uma lógica para isso e utilize o classList.

Como criar a tag para uma string

Essa é uma dica rápida para ajudar você a criar a tag HTML <a> com base em um link digitado dentro de uma string. Há alguns dias atrás tive esta duvida pois precisava ajudar a criar o link para as mensagens de texto que os clientes colocavam dentro de um sistema que estamos desenvolvendo. Então precisávamos fazer com que uma frase como:


Confira o site www.mundojs.com.br para mais informações, ou acesse nossa fanpage https://www.facebook.com/mundojs/ para receber mais noticias


Exibisse em tela da com os hiperlinks da seguinte forma:


Veja o site www.mundojs.com.br para mais informações, ou acesse nossa fanpage https://www.facebook.com/mundojs/ para receber mais noticias


Depois de pesquisar bastante por um solução que fosse A) inteligente e B) Eficiente, encotrei a seguinte função regex

function urlify(text) {
    let urlRegex = /(https?:\/\/[^\s]+)/g;
    return text.replace(urlRegex, function(url) {
        return '<a href="' + url + '">' + url + '</a>';
    })
    /* ou de forma mais resumida */
    /* return text.replace(urlRegex, '<a href="$1">$1</a>') */
}

let text = "Confira o site www.mundojs.com.br para mais informações, ou acesse nossa fanpage https://www.facebook.com/mundojs/ para receber mais noticias";
let html = urlify(text);

Com ela você poderá passar qualquer strings que você receberá seus links adaptados para que em uma pagina HTMl possa exibi-los corretamente.