Diferència entre revisions de la pàgina «NF2 - Sintaxi Javascript»

Revisió del 16:05, 24 set 2013

Generalitats

La sintaxi d'un llenguatge de programació es defineix com el conjunt de regles que han de seguir-se en escriure el codi font dels programes per considerar-se com a correctes per a aquest llenguatge de programació.

La sintaxi de Javascript és molt similar a la d'altres llenguatges de programació com Java i C. Les normes bàsiques que defineixen la sintaxi de Javascript són les següents:

No es tenen en compte els espais en blanc i les noves línies: com succeeix amb XHTML, l'intèrpret de Javascript ignora qualsevol espai en blanc sobrant, per la qual cosa el codi es pot ordenar de forma adequada per entendre-ho millor (tabulant les línies, afegint espais, creant noves línies, etc.)
Es distingeixen les majúscules i minúscules: igual que succeeix amb la sintaxi de les etiquetes i elements XHTML. No obstant això, si en una pàgina XHTML s'utilitzen indistintament majúscules i minúscules, la pàgina es visualitza correctament, sent l'únic problema la no validació de la pàgina. En canvi, si en Javascript s'intercanvien majúscules i minúscules el script no funciona.
No es defineix el tipus de les variables: en crear una variable, no és necessari indicar el tipus de dada que emmagatzemarà. D'aquesta forma, una mateixa variable pot emmagatzemar diferents tipus de dades durant l'execució del script.
No és necessari acabar cada sentència amb el caràcter de punt i coma (;): en la majoria de llenguatges de programació, és obligatori acabar cada sentència amb el caràcter ;. Encara que Javascript no obliga a fer-ho, NOSALTRES seguirem la tradició d'acabar cada sentència amb el caràcter del punt i coma (;).
Es poden incloure comentaris: els comentaris s'utilitzen per afegir informació en el codi font del programa. Encara que el contingut dels comentaris no es visualitza per pantalla, si que s'envia al navegador de l'usuari juntament amb la resta del script, per la qual cosa és necessari extremar les precaucions sobre la informació inclosa en els comentaris.

Javascript defineix dos tipus de comentaris: els de una sola línia i els que ocupen diverses línies.

Els comentaris d'una sola línia es defineixen afegint dues barres obliqües (//) al principi de la línia :


// a continuació es mostra un missatge

alert("missatge de prova");

Exemple de comentari de diverses línies:


/* Els comentaris de diverses línies són molt útils
quan es necessita incloure bastant informació
en els comentaris */

alert("missatge de prova");

Els comentaris multilinia es defineixen tancant el text del comentari entre els símbols /* i */.

Variables

Les variables en els llenguatges de programació segueixen una lògica similar a les variables utilitzades en altres àmbits com les matemàtiques. Una variable és un element que s'empra per emmagatzemar i fer referència a un altre valor. Gràcies a les variables és possible crear "programes genèrics", és a dir, programes que funcionen sempre igual independentment dels valors concrets utilitzats.

De la mateixa forma que si en Matemàtiques no existissin les variables no es podrien definir les equacions i fórmules, en programació no es podrien fer programes realment útils sense les variables.

Si no existissin variables, un programa que suma dos nombres podria escriure's com:

resultat = 3 + 1

El programa anterior és tan poc útil que només serveix per al cas en el qual el primer nombre de la summa sigui el 3 i el segon nombre sigui l'1. En qualsevol altre cas, el programa obté un resultat incorrecte.

No obstant això, el programa es pot refer de la següent manera utilitzant variables per emmagatzemar i referir-se a cada nombre:

numero_1 = 3
numero_2 = 1
resultat = numero_1 + numero_2

Els elements numero_1 i numero_2 són variables que emmagatzemen els valors que utilitza el programa. El resultat es calcula sempre en funció del valor emmagatzemat per les variables, per la qual cosa aquest programa funciona correctament per a qualsevol parell de nombres indicat. Si es modifica el valor de les variables numero_1 i numero_2, el programa segueix funcionant correctament.

Les variables en Javascript es creen mitjançant la paraula reservada var. D'aquesta forma, l'exemple anterior es pot realitzar en Javascript de la següent manera:

