Aula 2: Introdução ao JavaScript

Introdução

JavaScript

Vamos entender onde o JavaScript atua na comunicação da internet:

Na maioria das interações online, temos um cliente (o navegador do usuário) que envia uma Requisição HTTP para um servidor (onde o site está hospedado), que envia de volta uma Resposta HTTP com os arquivos da página.

Muitas linguagens de programação rodam lá no servidor, mas o JavaScript nos permitirá executar código no lado do cliente (diretamente no navegador). Isso significa que, depois que a página carrega, podemos criar interações, animações e lógicas sem precisar ficar pedindo novas informações ao servidor a todo momento. É isso que permite que nossos sites se tornem interativos e rápidos.

Para adicionar JavaScript à nossa página, podemos adicionar um par de tags <script> em algum lugar do nosso HTML. Usamos as tags <script> para sinalizar ao navegador que qualquer coisa escrita entre elas é um código JavaScript que queremos executar. Nosso primeiro programa pode se parecer com isso:

alert('Olá, MA0350!');

A função alert em JavaScript exibe uma mensagem ao usuário que pode então ser dispensada. Para mostrar onde isso se encaixaria em um documento HTML real, aqui está um exemplo de uma página simples com algum JavaScript:

<!DOCTYPE html>
<html lang="pt">
    <head>
        <title>Olá</title>
        <script>
            alert('Olá, MAC0350!');
        </script>
    </head>
    <body>
        <h1>Olá!</h1>
    </body>
</html>

Eventos

Uma característica do JavaScript que o torna útil para programação web é seu suporte a Programação Orientada a Eventos.

Programação Orientada a Eventos é um paradigma que se concentra na detecção de eventos e ações que devem ser tomadas quando um evento é detectado.

Um evento pode ser quase qualquer coisa incluindo um botão sendo clicado, o cursor sendo movido, uma resposta sendo digitada ou uma página sendo carregada. Quase tudo que um usuário faz para interagir com uma página web pode ser considerado um evento. Em JavaScript, usamos Ouvintes de Evento que esperam por certos eventos ocorrerem e então executam algum código.

Vamos começar transformando nosso JavaScript de antes em uma função chamada ola:

function ola() {
    alert('Olá, mundo!')
}

Agora, vamos fazer com que esta função seja executada quando um botão for clicado. Para isso, criaremos um botão HTML em nossa página com um atributo onclick, que dá ao navegador instruções sobre o que deve acontecer quando o botão é clicado:

<button onclick="ola()">Clique Aqui</button>

Estas mudanças nos permitem esperar para executar partes do nosso código JavaScript até que certo evento ocorra.

Variáveis

JavaScript é uma linguagem de programação como Python, C ou qualquer outra linguagem com que você já trabalhou, significando que tem muitas das mesmas características incluindo variáveis. Há três palavras-chave que podemos usar para atribuir valores em JavaScript:

var idade = 20;
let contador = 1;
const PI = 3.14;

Para um exemplo de como podemos usar uma variável, vamos ver uma página que mantém um contador:

<!DOCTYPE html>
<html lang="pt">
    <head>
        <title>Contador</title>
        <script>
            let contador = 0;
            function contar() {
                contador++;
                alert(contador);
            }
        </script>
    </head>
    <body>
        <h1>Olá!</h1>
        <button onclick="contar()">Contar</button>
    </body>
</html>

Loops e Condicionais

Como o JavaScript compartilha muitas semelhanças sintáticas com a linguagem C, as estruturas de controle de fluxo serão muito familiares para você. No entanto, existem particularidades importantes, especialmente na comparação de dados.

Condicionais e Coerção de Tipos

As estruturas if, else if e else funcionam da forma clássica. A grande diferença do JavaScript para linguagens de tipagem forte é a coerção implícita de tipos. O JS tentará converter tipos diferentes para compará-los se você usar o operador de igualdade comum. Por isso, temos dois operadores principais:

let numero = 10;
let texto = "10";

// Evite usar a igualdade solta (==)
if (numero == texto) {
    console.log("Isso será impresso, pois o JS converte a string para número.");
}

// Prefira a igualdade estrita (===)
if (numero === texto) {
    console.log("Isso NÃO será impresso, pois os tipos diferem (Number vs String).");
} else {
    console.log("Isso será impresso, pois o JavaScript validou corretamente!");
}

Laços de Repetição (Loops)

Os laços while, do...while e o clássico for também operam como em C. A principal recomendação aqui é utilizar a palavra-chave let na declaração da variável iteradora dentro do for. Isso garante que a variável tenha um escopo de bloco e não exista fora do laço.

// Exemplo de laço FOR iterando e usando condicional
for (let i = 0; i <= 10; i++) {
    // Imprimindo apenas os números pares
    if (i % 2 === 0) {
        console.log(`Número par encontrado: ${i}`);
    }
}
// Tentar acessar 'i' aqui fora causaria um erro (ReferenceError)

// Exemplo de laço WHILE
let contagem = 3;
while (contagem > 0) {
    console.log(`Contagem regressiva: ${contagem}`);
    contagem--;
}

querySelector

Além de nos permitir mostrar mensagens através de alertas, JavaScript também nos permite mudar elementos na página. Para fazer isso, devemos primeiro introduzir uma função chamada document.querySelector. Esta função procura e retorna elementos do DOM. Por exemplo, usaríamos:

let cabecalho = document.querySelector('h1');

para extrair um cabeçalho. Então, para manipular o elemento que encontramos, podemos mudar sua propriedade innerHTML:

cabecalho.innerHTML = `Adeus!`;

Assim como em Python, também podemos aproveitar condições em JavaScript. Por exemplo, digamos que ao invés de sempre mudar nosso cabeçalho para Adeus!, queremos alternar entre Olá! e Adeus!. Nossa página poderia então se parecer com a abaixo. Note que em JavaScript, usamos === como uma comparação mais forte entre dois itens que também verifica que os objetos são do mesmo tipo. Geralmente queremos usar === sempre que possível.

<!DOCTYPE html>
<html lang="pt">
    <head>
        <title>Contador</title>
        <script>
            function ola() {
                const cabecalho = document.querySelector('h1');
                if (cabecalho.innerHTML === 'Olá!') {
                    cabecalho.innerHTML = 'Adeus!';
                }
                else {
                    cabecalho.innerHTML = 'Olá!';
                }
            }
        </script>
    </head>
    <body>
        <h1>Olá!</h1>
        <button onclick="ola()">Clique Aqui</button>
    </body>
</html>

Manipulação da DOM (Básico)

Vamos usar essa ideia de manipulação da DOM para melhorar nossa página de contador:

<!DOCTYPE html>
<html lang="pt">
    <head>
        <title>Contador</title>
        <script>
            let contador = 0;
            function contar() {
                contador++;
                document.querySelector('h1').innerHTML = contador;
            }
        </script>
    </head>
    <body>
        <h1>0</h1>
        <button onclick="contar()">Contar</button>
    </body>
</html>

Podemos tornar esta página ainda mais interessante exibindo um alerta toda vez que o contador chegar a um múltiplo de dez. Neste alerta, vamos formatar uma string para personalizar a mensagem, o que em JavaScript podemos fazer usando template literals. Template literals requerem que haja crases (`) em torno de toda a expressão e um $ e chaves em torno de qualquer substituição. Por exemplo, vamos mudar nossa função contar:

function contar() {
    contador++;
    document.querySelector('h1').innerHTML = contador;
        
    if (contador % 10 === 0) {
        alert(`Contagem está agora em ${contador}`)
    }
}

Na próxima aula, aprenderemos a melhorar o design dessa página removendo os eventos de dentro do HTML e separando nosso JavaScript em arquivos dedicados!

Exercícios