Practicas Clase JavaScript

EJERCICIOS CLASE
CURSO DISEO WEB Y MULTIMEDIA

PROFESOR: RAUL RENALES AGERO
INDICE DE EJEMPLOS:
1 CONTRASEAS
1. CONTRASEAS EN JAVASCRIPT .................... 2
1.1 CONTRASEA TIPICA (USER Y PASS) ......... 2
1.2 CONTRASEA CAMBIO DE PAGINA ............. 3
1.3 CONTRASEA CON TECLADO VIRTUAL ..... 4
1.4 CREAR CLAVES ALEATORIA .......................... 6
1.5. COMPROBAR LA FORTALEZA DE UNA
CLAVE ..................................................................... 6
1.6 PASSWORD 2 ....................................................... 7
2 FRAMEWORKS EDICION TEXTO

2. EDITORES DE TEXTO........................................... 9
2.1 TINYMCE: EDITOR WYSIWYG .......................... 9
3 APLICACIONES
3. APLICACIONES .................................................... 10
3.1 CALCULAR LETRA DEL DNI .......................... 10
4 RELOJES Y FECHAS
4. RELOJES Y FECHAS .......................................... 13
4.1 RELOJ SENCILLO ............................................. 13
4.2 CALENDARIO CSS ............................................ 14
5.2 Menu Select con evento onChange ............. 17
6 OBJETO WINDOW Y NAVIGATOR

