Esto ha sido escrito por HTML.

Se obtiene: Esto ha sido escrito por JavaScript desde HEAD Esto ha sido escrito por JavaScript desde BODY Esto ha sido escrito por HTML. Otra particularidad de la sintaxis de JavaScript son las llaves: { }. Estas llaves hay que utilizarlas siempre que el bloque de declaraciones vaya a tener más de una línea, y son obligatorias al definir funciones. Pueden anidarse si el programa va a tener varios bloques, y siempre deben ser pares. Por ejemplo, en la siguiente función: Capturar evento de boton

Fíjate en que la función es invocada al pulsar el botón del formulario, capturando un evento: onClick, pero también es posible escribir directamente la instrucción en el punto de captura en lugar de utilizar el elemento . Por ejemplo: Capturar evento de boton Esta forma es aceptable si, como en el ejemplo, la función es muy simple. Al igual que se puede hacer con las hojas de estilo en cascada (CSS), JavaScript permite que todo el código (o parte de él) esté en un fichero independiente de la página html, lo que permite modificar y mantener más rápidamente la programación, sin necesidad de editar muchos ficheros diferentes. El fichero que contiene el código JavaScript, normalmente tiene la extensión .js Sea el ejemplo anterior: Capturar evento de boton Donde el contenido de fichero.js es: function mensaje() { alert("Esto es un mensaje de JavaScript") } Como puedes ver, en este fichero no hay que incluir el elemento , sino solamente instrucciones JavaScript. Para mayor claridad de los ejemplos, se empleará este sistema siempre que sea posible. Los programas JavaScript, como todos los programas, se comienzan definiendo las variables, después las funciones, y a continuación la estructura del programa propiamente dicha, si la hay. Recuerda que este es un lenguaje interpretado, es decir, que las instrucciones se van cargando en memoria a medida que se leen, y por tanto es necesario tener cuidado con el orden en

que se escriben las variable y las funciones que serán invocadas desde el núcleo del programa. Por ejemplo, si una instrucción que llama a una función se escribe antes que la función llamada, se producirá un error, ya que en ese momento la función todavía no existe.

Variables Las variables son espacios de memoria que contienen algun tipo de dato, al que se accede mediante el nombre que se le asigne a la variable. En JavaScript no hay constantes como en VBScript. Los nombres de las variables tienen que comenzar siempre por una letra o el signo del subrayado ( _ ) y no pueden contener espacios en blanco ni caracteres que no sean letras o números, lo que excluye letras acentuadas, eñes, cedillas, etc. Al escribirlos, si se utilizan mayúsculas, recordar que no es lo mismo MiVariable que mivariable. Por supuesto, no puedes crear una variable con ninguna palabra reservada del lenguaje, como return, if, case, etc. Para crear una variable, simplemente se escribe su nombre, y si se desea, en ese mismo momento, se le asigna un valor. Dependiendo del ámbito de actuación de la variable, habrá que utilizar, o no, la instrucción var en el momento de crearla. Por ejemplo: var MiVariable = 2004 También es posible definir varias variables en una misma línea: var Variable1, Variable2, Variable3 Como puedes ver, la instrucción var es similar a la instrucción Dim de VBScript. Cuando una variable es definida con la instrucción var en un bloque acotado por llaves { } (ámbito), solamente estará disponible en ese bloque, y se la denomina variable de ámbito local. Si se declara sin la instrucción var, es una variable de ámbito global, no importando dónde ha sido declarada, y estará disponible en cualquier lugar de la página (a partir de donde ha sido declarada, pero no antes). Si se declaran dos variables con el mismo nombre, pero una global y la otra local, la global será accesible desde toda la página, excepto en el área donde "reina" la local, que impondrá su valor allí. No es buena idea declarar variables duplicadas, salvo que sea estrictamente necesario, claro. Las variables pueden contener cualquier tipo de dato, como cadenas, números, valores booleanos, o incluso objetos. Se pueden cambiar los tipos de datos que contienen en cualquier momento sin necesidad de redefinir la variable. A los valores contenidos en las variables se les denomina literales. El literal es un concepto a veces confuso. Si, por ejemplo, decimos que variable1 = "A" y variable2 = "B" podemos acceder a "A" o a "B" bien invocando el nombre de las variables correspondientes, o invocando sus literales, es decir, directamente sus valores. La suma (o concatenado en este caso) de variable1 + variable2 es lo mismo que la suma de sus literales: "A" + "B" = "AB"

Variables de cadena Construir una variable conteniendo un string o cadena no tiene ninguna dificultad. Como ya sabrás, un string o cadena es cualquier contenido acotado por comillas, simples ' o dobles ". mivariable = "Hola" También es posible concatenar dos o más cadenas usando el signo + : mivariable = "Prueba de " + "concatenado" Y este sería el resultado: Prueba de concatenado Si dentro de una cadena acotada por comillas, tanto simples como dobles, se incluye otra subcadena acotada por las otras comillas, no se considera un concatenado. Por ejemplo, son válidas las

cadenas: "Comillas dobles con 'simples' en el interior" 'Comillas simples con "dobles" en el interior' Puesto que las cadenas se pueden definir tanto con comillas simples como dobles, puede ocurrir que dentro de la cadena haya que poner uno de estos signos, o los dos, lo que provocaría un error de sintaxis. Para resolver este problema se utilizan los "escapes", es decir, el mismo caracter que se quiere escribir precedido de \ Esto evita que sea interpretado, no como el cierre de las comillas, sino como un carácter normal. Así: mivariable = "Prueba de " + "\"concatenado\" " + '\'doble\'' Y este sería el resultado: Prueba de "concatenado" 'doble' Esto mismo también es posible hacerlo usando el código hexadecimal del carácter deseado. Normalmente se utiliza la codificación hexadecimal sólo con los caracteres que no admiten el "escapado" (que son casi todos). Aplicándolo a las comillas sería así: mivariable = "Prueba de " + "\x34concatenado\x34 " + '\x27doble\x27 ' Además de las comillas y el código hexadecimal ya vistos, se puede "escapar" la misma barra inclinada: \\, la \t para insertar un tabulador horizontal, y la \n para forzar una nueva línea. Fíjate que en el caso de estos dos últimos, el escape funciona al revés que en las comillas o la barra inclinada: En efecto, mientras que con las comillas el escape pretende que no se interprete su cualidad para abrir o cerrar cadenas, con t o n lo que se hace es darles las cualidades que no tienen para producir un tabulador o un salto de línea. Recuerda también que tanto el tabulador como la nueva línea no tienen efectos visibles en los navegadores, por lo que su utilidad se limita al formateo de texto dentro del entorno JavaScript exclusivamente. Al ser la barra inclinada \ el controlador de escapes, si en una cadena hay que escribirla, deberá hacerse escpándose a sí misma. Por ejemplo, si se escribe la típica ruta del directorio temp en el disco C: document.write("C:\temp") se obtiene C: emp Como puedes ver, en este caso el error es doble, ya que la barra no puede aparecer sin escape como tal carácter, y además, al estar junto a la t, se ha interpretado como indicador de tabulación. La sintaxis correcta es: document.write("C:\\temp") para obtener C:\temp No hay que confundir los caracteres con escape con una de las pocas funciones intrínsecas de JavaScript: escape() y su inversa: unescape(). La función escape() devuelve el código ASCII decimal de los caracteres especiales, es decir cualquier caracter que no sea una letra (mayúsculas o minúsculas), un número, o el punto, el guión, el subrayado o la arroba (Az 1-9 _ . @). Todos los demás serán codificados. Por ejemplo, si se escribe: document.write(escape("$ % & @")) Se obtiene: %24%20%26%20%25%20@ Como puedes ver, se codifica incluso el espacio en blanco (%20). Y con su inversa: document.write(unescape("%24%20%26%20%25%20@")) Se obtiene: $ % & @

Procedimientos y funciones En JavaScript no pueden definirse procedimientos Sub como en VBScript, pero sí funciones (function). A cambio, aquí las funciones pueden realizar tanto acciones como devolver valores, mientras que en VBScript solamente los procedimientos Sub pueden realizar acciones. Dentro de una función no se puede definir otra función, pero sí pueden realizarse llamadas a cuantas sea necesario. Para declarar una función simplemente se escribe la instrucción function y a continuación el nombre que tendrá seguido de un par de paréntesis que contendrán los argumentos, si los los hay. Por ejemplo: function mensaje() y si tiene argumentos: function sumar(a, b) Los argumentos pueden ser variables, o directamente cadenas, números e incluso objetos. Después de haber definido el nombre de la función, se escribe un par de llaves, dentro de las cuales irán todas las líneas que compongan el código de nuestra función. Por ejemplo: function mensaje() { alert("Esto es un mensaje de JavaScript") } Las funciones de javaScript reciben los argumentos por valor, es decir, que si la función cambia el valor de los parámetros recibidos, este cambio no se reflejará globalmente, sino que sólo será efectivo en el ámbito de la propia función, ni siquiera si la misma función es llamada desde otro punto del programa. No hay que confundir la declaración de funciones con el objeto Function() de javaScript. Fíjate en que el nombre de este objeto comienza por "F" mayúscula. Se verá en el apartado Objetos. Normalmente las funciones se invocarán capturando un evento, es decir, un suceso que se produce y es detectado en la ventana del navegador. Uno de los eventos más comunes es el que detecta la pulsación (onClick) del puntero del ratón sobre un objeto, por ejemplo, un botón de un formuulario. En el siguiente ejemplo veremos cómo escribir una página que captura un evento en el botón de un formulario que llama a una función. Esta función invoca el método alert del objeto window: Capturar evento de boton

Y al pulsar el botón, se obtiene:

Al ser capaz function de realizar acciones tanto como de devolver valores, es necesaria una instrucción que le indique lo que debe hacer: return. Solamente si aparece esta instrucción al final de la función, ésta devolverá el valor que tenga programado, si no, realizará las tareas que tenga encomendadas, pero no se podrá obtener de ella una respuesta. Por ejemplo: Prueba de JavaScript

Se obtiene: undefined Como puedes ver, se ha definido una función con dos argumentos: a y b que serán sumados. No obstante, cuando es invocada para escribir el resultado de la suma, se obtiene una desconcertante respuesta: undefined . Esto es debido a que no se le ha dicho que entregue el resultado, sino solamente que lo calcule. Pero si se escribe: Prueba de JavaScript

Esta vez sí se obtiene lo esperado: 4 En el ejemplo, la función devuelve el resultado de la suma en una variable que se llama igual que la propia función: sumar, pero también se puede hacer sobre una variable con distinto nombre. Por ejemplo, funcionaría igual así: Prueba de JavaScript

También es posible devolver directamente el resultado de la suma sin depositar el valor previamente en ninguna variable ni en el nombre de la función: Prueba de JavaScript



En JavaScript las funciones que tienen argumentos, como la del ejemplo, automáticamente son provistas de un vector conteniendo los valores de los argumentos. Y te preguntarás qué es eso de un "vector". Un vector es algo parecido a una matriz o array, y en este caso nos permite acceder a los valores de los argumentos a y b por otra via que no es utilizarlos directamente. Estos vectores, cuando hay que automatizar procedimientos, pueden resultar muy útiles. En el caso del vector de nuestra función, y como todos los vectores y arrays, la numeración del índice comienza por el cero, y por supuesto, el orden de los valores en el vector es el mismo que el de los argumentos en la función, es decir, el índice 0 corresponde al argumento a y el índice 1 corresponde al b. Este ejemplo es equivalente al anterior: Prueba de JavaScript

La palabra arguments, como ya habrás supuesto, es reservada y no puede emplearse como nombre de variable ni de función, y tiene una propiedad: length que nos indica la longitud del índice del vector. Por ejemplo, si modificamos un poco la función anterior: Prueba de JavaScript

Se obtiene 2 que es el número de argumentos que tiene la función. Fíjate en que este contador no empieza en el cero, puesto que devuelve 2. Operadores de JScript

Tipos de operadores En JavaScript encontramos cinco tipos de operadores: • • • • • •

Aritméticos Lógicos De comparación Binarios De asignación Otros

Operadores aritméticos Suma (+). Suma dos números: 3 + 2 = 5 . Si en lugar de números se suman cadenas, como por ejemplo "A" + "B" = "AB" se produce una concatenación. Si alguno de los elementos a concatenar no es una cadena de texto, queda convertido a cadena: "AB" + 123 = "AB123" . Resta (-). Halla la diferencia entre dos números. Ejemplo A: 3-2 = 1 . Ejemplo B: (-1)-(-2) = 1 . Negativo (-). Indica el signo negativo de un número o una expresión: -3.

División (/). Divide dos números, obteniendo un cociente de coma flotante: 5 / 2 = 2.5 . Fíjate en que el separador decimal es el punto. Módulo aritmético %. Divide dos números, obteniendo un resto entero: 5 % 2 = 1 . Multiplicación (*). Multiplica dos números: 3 * 2 = 6 . Incrementos y decrementos (++ --). Incrementa o decrementa el valor de una variable numérica en una unidad. No puede aplicarse a un literal. Pueden darse dos casos: var A, B; B = 2; A = A =

++B B++

En el primer caso, A = 3 Es decir, que el incremento de B ha sido el correcto, pero no así el segundo, en el que A = 2. Esto se debe a que, en el primer caso, el incremento se efectúa antes de que la expresión sea evaluada, y en el segundo, se incrementa después de la evaluación según indica el orden de precedencia de los operadores (ver tabla al final de esta página). De igual forma, para decrementos: var A, B; B = 2; A = A =

--B B--

En el primer caso resulta: A = 1 y en el segundo: A = 2

Operadores lógicos Estos operadores tienen unas aplicaciones un tanto especiales, ya que no funcionan como los aritméticos, conocidos por todos. Para comprender el funcionamiento de los operadores lógicos, primero hay que saber qué son los estados lógicos de una expresión. Y te preguntarás que es eso de "estados lógicos"... Esta es una cuestión un tanto filosófica, ya que el estado lógico de algo depende de respecto a qué establecemos ese estado, y por tanto no siempre será el mismo. Dependerá del entorno o contexto en el que se define y utiliza la expresión. En JavaScript hay tres posibles estados lógicos: True (verdadero), False (falso) y Null (nulo, es decir que no se ha establecido estado alguno por la razón que sea) Por ejemplo, supongamos que hay que establecer el estado lógico de un material: El hierro. Evidentemente, para establecer un estado lógico primero tenemos que decidir respecto a qué se establece ese estado, ya que no podemos decir simplemente que el hierro es verdadero o falso. Nos tendremos que referir a alguna cualidad del material y compararla con algo para establecer si el estado es verdadero o falso. Sea la expresión El hierro es un metal . Si tenemos que establecer el estado lógico de esta expresión, la respuesta inmediata es Verdadero (True) y si la expresión fuese El hierro no es un metal , inmediatamente pensarímos que el estado adecuado es Falso (False) Una vez establecido el estado lógico de la expresión, los operadores lógicos nos permitirán tomar decisiones mediante la verificación de ese estado, bien tomando uno solo, o agrupando varios de ellos. Al igual que los operadores aritméticos, los operadores lógicos tienen un orden preestablecido de evaluación que debe ser tenido en cuenta. Los estados lógicos, o mejor dicho, el resultado que dan los operadores lógicos, pueden tratarse también como números booleanos, siendo True equivalente a 1 y False equivalente a 0. Negación lógica ! (Not). Establece una negación lógica en una expresión, es decir, que ante una

expresión, cuyo estado lógico es True (verdadero), el operador hará que devuelva False (falso). El hierro es un metal = True. ! El hierro es un metal = False. Hay tres posibles resultados aplicando este operador a una expresión: Si la expresión = True el operador devuelve False. Si la expresión = False el operador devuelve True. Si la expresión = Null el operador devuelve Null. Conjunción lógica && (And). Establece una conjunción lógica de dos expresiones, es decir, que han de resultar True (verdadero) las dos expresiones para que el resultado final también lo sea. El hierro es un metal = True. El hierro es duro = True. El hierro es un metal && El hierro es duro = True. Hay 9 posibles resultados aplicando este operador a dos expresiones, aunque es posible incluir cuantas sean necesarias: Si la Expresión Si la Expresión Si la Expresión Si la Expresión Si la Expresión Si la Expresión Si la Expresión Si la Expresión Si la Expresión

1 1 1 1 1 1 1 1 1

= = = = = = = = =

True && Expresión 2 = True el resultado es True. True && Expresión 2 = False el resultado es False. True && Expresión 2 = Null el resultado es Null. False && Expresión 2 = True el resultado es False. False && Expresión 2 = False el resultado es False. False && Expresión 2 = Null el resultado es False. Null && Expresión 2 = True el resultado es Null. Null && Expresión 2 = False el resultado es False. Null && Expresión 2 = Null el resultado es Null.

