logo

¿Cómo llamar a la función JavaScript en html?

Hay muchas formas de llamar a una función de JavaScript en un documento HTML y tampoco es una tarea difícil. Primero, hemos utilizado una de las formas más sencillas de llamar a un javascript función en documento HTML:

En este método, crearemos y definiremos una función en la sección principal del documento HTML. Para invocar esta función en el documento html, tenemos que crear un botón simple y usando el al hacer clic atributo de evento (que es un controlador de eventos) junto con él, podemos llamar a la función haciendo clic en el botón.

Para entenderlo más claramente veamos el programa dado:

Programa

lista de dardos
 functionmyfunction() { alert(&apos;how are you&apos;); } <p>Click the following button to see the function in action</p> 

Explicación del programa

En el programa anterior, hemos creado un documento HTML simple. Dentro de la sección de encabezado del documento HTML, hemos definido una función ( por ejemplo mi función();) dentro de las etiquetas del script ... .

 function myfunction() { alert(&apos;how are you&apos;); } 

Por otro lado, dentro de la sección del cuerpo, mostramos algo de texto y creamos un botón. Para llamar a nuestra función, hemos utilizado el al hacer clic atributo junto con el botón y cuando el usuario hace clic en ese botón, nuestra función se ejecuta y muestra un mensaje de alerta, como puede ver en el resultado.

Haga clic en el siguiente botón para ver la función en acción

Producción

Cómo llamar a la función JavaScript en html

Llamar a una función usando un archivo JavaScript externo

También podemos llamar a funciones de JavaScript utilizando un archivo JavaScript externo adjunto a nuestro documento HTML. Para hacer esto, primero tenemos que crear un archivo JavaScript, definir nuestra función en él y guardarlo con la extensión (.Js).

Una vez creado el archivo JavaScript, necesitamos crear un documento HTML simple. Para incluir nuestro archivo JavaScript en el documento HTML, debemos usar la etiqueta script y en el atributo 'src' debemos proporcionar la ruta a nuestro archivo JavaScript donde está almacenado. Después de vincular el archivo JavaScript externo al documento HTML, podemos crear un botón y llamar al función utilizando el 'al hacer clic' atributo con él.

Entendamoslo con ayuda de un programa:

Programa

Haga clic en el siguiente botón para ver la función en acción

Explicación del programa

Primero, en el programa anterior, creamos un archivo JavaScript, definimos nuestra función en él y lo guardamos con el archivo . js extensión.

Función.js

 functionmyfunction() { document.write(&apos;welcome to Javatpoint&apos;); } 

Después de crear el archivo JavaScript, creamos un documento HTML y vinculamos nuestro archivo JavaScript usando . Debido a que hemos almacenado nuestro documento HTML y nuestro archivo JavaScript en la misma carpeta, acabamos de nombrar nuestro archivo JavaScript en el atributo 'scr' en lugar de proporcionar la ruta completa en la sección principal.

 

Dentro de la sección del cuerpo, mostramos algo de texto y creamos un botón. Para llamar a nuestra función, hemos utilizado el al hacer clic atributo junto con el botón y cuando el usuario hace clic en ese botón, nuestra función se ejecuta y muestra un mensaje de alerta, como puede ver en el resultado.

Haga clic en el siguiente botón para ver la función en acción

Producción

Cómo llamar a la función JavaScript en html

Ahora haga clic en el botón indicado:

Cómo llamar a la función JavaScript en html