Hola.
Propongo una posible solución del ejercicio CU01169E del curso JavaScript desde cero.
EJERCICIO
Analiza el siguiente código y responde a las siguientes preguntas:
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body { font-family: Helvetica, Arial, sans-serif;}
h2 { font-size: 1.5em;} h3 { font-size: 1.2em;}
div div {color:blue; margin:10px;}
</style>
<script type="text/javascript">
function cambiarDimensionFuente(size) { return function() { document.body.style.fontSize = size + 'px';};
}
var size8 = cambiarDimensionFuente(8);
var size16 = cambiarDimensionFuente(16);
var size24 = cambiarDimensionFuente(24);
function setClicks(){
document.getElementById('fuente-8').onclick = size8;
document.getElementById('fuente-16').onclick = size16;
document.getElementById('fuente-24').onclick = size24;
}
</script></head>
<body onload="setClicks()">
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>
<div id ="fuente-8" > Poner texto a 8 </div> <div id ="fuente-16" > Poner texto a 16 </div>
<div id ="fuente-24" > Poner texto a 24 </div> </div>
<p>En las praderas de la estepa de la Tierra del Fuego suele hacer frío</p>
</body></html>a) ¿En qué parte del código se genera un closure o cerradura? ¿Por qué?
Se produce en la parte:
return function(){
document.body.style.fontSize = size+'px';
};Se genera justamente en esta parte del código porque el closure se genera cuando una función interna a otra función usa una variable local (o parámetro recibido) de la función externa.
b) ¿En qué parte del código se establece que al hacer click sobre el elemento con id fuente-8 se cambie el tamaño de las fuentes de la página?
document.getElementById('fuente-8').onclick = size8;c) Supón que eliminamos la función setClicks y dejamos su código “libre” dentro de las etiquetas <script> … </script>. ¿Qué mensaje de error te muestra la consola de depuración? (Activa la consola si no la tienes activada) ¿Por qué aparece ese mensaje de error?
El mensaje de error es el siguiente:
TypeError: document.getElementById(...)is null
Se produce este error porque aún no se han cargado los elementos del DOM cuando el compilador intenta acceder a ellos.
d) ¿Debemos escribir document.getElementById('fuente-8').onclick = size8; ó document.getElementById('fuente-8').onclick = size8(); ?¿Por qué?
Podemos escribir las dos instrucciones. Depende cúal es nuestro cometido. Si queremos ejecutar la variable "size8" ejecute a la vez la función que tiene asociada escribiremos "size8()" y si no, escribiremos "size8".
e) Supón que al cargar la página queremos que el tamaño inicial de fuente sea 8 y para ello nos valemos de la función setClicks. ¿Debemos escribir dentro de esta función size8; ó size8();? ¿Por qué?
Tendremos que escribir "size8()" porque así inmediantemente se dará lugar a la ejecución de la función que va inicializada a la variable "size8".
f) Las closures no siempre son necesarias, incluso a veces se generan involuntariamente o innecesariamente consumiendo recursos del sistema que podrían ahorrarse. ¿Qué ventajas le ves al uso de closures en este código? ¿Y qué inconvenientes?
Las ventajas son que se puede reutilizar una función con varios parámetros distintos. Desventajas: que consume recursos y hace más lenta la ejecución del código.
g) Reescribe el código (hazlo como mejor creas cambiando todo aquello que consideres necesario) de forma que obtengamos el mismo resultado pero sin hacer uso de closures.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<style type="text/css">
body{
font-family: Helvetica, Arial, sans-serif;
}
h2{
font-size: 1.5em;
}
h3{
font-size: 1.2em;
}
div div{
color: blue;
margin: 10px;
}
</style>
<script type="text/javascript">
function setClicks(){
document.getElementById('fuente-8').onclick = function(){cambiarDimensionFuente(8);}
document.getElementById('fuente-16').onclick = function(){cambiarDimensionFuente(16);}
document.getElementById('fuente-24').onclick = function(){cambiarDimensionFuente(24);}
}
function cambiarDimensionFuente(size){
document.body.style.fontSize = size+'px';
}
</script>
</head>
<body onload="setClicks()">
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplo JavaScript</h3>
<div id="fuente-8">Poner texto a 8</div>
<div id="fuente-16">Poner texto a 16</div>
<div id="fuente-24">Poner texto a 24</div>
</div>
<p>En las praderas de la estepa de la Tierra del Fuego suele hacer frío</p>
</body>
</html>Gracias.
Tema: JavaScript TypeError: document.getElementById(...)is null closure CU01169E (Leído 4648 veces)
RSS -
WAP2