diff options
Diffstat (limited to 'files/ca/web/javascript/guide/functions/index.html')
| -rw-r--r-- | files/ca/web/javascript/guide/functions/index.html | 697 |
1 files changed, 697 insertions, 0 deletions
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> |