JavaScript ( / ˈdʒ ɑː v ə s k r ɪ p t / ), a menudo abreviado como JS , es un lenguaje de programación y una tecnología central de la Web , junto con HTML y CSS . El 99% de los sitios web utilizan JavaScript en el lado del cliente para el comportamiento de la página web . [10]
Los navegadores web tienen un motor JavaScript dedicado que ejecuta el código del cliente . Estos motores también se utilizan en algunos servidores y en una variedad de aplicaciones . El sistema de ejecución más popular para uso sin navegador es Node.js.
JavaScript es un lenguaje de alto nivel , a menudo compilado justo a tiempo , que cumple con el estándar ECMAScript . [11] Tiene tipado dinámico , orientación a objetos basada en prototipos y funciones de primera clase . Es multiparadigma y admite estilos de programación basados en eventos , funcionales e imperativos . Tiene interfaces de programación de aplicaciones (API) para trabajar con texto, fechas, expresiones regulares , estructuras de datos estándar y el Modelo de objetos de documento (DOM).
El estándar ECMAScript no incluye ninguna función de entrada/salida (E/S), como funciones de red , almacenamiento o gráficos . En la práctica, el navegador web u otro sistema de ejecución proporciona API de JavaScript para E/S.
Aunque Java y JavaScript son similares en nombre, sintaxis y respectivas bibliotecas estándar , los dos lenguajes son distintos y difieren mucho en diseño.
El primer navegador web popular con una interfaz gráfica de usuario , Mosaic , fue lanzado en 1993. Accesible para personas sin conocimientos técnicos, jugó un papel destacado en el rápido crecimiento de la World Wide Web en sus inicios . [12] Los desarrolladores principales de Mosaic fundaron entonces la corporación Netscape , que lanzó un navegador más refinado, Netscape Navigator , en 1994. Éste se convirtió rápidamente en el más utilizado. [13]
Durante estos años de formación de la Web, las páginas web sólo podían ser estáticas, sin capacidad de comportamiento dinámico una vez que la página se cargaba en el navegador. En la floreciente escena del desarrollo web existía el deseo de eliminar esta limitación, por lo que en 1995, Netscape decidió añadir un lenguaje de programación a Navigator. Para lograrlo, siguieron dos caminos: colaboraron con Sun Microsystems para integrar el lenguaje Java y contrataron a Brendan Eich para integrar el lenguaje Scheme . [6]
El objetivo era un "lenguaje para las masas", [14] "para ayudar a los no programadores a crear sitios web dinámicos e interactivos ". [15] La dirección de Netscape pronto decidió que la mejor opción era que Eich ideara un nuevo lenguaje, con una sintaxis similar a Java y menos parecida a Scheme u otros lenguajes de scripting existentes . [5] [6] Aunque el nuevo lenguaje y su implementación de intérprete se llamaron LiveScript cuando se enviaron por primera vez como parte de una versión beta de Navigator en septiembre de 1995, el nombre se cambió a JavaScript para el lanzamiento oficial en diciembre. [6] [1] [16] [17]
La elección del nombre JavaScript ha causado confusión, ya que se ha dado a entender que está directamente relacionado con Java. En ese momento, el boom de las puntocom había comenzado y Java era un nuevo lenguaje popular, por lo que Eich consideró que el nombre JavaScript era una estrategia de marketing de Netscape. [14]
Microsoft lanzó Internet Explorer en 1995, lo que desencadenó una guerra de navegadores con Netscape. En el ámbito de JavaScript, Microsoft creó su propio intérprete llamado JScript . [18]
Microsoft lanzó por primera vez JScript en 1996, junto con el soporte inicial para CSS y extensiones para HTML . Cada una de estas implementaciones era notablemente diferente de sus contrapartes en Netscape Navigator . [19] [20] Estas diferencias dificultaban que los desarrolladores lograran que sus sitios web funcionaran bien en ambos navegadores, lo que llevó al uso generalizado de los logotipos "mejor visto en Netscape" y "mejor visto en Internet Explorer" durante varios años. [19] [21]
Brendan Eich dijo más tarde sobre este período: "Todavía es una especie de lenguaje secundario . Se considera lento o molesto. La gente hace que aparezcan ventanas emergentes o esos mensajes que se desplazan en la antigua barra de estado en la parte inferior de su antiguo navegador ". [14]
En noviembre de 1996, Netscape presentó JavaScript a ECMA International como punto de partida para una especificación estándar a la que todos los proveedores de navegadores pudieran ajustarse. Esto llevó al lanzamiento oficial de la primera especificación del lenguaje ECMAScript en junio de 1997.
El proceso de normalización continuó durante algunos años, con el lanzamiento de ECMAScript 2 en junio de 1998 y ECMAScript 3 en diciembre de 1999. El trabajo en ECMAScript 4 comenzó en 2000. [18]
Sin embargo, el esfuerzo por estandarizar por completo el lenguaje se vio socavado por la creciente posición dominante de Microsoft en el mercado de navegadores. A principios de la década de 2000, la participación de mercado de Internet Explorer alcanzó el 95%. [22] Esto significó que JScript se convirtió en el estándar de facto para la creación de scripts del lado del cliente en la Web.
Microsoft participó inicialmente en el proceso de normalización e implementó algunas propuestas en su lenguaje JScript, pero finalmente dejó de colaborar en el trabajo de ECMA. Por ello, ECMAScript 4 quedó en desuso.
Durante el período de dominio de Internet Explorer a principios de la década de 2000, la creación de scripts del lado del cliente estaba estancada. Esto comenzó a cambiar en 2004, cuando el sucesor de Netscape, Mozilla , lanzó el navegador Firefox . Firefox fue bien recibido por muchos y le arrebató una importante cuota de mercado a Internet Explorer. [23]
En 2005, Mozilla se unió a ECMA International y comenzó a trabajar en el estándar ECMAScript para XML (E4X). Esto llevó a Mozilla a trabajar en conjunto con Macromedia (más tarde adquirida por Adobe Systems ), que estaba implementando E4X en su lenguaje ActionScript 3, que se basaba en un borrador de ECMAScript 4. El objetivo era estandarizar ActionScript 3 como el nuevo ECMAScript 4. Con este fin, Adobe Systems lanzó la implementación de Tamarin como un proyecto de código abierto . Sin embargo, Tamarin y ActionScript 3 eran demasiado diferentes de los scripts del lado del cliente establecidos y, sin la cooperación de Microsoft , ECMAScript 4 nunca llegó a concretarse.
Mientras tanto, se estaban produciendo avances muy importantes en comunidades de código abierto no afiliadas al trabajo de ECMA. En 2005, Jesse James Garrett publicó un libro blanco en el que acuñó el término Ajax y describió un conjunto de tecnologías, de las que JavaScript era la columna vertebral, para crear aplicaciones web en las que se pueden cargar datos en segundo plano, evitando la necesidad de recargar páginas completas. Esto desencadenó un período de renacimiento de JavaScript, encabezado por las bibliotecas de código abierto y las comunidades que se formaron en torno a ellas. Se crearon muchas bibliotecas nuevas, entre ellas jQuery , Prototype , Dojo Toolkit y MooTools .
Google lanzó su navegador Chrome en 2008, con el motor JavaScript V8 que era más rápido que su competencia. [24] [25] La innovación clave fue la compilación justo a tiempo (JIT), [26] por lo que otros proveedores de navegadores necesitaron revisar sus motores para JIT. [27]
En julio de 2008, estas partes dispares se reunieron en una conferencia en Oslo . Esto condujo a un acuerdo final a principios de 2009 para combinar todo el trabajo relevante e impulsar el lenguaje. El resultado fue el estándar ECMAScript 5, publicado en diciembre de 2009.
El ambicioso trabajo en el lenguaje continuó durante varios años, culminando en una extensa colección de adiciones y mejoras que se formalizaron con la publicación de ECMAScript 6 en 2015. [28]
La creación de Node.js en 2009 por Ryan Dahl provocó un aumento significativo en el uso de JavaScript fuera de los navegadores web. Node combina el motor V8 , un bucle de eventos y API de E/S , lo que proporciona un sistema de ejecución de JavaScript independiente. [29] [30] En 2018, millones de desarrolladores habían utilizado Node, [31] y npm tenía la mayor cantidad de módulos de cualquier administrador de paquetes del mundo. [32]
Actualmente, la especificación preliminar de ECMAScript se mantiene abierta en GitHub [33] y las ediciones se producen mediante instantáneas anuales periódicas. [33] Las posibles revisiones del lenguaje se examinan mediante un proceso de propuesta exhaustivo. [34] [35] Ahora, en lugar de números de edición, los desarrolladores verifican el estado de las próximas funciones de forma individual. [33]
El ecosistema actual de JavaScript tiene muchas bibliotecas y marcos , prácticas de programación establecidas y un uso sustancial de JavaScript fuera de los navegadores web. [17] Además, con el auge de las aplicaciones de una sola página y otros sitios web con mucho uso de JavaScript, se han creado varios transpiladores para ayudar al proceso de desarrollo. [36]
"JavaScript" es una marca registrada de Oracle Corporation en los Estados Unidos. [37] [38] La marca registrada fue otorgada originalmente a Sun Microsystems el 6 de mayo de 1997, y fue transferida a Oracle cuando adquirió Sun en 2009. [39]
JavaScript es el lenguaje de programación del lado del cliente dominante en la Web, y el 99% de todos los sitios web lo utilizan para este propósito. [10] Los scripts están incrustados o incluidos desde documentos HTML e interactúan con el DOM .
Todos los navegadores web principales tienen un motor JavaScript incorporado que ejecuta el código en el dispositivo del usuario.
Más del 80% de los sitios web utilizan una biblioteca de JavaScript o un marco web de terceros como parte de sus scripts del lado del cliente. [40]
jQuery es, por lejos, el más utilizado. [40] Otros ejemplos notables son Angular , Bootstrap , Lodash , Modernizr , React , Underscore y Vue . [40] Se pueden utilizar varias opciones en conjunto, como jQuery y Bootstrap. [41]
Sin embargo, el término "Vanilla JS" fue acuñado para sitios web que no utilizan ninguna biblioteca o marco, y que en su lugar dependen completamente de la funcionalidad estándar de JavaScript. [42]
El uso de JavaScript se ha expandido más allá de sus orígenes en los navegadores web . Los motores de JavaScript ahora están integrados en una variedad de otros sistemas de software, tanto para implementaciones de sitios web del lado del servidor como para aplicaciones que no son de navegador .
Los intentos iniciales de promover el uso de JavaScript del lado del servidor fueron Netscape Enterprise Server y los Servicios de Información de Internet de Microsoft , [43] [44] pero eran nichos pequeños. [45] El uso del lado del servidor finalmente comenzó a crecer a fines de la década de 2000, con la creación de Node.js y otros enfoques . [45]
Electron , Cordova , React Native y otros marcos de aplicaciones se han utilizado para crear muchas aplicaciones con comportamiento implementado en JavaScript. Otras aplicaciones que no son de navegador incluyen la compatibilidad con Adobe Acrobat para la creación de scripts de documentos PDF [46] y extensiones de GNOME Shell escritas en JavaScript. [47]
JavaScript se ha utilizado en algunos sistemas integrados , generalmente aprovechando Node.js. [48] [49] [50]
Un motor de JavaScript es un componente de software que ejecuta código JavaScript . Los primeros motores de JavaScript eran meros intérpretes , pero todos los motores modernos relevantes utilizan la compilación en tiempo real para mejorar el rendimiento. [51]
Los motores de JavaScript suelen ser desarrollados por los proveedores de navegadores web , y todos los navegadores importantes tienen uno. En un navegador, el motor de JavaScript se ejecuta en conjunto con el motor de renderizado a través del Modelo de objetos de documento y los enlaces IDL web . [52] Sin embargo, el uso de motores de JavaScript no se limita a los navegadores; por ejemplo, el motor V8 es un componente central del sistema de ejecución de Node.js. [53]
Dado que ECMAScript es la especificación estandarizada de JavaScript, el motor ECMAScript es otro nombre para estas implementaciones . Con la llegada de WebAssembly , algunos motores también pueden ejecutar este código en el mismo entorno de pruebas que el código JavaScript normal. [54] [53]Un motor de JavaScript debe estar integrado en un sistema de ejecución (como un navegador web o un sistema independiente) para permitir que los scripts interactúen con el entorno más amplio. El sistema de ejecución incluye las API necesarias para las operaciones de entrada/salida , como redes , almacenamiento y gráficos , y brinda la capacidad de importar scripts.
JavaScript es un lenguaje de un solo subproceso . El entorno de ejecución procesa los mensajes de una cola de uno en uno y llama a una función asociada con cada nuevo mensaje, creando un marco de pila de llamadas con los argumentos de la función y las variables locales . La pila de llamadas se reduce y crece según las necesidades de la función. Cuando la pila de llamadas está vacía tras la finalización de la función, JavaScript procede al siguiente mensaje de la cola. Esto se denomina bucle de eventos , descrito como "ejecutar hasta su finalización" porque cada mensaje se procesa por completo antes de que se considere el siguiente mensaje. Sin embargo, el modelo de concurrencia del lenguaje describe el bucle de eventos como no bloqueante : la E/S del programa se realiza utilizando eventos y funciones de devolución de llamada . Esto significa, por ejemplo, que JavaScript puede procesar un clic del ratón mientras espera que una consulta de base de datos devuelva información. [55]
Los entornos de ejecución independientes notables son Node.js , Deno y Bun .
Las siguientes características son comunes a todas las implementaciones de ECMAScript conformes a menos que se especifique explícitamente lo contrario.
JavaScript admite gran parte de la sintaxis de programación estructurada de C (por ejemplo, if
declaraciones, while
bucles, switch
declaraciones, do while
bucles, etc.). Una excepción parcial es el alcance : originalmente, JavaScript solo tenía alcance de función con var
; el alcance de bloque se agregó en ECMAScript 2015 con las palabras clave let
y const
. Al igual que C, JavaScript hace una distinción entre expresiones y declaraciones . Una diferencia sintáctica con C es la inserción automática de punto y coma , que permite omitir los puntos y coma (que terminan las declaraciones). [56]
JavaScript está tipado débilmente , lo que significa que ciertos tipos se convierten implícitamente dependiendo de la operación utilizada. [57]
+
convierte ambos operandos en una cadena a menos que ambos sean números. Esto se debe a que el operador de suma también funciona como operador de concatenación.-
siempre convierte ambos operandos en un número+
, -
) siempre convierten el operando a un númeroLos valores se convierten en cadenas como la siguiente: [57]
,
)[object Object]
donde Object
es el nombre del constructor del objeto.Los valores se convierten en números mediante la conversión a cadenas y luego la conversión de las cadenas a números. Estos procesos se pueden modificar definiendo funciones toString
y valueOf
en el prototipo para la conversión a cadenas y números respectivamente.
JavaScript ha recibido críticas por la forma en que implementa estas conversiones, ya que la complejidad de las reglas puede confundirse con inconsistencia. [58] [57] Por ejemplo, al agregar un número a una cadena, el número se convertirá en una cadena antes de realizar la concatenación, pero al restar un número de una cadena, la cadena se convierte en un número antes de realizar la resta.
A menudo también se menciona que {} + []
resulta en 0
(número). Esto es engañoso: {}
se interpreta como un bloque de código vacío en lugar de un objeto vacío, y la matriz vacía se convierte en un número mediante el +
operador unario restante. Si la expresión está envuelta entre paréntesis - ({} + [])
– las llaves se interpretan como un objeto vacío y el resultado de la expresión es "[object Object]"
el esperado. [57]
JavaScript tiene tipos dinámicos como la mayoría de los demás lenguajes de programación . Un tipo se asocia a un valor en lugar de a una expresión. Por ejemplo, una variable inicialmente vinculada a un número puede reasignarse a una cadena . [59] JavaScript admite varias formas de probar el tipo de objetos, incluido el tipado dinámico . [60]
JavaScript incluye una eval
función que puede ejecutar declaraciones proporcionadas como cadenas en tiempo de ejecución.
Douglas Crockford describe la herencia prototípica en JavaScript de la siguiente manera:
Creas objetos prototipo y luego... creas nuevas instancias. Los objetos son mutables en JavaScript, por lo que podemos aumentar las nuevas instancias, dándoles nuevos campos y métodos. Estos pueden actuar como prototipos para objetos aún más nuevos. No necesitamos clases para crear muchos objetos similares... Los objetos heredan de los objetos. ¿Qué podría ser más orientado a objetos que eso? [61]
En JavaScript, un objeto es una matriz asociativa , aumentada con un prototipo (ver más abajo); cada clave proporciona el nombre de una propiedad del objeto , y hay dos formas sintácticas de especificar dicho nombre: notación de punto ( obj.x = 10
) y notación de corchetes ( obj['x'] = 10
). Una propiedad se puede agregar, volver a enlazar o eliminar en tiempo de ejecución. La mayoría de las propiedades de un objeto (y cualquier propiedad que pertenezca a la cadena de herencia del prototipo de un objeto) se pueden enumerar mediante un for...in
bucle.
JavaScript utiliza prototipos donde muchos otros lenguajes orientados a objetos utilizan clases para la herencia . [62] Es posible simular muchas características basadas en clases con prototipos en JavaScript. [63]
Las funciones también funcionan como constructores de objetos, junto con su función típica. Si se antepone una llamada de función con new se creará una instancia de un prototipo, heredando propiedades y métodos del constructor (incluidas las propiedades del Object
prototipo). [64] ECMAScript 5 ofrece el Object.create
método, lo que permite la creación explícita de una instancia sin heredar automáticamente del Object
prototipo (los entornos más antiguos pueden asignar el prototipo a null
). [65] La propiedad del constructor prototype
determina el objeto utilizado para el prototipo interno del nuevo objeto. Se pueden agregar nuevos métodos modificando el prototipo de la función utilizada como constructor. Los constructores integrados de JavaScript, como Array
o Object
, también tienen prototipos que se pueden modificar. Si bien es posible modificar el Object
prototipo, generalmente se considera una mala práctica porque la mayoría de los objetos en JavaScript heredarán métodos y propiedades del Object
prototipo, y es posible que no esperen que se modifique el prototipo. [66]
A diferencia de muchos lenguajes orientados a objetos, en JavaScript no existe distinción entre una definición de función y una definición de método . En cambio, la distinción se produce durante la llamada a una función. Cuando se llama a una función como método de un objeto, la palabra clave this local de la función se vincula a ese objeto para esa invocación.
Las funciones de JavaScript son de primera clase ; una función se considera un objeto. [67] Como tal, una función puede tener propiedades y métodos, como .call()
y .bind()
. [68]
Una función anidada es una función definida dentro de otra función. Se crea cada vez que se invoca la función externa.
Además, cada función anidada forma un cierre léxico : el alcance léxico de la función externa (incluyendo cualquier constante, variable local o valor de argumento) se convierte en parte del estado interno de cada objeto de función interna, incluso después de que concluya la ejecución de la función externa. [69]
JavaScript también admite funciones anónimas .
JavaScript admite la delegación implícita y explícita .
JavaScript admite de forma nativa varias implementaciones basadas en funciones de patrones Role [70] como Traits [71] [72] y Mixins [73] . Una función de este tipo define un comportamiento adicional mediante al menos un método vinculado a la this
palabra clave dentro de su function
cuerpo. Luego, un Role debe delegarse explícitamente a través de call
o apply
hacia objetos que necesitan presentar un comportamiento adicional que no se comparte a través de la cadena de prototipos.
Mientras que la delegación explícita basada en funciones cubre la composición en JavaScript, la delegación implícita ya ocurre cada vez que se recorre la cadena de prototipos para, por ejemplo, encontrar un método que podría estar relacionado con un objeto pero que no es propiedad directa de este. Una vez que se encuentra el método, se lo llama dentro del contexto de este objeto. Por lo tanto, la herencia en JavaScript está cubierta por un automatismo de delegación que está vinculado a la propiedad de prototipo de las funciones constructoras.
JavaScript es un lenguaje de índice cero .
Se puede pasar una cantidad indefinida de parámetros a una función. La función puede acceder a ellos a través de parámetros formalesarguments
y también a través del objeto local . También se pueden crear funciones variádicas utilizando el bind
método.
Al igual que en muchos lenguajes de programación, las matrices y los objetos ( matrices asociativas en otros lenguajes) se pueden crear con una sintaxis abreviada y concisa. De hecho, estos literales forman la base del formato de datos JSON .
De manera similar a Perl , JavaScript también admite expresiones regulares , que proporcionan una sintaxis concisa y poderosa para la manipulación de texto que es más sofisticada que las funciones de cadena integradas. [74]
JavaScript admite promesas y Async/await para gestionar operaciones asincrónicas. [ cita requerida ]
Un objeto Promise integrado proporciona funcionalidad para manejar promesas y asociar controladores con el resultado final de una acción asincrónica. Recientemente, la especificación de JavaScript introdujo métodos combinadores, que permiten a los desarrolladores combinar múltiples promesas de JavaScript y realizar operaciones basadas en diferentes escenarios. Los métodos introducidos son: Promise.race, Promise.all, Promise.allSettled y Promise.any.
Async/await permite estructurar una función asincrónica y no bloqueante de forma similar a una función sincrónica normal. Se puede escribir código asincrónico y no bloqueante, con una sobrecarga mínima, estructurado de forma similar al código sincrónico y bloqueante tradicional.
Históricamente, algunos motores de JavaScript admitían estas características no estándar:
catch
(como Java)function(args) expr
; esta sintaxis experimental es anterior a las funciones de flecha)Las variables en JavaScript se pueden definir utilizando las palabras claves var
, [76] let
[77] o const
[78] . Las variables definidas sin palabras clave se definirán en el ámbito global.
// Declara una variable con alcance de función denominada `x` y le asigna implícitamente el valor especial `undefined`. Las variables sin valor se establecen automáticamente como undefined. // var generalmente se considera una mala práctica y let y const suelen ser las preferidas. var x ; // Las variables se pueden establecer manualmente como "indefinidas" de la siguiente manera: let x2 = undefined ; // Declara una variable de ámbito de bloque denominada `y` y la establece implícitamente como `undefined`. La palabra clave `let` se introdujo en ECMAScript 2015. let y ; // Declara una variable no reasignable y con alcance de bloque denominada `z` y la establece como // un literal de cadena. La palabra clave `const` también se introdujo en ECMAScript 2015, // y debe asignarse explícitamente.// La palabra clave `const` significa constante, por lo tanto, la variable no se puede reasignar // ya que el valor es `const`. const z = "¡este valor no se puede reasignar!" ; // Declara una variable de ámbito global y asigna 3. Esto generalmente se considera una mala práctica y no funcionará si el modo estricto está activado. t = 3 ; // Declara una variable llamada `myNumber` y le asigna un literal numérico (el valor `2`). let myNumber = 2 ; // Reasigna `myNumber`, estableciéndolo en un literal de cadena (el valor `"foo"`). // JavaScript es un lenguaje tipado dinámicamente, por lo que esto es legal. myNumber = "foo" ;
Tenga en cuenta los comentarios en los ejemplos anteriores, todos los cuales fueron precedidos por dos barras diagonales .
En JavaScript no existe una funcionalidad de entrada/salida incorporada , sino que la proporciona el entorno de ejecución. La especificación ECMAScript en la edición 5.1 menciona que "no existen disposiciones en esta especificación para la entrada de datos externos o la salida de resultados calculados". [79]
Sin embargo, la mayoría de los entornos de ejecución tienen un console
objeto que se puede utilizar para imprimir la salida. [80] A continuación se muestra un programa minimalista "¡Hola, mundo!" en JavaScript en un entorno de ejecución con un objeto de consola:
consola . log ( "¡Hola, mundo!" );
En documentos HTML, se requiere un programa como este para obtener una salida:
// Los nodos de texto se pueden crear usando el método "write". // Esto está mal visto, ya que puede sobrescribir el documento si este está completamente cargado. document . write ( 'foo' );// También se pueden crear elementos. Primero, se deben crear en el DOM. const myElem = document . createElement ( 'span' ); // También se pueden configurar atributos como las clases y el id myElem . classList . add ( 'foo' ); myElem . id = 'bar' ; // Después de configurar esto, la etiqueta se verá así: `<span class="foo" id="bar" data-attr="baz"></span>` myElem . setAttribute ( 'data-attr' , 'baz' ); // Que también podría escribirse como `myElem.dataset.attr = 'baz'` // Finalmente , añádelo como un elemento secundario al <body> en el documento HTML . body.appendChild ( myElem );// Los elementos se pueden capturar de forma imperativa con querySelector para un elemento, o con querySelectorAll para múltiples elementos que se pueden repetir con forEach document . querySelector ( '.class' ); // Selecciona el primer elemento con la clase "class" document . querySelector ( '#id' ); // Selecciona el primer elemento con un `id` de "id" document . querySelector ( '[data-other]' ); // Selecciona el primer elemento con el atributo "data-other" document . querySelectorAll ( '.multiple' ); // Devuelve una NodeList similar a una matriz de todos los elementos con la clase "multiple"
Una función recursiva simple para calcular el factorial de un número natural :
function factorial ( n ) { // Comprobando la legitimidad del argumento. Factorial está definido para números enteros positivos. if ( isNaN ( n )) { console.error ( " Argumento no numérico no permitido." ); return NaN ; // El valor especial: No es un número } if ( n === 0 ) return 1 ; // 0! = 1 if ( n < 0 ) return undefined ; // El factorial de números negativos no está definido. if ( n % 1 ) { console.warn ( ` ${ n } se redondeará al entero más cercano. Para números no enteros, considere usar la función gamma en su lugar.` ) ; n = Math.round ( n ) ; } // No es necesario repetir las comprobaciones anteriores en la recursión, por lo que se define la parte recursiva real por separado a continuación. // La siguiente línea es una expresión de función para calcular recursivamente el factorial. Utiliza la sintaxis de flecha introducida en ES6. const recursivelyCompute = a => a > 1 ? a * recursivelyCompute ( a - 1 ) : 1 ; // Nótese el uso del operador ternario `?`. return recursivelyCompute ( n ); } factorial ( 3 ); // Devuelve 6
Una función anónima (o lambda):
const contador = funcion () { dejar contar = 0 ; devolver función () { devolver ++ contar ; } }; const x = counter (); x (); // Devuelve 1 x (); // Devuelve 2 x (); // Devuelve 3
Este ejemplo muestra que, en JavaScript, los cierres de funciones capturan sus variables no locales por referencia.
Las funciones de flecha se introdujeron por primera vez en la sexta edición: ECMAScript 2015. Acortan la sintaxis para escribir funciones en JavaScript. Las funciones de flecha son anónimas, por lo que se necesita una variable para hacer referencia a ellas a fin de invocarlas después de su creación, a menos que estén rodeadas por paréntesis y se ejecuten inmediatamente.
Ejemplo de función de flecha:
// Las funciones de flecha nos permiten omitir la palabra clave `function`. // Aquí `long_example` apunta a un valor de función anónimo. const long_example = ( input1 , input2 ) => { console . log ( "Hello, World!" ); const output = input1 + input2 ; retorna salida ; }; // Si no hay llaves, la función de flecha simplemente devuelve la expresión // Entonces aquí es (input1 + input2) const short_example = ( input1 , input2 ) => input1 + input2 ; long_example ( 2 , 3 ); // Imprime "¡Hola, mundo!" y devuelve 5 short_example ( 2 , 5 ); // Devuelve 7 // Si una función de flecha tiene solo un parámetro, se pueden eliminar los paréntesis. const no_parentheses = input => input + 2 ; sin_paréntesis ( 3 ); // Devuelve 5 // Una función de flecha, al igual que otras definiciones de funciones, se puede ejecutar en la misma declaración en la que se crea. // Esto es útil al escribir bibliotecas para evitar llenar el alcance global y para cierres. let three = (( a , b ) => a + b ) ( 1 , 2 ); const generate_multiplier_function = a => ( b => isNaN ( b ) || ! b ? a : a *= b ); const five_multiples = generate_multiplier_function ( 5 ); // El argumento suministrado "sembra" la expresión y es retenido por a. five_multiples ( 1 ); // Devuelve 5 five_multiples ( 3 ); // Devuelve 15 five_multiples ( 4 ); // Devuelve 60
En JavaScript, los objetos se pueden crear como instancias de una clase .
Ejemplo de clase de objeto:
clase Pelota { constructor ( radio ) { este . radio = radio ; este . área = Math . PI * ( radio ** 2 ); } // Las clases (y por lo tanto los objetos) pueden contener funciones conocidas como métodos show () { console . log ( this . radius ); } }; const myBall = new Ball ( 5 ); // Crea una nueva instancia del objeto bola con radio 5 myBall . radius ++ ; // Las propiedades del objeto normalmente se pueden modificar desde el exterior myBall . show (); // Usando la función "show" heredada se registra "6"
En JavaScript, los objetos se pueden instanciar directamente desde una función.
Ejemplo funcional de objeto:
función Bola ( radio ) { const área = Math . PI * ( radio ** 2 ); const obj = { radio , área }; // Los objetos son mutables y se pueden agregar funciones como propiedades. obj . show = () => console . log ( obj . radius ); return obj ; }; const myBall = Ball ( 5 ); // Crea un nuevo objeto de bola con un radio de 5. No se necesita la palabra clave "new". myBall . radius ++ ; // La propiedad de instancia se puede modificar. myBall . show (); // El uso de la función "show" registra "6", el nuevo valor de instancia.
Demostración de función variádica (es una variablearguments
especial ): [81]
función suma () { sea x = 0 ; para ( sea i = 0 ; i < argumentos . longitud ; ++ i ) x += argumentos [ i ]; devolver x ; } suma ( 1 , 2 ); // Devuelve 3 suma ( 1 , 2 , 3 ); // Devuelve 6 // A partir de ES6, se utiliza el operador rest. function suma (... args ) { return args . reduce (( a , b ) => a + b ); } suma ( 1 , 2 ); // Devuelve 3 suma ( 1 , 2 , 3 ); // Devuelve 6
Las expresiones de función invocadas inmediatamente se utilizan a menudo para crear cierres. Los cierres permiten reunir propiedades y métodos en un espacio de nombres y hacer que algunos de ellos sean privados:
deje que el contador = ( función () { deje que i = 0 ; // Propiedad privada return { // Métodos públicos get : function () { alert ( i ); }, set : function ( valor ) { i = valor ; }, increment : function () { alert ( ++ i ); } }; })(); // Módulo contador.get (); // Devuelve 0 contador.set ( ) ; contador.incremento ( ) ; // Devuelve 7 contador.incremento ( ) ; // Devuelve 8
Los objetos generadores (en forma de funciones generadoras) proporcionan una función que se puede llamar, salir y volver a ingresar manteniendo el contexto interno (estado). [82]
función * rawCounter () { rendimiento 1 ; rendimiento 2 ; } función * dynamicCounter () { let count = 0 ; while ( true ) { // No se recomienda utilizar bucles while true en la mayoría de los casos. yield ++ count ; } } // Instancias const counter1 = rawCounter (); const counter2 = dynamicCounter (); // Implementación counter1 . next (); // {valor: 1, hecho: falso} counter1 . next (); // {valor: 2, hecho: falso} counter1 . next (); // {valor: indefinido, hecho: verdadero} contador2 . siguiente (); // {valor: 1, hecho: falso} contador2 . siguiente (); // {valor: 2, hecho: falso} contador2 . siguiente (); // {valor: 3, hecho: falso} // ...infinitamente
JavaScript puede exportar e importar desde módulos: [83]
Ejemplo de exportación:
/* mymodule.js */ // Esta función permanece privada, ya que no se exporta let sum = ( a , b ) => { return a + b ; } // Exportar variables export let name = 'Alice' ; export let age = 23 ; // Exportar funciones nombradas export function add ( num1 , num2 ) { return num1 + num2 ; } // Exportar clase exportar clase Multiplicación { constructor ( num1 , num2 ) { this . num1 = num1 ; this . num2 = num2 ; } agregar ( ) { devolver suma ( este.num1 , este.num2 ) ; } }
Ejemplo de importación:
// Importar una propiedad import { add } from './mymodule.js' ; console . log ( add ( 1 , 2 )); //> 3 // Importar múltiples propiedades import { name , age } from './mymodule.js' ; console . log ( name , age ); // "Alice", 23 // Importar todas las propiedades de un módulo import * from './module.js' console.log ( name , age ) ; // > "Alice", 23 console.log ( add ( 1,2 ) ); // > 3
Este código de muestra muestra varias funciones de JavaScript.
/* Encuentra el mínimo común múltiplo (MCM) de dos números */ function LCMCalculator ( x , y ) { // función constructora if ( isNaN ( x * y )) throw new TypeError ( "No se permiten argumentos no numéricos." ); const checkInt = function ( x ) { // función interna if ( x % 1 !== 0 ) throw new TypeError ( x + "no es un entero" ); devolver x ; }; this . a = checkInt ( x ) // los puntos y comas ^^^^ son opcionales, una nueva línea es suficiente this . b = checkInt ( y ); } // El prototipo de las instancias de objeto creadas por un constructor es // la propiedad "prototipo" de ese constructor. LCMCalculator . prototipo = { // literal de objeto constructor : LCMCalculator , // al reasignar un prototipo, establezca la propiedad del constructor apropiadamente gcd : function () { // método que calcula el máximo común divisor // Algoritmo euclidiano: let a = Math . abs ( this . a ), b = Math . abs ( this . b ), t ; if ( a < b ) { // intercambiar variables // t = b; b = a; a = t; [ a , b ] = [ b , a ]; // intercambiar usando asignación de desestructuración (ES6) } mientras ( b !== 0 ) { t = b ; b = a % b ; a = t ; } // Solo es necesario calcular MCD una vez, por lo que "redefine" este método. // (En realidad no es una redefinición; se define en la instancia misma, // de modo que this.gcd se refiere a esta "redefinición" en lugar de LCMCalculator.prototype.gcd. // Ten en cuenta que esto genera un resultado incorrecto si los miembros del objeto LCMCalculator "a" o "b" se modifican posteriormente). // Además, 'gcd' === "gcd", this['gcd'] === this.gcd this [ 'gcd' ] = function () { return a ; }; devuelve un ; }, // Los nombres de propiedades de objetos se pueden especificar mediante cadenas delimitadas por comillas dobles (") o simples ('). "lcm" : function () { // Los nombres de variables no entran en conflicto con las propiedades de los objetos, por ejemplo, |lcm| no es |this.lcm|. // no usar |this.a*this.b| para evitar problemas de precisión de FP let lcm = this . a / this . gcd () * this . b ; // Solo es necesario calcular mcm una vez, por lo que "redefine" este método. this . lcm = function () { return mcm ; }; devolver mcm ; }, // Los métodos también se pueden declarar usando la sintaxis ES6 toString () { // Usando literales de plantilla ES6 y el operador (+) para concatenar valores return `LCMCalculator: a = ${ this . a } , b = ` + this . b ; } }; // Define una función de salida genérica; esta implementación solo funciona para navegadores web function output ( x ) { document . body . appendChild ( document . createTextNode ( x )); document . body . appendChild ( document . createElement ( 'br' )); } // Nota: map() y forEach() de Array se definen en JavaScript 1.6. // Se utilizan aquí para demostrar la naturaleza funcional inherente de JavaScript. [ [ 25 , 55 ], [ 21 , 56 ], [ 22 , 58 ], [ 28 , 56 ] ]. map ( function ( pair ) { // literal de array + función de mapeo return new LCMCalculator ( pair [ 0 ], pair [ 1 ] ); }). sort (( a , b ) => a.lcm () - b.lcm ( )) // ordenar con esta función comparativa; => es una forma abreviada de una función, llamada "función de flecha" . forEach ( printResult ) ; función printResult ( obj ) { salida ( obj + ", gcd = " + obj.gcd ( ) + " , mcm = " + obj.lcm ( )); }
La siguiente salida debería mostrarse en la ventana del navegador.
CalculadoraMCM: a = 28, b = 56, mcd = 28, mcm = 56 CalculadoraMCM: a = 21, b = 56, mcd = 7, mcm = 168 CalculadoraMCM: a = 25, b = 55, mcd = 5, mcm = 275 CalculadoraMCM: a = 22, b = 58, mcd = 2, mcm = 638
JavaScript y el DOM ofrecen a los autores malintencionados la posibilidad de enviar secuencias de comandos para que se ejecuten en un equipo cliente a través de la Web. Los autores de navegadores minimizan este riesgo mediante dos restricciones. En primer lugar, las secuencias de comandos se ejecutan en un entorno aislado en el que solo pueden realizar acciones relacionadas con la Web, no tareas de programación de propósito general como la creación de archivos. En segundo lugar, las secuencias de comandos están limitadas por la política del mismo origen : las secuencias de comandos de un sitio web no tienen acceso a información como nombres de usuario, contraseñas o cookies enviadas a otro sitio. La mayoría de los errores de seguridad relacionados con JavaScript son infracciones de la política del mismo origen o del entorno aislado.
Existen subconjuntos de JavaScript general (ADsafe, Secure ECMAScript (SES)) que proporcionan mayores niveles de seguridad, especialmente en código creado por terceros (como anuncios). [84] [85] Closure Toolkit es otro proyecto para la integración y el aislamiento seguros de JavaScript y HTML de terceros. [86]
La política de seguridad de contenido es el principal método destinado a garantizar que sólo se ejecute código confiable en una página web.
Un problema de seguridad común relacionado con JavaScript es el cross-site scripting (XSS), una violación de la política del mismo origen . Las vulnerabilidades XSS ocurren cuando un atacante puede hacer que un sitio web de destino, como un sitio web de banca en línea, incluya un script malicioso en la página web que se muestra a una víctima. El script en este ejemplo puede entonces acceder a la aplicación bancaria con los privilegios de la víctima, lo que potencialmente puede revelar información secreta o transferir dinero sin la autorización de la víctima. Una solución importante para las vulnerabilidades XSS es la desinfección de HTML .
Algunos navegadores incluyen protección parcial contra ataques XSS reflejados , en los que el atacante proporciona una URL que incluye un script malicioso. Sin embargo, incluso los usuarios de esos navegadores son vulnerables a otros ataques XSS, como aquellos en los que el código malicioso se almacena en una base de datos. Solo un diseño correcto de las aplicaciones web en el lado del servidor puede prevenir por completo los ataques XSS.
Las vulnerabilidades XSS también pueden ocurrir debido a errores de implementación por parte de los autores del navegador. [87]
Otra vulnerabilidad entre sitios es la falsificación de solicitudes entre sitios (CSRF, por sus siglas en inglés). En la CSRF, el código del sitio de un atacante engaña al navegador de la víctima para que realice acciones que el usuario no tenía previstas en el sitio de destino (como transferir dinero a un banco). Cuando los sitios de destino dependen únicamente de las cookies para la autenticación de solicitudes, las solicitudes que se originan en el código del sitio del atacante pueden llevar las mismas credenciales de inicio de sesión válidas del usuario que las inicia. En general, la solución a la CSRF es exigir un valor de autenticación en un campo de formulario oculto, y no solo en las cookies, para autenticar cualquier solicitud que pueda tener efectos duraderos. También puede resultar de ayuda comprobar el encabezado HTTP Referrer.
El "secuestro de JavaScript" es un tipo de ataque CSRF en el que una <script>
etiqueta del sitio de un atacante explota una página del sitio de la víctima que devuelve información privada, como JSON o JavaScript. Las posibles soluciones incluyen:
Los desarrolladores de aplicaciones cliente-servidor deben reconocer que los clientes no confiables pueden estar bajo el control de atacantes. El autor de la aplicación no puede asumir que su código JavaScript se ejecutará como se espera (o que no se ejecutará en absoluto) porque cualquier secreto incluido en el código podría ser extraído por un adversario determinado. Algunas implicaciones son:
Los sistemas de gestión de paquetes como npm y Bower son populares entre los desarrolladores de JavaScript. Dichos sistemas permiten a un desarrollador gestionar fácilmente las dependencias de su programa con respecto a las bibliotecas de otros desarrolladores. Los desarrolladores confían en que los encargados del mantenimiento de las bibliotecas las mantendrán seguras y actualizadas, pero ese no siempre es el caso. Una vulnerabilidad ha surgido debido a esta confianza ciega. Las bibliotecas en las que se confía pueden tener nuevas versiones que provoquen la aparición de errores o vulnerabilidades en todos los programas que dependen de ellas. A la inversa, una biblioteca puede quedar sin parches y tener vulnerabilidades conocidas circulando por el mundo. En un estudio realizado en una muestra de 133.000 sitios web, los investigadores descubrieron que el 37% de los sitios web incluían una biblioteca con al menos una vulnerabilidad conocida. [90] "El retraso medio entre la versión más antigua de la biblioteca utilizada en cada sitio web y la versión más nueva disponible de esa biblioteca es de 1.177 días en ALEXA, y el desarrollo de algunas bibliotecas que todavía están en uso activo cesó hace años". [90] Otra posibilidad es que el encargado del mantenimiento de una biblioteca pueda eliminarla por completo. Esto ocurrió en marzo de 2016, cuando Azer Koçulu eliminó su repositorio de npm. Esto provocó que decenas de miles de programas y sitios web que dependían de sus bibliotecas dejaran de funcionar. [91] [92]
JavaScript proporciona una interfaz para una amplia gama de funciones del navegador, algunas de las cuales pueden tener fallas como desbordamientos de búfer . Estas fallas pueden permitir a los atacantes escribir scripts que ejecutarían cualquier código que deseen en el sistema del usuario. Este código no está limitado de ninguna manera a otra aplicación de JavaScript. Por ejemplo, un exploit de desbordamiento de búfer puede permitir a un atacante obtener acceso a la API del sistema operativo con privilegios de superusuario.
Estas fallas han afectado a los principales navegadores, incluidos Firefox, [93] Internet Explorer, [94] y Safari. [95]
Los complementos, como reproductores de vídeo, Adobe Flash y la amplia gama de controles ActiveX habilitados de forma predeterminada en Microsoft Internet Explorer, también pueden tener fallas que se pueden explotar a través de JavaScript (tales fallas se han explotado en el pasado). [96] [97]
En Windows Vista, Microsoft ha intentado contener los riesgos de errores como desbordamientos de búfer ejecutando el proceso de Internet Explorer con privilegios limitados. [98] De manera similar, Google Chrome limita sus renderizadores de páginas a su propia " caja de arena ".
Los navegadores web pueden ejecutar JavaScript fuera del entorno protegido, con los privilegios necesarios para, por ejemplo, crear o eliminar archivos. Dichos privilegios no están destinados a otorgarse al código de la Web.
La concesión incorrecta de privilegios a JavaScript desde la Web ha jugado un papel en las vulnerabilidades tanto de Internet Explorer [99] como de Firefox. [100] En Windows XP Service Pack 2, Microsoft degradó los privilegios de JScript en Internet Explorer. [101]
Microsoft Windows permite que los archivos fuente de JavaScript en el disco duro de una computadora se ejecuten como programas de propósito general, no aislados (consulte: Windows Script Host ). Esto hace que JavaScript (como VBScript ) sea un vector teóricamente viable para un caballo de Troya , aunque los caballos de Troya de JavaScript son poco comunes en la práctica. [102] [ verificación fallida ]
En 2015, investigadores de seguridad describieron en un artículo una implementación de prueba de concepto basada en JavaScript de un ataque Rowhammer . [103] [104] [105] [106]
En 2017, se demostró un ataque basado en JavaScript a través del navegador que podía eludir ASLR . Se llama "ASLR⊕Cache" o AnC. [107] [108]
En 2018, el artículo que anunció los ataques Spectre contra la ejecución especulativa en Intel y otros procesadores incluyó una implementación de JavaScript. [109]
Han evolucionado herramientas importantes con el lenguaje.
Un error muy común es pensar que JavaScript está directamente relacionado con Java . De hecho, ambos tienen una sintaxis similar a la de C (el lenguaje C es su antecesor común más inmediato). También suelen estar aislados , y JavaScript se diseñó teniendo en cuenta la sintaxis y la biblioteca estándar de Java. En particular, todas las palabras clave de Java estaban reservadas en el JavaScript original, la biblioteca estándar de JavaScript sigue las convenciones de nombres de Java y los objetos Math
y de JavaScript Date
se basan en clases de Java 1.0. [112]
Ambos lenguajes aparecieron por primera vez en 1995, pero Java fue desarrollado por James Gosling de Sun Microsystems y JavaScript por Brendan Eich de Netscape Communications.
Las diferencias entre los dos lenguajes son más notorias que sus similitudes. Java tiene tipado estático , mientras que el de JavaScript es dinámico . Java se carga desde el bytecode compilado , mientras que JavaScript se carga como código fuente legible por humanos. Los objetos de Java están basados en clases , mientras que los de JavaScript están basados en prototipos . Por último, Java no admitió programación funcional hasta Java 8, mientras que JavaScript lo ha hecho desde el principio, influenciado por Scheme .
JSON es un formato de datos derivado de JavaScript, de ahí el nombre de notación de objetos JavaScript. Es un formato ampliamente utilizado y compatible con muchos otros lenguajes de programación.
Muchos sitios web utilizan mucho JavaScript, por lo que se han creado transpiladores para convertir el código escrito en otros lenguajes, lo que puede ayudar en el proceso de desarrollo. [36]
TypeScript y CoffeeScript son dos lenguajes notables que se transpilan a JavaScript.
WebAssembly es un lenguaje más nuevo con un formato de código de bytes diseñado para complementar a JavaScript, especialmente las partes críticas para el rendimiento de los scripts de páginas web . Todos los principales motores de JavaScript admiten WebAssembly, [113] que se ejecuta en el mismo entorno de pruebas que el código JavaScript normal.
asm.js es un subconjunto de JavaScript que sirvió como precursor de WebAssembly. [114]
Eich: La preocupación inmediata en Netscape era que debía parecerse a Java.
Eich: "función", ocho letras, me influyó AWK.
{{cite web}}
: CS1 maint: unfit URL (link)[D]esde la introducción en 1996 de la versión 1.0 de JScript... hemos visto un aumento constante en el uso de JScript en el servidor, particularmente en Active Server Pages (ASP)