Eventos en JavaScript

Un evento es un mecanismo por el cual podemos detectar las acciones que realiza el usuario y llamar automáticamente a la función que tengamos asociada. Desde esta función realizaremos las acciones que tengamos desarrolladas.

SINTAXIS:

<elemento nombre_evento=nombre_funcion([parametros]);>


La siguiente lista muestra los eventos y manipuladores de JavaScript:

EVENTO SE PRODUCE AL..
onLoad: Terminar de cargar una página o frame (entrar).
onUnLoad: Descargar una página o frame (salir).
onAbort: Abortar la carga de una página.
onError: Producirse algún error en la carga de la página.
onMouseOver: Pasar el ratón por encima de un enlace, area o frame.
onMouseOut: Dejar de estar el ratón encima de un enlace, area o frame.
onMouseMove: Mover el ratón por el documento.
onKeyUp: Presionar una tecla.
onClick: Hacer click con el ratón.
onResize: Dimensionar la ventana del navegador.
onMove: Mover la ventana del navegador.
onChange: Modificar texto en un control de edición. Sucede al perder el foco.
onSelect: Seleccionar texto en un control de edición.
onFocus: Situar el foco en un control.
onBlur: Perder el foco un control.
onSubmit: Enviar un formulario.
onReset: Inicializar un formulario.

Sentencias de Control en JavaScript

Es la manera que tiene JavaScript de provocar que el flujo de la ejecución avance y se ramifique en función de los cambios y estado de los datos.


IF-ELSE:

La ejecución atraviesa un conjunto de estados boolean que determinan que bloques de código se ejecutan. Con la utilización de esta sentencia nunca se realizarán ambos bloques de código.

SINTAXIS: En caso de ser una sola sentencia por parte las llaves son opcionales.

