Colocação JavaScripts diretamente no arquivo que contém o HTML de uma página da web é ideal para scripts curtos usados ao aprender JavaScript. Quando você começa a criar scripts para fornecer funcionalidade significativa para sua página da web, no entanto, a quantidade de O JavaScript pode se tornar bastante grande, e a inclusão desses scripts grandes diretamente na página da web apresenta dois problemas:
- Isso pode afetar a classificação da sua página com os vários mecanismos de pesquisa, se o JavaScript ocupar a maior parte do conteúdo da página. Isso diminui a frequência de uso de palavras-chave e frases que identificam o conteúdo do conteúdo.
- Isso dificulta a reutilização do mesmo recurso JavaScript em várias páginas do seu site. Sempre que você quiser usá-lo em uma página diferente, será necessário copiá-lo e inseri-lo em cada página adicional, além de quaisquer alterações que o novo local exigir.
É muito melhor tornar o JavaScript independente da página da web que o utiliza.
Selecionando o código JavaScript a ser movido
Felizmente, o desenvolvedores HTML e JavaScript forneceram uma solução para esse problema. Podemos mover nossos JavaScripts para fora da página da web e continuar com a mesma função.
A primeira coisa que precisamos fazer para tornar um JavaScript externo à página que o utiliza é selecionar o próprio código JavaScript real (sem as tags de script HTML circundantes) e copie-o em um arquivo separado Arquivo.
Por exemplo, se o script a seguir estiver em nossa página, selecionaremos e copiaremos a parte em negrito:
Costumava-se colocar o JavaScript em um documento HTML dentro das tags de comentário para impedir que navegadores mais antigos exibissem o código; No entanto, os novos padrões de HTML dizem que os navegadores devem tratar automaticamente o código dentro de Tags de comentário HTML como comentários, e isso resulta em navegadores ignorando seu Javascript.
Se você herdou páginas HTML de alguém com JavaScript dentro das tags de comentário, não precisa incluir as tags no código JavaScript que você seleciona e copia.
Por exemplo, você copiava apenas o código em negrito, deixando de fora as tags de comentário HTML e no exemplo de código abaixo:
Salvando código JavaScript como um arquivo
Depois de selecionar o código JavaScript que você deseja mover, cole-o em um novo arquivo. Atribua ao arquivo um nome que sugira o que o script faz ou identifica a página onde o script pertence.
Dê ao arquivo uma .js sufixo para que você saiba que o arquivo contém JavaScript. Por exemplo, podemos usar hello.js como o nome do arquivo para salvar o JavaScript do exemplo acima.
Vinculando ao Script Externo
Agora que nosso JavaScript foi copiado e salvo em um arquivo separado, tudo o que precisamos fazer é fazer referência ao arquivo de script externo em nosso Documento de página da web em HTML.
Primeiro, exclua tudo entre as tags de script:
Isso ainda não diz à página qual JavaScript executar, então precisamos adicionar um atributo extra à própria tag de script que informe ao navegador onde encontrar o script.
Nosso exemplo agora ficará assim:
src = "hello.js">
O atributo src informa ao navegador o nome do arquivo externo de onde o código JavaScript desta página da web deve ser lido (que é hello.js no nosso exemplo acima).
Você não precisa colocar todos os seus JavaScripts no mesmo local que os documentos da página da Web em HTML. Você pode colocá-los em uma pasta JavaScript separada. Nesse caso, você apenas modifica o valor no src atributo para incluir a localização do arquivo. Você pode especificar qualquer endereço da Web relativo ou absoluto para o local do arquivo de origem JavaScript.
Usando o que você sabe
Agora você pode pegar qualquer script que tenha escrito ou obtido de uma biblioteca de scripts e movê-lo do código da página da Web HTML para um arquivo JavaScript com referência externa.
Você pode acessar esse arquivo de script de qualquer página da Web simplesmente adicionando as tags de script HTML apropriadas que chamam esse arquivo de script.