This translation is incomplete. Please help translate this article from English.

JavaScript és un llenguatge de programació que afegeix interactivitat al vostre lloc web (per exemple: jocs, respostes quan es premen els botons o les dades introduïdes en formularis, estil dinàmic, animació). Aquest article us ajudarà a començar amb aquest llenguatge emocionant i us donarà una idea del que és possible.

Què és JavaScript, realment?

JavaScript ("JS" abreujat) és un veritable llenguatge dinàmic de programació en tota regla, que quan s'aplica a un document HTML, pot proporcionar interactivitat dinàmica en els llocs web. Va ser inventat per Brendan Eich, cofundador del projecte Mozilla, la Fundació Mozilla i Mozilla Corporation.

Javascript és increïblement versàtil. Podeu començar a poc a poc, amb carrusels, galeries d'imatges, dissenys fluctuants i les respostes a les pulsacions de botó. Amb més experiència sereu capaços de crear jocs,  gràfics animats en 2D i 3D, aplicacions completes de bases de dades i molt més!

JavaScript per si mateix és bastant compacte però molt flexible. Els desenvolupadors han escrit una gran varietat d'eines que complementen el nucli del llenguatge JavaScript, el desbloqueig d'una gran quantitat de funcionalitats extra amb el mínim esforç. Aquestes inclouen:

  • Interfícies de programació d'aplicacions (APIs) en els navegadors web, proporcionant funcionalitats com la creació dinàmica HTML i l'establiment d'estils CSS, recol·lecció i manipulació d'una seqüència de vídeo des de la càmera web de l'usuari, o la generació de gràfics 3D i mostres d'àudio.
  • APIs de tercers per permetre als desenvolupadors incorporar funcionalitat en els seus llocs d'altres proveïdors de contingut, com Twitter o Facebook.
  • Marcs de tercers i biblioteques que podreu aplicar al vostre HTML els quals us permetrà construir ràpidament llocs i aplicacions.

Un exemple "hola món"

La secció anterior pot sonar molt emocionant, i així ha de ser - i Javascript és una de les tecnologies web més vives i quan comenceu a ser bons en el seu ús, els vostres llocs web entraran en una nova dimensió de poder i creativitat.

No obstant això, Javascript és una mica més complex per sentir-se còmodes que amb HTML i CSS. Podria ser necessari començar a poc a poc i seguir treballant en petits passos consistents. Per començar, us mostrarem com afegir una mica de Javascript bàsic a la vostre pàgina, creant un "Hello world!" d'exemple (l'estandard en els exemples bàsics de programació).

Important: Si no ho heu estat seguint juntament amb la resta del nostre curs,  descarregueu el codi exemple i utilitzar-ho com a punt de partida.

  1. En primer lloc, aneu al vostre lloc de prova i creeu una nova carpeta amb el nom 'scripts' (sense les cometes). Després, en la nova carpeta scripts que acabeu de crear, creeu un nou arxiu anomenat main.js. Guardeu-ho en la carpeta scripts.
  2. A continuació, en l'arxiu index.html introduir l'element següent en una nova línia just abans de l'etiqueta de tancament </body>:
    <script src="scripts/main.js"></script>
  3. La seva funció fa bàsicament la mateixa feina que l'element <link> per CSS - s'aplica el codi JavaScript a la pàgina, de manera que pot tenir un efecte sobre el codi HTML (juntament amb el CSS, i qualsevol altra cosa en la pàgina).
  4. Ara afegiu el codi següent a l'arxiu main.js:

    var myHeading = document.querySelector('h1');
    myHeading.textContent = 'Hello world!';
  5. Finalment, assegureu-vos que els fitxers HTML i JavaScript es guarden i index.html es carrega en el navegador. Haurieu de veure alguna cosa com el següent:

Nota: La raó per la qual hem posat l'element <script> prop de la part inferior de l'arxiu HTML és que l'HTML és carregat pel navegador en l'ordre en què apareix en l'arxiu. Si el Javascript es carrega primer i se suposa que afecta a l'HTML sota ell, pot ser que no funcioni, ja que el Javascript es carregaria abans de l'HTML que se suposa que funciona. Per tant, col·locar Javascript prop de la part inferior de la pàgina HTML és sovint la millor estratègia.

Què va passar?

Al text de la capçalera ara s'ha canviat a "Hola, món!" amb l'ús de JavaScript. Això s'ha fet utilitzant primer una funció denominada querySelector() per obtenir una referència al vostre encapçalament, i emmagatzemar-ho en una variable denominada myHeading. Això és molt similar al que vam fer amb l'ús de selectors CSS. Quan es vol fer alguna cosa en un element, primer heu de seleccionar-lo.

Després d'això, s'estableix el valor de la variable myHeading amb la propietat textContent (que representa el contingut del encapçalament) a "Hola, món!".

Curs intensiu bàsic del llenguatge

Anem a explicar algunes de les característiques bàsiques del llenguatge JavaScript, per donar-vos una major comprensió de com funciona tot. Millor encara, aquestes característiques són comunes a tots els llenguatges de programació. Si domineu aquests fonaments, esteu en el camí de ser capaços de programar gairebé qualsevol cosa!

Important:En aquest article, intenteu introduir les línies de codi d'exemple en la vostra consola de Javascript per veure què succeeix. Per a més detalls sobre les consoles de JavaScript, consulteu Descobrir eines per a desenvolupadotrs del navegador.

Variables

Variables són contenidors en els quals es poden emmagatzemar valors. Es comença per declarar una variable amb la paraula clau var, seguit pel nom que voleu nomenar:

var myVariable;

Nota: Totes les sentències en JavaScript han d'acabar amb un punt i coma, per indicar que aquí és on acaba la sentència. Si no incloeu aquests, es poden obtenir resultats inesperats.

Nota: Podeu nomenar una variable gairebé qualsevol cosa, però hi ha algunes restriccions de nom (vegeu aquest article sobre les regles de denominació de les variables). Si no esteu segur, podeu comprovar el nom de la variable per veure si és vàlida.

Nota: JavaScript és sensible a majúscules - myVariable és una variable diferent a myvariable. Si si esteu tenint problemes en el vostre codi, comprobeu el cos!

Després de declarar una variable, podeu donar-li un valor:

myVariable = 'Bob';

Podeu fer les dues operacions en la mateixa línia si ho desitjeu:

var myVariable = 'Bob';

Podeu recuperar el valor amb només cridar la variable pel seu nom:

myVariable;

Després de donar a una variable un valor, posteriorment podeu optar per canviar-ho:

var myVariable = 'Bob';
myVariable = 'Steve';

Recordeu que les variables tenen diferents tipus de dades:

Variable Explicació Exemple
String Una seqüència de text coneguda com una cadena. Per indicar que la variable és una cadena, heu de tancar-la entre cometes. var myVariable = 'Bob';
Number Un nombre. Els nombres no tenen cometes al voltant d'ells. var myVariable = 10;
Boolean Un valor True/False. Les paraules true i false són paraules clau especials en JS, i no necessiten cometes. var myVariable = true;
Array Una estructura que permet emmagatzemar diversos valors en una sola referència. var myVariable = [1,'Bob','Steve',10];
Referir-se a cada membre de la matriu d'aquesta manera:
myVariable[0], myVariable[1], etc.
Object Bàsicament, qualsevol cosa. Tot en JavaScript és un objecte, i pot ser emmagatzemat en una variable. Tingueu això en compte a mesura que apreneu. var myVariable = document.querySelector('h1');
Tots els exemples anteriors també

Llavors, per què necessitem les variables? Bé, es necessiten les variables per fer alguna cosa interessant en la programació. Si els valors no poden canviar, llavors no es pot fer res dinàmic, com personalitzar un missatge de salutació o canviar la imatge mostrada en una galeria d'imatges.

Comentaris

Podeu posar comentaris en el codi JavaScript, de la mateixa manera que en el CSS:

/*
Everything in between is a comment.
*/

Si el vostre comentari no conté salts de línia, sovint és més fàcil de posar-ho darrere de dues barres d'aquest tipus:

// This is a comment

Operadors

Un operator és un símbol matemàtic que produeix un resultat basat en dos valors (o variables). A la següent taula es pot veure alguns dels operadors més simples, juntament amb alguns exemples per provar-ho a la consola de JavaScript.

Operador Explicació Símbol(s) Exemple
suma/concatenació S'utilitza per sumar dos nombres, o enganxar dues cadenes juntes. + 6 + 9;
"Hello " + "world!";
resta, multiplicació, divisió Aquests fan el que s'espera que ho facin en les matemàtiques bàsiques. -, *, / 9 - 3;
8 * 2; // multiplicar en JS és un
asterisc
9 / 3;
operador d'assignació Heu vist això ja: s'assigna un valor a una variable. = var myVariable = 'Bob';
operador d'identitat Fa una prova per veure si dos valors són iguals entre si, i retorna un resultat true/false (booleà). === var myVariable = 3;
myVariable === 4;
No, No igual Retorna el valor lògic contrari del que precedeix; converteix un true en un false, etc. Quan s'utilitza juntament amb l'operador d'igualtat, el operador de negació comprova si dos valors són no iguals. !, !==

L'expressió bàsica és true, però la comparació retorna false, perquè l'hem negat:

var myVariable = 3;
!(myVariable === 3);

Aquí estem provant "és myVariable NO és igual a 3". Això retorna false, perquè myVariable ÉS igual a 3.

var myVariable = 3;
myVariable !== 3;

