Websarrolladores

Todo sobre diseño y desarrollo web

Incorporando Javascript

Siguiendo los mismos lineamientos que en CSS, existen tres técnicas para incorporar código Javascript dentro de HTML. Sin embargo, al igual que en CSS, solo la inclusión de archivos externos es la recomendada a usar en HTML5.

En línea

Esta es una técnica simple para insertar Javascript en nuestro documento que se aprovecha de atributos disponibles en elementos HTML. Estos atributos son  manejadores de eventos que ejecutan código de acuerdo a la acción del usuario.

Los manejadores de eventos más usados son, en general, los relacionados con el ratón, como por ejemplo onclick, onMouseOver, u onMouseOut. Sin embargo, encontraremos sitios web que implementan eventos de teclado y de la ventana, ejecutando acciones luego de que una tecla es presionada o alguna condición en la ventana del navegador cambia (por ejemplo, onload u onfocus).

EJM 4.1

<!DOCTYPE html>
<html lang=”es”>
<head>
<title>Este texto es el título del documento</title>
</head>
<body>
<div id=”principal”>
<p onclick=”alert(‘hizo clic!’)”>Hacer Clic</p>
<p>No puede hacer clic</p>
</div>
</body>
</html>

Utilizando el manejador de eventos onclick en el ejm 4.1, un código es ejecutado cada vez que el usuario hace clic con el ratón sobre el texto que dice “Hacer Clic”. Lo que el manejador onclick está diciendo es algo como: “cuando alguien haga clic sobre este elemento ejecute este código” y el código en este caso es una función predefinida en Javascript que muestra una pequeña ventana con el mensaje “hizo clic!”.en el ejm 4.1, un código es ejecutado cada vez que el usuario hace clic con el ratón sobre el texto que dice “Hacer Clic”. Lo que el manejador onclick está diciendo es algo como: “cuando alguien haga clic sobre este elemento ejecute este código” y el código en este caso es una función predefinida en Javascript que muestra una pequeña ventana con el mensaje “hizo clic!”.

Intente cambiar el manejador onclick por onMouseOver, por ejemplo, y verá cómo
el código es ejecutado solo pasando el puntero del ratón sobre el elemento.

El uso de Javascript dentro de etiquetas HTML está permitido en HTML5, pero por las mismas razones que en CSS, esta clase de práctica no es recomendable. El código HTML se extiende innecesariamente y se hace difícil de mantener y actualizar. Así mismo, el código distribuido sobre todo el documento complica la construcción de aplicaciones útiles.

Nuevos métodos y técnicas fueron desarrollados para referenciar elementos HTML y registrar manejadores de eventos sin tener que usar código en línea (inline).

Embebido

Para trabajar con códigos extensos y funciones personalizadas debemos agrupar los códigos en un mismo lugar entre etiquetas <script>. El elemento <script> actúa exactamente igual al elemento <style> usado para incorporar estilos CSS. Nos ayuda a organizar el código en un solo lugar, afectando a los elementos HTML por medio de referencias.

Del mismo modo que con el elemento <style>, en HTML5 no debemos usar ningún
atributo para especificar lenguaje. Ya no es necesario incluir el atributo type en la
etiqueta <script>. HTML5 asigna Javascript por defecto.

EJM 4.2

<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<script>
function mostraralerta(){
alert('hizo clic!');
}
function hacerclic(){
document.getElementsByTagName('p')[0].onclick=mostraralerta;
}
window.onload=hacerclic;
</script>
</head>
<body>
<div id=”principal”>
<p>Hacer Clic</p>
<p>No puede hacer Clic</p>
</div>
</body>
</html>

El elemento <script> y su contenido pueden ser posicionados en cualquier lugar del
documento, dentro de otros elementos o entre ellos. Para mayor claridad, recomendamos siempre colocar tus códigos Javascript en la cabecera del documento (como en el ejemplo del ejm 4.2) y luego referenciar los elementos a ser afectados usando los métodos Javascript apropiados para ese propósito.

Actualmente existen tres métodos disponibles para referenciar elementos HTML desde Javascript:

  • getElementsByTagName: (usado en el ejm 4.2) referencia un elemento
    por su nombre o palabra clave.
  • getElementById: referencia un elemento por el valor de su atributo id.
  • getElementsByClassName: es una nueva incorporación que nos permite
    referenciar un elemento por el valor de su atributo class.

