From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../guide/details_of_the_object_model/index.html | 746 ++++++++++++++++++ .../guide/expressions_i_operadors/index.html | 846 +++++++++++++++++++++ files/ca/web/javascript/guide/functions/index.html | 697 +++++++++++++++++ files/ca/web/javascript/guide/index.html | 127 ++++ .../guide/introducci\303\263/index.html" | 140 ++++ 5 files changed, 2556 insertions(+) create mode 100644 files/ca/web/javascript/guide/details_of_the_object_model/index.html create mode 100644 files/ca/web/javascript/guide/expressions_i_operadors/index.html create mode 100644 files/ca/web/javascript/guide/functions/index.html create mode 100644 files/ca/web/javascript/guide/index.html create mode 100644 "files/ca/web/javascript/guide/introducci\303\263/index.html" (limited to 'files/ca/web/javascript/guide') diff --git a/files/ca/web/javascript/guide/details_of_the_object_model/index.html b/files/ca/web/javascript/guide/details_of_the_object_model/index.html new file mode 100644 index 0000000000..9c2442d26f --- /dev/null +++ b/files/ca/web/javascript/guide/details_of_the_object_model/index.html @@ -0,0 +1,746 @@ +--- +title: El model d'objectes en detall +slug: Web/JavaScript/Guide/Details_of_the_Object_Model +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +--- +

{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}

+ +

JavaScript és un llenguatge orientat a objectes basat en prototipus en comptes d'estar basat en classes. Degut a aquesta diferència pot resultar menys evident la forma en que JavaScript permet crear jerarquies d'objectes i proporciona herència de propietats i els seus valors. Aquest capítol pretén aclarir aquest tema.

+ +

Aquest capítol assumeix que teniu certa familiaritat amb JavaScript i sabeu crear objectes simples mitjançant funcions.

+ +

Llenguatges basats en classes vs llenguatges basats en prototipus

+ +

Els llenguatges orientats a objectes basats en classes, com ara Java i C++, es basen en el concepte de tenir dues entitats diferents: classes i instàncies.

+ + + +

Un llenguatge basat en prototipus, com ara JavaScript, no fa aquesta distinció: simplement disposa d'objectes. Un llenguatge basat en prototipus, però, té el concepte de objecte prototipus, un objecte que s'utilitza com a motlle del qual obtindre les propietats inicial d'un nou objecte. Qualsevol objecte pot especificar les seves pròpies propietats, ja sigui quan aquest és creat o be en temps d'execució. A més, qualsevol objecte pot ser associat com el prototipus d'un altre objecte, tot permetent al segon objecte compartir les propietats del primer.

+ +

Definir una classe

+ +

En llenguatge basats en classes hom defineix una classe de forma separada com una definició de classe. En aquesta definició es poden especificar mètodes especials, anomenats constructors, que serveixen per a crear instàncies de la classe a la que pertanyen. Un mètode constructor pot especificar valors inicials per a les propietats d'una instància, així com realitzar altres tasques en temps de creació de l'objecte. Per a crear instàncies d'una classe s'utilitza l'operador new en associació amb un mètode constructor de la classe.

+ +

JavaScript empra un model similar tot i que no disposa de definicions de classes separades dels constructors. En comptes d'això, es defineix una funció constructora per a crear objectes amb un conjunt específic de propietats i valors. Qualsevol funció de JavaScript pot ser utilitzada com a constructor. S'utilitza l'operador new amb una funció constructora per a crear un nou objecte.

+ +

Subclasses i herència

+ +

En els llenguatges basats en classes, es poden crear jerarquies de classes mitjançant la definició de les classes. En una definició de classe es pot especificar que la nova classe és una subclasse d'una classe que ja existeix. La subclasse hereta totes les propietats de la superclasse i pot afegir noves propietats adicionals o bé modificar les heretades. Per exemple, suposem que la classe Employee només inclou les propietats name i department, i la classe Manager és una subclasse de Employee que afegeix la propietat reports. En aquest cas una instància de la classe Manager tindria totes tres propietats: name, department i reports.

+ +

JavaScript implementa l'herència permetent associar un objecte prototipus a qualsevol funció constructora. D'aquesta forma es pot crear exactament l'exemple Employee — Manager, tot i que fent servir una terminologia lleugerament diferent. Primerament cal definir la funció constructora de Employee, tot especificant les propietats nom i departament. Seguidament es defineix la funció constructora de Manager, tot cridant el constructor de Employee i especificant la propietat informes. Finalment s'assigna el nou objecte derivat de Employee.prototype com el prototype de la funció constructora de Manager. Llavors quan es crea un nou objecte de tipus Manager aquest hereta les propietats name i department de l'objecte Employee.

+ +

Afegir i esborrar propietats

+ +

En llenguatges basats en classes les classes són normalment creades en temps de compilació i mentre que les instàncies de la classe poden ser creades tant en temps de compilació com en temps d'execució. No és possible canviar el nombre o el tipus de les propietats d'una classe després d'haver definit la classe. En JavaScript, però, és possible afegir o eliminar propietats de qualsevol objecte en temps d'execució. Si s'afegeix una propietat a un objecte que està sent utilitzat com a prototipus d'un conjunt d'objectes, aquests objectes també rebran la nova propietat.

+ +

Resum de diferències

+ +

La taula següent proporciona un breu resum d'algunes d'aquestes diferències. La resta del capítol descriu els detalls d'utilitzar constructors i prototipus a JavaScript per a crear jerarquies d'objectes i ho compara amb com es faria amb Java.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Taula 8.1 Comparació de sistems d'objectes basats en classes (Java) i basats en prototipus (JavaScript)
Basat en classes (Java)Basat en prototipus (JavaScript)
Les classes i les instàncies són entitats diferents.Qualsevol objecte pot heretar d'un altre objecte.
Es defineix una classe mitjançant una definició de classe; Es crea una instància d'una classe mitjançant un dels seus mètodes constructors.Es defineix i es crea un conunt d'objectes mitjançant funcions constructores.
Es crea un sol objecte amb l'operador new.Es crea un sol objecte amb l'operador new.
+

Les jerarquies d'objectes es construeixen mitjançant definicions de classes per a especificar subclasses de les classes existents.

+ 		+

Les jerarquies d'objectes es construeixen tot assignant un objecte com el prototipus associat amb una funció constructora.

+
Hereta les propietats tot següient la cadena de classes. +

Hereta les propietats tot seguint la cadena de prototipus.

+
+

La definició d'una classe especifica totes les propietats per totes les instàncies de la classe. No és possible afegir propietats dinàmicament en temps d'execució.

+ 		+

Una funció constructora o un prototipus especifiquen un conjunt inicial de propietats. És possible afegir o eliminar propietats de forma dinàmica per a objectes individuals o bé de tot el conjunt d'objectes.

+
+ +

 

+ +

L'exemple Employee

+ +

La resta d'aquest capítol utilitza la jerarquia de Employee que es mostra en la següent figura.

+ +

+ +

Figura 8.1: Una jerarquia d'objectes simple

+ +

Aquest exemple utilitza els objectes següents:

+ + + +

Crear una jerarquia

+ +

Hi ha diverses formes de definir les funcions constructores adequades per a implementar una jerarquia de Employee. Quina escollir-ne una depen en gran mesura del que es vol fer en l'aplicació.

+ +

Aquesta secció mostra com utilitzar definicions molt simples (i comparativament poc flexibles) per a demostrar com funciona l'herència. En aquestes definicions no es pot especificar cap valor de les propietats al crear un objecte. L'objecte creat recentment senzillament té els valors per defecte, que es poden canviar després.

+ +

En una aplicació real probablement es definirien constructors que permetessin especificar valors per les propietats de l'objecte al crear-lo (vegeu Constructors més flexibles per a més informació). De moment aquestes definicions simples demostren com funciona l'herència.

+ +

Les següents definicions en Java i JavaScript de Employee són similars. L'única diferència és que a Java s'ha d'especificar el tipus de cada propietat de forma explícita mentre que a JavaScript no (degut a que Java és un llenguatge de tipatge fort mentre que JavaScript és un llenguatge de tipatge dèbil).

+ + + + + + + + + + + + + + +
JavaScriptJava
+ 
+function Employee() {
+  this.name = "";
+  this.dept = "general";
+}
+
+ 		+ 
+public class Employee {
+   public String name = "";
+   public String dept = "general";
+}
+
+
+ +

Les definicions de Manager i WorkerBee mostren com especificar quin és l'objecte pare dins la cadena d'herència. A JavaScript s'afegeix una instància prototipus com a valor de la propietat prototype de la funció constructora. Això es pot fer en qualsevol moment després d'haver definit el constructor. A Java, en canvi, s'ha d'especificar la superclasse dins la definició de la classe, i aquesta, en conseqüència, no pot canviar-se fora de la definició de classe.

+ + + + + + + + + + + + + + +
JavaScriptJava
+ 
+function Manager() {
+  Employee.call(this);
+  this.reports = [];
+}
+Manager.prototype = Object.create(Employee.prototype);
+
+function WorkerBee() {
+  Employee.call(this);
+  this.projects = [];
+}
+WorkerBee.prototype = Object.create(Employee.prototype);
+
+ 		+ 
+public class Manager extends Employee {
+   public Employee[] reports;
+   public Manager () {
+      super();
+      this.reports = new Employee[0];
+   }
+}
+
+public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      super();
+      this.projects = new String[0];
+   }
+}
+
+
+ +

Les definicions de Engineer i SalesPerson creen objectes que descendeixen de WorkerBee i, per extensió, de Employee. Un objecte d'algun d'aquests tipus té les propietats de tots els objectes de damunt seu a la cadena d'herència. A més les definicions sobreescriuen els valors heretats de la propietat dept amb els nous valors especificats per a aquests objectes.

+ + + + + + + + + + + + + + +
JavaScriptJava
+ 
+function SalesPerson() {
+   WorkerBee.call(this);
+   this.dept = "sales";
+   this.quota = 100;
+}
+SalesPerson.prototype = Object.create(WorkerBee.prototype);
+
+function Engineer() {
+   WorkerBee.call(this);
+   this.dept = "engineering";
+   this.machine = "";
+}
+Engineer.prototype = Object.create(WorkerBee.prototype);
+
+ 		+ 
+public class SalesPerson extends WorkerBee {
+   public double quota;
+   public SalesPerson () {
+      super();
+      this.dept = "sales";
+      this.quota = 100.0;
+   }
+}
+
+public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      super();
+      this.dept = "engineering";
+      this.machine = "";
+   }
+}
+
+
+ +

A l'utilitzar aquestes definicions les instàncies creades per aquests objectes tenen els valors per defecte apropiats per a les seves propietats. La figura 8.3 mostra com utilitzar aquestes definicions de JavaScript per a crear objectes nous i mostra els valors de les propietats per als nous objectes.

+ +
+

El terme instància té un significat tècnic específic per a llenguatges basats en classes. En aquests llenguatges una instància és una instanciació individual d'una classe i és fundamentalment diferent de la classe. A JavaScript, "instància" no té aquest significat tècnic perquè aquest no diferencia entre classes i instàncies, tot i que parlant informalment de JavaScript es pot utilitzar el terme "instància" per a indicar un objecte creat utilitzant una funció constructora particular. Així, en aquest exemple, hom pot dir informalment que jane és una instància d'Engineer. De la mateixa manera, tot i que els termes fill, predecessor i descendent no tenen cap significat formal a JavaScript, aquests poden emprar-se de forma informal per a fer referència a objectes més amunt o bé més avall de la cadena de prototipus.

+
+ +

 

+ +

figure8.3.png
+ Figura 8.3: Creació d'objectes amb definicions simples

+ +

Propietats d'un objecte

+ +

Aquesta secció explica com els objectes hereten propietats d'altres objecte mitjançant la cadena de prototipus i què succeeix quan s'afegeix una propietat en temps d'execució.

+ +

Heretar propietats

+ +

Suposem que creem l'objecte mark a partir de WorkerBee (tal i com es mostra a la Figura 8.3) amb la sentència següent:

+ +
var mark = new WorkerBee;
+
+ +

Quan JavaScript es troba amb l'operador new, aquest crea un nou objecte genèric i passa aquest nou objecte com a valor de la paraula clau this a la funció constructora de WorkerBee. La funció constructora assigna el valor de la propietat project de forma explícita, i assigna implícitament el valor WorkerBee.prototype a la propietat interna __proto__ (el nom d'aquesta propietat conté dos guions baixos tant al principi com al final). La propietat __proto__ determina la cadena de prototipus que s'emprarà per a retornar valors de propietats. Un cop assignades aquestes propietats, JavaScript retorna el nou objecte i la sentència d'assignació associa l'objecte a la variable mark.

+ +

Aquest procés no assigna valors de forma explícita a l'objecte mark (valors locals) per a les propietats que mark hereta a través de la cadena de prototipus. Quan s'intenta obtindre el valor d'una propietat JavaScript primer mira si el valor existeix en aquest objecte. Si és així, aquest és el valor retornat. Si el valor no existeix de forma local, JavaScript recorre la cadena prototipus (mitjançant la propietat __proto__). Si un objecte de la cadena prototipus té un valor per assignat a la propietat, aquest és el valor retornat. Si aquesta propietat no es troba a cap objecte de la cadena prototipus JavaScript determina que l'objete no té aquesta propietat. D'aquesta forma, l'objete mark té les següents propietats i valors:

+ +
mark.name = "";
+mark.dept = "general";
+mark.projects = [];
+
+ +

L'objecte mark hereta els valors per a les propietats name i dept de l'objecte prototipus a mark.__proto__. La propietat projects rep un valor local designat pel constructor WorkerBee. Així és com funciona l'herència de propietats i els seus valors a JavaScript. Es poden trobar alguns detalls d'aquest procès a Un segon cop d'ull a l'herència de propietats.

+ +

Com que aquests constructors no permeten valors per a l'instància aquesta informació és genèrica. Els valors de les propietats són compartits per defecte, compartits per tots els nous objectes creats a partir de WorkerBee. Per suposat, es poden canviar els valors inicials d'aquestes propietats. A continuació es mostra com canviar informació específica:

+ +
mark.name = "Doe, Mark";
+mark.dept = "admin";
+mark.projects = ["navigator"];
+ +

Afegir propietats

+ +

A JavaScript, es poden afegir propietats a qualsevol objecte en temps d'execució. No hi ha cap limitació que ens forci a utilitzar només les propietats que ofereix la funció constructora. Per a afegir una propietat específicament a només un objecte, s'assigna un valor a l'objecte de la manera següent:

+ +
mark.bonus = 3000;
+
+ +

Ara l'objecte mark té una propietat anomenada bonus, però cap altre objecte de tipus WorkerBee tindrà aquesta propietat.

+ +

Si s'afegeix una nova propietat a un objecte que és emprat com a prototipus per una funció constructora, la propietat s'afegeix a tots els objectes que hereten propietats del prototipus. Per exemple, podem afegir la propietat specialty a tots els empleats amb la sentència següent:

+ +
Employee.prototype.specialty = "none";
+
+ +

Un cop la sentència s'ha executat l'objecte mark també disposa de la propietat specialty, amb el valor "none". La figura següent mostra l'efecte d'afegir aquesta propietat al prototipus Employee i tot seguit sobreescriure-la per al prototipus Engineer.

+ +


+ Figura 8.4: Afegir propietats

+ +

Constructors més flexibles

+ +

Les funcions constructores emprades fins ara no permeten especificar els valors de les propietats al crear una instància. Tal i com succeeix amb Java, es poden passar arguments als constructors per a inicialitzar els valors de les propietats de les instàncies a crear. La figura següent mostra una forma d'aconseguir-ho.

+ +


+ Figura 8.5: Determinar propietats en un constructor, primera aproximació

+ +

La taula següent mostra les definicions tant en Java com en JavaScript d'aquests objectes.

+ + + + + + + + + + + + + + + + + + + + + + +
JavaScriptJava
+ 
+function Employee (name, dept) {
+  this.name = name || "";
+  this.dept = dept || "general";
+}
+
+ 		+ 
+public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this("", "general");
+   }
+   public Employee (String name) {
+      this(name, "general");
+   }
+   public Employee (String name, String dept) {
+      this.name = name;
+      this.dept = dept;
+   }
+}
+
+
+ 
+function WorkerBee (projs) {
+
+ this.projects = projs || [];
+}
+WorkerBee.prototype = new Employee;
+
+ 		+ 
+public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      this(new String[0]);
+   }
+   public WorkerBee (String[] projs) {
+      projects = projs;
+   }
+}
+
+
+
+ 
+
+function Engineer (mach) {
+   this.dept = "engineering";
+   this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+
+ 		+ 
+public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      dept = "engineering";
+      machine = "";
+   }
+   public Engineer (String mach) {
+      dept = "engineering";
+      machine = mach;
+   }
+}
+
+
+ +

Aquestes definicions de JavaScript utilitzen un modisme especial per a assignar els valors per defecte:

+ +
this.name = name || "";
+
+ +

L'operador lògic OR de JavaScript (||) avalua el primer argument. Si aquest argument esdevé cert, l'operador el retorna. En cas constrari l'operador retorna el valor del segon argument. Així, aquesta línia de codi comprova que la propietat name tingui un valor útil. Si és així, assigna aquest valor a this.name. En cas contrari, assigna una string buida a this.name. Aquest capítol utilitza aquest modisme per a abreujar tot i que pot resultar desconcertant a primera vista.

+ +
+

Això pot no tindre el comportament esperat si la funció constructora es crida amb arguments que s'avaluen a fals (com 0 (zero) o la cadena buida (""). En aquest cas el valor per defecte serà l'escollit.

+ +

Amb aquestes definicions, al crear una instància d'un objecte, podem especificar valors per a les propietats locals definides. Tal i com es mostra a la Figura 8.5, es pot utilitzar la sentència següent per a crear un now Engineer:

+
+ +
var jane = new Engineer("belau");
+
+ +

Les propietats de Jane ara són:

+ +
jane.name == "";
+jane.dept == "engineering";
+jane.projects == [];
+jane.machine == "belau"
+
+ +

Fixeu-vos que amb aquestes definicions no és possible especificar un valor inicial per a propietats heretades, com ara name. Si es vol especificar un valor inicial per a propietats heretades a JavaScript és necesari afegir més codi a la funció constructora.

+ +

Fins ara les funcions constructores han creat objectes genèrics i han pogut assignar valors a les propietats locals del nou objecte. El constructor mateix també pot afegir més propietats mitjançant la crida a la funció constructora d'un objecte més adalt en la cadena de propotitpus. La figura següent mostra aquestes noves definicions.

+ +


+ Figura 8.6 Especificar propietats al consctructor, segona aproximació

+ +

Fem un cop d'ull a una d'aquestes definicions en detall. Aquesta és la nova definició del constructor de Engineer:

+ +
function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+
+ +

Suposem que creem un nou objecte de tipus Engineer de la forma següent:

+ +
var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+
+ +

JavaScript realitza els següents passos:

+ +
    +
  1. L'operador new crea un objecte genèric i assigna Engineer.prototype a la propietat __proto__ d'aquest nou objecte.
    2. +
  2. L'operador new passa el nou objecte al constructor de Engineer com a valor de la paraula clau this.
    3. +
  3. El constructor crea una nova propietat anomenada base per a aquest objecte i assigna el valor del constructor de WorkerBee a aquesta propietat. Això fa que el constructor WorkerBee pugui ser emprat com un mètode de l'objecte Engineer. El nom de la propietat base no és especial. Es pot emprar qualsevol nom de propietat que sigui vàlid; base ha estat escollit perquè simplement és adient per al seu propòsit.
    4. +
  4. El constructor crida el mètode base, tot passant-li com a arguments dos dels arguments passats al constructor ("Doe, Jane" and ["navigator", "javascript"]) i també la string "engineering". Al passar "engineering" explícitament al constructor tots els objectes de tipus Engineer tindran el mateix valor per a la propietat hertada dept, i aquest valor sobreescriurà el valor heretat de Employee.
    5. +
  5. +

    Com que base és un mètode de Engineer, durant la crida a base JavaScript assigna a la paraula clau this l'objecte creat al pas 1. D'aquesta forma, la funció WorkerBee passa els arguments "Doe, Jane" i "engineering" a la funció constructora Employee. Un cop la funció constructora Employee ha retornat, la funció WorkerBee utilitza l'argument restant per a assignar un valor a la propietat projects.

    +
    6. +
  6. Un cop el mètode base ha retornat, el constructor Engineer initialitza la propietat machine de l'objecte al valor "belau".
    7. +
  7. Un cop el constructor ha retornat, JavaScript assigna el nou objecte a la variable jane.
    8. +
+ +

Es pot pensar que, debug a que s'ha cridat al constructor WorkerBee des de dins el constructor Engineer, s'ha inicialitzat la herència de forma adequada per als objectes Engineer. No és el cas. Cridar el constructor WorkerBee ens asegura que l'objecte Engineer comença amb les propietats especificades per a totes les funcions constructores que es criden. Però, si més tard afegim propietats als prototipus Employee o WorkerBee, aquestes propietats no són heretades per l'objecte Engineer. Per exemple, suposem que tenim les sentències següents:

+ +
function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+Employee.prototype.specialty = "none";
+
+ +

L'objecte jane no hereta la propietat specialty. Es fa necesari inicialitzar el prototipus per a assegurar que hi haurà herència de forma dinàmica. Suposem que tenim les sentències següents:

+ +
function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+Employee.prototype.specialty = "none";
+
+ +

Ara el valor de la propietat specialty de l'objecte  jane és "none".

+ +

Una altra forma d'heretar és mitjançant els mètodes call() / apply(). Les funcions següents són equivalents:

+ + + + + + + + +
+ 
+function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+
+ 		+ 
+function Engineer (name, projs, mach) {
+  WorkerBee.call(this, name, "engineering", projs);
+  this.machine = mach || "";
+}
+
+
+ +

Utilitzar el mètode de JavaScript call() esdevé en una implementació més neta perquè ja no es requereix la propietat base.

+ +

Un segon cop d'ull a la herència de propietats

+ +

Les seccions anteriors han descrit com utilitzar els constructors de JavaScript i els prototipus per crear jerarquies i proporcionar herència. Aquesta secció explica alguns detalls que poden no haver estat obvis en les seccions anteriors.

+ +

Valors locals versus valors heretats

+ +

A l'accedir a la propietat d'un objecte, JavaScritp segueix els passos següents, tal i com s'ha descrit abans en aquest mateix capítol:

+ +
    +
  1. Es comprova si el valor existeix de forma local. En cas afirmatiu es retorna aquest valor.
    2. +
  2. Si ho hi ha valor local, es cerca a la cadena de prototipus (mitjançant la propietat __proto__).
    3. +
  3. Si un objecte de la cadena de prototipus té un valor per la propietat especificada, es retorna aquest valor.
    4. +
  4. Si no es troba aquesta propietat, s'infereix que l'objecte no té aquesta propietat.
    5. +
+ +

El resultat d'aquests passos depèn de com s'hagin definit les coses. L'exemple original disposaba de les següents definicions:

+ +
function Employee () {
+  this.name = "";
+  this.dept = "general";
+}
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+ +

Amb aquestes definicions, suposem que creem amy com una instància de WorkerBee amb la sentència següent:

+ +
var amy = new WorkerBee;
+
+ +

L'objecte amy té una propietat local, projects. Els valors per a les propietats name i dept no són locals per a amy i en conseqüència s'obtenen a partir de la propietat __proto__ de amy. Així, amy té els següents valors a les seves propietats:

+ +
amy.name == "";
+amy.dept == "general";
+amy.projects == [];
+
+ +

Ara suposem que canviem el valor de la propietat name en el prototipus associat a Employee:

+ +
Employee.prototype.name = "Unknown"
+
+ +

A primer cop d'ull podeu pensar que el nou valor es propagarà afectant a totes les instàncies de Employee. Tanmateix això no succeeix.

+ +

Quan es crea qualsevol instància de l'objecte Employee, aquesta instància un valor local per a la propietat name (la cadena buida). Això vol dir que quan s'assigna el prototipus WorkerBee al crear un nou objecte Employee, WorkerBee.propotype té un valor local per a la propietat name. Així, quan JavaScript cerca la propietat name per a l'objecte amy (una instància de WorkerBee), JavaScript trova la variable local per a aquesta propietat a WorkerBee.prototype. Degut a això no cerca la propietat més enllà dins la cadena de prototipus, cap a Employee.prototype.

+ +

Si es vol canviar el valor de la propietat d'un objecte en temps d'execució i que el nou valor sigui heretat per tots els descendents d'un objecte, no es pot definir la propietat dins la funció constructora de l'objecte. En comptes d'això, s'afegeix al constructor del protipus associat. Per exemple, suposem que canviem el codi anterir pel següent:

+ +
function Employee () {
+  this.dept = "general";
+}
+Employee.prototype.name = "";
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+var amy = new WorkerBee;
+
+Employee.prototype.name = "Unknown";
+
+ +

En aquest cas, la propietat name de amy esdevé "Unknown".

+ +

Tal i com mostren els exemples, si es vol tenir un valor predefinit per a les propietats d'un objecte i es vol poder canviar aquest valor predefinit en temps d'execució, les propietats s'han d'assignar al constructor del prototipus i no a la funció constructora de l'objecte mateix.

+ +

Determining instance relationships

+ +

Property lookup in JavaScript looks within an object's own properties and, if the property name is not found, it looks within the special object property __proto__. This continues recursively; the process is called "lookup in the prototype chain".

+ +

The special property __proto__ is set when an object is constructed; it is set to the value of the constructor's prototype property. So the expression new Foo() creates an object with __proto__ == Foo.prototype. Consequently, changes to the properties of Foo.prototype alters the property lookup for all objects that were created by new Foo().

+ +

Every object has a __proto__ object property (except Object); every function has a prototype object property. So objects can be related by 'prototype inheritance' to other objects. You can test for inheritance by comparing an object's __proto__ to a function's prototype object. JavaScript provides a shortcut: the instanceof operator tests an object against a function and returns true if the object inherits from the function prototype. For example,

+ +
var f = new Foo();
+var isTrue = (f instanceof Foo);
+ +

For a more detailed example, suppose you have the same set of definitions shown in Inheriting properties. Create an Engineer object as follows:

+ +
var chris = new Engineer("Pigman, Chris", ["jsd"], "fiji");
+
+ +

With this object, the following statements are all true:

+ +
chris.__proto__ == Engineer.prototype;
+chris.__proto__.__proto__ == WorkerBee.prototype;
+chris.__proto__.__proto__.__proto__ == Employee.prototype;
+chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
+chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
+
+ +

Given this, you could write an instanceOf function as follows:

+ +
function instanceOf(object, constructor) {
+   object = object.__proto__;
+   while (object != null) {
+      if (object == constructor.prototype)
+         return true;
+      if (typeof object == 'xml') {
+        return constructor.prototype == XML.prototype;
+      }
+      object = object.__proto__;
+   }
+   return false;
+}
+
+ +
Note: The implementation above checks the type of the object against "xml" in order to work around a quirk of how XML objects are represented in recent versions of JavaScript. See {{ bug(634150) }} if you want the nitty-gritty details.
+ +

Using the instanceOf function defined above, these expressions are true:

+ +
instanceOf (chris, Engineer)
+instanceOf (chris, WorkerBee)
+instanceOf (chris, Employee)
+instanceOf (chris, Object)
+
+ +

But the following expression is false:

+ +
instanceOf (chris, SalesPerson)
+
+ +

Informació global als constructors

+ +

A l'hora de crear constructors cal anar amb compte si es manega informació global dins el constructor. Per exemple, suposem que volem crear un identificador (ID) únic que serà assignat automàticament per a cada nou Employee. Podríem utilitzar la definició següent per a Employee:

+ +
var idCounter = 1;
+
+function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   this.id = idCounter++;
+}
+
+ +

Amb aquesta definició quan es crea un nou Employee, el constructor assigna la següent ID seqüencialment i llavors incrementa el valor del contador global de ID. Així, suposant el codi següent, tenim que victoria.id val 1 i harry.id val 2:

+ +
var victoria = new Employee("Pigbert, Victoria", "pubs")
+var harry = new Employee("Tschopik, Harry", "sales")
+
+ +

 

+ +

At first glance that seems fine. However, idCounter gets incremented every time an Employee object is created, for whatever purpose. If you create the entire Employee hierarchy shown in this chapter, the Employee constructor is called every time you set up a prototype. Suppose you have the following code:

+ +
var idCounter = 1;
+
+function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   this.id = idCounter++;
+}
+
+function Manager (name, dept, reports) {...}
+Manager.prototype = new Employee;
+
+function WorkerBee (name, dept, projs) {...}
+WorkerBee.prototype = new Employee;
+
+function Engineer (name, projs, mach) {...}
+Engineer.prototype = new WorkerBee;
+
+function SalesPerson (name, projs, quota) {...}
+SalesPerson.prototype = new WorkerBee;
+
+var mac = new Engineer("Wood, Mac");
+
+ +

Ara suposem que les definicions omeses aquí tenen la propietat base i criden el constructor que tenen damunt de la cadena de prototipus. En aquest cas, quan es crea l'objecte mac, mac.id rep el valor de 5.

+ +

Depenent de l'aplicació, el fet que el contador s'incrementi aquests cops adicionals pot tenir o no conseqüències. Si el valor exacte d'aquest contador és important una possible solució pot ser el constructor següent:

+ +
function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   if (name)
+      this.id = idCounter++;
+}
+
+ +

Al crear una instància de Employee per a ser emprada com a prototipus, no es passen paràmetres al constructor. Aquesta definició del constructor no assigna un valor a la id i no actualitza el contador quan el constructor no rep paràmetres. Així, per a que un Employee rebi una id, requerim que rebi un nom. Executar l'exemple anterior amb el nou constructor esdevindrà en que mac.id rebi el valor 1.

+ +

No hi ha herència múltiple

+ +

Alguns llenguatges orientats a objectes permeten l'herència múltiple, és a dir, que un objecte pugui heretar propietats i valors de pares que no tenen res a veure entre ells. JavaScript no suporta l'herència múltiple.

+ +

L'herència de valors de propietats succeeix en temps d'execució i és proporcionada per fet que JavaScript cerqui un valor dins la cadena de prototipus de l'objecte. Com que un objecte disposa d'un sol prototipus associat a ell JavaScript no pot heretar dinàmicament de més d'una cadena de prototipus.

+ +

A JavaScript, però, es pot fer que una funció constructora cridi a més d'una funció constructora dins d'ella. Això crea la ilusió d'herència múltiple. Per exemple, suposem les sentències següents:

+ +
function Hobbyist (hobby) {
+   this.hobby = hobby || "scuba";
+}
+
+function Engineer (name, projs, mach, hobby) {
+   this.base1 = WorkerBee;
+   this.base1(name, "engineering", projs);
+   this.base2 = Hobbyist;
+   this.base2(hobby);
+   this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+
+var dennis = new Engineer("Doe, Dennis", ["collabra"], "hugo")
+
+ +

Ara suposem que la definició de WorkerBee és l'emprada abans en aquest capítol. En aquest case l'objecte dennis rep les propietats següents:

+ +
dennis.name == "Doe, Dennis"
+dennis.dept == "engineering"
+dennis.projects == ["collabra"]
+dennis.machine == "hugo"
+dennis.hobby == "scuba"
+
+ +

Així tenim que dennis rep la propietat hobby del constructor Hobbyist. Tot i així, suposem llavors que afegim una propietat al constructor del prototipus Hobbyist:

+ +
Hobbyist.prototype.equipment = ["mask", "fins", "regulator", "bcd"]
+
+ +

L'objecte dennis no hereta aquesta nova propietat.

+ +
{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}
diff --git a/files/ca/web/javascript/guide/expressions_i_operadors/index.html b/files/ca/web/javascript/guide/expressions_i_operadors/index.html new file mode 100644 index 0000000000..9985daa497 --- /dev/null +++ b/files/ca/web/javascript/guide/expressions_i_operadors/index.html @@ -0,0 +1,846 @@ +--- +title: Expressions i operadors +slug: Web/JavaScript/Guide/Expressions_i_Operadors +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}
+ +

Aquest capítol explica les expressions i els operadors de JavaScript, incloent l'assignació, comparació, airtmètic, operadors de bits, lògics, cadenes, i operadors especials.

+ +

Expressions

+ +

Una expressió és qualsevol unitat de codi vàlida que esdevé un valor.

+ +

Conceptualment hi ha dos tipus d'expressions: les que assignen un valor a una variable i les que simplement tenen un valor.

+ +

L'expressió x = 7 és un exemple del primer tipus. Aquesta expressió fa servir l'operador  = per a assignar el valor set a la variable x. L'expressió per si mateixa s'avalua com a 7.

+ +

El codi 3 + 4 és un exemple d'expressió del segon tipus. Aquesta expressió utilitza l'operador + per a sumar tres i quatre sense assignar el resultat, set, a una variable.
+
+ JavaScript té les següents categories d'expressions:

+ + + +

Operadors

+ +

JavaScript disposa dels següents tipus d'operadors. Aquesta secció descriu els operadors i conté informació sobre la seva precedència.

+ + + +

JavaScript té operadors binaris i unaris, també disposa d'un operador especial ternari, l'operador condicional. Un operador binari requereix dos operands, un abans l'operador i l'altre després de l'operador:

+ +
operand1 operador operand2
+
+ +

Per exemple, 3+4 o x*y.

+ +

Un operador unari A requereix d'un sol operand, ja sigui abans o després de l'operador:

+ +
operador operand
+
+ +

o be

+ +
operand operador
+
+ +

Per exemple, x++ o ++x.

+ +

Operadors d'assignació

+ +

Un operador d'assignació assigna un valor a l'operand de la seva esquerra basat en l'operand de la seva dreta. L'operador d'assignació simple és l'igual (=), que assigna el valor de l'operand de la dreta a l'operand de l'esquerra. És a dir, x = y assigna el valor de y a x.

+ +

També hi ha operadors d'assignació compostos, que són abreviacions per als operadors llistats a la taula següent:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Taula 3.1 Operadors d'assignació
Operadors d'assignació compostosSignificat
x += yx = x + y
x -= yx = x - y
x *= yx = x * y
x /= yx = x / y
x %= yx = x % y
x <<= yx = x << y
x >>= yx = x >> y
x >>>= yx = x >>> y
x &= yx = x & y
x ^= yx = x ^ y
x |= yx = x | y
+ +

Operadors de comparació

+ +

This seems to me kind of poorly explained, mostly the difference betwen "==" and "==="...Els operadors de comparació comparen els operands i retornen un valor lògic basat en si la comparació és certa o no. Els operands poden ser numèrics, string, lògics, o bé valors d'objectes. Els Strings es comparen basant-se en l'ordre lexicogràfic standard, utilitzant valors Unicode. Quan els dos operands no són del mateix tipus, en la majoria dels casos JavaScript intenta convertir-los a un tipus apropiat per a realitzar la comparació.
+  Aquest comportament generalment resulta en una comparació amb els operands transformats a nombres. La única excepció quant a la conversió de tipus és quan s'utilitzen els operands === i !==, els quals realitzen comparacións estrictes de igualtat i no-igualtat, respectivament. Aquests operadors no intenten convertir els operands a tipus compatibles abans de aplicar l'igualtat. La taula següent descriu els operadors de comparació en base a aquest exemple:

+ +
var var1 = 3, var2 = 4;
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Taula 3.2 Operadors de comparació
OperadorDescripcióExemples que s'avaluen a cert
Igualtat (==)Retorna true si els operands són iguals.3 == var1 +

"3" == var1

+ 3 == '3'
No-igualtat (!=)Retorna true si els operands són diferents.var1 != 4
+ var2 != "3"
Igualtat estricta (===)Retorna true si els operands són iguals i del mateix tipus. Vegeu també Object.is i igualtat a JS.3 === var1
No-igualtat estricta (!==)Retorna true si els operands no són iguals i/o del mateix tipus.var1 !== "3"
+ 3 !== '3'
Major que (>)Retorna true si l'operand de l'esquerra és més gran que l'operand e la dreta.var2 > var1
+ "12" > 2
Major o igual que (>=)Retorna true si l'operand de l'esquera és major o igual que l'operand de la dreta.var2 >= var1
+ var1 >= 3
Menor que (<)Retorna true si l'operand de l'esquerra és més petit que l'operand de la dreta.var1 < var2
+ "2" < "12"
Menor o igual que (<=)Retorna true si l'operand de l'esquerra és menor o igual que l'operand de la dreta.var1 <= var2
+ var2 <= 5
+ +

