Mostrar Mensajes

Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.


Mensajes - Dimitar Stefanov

Páginas: 1 ... 11 12 13 14 15 [16] 17 18 19 20 21 ... 30
301
Buenas tardes, César.

Primero que nada, gracias por corregir y revisar el ejercicio.

No sabes lo que me alegre leer que he logrado el cometido de los ejercicios. La verdad es que el segundo ejercicio me costó bastante hacerlo funcionar. He utilizado 11 funciones en total y estaba preocupado si no fueran muchas para este tipo de ejercicios. Vamos, que seguro que se podrá llegar a la misma funcionalidad con mucho menos codigo, pero espero que sea como tú dices, que un día pueda hacer códigos mucho mejores y más limpios.

Sí, a veces las variables y todo el lenguaje JavaScript en sí son un misterio, pero poco a poco se me van aclarando las cosas. Ahora voy por el tema de los closure en JavaScript, y no veas el lío que tengo en la cabeza, jejeje.

Un saludo.

302
Hola.

Propongo una posible solución del ejercicio CU01169E del curso JavaScript desde cero.

Citar
EJERCICIO

Analiza el siguiente código y responde a las siguientes preguntas:

Código: [Seleccionar]
<!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>

Citar
a) ¿En qué parte del código se genera un closure o cerradura? ¿Por qué?

Se produce en la parte:

Código: [Seleccionar]
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.

Citar
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?

Código: [Seleccionar]
document.getElementById('fuente-8').onclick = size8;
Citar
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:

Citar
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.

Citar
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".

Citar
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".

Citar
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.

Citar
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.

Código: [Seleccionar]
<!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.


303
Buenas. Aquí expongo una posible solución del ejercicio CU01168E del curso JavaScript desde cero.

Citar
EJERCICIO

Analiza el siguiente código y responde a las siguientes preguntas:

Código: [Seleccionar]
<!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>

Citar
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.

Citar
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.

Código: [Seleccionar]
<!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.

304
Buenas tardes. Con este hilo propondré una posible solución del ejercicio de la entrega CU01167E del curso JavaScript desde cero.

Citar
EJERCICIO

Analiza este código JavaScript y responde a las preguntas:

Código: [Seleccionar]
<!DOCTYPE html>

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">

<script type="text/javascript">

var target_date = new Date("Jan 1, 2089").getTime();

var days, hours, minutes, seconds;

function ejemplo() {

var countdown = document.getElementById("countdown");

setInterval(function () {

    var current_date = new Date().getTime();

    var seconds_left = (target_date - current_date) / 1000;

    days = parseInt(seconds_left / 86400);

    seconds_left = seconds_left % 86400;

    hours = parseInt(seconds_left / 3600);

    seconds_left = seconds_left % 3600;

    minutes = parseInt(seconds_left / 60);

    seconds = parseInt(seconds_left % 60);

    countdown.innerHTML = 'Para el 1 de enero de 2089 faltan '  +days+ ' días, ' + hours + " horas, "

    + minutes + " minutos, " + seconds + " segundos";

                }, 1000);

}

</script>

</head>

<body onload="ejemplo()" >

<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>

<span id="countdown"></span></div>
</body></html>

Citar
a) Haz una lista de las variables que intervienen indicando para cada variable cuál es su nombre, cuál es su tipo, cuál es su cometido y si está definida como variable global o variable local.
Ejemplo: la variable target_date es de tipo Date, su cometido es almacenar la fecha futura respecto de la cual el script va a mostrar los días, horas, minutos y segundos que faltan para alcanzar dicha fecha, y está definida como variable global.

1) La variable days es de tipo Number, su cometido es almacenar los días que quedan hasta la fecha futura mediante un cálculo matemático y está definida como variable global.

2) La variable hours es de tipo Number, su cometido es almacenar las horas que quedan hasta la fecha futura mediante un cálculo matemático y está definida como variable global.

3) La variable minutes es de tipo Number, su cometido es almacenar los minutos que quedan hasta la fecha futura mediante un cálculo matemático y está definida como variable global.

4) La variable seconds es de tipo Number, su cometido es almacenar los segundos que quedan hasta la fecha futura mediante un cálculo matemático y está definida como variable global.

5) La variable current_date es de tipo Date, su cometido es almacenar la fecha actual (en milisegundos), y está definida como variable local.

6) La variable seconds_left es de tipo Number, su cometido es almacenar los segundos restantes después de sacar los segundos que forman los días, horas y minutos. El resto son los segundos que quedan hasta la fecha futura. Está definida como variable local.

7) La variable countdown es de tipo Object, su cometido es acceder al elemento span. Está definida como variable global.

Citar
b) ¿Qué ocurre si definimos la variable current_date en el ámbito global en vez de dentro de la función? ¿Por qué ocurre esto?


Si definimos la variable current_date como variable global sólo se almacenará una vez la fecha actual (y el tiempo). De esta manera, al no llamarse continuamente mediante la función setInterval(funcion(){..},1000), no se almacenará cada segundo el tiempo y sólo nos mostrará el tiempo que queda hasta la fecha futura cuando carguemos la página, solamente una vez.

Citar
c) ¿Podríamos definir todas las variables como locales a la función y prescindir de las variables globales? Si se pudiera hacer, ¿crees que sería positivo para el diseño del código, su mantenimiento y ampliabilidad, o por el contrario, que sería negativo?

Sí se pondrán definir todas las variables como locales. Normalmente, en programación, cada función tiene su cometido y si definimos todas las variables como locales la función hará dos cometidos a la vez. Lo negativo sería que cargaremos mucho la memoria del compilador, porque cada vez que se invoque la función creará las variables, cuando podemos prescindir de ello y las variables que no se tengan que cambiar definirlas como globales.

