Emilio Orts López

HOME -> MÁS INFORMACIÓN -> PROGRAMACIÓN -> JAVASCRIPT

JAVASCRIPT

JavaScript

JavaScript (abreviado comúnmente "JS") es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.

Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo.

JavaScript se diseñó con una sintaxis similar al C, aunque adopta nombres y convenciones del lenguaje de programación Java. Sin embargo Java y JavaScript no están relacionados y tienen semánticas y propósitos diferentes.

Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas web. Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del Document Object Model (DOM).

Tradicionalmente se venía utilizando en páginas web HTML para realizar operaciones y únicamente en el marco de la aplicación cliente, sin acceso a funciones del servidor. JavaScript se interpreta en el agente de usuario, al mismo tiempo que las sentencias van descargándose junto con el código HTML.

Una cuarta edición está en desarrollo e incluirá nuevas características tales como paquetes, espacio de nombres y definición explícita de clases.

El uso más común de JavaScript es escribir funciones embebidas o incluidas en páginas HTML y que interactúan con el Document Object Model (DOM o Modelo de Objetos del Documento) de la página. Algunos ejemplos sencillos de este uso son:

  • Cargar nuevo contenido para la página o enviar datos al servidor a través de AJAX sin necesidad de recargar la página (por ejemplo, una red social puede permitir al usuario enviar actualizaciones de estado sin salir de la página).
  • Animación de los elementos de página, hacerlos desaparecer, cambiar su tamaño, moverlos, etc.
  • Contenido interactivo, por ejemplo, juegos y reproducción de audio y vídeo.
  • Validación de los valores de entrada de un formulario web para asegurarse de que son aceptables antes de ser enviado al servidor.
  • Transmisión de información sobre los hábitos de lectura de los usuarios y las actividades de navegación a varios sitios web. Las páginas Web con frecuencia lo hacen para hacer análisis web, seguimiento de anuncios, la personalización o para otros fines.

Dado que el código JavaScript puede ejecutarse localmente en el navegador del usuario (en lugar de en un servidor remoto), el navegador puede responder a las acciones del usuario con rapidez, haciendo una aplicación más sensible. Por otra parte, el código JavaScript puede detectar acciones de los usuarios que HTML por sí sola no puede, como pulsaciones de teclado. Las aplicaciones como Gmail se aprovechan de esto: la mayor parte de la lógica de la interfaz de usuario está escrita en JavaScript, enviando peticiones al servidor (por ejemplo, el contenido de un mensaje de correo electrónico). La tendencia cada vez mayor por el uso de la programación Ajax explota de manera similar esta técnica.

Un motor de JavaScript (también conocido como intérprete de JavaScript o implementación JavaScript) es un intérprete que interpreta el código fuente de JavaScript y ejecuta la secuencia de comandos en consecuencia. El primer motor de JavaScript fue creado por Brendan Eich en Netscape Communications Corporation, para el navegador web Netscape Navigator. El motor, denominado SpiderMonkey, está implementado en C. Desde entonces, ha sido actualizado (en JavaScript 1.5) para cumplir con el ECMA-262 edición 3. El motor Rhino, creado principalmente por Norris Boyd (antes de Netscape, ahora en Google) es una implementación de JavaScript en Java. Rhino, como SpiderMonkey, es compatible con el ECMA-262 edición 3.

Un navegador web es, con mucho, el entorno de acogida más común para JavaScript. Los navegadores web suelen crear objetos no nativos, dependientes del entorno de ejecución, para representar el Document Object Model (DOM) en JavaScript. El servidor web es otro entorno común de servicios. Un servidor web JavaScript suele exponer sus propios objetos para representar objetos de petición y respuesta HTTP, que un programa JavaScript podría entonces interrogar y manipular para generar dinámicamente páginas web.

Debido a que JavaScript es el único lenguaje por el que los más populares navegadores comparten su apoyo, se ha convertido en un lenguaje al que muchos frameworks en otros lenguajes compilan, a pesar de que JavaScript no fue diseñado para tales propósitos. A pesar de las limitaciones de rendimiento inherentes a su naturaleza dinámica, el aumento de la velocidad de los motores de JavaScript ha hecho de este lenguaje un entorno para la compilación sorprendentemente factible.

A continuación se muestra un breve ejemplo de una página web (ajustadose a las normas del estándar para HTML5) que utiliza JavaScript para el manejo del DOM:

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Ejemplo sencillo</title>
            <h1 id="header">Esto es JavaScript</h1>
            <script>
                document.body.appendChild(document.createTextNode('Hola Mundo!'));
                var h1 = document.getElementById('header'); // contiene la referencia al tag <h1>
                h1 = document.getElementsByTagName('h1')[0]; // accediendo al mismo elemento <h1>
            </script> 
            <noscript>Tu navegador o no soporta JavaScript, o ha sido deshabilitado. </noscript>
        </head>
        <body>/*...*/</body>
    </html>

EJEMPLOS PRACTICOS

Ejemplos sencillos

Las variables en JavaScript se definen usando la palabra clave var:

var x; // define la variable x, aunque no tiene ningún valor asignado por defecto
var y = 2; // define la variable y y le asigna el valor 2 a ella

A considerar los comentarios en el ejemplo de arriba, los cuales van precedidos con 2 barras diagonales.

No existen funcionalidades para I/O incluidas en el lenguaje; el entorno de ejecución ya lo proporciona. La especificación ECMAScript en su edición 5.1 hace mención:

... en efecto, no existen provisiones en esta especificación para entrada de datos externos o salida para resultados computados.

Sin embargo, la mayoría de los entornos de ejecución tiene un objeto llamado consola que puede ser usado para imprimir por el flujo de salida de la consola de depuración. He aquí un simple programa que imprime “Hello world!”:

console.log("Hello world!");

Una función recursiva:

function factorial(n) {
if (n === 0) {
return 1;
}
return n * factorial(n - 1);
}

Ejemplos de función anónima (o función lambda) y una clausura:

var displayClosure = function() {
    var count = 0;
    return function () {
        return ++count;
    };
}
var inc = displayClosure();
inc(); // devuelve 1
inc(); // devuelve 2
inc(); // devuelve 3
                                

Las expresiones con invocación automática permiten a las funciones pasarle variables por parámetro dentro de sus propias clausuras.

var v;
v = 1;
var getValue = (function(v) {
  return function() {return v;};
}(v));

v = 2;

getValue(); // 1
                                

Ejemplos más avanzados

El siguiente código muestra varias características de JavaScript.

/* Busca el mínimo común múltiplo (MCM) de dos números */
function LCMCalculator(x, y) { // función constructora
    var checkInt = function (x) { // función interior
        if (x % 1 !== 0) {
            throw new TypeError(x + " no es un entero"); // lanza una excepción
        }
        return x;
    };
    this.a = checkInt(x) // puntos y coma son opcionales
    this.b = checkInt(y);
}
// El prototipo de las instancias de objeto creados por el constructor es el de la propiedad “prototype” del constructor.
LCMCalculator.prototype = { // objeto definido como literal 
    constructor: LCMCalculator, // cuando reasignamos un prototipo, establecemos correctamente su propiedad constructor
    gcd: function () { // método que calcula el máximo común divisor
        // Algoritmo de Euclides:
        var a = Math.abs(this.a), b = Math.abs(this.b), t;
        if (a < b) {
            // intercambiamos variables
            t = b;
            b = a;
            a = t;
        }
        while (b !== 0) {
            t = b;
            b = a % b;
            a = t;
        }
        // Solo necesitamos calcular el MCD una vez, por lo tanto 'redefinimos' este método. 
        // (Realmente no es una redefinición—está definida en la propia instancia, por lo tanto 
        // this.gcd se refiere a esta 'redefinición' en vez de a LCMCalculator.prototype.gcd). 
        // Además, 'gcd' === "gcd", this['gcd'] === this.gcd
        this['gcd'] = function () {
            return a;
        };
        return a;
    },
    // Los nombres de las propiedades del objeto pueden ser especificados con cadenas delimitadas con comillas simples (') o dobles (“).
    "lcm" : function () {
        // Los nombres de las variables no colisionan con las propiedades del objeto. Por ejemplo: |lcm| no es |this.lcm|.
        // No usar |this.a * this.b| para evitar problemas con cálculos en coma flotante.
        var lcm = this.a / this.gcd() * this.b;
        // Sólo necesitamos calcular MCM una vez, por lo tanto "redefinimos" este método.
        this.lcm = function () {
            return lcm;
        };
        return lcm;
    },
    toString: function () {
        return "LCMCalculator: a = " + this.a + ", b = " + this.b;
    }
};

// Definimos una función genérica para imprimir un resultado; esta implementación solo funciona en los navegadores web
function output(x) {
    document.body.appendChild(document.createTextNode(x));
    document.body.appendChild(document.createElement('br'));
}

// Nota: Los métodos .map() y .forEach() del prototipo Array están definidos en JavaScript 1.6.
// Estos métodos son usados aquí para demostrar la naturaleza funcional inherente del lenguaje.
[[25, 55], [21, 56], [22, 58], [28, 56]].map(function (pair) { // contrucción literal de un Array + función de mapeo.
    return new LCMCalculator(pair[0], pair[1]);
}).sort(function (a, b) { // ordenamos la colección por medio de esta función
    return a.lcm() - b.lcm();
}).forEach(function (obj) {
    output(obj + ", gcd = " + obj.gcd() + ", lcm = " + obj.lcm());
});
                                

El siguiente ejemplo muestra la salida que debería ser mostrada en la ventana de un navegador.

LCMCalculator: a = 28, b = 56, gcd = 28, lcm = 56
LCMCalculator: a = 21, b = 56, gcd = 7, lcm = 168
LCMCalculator: a = 25, b = 55, gcd = 5, lcm = 275
LCMCalculator: a = 22, b = 58, gcd = 2, lcm = 638
                                

2017 © eorts.com