elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Introducción a Git (Primera Parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Necesito ayuda para ordenar unos valores al mostrarse
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Necesito ayuda para ordenar unos valores al mostrarse  (Leído 2,715 veces)
DancingMonki

Desconectado Desconectado

Mensajes: 2


Ver Perfil
Necesito ayuda para ordenar unos valores al mostrarse
« en: 3 Noviembre 2020, 02:15 am »

Tengo una tabla en la que se muestran 5 pilotos, con varios valores. El valor del nombre del piloto, el número del piloto y el tiempo que es el último valor. Me gustaría que al mostrar el resultado al ejecutar el código, se muestre la tabla de pilotos en orden del tiempo del piloto. Es decir, debería mostrarse primero a Sebastian Vettle, segundo a Lewis Hamilton, etc etc. Pero no logro como hacer para ordenar arrays. Os dejo mi código:


Código:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>
</head>
<body>
    <div class="principal">
        <script>
            var pilotos = new Array();
            pilotos = [
                [
                    "Lando Norris", 4, 60
                ],
                [
                    "Sebastian Vettel", 5, 10
                ],
                [
                    "Carlos Sainz", 55, 50
                ],
                [
                    "Lewis Hamilton", 44, 15
                ],
                [
                    "Kimi Rikkonen", 7, 37
                ],
            ];
            document.write('<div class="contenedor">');

            for (i = 0; i < pilotos.length; i++) {

                document.write('<div class="caja">');
                document.write('<div class="detallito">', '<div class="name"><div class="namecolor"><h3>' + pilotos[0] + '</h3></div><h4>');
                document.write('<div class="numbcolor">', 'Número:  ' + pilotos[1] + '</div></h4></div>');
                document.write('<div class="marks"><div class="time"><h3>', 'Tiempo:  ' + pilotos[2] + ' minutos', '</h3></div></div></div>');
                document.write('</div>');
            }
        </script>
    </div>
</body>
</html>


En línea

@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.397


Turn off the red ligth


Ver Perfil WWW
Re: Necesito ayuda para ordenar unos valores al mostrarse
« Respuesta #1 en: 3 Noviembre 2020, 09:07 am »

A parte del añadirte el ordenamiento del array, te cambié prácticamente todo el código.

No utilices document.write.

Normalmente se utiliza javascript en archivos externos y se incluye con <script src="./codigo.js"></script> como última etiqueta del body.

Esto se hace para poder reutilizar un archivo en múltiples páginas. Separar funcionalidad (javascript) de contenido/estructura (html) así como permitir aplicar políticas que bloquean la ejecución de javascript en el documento .html. De esta forma impides hackeos mediante inyecciones de código a tu aplicación.

Con el css pasa exactamente lo mismo.

Si hay algo que no entiendas pregunta.

Código
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.    <meta http-equiv="X-UA-Compatible" content="ie=edge">  
  7.    <title>Document</title>
  8. </head>
  9. <body>                                                    
  10. <script>
  11. "use strict";
  12. /* Este texto al inicio de tu código javascript te avisará
  13. * si cometes algún error. Por ejemplo olvidarte del var.
  14. * Te pasó en el for, y esto causa problemas que pasan
  15. * inadvertidos con facilidad.
  16. https://medium.com/@mrando.via/use-strict-en-javascript-bfbe1815bd80                                                  */
  17.  
  18. /* Usa let en lugar de var. No tienes ni que saber como
  19. * funciona. Sirve para no sobrescribir variables cuando
  20. * les pones el mismo nombre. Entre otras cosas.
  21. * Si creas una variable que no va variar nunca en el
  22. programa, entonces utiliza const.
  23. https://cybmeta.com/var-let-y-const-en-javascript
  24. */
  25.  
  26. let pilotos = [
  27. /* Añade este elemento si quieres probar las comprobaciones
  28.   ["<"+"img onerror=alert() src= >", "", "8"],
  29. */
  30.  ["Lando Norris", 4, 60],
  31.  ["Sebastian Vettel", 5, 10],
  32.  ["Carlos Sainz", 55, 50],
  33.  ["Lewis Hamilton", 44, 15],
  34.  ["Kimi Rikkonen", 7, 37] /* Te sobraba una coma aquí */
  35. ]
  36.  
  37. .sort(function(a, b) {
  38.  return a[2] - b[2];
  39. });
  40.  
  41. /* Método array.sort(function);
  42. https://www.todojs.com/usar-correctamente-el-metodo-sort/
  43. *
  44. * Es común utilizar funciones anónimas como parámetros si
  45. * no se va a volver a llamar a la función desde otra parte
  46. * del código.
  47. https://riptutorial.com/es/javascript/example/726/funcion-anonima
  48. */
  49.  
  50.  
  51. /* Remplazos:
  52. * <main> en lugar de <div class="principal">
  53. * <section class="contenedor"> en lugar de del div
  54. * <article> en lugar de div
  55. * <span> en lugar de div
  56. *
  57. * Esto es lo que se conoce como html léxico.
  58. * El objetivo de remplazar los divs por otras etiquetas es
  59. * que el código sea más comprensible para humanos y bots.
  60. * http://blog.ikhuerta.com/maquetacion-seo-en-html5-div-article-section-o-aside?gb4=4
  61. */
  62.  
  63. let codigo = `
  64. <main>
  65. <section class="contenedor">
  66. `;
  67.  
  68. /* Estas comillas sirven para utilizar sintaxis de
  69. * plantillas. De esta forma se respetan los saltos de linea
  70. * sin tener que utilizar \n y también puedes meter
  71. * variables directamente utilizando ${miVariable} por lo
  72. * que resulta más cómodo y se ve mejor la estructura del
  73. * html. También permite utilizar expressiones como
  74. * una suma ${5 + 9} u otras más complejas.
  75. https://www.etnassoft.com/2016/10/05/template-strings-en-es6-estudiando-las-nuevas-plantillas-de-cadena-en-javascript/
  76. */
  77.  
  78. for (let i = 0; i < pilotos.length; ++i) {
  79.  codigo += `<article class="caja">
  80.      <div class="detallito">
  81.  
  82.        <div class="name">
  83.          <span class="namecolor">
  84. <!-- Sin serialización:
  85.  <h3>${pilotos[i][0]}</h3>
  86. -->
  87.            <h3>${htmlEntities(pilotos[i][0])}</h3>
  88.          </span>
  89.  
  90.          <span class="numbcolor">
  91. <!-- Sin comprobación de tipo:
  92.  <h4>Número: ${pilotos[i][1]}</h4>
  93. -->
  94.            <h4>Número: ${typeof(pilotos[i][1]) !== "number" ? "error" : pilotos[i][1]}</h4>
  95.          </span>
  96.        </div>
  97.  
  98.        <div class="marks">
  99.          <span class="time">
  100. <!-- Sin comprobación de tipo:
  101.  <h3>Tiempo: ${pilotos[i][2]} minutos</h3>
  102. -->
  103.            <h3>Tiempo: ${typeof(pilotos[i][2]) !== "number" ? "error" : pilotos[i][2] + " minutos"}</h3>
  104.          </span>
  105.        </div>
  106.  
  107.      </div>
  108.    </article>\
  109. `;
  110. }
  111.  
  112. codigo += `</section>
  113. </main>`;
  114.  
  115. /* Añade el código al final del interior de <body></body>
  116. * es decir, en la última línea del body. */
  117. document.body.innerHTML += codigo;
  118.  
  119.  
  120. /* Esta función devuelve el texto que se le pase por
  121. * parámetro como entidades html. Esto sirve para que no
  122. * se ejecute algo que se supone que es texto como código.
  123. * por ejemplo si añades a un corredor que se llame
  124. * Juan "el más rápido", te rompería las comillas de tu
  125. * código. Esta función deberías utilizarla cuando le
  126. * permitas al usuario meter los datos. De esta forma no
  127. * se le deja introducir código.
  128. https://sodocumentation.net/es/html/topic/5229/entidades-de-caracter
  129.  
  130.  
  131. */
  132. function htmlEntities(data) {
  133.  return data.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
  134.   return '&#38;#'+i.charCodeAt(0)+';';
  135.  });
  136. }
  137. </script>
  138. <style>
  139. .caja {
  140.  border: 1px solid #aaa;
  141.  text-align: center;
  142.  margin-bottom: 4%;
  143. }
  144. </style>
  145. </body>
  146. </html>


« Última modificación: 3 Noviembre 2020, 09:10 am por @XSStringManolo » En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

DancingMonki

Desconectado Desconectado

Mensajes: 2


Ver Perfil
Re: Necesito ayuda para ordenar unos valores al mostrarse
« Respuesta #2 en: 3 Noviembre 2020, 12:53 pm »

Muchas gracias!
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
necesito ayuda para ordenar en c
Programación C/C++
marrison 3 1,931 Último mensaje 23 Diciembre 2012, 13:08 pm
por marrison
Necesito ayuda para eliminar unos virus
Seguridad
Chesco_97 1 1,752 Último mensaje 30 Octubre 2014, 03:25 am
por Mister12
Necesito ayuda con unos cheat para MW3 ??
Software
TrashAmbishion 2 870 Último mensaje 9 Agosto 2015, 21:32 pm
por TrashAmbishion
Ayuda para sacar unos valores de un fichero
Java
Fryuio 4 2,346 Último mensaje 22 Abril 2017, 12:40 pm
por Fryuio
necesito ayuda para reiniciar los valores tipo enteros
Programación C/C++
LARANARENElol 2 1,502 Último mensaje 30 Noviembre 2018, 07:02 am
por LARANARENElol
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines