Hola, dejo la solución a un nuevo ejercicio.
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é?
En las tres lineas que hay dentro de la función 'setClicks()'. Por que desde dentro de la función 'setClicks()' estamos usando variables definidas con ámbito global.
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?
Dentro de la función setClicks().
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?
'TypeError: document.getElementById(...) is null'. Haciendo referencia a la linea 19.
Porque cuando el interpreté lee la dicha linea, todavía no se ha cargado el elemento div con id='fuente-8' al que hace referencia.
d) ¿Debemos escribir document.getElementById('fuente-8').onclick = size8; ó document.getElementById('fuente-8').onclick = size8(); ?¿Por qué?
Si lo escribimos de esta manera 'document.getElementById.('fuente-8').onclick=size8();', se tomaría size8() como una función y se ejecutaría nada más cargar la página. Sin necesidad de hacer click sobre el texto. Es decir, el tamaño de letra pasaría a ser 8px.
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?
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 cambiarDimensionFuente(size) {
document.body.style.fontSize = size + 'px';
}
</script>
</head>
<body>
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>
<div id ="fuente-8" onclick="cambiarDimensionFuente(8)"> Poner texto a 8 </div>
<div id ="fuente-16" onclick="cambiarDimensionFuente(16)"> Poner texto a 16 </div>
<div id ="fuente-24" onclick="cambiarDimensionFuente(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>
Mostrar Mensajes
RSS