M06 UF1Pr3. Objecte Clock - Historial de revisió

Joan: /* Tasques */

2021-11-01T00:06:42Z

Tasques

Joan: /* Ajuda */

2021-10-31T23:56:28Z

Ajuda

Joan: /* Ajuda */

2021-10-31T23:53:43Z

Ajuda

Joan: /* Ajuda */

2021-10-31T23:53:12Z

Ajuda

Joan: /* Desenvolupament */

2021-10-31T23:49:21Z

Desenvolupament

Joan: /* Tasques */

2021-10-31T23:45:39Z

Tasques

Joan: /* Desenvolupament */

2021-10-31T23:20:41Z

Desenvolupament

Joan: /* Desenvolupament */

2021-10-31T23:19:25Z

Desenvolupament

Joan: /* Desenvolupament */

2021-10-31T19:15:39Z

Desenvolupament

Joan a 19:02, 31 oct 2021

2021-10-31T19:02:41Z

@@ Línia 80: / Línia 80: @@
 *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.
+*DIV1: instància de Clock amb els valors actuals de Date(). Arrencar el Clock. És l'hora actual.
-*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.
+*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.

@@ Línia 30: / Línia 30: @@
 Se't proporciona un codi inicial que et serveix de plantilla:
 <pre>
-function Clock(hora=new Date().getHours(), minut=new Date().getMinutes(), segon=new Date().getSeconds()) {
+function Clock(hora=new Date().getHours()) {
-	this.hora = hora;
+   this.hora = hora;
-	this.minut = minut;
+   this.sentit = true //true: endavant; false: endarrere
-	this.segon = segon;
+   this.ref = 0; //és la referència que retorna setInterval
-	this.sentit = true //true: endavant; false: endarrere
+   this.formata = function() {
-	this.ref = 0; //és la referència que retorna setInterval
+      let cad_segon = this.segon.toString();
-	this.reset = function() { this.atura(); this.set(0,0,0) }
+      let cad_minut = this.minut.toString();
-	this.set = function(hora, minut, segon) { this.hora = hora; this.minut = minut; this.segon = segon; }
+      let cad_hora = this.hora.toString();
-	this.formata = function() {
+      return cad_hora + ':' + cad_minut + ':' + cad_segon;
-		let cad_segon = this.segon.toString();
-	this.arrenca = function() {
+   this.arrenca = function() {
-		if (this.estat==false) this.estat=true;
+      if (this.estat==false) this.estat=true;
-		this.ref = setInterval(() => {
+      this.ref = setInterval(() => {
-	this.atura = function() {
+         this.segon++;
-		if (this.estat==true) this.estat=false;
+         if (this.segon==60) {
-		clearInterval(this.ref);
+            this.segon = 0;
-	};
+            this.minut += 1;
-	this.pausa = function() {
+      }, 1000);
-		clearInterval(this.ref);
+   };
+   this.atura = function() {
+      if (this.estat==true) this.estat=false;
-// JOC DE PROVES
+      clearInterval(this.ref);
-console.log('rellotge 1');
+   };
 </pre>

← Versió més antiga		Revisió del 23:53, 31 oct 2021
Línia 85:		Línia 85:

	}		}
		+
		+	// JOC DE PROVES
		+	console.log('rellotge 1');
		+	var clock1 = new Clock();
		+
		+	console.log(clock1.hora);
		+	console.log(clock1.minut);
		+	console.log(clock1.segon);
		+
		+	console.log('arrenquem rellotge 1')
		+	clock1.arrenca();
		+	console.log(clock1.formata());
		+	console.log('aturem rellotge 1')
		+	clock1.atura();
		+
		+	console.log('rellotge 2');
		+	clock2 = new Clock(10,11,12);
		+
		+	console.log(clock2.hora);
		+	console.log(clock2.minut);
		+	console.log(clock2.segon);
		+	console.log(clock2.formata());
		+
		+	console.log('arrenquem rellotge 2 durant 5 segons')
		+	clock2.arrenca();
		+	let ref = setInterval(() => {console.log(clock2.formata())},1000);
		+	setTimeout(() => {
		+	clearInterval(ref)
		+	console.log('reset rellotge 2');
		+	clock2.reset();
		+	console.log(clock2.formata());
		+
		+	console.log('canvi de sentit');
		+	clock2.sentit = false;
		+
		+	clock2.set(12,30,5);
		+	console.log(clock2.formata());
		+
		+	console.log('arrenquem rellotge 2 cap endarrere')
		+	clock2.arrenca();
		+	let ref2 = setInterval(() => {console.log(clock2.formata())},1000);
		+	},5000); //després de 5 segons aturem
		+
		+
		+
	</pre>		</pre>

@@ Línia 30: / Línia 30: @@
 Se't proporciona un codi inicial que et serveix de plantilla:
 <pre>
-function Clock(hora=new Date().getHours()) {
+function Clock(hora=new Date().getHours(), minut=new Date().getMinutes(), segon=new Date().getSeconds()) {
 	this.hora = hora;
 	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;
+	}
@@ Línia 71: / Línia 79: @@
 		clearInterval(this.ref);
 	};
+}
 </pre>
 ==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.

@@ Línia 23: / Línia 23: @@
 function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) {
     statements
+}
 </pre>

@@ Línia 34: / Línia 34: @@
 =Tasques=
 *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.
 =Entrega=
 {{Autor}}, octubre 2021

@@ Línia 10: / Línia 10: @@
 *estat (true-arrencat, false-aturat)
 I els següents mètodes:
-*arrenca(sentit)
+*arrenca(sentit) (per defecte el sentit és endavant)
 *atura()
 *pausa()
@@ Línia 18: / Línia 18: @@
 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). I en el constructor també passarem el ''sentit'' i ''estat''.
+*hora, minut, segon (amb la possibilitat de què es passi l'hora, minut i segons actuals com a valors per defecte).
 <pre>

@@ Línia 13: / Línia 13: @@
 *atura()
 *pausa()
-*reset(): posa hora, minut i segon a 0.
+*reset(): posa hora, minut i segon a 0, i atura si estigués arrencat.
-*set(hora, minut, segon) posa hora, minut i segon a 0.
+*set(hora, minut, segon) posa hora, minut i segon als valors proporcionats.
-*formata()
+*formata(): formata amb la cadena hh:mi:ss (2 dígits)
 En el constructor passarem:

@@ Línia 1: / Línia 1: @@
 =Introducció=
-(TBD)
+Teoria que s'ha vist sobre els objectes de Javascript:
 =Desenvolupament=
-(TBD)
+Crea l'objecte ''Clock'', amb les següents propietats:
-<pre>
+*hora
- crea l'objecte ''Clock'', amb les propietats
+*minut
-hora
+En el constructor passarem:
-minut
+*hora, minut, segon (amb la possibilitat de què es passi l'hora, minut i segons actuals com a valors per defecte). I en el constructor també passarem el ''sentit''.
-joc de proves:
+<pre>
-crea dues instàncies del rellotge, i testeja els diferents mètodes
+function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) {
+   statements
-pàgina web:
-crea dos divs on ubicaràs dues instàncies de l'objecte Clock
+</pre>
+==Joc de proves==
-El primer Clock és un cronòmetre endavant, amb els següents botons:
+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.
-El segon Clock és un cronòmetre endarrere, amb els següents botons:
+==Interfície web (ToDo en la UF3)==
-Arrenca, Atura, Reset, Incrementa (que incrementa unitats d'un minut, utilitzant el mètode set())
+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).
 </pre>
 =Tasques=
 =Entrega=
 {{Autor}}, octubre 2021