Salta el contingut

DWEC UT02. Sintaxis Javascript ES6

Índex de contingut

  1. Introducció

  2. Hola món i comentaris

  3. Variables, constants i arrays

  4. Entrada i sortida en navegadors

  5. Operadors

  6. Estructures de control

  7. Estructura repetitives (Bucles)

  8. Funcions

  9. Funcions fletxa (arrow functions)

  10. Classes a Javascript

  11. Més coses interessants de Javascript ES6

  12. Introducció a la manipulació del DOM

  13. Material addicional

  14. Bibliografia

  15. Autors (en ordre alfabètic)

1. Introducció

Javascript és un llenguatge de programació que inicialment va néixer com un llenguatge que permetia executar codi al nostre navegador (client), ampliant la funcionalitat dels nostres llocs web.

Una de les versions més esteses de Javascript modern, és la anomenada per molts Javascript ES6 (ECMAScript 6), també anomenat ECMAScript 2015 o fins i tot per alguns anomenat directament Javascript 6. En crear aquesta petita guia ens hem basat en aquesta versió. Si ja saps Javascript però vols conèixer novetats de Javascript ES6, et recomanem aquest curs https://didacticode.com/curso/curso-javascript-es6/

Actualment aquesta és una de les seves principals funcions, però atesa la seva popularitat el llenguatge ha estat portat a altres àmbits, entre els quals destaca el popular NodeJS https://nodejs.org/ que permet l'execució de Javascript com a llenguatge escriptori i llenguatge servidor.

Tot i que en aquest mòdul ens centrem en l'execució de Javascript al navegador, l'après pot ser utilitzat per a altres implementacions de Javascript.

2. Hola món i comentaris

Per afegir JavaScript es fa servir l'etiqueta SCRIPT.

Aquest pot estar en qualsevol lloc de la pàgina. El codi s'executa en el lloc on es troba de forma seqüencial a com el navegador el va trobant.

<script LANGUAGE="JavaScript">
    Aquí va el codi 
    //Això és un comentari a Javascript d'una línia
</script>

A Javascript els comentaris es poden fer amb // per a una línia i amb / / per a diverses línies.

Així mateix des de Javascript és possible escriure missatges a la consola de desenvolupament mitjançant l'ordre console.log(text).

Aquest exemple podria ser un petit hola món que en executar-se es mostrarà a la consola de desenvolupament. Exemple amb "console.log" i comentari multilínia.

<script LANGUAGE="JavaScript">
    console.log("Hola Món");
    /* Això és un comentari
    en Javascript multilínia*/
</script>

Una altra via per mostrar informació a l'usuari des d'una finestra, és el comandament "alert(text)".

<script LANGUAGE="JavaScript">
    alert("Hola Món");
</script>

Hi ha una forma molt més pràctica i ordenada d'usar codi Javascript. Es poden incloure un o diversos fitxers amb codi Javascript en el nostre document HTML. Se'n pot incloure tants com es desitja. Aquesta és la forma més adequada per treballar amb codi Javascript.

Un exemple d'inclusió de fitxers.

<script type="text/javascript" src={"rutaDelArxiu1.js"}>
<script type="text/javascript" src={"rutaDelArxiu2.js"}>
<script type="text/javascript" src={"rutaDelArxiu3.js"}>
<script type="text/javascript" src={"rutaDelArxiu4.js"}>

3. Variables, constants i arrays

En aquest punt parlarem de variables, constants i arrays. Abans de començar, comentar que és recomanable mantenir un estil de nomenament de variables. Aquí un enllaç sobre formes de nomenar variables:

https://medium.com/@alonsus91/convenci%C3%B3n-de-nombres-desde-el-camelcase-hasta-el-kebab-case-787e56d6d023

Durant el curs, farem servir l'estil "CamelCase" https://es.wikipedia.org/wiki/Camel_case

3.1 Àmbit de variables i constants

Abans de començar, vam parlar de l'àmbit de variables (també anomenat "scope" en anglès). L'àmbit de variables en un llenguatge de programació indica en quins llocs del programa pot ser accedida una variable/constant. En comentar cadascun dels tipus, definirem en quin àmbit existeixen.

3.2 Variables

Les variables són elements del llenguatge que permeten emmagatzemar diferents valors en cada moment. Es pot emmagatzemar un valor en una variable i consultar aquest valor posteriorment. També podem modificar el seu contingut sempre que vulguem.

Per declarar les variables a JavaScript podem utilitzar let o var, segons l'àmbit on vulguem que sigui accessible.

  • let: let permet declarar una variable que sigui accessible únicament dins del bloc on s'ha declarat (anomenem bloc a l'espai delimitat per { }).
  • var: var permet declarar una variable que sigui accessible per tots els llocs de la funció on ha estat declarada. Si una variable amb var es declara fora de qualsevol funció, l'àmbit d'aquesta són totes les funcions del codi.
  • Variables sense declarar: Javascript ens permet usar variables no declarades. Si fem això, serà equivalent a declarar-les amb var fora del codi, és a dir, seran variables accessibles per qualsevol funció.
function exemple() {
    exemple = 3;  //Equival a declarar-la fora de la funciocom a var
    if (exemple === 3) {
        var variable1 = 1;
        let variable2 = 2;
    }
    console.log(variable1);   // variable1 existeix aquí
    console.log(variable2);   // variable2 no existeix aquí
}

📖 Important

En general, recomanem usar let. Hauries de tenir una bona raó per fer servir var, ja que el seu ús és perillós ja que podria modificar-se una variable des d'un lloc que no controls per accident. Aquests problemes no ocorren únicament a Javascript, sinó en altres llenguatges i poden fer que el teu programa sigui complicat de depurar.

3.3 Tipus de dades

Els principals tipus de dades que pot contenir variables a Javascript són:

  • Numèrics (tipus "number"): pot contenir qualsevol tipus de nombre real (0.3, 1.7, 2.9) o sencer (5, 3, -1).
  • Enters grans (tipus "bigint"): poden contenir enters amb valors superiors a 2^53 -1. Es poden nomenclar escrivint una lletra "n" al final de l'enter. No es poden utilitzar amb la majoria d'operadors matemàtics de Javascript.
  • Booleans (tipus "boolean") : pot contenir un dels següents valors: true, false, 1 i 0.
  • Cadenes (tipus "string"): qualsevol combinació de caràcters (lletres, números, signes especials i espais). Les cadenes es delimiten mitjançant cometes dobles o simples ("Lolo","lalO"). Per concatenar cadenes es pot fer servir l'operador "+".

El tipus d'una variable es pot comprovar usant l'estructura typeof variable ==="tipus".

let edat = 23, nova_edat, increment = 4;
const nom="Rosa García"; 
console.log(typeof edat=== "number");
nova_edat = edat + increment;
console.log(nom+ " després de "+increment +" anys tindrà "+ nova_edat);

Així mateix existeixen altres tipus que Javascript considera primitius: "undefined", "null", "symbol", "object" i "function".

Tots els valors que NO són d'un tipus bàsic són considerats objectes: arrays, funcions, valors compostos, etc. Aquesta distinció és molt important perquè els valors primitius i els valors objectes es comporten de diferent forma quan són assignats i quan són passats com a paràmetre a una funció.

Més informació a https://developer.mozilla.org/es/docs/Web/JavaScript/Data_structures

3.4 Coerció

Javascript és un llenguatge de tipat tou (és a dir, en declarar una variable no se li assigna un tipus), tot i que internament Javascript si manegi tipus de dades.

En determinats moments, resulta necessari convertir un valor d'un tipus a un altre. Això en JS s'anomena "coerció", i pot ocórrer de forma implícita o podem forçar-ho de forma explícita.

Per exemple

let numero = 5;
console.log(numero);

En aquest codi, ocorre una coerció implícita de número (que és de tipus number) a un tipus string, de manera que pot ser imprès per consola. Podríem realitzar la conversió de forma explícita de la manera següent:

console.log(numero.toString());

Les coercions implícites ocorren molt sovint en JS, encara que moltes vegades no en siguem conscients. Resulta molt important entendre com funcionen per poder deduir quin serà el resultat d'una comparació.

let a = "2", b = 5;
console.log( typeof a + " " + typeof b); // string number
console.log( a + b );  //ens mostra 15

En els llenguatges de tipat dur (per exemple, Java) se'ns prohibeix realitzar operacions entre diferents tipus de dades. No obstant això, Javascript, no fa això, ja que permet operar entre diferents tipus, seguint una sèrie de regles:

  • Javascript té l'operador === i !=== per realitzar comparacions estrictes, però no posseeix aquests operadors per a desigualtats (>, <, >=, <=).

  • Si és possible, JS prefereix fer coercions a tipus number per sobre d'altres tipus bàsics. Per exemple, l'expressió ("15" < 100) es resoldrà com a true perquè JS canviarà "15", de tipus string, per 15 de tipus number.

    • Tingues en compte que si converteixes "15" a string, en comparar-ho amb "100" l'expressió es resoldria com a false.

  • A l'hora de fer coerció a boolean, els següents valors es convertiran en false: undefined, null, 0, "", NaN. La resta de valors es convertiran en true.

Exemple coerció a number . 

// <, <=, >, <= també fan coercion. No existeix >== ni <==
let arr = [ "1", "10", "100", "1000"];
for (let i = 0; i < arr.length && arr[i] < 500; i++) {
    console.log(i);
} // 0,1,2

Exemple on no es fa coerció.

var x = "10";
var i = "9";
console.log(x < i); // true, tots dos són String i els compara com a cadena

Exemple de coerció amb undefined

let altura;  // variable no definida
console.log(altura ? true : false); // En no estar definit, false

Interessant:

En realitzar comparacions, si fas servir == o != per comparar les dades, Javascript realitza coerció. Si vols que la comparació no converteixi tipus i només sigui certa si són del mateix tipus, has de fer servir === o !==. Aquesta és una bona pràctica molt recomanada perquè aquestes conversions no ens juguin males passades.

Per a més informació https://www.etnassoft.com/2011/04/06/coercion-de-datos-en-javascript/

3.5 Arrays

Un array (també anomenat vector o arranjament) és una variable que conté diversos valors. Ho creiem simplement amb "[]" o amb "new Array()" o inicialitzant els elements. Podem referenciar els elements d'un vector indicant la seva posició.

Els arrays posseeixen una propietat anomenada "length" que podem utilitzar per conèixer el nombre d'elements del vector.

// Array definit 1 a 1
let elMeuVector=[]; // let elMeuVector=new Array(); és equivalent 
elMeuVector[0]=22;
elMeuVector[1]=12;
elMeuVector[2]=33;
// Array definit en una línia inicialitzant elements
let unltreVector=[1,2,"Cancamusa"];  // Valors dins del vector
console.log(elAltreVector[1]);
console.log(unAltreVector[2]);
console.log(elMeuVector + " "+elMeuVector.length );  // vector i mida
// Matriu bidimensional 5x4 declarada sense omplir
// Per saber més de map, mirar seccion de funcions fletxa
let vectorBi = new Array(5).fill().map(x => new Array(4));
// Un altre vector bidimensional 3x5, farcit de zeros
let unAltreVectorBi = [... Array(3)].map(x=>Array(5).fill(0));

3.6 Clonant arrays (i objectes)

Els arrays a Javascript internament emmagatzemen referències on està allotjat cada objecte en memòria, per la qual cosa copiar un array no és tan simple com fer elMeuVector=elMeuAltreVector.

A Javascript ES6, es pot fer una còpia senzilla dels valors d'un vector unidimensional així:

let elMeuVector= { ... elMeuAltreVector };

Aquesta còpia només funciona amb arrays unidimensionals, ja que amb multidimensionals, només copiarà les referències de memòria de cadascun d'aquests.

Es poden fer còpies completes amb mètodes com aquest, que es basa a convertir el vector a JSON i tornar a obtenir-lo des de JSON:

let elMeuVectorMultidimensional = JSON.parse(JSON.stringify(elMeuAltreVectorMultidimensional));

Més informació a https://www.samanthaming.com/tidbits/70-3-ways-to-clone-objects/

3.7 Conversions entre tipus

Javascript no defineix explícitament el tipus de dades de les seves variables. Segons s'emmagatzemen, poden ser cadenes (Entre Comillas), sencers (sense part decimal) o decimals (amb part decimal).

Elements com la funció "prompt" per llegir de teclat amb una finestra emergent del navegador, llegeixen els elements sempre com a cadena. Per a aquests casos i altres, mereix la pena usar funcions de conversió de dades.

let num ="100";     // És una cadena
let num2="100.13";  // És una cadena
let num3=11;        // És un sencer
let n=parseInt(num);// Emmagatzema un sencer. Si hi hagués hagut part decimal l'hagués truncat
let n2 =parseFloat(num);    // Emmagatzema un decimal
let n3 =num3.toString();    // Emmagatzema una cadena

3.8 Constants

Les constants són elements que permeten emmagatzemar un valor, però aquest valor un cop emmagatzemat és invariable (roman constant). Per declarar constants s'utilitza la instrucció "const". Solen ser útils per definir dades constants, com el número PI, el número d'Euler, etc...

El seu àmbit és el mateix que el de let, és a dir, només són accessibles en el bloc que s'han declarat.

const PI = 3.1416;
console.log(PI); 
PI = 3;  // Això falla

Tot i que resulta possible definir arrays i objectes usant const, no és recomanable fer-ho, ja que és possible que el seu ús no sigui el que pensem.

Per exemple, en declarar un array/objecte, realment el que passa és que la variable emmagatzema la direcció de memòria de l'objecte/array. Si ho declarem fent servir const, el que farem és que no es pugui canviar aquesta direcció de memòria, però ens permetrà canviar els seus valors.

const elMeuVector=[1,2,3];
console.log(elMeuVector[0]);    // Mostra el valor 1
elMeuVector[0]=4;
console.log(elMeuVector[0]);    // Mostra el valor 4
elMeuVector=[];  // Això falla