Citar
d) ¿Qué métodos de los empleados en el código devuelven valores en milisegundos?

Los métodos que devuelven los valores en milisegundos son: .getTime(). Tanto en la variable global target_date como en la variable local current_date.

Gracias.

305
Buenas tardes.

A continuación pongo unas posibles soluciones de los ejercicios de la entrega CU01166E del curso JavaScript desde cero.

Primer ejercicio:

Citar
EJERCICIO 1

Realiza una descripción de cada una de las instrucciones del código del ejemplo anterior indicando cuál es su cometido. Si has seguido el curso desde el principio, debes ser capaz de interpretar todo el código.

Ejemplo: La primera línea <!DOCTYPE … realiza la declaración de tipo de documento HTML a efectos de que los navegadores interpreten en qué versión de HTML está escrito el código.

La etiqueta html es la etiqueta de apertura del código HTML. La etiqueta head es …

El código:

Código: [Seleccionar]
<!DOCTYPE html> <!-- Declaración del tipo de documento-->
<html> <!-- Se abre el "html"-->
<head> <!-- Se abre el "head"-->
<title>Cursos aprender a programar</title> <!-- El título de la página-->
<meta charset="UTF-8"> <!-- Declaración del unicode del documento-->
<meta name="description" content="Aprender a programar con cursos reconocidos por su calidad didáctica"/> <!-- La descripción de la página-->
<meta name="keywords" content="HTML, CSS, JavaScript, Java, Visual Basic, Joomla, PHP"/> <!-- Las palabras claves de la página-->
<style type="text/css"> /* Empezamos con los estilos de la página*/
*{
font-family: verdana, sans-serif; /* Establecemos, para cada elemento de la página una fuente de la familia "verdana" y en su defecto "sans-serif"*/
}
#principal{ /*para el elemento con id "principal"*/
text-align: center; /* que se centre el texto*/
width: 95%; /*el elemento que tenga una anchura de 95% respecto a su padre*/
margin: 0 auto; /*el elemento que tenga un margen automático (centrado) a la derecha y a la izquierda y 0 arriba y abajo*/
}
.tituloCurso{ /*para el elemento con class "tituloCurso"*/
color: white; /* que tenga un color blanco*/
float: left; /*que flote a la izquierda*/
padding: 36px 44px; /*que tenga un relleno (arriba y abajo) de 36px y 44px a la derecha e izquierda*/
font-size: 2.65em; /*la fuente que tenga una medida de 2.65em*/
font-style: bold; /* la fuente que sea gruesa*/
text-decoration: none; /*que no tenga ninguna decoración el texto (normalmente se pone para anular es subrayado de los enlaces)*/
}
a:hover{ /* cuando estemos encima de los enlaces*/
color: orange !important; /*que el color se convierta en naranja. La instrucción "!important" significa que esta característica prevalezca por encima de cualquier otra*/
}
</style> <!-- Cerramos los estilos-->
<script type="text/javascript"> //Abrimos el JavaScript

function ejemplo(){ //Funcion con nombre "ejemplo()"
var nodosTituloCurso = document.querySelectorAll('.tituloCurso'); //Seleccionamos mediante los selectores para el lenguaje CSS
var contador = 0; // definimos e inicializamos la variable "contador"
var nodosCambiados = new Array(); // definimos e inicializamos la variable "nodosCambiados" como una array
var tocaCambiar = true; //Inicializamos una variable de tipo boolean
setTimeout(function(){ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar)},1500); // para la función "ejemmploAccion()" un retardo de 1,5 segundo. También le pasamos parámetros
}

function ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar){ // función "ejemploAccion()" con parámetros: nodosTituloCurso, nodosCambiados, contador, tocaCambiar
if(contador<nodosTituloCurso.length){ // si el "contador" es más pequeño que la cantidad de "nodosTituloCurso"
var indice = Math.floor((Math.random()*(nodosTituloCurso.length))); //Inicilizamos una variable al azar multiplicada por el número de los "nodosTituloCurso" y la redondemos hacia abajo
if(nodosCambiados.length!=0){ // si la cantidad de "nodosCambiados" es diferente a cero
for(var i=0;i<nodosCambiados.length;i++){ //Un bucle que empiece con cero y que continúe mientras la variable "i" sea menor que la cantidad de "nodosCambiados"
if(nodosCambiados[i]==indice){tocaCambiar=false;} // si "nodosCambiados" con el correspondiente índice de la array es igual a la variable "indice" la variable "tocaCambiar" es false
}// Cerramos el bucle
}// Cerramos la condicional
if(tocaCambiar==true){ // si la variable "tocaCambiar" es igual a true
cambiarNodo(nodosTituloCurso[indice]); // invocamos la función "cambiarNodo" con parámetro array "nodosTituloCurso" con el índice correspondiente
nodosCambiados.push(indice); //añadimos a la array "nodosCambiados" el correspondiente índice
contador = contador+1; //Añadimos una unidad  a la variable "contador"
setTimeout(function(){ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar)},1500); //invicamos la función "ejemploAccion" con parámetros y retardo de 1,5 segundos
}else{tocaCambiar=true; ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar);} //si no es así, establecemos que la variable "tocaCambiar" sea false e invocamos la función "ejemploAccion" con parámetros
}//Cerramos la condicional
else{ //Caso base fin de la recursión
document.body.style.backgroundColor='black'; //El body que tenga un fondo negro
document.getElementById('principal').style.color = 'white'; // el elemento con id "principal" que tenga color blanco
for(var i=0;i<nodosTituloCurso.length;i++){ //Bucle empezado desde cero que se recorra mientras la variable "i" sea menos que los "nodosTituloCurso"
nodosTituloCurso[i].style.color = 'yellow'; // que los "nodosTituloCurso" tengan color amarillo
}// Cerramos el bucle

} // Cerramos el caso de base fin de la recursión
} // Cerramos la función "ejemploAccion()"

