MÓDULO 13

► 13. Applets, JavaScript y XML

► 13.6 JavaScript

Objetivos

GeoGebra suministra diversos métodos que posibilitan la interacción de JavaScript con el applet de la construcción. Aquí veremos de forma muy breve, con distintos ejemplos, qué es JavaScript y en qué consisten esos métodos.

Desde GeoGebra 4, gran parte de los procedimientos en los que era imprescindible usar JavaScript pueden ser substituidos por guiones de GeoGebra, que resultan mucho más sencillos y fáciles de implantar.

El lenguaje JavaScript

JavaScript es un lenguaje de programación utilizado principalmente en páginas web, con una sintaxis parecida a la del lenguaje Java (lenguaje en el que está desarrollado el programa GeoGebra). Los navegadores saben interpretar el código JavaScript integrado en las páginas web, lo que permite añadir interactuación entre el usuario y la página.

Este código se puede incluir directamente entre el código de etiquetas HTML de la página web, pero en vez de ello es recomendable que el código se escriba en un archivo de texto aparte, de extensión JS. En este caso, basta incluir la siguiente etiqueta (suele hacerse en el head de la página web):

<script type="text/javascript" src="miScript.js" />

donde, naturalmente, miScript.js es el nombre (incluyendo la dirección relativa o absoluta) que le hemos dado al archivo de texto plano que contiene las líneas del programa JavaScript.

En el caso de que se decidiese incluir el código directamente en la página web, la sintaxis para hacerlo es incluir el siguiente bloque:

<script type="text/javascript" >

.... (líneas de código JavaScript) ....

</script>

Por ejemplo, al exportar una construcción como página web, GeoGebra incluye el siguiente código JavaScript (que puede contener más instrucciones si hemos introducido algún guión de JavaScript en la construcción):

<script type="text/javascript" >

var ggbApplet = document.ggbApplet;

function ggbOnInit() {}

</script>

También se puede incluir un pequeño código JavaScript como acción de un botón de la página web.

En los siguientes ejemplos se muestran algunas posibilidades. En el apartado JavaScript del manual se muestran todos los métodos disponibles, agrupados por categorías.

Ejemplo 1

El siguiente código HTML es todo el código presente en el body de la página web 1.html. Como se puede ver, se ha añadido un botón que permite el reinicio del applet.

<applet name=ejemplo1 code="geogebra.GeoGebraApplet" codebase="./" archive="geogebra.jar" width="750" height="500">

<param name="filename" value="1.ggb">

</applet>

<br>

<input type="button" value="Reinicia" onclick="document.ejemplo1.reset();">

Ejemplo 2

El siguiente código HTML es todo el código presente en el body de la página web 2.html. Se han añadido sendos botones para mostrar u ocultar el objeto "b".

<applet name=ejemplo2 code="geogebra.GeoGebraApplet" codebase="./" archive="geogebra.jar" width="750" height="500">

<param name="filename" value="2.ggb">

</applet>

<br>

<input type="button" value="Oculta b" onclick="document.ejemplo2.setVisible('b', false);">

<input type="button" value="Muestra b" onclick="document.ejemplo2.setVisible('b', true);">

Ejemplo 3

El siguiente código HTML es todo el código de la página web 3.html. Se han añadido sendos botones para reiniciar y realizar una construcción.

<html>

<head>

<script type="text/javascript" src="ejemplo3.js"></script>

</head>

<body>

<applet name=ejemplo3 code="geogebra.GeoGebraApplet" codebase="./" archive="geogebra.jar" width="750" height="500">

<param name="filename" value="2.ggb">

<param name="language" value="es">

</applet>

<br>

<input type="button" value="Reinicia" onclick="document.ejemplo3.reset();">

<input type="button" value="Haz construcción" onclick="miFuncion();">

</body>

</html>

Donde el archivo ejemplo3.js es un archivo externo que incluye el código JavaScript de la función a la que se llama en el HTML. Observemos que en los parámetros del applet hemos añadido el código del idioma (es). De esta forma, GeoGebra evaluará correctamente el comando "Recta" cuando reciba la última instrucción del siguiente código JavaScript, incluso en aquellos ordenadores a los que GeoGebra asigne otro idioma por defecto.

function miFuncion() {

document.ejemplo3.evalCommand("A = (1,1)");

document.ejemplo3.evalCommand("B = (3,2)");

document.ejemplo3.evalCommand("s = Recta[A, B]");

}

Ejemplo 4

En el código fuente de la página web reloj.html aparece la inclusión del JavaScript reloj.js:

<script type="text/javascript" src="reloj.js" />

Después aparece la apertura del applet, de nombre (interno, para permitir su referencia) "Reloj":

<applet name="Reloj" code="geogebra.GeoGebraApplet" codebase="./" archive="geogebra.jar" width="780" height="500" >

y, algo más abajo, dos botones:

<input type="button" onClick="horaLibre()" value="Hora libre" >
<input type="button" onClick="horaActual()" value="Hora actual" >

El código de ese JavaScript es:

var espera = 50;

var reloj = null;

var libre=true;

function adelante() {

var date = new Date();

var hora = date.getHours();

var minuto = date.getMinutes();

var segundo = date.getSeconds();

var cent = date.getTime();

cent = Math.round((cent - 1000 Math.floor(cent/1000))/10);

document.Reloj.evalCommand("hora=" + hora);

document.Reloj.evalCommand("minuto=" + minuto);

document.Reloj.evalCommand("segundo=" + segundo);

document.Reloj.evalCommand("cent=" + cent);

}
function horaLibre() {

setTimeout("clearInterval(reloj)", 0);

libre=true;

}

function horaActual() {

if (libre){

reloj = setInterval("adelante()", espera);

libre=false;

}

}

Ejemplo 5

En el código fuente de la página web 5.html aparece la apertura del applet, de nombre (interno, para permitir su referencia) "ejemplo5":

<applet name=ejemplo5 code=geogebra.GeoGebraApplet codeBase=. archive="geogebra.jar" width=600 height=350 MAYSCRIPT>

La última propiedad, MAYSCRIPT, permite introducir "alertas" ante determinadas acciones, como crear o eliminar objetos, de forma que "salten" en cuanto el usuario las realice. Las escuchas se introducen, en el código JavaScript, después del cierre del applet:

<script type="text/javascript" src="ejemplo5.js"></script>

Más adelante veremos el código del archivo ejemplo5.js. Ahora terminaremos de explorar el código de la página web. Después del applet y del código JavaScript, en la página aparece un formulario (llamado "formulario") con áreas de texto. Esas áreas de texto, nominadas texto1, texto2 y estado, serán las encargadas de recoger la información devuelta por el JavaScript una vez procesada la alerta.

<td>

    Actualizado:

    <br><textarea name=texto1 rows=5 cols=35 />

    <br>Creados, borrados, renombrados:

    <br><textarea name=texto2 rows=5 cols=35 />

</td>

<td>

    Estado actual de la construcción:

    <br><textarea name=estado rows=12 wrap=physical cols=30 />

El código ejemplo5.js es:

document.ejemplo5.registerAddListener("escuchaCrear");
document.ejemplo5.registerRemoveListener("escuchaBorrar");
document.ejemplo5.registerRenameListener("escuchaRenombrar");
document.ejemplo5.registerUpdateListener("escuchaActualizar");
document.ejemplo5.registerClearListener("escuchaEliminar");

var largo = 150;
function escuchaCrear(nombreObjeto) {
    document.formulario.texto2.value = "creado: " + nombreObjeto + "\n" + document.formulario.texto2.value.substring(0, largo);
    imprimeEstado();
}

function escuchaBorrar(nombreObjeto) {
    document.formulario.texto2.value = "borrado: " + nombreObjeto + "\n" + document.formulario.texto2.value.substring(0, largo);
    imprimeEstado();
}

function escuchaRenombrar(nombreAntiguo, nombreNuevo) {
    document.formulario.texto2.value = "renombrado: " + nombreAntiguo + " como " + nombreNuevo + "\n" + document.formulario.texto2.value.substring(0, largo);
    imprimeEstado();
}

function escuchaActualizar(nombreObjeto) {
    cadena = document.ejemplo5.getValueString(nombreObjeto);
   document.formulario.texto1.value = cadena + "\n" + document.formulario.texto1.value.substring(0, largo);
}

function escuchaEliminar() {
    document.formulario.texto1.value = "";
    document.formulario.texto2.value = "Construcción eliminada";
    document.formulario.estado.value = "";
}

function imprimeEstado() {
    var numeroObjetos = document.ejemplo5.getObjectNumber();
    var estadoObjetos = "Número de objetos: " + numeroObjetos;
    for (i=0; i < numeroObjetos; i++) {
        nombre = document.ejemplo5.getObjectName(i);
        tipo = document.ejemplo5.getObjectType(nombre);
        comando = document.ejemplo5.getCommandString(nombre);
        estadoObjetos += "\n" + tipo + " " + nombre + ", " + comando;
    }
    document.formulario.estado.value = estadoObjetos;
}

Ejemplo 6

El siguiente código HTML es todo el código presente en el body de la página web 6.html.

<tbody>

<tr>

<td>

<applet name=emite codeBase=. height=250 archive=geogebra.jar width=600 code=geogebra.GeoGebraApplet MAYSCRIPT>

</applet>

<applet name=recibe codeBase=. height=250 archive=geogebra.jar width=600 code=geogebra.GeoGebraApplet MAYSCRIPT>

</applet>

<script type="text/javascript" src="ejemplo6.js" />

</td>

</tr>

</tbody>

</table>

</div>

En el código JavaScript del archivo ejemplo6.js vemos las escuchas que se han establecido:

document.emite.registerObjectUpdateListener("a", "escuchaValor");
document.emite.registerObjectUpdateListener("b", "escuchaValor");
document.emite.registerObjectUpdateListener("c", "escuchaValor");
document.emite.registerObjectUpdateListener("A", "escuchaPunto");

function escuchaValor(nombreObjeto) {
    var nuevoValor = document.emite.getValue(nombreObjeto);
    document.recibe.setValue(nombreObjeto, nuevoValor);
}

function escuchaPunto(nombreObjeto) {
    xcoord = document.emite.getXcoord("A");
    document.recibe.setCoords("B", xcoord, 0);
}

Este código transfiere información del cambio de valor de los deslizadores a, b y c, así como del cambio de posición del punto A, desde applet "emite" hacia el applet "recibe".

Esto permite, por ejemplo, disponer de dos sistemas cartesianos de referencia intercomunicados. En la primera construcción el estado de la función y del punto se transfiere a la segunda construcción para determinar el estado de la función derivada y la posición del punto.