JavaScript (JS) es un lenguaje de programación interpretado que permite añadir interactividad a una página web. Es un lenguaje muy usado en el lado del cliente, pues se encuentra implementado como parte de los navegadores web; aunque no todos los navegadores lo soportan. También puede usarse en el lado del servidor.
Con la ayuda de JavaScript es posible diseñar páginas web mucho más interactivas y dinámicas. Por ejemplo, puede usase para que cuando el usuario se desliza hacia abajo 250 píxeles aparece el botón de volver a subir hasta arriba.
Hay dos maneras de añadir código JavaScript a un documento HTML o página web. La primera es mediante el elemento <script>, que permite insertar código tanto de forma directa sobre el documento actual como enlazando un recurso externo. La segunda es mediante atributos de eventos para acciones concretas.
Lista de elementos descritos en este artículo:
| Elemento | Descripción |
|---|---|
<script> | Para insertar código JS en el documento actual. |
<noscript> | Para mostrar un mensaje alternativo en caso de que el navegador web no haya ejecutado el programa. |
Añadir código JS: elemento <script>
El elemento <script> permite añadir código JavaScript de forma directa en el documento actual: es tan fácil como introducir el código entre las etiquetas <script> (de apertura) y </script> (de cierre). Este método tiene la desventaja de que el código será difícil de mantener, pero es útil para casos puntuales.
Ejemplo de código HTML insertando código JS:
<script>
alert('Hola')
</script>
El método más eficiente de añadir código JavaScript será enlazando un recurso externo, que puede ser un fichero de JavaScript, es decir, con la extensión .js. Para este caso será necesario hacer uso de ciertos atributos que permitirán indicar la ruta de la ubicación del archivo, entre otras opciones interesantes.
Atributos del elemento <script>
Gracias a los atributos del elemento <script> es posible configurar ciertas funcionalidades de gran interés a la hora de mejorar la velocidad de carga del documento HTML. Por ejemplo, los atributos defer y async permiten indicar el momento de carga de un recurso externo que contenga código JS.
El atributo ‘src’
El atributo src permite especificar la ruta en la que se encuentra el recurso externo enlazado, que en este caso será un archivo con la extensión .js. Por lo tanto, el valor de este atributo será una cadena de texto que contenga la URL exacta, ya sea una URL absoluta o una URL relativa. El recurso se cargará mientras se cargan el resto de recursos y elementos del documento HTML.
El atributo ‘type’
Con el atributo type se especifica el tipo de medio (Mime Type) que se enlaza. El valor a usar en estos casos es text/javascript; al tratarse del valor por defecto, no es necesario indicarlo. Este valor es influenciado por los atributos charset, async y defer. En cambio, con el valor module se representa un programa módulo, que no se verá afectado por los atributos charset y defer.
El atributo ‘nomodule’
El atributo nomodule indica que el código JavaScript no debe ejecutarse en navegadores que tienen soporte para programas modulares. Al tratarse de un atributo binario no se requiere ningún valor; su inclusión ya impide la ejecución del código en dichos navegadores. Por tanto, puede ser muy útil para ejecutar código alternativo de forma exclusiva en navegadores antiguos.
El atributo ‘async’
El atributo async también es binario, y con su presencia se indica que el recurso externo enlazado a través del atributo src deberá cargarse de forma asincrónica. Esto significa que el código se descargará en paralelo con el resto de elementos del documento HTML, y se evaluará tan pronto como esté disponible.
Este atributo debe ser declarado sólo cuando se enlaza un recurso externo mediante el atributo src. Si no se enlaza un recurso externo, se ignorará.
El atributo ‘defer’
El atributo defer indica que el código JS del recurso externo enlazado no debe ser evaluado hasta que el documento HTML esté completamente cargado. Ambos se descargarán en paralelo. Es un atributo binario, por lo que su inclusión ya evita que el código se evalúe antes de la carga completa de la página.
Al igual que el atributo async, este atributo sólo debe declararse cuando se enlaza un recurso externo a través del atributo src, de lo contrario se ignorará.
El atributo ‘crossorigin’
El atributo crossorigin permite indicar si una petición HTTP de carga de datos desde otro servidor debe presentar credenciales de origen cruzado (CORS). El mecanismo CORS (Intercambio de Recursos de Origen Cruzado) se utiliza para administrar o controlar las peticiones HTTP de origen cruzado.
Una petición HTTP de origen cruzado es una solicitud realizada de un recurso enlazado —como puede ser un archivo de estilos CSS, un archivo de código JS, una fuente o una imagen— de un dominio diferente al actual. CORS permite a los servidores especificar quién puede acceder al recurso.
Estos son los valores posibles:
| Valor | Descripción |
|---|---|
anonymous | Se realiza una solicitud de origen cruzado y no se envían credenciales. |
use-credentials | Se realiza una solicitud de origen cruzado y se envían credenciales. |
El atributo ‘integrity’
El atributo integrity permite verificar la integridad de un recurso enlazado; de este modo se garantiza que el recurso se ha entregado sin ningún tipo de manipulación inesperada. El valor de este atributo será un hash codificado en Base64, y debe empezar con el prefijo del algoritmo utilizado, es decir: sha256, sha384 o sha512 seguidos de un guión y el hash.
El atributo ‘referrerpolicy’
Con el atributo referrerpolicy se indica la política de referencia u origen que se haya usado en el lado del cliente. Cuando se obtiene el recurso se envía la política al servidor. Este atributo puede tener los siguientes valores:
| Valor | Descripción |
|---|---|
no-referrer | No se envía ningún dato de referente con las solicitudes. |
no-referrer-when-downgrade | Valor predeterminado. Como referente se envía el origen, la ruta y la cadena de consulta cuando el nivel de seguridad es el mismo (de HTTPS a HTTPS), pero no se envía a destinos menos seguros (de HTTPS a HTTP). |
origin | Se envía sólo el origen (esquema, host y puerto) del documento. |
origin-when-cross-origin | Se envía el origen del documento para una solicitud de origen distinto; pero se envía el origen, la ruta y la cadena de consulta para una solicitud con el mismo origen. |
unsafe-url | Se envía la referencia con el origen y la ruta. Este caso no es seguro porque puede filtrar el origen y la ruta de orígenes protegidos por TLS a orígenes que no estén protegidos. |
Añadir código JS con atributos de eventos
Cada elemento HTML permite el uso de ciertos atributos de eventos que están relacionados con acciones concretas de JavaScript. Un evento puede ser cuando se pulsa el botón del ratón, cuando se mueve el ratón, cuando se selecciona un elemento o cuando la página se ha cargado completamente.
Se puede consultar una lista completa con todos los atributos de eventos. El valor de los atributos de eventos será código JavaScript o el nombre de una función escrita en JavaScript que esté accesible en el elemento <script>.
En el ejemplo siguiente, se ha añadido el atributo onclick para que se ejecute el código JavaScript justo cuando el usuario haga clic sobre el párrafo. La función alert() muestra un mensaje de alerta:
<p onclick='alert("Mensaje de alerta.")'>Pulsa este párrafo.</p>
Para ver el resultado, haz clic sobre el párrafo siguiente:
Pulsa este párrafo.
El elemento <noscript> y su utilidad
El elemento <noscript> se utiliza para mostrar texto alternativo cuando el navegador web no tiene soporte para cargar el código JavaScript de la página web o lo tiene deshabilitado. Funciona así: si el navegador no ha podido ejecutar el código JavaScript, mostrará el texto contenido de <noscript>.
Este elemento es de bloque, por lo que ocupa todo el ancho de línea posible sin permitir que otros elementos quepan a su lado. Tiene dos etiquetas obligatorias: <noscript> (de apertura) y </noscript> (de cierre).
Ejemplo de código HTML usando <script> y <noscript>:
<script>alert('Se muestra si tiene JS habilitado.')</script>
<noscript>Se muestra si tiene JS deshabilitado.</noscript>