function cambiarNodo(elNodo){elNodo.style.backgroundColor = 'black';} // que los "nodosTituloCurso" tengan un fondo negro

</script> <!-- Cerramos el script de JavaScript-->
</head> <!-- Cerramos "head"-->
<body onload="ejemplo()"> <!-- Abrimos "body" e invocamos la función "ejemplo()" al cargarse la página-->
<div id="principal"> <!-- Abrimos el div con id "principal"-->
<h1>Cursos de programación</h1> <!-- Título principal-->
<h3>Reconocidos por su calidad didáctica</h3> <!-- Título secundario-->
<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=28&Itemid=59">Fundamentos</a></div> <!-- Enlace: Fundamentos-->
<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=68&Itemid=188">Java</a></div> <!-- Enlace: Java-->
<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192">HTML</a></div> <!-- Enlace: HTML-->
<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203">CSS</a></div> <!-- Enlace: CSS-->
<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206">JavaScript</a></div> <!-- Enlace: JavaScript-->
<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=70&Itemid=193">PHP</a></div> <!-- Enlace: PHP-->
<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=38&Itemid=152">Joomla</a></div> <!-- Enlace: Joomla-->
<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=37&Itemid=61">Visual Basic</a></div> <!-- Enlace: Visual Basic-->
<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=28&Itemid=59">Pseudocódigo</a></div> <!-- Enlace: Pseudocódigo-->
<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=section&layout=blog&id=7&Itemid=26">Libros/ebooks</a></div> <!-- Enlace: Libros/ebooks-->
<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=64&Itemid=87">Cursos tutorizados</a></div> <!-- Enlace: Cursos tutorizados-->
</div> <!-- Cerramos el div con id "principal"-->
</body> <!-- Cerramos body-->
</html> <!-- Cerramos html-->

El segundo ejercicio:

Citar
EJERCICIO 2

Crea una animación JavaScript (decide tú el efecto que quieres implementar: pueden ser cosas moviéndose por la pantalla, texto cambiando de tamaño o cualquier otra cosa que se te ocurra) con las herramientas que hemos ido conociendo a lo largo del curso. Ejecútalo en distintos navegadores y comprueba que se ejecute tal y como esperas en todos ellos.

El código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<style type="text/css">
body{
background-color: black;
}
#principal{
color: white;
background-color: black;
width: 1250px;
height: 700px;
border: solid 2px white;
}
#bienvenida{
text-align: center; 
width: 1200px;
height: 650px;
background: black;
color: white;
position: absolute;
top: 0;
left: 0;
z-index: 2;
padding: 40px;
}
#p01{
font-size: 36px;
}
#p02{
font-size: 40px;
}
#p03{
font-size: 20px;
}
#p04{
font-size: 36px;
}
#p04 span{
color: red;
font-size: 60px;
}
#soga01{
position: relative;
left: 25px;
}
#cuerda{
position: relative;
left: 25px;
top: -10px;
}
#soga2{
transform: rotate(180deg);
position: relative;
left: 13px;
top: -15px;
}
#bola{
border: solid white;
border-radius:40px;
color: white;
position: relative;
display: inline-block;
padding: 15px;
width: auto;
left: 23px;
background-color: red;
top: -20px;
z-index: 1;
}
#hr01{
position: absolute;
top: 640px;
border: solid 15px;
width: 20px;
left: 50px;
border-color: blue;
}
#hr02{
position: absolute;
top: 670px;
border: solid 2px yellow;
width: 200px;
left: 20px;
}
#hr03{
transform: rotate(90deg);
position: absolute;
left: 15px;
width: 350px;
border: solid 10px red;
top: 486px;
z-index: 1;
}
#hr04{
border: solid 2px;
position: absolute;
width: 250px;
top: 370px;
left: 140px;
}
#ventilador{
position: absolute;
top: 305px;
left: 320px;
transform: rotateY(70deg);
}
#marcoVentana{
border: solid 2px white;
width: 550px;
height: 400px;
position: absolute;
top: 213px;
left: 610px;
border: solid;
border-image: url(http://stefjogest.com/marco_ventana.gif);
border-image-slice: 42;
border-image-width: 20px;
background-image: url(http://stefjogest.com/playa.jpg);
}
#alaIzquierda{
position: absolute;
top: 230px;
left: 628px;
}
#alaDerecha{
position: absolute;
top: 231px;
left: 898px;
}
#cerradura{
position: absolute;
top: 445px;
left: 858px;
}
#cortina{
position: absolute;
top: 10px;
left: 570px;
width:680px;
height: 700px;
}
#cerilla{
position: absolute;
z-index: 1;
top: 100px;
left: 370px;
cursor: grab;
}
#llave{
position: absolute;
top: 125px;
left: 250px;
z-index: 1;
cursor: grab;"
}
#herramientas{
position: absolute;
border: solid 2px;
height: 150px;
top: 25px;
left: 225px;
cursor: grab;
}
#aprenderaprogramar{
position: absolute;
top: 350px;
left: 750px;
text-align: center;
transform: scale(0);
}
#aprenderaprogramar a{
color: orange;
text-decoration: none;
}
</style>
<script type="text/javascript">

var inicio;
var fin;

function quitarBienvenida(){
bienvenida.style.zIndex = -1;
inicio = new Date();
}

var sostenerCerilla = false;
var sostenerLlave = false;

function cogerCerilla(){
var div = document.getElementsByTagName('div');
div[0].onmousemove = moverCerilla;
div[0].ondblclick = quitar;
}

function quitar(){
var div = document.getElementsByTagName('div');
document.getElementById('principal').style.cursor = "auto";
div[0].onmousemove = function (){};
}


