JavaScript

JavaScript
Paradigma	Baseado en prototipos, Programación orientada a obxectos
Data	4 de decembro de 1995
Deseñador	Brendan Eich, Netscape Communications
Última versión	1.5
Tipo de dato	Débil, dinámico
Dialectos	JavaScript estándar e JScript (Javascript para IE)
Influído por	Java

JavaScript (JS) é unha linguaxe de programación interpretada, é dicir, que non require compilación, utilizado principalmente en páxinas web, cunha sintaxe semellante á da Linguaxe Java e o linguaxe C.

Ao contrario que Java, JavaScript non é unha linguaxe orientada a obxectos propiamente, xa que non dispón de herdanza, é máis ben unha linguaxe baseado en prototipos, xa que as novas clases xéranse clonando as clases base (prototipos) e estendendo a súa funcionalidade.

Todos os navegadores interpretan o código JavaScript integrado dentro das páxinas web. Para interactuar cunha páxina web provese á linguaxe JavaScript dunha implementación do DOM.

A linguaxe foi inventada por Brendan Eich na empresa Netscape Communications, que é a que fabricou os primeiros navegadores web comerciais. Apareceu por primeira vez no produto de Netscape chamado Netscape Navigator 2.0.

Tradicionalmente, víñase utilizando en páxinas web HTML para realizar tarefas e operacións no marco da aplicación unicamente cliente, sen acceso a funcións do servidor. JavaScript execútase no axente de usuario ao mesmo tempo que as sentenzas van descargándose xunto co código HTML.

Os autores inicialmente chamárono "Mocha" e máis tarde "LiveScript", pero foi rebautizado coma JavaScript nun anuncio conxunto entre Sun Microsystems e Netscape, o 4 de decembro de 1995.

En 1997 os autores propuxeron JavaScript para que fose adoptado como estándar da European Computer Manufacturers' Association (ECMA), que a pesar do seu nome non é europeo senón internacional, con sede en Xenebra. En xuño de 1997 foi adoptado como un estándar ECMA, co nome de ECMAScript. Pouco despois tamén o foi como un estándar ISO.

JScript é a implementación de ECMAScript de Microsoft, moi similar ao JavaScript de Netscape, pero con certas diferenzas no modelo de obxectos do navegador que fan que ambas versións sexan incompatibles en moitos puntos.

Para evitar estas incompatibilidades, o World Wide Web Consortium deseñou o estándar Document Object Model (DOM, ó Modelo de Obxectos do Documento en castelán), que incorporan Konqueror, as versións 6 de Internet Explorer e Netscape Navigator, Opera versión 7, e Mozilla Application Suite e Mozilla Firefox desde a súa primeira versión.

Onde e como incluír JavaScript nun documento

Javascript pódese incluír en calquera documento HTML, ou todo aquel que termine traducíndose en HTML no navegador do cliente; xa sexa PHP, ASP, SVG, etc.

O código vai inscrito dentro dos elementos HTML <script> e </script>:

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

Moitos inclúen comentarios HTML para que navegadores antigos non interpreten o código JavaScript, con todo ningún navegador existente hoxe en día necesita esta práctica.

Para incluír un arquivo externo, abondará escribir:

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

[URL] é o url relativo ou absoluto apuntando a un arquivo con código JavaScript.

Sintaxe da Linguaxe

Notas previas

Case sensitive

JavaScript é case sensitive, ou o que é o mesmo, diferenza entre maiúsculas e minúsculas. Xa que logo, unha variable chamada Foo é distinta a outra chamada foo.

Comentarios

A sintaxe dos comentarios é a mesma de C++, comentarios de bloque delimitados por «/*» e «*/», e comentarios de liña delimitados por «//» e o fin de liña.

Elementos

Variables

