Diseño web clase03

Profesora: Mg. Janett Julca Flores Pág.61
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">

</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 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
Los más comunes son:
Operador Explicación
+ adición ( o concatenación en el caso de cadenas)
- substracción
* multiplicación
/
división
% Modulo: Devuelve el resto de dividir ambos números
++ incremento
- - decremento
> mayor que
< menor que
>= mayor o igual que
<= menor o igual que
= = igual a (compara dos valores)
!= distinto de (compara dos valores)
&& y (une dos comparaciones)
|| o (una u otra comparación)
En JavaScript existe notación postfija y prefija, por lo que variable++ y ++variable son dos formas distintas de
incrementar una variable. En primer lugar, se procesa la variable, y luego se incrementa. Sin embargo, en el
segundo caso, primero se incrementa la variable y después se procesa.

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):
Hace referencia a la página que se esté visualizando en ese momento. Algunas de sus propiedades
son:
length (longitud de la cadena).
Algunos de sus métodos son:
Para formatear: bold, blink, big, small, fontcolor, fontsize, italics, strike, sub, sup, toLowerCase,
toUpperCase. Otros: indexOf (contenido en la cadena), charAt(x) (representa el caracter número x
de la cadena)
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:
getDate (sólo la fecha), getDay (el día), getMonth, getHours, getMinutes, getSeconds
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.
 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.