function moverCerilla(evobject){
var screenX = evobject.screenX;
var screenY = evobject.screenY;
cerilla.style.top = (screenY-63)+"px";
cerilla.style.left = (screenX-10)+"px";
sostenerCerilla = true;
sostenerLlave = false;
document.getElementById('principal').style.cursor = "none";
}

function cogerLlave(){
var div = document.getElementsByTagName('div');
div[0].onmousemove = moverLlave;
div[0].ondblclick = quitar;
}

function moverLlave(evobject){
var screenX = evobject.screenX;
var screenY = evobject.screenY;
llave.style.top = (screenY-63)+"px";
llave.style.left = (screenX-10)+"px";
sostenerLlave = true;
sostenerCerilla = false;
document.getElementById('principal').style.cursor = "none";
}



function detectarCerilla(){
setTimeout(quemarCuerda,500);
}


function quemarCuerda(){
if(sostenerCerilla==true){
cuerda.style.zIndex = "-1";
globalID = requestAnimationFrame(caida);
}
}


var i = 0;
var j = 180;
var k = 13;
var l = 30;

function caida(){
soga2.style.top = (i+10)+"px";
bola.style.top = i+"px";
i+=3;
globalID = requestAnimationFrame(caida);
if(i>300){
cancelAnimationFrame(globalID);
globalID01 = requestAnimationFrame(tumbarCuerda);

}
}

function tumbarCuerda(){
soga2.style.transform = "rotate("+j+"deg)";
soga2.style.top = i+"px";
soga2.style.left = k+"px";
j--; i++; k--
globalID01 = requestAnimationFrame(tumbarCuerda);
if(k<-50){
cancelAnimationFrame(globalID01);
globalID02 = requestAnimationFrame(girarAspas);
globalID03 = requestAnimationFrame(abrirCortina);
}
}

function girarAspas(){
document.getElementById('ventilador').style.transform = "rotateY(70deg) rotate("+l+"deg)";
globalID02 = requestAnimationFrame(girarAspas);
l=l+20;
}

var widthCortina=680;

function abrirCortina(){
document.getElementById('cortina').style.width = widthCortina+"px";
document.getElementById('cortina').style.left = (680-widthCortina)+570+"px";
widthCortina--;
globalID03 = requestAnimationFrame(abrirCortina);
if(widthCortina<70){
cancelAnimationFrame(globalID03);
}
}

var rotacionVentana = 0;
function abrirVentana(){
if(sostenerLlave==true){
var fin = new Date();
document.getElementById('alaIzquierda').style.transform = "rotateY("+rotacionVentana+"deg)";
document.getElementById('alaIzquierda').style.left = 627-(rotacionVentana*1.7)+"px";
document.getElementById('alaDerecha').style.zIndex = "1";
document.getElementById('alaDerecha').style.transform = "rotateY("+(rotacionVentana*(-1))+"deg)";
document.getElementById('alaDerecha').style.left = 897+(rotacionVentana*1.5)+"px";
document.getElementById('cerradura').style.display = "none";
var globalID04 = requestAnimationFrame(abrirVentana);
if(rotacionVentana>150){
cancelAnimationFrame(globalID04);
var resultado = ((fin-inicio)/1000)/60;
setTimeout(function(){tiempoRecurrido(resultado)},3000);
var globalID05 = requestAnimationFrame(aap);
}
rotacionVentana++;
}
}

function tiempoRecurrido(resultado){
bienvenida.innerHTML = '<div style="text-align: center; font-size: 40px; cursor: auto;"><img src="an_oliva_png.png"><br><a href="https://www.aprenderaprogramar.com/" style="color: orange; text-decoration: none;">aprenderaprogramar.com</a><p>Didáctica y divulgación de la programación</p><p style="color: red;">Has resuelto el misterio en: '+resultado.toFixed(2)+" minutos</p></div>";
alaDerecha.style.display = "none";
document.getElementById('bienvenida').style.zIndex = 2;
}

var escalaAap = 1;
var topAap = 0;
function aap(){
aprenderaprogramar.style.transform = "scale("+escalaAap+")";
aprenderaprogramar.style.top = (350-topAap)+"px";
aprenderaprogramar.style.left = (750-topAap)+"px";
escalaAap = escalaAap + 0.01;
topAap = topAap+3;
var globalID05 = requestAnimationFrame(aap);
}
</script>
</head>
<body>
<div id="principal">
<div id="bienvenida">
<h1>Bienvenido a nuestro juego</h1>
<p id="p01">Recuerda, para coger herramientas - un sólo click, para soltarlas - doble click</p>
<p id="p02">Buena suerte</p>
<p id="p03">¿Estas preparado?</p>
<button onclick="quitarBienvenida()">Sí</button><br><br><br>
<p id="p04">El navegador tienes que estar a <span>100% de zoom</span></p>
</div>
<img id="soga01" onmouseover="detectarCerilla()" src="http://stefjogest.com/soga201.gif"><br>
<img  id="cuerda" src="http://stefjogest.com/palito.gif"><br>
<img id="soga2" src="http://stefjogest.com/soga201.gif"><br>
<div id="bola">20kg</div>
<hr id="hr01">
<hr id="hr02">
<hr id="hr03">
<hr id="hr04">
<img id="ventilador" src="http://stefjogest.com/ventilador01.png">
<div id="marcoVentana">
</div>

<img id="alaIzquierda" src="http://stefjogest.com/ala_izquierda.gif">
<img id="alaDerecha" src="http://stefjogest.com/ala_derecha.gif">
<img id="cerradura" onmouseover="abrirVentana()" src="http://stefjogest.com/cerradura.gif"><br>
<img id="cortina" src="http://stefjogest.com/cortina.jpg">
<img onclick="cogerCerilla()" src="http://stefjogest.com/cerilla-07.gif" id="cerilla">
<img onclick="cogerLlave()" id="llave" src="http://stefjogest.com/llave.gif">
<div id="herramientas">
<h1>Herramientas:</h1>
</div>

