Incluir javascript en html

Incluir javascript en html – Métodos para trabajar correctamente

Hace poco hablábamos de los lenguajes de programación en entornos de cliente, hoy vamos a profundizar un poco más en el tema y hablaremos cómo podemos incluir JavaScript en HTML, algo muy sencillo cuando se tiene cierta experiencia, pero que puede resultar complejo si estamos empezando.

Como sabemos el código JavaScript sirve para aumentar la funcionalidad de nuestras páginas escritas en HTML. Para que nuestro código JS (que es el diminutivo con el que se conoce al código de desarrollo JavaScript) pueda interpretar el lenguaje de marcado HTML con sus estilos (recordemos que se dan gracias a las hojas de estilos en cascada o CSS) debemos poder incluir JavaScript en HTML, o mejor dicho, en nuestra página web.

Primer método para incluir JavaScript en HTML

Este es el método que debe utilizarse por simplicidad de código y legibilidad de las páginas web. Es el método que recomienda el World Wide Web Consortium (W3C) por el que se rige el código de toda web. Este método es que separa los archivos js de los archivos html y es en estos últimos dónde se enlazan los archivos JavaScript que tenemos que utilizar.

Para mejorar la legibilidad del código, lo mejor es separar los ficheros según si tipo. Siguiendo esta nomenclatura tendremos al menos una carpeta contenido en el que tendremos varias subcarpetas, en las que habrá una llamada JavaScript y otra como mínimo en la que colgar las hojas de estilo. También se pueden poner en la raíz, pero es mucho más legible con proyectos muy grandes el separarlas en una sola carpeta, ya que además habrá otras carpetas como imágenes entre otras.

Si el proyecto es muy grande debemos crear subcarpetas dentro de la carpeta JavaScript y podremos separarlas por secciones nombradas dentro de la aplicación, pero esto ya depende de cada desarrollador.

Para referenciar los ficheros javascript externos dentro de los archivos html, se ha de incluir dentro de la etiqueta html, en el lugar que se prefiera siendo recomendable al final de la página. El código a incluir es un código similar al siguiente:

En él, indicas al código HTML que debe ir a buscar un fichero del tipo text/javascript a la ruta indicada. Esa ruta se puede poner relativa a la carpeta dónde se encuentra el fichero que está llamando al fichero o absoluta cuando nombramos la ruta desde el root de la aplicación (lo más recomendable para los copy/paste y evitar sustos de renderizar el código).

Segundo método – En el propio HTML

Este segundo método de incluir código JavaScript en HTML es otra de las opciones que tenemos. Es menos recomendable que la anterior porque agranda el tamaño de las páginas pero también evita hacer una llamada POST al fichero JavaScript. Sólo recomendamos el uso de este método para webs pequeñas ya que las páginas muy grandes con mucho código javascript codificado sobre el propio HTML dificultará la lectura y mantenimiento del site.

Dentro de la página HTML, podemos escribir el código en cualquier lugas que se nos ocurra, desde el head, pasando con el contenido, hasta el final de la página donde es más recomendable , al igual que en el primer método. El modo de incluirlo es muy similar al anterior, pero en vez de referenciar un archivo, escribiremos el código dentro de las etiquetas script.

function customAlert(var msg){
    alert (msg);
  }

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *