Os materiais didáticos aqui disponibilizados estão licenciados através de Creative Commons Atribuição-SemDerivações-SemDerivados CC BY-NC-ND. Você possui a permissão para visualizar e compartilhar, desde que atribua os créditos do autor. Não poderá alterá-los e nem utilizá-los para fins comerciais.
Atribuição-SemDerivações-SemDerivados
CC BY-NC-ND
Cursos / Jogos Digitais / Programação Estruturada / Aula
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á!?
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
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>
<head>
<meta charset="UTF-8" />
<title>Programação Estruturada - Aula 01</title>
</head>
<body>
<noscript>Seu navegador não suporta JavaScript ou ele está desabilitado.</noscript>
<h1>O que JavaScript pode fazer?</h1>
<h2>01 - JavaScript pode alterar conteúdo HTML</h2>
<!-- <p id="meu_texto">Conteúdo inicial</p> -->
<p id='meu_texto'>Conteúdo inicial</p>
<button type="button" onclick='document.getElementById("meu_texto").innerHTML = "Alterei o conteúdo"'>Clique
aqui</button>
</body>
</html>
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<button type="button" onclick='document.getElementById("meu_texto").innerHTML = "Alterei o conteúdo"'>Clique
aqui</button>
Na Figura 3, voltando para o HTML, ao clicar em
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>
<head>
<meta charset="UTF-8" />
<title>Programação Estruturada - Aula 01</title>
</head>
<body>
<noscript>Seu navegador não suporta JavaScript ou ele está desabilitado.</noscript>
<h1>O que JavaScript pode fazer?</h1>
<h2>02 - JavaScript pode alterar valores de atributos HTML</h2>
<button onclick="document.getElementById('minha_img').src='https://imdtec.imd.ufrn.br/assets/imagens/programacao-estruturada/janela_fechada.jpg'">Feche a Janela</button>
<img id="minha_img" src="https://imdtec.imd.ufrn.br/assets/imagens/programacao-estruturada/janela_fechada.jpg" style="width:100px">
<button onclick="document.getElementById('minha_img').src='https://imdtec.imd.ufrn.br/assets/imagens/programacao-estruturada/janela_aberta.jpg'">Abra a Janela</button>
</body>
</html>
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<button onclick="document.getElementById('minha_img').src='https://imdtec.imd.ufrn.br/assets/imagens/programacao-estruturada/janela_fechada.jpg'">Feche a Janela</button>
<img id="minha_img" src="https://imdtec.imd.ufrn.br/assets/imagens/programacao-estruturada/janela_fechada.jpg" style="width:100px">
<button onclick="document.getElementById('minha_img').src='https://imdtec.imd.ufrn.br/assets/imagens/programacao-estruturada/janela_aberta.jpg'">Abra a Janela</button>
Ao observar o HTML na Figura 5, você verá que a janela está fechada.
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<button onclick="document.getElementById('minha_img').src='https://imdtec.imd.ufrn.br/assets/imagens/programacao-estruturada/janela_fechada.jpg'">Feche a Janela</button>
<img id="minha_img" src="https://imdtec.imd.ufrn.br/assets/imagens/programacao-estruturada/janela_fechada.jpg" style="width:100px">
<button onclick="document.getElementById('minha_img').src='https://imdtec.imd.ufrn.br/assets/imagens/programacao-estruturada/janela_aberta.jpg'">Abra a Janela</button>
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).
No terceiro exemplo, você verá que JavaScript pode mostrar e esconder elementos HTML.
Código 3 - 01_3 Java Script e HTML.html<html>
<head>
<meta charset="UTF-8" />
<title>Programação Estruturada - Aula 01</title>
</head>
<body>
<noscript>Seu navegador não suporta JavaScript ou ele está desabilitado.</noscript>
<h1>O que JavaScript pode fazer?</h1>
<h2>03 - JavaScript pode mostrar e esconder elementos HTML</h2>
<p id="meu_texto_2" style="display:none">Este é o meu texto</p>
<button type="button" onclick="document.getElementById('meu_texto_2').style.display='block'">Exibir texto</button>
<button type="button" onclick="document.getElementById('meu_texto_2').style.display='none'">Esconder texto</button>
</body>
</html>
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á.
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<p id="meu_texto_2" style="display:none">Este é o meu texto</p>
<button type="button" onclick="document.getElementById('meu_texto_2').style.display='block'">Exibir texto</button>
<button type="button" onclick="document.getElementById('meu_texto_2').style.display='none'">Esconder texto</button>
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).
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!
Nome do arquivo: Programacao-Estruturada-Aula01-Transcricao-Videoaula02.pdf
Versão 5.3 - Todos os Direitos reservados