« anterior próximo »
Páginas: [1]

Autor Tema: Importancia del indentado y organización del código estilo JavaScript CU01192E  (Leído 3595 veces)

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Importancia del indentado y organización del código estilo JavaScript CU01192E
« en: 02 de Mayo 2016, 22:37 »
Buenas noches. Propongo una posible solución del 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 tal como está en el ejercicio:

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

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:

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 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
« Última modificación: 05 de Mayo 2016, 08:37 por César Krall »
En línea

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2077
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Re:Importancia del indentado y organización del código estilo JavaScript CU01192E
« Respuesta #1 en: 05 de Mayo 2016, 08:39 »
Hola! Todo correcto!
En línea
Responsable de departamento de producción aprenderaprogramar.com
Páginas: [1]
« anterior próximo »
 

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