JavaScript

llenguatge de programació
(S'ha redirigit des de: Javascript)
No s'ha de confondre amb Java (llenguatge de programació).

JavaScript és un llenguatge script basat en objectes implementat originàriament per Netscape Communications Corporation, i que va derivar en l'estàndard ECMAScript.[1][2][3] És conegut sobretot pel seu ús en pàgines web, però també s'utilitza en altres aplicacions.[2]

Infotaula de llenguatge de programacióJavaScript
Tipusllenguatge script, llenguatge de programació basat en prototips, llenguatge de programació imperatiu, llenguatge de programació funcional, event-driven programming language (en) Tradueix, plataforma informàtica, llenguatge interpretat, llenguatge de programació multiparadigma, llenguatge de programació, llenguatge de programació estricte i llenguatge de programació d'alt nivell Modifica el valor a Wikidata
Data de creaciómaig 1996 Modifica el valor a Wikidata
DissenyBrendan Eich Modifica el valor a Wikidata
EpònimJava Modifica el valor a Wikidata
Paradigma de programacióprogramació funcional, programació genèrica, programació orientada a aspectes, programació orientada a events, Programació basada en prototips i llenguatge imperatiu Modifica el valor a Wikidata
Darrera versió estableECMAScript 2024 ()
ECMAScript 2025 () Modifica el valor a Wikidata
Influenciat perScheme, Self, Java, C, LiveScript, Lua, Perl, awk, HyperTalk i Python Modifica el valor a Wikidata
Extensió dels fitxersjs i mjs Modifica el valor a Wikidata
Etiqueta d'Stack ExchangeEtiqueta Modifica el valor a Wikidata
Pàgina webecma-international.org… Modifica el valor a Wikidata

Malgrat el seu nom, JavaScript no deriva del llenguatge de programació Java,[4] 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 Oracle Corporation.

Característiques

modifica

És un llenguatge de programació basat en objectes i de guió (també conegut com a script) que suporta els principis de polimorfisme, herència per delegació), abstracció i encapsulació. És sensible a les majúscules i minúscules, està orientat a esdeveniments (principalment solen implementar-se als botons del codi HTML[4]), se sol utilitzar per a generar codi HTML[2] i és un llenguatge de programació interpretat.[5]

Quan s'utilitza com a llenguatge al costat-client en l'àmbit web, els scripts s'executen al navegador web, servint com a extensió de les capacitats del llenguatge de la web HTML.[6] La interacció entre JavaScript, el codi HTML i el navegador web es fa possible mitjançant un conjunt d'objectes que representen l'estructura d'una pàgina web en forma d'arbre, anomenat Model d'Objectes del Document.[7]

Història

modifica

El 1993 el National Center for Supercomputing Applications creà el navegador web Mosaic. Per a explotar les possibilitats de la web, que estava en desenvolupament, es fundà l'empresa Netscape Corporation. Netscape creà el navegador Netscape Navigator. Netscape es donà compte de la necessitat de que el contingut web havia de ser més dinàmic. Així el 1995 contractà a Brendan Eich.[1]

El 1995, Brendan Eich[2] va desenvolupar en Netscape Corporation[1] la primera versió d'este llenguatge sota el nom Mocha, rebatejat LiveScript i finalment Javascript.[4] 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 augmentar la usabilitat d'aplicacions web amb tècniques avançades com AJAX o JCC.

El 1997 els autors van proposar Javascript com a 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

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

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

amb una alerta,

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

a la consola del navegador i a l'entorn Node.js

console.log('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)[8] 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

Generals

modifica

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

Comentaris

modifica
 // comentari fins a fi de línia
 /* comentari 
 multilínia
 */
'{' instrucció ';' instr. '}'

Tipus i valors

modifica
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 enter
 // 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 nul·la de charCodeAt en els 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

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
 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'')
 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
 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
 var variable_o_propietat = function (param1, param2, ..) { codi }
 // o també
 function nom_de_funcio (param1, param2, ..) { codi }

Array (vectors)

modifica
 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

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

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.[10]

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

 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...()
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
 */

Biblioteca d'operacions numèriques:

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

Creació d'objectes

modifica

directament

modifica
 var objJoanPersona = new Object()
 objJoanPersona.nom = 'Joan'
 objJoanPersona.edat = 25

 // o també

 var objJoanPersona = {nom: 'Joan', edat: 25}

amb una funció constructora

modifica

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

 function Alumne(academia, numMatricula, assignatures)
 {
 this.academia = academia ;
 this.numMatricula = numMatricula ;
 this.assignatures = assignatures ;
 }

 var objAlumne = new Alumne('La Meva Escola', 36, ["Javascript", "Java"]) ;

amb mecanisme d'herència per delegació a un altre objecte

modifica

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'' abans de fer-ne instàncies
 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 la propietat "prop" del prototipus amb la var. "str"
 } 
 ClasseDerivada.prototype = obj1 // ref. a una instància de ClasseArrel
 var obj2 = new ClasseDerivada("def") 

> obj1.prop
"abc"

> obj2.prop
"abcdef"

instanceof