6 OBJETO WINDOW Y NAVIGATOR .................... 18
6.1 RESOLUCION DE PANTALLA ........................ 18
6.2 EL OBJETO NAVIGATOR ................................ 18
6.3 EL OBJETO WINDOW. ABRIR UNA
VENTANA .............................................................. 19
6.4 EL OBJETO WINDOW. CREAR, MOVER Y
CERRAR UNA VENTANA .................................. 19
6.5 IMPRIMIR DESDE UN BOTON O UNA
IMAGEN ................................................................. 20
6.6 DESHABILITAR EL BOTON DERECHO DEL
RATON ................................................................... 20
7 OBJETO DOCUMENT
7. EL OBJETO DOCUMENT ................................... 21
7.1 IMGENES ALEATORIAS ................................ 21
7.2 GALERIA DE IMGENES (FRAMEWORK
LIGHTBOX) ........................................................... 21
7.3 Propiedades de Imagenes ............................... 23
7.4 Propiedades de Capas ...................................... 25
7.5 CAMBIAR TAMAO DE CAPA........................ 26
7.6 EFECTO PERSIANA EN CAPA ....................... 26
7.7 MOSTRAR CAPA CON CARGANDO AL
INICIO TIPO GOOGLE ........................................ 28
7.8 ESQUEMA DESPLEGABLE (ie) ...................... 30
5 FORMULARIOS
8 COOKIES
5. FORMULARIOS .................................................... 16
5.2 FUNCIONES PARA VALIDAR CAMPOS DE
TEXTO.................................................................... 17
8. COOKIES................................................................ 31
8.1 NOTIFICADOR DE ULTIMA MODIFICACION31
Ejercicios realizados en Clase Modulo JavaScript
1. CONTRASEAS EN JAVASCRIPT
1.1 CONTRASEA TIPICA (USER Y PASS)
El objetivo de este ejemplo es crear un tipico acceso por contrasea a alguna de las
paginas de nuestro sitio.
Usted debe aprender con este ejemplo a capturar los datos de los componentes de
formulario, trabajar con condiciones IF/ELSE, crear una funcion y utilizar un evento
en un boton para lanzar funciones.
Codigo:
<html>
<head>
<script>
function login(){
mi_usuario = document.form1.user.value;
mi_contrasena = document.form1.pass.value;
if (mi_usuario == "raul" && mi_contrasena == "miko") {
document.location = "http://google.es";
}else{
alert(mi_usuario + ", La contrasea no es correcta");
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
Usuario: <input type="text" name="user" id="user" /><BR>
Contrasea: <input type="password" name="pass" id="pass" /><BR>
<input type="button" name="button" id="button" value="Entrar" onClick="login()" />
</form>
</body>
</html>
1.2 CONTRASEA CAMBIO DE PAGINA

El objetivo de este ejemplo es crear un acceso que pregunte una clave y utilize la
palabra de la clave para enviar a una pagina u otra del sitio. Deberemos crear esa
pagina extra.
Usted debe aprender con este ejemplo a capturar los datos de los componentes de
formulario, trabajar con condiciones IF/ELSE, crear una funcion y utilizar un evento
en un boton para lanzar funciones.
Codigo:
<HTML>
<HEAD>
<TITLE>Acceso con password</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function Saltar(pal)
{
window.location=pal+".htm"
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Introduce la palabra clave para acceder a la pagina
<P>
<INPUT TYPE="password" NAME="palclave" SIZE=25 VALUE="">
<INPUT TYPE="button" VALUE="Acceder"
onClick="Saltar(this.form.palclave.value)">
</FORM>
</BODY>
</HTML>
1.3 CONTRASEA CON TECLADO VIRTUAL
En este ejemplo utilizaremos un Teclado virtual para introducirlos datos, realizaremos un

ejemplo simple de funcionamiento y luego lo complicaremos con varios cambios para
mejorar la seguridad.
Usted debe aprender a utilizar un teclado virtual, el uso de los componentes Hidden en
Javascript y los distintos tipos de estrategias que podemos usar para esconder la
contrasea.
Codigo:
<HTML>
<HEAD>
<TITLE>Acceso con password</TITLE>
<script>
function teclado(valor){ clave.pantalla.value += valor; }
function login(){
if (clave.pantalla.value == clave.oculto.value){
document.location="http://google.es";
}else{
alert("Fuera de aqui sucia RATA!!")
}
}
</script>
</HEAD>
<BODY bgcolor="#ffffff" TEXT="#000000" LINK="#8000FF" VLINK="#3AAFAF">
<form action="" method="post" name="clave" id="clave">
<label>
<div align="center">
<input type="text" name="pantalla" id="pantalla">
<input name="oculto" type="hidden" id="oculto" value="6868">
</div>
</label>
<div align="center"></div>
<p align="center">
<input type="button" name="1" id="1" value="1" onClick="teclado(1)">
<br>

<br>
<br>
<input type="button" name="intro" id="intro" value=" Entrar "
onClick="login()">
</p>
<p align="center"> </p>
<p align="center"> </p>
</form>
</BODY>
</HTML>
1.4 CREAR CLAVES ALEATORIA

Crear claves aleatorias es muy importante para poder protejer de una manera razonable
nuestras paginas o contenidos, para ello vamos a realizar un pequeo ejemplo de un
creador de contraseas RAMDOM.
Codigo:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Clave Aleatoria</title>
<script>
var caracter="1234567890";
caracter+="QWERTYUIOPASDFGHJKLZXCVBNM";
caracter+="qwertyuioplkjhgfdsazxcvbnm";
var numero_caracteres=8;
var total=caracter.length;
function azar(){
var clave="";
for(a=0;a<numero_caracteres;a++){
clave+=caracter.charAt(parseInt(total*Math.random(1)));
}
document.forms[0].clave2.value=clave;
}
</script>
</head>
<body onload="azar()">
<form>
Clave.-<input type="text" readonly="readonly" name="clave2" id="clave2" />
<input type="button" value="regenerar clave" onclick="azar()" />
</form>
</body>
</html>
1.5. COMPROBAR LA FORTALEZA DE UNA CLAVE

Mediante este Script seremos capaces de informar al usuario de la fortaleza de una
contrasea, lo usado para informar si la contrasea es buena o mala es una escala de tres
colores, verde para una buena contrasea, amarillo para una contrasea normal, rojo para
una contrasea mala.
Codigo:
<html>
<head>
<title>Fortaleza de Contrasea</title>
<script>
pw_min = 5; // Caracteres minimos de la contrasea
pw_max = 20; // Caracteres maximos de la contrasea
pw_invalid = 'red'; // Contrasea no valida = color rojo
pw_insecure = 'yellow'; // Contrasea no insegura = color amarillo
pw_secure = 'green'; // Contrasea valida = color verde
pw_validate = /^[a-z0-9]+$/i; // Algoritmo para validar la password
document.onkeyup = function() {
if (typeof pw_focus != 'undefined') {
if (pw_focus.value.length < pw_min || pw_focus.value.length >
pw_max) bcolor = pw_invalid;
else if (!pw_validate.test(pw_focus.value)) bcolor = pw_invalid;
else if (pw_focus.value.toLowerCase() == pw_focus.value ||
pw_focus.value.toUpperCase() == pw_focus.value) bcolor = pw_insecure;
else if (/^[a-z]+$/i.test(pw_focus.value) || /^[09]+$/i.test(pw_focus.value)) bcolor = pw_insecure;
else bcolor = pw_secure;
pw_focus.style.backgroundColor = bcolor;
}
}
window.onload = function() {
var inputs = document.getElementsByTagName('input');
for (i = 0; i < inputs.length; i++) {
if (inputs[i].type == 'password') {
inputs[i].onfocus = function() {
pw_focus = this;
}
inputs[i].onblur = function() {
delete pw_focus;
}
}
}
}
</script>
</head>
<body>
<input type="password" style="width: 250px" /><br /><br />
</body>
</html>
1.6 PASSWORD 2
Una sencilla forma de acceder a una pgina, mediante un password o contrasea, empleando
para ello JavaScript.
a) Cdigo JavaScript
La primera funcin estar en la pgina de acceso mientras que la sentencia para
redireccionar se sita en la cabecera de la pgina a la que se accede desde la primera
(pgina clave).
El mtodo se basa en colocar pginas cuyo nombre sea el de las passwords, seguido por
supuesto de la extensin htm o html. Cuando un usuario accede deber conocer el
nombre de la pgina si no recibir un mensaje de pgina no encontrada emitido por el
navegador. Al acceder a la pgina clave el navegador se redirecciona a la pgina donde
tu quieras que llegue.
function password(texto)
{
if (texto!="")
location.href= texto+".htm";
}
//sentencia para redireccionar
location.replace("paginabase.htm")
b) Cdigo HTML
La pgina de acceso contendr la funcin password() o mejor an un enlace al archivo
con esta funcin. La pgina clave se llamar con el nombre que asignes a la password,
por ejemplo re345ty seguido de la extensin htm.
Cuando el usuario accede a tu pgina de acceso escribe en el formulario su clave, si sta
es re345ty llegar a la pgina re345ty.htm donde una sentencia de redireccin lo enva a
tu pgina principal. Si el usuario escribe otra clave, por ejemplo er456, el navegador
8
buscar la pgina correspondiente, en el ejemplo er456.htm, al no hallarla devolver la

clsica pgina de error. Debers crear una pgina clave para cada password que asignes.
Sencillo verdad?, no es a prueba de bombas pero puede funcionar y de hecho funciona.
La forma de romper este password es encontrar la lista de directorios de tu web, y la
mayora de servidores no permiten esta operacin. Claro tambin podran acceder a esta
pgina principal directamente si conocen su nombre.
Pgina de acceso:
<HTML>
<HEAD>

</HEAD>
<BODY COLOR ="#FFFFFF">
<FORM NAME="pass" ACTION="">Teclea tu password:
<input type="password" name="clave">
<input type="button" name="entrar"
onclick = "password(this.form.clave.value)">
</FORM>
</BODY>
</HTML>
Pgina clave:
<HTML>
<HEAD>
<script language="javascript">
location.replace("mipaginappal.htm");
</script>
</HEAD>
<BODY COLOR ="#FFFFFF">
</BODY>
</HTML>
2. EDITORES DE TEXTO
2.1 TINYMCE: EDITOR WYSIWYG
En determinadas ocasiones necesitamos ofrecer a nuestros usuarios una mayor libertad a

la hora de introducir grandes cantidades de texto, para estos casos los editores de Texto
WYSIWYG son los mas indicados. Su uso es tan sencillo como instalar una pequea libreria
e insertar una area de texto en su pagina web.
El framework necesario para realizar el ejercicio se puede descargar desde la siguiente url:
http://tinymce.moxiecode.com/download.php
Usted debe aprender: configurar el Framework TinyMCE y asimilar los conceptos para
trabajar con otros frameworks.
Codigo:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas", // uso en areas de texto
theme : "advanced" //tipo de editor a usar
});
</script>
</head>
<body>
10
<textarea name="tinymce" id="tinymce" cols="80" rows="10"></textarea>

</body>
</html>
3. APLICACIONES
3.1 CALCULAR LETRA DEL DNI
Esta aplicacion utiliza el algoritmo que define que letra tendra nuestro DNI, es muy util para
calcularla automaticamente y que el usuario no tenga que escribir nada.
Codigo:
<html>
<head>
<title>Calculo de la letra del D.N.I.</title>
</head>
<BODY bgcolor="#ffffff" TEXT="#000000" LINK="#8000FF" VLINK="#3AAFAF">
<script language="JavaScript">
<!-var ASC
function CalcularNIF()
{
if (document.forms[0].DNI.value == "")
{
alert("Escriba el valor para el campo \"DNI\" .");
document.forms[0].DNI.focus();
return (false);
}
var digitos = "0123456789";
var chequeo = document.forms[0].DNI.value;
var correcto = true;
for (i = 0; i < chequeo.length; i++)
{
ch = chequeo.charAt(i);
for (j = 0; j < digitos.length; j++)
11
if (ch == digitos.charAt(j))
break;
if (j == digitos.length)
{
alert("Escriba nicamente d gitos del 0 al 9 en el campo \"DNI\".");
document.forms[0].DNI.focus();
return (false);
}
}
ASC= document.forms[0].DNI.value % 23;
if ( ASC == 0) { document.forms[0].Letra.value="T"; };
if ( ASC == 1) { document.forms[0].Letra.value="R"; };
if ( ASC == 2) { document.forms[0].Letra.value="W"; };
if ( ASC == 3) { document.forms[0].Letra.value="A"; };
if ( ASC == 4) { document.forms[0].Letra.value="G"; };
if ( ASC == 5) { document.forms[0].Letra.value="M"; };
if ( ASC == 6) { document.forms[0].Letra.value="Y"; };
if ( ASC == 7) { document.forms[0].Letra.value="F"; };
if ( ASC == 8) { document.forms[0].Letra.value="P"; };
if ( ASC == 9) { document.forms[0].Letra.value="D"; };
if ( ASC == 10) { document.forms[0].Letra.value="X"; };
if ( ASC == 11) { document.forms[0].Letra.value="B"; };
if ( ASC == 12) { document.forms[0].Letra.value="N"; };
if ( ASC == 13) { document.forms[0].Letra.value="J"; };
if ( ASC == 14) { document.forms[0].Letra.value="Z"; };
if ( ASC == 15) { document.forms[0].Letra.value="S"; };
if ( ASC == 16) { document.forms[0].Letra.value="Q"; };
if ( ASC == 17) { document.forms[0].Letra.value="V"; };
if ( ASC == 18) { document.forms[0].Letra.value="H"; };
if ( ASC == 19) { document.forms[0].Letra.value="L"; };
if ( ASC == 20) { document.forms[0].Letra.value="C"; };
if ( ASC == 21) { document.forms[0].Letra.value="K"; };
if ( ASC == 22) { document.forms[0].Letra.value="E"; };
if ( ASC == 23) { document.forms[0].Letra.value="T"; };
return document.forms[0].Letra.value;
}
// -->
</script>
<font size="+2"><b><i>Calculo del NIF</b></i></font><p>
Introduciendo el DNI calcula la letra del NIF<p>
<center>
<form method="POST" name="NIF">
<table border="0" bgcolor="#808080">
12
<tr>
<td> </td>
<td><font face="Comic Sans MS"><strong>DNI</strong></font></td>
<td align="center"><font face="Comic Sans
MS"><strong>Letra</strong></font></td>
</tr>
<tr>
<td><font face="Comic Sans MS"><input type="button"
name="Calcular" value="Calcular" language="JavaScript" onclick="CalcularNIF()">
</font></td>
<td><font face="Comic Sans MS"><input type="text" size="9"
maxlength="9" name="DNI"> </font></td>
<td align="center"><font face="Comic Sans MS"><input type="text"
size="1" maxlength="1" name="Letra"> </font></td>
</tr>
</table>
</form>
<blockquote>
<p><strong>Fecha de Creacion: </strong><font
face="Arial"><strong>15/6/97</strong></font><font face="Comic Sans MS">
</font><strong><br>
Ultima Revision: </strong><font
face="Arial"><strong>31/8/97</strong></font><strong><br>
Autor: </strong><font face="Arial"><strong>Overdrive</strong></font></p>
</blockquote></center>
<a href="index.htm#dni1">Volver</a>
</body>
</html>
4. RELOJES Y FECHAS
4.1 RELOJ SENCILLO
Mediante este ejemplo crearemos un reloj para ser visualizado en una caja de texto.
13
Usted debe aprender con este ejemplo a manejar objetos Date().