<div id="aprenderaprogramar" onclick="aap()">
<img src="http://stefjogest.com/an_oliva_png.png"><br>
<a href="https://www.aprenderaprogramar.com/">aprenderaprogramar.com</a>
<p>Didáctica y divulgación de la programación</p>
</div>
</div>
</body>
</html>

Cómo podría evitar la utilización de tantas variables globales?

Gracias

PD: Los enlaces hacía las fotos nos es una publicidad de la página, simplemente tengo este dominio contratado para hacer pruebas y pensé que es más fácil así y no colgar todas las fotos en el foro.

306
Buenas, bermartinv.

Gracias por la observación. Creo que nadie se había dado cuenta de ese fallo.

Con la modificación que hice pienso que ahora contempla esas dos circunstancias.

Pongo el código modificado, a continuación:

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">

window.onload = function(){

var pregunta = confirm('Sabes cuál es la única palabra (en español) que contiene las 5 vocales"?');

if(pregunta==true){
var primeraToma = Date.now();
}else{}

var pista = ["M","u","r","c","i","e","l","a","g","o"];
var ayuda = ' ';
i = 0;

if(pregunta){
do{
var contestacion = prompt('Pon la respuesta aquí:');
contestacion = contestacion.toLowerCase();
if(contestacion!='murcielago' && i<pista.length-1){
ayuda = ayuda+pista[i];
alert('Respuesta Incorrecta!\nEmpieza por: '+ayuda);
i++;
}else if(contestacion!='murcielago'){
alert('La respuesta es: '+ayuda+pista[i]);
i++;
}
}while(contestacion!='murcielago' && i<pista.length);

var segundaToma = Date.now();

resultado = (segundaToma-primeraToma)/1000;

if(contestacion == "murcielago"){
alert("Has contestado en: "+resultado+" segundos!!!");
if(resultado<10){
alert('Eres un crack!!!');
}else if(resultado>10 && resultado<20){
alert('Eres un poco lento');
}else{
alert('Muy lento');
}
}else{
alert("No has podido contestar correctamente!\nHan pasado: "+resultado+" segundos desde que has empezado");
}
}
}

</script>
</head>
<body>
</body>
</html>

Compruébalo.

Gracias

307
Buenas tardes, SantiagoArg.

Me alegro que te tomes de esta manera mis consejos. Realmente intento hacer correcciones constructivas y compartir lo que ya sé con los que váis por temas anteriores.

Efectivamente, en estas alturas lo que tenéis que hacer es dar prioridad a la lógica del código y no tanto centraros en los detalles. Y tanto que con el tiempo sabremos más y más cosas para poder perfeccionar aquello que de momento se nos escapa (no por ignorancia, sino simplemente porque no hemos llegado a ello).

Un saludo y a seguir así.

PD: Tanto los moderadores, colaboradores o usuarios avanzados, intentamos responder lo más rápido posible a los ejercicios. En mi caso, estoy haciendo el curso de JavaScript y la verdad que a veces me ocupa mucho tiempo para comprender según que concepto. Pero intento colaborar a la medida que pueda :)

308
Aprender a programar desde cero / Re:Ejercicio Java CU00665B
« en: 30 de Marzo 2016, 00:51 »
Buenas noches, Ipeiro61.

Primero que nada, quería decirte que has cumplido con el cometido del ejercicio de la entrega CU00665B del curso Java desde cero.

Dicho esto, me gustaría comentarte varias cositas sobre los dos códigos.

En el código "ListaCantantesFamosos", en el método "addCantantes()" no hace falta que pases dos parámetros, dado que los dos contendrán información relacionado a un mismo atributo. Aunque el ejercicio pida que se entren dos cantantes, no hace falta pasarle dos parámetros, simplemente tienes que invocar dos veces el mismo método. ¿Y si fueran 50 cantantes los que tenías que ingresar?

En programación prima la economía y la reutilización de los códigos, así que, algo que podríamos hacer con una instrucción no hace falta que lo hagamos con dos.

Por lo tanto, el código de la clase "ListaCantantesFamosos" quedaría "mejor" así:

Código: [Seleccionar]
import java.util.ArrayList;

public class ListaCantantesFamosos
{
    private String nombreLista;
    private ArrayList<String> listaCantantes;
   
    public ListaCantantesFamosos(String nombre)
    {
        nombreLista = nombre;
        listaCantantes = new ArrayList<String>();
        listaCantantes.add("Sting");
        listaCantantes.add("Bob Dylan");
        listaCantantes.add("Loquillo");
    }
   
    public void addCantantes(String cantante)
    {
        listaCantantes.add(cantante);
    }
   
    public void getCantante(int posicion)
    {
       System.out.println(listaCantantes.get(posicion));
    }
   
    public int getTamanyo()
    {
        return listaCantantes.size();
    }
}

En el código "TestListaCantantes" te podrías ahorrar declarar las dos variables "primerCantante" y "segundoCantante" haciéndolo de la siguiente forma:

Código: [Seleccionar]
import java.util.Scanner;
public class TestListaCantantes
{
   public static void main(String[] args)
   {
       ListaCantantesFamosos1 lista = new ListaCantantesFamosos("Cantantes Famosos");
       
       String cantante;
       System.out.println("Introduce el primer cantante...");
       Scanner entrada = new Scanner(System.in);
       cantante = entrada.nextLine();
       lista.addCantantes(cantante); //Añadimos el primer cantante en la lista invocando el método "addCantantes()"
       System.out.println("Introduce el segundo cantante...");
       cantante = entrada.nextLine(); //Reutilizamos la variable cantante
       lista.addCantantes(cantante); //Añadimos el segundo cantante en la lista invocando el método "addCantentes()"
       
       System.out.println("\nLos cantantes son: ");
       int tamanyo = lista.getTamanyo();
       for(int i=0; i <tamanyo; i++)
       {
           lista.getCantante(i);
       }
   }
}

