Manual de JavaScript

1.Introducción
1.El Lenguaje JavaScript
2.JavaScript y Java

2.Scripts en en Blowser
1.Usando JavaScript en HTML
2.Scripts y Manejo de Eventos
3.Ideas y Técnicas

3.Objetos del Navegador

1.Usando los Objetos del Browser
2.Jerarquía de Objetos del Browser
3.Diseño de JavaScript con HTML
4.Objetos Clave del Navegador

4.Usando Ventanas y Frames

1.Abriendo y Cerrando Ventanas
2.Usando Frames
3.Referenciando Ventanas y Frames
4.Navegando en las Ventanas

Conceptos del Lenguaje

5.Valores, Variables y Literales

1.Valores
2.Variables
3.Literales

6.Expresiones y Operadores
1.Expresiones
2.Operadores
3.Precedencia

7.Modelo de Objetos
1.Introducción
2.Objetos y Propiedades
3.Funciones y Métodos
4.Creando Nuevos Objetos

8.Objetos y Funciones Incorporadas

1.Objeto String
2.Objeto Math
3.Objeto Date
4.Objeto Array
5.Objeto Image
6.Funciones Incorporadas

9.Resumen de Sentencias
1.Sent. Condicional
2.Sent. Iterativas
3.Sent. de Manipulación de Objetos
4.Comentarios
El Lenguaje JavaScript

JavaScript es un lenguaje compacto, y basado en objetos, diseñado para el desarrollo de aplicaciones

cliente-servidor a través de Internet. Netscape
Navigator 2.0 es capaz de interpretar sentencias JavaScript embedidas en programas CGI.

En una aplicación cliente para un browser, las sentencias JavaScript embedidas en un documento HTML
pueden reconocer y responder a eventos generados
por el usuario, como clicks del mouse, información en formularios y navegación de documento a documento.

Por ejemplo, se puede escrubir una función JavaScript que verifique que la información ingresada por el
usuario sea correcta. Sin que haya transmisión de
main por la red, un documento HTML com JavaScript embedido es capaz de interpretar la información
ingresada por el usuario, verificar que sea correcta y alertar
al usuario en caso que no lo sea. Se puede también ejecutar archivos de audio, applet's o comunicar con una
extensión de Netscape (plug-in's) en respuesta a la
apertura o cierre de una página.

JavaScript y Java
El lenguaje JavaScript imita a Java, pero sin verificación estática de tipos ni
restricciones fuertes en tiempo de ejecución. JavaScript soporta la mayoría de las
expresiones y sintaxis válidas en Java, así como las sentencias de control de flujo de
Java. En contraste con el sistema de classes definidas en tiempo de compilación en
Java, Javascript trabaja en base a un simple sistema en tiempo de ejecución, el cual
permite el uso de tipos de main básicos como enteros, números de punto flotante,
booleanos y strings. JavaScript soport un sistema simple de objetos basado en instancias
(no en clases), que provee capacidades significativas.
Además, JavaScript soporta funciones, pero de nuevo sin ningún requerimiento especial
al declararlas. Estas funciones pueden ser propiedades de objetos (aunque el usuario no
puede definir clases), y se ejecutan como métodos bastante flexibles debido a que no se
verifican los tipos.
JavaScript complementa a Java al exponer muchas características de las applets en Java
a los autores de HTML. JavaScript puede además obtener y establecer propiedades de
las applets, esto es, sólo aquellas que alteran el estado de la applet o plug-in.
Java es un lenguaje de extensión diseñado, en particular, para ejecución rápida y
seguridad de tipos, l que se ve reflejada en la imposibilidad de transformar un entero en
una referencia, por ejemplo.
Los programas en Java consisten exclusívamente de clases y sus métodos, lo que, junto
a los requerimientos de declaraciones de clases, métodos y tipos hacen que la
programación sea más compleja que en JavaScript. Otro punto imortante es que la
herencia que provee Java crea jerarquías muy acopladas de objetos.
En contraste, JavaScript posee el espíritu de un lenguaje pequeño y verificado
dinámicamente. Estos lenguajes ofrecen herramientas de programación a una audiencia
mayor, ya que son más fáciles de utilizar, y proveen de una interface más especializada.
 Como consecuecia, necesitan sólo de un mínimo de requerimientos para creación de
objetos.
La siguiente tabla compara y contrasta JavaScript con Java:
JavaScript Java
Compilado en el Servidor antes de ejecución en el
Interpretado en el Cliente.
Cliente.
Basado en Objetos. El código usa objetos incorporados Orientado a Objetos. El código consiste de clases con
del sistema, pero no provee creación de clases o herencia. herencia, permitiendo crear objetos y crear jerarquías.
Código embedido en HTML. Applets referenciadas desde HTML.
Variables y tipos de main no se declaran. Variables y tipos de main se declaran.
Enlazado dinámico. Referencias a objetos se validan en Enlazado estático. Referencias a objetos se validan en
tiempo de ejecución. tiempo de compilación.

Usando JavaScript en HTML

JavaScript puede ser embedido en un documento HTML de dos maneras:

 Como funciones y sentencias usando el elemento < SCRIPT >.

 Como manejadores de eventos usando attributos manejadores en HTML.

El Elemento < SCRIPT >

Una script embedida en HTML usando este elemento usa el formato:

<SCRIPT LANGUAGE="JavaScript">
sentencias;
...
</SCRIPT>

El atributo opcional LANGUAGE especifica el lenguaje de la script. Nota: JavaScript

diferencia entre mayúsculas y minúsculas.
Ejemplo 1: Una Script Sencilla

<HTML><HEAD>
</HEAD><BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("Hola mundo!!");
</SCRIPT>
</BODY></HTML>

Se despliega como:

Hola mundo!!
Escondiendo el Código JavaScript
Cuando un usuario utiliza un browser que no entiente scripts, éste despliega todo el
texto que aparece entre los elementos < SCRIPT > y < /SCRIPT >. Para evitar lo
anterior se debe ocultar el códico JavaScript de la siguiente manera:

<SCRIPT LANGUAGE="JavaScript"><!--
sentencias;
...
// --></SCRIPT>

Definiendo y Llamando Funciones

Scripts que se ubican entre los elementos < SCRIPT > y < /SCRIPT > se ejecutan
inmediátamente luego de cargar la página, en cambio las funciones no se ejecutan hasta
que sean llamadas.
Es importante entender la diferencia entre definir y llamar una función: Definirla sólo
especifica un nombre para ella y qué hace cuando es llamada; Llamarla implica
ejecutarla utilizando los parámetros que le son pasados por la sentencia JavaScript que
la llama. Ejemplo 2: Una Script con Función (Escondida)

<script language="JavaScript">

function cuadrado(i)
{ document.write("Se pasó el valor: ",i,"<br>");
return i * i;
}

document.write("La función retornó: "

+ cuadrado(5));

</script>

Que se despliega como:

Se pasó el valor: 5
The función retornó: 25

El Elemento < HEAD >

Generalmente se deben definir las funciones para una página en el encabezado del
documento, esto es, dentro del elemento < HEAD >. Debido a que el encabezado es
cargado primero, esta práctica asegura que las funciones sean cargadas antes que el
usuario tenga oportunidad de hacer lago que provoque una llamada a función.
Ejemplo 3: Una Script con Dos Funciones
 <HTML><HEAD>
<SCRIPT><!--

function barra()
{
document.write("<HR ALIGN='left' WIDTH=25%>")
}

function texto(titulo,nivel,text)
{
document.write("<H" + nivel + ">" + titulo
+ "</H" + nivel + ">");
document.write(text);
}

// --></SCRIPT>
</HEAD><BODY>
<SCRIPT><!--

texto("Hazme Grande",3,"Hazme común");

barra();
texto("Hazme Grande",4,"Hazme común");

// -->
</SCRIPT>
</BODY></HTML>

Que se despliega como:

Hazme Grande
Hazme común

Hazme Grande
Hazme común

Uso de las Comillas

Se deben usar comillas simples (') para delimitar literales, de manera que el browser
pueda distinguir entre las comillas dobles que envuelven los valores de los atributos de
elementos HTML y los literales en JavaScript dentro de estos valores.
Ejemplo 4: JavaScript en Atributos de Elementos HTML

<FORM>
<INPUT TYPE="button" VALUE="Aprétame";
onClick="alert('Un mensaje cualquiera')">
</FORM>
 Se despliega como

Scripts y Manejo de Eventos

Las aplicaciones JavaScript son manejadas por eventos. Los eventos son acciones que
ocurren usualmente como resultado de algo que hace el usuario. Por ejemplo, cuando el
usuario hace click sobre un objeto se genera un evento.
Existe un conjunto específico de eventos que es capaz de manejar JavaScript, lso cuales
son proveidos por el browser. Se pueden definir manejadores de eventos, que son
scripts que se llaman automáticamente cuando ocurre un evento en particular.
Los manejadores de eventos están embedidos como atributos en los documentos
HTML, a los cuales se les asigna el código de script a ejecutar. la sintaxis general es:

<ELEMENTO manejadorDeEvento="Código_JavaScript">

donde ELEMENTO es un elemento HTML y manejadorDeEvento es el nombre de un

evento.
Por ejemplo, supongamos que creamos una función en JavaScript llamada computar().
Podemos hacer que hel browser ejecute esta función cuando el usuario presione un
botón. Esto se hace asignando la función al evento onClick del botón:

<INPUT TYPE="button" VALUE="Calcular"

onClick="computar()">

Es posible utilizar cualquier sentencia JavaScript dentro de las comillas asignadas a

onClick, las cuales serán ejecutadas cuando el usuario haga click en el botón. Si se
desea incluir más de una sentencia, se deben separar con punto y coma (";").
En general, es buena idea definir funciones para manejar eventos, ya que:

 Hace más modular el código, pudiendo usarse la misma función para manejar
varios posibles eventos; y

 Hace más legible el código.

Eventos y Elementos HTML

Los eventos posibles y lso elementos en los que se pueden usar son:

 onFocus, onBlur, onChange: campos de texto, áreas de texto y selecciones;

  onClick: botones (normales, radio, check, submit, reset) y referencias
(elemento < A >);

 onSelect: campos de texto y áreas de texto;

 onMouseOver, onMouseOut: referencias (elemento < A >).

Muchos objetos poseen además métodos para simular eventos, Por ejemplo, los botones
poseen un método click() que imita el evento de hacer click sobre el botón. Note: La
emulación de eventos no ejecuta a los manejadores de eventos. Aún así, siempre es
posible llamar directamente un manejador de evento de manera explícita.
Evento Ocurre cuando... Manejador
load Se carga la página en el browser. onLoad
unload Se descarga la Página del browser. onUnload
click El usuario hace click sobre un elemento. onClick
mouseover El usuario mueve el mouse por sobre una referencia. onMouseOver
mouseout El usuario mueve el mouse fuera de una referencia. onMouseOut
focus El usuario enta a un campo de un formulario. onFocus
blur El usuario sale de un campo de un formulario. onBlur
change El usuario cambia el valos de un campo de texto, área de texto o selección. onChange
select El usuario selecciona un elementp de un campo de selección onSelect
submit El usuario envía un formulario. onSubmit

Ejemplo 1: Una Script como Manejador de Evento

<HTML><HEAD>

<SCRIPT LANGUAGE="JavaScript">

function computar(f)
{
if( confirm("Seguro?") )
f.result.value = eval(f.expr.value)
else
alert("Vuelve otra vez.")
}

</SCRIPT>

</HEAD><BODY>
<FORM>
Ingrese una expresión:
<INPUT TYPE="text" NAME="expr" SIZE=15>
<INPUT TYPE="button" VALUE="Calcular"
ONCLICK="computar(this.form)">
<BR>
Resultado:
<INPUT TYPE="text" NAME="result" SIZE=15 >
</FORM>
</BODY></HTML>
 Que se despliega como:

Ingrese una expresión:

Resultado:

Ideas y Técnicas
Esta sección describe varias técnica útiles para programar en JavaScript.

Actualizando Páginas
JavaScript genera los resultados visiales desde arriba hacia abajo en una página, de
manera que luego de desplegar algo, no se puede modificar más. La única manera de
hacerlo es volver a cargar la página completa. Sin embargo, si se puede modificar otro
frame desde un documento.
Otra manera de modificar un documento sin cargarlo es el cambiar una imágen
desplegada por otra diferente, produciéndose un cambio inmediato en el despliegue.

Imprimiendo
No se puede imprimir la salida generada por una sentencia JavaScript. Por ejemplo, si
se tiene lo siguiente en una página, no se imprime nada:

<SCRIPT>
document.write("Texto generado con JavaScript")
</SCRIPT>

Usando las Comillas

Asegúrese de alternar comillas simples con comillas dobles, ya que como los
manejadores de eventos en HTML deben encerrarse en comillas dobles, se deben
delimitar los argumentos literales con comillas simples. Por ejemplo:

<FORM NAME="ff">
<INPUT TYPE="button" NAME="Boton1" VALUE="Abrete!"
onClick="window.open('stmtsov.html','ventana',
'toolbar=no,directories=no')">
</FORM>

Si se tienen problemas con las comillas se pede usar \' ó \".

Definiendo Funciones
Siempre es buena idea definir todas las funciones en el encabezado (< HEAD >) del
documento HTML. De esta manera se previene que el usuario genera algún evento que
provoque una llamada a una función que aún no ha sido definida, lo cual produciría un
error.

Creando Arreglos
Un arreglo es una lista ordenada de valores que se pueden referenciar a través del
nombre del arreglo y un índice de posición. Por ejemplo, si se tiene un arreglo de
empleados que contiene sus nombres, entonces emp[1] sería el nombre del primer
empleado, emp[2] el del segundo, etc.

JavaScript no posee arreglos, pero debido al parecido entre arreglos y objetos, es fácil
crear arreglos en JavaScript. Para crear un arreglo se deben utilizar la funciones:
Inicialización con Valores Iniciales:

function initArrayValues()
{ this.length = initArrayValues.arguments.length;
for( var i=0; i<this.length; i++ )
this[i+1] = initArrayValues.arguments[i];
}

Inicialización con Número de Elementos:

function initArrayCount(count,initValue)
{ this.length = count;
for( var i=0; i<this.length; i++ )
this[i+1] = initValue;
}

Estas funciones definen un arrego de manera que el primer elemento, indexado por un
cero, contiene el largo del arreglo. Los demás elementos contienen los valores pasados
a la primera función o el valor inicial pasado a la segunda.
Se puede crear un arreglo arbitrario de la siguiente manera:

arrA = new initArrayValues( "Uno", 2, "Tres", 4.44 );

arrB = new initArrayCount ( 10, "Hola" );

Para usar los elementos de un arreglo se pueden referenciar sus elementos de manera
directa usando la notación:

nb_arreglo[ índice ]

Note que los elementos de un areglo pueden ser cualquier objeto, incluso diferentes
entre sí.
Usando los Objetos del Browser
Cuando se carga una página en el browser, se crea un número de objetos dependiendo
del contenido de la página. Toda página posee los siguientes objetos:

 window: es el objeto padre de todas los que contiene la página. Contiene las
propiedades de la ventana. También se crea un objeto de este tipo por cada
frame creado;

 location: contiene las propiedades de la URL actual;

 history: contiene las propiedades que representan a las URL que el usuario ha
visitado anteriormente.

 document: contiene las propiedades del documento actualmente desplegado,

como su título, color de fondo, formularios, imágenes, etc.
Las propiedades del documento dependen directamente del contenido de él, esto es, son
creadas y eliminadas al cargar y al salir de cada documento. Por ejemplo, el objeto
document posee propiedades para cada imágen, cada formulario y cada referencia a
otro documento que aparece en el actual.
Por ejemplo, supongamos que un documento llamado simple.html contiene la
siguiente especificación HTML:

<HTML><HEAD>
<TITLE>Un Documento Simple</TITLE>

</HEAD><BODY>
<FORM NAME=ff" ACTION="Proc()" METHOD="get" >
Ingrese un Valor:
<INPUT TYPE=text NAME="text1"
VALUE="blabla" SIZE=20 >

Elija si lo desea:
<INPUT TYPE="checkbox" NAME="Check1"
CHECKED onClick="update(this.form)">
Opción #1

<INPUT TYPE="button" NAME="Button1"

VALUE="Aprétame"
onClick="update(this.form)">

</FORM>
</BODY></HTML>

Como siempre, existirán los objetos window, location, history, y document, los
que tendrán propiedades como:
  location.href = "http://www.terrapin.com/samples/simple.html"

 document.title = "Un Documento Simple"

 document.fgColor = #000000

 document.bgColor = #ffffff

 history.length = 7
Estos son sólo algunos ejemplo, ya que en la práctica los valores dependen de muchas
variables.
Además, se crean objetos basados en el contenido del documento, como serín por
ejemplo:

 document.ff

 document.ff.Check1

 document.ff.Button1
Los cuales tendrín propiedades como:

 document.ff.action = http://terrapin/mocha/formproc()

 document.ff.method = get

 document.ff.length = 5

 document.ff.Button1.value = Press Me

 document.ff.Button1.name = Button1

 document.ff.text1.value = blahblah

 document.ff.text1.name = text1

 document.ff.Check1.defaultChecked = true

 document.ff.Check1.value = on

 document.ff.Check1.name = Check1
Note que cada propiedad referenciada comienza con el elemento comienza con el objeto
document, seguido por el nombre del forumario, ff, y luego el nombre de la propiedad.
Esta secuencia muestra la jerarquía de objetos que genera el browser, que se discute en
el siguiente capítulo.
Jerarquía de Objetos del Browser
Los objetos en el browser existen en una jerarquía, la cual refleja la estructura
jerárquica de los documentos HTML. A pesar que no se pueden derivar objetos desde
estos objetos en JavaScript, es útil entender la jerarquía de objetos. En terminología
orientada al objeto, esta jerarquía es puramente de instancias, no de clases, ya que
consiste de objetos en particular.
En esta jerarquía, los objetos hijos son propiedades de sus padres. Por ejemplo, un
formulario con nombre "formulario1" es un objeto, y es hijo de un documento (que
también es objeto), de manera que para referenciar el formulario se debe escribir
"document.formulario1".

La jerarquía de objetos del browser se muestra a continuación:

document forms elements (todos los tipos)
window

Para referenciar una propiedad específica de un objeto se debe incluir el objeto y todos
sus ancestros. Excepción: cuando no se usan frames no se necesita incluir el objeto
window.

Diseño de JavaScript con HTML

Para usar JavaScript de manera adecuada, es importante entender de manera general
cómo se hace es despliege del documento HTML, esto es, cómo se transforma un
documento HTML (que es sólo texto) a un documento gráfico.
El despliege es generalmente secuencial, esto es, el browser comienza el despliegue
leyendo el documento HTML desde el principio, calculando cómo desplegar el texto,
imágenes y otros a medida que avanza hacia el final. Así, comienza con el encabezado
del documento (elemento < HEAD >) para luego desplegar el cuerpo (elemento <
BODY >).
Debido a este comportamiento, JavaScript sólo refleja los objetos del documento que ya
han sido desplegados. Por ejemplo, si se define un formulario con un par de elementos
de texto:

<FORM NAME="ff">
<input type="text" name="nombre" size=20>
<input type="text" name="edad" size=3>
</FORM>

Entonces se puede referenciar los elementos del formulario a través de los objetos
document.ff.nombre y document.ff.edad, pero estas referencias sólo se pueden
haces después que el formulario esté definido. Así, no se pueden usar estos objetos
antes que se defina el formulario. Por ejemplo, la script:
 <SCRIPT>
document.write(document.ff.nombre.value);
document.write(document.ff.edad.value);
</SCRIPT>

puede aparecer despu&eeacute;s de la definición del formulario, pero nunca antes.

De la misma manera, después de completado el despliegue, establecer el valor de una
propiedad no afecta su apariencia en pantalla. Por ejemplo, si se define el título del
documento como:

<TITLE>Mi Página JavaScript</TITLE>

no se puede modificar su valor usando:

document.title="Un Nuevo Título";

no cambiará el título desplegado ni generará ningún error.

Objetos Clave del Browser

Algunos de los objetos más útiles son document, form y window.

Usando el Objeto document

Es el objeto más útil, ya que a través de sus métodos write() y writeln() se puede
generar HTML para despliegue. Esta es la manera en que se despliegan expresiones
JavaScript al usuario. La única diferencia entre ambos métodos es que writeln agrega
un retorno de carro al final de la línea desplegada. Sin embargo, como HTML ignora los
retornos de carro, esto no afectará al texto desplegado, a no ser que sea un texto
preformateado, como es el caso del elemento < PRE >.
El objeto document también posee los manejadores de eventos onLoad y onUnLoad, los
cuales ejecutan JavaScript cuando se carga o sale del documento.
Sólo existe un objeto document para cada documento, y es el padre de todos los demás
objetos de un documento.

Usando el Objeto form

El browser crea un objeto de este tipo para cada formulario del documento, a los cuales
se les da nombre a través del atributo NAME del elemento < FORM >, como en el
siguiente ejemplo:
 ...

Este formulario define un elemento llamado ff, el cual posee una propiedad
dorrespondiente al campo de texto creado, cuyo valor se referencia usando:

document.ff.cantidad.value

Los formularios de un documento se almacenan en un arreglo llamado forms, donde

forms[0] es el primer formulario desde arriba hacia abajo. Así, la referencia de arriba
puede escribirse también como:

document.forms[0].quantity.value

De la misma manera, los elementos de un formulario son almacenados en un arreglo

llamado elements, que es una propiedad de cada objeto de formulario.

Usando el Objeto window

Este objeto es el padre de todos los demás objetos del browser, y se puede omitir
cuando se hace referencia a sus propiedades y métodos.
El objeto window posee varios métodos útiles que crean nuevas ventanas y cuadros de
diálogo:

 open() y close(): abre y cierra una ventana;

 alert(): muestra una ventana de alerta;

 confirm(): muestra una ventana de confirmación.

El objeto window tiene propiedades para cada frame y set de frames (definidos con los
elementos < FRAME > y < FRAMESET > respectivamente). Los frames se almacenan
en un arreglo llamado frames, el cual contiene una entrada por cada frame hijo de una
ventana.
La propiedad status del objeto window permite establecer el mensaje desplegado en la
barra de estado de una ventana.
Abriendo y Cerrando Ventanas
Cada vez que se abre un browser, se crea automáticamente una ventana. El usuario
puede abrir y cerrar ventanas a gusto con la mayoría de los browsers. Con JavaScript, se
pueden abrir y cerrar desde una script.

Abriendo una Ventana

Se pueden crear ventanas usando el método open() del objeto window. El siguiente
ejemplo crea una ventana llamada ventana_msg que despliega el contenido del
documento ejemplo.html

ventana_msg=window.open("ejemplo.html","ejemplo");

Las ventanas pueden tener dos nombres: el primero sirve para referenciar sus
propiedades, métodos y contenido, y el segundo (optativo) permite referenciarla como
destino de un formulario o referencia de hipertexto.
Cuando se abre una ventana se pueden especificar atributos como su alto, ancho, si
tiene o no un menú, barra de herramientas, etc. El siguente ejemplo crea una ventana sin
barra de herramientas y con barras de desplazamiento:

ventana_msg=window.open("ejemplo.html","ejemplo",
"toolbar=no,scrollbars=yes")

Para más detalles acerca de los atributos vea la referencia acerca del método open().

Cerrando una Ventana

Se puede cerrar una ventana usando el método close(). No se puede cerrar un
frame sin cerrar la ventana completa que lo contiene. Ejemplos:

window.close();
self.close();
close(); // no usar en un manejador de evento!!
venatana_msg.close()

Usando Frames
Un frame es un tipo especial de ventana que puede desplegar múltiples documentos a la
vez en una misma ventana. Una serie de frames componen una ventana. El siguiente
diagrama muestra una ventana con tres frames:

<align="center"contenido
lista

Creando Frames
Los frames sólo se pueden crear usando el elemento < FRAMESET > de HTML, el cual
define los tamaños y propiedades de cada frame de una página. Por ejemplo, para crear
los frames del diagrama se debe usar:

<FRAMESET ROWS="70%,30%">
<FRAMESET COLS="30%,70%">
<FRAME SRC=lista.html NAME="lista">
<FRAME SRC=contenido.html NAME="contenido">
</FRAMESET>
<FRAME SRC=barra.html NAME="barra">
</FRAMESET>

El siguiente diagrama muestra la jerarquía de los frames del ejemplo. Los tres frames
tienen el mismo padre, a pesar que los dos primeros se crearon dentro de un <
FRAMESET > separado. Esto es debido a que el padre de un frame es la ventana y no
un < FRAMESET >

lista
top contenido
barra

Se puede referenciar un frame usando el arreglo frames como sigue:

lista es top.frames[0] contenido es top.frames[1] navigateFrame es

top.frames[2]

Cambiando Frames
Se puede cambiar el contenido de los frames usando la propirdad location para
establecer una nueva URL a desplegar en él, para lo que se debe especificar siempre la
jerarquía completa de frames.

Referenciando y Navegando por Frames

Debido a que un frame es un objeto de tipo window, se pueden usar todas las
propiedades y métodos que se aplican a ventanas con frames. (Vea los capítulos 4.3 y
4.4).
Referenciando Ventanas y Frames
El nombre usado para referenciar una ventana depende de si se desean referenciar sus
propiedades, métodos y contenido o si se desea referenciar como destino para un
formulario o referencia de hipertexto.
Ya que el objeto window es el objeto de más arriba en la jerarquía en JavaScript, es
esencial para especificar el contenido de cualquier ventana.

Referenciando las Propiedades, Métodos o Contenido

Se pueden referenciar las propiedades, métodos y manejadores de eventos de la ventana
actual o de culquier utra (si es que posee nombre) de cualquiera de las siguientes
maneras:
self ó window.:

Son sinónimos para la ventana actual, y se pueden o no usar para referenciarla.

top

La ventana de más arriba en la jerarquía;

parent:

El padre de un frame o ventana;

El nombre de una variable de ventana:
La variable de ventana es la que contiene el valor devuelto por el método open().

Omitir el nombre de la ventana:

Debido al concepto de ventana actual, si no se especifica una ventana se asume que se
trata de la actual.

Referenciando una Ventana como Destino

Use el nombre de la ventana, y no la variable de ella, para referenciarla como destino de
un formulario o referencia de hipertexto. Esto se hace a través del atributo TARGET de
los elementos < A > y < FORM >.
El siguiente ejemplo crea una referencia de hipertexto que carga la referencia en otra
ventana (la cual se crea al apretar el botón):

<FORM>
<INPUT TYPE="button" VALUE="Abrir Ventana"
onClick="msgWindow=window.open('','ventana2',
'resizable=no,width=200,height=200')">
<br>
<A HREF="http://www.ing.udec.cl" TARGET="ventana2">
Cargar documento en <code>ventana2</code>
 </A>