Codigo:
<html>
<head>
<title>Mi primer reloj en JAVA</title>

15
<form action="#" method="get">

<input type="text" name="date" id="campo_fecha" />
<input type="button" id="lanzador" value="Calendario" />
</form>


<script type="text/javascript">
Calendar.setup({
inputField : "campo_fecha", // id del campo de texto
ifFormat : "%d/%m/%Y", // formato de la fecha que se escriba en el campo de texto
button : "lanzador" // el id del botn que lanzar el calendario
});
</script>
</body>
</html>
16
5. FORMULARIOS
5.1 INSERTAR UNA IMAGEN DENTRO DE UN BOTON DE FORMULARIO
Mediante este Script vamos a insertar una imagen dentro del boton tipico de formulario, con
lo que ganara mas en aspecto.
Codigo:
<button type="submit"><img src="http://www.iconarchive.com/icons/deleket/sleek-xpbasic/256/Ok-icon.png" width ="20" height="20" alt="xxx" />Enviar</button>
5.2 Menu Select con evento onChange

Sencillo ejemplo de uso de un menu de seleccion que ejecuta una function cuando cambio de opcion.
Usted debe aprender con este ejemplo el uso del evento onChange, y como utilizar THIS en los
objetos.
Codigo:
<form>
<select name="servicio" size="8"
onchange="top.location.href=this.form.servicio.options[this.form.servicio.selectedIndex].value">
<option value="Select1.htm">Seleccionar</option>
<option value="abrir1.htm">Abre una ventana</option>
<option value="barra1.htm">Mensaje en la barra</option>
<option value="calenda1.htm">Calendario</option>
<option value="cerrar.htm">cierra una ventana</option>
<option value="directorio.htm">Ruta del archivo actual</option>
<option value="reloj.htm">Reloj</option>
<option value="pinpon.htm">Mensaje que rebota</option>
<option value="fecha.htm">Fecha y hora</option>
<option value="validat1.htm">Valida contenido</option>
<option value="validat2.htm">Valida y envia contenido</option>
<option value="menu.htm">Cambia el grafico del enlace</option>
</select>
</form>
5.2 FUNCIONES PARA VALIDAR CAMPOS DE TEXTO

En este ejercicio resumiremos algunas funciones sencillas para validar campos de texto para
diferentes casos.
-
Campo de texto con ms de XX caracteres: (Aplicar con evento onBlur en la caja)
function maximo_caracteres(maximo){
var cadena_texto = document.formu.micaja.value;
var tamano_texto = cadena_texto.length;
17
if (tamano_texto > maximo){

alert ("Usted escribio mas de " + maximo + " caracteres");
} }
Campo de texto que contiene Email: (Aplicar con evento onBlur en la caja)
function email_valido(){
var cadena = document.formu.micaja2.value;
var arroba = cadena.lastIndexOf('@');
var punto = cadena.lastIndexOf('.',arroba);
if ((arroba < 0) && (punto < 0)){
alert ("Esto no es un Email");
} }
6 OBJETO WINDOW Y NAVIGATOR:

6.1 RESOLUCION DE PANTALLA:
Mediante este ejempo podremos aprender como diferenciar entre las distintas resoluciones que
posee una pantalla. Para entender mejor la funcin que decidir que hacer sugun sea la resolucin,
previamente vamos a entender que propiedades importantes tiene el objeto SCREEN mediante este
cdigo:
<script>
document.writeln('<br>La resolucion es: ' + screen.width + " x " + screen.height);
document.writeln('<br>La resolucin para el diseo es: ' + screen.availWidth + " x " + screen.availHeight);
document.writeln('<br>La paleta de colores es: ' + screen.colorDepth);
document.writeln('<br>La tasa de refresco es: ' + screen.updateInterval);
</script>
Para realizar la diferenciacin por resolucin de pantalla, usaremos este script:

<script>
if (screen.width<1024)
document.location = "Pequea.htm" ;
else
if (screen.width<1280)
18
document.location = "mediana.htm";
else
document.location = "grande.htm";
</script>
6.2 EL OBJETO NAVIGATOR:

Mediante el siguiente ejemplo repasaremos las propiedades mas importantes del objeto navigator, de
la misma manera que en el ejercicio anterior, podremos tomar decisiones en el caso que
necesitemos diferenciar entre un tipo de navegador u otro.
Codigo:
<script LANGUAGE="JavaScript">
<!-document.write("Navigator <b>appCodeName</b>: " + navigator.appCodeName + "<br>");
document.write("Navigator <b>appName</b>: " + navigator.appName + "<br>");
document.write("Navigator <b>appVersion</b>: " + navigator.appVersion + "<br>");
document.write("Navigator <b>language</b>: " + navigator.language + "<br>");
document.write("Navigator <b>platform</b>: " + navigator.platform + "<br>");
document.write("Navigator <b>userAgent</b>: " + navigator.userAgent + "<br>");
//-->
</script>
6.3 EL OBJETO WINDOW. ABRIR UNA VENTANA.

Mediante este ejemplo aprenderemos a abrir una nueva ventana emergente. Para ello usaremos el
mtodo window.open, este es el cdigo:
function mypopup()
{
mywindow = window.open ("http://www.javascript-coder.com",
"mywindow","location=1,status=1,scrollbars=1,
width=100,height=100");
mywindow.moveTo(0,0);
}
6.3 EL OBJETO WINDOW. CERRAR UNA VENTANA.

Mediante este ejemplo aprenderemos a cerra una ventana. Este es el cdigo:
<script>
//creamos la variable ventana_secundaria que contendr una referencia al popup que vamos a abrir
//la creamos como variable global para poder acceder a ella desde las distintas funciones
var ventana_secundaria
19
function abrirVentana(){
//guardo la referencia de la ventana para poder utilizarla luego
ventana_secundaria =
window.open("cerrar_window2.html","miventana","width=300,height=200,menubar=no")
}
function cerrarVentana(){
//la referencia de la ventana es el objeto window del popup. Lo utilizo para acceder al mtodo close
ventana_secundaria.close()
}
</script>
6.4 EL OBJETO WINDOW. CREAR, MOVER Y CERRAR UNA VENTANA.

Mediante este ejemplo aprender a crear una ventana, escribir dentro de ella y modificar sus
propiedades de tal manera que seremos capaces de mover la ventana. Tambien aprender a utilizar
la funcin de ejecucin temporal setTimeout().
Codigo:
<HTML>
<HEAD>
<title>Ejemplo de JavaScript</title>
<!-function moverVentana()
{
mi_ventana.moveBy(5,5); // incrementa 5px en el eje X e Y
i++;
if (i<20)
setTimeout('moverVentana()',100);
else
mi_ventana.close();
}
//-->
</script>
</HEAD>
<BODY>
<!-var opciones="left=100,top=100,width=250,height=150", i= 0;
mi_ventana = window.open("","",opciones);
mi_ventana.document.write("Una prueba de abrir ventanas");
mi_ventana.moveTo(400,100);
moverVentana();
//-->
</script>
</BODY>
</HTML>
20
6.5 IMPRIMIR DESDE UN BOTON O UNA IMAGEN

Mediante el siguiente script aprenderemos a imprimir la pagina web desde algun boton o imagen que
incluiremos en la parte de BODY.
Tan solo necesitamos incluir el siguiente evento dentro del los parametros de IMG o INPUT:
onclick="window.print()"
6.6 DESHABILITAR EL BOTON DERECHO DEL RATON

Este sencillo script nos permitira bloquear el boton derecho del raton, con el objetivo de proteger
nuestro codigo para que otros usuarios no lo vean, tan solo es necesario colocar el siguiente mini
script en BODY:
<script language="Javascript">
document.oncontextmenu = function(){return false}
</script>
7. EL OBJETO DOCUMENT
7.1 IMGENES ALEATORIAS
Mediante el siguiente ejemplo veremos como cargar imgenes aleatorias en nuestra pgina:
Codigo:
<script language="javascript1.5">
imagen = new Array; // Poner aqui las imagenes que quiero rotar
imagen[0]="boton_superior.jpg";
imagen[1]="boton_superior2.jpg";
imagen[2]="boton_Mas.jpg";
imagen[3]="boton_superior.jpg";
var src = imagen[Math.floor(Math.random() * 3)];
21
document.write(src);
document.write ("<IMG SRC="+ src +">");
</script>
7.2 GALERIA DE IMGENES (FRAMEWORK LIGHTBOX)

LIGHTBOX:
Mediante este ejemplo aprenderemos a utilizar Lightbox un pequeo framework que nos ayudara a
realizar presentaciones sencillas y efectivas sobre nuestras imgenes.
Podemos descargar el Framework desde esta url:
http://www.lokeshdhakar.com/projects/lightbox2/
Para que funcione debemos de incluir en la parte de la Cabecera (<HEAD>) los siguientes vnculos:
<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript"
src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css"
media="screen" />
En la parte de BODY deberemos de poner el siguiente enlace para hacer

funcionar el Framework:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image
#1</a>
Importante:
usar title como titulo de la imagen.
FACEBOX:
Este es otro ejemplo de como usar otro framework para mostrar imagenes y popups integrados. En
este caso es mas sencillo y esta muy indicado para mostrar publicidad.
El Framework lo descargaremos de aqu: http://defunkt.github.com/facebox/
Descomprimimos el archivo ZIP y lo guardamos en la RAIZ de nuestro SITIO de Dreamweaver.
En la web debemos configurar lo siguiente:
HEAD: Debemos incluir estos codigos.

22
<link href="facebox.css" media="screen" rel="stylesheet" type="text/css"

/>
<link href="faceplant.css" media="screen" rel="stylesheet"
type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loading_image : 'loading.gif',
close_image
: 'closelabel.gif'
})
})
</script>
BODY:
<a href="#info" rel="facebox">texto para dentro de la ventana</a>
<div id="info" style="display:none;">
Texto para dentro de la ventana
</div>
<a href="stairs.jpg" rel="facebox"><img src="stairs.jpg"></a>
7.3 Propiedades de Imagenes

Mediante este ejemplo vamos a aprender a utilizar las propiedades del objeto imagen.
Codigo:
<HTML>
23
<HEAD>
<title>Ejemplo de JavaScript</title>
</HEAD>
<!-img1 = new Image();
img1.src = "chica.jpg";
img2 = new Image();
img2.src = "chica2.jpg";
function cambia(nombre,imagen)
{
nombre.src = imagen.src
}
function dobleancho()
{
imagen1.width=imagen1.width*2;
}
function doblealto()
{
imagen1.height=imagen1.height*2;
}
function mitadancho()
{
imagen1.width=imagen1.width/2;
}
function mitadalto()
24
{
imagen1.height=imagen1.height/2;
}
//-->
</script>
<BODY>
<a href="" onmouseover="cambia(imagen1,img1)" onmouseout="cambia(imagen1,img2)"><img
src="chica.jpg" width="68" height="68" border="0" name="imagen1"></a><br><br>
<a href="javascript:dobleancho()">Doble ancho</a><br>
<a href="javascript:doblealto()">Doble Alto</a><br>
<a href="javascript:mitadancho()">Mitad ancho</a><br>
<a href="javascript:mitadalto()">Mitad Alto</a><br>
</BODY>
</HTML>
7.4 Propiedades de Capas

Mediante este ejemplo vamos a aprender a utilizar las propiedades del objeto.
Mostrar / Ocultar capa:
Funciones en la parte de Head:
function mostrar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="visible";
}
function ocultar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="hidden";
}
25
</script>
Capas en la parte de Body:
<div id="capa1"
style="position:absolute;width:100;height:100;top:100;left:100;background-color:blue"
onmouseout="ocultar('capa2')" onmouseover="mostrar('capa2')">Capa 1</div>
<div id="capa2"
style="position:absolute;width:100;height:100;top:100;left:200;backgroundcolor:red;visibility:hidden">Capa 2</div>
7.5 Cambiar tamao de Capa:

Funcion en HEAD:
function agrandar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="visible";
document.getElementById(nombreCapa).style.width=400;
document.getElementById(nombreCapa).style.height=410;
}
Enlace en BODY:
<a href="javascript:agrandar('capa2')">Tmao de capa</a><br>

7.6 Efecto persiana sobre una capa:
Debemos de crear las siguientes funciones en HEAD:
var temporizadorplegar;
var temporizadordesplegar;
function plegar(){
clearTimeout(temporizadordesplegar);
26
var altura=parseInt(document.getElementById("contenido").style.height);
if(altura>0)
{
altura--;
document.getElementById("contenido").style.height=altura+"px";
temporizadorplegar=setTimeout("plegar()",10);
}
else
{
clearTimeout(temporizadorplegar);
}
}
function desplegar(){
clearTimeout(temporizadorplegar);
var altura=parseInt(document.getElementById("contenido").style.height);
if(altura<305){
altura++;
document.getElementById("contenido").style.height=altura+"px";
temporizadordesplegar=setTimeout("desplegar()",10);
}
else
{
27
clearTimeout(temporizadordesplegar);
}
}
</script>
Debemos crear los botones y la capa en BODY:
<div id="botones" style="width:600px; height:20px;">

<input type="button" id="recoger" value="recoger" onclick="plegar()" />
<input type="button" id="desplegar" value="desplegar" onclick="desplegar()" />
</div>
<div id="contenido" style="width:720px; height:305px; background-color:#006699;
position:relative;"></div>
7.7 Mostrar una Capa que indique que la pagina esta Cargando:
Usaremos este script cuando tengamos paginas que tarden mucho en cargar, de esta manera
informaremos al usuario que la pagina esta cargando.
Se aconseja copiar por completo el cdigo y pegarlo en una nueva pagina de Dreamweaver para ver
el resultado:
Cdigo:
<html >
<head>
<script language="javascript" type="text/javascript">
28
var textoCargando = "Cargando";

var numeroPuntos = 1;
var maxPuntos = 3;
var timerID = 0;
var cargado = false;
var tiempo = 500;
function oculta() {
document.getElementById("cargando").style.display = "none";
cargado = true;
clearTimeout(timerID);
}
function fTimer() {
var puntos = "";
for(i=0;i<numeroPuntos;i++) {
puntos += ".";
}
if (numeroPuntos++ >= maxPuntos) {
numeroPuntos = 0;
}
document.getElementById("cargando").innerHTML = textoCargando + puntos;
if (!cargado) {
timerID = setTimeout("fTimer()", 500);
29
}
}
</script >
<style type="text/css">
#cargando {
padding-left:2px; padding-right:2px; background-color:#CC0000; color:#FFFFFF;
font-weight:bold;
right:3px; top:3px; position:fixed;
}
</style>
</head>
<body onload="oculta()">
<div id="cargando">Cargando</div>
<script language="javascript">
timerID = setTimeout("fTimer()", 500);
</script>
</body>
</html>
7.8 ESQUEMA DESPLEGABLE (ie)
Este pequeo ejemplo te permitir construir listas en las que los niveles se pueden abrir
y cerrar a voluntad. Prubalo y personalzalo para tus necesidades.
a) Cdigo JavaScript
Se trata de un script tan simple que apenas necesita comentarios. La funcin recibe
como argumentos un identificador (iden), y busca el elemento HTML cuyo ID sea igual
a este valor, para ello usa el mtodo getElementById( ). Una vez encontrado el elemento
30
tan slo modifica su propiedad display: si est en mostrar (block) lo pone en ocultar
(none) y viceversa.
Quizs lo ms interesante de este script sea que usa cdigo standard, es decir destinado
a navegadores que cumplen con los estndares de la W3C, que en lo que afecta al
DHTML es la normativa del DOM1 y el HTML4. Por tanto este script debe funcionar
en Netscape 6 y en MSIE 6, de hecho funciona a partir de MSIE 5, que slo cumple la
regulacin DOM1 en un 86%.
function cambiaEstado(iden)
{
var elhtml = document.getElementById(iden);
if (elhtml.style.display == 'block')
elhtml.style.display = 'none';
else
elhtml.style.display = 'block';
}
</script>
b) Cdigo HTML
Como vemos en lugar de usar el evento onclick se hace la llamada a la funcin
cambiaEstado( ) directamente en el enlace. El argumento de la llamada es el ID del
bloque UL de la lista. Simple.
<body>
<ul>
<li><a href="javascript:cambiaEstado('e1')">entrada 1</a>
<ul id="e1" class="nivel1">
<li>apartado 1 de entrada 1</li>
</ul>
</li>
<li><a href="javascript:cambiaEstado('e2')">entrada 2</a>
<ul id="e2" class="nivel1">
<li>apartado 2 de entrada 2 </li>
</ul>
</li>
</ul>
</body>
8. COOKIES
8.1 NOTIFICADOR DE ULTIMA MODIFICACION:
En este ejemplo vamos a ver como usando cookies podemos informar al usuario la fecha de ultima
actualizacion del documento, ademas se le advierte si la pagina fue modificada desde la ultima vez
que el usuario visito la pagina web.
Para realizar este ejemplo necesitamos utilizar cookies con el objetivo de saber cuando visito la web
el usuario por ultima vez.
31
Codigo:
<html><head></head><body>
<CENTER>
<TABLE border=2 cellspacing=0 cellpadding=3>

