Alessandra Salvaggio - JavaScript - Guía completa

El archivo .js es llamado mediante el atributo src de la etiqueta . 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 , una para llamar al archivo externo y otra, para el código gestionado de forma interna.

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);}}

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.

Cuando se aprende a programar, el primer ejemplo siempre es el de mostrar un mensaje de saludo. Nosotros también lo haremos así.

Temas tratados

•Escribir dentro de un elemento HTML

•Crear comentarios en el código

•Crear constantes y variables

•Tipos de datos

•Usar instrucciones condicionales ( if)

•Crear y utilizar objetos de tipo dato

•Modificar la clase de estilo asignada a un elemento HTML

Aportamos solo la parte

Puedes encontrar este ejemplo en el archivo Holamundo .html .

Para empezar, creamos una etiqueta

a la cual asignamos el id “output” que después manipularemos vía código. Es importante asignar el atributo ida los elementos HTML que vamos a gestionar vía código, puesto que el valor de este atributo permite hacer referencia fácilmente al objeto en cuestión.

La parte Javascript de nuestro archivo está formada por dos líneas de código y dos líneas de comentarios. Las líneas de comentario son las que empiezan con una doble barra inclinada (//) y son líneas que no se ejecutan, sino que permiten al desarrollador insertar notas y comentarios concretos para facilitar una futura lectura o una gestión por parte de otros desarrolladores.

JavaScript también permite comentar un bloque entero de líneas, sin tener que poner necesariamente la doble barra delante de cada línea.

Para comentar en bloque un grupo de líneas, basta con poner barra asterisco (/*) al inicio de la primera línea que deseamos comentar y asterisco barra (*/) al final de la última:

/* primera línea comentadasegunda línea comentadatercera línea comentada */

Después de este paréntesis acerca de los comentarios, centrémonos en las dos líneas de código auténtico, empezando por la primera.

const saludo = 'Hola mundo';

Antes de pensar en lo que este código hace realmente, observa que las líneas de código JavaScript terminan con un punto y coma (;).

Dicho esto, vemos que en esta línea se crea una constante con el nombre saludoy se le asigna el valor ‘Hola mundo’.

La constante se crea mediante la instrucción const y es una parte de la memoria a la cual se asignan un nombre y un valor fijo que permanece inmutable durante toda la ejecución del código. Con el nombre de la constante del código se hará referencia a su valor.

Una constante puede ser utilizada varias veces en el código y, el hecho de asignarles el valor en un único punto, permite más adelante una actualización más sencilla y una gestión más fácil del valor mismo.

El nombre de una constante, o indicador, debe empezar con una letra, un guión bajo (_) o el signo del dólar ($) y puede contener caracteres alfabéticos, numéricos o guiones bajos.

Nuestra constante, concretamente, es de tipo cadena, es decir, es un texto, y se sitúa entre apóstrofes o comillas simples.

Ya anticipamos que, además del tipo cadena, una constante puede tener valores de otros tipos. Concretamente:

• booleano: es decir, un valor como verdadero/falso - true/false.

• null: un valor nulo.

• undefined: un valor no definido (la constante existe, tiene un nombre pero no un valor; a decir verdad, no es demasiado útil).

• number: un número sobre el cual se pueden realizar operaciones matemáticas.

• cadena: un conjunto de caracteres alfanuméricos.

• symbol: (nuevo en ECMAScript 2015): un tipo que se utiliza para identificar propiedades concretas dentro de los objetos (no te preocupes si no entiendes esta definición, pues todo quedará más claro cuando presentemos el concepto de objeto).

En el transcurso de este libro, tendremos la ocasión de profundizar en el tema de los tipos de datos. Sin embargo, debemos advertir de que JavaScript, a diferencia de otros lenguajes, no necesita que el tipo de constante (o de la variable, como veremos más adelante) sea declarado explícitamente. JavaScript intenta identificar el tipo de valor que se asigna.

Después de esta digresión sobre los tipos, volvamos a nuestro código y, en concreto, a la segunda línea a analizar:

document.getElementById('output').innerHTML = saludo;

El objeto document representa todo el documento HTML, del cual, mediante la función getElementById , seleccionamos el elementos con el id output .

Una vez seleccionado el objeto, que recordemos que es un elemento

,cambiamos su contenido HTML mediante la propiedad innerHTML : así, mostramos en su interior el contenido de la constante saludo.

Así como está, el código que hemos escrito no sirve para mucho: habría sido mucho más rápido escribir directamente nuestro mensaje en el código HTML.

Las cosas cambian si queremos mostrar un mensaje distinto según el momento del día.

Muestro solo la parte JavaScript del código, puesto que la parte HTML se mantiene igual.

// hora del sistemaconst hora = new Date().getHours();let mensaje;if (hora

Puedes encontrar este ejemplo en el archivo Holamundodinamico .html