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 30 de Abril 2016, 19:11
-
Buenas tardes. Aquí os expongo una posible solución del ejercicio CU01191E del curso JavaScript desde cero.
EJERCICIO
Un programador ha creado este código y nos han pedido que lo mejoremos. Revísalo y responde a las siguientes cuestiones:
<HTML><HEAD><TITLE>JavaScript Index</TITLE><script Language="JavaScript">
function goback(){alert("Good Bye!");history.go(-1);}
function getthedate() {Todays = new Date();
TheDate = "" + (Todays.getMonth()+ 1) +" / "+ Todays.getDate() + " / " +
Todays.getYear()
document.clock.thedate.value = TheDate;
}
var timerID = null;
var timerRunning = false;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function startclock () { stopclock(); getthedate()
showtime();
}
function showtime () {
var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = "" + ((hours >12) ? hours -12 :hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += (hours >= 12) ? " P.M." : " A.M."
document.clock.face.value = timeValue;
timerID = setTimeout("showtime()",1000); timerRunning = true;
}
</script>
</HEAD>
<BODY bgcolor="#00FFFF" onLoad="startclock()">
<CENTER><h2>Esto es un reloj hecho con JavaScript</h2>
<table border><tr>
<td><form name="clock" onSubmit="0"></td>
</tr>
<tr>
<td colspan=2>Hoy es: <input type="text" name="thedate" size=12 value=""></td>
<td colspan=2>La hora es: <input type="text" name="face" size=12
value=""></td></form>
</tr>
</table>
</CENTER>
<hr>
<center>
<h3>
[<a href="http://aprenderaprogramar.com">Volver</a>]
</h3></center></BODY></HTML>
a) Reescribe el código HTML que presenta distintas deficiencias y no se ajusta a las normas de estilo habituales.
b) Reescribe el código JavaScript para que cumpla con las normas de estilo que hemos estudiado.
c) Corrige el código del reloj para que se vea una mejor presentación y funcione correctamente.
d) Incluye comentarios en el código indicando qué es lo que hacen las diferentes partes del código JavaScript.
e) Como resultado de este ejercicio debes presentar el código con todos los cambios antes mencionados.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Index</title>
<script type="text/javascript">
function goBack(){ //Función "goback()"
alert('Good Bye!'); //Alerta "GoodBye"
var haciaAtras = history.go(-1); // Equivale al método "history.back()", un url para atrás
}
function getTheDate(){ //Función "getthedate()"
var today = new Date(); //Captura el instante al crearse este nuevo Objeto
var theDate = + today.getDate()+' / ' +(today.getMonth()+ 1) + ' / ' + today.getFullYear(); //Recuperamos día, mes y año
document.getElementsByName('thedate')[0].value = theDate; //El value del campo "thedate" pasa a ser el contenido de la variable "theDate"
}
var timerId; // Variable global
function startClock(){ //Función "startClock"
var optenerFecha = getTheDate(); //Invocamos la función "getTheDate()"
var mostrarHora = showTime(); //Invocamos la función "showTime()"
}
function showTime(){ //Función "showTime()"
var now = new Date(); //Creación del Objeto Time() con la fecha y hora actual
var hours = now.getHours(); //Recuperar las horas
var minutes = now.getMinutes(); //Recuperar los minutos
var seconds = now.getSeconds(); //Recuperar los segundos
var timeValue = ((hours >12) ? hours -12 :hours); //Si las horas es más que 12 que reste 12 del valor de las horas, si no, que las horas se queden con su valor
timeValue += ((minutes < 10) ? ':0' : ':') + minutes; //Si el valor de los minutos es menos que 10 que se añada un cero delante. Es lo mismo escribir "timeValue +=" que "timeValue = timeValue +"
timeValue += ((seconds < 10) ? ':0' : ':') + seconds; //Si el valor de los segundos es menos que 10 que se añada un cero delante
timeValue += (hours >= 12) ? ' P.M.' : ' A.M.'; // Si es valor de las horas es mayor o igual que 12 que ponga P.M., si no, que ponga A.P.
document.getElementsByName('face')[0].value = timeValue; //El value del campo con name "face" que adopte el valor de la variable "timeValue"
timerId = setTimeout('showTime()',1000); //Invocación de la función "showTime()" con retardo de un segundo (1000 milisegundos)
}
</script>
</head>
<body style="background-color: #00FFFF; text-align: center;" onload="startClock()">
<h2>Esto es un reloj hecho con JavaScript</h2>
<table style="border: solid; margin: auto;">
<tr>
<td>Hoy es: <input type="text" name="thedate" style="font-size: 12px; text-align: center;" value=""></td>
<td>La hora es: <input type="text" name="face" style="font-size: 12px; text-align: center;" value=""></td>
</tr>
</table>
<hr>
<h3>
<span>[</span><a href="http://aprenderaprogramar.com" onclick="goBack();">Volver</a><span>]</span>
</h3>
</body>
</html>
Gracias.
-
Buenos días, te comento algunos detalles. Has incluido algunos comentarios que resultan poco útiles, por ejemplo function goBack(){ //Función "goback()"
Ahí el comentario //Función "goback()" sirve para poco. Lo que sería útil es que además de eso añadieras una descripción de para qué sirve cada función, qué significado tienen los parámetros que reciben, etc. Por ejemplo "Esta función sirve para... tal cosa"
Si no utilizas el indentado automático te recomiendo que lo uses porque en general resulta beneficioso. Casi todos los editores o ides lo permiten. Lo comentamos en https://www.aprenderaprogramar.com/foros/index.php?topic=4030.0
Saludos
-
Buenos días, Mario.
Gracias por corregirme el ejercicio.
Sí, es cierto lo que me comentas. He hecho varios comentarios sin mucha utilidad. En la siguiente entrega del curso (CU01192E) nos explican como se debe hacer. Aquí aún no sabía que se debería de comentar la finalidad de las funciones al principio de la misma. Creo que en la siguiene entrega lo hago mejor.
Tomo nota sobre lo que me has comentado en este ejercicio y he mirado el hilo(que me adjuntas) de la corrección del compañero "pedro,,".
Saludos y gracias :)