<!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>
<script>
"use strict";
/* Este texto al inicio de tu código javascript te avisará
* si cometes algún error. Por ejemplo olvidarte del var.
* Te pasó en el for, y esto causa problemas que pasan
* inadvertidos con facilidad.
https://medium.com/@mrando.via/use-strict-en-javascript-bfbe1815bd80 */
/* Usa let en lugar de var. No tienes ni que saber como
* funciona. Sirve para no sobrescribir variables cuando
* les pones el mismo nombre. Entre otras cosas.
* Si creas una variable que no va variar nunca en el
programa, entonces utiliza const.
https://cybmeta.com/var-let-y-const-en-javascript
*/
let pilotos = [
/* Añade este elemento si quieres probar las comprobaciones
["<"+"img onerror=alert() src= >", "", "8"],
*/
["Lando Norris", 4, 60],
["Sebastian Vettel", 5, 10],
["Carlos Sainz", 55, 50],
["Lewis Hamilton", 44, 15],
["Kimi Rikkonen", 7, 37] /* Te sobraba una coma aquí */
]
.sort(function(a, b) {
return a[2] - b[2];
});
/* Método array.sort(function);
https://www.todojs.com/usar-correctamente-el-metodo-sort/
*
* Es común utilizar funciones anónimas como parámetros si
* no se va a volver a llamar a la función desde otra parte
* del código.
https://riptutorial.com/es/javascript/example/726/funcion-anonima
*/
/* Remplazos:
* <main> en lugar de <div class="principal">
* <section class="contenedor"> en lugar de del div
* <article> en lugar de div
* <span> en lugar de div
*
* Esto es lo que se conoce como html léxico.
* El objetivo de remplazar los divs por otras etiquetas es
* que el código sea más comprensible para humanos y bots.
* http://blog.ikhuerta.com/maquetacion-seo-en-html5-div-article-section-o-aside?gb4=4
*/
let codigo = `
<main>
<section class="contenedor">
`;
/* Estas comillas sirven para utilizar sintaxis de
* plantillas. De esta forma se respetan los saltos de linea
* sin tener que utilizar \n y también puedes meter
* variables directamente utilizando ${miVariable} por lo
* que resulta más cómodo y se ve mejor la estructura del
* html. También permite utilizar expressiones como
* una suma ${5 + 9} u otras más complejas.
https://www.etnassoft.com/2016/10/05/template-strings-en-es6-estudiando-las-nuevas-plantillas-de-cadena-en-javascript/
*/
for (let i = 0; i < pilotos.length; ++i) {
codigo += `<article class="caja">
<div class="detallito">
<div class="name">
<span class="namecolor">
<!-- Sin serialización:
<h3>${pilotos[i][0]}</h3>
-->
<h3>${htmlEntities(pilotos[i][0])}</h3>
</span>
<span class="numbcolor">
<!-- Sin comprobación de tipo:
<h4>Número: ${pilotos[i][1]}</h4>
-->
<h4>Número: ${typeof(pilotos[i][1]) !== "number" ? "error" : pilotos[i][1]}</h4>
</span>
</div>
<div class="marks">
<span class="time">
<!-- Sin comprobación de tipo:
<h3>Tiempo: ${pilotos[i][2]} minutos</h3>
-->
<h3>Tiempo: ${typeof(pilotos[i][2]) !== "number" ? "error" : pilotos[i][2] + " minutos"}</h3>
</span>
</div>
</div>
</article>\
`;
}
codigo += `</section>
</main>`;
/* Añade el código al final del interior de <body></body>
* es decir, en la última línea del body. */
document.body.innerHTML += codigo;
/* Esta función devuelve el texto que se le pase por
* parámetro como entidades html. Esto sirve para que no
* se ejecute algo que se supone que es texto como código.
* por ejemplo si añades a un corredor que se llame
* Juan "el más rápido", te rompería las comillas de tu
* código. Esta función deberías utilizarla cuando le
* permitas al usuario meter los datos. De esta forma no
* se le deja introducir código.
https://sodocumentation.net/es/html/topic/5229/entidades-de-caracter
*/
function htmlEntities(data) {
return data.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
return '&#'+i.charCodeAt(0)+';';
});
}
</script>
<style>
.caja {
border: 1px solid #aaa;
text-align: center;
margin-bottom: 4%;
}
</style>
</body>
</html>