Como separar o JavaScript na sua página da Web

Quando você escreve um novo JavaScript pela primeira vez, a maneira mais fácil de configurá-lo é incorporar o código JavaScript diretamente na página da web, para que tudo esteja no mesmo lugar enquanto você a testa para fazê-la funcionar certo. Da mesma forma, se você estiver inserindo um script pré-escrito em seu site, as instruções podem solicitar que você incorpore partes ou todo o script à própria página da web.

Não há problema em configurar a página e fazê-la funcionar corretamente em primeiro lugar, mas quando a página estiver funcionando da maneira que você deseja, você poderá melhore a página extraindo o JavaScript em um arquivo externo para que o conteúdo da sua página no HTML não fique tão cheio de itens que não sejam de conteúdo, como JavaScript.

Se você acabou de copiar e usar JavaScripts escritos por outras pessoas, as instruções sobre como adicionar o script à sua página podem resultar em uma ou mais seções grandes de O JavaScript realmente incorporado à sua página da Web e suas instruções não informam como você pode mover esse código da página para um arquivo separado e ainda ter o JavaScript trabalhos. Não se preocupe, porque, independentemente do código que o JavaScript você está usando na sua página, você pode movê-lo facilmente fora da sua página e configure-o como um arquivo separado (ou arquivos se você tiver mais de um pedaço de JavaScript incorporado na página). O processo para fazer isso é sempre o mesmo e é melhor ilustrado com um exemplo.

Vejamos como um pedaço de JavaScript pode parecer quando incorporado à sua página. Seu código JavaScript real será diferente do mostrado nos exemplos a seguir, mas o processo é o mesmo em todos os casos.

Seu JavaScript incorporado deve se parecer com um dos três exemplos acima. Obviamente, seu código JavaScript real será diferente do mostrado, mas o JavaScript provavelmente será incorporado à página usando um dos três métodos acima. Em alguns casos, seu código pode usar o código desatualizado language = "javascript" ao invés de type = "texto / javascript" nesse caso, convém atualizar seu código mais rapidamente, substituindo o atributo language pelo tipo um.

Antes de poder extrair o JavaScript em seu próprio arquivo, você primeiro precisa identificar o código a ser extraído. Nos três exemplos acima, há duas linhas de código JavaScript real a serem extraídas. Seu script provavelmente terá muito mais linhas, mas pode ser facilmente identificado, porque ocupará o mesmo lugar na sua página que as duas linhas de JavaScript que nós destacaram nos três exemplos acima (todos os três exemplos contêm as mesmas duas linhas de JavaScript, é apenas o contêiner ao seu redor que é ligeiramente diferente).

1. A primeira coisa que você precisa fazer para extrair o JavaScript em um arquivo separado é abrir um editor de texto sem formatação e acessar o conteúdo da sua página da web. Você precisará localizar o JavaScript incorporado que será cercado por uma das variações de código mostradas nos exemplos acima.
2. Tendo localizado o código JavaScript, é necessário selecioná-lo e copiá-lo para a área de transferência. Com o exemplo acima, o código a ser selecionado é destacado, você não precisa selecionar as tags de script ou os comentários opcionais que podem aparecer ao redor do seu código JavaScript.
3. Abra outra cópia do seu editor de texto sem formatação (ou outra guia, se o seu editor suportar a abertura de mais de um arquivo por vez) e cole o conteúdo JavaScript lá.
4. Selecione um nome de arquivo descritivo para usar em seu novo arquivo e salve o novo conteúdo usando esse nome de arquivo. Com o código de exemplo, o objetivo do script é interromper os quadros para que um nome apropriado possa ser framebreak.js.
5. Portanto, agora que temos o JavaScript em um arquivo separado, retornamos ao editor, onde temos o conteúdo da página original para fazer as alterações necessárias no link para a cópia externa do script.
6. Como agora temos o script em um arquivo separado, podemos remover tudo entre as tags de script em nosso conteúdo original, para que o tag.
7. A etapa final é adicionar um atributo extra à tag de script, identificando onde ele pode encontrar o JavaScript externo. Fazemos isso usando um src = "nome do arquivo" atributo. Com o nosso exemplo de script, especificamos src = "framebreak.js".
8. A única complicação é se tivermos decidido armazenar os JavaScripts externos em uma pasta separada das páginas da web que os utilizam. Se você fizer isso, precisará adicionar o caminho da pasta da página da web para a pasta JavaScript na frente do nome do arquivo. Por exemplo, se os JavaScripts estiverem sendo armazenados em um js pasta dentro da pasta que contém nossas páginas da web, precisaríamos src = "js / framebreak.js"

Então, como é o nosso código depois que separamos o JavaScript em um arquivo separado? No caso do nosso exemplo de JavaScript (supondo que o JavaScript e o HTML estejam na mesma pasta), nosso HTML na página da Web agora lê:

Também temos um arquivo separado chamado framebreak.js que contém:

if (top.location! = self.location) top.location = self.location;

