Existem muitas maneiras de chamar uma função JavaScript no documento HTML e também não é uma tarefa difícil. Primeiro, usamos uma das maneiras mais fáceis de chamar um JavaScript função no documento HTML:
Neste método, criaremos e definiremos uma função na seção head do documento HTML. Para invocar esta função no documento html, temos que criar um botão simples e usando o ao clicar atributo de evento (que é um manipulador de eventos) junto com ele, podemos chamar a função clicando no botão.
Para entender mais claramente, vamos ver o programa fornecido:
Programa
concatenando strings
functionmyfunction() { alert('how are you'); } <p>Click the following button to see the function in action</p>
Explicação do programa
No programa fornecido acima, criamos um documento HTML simples. Dentro da seção head do documento HTML, definimos uma função ( por exemplo, minhafunção();) dentro das tags de script ... .
function myfunction() { alert('how are you'); }
Por outro lado, dentro da seção body, exibimos algum texto e criamos um botão. Para chamar nossa função, usamos o ao clicar atributo junto com o botão e quando o usuário clica nesse botão nossa função é executada e exibe uma mensagem de alerta, como você pode ver na saída.
Clique no botão a seguir para ver a função em ação
Saída
Chamando uma função usando arquivo JavaScript externo
Também podemos chamar funções JavaScript usando um arquivo JavaScript externo anexado ao nosso documento HTML. Para fazer isso, primeiro temos que criar um arquivo JavaScript e definir nossa função nele e salvá-lo com extensão (.Js).
Depois que o arquivo JavaScript for criado, precisamos criar um documento HTML simples. Para incluir nosso arquivo JavaScript no documento HTML, temos que usar a tag script e no atributo 'src' temos que fornecer o caminho para nosso arquivo JavaScript onde ele está armazenado. Após vincular o arquivo JavaScript externo ao documento HTML, podemos criar um botão e chamar o função usando o 'ao clicar' atribuir com ele.
Vamos entender isso com a ajuda de um programa:
Programa
Clique no botão a seguir para ver a função em ação
Explicação do programa
No programa acima, primeiro criamos um arquivo JavaScript e definimos nossa função nele e o salvamos com a extensão . js extensão.
Função.js
functionmyfunction() { document.write('welcome to Javatpoint'); }
Depois de criar o arquivo JavaScript, criamos um documento HTML e vinculamos nosso arquivo JavaScript usando . Como armazenamos nosso documento HTML e arquivo JavaScript na mesma pasta, apenas nomeamos nosso arquivo JavaScript no atributo 'scr' em vez de fornecer o caminho completo na seção head.
Dentro da seção body, exibimos algum texto e criamos um botão. Para chamar nossa função, usamos o ao clicar atributo junto com o botão e quando o usuário clica nesse botão nossa função é executada e exibe uma mensagem de alerta, como você pode ver na saída.
Clique no botão a seguir para ver a função em ação
Saída
Agora clique no botão fornecido: