Cursos / Jogos Digitais / Programação Estruturada / Aula

arrow_back Aula 01 - Introdução à Programação Estruturada e JavaScript

Videoaula 02 - Alterando páginas HTML usando JavaScript

3/7

Transcrição

Agora que você já conhece as características da linguagem JavaScript, vamos colocar a mão na massa. Inicialmente, você vai entender o que os scripts podem fazer nas páginas HTML. Vamos lá!?

Atenção

Para melhor compreensão deste conteúdo, é importante que você assista a videoaula, acompanhe os exemplos e realize os exercícios propostos.

Nesse primeiro exemplo, o objetivo é mostrar o que pode ser alterado nas páginas HTML pelo código JavaScript. Perceba que, na Figura 1, o HTML tem título, subtítulo e o conteúdo inicial e, ao clicar no botão

- Botão 'clique aqui'
Botão 'clique aqui', o texto do conteúdo inicial é alterado.

Figura 01 - Alteração do conteúdo HTML
Alteração do conteúdo HTML

Você já tem o conhecimento básico e necessário sobre HTML necessário para compreender os exemplos desta disciplina. Na disciplina de Programação Estruturada, o HTML será utilizado como fonte de entrada e de saída dos programas JavaScript.

No exemplo, você viu que a linguagem JavaScript pode alterar o conteúdo HTML. Nele, você pode ver o cabeçalho (linhas 3 a 6) e o corpo do HTML (linhas 8 a 20), também o título, subtítulo e o texto em um parágrafo. Esse parágrafo tem um identificador de texto chamado de meu_texto, cujo valor é “conteúdo inicial”.

Código 1 - 01_1 Java Script e HTML.html
HTML
CSS
JS
23
1
<html>
2
3
    <head>
4
        <meta charset="UTF-8" />
5
        <title>Programação Estruturada - Aula 01</title>
6
    </head>
7
8
    <body>
9
        <noscript>Seu navegador não suporta JavaScript ou ele está desabilitado.</noscript>
10
11
        <h1>O que JavaScript pode fazer?</h1>
12
13
        <h2>01 - JavaScript pode alterar conteúdo HTML</h2>
14
15
        <!--            <p id="meu_texto">Conteúdo inicial</p>  -->
16
        <p id='meu_texto'>Conteúdo inicial</p>
17
        <button type="button" onclick='document.getElementById("meu_texto").innerHTML = "Alterei o conteúdo"'>Clique
18
        aqui</button>
19
20
    </body>
21
22
</html>
23
                    
1
1
                    
1
1
                    

Na linha 17, temos outro componente, o botão, cujo comportamento ao clicarmos é definido pelo atributo onclick, que tem como valor um código JavaScript. Nesse código, alteramos o valor innerHTML do elemento HTML, cujo identificador é meu_texto. O novo valor desse componente HTML será o texto “alterei o conteúdo”, ou seja, esse trecho JavaScript altera o texto que tem inicialmente o valor “conteúdo inicial” para “alterei o conteúdo”, como você pode observar na Figura 2.

Figura 2 - Conteúdo do arquivo 01_1 Java Script e HTML.html
x
1
<button type="button" onclick='document.getElementById("meu_texto").innerHTML = "Alterei o conteúdo"'>Clique
2
        aqui</button>
3

Na Figura 3, voltando para o HTML, ao clicar em

- Botão 'clique aqui'
Botão 'clique aqui', temos o comportamento esperado: o texto é alterado para “alterei o conteúdo”.

Figura 03 - Alteração do conteúdo na página HTML
Alteração do conteúdo na página HTML

No segundo exemplo, você verá que JavaScript pode também alterar valores dos atributos HTML.

Código 2 - 01_2 Java Script e HTML.html
HTML
CSS
JS
24
1
<html>
2
3
    <head>
4
        <meta charset="UTF-8" />
5
        <title>Programação Estruturada - Aula 01</title>
6
    </head>
7
8
    <body>
9
        <noscript>Seu navegador não suporta JavaScript ou ele está desabilitado.</noscript>
10
11
        <h1>O que JavaScript pode fazer?</h1>
12
13
        <h2>02 - JavaScript pode alterar valores de atributos HTML</h2>
14
15
        <button onclick="document.getElementById('minha_img').src='https://imdtec.imd.ufrn.br/assets/imagens/programacao-estruturada/janela_fechada.jpg'">Feche a Janela</button>
16
17
        <img id="minha_img" src="https://imdtec.imd.ufrn.br/assets/imagens/programacao-estruturada/janela_fechada.jpg" style="width:100px">
18
19
        <button onclick="document.getElementById('minha_img').src='https://imdtec.imd.ufrn.br/assets/imagens/programacao-estruturada/janela_aberta.jpg'">Abra a Janela</button>
20
21
    </body>
22
23
</html>
24
                    
1
1
                    
1
1
                    

A página é basicamente a mesma, porém, tem dois botões nas linhas 15 e 19 (Figura 4), e na linha 17 uma imagem, cujo identificador é minha_img, e o source(src). Ou seja, a fonte dessa imagem, é o arquivo janela_fechada.jpg, que está no mesmo diretório desse HTML. Neste exemplo, definimos o comprimento em 100 pixels.