3.9 Mode estricte use strict

Javascript ES6 incorpora l'anomenat "mode estricte". Si en algun lloc del codi s'indica la sentència use strict indica que aquest codi s'executarà en mode estricte:

  • Escriure use strict fora de qualsevol funció afecta tot el codi.
  • Escriure use strict dins d'una funció afecta aquesta funció.

Entre les principals característiques d'use strict hem d'obligar que totes les variables siguin declarades.

use strict és ignorat per versions anteriors de Javascript, en prendre'l com una simple declaració de cadena.

Les principals característiques d'use strict són:

  • No permet usar variables/objectes no declarats (els objectes són variables).
  • No permet eliminar (usant delete) variables/objectes/funcions.
  • No permet noms duplicats de paràmetres en funcions.
  • No permet escriure en propietats d'objectes definides com a només lectura.
  • Evita que determinades paraules reservades siguin usades com a variables (eval, arguments, this, etc...)

Exemple 1:

"use strict"; 
pi = 3.14;        // Dona error
funcioProva();

function funcioProva() {
    piBIS = 3.14;    // Dona error
}

Exemple 2:

pi = 3.14;  // Dona error, use strict només s'aplica a la funció
funcioProva();

function funcioProva() {
    "use strict";
    piBIS = 3.14;    // Dona error
}

4. Entrada i sortida en navegadors

4.1 alert

El mètode alert() permet mostrar a l'usuari informació literal o el contingut de variables en una finestra independent. La finestra contindrà la informació a mostrar i el botó Acceptar.

alert("Hola món");

4.2 console.log

El mètode console.log permet mostrar informació a la consola de desenvolupament. En versions de Javascript d'escriptori tipus NodeJS, permet mostrar text "per pantalla".

console.log("Un altre hola món");

4.3 confirm

A través del mètode confirm() s'activa un quadre de diàleg que conté els botons Acceptar i Cancel·lar. Quan l'usuari pitja el botó Acceptar, aquest mètode retorna el valor true; Cancel·lar retorna el valor false. Amb ajuda d'aquest mètode l'usuari pot decidir sobre preguntes concretes i influir d'aquesta manera directament a la pàgina.

let resposta; 
resposta=confirm ("Desitja cancel·lar la subscripció?");
alert("Vostè ha contestat que "+resposta);

4.4 prompt

El mètode prompt() obre un quadre de diàleg en pantalla en què es demana a l'usuari que introdueixi alguna dada. Si es polsa el botó Cancel·lar, el valor de devolució és false/null. Polsant en Acceptar s'obté el valor true i la cadena de caràcters introduïda es guarda per al seu posterior processament.

let provincia; 
provincia = prompt("Introdueixi la província","Murcia");
alert("Vostè ha introduït la següent informació "+provincia);
console.log("Operació realitzada amb èxit");

5. Operadors

Combinant variables i valors, es poden formular expressions més complexes. Les expressions són una part clau en la creació de programes. Per formular expressions utilitzem els anomenats operadors. Passem a comentar els principals operadors de Javascript.

5.1 Operadors d'assignació

Els operadors d'assignació s'utilitzen per assignar valors a les variables. Alguns d'ells, a més d'assignar el valor, també inclouen operacions (Exemple += assigna i suma).

Operador Descripció
= Assigna a la variable de la part esquerra el valor de la part dreta.
+= Suma els operands esquerre i dret i assigna el resultat a l'operant esquerre.
-= Resta l'operant dret de l'operant esquerre i assigna el resultat a l'operant esquerre.
*= Multiplica ambdós operands i assigna el resultat a l'operant esquerre.
/= Divideix ambdós operands i assigna el resultat a l'operant esquerre. 
let num1 = 3;
let num2 = 5; 
num2 += num1; 
num2 -= num1; 
num2 *= num1; 
num2 = num1; 
num2 %= num1;

5.2 Operadors aritmètics

Els operadors aritmètics s'utilitzen per realitzar càlculs aritmètics.

Operador Descripció
+ Suma.
- Resta.
* Multiplicació.
/ Divisió.
% Calcula la resta d'una divisió sencera.

A més d'aquests operadors, també hi ha operadors aritmètics unitaris: increment (++), disminució (--) i la negació unitària (-).

Els operadors d'increment i disminució poden estar tant davant com darrere d'una variable, amb diferents matisos en la seva execució. Aquests operadors augmenten o disminueixen en 1, respectivament, el valor d'una variable.

