Js

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

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”);
OBJETO : window
3.- OBJETOS

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
OBJETO : document

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:
OBJETO : navigator
OBJETO : history
OBJETO : location

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
OBJETO : form
OBJETO : screen
4.- MÉTODOS

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>
método
propiedad
4.- DÓNDE COLOCAR LOS GUIONES

<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.
5.- OCULTAR GUIONES A NAVEGADORES ANTIGUOS

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.
;
;
6.- AVISAR AL USUARIO
7.- REDIRECCIONAR AL USUARIO CON UN VÍNCULO

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}
1.-PRÁCTICAS
8.- SENTENCIAS CONDICIONALES

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

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.

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>
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++) {

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.
2.- PRÁCTICAS
9.- OPERADORES

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:
10.- FUNCIONES
11.- INSERTAR MÁS DE UN GUIÓN
12.- BARRAS DE ESTADO CON DESPLAZAMIENTO

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( )”
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

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
3.- PRÁCTICAS
14.- IMÁGENES DE SUSTITUCIÒ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

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>
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

<TITLE>Una imagen de sustitución</TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">

</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:
18.- BANNER CÍCLICOS

• 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]
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

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.
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

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
6.- PRÁCTICAS
21.- CARGAR DISTINOS CONTENIDOS EN 1 VENTANA
22.- ACTUALIZAR UNA VENTANA DESDE OTRA

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.
7.- PRÁCTICAS
23.- EN UNA ARCHIVO VARIAS VENTANAS

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
8.- PRÁCTICAS
24.- CREAR UN PANEL DE CONTROL
25.- VERIFICACIÓN DE FORMULARIOS

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

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.
9.- PRÁCTICAS
26.- SELECCIONAR E IR

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
10.- PRÁCTICAS
11.- PRÁCTICAS
27.- MÉTODOS DE FECHA

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.

Js

Más contenido relacionado

La actualidad más candente (19)

Destacado (7)

Similar a Js (20)

Último (20)

Js