O que é Javascript?

Curso gratuito de JavaScript

Quer aprender mais sobre uma das linguagens mais usadas da web de forma simples, direta e totalmente gratuita? O balta.io oferece um curso gratuito de Fundamentos do JavaScript.

Para saber como ter acesso, veja a página do curso gratuito de Fundamentos do JavaScript. Assim, você complementa a leitura deste artigo com prática guiada.

Uma visão sobre o que é JavaScript

Podemos considerar o JavaScript uma linguagem de programação. No entanto, muitos autores também se referem a ele apenas como uma linguagem de script, na qual definimos a lógica e a executamos de forma independente.

Seja como linguagem de programação ou como script, o JavaScript permite implementar lógica, comportamento e eventos dentro das páginas web. Em outras palavras, ele transforma documentos estáticos em aplicações.

Para exemplificar melhor, pense em uma página que não é estática. Ou seja, uma página que exibe atualizações, conversa com outros serviços e reage às ações do usuário.

Nesse caso, podemos ter certeza de que existe algum código JavaScript rodando por trás das cortinas. A documentação da MDN sobre JavaScript usa praticamente essa mesma definição.

As três camadas da web: HTML, CSS e JavaScript

O JavaScript é considerado a terceira camada das páginas web. As outras duas são o HTML e o CSS, e a linguagem dá suporte total ao HTML.

Se ficou um pouco confuso, não se preocupe. Vamos entender brevemente pelo que cada uma dessas camadas responde.

O HTML é a famosa linguagem de marcação, ou seja, a linguagem que dá estrutura às nossas páginas. Com ela, definimos parágrafos, tabelas, divisões, títulos, cabeçalhos e tudo o que envolve a estrutura da página.

Se você está começando, vale ler o artigo sobre o que você precisa saber antes de aprender HTML. Afinal, o JavaScript manipula justamente essa estrutura.

O CSS é a linguagem que dá a roupagem, ou seja, o estilo do HTML. Por isso, sempre gosto de dizer que HTML e CSS andam juntos, já que um depende do outro.

Com o CSS é possível definir margens, cores, imagens, fontes e qualquer outro recurso de estilo. Para se aprofundar nas cores, por exemplo, veja o guia sobre formatos de cores no CSS.

O JavaScript é a linguagem que dá vida ao HTML, falando em termos de funcionalidade. Com ele, adicionamos lógica, criamos funções para chamar no HTML, fazemos validações e muito mais.

Na prática, o navegador transforma o HTML em uma árvore de objetos chamada DOM. Então, o JavaScript lê e altera essa árvore, e a página muda na tela sem precisar recarregar.

O que podemos fazer com o JavaScript

Com o JavaScript, escrevemos código para que a nossa página faça coisas como as listadas a seguir. Cada item é um conceito que você vai usar todos os dias.

Consumir APIs

Quando falamos da relação entre cliente e servidor, o JavaScript também pode se comunicar com APIs externas. Com isso, a aplicação ganha funcionalidades que não existem dentro dela.

De forma resumida, uma API é um conjunto de código criado fora do seu script que você usa de maneira simples e direta. O próprio navegador oferece várias, como a API do DOM, a de geolocalização e a fetch, para requisições HTTP.

Hoje falamos muito em CRUD (create, read, update e delete) nas aplicações web. Nesse modelo, uma API concentra todas as operações básicas, e o JavaScript chama esses métodos externos para dentro da sua lógica.

Código interpretado vs código compilado

Com certeza você já ouviu falar em linguagens interpretadas e compiladas. Nas interpretadas, o código é lido e executado de cima para baixo, com retorno imediato.

Em outras palavras, você não precisa converter o seu código para outra linguagem antes de executá-lo. Os navegadores conseguem executar código JavaScript diretamente a partir do texto do arquivo.

Já o código compilado precisa necessariamente de um compilador. Ou seja, um processo converte o código, às vezes passando por uma linguagem intermediária, até chegar a um executável em linguagem de máquina.

Vale lembrar que o processador só entende instruções binárias, os famosos 0 e 1. Por isso, toda linguagem precisa, em algum momento, ser traduzida para esse formato.

É por esse motivo que costumamos classificar o JavaScript como interpretado. O navegador recebe o código como texto, assim como faz com HTML e CSS, e mostra o resultado em tempo real para o usuário.

No entanto, os motores modernos vão além da interpretação pura. Eles usam a técnica just in time (JIT), que compila em tempo de execução os trechos mais usados para ganhar velocidade.

