M06 UF1A2. Teoria

De wikijoan
Salta a la navegació Salta a la cerca

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

T9. Expressions regulars

Referència:

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