Incluso si seguimos la práctica recomendada (posicionar el código dentro de la
cabecera del documento), una situación debe ser considerada: el código del documento es leído de forma secuencial por el navegador y no podemos referenciar un elemento que aún no ha sido creado.

En el ejm 4.2, el código es posicionado en la cabecera del documento y es leído por
el navegador previo a la creación del elemento <p> que estamos referenciando. Si
hubiésemos intentado afectar el elemento <p> directamente con una referencia,
hubiéramos recibido un mensaje de error anunciando que el elemento no existe. Para evitar este problema, el código fue convertido a una función llamada mostraralerta(), y la referencia al elemento <p> junto con el manejador del evento fueron colocados en una segunda función llamada hacerclic().

Las funciones son llamadas desde la última línea del código usando otro manejador de eventos (en este caso asociado con la ventana) llamado onload. Este manejador
ejecutará la función hacerclic() cuando el documento sea completamente cargado y
todos los elementos creados.

Es tiempo de analizar cómo el documento del ejm 4.2 es ejecutado. Primero las
funciones Javascript son cargadas (declaradas) pero no ejecutadas. Luego los elementos HTML, incluidos los elementos <p>, son creados. Y finalmente, cuando el documento completo es cargado en la ventana del navegador, el evento load es disparado y la función hacerclic() es llamada.

En esta función, el método getElementsByTagName referencia todos los elementos
<p>. Este método retorna un arreglo (array) conteniendo una lista de los elementos de la clase especificada encontrados en el documento. Sin embargo, usando el índice [0] al final del método indicamos que solo queremos que el primer elemento de la lista sea retornado. Una vez que este elemento es identificado, el código registra el manejador de eventos onclick para el mismo. La función mostraralerta() será ejecutada cuando el evento click es disparado sobre este elemento mostrando el mensaje “hizo clic!”.

Puede parecer mucho código y trabajo para reproducir el mismo efecto logrado por
una simple línea en el ejemplo del Listado 4-1. Sin embargo, considerando el potencial de HTML5 y la complejidad alcanzada por Javascript, la concentración del código en un único lugar y la apropiada organización representa una gran ventaja para nuestras futuras implementaciones y para hacer nuestros sitios web y aplicaciones fáciles de desarrollar y mantener.

Conceptos básicos: Una función es un código agrupado que es  ejecutado solo cuando la función es invocada (activada o llamada) por su nombre. Normalmente, una función es llamada usando su nombre y algunos valores encerrados entre paréntesis (por ejemplo, hacerclic(1,2)). Una excepción a esta sintaxis es usada en el ejm 4.2. En este código no usamos paréntesis porque estamos pasando al evento solo la referencia a la función, no el resultado de su ejecución.

Archivos externos

Los códigos Javascript crecen exponencialmente cuando agregamos nuevas funciones y aplicamos algunas de las APIs mencionadas previamente. Códigos embebidos incrementan el tamaño de nuestros documentos y los hacen repetitivos (cada documento debe volver a incluir los mismos códigos). Para reducir los tiempos de descarga, incrementar nuestra productividad y poder distribuir y reusar nuestros códigos en cada documento sin comprometer eficiencia, recomendamos grabar todos los códigos Javascript en uno o más archivos externos y llamarlos usando el atributo src:

EJM 4.3

<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<script src=”micodigo.js”></script>
</head>
<body>
<div id=”principal”>
<p>Hacer Clic</p>
<p>No puede hacer Clic</p>
</div>
</body>
</html>

El elemento <script> en el ejm 4.3 carga los códigos Javascript desde un archivo
externo llamado micodigo.js. De ahora en más, podremos insertar nuestros códigos en este archivo y luego incluir el mismo en cualquier documento de nuestro sitio web que lo necesite. Desde la perspectiva del usuario, esta práctica reduce tiempos de descarga y acceso a nuestro sitio web, mientras que para nosotros simplifica la organización y facilita el mantenimiento.

Tema creado por Anders Norén

¿Necesitas una web?

www.sutilweb.com