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

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
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.
« Última modificación: 23 de Febrero 2016, 14:57 por Mario R. Rancel »

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1951
    • Ver Perfil
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,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
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.

 

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