TUTORIAL DE JAVASCRIPT

1. ¿Qué es JavaScript ?

JavaScript es un lenguaje interpretado que permite incluir macros en páginas Web.

Estas macros se ejecutan en el ordenador del visitante de nuestras páginas, y no en el
servidor (algo muy interesante, porque los servidores Web suelen estar sobrecargados,
mientras que los PC's de los usuarios no suelen estarlo).

JavaScript proporciona los medios para:

 Controlar las ventanas del navegador y el contenido que muestran.

 Programar páginas dinámicas simples
 Evitar depender del servidor Web para cálculos sencillos.
 Capturar los eventos generados por el usuario y responder a ellos sin salir a
Internet.
 Comprobar los datos que el usuario introduce en un formulario antes de
enviarlos.
 Comunicarse con el usuario mediante diversos métodos.

La característica de JavaScript que más simplifica la programación es que, aunque el

lenguaje soporta cuatro tipos de datos, no es necesario declarar el tipo de las variables,
argumentos de funciones ni valores de retorno de las funciones. El tipo de las variables
cambia implícitamente cuando es necesario, lo que dificulta el desarrollo de programas
complejos, pero ayuda a programar con rapidez macros sencillas. En esto, JavaScript se
separa totalmente de lenguajes como C, C++ o Java.

JavaScript ha sido inventado por Netscape, que comenzó a ofrecerlo como parte de su
Navigator v.2.0. El nombre original de JavaScript fue LiveScript. Al ser código
interpretado, JavaScript es más lento que Java, pero en la práctica no suele ser un factor
de importancia.

Obviamente el objetivo de Netscape al introducir JavaScript es tratar de establecer un

estándar de programación de macros ejecutables en el navegador Web, que de ser
adoptado por los Webmasters, facilitaría la implantación de los navegadores de
Netscape en el mercado. En respuesta a este reto, Microsoft soporta una versión parcial
de JavaScript, con el nombre de JScript, en su Internet Explorer. El primer
inconveniente de este estado de cosas es que las macros JavaScript sólo se ejecutan con
normalidad en navegadores Netscape, por lo que el Webmaster es responsable de
configurar la página para que pueda verse adecuadamente en un navegador que no sea
Netscape.

Una solución sería utilizar en nuestras macros el subconjunto de funciones comunes a

JavaScript y JScript, para soportar los navegadores Netscape y MicroSoft, pero esta
solución nos obligaría a renunciar a muchas de las características del lenguaje.

2. Las Bases del Lenguaje JavaScript

El lenguaje JavaScript se inserta en documentos HTML(HyperText Markup Languaje),

de forma que su código queda reflejado en la propia página y no es llamado o cargado
de ninguna fuente externa (por ejemplo un archivo). Se trata de un lenguaje interpretado
puro (ni compilación, ni generación de intermedios codificados de ningún tipo) y
sensible a mayúsculas, aunque algunas implementaciones ignoran en parte este último
extremo.
El lenguaje JavaScript por otra parte, téngalo muy presente, no crea aplicaciones
autónomas, de manera que sólo sirve para incluirse en documentos HTML y fuera de
ellos no tiene ninguna vigencia.

Todo el código de JavaScript debe explicitarse en la página HTML según el formato:

<SCRIPT
Language="JavaScript"
src ="archivo.js">
<!--
// Aquí irá su código
// -->
</SCRIPT>

Observe que el tag (etiqueta) utilizado es <SCRIPT LANGUAGE=...>.....</SCRIPT>.

En LANGUAGE se indica qué lenguaje script se utilizará, aquí indicamos JavaScript,
ya que es lo que nos ocupa en estos momentos. Note también las acotaciones de
comentario <!-- al comienzo y //--> al final del área de escritura de código. Esto es para
ocultarlo a los navegadores más antiguos, que no dan soporte a lenguajes script.
Otro atributo de la directiva script es src, que puede usarse para incluir un archivo
externo que contiene JavaScript y que quiere incluirse en el código HTML.

Si bien el código JavaScript puede incluirse en cualquier lugar de una página HTML, el
modo de comportarse puede ser diferente. Lo habitual es hacerlo antes del cuerpo del
documento, es decir, antes de la etiqueta <BODY>.

3. Conceptos Generales

JavaScript, diferencia entre mayúsculas y minúsculas, por lo cual habrá que tener mucha
precaución a la hora de escribir las expresiones. Se pueden escribir comentarios: cuando
son de una linea bastará precederlos de "//", cuando son de más de una línea se
escribirán entre "/*" y "*/". Tras cada orden de JavaScript va un ";", cuando son varías
órdenes se pueden agrupar, escribiéndolas entre "{" y "}".

Expresiones JavaScript

Se componen de operadores, variables y constantes.

Operadores

1. Operadores Aritméticos

Operador Nombre Ejemplo Descripción

+ Suma 5+6 Suma dos números

- Substracción 7-9 Resta dos números

* Multiplicación 6*3 Multiplica dos números

/ División 4/8 Divide dos números

% Módulo: el resto 7%2 Devuelve el resto de dividir ambos

después de la división números, en este ejemplo el
 resultado es 1

++ Incremento. Suma 1 al contenido de una

a++
variable.

-- Decremento. Resta 1 al contenido de una

a--
variable.

- Invierte el signo de un
-a Invierte el signo de un operando.
operando.

2. Operadores de comparación

Operador Descripción

== " Igual a" devuelve true si los operandos son iguales

=== Estrictamente "igual a"

!= " No igual a" devuelve true si los operandos no son iguales

!== Estrictamente " No igual a"

> " Mayor que" devuelve true si el operador de la izquierda es mayor que el de
la derecha.

>= " Mayor o igual que " devuelve true si el operador de la izquierda es mayor o
igual que el de la derecha.

< " Menor que" devuelve true si el operador de la izquierda es menor que el de
la derecha.

<= "Menor o igual que" devuelve true si el operador de la izquierda es menor o

igual que el de la derecha.

3. Operadores Lógicos
Operador Descripción

&& " Y " Devuelve true si ambos operadores son true.

|| " O " Devuelve true si uno de los operadores es true.

! "No" Devuelve true si la negación del operando es true.

Constantes

Se trata de bloques de datos (cadenas, números) que JavaScript interpreta literalmente.

Las cadenas numéricas se escriben tal cual, mientras que las de cadenas se escriben
entre comillas dobles o sencillas. Por ejemplo:
x = 25     a = "Hola, qué tal"

Variables

Se trata de una palabra sin comillas que se puede utilizar para almacenar valores. Los
nombres asignados a las variables deben comenzar siempre por una letra o un subrayado
bajo (_) y no pueden contener espacios en blanco. Se puede utilizar el parámetro var
antes del nombre de la variable para indicar que se está creando una nueva variable.

Cuando a una variable no se le asigna un valor, tiene valor indefinido (undefined). Si se

le pone un valor, pueden ocurrir dos cosas:

-Si fue declarada sin "var", se produce un error en tiempo de ejecución.

-Si fue declarada con "var", devuelve el valor NaN (Not a Number).

Por ejemplo: var a indicaría que se ha creado la variable a. No obstante en JavaScript no

es preciso crear la variable, sino que al asignarle un valor se creará automáticamente. En
el ejemplo usado en el apartado anterior de constantes hemos creados 2 variables, cuyos
nombre son "x" y "a" y cuyos valores son 25 y la expresión "Hola qué tal",
respectivamente.

Tipos de Datos:

Números Enteros o coma flotante.

Boleanos True o False.

Cadenas Los tipos de datos cadena deben ir delimitados por comillas simples o
dobles.
Objetos Obj = new Object();

Nulos Null

Indefinidos Un valor indefinido es el que corresponde a una variable que ha sido

creada pero no le ha sido asignado un valor.

Objetos JavaScript

Javascript es un lenguaje orientado a objetos, es decir, podrá manejar diferentes objetos,

tales como: la pantalla, la ventana, el documento, las etiquetas, los formularios.

Cada uno de estos objetos tienen una serie de características, a las que llamaremos
propiedades. Además cada objeto podrá realizar toda una serie de cosas, a las que
llamaremos métodos.

Para hacer referencia a una propiedad se utiliza la sintáxis: nombredeobjeto.propiedad y

para hacer referencia un método se utiliza la misma sintáxis aunque suele acabar con
una apertura y cierre de paréntesis: nombredeobjeto.metodo().

A continuación hay una relación de los objetos que puede manejar JavaScript.

Objeto documento (document):

Hace referencia a la página que se esté visualizando en ese momento. Algunas de sus
propiedades son:

bgColor (color del fondo), fgColor (color del texto), linkColor, alinkColor y
vlinkColor (color de los vínculos), location (la URL del documento),
lastModified (última modificación), title (título de la página), links (enlaces del
documento).

Algunos de sus métodos son:

clear, close (cerrar), open (abrir), write (escribir)

 Ejemplos:
document.write ("Hola, buenas tardes"). Escribirá la cadena Hola, buenas
tardes.
document.links.length. Mostrará el número de enlaces que tiene este documento.

document.links[1].href. Mostrará la URL del segundo enlace (la numeración

comienza por 0).
document.lastModified. Escribirá la fecha y hora en que este documento se
modificó por última vez.

Objeto cadena (string):

Propiedades
 length. Valor numérico que nos indica la longitud en caracteres de la cadena
dada.
 prototype. Nos permite asignar nuevas propiedades al objeto String.
Métodos
 anchor(nombre). Crea un enlace asignando al atributo NAME el valor de
'nombre'. Este nombre debe estar entre comillas " "
 big(). Muestra la cadena de caracteres con una fuente grande.
 blink(). Muestra la cadena de texto con un efecto intermitente.
 charAt(indice). Devuelve el carácter situado en la posición especificada por
'indice'.
 fixed(). Muestra la cadena de caracteres con una fuente proporcional.
 fontcolor(color). Cambia el color con el que se muestra la cadena. La variable
color debe ser especificada entre comillas: " ", o bien siguiendo el estilo de
HTML, es decir "#RRGGBB" donde RR, GG, BB son los valores en
hexadecimal para los colores rojo, verde y azul, o bien puede ponerse un
identificador válido de color entre comillas. Algunos de estos identificadores son
"red", "blue", "yellow", "purple", "darkgray", "olive", "salmon", "black",
"white", ...
 fontsize(tamaño). Cambia el tamaño con el que se muestra la cadena. Los
tamaños válidos son de 1 (más pequeño) a 7 (más grande).
indexOf(cadena_buscada,indice) Devuelve la posición de la primera ocurrencia
 de 'cadena_buscada' dentro de la cadena actual, a partir de la posición dada por
'indice'. Este último argumento es opcional y, si se omite, la busqueda comienza
por el primer carácter de la cadena.
 italics(). Muestra la cadena en cursiva.
 lastIndexOf(cadena_buscada,indice). Devuelve la posición de la última
ocurrencia de 'cadena_buscada' dentro de la cadena actual, a partir de la posición
dada por 'indice', y buscando hacia atrás. Este último argumento es opcional y, si
se omite, la busqueda comienza por el último carácter de la cadena.
 link(URL). Convierte la cadena en un vínculo asignando al atributo HREF el
valor de URL.
 small(). Muestra la cadena con una fuente pequeña.
 split(separador). Parte la cadena en un array de caracteres. Si el carácter
separador no se encuentra, devuelve un array con un sólo elemento que coincide
con la cadena original. A partir de NS 3, IE 4 (JS 1.2).
 strike(). Muestra la cadena de caracteres tachada.
 sub(). Muestra la cadena con formato de subíndice.
 substring(primer_Indice,segundo_Indice). Devuelve la subcadena que comienza
en la posición 'primer_Indice + 1' y que finaliza en la posición 'segundo_Indice'.
Si 'primer_Indice' es mayor que 'segundo_Indice', empieza por 'segundo_Indice
+ 1' y termina en 'primer_Indice'. Si hacemos las cuentas a partir de 0, entonces
es la cadena que comienza en 'primer_Indice' y termina en 'segundo_Indice - 1'
(o bien 'segundo_Indice' y 'primer_Indice - 1' si el primero es mayor que el
segundo).
 sup(). Muestra la cadena con formato de superíndice.
 toLowerCase(). Devuelve la cadena en minúsculas.
 toUpperCase(). Devuelve la cadena en minúsculas.

Ejemplos:
nombre = "Juan Pérez". Crea la variable nombre y le asigna la cadena "Juan
Pérez".
document.write (nombre.toUpperCase). Escribirá JUAN PÉREZ.
document.write (nombre.charAt(2)). Escribirá "a", es decir, la tercera letra de la
cadena.
 Objeto fecha (date):
Hace referencia a la página que se esté visualizando en ese momento. No tiene
propiedades y algunos de sus métodos son:

Métodos
 getDate(). Devuelve el día del mes actual como un entero entre 1 y 31.
 getDay(). Devuelve el día de la semana actual como un entero entre 0 y 6.
 getHours(). Devuelve la hora del día actual como un entero entre 0 y 23.
 getMinutes(). Devuelve los minutos de la hora actual como un entero entre 0 y
59.
 getMonth(). Devuelve el mes del año actual como un entero entre 0 y 11.
 getSeconds(). Devuelve los segundos del minuto actual como un entero entre 0 y
59.
 getTime(). Devuelve el tiempo transcurrido en milisegundos desde el 1 de enero
de 1970 hasta el momento actual.
 getYear(). Devuelve el año actual como un entero.
 setDate(día_mes). Pone el día del mes actual en el objeto Date que estemos
usando.
 setDay(día_semana). Pone el día de la semana actual en el objeto Date que
estemos usando.
 setHours(horas). Pone la hora del día actual en el objeto Date que estemos
usando.
 setMinutes(minutos). Pone los minutos de la hora actual en el objeto Date que
estemos usando.
 setMonth(mes). Pone el mes del año actual en el objeto Date que estemos
usando.
 setSeconds(segundos). Pone los segundos del minuto actual en el objeto Date
que estemos usando.
 setTime(milisegundos). Pone la fecha que dista los milisegundos que le pasemos
del 1 de enero de 1970 en el objeto Date que estemos usando.
 setYear(año). Pone el año actual en el objeto Date que estemos usando.
 toGMTString(). Devuelve una cadena que usa las convenciones de Internet con
la zona horaria GMT.
 Ejemplos:
fecha = new date(). Crea una variable llamada fecha, en la que se almacena la
fecha y hora actual

Objeto pantalla (screen):

Contiene la información sobre la pantalla que usa el navegador. Algunas de sus
propiedades son:

colorDepth (número de bits de colores en uso), height (altura de la pantalla en

pixels), pixelDepth (número de bits por pixel), width (anchura de la pantalla en
pixels).

Ejemplos:
document.write ("Estás viendo la página con una resolución de
"+width+"*"+height+" pixels". Escribirá la resolución.
if (width<700 && height<500) alert ("Estas páginas están optimizadas para una
resolución de 800*600 pixels y tu tienes una configuración inferior. \n Por favor,
cambia tu configuración"). En el caso de que la resolución de la pantalla sea
inferior a 700*500 saldrá una ventana de alerta con el mensaje que hayamos
escrito.
if (width<700 && height<500) location.href="paginapeque.htm" else
location.href="paginagrande.htm". Mostrará una página u otra según que la
resolución sea inferior o mayodr de 700*500.

Objeto Matrices (Array): conjunto de 0 o más expresiones encerradas entre corchetes

([]). Ejemplo:

coches=["BMW","Mercedes","Audi","Volvo"]
Coches es un array de 4 elementos.
Podemos dejar elementos del array vacíos:
ciudades=["Madrid",,"Valladolid"]
ciudades=[,,"Pamplona"]
ciudades=["Madrid","Pamplona",,]
 Propiedades
 length. Esta propiedad nos dice en cada momento la longitud del array, es decir,
cuántos elementos tiene.
 prototype. Nos permite asignar nuevas propiedades al objeto String.
Métodos
 join(separador). Une los elementos de las cadenas de caracteres de cada
elemento de un array en un string, separando cada cadena por el separador
especificado.
 reverse(). Invierte el orden de los elementos del array.
 sort(). Ordena los elementos del array siguiendo el orden lexicográfico.

Ventana (window): es el de más alto nivel y tiene numerosas propiedades y métodos

para trabajar con él. Algunos de sus propiedades son:

 closed. booleano que nos dice si la ventana está cerrada.

 defaultStatus. Cadena que contiene el texto por defecto que aparece en la barra
de estado (status bar) del navegador.
 frames. Es un array: cada elemento de este array (frames[0], frames[1], ...) es
uno de los frames que contiene la ventana. Su orden se asigna según se definen
en el documento HTML.
 history. Se trata de un array que representa las URLS visitadas por la ventana
(están almacenadas en su historial).
 length. Variable que nos indica cuántos frames tiene la ventana actual.
 location. Cadena con la URL de la barra de dirección.
 name. Contiene el nombre de la ventana, o del frame actual.
 opener. Es una referencia al objeto window que lo abrió, si la ventana fue abierta
usando el método open() que veremos cuando estudiemos los métodos.
 parent. Referencia al objeto window que contiene el frameset.
 self. Es un nombre alternativo del window actual.
 status. String con el mensaje que tiene la barra de estado.
 top. Nombre alternativo de la ventana del nivel superior.
 window. Igual que self: nombre alternativo del objeto window actual.
Algunos de sus métodos son:
 alert(mensaje). Muestra el mensaje 'mensaje' en un cuadro de diálogo
 blur(). Elimina el foco del objeto window actual. A partir de NS 3, IE 4.
 clearInterval(id). Elimina el intervalo referenciado por 'id' (ver el método
setInterval(), también del objeto window). A partir de NS 4, IE 4.
 clearTimeout(nombre). Cancela el intervalo referenciado por 'nombre' (ver el
método setTimeout(), también del objeto window).
 close(). Cierra el objeto window actual.
 confirm(mensaje). Muestra un cuadro de diálogo con el mensaje 'mensaje' y dos
botones, uno de aceptar y otro de cancelar. Devuelve true si se pulsa aceptar y
devuelve false si se pulsa cancelar.
 focus(). Captura el foco del ratón sobre el objeto window actual.
 moveBy(x,y). Mueve el objeto window actual el número de pixels especificados
por (x,y).
 moveTo(x,y). Mueve el objeto window actual a las coordenadas (x,y).
 open(URL,nombre,caracteristicas). Abre la URL que le pasemos como primer
parámetro en una ventana de nombre 'nombre'. Si esta ventana no existe, abrirá
una ventana nueva en la que mostrará el contenido con las características
especificadas. Las características que podemos elegir para la ventana que
queramos abrir son las siguientes:
o toolbar = [yes|no|1|0]. Nos dice si la ventana tendrá barra de herramientas
(yes,1) o no la tendrá (no,0).
o location = [yes|no|1|0]. Nos dice si la ventana tendrá campo de
localización o no.
o directories = [yes|no|1|0]. Nos dice si la nueva ventana tendrá botones de
dirección o no.
o status = [yes|no|1|0]. Nos dice si la nueva ventana tendrá barra de estado
o no.
o menubar = [yes|no|1|0]. Nos dice si la nueva ventana tendrá barra de
menús o no.
o scrollbars = [yes|no|1|0]. Nos dice si la nueva ventana tendrá barras de
desplazamiento o no.
 o resizable = [yes|no|1|0]. Nos dice si la nueva ventana podrá ser cambiada
de tamaño (con el ratón) o no.
o width = px. Nos dice el ancho de la ventana en pixels.
o height = px. Nos dice el alto de la ventana en pixels.
o outerWidth = px. Nos dice el ancho *total* de la ventana en pixels.
o outerHeight = px. Nos dice el alto *total* de la ventana el pixels.
o left = px. Nos dice la distancia en pixels desde el lado izquierdo de la
pantalla a la que se debe colocar la ventana.
o top = px. Nos dice la distancia en pixels desde el lado superior de la
pantalla a la que se debe colocar la ventana.
 prompt(mensaje,respuesta_por_defecto). Muestra un cuadro de diálogo que
contiene una caja de texto en la cual podremos escribir una respuesta a lo que
nos pregunte en 'mensaje'. El parámetro 'respuesta_por_defecto' es opcional, y
mostrará la respuesta por defecto indicada al abrirse el cuadro de diálogo. El
método retorna una cadena de caracteres con la respuesta introducida.
 scroll(x,y). Desplaza el objeto window actual a las coordenadas especificadas
por (x,y).
 scrollBy(x,y). Desplaza el objeto window actual el número de pixels
especificado por (x,y).
 scrollTo(x,y). Desplaza el objeto window actual a las coordenadas especificadas
por (x,y).
 setInterval(expresion,tiempo). Evalua la expresión especificada después de que
hayan pasado el número de milisegundos especificados en tiempo. Devuelve un
valor que puede ser usado como identificativo por clearInterval().
 setTimeout(expresion,tiempo). Evalua la expresión especificada después de que
hayan pasado el número de milisegundos especificados en tiempo. Devuelve un
valor que puede ser usado como identificativo por clearTimeout().
 open('nombre_página','nombre_ventana','propiedades:width, height, top,
left, ...'), close (para cerrar la ventana), print (para imprimir la ventana), ... Entre
sus propiedades tenemos: defaultStatus (para configurar el mensaje por defecto
de la barra de estado), status (mensajes en la barre de estado), ...
Formularios

Este objeto es el contenedor de todos los elementos del formulario. Como ya vimos al
tratar el objeto document, los formularios se agrupan en un array dentro de document.
Cada elemento de este array es un objeto de tipo form.

Propiedades
 action. Es una cadena que contiene la URL del parámetro ACTION del form, es
decir, la dirección en la que los datos del formulario serán procesados.
 elements. Es un array que contiene todos los elementos del formulario, en el
mismo orden en el que se definen en el documento HTML. Por ejemplo, si en el
formulario hemos puesto, en este orden, una caja de texto, un checkbox y una
lista de selección, la caja de texto será elements[0], el checkbox será elements[1]
y la lista de selección será elements[2].
 encoding. Es una cadena que tiene la codificación mime especificada en el
parámetro ENCTYPE del form.
 method. Es una cadena que tiene el nombre del método con el que se va a
recibir/procesar la información del formulario (GET/POST).

Métodos
 reset(). Resetea el formulario: tiene el mismo efecto que si pulsáramos un botón
de tipo RESET dispuesto en el form.
 submit(). Envía el formulario: tiene el mismo efecto que si pulsáramos un botón
de tipo SUBMIT dispuesto en el form.

Los objetos text, textarea y password

Estos objetos representan los campos de texto dentro de un formulario. Además, el

objeto password es exactamente igual que el text salvo en que no muestra los
caracteres introducidos por el usuario, poniendo asteriscos (*) en su lugar.

Propiedades
 dafaultValue. Es una cadena que contiene el valor por defecto que se le ha dado
a uno de estos objetos por defecto.
  name. Es una cadena que contiene el valor del parámetro NAME.
 value. Es una cadena que contiene el valor del parámetro VALUE.
 maxlength. Número máximo de caracteres que puede contener el campo de
texto.

Métodos
 blur(). Pierde el foco del ratón sobre el objeto especificado.
 focus(). Obtiene el foco del ratón sobre el objeto especificado.
 select(). Selecciona el texto dentro del objeto dado.

<HTML>
<HEAD>
   <title>Ejemplo de JavaScript</title>
</HEAD>
<script LANGUAGE="JavaScript">
<!--
   function Mostrar()
   {
      alert('Su nombre: ' + formulario.nombre.value);
      alert('El password: ' + formulario.pass.value);
   }
//-->
</script>
<BODY>
<form action="procesa.phtml" name="formulario" id="formulario" method="GET">
Nombre: <input type="text" name="nombre" value="Tu nombre" maxlength="15"><br>

Password: <input type="password" name="pass" maxlength="10"><br>

</form>
<a href="javascript:Mostrar();">Mostrar datos</a><br>

</BODY>
</HTML>

El objeto button

Tenemos tres tipos de botones: un botón genérico, 'button', que no tiene acción
asignada, y dos botones específicos, 'submit' y 'reset'. Estos dos últimos sí que tienen
una acción asignada al ser pulsados: el primero envía el formulario y el segundo limpia
los valores del formulario.
Propiedades
 name. Es una cadena que contiene el valor del parámetro NAME.
 value. Es una cadena que contiene el valor del parámetro VALUE.

Métodos
 click(). Realiza la acción de pulsado del botón

<HTML>
<HEAD>
   <title>Ejemplo de JavaScript</title>
</HEAD>
<script LANGUAGE="JavaScript">
<!--
   function Mostrar(boton)
   {
      alert('Ha hecho click sobre el boton: ' + boton.name+', de
valor:'+boton.value);
      return true;
   }
//-->
</script>
<BODY>
<form action="procesa.phtml" name="formulario" id="formulario" method="GET">
Un boton: <input type="button" name="Boton1" value="El boton 1"
OnClick="Mostrar(this);"><br><br>
Un boton: <input type="button" name="Boton2" value="El boton 2"
OnClick="Mostrar(this);"><br><br>
Un boton: <input type="button" name="Boton3" value="El boton 3"
OnClick="Mostrar(this);"><br>
</form>

</BODY>
</HTML>

El objeto checkbox

Las "checkboxes" nos permiten seleccionar varias opciones marcando el cuadrito que
aparece a su izquierda. El cuadrito pulsado equivale a un "sí" y sin pulsar a un "no" o, lo
que es lo mismo, a "true" o "false".

Propiedades
 checked. Valor booleano que nos dice si el checkbox está pulsado o no
  defaultChecked. Valor booleano que nos dice si el checkbox debe estar
seleccionado por defecto o no
 name. Es una cadena que contiene el valor del parámetro NAME.
 value. Es una cadena que contiene el valor del parámetro VALUE.

Métodos
 click(). Realiza la acción de pulsado del botón

<HTML>
<HEAD>
   <title>Ejemplo de JavaScript</title>
</HEAD>
<script LANGUAGE="JavaScript">
<!--
   function Mostrar(boton)
   {
      msg="Opcion 1:"+formulario.check1.checked+"\n"
      msg+="Opcion 2:"+formulario.check2.checked+"\n"
      msg+="Opcion 3:"+formulario.check3.checked+"\n"
      alert(msg);
   }
//-->
</script>
<BODY>
<form action="procesa.phtml" name="formulario" id="formulario" method="GET">

<input type="checkbox" name="check1" checked> Opcion 1<br>

<input type="checkbox" name="check2"> Opcion 2<br>
<input type="checkbox" name="check3" checked> Opcion 3<br>

</form>
<A href="javascript:Mostrar()">Ver valores</A>
</BODY>
</HTML>
El objeto radio

Al contrario que con los checkbox, que nos permiten elegir varias posibilidades entre las
dadas, los objetos radio sólo nos permiten elegir una de entre todas las que hay. Están
pensados para posibilidades mútuamente excluyentes (no se puede ser a la vez mayor de
18 años y menor de 18 años, no se puede estar a la vez soltero y casado, etc.).

Propiedades
 checked. Valor booleano que nos dice si el radio está seleccionado o no.
 defaultChecked. Valor booleano que nos dice si el radio debe estar seleccionado
por defecto o no.
 length. Valor numérico que nos dice el número de opciones dentro de un grupo
de elementos radio.
 name. Es una cadena que contiene el valor del parámetro NAME.
 value. Es una cadena que contiene el valor del parámetro VALUE.

Hay que recordar que para agrupar elementos de tipo radio, todos ellos deben tener el
mismo valor en NAME.

Métodos
 click(). Realiza la acción de pulsado del botón.

<HTML>
<HEAD>
   <title>Ejemplo de JavaScript</title>
</HEAD>
<script LANGUAGE="JavaScript">
<!--
   function Mostrar(boton)
   {
      msg="Elementos:"+formulario.edad.length+"\n";
      msg+="Menor de 18 años:"+formulario.edad[0].checked+"\n";
      msg+="Entre 18 y 60 años:"+formulario.edad[1].checked+"\n";
      msg+="Mayor de 60 años:"+formulario.edad[2].checked+"\n";
      
      alert(msg);
   }
//-->
</script>
<BODY>
<form action="procesa.phtml" name="formulario" id="formulario" method="GET">

Edad:<br>
<input type="radio" name="edad" value="<18"> Menor de 18 años.<br>
<input type="radio" name="edad" value=">18 y <60" checked> Entre 18 y 60
años.<br>
<input type="radio" name="edad" value=">60"> Mayor de 60 años.<br>

</form>
<A href="javascript:Mostrar()">Ver valores</A>
</BODY>
</HTML>

El objeto select

Este objeto representa una lista de opciones dentro de un formulario. Puede tratarse de
una lista desplegable de la que podremos escoger alguna (o algunas) de sus opciones.

Propiedades
del objeto select
 length. Valor numérico que nos indica cuántas opciones tiene la lista
 name. Es una cadena que contiene el valor del parámetro NAME
 options. Se trata de un array que contiene cada una de las opciones de la lista.
Este array tiene, a su vez, las siguientes propiedades:
o defaultSelected. Valor booleano que nos indica si la opción está
seleccionada por defecto.
o index. Valor numérico que nos da la posición de la opción dentro de la
lista.
o length. Valor numérico que nos dice cuántas opciones tiene la lista.
o options. Cadena con todo el código HTML de la lista.
o selected. Valor booleano que nos dice si la opción está actualmente
seleccionada o no.
o text. Cadena con el texto mostrado en la lista de una opción concreta.
o value. Es una cadena que contiene el valor del parámetro VALUE de la
opción concreta de la lista.
 selectedIndex. Valor numérico que nos dice cuál de todas las opciones
disponibles está actualmente seleccionada.
<HTML>
<HEAD>
   <title>Ejemplo de JavaScript</title>
</HEAD>
<script LANGUAGE="JavaScript">
<!--
   function Mostrar(boton)
   {
      msg="Elementos:"+formulario.edad.length+"\n";
      msg+="Edad:
"+formulario.edad.options[formulario.edad.selectedIndex].value+"\n";
      
      alert(msg);
   }
//-->
</script>
<BODY>
<form action="procesa.phtml" name="formulario" id="formulario" method="GET">

Edad:<br>
<select name="edad">
   <option value="<18" SELECTED>Menor de 18 años</option>
   <option value=">18 y <60">Entre 18 y 60 años</option>
   <option value=">60">Mayor de 60 años</option>
</select>

</form>
<A href="javascript:Mostrar()">Ver valores</A>
</BODY>
</HTML>

El objeto hidden

Gracias a este objeto podemos almacenar información extra en el formulario de forma

completamente transparente para el usuario, pues no se verá en ningún momento que
tenemos estos campos en el documento.

Es parecido a un campo de texto (objeto text) salvo que no tiene valor por defecto (no
tiene sentido pues el usuario no va a modificarlo) y que no se puede editar.

Propiedades
 name. Es una cadena que contiene el valor del parámetro NAME.
 value. Es una cadena que contiene el valor del parámetro VALUE.
Otros objetos:
ancla (anchor): contiene una lista de todas las señales (A NAME) de ese documento.

Objetos para formularios: botón (button), casilla de verificación (checkbox), borrar

(reset), enviar (submit), seleccionar (select), password.

localización (location): contiene información sobre la URL de la página en uso en ese

momento.

historia (history): contiene una lista de todos los elementos del historial del navegador.
A través de los métodos Back, Forward y Go podremos desplazarnos por ellos.

navegador (navigator): contiene información sobre el navegador que usamos para ver la
página, a través de propiedades como: appName, appVersion, ...

matematicas (math): se trata de un objeto predifinido de JavaScript con numerosas

propiedades y métodos para manejar datos y funciones numéricas.

marco (frame): contiene una lista de todos los marcos que se muestran en ese momento
en la pantalla. Permite desplazarse por ellos, abrir nuevos, ...

Parámetros JavaScript

Permiten construir bucles dentro de un script para que ciertos comandos se ejecuten
varias veces, condicionales para decirle en qué condiciones queremos que se ejecute. A
continuación algunos de ellos:

Parámetro Descripción Ejemplo

 
Condicionales
if (condición) Ejecuta el código sólo si la if (navigator.appName
{código} condición es verdadera == "Netscape") {
document.write
("Bienvenido/a. Usas
Netscape")
}
if (condición) Ejecuta el código1 si la if (navigator.appName
{código1} else condición es verdadera, y == "Netscape") {
{condicion2} en caso contrario, el document.write
codigo2. ("Bienvenido/a. Usas
Netscape")
else
document.write
("Bienvenido/a. Usas
Explorer")
}
(condición) ? Si la condición es ns4 =
valor1:valor2 verdadera, devuelve el (document.layers)?
valor1, si es falsa devuelve true:false
el valor2. ie4 = (document.all)?
true:false
Bucles
for(inicio, mientras, Establece un bucle con un for(x=1;x<6;x++){
incremento) contador que comenzará document.write("Hola
{código} con el valor definido en "+x)}
inicio y que se irá
incrementando con el valor
definido en incremento. El
código se ejecutará si la
condición definida en
mientras se cumple.
while(condición) Repite el código mientras respuesta="";
{código} que la condición sea while(respuesta !=
verdadera. "Gracias"){
respuesta = prompt
("Bienvenido/a. Se
educado/a","")
} alert ("Muy bien");

break Finaliza el bucle y ejecuta  

el primer parámetro
posterior al bucle.
continue Vuelve a ejecutar el  
principio del bucle.
Manipulación de objetos
this Hace referencia al objeto  
activo o al mencionado en
el método.
with (objeto) Especifica cuál es el objeto  
{código} a utilizar cuando se ejecute
el código.
Varios
function Crea una función function escribir(){
nombre(argumentos) personalizada con el document.write("hola");
{código} nombre que se haya
especificado. Se pueden (es document.write("¿Cómo
opcional) usar argumentos estás?")}
listándolos separados por
comas. Al llamar a la
función se ejecutará el
código establecido.
return valor Finaliza una función  
personalizadad y devuelve
un valor al código que
invoca la función.
var nombre Crea una nueva variable var Apellidos
con el nombre que se Apellidos=Cascón
especifique. En JavaScript
no es imprescindible crear
una variable de esete modo
para poderla usar.

Eventos en JavaScript

Es la forma de decirle a JavaScript cuándo tiene que llevar a cabo una acción:

Evento Descripción
 
onClick Se ejecuta cuando se pulsa con el botón izquierdo del
ratón.
onChange Se ejecuta cuando se modifica el contenido de un
input en un formulario.
onFocus Se ejecuta cuando se situa el cursor de inserción
dentro de un elemento de un formulario.
onBlur Se ejecuta cuando se situa el cursor de inserción fuera
de un elemento de un formulario.
onMouseOver Se ejecuta cuando se pone el puntero del ratón sobre
él (sin apretar).
onMouseOut Se ejecuta cuando el puntero del ratón nos lo
llevamos de un zona sensible (por ejemplo, un
enlace).
onSelect Se ejecuta cuando se selecciona un elemento de una
lista en un formulario.
onSubmit Se ejecuta cuando se hace clic sobre el botón de
 enviar en un formulario.
onLoad Se ejecuta cuando se abre por primera vez una
página.
onUnLoad Se ejecuta cuando se sale de la página activa.
HREF:javascript Se ejecuta cuando se hace clic sobre un enlace,
pudiendo poner una referencia a una función o
expresión de javascript .

1. Mensajes de Alerta - Manejador OnClick

El manejador OnClick, como ya se ha dicho anteriormente, es uno de los componentes
más básicos y usados de JavaScript. El siguiente ejemplo utiliza este manejador para
generar un mensaje de alerta en el browser.Los mensajes de alerta son utilizados para
muy variados propósitos pero básicamente se usan para informar al usuario de algo a
través de un cuadro de diálogo que aparece tras la acción del usuario.
<HTML>
<HEAD>
<TITLE> PRUEBA 1 </TITLE>
<SCRIPT>
function boton(){
alert("Esta página está en construcción, pero puedes echar un vistazo si quieres");}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#00AA00" TEXT="#FFFFFF" LINK="#0000FF"
VLINK="#0000FF" ALINK="#0000FF" >
<CENTER><H1>Esto es un ejemplo</H1></CENTER>
Visita nuestro <A HREF="MENU.HTM" onClick="boton();">menú </A>del día
</BODY>
</HTML>

Como se puede ver insertamos el código de script en la cabecera del documento,

definiendo una función, boton(), que contiene el método alert().Este código se ejecuta
cuando el usuario hace clic sobre el link menú que antes de llevarle a la página
MENU.HTM muestra el mensaje incluido con el método alert().
2. Botón de Navegación - Manejador OnClick, método go(), objeto history
Este ejemplo utiliza el método onClick para inicializar el método go(), perteneciente al
objeto history que permite la navegación hacia delante y hacia atrás sobre el historial de
un URL. El código de este ejemplo es el siguiente:
<HTML>
 <HEAD>
<TITLE> PRUEBA 2 </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function nav(x) {
      history.go(x);}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#00AA00" TEXT="#FFFFFF" LINK="#0000FF"
VLINK="#0000FF" ALINK="#0000FF" >
<CENTER><H1>Navegación con botones<H1>
<H2>Estos son dos botones hechos como componentes de un formulario:<H2><P>
<FORM>
<INPUT TYPE="button" VALUE="ATRAS" onClick="nav(-1);">
<INPUT TYPE="button" VALUE="ADELANTE" onClick="nav(1);">
</FORM><P>
<H2>Y este es un texto con un link de JavaScript.<H2><P>
<A HREF=javascript:history.go(-2);>ATRAS DOS PÁGINAS</A>
<P>
</CENTER>
</BODY>
</HTML>
Pasemos a analizar el código. Definimos la función nav(x) que, a través de la variable
x, da el número de saltos en páginas que el browser debe implementar. En este mismo
ejemplo vamos a ver dos formas de hacer lo mismo. El método history.go(x) toma un
valor entero x que en la primera parte del código es 1 ó -1
<INPUT TYPE="button" VALUE="ATRAS" onClick="nav(-1);">

<INPUT TYPE="button" VALUE="ADELANTE" onClick="nav(1);" >

y carga el URL correspondiente al número adelante o atrás especificado en el historial

de navegación de la sesión en curso. Este método toma el valor de la función nav(x),
que es llamada al hacer clic en los botones definidos en el formulario. La segunda forma
de hacer el mismo proceso, dando a la vez más libertad al desarrollador dado que
permite diseñar el propio botón como un .GIF o como es el caso que nos ocupa, con
texto, lo vemos en la línea
<A HREF=javascript:history.go(-2);>ATRAS DOS PÁGINAS</A>
3. Barra de Estado con Mensaje
Con este ejemplo vamos a introducir un nuevo manejador:onMouseOver. este
manejador?: pues como su propio nombre indica al pasar el ratón por encima del
elemento que tiene la llamada del manejador, es decir, al reconocer la presencia del
ratón sobre el área de texto o imagen, lo que produce un mensaje predefinido que
aparece en la barra de estado de la ventana del browser.
Tenemos dos tipos de links que cumplen el mismo propósito de generar un mensaje en
la barra de estado: el enlace de texto,
<A HREF="link2.htm" onMouseOver="windows.status='Enlace a la página link2.htm';
return true">
<H1>Link Nº2</H1></A><P>

y el enlace de imagen,
<A HREF="link1.htm" onMouseOver="windows.status='Esto es un reloj';return true">
<IMG SRC="reloj.jpg"> </A>

Funciones integradas

Función Descripción
eval (cadena) Ejecuta el resultado de la cadena como si fuera una
expresión.
isNan (valor) Si no es un número da verdadero; si es un numero da
falso.
escape (cadena) Visualiza la cadena sin las etiquetas de HTML.
parseFloat (cadena) Convierte una cadena en un número real de coma
flotante.
parseInt Convierte una cadena en un número entero. Se puede
(cadena[,base]) poner, como segundo argumento, un valor que indica
en qué sistema numérico se quiere (decimal=10,
hexadecimal=8,...). Por defecto, será en base 10.
 Java Script
Tema: Ejemplos de JavaScript
Curso: Diseño y Desarrollo Web
Docente: Ing. Janett Julca Flores

Ejercicio 1: Mouse.html (Inhabilitar el botón derecho del mouse)

<html>
<head>
<script language="JavaScript">
<!--
function click() {
if (event.button==2) {
alert('Boton desactivado')
}
}
document.onmousedown=click
// -->
</script>
</head>
<body>
Este es un ejemplo de JScript
</body>
</html>

Ejercicio 2: Barra.html (Mensaje en la barra de estado)

<HTML><HEAD>
</HEAD>
<BODY bgColor=#ffffff leftMargin=50
onload="window.defaultStatus='Bienvenidos a Visual Interdev'; return true">
<P align=center><FONT size=2 color=#000000 face=Arial>Sitio web desarrollado
por:<BR><BR>Janett Julca Flores: <A href="mailto: [email protected] "
onmouseover="window.status='[email protected]';return true">[email protected]</A>
</BODY></HTML>

Ejercicio 3: Alertas.html (Trabajo con cajas de diálogo)

<script language=javascript>
function confirmIt() {
if( confirm("Seguro que desea borrar ?") )
return "";
else
return document.form1.mytext.value;
}
</script>
<form name=form1>
<input type=text name=mytext value=(vacio)>
<input type=button value=Alert()
onClick=alert(document.form1.mytext.value)>
<input type=button value=Prompt()
onClick="document.form1.mytext.value=prompt('Ingrese el texto')">
<input type=button value=Confirm()
onClick="document.form1.mytext.value=confirmIt()">
</form>

Ejercicio 4: Marquesina.html (Marquesina en la barra de estado)

<HTML><HEAD><TITLE>Texto en movimiento con JavaScript</TITLE>
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>
<SCRIPT language=JavaScript>
<!--
function scrollit_r2l(seed)
{ var msg="Hola.. Esto es una demo de JavaScript"
var out = " ";
var c = 1;
if (seed > 100) {
 seed--;
var cmd="scrollit_r2l(" + seed + ")";
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 100 && seed > 0) {
for (c=0 ; c < seed ; c++) {
out+=" ";
}
out+=msg;
seed--;
var cmd="scrollit_r2l(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 0) {
if (-seed < msg.length) {
out+=msg.substring(-seed,msg.length);
seed--;
var cmd="scrollit_r2l(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}
else {
window.status=" ";
timerTwo=window.setTimeout("scrollit_r2l(100)",75);
}
}
}
// -- Fin del script -->
</SCRIPT>
</HEAD>
<BODY bgColor=#00ffff
onload="timerONE=window.setTimeout('scrollit_r2l(100)',500);">
<H2>Ejemplo de JavaScript</H2>
<H3>Texto que se desplaza en la ventana de estado del visualizador</H3>
<HR>
</BODY></HTML>

Ejercicio 5: Valida.html (Validar Formularios Web)

<html>
<head><script LANGUAGE="JavaScript">
function Validar(form)
{ if (form.Nombre.value == "")
{ alert("Por favor ingrese su nombre"); form.Nombre.focus(); return; }

if (form.Email.value == "")
{ alert("Por favor ingrese su dirección de e-mail"); form.Email.focus(); return; }

if (form.Domicilio.value == "")
{ alert("Por favor ingrese su domicilio"); form.Domicilio.focus(); return; }

if (form.Telefono.value == "")
{ alert("Por favor ingrese su número de teléfono"); form.Telefono.focus(); return; }

if (form.Empresa.value == "")
{ alert("Por favor ingrese el nombre de su empresa"); form.Empresa.focus(); return; }

if (form.NumeroTarjeta.value == "")
{ alert("Por favor ingrese los números de su tarjeta de crédito"); form.NumeroTarjeta.focus(); return; }

if (form.Codigo.value == "")
{ alert("Por favor ingrese el código de su tarjeta de crédito"); form.Codigo.focus(); return; }

if (form.NombreTitular.value == "")
{ alert("Por favor indique el nombre del titular de la tarjeta de crédito"); form.NombreTitular.focus(); return; }

if (form.Email.value.indexOf('@', 0) == -1 ||
 form.Email.value.indexOf('.', 0) == -1)
{ alert("Dirección de e-mail inválida"); form.Email.focus(); return; }
form.submit();
}
</script>

<title>JavaScript Validar Formulario</title>

</head>

<body BGCOLOR="#FFFFFF">

<table border="0" width="100%" cellspacing="0" cellpadding="0">

<tr>
<td width="100%"><small><b><font face="Arial">JAVASCRIPT</font></b></small></td>
</tr>
<tr>
<td width="100%"><font face="Arial"><small>Validar formulario // publicado por
Janett Julca</small><small> <a
href="mailto:janette_jftrab@hotmail">Janett Julca</a></small><a
href="mailto: janette_jftrab @hotmail"><small> @hotmail</small><small>.com</small></a></font></td>
</tr>
<tr>
<td width="100%"><hr noshade size="1" color="#000000">
</td>
</tr>
</table>

<form METHOD="post" ACTION="recibe.html">

<div align="left"><table border="0" width="600">
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>Apellido</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Apellido"
size="20"></font></td>
<td width="20%" align="right"><div align="right"><p><font face="Arial"
color="#000000"><small>Nombre</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Nombre"
size="20"></font></td>
</tr>
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>Domicilio</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Domicilio"
size="20"></font></td>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Ciudad</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Ciudad"
size="20"></font></td>
</tr>
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*)
Provincia</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Provincia"
size="20"></font></td>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Codigo
Postal</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="CodPost"
size="20"></font></td>
</tr>
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Pais</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Pais"
size="20"></font></td>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>E-mail</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Email"
size="20"></font></td>
</tr>
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>Teléfono</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Telefono"
 size="20"></font></td>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Fax</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Fax"
size="20"></font></td>
</tr>
<tr>
<td width="20%" align="right"></td>
<td width="30%"></td>
<td width="20%" align="right"><font face="Arial" color="#000000">&nbsp; </font></td>
<td width="30%"></td>
</tr>
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>Empresa</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Empresa"
size="20"></font></td>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*)
Dirección</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text"
name="DireccionEmpresa" size="20"></font></td>
</tr>
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Teléfono</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text"
name="telefonoEmpresa" size="20"></font></td>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Fax</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="FaxEmpresa"
size="20"></font></td>
</tr>
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) E-mail</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="EmailEmpresa"
size="20"></font></td>
<td width="20%" align="right"></td>
<td width="30%"></td>
</tr>
<tr>
<td width="20%" align="right"></td>
<td width="30%"></td>
<td width="20%" align="right"></td>
<td width="30%"></td>
</tr>
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>Tarjeta de
Credito</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><select name="Tarjeta" size="1">
<option value="Amex">Amex</option>
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
<option value="Diners">Diners</option>
</select></font></td>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>Nombre del
Titular</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="NombreTitular"
size="20"></font></td>
</tr>
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>Numero</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="NumeroTarjeta"
size="20"></font></td>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>Código de
seguridad</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Codigo"
size="5"></font></td>
</tr>
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Fecha de
vencimiento</small></font></td>
 <td width="30%"><font color="#FFFFFF" face="Arial"><input type="text"
name="VencimientoMes1" size="2"> / <input type="text" name="Vencimientoano1" size="2"></font></td>
<td width="20%" align="right"></td>
<td width="30%"></td>
</tr>
<tr>
<td width="20%" align="right"></td>
<td width="30%"></td>
<td width="20%" align="right"></td>
<td width="30%"></td>
</tr>
<tr>
<td width="100%" align="center" colspan="4"><div align="center"><center><table border="0"
width="100%" cellspacing="15" cellpadding="0">
<tr>
<td width="100%"><div align="center"><center><p><font face="Arial" color="#000000"><small><input
TYPE="button" VALUE="Enviar" onClick="Validar(this.form)"><input
TYPE="reset"></small></font></td>
</tr>
</table>
</center></div></td>
</tr>
</table>
</div>
</form>
<a href="javascript:window.close();"><small><font
face="Arial">Cerrar ventana</font></small></a>
</body>
</html>

Ejercicio 6: Popup.html (Abrir ventana Popup)

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "',
'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=320,height=240');");
}
// -->
</script>
</head>
<body>
<A HREF="javascript:popUp('about:blank')">Abrir Ventana Pop Up</A>
</body>
</html>

Ejercicio 7: Mensajes

<html>
<head>
<title>Ejemplo 7 JavaScript: eventos </title>
</head>
<body>
<form>
<p>Escribe tu nombre: <input type="text" name="nombre" value=""></p>
<p>Ahora tus apellidos: <input type="text" name="apellidos" value=""></p>
<hr>
<input type="button" name="boton1" value="Ver el nombre"
onclick = " alert(this.form.nombre.value); ">
<input type="button" name="boton2" value="Ver los apellidos"
onclick = " alert(this.form.apellidos.value); ">
<hr>
<input type="button" name="boton3" value="Ver ambos en la barra de estado"
 onclick = " window.status = this.form.nombre.value + ' ' + this.form.apellidos.value; ">
<input type="button" name="boton4" value="Borrar la barra de estado"
onclick = " window.status = ''; ">
<hr>
<input type="button" name="boton5" value="Mostrar"
onclick = " this.form.nombreCompleto.value = this.form.nombre.value
+ ' ' + this.form.apellidos.value ">
<p>Nombre completo: <input type="text" name="nombreCompleto" value=""></p>
</form>
</body>
</html>

Ejercicio 8:Validación básica

<html>
<head>
<title>Ejemplo 8 JavaScript: Eventos</title>
<script>
<!--
function comprueba_dia (f) {
if (f.dia.value>=1 && f.dia.value<=31) {
; // entrada correcta (no hace nada)
} else {
alert ("No es un día válido");
f.dia.focus ();
}
}
function comprueba_mes (f) {
if (f.mes.value>=1 && f.mes.value<=12) {
; // entrada correcta (no hace nada)
} else {
alert ("No es un mes válido");
f.mes.focus ();
}
}
-->
</script>
</head>
<BODY onload="window.status='Bienvenido a mi página'"
onunload="alert ('Vuelve pronto')">
<p>
<a href="http://123.com" target=_blank
onmouseover=" window.status='¡Ponga atencion!'; return true;"
onmouseout=" window.status='Gracias'; return true; ">
No me pises
</a>
</p>
<!-- "return true;" es para que aparezca nuestro mensaje en lugar del que mostraría la etiqueta <a> -->
<form>
Escribe un día del mes (1-31):
<input type="text" name="dia"
onfocus=" window.status='Escribe un número entre 1 y 31'; "
onblur=" comprueba_dia (this.form); ">
<hr>
Escribe un mes (1-12):
<input type="text" name="mes"
onfocus=" window.status='Escribe un número entre 1 y 12';">
<input type="button" name="boton" value="¡Comprobar!"
onclick=" comprueba_mes (this.form); ">
</form>
</body>
</html>

Ejercicio 9: Formulario de pedido

<html>
<head>
<title>Formulario de pedido</title>
<style>
body {text-align: center;
color: blue;
font-family: arial, sans-serif;
font-size: x-small;}
h1 {font-size: large;
color: white;
background-color: blue;
}
input.nomodif { background-color: #ddd; color:red; text-align:right;}
input.numeros { text-align:right;}
</style>
<script>
<!--
function calcula(f,e) {
if (isNaN(e.value) || e.value=="") {e.value="0";}
window.status =''; // Quita el comentario al salir de una celda

f.to1.value = f.ca1.value * f.pr1.value;

f.to2.value = f.ca2.value * f.pr2.value;
f.to3.value = f.ca3.value * f.pr3.value;
f.total.value = eval(f.to1.value) + eval(f.to2.value) + eval(f.to3.value);
f.totalPesetas.value = f.total.value * 166.386;
}
function comprueba (f) {
if (f.nombre.value == "") {
alert ("Es obligatorio \nescribir el nombre");
f.nombre.focus ();
return true;
}
if (f.apellidos.value == "") {
alert ("Es obligatorio \nescribir los apellidos");
f.apellidos.focus ();
return true;
}
if (f.total.value == "0") {
alert ("¡Tiene que comprar algo!");
f.ca1.focus ();
return true;
}
f.submit();
}
function prepara(texto,elementoformulario) {
window.status=texto;
if (elementoformulario.value=="0") elementoformulario.value="";
}
//-->
</script>
</head>
<body onload="f.nombre.focus();">
<h1>
FORMULARIO DE PEDIDO
</h1>
<form method="post" name="f" action="http://www.saulo.net/pub/dweb/verform.php">
<table border="0" width="100%" cellpadding="10">
<tr>
<td style="background-color:#e0e0ff" align="center">
<p>
Nombre: <input type="text" name="nombre"
onblur= " window.status = ''; "
onfocus=" window.status = 'Escriba su nombre'; "
tabindex="1">
Apellidos: <input type="text" name="apellidos"
onblur= " window.status = ''; "
 onfocus=" window.status = 'Escriba sus apellidos'; "
tabindex="2">
</p><p>
Telefono: <input type="text" name="telefono"
onblur= " window.status = ''; "
onfocus=" window.status = 'Escribe el teléfono de contacto'; "
tabindex="3">
</p><p>
Empresa: <input type="text" name="empresa"
onblur= " window.status = ''; "
onfocus=" window.status = 'Escribe el nombre de su empresa'; "
tabindex="4">
</p>
<table border="0" style="background-color:#AAAAAA" cellpadding="3" cellspacing="0">
<tr style="background-color:gray">
<td> Cant. </td>
<td> Concepto </td>
<td> Precio </td>
<td> Total </td>
</tr>
<tr>
<td>
<input class="numeros" size="5" type="text" name="ca1" value="0"
onfocus=" prepara('Escriba la cantidad',this); "
onblur=" calcula (this.form,this); "
tabindex="5">
</td>
<td>
<input size="50" type="text" name="co1" value=""
onfocus=" window.status = 'Escriba el concepto'; "
onblur= " window.status = ''; "
tabindex="6">
</td>
<td>
<input class="numeros" size="5" type="text" name="pr1" value="0"
onfocus=" prepara('Escriba el precio',this); "
onblur="calcula (this.form,this);"
tabindex="7">
</td>
<td>
<input class="nomodif" size="5" type="text" name="to1" value="0"
onblur="calcula (this.form,this);"
onfocus=" this.blur(); ">
</td>
</tr>
<tr>
<td>
<input class="numeros" size="5" type="text" name="ca2" value="0"
onfocus=" prepara('Escriba la cantidad',this); "
onblur=" calcula (this.form,this); "
tabindex="8">
</td>
<td>
<input size="50" type="text" name="co2" value=""
onfocus=" window.status = 'Escriba el concepto'; "
onblur= " window.status = ''; "
tabindex="9">
</td>
<td>
<input class="numeros" size="5" type="text" name="pr2" value="0"
onfocus=" prepara('Escriba el precio',this); "
onblur="calcula (this.form,this);"
tabindex="10">
</td>
<td>
<input class="nomodif" size="5" type="text" name="to2" value="0"
onfocus=" this.blur(); ">
 </td>
</tr>
<tr>
<td>
<input class="numeros" size="5" type="text" name="ca3" value="0"
onfocus=" prepara('Escriba la cantidad',this); "
onblur=" calcula (this.form,this); "
tabindex="11">
</td>
<td>
<input size="50" type="text" name="co3" value=""
onfocus=" window.status = 'Escriba el concepto'; "
onblur= " window.status = ''; "
tabindex="12">
</td>
<td>
<input class="numeros" size="5" type="text" name="pr3" value="0"
onfocus=" prepara('Escriba el precio',this); "
onblur="calcula (this.form,this);"
tabindex="13">
</td>
<td>
<input class="nomodif" size="5" type="text" name="to3" value="0"
onfocus=" this.blur(); ">
</td>
</tr>
<tr>
<td colSpan="3" align="right"> Total a pagar (euros):
</td>
<td>
<input class="nomodif" size="5" type="text" name="total" value="0"
onfocus=" this.blur(); ">
</td>
</tr>
<tr>
<td colSpan="3" align="right"> Total a pagar (pesetas):
</td>
<td>
<input class="nomodif" size="5" type="text" name="totalPesetas" value="0"
onfocus=" this.blur(); ">
</td>
</tr>
</table>
<p>
<input type="button" name="enviar" value="Enviar" tabindex="14"
onclick="comprueba (this.form);">
</td></tr></table>
</form>
</body>
</html>

Ejercicio 10: Menu desplegable tipo Windows

<html>
<head>
<title>Menú desplegable con capas</title>
<link rel="StyleSheet" href="../estilo.css" title="Formulario" media="screen" type="text/css" />
<style>
#menu1, #menu2, #menu3, #menu4 {
display:inline;
position:absolute;
width:100px;
background-color:#BFD8D8;
color:navy;
border: 1px solid navy;
visibility:hidden;
}
#menu1 {
 left:10px;
top:10px;
height:10px;
visibility:visible;
}
#menu2 {
left:95px;
top:15px;
height:20px;
}
#menu3 {
left:180px;
top:20px;
height:20px;
}
#menu4 {
left:180px;
top:40px;
width:200px;
height:20px;
}
#opcion1, #opcion1_1, #opcion1_2, #opcion1_1_1, #opcion1_1_2, #opcion1_2_1 , #opcion1_2_2 {
width:100%;
font-weight:bold;
background-color:#BFD8D8;
color:navy;
border-width: 0;
padding:5px;
cursor:hand;
}
#opcion1 {
top:0%;
height:100%;
}
#opcion1_1, #opcion1_1_1, #opcion1_2_1 {
top:0%;
height:50%;
}
#opcion1_2, #opcion1_1_2, #opcion1_2_2 {
top:50%;
height:50%;
}
</style>
<script>
function marcar(opc, a)
{
var color = "navy";
var bkcolor = "#BFD8D8";
if (a == true)
{
color = "white";
bkcolor = "navy";
}
document.all[opc].style.backgroundColor = bkcolor;
document.all[opc].style.color = color;
}
function vermenu1()
{
document.all['menu1'].style.visibility="visible";
document.all['menu2'].style.visibility="hidden";
document.all['menu3'].style.visibility="hidden";
document.all['menu4'].style.visibility="hidden";
}
function vermenu2()
{
vermenu1();
document.all['menu2'].style.visibility="visible";
 }
function vermenu3()
{
vermenu2();
document.all['menu3'].style.visibility="visible";
}
function vermenu4()
{
vermenu2();
document.all['menu4'].style.visibility="visible";
}
function ir(url)
{ window.open ("http://" + url); }
</script>
</head>
<body >
<div id="menu1">
<div id="opcion1" onmouseover="vermenu2();marcar('opcion1',true);"
onmouseout="vermenu1();marcar('opcion1',false);">
Menú
</div>
</div>
<div id="menu2">
<div id="opcion1_1" onmouseover="vermenu3();marcar('opcion1_1',true);"
onmouseout="vermenu1();marcar('opcion1_1',false);">
Buscadores<br>
</div>
<div id="opcion1_2" onmouseover="vermenu4();marcar('opcion1_2',true);"
onmouseout="vermenu1();marcar('opcion1_2',false);">
Diseño
</div>
</div>
<div id="menu3">
<div id="opcion1_1_1" onmouseover="vermenu3();marcar('opcion1_1_1',true);"
onmouseout="vermenu1();marcar('opcion1_1_1',false);"
onclick="ir('www.google.com')">
Google<br>
</div>
<div id="opcion1_1_2" onmouseover="vermenu3();marcar('opcion1_1_2',true);"
onmouseout="vermenu1();marcar('opcion1_1_2',false);"
onclick="ir('www.yahoo.com')">
Yahoo
</div>
</div>
<div id="menu4" onmouseout="vermenu1()">
<div id="opcion1_2_1" onmouseover="vermenu4();marcar('opcion1_2_1',true);"
onmouseout="vermenu1();marcar('opcion1_2_1',false);"
onclick="ir('html.conclase.net')">
HTML con clase<br>
</div>
<div id="opcion1_2_2" onmouseover="vermenu4();marcar('opcion1_2_2',true);"
onmouseout="vermenu1();marcar('opcion1_2_2',false);"
onclick="ir('www.htmlweb.net')">
HTML Web
</div>
</div>
</body>
</html>

Ejercicio10: Valida.html (Validar Formularios Web)

<html>
<head><script LANGUAGE="JavaScript">

function Validar(form)
{
if (form.Nombre.value == "")
 { alert("Por favor ingrese su nombre"); form.Nombre.focus(); return; }

if (form.Email.value == "")
{ alert("Por favor ingrese su dirección de e-mail"); form.Email.focus(); return; }

if (form.Domicilio.value == "")
{ alert("Por favor ingrese su domicilio"); form.Domicilio.focus(); return; }

if (form.Telefono.value == "")
{ alert("Por favor ingrese su número de teléfono"); form.Telefono.focus(); return; }

if (form.Empresa.value == "")
{ alert("Por favor ingrese el nombre de su empresa"); form.Empresa.focus(); return; }

if (form.NumeroTarjeta.value == "")
{ alert("Por favor ingrese los números de su tarjeta de crédito"); form.NumeroTarjeta.focus(); return; }

if (form.Codigo.value == "")
{ alert("Por favor ingrese el código de su tarjeta de crédito"); form.Codigo.focus(); return; }

if (form.NombreTitular.value == "")
{ alert("Por favor indique el nombre del titular de la tarjeta de crédito"); form.NombreTitular.focus(); return; }

if (form.Email.value.indexOf('@', 0) == -1 ||
form.Email.value.indexOf('.', 0) == -1)
{ alert("Dirección de e-mail inválida"); form.Email.focus(); return; }

form.submit();
}

</script>

<title>JavaScript Validar Formulario</title>

</head>

<body BGCOLOR="#FFFFFF">

<table border="0" width="100%" cellspacing="0" cellpadding="0">

<tr>
<td width="100%"><small><b><font face="Arial">JAVASCRIPT</font></b></small></td>
</tr>
<tr>
<td width="100%"><font face="Arial"><small>Validar formulario // publicado por
Janett Julca</small><small> <a
href="mailto:janette_jftrab@hotmail">janett_jftrab</a></small><a
href="mailto:janette_jftrab@hotmail"><small>@hotmail</small><small>.com</small></a></font></td>
</tr>
<tr>
<td width="100%"><hr noshade size="1" color="#000000">
</td>
</tr>
</table>

<form METHOD="post" ACTION="recibe.html">

<div align="left"><table border="0" width="600">
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>Apellido</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Apellido"
size="20"></font></td>
<td width="20%" align="right"><div align="right"><p><font face="Arial"
color="#000000"><small>Nombre</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Nombre"
size="20"></font></td>
</tr>
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>Domicilio</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Domicilio"
 size="20"></font></td>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Ciudad</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Ciudad"
size="20"></font></td>
</tr>
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*)
Provincia</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Provincia"
size="20"></font></td>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Codigo
Postal</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="CodPost"
size="20"></font></td>
</tr>
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Pais</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Pais"
size="20"></font></td>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>E-mail</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Email"
size="20"></font></td>
</tr>
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>Teléfono</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Telefono"
size="20"></font></td>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Fax</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Fax"
size="20"></font></td>
</tr>
<tr>
<td width="20%" align="right"></td>
<td width="30%"></td>
<td width="20%" align="right"><font face="Arial" color="#000000">&nbsp; </font></td>
<td width="30%"></td>
</tr>
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>Empresa</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Empresa"
size="20"></font></td>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*)
Dirección</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text"
name="DireccionEmpresa" size="20"></font></td>
</tr>
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Teléfono</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text"
name="telefonoEmpresa" size="20"></font></td>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Fax</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="FaxEmpresa"
size="20"></font></td>
</tr>
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) E-mail</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="EmailEmpresa"
size="20"></font></td>
<td width="20%" align="right"></td>
<td width="30%"></td>
</tr>
<tr>
<td width="20%" align="right"></td>
<td width="30%"></td>
<td width="20%" align="right"></td>
<td width="30%"></td>
</tr>
 <tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>Tarjeta de
Credito</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><select name="Tarjeta" size="1">
<option value="Amex">Amex</option>
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
<option value="Diners">Diners</option>
</select></font></td>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>Nombre del
Titular</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="NombreTitular"
size="20"></font></td>
</tr>
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>Numero</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="NumeroTarjeta"
size="20"></font></td>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>Código de
seguridad</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Codigo"
size="5"></font></td>
</tr>
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Fecha de
vencimiento</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text"
name="VencimientoMes1" size="2"> / <input type="text" name="Vencimientoano1" size="2"></font></td>
<td width="20%" align="right"></td>
<td width="30%"></td>
</tr>
<tr>
<td width="20%" align="right"></td>
<td width="30%"></td>
<td width="20%" align="right"></td>
<td width="30%"></td>
</tr>
<tr>
<td width="100%" align="center" colspan="4"><div align="center"><center><table border="0"
width="100%" cellspacing="15" cellpadding="0">
<tr>
<td width="100%"><div align="center"><center><p><font face="Arial" color="#000000"><small><input
TYPE="button" VALUE="Enviar" onClick="Validar(this.form)"><input
TYPE="reset"></small></font></td>
</tr>
</table>
</center></div></td>
</tr>
</table>
</div>
</form>
<a href="javascript:window.close();"><small><font
face="Arial">Cerrar ventana</font></small></a>
</body>
</html>

