JavaScript

De Viquipèdia
Dreceres ràpides: navegació, cerca
No s'ha de confondre amb Java (llenguatge de programació).

JavaScript és un llenguatge script basat en el concepte de prototipus (herència per delegació), implementat originàriament per Netscape Communications Corporation, i que va derivar en l'estàndard ECMAScript. És conegut sobretot pel seu ús en pàgines web, però també s'utilitza en altres aplicacions.

Malgrat el seu nom, JavaScript no deriva del llenguatge de programació Java, però tots dos compartixen una sintaxi similar inspirada en el llenguatge C. Semànticament, JavaScript és més pròxim als llenguatges Self i ActionScript (basat també en l'ECMAScript). El nom "JavaScript" és una marca registrada per Sun Microsystems.

Història[modifica | modifica el codi]

El 1995, Brendan Eich va desenvolupar en Netscape Corporation la primera versió d'este llenguatge sota el nom Mocha, rebatejat LiveScript i finalment Javascript. Aquest últim canvi de nom va coincidir amb la inclusió de la tecnologia Java per part del navegador web Netscape. La primera versió del llenguatge es va presentar el desembre de 1995 a la versió 2.0B3 del navegador Netscape. Microsoft implementà més tard una versió amb el nom JScript, però sovint també se l'anomena Javascript.

En un principi, s'usava a pàgines web HTML, per realitzar feines i operacions al marc de l'aplicació client servidor. Amb l'aparició de la Web 2.0, Javascript s'ha convertit en un veritable llenguatge de programació que aporta la potència de càlcul al navegador per aumentar la usabilitat d'aplicacions web amb tècniques avançades com AJAX o JCC.

El 1997 els autors van proposar Javascript com estàndard de l'European Computer Manufacturers Association ECMA, que tot i el seu nom no és europeu, sinó internacional, amb la seu a Ginebra. El juny de 1997 va ser adoptat com un estàndard ECMA, amb el nom ECMAScript. Poc després també va ser un estàndard ISO.

JScript és la implementació del ECMAScript de Microsoft, molt similar al JavaScript de Netscape, però amb certes diferències al model d'objecte del navegador que fan les dues versions incompatibles.

Per evitar aquestes incompatibilitats, el World Wide Web Consortium va dissenyar l'estàndard Document Object Model (DOM, o Model d'Objectes del Document en català), que incorpora el Konqueror, les versions 6 d'Internet Explorer i Netscape Navigator, Opera versió 7, i Mozilla des de la seva primera versió.

Programa d'exemple[modifica | modifica el codi]

Aquest programa escriu "Hola món" al dispositiu de sortida per defecte,

 document.write('Hola, món!');

o amb una alerta

 alert('Hola, món!');

Per experimentar fora del navegador podeu descarregar-vos el motor Javascript de Mozilla

  • Per a Linux podeu instal·lar el paquet de la distribució, compilat a codi màquina.
rhino --help
  • Per a l'Android cal instal·lar el paquet SL4A (Scripting Layer for Android)[1] i seguidament el "Rhino for Android" (a la mateixa web).

Un cop descarregat i desempaquetat, obriu una finestra de comandes, canvieu directori a la carpeta del paquet obert i activeu el Rhino sobre JVM amb

java -jar js.jar

Característiques[modifica | modifica el codi]

Generals[modifica | modifica el codi]

Les relacions d'herència entre objectes no són per classes i subclasses, sinó individuals entre un objecte i un altre, anomenat el seu prototipus (relacionats mitjançant la propietat prototype), al qual es deleguen les operacions i propietats que el primer desconeix (no pròpies o específiques).

  • Només es pot establir un prototipus mitjançant una funció constructora.
  • Els prototipus poden formar una cadena que ha de ser finita (no hi pot haver cicles).

Vegeu l'exemple més avall a "Creació d'objectes".

Sintaxi[modifica | modifica el codi]

Comentaris[modifica | modifica el codi]

 // comentari fins a fi de línia
 /* comentari 
    multilínia
 */

Blocs[modifica | modifica el codi]

'{' instrucció ';' instr. '}'

Tipus i valors[modifica | modifica el codi]

Undefined
  undefined   // valor de variables no definides
              //   i dels paràmetres formals de funcions, absents a la crida
 
  if (nom_var == undefined) nom_var = valor_per_defecte ;
 
  var excepció_manca_param = "manca paràmetre" ;
  var doble = function (x) { if (x == undefined) throw excepció_manca_param ;
                             else return 2 * x; 
                           }  
  try {
   doble() ;
  }
  catch (error) {
    if (error == excepció_manca_param) alert("Error: "+error) ;
  }
Null
 null
Boolean

Operacions segons l'Àlgebra de Boole: (! :not),(&& :and),(|| :or)

  false, true
  Boolean( <expressió_de_qualsevol_tipus> ); // conversió a booleà
   // (els elem. neutres de la suma o concatenació avaluen a fals)
Number, real de 64 bits

Operacions segons la norma IEEE 754.

  0 -1 1.5 -2E-3 NaN +Infinity -Infinity      
  // NaN és Not-a-Number (No-Numèric) com ara 0/0,
  // ''Infinity'' indica sobreeiximent en el càlcul
  Number( <expressió_de_qualsevol_tipus> );  // conversió a numèric 
 
  parseInt( string)   // llegeix un sencer
                          // parseInt("") == NaN
                          // parseInt("1.5") == 1
                          // parseInt("0xA") == 10    // llegeix hexadecimal
  parseFloat( string) // llegeix un real
                          // parseFloat("1.2") == parseFloat("12E-1")
                          // parseFloat("1.2.3") == 1.2
                          // parseFloat("E1") == NaN
 
  isNaN( number)      // és resultat de 0/0 ? (NaN: No-Numèric)
  isFinite( number)   // (negat) hi ha hagut sobreiximent ?, per ex. 1/0 == Infinity (no dispara
                      // div-per-zero)
String
  "" "abc" 'abc'
  // conversió a cadena de caràcters de l'expressió
  String(  <expressió_de_qualsevol_tipus> );

Operacions:

 str1 + operand === str1.concat( String(operand))     // concatenació 
 operand + str2 === String(operand).concat( str2) // concatenació
 "c".localeCompare("d") === -1  // {1 (>), 0 (==), -1 (<), o primera diferència no nula de charCodeAt als caràcters}
 "0123".substr (1, 3) === "123"      // str.substr( inici, llargada)
 "0123".substring (1, 3) === "12"    // str.substring( inici, índex_aturador)
 "0123".slice (1, 3) === "12"
 "0123".charAt( 1) === "1"
 "0123".charCodeAt( 1) === 49  // Codi decimal del caràcter
 "18/11/2011".split ("/") === ["18", "11", "2011"]
 "18/11/2011".split ("/", 2) === ["18", "11"]   // amb límit de particions
 "a//".indexOf("/") === 1
 "a//".lastIndexOf("/") === 2
 "abc".replace("b","p") === "apc"
 "abcd".search("cd") === 2    // (-1) en cas de fracàs en la cerca.
 
 String.fromCharCode(64) === "@" 
 "@".charCodeAt(0) === 64
Object

Objecte[modifica | modifica el codi]

Conjunt de propietats amb valor associat. (diccionari propietat → valor)

  var obj = { propietat1: valor1, propietat2: valor2, ..}

new devant d'un constructor genera objectes, sense new, constructors com ara String() no estan obligats, segons l'estàndard, a generar un objecte, sinó només la conversió al tipus primitiu (cas de booleans i nombres) o escalar (cas de tires de caràcters).

propietats de l'objecte Object, prototipus inicial dels objectes nous[modifica | modifica el codi]

  obj.hasOwnProperty ( 'prop')      // consulta si l'objecte té la prop. específicament,  
                                    // i no per delegació al prototipus
  obj.isPrototypeOf ( altre_obj)       // si és prototipus de
  obj.propertyIsEnumerable ( 'prop' )   // si la prop. sortirà llistada en un bucle 'for(' prop_var
                                        //'in' obj ')'
  obj.toString()                      // representació estàndard
  obj.toLocaleString()                // representació segons ''Locale'' (característiques de cultura       
                                      // local)
  obj.valueOf()              // retorna el seu valor d'instància (''this'')

Number[modifica | modifica el codi]

  obj = new Number( expr.)   // amb new el nombre admet propietats a més del valor
 
  obj = new Number( 5)
  obj.una_altra_prop = "abc"
  • l'objecte Number conté valors típics per contrastar
  Number.MAX_VALUE           // 1.7976931348623157 × 10^308
  Number.MIN_VALUE           // 5                  x 10^-324
  Number.NaN                // valor ''Not-a-Number'' (cat:No-Numèric), ex.: resultat de 0/0
  Number.POSITIVE_INFINITY  // indica "sobreeiximent en operacions de resultat positiu"
  Number.NEGATIVE_INFINITY  // indica "sobreeiximent en operacions de resultat negatiu"

