Saltar la navegación

Insertar los SCRIPTS

Crea un documento HTML con este contenido y ábrelo con tu navegador:

<!DOCTYPE html>
<html>
    <head>
        <title>Ejemplo</title>
        <script type="text/javascript">
            alert("Ejemplo");
        </script>
    </head>
    <body>

    </body>
</html>

Así es como se insertan los SCRIPTS, haciendo uso de la etiqueta SCRIPT.

En XHTML es necesario incluir el atributo TYPE (tipo), que hace referencia al conocido como tipo MIME. En HTML5 este atributo no es necesario, y podemos insertar el SCRIPT así:

<script>
    alert("Ejemplo");
</script>

¿Dónde van esas etiquetas?

Las etiquetas SCRIPT pueden ir tanto en la cabecera del documento (HEAD), como en su cuerpo (BODY).

Igual que podemos tener hojas de estilo (CSS) externas, podemos usar documentos JavaScript externos.

JavaScripts externos

Ya hemos visto cómo insertar un SCRIPT incluido en la propia página. Veamos ahora como hacer uso de código JavaScript incluido en archivos externos.

Crea un documento con el siguiente contenido y guárdalo con este nombre: ejemplo.js

alert("Ejemplo");

Como ves, en el documento no se incluye la etiqueta SCRIPT.

Después, crea un documento HTML con el siguiente contenido:

<!DOCTYPE html>
<html>
    <head>
        <title>Ejemplo</title>
        <script src="ejemplo.js"></script>
    </head>
    <body>

    </body>
</html>

Guarda el documento con el nombre ejemplo.html (en la misma carpeta que ejemplo.js para que la ruta -src- esté bien) y ábrelo con un navegador.

Descarga este ejemplo en formato zip

Ventajas del JavaScript externo

  • Las ventajas son similares a las que comentamos al tratar sobre los CSS externos:
  • Tenemos todo el código en un archivo y es más fácil modificarlo.
  • Nuestra página HTML es más ligera y carga más rápido.
  • El navegador cachea el contenido de esos archivos externos (la carga es aún más rápida).
  • ...

En algunos casos sí tendrá sentido usar código en la propia página (un pequeño código que solo se usa en una página en concreto, por ejemplo), pero en líneas generales es recomendable trabajar con archivos externos.

Saca partido a este curso...

  • A partir de ahora iremos viendo ejemplos de código JavaScript.
  • Podemos probarlo en el navegador, tal y como hemos hecho en el ejemplo anterior.
  • Tratándose de pruebas, podemos hacerlo como nos resulte más cómodo: incluyendo el código en la página HTML o en un archivo JS externo.
  • Os aconsejamos ir probando los diferentes ejemplos para comprender el contenido del curso.