Aula 2:

Introdução ao
JavaScript
Profª. Mª. Jéssica Vicentini

1
 1. O que é JavaScript?
2. Variáveis, Tipos de Dados e Operadores
Sumário Aula 2 3. Estrutura de dados e Repetições

2
1.1

O que é
JavaScript?

3
O que é JavaScript?

● JavaScript é uma linguagem de programação utilizada para criar interatividade e lógica

em páginas web.

● Pode ser usado tanto no front-end quanto no back-end (com [Link]).

● Exemplos de uso de js no frontend (executado no navegador/cliente):

○ Validar formulários.

○ Criar carrosséis de imagens.

○ Atualizar conteúdos sem recarregar a página (AJAX).

4
Um pouco de história

● Nos anos 90, houve uma grande disputa entre navegadores.

● A Netscape era líder com o Netscape Navigator.
● A necessidade de maior dinamismo na web levou à criação de novas tecnologias.
● Em 1995, a Netscape contratou Brendan Eich para desenvolver uma nova linguagem de
script.
● O objetivo era trazer mais interatividade para as páginas web.
● Inicialmente, a linguagem foi chamada de LiveScript.

5
Um pouco de história
● Após uma parceria com a Sun Microsystems, empresa responsável pela criação da
linguagem Java, o nome LiveScript foi alterado para JavaScript.
● Essa mudança foi uma jogada de marketing para aproveitar a popularidade do Java na
época.
● A única semelhança entre Java e JavaScript é o nome 🙏

6
Um pouco de história

● Em 1997, em associação ao ECMA (acrônimo para European Computer Manufacturers

Association), foi criada uma padronização do JavaScript, chamada de ECMAScript, para
garantir o crescimento da linguagem seguindo algumas normas.

● [Link]

● [Link]

● Sempre que uma mensagem de alerta surgir na tela ou um campo de texto sugerir
automaticamente opções enquanto você digita, isso é um exemplo do JavaScript em ação.

7
1.2

Variáveis,
Tipos de Dados e
Operadores

8
Variáveis, Tipos de Dados

● Variáveis: Armazenam valores para serem usados no código.

● Tipos de Dados:
○ String, Number, Boolean, Object, Undefined, Null.
● JavaScript não é uma linguagem fortemente tipada.
● É fracamente tipada ou dinamicamente tipada
● O que significa que o tipo das variáveis é determinado em tempo de execução, e as
conversões de tipo entre valores podem ocorrer automaticamente (ou implicitamente),
sem necessidade de intervenção explícita do programador.

9
Variáveis, Tipos de Dados

let a = 10; // a é um número

a = "Texto"; // a agora é uma string sem erro

let resultado = 5 + "5"; // Isso resulta na string "55"

10
Declarando variáveis

● JS é case sensitive

idade =29;

Idade =30;

11
Declarando variáveis

● let
○ Reatribuição: Você pode reatribuir um valor à variável depois de declará-la.
○ Escopo: Tem escopo de bloco, ou seja, ela existe apenas no bloco de código onde foi
definida (como em loops ou estruturas condicionais).

let x = 10;

x = 20; // Isso é permitido

12
Declarando variáveis

● const
○ Reatribuição: Não permite reatribuição após a declaração. Ou seja, uma vez que
você atribui um valor à variável, ele não pode ser alterado.
○ Escopo: Também tem escopo de bloco, assim como let.

const teste = 10;

teste = 20; // Isso gerará um erro, porque não é possível reatribuir uma constante

13
Declarando variáveis

● Sem palavras-chave (usando apenas o nome da variável)

○ Comportamento: Quando uma variável é declarada sem uma palavra-chave como
let, const, ou var, ela automaticamente se torna uma variável global, ou seja, ela
pertence ao escopo global e pode ser acessada de qualquer lugar.
○ Escopo: Pode causar problemas, pois a variável fica acessível globalmente, o que
pode levar a conflitos em códigos maiores e mais complexos.

a = 10; // Não há 'let' ou 'const', portanto 'a' é global