String (cadenes de text)[modifica | modifica el codi]

  var a = new String( "0123")   // amb new fem un objecte, podem afegir-li propietats
  var a = "0123"                // valor [[escalar_(informàtica)|escalar]], no podem afegir-li propietats

mètodes (La majoria de mètodes de String no tornen un objecte String sinó un valor primitiu (escalar) de tipus String)

Funció[modifica | modifica el codi]

  var variable_o_propietat = function (param1, param2, ..) { codi }
  // o també
  function nom_de_funcio  (param1, param2, ..) { codi }

Array (vectors)[modifica | modifica el codi]

  var a = new Array( llargada)
  var a = [0, 1, 2, 3, 4]
  var a = Array(0, 1, 2, 3, 4)   // un sol param. llargada 
                        //; més d'un, suposa que són elements
  a.length   // llargada
  // mètodes generadors: push (apila), unshift (afegeix pel cap), concat
  // mètodes consultors: slice (llesca), join (ajunta formant String)
  // mètodes mutadors: pop (desapila), shift (lleva el primer),
  // reverse, sort, splice (substitueix elements)

Date (data)[modifica | modifica el codi]

El tipus Date permet el càlcul amb dates amb una aproximació d'un mil·lisegon.[3]

El temps, segons l'especificació ECMAScript, es mesura en mil·lisegons des de l'1 de gener de 1970 (Època Unix). Els segons intercalars no hi són comptats.[3]

Les dates són una extrapolació del temps en mil·lisegons al Calendari gregorià[3]

  var a = new Date()  // Ara
  // inicialització
  var a = new Date('Jan 10, 2009 12:01:02') // amb text interpretat com data/hora local
  var a = new Date (any, mes [, dia [, hora [, minuts [, segons [, ms]]]]]) // amb hora local
  var a = Date.UTC (any, mes [, dia [, hora [, minuts [, segons [, ms]]]]]) // amb hora UTC
 
  a.getTime() // valor intrínsec (this) de l'objecte Date 
              // (mil·lisegons des de l'[[hora Unix|època Unix]]) 
  a.getTimezoneOffset() // valor segons l'ajustatge del sistema op.

Alguns d'aquests mètodes poden desconcertar pel nom o rang de valors:

  // camps resultat de l'extrapolació al Calendari Gregorià
  a.getDate()  // dia numèric del mes, rang  1..28..
  a.getDay()   // dia numèric de la setmana rang 0..6
  a.getMonth() // mes numèric, rang 0..11
  a.getYear()  // obsolet!!, any des de 1900.<ref>[http://download.oracle.com/javase/1,5.0/docs/api/java/util/Date.html#getYear() Java API - Date.getYear()] mètode obsolet!!</ref>
  a.getFullYear // any complet
  a.getHours() getMinutes() getSeconds() getMilliseconds() 
  // funcions hora [[UTC]] substituint el prefix get...() per getUTC...()

RegExp (expressió regular)[modifica | modifica el codi]

 var a = '/' patró_d'expressio_regular '/' senyals
 
 // EBNF senyals ::= { 'g' | 'i' | 'm' }

propietats:

  str  a.source  // cadena patró
  num  a.lastIndex   // posició on començar el proper intent d'encaixar, inicialment 0
  bool a.global      // ''senyal'' g -- (cerca múltiple) actualitza la 
                     //                 propietat lastIndex per a la cerca següent
  bool a.ignoreCase  // ''senyal'' i -- ignora caixa majús/min
  bool a.multiline   // ''senyal'' m -- ignora salts de línia

mètodes

  a.test( str)  // equival a:  a.exec( str) != null
 
  res = a.exec( str)  // executa l'expressió regular contra la cadena str 
                      // fins a aconseguir un encaix
 
  /* el resultat és o null (fracàs), o en cas d'èxit, un objecte Array amb propietats addicionals
  -- res.length           : nombre d'encaixaments corresp. a tot el patró més grups assenyalats 
                            pels parèntesis
  -- res[ 0]              : subcadena  encaixada corresponent a tot el patró
  -- res[ 1..length-1]    : subcadenes corresponents a grups
  -- res.index            : posició d'inici de l'encaix trobat a str
  -- res.input            : valor de la cadena d'entrada str
  -- cas del ''senyal'' "g", a.lastIndex s'incrementa amb la llargada del resultat de l'encaix 
                             res[0], preparat per a la cerca de l'encaix consecutiu
  */

Math[modifica | modifica el codi]

Biblioteca d'operacions numèriques:

  Math.floor( -3.5) == -4  // terra: major sencer inferior -- cas de positius: part sencera
  Math.ceil( -3.5) == -3   // sostre: menor sencer superior
  ...

