Aulas
Disciplinas

Cursos / Informática para Internet / Programação Estruturada / Aula

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

Videoaula 03 - Inserção do Código JavaScript nas Páginas HTML

4/7

Transcrição

Agora, você vai aprender onde inserir os scripts nas páginas HTML. O código JavaScript deve ser inserido entre as tags <script> e </script> e pode ser inserido no HTML de quatro formas:

  1. Na seção do cabeçalho do HTML
  2. Na seção do corpo do HTML
  3. Em um arquivo JavaScript externo disponível localmente
  4. Em um arquivo JavaScript disponível em uma URL

Vamos agora ver exemplos de cada uma dessas formas de inserir o JavaScript no HTML.

  1. Na seção do cabeçalho do HTML

O código HTML é muito parecido com o anterior porém, agora, ao clicar no botão onclick (linha 19), será chamada a função funcaoNoHead.

Código 1 - 01_4 Onde Colocar o Código JavaS.html
HTML
CSS
JS
​x
1
<html>
2
    <head>
3
        <meta charset='UTF-8' />
4
        <title>Programação Estruturada - Aula 01</title>
5
​
6
        <script>
7
            function funcaoNoHead() {
8
                document.getElementById('meu_texto_1').innerHTML = 'Alterei o conteúdo';
9
            }
10
        </script>
11
    </head>
12
    <body>
13
        <noscript>Seu navegador não suporta JavaScript ou ele está desabilitado.</noscript>
14
​
15
        <h1>Onde colocar o código JavaScript?</h1>
16
​
17
        <h2>01 - no cabeçalho</h2>
18
        <p id='meu_texto_1'>Conteúdo inicial</p>
19
        <button type='button' onclick='funcaoNoHead()'>Clique aqui</button>
20
    </body>
21
</html>
22
1
1
1
1

A função funcaoNoHead está declarada no trecho JavaScript em algum lugar do HTML. Neste exemplo, colocamos o trecho JavaScript no cabeçalho do HTML, entre as linhas 6 e 10. Note que esse trecho está entre o <head> e o </head> do HTML, ou seja, está no cabeçalho do HTML. É importante notar que, no HTML, nossos códigos JavaScript sempre estarão entre as tags <script> e </script>.

Nesse trecho, temos a declaração da função funcaoNoHead e fazemos exatamente aquela atribuição do exemplo anterior ao campo texto. Dessa vez, o código JavaScript ao invés de ser escrito, como vimos no exemplo anterior, no onclick do botão, ele está inserido em um trecho JavaScript separado.

Figura 01 - Script no Cabeçalho
Script no Cabeçalho
Figura 02 - Visualização com Script no Cabeçalho
Visualização com Script no Cabeçalho
  1. Na seção do corpo do HTML

O mesmo trecho JavaScript do exemplo anterior pode ser também inserido no corpo do HTML, aqui demonstrado nas linhas 17 e 21, na parte inferior do corpo, e o comportamento de alterar o texto vai ser basicamente o mesmo. Perceba que neste JavaScript retiramos o script do cabeçalho e este último ficou apenas com o título da página, como mostra o Código 2.

Código 2 - 01_5 Onde Colocar o Código JavaS.html
HTML
CSS
JS
24
1
<html>
2
    <head>
3
        <meta charset='UTF-8' />
4
        <title>Programação Estruturada - Aula 01</title>
5
    </head>
6
    <body>
7
        <noscript>Seu navegador não suporta JavaScript ou ele está desabilitado.</noscript>
8
​
9
        <h1>Onde colocar o código JavaScript?</h1>
10
​
11
        <h2>02 - no corpo</h2>
12
        <p id='meu_texto_2'>Conteúdo inicial</p>
13
        <button type='button' onclick='funcaoNoBody()'>Clique aqui</button>
14
​
15
        <!-- Colocar scripts na parte inferior do elemento <body> melhora a velocidade de exibição,
16
                porque a interpretação do script diminui a velocidade de exibição. -->
17
        <script>
18
            function funcaoNoBody() {
19
                document.getElementById("meu_texto_2").innerHTML = "Alterei o conteúdo";
20
            }
21
        </script>
22
    </body>
23
</html>
24
1
1
1
1

E existe uma vantagem em colocar o script na parte inferior do elemento do corpo do HTML: isso melhora a velocidade de exibição, simplesmente porque a interpretação do script, algumas vezes, pode diminuir essa velocidade. Então, como o carregamento do script fica no final, isso pode melhorar um pouco a exibição da página HTML, mas, isso varia de página para página; e é preciso testar antes.

  1. Em um arquivo JavaScript externo disponível localmente