Operadors aritmètics

+ +

Els operadors aritmètics prenen valors numèrics (ja siguin literals o variables) com a operands i retornen un sol valors numèric. Els operadors aritmètics standard són la suma (+), la resta (-), la multiplicació (*) i la divisió (/). Aquests operadors funcionen de la mateixa manera que a la majoria d'altres llenguatges de programació quan s'utilitzen amb nombres de coma flotant (particularment, cal destacar que la divisió entre zero produeix Infinity). Per exemple:

+ +
console.log(1 / 2); /* imprimeix 0.5 */
+console.log(1 / 2 == 1.0 / 2.0); /* això també és cert */
+
+ +

Adicionalment, JavaScript proporciona els operadors aritmètics llistats a la taula següent:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Taula 3.3 Operadors aritmètics
OperadorDescripcióExemple
%
+ (Mòdul)		Operador binari. Retorna el residu de dividir els dos operands.12 % 5 retorna 2.
++
+ (Increment)		 +

Operador unari. Afegeix un al seu operand. Si s'utilitza com a prefix (++x), retorna el valor del seu operand després d'afexir-li un; si s'utilitza com a sufix (x++), retorna el valor del seu operand abans d'afegir-li un.

+ 		Si x és 3, llavors ++x assigna 4 a x i retorna 4, mentre que x++ retorna 3 i, només llavors, assigna 4 a x.
--
+ (Decrement)		Operador uniari. Resta un al seu operand. Retorna el valor anàleg a l'operador increment.Si x és 3, llavors --x assigna 2 a x i retorna 2, mentre que x-- retorna 3 i, només llavors, assigna 2 a x.
-
+ (Negació unària)		Operador unari. Retorna el resultat de negar el seu operand.Si x val 3, llavors -x retorna -3.
+ +

Operadors de bits

+ +

Els operadors de bits tracten els seus operands com a conunts de 32 bits (zeros i uns), en comptes de com a nombres decimals, hexadecimals o octals. Per exemple, el nombre decimal 9 és representat de forma binària per 1001. Els operadors de bits realitzen operacions sobre aquestes representacions binàries, però sempre retornen valors numèrics de JavaScript.

+ +

La taula següent resumeix els operadors de bits disponibles a JavaScript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Taula 3.4 Operadors de bits
OperadorÚsDescripció
AND binaria & bRetorna 1 a cada posició de bit on la posició corresponent a ambdós operadors conten uns.
OR binaria | b +

Retorna 1 a cada posició de bit on al menys un dels operands té un 1 a la posició corresponent.

+
XOR binaria ^ b +

Retorna un 1 a cada posició de bit on només un dels operands té un 1 a la posicio corresponent, però no ambdós.

+
NOT binari~ aInverteix els bits del seu operand.
Desplaçament a l'esquerraa << bDesplaça la representació binària de a b bits a l'esquerra, afegint zeros a la dreta.
Desplaçament a la dreta amb propagació de signea >> bDesplaça la representació binària de a b bits a la dreta, descartant els bits que no hi caben.
Desplaçament a la dreta amb inserció de zerosa >>> bDesplaça la representació binària de a b bits a la dreta, descartant els bits que no hi caben i inserint zeros a l'esquerra.
+ +

Operadors lògics de bits

+ +

Conceptualment, els operadors lògics de bits funcionen de la següent manera:

+ + + +

Per exemple, la representació binària de 9 és 1001, mentre que la representació binària de quinze és 1111. Així, quan els operadors de bits s'apliquen a aquests valors el resultat és el següent:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Taula 3.5 Exemples d'operadors de bits
ExpressióResultatDescripció binària
15 & 991111 & 1001 = 1001
15 | 9151111 | 1001 = 1111
15 ^ 961111 ^ 1001 = 0110
~15-16~00000000...00001111 = 11111111...11110000
~9-10~00000000...00001001 = 11111111...11110110
+ +