Creació d'objectes[modifica | modifica el codi]

directament[modifica | modifica el codi]

 var objJoanPersona = new Object()
 objJoanPersona.nom = 'Joan'
 objJoanPersona.edat = 25
 
 // o també
 
 var objJoanPersona = {nom: 'Joan', edat: 25}

amb una funció constructora[modifica | modifica el codi]

Quan una funció es fa servir amb new s'anomena Constructor i inicialitza l'objecte creat amb new.

 function Alumne( academia, numMatricula, assig)
 {
   this.academia = academia ;
   this.numMatricula = numMatricula ;
   this.assignatures = assig ;
 }
 
 var objAlumne = new Alumne( 'Escola A', 36, ["Javascript", "Java"] ) ;

amb mecanisme d'herència per delegació a un altre objecte[modifica | modifica el codi]

Una funció Constructora d'objectes pot especialitzar un altre objecte si l'assigna a la propietat prototype de la funció.

 // afegim la propietat ''prototype'' a la funció plantilla ''Alumne''
 Alumne.prototype = objJoanPersona       // previ a la instanciació dels alumnes
 
 var objJoanAlumne = new Alumne( 'Escola A', 36, ["Javascript", "Java"] ) ;
 
 objJoanAlumne.nom  // resultat, per delegació al prototipus objJoanPersona, 'Joan'
 
 objPereAlumne = new Alumne( 'Escola A', 135, ["Haskell", "OCaml"] ) ;
 objPereAlumne.nom = 'Pere' // en assignar, genera una prop. específica de l'obj.,
                                           // l'objecte prototipus no queda afectat.

this a la dreta d'una assignació equival al super dels llenguatges orientats a objectes per demanar el valor del mètode de la superclasse

  var ClasseArrel = function( str) {this.prop = str}  // funció constructora
  var obj1 = new ClasseArrel( "abc")
 
  var ClasseDerivada = function( str) {
        this.prop = this.prop + str  // concatena amb el valor del prototipus
  } 
  ClasseDerivada.prototype = obj1    // ref. a una instància de ClasseArrel
  var obj2 = new ClasseDerivada( "def") 
 
> obj1.prop
"abc"
 
> obj2.prop
"abcdef"

instanceof[modifica | modifica el codi]

  var ésAlumne_EnPere = objPereAlumne instanceof Alumne  // true
 
  obj1 instanceof ClasseArrel      // true
  obj2 instanceof ClasseDerivada   // true
  obj2 instanceof ClasseArrel      // true

L'objecte Global[modifica | modifica el codi]

Valors i funcions globals definits a la norma ECMA262 edició 3a.:

NaN, Infinity, undefined
 eval( x)
 parseInt( string)   // llegeix un sencer de l'string 
                           // parseInt("") == NaN
                           // parseInt("1.5") == 1
                           // parseInt("0xA") == 10    // llegeix hexadecimal
 parseFloat( string) // llegeix un real 
                           // parseFloat("1.2") == parseFloat("12E-1")
 isNaN( number)      // és resultat de 0/0 ? (NaN: No-Numèric)
 isFinite( number)   // (negat) hi ha hagut sobreiximent ?, per ex. 1/0 == Infinity (no dispara
                     // div-per-zero)
 encodeURI( uri)     // substitueix en una [[URI]] determinats caràcters per seqüències d'escapament 
                     // ASCII amb % seguit de 2 dígits hexadecimals, com ara %3D
 decodeURI( uri)     // inversa
 ...

Operadors[modifica | modifica el codi]

