Apuntes JavaScript – Introducción

Durante este año de 2º de Desarrollo Web en Entorno Cliente en el I.E.S. Gran Capitán de Córdoba, basaremos nuestra programación en el lenguaje JavaScript, la clase es impartida por Lourdes Magarín y hasta el momento, como libro de referencia estamos utilizando Introducción a JavaScript de Javier Eguíluz Pérez, que puede seguirse a través de este enlace.

Aquí realizaré una pequeña selección de los conceptos, a mi entender, más interesantes y necesarios de repasar para el trabajo con JavaScript.

¿Qué es JavaScript?

JavaScript es un lenguaje de programación utilizado, principalmente, para la creación de páginas web dinámicas, permitiendo incorporar efectos, animaciones, acciones determinadas o mensajes al usuario entre otras opciones.

Es un lenguaje interpretado, lo que quiere decir que no es necesario compilar los programas para ejecutarlos y se pueden ejecutar directamente en cualquier navegador sin procesos intermedios.

El estándar de JavaScript, ECMA-262, es publicado por la empresa ECMAScript, y actualmente se encuentra en la versión 11, publicada en Junio del presente año 2020.

¿Cómo incluir JavaScript en XHTML o HTML5?

La inclusión de JavaScript en ficheros XHTML o HTML5 es muy flexible, puede realizarse de varias formas, dentro del mismo fichero html, en un fichero externo o dentro de los elementos html.

De estas tres opciones, la más recomendada es hacerlo a través de un fichero externo, aunque vamos a explicar cada una de ellas.

Incluir JavaScript en el mismo fichero XHTML

La inclusión de la etiqueta <script> puede realizarse en cualquier parte del código que se desee, aunque su uso más habitual suele realizarse en el <head> del documento, un ejemplo de programa sería el siguiente.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="manolohidalgo_"/>
   <script>alert("Primer script de prueba")</script>
    <title>Manolo Hidalgo - 2º DAW</title>
</head>
<body>
    <h1>Esta es la página con el primer script de prueba</h1>
    <p>Inserción de la etiqueta script directamente en el código.</p>
</body>
</html>

Como vemos en la línea 7 del documento, incluimos el script directamente en el código, pidiendo que ejecute sus instrucciones en ese momento. Si visualizamos el fichero, podrás ver como en primer lugar, una vez empieza la carga del documento este en primer lugar muerta una ventana emergente con el alert indicado, y una vez aceptemos, continúa leyendo y muestra el resto del fichero.

Incluir JavaScript mediante fichero externo (.js)

Este es el método recomendado para la inclusión de scripts en nuestros documentos, a fin de realizar una organización más limpia de nuestro trabajo, consiguiendo que “cada cual se ocupe de lo suyo”, es decir, intentar que en el html se mantenga lo máximo posible de este lenguaje, y cuando necesite de las funciones JavaScript, estas sean leídas del correspondiente fichero .js

Normalmente, la etiqueta <script> suele incluirse en el <head> de la página y debe contar, al menos, con el atributo src mediante el cual debemos indicar la ruta del fichero .js.

El programa anterior, realizado de este modo requeriría de dos ficheros, el .html y el .js, los cuales podrían quedar así:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="manolohidalgo_"/>
   <script src="./codigo.js"></script>
    <title>Manolo Hidalgo - 2º DAW</title>
</head>
<body>
    <h1>Esta es la página con el primer script de prueba</h1>
    <p>Inserción de la etiqueta script mediante fichero externo.</p>
</body>
</html>

Vemos como a diferencia del ejemplo anterior, en este html, en la línea 7 en vez de incluir directamente la instrucción, en el atributo src marcamos la ruta donde se encuentra nuestro fichero js, el cual contendrá la información de las acciones a realizar.

Nota: un fichero html puede enlazar a tantos ficheros .js como sean necesarios.

/**
 * @author: manolohidalgo_
 * @since: 16-10-2020
 */

 alert("Primer script de prueba");

Inclusión de JavaScript en los elementos html

Este último método consiste en incluir fragmentos de código JavaScript directamente en las etiquetas html, creando una lectura bastante compleja del código y haciendo complicado el mantenimiento del código JavaScript, por ello se intenta evitar su uso, siendo utilizado sólo para definir algunos eventos y en algunos casos especiales.

Un ejemplo de este código sería el siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="manolohidalgo_"/>
    <title>Manolo Hidalgo - 2º DAW</title>
</head>
<body>
    <p>Página realizada con inclusión del código javascript en los mismos elementos html, si pulsas sobre la siguiente frase aparecerá un mensaje emergente.</p>
    <p onclick="alert('Un mensaje de prueba')">Un párrafo de texto.</p>    
</body>
</html>

Como vemos estas son las tres formas en las que podemos trabajar con JavaScript en HTML, como hemos dicho, utilizaremos preferentemente aquella que nos permite trabajar con ficheros externos.

Etiqueta noscript

La etiqueta <noscript> es utilizada para mostrar un mensaje al usuario en caso de que su navegador no disponga de soporte para JavaScript, o bien el usuario lo tenga bloqueado.

Esta etiqueta se puede colocar en el <head> o justo antes del lugar donde vaya a ser ejecutado JavaScript, su funcionamiento, por hacer una analogía, sería como un “if…else” habitual de programación, haciendo la verificación de si tenemos JavaScript activo, en caso de no tenerlo podemos personalizar un mensaje para el usuario, o incluso una versión alternativa de la web, y si lo tiene, hace la lectura que consideramos habitual de nuestra página.