codigos javascript 3
Maximizar una ventana
| El problema |
| Ningún diseñador o webmaster puede saber con certeza con que tamaño se abrirá su página web en el explorador del visitante a su página web. La mayoría de los casos se abrirá a tamaño máximo, pero no siempre y eso puede estropear nuestro diseño y mostrar nuestra página algo desfavorecida |
| La solución |
|
Para todo hay solución, en este caso vasta los métodos moveTo() y resizeTo del objeto window. Con el primero colocamos la ventana en la esqueina superior izquierda de la pantalla y con la segunda la ponemos al tamaño de dado por la resolución del monitor.
<script language="JavaScript">
window.moveTo(0,0);
window.resizeTo(screen.width,screen.height);
</script>
|
| Un caso práctico |
|
Ver como funciona este script puede no ser demasiado fácil, así que haremos un pequeño ajuste. Escribe el script en la cabecera de tu página pero dentro de una función:
<script language="JavaScript">
function maximizar(){
window.moveTo(0,0);
window.resizeTo(screen.width,screen.height);
}
</script><
Y en la página pones este enlace
<a href="javascript:maximizar()">Maximizar</a>
Ahora abres tu página con el navegador, reduce el tamaño de la ventana y pulsa sobre el enlace, verás como la ventana se maximiza.
|
Un sólo cambio para modificar múltiples páginas.
| El problema |
| En muchas ocasiones queremos realizar un determinado cambio en nuestra web que afecta a un gran número de páginas, una tarea que puede resultar bastante ardua si no contamos con herramientas adecuadas. Y aún contando con estas herramientas tras hacer los cambios debemos volcar todas las páginas modificadas a nuestro servidor. Un ejemplo típico se produce cuando queremos modificar una barra de navegación, barra que se muestra en todas las páginas de nuestra web: cuando queremos agregar una nueva opción nos encontramos con la necesidad de modificar un gran número de páginas |
| La solución |
| Podemos ahorrarnos trabajo de una forma muy simple: utilizar un archivo javascript enlazado en todas las páginas, este archivo contendrá el código para generar esa parte de nuestra página que podemos necesitar modificar en alguna ocasión. De esta forma para realizar un cambio en nuestras páginas bastará modificar el archivo javascript y sólo será necesario volcar este archivo modificado al servidor. En el ejemplo citado arriba el archivo enlazado contendría una función que generase la barra de navegación. |
| Un caso práctico |
|
Como aplicación práctica seguimos con el ejemplo de la barra de navegación. En nuestro archivo js, al que llamaremos barranavegacion.js, colocamos un código que genere la barra de navegación, construida para este ejemplo mediante una sencilla tabla con cinco opciones
function dibujaBarra( )
{
document.write("<table><tr><td>opción1</td>");
document.write("<td>opción2</td>");
document.write("<td>opción3</td>");
document.write("<td>opción4</td>");
document.write("<td>opción5</td></tr></table>");
}
Dentro de nuestras páginas colocamos un elemento <script> que llame a esta función en el lugar de la sección body donde queremos que aparezca la barra de navegación:
<script language="Javascript">
dibujaBarra( )
</script>
Por supuesto en la sección HEAD de la página habremos colocado el script enlazado a nuestro archivo conteniendo la función dibujaBarra()
<script language="Javascript" src ="/barranavegacion.js"></script>
Es conveniente que para el argumento src utilices una dirección absoluta, para que sea accesible desde todas las páginas. En este ejemplo la barra invertida indica el directorio raiz del sitio web.
|
Sonidos en tus páginas.
| El problema |
| Aderezar las páginas web con música de fondo no es nada nuevo, basta una etiqueta BGSOUND para lograrlo, pero lo que no muchos saben es que ese elemento es manipulable con Javascript , algo que nos permite hacer cosas como crear sonidos que suenen al pulsar un enlace o permitir al usuario que suene una pieza musical u otra, etc. |
| La solución |
|
Como parte de la página web el elemento BGSOUND es accesible desde un script como un objeto perteneciente a la colección all del objeto document, para lo cual el elemento BGSOUND debe poseer un atributo ID. Este objeto posee la propiedad SRC que identifica el origen del archivo de sonido que debe sonar como fondo de la página. Tal propiedad puede ser modificada de forma dinámica mediante Javascript sin más que asignarle el valor que queramos:
document.all.sonido.src = "mimusica.wav"
|
| Un caso práctico |
|
En este ejemplo usamos un elmento BGSOUND que sonará al pulsar sobre un enlace:
<HEAD>
<BGSOUND ID="sonido" src=""></BGSOUND>
</HEAD>
<BODY>
<A HREF="nuevapagina.htm" onclick = "document.all.sonido.src='sonidoclick.wav'>Enlace</a>
Como vemos usamos una etiqueta de cierre para BGSOUND, esto no es imprescindible pero Netscape puede dar problemas si no se coloca. Por supuesto las enormes limitaciones de Netscape hacen que este este script no funcione con ese explorador.
|
evita que importen tu web
| El problema |
| Has empleado un buen número de horas en realizar esa web de la que estás tan orgulloso, sobre todo te encanta haberla construido con material original. Y ¡oh sorpresa! por ahí hay otra web idéntica a la tuya. ¿Como lo hicieron? colocando un frame direccionado a tu sitio, de esta manera en la barra de direcciones del explorador se ve la dirección de la web de ese chupóptero y la página parece ser suya. ¿Como evitarlo? |
| La solución |
|
Esto, por desgracia, suele ocurrir y hay quien lo hace sin siquiera consultar al autor de las webs. Pero Javascript puede ayudarnos a prevenir esta técnica, basta con comprobar que nuestra página no se encuentra dentro de un frame utilizando el objeto location. Básicamente comprobamos que no existe una ventana por encima de la que muestra nuestra página y si existe redireccionamos el explorador a nuestro sitio:
if (top.location != window.location)
top.location = window.location;
Así de sencillo, y basta con colocar el código en la portada del sitio, pues lo habitual es que los visitantes se muevan desde la portada. Pero si quieres asegurarte puedes colocarla en más páginas.
|
Password por redireccionamiento
| El problema |
| Si queremos restringir el acceso a nuestro sitio en la red, de forma que sea necesario un nombre de usuario y su correspondiente password, lo habitual y seguro es usar programas de servidor escritos en Perl, PHP o un lenguaje similar. El problema es que no todos los servidores permiten estos programas. Sin embargo Javascript nos puede echar una mano. |
| La solución |
| Si bien el control de acceso mediante scripts de cliente no es 100% seguro, en muchas ocasiones es nuestra única posibilidad. Un método muy rudimentario, pero muy seguro y sencillo de implementar es utilizar como password del usuario el nombre de un página en nuestro sitio. Es decir cuando el visitante introduce su password el navegador se dirige a una página cuya dirección depende de esa password. Para cada usuario autorizado existirá una página cuya dirección vendrá dada por la password del usuario. Por ejemplo si el password del cliente es 1234jk9 al teclear este valor el navegador se dirige a la página 1234jk9.htm. Si el clilente introduce una password no válida la página no existirá y el navegador le devolverá la página de error por dirección no encontrada. |
| Un caso práctico |
|
Consturir un script para aplicar este truco es de lo más simple, basta un formulario y la correspondiente instrucción para el botón enviar:
<form action="" method="post" name="entrada" >
Teclee su password <input type="text" name="clave">
<input name="entrar" type="button" id="entrar" value="Entrar" onClick="location.href=this.form.clave.value+'.htm'">
</form>
Esta es la forma más simple de aplicar este truco. Evidentemente deberás tener preparada la página de entrada para cada usuario, página cuya url será igual al password de entrada con la extensión htm, como es lógico. En este ejemplo no se usa nombre de usuario, pero podrías hacerlo, en cuyo caso debería usar este valor para construir la url nombre de la página.
<form action="" method="post" name="entrada" >
Teclee su NOMBRE <input type="text" name="nombre">
Teclee su password <input type="text" name="clave">
<input name="entrar" type="button" id="entrar" value="Entrar" onClick="location.href=this.form.nombre.value+'/'+this.form.clave.value+'.htm'">
</form>
En este otro caso la urla de la página de entrada está en la carpeta cuyo nombre es el nombre del usuario. Así si quieres dar acceso al usuario juan con el password erty21, su página de entrada tendrá como dirección o URL juan/erty21.htm
Por último ten en cuenta que en muchos servidores las mayúsculas y minúsculas en los nombres de URL son equivalentes, por lo que este método no debe diferenciar entre ellas.
|
 |
|
|