formularios (forms): contiene una lista de todos los formularios de ese documento.
ventana (window): es el de más alto nivel y tiene numerosas propiedades y métodos para trabajar
con él. Algunos de sus métodos son: 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), ...
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, ...
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",,]
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)
{código}
Ejecuta el código sólo si la condición es
verdadera
if (navigator.appName
== "Netscape") {
document.write
("Bienvenido/a. Usas
Netscape")
}
if (condición)
{código1} else
{condicion2}
Ejecuta el código1 si la condición es
verdadera, y en caso contrario, el
codigo2.
if (navigator.appName
== "Netscape") {
document.write
Netscape")
else
document.write
Explorer")
}
(condición) ?
valor1:valor2
Si la condición es verdadera, devuelve el
valor1, si es falsa devuelve el valor2.
ns4 =
(document.layers)?
true:false
ie4 = (document.all)?
true:false
Bucles
for(inicio, mientras,
incremento) {código}
Establece un bucle con un contador que
comenzará con el valor definido en
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.
for(x=1;x<6;x++){
document.write("Hola
"+x)}
while(condición) Repite el código mientras que la respuesta="";

{código} condición sea verdadera. while(respuesta !=
"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)
{código}
Especifica cuál es el objeto a utilizar
cuando se ejecute el código.
Varios
function
nombre(argumentos)
{código}
Crea una función personalizada con el
nombre que se haya especificado. Se
pueden (es opcional) usar argumentos
listándolos separados por comas. Al
llamar a la función se ejecutará el
código establecido.
function escribir(){
document.write("hola");
document.write("¿Cómo
estás?")}
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 con el nombre
que se especifique. En JavaScript no es
imprescindible crear una variable de
esete modo para poderla usar.
var Apellidos
Apellidos=Cascón
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 (cadena[,base]) Convierte una cadena en un número entero. Se puede 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">

</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: janette_jftrab@hotmail.com "
onmouseover="window.status='janette_jftrab@hotmail.com';return true">janette_jftrab
@hotmail.com</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>

</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"
</tr>
<tr>
color="#000000"><small>Domicilio</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Domicilio"
<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"
</tr>
<tr>
Provincia</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Provincia"
<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"
</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"
<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"
</tr>
<tr>
color="#000000"><small>Teléfono</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Telefono"
<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"
</tr>

<tr>
<td width="20%" align="right"></td>
<td width="30%"></td>
<td width="20%" align="right"><font face="Arial" color="#000000">  </font></td>
</tr>
<tr>
color="#000000"><small>Empresa</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Empresa"
Dirección</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text"
name="DireccionEmpresa" size="20"></font></td>
</tr>
<tr>
Teléfono</small></font></td>
name="telefonoEmpresa" size="20"></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="FaxEmpresa"
</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"
</tr>
<tr>
</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"
</tr>

<tr>
color="#000000"><small>Numero</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="NumeroTarjeta"
<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"
</tr>
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Fecha de
vencimiento</small></font></td>
name="VencimientoMes1" size="2"> / <input type="text" name="Vencimientoano1"
</tr>
<tr>
</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>

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

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

onfocus=" window.status = 'Escriba sus apellidos'; "
tabindex="2">
</p><p>
Telefono: <input type="text" name="telefono"
onfocus=" window.status = 'Escribe el teléfono de contacto'; "
tabindex="3">
</p><p>
Empresa: <input type="text" name="empresa"
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'; "
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"
onfocus=" this.blur(); ">
</td>
</tr>
<tr>
<td>
tabindex="8">
</td>
<td>

tabindex="9">
</td>
<td>
tabindex="10">
</td>
<td>
</td>
</tr>
<tr>
<td>
tabindex="11">
</td>
<td>
tabindex="12">
</td>
<td>
tabindex="13">
</td>
<td>
</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"
</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"

</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";
}
function vermenu2()
{
vermenu1();
}
function vermenu3()
{
vermenu2();
}
function vermenu4()
{
vermenu2();
}
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>
onclick="ir('www.yahoo.com')">
Yahoo
</div>
</div>
<div id="menu4" onmouseout="vermenu1()">
onclick="ir('html.conclase.net')">
HTML con clase<br>
</div>
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>
color="#000000"><small>Apellido</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Apellido"
<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"
</tr>
<tr>
color="#000000"><small>Domicilio</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Domicilio"
Ciudad</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Ciudad"
</tr>
<tr>
Provincia</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Provincia"
<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"
</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"
<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"
</tr>
<tr>
color="#000000"><small>Teléfono</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Telefono"
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Fax"
</tr>
<tr>

<td width="20%" align="right"><font face="Arial" color="#000000">  </font></td>
</tr>
<tr>
color="#000000"><small>Empresa</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Empresa"
Dirección</small></font></td>
name="DireccionEmpresa" size="20"></font></td>
</tr>
<tr>
Teléfono</small></font></td>
name="telefonoEmpresa" size="20"></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="FaxEmpresa"
</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"
</tr>
<tr>
</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"
</tr>
<tr>

color="#000000"><small>Numero</small></font></td>
<td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="NumeroTarjeta"
<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"
</tr>
<tr>
<td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Fecha de
vencimiento</small></font></td>
name="VencimientoMes1" size="2"> / <input type="text" name="Vencimientoano1"
</tr>
<tr>
</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)
} else if ( (Math.floor((imagen - 1)/anchura) != altura - 1) && (blanco == imagen + anchura) ) {
Mueve(imagen)
} else if ( ((imagen - 1) % anchura != 0) && (blanco == imagen - 1) ) {
Mueve(imagen)

} else
alert('Esta pieza no puede moverse. Pulsa sobrenuna 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>

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) &&
return (2)
(tablero.elements[8].value == ""))
return (8)
if ((tablero.elements[0].value == ficha) && (tablero.elements[4].value == "") &&
return (4)
if ((tablero.elements[0].value == "") && (tablero.elements[4].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
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) &&
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

if ((tablero.elements[x].value == ficha) && (tablero.elements[x + 3].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) &&
if ((x + 3) != jugadaHtal)
return (x + 3)
if ((tablero.elements[x].value == "") && (tablero.elements[x + 3].value == "") &&
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) {
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
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 partidanpulsa 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
if ((tablero.elements[x].value == ficha) && (tablero.elements[x + 1].value == ficha) &&
return true
}
if ((tablero.elements[x].value == ficha) && (tablero.elements[x + 3].value == ficha) &&

return true
}
//comprueba las diagonales
return true
return true
return false
}
</script>
</head>
<body>

<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>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td width="20%"><input type="button" value=" X " name="B0" onClick="PonerAspa(tablero, 0)"
class="metal"></td>
class="metal"></td>
class="metal"></td>
<td width="85%"><input type="reset" value="Juego nuevo" name="nuevo" onClick="jugando=true"
class="metal"></td>
</tr>
<tr>
class="metal"></td>

class="metal"></td>
class="metal"></td>
</tr>
<tr>
class="metal"></td>
class="metal"></td>
class="metal"></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">
</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>

Diseño web clase03

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (13)

Destacado

Destacado (8)

Similar a Diseño web clase03

Similar a Diseño web clase03 (20)

Más de Janett Julca Flores

Más de Janett Julca Flores (15)

Último

Último (14)

Diseño web clase03