Conceptos generales

JavaScript es Case Sensitive, es decir, diferencia entre maysculas y minsculas, por lo cual habr que tener mucha precaucin a la hora de escribir las expresiones. Se pueden escribir comentarios: cuando son de una linea bastar precederlos de "//", cuando son de ms de una lnea se escribirn entre "/*" y "*/". Tras cada orden de JavaScript va un ";", cuando son varas rdenes se pueden agrupar, escribindolas entre "{" y "}". Expresiones JavaScript Se componen de operadores, variables y constantes. Operadores Los ms comunes son: Operador Explicacin + adicin ( o concatenacin en el caso de cadenas) substraccin * multiplicacin / divisin = igual (slo para asignar un valor a una variable) ++ incremento -decremento > mayor que < menor que >= mayor o igual que <= menor o igual que == igual a (compara dos valores) != distinto de (compara dos valores) && y (une dos comparaciones) || o (una u otra comparacin) Constantes Se trata de bloques de datos (cadenas, nmeros) que JavaScript interpreta literalmente. Las cadenas numricas se escriben tal cual, mientras que las de cadenas se escriben entre comillas dobles o sencillas. Por ejemplo: x = 25 a = "Hola, qu tal" Variables Se trata de una palabra sin comillas que se puede utilizar para almacenar valores. Los nombres asignados a las variables deben comenzar siempre por una letra y no pueden contener espacios en blanco. Se puede utilizar el parmetro var antes del nombre de la variable para indicar que se est creando una nueva variable. Por ejemplo: var a indicara que se ha creado la variable a. No obstante en JavaScript no es preciso crear la variable, sino que al asignarle un valor se crear automticamente. En el ejemplo usado en el apartado anterior de constantes hemos creados 2 variables, cuyos nombre son "x" y "a" y cuyos valores son 25 y la expresin "Hola qu tal", respectivamente. Objetos JavaScript Javascript es un lenguaje orientado a objetos, es decir, podr manejar diferentes objetos, tales como: la pantalla, la ventana, el documento, las etiquetas, los formularios. Cada uno de estos objetos tienen una serie de caractersticas, a las que llamaremos propiedades. Adems cada objeto podr realizar toda una serie de cosas, a las que llamaremos mtodos. Para hacer referencia a una propiedad se utiliza la sintxis: nombredeobjeto.propiedad y para hacer referencia un mtodo se utiliza la misma sintxis aunque suele acabar con una apertura y cierre de parntesis: nombredeobjeto.metodo(). A continuacin hay una relacin muy somera de los objetos que puede manejar JavaScript. Su uso especfico se ver en los diferentes scripts de estos manuales. Objeto documento (document): Hace referencia a la pgina que se est visualizando en ese momento. Algunas de sus propiedades son: bgColor (color del fondo), fgColor (color del texto), linkColor, alinkColor y vlinkColor (color de los vnculos), location (la URL del documento), lastModified (ltima modificacin), title (ttulo de la pgina), links (enlaces del documento).

Algunos de sus mtodos son: clear, close (cerrar), open (abrir), write (escribir) Ejemplos: document.write ("Hola, buenas tardes"). Escribir la cadena Hola, buenas tardes. document.links.length. Mostrar el nmero de enlaces que tiene este documento. document.links[1].href. Mostrar la URL del segundo enlace (la numeracin comienza por 0). document.lastModified. Escribir la fecha y hora en que este documento se modific por ltima vez. Objeto cadena (string): Hace referencia a la pgina que se est visualizando en ese momento. Algunas de sus propiedades son: length (longitud de la cadena). Algunos de sus mtodos son: Para formatear: bold, blink, big, small, fontcolor, fontsize, italics, strike, sub, sup, toLowerCase, toUpperCase. Otros: indexOf (contenido en la cadena), charAt(x) (representa el caracter nmero x de la cadena) Ejemplos: nombre = "Juan Prez". Crea la variable nombre y le asigna la cadena "Juan Prez". document.write (nombre.toUpperCase). Escribir JUAN PREZ. document.write (nombre.charAt(2)). Escribir "a", es decir, la tercera letra de la cadena. Objeto fecha (date): Hace referencia a la pgina que se est visualizando en ese momento. No tiene propiedades y algunos de sus mtodos son: getDate (slo la fecha), getDay (el da), getMonth, getHours, getMinutes, getSeconds Ejemplos: fecha = new date(). Crea una variable llamada fecha, en la que se almacena la fecha y hora actual Objeto pantalla (screen): Contiene la informacin sobre la pantalla que usa el navegador. Algunas de sus propiedades son: colorDepth (nmero de bits de colores en uso), height (altura de la pantalla en pixels), pixelDepth (nmero de bits por pixel), width (anchura de la pantalla en pixels). Ejemplos: document.write ("Ests viendo la pgina con una resolucin de "+width+"*"+height+" pixels". Escribir la resolucin. if (width<700 && height<500) alert ("Estas pginas estn optimizadas para una resolucin de 800*600 pixels y tu tienes una configuracin inferior. \n Por favor, cambia tu configuracin"). En el caso de que la resolucin de la pantalla sea inferior a 700*500 saldr una ventana de alerta con el mensaje que hayamos escrito. if (width<700 && height<500) location.href="paginapeque.htm" else location.href="paginagrande.htm". Mostrar una pgina u otra segn que la resolucin sea inferior o mayodr de 700*500. Otros objetos: ancla (anchor): contiene una lista de todas las seales (A NAME) de ese documento. Objetos para formularios: botn (button), casilla de verificacin (checkbox), borrar (reset), enviar (submit), seleccionar (select), password. formularios (forms): contiene una lista de todos los formularios de ese documento. ventana (window): es el de ms alto nivel y tiene numerosas propiedades y mtodos para trabajar con l. Algunos de sus mtodos son: open('nombre_pgina','nombre_ventana','propiedades:width, height, top, left, ...'), close (para cerrar la ventana), print (para imprimir la ventana), ... Entre sus propiedades tenemos: defaultStatus (para configurar el mensaje por defecto de la barra de estado), status (mensajes en la barre de estado), ... localizacin (location): contiene informacin sobre la URL de la pgina en uso en ese momento. historia (history): contiene una lista de todos los elementos del historial del navegador. A travs de los mtodos Back, Forward y Go podremos desplazarnos por ellos. navegador (navigator): contiene informacin sobre el navegador que usamos para ver la pgina, a travs de propiedades como: appName, appVersion, ... matematicas (math): se trata de un objeto predifinido de JavaScript con numerosas propiedades y mtodos para manejar datos y funciones numricas. marco (frame): contiene una lista de todos los marcos que se muestran en ese momento en la pantalla. Permite desplazarse por ellos, abrir nuevos, ... matrices (array):

Parmetros JavaScript Permiten construir bucles dentro de un script para que ciertos comandos se ejecuten varias veces, condicionales para decirle en qu condiciones queremos que se ejecute. A continuacin algunos de ellos: Parmetro Descripcin Ejemplo

Condicionales if (condicin) {cdigo} Ejecuta el cdigo slo si la condicin es verdadera if (navigator.appName == "Netscape") { document.write ("Bienvenido/a. Usas Netscape") }

if (condicin) {cdigo1} else {condicion2}

Ejecuta el cdigo1 si la condicin if (navigator.appName es verdadera, y en caso contrario, == "Netscape") { document.write el codigo2. ("Bienvenido/a. Usas Netscape") else document.write ("Bienvenido/a. Usas Explorer") } Si la condicin es verdadera, devuelve el valor1, si es falsa devuelve el valor2. ns4 = (document.layers)? true:false ie4 = (document.all)? true:false

(condicin) ? valor1:valor2

Bucles for(inicio, mientras, Establece un bucle con un incremento) {cdigo} contador que comenzar con el valor definido en inicio y que se ir incrementando con el valor definido en incremento. El cdigo se ejecutar si la condicin definida en mientras se cumple. while(condicin) {cdigo} Repite el cdigo mientras que la condicin sea verdadera. for(x=1;x<6;x++){ document.write("Hola "+x)} Probar

respuesta=""; while(respuesta != "Gracias"){ respuesta = prompt ("Bienvenido/a. Se educado/a","") } alert ("Muy bien"); Probar

break

Finaliza el bucle y ejecuta el primer parmetro posterior al bucle. Vuelve a ejecutar el principio del bucle.

continue

Manipulacin de objetos this with (objeto) {cdigo} Hace referencia al objeto activo o al mencionado en el mtodo. Especifica cul es el objeto a utilizar cuando se ejecute el

cdigo. Varios Crea una funcin personalizada function nombre(argumentos) con el nombre que se haya {cdigo} especificado. Se pueden (es opcional) usar argumentos listndolos separados por comas. Al llamar a la funcin se ejecutar el cdigo establecido. return valor Finaliza una funcin personalizadad y devuelve un valor al cdigo que invoca la funcin. Crea una nueva variable con el nombre que se especifique. En JavaScript no es imprescindible crear una variable de esete modo para poderla usar. var Apellidos Apellidos=Cascn function escribir(){ document.write("hola"); document.write("Cmo ests?")}

var nombre

Eventos en JavaScript Es la forma de decirle a JavaScript cundo tiene que llevar a cabo una accin: Evento Descripcin

onClick onChange onFocus onBlur onMouseOver onMouseOut onSelect onSubmit onLoad onUnLoad HREF:javascript

Se ejecuta cuando se pulsa con el botn izquierdo del ratn. Se ejecuta cuando se modifica el contenido de un input en un formulario. Se ejecuta cuando se situa el cursor de insercin dentro de un elemento de un formulario. Se ejecuta cuando se situa el cursor de insercin fuera de un elemento de un formulario. Se ejecuta cuando se pone el puntero del ratn sobre l (sin apretar). Se ejecuta cuando el puntero del ratn nos lo llevamos de un zona sensible (por ejemplo, un enlace). Se ejecuta cuando se selecciona un elemento de una lista en un formulario. Se ejecuta cuando se hace clic sobre el botn de enviar en un formulario. Se ejecuta cuando se abre por primera vez una pgina. Se ejecuta cuando se sale de la pgina activa. Se ejecuta cuando se hace clic sobre un enlace, pudiendo poner una referencia a una funcin o expresin de javascript .

Funciones integradas Funcin Descripcin

eval (cadena)

Ejecuta el resultado de la cadena como si fuera una

expresin. isNan (valor) escape (cadena) parseFloat (cadena) parseInt (cadena[,base]) Si no es un nmero da verdadero; si es un numero da falso. Visualiza la cadena sin las etiquetas de HTML. Convierte una cadena en un nmero real de coma flotante. Convierte una cadena en un nmero entero. Se puede poner, como segundo argumento, un valor que indica en qu sistema numrico se quiere (decimal=10, hexadecimal=8,...). Por defecto, ser en base 10.

Texto fijo de un enlace en la barra de estado Consta de dos partes: 1) Poner un texto fijo por defecto: en la zona de la cabecera (HEAD), podemos escribir la siguiente orden: window.defaultStatus="" Entre las comillas podemos escribir algo o dejarlo vacio, segn lo que queramos que aparezca por defecto en la barra de estado cuando no estamos sobre algn vnculo. 2) Poner textos en la barra al posicionarse sobre un vnculo:normalmente cuando pasamos con el cursor del ratn por encima de un vnculo vemos que aparece en la barra de estado del navegador (en la parte inferior de la pantalla) la URL o direccin del vnculo. Si queremos que aparezca un texto concreto podemos utilizar como parmetro de la directiva <A HREF> el evento de javascript: onMouseOver="window.status='Aqu el texto que se quiera';return true;" Por ejemplo: <A HREF="http://www.pangea.org" onMouseOver="window.status='Pgina principal de Pangea';return true;">Pangea</A> Texto mvil en la barra de estado A continuacin tienes el cdigo completo de una funcin JavaScript muy utilizada, que muestra varios mensajes desplazndose por la barra de estado del navegador. Si queremos que se active al cargar la pgina, en el BODY habr que aadir el parmetro JavaScript Onload="nombre_de_la_funcin();" <SCRIPT LANGUAGE="JavaScript"> <!-- Comienza JavaScript ------------------var txt= "Esta es una prueba de texto en movimiento " + "en la barra de estado" + " " ; function scroll() { window.status = txt; txt = txt.substring(1, txt.length) + txt.charAt(0); window.setTimeout("scroll()",150); } // -- Fin de JavaScript -------------- --> </SCRIPT>

