Como incluir Javascript em HTML5?

0

 

Se você está lendo este artigo, você já sabe o que o Javascript.
Não preciso entrar em detalhes, você sempre pode ir para a Wikipedia para mais informações e links interessantes sobre a linguagem.
Informalmente, é usado Javascript em sites para fazer efeitos de sliders, mover blocos de conteúdo (drag & drop), etc… basicamente qualquer tipo de interatividade entre o usuário e o site utiliza Javascript, por exemplo:
Certamente mais de uma ocasião que você já ouviu falar de AJAX. Bem, AJAX significa “AsynchronousJavaScript E XML” … sim, Javascript.
jQuery é também está na boca de todos e é nem mais nem menos, do que um quadro Javascript … sim, é tão maravilhoso que muitos frontends usam jQuery para todos os ajustes necessários, mas não sabem como programar em Javascript, que é o grande perigo dos quadros, eles são maravilhosos e todos nós usamos eles, mas primeiro temos de conhecer o idioma, é fundamental!

 

code-820275_960_720

Padrão para incluir JavaScript
Não há realmente nenhuma norma obrigatória ao colocar nosso código JavaScript dentro do HTML … um momento … dentro do HTML?
Sim, o código Javascript interpreta o nosso navegador web, por isso precisamos incluí-lo no HTML. Quando você digita em um navegador a URL de um site, uma solicitação é feita para o servidor que hospeda o site, para retornar as informações para preencher o navegador web do computador.
Esta informação é retornada, geralmente sob a forma de um código HTML que o navegador interpreta e pinta. Isto significa que, se eu quiser que o navegador interprete o código Javascript em particular devo informar o navegador de uma forma que existe um código Javascript que eu desejo executar e como o navegador recebe um código HTML … esta indicação terá que ir na HTML.
Para isso, entre outras coisas, você tem o script tag HTML … infelizmente o caminho é longo.

Diferentes maneiras de incluir o nosso JavaScript
Para explicar as diferentes possibilidades para incluir nosso código JavaScript vou usar o exemplo de uma tela que exibe o texto “Clique aqui” e que, uma vez clicado, exibe um alerta dizendo “Olá, mundo!”, tudo em HTML. No início da época era muito comum encontrar código javascript dentro de tags HTML, como parte de um atributo do evento como evento onclick.

O que acontece é que, quando você clica na frase, o evento onclick para que o navegador executa o código no atributo, é ativado:

Embora o código de exemplo seja muito simples, é bastante fácil ver o problema de incluir o código javascript dentro de tags HTML …
1. É impossível reutilizar código javascript. Se você quiser ter vários evento onclick para abrir um alerta dizendo “Olá mundo” tem que escrever código de JavaScript em cada um dos eventos!
2. A claridade do código está ausente. No exemplo que acabamos de ter uma tag HTML, mas é fácil imaginar uma tela com centenas de tags HTML ou projeto web HTML com várias telas … montar o código como este é uma loucura.
Então, apareceu uma outra maneira de incluir o Jasvascript e pela primeira vez, a marca de script.

ipad-605420_960_720

Bem, o resultado será o mesmo que no primeiro exemplo, porque faz exactamente o mesmo, mas que têm uma pequena diferença:
• Dentro da tag head têm a tag script com abertura e fechamento com o “tipo” atributo especificando o navegador que o script incluído no rótulo é tipotext / javascript ou que é o mesmo, javascript.
• No script temos nosso código Javascript. Neste caso, é uma função que, quando chamada, vai lançar o nosso alerta.
• Nossa tag span mantém o atributo onclick, mas em vez de introduzir o código javascript para lançar o alerta, o que tem é uma chamada de função para acreditar no cabeçalho do nosso documento.
Desta forma, conseguimos ter todo o código javascript no cabeçalho, por isso era mais fácil de modificar e, acima de tudo, permite reutilização de código, porque podemos ter vários tag HTML com um evento onclick que chamar a mesma função de javascript temos declarado.

Embora o último indicado para colocar Javascript seja uma clara melhoria em relação ao primeiro, ainda temos o problema de gerenciamento de código (problema 2). Para resolver este problema de clareza e de gestão, tomamos um pequeno passo sobre como implementar o JavaScript no seu HTML:
Com pequenas alterações, o nosso tempo de rótulo já não tem o atributo onclick e em vez disso, nós adicionamos um identificador (ID) e nosso código javascript criou o código para que o navegador saiba ativar o alerta quando o usuário clicar em “clique”.

Nesse artigos tentamos mostrar como é simples trabalhar com Javascript e HTML. E você, já experimentou?

 

Deixe uma resposta