Bibliotecas no JavaScript – Como Adicionar em seus Projetos

Aprenda com esta aula como adicionar bibliotecas no JavaScript e otimizar seus projetos Javascript sem precisar criar tudo sozinho do zero!

Bibliotecas no JavaScript são pacotes de código prontos que resolvem parte do seu projeto sem você precisar programar tudo do zero. Para adicionar uma, procure o pacote no site do NPM, leia a documentação e inclua o link da CDN em uma tag script no fim do body. Feito isso, as funções da biblioteca já ficam disponíveis na página.

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

O que você aprende neste vídeo

Resposta rápida: A aula ensina a incluir uma biblioteca de gráficos num projeto HTML puro: pesquisar o pacote no site do NPM, ler a documentação e escolher a instalação via CDN. Mostra por que a tag <script> da biblioteca vai no fim do <body> (evita travar o carregamento) e por que separar o código em main.js, importado depois dela.

Neste vídeo (12 min):

• 1:05 - O que é uma biblioteca de código: um pacote pronto, feito por outro desenvolvedor, que você importa para não reprogramar do zero
• 2:20 - Criação da página inicial: index.html no VSCode com o atalho de exclamação mais Enter, e visualização ao vivo pelo Live Server
• 4:05 - Pesquisa no site do NPM (Node Package Manager) por uma biblioteca de gráficos
• 5:20 - Na página da biblioteca escolhida: leitura da documentação e opção de instalação por CDN, o link que baixa o código pronto
• 6:40 - Por que a tag <script> da biblioteca vai no fim do <body>: o navegador lê o HTML de cima para baixo e trava a página até baixar o script
• 8:10 - O HTML pede um elemento <canvas> com um ID específico, para a biblioteca desenhar o gráfico nele
• 9:05 - Separar o código da biblioteca num arquivo próprio, main.js, em vez de deixar tudo dentro da tag <script> do HTML
• 9:35 - Uma segunda tag <script src="main.js"> importa esse arquivo para dentro da página
• 10:15 - Resultado: o gráfico de exemplo aparece renderizado na página, porque o main.js usa funções que vieram da biblioteca importada antes dele

Trechos do vídeo:

• Colocar a tag <script> da biblioteca no fim do <body>, e não no topo, evita que o navegador trave a leitura da página no download do arquivo antes de desenhar o resto do HTML
• CDN é a sigla de rede de distribuição de conteúdo: o link aponta para um arquivo hospedado fora do seu projeto, e o navegador baixa esse código ao carregar a página
• NPM é o gerenciador de pacotes do Node, e funciona como uma central onde desenvolvedores publicam as bibliotecas de JavaScript disponíveis para qualquer projeto
• Separar o JavaScript num arquivo próprio, como main.js, importado por uma segunda tag <script src="main.js">, evita misturar HTML com um bloco solto de código dentro da página
• A biblioteca pede um elemento <canvas> com um ID específico no HTML: é nele que o gráfico é desenhado depois que o script principal roda

Como Adicionar Bibliotecas no JavaScript

Hoje, vou te ensinar como adicionar bibliotecas no JavaScript! Vamos explorar o que são, como funcionam e como você pode utilizá-las para aprimorar os seus projetos em JavaScript.

As bibliotecas são pacotes de códigos prontos que podem ser utilizados para facilitar a construção dos seus projetos, evitando que você precise criar tudo do zero. Conhecê-las e saber aplicá-las é extremamente importante.

Nesta aula, iremos utilizar uma biblioteca de criação de gráficos como exemplo, e o Node Package Manager (NPM) para buscar a biblioteca necessária.

É fundamental que você acompanhe esta aula utilizando algum editor de códigos para praticar, o que facilitará a compreensão e o aprendizado dos conceitos que vamos abordar. Eu recomendo o uso do Visual Studio Code, que é o mesmo editor que utilizarei.

O que são Bibliotecas?

No JavaScript, as bibliotecas são pacotes de código que já estão prontos para serem utilizados. Elas são como caixas de ferramentas repletas de funcionalidades, que facilitam a criação de projetos, uma vez que não é necessário programar tudo do zero.

Em vez de desenvolver e programar todas as etapas do seu projeto, você pode simplesmente adicionar bibliotecas no JavaScript que já resolvem parte do que você precisa. Isso permite que você foque o seu tempo em otimizar a sua aplicação.

Criando o Arquivo HTML

Vamos começar nosso código abrindo o Visual Studio Code em uma pasta escolhida para o nosso projeto e criando o arquivo index.html, uma página HTML padrão.

Dentro do arquivo, vamos digitar ! e apertar Enter para que o VS Code crie a estrutura básica do nosso arquivo HTML.

JavaScript Impressionador

Como usar JavaScript em qualquer empresa e qualquer área, com exemplos totalmente aplicados à realidade do Mercado de Trabalho, seja para se tornar um Desenvolvedor Front End, Backend, Full Stack ou Mobile.

Começar agora

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