[Link](a); // 10

14
Operadores

Operadores são símbolos que permitem realizar operações em variáveis e valores. Em

JavaScript, há diversos tipos de operadores, que podem ser classificados em várias categorias,
como:

● Aritméticos
● Relacionais
● Lógicos
● Atribuição
● De comparação
● Ternário
● Bitwise (Operadores binários)

15
Operadores Aritméticos
Esses operadores são usados para realizar cálculos matemáticos.

Operador Descrição Exemplo

+ Adição 5+3=8

- Subtração 5-3=2

* Multiplicação 5 * 3 = 15

/ Divisão 6/3=2

% Módulo (resto) 5%3=2

++ Incremento x++ (incrementa x)

-- Decremento x-- (decrementa x)

16
Operadores de Atribuição
Esses operadores são usados para atribuir valores a variáveis.

Operador Descrição Exemplo

Atribuição
= let x = 10
simples
x += 5
Adição e
+= (equivale a x =
atribuição
x + 5)
x -= 5
Subtração e
-= (equivale a x =
atribuição
x - 5)
Multiplicação e
*= x *= 2
atribuição
Divisão e
/= x /= 2
atribuição
17
Estruturas condicionais
As estruturas condicionais permitem que o programa tome decisões baseadas em condições.

if (condicao) {
// Código executado se a condição for verdadeira
} else {
// Código executado se a condição for falsa
}

18
Operadores Relacionais
Esses operadores comparam valores e retornam um valor booleano (true ou false).

Operador Descrição Exemplo

Igualdade (não 5 == '5' (retorna
==
estrita) true)
5 === '5' (retorna
=== Igualdade estrita
false)
5 != '5' (retorna
!= Diferente (não estrito)
false)
5 !== '5' (retorna
!== Diferente estrito
true)
> Maior que 5 > 3 (retorna true)
< Menor que 5 < 3 (retorna false)
>= Maior ou igual a 5 >= 3 (retorna true)
5 <= 3 (retorna
<= Menor ou igual a
false) 19
Operadores Lógicos
Esses operadores são usados para combinar expressões booleanas.

Operador Descrição Exemplo

true && false
&& E lógico (AND)
(retorna false)
true || false
|| Ou lógico (OR)
(retorna true)
!true (retorna
! Negação (NOT)
false)

20
Estruturas de Repetição/Loop
O loop `for` é usado quando sabemos, antecipadamente, quantas vezes queremos que o bloco
de código seja executado.

for (let i = 0; i < 5; i++) {

[Link]("Repetição número: " + i);
}

● Inicializador: Define o valor inicial da variável de controle.

● Condição: Define até quando o loop continuará executando.
● Incremento: Atualiza a variável de controle a cada iteração.

21
Estruturas de Repetição/Loop
Use o loop while quando não sabemos, antecipadamente, quantas vezes queremos repetir o
código, mas sabemos a condição que deve ser avaliada.

while (condicao) {
// Código a ser executado enquanto a condição for verdadeira
}

22
Estruturas de Repetição/Loop
O do...while é muito similar ao while, mas nele o código será executado pelo menos uma vez,
independente da condição.

do {
// Código a ser executado
} while (condicao);

23
Prática:

Interagindo com o JS

24
Exercícios

25
Exercício 1:

Crie um programa que verifica se um número é par ou ímpar.

É necessário aparecer um prompt, que requisite um número.

E ao final deve ser imprimida uma mensagem dizendo se o número é par ou ímpar.

26
Exercício 2:
Calculadora simples:

Crie um programa que pede dois números e uma operação matemática (+, -, *, /) e retorna o
resultado.

27
Exercício 3:
Crie um programa que receba um ano e verifica se ele é bissexto.

● É divisível por 4. Sendo assim, a divisão é exata com o resto igual a zero e não pode ser
divisível por 100. Com isso, a divisão não é exata, ou seja, deixa resto diferente de zero;

