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):

Estrutura de Dados com JavaScript: Deque (Fila duplamente encadeada)

A fila duplamente encadeada é basicamente como uma fila, exceto que você pode adicionar ou remover de qualquer lado. Agora que você está um pouco mais acostumado a como isso funciona, eu gostaria de tornar as coisas um pouco mais difíceis.

function Deque() {
    let contador = 0;
    let head = null;
    let tail = null;

    // Permite visualizar o valor armazenado na cabeça
    this.getHead = function() {
        if (head) {
            return head.dado;
        }

        return null;
    }

    // Permite visualizar o valor armazenado no final
    this.getTaill = function() {
        if (tail) {
            return tail.dado;
        }
        return null;
    }

    // Retorna o número de itens na fila
    this.Getcontador = function() {
        return contador;
    }

    // Permite definir a estrutura do nó fora de cada método.
    // Dessa forma, será necessário fazer apenas uma vez
    let Node = function(dado) {
        this.dado = dado;
        this.proximo = null;
    }

}

 

A fila duplamente encadeada terá muito mais métodos que o outro, com um total de 10, os que você já viu e:

DisplayHeadToTail(), DisplayTailToHead() AddHead(data), AddTail(data),RemoveHead() e RemoveTail().

DisplayHeadToTail():

Descrição:

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

this.DisplayHeadToTail = function() {
    if (head != null) {
        let arr = new Array();
        let atual = head;

        // enquanto houver um atual
        while (atual) {

            // ATENÇÃO: Para quem é novo no javascript, dê uma olhada. Você consegue adivinhar o que esse método faz?
            arr.push(atual.dado);
            atual = atual.proximo;
        }

        return arr;
    } else {
        return null;
    }
}

DisplayTailToHead():

Descrição:

Retorna os dados da fila duplamente encadeada do início ao fim (oposto ao anterior).

this.DisplayTailToHead = function() {
    if (head != null) {

        // Chama DisplayHeadToTail() e inverte ela.
        let arr = this.DisplayHeadToTail();

        // Este é um dos grandes métodos do JavaScript.
        return arr.reverse();
    } else {
        return null;
    }
}

AddHead():

Descrição:

Adiciona ao início (head) da fila duplamente encadeada.

this.AddHead = function(dado) {

    // Como você pode ver, agora nós precisamos declarar um novo nó
    let node = new Node(dado);

    node.proximo = head;
    head = node;

    // Se a lista está vazia:
    if (!tail) {
        tail = head;
    }

    contador++;
}

AddTail():

Descrição:

Adiciona ao final (tail) da fila duplamente encadeada.

this.AddTail = function(dado) {
    let node = new Node(dado);

    // Se a lista está vazia
    if (!head) {
        head = node;
    } else {
        tail.proximo = node;
    }

    tail = node;
    contador++;
}

RemoveHead():

Descrição:

Remove o início(head) da fila duplamente encadeada.

this.RemoveHead = function() {
    if (head) {
        // Se é o item final
        if (contador === 1) {
            head = null;
            tail = null;
        } else {
            head = head.proximo;
        }

        contador--;
    }
}

RemoveTail():

Descrição:

Remove o elemento final (tail) da fila duplamente encadeada:

this.RemoveTail = function() {
    if (head) {
        // Se não é o último item
        if (contador === 1) {
            head = null;
            tail = null;
        } else {
            let atual = head;

            // precisamos ir tão longe quanto os dois antes da última
            while (atual.proximo.proximo) {
                atual = atual.proximo;
            }

            tail = atual;
            tail.proximo = null;
        }

        contador--;
    }
}
  • DisplayHeadToTail():
  • DisplayTailToHead():
  • AddHead(dado):
  • AddTail(dado):
  • RemoveHead():
  • RemoveHead():

Gostou deste artigo? Comente abaixo!

Richard Feldman e o futuro da web.

Richard Feldman, na ReactiveConf em Praga, fez algumas previsões sobre o futuro da Web até 2025. Ele afirma que aposta em prever as evoluções de tecnologias atuais, como TypeScript e WebAssembly.

Apesar de o TypeScript estar evoluindo gradativamente, ainda há muitas reclamações em relação à sua verbosidade, que afeta a legibilidade do código-fonte. Mas Feldman afirma que o TypeScript será a escolha mais comum entre os desenvolvedores de projetos comerciais.

Com relação ao WebAssembly, Feldman sustenta que o futuro não seja guiado pelo WebAssembly por conta de seu desempenho aprimorado. Ele acredita que o WebAssembly permitirá a concorrência com as lojas e instaladores de apps.

Com relação ao gerenciamento de pacotes, Feldman afirma que o npm continuará relevante, mas que até o final de 2025, ocorrerá algum incidente de segurança, infectando pelo menos um pacote malicioso e afetando muitos desenvolvedores.

Feldman acredita que as linguagens de compilação para o JavaScript estarão crescendo, mas nenhuma de modo tão rápido quanto o TypeScript.

Fonte: https://www.infoq.com/news/2019/11/reactiveconf-2019-web-prediction/

Gostou desta notícia? Comente abaixo!

Stealthy Tool detecta Malware em JavaScript

Uma nova ferramenta de código aberto chamada VisibleV8 permite que os usuários rastreiem e registrem o comportamento dos programas JavaScript sem alertar os sites que os executam.

A ferramenta é executada no navegador Chrome e foi projetada para detectar programas maliciosos capazes de escapar dos sistemas de detecção de Malware existentes.