A partir dessa estrutura básica, faremos pequenas modificações, como alterar o title da página e adicionar um título dentro da tag body.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projeto do Daniel </title>
</head>
<body>
    <h1> Página experimental de gráficos do Daniel </h1>
</body>
</html>

Feito isso, vamos clicar sobre o arquivo e selecionar Open with Live Server para visualizar a nossa página em tempo real. Se essa opção não estiver disponível, verifique a aula de instalação e configuração do VS Code para o JavaScript.

Que irá abrir a nossa página criada.

Com isso, a estrutura básica da nossa página está criada. No entanto, como o próprio título sugere, ela espera exibir gráficos. E é aí que aprenderemos como adicionar bibliotecas no JavaScript.

Como Adicionar Bibliotecas no JavaScript

O primeiro passo para adicionar bibliotecas no JavaScript é acessar o site do NPM (Node Package Manager), que é um gerenciador de pacotes do Node. Busque no Google por NPM e acesse o primeiro site.

O site do NPM é uma plataforma onde os desenvolvedores publicam seus pacotes de código, ou seja, suas bibliotecas, disponibilizando-as para uso de todos.

Para nosso exemplo, vamos buscar dentro do site por “chart”, já que estamos procurando uma biblioteca para ajudar na construção de gráficos em JavaScript.

Vamos utilizar a biblioteca Chart.js como exemplo, pois ela é fácil e intuitiva de usar. Ao clicar nela, iremos para a página da biblioteca no site do NPM.

Dentro dessa página, encontraremos informações sobre a biblioteca e, o mais importante, a documentação. É através da leitura dessa documentação que poderemos compreender e aprender a utilizar melhor as funcionalidades da biblioteca.

Ao ler a documentação, encontraremos como instalar a biblioteca. Para nosso caso, vamos utilizar a CDN (Content Delivery Network ou Rede de distribuição de conteúdo), que é a mesma utilizada como exemplo no Getting Started da biblioteca.

A CDN funciona através da adição de um link no HTML. Esse link informará ao HTML que ele precisa baixar o código JavaScript disponível nesse link para que funcione corretamente e tenha acesso à biblioteca desejada.

E é esse o exemplo de instalação que encontramos dentro do Getting Started da documentação da biblioteca Chart.js. Podemos copiar o exemplo fornecido e adicionar ao nosso código.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projeto do Daniel </title>
</head>
<body>
    <h1> Página experimental de gráficos do Daniel </h1>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>
</html>

Adicionamos a tag <script> para instalar a biblioteca no final do body porque o HTML é lido pelo navegador de cima para baixo. Se adicionássemos no começo, o navegador leria essa linha primeiro, interpretaria e faria o download do código JavaScript contido nela. Se esse download levar muito tempo, isso poderia atrasar o carregamento da página deixando-a lenta.

Agora já temos acesso às funcionalidades da biblioteca em nossa página. Porém, seguindo as instruções da biblioteca, precisamos adicionar um elemento canvas ao nosso HTML. Vamos copiar o exemplo do modelo e adicionar em nosso código.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projeto do Daniel </title>
</head>
<body>
    <h1> Página experimental de gráficos do Daniel </h1>
    <div>
        <canvas id="myChart"></canvas>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>
</html>

Feito isso, vamos criar nosso arquivo JavaScript chamado main. Nele, vamos copiar o código JavaScript presente na documentação do Chart.js.

No exemplo da documentação, o código é colocado dentro de uma tag <script> no próprio HTML. No entanto, prefiro deixá-los em arquivos separados, um para o HTML e outro para o JavaScript, pois acredito que isso deixa a organização melhor.

const ctx = document.getElementById('myChart');

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

Agora que já criamos nosso código JavaScript, vamos retornar ao arquivo HTML e criar uma nova tag script com o endereço do arquivo JavaScript que acabamos de criar.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projeto do Daniel </title>
</head>
<body>
    <h1> Página experimental de gráficos do Daniel </h1>
    <div>
        <canvas id="myChart"></canvas>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="./main.js"></script>
</body>
</html>

Se abrirmos nossa página novamente com o Live Server, veremos que agora ela possui um gráfico sendo carregado.

A partir daqui, você pode personalizar e estilizar esse gráfico usando CSS. Além disso, agora você já compreendeu todo o processo de como adicionar bibliotecas no JavaScript.

Perguntas frequentes

Conclusão – Como Adicionar Bibliotecas no JavaScript

Nessa aula, você aprendeu como adicionar bibliotecas no JavaScript e como isso pode otimizar o seu trabalho e facilitar a criação dos seus projetos.

Te mostrei como funciona uma biblioteca em JavaScript, onde encontrá-las e como implementá-las dentro do seu projeto.

Como exemplo, te mostrei como adicionar uma biblioteca de gráficos ao seu projeto de forma simples e fácil.

As bibliotecas no JavaScript são um recurso importantíssimo para todo programador compreender e se aprofundar. Elas irão poupar seu tempo e otimizar seus projetos e desenvolvimentos dentro do JavaScript.

Hashtag Treinamentos

Para acessar publicações de JavaScript, clique aqui!