Guia Curso Javascript

Curso JavaScript : Gua de clase
Gua de Clase para el curso JavaScript
Temario:
Introduccin Caractersticas del lenguaje Primeros ejemplos Estructura bsica de los scripts Elementos bsicos del lenguaje: Comentarios , literales, variables, vectores Operadores Estructuras de control Funciones Objetos Objetos predefinidos del lenguaje Manejadores de eventos Jerarqua de objetos del navegador DOM Acceso a los elementos del documento Direcciones de inters
o o o o o o o o o o o o o o
1/44
Introduccin
Javascript es un lenguaje de macro que se incluye en los documentos HTML para potenciar su funcionamiento, dotndole de la capacidad de realizar acciones e interactuar con el usuario del documento HTML. Hasta ahora con HTML solo podamos mostrar texto esttico, sin movimiento ni interaccin con el usuario, este lenguaje solo nos sirve para mostrar informacin. Ante la necesidad de dotar a los documentos HTML de capacidad para interactuar con el usuario, y de modificar el contenido del documento una vez finalizada su lectura naci el lenguaje de macro Javascript. Con Javascript tendremos la capacidad para interactuar con el usuario (controlar que acciones realizar cuando se realiza un clic sobre un elemento del documento, cuando pulsamos una tecla, etc) y realizar acciones ante ciertos eventos (mostrar un mensaje en pantalla tras pulsar un botn, realizar clculos, modificar el documento HTML). Javascript no es un lenguaje de programacin propiamente dicho, tiene muchas limitaciones, con lo cual no podremos llegar a realizar aplicaciones completas.
Caractersticas del lenguaje

Javascript no es java
Solo tiene una sintaxis parecida, pero java si es un lenguaje de programacin completo, y genera aplicaciones, mientras que Javascript solo son porciones de cdigo repartidos en el documento HTML , interpretadas en el navegador del cliente. Javascript posee ciertas limitaciones como el acceso a ficheros. Imaginaros que cualquier persona pueda escribir un cdigo en su documento HTML que accediera a nuestros archivos y los modificara nada mas por visualizar su web, borrndonos todos nuestros archivos. Es un lenguaje de macro orientado al documento. Dentro de un documento HTML, y de una forma definida, podremos escribir porciones de cdigo Javascript que afectan al funcionamiento del documento HTML. El documento HTML es el portador del cdigo Javascript. Es un lenguaje interpretado por el navegador. Conforme se lee cada lnea de cdigo de nuestros scripts, estas van siendo interpretadas por el navegador, al contrario de otros lenguajes como por ejemplo C++, o Java, los cuales necesitan una compilacin previa para generar un ejecutable. Posee diversas implementaciones. Esto quizs es lo ms tedioso de este til lenguaje. Dado que existen 2 compaas importantes desarrolladoras de navegadores de Internet (Microsoft con su Internet Explorer (Jscript) y Netscape (Javascript)) cada uno ha realizado su propia implementacin del lenguaje, parecidas, pero incompatibles en muchos aspectos. Un script diseado para Internet Explorer puede no funcionar para Netscape o viceversa. Posee diversas versiones. El lenguaje evoluciona aportando caractersticas mas avanzadas apareciendo nuevas versiones del lenguaje (Javascript 1.0, Javascript 1.1, Javascript 1.2, etc..), con lo cual, un cdigo para las nuevas versiones puede no funcionar en navegadores que soporten una versin de Javascript antigua. 2/44
Versiones e implementaciones del lenguaje: (Versiones de Netscape) Versin Navegador Javascript 1.0 Netscape 2.0 Javascript 1.1 Netscape 3.0 Javascript 1.2 Netscape 4.0 4.05 Javascript 1.3 Netscape 4.06 4.71 (Versiones de Internet Explorer) Versin Navegador Jscript 1.0 Explorer 3 Jscript 3.0 Explorer 4 Jscript 5.0 Explorer 5
Primeros ejemplos
Este ejemplo es un cdigo html en el cual, parte de su contenido es escrito por un script.
<HTML> <HEAD> </HEAD> <BODY> mi primer ejemplo en javascript<br> <SCRIPT LANGUAGE="JavaScript"> <! document.write("Este texto lo estoy escribiendo desde javascript<br>"); //--> </SCRIPT> </BODY> </HTML>
En este ejemplo controlamos el evento de pulsacin de un botn para mostrar una ventana de texto con el mensaje hola mundo.
<HTML> <HEAD> </HEAD> <BODY> <INPUT TYPE="button" name=baton value=pulsate onclick="alert('hola mundo');"> </BODY> </HTML>
Este ultimo ejemplo define una funcin cuya funcionalidad es mostrar el mensaje hola mundo en una ventana. Esta funcin es llamada desde el evento onclick del botn.
<HTML> <HEAD> </HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-function holamundo() { alert("hola mundo"); } //--> </SCRIPT> <BODY> <INPUT TYPE="button" name=baton value=pulsate onclick="holamundo();"> <br> </BODY> </HTML>
3/44
En los ejemplos anteriores hemos utilizado 2 funciones predefinidas del lenguaje JavaScript que utilizaremos repetidas veces en los sucesivos ejemplos del curso:
document.write( texto )
Esta funcin escribe el texto pasado por parmetro en el cuerpo del documento. Es como escribir directamente texto html.
Alert(texto)
Muestra una ventana con el texto pasado por parmetro.
Adems utilizamos lo que llamamos manejador de eventos de un elemento HTML. Un manejador de eventos se encarga de asignar una serie de acciones a un evento tal como pulsacin de botones, pulsacin de teclas, errores de carga del documento, etc... En este caso hemos utilizado el manejador onclick el cual atiende a las pulsaciones de ratn sobre el elemento en el cual esta definido este manejador.
<INPUT TYPE="button" name=baton value=pulsate onclick="holamundo();">
4/44
Estructura bsica de los Scripts

Como, cuando y donde podemos escribir cdigo javascript ?
Podemos escribir cdigo Javascript a lo largo de todo el documento Javascript. Es aconsejable escribir los scripts de definicin de variables y funciones en la parte del HEAD y las instrucciones de llamadas a estas dentro de BODY para hacer un cdigo mas ordenado, aunque no hay una regla fija.
En lo referente a como escribir ese cdigo, tenemos 3 opciones:
En un bloque de instrucciones Javascript (podemos ubicarlo donde queramos) <SCRIPT LANGUAGE="JavaScript"> <!-sentencia1; sentencia2; ... sentencian; //--> </SCRIPT> Ejemplo:
<HTML> <HEAD> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-document.write("esta es una lnea escrita<br> "); document.write("esta es otra lnea escrita<br> "); //--> </SCRIPT> </BODY> </HTML>
En un manejador de eventos como veremos en su correspondiente tema. Estos manejadores de eventos residen en el interior de las etiquetas HTML como su fuese uno de sus atributos. Onclick= sentencia1;sentencia2; .... sentenciaN; Ejemplo:
<HTML> <HEAD> </HEAD> <BODY> <INPUT TYPE="button" name=baton value=pulsate onclick="alert('hola mundo');"> </BODY> </HTML>
5/44
Importando un fichero externo con extensin *.js. El cdigo Javascript estar escrito en el documento JS referenciado. <SCRIPT LANGUAGE="JavaScript" SRC="mi.js"> </SCRIPT> Ejemplo:
<HTML> <HEAD> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript" SRC="mi.js"> </SCRIPT> </BODY> </HTML>
document.write("Este texto lo estoy escribiendo desde javascript en un fichero que se llama mi.js <br>");
Elementos bsicos del lenguaje.

-
Comentarios: Todo lenguaje de programacin necesita de los comentarios, los cuales son notas informativas para el programador que no realizan ninguna accin. Podemos comentar una sola lnea por medio de las barras // o un grupo de lineas agrupadas por /* y */
// comentario de una lnea /* Comentario de varias lineas */
Literales: Son los valores que utilizamos para trabajar con el lenguaje como son los nmeros,
texto, etc.. o Cadenas de caracteres
Soy una cadena de caracteres con comillas dobles Soy una cadena de caracteres con comillas simples
Caracteres especiales dentro de las cadenas de texto

