Autor Tema: Manual de estilo JavaScript cómo debe ordenarse el código ser legible CU01191E (Leído 2684 veces)

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.

Citar

EJERCICIO

Un programador ha creado este código y nos han pedido que lo mejoremos. Revísalo y responde a las siguientes cuestiones:

Código: [Seleccionar]

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

Citar

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.

Código: [Seleccionar]

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

Mario R. Rancel · « **Respuesta #1 en:** 03 de Mayo 2016, 10:08 »

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

Dimitar Stefanov · « **Respuesta #2 en:** 03 de Mayo 2016, 10:31 »

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

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: