Alessandra Salvaggio - JavaScript - Guía completa

Edge) cuentan con un muy buen soporte (>95 %) del ES6 ;es a esta versión a la que haremos referencia en este libro.

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 Java­Script, 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 TypeScriptde Microsoft. Angular, uno de los frameworks de JavaScript más utilizados, desde su versión 2, está escrito en TypeScript y no en 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.

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.

Una primera alternativa al Bloc de notas está formada por editores de texto “más evolucionados”.

Recordemos tres de ellos: Notepad ++, Atomy 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.

Atomes 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 Codees 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.

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 Codeexplicaremos cómo integrar esta útil herramienta en el editor de Microsoft.

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.

Tras haber visto la variedad de herramientas que pueden facilitar el trabajo, vamos a ver cómo hacer que convivan JavaScript y HTML.

Básicamente, contamos con dos posibles soluciones:

•Insertar el código JavaScript dentro del mismo archivo que contiene el HTML.

•Escribir el código JavaScript en un archivo externo con extensión .js y después llamar este archivo en el HTML.

Empezamos con un ejemplo del primer caso:

Independientemente de lo que hace este código y de su sintaxis, observa que las instrucciones de JavaScript están insertadas en la etiqueta y se especifica como atributo el tipo de código contenido en la etiqueta (que es text/javascript).

Observa también que el código está escrito al final de la página, justo antes del cierre de la etiqueta

Esta posición del código no es obligatoria, pero sí muy recomendable para evitar problemas derivados de la no carga (temporal) de elementos a los cuales podría referirse el código.

El segundo caso, que es más práctico si el código JavaScript es complejo y largo o si este se debe utilizar en más de un archivo, consiste en crear dos archivos distintos, el HTML y el .js, con código JavaScript y después llamar al archivo .js dentro del archivo HTML, como en el siguiente ejemplo: