9. JAVASCRIPT

JavaScript es un lenguaje que sirve para hacer que las páginas sean más atractivas. Si explico como esta todo el rollo de Javascript seria un manual bastante largo. Igual que en el capítulo anterior sólo mostraré algunas funciones que pueden usar.

9.1 Mensaje en Pantalla

Es posible hacer que un botón despliegue el mensaje que tu quieras, solo pon este código que muestro a continuación. Esta función esta dada para hacer botones de ayuda.

<input type="button" value="Presiona" onClick="alert('MundoPaul.CoM')">

Se vería como:

9.2 Enlaces

Otra forma de ocupar botones para hacer enlaces, sin necesidad de ocupar form, es:

<input type="button" value="MundoPaul.CoM" onClick="document.location='
https://www.mundopaul.com'">

Se vería como:

9.3 Texto en Barra de Estado

Puedes hacer que al pasar el cursor por un enlace o imágen aparezca un mensaje en la barra de estado del navegador. Y cuando el cursor deje dicho enlace se muestre otro mensaje ó se borre.

<a href="https://www.mundopaul.com" target="_blank"
onMouseOver="window.status='mensaje inicial'; return true"
OnMouseOut="window.status='mensaje final'; return true">MundoPaul.CoM</a>

<a href="https://www.mundopaul.com" target="_blank"
onMouseOver="window.status='mensaje sobre el link'; return true"
OnMouseOut="window.status='mensaje fuera del link'; return true">MundoPaul.CoM</a>

<a href="https://www.mundopaul.com" target="_blank"
onMouseOver="window.status='Todo borrado'; return true"
OnMouseOut="window.status=''; return true">MundoPaul.CoM</a>

Para poder apreciar sin problemas este ejemplo, debes poner el código en bloc de notas y guardarlo como página web, puesto que como te darás cuenta ya existe un mensaje intermitente en la barra de estado.

9.4 El Tag <script>

Ahora otros ejemplos un poco más elaborados, para ello se usará el tag <script>...</script>, este tag va en la cabeza de la página, es decir se debe poner entre el tag <head>...</head>, y la forma en que se usa es la siguiente:

</title>
<script language="javascript">
<!--
funcion (parámetros) {
acción;
}
//-->
</script>
</head>

La función la cambiarás de acuerdo a tus necesidades, también puedes poner más de una función, mientras tengan distintos nombres. Esta función se puede ejecutar de la siguiente forma:

onClick="función(parámetros)"

9.5 Abriendo una nueva ventana

Creo que ahora quedará más claro lo explicado anteriormente. Puedes hacer que un enlace se abra en una nueva ventana del tamaño que quieras. Se debe poner lo siguiente en la cabeza de la página.

</title>
<script language="javascript">
<!--
function abrir_ventana(theURL,winName,features) {
window.open(theURL,winName,features);
}
//-->
</script>
</head>

Luego el enlace se hace de la siguiente manera:

<body>
<a href="#" onClick="abrir_ventana('prueba.html','','width=500,height=200,scrollbars=no,
toolbar=no')">Prueba</a>
</body>

Se pone href="#" para hacer un enlace nulo, es decir que no vaya a algún lado. En prueba.html puede ir el nombre de cualquier página web o url. Width=500 y height=200 indican el tamaño, en pixeles, de la nueva ventana. Scrollbars=yes/no indica si la nueva ventana tendrá barra de desplazamiento (en caso de que la página no quepa en la ventana) y toolbar=yes/no indica si la nueva ventana tendrá la barra de tareas. Todo esto en una página tiene el siguiente efecto:

Prueba

9.6 Cerrando una ventana

Así como puedes abrir una nueva ventana, también se puede hacer un botón para que la cierre. Se puede hacer de las dos formas siguientes

<input type="button" value="Cerrar" OnClick="parent.window.close()">
<a href="#" OnClick="parent.window.close()">cerrar esta ventana</a>

Ambos se verían:

Revisa este ejemplo para que te quede más claro

9.7 Cambio de Imágenes

Esta función hace que una imagen cambie al momento de pasar el cursor por encima de ella. Esta función es muy ocupada en los índices. Para el ejemplo de esta función se necesitaron 4 imágenes, ya que en el ejemplo hay 2 imágenes que cambian. Las imágenes son las siguientes:


links.gif
links2.gif

mail.gif
mail2.gif

En la cabeza va lo siguiente:

<script language="javascript">
<!--
links= new Image();
links.src="links.gif";
linksOn= new Image();
linksOn.src="links2.gif";

mail= new Image();
mail.src="mail.gif";
mailOn= new Image();
mailOn.src="mail2.gif";

function overImg(imgName) {
imgOn= eval(imgName + "On.src");
document [imgName].src= imgOn;
}

function offImg(imgName) {
imgOff= eval(imgName + ".src");
document [imgName].src= imgOff;
}
//-->
</script>

Ahora pon una imágen como link y la otra para mandar un mail, por citar un ejemplo, aunque también podría estar la imagen sin alguna otra acción. Además le haz agregado la función de la sección 9.3

<a href="links.html" target="_blank"
OnMouseOver="overImg('links');window.status='Links a todas partes';return true"
OnMouseOut="offImg('links');window.status='';return true">
<img src="links.gif" NAME="links" border=0></a>
<br>
<a href="mailto:[email protected]"
OnMouseOver="overImg('mail');window.status='Sugerencias a [email protected]';return true" OnMouseOut="offImg('mail');window.status='';return true">
<img src="mail.gif" name="mail" border=0></a>

Lo que finalmente se vería es:


Puedes poner todas las imágenes que quieras, pero para cada imagen que va a usar esta función tienes que poner lo siguiente:

mail = new Image();
mail.src = "imagen1";
mailOn = new Image();
mailOn.src = "imagen2";

9.8 Abrir varios frames con un solo link.

En el capítulo de frames viste que para que un enlace se abriera en algún frame debían agregar target="nombre_del_frame" en el tag <a> del enlace. Pero esto sólo sirve para que un frame se vea afectado por el enlace. Ahora si quieres que 2 o más frames se vean afectados por un mismo enlace usa la siguiente función de javascript:

<script language="javascript">
<!--
function fnUpdate() {
top.nframe1.location="pagina1.html";
top.nframe2.location="pagina2.html";
top.nframe3.location="pagina3.html";
}
//-->
</script>

En este caso se quiere que la pagina1.html se abra en el frame llamado nframe1 y sucesivamente. Ahora el enlace se escribe:

<a href="pagina1.html" target="nframe1" onClick="fnUpdate()">texto enlace</a>

Esto hace que las 3 páginas se abran en los respectivos frames.

Espero que esta subsección quede más claro en este: Ejemplo

En general todo lo visto en este capítulo puede ser de utilidad aunque no es necesario dominarlo en su totalidad, ya que esto es de "html avanzado".