GeoJS: Hola món!

HelloWorld (font: http://leandroesc.wordpress.com/2012/08/13/hello-world-a-new-virtualization-blog-is-born/ )Ja coneixes el Geogebra? Segur que hi has dibuixat moltes formes geomètriques. T’atreveixes ara a programar-lo en JavaScript?

Aquesta activitat t’ajudarà a entendre com fer-ho i així podràs fer programes per resoldre problemes complexos més endavant!

Guió de la sessió presencial: Hola món!

iniAbans de començar

Fitxa Didàctica (general)

Proposta de Dossier per a l’Alumne (.pdf)

  • No cal tenir cap coneixement previ amb JavaScript, però sí estar familiaritzat amb el Geogebra. Alhora convé tenir alguna noció de programació (si no heu programat mai, es recomana començar per alguna activitat de l’entorn Scratch).
  • Mira d’assolir els reptes que hi ha a continuació tu sol/a, i si no saps com fer-ho, mira les idees. Si encara et cal una mica més d’ajuda, pots fer una ullada a les pistes.
  • Els docents disposeu d’informació sobre l’estructura de les activitats i d’una Fitxa Didàctica general.

petjadaProva el teu primer programa

  • puzzleRepte 1: Què fa el següent programa?
    • Programa a provar: (pots fer una ullada a les idees més avall per a saber com provar-lo)
      const g=ggbApplet
      
      g.evalCommand("c_1=Circle[(10,10), 8]")
      g.setLineThickness("c_1", 10)
      
      for ( i = 0 ; i < 2 ; i++ ) {
       var id = "c_2"+i
       g.evalCommand(id+"=Circle[(6+"+i*8+",12),2]")
       g.setColor(id, 0, 0, 255)
       g.setFilling(id, 0.5)
      }
      
      g.evalCommand("c_3=Semicircle[(14,8), (6,8)]")
      g.setLineThickness("c_3", 13)
      g.setColor("c_3", 255, 0, 0)
      
      alert("Hola món!")
      
    • bombetaIdees:
      1. Obrir Geogebra (si no l’has usat mai, fes una ullada aquí i aquí)
      2. Obrir la finestra on poder editar el JavaScript:
        1. Inserir un punt anomenat “Programa”.
        2. Visualitza les propietats d’aquest punt (fes clic amb el botó dret del ratolí sobre el punt i escull “Propietats”).
        3. Prem la icona geopy-finestra-encastada-icona-finestres (a la part superior dreta) que serveix per encastar aquest diàleg en la finestra principal de GeoGebra.
        4. Escull la pestanya “Seqüència de comandaments”.
        5. Escull la pestanya “En clicar”.
        6. Escull l’opció “JavaScript” en la llista desplegable inferior de la pestanya.
      3. Comprova que tens l’entorn com en aquesta imatge:
        geojs-inicial-js-ca
        (fes clic per ampliar)
      4. Ara ja pots teclejar el programa (en aquest cas pots copiar-lo i enganxar-lo; NO copiïs els números de línia).
        1. Recorda que per a guardar els canvis que facis en aquest editor de JavaScript, caldrà que premis el botó “D’acord”. Aquest no executa el codi, sinó que el grava.
      5. Executar el codi: Podràs executar el codi cada vegada que facis un clic sobre el punt que has anomenat Programa.
    • interrogantPregunta 1: Què fa el programa?
    • interrogantPregunta 2: Què creus que és un programa informàtic?
  • puzzleRepte 2: Que passa si el programa no és correcte?
    • Esborra la primera aparició de la paraula “id” del teu programa i fixa’t en que passa en executar el programa.
    • bombetaIdees:
      /* És a dir, que la línia 7 enlloc de ser: */
       var id = "c_2"+i
      
      /* L'has de deixar sense la paraula id: */
       var  = "c_2"+i
      
      • recorda que cada cop que retoques el programa has de prémer el botó “D’acord” de l’editor de Javascript.
    • interrogantPregunta 3: Què passa en esborrar la primera aparició de la paraula “id”?
    • Torna a posar la paraula “id” per a que funcioni el programa i a més a més, afegeix el número 3 a la primera aparició de “setFilling”:
      /* De forma que la línia 10 quedi així: */
        g.setFilling(id, 0.5, 3)
      
    • interrogantPregunta 4: Què passa en afegir un número més a la comanda “setFilling”?
  • puzzleRepte 3: Canviar el color dels ulls a verd.
    • lupaPistes:
      Has de retocar la línia 9, i canviar les tres xifres del codi de color.
      Fes una ullada a: http://www.rapidtables.com/web/color/RGB_Color.htm#color%20table
      
    • interrogantPregunta 5: Com funcionen els codis de color? Com pots crear el color groc?
  • puzzleRepte 4: Afegir un nas de color groc.
    • Usa la o les formes geomètriques que més t’agradin per a crear el nas.
    • lupaPistes:
      Més info sobre les comandes de Geogebra: http://wiki.geogebra.org/en/Category:Tools
      Més info sobre JavaScript en Geogebra: http://wiki.geogebra.org/en/Reference:JavaScript
      

mesI després…geojs-hello-world

Felicitats! Ara ja pots començar a fer altres activitats usant el Geogebra i el JavaScript com a eina per resoldre problemes.

Endavant, aquí tens el llistat d’activitats.

feather Autoria: Manel Martínez i Pascual i Jordi Campos i Miralles.

Licencia de Creative CommonsPodeu usar el contingut i modificar-lo d’acord amb la Llicència Creative Commons Reconeixement-CompartirIgual 4.0.

Anuncis

Deixa un comentari

Fill in your details below or click an icon to log in:

WordPress.com Logo

Esteu comentant fent servir el compte WordPress.com. Log Out / Canvia )

Twitter picture

Esteu comentant fent servir el compte Twitter. Log Out / Canvia )

Facebook photo

Esteu comentant fent servir el compte Facebook. Log Out / Canvia )

Google+ photo

Esteu comentant fent servir el compte Google+. Log Out / Canvia )

Connecting to %s