JavaScript

De Wikipedia, la enciclopedia libre

JavaScript es un lenguaje interpretado, es decir, que no requiere compilación, utilizado principalmente en páginas web, con una sintaxis semejante a la del lenguaje Java y el lenguaje C.

Al contrario que Java, JavaScript no es un lenguaje orientado a objetos propiamente dicho, ya que no dispone de Herencia, es más bien un lenguaje basado en prototipos, ya que las nuevas clases se generan clonando las clases base (prototipos) y extendiendo su funcionalidad.

Los navegadores más populares interpretan el código JavaScript integrado dentro de las páginas web. Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del DOM.

El lenguaje fue inventado por Brendan Eich en la empresa Netscape Communications, que es la que fabricó los primeros navegadores web comerciales. Apareció por primera vez en el producto de Netscape llamado Netscape Navigator 2.0.

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

Los autores inicialmente lo llamaron Mocha y más tarde LiveScript pero fue rebautizado como JavaScript en un anuncio conjunto entre Sun Microsystems y Netscape, el 4 de diciembre de 1995.

En 1997 los autores propusieron JavaScript para que fuera adoptado como estándar de la the European Computer Manufacturers' Association ECMA, que a pesar de su nombre no es europeo sino internacional, con sede en Ginebra. En junio de 1997 fue adoptado como un estándar ECMA, con el nombre de ECMAScript. Poco después también lo fue como un estándar ISO.

JScript es la implementación de ECMAScript de Microsoft, muy similar al JavaScript de Netscape, pero con ciertas diferencias en el modelo de objetos del navegador que hacen a ambas versiones con frecuencia incompatibles.

Para evitar estas incompatibilidades, el World Wide Web Consortium diseñó el estándar Document Object Model (DOM, ó Modelo de Objetos del Documento en castellano), que incorporan Konqueror, las versiones 6 de Internet Explorer y Netscape Navigator, Opera versión 7, y Mozilla desde su primera versión.

[editar] Dónde y cómo incluir JavaScript en un navegador

Javascript se puede incluir en cualquier documento HTML, o todo aquel que termine traduciéndose en HTML en el navegador del cliente; ya sea PHP, ASP, SVG...

El código va inscrito dentro de los elementos HTML <script> y </script>:

    <script type="text/javascript">
       // código JavaScript
    </script>

Muchos incluyen comentarios HTML para que navegadores antiguos no interpreten el código JavaScript, sin embargo ningún navegador existente hoy en día necesita esta práctica.

Para incluir un archivo externo, bastará con escribir:

    <script type="text/javascript" src="[URL]"></script>

Siendo [URL] el url relativo o absoluto apuntando a un archivo con código JavaScript.

[editar] Sintaxis del Lenguaje

[editar] Notas previas

[editar] Case sensitive

JavaScript es case sensitive, o lo que es lo mismo, diferencia mayúsculas y minúsculas. Es diferente, por tanto, una variable llamada Foo de otra llamada foo.

[editar] Comentarios

La sintaxis de los comentarios es la misma de C++, comentarios de bloque delimitados por «/*» y «*/», y comentarios de línea delimitados por «//» y el fin de línea.

[editar] Elementos

[editar] Variables

Son espacios de memoria dentro del navegador del cliente a los que se les asigna un nombre de acceso para todo el programa se pueden eliminar con el operador delete. Únicamente se pueden borrar las variables declaradas implícitamente (sin el operador var delante). Están asociados a un valor, un objeto o a una función. Hay varios tipos de variables: string, number, object, function, array, boolean...

[editar] Operadores

Existen de varios tipos: asignación, aritméticos, lógicos y especiales.

[editar] Operador de asignación

El operador de asignación en el lenguaje JavaScript es el símbolo igual, =.

[editar] Operadores aritméticos

Los aritméticos son los matemáticos: suma(+), resta(-), multiplicación(*), división(/), y resto de división o módulo (%). El operador + también puede ser utilizado para concatenar strings. Su utilización puede ser:

   variable = valor operador valor;
   variable operador= valor;