Operador Descripció (Suposant x=5)
y = + + x Primer l'increment i després l'assignació. x = 6, i = 6.
y = x + + Primer l'assignació i després l'increment. x = 6, i = 5.
y = --x Primer el decrement i després l'assignació. x = 4, i = 4.
i = x-- Primer l'assignació i després el decrement x = 4, i = 5.
i =-x S'assigna a la variable "i" el valor negatiu de "x", però el valor de la variable "x" no varia. x = 5, y = -5. 
let num1 = 5, num2 = 8,resultat1, resultat2; 
resultat1 =((num1 + num2)*200)/100; 
resultat2 = resultat1%3; 
resultat1 = ++num1; 
resultat2 = num2++;
resultat1 =--num1; 
resultat2 =num2--; 
resultat1 =-resultat2;

5.3 Operadors de comparació

Operadors utilitzats per comparar dos valors entre si. Com a valor de retorn s'obté sempre un valor booleà: true o false.

Operador Descripció
=== Compara dos elements, incloent-hi el seu tipus intern. Si són de diferent tipus, no realitza conversió i retorna false ja que sempre els considera diferents. Ús recomanat.
!== Compara dos elements, incloent-hi el seu tipus intern. Si són de diferent tipus, no realitza conversió i retorna true ja que sempre els considera diferents. Ús recomanat.
== Retorna el valor true quan els dos operands són iguals. Si els elements són de diferents tipus, realitza una conversió. No està recomanat el seu ús.
!= Retorna el valor true quan els dos operands són diferents. Si els elements són de diferents tipus, realitza una conversió. No està recomanat el seu ús.
> Retorna el valor true quan l'operant de l'esquerra és més gran que el de la dreta.
< Retorna el valor true quan l'operant de la dreta és menor que el de l'esquerra.
>= Retorna el valor true quan l'operant de l'esquerra és major o igual que el de la dreta.
<= Retorna el valor true quan l'operant de la dreta és menor o igual que el de l'esquerra. 
let a = 4; 
b = 5,c =" 5";
console.log("El resultat de l'expressió 'a==c' és igual a "+(a==c));
console.log("El resultat de l'expressió 'a===c' és igual a "+(a===c));
console.log("El resultat de l'expressió 'a!=c' és igual a "+(a!=c));
console.log("El resultat de l'expressió 'a!==c' és igual a "+(a!==c));
console.log("El resultat de l'expressió 'a==b' és igual a "+(a==b));
console.log("El resultat de l'expressió 'a!=b' és igual a "+(a!=b));
console.log("El resultat de l'expressió 'a>b' és igual a "+(a>b));
console.log("El resultat de l'expressió 'a<b' és igual a "+(a<b));
console.log("El resultat de l'expressió 'a>=b' és igual a "+(a>=b));
console.log("El resultat de l'expressió 'a<=b' és igual a "+(a<=b));

5.4 Operadors lògics

Els operadors lògics s'utilitzen per al processament dels valors booleans. Al seu torn el valor que retornen també és booleà: true o false.

Operador Descripció
&& I "lògica". El valor de devolució és true quan tots dos operands són veritables.
|| O "lògica". El valor de devolució és true quan algun dels operands és veritable o ho són tots dos.
! No "lògic". Si el valor és true, retorna false i si el valor és false, retorna true.

