Está en la página 1de 10

Javascript

Javascript es un lenguaje de programacin utilizado para crear pequeos programitas encargados de realizar acciones dentro del mbito de una pgina web. Se trata de un lenguaje de programacin del lado del cliente, porque es el navegador el que soporta la carga de procesamiento. Gracias a su compatibilidad con la mayora de los navegadores modernos, es el lenguaje de programacin del lado del cliente ms utilizado. Con Javascript podemos crear efectos especiales en las pginas y definir intera ctividades con el usuario. El navegador del cliente es el encargado de interpretar las instrucciones Javascript y ejecutarlas para realizar estos efectos e interactividades, de modo que el mayor recurso, y tal vez el nico, con que cuenta este lenguaje es el propio navegador. Javascript es el siguiente paso, despus del HTML, que puede dar un programador de la web que decida mejorar sus pginas y la potencia de sus proyectos. Es un lenguaje de programacin bastante sencillo y pensado para hacer las cosas con rapidez, a veces con ligereza. Incluso las personas que no tengan una experiencia previa en la programacin podrn aprender este lenguaje con facilidad y utilizarlo en toda su potencia con slo un poco de prctica. Entre las acciones tpicas que se pueden realizar en Javascript tenemos dos vertientes. Por un lado los efectos especiales sobre pginas web, para crear contenidos dinmicos y elementos de la pgina que tengan movimiento, cambien de color o cualquier otro dinamismo. Por el otro, javascript nos permite ejecutar instrucciones como respuesta a las acciones del usuario, con lo que podemos crear pginas interactivas con programas como calculadoras, agendas, o tablas de clculo. Javascript es un lenguaje con muchas posibilidades, permite la progra macin de pequeos scripts, pero tambin de programas ms grandes, orientados a objetos, con funciones, estructuras de datos complejas, etc. Adems, Javascript pone a disposicin del programador todos los elementos que forman la pgina web, para que ste pueda acceder a ellos y modificarlos dinmicamente. Con Javascript el programador, que se convierte en el verdadero dueo y controlador de cada cosa que ocurre en la pgina cuando la est visualizando el cliente.

Ejercicio No. 1 Ahora quisiera mostrar algunos pequeos scripts, de modo que usted pueda aprender de que modo estos son implementados dentro de los documentos de HTML y mostrar con que posibilidades se cuenta en este nuevo lenguaje script. Comenzar con un script muy pequeo el cual solo mostrar texto dentro de un documento HTML. <html> <head> Mi primer JavaScript! </head> <body> 1

<br> Este es documento normal en HTML. <br> <script language="LiveScript"> document.write("Esto es JavaScript!") </script> <br> Otra vez en HTML. </body> </html> Resultado: Este es un documento normal en HTML. Esto es JavaScript! Otra vez en HTML. Debo admitir que este script no es muy funcional. Usted puede escribir eso en HTML mucho ms rpido y corto. Pero lo que yo quera mostrar es como se deben usar los tags <script>. Usted puede usar estos tags en su documento en el lugar que desee.

Ejercicio No. 2 Las funciones son invocadas por eventos iniciados por el usuario. Por esto parece razonable mantenerlas dentro de los tags <head>. Ellos son cargados antes de que el usuario pueda hacer algo que llame una funcin. Los scripts pueden ser ubicados como comentario para asegurarse de que los browsers obsoletos no muestren el script por si solos. <html> <head> <script language="LiveScript"> function pushbutton() { alert("Hola!"); } </script> </head> <body> <form> <input type="button" name="Button1" value="Presineme" onclick="pushbutton()"> </form> </body> </html> Este script crear un botn que cuando es presionado muestra una ventana diciendo 'Hola!'. Qu est sucediendo en este script? Primero la funcin se carga y es guardada en memoria. Entonces un botn es hecho con el tag normal <form> (HTML). Hay algo completamente nuevo con el tag <input>. All puede ver 'onclick'. Esto le dice al browser que funcin tiene que invocar cuando este botn es presionado (logicamente si el browser es compatible con JavaScript). La funcin 'pushbutton()' se aclara en el encabezado (<head>). Cuando el botn es presionado esta funcin se ejecuta. Existe otra cosa nueva en este script el mtodo 'alert'. Esto mtodo ya es declarado en JavaScript- solo se necesita invocarlo. Existen muchos mtodos diferentes los cuales se pueden invocar Ejemplo No.3 El ejemplo usa JavaScript llamando la funcin 'alert'. Usa el mtodo 'onMouseOver' y la funcin hello() es invocada cuando este evento ocurre. Aqu est la fuente: <html> <head> <script language="LiveScript"> <!-- Escondemos la funcion function hello() { alert("Hola!"); } // --> </script> </head> <body> <a href="" onMouseOver="hello()">link</a> </body> </html> 3

Ejercicio No.4 Hola, mundo Vamos a realizar nuestro primer "programa" en JavaScript. Haremos surgir una ventana que nos muestre el ya famoso mensaje "hola, mundo". As podremos ver los elementos principales del lenguaje. El siguiente cdigo es una pgina Web completa con un botn que, al pulsarlo, muestra el mensaje. <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- Se usan los comentarios para esconder el cdigo a navegadores sin JavaScript function HolaMundo() { alert("Hola, mundo!"); } // --> </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" NAME="Boton" VALUE="Pulsame" onClick="HolaMundo()"> </FORM> </BODY> </HTML> Y aqu est nuestro ejemplo funcionando: Ahora vamos a ver, paso por paso, que significa cada uno de los elementos extraos que tiene la pgina anterior: <SCRIPT LANGUAGE="JavaScript"> </SCRIPT> Dentro de estos elementos ser donde se puedan poner funciones en JavaScript. Puedes poner cuantos quieras a lo largo del documento y en el lugar que ms te guste. Yo he elegido la cabecera para hacer ms legible la parte HTML de la pgina. function HolaMundo() { alert("Hola, mundo!"); } Esta es nuestra primera funcin en JavaScript. Aunque JavaScript est orientado a objetos no es de ningn modo tan estricto como Java, donde nada esta fuera de un objeto. Para las cosas que se van a hacer, no vamos a crear ninguno, pero usaremos los que vienen en la descripcin del lenguaje. En el cdigo de la funcin vemos una llamada al mtodo alert (que pertenece al objeto window) que es la que se encarga de mostrar el mensaje en pantalla. <FORM> <INPUT TYPE="button" NAME="Boton" VALUE="Pulsame" onClick="HolaMundo()"> </FORM> 4

Dentro del elemento que usamos para mostrar un botn vemos una cosa nueva: onClick. Es un evento. Cuando el usuario pulsa el botn, el evento onClick se dispara y ejecuta el cdigo que tenga entre comillas, en este caso la llamada a la funcin HolaMundo(), que tendremos que haber definido con anterioridad. Existen muchos ms eventos que iremos descubriendo segn avancemos. En el ltimo cpitulo hay un resumen de todos ellos. En realidad, podramos haber escrito lo siguiente: <FORM> <INPUT TYPE="button" NAME="Boton" VALUE="Pulsame" onClick="alert('Hola,Mundo!')"> </FORM> y nos habramos ahorrado el tener que escribir la funcin y todo lo que le acompaa. Sin embargo me pareci conveniente hacerlo del otro modo para mostrar ms elementos del lenguaje en el ejemplo.

Ejercicio No. 5 Ahora le mostrar como puede leer algo que un usuario haya insertado en una forma. <html> <head> <script language="LiveScript"> <!-- esconde el script de viejos browsers function getname(str) { alert("Hola "+ str+"!"); } // end hiding contents --> </script> </head> <body> Por favor, escriba su nombre: <form> <input type="text" name="name" onBlur="getname(this.value)" value=""> </form> </body> </html>

Ahora puede probar este script de nuevo:

Por favor escriba su nombre:

Otra vez tenemos nuevos elementos implementados en este script. Primero usted habr notado el comentario en el script. De esta forma se puede esconder el script de los browsers obsoletos que no ejecutan scripts. Usted debe seguir el orden mostrado! El principio del 5

comentario debe estar justo despus del primer tag <script>. El comentario termina justo antes del <script> tag. En este documento HTML usted tiene una forma donde el usuario puede escribir su nombre. El 'onBlur' en el tag <input> le dice al programa cliente que funcin es la que tiene que invocar cuando algo se introduce en esta forma o casilla. La funcin 'getname(str)' ser invocada cuando usted deja en blanco esta forma ('leave') o presiona 'enter' sin haber escrito nada. La funcin tomar el 'string' usted escribi a travs del comando 'getname(this.value)'. 'This.value' significa el valor que usted escribi en la forma. Ejercicio No.6 Ventanas
La creacin de ventanas es una gran caracterstica de JavaScript. Se pueden cargar ventanas nuevas con documentos HTML en ellas. Navegar por Internet todo con JavaScript. Voy a mostrarle como podemos abrir una nueva ventana y escribir algo en ella. Aqu est la fuente: <html> <head> <script language="LiveScript"> function WinOpen() { msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no"); msg.document.write("<HEAD><TITLE>Que bien!</TITLE></HEAD>"); msg.document.write("<CENTER><h1><B>Esto es una elegancia!</B></h1></CENTER> "); } </script> </head> <body> <form> <input type="button" name="Boton1" value="Push me" onclick="WinOpen()"> </form> </body> </html> Como usted siempre puede ver el botn que invoca la funcin. La funcin WinOpen() crea una nueva ventana invocando el mtodo open. Las primeras comillas contienen la URL de la pgina. Aqu puede poner la direccin del documento que quiere cargar. Si lo deja vaco ninguna pgina se carga, pero puede escribir en ella con JavaScript! Las siguientes comillas especifican el nombre de la ventana, aqu puede escribir lo que quiera, esto no tiene ningn efecto en nuestros ejemplos por ahora. Pero recibir un mensaje de error cuando escriba Display Window (con un espacio entre ambas palabras - Netscape le dice algo diferente en su informacin - pero estuve sentado media hora y no logr encontrar ningn error!). Las comillas siguientes especifican las propiedades de la ventana. Esto es realmente interesante! usted puede decir si quiere barras de herramientas, barras de desplazamiento... Si escribe toolbar=yes entonces tendr barra de herramientas en su ventana. Algunas propiedades que puede cambiar aparecan abajo. Se puede especificar cada cosa posible, solo tiene que escribirla como le mostr y sin espacios entre ellas. Aqu est lo que se le puede cambiar a la pgina: toolbar location directories status menubar scrollbars resizable copyhistory

width=pixeles height=pixels Para pixeles tiene que escribir el nmero de pixeles. De esta forma le puede decir al browsers que tan grande debe ser la ventana. Despus de que haya abierto la ventana y llamado su msg (aparece al frente del mtodo 'open'), puede escribir en ella. Se puede escribir cdigo HTML! esta es una cosa fabulosa. Se puede construir un documento HTML usando la entrada de una forma dada en el documento anterior. Usted puede hacer una pgina donde un usuario tenga que escribir su nombre en una 'forma', entonces un nuevo documento HTML es creado conteniendo su nombre.

Ejercicio No. 7. Crear Ventanas Este ejemplo muestra la posibilidad de abrir nuevas ventanas de nuestro navegador con JavaScript. Se llama a la funcin AbrirVentana desde el evento onClick, como ya sabemos hacer desde el primer eje mplo. Esta funcin crea la nueva ventana MiVentana y escribe en ella por medio del objeto document todo el cdigo HTML de la pgina. <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function AbrirVentana() { MiVentana=open("","MiPropiaVentana","toolbar=no,directories=no,menubar=no,status=ye s"); MiVentana.document.write("<HEAD><TITLE>Una nueva ventana</TITLE></HEAD>"); MiVentana.document.write("<CENTER><H1><B>Esto puede ser lo que tu quieras</B></H1></CENTER>"); } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" NAME="Boton1" VALUE="Abreme, Ssamo" onClick="AbrirVentana()"> </FORM>

Ejercicio No. 8 Tratamiento de Imgenes Lo que vamos a lograr con este truco es un pequeo cambio de imgenes. El ejemplo de lo que vamos a hacer lo tienes en el ndice de la izquierda. Al pasar el ratn por encima de una opcion podrs observar que el grfico cambia. Para hacer esto deberemos crear dos grficos distintos: el que se ver normalmente y el que nicamente podr verse cuando el ratn pase por encima. Si llamamos al primero, por ejemplo, apagado.gif y al segundo encendido.gif el cdigo necesario para que el truco funcione es: <HTML> <HEAD> <TITLE>Ejemplo de imagenes</TITLE> <SCRIPT LANGUAGE="JavaScript"> if (document.images) { var activado=new Image(); activado.src="encendido.gif"; var desactivado= new Image(); desactivado.src="apagado.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="apagado.gif" BORDER=0> </A> </BODY> </HTML> Lo primero que hay que indicar es que para que funcione el invento la imagen debe ser un enlace. Por qu? Porque los eventos que controlan si el ratn pasa o no por encima no son admitidos por la etiqueta <IMG>. Tambin deberemos "bautizar" nuestra imagen usando el atributo NAME="como -se- llame" para permitir al cdigo su identificacin posterior. El ejemplo funciona de la siguiente manera: en principio la imagen que vemos es la desactivada, que es la que indica la etiqueta <IMG>. Al pasar el raton por encima de ella el evento onMouseOver llamar a la funcin activar llevando como parmetro el nombre de la imagen. Esta funcin sustituir en el objeto document el nombre del fichero donde se guarda la imagen por encendido.gif, que es el grfico activado. Cuando apartemos el ratn 8

de la imagen, ser el evento onMouseOut el que se active, llamando a desactivar. Esta funcin sustituir el grfico de nuevo, esta vez por apagado.gif. Leyendo esta explicacin parece que una parte del cdigo sobra. Para qu sirve declarar dos objetos Image para albergar los grficos? No bastara con cambiar directamente el nombre de la imagen escribiendo document[nombreImagen].src = 'encendido.gif';? Pues no del todo. Efectivamente funcionara, pero cada vez que cambisemos el nombre el navegador se traera la imagen del remoto lugar donde se encontrara. Es decir, cada vez que passemos el ratn por encima de la imagen o nos alejaramos de ella tendramos que cargar (aunque ya lo hubisemos hecho antes) el grfico correspondiente. Es cierto que con la cach del navegador este efecto quedara algo mitigado, pero siempre es mejor precargar las imgenes usando el objeto Image, ya que as el navegador comenzar a leer el grfico en cuanto ejecute el cdigo en vez de esperar a que el usuario pase por encima de la imagen con el ratn. El objeto Image tiene como atributos los distintos parmetros que puede tener la etiqueta <IMG>. Por ltimo, hay que estudiar que significa eso de if (document.images). En los navegadores que no poseen JavaScript 1.1 (lase Netscape 2 y Explorer 3 e inferiores) el objeto Image no existe y dar un mensaje de error si se lo encuentra por ah. La solucin a este problema consiste en detectar la capacidad del navegador para manipular grficos preguntandole por la existencia del array document.images. As podremos no crear las variables que guardan los grficos ni ejecutar el cdigo de las funciones para activar y desactivar en el caso de que el navegador no soporte este array, lo cual es lo mismo que decir que soporta la versin 1.1 de JavaScript. Ejercicio No.9 Objeto form El array document.forms contiene todos los formularios de un documento. As, se accedera al primer formulario definido como document.forms[0]. Sin embargo, si usamos el parmetro NAME: <FORM NAME="miFormulario"> entonces podremos acceder al formulario con document.miFormulario , que resulta bastante ms cmodo y estable ante la posibilidad de variacin del nmero y posicin de formularios en el documento. Vamos a ver ahora el cdigo de nuestro primer formulario con validacin, que comprueba si tu la direccin de correo electrnico del usuario es correcta: <HTML> <HEAD> <TITLE>Ejemplo de formularios</TITLE> <SCRIPT LANGUAGE="JavaScript"> function validar(direccion) { if (direccion.indexOf("@") != -1) return true; else { alert('Debe escribir una direccin vlida'); return false; } } </SCRIPT> 9

</HEAD> <BODY> <FORM NAME="miFormulario" METHOD="POST" ACTION="mailto:yo@miproveedor.mipais" ENCTYPE="text/plain" onSubmit="return validar(this.email.value)"> Mandame tu e-mail: <INPUT NAME="email" TYPE="text"><BR> <INPUT TYPE="submit" VALUE="Mandame tu e- mail"> </FORM> </BODY> </HTML> El cdigo es sencillo: el cdigo llamado por el controlador de evento onSubmit debe devolver false si deseamos que el formulario no sea enviado. As pues, llamamos a la funcin que comprueba si hay alguna arroba en el campo email del formulario. La manera de llamar a esta funcin es quizs lo ms complicado. La funcin validar recibe una cadena de caracteres, devolviendo verdadero o falso dependiendo de que haya o no una arroba dentro de ella. El controlador utiliza para llamar a esta funcin lo siguiente: this.email.value this es una referencia estndar. Cuando veamos this en algn cdigo en realidad deberemos sustituirlo mentalmente por el objeto en el que est el cdigo. En este caso, como estamos dentro de miFormulario, this ser equivalente a document.miFormulario. email es el nombre del campo que queremos investigar y value el el atributo que contiene lo que haya tecleado el usuario.

10