1.-tutorial de javascript

Que es javascript
Javascript es un lenguaje con muchas posibilidades, utilizado para crear pequeños programas que
luego son insertados en una página web y en programas más grandes, orientados a objetos mucho
más complejos. Con Javascript podemos crear diferentes efectos e interactuar con nuestros
usuarios.
Este lenguaje posee varias características, entre ellas podemos mencionar que es un lenguaje
basado en acciones que posee menos restricciones. Además, es un lenguaje que utiliza Windows y
sistemas X-Windows, gran parte de la programación en este lenguaje está centrada en describir
objetos, escribir funciones que respondan a movimientos del mouse, aperturas, utilización de
teclas, cargas de páginas entre otros.
Es necesario resaltar que hay dos tipos de JavaScript: por un lado está el que se ejecuta en el
cliente, este es el Javascript propiamente dicho, aunque técnicamente se denomina Navigator
JavaScript. Pero también existe un Javascript que se ejecuta en el servidor, es más reciente y se
denomina LiveWire Javascript.
Declaración de variables en javascript
En Javascript las variables se crean con la declaración var, atribuyéndole incluso ningún valor, o
simplemente en el acto de asignación de un valor (por ejemplo, x=15 crea automáticamente una
variable numérica). La declaración var en más variables se debe repetir para cada una, o bien debe
efectuarse con una interrupción de línea:
var micarácter,
mivariable;
Las variables que se declaran y se inicializan sin darles un particular valor reciben el valor null. Este
valor puede parecer poco importante, pero se vuelve esencial si se quiere verificar la subida en
memoria de una variable. Por ejemplo, si se declara una variable
var Verifica=null;
si se utiliza el comando
if(Verifica != null) alert("No he sido utilizada");
se puede verificar si esta variable ha tenido un uso o si está vacía. Un uso muy práctico es el de la
aplicación a las ventanas popup para comprobar si se han quedado abiertas.
Otro valor que se asigna a las variables cuando éstas se han declarado sin asignación es undefined.
Este valor se introdujo con Javascript 1.3 y está aceptado por las normas ECMA.
De este modo, la declaración:
var Verifica;
no asigna a la variable ningún valor, por lo cual una verificación de la misma restituye el valor
undefined, que se puede verificar (p.ej., if(Verifica == undefined)).
Operadores en javascript
Existen varios tipos de operadores en JavaScript:
1.Asignación: este tipo de operador se utiliza para asignar valores a las variables.
var resultado=50
Asigna a la variable "resultado" el valor 50.
Existen abreviaturas de algunas operaciones de asignación:
x+=y
x-=y
x*=y
x%=y
x/=y
x=x+y
x=x-y
x=x*y
x=x%y
x=x/y
2.Comparación: en JavaScript, se pueden comparar variables de distinto tipo, pues es capaz de forzar
conversiones:
== Devuelve true si son iguales. Fuerza conversiones de tipo.
!= Devuelve true si son distintos. Fuerza conversiones de tipo.
=== Devuelve true si son iguales y del mismo tipo.
!== Devuelve true si son distintos o de distinto tipo.
> Devuelve true si la variable de la izquierda es mayor que la variable de la derecha
< Devuelve true si la variable de la derecha es mayor que la variable de la izquierda
>= Devuelve true si la variable de la izquierda es mayor o igual que la variable de la derecha
<= Devuelve true si la variable de la izquierda es menor o igual que la variable de la derecha
3. Aritméticos: los operadores aritméticos, a partir de varios operandos, devuelven un solo valor; resultado de
la operación realizada con los anteriores operandos.
En JavaScript existe notación postfija y prefija, por lo que variable++ y ++variable son dos formas distintas de
incrementar una variable. En primer lugar, se procesa la variable, y luego se incrementa. Sin embargo, en el
segundo caso, primero se incrementa la variable y después se procesa.
% Binario: devuelve el resto de una división.
++ Unitario: incrementa el valor de la variable.
-- Unitario: disminuye el valor de una variable.
- Unitario: cambia el signo de una variable.
4.Lógicos: los operadores lógicos devuelven un valor binario.
&&
AND
||
OR
!
NOT
Es importante saber que si en una evaluación ya se conoce el resultado, no se pone valor a los demás
términos:
true || devuelve true.
false && devuelve false.
VENTANAS EMERGENTES
CLASES Y OBJETOS EN JAVASCRIPT
Dentro de los lenguajes actuales, que provienen en su mayoría de los primeros lenguajes
estructurados como ALGOL o BCPL, la capacidad de crear funciones para reutilizarlas de diversas
formas, ya sea dentro del mismo módulo del programa o en distintos módulos, ha sido uno de los
fundamentos de la programación de sistemas informáticos. Sin embargo, este paradigma se
quedaba corto para nuevas situaciones que iban surgiendo con el tiempo, como la programación
de videojuegos o el 3D y la inteligencia artificial. A finales de los años 70 se comenzó a teorizar
sobre lenguajes de programación que utilizasen entidades independientes que fueran
autocontenidas para realizar las aplicaciones. Como ya dijimos anteriormente, un programa se
compone de código y datos. los objetos son unidades que contienen su propio código y datos para
su propio auto-funcionamiento. Podemos decir que son programas dentro de programas.
Dicho así, podemos darnos cuenta de que los objetos pueden ser utilizadas en variables, para
nuestro propio uso. Pero no podemos definir variables de objeto sin poder darles una forma. La
forma de los objetos son los datos (propiedades) y código (funciones) que contiene el objeto. A
esto se le denomina clase de objeto. Para definir clases en JavaScript, lo hacemos por medio de
funciones, como esta:
function Persona(nombre) {
this.nombre = nombre;
this.color_pelo = 'negro';
this.peso = 75;
this.altura = 165;
this.sexo = 'varón';
}
Vamos a fijarnos bien como se estructura esta función. Se le llama constructor de la clase, y en ella
definimos los datos de la clase, los que vamos a poder utilizar al crear objetos con ella. Nótese el
uso de la palabra reservada this. Esta palabra sirve para identificar al objeto en si mismo dentro de
la definición de la clase. Cuando escribimos
this.peso = 75;
estamos creando la propiedad “peso” de la clase “Persona”. Cuando creamos una propiedad en el
constructor y le damos un valor, como en este caso, estamos asignándole un valor por defecto.
Todos los objetos creados con este constructor contendrán una propiedad “peso” con ese valor
inicial, aunque luego podremos cambiarlo al usar el objeto. Para definir un objeto de esta clase,
sólo tendríamos que hacer esto:
var hombre = new Persona('Pepe');
Aquí hemos definido el objeto “hombre”, que contendrá todas las propiedades definidas en la
función-clase “Persona”. Si queremos cambiar su valor, sólo tenemos que hacer algo como esto:
hombre.peso = 80;
De esta forma, el dato definido para este objeto cambia. Pero si hemos definido más objetos de
tipo Persona, cada uno de ellos contendrá las mismas propiedades pero con valores distintos.
Ningún objeto tiene el mismo valor que otro objeto de la misma clase a no ser que nosotros se lo
asignemos explícitamente.
var mujer = new Persona('Ana');
mujer.peso = 67;
En este caso hemos hecho lo mismo, pero le indicamos su propio peso, independiente del de la
variable “hombre”. Así, podemos tener tantos objetos de la misma clase como queramos para
realizar las operaciones que sean pertinentes. Una última cosa sobre los constructores: como
podemos ver, podemos pasarle parámetros, que podemos convertir en los valores de las
propiedades de los objetos de esa clase.
Declaración de función
A la hora de hacer un programa ligeramente grande existen determinados procesos que se pueden
concebir de forma independiente, y que son más sencillos de resolver que el problema entero.
Además, estos suelen ser realizados repetidas veces a lo largo de la ejecución del programa. Estos
procesos se pueden agrupar en una función, definida para que no tengamos que repetir una y otra
vez ese código en nuestros scripts, sino que simplemente llamamos a la función y ella se encarga
de
hacer
todo
lo
que
debe.
Así que podemos ver una función como una serie de instrucciones que englobamos dentro de un
mismo proceso. Este proceso se podrá luego ejecutar desde cualquier otro sitio con solo llamarlo.
Por ejemplo, en una página web puede haber una función para cambiar el color del fondo y desde
cualquier punto de la página podríamos llamarla para que nos cambie el color cuando lo
deseemos.
Las funciones se utilizan constantemente, no sólo las que escribes tu, sino también las que ya
están definidas en el sistema, pues todos los lenguajes de programación tienen un montón de
funciones para realizar procesos habituales como por ejemplo obtener la hora, imprimir un
mensaje en la pantalla o convertir variables de un tipo a otro. Ya hemos visto alguna función en
nuestros sencillos ejemplos anteriores cuando hacíamos un document.write() en realidad
estabamos llamando a la función write() asociada al documento de la página que escribe un texto
en la página. En los capítulos de funciones vamos primero a ver cómo realizar nuestras propias
funciones y cómo llamarlas luego. A lo largo del libro veremos muchas de las funciones definidas
en Javascript que debemos utilizar para realizar distintos tipos de acciones habituales.
CÓMO
SE
ESCRIBE
UNA
FUNCIÓN
Una función se debe definir con una sintaxis especial que vamos a conocer a continuación.
function
instrucciones
...
}
nombrefuncion
de
(){
función
la
Primero se escribe la palabra function, reservada para este uso. Seguidamente se escribe el
nombre de la función, que como los nombres de variables puede tener números, letras y algún
carácter adicional como en guión bajo. A continuación se colocan entre llaves las distintas
instrucciones de la función. Las llaves en el caso de las funciones no son opcionales, además es útil
colocarlas siempre como se ve en el ejemplo, para que se vea fácilmente la estructura de
instrucciones
que
engloba
la
función.
Veamos un ejemplo de función para escribir en la página un mensaje de bienvenida dentro de
etiquetas
<H1>
para
que
quede
más
resaltado.
function
document.write("<H1>Hola
}
escribirBienvenida(){
todos</H1>")
a
Simplemente escribe en la página un texto, es una función tan sencilla que el ejemplo no expresa
suficientemente el concepto de función, pero ya veremos otras más complejas. Las etiquetas H1
no se escriben en la página, sino que son interpretadas como el significado de la misma, en este
caso que escribimos un encabezado de nivel 1. Como estamos escribiendo en una página web, al
poner
etiquetas
HTML
se
interpretan
como
lo
que
son.
Cómo
llamar
a
una
función
Cuando se llaman a las funciones Para ejecutar una función la tenemos que llamar en cualquier
parte de la página, con eso conseguiremos que se ejecuten todas las instrucciones que tiene la
función entre las dos llaves. Para ejecutar la función utilizamos su nombre seguido de los
paréntesis.
NombreDeLaFuncion()
DECLARACIÓN Y USO DE ARREGLOS
Los arrays de índice numérico son los más usuales en cualquier lenguaje de programación. En
Javascript tienen un funcionamiento muy práctico con varios métodos incluidos en el objeto array,
que permiten una manipulación sencilla.
Básicamente sólo es necesario declarar una variable como array y ya podemos empezar a usarla
para guardar o extraer información de ella.
PLAIN TEXT
JAVASCRIPT:
var array_test = [];
array_test.push('uno');
array_test.push('dos');
array_test[array_test.length] = 'tres';
for(i=0;i<(array_test.length);i++)
{
alert(array_test[i]);
}
Qué tenemos aquí? Primero, una declaración. Debemos crear una variable y asignarle el tipo
array. Para ello la igualamos a un par de corchetes [] y Javascript entenderá que es un array. Esta
declaración es válida, pero en otros sitios encontraréis la declaración típica de libro:
PLAIN TEXT
JAVASCRIPT:
var array_test = new Array();
Lo siguiente es añadir elementos en el array. He insertado tres elementos usando dos formas
distintas. Las dos primeras usan el método push() que sencillamente inserta el elemento que
pongamos dentro del paréntesis al final del array. El tercer elemento usa otra forma igualmente
válida pero sin usar el método push(): entre los corchetes deberíamos introducir el índice del
nuevo elemento y lo igualamos con el nuevo valor. El método length() devuelve el recuento de
elementos dentro del array, que en ese caso sería 2. Si tenemos en cuenta que los arrays
empiezan por cero, hacerlo de esta forma es decirle que en la posición 2 (que realmente es la
tercera: 0, 1 y 2) le asigne el valor "tres".
Seguidamente hemos hecho un bucle que recorra todos los elementos (desde el cero hasta la
longitud del array) y que por cada elemento muestre un cuádro de diálogo con el contenido de esa
iteración.
Bueno, el trabajo con este tipo de arrays es el normal y no es mi intención explicar todos sus
métodos y características. Podéis encontrar toda la información respecto a los métodos del objeto
array en la Javascript Array Object Reference.
Arrays Asociativos
Aquí empieza la diversión. Intentando usar los arrays asociativos en javascript de una forma
parecida a los arrays de índice numérico me encontré en que ciertos métodos importantes no
funcionaban... Por ejemplo el método length() me devolvía siempre cero... ¿¿¿??? Luego me di
cuenta de ciertos fallos, gracias a un post bastante interesante: Real Programming with Javascript Associative Arrays. Vamos a poner un ejemplo de cómo no va a funcionar:
PLAIN TEXT
JAVASCRIPT:
var array_test = [];
array_test['primero'] = 'uno';
array_test['segundo'] = 'dos';
array_test['tercero'] = 'tres';
alert('Número de elementos: '+array_test.length);
for(var clave in array_test)
{
alert(clave+'
}
:
'+array_test[clave]);
Primero de todo, ésto no da ningún fallo en la consola javascript del Firefox (si, mucho mejor el
Firefox que el Internet Explorer para debugar Javascript), con lo doy por supuesto que es todo
correcto... pero no es así! El chivato que me muestra la longitud del array me devuelve cero!
Primera prueba de que algo no va bién... Y luego, el bucle... me da una cantidad de elementos que
yo no he definido (y bastante raros, como las declaraciones y contenido de los métodos ¿? )! Y éso
porqué?
Resulta que por otras razones que no vienen al caso, un objeto array de índice numérico incluye
los métodos como si fueran iteraciones asociativas. Vale pero, no estamos trabajando con un array
asociativo? Pues la respuesta es no. Si nos fijamos en la declaración de la variable array_test
vemos que la hemos declarado como un array normal, es decir, como un array de índice numérico.
Deberíamos reescribir esta porción de código de la siguiente manera:
PLAIN TEXT
JAVASCRIPT:
var array_test = new Object();
array_test['primero'] = 'uno';
array_test['segundo'] = 'dos';
array_test['tercero'] = 'tres';var contador = 0;
for(var i in array_test)
{
contador++;
}
alert('Número de elementos: '+contador);
for(var clave in array_test)
{
alert(clave+'
}
:
'+array_test[clave]);
Qué diferencias podemos ver? Primero de todo, la declaración del array... porque ya no es un
array! ahora es un Object. La otra diferencia es que dado que el método length(), al no funcionar,
tenemos que "emularlo" creando un bucle que cuente las iteraciones. No sé si habrá una forma
más óptima de hacerlo, pero así funciona... Y el bucle, ahora sí, nos muestra sólo los elementos
que hemos añadido.
EVENTOS DE JAVASCRIPT
onAbort (NS3, NS4, IE4, IE5) se genera cuando el visitante detiene el navegador antes de que se
cargue completamente una imagen (por ejemplo, cuando el usuario hace clic en el botón Detener
del
navegador
mientras
se
está
cargando
una
imagen).
onAfterUpdate (IE4, IE5) se genera cuando un elemento de datos vinculados de la página
termina
de
actualizar
el
origen
de
los
datos.
onBeforeUpdate (IE4, IE5) se genera cuando un elemento de datos vinculados de la página
ha cambiado y va a perder foco (y, por consiguiente, va a actualizar el origen de los datos).
onBlur (NS3, NS4, IE3, IE4, IE5) es lo contrario a onFocus. El evento onBlur se genera cuando
el elemento especificado deja de ser el foco de interacción del visitante. Por ejemplo, cuando un
visitante hace clic fuera de un campo de texto después de haber hecho clic en él, el navegador
genera
un
evento
onBlur
para
el
campo
de
texto.
onBounce (IE4, IE5) se genera cuando el contenido de un elemento de marquesina ha alcanzado
el
límite
de
la
marquesina.
onChange (NS3, NS4, IE3, IE4, IE5) se genera cuando el visitante cambia un valor de la página,
como, por ejemplo, cuando el visitante elige un elemento de un menú o cambia el valor de un
campo de texto y, seguidamente, hace clic en algún otro lugar de la página.
onClick (NS3, NS4, IE3, IE4, IE5) se genera cuando el visitante hace clic en el elemento
especificado, como, por ejemplo, un vínculo, un botón o un mapa de imagen. (El clic no termina
hasta que el visitante suelta el botón del ratón; puede usar onMouseDown para que se produzca
una
acción
en
el
momento
en
que
se
presiona
el
botón.)
onDblClick (NS4, IE4, IE5) se genera cuando el visitante hace doble clic en el elemento
especificado. (Hacer doble clic consiste en presionar y soltar rápidamente el botón del ratón
mientras
se
señala
al
elemento.)
onError (NS3, NS4, IE4, IE5) se genera cuando se produce un error en el navegador al cargar
una
página
o
una
imagen.
onFinish (IE4, IE5) se genera cuando el contenido de un elemento de marquesina completa un
bucle.
onFocus (NS3, NS4, IE3, IE4, IE5) se genera cuando el elemento especificado se convierte en el
foco de interacción del visitante. Por ejemplo, al hacer clic en un campo de texto de un formulario,
se
genera
un
evento
onFocus.
onHelp (IE4, IE5) se genera cuando el visitante hace clic en el botón de Ayuda o elige Ayuda del
menú
de
un
navegador.
onKeyDown (NS4, IE4, IE5) se genera en el momento en que el visitante presiona cualquier tecla.
(No es preciso que el visitante suelte la tecla para que se genere este evento.) El navegador no
puede
detectar
qué
tecla
se
ha
presionado.
onKeyPress (NS4, IE4, IE5) se genera cuando el visitante presiona y suelta cualquier tecla; este
evento es una combinación de los eventos onKeyDown y onKeyUp. El navegador no puede
detectar
qué
tecla
se
ha
presionado.
onKeyUp (NS4, IE4, IE5) se genera cuando el visitante suelta una tecla después de presionarla. El
navegador
no
puede
detectar
qué
tecla
se
ha
presionado.
onLoad (NS3, NS4, IE3, IE4, IE5) se genera cuando termina de cargarse una imagen o una página.
onMouseDown (NS4, IE4, IE5) se genera cuando el visitante presiona el botón del ratón.
(No es necesario que el usuario suelte el botón del ratón para que se genere este evento.)
onMouseMove (IE3, IE4, IE5) se genera cuando el visitante mueve el ratón mientras señala al
elemento especificado. (Es decir, el puntero permanece dentro de los límites del elemento.)
onMouseOut (NS3, NS4, IE4, IE5) se genera cuando el puntero abandona el elemento
especificado.
(Normalmente, el elemento especificado es una imagen, o un vínculo adjuntado a una imagen.)
Este evento se usa a menudo junto con el comportamiento Restaurar imagen intercambiada para
devolver una imagen a su estado original cuando el visitante deja de señalarla con el puntero del
ratón.
onMouseOver (NS3, NS4, IE3, IE4, IE5) se genera cuando el ratón se mueve por primera vez para
señalar el elemento epecificado (es decir, cuando el puntero pasa de no estar señalando a estar
señalando el elemento). El elemento especificado para este evento es generalmente un vínculo.
onMouseUp (NS4, IE4, IE5) se genera cuando se suelta un botón del ratón que se encuentra
presionado.
onMove (NS4) se genera cuando se mueve una ventana o un marco.
onReadyStateChange (IE4, IE5) se genera cuando cambia el estado del elemento especificado.
Entre los estados posibles del elemento figuran uninitialized (sin inicializar), loading (cargando) y
complete
(terminado).
onReset (NS3, NS4, IE3, IE4, IE5) se genera cuando se restauran los valores predeterminados
de
un
formulario.
onResize (NS4, IE4, IE5) se genera cuando el visitante cambia el tamaño de la ventana del
navegador
o
de
un
marco.
onRowEnter (IE4, IE5) se genera cuando ha cambiado el puntero de registro actual del origen
de
datos
vinculados.
onRowExit (IE4, IE5) se genera cuando va a cambiar el puntero de registro actual del origen
de
datos
vinculados.
onScroll (IE4, IE5) se genera cuando el visitante desplaza la página hacia arriba o hacia abajo.
onSelect (NS3, NS4, IE3, IE4, IE5) se genera cuando el usuario selecciona texto en un campo de
texto.
onStart (IE4, IE5) se genera cuando el contenido de un elemento de marquesina inicia un bucle.
onSubmit (NS3, NS4, IE3, IE4, IE5) se genera cuando el visitante envía un formulario.
onUnload (NS3, NS4, IE3, IE4, IE5) se genera cuando el visitante abandona la página
4.5validación de entrada de datos del lado del servidor
CONSIDERACIONES DE SOPORTE DEL NAVEGADOR
Al diseñar la información que será enviada a un "Navegador" se deben contemplar diversos
aspectos, entre los principales se encuentran :

No todo navegador es capaz de ejecutar o desplegar cierto tipo de comandos que son
considerados propietarios, esto es , "Internet Explorer" ha desarrollado ciertos elementos
únicamente ejecutables dentro de este Navegador al igual que "Netscape Navigator",
asegúrese de apegarse a un estándar común.

Aunque utilice estándares HTML y JavaScript el usuario final tiene la última palabra sobre
la ejecución y despliegue de información.

No todos los usuarios tienen las últimas versiones de Navegadores y Plug-ins instaladas en
sus equipos, asegúrese de utilizar un mínimo común denominador en base al tipo de
visitantes que espera.
4.6