var numero_1 = 3;
var numero_2 = 1;
var resultat = numero_1 + numero_2;

La paraula reservada var solament s'ha d'indicar en definir per primera vegada la variable, la qual cosa es denomina declarar una variable. Quan s'utilitzen les variables en la resta d'instruccions del *script, solament és necessari indicar el seu nom. En altres paraules, en l'exemple anterior seria un error indicar el següent:

var numero_1 = 3;
var numero_2 = 1;
var resultat = *var numero_1 + *var numero_2;

Si quan es declara una variable se li assigna també un valor, es diu que la variable ha estat inicialitzada. En Javascript no és obligatori inicialitzar les variables, ja que es poden declarar d'una banda i assignar-los un valor posteriorment. Per tant, l'exemple anterior es pot refer de la següent manera:

var numero_1;
var numero_2;

numero_1 = 3;
numero_2 = 1;

var resultat = numero_1 + numero_2;

Una de les característiques més sorprenents de JavaSript per als programadors habituats a altres llenguatges de programació és que tampoc és necessari declarar les variables. En altres paraules, es poden utilitzar variables que no s'han definit anteriorment mitjançant la paraula reservada *var. L'exemple anterior també és correcte en Javascript de la següent forma:

var numero_1 = 3;
var numero_2 = 1;

resultat = numero_1 + numero_2;

La variable resultat no està declarada, per la qual cosa Javascript crea una variable global (més endavant es veuran les diferències entre variables locals i globals) i li assigna el valor corresponent. De la mateixa forma, també seria correcte el següent codi:

numero_1 = 3;
numero_2 = 1;

resultat = numero_1 + numero_2;

En qualsevol cas, es recomana declarar totes les variables que es vagin a utilitzar.

El nom d'una variable també es coneix com a identificador i ha de complir les següents normes:

Només pot estar format per lletres, nombres i els símbols $ (dòlar) i _ (guió baix).
El primer caràcter no pot ser un nombre.

Per tant, les següents variables tenen noms correctes:

var $numero1;
var _$lletra;
var $$$*otroNumero;
var $_a__$4;

No obstant això, les següents variables tenen identificadors incorrectes:

var 1numero; // Comença per un nombre
var numero;1_123; // Conté un caràcter ";"

Tipus de variables

Encara que totes les variables de Javascript es creen de la mateixa forma (mitjançant la paraula reservada var), la forma en la qual se'ls assigna un valor depèn del tipus de valor que es vol emmagatzemar (nombres, textos, etc.)

Numèriques

S'utilitzen per emmagatzemar valors numèrics enters (anomenats integer en anglès) o decimals (anomenats float en anglès). En aquest cas, el valor s'assigna indicant directament el nombre enter o decimal. Els nombres decimals utilitzen el caràcter . (punt) en comptes de , (coma) per separar la part sencera i la part decimal:

var iva = 16; // variable tipus sencer
var total = 234.65; // variable tipus decimal

Cadenes de text

S'utilitzen per emmagatzemar caràcters, paraules i/o frases de text. Per assignar el valor a la variable, es tanca el valor entre cometes dobles o simples, per delimitar el seu començament i el seu final:

var missatge = "Benvingut al nostre lloc web";
var nombreProducto = 'Producte ABC';
var letraSeleccionada = 'c';

En ocasions, el text que s'emmagatzema en les variables no és tan senzill. Si per exemple el propi text conté cometes simples o dobles, l'estratègia que se segueix és la de tancar el text amb les cometes (simples o dobles) que no utilitzi el text:

/* El contingut de text1 té cometes simples, per
la qual cosa es tanca amb cometes dobles */
var text1 = "Una frase amb 'cometes simples' dins";

/* El contingut de text2 té cometes dobles, per
la qual cosa es tanca amb cometes simples */
var text2 = 'Una frase amb "cometes dobles" dins';

No obstant això, de vegades les cadenes de text contenen tant cometes simples com a dobles. A més, existeixen altres caràcters que són difícils d'incloure en una variable de text (tabulador, ENTER, etc.) Per resoldre aquests problemes, Javascript defineix un mecanisme per incloure de forma senzilla caràcters especials i problemàtics dins d'una cadena de text.