Son espazos de memoria dentro do navegador do cliente aos que se lles asigna un nome de acceso para todo o programa. Pódense eliminar co operador delete. Unicamente pódense borrar as variables declaradas implicitamente (sen o #operador\\\ var diante). Están asociados a un valor, un obxecto ou a unha función. Hai varios tipos de variables: string, number, object, function, array, boolean..

Operadores

Existen de varios tipos: asignación, aritméticos, lóxicos, especiais e alfanuméricos (este último fusiona numéricos e alfabéticos)

Operador de asignación

O operador de asignación na linguaxe JavaScript é o símbolo igual, =.

Operadores aritméticos

Os aritméticos son os matemáticos: suma(+), resta(-), multiplicación(*), división(/), e resto de división ou módulo (%). O operador + tamén pode ser utilizado para concatenar strings. A súa utilización pode ser:

   variable = valor #operador\\\ valor;
   variable #operador\\\= valor;

No primeiro caso asignamos á variable variable o resultado da operación; e no segundo caso aplícase a operación directamente á variable variable modificando o seu valor primitivo, equivalería a:

   variable = variable #operador\\\ valor;

Tamén existen os aritméticos unitarios que non necesitan doutro valor para actuar a unha variable como os aritméticos normais. Son ++, -- e -. ++ Conseguirá sumar unha unidade á variable á que acompaña. -- Conseguirá o efecto inverso, restará unha unidade á variable que acompaña. - É o operador unitario negativo, cambiará o signo da variable á que acompaña.

Advertencia sobre os #operador\\\ aritméticos unitarios ++ e --: Un ++ antes dunha variable aumentará o seu valor nunha unidade e a súa aplicación será con ese novo valor. Un ++ logo da variable aumentará o valor da variable logo da súa aplicación, é dicir, aplicarase co valor antigo e despois agregarase unha unidade. O mesmo ocorre con --. Exemplo:

   x=10;
   e=x++;

Outorgará un valor inicial á variable x de 10 e á e de 10. Pero despois a x súmaselle unha unidade, logo x terá o valor 11 ao terminar a execución. Exemplo2:

   x=10;
   e=++x;

Aquí a x outorgámoslle o valor 10, despois sumámoslle unha unidade e asignámosllo a e, polo que as dúas variables valerán 11.

Operadores relacionales

Os relacionales son os que comparan os valores das variables uns con outros. Devolven un true ou un false dependendo se son verdadeiros ou falsos. Son

• > Maior que
• >= Maior ou igual
• < Menor que
• <= Menor ou igual
• == Igual que (mesmo valor sen ser obrigatoriamente mesmo tipo)
• === Estritamente igual que (mesmo valor e mesmo tipo de variable)
• != Distinto que

Operadores lóxicos e de valoración

Estes agrupan conxuntos de expresións. Son os seguintes:

• (&&) AND valoración
• (||) OR valoración
• (@^)\ XOR: OR exclusivo (ou un, ou o outro, pero non os dous á vez)
• (!) NOT:Negación

Existen tamén #operador\\\ de asignación combinados con operadores lóxicos (&=, |=,=).

Ademais dos operadores de valoración, tamén existen #operador\\\ que traballan a nivel de bits:

• & AND
• | OR. XOR
• Complemento a un
• >> Shift á dereita
• << Shift á esquerda
• >>> Shift á dereita enchendo os ceros

O operador AND bit a bit pódese concibir como un modo para cancelar un bit levándoo a 0. O operador OR bit a bit é o contrario de AND e pode utilizarse para impostar en 1 un bit, mentres que o operador XOR pode utilizarse para impostar en 1 un bit se os bit comparados son distintos.

Os operadores de shift corren todos os bit dunha variable cara á dereita ou cara á esquerda un número determinado de posicións e os novos bit que se crean se impostan en 1, mentres que os bit que salguen pérdense (excepto os do signo).

As operacións de shift son útiles para descifrar o input dun dispositivo externo, como un conversor analóxico/dixital, e permiten realizar operacións rapidísimas entre enteiros en canto o feito de correrse á dereita divide un número por dous, mentres que correrse á esquerda multiplícao tamén por dous.

O operador de complemento a un, pola súa banda, inviste o estado dos bit, polo que todos os 1 cambiaranse en 0, e viceversa. Naturalmente, dúas operacións de complemento no mesmo número producen como resultado o número orixinal.

Operadores especiais

1) Operador condicional (?:)

O operador condicional é o único operador de JavaScript que ten tres operandos. A expresión toma un valor ou outro dependendo da condición:

   condición ? valor_true : valor_false

Exemplo:

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

2) #Operador\\\ coma (,)

Serve para concatenar expresións. É útil en bucles for. Exemplo:

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

3) #Operador\\\ delete

Borra un obxecto, unha propiedade dun obxecto, ou un elemento dun array dado o seu índice. A sintaxe é:

   delete obxecto
   delete obxecto.propiedade
   delete táboa[indice]

O #operador\\\ delete non se pode usar coas variables declaradas explicitamente coa sentenza var. Se o delete ten éxito devolverá un true, e ademais cambiará o valor do que esteamos utilizando a undefined.

Para eliminar un elemento dun array, pódese usar

   delete meuarray[2];

O obxecto pasará a non ter valor, e o programa tratarao como undefined, tal e como se utilizamos unha elemento dun array máis alto que a propia lonxitude do array. Para entregarlle explicitamente o valor undefined debemos outorgarllo coa palabra reservada:

   meuarray[2]=undefined;

4) #Operador\\\ in

O operador in devolve true se a propiedade esta especificada no obxecto indicado:

   propiedade in obxecto;

Tamén pode comprobar se un índice dun array está dentro dos valores posibles do array (entre 0 e array.length-1, a non ser que a eliminamos co operador delete).

5) #Operador\\\ instanceof

Este operador devolve true se o obxecto indicado é unha instancia da clase que se especifica:

   obxecto instanceof clase;

Sendo a clase un tipo de obxecto, como Dáche, Array ou un obxecto creado por nós mesmos.

6) #Operador\\\ new

new utilízase para crear novas instancias de obxectos, xa sexa dos predefinidos ou dos creados por nós.

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

7) #Operador\\\ this

O #operador\\\ this utilízase máis que nada dentro da definición dun obxecto para referirse a unha instancia dun obxecto. Serve para declarar propiedades e métodos do propio obxecto que estarán dispoñibles a través da instancia.

8) #Operador\\\ typeof

Pódese usar dos seguintes xeitos

   typeof variable;
   typeof (variable);

Devolve un string co tipo de variable que resulte ser: function, string, object, boolean...

9) #Operador\\\ void Pode verse en enlaces sobre todo. A expresión que lle acompaña é avaliada, pero non devolve ningún valor. Por exemplo:

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

Ao pulsar no enlace veremos que non resulta ningunha acción. Con todo:

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

Executa a orde de submit() enviando o formulario onde houber de envialo. A expresión é avaliada pero non cargada en lugar do documento actual.

Obxectos

Aínda que podemos crear os nosos propios obxectos, JavaScript contén unha lista de tipos predefinidos de obxectos:

• Array

• String

O obxecto Array

O obxecto Array refírese a unha lista de datos, sexan do tipo que sexan. É útil para gardar un conxunto de datos ordenados que teñen relación entre si. Hai varios xeitos de crealos, e de asignar valor aos seus índices. Ademais pódense aniñar creando estruturas de árbore complexas.

Para crear arrays pódese facer destes xeitos:

   nome_array=new Array(lonxitude);
   nome_array=new Array(elemento1, elemento2,..., elementok);
   nome_array=[];
   nome_array=[ elemento1, elemento2,..., elementok ];

Para acceder a un elemento do array podemos facelo así:

   alert( nome_array [ índice ] );

Onde índice será o número de elemento ao que queiramos acceder. Hai que ter en conta que os elementos empezan a contarse desde cero, é dicir, o primeiro elemento é nome_array[0], o segundo nome_array[1] e así sucesivamente.