En el primer caso asignamos a la variable variable el resultado de la operación; y en el segundo caso se aplica la operación directamente a la variable variable modificando su valor primitivo, equivaldría a:

   variable = variable operador valor;

También existen los aritméticos unitarios que no necesitan de otro valor para actuar a una variable como los aritméticos normales. Son ++, -- y -. ++ Conseguirá sumar una unidad a la variable a la que acompaña. -- Conseguirá el efecto inverso, restará una unidad a la variable que acompaña. - Es el operador unitario negativo, cambiará el signo de la variable a la que acompaña.

Aviso sobre los operadores aritméticos unitarios ++ y --: Un ++ antes de una variable aumentará su valor en una unidad y su aplicación será con el nuevo valor, una unidad aumentada pues. Un ++ después de la variable aumentará el valor de la variable después de su aplicación, es decir, se aplicará con el valor antiguo y después se agregará una unidad. Lo mismo ocurre con --. Ejemplo:

   x=10;
   y=x++;

Otorgará un valor inicial a la variable x de 10 y a la y de 10. Pero después a x se le suma una unidad, luego x tendrá el valor 11 al terminar la ejecución. Ejemplo2:

   x=10;
   y=++x;

Aquí a x le otorgamos el valor 10, después le sumamos una unidad y se lo asignamos a y, por lo que las dos variables valdrán 11.

[editar] Operadores relacionales

Los relacionales son los que comparan los valores de las variables unos con otros. Devuelven un true o un false dependiendo si son verdaderos o falsos. Son

• > Mayor que
• >= Mayor o igual
• < Menor que
• <= Menor o igual
• == Igual que (mismo valor sin ser obligatoriamente mismo tipo)
• === Estrictamente igual que (mismo valor y mismo tipo de variable)
• != Distinto que

[editar] Operadores lógicos y de valoración

Éstos agrupan conjuntos de expresiones. Son los siguientes:

• AND && AND valoración
• OR || OR valoración
• XOR ^ OR exclusivo (o uno, o lo otro, pero no los dos a la vez)
• NOT ! Negación

Existen también operadores de asignación combinados con operadores lógicos (&=, |=, ^=).

Además de los operadores de valoración, también existen operadores que trabajan a nivel de bits:

• & AND
• | OR
• ^ XOR
• ~ Complemento a uno
• >> Shift a la derecha
• << Shift a la izquierda
• >>> Shift a la derecha rellenando los ceros

El operador AND bit a bit se puede concebir como un modo para cancelar un bit llevándolo a 0. El operador OR bit a bit es el contrario de AND y puede utilizarse para impostar en 1 un bit, mientras que el operador XOR puede utilizarse para impostar en 1 un bit si los bit comparados son distintos.

Los operadores de shift corren todos los bit de una variable hacia la derecha o hacia la izquierda un número determinado de posiciones y los nuevos bit que se crean se impostan en 1, mientras que los bit que salen se pierden (excepto los del signo).

Las operaciones de shift son útiles para descifrar el input de un dispositivo externo, como un conversor analógico/digital, y permiten realizar operaciones rapidísimas entre enteros en cuanto el hecho de correrse a la derecha divide un número por dos, mientras que correrse a la izquierda lo multiplica también por dos.

El operador de complemento a uno, por su parte, invierte el estado de los bit, por lo que todos los 1 se cambiarán en 0, y viceversa. Naturalmente, dos operaciones de complemento en el mismo número producen como resultado el número original.

[editar] Operadores especiales

1) Operador condicional (?:)

El operador condicional es el único operador de JavaScript que tiene tres operandos. La expresión toma un valor u otro dependiendo de la condición:

   condición ? valor_true : valor_false

Ejemplo:

   var estado = (edad>=18) ? "adulto" : "menor";

2) Operador coma (,)

Sirve para concatenar expresiones. Es útil en bucles for. Ejemplo:

   for(var a=0, b=1; (a*b<100) || (a>14); a++, b*=2) {
      document.write(a+" * "+b+" = "+(a*b)+" <br />");
   }