Ejercicio 11: Puzle de piezas deslizantes

<HTML>
<head>
<title> PUZZLE DE PIEZAS DESLIZANTES <title>
<script language="javascript" type="text/javascript">
var altura = 4 //numero de piezas eje y
var anchura = 4 //numero de piezas eje x
var blanco = 1 //posición del blanco al comienzo
var ruta = '/images/puzzles/' //carpeta en la que están ubicadas las imágenes del puzzle
var prefijo = 'imagen' //prefijo del nombre de las imágenes (imagen1,
imagen2, ...,imagenN)
var extension = '.jpg' //extensión de las imágenes (tipo de imagen)
var ancho_pieza = '125' //anchura en pixels de cada pieza del puzzle
var alto_pieza = '100' //altura en pixels de cada pieza del puzzle
var pieza_blanca = '/images/puzzles/blanco.jpg' //imagen pieza blanca

var salto
var offset_imagen

function MostrarImagen() {
var imagen = 1
var salida = '<table cellspacing="0" cellpadding="0" border="1">\n';
for (var y = 0; y < altura; y++) {
salida += '<tr>\n';
for (var x = 0; x < anchura; x++, imagen++) {
if (imagen != blanco) {
salida += '<td><a href="javascript:MoverImagen(' + imagen + ')"><img src="'
+ ruta + prefijo + imagen + extension + '" width="' + ancho_pieza + '" height="' + alto_pieza + '"
border="no"></a></td>\n'
} else {
salida += '<td><a href="javascript:MoverImagen(' + imagen + ')"><img src="'
+ pieza_blanca + '" width="' + ancho_pieza + '" height="' + alto_pieza + '" border="no"></a></td>\n'
}
}
salida += '</tr>\n'
}
salida += '</table>'
document.write( salida )
}

function MoverImagen(imagen) {
if ( (Math.floor((imagen - 1)/anchura) != 0) && (blanco == imagen - anchura) ) {
Mueve(imagen)
document.datos.cambios.value++
} else if ( ((imagen - 1) % anchura != anchura - 1) && (blanco == imagen + 1) ) {
Mueve(imagen)
document.datos.cambios.value++
} else if ( (Math.floor((imagen - 1)/anchura) != altura - 1) && (blanco == imagen + anchura) ) {
Mueve(imagen)
document.datos.cambios.value++
} else if ( ((imagen - 1) % anchura != 0) && (blanco == imagen - 1) ) {
Mueve(imagen)
document.datos.cambios.value++
} else
alert('Esta pieza no puede moverse. Pulsa sobre\nuna pieza colindante con el espacio en blanco.')
}

function Mueve(imagen) {
document.images[offset_imagen + blanco - 1].src = document.images[offset_imagen + imagen - 1].src
blanco = imagen
document.images[offset_imagen + imagen - 1].src = pieza_blanca
}

function Cambios() {
this.puzzle = new Array( 4 )
this.puzzle[0] = 1
this.puzzle[1] = anchura
this.puzzle[2] = -1
this.puzzle[3] = -anchura
}

function DesordenaImagen() {

ObtenSalto() //tiene en cuenta el resto de imagenes del documento

var cambios = new Cambios

for (var x = 0; x < 200; x++) { //hace 200 cambios
var salto = Math.round ( Math.random() * 3 ) //entre 0 y 3
 if ( (blanco + cambios.puzzle[salto] < 1) || (blanco + cambios.puzzle[salto] > anchura * altura) )
continue
else if ( ((blanco - 1) % anchura == 0) && salto == 2 )
salto = 0
else if ( (blanco % anchura == 0) && salto == 0 )
salto = 2

Mueve( blanco + cambios.puzzle[salto] )

}
}
function ObtenSalto() {
//si hay otras imagenes en la pagina las tiene en cuenta con esta variable
offset_imagen = 0
while ( document.images[offset_imagen].src.indexOf( ruta ) == -1)
offset_imagen++
}
window.onload = DesordenaImagen
if (document.captureEvents) { //N4 requiere invocar la funcion captureEvents
document.captureEvents(Event.LOAD)
}
</script>
</head>

<body>
<script type="text/javascript" language="javascript">
MostrarImagen();
</script>

<!-- Para visualizar el display que cuenta el número de movimientos -->

<form name="datos">
<table cellspacing="6" cellpadding="6" border="0"><tr>
<td><img src="/images/puzzles/imagen.jpg" width="150" height="120" border="0"></td>
<td>Número de cambios <br><input type="text" name="cambios" size="10" value="0"></td>
</tr></table>
</form>
</body>
</HTML>

Ejercicio 12: Tres en Raya

<HTML>
<head>
<script language="javascript" type="text/javascript">
///Para entender las explicaciones:
// triunfo - pone y gana
// jugada - pone y tiene en una línea dos 'O' y una casilla vacía
// defender - evitar que gane el contrario en el siguiente movimiento
//No tiene sentido que primero ocupe el centro, si hay triunfo o jugada
//No debe defender primero y atacar después. Primero busca el triunfo, luego
//defiende y después busca jugada
//variable global
var jugando = true
//FUNCION COMPRUEBA JUGADA------------------------------------------------
function CompruebaJugada(tablero, ficha) {
//comprueba que hay posibilidad de hacer 3 en raya en una fila, columna o diagonal
//devuelve la posición donde hay que colocar la ficha para hacerlo y -1 si no hay jugada
var x, y

for(x = 0; x < 9; x += 3) { //comprueba las filas

if ((tablero.elements[x].value == ficha) && (tablero.elements[x + 1].value == ficha))
if (tablero.elements[x + 2].value == "")
return (x + 2)
if ((tablero.elements[x].value == ficha) && (tablero.elements[x + 2].value == ficha))
if (tablero.elements[x + 1].value == "")
return (x + 1)
if ((tablero.elements[x + 1].value == ficha) && (tablero.elements[x + 2].value == ficha))
if (tablero.elements[x].value == "")
 return (x)
}

for(x = 0; x < 3; x++) { //comprueba las columnas

if ((tablero.elements[x].value == ficha) && (tablero.elements[x + 3].value == ficha))
if (tablero.elements[x + 6].value == "")
return (x + 6)
if ((tablero.elements[x].value == ficha) && (tablero.elements[x + 6].value == ficha))
if (tablero.elements[x + 3].value == "")
return (x + 3)
if ((tablero.elements[x + 3].value == ficha) && (tablero.elements[x + 6].value == ficha))
if (tablero.elements[x].value == "")
return (x)
}

//comprueba las diagonales

if ((tablero.elements[2].value == ficha) && (tablero.elements[4].value == ficha) &&
(tablero.elements[6].value == ""))
return (6)
if ((tablero.elements[2].value == ficha) && (tablero.elements[4].value == "") &&
(tablero.elements[6].value == ficha))
return (4)
if ((tablero.elements[2].value == "") && (tablero.elements[4].value == ficha) &&
(tablero.elements[6].value == ficha))
return (2)
if ((tablero.elements[0].value == ficha) && (tablero.elements[4].value == ficha) &&
(tablero.elements[8].value == ""))
return (8)
if ((tablero.elements[0].value == ficha) && (tablero.elements[4].value == "") &&
(tablero.elements[8].value == ficha))
return (4)
if ((tablero.elements[0].value == "") && (tablero.elements[4].value == ficha) &&
(tablero.elements[8].value == ficha))
return (0)

return -1
}
//FUNCION PAREJA HORIZONTAL---------------------------------------------------
function ParejaHorizontal(tablero, ficha) {
//comprueba si es posible poner 2 en una fila, estando vacia la otra posicion...
//...de esa misma fila
//devuelve la fila que permite hacerlo, o -1 en caso contrario
var x, y
for(x = 0; x < 9; x += 3) { //comprueba las filas
if ((tablero.elements[x].value == ficha) && (tablero.elements[x + 1].value == "") &&
(tablero.elements[x + 2].value == ""))
return (x)
if ((tablero.elements[x].value == "") && (tablero.elements[x + 1].value == ficha) &&
(tablero.elements[x + 2].value == ""))
return (x + 1)
if ((tablero.elements[x].value == "") && (tablero.elements[x + 1].value == "") &&
(tablero.elements[x + 2].value == ficha))
return (x + 2)
}

return -1
}
//FUNCION PAREJA VERTICAL---------------------------------------------------
function ParejaVertical(tablero, ficha, jugadaHtal) {
//comprueba si es posible poner 2 en una columna, estando vacia la otra posicion...
//...de esa misma columna y teniendo en cuenta si esa posicion ya es pareja horizontal
//devuelve la columna que permite hacerlo si no es pareja horizontal, o -1 en caso contrario
var x, y

for(x = 0; x < 3; x++) { //comprueba las columnas

if ((tablero.elements[x].value == ficha) && (tablero.elements[x + 3].value == "") &&
(tablero.elements[x + 6].value == ""))
 if (x != jugadaHtal) //si es pareja horizontal no interesa como vertical
return (x)
if ((tablero.elements[x].value == "") && (tablero.elements[x + 3].value == ficha) &&
(tablero.elements[x + 6].value == ""))
if ((x + 3) != jugadaHtal)
return (x + 3)
if ((tablero.elements[x].value == "") && (tablero.elements[x + 3].value == "") &&
(tablero.elements[x + 6].value == ficha))
if ((x + 6) != jugadaHtal)
return (x + 6)
}

return -1
}
//FUNCION OBTEN POSICION-------------------------------------------------
function ObtenPosicion(jugadaHtal, jugadaVcal) {
//busca la posicion que permite hacer jugada vertical y jugada horizontal a la vez
//conocidas la fila y la columna donde pueden hacerse parejas
var x, y, fila, columna
var posicion = 0
matriz = new Array(3)

for (x = 0; x < 3; x++) { //crea un matriz que asigna posicion a fila y columna
matriz[x] = new Array(3)
for (y = 0; y < 3; y++) {
matriz[x][y] = posicion
posicion ++
}
}

for (x = 0; x < 3; x++) { //busca la fila y la columna

for (y = 0; y < 3; y++) {
if (matriz[x][y] == jugadaHtal) //encontro la fila
fila = x
if (matriz[x][y] == jugadaVcal) //encontro la columna
columna = y
}
}

return (matriz[fila][columna]) //devuelve posicion jugada

}
//FUNCION PONER REDONDEL-------------------------------------------------
function PonerRedondel(tablero) {
//juega el ordenador

var jugada, jugadaHtal, jugadaVcal

//ataca y gana
jugada = CompruebaJugada(tablero, "O")
if (jugada != -1) {
tablero.elements[jugada].value = "O"
alert('¡Yo gano!')
document.marcador.perdidas.value++
jugando = false
return 1
}

//defiende evitando que gane el rival

jugada = CompruebaJugada(tablero, "X")
if (jugada != -1) {
tablero.elements[jugada].value = "O"
return 1
}

//ataca y gana a la siguiente

jugadaHtal = ParejaHorizontal(tablero, "O")
jugadaVcal = ParejaVertical(tablero, "O", jugadaHtal)
 if ((jugadaHtal != -1) && (jugadaVcal != -1)) {
//puede poner 2 en fila y 2 en columna
if ((jugadaHtal != 4) || (jugadaVcal != 4)) {
//no es el centro
jugada = ObtenPosicion(jugadaHtal, jugadaVcal)//obtiene donde debe poner
tablero.elements[jugada].value = "O"
return 1
}
}

//ataca y pone dos en fila

if ((jugadaHtal != -1) && (jugadaVcal == -1)) {
if ((jugadaHtal != 2) && (jugadaHtal != 5) && (jugadaHtal != 8))
//esto es arbitrario
tablero.elements[jugadaHtal + 1].value = "O"
//pone a la derecha
else
tablero.elements[jugadaHtal - 1].value = "O"
//pone a la izquierda
return 1
}

//ataca y pone dos en columna

if ((jugadaHtal == -1) && (jugadaVcal != -1)) {
if ((jugadaVcal != 6) && (jugadaVcal != 7) && (jugadaVcal != 8))
tablero.elements[jugadaVcal + 3].value = "O" //pone abajo
else
tablero.elements[jugadaVcal - 3].value = "O" //pone arriba
return 1
}

//ocupa el centro
if (tablero.elements[4].value == "") {
tablero.elements[4].value = "O"
return 1
}

//ocupa la primera que este libre

for (x = 0; x < 9; x++)
if (tablero.elements[x].value == "") {
tablero.elements[x].value = "O"
return 1
}

alert('Tablas.')
document.marcador.tablas.value++
jugando = false
return -1
}
//FUNCION PONER ASPA------------------------------------------------------
function PonerAspa(tablero, posicion) {

//comprueba primero que se esta jugando

if (jugando) {
if (tablero.elements[posicion].value != "") //casilla no vacia
alert('Esa casilla ya está ocupada.')
else {
//casilla vacia, puede poner
tablero.elements[posicion].value = "X"

//comprueba si ha ganado (AÑADIDO EN LA VERSION 2)

if ( CompruebaVictoria(tablero, "X") ) {
alert('¡Felicidades! Tú ganas.')
document.marcador.ganadas.value++
jugando = false
} else
PonerRedondel(tablero)
 }
} else {
alert('Para comenzar una nueva partida\npulsa Juego nuevo.')
}
}
//FUNCION COMPRUEBA VICTORIA ----------------------------------------------
function CompruebaVictoria(tablero, ficha) {
//AÑADIDA EN LA VERSION 2
//comprueba si ha ganado el jugador que juega con ficha
var x

for(x = 0; x < 9; x += 3) { //comprueba las filas

if ((tablero.elements[x].value == ficha) && (tablero.elements[x + 1].value == ficha) &&
(tablero.elements[x + 2].value == ficha))
return true
}

for(x = 0; x < 3; x++) { //comprueba las columnas

if ((tablero.elements[x].value == ficha) && (tablero.elements[x + 3].value == ficha) &&
(tablero.elements[x + 6].value == ficha))
return true
}

//comprueba las diagonales

if ((tablero.elements[2].value == ficha) && (tablero.elements[4].value == ficha) &&
(tablero.elements[6].value == ficha))
return true
if ((tablero.elements[0].value == ficha) && (tablero.elements[4].value == ficha) &&
(tablero.elements[8].value == ficha))
return true

return false
}
</script>
</head>
<body>
<!-- Para visualizar el tablero y lo contadores -->
<form name="tablero">
<div align="center"><center>
<table border="0" width="62%" cellpadding="5">
<tr>
<td width="20%"><input type="text" name="T0" size="3"></td>
<td width="20%"><input type="text" name="T1" size="3"></td>
<td width="20%"><input type="text" name="T2" size="3"></td>
<td width="85%" align="right"></td>
</tr>
<tr>
<td width="20%"><input type="text" name="T3" size="3"></td>
<td width="20%"><input type="text" name="T4" size="3"></td>
<td width="20%"><input type="text" name="T5" size="3"></td>
<td width="85%" align="right"></td>
</tr>
<tr>
<td width="20%"><input type="text" name="T6" size="3"></td>
<td width="20%"><input type="text" name="T7" size="3"></td>
<td width="20%"><input type="text" name="T8" size="3"></td>
<td width="85%" align="right"></td>
</tr>
<tr>
<td width="20%"><input type="button" value=" X " name="B0" onClick="PonerAspa(tablero, 0)"
class="metal"></td>
<td width="20%"><input type="button" value=" X " name="B1" onClick="PonerAspa(tablero, 1)"
class="metal"></td>
<td width="20%"><input type="button" value=" X " name="B2" onClick="PonerAspa(tablero, 2)"
class="metal"></td>
<td width="85%"><input type="reset" value="Juego nuevo" name="nuevo" onClick="jugando=true"
class="metal"></td>
 </tr>
