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 02 de Mayo 2016, 22:37
-
Buenas noches. Propongo una posible solución del ejercicio CU01192E del curso JavaScript desde cero.
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 tal como está en el ejercicio:
<!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">
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);
}
function ejemploAccion(nodosTituloCurso, nodosCambiados, contador, 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';}
</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>
Código modificado:
<!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 Animación con JavaScript. Cambio de fondo de los elementos <a> con
* cambio de color a través del evento "onmouseover".
* @author aprenderaprogramar.com
* @copyright aprenderaprogramar.com
*/
/**
* Definición e inicialización de diversas variables globales.
* La variable "nodosTituloCurso" seleccióna los elementos con atributo "class=tituloCurso"
* en una NodeList.
* Llamada de la función "ejemploAccion()" con retardo de 1,5 segundo
* y con distintos parámetros.
*/
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); // Llamada de la función "ejemploAccion()" con retardo de 1,5 segundos
}
/**
* Función encargada de cambiar los fondos de los elementos <a> a negro.
* Una vez acaba con todos los elementos cambiar el fondo del body y de los enlaces
* @param {NodeList} nodosTituloCurso
* @param {Array} nodosCambiados
* @param {Number} contador
* @param {Boolean} tocaCambiar
*/
function ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar){
if(contador<nodosTituloCurso.length){ // Comprobación si la variable "contador" tiene un valor menor que los enlaces del documento
var indice = Math.floor((Math.random() * (nodosTituloCurso.length))); //Número aleatorio
if(nodosCambiados.length!=0){
for(var i=0; i<nodosCambiados.length; i++){
if(nodosCambiados[i]==indice){ //Comprobación si el índice del enlace ya está en la array "indice"
tocaCambiar = false; // En caso afirmativo la variable "tocaCambiar" se redefine a "false"
}
}
}
if(tocaCambiar==true){
cambiarNodo(nodosTituloCurso[indice]); //llamar a la función "cambiarNodo" pasándo como parámetro un enlace aleatorio de la NodeList
nodosCambiados.push(indice); //Añadiendo el valor de la variable "indice" a la array "nodosCambiados"
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++){ //Todos los enlaces pasan a tener un fondo amarillo
nodosTituloCurso[i].style.color='yellow';
}
}
}
/**
* Establece los fondos de los enlaces a color negro
* @param{Array} elNodo
*/
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>
Gracias
-
Hola! Todo correcto!