http://wiki.joanillo.org/index.php?action=history&feed=atom&title=M06UF3Q1._Exercicis_de_classe%3A_segons%2C_password 2026-08-30T03:15:18Z Historial de revisió per a aquesta pàgina del wiki MediaWiki 1.34.2 http://wiki.joanillo.org/index.php?title=M06UF3Q1._Exercicis_de_classe:_segons,_password&diff=297982&oldid=prev 2021-11-16T17:08:51Z

<p><span dir="auto"><span class="autocomment">Exercici 2: validació del password</span></span></p> <table class="diff diff-contentalign-left" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="ca"> <td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Versió més antiga</td> <td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Revisió del 17:08, 16 nov 2021</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l20" >Línia 20:</td> <td colspan="2" class="diff-lineno">Línia 20:</td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*es permet el caràcter _ (guió de subratllat), però no al principi del password.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*es permet el caràcter _ (guió de subratllat), però no al principi del password.</div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Tasca''': faràs una caixa de text (pot formar part d'un formulari o no) i validaràs amb l'event ''change'' si el password és correcte o no. Mostraràs la informació amb un ''label'' situat just al costat de la caixa de text (en la mateixa línia). Amb blau o amb vermell, mostraràs la informació ''password vàlid'' o ''password invàlid''.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Tasca''': faràs una caixa de text (pot formar part d'un formulari o no) i validaràs amb l'event ''change'' si el password és correcte o no. Mostraràs la informació amb un ''label'' situat just al costat de la caixa de text (en la mateixa línia). Amb blau o amb vermell, mostraràs la informació ''password vàlid'' o ''password invàlid''.</div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">L'expressió regular és:</ins></div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;pre&gt;</ins></div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&gt; re = /^[^_][A-Za-z_]{8,}?/;</ins></div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&gt; console.log(re.test('abs_ASDERre'));</ins></div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">true</ins></div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&gt; console.log(re.test('abs_ASDERregjgjh'));</ins></div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">true</ins></div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&gt; console.log(re.test('_abs_ASDERregjgjh'));</ins></div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">false</ins></div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;/pre&gt;</ins></div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=Entrega=</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=Entrega=</div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Entrega al Classroom, en format pdf o google docs, dels codis generats i dels resultats obtinguts. Captures de pantalla.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Entrega al Classroom, en format pdf o google docs, dels codis generats i dels resultats obtinguts. Captures de pantalla.</div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{Autor}}, novembre 2021</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{Autor}}, novembre 2021</div></td></tr> </table>

Joan http://wiki.joanillo.org/index.php?title=M06UF3Q1._Exercicis_de_classe:_segons,_password&diff=297929&oldid=prev 2021-11-11T19:19:55Z

<p>Es crea la pàgina amb «=Introducció= Hem començat la teoria del DOM. A partir del que s&#039;ha vist a la classe d&#039;avui, faràs un parell d&#039;exercicis. =Tasques a realitzar= ==Exercici 1: segons...».</p> <p><b>Pàgina nova</b></p><div>=Introducció=<br /> Hem començat la teoria del DOM. A partir del que s'ha vist a la classe d'avui, faràs un parell d'exercicis.<br /> =Tasques a realitzar=<br /> ==Exercici 1: segons mòdul 10==<br /> Ja saps de la UF1 com accedir als segons de la funció Date(), com actualitzar els segons cada segon amb un setInterval().<br /> <br /> El mòdul (operador %) d'un número és el residu de la divisió. Per exemple, si ara són les 20:12:26 segons, podem dividir els segons per 10 (26 / 10) i dóna 2 i en sobren 6. El residu és el 6.<br /> <br /> Si dividim un número entre 10, el residu anirà del 0 al 9. <br /> <br /> '''Tasca''':<br /> *genera (o cerca) les imatges 0.jpg, 1.jpg, ..., 9.jpg (ben grosses, que ocupin bona part de la pantalla)<br /> *pinta la primera imatge (''0.jpg'') al mig del teu document web<br /> *actualitza la imatge segons el valor del residu. Has d'accedir a la propietat ''src'' de l'objecte que representa la imatge en el document html.<br /> <br /> ==Exercici 2: validació del password==<br /> Regles del password (expressió regular):<br /> *mínim 8 caràcters<br /> *majúscules i minúscules<br /> *es permet el caràcter _ (guió de subratllat), però no al principi del password.<br /> '''Tasca''': faràs una caixa de text (pot formar part d'un formulari o no) i validaràs amb l'event ''change'' si el password és correcte o no. Mostraràs la informació amb un ''label'' situat just al costat de la caixa de text (en la mateixa línia). Amb blau o amb vermell, mostraràs la informació ''password vàlid'' o ''password invàlid''.<br /> =Entrega=<br /> Entrega al Classroom, en format pdf o google docs, dels codis generats i dels resultats obtinguts. Captures de pantalla.<br /> <br /> {{Autor}}, novembre 2021</div>

Joan