Fixeu-vos que a l'utilitzar l'operador de bits NOT tots 32 bits són invertit, i que els valors amb el bit més significatiu (el de l'esquerra) amb valor 1 representen nombres negatius (representació en complement a dos).

+ +

Operadors de desplaçament de bits

+ +

Els operadors de desplaçament de bits requereixen de dos operands: el primer és un conjunt de bits a desplaçar. El segon operand és el nombre de posicions que es desplaçaran els bits del primer operand. La direcció des desplaçament és controlada per l'operador utilitzat.

+ +

Els operadors de desplaçament de bits converteixen els seus operands a nombres de 32 bits i el valor retornat és del mateix tipus que l'operand de l'esquerra. Trobareu un llistat amb els operadors de desplaçament de bits a la taula següent.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Taula 3.6 Operadors de desplaçament de bits
OperadorDescripcióExemple
<<
+ (Desplaçament a l'esquerra)		 +

Aquest operador desplaça a l'esquerra el primer operand el nombre de bits especificat. Els bits que no hi caben es descarten. Les noves posicions de la dreta s'omplen amb zeros.

+ 		9<<2 retorna 36, perquè 1001 desplaçat 2 bits a l'esquerra esdevé 100100, que és la representació binaria de 36.
>>
+ (Desplaçament a la dreta amb propagació de signe)		 +

Aquest operador desplaça el primer operand el nombre de bits especificats cap a la dreta. Els nous bits de l'esquerra són copies del bit originalment més significatiu.

+ 		9>>2 retorna 2, perquè 1001 desplaçat 2 bits a la dreta esdevé 10, que és la representació binària de 2. De la mateixa manera, -9>>2 retorna -3, perquè el signe l'operand preseva el signe.
>>>
+ (Desplaçament a la dreta omplint amb zeros)		 +

Aquest operador desplaça l'operand el nombre de bits especificat a la dreta. Els bits sobrant són descartats. Els nous bits de l'esquerra s'omplen amb zeros.

+ 		19>>>2 retorna 4, perquè 10011 desplaçat 2 bits a la dreta esdevé 100, que és la representació binària de 4. Per a nombres no negatius aquest operador retorna el mateix resultat que l'operador de desplaçament a la dreta amb propagació de signe.
+ +

Operadors lògics

+ +

Els operadors lògics utilitzen típicament amb valors booleans (lògics); quan ho són, retornen un valor de tipus Boolean. Els operadors && i || , però, en realitat retornen el valor d'un dels operands, de tal manera que si aquests operadors s'utilitzen amb valors no booleans poden retornar un valor no booleà. A la següent taula es descriuen els operadors lògics.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Taula 3.6 Operadors lògics
OperadorÚsDescripció
&&expr1 && expr2(AND lògic) Retorna expr1 si pot ser convertida a fals; en qualsevol altre cas retorna expr2. Així, quan es proporcionen operands booleans, && retorna true si ambdós operands són true: en qualsevol altre cas retorna fals.
||expr1 || expr2(OR lògic) Retorna expr1 si pot ser convertida a true; en qualsevol altre cas retorna expr2. És a dir, quan s'utilitza amb operands booleans, || retorna true si qualsevol dels dos operands és true; si ambdós operands són false, retorna false.
!!expr(NOT lògic) Retorna false si el seu únic operand es pot convertir a true; en qualsevol altre cas retorna true.
+ +

Alguns exemples d'expressions que es poden convertir a false són aquelles que s'avaluen a null, 0, NaN, l'string buit (""), o undefined.

+ +

El codi següent mostra exemples de l'operador && (AND lògic).

+ +
var a1 =  true && true;     // t && t retorna true
+var a2 =  true && false;    // t && f retorna false
+var a3 = false && true;     // f && t retorna false
+var a4 = false && (3 == 4); // f && f retorna false
+var a5 = "Cat" && "Dog";    // t && t retorna Dog
+var a6 = false && "Cat";    // f && t retorna false
+var a7 = "Cat" && false;    // t && f retorna false
+
+ +

El codi següent mostra exemples de l'operador || (OR lògic).

+ +
var o1 =  true || true;     // t || t retorna true
+var o2 = false || true;     // f || t retorna true
+var o3 =  true || false;    // t || f retorna true
+var o4 = false || (3 == 4); // f || f retorna false
+var o5 = "Cat" || "Dog";    // t || t retorna Cat
+var o6 = false || "Cat";    // f || t retorna Cat
+var o7 = "Cat" || false;    // t || f retorna Cat
+
+ +

El codi següent mostra exemples de l'operador ! (NOT lògic).

+ +
var n1 = !true;  // !t retorna false
+var n2 = !false; // !f retorna true
+var n3 = !"Cat"; // !t retorna false
+
+ +

Avaluació en curtcircuit

+ +

Mentre les expressions lògiques es van avaluant una a una d'esquerra a dreta, a l'avaluar cadascuna també s'avalua si curtcirquiatar l'expressió mitjançant les regles següents:

+ + + +

Les regles de la lògica garanteixen que aquestes avaluacions sempre són correctes. Cal remarca que la part quelcom no arriva a avaluar-se mai, així que cap efecte secundari provocat per la seva avaluació tindrà efecte.

+ +

Operadors de Strings

+ +

A més dels operadors de comparació, que poden utilitzar-se amb valors de tipus string, l'operador de concatenació (+) concatena dos valors string, retornant un altre string format per la unió dels dos strings operands. Per exemple, "la meva " + "string" retorna la string "la meva string".

+ +

L'abreviació de operador d'assignació += també pot ser emprat per a concatenar strings. Per exemple, si la variable mystring te el valor "alfa", llavors l'expressió mystring += "bet" s'avalua a "alfabet" i assigna aquest valor a mystring.

+ +

Operadors especial

+ +

JavaScript ofereix els següents operadors especials:

+ + + +

Operador condicional

+ +

L'operador condicional és l'únic operador de JavaScript que accepta tres operands. L'operador retorna un de dos valors basant-se en una condició. La sintaxi és la següent:

+ +
condició ? val1 : val2
+
+ +

Si condició és certa, l'operador retorna el valor val1. En qualsevol altre cas retorna el valor val2. Es pot emprar l'operador condicional a qualsevol lloc on es pugui utilitzar un operador standard.

+ +

Per exemple,

+ +
var estat = (edat >= 18) ? "adult" : "menor";
+
+ +

Aquesta sentència assigna el valor "adult" a la variable estat si edat és 18 o més. En qualsevol altre cas assigna el valor "menor" a estat.

+ +

Operador coma

+ +

L'operador coma (,) simplement avalua els seus dos operands i retorna el valor del segon operand. Aquest operdor s'utilitza principalment dins el bucle for per a permetre que múltiples variables s'actualitzin per a cada volta del bucle.

+ +

Per exemple, si a és un array de dues dimensions amb 10 elements per dimensió, el codi següent utilitza l'operador coma per a incrementar dues variables a l'hora. El codi mostra els valors dels elements de la diagonal de l'array:

+ +
for (var i = 0, j = 9; i <= j; i++, j--)
+  document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);
+
+ +

delete

+ +

L'operador delete esborra un objecte, una propietat d'un objecte o l'element a la posició especificada d'un array. La sintaxi és:

+ +
delete nomObjecte;
+delete nomObjecte.property;
+delete nomObjecte[index];
+delete propietat; // Només és legal dins una sentència with
+
+ +

on nomObjecte és el nom d'un objecte, propietat és una propietat existent i index és un nombre sencer que representa la posició d'un element dins un array.

+ +

La quarta forma només és legal dins una sentència with, per a esborrar la propietat d'un objecte.

+ +

Es pot emprar l'operador delete per a esborrar variables declarades implícitament però no serveix per a variables declarades amb la sentència var.

+ +

Si l'operador delete aconsegueix el seu objectiu, assigna el valor undefined a la propietat o element esmentat. L'operador delete retorna true si l'operació és posible; retorna false si l'operació no és posible.

+ +
x = 42;
+var y = 43;
+myobj = new Number();
+myobj.h = 4;    // crea la propietat h
+delete x;       // retorna true (pot esborrar si la variable ha estat declarada implicitament)
+delete y;       // retorna false (no pot esborrar si la variable ha estat declarada amb var)
+delete Math.PI; // retorna false (no pot esborrar propietats predefinides)
+delete myobj.h; // retorna true (pot esborrar propietats definides per l'usuari)
+delete myobj;   // retorna true (pot esborrar si l'objecte ha estat declarat implícitament)
+
+ +
Esborrar elements d'un array
+ +

A l'esborrar l'element d'un array, la longitud de l'array no es veu afectada. Per exemple, si s'esborrar a[3], a[4] roman a a[4] mentre que a[3] passa a valer undefined.

+ +

Quan l'operador delete esborra un element d'un array, aquest element ja no és a l'array. Al següent exemple, s'esborra trees[3] amb delete. Tot i així, trees[3] encara és accessible i retorna undefined.

+ +
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+delete trees[3];
+if (3 in trees) {
+  // aquest codi no s'arriba a executar mai
+}
+
+ +

Si es vol que un element d'un array existeixi però tingui un valor indefinit, es pot emprar la paraula clau undefined en comptes de l'operador delete. Al següent exemple, trees[3] rep el valor undefined, però l'elelement de l'array encara existeix:

+ +
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+trees[3] = undefined;
+if (3 in trees) {
+  // aquest codi s'executa
+}
+
+ +

in

+ +

L'operador in retorna true si la propietat especificada existeix en l'objecte especificat. La sintaxi és:

+ +
nomPropOnombre in nomObjecte
+
+ +

on nomPropOnombre és una string que representa el nom d'una propietat o bé una expressió numèrica que representa la posició d'un element dins un array, i nomObjecte és el nom d'un objecte.

+ +

Els següents exemples mostren alguns usos de l'operador in.

+ +
// Arrays
+var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+0 in trees;        // retorna true
+3 in trees;        // retorna true
+6 in trees;        // retorna false
+"bay" in trees;    // retorna false (s'ha de proporcionar l'índex,
+                   // no el valor a aquell índex)
+"length" in trees; // retorna true (length és una propietat de Array)
+
+// Objects predefinits
+"PI" in Math;          // retorna true
+var myString = new String("coral");
+"length" in myString;  // retorna true
+
+// Objectes creats per l'usuari
+var mycar = {make: "Honda", model: "Accord", year: 1998};
+"make" in mycar;  // retorna true
+"model" in mycar; // retorna true
+
+ +

instanceof

+ +

L'operador instanceof retorna cert si l'objecte especificat és del tipus especificat. La sintaxi és:

+ +
nomObjecte instanceof tipusObjecte
+
+ +

on nomObjecte és el nom de l'objecte a comprarar amb tipusObjecte, i tipusObjecte és un tipus d'objecte, com ara Date o Array.

+ +

Utilitzeu instanceof quan necessiteu confirmar el tipus d'un objecte en temps d'execució. Per exemple, a l'hora de capturar execepcions és posible executar diferent codi segons el tipus d'excepció llençada.

+ +

Per exemple, el següent codi utilitza instanceof per a determinar si dia és un objecte de tipus Date. Com que dia és un objecte de tipus Date les sentències dins la sentència if s'executaran.

+ +
var dia = new Date(1995, 12, 17);
+if (dia instanceof Date) {
+  // bloc de codi que s'executarà
+}
+
+ +

new

+ +

L'operador new s'utilitza per a crear una instància d'un tipus d'objete definit per l'usuari o bé un dels tipus d'objectes predefinits Array, Boolean, Date, Function, Image, Number, Object, Option, RegExp, o String. Al servidor també es pot emprar amb DbPool, Lock, File, i SendMail. La sintaxi de new és la següent:

+ +
var nomObjecte = new tipusObjecte([param1, param2, ..., paramN]);
+
+ +

També és posible crear objectes mitjançant inicialitzadors d'objectes, tal i com s'explica a {{ web.link("Working_with_objects#Using_object_initializers", "utilitzar inicialitzadors d'objectes") }}.

+ +

Vegeu la pàgina de l'operador new a la Referència del nucli de JavaScript per a més informació.

+ +

this

+ +

La paraula clau this s'utilitza per a referir-se a l'objecte actual. En general this fa referència a l'objecte que ha realitzat la crida dins un mètode. La sintaxi de this és la següent:

+ +
this["nomPropietat"]
+
+ +
this.nomPropietat
+
+ +

Exemple 1.
+ Suposem que una funció anomenada validate valida la propietat value d'un objecte, donat l'objecte i el rang de valors:

+ +
function validate(obj, lowval, hival){
+  if ((obj.value < lowval) || (obj.value > hival))
+    alert("Valor no vàlid!");
+}
+
+ +

Podríem cridar validate a cada manegador d'events onChange dels elements d'un formulari, utilitzant this per a passar l'element del formulari, tal i com es mostra al següent exemple:

+ +
<B>Introduïu un nombre entre 18 i 99:</B>
+<INPUT TYPE="text" NAME="edat" SIZE=3
+   onChange="validate(this, 18, 99);">
+
+ +

Exemple 2.
+ Al combinar-lo amb la propietat del form, this fa referència al pare de l'objecte del formulari. Al següent exemple el form myForm conté un bojecte Text i un botó. Quan l'usuari fa clic al botó, el valor de l'objecte Text és assignat al nom del formulari. El manegador de l'event onClick del botó utilitza this.form per a fererir-se al fomulari pare, myForm.

+ +
<FORM NAME="myForm">
+Nom del formulari:<INPUT TYPE="text" NAME="text1" VALUE="Beluga"/>
+<INPUT NAME="button1" TYPE="button" VALUE="Mostrar el nom del formulari"
+   onClick="this.form.text1.value = this.form.name;"/>
+</FORM>
+
+ +

typeof

+ +

L'operador typeof es pot utilitzar de qualsevol de les formes següents:

+ +
    +
  1. + 
    typeof operand
+
    +
    2. +
  2. + 
    typeof (operand)
+
    +
    3. +
+ +

L'operador typeof retorna una string indicant el tipus de l'operand, que no és avaluat. operand és una string, variable, paraula clau u objecte del qual es retornarà el tipus. Els parèntesi són opcionals.

+ +

Suposem que es defineixen les següents variables:

+ +
var myFun = new Function("5 + 2");
+var forma = "rodona";
+var tamany = 1;
+var avui = new Date();
+
+ +

L'operador typeof retornarà els següents resultats per a aquestes variables:

+ +
typeof myFun;      // retorna "function"
+typeof forma;      // retorna "string"
+typeof tamany;     // retorna "number"
+typeof avui;       // retorna "object"
+typeof noExisteix; // retorna "undefined"
+
+ +

Per a les paraules clau true i null, l'operador typeof retorna els següents resultats:

+ +
typeof true; // retorna "boolean"
+typeof null; // retorna "object"
+
+ +

Per a un nombre o string, l'operador typeof retorna els següents resultats:

+ +
typeof 62;            // retorna "number"
+typeof 'Hola món';    // retorna "string"
+
+ +

Per a valors de propietats, l'operador typeof retorna el tipus del valor que conté la propietat:

+ +
typeof document.lastModified; // retorna "string"
+typeof window.length;         // retorna "number"
+typeof Math.LN2;              // retorna "number"
+
+ +

Per a mètodes i funcions, l'operador typeof retorna els següents resultats:

+ +
typeof blur;        // retorna "function"
+typeof eval;        // retorna "function"
+typeof parseInt;    // retorna "function"
+typeof shape.split; // retorna "function"
+
+ +

Per a objectes predefinits, l'operador typeof retorna els resultats següents:

+ +
typeof Date;     // retorna "function"
+typeof Function; // retorna "function"
+typeof Math;     // retorna "object"
+typeof Option;   // retorna "function"
+typeof String;   // retorna "function"
+
+ +

void

+ +

L'operador void es pot emprar de qualsevol de les maneres següents:

+ +
    +
  1. + 
    void (expression)
+
    +
    2. +
  2. + 
    void expression
+
    +
    3. +
+ +

L'operador void avalua una expressió però no retorna cap valor. expression és l'expressió JavaScript a avaluar. Els parèntesi que embocallen l'expressió són opcionals, però es considera una bona pràctica utilitzar-los.

+ +

És possible utilitzar l'operador void per a especificar una expressió com a hipervincle. L'expressió serà avaluada però el seu contingut no reemplaçarà el contingut del document actual.

+ +

El codi següent crea un hipervincle que no fa res quan l'usuari faci clic a l'hipervincle. Quan l'usuari fa clic al l'hipervincle, void(0) serà avaluada com a undefined, la qual cosa no té cap efecte en JavaScript.

+ +
<A HREF="javascript:void(0)">Cliqueu aquí per a no fer res</A>
+
+ +

El codi següent crea un hipervincle que envia un formulari quan l'usuari fa clic sobre ell.

+ +
<A HREF="javascript:void(document.form.submit())">
+Feu clic aquí per a enviar el formulari</A>
+ +

Precedència d'operadors

+ +

La precedència d'operadors determina l'ordre en el qual aquests s'apliquen quan s'avalua una expressió. Es pot canviar aquest comportament mitjançant parèntesi.

+ +

La taula següent descriu la precedència dels operadors, del més prioritari al que ho és menys.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Taula 3.7 Precedència d'operadors
Tipus d'operadorOperadors individuals
membre. []
crida / creació d'una instància() new
negació/increment! ~ - + ++ -- typeof void delete
multiplicació/divisió* / %
suma/resta+ -
desplaçament de bits<< >> >>>
relacionals< <= > >= in instanceof
igualtat== != === !==
AND binari&
XOR binari^
OR binari|
AND lògic&&
OR lògic||
condicional?:
assignació= += -= *= /= %= <<= >>= >>>= &= ^= |=
coma,
+ +

Trobareu una versió més detallada d'aqueta taula, completa amb enllaços a a detalls adicionals per a cada operador a la Referència de JavaScript.

diff --git a/files/ca/web/javascript/guide/functions/index.html b/files/ca/web/javascript/guide/functions/index.html new file mode 100644 index 0000000000..503937d85a --- /dev/null +++ b/files/ca/web/javascript/guide/functions/index.html @@ -0,0 +1,697 @@ +--- +title: Funcions +slug: Web/JavaScript/Guide/Functions +translation_of: Web/JavaScript/Guide/Functions +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}
+ +

Les funcions són uns dels blocs de construcció elementals en JavaScript. Una funció és un procediment de JavaScript—un conjunt de sentències que performa una tasca o calcula un valor. Per tal de fer servir una funció, primer s'ha de defnir en alguna part de l'ámbit en que es vol cridar.

+ +

Definir funcions

+ +

Una definició de funció (també anomenada declaració de funció) consta de la paraula clau function, seguit per:

+ + + +

Per exemple, el codi següent defineix una funció simple anomenada square:

+ +
+
function square(number) {
+  return number * number;
+}
+
+
+ +

La funció square té un paràmetre, anomenat number. Aquesta funció consisteix d'una sentència que retorna l'argument de la funció ( number) multiplicat per ell mateix. La sentència return especifica el valor retornat per la funció.

+ +
return number * number;
+
+ +

Els paràmetres primitius (com ara un nombre) són passat a les funcions  per valor; el valor és passat a la funció, però si la funció canvia el valor del paràmetre, aquest canvia sense reflectir-se globalment o en la funció de crida.

+ +

Si es pasa un objecte (p.ex. un valor no primitiu, com ara un Array o un objecte definit per l'usuari) com a paràmetre i la funció canvia les propietats de l'objecte, aquest canvi és visible fora de la funció, com es mostra en l'exemple següent:

+ +
function myFunc(theObject) {
+  theObject.make = "Toyota";
+}
+
+var mycar = {make: "Honda", model: "Accord", year: 1998},
+    x,
+    y;
+
+x = mycar.make;     // x gets the value "Honda"
+
+myFunc(mycar);
+y = mycar.make;     // y gets the value "Toyota"
+                    // (the make property was changed by the function)
+
+ +
+

Nota:  Assignar un nou objecte als paràmetres no té cap efecte fora de la funció, ja que aquest canvia el valor del paràmetre i no del valor d'una de les propietats de l'objecte:

+
+ +
function myFunc(theObject) {
+  theObject = {make: "Ford", model: "Focus", year: 2006};
+}
+
+var mycar = {make: "Honda", model: "Accord", year: 1998},
+    x,
+    y;
+
+x = mycar.make;     // x gets the value "Honda"
+
+myFunc(mycar);
+y = mycar.make;     // y still gets the value "Honda"
+ +

Mentre que la declaració de la funció d'adalt és sintàcticament una sentència, les funcions també poden ser creades per l' expressió d'una funció. Aquesta funció pot ser anònima; no té cap nom. Per exemple, la funció square podria ésser definida com:

+ +
var square = function(number) {return number * number};
+var x = square(4) //x gets the value 16
+ +

Tanmateix, un nom es pot proporcionar amb una expressió d'una funció i es pot utilitzar dins la funció per referir-se a si mateix, o en un depurador per identificar la funció en la traça de la pila.

+ +
var factorial = function fac(n) {return n<2 ? 1 : n*fac(n-1)};
+
+console.log(factorial(3));
+
+ +

Les expressions d'una funció són convenients quan es passa una funció com a argument d'una altra funció. El següent exemple mostra la definició d'una funció de mapa, i la posterior crida amb una funció anònima com a primer paràmetre.

+ +
function map(f,a) {
+  var result = [], // Create a new Array
+      i;
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+  return result;
+}
+
+ +

El codi següent:

+ +
map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]);
+
+ +