Verificar si un dato es numrico

Una de las opciones ms tiles que se puede desarrollar con JavaScript es la de la creacin de controles de validacin para los formularios, sin necesidad de crear y colocar en nuestro servidor un CGI. Estos controles pueden comprobar si el campo esta vaco o no, as como si su contenido es texto, nmeros, direcciones de correo electrnico, etc. Veamos algunos ejemplos: La siguiente funcin permite verificar si lo que escribimos en el campo, en este caso "Edad", es numrico o no. En el caso de que no se un nmero, borrar el contenido y se colocar en el campo para volver a escribir. function validar(form) { valor = parseInt(form.edad.value, 10); //convierte cadenas de texto a nmeros en el sistema numrico que le digamos if (isNaN(valor)) //el mtodo "isNaN" comprueba si el valor No es un nmero { alert ("Edad incorrecta"); form.edad.value=" "; //borra lo escrito en el campo edad form.edad.focus(); //nos coloca en el campo edad para escribir return false; } else return true; }

Verificar si un campo queda vaco La siguiente funcin permite verificar si dejamos el campo (en este caso "nombre") vaco, en cuyo caso saldr un mensaje alertando de que es obligatorio escribir algo y se posicionar en dicho campo. function valido(form) { if (form.nombre.value == "") //comprueba si el campo nombre esta vaco { alert ("No puedes dejarlo vaco"); form.nombre.focus(); //posicionarse en el campo vaco return false; } else return true; }

Apertura de una ventana dimensionable A veces nos puede interesar abrir una nueva ventana (de las dimensiones que queramos) en la que aparezca otra pgina web con una informacin concreta, que el usuario puede cerrar, o dejar permanentemente abierta mientras navega por otras pginas. La creacin de una ventana de este tipo se consigue con la siguiente rutina de Javascript, que como siempre, se deber colocar en la cabecera del documento HTML: <SCRIPT LANGUAGE="JavaScript"> <!-function nueva() { open('ventana.html', 'Sizewindow', 'width=300,height=350,scrollbars=no,toolbar=no') } //--> </SCRIPT> Esto har que se cargue una ventana, cuyo contenido es un documento HTML que habremos creado, llamado ventana.html, sin barras de scroll ni de herramientas, y de unas dimensiones de 300 de ancho por 350 de alto. Se pueden variar las dimensiones, as como las partes de la ventana que queremos que se vean o no, a travs de los siguientes parmetros: scrollbars (barra de desplazamiento), toolbar (barra de herramientas), directories, status (barra de estado), menubar (barra de herramientas), location (barra de direcciones), resizable (permitir que se redimensiona). En todos los casos poner =1 o 0 o bien =yes o no. Funciones con argumentos para abrir diversas ventanas Para poder usar la misma funcin en varios casos en la misma pgina ser mejor poner argumentos que nos permitan decir cada vez que la llamemos, la pgina que queremos ver. function abrir(ventana,nombre) { hola=window.open(ventana,nombre,'width=300,height=200,left=300,top=100,statusbar =yes'); //Asigna la ventana que se abre a la variable hola para poder manejarla en otros eventos hola.focus() //Hace que la ventana que se abre sea la activa (lleva el foco) } Podemos llamarla con cualquier evento, poniendo los argumentos pgina y nombre de ventana. Por ejemplo: onMouseOver="abrir('prueba7.htm','nueva')" para abrirla. El haber asignado la ventana a una variable, en esta caso hola nos permite incluso cerrarla o escribir en ella. Por ejemplo: onMouseOut="hola.close() para cerrarla y hola.document.write('Hola')" para escribir en ella. Podemos usar argumentos que permitan incluso definir el tamao y posicin: function abrir(ventana,nombre,a,b,c,d) { e='width='+a+',' f='height='+b+',' g='screenx='+c+',' h='screeny='+d+',' hola=window.open(ventana,nombre,e+f+g+h); hola.focus() }

Precargar imgenes
Las siguientes rdenes de JavaScript 1.2 (slo las reconocern las versiones 4 de ambos navegadores) nos permitirn cargar diferentes imgenes. Eso har que estn en el cach, apareciendo ms rpido cuando luego las llamemos. Para ello usaremos el siguiente cdigo: <script language="JavaScript"> <!-if (document.images){ foto1 = new Image(); foto1.src = "nombreimagen.gif"; foto2 = new Image(); foto2.src = "nombreimagen.gif"; } //--> </script> Habra que escribir tantos pares de lneas como imgenes queramos cargar. Cuando son muchas las imgenes a precargar ser ms fcil hacer lo siguiente: <script language="JavaScript"> <!-function precargar(imagen,origen) { eval(imagen+' = new Image()') eval(imagen+'.src = "'+origen+'"') } //--> </script> En donde "imagen" es el nombre del objeto asociado con la imagen, y "origen" la URL de la imagen. Para usarla usaremos el siguiente cdigo. por ejemplo: precargar ('imagen1','imagen1.gif') precargar ('imagen2','imagen2.gif')

<HTML><HEAD><TITLE>Using "onMouseOver"</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> <SCRIPT language=JavaScript> <!-- Beginning of JavaScript function changecolor(code) { document.bgColor=code } // - End of JavaScript - --> </SCRIPT> <META content="Microsoft FrontPage 4.0" name=GENERATOR></HEAD> <BODY bgColor=#ffffff> <CENTER> <H1>Evento "onMouseOver"</H1></CENTER> <HR>

<P>Uso del evento "onMouseOver" para cambiar el color de fondo moviendo el ratn sobre la imagen</P> <A onmouseover="changecolor('ffffff')" href="http://www."> <IMG height=20 hspace=10 src="Using_onMouseOver_archivos/white.gif" width=20 vspace=10> </A> <A onmouseover="changecolor('ff0000')" href="http://www."> <IMG height=20 hspace=10 src="Using_onMouseOver_archivos/red.gif" width=20 vspace=10> </A> <A onmouseover="changecolor('ffff00')" href="http://www."> <IMG height=20 hspace=10 src="Using_onMouseOver_archivos/yellow.gif" width=20 vspace=10> </A> <A onmouseover="changecolor('009900')" href="http://www."> <IMG height=20 hspace=10 src="Using_onMouseOver_archivos/green.gif" width=20 vspace=10> </A> <A onmouseover="changecolor('0000ff')" href="http://www."> <IMG height=20 hspace=10 src="Using_onMouseOver_archivos/blue.gif" width=20 vspace=10> </A> <HR> </BODY> </HTML>