<tr>
<td width="18%"><input type="button" value=" X " name="B3" onClick="PonerAspa(tablero, 3)"
class="metal"></td>
<td width="17%"><input type="button" value=" X " name="B4" onClick="PonerAspa(tablero, 4)"
class="metal"></td>
<td width="18%"><input type="button" value=" X " name="B5" onClick="PonerAspa(tablero, 5)"
class="metal"></td>
<td width="85%"></td>
</tr>
<tr>
<td width="18%"><input type="button" value=" X " name="B6" onClick="PonerAspa(tablero, 6)"
class="metal"></td>
<td width="17%"><input type="button" value=" X " name="B7" onClick="PonerAspa(tablero, 7)"
class="metal"></td>
<td width="18%"><input type="button" value=" X " name="B8" onClick="PonerAspa(tablero, 8)"
class="metal"></td>
<td width="85%" align="right"></td>
</tr>
</table>
</center></div>
</form>

<form name="marcador">
<div align="center"><center>
<table border="0" width="62%" cellpadding="5" cellspacing="0">
<tr>
<td width="20%"><small>Tablas:<br>
</small><input type="text" name="tablas" value="0" size="6"></td>
<td width="20%"><small>Perdidas:<br>
</small><input type="text" name="perdidas" value="0" size="6"></td>
<td width="20%"><small>Ganadas:<br>
</small><input type="text" name="ganadas" value="0" size="6"></td>
<td width="85%"> <br><input type="reset" value="Limpiar" name="borrar" class="metal"></td>
</tr>
</table>
</center></div>
</form>

<h2>Cómo jugar</h2>
<p>El ordenador juega siempre con los <em>redondeles</em> ("O") y tú con las <em>aspas</em>
("X"). Empiezas tú. Para poner un <em>aspa</em> debes pulsar sobre el botón
del panel inferior que se corresponda con la posición en la que quieres ponerla. Puedes
también escribirla a mano, siempre con mayúsculas (y sin hacer trampas, porque el
ordenador confía en ti).</p>
<p>El ordenador pondrá su <em>redondel</em> cada vez que tú pongas tu <em>aspa</em>.
Nunca se equivoca, y si te descuidas (y no le haces trampa), te gana. Si haces trampas, no
funcionará correctamente.</p>
<p>Cuando acaba la partida, el ordenador indica el resultado e incrementa los contadores
inferiores. Para jugar otra partida, pulsar el botón <strong>Juego nuevo</strong>, que
limpia el panel de juego. Para borrar los contadores, pulsar el botón <strong>Limpiar</strong>.</p>
</body>
</HTML>

Ejercicio 13: Javascript y efectos de sonido.

<html>
<head>
<title> JavaScript y efectos de sonido</title>
<script LANGUAGE="JavaScript"><!--
// Precargar los archivos de audio (MouseOver sound)
var aySound = new Array();
// Array con los archivos de sonido
aySound[0] = "sonido00.mp3";
aySound[1]="sonido01.mp3";
aySound[2]="sonido02.mp3";
aySound[3]="sonido03.mp3";
// No Editar esta línea
document.write('<BGSOUND ID="auIEContainer">')
IE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0;
NS = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0;
ver4 = IE||NS? 1:0;
onload=auPreload;

