JavaScript completa 24 anos de idade

No dia 4 de dezembro de 2019, o JavaScript comemora seus 24 anos de existência. Neste mesmo dia, em 1995, a NetScape e a Sun Microsystems anunciaram o JavaScript, uma linguagem de script de plataforma aberta, para a criação e personalização de aplicativos em redes corporativas e Internet.

É uma linguagem de script fácil de usar, projetada para criar webapps que vinculam objetos e recursos em clientes e servidores. Foi projetada para ser usado por desenvolvedores web para que criassem scripts dinâmicos em execução no cliente ou servidor.

Com o JavaScript, podemos ter um formulário inteligente que executa cálculos de pagamento de empréstimos ou de câmbio diretamente no cliente em resposta à entrada do usuário. Uma página pode conter scripts JavaScript executados no cliente e servidor. No servidor, os scritps podem compor e formatar dinamicamente o conteúdo HTML com base nas preferências do usuário armazenadas em um banco de dados e no cliente.

“A natureza do JavaScript cliente-servidor, multi-fornecedor e multiplataforma é uma adaptação natural ao sistema de autoria da Web Vermeer FrontPage. O rastreamento de tecnologias da Web inovadoras e ativadoras é uma prioridade importante para a Vermeer, e estamos nos movendo rapidamente para incorporar o JavaScript na primeira página em produtos futuros.”

John R. Mandle

CEO da Vermeer Technologies

 

Basicamente, essas foram as palavras utilizadas pelos criadores do artigo original, publicado no lançamento do JavaScript, em 04 de dezembro de 1995.

Você pode ler o artigo original em:

https://web.archive.org/web/20070916144913/http://wp.netscape.com/newsref/pr/newsrelease67.html

Atualmente, a linguagem evoluiu muito em relação à quando foi lançada. Foram criados diversos frameworks e bibliotecas que auxiliam no desenvolvimento front-end, trazendo agilidade e uma rápida curva de aprendizado para os desenvolvedores. Podemos utilizar JavaScript no lado do servidor com Nodejs e utilizar diversos frameworks e bibliotecas como as atuais React, Angular e Vue, e também o jQuery para a apresentação no front.

Gostou dessa notícia? Comente abaixo!

Exercício fácil: DOM – Escrita

Neste exercício, iremos utilizar os conceitos de escrita no DOM para realizar a alteração de classes em elementos HTML. Será necessário conhecimento básico em leitura do DOM, HTML e CSS.

Exercício:

No arquivo HTML, temos itens com a classe azul e itens com a classe vermelho.

Faça o seguinte:

– inverta as classes (itens com azul terão a classe vermelho e vermelho terão a classe azul).

Utilize o HTML disponível a seguir para realizar o seu exercício:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .azul{
            color: blue;
        }

        .vermelho{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="azul">Item</li>
        <li class="vermelho">Item</li>
        <li class="azul">Item</li>
        <li class="vermelho">Item</li>
        <li class="azul">Item</li>
        <li class="vermelho">Item</li>
    </ul>
</body>
</html>

Dica:

  • Use o document.querySelectorAll() para obter uma lista de elementos;
  • Você precisará percorrer os elementos utilizando um laço de repetição;
  • Utilizando uma estrutura de condicionais, verifique as classes;
  • O uso do classList será útil;
  • Realize o seu exercício em um arquivo separado scripts.js e chame-o no seu index.html.
Resolução:
let listaElementos = document.querySelectorAll("li");
        
for (let elemento of listaElementos){
    if(elemento.classList == "azul"){
        elemento.classList.remove("azul");
        elemento.classList.add("vermelho");
    }else {
        elemento.classList.remove("vermelho");
        elemento.classList.add("azul");
    }
}

Gostou deste exercício? Achou fácil ou difícil? Resolveu de outra maneira? Conte para a gente!

Phaser.js #2 – Criando jogo Parte 1

Olá pessoal, nesta sequência de artigos, iremos criar um jogo utilizando a Phaser.js. É necessário que você conheça os procedimentos de instalação de servidores web e instalação do Phaser. Recomendo a leitura desta postagem, que é a primeira postagem da série Phaser.js. Você pode acessá-lo clicando aqui.

Vamos começar?

Primeiro, se faz necessário o download deste arquivo zip, que contém tudo o que você necessita para criar o jogo.

[download id=”3357″]

Passo 1:

Abra o arquivo part1.html no seu editor de código favorito. Você deverá ver um código parecido com este:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>Making your first Phaser 3 Game - Part 1</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">

    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };

    var game = new Phaser.Game(config);

    function preload ()
    {
    }

    function create ()
    {
    }

    function update ()
    {
    }