Es mostra el resultat de diferents operacions realitzades amb operadors lògics. (En l'exemple es fa servir directament els valore true i false en lloc de variables).

console.log( "El resultat de l'expressió 'false&&false' és igual a " +( false && false ));
console.log( "El resultat de l'expressió 'false&&true' és igual a " +( false && true ));
console.log( "El resultat de l'expressió 'true&&false' és igual a " +( true && false ));
console.log( "El resultat de l'expressió 'true&&true' és igual a " +( true && true ));
console.log( "El resultat de l'expressió 'false||false' és igual a " +( false || false ));
console.log( "El resultat de l'expressió 'false||true' és igual a " +( false || true ));
console.log( "El resultat de l'expressió 'true||false' és igual a " +( true || false ));
console.log( "El resultat de l'expressió 'true||true' és igual a " +( true || true ));
console.log( "El resultat de l'expressió '!false' és igual a " +(! false ));

Info

Per saber més de comparadors i expressions, pots consultar:

https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Expressions_and_Operators

6. Estructures de control

6.1 Instruccions if/else

Per controlar el flux d'informació en els programes JavaScript existeixen una sèrie d'estructures condicionals i bucles que permeten alterar l'ordre seqüencial d'execució. Aquestes són les instruccions if i else.

La instrucció if permet l'execució d'un bloc o un altre d'instruccions en funció d'una condició.

Sintaxi

if (condició) {
    // bloc d'instruccions que s'executen si la condició es compleix
}
    else {
    // bloc d'instruccions que s'executen si la condició no es compleix
}

Les claus només són obligatòries quan hi hagi diverses instruccions seguides pertanyents a la ramificació. Si no poses claus, l'if s'aplicarà únicament a la següent instrucció.

Pot existir una instrucció if que no contingui la part else. En aquest cas, s'executaran una sèrie d'ordres si es compleix la condició i si això no és així, es continuaria amb les ordres que estan a continuació del bloc if. Exemples d'ús:

let diaSetm;
diaSetm = prompt("Introdueix el dia de la setmana ", "");
if (diaSetm === "diumenge") {
    console.log("Avui és festiu");
}   // Al no tenir {}, és un "bloc d'una instrucció"
    console.log("Avui no és diumenge, a treballar!!");

Un altre exemple

let edatAina,edatLluis; 
// Fem servir parseInt per convertir a enter
edatAina=parseInt(prompt("Introdueix l'edat d'Aina",""));
edatLluis=parseInt(prompt("Introdueix l'edat de Lluis",""));
if (edatAina > edatLluis) {
    console.log("Aina es major que en Lluis.");
    console.log("Aina té "+edatAina+" anys i Lluis " + edatLluis);
} else {
    console.log("Aina es menor o de igual edat que en Lluis.");    
    console.log("Aina té "+edatAina+" anys i Lluis " + edatLluis);
}

6.2 Ramificacions niuades

Per a les condicions ramificades més complicades, sovint s'utilitzen les ramificacions niuades. S'hi defineixen consultes if dins d'altres consultes if, per exemple:

let edatAina,edadLluis;
// Convertirem a sencer les cadenes
edatAina = parseInt(prompt("Introdueix l'edat de n'Aina",""));
edatLluis = parseInt(prompt("Introdueix l'edat de'n Luis",""));
if (edatAina > edatLluis) {
    console.log("Aina es major que Lluis.");
} else {
    if (edatAina<edatLluis) {
        console.log("Aina es menor que Lluis.");
    } else {
        console.log("Aina té la mateixa edat que en Lluis.");
    }
}
console.log("Aina té " + edatAina + " anys i Lluis "+ edatLluis);

7. Estructura repetitives (Bucles)

7.1 Bucle for

Quan l'execució d'un programa arriba a un bucle for:

  • El primer que fa és executar la "Inicialització de l'índex", que només s'executa una vegada.
  • A continuació analitza la condició de prova i si aquesta es compleix executa les instruccions del bucle.
  • Quan finalitza l'execució de les instruccions del bucle es realitza la modificació de l'índex, es retorna a la capçalera del bucle for i es realitza de nou la condició de prova.
  • Si la condició es compleix s'executen les instruccions i si no es compleix l'execució continua en les línies de codi que segueixen posteriors al bucle.

Sintaxi

for (Inicialitzacio índex; Condició de prova; Modificació índex) {
    // ...  instruccions ...
}

Exemple: números parells del 2 al 30

for (i=2; i <= 30; i+=2) { 
    console.log(i);
}
console.log("S'han escrit els números parells del 2 al 30");
Exemple: Escriu les potències de 2 fins a 3000

let aux = 1;
for (i=2; i <= 3000; i*=2) {
    console.log("2 elevat a " + aux + " és igual a " + i);
    aux++;
}
console.log("S'han escrit les potències de 2 menors de 3000");

7.2 Bucle while

Amb el bucle while es poden executar un grup d'instruccions mentre es compleixi una condició.

  • Si la condició mai es compleix, aleshores tampoc s'executa cap instrucció.
  • Si la condició es compleix sempre, ens veurem immersos en el problema dels bucles infinits, que poden arribar a col·lapsar el navegador, o fins i tot l'ordinador.
    • Per aquesta raó és molt important que la condició s'hagi de deixar de complir en algun moment per evitar bucles infinits.

Sintaxi

while (condició) {
    // ... instruccions...
}
| | | :---- |

Exemple: Escriu els números parells de 0 a 30

let i = 0;
while (i<=30) {
    console.log(i);
    i = i + 2;
}
console.log("Ja s'han mostrat els números parells del 2 al 30");

Exemple: Pregunta una clau fins que es correspongui amb una donada.

let auxclau="";
while (auxclau!="bunyol"){ 
    auxclau=prompt("introdueix la clau ","clauSecreta")
}
console.log("Has encertat la clau");

7.3 Bucle do-while

La diferència del bucle do-while davant el bucle while rau en el moment en què es comprova la condició: el bucle do-while no la comprova fins al final, és a dir, després del cos del bucle, cosa que significa que el bucle do-while es recorrerà, una vegada, com a mínim, encara que no es compleixi la condició.

Sintaxi

do {
    // ... instruccions...
} while(condicio);

Exemple: Preguntar per una clau fins que s'introdueixi la correcta

let auxclau;
do { 
    auxclau=prompt("introdueix la clau ","bunyol")
} while (auxclau!=="Aquestaeslaclau")
console.log("Has encertat la clau");

7.4 Instruccions BREAK i CONTINUE

En els bucles for, while i do-while es poden utilitzar les instruccions break i continue per modificar el comportament del bucle.

La instrucció "break" dins d'un bucle fa que aquest s'interrompi immediatament, tot i que no s'hagi executat encara el bucle complet. En arribar la instrucció, el programa es continua desenvolupant immediatament a continuació del final del bucle.

Exemple: Pregunta per la clau i permetre tres respostes incorrectes

let auxclau=true;
let numvegades = 0;
// Mentre no introdueixi la clau i no es posi Cancelar
while (auxclau !== "anònim" && auxclau) { 
    auxclau=prompt("Introdueix la clau ","");
    numvegades ++;
    if (numvegades === 3) 
        break;}
if (auxclau=="SuperClau") { 
    console.log("La clau és correcta");
}
else{ 
    console.log("La clave no es correcta correcta");
}

L'efecte que té la instrucció "continue" en un bucle és el de fer retornar a la seqüència d'execució a la capçalera del bucle, tornant a executar la condició o a incrementar els índexs quan sigui un bucle for. Això permet saltar-se recorreguts del bucle.

Exemple: Presenta tots els números parells del 0 al 50 excepte els que siguin múltiples de 3

let i;
for (i=2; i <= 50; i+=2){ 
    if ((i%3)===0) 
        continue;    
    console.log(i);
}

8 Funcions

Una funció és un conjunt d'instruccions que s'agrupen sota un nom de funció. S'executa només quan és cridada pel seu nom en el codi del programa. La trucada provoca l'execució de les ordres que conté.

Les funcions són molt importants per diversos motius:

  • Ajuden a estructurar els programes per fer-los el seu codi més comprensible i més fàcil de modificar.
  • Permeten repetir l'execució d'un conjunt d'ordres totes les vegades que sigui necessari sense necessitat d'escriure de nou les instruccions.

Una funció consta de les parts bàsiques següents:

  • Un nom de funció.
  • Els paràmetres passats a la funció separats per comes i entre parèntesis.
  • Les claus d'inici i final de la funció.
  • Des de Javascript ES6, es poden definir valors per defecte per als paràmetres.

Sintaxi de la definició d'una funció

function nomfuncio(paràmetre1, paràmetre2=valorPorDefecte...) {
    // instruccions si la funció retorna algun valor hi afegim:
return valor;
}

Sintaxi de la crida a una funció

// La funció s'executa sempre que s'executi la sentència.
valorRetornat=nomfuncio(paràm1, paràm2...);

És important entendre la diferència entre definir una funció i anomenar-la:

  • Definir una funció és simplement especificar el seu nom i definir quines accions realitzarà en el moment en què sigui invocada, mitjançant la paraula reservada function.
  • Per cridar a una funció cal especificar el seu nom i introduir els paràmetres que volem que utilitzi. Aquesta trucada es pot efectuar en una línia d'ordres o bé a la dreta d'una sentència d'assignació en el cas que la funció retorni algun valor a causa de l'ús de la instrucció return.

La definició d'una funció es pot realitzar en qualsevol lloc del programa, però es recomana fer-ho al principi del codi o en un fitxer "js" que contingui funcions.

La crida a una funció es realitzarà quan sigui necessari, és a dir, quan es demani l'execució de les instruccions que hi ha dins d'ella.

Exemple: funcions que retorna la suma de dos valors que es passen per paràmetres i que escriuen el nom del professor.

// Definicions de les funcions
function suma (a,b){
    // Aquesta funció retorna un valor
    return a+b;
}
// Aquesta funció mostra un text, però no retorna un valor
function profe (){
    console.log("El professor és molt bo");
    // VIUS: això és un exemple, però rara vegada es realitza en una funció real
}
// Codi que s'executa
let op1=5, op2=25;
let resultado;
// Cridada a funció
resultat=suma(op1,op2);
// Cridada a funció
console.log (op1+"+"+op2+"="+resultat);
// Cridada a funció
profe()

Atenció:

Recordeu que dins de les funcions rara vegada s'utilitzen funcions d'entrada/sortida. El 99.9% de les vegades simplement processen l'entrada per paràmetres i retornen un valor.

Des de Javascript ES6, les funcions suporten els anomenats paràmetres REST.

Els paràmetres REST són un conjunt de paràmetres que s'emmagatzemen com a vector en un "paràmetre final" nomenclat amb ... nomParametre. Això ens permet manejar la funció sense haver de controlar el nom de paràmetres amb els quals aquesta és anomenada.

Important: només l'últim paràmetre pot ser REST.

Exemple:

function provaParREST(a, b, ...mesParametres) {
    console.log("a: "+a+" b: "+ b + " altres: " + mesParametres);
}
provaParREST("param1", "param1", "param3", "param4", "param5")

Info

Per saber més dels paràmetres REST

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Funciones/parametros_rest

9 Funcions fletxa (arrow functions)

Una funció fletxa (arrow function) és una alternativa compacta a l'ús de funcions tradicionals.

  • Aquest tipus de funcions tenen les seves limitacions i han de ser utilitzades només en alguns contextos on siguin útils.
  • No són adequades per ser utilitzades com a mètodes.

Suporta diverses formes de sintaxi, a continuació indiquem les més típiques:

  • (parametre1, parametre2, ...) => {sentencias}
  • () => {sentencias}
  • paràmetre => sentència

De vegades, són utilitzats amb la funció "map" dels arrays. Aquesta funció crea un nou vector format per l'aplicació d'una funció a cadascun dels seus elements:

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/map

També és molt útil amb la funció "redueix" dels arrays. Aquesta funció executa una "funció reductora" sobre cada element del vector, retornant un únic valor.

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduce

Exemple:

let noms = ['Biel', 'Tofol', 'Franciaina'];
console.log(noms.map(nom => nom.length));
// Mostra el vector amb els valors [5, 4, 5]
let sumaNoms= noms.reduce((acumulador, element) => {
    return acumulador + element.length;
}, 0);
// Mostra la suma de la longitud dels noms
console.log(sumaNoms);

Per saber-ne més:

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Funciones/Arrow_functions

10 Classes a Javascript

Javascript ES6 permet una millor definició de classes que en anteriors versions de Javascript.

Mitjançant la paraula reservada "class", permet definir classes, mètodes, atributs, etc...

Recorda que els objectes a Javascript es guarden com a referències de memòria. En apartats anteriors parlem de com clonar arrays i objectes.R

Exemple:

 class Punt {  
    //Constructor de la classe
    constructor ( pX , pY ){ 
        this.pX = pX;    
        this.pY = pY; 
    }  
    // Mètode estàtic per calcular distància entre dos punts
    static distancia ( a , b) { 
        const dx = a.pX - b.pX;
        const dy = a.pY - b.pY;

        return Math.sqrt ( dx * dx + dy * dy );  
    }  
    // Mètode indicat per ser usat com a getter
    get coordX() { 
        return this.pX;
    }  
    // Mètode normal
    retornaXperY () { 
        return this.pX * this.pY;  
    }
}
let p1 = new Punt( 5, 5);
let p2 = new Punt( 10, 10);
// Cridada mètode estàtic
console.log (Punt.distancia(p1, p2));
// Cridada mètode normal
console.log (p1.retornaXperY()); 
// Com que és un getter, es pot fer servir com una propietat
console.log (p1.coordX);

Per saber-ne més: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Classes

11 Més coses interessants de Javascript ES6

Aquest document pretén ser una simple guia i no podem incloure totes les novetats de Javascript ES6, però des d'aquí enllacem les més interessants per si voleu ampliar:

Aquí teniu altres referències a noves característiques de Javascript ES6

https://github.com/lukehoban/es6features

12 Introducció a la manipulació del DOM

Per tal de facilitar la realització de petits exercicis, incloem uns primers conceptes de manipulació del DOM (Document Object Model). Coneixent la id d'algun objecte HTML existent a la pàgina podem canviar les seves propietats.

Quan volem canviar una propietat d'un objecte present en el document, utilitzem el seu ID (nom únic que defineix un element) i el mètode "document.getElementById()" per accedir a l'element en si.

Exemple:

Per canviar una imatge amb id 'matrix', accedim a l'element i modifiquem la propietat src :

document.getElementById('matrix').src = "mt05.jpg";

Això es pot usar per a qualsevol propietat existent en qualsevol objecte HTML.

Una funció Javascript genèrica per canviar una imatge seria:

function canviarImatge (id, rutaImatge) {
    document.getElementById(id).src=rutaImatge;
}

13 Material addicional

[1] Curs de Git a Udacity

https://www.udacity.com/course/how-to-use-git-and-github--ud775

[2] Ús de la "Consola Web"

https://developer.mozilla.org/en-US/docs/Tools/Web_Console

14 Bibliografia

[1] Javascript Mozilla Developer https://developer.mozilla.org/es/docs/Web/JavaScript

[2] Javascript ES6 W3C https://www.w3schools.com/js/js_es6.asp

15 Autors (en ordre alfabètic)

A continuació oferim en ordre alfabètic el llistat d'autors que han fet aportacions a aquest document:

  • Folgado Galache, Laura
  • García Barea, Sergi
  • Sastre i Flexas, F. Xavier