Seu nome de arquivo e conteúdo do arquivo serão muito diferentes disso porque você terá extraído qualquer JavaScript que tenha sido incorporado à sua página da Web e tenha um nome descritivo para o arquivo com base no que faz. O processo real de extração será o mesmo, independentemente de quais linhas ele contenha.

E as outras duas linhas em cada um dos exemplos dois e três? Bem, o objetivo dessas linhas no exemplo dois é ocultar o JavaScript do Netscape 1 e da Internet Explorer 2, dos quais ninguém mais usa e, portanto, essas linhas não são realmente necessárias no primeiro Lugar, colocar. Colocar o código em um arquivo externo oculta o código de navegadores que não entendem a tag de script com mais eficiência do que envolvê-la em um comentário HTML. O terceiro exemplo é usado para páginas XHTML para informar aos validadores que o JavaScript deve ser tratado como conteúdo da página e não para validá-lo. como HTML (se você estiver usando um tipo de documento HTML em vez de um XHTML, o validador já sabe disso e, portanto, essas tags não são necessário). Com o JavaScript em um arquivo separado, não há mais JavaScript na página a ser ignorado pelos validadores e, portanto, essas linhas não são mais necessárias.

Uma das maneiras mais úteis em que o JavaScript pode ser usado para adicionar funcionalidade a uma página da web é executar algum tipo de processamento em resposta a uma ação do visitante. A ação mais comum à qual você deseja responder será quando esse visitante clicar em algo. O manipulador de eventos que permite que você responda aos visitantes clicando em algo é chamado onclick.

Quando a maioria das pessoas pensa em adicionar um manipulador de eventos onclick à sua página da web, imediatamente pensa em adicioná-lo a um tag. Isso fornece um pedaço de código que geralmente se parece com:

Isto é o errado maneira de usar o onclick, a menos que você tenha um endereço significativo real no atributo href, para que aqueles sem JavaScript sejam transferidos para algum lugar quando clicarem no link. Muitas pessoas também omitem o "retorno falso" desse código e se perguntam por que a parte superior da página atual sempre é carregada. após a execução do script (que é o que o href = "#" está mandando a página fazer, a menos que falso seja retornado de todos os manipuladores de eventos. Obviamente, se você tiver algo significativo como o destino do link, poderá ir para lá depois de executar o código onclick e não precisará do "retorno falso".

O que muitas pessoas não percebem é que o manipulador de eventos onclick pode ser adicionado ao qualquer Tag HTML na página da web para interagir quando o visitante clicar nesse conteúdo. Portanto, se você deseja que algo funcione quando as pessoas clicam em uma imagem, você pode usar:

Se você deseja executar algo quando as pessoas clicam em algum texto, você pode usar:

algum texto

Obviamente, eles não dão a pista visual automática de que haverá uma resposta se o visitante clicar neles no da mesma maneira que um link, mas você pode adicionar essa pista visual com bastante facilidade, estilizando a imagem ou a extensão adequadamente.

A outra coisa a observar sobre essas maneiras de anexar o manipulador de eventos onclick é que eles não exigem o "return false" porque não há nenhuma ação padrão que acontecerá quando o elemento for clicado e precisar ser Desativado.

Essas maneiras de anexar o onclick são uma grande melhoria no método pobre que muitas pessoas usam, mas ainda está longe de ser a melhor maneira de codificá-lo. Um problema ao adicionar onclick usando qualquer um dos métodos acima é que ele ainda está misturando seu JavaScript com seu HTML. onclick é não um atributo HTML, é um manipulador de eventos JavaScript. Como tal, para separar o JavaScript do HTML e facilitar a manutenção da página, precisamos obter essa referência onclick do arquivo HTML em um arquivo JavaScript separado ao qual ele pertence.

A maneira mais fácil de fazer isso é substituir o onclick no HTML por um Eu iria isso tornará mais fácil anexar o manipulador de eventos ao local apropriado no HTML. Portanto, nosso HTML agora pode conter uma destas instruções:

 algum texto

Em seguida, podemos codificar o JavaScript em um arquivo JavaScript separado que esteja vinculado na parte inferior do corpo da página ou que está no cabeçalho da página e onde nosso código está dentro de uma função que é chamada depois que a página termina de carregar. Nosso JavaScript para anexar os manipuladores de eventos agora fica assim:

document.getElementById ('img1'). onclick = dosomething; document.getElementById ('sp1'). onclick = dosomething;

Uma coisa a notar. Você notará que sempre escrevemos onclick inteiramente em minúsculas. Ao codificar a declaração em seu HTML, você verá algumas pessoas a escreverem como onClick. Isso está errado, pois os nomes dos manipuladores de eventos JavaScript estão em letras minúsculas e não existe um manipulador como onClick. Você pode se safar disso quando incluir o JavaScript diretamente na sua tag HTML, pois o HTML não diferencia maiúsculas de minúsculas e o navegador o mapeará para o nome correto para você. Você não pode usar letras maiúsculas incorretas no seu próprio JavaScript, pois o JavaScript faz distinção entre maiúsculas e minúsculas e não existe no JavaScript o onClick.

Esse código é uma grande melhoria em relação às versões anteriores, porque agora estamos anexando o evento ao elemento correto em nosso HTML e temos o JavaScript completamente separado do HTML. Podemos melhorar ainda mais isso.

O único problema que resta é que podemos anexar apenas um manipulador de eventos onclick a um elemento específico. Se, a qualquer momento, precisarmos anexar um manipulador de eventos onclick diferente ao mesmo elemento, o processamento anexado anteriormente não será mais anexado a esse elemento. Quando você está adicionando uma variedade de scripts diferentes à sua página da Web para fins diferentes, há pelo menos uma possibilidade de que dois ou mais deles desejem fornecer algum processamento a ser executado quando o mesmo elemento for clicou em. A solução confusa para esse problema é identificar onde essa situação ocorre e combinar o processamento que precisa ser chamado em conjunto com uma função que executa todo o processamento.

Embora conflitos como este sejam menos comuns com o onclick do que com o onload, ter que identificar os conflitos com antecedência e combiná-los juntos não é a solução ideal. Não é uma solução quando o processamento real que precisa ser anexado ao elemento muda com o tempo, de modo que, às vezes, há uma coisa a ser feita, às vezes outra, e às vezes as duas coisas.

A melhor solução é parar de usar um manipulador de eventos completamente e, em vez disso, usar um ouvinte de evento JavaScript com o attachEvent correspondente para Jscript, pois essa é uma daquelas situações em que JavaScript e JScript diferem). Podemos fazer isso com mais facilidade criando primeiro uma função addEvent que adicionará um ouvinte de evento ou anexo, dependendo de qual dos dois que o idioma sendo executado suporta;

função addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); return true; } else if (el.attachEvent) {retorna el.attachEvent ('on' + eType, fn); } }

Agora podemos anexar o processamento que queremos que aconteça quando nosso elemento for clicado usando:

addEvent (document.getElementById ('spn1'), 'clique', dosomething, false);

O uso desse método de anexar o código a ser processado quando um elemento é clicado significa que, ao fazer outra chamada addEvent para adicionar outra função a ser executar quando um elemento específico é clicado não substituirá o processamento anterior pelo novo processamento, mas permitirá que ambas as funções sejam corre. Ao chamar um addEvent, não precisamos saber se já temos ou não uma função anexada ao elemento a ser executado ao ser clicado, a nova função será executada juntamente com as funções que foram anteriormente em anexo.

Se precisarmos remover as funções do que é executado quando um elemento é clicado, poderíamos criar um função deleteEvent correspondente que chama a função apropriada para remover um ouvinte de evento ou anexado evento?

A única desvantagem dessa última maneira de anexar o processamento é que os navegadores realmente antigos não suportam essas maneiras relativamente novas de anexar o processamento de eventos a uma página da Web. Agora, deve haver poucas pessoas usando navegadores antigos para desconsiderá-los no que J (ava) Script que escrevemos além de escrever nosso código de forma a não causar um grande número de erros mensagens. A função acima é escrita para não fazer nada se nenhuma das maneiras utilizadas for suportada. A maioria desses navegadores realmente antigos não suporta o método getElementById de fazer referência a HTML e, portanto, um simples if (! document.getElementById) retorna false; na parte superior de qualquer uma das suas funções que fazem essas chamadas também seria apropriado. Obviamente, muitas pessoas que escrevem JavaScript não são tão atenciosas com as que ainda usam navegadores antigos e portanto, esses usuários devem estar se acostumando a ver erros de JavaScript em quase todas as páginas da Web visitadas até agora.

Quais dessas maneiras diferentes você usa para anexar o processamento à sua página para ser executado quando seus visitantes clicam em alguma coisa? Se a maneira como você faz isso estiver mais próxima dos exemplos na parte superior da página do que nos exemplos na parte inferior da página, talvez seja tempo em que você pensou em melhorar a maneira como escreve seu processamento onclick para usar um dos melhores métodos apresentados mais abaixo página.

Observando o código para o ouvinte de evento entre navegadores, você notará que existe um quarto parâmetro que chamamos uC, cujo uso não é óbvio na descrição anterior.

Os navegadores têm duas ordens diferentes nas quais eles podem processar eventos quando o evento é acionado. Eles podem trabalhar de fora para dentro a partir do

• uC = verdadeiro ao processar durante a fase de captura
• uC = falso para processar durante a fase da bolha.

Portanto, onde existem várias outras tags agrupadas em torno da que o evento foi acionado na fase de captura, a primeira execução é iniciada pela tag mais externa e movida para dentro em direção àquela que acionou o evento e, depois que a tag à qual o evento foi anexado tiver sido processada, a fase da bolha reverte o processo e volta para fora novamente.

O Internet Explorer e os manipuladores de eventos tradicionais sempre processam a fase de bolha e nunca a fase de captura e, portanto, sempre começam com a tag mais específica e trabalham fora.

Portanto, com os manipuladores de eventos:

xx