En relación con la consulta que haces al final de tu hilo, decirte que podrías modificar el valor de la variable "nombre" de un objeto "ListaCantentesFamosos" si tuvieras este:

Código: [Seleccionar]
public void setNombre(String nombre){
        nombreLista = nombre;
    }

método en la clase "ListaCantantesFamosos" e invocarlo posteriorme en la clase "TestListaCantantes" así:

Código: [Seleccionar]
lista.setNombre("aquiEscribesElNuevoValor");
Pero da la manera que tienes el constuctor de la clase "ListaCantantesFamosos" basta con pasarle como parámetro cualquier valor(nombre) que quieras para el atributo "nombreLista" y se te creará el objeto conteniendo dicho valor.

De todas maneras te recomiendo la lectura de:

https://www.aprenderaprogramar.com/foros/index.php?topic=1549.msg8169#msg8169

clasificado como un "ejercicio ejemplo".

Saludos.

309
Buenas noches, SantiadoArg.

El ejercicio lo veo correcto, sólo comentarte que pedía:

Citar
Se debe pedir al usuario un nombre más de cantante famoso, y una vez introducido mostrar la lista actualizada usando un for extendido.

Es decir, después de entrar el cantante tienes que mostrar otra vez la lista de los cantantes, pero esta vez actualizada. Eso lo conseguimos con invocar el método "listarCantantes()" después de la entrada.

También ten cuidado en las indicaciones hacia los usuarios que utilizan tu programa. Dices que se debe contestar con "Si" o "No" y luego, dentro del bucle introduces la condicional:

Código: [Seleccionar]
if( entrada.equals("si"))
Es decir, que si yo fuera usuario que utiliza tu programa y contesto con "Si" no me entrará en la condición. Puedes omitir la importancia de que si la entrada se haya hecho en mayúsculas o minúsculas convertiendo la misma sólo en minúsculas mediante en método "toLowerCase()", pero creo que en la altura de la entrega CU00666B del curso Java desde cero aún no habéis estudiado este tema.

Todo lo demás lo veo bien.

El código de la clase "Test" con las modificaciones que te comenté quedará así:

Código: [Seleccionar]
import java.util.Scanner;

public class Test
{
   public static void main(String[] args)
   {
       ListaCantantesFamosos lista = new ListaCantantesFamosos("Fenomenos");
       Scanner sc = new Scanner(System.in);
       String entrada = "";
       System.out.println("ingrese un nuevo cantante a la lista");
       lista.setCantante((entrada = sc.nextLine()));
       lista.listarCantantes();
       do
       {
           System.out.println("Desea ingresar un nuevo cantante? \"Si\" o \"No\"");
           entrada = sc.nextLine();
           entrada = entrada.toLowerCase(); //Convertir la variable "entrada" en miúsculas
           if( entrada.equals("si"))
           {
            System.out.println("Nombre:");
            lista.setCantante((entrada = sc.nextLine()));
           }           
           else
           {
               entrada = "no";
               lista.listarCantantes();
           }
       }while(!"no".equals(entrada));
       
       System.out.println("termino el programa");
   
   }
}

Pero ya te digo. Sobre la primera observación creo que te has despistado leyendo el cometido del ejercicio y no es un error porque no sabes.

Sobre el segundo, creo que es importante, no porque es un error grave, sino que el usuario se preguntará por qué no le da opción a entrar más cantantes si ha contestado que "Si".

A cerca de lo que comentas por qué no te ha listado el objeto "ListaCantantesFamosos lista", pues justamente por eso, porque es un objeto no es una array. Dentro de este objeto sí que tienes una variable que es una array y la recorres con el método "listarCantantes()" pero no lo es el objeto en sí. (Espero también que revise mi contestación un moderador de la página, porque no sé si te doy exactamente la explicación).

También quería felicitarte por el hecho de que te haya salido el ejercicio a la primera. Yo, con este ejercicio tenía bastantes más dificultades :)

Saludos.


310
Visto el código de Pedro.

Debo reconocer que es un código mucho más organizado que el mío y más estilizado. Utiliza los métodos "substing()" de forma adecuada y, de este modo,  ahorra la inclusión de variables innecesarias.

Saludos.

311
Buenas tardes, César Krall.

Primero que nada, gracias por tu tiempo y por corregirme el ejercicio.

Tienes razón, debería de haberlo puesto como una ejecución de un botón. Reconzco que mis códigos son un poco "caóticos" a veces, jeje. Tendría que tener más cuidado y hacerlos más organizados.

Sobre la fecha, es verdad, no me había dado cuenta. Lo modificaré. También miraré el enlace de Pedro.

Saludos.

312
Y tanto que tienes que seguir.

Piensa que todos hemos empezado desde cero :)

Saludos.

313
Tranquilo, no tengo nada que disculpar. Simplemente de esta manera intentamos que los foros se mantengan ordenados.

Saludos.

314
Buenas tardes. Os dejo unas posibles soluciones de los ejercicios de la entrega CU01165E del curso JavaScript.

Ejercicio 1:

Citar
EJERCICIO 1