Os arrays non teñen porqué ser dun só tipo; un array con moitos valores de diferentes tipos sería igualmente válido:

   meuarray=new Array("Ola","isto é", "un","array",3.1416, cont);

Ademais un array pode almacenar moitos elementos. Se creamos un elemento no posto 87 crearanse automaticamente todos os valores anteriores que non estean definidos cun valor baleiro. Pódese estender todo o que se queira, pero non se pode empequeñecer nin co delete, así que hai que procurar facelos compactos para aforrar memoria.

1) Como aniñar arrays

Un array pode estar contido dentro doutro array, é dicir, pode ser un elemento doutro array alleo sen ningún problema:

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

O elemento 4 de array1 é outro array. Para acceder ao elemento "pera" faremos:

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

As dúas opcións son válidas.

2) Propiedades dos arrays

• length

Os arrays teñen como propiedade principal o length.

   meuarray.length;

A propiedade length dun array devolve un enteiro co número de elementos que contén o array. Nótese que o número de elementos é o índice do último elemento máis unha unidade, e non o índice do último elemento.

• prototype

A propiedade prototype téñena moitos obxectos en JavaScript. Serve para crear métodos e propiedades dos arrays genéricamente. Por se a linguaxe quédallenos curto. Poderiamos implementar un método inexistente e propio para, por exemplo, alertar o contido dun array:

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

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

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

Así, genéricamente, todos os obxectos Array do noso script estarían dotados do método alertar().

3) Métodos dos arrays

• join(elemento_enlace): Este método devolve un string resultado da unión de todos os elementos do array intercalando entre eles o string elemento_enlace.

var meuarray=new Array("plátano","pera","mazá","amorodo");
document.write( meuarray.join(" e ") );        //plátano e pera e mazá e amorodo

• toString(): Devolve un string de todos os elementos separados por comas. É equivalente a un join(","), só que todos os obxectos en javascript teñen un método toString() asociado.

var meuarray=new Array("plátano","pera","mazá","amorodo");
var str=meuarray.toString();    //plátano, pera, mazá, amorodo

• pop(): Elimina o último elemento do array e devolve ese elemento. Este método modifica a lonxitude total do array, así que hai que ter precaución con el en bucles ou repeticións.

var meuarray=new Array("plátano","pera","mazá","amorodo");
var long1=meuarray.length;        // long1=4
var ultimo=meuarray.pop();        // ultimo="amorodo"
var long2=meuarray.length;        // long2=3

• shift(): É como o pop(), só que no canto de actuar no último elemento actúa no primeiro, devolvendo este elemento. Obviamente tamén modifica a lonxitude do array en cuestión.

var meuarray=new Array("plátano","pera","mazá","amorodo");
var long1=meuarray.length;        // long1=4
var primeiro=meuarray.shift();    // primeiro="plátano"
var long2=meuarray.length;        // long2=3

• push(elemento1, elemento2,..., elementok): O método push engade os elementos pasados por parámetro ao final do array, e, xa que logo, modificando a súa lonxitude total. Devolve o total de elementos que resultan logo de engadir, coma se dun length fixésemos despois.

var meuarray=new Array("plátano","pera","mazá","amorodo");
var long1=meuarray.length;        // long1=4
var nuevaLong=meuarray.push("sandía","melon","kiwi");    //nuevaLong=7
var long2=meuarray.length;        // long2=7

• unshift(elemento1, elemento2,..., elementok): Igual que o push, só que engade os elementos especificados ao principio do array, e devolve a nova lonxitude do array.

var meuarray=new Array("plátano","pera","mazá","amorodo");
var long1=meuarray.length;        // long1=4
var nuevaLong=meuarray.unshift("sandía","melón","kiwi");    //nuevaLong=7
var long2=meuarray.length;        // long2=7

• reverse(): Inviste os índices dos elementos do array. O primeiro será o último e o último o primeiro; o segundo será o penúltimo e o penúltimo será o segundo; e así sucesivamente.