<INPUT TYPE="button" VALUE="Cerrar Ventana"

onClick="msgWindow.close()">
</FORM>

Que se despliega como:

Cargar documento en ventana2

Navegando en las Ventanas

Se pueden abrir muchas ventanas al mismo tiempo, y el usuario puede moverse de una a
otra activándolas haciendo click en ellas. Se puede activar una ventana desde JavaScript
activando algún objeto de una ventana o especificándola como destino de una referencia
o formulario. Cambiar valores en otra ventana no la activa.
Cuando una ventana está activa, se trae al frente y cambia de alguna manera la forma en
que se despliega para diferenciarla del resto.

Valores
JavaScript reconoce los siguientes tipos de valores:
 Números, como 42 o 3.14159;
 Lógicos (booleanos), como true o false>;
 Strings, como "Hola";
 null, un valor especial que denota el valor nulo.
Este conjunto relativamente pequeño de tipos de main permite crear funciones y
aplicaciones muy útiles. note que no hay diferencia explícita entre números enteros o
reales. No hay un tipo de main para fechas, pero existen métodos que manejan fechas
de buena manera.
Objetos y funciones son otros elementos fundamentales del lenguaje. Los objetos son
contenedores con nombre para manter valores en ellos, y las funciones son procesos que
la aplicación puede utilizar.

