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.
¡Hola mundo!
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 <body> del archivo que, evidentemente, deberá completarse con un encabezado.
<body><p id="output" ></p><script type="text/javascript">// Constante de tipo textoconst saludo = 'Hola mundo';// Busco en el DOM la etiqueta con ID = 'output' y asigno su contenidodocument.getElementById('output').innerHTML = saludo;</script></body>
Puedes encontrar este ejemplo en el archivo Holamundo .html .
Para empezar, creamos una etiqueta <p> a la cual asignamos el id “output” que después manipularemos vía código. Es importante asignar el atributo id a 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 saludo y 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.
| NOTA | Imagínate si hubiéramos usado la constante cinco o seis veces en el código y, después, decidiéramos cambiarle el valor. Bastará cambiar el valor a la constante para que dicho valor cambie en todo el código. Si hubiéramos utilizado directamente el valor, deberíamos modificarlo cada vez que aparece. |
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
