Hola. Dejo el Ejercicio CU01169E closures javascript, qué son, para qué sirven, ejemplos setTimeout del curso gratuito javascript desde cero de aprenderaprogramar.
a) ¿En qué parte del código se genera un closure o cerradura?
function cambiarDimensionFuente(size)
{ return function()
{
document.body.style.fontSize = size + 'px';
};
¿Por qué?
Porque recibe una variable local de su funcion contenedora.
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?
function setClicks()
{
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?
Uncaught TypeError: Cannot set property 'onclick' of null at ejerCU01169E.html:41
¿Por qué aparece ese mensaje de error?
Porque se hace la llamada a elementos del DOM antes de ser cargados
d) ¿Debemos escribir document.getElementById('fuente-8').onclick = size8; ó document.getElementById('fuente-8').onclick = size8(); ?
document.getElementById('fuente-8').onclick = size8;
¿Por qué?
Porque si escribimos size8() lo trata como una función y se presentará el tamaño de la letra con size=8 nada mas cargar la pagina.
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();?
size8()
¿Por qué?
Por que lo trata como a una funcion y se inicia nada mas cargar la pagina
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?
Que se pueden reutilizar como si fueran objetos.
¿Y qué inconvenientes?
Si se sobrecarga mucho el codigo de closures el interprete del navegador se ralentizaria mucho.
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 {
color:blue;
margin:10px;
}
</style>
<script type="text/javascript">
function cambiarDimensionFuente(size) {document.body.style.fontSize = size + 'px';}
var size8 =function(){cambiarDimensionFuente(8);}
var size16 =function(){cambiarDimensionFuente(16);}
var size24 =function(){ 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>
Tema: Uncaught TypeError: Cannot set property 'onclick' of null at JavaScript CU01169E (Leído 3362 veces)
RSS -
WAP2