Conversiones entre los Tipos de main

JavaScript no revisa la concordancia de tipos de main de manera estricta, lo que
significa que no se debe especificar el tipo de dato de una variable cuando se declara.
Los valores son convertidos de un tipo de main a otro automáticamente cuando es
necesario. Por ejemplo:
 var valor = 42;
valor = "Gracias por Usar..."

es una secuencia válida de sentencias.

En general, en expresiones que envuelven tipos numéricos y strings, JavaScript
convierte los números automáticamente a strings. Por ejemplo, las expresiónes:

"La respuesta es " + 42

42 + " es la respuesta."

son equivalentes a:

"La respuesta es 42"

"42 es la respuesta."

JavaScript provee tres funciones especiales para conversiones especiales:

 eval(s): Trata de evaluar un string s como si fuera una expresión matemática;

 parseInt(s,b): Convierte un string a un entero, utilizando la base b para

analizarlo;

 parseFloat(s): Convierte un string a punto flotante.

Variables
Las variables se usan para contener valores. las variables se definen con un nombre,
pero no es necesario especificar un tipo de dato asociado. Los nombres deben satisfacer:

 Primer caracter debe ser una letra;

 Dem7aacute;s caracteres pueden ser letras, números;

 JavaScript diferencia entre mayúsculas y minúsculas.