Como puedes ver, si, y sólo si, ambas expresiones se evalúan como True, el resultado es True. Si cualquiera de las expresiones es False, el resultado es False. Disyunción lógica || (Or). Establece una disyunción lógica de dos expresiones, es decir, que el resultado se dará evaluando una expresión u otra. El hierro es un metal = True. El hierro es duro = True. El hierro es un metal || El hierro es duro = True. Hay 9 posibles resultados aplicando este operador a dos expresiones, aunque es posible incluir cuantas sean necesarias: Si la Expresión Si la Expresión Si la Expresión Si la Expresión Si la Expresión Si la Expresión Si la Expresión Si la Expresión Si la Expresión

1 1 1 1 1 1 1 1 1

= = = = = = = = =

True || Expresión 2 = True el resultado es True. True || Expresión 2 = False el resultado es True. True || Expresión 2 = Null el resultado es True. False || Expresión 2 = True el resultado es True. False || Expresión 2 = False el resultado es False. False || Expresión 2 = Null el resultado es Null. Null || Expresión 2 = True el resultado es True. Null || Expresión 2 = False el resultado es Null. Null || Expresión 2 = Null el resultado es Null.

Como puedes ver, si cualquiera de las expresiones, o ambas, son True, el resultado es True. Exclusión lógica ^ (Xor). Establece una exclusión lógica de dos expresiones, es decir, que el resultado se dará evaluando una expresión u otra, y dará True si solamente una de ellas es True, lo que implica la exclusión de la otra.

El hierro es un metal = True. El hierro es duro = True. El hierro es un metal ^ El hierro es duro = False. Hay 4 posibles resultados aplicando este operador a dos expresiones: Si la Expresión Si la Expresión Si la Expresión Si la Expresión

1 1 1 1

= = = =

True ^ Expresión 2 = True el resultado es False. True ^ Expresión 2 = False el resultado es True. False ^ Expresión 2 = True el resultado es True. False ^ Expresión 2 = False el resultado es False.

Como puedes ver, si una y sólo una de las expresiones es True, el resultado es True. Si cualquiera de las expresiones es Null, el resultado también será Null.

