Función de llamada de JavaScript desde otro archivo JS
- Función de llamada de JavaScript desde un archivo HTML
- Función de llamada de JavaScript de un archivo JS a otro archivo JS
-
Función de llamada de JavaScript usando ES6
ImportyExport - Función de llamada de JavaScript de un archivo JS a otro usando jQuery
Esta lección trata sobre la función de llamada de JavaScript desde otro archivo JS. Demuestra cómo llamar a una función de JavaScript en un archivo HTML y de un archivo JS a otro archivo JS usando la máquina local y un servidor en vivo.
Función de llamada de JavaScript desde un archivo HTML
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Function Call</title>
<script src="./first.js"></script>
</head>
<body>
<input
id="circleArea"
type="button"
value="Show Circle Area"
onclick="circleArea()"
/>
</body>
</html>
Código JavaScript:
const PI = 3.14
let radius = 3;
function circleArea() {
var inputField = document.createElement('INPUT');
inputField.setAttribute('type', 'text');
inputField.setAttribute('value', (PI * radius * radius));
document.body.appendChild(inputField);
}
La función circleArea() se ejecuta tan pronto como haga clic en el elemento input del tipo button. Calcula el área del círculo y lo muestra en el navegador.
El método createElement() crea un nodo de elemento con un nombre particular. Este nombre puede ser INPUT, BUTTON, P, u otra cosa.
Creamos un elemento de input en este código de ejemplo y establecemos dos atributos (type y value) utilizando el método setAttribute().
Establecemos su tipo en text y valor con un área circular. La función appendChild() añade un nuevo nodo que se comporta como el último hijo de un nodo.
Función de llamada de JavaScript de un archivo JS a otro archivo JS
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Call Function from One JS file into another</title>
<script src="first.js"></script>
<script src="second.js"></script>
</head>
<body>
<input
id="circleArea"
type="button"
value="Show Circle Area"
onclick="circleArea()"
/>
</body>
</html>
primero.js Código:
const PI = 3.14;
let radius = 3;
function calcArea() {
return PI * radius * radius;
}
segundo.js Código:
function circleArea() {
document.write((calcArea()).toFixed(2));
}
Calculamos el área del círculo nuevamente pero llamamos a la función calcArea desde first.js al archivo second.js.
El método document.write() escribe la salida en el navegador, y la función toFixed() convierte un número en una cadena y luego lo redondea a un número determinado de decimales. Imprimimos el área del círculo con dos decimales en este ejemplo.
Función de llamada de JavaScript usando ES6 Import y Export
Con ECMAScript6 (ES6), puede utilizar la función import/export. Con esto, puede importar/exportar funciones, variables, clases.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Call Function from One JS file into another</title>
<script type="module" src="./second.js"></script>
</head>
<body>
<button id="btn" onclick="circleArea()">Show Circle Area</button>
</body>
</html>
primero.js Código:
const PI = 3.14;
let radius = 3;
function calcArea() {
return PI * radius * radius;
}
export {calcArea};
second.js Código:
import {calcArea} from './first.js';
document.getElementById('btn').addEventListener('click', function circleArea() {
var inputField = document.createElement('INPUT');
inputField.setAttribute('type', 'text');
inputField.setAttribute('value', (calcArea()).toFixed(2));
document.body.appendChild(inputField);
});
Este código de ejemplo está exportando la función calcArea() desde el archivo first.js usando export {calcArea};. El archivo second.js importa primero esta función desde el archivo first.js; sólo entonces puede llamarlo. Recuerda agregar archivos con type="module" para import y export.
No necesita agregar ambos archivos .js; agregar el archivo importando la función es suficiente. Por ejemplo, estamos agregando un archivo second.js en el archivo HTML.
Para usar import y export, debe ejecutar su aplicación en un servidor (puede usar Node.js) porque no funciona en la máquina local. Puede usar la extensión live server en el código de Visual Studio y ejecutar su código usando Open with Live Server para fines de aprendizaje.
Para obtener más información sobre import y export, puede consultar este enlace.
Función de llamada de JavaScript de un archivo JS a otro usando jQuery
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Call Function from One JS file into another</title>
<script src="second.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input
id="circleArea"
type="button"
value="Show Circle Area"
onclick="circleArea()"
/>
</body>
</html>
primero.js Código:
const PiValue = 3.14;
let radius = 3;
function calcArea() {
return PiValue * radius * radius;
}
segundo.js Código:
function circleArea() {
$.getScript('first.js', function() {
document.write(calcArea());
});
}
Este código de ejemplo también calcula el área del círculo, pero usa jQuery para llamar a la función desde el archivo first.js al archivo second.js.
En el archivo second.js, la función de devolución de llamada se activa una vez que el script first.js está completamente cargado utilizando el método getScript(). El método document.write escribe la salida en el navegador devuelta por el método calcArea().
