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(), minut=new Date().getMinutes(), segon=new Date().getSeconds()) {
	this.hora = hora;
	this.minut = minut;
	this.segon = segon;
	this.sentit = true //true: endavant; false: endarrere
	this.ref = 0; //és la referència que retorna setInterval
	this.reset = function() { this.atura(); this.set(0,0,0) }
	this.set = function(hora, minut, segon) { this.hora = hora; this.minut = minut; this.segon = segon; }
	this.formata = function() {
		let cad_segon = this.segon.toString();
		let cad_minut = this.minut.toString();
		let cad_hora = this.hora.toString();
		if (cad_segon.length==1) cad_segon = '0' + cad_segon;
		if (cad_minut.length==1) cad_minut = '0' + cad_minut;
		if (cad_hora.length==1) cad_hora = '0' + cad_hora;		
		return cad_hora + ':' + cad_minut + ':' + cad_segon;
	}

	this.arrenca = function() { 
		if (this.estat==false) this.estat=true;
		this.ref = setInterval(() => {
			if (this.sentit) {
				this.segon++;
				if (this.segon==60) {
					this.segon = 0;
					this.minut += 1;
					if (this.minut == 60) {
						this.minut = 0;
						this.hour += 1;
					}
				}
			} else {
				this.segon--;
				if (this.segon==-1) {
					this.segon = 59;
					this.minut -= 1;
					if (this.minut == -1) {
						this.minut = 59;
						this.hour -= 1;
					}
				}
			}
		}, 1000);
	};

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

	this.pausa = function() {
		clearInterval(this.ref);
	};

}

// 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

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