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: bermartinv en 06 de Abril 2016, 09:59
-
Hola chicos, adjunto mi solución para este tema.
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:
<!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 código página inicial
*
* @version 2.2
*
* @author autor del código
* @copyright aprenderaprogramar.com
*
* History aquí se pondría las distintas versiones
* v2.2 –
* v2.0 –
* v1.1 –
* ----
*
*/
/**
* En esta función definimos las variables que se van a usar, las inicializamos.
* Hacemos la llamada a la función ejemploAcción tras 1500 ms, la cual es llamada con los argumentos
* que hemos definido anteriormente
*/
function ejemplo(){
var nodosTituloCurso = document.querySelectorAll(".tituloCurso");
var contador = 0;
var nodosCambiados = new Array();
var tocaCambiar = true;
setTimeout(function() {ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar)}, 1500);
}
/**
* Función que encarga de la acción del script la cual de una forma alaeatoria seleccionala unos nodos
* y les dará un determinado estilo.
* @param {NodeList} nodosTituloCurso
* @param {Array} nodosCambiados
* @param {Number} contador
* @param {Boolean} tocaCambiar
*/
function ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar) {
if (contador<nodosTituloCurso.length){
var indice = Math.floor((Math.random() * (nodosTituloCurso.length))); // calculo aleatorio
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 y se añade estilo
document.body.style.backgroundColor='black';
document.getElementById('principal').style.color='white';
for (var i=0; i<nodosTituloCurso.length; i++) {
nodosTituloCurso[i].style.color='yellow';
}
}
}
/**
* Cambiar el estilo backgroundColor de un nodo
* @param {domElement}
*/
function cambiarNodo(elNodo){elNodo.style.backgroundColor = 'black';}
</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>
Saludos!!
-
Hola! Lo veo bien
Saludos!