Hi ha molts més operadors per explorar, però això és suficient per ara. Veure Expressions i operadors per obtenir una llista completa.

Nota: La barreja de tipus de dades pot donar lloc a alguns resultats estranys al realitzar càlculs, així que aneu amb compte quan us referiu a les variables correctament, i obtenir els resultats que espereu. Per exemple, introduïu "35" + "25" a la consola. Per què no s'obté el resultat que esperavau? A causa de que les cometes converteixen els nombres en cadenes, pel que acabat en concatenació de cadenes en lloc d'afegir nombres. Si introduiu, 35 + 25 Obtindreu el resultat correcte.

Condicionals

Els condicionals són estructures de codi que permeten posar a prova si una expressió retorna veritable o no, s'executa codi alternatiu revelat pel seu resultat. La forma més comuna de condicional és nomenada if ... else. Així, per exemple:

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

L'expressió dins del if ( ... ) és la prova - s'utilitza l'operador d'identitat (com es va descriure anteriorment) per comparar la variable iceCream amb la cadena chocolate per veure si els dos són iguals. Si aquesta comparació retorna true, s'executa el primer bloc de codi. Si la comparació no és certa, el primer bloc s'omet i el segon bloc de codi, després de la  instrucció else, s'executa al seu lloc.

Funcions

Functions són una forma d'empaquetar la funcionalitat que desitjeu reutilitzar. Quan es necessita el procediment es pot cridar a una funció, amb el nom de la funció, en lloc de tornar a reescriure tot el codi cada vegada. Ja heu vist alguns usos de les funcions anteriorment, per exemple:

  1. var myVariable = document.querySelector('h1');
  2. alert('hello!');

Aquestes funcions, document.querySelector i alert, estan integrades en el navegador per poder utilitzar-les sempre que ho desitgeu.

Si veieu alguna cosa que s'assembla a un nom de variable, però té claudàtors - () - després d'ell, és probable que sigui una funció. Les funcions sovint prenen arguments - bits de dades que necessiten per treballar. Aquests van dins dels claudàtors, separats per comes si n'hi ha més d'un argument.

Per exemple, la funció alert() realitza una finestra emergent que apareix dins de la finestra del navegador, però cal donar-li una cadena com a argument per dir-li a la funció que ha d'escriure en el quadre emergent.

La bona notícia és que podeu definir les vostras pròpies funcions - en el següent exemple escrivim una funció simple que pren dos nombres com a arguments i els multiplica:

function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}

Proveu a executar la funció anterior a la consola, i després provar amb diversos arguments. Per exemple:

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

Nota: La instrucció return indica al navegador que retorni la variable result de la funció perquè estigui disponible per al seu ús. Això és necessari perquè les variables definides dins de funcions només estan disponibles dins d'aquestes funcions. Això es diu àmbit de la variable. (Llegiu mès sobre l'àmbit de les variables.)

Esdeveniments

La interactivitat real en un lloc web necessita esdeveniments. Es tracta d'estructures de codi que escolten les coses que succeeixen al navegador, executant el codi en resposta. L'exemple més obvi és l'esdeveniment de clic, que es dispara pel navegador quan es fa clic en alguna cosa amb el ratolí. Per demostrar això, escriviu el següent a la consola, a continuació feu clic a la pàgina web actual:

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

Hi ha moltes formes d'adjuntar un esdeveniment a un element. Aquí seleccionem l'element HTML, establint la seva propietat onclick igual a una funció anònima (és a dir, sense nom), que conté el codi que volem que l'esdeveniment clic executi.

Tingues en compte que

document.querySelector('html').onclick = function() {};

és equivalent a

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

És només més curt.

Alimentant nostra pàgina web d'exemple

Ara hem repassat alguns conceptes bàsics de Javascript, afegirem algunes característiques interessants per al nostre lloc d'exemple, per veure el que és possible.

Afegir un canviador d'imatge

En aquesta secció, afegirem una imatge addicional al nostre lloc, afegint una mica de JavaScript per canviar entre les dues quan es fa clic a la imatge.

  1. En primer lloc, busqueu una altra imatge que volgueu oferir al vostre lloc. Assegureu-vos que és de la mateixa mida que la primera imatge, o el més a prop possible.
  2. Guardeu aquesta imatge a la carpeta images.
  3. Canvieu el nom d'aquesta imatge 'firefox2.png' (sense cometes).
  4. Aneu a l'arxiu main.js i entrar el següent JavaScript. (Si el vostre "hola món" JavaScript està encara allà, esborrar-ho.)
    var myImage = document.querySelector('img');
    
    myImage.onclick = function() {
        var mySrc = myImage.getAttribute('src');
        if(mySrc === 'images/firefox-icon.png') {
          myImage.setAttribute ('src','images/firefox2.png');
        } else {
          myImage.setAttribute ('src','images/firefox-icon.png');
        }
    }
  5. Deseu tots els arxius i index.html, carregar-ho en el navegador. Ara en fer clic a la imatge, s'ha de canviar per l'altra!