function auPreload() {
if (!ver4) return;
if (NS) auEmb = new Layer(0,window);
else {
Str = "<DIV ID='auEmb' STYLE='position:absolute;'></DIV>";
document.body.insertAdjacentHTML("BeforeEnd",Str);
}
var Str = '';
for (i=0;i<aySound.length;i++)
Str += "<EMBED SRC='"+aySound[i]+"' AUTOSTART='FALSE' HIDDEN='TRUE'>"
if (IE) auEmb.innerHTML = Str;
else {
auEmb.document.open();
auEmb.document.write(Str);
auEmb.document.close();
}
auCon = IE? document.all.auIEContainer:auEmb;
auCon.control = auCtrl;
}
function auCtrl(whSound,play) {
if (IE) this.src = play? aySound[whSound]:'';
else eval("this.document.embeds[whSound]." + (play? "play()":"stop()"))
}
function playSound(whSound) { if (window.auCon) auCon.control(whSound,true); }
function stopSound(whSound) { if (window.auCon) auCon.control(whSound,false); }
//-->
</script>
</head>
<body>
- Sonido onMouseOver/onMouseOut : <BR>
<A HREF="YourPage.html" onMouseOver="playSound(0)" onMouseOut="stopSound(0)">Move mouse over to
play sound</A>
<BR>
- Sonido onClick :
<A HREF="javascript:playSound(1);">Click aquí para escuchar el sonido</A>
<BR>
-Con un Botón:
<INPUT TYPE="BUTTON" VALUE="Click aquí!" onClick="playSound(2)">
</body>
</html>