JavaScript Por Começar a Estudar e o Que Fazer com o Básico?

Fala, amigo estudante! Então, você quer aprender JavaScript e já começar a praticar com o básico? Essa me parece uma ótima ideia, e é por isso que quero te ajudar com este artigo. Então, vamos nessa?

Lista do Conteúdo do artigo

Afinal, como começar no JavaScript?

Se você já sabe o básico de HTML e CSS, é uma ótima hora para prática de JavaScript. Mas antes de sair digitando código, você já sabe para que serve o JavaScript?

Para que serve o JavaScript?

De forma bem direta, JavaScript é a linguagem que dá interatividade aos sites e aplicativos. Ele é responsável por fazer as coisas acontecerem na prática. Por exemplo, quando alguém clica em um botão no site, é o JavaScript que pode validar formulários, buscar informações em um banco de dados, alterar conteúdo dinâmico na tela e muito mais.

Por onde começar a estudar JavaScript?

Não vou fugir do conselho da maioria dos programadores: comece pela lógica de programação. Isso é fundamental para entender como declarar variáveis, criar arrays, escrever funções e compreender o escopo de cada estrutura de código.

Sintaxe do JavaScript

Toda linguagem de programação tem suas particularidades, e com o JavaScript não é diferente. Um ponto importante é que ele é uma linguagem de tipagem fraca, ou seja, você pode declarar uma variável com um número e depois mudar o valor dela para um texto ou um booleano sem que o interpretador lance um erro.

let exemplo = 10; // Variável recebe um número
exemplo = "Agora sou um texto"; // Agora recebe uma string

Entender isso logo no início é um passo importante para evitar confusão ao escrever código.

Interagindo com HTML

A interação do JavaScript com o HTML é essencial para tornar páginas dinâmicas. Para isso, você precisa estudar o DOM (Document Object Model).

O que é o DOM? De forma simples, ele representa a estrutura de uma página web em forma de árvore, onde cada elemento do HTML é um “nó” que pode ser manipulado via JavaScript. Isso permite criar, alterar e atualizar conteúdo HTML de forma dinâmica.

Aplicando JavaScript no HTML

Agora vamos colocar a mão na massa! Vamos criar um projeto simples no VS Code para testar o JavaScript.

Crie uma pasta chamada primeiro-projeto.
Abra a pasta no VS Code.
Crie um arquivo chamado index.html e escreva o seguinte código:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Primeiro projeto</title>
</head>
<body>
    <h1>Primeiro Projeto com JavaScript</h1>
</body>
</html>

Até agora, temos apenas um HTML básico sem JavaScript. Agora, vamos adicionar um script para exibir um alerta na tela.

<script>
    alert('Hello, World!');
</script>

O código final será:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Primeiro projeto</title>
</head>
<body>
    <h1>Primeiro Projeto com JavaScript</h1>
    <script>
        alert('Hello, World!');
    </script>
</body>
</html>

Agora salve o arquivo e abra o index.html no navegador. Quando a página carregar, uma mensagem “Hello, World!” aparecerá na tela.

Se funcionou, parabéns! Seu primeiro código JavaScript está rodando. Mas vamos dar um passo a mais e modificar o título da página dinamicamente.

document.querySelector('h1').innerText = 'Texto alterado pelo JavaScript';

Isso manipula o DOM pegando o elemento <h1> e alterando o texto interno dele.

Trabalhando com Eventos

Eventos são ações que ocorrem na página, como cliques, teclas pressionadas ou movimentos do mouse. O JavaScript permite capturar esses eventos e executar ações específicas.

Exemplo de um evento de clique que altera o texto de um botão:

jsCopiarEditardocument.querySelector('button').addEventListener('click', function() {
    this.innerText = 'Clicado!';
});

Variáveis e Tipos de Dados

No JavaScript, podemos armazenar valores usando variáveis. Existem três formas principais de declarar variáveis:

jsCopiarEditarvar nome = "João"; // Forma antiga, não recomendada  
let idade = 25; // Pode ser alterada depois  
const pi = 3.14; // Valor constante, não pode ser modificado

Os tipos de dados incluem números, strings, booleanos, arrays e objetos.

Estruturas Condicionais e Loops

Se precisar tomar decisões no código, utilize estruturas condicionais:

jsCopiarEditarlet idade = 18;
if (idade >= 18) {
    console.log("Você é maior de idade!");
} else {
    console.log("Você é menor de idade!");
}

E para repetir ações, utilize loops:

jsCopiarEditarfor (let i = 0; i < 5; i++) {
    console.log("Número: " + i);
}

Manipulando o DOM de Forma Avançada

Além de alterar textos, podemos modificar atributos, classes e até criar novos elementos no HTML usando JavaScript.

Criando um novo parágrafo dinamicamente:

jsCopiarEditarlet novoParagrafo = document.createElement('p');
novoParagrafo.innerText = 'Este é um parágrafo criado pelo JavaScript!';
document.body.appendChild(novoParagrafo);

Conclusão

JavaScript é uma linguagem poderosa e essencial para desenvolvimento web. Neste artigo, vimos desde os primeiros passos até interações com o DOM. Agora que você já sabe o básico, continue explorando eventos, funções e frameworks como React ou Vue para aprimorar suas habilidades.

A melhor forma de aprender é praticando. Então, mãos à obra e bora codar!

javascript