Brevísima introducción a JavaScript (1)

Las rutinas escritas en JavaScript pueden ser incluidas en cualquier parte de la página HTML. Para esto, se debe insertar el código dentro del tag SCRIPT:

<SCRIPT>
....... código .......
</SCRIPT type="text/javascript">

o bien se pueden insertar desde un archivo externo que generalmente tiene una extensión JS:

<SCRIPT src="archivo.js"> </SCRIPT>

o ser parte de algún parámetro, como por ejemplo:

<A href="javascript:void(0)">

Al igual que en el lenguaje HTML, pueden agregarse comentarios que son ignorados por el navegador. La forma básica de hacerlo es mediante dos barras inclinadas:

// este es un comentario simple

y si se trata de textos más largos puede usarse esta sintaxis:

/*
Este es un comentario largo
que ocuparía varias líneas
*/

El lenguaje JavaScript gira alrededor del concepto de objeto. Un objeto no es otra cosa que un "contenedor" que tiene cierto nombre y que guarda ciertos valores. Algunos de estos objetos son generados al ejecutar una página y otros son creados por el usuario.

Al abrirse una página, el navegador crea una serie de objetos cuyos valores dependen del contenido. Cada página tiene, como mínimo, los siguientes objetos:

navigator // contiene datos referidos al browser
(nombre, versión, plugins instalados, etc)
window // contiene datos referidos a la ventana actual
(y tamaño, posición, etc)
document // contiene datos referidos al documento en si mismo
(título, colores, links, etc)
location // contiene datos de la url actual
history // contiene datos de las urls visitadas

Dependiendo del contenido de la página, pueden haberse creado otros objetos. Por ejemplo, cada tag FORM es un objeto, lo mismo que cada link, cada imagen, etc. En terminos generales, hay un objeto asociado a cada instrucción HTML.

Hay dos formas de acceder a los objetos. La mayoría de ellos quedan guardados en índices que se crean a medida que se carga la página (por ejemplo, la primer imagen sera 0, la segunda 1, etc).

Otra forma es utilizando el atributo name de los tags. Por ejemplo, supongamos que en la página se ha incluido un formulario de textos:

<FORM name=EjemploFormulario>
<INPUT name=AreadeTextos ... > </INPUT>
</FORM>

Se han creado dos objetos, uno para FORM y otro para INPUT. Esto significa que el navegador debe guardar internamente los datos de estos dos elementos para poder manejarlos. Podemos leer o modificar su contenido mediante:

document.EjemploFormulario.AreadeTextos.value

En esta instrucción hay tres objetos anidados separados con un punto y, de izquierda a derecha, van desde el más general al más específico, terminando con value que es la manera de leer el contenido del mismo. Otro ejemplo podría tomarse con una imagen, por ejemplo:

<IMG name="EjemploImagen" src="URL_imagen">

podemos aceder al valor src y modificar su contenido mediante:

document.EjemploImagen.src='otro_archivo'

Es muy importante entender que una página web se ejecuta secuencialmente por lo tanto, los objetos también son creados secuencialmente. Si se quiere hacer referencia a un elemento antes que sea cargado, se provocará un error. Por ejemplo si hay un script en el HEAD que pretende cambiar el color del documento o algún parámetro del BODY, se mostrará una ventana indicando el error y la carga continuará pero de manera incompleta.

Un objeto es un elemento que posee propiedades que son variables u otros objetos. También tiene una serie de funciones asociadas a las que se llama métodos y que están predefinidas. En términos generales, la sintaxis general de los objetos es:

objeto.propiedad

Las propiedades son atributos de los objetos, algunas pueden ser modificadas (por ejemplo el color del fondo) y otras no (por ejemplo el título del documento).

Así como existen objetos predefinidos por el mismo lenguaje y objetos asociados a los elementos del documento, también pueden ser creados en forma manual. Hay dos maneras de hacer esto. La primera es creándolo de manera directa:

ObjetoEjemplo = {Propiedad1:valor1, Propiedad2:valor2};

la segunda es creando previamente un "tipo" genérico de propiedades y posteriormente, asignarlas:

function TipoEjemplo(Propiedad1, Propiedad2) {
this.Propiedad 1= Propiedad1;
this.Propiedad2 = Propiedad2;
}
ObjetoEjemplo = new TipoEjemplo(valor1, valor2);
OtroObjetoEjemplo = new TipoEjemplo(valor3, valor4);

de esta manera, el "tipo" puede ser asignado a diferentes objetos. Para definir una propiedad basta darle un valor:

ObjetoEjemplo.Propiedad1 = "Hola";
ObjetoEjemplo.Propiedad2 = 300;

Para agregar una propiedad a un tipo definido se utiliza prototype:

TipoEjemplo.prototype.Propiedad3 = null;

Un objeto puede ser eliminado mediante el operador delete:

delete ObjetoEjemplo;