var meuarray=new Array("plátano","pera","mazá","amorodo");
var meuarrayAlReves=meuarray.reverse();    // meuarrayAlReves=["amorodo","mazá","pera","plátano"];

• slice(limite_inf, limite_sup): slice extrae (sen modificalo) unha porción do array orixinal. Así limite_inf é o índice do primeiro elemento que se debe extraer e limite_sup é o índice do último elemento que se debe extraer máis unha unidade.

var meuarray=new Array("plátano","pera","mazá","amorodo","uva","sandía","melón","kiwi");
var meuarray2=meuarray.slice(2,5);        //mazá,fresa, uva

• splice(indice_inicial, num_elementos[, elemento1, elemento2,..., elementok]): Este é probablemente o método máis complexo dos arrays. É capaz de eliminar elementos e de engadir novos elementos tamén. Modificará polo xeral a lonxitude do array (a non ser que engadamos o mesmo número de elementos que eliminemos).
  • indice_inicial: É un número enteiro que indica a partir de que elemento comezamos ou a borrar ou a inserir elementos no array.
  • num_elementos: É un número que indica cantos elementos do array eliminamos a partir de indice_inicial. Se é un 0 debemos especificar novos elementos obrigatoriamente e splice non devolve nada. Se é 1 splice devolverá ese elemento eliminado, e se é maior de 1 splice devolverá un array cos elementos eliminados.
  • elemento1, elemento2,..., elementok: Son os parámetros (opcionais) que especifican os novos elementos do array que se engadirán na posición indice_inicial.

var meuarray=new Array("plátano","pera","mazá","amorodo","uva","sandía","melón","kiwi");

meuarray.splice(0,0,"laranxa","mandarina","pomelo");
// meuarray=laranxa, mandarina, pomelo, plátano, pera, mazá, fresa, uva, sandía, melon, kiwi

var elementoPera=meuarray.splice(4,1);        // elementoPera=pera
//meuarray=laranxa, mandarina, pomelo, plátano, mazá, fresa, uva, sandía, melon, kiwi

var fresa_uva_sandia=meuarray.splice(5,3);    // amorodo_uva_sandía=amorodo, uva, sandía
//meuarray=laranxa, mandarina, pomelo, plátano, mazá, melón, kiwi

meuarray.splice(2,3,"linguado","pescada","sardiña","xarda");
//meuarray=laranxa, mandarina, linguado, pescada, sardiña, xarda, melón, kiwi

• sort([funcion_comparacion]): Un dos poucos métodos por defecto que recibe unha función como parámetro. Ordena o array segundo o criterio que conteña funcion_comparacion. Podemos ordenar de menor a maior números, alfabeticamente letras... etc. O parámetro é opcional; por defecto sort() ordena de menor a maior e alfabeticamente, antepondo os números ás letras e as maiúsculas.
  • funcion_comparacion: É unha función que contén dous parámetros obrigados, que serán os elementos do array a comparar. Segundo o que devolva esta función, sort interpretase unha cousa ou outra:
    • funcion_comparacion(a, b)<0 --> a lt;b.&
    • funcion_comparacion(a, b)=0 --> a=b
    • funcion_comparacion(a, b)>0 --> a gt;b.&

Para ordenar elementos existen outros algoritmos, algúns máis legibles outros máis eficaces: O Ordenamento por mestura, Ordenamento de burbulla, Shell sort e o Ordenación Quicksort son algúns deles.

O obxecto Boolean

O obxecto Boolean ten dous valores posibles, true ou false. Estes valores pódense operar cos #Operador\\\ de relación.

Sérvennos para comprender as expresións que se avalían como boleanas, como as que pode haber entre #o\\\ #paréntese\\ dun if ou dun while... Á fin e ao cabo unha expresión boleana.

Sempre podemos crear unha expresión boleana e asignarlla a unha variable co construtor:

   var a = new Boolean(expresión);

Onde expresión determinase un valor true ou false para a variable a.

