Llamar a la función de JavaScript en la carga de la página
- Función de JavaScript que toma variables como parámetro
- Función de llamada de JavaScript que toma funciones como argumento en la carga
Una función que se puede llamar cada vez que se carga la página web. Esta convención depende del objeto del navegador window
y su propiedad onload
. La forma básica de saber que se está llamando a su función es verificar el panel de la consola.
Para el ejemplo demostrativo, consideraremos una estructura HTML, donde queremos visualizar cómo será nuestra salida. Y cada vez que recarguemos la página web, el panel de la consola responderá a una instrucción determinada dirigida por la propiedad window.onload
.
Función de JavaScript que toma variables como parámetro
Aquí, usaremos una función que toma variables como argumentos. Además, la unidad de codificación experimentada en jsbin es para obtener una mejor comprensión. Puede, de cualquier manera, usar su navegador y el editor que prefiera.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body onload = func()>
<p id="output"></p>
<script>
var x = 40;
var y = 2;
function func(x, y){
return x+y;
}
window.onload = function(){
console.log(func(x,y));
}
document.getElementById('output').innerHTML = func(x,y);
</script>
</body>
</html>
Producción:
En este caso, la parte del script se agregó dentro del cuerpo HTML y, como puede ver, en cada carga de la página web, la consola tiene un valor, lo que explica que el código general está funcionando.
Además, el caso de uso básico para window.onload
es garantizar que la página se cargue correctamente cada vez. Lo más probable es que funcione como un parámetro para garantizar un bloque de código sin errores en su HTML. Por lo tanto, puede usarlo en cualquier lugar según su conveniencia.
Función de llamada de JavaScript que toma funciones como argumento en la carga
Los siguientes ejemplos explicarán la función de la propiedad window.onload
de manera diferente. Usaremos una sección de código HTML y una sección de código JavaScript individual. Los parámetros de nuestra función son algunas otras funciones.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<style>
p{
background: white;
}
</style>
</head>
<body onload = func()>
<p id="output"></p>
</body>
</html>
function f1() {
return '4';
}
function f2() {
return '2';
}
function func(f1, f2) {
return f1() + f2();
}
window.onload =
function() {
console.log(func(f1, f2));
}
document.getElementById('output')
.innerHTML = func(f1, f2);
Producción:
Desde el escenario de salida, cada vez que se presiona Ejecutar con JS
, brinda una experiencia similar a la de cargar una página web. El código no tiene ningún error, y esa es la declaración inferible que podemos derivar al llamar a una función en cada carga de página.