► 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.

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 línea (suele hacerse en el head de la página web):

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

donde, naturalmente, "miScript.js" es el nombre (o dirección relativa) 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"></script> (declaración de final del 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. El apartado JavaScript de la sección Ayuda se muestran todos los métodos disponibles, agrupados por categorías.

Ejemplo 1

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

<body>

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

</applet> <br>

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

</body></html>

Ejemplo 2

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

<body>

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

</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);">

</body></html>

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="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"></script>

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

<applet name=Reloj code="geogebra.GeoGebraApplet" codebase="./" archive="../jar/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 borrar 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></TEXTAREA>

<BR>Creados, borrados, renombrados:<BR><TEXTAREA name=texto2 rows=5 cols=35></TEXTAREA></TD>

<TD>Estado actual de la construcción:<BR><TEXTAREA name=estado rows=12 wrap=physical cols=30></TEXTAREA>

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 de la página web 6.html.

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.