retorna [0, 1, 8, 125, 1000].

+ +

En JavaScript, una funció pot ser definida basant-se en una condició. Per exemple, la següent definició de la funció defineix myFunc només si num és igual 0:

+ +
var myFunc;
+if (num == 0){
+  myFunc = function(theObject) {
+    theObject.make = "Toyota"
+  }
+}
+ +

A més de definir les funcions com ho fem aquí, podeu utilitzar el constructor de funció per crear funcions d'una cadena en temps d'execució, igual que eval().

+ +

Un mètode és una funció que es propietat d'un objecte. Podeu llegir més sobre mètodes i funcions a Treballar amb objectes.

+ +

Crida de funcions

+ +

Definir una funció no l'executa. Definir una funció simplement anomena la funció i especifica que fer quan es crida la funció. Cridar la funció en realitat realitza les accions especificades amb els paràmetres indicats. Per exemple, si es defineix la funció square, aquesta es cridaria de la següent manera:

+ +
square(5);
+
+ +

La sentència anterior crida la funció amb un argument de 5. La funció executa executes les seves sentències i retorna el valor 25.

+ +

Les funcions han de ser en un àmbit quan son cridades, però la declaració de la funció pot estar abans de la crida, com és en aquest exemple:

+ +
console.log(square(5));
+/* ... */
+function square(n){return n*n}
+
+ +

L'àmbit de la funció es troba en la funció en la qual s'ha declarat, o en el programa complet si s'ha declarat  is the function in which it is declared, or the entire program if it is declared a nivell global.

+ +
+

Nota: Això només funciona quan definim la funció fent servir la sintaxis d'adalt (p.ex. function funcName(){}). El codi d'abaix no funcionaria.

+
+ +
console.log(square(5));
+square = function (n) {
+  return n * n;
+}
+
+ +

Els arguments d'una funció no estan limitats a cadenes o nombres. Es pot passar objectes sencers a una funció. La funció show_props (definida a Treballant amb Objectes) és un exemple d'una funció que pren un objecte com a argument.

+ +

Una funció pot cridar-se a si mateixa. Per exemple, aquí baix trobem una funció que  is a function that calcula factorials recursivament:

+ +
function factorial(n){
+  if ((n == 0) || (n == 1))
+    return 1;
+  else
+    return (n * factorial(n - 1));
+}
+
+ +

D'aquesta manera es podria calcular els factorials de l'ú al cinc de la forma següent:

+ +
var a, b, c, d, e;
+a = factorial(1); // a gets the value 1
+b = factorial(2); // b gets the value 2
+c = factorial(3); // c gets the value 6
+d = factorial(4); // d gets the value 24
+e = factorial(5); // e gets the value 120
+
+ +

