DEPARTAMENTO DE INFORMATICA
CATEDRA: LENGUAJE COMERCIAL
Java Script
Alumna: Patiño Jhoanna
CI: 15219160
03A
Sintaxis del Java Script
.
VLINK="#0000FF" ALINK="#0000FF" onLoad=multiplica()>
Esto es un ejemplo
Eventos que se activan con botones del ratón
Sintaxis basica
Es muy similar a la de C. Las instrucciones terminan con un punto y coma (;), se pueden agrupar usando llaves ({}), un doble-slash (//) indica que el resto de la línea es un comentario.
Los operadores matemáticos se mantienen: (suma +,resta -, multiplicación *,división /, módulo %). Además existen el autoincremento y autodecremento ( ++ y -- ).
Se pueden concatenar strings de manera muy simple usando el operador de suma (+).
Ejemplos:
var t1; var t2;
var resultado;
t1 = 2; t2 = 10;
document.write( "t1 = " + t1 + ", t2 = " + t2 );
resultado = t1 + t2;
document.write( "Los numero suman " + resultado );
Las asignaciones de variables se realizan usando el signo igual (=). Adicionalmente existen ( -=, +=, +=, /=, %= ), que funcionan igual que C.
Los operadores lógicos ( or
, and &&, not !, xor ^, shiftleft <<, shiftright >>, siftright w/0 >>> ) también están implementados, junto con las comparaciones ( <, >, ==, !=, <=, >= ).
Variables
La declaración de variable se debe hacer, si se hace fuera de una función es una variable global, sino es local. Se declara una variable sin indicar explícitamente su tipo, sino usando la instrucción:
var Nombre;
En que es el nombre de la variable. Más adelante en el programa el mismo intérprete le asigna el tipo apropiado. Esto para seguir la filosofía de diseño de JavaScript que indica que se realizarán programas pequeños, y que la idea es lograr que el programador realice los scripts de la manera más rápida posible.
Se pueden declarar arreglos:
var arreglo = new Array();
arreglo[0] = 2;
arreglo[1] = "Elemento 1";
arreglo[2] = "Elemento 2";
Claro que no está completamente implementada la forma de definir el número de elementos. Como manera general se puede guardar la longitud del arreglo en el elemento cero.
Se pueden crear objetos con varias propiedades ( al estilo de las struct de C) . También aquí esta subycente la filosofía de que los tipos de datos de cada propiedad de la estructura se iran viendo en el camino.
var Autor = new Object();
Autor.nombre = "Carlos Castillo";
Autor.apodo = "ChaTo";
Autor.edad = 19;
Finalmente, y para deleite de los programadores Perl, también se pueden crear arreglos asociativos, usando este mismo tipo de constructor:
var TablaColor = new Object();
TablaColor["rojo"] = "FF0000";
TablaColor["azul"] = "0000FF";
TablaColor["verde"] = "00FF00";
Control lógico
Existen las instrucciones: if ... else, for, while ... break ... continue, with, function ... return, que funcionan de manera id,ntica a C, y la instruccion for ... in.
Ejemplos:
// Suponiendo que la variable myvar existe, y que hay un formulario
// llamado "myform" que tiene un input de tipo text llamado "texto1"
if ( myvar == 0 ) {
document.myform.texto1.value = 'Error';
} else {
document.myform.submit();
}
// Aqui habra un error si el formulario "myform" tiene menos de
// 31 elementos; los elementos en JavaScript se enumeran
// comenzando por el elemento cero.
for ( myvar = 0; myvar <= 30; myvar++ ) {
document.myform.elements[myvar].value = '';
}
// Un ciclo while tipico que no hace nada excepto hacer position = 30
var position;
position = 0;
while ( position < 30 ) position++;
// Una vez especificado with, el resto de las variables utilizadas
// comienzan con el argumento de with
// se asume que existen dos formularios en el documento, el segundo
// formulario puede no tener nombre, por lo que se referencia por
// su numero dentro del arreglo especial 'form'
with ( document.form[1] ) {
nombre.value = "Ingrese aqui su nombre";
edad.value = "Puede dejarme en blanco si lo desea";
}
// for ... in ejecuta una accion con cada elemento de un arreglo
for contador in Arreglo {
write( Arreglo[contador] );
}
Palabras reservadas
Además de las nombradas antes, existe la instrucción alert que es muy útil al momento de programr y depurar código JavaScript. Su uso es muy simple:
alert( "mensaje" );
Otras palabras reservadas son: abstract boolean byte case catch char class const default do double extends false final finally float goto implements import instanceof int interface long native null package private protected public short static super switch synchronized throw throws transient try void , aunque muchas de ellas están implementadas sólo en Java.
Funciones
Para declarar una función se usa la instrucción function.
function NombreFuncion (parametro1, parametro2, ..., parametro N ) {
...
return valor;
}
No existe un cuerpo principal del programa (main), puesto que todo lo que no esté dentro de una función es ejecutado mientras se va cargando la página, conforme va apareciendo. Cuando se declara una función, tampoco es necesario indicar que tipo de valor retornara ella, si es que retorna alguno. Sí importa el orden en que se declaren las funciones, i.e. una función debe ser declarada antes de usarse.
Eventos que se activan con botones del ratón
En este grupo se pueden incluir los siguientes eventos:
1. onClick: activado cuando se hace clic en un objeto;
2. onDblClick: activado con un doble clic;
3. onMouseDown: activado al pulsar el botón izquierdo del ratón;
4. onMouseUp: activado cuando deja de pulsarse el botón izquierdo del ratón;
5. onContextMenu: activado cuando se pulsa el botón derecho del ratón al abrir el ContextMenu.
Los eventos onMouseDown y onMouseUp se activan con dos movimientos del botón derecho del ratón: el primero cuando se pulsa el botón y el segundo cuando se deja de pulsar tras el clic.
El doble clic es un evento que engloba los otros y, para mayor precisión, activa en sucesión onmousedown, onmouseup, onclick.
Ejemplo
Versións y compatibilidad
El uso de estos eventos está limitado por diversos factores. Antes de nada, hay que considerar la versión de Javascript de la que forman parte y, en consecuencia, que no son válidos para todos los navegadores. He aquí el cuadro de la situación (un color diverso del asterisco indica las modificaciones respecto a la versión precedente; NN está por Netscape e IE por Internet Explorer):
Evento Versión Javascript NN2.0 NN3.0 NN4.0 NN4.06 IE3.0 IE4.0 IE5.0
onClick 1.0 * * * * * * *
onDblClick 1.2 * * * *
onMouseDown 1.2 * * * *
onMouseUp 1.2 * * * *
onContextMenu DHTML *
Atención: el evento onDblClick no funciona en Mac.
Valor true y false
El evento onClick con JavaScript 1.1 ha añadido la posibilidad de recibir un valor true o false mediante el cual puede ser activado o no. Esta posibilidad vale también para los eventos onMouseDown y onMouseUp y para onContextMenu.
Ejemplo: haz clic aquí, si respondéis OK, el enlace se activa, si respondéis Anula, el enlace no se activa... He aquí el código:
.
La ventaja es que el evento onClick se activa antes de la marca asociada por lo que si es un enlace, éste se carga tras el cumplimiento de la instrucción asociada. Así, esta característica se puede aplicar para no seleccionar las checkbox y para los botones, incluidos Submit y Reset, para considerarlos no pulsados, salvo por un pequeño bug que hace que la opción no funcione para el Reset en algunas plataformas.
Interesante es el efecto onContextMenu, también porque a menudo se solicita que se desactive el botón derecho del ratón, pero funciona sólo con Internet Explorer 5.0.
Marcas sensibles
Otro límite es el impuesto a Netscape y las viejas versiones de Explorer por las marcas a las que el evento puede ser asociado:
Evento Marca asociados en Netscape y JScript
onClick Este gestor se usa con los botones de envío (submit), botones de reset (reset), casillas de control (checkbox y radeo), botones, marcas de tipo OPTION y marca
onDblClick Usado con las marcas y
onMouseDown Usado con los botones y las marcas y
onMouseUp Usado con los botones y las marcas y
onContextMenu Ninguno porque funciona sólo en Explorer 5.0
Mucho más numerosas son las marcas asociadas en Explorer 4.0 y sucesivos a todos los tipos de eventos:
A, ADDRESS, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radeo, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP
La gestión de eventos
La importacia de la gestión de eventos.
El interés de los scripts JavaScript reside en gestionar localmente los eventos detectados. Los eventos son el resultado de una acción del usuario. Por ejemplo, hacer clic sobre un botón o seleccionar un campo de un formulario son eventos.
La importancia de los eventos radica en que nos posibilita modificar el contenido de un documento HTML sin intercambio de datos a través de la red. Esto se hacía hasta ahora mediante la programación CGI.
¿Cómo se gestionan los eventos?
La gestión de eventos se efectúa mediante scripts ejecutados automáticamente cuando se produce un evento dado. Esta gestión se indica en ciertas marcas y se especifica la acción asociada a cada evento. La sintaxis es la siguiente:
donde TAG representa una marca HTML y eventHandler el nombre del evento detectado.
Así, en el siguiente ejemplo se ejecutará la función evaluar cuando el usuario haga clic sobre el botón calcular.
La estructura this.form se refiere al formulario que contiene el botón. Esta estructura representa la variable pasada como argumento a la función evalua.
Clasificación de eventos.
Los eventos que vemos a continuación se encuentran en la versión 1.1 de JavaScript.
onAbort
Se origina cuando se cancela la carga de una imagen.
onBlur
Se produce al deseleccionar un campo de edición. Se aplica a la marca INPUT TYPE="text" y a la marca TEXTAREA. En la versión 1.2 de JavaScript también se aplica a la marca LAYER.
onClick
Se produce cuando se hace clic en un elemento del formulario o un enlace hipertexto. Se aplica tanto a la marca INPUT TYPE="button,checkbox,radio" como a la marca .
onChage
Se origina al cambiar en contenido de un campo o selección. Se aplica a las marcas INPUT TYPE="text", SELECT y TEXTAREA.
onError
Se produce cuando se obtiene un error al cargar el documento HTML. Se aplica sobre las marcas BODY y FRAMESET.
onFocus
Se produce cuando se Activa un campo de edición. Se aplica a la marca INPUT TYPE="text" y a la marca TEXTAREA. En la versión 1.2 también se aplica a la marca LAYER.
onLoad
Se origina cuando se carga el documento HTML. Se aplica a las marcas BODY y FRAMESET. En la versión 1.2 también se aplica a marca LAYER.
onMouseOut
Se produce cuando alejamos el mouse de un enlace de hipertexto. Se aplica sobre las marcas A AREA. En JavaScript 1.2 también se aplica a la marca LAYER.
onMouseOver
Se produce cuando desplaza el mouse sobre los enlaces de hipertexto. Se aplica sobre la marca A y AREA. En la versión 1.2 de JavaScript también se aplica a la marca LAYER.
onReset
Se produce cuando se resetea el formulario. Se aplica sobre la marca FORM.
onSelect
Se produce al seleccionar un campo de edición. Se aplica sobre las marcas INPUT TYPE="text" y TEXTAREA.
onSumit
Se origina al enviar el formulario.Se aplica sobre al marca FORM.
onUnload
Se origina al abandonar el documento HTML. Se aplica sobre las marcas BODY y FRAMESET. En la versión 1.2 de JavaScript también se aplica a la marca LAYER.
Para la versión 1.2 de JavaScript se ha definido nuevos enventos que veremos en la siguiente lista.
onDblClick
Se produce cuando se hace doble clic en un formulario o enlace hipertexto. Se aplica tanto a la marca INPUT TYPE="button,checkbox,radio" como a la marca .
onDragDrop
Se produce cuando se vuelca (drop) un objeto sobre la ventana del navegador.
onKeyDown
Se produce cuando se pulsa una tecla.
onKeyPress
Se produce cuando se tiene una tecla pulsada.
onMouseDown
Se origina al pulsar algún botón del mouse.
OnMouseMove
Se origina al mover el cursor.
onMove
Se produce cuando se mueve una ventana o frame.
onResize
Se produce al cambiar el tamaño de una ventana o frame.
En este tutorial sólo se utilizarán los eventos de la versión 1.1 para que dichos ejemplos funcionen tanto para los usuarios de Microsoft Internet Explorer (versión 4.0 o superior) y para los usuarios de Netscape Navigator (versión 3.0 o superior).
Ejemplo de gestión de eventos.
El ejemplo siguiente ilustra diferentes eventos mostrando a cada evento detectado un mensaje informativo al usuario:
onUnload="Muestra('Adios','onUnload');">
Gestión de Eventos
onClick="Muestra('Click sobre un link','onClick');"
onMouseOver="Muestra('Colocado sobre el link','onMouseOver');"
onMouseOut="Muestra('Te alejas del link','onMouseOut');">
Esto es un link
Esto es otro link
onSumit="Muestra('Envía le formulario','onSumit');"
onReset="Muestra('Restaura valores del formulario','onReset');">
| Pulse sobre este botón | onClick="Muestra('Has pulsado','onClick');"> | Campo de edición | onFocus="Muestra('Escriba','onFocus');" onBlur="Muestra('Has escrito','onBlur');" onChange="Muestra('Has escrito','onChange');"> |
| Selecciones | |||
