∙ Formatear y exhibir el contenido de una página.
∙ Estar a la espera de que ocurra un evento en el cual el usuario hace clic con el Mouse en alguna parte de la página.
∙ Dependiendo de la parte de la página en que el usuario haya hecho clic, se obtiene alguna otra cosa, repitiéndose el proceso.
Aunque esto ofrece muchas posibilidades para manipular contenido, no permite operaciones más avanzadas como llevar a cabo una animación de gráficos, acceder a una base de dato o hacer pedidos de artículos a través de catálogos en línea. Para poder lograr tales cosas, fue desarrollada la Interfaz de Entrada Común (CGI, Common Gateway Interface) que proporcionó un mecanismo para ampliar las capacidades de HTML, permitiéndole al diseñador de páginas Web escribir programas CGI capaces de interactuar con las páginas Web para llevar a cabo tareas más complejas tales como: (1) crear mapas de imágenes que son gráficos dentro de los cuales se puede hacer clic de forma tal que diferentes áreas del gráfico se pueden comportar como vínculos HTML llevando al usuario a otras páginas individuales, (2) crear animaciones sencillas haciendo que CGI mande una secuencia de gráficos al navegador, (3) crear gráficamente por demanda páginas HTML personalizadas, como las que ponen “usted es el visitante 6,542”, (4) establecer una interfaz con una base de datos en el servidor para obtener o agregar información, como ocurre con las máquinas de búsqueda (search engine), o como se implementa para los pedidos de catálogos en línea.
Para poder usar CGI se requiere ser un programador con cierta experiencia. Un programa CGI es un archivo que reside en un servidor Web y que el servidor ejecuta en respuesta a un suceso (evento) que ocurre dentro de la página Web que ha descargado el usuario. La mayor parte de los programas CGI se escriben en Perl y en menor medida con PHP. CGI requiere que se informe al servidor de las acciones del usuario para que se interpreten y procesen en el servidor, tras lo cual el servidor debe enviar después el resultado de este procesamiento de vuelta al usuario. Aún con conexiones a Internet de alta velocidad, estar transferencias adicionales consumen tiempo y pueden reducir esa sensación de una “interacción inmediata” con las páginas Web, esto además de que CGI no maneja bien elementos multimedia tales como sonido, gráficos y animaciones. Por si estos inconvenientes fuesen pocos, para usar CGI es necesario tener acceso a la interfaz CGI del servidor Web que presenta sus páginas, y hay proveedores de servicios de Internet que no apoyan el acceso a CGI, con el resultado final de que CGI resulta demasiado complejo para la mayoría de los autores de páginas Web y no maneja muchos “adornos” (lo que en jerigonza inglesa se conoce como “bells and whistles”) que los autores frecuentemente quieren incluír en sus páginas.
Para remediar las deficiencias presentadas por CGI, la empresa Sun Microsystems creó el lenguaje Java, un lenguaje capaz de poder llevar a cabo una programación orientada-a-objetos. Con Java no se requiere programación CGI, lo único que se requiere es un navegador que sea compatible con Java y que pueda manejar los programas elaborados con Java, usando algo como el Java Development Kit (JDK), para diseñarlos.
La gran ventaja de los programas ejecutables creados con Java, llamados applets (subprogramas) es que se pueden ejecutar en cualquier navegador que sea compatible con Java, en cualquier plataforma ya sea una máquina Macintosh, una máquina operando con Windows, o una máquina UNIX, no hay que escribir un applet Java para cada tipo de máquina, ya que el mismo programa Java enviado a un sinnúmero de máquinas a través de Internet trabajará igual en cualquier tipo o modelo de máquina (algo similar a los documentos PDF elaborados bajo la convención del formato Portable Document File creado por la empresa Adobe, los cuales pueden ser abiertos y leídos en cualquier máquina bajo cualquier plataforma que tenga instalado algo como el lector Adobe Reader). Sin embargo, al igual que CGI, Java también es un lenguaje de programación que hay que aprender relativamente bien antes de poder usarlo, y los applets tienen que ser <i>compilados</i> con la ayuda de un programa compilador Java antes de poder usarse.
Aunque es posible hacer mucho con Java, este lenguaje es más apropiado para tareas complejas y programadores con amplia experiencia. La empresa Netscape Communications, fabricante del navegador Netscape (el más vendido y usado en ese entonces antes de que Microsoft entrara en la competencia regalando su navegador Internet Explorer 1.0), percibió la necesidad de un lenguaje intermedio que permitiera al común de la gente poder diseñar páginas Web capaces de interactuar con el usuario o con applets de Java pero que requiriera tan solo un mínimo de experiencia en programación. Para poder contar con algo de las capacidades de Java sin tener que meterse a fondo en los detalles de un lenguaje de programación formal, la empresa Netscape Communications asociándose a Sun Microsystems y con algo de ayuda de parte de los creadores de Java desarrolló el lenguaje JavaScript inicialmente llamado LiveScript (que más que un lenguaje real era una propuesta), siendo introducido en 1995 como JavaScript 1.0 en la versión 2.0 del navegador Netscape (justo en el mismo año en el que Microsoft puso a la venta su primer sistema operativo para computadoras domésticas, Windows 95, aclarándose de antemano que Sun Microsystems y Microsoft son empresas completamente independientes que nunca han tenido alguna asociación de negocios). Respondiendo ante el éxito inicial de JavaScript, y temiendo ser desplazada por completo como un actor principal en la elaboración de software para la red de redes, Microsoft empezó a agregarle a su navegador Internet Explorer (a partir de la versión 3.0) la capacidad para poder interpretar el código JavaScript. Al estar basado en Java, JavaScript puede muchas de las construcciones en expresiones (instrucciones) de Java, pero con la ventaja de que no se requiere de un compilador Java para la creación de applets ni de conocimientos de programación para poder obtener resultados inmediatos.
Desarrollando Visual J++ como un entorno integrado de desarrollo para llevar a cabo la programación visual de Java, Microsoft quiso incorporar a Java como parte de sus sistemas operativos, pero sin cuidar en lo absoluto que se mantuviera la compatibilidad total deseada por los creadores de Java y por ende la independencia de plataforma e independencia total del tipo de sistema operativo instalado en la máquina (el interés de Microsoft era adoptar una versión de Java que solo funcionara en máquinas con el sistema operativo Windows instalado en ellas). Como consecuencia de una larga sucesión de litigios y pleitos legales en los tribunales además de una imagen mediática negativa en donde se acusó a Microsoft (una empresa que desde siempre se ha quejado de ser víctima de la piratería) de practicar la piratería robándole ideas originales a otros, Microsoft se vió obligada a remover a Java como parte integral de sus sistemas operativos, respondiendo con la creación del lenguaje de programación C# (pronunciado como “C sharp”), un lenguaje extraordinariamente parecido a Java, arropándolo como parte de su iniciativa .NET. Un dato interesante es que el sistema operativo Mac OS X de las computadoras fabricadas por Apple tiene integrado a Java como parte del sistema operativo (respetando toda la compatibilidad pedida y requerida por los creadores de Java), mientras que para máquinas que funcionan con los sistemas operativos Windows es necesario descargar Java de la Web e instalar a Java como algo ajeno a Windows pero con lo cual pueden funcionar los navegadores instalados en la máquina.
Hay cosas que JavaScript no puede hacer, tales como leer o escribir en archivos ya ubicados en el disco duro de las máquinas de los usuarios, lo cual es algo muy deseable en lo que toca a cuestiones de seguridad y protección personal (sin embargo, puede crear y almacenar en los discos duros de los usuarios pequeñas bases de datos conocidas como “cookies” o “galletitas”). Tampoco puede crear o escribir archivos en los servidores Web, para lo cual se requiere un programa alojado en el servidor que pueda manejar y almacenar datos enviados desde la máquina del usuario, algo como un CGI escrito en un lenguaje como Perl o PHP, o inclusive un programa como Java. Tampoco puede cerrar una ventana que no ha abierto, esto para impedir que un sitio Web pueda tomar control del navegador cerrando las ventanas de otros sitios. Tampoco puede leer información de una página Web abierta que llegó de otro servidor.
JavaScript fue diseñado para ser un lenguaje incrustable en archivos HTML. No es lenguaje para ser compilado, fue diseñado para ser interpretado por un navegador que esté equipado para ello con su propio interpretador JavaScript. A diferencia de los archivos fuente escritos en el lenguaje Java, que primero son convertidos a bytecodes que son fácilmente compilables, JavaScript es leído como código fuente por el navegador.
JavaScript es lo que se conoce como un lenguaje basado en objetos, lo cual significa que incluye muchos tipos de objetos. Uno de tales objetos, por ejemplo, es el objeto Math, que proporciona varias maneras de flexibilidad matemática. Sin embargo, no hay que dejarse confundir por la definición dada, ya que JavaScript no es un lenguaje orientado-a-objetos porque no da soporte al concepto de clases y la propiedad de herencia, dos pilares de la verdadera programación-orientada-a-objetos.
Al igual que las convenciones HTML y el lenguaje Java, JavaScript fue diseñado para ser independiente de la plataforma, lo cual significa que debe poder ejecutarse por igual en cualquier plataforma, en muchos tipos diferentes de máquinas equipadas con microprocesadores o procesadores distintos, siempre y cuando las plataformas estén equipadas con navegadores habilitados para interpretar el código JavaScript. Además, al igual que Java, fue diseñado en un principio para ser seguro, ya que no es posible que JavaScript pueda leer o escribir directamente en los archivos guardados en las computadoras de los usuarios.
Para ejecutar las instrucciones en JavaScript, el uso de un compilador que pueda compilar el código JavaScript convirtiéndolo en código ejecutable está contraindicado, ya que los usuarios de Internet están acostumbrados a obtener respuestas rápidas sin tener que estar esperando a que algo pase por un proceso tardado de compilación. Por esto mismo, en lugar de ello se utiliza un interpretador JavaScript.
Todas las instrucciones que serán llevadas a cabo con JavaScript son puestas entre el siguiente par de etiquetas HTML:
<SCRIPT> ... </SCRIPT>
Estas etiquetas y su contenido pueden ser puestas ya sea en la cabecera <HEAD> o en el cuerpo <BODY> de la página Web. La ventaja de ponerlas en la cabecera <HEAD> del documento es que serán cargadas y estarán listas antes de que el resto del documento sea cargado.
Un atributo de <SCRIPT> que siempre encontramos presente es el que especifica el lenguaje de scripting que será utilizado, el cual se dá con “LANGUAGE=”. Cuando se llevaron a cabo las dos grandes guerras entre los navegadores Netscape y el Internet Explorer de Microsoft, al lenguaje de scripting creado por la empresa Netscape se le respondió con el lenguaje VBScript, habiendo con ello dos lenguajes diferentes, de modo tal que los dos atributos que podemos encontrar en una página con contenido interactivo de este tipo son "Javascript" y "VBScript". Para programas que usan JavaScript, se puede usar la siguiente sintaxis:
<SCRIPT LANGUAGE="JavaScript">Sin embargo, en muchos navegadores no es necesario incluír el atributo LANGUAGE, y basta con que la etiqueta de apertura contenga la palabra SCRIPT.
.....
</SCRIPT>
A continuación se presenta un primer ejemplo sencillo del empleo de JavaScript para crear contenido interactivo en una página HTML:
<HTML>Una página HTML que sea leída en un navegador que incorpore lo anterior en JavaScript imprimirá en la pantalla el siguiente contenido interactivo:
<HEAD>
<TITLE>Un primer ejemplo del uso de JavaScript</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT">
var nombre = window.prompt("¡Hola! ¿Cual es tu nombre","");
document.write("¡Hola " + nombre + "! Espero que te guste JavaScript");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
No es necesario invertir en la adquisición de un servidor para probar programas como el anterior que incorporan JavaScript. El código fuente de JavaScript se puede elaborar en un editor de texto sencillo como el Bloc de Notas de los sistemas operativos Windows. Una vez que se ha puesto todo el texto del código, el archivo se guarda en la computadora como tal, pero una vez guardado hay que cambiarle la extensión “.txt” que lo identifica como un archivo de texto a una extensión como “.htm” o como “.html”. Hecho esto, se abre tal archivo en la misma computadora con un navegador como Chrome o Mozilla o cualquier otro que sea capaz de interpretar el código JavaScript, y los resultados se podrán ver casi de inmediato.
A diferencia de los lenguajes C, C++ y Java, JavaScript no es tan rígido y no es necesario especificar el tipo de un dato (número entero, número real, hilera de texto) cuando se declara alguna variable. Los tipos de datos son convertidos automáticamente al tipo apropiado conforme ello sea necesario, como lo muestra la siguiente porción de código fuente:
<HTML>
<HEAD>
<TITLE>Ejemplo de tipos de datos en JavaScript</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT">
var fruta = "manzanas";
var numfruta = 25;
numfruta = numfruta + 8;
var temp = "Hay " + numfruta + " " + fruta + ".";
document.write(temp)
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Una página HTML que sea leída en un navegador que incorpore lo anterior en JavaScript imprimirá lo siguiente en la pantalla:
Hay 33 manzanas.
El interpretador JavaScript tratará a la variable numfruta como un entero al serle sumado 8, y entonces lo tratará como una hilera al ser combinada con la variable temp.
Lo más importante a tener presente al usar JavaScript es que dentro de la sección <SCRIPT> podemos tener programas completos con todo y saltos condicionales como en cualquier otro lenguaje interpretado. En saltos condicionados, la sintaxis usada para fines comparativo es idéntica a la sintaxis usada en los demás lenguajes de alto nivel que ya hemos visto:
Tenemos por ejemplo el enunciado condicional del tipo if cuya sintaxis general es:
if (condicion) else
y que checa el cumplimiento de cierta condición y ejecuta ciertos enunciados dependiendo del cumplimiento de tal condición. El enunciado optativo else especifica una serie alterna de enunciados a ser ejecutados si la condición no es verdadera. A continuación se presenta un ejemplo sencillo del empleo de tal condicional dentro de JavaScript:
<HTML>Si se mete esto dentro de una página HTML, se imprimirá lo siguiente en la pantalla:
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
x = 5;
if (x == 10) {
document.write("x es igual a 10, se hara x=0.");
x=0;
}
else
document.write("x no es igual a 10.");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
x no es igual a 10.
En cambio, si se cambia la variable x a 10 en el bloque de código JavaScript:
<HTML>se imprimirá lo siguiente:
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
x = 10;
if (x == 10) {
document.write("x es igual a 10, se hara x=0.");
x=0;
}
else
document.write("x no es igual a 10.");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
x es igual a 10, se hara x=0.
Obsérvese que el par de corchetes “{” y “}” es usado para separar bloques de código. En el ejemplo, el par de corchetes es utilizado en la condición verdadera true porque hay dos líneas de enunciados separadas con un semicolon, tal y como se acostumbra hacerlo en el lenguaje C. La condición falsa false es un enunciado de una sola línea, y por lo tanto no se requiere el par de corchetes.
JavaScript pone a nuestra disposición todos los mismos enunciados de control que se utilizan en el lenguaje C, como el enunciado for:
for (expresionInicial; condicion; incremento)
que usado en una porción de código <SCRIPT> como la siguiente:
<SCRIPT LANGUAGE="JavaScript">producirá lo siguiente en la pantalla
for (x=1;x<=10;x++) {
y = x*25;
document.write("x=" + x + " y=" + y + "<br>");
}
</SCRIPT>
x=1 y=25
x=2 y=50
x=3 y=75
x=4 y=100
x=5 y=125
x=6 y=150
x=7 y=175
x=8 y=200
x=9 y=225
x=10 y=250
Igualmente, tenemos también la posibilidad de crear bucles de control usando while que continúa con la evaluación de un bloque de código hasta que la condición de prueba deje de ser válida:
<SCRIPT>
x=1;
while (x<=10) {
y = x*25;
document.write("x=" + x + " y=" + y + "<br>");
x++;
}
</SCRIPT>
Esto último produce el mismo resultado que el bucle dado anteriormente con el enunciado for. Obsérvese que se ha omitido el atributo LANGUAGE en la etiqueta de apertura <SCRIPT>, algo permitido en la gran mayoría de los navegadores en uso actual, y a esto mismo nos atendremos en los ejemplos que se darán más abajo.
La capacidad de poder ejecutar programas completos incrustados con JavaScript dentro de una página HTML después de que la página ha sido descargada en una computadora, y el hecho de que JavaScript sea un lenguaje intepretado y no compilado, convirtió casi de inmediato a JavaScript al poco tiempo de su aparición en un riesgo de seguridad para todas las máquinas equipadas con navegadores capaces de poder ejecutar el código JavaScript, induciendo un nuevo nivel de vulnerabilidad dejándolas expuestas a ataques informáticos. Usualmente, y con buenas razones, frecuentemente se le advierte a los usuarios no descargar en sus computadoras programas ejecutables de sitios que no sean completamente confiables y seguros, pero aquí tenemos un talón de Aquiles que permite que con el solo hecho de abrir una página se pueda ejecutar todo un listado amplio de instrucciones sin que el usuario se dé cuenta de ello. Esta es la razón por la cual, todavía hasta nuestros días, los navegadores tienen una opción en su listado de opciones para desactivar por completo la ejecución de cualquier código JavaScript. Sin embargo, la desactivación de JavaScript puede ocasionar que el contenido completo de páginas Web provenientes de muchos sitios no sea mostrado en su totalidad, o inclusive que no sea mostrado nada, dada la costumbre de muchos sitios de recurrir a JavaScript para poder implementar código interactivo en la máquina del usuario que descarga sus páginas.
JavaScript ha sido mejorado y sigue siendo mejorado constantemente con la adición de parches de seguridad para minimizar la posibilidad de que pueda ser usada por delincuentes informáticos, pero ningún sistema es cien por ciento seguro cuando alguien descubre un agujero de seguridad del que los creadores de un navegador no se dieron cuenta y no pudieron detectarlo a tiempo.
Como se mencionó arriba, JavaScript es un lenguaje basado en objetos. JavaScript incluye varios enunciados que fueron diseñados para trabajar con estos objetos. El primero que veremos es:
for (variable in objeto) { ... }
Este enunciado es utilizado para llevar a cabo un bucle a través de todas las propiedades de un objeto. La siguiente porción de código nos ilustra la manera en la cual trabaja este enunciado al actuar sobre el objeto WINDOW:
<SCRIPT>Si se mete este código dentro del cuerpo de etiquetas <HEAD>, el lector encontrará que la pantalla le presenta algo como lo siguiente:
document.write("Las propiedades del objeto Window son: <br>");
for (var x in window) {
document.write(x + "<BR>");
}
</SCRIPT>
(material pendiente de verificar)
Las propiedades del objeto Window son:
statusQuizá uno de los comandos más importantes que tenemos a nuestra disposición dentro de JavaScript es el comando new que crea una instancia nueva de un objeto y cuya sintaxis es:
onresize
onmessage
parent
onhashchange
defaultStatus
name
history
maxConnectionsPerServer
opener
location
screenLeft
document
onbeforeprint
screenTop
clientInformation
onerror
onfocus
event
onload
onblur
window
closed
screen
onscroll
length
frameElement
self
onunload
onafterprint
navigator
frames
sessionStorage
top
clipboardData
external
onhelp
offscreenBuffering
localStorage
onbeforeunload
variable_objeto= new tipo_de_objeto (param1, [param2], [param3], ...)
El siguiente programa en el que haremos uso de la palabra reservada function nos ilustra la acción de new:
<TITLE>Ejemplo del uso de new</TITLE>La ejecución de este código JavaScript produce lo siguiente en la pantalla:
<SCRIPT>
function persona(nombre, apellido, edad, sexo) {
this.nombre = nombre;
this.apellido = apellido;
this.edad = edad;
this.sexo = sexo;
}
persona1 = new persona("Patricia","Martinez","15","Fem");
persona2 = new persona("Griselda","Castillo",19,"Fem");
persona3 = new persona("Alberto","Lopez",25,"Masc");
document.write("Nombre de la primera persona: ", persona1.nombre + ".<br>");
document.write("Nombre de la segunda persona: ", persona2.nombre + ".<br>");
document.write("Edad de la primera persona: ", persona1.edad + ".<br>");
document.write("Sexo de la segunda persona: ", persona2.sexo + ".<br>");
document.write("Sexo de la tercera persona: ", persona3.sexo + ".<br>");
</SCRIPT>
Nombre de la primera persona: Patricia.La palabra reservada this que hemos usado arriba al definir la función persona es usada para referirse al objeto presente, actual.
Nombre de la segunda persona: Griselda.
Edad de la primera persona: 15.
Sexo de la segunda persona: Fem.
Sexo de la tercera persona: Masc.
Como se vió arriba, JavaScript apoya el uso de funciones. Aunque no es necesario, una función puede tener uno o más parámetros que son pasados a la función, y nos puede regresar un valor. Puesto que no es un lenguaje riguroso, no se necesario definir parámetros o tipos de retorno en una función JavaScript (esto es, no es necesario especificar si se trata de un caracter ASCII, una hilera de texto, un número entero o un número con punto decimal). Una función también puede ser una propiedad de un objeto, en cuyo caso actuará como un método para tal objeto.
JavaScript incluye algunas de funciones propias, funciones que están construídas dentro del lenguaje y que no forman parte de un objeto, funciones tales como:
eval
parseInt
parseFloat
La función eval es usada para evaluar expresiones o enunciados. Se puede evaluar cualquier expresión, enunciado, o propiedades de un objeto. Esta función resulta útil para evaluar expresiones que son proporcionadas por el usuario. A continuación tenemos un ejemplo del uso de esta función:
<TITLE>Ejemplo del uso de eval</TITLE>Si metemos esto en la sección <HEAD> de una páginaHTML, se producirá en la pantalla lo siguiente:
<SCRIPT>
var hilera = "10 + Math.sqrt(64)";
document.write(hilera + " = " + eval(hilera));
</SCRIPT>
10 + Math.sqrt(64) = 18
Obsérvese que con eval se lleva a cabo la evaluación de una expresión matemática. Obsérvese también como el método sqrt de Math evalúa la raíz cuadrada de 64.
Por su parte, la función cuya sintaxis es:
parseInt (hilera, base)
toma un valor de hilera y trata de convertirlo en un entero de una base que está especificada por el segundo parámetro. Esta función puede ser utilizada para convertir bases diferentes de vuelta a la base decimal, o para asegurarse de que datos introducidos en forma de caracteres sean convertidos a enteros antes de ser usados en cálculos. En caso de datos erróneos, la función lee y convierte una hilera hasta el punto en el que ya no encuentra caracteres numéricos. Además de esto, trunca números reales (de punto flotante). Un ejemplo de esta función es el siguiente (obsérvese que un número hexadecimal tiene que ser precedido por “0x” puesto inmediatamente a su izquierda):
<TITLE>Ejemplo del uso de parseInt</TITLE>
<SCRIPT>
document.write("Convirtiendo OxFFEE a base 10: " + parseInt(0xFFEE,10) + "<br>");
document.write("Convirtiendo 110010 binario a base 10: " + parseInt(110010,2) + "<br>");
</SCRIPT>
Si se ejecuta lo anterior, se obtiene lo siguiente:
Convirtiendo OxFFEE a base 10: 65518
Convirtiendo 110010 binario a base 10: 50
La función parseFloat hace exactamente lo mismo que parseInt, excepto que regresa la representación en punto flotante de una entrada de hilera.
Como se mencionó al principio, JavaScript es un lenguaje de programación basado en objetos, aunque no propiamente un lenguaje orientado-a-objetos, porque no apoya ni la definición de algo que se entiende como clases ni el concepto de la herencia. JavaScript tiene varios objetos disponibles de los cuales ya hemos hecho uso de algunos de ellos en varios de los programas de arriba. Los objetos pueden ser considerados formando parte de una jerarquía. La jerarquía de algunos de los objetos de JavaScript con los que se comenzó al principio (y los cuales han ido aumentando con el paso del tiempo) se muestra a continuación:
En la jerarquía de objetos de JavaScript, los objetos descendientes son de hecho propiedades del objeto pariente. Los objetos en JavaScript tienen propiedades, métodos, y manejadores de eventos (en inglés,event handlers) asociados con ellos. Por ejemplo, el objeto DOCUMENT (documento) tiene la TITLE (título). Esta propiedad refleja los contenidos de la etiqueta <TITLE> para el documento. Adicionalmente, ya hemos visto arriba en varios de los ejemplos cómo se maneja el método document.write. Este método es usado para darle una salida de datos al usuario. Los objetos pueden tener varios manejadores de eventos, como lo es el caso del objeto LINKS, el cual tiene dos manejadores de eventos:
onClick
onMouseOver
El primer manejador de eventos es invocado cuando se hace clic en un objeto link, mientras que el segundo manejador de eventos es invocado cuando el cursor desplazado por el mouse pasa encima del objeto.
Conceptualmente, podemos representar un objeto de JavaScript de la manera siguiente:
El objeto JavaScript llamado window, el cual es un objeto de alto nivel, posee como mínimo en todas sus versiones las propiedades, métodos y eventos que se muestran a continuación:
El objeto document, el objeto frame, y el objeto location son todos ellos propiedades del objeto window. En mayor detalle, las propiedades, métodos y eventos del objeto window se pueden describir del siguiente modo:
Propiedades:
defaultStatus.- El mensaje usual en caso de omisión puesto en la barra de estatus de la ventana.
Frames.- Un arreglo (array) que refleja todos los marcos (frames) que hay en una ventana.
Length.- El número de marcos que hay en una ventana progenitora.
Name.- El nombre de la ventana actual.
Parent.- El objeto ventana progenitor.
Self.- La ventana actual.
Status.- Usado para dar un mensaje de estatus temporal para la barra de estatus de la ventana.
Top.- La ventana que está más “hacia arriba”.
Window.- La ventana actual.
Métodos:
alert("mensaje").- Muestra un mensaje de advertencia en una caja de diálogo con una hilera de texto “mensaje” dada por el programador y un botón de “OK” para cerrar la ventana:
<SCRIPT>
alert("No hay suficiente memoria disponible");
</SCRIPT>
clearTimeout(timeoutID).- “Limpia” (clear) el “timeout” fijado por SetTimeout (SetTimeout regresa timeoutID).
windowReference.close.- Cierra la ventana a la que hace referencia windowReference.
confirm("mensaje").- Muesta una caja de diálogo con una hilera de texto “mensaje” dada por el programador, un botón de “OK” y un botón de cancelación “Cancel”. El método regresa true (verdadero) para OK y false (falso) para Cancel:
<SCRIPT>
confirm("¿Estas seguro?");
</SCRIPT>
[WindowVar = ] [window].open("URL","windowName",["windowFeatures"]).- Abre una nueva ventana.
prompt("Message" [,"defaultInput"]).- Abre una caja de diálogo con un campo de texto para entrada proporcionada por el usuario.
TimeoutID = setTimeout(expresion,msec).- Evalúa expresión después de que han transcurrido msec milisegundos.
Manejadores de eventos:
onLoad.- Ocurre cuando una ventana ha terminado de cargar.
OnUnLoad.- Ocurre cuando una ventana ha terminado de descargar.
Por otro lado, el objeto document posee propiedades y métodos, pero carece de manejadores de eventos:
En mayor detalle, las propiedades y métodos del objeto document se pueden describir del siguiente modo:
Propiedades:El objeto document contiene información acerca del documento actual y proporciona métodos para escribir información a la pantalla, y en este sentido es parecido al comando PRINT del lenguaje BASIC o al comando printf() del lenguaje C. Se crea un objeto document al usar el par de etiquetas <BODY>... </BODY>. Algunas de las propiedades del objeto object reflejan atributos asociados con la etiqueta HTML de <BODY>. Los objetos anchors, forms, history y links son a su vez propiedades del objeto document.
alinkColor.- Esta propiedad es lo mismo que el atributo ALINK en el HTML asociado con <BODY>.
anchors- Una lista (array) de todos los anclajes (anchors) de un documento.
bgColor.- Esta propiedad es lo mismo que el atributo BGCOLOR en el HTML asociado con <BODY>.
cookie.- Usado para especificar una galletita persistente “cookie”.
fgColor.- Esta propiedad es lo mismo que el atributo TEXT en el HTML asociado con <BODY>.
forms.- Una lista (array) de todas las formas que hay en un documento.
lastModified.- La fecha en la que un documento fue modificado por última vez.
linkColor.- Esta propiedad es lo mismo que el atributo LINK en el HTML asociado con <BODY>.
links.- Una lista (array) de todos los enlaces (links) que hay en un documento.
location.- El URL (Uniform Resource Locator) el domicilio http://www. del documento desplegado en Internet.
referrer.- El URL del documento que hizo un llamado o invocación.
title.- Los contenidos de la etiqueta <TITLE>.
vlinkColor.- El atributo VLINK en el HTML asociado con <BODY>.
Métodos:
document.clear.- “Limpia” el documento actual.
document.close.- Cierra una “corriente de salida”.
document.open(["mimeType"]).- Abre una “corriente” para recolectar la salida de los métodos write o writeln.
document.write(expresion1 [,expresion2], ...[,expresion N]).- Escribe expresiones HTML a un documento en la ventana especificada.
document.lnwrite(expresion1 [,expresion2], ...[,expresion N]).- Escribe expresiones HTML a un documento en la ventana especificada continuando con un salto posterior hacia una nueva línea.
En lo que toca al objeto location, este objeto posee únicamente propiedades, no posee ni métodos ni manejadores de eventos:
Las propiedades del objeto location contienen información acerca del URL (Uniform Resource Locator, el domicilio http://www. de las páginas Web desplegadas en Internet) del documento actual. Si usamos a modo de ejemplo el siguiente URL:
http://www.armando.com/capitulo4/pagina50.html#topico7
podemos describir las propiedades del objeto location se pueden describir del siguiente modo:
Propiedades:Y tenemos también un objeto ¡que no posee ni propiedades, ni métodos, ni manejadores de eventos!. Se trata del objeto anchors (ancla):
hash.- El nombre del ancla en el domicilio actual (por ejemplo, #topico7).
Host.- La porción huésped hostname:port del URL (por ejemplo, www.armando.com).
HostName.- El huésped y nombre del dominio (por ejemplo, www.armando.com)
href.- El URL completo para el documento actual.
Pathname.- La porción de trayecto del URL (por ejemplo, /capitulo4/pagina50.html).
port.- El puerto de comunicaciones usado en la computadora huésped.
Protocol.- El protocolo que está siendo utilizado (por ejemplo, http:).
Search.- Una petición de búsqueda que pueda estar al final de un URL, por ejemplo un “script” CGI (Common Gateway Interface, programas ejecutados en servidores remotos para darle a los usuarios capacidades adicionales de procesamiento para correr aplicaciones intensivas en cómputo tales como algoritmos de acceso a bases de datos y búsquedas, cuya intención es permitir el acceso a información restringida por cuestiones de seguridad que de otro modo no puede ser utilizada por las computadoras personales).
Un ancla es texto en un documento que puede ser el blanco de un hiperenlace. Es definido mediante el par de etiquetas <A>... </A>. La lista anchors hace referencia a cada ancla mencionada dentro de un documento. Las anclas son referenciadas del modo siguiente:
document.anchors[indice]
La lista (array) anchors tiene una sola propiedad, length, que almacena el número total de anclas que se hallan en un documento, y puede ser referenciada del modo siguiente:
document.anchors.length
Obsérvese la metodología usada para accesar las propiedades y los métodos dentro de un objeto JavaScript mediante la ayuda del operador punto:
Se tiene también dentro de los objetos disponibles en cualquier versión de JavaScript el objeto Math, el cual es un objeto construído intrínsecamente como parte de JavaScript, y el cual posee propiedades y métodos aunque no posee manejadores de eventos. Entre las propiedades del objeto Math se encuentran muchas constantes matemáticas comunes y diversas funciones matemáticas. Las propiedades son:
E.- La constante e de Euler, 2.718281828.mientras que los métodos del objeto Math son:
LN2.- El logaritmo natural de 2, 0.69314718.
LN10.- El logaritmo natural de 10, 2.302585093.
LOG2E.- El logaritmo base 2 de e, 1.442695041.
LOG10E.- El logaritmo base 10 de e, 0.434294481
PI.- El valor de la constante pi, 3.141592654.
SQRT1_2.- La raíz cuadrada de 1/2, o sea 0.707106781.
SQRT2.- La raíz cuadrada de 2, 1.414213562.
Math.abs(numero).- Produce el valor absoluto de numero.Al igual que el objeto Math, el objeto String es otro objeto construído intrínsecamente como parte de JavaScript, su única propiedad es length, y carece de manejadores de eventos. El siguiente código JavaScript:
Math.acos(numero).- Produce en radianes el arco coseno de un numero.
Math.asin(numero).- Produce en radianes el arco seno de un numero.
Math.atan(numero).- Produce en radianes el arco tangente de un numero.
Math.ceil(numero).- Produce el menor entero que es igual o mayor a numero.
Math.cos(numero).- Produce el coseno de numero.
Math.exp(numero).- Produce enumero siendo e la constante de Euler.
Math.floor(numero).- Produce el mayor entero que es igual o menor que numero.
Math.log(numero).- Produce el logaritmo natural de numero.
Math.max(num1,num2).- Regresa el mayor de los numeros num1 y num2.
Math.min(num1,num2).- Regresa el menor de los numeros num1 y num2.
Math.pow(base, pot).- Regresa la base elevada a la potencia pot.
Math.random().- Regresa un numero aleatorio entre cero y 1.
Math.round(numero).- Regresa el valor de numero redondeado al entero mas cercano.
Math.sin(numero).- Produce el seno de un numero.
Math.sqrt(número).- Produce la raíz cuadrada de número.
Math.tan(número). Produce la tangente de número.
<SCRIPT>produce lo siguiente en la pantalla:
document.write("Numero de letras en la palabra ferrocarril: " + "ferrocarril".length + "<br>");
</SCRIPT>
Numero de letras en la palabra ferrocarril: 11
Antes de definir algunos de los métodos del objeto String, a continuación se dará una porción de código para que el lector haga la prueba por cuenta propia en su máquina de estos métodos (creando en un archivo de texto el HTML que incluye lo siguiente entre las etiquetas <HEAD>, guardándolo con la extensión .htm y abriéndolo con el navegador de su predilección):
<SCRIPT>
document.write("Texto en negritas: " + "ferrocarril".bold() + "<br>");
document.write("Texto en italicas: " + "Nota importante".italics() + "<br>");
document.write("Lo que sigue es puesto en letras chiquitas: " + "chiquitas".small() + "<br>");
document.write("Lo que sigue es puesto en letras grandes: " + "grandotas".big() + "<br>");
document.write("La primera letra en Chapultepec es: " + "Chapultepec".charAt(0) + "<br>");
document.write("La primera novena letra en Chapultepec es: " + "Chapultepec".charAt(8) + "<br>");
document.write("Una subhilera de Chapultepec es: " + "Chapultepec".substring(3,7) + "<br>");
document.write("Convertir a mayusculas: " + "Convertir a mayusculas".toUpperCase() + "<br>");
document.write("CONVERTIR a MINUSCULAS: " + "CONVERTIR a MINUSCULAS".toLowerCase() + "<br>");
document.write("Texto tachado: " + "ferrocarril".strike() + "<br>");
</SCRIPT>
Si el lector hizo el experimento, habrá obtenido lo siguiente:
Texto en negritas: ferrocarrilSe resaltará aquí el hecho de que el método:
Texto en italicas: Nota importante
Lo que sigue es puesto en letras chiquitas: chiquitas
Lo que sigue es puesto en letras grandes: grandotas
La primera letra en Chapultepec es: C
La primera novena letra en Chapultepec es: p
Una subhilera de Chapultepec es pult
Convertir a mayusculas: CONVERTIR A MAYUSCULAS
CONVERTIR a MINUSCULAS: convertir a minusculas
Texto tachado:ferrocarril
hilera.substring(a,b)
que actúa sobre un objeto String hace exactamente lo mismo que lo que hace el comando BASIC MID$, puede entresacar una subhilera de texto de entre otra hilera.
Así pues, se tienen los siguientes métodos dentro de un objeto String:
hilera.bold().- Crea el mismo efecto en la hilera que las etiquetas <B> y <BOLD> del HTML.
hilera.italics().- Crea el mismo efecto en la hilera que las etiquetas <I> del HTML.
hilera.small().- Crea el mismo efecto en la hilera que las etiquetas <SMALL> del HTML.
hilera.big().- Crea el mismo efecto en la hilera que las etiquetas <BIG> del HTML.
hilera.charAt(n). Regresa el caracter en la posición n de la hilera.
hilera.substring(a,b).- Regresa la sub-hilera entre las posiciones a y b.
hilera.toUpperCase().- Convierte todo en hilera a letras mayúsculas.
hilera.toLowerCase().- Convierte todo en la hilera a letras minúsculas.
hilera.sub().- Pone a la hilera en notación subscripta al igual que las etiquetas <SUB> del HTML.
hilera.sup().- Pone a la hilera en notación superscripta al igual que las etiquetas <SUP> del HTML.
Además de los objetos JavaScript mencionados, hay otros objetos como el objeto Date, el cual proporciona varios métodos para obtener y manejar el tiempo y la fecha, pero que no tiene ni propiedades ni manejadores de eventos. Está también el objeto history, usado para almacenar información acerca de los URLs visitados previamente por el internauta, los cuales son almacenados en orden cronológico. Contiene una sola propiedad, length, que contiene el número de entradas (URLs) almacenadas en el objeto history, y los métodos history.back() y history.forward(). Se tiene también el objeto forms. Las formas son creadas en la convención HTML con el par <FORM>... </FORM>. Muchas de las propiedades del objeto forms reflejan los atributos de la etiqueta <FORM>. Hay también varios objetos que son propiedades del objeto form:
buttonConforme van apareciendo en el mercado nuevas versiones de los navegadores se puede suponer que a cada objeto se le podrán ir agregando con el paso del tiempo en cada nueva versión de JavaScript nuevas propiedades, nuevos métodos, y nuevos manejadores de eventos, lo cual no demerita el código que se haya elaborado previamente ya que pasa a formar parte entendible por el objeto ampliado.
checkbox
hidden
password
radio
reset
select
submit
text
textarea
Sin embargo, aunque JavaScript sí permite la creación de algunos objetos, no permite la creación de nuevos objetos que posean todas las propiedades que poseen formalmente los objetos típicos de la programación orientada-a-objetos, al menos no por parte del usuario. Una versión nueva de JavaScript en un navegador nuevo puede incluír objetos que no había disponibles previamente, pero hay objetos que siguen siendo parte integral del repertorio de objetos del navegador, y lo que podemos obtener parte necesariamente de tales objetos. JavaScript es un lenguaje que está basado en objetos, pero no podemos crear objetos nuevos de acuerdo a nuestras propias necesidades que posean características tales como la definición de clases, la herencia, la encapsulación y el polimorfismo. La creación de nuevos objetos requiere de otro lenguaje de programación que esté equipado para ello, un lenguaje que permita una verdadera Programación Orientada-a-Objetos.
Como cabe esperar, hay varias palabras que han sido reservadas por JavaScript, las cuales por esto mismo no pueden ser utilizadas como variables dentro del cuerpo de etiquetas <HEAD>. Las siguiente palabras están reservadas por JavaScript:
| abstract | eval | int | static |
| boolean | extends | interface | super |
| break | false | long | switch |
| byte | final | native | synchronized |
| case | finally | new | this |
| catch | float | null | throw |
| char | for | package | throws |
| class | function | parseFloat | transient |
| const | goto | parseInt | true |
| continue | if | private | try |
| default | implements | protected | var |
| do | import | public | void |
| double | in | return | while |
| else | instanceof | short | with |
Se han cubierto aquí algunos de los rudimentos de JavaScript. Hay más material al respecto que veremos posteriormente, pero dicho material no es más que una generalización de los fundamentos que ya se han expuesto aquí.
