JavaScript toma su sintaxis de los lenguajes de programación más conocidos, fundamentalmente C/C++, aunque también algo de Pascal.

Transcripción

1 1 JavaScript 1.1 Qué es JavaScript? JavaScript es un lenguaje interpretado. Es idóneo para trabajar en Web, ya que son los navegadores que utilizamos los que interpretan (y por tanto ejecutan) los programas escritos en JavaScript. Los programas escritos en JavaScript se ejecutan en el navegador del cliente, sin necesidad de que intervenga el servidor. De esta forma, una sola transacción basta para cargar la página y el programa en JavaScript. Las dos principales características de JavaScript son, por un lado que es un lenguaje basado en objetos y por otro, que es un lenguaje orientado a eventos, debido por supuesto al tipo de entornos de ventanas en los que se utiliza. Esto implica que gran parte de la programación en JavaScript se centra en describir objetos (con sus variables de instancia y métodos de "clase") y escribir funciones que respondan a ciertos eventos (movimientos del ratón, pulsación de teclas, etc.). JavaScript no es un lenguaje de propósito general: No permite un control absoluto sobre los recursos del ordenador. Cada programa en JavaScript solo tiene acceso al documento HTML en el que va inmerso. 1.2 Sintaxis JavaScript toma su sintaxis de los lenguajes de programación más conocidos, fundamentalmente C/C++, aunque también algo de Pascal Variables En Javascript NO hay tipificación de las variables, ni tampoco constantes. Para usar una variable solo hemos de darle un valor con el signo = numero = 73; cadena = "una cadena de texto"; Las variables pueden ser numéricas, cadenas (entre comillas), booleanas (valores true o false) u objetos, y por supuesto matrices de ellas. En Javascript se intenta hacer conversiones de tipo siempre que haga falta. Así por ejemplo, si escribimos la siguiente sentencia: unidos = numero+cadena; no obtendremos ningun error debido a tipos no compatibles, sino que concatenarán. Por otro lado, a una variable con un valor inicial de tipo numérico, le podemos dar un valor de tipo cadena posteriormente. El ámbito de las variables es siempre el más amplio posible. Para indicar que una variable es local a la función en que se está usando se usa la palabra reservada var: function suma_tres () { numero=numero+3; // función que usa una variable global

2 function suma_tres () { var numero=numero+3; // función que usa una variable local Sentencias en los programas La asignación se realiza de la misma forma que en C, es decir variable=expresion La sentencia de escritura podemos que considerar que es writeln. Se trata de un método del objeto document y podemos usarlo para escribir cosas desde JavaScript en el documento que hemos cargado en el navegador. La sentencia de lectura no existe como tal, aunque el objeto window tiene un método llamado prompt que se puede usar para tales menesteres. Lo normal, no obstante, es usar elementos de formularios (especialmente campos text). Se pueden hacer incrementos y operaciones con variables siguiendo la sintaxis de C/C++ variable++; ++variable; variable+=valor; variable-=valor; variable--; --variable; variable*=valor; variable/=valor; Estructuras de control Condicionales if ( condicion ) { sentencias_true; else { sentencias_false; switch( variable ) { case valor : case valor : { sentencias; break; case valor : case valor : { sentencias; break; default: { sentencias; Iterativas while( condicion ) { sentencias; do { sentencias; while ( condicion ); for(inic;condic;increm){ sentencias; Declaración de funciones La forma de definir una función es la siguiente: function nombre_funcion( [lista_parametros] ) { instrucciones; [return valor;] La lista de parámetros es solo una lista de nombres de variables separadas por comas, sin poner ni el tipo que son, ni nada de eso. La función puede devolver un valor. Ambas cosas son opcionales. Un ejemplo muy simple: // aquí declaro la función // posteriormente, la uso function suma( a,b,c ) { return a+b+c; acumular = suma(10, 20, 30); Matrices La matrices son dinámicas. Para crearlas utilizamos las palabras new y Array: 2

3 var matriz=new Array( 5 ); Esa línea crea una matriz de 5 posiciones (de la 0 a la 4). Para asignar valores a las distintas posiciones de la matriz y acceder a dichos valores, podemos hacerlo como sigue: var matriz = new Array; matriz[0] = 45; matriz[1] = ; matriz[2] = matriz[0] + matriz[1] ; Para calcular el número de elementos de una matriz, usaremos matriz.length Definir y usar objetos Para crear un objeto, tenemos que hacer una función constructor. Por ejemplo, supongamos que queremos crear el objeto amigo con las propiedades nombre, y teléfono. Tendríamos que crear una función de la siguiente forma: function amigo( nombre, tlf ) { this.nombre = nombre; this.tlf = tlf; // función constructora de "amigo" Como vemos el nombre de la función coincide con el nombre del objeto que deseamos crear. Posteriormente podremos crear instancias de este objeto llamando a la función, anteponiendo el operador new, es decir: var miamigo1 = new amigo("juanito", " "); var miamigo2 = new amigo("luisito", " "); Además de propiedades, los objetos tienen métodos. Vamos a añadir al objeto amigo un método que se llame mostrar que devuelva las propiedades del objeto concatenadas: function visualiza_amigo() { var cadena = "Nombre: " + this.nombre + "\n" + "Teléfono: " + this.tlf ; // función visualiza Lo anterior sirve para declarar la función que visualiza. Ahora la declaración de la función que construye el objeto quedaría de la siguiente forma: function amigo( nombre, tlf ) { this.nombre = nombre ; this.tlf = tlf ; this.mostrar = visualiza_amigo ; // función constructora de "amigo" 1.3 Uso de JavaScript en páginas HTML Los programas en JavaScript se ejecutan en el propio navegador y van literalmente escritos dentro de una página, es decir, formando parte del propio código HTML de dicha página. Esto nos lleva a escribir el programa en JavaScript al mismo tiempo que creamos la página HTML. La forma más usual para hacer uso de JavaScript en una página web consiste en poner el código del programa JavaScript entre los tag <SCRIPT> y </SCRIPT>. <HTML><BODY> Documento HTML que incluye un programa en JavaScript:<P> <SCRIPT> 3

4 document.writeln( "Esto esta escrito usando JAVASCRIPT" ); </SCRIPT> La sentencia document.writeln( ) escribe en el documento que se está visualizando en el navegador. Hay navegadores antiguos que no soportan JavaScript. Por eso, para evitar que procesen el texto del programa, conviene encerrar el código JavaScript entre comentarios HTML (ver el siguiente ejemplo). Para escribir una frase, tiene más sentido hacerlo directamente en HTML, sin usar JavaScript. Sin embargo, podríamos evitarnos tener que escribir muchas etiquetas para construir una tabla si lo hacemos con un pequeño programa incrustado en la página web: <HTML><BODY> Tabla hecha con JavaScript <p> <TABLE> <SCRIPT></SCRIPT> </TABLE> En este caso nos hemos servido de las sentencias iterativas de JavaScript para formar el documento, ahorrándonos escribir muchos <TD> y </TD> en HTML Mensajes de alerta, confirmación y entrada de datos Los mensajes de alerta aparecen con el método alert( mensaje ); Debemos pasarle la cadena que queremos que se visualice en la ventanita de aviso: <SCRIPT> alert("esto es un mensaje de alerta"); </SCRIPT> Para la confirmación de alguna opción usaremos el método confirm( mensaje ); Este método devuelve un valor lógico true o false por lo que podrá usarse en una sentencia de asignación o en una expresión lógica. Por último, la adquisición de datos se hace a través del método prompt( mensaje ); Nos presentará una ventana en la que podremos teclear una cadena de texto, que nos devolverá para operar con ella posteriormente Manejadores de eventos Un evento es cualquier cosa que puede ocurrir mientras se está ejecutando un programa, y son especialmente importantes en entornos gráficos. Así, se produce un evento cuando se mueve el ratón o se pincha uno o varios de sus botones, cuando el usuario pulsa una tecla, etc. Lo que se pretende con JavaScript es que los documentos se conviertan en 4

5 entidades dinámicas, en contraposición a la estaticidad propia del HTML. Vamos a hacer que se ejecuten ciertas acciones como respuesta a la ocurrencia de ciertos eventos. He aquí la forma general de introducir los manejadores de eventos: <ETIQUETA atributo="valor" onenvento1="sentenciasjavascript" > Para cada elemento en HTML han de conocerse los eventos que puede "sufrir". En el siguiente ejemplo, se muestra un mensaje en la barra de estado (parte inferior de la ventana del navegador) cada vez que el ratón pasa por encima de un enlace que hay en la página: <A HREF=" onmouseover="window.status='si pinchas el enlace, vas a google'; return true;"> Al pasar por encima del enlace la barra de estado cambia</a> En este ejemplo, el evento al que queremos responder mediante un programa en JavaScript es a que se pase el ratón por encima del enlace de la página. Dicho evento se llama MouseOver por ello en el tag <A> hemos asignado un valor al atributo onmouseover. El programa de respuesta al evento se podría haber puesto en una función: <HTML><HEAD> <SCRIPT> function gracias() { alert( "parece que el ejemplo funciona :)" ); </SCRIPT> </HEAD><BODY> <A HREF=" onmouseover="gracias();"> pasa el cursor por encima de este enlace</a> 1.4 Objetos window y document Al cargar una página, el intérprete de JavaScript crea automáticamente una serie de objetos que pueden ser usados en nuestros programas. Los más importantes son window y document. A partir de window se pueden crear nuevos objetos window que serán nuevas ventanas de navegador, que se pueden controlar desde la ventana padre Apertura y cierre de una ventana A partir del objeto window podemos abrir o cerrar nuevas ventanas, para mostrar páginas: variable=window.open( "dirección URL", "nombredeventana", "parámetros de apertura" ); Por ejemplo, abramos en una ventana llamada segundapagina la web de la Universidad de Granada; la altura de la ventana será de 200 pixeles. A continuación cerraremos esta nueva ventana: nuevaventana=window.open(" "segundapagina", "height=200" ); nuevaventana.close(); Elementos del documento que responden a eventos Un enlace puede responder a tres eventos: onclick, onmouseover y onmouseout 5

6 <a href=" onclick="alert('has pulsado el enlace para ir a google');" onmouseover="alert('encima del enlace');" onmouseout="alert('fuera del enlace');"> acerca el cursor a este enlace</a> Las imágenes tienen la propiedad src en la que se indica la dirección de la imagen que se carga. Esta dirección se puede modificar mientras se visualiza la página, consiguiendo con ello que una nueva imagen se muestre en pantalla en lugar de la antigua: <A HREF="" onmouseover="document.images['prueba'].src='uno.gif';" onmouseout="document.images['prueba'].src='dos.gif';" onclick="return false;"> cambiar la imagen</a> <p> <IMG SRC="dos.gif" NAME="prueba"> Una de las aplicaciones más importantes de JavaScript es utilizarlo para interaccionar con los elementos de formulario. Entre otros, podemos manejar las cajas de entrada de texto. Se trata de pequeños recuadros en los que el usuario puede introducir caracteres y en los que podemos escribir desde los programas JavaScript: <HTML><BODY> <a href="" onmouseover="document.formu.caja.value='hola';" onclick="return false;"> un mensaje en la caja de texto </a> <p> <a href="" onmouseover="document.formu.caja.value='adios';" onclick="return false;"> otro mensaje en la caja </a> <p> <FORM NAME="formu"> <INPUT TYPE="text" NAME="caja" SIZE="40" VALUE=""> </FORM> 6