JavaScript en su quintaesencia es un lenguaje elemental de programación basado en objetos. Tomamos objetos que ya fueron creados por otros, y usamos dichos objetos a conveniencia nuestra para darle interactividad a la página Web que estamos construyendo.
Podemos visualizar los objetos como “cajas negras”: metemos cosas en ellos (estableciendo las propiedades de un objeto) y la caja negra puede responder haciendo algo, sin tener que meternos en los detalles internos de lo que hay adentro de la “caja negra”. No importa cómo funciona la caja negra, lo importante es que haga lo que esperamos que haga. Al programador que usa objetos le interesa más saber qué es un objeto y no cómo realiza su trabajo. A modo de ejemplo, si tenemos un “objeto de pantalla”, puede ser posible cambiar el color de fondo en la pantalla de la máquina indicándoselo al objeto, pidiéndole que establezca su propiedad de “color”, por ejemplo, a amarillo. No importa si la computadora es una máquina UNIX o una Macintosh, el objeto hará lo mismo. Tómese también el objeto Math. Con su propiedad SQRT2 se puede obtener la raíz cuadrada de 2 con la ayuda del operador punto:
Cuando dentro de un script aparece la expresión Math.SQRT2 tal vez se nos ocurra preguntar: ¿se evalúa la raíz cuadrada de 2 cada vez que esto aparece, con alguna técnica matemática como una serie convergente, o está almacenada (ya evaluada) la raíz cuadrada de 2 dentro del objeto con una precisión, digamos, de diez cifras significativas? La respuesta es irrelevante, porque tratar de responderla sería tanto como tratar de meternos dentro del código interno del objeto, algo que va en contra de la filosofía de la programación basada en objetos. Quien sienta que necesita saber cómo están construídos por dentro todos los objetos que usa para poder usarlos en vez de limitarse a tomarlos como cajas negras no ha entendido lo que es la programación basada en objetos. Es labor del programador creador del código interno con el que funciona el objeto el saber qué es lo que ocurre dentro de su caja negra, mientras que es labor del programador que escribe scripts el limitarse a sacarles provecho sin meterese en los detalles finos de los mismos. El concepto es muy amplio y se le puede dar muchas aplicaciones en muchos campos de la programación. Es una extensión y formalización de las famosas librerías de subrutinas usadas en lenguajes de alto nivel como FORTRAN, C y Pascal en las cuales se tienen muchas funciones matemáticas a las cuales se les proporcionan dos o más números (argumentos) y como resultado del procesamiento interno que llevan a cabo regresan un resultado numérico, con las cuales se puede efectuar un análisis numérico como la Transformada de Fourier Discreta mediante el algoritmo FFT o algoritmo Cooley-Tukey dado a conocer en 1965 (lo cual causó sensación en su momento al ser dado a conocer, resultando algo útil para llevar a cabo numéricamente lo que se conoce como Análisis de Fourier) mediante los mejores y más optimizados programas de cómputo completamente libres de errores. Las subrutinas son “cajas negras” que han sido puestas a prueba de mil maneras y han salido airosas al ser usadas, a veces siendo refinadas y mejoradas aún más con el paso del tiempo. Pero a diferencia de las subrutinas usadas en los lenguajes científicos de alto nivel, los objetos son capaces de poder almacenar datos (propiedades), son capaces de poder hacer algo con sus datos o con los argumentos que se les proporcionen, e inclusive son capaces de estar pacientemente a la espera de alguna acción (como un clic) para responder haciendo algo.
<HTML>En el ejemplo anterior, el bloque de código JavaScript fue puesto dentro de la cabecera <HEAD> del documento HTML, tal y como se hizo en la entrada anterior. Sin embargo, ahora vamos a levantar dicha restricción, y vamos a ver otro ejemplo en el cual pondremos esa misma porción de código JavaScript no dentro de la cabecera <HEAD> sino dentro del cuerpo <BODY> del documento HTML (obsérvese que este documento HTML ni siquiera contiene una sección de cabecera <HEAD>):
<HEAD>
<TITLE>Ejemplo de una pagina interactiva</TITLE>
<SCRIPT>
function miFuncion()
{
document.getElementById("demo").innerHTML="Mi primera pagina interactiva JavaScript ";
}
</SCRIPT>
</HEAD>
<BODY>
<h1>Mi página Web</h1>
<p id="demo">Fíjate en este párrafo.</p>
<button type="button" onclick="miFuncion()">Oprime el botón</button>
</BODY>
</HTML>
<HTML>
<BODY>
<h1>Mi página Web</h1>
<p id="demo">Fíjate en este párrafo.</p>
<button type="button" onclick="miFuncion()">Oprime el botón</button>
<SCRIPT>
function miFuncion()
{
document.getElementById("demo").innerHTML="Mi primera funcion interactiva JavaScript";
}
</SCRIPT>
</BODY>
</HTML>
Pero no solo es posible declarar una porción de código JavaScript ya sea dentro de la cabecera <HEAD> o dentro del cuerpo <BODY> de un documento HTML. También es posible hacer dicha declaración fuera del documento guardando el código JavaScript en un archivo externo al cual como se acostumbra hacerlo se le pone la extensión “.js”.
<HTML>Se agregará aquí que la técnica de colocar un script en un archivo externo ubicado en el servidor es ampliamente utilizada por muchos programadores para impedir que un script que les costó mucho trabajo elaborar incorporando inclusive ideas novedosas y originales pueda ser visto y copiado con tal solo ver el código fuente de la página HTML con la opción para ello que ofrecen casi todos los navegadores, los cuales no muestran el contenido de los archivos con extensión “.js” invocados por la página Web, siendo este un buen truco para conservar secretos. El código anterior no se ejecutará como en el caso de los dos ejemplos previos si el navegador no encuentra la ubicación en algún servidor Web externo o en algún lugar especificado dentro de la computadora el archivo “miScript.js” que contiene el bloque de código <SCRIPT>. Dicha ubicación tiene que ser proporcionada con la palabra reservada src (source, fuente), con algo como lo siguiente en caso de que el documento se encuentre en algún servidor conectado a Internet:
<BODY>
<h1>Mi página Web</h1>
<p id="demo">Fíjate en este párrafo.</p>
<button type="button" onclick="miFuncion()">Oprime el botón</button>
<p><strong>Nota:</strong> myFuncion está almacenada en el archivo externo "miScript.js".</p>
<SCRIPT src="miScript.js">
</SCRIPT>
</BODY>
</HTML>
<SCRIPT src="http://www.armandomartinez.com/miScript.js"> </SCRIPT>
o con algo como lo siguiente en caso de que el documento se encuentre almacenado en el disco duro de la computadora:
<SCRIPT src="C:\MyDocuments\miScript.js"> </SCRIPT>
Los ejemplos dados arriba ilustran la manera en la cual se define una función dentro de JavaScript cuya sintaxis es la siguiente suponiendo que no se le proporcione argumento alguno a la función que se define:
function nombre dado a la funcion() { cuerpo de la funcion }
La definición de funciones dentro de JavaScript es algo extremadamente versátil a lo cual le podemos dar una infinidad de usos.
A continuación veremos cómo en el lenguaje JavaScript con la palabra reservada function podemos definir un “temporizador” mediante el cual se llevará a cabo cierta acción una vez que haya transcurrido una cantidad predeterminada de tiempo:
<HTML>Obsérvese que se ha hecho uso de otra función reservada para uso exclusivo de JavaScript, la función setTimeOut(). Y dentro de dicha función, hemos utilizado otra función reservada para uso exclusivo de JavaScript, la función alert(). Esto ilustra cómo el anidamiento de una o más funciones dentro de otra es algo permitido dentro de JavaScript.
<BODY>
<p>Oprime el botón para esperar tres segundos, alertando tras esto con un 'Hola'.</p>
<button onclick="miFuncion()">Oprime este botón</button>
<SCRIPT>
function miFuncion()
{
setTimeout(function(){alert("Hola")},3000);
}
</SCRIPT>
</BODY>
</HTML>
A ninguna de las funciones JavaScript que hemos visto arriba se les ha pasado argumento alguno, como lo resalta el hecho de que no haya nada dentro del par de paréntesis que requiere la definición de toda función. Sin embargo, al igual que como ocurre con las funciones matemáticas, le podemos pasar uno o inclusive varios argumentos a una función definida dentro de JavaScript. Si a la función JavaScript que se está definiendo se le pasa uno o varios argumentos con el cual (o con los cuales) se hará algún tipo de manipulación, la sintaxis es la siguiente:
function nombre dado a la funcion(argumentos) { cuerpo de la funcion }
Pero no solo las funciones JavaScript pueden recibir argumentos. También pueden regresar cierto valor o constante si se usa para ello la palabra reservada return.
El siguiente ejemplo además de que nos muestra la definición de una función que recibe cuatro argumentos y nos regresa un valor calculado a partir de dichos elementos nos muestra también otro hecho importante: dentro de una página HTML podemos meter no uno sino varios scripts:
<HTML>Si se ejecuta lo anterior abriendo el texto como una página Web, se producirá el siguiente resultado:
<HEAD>
<TITLE>Ejemplo de dos scripts en un documento</TITLE>
<SCRIPT>
function Promedio(a,b,c,d) {
resultado = (a + b + c + d) / 4;
return resultado
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
calificacion = Promedio(3,4,5,6);
document.write("El promedio es: " + calificacion);
</SCRIPT>
</BODY>
</HTML>
El promedio es: 4.5
En el ejemplo que se acaba de dar hay dos scripts, el script puesto en la cabecera <HEAD> del documento HTML con el cual se define la función Promedio(a,b,c,d) que calcula el promedio de los cuatro argumentos a, b, c y d, y nos regresa con return el resultado del cálculo; y el script puesto en el cuerpo <BODY> del documento con el cual se usa la función que fue definida pasándole los valores a=3, b=4, c=5 y d=6.
Tal vez a estas alturas surja la pregunta: ¿en qué orden se van ejecutando los scripts que sean puestos dentro de un documento HTML? En relación a esto, el orden de ejecución es el siguiente: primero se ejecutan los scripts que sean puestos en la cabecera <HEAD> de un documento HTML, tras lo cual se ejecutan los scripts que sean puestos en el cuerpo <BODY> del documento, mientras que manejadores de eventos serán atendidos al momento de ocurrir el evento (por ejemplo, oprimir cierta tecla o llevar a cabo alguna acción con el mouse).
Con las versiones más recientes de JavaScript se les ha otorgado a los programadores de sistemas para la Web la facultad de poder crear objetos. La palabra mágica para lograr tal cosa es la palabra reservada:
new
Un ejemplo de la creación de un objeto persistente que una vez creado puede seguir actuando aún después de que el navegador haya sido cerrado es la famosa “galletita” de uso común en muchas páginas Web para ir rastreando las costumbres y las preferencias de los usuarios. Una “galletita” o cookie (se pronuncia como “kuki”) es un pedacito de información que un servidor Web deposita en el navegador cuando se lleva a cabo el primer encuentro entre la máquina del usuario y el servidor Web, y el cual es compartido por ambos cada vez que el usuario vuelve a la misma página. El servidor guarda una porción de la cookie y la información que contiene del usuario, y el navegador hace lo mismo con la cookie almacenada en algún lugar del disco duro del usuario. De esta manera un programador puede almacenar los nombres y las contraseñas de los usuarios en los discos duros de las máquinas de los mismos usuarios de forma tal que la próxima vez que regresen puedan entrar automáticamente al sitio Web sin tener que proporcionar toda la información parte de la cual tal vez hayan olvidado. El usuario nunca se da cuenta de cuándo una cookie es depositada en su máquina a menos de que haya configurado su navegador para que le avise cuando se está recibiendo una solicitud para depositar cookies en la máquina del usuario. El problema es que las cookies no solo pueden ser leídas por el servidor Web que las deposita, también pueden ser leídas por un intruso que haya logrado acceso a la máquina con la ayuda de una infección informática viral, proporcionándole al intruso la información que necesita saber (nombre y contraseña) para ingresar a las páginas Web visitadas por el usuario, lo cual incluye el acceso a sus cuentas de correo.
Usando cookies podemos personalizar las páginas Web y seguirle la pista a la información referente a un usuario que vuelve a visitar un sitio. Las cookies le permiten a una página Web rastrear información acerca de cada visitante en particular, como el número de veces que ha visitado el sitio, sus opciones y preferencias dentro del sitio, etcétera. La creación de una cookie para una página Web es una cosa conceptualmente sencilla, usando la propiedad “cookie” del objeto “document” con la ayuda del operador punto:
document.cookie = "atributos_de_la_cookie"
Como puede verse, para crear una cookie usando JavaScript asignamos una hilera de texto a la propiedad cookie del documento actual, como en el modo siguiente:
document.cookie = "nombre = valor; expira = fecha_de_expiracion"
Supóngase que nos interesa depositar una cookie que rastree la fecha y la hora de visita de un usuario a la página Web. Llamaremos a esta cookie “lastvisit”, la variable “today” contendrá la fecha y la hora actuales, y la variable “expdate” contendrá la fecha de expiración de la cookie.
document.cookie = "lastvisit = today; expires = expdate"
La sintaxis de las cookies requiere que la fecha de expiración sea puesta en un formato muy específico:
Dse, DD-MMM-AAAA HH:MM:SS GMT
Dse debe ser una abreviatura válida de tres letras para el nombre de un día de la semana en inglés, siendo las abreviaturas válidas (de lunes a domingo):
Mon, Tue, Wed, Thu, Fri, Sat, Sun
mientras que DD representa el día del mes; MMM debe ser una abreviatura válida de tres letras para el nombre del mes en inglés, siendo las abreviaturas válidas (de enero a diciembre):
Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec
Afortunadamente, recurriendo a algunos de los métodos del objeto Date no es necesario entrar en complicaciones como el tener que manejar la anterior sintaxis, como lo veremos en la cookie que será construída en la manera que será mostrada.
<HTML>Si se guarda el código HTML anterior bajo algún nombre de archivo como “cookie.htm” y se abre dicho archivo con un navegador actualizado, aparecerá una “caja de diálogo” con el texto “Escribe tu nombre:” y con dos botones “OK” y “Cancel”. Cuando el usuario ha escrito su nombre en la barra de texto de la caja de diálogo (por ejemplo, “Armando Martínez”) y la cierra usando el botón “OK”, encontrará que cada vez que abra el navegador aparecerá una caja diciendo “Bienvenido de nuevo...(nombre)”. El hecho de que esto vuelva a aparecer cada vez que se abra el navegador revela que se ha creado un objeto nuevo, una “cookie”, que estará presente cada vez que se abra de nueva cuenta el navegador. Naturalmente, después de haber llevado a cabo este ejercicio, hay que borrar por completo la “galletita” para que no siga dando lata, y esto se hace recurriendo a alguna opción del navegador para borrar el historial de navegación reciente, echando recurso de alguna opción de la línea del menú como “Clear Recent History” (Limpiar Historial Reciente) asegurándose de que la sub-opción “Cookies” (o similar) esté checada para que no solo se borre todo el historial reciente sino también para que se borre la “galletita” creada por el programa anterior.
<HEAD>
<TITLE>Ejemplo de una cookie en JavaScript</TITLE>
<SCRIPT>
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
function checkCookie()
{
var user=getCookie("username");
if (user!="")
{
alert("Bienvenido de nuevo " + user);
}
else
{
user = prompt("Escribe tu nombre:","");
if (user!="" && user!=null)
{
setCookie("username",user,30);
}
}
}
</SCRIPT>
</HEAD>
<BODY onload="checkCookie()">
</BODY>
</HTML>
Con un programa JavaScript tenemos la facultad de poder crear no solo una sino varias “galletitas” que le dejaremos al usuario como un objeto persistente que será invocado cada vez que abra su navegador. En el ejemplo que se ha dado, la galletita es bastante obvia, pero con la misma facilidad podemos crear galletitas que serán invisibles para el usuario y que permanecerán escondidas sin que el usuario se percate de su existencia. Naturalmente, para que las galletitas puedan ser creadas como objetos persistentes, es necesario que el usuario tenga activada la opción en su navegador para permitir la ejecución de código JavaScript, porque en caso contrario no se llevará a cabo ninguna ejecución de código JavaScript y por lo tanto ninguna creación de “galletitas” (muchos sitios Web que insisten en depositar galletitas en las máquinas de los usuarios que los visitan elaboran su código JavaScript de modo tal que si el usuario tiene la interpretación de código JavaScript desactivada entonces no le mostrarán casi nada del material que está interesado en ver).
En el programa anterior se utiliza new del modo siguiente:
new Date();
Revisando el código JavaScript anterior, encontramos que aparecen definidas tres funciones:
function setCookie(cname,cvalue,exdays) { ... }
function getCookie(cname) { ... }
function checkCookie( ) { ... }
Obsérvese que a la primera función le pasamos tres argumentos (cname, cvalue y exdays), a la segunda función le pasamos un argumento (cname) y a la tercera función no le pasamos ningún argumento. En el ejemplo que se acaba de dar encontramos también otra cosa que nos debe llamar la atención, el hecho de que en el par de las etiquetas <BODY> que definen al cuerpo de la función la etiqueta de apertura contiene un atributo en el que se carga la segunda función checkCookie() recurriendo a la palabra reservada onload:
<BODY onload="checkCookie()">
Y esto es otra cosa que podemos esperar en las nuevas versiones de JavaScript y HTML que han ido saliendo, el poder redefinir la etiqueta <BODY> de modo tal que se le puedan meter atributos.
Lo que hemos visto arriba nos puede hacer sospechar que JavaScript en sus versiones más recientes y completas nos puede dar acceso a funciones interiores del sistema de la máquina, y si el lector ha sospechado esto tendrá toda la razón. La siguiente porción de código HTML contiene código ejecutable JavaScript que imprimirá en la pantalla (dentro de la ventana abierta por el navegador) la hora tal y como está siendo dada por la máquina:
<HTML>En el código HTML anterior, se ha introducido una nueva manera de escribir comentarios que son ignorados durante la ejecución del programa JavaScript pero que son añadidos según el programador de sistemas lo crea conveniente para explicarle mejor a otros programadores el propósito de alguna función o conjunto de funciones, empezando la línea de comentario con una doble diagonal “//”, con lo cual el resto de la línea será ignorado por el interpretador JavaScript.
<HEAD>
<TITLE>Un reloj en la ventana del navegador</TITLE>
<SCRIPT>
function startTime()
{
var Hoy=new Date();
var h=Hoy.getHours();
var m=Hoy.getMinutes();
var s=Hoy.getSeconds();
// Agregar un cero adelante de los números menores que 10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</SCRIPT>
</HEAD>
<BODY onload="startTime()">
<div id="txt"></div>
</BODY>
</HTML>
De nueva cuenta, en el programa anterior se ha utilizado new del modo siguiente para crear el objeto co el cual mantendremos el conteo del tiempo:
new Date();
Revisando el código JavaScript del ejemplo, encontramos que son definidas dos funciones la primera de las cuales no recibe argumento alguno y la segunda de las cuales recibe un argumento:
function startTime( ) { ... }
function checkTime( i ) { ... }
Así como en JavaScript podemos ir creando objetos nuevos con new, también podemos ir más lejos recurriendo a lo que se conoce como el constructor de un objeto. Para lograr tal cosa, hacemos uso intensivo de la palabra reservada this en la manera que se muestra en el siguiente ejemplo de código HTML:
<HTML>La ejecución del anterior código HTML imprime lo siguiente en una ventana del navegador:
<BODY>
<SCRIPT>
function persona(nombre,apellido,edad,colordeojos)
{
this.nombre=nombre;
this.apellido=apellido;
this.edad=edad;
this.colordeojos=colordeojos;
}
miPadre=new persona("Don Ignacio","Martínez",70,"cafe");
document.write(miPadre.nombre + " tiene " + miPadre.edad + " años.");
</SCRIPT>
</BODY>
</HTML>
“Don Ignacio tiene 70 años”
En el lenguaje JavaScript no está definido ningún constructor de objetos “persona”. Pero como lo muestra el programa anterior, podemos crearlo, recurriendo para ello a una función a la que le damos el nombre “persona” y la cual será definida de modo tal que le serán pasados cuatro argumentos (nombre, apellido, edad, colordeojos):
function persona(nombre,apellido,edad,colordeojos) { ... }
Obsérvese también cómo con la palabra reservada this vamos definiendo dentro de la función “persona” lo que serán las propiedades del objeto “persona”. Una vez que se ha definido “persona”, podemos crear a voluntad todos los objetos nuevos que queramos recurriendo a tal “esqueleto” o “plantilla”. En el ejemplo anterior, se llevó a cabo la creación de un solo objeto llamado “miPadre”, pero igualmente podríamos haber creado varios objetos de la misma clase usando la misma plantilla. Para obtener la propiedad deseada de cada objeto JavaScript siempre recurrimos a la sintaxis:
objeto . propiedad
PROBLEMA: Modifíquese el programa anterior para crear además los objetos “miHermano”, “miHermana”, “miTio” y “miPrimo”, haciendo uso de tres de dichos objetos dentro de un página HTML.
<HTML>En general, JavaScript da soporte a la creación de tres tipos de objetos:
<BODY>
<SCRIPT>
function persona(nombre,apellido,edad,colordeojos)
{
this.nombre=nombre;
this.apellido=apellido;
this.edad=edad;
this.colordeojos=colordeojos;
}
miPadre=new persona("Don Ignacio","Martínez",70,"café");
miHermano=new persona("Alejandro","Martínez",45,"café");
miHermana=new persona("Paty","Martínez",39,"café claro");
miTio=new persona("Agustín","Téllez",68,"café");
miPrimo=new persona("Luis Carlos","Téllez",45,"café");
document.write(miPadre.nombre + " tiene " + miPadre.edad + " años" + "<br>");
document.write(miHermana.nombre + " tiene " + " ojos color " + miHermana.colordeojos + "<br>");
document.write("Mi tio se llama " + miTio.nombre + " " + miTio.apellido + "<br>");
</SCRIPT>
</BODY>
</HTML>
1) Objetos construídos intrínsecamente dentro de JavaScript, tales como el objeto Math, el objeto Date y el objeto String.
2) El objeto que corresponde al modelo DOM (Document Object Model) que representa varios componentes del navegador y del documento HTML. Por ejemplo, la función alert() es un método del objeto window.
3) Objetos creados por el programador, como en el caso del objeto persona creado en el ejemplo anterior.
Sin embargo, aún con todas estas posibilidades, no es posible definir a JavaScript como un lenguaje dentro de lo que se conoce tradicionalmente como una programación orientada-a-objetos, porque hay otras características que no se encuentran dentro de la definición de objetos JavaScript, tales como la definición de clases y la herencia (además de otras cosas como el polimorfismo y la encapsulación). Un programador que por alguna razón requiera de todas las capacidades propias de un lenguaje para llevar a cabo una verdadera programación orientada-a-objetos recurrir al lenguaje Java en lugar del lenguaje JavaScript. Pese a algunas similitudes en la sintaxis, Java y JavaScript se trata de lenguajes diferentes. Una diferencia importante entre JavaScript y Java es que el primero es un lenguaje interpretado, el navegador ejecuta cada línea de código script conforme la va encontrando, mientras que el segundo es un lenguaje compilado; el primero requiere un interpretador que en muchos casos forma parte del paquete incluído dentro del navegador, mientras que el segundo requiere instalar en la máquina lo que se conoce como la máquina virtual Java (JVM, Java Virtual Machine o Máquina Virtual Java, una máquina que no existe en hardware ya que se trata de una especificación para un procesador hipotético capaz de poder ejecutar código Java) que tiene que ser obtenida por separado de la empresa Sun Microsystems que lo creó y lo mantiene actualizado.
Dada la similitud de la palabra “Java” (la cual tiene dos significados: una isla de Indonesia habitada por decenas de millones de personas, y el café usado para mantenerse despierto y alerta durante la noche), la siguiente pregunta puede surgir: ¿cuál de los dos fue primero? En realidad, esta similitud surgió cuando tras una asociación de mercadotecnia que la empresa Netscape (fabricante del navegador más vendido alrededor del mundo cuando el poseer un navegador no era gratis) sostuvo con la empresa Sun la primera empresa cambió el nombre de su componente LiveScript a JavaScript para explotar el creciente entusiasmo que estaba generando la aparición del lenguaje de programación Java creado por Sun.
En la entrada “La programación visual” vimos cómo en una computadora que tenga una interfaz gráfica el concepto de objetos va surgiendo de modo casi natural e inevitable, llevándonos a considerar todo (íconos, atajos, archivos, ventanas) como objetos. Se trata de objetos propios a un sistema operativo que no tiene absolutamente nada que ver el desarrollo de la red mundial Internet, ya que tales objetos pueden existir en una máquina que no tenga conexión alguna a Internet. Pero con JavaScript hemos visto que por la vía de la programación también podemos manipular objetos para enviar y recibir contenidos de todo tipo a través de la red mundial Internet, independientemente de la plataforma (fabricante de la máquina, fabricante del sistema operativo instalado en la máquina, el tipo de navegador instalado en la máquina) utilizada. Esto debe ser suficiente para despertar la sospecha de que el concepto de una programación orientada-a-objetos debe ser algo tan universal como el uso de sonidos para comunicarse en algún idioma, y de que debe ser posible en principio llevar a cabo algunas generalizaciones y conceptos en forma abstracta que se puedan aplicar de mil maneras distintas a casos particulares, cambiando las formas pero no la estructura fundamental. Y así es en efecto. Sin embargo, una inmersión en esto requiere de una mayor familiaridad sobre cómo los bloques fundamentales de la nueva teoría se van definiendo.
Aunque JavaScript no es un lenguaje tan amplio y tan formal como Java, de cualquier modo un programa puede contener scripts tan elaborados que inclusive algunos navegadores incluyen como parte de su paquete de herramientas para los programadores Web instrumentos con los cuales pueden analizar la ejecución línea-por-línea de un script. A modo de ejemplo, ya en la versión 12.0 del navegador Mozilla Firefox se podía encontrar en la opción de menú “Tools” en la opción “Web Developer”: (1) una Consola Web (Web Console), (2) una ventana “Inspect”, (3) un “Scratchpad”, y (4) un Editor de Estilo (Style Editor) para páginas que usen lo que se conoce como Hojas de Estilos en Cascada. En particular, con respecto al tema que estamos tratando, nos interesa aprender a utilizar algo como el “Scratchpad”, porque se trata de un “Scratchpad JavaScript” que nos permite ejecutar el código JavaScript línea-por-línea y nos permite detectar errores. No se entrará en mayores detalles sobre las herramientas proporcionadas por cada navegador para el análisis del código JavaScript de un documento HTML en virtud de que varían no solo de un navegador a otro sino inclusive dentro de un mismo navegador al pasar de una versión a otra, requiriéndose en tal caso el consultar los tutoriales y manuales disponibles en Internet para poder aprender a usar dichas herramientas.
Puesto que un script del lenguaje JavaScript está definido en base a etiquetas entre las cuales se pone el código fuente seguramente algunos lectores se preguntarán el por qué muchos scripts que habrán visto, en lugar de estar encapsulados simplemente entre la pareja de etiquetas:
<SCRIPT> ... </SCRIPT>
a veces amplían la etiqueta de apertura con el atributo LANGUAGE especificando algo como lo siguiente:
<SCRIPT LANGUAGE="JavaScript">
o algo un poco más detallado como lo siguiente:
<SCRIPT LANGUAGE="JavaScript1.3">
o inclusive algo que parece ser un poco más superfluo como lo siguiente (la tendencia moderna es aceptar por igual todas las etiquetas <SCRIPT> de apertura en un navegador actualizado haciendo las adecuaciones que haya que hacer para cada tipo y versión de navegador y cada versión de JavaScript que esté siendo utilizada):
<SCRIPT LANGUAGE="JavaScript1.3" type="text/javascript">
El problema es que no solo JavaScript ha sido ampliado continuamente en sus capacidades con el paso del tiempo, algunas de las cuales tal vez no puedan ser manejadas en forma apropiada por navegadores cada vez más obsoletos que no han sido actualizados por los usuarios y en cuyo caso los programadores Web encuentran conveniente especificar la versión mínima de JavaScript (por ejemplo, JavaScript 1.3) a partir de la cual el script que han elaborado para la página Web que han diseñado debe funcionar (lo cual resulta útil para resolver conflictos a lo largo de diversas plataformas en donde el código puede funcionar en unas plataformas pero en otras no). Resulta que tiempo después de la primera implementación de JavaScript en el navegador Netscape 2.0, Microsoft decidió presentar su propia versión de lo que debe ser un lenguaje de scripting.
Microsoft no sólo hizo lo mejor que pudo para apropiarse del lenguaje de programación orientada-a-objetos Java sin pagarle regalías o comisiones a la empresa Sun Microsystems (curiosamente, Microsoft siempre ha sido una de las empresas que más se han estado quejando denunciando la piratería de sus productos siendo que las supuestas pérdidas multimillonarias nunca han sido un obstáculo para que el fundador de la empresa se haya convertido en el hombre más rico del mundo), esto además de estarle introduciendo modificaciones a la versión Microsoft de Java para convertirlo en algo que sólo puede funcionar adecuadamente en máquinas que tengan un sistema operativo Windows instalado en ellas. También hizo su propia versión de JavaScript, llamada VBScript, basada en el lenguaje Visual Basic de la misma empresa. De este modo, había ya dos lenguajes diferentes de scripting, JavaScript y VBScript, el primero capaz de correr en cualquier plataforma que tuviera el navegador Netscape instalado en ella, y el segundo capaz de correr (al principio) únicamente en el navegador Internet Explorer 3.0 (y versiones superiores) de Microsoft.
El lenguaje VBScript trabaja en una forma muy parecida a como lo hace JavaScript. El código script se escribe y se guarda en formato de texto dentro del documento HTML. Una ventaja indudable de VBScript es que, por ser un subconjunto del lenguaje de programación Visual Basic de Microsoft (y por lo tanto cien por ciento compatible con la sintaxis de todas las expresiones, enunciados de control y comandos usados en Visual Basic), cualquier programador familiarizado con Visual Basic podía empezar a escribir de inmediato scripts en VBScript.
La mejor forma de darle una idea al lector sobre la manera en que se elabora un script de VBScript es presentándole un ejemplo sencillo sobre el uso del mismo en una página Web:
<HTML>Si se guarda lo anterior en un archivo de texto que tenga la extensión “.htm” o la extensión “.html” y se abre con un navegador Internet Explorer, aparecerá una caja de diálogo como la siguiente:
<HEAD>
<TITLE>Ejemplo de VBScript</TITLE>
<SCRIPT LANGUAGE="VBScript">
dim nombre
nombre = InputBox("¡Hola! ¿Cuál es tu nombre?")
Document.Write "¡Hola " & nombre & "! Esto es VBScript"
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
que saludará al usuario y le pedirá su nombre, tras lo cual se cerrará la caja de diálogo y se imprimirá en la pantalla un texto como el siguiente:
¡Hola Armando Martínez! Esto es VBScript
En el script podemos ver que lo primero que se hace es declarar una variable, la variable “nombre”, con la palabra reservada dim. Al igual que como ocurre en Visual Basic, VBScript apoya el uso de variables sin que tengan que ser declaradas primero con dim, aunque esto no es considerado como una buena práctica de programación.
En un script VBScript se pueden usar procedimientos. Un procedimiento es un conjunto de enunciados que pueden ser invocados desde el código principal o desde otros procedimientos. VBScript apoya el uso de dos tipos de procedimientos: el procedimiento Sub, que no produce ningún valor de retorno, y Function que sí lo hace. A continuación se presenta un ejemplo en VBScript que usa un procedimiento Sub:
<HTML>Si se guarda lo anterior en un archivo de texto que tenga la extensión “.htm” o la extensión “.html” y se abre con un navegador Internet Explorer, se imprimirá en la pantalla lo siguiente:
<HEAD>
<TITLE>Ejemplo de procedimiento Sub en VBScript</TITLE>
<SCRIPT LANGUAGE="VBScript">
Sub ImprimirAreaDeCirculo(radio)
Document.Write "Un circulo de radio " & radio & " cm tiene un area de "
Document.Write 3.14159 * radio^2
Document.Write " cm<sup>2</sup>.<br>"
End Sub
'Ahora llamamos el procedimiento Sub varias veces
ImprimirAreaDeCirculo(3)
ImprimirAreaDeCirculo(7)
ImprimirAreaDeCirculo(12.5)
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Un circulo de radio 3 cm tiene un area de 28.27431 cm2.
Un circulo de radio 7 cm tiene un area de 153.93791 cm2.
Un circulo de radio 12.5 cm tiene un area de 490.8734375 cm2.
Obsérvese que la forma de poner comentarios es comenzando la línea de texto con una comilla sencilla. Al igual que Visual Basic, VBScript es un lenguaje manejado por eventos, lo cual significa que puede responder a ciertos eventos tales como un clic del mouse o la carga de un documento. Un evento puede ocasionar que una porción de código conocida como “manejador de evento” se ejecute para permitirle al programa responder en forma adecuada. Desde su primera versión, VBScript estaba equipado con los siguientes manejadores de eventos:
onBlur.- Ocurre cuando el enfoque de la entrada es removido de un elemento de forma.
onClick.- Ocurre cuando el usuario hace clic en un elemento de forma o un enlace.
onChange.- Ocurre cuando un texto, área de texto, o valor de un elemento seleccionado, ha cambiado.
onFocus.- Ocurre cuando un elemento de forma recibe el enfoque.
onLoad.- Ocurre cuando una página es cargada.
onMouseOver.- Ocurre cuando el mouse es movido sobre un enlace o un ancla.
onSelect.- Ocurre cuando el usuario selecciona el campo de entrada de un elemento de forma.
onSubmit.- Ocurre cuando el usuario submite una forma.
onUnLoad.- Ocurre cuando el usuario se sale de una página
Sin embargo, y pese a las diferencias obvias, la jerarquía de objetos para el navegador Internet Explorer de Microsoft y VBScript es muy similar y de hecho es compatible con la jerarquía de objetos de JavaScript. La diferencia principal es que EN VBScript no hay objetos Math, Date o String construídos internamente, aunque estos objetos no son necesitados al haber funciones disponibles para dar apoyo a este tipo de operaciones.
La buena noticia es que un programador que sepa elaborar programas con Visual Basic esencialmente ya sabe elaborar también programas usando scripts VBScripts; no tiene que aprender nada nuevo. La mala noticia es que, en virtud de que VBScript surgió de una rivalidad acérrima entre Microsoft y Netscape, aún hasta el día de hoy no hay garantía de que todas las páginas Web que hayan sido construídas usando VBScript serán elaboradas correctamente en todas las plataformas que hay en existencia.