El mecanisme consisteix a substituir el caràcter problemàtic per una combinació simple de caràcters. A continuació es mostra la taula de conversió que s'ha d'utilitzar:

Si es vol incloure...	S'ha d'incloure...
Una nova línia          \n	
Un tabulador	        \t
Una cometa simple	\'
Una cometa doble	\"
Una barra inclinada	\\

D'aquesta forma, l'exemple anterior que contenia cometes simples i dobles dins del text es pot refer de la següent forma:

var text1 = 'Una frase amb \'cometes simples\' dins';

var text2 = "Una frase amb \"cometes dobles\" dins";

Aquest mecanisme de Javascript es denomina "mecanisme de fuita" dels caràcters problemàtics, i és habitual referir-se al fet que els caràcters han estat "escapats".

Arrays

En ocasions, als arrays se'ls anomena vectors, matrius i fins i tot arranjaments. No obstant això, el terme array és el més utilitzat i és una paraula comunament acceptada a l'entorn de la programació.

Un array és una col·lecció de variables, que poden ser totes del mateix tipus o cadascuna d'un tipus diferent. La seva utilitat es comprèn millor amb un exemple senzill: si una aplicació necessita utilitzar els dies de la setmana, es podrien crear set variables de tipus text:

var dia1 = "Dilluns";
var dia2 = "Dimarts";
...
var dia7 = "Diumenge";

Encara que el codi anterior no és incorrecte, sí que és poc eficient i complica a l'excés la programació. Si en comptes dels dies de la setmana s'hagués de guardar el nom dels mesos de l'any, el nom de tots els països del món o els mesuraments diaris de temperatura dels últims 100 anys, s'haurien de crear desenes o centenars de variables.

En aquest tipus de casos, es poden agrupar totes les variables relacionades en una col·lecció de variables o array. L'exemple anterior es pot refer de la següent forma:

var dies = ["Dilluns", "Dimarts", "Dimecres", "Dijous", "Divendres", "Dissabte", "Diumenge"];

Ara, una única variable anomenada dies emmagatzema tots els valors relacionats entre si, en aquest cas els dies de la setmana. Per definir un array, s'utilitzen els caràcters [ i ] per delimitar el seu començament i el seu final i s'utilitza el caràcter , (coma) per separar els seus elements:

var nom_array = [valor1, valor2, ...,valorN];

Una vegada definit un array, és molt senzill accedir a cadascun dels seus elements. Cada element s'accedeix indicant la seva posició dins del array. L'única complicació, que és responsable de molts errors quan es comença a programar, és que les posicions dels elements comencen a explicar-se en el 0 i no en l'1:

var diaSeleccionat = dies[0]; // diaSeleccionat = "Dilluns"

var altreDia = dies[5]; // altreDia = "Dissabte"

En l'exemple anterior, la primera instrucció vol obtenir el primer element del array. Per a això, s'indica el nom del array i entre claudàtors la posició de l'element dins del array. Com s'ha comentat, les posicions del array comencen a partir del 0, per la qual cosa el primer element ocupa la posició 0 i s'accedeix al mitjançant dias[0].

El valor dies[5] fa referència a l'element que ocupa la sisena posició dins del array dies. Com les posicions comencen a explicar-se en 0, la posició 5 fa referència al sisè element, en aquest cas, el valor Dissabte.

Booleans

Les variables de tipus boolean o booleà també es coneixen amb el nom de variables de tipus lògic. El seu funcionament bàsic és molt senzill.

Una variable de tipus boolean emmagatzema un tipus especial de valor que solament pot prendre dos valors: true (veritable) o false (fals). No es pot utilitzar per emmagatzemar nombres i tampoc permet guardar cadenes de text.

Els únics valors que poden emmagatzemar aquestes variables són true i false, per la qual cosa no poden utilitzar-se els valors veritable i fals. A continuació es mostra un parell de variables de tipus booleà:

var clientRegistrat = false;
var iva = true;

Operadors

Els operadors permeten manipular el valor de les variables, realitzar operacions matemàtiques amb els seus valors i comparar diferents variables. D'aquesta forma, els operadors permeten als programes realitzar càlculs complexos i prendre decisions lògiques en funció de comparacions i altres tipus de condicions.