Existe uma terceira possibilidade, que é colocar o script em um arquivo externo ao HTML. Indo para o exemplo (Código 3), mantemos o cabeçalho e o corpo, e nas linhas 13 e 14 temos os botões Clique aqui 1 e Clique aqui 2, o primeiro chama a funcaoNoArquivoExterno1() e o segundo chama a função funcaoNoArquivoExterno2().

Codigo 3 - 01_6 Onde Colocar o Código JavaS.html
HTML
CSS
JS1
JS2
27
1
<html>
2
    <head>
3
        <meta charset='UTF-8' />
4
        <title>Programação Estruturada - Aula 01</title>
5
    </head>
6
    <body>
7
        <noscript>Seu navegador não suporta JavaScript ou ele está desabilitado.</noscript>
8
​
9
        <h1>Onde colocar o código JavaScript?</h1>
10
​
11
        <h2>03 - arquivo externo</h2>
12
        <p id='meu_texto_3'>Conteúdo inicial</p>
13
        <button type='button' onclick='funcaoNoArquivoExterno1()'>Clique aqui 1</button>
14
        <button type='button' onclick='funcaoNoArquivoExterno2()'>Clique aqui 2</button>
15
​
16
        <!-- Você pode colocar uma referência de script externa em <head> ou <body> -->
17
        <script src='exemplo1.js'></script>
18
        <script src='exemplo2.js'></script>
19
​
20
        <!-- 04 - arquivo em URL -->
21
        <!--
22
            <script src="http://www.imd.ufrn.br/pasta/exemplo.js"></script>
23
        -->
24
​
25
    </body>
26
</html>
27
1
1
5
1
//exemplo1.js
2
function funcaoNoArquivoExterno1() {
3
    document.getElementById("meu_texto_3").innerHTML = "Alterei o conteúdo 1";
4
}
5
5
1
//exemplo2.js
2
function funcaoNoArquivoExterno2() {
3
    document.getElementById("meu_texto_3").innerHTML = "Alterei o conteúdo 2";
4
}
5

Inicialmente, temos aqui o texto “conteúdo inicial” e, ao clicar no botão

- Botão 'Clique aqui 1'
Botão 'Clique aqui 1', o texto é alterado para "conteúdo 1", e ao clicar no botão
- Botão 'Clique aqui 2'
Botão 'Clique aqui 2', o texto é alterado para "conteúdo 2". Nesse exemplo, temos 2 botões que estão usando um arquivo JavaScript, que é externo ao HTML (Figura 3).


Figura 03 - Visualização no HTML dos scripts em arquivo externo
Visualização no HTML dos scripts em arquivo externo

Ao inserir uma referência para o meu script, usando a tag <script>, com o valor do source para o arquivo exemplo1.js, isso torna visível o que tiver nesse arquivo JavaScript. E essa segunda tag, na linha 18, também faz o mesmo, só que agora com o exemplo2. Ambos os arquivos estão no mesmo diretório desse HTML (Figura 4).

Figura 04 - Utilizando a tag script
Utilizando a tag script

Note que o exemplo1 foi carregado e ele tem a declaração da função chamada funcaoNoArquivoExterno1() (Figura 5), e o exemplo2 tem a função chamada funcaoNoArquivoExterno2() (Figura 6). Você pode colocar essa referência de script externo tanto aqui no corpo do HTML quanto no cabeçalho.


Figura 5 - Conteúdo do arquivo "exemplo1.js"
AخA
1
//exemplo1.js
2
function funcaoNoArquivoExterno1() {
3
    document.getElementById("meu_texto_3").innerHTML = "Alterei o conteúdo 1";
4
}
5

Figura 6 - Conteúdo do arquivo "exemplo2.js"
5
1
//exemplo2.js
2
function funcaoNoArquivoExterno2() {
3
    document.getElementById("meu_texto_3").innerHTML = "Alterei o conteúdo 2";
4
}
5
  1. Em um arquivo JavaScript disponível em uma URL

Além de esse arquivo poder estar no mesmo diretório desse HTML, é possível carregar para essa página arquivos JavaScript que estejam em algum lugar na web. Para isso, basta que você coloque o source direcionado para algum endereço na web, como você pode ver na linha 22 do Código 3, e ele será naturalmente carregado. Usando como exemplo fictício a URL http://www.imd.ufrn.br/pasta/exemplo.js, que foi atribuída ao valor do source da tag script.

Para finalizar, relembro as quatro formas de inserir o código JavaScript: no cabeçalho, no corpo do HTML, em algum arquivo externo, local ou em alguma URL externa.

Na próxima videoaula, você vai entender melhor as instruções JavaScript. Até mais!

[A] Anterior
4/7
Próxima [D]

Sumário

Versão 5.3 - Todos os Direitos reservados