Practicas Clase JavaScript

7/25/2019 Practicas Clase JavaScript

1/35

EJERCICIOS CLASE

CURSO DISEO WEB Y MULTIMEDIAPROFESOR: RAUL RENALES AGERO


2/35


3/35

Ejercicios realizados en Clase Modulo JavaScript3

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 laspaginas de nuestro sitio.

Usted debe aprender con este ejemplo a capturar los datos de los componentes deformulario, trabajar con condiciones IF/ELSE, crear una funcion y utilizar un eventoen un boton para lanzar funciones.

Codigo:

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

Usuario:
Contrasea:


4/35


1.2 CONTRASEA CAMBIO DE PAGINA

El objetivo de este ejemplo es crear un acceso que pregunte una clave y utilize lapalabra de la clave para enviar a una pagina u otra del sitio. Deberemos crear esapagina extra.

Usted debe aprender con este ejemplo a capturar los datos de los componentes deformulario, trabajar con condiciones IF/ELSE, crear una funcion y utilizar un eventoen un boton para lanzar funciones.

Codigo:

Acceso con passwordfunction Saltar(pal){window.location=pal+".htm"}

Introduce la palabra clave para acceder a la pagina

1.3 CONTRASEA CON TECLADO VIRTUAL


5/35


En este ejemplo utilizaremos un Teclado virtual para introducirlos datos, realizaremos unejemplo simple de funcionamiento y luego lo complicaremos con varios cambios paramejorar 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 lacontrasea.

Codigo:

Acceso con password

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


6/35


1.4 CREAR CLAVES ALEATORIA

Crear claves aleatorias es muy importante para poder protejer de una manera razonablenuestras paginas o contenidos, para ello vamos a realizar un pequeo ejemplo de uncreador de contraseas RAMDOM.

Codigo:

Clave Aleatoria

var caracter="1234567890";caracter+="QWERTYUIOPASDFGHJKLZXCVBNM";caracter+="qwertyuioplkjhgfdsazxcvbnm";var numero_caracteres=8;

var total=caracter.length;function azar(){var clave="";for(a=0;a


7/35


Clave.-

1.5. COMPROBAR LA FORTALEZA DE UNA CLAVE

Mediante este Script seremos capaces de informar al usuario de la fortaleza de unacontrasea, lo usado para informar si la contrasea es buena o mala es una escala de trescolores, verde para una buena contrasea, amarillo para una contrasea normal, rojo para

una contrasea mala.

Codigo:

Fortaleza de Contrasea

pw_min = 5; // Caracteres minimos de la contraseapw_max = 20; // Caracteres maximos de la contrasea

pw_invalid = 'red'; // Contrasea no valida = color rojopw_insecure = 'yellow'; // Contrasea no insegura = color amarillopw_secure = 'green'; // Contrasea valida = color verdepw_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() {


8/35


pw_focus = this;}inputs[i].onblur = function() {

delete pw_focus;}

}}

}

1.6 PASSWORD 2

Una sencilla forma de acceder a una pgina, mediante un password o contrasea, empleando

para ello JavaScript.

a) Cdigo JavaScriptLa 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 porsupuesto de la extensin htm o html. Cuando un usuario accede deber conocer elnombre de la pgina si no recibir un mensaje de pgina no encontrada emitido por elnavegador. Al acceder a la pgina clave el navegador se redirecciona a la pgina dondetu quieras que llegue.

function password(texto){if (texto!="")

location.href= texto+".htm";}//sentencia para redireccionarlocation.replace("paginabase.htm")

b) Cdigo HTMLLa 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 atu pgina principal. Si el usuario escribe otra clave, por ejemplo er456, el navegador


9/35


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:

Teclea tu password:

Pgina clave:location.replace("mipaginappal.htm");

2. EDITORES DE TEXTO


10/35


2.1 TINYMCE: EDITOR WYSIWYG

En determinadas ocasiones necesitamos ofrecer a nuestros usuarios una mayor libertad ala hora de introducir grandes cantidades de texto, para estos casos los editores de TextoWYSIWYG son los mas indicados. Su uso es tan sencillo como instalar una pequea libreriae 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 paratrabajar con otros frameworks.

Codigo:

Documento sin ttulo

tinyMCE.init({mode : "textareas", // uso en areas de textotheme : "advanced" //tipo de editor a usar});


11/35


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:

Calculo de la letra del D.N.I.


12/35


if (ch == digitos.charAt(j))break;if (j == digitos.length){

alert("Escriba nicamente dgitos 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;}// -->Calculo del NIF

Introduciendo el DNI calcula la letra del NIF


13/35


DNI

Letra

Fecha de Creacion: 15/6/97

Ultima Revision: 31/8/97

Autor: Overdrive
Volver
4. RELOJES Y FECHAS

4.1 RELOJ SENCILLO

Mediante este ejemplo crearemos un reloj para ser visualizado en una caja de texto.


14/35


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

Codigo:

Mi primer reloj en JAVA


15/35


Mediante el siguiente ejemplo veremos como utilizar uno de los miles de calendarios quepodemos encontrar en internet. La mayora de ellos se utilizan en sitios donde tenemos queelegir 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 (unacarpeta) dentro de la raiz (/) de nuestro sitio. Tras esta operacin abriremos una paginanueva en DW y realizaremos los siguientes cambios:

Calendario de pruebas


16/35


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

});


17/35


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, conlo que ganara mas en aspecto.

Codigo:

Enviar

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

Codigo:

Seleccionar

Abre una ventanaMensaje en la barraCalendariocierra una ventanaRuta del archivo actualRelojMensaje que rebotaFecha y horaValida contenidoValida y envia contenidoCambia el grafico del enlace

5.2 FUNCIONES PARA VALIDAR CAMPOS DE TEXTO

En este ejercicio resumiremos algunas funciones sencillas para validar campos de texto paradiferentes 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;


18/35


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 queposee 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 estecdigo:

document.writeln('
La resolucion es: ' + screen.width + " x " + screen.height);document.writeln('
La resolucin para el diseo es: ' + screen.availWidth + " x " + screen.availHeight);

document.writeln('
La paleta de colores es: ' + screen.colorDepth);

document.writeln('
La tasa de refresco es: ' + screen.updateInterval);

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

if (screen.width


19/35


document.location = "mediana.htm";

else

document.location = "grande.htm";

6.2 EL OBJETO NAVIGATOR:

Mediante el siguiente ejemplo repasaremos las propiedades mas importantes del objeto navigator, dela misma manera que en el ejercicio anterior, podremos tomar decisiones en el caso quenecesitemos diferenciar entre un tipo de navegador u otro.

Codigo:

6.3 EL OBJETO WINDOW. ABRIR UNA VENTANA.

Mediante este ejemplo aprenderemos a abrir una nueva ventana emergente. Para ello usaremos elmtodo 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:

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


20/35


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

}

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 suspropiedades de tal manera que seremos capaces de mover la ventana. Tambien aprender a utilizar

la funcin de ejecucin temporal setTimeout().

Codigo:

Ejemplo de JavaScript


21/35


6.5 IMPRIMIR DESDE UN BOTON O UNA IMAGEN

Mediante el siguiente script aprenderemos a imprimir la pagina web desde algun boton o imagen queincluiremos 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 protegernuestro codigo para que otros usuarios no lo vean, tan solo es necesario colocar el siguiente miniscript en BODY:

document.oncontextmenu = function(){return false}

7. EL OBJETO DOCUMENT

7.1 IMGENES ALEATORIAS

Mediante el siguiente ejemplo veremos como cargar imgenes aleatorias en nuestra pgina:

Codigo:

imagen = new Array; // Poner aqui las imagenes que quiero rotarimagen[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)];


22/35


document.write(src);document.write ("");

7.2 GALERIA DE IMGENES (FRAMEWORK LIGHTBOX)

LIGHTBOX:

Mediante este ejemplo aprenderemos a utilizar Lightbox un pequeo framework que nos ayudara arealizar 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 () los siguientes vnculos:

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

funcionar el Framework:

image

#1

Importante: usar title como titulo de la imagen.

FACEBOX:

Este es otro ejemplo de como usar otro framework para mostrar imagenes y popups integrados. Eneste 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.


23/35


jQuery(document).ready(function($) {

$('a[rel*=facebox]').facebox({

loading_image : 'loading.gif',

close_image : 'closelabel.gif'

})

})

BODY:texto para dentro de la ventana

Texto para dentro de la ventana

7.3 Propiedades de Imagenes

Mediante este ejemplo vamos a aprender a utilizar las propiedades del objeto imagen.

Codigo:


24/35


Ejemplo de JavaScript


25/35


{

imagen1.height=imagen1.height/2;

}

//-->

Doble ancho

Doble Alto

Mitad ancho

Mitad Alto

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

}


26/35


Capas en la parte de Body:

Capa 1

Capa 2

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:

Tmao de capa

7.6 Efecto persiana sobre una capa:

Debemos de crear las siguientes funciones en HEAD:

var temporizadorplegar;

var temporizadordesplegar;

function plegar(){

clearTimeout(temporizadordesplegar);


27/35


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


28/35


clearTimeout(temporizadordesplegar);

}

}

Debemos crear los botones y la capa en BODY:

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


29/35


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= maxPuntos) {

numeroPuntos = 0;

}

document.getElementById("cargando").innerHTML = textoCargando + puntos;

if (!cargado) {

timerID = setTimeout("fTimer()", 500);


30/35


}

}

#cargando {

padding-left:2px; padding-right:2px; background-color:#CC0000; color:#FFFFFF;

font-weight:bold;

right:3px; top:3px; position:fixed;

}

Cargando

timerID = setTimeout("fTimer()", 500);

7.8 ESQUEMA DESPLEGABLE (ie)

Este pequeo ejemplo te permitir construir listas en las que los niveles se pueden abriry 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 recibecomo argumentos un identificador (iden), y busca el elemento HTML cuyo ID sea iguala este valor, para ello usa el mtodo getElementById( ). Una vez encontrado el elemento


31/35


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 destinadoa navegadores que cumplen con los estndares de la W3C, que en lo que afecta alDHTML 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 laregulacin DOM1 en un 86%.

function cambiaEstado(iden){var elhtml = document.getElementById(iden);if (elhtml.style.display == 'block')elhtml.style.display = 'none';elseelhtml.style.display = 'block';}

b) Cdigo HTMLComo vemos en lugar de usar el evento onclick se hace la llamada a la funcincambiaEstado( ) directamente en el enlace. El argumento de la llamada es el ID delbloque UL de la lista. Simple.

entrada 1

apartado 1 de entrada 1apartado 2 de entrada 1entrada 2apartado 1 de entrada 2apartado 2 de entrada 2

8. COOKIES

8.1 NOTIFICADOR DE ULTIMA MODIFICACION:

En este ejemplo vamos a ver como usando cookies podemos informar al usuario la fecha de ultimaactualizacion del documento, ademas se le advierte si la pagina fue modificada desde la ultima vezque el usuario visito la pagina web.

Para realizar este ejemplo necesitamos utilizar cookies con el objetivo de saber cuando visito la webel usuario por ultima vez.


32/35


Codigo:

Realizada el

February 05, 2002


33/35



34/35


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("" + "Ultima modificacin: "+ ""

+document.lastModified);

document.write("");

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


35/35

SetCookie("cookie_date",cookie_date,expdate);

document.write("
La pgina ha sido modificada desde tu ltima

visita!
");

}

// End -->

Practicas Clase JavaScript

Documents

Transcript of Practicas Clase JavaScript