● Ou é divisível por 400. Caso seja divisível por 400, a divisão deve ser exata, deixando o
resto igual a zero. (exemplo de ano bissexto: Anos bissextos: 2024, 2020, 2016, 2012, 2008, 2004.)

Exemplo:

● Primeira situação: Se o ano de 2015 ou 2016 for uma divisão exata em relação a 4,
deveremos verificar, em seguida, se não é divisível por 100. Se não for, o ano será
bissexto;
● Segunda situação: Se o ano de 2015 ou 2016 não for divisível por 4, então deveremos
verificar se ele é divisível por 400. Se também não for divisível, o ano de 2015 não será
bissexto;
● Terceira situação: Se o ano de 2015 ou 2016 não for divisível por 4, então devemos
verificar se ele é divisível por 400. Caso seja, o ano de 2015 é bissexto. 28
1.3

Estrutura de dados
e Repetições

29
O que é um Array?
Um array é uma estrutura de dados usada para armazenar vários valores em uma única
variável. Pense nele como uma "caixa" onde você pode guardar diversos itens.

● Arrays em JavaScript são representados por colchetes [].

● Cada item em um array é chamado de elemento e pode ser acessado por seu índice
(posição no array).
● Os índices começam sempre do número 0. Ou seja:
○ O primeiro elemento está na posição 0.
○ O segundo elemento está na posição 1.

30
Estruturas de Repetição Avançadas
● for...of é usado para percorrer elementos de uma estrutura iterável, como arrays ou
strings.

31
Exercício 4:

Dado um array com os nomes ["Lucas", "Carla", "José", "Amanda"], adicione o nome
"Thiago" ao final, e use um loop for...of para exibir todos os nomes

32
Exercício 5:

Crie um array com 5 nomes diferentes, e utilize um loop para verificar se um nome definido em
uma variável existe.

33
Exercício 6:

Crie um programa que receba um array com números. Para cada número, exiba a tabuada de 1
a 10.

34
1.4

Manipulação do
DOM (Document
Object Model)

35
Introdução ao DOM
● O DOM (Document Object Model)
● É uma interface de programação para
documentos HTML e XML, que os
navegadores utilizam para representar
páginas na web
● Ele representa a página web como uma
estrutura de árvore.
● Cada elemento na página é um nó na
árvore do DOM.
● Através do DOM, podemos acessar e
manipular elementos da página.
● Podemos alterar o conteúdo, estilos e
comportamento dos elementos.
● O JavaScript é a principal linguagem
usada para interagir com o DOM.
Introdução ao DOM
Como o Navegador
Interpreta o HTML?

● Cada elemento na página é um nó na

árvore do DOM.
● Através do DOM, podemos acessar e
manipular elementos da página.
● Podemos alterar o conteúdo, estilos e
comportamento dos elementos.
● O JavaScript é a principal linguagem
usada para interagir com o DOM.
Selecionando Elementos
Para manipular elementos, primeiro precisamos selecioná-los. O JavaScript oferece vários métodos
para isso:
● [Link]("id")
● [Link]("classe")
● [Link]("tag")
● [Link]("seletor CSS")
● [Link]("seletor CSS")
Selecionando por ID
🔹 [Link]("id")
Retorna um único elemento com o ID especificado.
Selecionando por Classe
🔹 [Link]("classe")
Retorna uma coleção (HTMLCollection) de elementos que possuem a classe especificada.
Selecionando por Tag
🔹 [Link]("tag")
Retorna uma coleção (HTMLCollection) de todos os elementos com a tag especificada.
Selecionando com Seletor CSS
🔹 [Link]("seletor CSS")
Retorna o primeiro elemento que corresponde ao seletor CSS.

🔹 [Link]("seletor CSS")
Retorna uma NodeList com todos os elementos que correspondem ao seletor.

Resumo das diferenças entre o seletor CSS e o [Link]("classe")

Diferenças entre Métodos

44
Eventos

45
Eventos no DOM
Eventos são ações que ocorrem na página, como cliques, pressionamento de teclas,
movimentos do mouse, entre outros.
O JavaScript pode "ouvir" esses eventos e executar ações quando eles acontecem.

46
Adicionando Eventos

1 - Atributo HTML (onclick)

Podemos definir eventos diretamente no HTML, mas essa abordagem não é recomendada porque mistura HTML e
JavaScript.

2 - Manipulando diretamente no JavaScript ([Link])

Podemos atribuir uma função diretamente à propriedade do evento, mas essa abordagem substitui qualquer evento
anterior.

3 - addEventListener() (Recomendado)

A melhor forma de lidar com eventos é usando addEventListener(), pois permite adicionar múltiplos eventos ao
mesmo elemento sem sobrescrevê-los.

Vantagens do addEventListener():

● Permite adicionar múltiplos eventos no mesmo elemento.

● Separa JavaScript e HTML, deixando o código mais organizado
47
Tipos de Eventos Comuns

48
Prática

49
50
Manipulando o Conteúdo do DOM

No JavaScript, podemos modificar o conteúdo dos elementos HTML utilizando algumas propriedades principais:

● textContent → Altera apenas o texto de um elemento.

● innerHTML → Permite modificar o HTML interno do elemento.
● value → Usado para manipular valores de campos de entrada (input).

Essas propriedades possibilitam a criação de interações dinâmicas com os elementos da página.

51
Exercícios

52
Exercício 6:

Crie um contador de cliques que aumente e diminua quando o usuário clicar nos botões.

Requisitos:

1. Selecione os botões e o número do contador usando querySelector().

2. Adicione eventos de click aos botões.
3. Ao clicar no botão "+", o número deve aumentar.
4. Ao clicar no botão "-", o número deve diminuir.
5. O número não pode ser menor que 0.

Dica:

● Para evitar números negativos, use um if antes de diminuir o contador.

53
Exercício 6:

54
Exercício 7:

Lista de Tarefas Simples (com Espaços Pré-definidos)

Crie uma aplicação simples de lista de tarefas onde o usuário pode adicionar itens a uma lista.

Objetivo:

● O usuário digita uma tarefa em um campo de entrada (input).

● Ao clicar no botão "Adicionar", a tarefa é exibida no próximo espaço disponível da lista.
● Se todos os espaços estiverem preenchidos, exibe uma mensagem avisando que a lista está cheia.
● O botão "Limpar Lista" remove todas as tarefas.

55
Exercício 7:

56
Alterando Estilos e Classes no DOM

No JavaScript, podemos alterar a aparência dos elementos HTML dinamicamente, modificando estilos diretamente ou
adicionando/removendo classes CSS.

Isso permite criar interações dinâmicas, como destacar um botão ao passar o mouse ou mudar o fundo de uma página.

57
Modificando Estilos com style

Podemos modificar estilos diretamente usando a propriedade .style dos elementos.

Podemos também adicionar dinamismo alterando o estilo com um evento

58
 Manipulando Classes com class

Modificar estilos diretamente funciona, mas pode deixar o código desorganizado. A melhor prática é usar classes CSS e
manipulá-las com classList.

Principais métodos de classList

59
Exercício 8:

Criar uma página onde o usuário pode alterar o estilo e o conteúdo de um texto usando botões interativos.

Requisitos:

1. O usuário poderá mudar a cor do texto.

2. O usuário poderá mudar o tamanho da fonte.
3. O usuário poderá mudar o conteúdo do texto ao clicar em um botão.
4. O usuário poderá alternar um destaque no texto.

60
Exercício 8:

61
Exercício 9:

Cards Interativos com Estilos e Eventos

Objetivo:

1. Criar um conjunto de cards interativos onde se pode:

2. Alterar o estilo do card (modo destacado ou normal)
3. Modificar o conteúdo do título do card ao clicar em um botão

Regras:

4. Os cards já estarão previamente criados no HTML.

5. Cada card terá um botão para destacar (muda a cor de fundo e a borda).
6. Cada card terá um botão para modificar o título com um novo texto inserido pelo usuário.

62
Exercício 9:

63