Toda expresión que sexa unha variable baleira, un string baleiro, un null, un undefined, un número igual a 0, unha referencia a un obxecto do documento que non exista... etc darán como resultado un boleano false. En caso contrario, un string, un número darán resultado true.

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

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

O obxecto Date

O obxecto Date almacena unha data da que é posible extraer datos concretos. Ata existen funcións creadas por desenvolvedores para operar con datas, xa que predeterminadamente JavaScript non as implementa, ao contrario que PHP.

O obxecto Function

O obxecto Function refírese a un "subprograma" dentro do propio script. É un conxunto de sentenzas que se utilizan basicamente para reutilizar código.Esta obxecto é aseméllase ás funcións noutras linguaxes como Xava.

O obxecto Image

O obxecto Image contén unha imaxe.

O obxecto Number

O obxecto Number refírese a unha variable numérica.

O obxecto Object

O Object de seu é un obxecto creado por nós, ou un obxecto diferente podendo ser este un obxecto do DOM.

O obxecto Option

Option refírese a un elemento HTML que se inclúe dentro dos <SELECT>. É unha opción nunha lista desplegable. Poderemos crear instancias do obxecto option e engadilas a un <SELECT> do documento grazas ao DOM.

O obxecto RegExp

O obxecto RegExp é unha Expresión regular. A súa sintaxe é universal, se explaya cumpridamente en devandito artigo.

O obxecto String

O obxecto String é unha cadea de carácteres. En JavaScript non existen Char, polo que un só carácter será do tipo String.

Estruturas de Control

if...else...

If é unha sentenza de control que permite a JavaScript facer decisións, isto quere dicir que executará sentenzas condicionalmente. Sintaxe:

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

A condición é avaliada e se o resultado é verdadeiro, a expresión_1 execútase. Se o resultado da condición_1 é falso, a expresión_1 non se executa e executa a expresión_2.

Bucle While

while (condición) {
    ''sentenzas''
}

Mentres a condición sexa certa execútanse as sentenzas.

do...while...

do {
    ''sentenzas''
} while (condición);

Execútanse primeiro as sentenzas e logo avalíase a condición. Mentres a condición sexa certa seguiranse executando as sentenzas.

Bucle for

for ([variables iniciais]; [condición de repetición]; [expresión de modificación]) {
    ''sentenzas''
}

Primeiro execútase [variables iniciais], unha lista de variables (ou unha soa) separadas por comas cos seus valores correspondentes. Despois se a [condición de repetición] é verdadeira execútase sentenzas, e despois avalíase [expresión de modificación], a cal adoita variar o valor dunha das variables definidas en [variables iniciais]. Repítese o bucle verificación de [condición de repetición], execución de sentenzas e [expresión de modificación] indefinidamente ata que [condición de repetición] sexa falsa.

Bucle for...in

for (variable in obxecto) {
    ''sentenzas''
}

Para cada un dos valores do obxecto execútanse as sentenzas. Útil para percorrer arrays.

Declaración switch

switch( ''expresión'' ){
    case ''valorX'' :
         ''sentenzas'';
         break;
    case ''valorX'' :
         ''sentenzas'';
         break;
    ...
    default :
         ''sentenzas'';
         break;
}

En expresión dáse unha variable ou unha condición e en cada case escríbese en valorX o valor que pode tomar esa variable ou expresión. En caso de coincidir con algún valorX execútase sentenzas dentro dese case ata topar cun break. Se non coincide con ningún valor a expresión execútase o código na sección default.

Véxase tamén

Outros artigos

• JavaScript non obstructivo
• DHTML
• AJAX

Ligazóns externas

• referencia de JavaScript, de Sun (en inglés)
• Mozilla Developer Center (en castelán)
• Javascript módulo Perl en CPAN para executar JavaScript embebido en programas Perl, usando o motor SpiderMonkey (en inglés)
• JE módulo Perl en CPAN. Un motor ECMAScript (JavaScript) escrito en Perl (en inglés)
• módulos Perl para JavaScript en CPAN (en inglés)