JAVASCRIPT
Introducción a JavaScript
Parte 6




Veamos el problema de cómo dos páginas pueden ser cargadas con un solo click del mouse. Básicamente hay tres soluciones diferentes a este problema: la primera posibilidad es crear un botón el cual invoca una función cuando el usuario lo presiona. Esta función carga dos páginas dentro de diferentes frames o abre nuevas ventanas. ESto no es muy difícil si usted observa los ejemplos en otras partes de esta introducción. Tenemos todos los elementos que en realidad necesitamos.

Creamos tres frames. El primero es usado para el botón. La primera página HTML solo se necesita para abrir los frames y darles sus respectivos nombres.

frames2.htm

<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
    <FRAMESET COLS="295,*"> 
  <FRAMESET ROWS="100%,*"> 
    <FRAME SRC="loadtwo.htm" NAME="fr1"> 
      </FRAMESET> 
  <FRAMESET ROWS="75%,25%"> 
    <FRAME SRC="cell.htm" NAME="fr2"> 
    <FRAME SRC="cell.htm" NAME="fr3"> 
      </FRAMESET> 
</FRAMESET> 
</HTML>

loadtwo.htm es cargada al primer frame. Este es el frame con el botón.

loadtwo.htm

<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
  function loadtwo(page2, page3) {
     parent.fr2.location.href=page2;
     parent.fr3.location.href=page3;
}
// -->
</script>
</HEAD>
<BODY>
<FORM NAME="buttons">
     <INPUT TYPE="button" VALUE="2 in a row" onClick="loadtwo('frtest1.htm','frtest2.htm')">
</FORM>
</BODY>
</HTML>

La función loadtwo() es invocada cuando el botón es presionado. Dos comillas envuelven la función. Si usted observa esta función, puede ver que el segundo frame fr2 carga la página que está definida por las primeras comillas en el llamado de la función. Si usted tiene diferentes botones abriendo diferentes páginas, puede reusar esta función. Usted solo tiene que pasar las diferentes URLs (direcciones) de las páginas.


La segunda técnica usa hyperlinks. Algunos ejemplos flotando por Internet tienen algo como esto:
<a href="su_link.htm onClick="sufunción()">

Esta técnica parace no trabajar en todas las plataformas. Así que mejor no la use. Podemos invocar una función JavaScript de la siguiente forma:

<a href="javascript:mi función()">Mi Link</a>
Esto es realmente fácil y parece funcionar bien en todos los browsers. Usted solo tiene que escribir javascript: y el nombre de su función como su 'link'. Si usted invoca la función 'loadtwo()' del ejemplo de arriba, puede actualizar dos frames con un solo click sobre un hyperlink.


La tercera técnica para cargar dos páginas con un solo click del mouse puede ser combinada con botones o con hyperlinks normales. Podemos hacer esto con la segunda técnica mostrada arriba pero el aprovechamiento de esta puede ser inapropiada algunas veces. Lo que podemos hacer es cargar una página HTML a un frame. Esto es hecho por:
<a href="getfr2.htm" target"fr2">Click aqui!</a>
Esto ya lo sabímos. Lo que hacemos ahora es agregar la propiedad 'onLoad' al archivo cargado. El archivo 'getfr2.htm' puede lucir asi:

<HTML>
<BODY onLoad="parent.fr3.location.href='getfr3.htm'; return true;">
bla bla bla
</body>
</html>

Porsupuesto usted debe agregar esto a cada documento que sea cargado dentro del segundo frame.


Otro problema visto frecuentemente es el de cómo pueden ser cargadas nuevas páginas a una nueva ventana. La ventana se abrirá cuando el usuario haga click en un link. Usted solo tiene que agregar la propiedad 'target' a su tag de nuevo. Esto luce asi:
<a href="cualquier_sitio.html" target="Ventana Fuente">Vamos!</a>


Ahora miraremos diferentes operadores que podremos usar en JavaScript. Los operadores son una técnica poderosa para hacer mas pequeño y a la vez mejorar su script. Por ejemplo, usted quiere probar si una variable x es mas grande que 3 y quiere ver si es mas pequeña que 10. Usted debería escribirlo en esta forma:

if (x>3) 
  if (x<10)
    haceralgo();>

La función 'haceralgo()' es invocada cuando x es mayor que 3 y cuando x es menor que 10. Existe una forma más fácil de escribir este pensamiento:

if (x>3 && x<10) haceralgo();
&& es llamado el operador AND. Entonces hay un operador OR. Usted puede usar esto por ejemplo si usted quiere asegurarse de que una variable x es igual a 5 y otra variable y es igual a 17.

if (x==5 || y==17) haceralgo();
La función haceralgo() es invocada cuando x==5 o y==17. Esta se invoca también si ambas comparaciones son verdaderas.
Las comparaciones son hechas por el operador == en JavaScript (por supuesto existen también <,>,<= and >=). Si usted sabe C/C++, esto es lo mismo. Un simple = es usado para almacenar el valor de una variable. (Si usted sabe PASCAL esto puede ser un poquito confuso. Asignar el valor a una variable en PASCAL es hecho por medio de := y comparaciones con un simple =)

Si quiere ver si una variable no es igual a cierto número, esto puede ser un poquito complicado sin operadores. Esto es hecho con un simple !=, por ejemplo: x != 17.

Hay muchos mas operadores interesantes con los cuales puede hacer sus programas mucho mas eficientemente.


Index - Parte 1 - Parte 2 - Parte 3 - Parte 4 - Parte 5 - Parte 7