S'emmagatzema una referència al vostre element d'imatge en la variable myImage. A continuació, converteix la propietat onclick del controlador d'esdeveniments d'aquesta variable igual a una funció sense nom (una funció "anònima"). Ara, cada vegada que es fa clic en aquest element d'imatge:

  1. Recupera el valor de l'atribut src de la imatge src.
  2. Utilitzar un condicional per comprovar si el valor src és igual a la ruta a la imatge original:
    1. Si és així, canvia el valor de src a la ruta d'accés de la 2ª imatge, obligant a l'altra imatge a ser carregada dins de l'element <image>.
    2. Si no ho és (el que significa que ja ha d'haver canviat), el valor src canvia de nou a la ruta original de la imatge, a l'estat original..

Afegir un missatge de benvinguda personalitzat

A continuació afegirem una altre mica de codi, canviant el títol de la pàgina a un missatge de benvinguda personalitzat, quan l'usuari navegui per primera vegada al lloc. Aquest missatge de benvinguda persistirà, l'usuari ha d'abandonar el lloc i tornar més tard. També inclourem una opció per canviar l'usuari i, per tant, el missatge de benvinguda en qualsevol moment que es requereixi.

  1. En index.html, afegiu la següent línia just abans de l'element <script>:
    <button>Change user</button>
  2. En main.js, poseu el següent codi a la part inferior de l'arxiu, exactament com està escrit - això pren referències al nou botó i l'encapçalat, emmagatzemant-los en les variables:
    var myButton = document.querySelector('button');
    var myHeading = document.querySelector('h1');
  3. Ara afegiu la següent funció per establir la salutació personalitzada - això no farà res, però ho arreglarem en un moment:
    function setUserName() {
      var myName = prompt('Please enter your name.');
      localStorage.setItem('name', myName);
      myHeading.textContent = 'Mozilla is cool, ' + myName;
    }
    Aquesta funció conté una funció prompt(), obre un quadre de diàleg, una mica com alert(). No obstant això, aquest prompt() li demana a l'usuari que introdueixi algunes dades, emmagatzemant-les en una variable després que l'usuari pressioni OK. En aquest cas, estem demanant a l'usuari que introdueixi el seu nom. A continuació, fem una crida a una API anomenada localStorage, que ens permet emmagatzemar les dades en el navegador i posteriorment recuperar-les. Utilitzem la funció setItem() de localStorage per crear i emmagatzemar un element de dades anomenat "name", establint el seu valor en la variable myName que conté les dades que ha introduït l'usuari. Finalment, establim el textContent de l'encapçalat a una cadena, més el nom recentment emmagatzemat de l'usuari. 
  4. A continuació, afegiu aquest bloc if ... else - que podríem anomenar el codi d'inicialització, ja que estructura l'aplicació quan es carrega per primera vegada:
    if(!localStorage.getItem('name')) {
      setUserName();
    } else {
      var storedName = localStorage.getItem('name');
      myHeading.textContent = 'Mozilla is cool, ' + storedName;
    }
    Aquest primer bloc utilitza l'operador de negació (NOT lògic, representada pel!) per comprovar si existeix o no les dades de nom. Si no és així, la funció setUserName() s'executa per crear-lo. Si existeix (és a dir, l'usuari ho va establir durant una visita anterior), recuperarem el nom emmagatzemat utilitzant getItem() i establint el textContent de l'encapçalat en una cadena, a més del nom de l'usuari, com ho vam fer dins de setUserName().
  5. Finalment, col·loqueu el següent controlador d'esdeveniments onclick en el botó. En fer clic, la funció setUserName() s'executa. Això permet a l'usuari configurar un nou nom, quan ho desitgi, prement el botó:
    myButton.onclick = function() {
      setUserName();
    }
    

Ara, quan visiteu per primera vegada el lloc, se us demanarà el vostre nom d'usuari i us donarà un missatge personalitzat. Podeu canviar el nom en qualsevol moment que desitgeu, oprimint el botó. Com un avantatge addicional, ja que el nom s'emmagatzema dins localStorage, aquest persistirà després que el lloc estigui tancat, mantinguen el missatge personalitzat quan torneu a obrir el lloc!

Conclusió

Si heu seguit totes les instruccions d'aquest article, heu d'acabar veient una pàgina amb aquest aspecte (també podreu veure la nostra versió aquí):

Si us quedeu encallats, sempre podreu comparar el vostre treball amb el nostre codi d'exemple acabat en Github.

Tot just hem tractat una part superficial de JavaScript. Si heu gaudit del joc i desitgeu avançar encara més, dirigir-vos al nostre tema d'aprenentatge de JavaScript.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,