Sintaxi del llenguatge III

De Wikijoan
(Diferència entre revisions)
Dreceres ràpides: navegació, cerca
(Curs 18-19)
Línia 122: Línia 122:
 
}
 
}
 
</pre>
 
</pre>
===Curs 18-19===
+
===Curs 19-20===
Cerquem dins del capítol 1 del Quijote (''http://www.elmundo.es/quijote/capitulo.html?cual=1'') la paraula ''pero'' (sense utilitzar ''split'').
+
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==
 
==Calcular el temps que triga un script a executar-se==

Revisió de 16:48, 30 set 2019

Contingut

Introducció

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

Referències

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

(a classe veurem algun d'aquests exercicis)

Mostrar la data actual amb el format dd/mm/yyyy

La manera complicada:

    var d = new Date();
    var n = d.getDate() + "/" + (parseInt(d.getMonth())+1) +"/"+ d.getFullYear();
    console.log(n);

La manera fàcil, utilitza el mètode toLocaleDateString:

    var d = new Date();
    var n = d.toLocaleDateString();
    console.log(n);

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()).

<!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>

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.

<!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>

variant: modificar el codi utilitzant substring en comptes de substr; i lastIndexOf en comptes de IndexOf.

Provar també:

var cadsplit = cad.split('ic');
console.log (cadsplit[0]);
console.log(cadsplit.length);

Solució utilitzant una funció recursiva:

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;
    }
}

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).

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);

Calcular el temps que triga un script a executar-se

<!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>

Càlcul dels decimals del número PI

Executar aquest exemple, i estudiar dins el codi la manera com es calcula el temps que triga a executar-se el script.

timeTaken=(t2.getTime()-t1.getTime())/1000;

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:

$ node calcul_pi.js 1000

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:

var args = process.argv.slice(1);
console.log("Càlcul de PI:");
console.log(args[1]);
num_decimals = parseInt(args[1]);
calcPI(num_decimals);

o millor:

var args = process.argv;
console.log("Càlcul de PI:");
console.log(args[2]);
num_decimals = parseInt(args[2]);
calcPI(num_decimals);

Si vols introduir el número de decimals pel teclat, mirar (i pr/* Càlcul dels decovar) aquest enllaç:

Exercici de classe: array d'objectes i mètode sort()

A classe hem explicat:

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

solució:

<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>


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:

Exemple:

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);

El resultat és:

BANANA,ORANGE,APPLE,MANGO 

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ó:

<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>

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


creat per Joan Quintana Compte, Octubre 2018

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines