Diferència entre revisions de la pàgina «M06 UF1A2. Teoria»

De wikijoan
Salta a la navegació Salta a la cerca
 
(Hi ha 8 revisions intermèdies del mateix usuari que no es mostren)
Línia 9: Línia 9:
 
*https://www.w3schools.com/js/default.asp
 
*https://www.w3schools.com/js/default.asp
 
=scripts de classe=
 
=scripts de classe=
−
*[[Fitxer:Curs javascript developer mozilla.zip]]
+
*[[Fitxer:Curs javascript developer mozilla.zip]] (actualitzat 28/10/2021)
  
 
=T9. Expressions regulars=
 
=T9. Expressions regulars=
Línia 18: Línia 18:
 
També:
 
També:
 
*https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges#using_groups
 
*https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges#using_groups
 +
 +
Per testejar expressions regulars:
 +
*https://regex101.com/
 +
==Exemple 1==
 +
<pre>
 +
var cad = "una polla xica pica pellerica va posar sis ous";
 +
</pre>
 +
Volem trobar les paraules que contenen ''ic'':
 +
<pre>
 +
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' ]
 +
</pre>
 +
==Exemple 2: joc de proves complet==
 +
<pre>
 +
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
 +
</pre>
 +
Si ho posem en un script (joc_proves_complet_dni.js) funciona com un test unitari:
 +
<pre>
 +
$ node joc_proves_complet_dni.js
 +
</pre>
 +
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''':
 +
<pre>
 +
<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>
 +
</pre>
  
 
=T10. Arrays (col·leccions indexades)=
 
=T10. Arrays (col·leccions indexades)=
 
*https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Indexed_collections
 
*https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Indexed_collections
−
=T11. Treballar amb objectes=
+
 
−
*https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Working_with_Objects
 
−
=T12. Keyed collections (col·leccions amb clau)=
 
−
*https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Keyed_collections
 
−
=T13. Javascript avançat=
 
−
*Promises
 
−
*Interadors i generadors
 
−
*Javascript modules
 
 
{{Autor}}, octubre 2021
 
{{Autor}}, octubre 2021

Revisió de 15:27, 28 oct 2021

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

Obtingut de «http://wiki.joanillo.org/index.php?title=M06_UF1A2._Teoria&oldid=297855»