JavaScript a Detalle

Funciones y Eventos

El lenguaje JavaScript contiene dos elementos base: Funciones y eventos .

Eventos

Como su nombre lo indica, es la ocurrencia de un acontecimiento , debido a que todo Navegador trabaja en conjunción de un "mouse", la mayoría de los eventos giran alrededor de éste dispositivo , esto es, cuando el usuario pasa el "mouse" sobre cierto punto, oprime el botón derecho o utiliza doble "click". Además de estos eventos relacionados con el "mouse", también existen eventos relacionados directamente con un documento, como : Al momento de cargarse el archivo HTML / XHTML o cuando es seleccionada una opción de una forma HTML / XHTML .

Eventos relacionados con un documento y formas HTML / XHTML

La siguiente tabla enumera los diversos eventos JavaScript relacionados con un documento HTML / XHTML , así como los Tags HTML / XHTML donde es posible utilizarlos:

Evento	Funcionamiento	Elemento HTML / XHTML aplicable
`onload`	Este evento permite ejecutar cierta función cada vez que sea cargada una página o un "Frameset".	<body> <frameset>
`onunload`	Este evento permite ejecutar cierta función cuando sea descargada una página o "Frameset".	<body> <frameset>
`onsubmit`	Este evento permite ejecutar cierta función al momento de ser enviada una forma HTML / XHTML.	<form>
`onreset`	Este evento permite ejecutar cierta función al momento de ser reinicializados los valores de una forma HTML / XHTML.	<form>
`onselect`	Este evento permite ejecutar cierta función al momento que un usuario interactúa con el elemento HTML / XHTML.	<input>, <textarea>
`onchange`	Este evento permite ejecutar cierta función al momento que un usuario interactúa/modifica el elemento HTML / XHTML.	<input>, <select>, <textarea>
`onfocus`	Este evento es disparado cuando el elemento HTML / XHTML es enfocado, esto es, el usuario se posiciona para realizar cambios al elemento.	<a>,<input>, <select>, <textarea>
`onblur`	Este evento es disparado cuando el elemento HTML / XHTML es desenfocado, esto es, el usuario se moviliza del elemento.	<a>,<input>, <select>, <textarea>

Eventos Relacionados con el "mouse"

Los eventos relacionados con las acciones del "mouse" son aplicables a la gran mayoría de Tags HTML / XHTML y se describen a continuación :

onclick : Este evento es utilizado cuando se requiere ejecutar alguna acción al momento que el usuario de un "click" con su "mouse" sobre un elemento, de la misma manera en que un "click" en un link de HTML / XHTML envía al usuario a otra pagina, JavaScript extiende este "click" para realizar otras acciones.
ondblclick : Este evento es utilizado cuando se requiere ejecutar alguna acción al momento que el usuario de un doble "click" con su "mouse".
onmousedown : Este evento permite un grado más refinado que onclick, ya que es disparado al momento que el usuario oprime el botón del "mouse".
onmouseup : Este evento es complementario a onmousedown y es disparado al momento que el usuario libera el botón del "mouse".
onmouseover : Este evento es invocado cuando el apuntador del "mouse" sobrepasa determinado elemento HTML / XHTML.
onmousemove : Asociado con onmouseover, este evento es disparado una vez que el apuntador del "mouse" navegue sobre el elemento HTML / XHTML.
onmouseout : Este evento es invocado una vez que el apuntador del "mouse" sale del elemento HTML / XHTML que define onmouseover.

Los eventos antes mencionados cubren todo nivel de interactividad que pueda tener el usuario con un documento HTML / XHTML, desde el momento en que carga la página hasta la navegación de la misma, sin embargo, ya definidos estos eventos, aun es necesario definir las respectivas funciones que serán activadas en base a los determinados eventos .

Funciones y Propiedades

A continuación serán descritas varias funciones y propiedades que se encuentran integradas al "Browser" mediante objetos que son ampliamente utilizados en la gran mayoría de diseños HTML / XHTML , cabe mencionar que hoy en día existen una gran gama de funciones (objetos) JavaScript, sin embargo, la siguiente sección se concentrará en funciones y objetos clásicos (Versión JavaScript 1.2) para así garantizar un funcionamiento adecuado de las mismas en distintos "Browsers" :

Objeto Date : Representa una entidad para manipulación de fechas.
Método getDate	Regresa el día del mes en base a la fecha del sistema.
Método getMonth	Retorna el mes basado en la fecha del sistema.
Método getTime	Regresa un valor numérico sobre la fecha actual del sistema.
Método toGMTString	Convierte un objeto Date a una entidad tipo String utilizando la convención GMT.

Objeto Document : Contiene información acerca del documento
Propiedad cookie	Especifica un cookie para el navegador.
Método write	Escribe expresiones HTML / XHTML al documento.
Método writeln	Escribe expresiones HTML / XHTML al documento seguido de un salto de linea ('\n').

