Formulari. Rectes que es creuen - Historial de revisió

Joan: /* Tasques a realitzar */

2021-12-09T20:01:05Z

Tasques a realitzar

Joan: /* Projecte */

2021-12-09T18:54:27Z

Projecte

Joan: /* solució expressió regular */

2021-12-09T18:53:52Z

solució expressió regular

Joan: /* solució expressió regular */

2021-12-03T10:48:41Z

solució expressió regular

Joan: /* Entrega al Classroom */

2021-12-03T10:47:33Z

Entrega al Classroom

Joan: /* Projecte */

2021-12-03T10:28:12Z

Projecte

Joan: /* Projecte */

2021-12-03T09:55:17Z

Projecte

Joan: /* Projecte */

2021-12-03T09:52:41Z

Projecte

Joan: Es crea la pàgina amb «=Introducció= La validació de formularis la farem de dues maneres: en aquesta entrega programarem les funcions a pèl. en la següent entrega utilitzarem la llibre...».

2021-12-03T09:51:04Z

Es crea la pàgina amb «=Introducció= La validació de formularis la farem de dues maneres: *en aquesta entrega programarem les funcions a pèl. *en la següent entrega utilitzarem la llibre...».

Pàgina nova

=Introducció=
La validació de formularis la farem de dues maneres:
*en aquesta entrega programarem les funcions a pèl.
*en la següent entrega utilitzarem la llibreria ''validate.js''.

La validació dels formularis i el seu disseny és important de cara a la usabilitat de les aplicacions web. Volem que l'experiència d'usuari sigui bona i fàcil. Omplir un formulari no ha de ser un maldecap.
=Projecte=
Posem per escrit allò que ja hem comentat a classe.

L'equació d'una recta és de la forma:
<pre>
y = a*x + b
</pre>
on ''a'' és un número que representa el pendent de la recta (la inclinació; si la ''a'' és positiva la recta va cap amunt; si la ''a'' és negativa va cap avall).

I la ''b'' és el ''terme independent'', que representa el punt de tall quan la x=0.

Dues rectes que no siguin paral·leles (tenen diferent pendent) sempre es tallaran en un punt (i només un punt). Anem a fer un exemple:
<pre>
y = 3x+2
y = -x + 4

=> 3x+2=-x+4 => 4x = 2 => x=0.5 => y=3.5
El punt de tall és (0.5, 3.5)
</pre>

En el nostre formulari haurem de posar les dues rectes, i les diferents opcions amb què podem entrar el format és:
*y=3x+1 (números a i b sense decimal)
*y=-3x-1 (poden ser números negatius)
*y=-3.344x-1.321 (podem posar valors decimals a les constants a i b)
*y = 5x + 4 (podem posar espais en blanc per tal de ser més clars)
*y = -3*x+4 (podem utilitzar el signe de multiplicar *)
Totes aquestes maneres d'entrar l'equació de la recta són vàlides, i per tant haurem de trobar una expressió regular que ho faci bé.

=Tasques a realitzar=
1. La pàgina web constarà de títol, formulari, botó Enviar, barra de progrés, camp per al resultat.

2. el formulari constarà de nom, recta1, recta2.

3. El camp nom es validarà amb les següents regles:
*no pot contenir números
*només pot contenir caràcters vàlids (lletres minúscules, majúscules, espai en blanc)
*podem tenir només el nom, nom i cognom, o nom i dos cognoms.

4. El camp de les rectes es validarà tal com s'ha comentat més amunt.

5. Pots validar els camps en el mateix moment que canvïis el valor dels camps (''onchange''), o en el ''onsubmit'' del botó Enviar. Això ho pot decidir el programador.

6. Mostraràs un missatge clar (informatiu i ben dissenyat) de si els camps compleixen els criteris.

7. Enviar. Si els valors de les rectes són correctes, hauràs de destriar els valors ''a1'', ''b1'', ''a2'' i ''b2'' per trobar la solució ''solx'', ''soly'' (en format 2 decimals).

8. Simularàs que aquest càlcul és molt costós i difícil fent un ''progress bar'' de, posem per cas, 2 segons.

9. Mostraràs el resultat per pantalla.

10. Tot plegat ben dissenyat, amb codi html, css i js separat en fitxers independents.

=Entrega al Classroom=
Entregaràs en el Classroom la teva solució, amb les captures de pantalla que siguin l'evidència de què has fet tu el codi, que has implementat les tasques que se't demanen, i que s'executa en la teva màquina.

Opcionalment pots fer un screencast. Avisa al professor quan tinguis la teva solució.

{{Autor}}, desembre 2021

← Versió més antiga		Revisió del 20:01, 9 des 2021
Línia 42:		Línia 42:

	=Tasques a realitzar=		=Tasques a realitzar=
		+	[[Fitxer:Rectes que es creuen.png \| thumbnail]]
	1. La pàgina web constarà de títol, formulari, botó Enviar, barra de progrés, camp per al resultat.		1. La pàgina web constarà de títol, formulari, botó Enviar, barra de progrés, camp per al resultat.

@@ Línia 35: / Línia 35: @@
 *el terme independent és opcional. Per ex: ''y = 3x'' (vol dir que el terme independent val 0)
 Totes aquestes maneres d'entrar l'equació de la recta són vàlides, i per tant haurem de trobar una expressió regular que ho faci bé.
 ==Barra de progrés==
 Pots trobar a la xarxa molts exemples de ''progress bar'' fets amb Javascript. Per exemple:

@@ Línia 68: / Línia 68: @@
 Opcionalment pots fer un screencast. Avisa al professor quan tinguis la teva solució.
 ==solució expressió regular==
-Entregarem la discussió després de discutir-hoa classe.
+Entregarem la discussió després de discutir-ho a classe.
 {{Autor}}, desembre 2021

@@ Línia 68: / Línia 68: @@
 Opcionalment pots fer un screencast. Avisa al professor quan tinguis la teva solució.
 ==solució expressió regular==
-<pre>
+Entregarem la discussió després de discutir-hoa classe.
 {{Autor}}, desembre 2021

← Versió més antiga		Revisió del 10:47, 3 des 2021
Línia 67:		Línia 67:

	Opcionalment pots fer un screencast. Avisa al professor quan tinguis la teva solució.		Opcionalment pots fer un screencast. Avisa al professor quan tinguis la teva solució.
		+	==solució expressió regular==
		+	<pre>
		+	re = /^[y]{1}\s?[=]\s?[+\|-]?(\d+([.]?\d+)?[*]?)?[x]{1}(\s?[+\|-]{1}\s?\d+([.]?\d+)?)?$/
		+
		+	joc de proves complet:
		+
		+	//true:
		+	re.test('y = +33.53x - 32.3')
		+	re.test('y = +3353x - 323')
		+	re.test('y = 3353x + 323')
		+	re.test('y=3353x+323')
		+	re.test('y=33x')
		+	re.test('y=x')
		+	re.test('y=x - 4')
		+	re.test('y= 5*x - 4')
		+	re.test('y= 5.32x - 4')
		+
		+	//false:
		+	re.test('5.32x - 4')
		+	re.test('y= 5.32x +- 4')
		+	re.test('y= *x - 4')
		+	re.test('y = 5.32 - 4')
		+	</pre>

	{{Autor}}, desembre 2021		{{Autor}}, desembre 2021

@@ Línia 28: / Línia 28: @@
 *y=3x+1 (números a i b sense decimal)
 *y=-3x-1 (poden ser números negatius)
 *y=-3.344x-1.321 (podem posar valors decimals a les constants a i b)
 *y = 5x + 4 (podem posar espais en blanc per tal de ser més clars)

@@ Línia 32: / Línia 32: @@
 *y = -3*x+4 (podem utilitzar el signe de multiplicar *)
 Totes aquestes maneres d'entrar l'equació de la recta són vàlides, i per tant haurem de trobar una expressió regular que ho faci bé.
 =Tasques a realitzar=

Formulari. Rectes que es creuen - Historial de revisió

Joan: /* Tasques a realitzar */

Joan: /* Projecte */

Joan: /* solució expressió regular */

Joan: /* solució expressió regular */

Joan: /* Entrega al Classroom */

Joan: /* Projecte */

Joan: /* Projecte */

Joan: /* Projecte */

Joan: Es crea la pàgina amb «=Introducció= La validació de formularis la farem de dues maneres: *en aquesta entrega programarem les funcions a pèl. *en la següent entrega utilitzarem la llibre...».

Joan: Es crea la pàgina amb «=Introducció= La validació de formularis la farem de dues maneres: en aquesta entrega programarem les funcions a pèl. en la següent entrega utilitzarem la llibre...».