Manuales de JavaScript
Anuncio
John Valois Accostupa Quispe ISC - UNSAAC
Manuales de JavaScript
1
John Valois Accostupa Quispe ISC - UNSAAC
Hola a todos nuevamente, como se q a la mayoría no le da mucho entusiasmo el abrir la
carpeta con ejemplos de AJAX y JAVA SCRIPT, entonces decidi hacerles unas capturas y
copiarlas en un solo documento fácil de leer. Por esa razón aquí les traigo algunos códigos que
estaban en la carpeta que nos paso el profe Hugo, y hay 3 más que buscando por ahí los
encontré.
Los Codigos son fáciles de entender y de usar:
REDIRECCIONAR UNA PAGINA:
Sirve para que al entrar en una pagina web, te lleve a otra sin que el usuario tenga que pinchar
en ningun sitio. Aqui se explican tres posibles formas de lograrlo. Hay que sustituir
redireccion.html por la pagina a la que quieras que se redirija. Tambien puedes usar URLs:
Redireccionar una pagina
1- Codigo (ubicarlo entre las etiquetas <head> y </head> ):
<head>
<script languaje="JavaScript">
location.href='redireccion.html';
</script>
</head>
2 - Otro metodo puede ser agregando la accion OnLoad dentro del Body:
<BODY onLoad = "parent.location = 'redireccion.html'">
3 - Tambien podemos redireccionar la pagina a los X segundos (en esto caso 15):
<META HTTP-EQUIV="Refresh" CONTENT="15;URL=redireccion.html">
Recuerden qu deben cambiar “redirección.html” por cosas como MantenimientoSOTEC.aspx ó
por RegistrarBien.aspx, etc eso dependerá de uds. Básicamente es un copiar-pegar
SCROLL DE TEXTO
Resulta parecido al crol q aparece en las paginas que dicen “comentario”, su tamaño se expande y se
ajusta según lo escribes, y se puede además adicionar la propiedad que revise la orografía y el tipo de
texto (pero hay q agregarle unos códigos mas)
Scroll de texto
Codigo (ubicarlo donde queramos que aparezca):
<script language="JavaScript1.2">
var marqueewidth=130
var marqueeheight=60
var speed=1
var marqueecontents='<p align="center"> <strong> <font color="#FF0000"> Bienvenido a
gratiszona.com </font> </strong> <br> <br> Esto es un ejemplo de como realizar un scroll de
texto en el que podemos incorporar nuestras noticias sobre la web. </p>'
if (document.all)
document.write('<marquee direction="up" scrollAmount='+speed+'
2
John Valois Accostupa Quispe ISC - UNSAAC
style=width:'+marqueewidth+';height:'+marqueeheight+'> '+marqueecontents+ '</marquee>')
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
setTimeout("window.onresize=regenerate",450)
intializemarquee()
}
}
function intializemarquee(){
document.cmarquee01.document.cmarquee02.document.write(marqueecontents)
document.cmarquee01.document.cmarquee02.document.close()
thelength= document.cmarquee01.document.cmarquee02.document.height
scrollit()
}
function scrollit(){
if (document.cmarquee01.document.cmarquee02.top>=thelength*(-1)){
document.cmarquee01.document.cmarquee02.top-=speed
setTimeout("scrollit()",100)
}
else{
document.cmarquee01.document.cmarquee02.top=marqueeheight
scrollit()
}
}
window.onload=regenerate2
</script>
BANNERS ALEATORIOS QUE VAN CAMBIANDO CADA CIERTO PERIODO
Recuerdan que con el profe Xavier cuando se hacia Dream Weaver, y que para insertar una
imagen solo era cuestión de arastrar el componente o animación GIF, ubicarlo en la posición y
soltar, con eso era suficiente.
Weno con JavaScript no es tan fácil hay que tener en cuenta donde están nuestros banners y
especificar la carpeta donde están, si usamos Carpetas “Privado”, como lo que nos esta
pidiendo (para el login de Docente y responsable), les aconsejo que todas las carpetas
adicionales que estén en su proyecto principal, vale decir CSS, js, incluso el bin (los copien a
estas sub-carpetas) sino no funcionara (Agradecimientos al Ing Miguel Angel, quien me dio la
ayuda para averiguar esto )
Banners aleatorios cada x tiempo
1º Colocamos el siguiente codigo entre las etiquetas <head> y </head>:
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var mfBanners = [
['http://www.direccion1.com', 'imagen1.gif'],
['http://www.direccion2.com', 'imagen2.gif']
];
var mfIe = false;
if( document.all) {
mfIe = true;
}
var mfBannerIndex = 0;
function mfBannerChange() {
3
John Valois Accostupa Quispe ISC - UNSAAC
var htmlString = '<a target="_blank" href="'+mfBanners[mfBannerIndex][0]+'"> <img border="0"
src="'+mfBanners[mfBannerIndex][1]+'"></a>';
if( mfIe) {
document.all.banner.innerHTML = htmlString;
}
else {
document.layers["banner"].document.open();
document.layers["banner"].document.write( htmlString);
document.layers["banner"].document.close();
}
if(mfBannerIndex < mfBanners.length - 1)
mfBannerIndex++;
else
mfBannerIndex = 0;
}
setInterval("mfBannerChange()", 5000);
// End -->
</script>
2º Ubicar el siguiente codigo donde queramos que aparezcan los banners:
<div id="banner"></div>
CREAR UN POP-UP
Este Formulario es auspiciado por “Adriana Yabar”, gracias por la idea ¡!!! La verdad es que el
mantenimiento de los formularios tenían una presentación muy cvr. Weno aquí les muestro
como podemos hacer lo mismo pero desde Ayax, lo único malo es que la presentación es
estándar!!. Pero es código mas ligero
Con este ejemplo vamos a crear un pop-up en nuestro sitio. Podemos hacerlo de dos formas:
que se abra en forma automatica al iniciar la pagina, o simplemente a traves de un enlace.
Cuando hacemos el enlace (<a href...) llamamos a la funcion que hayamos creado
anteriormente y entre parentesis ponemos la pagina html que se abrira dentro de ese pop-up.
Si queremos crear mas pop-ups con el mismo tamaño, basta con indicar en el enlace la misma
funcion y otra pagina. Si queremos abrir otro pop-up de otro tamaño, creamos otra funcion con
sus caracteristics y luego en el enlace llamamos a esa funcion.
Crear un pop-up
1º Abrir un pop-up a traves de un enlace:
Colocar el siguiente codigo entre las etiquetas <head> y </head>:
<script language="JavaScript">
function Abrir_ventana (pagina) {
var opciones="toolbar=no,location=no, directories=no, status=no, menubar=no, scrollbars=no,
resizable=yes, width=508, height=365, top=85, left=140";
window.open(pagina,"",opciones);
}
</script>
Ubicar el siguiente codigo donde queramos que aparezca el enlace para abrir el pop-up
<a href="javascript:Abrir_ventana('popup.html')">Click aqui para abrir la ventana</a>
2º Abrir un pop-up automaticamente al cargar una pagina:
Colocar el siguiente codigo entre las etiquetas <head> y </head>:
<script language="JavaScript">
4
John Valois Accostupa Quispe ISC - UNSAAC
function Abrir_ventana (pagina) {
var opciones="toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no,
resizable=yes, width=508, height=365, top=85, left=140";
window.open(pagina,"",opciones);
}
</script>
Incluir el siguiente codigo en la etiqueta <body> de forma que quedara asi:
<body onload="Abrir_ventana('popup.html')">
ENLACE PARA AGREGAR A FAVORITOS
Este código le ayudar como explico mas abajo a que tu pagina actual (la Web q están
disenhando se agregue a la FAVORITOS dentro de tu explorador, dependiendo de cual
navegador estes usando (…por ahora solo en internet explorer), para Mozzila y Crhome es
diferente, esto debido a su nucleo de navegación “investigare sobre este tema mas adelante”.)
Enlace para añadir a Favoritos
Este codigo te permite crear un link para que al pinchar agreguen tu web a Favoritos. Cambia
solamente los datos que aparecen en negrita.
Codigo:
<a href="javascript:window.external.AddFavorite('http://www.tuweb.com','Titulo del
sitio');">Agregar a favoritos</a>
Ademas tambien podemos hacer que cuando nos añadan a favoritos, apareza un icono delante
de la descripcion. Prueba a añadir a Favoritos esta web y compruebalo. Para que aparezca un
icono, lo primero de todo que tenemos que hacer es crearlo. El icono debe ser de 16x16 pixels
y para ello podemos utilizar un programa, como por ejemplo, Microangelo. Una vez lo hayamos
creado ubicamos el siguiente codigo entre las etiquetas <head> y </head> indicando la URL
donde se encuentre el icono:
<LINK REL="SHORTCUT ICON" HREF="http://www.tuweb/favicon.ico">
ESTABLECER TU PAGINA DE INICIO
Como ya algunso pensarán, :”de que me sirve esto si lo puedo hacer en el web config” .. pero
he ahí el detalle … esto les puede servir para el direccionamiento de paginas después del login
(y asi evitarnos problemas cuando usemos el IIS, jejeje es una solución con trampa, pero
funciona).
Establecer pagina de inicio
Codigo:
<a href="http://www.paginadestino.com" class="chlnk"
onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.tuweb.com
');"
style=cursor:hand>Pagina de inicio</a>
5
John Valois Accostupa Quispe ISC - UNSAAC
MSJ BARRA DE ESTADO
Cuando apuntas con e cursor sobre un link, éste t mostrará su barra de estado
Mensaje en la barra de estado
Codigo:
<a href="http://www.gratiszona.com" onmouseout="window.status=''"
onmouseover="window.status='gratiszona.com - El directorio con los mejores recursos';return
true ">Visitar gratiszona.com</a>
IMPRIMIR PAGINA
Recuerdan, si alguna vez lo han robado, cuando quieren imprimir una pagina, es todo un caos
… (A veces imprimi en horizontal, en vertical, a veces se come los encabezados, y además
debes decidir sobre si quieres imprimir todo o solo lo seleccionado.) Weno con este código
pueden imprimir la pagina actual (como documento).
Imprimir una pagina
Codigo:
<a href="javascript:print()">Imprimir</a>
BOTONES ATRÁS ADELANTE
Funciona mejor mejor que el estilo Social que nos dio el profe, pero la verdad la presentación
(prefiero el estilos, aunque sea mas lenta), aunque la gran ventaja es que recuerda los datos
de tu navegación (algo muy útil cuando hagamos los procesos de prestamos reservas de
bienes).
Botones Atras y Adelante
Codigo:
Atras: <a href="javascript:history.go(-1)">Atras</a>
Adelante: <a href="javascript:history.go(1)">Adelante</a>
ENLACE PARA AGREGAR A FAVORITOS
Este codigo te permite crear un link para que al pinchar agreguen tu web a Favoritos.
Enlace para añadir a Favoritos
Codigo:
<a href="javascript:window.external.AddFavorite('http://www.tuweb.com','Titulo del
6
John Valois Accostupa Quispe ISC - UNSAAC
sitio');">Agregar a favoritos</a>
Ademas tambien podemos hacer que cuando nos añadan a favoritos, apareza un icono delante
de la descripcion. Prueba a añadir a Favoritos esta web y compruebalo. Para que aparezca un
icono, lo primero de todo que tenemos que hacer es crearlo. El icono debe ser de 16x16 pixels
y para ello podemos utilizar un programa, como por ejemplo, Microangelo. Una vez lo hayamos
creado ubicamos el siguiente codigo entre las etiquetas <head> y </head> indicando la URL
donde se encuentre el icono:
<LINK REL="SHORTCUT ICON" HREF="http://www.tuweb/favicon.ico">
ENLACE PARA AGREGAR PAGINA DE INICIO
Permite añadir tu sitio como pagina de inicio, para que asi cada vez que abra el navegador
entren en tu web. Una vez añadida, se redirigira el cliente a http://www.paginadestino.com.
Establecer pagina de inicio
Codigo:
<a href="http://www.paginadestino.com" class="chlnk"
onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.tuweb.com
');"
style=cursor:hand>Pagina de inicio</a>
MENSAJE EN LA BARRA DE ESTADO
Muestra un texto en la barra de estado al ponerse sobre un link.
Mensaje en la barra de estado
Codigo:
<a href="http://www.gratiszona.com" onmouseout="window.status=''"
onmouseover="window.status='gratiszona.com - El directorio con los mejores recursos';return
true ">Visitar gratiszona.com</a>
Recuerden en compartir este link
(Para cualquier consulta de JS me pueden preguntar con total confianza, si la consulta es de
ASP.Net mejor pregúntele a Elvis. jajajaja)
7