“Quando você acessa a maioria dos sites, seu navegador começa a executar os programas JavaScript do site imediatamente – e você tem pouca ou nenhuma ideia do que esse JavaScript está fazendo”, diz o co-autor Alexandros Kapravelos, professor assistente de ciência da computação na Universidade Estadual da Carolina do Norte.

“Os sistemas de detecção de Malware avançados de última geração dependem de fazer alterações no código JavaScript para ver como o código está sendo executado. Mas essa abordagem é facilmente detectada, permitindo que programas de Malware alterem seu comportamento, a fim de evitar serem identificados como maliciosos ”, diz ele.

“O VisibleV8 é executado no próprio navegador, registrando como o JavaScript é executado; não interage com o código e, como resultado, é muito mais difícil de detectar. “

O VisibleV8 salva todos os dados sobre como um site está usando JavaScript, criando um “perfil de comportamento” para o site. Os pesquisadores podem usar esse perfil e todos os dados de suporte para identificar sites mal-intencionados e as várias maneiras pelas quais o JavaScript pode comprometer navegadores da web e informações do usuário. Como o VisibleV8 consiste em apenas 600 linhas de código, dentre os milhões de linhas de código no Chrome, a ferramenta de software é relativamente fácil de manter atualizada. Essa é uma consideração importante, pois o Google atualiza o código do Chrome aproximadamente a cada seis semanas. O VisibleV8 também pode direcionar os comportamentos maliciosos mais prováveis ​​sem prejudicar o desempenho do navegador.

TypeScript: Adicionando description em um Enum

Dando continuidade ao meu artigo anterior: TypeScript: Enums, hoje eu irei demonstrar como criar uma descrição para cada um dos elementos de um enum, e como recuperar essa descrição a partir de suas chaves. Para isso, eu irei utilizar o enum criado no artigo anterior de dias da Semana.

Caso você não tenha lido o artigo anterior, segue o enum mencionando abaixo:

export enum DiaDaSemana {
    Segunda = 1,
    Terca = 2,
    Quarta = 3,
    Quinta = 4,
    Sexta = 5,
    Sabado = 6,
    Domingo = 7,
}

Conforme demonstrei no artigo anterior, nós podemos pegar os valores de um enum pela sua chave ou pelo seu valor.

Agora pensando em um cenário mais próximo do nosso dia dia e focando no enum acima, não seria mais interessante retornar : “Segunda-feira” ou “Terça-feira” … etc ?

Em outras linguagens como C# nós podemos utilizar as descriptions dos enums, mas e no TS como fazer isso?

Existem algumas formas, uma delas é com a utilização de um map. A seguir você tem um exemplo de criação de um map para retornar os dias da semana conforme mencionado acima.

export enum DiaDaSemana {
    Segunda = 1,
    Terca = 2,
    Quarta = 3,
    Quinta = 4,
    Sexta = 5,
    Sabado = 6,
    Domingo = 7,
}

export const DiaDaSemanaLabel = new Map<string, string>([
    ['Segunda', 'Segunda-feira'],
    ['Terca', 'Terça-feira'],
    ['Quarta', 'Quarta-feira'],
    ['Quinta', 'Quinta-feira'],
    ['Sexta', 'Sexta'],
    ['Sabado', 'Sábado'],
    ['Domingo', 'Domingo']
]);

Caso você tenha interesse em saber mais sobre o map, eu recomendo a leitura do seguinte artigo: [Dica rápida]TypeScript: map().

Agora para que possamos retornar a descrição do dia da semana, basta executar o trecho de código abaixo:

console.log(DiaDaSemanaLabel.get(DiaDaSemana[1]))

Resultado:

Bem simples né?

Dessa forma nós conseguimos mapear para que os nossos enums retorne um valor mais amigável para o nosso front.

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/typescript-adicionando-description-em-um-enum

Gostou deste artigo? Comente abaixo as suas dúvidas!

Angular decode payload JWT

Veja nesse artigo como decodificar o seu token JWT e ler o seu payload.

Dando continuidade aos meus artigos sobre Angular e JWT, hoje eu irei demonstrar como decodificar os dados de um token no lado do seu front.

Caso tenha interesse em ler os meus artigos anteriores sobre esse assunto, segue o link de cada um deles abaixo:

O objetivo desse artigo não sera demonstrar como configurar o JWT em um projeto angular, ele será rápido e objetivo demonstrado através de alguns trechos de código.

O primeiro passo será importar o pacote jwt-decode. Para isso, abra um terminal no seu computador, navegue até o seu projeto e execute o comando abaixo:

npm i jwt-decode --save

Agora execute o comando abaixo para criar serviço no seu projeto para ser responsável por decodificar o token:

ng g s shared/authToken

Em seguida atualize ele com o seguinte trecho de código:

import { Injectable } from '@angular/core';
import * as jwt_decode from 'jwt-decode';


@Injectable({
  providedIn: 'root'
})
export class AuthTokenService {
  public getToken(): string {
    return localStorage.getItem('token');
  }

  public decodePayloadJWT(): any {
    try {
      return jwt_decode(this.getToken());
    } catch (Error) {
      return null;
    }
  }
}

Analisando o trecho de código anterior, note que nós temos um método chamado getToken(), responsável por pegar o token do seu localStorage e um outro método chamado decodePayloadJWT() retornando any, esse método irá decodificar o token e retornar os seus dados de payload.

Obs.: Esse método está retornando any porque o payload pode variar de projeto para projeto, caso você já tenha um contrato definido de retorno o ideal será criar um class ou interface com os dados de retorno no lugar de any.

Bem simples né?

Agora você pode injetar o seu código nos seus componentes e receber os dados do seu token 😉

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/angular-decode-payload-jwt

Gostou deste artigo? Comente abaixo!