Crea un script que genere un número aleatorio entre 1 y 100. A continuación debe pedir al usuario que adivine el número. Si el usuario responde un número menor al número aleatorio, debe mostrarse un mensaje “El número es mayor. Inténtelo de nuevo” y dar opción a responder de nuevo. Si el usuario responde un número mayor debe mostrarse un mensaje “El número es menor. Inténtelo de nuevo”. Si el usuario acierta debe mostrarse “Enhorabuena. Ha acertado”. El programa debe terminar si el usuario acierta o si se superan los 30 intentos sin acertar. En caso de superarse los 30 intentos debe mostrarse el mensaje “Ha superado 30 intentos. El programa termina”.

El código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">

var numeroAleatorio = Math.floor((Math.random()*100))+1;
var i=0;
alert('Se ha creado un número aleatorio entre 1 y 100.\nIntenta adivinarlo.');
while(i<30 && intento != numeroAleatorio){
var intento = prompt('Tu propuesta es: (Te quedan: '+(30-i)+' intentos)');
if(intento == numeroAleatorio){
alert('Enhorabuena. Ha acertado');
}else if(intento<numeroAleatorio){
alert('El número es mayor. Inténtalo de nuevo.');
}else{
alert('El número es menor. Inténtalo de nuevo.');
}
i++;
}

if(intento != numeroAleatorio){
alert('Ha superado 30 intentos. El programa termina\nEl número es: '+numeroAleatorio);
}

</script>
</head>
<body>

</body>
</html>

El ejercicio 2:

Citar
EJERCICIO 2

Crea un script que pida al usuario el dato de radio en metros de la base de un cilindro y el dato de altura del cilindro. Utilizando la propiedad Math.PI debe realizarse el cálculo para determinar el área de la base del cilindro y el volumen del cilindro y mostrar estos resultados. Consulta en internet si no recuerdas las fórmulas a aplicar. .

El código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">

var radio = prompt('Entra el radio:');
var altura = prompt('Entra la altura:');
var areaCilindro = (Math.PI*(Math.pow(radio,2))).toFixed(2);
alert('El área de la base del cilindro es: '+areaCilindro+'m y el volumen del cilindro es: '+(areaCilindro*altura)+'m');

</script>
</head>
<body>

</body>
</html>

Y el ejercicio 3:

Citar
EJERCICIO 3

Crea un script que dé lugar a lo siguiente:

a) En un div con id="volador” debes tener una palabra como <<JavaScript>>.

b) Utilizando las funciones trigonométricas, las propiedades de posicionamiento CSS y funciones para control de animaciones/tiempo debes dar lugar a que dicha palabra se desplace desde la izquierda hasta la derecha de la pantalla siguiendo un movimiento sinusoidal (es decir, subiendo y bajando suavemente describiendo ondas).

El código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<style type="text/css">
div{
border: solid black;
border-radius: 40px;
position: absolute;
background-color: red;
padding: 15px;
}
#div1{
top: 150px;
}
#div2{
top: 350px;
}
</style>
<script type="text/javascript">

var contador = 0;
var haciaDerecha = true;
var verticalDiv1 = 150;
var verticalDiv2 = 350;

function accion(){
requestAnimationFrame(mover);
}

function mover(){

verticalDiv1 = verticalDiv1+(Math.sin(contador*0.05));
verticalDiv2 = verticalDiv2+(Math.cos(contador*0.05));
div1.style.top = verticalDiv1+"px";
div2.style.top = verticalDiv2+"px";
div1.style.left = contador+"px";
div2.style.left = contador+"px";

var pantalla = (document.body.clientWidth - 100);

if(contador == pantalla){
haciaDerecha = false;
}
if(contador == 0){
haciaDerecha = true;
}

if(haciaDerecha == true){
contador++;
}else{
contador--;
}
requestAnimationFrame(mover);
}

</script>
</head>
<body onload="accion()">
<div id="div1">JavaScript</div>
<div id="div2">JavaScript</div>
</body>
</html>

Para la soluciones del último ejercicio he utilizado las soluciones de los hilos de los campañeros: "pedro,," y "bermartinv".

Gracias.

315
Buenas tardes Ipeiro61.

Tu código cumple con el cometido del ejercicio. A nivel de sintaxis,  todo lo veo correcto.

De todas formas, si quieres, consulta más soluciones para una mayor diversidad (no en tu código, sino en general).

Saludos.

316
Hola Ipeiro61.

Tienes que poner tu solución de ejercicio en un hilo nuevo. Es decir, tienes que crear un tema nuevo.

Saludos.

317
Buenas tardes, Pandemia.

Creo que has hecho una perfecta interpretación de las propiedades CSS.

Saludos.

318
Buenas noches. Cuelgo las posibles soluciones de los ejercicios de la entrega CU01164E del curso JavaScript desde cero.

Primer ejercicio:

Citar
EJERCICIO 1

Crea un reloj JavaScript que marque los segundos usando el método setInterval.

El código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<style type="text/css">
div{
text-align: center;
font-size: 50px;
margin-top: 100px;
}
</style>
<script type="text/javascript">

window.onload = function(){
setInterval(function(){reloj()},500);
}

function reloj(){
var div = document.getElementsByTagName('div');
var date = new Date();
var hora = date.getHours();
var minutos = date.getMinutes();
minutos = anyadir0(minutos);
var segundos = date.getSeconds();
segundos = anyadir0(segundos);
div[0].innerHTML = 'La hora es: '+hora+':'+minutos+':'+segundos;
}

function anyadir0(t){
if(t<10){
t = '0'+t;
}
return t;
}

</script>
</head>
<body>
<div></div>
</body>
</html>

El segundo ejercicio:

Citar
EJERCICIO 2

Crea un reloj JavaScript que marque los segundos usando el método requestAnimationFrame.

El código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">

function reloj(){
globalID = requestAnimationFrame(mostrarReloj);
}

