Ja s'han fet unes quantes pràctiques en què s'han utilitzat les variables i els operadors. Quan ha estat necessari utilitzar-ne algun s'ha fet la corresponent descripció local d'aquest element.

Tot i això, és necessari veure una visió més global d'aquests elements, és a dir tots ells en conjunt. Les variables, tipus de dades i operadors de JavaScript són molt similars a les que s'utilitzen en C/C++ i Java. Però, tenim la sort que es simplifica molt el seu ús i són més flexibles, ja que no és necessari declarar expressament el seu tipus. Es diu per això que JavaScript és un llenguatge amb variables de 'tipus lliure'.

En aquesta pràctica es pretén donar una descripció àmplia d'aquests elements i a la vegada veure'n uns altres de nous, classificats en els diferents tipus que existeixen. És una pràctica eminentment teòrica i la utilització del seu contingut es practica al llarg de tot el curs.

  Conceptes JavaScript en aquest capítol
Tipus de dades : Classificació de les dades segons la seva naturalesa.
Sentència var : Declara una variable.
Variables : Elements de programació encarregats d'encabir les dades.
Operadors : Elements de programació que realitzen operacions amb les dades o constants.
Caràcters d'escape : Caràcters especials que es poden afegir dins les cadenes.
Mètode parseInt() : Retorna el valor numèric d'una cadena amb dígits en format enter.
Mètode parseFloat() : Retorna el valor numèric d'una cadena amb dígits en format coma flotant.
 
1.-
Variables.
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;
 

2.-
Variables locals i globals.
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().

<html>
<head>
<script language="JavaScript">

   
var varGlobal=0;

    function funcioProva() {
        var varLocal=0;
        alert(varLocal);
        ++varGlobal;
        ++varLocal;
    }

</script>
</head>
<body>
<form>
  <input type="button" value="1- Mostra varGlobal" onClick="
alert(varGlobal);"><p>
  <input type="button" value="2- Mostra varLocal, (error)"
                                                                      onClick="
alert(varLocal);"><p>
  <input type="button" value="3- Mostra varLocal, (funcioProva)"
                                                                      onClick="
funcioProva();">
</form>
</body>
</html>

 

3.-
Operadors.

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".
 
4.- Barreja de tipus.

Operacions entre cadenes i valors numèrics:


En algunes ocasions és necessari concatenar cadenes amb dades que no són cadenes, per exemple, pot ser necessari concatenar un tipus cadena amb un tipus enter. En aquests casos es pot fer directament ja que JavaScript detecta aquesta situació i, automàticament, efectua la conversió del tipus numèric a cadena. En el següent exemple:

    var perfecte = "Nota: " + 10;

La variable "perfecte" contindrà el valor de cadena "Nota: 10", ja que el numèric 10 s'haurà convertit automàticament, per part de JavaScript, en una cadena.

La situació contrària no és tan simple d'implementar, si es vol fer una suma algebraica d'un valor de cadena que conté dígits numèrics amb un valor numèric tipus enter, és necessari efectuar una conversió prèvia mitjançant la funció parseInt(cadena). Per exemple: var numero = 3 + "10"; és incorrecte. La forma correcta seria la següent:

    var numero = 4 + parseInt("10");      //numero valdrà 14

La sintaxi completa de parseInt() és: parseInt(cadena[, base]), on el paràmetre opcional base indica la base de numeració.

Pel cas dels valors tipus coma flotant tenim una altra funció equivalent: parseFloat(cadena) . Aquesta funció retornarà el valor numèric en coma flotant d'una cadena amb dígits numèrics en un format de coma flotant.. Per exemple:

    var numdec = 3 + parseFloat("3.6");       //numdec valdrà 6.6