Scripts¶

Además del formato de etiquetas HTML y las reglas de estilo CSS, la tercera "pata" del diseño web son los scripts, es decir, pequeños fragmentos de programación escritos en lenguaje JavaScript, que se descargan como parte del texto del archivo, o como ficheros aparte.

El lenguaje JavaScript

JavaScript fue desarrollado originalmente por la empresa Netscape, desarrolladora de uno de los primeros navegadores web de la historia. El nombre se debió a los planes que tenía Netscape para que su navegador fuera compatible con la tecnología Java, de forma que ambos lenguajes de programación, Java y JavaScript fueran complementarios. Históricamente esto ha generado cierta confusión. De hecho, son lenguajes diferentes.

Creando un par de scripts¶

Supongamos el siguiente ejemplo:

<!DOCTYPE html>
<html>
<body>

<p id="Texto">Texto del documento</p>

<button type="button" onclick="CambiarRojo()">Rojo</button>
<button type="button" onclick="CambiarAzul()">Azul</button>

<script>

    function CambiarRojo() {
        var elemento=document.getElementById('Texto')
        elemento.style.color='Red'
    }

    function CambiarAzul() {
        var elemento=document.getElementById('Texto')
        elemento.style.color='Blue'
    }

</script>

</body>
</html>

En este ejemplo mostramos un texto y, a continuación, dos botones. Pulsando en cada uno de ellos cambia el color del texto:

Texto del documento

Cada botón se define en mitad del texto mediante etiquetas <button>:

<button type="button">
texto del botón
</button>

El atributo onclick establece lo que hay que hacer al pulsar sobre un botón:

<button  type="button"  onclick="CambiarRojo()" >

En este ejemplo le decimos que, al pulsar sobre el botón, ejecute una tarea a la que denominamos CambiarRojo(). A esto se le llama una función, y los paréntesis que acompañan su nombre, la identifican como función, entre otras cosas.

En algún lugar del documento tenemos que definir, entre etiquetas <script>, las instrucciones de nuestras dos funciones:

<script>

  function CambiarRojo() {
    instrucciones a ejecutar
  }

  function CambiarAzul() {
    instrucciones a ejecutar
  }

</script>

El bloque <script>, con las instrucciones a ejecutar para cada función, se puede colocar en la sección <body> o en la cabecera <head>:

<!DOCTYPE html>
<html>

    <head>
    <script>

        function CambiarRojo() {
            var elemento=document.getElementById('Texto')
            elemento.style.color='Red'
        }

        function CambiarAzul() {
            var elemento=document.getElementById('Texto')
            elemento.style.color='Blue'
        }

    </script>
    </head>

    <body>

        <p id="Texto">Texto del documento</p>

        <button type="button" onclick="CambiarRojo()">Rojo</button>
        <button type="button" onclick="CambiarAzul()">Azul</button>

    </body>
</html>

Las instrucciones de los scripts siguen la sintaxis del lenguaje de programación JavaScript. Su estudio va mucho más allá del propósito de este cuaderno. Para lo que aquí necesitamos, nos basta con saber el significado de los archivos .js añadidos por MkDocs.

Archivos JavaScript¶

La posibilidad de insertar scripts en el texto HTML resulta interesante en el caso de pequeños scripts. Para labores de programación más ambiciosas, es costumbre poner los scripts en archivos aparte, con extensión .js, abreviatura de javascript.

Hagamos un experimento. Vamos a crear el siguiente archivo prueba.html:

<!DOCTYPE html>
<html>

  <body>

    <p id="Texto">Texto del documento</p>

    <button type="button" onclick="CambiarRojo()">Rojo</button>
    <button type="button" onclick="CambiarAzul()">Azul</button>

    <script src="./cambiar_colores.js"></script>

  </body>
</html>

Entre las etiquetas <script>... </script> no ponemos nada. Usamos el atributo src, abreviatura de "source", para indicar al navegador que tome las instrucciones de un archivo llamado cambiar_colores.js, cuyo texto es:

function CambiarRojo() {
  var elemento=document.getElementById('Texto')
  elemento.style.color='Red'
}

function CambiarAzul() {
  var elemento=document.getElementById('Texto')
  elemento.style.color='Blue'
}

Como veremos más adelante, algunas de las funcionalidades incorporadas por MkDocs se obtienen gracias a los archivos de script que se añaden automáticamente a los archivos resultantes.