Scribd
Carregar
2 visualizações6 páginas

Cópia de AULA - JavaScript POO

O documento aborda a programação orientada a objetos em JavaScript, focando na interação entre JavaScript e HTML através do DOM. Ele explica como acessar e modificar elementos HTML usando propriedades como .innerHTML e .style. Além disso, inclui uma atividade prática para aplicar esses conceitos na manipulação de elementos da página.

Enviado por

Natanael Santos
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
2 visualizações6 páginas

Cópia de AULA - JavaScript POO

O documento aborda a programação orientada a objetos em JavaScript, focando na interação entre JavaScript e HTML através do DOM. Ele explica como acessar e modificar elementos HTML usando propriedades como .innerHTML e .style. Além disso, inclui uma atividade prática para aplicar esses conceitos na manipulação de elementos da página.

Enviado por

Natanael Santos
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd

Programação Orientada a Objetos

JavaScript

Prof: João Marcelo Dias


Conectando JavaScript e HTML

DOM (Document Object Model)

É a forma como o navegador enxerga o


seu arquivo HTML.

O JavaScript pode acessar e modificar


essa árvore, permitindo-nos alterar o
conteúdo, o estilo e a estrutura da
página dinamicamente. Ele cria uma estrutura de "árvore" com
todos os seus elementos (tags).

2
Conectando JavaScript e HTML

Então... Precisamos "pegar" esses elementos, para


alterar o que está dentro deles.

E então guardamos em uma variável

3
Conectando JavaScript e HTML

.innerHTML

A propriedade .innerHTML permite que a gente insira ou substitua todo o


conteúdo HTML dentro de um elemento selecionado. Aceitando textos ou
até tags e estruturas HTML inteiras.

*Para inserir sem substituir:


4
Alterando Estilo com JavaScript

.style

Todo elemento selecionado tem uma propriedade .style que permite


alterar individualmente as propriedades CSS.

*Atenção: Propriedades CSS que usam hífen (como background-color ou font-size) devem ser
escritas em JavaScript no formato camelCase (como backgroundColor ou fontSize).
5
Atividade 1
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
Crie um botão no html e adicione uma função <title>Desafio DOM</title>
</head>
onclick=”funcaoSwitch()” <body style="font-family: Arial,
sans-serif; text-align: center;
margin-top: 50px;">

Dentro da função funcaoSwitch(): <h1 id="titulo-


principal">Página em
Construção...</h1>
A1: Use getElementById para selecionar o h1. Mude o texto dele (usando innerHTML)
para "Aula DOM". <p
class="mensagem">Aguardand
o reformas.</p>
<p class="mensagem">Ainda
A2: Mude a cor desse título para a sua cor favorita usando a propriedade .style.
está tudo muito chato por aqui.
</p>

A3: Use getElementsByClassName para selecionar os parágrafos com a classe <button id="botao-magico"
mensagem. style="padding: 10px 20px;
font-size: 16px; cursor:
pointer;">
A4: Mude o texto (innerHTML) do primeiro parágrafo para "Eu sei usar Switch!
</button>
getElementById!".
<script>

A5: Mude a cor de fundo (.[Link]) do segundo parágrafo para amarelo </script>
</body>
(yellow). </html>

Você também pode gostar