Читать книгу JavaScript: Guía completa - Alessandra Salvaggio - Страница 7

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.

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.

En realidad, los dos casos (archivo externo, código interno en el archivo) pueden coexistir. Podríamos decir que el archivo externo contiene código genérico que es válido para varias páginas, mientras que el interno del archivo HTML solo tiene código específico para la página o para una acción puntual. En este caso, se necesitan dos (o más) etiquetas <script>, una para llamar al archivo externo y otra, para el código gestionado de forma interna.

<script type="text/Javascript" src="funzCookie.js"></script><script>let nombreUsuario = leerCookie('userName');if (nombreUsuario != '') {document.getElementById('saludo').innerHTML = `Hola ${nombreUsuario}`;} else {nombreUsuario = prompt('No te conozco. Escribe tu nombre:', '');if (nombreUsuario != '' && nombreUsuario != null) { configuraCookie('userName', nombreUsuario, 3);}}</script>

Advertencia

La solución más común para la escritura del código es la que prevé tener el código en un archivo externo que se llamará en el archivo HTML, pero, para facilitar el uso de los ejemplos del libro, hemos mantenido el código interno en el archivo HTML.

Así, cada archivo es “autosuficiente” y funcional, sin necesidad de muchas dependencias.