\n \t \ Salto de lnea Tabulador Comilla simple \ \\ Comilla doble Barra inclinada
nmeros
3434 1.25
Booleanos
true false
Vectores
Vacaciones=[ Navidad , Semana santa , Verano ]; Alert(Vacaciones[0]); Alert(Vacaciones);
Objetos
Miobjeto= { propiedad1:valor1 ; propiedad2 : valor2 }; Alert( miobjeto.propiedad1);
6/44
Variables : Todo lenguaje de programacin necesita estos elementos para almacenar los literales del lenguaje y trabajar con ellos.
Una variable se representa por un texto, sin espacios, que comience por una letra o un subrayado. Utilizamos ese nombre para referenciar a un valor y utilizarlo posteriormente. Las variables en Javascript son sensitivas a las maysculas y no requieren de una declaracin de tipos. Una variable puede contener cualquier tipo de literal. Ejemplo: // Asignacin de un valor a una variable mivariable= Este es el valor que contiene esta variable; document.write(mivariable); Podemos declarar la variable anteponiendo la palabra reservada var , aunque no es necesario, dado que simplemente al asignar el valor la primera vez es declarada automticamente. var mivariable; mivariable=Este es el valor que contiene esta variable;
Para conocer el tipo de datos que contiene una variable utilizamos la funcin typeof( variable ). Ejemplo:
document.write( typeof( mivar)); mbito de las variables.
Una variable definida fuera de las funciones se le denomina GLOBAL (accesible desde cualquier lugar, incluso dentro de las funciones) , mientras que una variable definida dentro de una funcin se denomina LOCAL (solo es accesible dentro de las funciones, no se puede acceder a ellas desde cualquier punto del cdigo)
var x=3; y=2; Function prueba() { var z; var y; // Global // Global
// Local // Local (Ya que la estamos definiendo dentro de la funcin, //impidiendo acceder a la y global)
x=1; // Global y=2; // Local, al estar redefinida internamente z=3; // Local }
Referencias. Una variable puede referenciar a objetos y funciones:

funcin f1() { alert(1); } funcin f2() { alert(2); } mifuncion= f1; mifuncion(); // Asignamos una funcin a una variable, observar que f1 va sin parentesis // Llamamos a la funcin asignada, mostrando una ventana con el valor 1 // observar el uso de los parentesis.
7/44
Vectores y matrices:
Son variables que referencian a mas de un valor por medio de un ndice. Los valores referenciados pueden ser de distintos tipos, al contrario de otros lenguajes cuyos vectores solo pueden ser de un tipo de datos.
NombreVector[ndice]=valor; X=nombrevector[ndice]; // Escribimos un valor en una posicion // Obtenemos un valor de una posicion y lo almacenamos
Formas de inicializar un vector o Asignndole el valor del array como si fuese un literal. Mivector= [v1,1,true]; o Indicando el nmero de posiciones del array.
Mivector= new Array( 20 ); // Iniciamos un array de 20 posiciones (ndices 0 a 19)
Si deseamos ampliar las posiciones del array simplemente hemos de asignar un valor a una posicion inexistente:
Mivector[25]=Un valor aadido;
Al hacer esto, las posiciones 20,21,22,23,24 se crean tambin tambin podemos definir un vector sin dimensiones inicialmente.
Mivector= new Array();
Indices del array Los ndices del array por lo general suelen ser numricos:
Mivector[1] =v1; Mivector[2] =v2; Mivector[3] =v3; Mivector[4] =v4;
Pero tambin es posible utilizar ndices de tipo texto:

Mivector[nombre] = Antonio Jess;
Longitud de un vector Para conocer la longitud de un vector, dado que los vectores son objetos, utilizamos la propiedad length que almacena el nmero de elementos:
NumElems=Mivector.length
Matrices Llamamos matrices a vectores de ms de una dimensin. JavaScript no lo soporta nativamente. Para crear un vector multidimensional hemos de crear un vector para la primera dimensin, y posteriormente inicializar nuevos vectores en cada una de sus celdas de la siguiente forma:
matriz=new Array(2); matriz[0]=new Array(2); matriz[1]=new Array(2);
Para acceder a cada posicion de la matriz utilizamos 2 ndices en vez de 1:

matriz[0][0]=1; matriz[0][1]=2; matriz[1][0]=3; matriz[1][1]=4;
8/44
Operadores
Como todo lenguaje, necesitamos de operadores para realizar operaciones sobre los literales del lenguaje, mayormente sobre nmeros y valores lgicos.
Aritmticos Operador Atajo x+=1 + x++
Descripcin Suma Resta
Comparacin Operador == !=
* / %
x-=1 x x*=1 x/=1 x%=1
=== Multiplicacin Division Resto !== < > <= >=
Descripcin Igualdad ( 1==1 seria cierto ) Distinto ( 1!=1 seria falso ) Igualdad estricta ( 1===1 seria falso ) Distincin estricta ( 1!==1 seria cierto ) Menor Mayor Menor igual Mayor igual
Operadores lgicos Operador Descripcin Conjuncin lgica && || ! Disyuncin lgica Negacin
Tabla de verdad AND (&&) true && true True true && false False false && true False false && false False
Tabla de verdad OR (||) true || true True true || false True false || true True false || false False Otros Operador
= +
Descripcin
Asignacin. Ejem: X=1; // Asignamos el valor 1 a la variable x Concatenacin de cadenas de texto. Ejem: Frase= hola + como estas; hola + 1 hola1 // Conversin automtica de tipo num. al concatenar con texto Si condicin es true devuelve el valor1, caso contrario el valor 2.
Condicion?valor1:valor2 A=2>3?1:2; Es equivalente a: If (2>3) a=1; Else a=2;
New Delete this
Son operadores de objetos: New crea una nueva instancia de un objeto ( ej: v=new Array(); ) Delete Elimina un objeto liberando recursos ( ej: delete v; ) This Usndolo dentro de un objeto, es una referencia a si mismo. Veremos su utilidad en el apartado de objetos.
9/44
Estructuras de control
If (condicion) { Instr1; Instr2; ... } else if (condicion) { Instr1; Instr2; ... } else { Instr1; Instr2; ... } Switch (var) { case valor1 : instr1; instr2; ... break; case valor2 : instr1; instr2; ... break; default: instr1; instr2; ... break; }
Con 1 sola instruccin: If (condicion) instr; Else if (condicion) instr; Else instr;
Iteramos 0 o mas veces while (condicin) { Instr1; Instr2; ... }
Iteramos 1 o mas veces do {
Acceso a propiedades de obj. with obj { prop1 = valor; prop2 = valor; }

obj.prop1= valor; obj.prop2; = valor;
Instr1; Instr2; ...
} while (condicion)
Iteramos un nmero controlado de veces. for( inicializacion;condicion;incremento) { Instr1; Instr2; ... } Ejemplos:
for(cont=1;cont<10;cont++) { document.write(cont + " - "); } for(cont=0,cont2=20; cont!=cont2; cont++,cont2--) { document.write(cont + " - ");
Recorridos de propiedades de objetos (u elementos) for (i in objeto) { // Cada I es un elemento del obj } Ejemplos: (escribe el contenido de v) var v=[1,2,3,5]; for (i in v) { document.write(i); }
10/44
Funciones
Javascript nos da la posibilidad de definir funciones con objeto de poder reutilizar cdigo. Una funcin ha de ser definida antes de ser llamada, por ello es aconsejable realizar esta tarea dentro del Head del documento HTML. La estructura a utilizar es la siguiente: function nombrefuncion (arg1,arg2,.....,argN) { sentencia1; sentencia2; sentencia3; .... sentenciaN; return valor; } Los parmetros son pasados por valor a la funcin Las variables declaradas dentro de la funcin son locales, y no sern visibles externamente a ella. Si pasamos un objeto como parmetro si podemos modificar sus propiedades como si fuesen valores pasador por referencia. El valor de retorno lo devolvemos por medio de return, una vez ejecutada esta funcin saldramos de la funcin.
o o o o
Algunas funciones predefinidas son: eval (instrucciones) Evalua las instrucciones pasadas como parmetro en formato de cadena de caracteres. Ejemplo: Eval (alert(holamundo)); // Ejecuta la instruccin alert parseInt(cadena,base) Intenta transformar la cadena de caracteres pasada como parmetro a un entero en la base indicada en el segundo parmetro. X= Parseint(1234a,10); // Transforma 1234a en el valor 1234 parseFloat(cadena,base) Intenta transformar la cadena de caracteres pasada como parmetro a un nmero flotante en la base indicada en el segundo parmetro. X= Parseint(12.34a,10); // Transforma 12.34a en el valor 12.34 IsNaN(valor) Indica si el valor pasado por parmetro no es numrico, devuelve true o false. Indica si el valor pasado por parmetro es un nmero finito, devuelve true o false.
IsFinite(valor)
11/44
Objetos
Los objetos son un tipo de datos que agrupan mtodos (funciones que afectan al propio objeto) y propiedades (variables internas al objeto). OBJETO Propiedades (valores) mtodos(funciones) Una vez definido un objeto, podemos crear tantas copias de este como deseemos, a eso se le llama instancias del objeto. Miobj= new Obj; Y en cada una de sus instancias podemos llamar a sus mtodos y propiedades de la siguiente forma:
Miobj.nombrePropiedad Miobj.nombreMetodo(param1, param2,...paramN)
Javascript nos permite definir nuestros propios objetos, adems de proporcionarnos gran candidas de objetos predefinidos que veremos en los siguientes apartados La forma de crear un objeto por medio de JavaScript es por medio de una funcin, la cual es la constructora de la clase. En la definicin de esta funcin, y con ayuda del operador this que referencia al propio objeto, asignaremos propiedades (variables) y mtodos (funciones) a este constructor. El nombre de la funcin ser el nombre del objeto. Ejemplo de construccin de un objeto:
function metodo1() { .... } function metodo2() { .... }
function miobjeto(p1,p2,p3,p4) { this.mipropiedad1=p1; this.mipropiedad2=p2; this.mipropiedad3=p3; this.mipropiedad4=p4;
this.mimetodo1=metodo1; this.mimetodo2=metodo2; }
Ejemplo de inicializacin y uso del objeto:

miinstancia= new Miobjeto(valor1,valor2,valor3,valor4)
12/44
La herencia de objetos es el mecanismo de crear un objeto a partir de otro, redefiniendo algunas de sus propiedades o mtodos. Este mecanismo nos sirve para crear un modelo de objetos ahorrndonos el reescribir cdigo comn a varios objetos. En Javascript esto se realiza de la siguiente forma. En el siguiente ejemplo vamos a crear un objeto heredado del anterior:
function metodo3() { .... }
function miobjetoHeredado(p1,p2,p3,p4,p5) { base=miobjeto; // Aqu le indicamos de que objeto depende base(p1,p2,p3,p4); // Llamamos al constructor del objeto padre por medio de base this.miPropiedad5=p5; this.mimetodo1=metodo3; }
El ejemplo anterior crea un objeto heredado llamado miobjetoHeredado a partir de miobjeto. Este a su vez aade una nueva propiedad llamada miPropiedad5 y redefine el mtodo mimetodo1 para que llame a la funcin metodo3. La creacin de este objeto en el caso de no utilizar la herencia seria de la siguiente forma:
function metodo1() { .... } function metodo2() { .... }
function miobjeto(p1,p2,p3,p4,p5) { this.mipropiedad1=p1; this.mipropiedad2=p2; this.mipropiedad3=p3; this.mipropiedad4=p4; this.mipropiedad5=p5;
this.mimetodo1=metodo3; this.mimetodo2=metodo2; }
13/44
Objetos predefinidos del lenguaje.

Javascript posee gran cantidad de objetos predefinidos (ya existen, no hay que definir las clases). Estos objetos agrupan un conjunto de funciones tiles para programar. Array Este es el objeto que nos permite declarar vectores, como hemos visto hasta el momento. Cuando creamos un vector, podemos acceder a una serie de propiedades y mtodos muy tiles: Propiedades: length Numero de elementos que contiene el vector.Ejemplo:
v1=new Array(3); v1[0]=3; v1[1]=10; v1[2]=20; document.write(v1.length);
mtodos:
concat(otroVector)
Esta funcin nos devuelve el vector concatenado con otro que se pasa por parmetro. Ejemplo:
v1=new Array(3); v1[0]=3; v1[1]=10; v1[2]=20; v2=new Array(3); v2[0]=8; v2[1]=-1; v2[2]=40; //Probamos a concatenar 2 arrays v3=v1.concat(v2);
sort(funcin)
Esta funcin por defecto ordena el vector alfabticamente (sin pasar ningn parmetro) o en el caso de que deseemos ordenarlo con otro formato podemos pasar el nombre de una funcin que se encargue de la comparacin. Esta funcin pasada por parmetro ha de obtener 2 parmetros, y devolver: function comparar(a,b) -1 si a es menos que b 0 si a es igual que b 1 si a es mayor que b Ejemplo:
// Ordenacin con una funcin especifica function comparar(a,b) { return a<b?-1:(a==b?0:1); } // Por defecto ordena alfabticamente v3.sort(comparar);
14/44
Date El objeto date nos permite trabajar con fechas y horas, adems de obtener la fecha y hora actual. Formas de crear un objeto date serian:
d = new Date(); d = new Date(ao,mes,dia) d = new Date(ao,mes,dia,hora,minuto,segundo); // Contiene la fecha actual // Contiene la fecha indicada por parmetros // Contiene una fecha y hora especificada
Este objeto posee una serie de mtodos muy interesantes para trabajar con los valores que contiene: mtodos: getTime() Nos devuelve el numero de milisegundos desde 1/1/1970
setTime(milisegundos) Establecemos una fecha indicando el numero de milisegundos desde 1/1/1970 getYear() Obtenemos el ao. Este ao tendra 2 dgitos entre el periodo 1900-1999, y 4 dgitos a partir del 1999 setYear(ao) Establecemos el ao. Este ao tendra 2 dgitos entre el periodo 1900-1999, y 4 dgitos a partir del 1999 getFullYear() setFullYear(ao) getMonth() Obtenemos el ao (formato de 4 dgitos) Establecemos el ao (formato de 4 dgitos) Obtenemos el mes (los meses son numricos, y estn enumerados del 0 al 11) Establecemos el mes (los meses son numricos, y estn enumerados del 0 al 11) Obtenemos el dia del mes Establecemos el dia del mes Obtenemos la hora Establecemos la hora Obtenemos los minutos Establecemos los minutos Obtenemos los segundos
setMonth(mes)
getDate() setDate(numDia) getHours() setHours(hora) getMinutes() setMinutes(minuto) getSeconds()
setSeconds(segundos) Establecemos los segundos getDay() Nos devuelve el dia de la semana de una fecha concreta. 0 seria el primer dia de la semana correspondiente al domingo, 1 al lunes, ... , 6 al sbado (formato americano). 15/44
Ejemplo de uso del objeto date: mifecha=new Date(); document.write(mifecha); document.write("<br>"); document.write("dia " + mifecha.getDate());document.write("<br>"); document.write("dia semana " + mifecha.getDay());document.write("<br>"); document.write("mes " + mifecha.getMonth());document.write("<br>"); document.write("ao " + mifecha.getYear());document.write("<br>"); document.write("ao completo " + mifecha.getFullYear());document.write("<br>"); document.write("horas " + mifecha.getHours());document.write("<br>"); document.write("minutos " + mifecha.getMinutes());document.write("<br>"); document.write("segundos " + mifecha.getSeconds());document.write("<br>"); document.write("tiempo " + mifecha.getTime());document.write("<br>"); mifecha2=new Date(); mifecha2.setDate(1); //mifecha2.setDay(1); mifecha2.setMonth(1); mifecha2.setYear(2004); mifecha2.setFullYear(2004); mifecha2.setHours(1); mifecha2.setMinutes(1); mifecha2.setSeconds(1); //mifecha2.setTime(1); document.write("<br>"); document.write(mifecha2); document.write("<br>"); sumafechas=mifecha + mifecha2; document.write(sumafechas); document.write("<br>");
16/44
Math Este objeto encapsula un conjunto de valores constantes y mtodos necesarios para realizar cmputos aritmticos. Propiedades: E LN2 LN10 LOG2E LOG10E PI SQRT1_2 SQRT2 Valor de numero E. Logaritmo neperiano de 2 Logaritmo neperiano de 10 Logaritmo en base 2 de E Logaritmo en base 10 de E Numero PI Raz cuadrada de Raz cuadrada de 2
mtodos: abs(num) sin(num) cos(num) tan(num) asin(num) acos(num) atan(num) exp(num) log(num) ceil(num) floor(num) round(num) min(a,b) max(a,b) Valor absoluto Seno Coseno Tangente Arcoseno Arcocoseno Arcotangente Exponente Logaritmo base e Redondeo hacia arriba Redondeo hacia abajo Redondeo (por encima o debajo de .5 redonda con ceil o floor) Devuelve el mnimo de a y b Devuelve el mximo de a y b
pow(base,exp) Potencia de base elevada al exponente sqrt(num) random(num) Raz cuadrada del numero Nos devuelve un numero aleatorio entre 0 y 1 17/44
Ejemplo de uso de la clase Math: document.write("valor document.write("valor document.write("valor document.write("valor document.write("valor document.write("valor document.write("valor document.write("valor de de de de de de de de E: " +Math.E + "<br>"); LN2: " +Math.LN2 + "<br>"); LN10: " +Math.LN10 + "<br>"); LOG2E: " +Math.LOG2E + "<br>"); LOG10E: " +Math.LOG10E + "<br>"); PI: " +Math.PI + "<br>"); SQRT1_2: " +Math.SQRT1_2 + "<br>"); SQRT2: " +Math.SQRT2 + "<br>");
document.write("Abs -1: " + Math.abs(-1)+"<br>"); document.write("aCos 45: " + Math.acos(45)+"<br>"); document.write("asin 1: " + Math.asin(1)+"<br>"); document.write("atan 1: " + Math.atan(1)+"<br>"); document.write("ceil 1.2: " + Math.ceil(1.2)+"<br>"); document.write("cos 45: " + Math.cos(45)+"<br>"); document.write("exp 2 : " + Math.exp(2)+"<br>"); document.write("floor 1.2: " + Math.floor(1.2)+"<br>"); document.write("log 1: " + Math.log(1)+"<br>"); document.write("min 1 2: " + Math.min(1,2)+"<br>"); document.write("pow 3 4:" + Math.pow(3,4)+"<br>"); document.write("random: " + Math.random()+ " -- " + Math.random() +"<br>"); document.write("round 1.2: " + Math.round(1.2)+"<br>"); document.write("sin 30: " + Math.sin(30)+"<br>"); document.write("sqrt 4: " + Math.sqrt(4)+"<br>"); document.write("tan 45: " + Math.tan(45)+"<br>");
18/44
Number Este objeto representa una serie de constantes tiles a la hora de utilizar cmputos numricos. Adems podemos crear instancias numricas por medio de su constructor: x=new Number(12) // X poseer el valor 12 numrico
NaN MAX_VALUE MIN_VALUE
Constante que representa un valor no numrico mximo valor representable mnimo valor representable
NEGATIVE_INFINITE -infinito POSITIVE_INFINITE + infinito
Ejemplo de cdigo:
var n1 = new Number() document.write(" Number() " + n1 + "<br>") //muestra un 0 var n2 = new Number("hola") document.write("Number(\"hola\") " + n2 + "<br>") //muestra NaN var n3 = new Number("123") document.write("Number(\"123\")" +n3 + "<br>") //muestra 123 var n4 = new Number("123asdfQWERTY") document.write("Number(\"123asdfQWERTY\")" +n4 + "<br>") //muestra NaN var n5 = new Number(123456) document.write("Number(123456) " +n5 + "<br>") //muestra 123456 var n6 = new Number(false) document.write("Number(false) " +n6 + "<br>") //muestra 0 var n7 = new Number(true) document.write("Number(true) " +n7 + "<br>") //muestra 1 document.write("Propiedad NaN: " + Number.NaN) document.write("<br>") document.write("Propiedad MAX_VALUE: " + Number.MAX_VALUE) document.write("<br>") document.write("Propiedad MIN_VALUE: " + Number.MIN_VALUE) document.write("<br>") document.write("Propiedad NEGATIVE_INFINITY: " + Number.NEGATIVE_INFINITY) document.write("<br>") document.write("Propiedad POSITIVE_INFINITY: " + Number.POSITIVE_INFINITY)
19/44
String Este objeto es el que representa las cadenas de texto, cualquier variable con un valor de tipo texto es un objeto String. Tenemos un conjunto de mtodos muy tiles para trabajar con el texto: (Nota: Los caracteres de una cadena de texto empiezan en la posicion o) charAt(posicion) Devuelve el caracter que se encuentra en la posicion indicada por parmetro Devuelve el valor Accii que nos encontramos en la posicion indicada. Nos devuelve el ndice en el que se encuentra la subcadena pasada por parmetro. Nos devuelve el ndice de la ultima aparicin de la subcadena pasada como parmetro Separa la cadena de texto en porciones cada vez que se encuentra la cadena pasada por parmetro. El valor devuelto es un vector con cada una de las porciones del cdigo. Concatena esta subcadena con la pasada por parmetro Nos devuelve la subcadena que enmarca los parmetros indicados. inicio : Desde donde empieza la subcadena long: Numero de caracteres que posee dicha subcadena substring(indice1,indice2) Nos devuelve la subcadena enmarcada entre los ndices que pasamos por parmetro. indice1: Desde donde comienza la subcadena indice2: En que posicion termina la subcadena toLowerCase() toUpperCase() replace(patron, cadnew) Devuelve la cadena en minsculas Devuelve la cadena en maysculas Devuelve una cadena de caracteres en la cual se ha sustituido todas las apariciones del parmetro patrn por cadnew. Devuelve el texto formateado a tamao grande (como etiquetas big) Devuelve el texto formateado para que parpadee (solo netscape) Devuelve el tecto formateado en negrita Devuelve el texto formateado en tamao monoespaciadox. Todos los caracteres ocupan los mismos pixeles. fijo
charCodeAt(position)
indexOf(subcadena)
lastIndexOf(subcadena)
split(separador)
concat(cadena) substr(inicio,long)
big()
blink()
bold() fixed()
20/44
fontcolor(color) fontsize(tamao) italics() link(direccionWeb)
Establecemos el color con que se escribir dicho texto. Establecemos el tamao con que se escribir dicho texto Devuelve el texto formateado a cursiva Devuelve el texto como su fuese un enlace a la direccion indicada por parmetro. Devuelve el texto en un formato pequeo Devuelve el texto tachado Devuelve el texto en formato de superndice Devuelve el texto en formato de subndice.
small() strike() sup() sub()
Ejemplo: la cadena de caracteres es "<SCRIPT> document.write(cadena);</SCRIPT>"<br> longitud :<script>document.write(cadena.length)</script> <br> charAt 0 :<script>document.write(cadena.charAt(0))</script> <br> charCodeAt 0 :<script>document.write(cadena.charCodeAt(0))</script> <br> indexof "que" :<script>document.write(cadena.indexOf("que"))</script> <br> lastIndexOf "a" :<script>document.write(cadena.lastIndexOf("a"))</script> <br> replace "que" "QUE" :<script>document.write(cadena.replace("que","QUE"))</script> <br> split " ":<script>document.write(cadena.split(" ").toString())</script> <br> substring 2 4 :<script>document.write(cadena.substring(2,4))</script> <br> substr 2 4 :<script>document.write(cadena.substr(2,4))</script> <br> toLowerCase :<script>document.write(cadena.toLowerCase())</script> <br> toUpperCase :<script>document.write(cadena.toUpperCase())</script> <br> anchor :<script>document.write(cadena.anchor("aqui"))</script> <br> big :<script>document.write(cadena.big())</script> <br> blink:<script>document.write(cadena.blink())</script> <br> bold :<script>document.write(cadena.bold())</script> <br> fixed :<script>document.write(cadena.fixed())</script> <br> fontcolor 0000ff:<script>document.write(cadena.fontcolor("0000ff"))</script> <br> fontsize 1:<script>document.write(cadena.fontsize("1"))</script> <br> italics:<script>document.write(cadena.italics())</script> <br> link:<script>document.write(cadena.link("www.terra.es"))</script> <br> small:<script>document.write(cadena.small())</script> <br> strike:<script>document.write(cadena.strike())</script> <br> sub:<script>document.write(cadena.sub())</script> <br> sup:<script>document.write(cadena.sup())</script> <br>
21/44
Manejadores de eventos en JavaScript

Eventos ms comunes:
Evento Descripcin Este evento se produce cuando el usuario detiene la carga de una imagen., ya sea pulsando el botn stop o cargando una pagina diferente. Ejemplo:
<img src="http://www.terra.es/addon/img/cine/9a24f3mexicanotdp.jpg" onabort="alert('eyyy')">
ONABORT
Este evento se produce cuando un elemento pierde el foco de la aplicacin. El foco de la aplicacin es donde esta situado el cursor. Podra ser un elemento de formulario, una pagina, un botn, o cualquier otro elemento. ONBLUR Ejemplo:
<INPUT TYPE="text" NAME="" onblur="alert('perdida del foco en textbox1')" >
Cuando cambia el estado de un elemento de un formulario. Suele saltar cuando se pierde el foco. ONCHANGE Ejemplo:
<INPUT TYPE="text" NAME="" contenido del textbox2')"> onchange="alert('has cambiado el
Al realizar una pulsacin del botn del ratn sobre algn elemento del documento o incluso en el propio documento. ONCLICK Ejemplo:
<INPUT TYPE="button" NAME="" onclick="alert('has pulsado el boton')" value=pulsame>
ONDRAGDROP
Cuando el usuario arrastra algn elemento al documento del navegador con el ratn. Event de window
Se produce cuando no se puede cargar una imagen o el documento. (ejemplo como manejador de evento de una imagen inexistente). ONERROR Ejemplo:
<img src="unaimagenquenoencuentranunca" conseguido cargar la 2 imagen')"> onerror="alert('no he
22/44
Cuando un componente obtiene el foco de la aplicacin. ONFOCUS Ejemplo:

<INPUT TYPE="text" NAME="" onfocus="alert('obtengo el foco del objeto')" >
Al pulser la tecla ONKEYDOWN Ejemplo:

<INPUT TYPE="text" NAME="" onkeydown="alert('keydown en textbox ' + event.keyCode)" >
Al dejar pulsada la tecla (despus de onkeydown) ONKEYPRESS Ejemplo:

<INPUT TYPE="text" NAME="" onkeypress="alert('keypress en textbox ' + event.keyCode)" >
Al soltar la tecla ONKEYUP Ejemplo:

<INPUT TYPE="text" NAME="" onkeyup="alert('keyup en textbox ' + event.keyCode)" >
Cuando el documento o una imagen ha terminado de cargarse ONLOAD Ejemplo:

<BODY onload="alert('documento cargado')">
Cuando se pulsa sobre algn elemento ONMOUSEDOWN Ejemplo:

<TD onmousedown="alert('has pulsado en la caja')" >
Cuando movemos el ratn sobre algn elemento ONMOUSEMOVE Ejemplo:

<TABLE border=1 onmousemove="this.style.backgroundColor='red'"
Cuando sacamos el puntero del ratn de un objeto ONMOUSEOUT Ejemplo:

<TABLE border=1 onmouseout="this.style.backgroundColor='blue'">
23/44
Cuando soltamos el botn del ratn sobre algn elemento ONMOUSEUP Ejemplo:
<TD onmouseup="alert('has soltado el boton del raton')" >
Cuando movemos la ventan del navegador ONMOVE Ejemplo:

<BODY onmove="alert('has movido el navegador')">
Cuando redimensionamos la ventan del navegador ONRESIZE Ejemplo:

<BODY onresize="alert('has redimensionado el navegador')" >
Cuando hacemos submit en un formulario: Etiqueta form ONSUBMIT Ejemplo:

<FORM METHOD=POST ACTION="" onsubmit="alert('vamos a hacer el submit')">
Cuando hacemos un reset en un formulario: Etiqueta form ONRESET Ejemplo:

<FORM METHOD=POST ACTION="" onreset="alert('vamos a reseter')" ">
Cuando seleccionamos el contenido de un elemento de formulario, o sea, remarcamos el texto de un componente. ONSELECT Ejemplo:
<INPUT TYPE="text" NAME="" ONSELECT="alert('se ha seleccionado el contenido')">
Cuando cerramos la ventana o cargamos otra direccion ONUNLOAD Ejemplo:

<BODY onunload="alert('documento descargado')" >
24/44
Otros eventos menos comunes:

Onactivate Onbeforedeactivate Onbounce Oncut Ondeactivate Onfinish Onmouseleave Conserizestart Onscroll Onafterprint Onbeforepaste Oncellchange Ondataavailable Ondrag Onhelp Onpaste Onrowenter Onselectstart Onafterupdate Onbeforeprint Concontextmenu Ondatasetchanged Onbeforecopy Onbeforeunload Oncontrolselect Ondatasetcomplete Ondragenter Ondragend Onlayoutcomplete Onlosecapture Onpropertychange Onreadystatechange Onrowexit Onrowsdelete Onstart Onstop Onberofecut Onbeforeupdate Oncopy Ondblclick Ondragleave Onmouseenter Onresizeend Onrowsinserted
Objeto Event
Cuando se activa un evento, existe un objeto, al cual accedemos por el nombre de Event, el cual nos muestra informacin sobre el evento.
Netscape 4.0x Internet Explorer 4.0x Descripcin Valor Event object properties Valor Propiedad altKey ctrlKey shiftKey
Propied ad
modifiers
Especifica el estado de las teclas alt control y shift en el momento del evento
Boolean
pageX
Integer
Especifica la coordenada horizontal del cursor del ratn en el momento del evento con respecto a la pagina
Integer
clientX
pageY
Integer
Especifica la coordenada vertical del cursor del ratn en el momento del evento con respecto a la pagina Integer
clientY
screenX
Integer
Especifica la coordenada horizontal del cursor del ratn en el momento del evento con respecto a la pantalla.
Integer
screenX
screenY
Integer
Especifica la coordenada vertical del cursor del ratn en el momento del evento con respecto a la pantalla. Integer
screenY
target
Object
Una referencia del objeto responsable del evento.
Object
srcElement
type
String
Especifica el tipo de evento (ej: "click", "mousedown", "keypress").
String
type
which
Integer
Especifican que botn o que tecla se ha pulsado.
Integer
button keyCode
25/44
Ejemplos de uso:
<HTML> <HEAD> </HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-function verEvent() { txt=""; txt=txt+ "informacin sobre el objeto event\n\n"; txt=txt+ "Modificadores-> altKey:" + event.altKey + " ctrlKey:" + event.ctrlKey + " shiftKey:" + event.shiftKey + " \n"; txt=txt+ "Posicion del ratn relativa al documento-> clientX:" + event.clientX + " clientY:" + event.clientY +"\n"; txt=txt+ "Posicion del ratn relativa a la pantalla-> screenX:"+ event.screenX + " screenY:" + event.screenY + "\n"; txt=txt+ "Referencia al objeto: srcElement-> " + event.srcElement.name + "\n"; txt=txt+ "Tipo de evento-> type: " + event.type + "\n"; txt=txt+ "Valores de botones o teclas-> button:" + event.button + " keyCode:" + event.keyCode +" \n"; alert(txt); } //--> </SCRIPT> <BODY> <input type="button" value="click me" name="botonClikMe" onclick="verEvent()"> <INPUT TYPE="text" NAME="cajadeTexto" onKeyDown="verEvent()" > </BODY> </HTML>
Captura de eventos
Podemos capturar un evento del documento y controlarlo nosotros asignandole una funcin, todo esto mediante cdigo. El siguiente cdigo refleja el funcionamiento:
<HTML> <HEAD> </HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-function teclasD() { alert("se ha pulsado la tecla " + event.keyCode); return false; } if (window.Event) // Navigator 4.0x { document.captureEvents(Event.KEYDO WN); } document.onkeydown = teclasD; //--> </SCRIPT> <BODY> </BODY> </HTML
26/44
Jerarqua de objetos del navegador

El navegador posee un conjunto de objetos por medio de los cuales podemos controlarlo. Estos objetos incluyen todos los elementos definidos en el documento html, axial como valores especficos de la ventana del navegador. El conjunto de mtodos de estos objetos nos da posibilidades de dar rdenes al navegador para que realice distintas funciones. El esquema siguiente nos muestra como esta constituida esta jerarqua de objetos dentro de objetos:
27/44
28/44
El objeto window La siguiente tabla muestra sus propiedades

Propiedad closed Tipo dato
boolean
Descripcin
Indica la posibilidad de que se haya cerrado la ventana Texto que se escribe por defecto en la barra de estado del navegador. Hemos de devolver true por convencin para el manejador de eventos. Ser igual al ltimo valor que tomo status.
defaultStatus ="este es mi texto";
defaultStatus
string
document
object
Objeto de tipo Document, que contiene todos los elementos html de la pagina Array de los frames existentes en el documento, tambin podemos acceder a cada frame por el nombre que le indicamos, o sea, existe una propiedad por cada frame, con el nombre indicado al crear los frames.
document.write("<br>frames en la pagina " +frames.length + "<br> "); document.write(frames[0].name + "<br>"); document.write(frames[1].name + "<br>");
frames
object
length
number
Numero de frames de la ventana Nombre de la ventana. La ventana principal no tiene nombre a no ser que se la definamos a mano, sin embargo si es til para los frames.
name
string
document.write(frames[0].name "); document.write(frames[1].name);
opener
object
Hace referencia a la ventan de navegador que abre la la ventana actual de trabajo
parent screenLeft screenTop self
En el caso de los frames, hace referencia al frame donde estn definidos todos los frames, o sea, Top.
object document.write(frames[0].parent.location + "<br>"); document.write(frames[0].top.location+ "<br>"); number number object
Posicion x de la ventana Posicion y de la ventana Hace referencia a la ventana o frame actual Texto de la barra de estado en un momento dado Hemos de devolver true por convencin para el manejador de eventos.
<a href="void(0);" onmouseover="defaultStatus='he modificado el estatus';return true">pasa el raton por aqu</a>
status
string
29/44
Hace referencia a la ventana padre donde esta situada el frame donde estamos trabajando, como la propiedad parent.
top
object
document.write(frames[0].parent.location + "<br>"); document.write(frames[0].top.location+ "<br>");
window
object
Hace referencia a la ventana actual, como self
Objetos incluidos en Window: Objeto historial de las paginas visitadas, desde aqu podemos utilizar sus mtodos para volver a paginas anteriores, o siguientes.
Propiedades: back(): forward(): go(n): pagina anterior pagina siguiente incrementa decrementa saltos de paginas visitadas Con valores + (siguientes) - (anteriores
history
object
<input type=button value="history.back()" onclick="history.back> <input type=button value="history.forward()" onclick="history.forward()"> <input type=button value="history.go(1)" onclick="history.go(1)">
Direccion actual de la pgina, modificando este valor desde cdigo podremos cambiar de pgina sin pulsar ningn enlace.
<a href="javascript:location='http:\\\\www.terra.es';" > pasa el raton por aqu </a>
En realidad es un objeto con las siguientes propiedades:
WINDOW.LOCATION Propiedad Tipo dato Descripcin hash

object (direccion local)
location
string
Es el ancla en el caso de haberlo usado en la direccion. Osea #nombre.
host href pathname port protocol search
string string string string string string
Nombre del servidor que alberga la pagina Acceso directo a la pagina actual, si lo cambiamos, cambiamos la pagina. Camino de la pagina actual Ej: /js/otros.html Puerto de acceso Protocolo de la pagina, normalmente Http Cadena de bsqueda de query: ?id=1
30/44
Este objeto nos ofrece informacin sobre el navegador WINDOW.NAVIGATOR Tipo dato Valor string string boolean string string
Nombre del navegador: Microsoft Internet Explorer Version del navegador 4.0 (compatible; MSIE 6.0; Windows NT 5.1) Soporte de cookies true Plataforma en la que trabajamos: Win32
Propiedad appName navigator

object
appVersion cookieEnabled platform userLanguage
Idioma: es
Objeto con valores de configuracin de la pantalla del cliente: width screen

object
height pixelDepth availwidth availheight
Ancho en pixeles de la pantalla Alto en pixeles de la pantalla Numero de bits de color Ancho de pantalla disponible Alto de pantalla disponible (la barra del windows elimina espacio normalmente)
Propiedades de JavaScript 1.2 (NetScape):

innerHeight innerWidth locationbar menubar outherHeight outherWidht personalbar scrollbars toolbar
number number object object number number object object object
Tamao en pixeles del espacio vertical donde se muestra la pagina Tamao en pixeles del espacio horizontal donde se muestra la pagina Es un objeto que representa a la barra de direcciones (javascript1.2) Es un objeto que representa a la barra de mens de la ventana (javascript 1.2) Tamao vertical de la ventana del navegador Tamao horizontal de la ventana del navegador Barra personal del navegador(Javascript 1.2) Objeto que referencia a las barras de desplazamiento de la ventana (Javascript 1.2) Hace referencia a la barra de herramientas (javascript 1.2)
A continuacin indicamos los mtodos de este objeto:

Alert(texto) Blur() Clearinterval() ClearTimeout() Close() Confirm(texto) Ventana con el texto Quita el foco de la ventana Elimina la ejecucin de sentencias asociadas al mtodo setInterval() (javascript 1.2) Elimina la ejecucin de sentencias asociadas al mtodo setTimeout Cierra la ventana Muestra una ventana de confirmacin y permite aceptar y rechazar <input type=button value="confirm()" onclick="alert(self.confirm('estas seguro'))"> 31/44
Curso JavaScript : Gua de clase Focus() MoveBy(x,y) MoveTo(x,y) Open()
Coloca el focus en la ventana Mueve la ventana del navegador los pixeles que se indiquen Mueve la ventana del navegador a la posicion indicada Abre una nueva ventana de navegador
window.open(URL,nombre_de_la_ventana,forma_de_la_ventana) Veamos rpidamente cada uno de estos parmetros por separado. URL: representa el URL que deseamos abrir en la ventana secundaria, por ejemplo http://www.desarrolloweb.com nombre_de_la_ventana: es el nombre que se le asigna a esta ventana para dirigir enlaces con el atributo target del HTML forma_de_la_ventana: se indica el aspecto que va a tener la ventana secundaria. Por ejemplo se puede definir su altura, anchura, si tiene barras de desplazamiento, etc Estos atributos los puedes utilizar en la funcin window.open() para definir la forma que deseas que tenga tu ventana secundaria. Width Height Top Ajusta el ancho de la ventana. En pixels Ajusta el alto de la ventana Indica la posicin de la ventana. En concreto es la distancia en pixels que existe entre el borde superior de la pantalla y el borde superior de la ventana. Indica la posicin de la ventana. En concreto es la distancia en pixels que existe entre el borde izquierdo de la pantalla y el borde izquierdo de la ventana. Para definir de forma exacta si salen o no las barras de desplazamiento. scrollbars=NO hace que nunca salgan. Scrollbars=YES hace que salgan (siempre en ie y solo si son necesarias en NTS). Establece si se puede o no modificar el tamao de la ventana. Con resizable=YES se puede modificar el tamao y con resizable=NO se consigue un tamao fijo. A partir de aqu se enumeran otra serie de propiedades que sirven para mostrar o no un elemento de la barra de navegacin que tienen los navegadores ms populares, como podra ser la barra de mens o la barra de estado. Cuando ponemos el atributo=YES estamos forzando a que ese elemento se vea. Cuando ponemos atributo=NO lo que hacemos es evitar que ese elemento se vea.
Left
Scrollbars
Resizable
Directories (barra directorios) Location (barra direcciones) Menubar (barra de mens) Status (barra de estado) Titlebar (la barra del ttulo) Toolbar (barra de herramientas)
window.open('','terra','scrollbars=no,resizable=yes,width=640,height=480')
Imprime el documento actual (abre la ventana de impresin) Print() Prompt(pregunta,dato Abre una ventana para pedir un dato mostrando una pregunta y rellenando la caja de texto con un valor por defecto. por defecto)
<input type=button value="prompt" onclick="alert(prompt('dame un dato','rellena aqui'))">
ResizeBy(ancho,alto) ResizeTo(ancho,alto) Scroll(x,y) ScrollBy(x,y)
Redimensiona la ventana aadiendo el ancho y alto indicados Redimensiona la ventana al ancho y alto indicados Hace un scroll hasta la posicion x,y Hace un scroll con el incremento x,y
SetInterval(sentencia, Define un script para que sea ejecutado indefinidamente en cada intervalo de tiempo milisegundos) 32/44
myintervalo=setInterval('alert(1)',500)
SetTimeOut(sentencia, Define un script que sera ejecutado en los milisegundos indicados milisegundos) myTymeout=setTimeout('alert(5000)',5000)
mtodos JavaScript 1.2 (netscape):

Back() CaptureEvents(txt) Find() Forward() Home() ReleaseEvents() RouteEvent() Stop() Pagina atrs en el historial Captura los eventos que se indiques como parmetro (javascript1.2) Muestra la ventana de busqueda (Javascript 1.2 netscape) Se dirige una pagina adelante del historial Se dirige a la pagina home Libera los eventos capturados Enruta un evento en la jerarquia de eventos Es como pulsar el botn stop del navegador
33/44
Objeto Document
Este objeto representa el documento HTML en el que estamos. Se accede a el por medio de la referencia document del objeto window. Su mayor importancia viene por el numero de vectores que posee: images[], forms[], link[] A continuacin veremos las propiedades ms interesantes:
Propiedad
Tipo Descripcion dato

Esta propiedad funciona como el location del objeto window. Es de lectura escritura, representa la direccion del documento, y es de lectura/escritura. Podemos modificar la direccion actual cambiando el valor de esta propiedad.
URL
string
Esta codificada.
file://D:\FORMAN%202003\curso%20javascript\ejercicios%20extra\vi sor%20de%20propiedades%20de%20objetos\visor.html
Esta propiedad es de LECTURA nada mas. Nos muestra la direccion del documento descodificada. URLUnencoded
string
file://D:\FORMAN 2003\curso javascript\e jercicios extra\visor de propiedades de objetos\visor.html
Es una referencia al objeto del documento que actualmente tiene el foco. Cuidado!!! Inicialmente esta a null!! Hasta que no se coloca el foco del documento en un objeto no podremos consultarlo. activeElement
object Ejemplo: <INPUT TYPE="text" NAME="caja1"> caja1.focus(); document.write(activeElement.name+ "<br>");
Representa al objeto body donde estn contenidos referencias a objetos y propiedades relativas al documento. Desde aqu podremos acceder a muchas de las propiedades que definimos en la etiqueta <body> y muchas mas como estas: Alto del scroll 2503 Este seria el alto real del documento Posicion del scroll horizontal 0 Posicion vertical del scroll 204 Ancho del scroll 1132 Alto del espacio del documento
scrollHeight body
object
number number number number number
scrollLeft scrollTop scrollWidth clientHeight
34/44
685 clientLeft clientTop clientWidth number number number 2 2 Ancho del espacio del documento 1132
cookie
string
Por medio de esta propiedad podemos mandar cookies (tikets) al cliente y posteriormente consultar los valores. Las cookies son valores que se quedan almacenados en el ordenador incluso cuando se cierra el documento.
Ver ejemplo de manejo de cookies

defaultCharset fileCreatedDate fileModifiedDate fileSize lastModified location title vlinkColor linkColor alinkColor fgColor bgColor Conjunto de caracteres utilizado por defecto.
string
windows-1252
string string string string object string string string string
Fecha de creacin del fichero : 10/18/2003 Fecha de ultima modificacin del fichero :10/20/2003 Tamao del fichero :1207 Fecha de ultima modificacin con la hora 10/20/2003 17:21:20 Otra referencia al objeto location tal como vimos en windows Titulo del documento:New Document Color de los enlaces visitados: #800080 Color de los enlaces ;#0000ff Color de los enlaces Activos: #0000ff Color del texto del documento
string
#000000
string
Color de fondo del documento
Vectores para acceso a los componentes:

links forms frames images applets
object object object object object
Vector con todos los enlaces Vector de todos los elementos formularios Vector de todos los elementos frame Vector de todas las imgenes del documento Vector que contiene las referencias a todos los applets del documento Vector que contiene a todos los elementos que existen en el documento: imgenes, formularios, enlaces, etc.. Cada uno de estos objetos tendr un conjunto de propiedades dependiendo del tipo de objeto que contenga.
all
object
Para ver las propiedades de cada objeto contenido podramos usar el iterador for(i in obj).
Ver ejemplo para visualizar el contenido de all[]:
35/44
mtodos:
Write(cadena) Writeln(cadena) Open() Close() Escribe en el documento Escribe en el documento con un salto de lnea Abre un nuevo documento (no ventana) Una vez cerrado el documento si lo abrimos se borra todo el contenido Cierra el documento y ya no se puede escribir en el
36/44
Acceso a los objetos por medio de su nombre
Los objetos especificados en el documento HTML estn presentes dentro del objeto Document. Todos estos objetos poseen un nombre que le definimos dentro de la etiqueta HTML por medio de la propiedad ID o NAME (mejor ID para mas compatibilidad). Para acceder a los elementos usamos el vector ALL[] en el Internet Explorer, el cual nos da acceso a todos los elementos dndole como ndice el nombre del elemento al que deseamos acceder. Document.all[miimagen] Los formularios,imagenes,enlaces, applets, frames son accesibles desde sus correspondientes vectores tambin:
Images[0] Forms[0] Links[0] Frames[0] Applets[0] Incluso, las imgenes, formularios, enlaces, frames, applets son accesibles directamente como si su nombre fuese una propiedad del objeto document. Document.miimagen
37/44
Objeto image
Este objeto representa a una imagen, cada etiqueta IMG genera un objeto de este tipo con el nombre indicado por el parmetro NAME de la etiqueta. Propiedades: src complete lowsrc Contiene la referencia al archivo que carga True si la imagen se ha cargado Imagen temporal de precarga
<HTML> <HEAD> <TITLE>Ejemplo de imagenes</TITLE> <SCRIPT LANGUAGE="JavaScript"> if (document.images) { var activado=new Image(); activado.src="imagenes\\9left.gif"; var desactivado= new Image(); desactivado.src="imagenes\\9right.gif"; } function activar(nombreImagen) { if (document.images) { document[nombreImagen].src=activado.src; } } function desactivar(nombreImagen) { if (document.images) { document[nombreImagen].src=desactivado.src; } } </SCRIPT> </HEAD> <BODY> <A HREF="mipagina.html" onMouseOver="activar('prueba');" onMouseOut="desactivar('prueba');"> <IMG NAME="prueba" SRC="imagenes\9right.gif" lowsrc="imagenes\index1.gif" BORDER=0> </A> <input type="button" onclick="infoimagen()" value=infoimagen> <SCRIPT LANGUAGE="JavaScript"> <!-function infoimagen() { alert("src" + prueba.src + "\n lowsrc" + prueba.lowsrc + "\n complete" + prueba.complete + "\n") } //--> </SCRIPT> </BODY> </HTML>
38/44
Elementos de formulario
Para acceder a un formulario podemos hacerlo de las siguientes formas:
Document.all[nombre formulario] Document.forms[nombreformulario]
Document.nombreformulario
Los mtodos tiles son:

Submit() -> enva los datos del formulario Reset() -> Resetea el formulario
Para acceder a cada uno de los elementos tenemos 2 formas:

Elements[nombre de elemento] ObjFormulario.nombreelemento
Objetos de formulario
Text Tanto a los : text, textArea, password, hidden.
Name
Type
Value
Checkbox
Type
Name Checked
Radio
Type Value
Name
Select
Name
Type SelectedIndex Options[]

Selected text
39/44
DOM Acceso a los elementos

Desde las versiones 5.0 de I.E. y la 6 del NE tenemos un mtodo de acceso al DOM unificado para los navegadores(en anteriores mtodos aun vigentes los div y los layer eran accesibles de distintas formas). Por este mtodo podremos crear nuevos elementos una vez concluida la carga del documento.
Un node es una referencia a un tag, sus atributos o el texto que contiene. Un element es una representacin de un <TAG>. Un attribute es un atributo de una etiqueta. HREF is an attribute of <A>, for example.
The DOM y compatibilidad de los navegadores

Para comprobar si este mtodo de acceso a los componentes es compatible con el navegador que estamos usando debemos realizar la siguiente comprobacin.
if (parseInt(navigator.appVersion) >= 5 || navigator.appVersion.indexOf["MSIE 5"] != -1) { // has dom support }

De forma similar a la expresin document.all[] tenemos esta forma de obtener una coleccin de todos los objetos del documento:
var docContents = document.getElementsByTagName("*");
Aadir un elemento al DOM

Aadir un elemento a un documento es muy simple. El primer paso es crear el nodo que deseas aadir, para ello usamos el mtodo createTextNode() para aadir texto o createElement() para aadir una etiqueta de algn elemento. Estos mtodos son del objeto document.
var txtNode = document.createTextNode("Hello. This is a new node.");
Lo siguiente es aadirle los atributos sobre le objeto nodo devuelto, para ello utilizamos el mtodo setAttribute() del objeto node.
var link = document.createElement('a'); link.setAttribute('href', 'mypage.htm'); link.setAttribute('name', 'myanchor');

40/44
Una vez resuelto la creacin del nodo que deseamos aadir solo nos queda aadirlo al arbol del documento. El documento es un arbol en el cual se representa todos los TAGS, atributos, y textos. El primer elemento sera el del documento (etiquetas <HTML> </HTML>) el cual como hijos tendra a 2 , la cabecera y el body. Cada uno de estos poseen a su vez mas hijos que representan cada uno de los elementos que hemos definido en el documento html.
Ahora vamos a insertar el elemento, por lo cual debemos de localizar en que elemento deseamos insertarlo, o sea, dentro de que componente insertamos el nuevo nodo. Por ejemplo, el elemento podra ser el body, o podra ser una celda de una tabla. Para acceder a cada objeto utilizamos el parmetro ID que tiene definido. El mtodo a usar es document.getElementById().
document.getElementById("myDiv")
Con esto obtendremos una referencia a un objeto concreto donde vamos a insertar nuestro nuevo nodo. Tambin podemos recorrer a mano el arbol de elementos que forman nuestro documento, para ello debemos conocer los siguientes conceptos y mtodos:
child
Los child de un elemento son los elementos que estn insertados (cuelgan) de el. Por ejemplo, todo lo que vemos en un documento html cuelga directamente o indirectamente de body. El contenido que vemos en una celda de una tabla cuelga de la celda, ...
document.childNodes[]
parent
El parent de un elemento es el elemento que lo contiene

document.parentNode[]
document.nextSibling[]
??
Aqu tenemos un ejemplo de como obtener un elemento del arbol de elementos:
<HTML> <HEAD> <TITLE>My Document</TITLE> </HEAD> <BODY BGCOLOR="red"> <DIV ID="myDiv"></DIV> </BODY> </HTML>
Para acceder a myDiv podemos hacer lo siguiente
document.childNodes[1].childNodes[0] "encuentra el documento principal (HTML), y busca su segundo hijo(BODY), luego busca el 1 hijo de body (DIV)"
41/44
OR document.childNodes[0].nextSibling.childNodes[0] "encuentra el documento principal (HTML), y encuentra su primer elemento(HEAD), luego busca el siguiente de head (BODY), y buscamos el primer hijo (DIV)" - Una vez localizado el elemento el cual sera el parent del objeto que deseamos aadir utilizamos el mtodo appendChild(miNuevoObj) para aadirlo a su lista de hijos: var txt = document.createTextNode(" This text was added to the DIV."); document.getElementById('myDiv').appendChild(txt);
- Este mtodo aade el nodo al final de todos los hijos, si lo que deseamos es aadir el elemento en una posicion concreta basta con usar el mtodo insertBefore(miobjeto,objHijoYaExistente);
insertBefore(txt,document.getElementById('myDiv').firstChild); Este ejemplo inserta nuestro nodo de texto justo delante del otro objeto indicado como parmetro.
42/44
Hiding/ showing elements
Podemos mostrar y ocultar cualquier nodo por medio del estilo de los componentes, en concreto la propiedad display.
Obj.style.display=none -> vuelve invisible Obj.style.display= -> se ve
document.childNodes[1].childNodes[1]. childNodes[0].style.display = "none";
Esta funcin es la que utilizaremos para ocultar y mostrar cualquier objeto.
function HideShow(obj) { if (parseInt(navigator.appVersion) >= 5 || navigator.appVersion.indexOf["MSIE 5"] != -1) { if (obj.style.display=="none") obj.style.display=""; else obj.style.display="none"; } }
43/44
Animation
Para mover objetos por la pantalla debemos utilizar los valores de estilo top y left: obj.style.top obj.style.left Estas propiedades poseen valores de textos con las unidades 10px.La funcin para mover los objetos seria la siguiente:
function MoveBy(obj,x,y) { if (parseInt(navigator.appVersion) >= 5 || navigator.appVersion.indexOf["MSIE 5"] != -1) { obj.style.left = parseInt(obj.style.left) + x; obj.style.top = parseInt(obj.style.top) + y; } }
Este ejemplo movera una imagen por la pantalla:
MoveBy(document.getElementById('myImg'), -5, 0);
El siguiente caso fuerza a que el posicionamiento sea absoluto:
function MoveTo(obj,x,y) { if (parseInt(navigator.appVersion) >= 5 || navigator.appVersion.indexOf["MSIE 5"] != -1) { obj.style.position = "absolute"; var units = (MoveTo.arguments.length > 3) ? MoveTo.arguments[3] : "px"; obj.style.left = x + units; obj.style.top = y + units; } } function MoveIMG() { imgOb = document.getElementById("myImg"); MoveBy(imgOb, 1, 0); if (parseInt(imgOb.style.left) < 200) setTimeout("MoveIMG()", 100); }
44/44

Guia Curso Javascript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Guia Curso Javascript

Uploaded by

Copyright:

Available Formats

Curso JavaScript : Gua de clase

Gua de Clase para el curso JavaScript

Curso JavaScript : Gua de clase

Caractersticas del lenguaje

Curso JavaScript : Gua de clase

Curso JavaScript : Gua de clase

Muestra una ventana con el texto pasado por parmetro.

Curso JavaScript : Gua de clase

Estructura bsica de los Scripts

En lo referente a como escribir ese cdigo, tenemos 3 opciones:

Curso JavaScript : Gua de clase

Elementos bsicos del lenguaje.

Caracteres especiales dentro de las cadenas de texto

Curso JavaScript : Gua de clase

document.write( typeof( mivar)); mbito de las variables.

x=1; // Global y=2; // Local, al estar redefinida internamente z=3; // Local }

Referencias. Una variable puede referenciar a objetos y funciones:

Curso JavaScript : Gua de clase

Pero tambin es posible utilizar ndices de tipo texto:

Para acceder a cada posicion de la matriz utilizamos 2 ndices en vez de 1:

Curso JavaScript : Gua de clase

Aritmticos Operador Atajo x+=1 + x++

Descripcin Suma Resta

x-=1 x x*=1 x/=1 x%=1

=== Multiplicacin Division Resto !== < > <= >=

Condicion?valor1:valor2 A=2>3?1:2; Es equivalente a: If (2>3) a=1; Else a=2;

New Delete this

Curso JavaScript : Gua de clase

Iteramos 0 o mas veces while (condicin) { Instr1; Instr2; ... }

Iteramos 1 o mas veces do {

Acceso a propiedades de obj. with obj { prop1 = valor; prop2 = valor; }

Instr1; Instr2; ...

Curso JavaScript : Gua de clase

Curso JavaScript : Gua de clase

function miobjeto(p1,p2,p3,p4) { this.mipropiedad1=p1; this.mipropiedad2=p2; this.mipropiedad3=p3; this.mipropiedad4=p4;

Ejemplo de inicializacin y uso del objeto:

Curso JavaScript : Gua de clase

function miobjeto(p1,p2,p3,p4,p5) { this.mipropiedad1=p1; this.mipropiedad2=p2; this.mipropiedad3=p3; this.mipropiedad4=p4; this.mipropiedad5=p5;

Curso JavaScript : Gua de clase

Objetos predefinidos del lenguaje.

Curso JavaScript : Gua de clase

getDate() setDate(numDia) getHours() setHours(hora) getMinutes() setMinutes(minuto) getSeconds()

Curso JavaScript : Gua de clase

Curso JavaScript : Gua de clase

Curso JavaScript : Gua de clase

Curso JavaScript : Gua de clase

NaN MAX_VALUE MIN_VALUE

NEGATIVE_INFINITE -infinito POSITIVE_INFINITE + infinito

Curso JavaScript : Gua de clase

Curso JavaScript : Gua de clase

fontcolor(color) fontsize(tamao) italics() link(direccionWeb)

small() strike() sup() sub()

Curso JavaScript : Gua de clase

Manejadores de eventos en JavaScript

Curso JavaScript : Gua de clase

Cuando un componente obtiene el foco de la aplicacin. ONFOCUS Ejemplo:

Al pulser la tecla ONKEYDOWN Ejemplo:

Al dejar pulsada la tecla (despus de onkeydown) ONKEYPRESS Ejemplo:

Al soltar la tecla ONKEYUP Ejemplo:

Cuando el documento o una imagen ha terminado de cargarse ONLOAD Ejemplo:

Cuando se pulsa sobre algn elemento ONMOUSEDOWN Ejemplo:

Cuando movemos el ratn sobre algn elemento ONMOUSEMOVE Ejemplo:

Cuando sacamos el puntero del ratn de un objeto ONMOUSEOUT Ejemplo:

Curso JavaScript : Gua de clase