Objeto History : Contiene información de la historia de URL's
Propiedad current	Contiene información del URL actual.
Propiedad length	Contiene el número de URL's en el historial del Navegador.
Propiedad next	Especifica el URL de la siguiente entrada en el historial.
Método back	Carga el URL previo en el historial del navegador.
Método forward	Carga el siguiente URL en el historial del navegador.

Objeto Location : Representa información acerca del URL.
Propiedad host	Contiene el nombre del dominio o nodo IP del sitio donde fue solicitada la página.
Propiedad href	Contiene el URL de la página en cuestión
Propiedad pathname	Contiene la ruta de la página (URL) sin el host.
Método reload	Carga el URL indicado sobre la historia actual del Navegador.
Método replace	Forza el cargar el documento actual del "Browser".

Objeto String : Representa una entidad del tipo String .
Propiedad length	Refleja la longitud del String.
Método indexof	Regresa la posición (Indice) de la primer ocurrencia del valor especificado, o -1 si no existe.
Método lastindexof	Retorna la posición (Indice) de la últim ocurrencia del valor especificado, o -1 si no existe.
Método substring	Regresa los caracteres del String entre los dos Indices (Posiciones) proporcionados.
Método tolowercase	Retorna el valor del String con todos sus caracteres convertidos a letras minúsculas.
Método touppercase	Retorna el valor del String con todos sus caracteres convertidos a letras mayúsculas.

Objeto Window : Representa información acerca de la Ventana del "Browser".
Propiedad host	Contiene el nombre del dominio o nodo IP del Sitio de Internet.
Propiedad href	Contiene el URL de la página en cuestión
Propiedad name	Nombre asignado a una ventana particular.
Propiedad pathname	Contiene el la ruta de la página (RUL) sin el host.
Método alert	Despliega una ventana de alerta con un mensaje, y un botón de confirmación.
Método confirm	Despliega una ventana de confirmación con mensaje, y dos botones (confirmación y cancelación) .
Método close	Cierra una ventana determinada del navegador.
Método open	Abre una ventana nueva del navegador.
Método reload	Carga el URL indicado sobre la historia actual del navegador.
Método replace	Forza el cargar el documento actual del "Browser".

Botones de Alerta y Confirmación.

En muchas situaciones de navegación resulta práctico hacerle al usuario una pregunta o presentarle un aviso al momento que ocurre determinado evento, para estas situaciones existen las funciones alert y confirm que pertenecen al Objeto Window, a continuación se describen dos ejemplos haciendo uso de estas funciones :

"Cookies" y Ventanas

Se le denomina "Cookie" a un fragmento de información que es colocado en el "Browser" al momento de visitar un sitio en internet, mediante esta información es posible rastrear un Navegador, o mejor dicho, un usuario, a la largo de su sesión de navegación e inclusive a largo del tiempo.

Hasta cierto punto un "Cookie" no es tan inseguro como se pudiera pensar, ya que conforme han evolucionado los diversos "Browsers" del mercado se les han incorporado mecanismos para evitar posibles abusos, entre los que se encuentran:

Informar al usuario antes de aceptar cualquier tipo de "Cookie".
Permitir al usuario caducar la fecha del "Cookie".
El sitio solicitante solo puede observar "Cookies" de su dominio, esto es, un servidor puede analizar únicamente los "Cookies" que éste haya colocado.

Los parámetros mencionados anteriormente, así como los diversos "Cookies" que residen en un Navegador pueden ser observados de los siguientes menús en los respectivos "Browsers" :

En Netscape Navigator: Del Menú: Edit | Preferences , submenu Privacy and Security / Cookies es posible observar los "Cookies" residentes en el "Browser" e indicar diversas acciones sobre "Cookies".
En Internet Explorer: Del Menú Tools | Internet Options , parte intermedia para eliminar "Cookies" y Tab Privacy para indicar opciones de manejo.

El siguiente ejemplo hace uso de "Cookies" a través de JavaScript, así como el uso de ventanas adicionales ("Pop-up") en "Browsers" :

Uso de "Cookies" y Ventanas "Pop-up"

Menús

Otra funcionalidad que puede lograrse con JavaScript es la lógica de navegación para menús, dicho mecanismo permite concentrar labores administrativas y reducir los tiempos de descarga comparado a otros menús realizados con tecnologías como Flash; a continuación se describe el uso de este tipo de menús :

Revisión de parámetros en el cliente

La revisión de parámetros en formas HTML / XHTML es otra área en la que JavaScript puede ser empleado , este tipo de revisiones facilitan que sólo información verificada sea enviada al servidor. Lo anterior evita requisiciones innecesarias al servidor de páginas que incrementan el proceso de navegación para el usuario, y además reducen el procesamiento llevado acabo por el servidor.

Forma con validación de parámetros

DHTML Revisitado

Ya descritos los fundamentos de JavaScript, el siguiente ejemplo ilustra el uso de capas HTML / XHTML (Tags <div>) en conjunto de funciones JavaScript, demostrando así las capacidades más avanzadas de DHTML.

Uso de DHTML avanzado (c/JavaScript)

[Cerrar Ventana]