No mundo do desenvolvimento web, o JavaSript é uma linguagem que se destaca pela sua versatilidade. Presente tanto no front-end quanto no back-end, essa linguagem de programação revolucionou a forma como interagimos com sites e aplicações, tornando a web dinâmica e interativa.
Criado na década de 90, o JavaScript evoluiu de um simples recurso para adicionar interatividade às páginas para uma linguagem robusta e amplamente utilizada em sistemas complexos. Seu ecossistema é vasto, abrangendo bibliotecas e frameworks que facilitam o desenvolvimento de aplicações modernas.
Neste artigo, vamos explorar o que é JavaScript, sua origem, principais características e ainda vamos ver um exemplo prático de uso. Se você quer entender por que essa linguagem é essencial para qualquer desenvolvedor web, continue a leitura!
1 – O que é JavaScript?
JavaScript é uma linguagem de programação versátil e poderosa, essencial para o desenvolvimento web moderno. Inicialmente, a linguagem foi criada para adicionar interatividade às páginas web. Porém, o JavaScript evoluiu muito ao longo dos anos e atualmente é usado tanto no front-end (executado no navegador) quanto no back-end (com tecnologias como Node.js).
1.1 – Principais características
– Linguagem Interpretada: os códigos das linguagens interpretadas são executados linha por linha, sem necessidade de compilação prévia. No JavaScript, os códigos são executados diretamente pelo navegador ou pelo motor de execução (como o V8 do Chrome por exemplo).
– Linguagem de alto nível: essas linguagens possuem uma sintaxe mais próxima da linguagem humana e menos relacionada à arquitetura do computador. A sintaxe do JavaScript está baseada em palavras da língua inglesa, sendo mais entendível para o ser humano em comparação a outra linguagens como Assembly e C, por exemplo.
– Baseada em Eventos: JavaScript é uma linguagem capaz de responder a eventos do usuário, como cliques, digitação e interações na página.
– Multiparadigma: suporta programação imperativa, orientada a objetos e funcional, permitindo flexibilidade no desenvolvimento.
– Tipagem Dinâmica: o tipo das variáveis é determinado, automaticamente em tempo de execução do código. Essa característica torna a escrita do código mais ágil e eficiente.
– Assíncrono e Não Bloqueante: usa mecanismos como callbacks, promises e async/await para lidar com operações assíncronas, como requisições HTTP e manipulação de arquivos no backend.
– Executado no Cliente e no Servidor: no front-end, manipula a árvore DOM (Document Object Model) para alterar elementos da página. No back-end, com Node.js, pode criar servidores, manipular bancos de dados e integrar APIs.
– Extensível e Modular: JavaScript é uma linguagem essencial para qualquer desenvolvedor web, sendo usada para criar desde pequenos scripts até aplicações complexas.
– Ecossistema amplo: o JavaScript possui um vasto ecossistema de bibliotecas e frameworks, como, React, Angular e Vue.js para front-end, além de Express.js e NestJS para back-end.
Resumidamente, o JavaScript é uma linguagem interpretada, de alto nível, com tipagem dinâmica amplamente utilizada no desenvolvimento web. Mas, como essa linguagem surgiu? Vamos descobrir isso no próximo tópico:
2 – Como surgiu o JavaScript?
O JavaScript surgiu em 1995, criado por Brendan Eich, um desenvolvedor da Netscape, empresa responsável pelo desenvolvimento do navegador Netscape Navigator, um dos primeiros browsers da história da internet.
Nos anos 90, a internet era estática e baseada apenas em HTML e CSS, sem muita interatividade. Para tornar os sites mais dinâmicos, a Netscape queria uma linguagem que rodasse no navegador e interagisse com o usuário sem precisar recarregar a página.
Brendan Eich desenvolveu essa linguagem em apenas 10 dias, inicialmente chamada de Mocha, depois renomeada para LiveScript e, por fim, para JavaScript, devido à popularidade da linguagem Java na época. Entretanto, as duas linguagens não têm relação direta entre si, além dos nomes parecidos.
Em 1997, a ECMA, uma instituição internacional sem fins lucrativos dedicada à padronização de sistemas de informação e comunicação, tornou-se responsável pelo JavaScript. Essa instituição padronizou a linguagem, evitando sua fragmentação, bem como estabeleceu seu nome oficial como ECMAScript (ES).
Desde então, o JavaScript passou por muitas atualizações e melhorias coordenadas pela ECMA. Sua versão atual é a ECMAScript 2024. A linguagem também figura entre as mais populares do mundo, segundo pesquisa do site StackOverflow, renomado site na área de desenvolvimento de softwares.
Vamos ver agora um exemplo prático dessa linguagem tão popular entre os desenvolvedores.
3. Exemplo prático de JavaScript
Na prática, o JavaScript é utilizado em conjunto com HTML e o CSS para construção de páginas e aplicações web. Cada uma dessas linguagens possui uma função específica:
– HTML: linguagem de marcação responsável pela estrutura das páginas e aplicações, definindo cabeçalhos, títulos, parágrafos e outros elementos.
– CSS: linguagem de folha de estilos responsável pela personalização do layout da página, definindo cores, fontes, posição dos elementos, entre outros atributos.
– JavaScript: linguagem de programação responsável por toda a interação da página, definindo ações ao clicar em um botão, ao digitar um texto em um campo de input, entre outros.
Quer conhecer mais sobre HTML e CSS? Não deixe de conferir meus artigos sobre O que é HTML? e O que é CSS?
Para nosso exemplo iremos criar um contador de cliques utilizando HTML, CSS e JavaScript. Vamos começar?
3.1 – Criando um contador de cliques
Para criar o contador de cliques, vamos precisar de três arquivos: index.html, styles.css e counter.js
Após criar os arquivos, vamos aos códigos, começando pelo index.html:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./css/styles.css">
<script defer type="text/javascript" src="./js/counter.js"></script>
<title>Contador com JavaScript</title>
</head>
<body>
<div class="container">
<div class="titulo">
<h1>Contador: <span id="counter">0</span></h1>
</div>
<div class="botoes">
<button id="increment">+</button>
<button id="decrement">-</button>
</div>
</div>
</body>
</html>No HTML acima, estamos definindo no <body> um contador e dois botões: um para somar cliques e outro para subtrair. Além disso, no <head> estamos passando alguns metadados da página, definindo um título e referenciando dois arquivos: styles.css, onde estão os estilos da página e counter.js, onde é executada a lógica do contador.
Agora, vamos ao código de styles.css:
.container {
display: flex;
justify-content: center;
height: 95vh;
flex-direction: column;
}
.titulo, .botoes {
width: 99vw;
text-align: center;
color: #444;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 2.4rem;
}
#counter {
display: inline-block;
min-width: 60px;
font-size: 2.2rem;
text-align: left;
}
button {
width: 50px;
height: 50px;
font-size: 1.8rem;
font-weight: bold;
border: none;
border-radius: 50%;
cursor: pointer;
transition: 0.3s ease-in-out;
background-color: #888;
color: white;
margin-right: 40px;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}
button:hover {
background-color: #777;
transform: scale(1.1);
}
button:active {
transform: scale(0.9);
}Repare no código CSS acima, que definimos a posição, tamanho e estilos de cada elemento da página. Esse CSS nos leva ao resultado abaixo, com nosso contador centralizado na página com um aspecto visual simples e agradável:
Agora vamos inserir o código abaixo em counter.js, para configurar as ações do contador de cliques:
// Seleciona os elementos do HTML
const counter = document.getElementById("counter");
const incrementBtn = document.getElementById("increment");
const decrementBtn = document.getElementById("decrement");
// Variável que armazena o valor do contador
let count = 0;
// Função para atualizar o contador na tela
function updateCounter() {
counter.textContent = count;
}
// Função que soma cliques ao contador
incrementBtn.addEventListener("click", () => {
count++;
updateCounter();
});
// Função que subtrai cliques no contador
decrementBtn.addEventListener("click", () => {
count--;
updateCounter();
});O código JavaScript é responsável pela lógica de acréscimo e subtração de valores no contador. Vamos analisar esse código:
– Seleciona os elementos do documento HTML usando document.getElementById().
– Define uma variável count para armazenar o valor do contador.
– Cria uma função updateCounter() para atualizar o valor do contador na tela.
– Adiciona duas funções de callback addEventListener() aos botões para detectar cliques e atualizar o contador.
O código JavaScript nos leva a esse resultado aqui:
Observe que, ao combinarmos JavaScript com HTML e CSS, conseguimos criar aplicações e páginas web funcionais de forma simples e eficiente. Essas linguagens representam a base do desenvolvimento front-end para a web e são fundamentais para a internet como a conhecemos.
Conclusão
O JavaScript revolucionou a forma como interagimos com a web, tornando as páginas mais dinâmicas e responsivas. Desde sua criação nos anos 90 até os dias atuais, essa linguagem passou por diversas evoluções e continua sendo uma das mais populares no mundo do desenvolvimento.
Com um vasto ecossistema de frameworks e bibliotecas, ele possibilita a criação de aplicações robustas e eficientes. Dominar JavaScript é essencial para qualquer desenvolvedor web que deseja construir soluções modernas e interativas.
Espero que este artigo seja útil de alguma forma para você. Em caso de dúvidas, sugestões ou reclamações, fique à vontade para entrar em contato.
Referências:
https://en.wikipedia.org/wiki/ECMAScript_version_history
https://www.alura.com.br/artigos/javascript?srsltid=AfmBOorJz5w42NW6iYXIZDYvz-tZrPgekK-QzZGr4p0hToIlrX_-xmbC
https://www.hostinger.com.br/tutoriais/o-que-e-javascript