Aprenda com esta aula como adicionar bibliotecas no JavaScript e otimizar seus projetos sem precisar criar tudo sozinho do zero!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
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.
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.
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.
<!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.
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.
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.
Para acessar publicações de JavaScript, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador