++, 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.
Integrar los comandos JavaScript en las páginas HTML
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:
<!doctype html><html lang="es"><head><meta charset="utf-8"><title>Prova1</title><meta name="description" content="Prueba1"></head><body><p id="output" /><script type="text/javascript">const msgHello = 'Hola mundo';document.getElementById('output').innerHTML = msgHello;</script></body></html>
Independientemente de lo que hace este código y de su sintaxis, observa que las instrucciones de JavaScript están insertadas en la etiqueta <script> 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 <body>, de manera que el código sea llamado cuando todo el DOM del documento HTML haya sido cargado.
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.
| NOTA | DOM, Document Object Model, es el conjunto de objetos de un documento HTML que pueden ser manipulados mediante código. Hablaremos de ello de forma detallada en un capítulo dedicado. |
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:
<!doctype html><html lang="es"><head><meta charset="utf-8"><title>Prueba1</title><meta name="description" content="Prueba1"><!--<link rel="stylesheet" href="css/styles.css?v=1.0">--></head><body><p id="output" /><script type="text/javascript" src="codice.js"></script></body></html>
El archivo .js es llamado mediante el atributo src de la etiqueta <script>. También en este caso, el código JavaScript es llamado al final del cuerpo del documento.
