Sintaxi del llenguatge III - Historial de revisió

Joan: /* Cercar les posicions en què apareix una cadena, de forma recursiva */

2020-10-22T18:15:58Z

Cercar les posicions en què apareix una cadena, de forma recursiva

Joan: /* Exercici de classe 19/10/2020. Sort d'un array */

2020-10-19T18:41:53Z

Exercici de classe 19/10/2020. Sort d'un array

Joan: /* Exercici de classe 19/10/2020. Sort d'un array */

2020-10-19T18:41:17Z

Exercici de classe 19/10/2020. Sort d'un array

Joan: /* Exercici de classe 19/10/2020. Sort d'un array */

2020-10-19T18:27:39Z

Exercici de classe 19/10/2020. Sort d'un array

Joan: /* Exercici de classe 14/10/2019. Sort d'un array */

2020-10-19T18:27:23Z

Exercici de classe 14/10/2019. Sort d'un array

Joan a 23:42, 17 oct 2020

2020-10-17T23:42:26Z

Joan: /* Exercici de classe 7/10/2019. Missió Apollo XI */

2019-10-14T16:50:23Z

Exercici de classe 7/10/2019. Missió Apollo XI

Pàgina nova

=Introducció=
Continuem en l'aprenentatge de la sintaxi de Javascrip. '''JS Advanced''' de W3Schools.

=Referències=
*http://www.w3schools.com/
*http://www.w3schools.com/js/js_objects.asp
*http://www.w3schools.com/js/js_numbers.asp
*http://www.w3schools.com/js/js_number_methods.asp
*http://www.w3schools.com/js/js_strings.asp
*http://www.w3schools.com/js/js_dates.asp
*http://www.w3schools.com/js/js_date_methods.asp
*http://www.w3schools.com/js/js_arrays.asp
*http://www.w3schools.com/js/js_array_methods.asp

=Desenvolupament=
Els alumnes provaran amb l'ordre proposat algun dels exemples que s'han explicat a classe, i es faran provatures per tal de consolidar els coneixements.
==Bateria d'exercicis proposats==
*http://www.w3resource.com/javascript-exercises/
(a classe veurem algun d'aquests exercicis)
==Mostrar la data actual amb el format dd/mm/yyyy==
La manera complicada:
<pre>
var d = new Date();
var n = d.getDate() + "/" + (parseInt(d.getMonth())+1) +"/"+ d.getFullYear();
console.log(n);
</pre>
La manera fàcil, utilitza el mètode '''toLocaleDateString''':
<pre>
var d = new Date();
var n = d.toLocaleDateString();
console.log(n);
</pre>

==Diferència entre el mètode .trim() i programar la funció trim()==
Els String tenen el mètode ''trim()'', que podem aplicar directament sobre l'objecte. El mateix resultat es podria aconseguir programant una funció que li passis com a argument una cadena i retorni una altra cadena (o la mateixa cadena). Aquest exemple només és per veure la diferència entre un ''mètode'' propi d'un objecte, i una ''funció''. (Evidentment, allò lògic és que per programar la funció ''trim'' utilitzarem el mètode ''.trim()'').
<pre>
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>

<script>
var cad = " cadena amb espais blancs als extrems ";
str = cad + " " + cad.length + "<br />";
str += cad.trim() + " " + cad.trim().length + "<br />";
var cad2 = trim(cad);
str += cad2 + " " + cad2.length + "<br />";
document.getElementById("demo").innerHTML = str;

function trim(s) {
return s.trim();
//return (s.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));
//una altra manera:
//return s.replace(/^\s+|\s+$/g, "");
}
</script>
</body>
</html>
</pre>

==Cercar les posicions en què apareix una cadena, de forma recursiva==
Donada una cadena, hem vist que amb ''indexOf'' i ''lastIndexOf'' pots cercar la posició primera o última d'una cadena dins d'una altra. Si vols saber totes les ocurrències, haurem de fer un bucle recursiu.
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="demo"></p>

<script>
//anem a cercar per 'ic' dins la cadena. Hi ha vàries maneres de fer-ho. Aquesta seria una
var cad = "Una polla xica, pica, pellarica, camatorta i becarica va tenir sis polls xics, pics, pellarics, camatorts i becarics. Si la polla no hagués sigut xica, pica, pellarica, camatorta i becarica, els sis polls no haguessin sigut xics, pics, pellarics, camatorts i becarics.";
var pos=0, pos_total=0;
llavor = "ic";
str = cad + "<br /><br />";
/*
//prova
pos = cad.indexOf(llavor);
cad = cad.substr(pos + llavor.length, cad.length-(pos + llavor.length));
str += cad + "<br />";

pos = cad.indexOf(llavor);
cad = cad.substr(pos + llavor.length, cad.length-(pos + llavor.length));
str += cad + "<br />";
*/
while (cad.indexOf(llavor) > 0) {
pos = cad.indexOf(llavor);
pos_total += pos;
cad = cad.substr(pos + llavor.length, cad.length-(pos + llavor.length));
str += pos_total + " " + cad + "<br />";
}

document.getElementById("demo").innerHTML = str;

</script>
</body>
</html>
</pre>
'''variant''': modificar el codi utilitzant ''substring'' en comptes de ''substr''; i ''lastIndexOf'' en comptes de ''IndexOf''.

Provar també:
<pre>
var cadsplit = cad.split('ic');
console.log (cadsplit[0]);
console.log(cadsplit.length);
</pre>

Solució utilitzant una funció recursiva:
<pre>
var text= "Una polla xica, pica, pellarica, camatorta i becarica va tenir sis polls xics, pics, pellarics, camatorts i becarics. Si la polla no hagués sigut xica, pica, pellarica, camatorta i becarica, els sis polls no haguessin sigut xics, pics, pellarics, camatorts i becarics.";

console.log(repeticions(text,"ic"))

function repeticions(text,busca){
if (text.indexOf(busca)==-1){
return 0;
} else {
return repeticions(text.substring(text.indexOf(busca)+1),busca)+1;
}
}
</pre>
===Curs 19-20===
Cerquem dins del capítol 1 del Quijote (''http://www.elmundo.es/quijote/capitulo.html?cual=1'') la paraula ''la'' (sense utilitzar ''split'').

<pre>
var quijote="En un lugar de la Mancha2, de cuyo nombre no quiero acordarme3, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor4. Una olla de algo más vaca que carnero, salpicón las más noches5, duelos y quebrantos los sábados6, lantejas los viernes7, algún palomino de añadidura los domingos8, consumían las tres partes de su hacienda9. El resto della concluían sayo de velarte10, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo11, y los días de entresemana se honraba con su vellorí de lo más fino12. Tenía en su casa una ama que pasaba de los cuarenta y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza que así ensillaba el rocín como tomaba la podadera13. Frisaba la edad de nuestro hidalgo con los cincuenta años14. Era de complexión recia, seco de carnes, enjuto de rostro15, gran madrugador y amigo de la caza. Quieren decir que tenía el sobrenombre de «Quijada», o «Quesada», que en esto hay alguna diferencia en los autores que deste caso escriben, aunque por conjeturas verisímilesII se deja entender que se llamaba «Quijana»III, 16. Pero esto importa poco a nuestro cuento: basta que en la narración dél no se salga un punto de la verdad."
/*
var num1=quijote.indexOf('la',0);
console.log(num1);
var num2=quijote.indexOf('la',num1+1);
console.log(num2);
var num3=quijote.indexOf('la',num2+1);
console.log(num3);
*/

var num=0;
do {
num=quijote.indexOf('la',num+1);
console.log(num);
}
while(num != -1);

</pre>

==Calcular el temps que triga un script a executar-se==
<pre>
<!DOCTYPE html>
<html>
<body>
<p id="lapse"></p>

<script>
time1 = new Date().getTime();
bigLoop();
time2 = new Date().getTime();
document.getElementById("lapse").innerHTML = time2-time1;
//document.getElementById("lapse").innerHTML = "El script ha trigat " + time2-time1 + " milisegons a executar-se";

function bigLoop(){
for (var i = 0; i <= 100000000; i += 1){
var j = i;
}
}

</script>
</body>
</html>
</pre>
==Càlcul dels decimals del número PI==
*http://www.trans4mind.com/personal_development/JavaScript/longnumPiMachin.htm#o2%20The%20Code
Executar aquest exemple, i estudiar dins el codi la manera com es calcula el temps que triga a executar-se el script.
<pre>
timeTaken=(t2.getTime()-t1.getTime())/1000;
</pre>

Exercici: agafar el codi de l'enllaç, i modificar-lo per tal de poder executar-lo a la consola (NodeJS).

'''solució:''' [[Fitxer:Calcul pi.zip]]

per executar:
<pre>
$ node calcul_pi.js 1000
</pre>
com pots veure en el codi, la manera de passar paràmetres en la línia de comanda és tenint en compte que existeix l'array d'arguments ''process.argv'':
<pre>
var args = process.argv.slice(1);
console.log("Càlcul de PI:");
console.log(args[1]);
num_decimals = parseInt(args[1]);
calcPI(num_decimals);
</pre>
o millor:
<pre>
var args = process.argv;
console.log("Càlcul de PI:");
console.log(args[2]);
num_decimals = parseInt(args[2]);
calcPI(num_decimals);
</pre>
Si vols introduir el número de decimals pel teclat, mirar (i pr/* Càlcul dels decovar) aquest enllaç:
*https://teamtreehouse.com/community/how-to-get-input-in-the-console-in-nodejs

==Exercici de classe: array d'objectes i mètode sort()==
A classe hem explicat:
*http://www.w3schools.com/js/js_array_sort.asp

Definir un array de persones (amb 10 elements), que tingui com a elements un objecte de tipus {nom:"",cognom:"", data_naixement:"",salari:""}

*Defineix un algorisme del mètode sort() per ordenar per salari.
*Redefineix un algorisme del mètode sort() per ordenar per data_naixement

'''solució''':
<pre>
<html>
<head>
<meta charset="utf8">
<script>
var persona = [
{nom: "Pere",
cognom: "Compte",
salari: 3200,
data_naix: "2000/02/23"},
{nom: "Maria",
cognom: "Arderiu",
salari: 3500,
data_naix: "2000/03/23"},
{nom: "Anna",
cognom: "Amigó",
salari: 1200,
data_naix: "1986/11/19"},
{nom: "Núria",
cognom: "Xandri",
salari: 3800,
data_naix: "1999/07/25"}
];
</script>
</head>
<body>
<script>
var llista = "";
console.log(persona[1].nom);
console.log(Date.parse(persona[1].data_naix));

//http://www.w3schools.com/js/js_array_sort.asp
//ordenem per salari
persona.sort(function(a, b){return b.salari - a.salari});

for (var i=0; i<persona.length; i++) {
llista += persona[i].nom + " " + persona[i].cognom + " " + persona[i].data_naix + ": " + persona[i].salari + "<br />";
console.log(persona[i].nom + " " + persona[i].cognom + " " + persona.data_naix + ": " + persona[i].salari );
}

llista += "<br />";
//ordenem per data naixement:
persona.sort(function(a, b){return Date.parse(a.data_naix) - Date.parse(b.data_naix)});

for (var i=0; i<persona.length; i++) {
llista += persona[i].nom + " " + persona[i].cognom + " " + persona[i].data_naix + ": " + persona[i].salari + "<br />";
console.log(persona[i].nom + " " + persona[i].cognom + " " + persona.data_naix + ": " + persona[i].salari );
}

document.write (llista);

</script>
</body>
</html>

</pre>

==propietat prototype==
El constructor '''prototype''' permet afegir noves propietats i mètodes als objecte String, Number, Array,....
Per exemple, si ho apliquem a un Array:
*http://www.w3schools.com/jsref/jsref_obj_array.asp
*prototype Allows you to add properties and methods to an Array object
Exemple:
*http://www.w3schools.com/jsref/jsref_prototype_array.asp

<pre>
Array.prototype.myUcase = function() {
for (i = 0; i < this.length; i++) {
this[i] = this[i].toUpperCase();
}
};

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.myUcase();
console.log(fruits);
</pre>
El resultat és:
<pre>
BANANA,ORANGE,APPLE,MANGO
</pre>
===Exercici de classe: definir un nou mètode als Strings===
Definir per als Strings un nou mètode, el mètode ''primeraMajuscula()'' que, donada una cadena, converteixi a majúscules la primera lletra de les paraules que la composa.
Per exemple, converteix la cadena ''Make a new array method that transforms array'' en ''Make A New Array Method That Transforms Array''.

Solució:
<pre>
<html>
<head>
<meta charset="utf8"></meta>
</head>
<body>
<p id="parr"></p>
<script>
var cad = "En un lugar de la Mancha";

String.prototype.primeraMajuscula = function() {
var arr=this.split(" ");
for (i=0; i<arr.length; i++) {
arr[i] = capitalizeFirstLetter(arr[i]);
console.log(arr[i]);
}
return arr.join(" ");
}

function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}

document.getElementById("parr").innerHTML = cad.primeraMajuscula();
</script>
</body>
</html>
</pre>
==trunc, round, ceil, floor==
<pre>
var x=Math.PI //3.141592...

//x.trunc() //error!

console.log(Math.trunc(x)) //3
console.log(Math.round(x)) //3
console.log(Math.ceil(x)) //4
console.log(Math.floor(x)) //3

var x=3.754354

console.log(Math.trunc(x)) //3
console.log(Math.round(x)) //4
console.log(Math.ceil(x)) //4
console.log(Math.floor(x)) //3
</pre>
==Exercici de classe 7/10/2019. Missió Apollo XI==
Calcular quan temps fa que l'home va trepitjar la Lluna:
*en anys (decimals)
*en dies (decimals)

*quin dia de la setmana era?
*quina hora local era?
*quina hora era a Cabo Cañaveral?
*Quina hora UTC era?
*Quan temps va durar el viatge (des del llançament del Saturn V fins a l'amaratge.
==Exercici de classe 14/10/2019. Sort d'un array==
Donada una llista de noms en el format
cognoms, nom, per exemple:
<pre>
Garcia Pijoan, Maria
</pre>
#Construir una llista pseudo-aleatòria de més de 50 valors (>50)
#posar-los en forma de matriu (array). Definir una funció d'ordenació de manera que la llista-array quedi ordenada pel nom.
#un cop trobem la funció, definir amb ''prototype'' el mètode ''ordenar_per_nom()''

=Entrega=
Els alumnes entregaran al Schoology tots els fitxers generats (fitxers html). S'empaquetaran tots aquests fitxers i es pujaran al Moodle dins del termini d'entrega de la pràctica.

Recorda la '''normativa''' per entregar les pràctiques al Google Classroom: [[ASIX-M10-UF2#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Google_Classroom]]

{{Autor}}, Octubre 2018
[[Categoria: Institut Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]

@@ Línia 380: / Línia 380: @@
 var alumnes = ['Agramonte Agramonte, Wineify',
-'Benítez García, Iván',
+'Parera Quintana, Jordi',
-'Bouzas Lana, Eric',
+'Reguant Garcia, Mireia',
-'Calderón Laura, Miriam Laura',
+'Rodri, Benítez, Laura',
-'Campuzano Méndez, Pol',
+'Vernet Matamala, Joan',
-'Cañal i Huerta, Amanda',
+'Aniol Bufí, Anna'
 ];

@@ Línia 374: / Línia 374: @@
 </head>
 <body>
 <p id="parr"></p>
 <script>
 var alumnes = ['Agramonte Agramonte, Wineify',
-'Parera Quintana, Jordi',
+'Benítez García, Iván',
-'Reguant Garcia, Mireia',
+'Bouzas Lana, Eric',
-'Rodri, Benítez, Laura',
+'Calderón Laura, Miriam Laura',
-'Vernet Matamala, Joan',
+'Campuzano Méndez, Pol',
-'Aniol Bufí, Anna'
+'Cañal i Huerta, Amanda',
 ];
 var alumnes_desordenat = shuffle (alumnes);
@@ Línia 419: / Línia 482: @@
 for (var i=0;i<alumnes_ordenat.length;i++) {
 	console.log(alumnes_ordenat[i]);
+}
+document.getElementById("parr").innerHTML = cad;
@@ Línia 444: / Línia 508: @@
+}
 </script>
 </body>
 </html>
 </pre>

@@ Línia 99: / Línia 99: @@
 </html>
 </pre>
-'''variant''': modificar el codi utilitzant ''substring'' en comptes de ''substr''; i ''lastIndexOf'' en comptes de ''IndexOf''.
+'''variant''': modificar el codi utilitzant ''substring'' en comptes de ''substr''; i ''lastIndexOf'' en comptes de ''IndexOf''. Provar també d'utiltizar ''slice''.
 Provar també:

@@ Línia 367: / Línia 367: @@
 #un cop trobem la funció, definir amb ''prototype'' el mètode ''ordenar_per_nom()''
-Solució:
+'''Solució''':
 <pre>
 <html>

@@ Línia 357: / Línia 357: @@
 *Quina hora UTC era?
 *Quan temps va durar el viatge (des del llançament del Saturn V fins a l'amaratge.
-==Exercici de classe 14/10/2019. Sort d'un array==
+==Exercici de classe 19/10/2020. Sort d'un array==
 Donada una llista de noms en el format
 cognoms, nom, per exemple:
@@ Línia 366: / Línia 366: @@
 #posar-los en forma de matriu (array). Definir una funció d'ordenació de manera que la llista-array quedi ordenada pel nom.
 #un cop trobem la funció, definir amb ''prototype'' el mètode ''ordenar_per_nom()''
 =Entrega=

@@ Línia 111: / Línia 111: @@
 <pre>
 var text= "Una polla xica, pica, pellarica, camatorta i becarica va tenir sis polls xics, pics, pellarics, camatorts i becarics. Si la polla no hagués sigut xica, pica, pellarica, camatorta i becarica, els sis polls no haguessin sigut xics, pics, pellarics, camatorts i becarics.";
 function repeticions(text,busca){
@@ Línia 121: / Línia 119: @@
+     }
+}
 </pre>
 ===Curs 19-20===