diff options
Diffstat (limited to 'files/ca/web/javascript/guide')
| -rw-r--r-- | files/ca/web/javascript/guide/details_of_the_object_model/index.html | 746 | ||||
| -rw-r--r-- | files/ca/web/javascript/guide/expressions_i_operadors/index.html | 846 | ||||
| -rw-r--r-- | files/ca/web/javascript/guide/functions/index.html | 697 | ||||
| -rw-r--r-- | files/ca/web/javascript/guide/index.html | 127 | ||||
| -rw-r--r-- | files/ca/web/javascript/guide/introducció/index.html | 140 |
5 files changed, 2556 insertions, 0 deletions
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 +--- +<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}</p> + +<p>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.</p> + +<p>Aquest capítol assumeix que teniu certa familiaritat amb JavaScript i sabeu crear objectes simples mitjançant funcions.</p> + +<h2 id="Llenguatges_basats_en_classes_vs_llenguatges_basats_en_prototipus">Llenguatges basats en classes vs llenguatges basats en prototipus</h2> + +<p>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.</p> + +<ul> + <li>Una <em>classe</em> defineix totes les propietats (considerem que a Java els mètodes i camps, així com els membres a C++, són propietats) que caracteritzen un determinat conjunt d'objectes. Una classe és quelcom abstracte, en contraposició amb un membre específic del grup d'objectes que defineix. Per exemple, la classe <code>Employee</code> podria representar el conjunt de tots els empleats.</li> + <li>Una <em>instància</em>, d'altra banda, és la instanciació d'una classe, és a dir, un dels seus membres. Per exemple, <code>Victoria</code> podría ser una instància de la classe <code>Employee</code>, representant un individu concret com a empleat. Una instància te exactament les propietats de la seva classe pare, ni més ni menys.</li> +</ul> + +<p>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 <em>objecte prototipus</em>, 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 <em>prototipus</em> d'un altre objecte, tot permetent al segon objecte compartir les propietats del primer.</p> + +<h3 id="Definir_una_classe">Definir una classe</h3> + +<p>En llenguatge basats en classes hom defineix una classe de forma separada com una <em>definició de classe</em>. En aquesta definició es poden especificar mètodes especials, anomenats <em>constructors</em>, 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 <code>new</code> en associació amb un mètode constructor de la classe.</p> + +<p>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 <code>new</code> amb una funció constructora per a crear un nou objecte.</p> + +<h3 id="Subclasses_i_herència">Subclasses i herència</h3> + +<p>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 <em>subclasse</em> d'una classe que ja existeix. La subclasse hereta totes les propietats de la <em>superclasse</em> i pot afegir noves propietats adicionals o bé modificar les heretades. Per exemple, suposem que la classe <code>Employee</code> només inclou les propietats <code>name</code> i <code>department</code>, i la classe <code>Manager</code> és una subclasse de <code>Employee</code> que afegeix la propietat <code>reports</code>. En aquest cas una instància de la classe <code>Manager</code> tindria totes tres propietats: <code>name</code>, <code>department</code> i <code>reports</code>.</p> + +<p>JavaScript implementa l'herència permetent associar un objecte prototipus a qualsevol funció constructora. D'aquesta forma es pot crear exactament l'exemple <code>Employee</code> — <code>Manager</code>, tot i que fent servir una terminologia lleugerament diferent. Primerament cal definir la funció constructora de <code>Employee</code>, tot especificant les propietats <code>nom</code> i <code>departament</code>. Seguidament es defineix la funció constructora de <code>Manager</code>, tot cridant el constructor de <code>Employee</code> i especificant la propietat <code>informes</code>. Finalment s'assigna el nou objecte derivat de <code>Employee.prototype</code> com el <code>prototype</code> de la funció constructora de <code>Manager</code>. Llavors quan es crea un nou objecte de tipus <code>Manager</code> aquest hereta les propietats <code>name</code> i <code>department</code> de l'objecte <code>Employee</code>.</p> + +<h3 id="Afegir_i_esborrar_propietats">Afegir i esborrar propietats</h3> + +<p>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.</p> + +<h3 id="Resum_de_diferències">Resum de diferències</h3> + +<p>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.</p> + +<table class="fullwidth-table"> + <caption>Taula 8.1 Comparació de sistems d'objectes basats en classes (Java) i basats en prototipus (JavaScript)</caption> + <thead> + <tr> + <th scope="col">Basat en classes (Java)</th> + <th scope="col">Basat en prototipus (JavaScript)</th> + </tr> + </thead> + <tbody> + <tr> + <td>Les classes i les instàncies són entitats diferents.</td> + <td>Qualsevol objecte pot heretar d'un altre objecte.</td> + </tr> + <tr> + <td>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.</td> + <td>Es defineix i es crea un conunt d'objectes mitjançant funcions constructores.</td> + </tr> + <tr> + <td>Es crea un sol objecte amb l'operador <code>new</code>.</td> + <td>Es crea un sol objecte amb l'operador <code>new</code>.</td> + </tr> + <tr> + <td> + <p>Les jerarquies d'objectes es construeixen mitjançant definicions de classes per a especificar subclasses de les classes existents.</p> + </td> + <td> + <p>Les jerarquies d'objectes es construeixen tot assignant un objecte com el prototipus associat amb una funció constructora.</p> + </td> + </tr> + <tr> + <td>Hereta les propietats tot següient la cadena de classes.</td> + <td> + <p>Hereta les propietats tot seguint la cadena de prototipus.</p> + </td> + </tr> + <tr> + <td> + <p>La definició d'una classe especifica <em>totes</em> les propietats per totes les instàncies de la classe. No és possible afegir propietats dinàmicament en temps d'execució.</p> + </td> + <td> + <p>Una funció constructora o un prototipus especifiquen un <em>conjunt inicial</em> de propietats. És possible afegir o eliminar propietats de forma dinàmica per a objectes individuals o bé de tot el conjunt d'objectes.</p> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="L'exemple_Employee">L'exemple Employee</h2> + +<p>La resta d'aquest capítol utilitza la jerarquia de <code>Employee</code> que es mostra en la següent figura.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/4452/=figure8.1.png" style="height: 194px; width: 281px;"></p> + +<p><small><strong>Figura 8.1: Una jerarquia d'objectes simple</strong></small></p> + +<p>Aquest exemple utilitza els objectes següents:</p> + +<ul> + <li><code>Employee</code> té les propietats <code>name</code> (el valor de la qual és una cadena buida per defecte) i <code>dept</code> (el valor de la qual és "general" per defecte).</li> + <li><code>Manager</code> està basada en <code>Employee</code>. Afegeix la propietat <code>reports</code> (el valor de la qual és un array buit per defecte, i destinada a emmagatzemar un array d'objectes de tipus <code>Employee</code> com a valor).</li> + <li><code>WorkerBee</code> també està basada en <code>Employee</code>. afegeix la propietat<code> projects</code> (el valor de la qual és un array buit per defecte, i destinada a emmagatzemar un array de strings com a valor).</li> + <li><code>SalesPerson</code> està basada en <code>WorkerBee</code>. Afegeix la propietat <code>quota</code> (el valor de la qual és 100 per defecte). També sobreescriu la propietat <code>dept</code> amb el valor "sales", tot indicant que tots els objectes del tipus salespersons pertanyen al mateix department.</li> + <li><code>Engineer</code> està basat en <code>WorkerBee</code>. Afegeix la propietat <code>machine</code> (el valor de la qual és una string buida per defecte) i també sobreescriu la propietat <code>dept</code> amb el valor "engineering".</li> +</ul> + +<h2 id="Crear_una_jerarquia">Crear una jerarquia</h2> + +<p>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ó.</p> + +<p>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.</p> + +<p>En una aplicació real probablement es definirien constructors que permetessin especificar valors per les propietats de l'objecte al crear-lo (vegeu <a href="#Constructors_més_flexibles">Constructors més flexibles</a> per a més informació). De moment aquestes definicions simples demostren com funciona l'herència.</p> + +<p>Les següents definicions en Java i JavaScript de <code>Employee</code> 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 <a href="http://en.wikipedia.org/wiki/Strong_and_weak_typing">llenguatge de tipatge fort</a> mentre que JavaScript és un llenguatge de tipatge dèbil).</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">JavaScript</th> + <th scope="col">Java</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <pre class="brush: js"> +function Employee() { + this.name = ""; + this.dept = "general"; +} +</pre> + </td> + <td> + <pre class="brush: java"> +public class Employee { + public String name = ""; + public String dept = "general"; +} +</pre> + </td> + </tr> + </tbody> +</table> + +<p>Les definicions de <code>Manager</code> i <code>WorkerBee</code> 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 <code>prototype</code> 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.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">JavaScript</th> + <th scope="col">Java</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <pre class="brush: js"> +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); +</pre> + </td> + <td> + <pre class="brush: java"> +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]; + } +} +</pre> + </td> + </tr> + </tbody> +</table> + +<p>Les definicions de <code>Engineer</code> i <code>SalesPerson</code> creen objectes que descendeixen de <code>WorkerBee</code> i, per extensió, de <code>Employee</code>. 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 <code>dept</code> amb els nous valors especificats per a aquests objectes.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">JavaScript</th> + <th scope="col">Java</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <pre class="brush: js"> +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); +</pre> + </td> + <td> + <pre class="brush: java"> +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 = ""; + } +} +</pre> + </td> + </tr> + </tbody> +</table> + +<p>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.</p> + +<div class="note"> +<p>El terme <em>instància</em> 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 <code>jane</code> és una instància d'<code>Engineer</code>. De la mateixa manera, tot i que els termes <em>fill</em>, <em>predecessor</em> i <em>descendent</em> 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.</p> +</div> + +<p> </p> + +<p><img alt="figure8.3.png" class="default internal" id="figure8.3" src="/@api/deki/files/4403/=figure8.3.png"><br> + <a id="8.3" name="8.3"><small><strong>Figura 8.3: Creació d'objectes amb definicions simples</strong></small></a></p> + +<h2 id="Propietats_d'un_objecte">Propietats d'un objecte</h2> + +<p>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ó.</p> + +<h3 id="Heretar_propietats">Heretar propietats</h3> + +<p>Suposem que creem l'objecte <code>mark</code> a partir de <code>WorkerBee</code> (tal i com es mostra a la <a href="#8.3">Figura 8.3</a>) amb la sentència següent:</p> + +<pre class="brush: js">var mark = new WorkerBee; +</pre> + +<p>Quan JavaScript es troba amb l'operador <code>new</code>, aquest crea un nou objecte genèric i passa aquest nou objecte com a valor de la paraula clau <code>this</code> a la funció constructora de <code>WorkerBee</code>. La funció constructora assigna el valor de la propietat project de forma explícita, i assigna implícitament el valor <code>WorkerBee.prototype</code> a la propietat interna <code>__proto__</code> (el nom d'aquesta propietat conté dos guions baixos tant al principi com al final). La propietat <code>__proto__</code> 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 <code>mark</code>.</p> + +<p>Aquest procés no assigna valors de forma explícita a l'objecte <code>mark</code> (valors <em>locals</em>) 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 <em>local</em>, JavaScript recorre la cadena prototipus (mitjançant la propietat <code>__proto__</code>). 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 <code>mark</code> té les següents propietats i valors:</p> + +<pre class="brush: js">mark.name = ""; +mark.dept = "general"; +mark.projects = []; +</pre> + +<p>L'objecte <code>mark</code> hereta els valors per a les propietats <code>name</code> i <code>dept</code> de l'objecte prototipus a <code>mark.__proto__</code>. La propietat <code>projects</code> rep un valor local designat pel constructor <code>WorkerBee</code>. 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 <a href="#Un_segon_cop_d'ull_a_l'herència_de_propietats">Un segon cop d'ull a l'herència de propietats</a>.</p> + +<p>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 <code>WorkerBee</code>. Per suposat, es poden canviar els valors inicials d'aquestes propietats. A continuació es mostra com canviar informació específica:</p> + +<pre class="brush: js">mark.name = "Doe, Mark"; +mark.dept = "admin"; +mark.projects = ["navigator"];</pre> + +<h3 id="Afegir_propietats">Afegir propietats</h3> + +<p>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:</p> + +<pre class="brush: js">mark.bonus = 3000; +</pre> + +<p>Ara l'objecte <code>mark</code> té una propietat anomenada <code>bonus</code>, però cap altre objecte de tipus WorkerBee tindrà aquesta propietat.</p> + +<p>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 <code>specialty</code> a tots els empleats amb la sentència següent:</p> + +<pre class="brush: js">Employee.prototype.specialty = "none"; +</pre> + +<p>Un cop la sentència s'ha executat l'objecte <code>mark</code> també disposa de la propietat <code>specialty</code>, amb el valor <code>"none"</code>. La figura següent mostra l'efecte d'afegir aquesta propietat al prototipus <code>Employee</code> i tot seguit sobreescriure-la per al prototipus <code>Engineer</code>.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/4422/=figure8.4.png" style="height: 519px; width: 833px;"><br> + <small><strong>Figura 8.4: Afegir propietats</strong></small></p> + +<h2 id="Constructors_més_flexibles">Constructors més flexibles</h2> + +<p>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.</p> + +<p><img alt="" class="internal" id="figure8.5" src="/@api/deki/files/4423/=figure8.5.png" style="height: 481px; width: 1012px;"><br> + <a id="8.5" name="8.5"><small><strong>Figura 8.5: Determinar propietats en un constructor, primera aproximació</strong></small></a></p> + +<p>La taula següent mostra les definicions tant en Java com en JavaScript d'aquests objectes.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">JavaScript</th> + <th scope="col">Java</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <pre class="brush: js"> +function Employee (name, dept) { + this.name = name || ""; + this.dept = dept || "general"; +} +</pre> + </td> + <td> + <pre class="brush: java"> +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; + } +} +</pre> + </td> + </tr> + <tr> + <td> + <pre class="brush: js"> +function WorkerBee (projs) { + + this.projects = projs || []; +} +WorkerBee.prototype = new Employee; +</pre> + </td> + <td> + <pre class="brush: java"> +public class WorkerBee extends Employee { + public String[] projects; + public WorkerBee () { + this(new String[0]); + } + public WorkerBee (String[] projs) { + projects = projs; + } +} + +</pre> + </td> + </tr> + <tr> + <td> + <pre class="brush: js"> + +function Engineer (mach) { + this.dept = "engineering"; + this.machine = mach || ""; +} +Engineer.prototype = new WorkerBee; +</pre> + </td> + <td> + <pre class="brush: java"> +public class Engineer extends WorkerBee { + public String machine; + public Engineer () { + dept = "engineering"; + machine = ""; + } + public Engineer (String mach) { + dept = "engineering"; + machine = mach; + } +} +</pre> + </td> + </tr> + </tbody> +</table> + +<p>Aquestes definicions de JavaScript utilitzen un modisme especial per a assignar els valors per defecte:</p> + +<pre class="brush: js">this.name = name || ""; +</pre> + +<p>L'operador lògic OR de JavaScript (<code>||</code>) 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 <code>this.name</code>. En cas contrari, assigna una string buida a <code>this.name</code>. Aquest capítol utilitza aquest modisme per a abreujar tot i que pot resultar desconcertant a primera vista.</p> + +<div class="note"> +<p>Això pot no tindre el comportament esperat si la funció constructora es crida amb arguments que s'avaluen a fals (com <code>0</code> (zero) o la cadena buida (<code>""</code>). En aquest cas el valor per defecte serà l'escollit.</p> + +<p>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 <a href="#8.5">Figura 8.5</a>, es pot utilitzar la sentència següent per a crear un now <code>Engineer</code>:</p> +</div> + +<pre class="brush: js">var jane = new Engineer("belau"); +</pre> + +<p>Les propietats de <code>Jane</code> ara són:</p> + +<pre class="brush: js">jane.name == ""; +jane.dept == "engineering"; +jane.projects == []; +jane.machine == "belau" +</pre> + +<p>Fixeu-vos que amb aquestes definicions no és possible especificar un valor inicial per a propietats heretades, com ara <code>name</code>. Si es vol especificar un valor inicial per a propietats heretades a JavaScript és necesari afegir més codi a la funció constructora.</p> + +<p>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.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/4430/=figure8.6.png" style="height: 534px; width: 1063px;"><br> + <small><strong>Figura 8.6 Especificar propietats al consctructor, segona aproximació</strong></small></p> + +<p>Fem un cop d'ull a una d'aquestes definicions en detall. Aquesta és la nova definició del constructor de <code>Engineer</code>:</p> + +<pre class="brush: js">function Engineer (name, projs, mach) { + this.base = WorkerBee; + this.base(name, "engineering", projs); + this.machine = mach || ""; +} +</pre> + +<p>Suposem que creem un nou objecte de tipus <code>Engineer</code> de la forma següent:</p> + +<pre class="brush: js">var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau"); +</pre> + +<p>JavaScript realitza els següents passos:</p> + +<ol> + <li>L'operador new crea un objecte genèric i assigna <code>Engineer.prototype</code> a la propietat <code>__proto__</code> d'aquest nou objecte.</li> + <li>L'operador new passa el nou objecte al constructor de <code>Engineer</code> com a valor de la paraula clau <code>this</code>.</li> + <li>El constructor crea una nova propietat anomenada <code>base</code> per a aquest objecte i assigna el valor del constructor de <code>WorkerBee</code> a aquesta propietat. Això fa que el constructor <code>WorkerBee</code> pugui ser emprat com un mètode de l'objecte <code>Engineer</code>. El nom de la propietat base no és especial. Es pot emprar qualsevol nom de propietat que sigui vàlid; <code>base</code> ha estat escollit perquè simplement és adient per al seu propòsit.</li> + <li>El constructor crida el mètode <code>base</code>, tot passant-li com a arguments dos dels arguments passats al constructor (<code>"Doe, Jane"</code> and <code>["navigator", "javascript"]</code>) i també la string <code>"engineering"</code>. Al passar <code>"engineering"</code> explícitament al constructor tots els objectes de tipus <code>Engineer</code> tindran el mateix valor per a la propietat hertada <code>dept</code>, i aquest valor sobreescriurà el valor heretat de <code>Employee</code>.</li> + <li> + <p>Com que base és un mètode de <code>Engineer</code>, durant la crida a base JavaScript assigna a la paraula clau this l'objecte creat al pas 1. D'aquesta forma, la funció <code>WorkerBee</code> passa els arguments <code>"Doe, Jane"</code> i <code>"engineering"</code> a la funció constructora <code>Employee</code>. Un cop la funció constructora <code>Employee</code> ha retornat, la funció <code>WorkerBee</code> utilitza l'argument restant per a assignar un valor a la propietat <code>projects</code>.</p> + </li> + <li>Un cop el mètode base ha retornat, el constructor <code>Engineer</code> initialitza la propietat <code>machine</code> de l'objecte al valor <code>"belau"</code>.</li> + <li>Un cop el constructor ha retornat, JavaScript assigna el nou objecte a la variable <code>jane</code>.</li> +</ol> + +<p>Es pot pensar que, debug a que s'ha cridat al constructor <code>WorkerBee</code> des de dins el constructor <code>Engineer</code>, s'ha inicialitzat la herència de forma adequada per als objectes <code>Engineer</code>. No és el cas. Cridar el constructor <code>WorkerBee</code> ens asegura que l'objecte <code>Engineer</code> comença amb les propietats especificades per a totes les funcions constructores que es criden. Però, si més tard afegim propietats als prototipus <code>Employee</code> o <code>WorkerBee</code>, aquestes propietats no són heretades per l'objecte <code>Engineer</code>. Per exemple, suposem que tenim les sentències següents:</p> + +<pre class="brush: js">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"; +</pre> + +<p>L'objecte <code>jane</code> no hereta la propietat <code>specialty</code>. 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:</p> + +<pre class="brush: js">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"; +</pre> + +<p>Ara el valor de la propietat specialty de l'objecte <code>jane</code> és "none".</p> + +<p>Una altra forma d'heretar és mitjançant els mètodes <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global Objects/Function/call"><code>call()</code></a> / <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/apply" title="en-US/docs/JavaScript/Reference/Global Objects/Function/apply"><code>apply()</code></a>. Les funcions següents són equivalents:</p> + +<table> + <tbody> + <tr> + <td> + <pre class="brush: js"> +function Engineer (name, projs, mach) { + this.base = WorkerBee; + this.base(name, "engineering", projs); + this.machine = mach || ""; +} +</pre> + </td> + <td> + <pre class="brush: js"> +function Engineer (name, projs, mach) { + WorkerBee.call(this, name, "engineering", projs); + this.machine = mach || ""; +} +</pre> + </td> + </tr> + </tbody> +</table> + +<p>Utilitzar el mètode de JavaScript <code>call()</code> esdevé en una implementació més neta perquè ja no es requereix la propietat <code>base</code>.</p> + +<h2 id="Un_segon_cop_d'ull_a_la_herència_de_propietats">Un segon cop d'ull a la herència de propietats</h2> + +<p>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.</p> + +<h3 id="Valors_locals_versus_valors_heretats">Valors locals versus valors heretats</h3> + +<p>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:</p> + +<ol> + <li>Es comprova si el valor existeix de forma local. En cas afirmatiu es retorna aquest valor.</li> + <li>Si ho hi ha valor local, es cerca a la cadena de prototipus (mitjançant la propietat<code> __proto__</code>).</li> + <li>Si un objecte de la cadena de prototipus té un valor per la propietat especificada, es retorna aquest valor.</li> + <li>Si no es troba aquesta propietat, s'infereix que l'objecte no té aquesta propietat.</li> +</ol> + +<p>El resultat d'aquests passos depèn de com s'hagin definit les coses. L'exemple original disposaba de les següents definicions:</p> + +<pre class="brush: js">function Employee () { + this.name = ""; + this.dept = "general"; +} + +function WorkerBee () { + this.projects = []; +} +WorkerBee.prototype = new Employee; +</pre> + +<p>Amb aquestes definicions, suposem que creem amy com una instància de WorkerBee amb la sentència següent:</p> + +<pre class="brush: js">var amy = new WorkerBee; +</pre> + +<p>L'objecte <code>amy</code> té una propietat local, <code>projects</code>. Els valors per a les propietats <code>name</code> i <code>dept</code> no són locals per a <code>amy</code> i en conseqüència s'obtenen a partir de la propietat <code>__proto__</code> de <code>amy</code>. Així, <code>amy</code> té els següents valors a les seves propietats:</p> + +<pre class="brush: js">amy.name == ""; +amy.dept == "general"; +amy.projects == []; +</pre> + +<p>Ara suposem que canviem el valor de la propietat <code>name</code> en el prototipus associat a <code>Employee</code>:</p> + +<pre class="brush: js">Employee.prototype.name = "Unknown" +</pre> + +<p>A primer cop d'ull podeu pensar que el nou valor es propagarà afectant a totes les instàncies de <code>Employee</code>. Tanmateix això no succeeix.</p> + +<p>Quan es crea <em>qualsevol</em> instància de l'objecte <code>Employee</code>, aquesta instància un valor local per a la propietat <code>name</code> (la cadena buida). Això vol dir que quan s'assigna el prototipus <code>WorkerBee</code> al crear un nou objecte <code>Employee</code>, <code>WorkerBee.propotype</code> té un valor local per a la propietat <code>name</code>. Així, quan JavaScript cerca la propietat <code>name</code> per a l'objecte <code>amy</code> (una instància de <code>WorkerBee</code>), JavaScript trova la variable local per a aquesta propietat a <code>WorkerBee.prototype</code>. Degut a això no cerca la propietat més enllà dins la cadena de prototipus, cap a <code>Employee.prototype</code>.</p> + +<p>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:</p> + +<pre class="brush: js">function Employee () { + this.dept = "general"; +} +Employee.prototype.name = ""; + +function WorkerBee () { + this.projects = []; +} +WorkerBee.prototype = new Employee; + +var amy = new WorkerBee; + +Employee.prototype.name = "Unknown"; +</pre> + +<p>En aquest cas, la propietat <code>name</code> de <code>amy</code> esdevé "Unknown".</p> + +<p>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.</p> + +<h3 id="Determining_instance_relationships">Determining instance relationships</h3> + +<p>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 <code>__proto__</code>. This continues recursively; the process is called "lookup in the prototype chain".</p> + +<p>The special property <code>__proto__</code> is set when an object is constructed; it is set to the value of the constructor's <code>prototype</code> property. So the expression <code>new Foo()</code> creates an object with <code>__proto__ == <code class="moz-txt-verticalline">Foo.prototype</code></code>. Consequently, changes to the properties of <code class="moz-txt-verticalline">Foo.prototype</code> alters the property lookup for all objects that were created by <code>new Foo()</code>.</p> + +<p>Every object has a <code>__proto__</code> object property (except <code>Object</code>); every function has a <code>prototype</code> object property. So objects can be related by 'prototype inheritance' to other objects. You can test for inheritance by comparing an object's <code>__proto__</code> to a function's <code>prototype</code> object. JavaScript provides a shortcut: the <code>instanceof</code> operator tests an object against a function and returns true if the object inherits from the function prototype. For example,</p> + +<pre class="brush: js">var f = new Foo(); +var isTrue = (f instanceof Foo);</pre> + +<p>For a more detailed example, suppose you have the same set of definitions shown in <a href="#Inheriting_properties">Inheriting properties</a>. Create an <code>Engineer</code> object as follows:</p> + +<pre class="brush: js">var chris = new Engineer("Pigman, Chris", ["jsd"], "fiji"); +</pre> + +<p>With this object, the following statements are all true:</p> + +<pre class="brush: js">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; +</pre> + +<p>Given this, you could write an <code>instanceOf</code> function as follows:</p> + +<pre class="brush: js">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; +} +</pre> + +<div class="note"><strong>Note:</strong> 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.</div> + +<p class="note">Using the <code>instanceOf</code> function defined above, these expressions are true:</p> + +<pre class="brush: js">instanceOf (chris, Engineer) +instanceOf (chris, WorkerBee) +instanceOf (chris, Employee) +instanceOf (chris, Object) +</pre> + +<p>But the following expression is false:</p> + +<pre class="brush: js">instanceOf (chris, SalesPerson) +</pre> + +<h3 id="Informació_global_als_constructors">Informació global als constructors</h3> + +<p>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 <code>Employee</code>. Podríem utilitzar la definició següent per a <code>Employee</code>:</p> + +<pre class="brush: js">var idCounter = 1; + +function Employee (name, dept) { + this.name = name || ""; + this.dept = dept || "general"; + this.id = idCounter++; +} +</pre> + +<p>Amb aquesta definició quan es crea un nou <code>Employee</code>, 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 <code>victoria.id</code> val 1 i <code>harry.id</code> val 2:</p> + +<pre class="brush: js">var victoria = new Employee("Pigbert, Victoria", "pubs") +var harry = new Employee("Tschopik, Harry", "sales") +</pre> + +<p> </p> + +<p>At first glance that seems fine. However, <code>idCounter</code> gets incremented every time an <code>Employee</code> object is created, for whatever purpose. If you create the entire <code>Employee</code> hierarchy shown in this chapter, the <code>Employee</code> constructor is called every time you set up a prototype. Suppose you have the following code:</p> + +<pre class="brush: js">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"); +</pre> + +<p>Ara suposem que les definicions omeses aquí tenen la propietat <code>base</code> i criden el constructor que tenen damunt de la cadena de prototipus. En aquest cas, quan es crea l'objecte <code>mac</code>, <code>mac.id</code> rep el valor de 5.</p> + +<p>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:</p> + +<pre class="brush: js">function Employee (name, dept) { + this.name = name || ""; + this.dept = dept || "general"; + if (name) + this.id = idCounter++; +} +</pre> + +<p>Al crear una instància de <code>Employee</code> 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 <code>Employee</code> rebi una id, requerim que rebi un nom. Executar l'exemple anterior amb el nou constructor esdevindrà en que <code>mac.id</code> rebi el valor 1.</p> + +<h3 id="No_hi_ha_herència_múltiple">No hi ha herència múltiple</h3> + +<p>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.</p> + +<p>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.</p> + +<p>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:</p> + +<pre class="brush: js">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") +</pre> + +<p>Ara suposem que la definició de WorkerBee és l'emprada abans en aquest capítol. En aquest case l'objecte <code>dennis</code> rep les propietats següents:</p> + +<pre class="brush: js">dennis.name == "Doe, Dennis" +dennis.dept == "engineering" +dennis.projects == ["collabra"] +dennis.machine == "hugo" +dennis.hobby == "scuba" +</pre> + +<p>Així tenim que dennis rep la propietat <code>hobby</code> del constructor <code>Hobbyist</code>. Tot i així, suposem llavors que afegim una propietat al constructor del prototipus <code>Hobbyist</code>:</p> + +<pre class="brush: js">Hobbyist.prototype.equipment = ["mask", "fins", "regulator", "bcd"] +</pre> + +<p>L'objecte <code>dennis</code> no hereta aquesta nova propietat.</p> + +<div>{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}</div> 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 +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}</div> + +<p>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.</p> + +<h2 id="Expressions">Expressions</h2> + +<p>Una <em>expressió</em> és qualsevol unitat de codi vàlida que esdevé un valor.</p> + +<p>Conceptualment hi ha dos tipus d'expressions: les que assignen un valor a una variable i les que simplement tenen un valor.</p> + +<p>L'expressió <code>x = 7</code> és un exemple del primer tipus. Aquesta expressió fa servir l'operador<em> </em> = per a assignar el valor set a la variable <code>x</code>. L'expressió per si mateixa s'avalua com a 7.</p> + +<p>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.<br> + <br> + JavaScript té les següents categories d'expressions:</p> + +<ul> + <li>Aritmètiques: s'avaluen a un nombre, per exemple 3.14159. (Generalment utilitzen {{ web.link("#Arithmetic_operators", "operadors aritmètics") }}.)</li> + <li>String: s'avaluen a una cadena de caràcters, per exemple, "Pau" o "234". (Generalment utilitzen {{ web.link("#String_operators", "operadors d'strings") }}.)</li> + <li>Lògiques: s'avaluen a cert o fals. (sovint inclouen {{ web.link("#Logical_operators", "operadors lògics") }}.)</li> + <li>Objecte: s'avaluen a un objecte. (Vegeu els {{ web.link("#Special_operators", "operadors especials") }} més informació.)</li> +</ul> + +<h2 id="Operadors">Operadors</h2> + +<p>JavaScript disposa dels següents tipus d'operadors. Aquesta secció descriu els operadors i conté informació sobre la seva precedència.</p> + +<ul> + <li>{{ web.link("#Assignment_operators", "Operadors d'assignació") }}</li> + <li>{{ web.link("#Comparison_operators", "Operadors de comparació") }}</li> + <li>{{ web.link("#Arithmetic_operators", "Operadors aritmètics") }}</li> + <li>{{ web.link("#Bitwise_operators", "Operadors de bits") }}</li> + <li>{{ web.link("#Logical_operators", "Operadors lògics") }}</li> + <li>{{ web.link("#String_operators", "Operadors de strings") }}</li> + <li>{{ web.link("#Special_operators", "Operadors especials") }}</li> +</ul> + +<p>JavaScript té operadors <em>binaris</em> i <em>unaris</em>, 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:</p> + +<pre><em>operand1</em> <em>operador</em> <em>operand2</em> +</pre> + +<p>Per exemple, <code>3+4</code> o <code>x*y</code>.</p> + +<p>Un operador unari A requereix d'un sol operand, ja sigui abans o després de l'operador:</p> + +<pre><em>operador</em> <em>operand</em> +</pre> + +<p>o be</p> + +<pre><em>operand</em> <em>operador</em> +</pre> + +<p>Per exemple, <code>x++</code> o <code>++x</code>.</p> + +<h3 id="Operadors_d'assignació">Operadors d'assignació</h3> + +<p>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 (<code>=</code>), que assigna el valor de l'operand de la dreta a l'operand de l'esquerra. És a dir, <code>x = y</code> assigna el valor de <code>y</code> a <code>x</code>.</p> + +<p>També hi ha operadors d'assignació compostos, que són abreviacions per als operadors llistats a la taula següent:</p> + +<table class="standard-table"> + <caption>Taula 3.1 Operadors d'assignació</caption> + <thead> + <tr> + <th scope="col">Operadors d'assignació compostos</th> + <th scope="col">Significat</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>x += y</code></td> + <td><code>x = x + y</code></td> + </tr> + <tr> + <td><code>x -= y</code></td> + <td><code>x = x - y</code></td> + </tr> + <tr> + <td><code>x *= y</code></td> + <td><code>x = x * y</code></td> + </tr> + <tr> + <td><code>x /= y</code></td> + <td><code>x = x / y</code></td> + </tr> + <tr> + <td><code>x %= y</code></td> + <td><code>x = x % y</code></td> + </tr> + <tr> + <td><code>x <<= y</code></td> + <td><code>x = x << y</code></td> + </tr> + <tr> + <td><code>x >>= y</code></td> + <td><code>x = x >> y</code></td> + </tr> + <tr> + <td><code>x >>>= y</code></td> + <td><code>x = x >>> y</code></td> + </tr> + <tr> + <td><code>x &= y</code></td> + <td><code>x = x & y</code></td> + </tr> + <tr> + <td><code>x ^= y</code></td> + <td><code>x = x ^ y</code></td> + </tr> + <tr> + <td><code>x |= y</code></td> + <td><code>x = x | y</code></td> + </tr> + </tbody> +</table> + +<h3 id="Operadors_de_comparació">Operadors de comparació</h3> + +<p><span class="comment">This seems to me kind of poorly explained, mostly the difference betwen "==" and "==="...</span>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ó.<br> + 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 <code>===</code> i <code>!==</code>, 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:</p> + +<pre class="brush: js">var var1 = 3, var2 = 4; +</pre> + +<table class="standard-table"> + <caption>Taula 3.2 Operadors de comparació</caption> + <thead> + <tr> + <th scope="col">Operador</th> + <th scope="col">Descripció</th> + <th scope="col">Exemples que s'avaluen a cert</th> + </tr> + </thead> + <tbody> + <tr> + <td>Igualtat (<code>==</code>)</td> + <td>Retorna true si els operands són iguals.</td> + <td><code>3 == var1</code> + <p><code>"3" == var1</code></p> + <code>3 == '3'</code></td> + </tr> + <tr> + <td>No-igualtat (<code>!=</code>)</td> + <td>Retorna true si els operands són diferents.</td> + <td><code>var1 != 4<br> + var2 != "3"</code></td> + </tr> + <tr> + <td>Igualtat estricta (<code>===</code>)</td> + <td>Retorna true si els operands són iguals i del mateix tipus. Vegeu també <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> i <a href="/en-US/docs/Web/JavaScript/Guide/Sameness" title="/en-US/docs/Web/JavaScript/Guide/Sameness">igualtat a JS</a>.</td> + <td><code>3 === var1</code></td> + </tr> + <tr> + <td>No-igualtat estricta (<code>!==</code>)</td> + <td>Retorna true si els operands no són iguals i/o del mateix tipus.</td> + <td><code>var1 !== "3"<br> + 3 !== '3'</code></td> + </tr> + <tr> + <td>Major que (<code>></code>)</td> + <td>Retorna true si l'operand de l'esquerra és més gran que l'operand e la dreta.</td> + <td><code>var2 > var1<br> + "12" > 2</code></td> + </tr> + <tr> + <td>Major o igual que (<code>>=</code>)</td> + <td>Retorna true si l'operand de l'esquera és major o igual que l'operand de la dreta.</td> + <td><code>var2 >= var1<br> + var1 >= 3</code></td> + </tr> + <tr> + <td>Menor que (<code><</code>)</td> + <td>Retorna true si l'operand de l'esquerra és més petit que l'operand de la dreta.</td> + <td><code>var1 < var2<br> + "2" < "12"</code></td> + </tr> + <tr> + <td>Menor o igual que (<code><=</code>)</td> + <td>Retorna true si l'operand de l'esquerra és menor o igual que l'operand de la dreta.</td> + <td><code>var1 <= var2<br> + var2 <= 5</code></td> + </tr> + </tbody> +</table> + +<h3 id="Operadors_aritmètics">Operadors aritmètics</h3> + +<p>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 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>). Per exemple:</p> + +<pre class="brush: js">console.log(1 / 2); /* imprimeix 0.5 */ +console.log(1 / 2 == 1.0 / 2.0); /* això també és cert */ +</pre> + +<p>Adicionalment, JavaScript proporciona els operadors aritmètics llistats a la taula següent:</p> + +<table class="fullwidth-table"> + <caption>Taula 3.3 Operadors aritmètics</caption> + <thead> + <tr> + <th scope="col">Operador</th> + <th scope="col">Descripció</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>%</code><br> + (Mòdul)</td> + <td>Operador binari. Retorna el residu de dividir els dos operands.</td> + <td>12 % 5 retorna 2.</td> + </tr> + <tr> + <td><code>++</code><br> + (Increment)</td> + <td> + <p>Operador unari. Afegeix un al seu operand. Si s'utilitza com a prefix (<code>++x</code>), retorna el valor del seu operand després d'afexir-li un; si s'utilitza com a sufix (<code>x++</code>), retorna el valor del seu operand abans d'afegir-li un.</p> + </td> + <td>Si <code>x</code> és 3, llavors <code>++x</code> assigna 4 a <code>x</code> i retorna 4, mentre que <code>x++</code> retorna 3 i, només llavors, assigna 4 a <code>x</code>.</td> + </tr> + <tr> + <td><code>--</code><br> + (Decrement)</td> + <td>Operador uniari. Resta un al seu operand. Retorna el valor anàleg a l'operador increment.</td> + <td>Si <code>x</code> és 3, llavors <code>--x</code> assigna 2 a <code>x</code> i retorna 2, mentre que <code>x--</code> retorna 3 i, només llavors, assigna 2 a<code> x</code>.</td> + </tr> + <tr> + <td><code>-</code><br> + (Negació unària)</td> + <td>Operador unari. Retorna el resultat de negar el seu operand.</td> + <td>Si <code>x</code> val 3, llavors <code>-x</code> retorna -3.</td> + </tr> + </tbody> +</table> + +<h3 id="Operadors_de_bits">Operadors de bits</h3> + +<p>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.</p> + +<p>La taula següent resumeix els operadors de bits disponibles a JavaScript.</p> + +<table class="standard-table"> + <caption>Taula 3.4 Operadors de bits</caption> + <thead> + <tr> + <th scope="col">Operador</th> + <th scope="col">Ús</th> + <th scope="col">Descripció</th> + </tr> + </thead> + <tbody> + <tr> + <td>AND binari</td> + <td><code>a & b</code></td> + <td>Retorna 1 a cada posició de bit on la posició corresponent a ambdós operadors conten uns.</td> + </tr> + <tr> + <td>OR binari</td> + <td><code>a | b</code></td> + <td> + <p>Retorna 1 a cada posició de bit on al menys un dels operands té un 1 a la posició corresponent.</p> + </td> + </tr> + <tr> + <td>XOR binari</td> + <td><code>a ^ b</code></td> + <td> + <p>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.</p> + </td> + </tr> + <tr> + <td>NOT binari</td> + <td><code>~ a</code></td> + <td>Inverteix els bits del seu operand.</td> + </tr> + <tr> + <td>Desplaçament a l'esquerra</td> + <td><code>a << b</code></td> + <td>Desplaça la representació binària de <code>a</code> <code>b</code> bits a l'esquerra, afegint zeros a la dreta.</td> + </tr> + <tr> + <td>Desplaçament a la dreta amb propagació de signe</td> + <td><code>a >> b</code></td> + <td>Desplaça la representació binària de <code>a</code> <code>b</code> bits a la dreta, descartant els bits que no hi caben.</td> + </tr> + <tr> + <td>Desplaçament a la dreta amb inserció de zeros</td> + <td><code>a >>> b</code></td> + <td>Desplaça la representació binària de <code>a</code> <code>b</code> bits a la dreta, descartant els bits que no hi caben i inserint zeros a l'esquerra.</td> + </tr> + </tbody> +</table> + +<h4 id="Bitwise_Logical_Operators" name="Bitwise_Logical_Operators">Operadors lògics de bits</h4> + +<p>Conceptualment, els operadors lògics de bits funcionen de la següent manera:</p> + +<ul> + <li>Es converteixen els operands a nombres sencers de 32 bits expressats per una sèrie de bits (zeros i uns).</li> + <li>S'emparella cada bit del primer operand amb el bit corresponent del segond operand: el primer bit amb el primer bit, el segon amb el segon, etcètera.</li> + <li>S'aplica l'operador per a cada parella de bits, i el resultat es construeix de forma binària.</li> +</ul> + +<p>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:</p> + +<table class="standard-table"> + <caption>Taula 3.5 Exemples d'operadors de bits</caption> + <thead> + <tr> + <th scope="col">Expressió</th> + <th scope="col">Resultat</th> + <th scope="col">Descripció binària</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>15 & 9</code></td> + <td><code>9</code></td> + <td><code>1111 & 1001 = 1001</code></td> + </tr> + <tr> + <td><code>15 | 9</code></td> + <td><code>15</code></td> + <td><code>1111 | 1001 = 1111</code></td> + </tr> + <tr> + <td><code>15 ^ 9</code></td> + <td><code>6</code></td> + <td><code>1111 ^ 1001 = 0110</code></td> + </tr> + <tr> + <td><code>~15</code></td> + <td><code>-16</code></td> + <td><code>~</code><code>00000000...</code><code>00001111 = </code><code>1111</code><code>1111</code><code>...</code><code>11110000</code></td> + </tr> + <tr> + <td><code>~9</code></td> + <td><code>-10</code></td> + <td><code>~</code><code>00000000</code><code>...</code><code>0000</code><code>1001 = </code><code>1111</code><code>1111</code><code>...</code><code>1111</code><code>0110</code></td> + </tr> + </tbody> +</table> + +<p>Fixeu-vos que a l'utilitzar l'operador de bits <code>NOT</code> 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).</p> + +<h4 id="Bitwise_Shift_Operators" name="Bitwise_Shift_Operators">Operadors de desplaçament de bits</h4> + +<p>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.</p> + +<p>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.</p> + +<table class="fullwidth-table"> + <caption>Taula 3.6 Operadors de desplaçament de bits</caption> + <thead> + <tr> + <th scope="col">Operador</th> + <th scope="col">Descripció</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><<</code><br> + (Desplaçament a l'esquerra)</td> + <td> + <p>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.</p> + </td> + <td><code>9<<2</code> retorna 36, perquè 1001 desplaçat 2 bits a l'esquerra esdevé 100100, que és la representació binaria de 36.</td> + </tr> + <tr> + <td><code>>></code><br> + (Desplaçament a la dreta amb propagació de signe)</td> + <td> + <p>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.</p> + </td> + <td><code>9>>2</code> 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, <code>-9>>2</code> retorna -3, perquè el signe l'operand preseva el signe.</td> + </tr> + <tr> + <td><code>>>></code><br> + (Desplaçament a la dreta omplint amb zeros)</td> + <td> + <p>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.</p> + </td> + <td><code>19>>>2</code> 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.</td> + </tr> + </tbody> +</table> + +<h3 id="Operadors_lògics">Operadors lògics</h3> + +<p>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.</p> + +<table class="fullwidth-table"> + <caption>Taula 3.6 Operadors lògics</caption> + <thead> + <tr> + <th scope="col">Operador</th> + <th scope="col">Ús</th> + <th scope="col">Descripció</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>&&</code></td> + <td><code>expr1 && expr2</code></td> + <td>(AND lògic) Retorna <code>expr1</code> si pot ser convertida a fals; en qualsevol altre cas retorna <code>expr2</code>. Així, quan es proporcionen operands booleans, <code>&&</code> retorna true si ambdós operands són true: en qualsevol altre cas retorna fals.</td> + </tr> + <tr> + <td><code>||</code></td> + <td><code>expr1 || expr2</code></td> + <td>(OR lògic) Retorna <code>expr1</code> si pot ser convertida a true; en qualsevol altre cas retorna <code>expr2</code>. És a dir, quan s'utilitza amb operands booleans, <code>||</code> retorna true si qualsevol dels dos operands és true; si ambdós operands són false, retorna false.</td> + </tr> + <tr> + <td><code>!</code></td> + <td><code>!expr</code></td> + <td>(NOT lògic) Retorna false si el seu únic operand es pot convertir a true; en qualsevol altre cas retorna true.</td> + </tr> + </tbody> +</table> + +<p>Alguns exemples d'expressions que es poden convertir a false són aquelles que s'avaluen a <code>null</code>, <code>0</code>, <code>NaN</code>, l'string buit (<code>""</code>), o <code>undefined</code>.</p> + +<p>El codi següent mostra exemples de l'operador && (AND lògic).</p> + +<pre class="brush: js">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 +</pre> + +<p>El codi següent mostra exemples de l'operador || (OR lògic).</p> + +<pre class="brush: js">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 +</pre> + +<p>El codi següent mostra exemples de l'operador ! (NOT lògic).</p> + +<pre class="brush: js">var n1 = !true; // !t retorna false +var n2 = !false; // !f retorna true +var n3 = !"Cat"; // !t retorna false +</pre> + +<h4 id="Short-Circuit_Evaluation" name="Short-Circuit_Evaluation">Avaluació en curtcircuit</h4> + +<p>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:</p> + +<ul> + <li><code>false</code> && <em>quelcom</em> es curtcircuita avaluant-se a false.</li> + <li><code>true</code> || quelcom es curtcircuita avaluant-se a true.</li> +</ul> + +<p>Les regles de la lògica garanteixen que aquestes avaluacions sempre són correctes. Cal remarca que la part <em>quelcom</em> no arriva a avaluar-se mai, així que cap efecte secundari provocat per la seva avaluació tindrà efecte.</p> + +<h3 id="Operadors_de_Strings">Operadors de Strings</h3> + +<p>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, <code>"la meva " + "string"</code> retorna la string <code>"la meva string"</code>.</p> + +<p>L'abreviació de operador d'assignació += també pot ser emprat per a concatenar strings. Per exemple, si la variable <code>mystring</code> te el valor "alfa", llavors l'expressió <code>mystring += "bet"</code> s'avalua a "alfabet" i assigna aquest valor a <code>mystring</code>.</p> + +<h3 id="Operadors_especial">Operadors especial</h3> + +<p>JavaScript ofereix els següents operadors especials:</p> + +<ul> + <li>{{ web.link("#Conditional_operator", "Operador condicional") }}</li> + <li>{{ web.link("#Comma_operator", "Operador coma") }}</li> + <li><code>{{ web.link("#delete", "delete") }}</code></li> + <li><code>{{ web.link("#in", "in") }}</code></li> + <li><code>{{ web.link("#instanceof", "instanceof") }}</code></li> + <li><code>{{ web.link("#new", "new") }}</code></li> + <li><code>{{ web.link("#this", "this") }}</code></li> + <li><code>{{ web.link("#typeof", "typeof") }}</code></li> + <li><code>{{ web.link("#void", "void") }}</code></li> +</ul> + +<h4 id="conditional_operator" name="conditional_operator">Operador condicional</h4> + +<p>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:</p> + +<pre><em>condició</em> ? <em>val1</em> : <em>val2</em> +</pre> + +<p>Si <code>condició</code> és certa, l'operador retorna el valor <code>val1</code>. En qualsevol altre cas retorna el valor <code>val2</code>. Es pot emprar l'operador condicional a qualsevol lloc on es pugui utilitzar un operador standard.</p> + +<p>Per exemple,</p> + +<pre class="brush: js">var estat = (edat >= 18) ? "adult" : "menor"; +</pre> + +<p>Aquesta sentència assigna el valor "adult" a la variable <code>estat</code> si edat és 18 o més. En qualsevol altre cas assigna el valor "menor" a <code>estat</code>.</p> + +<h4 id="comma_operator" name="comma_operator">Operador coma</h4> + +<p>L'operador coma (<code>,</code>) simplement avalua els seus dos operands i retorna el valor del segon operand. Aquest operdor s'utilitza principalment dins el bucle <code>for</code> per a permetre que múltiples variables s'actualitzin per a cada volta del bucle.</p> + +<p>Per exemple, si <code>a</code> é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:</p> + +<pre class="brush: js">for (var i = 0, j = 9; i <= j; i++, j--) + document.writeln("a[" + i + "][" + j + "]= " + a[i][j]); +</pre> + +<h4 id="delete" name="delete"><code>delete</code></h4> + +<p>L'operador <code>delete</code> esborra un objecte, una propietat d'un objecte o l'element a la posició especificada d'un array. La sintaxi és:</p> + +<pre class="brush: js">delete nomObjecte; +delete nomObjecte.property; +delete nomObjecte[index]; +delete propietat; // Només és legal dins una sentència with +</pre> + +<p>on <code>nomObjecte</code> és el nom d'un objecte, <code>propietat</code> és una propietat existent i <code>index</code> és un nombre sencer que representa la posició d'un element dins un array.</p> + +<p>La quarta forma només és legal dins una sentència <code>with</code>, per a esborrar la propietat d'un objecte.</p> + +<p>Es pot emprar l'operador <code>delete</code> per a esborrar variables declarades implícitament però no serveix per a variables declarades amb la sentència <code>var</code>.</p> + +<p>Si l'operador delete aconsegueix el seu objectiu, assigna el valor <code>undefined</code> a la propietat o element esmentat. L'operador <code>delete</code> retorna true si l'operació és posible; retorna false si l'operació no és posible.</p> + +<pre class="brush: js">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) +</pre> + +<h5 id="Esborrar_elements_d'un_array">Esborrar elements d'un array</h5> + +<p>A l'esborrar l'element d'un array, la longitud de l'array no es veu afectada. Per exemple, si s'esborrar <code>a[3]</code>, <code>a[4]</code> roman a <code>a[4]</code> mentre que <code>a[3]</code> passa a valer <code>undefined</code>.</p> + +<p>Quan l'operador delete esborra un element d'un array, aquest element ja no és a l'array. Al següent exemple, s'esborra <code>trees[3]</code> amb delete. Tot i així, <code>trees[3]</code> encara és accessible i retorna <code>undefined</code>.</p> + +<pre class="brush: js">var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); +delete trees[3]; +if (3 in trees) { + // aquest codi no s'arriba a executar mai +} +</pre> + +<p>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 <code>delete</code>. Al següent exemple, <code>trees[3]</code> rep el valor <code>undefined</code>, però l'elelement de l'array encara existeix:</p> + +<pre class="brush: js">var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); +trees[3] = undefined; +if (3 in trees) { + // aquest codi s'executa +} +</pre> + +<h4 id="in" name="in"><code>in</code></h4> + +<p>L'operador <code>in</code> retorna true si la propietat especificada existeix en l'objecte especificat. La sintaxi és:</p> + +<pre class="brush: js">nomPropOnombre in nomObjecte +</pre> + +<p>on <code>nomPropOnombre</code> é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 <code>nomObjecte</code> és el nom d'un objecte.</p> + +<p>Els següents exemples mostren alguns usos de l'operador <code>in</code>.</p> + +<pre class="brush: js">// 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 +</pre> + +<h4 id="instanceof" name="instanceof"><code>instanceof</code></h4> + +<p>L'operador <code>instanceof</code> retorna cert si l'objecte especificat és del tipus especificat. La sintaxi és:</p> + +<pre class="brush: js">nomObjecte instanceof tipusObjecte +</pre> + +<p>on <code>nomObjecte</code> és el nom de l'objecte a comprarar amb <code>tipusObjecte</code>, i tipusObjecte és un tipus d'objecte, com ara <code>Date</code> o <code>Array</code>.</p> + +<p>Utilitzeu <code>instanceof</code> 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.</p> + +<p>Per exemple, el següent codi utilitza instanceof per a determinar si <code>dia</code> és un objecte de tipus <code>Date</code>. Com que dia és un objecte de tipus <code>Date</code> les sentències dins la sentència <code>if</code> s'executaran.</p> + +<pre class="brush: js">var dia = new Date(1995, 12, 17); +if (dia instanceof Date) { + // bloc de codi que s'executarà +} +</pre> + +<h4 id="new" name="new"><code>new</code></h4> + +<p>L'operador <code>new</code> 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 <code>Array</code>, <code>Boolean</code>, <code>Date</code>, <code>Function</code>, <code>Image</code>, <code>Number</code>, <code>Object</code>, <code>Option</code>, <code>RegExp</code>, o <code>String</code>. Al servidor també es pot emprar amb <code>DbPool</code>, <code>Lock</code>, <code>File</code>, i <code>SendMail</code>. La sintaxi de <code>new</code> és la següent:</p> + +<pre class="brush: js">var nomObjecte = new tipusObjecte([param1, param2, ..., paramN]); +</pre> + +<p>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") }}.</p> + +<p>Vegeu la pàgina de l'<a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">operador <code>new</code></a> a la Referència del nucli de JavaScript per a més informació.</p> + +<h4 id="this" name="this"><code>this</code></h4> + +<p>La paraula clau <code>this</code> 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 <code>this</code> és la següent:</p> + +<pre class="brush: js">this["nomPropietat"] +</pre> + +<pre class="brush: js">this.nomPropietat +</pre> + +<p><strong>Exemple 1.</strong><br> + Suposem que una funció anomenada <code>validate</code> valida la propietat <code>value</code> d'un objecte, donat l'objecte i el rang de valors:</p> + +<pre class="brush: js">function validate(obj, lowval, hival){ + if ((obj.value < lowval) || (obj.value > hival)) + alert("Valor no vàlid!"); +} +</pre> + +<p>Podríem cridar <code>validate</code> a cada manegador d'events <code>onChange</code> dels elements d'un formulari, utilitzant <code>this</code> per a passar l'element del formulari, tal i com es mostra al següent exemple:</p> + +<pre class="brush: html"><B>Introduïu un nombre entre 18 i 99:</B> +<INPUT TYPE="text" NAME="edat" SIZE=3 + onChange="validate(this, 18, 99);"> +</pre> + +<p><strong>Exemple 2.</strong><br> + Al combinar-lo amb la propietat del <code>form</code>, <code>this</code> fa referència al pare de l'objecte del formulari. Al següent exemple el form <code>myForm</code> conté un bojecte <code>Text</code> i un botó. Quan l'usuari fa clic al botó, el valor de l'objecte <code>Text</code> és assignat al nom del formulari. El manegador de l'event <code>onClick</code> del botó utilitza <code>this.form</code> per a fererir-se al fomulari pare, <code>myForm</code>.</p> + +<pre class="brush: html"><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> +</pre> + +<h4 id="typeof" name="typeof"><code>typeof</code></h4> + +<p>L'operador <code>typeof</code> es pot utilitzar de qualsevol de les formes següents:</p> + +<ol> + <li> + <pre class="brush: js">typeof operand +</pre> + </li> + <li> + <pre class="brush: js">typeof (operand) +</pre> + </li> +</ol> + +<p>L'operador <code>typeof</code> 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.</p> + +<p>Suposem que es defineixen les següents variables:</p> + +<pre class="brush: js">var myFun = new Function("5 + 2"); +var forma = "rodona"; +var tamany = 1; +var avui = new Date(); +</pre> + +<p>L'operador <code>typeof</code> retornarà els següents resultats per a aquestes variables:</p> + +<pre class="brush: js">typeof myFun; // retorna "function" +typeof forma; // retorna "string" +typeof tamany; // retorna "number" +typeof avui; // retorna "object" +typeof noExisteix; // retorna "undefined" +</pre> + +<p>Per a les paraules clau <code>true</code> i <code>null</code>, l'operador <code>typeof</code> retorna els següents resultats:</p> + +<pre class="brush: js">typeof true; // retorna "boolean" +typeof null; // retorna "object" +</pre> + +<p>Per a un nombre o string, l'operador <code>typeof</code> retorna els següents resultats:</p> + +<pre class="brush: js">typeof 62; // retorna "number" +typeof 'Hola món'; // retorna "string" +</pre> + +<p>Per a valors de propietats, l'operador <code>typeof</code> retorna el tipus del valor que conté la propietat:</p> + +<pre class="brush: js">typeof document.lastModified; // retorna "string" +typeof window.length; // retorna "number" +typeof Math.LN2; // retorna "number" +</pre> + +<p>Per a mètodes i funcions, l'operador <code>typeof</code> retorna els següents resultats:</p> + +<pre class="brush: js">typeof blur; // retorna "function" +typeof eval; // retorna "function" +typeof parseInt; // retorna "function" +typeof shape.split; // retorna "function" +</pre> + +<p>Per a objectes predefinits, l'operador <code>typeof</code> retorna els resultats següents:</p> + +<pre class="brush: js">typeof Date; // retorna "function" +typeof Function; // retorna "function" +typeof Math; // retorna "object" +typeof Option; // retorna "function" +typeof String; // retorna "function" +</pre> + +<h4 id="void" name="void"><code>void</code></h4> + +<p>L'operador <code>void</code> es pot emprar de qualsevol de les maneres següents:</p> + +<ol> + <li> + <pre class="brush: js">void (expression) +</pre> + </li> + <li> + <pre class="brush: js">void expression +</pre> + </li> +</ol> + +<p>L'operador <code>void</code> avalua una expressió però no retorna cap valor. <code>expression</code> é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.</p> + +<p>És possible utilitzar l'operador <code>void</code> per a especificar una expressió com a hipervincle. L'expressió serà avaluada però el seu contingut no reemplaçarà el contingut del document actual.</p> + +<p>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, <code>void(0)</code> serà avaluada com a <code>undefined</code>, la qual cosa no té cap efecte en JavaScript.</p> + +<pre class="brush: html"><A HREF="javascript:void(0)">Cliqueu aquí per a no fer res</A> +</pre> + +<p>El codi següent crea un hipervincle que envia un formulari quan l'usuari fa clic sobre ell.</p> + +<pre class="brush: html"><A HREF="javascript:void(document.form.submit())"> +Feu clic aquí per a enviar el formulari</A></pre> + +<h3 id="Precedència_d'operadors">Precedència d'operadors</h3> + +<p>La <em>precedència</em> 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.</p> + +<p>La taula següent descriu la precedència dels operadors, del més prioritari al que ho és menys.</p> + +<table class="standard-table"> + <caption>Taula 3.7 Precedència d'operadors</caption> + <thead> + <tr> + <th scope="col">Tipus d'operador</th> + <th scope="col">Operadors individuals</th> + </tr> + </thead> + <tbody> + <tr> + <td>membre</td> + <td><code>. []</code></td> + </tr> + <tr> + <td>crida / creació d'una instància</td> + <td><code>() new</code></td> + </tr> + <tr> + <td>negació/increment</td> + <td><code>! ~ - + ++ -- typeof void delete</code></td> + </tr> + <tr> + <td>multiplicació/divisió</td> + <td><code>* / %</code></td> + </tr> + <tr> + <td>suma/resta</td> + <td><code>+ -</code></td> + </tr> + <tr> + <td>desplaçament de bits</td> + <td><code><< >> >>></code></td> + </tr> + <tr> + <td>relacionals</td> + <td><code>< <= > >= in instanceof</code></td> + </tr> + <tr> + <td>igualtat</td> + <td><code>== != === !==</code></td> + </tr> + <tr> + <td>AND binari</td> + <td><code>&</code></td> + </tr> + <tr> + <td>XOR binari</td> + <td><code>^</code></td> + </tr> + <tr> + <td>OR binari</td> + <td><code>|</code></td> + </tr> + <tr> + <td>AND lògic</td> + <td><code>&&</code></td> + </tr> + <tr> + <td>OR lògic</td> + <td><code>||</code></td> + </tr> + <tr> + <td>condicional</td> + <td><code>?:</code></td> + </tr> + <tr> + <td>assignació</td> + <td><code>= += -= *= /= %= <<= >>= >>>= &= ^= |=</code></td> + </tr> + <tr> + <td>coma</td> + <td><code>,</code></td> + </tr> + </tbody> +</table> + +<p>Trobareu una versió més detallada d'aqueta taula, completa amb enllaços a a detalls adicionals per a cada operador a la <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table">Referència de JavaScript</a>.</p> 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 +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</div> + +<p>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.</p> + +<h2 id="Definir_funcions">Definir funcions</h2> + +<p>Una<strong> definició de funció</strong> (també anomenada<strong> declaració de funció</strong>) consta de la paraula clau <a href="/en-US/docs/JavaScript/Reference/Statements/function" title="function"><code>function</code></a>, seguit per:</p> + +<ul> + <li>El nom de la funció.</li> + <li>Una llista de paràmetres de la funció, continguts entre parèntesis i separats per comes.</li> + <li>Les sentències de JavaScript que defineixen la funció, contingudes entre claus, <code>{ }</code>.</li> +</ul> + +<p>Per exemple, el codi següent defineix una funció simple anomenada <code>square</code>:</p> + +<div style="margin-right: 270px;"> +<pre class="brush: js">function square(number) { + return number * number; +} +</pre> +</div> + +<p>La funció <code>square</code> té un paràmetre, anomenat <code>number</code>. Aquesta funció consisteix d'una sentència que retorna l'argument de la funció ( <code>number</code>) multiplicat per ell mateix. La sentència <a href="/en-US/docs/JavaScript/Reference/Statements/return" title="return"><code>return</code></a> especifica el valor retornat per la funció.</p> + +<pre class="brush: js">return number * number; +</pre> + +<p>Els paràmetres primitius (com ara un nombre) són passat a les funcions <strong> per valor</strong>; 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.</p> + +<p>Si es pasa un objecte (p.ex. un <a href="/en-US/docs/JavaScript/Glossary" title="en-US/docs/JavaScript/Glossary">valor no primitiu</a>, com ara un <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> 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:</p> + +<pre class="brush: js">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) +</pre> + +<div class="note"> +<p>Nota: Assignar un nou objecte als paràmetres <strong>no</strong> 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:</p> +</div> + +<pre class="brush: js">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" </pre> + +<p>Mentre que la declaració de la funció d'adalt és sintàcticament una sentència, les funcions també poden ser creades per l'<strong> expressió d'una funció</strong>. Aquesta funció pot ser <strong>anònima</strong>; no té cap nom. Per exemple, la funció <code style="font-size: 14px;">square</code> podria ésser definida com:</p> + +<pre class="brush: js" style="font-size: 14px;">var square = function(number) {return number * number}; +var x = square(4) //x gets the value 16</pre> + +<p>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.</p> + +<pre class="brush: js" style="font-size: 14px;">var factorial = function fac(n) {return n<2 ? 1 : n*fac(n-1)}; + +console.log(factorial(3)); +</pre> + +<p>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.</p> + +<pre class="brush: js" style="font-size: 14px;">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; +} +</pre> + +<p>El codi següent:</p> + +<pre class="brush: js" style="font-size: 14px;">map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]); +</pre> + +<p>retorna [0, 1, 8, 125, 1000].</p> + +<p>En JavaScript, una funció pot ser definida basant-se en una condició. Per exemple, la següent definició de la funció defineix <code>myFunc</code> només si <code>num</code> és igual 0:</p> + +<pre class="brush: js">var myFunc; +if (num == 0){ + myFunc = function(theObject) { + theObject.make = "Toyota" + } +}</pre> + +<p><span style="line-height: 1.572;">A més de definir les funcions com ho fem aquí, podeu utilitzar el </span><a href="/en-US/docs/JavaScript/Guide/Predefined_Core_Objects#Function_Object" style="line-height: 1.572;" title="en-US/docs/JavaScript/Guide/Predefined Core Objects#Function Object">constructor de funció</a><span style="line-height: 1.572;"> per crear funcions d'una cadena en temps d'execució, igual que </span><a href="/en-US/docs/JavaScript/Guide/Functions#eval_Function" style="line-height: 1.572;" title="en-US/docs/JavaScript/Guide/Functions#eval_Function"><code>eval()</code></a><span style="line-height: 1.572;">.</span></p> + +<p>Un <strong>mètode</strong> és una funció que es propietat d'un objecte. Podeu llegir més sobre mètodes i funcions a <a href="/en-US/docs/JavaScript/Guide/Working_with_Objects" title="en-US/docs/JavaScript/Guide/Working with Objects">Treballar amb objectes</a>.</p> + +<h2 id="Crida_de_funcions">Crida de funcions</h2> + +<p>Definir una funció no l'executa. Definir una funció simplement anomena la funció i especifica que fer quan es crida la funció. <strong>Cridar</strong> la funció en realitat realitza les accions especificades amb els paràmetres indicats. Per exemple, si es defineix la funció <code>square</code>, aquesta es cridaria de la següent manera:</p> + +<pre class="brush: js">square(5); +</pre> + +<p>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.</p> + +<p>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:</p> + +<pre>console.log(square(5)); +/* ... */ +function square(n){return n*n} +</pre> + +<p>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.</p> + +<div class="note"> +<p>Nota: Això només funciona quan definim la funció fent servir la sintaxis d'adalt (p.ex. <code>function funcName(){}</code>). El codi d'abaix no funcionaria.</p> +</div> + +<pre class="brush: js">console.log(square(5)); +square = function (n) { + return n * n; +} +</pre> + +<p>Els arguments d'una funció no estan limitats a cadenes o nombres. Es pot passar objectes sencers a una funció. La funció <code>show_props</code> (definida a <a href="/en-US/docs/JavaScript/Guide/Working_with_Objects#Objects_and_Properties" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Objects_and_Properties">Treballant amb Objectes</a>) és un exemple d'una funció que pren un objecte com a argument.</p> + +<p>Una funció pot cridar-se a si mateixa. Per exemple, aquí baix trobem una funció que is a function that calcula factorials recursivament:</p> + +<pre class="brush: js">function factorial(n){ + if ((n == 0) || (n == 1)) + return 1; + else + return (n * factorial(n - 1)); +} +</pre> + +<p>D'aquesta manera es podria calcular els factorials de l'ú al cinc de la forma següent:</p> + +<pre class="brush: js">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 +</pre> + +<p>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'<a href="/en-US/docs/JavaScript/Guide/Obsolete_Pages/Predefined_Core_Objects/Function_Object" title="Function Object">objecte funció</a>). Un d'aquests, el mètode <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/apply" title="apply"><code>apply()</code></a>, pot ser usat per aconseguir aquest objectiu.</p> + +<h2 class="deki-transform" id="Àmbit_d'una_funció">Àmbit d'una funció</h2> + +<p>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.</p> + +<pre class="brush: js">// 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" +</pre> + +<h2 id="Scope_and_the_function_stack" name="Scope_and_the_function_stack">Àmbit d'aplicació i la pila de la funció</h2> + +<h3 id="Recursion" name="Recursion">Recursivitat</h3> + +<p>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:</p> + +<ol> + <li>El nom de la funció</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code></li> + <li>Una variable continguda en l'àmbit que refereixi a la funció</li> +</ol> + +<p>Per exemple, la definició de funció següent:</p> + +<pre class="brush: js">var foo = function bar() { + // statements go here +}; +</pre> + +<p>Dins del cos de la funció, els següent són tots equivalents:</p> + +<ol> + <li><code>bar()</code></li> + <li><code>arguments.callee()</code></li> + <li><code>foo()</code></li> +</ol> + +<p>Una funció que es pot cridar a ella mateixa és una<em> funció recursiva</em>. 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:</p> + +<pre class="brush: js">var x = 0; +while (x < 10) { // "x < 10" is the loop condition + // do stuff + x++; +} +</pre> + +<p>Es pot converitr en una funció recursiva i una crida a una funció:</p> + +<pre class="brush: js">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); +</pre> + +<p>Tanmateix, alguns algorismes no poden ser bucles iteratius simples. Per exemple, obtenir tots els nodes de l'estructura d'arbre (e.x. el <a href="/en-US/docs/DOM">DOM</a>) és fa més fàcilment usant la recursió:</p> + +<pre class="brush: js">function walkTree(node) { + if (node == null) // + return; + // do something with node + for (var i = 0; i < node.childNodes.length; i++) { + walkTree(node.childNodes[i]); + } +} +</pre> + +<p>Comparat amb la funció <code>loop</code>, cada crida recursiva que es crida a si mateixa fa varies crides recursives aquí.</p> + +<p>É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.</p> + +<p>El comportament de l'stack es pot veure en el següent exemple:</p> + +<pre class="brush: js">function foo(i) { + if (i < 0) + return; + document.writeln('begin:' + i); + foo(i - 1); + document.writeln('end:' + i); +} +foo(3); +</pre> + +<p>El qual mostra:</p> + +<pre>begin:3 +begin:2 +begin:1 +begin:0 +end:0 +end:1 +end:2 +end:3 +</pre> + +<h3 id="Nested_functions_and_closures" name="Nested_functions_and_closures">Funcions aniuades i <em>closures</em></h3> + +<p>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 <em>closure</em>.</p> + +<dl> + <dd>Un <em>closure</em> és una expressió (normalment una funció) que pot tenir variables lliures juntes amb un àmbit que lliga aquestes variables (que "<em>closes</em>" l'expresió).</dd> +</dl> + +<p>Ja que una funció aniuada és un <em>closure</em>, 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.</p> + +<p>Resumint:</p> + +<ul> + <li>Es pot accedir a la funció de dins només des de sentències que es troben dins la funció de fora.</li> +</ul> + +<ul> + <li>La funció de dins forma un <em>closure</em>: la funció de dins pot usar els arguments i les variables de la funció de fora, mentre que la funció de fora no pot usar els arguments i les variables de la funció de dins.</li> +</ul> + +<p>El següent exemple mostra funcions aniuades:</p> + +<pre class="brush: js">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 +</pre> + +<p>Atès que la funció interior forma un <em>closure</em>, es pot cridar la funció exterior i especificar els arguments per ambdues funcions, l'exterior i l'interior:</p> + +<pre class="brush: js">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 +</pre> + +<h3 id="Efficiency_considerations" name="Efficiency_considerations">Preservació de les variables</h3> + +<p>Vegeu com és preserva <code>x</code> quan es retorna <code>inside</code>. Un <em>closure</em> 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 <em>closure </em>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'<span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">inside.</span></p> + +<p>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. </p> + +<h3 id="Multiply-nested_functions" name="Multiply-nested_functions">Funcions aniuades múltiples</h3> + +<p>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í <em>closures,</em> 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 <em>closures</em> poden contenir múltiples àmbits; contenen recursivament l'àmbit de les funcionsthey recursively contain the scope of the functions containing it. Això s'anomena <em>scope chaining</em>. (El perquè s'anomena "<em>chaining</em>" s'explicarà més tard.)</p> + +<p>Considereu l'exemple següent:</p> + +<pre class="brush: js">function A(x) { + function B(y) { + function C(z) { + alert(x + y + z); + } + C(3); + } + B(2); +} +A(1); // alerts 6 (1 + 2 + 3) +</pre> + +<p>En aquest exemple, <code>C</code> accedeix a <code>y</code> de <code>B</code> i <code>x</code> d'<code>A</code>. Això és possible perquè:</p> + +<ol> + <li><code>B</code> forma un <em>closure</em> incloïent <code>A</code>, és a dir, <code>B</code> pot accedir als arguments i les variables d'<code>A</code>.</li> + <li><code>C</code> forma un <em>closure</em> que inclou <code>B</code>.</li> + <li>Com que el <em>clousure</em> de <code>B</code> inclou <code>A</code>, el <em>closure</em> de <code>C</code> inclou <code>A</code>, <code>C</code> pot accedir tant als arguments i les variables de <code>B</code> com als d'<code>A</code>. En altres paraules, <code>C</code> encadena l'accés als àmbits de <code>B</code> i <code>A</code> en aquest ordre.</li> +</ol> + +<p>El revers, però, no és cert. <code>A</code> no pot accedir a <code>C</code>, perquè <code>A</code> no pot accedir a cap argument o variable de <code>B</code>, de la qual <code>C</code> n'és una variable. D'aquesta forma, <code>C</code> roman privat només a <code>B</code>.</p> + +<h3 id="Name_conflicts" name="Name_conflicts">Conflictes de noms</h3> + +<p>Quan dos arguments o variables de l'àmbit del closure tenen el mateix nom, hi ha un <em>conflicte de nom</em>. 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:</p> + +<pre class="brush: js">function outside() { + var x = 10; + function inside(x) { + return x; + } + return inside; +} +result = outside()(20); // returns 20 instead of 10 +</pre> + +<p>El conflicte de nom ocorre en la sentència <code>return x</code> i es troba entreand is between <code>inside</code>'s parameter <code>x</code> and <code>outside</code>'s variable <code>x</code>. The scope chain here is {<code>inside</code>, <code>outside</code>, global object}. Therefore <code>inside</code>'s <code>x</code> takes precedences over <code>outside</code>'s <code>x</code>, and 20 (<code>inside</code>'s <code>x</code>) is returned instead of 10 (<code>outside</code>'s <code>x</code>).</p> + +<h2 id="Closures">Closures</h2> + +<p>Els<em> closures</em> 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 <em>closure</em> es crea quan la funció interior és d'alguna manera accessible per qualsevol àmbit fora de la funció exterior.</p> + +<pre class="brush: js">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" +</pre> + +<p>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.</p> + +<pre class="brush: js">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 +</pre> + +<p>En els codis d'adalt, la variable <code>name</code> 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.</p> + +<pre class="brush: js">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 +</pre> + +<p>Hi ha, tanmateix, un nombre de trampes o obstacles que vigilar quan es fa servir <em>closures</em>. Si una <em>closure</em><u><em> </em></u>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.</p> + +<pre class="brush: js">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 ??? + } + } +} +</pre> + +<p>La variable màgica <code>this</code> és força delicada en<em> closures</em>. S'ha de saber fer servir acuradament, ja que al que <code>this</code> es refereix depen completament del lloc on la funció es cridada, i no d'on és definida.</p> + +<h2 id="Ús_de_l'objecte_arguments">Ús de l'objecte arguments</h2> + +<p>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:</p> + +<pre class="brush: js">arguments[i] +</pre> + +<p>On <code>i</code> és el nombre ordinal de l'argument, que comença amb zero. Així, el primer argument passat a una funció seria <code>arguments[0]</code>. El nombre total d'arguments és indicat per <code>arguments.length</code>.</p> + +<p>Fent servir l'objecte <code>arguments</code>, 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 <code>arguments.length</code> 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 <code>arguments</code>.</p> + +<p>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:</p> + +<pre class="brush: js">function myConcat(separator) { + var result = "", // initialize list + i; + // iterate through arguments + for (i = 1; i < arguments.length; i++) { + result += arguments[i] + separator; + } + return result; +} +</pre> + +<p>Es pot passar qualsevol nombre d'arguments a aquesta funció, i concatena cada argument dins d'una "llista" de cadenes:</p> + +<pre class="brush: js">// 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"); +</pre> + +<div class="note"> +<p>Nota: la variable <code>arguments</code> és semblant a un array, però no és un array. S'assembla a un array en que té un índex numerat i la propietat <code>length</code>. Tanmateix, no poseeix tots els mètodes de manipulació d'un array.</p> +</div> + +<p>Vegeu l'<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global Objects/Function">objecte</a> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global Objects/Function"><code>Function</code></a> en la referència de JavaScript per més informació.</p> + +<h2 id="Functions_as_event_handlers" name="Functions_as_event_handlers">Funcions com a controladors d'events</h2> + +<p>En JavaScript, els controladors d'events <a href="/en-US/docs/DOM">DOM</a> són funcions (a diferència dels objectes que contenen un mètode <code>handleEvent</code> en altres enllaços de llenguatge DOM). Les funcions passen un objecte d'<a href="/en-US/docs/DOM/event">event</a> 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.</p> + +<p>Alguns probables objectius d'un document <a href="/en-US/docs/Web/HTML">HTML</a> inclouen: <code>window</code> (l'objecte<code> Window</code>, incloent frames), <code>document</code> (l'objecte <code>HTMLDocument</code>), i elements (<code>Element</code> objects). En el <a href="http://www.w3.org/TR/DOM-Level-2-HTML/">HTML DOM</a>, 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. <code>onfocus</code>. Una altra forma de fer, més robusta, d'afegir detectors d'events és ser proveït pel <a href="http://www.w3.org/TR/DOM-Level-2-Events/">nivell 2 d'events DOM</a>.</p> + +<p>Nota: Events formen part del DOM, no de JavaScript. (JavaScript només proveeix un enllaç al DOM.)</p> + +<p>El següent exemple assigna una funció al controlador d'events "focus" d'una finestra.</p> + +<pre class="brush: js">window.onfocus = function() { + document.body.style.backgroundColor = 'white'; +}; +</pre> + +<p>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 <code>setBGColor</code>.</p> + +<pre class="brush: js">var setBGColor = new Function("document.body.style.backgroundColor = 'white';"); +</pre> + +<p>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:</p> + +<ol> + <li>scripting amb propietats d'event DOM HTML + <pre class="brush: js">document.form1.colorButton.onclick = setBGColor; +</pre> + </li> + <li>Atribut event HTML + <pre class="brush: html"><input name="colorButton" type="button" + value="Change background color" + onclick="setBGColor();"/> +</pre> + + <p>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 "<code>setBGColor()</code>" són necessaris aquí (en lloc de només "<code>setBGColor</code>"). És equivalent a:</p> + + <pre class="brush: js">document.form1.colorButton.onclick = function onclick(event) { + setBGColor(); +}; +</pre> + + <p>Vegeu com l'objecte event object es passa a aquesta funció com a paràmetre <code>event</code>. Això permet al codi específic utilitzar l'objecte Event:</p> + + <pre class="brush: html"><input ... + onclick="alert(event.target.tagName);"/> +</pre> + </li> +</ol> + +<p>Com qualsevol altra propietat que fa referència a una funció, el controlador d'event pot comportat-se com un mètode, i <code>this</code> faria referència a l'element que conté el controlador d'event. En l'exemple següent, la funció que fa referència <code>onfocus</code> es crida amb <code>this</code> que equival a <code>window</code>.</p> + +<pre class="brush: js">window.onfocus(); +</pre> + +<p>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<em> returned from calling the event handler</em>, que sovint és <code>undefined</code> (si la funció no retorna res), rather than the event handler itself:</p> + +<pre class="brush: js">document.form1.button1.onclick = setBGColor(); +</pre> + +<p>Per passar paràmetres a un controlador d'event, el controlador ha d'estar embolcallat dins d'una altra funció com la següent:</p> + +<pre class="brush: js">document.form1.button1.onclick = function() { + setBGColor('some value'); +}; +</pre> + +<h2 id="Funcions_predefinides">Funcions predefinides</h2> + +<p>JavaScript té diverses funcions predefinides que poden emprar-se des de qualsevol àmbit:</p> + +<ul> + <li>{{ web.link("#eval_function", "eval") }}</li> + <li>{{ web.link("#isFinite_function", "isFinite") }}</li> + <li>{{ web.link("#isNaN_function", "isNaN") }}</li> + <li>{{ web.link("#parseInt_and_parseFloat_functions", "parseInt and parseFloat") }}</li> + <li>{{ web.link("#Number_and_String_functions", "Number and String") }}</li> + <li>{{ web.link("#escape_and_unescape_functions", "encodeURI, decodeURI, encodeURIComponent, and decodeURIComponent") }} (all available with Javascript 1.5 and later).</li> +</ul> + +<p>Les seccions següents introdueixen aquestes funcions. Vegeu el <a href="/en-US/docs/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript Reference</a> per informació detallada de totes aquestes funcions.</p> + +<h3 id="Funció_eval">Funció eval</h3> + +<p>La funció <code>eval</code>avalua una cadena del codi de JavaScript sense fer referència a cap objecte en particular. La sintaxi de <code>eval</code> és:</p> + +<pre class="brush: js">eval(expr); +</pre> + +<p>on <code>expr</code> és una cadena per ser avaluada.</p> + +<p>Si la cadena representa una expressió, <code>eval</code> 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'<code>eval</code> és idèntic a l'àmbit del codi de crida. No s'ha de cridar <code>eval</code> per avaluar una expressió aritmèica; JavaScript aritmètiques automàticament.</p> + +<h3 id="Funció_isFinite">Funció isFinite</h3> + +<p>La funció <code>isFinite</code> avalua un argument per determinar si és un nombre finit. La sintaxi d' <code>isFinite</code> és:</p> + +<pre class="brush: js">isFinite(number); +</pre> + +<p>on <code>number</code> és el nombre que s'ha d'avaluar.</p> + +<p>Si l'argument és <code>NaN </code>(no un nombre), infinit positiu o infinit negatiu, aquest mètode retorna <code>false</code>, sinó retornarà <code>true</code>.</p> + +<p>El codi següent comprova si ClientInput per determinar si és un nombre finit.</p> + +<pre class="brush: js">if(isFinite(ClientInput)){ + /* take specific steps */ +} +</pre> + +<h3 id="Funció_isNaN">Funció isNaN</h3> + +<p>La funció <code>isNaN</code> avalua un argument que determina si és "NaN." La sintaxi d'<code>isNaN</code> és:</p> + +<pre class="brush: js">isNaN(testValue); +</pre> + +<p>On <code>testValue</code> és el valor que es vol avaluar.</p> + +<p>Les funcions <code>parseFloat</code> i <code>parseInt</code> retornen "NaN" quan avaluen un valor que no és un nombre. <code>isNaN</code> retorna true si passa "NaN," i false sinó ho fa.</p> + +<p>El codi següent avalua <code>floatValue</code> que determina si és un nombre i després crida un procediment de la manera adequada:</p> + +<pre class="brush: js">var floatValue = parseFloat(toFloat); + +if (isNaN(floatValue)) { + notFloat(); +} else { + isFloat(); +} +</pre> + +<h3 id="Funcions_parseInt_i_parseFloat">Funcions parseInt i parseFloat</h3> + +<p>Les dos funcions "parse", <code>parseInt</code> i <code>parseFloat</code>, retornen un valor numèric quan es dóna com a argument una cadena.</p> + +<p>La sintaxi de <code>parseFloat</code> és:</p> + +<pre class="brush: js">parseFloat(str); +</pre> + +<p>On <code>parseFloat</code> parses el seu argument,la cadena <code>str</code>, 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).</p> + +<p>La sintaxi de <code>parseInt</code> és:</p> + +<pre class="brush: js">parseInt(str [, radix]); +</pre> + +<p><code>parseInt</code> interpreta el seu primer argument, la cadena de caràcters <code>str</code>, i intenta retornar un nombre sencer de la base especificada pel paràmetre opcional <code>radix</code>. Per exemple, si <code>radix</code> é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.</p> + +<p>Si <code>parseInt</code> 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ó <code>parseInt</code> trunca la cadena de caràcters a valors sencers.</p> + +<h3 id="Funcions_Number_i_String">Funcions Number i String</h3> + +<p>Les funcions <code>Number</code> i <code>String</code> permeten convertir un objecte a un nombre o a una cadena. La sintaxi d'aquestes funcions és:</p> + +<pre class="brush: js">var objRef; +objRef = Number(objRef); +objRef = String(objRef); +</pre> + +<p>On <code>objRef</code> és una referència a l'objecte. Number fa servir el valorOf() method of the object; String uses the toString() method of the object.</p> + +<p>L'exemple següent converteix l'objecte <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date" title="en-US/docs/JavaScript/Reference/Global Objects/Date">Date</a></code> a una cadena de caràcters fàcilment interpretrable per humans.</p> + +<pre class="brush: js">var D = new Date(430054663215), + x; +x = String(D); // x equals "Thu Aug 18 04:37:43 GMT-0700 (Pacific Daylight Time) 1983" +</pre> + +<p>L'exemple següent converteix l'objecte <code><a class="internal" href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="en-US/docs/JavaScript/Reference/Global Objects/String">String</a></code> a l'objecte <code><a class="internal" href="/en-US/docs/JavaScript/Reference/Global_Objects/Number" title="en-US/docs/JavaScript/Reference/Global Objects/Number">Number</a></code>.</p> + +<pre class="brush: js">var str = "12", + num; +num = Number(str); +</pre> + +<p>Es pot comprovar utilitzant el mètode del DOM <code>write()</code> i l'operador de JavaScript <code>typeof</code>.</p> + +<pre class="brush: js">var str = "12", + num; +document.write(typeof str); +document.write("<br/>"); +num = Number(str); +document.write(typeof num); +</pre> + +<h3 id="Funcions_escape_i_unescape_(Obsoletes_a_partir_de_JavaScript_1.5)">Funcions escape i unescape (Obsoletes a partir de JavaScript 1.5)</h3> + +<p>Les funcions <code>escape</code> i <code>unescape</code> 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 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/encodeURI" title="en-US/docs/JavaScript/Reference/Global_Functions/encodeURI">encodeURI</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/decodeURI" title="en-US/docs/JavaScript/Reference/Global_Functions/decodeURI">decodeURI</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/encodeURIComponent" title="en-US/docs/JavaScript/Reference/Global_Functions/encodeURIComponent">encodeURIComponent</a></code>, i <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/decodeURIComponent" title="en-US/docs/JavaScript/Reference/Global_Functions/decodeURIComponent">decodeURIComponent</a></code>.</p> + +<p>Les funcions <code>escape</code> i <code>unescape</code> permeten codificar i descodificar cadenes. La funció <code>escape</code> retorna function returns the hexadecimal encoding of an argument in the ISO Latin character set. The <code>unescape</code> function returns the ASCII string for the specified hexadecimal encoding value.</p> + +<p>La sintaxi d'aquestes funcions és:</p> + +<pre class="brush: js">escape(string); +unescape(string); +</pre> + +<p>Aquestes funcions s'usen principalment amb JavaScript que s'executa al servidor per codificar i descodificar parells de clau/valor en URLs.</p> 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 +--- +<div>{{jsSidebar("JavaScript Guide")}}</div> + +<p class="summary">La Guia de JavaScript mostra com utilitzar <a href="/ca/docs/Web/JavaScript">JavaScript</a> 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'<a href="/ca/Learn">zona d'aprenentatge</a>. Per a informació exhaustiva sobre qualsevol característica del llenguatge podeu consultar la<a href="/ca/docs/Web/JavaScript/Referencia"> referència de JavaScript</a>.</p> + +<h2 id="Capítols">Capítols</h2> + +<p>Aquesta guia es divideix en diversos capítols:</p> + +<ul class="card-grid"> + <li><span><a href="/ca/docs/Web/JavaScript/Guide/Introducció">Introducció</a></span> + + <p><a href="/ca/docs/Web/JavaScript/Guide/Introducció#Where_to_find_JavaScript_information">Quant a aquesta guia</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Introducció#What_is_JavaScript.3F">Quant a JavaScript</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Introducció#JavaScript_and_Java">JavaScript i Java</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Introducció#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Introducció#Getting_started_with_JavaScript">Eines</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Introducció#Hello_world">Hola Món</a></p> + </li> + <li><span><a href="/ca/docs/Web/JavaScript/Guide/Grammar_and_types">Gramàtica i tipus</a></span> + <p><a href="/ca/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">Sintaxi bàsica i comentaris</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Declaracions</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Àmbit de variables</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">Hoisting de variables</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">Estructures de dades i tipus</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">Literals</a></p> + </li> + <li><span><a href="/ca/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Control de fluxe i manegament d'errors</a></span> + <p><code><a href="/ca/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br> + <code><a href="/ca/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br> + <a href="/ca/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Objecte Error</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Promises">Objecte Promise</a></p> + </li> + <li><span><a href="/ca/docs/Web/JavaScript/Guide/Loops_and_iteration">Bucles i iteració</a></span> + <p><code><a href="/ca/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/ca/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/ca/docs/Web/JavaScript/Guide/Functions">Funcions</a></span> + + <p><a href="/ca/docs/Web/JavaScript/Guide/Functions#Defining_functions">Definir funcions</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Functions#Calling_functions">Cridar funcions</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Functions#Function_scope">Àmbit de funcions</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Functions#Closures">Closures</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Arguments</a> i <a href="/ca/docs/Web/JavaScript/Guide/Functions#Function_parameters">paràmeters</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Functions fletxa</a></p> + </li> + <li><span><a href="/ca/docs/Web/JavaScript/Guide/Expressions_i_Operadors">Expressions i Operadors</a></span> + <p><a href="/ca/docs/Web/JavaScript/Guide/Expressions_i_Operadors#Assignment_operators">Assignaments</a> i <a href="/ca/docs/Web/JavaScript/Guide/Expressions_i_Operadors#Comparison_operators">Comparacions</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Expressions_i_Operadors#Arithmetic_operators">Operadors aritmètics</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Expressions_i_Operadors#Bitwise_operators">Operadors de bits</a> i <a href="/ca/docs/Web/JavaScript/Guide/Expressions_i_Operadors#Logical_operators">operadors lògics</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Expressions_i_Operadors#Conditional_(ternary)_operator">Operador condicional (ternari)</a></p> + </li> + <li><span><a href="/ca/docs/Web/JavaScript/Guide/Numbers_and_dates">Nombres i dates</a></span> + <p><a href="/ca/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers">Literals de nombres</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object">Objecte <code>Number</code></a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object">Objecte <code>Math</code></a><br> + <a href="https://developer.mozilla.org/ca/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object">Objecte <code>Date</code></a></p> + </li> + <li><span><a href="/ca/docs/Web/JavaScript/Guide/Text_formatting">Formateig de text</a></span> + <p><a href="/ca/docs/Web/JavaScript/Guide/Text_formatting#String_literals">Literals String</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Text_formatting#String_objects"><code>String</code> object</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_strings">Strings plantilla</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Internacionalització</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Regular_Expressions">Expressions regulars</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/ca/docs/Web/JavaScript/Guide/Indexed_collections">Col·leccions indexades</a></span> + + <p><a href="/ca/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Arrays</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Indexed_collections#Array_comprehensions">Comprensions per a Arrays</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Arrays amb tipus</a></p> + </li> + <li><span><a href="/ca/docs/Web/JavaScript/Guide/Keyed_collections">Col·leccions clau-valor</a></span> + <p><code><a href="/ca/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br> + <code><a href="/ca/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br> + <code><a href="/ca/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br> + <code><a href="/ca/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p> + </li> + <li><span><a href="/ca/docs/Web/JavaScript/Guide/Treballar_amb_Objectes">Treballar amb Objectes</a></span> + <p><a href="/ca/docs/Web/JavaScript/Guide/Treballar_amb_Objectes#Objects_and_properties">Objectes i propietats</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Treballar_amb_Objectes#Creating_new_objects">Crear objectes</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Treballar_amb_Objectes#Defining_methods">Definir mètodes</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Treballar_amb_Objectes#Defining_getters_and_setters">Getters i setters</a></p> + </li> + <li><span><a href="/ca/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Detalls del model d'objectes</a></span> + <p><a href="/ca/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">Programació Orientada a Objectes basada en Prototipus</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">Crear jerarquies d'objectes</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">Herència</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/ca/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iteradors i generadors</a></span> + + <p><a href="/ca/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Iteradors</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Iterables</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Generdors</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generator_comprehensions">Comprensions per a Generadors</a></p> + </li> + <li><span><a href="/ca/docs/Web/JavaScript/Guide/Meta_programming">Meta programació</a></span> + <p><code><a href="/ca/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br> + <a href="/ca/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Manegadors i trampes</a><br> + <a href="/ca/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Proxy Revocable</a><br> + <code><a href="/ca/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p> + </li> +</ul> + +<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> diff --git a/files/ca/web/javascript/guide/introducció/index.html b/files/ca/web/javascript/guide/introducció/index.html new file mode 100644 index 0000000000..1b598dad9b --- /dev/null +++ b/files/ca/web/javascript/guide/introducció/index.html @@ -0,0 +1,140 @@ +--- +title: Introducció +slug: Web/JavaScript/Guide/Introducció +translation_of: Web/JavaScript/Guide/Introduction +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div> + +<div class="summary"> +<p>Aquest capítol presenta JavaScript i comenta alguns dels seus conceptes fonamentals.</p> +</div> + +<h2 id="Coneixements_previs">Coneixements previs</h2> + +<p>Aquesta guia asumeix que el lector te els següents coneixements previs:</p> + +<ul> + <li>Una idea general de Internet i la World Wide Web ({{Glossary("WWW")}}).</li> + <li>Bon coneixement de l'HyperText Markup Language ({{Glossary("HTML")}}).</li> + <li>Alguns coneixements de programació. Si sou nous quant a la programació proveu qualsevol dels tutorials que trobareu a la pàgina principal sobre <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/">JavaScript</a>.</li> +</ul> + +<h2 id="On_trobar_informació_sobre_JavaScript">On trobar informació sobre JavaScript</h2> + +<p>La documentació de JavaScript al MDN inclou els següents apartats:</p> + +<ul> + <li><a href="/en-US/Learn">Aprenent la Web</a> proporciona informació per a nouvinguts i introdueix conceptes bàsics de programació i Internet.</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">La guia de JavaScript</a> (aquesta guia) proporciona un resum del llenguatge JavaScript així com els seus objectes.</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference" title="en/JavaScript/Reference">La referència de JavaScript</a> proporciona material de referència detallat per a JavaScript.</li> +</ul> + +<p>Si vostè és nou al món de JavaScript es recomana començar amb els articles que es poden trobar a l'<a href="/en-US/Learn">àrea d'aprenentatge</a> i la <a href="/en-US/docs/Web/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">Guia de JavaScript</a>. Un cop assolits els conceptes fonamentals podeu obtindre més detalls sobre objectes individuals i sentències mitjançant la <a href="/en-US/docs/Web/JavaScript/Reference" title="en/JavaScript/Reference">Referència de JavaScript</a>.</p> + +<h2 id="Què_és_JavaScript">Què és JavaScript?</h2> + +<p>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.</p> + +<p>JavaScript conté una llibreria estàndard d'objectes, com <code>Array</code>, <code>Date</code> i <code>Math</code>, 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:</p> + +<ul> + <li><em>JavaScript al cantó del client</em> estén el llenguatge bàsic tot proveint objectes per a controlar un navegador i el seu Document Object Model (DOM). Per exemple, les extensions del cantó del client permeten a una aplicació posar elements en un formulari HTML i respondre a esdeveniments (events) d'usuari com ara clics del ratolí, entrada de formularis o navegació per la pàgina.</li> + <li><em>JavaScript al cantó del servidor</em> estén el llenguatge bàsic tot proveint objectes rellevants a córrer JavaScript en un servidor. Per exemple, les extensions del cantó del servidor permeten a una aplicació comunicar-se amb una base de dades, proveir continuitat d'informació d'una instància a una altra de l'aplicació, o bé realitzar manipulacions de fitxers al servidor.</li> +</ul> + +<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript i Java</h2> + +<p>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.</p> + +<p>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.</p> + +<p>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.</p> + +<p>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.</p> + +<p>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.</p> + +<table class="standard-table"> + <caption>JavaScript en comparació a Java</caption> + <thead> + <tr> + <th scope="col">JavaScript</th> + <th scope="col">Java</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <p>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.</p> + </td> + <td> + <p>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.</p> + </td> + </tr> + <tr> + <td>El tipus de dades de les variables no es declaren (tipatge dinàmic).</td> + <td>El tipus de dades de les variables s'ha de declarar (tipatge estàtic).</td> + </tr> + <tr> + <td>No pot escriure a disc de forma automàtica.</td> + <td>No pot escriure a disc de forma automàtica.</td> + </tr> + </tbody> +</table> + +<p>Per a més informació sobre les diferències entre JavaScript i Java vegeu el capítol <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model" title="JavaScript/Guide/Details of the Object Model">Detalls del model d'objecte</a>.</p> + +<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript i l'especificació ECMAScript</h2> + +<p>L'estandardització de JavaScript es realitza a <a class="external" href="http://www.ecma-international.org/">Ecma International</a> — 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 <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">Nou a JavaScript</a> per a aprendre sobre les diferents versions de JavaScript així com les diferents edicions de l'especificació d'ECMAScript.</p> + +<p>A més, l'estàndard ECMA-262 també està aprovat per l'<a class="external" href="http://www.iso.ch/">ISO</a> (International Organization of Standarization) com a ISO-16262. Podeu trobar l'especificació al <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">lloc web d'Ecma International</a>. L'especificació de l'ECMAScript no descriu el Model d'Objecte Document (DOM), el qual està estandaritzat pel <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a>. 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: <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">resum de tecnologies de JavaScript</a>.</p> + +<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">La documentació de JavaScript versus l'especificació de l'ECMAScript</h3> + +<p>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).</p> + +<p>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.</p> + +<p>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.</p> + +<p>La documentació de JavaScript descriu aspectes del llenguatge que són apropiats per al programador de JavaScript.</p> + +<h2 id="Iniciant-se_en_JavaScript">Iniciant-se en JavaScript</h2> + +<p>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.</p> + +<p>Hi ha dues eines que formen part de Firefox que són útils per a experimentar amb JavaScript: la Consola del Web i Scratchpad.</p> + +<h3 id="La_Consola_del_Web">La Consola del Web</h3> + +<p>La <a href="/en-US/docs/Tools/Web_Console">Consola del Web</a> mostra informació sobre la pàgina Web carregada actualment i també inclou una <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter">línia d'ordres</a> que podeu utilitzar per a executar expressions JavaScript a la pàgina actual.</p> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Scratchpad">Scratchpad</h3> + +<p>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 <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a> és una eina més adient.</p> + +<p>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.</p> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7365/scratchpad.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Hola_món">Hola món</h3> + +<p>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.</p> + +<pre class="brush: js notranslate">function saluda(user) { + return "Hola " + user; +} + +saluda("Alice"); // "Hola Alice" +</pre> + +<p>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.</p> + +<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p> |