Como incluir Javascript en HTML

Posted by On agosto 30, 2015 2 Comments

Existen tres formas de incluir JavaScript en HTML, según nuestras necesidades y las de la aplicación, aunque siempre es recomendable que utilicemos la que vamos a ver en último lugar, en ciertas ocasiones es necesario utilizar alguna de las otras por simplicidad.

Introducir JavaScript en los elementos de HTML

Esta es la forma menos utilizada, aunque he de decir que cuando no se requiere nada de código y solo es una acción suelo utilizarla al ocupar muy poco espacio.

Esta forma de incluir JavaScript en html consiste precisamente en introducir los elementos de JS en una etiqueta de nuestro código html, un ejemplo de ello podría ser:

<span onclick="alert('Hola Mundo!')">Haz click aquí</span>

El problema que tiene este método es que ensucia mucho el código HTML y complica su mantenimiento, por lo que como hemos dicho solo se debe utilizar para situaciones muy especiales.

Introducir JavaScript en el documento

Seguimos introduciendo el código dentro del mismo documento solo que esta vez lo hacemos entre las etiquetas <script> que se pueden introducir en cualquier parte del código html, aunque es recomendable que se haga dentro de la cabecera del documento XHTMLm es decir dentro de la etiqueta <head>

En el siguiente ejemplo vemos como funciona esto:

<html>
<head>
    <title>Introducción de código js en las etiquetas script</title>
    <script type="text/javascript">
        alert('Hola Mundo!');
    </script>
</head>
<body>
Bienvenido a JavaScript
</body>
</html>

Esta forma se emplea cuando solo necesitamos una bloque pequeño de código y que no merezca la pena escribir el código en un archivo aparte y preferiblemente que solo aparezca en este documento, ya que si el mismo código JS se encuentra en diferentes lugares y requiere una modificación hay que hacerlo en todos ellos.

Para que el documento quede validado la etiqueta script debe de tener el atributo type=»text/javascript»

Introducir JavaScript en un archivo externo

Esta es sin duda la mejor opción cuando tenemos un código que afecta a diferentes páginas del sitio o es un código muy elaborado.

Para ello utilizamos de nuevo la etiqueta script que podemos repetir para insertar diferentes archivos JS en un mismo sitio por medio del atributo src que apunta la url del archivo JS que se quiere enlazar. Estos archivos cuya extensión es .js se pueden crear con cualquier editor de texto que queramos.

Archivo script.js

alert('Hola Mundo!');

Archivo html que enlaza a script.js

<html>
<head>
    <title>Introducción de código js en las etiquetas script</title>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
Bienvenido a JavaScript
</body>
</html>

Esta forma simplifica el código de la pagina ya que no tiene elementos extraños, se puede reutilizar en todas las páginas del sitio, es fácil de mantener y modificar para que afecte a todas las webs del sitio, por lo que es la más recomendable de utilizar.

La etiqueta <noscript>

Hay ocasiones en los que un navegador puede no disponer del soporte de JavaScript (aunque yo nunca me he topado un ninguno), o que el usuario lo haya bloqueado creyendo que navega de forma más segura, cosa que no es cierta y que  ademas va a provocarle muchos problemas a la hora de la visualización de los sitios, ya que actualmente apenas hay ninguna web que no utilice JS directamente o con alguno de sus Frameworks.

Cuando esto ocurre, existe una etiqueta llamada <noscript> que permite introducir un aviso si se detecta que JS esta bloqueado y mostrar su interior. Esta etiqueta se suele colocar al principio del body, incorporando cualquier otra etiqueta en su ámbito

<html>
<head>
    <title>Introducción de código js en las etiquetas script</title>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <noscript>
        su navegador no tiene activado Javascript
    </nocript>
    Bienvenido a JavaScript
</body>
</html>