Js

449 visualizaciones

Publicado el

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
449
En SlideShare
0
De insertados
0
Número de insertados
4
Acciones
Compartido
0
Descargas
1
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Js

  1. 1. Implantación de Aplicaciones Informáticas de Gestión Javascript no es Java, Java es un lenguaje de programación creado por Sun Microsystems, y Javascript es un lenguaje de programación creado por Netscape. Java crea programas totalmente autosuficientes mediante un proceso de escritura y compilación y que deben ser referenciados en la pg. Web . Jscript es texto que se escribe en la pg web al igual que se escriben etiquetas y texto con HTML. Javascript es un lenguaje de programación que se usa para añadir interactividad a las páginas, su código se incluye en una página HTML Javascript permite crear un interface activa: 1.- Botones que se destacan luminosamente al pasar el cursor por encima de ellos (imágenes de sustitución) 2.- Asegurarse de que los usuarios introducen información válida en los formularios. 3.- JS contiene un conjunto de funciones, fecha, hora, así que puede generar documentos con relojes, calendario, etc. Explorer tiene problemas con versiones avanzadas de Jscript 1.1 y 1.2 pero nosotros veremos el nivel 1 que puede ejecutarse en ambos navegadores (Explorer y Netscape). NOTA:  Jscript diferencia entre mayúsculas y minúsculas.  Cuidado con los espacios en blanco y los saltos de línea entre comandos  Escribiremos los comandos HTML en mayúsculas y los de JS en minúscula.  OBJETOS  PROPIEDADES  MÉTODOS  MANEJADOR DE EVENTOS Inmaculada Luque Estepa Página 1 de 28 1.- QUÉ ES JAVASCRITPT 2.- ELEMENTOS IMPORTANTES DEL LENGUAJE
  2. 2. Implantación de Aplicaciones Informáticas de Gestión A.- OBJETOS Los objetos con los que trata Jscript son ventanas, formularios y los elementos de los formularios, como los botones , casillas de verificación, etc. Son elementos que ya existen, como por ejemplo un documento. B.- PROPIEDADES Pueden modificar a los objetos y la misma se puede aplicar a objetos distintos. Ejemplo el estante (objeto) está vacío (propiedad). C.- MÉTODOS Son las acciones que pueden hacer los objetos. Ejemplo: Los gatos (objeto) ronronean (método) Podríamos pensar que los objetos son sustantivos, las propiedades son adjetivos y los métodos son verbos. Para describir mejor un objeto, o un proceso podemos juntar objetos, propiedades y métodos. En Jscript se unen por medio de puntos, es lo que se llama sintaxis del punto. • objeto.propiedad • objeto.método ( parámetros del método). Es el objeto principal. Define la ventana sobre la que estamos trabajando y tiene como descendientes los objetos referentes a la barra de tareas, el documento o la secuencia de direcciones dela última sesión. Ahora veremos su métodos más usados. MÉTODOS: 1.-open: variable = window.open (“URL”, “Nombre”, “Propiedades”); Inmaculada Luque Estepa Página 2 de 28 OBJETO : window 3.- OBJETOS
  3. 3. Implantación de Aplicaciones Informáticas de Gestión Este método sirve para crear una ventana nueva. Si queremos tener acceso a ella desde la ventana donde la creamos deberemos asignarle una variable si no simplemente invocamos el método 2.- close: Variable.close(). Cierra la ventana Variable. 3.- alert: Variable.alert(“Mensaje). Muestra una ventana de diálogo en la ventana Variable con el mensaje especificado. 4.- status: Define la cadena de caracteres que saldrá en la barra de estado en un momento dado. 5.- defaultStatus: Define la cadena de caracteres que saldrá por defecto en la barra de estado. Cuando no la especificamos, defaultStatus será igual al último valor que tomó status. 6.- confirm(): Lanza un cuadro de diálogo que contienen los botones Aceptar y Cancelar. Si se pulsa Aceptar, el método devuelve el valor true, y si pulsamos en Cancelar devuelve el valor false. El objeto document, hace referencia al documento actual que estamos editando. PROPIEDADES: 1. bgColor: devuelve el color de fondo en código hexadecimal. 2. fgColor: devuelve el color del texto en código hexadecimal. 3. linkColor: devuelve el color del vínculo en código hexa. 4. alinkColor: “ vínculo activo “ 5. vlinkColor: “ vínculo visitado “. 6. location: devuelve el URL, o la dirección web, de la pg en la que estamos. 7. referrer: devuelve la pg que ha visitado con anterioridad a la pg actual (si no hay ninguna pg disponible esta devuelve un espacio en blanco. 8. title: devuelve el texto que hay entre los comandos HTML TITLE del documento. 9. lastModified: devuelve la fecha en que se modificó la pg por última vez. MÉTODOS 1.- write: document.write(“literal”) escribe texto en el documento Inmaculada Luque Estepa Página 3 de 28 OBJETO : document
  4. 4. Implantación de Aplicaciones Informáticas de Gestión El objeto navigator, hace referencia al navegador. MÉTODOS: 1. appName: devuelve el nombre del navegador. 2. appVersion: devuelve el número de versión del navegador 3. appCodeName: devuelve el nombre codificado dado al navegador (por ejemplo Netscape = Mozilla; Microsoft = Internet Explorer 4. userAgent : devuelve la cabecera del protocolo de transferencia de hipertexto http. El objeto history, se deriva de document, representa la lista que mantiene el navegador de todas las pg que visitó el usuario durante la sesión. 1. length: número de pg que ha visitado el usuario durante la sesión. MÉTODOS: 1.- document.history.back(): Volver a la página anterior. 2.- document.history.forward(): Ir a la página siguiente. 3.- document.history.go(donde): Ir a donde se indique, siendo “donde” un número tal que go(1)=foward() y go(-1)=back(). El objeto location representa el URL actual de la pg que se está visualizando. PROPIEDADES: Inmaculada Luque Estepa Página 4 de 28 OBJETO : navigator OBJETO : history OBJETO : location
  5. 5. Implantación de Aplicaciones Informáticas de Gestión 1. Host: devuelve la URL más el puesto al que está conectado 2. hostName: devuelve sólo el URL Este objeto derivado de document se refiere a un formulario. Puede ser útil para verificarlos antes de enviarlos. MÉTODO: 1.- submit: Nombre.submit(). Envía el formulario llamado Nombre. Con este objeto podremos averiguar la configuración de la pantalla. Al igual que en navigator, todos sus atributos son de sólo lectura: screen.height = altura, screen.width = anchura, screen.pixelDepth= número de bits por píxel. Son acciones que el usuario realiza mientras visita la pg. Como Enviar un formulario, mover el ratón, etc. Javascript trabaja con eventos usando comandos denominados manejadores de eventos (son los que hacen que ocurran los eventos). MANEJADOR DE EVENTO LO QUE SE MANIPULA onAbort Ocurre algo cuando el usuario aborta la carga de la pg onBlur Ocurre algo cuando el usuario dejó el objeto. Perder el cursor. onChange Cambiar de contenido o perder el cursor onError Ocurre algo cuando el guión descubrió un error onFocus Ocurre algo cuando el usuario activó un objeto. Conseguir el cursor. onLoad Terminar de cargar una página onMouseover Ocurre algo cuando el usuario desplaza el cursor sobre Inmaculada Luque Estepa Página 5 de 28 OBJETO : form OBJETO : screen 4.- MÉTODOS
  6. 6. Implantación de Aplicaciones Informáticas de Gestión un objeto onMouseout Ocurre algo cuando el usuario retira el cursor del objeto onSelect Ocurre algo cuando el usuario selecciona los contenidos de un objeto onSubmit Usuario envió un formulario onUnload Usuario dejó la ventana, salir de una página onClick Ocurre algo cuando el usuario hace clic en un objeto o vínculo Ejemplo: document.write document.bgColor objeto objeto Existen dos sitios: 1.- Entre las etiquetas <HEAD> y </HEAD> 2.- Entre las etiquetas <BODY> y </BODY> aquí es lo más común. Veamos el primer guión chap01script1.html La etiqueta de apertura del guión es <SCRIPT le dice al navegador que a continuación se escribirá código JS LANGUAGE=JAVASCRIPT> identifica en el navegador qué lenguaje se está utilizando, como no hay ningún número después de JS se supone que se está utilizando la versión 1.0 A continuación escribimos nuestro código y al final de nuestro guión ponemos </SCRIPT> ESTRUCTURA <HTML> <HEAD> <TITLE> Título del documento </TITLE> Inmaculada Luque Estepa Página 6 de 28 método propiedad 4.- DÓNDE COLOCAR LOS GUIONES
  7. 7. Implantación de Aplicaciones Informáticas de Gestión <HEAD> <BODY> <SCRIPT LANGUAGE=JAVASCRIPT> ++++++GUION DE JS +++++++++++ </SCRIPT> </BODY> </HTML> Nota: El atributo TYPE=”TEXT/JAVASCRIPT” indica al navegador que el guión está en texto normal, organizado como JS. Se puede omitir NÚCLEO DEL GUIÓN document.write (“Hola mundo”) • document : es un objeto, mantiene los contenidos de la pg, dentro de la ventana del navegador, podemos pensar en document como el documento HTML. Ahora bien este documento se verá alterado por write (que es un método) el cual escribirá algo en el documento, concretamente lo que incluya dentro del paréntesis. El texto que va dentro del paréntesis se denomina parámetros del método. ¡!!!!!Atención ¡!!!!! Este texto debe ir entre comillas. Los navegadores antiguos no entienden JS y aunque los navegadores deberían ignorar cualquier cosa entre etiquetas que no entiendan, no todos los hacen. Para evitar esto se les hace creer que los guiones son comentarios HTML. Veamos el siguiente guión Copia de chap02script02.html <!—Ocultar guión a navegadores antiguos +++++guión+++++ // Fin de ocultación --> Para poner un comentario podemos hacerlo con: // si lo que viene a continuación ocupa una sola línea. Inmaculada Luque Estepa Página 7 de 28 5.- OCULTAR GUIONES A NAVEGADORES ANTIGUOS
  8. 8. Implantación de Aplicaciones Informáticas de Gestión O bien /* comentario */ si necesitamos escribir comentarios más extensos, veamos un ejemplo Copia de chap02script03.html Podemos crear una ventana de alerta que se abrirá y dará a los usuarios información. Para realizar esto usaremos: alert (“ comentario “) Copia de chap02script04.html También podemos ver en este guión la etiqueta: <NOSCRIPT> TEXTO </NOSCRIPT> Esta etiqueta se usa para que los navegadores que no soportan JS lean el mensaje “TEXTO” indicando que la página requiere JS. Echemos un vistazo a nuestro ejemplo: Copia de chap02script06.html La ruta que seguirá el navegador es la siguiente: 1.- Si los usuarios no tienen JS, con la etiqueta: <A HREF= “script04.html”> ¡Bienvenido! </A> Al pinchar en el texto !Bienvenido! nos iremos al archivo scipt04.html. 2.- Si por el contrario el navegador del usuario puede leer JS el manejador de eventos onClick cargará una página nueva (jswelcome.html) al pinchar en el texto ¡Bienvenido! onClick= “window.location= ‘jswelcome.html’ return false “ le dice al navegador que cambie la página actual por la de jswelcome.html’ actúa como terminador de sentencia, con “ ; ” entre onClick y return false JS entiende que estos elementos están relacionados y además comprende dónde acaba uno y empieza el otro. Inmaculada Luque Estepa Página 8 de 28 ; ; 6.- AVISAR AL USUARIO 7.- REDIRECCIONAR AL USUARIO CON UN VÍNCULO
  9. 9. Implantación de Aplicaciones Informáticas de Gestión return false: indica que se pare de procesar el clic del usuario para que no se cargue la página HREF. Si lo quitamos se cargará la página script04.html 1.- Utilizando las propiedades que hemos visto de los distintos objetos (document, navigator, history, y location) Crear una página que saque el valor intrínseco de cada propiedad. Para ello utilizaremos los signos + propiedad + Ejemplo: document.write (“<br> El color del documento es : <b> “+document.bgcolor+” </b>”) A esta práctica la llamarás propiedades.html 2.- Crea una página con un texto de enlace de forma que al pinchar en él nos salga una ventana de alerta. A esta práctica la llamarás alerta.html 1.- CONDICIÓN IF Para descubrir el tipo de navegador que estamos usando utilizaremos una sentencia condicional. ESQUEMA SI el nombre del navegador es Netscape ENTONCES ACCIÓN Escribir mensaje C.C. Escribir mensaje If ( condición ) Veamos el ejemplo Copia de chap02script07.html {ACCIÓN} Inmaculada Luque Estepa Página 9 de 28 1.-PRÁCTICAS 8.- SENTENCIAS CONDICIONALES
  10. 10. Implantación de Aplicaciones Informáticas de Gestión else {ACCIÓN} Hay un operador que no hemos visto todavía y es una forma más esquemática de realizar algunos IF sencillos. Proviene del lenguaje C, donde se escriben muy pocas líneas de código que resulta muy elegante. Este operador es un claro ejemplo de ahorro de líneas y caracteres al escribir los scripts. Lo veremos rápidamente, pues la única razón por la que lo incluyo es para que sepas que existe y si lo encuentras en alguna ocasión por ahí sepas identificarlo y cómo funciona. Un ejemplo de uso del operador IF se puede ver a continuación. Variable = (condición) ? valor1 : valor2 Este ejemplo no sólo realiza una comparación de valores, además asigna un valor a una variable. Lo que hace es evaluar la condición (colocada entre paréntesis) y si es positiva asigna el valor1 a la variable y en caso contrario le asigna el valor2. Veamos un ejemplo: momento = (hora_actual < 12) ? "Antes del mediodía" : "Después del mediodía" MÉTODO CONFIRM() El método confirm() lana un cuadro de diálogo que contiene los botones Aceptar y Cancelar. Si el usuario pulsa Aceptar, el método devuelve el valor true. Del mismo modo, Cancelar devulve el valor false. El valor devuelto es guardado en l variable “a” En este ejemplo se ha utilizado en la cadena de caracteres que va dentro del método confirm(), la barra invertida-comillas dobles ” para poder escribir comillas debido a que éstas no se pueden utilizar directamente dentro de una cadena de caracteres en JavaScript ya que sirven para limitar el inicio y el final de la cadena. Veamos un ejemplo del método Confirm() con una estructura condicional. 2.- BUCLE “FOR” El bucle FOR se utiliza para repetir mas instrucciones un determinado número de veces. De entre todos los bucles, el FOR se suele utilizar cuando Inmaculada Luque Estepa Página 10 de 28
  11. 11. Implantación de Aplicaciones Informáticas de Gestión sabemos seguro el número de veces que queremos que se ejecute la sentencia. La sintaxis del bucle se muestra a continuación. for (inicialización;condición;actualización) { sentencias a ejecutar en cada iteración } El bucle FOR tiene tres partes incluidas entre los paréntesis. La primera es la inicialización, que se ejecuta solamente al comenzar la primera iteración del bucle. En esta parte se suele colocar la variable que utilizaremos para llevar la cuenta de las veces que se ejecuta el bucle. La segunda parte es la condición, que se evaluará cada vez que comience la iteración del bucle. Contiene una expresión para comprobar cuándo se ha de detener el bucle, o mejor dicho, la condición que se debe cumplir para que continúe la ejecución del bucle. Por último tenemos la actualización, que sirve para indicar los cambios que queramos ejecutar en las variables cada vez que termina la iteración del bucle, antes de comprobar si se debe seguir ejecutando. Después del for se colocan las sentencias que queremos que se ejecuten en cada iteración, acotadas entre llaves. Un ejemplo de utilización de este bucle lo podemos ver a continuación, donde se imprimirán los números del 0 al 10. vari for (i=0;i<=10;i++) { document.write(i) } En este caso se inicializa la variable i a 0. Como condición para realizar una iteración, se tiene que cumplir que la variable i sea menor o igual que 10. Como actualización se incremetará en 1 la variable i. Como se puede comprobar, este bucle es muy potente, ya que en una sola línea podemos indicar muchas cosas distintas y muy variadas. Inmaculada Luque Estepa Página 11 de 28
  12. 12. Implantación de Aplicaciones Informáticas de Gestión Por ejemplo si queremos escribir los número del 1 al 1.000 de dos en dos se escribirá el siguiente bucle. for (i=1;i<=1000;i+=2) document.write(i) Si nos fijamos, en cada iteración actualizamos el valor de i incrementándolo en 2 unidades. Otro detalle, no utilizamos las llaves englobando las instrucciones del bucle FOR porque sólo tiene una sentencia y en este caso no es obligado, tal como pasaba con las instrucciones del IF. Si queremos contar descendentemente del 343 al 10 utilizaríamos este bucle. for (i=343;i>=10;i--) document.write(i) } En este caso decrementamos en una unidad la variable i en cada iteración. Ejemplo Vamos a hacer una pausa para asimilar el bucle for con un ejercicio que no encierra ninguna dificultad si hemos entendido el funcionamiento del bucle. Se trata de hacer un bucle que escriba en una página web los encabezamientos desde <H1> hasta <H6> con un texto que ponga "Encabezado de nivel x". Lo que deseamos escribir en una página web mediante Javascript es lo siguiente: <H1>Encabezado de nivel 1</H1> <H2>Encabezado de nivel 2</H2> <H3>Encabezado de nivel 3</H3> <H4>Encabezado de nivel 4</H4> <H5>Encabezado de nivel 5</H5> <H6>Encabezado de nivel 6</H6> Para ello tenemos que hacer un bucle que empiece en 1 y termine en 6 y en cada iteración escribiremos el encabezado que toca. for (i=1;i<=6;i++) { Inmaculada Luque Estepa Página 12 de 28
  13. 13. Implantación de Aplicaciones Informáticas de Gestión document.write("<H" + i + ">Encabezado de nivel " + i + "</H" + i + ">") } Veamos otro ejemplo Copia de chap02script091.html MÉTODO prompt() Este método nos pide un valor que puede ser un número o un texto, ese valor se guardará en una variable, para que luego la utilicemos. Veamos el ejemplo Copia de chap02prompt.html OPERADORES Suma: x+y Resta: x-y Multiplicación: x*y División: x/y Resto de la división: x%y Añadir uno: x++ o bien ++x Restar uno: x-- o bien –x Invertir el signo: -x Comparación: == 3.- Hacer una página de forma que si el fondo de la página es blanco, aparezca un mensaje diciendo: “EL FONDO DE LA PÁGINA ES BLANCO” Y si no lo es, que se vaya a otra página, por ejemplo si el fondo no fuera blanco que se fuera a la página propiedades.html. Inmaculada Luque Estepa Página 13 de 28 2.- PRÁCTICAS 9.- OPERADORES
  14. 14. Implantación de Aplicaciones Informáticas de Gestión Debéis probar las dos opciones, primero que vuestra página tenga el fondo blanco, de forma que os salga el mensaje, y luego debéis cambiar el color de fondo para comprobar que efectivamente se va a la página propiedades.html Llamar a esta práctica condición.html 4.- Escribir en una página los números del 0 al 10 indicando al lado si es Par o Impar. Para ello debéis combinar el bucle “for” con las sentencias condicionales “if” Llamar a esta práctica Parimpar.html Una función es un conjunto de sentencias de Javascript que realiza una tarea. Las funciones se pueden llamar cuantas veces sea necesario. Para crear una función utilizamos la palabra function seguida del nombre de la función, un paréntesis y una llave de apertura. function nombre (parámetros) { acción } Veamos un ejemplo de función Copia de chap02script10.html hora sí vamos a ver más de una etiqueta script en nuestro guión, sería conveniente en el encabezado, entre etiquetas <HEAD> y </HEAD> poner declaración de funciones, variables, etc y por otro lado en <BODY> ......</BODY> las acciones del cuerpo del guión. Veamos un ejemplo Copia de chap02script11.html Veamos directamente el ejemplo y luego lo iremos explicando Copia de chap02script12.html Vamos a ver cómo se ha procedido: Inmaculada Luque Estepa Página 14 de 28 10.- FUNCIONES 11.- INSERTAR MÁS DE UN GUIÓN 12.- BARRAS DE ESTADO CON DESPLAZAMIENTO
  15. 15. Implantación de Aplicaciones Informáticas de Gestión 1) Asigna a la variable myMsg un texto cualquiera (declara una variable) 2) Declara otra variable i, que se utilizará como contador 3) Se crea la función scrollMsg() Esta función hace 3 cosas: 1.- Asigna a la barra de estado (window.status) un mensaje. Este mensaje está dividido en dos partes por el método substring(x,y) + substring (x,y) ¿Cómo lo hace? Veamos un ejemplo más sencillo: Supongamos que el texto es MARTES = myMsg.length = 6 i =3 la 1ª sentencia de substring (3,6) + substring (0,3) 2.- Se crea un bucle indicando que la función se repetirá, ya que dice: si i < longitud del mensaje que se incremente en 1 en caso contrario i =0 (es decir vuelve al principio) 3.- Utiliza un comando ( setTimeout) para añadir pausa a un proceso setTimeout (“scrollMsg()”, 100) 4) Una vez declaradas todas las variables y funciones en <BODY> es donde se llama a la función con el manejador de eventos onLoad = “scrollMsg( )” Inmaculada Luque Estepa Página 15 de 28 1ª sentencia, parte derecha del texto 2ª sentencia, parte izqda. del texto Parte derecha del texto comienza en el carácter 4 y termina en el 6 TES Parte izqda., comienza en el carácter 0 y termina en el 3 MAR A medida que la parte derecha disminuye la izqda aumenta Milisegundos, cuanto menor sea el número, la función irá más rápida 13.- MENSAJES EN LA BARRA DE ESTADO
  16. 16. Implantación de Aplicaciones Informáticas de Gestión Aquí se utilizan los manejadores de eventos onMouseover y onMouseout. Cuando el ratón pasa por encima del literal (en el caso del ejemplo mi perro) que aparezca en la barra de estado (window.status) “El mejor amigo del hombre” Copia de chap02script13.html return true Estas dos palabras adicionales tienen bastante carga en cuanto a lo que ocurre cuando el cursor del ratón pasa por encima del vínculo. Si están presentes las palabras, la sentencia return true permite al guión sobrescribir cualquier cosa que haya. Observemos el ejemplo que cuando el cursor del ratón pasa sobre el vínculo, el texto que hay en la barra de estado se bloquea. No cambia si mueve el cursor del ratón sobre el vínculo una y otra vez. Si refrescamos la página, podremos ver el efecto un poco mejor. Si queremos que en la barra de estado aparezca de forma permanente un mensaje en la barra de estado podemos utilizar el método defaultStatus del objeto window, vemos un ejemplo 5.- Crea una página de forma que cuando el ratón pase por un enlace cambie el fondo de la página a rojo y cuando pase por otro enlace, a verde. Esta práctica se llamará rover.html 6.- Crea una página que contenga un enlace con el texto “Pasa por aquí encima” y que al pasar el cursor por encima salga un mensaje de alerta diciendo “No me pises que llevo chanclas Para crear imágenes de sustitución necesitamos dos imágenes, la primera es la la original, y cuando el usuario mueve el ratón sobre esta imagen el navegador cambia esta por otra imagen llamada de sustitución . Todo se hace con un vínculo de imagen estándar. Veamos los ejemplos para hacernos una idea chap03script01.html chap03script02.html Inmaculada Luque Estepa Página 16 de 28 3.- PRÁCTICAS 14.- IMÁGENES DE SUSTITUCIÒN
  17. 17. Implantación de Aplicaciones Informáticas de Gestión Cómo se crea este efecto: 1) Verifica si el navegador entiende los objetos de imagen, esto lo hace con una sentencia condicional if (document.images) 2) Declara dos nuevos objetos que van a ser dos imágenes arrowRed = new Image arrowBlue = new Image 3) Con la propiedad src asigna un archivo con una imagen a los objetos declarados como imágenes arrowRed.src = "images/redArrow.gif" arrowBlue.src = "images/blueArrow.gif" Lo que hacemos con esto es cargar en memoria caché la imagen, con lo que agilizaremos el proceso. Comparar el script01 con el script02, quizás a simple vista no apreciamos la rapidez, pero realmente la sustitución de las imágenes se hace más rápido al tenerlas precargadas en memoria. 4) En caso contrario, es decir si el navegador no reconoce las imágenes en JS, deja los objetos en blanco para que no haya problemas. 5) Fijémonos ahora en la etiqueta con la que inserto la imagen en nuestro documento, <IMG SRC="images/blueArrow.gif" WIDTH=147 HEIGHT=82 BORDER=0 NAME="arrow”> Con la etiqueta “IMG SRC” inserta una imagen en nuestro documento (la flecha azul, que es la que sale por defecto cuando cargamos la página), luego le damos una anchura, una altura, un borde y con NAME= “arrow”, le decimos cómo vamos a llamar la zona del documento donde cargamos la imagen. 6) Por último veamos cómo crea las imágenes de sustitución: 1.- Crea un enlace, que en este caso será la imagen de la flecha, y con el manejador onMouseover le digo que en la ventana (window) en la zona llamada (arrow) cargue una imagen (src) que va a ser la que le indico detrás del signo =. Es decir cuando el ratón pase sobre el enlace (que es la flecha azul) cargue en la ventana del navegador en la zona arrow, la imagen indicada detrás del signo = <A HREF="next.html" onMouseover="window.arrow.src=arrowRed.src" onMouseout="document.arrow.src=arrowBlue.src"> <IMG SRC="images/blueArrow.gif" WIDTH=147 HEIGHT=82 BORDER=0 NAME="arrow"></A> Dentro de onMouseover en lugar de poner window, podríamos haber puesto document o viceversa, ya que JS asume que todo lo que está sucediendo , ocurre dentro de una ventana del navegador Inmaculada Luque Estepa Página 17 de 28
  18. 18. Implantación de Aplicaciones Informáticas de Gestión 7.- Hacer una página de forma que cargue la cara de Bart Simpson, y cuando pasemos el ratón sobre ella, Bart saque la lengua y además que ponga un mensaje en la barra de estado diciendo “Bart que travieso eres” Llamar a esta práctica simpson.html 8.- Hacer una página en la que al pasar por la palabra ESPAÑA, salga el mapa de España (con las principales provincias) mapa.gif. Llamar a esta práctica españa.html Veamos el ejemplo chap03script04.html El procedimiento es exactamente igual que en el punto 11, solo que en este caso utiliza más de una imagen y reserva un espacio en el documento para la imagen de sustitución. Ahora intentaremos de rizar más el rizo chap03script05.html Como utiliza más de una imagen de sustitución en distintas zonas del documento, debe nombrar más de una zona. Vamos a ver cómo podemos simplificar la utilización de imágenes de sustitución usando funciones. chap03imgsustitu.html Lo primero que hace es declarar en la cabecera las funciones que va a utilizar, luego la utilización de las imágenes de sustitución es exactamente igual de lo que hemos visto en los puntos anteriores. <HTML> <HEAD> Inmaculada Luque Estepa Página 18 de 28 4.- PRÁCTICAS 15.- IMÁGENES MÚLTIPLES Y UNA SOLA IMAGEN DE SUSTITUCIÓN 16.- MÚLTIPLES IMÁGENES DE SUSTITUCIÓN 17.- USAR FUNCIONES CON IMÁGENES
  19. 19. Implantación de Aplicaciones Informáticas de Gestión <TITLE>Una imagen de sustitución</TITLE> <SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT"> <!--Ocultar guión a navegadores antiguos function simpson(arrow) { document.arrow.src="simpson.gif" } function lengua(arrow) { document.arrow.src="simpson2_2.gif" } // Fin de ocultación de guión a navegadores antiguos --> </SCRIPT> </HEAD> <BODY BGCOLOR=WHITE> <A HREF="next.html" onMouseover="lengua( );window.status='Bart malo malo';return true" onMouseout="simpson( );window.status='';return true"> <IMG SRC="simpson.gif" WIDTH=147 HEIGHT=82 BORDER=0 NAME="arrow" ></A> </BODY> </HTML> Veamos qué es esto de Banners cíclicos chap03script08.html Lo primero que hace es declarar una variable llamada “adImages”, como una matriz o array (que es un conjunto de información relacionada), esta matriz será un objeto. En nuestro caso la matriz va a contener 3 archivos “.gif” que constituyen el banner cíclico. En segundo lugar crea otras dos variables “thisAd”, que va a ser un contador, y “imgCt” que hará referencia a la longitud de la matriz (adImges) Por último, crea una función llamada “rotate ( )”, que hace lo siguiente: Inmaculada Luque Estepa Página 19 de 28 18.- BANNER CÍCLICOS
  20. 20. Implantación de Aplicaciones Informáticas de Gestión • Verifica si el navegador entiende el objeto de imagen (esto lo podríamos eliminar, no ocurriría nada) • Toma el valor de thisAd y le añade 1 • Establece una condición, de forma que si thisAd es igual a la longitud de la matriz, ponga el contador (thisAd) a cero • En la zona “adBanner” del documento ponga la imagen que corresponda con el lugar que indique thisAd de la tabla (adImages) • Con setTimeout llama a la función rotate cada 3 segundos. Fijaos que en la etiqueta <BODY> comienzan los ciclos del Banner ya que es aquí donde se invoca a la función con el manejador de eventos onLoad y el nombre de la función (rotate) Pensemos un momento por qué en la sentencia condicional no ha puesto “else”, veamos qué ocurre si lo hubiésemos puesto chap03script081.html Como podemos comprobar la primera imagen no la veríamos nunca. 9.- Crear una página en la que cada 2 segundos cambie su color de fondo, utilizar tres colores, rojo, blanco y azul. Llamar la práctica fondocolor.html Lo que hacemos es añadir un nuevo array que contiene los destinos a los que serán enviados los usuarios cuando hagan clic en el banner. chap03script10.html 1) Al igual que antes creamos un array para guardar los banners 2) Creamos otro array (el nuevo) para guardar los destinos al pinchar en cada banner, sólo ponemos los dominios. 3) Creamos el contador thisAd = 0 y una variable con la longitud del primer array 4) Creamos la función igual que antes rotate ( ) con la peculiaridad de que ponemos : If (document.adBanner.complete ) 5) Creamos otra función newLocation ( ) que asigna a document.location.href = http://www + adURL [thisAd] Inmaculada Luque Estepa Página 20 de 28 5.- PRÁCTICAS Le dice al documento que la zona adBanner se ha cargado completa Valor del array que corresponda con el contador thisAd 19.- AÑADIR VÍNCULOS A LOS BANNERS CÍCLICOS
  21. 21. Implantación de Aplicaciones Informáticas de Gestión 6) El truco está en la llamada a la función newlocation desde el vínculo: <A HREF = “javascript : newlocation ()”> <IMG SRC = “images/banner1.gif width=----- NAME=”adBanner”> </A> Es muy útil abrir ventanas nuevas para mostrar a los usuarios información adicional. Acordaros que con HTML lo hacíamos con los marcos (Target=_blank) Veamos ahora cómo se hace con JS Copia de chap05script01.html 1) En primer lugar lo que hace es declarar una función newwindow a la que llamará cada vez que pinchemos en el enlace 2) A la variable catwindow asigna un objeto de ventana abierto que contiene: window.open ( ‘archivo de imagen’ , ‘ nombre de la ventana ‘ , ‘propiedades’) 3) Como hemos visto en otros ejemplos en el enlace llama a la función newwindow. Inmaculada Luque Estepa Página 21 de 28 Este es otro comando que provoca una respuesta (es el formato básico para establecer un vínculo a otra página), href significa Hypertext REFerence (Referencia de Hipertexto) y crea un vínculo a otra página. Ejemplo: <FORM> <INPUT TYPE=”button” onClick=”location.href=’pg.html’ “> </FORM> Ver punto 4, esta es otra forma de utilizar onClick para ir a una página o URL ¡¡¡¡ATENCIÓN¡¡¡¡¡ no debe haber espacios entre las comas de las pripiedades: • width • heght • toolbar = yes (barra de herramientas) • location =yes (cuadro de dirección) • scrollbars (barras de desplazamiento) • resizable (redimensionable) • menubar (barra de menús) • status (barra de estado) • left = 80 y top = 50 (para posicionar la ventana en un lugar concreto del documento) 20.- ABRIR UNA VENTANA NUEVA EN NUESTRO DOCUMENTO
  22. 22. Implantación de Aplicaciones Informáticas de Gestión En el apartado anterior, con un vínculo teníamos una ventan nueva, ahora tendremos varios vínculos que van a tener como objetivo la misma ventana. Copia de chap05script02.html Al igual que antes crea una función newwindow a la que le pasa un parámetro (que contendrá las distintas imágenes que carga en la ventana nueva) bookgif , esta función asigna a la variable bookwindow una nueva ventana. El contenido de la nueva ventana va a estar en el parámetro bookgif que cambiará en función del enlace que pinche. 10.- Crear una página que contenga un botón que abra una ventana nueva. Llamar a esta práctica ventanabotón.html 11.- Crear una página que contenga tres imágenes y cada imagen abra una ventana común, con contenido distinto en función de la imagen. Llamar la práctica ventanaimagen.html Vamos a ver cómo enviamos información de una ventana a otra. Usaremos dos ventanas, a la ventana principal la llamaremos padre, que recibirá y visualizará información introducida en la ventana hija. Para que nos hagamos una idea de lo que estamos hablando echemos un vistazo al ejemplo Copia de chap05script051.html 1º GUIÓN VENTANA PADRE La ventana padre, le dice al navegador que cree una ventana hija con : newWindow=window.open('child.html','newWin' , 'toolbar=yes,location=yes,scrollbars=yes’) Luego crea un formulario al que llama outputform , este formulario será de tipo texto , y al campo de texto lo llama msgLine , que empieza con el campo vacío. 2º GUIÓN VENTANA HIJA Inmaculada Luque Estepa Página 22 de 28 6.- PRÁCTICAS 21.- CARGAR DISTINOS CONTENIDOS EN 1 VENTANA 22.- ACTUALIZAR UNA VENTANA DESDE OTRA
  23. 23. Implantación de Aplicaciones Informáticas de Gestión 1) Crea una función llamada updateParent , ¿qué hace esta función? Pues bien va ha introducir una nueva propiedad opener la cual dice al navegador que mire en el documento/ventana padre en el formulario llamado outputform y encuentre el valor del campo llamado msgLine e inserte el valor de “Hola” más el contenido del campo llamado saludo del formulario llamado formuhija del documento. 2) Con el manejador de eventos onBlur estamos empujando la acción de la ventana hija a la padre, al terminar de escribir en la ventana hija y pulsar “enter” lo que hacemos es pasar la ventana hija a un segundo plano, enviando la información recogida por el formulario a la ventana padre. Veamos otra forma de hacer esto Copia de chap05script05.html Hasta ahora se ha empleado más de una archivo para crear varias ventanas (archivo para la ventana padre y otro para la ventana hija) pero no hay necesidad, esto lo podemos hacer en un solo documento. Copia de chap05script06.html Algo novedoso que veremos en este ejemplo es cómo escribe código HTML dentro de código Javascript. En primer lugar crea un documento HTML con una cabecera “Esta ventana se repite alocadamente”, y con código Js dentro de la etiqueta <BODY> crea una ventana a la que no le asigna ningún archivo, inmediatamente después introduce en esa ventana creada newWindow, con la sentencia : newWindow.document.write ( “ “) un guión escrito con <HTML>, luego con Js realiza un bucle y por último cierra las etiquetas </BODY> y </HTML>. Con la sentencia : newWindow.document.close() cierra la ventana donde ha ejecutado código HTML. Inmaculada Luque Estepa Página 23 de 28 7.- PRÁCTICAS 23.- EN UNA ARCHIVO VARIAS VENTANAS
  24. 24. Implantación de Aplicaciones Informáticas de Gestión 12.- Crea una página que saque la ventan de los números pares e impares. La práctica se llamará ventanaparimpar.html 13.- Crea una página que nos pida nuestro nombre y luego mediante un mensaje de alerta nos diga “Hola Pepito”. Tunombre.html Ahora lo que intentamos es crear una ventana que tiene controles sobre otras ventanas. Copia de chap05script08.html La ventana padre lo único que hace es crear una ventana hija. En la ventana hija la única novedad que nos encontramos es : function updateParent(newURL) { opener.document.location = newURL } Es decir va ir abriendo en la ventana padre los archivos que le vaya pasando por el parámetro newURL: <BODY BGCOLOR=WHITE> <CENTER> <H1>Panel de Control</H1> <H3><A HREF="javascript:updateParent('toc.html')">Table de Contenido</A><BR> <A HREF="javascript:updateParent('chapter.html')">Capitulos de ejemplo</A><BR> <A HREF="javascript:updateParent('about.html')">Acerca de los autores</A><BR> <A HREF="javascript:updateParent('buy.html')">¡Comprar el libro!</A></H3> </CENTER> </BODY> 14.- Crea una página que contenga un documento padre con una cabecera que ponga: EJERCICIOS DE JAVASCRIPT En la ventana hija debe aparecer un panel de control que contenga enlaces a todos los ejercicios realizados hasta el momento. La práctica se llamará panel.html Inmaculada Luque Estepa Página 24 de 28 8.- PRÁCTICAS 24.- CREAR UN PANEL DE CONTROL 25.- VERIFICACIÓN DE FORMULARIOS
  25. 25. Implantación de Aplicaciones Informáticas de Gestión Cada vez que necesitemos reunir información de los usuarios, tendremos que usar un formulario. Una vez rellenado el formulario, la información se envía a su servidor web, donde un CGI (Common Gateway Interface, Interfaz de Pasarela Común), es decir, un guión que se ejecuta en el servidor web interpreta los datos y actúa sobre ellos. A menudo, los datos se almacenan luego en una base de datos para su uso posterior. Es útil asegurare de que los datos que introduce el usuario están “limpios”, es decir, ajustados y en el formato adecuado, a esto se llama Validación del formulario. Aunque el CGI puede hacer la validación, es mucho más rápido y eficaz hacerlo en la computadora del cliente con JavaScript. Veamos cómo podemos verificar contraseñas chap06script01.html 1) function validForm(passForm) { if (passForm.passwd1.value == "") { alert("You must enter a password") passForm.passwd1.focus() return false Tras definir la función verifica que el valor del campo passwd1 está vacío, si es así, emite una ventana de alerta que solicita una entrada, devuelve el cursor al campo passwd1 y evalúa la función como falsa (return false) Con la línea: passForm.passwd1.focus() está indicando que tras mostrar el mensaje de alerta, el foco debe volver al elemento passwd1 del formulario y con return false evitar que dicho formulario sea enviado 2) if (passForm.passwd1.value != passForm.passwd2.value) { alert("Entered passwords did not match") passForm.passwd1.focus() passForm.passwd1.select() return false } return true Si el valor de passwd1 no es igual al valor de passwd2, es necesaria otra ventan de alerta. Esta vez, debe regresar al campo passwd1 y seleccionar su contenido, preparado para sustituir el contenido presumiblemente malo, y devolver falso para la función. Si la prueba tiene éxito, el guión devuelve un resultado verdadero. Fijémonos en la línea passForm.passwd1.select() En este caso con el método select(), lo que se hace es seleccionar el contenido erróneo que hemos introducido en el elemento del formulario passwd1 para que volvamos a teclear algo Inmaculada Luque Estepa Página 25 de 28
  26. 26. Implantación de Aplicaciones Informáticas de Gestión Con este ejemplo conocemos también un nuevo manejador de eventos onSubmit onSubmit=”return validForm(this)” Con esto indicamos que cuando el formulario sea enviado (pinchemos en el botón de enviar) el contenido de ese formulario debe ser devuelto a la función validForm para ser chequeado. 15.- Crea una página en la que además de verificar las contraseñas, saque un mensaje de alerta si no se he escrito nada en el nombre. La práctica se llamará validarnombre.html Hay dos formas de mostrar un menú desplegable para seleccionar una dirección URL o bien un archivo contenido en un directorio concreto. Quizás os parezca más fácil para empezar colocando un botón para seleccionar a dónde queremos ir. Echemos un vistazo a las dos opciones chap06seleccion.html En este ejemplo lo único nuevo que veremos es el comando selectedIndex: Éste es el comando que hace posible convertir el menú desplegable en una serie de enlaces. Hay que recordar que Javascript contabiliza todo y comienza desde cero. Esto quiere decir que a los cuatro elementos de la lista se les ha asignado un número, de cero a tres, comenzando con el primer elemento Option Selected, incluso aunque nunca entre en juego. El comando selectedIndex, nos permite elegir uno de los elementos de la lista y almacenar su número. La otra opción quizás un poco más enrevesada chap06ELEGIR.html no lleva botón como en el caso anterior, que era el que activaba el manejador de eventos onClick y llamaba a la función. Otra forma sería chap06Elegir1.html Ahora utiliza otro manejador de eventos onChange, se utiliza para que ocurra algo cuando los datos de un ítem del formulario han cambiado o se mueve fuera del elemento de formulario. Inmaculada Luque Estepa Página 26 de 28 9.- PRÁCTICAS 26.- SELECCIONAR E IR
  27. 27. Implantación de Aplicaciones Informáticas de Gestión 16.- Crear una página que contenga un menú desplegable con los nombres de los ejercicios para poder acceder a ellos, la forma de acceso a los ejercicios es opcional, el que quiera puede poner o no un botón que permita el acceso. La práctica se llamará selecciónpráctica.html En este apartado aprenderemos a utilizar JavaScript para visualizar en sus páginas la hora y la fecha locales, personalizar un saludo según el momento del día que sea. Los métodos de fecha que se utilizan en JavaScritp son los siguientes: • getDate () devuelve el número entero del día del mes ( 1 a get31) • getDay () devuelve el número entero del día de la semana (0 –domin a 6-sábado) • getFullYear () devuelve un entero de cuatro dígitos que represente el año actual • getHours () devuelve el número entero de las horas en formato militar (0 a 23) • getMinutes () devuelve el número entero de minutos de una fecha/hora (0 a 59) • getSeconds () devuelve el número entero de segundos de la hora actual (0 a 59) • getMonth () devuelve el número entero del mes actual de una fecha/hora (0 a 11) Veamos cómo con estos métodos podemos reflejar la hora en nuestra página web chap07script1.html En este caso lo único que hace es asignar a la variable now, la fecha actual (la que tiene el ordenador) y a partir de ahí va calculando el día del mes, el mes y el día de la semana. Otro guión interesante a partir del cual vamos trabajando con los días de la semana chap07script2.html o bien con las horas del día chap07script3.html Inmaculada Luque Estepa Página 27 de 28 10.- PRÁCTICAS 11.- PRÁCTICAS 27.- MÉTODOS DE FECHA
  28. 28. Implantación de Aplicaciones Informáticas de Gestión 17.- Crea en una casilla tipo texto de un formulario un reloj que me indique la hora actual. Esta práctica se llamará reloj.html 18.- Crea una página con un formulario que contenga una caja de texto donde se solicite el mes de nacimiento del usuario en número. Antes de enviar el formulario deberá comprobarse si el mes oscila entre 1 y 12. Si el valor es correcto deberá mostrar un mensaje de alerta “Naciste en “ y el nombre del mes. Para ello se deberá definir un array que contenga los nombres de los meses. Inmaculada Luque Estepa Página 28 de 28

×