Assignació

L'operador d'assignació és el més utilitzat i el més senzill. Aquest operador s'utilitza per guardar un valor específic en una variable. El símbol utilitzat és = (no confondre amb l'operador == que es veurà més endavant):

var numero1 = 3;

A l'esquerra de l'operador, sempre ha d'indicar-se el nom d'una variable. A la dreta de l'operador, es poden indicar variables, valors, condicions lògiques, etc:

var numero1 = 3;
var numero2 = 4;

/* Error, l'assignació sempre es realitza a una variable,
per la qual cosa en l'esquerra no es pot indicar un número */
5 = numero1;

// Ara, la variable numero1 val 5
numero1 = 5;

// Ara, la variable numero1 val 4
numero1 = numero2;

Increment i decrement

Aquests dos operadors solament són vàlids per a les variables numèriques i s'utilitzen per incrementar o decrementar en una unitat el valor d'una variable.

Exemple:

var numero = 5;
++numero;
alert(numero); // numero = 6

L'operador d'increment s'indica mitjançant el prefix ++ en el nom de la variable. El resultat és que el valor d'aquesta variable s'incrementa en una unitat. Per tant, l'anterior exemple és equivalent a:

var numero = 5;
numero = numero + 1;
alert(numero); // numero = 6

De forma equivalent, l'operador decrement (indicat com un prefix -- en el nom de la variable) s'utilitza per decrementar el valor de la variable:

var numero = 5;
--numero;
alert(numero); // numero = 4

L'anterior exemple és equivalent a:

var numero = 5;
numero = numero - 1;
alert(numero); // numero = 4

Els operadors d'increment i decremento no solament es poden indicar com a prefix del nom de la variable, sinó que també és possible utilitzar-los com a sufix. En aquest cas, el seu comportament és similar però molt diferent. En el següent exemple:

var numero = 5;
numero++;
alert(numero); // numero = 6

El resultat d'executar el script anterior és el mateix que quan s'utilitza l'operador ++numero, per la qual cosa pot semblar que és equivalent indicar l'operador ++ davant o darrere de l'identificador de la variable. No obstant això, el següent exemple mostra les seves diferències:

var numero1 = 5;
var numero2 = 2;
numero3 = numero1++ + numero2;
// numero3 = 7, numero1 = 6

var numero1 = 5;
var numero2 = 2;
numero3 = ++numero1 + numero2;
// numero3 = 8, numero1 = 6

Si l'operador ++ s'indica com a prefix de l'identificador de la variable, el seu valor s'incrementa abans de realitzar qualsevol altra operació. Si l'operador ++ s'indica com a sufix de l'identificador de la variable, el seu valor s'incrementa després d'executar la sentència en la qual apareix.