</script>

</body>
</html>

Este é a nossa configuração inicial. Muitas coisas serão inseridas nessa configuração, a medida que o nosso conhecimento em Phaser é expandido. Agora, nós definiremos o renderizador, as dimensões e uma cena padrão.

Uma instância de um objeto Phaser.Game é atribuída a uma variável local chamada game e o objeto de configuração é passado para ela. Isso inicia o processo de dar vida ao seu jogo em Phaser!

Renderização:

A propriedade type pode ser Phaser.CANVAS, Phaser.WEBGL ou Phaser.AUTO. Este é o contexto de renderização que você deseja usar no seu jogo. O valor recomendado é o Phaser.AUTO, que usa automaticamente o WebGL, mas se não houver suporte do navegador, ele usará o Canvas. O elemento criado será anexado ao documento no momento que o script for chamado.

Dimensões:

As propriedades width e height definem a largura e altura do seu elemento tela, respectivamente. Usaremos 800 x 600 pixels.

Cena:

Vamos carregar os assets que precisamos para o nosso jogo. Faremos isso criando chamadas para o Phaser dentro de uma função chamada preload. O Phaser procurará automaticamente essa função quando carregar a tela e carregará qualquer coisa que esteja definida dentro dela.

Insira o seguinte código dentro de sua função preload vazia:

function preload ()
{
    this.load.image('sky', 'assets/sky.png');
    this.load.image('ground', 'assets/platform.png');
    this.load.image('star', 'assets/star.png');
    this.load.image('bomb', 'assets/bomb.png');
    this.load.spritesheet('dude', 
        'assets/dude.png',
        { frameWidth: 32, frameHeight: 48 }
    );
}

Isso irá carregar 5 assets: 4 imagens e uma folha de sprites. O Primeiro parâmetro, chamado de asset key (por exemplo, “sky”, “bomb”), é uma sequência que é um link para o material carregado, e é o que você usará no seu código ao criar objetos do jogo.

Exibindo o background:

Para exibir o background do seu jogo, colocaremos o seguinte código dentro da função create:

this.add.image(400, 300, 'sky');

Isso irá carregar um background de um céu azul. Você pode encontrar isso feito no seu arquivo part3.html.

Sua saída deve ser assim:

Você pode ler o artigo original em inglês neste link: http://phaser.io/tutorials/making-your-first-phaser-3-game/part1

Está gostando destes artigos sobre Phaser? Siga acompanhando e comente abaixo!

Phaser.js #1 – Intro

Nesta série de artigos iremos abordar o desenvolvimento de jogos utilizando o Phaser.js, uma ferramenta para criação de jogos JavaScript. Abordaremos um ambiente para que você crie seus jogos. Nisto, se inclui a execução de um servidor Web local e obtenção da versão mais recente do Phaser.

Por que utilizar um servidor web local?

Quando você solicita algo na web, você usa o protocolo http, que garante que você acesse apenas os arquivos aos quais está destinado. Se você utiliza o file:// para arquivos locais, não há segurança a nível de servidor.

O seu jogo precisará carregar alguns recursos, como imagens, arquivos de áudio, JSON e alguns arquivos JavaScript. Ele precisa ter a segurança necessária para ficar livre de possíveis ataques. Por isso utilizaremos o servidor web, que disponibiliza o http://

Recomendo o uso do XAMPP, que possui uma configuração fácil.

Qual editor de código usar?

Realmente, fica a seu critério. Utilize o seu editor de texto favorito. Particularmente, eu prefiro o Visual Studio Code.

Fazendo o download do Phaser:

Você pode fazer o download diretamente da página de downloads.

npm:
npm install phaser@3.21.0
cdn:
<script src="//cdn.jsdelivr.net/npm/phaser@3.21.0/dist/phaser.js"></script>
<script src="//cdn.jsdelivr.net/npm/phaser@3.21.0/dist/phaser.min.js"></script>

Instalados o servidor, editor de texto e baixado o Phaser? Então vamos começar!

Criando um Olá Mundo!

Chegou a hora de criarmos algo e verificarmos se tudo está funcionando perfeitamente. Certifique-se de descobrir o webroot do seu servidor e crie um arquivo index.html dentro dele. Insira o seguinte código:

<! DOCTYPE html>
<html>
<head>
    <script src = "https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"> </script>
</head>
<body>

    <script>
    var config = {
        tipo: Phaser.AUTO,
        largura: 800,
        altura: 600,
        física: {
            padrão: 'arcade',
            videogames: {
                gravidade: {y: 200}
            }
        }
        cena: {
            preload: preload,
            criar: criar
        }
    };

    var game = novo Phaser.Game (config);

    função preload ()
    {
        this.load.setBaseURL ('http://labs.phaser.io');

        this.load.image ('céu', 'ativos / céu / espaço3.png');
        this.load.image ('logo', 'assets / sprites / phaser3-logo.png');
        this.load.image ('vermelho', 'ativos / partículas / red.png');
    }

    função create ()
    {
        this.add.image (400, 300, 'céu');

        partículas de var = this.add.particles ('red');

        var emissor = particulas.createEmitter ({
            velocidade: 100,
            escala: {início: 1, final: 0},
            blendMode: 'ADD'
        });

        var logo = this.physics.add.image (400, 100, 'logo');

        logo.setVelocity (100, 200);
        logo.setBounce (1, 1);
        logo.setCollideWorldBounds (true);

        emitter.startFollow (logo);
    }
    </script>

</body>
</html>

Inicialize o seu servidor, e acesse o endereço 127.0.0.1/index.html.

Você deve ver uma saída parecida com isso:

Detalhe: é uma animação xD

Se ocorreu algum erro, ou a animação não está sendo visualizada, abra as suas opções de desenvolvedor do navegador e verifique o que o console está logando.

Onde consigo mais exemplos?

Você pode verificar os exemplos em Phaser aqui. Você encontrará um editor de código ativo, para modificar o código e executá-lo em tempo real para ver as alterações imediatamente.

Você também pode fazer o download de todos os exemplos no repositório do github. Você encontrará todos os recursos para uso em seus próprios jogos.

Você pode ler o artigo original em inglês neste link: https://phaser.io/tutorials/getting-started-phaser3/index

Gostou deste artigo? Fique atento à sequência que logo será lançada 😀

Exemplo Prático: Node.js

Neste tutorial, irei demonstrar como criar a sua primeira aplicação Olá Mundo em node.js. Para instalar o node.js na sua máquina, confira o link a seguir: https://nodejs.org/en/

Vamos começar!

Você pode realizar este tutorial utilizando Windows, Linux ou Mac. Você precisará:

  • Criar uma pasta chamada projects dentro do seu diretório de usuário. Você pode fazer isso utilizando os seguintes comandos no Windows:
> mkdir %USERPROFILE%\projects
> cd %USERPROFILE%\projects
  • No Linux e Mac:
$ mkdir ~/projects
$ cd ~/projects

Agora, acesse a pasta e crie um arquivo chamado ola-mundo.js dentro da sua pasta projects. O próximo passo é inserir este código dentro do seu arquivo olamundo.js. Use o seu editor de texto favorito para tal ação.

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Ola Mundo!\nBem vindo ao nodejs');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

O que fazer agora?

Você já tem tudo preparado para sua primeira aplicação simples em node. O próximo passo é:

  • Com o seu terminal aberto, e na pasta projects, escreva o seguinte comando para executar o seu servidor node:
$ node ola-mundo.js

Observação:

Não utilize o “&” e “<” nos seus comandos, eles são apenas um indicativo de início de comando. Eles estão lá apenas para replicar como apareceria no seu terminal.

Feito isto, a sua saída no terminal deve ser algo parecido com isso:

Server running at http://127.0.0.1:3000/

Isso significa que o seu servidor está rodando no endereço 127.0.0.1:3000.

Para acessá-lo, abra o seu navegador e, na url, digite este endereço: http://127.0.0.1:3000/

O seu navegador deve estar mostrando em tela algo como isso:

Se o seu navegador mostrar a frase “Ola Mundo! Bem vindo ao node.js”, significa que o seu servidor está funcionando.

Parabéns, a sua primeira aplicação Node.js já está funcionando!

Para adquirir mais conhecimentos, recomendo que leia a documentação, disponível em: Documentação Node.js

Gostou deste artigo? Comente abaixo!

Exercício fácil: DOM – Leitura

Neste exercício, armazenaremos elementos HTML em variáveis JavaScript! Para fazer isso, você pode usar o document.getElementById(), document.querySelector(), entre outros.

Exercício:

Crie as seguintes variáveis:

– titulo : conterá a primeira tag h1;

– descricao : conterá a tag com id = descricao;

– listaItens : conterá todas as tags com classe = itens;

