Como vincular JavaScript ao HTML

JavaScript é uma linguagem de script muito popular que é usada tanto no lado do cliente quanto no lado do servidor. JavaScript é necessário para nossas páginas da web, pois torna a nossa página da web interativa.

Existem três requisitos básicos para se tornar um desenvolvedor de front-end:

• Html,
• CSS,
• JavaScript

O HTML é reduzido para a linguagem de marcação de texto hiper que fornece estrutura à nossa página da web e CSS fornece estilo às nossas páginas. Finalmente, o JavaScript, como mencionado anteriormente, torna nossa página da web interativa. JavaScript também ajuda a alterar HTML e CSS.

Agora surge uma pergunta de que como podemos vincular/conectar javascript com html. Hoje neste artigo, exploraremos quase todas as maneiras pelas quais podemos vincular o JavaScript ao HTML.

O que é uma tag de script?

Antes de entrar na solução de como vincular o JavaScript ao HTML, vejamos a tag de script.

O A tag é usada para incorporar scripts do lado do cliente que são JavaScript. Esta tag tem elementos de script ou referências a outro arquivo de script usando o atributo src.

Sintaxe

Esta é uma etiqueta de script com um atributo SRC no qual podemos fornecer um nome de arquivo que queremos fazer referência.

Usando JavaScript no arquivo HTML

Podemos vincular JavaScript ao HTML adicionando todo o código JavaScript dentro do arquivo html. Conseguimos isso usando a tag de script que foi explicada anteriormente. Podemos colocar a tag dentro da cabeça do HTML ou no final do corpo. Depende totalmente de nós onde queremos colocá -lo e quando queremos que o JavaScript carregue. Os programadores geralmente chamam a tag de script sempre que quiserem gerar conteúdo ou aplicar alguma ação. Então, olhando para o código a seguir, é uma boa prática carregar JavaScript após o corpo HTML.

Vejamos um exemplo:

Exemplo

Clique em mim

Neste exemplo, primeiro, criamos um botão em html. Definimos um evento para clicar. Sempre que um usuário clica neste botão, o myfunc () A função será ativada. Depois disso, colocamos um marcação. Todo o código JavaScript foi aqui. Colocamos uma função com o nome de myfunc () onde mostramos um alerta.

Parabéns! Ligamos com sucesso o JavaScript com HTML adicionando código JavaScript dentro da tag de script.

Este método é bom para pequenas páginas da web ou uma página da web. No entanto, à medida que seu aplicativo da web cresce, o código do script também ficará maior e se tornará realmente difícil de lidar e a leitura. A solução é escrever JavaScript em um arquivo JavaScript dedicado e fornecer a referência do arquivo JavaScript no arquivo html.

Usando JavaScript em um arquivo externo

Usar um arquivo externo para scripts maiores é benéfico, pois podemos dividir nosso código em diferentes páginas JavaScript, bem como em diferentes arquivos. É alcançado referenciando o nome do arquivo JavaScript no atributo "SRC" da tag de script no arquivo html.

Vamos mudar um pouco o exemplo anterior um pouco. O código permanecerá o mesmo. Faremos outro arquivo JavaScript com o nome de “Código.js ". Colocaremos todo o código JavaScript no “código.Arquivo JS "e forneça o" código.Referência JS ”no arquivo HTML.

Por exemplo

Clique em mim

Nós referenciamos o “código.JS”Arquivo usando o atributo SRC de marcação.

Agora o código.JS arquivo:

function myfunc ()
alerta ("você clicou em mim");

O resultado será o mesmo que o exemplo anterior i-e.

Vantagens de arquivo JavaScript externas

Vamos declarar formalmente algumas das vantagens depois de discutir o arquivo JavaScript externo:

• Ele separa nosso código HTML e código JavaScript
• O código JavaScript se torna legível e sustentável.
• Outra vantagem é que os arquivos JavaScript em cache atuam para acelerar o carregamento da página.

Seletores de JavaScript

Nos exemplos anteriores, levamos a ajuda de um evento. Suponha que não queremos adicionar um evento e queremos selecionar um elemento no arquivo html. O JavaScript nos ajuda, fornecendo opções diferentes para isso que são chamadas de seletores de JavaScript.

Seletores de JavaScript A principal função é selecionar um elemento HTML e executar ações diferentes de acordo com nossas necessidades. JavaScript oferece opções diferentes para isso, uma delas é o id.

Podemos dar a um elemento um atributo de identificação em html e depois acessá -lo em javascript. Acessemos JavaScript por:

documento.getElementById ("idname");

ID é único e usado para apenas um elemento.

O JavaScript também nos dá a opção de selecionar um elemento usando um atributo de classe. Podemos usar o nome da classe para diferentes elementos. A sintaxe é:

documento.QuerySelector (".nome da classe");

Outra opção que JavaScript nos dá é acessar elementos JavaScript usando nomes de tags. Sintaxe para acessar nomes de tags:

documento.getElementsByTagName ("P");

Exemplo:

Html

Clique em mim

JavaScript

const btn = documento.getElementById ("btn");
btn.addEventListener ("clique", function ()
alerta ("você clicou em mim");
)

Neste exemplo, acessamos o elemento do botão usando getElementById (). Depois disso, colocamos um evento que sempre que um usuário clicar no botão, um alerta deve ser mostrado.

Podemos alcançar a mesma saída se usarmos:

const btn = documento.queryselector ("btn");

Deve -se ter em mente que temos que definir o atributo de classe no elemento do botão.

Conclusão

Vincular o JS ao HTML torna o seu site dinâmico e interativo. Neste post, ensinamos a você como vincular o JavaScript ao HTML. Discutimos as duas maneiras principais de realizar esta tarefa.

O primeiro foi usar JavaScript dentro do arquivo html. O segundo estava usando JavaScript fora do arquivo HTML usando um arquivo JavaScript. Para ser um desenvolvedor de front-end, é necessário trabalhar em HTML e JavaScript e este artigo mostrou como vincular ambos.