Introdução ........................................................................................

18

Capítulo 1 Introdução à JavaScript.......................................................23

1.1 Histórico ............................................................................................................23

1.2 Transpilers JavaScript .........................................................................................23

1.3 Ambientes de estudo ..........................................................................................24

1.4 Começando com JavaScript ................................................................................24

1.4.1 Objeto .........................................................................................................24

1.4.2 Caixas de diálogo ........................................................................................26

1.4.3 Codificação de caracteres em JavaScript .......................................................27

1.4.4 Escrever HTML com JavaScript ...................................................................28

1.4.5 Eventos .......................................................................................................28

1.4.6 Atrelar JavaScript a documentos ..................................................................28

1.4.7 Import e export ...........................................................................................29

1.4.8 Estrutura léxica da JavaScript ......................................................................31

1.4.9 Variáveis .....................................................................................................34

1.4.10 Operador typeof ........................................................................................36

1.4.11 Valores primitivos ......................................................................................36

1.4.12 Funções .....................................................................................................37

1.4.13 Palavras reservadas let e const ....................................................................37

1.4.14 Hoisting ....................................................................................................39

1.5 DOM HTML .....................................................................................................41

1.6 DOM CSS ..........................................................................................................45

Introdução

Este capítulo é uma introdução abrangente ao mundo do JavaScript, a linguagem de

programação que dá vida e interatividade às páginas da web. Cobriremos desde sua
história e conceitos fundamentais até como ela se conecta e manipula o conteúdo e o
estilo de documentos HTML.

Capítulo 1: Introdução à JavaScript

1.1 Histórico

O JavaScript foi criado em 1995 por Brendan Eich na Netscape. Inicialmente, seu
objetivo era ser uma linguagem de script simples para interações no navegador. Com o
tempo, evoluiu significativamente e, com o surgimento do [Link] em 2009, expandiu-
se para o desenvolvimento de servidores (back-end). Hoje, é uma das linguagens mais
populares do mundo, usada tanto no front-end quanto no back-end.

1.2 Transpilers JavaScript

Um transpiler (ou transpilador) é uma ferramenta que converte o código de uma

linguagem para outra, ou de uma versão mais nova para uma mais antiga. No
desenvolvimento moderno com JavaScript, o transpiler mais famoso é o Babel. Ele
permite que os desenvolvedores usem os recursos mais recentes da linguagem (como
let, const, e funções de seta) e, em seguida, os converte para uma versão mais antiga
(como ES5), garantindo compatibilidade com navegadores mais antigos.

1.3 Ambientes de estudo

Você pode praticar e aprender JavaScript em vários ambientes:

• Console do navegador: A ferramenta mais simples e acessível. Pressione F12 no

seu navegador para abrir o console de desenvolvedor e escrever código.

• VS Code: Um editor de código popular com extensões poderosas para

desenvolvimento JavaScript.

• Ambientes online: Ferramentas como CodePen e JSFiddle permitem que você

escreva e execute código JavaScript, HTML e CSS diretamente no navegador.

• [Link]: Para executar JavaScript fora do navegador, no seu computador ou em

um servidor.

1.4 Começando com JavaScript

1.4.1 Objeto
Um objeto em JavaScript é uma estrutura de dados que armazena pares de chave-
valor. É uma forma de agrupar dados e funcionalidades relacionados.

JavaScript

let pessoa = {

nome: "Ana",

idade: 25,

cargo: "Desenvolvedora"

};

// Acessando propriedades do objeto

[Link]([Link]); // Saída: Ana

[Link](pessoa["idade"]); // Saída: 25

1.4.2 Caixas de diálogo

O JavaScript fornece três caixas de diálogo básicas para interação com o usuário:

• alert(): Exibe uma mensagem em uma caixa de diálogo.

JavaScript

alert("Olá, bem-vindo!");

• confirm(): Exibe uma mensagem e dois botões ("OK" e "Cancelar"). Retorna

true se o usuário clicar em OK e false se clicar em Cancelar.

JavaScript

let resultado = confirm("Você concorda?");

[Link](resultado); // true ou false

• prompt(): Pede ao usuário que digite uma informação. Retorna a string digitada
ou null se o usuário cancelar.

JavaScript

let nome = prompt("Qual é o seu nome?");

[Link]("Seu nome é " + nome);

1.4.3 Codificação de caracteres em JavaScript

JavaScript utiliza a codificação de caracteres Unicode, especificamente UTF-16,
internamente, mas na maioria dos casos, trabalha perfeitamente com UTF-8, que é a
codificação padrão para a web. Isso significa que você pode usar caracteres de
diferentes idiomas, emojis, e outros símbolos sem problemas.

1.4.4 Escrever HTML com JavaScript

Você pode adicionar conteúdo HTML a um documento usando JavaScript,

principalmente para gerar conteúdo dinâmico.

JavaScript

// Usando [Link]() - não recomendado para documentos já carregados

[Link]("<h1>Título gerado por JavaScript</h1>");

// Usando o método moderno e recomendado

[Link]("minhaDiv").innerHTML = "<p>Olá, mundo!</p>";

1.4.5 Eventos

Um evento é uma ação ou ocorrência que acontece em um documento HTML.

Exemplos incluem um clique de mouse, o pressionar de uma tecla ou o carregamento
de uma página. Você pode atrelar funções a esses eventos para que sejam executadas
quando o evento ocorrer.