3) Operador delete

Borra un objeto, una propiedad de un objeto, o un elemento de un array dado su indice. La sintaxis es:

   delete objeto
   delete objeto.propiedad
   delete tabla[indice]

El operador delete no se puede usar con las variables declaradas explícitamente con la sentencia var. Si el delete tiene éxito devolverá un true, y además cambiará el valor de lo que estemos utilizando a undefined.

Para eliminar un elemento de un array, se puede usar delete miArray[2]; El objeto pasará a no tener valor, y el programa lo tratará como undefined, tal y como si utilizamos una elemento de un array más alto que la propia longitud del array. Para entregarle explícitamente el valor undefined debemos otorgárselo con la palabra reservada:

   miArray[2]=undefined;

4) Operador in

El operador in devuelve true si la propiedad esta especificada en el objeto indicado:

   propiedad in objeto;

También puede comprobar si un índice de un array está dentro de los valores posibles del array (entre 0 y array.length-1, a no ser que la hayamos eliminado con el operador delete).

5) Operador instanceof

Este operador devuelve true si el objeto indicado es una instancia de la clase que se especifica:

   objeto instanceof clase;

Siendo la clase un tipo de objeto, como Date, Array o un objeto creado por nosotros mismos.

6) Operador new

new se utiliza para crear nuevas instancias de objetos, ya sea de los predefinidos o de los creados por nosotros.

   variable=new objeto(param1, param2...);

7) Operador this

El operador this se utiliza más que nada dentro de la definición de un objeto para referirse a una instancia de un objeto. Sirve para declarar propiedades y métodos del propio objeto que estarán disponibles a través de la instancia.

8) Operador typeof

Se puede usar de las siguientes maneras

   typeof variable;
   typeof (variable);

Devuelve un string con el tipo de variable que resulte ser: function, string, object, boolean...

9) Operador void Puede verse en enlaces sobre todo. La expresión que le acompaña es evaluada, pero no devuelve ningún valor. Por ejemplo:

   <a href="javascript:void(0)">Pulsa aquí para no hacer nada</a>

Al pulsar en el enlace veremos que no resulta ninguna acción. Sin embargo:

   <a href="javascript:void(document.form.submit())">Pulsa aquí para enviar</a>

Ejecuta la orden de submit() enviando el formulario a donde hubiere de enviarlo. La expresión es evaluada pero no cargada en lugar del documento actual.

[editar] Objetos

Aunque veremos como crear nuestros propios objetos, javaScript contiene una lista de tipos predefinidos de objetos:

• Array
• Boolean
• Date
• Function
• Image
• Number
• Object
• Option
• RegExp
• String

[editar] El objeto Array

El objeto Array se refiere a una lista de datos, sean del tipo que sean. Es útil para guardar un conjunto de datos ordenados que tienen relación entre sí. Hay varias maneras de crearlos, y de asignar valor a sus índices. Además se pueden anidar creando estructuras de árbol complejas.

Para crear arrays se puede hacer de estas maneras:

   nombre_array=new Array(longitud);
   nombre_array=new Array(elemento1, elemento2,..., elementok);
   nombre_array=[];
   nombre_array=[ elemento1, elemento2,..., elementok ];

Para acceder a un elemento del array podemos hacerlo así:

   alert( nombre_array [ índice ] );

Donde índice será el número de elemento al que queramos acceder. Hay que tener en cuenta de que los elementos empiezan a contarse desde cero, es decir, el primer elemento es nombre_array[0], el segundo nombre_array[1] y así sucesivamente.

Los arrays no tienen porqué ser de un sólo tipo; un array con muchos valores de diferentes tipos sería igualmente válido:

   miArray=new Array("Hola","esto es", "un","array",3.1416, cont);

Además un array puede almacenar muchos elementos. Si creamos un elemento en el puesto 87 se crearán automaticamente todos los valores anteriores que no estén definidos con un valor vacío. Se puede extender todo lo que se quiera, pero no se puede empequeñecer ni con el delete, así que hay que procurar hacerlos compactos para ahorrar memoria.

