Este documento describe cómo crear applets interactivos con GeoGebra mediante el uso de JavaScript. Explica brevemente HTML y JavaScript, y cómo usar formularios, campos de texto y botones para recibir datos del usuario e interactuar con un applet de GeoGebra, enviando comandos como dibujar puntos o polígonos. Finalmente, da un ejemplo de cómo dibujar un punto en GeoGebra después de que el usuario introduzca sus coordenadas a través de un formulario.
1. Las Matemáticas en Secundaria con
Software Libre
Daniel López Avellaneda
dani@lubrin.org
GeoGebra - Interacción con
JavaScript
Manual para el curso organizado por:
CEP Cuevas-Olula +CEP El Ejido +CEP Almería
http://aula.cepindalo.es
Marzo-Mayo de 2008
2. ÍNDICE #1/4
Índice
1. Introducción 2
2. Algo de HTML y JavaScript 2
3. Desde JavaScript a GeoGebra 4
Daniel López Avellaneda [http://lubrin.org/mat] http://aula.cepindalo.es
3. 2 ALGO DE HTML Y JAVASCRIPT #2/4
1 Introducción
La verdadera potencia de GeoGebra reside en la creación de applets interactivos. Se trata de
que el usuario no se limite a deslizar variables, sino que, mediante campos de entrada de texto,
botones, etc. pueda introducir datos e interactuar con GeoGebra.
Ello se consigue con JavaScript (lenguaje de programación que se ejecuta en el PC del cliente,
en lugar de en el servidor de Internet).
Para esta parte serían recomendables conocimientos de JavaScript y algo de HTML (sobre
todo lo concerniente a formularios).
Lo que pretendemos es crear pequeños objetos de aprendizaje mediante una página web en la
habrá:
texto explicativo
un applet geogebra
campos de entrada de texto y botones que nos permitan interactuar con GeoGebra.
Mediante los formularios (campos de texto y botones) le enviaremos órdenes a GeoGebra del tipo:
dibuja un punto, mueve un polígono, calcula un área, etc.
2 Algo de HTML y JavaScript
Estamos acostumbrados a ver formularios en la web. Normalmente tienen una serie de campos
de entrada de texto (donde tecleamos los datos solicitados) y suelen terminar con un botón 'Enviar
Datos' que pulsamos cuando hemos completado el resto de campos.
Cuando pulsamos 'Enviar', normalmente el servidor ejecuta algunas acciones o simplemente
nuestros datos son enviados por e-mail. Sin embargo, también es posible ejecutar acciones en
cliente, es decir sin que pase información al servidor donde está alojada la página. Para ello se
suele usar JavaScript, que al ser un lenguaje interpretado en el lado del cliente, no necesita acceder
al servidor para responder a nuestras acciones.
Un simple botón se puede introducir con el siguiente código:
<form>
<input type="button" value="Nombre" >
</form>
Aparecerá un botón en la web, pero no hace nada al pulsarlo.
Si queremos que haga algo al pulsarlo ponemos algo así:
<form>
<input type="button" value="Nombre" onclick="mi_funcion();">
</form>
Le estamos diciendo que al hacer clic sobre el botón, ejecute las órdenes incluidas en mi_funcion().
Pero ¾qué es mi función y dónde está? mi_funcion() va a ser una función de JavaScript parecida
a:
script type=text/javascript
function mi_funcion()
{
alert (' hola ');
}
/script
Daniel López Avellaneda [http://lubrin.org/mat] http://aula.cepindalo.es
4. 2 ALGO DE HTML Y JAVASCRIPT #3/4
Veamos ahora un ejemplo de formularios con javascript, donde le pasamos datos a través de un
campo de texto del formulario.
form name=formu
Su nombre: input type=text name=nombre
input type=button value=Enviar onclick=mi_funcion2();
/form
Previamente debemos haber denido mi_funcion2():
script type=text/javascript
function mi_funcion2()
{
var nom=document.formu.nombre.value;
alert ('Hola ' + nom);
}
/script
Almacenamos en la variable 'nom' el valor del campo de texto 'nombre'. Observe que las palabras
'formu' y 'nombre' son los nombres del formulario y del campo de texto.
Daniel López Avellaneda [http://lubrin.org/mat] http://aula.cepindalo.es
5. 3 DESDE JAVASCRIPT A GEOGEBRA #4/4
3 Desde JavaScript a GeoGebra
Veamos como dar órdenes desde JavaScript a GeoGebra.
Disponemos de un chero ggb (por ejemplo prueba.ggb en el que simplemente hemos dibujado
un cuadrilátero) y del chero html generado automáticamente con GeoGebra. Después del applet
introducimos el siguiente texto:
Pretendemos que GeoGebra dibuje un Punto P=(x,y) después de que el usuario haya introdu-
cido las coordenadas x e y, mediante campos de texto de un formulario.
En le formulario ponemos dos entradas de texto (una para x y otra para y) y botón para hecer
clic una vez tecleadas ambas coordenadas.
En la función de JavaScript almacenamos en applet geogebra en la variable geo y las coorde-
nadas introducidas por el usuario en las variables x e y.
Finalmente usamos la orden EvalCommand de GeoGebra.
EvalCommand(lo_que_sea) hace lo mismo que si introducimos lo_que_sea desde la entrada
algebraica de GeoGebra.
Actividad: Genere una web con un applet geogebra que dibuje una parábola ax
2
+bx+c=0, donde
los coecientes a, b y c deben ser introducidos por el usuario mediante campos de texto de
un formulario.
Daniel López Avellaneda [http://lubrin.org/mat] http://aula.cepindalo.es