Scribd
Cargar
362 vistas35 páginas

Practicas Clase JavaScript PDF

Este documento presenta varios ejemplos de código JavaScript relacionados con contraseñas y seguridad. Incluye ejemplos de contraseñas típicas con usuario y contraseña, cambio de página según la contraseña ingresada, uso de un teclado virtual para ingresar contraseñas y generación de contraseñas aleatorias. Además, muestra cómo comprobar la fortaleza de una contraseña ingresada. El documento provee diferentes técnicas para manejar contraseñas y datos confidenciales en páginas

Cargado por

oscar
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
362 vistas35 páginas

Practicas Clase JavaScript PDF

Este documento presenta varios ejemplos de código JavaScript relacionados con contraseñas y seguridad. Incluye ejemplos de contraseñas típicas con usuario y contraseña, cambio de página según la contraseña ingresada, uso de un teclado virtual para ingresar contraseñas y generación de contraseñas aleatorias. Además, muestra cómo comprobar la fortaleza de una contraseña ingresada. El documento provee diferentes técnicas para manejar contraseñas y datos confidenciales en páginas

Cargado por

oscar
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

EJERCICIOS CLASE

CURSO DISEÑO WEB Y MULTIMEDIA


PROFESOR: RAUL RENALES AGÜERO
INDICE DE EJEMPLOS:

1 CONTRASEÑAS 5.2 Menu Select con evento onChange ............. 17

1. CONTRASEÑAS EN JAVASCRIPT .................... 2


1.1 CONTRASEÑA TIPICA (USER Y PASS) ......... 2 6 OBJETO WINDOW Y NAVIGATOR
1.2 CONTRASEÑA CAMBIO DE PAGINA ............. 3
1.3 CONTRASEÑA CON TECLADO VIRTUAL ..... 4 6 OBJETO WINDOW Y NAVIGATOR .................... 18
1.4 CREAR CLAVES ALEATORIA .......................... 6 6.1 RESOLUCION DE PANTALLA ........................ 18
1.5. COMPROBAR LA FORTALEZA DE UNA 6.2 EL OBJETO NAVIGATOR ................................ 18
CLAVE ..................................................................... 6 6.3 EL OBJETO WINDOW. ABRIR UNA
1.6 PASSWORD 2 ....................................................... 7 VENTANA .............................................................. 19
6.4 EL OBJETO WINDOW. CREAR, MOVER Y
CERRAR UNA VENTANA .................................. 19
2 FRAMEWORKS EDICION TEXTO 6.5 IMPRIMIR DESDE UN BOTON O UNA
IMAGEN ................................................................. 20
6.6 DESHABILITAR EL BOTON DERECHO DEL
2. EDITORES DE TEXTO........................................... 9 RATON ................................................................... 20
2.1 TINYMCE: EDITOR WYSIWYG .......................... 9

7 OBJETO DOCUMENT
3 APLICACIONES
7. EL OBJETO DOCUMENT ................................... 21
3. APLICACIONES .................................................... 10 7.1 IMÁGENES ALEATORIAS ................................ 21
3.1 CALCULAR LETRA DEL DNI .......................... 10 7.2 GALERIA DE IMÁGENES (FRAMEWORK
LIGHTBOX) ........................................................... 21
7.3 Propiedades de Imagenes ............................... 23
4 RELOJES Y FECHAS 7.4 Propiedades de Capas ...................................... 25
7.5 CAMBIAR TAMAÑO DE CAPA........................ 26
4. RELOJES Y FECHAS .......................................... 13 7.6 EFECTO PERSIANA EN CAPA ....................... 26
4.1 RELOJ SENCILLO ............................................. 13 7.7 MOSTRAR CAPA CON CARGANDO AL
4.2 CALENDARIO CSS ............................................ 14 INICIO TIPO GOOGLE ........................................ 28
7.8 ESQUEMA DESPLEGABLE (ie) ...................... 30

5 FORMULARIOS
8 COOKIES
5. FORMULARIOS .................................................... 16
5.2 FUNCIONES PARA VALIDAR CAMPOS DE 8. COOKIES................................................................ 31
TEXTO.................................................................... 17 8.1 NOTIFICADOR DE ULTIMA MODIFICACION31

2
Ejercicios realizados en Clase – Modulo JavaScript
1. CONTRASEÑAS EN JAVASCRIPT

1.1 CONTRASEÑA TIPICA (USER Y PASS)

El objetivo de este ejemplo es crear un tipico acceso por contraseña 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 contraseña no es correcta");
}
}
</script>
</head>

<body>

<form id="form1" name="form1" method="post" action="">


Usuario: <input type="text" name="user" id="user" /><BR>
Contraseña: <input type="password" name="pass" id="pass" /><BR>
<input type="button" name="button" id="button" value="Entrar" onClick="login()" />
</form>

</body>
</html>

3
Ejercicios realizados en Clase – Modulo JavaScript
1.2 CONTRASEÑA 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 CONTRASEÑA CON TECLADO VIRTUAL

4
Ejercicios realizados en Clase – Modulo JavaScript
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
contraseña.

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


<input type="button" name="2" id="2" value="2" onClick="teclado(2)">
<input type="button" name="3" id="3" value="3" onClick="teclado(3)">
<br>
<input type="button" name="4" id="4" value="4" onClick="teclado(4)">
<input type="button" name="5" id="5" value="5" onClick="teclado(5)">

5
Ejercicios realizados en Clase – Modulo JavaScript
<input type="button" name="6" id="6" value="6" onClick="teclado(6)">
<br>
<input type="button" name="7" id="7" value="7" onClick="teclado(7)">
<input type="button" name="8" id="8" value="8" onClick="teclado(8)">
<input type="button" name="9" id="9" value="9" onClick="teclado(9)">
<br>
<input type="button" name="intro" id="intro" value=" Entrar "
onClick="login()">
</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</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 pequeño ejemplo de un
creador de contraseñas RAMDOM.

Codigo:
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<title>Clave Aleatoria</title>

<script>

var caracter="1234567890";
caracter+="QWERTYUIOPASDFGHJKLÑZXCVÇBNM";
caracter+="qwertyuiopñlkjhçgfdsazxcvbnm";
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()">

6
Ejercicios realizados en Clase – Modulo JavaScript
<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


contraseña, lo usado para informar si la contraseña es buena o mala es una escala de tres
colores, verde para una buena contraseña, amarillo para una contraseña normal, rojo para
una contraseña mala.

Codigo:

<html>
<head>
<title>Fortaleza de Contraseña</title>
<script>
pw_min = 5; // Caracteres minimos de la contraseña
pw_max = 20; // Caracteres maximos de la contraseña
pw_invalid = 'red'; // Contraseña no valida = color rojo
pw_insecure = 'yellow'; // Contraseña no insegura = color amarillo
pw_secure = 'green'; // Contraseña 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) || /^[0-
9]+$/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() {

7
Ejercicios realizados en Clase – Modulo JavaScript
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 página, mediante un password o contraseña, empleando
para ello JavaScript.

a) Código JavaScript
La primera función estará en la página de acceso mientras que la sentencia para
redireccionar se sitúa en la cabecera de la página a la que se accede desde la primera
(página clave).

El método se basa en colocar páginas cuyo nombre sea el de las passwords, seguido por
supuesto de la extensión htm o html. Cuando un usuario accede deberá conocer el
nombre de la página si no recibirá un mensaje de página no encontrada emitido por el
navegador. Al acceder a la página clave el navegador se redirecciona a la página donde
tu quieras que llegue.

function password(texto)
{
if (texto!="")
location.href= texto+".htm";
}
//sentencia para redireccionar
location.replace("paginabase.htm")

b) Código HTML
La página de acceso contendrá la función password() o mejor aún un enlace al archivo
con esta función. La página clave se llamará con el nombre que asignes a la password,
por ejemplo re345ty seguido de la extensión htm.

Cuando el usuario accede a tu página de acceso escribe en el formulario su clave, si ésta


es re345ty llegará a la página re345ty.htm donde una sentencia de redirección lo envía a
tu página principal. Si el usuario escribe otra clave, por ejemplo er456, el navegador

8
Ejercicios realizados en Clase – Modulo JavaScript
buscará la página correspondiente, en el ejemplo er456.htm, al no hallarla devolverá la
clásica página de error. Deberás crear una página 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
mayoría de servidores no permiten esta operación. Claro también podrían acceder a esta
página principal directamente si conocen su nombre.

Página de acceso:
<HTML>
<HEAD>
<!-- aquí va el código javascrip -->
</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>
Página clave:
<HTML>
<HEAD>
<script language="javascript">
location.replace("mipaginappal.htm");
</script>
</HEAD>
<BODY COLOR ="#FFFFFF">
</BODY>
</HTML>

2. EDITORES DE TEXTO

9
Ejercicios realizados en Clase – Modulo JavaScript
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 pequeña 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&iacute;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
Ejercicios realizados en Clase – Modulo JavaScript
<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
Ejercicios realizados en Clase – Modulo JavaScript
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
Ejercicios realizados en Clase – Modulo JavaScript
<tr>
<td>&nbsp;</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
Ejercicios realizados en Clase – Modulo JavaScript
Usted debe aprender con este ejemplo a manejar objetos Date().