1) Cómo anidar arrays

Un array puede estar contenido dentro de otro array, es decir, puede ser un elemento de otro array ajeno sin ningún problema:

   var array1=new Array("a","b","c","d");
   var array2=new Array("plátano","pera","manzana","fresa");
   array1[4]=array2;

El elemento 4 de array1 es otro array. Para acceder al elemento "pera" haremos:

   array2[1];
   array1[4][1];

Las dos opciones son válidas.

2) Propiedades de los arrays

• length

Los arrays tienen como propiedad principal el length.

   miArray.length;

La propiedad length de un array devuelve un entero con el número de elementos que contiene el array. Nótese que el número de elementos es el índice del último elemento más una unidad, y no el índice del último elemento.

• prototype

La propiedad prototype la tienen muchos objetos en javascript. Sirve para crear métodos y propiedades de los arrays genéricamente. Por si el lenguaje se nos queda corto. Podríamos implementar un método inexistente y propio para, por ejemplo, alertar el contenido de un array:

   var array1=new Array("a","b","c","d");
   var array2=new Array("plátano","pera","manzana","fresa");
   array1[4]=array2;
   

   Array.prototype.alertar=function() {
       alert(this.toString());
   }
   

   array1.alertar();
   array2.alertar();

Así, genéricamente, todos los objetos Array de nuestro script estarían dotados del método alertar().

3) Métodos de los arrays

• join(elemento_enlace): Este método devuelve un string resultado de la unión de todos los elementos del array intercalando entre ellos el string elemento_enlace.

   var miArray=new Array("plátano","pera","manzana","fresa");
   document.write( miArray.join(" y ") );        //platano y pera y manzana y fresa 

• toString(): Devuelve un string de todos los elementos separados por comas. Es equivalente a un join(","), sólo que todos los objetos en javascript tienen un método toString() asociado.

   var miArray=new Array("plátano","pera","manzana","fresa");
   var str=miArray.toString();    //platano,pera, manzana, fresa

• pop(): Elimina el último elemento del array y devuelve ese elemento. Este método modifica la longitud total del array, así que hay que tener precaución con él en bucles o iteraciones.

   var miArray=new Array("plátano","pera","manzana","fresa");
   var long1=miArray.length;        // long1=4
   var ultimo=miArray.pop();        // ultimo="fresa"
   var long2=miArray.length;        // long2=3

• shift(): Es como el pop(), sólo que en vez de actuar en el último elemento actúa en el primero, devolviendo este elemento. Obviamente también modifica la longitud del array en cuestión.

   var miArray=new Array("plátano","pera","manzana","fresa");
   var long1=miArray.length;        // long1=4
   var primero=miArray.shift();    // primero="plátano"
   var long2=miArray.length;        // long2=3

• push(elemento1, elemento2,..., elementok): El método push añade los elementos pasados por parámetro al final del array, y, por tanto, modificando su longitud total. Devuelve el total de elementos que resultan después de añadir, como si de un length hiciéramos después.

   var miArray=new Array("plátano","pera","manzana","fresa");
   var long1=miArray.length;        // long1=4
   var nuevaLong=miArray.push("sandia","melon","kiwi");    //nuevaLong=7
   var long2=miArray.length;        // long2=7

• unshift(elemento1, elemento2,..., elementok): Igual que el push, sólo que añade los elementos especificados al principio del array, y devuelve la nueva longitud del array.

   var miArray=new Array("plátano","pera","manzana","fresa");
   var long1=miArray.length;        // long1=4
   var nuevaLong=miArray.unshift("sandia","melon","kiwi");    //nuevaLong=7
   var long2=miArray.length;        // long2=7

• reverse(): Invierte los índices de los elementos del array. El primero será el último y el último el primero; el segundo será el penúltimo y el penúltimo será el segundo; y así sucesivamente.

   var miArray=new Array("plátano","pera","manzana","fresa");
   var miArrayAlReves=miArray.reverse();    // miArrayAlReves=["fresa","manzana","pera","plátano"]; 