if (expresion-booleana)
{
Sentencia(s);
{
[else]
{
Sentencia(s);
}

La cláusula else es opcional. La expresión puede ser de cualquier tipo y más de una (siempre que se unan mediante operadores lógicos).Otra opción posible es la utilización de if anidados, es decir unos dentro de otros compartiendo la cláusula else.

SWITCH:

Es una sentencia muy similar a if-else. Si los valores con los que se compara son números se pone directamente el pero si es texto se debe encerrar entre comillas. La sintaxis de esta sentencia es:

SINTAXIS:

switch (expresión){
case constante1:
sentencia(s);
break;
case constante2:
sentencia(s);
break;
case constante3:
sentencia(s);
break;
case constanteN:
sentencia(s);
break;
[default:]
sentencia(s);
}
El valor de la expresión se compara con cada una de las constantes de la sentencia case, si coincide alguno, se ejecuta el código que le sigue, y cuando ejecuta break sale de este bloque hasta salir del switch. Si ninguno coincide se realiza el bloque default (opcinal), si no lo hay no se ejecuta nada.

En el caso que varias sentencias case realicen la misma ejecución se pueden agrupar, utilizando una sola sentencia break. Evitamos de este modo duplicar líneas de código. La sintaxis es la siguiente:

SINTAXIS:

switch (expresión){
case constante1:
case constante5:
sentencia(s);
break;
case constante3:
sentencia(s);
break;
[default:]
sentencia(s);
}
WHILE:

Ejecuta repetidamente el mismo bloque de código hasta que se cumpla una condición de terminación. Hay cuatro partes en todos los bucles. Inicialización, cuerpo, iteración y condición.

SINTAXIS:

[inicialización;]
while(condicion[es])
{
cuerpo;
[iteración;]
}



DO..WHILE:

Es lo mismo que en el caso anterior pero aquí como mínimo siempre se ejecutará el cuerpo del bucle una vez, en el tipo de bucle anterior es posible que no se ejecute ni una sola vez el contenido de este.

SINTAXIS:

[inicialización;]
do{
cuerpo;
[iteración;]
}while(condición);



FOR:

Realiza las mismas operaciones que en los casos anteriores pero la sintaxis es una forma compacta. Normalmente la condición para terminar es de tipo numérico. La iteración puede ser cualquier expresión matemática valida. Si de los 3 términos que necesita no se pone ninguno se convierte en un bucle infinito.


SINTAXIS: En caso de ser una sola sentencia por parte las llaves son opcionales.

for (inicio;cond_fin;iteración)
{
sentencia(S);
}

Dentro de las sentencias de control se pueden incluir las sentencias de ruptura ya que van muy ligadas a los bucles. Estas sentencias de ruptura son continue y break. A continuación vamos a ver como actúa cada una de ellas

La sentencia continue lo que hace es ignorar las sentencias que tiene el bucle y saltar directamente a la condición para ver si sigue siendo verdadera, si es así, sigue dentro del bucle, en caso contrario, saldría directamente de el.

La sentencia break tiene una operatoria más drástica que la sentencia continue, en vez de saltar a la línea de la condición para comprobar su estado, lo que hace es abandonar directamente el bucle dándolo por terminado.

Operadores en JavaScript

JavaScript define TRES tipos de operadores: aritméticos, relacionales y lógicos. También hay definido un operador para realizar determinadas tareas, como las asignaciones.

ASIGNACION (=)

En JavaScript se puede utilizar el operador de asignación en cualquier expresión valida. Solo con utilizar un signo de igualdad se realiza la asignación. El operador destino (parte izquierda) debe ser siempre una variable, mientras que en la parte derecha puede ser cualquier expresión valida. Es posible realizar asignaciones múltiples, igualar variables entre si y a un valor.

SINTAXIS:

variable=valor;

variable=variable1;

variable=variable1=variable2=variableN=valor;

ARITMÉTICOS

Pueden aplicarse a todo tipo de expresiones. Son utilizados para realizar operaciones matemáticas sencillas, aunque uniéndolos se puede realizar cualquier tipo de operaciones. En la siguiente tabla se muestran todos los operadores aritméticos.

OPERADOR DESCRIPCIÓN
- Resta.
+ Suma
* Multiplica
/ Divide
% Resto de una división
-- Decremento en 1.
++ Incrementa en 1.
vari+=valor Incrementa el valor de vari.
vari-=valor decrementa el valor de vari.
vari*=valor Multiplica el valor de vari.

LÓGICOS Y RELACIONALES

Los operadores relacionales hacen referencia a la relación entre unos valores y otros Los lógicos se refiere a la forma en que esas relaciones pueden conectarse entre si. Los veremos a la par por la estrecha relación en la que trabajan.


OPERADORES RELACIONALES OPERADORES LÓGICOS
OPERADOR DESCRIPCIÓN OPERADOR DESCRIPCIÓN
< Menor que. && Y (AND)
> Mayor que. | | O (OR)
<= Menor o igual. ¡! NO (NOT)
>= Mayor o igual
= = Igual
¡! = Distinto

Variables en JavaScript

Espacio de memoria con un nombre reservado para guardar información mientras la página este cargada. El primer paso para poder trabajar con variables es declararlas, que es lugar donde se les da su nombre y su ámbito.

Para dar nombre a una variable debemos tener en cuenta las siguientes normas:

1. No pueden contener espacios.

2. Distingue entre mayúsculas y minúsculas.

3. No pueden contener acentos, puntos o cualquier signo gramatical.

4. No pueden comenzar con un dígito ni contener la letra “ñ”.

5. Nombre único y exclusivo para cada variable salvo que estén es 2 funciones distintas.


El ámbito de una variable define si la variable se podrá utilizar en cualquier parte del documento (es global). O si solo se podrá utilizar dentro de una función determinada (es local). La declaración de las variables globales se realiza dentro de las etiquetas <script> pero fuera de cualquier función. La declaración de las variables locales se realiza dentro de la función que nos interese usar esa variable.

La sintaxis para declarar una variable es igual en ambos casos, la única diferencia es el lugar donde las declaramos. La siguiente línea nos muestra como hacerlo:

var nombre_variable[=valor];

El tipo de variable es asignado automáticamente por JavaScript. Depende del primer valor que se guarde en la variable. Por tanto los tipos de variable existentes son los que mostramos en la siguiente tabla:


TIPO VALORES
numérica Cualquier tipo numérico
boolean True o False.
String Texto o letra.

Otro aspecto importante, es la conversión de datos, que en JavaScript es automática. Transforma los datos de todas la variables en una expresión según el tipo de la primera variable. No es muy segura y puede acarrear muchos problemas.

EJEMPLO:

num1=”12”;
num2=10;

x=num1+num2; // daria como resultado 1210.
y=num2+num1; // daria como resultado 22.



Para evitar problemas en las conversiones, se pueden utilizar métodos ya implementados que realizan la conversión de una manera más segura.


TIPO DE CONVERSION SINTAXIS
De texto a numero entero. var_numerica=parseInt(var_texto);
De texto a coma flotante (decimal). var_numerica=parseFloat(var_texto);
De numérica a texto. Es automática sin peligro.

CONSTANTES (“literales”)

Los valores iniciales que se les asigna son invariables. Estos no son variables, sino expresiones constantes. Los tipos de literales son los mismos que en las variables, según el primer dato que almacenemos será de un tipo u otro.

TIPO VALORES
numérica Cualquier tipo numérico
boolean True o False.
String Texto o letra.

Normas de código en JavaScript

Las normas para poder escribir cualquier código de JavaScript se basan en 5 puntos básicos y que debemos cumplir siempre. Estas normas son las siguientes:

1. Todo el código (sentencias) esta dentro de funciones.

2. Las funciones se desarrollan entre las etiquetas <script> y </script>.

3. Las etiquetas <script> deben colocarse entre las etiquetas <head> y </head>.

4. Las etiquetas <title> no pueden estar colocadas entre las de <script>.

5. La llamada a la función se hace a través de un evento de un elemento del documento.

Empezando con JavaScript

JavaScript es un lenguaje interpretado en el cliente por el navegador al momento de cargarse la pagina, es multiplataforma, orientado a eventos con manejo de objetos, cuyo codigo se incluye directamente en el mismo documento HTML.
Hasta entonces ya se usaba HTML y JAVA, pero la aparición del JavaScript produjo una importante revolución, ya que dio al usuario la posibilidad de crear aplicaciones "on-line" osea modificar páginas web en tiempo real, sin usar CGI´s.


Caracteristicas
Es simple, no hace falta tener conocimientos de programación para poder hacer un programa en JavaScript.

Maneja objetos dentro de nuestra página Web y sobre ese objeto podemos definir diferentes eventos. Dichos objetos facilitan la programacion de paginas interactivas, a la vez que se evita la posibilidad de ejecutar comandos que puedan ser peligrosos para la maquina del usuario, tales como formateo de unidades, modificar archivos etc.

Es dinámico, responde a eventos en tiempo real. Eventos como presionar un botón, pasar el puntero del mouse sobre un determinado texto o el simple hecho de cargar la página o caducar un tiempo. Con esto podemos cambiar totalmente el aspecto de nuestra página al gusto del usuario, evitándonos tener en el servidor un página para cada gusto, hacer calculos en base a variables cuyo valor es determinado por el usuario, etc.

Diferencia con JAVA
La principal diferencia es que JAVA es un lenguaje compilado, mientras que JavaScript es interpretado.

JAVA al compilar crea programas independientes, llamados APPLETS que se invocan desde una pagina Web, mientras que el codigo de JavaScript va incluido en la pagina.

Esta orientado a objetos de forma limitada ya que no maneja los conceptos de clase ni herencia.

En JavaScript no es necesario declarar el tipo de variable, ni debe existir las referencias al objetos antes de ejecutarlo, por lo que se habla de una ligazon dinamica a diferencia de la ligazon estatica del JAVA.


Principales aplicaciones
Si bien hoy en día, JavaScript, es un lenguaje muy usado, sus principales aplicaciones son:

Responder a eventos locales dentro de la página, como apretar un botón,
La realización de cálculos en tiempo real.
La validación de formularios dentro de una página.
La personalización de la página por el usuario, que le permitirá tener una página web a su medida.
La inclusión de datos del propio sistema, como son la hora y la fecha.
Aunque según pasa el tiempo sus aplicaciones se van incrementando.

¡ Ahora JavaScript !

Originalmente denominado LiveScript, fue desarrollado por por Netscape Communications para crear aplicaciones de Internet en el cliente.
Mas o menos en la misma epoca, Sun Microsystems lanzó el lenguaje de programación JAVA (que originalmente fue llamado Oak), el que adquirio rapidamente popularida asi que por razones netamente comerciales se lecambia el nombre a JavaScript.

La version 1.0 apareció con la version 2.0 del navegador de la misma empresa y mas tarde es incorporado en el iExplorer 3.0 de MicroSoft. Poco tiempo después aparece tambien el VBScript (Visual Basic Script) de Microsoft, un muy buen competidor.


¿ Que es un script ?

Un script es una secuencia de ordenes, en un determinado lenguaje, que puede ser ejecutado por un cliente Web desde su navegador y visualizar el documento en que está contenido. Actuamente los dos lenguajes de script mas usados en paginas Web son JavaScript y VBScript. La inclusion de scripts en los documentos HTML hace que éstos sean más inteligentes. El contenido se genera en forma dinamica, mientras que los valores introducidos en los formularios pueden comprobar localmente, sin necesidad de contar con un servidor y emplear un cierto tiempo en ello. A pesar del nombre, JavaScript, este lenguaje tiene poco que ver con JAVA.

¿Por qué JavaScript ?

Actualmente los navegadores Web mas usados son Netscape Navigator e Internet Explorer, ambos soportan JavaScript, pero solo el Intenet Explorer soporta VBScript.