Operadores de comparación Igualdad (==) Verifica la igualdad de dos expresiones sin tener en cuenta el tipo de dato. Por ejemplo: 2 == "2" devuelve True Igualdad estricta (===) Hace lo mismo que el anterior, pero verificando también que coincidan los tipos de datos. Por ejemplo: 2 === "2" devuelve False Desigualdad (!=) Funciona de la misma forma que la igualdad, pero negándola. Por ejemplo: 2 != "2" devuelve False Desigualdad estricta (!==) Lo mismo que la igualdad estricta, pero negándola. Por ejemplo: 2 !== "2" devuelve True Y estos cuatro, seguro que ya sabes cómo funcionan: Mayor que (>) Mayor o igual que (>=) Menor que (>> & | ^ Para comprender como trabajan estos complicados operadores lo mejor son los ejemplos: Bitwise shift operators 9 2 = 2 con valor negativo: -9 >> 2 = -3 Primero convierte a binario el primer operando 9 = 1001 A continuación, y comenzando de derecha a izquierda, elimina el número de bits que indique el segundo operando (2). Resulta: 10 = 2 9 >>> 2 = 2 con valor negativo: -9 >>> 2 = 1073741821 Funciona igual que el anterior con números positivos. Con números negativos no está muy

claro lo que hace. Bitwise logical operators Al igual que los anteriores, estos operadores trabajan convirtiendo previamente a binario los operandos, en la base de enteros de 32 bits. Para operar emparejan cada bit del primer operando con su correspondiente del segundo operando, aplicando el operador uno a uno hasta obtener el resultado final. Por ejemplo, el número 15 en binario es 1111 y el 9 1001. Si aplicamos los tres operadores lógicos a esta pareja de valores, se obtiene: 15 & 9 = 9

(1111 AND 1001 = 1001)

15 | 9 = 15

(1111 OR

15 ^ 9 = 6

(1111 XOR 1001 = 0110)

1001 = 1111)

Y seguramente te estarás diciendo que no entiendes nada... Analicemos uno. Sea, por ejemplo, el último de ellos: 15 ^ 9 = 6. Más arriba se ha descrito este mismo operador, que es Xor. Recordemos que establece una exclusión lógica de dos expresiones, es decir, que el resultado se dará evaluando ambos valores, y dará True si solamente una de ellas es True. Recordemos también que en binario 1 = True y 0 = False. Por tanto 15 = 1 1 1 1 9 = 1 0 0 1 -----------------------------False True True False

o lo que es igual,

0110

No hay que confundir estos tres operadores con sus homólogos lógicos vistos más arriba, que se representan con el mismo símbolo pero doble (excepto este).

Operadores de asignación Asignación simple (=) Asigna un contenido a una variable o a un objeto. Por ejemplo: mivariable = "Saludos" En JavaScript el operador de asignación tiene la particularidad de que puede combinarse con algunos de los operadores aritméticos, dando lugar a toda una familia de nuevos operadores: A += B Ejemplo equivalente: A = A + B A -= B Ejemplo equivalente: A = A - B A /= B Ejemplo equivalente: A = A / B A *= B Ejemplo equivalente: A = A * B A %= B Ejemplo equivalente: A = A % B A &= B Ejemplo equivalente: A = A & B A ^= B Ejemplo equivalente: A = A ^ B A |= B Ejemplo equivalente: A = A | B

Unos operadores atípicos typeof Este operador nos indica el tipo de dato contenido en un variable, un literal o el resultado de una expresión. Puede devolver seis valores diferentes: number, string, object, function, boolean o undefined . Por ejemplo:

typeof 2 devuelve number void Este es un curioso operador que se limita a impedir que todo funcione normalmente, es decir, que una vez evaluadas la instrucciones, sus efectos o presentación de resultados serán anulados. En principio podemos dudar de su utilidad, pero puede resultar muy útil en las ocasiones en que, dependiendo de una evaluación previa, haya que deshabilitar algun objeto o impedir alguna acción. Por ejemplo, bloqueando un formulario donde no se han cumplimentado algunos campos obligatorios, o si algun valor es erróneo. El siguiente ejemplo genera un link que no funciona: Este link no funciona Y se escribe: Este link no funciona new Sirve para crear una instancia de un objeto definido por el usuario, o también, para crear alguno de los objetos intrínsecos de javaScript:, como son: Array, Boolean, Date, Function, Math, Number o String. Lo veremos con más detalle en la página dedicada a los objetos. Como puedes ver, JavaScript dispone de una gran variedad de operadores. Cuando se escriben expresiones lógicas complejas es recomendable usar los paréntesis para cada sub expresión participante, y no olvides tener siempre en cuenta el orden de evaluación de los operadores. Es relativamente fácil equivocarse al escribir expresiones complicadas, y es buena idea probar siempre lo escrito con cuantas variaciones sea posible para asegurarse de que no se producen resultados inesperados.

Orden de precedencia de los operadores Los operadores de JavaScript tienen un orden establecido de evaluación. Este orden se denomina orden de precedencia. En la tabla siguiente puedes ver este orden, teniendo presente que los operadores que aparecen juntos en una misma fila de la tabla, no tienen prioridad entre ellos, sino que se evaluarán en el orden en que hayan sido escritos en la expresión a evaluar: Operador

Descripción

. [] ()

Acceso a campos, índice de matrices y llamada a funciones.

++ -- - ~ ! delete new typeof void

Incremento +1, decremento -1, negativo, NOT, NOT lógico borrado, crear objeto, mostrar tipo, indefinido

* / %

Multiplicación, división, módulo de división (resto)

+ - +

Suma, resta, concatenación de cadenas

>

< >> > >=

Bit shifting menor que, menor que o igual, mayor que, mayor que o igual

== != === !==

Igualdad, desigualdad, identidad, no identidad

&

AND

^

XOR

|

OR

&&

AND logico

||

OR logico

?:

Condicional

=

Asignación

,

Evaluación múltiple

Los paréntesis se utilizan para alterar el orden natural de evaluación de los operadores. Una expresión con paréntesis será evaluada completa antes de que su valor resultante sea utilizado por el resto de instrucciones. Para hacerse una idea más clara, veamos un ejemplo. Sea la siguiente expresión: X = 78 * (96 + 3 + 45) Como puedes ver, hay cinco operadores en este orden: =

*

()

De acuerdo con su orden de precedencia, se evaluarán en este orden: ()

+

+ *

+

+

=

Y esta sería la forma de operar paso a paso: En primer lugar, se resuelve el paréntesis: 96 + 3 = 99 y a continuación 99 + 45 = 144 Ahora se multiplica: 78 * 144 = 11232 Por último se asigna el resultado: X = 11232

Instrucciones de JavaScript if( condicion [else] [instrucciones]) Esta es sin duda la instrucción más utilizada en programación. En efecto, raro es el programa, por pequeño que sea, que no la contenga al menos una vez. Su funcionamiento es muy simple: es como un interruptor. Evalua un expresión y si el resultado es true realiza las acciones que tenga programadas, y si es false realiza otras acciones alternativas, o no hace nada, según convenga. Por ejemplo: var x = 2 if (x == 3) { document.write("x vale 3") }

En este caso, al no devolver true la condición, no se obtiene ningún resultado. Si queremos una alternativa en el caso de false, se escribe: var x = 2 if (x == 3) { document.write("x vale 3") } else { document.write("x no vale 3") }

Y se obtiene: x no vale 3 Si la acción a realizar es breve, también puede escribirse en una sola línea: var x = 2 if (x == 3) document.write("x vale 3")

Pueden anidarse cuantas instrucciones if sea preciso. Por ejemplo, si se escribe: var x = 4 if (x < 3) if (x == 2) document.write("x vale 2")

if else if if if

(x == 1) document.write("x vale 1") (x == 3) document.write("x vale 3") (x == 4) document.write("x vale 4") (x == 5) document.write("x vale 5")

Y se obtiene: x vale 4 Cuando escribas anidamientos, recuerda que si las instrucciones a realizar tienen más de una línea, hay que escribir las correspondientes llaves { } para cada grupo de instrucciones en cada if, tal como se ve en el primer y segundo ejemplos. for() Esta instrucción crea un bucle, controlado por tres expresiones separadas por ; , y seguidas de un bloque de otras instrucciones escritas dentro de un par de llaves { } que se ejecutarán con cada ciclo del bucle. La sintaxis es: for([contador;] [condicion;] [incremento]) { ..... instrucciones .... } La primera expresión de los argumentos, contador, define el contador del bucle y lo inicializa. La segunda, condicion, es donde se declara la condición o condiciones que se tienen que cumplir para que el bucle termine. El bucle seguirá ejecutándose hasta que la expresión devuelva true. Y por último, incremento indica el incremento que se aplicará al contador en cada paso. Por ejemplo: for(var x = 0; x < 5; x++) { document.write(x) } Se obtiene: 01234 Analicemos el ejemplo. La primera expresión de los argumentos, crea e inicializa a cero el contador x: var x = 0;. La segunda establece que el bucle rodará mientras x sea menor de 5: x < 5;. Y la tercera incrementa en 1 el contador con cada ciclo del bucle: x++. Como ya se ha dicho en el apartado de los operadores de JavaScript, x++ es equivalente a x = x+1 for( in ) Al igual que la anterior, crea un bucle, pero esta vez solamente sirve para listar las propiedades de un objeto. Por ejemplo: Mi_array = new Array(2) Mi_array[0] = "A"; Mi_array[1] = "B"; Mi_array[2] = "C" for(var x in Mi_array) { document.write("Mi_array" + x + " = " + Mi_array[x] + "
" ) } Se obtiene: Mi_array0 = A Mi_array1 = B Mi_array2 = C Fíjate en que, a diferencia de la anterior, no es necesario inicializar el contador con ningun valor (solamente crearlo) ni tampoco indicar el incremento ni el número de repeticiones del bucle, que se

repetirá las veces que indique el índice del objeto. while( condicion) Es parecida a for(), pero en lugar de ejecutar el bucle hasta que se cumple la condición, lo hace mientras (while) se mantenga el resultado inicial de la condición, es decir, lo mismo pero al revés. Por ejemplo: var x = 0 while( x < 3 ) { x++ document.write("x = " + x + "
") }

Se obtiene: x = 1 x = 2 x = 3 Como puedes ver, el bucle se ejecuta mientras x es menor que 3, no siendo necesario definir en la propia instrucción el incremento del contador, que está dentro de las instrucciones ejecutadas por el bucle. Tanto while() como for() pueden utilizar una instrucción que permite salir del bucle, si conviene, antes de que se cumplan todas las repeticiones programadas en el contador. Se trata de break. También pueden emplear la instrucción continue para alterar el contador sin detenerlo ni salir del bucle. Veamos un ejemplo de uso de continue: var x = 0 var y = 0 while (i < 5) { x++ if (x == 3) continue y += x document.write("x = " + x + " }

y = " + y + "
")

Se obtiene: x x x x

= = = =

1 2 4 5

y y y y

= = = =

1 3 7 12

Recuerda que x++ es equivalente a x = x + 1, lo mismo que y += x equivale a y = y + x. Sabiendo esto, puedes ver claramente lo que hace el bucle en los dos primeros ciclos. Al llegar a la tercera línea, en la que x = 3 vemos que hay un salto. En efecto: continue ha entrado en acción y el control del bucle ha saltado desde la instrucción comenzando un nuevo ciclo sin ejecutar las dos instrucciones que restaban, y que habrían aportado x = 3 y = 6. Luego el bucle termina normalmente hasta que x = 5, pero los valores de y se han alterado respecto a los que serían sin actuar continue. De forma parecida trabaja break, pero en este caso en lugar de provocar un salto en el bucle y continuar hasta el final previsto, el salto se hace fuera del bucle, quedando éste interrumpido:

var x = 0 while (i < 5) { x++ if (x == 3) break document.write("x = " + x + }

"
")

Se obtiene: x = 1 x = 2 Como puedes ver, solamente se han completado dos ciclos del bucle de los cinco previstos. Estas dos instrucciones pueden emplearse de la misma forma con la instrucción for(). this Es una palabra reservada que se utiliza para referirse al objeto actual en el que se está ejecutando el código. Sea por ejemplo un formulario en el que el cliente debe escribir un valor, y para comprobar que el valor es el correcto escribimos una función de verificación: Pruebas JScript function validar(numero) { if (numero.indexOf("2") != -1) return true; else { alert('No has escrito un 2'); return false; } } Escribe un 2:


Fíjate en la instrucción this.campo1.value En realidad lo que hace this es sustituir a la referencia real que sería: document.Formulario.campo1.value with Esta instrucción sirve como referencia a un objeto, previamente declarado como objeto por defecto, para evitar tener que referenciarlo en un conjunto repetitivo de instrucciones. Por ejemplo, para obtener unos valores matemáticos: var a, b, c var r=10 a = Math.PI * r * r

b = r * Math.cos(Math.PI) c = r * Math.sin(Math.PI/2)

Como puedes ver, hay que hacer referencia del objeto Math en todas las instrucciones. En cambio, si se emplea with, simplemente se escribe: var a, b, c var r=10 with (Math) { a = PI * r * r b = r * cos(PI) c = r * sin(PI/2) }

var ver el apartado variables function

return ver el apartado funciones

comment ver el apartado ¿Cómo se escribe el JavaScript?

Objetos y funciones de JScript Los objetos de JScript JavaScript dispone de objetos intrínsecos del lenguaje, es decir, que ya existen y están disponibles sin crearlos. No hay que confundirlos con los objetos del navegador, que tienen funcionalidades distintas. Casi todos tienen propiedades y métodos, pero no todos tienen manejadores de eventos. Algunos de ellos en otros lenguajes son funciones (por ejemplo, Date). Todos los objetos de JavaScript comienzan por una letra mayúscula y las instrucciones por una minúscula. Array El array (o matriz) es un objeto que permite almacenar datos con un cierto orden. Recuerda siempre que los arrays almacenan todos sus datos en memoria, y por tanto no es posible utilizarlos para recuperar en otra sesión lo almacenado, no son ficheros. Al ser la memoria del cliente el lugar donde se almacenan los datos, el acceso a ellos es muy rápido. Los datos almacenados pueden ser de cualquier tipo: números, cadenas, objetos, etc., y pueden mezclarse. Según la sintaxis que se utilice, el objeto funciona de distinta manera. Si se escribe: Array(2) se crea un array vacío de longitud 3, es decir con tres celdas, ya que los índices comienzan por el cero. En cambio, si se escribe Array("2") tendremos un array de una sola celda, cuyo contenido es "2". Si en lugar de un solo número se escriben varios separados por comas, también serán almacenados, y el array tendrá tantas celdas como argumentos se hayan escrito dentro de los paréntesis, por ejemplo: Array(1, 2, 3, 4) crea un array con cuatro celdas conteniendo 1, 2, 3 y 4 respectivamente. Puede ocurrir que al crear el array, no se tengan todavía disponibles los datos que se guardarán en él. ¿cómo mover los datos después? cambiando de nuevo la sintaxis: Se crea el array: Array(2) y se le mueven los datos: Array[0] = "A" "B" Array[2] = "C"

Array[1] =

Fíjate en que para asignarle valores a las celdas, esta vez se hace escribiendo el número de índice de la celda entre corchetes en lugar de paréntesis. Aunque en estos ejemplos, por claridad, no se ha utilizado, al crear un array se debe emplear el operador new, así como cuando haya que inicializarlo si ya estaba creado previamente: new Array(2) . Hasta aquí hemos visto que se invoca el array directamente, pero ¿qué ocurre si en nuestro programa tenemos que crear más de uno? si no tienen un nombre que los distinga, al crear el segundo, estaríamos reinicializando de nuevo el primero. Para resolver esto, se asigna el array a una variable en el momento de crearlo, lo que nos permitirá invocarlo por su nombre para todo: Se crea el array: Mi_array = new Array(2) y se le mueven los datos invocando su nombre: Mi_array[0] = "A"

Mi_array[1] = "B"

Mi_array[2] = "C"

Esta sintaxis sirve tanto para mover datos al array como para extraerlos si ya estaban almacenados. El sistema de utilizar el índice, permite recorrer rápidamente el array con una instrucción de bucle for. Como ya se ha dicho, en cada celda de un array se puede poner cualquier cosa, incluso otro array. Esto permite crear arrays complejos de más de una dimensión, ya que JavaScript no tiene instrucciones para crear arrays multidimensionales como VBScript. El siguiente ejemplo crea un array de dos dimensiones utilizando instrucciones de bucle para recorrer los dos arrays: Mi_array = new Array(1) for (i=0; i < 2; i++) { Mi_array[i] = new Array(2) for (j=0; j < 2; j++) { Mi_array[i][j] = "["+i+","+j+"]" } } for (i=0; i < 2; i++) { resultado = "Linea "+i+":" for (j=0; j < 2; j++) { resultado += Mi_array[i][j] } document.write(resultado,"

") }

Y esto es lo que se obtiene: Linea 0:[0,0][0,1] Linea 1:[1,0][1,1]

La longitud de los arrays es dinámica. Es decir, que si se crea un array de una longitud cualquiera (incluso cero) y después se mueve un dato a una posición de índice superior a la creada, el array se redimensiona hasta el nuevo valor. Todas las posiciones entre el anterior límite y el nuevo, lógicamente, estan vacias. Propiedades El objeto array tiene una propiedad: length que indica la longitud del índice. Por ejemplo, si se crea el array: Mi_array = new Array(2) document.write(Mi_array.length) Se obtiene: 2 Fíjate en que, aunque el resultado es 2, son 3 las posiciones disponibles, ya que el

índice comienza por el 0. Métodos Además de los 3 métodos comunes a otros objetos de JavaScript, el objeto array tiene otros 3 propios: join reverse sort Veamos cómo funcionan: join(separador) Este método se utiliza para concatener todos los valores almacenados en el array en un string. Opcionalmente se puede establecer un string separador entre valores, que por defecto es la coma ,. Si se establece un separador que no es del tipo string, será convertido a string. Por ejemplo: Mi_array = new Array("Item1", 100, "Item3") document.write(Mi_array.join(", ")) Se obtiene: Item1, 100, Item3 sort(orden) Como indica su nombre, sirve para ordenar los elementos del array según el modo indicado por orden que puede ser una función, o una muestra de caracteres. Si se omite el modo de ordenación, todos los valores son convertidos a string y ordenados según el diccionario inglés por sus valores ASCII. Mi_array = new Array("B", 100, "A") document.write(Mi_array.sort()) Se obtiene: 100,A,B reverse() Se utiliza para transponer los elementos de un array de forma inversa, es decir que el primer elemento pasará a ser el último y viceversa. No es una ordenación, simplemente cambian de sitio. Mi_array = new Array("B", 100, "A") document.write(Mi_array.reverse()) Se obtiene: A,100,B Boolean Este objeto sirve para convertir cualquier valor a booleano, es decir, false o true. Por ejemplo. Mi_booleano = new Boolean("mi_valor") document.write(Mi_booleano) Se obtiene: true Si el argumento "mi_valor" es omitido o su valor es cero, null, false o empty ("") el objeto devuelve false. Cualquier otro valor, incluso la cadena "false" devuelve true. Métodos Tiene los tres métodos comunes de todos los objetos JavaScript. Date Trabaja con fechas y horas. Por ejemplo: Mi_fecha = new Date([argumentos]) document.write(Mi_fecha) Si se omite argumentos se obtiene: Mon, 25 Apr 2005 11:43:55 GMT+0200. Los argumentos son opcionales y sirven para inicializar el objeto. Si se omiten se inicializa con la fecha y hora del sistema (cliente). También pueden escribirse de diversas formas: Date("month day, year hours:minutes:seconds")

Date(year, month, day) Date(year, month, day, hours, minutes, seconds) Métodos Se dispone de un gran número de métodos destinados a obtener o establecer las distintas partes de una fecha/hora. Sea la variable Mi_fecha del ejemplo anterior. Para obtener alguna de las partes de su valor se escribe el objeto seguido del método. Por ejemplo: Mi_fecha.getDate() • • • • • • • • • • •

getDate El dia del mes. Es un número entre 1 y 31. getDay Dia de la semana en número. El domingo = 0. Es un número entre 0 y 6. getHours La hora. Es un número entre 0 y 23. getMinutes Los minutos. Es un número entre 0 y 59. getMonth El mes. Es un número entre 0 y 11. 0 = enero. getSeconds Los segundos. Es un número entre 0 y 59. getTime Es el número de milisegundos transcurridos desde el 1 de enero de 1970 a las 0:00:00 y la fecha/hora actual. getTimezoneOffset Zona horaria. Devuelve la diferencia en minutos entre la hora local y la GMT (Greenwich Meridian Time). getYear El año. Dependiendo del valor devolverá dos o cuatro dígitos. Entre 1900 y 1999 devuelve dos y a partir de 2000 cuatro. getFullYear Funciona como el anterior, pero con el año con cuatro dígitos siempre. Solamente funciona con versiones modernas de navegador. parse Funciona igual que getTime, pero en lugar de obtener los milisegundos hasta la fecha/hora actual, lo hace hasta la contenida en un string del tipo "Dec 20, 2005" o "Mon, 29 Dec 1999 13:30:00 GMT."

Como ya has visto, cuando el objeto ya tiene una fecha almacenada se utilizan los métodos get... para obtener algunas de las partes de esa fecha. Esta fecha se puede modificar en cualquier momento, bien entera o algunas de sus partes, mediante los métodos set...: • • • • • • • • • • •

setDate setHours setMinutes setMonth setSeconds setTime setYear setFullYear toGMTString toLocaleString UTC

Function([argumentos], "instrucciones") Curiosa forma de escribir funciones. Este objeto puede contener una función que trabajará de forma análoga a las declaradas con la instrucción function. Fíjate en que la diferencia de sintaxis entre ambas es simplemente que el objeto se define con una "F" mayúscula y la instrucción con una "f" minúscula. La diferencia práctica entre los dos procedimientos es que el objeto tiene propiedades que pueden invocarse, y la declarada con la instrucción no. Por contra, el objeto es evaluado cada vez que se invoca, mientras que la declarada con la instrucción es compilada, lo que la hace más eficiente. Los argumentos pueden omitirse si no son necesarios, las instrucciones, evidentemente, no. La particularidad de esta forma de escribir funciones es que tanto los argumentos (incluso aunque vayan a ser valores numéricos) como las instrucciones van dentro de strings en lugar del típico par de llaves. Por ejemplo:

var Mi_funcion = new Function("a", "b", "return (a * b)") document.write(Mi_funcion(2,5)) Se obtiene: 10 Propiedades Métodos Los tres comunes de los objetos JavaScript. Math Este objeto se utiliza para trabajar con constantes y funciones matemáticas. Esto hay que hacerlo mediante sus propiedades y métodos. Por ejemplo, la propiedad PI: document.write(Math.PI) Se obtiene: 3.141592653589793 Las propiedades devuelven valores constantes: • • • • • • • •

Math.E = 2.718281828459045 La constante de Euler o número e. Math.LN2 = 0.6931471805599453 Logaritmo natural de 2. Math.LN10 = 2.302585092994046 Logaritmo natural de 10. Math.LOG2E = 1.4426950408889634 Logaritmo en base 2 de e. Math.LOG10E = 0.4342944819032518 Logaritmo en base 10 de e. Math.PI = 3.141592653589793 Relación entre la circunferencia de un círculo y su diámetro. Math.SQRT1_2 = 0.7071067811865476 Raíz cuadrada de un medio (1/2). Math.SQRT2 = 1.4142135623730951 Raíz cuadrada de 2.

Los métodos son funciones matemáticas que admiten argumentos. Además de los tres comunes tenemos: • •

• •

• • •

• • • •

Math.sin(90) = 0.8939966636005579 Seno de un ángulo medido en radianes. El rango devuelto estará entre -1 y 1. Math.asin(-1) = -1.5707963267948966 Arco seno (en radianes) de un número. Tiene que ser un valor entre -1 y 1. El resultado obtenido siempre estará dentro del rango entre -pi/2 y pi/2 radianes. Si el valor está fuera de este rango devuelve NaN. Math.cos(1) = 0.7853981633974483 Coseno (en radianes) de un número. El resultado obtenido siempre estará dentro del rango entre -pi/2 y pi/2 radianes. Math.acos(-1) = 3.141592653589793 = pi Arco coseno (en radianes) de un número. Tiene que ser un valor entre -1 y 1. Si el valor está fuera de este rango devuelve NaN (Not-a-Number). Math.tan(90) = -1.995200412208242 Tangente de un ángulo medido en radianes. Math.atan(1) = 0.7853981633974483 Arco tangente (en radianes) de un número. El resultado obtenido siempre estará dentro del rango entre -pi/2 y pi/2 radianes. Math.atan2(20,50) = 0.3805063771123649 Devuelve, en un sistema cartesiano de coordenadas, el ángulo en radianes formado por el eje trazado entre el origen y el punto x,y definido por los argumentos de este método. Math.abs(01234) = 1234 Valor absoluto de un número. Math.ceil(20.5) = 21 Obtiene el número entero más pequeño posible que sea igual o mayor que el argumento dado. Math.floor(20.5) = 20 Al contrario que el anterior, obtiene el número entero más grande posible que sea igual o menor que el argumento dado. Math.exp(1) = 2.302585092994046 Números e.

• • • • • •

•

Math.log(10) = 2.302585092994046 Devuelve el logaritmo natural (en base e) del argumento dado. Math.pow(10, 3) = 1000 Potencia. El primer argumento es la base y el segundo el exponente. Math.max(10, 5) = 10 Compara el valor de los dos argumentos, que tienen que ser numéricos, y devuelve el mayor de ellos. Math.min(10, 5) = 5 El inverso del anterior. Compara el valor de los dos argumentos, que tienen que ser numéricos, y devuelve el menor de ellos. Math.random() = 0.09618143970146775 Se obtiene un número aleatorio entre 0 y 1 cuyo origen es el reloj del sistema. Math.round(2.5) = 3 Redondeo. Devuelve el número entero más próximo al argumento dado. Si la parte decimal es .5 o mayor, se redondea por exceso, como en el ejemplo. Si la parte decimal es menor que .5 se redondea por defecto. Math.sqrt(2) = 1.4142135623730951 Raiz cuadrada de un número.

Number Objeto para trabajar con valores numéricos. Es poco utilizado. Propiedades MAX_VALUE MIN_VALUE POSITIVE_INFINITY

NaN

NEGATIVE_INFINITY

Métodos Los tres comunes. String Práctico objeto para trabajar con cadenas. Tiene una propiedad: length. Por ejemplo: var Mi_cadena = new String("Esto es una prueba" ) document.write(Mi_cadena.length) Se obtiene: 18 que como ya habrás supuesto es la longitud de la cadena dada. Métodos Además de los tres comunes hay un gran número de ellos. Utilizando el mismo texto del ejemplo anterior, tendremos: • • • • • •

• •

String.big() = Esto es una prueba Aumenta el tamaño del texto. El tamaño es equivalente al obtenido con String.small() = Esto es una prueba Disminuye el tamaño del texto. El tamaño es equivalente al obtenido con String.fixed() = Esto es una prueba Cambia el tipo de letra a paso fijo. Es equivalente al obtenido con String.sup() = Esto es una prueba Aplica el efecto superíndice al texto. Es equivalente al obtenido con String.sub() = Esto es una prueba Aplica el efecto subíndice al texto. Es equivalente al obtenido con String.fontcolor("ff0000") = Esto es una prueba Establece el color del texto. Es equivalente al obtenido con . Fíjate en que el color hay que darlo en formato RGB hexadecimal. String.size(5) = Esto es una prueba Cambia el tamaño del texto. Es equivalente al obtenido con donde x es un valor entre 1 y 7 String.blink() = Esto es una prueba Efecto de intermitencia, equivalente al

• • • •

•

•

•

•

•

elemento String.bold() = Esto es una prueba Aumenta el peso del texto. Es equivalente al elemento String.italics() = Esto es una prueba Aplica el tipo de letra itálica al texto. Es equivalente al obtenido con String.strike() = Esto es una prueba Aplica el tipo de letra tachado al texto. Es equivalente al obtenido con String.charAt(0) = E Devuelve el caracter que haya en la posición del índice que se indica. Para este método el índice comienza por el cero. No confundir con la propiedad length que devuelve el número de caracteres que hay en la cadena, no un índice. String.indexOf("t", [start]) = 2 Devuelve la posición del primer caracter (solamente uno) indicado en el argumento que exista en la cadena. Para este método el índice comienza por el cero. Por defecto comienza a buscar por el primer caracter de la izquierda, y opcionalmente, se le puede indicar que comience la busca desde otra posición con [start]. Si el carácter buscado no existe devuelve -1. String.lastIndexOf(cadena, "prueba") = 12 Devuelve la posición de una subcadena (o un solo caracter) dentro de la cadena principal. Comienza a contar por el cero. Si el carácter o subcadena buscados no existen devuelve -1. String.search(cadena, "prueba") = 12 Es exactamente igual que la anterior, pero esta es una sintaxis más moderna que solamente funciona en versiones 4 o superiores de navegador. String.replace("prueba", "muestra") = Esto es una muestra Reemplaza un substring, un caracter o incluso la cadena entera por otro/a. Si la subcadena a buscar no existe devuelve la cadena original sin cambios. Cuando la primera ocurrencia es encontrada y sustituida no se continua con el resto de la cadena. String.split([separador]) Como su nombre indica, corta la cadena inicial y coloca cada substring obtenido en una celda de un array. El corte se realiza por el caracter indicado por separador. Por ejemplo: var cadena = new String("Esto es una prueba") var cadena2 = cadena.split(" ") for (var i=0; i < cadena2.length; i++) { document.write (cadena2[i] + " / ") }

•

Se obtiene: Esto / es / una / prueba / String.link(URL) Genera un enlace (link) a la dirección indicada por URL. Por ejemplo: var cadena = new String("Esto es una prueba") var cadena2 = cadena.link("http://sestud.uv.es/manual.esp ") document.write(cadena2)

• •

Se obtiene: Esto es una prueba String.toLowerCase() = esto es una prueba Convierte la cadena dada a todo minúsculas. String.toUpperCase() = ESTO ES UNA PRUEBA Convierte la cadena dada a todo mayúsculas.

RegExp Abreviatura de Regular Expressions, es decir, expresiones regulares. Esta es una forma de

trabajar con cadenas muy utilizada en algunos lenguajes de programación, como perl, muchos comandos del shell de Unix o Linux, etc. Consiste en ciertas convenciones para localizar cadenas o subcadenas con características variadas y son independientes de las acciones que se realizarán con ellas una vez localizadas. Se trata de establecer un patrón de búsqueda, que puede llegar a ser muy complejo, para localizar cualquier cadena y sus variantes dentro de otra cadena. Por ejemplo, partiendo de nuestra conocida cadena anterior: Esto es una prueba y su método search String.search(/una/, "Esto es una prueba") = 8 Al aplicar este patrón se le está preguntando si la cadena contiene la subcadena "una", y como la respuesta es true devuelve su posición. Esta es una expresión regular muy simple, veamos otra más complicada: String.search(/uno|[zxE]/, "Esto es una prueba") = 0 En este caso se busca "uno", que no existe en la cadena, y/o cualquiera de los caracteres que hay entre los corchetes. Como no existen z ni x, pero sí E, devuelve su posición que es la cero. Fíjate en que para enlazar una parte de la expresión con la otra se utiliza el caracter | llamado "pipe", y se pueden poner tantos como sean necesarios separando cada parte de la expresión regular. Si lo indicado por el patrón es encontrado más de una vez, se devolverá la posición de la última ocurrencia Dentro de los corchetes, además de caracteres o números sueltos, se pueden poner rangos completos indicando el primer caracter y el último separados por un guión: [a-z] o [0-9]. Esto significa que se debe buscar si en la cadena se encuentra cualquier caracter entre a y z o entre 0 y 9. Si lo que se buscan son mayúsculas, hay que indicarlo aparte: [A-Z] o dentro del mismo par de corchetes: [zxy A-Z]. En el caso de que el caracter a buscar sea el propio guión - o algun caracter especial, según donde se escriba habrá que ponerle el símbolo de "escape" (\) o no, como ya se dijo en el apartado ¿Cómo se escribe el JavaScript?. Por ejemplo, si va el primero: /[\-A-Z]/ pero no es necesario "escaparlo" si va el último: /[A-Z-]/ Además de para los caracteres especiales, el signo de escape se utiliza con algunos caracteres normales que tienen un doble significado y sirven para definir conjuntos de caracteres: /\w/ Cualquier caracter alfanumérico. /\d/ Cualquier dígito. /\s/ Cualquier caracter no visible, como el tabulador, el retorno o el espacio. Otros caracteres especiales que no necesitan escape son: • • • •

/./ El patrón coincidirá con cualquier caracter, excepto un salto de línea. /^[abc]/ Indica que el patrón buscado "abc" debe estar al comienzo de la cadena. /[^abc]/ Acepta cualquier caracter excepto los contenidos entre los corchetes. /$[abc]/ Indica que el patrón buscado debe estar al final de la cadena.

También se puede indicar cuantas veces debe existir el patrón en la cadena original: /E+/ Significa que E debe aparecer al menos una vez. /E*/ Cero o más veces. /E?/ Cero o una vez. /E{2}/ Dos veces. /E{2,}/ Dos veces como mínimo. /E{2,3}/ De dos a tres veces, inclusive. Una vez definida la expresión regular, es posible aplicarle un modificador para que no sean tenidas en cuenta las mayúsculas y minúsculas: /xyz A-Z/i No distinguirá entre mayúsculas y minúsculas (insensitive). Cuando se estan haciendo sustituciones en lugar de búsquedas el proceso se detiene al encontrar la

primera ocurrencia. Para evitar esto y que se hagan todas las sustituciones posibles hay que emplear otro modificador: cadena.replace(/a/g, "e") (global). cambia todas las "a" de la cadena por "e". Si es necesario, también pueden ponerse los dos modificadores juntos, y tiene importancia en que orden se escriben, normalmente será gi En JavaScript admiten expresiones regulares algunos métodos del objeto String como search, split y replace y por supuesto, el propio objeto RegExp, que no está muy claro para qué sirve. Las expresiones regulares, en general, son bastante complicadas por lo poco descriptivas que son en sí mismas. En su construcción tiene mucha importancia el orden en que se escriben las cosas. Hasta que tengas cierta práctica, si no consigues que funcione a la primera, no desesperes, es normal.

Métodos comunes de los objetos [objeto].eval(cadena) Este método, común a todos los objetos de JavaScript, tiene por finalidad evaluar cualquier expresión contenida en una cadena, es decir obtener un resultado numérico de la misma. Puede invocarse incluso sin hacer referencia a ningun objeto. Si dentro de la cadena a evaluar hay instrucciones JavaScript, objetos o variables previamente definidas, eval obtendrá sus valores ejecutando las instrucciones y evaluando los objetos previamente. Por ejemplo: var x = 2; var y = 10; var z = "5" document.write(eval("x * y + z + 1")) Se obtiene: 2051 Como puedes ver, la idea es muy parecida a la presentada por el objeto Function que hemos visto más arriba, que también trabaja con instrucciones dentro de una cadena. objeto.toString() La finalidad de este método, común para todos los objetos, es convertir a string cualquiera de ellos. Por ejemplo, sea el array var meses = new Array("Enero","Febrero","Marzo") Como ya sabemos, meses es un objeto, y no es posible concatenarlo con un string, ya que sus tipos son diferentes e incompatibles, pero si se escribe: document.write("Los meses son: " + meses) Se obtiene: Los meses son: Enero,Febrero,Marzo ¿Qué ha ocurrido? ¿porqué no se obtiene un error? Pues no se produce error porque JavaScript ha invocado automáticamente el método toString del objeto Array, a fin de intentar que los dos elementos a concatenar sean del mismo tipo. Es decir, que ha hecho esto: document.write("Los meses son: " + meses.toString()) Muy inteligente! Por supuesto, podemos escribirlo directamente y no esperar a que lo arregle JavaScript. objeto.valueOf() Este último método, común para todos los objetos, permite obtener el valor original de un objeto después de haber sido convertido, por ejemplo, con el anterior método toString. Al igual que el anterior, también será invocado de forma automática por JavaScript si es necesario en el contexto de la instrucción.

Las funciones predeterminadas de JScript A diferencia de otros lenguajes, JavaScript solamente tiene tres funciones intrínsecas. Esto significa que cualquier utilidad que se precise programar hay que obtenerla escribiendo el usuario la función correspondiente. isNaN() Evalua el argumento dado, que puede ser un valor o una expresión y devuelve un booleano que indica si puede considerarse como numérico o no numérico (Not a Number). Por ejemplo, si se escribe: document.write(isNaN(22)) Se obtiene: true parseInt(string [,base]) Esta función analiza un string, y teniendo en cuenta la base numérica indicada (si se indica), devuelve su valor entero. Si no se indica la base, JavaScript la decidirá analizando los dos primeros caracteres de la cadena: • • •

Si la cadena comienza por "0x," la base es 16 (hexadecimal). Si la cadena comienza por "0," la base es 8 (octal). Para cualquier otro valor la base es 10 (decimal).

En cualquier caso, aunque se indique la base, si el contenido de la cadena indica otra cosa, ésta será cambiada. Los tres ejemplos siguientes devuelven 17: parseInt("0x11", 16) parseInt("0x11", 0) parseInt("0x11") Como puede ver, el principio 0x de las cadenas es decisivo a la hora de obtener el entero resultante. Con otros contenidos, todos los ejemplos siguientes devuelven 15: parseInt("F", 16) parseInt("17", 8) parseInt("15", 10) parseInt(15.99, 10) parseInt("FXX123", 16) parseInt("1111", 2) parseInt("15*3", 10) Como puedes ver, si se encuentra un caracter que no puede ser considerado número en la base establecida, se ignorarán todos los caracteres siguientes, y se devolverá el entero obtenido hasta ese punto. Si el primer caracter de la cadena no puede ser considerado como número, la función devuelve NaN. No se evaluan expresiones dentro de la cadena, pero sí expresiones numéricas sin formato de cadena (en realidad tampoco sirven, pero JavaScript primero las evalua y después las convierte en cadena). parseFloat(string) De forma similar a la anterior, esta función analiza un string pero en lugar de devolver un entero devuelve un decimal de coma flotante. Si el primer caracter de la cadena no puede ser convertido a número, devolverá NaN. Los tres ejemplos siguientes devuelven 3.14: parseFloat("3.14") parseFloat("314e-2") parseFloat("0.0314E+2")

El modelo de objetos de los navegadores Los programas navegadores, como el Internet Explorer, Opera, o Netscape entre otros, proporcionan una serie de objetos a los que se puede acceder mediante los scripts escritos tanto en VBScript como JavaScript. Este modelo de objetos, ya de por sí bastante complejo, se termina de complicar debido a que sus componentes se anidan unos sobre otros, es decir, que un objeto, a su vez, está compuesto de otros objetos. A menudo, para llegar a una determinada propiedad de un objeto, hay que referenciar una larga ruta hasta llegar al objeto padre, que es window. En el siguiente gráfico tenemos la representación de la mayoría de estos objetos:

Se ve claramente que, en realidad, todos son sub-objetos del objeto window. En efecto, al tratarse este objeto del propio navegador, o mejor dicho, de la ventana donde se ejecuta el navegador, evidentemente, cualquier otro objeto debe estar integrado en él. Desafortunadamente, puede haber diferencias entre el modelo de objetos de un navegador a otro, propiedades adicionales no compartidas, sintaxis de referencia distinta, diferente versión del intérprete JavaScript, etc. Como siempre, se debe probar el código escrito con varios navegadores, y a ser posible, con varias versiones de los mismos. No hay que confundir los objetos del navegador con los objetos del propio JavaScript que son completamente diferentes. Se ha dicho que estos son objetos del navegador, pero en realidad, de forma directa, solamente los dos primeros niveles de ellos lo son, excepto document. El resto son creados con las instrucciones HTML de la página cargada, es decir, que los objetos contenidos en el objeto document dependerán del código HTML que se escriba.

El objeto window Es el objeto básico, y representa en sí mismo al propio navegador. Al ser el elemento principal del modelo de objetos, para referirse a sus propiedades, métodos o eventos, no es necesario referenciarlo específicamente. Como puedes ver en el esquema de objetos, hay cuatro sub-objetos que pueden considerarse como sinónimos del objeto window: frames, top, self y parent que suelen utilizarse en lugar de window. Por ejemplo, es lo mismo window.close() que self.close(). En JavaScript un frame es también una ventana (window), pero con la particularidad de que está contenida dentro de otra ventana (es decir, el objeto window. En realidad

todo está dentro de window). top hace referencia a la posición más alta en la lista de ventanas abiertas, es decir, la primera de todas. parent se refiere a una ventana que contiene un elemento frameset. Los cuatro, además, son considerados propiedades del objeto window. Si... esto es algo complicado. Este objeto, como todos, tiene métodos, propiedades y eventos. Veamos los más usuales:

MÉTODOS open('url', 'name', ['features'] ) Permite abrir una nueva ventana en la que se está ejecutando una nueva instancia del navegador (o simple ventana sin una nueva instancia, depende del navegador de que se trate). Opcionalmente, también permite definir las características que tendrá la nueva ventana, como son qué página mostrará, el nombre de la ventana y el aspecto que ofrecerá el navegador. En el siguiente ejemplo se captura el evento onClick del botón de un formulario para crear una nueva ventana: Objetos del navegador Y después de pulsar el botón "Abrir" del formulario, obtendremos una nueva ventana con esta apariencia:

Fíjate en las dos últimas líneas, las que corresponden al parámetro "features": onClick="window.open('http://sestud.uv.es/manual.esp/', 'Prueba', 'top=100, left=100, width=300, height=300, location=no, status=yes,' + 'toolbar=no, menubar=no, scrollbars=no, resizable=no')"> Como puedes ver, estan concatenadas por el signo +. En efecto, esto es javaScript, y no se pueden truncar líneas ni dejar espacios innecesarios entre valores. Los valores de estos parámetros, además de con yes/no, se pueden escribir con 0/1. Por ejemplo: scrollbars=0. Por defecto, todos los valores son yes. El nombre de las ventanas creadas no pueden contener espacios en blanco ni caracteres distintos de letras y/o números. Se admite el signo de subrayado ( _ ) pero no el guión ( - ) close() Cierra una ventana. Por ejemplo: Objetos del navegador Este método no funciona igual en todos los navegadores. Si escribes una página con el ejemplo

anterior y éste juntos, al pulsar el botón "Abrir" se abre una ventana llamada "prueba", y al pulsar el botón "Cerrar" se cerrará la ventana "prueba", permaneciendo el navegador abierto con la página inicial con los dos botones. Esto funciona correctamente con los navegadores Opera, Netscape y Mozilla, pero falla con el IE. Esto se debe a que los tres primeros navegadores, aunque se abran disferentes ventanas, solamente mantienen una instancia de programa ejecutándose en el sistema, pero el IE ejecuta una nueva instancia de programa con cada ventana, lo que impide que la primera conozca el nombre de las otras ventanas que hay abiertas. Para cerrar una ventana con el IE hay que escribir: onClick="window.close()"> Lo que provocará el cierre de la ventana donde estan los dos botones, pero permanecerá abierta la ventana "prueba" que era la que se pretendía cerrar. Para conseguir lo mismo que los otros navegadores, con el IE hay que esribir un complicado script en VBScript.

alert('mensaje') Muestra un mensaje de alerta que no ofrece respuesta alternativa del usuario, sino solamente darse por enterado. Por ejemplo: Objetos del navegador Y después de pulsar el botón "Prueba" del formulario, obtendremos el mensaje:

confirm('mensaje') Muestra un cuadro de diálogo con dos botones que devuelven un valor booleano cada uno (true o false) dependiendo del botón pulsado por el usuario. Por ejemplo: Prueba de mensaje > Después de pulsar el botón "Prueba" del formulario tendremos esto:

Y después de pulsar el botón "Aceptar" del cuadro de diálogo tendremos esto:

Fíjate en que, en este caso, el valor devuelto es "Verdadero" en lugar de "true". Para capturar los valores booleanos no se deben utilizar las frases que aparecen aquí, que han sido convertidas, sino que se debe evaluar directamente el valor booleano devuelto por el objeto, sin conversiones que dependan de la lengua utilizada por el navegador o configuraciones personales. Así: if confirm('Quieres continuar?') {

this.form.Campo1.value='Ha pulsado Aceptar'} else { this.form.Campo1.value='Ha pulsado Cancelar'}

prompt('mensaje', ['propuesta']) Muestra un cuadro de diálogo con dos botones y un campo de texto que, opcionalmente, puede tener una propuesta predefinida. Su funcionamiento es muy parecido al método confirm(). Sea por ejemplo: Prueba de entrada > Después de pulsar el botón "Prueba" del formulario tendremos esto:

En el ejemplo, después de escribir un texto cualquiera y pulsar el botón "Aceptar", lo escrito será recibido por Campo1, pero si se pulsa Cancelar, a diferencia del método confirm() que devolvería false, lo que se recibe es null

setTimeout('instrucciones', espera) Evalua y ejecuta el código JavaScript contenido en 'instrucciones' después de transcurrido el tiempo, en milisegundos, indicado por espera. La evaluación de las instrucciones solamente la hará una vez. Sea por ejemplo: Prueba de entrada function mensaje() { alert('Esto es una prueba') } Después de pulsar el botón "Prueba" del formulario, y transcurridos dos segundos, obtendremos:

clearTimeout(identificador) Después de haber utilizado el método setTimeout() anterior, JavaScript mantiene memorizada la evaluación que realizó del parámetro 'instrucciones'. Si en algun punto del programa es necesario repetir esa evaluación en lugar de utilizar la ya realizada, es preciso inicializarla previamente. Para ello se utiliza clearTimeout(identificador). Para poder hacerlo, es necesario que el método setTimeout() haya sido invocado mediante un identificador. Así, y refiriéndonos al ejemplo anterior: identificador=setTimeout('mensaje()', 2000)"> Y para inicializar la evaluación y poder realizarla de nuevo: clearTimeout(identificador) Evidentemente en este ejemplo no tiene sentido inicializar nada, ya que se trata de un mensaje fijo, pero este método es imprescindible si las instrucciones ejecutadas por setTimeout() son expresiones numéricas variables o contadores de tiempo.

elemento.focus() Fija el enfoque en un elemento de los contenidos en la ventana o en la propia ventana. Habitualmente el enfoque se fija en los objetos creados con las instrucciones HTML, como los formularios y todos sus sub-objetos (botones, listas, etc.). Hay que tener presente que una

ventana que está en primer plano puede no tener el enfoque, aunque lo normal es que lo tenga. Excepto en el objeto window, generalmente el enfoque se fija en un objeto cuando éste es tocado con el puntero del ratón (tocado, no pasado por encima) o bien al tabular desde el teclado. El objeto window puede recibir el enfoque automáticamente nada más ser abierto, sin necesidad de pulsación del ratón. Un objeto puede tener el enfoque y no parecerlo visualmente, por ejemplo los distintos frames de una página, y en la que cada uno de ellos tiene el rango de window. El método contrario de focus() es blur()

eval()

scroll()

toString()

Estos son los tres métodos comunes de todos los objetos de javaScript, y ya se describieron en ese apartado.

moveBy(x,y) moveTo(x,y) Estos dos métodos sirven para mover una ventana, previamente abierta, un número determinado de píxels hasta una determinada posición. Por ejemplo: Ventanas en movimiento function Mover() { Ventana.moveBy(5,5); i++; if (i