• slice(limite_inf, limite_sup): slice extrae (sin modificarlo) una porción del array original. Así limite_inf es el índice del primer elemento que se debe extraer y limite_sup es el índice del último elemento que se debe extraer más una unidad.

   var miArray=new Array("plátano","pera","manzana","fresa","uva","sandia","melon","kiwi");
   var miArray2=miArray.slice(2,5);        //manzana,fresa, uva

• splice(indice_inicial, num_elementos[, elemento1, elemento2,..., elementok]): Este es probablemente el método más complejo de los arrays. Es capaz de eliminar elementos y de añadir nuevos elementos también. Modificará por lo general la longitud del array (a no ser que añadamos el mismo número de elementos que eliminemos).
  • indice_inicial: Es un número entero que indica a partir de qué elemento comenzamos o a borrar o a insertar elementos en el array.
  • num_elementos: Es un número que indica cuántos elementos del array eliminamos a partir de indice_inicial. Si es un 0 debemos especificar nuevos elementos obligatoriamente y splice no devuelve nada. Si es 1 splice devolverá ese elemento eliminado, y si es mayor de 1 splice devolverá un array con los elementos eliminados.
  • elemento1, elemento2,..., elementok: Son los parámetros (opcionales) que especifican los nuevos elementos del array que se añadirán en la posición indice_inicial.

   var miArray=new Array("plátano","pera","manzana","fresa","uva","sandia","melon","kiwi");
   
   miArray.splice(0,0,"naranja","mandarina","pomelo");
   //miArray=naranja, mandarina, pomelo, plátano, pera, manzana, fresa, uva, sandia, melon, kiwi
   
   var elementoPera=miArray.splice(4,1);        // elementoPera=pera
   //miArray=naranja, mandarina, pomelo, plátano, manzana, fresa, uva, sandia, melon, kiwi 
   
   var fresa_uva_sandia=miArray.splice(5,3);    // fresa_uva_sandia=fresa, uva, sandia 
   //miArray=naranja, mandarina, pomelo, plátano, manzana, melon, kiwi 
   
   miArray.splice(2,3,"lenguado","merluza","sardina","caballa");
   //miArray=naranja, mandarina, lenguado, merluza, sardina, caballa, melon, kiwi 

• sort([funcion_comparacion]): Uno de los pocos métodos por defecto que recibe una función como parámetro. Ordena el array según el criterio que contenga funcion_comparacion. Podemos ordenar de menor a mayor números, alfabéticamente letras... etc. El parámetro es opcional; por defecto sort() ordena de menor a mayor y alfabéticamente, anteponiendo los números a las letras y las mayúsculsa.
  • funcion_comparacion: Es una función que contiene como parámetros obligados dos, que serán los elementos del array a comparar. Según lo que devuelva esta función, sort interpretara una cosa u otra:
    • funcion_comparacion(a, b)<0 --> a<b
    • funcion_comparacion(a, b)=0 --> a=b
    • funcion_comparacion(a, b)>0 --> a>b

Para ordenar elementos existen otros algoritmos, algunos más legibles otros más eficaces: El Ordenamiento por mezcla, Ordenamiento de burbuja, Ordenación Shell Sort y el Ordenación Quicksort son algunos de ellos.

[editar] El objeto Boolean

El objeto Boolean tiene dos valores posibles, true o false. Estos valores se pueden operar con los Operadores de relación.

Nos sirven para comprender las expresiones que se evalúan como boleanas, como las que puede haber entre los paréntesis de un if o de un while... Al fin y al cabo una expresión boleana.

Siempre podemos crear una expresión boleana y asignársela a una variable con el constructor:

   var a = new Boolean(expresión);

Donde expresión determinara un valor true o false para la variable a.