Figura 4 - Conteúdo do arquivo 01_2 Java Script e HTML.html
6
1
<button onclick="document.getElementById('minha_img').src='https://imdtec.imd.ufrn.br/assets/imagens/programacao-estruturada/janela_fechada.jpg'">Feche a Janela</button>
2
3
<img id="minha_img" src="https://imdtec.imd.ufrn.br/assets/imagens/programacao-estruturada/janela_fechada.jpg" style="width:100px">
4
5
<button onclick="document.getElementById('minha_img').src='https://imdtec.imd.ufrn.br/assets/imagens/programacao-estruturada/janela_aberta.jpg'">Abra a Janela</button>
6

Ao observar o HTML na Figura 5, você verá que a janela está fechada.

Figura 05 - Valores dos atributos alterados no HTML
Valores dos atributos alterados no HTML

Na Figura 6, veja como o JavaScript pode alterar o conteúdo deste HTML, ou seja, os valores desse atributo. Neste HTML, temos 02 botões (linhas 15 e 19), ambos com a definição do atributo onclick, cujo valor é um código JavaScript que altera o valor da fonte da imagem (src), ou seja, do componente HTML que tem o identificador minha_imagem. No botão da linha 15, alteramos esse valor para janela_fechada.jpg e no botão da linha 17, esse valor é alterado para janela_aberta.jpg.

Figura 6 - Conteúdo do arquivo 01_2 Java Script e HTML.html
6
1
<button onclick="document.getElementById('minha_img').src='https://imdtec.imd.ufrn.br/assets/imagens/programacao-estruturada/janela_fechada.jpg'">Feche a Janela</button>
2
3
<img id="minha_img" src="https://imdtec.imd.ufrn.br/assets/imagens/programacao-estruturada/janela_fechada.jpg" style="width:100px">
4
5
<button onclick="document.getElementById('minha_img').src='https://imdtec.imd.ufrn.br/assets/imagens/programacao-estruturada/janela_aberta.jpg'">Abra a Janela</button>
6

Então, o esperado no HTML é que, ao clicar no botão que tem o texto “Feche a janela”, a figura da janela fechada apareça, e ao clicar no botão que tem o texto “Abra a janela”, a figura da janela aberta apareça (Figura 7).

Figura 07 - Alteração do source
Alteração do source

No terceiro exemplo, você verá que JavaScript pode mostrar e esconder elementos HTML.

Código 3 - 01_3 Java Script e HTML.html
HTML
CSS
JS
23
1
<html>
2
3
    <head>
4
        <meta charset="UTF-8" />
5
        <title>Programação Estruturada - Aula 01</title>
6
    </head>
7
8
    <body>
9
        <noscript>Seu navegador não suporta JavaScript ou ele está desabilitado.</noscript>
10
11
        <h1>O que JavaScript pode fazer?</h1>
12
13
        <h2>03 - JavaScript pode mostrar e esconder elementos HTML</h2>
14
15
        <p id="meu_texto_2" style="display:none">Este é o meu texto</p>
16
17
        <button type="button" onclick="document.getElementById('meu_texto_2').style.display='block'">Exibir texto</button>
18
        <button type="button" onclick="document.getElementById('meu_texto_2').style.display='none'">Esconder texto</button>
19
20
    </body>
21
22
</html>
23
                    
1
1
                    
1
1
                    

Ao clicar no botão “Exibir texto”, algum texto será mostrado acima, conforme visto na Figura 8, e ao clicar em “Esconder texto”, esse texto exibido anteriormente não aparecerá.

Figura 08 - Mostrar e Esconder texto em JavaScript
Mostrar e Esconder texto em JavaScript

Nesse exemplo, tem-se o parágrafo cujo identificador é meu_texto_2 e o style terá o valor display:none, como mostra a Figura 9, e isso é o mesmo que dizer para o navegador que esse componente não deve ser exibido.

Figura 9 - Conteúdo do arquivo 01_3 Java Script e HTML.html
5
1
<p id="meu_texto_2" style="display:none">Este é o meu texto</p>
2
3
<button type="button" onclick="document.getElementById('meu_texto_2').style.display='block'">Exibir texto</button>
4
<button type="button" onclick="document.getElementById('meu_texto_2').style.display='none'">Esconder texto</button>
5

Nessa figura, temos dois botões (linhas 17 e 18), os quais, ao serem clicados, chamam códigos JavaScript que alteram o valor do style do texto.

O botão que pode ser visto na linha 17 tem o texto “Exibir o texto” e, se quisermos exibir esse texto, podemos alterar o valor do display para block.

E no segundo botão, onde tem “esconder texto”, podemos voltar o valor desse display para none, e isso faz com que aquele componente desapareça.

Ao visualizarmos a página HTML, temos exatamente o comportamento esperado. Ao clicar em “Exibir texto”, o texto realmente aparece e, ao clicar em “Esconder texto”, ele desaparece (Figuras 10 e 11).

Figura 10 - Exibir texto/Esconder texto em HTML
Exibir texto/Esconder texto em HTML
Figura 11 - Exibir texto/Esconder texto em HTML
Exibir texto/Esconder texto em HTML

Bom, então é isso, alguns exemplos bem básicos do que o JavaScript pode fazer. Na próxima videoaula, você vai aprender a inserir os scripts nessas páginas.

Até mais!

Versão 5.3 - Todos os Direitos reservados