 |
Les variables són uns elements de programació
encarregades de contenir les dades que s'utilitzen en el programa. El
seu valor pot canviar en funció de com evolucioni la seqüència
del programa.
Per declarar una variable s'utilitza la paraula reservada var.
Aquesta indica que el nom que va a continuació és una variable
i li reserva l'espai corresponent a la memòria. La declaració
d'una variable es pot fer al principi del programa, o bé, entremig
del programa en el moment que es produeix la seva primera utilització.
A continuació de la paraula var, s'indica el nom que tindrà
la variable. Aquest nom ha de ser únic i representatiu del valor
que contindrà la variable. També se li pot afegir una assignació
inicial.
var camí;
var setmana = 0;
Els noms de les variables han de tenir com a primer caràcter una
lletra o bé el guió baix (_), el nom pot ser qualsevol,
però, no ha de coincidir amb cap nom igual als de les paraules
reservades del llenguatge i no pot contenir espais o caràcters
especials.
JavaScript diferencia entre majúscules i minúscules. Per
exemple, no és la mateixa variable "mostraValor" que
"mostravalor".
Les següents declaracions de variable són incorrectes, ja
que el nom no compleix els requisits indicats anteriorment:
|
var 1dia;
var temps passat;
var temps-passat; |
Incorrecte, ja que el primer caràcter
és numèric.
Incorrecte, ja que s'ha inclòs un espai en blanc.
Incorrecte, ja que s'ha inclòs un caràcter especial.
|
En una mateixa línia es pot declarar
més d'una variable:
var dia1, temps_passat,
hora, setmana=0;
A les variables se'ls assignen les dades. Les dades es classifiquen
segons quin sigui el seu tipus. Els diferents tipus de dades
són:
enters, coma flotant, hexadecimals i octals, booleans, nuls i cadena
Quan es declara una variable, si no se li ha assignat cap valor inicial,
contindrà el valor null. Posteriorment., quan se li assigna
un valor, la variable passarà a tenir assignat un determinat
tipus de dades. El tipus dependrà de quin sigui el valor assignat
inicialment. A continuació tenim una breu descripció de
cada tipus de dades:
|
"Enter", aquest tipus
correspon a dades numèriques formades únicament per
valors enters. Exemple: 25, -234, 7000239, -234000123, etc.
"Coma flotant", aquest tipus correspon a dades
numèriques amb decimals. En aquest tipus diferenciem la part
sencera de la decimal mitjançant la utilització d'un
punt separador. També en forma part els valors exponencials
mitjançant una "e" o "E" per indicar
l'exponent. Per exemple, els següents valors són números
de coma flotant. 25.0, 0.23452, -1234.9876, -18374592.938457, 3e5,
-8E-12.
"Hexadecimals i Octals". Si es desitja representar
un número en notació hexadecimal ho farem indicant
a davant del número els caràcters 0x. Per exemple.
0x3832, 0xFA74, etc. En el cas dels números en notació
octal, s'ha de posar un zero al davant. Per exemple: 0374, 01264,
0227, 0202.
Recordem que els dígits del sistema de numeració hexadecimal
són 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E i F, i els
del sistema de numeració octal són: 0, 1, 2, 3, 4,
5, 6 i 7.
"Booleà" Aquest és un tipus de dades
molt usat en programació. Els dos possibles valors que pot
tenir són true i false. Aquests valors són
els que se solen obtenir quan s'efectuen comparacions lògiques
entre dos o més elements.
"Nul" Aquest és el valor null, un
valor que indicarà que a una variable no se li ha assignat
cap valor.
"Cadena", s'entén per cadena a un conjunt
de caràcters tipus lletres, espais, números i símbols
tancat entre cometes dobles ( " ) o entre cometes simples (
' ). Uns exemples de cadenes correctes i incorrectes poden ser els
següents:
|
Correcte |
Incorrecte |
|
"Això
és una cadena"
'Això també és una cadena'
'Aquesta cadena es "correcta" ja que les
cometes inicials són també
les del final'
"2354"
"Preu = 25 €" |
"Cadena incorrecta'
"Cadena "incorrecta"
"Cadena ' incorrecta " ' |
Les cadenes han d'estar tancades entre el mateix
tipus de cometes (simples o dobles), és a dir, les que
s'utilitzen al principi són les que han de servir per tancar
la cadena i en el seu interior no s'hi pot trobar les mateixes
cometes, però, si que hi podem trobar les cometes de l'altre
tipus.
Si dins una cadena es vol introduir algun caràcter especial
com ara un salt de línia o unes cometes simples o dobles,
una barra invertida, etc. es pot fer utilitzant els anomenats
caràcters d'escape propis del llenguatge C. Entre
els més habituals hi ha els següents:
\n : introdueix un salt de línia.
\' : introdueix unes cometes simples.
\" : introdueix unes cometes dobles.
\\ : introdueix una barra invertida (antibarra).
Aquests elements són molt utilitzats dins les cadenes de
text, permeten introduir salts de línia, també permeten
introduir cometes simples i cometes dobles quan els delimitadors
de la cadena també són cometes simples o dobles,
respectivament.
Els següents exemples mostren la utilització d'aquests
caràcters d'escape:
|
La cadena ... |
Es veurà com ... |
|
"Aquí
tenim un salt \n de línia."
'Cometa simple a l\'interior.'
"Aquesta \"cadena\" conté \". " |
Aquí tenim
un salt
de línia.
Cometa simple a l'interior.
Aquesta "cadena" conté ". |
|
Per acabar aquest apartat, veiem més exemples de declaració
de variables, a la columna de l'esquerra hi tenim unes declaracions de
variables no inicialitzades (es podran inicialitzar posteriorment, de
moment contenen el valor "null"), per tant no tenen un tipus
de dades definit.
En canvi en la columna de la dreta hi veiem unes variables inicialitzades:
les dues primeres són tipus "cadena", la tercera és
tipus "coma flotant", la quarta és tipus "enter"
i l'última és tipus "booleà":
|
Variables no inicialitzades |
Variables inicialitzades |
|
var nom;
var cadena;
var preu;
var quantitat;
var esMajor; |
var nom = "Ramon";
var cadena = 'El preu de cost dels productes';
var preu = 223.14;
var quantitat = 12;
var esMajor = true; |
|
 |
Segons sigui el lloc on es declarin les variables, aquestes
es poden classificar en variables globals o locals.
Les variables globals es declaren fora de qualsevol funció.
Aquestes variables poden ser utilitzades des de qualsevol lloc de la pàgina,
en scripts situats en el bloc body o en el bloc head i dins
i fora de qualsevol funció. És a dir, la seva vida és
global i existiran mentre la pàgina estigui carregada en el navegador.
Les variables locals es declaren dins d'una funció. Aquestes
variables existiran solament dins d'aquesta funció i desapareixeran
quan no s'estigui executant el codi de la funció.
Observeu el següent codi. És un exemple per observar el comportament
de les variables globals i locals. La variable de nom varGlobal
està definida fora de qualsevol funció, per tant, al carregar
la pàgina aquesta variable quedarà declarada i el seu ús
serà vàlid des de qualsevol lloc de la pàgina web,
mentre aquesta estigui carregada.
En canvi, la variable de nom varLocal, està definida dins
d'una funció. Per tant, solament es declararà quan
s'executi el codi d'aquesta funció i desapareixerà quan
la funció funcioProva() acabi la seva execució.
La funció funcioProva(), a més, conté un alert()
que mostra el contingut de la variable varLocal i també
conté dues instruccions per incrementar en una unitat a les variables
varLocal i varGlobal.
El formulari que hi ha dins el bloc <body> conté tres
botons que serveixen per mostrar el valor de les dues variables.
- El botó 1 mostra mitjançant un alert() el
valor de la variable varGlobal.
- El botó 2 intenta mostrar, mitjançant el sistema
del botó 1 el valor de varLocal,
però, sempre dóna error, indicant que aquesta variable
no existeix.
- El botó 3 executa la funció funcioProva(),
per tant, es declara localment a la variable
varLocal i es mostra el seu contingut mitjançant
alert(), també s'incrementa a varLocal
i varGlobal en una unitat.
Observeu que sempre que es prem el botó 3, el valor que es mostra
per a varLocal sempre és 0, malgrat existir la línia
++varLocal; . El motiu és perquè
aquesta variable, tot i que és incrementada, desapareix en acabar
la funció funcioProva() i la propera vegada es fa
clic sobre el botó 3, aquesta variable es torna a crear de nou
i se li assigna el valor 0 i el torna a mostrar.
En canvi, si hem polsat múltiples vegades al botó 3, i posteriorment
polsem sobre el botó 1, observarem que el valor de la variable
varGlobal si que s'ha incrementat, ja que aquesta variable es accessible
des de qualsevol lloc de la pàgina web i l'increment provocat per
la línia ++varGlobal es manté
encara que hagi acabat la funció funcioProva().
|
 |
Els operadors són els elements de codi que ens serviran per fer
operacions amb les variables i altres valors constants. En JavaScript
s'utilitzen bàsicament els mateixos operadors que en C/C++.
Els operadors es classifiquen en: Operadors d'assignació,
operadors aritmètics, operadors lògics, operadors de comparació,
operadors condicionals i operadors de cadena (existeixen altres tipus,
però no els tractarem ja que són d'ús molt específic).
Les taules que vénen a continuació classifiquen els diferents
operadors amb una descripció i un exemple d'ús.
Operadors d'assignació:
Operador
|
Descripció |
Exemple d'ús |
=
|
Assigna el valor de l'operand de la
dreta a l'operand de l'esquerra. |
t = r ; |
+ =
|
Assigna la suma dels operands de la
dreta i l'esquerra a l'operand de la dreta. |
t += r ;
(t = t + r) |
- =
|
Assigna la resta dels operands de la
dreta i l'esquerra a l'operand de la dreta. |
t -= r ;
(t = t - r) |
* =
|
Assigna el producte dels operands de
la dreta i l'esquerra a l'operand de la dreta. |
t *= r;
(t = t * r) |
/ =
|
Assigna el quocient
dels operands de la dreta i l'esquerra a l'operand de la dreta.
|
t /= r;
(t = t / r) |
% =
|
Assigna el residu del quocient dels
operands de la dreta i l'esquerra a l'operand de la dreta. |
t %= r ;
( t = residu(t/r)) |
Operadors aritmètics:
Operador
|
Descripció |
Exemple d'ús |
Binaris:
|
|
|
+
|
Suma el valor de dos operands. |
a + b; |
-
|
Resta el valors de dos operands. |
a - b; |
*
|
Multiplica el valor de dos operands. |
a * b ; |
/
|
Divideix els valors de dos operands. |
a / b ; |
%
|
Calcula la resta de la divisió
de dos operands. |
a % b; |
Monaris:
|
|
|
|
Canvia el signe de l'operand de la
seva dreta. |
- preu ; |
++
|
Incrementa en un unitat l'operand de
la seva dreta o esquerra. |
++a ;
a++; |
|
Disminueix en una unitat l'operand
de la seva dreta o esquerra. |
--a;
a--; |
Operadors lògics:
Operador
|
Descripció |
Exemple d'ús |
&&
|
Operador binari. Fa l'operació
"i lògica", retorna true si els dos operands són
true. |
a && b; |
||
|
Operador binari. Fa l'operació
"o lògica", retorna true si un dels dos operands
és true. |
a | | b; |
!
|
Operador monari. Fa l'operació
"negació lògica", retorna true si l'operador
és false. |
! a;
!esMenor; |
Operadors de comparació:
Operador
|
Descripció |
Exemple d'ús |
= =
|
Retorna true si els dos operadors són
iguals. |
a = = b; |
! =
|
Retorna true si els dos operadors són
diferents. |
a ! =b; |
>
|
Retorna true si l'operador de l'esquerra
és més gran que el de la dreta. |
a > b; |
<
|
Retorna true si l'operador de l'esquerra
és més petit que el de la dreta. |
a < b ; |
> =
|
Retorna true si l'operador de l'esquerra
és més gran o igual que el de la dreta. |
a > = b ; |
< =
|
Retorna true si l'operador de l'esquerra
és més petit o igual que el de la dreta. |
a < = b; |
Operador condicional ( ? : ) :
Aquest és un operador ternari, la seva sintaxi és la següent:
(condició) ? valor1 : valor2
Si el contingut del parèntesi (la condició) és
true, s'avaluarà el valor1, de cas contrari, si la condició
és false, s'avaluarà el valor2. El següent exemple
ens mostra una possible utilització.
a = (3>2) ? 10 : 2 ;
En aquesta assignació, la variable a contindrà el
valor 10. Per determinar aquest valor, inicialment, s'avalua la condició
(3 > 2), com que és certa, es retorna el valor 10 per fer
l'assignació. Si la condició hagués estat falsa,
s'hauria retornat el valor 2.
Operador de concatenació de cadenes:
L'operador binari +, és un operador de cadena que ens
permet concatenar dues cadenes alfanumèriques. La seva aplicació
ens retorna una nova cadena que serà la concatenació de
les altres dues sobre les que opera.
Exemple:
var cadena1 = "Hola, ";
var cadena2 = "que tal";
var cadena3 = cadena1 + cadena2;
La variable "cadena3" contindrà el valor: "Hola,
que tal".
|