Toda expresión que sea una variable vacía, un string vacío, un null, un undefined, un número igual a 0, una referencia a un objeto del documento que no exista... etc darán como resultado un boleano false. En caso contrario, un string, un número darán resultado true.

   //Valores que dan a la variable a un valor false
   a = new Boolean();         
   a = new Boolean(0);     
   a = new Boolean("");     
   a = new Boolean(document.getElementById("no_existo"));
   a = new Boolean(undefined);    
   a = new Boolean(null);    
   a = new Boolean(false);    
   

   //Valores que dan a la variable a un valor true
   a = new Boolean(document.getElementById("existo"));
   a = new Boolean(-4);
   a = new Boolean(true);

[editar] El objeto Date

El objeto Date almacena una fecha de la que es posible extraer datos concretos. Incluso existen funciones creadas por desarrolladores para operar con fechas, ya que predeterminadamente JavaScript no las implementa, al contrario que PHP.

[editar] El objeto Function

El objeto Function se refiere a un "subprograma" dentro del propio script. Es un conjunto de sentencias que se utilizan básicamente para reutilizar código.

[editar] El objeto Image

El objeto Image contiene una imagen.

[editar] El objeto Number

El objeto Number se refiere a una variable numérica.

[editar] El objeto Object

El Object de por sí es un objeto creado por nosotros, o un objeto diferente pudiendo ser este un objeto del DOM.

[editar] El objeto Option

Option se refiere a un elemento HTML que se incluye dentro de los <SELECT>. Es una opción en una lista desplegable. Podremos crear instancias del objeto option y añadirlas a un <SELECT> del documento gracias al DOM.

[editar] El objeto RegExp

El objeto RegExp es una Expresión regular. Su sintaxis es universal, se explaya extensamente en dicho artículo.

[editar] El objeto String

El objeto String es una cadena de caracteres. En JavaScript no existe el tipo Char, por lo que un solo caracter será del tipo String.

[editar] Estructuras de Control

[editar] if...else...

If es una sentencia de control que permite a JavaScript hacer decisiones, esto quiere decir que ejecutará sentencias condicionalmente. Sintaxis:

  if (condición) {
     expresión_1;
  }else {
     expresión_2;
  }

La condición es evaluada y si el resultado es verdadero, la expresión_1 se ejecuta. Si el resultado de la condición_1 es falso, la expresión_1 no se ejecuta y ejecuta la expresión_2.

[editar] Bucle While

  while (condición) {
     sentencias
  }

Mientras la condición sea cierta se ejecutan las sentencias.

[editar] do...while...

  do {
     sentencias
  } while (condición);

Se ejecuta siempre la primera vez las sentencias y luego se vuelven a ejecutar una o más veces según la condición sea cierta o no.

[editar] Bucle for

  for ([variables iniciales]; [condición de repetición]; [expresión de modificación]) {
     sentencias
  }

Primero se ejecuta [variables iniciales], una lista de variables (o una sola) separadas por comas con sus valores correspondientes. Después si la [condición de repetición] es verdadera se ejecuta sentencias, y después se evalúa [expresión de modificación], la cual suele variar el valor de una de las variables definidas en [variables iniciales]. Se repite el bucle verificación de [condición de repetición], ejecución de sentencias y [expresión de modificación] indefinidamente hasta que [condición de repetición] sea falsa.

[editar] Bucle for...in

  for (variable in objeto) {
     sentencias
  }

Para cada uno de los valores del objeto se ejecutan las sentencias. Útil para recorrer arrays.

[editar] Declaración switch

  switch( expresión ){
     case valorX :
        sentencias;
        break;
     case valorX :
        sentencias;
        break;
     default : 
        sentencias;
        break;
  }

En expresión se da una variable o una condición y en cada case se escribe en valorX el valor que puede tomar esa variable o expresión. En caso de coincidir con algún valorX se ejecuta sentencias dentro de ese case hasta topar con un break. Si no coincide con ningún valor la expresión se ejecuta el código en la sección default.

[editar] Enlaces externos

Wikilibros

• Wikilibros contiene el libro titulado «Programación en JavaScript»

• Trucos JavaScripten español
• referencia de JavaScript, de Sun (en inglés)
• Mozilla Developer Center (en español)
• Mozilla Developer Center (en inglés)