Muy interesante el artículo A Guide to Proper Error Handling in JavaScript, imprescindible para cualquier programador de front-end en entorno web.
Tag: JavaScript
Necesitamos un lenguaje de programación mejor que JavaScript
Eso es lo que se pide en No More Javascript. Pues la verdad es que sí: JavaScript es un lenguaje que no nació para lo que es ahora.
En este sitio web dicen cosas como:
Entire Website In Javascript?!
This is one of the reasons we started this website. Google is trying to encourage developers to build websites completely in javascript using Angular.js. We were heading in the right direction with Ruby on Rails. What happened?When has Google ever attempted to make things easier and less complicated for everyone else? They hire rocket scientists and expect everyone else to keep up!
Javascript is not an intuitive language and it has complexities that will not get more people building websites.
[Actualización 29/1/2015]
Parece que el sitio web se ha muerto, pero se puede acceder a una copia de la caché de Google:
El concurso de JavaScript menor que 1K
Hace unos meses publiqué una entrada sobre El Tetris en menos de 40 líneas de JavaScript. Un lector de este blog lo leyó y me apuntó la existencia de un concurso en el que la condición es desarrollar un código en JavaScript menor que 1K: JS1K.
Podemos ver las demos que se presentaron a la última edición. Mi favorito, el Canon en D de Pachelbel (¿a quién no le gusta el Canon?), aunque técnicamente creo que el mejor es el simulador del helicóptero Comanche.
¿Cómo extraer una parte de un array?
Ayer comentaba las tres funciones que existen en JavaScript para extraer una subcadena. Hoy toca lo mismo, pero con los arrays: JavaScript Array: slice vs splice.
Las dos funciones slice y splice puede parecer que hacen lo mismo, pero no es así. Y hay una diferencia muy importante: splice modifica el array sobre el que se aplica la función.
SLICE
var x = [14, 3, 77]; var y = x.slice(1, 2); console.log(x); // [14, 3, 77] console.log(y); // [3]
SPLICE
var x = [14, 3, 77] var y = x.splice(1, 2) console.log(x) // [14] console.log(y) // [3, 77]
¿Cómo extraer una subcadena en JavaScript?
Muy interesante el artículo JavaScript String: substring, substr, slice, que compara tres funciones que existen en JavaScript para extraer una subcadena de una cadena.
Cualquiera de las tres funciones se puede usar, pero hay que tener mucho cuidado, ya que las tres reciben dos parámetros que no funcionan de la misma forma:
SUBSTRING
var a = 'The Three Musketeers'; a.substring(4, 9); 'Three' a.substring(9, 4); 'Three'
SUBSTR
var b = 'The Three Musketeers'; b.substr(4, 9); 'Three Mus' b.substr(9, 4); ' Mus'
SLICE
var c = 'The Three Musketeers'; c.slice(4, 9); 'Three' c.slice(9, 4); ''
La precisión en JavaScript
El siguiente problema no es sólo de JavaScript, afecta a todos los lenguajes de programación, pero es muy fácil de comprobar en JavaScript.
Abre una consola de JavaScript en un navegador y escribe:
console.log(0.1*0.2);
La respuesta debería ser 0.02, pero aparece 0.020000000000000004.
Escribe:
console.log(0.1+0.2);
La respuesta debería ser 0.3, pero aparece 0.30000000000000004.
Con el resultado anterior, si escribes:
console.log((0.1+0.2) == 0.3);
Lo normal sería esperar que apareciese true, pero aparece false.
Escribe:
console.log(23*1.40);
La respuesta debería ser 32.2, pero aparece 32.199999999999996.
¿Divertido? Pues no, porque si no se controla, se puede convertir en un verdadero problema.
La razón es bien sencilla: el problema está en el formato IEEE 754 que se emplea para representar los números en “coma flotante”, los números reales, los números con decimales.
Un ejemplo para que se entienda bien: el número 0.1 se escribe así porque usamos base 10. En forma de fracción, ese número se representa como 1/10. Como el denominado coincide con la base, la representación es directa: 10 elevado a -1, es decir, 0.1.
¿Cómo se representa el número 1/3 en base 10? No se puede, es una secuencia de infinitos números: 0.3333333333…
Sin embargo, 1/3 en base 3 se representa como 0.1, es decir, 3 elevado a -1.
Los ordenadores emplean la base 2: algunos números se puede representar con toda precisión, sin embargo otros necesitan infinitos decimales.
La solución a este problema está en emplear algún tipo de dato alternativo a través de alguna librería, como por ejemplo BigDecimal.js. Pero cuidado, esto hará que los cálculos sean mucho más lentos.
Y el que quiera aprender más, la guía definitiva: What Every Computer Scientist Should Know About Floating-Point Arithmetic.
Cómo escribir código JavaScript de calidad
El artículo The Essentials of Writing High Quality JavaScript da algunos consejos para escribir código JavaScript de calidad. El objetivo de estos consejos o buenas prácticas es escribir un código que sea mejor, más fácil de entender y más mantenible.
Un resumen:
- Escribe código que sea mantenible: normalmente, se pasa más tiempo leyendo código que escribiendo código. Una regla importante es que el código sea “predecible”; para ello, hay que ser consistente en la forma de escribir el código.
- Minimiza el uso de las variables globales: este es un principio básico que se enseña en los cursos básicos de programación. Utiliza var para declarar las variables locales.
- Utiliza una única sentencia var para declarar todas las variables en una función.
- No utilices directamente la longitud de las colecciones en los bucles for, almacénala primero en una variable.
- Cómo escribir un switch.
- Evita la conversión de tipos implícita.
- Evita eval(), y por lo mismo, evita pasar funciones a setInterval() y setTimeout() como cadenas.
- Cuando uses parseInt(), indica la base, pero para realizar conversiones, es mejor usar Number().
- Convenciones de escritura del código:
- Indentación.
- Llaves.
- Posición de las llaves.
- Espacios en blanco.
- Convenciones de nombrado: funciones, variables y constantes.
- Escritura de comentarios.
Sistema de enrutado en 20 líneas
Impresionante lo que se puede hacer con 20 líneas de código cuando se sabe programar: A Javascript router in 20 lines.
Sistema de templates para JavaScript
Impresionante, en 20 líneas de código, dos versiones de dos autores distintos:
Eventos en las páginas web
Información sobre los eventos en HTML y JavaScript:
- DOM events (Wikipedia)
- Document Object Model (DOM) Level 2 Events Specification (W3C)