Sintaxi del llenguatge III

De Wikijoan
Dreceres ràpides: navegació, cerca

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

Cerquem dins del capítol 1 del Quijote (http://www.elmundo.es/quijote/capitulo.html?cual=1) la paraula pero (sense utilitzar split).

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