Autor Tema: indentado automático código Notepad++ HTML, CSS, JavaScript, Ajax, PHP CU01192E (Leído 7242 veces)

pedro,, · « **en:** 21 de Febrero 2016, 14:56 »

Hola. Dejo otro ejercicio más (ejercicio CU01192E del curso JavaScript desde cero).

Citar

EJERCICIO
Un programador ha creado este código y nos han pedido que a) Lo comentemos de forma adecuada. b) Lo indentemos y organicemos de forma adecuada. Revísalo, coméntalo y organízalo conforme a los estándares que hemos explicado, incluyendo comentarios de cabecera de función y comentarios en línea para describir los aspectos más relevantes:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	<head>
		<title>Cursos aprende a programar</title><meta charset="utf-8">
		<meta name="description" content="Aprende a programar con cursos reconocidos por su calidad didáctica: HTML, CSS, JavaScript, PHP, Java, Visual Basic, Joomla, pseudocodigo, diagramas de flujo, algoritmia y más.">
		<meta name="keywords" content="HTML, CSS, JavaScript, Java, Visual Basic, Joomla, PHP, pseudocodigo, diagramas de flujo, cursos, tutoriales">
		<style type="text/css">
			*{font-family: verdana, sans-serif;} #principal{text-align:center;width:95%; margin: 0 auto;}
			.tituloCurso {color: white; float:left; padding: 36px 44px; font-size: 2.65em; font-style:bold; text-decoration:none;}
			a:hover{color:orange !important;}
		</style>
		<script type="text/javascript">
		/**
		 * @fileoverview Lista de cursos disponibles.
		 * @version		1.0
		 * @author 		Xxxx Yyyy < XxxxYyyy@aprenderaprogramar.com>
		 * @copyright	aprenderaprogramar.com
        */
			function ejemplo(){
			/**
			 * Función encargada de llamar a la función ejemploAccion() cada 1,5 segundos,
			 * pasandole como parámetros, el valor de las variables nodosTituloCurso(NodeList), contador(Number),
			 * nodosCambiados(Array) y tocaCambiar(Boolean).
			*/
				var nodosTituloCurso = document.querySelectorAll(".tituloCurso");
				var contador = 0;
				var nodosCambiados = new Array();
				var tocaCambiar = true;
				setTimeout(function() {ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar)}, 1500);
			}
			function ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar) {
			/**
			 * Función encargada de ir mostrando los elementos de la lista de cursos disponibles e ir mostrando
			 * los elementos de la lista en distinco color si el ratón pasa por encima de ellos.
			 * @param{NodeList estático} nodosTituloCurso
			 * @param{Array} nodosCambiados
			 * @param{Number} contador
			 * @parm{Boolean} tocaCambiar
			*/
				if (contador<nodosTituloCurso.length){
					var indice = Math.floor((Math.random() * (nodosTituloCurso.length)));
					if (nodosCambiados.length!=0) {
						for (var i=0; i<nodosCambiados.length; i++) {
						   if(nodosCambiados[i]==indice) {tocaCambiar = false;}
						}
					}
					if (tocaCambiar==true) {
						cambiarNodo(nodosTituloCurso[indice]);
						nodosCambiados.push(indice); 
						contador = contador+1;
						setTimeout(function() {ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar)}, 1500);
					} else {
						tocaCambiar=true; ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar);
					}
				}else { 
					
					//Caso base fin de la recursión
					document.body.style.backgroundColor='black';
					document.getElementById('principal').style.color='white';
					for (var i=0; i<nodosTituloCurso.length; i++) {
					   nodosTituloCurso[i].style.color='yellow';
					}             
				}
			}
			 
			function cambiarNodo(elNodo){elNodo.style.backgroundColor = 'black';}
			/**
			 * Cambia el color de fondo del elemento html recivido como parámetro.
			 * @param {domElement}
			*/
		</script>
	</head>
	<body onload="ejemplo()">
		<div id="principal"><h1>Cursos de programación</h1>
		<h3>Reconocidos por su calidad didáctica</h3>
		<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=28&Itemid=59"> Fundamentos</a></div>
		<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=68&Itemid=188"> Java</a></div>
		<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192"> HTML</a></div>
		<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203"> CSS</a></div>
		<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206"> JavaScript</a></div>
		<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=70&Itemid=193"> PHP</a></div>
		<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=38&Itemid=152"> Joomla</a></div>
		<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=37&Itemid=61"> Visual Basic</a></div>
		<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=28&Itemid=59"> Pseudocódigo</a></div>
		<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>
		<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=64&Itemid=87">Cursos tutorizados</a></div>
		</div>
	</body>
</html>

Decir que que solo comente la utilidad de las funciones y la utilidad del código. No se si se debería entrar en más detalles.

Saludos.

Mario R. Rancel · « **Respuesta #1 en:** 23 de Febrero 2016, 14:57 »

Buenos días Pedro

Respecto a lo que pedía el ejercicio lo único que veo que te falte es "comentarios en línea para describir los aspectos más relevantes". Qué son los aspectos más relevantes depende de cada persona.

Hay una cosa importante: los comentarios sobre las funciones ("comentarios cabecera de función") deben ir justo antes de la declaración de la función (no justo después). Esto es una convención para casi todos los lenguajes de programación y esto sí es importante que lo corrijas y lo tengas en cuenta.

Ya a modo de curiosidad, sobre el indentado, el otro día me comentaron sobre un plugin para Notepad++ que te hace el indentado automático, que he probado y parece que va bien. El plugin se llama "Indent by Fold" y se puede instalar desde el plugin manager de Notepad++. Además de este hay otros plugins similares para Notepad++ (que ordenan e indentan el código).

Saludos

pedro,, · « **Respuesta #2 en:** 24 de Febrero 2016, 00:03 »

Gracias por la corrección Mario.

Apuntado queda lo de donde colocar los comentarios y el plugin lo he probado y funciona bastante bien.

Saludos.

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

Noticias: