Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Dimitar Stefanov en 05 de Abril 2016, 17:30
-
Buenas. Aquí expongo una posible solución del ejercicio CU01168E 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">
<script type="text/javascript">
function ejemplo() {
var cabecera = document.querySelector('#cabecera');
var respuestaCabecera = function () {
alert(this);
setTimeout(function () { alert(this);}, 2000);
};
cabecera.addEventListener('click', respuestaCabecera, false);
}
</script>
</head>
<body onload="ejemplo()"><div id="cabecera"><h2>Cursos aprenderaprogramar.com HAZ CLICK AQUÍ</h2><h3>Ejemplos JavaScript</h3></div>
</body>
</html>
a) ¿Por qué se muestran diferentes mensajes si en ambos alert estamos invocando this?
El primer this que se muestra hace referencia al elemento DOM que tiene asociado el evento, en cambio, en el segundo this hace referencia al objeto global window.
b) Modifica el código para que el mensaje que se muestre con retardo muestre lo mismo que el mensaje que se muestra sin retardo. Para ello, haz que en la función anónima sea conocida la referencia a this que existe en la funcion externa.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">
function ejemplo(){
var cabecera = document.querySelector('#cabecera');
var respuestaCabecera = function(){
alert(this);
var that = this;
setTimeout(function(){alert(that);},2000);
};
cabecera.addEventListener('click',respuestaCabecera, false);
}
</script>
</head>
<body onload="ejemplo()">
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com HAZ CLICK AQUÍ</h2>
<h3>Ejemplo JavaScript</h3>
</div>
</body>
</html>
Gracias.
-
Hola! Todo bien!
Saludos!