El ejercicio de la entrega CU01169E del tutorial JavaScript desde cero propone analizar un código y responder unas preguntas:
a) ¿En qué parte del código se genera un closure o cerradura? ¿Por qué?
La closure sstá en la funcion interna de cambiarDimensionFuente, esta función interna usa la variable global 'size' que se obtiene de la definición de la funcion.
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?
En la funcion setClicks define todos los eventos onclick que queremos que realice.
'document.getElementById('fuente-8').onclick=size8;
esta definicion del evento onclick, nos lleva a la variable global que está definida por la llamada de otra función cambiarDimensionFuente(size) y que define el tamaño de la fuente del texto que se encuentra dentro de una etiqueta con un id='fuente-8'.
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?
si no tenemos la funcion setClicks no está definido los eventos onclick. ada variable global tendrá un fontSize definido pero no se asigna a las etiquetas del codigo existentes.
" ReferenceError: setClicks is not defined "
d) ¿Debemos escribir document.getElementById('fuente-8').onclick = size8; ó document.getElementById('fuente-8').onclick = size8(); ?¿Por qué?
Si escribimos size8(), se toma como si fuera una función.
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é?
size8()
Porque de esa manera usamos size8 como una función, si pusiésemos solo size8; no pasaría nada.
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?
Como ventaja veo que se pueden definir elementos denuestras paginas como si la closure fuese el constructor de un objeto permitiendote la reusabilidad.
Como desventaja que tienes que tener muy claro su funcionamiento, que no es fácil.
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><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 size8(){
document.body.style.fontSize = 8 +'px';
}
function size16(){
document.body.style.fontSize = 16 +'px';
}
function size24(){
document.body.style.fontSize = 24 +'px';
}
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>Saludos
Tema: Qué son los closures en JavaScript cierres, cerraduras o clausuras CU01169E (Leído 2977 veces)
RSS -
WAP2