Hi ha altres maneres de cridar funcions. Sovint hi ha casos en que s'ha de cridar la funció dinàmicament, o casos en que el nombre d'arguments d'una funció pot variar o en els que el context de la crida a la funció de s'ha d'establir a un objecte específic determinat en temps d'execució. Resulta que les funcions són per elles mateixes, objectes, i aquests objectes, al seu torn, tenen mètodes (vegeu l'objecte funció). Un d'aquests, el mètode apply(), pot ser usat per aconseguir aquest objectiu.

+ +

Àmbit d'una funció

+ +

Les variables definides dins d'una funció no són accessibles des de llocs de fora de la funció, ja que la variable es defineix només en l'àmbit de la funció. No obstant això, una funció pot accedir a totes les variables i funcions definides dins de l'àmbit en el qual es defineix. En altres paraules, una funció definida en l'àmbit global pot tenir accés a totes les variables definides en l'àmbit global. Una funció definida dins d'una altra funció pot accedir a totes les variables definides en la funció pare i qualsevol altra variable a la qual la funció pare té accés.

+ +
// The following variables are defined in the global scope
+var num1 = 20,
+    num2 = 3,
+    name = "Chamahk";
+
+// This function is defined in the global scope
+function multiply() {
+  return num1 * num2;
+}
+
+multiply(); // Returns 60
+
+// A nested function example
+function getScore () {
+  var num1 = 2,
+      num2 = 3;
+
+  function add() {
+    return name + " scored " + (num1 + num2);
+  }
+
+  return add();
+}
+
+getScore(); // Returns "Chamahk scored 5"
+
+ +

Àmbit d'aplicació i la pila de la funció

+ +

Recursivitat

+ +

Una funció pot referir-se i cridar-se a ella mateixa. Hi ha tres formes per a que una funció es refereixi a ella mateixa:

+ +
    +
  1. El nom de la funció
    2. +
  2. arguments.callee
    3. +
  3. Una variable continguda en l'àmbit que refereixi a la funció
    4. +
+ +

Per exemple, la definició de funció següent:

+ +
var foo = function bar() {
+   // statements go here
+};
+
+ +

Dins del cos de la funció, els següent són tots equivalents:

+ +
    +
  1. bar()
    2. +
  2. arguments.callee()
    3. +
  3. foo()
    4. +
+ +

Una funció que es pot cridar a ella mateixa és una funció recursiva. En certa manera, la recursió és anàleg a un bucle. En ambdós casos el codi s'executa múltiples vegades, i els dos requereixen d'una condició (per evitar el bucle infinit, o més aviat, la infinita recursió en aquest cas). Per exemple, en el següent bucle:

+ +
var x = 0;
+while (x < 10) { // "x < 10" is the loop condition
+   // do stuff
+   x++;
+}
+
+ +

Es pot converitr en una funció recursiva i una crida a una funció:

+ +
function loop(x) {
+   if (x >= 10) // "x >= 10" is the exit condition (equivalent to "!(x < 10)")
+      return;
+   // do stuff
+   loop(x + 1); // the recursive call
+}
+loop(0);
+
+ +

Tanmateix, alguns algorismes no poden ser bucles iteratius simples. Per exemple, obtenir tots els nodes de l'estructura d'arbre (e.x. el DOM) és fa més fàcilment usant la recursió:

+ +
function walkTree(node) {
+   if (node == null) //
+      return;
+   // do something with node
+   for (var i = 0; i < node.childNodes.length; i++) {
+      walkTree(node.childNodes[i]);
+   }
+}
+
+ +

Comparat amb la funció loop, cada crida recursiva que es crida a si mateixa fa varies crides recursives aquí.

+ +

És possible convertir qualsevol algorisme recursiu a un no recursiu, però sovint la llògica és molt més complexa i fer-ho requereix l'ús d'una pila. De fet, la recursió per si mateixa fa servir una pila: la funció stack.

+ +

El comportament de l'stack es pot veure en el següent exemple:

+ +
function foo(i) {
+   if (i < 0)
+      return;
+   document.writeln('begin:' + i);
+   foo(i - 1);
+   document.writeln('end:' + i);
+}
+foo(3);
+
+ +

El qual mostra:

+ +
begin:3
+begin:2
+begin:1
+begin:0
+end:0
+end:1
+end:2
+end:3
+
+ +

Funcions aniuades i closures

+ +

Es pot aniuar una funció dins d'una altra funció. El contingut de la funció aniuada (la de dins) és privada a la funció que la conté (la de fora). També forma un closure.

+ +
+
Un closure és una expressió (normalment una funció) que pot tenir variables lliures juntes amb un àmbit que lliga aquestes variables (que "closes" l'expresió).
+
+ +

Ja que una funció aniuada és un closure, això significa que una funció aniuada pot "heredar" els arguments i variables de la funció que la conté. En altres paraules, la funció de dins conté l'àmbit de la funció de fora.

+ +

Resumint:

+ + + + + +

El següent exemple mostra funcions aniuades:

+ +
function addSquares(a,b) {
+   function square(x) {
+      return x * x;
+   }
+   return square(a) + square(b);
+}
+a = addSquares(2,3); // returns 13
+b = addSquares(3,4); // returns 25
+c = addSquares(4,5); // returns 41
+
+ +

Atès que la funció interior forma un closure, es pot cridar la funció exterior i especificar els arguments per ambdues funcions, l'exterior i l'interior:

+ +
function outside(x) {
+   function inside(y) {
+      return x + y;
+   }
+   return inside;
+}
+fn_inside = outside(3); // Think of it like: give me a function that adds 3 to whatever you give it
+result = fn_inside(5); // returns 8
+
+result1 = outside(3)(5); // returns 8
+
+ +

Preservació de les variables

+ +

Vegeu com és preserva x quan es retorna inside. Un closure ha de preservar els arguments i variables en tots els àmbits de les seves referències. Donat que cada crida proveeix potencialment diferents arguments, es crea una nova closure per cada crida que es fa a l'exterior. La memòria pot ser alliberada només quan no es pot accedir més al retorn d'inside.

+ +

Això no és diferent d'emmagatzemar referències en altres objectes, però sovint és menys obvi perque no podem establir les referències directament ni inspeccionar-les. 

+ +

Funcions aniuades múltiples

+ +

Les funcions també poden ser aniuades múltiples, p.ex. Una funció (A) conté una funció (B) que conté una funció (C). Ambudes funcions B i C formen aquí closures, de forma que B pot accedir a A i C pot accedir a B. A més a més, ja que C pot accedir a B, el qual pot accedir a A, C també pot accedir a A. D'aquesta forma, els closures poden contenir múltiples àmbits; contenen recursivament l'àmbit de les funcionsthey recursively contain the scope of the functions containing it. Això s'anomena scope chaining. (El perquè s'anomena "chaining" s'explicarà més tard.)

+ +

Considereu l'exemple següent:

+ +
function A(x) {
+   function B(y) {
+      function C(z) {
+         alert(x + y + z);
+      }
+      C(3);
+   }
+   B(2);
+}
+A(1); // alerts 6 (1 + 2 + 3)
+
+ +

En aquest exemple, C accedeix a y de B  i x d'A. Això és possible perquè:

+ +
    +
  1. B forma un closure incloïent A, és a dir, B pot accedir als arguments i les variables d'A.
    2. +
  2. C forma un closure que inclou B.
    3. +
  3. Com que el clousure de B inclou A, el closure de C inclou A, C pot accedir tant als arguments i les variables de B com als d'A. En altres paraules, C encadena l'accés als àmbits de B i A en aquest ordre.
    4. +
+ +

El revers, però, no és cert. A no pot accedir a C, perquè A no pot accedir a cap argument o variable de B, de la qual C n'és una variable. D'aquesta forma, C roman privat només a B.

+ +

Conflictes de noms

+ +

Quan dos arguments o variables de l'àmbit del closure tenen el mateix nom, hi ha un conflicte de nom. Els àmbits més interns tenen prioritat, de forma que l'àmbit més intern té la màxima prioritat, mentre que l'àmbit més exterior no en tét. Això és l cadena d'àmbit. El primer de la cadena és l'àmbit més intern, i l'últim és l'àmbit més extern. Vegeu l'exemple següent:

+ +
function outside() {
+   var x = 10;
+   function inside(x) {
+      return x;
+   }
+   return inside;
+}
+result = outside()(20); // returns 20 instead of 10
+
+ +

El conflicte de nom ocorre en la sentència return x i es troba entreand is between inside's parameter x and outside's variable x. The scope chain here is {inside, outside, global object}. Therefore inside's x takes precedences over outside's x, and 20 (inside's x) is returned instead of 10 (outside's x).

+ +

Closures

+ +

Els closures son unes de les característiques més poderoses de JavaScript. JavaScript permet l'aniuament de funcions i concedeix a la funció interior accès total a totes les variables i funcions definides dins de la funció exterior (i totes les altres variables i funcions que la funció exterior té accés). Tanmateix, la funció exterior no té accés a les variables i funcions definides dins la funció interior. Això proveeix seguretat a les variables de la funció interior. A més, ja que la funció interior té accés a l'àmbit de la funcio exterior, les variables i funcions definides en la funció de fora viuran més que la mateixa funció de fora, si la funció interior se les arregla per sobreviure a partir de la vida de la funció exterior. Un closure es crea quan la funció interior és d'alguna manera accessible per qualsevol àmbit fora de la funció exterior.

+ +
var pet = function(name) {          // The outer function defines a variable called "name"
+      var getName = function() {
+        return name;                // The inner function has access to the "name" variable of the outer function
+      }
+
+      return getName;               // Return the inner function, thereby exposing it to outer scopes
+    },
+    myPet = pet("Vivie");
+
+myPet();                            // Returns "Vivie"
+
+ +

Pot ser molt més complex que el codi d'adalt. Un objecte que conté mètodes per manipular les variables interior d'una funció exterior poder ser retornades.

+ +
var createPet = function(name) {
+  var sex;
+
+  return {
+    setName: function(newName) {
+      name = newName;
+    },
+
+    getName: function() {
+      return name;
+    },
+
+    getSex: function() {
+      return sex;
+    },
+
+    setSex: function(newSex) {
+      if(typeof newSex == "string" && (newSex.toLowerCase() == "male" || newSex.toLowerCase() == "female")) {
+        sex = newSex;
+      }
+    }
+  }
+}
+
+var pet = createPet("Vivie");
+pet.getName();                  // Vivie
+
+pet.setName("Oliver");
+pet.setSex("male");
+pet.getSex();                   // male
+pet.getName();                  // Oliver
+
+ +

En els codis d'adalt, la variable name de la funció exterior és accesible des de les funcions interiors, i no hi ha cap altra forma d'accedir a les variables interiors apart the fer-ho a través de les funcions interiors. Les variables interiors de la funció interior es comporten com a magatzems segurs per a les funcions interiors. Aquestes emmagatzemen de forma "persistent", però segures, les dades amb que les funcions interiors han de treballar. Les funcions no tenen ni tant sols ser assignades a una variable, tampoc han de tenir un nom.

+ +
var getCode = (function(){
+  var secureCode = "0]Eal(eh&2";    // A code we do not want outsiders to be able to modify...
+
+  return function () {
+    return secureCode;
+  };
+})();
+
+getCode();    // Returns the secureCode
+
+ +

Hi ha, tanmateix, un nombre de trampes o obstacles que vigilar quan es fa servir closures. Si una closure defineix una variable amb el mateix nom que el nom de la variable que es troba en l'àmbit exterior, no hi ha cap manera de referir-se una altra vegada a la variable de l'àmbit exterior.

+ +
var createPet = function(name) {  // Outer function defines a variable called "name"
+  return {
+    setName: function(name) {    // Enclosed function also defines a variable called "name"
+      name = name;               // ??? How do we access the "name" defined by the outer function ???
+    }
+  }
+}
+
+ +

La variable màgica this és força delicada en closures. S'ha de saber fer servir acuradament, ja que al que this es refereix depen completament del lloc on la funció es cridada, i no d'on és definida.

+ +

Ús de l'objecte arguments

+ +

Els arguments d'una funció és mantenen en un objecte semblant a un array. Dins una funció,  és pot accedir als arguments passats a la funció de la següent forma:

+ +
arguments[i]
+
+ +

On i és el nombre ordinal de l'argument, que comença amb zero. Així, el primer argument passat a una funció seria arguments[0]. El nombre total d'arguments és indicat per arguments.length.

+ +

Fent servir l'objecte arguments, es pot cridar una funció amb més arguments dels que formament està declarat a acceptar. Això sovint és útil si no es sap amb anticipació quants arguments seràn passats a la funció. Es pot fer servir arguments.length per determinar el nombre d'arguments que se li passen a la funció, i després accedir a cada arguments fent ús de l'objecte arguments.

+ +

Per exemple, sospeseu una funció que concatena diverses cadenes. L'únic argument formal per la funció és una cadena que especifica els caràcters que separen els ítems per concatenar. La funció és defineix com:

+ +
function myConcat(separator) {
+   var result = "", // initialize list
+       i;
+   // iterate through arguments
+   for (i = 1; i < arguments.length; i++) {
+      result += arguments[i] + separator;
+   }
+   return result;
+}
+
+ +

Es pot passar qualsevol nombre d'arguments a aquesta funció, i concatena cada argument dins d'una "llista" de cadenes:

+ +
// returns "red, orange, blue, "
+myConcat(", ", "red", "orange", "blue");
+
+// returns "elephant; giraffe; lion; cheetah; "
+myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
+
+// returns "sage. basil. oregano. pepper. parsley. "
+myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
+
+ +
+

Nota: la variable arguments és semblant a un array, però no és un array. S'assembla a un array en que té un índex numerat i la propietat length. Tanmateix, no poseeix tots els mètodes de manipulació d'un array.

+
+ +

Vegeu l'objecte Function en la referència de JavaScript per més informació.

+ +

Funcions com a controladors d'events

+ +

En JavaScript, els controladors d'events DOM són funcions (a diferència dels objectes que contenen un mètode handleEvent en altres enllaços de llenguatge DOM). Les funcions passen un objecte d'event com el primer i únic paràmetre. Com qualsevol altre paràmetre, si l'objecte event no s'ha de fer servir, es pot ometre de la llista de paràmetres formals.

+ +

Alguns probables objectius d'un document HTML inclouen: window (l'objecte Window, incloent frames), document (l'objecte HTMLDocument), i elements (Element objects). En el HTML DOM, els objectius d'events tenen propietats de controladors d'events. Aquestes propietats seràn nomes d'events amb minúscules amb el prefix "on", p.ex. onfocus. Una altra forma de fer, més robusta, d'afegir detectors d'events és ser proveït pel nivell 2 d'events DOM.

+ +

Nota: Events formen part del DOM, no de JavaScript. (JavaScript només proveeix un enllaç al DOM.)

+ +

El següent exemple assigna una funció al controlador d'events "focus" d'una finestra.

+ +
window.onfocus = function() {
+   document.body.style.backgroundColor = 'white';
+};
+
+ +

Si una funció és assignada a una variable, es pot assignar la variable a un controlador d'event. El codi següent assigna una funció a la variable setBGColor.

+ +
var setBGColor = new Function("document.body.style.backgroundColor = 'white';");
+
+ +

Es pot fer servir aquesta variable per assignar una funció a un controlador d'event de diverses formes. Aquí mostrem dues formes de fer-ho:

+ +
    +
  1. scripting amb propietats d'event DOM HTML + 
    document.form1.colorButton.onclick = setBGColor;
+
    +
    2. +
  2. Atribut event HTML + 
    <input name="colorButton" type="button"
+   value="Change background color"
+   onclick="setBGColor();"/>
+
    + +

    Un controlador d'events establert d'aquesta manera, és de fet, una funció,  named after the attribute, wrapped around the specified code. Això explica perquè els parèntesis en "setBGColor()" són necessaris aquí (en lloc de només "setBGColor"). És equivalent a:

    + + 
    document.form1.colorButton.onclick = function onclick(event) {
+   setBGColor();
+};
+
    + +

    Vegeu com l'objecte event object es passa a aquesta funció com a paràmetre event. Això permet al codi específic utilitzar l'objecte Event:

    + + 
    <input ...
+    onclick="alert(event.target.tagName);"/>
+
    +
    3. +
+ +

Com qualsevol altra propietat que fa referència a una funció, el controlador d'event pot comportat-se com un mètode, i this faria referència a l'element que conté el controlador d'event. En l'exemple següent, la funció que fa referència onfocus es crida amb this que equival a window.

+ +
window.onfocus();
+
+ +

Un error comú de principiants de Javascript és snnexar parèntesis i/o paràmetres al final de la variable p.ex. cridar un controlador d'event quan es fa l'assignació. Afeguir aquests parèntesis assignarà el valor returned from calling the event handler, que sovint és undefined (si la funció no retorna res), rather than the event handler itself:

+ +
document.form1.button1.onclick = setBGColor();
+
+ +

Per passar paràmetres a un controlador d'event, el controlador ha d'estar embolcallat dins d'una altra funció com la següent:

+ +
document.form1.button1.onclick = function() {
+   setBGColor('some value');
+};
+
+ +

Funcions predefinides

+ +

JavaScript té diverses funcions predefinides que poden emprar-se des de qualsevol àmbit:

+ + + +

Les seccions següents introdueixen aquestes funcions. Vegeu el JavaScript Reference per informació detallada de totes aquestes funcions.

+ +

Funció eval

+ +

La funció evalavalua una cadena del codi de JavaScript sense fer referència a cap objecte en particular. La sintaxi de eval és:

+ +
eval(expr);
+
+ +

on expr és una cadena per ser avaluada.

+ +

Si la cadena representa una expressió, eval evalua l'expressió. Si l'argument representa una sentència o més de JavaScript, eval performa aquestes sentències. L'àmbit del codi d'eval és idèntic a l'àmbit del codi de crida. No s'ha de cridar eval per avaluar una expressió aritmèica; JavaScript aritmètiques automàticament.

+ +

Funció isFinite

+ +

La funció isFinite avalua un argument per determinar si és un nombre finit. La sintaxi d' isFinite és:

+ +
isFinite(number);
+
+ +

on number és el nombre que s'ha d'avaluar.

+ +

Si l'argument és NaN (no un nombre), infinit positiu o infinit negatiu, aquest mètode retorna false, sinó retornarà true.

+ +

El codi següent comprova si ClientInput per determinar si és un nombre finit.

+ +
if(isFinite(ClientInput)){
+   /* take specific steps */
+}
+
+ +

Funció isNaN

+ +

La funció isNaN avalua un argument que determina si és "NaN." La sintaxi d'isNaN és:

+ +
isNaN(testValue);
+
+ +

On testValue és el valor que es vol avaluar.

+ +

Les funcions parseFloat i parseInt retornen "NaN" quan avaluen un valor que no és un nombre. isNaN retorna true si passa "NaN," i false sinó ho fa.

+ +

El codi següent avalua floatValue que determina si és un nombre i després crida un procediment de la manera adequada:

+ +
var floatValue = parseFloat(toFloat);
+
+if (isNaN(floatValue)) {
+   notFloat();
+} else {
+   isFloat();
+}
+
+ +

Funcions parseInt i parseFloat

+ +

Les dos funcions "parse", parseInt i parseFloat, retornen un valor numèric quan es dóna com a argument una cadena.

+ +

La sintaxi de parseFloat és:

+ +
parseFloat(str);
+
+ +

On parseFloat parses el seu argument,la cadena str, and attempts to return a floating-point number. If it encounters a character other than a sign (+ or -), a numeral (0-9), a decimal point, or an exponent, then it returns the value up to that point and ignores that character and all succeeding characters. If the first character cannot be converted to a number, it returns "NaN" (not a number).

+ +

La sintaxi de parseInt és:

+ +
parseInt(str [, radix]);
+
+ +

parseInt interpreta el seu primer argument, la cadena de caràcters str, i intenta retornar un nombre sencer de la base especificada pel paràmetre opcional radix. Per exemple, si radix és 10 això indica que es demana una conversió al sistema decimal (base 10), si és 8 octal, si és 16 hexadecimal, etcètera. Per a bases majors que 10 es fan anar lletres de l'alfabet per a indicar els numerals majors que 9. Per exemple, per a nombres hexadecimals (base 16), s'empren les lletres de la A fins la F.

+ +

Si parseInt troba un caràcter que no és un numeral de la base especificada, aquest és ignorat així com la resta de caràcters que el segueixen i retorna el valor sencer interpretat fins aquest punt. Si el primer caràcter no es pot convertir a un nombre de la base especificada es retorna "NaN". La funció parseInt trunca la cadena de caràcters a valors sencers.

+ +

Funcions Number i String

+ +

Les funcions Number i String permeten convertir un objecte a un nombre o a una cadena. La sintaxi d'aquestes funcions és:

+ +
var objRef;
+objRef = Number(objRef);
+objRef = String(objRef);
+
+ +

On objRef és una referència a l'objecte. Number fa servir el valorOf() method of the object; String uses the toString() method of the object.

+ +

L'exemple següent converteix l'objecte Date a una cadena de caràcters fàcilment interpretrable per humans.

+ +
var D = new Date(430054663215),
+    x;
+x = String(D); // x equals "Thu Aug 18 04:37:43 GMT-0700 (Pacific Daylight Time) 1983"
+
+ +

L'exemple següent converteix l'objecte String a l'objecte Number.

+ +
var str = "12",
+    num;
+num = Number(str);
+
+ +

Es pot comprovar utilitzant el mètode del DOM write() i l'operador de JavaScript typeof.

+ +
var str = "12",
+    num;
+document.write(typeof str);
+document.write("<br/>");
+num = Number(str);
+document.write(typeof num);
+
+ +

Funcions escape i unescape (Obsoletes a partir de JavaScript 1.5)

+ +

Les funcions escape i unescape no funcionen correctamenr per a caràcter que no siguin ASCII i han quedat obsoletes. En la versió de JavaScript 1.5 i posteriors, es fa servir encodeURI, decodeURI, encodeURIComponent, i decodeURIComponent.

+ +

Les funcions escape i unescape permeten codificar i descodificar cadenes. La funció escape retorna function returns the hexadecimal encoding of an argument in the ISO Latin character set. The unescape function returns the ASCII string for the specified hexadecimal encoding value.

+ +

La sintaxi d'aquestes funcions és:

+ +
escape(string);
+unescape(string);
+
+ +

Aquestes funcions s'usen principalment amb JavaScript que s'executa al servidor per codificar i descodificar parells de clau/valor en URLs.

diff --git a/files/ca/web/javascript/guide/index.html b/files/ca/web/javascript/guide/index.html new file mode 100644 index 0000000000..5bd35b4659 --- /dev/null +++ b/files/ca/web/javascript/guide/index.html @@ -0,0 +1,127 @@ +--- +title: Guia de JavaScript +slug: Web/JavaScript/Guide +tags: + - Guide + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Guide +--- +
{{jsSidebar("JavaScript Guide")}}
+ +

La Guia de JavaScript mostra com utilitzar JavaScript a l'hora que proporciona una visió general del llenguatge. Per a començar amb JavaScript o a programar en general podeu consultar els article de l'zona d'aprenentatge. Per a informació exhaustiva sobre qualsevol característica del llenguatge podeu consultar la referència de JavaScript.

+ +

Capítols

+ +

Aquesta guia es divideix en diversos capítols:

+ + + + + + + + + +

{{Next("Web/JavaScript/Guide/Introduction")}}

diff --git "a/files/ca/web/javascript/guide/introducci\303\263/index.html" "b/files/ca/web/javascript/guide/introducci\303\263/index.html" new file mode 100644 index 0000000000..1b598dad9b --- /dev/null +++ "b/files/ca/web/javascript/guide/introducci\303\263/index.html" @@ -0,0 +1,140 @@ +--- +title: Introducció +slug: Web/JavaScript/Guide/Introducció +translation_of: Web/JavaScript/Guide/Introduction +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
+ +
+

Aquest capítol presenta JavaScript i comenta alguns dels seus conceptes fonamentals.

+
+ +

Coneixements previs

+ +

Aquesta guia asumeix que el lector te els següents coneixements previs:

+ + + +

On trobar informació sobre JavaScript

+ +

La documentació de JavaScript al MDN inclou els següents apartats:

+ + + +

Si vostè és nou al món de JavaScript es recomana començar amb els articles que es poden trobar a l'àrea d'aprenentatge i la Guia de JavaScript. Un cop assolits els conceptes fonamentals podeu obtindre més detalls sobre objectes individuals i sentències mitjançant la Referència de JavaScript.

+ +

Què és JavaScript?

+ +

JavaScript és un llenguatge d'script multiplataforma i orientat a objectes. És un llenguatge petit i lleuger. Dins l'entorn d'un amfitrió, es pot connectar JavaScript als objectes del l'entorn per a tenir un control programàtic sobre aquests.

+ +

JavaScript conté una llibreria estàndard d'objectes, com Array, Date i Math, o un conjunt bàsic d'elements del llenguatge, com ara operadors, estructures de control o sentències. El nucli de JavaScript es pot estendre per a diferents propòsits mitjançant objectes adicionals; per exemple:

+ + + +

JavaScript i Java

+ +

JavaScript i Java són similars des d'alguns punts de vista però són fonamentalment diferents des d'uns altres. El llenguatge JavaScript s'assembla al Java però no té el tipatge estàtic ni les comprovacions de tipatge fort de Java. JavaScript segueix la majoria de les expressions de sintaxi de Java, convencions de nomenclatura i construccions de control de flux bàsiques, la qual és la raó per la qual el seu nom va ser canviat de LiveScript a JavaScript.

+ +

En contrast amb el sistema de classes de Java en temps de compilació fabricat per declaracions, JavaScript suporta un sistema en temps d'execució basat en un petit nombre de tipus de dades que representen valors numèrics, booleans i cadenes de caràcters. JavaScript té model d'objecte basat en prototipus en comptes del model més comú, basat en classes. El model basat en prototipus ofereix herència dinàmica, és a dir, el que és heretat pot variar entre diferents objectes individuals. JavaScript també suporta funcions sense cap mena de requeriment declaratiu especial. Les funcions poden ser propietats d'objectes, sent executades com a mètodes de tipatge lliure.

+ +

JavaScript és un llenguatge de forma molt lliure en comparació amb Java. No és necessari declarar totes les variables, classes i mètodes. No és necessari preocupar-se per quins mètodes són públics, privats o protegits, i no és necessari implementar interfícies. Variables, paràmetres i tipus de retorn de funcions so són de tipatge explícit.

+ +

Java és un llenguatge de programació basat en classes dissenyat per a executar-se ràpidament i ser segur quant a tipatge. Ser segur quant al tipatge vol dir que, per exemple, no es pot assignar un nombre sencer de Java a una referència d'objecte, o accedir memòria privada tot corrompent bytecode de Java. El model basat en classes de Java implica que els programes consisteixen exclusivament de classes i els seus mètodes. L'herència de classes a Java i el tipatge fort generalment requereixen jerarquies d'objectes fortament acoblades. Aquests requisits fan que programar en Java sigui més complex que programar en JavaScript.

+ +

En contrast, JavaScript descendeix en esperit d'una línia de llenguatges més petits, amb tipatge dinàmic com ara HyperTalk i dBASE. Aquests llenguatges d'scripting ofereixen eines de programació a una audiència molt més àmplia a causa de la seva sintaxi més simple, funcionalitats especialitzades integrades i uns requeriments mínims per a la creació d'objectes.

+ + + + + + + + + + + + + + + + + + + + + + + +
JavaScript en comparació a Java
JavaScriptJava
+

Basat en objectes. No hi ha distinció entre tipus d'objectes. L'herència funciona a través del mecanisme de prototipus i les propietats i mètodes es poden afegir a qualsevol objecte de forma dinàmica.

+ 		+

Basat en classes. Els objectes es divideixen entre classes i instàncies, amb l'herència aplicada mitjançant la jerarquia de classes. No es poden afegir propietats ni mètodes dinàmicament ni a classes ni a instàncies.

+
El tipus de dades de les variables no es declaren (tipatge dinàmic).El tipus de dades de les variables s'ha de declarar (tipatge estàtic).
No pot escriure a disc de forma automàtica.No pot escriure a disc de forma automàtica.
+ +

Per a més informació sobre les diferències entre JavaScript i Java vegeu el capítol Detalls del model d'objecte.

+ +

JavaScript i l'especificació ECMAScript

+ +

L'estandardització de JavaScript es realitza a Ecma International — l'associació Europea per a l'estandardització  de sistemes d'informació i comunicació (ECMA era anteriorment un acrònim d'European Computer Manufacturers Association) per a proporcionar un llenguatge de programació estàndard i internacional basat en JavaScript. Aquesta versió estandarditzada de JavaScript, anomenada ECMAScript, es comporta de la mateixa manera a totes les aplicacions que suporten l'estàndard. Les empreses poden utilitzar el llenguatge estàndard obert per a desenvolupar la seva pròpia implementació de JavaScript. L'estàndard ECMAScript està documentat en l'especificació ECMA-262. Vegeu Nou a JavaScript per a aprendre sobre les diferents versions de JavaScript així com les diferents edicions de l'especificació d'ECMAScript.

+ +

A més, l'estàndard ECMA-262 també està aprovat per l'ISO (International Organization of Standarization) com a ISO-16262. Podeu trobar l'especificació al lloc web d'Ecma International. L'especificació de l'ECMAScript no descriu el Model d'Objecte Document (DOM), el qual està estandaritzat pel World Wide Web Consortium (W3C). El DOM defineix la forma en què els objectes d'un document HTML s'exposen a l'script. Per a fer-se una millor idea de les diferents tecnologies usades en programar en JavaScript, consulteu l'article: resum de tecnologies de JavaScript.

+ +

La documentació de JavaScript versus l'especificació de l'ECMAScript

+ +

L'especificació de l'ECMAScript és un conjunt de requeriments per a implementar ECMAScript; és útil si es vol implementar característiques del llenguatge que compleixin amb els estàndards a la vostra pròpia implementació d'ECMAScript o a un motor JavaScript (com per exemple el SpiderMonkey a Firefox, o el v8 a Chrome).

+ +

El document d'ECMAScript no pretén ajudar als programadors de scripts; utilitzeu la documentació de JavaScript per a obtenir informació sobre com escriure scripts.

+ +

L'especificació d'ECMAScript utilitza terminologia i sintaxi que poden no ser familiars per a programador de JavaScript. Tot i que la descripció del llenguatge pot variar a ECMAScript, el llenguatge en si roman sense canvis. JavaScript suporta totes les funcionalitats definides a l'especificació d'ECMAScript.

+ +

La documentació de JavaScript descriu aspectes del llenguatge que són apropiats per al programador de JavaScript.

+ +

Iniciant-se en JavaScript

+ +

Iniciar-se en JavaScript és senzill: tot el que fa falta és un navegador Web modern. Aquesta guia inclou algunes de les característiques de JavaScript que només estan disponibles a les últimes versions de Firefox, per això es recomana utilitzar la versió de Firefox més recent.

+ +

Hi ha dues eines que formen part de Firefox que són útils per a experimentar amb JavaScript: la Consola del Web i Scratchpad.

+ +

La Consola del Web

+ +

La Consola del Web mostra informació sobre la pàgina Web carregada actualment i també inclou una línia d'ordres que podeu utilitzar per a executar expressions JavaScript a la pàgina actual.

+ +

Per a obrir la Consola del Web, seleccioneu "Web Console" des del menú "Web Developer", que trobareu sota el menú "Tools" a Firefox. Apareixerà a la part de sota de la finestra del navegador. A la part de sota de la consola hi ha la línia d'ordres que podeu utilitzar per a introduir JavaScript, i la sortida apareix al panell de sobre:

+ +

+ +

Scratchpad

+ +

La Consola del Web és excel·lent per a executar línies individuals de JavaScript, però tot i que pot executar múltiples línies no és gaire còmoda per a això, i no permet desar mostres de codi. És per això que per a exemples més complexos Scratchpad és una eina més adient.

+ +

Per a obrir Scratchpad, seleccioneu "Scratchpad" al menú "Web Developer", que trobareu dins el menú "Tools" al Firefox. S'obre en una finestra separada i consisteix d'un editor que podeu utilitzar per a escriure i executar JavaScript al navegador. També podeu desar scripts al disc i carregar scripts des del disc.

+ +

Si seleccioneu l'opció "Inspect", el codi a l'editor és executat al navegador i els resultats són inserits tot seguit a l'editor en forma de comentari:

+ +

+ +

Hola món

+ +

Per a iniciar-vos a escriure JavaScript, obriu la Consola del Web o bé l'Scratchpad i escriviu el vostre primer codi "Hola món" en JavaScript.

+ +
function saluda(user) {
+  return "Hola " + user;
+}
+
+saluda("Alice"); // "Hola Alice"
+
+ +

A les següents pàgines, aquesta guia us introduirà la sintaxi de JavaScript així com les seves característiques, de manera que sereu capaços d'escriure aplicacions més complexes.

+ +

{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}

-- cgit v1.2.3-54-g00ecf