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á!?

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 , o texto do conteúdo inicial é alterado.

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”.

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.

Na Figura 3, voltando para o HTML, ao clicar em , temos o comportamento esperado: o texto é alterado para “alterei o conteúdo”.

No segundo exemplo, você verá que JavaScript pode também alterar valores dos atributos 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.

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.

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.

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.

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!