function mostrarReloj(){
var div = document.getElementsByTagName('div');
var date = new Date();
var hora = date.getHours();
var minutos = date.getMinutes();
minutos = anyadir0(minutos);
var segundos = date.getSeconds();
segundos = anyadir0(segundos);
div[0].textContent = "La hora es:"+hora+":"+minutos+":"+segundos;
globalID = requestAnimationFrame(mostrarReloj);
}

function anyadir0(t){
if(t<10){
t = '0'+t;
}
return t;
}

</script>
</head>
<body onload="reloj()">
<div style="text-align: center; font-size: 60px; padding-top: 100px;"></div>
</body>
</html>

Y el tercer ejercicio:

Citar
EJERCICIO 3

Crea un reloj JavaScript que marque inicialmente 01:00 (es decir, 1 minuto) y que marche hacia atrás (00:59, 00:58, 00:57 … etc.) hasta llegar a 00:00. Cuando llegue a 00:00 debe deternerse y mostrar el mensaje: “Tu tiempo ha terminado”.

El código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<style type="text/css">
div{
text-align: center;
font-size: 60px;
margin-top: 100px;
}
</style>
<script type="text/javascript">

var i=59;
var restar = setInterval(restar,1000);
var cambiar01 = setTimeout(cambiar01,1000);
var msn = setTimeout(msn,62000);

function cambiar01(){
document.getElementById('01').innerHTML = '00:';
}

function restar(){
document.getElementById('02').textContent = i;
i--;
if(i<0){
clearInterval(restar);
}else if(i<10){
i = '0'+i;
}
}

function msn(){
document.getElementById('principal').innerHTML = 'La cuenta atrás ha finalizado!!!';
}

</script>
</head>
<body>
<div><span>Cuenta atrás:</span>
<div id="principal"><span id="01">01:</span><span id="02">00</span></div>
</div>
</body>
</html>

Gracias.

319
Buenas tardes.

Procedo a la exposición de una posible soluciones de los ejercicios de la entrega CU01163E del curso JavaScript desde cero.

Primer ejercicio:

Citar
EJERCICIO 1

Crea un script donde se calcule el tiempo en minutos entre que se formula primera petición al usuario y este responde, y entre una segunda petición al usuario y este responde. Ejemplo:

Introduzca su nombre: Alfredo >> Introduzca su país: Colombia >> Han pasado 0.122 minutos entre su primera y segunda respuesta.

Otro ejemplo: Introduzca su nombre: Juan >> Introduzca su país: Chile >> Han pasado 0.73 minutos entre su primera y segunda respuesta.

El codigo:

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">

window.onload = function(){

var pregunta = confirm('Al pulsar aceptar comienza a contar el tiempo. Sabes cuál es la única palabra (en español) que contiene las 5 vocales"?');

if(pregunta==true){
var primeraToma = Date.now();
}else{};

var pista = ["M","u","r","c","i","e","l","a","g","o"];
var ayuda = ' ';
i = 0;

do{
var contestacion = prompt('Pon la respuesta aquí:');
contestacion = contestacion.toLowerCase();
if(contestacion!='murcielago' && i<pista.length-1){
ayuda = ayuda+pista[i];
alert('Respuesta Incorrecta!\nEmpieza por: '+ayuda);
i++;
}else if(contestacion!='murcielago'){
alert('La respuesta es: '+ayuda+pista[i]);
i++;
}
}while(contestacion!='murcielago' && i<pista.length);

if(contestacion){
var segundaToma = Date.now();
}

resultado = (segundaToma-primeraToma)/1000;

alert("Has contestado en: "+resultado+" segundos!!!");
if(resultado<10){
alert('Eres un crack!!!');
}else if(resultado>10 && resultado<20){
alert('Eres un poco lento');
}else{
alert('Muy lento');
}
}

</script>
</head>
<body>
</body>
</html>

El segundo ejercicio:

Citar
EJERCICIO 2

Crea un script donde pida al usuario que introduzca una primera fecha (fecha1) en formato dd-mm-yyyy, y una segunda fecha en el mismo formato y calcule los días que han pasado entre las dos fechas . Ejemplo: Introduzca la fecha 1: 05-09-2076 >> Introduzca la fecha 2: 09-09-2076 >> Entre las 00:00 horas del primer día a las 00:00 del segundo hay 4 días.

El código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<style type="text/css">
#principal{
text-align: center;
padding: 100px;
font-size: 24px;
}
</style>
<script type="text/javascript">

var primeraEntrada = prompt('Entra una fecha en formato: aaaa-mm-dd');
primeraEntrada = primeraEntrada+'T00:00:00';
primeraEntrada = Date.parse(primeraEntrada);

var segundaEntrada = prompt('Entra una segunda fecha en formato: aaaa-mm-dd');
segundaEntrada = segundaEntrada+'T00:00:00';
segundaEntrada = Date.parse(segundaEntrada);

if(segundaEntrada<primeraEntrada){
var resultado = ((((primeraEntrada - segundaEntrada)/1000)/60)/60)/24;
}else{
var resultado = ((((segundaEntrada - primeraEntrada)/1000)/60)/60)/24;
}

if(resultado == 1){
resultado = 'Entra las dos fechas ha pasado: '+resultado+' día';
}else{
resultado = 'Entra las dos fechas han pasado: '+resultado+' días';
}

window.onload = function(){
principal.innerHTML = resultado;
}

</script>
</head>
<body>
<div id="principal"></div>
</body>
</html>

Gracias.

320
Graicas por corregirme el ejercicio, Pedro.

Las modificaciones que mencionas las he corregido. Después miraré, a ver como puedo sustituir también las variables: msn01, msn02, etc.

Gracias.

Saludos.

Páginas: 1 ... 11 12 13 14 15 [16] 17 18 19 20 21 ... 30

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".