Operadors en prefix (unaris)[modifica | modifica el codi]

 delete propietat (elimina propietat)
 void  expr  (avalua expr. i descarta resultat, retorna undefined)
 typeof expr  (retorna tipus {"undefined", "boolean", "number", "string", "object", "function"}
 ++  (preincrement)    
 --  (predecrement)
 +
 -
 ~  (complement a 1)
 !  (negació)

Operadors en postfix (unaris)[modifica | modifica el codi]

 ++ (postincrement)
 -- (postdecrement)

Operadors en infix (binaris)[modifica | modifica el codi]

operadors multiplicatius

 *    producte
 /    quocient
 %    residu   (1.5 % 1 == 0.5)

operadors additius

 +    (si un operand és String, concatena amb la conv. a String de l'altre)
 -

operadors de bits

 <<   (desplaçament a l'esquerra)       (0x80000000 << 1 == 0)
 >>   (desplaçament a la dreta, que manté el signe)
 >>>  (desplaçament sobre valor natural)
 &    (and)
 ^    (xor)
 |    (or)

operadors d'igualtat

 == !=  (igualtat convertint tipus si cal)               // "12" == 12    dóna  true 
 === !==  (igualtat estricta: sense conversió de tipus)  // "12" === 12   dóna  false

operadors relacionals

 < <= > >=
 instanceof  (objecte instanceof plantilla_de_classe)
 in    (propietat in objecte = objecte té la prop.)

operador condicional

 ?: (condició? cas_de_cert:cas_de_fals)  (true?1:0 == 1)

operadors d'assignació

 =
 *= /= %= += -= <<= >>= >>>= &= ^= |=

operador coma , (expressió_d'efectes_laterals, expr_d'assignació = resultat de la segona)

  var a = alert("alerta!"), 2   // a == 2

Biblioteques Javascript rellevants[modifica | modifica el codi]

gestió d'esdeveniments[modifica | modifica el codi]

  • jQuery Consulta i tractament d'esdeveniments d'objectes del document segons el model DOM

programació funcional[modifica | modifica el codi]

programació reactiva funcional[modifica | modifica el codi]

  • flapjax[7] permet establir dependències per alterar característiques del codi DOM com a conseqüència de canvis de valor de camps (Behaviours) o successions d'esdeveniments (Event streams)
  • Elm: llenguatge de programació amb sintaxi quasi Haskell amb tractament unificat d'esdeveniments i senyals (Behaviours) que compila a JavaScript. Parteix d'un nus buit de Html generant-hi l'estructura per combinació.

orientació a objectes[modifica | modifica el codi]

altres[modifica | modifica el codi]

  • Altres biblios[9]

Relacionat[modifica | modifica el codi]

JSON
(acrònim de JavaScript Object Notation) Serialització d'objectes Javascript[10]

Javascript als Navegadors[modifica | modifica el codi]

Firefox de Mozilla
Internet Explorer
Google Chrome
Safari de l'Apple
Opera

Javascript com a rerefons de compiladors d'altres llenguatges[modifica | modifica el codi]

Elm (programació reactiva funcional)[modifica | modifica el codi]

En un full de càlcul, les modificacions de les caselles amb valors provoquen el recàlcul de les caselles amb fórmules en que intervenen, repintant-ne els nous resultats.

Elm parteix de

  • valors (expressions constants),
  • fonts de senyals (info. variable) per ex.: senyals de temps, de dispositius (ex. posició del ratolí), d'interaccions (ex. clics), elements de formularis amb senyal d'estat, senyals d'elements html que poden rebre modificacions d'estil CSS.
  • senyals derivats per aplicació d'una funció sobre els altres senyals (equivalent a les fórmules del full de càlcul) que, en el cas d'elements, poden combinar-los en una sola entitat o bé modificar-ne atributs.

i dóna un resultat expressat en la funció de la clàusula main que ofereix o bé una estructura estàtica (tipus Element) o bé dinàmica (Signal Element).

Els canvis de valor de les fonts de senyals provoquen el re-càlcul dels senyals derivats que en depenen, provocant el repintat automàtic dels elements amb els atributs modificats.

Serveix per a fer Jocs. Vegeu el Súper Mario.[11]

Java a Javascript[modifica | modifica el codi]

Una de les característiques del Google Web Toolkit[12] és la possibilitat de crear l'aplicació en Java i compilar-la a Javascript[13]

Haskell a Javascript[modifica | modifica el codi]

  • Fay: Compilador de Haskell a Javascript que admet un subconjunt del llenguatge Haskell i tipus específics per a Javascript[14]
  • JMacro - Generador de Javascript sintàcticament correcte[15]
  • Javascript amb tipatge fort, com a biblioteca Haskell de llenguatge incrustat (EDSL)[16]

Scala a Javascript[modifica | modifica el codi]

  • ScalaJS: compilador a JavaScript.[17]

OCaml a Javascript[modifica | modifica el codi]

Scheme a Javascript[modifica | modifica el codi]

  • Scheme2Js[20] de l'INRIA (Institut nacional francès de recerca en informàtica)
  • CPSCM[21] traductor a Google code de Scheme a Javascript basat en el mètode de compilació CPS (Continuation Passing Style).

Smalltalk a Javascript[modifica | modifica el codi]

Articles relacionats[modifica | modifica el codi]

Referències[modifica | modifica el codi]

Enllaços externs[modifica | modifica el codi]

A Wikimedia Commons hi ha contingut multimèdia relatiu a: JavaScript Modifica l'enllaç a Wikidata
Guies
Dialectes
Recursos