sábado, 22 de mayo de 2010

Eventos en JavaScript

Eventos en JavaScript

En JavaScript, la interacción con el usuario se consigue mediante la captura de los eventos que éste produce. Un evento es una acción del usuario ante la cual puede realizarse algún proceso (por ejemplo, el cambio del valor de un formulario, o la pulsación de un enlace).

Los eventos se capturan mediante los manejadores de eventos. El proceso a realizar se programa mediante funciones JavaScript llamadas por los manejadores de eventos.

La siguiente tabla muestra los manejadores de eventos que pueden utilizarse en JavaScript, la versión a partir de la cual están soportados y su significado.

Ejemplo de evento:



En este ejemplo, CompruebaCampo() es una función JavaScript definida en alguna parte del documento HTML (habitualmente en la cabecera del mismo). El identificador this es una palabra propia del lenguaje, y se refiere al objeto desde el cual se efectua la llamada a la función (en este caso, el campo del formulario).

La siguiente tabla muestra los eventos que pueden utilizarse con los objetos del modelo de objetos JavaScript del Navigator.

Métodos de evento disponibles en JavaScript

Los siguientes métodos de evento pueden utilizarse en JavaScript:

Métodos de evento Función que realizan
blur() Elimina el foco del objeto desde el que se llame
click() Simula la realización de un click sobre el objeto desde el que se llame
focus() Lleva el foco al objeto desde el que se llame
select() Selecciona el área de texto del campo desde el que se llame
submit() Realiza el envío del formulario desde el que se llame


Eventos onLoad y onUnload

Se usan como atributos del tag de HTML.

Ejemplo:



La función Hola() se ejecutará antes de que se cargue la página y la función Adios() al abandonarla.

Ejemplo:






...



En este otro ejemplo se utilizan funciones:





Calculadora interactiva:


El resultado es:


Definición de estilos

Al igual que con CSS, mediante la sintaxis JavaScript podemos definir clases de estilos y estilos individualizados.
Mediante clases

Seguimos con una jerarquía de objetos a la hora de definir clases. Por ejemplo:
classes.all.NombreClase.color = "blue";

En lugar de tags, donde modificabamos etiquetas, ahora ponemos classes. Luego indicamos que queremos una clase que modifique todas las etiquetas (all), seguido del nombre de la clase y el atributo a modificar.
Mediante ID

De la misma manera, cuando queremos usar el parámetro ID, deberemos usar la siguiente jerarquía:

ids.NombreID.color = "blue";

Un modelo común

En capítulos posteriores desentrañaremos com mayor detalle las distintas maneras de escribir código compatible con los dos navegadores. Ahora sólamente usaremos una de ellas. Con ella comprobamos el nombre y la versión del navegador y bifurcamos según sea Netscape o Explorer. Si la versión es inferior a la 4.0 no hacemos nada, claro.

La principal mejora es que comprime los archivos de definición de fuentes de manera comparable al PFR de Netscape. Tiene también el pequeño problema del dominio, aunque al menos en este caso sí que podremos ver nuestras páginas desde el disco duro, ya que estas fuentes son las mismas que tenemos instaladas en nuestro sistema.

Estructuras de control

Estructuras de control


JavaScript posee las sentencias de control típicas de los lenguajes de alto nivel. A continuación veremos la sintaxis de las mismas.

1. Declaración de variables.

En cuanto a las variables en JavaScript decir que no se les asigna un tipo predefinido. En JavaScript el tipo de las variables dependen del valor que contengan las mismas en cada momento. Por tanto se realiza una conversión automática de tipos.

JavaScript reconoce los siguientes tipos de valores:

1. Números: enteros y reales.
2. Valores booleanos: true y false.
3. Strings.
4. El valor null.
5. Los objetos: Creados por el programador o predefinidos por el lenguaje.

Dado que no existen tipos de variables a priori, no hemos de especificar el tipo de variable cuando la declaramos. La declaración de variables se hace anteponiendo la palabra reservada var al nombre de la variable.

var mi_variable;

Es posible asignarle el valor cuando la declaramos, por ejemplo:

var mi_entero = 124;

2. La sentencia if.

La sentencia if tiene la forma:

if ( Condición ) Instrucción 1 o bloque de instrucciones;
[ else Instrucción 2 o bloque de instrucciones; ]

Los paréntesis asociados que delimitan la condición no son opcionales. En caso de que la condición sea verdadera se ejecutará la instrucción 1; en caso contrario se ejecuta si existe la instrucción 2.

Un bloque de instrucciones es un conjunto de intrucciones delimitadas por llaves. Es decir:

{
Instrucción 1;
Instrucción 2;
...
Instrucción N;
}

3. La sentencia while.

La sentencia while tiene la forma:

while ( Condición ) Instrucción o bloque de instrucciones;

Los paréntesis no son opcionales. Si se cumple la condición se ejecute la instrucción o el bloque de instrucciones y se repite el proceso.

4. La sentencia for.

En cuando a dicha sentencia, en JavaScript podemos distinguir dos variantes:

5. El bucle for "clásico".

Este bucle, como a continuación podremos ver, tiene una sintaxis muy parecida a la de C/C++.

for ([inicialización]; [condición]; [expresión] )
Instrucción o bloque de instrucciones;

En esta sintaxis:

Inicialización: Crea la variable contador y le da un valor inicial.

Condición: lo que se debe cumplir para que el bucle se ejecute. Depende de la variable índice.

Actualización: Actualiza el valor de la variable índice.

El equivalente de esta expresión con while es:

inicialización;
while (condición )
{
Instrucción 1;
Instrucción 2;
...
Instrucción N;
expresión;
}

6. El bucle for/in.

Esta estructura itera una variable var sobre todas las propiedades de un objeto obj que se le pasa. Así para cada valor de var se ejecutaran las sentencias del bucle. Por lo tanto, el bucle tendrá tantas iteraciones como propiedades el objeto y en cada iteración la variable tendrá el valor de la propiedad del objeto correspondiente con dicha iteración. Su sintaxis es:

for (var in obj)
Instrucción o bloque de instrucciones;

7. La sentencia break.

La sentencia break se puede colocar dentro de un bucle o bucles anidados. Cuando se ejecuta la sentencia break se abandona el bucle más interno. A todos los efectos la sentencia break actúa como un salto a la instrucción siguiente al bucle en el que se ejecuta.

8. La sentencia continue.

La sentencia continue, no abandona el bucle si no hace que se ejecute la siguiente iteración. En el bucle while la ejecución del continue hace que el flujo del programa salte a la condición. En el bucle for la ejecución del continue hace que la expresión de incremento, para después continuar normalmente con la condición. Es decir, la ejecución del continue evita que se ejecute el resto del cuerpo del bucle.

9. La sentencia switch.

Hace que se seleccione un grupo de sentencias entre varias posibles. Su sintaxis es:

switch ( Expresión )
{
case Valor 1: Instrucción o bloque de instrucciones;
[break;]
case Valor 2: Instrucción o bloque de instrucciones;
[break;]
case Valor 3: Instrucción o bloque de instrucciones;
[break;]
...
case Valor N: Instrucción o bloque de instrucciones;
[break;]
[default:]Instrucción o bloque de instrucciones;
}

La expresión entre paréntesis del switch debe ser entera. Su resultado se comparará con los distintos valores del case. Si coincide con uno de ellos se pasará a la instrucción siguiente al case con dicho valor y se seguirán ejecutando las instrucciones consecutivas hasta encontrar una instrucción break o alcanzar el cierra llaves del switch. En caso de que el resultado de la expresión no coincida con ningún valor se pasará la ejecución a la instrucción siguiente de la etiqueta default, si la hubiera, y se continuará como un case. Los valores en los case pueden ser una expresión constante. No puede haber dos case con el mismo valor

sábado, 15 de mayo de 2010

JAVA SCRIPT

¿Qué es JavaScript?

Es un lenguaje de scripting basado en objetos, utilizado para acceder a objetos en aplicaciones. Principalmente, se utiliza integrado en un navegador web permitiendo el desarrollo de interfaces de usuario mejoradas y páginas web dinámicas. JavaScript es un dialecto de ECMAScript y se caracteriza por ser un lenguaje basado en prototipos, con entrada dinámica y con funciones de primera clase. JavaScript ha tenido influencia de múltiples lenguajes y se diseñó con una sintaxis similar al lenguaje de programación Java, aunque más fácil de utilizar para personas que no programan.

Todos los navegadores modernos interpretan el código JavaScript integrado dentro de las páginas web. Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del DOM.

El lenguaje fue inventado por Brendan Eich en la empresa Netscape Communications, la que desarrolló los primeros navegadores web comerciales. Apareció por primera vez en el producto de Netscape llamado Netscape Navigator 2.0.

Tradicionalmente, se venía utilizando en páginas web HTML, para realizar operaciones y en el marco de la aplicación cliente, sin acceso a funciones del servidor. JavaScript se ejecuta en el agente de usuario, al mismo tiempo que las sentencias van descargándose junto con el código HTML.

Inicialmente los autores lo llamaron Mocha y más tarde LiveScript pero fue rebautizado como JavaScript en un anuncio conjunto entre Sun Microsystems y Netscape, el 4 de diciembre de 1995.

En 1997 los autores propusieron JavaScript para que fuera adoptado como estándar de la European Computer Manufacturers 'Association ECMA, que a pesar de su nombre no es europeo sino internacional, con sede en Ginebra. En junio de 1997 fue adoptado como un estándar ECMA, con el nombre de ECMAScript. Poco después también como un estándar ISO.

JScript es la implementación de ECMAScript de Microsoft, muy similar al JavaScript de Netscape, pero con ciertas diferencias en el modelo de objetos del navegador que hacen ambas versiones sean incompatibles con frecuencia.

Para evitar estas incompatibilidades, el World Wide Web Consortium diseñó el estándar Document Object Model (DOM, ó Modelo de Objetos del Documento en castellano), que incorporan Konqueror, las versiones 6 de Internet Explorer y Netscape Navigator, Opera la versión 7, y Mozilla Application Suite, Mozilla desde su primera versión.