<TR><TD bgcolor="#000044">
<FONT color="#4400ff" face=georgia,arial size=+1>
<CENTER>
<!-document.write(document.title);
//-->
</SCRIPT>
</TD></TR>
<TR><TD bgcolor="#440000">
<FONT size=-1 color="#ff0000" face="trebuchet MS","arial">
<FONT color="#ff8800">Realizada el </font>

February 05, 2002
<BR>
32

</SCRIPT>
</FONT>
</TD></TR>
</TABLE>
</CENTER>
</body></html>
35

Practicas Clase JavaScript

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Practicas Clase JavaScript

Diunggah oleh

Hak Cipta:

Format Tersedia

EJERCICIOS CLASE

CURSO DISEO WEB Y MULTIMEDIA

2 FRAMEWORKS EDICION TEXTO

5.2 Menu Select con evento onChange ............. 17

6 OBJETO WINDOW Y NAVIGATOR

Ejercicios realizados en Clase Modulo JavaScript

Ejercicios realizados en Clase Modulo JavaScript

1.2 CONTRASEA CAMBIO DE PAGINA

1.3 CONTRASEA CON TECLADO VIRTUAL

Ejercicios realizados en Clase Modulo JavaScript

En este ejemplo utilizaremos un Teclado virtual para introducirlos datos, realizaremos un

Ejercicios realizados en Clase Modulo JavaScript

<input type="button" name="6" id="6" value="6" onClick="teclado(6)">

1.4 CREAR CLAVES ALEATORIA

Ejercicios realizados en Clase Modulo JavaScript

1.5. COMPROBAR LA FORTALEZA DE UNA CLAVE

Ejercicios realizados en Clase Modulo JavaScript

Ejercicios realizados en Clase Modulo JavaScript

buscar la pgina correspondiente, en el ejemplo er456.htm, al no hallarla devolver la

Ejercicios realizados en Clase Modulo JavaScript

2.1 TINYMCE: EDITOR WYSIWYG

En determinadas ocasiones necesitamos ofrecer a nuestros usuarios una mayor libertad a

Ejercicios realizados en Clase Modulo JavaScript

<textarea name="tinymce" id="tinymce" cols="80" rows="10"></textarea>

Ejercicios realizados en Clase Modulo JavaScript

Ejercicios realizados en Clase Modulo JavaScript

Ejercicios realizados en Clase Modulo JavaScript

Usted debe aprender con este ejemplo a manejar objetos Date().

4.2 CALENDARIO CSS

Ejercicios realizados en Clase Modulo JavaScript

Despues de descargar el archivo comprimido en formato ZIP, extraemos su contenido (una

<link rel="stylesheet" type="text/css" media="all" href="jscalendar/calendar-green.css"

Ejercicios realizados en Clase Modulo JavaScript

<form action="#" method="get">

Ejercicios realizados en Clase Modulo JavaScript

5.2 Menu Select con evento onChange

5.2 FUNCIONES PARA VALIDAR CAMPOS DE TEXTO

Campo de texto con ms de XX caracteres: (Aplicar con evento onBlur en la caja)

Ejercicios realizados en Clase Modulo JavaScript

if (tamano_texto > maximo){

6 OBJETO WINDOW Y NAVIGATOR:

Para realizar la diferenciacin por resolucin de pantalla, usaremos este script:

Ejercicios realizados en Clase Modulo JavaScript

6.2 EL OBJETO NAVIGATOR:

6.3 EL OBJETO WINDOW. ABRIR UNA VENTANA.

6.3 EL OBJETO WINDOW. CERRAR UNA VENTANA.

Ejercicios realizados en Clase Modulo JavaScript

6.4 EL OBJETO WINDOW. CREAR, MOVER Y CERRAR UNA VENTANA.

Ejercicios realizados en Clase Modulo JavaScript

6.5 IMPRIMIR DESDE UN BOTON O UNA IMAGEN

6.6 DESHABILITAR EL BOTON DERECHO DEL RATON

var src = imagen[Math.floor(Math.random() * 3)];

Ejercicios realizados en Clase Modulo JavaScript

7.2 GALERIA DE IMGENES (FRAMEWORK LIGHTBOX)

<script type="text/javascript" src="js/prototype.js"></script>

En la parte de BODY deberemos de poner el siguiente enlace para hacer

usar title como titulo de la imagen.

HEAD: Debemos incluir estos codigos.

Ejercicios realizados en Clase Modulo JavaScript

<link href="facebox.css" media="screen" rel="stylesheet" type="text/css"

7.3 Propiedades de Imagenes

Ejercicios realizados en Clase Modulo JavaScript

Ejercicios realizados en Clase Modulo JavaScript