Loe raamatut: «JavaScript: Guía completa»
JavaScript
Guía completa
Alessandra Salvaggio, Gualtiero Testa
JavaScript
Guía completa
Alessandra Salvaggio, Gualtiero Testa
Sumario
Introducción
1. JavaScript
El renacer de JavaScript
La popularidad de JavaScript
JavaScript y ECMAScript
Los hermanos de JavaScript
2. Cómo escribir código JavaScript
Herramientas de trabajo
Integrar los comandos JavaScript en las páginas HTML
Advertencia
3. ¡Hola mundo!
Un poco de dinamismo
4. Trabajar con cadenas
Cadenas multilínea
Insertar el backtick o acento grave
5. Los bucles
La consola
6. Funciones
Pasar parámetros a las funciones
Funciones anónimas
El área de validez de variables y constantes
7. Formularios y eventos
Operar con cadenas de texto
Gestores de eventos
8. Expresiones regulares
Definir los patrones para las expresiones regulares
Aplicar expresiones regulares
9. Objetos
Ejemplo práctico
10. Arrays asociativos
Utilizar objetos para crear arrays asociativos
Array asociativo completado durante la ejecución del código
11. New: crear instancias de objetos
12. Modo estricto
¿Por qué utilizar el modo estricto?
13. This
Call y Apply
Bind
14. Funciones avanzadas
Las funciones flecha
Gestión de this
Funciones utilizadas como método
¿Qué modo utilizar para las funciones?
Observaciones finales
15. JSON
Procesar JSON con JavaScript
Un sitio para realizar pruebas
16. AJAX y REST
La llamada POST
Servicios REST
17. Objetos avanzados
Parámetros rest
Operador spread
18. DOM
El modelo
Traversing
Crear nodos
Event delegation
19. BOM
Pantalla
Location
Historial de navegación
Navigator
Ventanas
Temporización
Cookies
20. Canvas
Las coordenadas de los lienzos
Dibujar trazos
Dibujar con curvas de Bézier
Dibujar arcos y circunferencias
Estilos de línea
Degradados
Imágenes
Texto
Sombras
Composiciones
Animaciones
21. Geolocalización
Recuperar las coordenadas geográficas
Gestionar errores
Opciones
Mostrar un mapa de Google
22. Web worker
Comunicación bidireccional
Pasar objetos
Finalizar el worker
Gestión de errores
Importar scripts externos
Objetos a los cuales puede acceder el worker
Workers compartidos
23. El arrastre
Arrastrar otros objetos y recuperar información sobre los objetos arrastrados
Arrastrar un archivo
A1. Visual Studio Code
Trabajar por carpetas y archivos
Instalar ESLint
Abrir un archivo HTML en el navegador desde VS Code
A2. Instalar XAMPP
Utilizar XAMPP
Índice analítico
Introducción
Es cierto que JavaScript no es un lenguaje nuevo en el panorama de la programación para web pero, en los últimos años, ha experimentado un interés y un éxito renovados.
JavaScript existe desde hace más de 20 años y ha vivido, con más o menos suerte, la evolución del mundo de Internet.
A veces desairado y considerado un lenguaje más para aficionados que para profesionales, a veces adorado por su versatilidad y simplicidad, en los últimos años está viviendo una auténtica nueva juventud.
Estándar y, por lo tanto, más riguroso según el IEEE, el lenguaje inventado por Brendan Eich dentro del proyecto para el navegador Netscape Navigator cada vez se utiliza más para grandes proyectos, no solo en entornos web. Actualmente existen aplicaciones enteras desarrolladas en JavaScript.
Por evidentes razones de espacio y para no dispersar demasiado el discurso, este libro se centrará esencialmente en el uso de JavaScript en el contexto web.
Los lectores deberán conocer en profundidad el lenguaje HTML (por descontado) y tener conocimientos de CSS; en cambio, no necesitarán competencias especiales en el campo de la programación.
El libro empieza por conceptos básicos hasta llegar a argumentos más avanzados.
El camino es exigente pero, en estas páginas, trataremos de guiar al lector paso a paso para que pueda llegar a ser autónomo y desarrollar sus propios proyectos en JavaScript.
Podéis descargar los archivos para llevar a cabo los ejercicios del libro en la página www.marcombo.info, con el código JAVA2.
JavaScript
JavaScript es un lenguaje de programación nacido hace más de 20 años. ¿Vale la pena aprenderlo hoy? Intentemos responder a dicha pregunta haciendo un recorrido por la evolución de este lenguaje.
JavaScript (con las letras J y S en mayúsculas y muchas veces indicado con la sigla JS) es un lenguaje de programación creado en 1995 dentro del proyecto para el navegador Netscape Navigator con el objetivo de hacer la navegación web más dinámica e interactiva.
Tal y como fue concebido inicialmente, los programas escritos en JavaScript son ejecutados por el navegador web y, por lo tanto, en el navegador del usuario y no en el servidor donde se encuentra hospedado el sitio.
Por su características, JavaScript es un lenguaje un poco anómalo y no fácilmente clasificable: su diseñador, Brendan Eich, tomó decisiones muy criticadas por los puristas de la programación, puesto que JavaScript reúne en sí mismo, de manera no siempre armoniosa, características de varios lenguajes conocidos en la época de su nacimiento.
El resultado parecía algo un poco “híbrido”: por ejemplo, su sintaxis procede en gran parte de la del lenguaje Java (por eso se denominó JavaScript, aunque la sintaxis es la única conexión entre ambos lenguajes), pero también se aleja de él en puntos fundamentales, “filosóficos”. Un ejemplo evidente: JavaScript define, igual que Java (y otros lenguajes como SmallTalk) el concepto de objeto (volveremos a este concepto en el transcurso de este libro), pero, por sus características, no puede definirse como un auténtico lenguaje orientado a objetos.
JavaScript posee características de lenguajes funcionales (como Scheme) y, de hecho, define funciones como elementos de primera clase (first class function), pero no es un lenguaje funcional puro.
A este “pecado original”, se añadieron para arruinar la reputación de JavaScript los efectos de la denominada guerra de navegadores, es decir, una amarga competitividad entre Microsoft y los otros fabricantes de navegadores para hacerse con el liderazgo del mercado.
¿Y qué tiene que ver JavaScript con todo esto? Tratemos de entenderlo. En 1996, Microsoft creó, para Internet Explorer 3, el lenguaje jScript, una versión propia de JavaScript con características específicas y comportamientos distintos a los de JavaScript, lo que hizo que los sitios desarrollados con una de las dos versiones del lenguaje no fueran compatibles con todos los navegadores.
Todos estos elementos de confusión, unidos a la concepción difusa de finales de los años 90 y principios de los 2000, según la cual las aplicaciones “serias” se ejecutaban sobre servidores y no sobre el cliente (PC del usuario), provocaron que los desarrolladores profesionales adoptaran una posición muy negativa contra JavaScript, considerado solo un lenguaje para aficionados y gráficos.
Así, pues, ¿debemos considerar JavaScript como un lenguaje de serie B? Nosotros creemos que no. Vamos a ver por qué.
El renacer de JavaScript
A principios de esa década, la situación empezó a cambiar. Nacieron muchos elementos nuevos que contribuyeron a generar una consideración distinta de JavaScript por parte de la comunidad de desarrolladores. Resumimos aquí brevemente los principales.
En primer lugar, el nacimiento de Chrome (2008), impulsado por el gigante Google, produce un fuerte cambio en el mercado de los navegadores: su motor de ejecución de JavaScript (V8) incrementó hasta tal punto la velocidad de JavaScript que permitió tener aplicaciones complejas en ejecución en el navegador, es decir, sin tener que instalarlas antes en el PC. Esta posibilidad hoy en día parece más bien normal, pero hace 10 años no lo era en absoluto. Fue una gran revolución.
| NOTA | Las estadísticas de uso de los navegadores (por ejemplo, https://www.w3counter.com/globalstats.php) indican que Chrome es el navegador más utilizado, seguido de lejos por Safari (para móvil). Internet Explorer, Opera y Firefox quedan muy por detrás. |
En segundo lugar, los nuevos procesadores multicore o multinúcleo (dual, quad...) permiten una ejecución real en paralelo de los programas. Esta potencia puede ser bien explotada con técnicas “asíncronas” de programación que encuentran en JavaScript un entorno muy adecuado (encontrarás los detalles de la ejecución asíncrona en el capítulo dedicado a Ajax).
No podemos olvidarnos del nacimiento de la denominada web 2.0 que, con su fuerte integración entre los servicios ofrecidos por los distintos sitios (por ejemplo, el modo en que las redes sociales se integran entre ellas), ha impulsado la creación de aplicaciones basadas en los navegadores.
Por último, pero no menos importante, la creación de un estándar del lenguaje Java-Script aceptado por todos los fabricantes de navegadores ha llevado a una especie de “ennoblecimiento”.
La creación de un estándar, conocido como ECMAScript, fue obra de la ECMA (European Computer Manufacturers Association, conocida actualmente como ECMA International).
Esta asociación fue fundada, con sede en Ginebra, en 1961 con el deber de crear estándares para el sector informático y de las telecomunicaciones.
En 1996, Netscape confió JavaScript a ECMA con la tarea específica de crear un estándar. En 1997 nació la primera edición de ECMA-262, lo que actualmente se conoce como ECMAScript (nombre de compromiso entre las instancias sobre todo de Netscape y Microsoft).
Desde entonces se han ido sucediendo distintas versiones de ECMAScript, de las cuales JavaScript es una implementación.
Todos estos acontecimientos han determinado un renovado y creciente interés por Javascript, incluso fuera de su entorno tradicional (el web). Actualmente, de hecho, es posible crear aplicaciones stand alone en JavaScript que no necesitan un navegador. Entre estas aplicaciones destacamos:
•Aplicaciones de escritorio (que se instalan en el PC) como Visual Code, de la cual hablaremos en un apéndice y que hemos utilizado para escribir los ejemplos de este libro.
•Aplicaciones de servidor gracias a plataformas como Node.js.
•Aplicaciones móviles (tabletas y smartphones).
•Aplicaciones IoT (Internet of Things o Internet de las cosas).
Estas aplicaciones SIN navegador no forman parte de este libro, que se centrará, en cambio, en el uso de JavaScript en el entorno de los sitios de Internet y de la web.
Sin embargo, esto no quita que el uso de JavaScript fuera de la web haya contribuido a hacer crecer su fuerza y su popularidad.
La popularidad de JavaScript
En los últimos años, como hemos podido ver, JavaScript se ha convertido en un lenguaje con una importancia y una presencia significativas, en muchos ámbitos y marcos distintos.
Siempre es difícil medir la popularidad y la difusión de un lenguaje, pero los principales indicadores sitúan a JavaScript de forma estable entre los 10 primeros: por ejemplo, ocupa la primera posición en la clasificación de GitHub (https://octoverse.github.com/), la séptima en la del IEEE (https://spectrum.ieee.org/computing/software/the-2017-top-programming-languages) y la octava para TIOBE (https://www.tiobe.com/tiobe-index), etc.
Clasificaciones a parte, JavaScript es un lenguaje que vale la pena tener en cuenta para proyectos propios y, si aún necesitas más confirmaciones, te aconsejamos que visites la página http://shouldilearnjavascript.com/.
JavaScript y ECMAScript
Existen 8 versiones de ECMA-262; la publicación de nuevas versiones se produce en estos momentos anualmente, por lo que, desde la edición 6 del estándar, el nombre de la versión sigue el año de publicación, aunque se ha elegido mantener también el número de orden de las ediciones.
La última versión disponible en estos momentos es ECMAScript 2017, también conocida como ES8 por ser la octava edición del estándar. Existe una nueva versión, la ECMAScript 2018, en fase avanzada de definición.
Si consideramos el ámbito que nos interesa (el web), esta última edición es incluso demasiado nueva para contar con un buen soporte por parte de los navegadores.
Podemos decir que las versiones de referencia son la 5 y la 6 (la primera conocida también con el nombre del año, ECMAScript 2015).
| NOTA | El proyecto Kangax en GitHub aporta algunas tablas que detallan el nivel de compatibilidad de los navegadores (y de aplicaciones como Node.js), en función de la edición de ECMAScript:ES5: https://kangax.github.io/compat-table/es5/ES6: https://kangax.github.io/compat-table/es6/ES2016/2017: http://kangax.github.io/compat-table/es2016plus/ |
A finales de 2017, los cuatro navegadores principales (Chrome, Safari, Firefox y Microsoft
Edge) cuentan con un muy buen soporte (>95 %) del ES6; es a esta versión a la que haremos referencia en este libro.
Los hermanos de JavaScript
Las críticas de los teóricos hacia JavaScript favorecieron el nacimiento de variantes de JavaScript que lo “mejoran” en los puntos considerados como más débiles.
Los programas escritos con estos lenguajes, para no perder la posibilidad de ser utilizados dentro de los navegadores, los cuales soportan solo programas escritos en JavaScript, deben ser posteriormente traducitos a JavaScript. La traducción se lleva a cabo de forma automática por medio de programas especiales denominados transpiler, que toman el programa escrito en un lenguaje y lo traducen a otro programa escrito en un lenguaje distinto.
Entre estos lenguajes variantes de JavaScript, uno de los más populares es el TypeScript de Microsoft. Angular, uno de los frameworks de JavaScript más utilizados, desde su versión 2, está escrito en TypeScript y no en JavaScript.
Cómo escribir código JavaScript
Antes de empezar a describir el potencial de JavaScript, queremos hacer una panorámica de las herramientas que pueden ser útiles para trabajar y mostrar cómo integrar los comandos de este lenguaje en las páginas HTML .
Temas tratados
•Herramientas de trabajo
•Integración de código JavaScript en páginas HTML
Empecemos por las herramientas de trabajo.
Herramientas de trabajo
Si bien, teóricamente, para escribir código JavaScript y HTML basta con disponer de un editor de textos (como el Bloc de notas) y un navegador, cuando se empieza a escribir código de un modo un poco más “serio”, las herramientas adecuadas pueden realmente marcar la diferencia.
Sin pretender ser exhaustivos, en las páginas siguientes proponemos una panorámica de las herramientas (gratuitas) más conocidas.
Editor de texto
Una primera alternativa al Bloc de notas está formada por editores de texto “más evolucionados”.
Recordemos tres de ellos:Notepad ++, Atom y Visual Studio.
El primero de ellos, Notepad ++, es un editor gratuito que puede descargarse desde el sitio https://notepad-plus-plus.org/.
Su interfaz es sencilla y de fácil uso.
Dispone de una serie de características muy útiles:
•Resaltado de la sintaxis.
•Agrupación de partes homogéneas de código (Syntax Folding) para poder ocultar o mostrar partes de un documento largo.
•Resaltado de la sintaxis y Syntax Folding personalizado por el usuario.
•Resaltado de los paréntesis.
•Búsqueda/reemplazo mediante expresiones regulares (Perl Compatible Regular Expression).
•Función Autocompletar de la sintaxis.
•Marcadores.
•Pantalla con pestañas.
•Visualización de documentos en paralelo para su comparación.
Atom es un editor gratuito que se puede descargar desde el sitio https://atom.io/ disponible para distintas plataformas (OS X, Windows y Linux). Puede ser completado con distintos paquetes de código abierto y dispone de soporte para el sistema de control de versiones Git.
Entre los puntos fuertes de Atom se encuentra:
•Función Autocompletar.
•Resaltado de la sintaxis.
•Función de búsqueda y reemplazo entre distintos archivos.
•Posibilidad de abrir varios archivos en paneles paralelos para poder compararlos.
Visual Studio Code es el editor que hemos utilizado para escribir los ejemplos de este libro. También hemos dedicado un apéndice a su instalación y configuración. Es un editor desarrollado por Microsoft para diversas plataformas (OS X, Windows y Linux). Se trata de una herramienta gratuita que se puede descargar desde la página https://code.visualstudio.com/.
Dispone de Git integrado y se puede completar con otros paquetes.
Entre sus puntos fuertes se encuentran:
•Función Autocompletar.
•Resaltado de la sintaxis.
•Función de búsqueda y reemplazo entre distintos archivos.
•Posibilidad de fijar breakpoints o puntos de interrupción.
•Trabaja directamente con archivos y carpetas sin necesidad de crear proyectos.
Linter
Un linter es un programa que por lo general se integra con un editor de código y permite resaltar los errores de sintaxis o, en general, de escritura del código.
Uno de los linter para JavaScript más conocido es ESLint (https://eslint.org/).
En el apéndice dedicado a Visual Studio Code explicaremos cómo integrar esta útil herramienta en el editor de Microsoft.
Servidores web
Muchos de los ejemplos de este libro pueden ser ejecutados desde un sistema de archivos, pero, en ciertos casos, es preciso ejecutar las pruebas del código desde un servidor web.
Puedes utilizar un servicio online o bien, y esta es la solución que te recomiendo si quieres evitar tener que transferir archivos por FTP (corres el riesgo de probar los archivos en una versión que no sea la última y crear confusión), se puede instalar un servidor web en el ordenador local. Aconsejamos XAMPP (https://www.apachefriends.org/es/index.html), a cuya instalación hemos dedicado un breve apéndice.
