M06 UF1A2. Teoria
Contingut
Introducció
Continuem avançant amb la sintaxi de Javascript. Hem de veure objectes, arrays, expressions regulars i moltes més coses.
Treballarem també amb tests unitaris per comprovar de forma automàtica el codi que generem amb Javascript.
Recursos
Donarem preferència al següent recurs online:
Però també farem referència constant a aquest curs online:
scripts de classe
- Fitxer:Curs javascript developer mozilla.zip (actualitzat 28/10/2021)
T9. Expressions regulars
Referència:
- https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet
- https://www.w3schools.com/jsref/jsref_obj_regexp.asp
També:
Per testejar expressions regulars:
Exemple 1
var cad = "una polla xica pica pellerica va posar sis ous";
Volem trobar les paraules que contenen ic:
var re = /ic/g; console.log(cad.match(re)); [ 'ic', 'ic', 'ic' ] console.log(cad.match(re).length); 3 //amb això podem respondre a la pregunta de quantes paraules tenen ic, però volem saber quines són aquestes paraules, que aquestes paraules compleixin un criteri: re = /\w+/g; //amb aquesta podem trobar totes les paraules cad.match(re); [ 'una', 'polla', 'xica', 'pica', 'pellerica', 'va', 'posar', 'sis', 'ous' ] //la solució és re = /\w+ic\w+/g; cad.match(re); [ 'xica', 'pica', 'pellerica' ]
Exemple 2: joc de proves complet
var reDni = /^\d{8}[A-Z]$/
console.log(reDni.test('38128574E')); //true
console.log(reDni.test('381574E')); //false
console.log(reDni.test('38128574234E')); //false
console.log(reDni.test('38128574')); //false
console.log(reDni.test('38128574EE')); //false
console.log(reDni.test('E38128574E')); //false
console.log(reDni.test('381285ddd74E')); //false
console.log(reDni.test('38128574e')); //false
Si ho posem en un script (joc_proves_complet_dni.js) funciona com un test unitari:
$ node joc_proves_complet_dni.js
Això dóna peu a parlar de tests unitaris.
Maquetar una pàgina web amb la nostra bateria d'exercicis
Aquests exercicis està bé practicar-los a la consola (nodeJS). Però recordar que el nostre objectiu és fer pàgines web. Se't proposa aquest fitxer html com a codi de partida per poder fer la teva bateria d'exercicis d'expressions regulars. Pots completar el codi formatant millor la sortida, pots posar un CSS, pots posar llistes (ul, li), etc.
fitxer practica_expressions_regulars.html:
<html>
<head>
<meta charset="utf-8" />
<title>Pràctica expressions regulars</title>
</head>
<body>
<h1>Pràctica expressions regulars</h1>
<h2>Exercici 1: Comprovar el codi postal</h2>
<div id="ex1"></div>
<h2>Exercici 2: ...</h2>
<div id="ex2"></div>
</body>
</html>
<script>
//Exercici 1: Comprovar el codi postal
let cad_res = '';
let re_cp = /^\d{5}$/;
let cp1 = '08012';
let cp2 = '0aa12';
console.log(re_cp.test(cp1));
cad_res = cp1;
cad_res += ': ' + re_cp.test(cp1);
cad_res += '<br />';
cad_res += cp2;
cad_res += ': ' + re_cp.test(cp2);
console.log(cad_res);
document.getElementById('ex1').innerHTML = cad_res;
</script>
T10. Arrays (col·leccions indexades)
creat per Joan Quintana Compte, octubre 2021