Utilize o seguinte HTML como base para o seu exercício:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Titulo</h1>
    <p>subtítulo</p>
    <br/>
    <p id="descricao">Uma lista de itens</p>
    <br/>
    <ul>
        <li>Seus itens</li>
        <ol>
            <li class="itens">Livro</li>
            <li class="itens">Caneta</li>
            <li class="itens">Telefone</li>
            <li class="itens">Carteira</li>
        </ol>
        <li>Outros Itens</li>
        <ol>
            <li>N/A</li>
        </ol>
    </ul>
</body>
</html>
Dicas importantes:
  • Use a conotação (“.elemento”) para capturar por classe;
  • Use a conotação (“#elemento”) para capturar por ID;
  • Crie suas variáveis em um arquivo scripts.js;
  • Chame o seu arquivos scripts.js no seu arquivo index.html.
Confira o seu resultado:
let titulo = document.querySelector("h1");
let descricao = document.querySelector("#descricao");
let listaItens = document.querySelectorAll(".itens");

Gostou deste exercício? Teve dificuldade? Realizou de maneira diferente? Comente abaixo!

Dica rápida: Livros para aprender JavaScript

Olá, neste artigo irei mostrar três livros que possuem ótimas referências e excelente didática para você aprender JavaScript!

Existem diversas formas de aprender programação atualmente. Cursos, artigos, diversos sites e grupos específicos de programação. Você até mesmo consegue aprender a programar em vídeos disponíveis no YouTube, além de ter a possibilidade de aprender a linguagem diretamente na documentação. Mas nada como o bom e velho livro, não é mesmo?

Vamos lá:

Use a cabeça! Programação JavaScript.

Este livro ensina tudo sobre a linguagem JavaScript, desde os tópicos mais básicos até os mais avançados. Isto inclui: objetos, funções e o DOM. No livro, você jogará jogos e resolverá muitos quebra-cabeças para interagir com o JavaScript de diversas formas. Você irá escrever códigos de verdade para que possa criar suas próprias aplicações web. O livro utiliza um formato visualmente rico.

Editora: Alta Books

 

JavaScript: O Guia Definitivo

O guia definitivo de JavaScript oferece uma descrição muito ampla de funcionalidades do JavaScript, bem como de APIs JavaScript client-side definida pelos navegadores. Abrange o ECMAScript 5 e HTML5. É recomendado para quem deseja aprender a linguagem JavaScript e para programadores JS que já dominam a linguagem e querem ampliar seus conhecimentos.

Editora: Bookman

 

Estrutura De Dados e Algoritmos Com JavaScript

Este livro ensina a base de estrutura de dados e algoritmos para você aprender a escrever códigos complexos e eficazes utilizando os mais novos recursos da ES. O livro começa abordando o básico sobre JavaScript e apresenta as estruturas de dados mais importantes, como arrays, filas, pilhas e listas encadeadas. Você terá conhecimento sobre tabelas hash e você também terá compreensão de como os grafos são utilizados. Aprenderá a ordenar as estruturas de dados usando algoritmos como bubble sort, merge sort, quick sort, entre outros; E também a realizar pesquisas de elementos em estruturas de dados usando a ordenação sequencial e a busca binária.

Gostou deste artigo? Comente abaixo outros livros que você indica!

Exercício fácil: Multiplicando o Vetor

A função abaixo receberá 2 parâmetros, um vetor com apenas valores numéricos e um número.

Faça com que ela multiplique cada item do vetor pelo segundo parâmetro apenas se o item do vetor for maior que 5. Após isso, ela deve retornar o novo vetor.

Exemplo:

  • calcularVetor([1,5,10, 20], 2) retornará [2, 5, 20, 40] pois só 10 e 20 são maiores que 5.
  • calcularVetor([1,3,4, 5], 10) retornará [1, 3, 4, 5] pois nenhum é maior que 5.
  • calcularVetor([15, 20, 25, 30], 3) retornará [45, 60, 75, 90].

Utilize esta estrutura para realizar o exercício:

function calcularVetor(vetor, numero){
    //Seu código aqui
}

Continue lendo “Exercício fácil: Multiplicando o Vetor”

Estrutura de Dados com JavaScript: Lista Duplamente Encadeada

A lista duplamente encadeada funciona pelo mesmo princípio que a lista encadeada. No entanto, cada nó contém uma referência ao nó anterior e ao próximo, se esse nó estiver disponível. Isso é particularmente útil quando é necessário viajar para trás e para frente.

Nossa lista Duplamente Encadeada será o desafio final e o mais longo com 9 métodos adicionais:

DisplayAllBackwards() DisplayAt(index), AddFirst(data),AddLast(data), Add(data, index), RemoveFirst(), RemoveFirst(), RemoveAt().

DisplayAll():

Descrição:

Retorna um array com os dados, ou se está vazio, retorna null.

this.DisplayAll = function() {
    // Na maioria das vezes, head não será nulo, então vamos começar com isso agora
    if (head) {
        let arr = new Array();
        let atual = head;
        for (let i = 0; i < contador; i++) {
            arr[i] = atual.dado;
            atual = atual.proximo;
        }
        return arr;
    } else {
        return null;
    }
}

DisplayAllBackwards():

Descrição:

Retorna um array com os dados do tail ao head ou, se vazio, retorna nulo. Dê uma olhada neste método e pense em como seria difícil implementá-lo em uma lista encadeada simples.

this.DisplayAllBackwards = function() {
    if (head) {
        let arr = new Array();
        let atual = tail;
        for (let i = 0; i < contador; i++) {
            arr[i] = atual.dado;
            atual = atual.anterior;
        }
        return arr;
    } else {
        return null;
    }
}

DisplayAt():

Descrição:

Funciona da mesma forma de uma lista encadeada simples.

this.DisplayAt = function(index) {
    // verifica valores fora dos limites
    if (index > -1 && index < contador) {
        let atual = head;
        let i = 0;

        // não fui eu, é da nczonline (veja fonte).
        // É uma maneira diferente de implementar o FOR que estamos usando
        // e queria que todos tivessem a chance de conhecê-lo.
        while (i++ < index) {
            atual = atual.proximo;
        }

        return atual.dado;
    } else {
        return null;
    }
}

AddFirst():

Descrição:

Adiciona no início da lista duplamente encadeada.

this.AddFirst = function(dado) {
    // Cria um novo nó
    let node = new Node(dado);
    node.proximo = head;

    head = node;

    //Se a lista está vazia
    if (contador === 0) {
        tail = head;
    } else {
        //Não se esqueça do nó anterior. Ele precisa ser referenciado
        head.proximo.anterior = head;
    }

    contador++;
}

AddLast():

Descrição:

Adiciona ao final da lista duplamente encadeada.

this.AddLast = function(dado) {
    let node = new Node(dado);
    node.anterior = tail;

    if (contador === 0) {
        head = node;
    } else {
        tail.proximo = node;
    }

    tail = node;

    contador++;
}

Add():

Descrição:

Adiciona um item em uma posição específica. Dica: desenhe o processo se necessário. Não é tão simples quanto você imagina.

this.Add = function(dado, index) {
    // verifica valores fora dos limites
    if (index > 0 && index < contador) {

        let node = new Node(dado);
        let atual = head;
        let i = 0;

        // encontre o local certo
        while (i++ < index) {
            atual = atual.proximo;
        }

        atual.anterior.proximo = node;
        node.proximo = atual;
        node.anterior = atual.anterior;
        atual.anterior = node;

        contador++;
    } else if (index < 1) {
        this.AddFirst(dado);
    } else {
        this.AddLast(dado);
    }
}

RemoveFirst():

Descrição:

Remove o primeiro item.

this.RemoveFirst = function() {
    if (head) {

        head = head.proximo;
        contador--;
        //Se há apenas um item
        if (contador === 0) {
            tail = null;

        } else {
            // Não se esqueça do nó anterior. Ele também precisa que o conjunto de referência seja nulo.
            head.anterior = null;

        }
    }
}

RemoveLast():

Descrição:

Remove o último item.

this.RemoveLast = function() {
    if (head) {
        // existe apenas um item
        if (contador === 1) {
            head = null;
            tail = null;
        } else {
            tail.anterior.proximo = null;
            tail = tail.anterior;
        }

        contador--;
    }
}

RemoveAt():

Descrição:

Remove um item de uma posição específica.

this.RemoveAt = function(index) {
    // verifica valores fora dos limites
    if (index > 0 && index < contador - 1) {

        let atual = head;
        let i = 0;

        // encontre o local certo
        while (i++ < index) {
            atual = atual.proximo;
        }

        atual.anterior.proximo = atual.proximo;
        atual.proximo.anterior = atual.anterior;

        contador--;
    } else if (index < 1) {
        this.RemoveFirst();
    } else {
        this.RemoveLast();
    }
}
  • DISPLAYALL():
  • DISPLAYALLBACKWARDS():
  • DISPLAYAT(INDICE):
  • ADDFIRST(DADO):
  • ADDLAST(DADO):
  • ADD(DADO,INDICE):
  • REMOVEFIRST():
  • REMOVELAST():
  • REMOVEAT(INDICE):