Codigo:

<html>
<head>
<title>Mi primer reloj en JAVA</title>
<script language="JavaScript">
<!-- Java Clock

var timerID = null;


var timerRunning = false;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function startclock () {
// Nos aseguramos que el reloj esta parado
stopclock();
showtime();
}
function showtime () {
var fecha = new Date();
var hora = fecha.getHours();
var minutos = fecha.getMinutes();
var segundos = fecha.getSeconds()
var timeValue = "" + ((hora >12) ? hora -12 :hora)
timeValue += ((minutos < 10) ? ":0" : ":") + minutos
timeValue += ((segundos < 10) ? ":0" : ":") + segundos
timeValue += (hora >= 12) ? " P.M." : " A.M."
document.clock.face.value = timeValue;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}

</script>

</head>

<BODY onload="startclock()">

<form name="clock" onsubmit="0">


<strong><input type="text" size="12" name="face"></strong>
</form>

</body></html>

4.2 CALENDARIO CSS

14
Ejercicios realizados en Clase – Modulo JavaScript
Mediante el siguiente ejemplo veremos como utilizar uno de los miles de calendarios que
podemos encontrar en internet. La mayoría de ellos se utilizan en sitios donde tenemos que
elegir una fecha para reservar algo.

Todo lo necesario para hacer el ejemplo lo podeis descargar aquí:

http://sourceforge.net/projects/jscalendar/

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


carpeta) dentro de la raiz (/) de nuestro sitio. Tras esta operación abriremos una pagina
nueva en DW y realizaremos los siguientes cambios:

<html>

<head>

<title>Calendario de pruebas</title>

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


title="win2k-cold-1" />

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

<script type="text/javascript" src="jscalendar/lang/calendar-es.js"></script>

<script type="text/javascript" src="jscalendar/calendar-setup.js"></script>

</head>

<body>

<!-- formulario con el campo de texto y el botón para lanzar el calendario-->

15
Ejercicios realizados en Clase – Modulo JavaScript
<form action="#" method="get">

<input type="text" name="date" id="campo_fecha" />

<input type="button" id="lanzador" value="Calendario" />

</form>

<!-- script que define y configura el calendario-->

<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 botón que lanzará el calendario

});

</script>

</body>

</html>

16
Ejercicios realizados en Clase – Modulo JavaScript
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-xp-


basic/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 más 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
Ejercicios realizados en Clase – Modulo JavaScript
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 función que decidirá que hacer sugun sea la resolución,
previamente vamos a entender que propiedades importantes tiene el objeto SCREEN mediante este
código:

<script>
document.writeln('<br>La resolucion es: ' + screen.width + " x " + screen.height);
document.writeln('<br>La resolución para el diseño 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 diferenciación por resolución de pantalla, usaremos este script:

<script>
if (screen.width<1024)
document.location = "Pequeña.htm" ;
else
if (screen.width<1280)

18
Ejercicios realizados en Clase – Modulo JavaScript
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
método window.open, este es el código:

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 código:

<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
Ejercicios realizados en Clase – Modulo JavaScript
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 método 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 función de ejecución temporal setTimeout().

Codigo:

<HTML>
<HEAD>
<title>Ejemplo de JavaScript</title>
<script LANGUAGE="JavaScript">
<!--
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>
<script LANGUAGE="JavaScript">
<!--
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
Ejercicios realizados en Clase – Modulo JavaScript
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 IMÁGENES ALEATORIAS

Mediante el siguiente ejemplo veremos como cargar imágenes aleatorias en nuestra página:

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
Ejercicios realizados en Clase – Modulo JavaScript
document.write(src);
document.write ("<IMG SRC="+ src +">");

</script>

7.2 GALERIA DE IMÁGENES (FRAMEWORK LIGHTBOX)

LIGHTBOX:

Mediante este ejemplo aprenderemos a utilizar Lightbox un pequeño framework que nos ayudara a
realizar presentaciones sencillas y efectivas sobre nuestras imágenes.

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 vínculos:

<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
Ejercicios realizados en Clase – Modulo JavaScript
<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
Ejercicios realizados en Clase – Modulo JavaScript
<HEAD>

<title>Ejemplo de JavaScript</title>

</HEAD>

<script LANGUAGE="JavaScript">

<!--

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
Ejercicios realizados en Clase – Modulo JavaScript
{

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:


<script language="Javascript">

function mostrar(nombreCapa){

document.getElementById(nombreCapa).style.visibility="visible";

function ocultar(nombreCapa){

document.getElementById(nombreCapa).style.visibility="hidden";

25
Ejercicios realizados en Clase – Modulo JavaScript
</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;background-
color:red;visibility:hidden">Capa 2</div>

7.5 Cambiar tamaño 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')">Tmaño de capa</a><br>

7.6 Efecto persiana sobre una capa:

Debemos de crear las siguientes funciones en HEAD:

<script language="Javascript">

var temporizadorplegar;

var temporizadordesplegar;

function plegar(){

clearTimeout(temporizadordesplegar);

26
Ejercicios realizados en Clase – Modulo JavaScript
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
Ejercicios realizados en Clase – Modulo JavaScript
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 código y pegarlo en una nueva pagina de Dreamweaver para ver
el resultado:

Código:

<html >

<head>

<script language="javascript" type="text/javascript">

28
Ejercicios realizados en Clase – Modulo JavaScript
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
Ejercicios realizados en Clase – Modulo JavaScript
}

</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 pequeño ejemplo te permitirá construir listas en las que los niveles se pueden abrir
y cerrar a voluntad. Pruébalo y personalízalo para tus necesidades.

a) Código JavaScript
Se trata de un script tan simple que apenas necesita comentarios. La función recibe
como argumentos un identificador (iden), y busca el elemento HTML cuyo ID sea igual
a este valor, para ello usa el método getElementById( ). Una vez encontrado el elemento

30
Ejercicios realizados en Clase – Modulo JavaScript
tan sólo modifica su propiedad display: si está en mostrar (block) lo pone en ocultar
(none) y viceversa.

Quizás lo más interesante de este script sea que usa código standard, es decir destinado
a navegadores que cumplen con los estándares 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 sólo cumple la
regulación DOM1 en un 86%.

<script language="JavaScript">
function cambiaEstado(iden)
{
var elhtml = document.getElementById(iden);
if (elhtml.style.display == 'block')
elhtml.style.display = 'none';
else
elhtml.style.display = 'block';
}
</script>

b) Código HTML
Como vemos en lugar de usar el evento onclick se hace la llamada a la función
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>
<li>apartado 2 de entrada 1</li>
</ul>
</li>
<li><a href="javascript:cambiaEstado('e2')">entrada 2</a>
<ul id="e2" class="nivel1">
<li>apartado 1 de entrada 2</li>
<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
Ejercicios realizados en Clase – Modulo JavaScript
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>

<SCRIPT LANGUAGE="JavaScript">

<!--

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>

<!-- Pon aqui la fecha de creacion de la pagina. -->

February 05, 2002

<BR>

32
Ejercicios realizados en Clase – Modulo JavaScript
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

function getCookieVal (offset) {

var endstr = document.cookie.indexOf (";", offset);

if (endstr == -1)

endstr = document.cookie.length;

return unescape(document.cookie.substring(offset, endstr));

function GetCookie (name) {

var arg = name + "=";

var alen = arg.length;

var clen = document.cookie.length;

var i = 0;

while (i < clen) {

var j = i + alen;

if (document.cookie.substring(i, j) == arg)

return getCookieVal (j);

i = document.cookie.indexOf(" ", i) + 1;

if (i == 0) break;

return null;

function SetCookie (name, value) {

var argv = SetCookie.arguments;

var argc = SetCookie.arguments.length;

33
Ejercicios realizados en Clase – Modulo JavaScript
var expires = (argc > 2) ? argv[2] : null;

var path = (argc > 3) ? argv[3] : null;

var domain = (argc > 4) ? argv[4] : null;

var secure = (argc > 5) ? argv[5] : false;

document.cookie = name + "=" + escape (value) +

((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +

((path == null) ? "" : ("; path=" + path)) +

((domain == null) ? "" : ("; domain=" + domain)) +

((secure == true) ? "; secure" : "");

function DeleteCookie(name) {

var exp = new Date();

FixCookieDate (exp);

exp.setTime (exp.getTime() - 1);

var cval = GetCookie (name);

if (cval != null)

document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();

var cookie_date=new Date(document.lastModified);

var expdate = new Date();

expdate.setTime(expdate.getTime()+(5*24*60*60*1000));

document.write("<Font color=ff8800>" + "Ultima modificación: "+ "</font>"


+document.lastModified);

document.write("");

if (!(cookie_date == GetCookie("cookie_date"))){

34
Ejercicios realizados en Clase – Modulo JavaScript
SetCookie("cookie_date",cookie_date,expdate);

document.write("<font color='yellow'><br>¡La página ha sido modificada desde tu última


visita!</font><br>");

// End -->

</SCRIPT>

</FONT>

</TD></TR>

</TABLE>

</CENTER>

</body></html>

35
Ejercicios realizados en Clase – Modulo JavaScript

También podría gustarte