Visibilidad de Variables
La visibilidad de una variable es dónde puede ser usada. En JavaScript sólo hay dos
niveles de visibilidad:

 Visibilidad Global: se puede usar la variable en cualquier parde del documento;

 Visibilidad Local: se puede usar la variable sólo dentro de la función en que se

define.
 Para declarar variables locales o globales use la palabra clave var, aunque si es global
no es necesario declarla. Por ejemplo:

var total = 0;
function foo()
{ var i=4;
}

Literales
Los literales son la forma en que se representan valores en JavaScript. Son valores fijos
que se escriben directamente en el código JavaScript. Ejemplos de literales son:

 42

 3.14159

 "Ser o no Ser."

Enteros
Los enteros pueden ser expresados en base decimal, hexadenimal u octal. Ejemplos son:

45, 34322, -4343 (decimal)

04343, 03234, -0543 (octal)
0x32fd4 0xdd (hexadecimal)

Números de Punto Flotante (Reales)

Los literales de reales pueden tener las siguientes partes: un entero decimal, un punto,
una fracción, un exponente (con E) y un sufijo de tipo. Ejemplos son:

34.0
23.232
+32.4
-232.0
432.3e32
43.433e+2
-34.34e-2

Literales Booleanos
Los literaler booleanos se representan como true o false.
 Literales de Strings
