JavaScript y Java

JavaScript y Java
Un poco de historia.
El JavaScript es un lenguaje de programacin que surgi por la necesidad de ampliar las posibilidades del HTML. En efecto, al poco tiempo de que las pginas web apareciesen, se hizo patente que se necesitaba algo ms que las limitadas prestaciones del lenguaje bsico, ya que el HTML solamente provee de elementos que actuan exclusivamente sobre el texto y su estilo, pero no permite, como ejemplo sencillo, ni siquiera abrir una nueva ventana o emitir un mensaje de aviso. La temprana aparicin de este lenguaje, es posiblemente la causa de que se haya convertido en un estndar soportado por todos los navegadores actuales, a diferencia de otros, que solo funcionan en los navegadores de sus firmas creadoras.
Como tantas otras aportaciones al mundo www, fue Netscape quien inici la implementacin de JavaScript (aunque al principio no se llamaba as), y posteriormente, una alianza entre Netscape y Sun, creadora del lenguaje Java, permiti que JavaScript tomase la debida consistencia, definindose como una variante de Java, pero mucho ms simple de usar. Esto no significa que JScript sea Java simplificado o reducido. Salvo el nombre y la sintaxis, JScript no tiene mucho en comn con Java, pero cumple su propsito de lenguaje auxiliar del HTML.
Diferencias
Java es un lenguaje compilado, es decir, que una vez escrito el programa, y a partir de su cdigo fuente, mediante la compilacin se genera un fichero ejecutable para una determinada plataforma (Unix, Windows, etc.) que ser completamente autnomo. Es un lenguaje de propsito general, infinitamente ms potente que JScript, con el que se han escrito infinidad de aplicaciones muy conocidas, entre ellas los sistemas de telefona mvil.
JavaScript es un lenguaje interpretado lnea a lnea por el navegador, mientras se carga la pgina, que solamente es capaz de realizar las acciones programadas en el entorno de esa pgina HTML donde reside. Slo es posible utilizarlo con otro programa que sea capaz de interpretarlo, como los navegadores web.
Este es un lenguaje orientado a objetos, es decir que la mayora de las instrucciones que se emplean en los programas, en realidad son llamadas a propiedades y mtodos de objetos del navegador, y en algunos casos del propio lenguaje. En Java, en cambio, no hay nada que no est en un objeto.
Cmo se utilizan?
Java El lenguaje Java es, posiblemente, el que tienen mayor portabilidad, lo que permite escribir programas capaces de ejecutarse en cualquier plataforma, sin realizar apenas ningun cambio. Esta portabilidad propici que el HTML implementase la posibilidad de incrustar programas escritos en
Java, que pueden funcionar de forma independiente del resto de la pgina. Estos programas autnomos reciben el nombre de APPLETS, y se integran en el cdigo HTML mediante el elemento <APPLET>. Se utiliza as:
<BODY>
<APPLET CODE="AnimText.class" WIDTH=600 HEIGHT=40> <PARAM NAME=text VALUE="Esto es una prueba de Applet Java"> <PARAM NAME=font VALUE="TimesRoman"> <PARAM NAME=type VALUE=1> <PARAM NAME=fgcolor VALUE="yellow"> <PARAM NAME=min VALUE=12>
<PARAM NAME=max VALUE=36> <PARAM NAME=naptime VALUE=100> <PARAM NAME=align VALUE=left> </APPLET> .. .. .. </BODY>
Este es un applet que forma "olas" con un texto, y puedes probarlo desde aqu.
Analicmoslo brevemente:
El valor del atributo CODE es el nombre del programa: "AnimText.class". Los applets Java
cuando se compilan, no son ejecutables directamente desde el sistema operativo de tu mquina, son compilados a nivel objeto (un nivel intermedio entre el cdigo fuente y el cdigo ejecutable) con la extensin .class, y ejecutados a travs del visualizador.
Los siguientes elementos son PARAM NAME, y puede deducirse fcilmente para que sirve cada uno: definicin del texto que va a aparecer, fuente de la letra, color del texto, etc..
Si pulsas aqu podrs ver el cdigo fuente de este applet.
JavaScript Para embeber un JavaScript en una pgina HTML, se utiliza el elemento <SCRIPT>. Este elemento, habitualmente, va dentro del HEAD de la pgina, y no en el BODY.
Por ejemplo si escribes:
<HTML> <HEAD> <TITLE> Prueba</TITLE>
<SCRIPT LANGUAGE="JavaScript"> <!-document.write("<CENTER><H3>Mi primer JavaScript</H3></CENTER>") // --> </SCRIPT> </HEAD>
<BODY>
</BODY> </HTML>
Tendramos una pgina con el ms elemental de los scripts. Fjate en que despus del elemento SCRIPT se abre un comentario ()que contiene las instrucciones. Esto es para ocultar el script a los visualizadores que no sean capaces de interpretarlo. Fjate tambin en que antes del cierre del comentario (-->) hay dos barras (//): Esto es para que el intrprete JScript no tome el cierre como un instruccin y d un error, es decir, se trata de un comentario propio de JScript, no de HTML.
Puedes probar el script pulsando aqu.
En el ndice encontrars algunos ejemplos de pginas con programas JavaScript. Para ver cmo estan hechos puedes abrirlos con el bloc de notas o cualquier otro editor.
Una de los problemas ms graves que tiene el JavaScript es que cada navegador tiene un nivel de lenguaje diferente, hay distintas versiones de lenguaje oficial, y hay versiones de lenguaje que slo funcionan en un navegador concreto. Cuando en una sesin los navegadores han cargado un cierto nmero de pginas con cdigo JavaScript (es decir, casi todas), es raro que todas ellas contengan
cdigo cien por cien compatible con nuestro navegador, y ste acaba colgndose, no cargando
correctamente las pginas, o no ejecutando los programas JavaScript que stas contienen. Como siempre se ha dicho en esta guia, se debe probar el cdigo en cuantos navegadores sea posible, y tratar de escribir los programas de la forma ms estandarizada posible.
Cmo se escribe el JavaScript?
El elemento <SCRIPT>
Los scripts de JavaScript se escriben de forma similar a los de VBScript, pero su sintaxis es mucho ms estricta, y esta es una de las causas ms habituales de error. En JavaScript, a diferencia de VBScript, no se pueden escribir maysculas alegremente. No es lo mismo MiFuncion() que mifuncion(), y si escribimos, por ejemplo, Document.Write() no funcionar. Todo el cdigo deber ir escrito entre <SCRIPT> y </SCRIPT>. Puesto que este elemento HTML es el mismo que se emplea con otros lenguajes, como VBScript, es preciso indicar al navegador el lenguaje que se va a utilizar al definir el script. Sea por ejemplo:
<SCRIPT LANGUAGE=JavaScript> <!-document.write("Esto ha sido escrito por JavaScript") // --> </SCRIPT>
Fjate en que dentro de la etiqueta HTML <SCRIPT> y antes del cdigo JavaScript propiamente dicho, aparece el smbolo del comentario HTML . Estas barras son el indicativo de que lo que viene a continuacin es un comentario tambin, pero del propio JavaScript en este caso, y hay que ponerlas para evitar que el intrprete JavaScript tome el cierre del comentario html como una instruccin y produzca un error de sintaxis. Esto es vlido siempre que el comentario vaya a tener una sola lnea. Si va a tener ms se utilizarn /* ... */. As:
/* Comentario 1 Comentario 2 */
JavaScript entiende que una instruccin ha terminado cuando encuentra un retorno de lnea, pero si se desea escribir ms de una instruccin en la misma lnea hay que separarlas con ; al final de cada instruccin, excepto la ltima que no lo necesita, aunque no ocurre nada si se escribe.
Los scripts pueden escribirse tanto en la <HEAD> como en el <BODY> de la pgina. Por claridad a la hora de revisar el cdigo, es preferible escribir todas las declaraciones y sentencias al principio de la pgina, en la <HEAD>, aunque esto depender de las necesidades del programa, claro. Tambin, si ello es necesario, puede escribirse el cdigo en los dos sitios a la vez. Por ejemplo, si escribimos
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE> <SCRIPT LANGUAGE=JavaScript> <!-document.write("Esto ha sido escrito por JavaScript desde
HEAD <BR>") // --> </SCRIPT> </HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript> <!-document.write("Esto ha sido escrito por JavaScript desde BODY") // --> </SCRIPT> <P> Esto ha sido escrito por HTML.
</BODY> </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 ms de una lnea, 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 funcin:
<HTML> <HEAD> <TITLE>Capturar evento de boton</TITLE> <SCRIPT LANGUAGE=JavaScript> <!-function mensaje() { alert("Esto es un mensaje de JavaScript") } // --> </SCRIPT>
</HEAD> <BODY>
<FORM NAME="Formulario1"> <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba" onClick="mensaje()">
</FORM>
</BODY> </HTML>
Fjate en que la funcin es invocada al pulsar el botn del formulario, capturando un evento: onClick, pero tambin es posible escribir directamente la instruccin en el punto de captura en lugar de utilizar el elemento <SCRIPT>. Por ejemplo:
<HTML> <HEAD><TITLE>Capturar evento de boton</TITLE></HEAD> <BODY>
<FORM NAME="Formulario1"> <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba" onClick=javascript:alert("Mi mensaje")> </FORM>
</BODY> </HTML>
Esta forma es aceptable si, como en el ejemplo, la funcin es muy simple.
Al igual que se puede hacer con las hojas de estilo en cascada (CSS), JavaScript permite que todo el cdigo (o parte de l) est en un fichero independiente de la pgina html, lo que permite modificar y mantener ms rpidamente la programacin, sin necesidad de editar muchos ficheros diferentes. El
fichero que contiene el cdigo JavaScript, normalmente tiene la extensin .js Sea el ejemplo anterior:
<HTML> <HEAD> <TITLE>Capturar evento de boton</TITLE> <SCRIPT LANGUAGE=JavaScript src="fichero.js"></SCRIPT> </HEAD> <BODY>
<FORM NAME="Formulario1"> <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba" onClick="mensaje()"> </FORM>
</BODY> </HTML>
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 <SCRIPT>, 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, despus las funciones, y a continuacin 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 sern invocadas desde el ncleo del programa. Por ejemplo, si una instruccin que llama a una funcin se escribe antes que la funcin llamada, se producir un error, ya que en ese momento la funcin todava 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 nmeros, lo que excluye letras acentuadas, ees, cedillas, etc. Al escribirlos, si se utilizan maysculas, 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 actuacin de la variable, habr que utilizar, o no, la instruccin var en el momento de crearla. Por ejemplo:
var MiVariable = 2004
Tambin es posible definir varias variables en una misma lnea:
var Variable1, Variable2, Variable3
Como puedes ver, la instruccin var es similar a la instruccin Dim de VBScript. Cuando una variable es definida con la instruccin 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 instruccin var, es una variable de mbito global, no importando dnde ha sido declarada, y estar disponible en cualquier lugar de la pgina (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 pgina, 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, nmeros, 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 sabrs, un string o cadena es cualquier contenido acotado por comillas, simples ' o dobles ".
mivariable = "Hola"
Tambin es posible concatenar dos o ms cadenas usando el signo + :
mivariable = "Prueba de " + "concatenado"
Y este sera 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 vlidas 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 provocara 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 carcter normal. As:
mivariable = "Prueba de " + "\"concatenado\" " + '\'doble\''
Prueba de "concatenado" 'doble'
Esto mismo tambin es posible hacerlo usando el cdigo hexadecimal del carcter deseado. Normalmente se utiliza la codificacin hexadecimal slo con los caracteres que no admiten el "escapado" (que son casi todos). Aplicndolo a las comillas sera as:
mivariable = "Prueba de " + "\x34concatenado\x34 " + '\x27doble\x27 '
Adems de las comillas y el cdigo hexadecimal ya vistos, se puede "escapar" la misma barra inclinada: \\, la \t para insertar un tabulador horizontal, y la \n para forzar una nueva lnea. Fjate que en el caso de estos dos ltimos, el escape funciona al revs 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 lnea. Recuerda tambin que tanto el tabulador como la nueva lnea 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 escpndose a s misma. Por ejemplo, si se escribe la tpica 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 carcter, y adems, al estar junto a la t, se ha interpretado como indicador de tabulacin. 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 intrnsecas de JavaScript: escape() y su inversa: unescape(). La funcin escape() devuelve el cdigo ASCII decimal de los caracteres especiales, es decir cualquier caracter que no sea una letra (maysculas o minsculas), un nmero, o el punto, el guin, el subrayado o la arroba (Az 1-9 _ . @). Todos los dems sern 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 funcin no se puede definir otra funcin, pero s pueden realizarse llamadas a cuantas sea necesario. Para declarar una funcin simplemente se escribe la instruccin function y a continuacin el nombre que tendr seguido de un par de parntesis que contendrn 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, nmeros e incluso objetos.
Despus de haber definido el nombre de la funcin, se escribe un par de llaves, dentro de las cuales irn todas las lneas que compongan el cdigo de nuestra funcin. 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 funcin cambia el valor de los parmetros recibidos, este cambio no se reflejar globalmente, sino que slo ser efectivo en el mbito de la propia funcin, ni siquiera si la misma funcin es llamada desde otro punto del programa.
No hay que confundir la declaracin de funciones con el objeto Function() de javaScript. Fjate en que el nombre de este objeto comienza por "F" mayscula. Se ver en el apartado Objetos.
Normalmente las funciones se invocarn capturando un evento, es decir, un suceso que se produce y es detectado en la ventana del navegador. Uno de los eventos ms comunes es el que detecta la pulsacin (onClick) del puntero del ratn sobre un objeto, por ejemplo, un botn de un formuulario. En el siguiente ejemplo veremos cmo escribir una pgina que captura un evento en el botn de un formulario que llama a una funcin. Esta funcin invoca el mtodo alert del objeto window:
<HTML> <HEAD> <TITLE>Capturar evento de boton</TITLE> <SCRIPT LANGUAGE=JavaScript> <!-function mensaje() { alert("Esto es un mensaje de JavaScript") }
// --> </SCRIPT>
</HEAD> <BODY>
<FORM NAME="Formulario1"> <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba" onClick="mensaje()"> </FORM>
</BODY> </HTML>
Y al pulsar el botn, se obtiene:
Al ser capaz function de realizar acciones tanto como de devolver valores, es necesaria una instruccin que le indique lo que debe hacer: return. Solamente si aparece esta instruccin al final de la funcin, 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:
<HTML> <HEAD><TITLE>Prueba de JavaScript</TITLE> <SCRIPT LANGUAGE=JavaScript> <!-function sumar(a, b) {
sumar = a + b } // --> </SCRIPT> </HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript> <!-document.write(sumar(2, 2)) // --> </SCRIPT>
</BODY> </HTML>
Se obtiene:
undefined
Como puedes ver, se ha definido una funcin con dos argumentos: a y b que sern 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:
<HTML> <HEAD><TITLE>Prueba de JavaScript</TITLE> <SCRIPT LANGUAGE=JavaScript> <!-function sumar(a, b) { sumar = a + b return sumar }
// --> </SCRIPT> </HEAD>
<BODY>
</BODY> </HTML>
Esta vez s se obtiene lo esperado:
En el ejemplo, la funcin devuelve el resultado de la suma en una variable que se llama igual que la propia funcin: sumar, pero tambin se puede hacer sobre una variable con distinto nombre. Por ejemplo, funcionara igual as:
<HTML> <HEAD><TITLE>Prueba de JavaScript</TITLE> <SCRIPT LANGUAGE=JavaScript> <!-function sumar(a, b) { resultado = a + b return resultado } // --> </SCRIPT> </HEAD>
<BODY>
</BODY>
</HTML>
Tambin es posible devolver directamente el resultado de la suma sin depositar el valor previamente en ninguna variable ni en el nombre de la funcin:
<HTML> <HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript> <!-function sumar(a, b) { return a + b } // --> </SCRIPT> </HEAD>
<BODY>
</BODY> </HTML>
En JavaScript las funciones que tienen argumentos, como la del ejemplo, automticamente son provistas de un vector conteniendo los valores de los argumentos. Y te preguntars 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 funcin, y como todos los vectores y arrays, la numeracin 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 funcin, es decir, el ndice 0 corresponde al argumento a y el ndice 1 corresponde al b. Este ejemplo es equivalente al anterior:
<HTML> <HEAD><TITLE>Prueba de JavaScript</TITLE> <SCRIPT LANGUAGE=JavaScript> <!-function sumar(a, b) { return arguments[0] + arguments[1] } // --> </SCRIPT> </HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!-document.write(sumar(2, 2)) // --> </SCRIPT>
</BODY> </HTML>
La palabra arguments, como ya habrs supuesto, es reservada y no puede emplearse como nombre de variable ni de funcin, y tiene una propiedad: length que nos indica la longitud del ndice del vector. Por ejemplo, si modificamos un poco la funcin anterior:
<HTML> <HEAD><TITLE>Prueba de JavaScript</TITLE> <SCRIPT LANGUAGE=JavaScript> <!-function sumar(a, b) { return arguments.length } // --> </SCRIPT> </HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!-document.write(sumar(2, 2)) // --> </SCRIPT>
</BODY> </HTML>
Se obtiene 2 que es el nmero de argumentos que tiene la funcin. Fjate 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:
Aritmticos Lgicos De comparacin Binarios De asignacin Otros
Operadores aritmticos
Suma (+). Suma dos nmeros: 3 + 2 = 5 . Si en lugar de nmeros se suman cadenas, como por ejemplo "A" + "B" = "AB" se produce una concatenacin. 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 nmeros. Ejemplo A: 3-2 = 1 . Ejemplo B: (-1)-(-2) =1.
Negativo (-). Indica el signo negativo de un nmero o una expresin: -3.
Divisin (/). Divide dos nmeros, obteniendo un cociente de coma flotante: 5 / 2 = 2.5 . Fjate en que el separador decimal es el punto.
Mdulo aritmtico %. Divide dos nmeros, obteniendo un resto entero: 5 % 2 = 1 .
Multiplicacin (*). Multiplica dos nmeros: 3 * 2 = 6 .
Incrementos y decrementos (++ --). Incrementa o decrementa el valor de una variable numrica
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 efecta antes de que la expresin sea evaluada, y en el segundo, se incrementa despus de la evaluacin segn indica el orden de precedencia de los operadores (ver tabla al final de esta pgina). 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 lgicos
Estos operadores tienen unas aplicaciones un tanto especiales, ya que no funcionan como los aritmticos, conocidos por todos. Para comprender el funcionamiento de los operadores lgicos, primero hay que saber qu son los estados lgicos de una expresin. Y te preguntars que es eso de "estados lgicos"... Esta es una cuestin un tanto filosfica, ya que el estado lgico 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 expresin. En JavaScript hay tres posibles estados lgicos: True (verdadero), False (falso) y Null (nulo, es decir que no se ha establecido estado alguno por la razn que sea)
Por ejemplo, supongamos que hay que establecer el estado lgico de un material: El hierro. Evidentemente, para establecer un estado lgico 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 expresin El hierro es un metal . Si tenemos que establecer el estado lgico de esta expresin, la respuesta inmediata es Verdadero (True) y si la expresin fuese El hierro no es un metal , inmediatamente pensarmos que el estado adecuado es Falso (False)
Una vez establecido el estado lgico de la expresin, los operadores lgicos nos permitirn tomar
decisiones mediante la verificacin de ese estado, bien tomando uno solo, o agrupando varios de ellos. Al igual que los operadores aritmticos, los operadores lgicos tienen un orden preestablecido de evaluacin que debe ser tenido en cuenta. Los estados lgicos, o mejor dicho, el resultado que dan los operadores lgicos, pueden tratarse tambin como nmeros booleanos, siendo True equivalente a 1 y False equivalente a 0.
Negacin lgica ! (Not). Establece una negacin lgica en una expresin, es decir, que ante una
expresin, cuyo estado lgico 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 expresin:
Si la expresin = True el operador devuelve False. Si la expresin = False el operador devuelve True. Si la expresin = Null el operador devuelve Null.
Conjuncin lgica && (And). Establece una conjuncin lgica de dos expresiones, es decir, que han de resultar True (verdadero) las dos expresiones para que el resultado final tambin 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 Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin
Como puedes ver, si, y slo si, ambas expresiones se evalan como True, el resultado es True. Si cualquiera de las expresiones es False, el resultado es False.
Disyuncin lgica || (Or). Establece una disyuncin lgica de dos expresiones, es decir, que el resultado se dar evaluando una expresin 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 Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin
Como puedes ver, si cualquiera de las expresiones, o ambas, son True, el resultado es True.
Exclusin lgica ^ (Xor). Establece una exclusin lgica de dos expresiones, es decir, que el resultado se dar evaluando una expresin u otra, y dar True si solamente una de ellas es True, lo que implica la exclusin de la otra.
True && Expresin 2 = True el resultado es True. True && Expresin 2 = False el resultado es False. True && Expresin 2 = Null el resultado es Null. False && Expresin 2 = True el resultado es False. False && Expresin 2 = False el resultado es False. False && Expresin 2 = Null el resultado es False. Null && Expresin 2 = True el resultado es Null. Null && Expresin 2 = False el resultado es False. Null && Expresin 2 = Null el resultado es Null.
1 1 1 1 1 1 1 1
= = = = = = = = =
True || Expresin 2 = True el resultado es True. True || Expresin 2 = False el resultado es True. True || Expresin 2 = Null el resultado es True. False || Expresin 2 = True el resultado es True. False || Expresin 2 = False el resultado es False. False || Expresin 2 = Null el resultado es Null. Null || Expresin 2 = True el resultado es True. Null || Expresin 2 = False el resultado es Null.
Null || Expresin 2 = Null el resultado es Null.
1 1 1 1 1 1 1 1 1
= = = = = = = = =
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 Expresin Si la Expresin Si la Expresin Si la Expresin
Como puedes ver, si una y slo una de las expresiones es True, el resultado es True. Si cualquiera de las expresiones es Null, el resultado tambin ser Null.
Operadores de comparacin
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 tambin que coincidan los tipos de datos. Por ejemplo: 2 === "2" devuelve False
Desigualdad (!=) Funciona de la misma forma que la igualdad, pero negndola. Por ejemplo: 2 != "2" devuelve False
Desigualdad estricta (!==) Lo mismo que la igualdad estricta, pero negndola. Por ejemplo: 2 !== "2" devuelve True
Y estos cuatro, seguro que ya sabes cmo funcionan:
Mayor que (>)
Mayor o igual que (>=)
Menor que (<)
Menor o igual que (<=)
Operadores que trabajan con bits
Existen algunos operadores que funcionan bit a bit, convirtiendo previamente los valores a binario. Son los siguientes: << >> >>> & | ^
Para comprender como trabajan estos complicados operadores lo mejor son los ejemplos:
Bitwise shift operators
9 << 2 = 36 con valor negativo: -9 << 2 = -36
Primero convierte a binario el primer operando 9 = 1001 A continuacin aade a su derecha el nmero de bits cero que indique el segundo operando (2). Resulta: 1001 00 = 36
9 >> 2 = 2 con valor negativo: -9 >> 2 = -3
Primero convierte a binario el primer operando 9 = 1001 A continuacin, y comenzando de derecha a izquierda, elimina el nmero 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 nmeros positivos. Con nmeros negativos no est muy
True ^ Expresin 2 = True el resultado es False. True ^ Expresin 2 = False el resultado es True. False ^ Expresin 2 = True el resultado es True. False ^ Expresin 2 = False el resultado es False.
1 1 1 1
= = = =
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 nmero 15 en binario es 1111 y el 9 1001. Si aplicamos los tres operadores lgicos a esta pareja de valores, se obtiene:
15 & 9 = 9
15 | 9 = 15
15 ^ 9 = 6
Y seguramente te estars diciendo que no entiendes nada... Analicemos uno. Sea, por ejemplo, el ltimo de ellos: 15 ^ 9 = 6. Ms arriba se ha descrito este mismo operador, que es Xor. Recordemos que establece una exclusin lgica de dos expresiones, es decir, que el resultado se dar evaluando ambos valores, y dar True si solamente una de ellas es True. Recordemos tambin que en binario 1 = True y 0 = False. Por tanto
15 = 1 1 1 1 9=
1 0 0 1 -----------------------------False True True False
(1111 AND 1001 = 1001)
(1111 OR
(1111 XOR 1001 = 0110)
1001 = 1111)
o lo que es igual,
0110
No hay que confundir estos tres operadores con sus homlogos lgicos vistos ms arriba, que se representan con el mismo smbolo pero doble (excepto este).
Operadores de asignacin
Asignacin simple (=) Asigna un contenido a una variable o a un objeto. Por ejemplo: mivariable = "Saludos"
En JavaScript el operador de asignacin tiene la particularidad de que puede combinarse con algunos de los operadores aritmticos, 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 atpicos
typeof Este operador nos indica el tipo de dato contenido en un variable, un literal o el resultado de una expresin. 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 presentacin de resultados sern anulados. En principio podemos dudar de su utilidad, pero puede resultar muy til en las ocasiones en que, dependiendo de una evaluacin previa, haya que deshabilitar algun objeto o impedir alguna accin. Por ejemplo, bloqueando un formulario donde no se han cumplimentado algunos campos obligatorios, o si algun valor es errneo. El siguiente ejemplo genera un link que no funciona: Este link no funciona
Y se escribe: <A HREF="javascript:void(0)">Este link no funciona</A>
new Sirve para crear una instancia de un objeto definido por el usuario, o tambin, para crear alguno de los objetos intrnsecos de javaScript:, como son: Array, Boolean, Date, Function, Math, Number o String. Lo veremos con ms detalle en la pgina dedicada a los objetos.
Como puedes ver, JavaScript dispone de una gran variedad de operadores. Cuando se escriben expresiones lgicas complejas es recomendable usar los parntesis para cada sub expresin participante, y no olvides tener siempre en cuenta el orden de evaluacin de los operadores. Es relativamente fcil 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 evaluacin. 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 evaluarn en el orden en que hayan sido escritos en la expresin a evaluar:
Operador
. [] ()
++ -- - ~ ! delete new typeof void
*/%
+-+
<<
< <=
== != === !==
&
&&
||
?:
>>
>>>
> >=
Descripcin
Acceso a campos, ndice de matrices y llamada a funciones.
Incremento +1, decremento -1, negativo, NOT, NOT lgico borrado, crear objeto, mostrar tipo, indefinido
Multiplicacin, divisin, mdulo de divisin (resto)
Suma, resta, concatenacin 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
Asignacin
Evaluacin mltiple
Los parntesis se utilizan para alterar el orden natural de evaluacin de los operadores. Una expresin con parntesis ser evaluada completa antes de que su valor resultante sea utilizado por el resto de instrucciones.
Para hacerse una idea ms clara, veamos un ejemplo. Sea la siguiente expresin:
X = 78 * (96 + 3 + 45)
Como puedes ver, hay cinco operadores en este orden: =
De acuerdo con su orden de precedencia, se evaluarn en este orden: ()
Y esta sera la forma de operar paso a paso:
En primer lugar, se resuelve el parntesis: 96 + 3 = 99 y a continuacin 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 instruccin ms utilizada en programacin. En efecto, raro es el programa, por pequeo que sea, que no la contenga al menos una vez. Su funcionamiento es muy simple: es como un interruptor. Evalua un expresin y si el resultado es true realiza las acciones que tenga programadas, y si es false realiza otras acciones alternativas, o no hace nada, segn convenga. Por ejemplo:
var x = 2
if (x == 3) { document.write("x vale 3") }
En este caso, al no devolver true la condicin, no se obtiene ningn 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 accin a realizar es breve, tambin puede escribirse en una sola lnea:
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 ms de una lnea, 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 instruccin 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 ejecutarn con cada ciclo del bucle. La sintaxis es:
for([contador;] [condicion;] [incremento]) { ..... instrucciones .... }
La primera expresin de los argumentos, contador, define el contador del bucle y lo inicializa. La segunda, condicion, es donde se declara la condicin o condiciones que se tienen que cumplir para que el bucle termine. El bucle seguir ejecutndose hasta que la expresin 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 expresin 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] + "<br>" ) }
Se obtiene:
Mi_array0 = A Mi_array1 = B Mi_array2 = C
Fjate 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 nmero 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 condicin, lo hace mientras (while) se mantenga el resultado inicial de la condicin, es decir, lo mismo pero al revs. Por ejemplo:
var x = 0
while( x < 3 ) { x++ document.write("x = " + x + "<br>") }
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 instruccin el incremento del contador, que est dentro de las instrucciones ejecutadas por el bucle.
Tanto while() como for() pueden utilizar una instruccin que permite salir del bucle, si conviene, antes de que se cumplan todas las repeticiones programadas en el contador. Se trata de break. Tambin pueden emplear la instruccin 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 + " }
Se obtiene:
x x
x x
= = = =
1 2 4 5
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 lnea, en la que x = 3 vemos que hay un salto. En efecto: continue ha entrado en accin y el control del bucle ha saltado desde la instruccin comenzando un nuevo ciclo sin ejecutar las dos instrucciones que restaban, y que habran 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 seran 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:
y = " + y + "<br>")
y y y y
= = = =
1 3 7 12
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 instruccin for().
"<br>")
this Es una palabra reservada que se utiliza para referirse al objeto actual en el que se est ejecutando el cdigo. 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 funcin de verificacin:
<HTML> <HEAD> <TITLE>Pruebas JScript</TITLE>
<SCRIPT LANGUAGE="JavaScript"> function validar(numero) { if (numero.indexOf("2") != -1) return true; else { alert('No has escrito un 2'); return false; } } </SCRIPT>
</HEAD>
<BODY> <FORM NAME="Formulario" METHOD="GET" ACTION " " onSubmit="return validar(this.campo1.value)"> Escribe un 2: <INPUT NAME="campo1" TYPE="text"><BR> <INPUT TYPE="submit" VALUE="Validar"> </FORM>
</BODY> </HTML>
Fjate en la instruccin this.campo1.value En realidad lo que hace this es sustituir a la referencia real que sera: document.Formulario.campo1.value
with Esta instruccin 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 matemticos:
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
comment ver el apartado Cmo se escribe el JavaScript?
Objetos y funciones de JScript
Los objetos de JScript
JavaScript dispone de objetos intrnsecos del lenguaje, es decir, que ya existen y estn disponibles sin crearlos. No hay que confundirlos con los objetos del navegador, que tienen funcionalidades
distintas. Casi todos tienen propiedades y mtodos, 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 mayscula y las instrucciones por una minscula.
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 sesin lo almacenado, no son ficheros. Al ser la memoria del cliente el lugar donde se almacenan los datos, el acceso a ellos es muy rpido. Los datos almacenados pueden ser de cualquier tipo: nmeros, cadenas, objetos, etc., y pueden mezclarse.
Segn la sintaxis que se utilice, el objeto funciona de distinta manera. Si se escribe:
Array(2) se crea un array vaco 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 nmero se escriben varios separados por comas, tambin sern almacenados, y el array tendr tantas celdas como argumentos se hayan escrito dentro de los parntesis, 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 todava disponibles los datos que se guardarn en l. cmo mover los datos despus? cambiando de nuevo la sintaxis:
Se crea el array: Array(2) y se le mueven los datos: Array[0] = "A"
"B" Array[2] = "C"
return ver el apartado funciones
Array[1] =
Fjate en que para asignarle valores a las celdas, esta vez se hace escribiendo el nmero de ndice de la celda entre corchetes en lugar de parntesis.
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 ms de uno? si no tienen un nombre que los distinga, al crear el segundo, estaramos 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"
Esta sintaxis sirve tanto para mover datos al array como para extraerlos si ya estaban almacenados.
El sistema de utilizar el ndice, permite recorrer rpidamente el array con una instruccin 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 ms de una dimensin, 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,"<p>") }
Y esto es lo que se obtiene:
Linea 0:[0,0][0,1]
Linea 1:[1,0][1,1]
Mi_array[1] = "B"
Mi_array[2] = "C"
La longitud de los arrays es dinmica. Es decir, que si se crea un array de una longitud cualquiera (incluso cero) y despus se mueve un dato a una posicin de ndice superior a la creada, el array se redimensiona hasta el nuevo valor. Todas las posiciones entre el anterior lmite y el nuevo, lgicamente, 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 Fjate en que, aunque el resultado es 2, son 3 las posiciones disponibles, ya que el
ndice comienza por el 0.
Mtodos Adems de los 3 mtodos comunes a otros objetos de JavaScript, el objeto array tiene otros 3 propios: join reverse sort Veamos cmo funcionan:
join(separador) Este mtodo 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 segn el modo indicado por orden que puede ser una funcin, o una muestra de caracteres. Si se omite el modo de ordenacin, todos los valores son convertidos a string y ordenados segn el diccionario ingls 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 ordenacin, 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.
Mtodos Tiene los tres mtodos 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). Tambin pueden escribirse de diversas formas:
Date("month day, year hours:minutes:seconds")
Date(year, month, day) Date(year, month, day, hours, minutes, seconds)
Mtodos Se dispone de un gran nmero de mtodos 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 mtodo. Por ejemplo: Mi_fecha.getDate()
getDate El dia del mes. Es un nmero entre 1 y 31. getDay Dia de la semana en nmero. El domingo = 0. Es un nmero entre 0 y 6. getHours La hora. Es un nmero entre 0 y 23. getMinutes Los minutos. Es un nmero entre 0 y 59. getMonth El mes. Es un nmero entre 0 y 11. 0 = enero. getSeconds Los segundos. Es un nmero entre 0 y 59. getTime Es el nmero 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 ao. Dependiendo del valor devolver dos o cuatro dgitos. Entre 1900 y 1999 devuelve dos y a partir de 2000 cuatro. getFullYear Funciona como el anterior, pero con el ao con cuatro dgitos 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 mtodos 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 mtodos 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 funcin que trabajar de forma anloga a las declaradas con la instruccin function. Fjate en que la diferencia de sintaxis entre ambas es simplemente que el objeto se define con una "F" mayscula y la instruccin con una "f" minscula. La diferencia prctica entre los dos procedimientos es que el objeto tiene propiedades que pueden invocarse, y la declarada con la instruccin no. Por contra, el objeto es evaluado cada vez que se invoca, mientras que la declarada con la instruccin es compilada, lo que la hace ms 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 numricos) como las instrucciones van dentro de strings en lugar del tpico 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
Mtodos Los tres comunes de los objetos JavaScript.
Math Este objeto se utiliza para trabajar con constantes y funciones matemticas. Esto hay que hacerlo mediante sus propiedades y mtodos. 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 nmero 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 Relacin entre la circunferencia de un crculo y su dimetro. Math.SQRT1_2 = 0.7071067811865476 Raz cuadrada de un medio (1/2). Math.SQRT2 = 1.4142135623730951 Raz cuadrada de 2.
Los mtodos son funciones matemticas que admiten argumentos. Adems 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 nmero. 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 nmero. 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 nmero. 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 nmero. 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 mtodo. Math.abs(01234) = 1234 Valor absoluto de un nmero. Math.ceil(20.5) = 21 Obtiene el nmero entero ms pequeo posible que sea igual o mayor que el argumento dado. Math.floor(20.5) = 20 Al contrario que el anterior, obtiene el nmero entero ms grande posible que sea igual o menor que el argumento dado. Math.exp(1) = 2.302585092994046 Nmeros 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 numricos, 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 numricos, y devuelve el menor de ellos. Math.random() = 0.09618143970146775 Se obtiene un nmero aleatorio entre 0 y 1 cuyo origen es el reloj del sistema. Math.round(2.5) = 3 Redondeo. Devuelve el nmero entero ms prximo 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 nmero.
Number Objeto para trabajar con valores numricos. Es poco utilizado.
Propiedades MAX_VALUE MIN_VALUE POSITIVE_INFINITY
Mtodos Los tres comunes.
NaN
NEGATIVE_INFINITY
String Prctico 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 habrs supuesto es la longitud de la cadena dada.
Mtodos Adems de los tres comunes hay un gran nmero de ellos. Utilizando el mismo texto del ejemplo anterior, tendremos:
String.big() = Esto es una prueba Aumenta el tamao del texto. El tamao es equivalente al obtenido con <FONT SIZE=4> String.small() = Esto es una prueba Disminuye el tamao del texto. El tamao es equivalente al obtenido con <FONT SIZE=2> String.fixed() = Esto es una prueba Cambia el tipo de letra a paso fijo. Es equivalente al obtenido con <FONT FACE="Courier"> String.sup() = Esto es una prueba Aplica el efecto superndice al texto. Es equivalente al obtenido con <SUP> String.sub() = Esto es una prueba Aplica el efecto subndice al texto. Es
equivalente al obtenido con <SUB> String.fontcolor("ff0000") = Esto es una prueba Establece el color del texto. Es equivalente al obtenido con <FONT color="ff0000">. Fjate en que el color hay que darlo en formato RGB hexadecimal. String.size(5) = Esto es una prueba Cambia el tamao del texto. Es equivalente al obtenido con <FONT SIZE=x> donde x es un valor entre 1 y 7 String.blink() = Esto es una prueba Efecto de intermitencia, equivalente al
elemento <BLINK> String.bold() = Esto es una prueba Aumenta el peso del texto. Es equivalente al elemento <B> String.italics() = Esto es una prueba Aplica el tipo de letra itlica al texto. Es equivalente al obtenido con <I> String.strike() = Esto es una prueba Aplica el tipo de letra tachado al texto. Es equivalente al obtenido con <STRIKE> String.charAt(0) = E Devuelve el caracter que haya en la posicin del ndice que se indica. Para este mtodo el ndice comienza por el cero. No confundir con la propiedad length que devuelve el nmero de caracteres que hay en la cadena, no un ndice.
String.indexOf("t", [start]) = 2 Devuelve la posicin del primer caracter (solamente uno) indicado en el argumento que exista en la cadena. Para este mtodo 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 posicin con [start]. Si el carcter buscado no existe devuelve -1. String.lastIndexOf(cadena, "prueba") = 12 Devuelve la posicin de una subcadena (o un solo caracter) dentro de la cadena principal. Comienza a contar por el cero. Si el carcter o subcadena buscados no existen devuelve -1. String.search(cadena, "prueba") = 12 Es exactamente igual que la anterior, pero esta es una sintaxis ms 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 direccin 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 minsculas. String.toUpperCase() = ESTO ES UNA PRUEBA Convierte la cadena dada a todo maysculas.
RegExp Abreviatura de Regular Expressions, es decir, expresiones regulares. Esta es una forma de
trabajar con cadenas muy utilizada en algunos lenguajes de programacin, como perl, muchos comandos del shell de Unix o Linux, etc. Consiste en ciertas convenciones para localizar cadenas o subcadenas con caractersticas variadas y son independientes de las acciones que se realizarn con ellas una vez localizadas. Se trata de establecer un patrn de bsqueda, 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 mtodo search
String.search(/una/, "Esto es una prueba") = 8 Al aplicar este patrn se le est preguntando si la cadena contiene la subcadena "una", y como la respuesta es true devuelve su posicin. Esta es una expresin regular muy simple, veamos otra ms 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 posicin que es la cero. Fjate en que para enlazar una parte de la expresin con la otra se utiliza el caracter | llamado "pipe", y se pueden poner tantos como sean necesarios separando cada parte de la expresin regular. Si lo indicado por el patrn es encontrado ms de una vez, se devolver la posicin de la ltima ocurrencia
Dentro de los corchetes, adems de caracteres o nmeros sueltos, se pueden poner rangos completos indicando el primer caracter y el ltimo separados por un guin: [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 maysculas, 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 guin - o algun caracter especial, segn donde se escriba habr que ponerle el smbolo de "escape" (\) o no, como ya se dijo en el apartado Cmo se escribe el JavaScript?. Por ejemplo, si va el primero: /[\-A-Z]/ pero no es necesario "escaparlo" si va el ltimo: /[A-Z-]/
Adems 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 alfanumrico. /\d/ Cualquier dgito. /\s/ Cualquier caracter no visible, como el tabulador, el retorno o el espacio.
Otros caracteres especiales que no necesitan escape son:
/./ El patrn coincidir con cualquier caracter, excepto un salto de lnea. /^[abc]/ Indica que el patrn buscado "abc" debe estar al comienzo de la cadena. /[^abc]/ Acepta cualquier caracter excepto los contenidos entre los corchetes. /$[abc]/ Indica que el patrn buscado debe estar al final de la cadena.
Tambin se puede indicar cuantas veces debe existir el patrn en la cadena original: /E+/ Significa que E debe aparecer al menos una vez. /E*/ Cero o ms veces. /E?/ Cero o una vez. /E{2}/ Dos veces. /E{2,}/ Dos veces como mnimo. /E{2,3}/ De dos a tres veces, inclusive.
Una vez definida la expresin regular, es posible aplicarle un modificador para que no sean tenidas en cuenta las maysculas y minsculas: /xyz A-Z/i No distinguir entre maysculas y minsculas (insensitive).
Cuando se estan haciendo sustituciones en lugar de bsquedas 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, tambin pueden ponerse los dos modificadores juntos, y tiene importancia en que orden se escriben, normalmente ser gi
En JavaScript admiten expresiones regulares algunos mtodos 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 construccin tiene mucha importancia el orden en que se escriben las cosas. Hasta que tengas cierta prctica, si no consigues que funcione a la primera, no desesperes, es normal.
Mtodos comunes de los objetos
[objeto].eval(cadena) Este mtodo, comn a todos los objetos de JavaScript, tiene por finalidad evaluar cualquier expresin contenida en una cadena, es decir obtener un resultado numrico 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 ms arriba, que tambin trabaja con instrucciones dentro de una cadena.
objeto.toString() La finalidad de este mtodo, comn 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 automticamente el mtodo 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 mtodo, comn para todos los objetos, permite obtener el valor original de un objeto despus de haber sido convertido, por ejemplo, con el anterior mtodo toString. Al igual que el anterior, tambin ser invocado de forma automtica por JavaScript si es necesario en el contexto de la instruccin.
Las funciones predeterminadas de JScript
A diferencia de otros lenguajes, JavaScript solamente tiene tres funciones intrnsecas. Esto significa que cualquier utilidad que se precise programar hay que obtenerla escribiendo el usuario la funcin correspondiente.
isNaN() Evalua el argumento dado, que puede ser un valor o una expresin y devuelve un booleano que indica si puede considerarse como numrico o no numrico (Not a Number). Por ejemplo, si se escribe:
document.write(isNaN(22)) Se obtiene: true
parseInt(string [,base]) Esta funcin analiza un string, y teniendo en cuenta la base numrica 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 nmero en la base establecida, se ignorarn 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 nmero, la funcin devuelve NaN. No se evaluan expresiones dentro de la cadena, pero s expresiones numricas sin formato de cadena (en realidad tampoco sirven, pero JavaScript primero las evalua y despus las convierte en cadena).
parseFloat(string) De forma similar a la anterior, esta funcin 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 nmero, 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 grfico tenemos la representacin de la mayora 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 versin del intrprete JavaScript, etc. Como siempre, se debe probar el cdigo 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 pgina cargada, es decir, que los objetos contenidos en el objeto document dependern del cdigo HTML que se escriba.
El objeto window
Es el objeto bsico, y representa en s mismo al propio navegador. Al ser el elemento principal del modelo de objetos, para referirse a sus propiedades, mtodos o eventos, no es necesario
referenciarlo especficamente. Como puedes ver en el esquema de objetos, hay cuatro subobjetos que pueden considerarse como sinnimos 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 tambin 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 posicin ms 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, adems, son considerados propiedades del objeto window. Si... esto es algo complicado. Este objeto, como todos, tiene mtodos, propiedades y eventos. Veamos los ms usuales:
MTODOS
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, tambin permite definir las caractersticas que tendr la nueva ventana, como son qu pgina mostrar, el nombre de la ventana y el aspecto que ofrecer el navegador. En el siguiente ejemplo se captura el evento onClick del botn de un formulario para crear una nueva ventana:
<HTML> <HEAD><TITLE>Objetos del navegador</TITLE></HEAD>
<BODY>
<FORM NAME="Formulario1"> <INPUT TYPE="Button" NAME="Boton1" VALUE="Abrir" 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')"> </FORM>
</BODY> </HTML>
Y despus de pulsar el botn "Abrir" del formulario, obtendremos una nueva ventana con esta apariencia:
Fjate en las dos ltimas lneas, las que corresponden al parmetro "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 lneas ni dejar espacios innecesarios entre valores. Los valores de estos parmetros, adems 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 nmeros. Se admite el signo de subrayado ( _ ) pero no el guin ( - )
close() Cierra una ventana. Por ejemplo:
<HTML> <HEAD><TITLE>Objetos del navegador</TITLE></HEAD> <BODY>
<FORM NAME="Formulario2"> <INPUT TYPE="Button" NAME="Boton2" VALUE="Cerrar" onClick="prueba.close()"> </FORM>
</BODY> </HTML>
Este mtodo no funciona igual en todos los navegadores. Si escribes una pgina con el ejemplo
anterior y ste juntos, al pulsar el botn "Abrir" se abre una ventana llamada "prueba", y al pulsar el botn "Cerrar" se cerrar la ventana "prueba", permaneciendo el navegador abierto con la pgina
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 ejecutndose 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 pretenda 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:
<HTML> <HEAD><TITLE>Objetos del navegador</TITLE></HEAD> <BODY>
<FORM NAME="Formulario"> <INPUT TYPE="Button" NAME="Boton" VALUE="Prueba" onClick="alert('Esto es una prueba')">
</FORM>
</BODY> </HTML>
Y despus de pulsar el botn "Prueba" del formulario, obtendremos el mensaje:
confirm('mensaje') Muestra un cuadro de dilogo con dos botones que devuelven un valor booleano cada uno (true o false) dependiendo del botn pulsado por el usuario. Por ejemplo:
<HTML> <HEAD> <TITLE>Prueba de mensaje</TITLE> </HEAD> <BODY>
<FORM NAME="Formulario1"> <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="this.form.Campo1.value=confirm('Quieres continuar?')">>
<INPUT TYPE="Text" NAME="Campo1"> </FORM>
</BODY> </HTML>
Despus de pulsar el botn "Prueba" del formulario tendremos esto:
Y despus de pulsar el botn "Aceptar" del cuadro de dilogo tendremos esto:
Fjate 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 dilogo con dos botones y un campo de texto que, opcionalmente, puede tener una propuesta predefinida. Su funcionamiento es muy parecido al mtodo confirm(). Sea por ejemplo:
<HTML> <HEAD> <TITLE>Prueba de entrada</TITLE> </HEAD> <BODY>
<FORM NAME="Formulario1"> <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba" onClick="this.form.Campo1.value=prompt('Escribir un valor', '')">>
<INPUT TYPE="Text" NAME="Campo1"> </FORM>
</BODY> </HTML>
Despus de pulsar el botn "Prueba" del formulario tendremos esto:
En el ejemplo, despus de escribir un texto cualquiera y pulsar el botn "Aceptar", lo escrito ser recibido por Campo1, pero si se pulsa Cancelar, a diferencia del mtodo confirm() que devolvera false, lo que se recibe es null
setTimeout('instrucciones', espera) Evalua y ejecuta el cdigo JavaScript contenido en 'instrucciones' despus de transcurrido el tiempo, en milisegundos, indicado por espera. La evaluacin de las instrucciones solamente la har una vez. Sea por ejemplo:
<HTML> <HEAD> <TITLE>Prueba de entrada</TITLE> <SCRIPT LANGUAGE="JavaScript">
function mensaje() { alert('Esto es una prueba') } </SCRIPT> </HEAD> <BODY>
<FORM NAME="Formulario1"> <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba" onClick="setTimeout('mensaje()', 2000)"> </FORM>
</BODY> </HTML>
Despus de pulsar el botn "Prueba" del formulario, y transcurridos dos segundos, obtendremos:
clearTimeout(identificador) Despus de haber utilizado el mtodo setTimeout() anterior, JavaScript mantiene memorizada la evaluacin que realiz del parmetro 'instrucciones'. Si en algun punto del programa es necesario repetir esa evaluacin en lugar de utilizar la ya realizada, es preciso inicializarla previamente. Para ello se utiliza clearTimeout(identificador). Para poder hacerlo, es necesario que el mtodo setTimeout() haya sido invocado mediante un identificador. As, y refirindonos al ejemplo anterior:
identificador=setTimeout('mensaje()', 2000)">
Y para inicializar la evaluacin 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 mtodo es imprescindible si las instrucciones ejecutadas por setTimeout() son expresiones numricas 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 ratn (tocado, no pasado por encima) o bien al tabular desde el teclado. El objeto window puede recibir el enfoque automticamente nada ms ser abierto, sin necesidad de pulsacin del ratn. Un objeto puede tener el enfoque y no parecerlo visualmente, por ejemplo los distintos frames de una pgina, y en la que cada uno de ellos tiene el rango de window. El mtodo contrario de focus() es blur()
eval()
scroll()
Estos son los tres mtodos comunes de todos los objetos de javaScript, y ya se describieron en ese apartado.
toString()
moveBy(x,y) moveTo(x,y) Estos dos mtodos sirven para mover una ventana, previamente abierta, un nmero determinado de pxels hasta una determinada posicin. Por ejemplo:
<HTML> <HEAD> <TITLE>Ventanas en movimiento</TITLE> <SCRIPT LANGUAGE="JavaScript"> function Mover() { Ventana.moveBy(5,5); i++; if (i<20) setTimeout('Mover()',100); else Ventana.close(); } </SCRIPT> </HEAD> <BODY>
<script LANGUAGE="JavaScript"> var dimensiones="left=100,top=100,width=100,height=100"; var i=0; Ventana = window.open("","",dimensiones); Ventana.document.write("Ventanas en movimiento"); Ventana.moveTo(400,100); Mover(); </script>
</BODY> </HTML>
EVENTOS
Mientras estas navegando por el ciberespacio, en la ventana de tu navegador van ocurriendo ciertos sucesos o eventos que pueden ser capturados. Por ejemplo, cuando el navegador carga una pgina
se est produciendo un evento, cuando carga la siguiente se producen dos: uno al descargar la antigua y otro al cargar la nueva, etc. Cada objeto tiene sus propios eventos. Para poder capturar un evento es necesario un manejador de eventos. El objeto window tiene los siguientes manejadores de eventos:
onLoad Como su nombre indica, se produce cuando el navegador carga una pgina. Por ejemplo:
<HTML> <HEAD> <TITLE>Prueba de entrada</TITLE> <SCRIPT LANGUAGE="JavaScript"> function mensaje() { document.write('Prueba de evento onLoad') } </SCRIPT> </HEAD> <BODY onLoad="mensaje()">
</BODY> </HTML>
Prueba de evento OnLoad
onUnload Funciona justo al contrario que el anterior: se activa cuando el navegador descarga la pgina actual, por ejemplo al intentar ir a otra. En ese momento se produce el evento. El siguiente ejemplo abre una ventana predeterminada siempre que se abandona la pgina activa:
<HTML> <HEAD> <TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript"> function abrir() { window.open('http://sestud.uv.es/manual.esp/') } </SCRIPT> </HEAD> <BODY onUnload="abrir()">
</BODY> </HTML>
onFocus Este manejador de eventos controla el evento focus que se produce cuando un objeto window, frame o form recibe el enfoque como consecuencia de una pulsacin del ratn o por ser invocado el mtodo correspondiente. Por ejemplo:
<HTML> <HEAD>
<TITLE>Prueba de entrada</TITLE> <SCRIPT LANGUAGE="JavaScript"> function abrir() { window.open('http://sestud.uv.es/manual.esp/') } </SCRIPT> </HEAD> <BODY onFocus="abrir()">
</BODY> </HTML>
onBlur Es el inverso del anterior. Este manejador de eventos controla el evento blur que se produce cuando un objeto window, frame o form pierde el enfoque. En el siguiente ejemplo la funcin abrir() ser invocada al abandonar la pgina:
<HTML> <HEAD> <TITLE>Prueba de entrada</TITLE> <SCRIPT LANGUAGE="JavaScript"> function abrir() { window.open('http://sestud.uv.es/manual.esp/') } </SCRIPT> </HEAD> <BODY onBlur="abrir()">
</BODY> </HTML>
onError Este manejador controla el evento error. El error puede producirse mientras el navegador est cargando una pgina. Durante el proceso de carga el navegador verifica la sintaxis del cdigo JavaScript y carga las imgenes que indique el cdigo HTML. Un error de sintaxis HTML no producir un error de carga. Tampoco es un error capturable el que un enlace a otra pgina falle, ya que eso es un error de navegador (o de navegacin). El siguiente ejemplo muestra
un mensaje al cargar una pgina que intenta mostrar un grfico que no existe:
<HTML> <HEAD> <TITLE>Prueba de entrada</TITLE> <SCRIPT LANGUAGE="JavaScript"> function mensaje() { mensaje('Se ha producido un error de carga') } </SCRIPT> </HEAD> <BODY>
<IMG SRC="noexiste.gif" onError="mensaje()"> </BODY> </HTML>
No hay que confundir estos mensajes controlados con los que produce la consola javaScript del navegador cuando detecta un error en los programas que se estan cargando.
PROPIEDADES
name Es un string que contiene el nombre de la ventana. El nombre de la ventana se establece en el momento de abrirla mediante el mtodo window.open('url', 'name') y una vez abierta no puede cambiarse. Recuerda que por defecto las ventanas abiertas directamente, como por ejemplo sta que
ests leyendo, no tienen nombre definido.
status
document
location
Frame
frames
history
parent
self
top
opener
closed
length
Ejemplos de pginas con JavaScript
He aqu algunos ejemplos de pginas con "scripts" escritos en JavaScript (java interpretado).
Ejemplos JavaScript
Un reloj en pantalla Dar el nombre del mes Una calculadora Una agenda-calendario Control de contenido de campos Sin envo. Control de contenido de campos Envo final. Texto que se desplaza en la ventana de estado Texto que se desplaza en la ventana de estado opcionalmente Formulario con lista de seleccin sin botn de submit Imprimir desde una imagen Texto que sigue al puntero en forma de cola de cometa Ventana de texto que limita la longitud de la lnea Listado con puntero grfico Muestra de cdigos de color Link que se activa slo pasando el ratn por encima Rotacin de textos en pantalla Ver cdigo fuente de una pgina cualquiera Un men flotante Bloquear botn derecho del ratn Bloquear botn derecho del ratn 2 Automatizar el marcado de opciones en formularios.
Impedir que se hagan dos selecciones en formularios. Jugar al Tetris (Excelente!!) Al abrir una nueva ventana, que ocupe toda la pantalla Zoom de pgina Juego de palabras Enlaces a ficheros de sonido Consola dinmica con varios ficheros multimedia
Y aqu hay muchos ms (en ingls):
Dinamic drive JavaScript Source

JavaScript y Java

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

JavaScript y Java

Cargado por

Copyright:

Formatos disponibles

JavaScript y Java

Si pulsas aqu podrs ver el cdigo fuente de este applet.

Por ejemplo si escribes:

<HTML> <HEAD> <TITLE> Prueba</TITLE>

<SCRIPT LANGUAGE="JavaScript"> <!-document.write("<CENTER><H3>Mi primer JavaScript</H3></CENTER>") // --> </SCRIPT> </HEAD>

Puedes probar el script pulsando aqu.

Cmo se escribe el JavaScript?

<SCRIPT LANGUAGE=JavaScript> <!-document.write("Esto ha sido escrito por JavaScript") // --> </SCRIPT>

HEAD <BR>") // --> </SCRIPT> </HEAD>

Esto ha sido escrito por JavaScript desde HEAD

Esto ha sido escrito por JavaScript desde BODY

Esto ha sido escrito por HTML.

<FORM NAME="Formulario1"> <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba" onClick="mensaje()">

<HTML> <HEAD><TITLE>Capturar evento de boton</TITLE></HEAD> <BODY>

<FORM NAME="Formulario1"> <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba" onClick=javascript:alert("Mi mensaje")> </FORM>

Esta forma es aceptable si, como en el ejemplo, la funcin es muy simple.

<FORM NAME="Formulario1"> <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba" onClick="mensaje()"> </FORM>

Donde el contenido de fichero.js es:

function mensaje() { alert("Esto es un mensaje de JavaScript") }

var MiVariable = 2004

Tambin es posible definir varias variables en una misma lnea:

var Variable1, Variable2, Variable3

Tambin es posible concatenar dos o ms cadenas usando el signo + :

mivariable = "Prueba de " + "concatenado"

Y este sera el resultado:

mivariable = "Prueba de " + "\"concatenado\" " + '\'doble\''

Y este sera el resultado:

Prueba de "concatenado" 'doble'

mivariable = "Prueba de " + "\x34concatenado\x34 " + '\x27doble\x27 '

document.write(escape("$ % & @"))

function mensaje() y si tiene argumentos: function sumar(a, b)

function mensaje() { alert("Esto es un mensaje de JavaScript") }

<FORM NAME="Formulario1"> <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba" onClick="mensaje()"> </FORM>

Y al pulsar el botn, se obtiene:

<HTML> <HEAD><TITLE>Prueba de JavaScript</TITLE> <SCRIPT LANGUAGE=JavaScript> <!-function sumar(a, b) {

sumar = a + b } // --> </SCRIPT> </HEAD>

<SCRIPT LANGUAGE=JavaScript> <!-document.write(sumar(2, 2)) // --> </SCRIPT>

// --> </SCRIPT> </HEAD>

<SCRIPT LANGUAGE=JavaScript> <!-document.write(sumar(2, 2)) // --> </SCRIPT>

Esta vez s se obtiene lo esperado:

<SCRIPT LANGUAGE=JavaScript> <!-document.write(sumar(2, 2)) // --> </SCRIPT>

<HTML> <HEAD><TITLE>Prueba de JavaScript</TITLE>

<SCRIPT LANGUAGE=JavaScript> <!-function sumar(a, b) { return a + b } // --> </SCRIPT> </HEAD>

<SCRIPT LANGUAGE=JavaScript> <!-document.write(sumar(2, 2)) // --> </SCRIPT>

<!-document.write(sumar(2, 2)) // --> </SCRIPT>

<!-document.write(sumar(2, 2)) // --> </SCRIPT>

En JavaScript encontramos cinco tipos de operadores:

Aritmticos Lgicos De comparacin Binarios De asignacin Otros

Negativo (-). Indica el signo negativo de un nmero o una expresin: -3.

Mdulo aritmtico %. Divide dos nmeros, obteniendo un resto entero: 5 % 2 = 1 .

Multiplicacin (*). Multiplica dos nmeros: 3 * 2 = 6 .

en una unidad. No puede aplicarse a un literal. Pueden darse dos casos:

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

El hierro es un metal = True. ! El hierro es un metal = False.

Hay tres posibles resultados aplicando este operador a una expresin:

Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin

Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin

Null || Expresin 2 = Null el resultado es Null.

Hay 4 posibles resultados aplicando este operador a dos expresiones:

Si la Expresin Si la Expresin Si la Expresin Si la Expresin

Y estos cuatro, seguro que ya sabes cmo funcionan:

Mayor que (>)

Mayor o igual que (>=)

Menor que (<)

Multiplicacin (). Multiplica dos nmeros: 3 2 = 6 .