M06 UF1Pr3. Objecte Clock

Introducció

Teoria que s'ha vist sobre els objectes de Javascript:

• https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Working_with_Objects

Desenvolupament

Crea l'objecte Clock, amb les següents propietats:

• hora
• minut
• segon
• sentit (true-endavant, false-endarrere)
• estat (true-arrencat, false-aturat)

I els següents mètodes:

• arrenca(sentit) (per defecte el sentit és endavant)
• atura()
• pausa()
• reset(): posa hora, minut i segon a 0, i atura si estigués arrencat.
• set(hora, minut, segon) posa hora, minut i segon als valors proporcionats.
• formata(): formata amb la cadena hh:mi:ss (2 dígits)

En el constructor passarem:

• hora, minut, segon (amb la possibilitat de què es passi l'hora, minut i segons actuals com a valors per defecte).

function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) {
   statements
}

Ajuda

La part més difícil són que les funcions setInternal i clearInterval funcionin correctament.

Se't proporciona un codi inicial que et serveix de plantilla:

function Clock(hora=new Date().getHours()) {
   this.hora = hora;
   this.sentit = true //true: endavant; false: endarrere
   this.ref = 0; //és la referència que retorna setInterval
   this.formata = function() {
      let cad_segon = this.segon.toString();
      let cad_minut = this.minut.toString();
      let cad_hora = this.hora.toString();   
      return cad_hora + ':' + cad_minut + ':' + cad_segon;
   }

   this.arrenca = function() { 
      if (this.estat==false) this.estat=true;
      this.ref = setInterval(() => {

         this.segon++;
         if (this.segon==60) {
            this.segon = 0;
            this.minut += 1;
            if (this.minut == 60) {
               this.minut = 0;
               this.hour += 1;
            }
         }

      }, 1000);
   };

   this.atura = function() {
      if (this.estat==true) this.estat=false;
      clearInterval(this.ref);
   };


}

Joc de proves

Crea una petita pàgina web, amb diferents DIVs per ubicar diferents instàncies del rellotge, i testeja els diferents mètodes que has definit.

Interfície web (ToDo en la UF3)

Més endavant (UF3), es farà una interfície amb botons per tal d'arrencar, aturar i fer reset del rellotge, i un checkbox que determini el sentit (endavant o endarrere). També un botó + i un botó - per incrementar o decrementar el rellotge.

Tasques

Consola

• Fes un joc de proves mínim per comprovar el bon funcionament de les teves instàncies de rellotge.

Pàgina web

• DIV1: instància de Clock amb els valors actuals de Date(). Arrencar el Clock.
• DIV2: instància de Clock amb els valors (hora: 00; minut: 00: segon: 00). Quan el primer Clock (DIV1) porti 10 segons en funcionament, aquest Clock arrenca com a cronòmetre.
• DIV3: temporitzador. Instància de Clock amb els valors (hora: 00; minut: 05: segon: 00). El temporitzador arrenca anat endarrere. Implementem la següent regla: mentre el segon rellotge té minuts parells, aquest tercer rellotge entra en mode pausa.

Solució

(encara no)

Entrega

---

creat per Joan Quintana Compte, octubre 2021