Los literales de strings se representan encerrando el strin en comillas simples o dobles.
Ejemplos:

"Hola"
'Como estás?'

Caracteres Especiales
Se pueden utilizar los siguientes caracteres especiales dentro de un literal de string en
JavaScript:

 \b: backspace;

 \f: salto de página;

 \n: salto de línea;

 \r: retorno de carro;

 \t: tabulador.
Escape de Caracteres
Es posibler usar comillas dentro de un literal de string, lo que se hace como sigue, por
ejemplo:

"Leyó \"Danza con Lobos\""

Expresiones
Una expresión es cualquier conjunto válido de literales, operadores y expresiones que
se evalú dando un solo valor, que pudiera ser un número, string o booleano.
Conceptualmente existen dos tipos de expresiones: las que asignan valores a variables y
las que simplemente tienen un valor. Por ejemplo:

x = 7
3 + 4 * 5

La primera asigna 7 a la variable x (y se evalú a 7) y la segunda simplemente vale 7.

JavaScript posee los siguienter tipos de expresiones:

 Aritméticas: tienen valos numérico;

  String: tienen valor de string;

 Lógicas: tienen valor booleano.

La palabra reservada null representa un valor nulo para cualquier tipo. En contraste,
una variable que no ha sido inicializada tiene un valor undefined, que se usa para
producir errores al correr las aplicaciones.

Expresiones Condicionales
JavaScript soporta expresiones condicionales como las de C++ y Java. La sintaxis es:

(condición) ? valor1 : valor2

Si la condición es verdadera, la expresión tiene el valor valor1, y si no tiene el valor

valor2. Se puede usar este operador en cualquier parte de una expresión.

Operadores
JavaScript Soporta los siguientes operadores:
Tipo Operador Uso Significado
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
Asignación <<= x <= y x = x << y
>>= x <= y x = x >> y
>>>= x >>>= y x = x >>> y
&= x &= y x = x & y
^= x ^= y x = x ^ y
|= x |= y x = x | y
+ x + y Suma
- x - y Resta
* x * y Multiplicación
/ x / y División
Aritméticos
%= x % y Módulo
++ ++x , x++ Preincremento, Posincremento
-- --x , x-- Predecremento, Posdecremento
- -x negación
Manipulación de Bits & x & y AND de Bits
| x | y OR de Bits
^ x ^ y XOR de Bits
>> x >> y Shift a la Derecha
<< x << y Shift a la Izquierda
 >>> x >>> y Shift a la Derecha sin Signo