HTML

<button onclick="alert('Botão clicado!')">Clique-me</button>

1.4.6 Atrelar JavaScript a documentos

Existem três formas de incluir código JavaScript em um documento HTML:

1. Inline: Diretamente em uma tag HTML.

2. Interno: Dentro de uma tag <script> no próprio arquivo HTML.

3. Externo: Vinculando a um arquivo .js separado usando <script

src="caminho/do/seu/[Link]"></script>. Esta é a forma recomendada para
manter o código limpo e organizado.

1.4.7 Import e export

O sistema de módulos ES6 (import e export) permite que você divida seu código
JavaScript em arquivos separados e reutilizáveis, evitando que o código fique em um
único arquivo grande.
 • export: Torna uma variável, função ou classe acessível de outros arquivos.

• import: Importa essa funcionalidade para uso em outro arquivo.

// [Link]

JavaScript

export let nome = "João";

// [Link]

JavaScript

import { nome } from './[Link]';

[Link](nome); // Saída: João

1.4.8 Estrutura léxica da JavaScript

A estrutura léxica define as regras básicas de sintaxe do JavaScript. As principais regras

são:

• Case sensitivity: JavaScript diferencia maiúsculas de minúsculas. variavel é

diferente de Variavel.

• Identificadores: Nomes de variáveis, funções, etc., devem começar com uma

letra, _ ou $, e podem conter números depois.

• Comentários: Usamos // para comentários de uma linha e /* ... */ para blocos

de comentários.

• Ponto e vírgula: Embora o JavaScript possa inferir o ponto e vírgula, é uma boa
prática usá-lo para finalizar declarações e evitar erros.

1.4.9 Variáveis

Variáveis são contêineres para armazenar dados. A palavra-chave var é a forma antiga
de declarar variáveis, enquanto let e const são as formas modernas.

• var: Possui escopo de função, o que pode levar a comportamentos inesperados.

• let: Possui escopo de bloco ({}). É a melhor escolha para variáveis que precisam
ser reatribuídas.

• const: Também possui escopo de bloco. Usada para valores que não serão
reatribuídos.

JavaScript

let numero = 10;

const PI = 3.14;
1.4.10 Operador typeof

O operador typeof retorna uma string que indica o tipo de uma variável.

JavaScript

let nome = "Maria";

let idade = 30;

let ehMaior = true;

let nulo = null;

let indefinido;

[Link](typeof nome); // Saída: "string"

[Link](typeof idade); // Saída: "number"

[Link](typeof ehMaior); // Saída: "boolean"

[Link](typeof nulo); // Saída: "object" (um erro histórico da linguagem)

[Link](typeof indefinido); // Saída: "undefined"

1.4.11 Valores primitivos

Os valores primitivos são tipos de dados básicos e imutáveis. Em JavaScript, existem 7

tipos primitivos:

1. string: Sequência de caracteres.

2. number: Números inteiros e de ponto flutuante.

3. bigint: Números inteiros muito grandes.

4. boolean: true ou false.

5. undefined: Valor de uma variável que foi declarada, mas não inicializada.

6. symbol: Valor único e imutável.

7. null: Representa a ausência intencional de qualquer valor.

1.4.12 Funções

Uma função é um bloco de código reutilizável que pode ser chamado para executar
uma tarefa. Funções podem receber parâmetros e retornar valores.

JavaScript

function somar(a, b) {
 return a + b;

let resultado = somar(5, 3);

[Link](resultado); // Saída: 8

1.4.13 Palavras reservadas let e const

Estas palavras-chave foram introduzidas no ES6 (ECMAScript 2015) para resolver

problemas de escopo do var.

• let: Permite a reatribuição de valor, mas a variável é limitada ao bloco de código

({}) em que foi declarada (escopo de bloco).

• const: Declara uma variável cujo valor não pode ser reatribuído. Também
possui escopo de bloco. Usar const é uma boa prática sempre que o valor de
uma variável não for alterado.

1.4.14 Hoisting

Hoisting é o comportamento padrão do JavaScript de mover as declarações para o

topo de seu escopo antes da execução do código.

• Com var: A declaração é elevada, mas a inicialização não. Isso pode levar a
resultados inesperados.

JavaScript

[Link](x); // Saída: undefined

var x = 5;

• Com let e const: A declaração é elevada, mas a inicialização não. No entanto, o

JavaScript não permite o acesso à variável antes da sua declaração, resultando
em um ReferenceError. Este comportamento é mais seguro e previsível.

1.5 DOM HTML

O DOM (Document Object Model) é uma representação em árvore de um documento

HTML. Ele permite que o JavaScript acesse e manipule o conteúdo, a estrutura e o
estilo dos elementos de uma página.

Você pode selecionar elementos usando métodos como:

• [Link]('id')
 • [Link]('seletor-css')

• [Link]('seletor-css')

JavaScript

let titulo = [Link]('meu-titulo');

[Link] = "Novo Título!"; // Alterando o conteúdo

1.6 DOM CSS

O JavaScript também pode ser usado para alterar o estilo CSS dos elementos. Isso é
feito acessando a propriedade style de um elemento DOM.

JavaScript

let elemento = [Link]('.minha-classe');

// Alterando a cor do texto e o tamanho da fonte

[Link] = "blue";

[Link] = "20px";