Per tant, en la instrucció numero3 = numero1++ + numero2;, el valor de numero1 s'incrementa després de realitzar l'operació (primer se sumeixi i numero3 val 7, després s'incrementa el valor de numero1 i val 6). No obstant això, en la instrucció numero3 = ++numero1 + numero2;, en primer lloc s'incrementa el valor de numero1 i després es realitza la summa (primer s'incrementa numero1 i val 6, després es realitza la summa i numero3 val 8).

Lògics

Els operadors lògics són imprescindibles per realitzar aplicacions complexes, ja que s'utilitzen per prendre decisions sobre les instruccions que hauria d'executar el programa en funció de certes condicions.

El resultat de qualsevol operació que utilitzi operadors lògics sempre és un valor lògic o booleà.

Negació

Un dels operadors lògics més utilitzats és el de la negació. S'utilitza per obtenir el valor contrari al valor de la variable:

var visible = true;
alert(!visible); // Mostra "false" i no "true"

La negació lògica s'obté prefixant el símbol ! a l'identificador de la variable. El funcionament d'aquest operador es resumeix en la següent taula:

variable	!variable
true    	false
false	        true

Si la variable original és de tipus booleà, és molt senzill obtenir la seva negació. No obstant això, què succeeix quan la variable és un nombre o una cadena de text? Per obtenir la negació en aquest tipus de variables, es realitza en primer lloc la seva conversió a un valor booleà:

Si la variable conté un nombre, es transforma en false si val 0 i en true per a qualsevol altre nombre (positiu o negatiu, decimal o sencer). Si la variable conté una cadena de text, es transforma en *false si la cadena és buida ("") i en *true en qualsevol altre cas.

var quantitat = 0;
buit = !quantitat; // buit = true

quantitat = 2;
buit = !quantitat; // buit = false

var missatge = "";
missatgebuit = !missatge; // missatgebuit = true

missatge = "Benvingut";
missatgebuit = !missatge; // missatgebuit = *false

AND

L'operació lògica AND obté el seu resultat combinant dos valors booleans. L'operador s'indica mitjançant el símbol && i el seu resultat solament és true si els dos operands són true:

variable1	variable2	variable1 && variable2
  true	           true	                 true
  true	           false	         false
  false	           true	                 false
  false	           false	         false

var valor1 = true;
var valor2 = false;
resultat = valor1 && valor2; // resultat = false

valor1 = true;
valor2 = true;
resultat = valor1 && valor2; // resultat = true

OR

L'operació lògica OR també combina dos valors booleans. L'operador s'indica mitjançant el símbol || i el seu resultat és true si algun dels dos operands és true:

variable1	variable2	variable1 || variable2
  true	           true	                 true
  true	           false	         true
  false	           true	                 true
  false	           false	         false

var valor1 = true;
var valor2 = false;
resultat = valor1 || valor2; // resultat = true

valor1 = false;
valor2 = false;
resultat = valor1 || valor2; // resultat = false

Matemàtics

Javascript permet realitzar manipulacions matemàtiques sobre el valor de les variables numèriques. Els operadors definits són: suma (+), resta (-), multiplicació (*) i divisió (/). Exemple:

var numero1 = 10;
var numero2 = 5;

resultat = numero1 / numero2; // resultat = 2
resultat = 3 + numero1; // resultat = 13
resultat = numero2 – 4; // resultat = 1
resultat = numero1 * numero 2; // resultat = 50

A més dels quatre operadors bàsics, Javascript defineix un altre operador matemàtic que no és senzill d'entendre quan s'estudia per primera vegada, però que és molt útil en algunes ocasions.

Es tracta de l'operador "mòdul", que calcula la resta de la divisió sencera de dos nombres. Si es divideix per exemple 10 i 5, la divisió és exacta i dóna un resultat de 2. La resta d'aquesta divisió és 0, per la qual cosa mòdul de 10 i 5 és igual a 0.

No obstant això, si es divideix 9 i 5, la divisió no és exacta, el resultat és 1 i la resta 4, per la qual cosa mòdul de 9 i 5 és igual a 4.

L'operador mòdul en Javascript s'indica mitjançant el símbol %, que no ha de confondre's amb el càlcul del percentatge:

var numero1 = 10;
var numero2 = 5;
resultat = numero1 % numero2; // resultat = 0

numero1 = 9;
numero2 = 5;
resultat = numero1 % numero2; // resultat = 4

Els operadors matemàtics també es poden combinar amb l'operador d'assignació per abreujar la seva notació:

var numero1 = 5;
numero1 += 3; // numero1 = numero1 + 3 = 8
numero1 -= 1; // numero1 = numero1 - 1 = 4
numero1 *= 2; // numero1 = numero1 * 2 = 10
numero1 /= 5; // numero1 = numero1 / 5 = 1
numero1 %= 4; // numero1 = numero1 % 4 = 1

Relacionals

Els operadors relacionals definits per Javascript són idèntics als quals defineixen les matemàtiques: major que (>), menor que (<), major o igual (>=), menor o igual (<=), igual que (==) i diferent de (!=).

Els operadors que relacionen variables són imprescindibles per realitzar qualsevol aplicació complexa, com es veurà en el següent capítol de programació avançada. El resultat de tots aquests operadors sempre és un valor booleà:

var numero1 = 3;
var numero2 = 5;
resultat = numero1 > numero2; // resultat = false
resultat = numero1 < numero2; // resultat = true

numero1 = 5;
numero2 = 5;
resultat = numero1 >= numero2; // resultat = true
resultat = numero1 <= numero2; // resultat = true
resultat = numero1 == numero2; // resultat = true
resultat = numero1 != numero2; // resultat = false

S'ha de tenir especial cura amb l'operador d'igualtat (==), ja que és l'origen de la majoria d'errors de programació, fins i tot per als usuaris que ja tenen certa experiència desenvolupant scripts. L'operador == s'utilitza per comparar el valor de dues variables, per la qual cosa és molt diferent de l'operador =, que s'utilitza per assignar un valor a una variable:

// L'operador "=" assigna valors
var numero1 = 5;
resultat = numero1 = 3; // numero1 = 3 i resultat = 3

// L'operador "==" compara variables
var numero1 = 5;
resultat = numero1 == 3; // numero1 = 5 i resultat = *false

Els operadors relacionals també es poden utilitzar amb variables de tipus cadena de text:

var text1 = "hola";
var text2 = "hola";
var text3 = "*adios";

resultat = text1 == text3; // resultat = false
resultat = text1 != text2; // resultat = false
resultat = text3 >= text2; // resultat = false

Quan s'utilitzen cadenes de text, els operadors "major que" (>) i "menor que" (<) segueixen un raonament no intuïtiu: es compara lletra a lletra començant des de l'esquerra fins que es trobi una diferència entre les dues cadenes de text. Per determinar si una lletra és major o menor que una altra, les majúscules es consideren menors que les minúscules i les primeres lletres de l'alfabet són menors que les últimes (a és menor que b, b és menor que c, A és menor que a, etc.)

Àmbit de les Varibles

Un altre aspecte a tenir en compte a l'hora d'usar les variables és el seu àmbit, és a dir, quines funcions tenen accés a elles. Si es crea una variable dins d'una funció només serà coneguda dins d'aquesta funció, es tracta de variables locals. Si es necessita que diverses funcions tinguin accés a una determinada variable aquesta ha de crear-se com a variable global, això es fa creant-la fora de totes les funcions. Per exemple en el següent script tenim variables globals i locals:

<script language="Javascript">
     var navegador_versio = 0;
     function veureNavegador()
     {
          var versio;
          versio = document.appVersion;
          return versio;
     }
</script>

En aquest exemple navegador_versio és una variable global i versió és una variable local que només existeix dintre de la funciò veureNavegador. Què succeeix si una funció defineix una variable local amb el mateix nom que una variable global que ja existeix? En aquest cas, les variables locals prevalen sobre les globals, però només dins de la funció:

    var missatge = "guanya la de fora";

    function muestraMensaje() {
        var missatge = "guanya la de dins";
        alert(missatge);
    }

    alert(missatge);
    mostraMissatge();
    alert(missatge);

Què succeeix si dins d'una funció es defineix una variable global amb el mateix nom que una altra variable global que ja existeix? En aquest altre cas, la variable global definida dins de la funció simplement modifica el valor de la variable global definida anteriorment:

    var missatge = "guanya la de fora";

    function muestraMensaje() {
        missatge = "guanya la de dins";
        alert(missatge);
    }

    alert(missatge);
    mostraMissatge();
    alert(missatge);

La diferencia dels dos exemples anteriors ve donat per la definició d'una variable anomenada igual que una altre global. En el primer exemple s'utilitza la paraula reservada var i en el últim exemple NO s'utilitza. El fet de NO utilitzar la paraula reservada var s'interpreta com que es vol utilitzar la variable global definida abans de la funció.

Resumint, la recomanació general és definir com a variables locals totes les variables que siguin d'ús exclusiu per realitzar les tasques encarregades a cada funció. Les variables globals s'utilitzen per compartir dades entre funcions de forma senzilla.

Exercicis

Exercici 1: Arrays

Crear un array anomenat mesos i que emmagatzemi el nom dels dotze mesos de l'any. Mostrar per pantalla els dotze noms utilitzant la funció alert().

Solució Exercici 1 : Arrays

Exercici 2: Operadors

A partir del següent array que es proporciona:

var valors = [true, 5, false, "hola", "adios", 2];

Determinar quin dels dos elements de text és major
Utilitzant exclusivament els dos valors booleans del array, determinar els operadors necessaris per obtenir un resultat true i un altre resultat false
Determinar el resultat de les cinc operacions matemàtiques realitzades amb els dos elements numèrics

Solució Exercici 2 : Operadors

Estructures de control de Flux

Estructura IF

L'estructura més utilitzada en Javascript i en la majoria de llenguatges de programació és l'estructura if. S'empra per prendre decisions en funció d'una condició. La seva definició formal és:

if(condicion) {
...
}

Si la condició es compleix (és a dir, si el seu valor és true) s'executen totes les instruccions que es troben dins de {...}. Si la condició no es compleix (és a dir, si el seu valor és false) no s'executa cap instrucció continguda en {...} i el programa continua executant la resta d'instruccions del script. Exemple:

var mostrado = false;
var usuarioPermiteMensajes = true;
 
if(!mostrado && usuarioPermiteMensajes) {
  alert("Es la primera vez que se muestra el mensaje");
}

Estructura IF....ELSE

Normalment les condicions solen ser del tipus "si es compleix aquesta condició, fes-ho; si no es compleix, fes això un altre". Existeix una variant de l'estructura if trucada if...else. La seva definició formal és la següent:

if(condicion) {
...
}
else {
...
}

La estructura if...else es pot encadenar per realitzar diverses comprovacions seguides:

if(edad < 12) {
  alert("Todavía eres muy pequeño");
}
else if(edad < 19) {
  alert("Eres un adolescente");
}
else if(edad < 35) {
  alert("Aun sigues siendo joven");
}
else {
  alert("Piensa en cuidarte un poco más");
}

Exercici DNI

El càlcul de la lletra del Document Nacional d'Identitat (DNI) és un procés matemàtic senzill que es basa a obtenir la resta de la divisió sencera del nombre de DNI i el número 23. A partir de la resta de la divisió, s'obté la lletra seleccionant-la dins d'un array de lletres. El array de lletres és:

var lletres = ['T', 'R', 'W', 'A', 'G', 'M', 'I', 'F', 'P', 'D', 'X', 'B', 'N', 'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'I', 'T'];

Per tant si la resta de la divisió és 0, la lletra del DNI és la T i si la resta és 3 la lletra és l'A. Amb aquestes dades, elaborar un petit script que:

Emmagatzemi en una variable el nombre de DNI indicat per l'usuari i en una altra variable la lletra del DNI que s'ha indicat. (Pista: si es vol demanar directament a l'usuari que indiqui el seu nombre i la seva lletra, es pot utilitzar la funció prompt())
En primer lloc (i en una sola instrucció) s'ha de comprovar si el nombre és menor que 0 o major que 99999999. Si aquest és el cas, es mostra un missatge a l'usuari indicant que el nombre proporcionat no és vàlid i el programa no mostra més missatges.
Si el nombre és vàlid, es calcula la lletra que li correspon segons el mètode explicat anteriorment.
Una vegada calculada la lletra, s'ha de comparar amb la lletra indicada per l'usuari. Si no coincideixen, es mostra un missatge a l'usuari dient-li que la lletra que ha indicat no és correcta. En un altre cas, es mostra un missatge indicant que el nombre i la lletra de DNI són correctes.

Solució DNI

Selecció Múltiple

Poden existir casos en els quals el programa hagi de tenir mes de dues alternatives, per exemple si volem un programa que mostri un títol en un idioma de quatre possibles. Això pot solucionar-se mitjançant diversos if. Hem de triar entre idiomes: castellà, engonals, francès i alemany.

if (leng == "ESPANYOL")
       pagCast();
else
       if (leng == "ANGLES")
              pagIng();
       else
             if (leng == "FRANCES")
                    pagFran();
             else
                   if (leng == "CATALA")
                          pagCat();
                   else
                            error('idioma desconegut');

Per a aquests casos disposem de la sentència switch...casi...default, de selecció múltiple. L'exemple anterior quedaria:

switch (idioma) {
    case 'espanyol' :
          pagCast();
          break;
    case 'ingles' :
          pagIng();
          break;
    case 'frances' :
          pagFran();
          break;
    case 'catala' :
          pagCat();
          break;
    default :
          error ('Idioma desconegut');
}

La instrucció break posa fi al bloc i fa que el programa salti a la instrucció següent a la sentència switch(), si s'omet el programa continuaria amb la següent comparació. La secció del default és opcional, la seva finalitat és executar algun codi quan cap de les condicions es compleixi.

Estructura WHILE

En aquesta estructura el programa primer comprova la condició: si és certa pansa a executar el cos del bucle, i si és falsa pansa a la instrucció següent a la sentència while.

while(condició){
....
}

Exemple:

var resultat = 0;
var numero = 100;
var i = 0;
 
while(i <= numero) {
  resultat += i;
  i++;
}
 
alert(resultat);

El programa ha de sumar tots els nombres menors o igual que un altre donat. Per exemple si el nombre és 5, s'ha de calcular: 1 + 2 + 3 + 4 + 5 = 15

Estructura DO...WHILE

Es tracta d'un bucle en el qual la condició es comprova després de la primera iteració, és a dir que el cos del bucle s'executa almenys una vegada.

do {
  ...
} while(condició);

Utilitzant aquest bucle es pot calcular fàcilment el factorial d'un numero:

var resultat = 1;
var numero = 5;
 
do {
  resultat *= numero;  // resultat = resultat * numero
  numero--;
} while(numero > 0);
 
alert(resultat);

Estructura FOR

L'estructura for permet realitzar repeticions (també anomenades bucles) d'instruccions d'una forma molt senzilla.

for(inicializació; condició; actualizació) {
...
}

La idea del funcionament d'un bucle for és la següent: "mentre la condició indicada se segueixi complint, repeteix l'execució de les instruccions definides dins del for. A més, després de cada repetició, actualitza el valor de les variables que s'utilitzen en la condició".

La "inicialització" és la zona en la qual s'estableix els valors inicials de les variables que controlen la repetició.
La "condició" és l'únic element que decideix si contínua o es deté la repetició.
La "actualització" és el nou valor que s'assigna després de cada repetició a les variables que controlen la repetició.

Exemple:

var missatge = "Hola, estic dintre d'un bucle";
 
for(var i = 0; i < 5; i++) {
  alert(missatge);
}

Un altre exemple:

var dies = ["Dilluns", "Dimarts", "Dimecres", "Dijous", "Divendres", "Dissabte", "Diumenge"];
 
for(var i=0; i<7; i++) {
  alert(dies[i]);
}

Exercici For

El factorial d'un nombre enter n és una operació matemàtica que consisteix a multiplicar tots els factors n x (n-1) x (n-2) x ... x 1. Així, el factorial de 5 (escrit com 5!) és igual a: 5! = 5 x 4 x 3 x 2 x 1 = 120 Utilitzant l'estructura for, crear un script que calculi el factorial d'un nombre enter.

Solució For

Estructura For...IN

La seva definició exacta implica l'ús d'objectes, que és un element de programació que encara no anem a estudiar. Per tant, solament es va a presentar l'estructura for...in adaptada al seu ús en arrays. La seva definició formal adaptada als arrays és:

for(indice in array) {
  ...
}

Exemple:

var dies = ["Dilluns", "Dimarts", "Dimecres", "Dijous", "Divendres", "Dissabte", "Diumenge"];
 
for(i in dies) {
  alert(dies[i]);
}

Diferència entre revisions de la pàgina «NF2 - Sintaxi Javascript»

Revisió del 16:05, 24 set 2013

Contingut

Generalitats

Variables

Tipus de variables

Numèriques

Cadenes de text

Arrays

Booleans

Operadors

Assignació

Increment i decrement

Lògics

Negació

AND

OR

Matemàtics

Relacionals

Àmbit de les Varibles

Exercicis

Exercici 1: Arrays

Exercici 2: Operadors

Estructures de control de Flux

Estructura IF

Estructura IF....ELSE

Exercici DNI

Selecció Múltiple

Estructura WHILE

Estructura DO...WHILE

Estructura FOR

Exercici For

Estructura For...IN

Menú de navegació

Cerca