modifica
 var ésAlumne_EnPere = objPereAlumne instanceof Alumne // true

 obj1 instanceof ClasseArrel // true
 obj2 instanceof ClasseDerivada // true
 obj2 instanceof ClasseArrel // true

L'objecte Global

modifica

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

NaN (acrònim de Not_a_Number, en català: No_Numèric), Infinity, undefined
 eval(x)
 parseInt(string) // llegeix un enter 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

Operadors en prefix (unaris)

modifica
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
++ (postincrement)
-- (postdecrement)

Operadors en infix (binaris)

modifica

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 dona true 
=== !== (igualtat estricta: sense conversió de tipus) // "12" === 12 dona false

operadors relacionals

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

operador condicional

?: (condició "?" expr_cas_de_cert ":" expr_cas_de_fals) (true?1:0 == 1)

operadors d'assignació

=
*= /= %= += -= <<= >>= >>>= &= ^= |=
operador coma
expressió_d'efectes_laterals "," expressió === resultat de la segona expressió
 var a = alert("alerta!"), 2 // a == 2

Biblioteques Javascript rellevants

modifica

Gestió d'esdeveniments

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

Programació reactiva funcional

modifica
  • flapjax[14] permet establir dependències per alterar característiques del codi DOM 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ó.

Relacionat

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

Javascript als Navegadors

modifica
Firefox de Mozilla
  • Javascript a Mozilla (anglès) Suport de Javascript al Firefox, Thunderbird i altres projectes.
Internet Explorer
Google Chrome
Safari de l'Apple
Opera

Javascript com a rerefons de compiladors d'altres llenguatges

modifica

Elm (programació reactiva funcional)

modifica

Llenguatge per generar aplicacions gràfiques al navegador (GUI) amb sintaxi Haskell, compilable a JavaScript.

Antigament seguia un model de programació reactiva funcional, però l'han canviat a un model MVC (Model-Vista-Controlador) més pròxim al ReactJS.[15]

Java a Javascript

modifica

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

Haskell a Javascript

modifica
  • Fay: Compilador de Haskell a Javascript que admet un subconjunt del llenguatge Haskell i tipus específics per a Javascript[18]
  • JMacro - Generador de Javascript sintàcticament correcte[19]
  • Javascript amb tipatge fort, com a biblioteca Haskell de llenguatge incrustat (EDSL)[20]
  • PureScript compilador per una versió de Haskell amb avaluació estricta, amb algunes diferències de sintaxi.

Scala a Javascript

modifica
  • ScalaJS: compilador a JavaScript.[21]

OCaml a Javascript

modifica

Scheme a Javascript

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

Smalltalk a Javascript

modifica

Vegeu també

modifica

Referències

modifica
  1. 1,0 1,1 1,2 Rauschmayer, Axel. «Chapter 4. How JavaScript Was Created». A: Speaking JavaScript: An In-Depth Guide for Programmers. Sebastopol, Califòrnia: O'Reilly, 2015. ISBN 9781449365035.  Arxivat 2020-02-27 a Wayback Machine.
  2. 2,0 2,1 2,2 2,3 Pérez Castaño, 2014, p. 29.
  3. Stefanov, Stoyan. JavaScript patterns. Sebastopol, CA: O'Reilly, 2010, p. 5. ISBN 9781449396947. «The core JavaScript programming language [...] is based on the ECMAScript standard, or ES for short.» 
  4. 4,0 4,1 4,2 Pérez Castaño, 2014, p. 30.
  5. Pérez Castaño, 2014, p. 31.
  6. Pérez Castaño, 2014, p. 32.
  7. Pérez Castaño, 2014, p. 34-35.
  8. Scripting Layer for Android[Enllaç no actiu](anglès) Capa que permet utilitzar Javascript, Python, i altres llenguatges de guió
  9. Mozilla - Rhino, motor de Javascript (anglès)
  10. 10,0 10,1 10,2 Especificació ECMAScript - Objecte Date()(anglès)
  11. Biblio Wu de prog. funcional Arxivat 2011-03-02 a Wayback Machine.(anglès)
  12. Biblio Underscore de prog. funcional Arxivat 2011-05-03 a Wayback Machine.(anglès)
  13. Biblio. Osteele de prog. funcional Arxivat 2019-07-21 a Wayback Machine.(anglès)
  14. Flapjax
  15. A farewell to FRP(anglès) Adéu a la FRP
  16. Google Web Toolkit (pàgina inicial)[Enllaç no actiu](anglès)
  17. Compilant Java a Javascript(anglès)
  18. El llenguatge Fay(anglès)
  19. Jmacro(anglès)
  20. biblioteca Haskell de Javascript com a llenguatge incrustat (EDSL)(anglès)
  21. ScalaJS(anglès)
  22. OCamlJs (pàgina al viver de projectes Google code)[Enllaç no actiu](anglès)
  23. OCamlJs - El compilador de OCaml a Javascript(anglès)
  24. Scheme2Js(anglès)
  25. CPSCM Scheme a Javascript(anglès)
  26. ST2JS - Smalltalk a Javascript(anglès)

Bibliografia

modifica

Estàndards ECMAScript, nom oficial de JavaScript

modifica

Enllaços externs

modifica