&& x && y AND Lógico
Lógicos || x || y OR Lógico
! !x NOT Lógico
== x == y Equivalencia
!= x != y Distinto de
< x < y Menor que
Comparación
<= x <= y Menor o Igual que
> x > y Mayor que
>= x >= y Mayor o Igual que

Tipo Operador Uso Significado

+ s1 + s2 Concatenación
Strings
+= s2 += s1 s1 = s1 + s2

Precedencia de Operadores
La precedencia de operadores determina el orden en que son evaluados. Se puede
determinar un orden forzado mediante el uso de paréntesis. Cuando se tienen dos
operadores de igual precedencia, se evalúa primero el de más a la izquierda.
El orden de precedencia, desde el que se eval&uacu;tea primero hasta el último en
evaluarse, es el siguiente:
Tipo Operador
()
Llamada a Función / Miembro
[]
!
~
Negación / Incremento -
++
--
*
Multiplicación y División /
%
+
Adición y Substracción
-
<
<=
Comparación Relacional
>
>=
<<
Shift de Bits >>
>>>
==
Comparación Igualdad
!=
|
 ^
de Bits
&
||
Lógicos
&&
Condicional ? :
=
+=
-=
*=
/=
%=
Asignación
<<=
>>=
>>>=
&=
^=
|=
Coma ,

Modelo de Objetos
JavaScript está basado en un paradigma simple de objetos, los cuales poseen
propiedades y métodos:
Programación con Objetos Programación Tradicional
Objetos --
Propiedades Variables
Métodos Funciones

Además de los objetos que predefinidos del browser, se pueden definir nuvos objetos de
los tipos proveidos por JavaScript (números, strings, imágenes y arreglos).

Objetos y Propiedades
Un objeto en JavaScript tiene propiedades asociadas a él. Se puede acceder a las
propiedades de un objeto con una notación muy simple:

nb_objeto.nb_propiedad

Se puede asignar un valor a una propiedad simplemente asignándole un valor. Por

ejemplo, supongamos que se riene un objeto llamado miAuto, el cual posee propiedades
marca, modelo y año:

miAuto.marca = "Suzuki";
miAuto.modelo = "Vitara";
 miAuto.ano = 89;

También se pueden referenciar las propiedades usando notación de arreglos:

miAuto["marca"] = "Suzuki";
miAuto["modelo"] = "Vitara";
miAuto["ano"] = 89;

Este tipo de arreglos se dice arreglo asociativo, ya que cada elemento de arreglo está
también asociado a un nombre. Para mostrar cómo trabaja, la siguiente función
despliega las propiedades de un objeto cuando se le pasa un objeto y su nombre como
parámetros.

function ver_props(obj, nb_obj)

{
var result = "";
for (var i in obj)
result += nb_obj + "." + i +
" = " + obj[i] + "\n"
return result;
}

que, para el ejemplo anterior, devuelve:

miAuto.marca = Suzuki;
miAuto.modelo = Vitara;
miAuto.ano = 89;

También se pueden referenciar las propiedades a través de un número ordinal

comenzando desde el cero. Para el ejemplo sría:

myCar[0] = Suzuki;
myCar[1] = Vitara;
myCar[2] = 89;

Usando el Objeto this

JavaScript posee la palabra reservada this, el cual se usa para referenciar el objeto
actual. Por ejemplo, supongamos que se tiene una función llamada validar(), la cual
valida el valor de una propiedad de un objeto. Sus parámetros son el objeto, valores
máximo y mínimo.

function validate(obj, menor, mayor)

{
if ((obj.value < menor) || (obj.value > mayor))
alert("Valor Inválido!")
}
 Esta función se puede llamar desde un manejador de evento onChange, usando this
para pasar el elemento del formulario, como en el siguiente ejemplo:

<INPUT TYPE="text" NAME="edad" SIZE=3

onChange="validar(this,18,99)">

Funciones y Métodos
La sfunciones son os bloques de construción fundamentales de JavaScript. Una función
es un conjunto de sentencias JavaScript que realizan alguna función específica.
La definición de una función consiste de:

 La palabra clave function;

 El nombre de la función;

 Una lista de argumentos de la función, encerrada en paréntesis y separados por

comas (",");

 Las sentencias en JavaScript que definen la función, encerradas en llaves

("{ }");

en una aplicación se pueden definir y usar funciones sólo de la página actual. Es

sentencias en una función pueden incluir llamadas a otras funciones definidas en la
página actual.
Es una buena idea definir funciones sólo en el encabezado del documento (elemento <
HEAD >), de manera que cuando se carge la página, las funciones se definan antes de
desplegar nada.
Definir una función no hace nada, y sólo al llamarla se ejevutan sus sentencias.
Ejemplo:

<script language="JavaScript"><!--
function hola()
{
document.write("Hola.");
}
// --></script>
</head><body>
<script language="JavaScript"><!--
hola();
// --></script>
</body></html>

Que se despliega como:

 Hola.

Referenciando los Argumentos de la Función

Los argumentos que se pueden pasar a una función no se limitan a strings y números,
sino que se pueden pasar objetos de cualquier tipo, incluso funciones!! La función
ver_props() de la sección anterior es un ejemplo de función que recibe objetos como
parámetros.
Los argumentos de las funciones se pasan como areglos, y desde dentro de una función
se puede referenciar este arreglo mediante:

nb_función.arguments[i]

donde nb_funció es el nombre de la función e i es el número del argumento que se

referencia (el primer argumento es el 0). El número de argumentos se referencia
mediante la propiedad length del arreglo.