Na prática, o V8, motor do Chrome e do Node.js, começa interpretando o código e depois otimiza as partes quentes. Com isso, o JavaScript ficou rápido o bastante para aplicações complexas, como editores e jogos no navegador.

O lado servidor e o lado cliente

Você provavelmente também já ouviu falar em server-side rendering e client-side rendering. Ou seja, a renderização pelo lado do servidor ou pelo lado do cliente.

Renderizar do lado do servidor significa montar a página fora da máquina do usuário. Então, o servidor envia o HTML pronto, e o navegador apenas o exibe.

Já a renderização pelo lado do cliente é o oposto. Nesse caso, a máquina local do usuário monta e exibe as informações, e o JavaScript é a linguagem que faz esse trabalho dentro do navegador.

Por muito tempo, o JavaScript atuou apenas no cliente, e linguagens como PHP, Java ou C# cuidavam do servidor. Contudo, isso mudou com o Node.js, que leva o mesmo motor V8 para fora do navegador.

Hoje é possível escrever o front-end e o back-end com a mesma linguagem. Se quiser experimentar, o artigo sobre Node e npm mostra a instalação e os primeiros passos.

Onde o JavaScript é usado hoje

O navegador continua sendo o território principal da linguagem. Porém, o ecossistema cresceu muito e hoje cobre praticamente todo tipo de aplicação.

No front-end, bibliotecas e frameworks como React, Angular e Vue organizam interfaces grandes em componentes. Por exemplo, o artigo sobre rotas, guardas e navegação no Angular mostra como um framework estrutura uma aplicação inteira.

No mobile, ferramentas como React Native e Ionic permitem criar aplicativos para Android e iOS com JavaScript ou TypeScript. Assim, quem já conhece a web aproveita boa parte do que aprendeu.

No desktop, o Electron empacota aplicações web como programas instaláveis. O Visual Studio Code, por exemplo, é construído sobre essa tecnologia.

No servidor, como vimos, o Node.js executa APIs, ferramentas de linha de comando e automações. Além disso, o gerenciador de pacotes npm reúne um dos maiores repositórios de bibliotecas do mundo.

Por isso, aprender a linguagem abre portas em várias frentes ao mesmo tempo. Em seguida, vamos voltar ao básico e ver como colocar seu primeiro script em uma página.

Como adicionar o JavaScript na página web

O JavaScript anda junto com o HTML. Ou seja, dentro do HTML conseguimos chamar as funções que existem no código JavaScript.

Para isso, existem algumas maneiras de vincular os dois. Vamos ver as duas principais e, depois, alguns cuidados com o carregamento.

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

    <script>
        // Seu código JavaScript vai aqui
    </script>
</head>
<body>
</body>
</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>

    <script>
        function add() {
            console.log("Added successfully!");
        }
    </script>
</head>
<body>
    <button onclick="add()">Add</button>
</body>
</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>

    <script src="logic.js" defer></script>
</head>
<body>
</body>
</html>

// Registra o evento sem misturar lógica no HTML
const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log("Added successfully!");
});

Conclusão sobre o que é JavaScript

Agora você sabe o que é JavaScript e por que ele é tão importante para a web. Claro que este é um artigo de fundamentos, ou seja, uma leitura para dar o pontapé inicial.

Você pode usar o JavaScript em diferentes situações e com diferentes arquivos. Basta declarar as funções ou indicar o caminho do seu arquivo de script.

O próximo passo é praticar com variáveis, funções e eventos. Para isso, o curso gratuito citado no início é um ótimo ponto de partida.

Espero que você tenha gostado desta leitura. Eu te vejo na próxima, bons códigos e um grande abraço.

FAQ

JavaScript e Java são a mesma linguagem?

Não. Apesar do nome parecido, são linguagens diferentes, com propósitos, sintaxes e ambientes de execução distintos.

JavaScript é interpretado ou compilado?

Tradicionalmente, ele é classificado como interpretado. Porém, os motores modernos usam compilação just in time para acelerar a execução.

Dá para usar JavaScript no servidor?

Sim. Com o Node.js, o JavaScript roda fora do navegador e permite criar APIs, ferramentas de linha de comando e serviços.

Qual a diferença entre JavaScript interno e externo?

O interno fica dentro da tag script no próprio HTML. O externo fica em um arquivo .js separado, referenciado pelo atributo src.

Preciso aprender HTML e CSS antes?

É o caminho mais indicado. Como o JavaScript manipula a estrutura e o estilo da página, conhecer HTML e CSS facilita muito o aprendizado.