Programació en el costat del client: llenguatges script en els navegadors
-
Vicent Moncho Mas
Llicenciat en Ciències Matemàtiques i enginyer tècnic d'Informàtica. Professor associat de Matemàtica aplicada a la Universitat de València i director de Sistemes i Tecnologies de la Informació de l'Hospital de Dénia.
-
Jordi Ustrell Garrigós
Graduat en Multimèdia per la Universitat Oberta de Catalunya (UOC). Cap de programació a Virtualis Grup Roca i consultor a la UOC de l'assignatura de Programació web dels estudis d'Informàtica, Multimèdia i Telecomunicació.
Índex
- 1.Introducció
- 1.1.Internet
- 1.1.1.Els inicis
- 1.1.2.Components del Web
- 1.2.JavaScript
- 1.1.Internet
- 2.Característiques bàsiques, ubicació de codi i primers passos
- 2.1.Característiques bàsiques
- 2.2.Ubicació del codi
- 2.3.Primers passos
- 2.3.1.El mètode write
- 2.3.2.Inclusió d'etiquetes
- 2.3.3.Detectar errors durant el desenvolupament
- 2.3.4.Depuració del codi
- 3.Variables, operadors i estructures
- 3.1.Paraules reservades
- 3.2.Dades
- 3.3.Literals
- 3.4.Comentaris
- 3.5.Variables
- 3.5.1.Declaració i assignació de variables
- 3.5.2.Àmbit de les variables
- 3.5.3.Conversions de tipus
- 3.6.Operadors
- 3.6.1.Operadors aritmètics
- 3.6.2.Operadors d'assignació
- 3.6.3.Operadors de comparació
- 3.6.4.Operadors lògics o booleans
- 3.6.5.Operadors de bits
- 3.6.6.L'operador +
- 3.6.7.L'operador condicional ?:
- 3.6.8.Signes de puntuació
- 3.6.9.Operadors per al treball amb objectes
- 3.6.10.Precedència d'operadors
- 3.7.Estructures de control condicionals
- 3.8.Estructures de control iteratives
- 3.8.1.L'estructura de control for
- 3.8.2.L'estructura de control while
- 3.8.3.L'estructura de control do ... while
- 3.8.4.La sentència break
- 3.8.5.La sentència continue
- 3.9.La sentència with
- 4.Funcions i objectes bàsics
- 4.1.Definició d'una funció
- 4.1.1.Definició de la funció en JavaScript
- 4.1.2.Ubicació en el document HTML
- 4.1.3.Crida i execució de les funcions
- 4.1.4.Ús dels paràmetres de la funció
- 4.1.5.Propietats de les funcions
- 4.1.6.Retorn de la funció
- 4.1.7.Funcions recursives
- 4.1.8.Funcions locals
- 4.1.9.Funcions com a objectes
- 4.2.Funcions predefinides
- 4.3.Introducció a l’objecte Array
- 4.3.1.Crear un array
- 4.3.2.Accés als elements
- 4.3.3.Afegir i modificar elements en un array
- 4.3.4.Eliminar elements d’un array
- 4.3.5.La propietat length
- 4.1.Definició d'una funció
1.Introducció
1.1.Internet
1.1.1.Els inicis
1.1.2.Components del Web
-
El sistema d'adreçament URL (Uniform Resource Locator), que permet identificar documents o arxius.
-
El protocol HTTP (HyperText Transfer Protocol), que utilitzen els servidors i els clients WWW per a navegar per mitjà d'enllaços entre documents.
-
El llenguatge HTML (HyperText Markup Language), que es fa servir per a presentar la informació.
protocol://servidor[:port][/ruta][/cadena_de_consulta]
1.2.JavaScript
1.2.1.L'origen de JavaScript
|
Versió |
Data de comercialització |
Equivalència |
Netscape |
Mozilla Firefox |
Internet Explorer |
Opera |
Safari |
Google Chrome |
|---|---|---|---|---|---|---|---|---|
|
1.0 |
Març de 1996 |
2.0 |
3.0 |
|||||
|
1.1 |
Agost de 1996 |
3.0 |
||||||
|
1.2 |
Juny de 1997 |
4.0-4.05 |
||||||
|
1.3 |
Octubre de 1998 |
Especificació ECMA-262 1a. / especificació ECMA-262 2a. |
4.06-4.7x |
4.0 |
||||
|
1.4 |
Netscape Server |
|||||||
|
1.5 |
Novembre de 2000 |
Especificació ECMA-262 3a. |
6.0 |
1.0 |
5.5 (JScript 5.5) 6 (JScript 5.6) 7 (JScript 5.7) 8 (JScript 5.8) |
6.0 |
3.0-5 |
1.0-10.0.666 |
|
1.6 |
Novembre de 2005 |
1.5 + arrays extres + arrays i strings genèriques + E4X |
1.5 |
|||||
|
1.7 |
Octubre de 2006 |
1.6 + generadors de Python + iteradors + let |
2.0 |
|||||
|
1.8 |
Juny de 2008 |
1.7 + generador d'expressions + expressions closure |
3.0 |
11.50 |
||||
|
1.8.1. |
1.8 + suport natiu JSON + actualitzacions menors |
3.5 |
||||||
|
1.8.2. |
Juny de 2009 |
1.8.1 + actualitzacions menors |
3.6 |
|||||
|
1.8.5. |
Juliol de 2010 |
1.8.2 + compatibilitat amb ECMAScript 5 |
4 |
9 |
11.60 |
1.2.2.JavaScript i la programació de scripts CGI
-
El client indica un URL que es correspon amb un fitxer que s'executa en el servidor.
-
La resposta a aquesta execució és la devolució del servidor d'un document HTML.
-
Validar l'entrada d'usuari en un formulari.
-
Sol·licitar a l'usuari la confirmació abans d'executar una acció i mostrar finestres que adverteixin d'errors o perills.
-
Processar les dades rebudes del servidor (sumes, mitjanes, etc.).
-
Introduir sentències condicionals en el codi HTML.
-
Portar a terme, en general, qualsevol acció que no requereixi informació del servidor.
-
Mantenir informació d'una sèrie d'accessos de clients.
-
Mantenir dades compartides entre diversos clients o aplicacions.
-
Accedir a bases de dades o fitxers del servidor.
-
Trucar a biblioteques externes del servidor.
-
Personalitzar miniaplicacions de Java dinàmicament; per exemple, visualitzar dades usant una miniaplicació de Java.
2.Característiques bàsiques, ubicació de codi i primers passos
2.1.Característiques bàsiques
-
JavaScript és un llenguatge interpretat (no requereix compilació): l'intèrpret és el propi navegador de l'usuari, que s'encarrega d'executar les sentències JavaScript.
-
JavaScript és un llenguatge basat en objectes: el model d'objectes de JavaScript inclou els elements necessaris per a poder accedir a la informació continguda en una pàgina HTML i actuar sobre la interfície del navegador.
-
JavaScript és un llenguatge orientat a esdeveniments: permet desenvolupar scripts que executin accions en resposta a un esdeveniment ocorregut en el navegador, per exemple, a un clic de ratolí sobre un gràfic.
2.2.Ubicació del codi
-
JavaScript incrustat en el codi HTML.
-
JavaScript en un arxiu .js referenciat des de la pàgina HTML.
<script type="text/javascript"> //Sentències JavaScript </script>
2.2.1.JavaScript incrustat en el codi HTML
<html> <head> <title>El meu document</title> </head> <body> <script type="text/javascript"> //Sentències JavaScript </script> </body> </html>
<html>
<head>
<title>Exemple</title>
</head>
<body>
<script type="text/javascript">
document.write("Això és un exemple. L'script és en el cos del document.");
</script>
</body>
</html>
<html> <head> <title>Exemple</title> <script type="text/javascript"> //Sentències JavaScript </script> </head> <body> </body> </html>
<html>
<head>
<title>Exemple</title>
<script type="text/javascript">
function salutacio(){
alert("Hola");
}
</script>
</head>
<body onLoad="salutacio()">
</body>
</html>
<html> <head> <title>Exemple</title> <script type="text/javascript"> //Sentències JavaScript </script> </head> <body> <script type="text/javascript"> //Sentències JavaScript </script> </body> </html>
2.2.2.Inclusió de fitxers .js en les pàgines HTML
<html> <head> <title>Exemple</title> <script type="text/javascript" src="biblioteca.js"></script> </head> <body> </body> </html>
<script type="text/javascript" src="https://www.gem.com/biblioteca.js"></ script >
2.2.3.Quan el navegador no suporta JavaScript
<script type="text/javascript">
document.write("Hora actual ETS:" + currentTime)
</script>
<noscript>
Enllaçar a una pàgina que mostra el temps per un script de servidor
Consultar <a href="time.htm"> ara </ a>
</noscript>
2.3.Primers passos
-
Escriure el codi en el document de text mitjançant l'editor de textos.
-
Desar l'última versió en el disc.
-
Visualitzar el document en el navegador. Si el document ja s'ha visualitzat prèviament, serà suficient d’actualitzar la pàgina.
2.3.1.El mètode write
document.write(cadena de text);
document.write("El meu primer JavaScript");
texto = "El meu primer JavaScript"; document.write(text);
nombre = "Maria";
document.write("Hola " + nom);
nombre = "Maria";
alert("Hola\n" + nom);
|
Caràcters especials |
|
|---|---|
|
Caràcter |
Significat |
|
\n |
Nova línia |
|
\t |
Tabulador |
|
\r |
Retorn de carro |
|
\f |
Salt de “pàgina” (caràcter ASCII 12) |
|
\b |
Retrocés d'un espai |
<html>
<head>
<title>Exemple</title>
</head>
<body>
<script type="text/javascript">
nom="Maria";
document.write("Hola\n" + nom);
</script>
</body>
</html>
document.writeln(cadena de text)
<pre>
<script type="text/javascript" >
nom = "Maria";
document.writeln("Hola");
document.write(nom);
</script>
</pre>
2.3.2.Inclusió d'etiquetes
<html>
<head>
<title>Exemple</title>
</head>
<body>
<script type="text/JavaScript">
nombre="Maria" ;
document.write("Hola<br>" + nom) ;
</script>
</body>
</html>
2.3.3.Detectar errors durant el desenvolupament
2.3.4.Depuració del codi
|
Mètodes de l'objecte Console |
|
|---|---|
|
log(missatge) |
Escriviu un missatge mostrant el contingut que rep com a paràmetre. |
|
warn(missatge) |
Escriviu un missatge d'alerta mostrant el contingut que rep com a paràmetre. |
|
error(missatge) |
Escriviu un missatge d'error mostrant el contingut que rep com a paràmetre. |
|
info(missatge) |
Escriviu un missatge informatiu mostrant el contingut que rep com a paràmetre. |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Exemple de depuració de codi</title>
<script type="text/JavaScript" >
console.log("Això és un missatge de registre");
console.warn("Això és un missatge d'advertència");
console.error("Això és un missatge d'error");
console.info("Això és un missatge informatiu");
</script>
</head>
<body>
</body>
</html>
console.log( param1, param2, param3, ... paramN);
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Escriure objectes a la consola</title> <script type="text/JavaScript" > animal = new Object(); animal.tipus = "Gos"; animal.nom = "Tom"; console.log(animal); </script> </head> <body> </body> </html>
3.Variables, operadors i estructures
3.1.Paraules reservades
|
Paraules reservades de Javascript |
||||
|---|---|---|---|---|
|
abstract |
delete |
function |
Null |
throw |
|
boolean |
do |
goto |
Package |
throws |
|
break |
double |
if |
private |
transient |
|
byte |
else |
implements |
protected |
true |
|
case |
enum |
import |
public |
try |
|
catch |
export |
in |
return |
typeof |
|
char |
extends |
instanceof |
short |
var |
|
class |
false |
int |
static |
void |
|
const |
final |
interface |
super |
while |
|
continue |
finally |
long |
switch |
with |
|
debugger |
float |
native |
syncronized |
true |
|
default |
for |
new |
this |
|
3.2.Dades
|
Tipus de dades |
||
|---|---|---|
|
Tipus |
Descripció |
Exemples |
|
Nombre |
Qualsevol valor numèric. |
5, 12.8, 2e6, ... (*) |
|
Cadena |
Qualsevol cadena de text. S'expressa entre cometes dobles o simples. |
“Hola”, ‘Hola’ |
|
Booleà |
Només dos possibles valors: true (vertader) i false (fals). |
If (entrada == 10) pas = true else pas = false |
|
NULL |
Paraula clau per a indicar que no hi ha valor. |
Nom.value = null |
|
Objecte |
Estructura complexa que conté propietats i mètodes. |
|
|
Funció |
Conjunt de sentències que realitzen una tasca específica. |
|
3.3.Literals
-
Literals numèrics: un literal numèric és qualsevol nombre enter o real expressat en base decimal, octal o hexadecimal, per exemple, 13, ‒8, 125.34, 0xFF.
-
Literal cadenes de text: s'expressen entre cometes dobles o simples, per exemple, “Hola”, “1234”, ‘Pepe’.
-
Literals booleans: només poden tenir dos valors, true i false.
3.4.Comentaris
// Línia de comentari
/* comentari de vàries línies */
3.5.Variables
3.5.1.Declaració i assignació de variables
var nom_variable; nom_variable = valor;
var resultat; resultat = 5 + 2;
nom = "Maria";
document.write("Hola" + nom);
var resultat = 5 + 2;
var x,y,z;
3.5.2.Àmbit de les variables
var x = 1; // x accessible dins i fora de la funció proves
y = x + 2; // y accessible dins i fora de la funció proves
function proves(){
var z = y + 1 // z només accessible dins de la funció proves
w = x + z + 4 // w és accessible dins i fora de la funció proves
document.write("El valor de w és " + w )
}
3.5.3.Conversions de tipus
lameva_var = "1000";
lameva_var = 1000;
lameva_var1 = "13"; lameva_var2 = 5; x = lameva_var1 + lameva_var2;
3.6.Operadors
-
Operadors aritmètics
-
Operadors d'assignació
-
Operadors de comparació
-
Operadors booleans
-
Operadors de bits
-
Operadors especials: l'operador +, l'operador ?:, els signes de puntuació (coma, parèntesis i claudàtors) i els operadors per al treball amb objectes
3.6.1.Operadors aritmètics
|
Operadors aritmètics |
|||
|---|---|---|---|
|
Operador |
Descripció |
Exemple |
Resultat |
|
+ |
Suma |
3 + 4 |
7 |
|
- |
Resta |
3 – 4 |
–1 |
|
++ |
Increment |
3++ |
4 |
|
-- |
Decrement |
3-- |
2 |
|
* |
Producte |
3 * 4 |
12 |
|
/ |
Divisió |
3 / 4 |
0.75 |
|
% |
Mòdul (resta de la divisió) |
3 % 4 |
3 |
|
- |
Menys unari (negació) |
– (3 + 4) |
–7 |
x = 13; y = ++x;
x = 13; y = x++;
3.6.2.Operadors d'assignació
|
Operadors d'assignació |
|||
|---|---|---|---|
|
Operador |
Descripció |
Exemple |
Equival a... |
|
= |
Assigna |
x = y + z |
|
|
+= |
Suma i assigna |
x += y |
x = x + y |
|
-= |
Resta i assigna |
x -= y |
x = x - y |
|
*= |
Multiplica i assigna |
x *= y |
x = x * y |
|
/= |
Divideix i assigna |
x /= y |
x = x / y |
|
%= |
Calcula el mòdul i assigna |
x %= y |
x = x % y |
3.6.3.Operadors de comparació
|
Operadors de comparació |
|||
|---|---|---|---|
|
Operador |
Descripció |
Exemple |
Resultat |
|
== |
Igualtat |
3 == “3” |
Cert |
|
!= |
Desigualtat |
3 != “3” |
Fals |
|
< |
Més petit |
3 < 3 |
Fals |
|
> |
Més gran |
3 > 3 |
Fals |
|
<= |
Més petit o igual |
3 <= 3 |
Cert |
|
>= |
Més gran o igual |
3 >= 3 |
Cert |
|
=== |
Igualtat estricta |
3 === “3” |
Fals |
|
!== |
Desigualtat estricta |
3 !== “3” |
Cert |
3.6.4.Operadors lògics o booleans
-
L'operador NOT, que és un operador unari (aplicat a un únic operant). La seva lògica és molt simple: canvia el valor de cert a fals i viceversa.
-
L'operador OR, que es pot aplicar a dos o més operands. Si tots els operands són falsos, assigna el valor fals. En cas contrari, és a dir, si almenys un és cert, assigna el valor cert.
-
L'operador AND, que es pot aplicar a dos o més operands. Si tots són certs, assigna el valor cert. En cas contrari, és a dir, si almenys un és fals, assigna el valor fals.
|
Operadors lògics |
|||
|---|---|---|---|
|
Operador |
Descripció |
Exemple |
Resultat |
|
&& |
i (AND) |
x = 1 (x > 0) && (x <= 5) |
Cert |
|
|| |
o (OR) |
x = 1 (x > 5) || (x == 0) |
Fals |
|
! |
negació (NOT) |
x = 1 !(x > 5 ) |
Cert |
3.6.5.Operadors de bits
|
Operadors de bits |
|
|---|---|
|
Operador |
Descripció |
|
& |
(AND) Retorna un 1 si els dos valors són 1. |
|
| |
(OR) Retorna un 1 si almenys un dels dos valors és 1. |
|
^ |
(XOR) Retorna un 1 si solament un dels dos valors és 1. |
|
<< |
Desplaçament a l'esquerra d'un determinat nombre de bits. Els espais de la dreta que queden “buits” s'emplenen amb 0. |
|
>> |
Desplaçament a la dreta d'un determinat nombre de bits i afegeix per l'esquerra els bits que s'han desbordat per la dreta |
|
>>> |
Desplaçament a la dreta d'un determinat nombre de bits. Els espais de l'esquerra que queden “buits” s'emplenen amb 0. |
|
&= |
x&=i equival a x =x&i |
|
|= |
x|=i equival a x =x|i |
|
^= |
x^=i equival a x =x^i |
|
<<= |
x<<=i equival a x =x<<i |
|
>>= |
x>>=i equival a x =x>>i |
|
>>>= |
x>>>=i equival a x =x>>>i |
3.6.6.L'operador +
x = 1; y = x + 13
nombre = "Maria"; frase = "Hola " + nom;
3.6.7.L'operador condicional ?:
condició ? valor1 : valor2;
x = 5 <= 8 ? 1 : 4
3.6.8.Signes de puntuació
var x,y,z;
x = suma(3,4); //s'assigna a x el resultat de la funció suma x = (y+3)*3; //s'assigna a x el producte per 3 del valor de y sumat a 3
3.6.9.Operadors per al treball amb objectes
|
Operadors per al treball amb objectes |
||
|---|---|---|
|
Operador |
Descripció |
Exemple |
|
new |
Crea un objecte. |
avui = new Date() |
|
delete |
Destrueix un objecte o un element d'un array. |
delete avui; delete vector[1]; |
|
this |
Referencia l'objecte actual. |
|
|
in |
Ítem en l'objecte. |
|
|
typeof |
Instància de l'objecte. |
|
|
void |
Retorn de cap valor. |
|
3.6.10.Precedència d'operadors
document.write( 5 - ( 2 * 2 ) );
document.write( ( 5 - 2 ) * 2 );
|
Prioritat d'operadors |
|
|---|---|
|
Crida a una funció i membre de... |
( ) [ ] |
|
Negació, menys unari, increment i decrement |
! - ++ -- |
|
Producte, divisió i mòdul |
* / % |
|
Suma i resta |
+ ‒ |
|
Desplaçament de bits |
>> << >>> |
|
Comparació de relació |
< <= > >= |
|
Comparació d'igualtat i desigualtat |
== != |
|
AND binari |
& |
|
XOR binari |
^ |
|
OR binari |
| |
|
AND lògic |
&& |
|
OR lògic |
|| |
|
Condicional |
?: |
|
Assignació |
= += -= *= /= %= &= |= ^= <<= >>= >>>= |
|
Coma |
, |
X = 5+4*3; // el producte té més prioritat, per tant X = 17 X = ++X*3; // es calcula l'increment i a continuació el producte i el resultat és X = 54 X = 2; Y = 7; Z = (Y++ - X) + Y; //El valor final de Z serà 13
3.7.Estructures de control condicionals
-
if... else, que en la forma més simple pot ometre l'else i, en els casos més complexos, pot prendre la forma if... else if...
-
switch
3.7.1.Estructura de control if...
if ( condició ){
//grup de sentències
}
var resp = prompt("Introdueix el codi per veure la salutació","");
if (resp=="csi") document.write("<h3>Benvingut al nostre lloc web</h3>");
3.7.2.L'estructura de control if ... else
if ( condició ){
//grup de sentències 1
} else {
//grup de sentències 2
}
var resp = prompt("Introdueix el número del mes actual","");
if ( resp == "8" ){
document.write("Som a l'agost");
} else {
document.write("No som a l'agost");
}
condició ? expressió1 : expressió2 ;
resp == "8" ? document.write("Som a l'agost") : document.write("No som a l'agost");
3.7.3.L'estructura de control if ... else if ...
if ( condició1 ){
//grup de sentències 1
} else if ( condició2 ) {
//grup de sentències 2
}
var dia = prompt("Introdueix el número de dia de la setmana:", 0);
if (dia == 1){
document.write("Avui és dilluns");
} else if (dia == 2){
document.write("Avui és dimarts");
} else if (dia == 3){
document.write("Avui és dimecres");
} else if (dia == 4){
document.write("Avui és dijous");
} else if (dia == 5){
document.write("Avui és divendres");
} else if (dia == 6){
document.write("Avui és dissabte");
} else if (dia == 7){
document.write("Avui és diumenge");
} else {
document.write("El dia ha de ser entre 1 i 7");
}
3.7.4.L'estructura de control switch
switch ( variable ){
case valor1:
//grup de sentències 1
break;
case valor2:
//grup de sentències 2
break;
.......................
case valorN:
//grup de sentències N
break;
default:
//grup de sentències si no es compleix cap dels casos anteriors
}
var diac = prompt("Introdueix el número de dia de la setmana:", 0);
var dia = parseInt(diac);
switch(dia){
case 1: document.write("Avui és dilluns");
break;
case 2: document.write("Avui és dimarts");
break;
case 3: document.write("Avui és dimecres");
break;
case 4: document.write("Avui és dijous");
break;
case 5: document.write("Avui és divendres");
break;
case 6: document.write("Avui és dissabte");
break;
case 7: document.write("Avui és diumenge");
break;
default:document.write("El dia ha de ser entre 1 i 7");
}
3.8.Estructures de control iteratives
-
for
-
while
-
do ... while
3.8.1.L'estructura de control for
for ([expressió inicialització];[condició];[expressió increment o decrement] ){
//grup d'accions
}
for (comptador = valor inicial; comptador <= valor final; comptador += increment ){
//grup d'accions
}
for (comptador = valor inicial; comptador >= valor final; comptador -= decrement] ){
//grup d'accions
}
for ( var i = 0; i < 11; i++ ){
result = i * 2;
document.write( "2 * " + i + " = " + result + "<br>");
}
3.8.2.L'estructura de control while
while (condició){
//grup d'accions
}
var suma = 0;
var num = parseInt( prompt("Introdueix un nombre més gran que 0", "") );
if (num > 0){
while(num > 0){
suma += num;
num--;
}
document.write("La suma dels valors més petits o iguals que el valor introduït és: <b>" + suma
+ "</b>");
}
3.8.3.L'estructura de control do ... while
do{
//grup d'accions;
} while(condició)
var resp = "";
var exp = "";
do{
exp = prompt("Introdueix una expressió matemàtica", "");
alert("El resultat de l'expressió és: " + eval(exp) );
resp = prompt("Vols fer un altre càlcul? (s/n)", "s");
}while( resp == "S" || resp == "s")
3.8.4.La sentència break
for ( var i = 0; i < 11; i++ ){
result = i * 2;
document.write( "2 * " + i + " = " + result + "<br>");
resp = prompt("Vols continuar?","s");
if ( resp == "n" || resp == "N" ) break;
}
3.8.5.La sentència continue
for ( var i = 0; i < 11; i++ ){
if ( i == 5 ) continue;
result = i * 2;
document.write( "2 * " + i + " = " + result + "<br>");
}
for ( var i = 0; i < 11; i++ ){
if ( i != 5 ) {
result = i * 2;
document.write( "2 * " + i + " = " + result + "<br>");
}
}
3.9.La sentència with
with ( objecte ){
//grup de sentències
}
ciutats = new Array("Barcelona", "Ciutat de Mallorca", "Càceres", "Sevilla")
with (ciutats){
sort();
reverse();
}
document.write("Les dades finalment són: " + ciutats);
ciutats.sort(); ciutats.reverse();
4.Funcions i objectes bàsics
4.1.Definició d'una funció
4.1.1.Definició de la funció en JavaScript
-
el nom de la funció.
-
la llista de paràmetres de la funció, tancats entre parèntesis i separats per comes.
-
les sentències JavaScript que defineixen la funció, tancades entre claus.
function nom_funcio( [paràmetre 1, paràmetre 2, ... ] ){
bloc de sentències;
}
|
Exemples de noms admesos per a les funcions |
||
|---|---|---|
function VeureMissatge()
{
document.write("Hola")
}
|
function veure_missatge()
{
document.write("Hola")
}
|
function _veureMissatge()
{
document.write("Hola")
}
|
4.1.2.Ubicació en el document HTML
<html>
<head>
<title>Exemple funció</title>
<script type="text/javascript">
<!--
function nom_funcio(paràmetres){
bloc de sentències
}
//-->
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<title>El meu document</title>
<script type="text/javascript">
<!--
function nom_funcio_1(paràmetres){
bloc de sentències
}
function nom_funcio_2(paràmetres){
bloc de sentències
}
//-->
</script>
</head>
<body>
</body>
</html>
4.1.3.Crida i execució de les funcions
<html>
<head>
<title>Exemple crides</title>
<script type="text/javascript">
<!--
function salutacio() {
alert("Hola");
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p> Pitja el botó:
<form name="elmeuForm">
<input type="button" name="botó" value="Salutació" onClick="javaScript: salutacio()" >
</form>
</p>
</body>
</html>
4.1.4.Ús dels paràmetres de la funció
function salutació(text) {
alert(text);
}
<html>
<head>
<title>Exemple crides</title>
<script type="text/javascript">
<!--
function salutacio(text) {
alert(text);
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p>Pitja el boto:
<form name="elmeuForm">
<input type="button" name="boto1" value="Salutacio 1" onClick="javaScript:salutacio('Hola Joan')">
<br><br>
<input type="button" name="boto2" value="Salutacio 2" onClick="javaScript:salutacio('Hola Maria')">
</form>
</p>
</body>
</html>
onClick="javaScript:salutacio('Hola Joan')"
onClick="javaScript:salutacio("Hola Joan")"
4.1.5.Propietats de les funcions
function calcula(par1,par2,par3){
//bloc de codi
}
alert("La funció calcula es defineix amb " + calcula.length + " paràmetres.");
function sumadora()
{
var total=0;
for (var i=0; i< sumadora.arguments.length; i++)
{
total += sumadora.arguments[i];
}
resultat=total;
}
alert(sumadora(2,3,6,5,4,1));
4.1.6.Retorn de la funció
function quadrat(num){
resultat = num * num;
return resultat;
}
nom_variable = nom_funcio(paràmetres)
<html>
<head>
<title>Exemple funció</title>
<script type="text/javascript">
<!--
function quadrat(num){
resultat = num * num;
return resultat;
}
function calcul() {
resul = quadrat(7);
alert("el quadrat del número 7 és: " + resul);
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p>Pitja el botó:</p>
<form name="elmeuForm">
<p> <input type="button" name="boto" value="Calcula" onClick="javaScript:calcul()">
</p>
</form>
</body>
</html>
function calcul() {
alert("el quadrat del número 7 és: " + quadrat (7));
}
4.1.7.Funcions recursives
<html>
<head>
<title>Exemple funció recursiva</title>
<script type="text/javascript">
<!--
function Factorial(num){
if (num==0) return 1;
else return ( num * Factorial(num - 1) )
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
document.write( Factorial(5) )
</script>
</body>
</html>
4.1.8.Funcions locals
function nom_funcio( [paràmetre 1, paràmetre 2, ... ] ){
function nom_local([paràmetre 1, paràmetre 2, ...]){
bloc de sentències
}
bloc de sentències
}
4.1.9.Funcions com a objectes
var nomFuncio = new Function("paràmetre 1", "paràmetre 2",...,"bloc de sentències");
var salutacio = new Function("nom", "alert('Benvingut '+nom); ");
salutacio("Victor");
4.2.Funcions predefinides
|
Eval |
|
|---|---|
|
Descripció |
Avalua i executa l'expressió o sentència continguda en la cadena de text que rep com a paràmetre. |
|
Sintaxi |
eval( cadena de text) |
|
Exemple |
missatge = 'Hola Joan’; eval("alert(' " + missatge + " ')"); |
|
parseInt |
|
|---|---|
|
Descripció |
Converteix una cadena de text en un nombre enter segons la base indicada. Si s'omet la base, se suposa que està en base 10. Si la conversió produeix un error, retorna el valor NaN. |
|
Sintaxi |
parseInt( cadena de text, [base]) |
|
Exemple |
Any = parseInt(“2001”); Any += 100; |
|
parseFloat |
|
|---|---|
|
Descripció |
Converteix una cadena de text en un nombre real. Si la conversió produeix un error, retorna el valor NaN. |
|
Sintaxi |
parseFloat( cadena de text) |
|
Exemple |
Pi = parseFloat(“3.141516”); A = pi * r * r; |
|
isNaN |
|
|---|---|
|
Descripció |
Retorna true si el paràmetre és NaN, i false en cas contrari. |
|
Sintaxi |
isNaN( valor ) |
|
Exemple |
if ( isNaN(“2001”) ) { alert( “No és una dada numèrica” ); } |
function valida(any){
if (isNaN(Number(any))) alert("Dada incorrecta. Torna a introduir la dada sol·licitada")
}
|
isFinite |
|
|---|---|
|
Descripció |
Retorna true si el paràmetre és un nombre finit, i false en cas contrari. |
|
Sintaxi |
isFinite( nombre ) |
|
Exemple |
if ( isFinite(2001) ) alert( “ok” ); |
|
Number |
|
|---|---|
|
Descripció |
Converteix a nombre una expressió. Si la conversió produeix un error, retorna el valor NaN. |
|
Sintaxi |
Number( expressió ) |
|
Exemple |
Number( “2001” ) retorna 2001; |
|
Number( “Hola” ) retorna NaN; |
|
|
String |
|
|---|---|
|
Descripció |
Converteix a cadena de text una expressió. Si la conversió produeix un error, retorna el valor NaN. |
|
Sintaxi |
String( expressió ) |
|
Exemple |
String(123456); |
<html>
<head>
<title>Exemple funcions</title>
</head>
<body bgcolor="#FFFFFF">
<script type="text/javascript">
vcadena = "Hola Joan";
vnombre = 2001;
alert(eval(vnombre + "25")); // mostra 200125
alert(eval(vnombre + 25)); // mostra 2026
alert( parseInt(vcadena)); // mostra NaN
alert( parseInt("2001")); // mostra 2001
alert( parseInt(3.141516)); // mostra 3
alert( parseInt(vnombre + 3.141516)); // mostra 2004
alert( parseInt("24 hores")); // mostra 24
alert( parseFloat(vcadena)); // mostra NaN
alert( parseFloat(vnombre)); // mostra 2001
alert( parseFloat("3.141516")); // mostra 3.141516
alert(isNaN(eval(vnombre + "25"))); // mostra false
alert(isNaN(parseInt(vcadena))); // mostra true
alert(isFinite(vnombre)); // mostra true
alert(isFinite(vcadena)); // mostra false
alert(isFinite(vnombre/0)); // mostra false
alert(Number("1234")); // mostra 1234
alert(Number(vcadena)); // mostra NaN
alert(Number("2 peixos")); // mostra NaN
alert(String(vnombre) + " anys"); // mostra el text 2001 anys
alert( String(vnombre + 3.141516)); // mostra 2004.141516
</script>
</body>
</html>
|
encodeURI |
|
|---|---|
|
Descripció |
Converteix una cadena de text que representa una cadena URI vàlida. |
|
Sintaxi |
encodeURI( String ) |
|
Exemple |
<html> <body onLoad="javascript:location.href=encodeURI('https://www.eldominio.es/pepeillo de los palotes.htm')"> </body> </html> El retorn seria el text: https://www.eldominio.es/pepeillo%20de%20els%20palotes.htm |
|
decodeURI |
|
|---|---|
|
Descripció |
Descodifica una cadena URI codificada. |
|
Sintaxi |
decodeURI( String ) |
|
Exemple |
<html> <body onLoad="javascript:alert(decodeURI('https://www.eldominio.es/pepeillo%20de%20los%20palotes.htm'))"> </body> </html> El retorn seria: https://www.eldominio.es/pepeillo delspalotes.htm |
|
encodeURIComponent |
|
|---|---|
|
Descripció |
Converteix una cadena de text que representa un component d'una cadena URI. |
|
Sintaxi |
encodeURIComponent( String ) |
|
Exemple |
<html> <body onLoad="javascript:alert(encodeURIComponent('pagina:2.htm'))"> </body> </html> El retorn seria el text: pagina%3A2.htm amb la funció encodeURI hauria retornat: pagina:2.htm ja que els ”:” són un delimitador. |
|
decodeURIComponent |
|
|---|---|
|
Descripció |
Descodifica un component d'una cadena URI codificada. |
|
Sintaxi |
decodeURIComponent( String ) |
|
Exemple |
<html> <body onLoad="javascript:alert(decodeURIComponent('pagina%3A2.htm'))"> </body> </html> El retorn seria: pagina:2.htm |
|
Escape |
|
|---|---|
|
Descripció |
Converteix una cadena de text que representa una cadena URI vàlida. |
|
Sintaxi |
escape( String, [,1] ) el paràmetre opcional 1 determina si es codificaran els caràcters delimitadors. |
|
Unescape |
|
|---|---|
|
Descripció |
Descodifica una cadena de text que representa una cadena URI vàlida. |
|
Sintaxi |
unescape( String ) |
|
toString |
|
|---|---|
|
Descripció |
Converteix un objecte en una cadena de text. El resultat depèn de l'objecte al qual s'aplica. Els casos són els següents: String : retorna el mateix string. Number: retorna l’string equivalent. Boolean: true o false. Array: els elements de l'array separats per comes. Function: el text que defineix la funció. Alguns dels objectes DOM que no tenen gens que retornar com string, si se'ls aplica la funció toString retornen alguna cosa com: [object tipus de l'objecte]. |
|
Sintaxi |
toString( [base] ) |
|
Exemple |
... var lletres= new Array("a", "b", "c") document.write(lletres.toString()) ... El resultat a la pàgina seria: a,b,c |
4.3.Introducció a l’objecte Array
4.3.1.Crear un array
var vector1 = new Array();
var vector2 = new Array(longitud);
var vector3 = new Array(element0, element1, ..., elementN);
colors = new Array(16); colors[0] = "Blau"; colors[1] = "Groc"; colors[2] = "Verd";
colors = new Array("Blau", "Vermell", "Verd");4.3.2.Accés als elements
-
Els arrays s'indexen a partir del valor zero, de manera que el primer valor de l'array ha de tenir l'índex 0.
-
Si es consulta un element de l'array que no ha estat assignat, l'array retornarà el valor undefined.
var vector1 = [22, 26, 28]; var primer = vector1[0]; var segon = vector1[1]; var fora = vector1[3];
4.3.3.Afegir i modificar elements en un array
vector1[3] = 32;
4.3.4.Eliminar elements d’un array
delete vector1[3];
4.3.5.La propietat length
var vector3 = new Array(); vector3[50] = "Hola Món"; longitud = vector3.length;