Funciones Recursivas
Una función puede ser recursiva, esto es, se puede lalmar a sí misma. Por ejemplo:

function factorial(n)
{
if( (n==0) || (n==1) )
return 1;
else
return (n*factorial(n-1));
}

Funciones con Número Variable de Argumentos

Se puede llamar a una función con más argumentos que los que se declaran en su
definición. Esto es útil cuando no se sabe cuantos argumentos debe recibir la función.
Así, se puede usar arguments.length para determinar cuántos argumentos se pasaron
para luego tratarlos por separado. Por ejemplo, consideremos que se desea una función
para crear listas de diferentes tipos, a las cuales se les pasa el tipo de lista y los
elementos de ella:

<script><!--
function lista(tipo)
{
document.write("<"+tipo+"L>");
for( var i=1; i<lista.arguments.length; i++ )
document.write("<LI>"+lista.arguments[i]);
 document.write("</" + tipo + "L>");
}
lista("O","Enero","Febrero","Marzo","Abril",
"Mayo","Julio");
lista("U","Enero","Febrero","Marzo","Abril");
// --></script>

Que se despliega como:

1. Enero
2. Febrero
3. Marzo
4. Abril
5. Mayo
6. Julio

 Enero

 Febrero

 Marzo

 Abril

Definiendo Métodos
un método es una función asociada a un objeto. Se puede definir un método de la
misma manera que se define una función normal. Después de definirla, use la siguiente
sintaxis para asociarla a un objeto:

objeto.método=nb_función

donde objeto es un objeto existente, método es el nombre del método que se está
definiendo y nb_función es una función ya defninida.

Luego se puede llamar al método a través del objeto usando la notación normal.

Creando Nuevos Objetos

JavaScript posee objetos predefinidos que describen el entorno de programación, y se
pueden crear nuevos objetos, lo que requiere dos pasos:
  Definir un tipo de objeto (a través de una función);

 Crear instancias del objeto (usando new).

Para definir un tipo de objeto, cree una función que especifique su nombre, propiedades
y métodos.
Por ejemplo, supongamos que se desea crear un objeto para representar autos llamado
auto, con propiedades marca, modelo y ano. Para ello creamos la función:

function auto(marca, modelo, ano)

this.marca = marca;

this.modelo = modelo;

this.ano = ano;

Ahora se puede crear un objeto de tipo auto como sigue:

miAuto = new auto("Ford","Aerostar",1993)

que crea un nuevo objeto miAuto y asigna los valores especificados a sus propiedades.
Se puede crear cualquier número de objetos de tipo auto.

Un objeto puede tener una propiedad que a su vez es un objeto. Por ejemplo,
supongamos que se define un objeto persona como sigue:

function persona(nombre, edad, sexo, auto)

this.nombre = nombre;

this.edad = edad;

this.sexo = sexo;

this.auto = auto;

}
Se puede entonces crear una persona dueña de un auto como sigue:

Juan = new persona("Juan",26,"M",miAuto);

Note que se puede pasar un objeto cualquiera como parámetro.

Ahora es posible referenciar las propiedades del auto de una persona a través de la
persona, lo que se hace como sigue:

Juan.auto.marca

Juan.auto.modelo

Juan.auto.ano

Otra característica &Uuacute;til es que se puede añadir una propiedad a un objeto ya

existente. Por ejemplo, la sntencia:

Juan.auto.color = "Negro";

añade la propiedad de color al auto de la persona Juan y le asigna el valor Negro. Sin
embargo, esto sólo afecta a un objeto en especial, y no a todos los del mismo tipo.
Para añadir una propiedad a todos los objetos de un tipo se debe modificar la función
que lo define.

Definiendo Métodos
Se pueden definir métodos para un tipo de objeto incluyendo una definición de método
en la definición del tipo. Por ejemplo, supongamos que se desea asociar un método que
devuelva un string con las propiedades de cada persona. Esto se haría modificando la
definición del tipo persona cono sigue:

function muestraPersona()

document.write("Nombre: " + this.nombre

+", Edad: " + this.edad

+", Sexo:" + this.sexo);

}
 function persona(nombre, edad, sexo, auto)

this.nombre = nombre;

this.edad = edad;

this.sexo = sexo;

this.auto = auto;

this.mostrar = mostrarPersona;

Usando el Objeto String

Siempre que se asigne un string a una variable o propiedad, se crea un objeto de tipo
String. Los literales de strings tambi&eeacute;n son objetos de tipo String. Por ejemplo,
la sentencia:

str = "Hola mundo!";

crea un objeto de tipo String llamado str con valor"Hola mundo!"

Los objetos de tipo String poseen métodos que devuelven:

 Una variación del String mismo, como substring() o toUpperCase().

 Una versión en formato HTML del string, como bold() o link().

Por ejemplo, dado el string de m&aaute;s arriba, str.toUpperCase() devuelve "HOLA

MUNDO!", asimismo que "Hola mundo".toUpperCase().

Usando el Objeto Math

El objeto incorporado Math posee propiedades y métodos que representan constantes y
funciones matemáticas. Pòr ejemplo, posee la propiedad PI y el m&ecaute;todo sin(),
los cuales representan el valor de la constante PI y la función seno, respectivamente.
Para utilizarlos se debe escribir:
 Math.PI

Math.sin(1.56)

Cabe notar que los métodos triginométricos utilizan argumentos en radianes, no en

grados.
Generalmente es útil utilizar la sentencia with cuando se desean realizar varios cálculos
matemáticos seguidos, de manera de no tener que incluir Math en cada referencia:

with (Math)

a = PI * r*r;

y = r*sin(theta)

x = r*cos(theta)