|
Índex |
Miguel A. Almarza
|
||||
|
|
Variables de tipus string: Es creen quan assignem un tira de caràcters delimitats amb comentes o amb apòstrofs a a aquesta variable. Quan posem com a delimitador les cometes pot incloure's l'apòstrof com un caràcter del text i al contrari, si fem ús de l'apòstrof com a delimitador llavors podem incloure les cometes.
Cal fer esment que quan es crea una variable de tipus string en realitat es crea un objecte de tipus String que ens permet fer ús de tots els mètodes i propietats d'aquest objecte.
Amb les següents instruccions es crea una variable (i objecte) de tipus String i accedim a la propietat length (número de caràcters) i als mètodes toUpperCase() i toLowerCase() (passa a lletres majúscules o minúscules):
| Objecte String |
var Nom="Puig Paalop, Pere";
document.write("Nom a majúscules: ",Nom.toUpperCase(),"<br>");
document.write("Nom a mínúscules: ",Nom.toLowerCase(),"<br>");
document.write("Nom longitut: ",Nom.length,"<br>");
|
Variables tipus BOOLEAN: Es creen quan assignem a una variable una de les paraules reservades true o false.
| Exemples de variables | Visualització per pantalla |
var Num = 5;
document.write("Num té com a dada ",Num,"<p>");
Num = "Hola";
document.write("Ara Num té com a dada ",Num,"<p>")
var Fet = false;
document.write("Variable lògica Fet: ",Fet,"<p>");
var Nom="Puig Paalop, Pere";
document.write("Nom té com a dada: ",Nom,"<p>");
document.write("Nom a majúscules: ",Nom.toUpperCase(),"<br>");
document.write("Nom a mínúscules: ",Nom.toLowerCase(),"<br>");
document.write("Nom longitut: ",Nom.length,"<br>");
|
Variables globals i variables locals
Les variables declarades fora de qualsevol funció són variables globals i per tant podem fer-ne ús al llarg de tot el codi JavaScript. Las variables declarades dins una funció poden ser locals o globals; si les declarem amb la paraula reservada var les variables són locals a la funció i si no fem ús de la paraula var les variables són globals, encara que declarades dins la funció.
| Variables globals i locals | Visualització per pantalla |
<script language="Javascript">
<!--
function ProvaVar()
{
var Mida = 1.98;
NumeroZ = 45;
document.write("Variable local Mida: ",Mida,"<br>");
}
-->
</script>
<h3>Prova de variables globals i locals</h3>
<script language="Javascript">
<!--
var Mida = 1.75;
document.write("Variable global Mida: ",Mida,"<br>");
ProvaVar();
document.write("Variable global Mida ", Mida,"<br>");
document.write("Variable global NumeroZ ",NumeroZ); |
Prova de variables globals i locals |
El constructor dels objectes de tipus array permet fer la declaració de vectors de quatre formes diferents:
Podem veure que els vectors poden contenir dades de diferents tipus en el mateix vector.
També hem de dir que, al contrari que en la major part dels llenguatges, podem fer referència en qualsevol moment a un element que no hi haguem declarat. Es a dir podem incrementar la mida del vector respecte al número d'elements original.
D'aquesta manera, es fa ús de les paraules Cara i Cruz com a índex per a accedir a les freqüències.
| String com a índex | Visualització per pantalla |
<script language="Javascript">
function Caras()
{
var Frecuencia = new Array();
Frecuencia["Cara"]=0;
Frecuencia["Cruz"]=0;
for(i=0;i<10;i++)
{
n=sorteaNumero(1,2) - 1;
if (n==0) Frecuencia["Cara"]++;
else Frecuencia["Cruz"]++;
}
document.frmMoneda.txtCaras.value=Frecuencia["Cara"];
document.frmMoneda.txtCruces.value=Frecuencia["Cruz"];
}
</script>
|
Tirar 10 vegades una moneda |
function ordenCreciente(a1,a2)
{
if (a1<a2) return -1;
if (a1==a2) return 0;
if (a1>a2) return 1;
}
function hazSorteo()
{
llenaVector();
numSorteado.sort(ordenCreciente);
presentaVector();
}
|
| Matrius bidimensionals | Visualització per pantalla |
<script language="Javascript">
fila1=new Array(1,2,3,4);
fila2=new Array(1,1,1,1);
fila3=new Array(5,6,7,8);
A=new Array(fila1,fila2,fila3);
for(i=0;i<3;i++)
{
document.write("<center>");
for(j=0;j<4;j++) document.write(A[i][j]," ");
document.write("</center><br>")
}
|
És molt interesant veure d'aquesta manera les matrius perque podem fer matrius en que les files són registres d'una taula, així la matriu es converteix en una taula de dades.
A l'exemple següent fem una taula 5 alumnes. Fem notar que es crea una funció que construeix aquesta taula en codi HTML per a presentar les dades en el navegador.
| Matrius bidimensionals, taules | Visualització per pantalla |
<script language="Javascript">
function PresentaTaula(taula,capcalera, files, columnes)
{
document.write("<table border>");
document.write("<th>Num</th>");
for(i=0;i<columnes;i++) document.write("<th>",capcalera[i],"</th>");
for(i=0;i<files;i++)
{
document.write("<tr><td>",i+1,"</td>");
for(j=0;j<columnes;j++) document.write("<td>",taula[i][j],"</td>");
document.write("</tr>");
}
document.write("</table>")
}
var titols = new Array("Nom","Adreça","Edat");
var Alumne1= new Array("Pep","Calleja s/n",20);
var Alumne2= new Array("Maria","Cantonada s/n",19);
var Alumne3= new Array("Joana","Indret 125",21);
var Alumne4= new Array("Ramon","Indret 12",19);
var Alumne5= new Array("Roque","Indret 55",23);
var alumnesClase = new Array(Alumne1,Alumne2,Alumne3,Alumne4,Alumne5);
PresentaTaula(alumnesClase,titols,5,3);
</script>
|
| Aritmètics | Asignació | |
| Suma de números i d'strings | + | = |
| Resta i canvi de signe | - | += |
| Multiplicació | * | -= |
| Divisió | / | *= |
| Mòdul | % | /= |
| Pre i post increment | ++ | %= |
| Pre i post decrement | -- | |
| Lògics | ||
| And, i | && | |
| Or, o | ¦¦ | |
| Not, no | ! | |
| Comparació | ||
| Major que | > | |
| Major o igual que | >= | |
| Menor que | < | |
| Menor o igual que | <= | |
| Igual que | == | |
| Diferent de | != | |
| Idèntic | === | |
| No idèntic | !== | |
| Condicional | ||
| ? : | ||
| Operadors lògics de bits | Asignació | |
| AND, i de bits | & | &= |
| Or, o de bits | ¦ | ¦= |
| XOR, o exclisivo | ^ | ^= |
| NOT, no de bits | ~ | |
| Desplaçament a l'esquerra | << | <<= |
| Desplaçament a la dreta amb signe | >> | >>= |
| Desplaçament dreta amb omplir de ceros | >>> | >>>= |
| Comentaris dins el codi | ||
| /**/ | ||
| // | ||
| Altres operadors | ||
| ' | ||
| in | ||
| instanceof | ||
| new | ||
| typedef | ||
| void | ||
| Precedència | Es llegeix de | Operador | Nom de l'operador |
| Precedència major | Esquerra a Dreta | . | Accès a propietat o mètode d'un objecte |
| Esquerra a Dreta | [ ] | Índex d'un vector | |
| Esquerra a Dreta | ( ) | Crida a una funció | |
| Dreta a esquerra | ++ | Pre/post increment | |
| Dreta a esquerra | -- | Pre/post decrement | |
| Dreta a esquerra | - | Canvi de signe | |
| Dreta a esquerra | ~ | Negació de bits | |
| Dreta a esquerra | ! | No lògic | |
| Dreta a esquerra | delete | Esborra propietat | |
| Dreta a esquerra | new | Crea objecte nou | |
| Dreta a esquerra | typeof | Torna tipus de dades | |
| Dreta a esquerra | void | Torna el valor no definit | |
| Esquerra a Dreta | *, /, % | Multiplicació, divisió, mòdul | |
| Esquerra a Dreta | +, - | Suma, resta | |
| Esquerra a Dreta | + | Concatenació d'strings | |
| Esquerra a Dreta | << | Desplaçament a esquerra | |
| Esquerra a Dreta | >> | Desplaçament a dreta | |
| Esquerra a Dreta | >>> | Desplaçament a dreta amb ceros | |
| Esquerra a Dreta | <, <= | Menor i menor o igual | |
| Esquerra a Dreta | >, >= | Major i major o igual | |
| Esquerra a Dreta | == | Igualdat | |
| Esquerra a Dreta | != | Desigualtat | |
| Esquerra a Dreta | === | Identitat | |
| Esquerra a Dreta | !=== | No idèntic | |
| Esquerra a Dreta | & | AND, i de bits | |
| Esquerra a Dreta | ^ | XOR, o exclusiva de bits | |
| Esquerra a Dreta | ¦ | Or, o de bits | |
| Esquerra a Dreta | && | AND, i lògic | |
| Esquerra a Dreta | ¦¦ | OR, o lògic | |
| Dreta a Esquerra | ? : | Condicional | |
| Dreta a Esquerra | = | Assignació | |
| Dreta a Esquerra | *=, /=, +=, -=, <<=, >>=, >>>=, &=, ^=, ¦= | Operació més assignació | |
| Precedència menor | Esquerra a Dreta | . | Evaluació múltiple |
|
| ||||||||||||||
document.formColors.rdColors[1].value
Es a dir, per accedir a qualsevol objecte del formulari haurem d'escriure document.formColors.
Segons veiem a la funció Colors es fa ús de la sentència with per tal d'estalviar-nos l'escriptura cada vegada que hem de fer referència a aquesta expressió.
| Exemple d'ús de with | Visualització per pantalla |
<script language="Javascript">
function Colors()
{
with (document.formColors)
{
for(i=0;i<3;i++)
{
if (rdColors[i].checked)
txtColor.value = rdColors[i].value;
}
}
}
</script>
<form name="formColors">
<input name="txtColor" type="text" value="" size=20><BR>
<input name="rdColors" type="radio" value="groc" onClick="Colors()">Groc<BR>
<input name="rdColors" type="radio" value="vermell" onClick="Colors()">Vermell<BR>
<input name="rdColors" type="radio" value="verd" onClick="Colors()">Verd<BR>
</form>
|
|
| Nota: Fem notar que en fer objectes de tipus radio amb el mateix name crea un vector d'objetes tipus radio din el formulari. | |
| Exemple d'ús de switch | Visualització per pantalla | |
Primera solució: A l'expressió del switch fem ús d'stringsfunction Tradueix()
{
with (document.formColors1)
{
txtColorTriat=selColors.options[selColors.selectedIndex].text;
switch (txtColorTriat)
{
case "Vermell" :
txtTraduit.value="Rojo";
break;
case "Verd" :
txtTraduit.value="Verde";
break;
case "Blau" :
txtTraduit.value="Azul";
break;
}
}
}
Segona solució: A l'expressió del switch fem ús de númerosfunction Tradueix()
{
with (document.formColors1)
{
switch (selColors.selectedIndex)
{
case 0:
txtTraduit.value="Rojo";
break;
case 1:
txtTraduit.value="Verde";
break;
case 2:
txtTraduit.value="Azul";
break;
}
}
}
|
<form name="formColors1"> Tria un color: <select name="selColors" onClick="Tradueix()"> <option selected>Vermell</option> <option>Verd</option> <option>Blau</option> </select> Color traduït: <input type="text" name="txtTraduit" value=""> </form> |