Sei sulla pagina 1di 133

INTRODUCCIN

JavaScript, al igual que Java o VRML, es una de las mltiples maneras que han surgido para extender las capacidades del lenguaje HTML. Al ser
la ms sencilla, es por el momento la ms extendida. Antes que nada conviene aclarar un par de cosas:
1. JavaScript no es un lenguaje de programacin propiamente dicho. Es un lenguaje script u orientado a documento, como pueden ser los
lenguajes de macros que tienen muchos procesadores de texto. Nunca podrs hacer un programa con JavaScript, tan slo podrs mejorar
tu pgina Web con algunas cosas sencillas (revisin de formularios, efectos en la barra de estado, etc...) y, ahora, no tan sencillas
(animaciones usando HTML dinmico, por ejemplo).
2. JavaScript y Java son dos cosas distintas. Principalmente porque Java s que es un lenguaje de programacin completo. Lo nico que
comparten es la misma sintaxis.
Este documento tiene como objetivo mostrar una parte de las potencialidades del JavaScript. No pretendo hacer aqu una gua completa, sino
slo una pequea introduccin. Para tener una gua de referencia es mejor acudir a la que ofrece Netscape que, al fin y al cabo, son los creadores
del invento.

El Microsoft Explorer soporta el JavaScript. No muy bien pero lo soporta. La versin 3.0 interpreta el JScript, que es similar al JavaScript 1.0

pero con algunas diferencias para provocar ciertas incompatibilidades (majetes que son los de Microsoft). El Explorer 4 parece que s que admite
JavaScript 1.1 con cierta fiabilidad.

Primer programa.

Vamos a realizar nuestro primer "programa" en JavaScript. Haremos surgir una ventana que nos muestre el ya famoso mensaje "hola, mundo".
As podremos ver los elementos principales del lenguaje. El siguiente cdigo es una pgina Web completa con un botn que, al pulsarlo, muestra
el mensaje.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function HolaMundo() {
alert("Hola, mundo!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"
onClick="HolaMundo()">
</FORM>
</BODY>
</HTML>

Y aqu est nuestro ejemplo funcionando:

Pulsame

Ahora vamos a ver, paso por paso, que significa cada uno de los elementos extraos que tiene la pgina anterior:
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>

Dentro de estos elementos ser donde se puedan poner funciones en JavaScript. Puedes poner cuantos quieras a lo largo del documento y

en el lugar que ms te guste. Yo he elegido la cabecera para hacer ms legible la parte HTML de la pgina. Si un navegador no acepta JavaScript
no leer lo que hay entre medias de estos elementos. As que si programamos algo que slo funcione con la versin 1.1 pondramos LANGUAGE=
"JavaScript1.1" para que los navegadores antiguos pasen olmpicamente del cdigo y no se hagan un lo.
function HolaMundo() {
alert("Hola, mundo!");
}

Esta es nuestra primera funcin en JavaScript. Aunque JavaScript est orientado a objetos no es de ningn modo tan estricto como Java,

donde nada esta fuera de un objeto. Para las cosas que se van a hacer en este tutorial, no vamos a crear ninguno, pero usaremos los que vienen
en la descripcin del lenguaje. En el cdigo de la funcin vemos una llamada al mtodo alert (que pertenece al objeto window) que es la que se
encarga de mostrar el mensaje en pantalla. Por un fallo del Netscape no se pueden poner las etiquetas HTML de caracteres especiales en una
funcin: no los reconoce. As que pondremos directamente "" arriesgndonos a que salga de otra manera en ordenadores con un juego de
caracteres distinto al del nuestro.
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"
onClick="HolaMundo()">
</FORM>

Dentro del elemento que usamos para mostrar un botn vemos una cosa nueva: onClick. Es un controlador de evento. Cuando el usuario

pulsa el botn, el evento click se dispara y ejecuta el cdigo que tenga entre comillas el controlador de evento onClick, en este caso la llamada a
la funcin HolaMundo(), que tendremos que haber definido con anterioridad. Existen muchos ms eventos que iremos descubriendo segn
avancemos en el tutorial. En el cuarto cpitulo hay un resumen de todos ellos.

En realidad, podramos haber escrito lo siguiente:


<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"
onClick="alert('&iexcl;Hola,Mundo!')">
</FORM>

y nos habramos ahorrado el tener que escribir la funcin y todo lo que le acompaa, adems de conseguir que nos
reconozca el caracter especial . Sin embargo me pareci conveniente hacerlo de esa otra manera para mostrar ms
elementos del lenguaje en el ejemplo.

Un poco de Sintaxis.

La sintaxis de JavaScript es como la de Java y, por tanto, muy parecida a la de C++. Las instrucciones terminan con un punto y coma y se
agrupan mediante llaves; una doble barra (//) indica que el resto de la lnea es un comentario. Lo operadores matemticos tambin son los
mismos: + (que tambin sirve para cadenas), -, *, /, % (mdulo), ++ y --.

Las asignaciones (=) son tambin como en C y C++, incluyendo +=, -=, *=, /= y %=. En cuanto a los operadores lgicos tenemos ||, &&,

!, ^ (xor), << y >> y las comparaciones son (aparte de odiosas :-) ) <, >, <=, >=, = = y !=. Todo como en C.
function Sintaxis() { // Comienza una agrupacin de instrucciones
numero=1;
// numero vale 1
numero++;
// incrementamos numero y ahora vale 2
numero-=3;
// restamos 3 a numero y ahora vale -1
nuevo_numero=numero++; // asignamos -1 a nuevo_num e incrementamos numero,
// que ahora es 0
nuevo_numero=++numero; // incrementamos numero (total: 1) y asignamos su
// valor a nuevo_numero
} //Termina la agrupacin (funcin)

Variables.

Si la declaracin de una variable se hace dentro de una funcin, dicha variable es local, en caso contrario es global. En JavaScript no se asigna
en la declaracin el tipo de la variable sino que el intrprete se encarga de ello. Por ejemplo,
var SoyUnaVariable;
SoyUnaVariable=2;
declarara una variable de un tipo entero. Tambin se pueden crear objetos de la siguiente manera:
var MiPrimerObjeto = new Object();
MiPrimerObjeto.Colonia = "Chispas";
MiPrimerObjeto.TutorDeJavaScript = "Multivac, el grande";

Tambin, y como caso particular de objeto, podemos declarar arrays:


var UnArray = new Array();
UnArray[1]="Soy el primero, que passsa";
UnArray[2]="Los ltimos sern los primeros";

Estructuras.

Vamos a repasar por encima las estructuras de control existentes en JavaScript. Primero examinaremos las sentencias de salto. La secuencia
if...else nos permite realizar una bifurcacin dependiendo del resultado de una condicin lgica:

if (numero==1) {
numero++;
numero+=2; }
else
numero--;

Una estructura similar y muy tpica en C es la siguiente:


numero = (valor>=4) ? 3 : valor;
que, dependiendo del resultado de la condicin expresada entre el = y la ? nos permite dar a la variable numero un 3 si la condicin resultase
verdadera y valor si resultara ser falsa. La estructura switch nos permite bifurcar dependiendo del valor de una variable (que en el ejemplo sera
numero):
switch (numero) {
case 1:
// si la variable es 1
alert('Adios');
break;
// si no ponemos break, ejecutara
// alert('Hola') y todas las
// instrucciones hasta encontrar un
// break o el final del switch
case 2:
alert('Hola');
break;
default:
// si no es ninguno de los anteriores
alert('No te entiendo');
}

ara hacer bucles podremos utilizar las siguientes estructuras: for, for in, while y do/while. La estructura for(inicio;final;incremento) nos
permite ejecutar el contenido del bucle mientras la condicin de final no se cumpla. Al comenzar la ejecucun del bucle se ejecutar la sentencia
inicio y en cada iteracin incremento. La manera ms habitual de usar estas posibilidades es la siguiente:
var factorial=1;
for (n=2;n<=numero;n++)
factorial+=factorial*n;

La estructura for...in es una novedad incluida en JavaScript y nos sirve para recorrer todos los elementos de un array:
for (contador in UnArray)
{
UnArray[contador]="No seais tan chulos"
};

or ltimo, las estructuras while y do/while nos permiten recorrer un bucle mientras se cumpla una condicin. La diferencia entre ellas es
que la primera comprueba dicha condicin antes de realizar una iteracin y la segunda lo hace despus:
var numero=0;
while (numero==1) {
alert('Soy un while');
}
do {
alert('Soy un do/while');
} while (numero==1);

En este caso solo veramos aparecer un ventana diciendo que es un do/while. La razn es evidente. El while comprueba primero si numero

es igual a 1 y, como no lo es, no ejecutara el cdigo que tiene dentro del bucle. En cambio, el do/while primero ejecuta el bucle y luego, viendo
que la condicin es falsa, saldra.

Referencias.

La parte sin duda ms complicada de comprender y manejar en los lenguajes de programacin (y especialmente en C y C++) son los punteros.
Por eso mismo fueron eliminados tanto de Java como de JavaScript. Sin embargo, si se usan en casi todos los lenguajes ser que tienen alguna
utilidad, no?

Los punteros se pueden usar para apuntar a otras variables, es decir, un puntero puede ser como un nuevo nombre de una variable dada. A

esto se le suele llamar referencia. En JavaScript se pueden usar referencias a objetos y a funciones. Su mayor utilidad est en el uso de distinto
cdigo para distintos navegadores de forma transparente. Por ejemplo, supongamos que tenemos una funcin que slo funciona en Internet
Explorer 4, y tenemos una variable IE4 que hemos puesto a verdadero slo si el explorador del usuario es ese.
function funcionIE4() {...}
function funcionNormal() {...}
var funcion = (IE4) ? funcionIE4 : funcionNormal;
// Si IE4 es verdadero, funcion es una referencia de funcionIE4
// Si no, funcion es una referencia de funcionNormal
funcion();
// La llamada que haremos realmente depende de la
// lnea anterior

En este cdigo, cuando llamemos a funcional final en realidad llamaremos a la funcin a la que en la lnea anterior hemos decidido que se

refiera. No te preocupes mucho si no lo entiendes, casi no lo usamos en este curso, aunque en el de HTML dinmico si lo usaremos ms
exhaustivamente.

Introduccin al objeto.

En el lenguaje JavaScript existe una serie de objetos predefinidos que se refieren a cosas como la ventana actual, el documento sobre el que
trabajamos, o el navegador que estamos utilizando. Vamos a hacer un pequeo repaso de algunos de ellos con los mtodos y propiedades ms
usados (los que tenga ganas de contaros, vamos).

Objeto Window.

Es el objeto principal. Define la ventana sobre la que estamos trabajando y tiene como descendientes los objetos referentes a la barra de
tareas, el documento o la secuencia de direcciones de la ltima sesin. Ahora veremos su mtodos y propiedades ms usadas (por m).

open
[Variable=][window.]open("URL","Nombre","Propiedades");
El mtodo open sirve para crear (y abrir) una nueva ventana. Si queremos tener acceso a ella desde la ventana donde la creamos deberemos
asignarle una variable, si no simplemente invocamos el mtodo: el navegador automticamente sabr que pertenece al objeto window. El
parmetro URL contendr la direccin de la ventana que estamos abriendo: si est en blanco, la ventana se abrir con una pgina en blanco. El
Nombre ser el que queramos que se utilize como parmetro de un TARGET y las Propiedades son una lista separada por comas de algunos de los
siguientes elementos:
toolbar[=yes|no]
location[=yes|no]
directories[=yes|no]
status[=yes|no]
menubar[=yes|no]
scrollbars[=yes|no]
resizable[=yes|no]
width=pixels
height=pixels
Debemos tener cuidado con las propiedades que modifiquemos, es posible que algunas combinaciones de los mismos no funcionen en todos los
navegadores. El Explorer 4, por ejemplo, da error ante la combinacin toolbar=no, directories=no, menubar=no.

close
Variable.close();
Cierra la ventana Variable. A no ser que hayamos acabado de abrirla nosotros pedir al usuario una ventana para que decida l si quiere o no
cerrarla.

alert

Variable.alert("Mensaje");
Muestra una ventana de dilogo en la ventana Variable con el mensaje especificado.

status
Define la cadena de caracteres que saldr en la barra de estado en un momento dado.

defaultStatus
Define la cadena de caracteres que saldr por defecto en la barra de estado. Cuando no la especificamos, defaultStatus ser igual al ltimo valor
que tom status.

Objeto document.

Es un objeto derivado de window que identifica a un documento HTML.

write
document.write("Cadena");
Escribe en un documento HTML, en el lugar del mismo donde hayamos situado el script que contiene al m:todo, la cadena dada. El mtodo
writeln hace lo mismo, pero incluyendo al final un retorno de carro.

lastModified
Contiene la fecha y hora en que se modific el documento por ltima vez y se suele usar en conjuncin con write para aadir al final del
documento estas caractersticas.

bgColor
Modifica el color de fondo del documento. El color deber estar en el formato usado en HTML. Es decir, puede ser red o FF0000.

Objeto history.

Este objeto se deriva de document y contiene todas las direcciones que se han visitado en la sesin actual. Tiene estos tres mtodos:
document.history.back(): Volver a la pgina anterior.
document.history.forward(): Ir a la pgina siguiente.
document.history.go(donde): Ir a donde se indique, siendo donde un nmero tal que go(1)=forward() y go(-1)=back().

Objeto form.

Este objeto derivado de document se refiere a un formulario. Puede ser til para verificarlos antes de enviarlos.

submit
Nombre.submit()
Enva el formulario llamando Nombre.

text
Contiene el texto contenido en un campo de edicin de un formulario.

Objeto date.

Este es un objeto de propsito general que permite trabajar con fechas y horas.

Objeto math.

Este otro objeto de propsito general incluye las diversas funciones matemticas ms comunes, como abs o sin o el valor PI.

Objeto navigator.

A travs de este objeto podremos averiguar varias caractersticas del navegador que usamos. Por ejemplo:
navigator.appName: Nombre del navegador.
navigator.appVer: Nmero principal de versin.
navigator.language: Idioma del mismo.
navigator.platform: Plataforma donde esta ejecutndose.

No podemos sobreescribir estos atributos, pero s leerlos.


Objeto screen.

Con este objeto podremos averiguar la configuracin de la pantalla. Al igual que en el anterior, todos sus atributos son de slo lectura.
screen.height: Altura..
screen.width: Anchura.
screen.pixelDepth: Nmero de bits por pixel.

As, por ejemplo, te puedo decir que en este momento tu pantalla est configurada para 1920x1200x16777216 colores.

Definicin.

Un evento, como su mismo nombre indica, es algo que ocurre. Para que una rutina nuestra se ejecute slo cuando suceda algo extrao
deberemos llamarla desde un controlador de eventos. Estos controladores se asocian a un elemento HTML y se incluyen as: <A
HREF="http://www.iespana.es/duendedeleyenda" onMouseOver="MiFuncion()">

Lista de eventos.

Aqu tienes una pequea gua de eventos definidos en JavaScript.

Evento

Descripcin

onLoad

Terminar de cargarse una pgina

onUnLoad

Salir de una pgina (descargarla)

onMouseOver Pasar el ratn por encima

onMouseOut Que el ratn deje de estar encima


onSubmit

Enviar un formulario

onClick

Pulsar un elemento

onBlur
onChange

Elementos que lo admiten


<BODY...>
<FRAMESET...>
<LAYER...>
<BODY...><FRAMESET...>
<LAYER...>
<A HREF..>
<AREA...>
<LAYER...>
<A HREF..>
<AREA...>
<LAYER...>
<FORM...>

<INPUT TYPE="button, checkbox, link, radio"...>


<INPUT TYPE="text"...>
Perder el cursor
<TEXTAREA...>
<LAYER...>
<INPUT TYPE="text"...>
Cambiar de contenido o perder el cursor
<TEXTAREA...>

onFocus

Conseguir el cursor

onSelect

Seleccionar texto

<INPUT TYPE="text"...>
<TEXTAREA...>
<LAYER...>
<INPUT TYPE="text"...>
<TEXTAREA...>

Un ejemplo.

Como ejemplo, vamos a hacer que una ventana aparezca automticamente en cuanto pasemos un cursor por encima de un elemento
impidiendo, de paso, que quien est viendo la pgina pueda hacer uso del mismo).

<A> (e

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Se usan los comentarios para esconder el cdigo a navegadores sin JavaScript
function Alarma() {
alert("No me pises, que llevo chanclas");
return true;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="eventos.html" onMouseOver="Alarma()">
Pasa por aqu encima
</A>
</BODY>
</HTML>
Y aqu est nuestro ejemplo funcionando:
Pasa por aqu encima

Objeto event.

Este objeto permite la identificacin de un evento con el atributo


hacer:

type y

su localizacion con

x e y,

entre otras cosas. As, por ejemplo, podramos

<A HREF="http://www.iespana.es/duendedeleyenda" onMouseOut='alert("Hubo un evento "+event.type+" en el enlace.")'>


Pasa por aqu encima y cuando te vayas saldr la ventanita
</A>

Es un ejemplo un poco tonto,no? Pasa por aqu encima y cuando te vayas saldr la ventanita .
S

u importancia radica en el hecho de que se puede usar para capturar toda clase de eventos por medio de la funcin captureEvents(e). El
argumento de esta funcin es una propiedad del objeto event que indica el tipo de eventos que desees capturas de este modo:
captureEvents(event.CLICK | event.MOUSEOVER | event.BLUR)
que permitira la captura de todos los eventos onLoad, onMouseOver y onBlur. El nico uso que le he encontrado a estas posibilidades est en

la creacin de objetos nuevos, que de este modo tendran un control de eventos propio.

Crear nuevas ventanas.


<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function AbrirVentana() {
MiVentana=open("","MiPropiaVentana","toolbar=no,directories=no,menubar=no,status=yes");
MiVentana.document.write("<HEAD><TITLE>Una nueva ventana</TITLE></HEAD>");
MiVentana.document.write("<CENTER><H1><B>Esto puede ser lo que tu quieras</B></H1></CENTER>");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton1" VALUE="Abreme, Ssamo" onClick="AbrirVentana()">
</FORM>

Este ejemplo muestra la posibilidad de abrir nuevas ventanas de nuestro navegador con JavaScript. Se llama a la funcin AbrirVentana desde el
evento onClick, como ya sabemos hacer desde el primer ejemplo. Esta funcin crea la nueva ventana MiVentana y escribe en ella por medio del
objeto document todo el cdigo HTML de la pgina. Aqu debajo podis probarlo.
Abreme,Ssamo

La barra de estado.

Si te has fijado tanto en mi pgina web como en este tutorial, habrs notado que controlo por completo la barra de estado del navegador.
Quiz tambin hayas visto esos scrolls tan bonitos, y que tan rpido cansan. Ahora voy a explicar cmo se hacen ambas cosas.

ara empezar vamos con lo ms sencillito: escribir mensajes diversos en la barra de estado. En el captulo en que hablbamos sobre los
objetos predefinidos apareca el objeto window. En este objeto se definan dos atributos: status y defaultStatus. Para poner un mensaje en la
barra de estado nada ms cargar el documento y que se mantenga ah mientras no haya otro ms importante (un sustituto del famoso Document:
Done del Netscape, vamos) haremos:
<BODY onLoad="window.defaultStatus='El documento ya se ha ledo';return true">

l cdigo lo nico que hace es modificar defaultStatus y devolver true como resultado del controlador de eventos. Por alguna misteriosa razn
es obligatorio hacer esto cuando modificas algo de la barra de estado. No me preguntis por qu, al parecer no es ms que una convencin.

Ahora veremos cmo se puede definir el valor de la barra de estado cuando el ratn pasa por encima de un elemento <A>:
<A HREF="MiPagina.html" onMouseOver="window.status='Vente a mi pgina';return true">

Fcil, no? Bueno, ahora vamos a ver cmo se hacen scrolls.


<HTML>
<HEAD>
<TITLE>Ejemplo</TITLE>

<SCRIPT LANGUAGE="JavaScript">
var texto=" Aqu est el mensaje que espero observes y leas con suma atencin ";
var longitud=texto.length;
function scroll() {
texto=texto.substring(1,longitud-1)+texto.charAt(0);
window.status = texto;
setTimeout("scroll()",150);
}
</SCRIPT>
</HEAD>
<BODY onLoad="scroll();return true;">
Esta es la mejor pgina del mundo conocido.
</BODY>
</HTML>

Como podis ver, la cosa no es ni ms larga ni ms compleja que los ejemplos anteriores.

Simplemente escribe el texto en la barra de


estado y luego coge el caracter ms a la izquierda del mismo y lo pone a la derecha, para despus volver a escribirlo. La nica pega que tiene es
cmo demonios hago para que la funcin se llame cada cierto tiempo predeterminado para ir desplazando el texto a una velocidad constante.
La respuesta esta en el mtodo

setTimeout("funcin",tiempo) que llama a funcin cuando hallan pasado tiempo milisegundos.

Plsameparaverunscroll

Volver a la pgina anterior.

Si quieres volver a la ltima pgina donde has estado, o a cinco ms atrs, lo puedes hacer con los mtodos proporcionados por
que ya vimos. Para emplearlos no tiene ms que hacer lo siguiente:

document.history

<A HREF="javascript:window.history.back()">

Y, para variar, si deseas probar no tienes ms que pulsar aqu.


Tratamiento de imgenes.

Lo que vamos a lograr con este truco es un pequeo cambio de imgenes. El ejemplo de lo que vamos a hacer lo tienes en el ndice de la
izquierda. Al pasar el ratn por encima de una opcion podrs observar que el grfico cambia. Para hacer esto deberemos crear dos grficos
distintos: el que se ver normalmente y el que nicamente podr verse cuando el ratn pase por encima. Si llamamos al primero, por ejemplo,
apagado.gif y al segundo encendido.gif el cdigo necesario para que el truco funcione es:
<HTML>
<HEAD>
<TITLE>Ejemplo de imagenes</TITLE>
<SCRIPT LANGUAGE="JavaScript">
if (document.images) {
var activado=new Image();
activado.src="encendido.gif";
var desactivado= new Image();
desactivado.src="apagado.gif";
}
function activar(nombreImagen) {
if (document.images) {
document[nombreImagen].src=activado.src; }

}
function desactivar(nombreImagen) {
if (document.images) {
document[nombreImagen].src=desactivado.src; }
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="mipagina.html" onMouseOver="activar('prueba');" onMouseOut="desactivar('prueba');">
<IMG NAME="prueba" SRC="apagado.gif" BORDER=0>
</A>
</BODY>
</HTML>

Lo primero que hay que indicar es que para que funcione el invento la imagen debe ser un enlace. Por qu? Porque los eventos que

controlan si el ratn pasa o no por encima no son admitidos por la etiqueta <IMG>. Tambin deberemos "bautizar" nuestra imagen usando el
atributo NAME="como-se-llame" para permitir al cdigo su identificacin posterior.

El ejemplo funciona de la siguiente manera: en principio la imagen que vemos es la desactivada, que es la que indica la etiqueta <IMG>. Al

pasar el raton por encima de ella el evento onMouseOver llamar a la funcin activar llevando como parmetro el nombre de la imagen. Esta
funcin sustituir en el objeto document el nombre del fichero donde se guarda la imagen por encendido.gif, que es el grfico activado. Cuando
apartemos el ratn de la imagen, ser el evento onMouseOut el que se active, llamando a desactivar. Esta funcin sustituir el grfico de nuevo,
esta vez por apagado.gif.

Leyendo esta explicacin parece que una parte del cdigo sobra. Para qu sirve declarar dos objetos Image para albergar los grficos? No

bastara con cambiar directamente el nombre de la imagen escribiendo document[nombreImagen].src = 'encendido.gif';? Pues no del todo.
Efectivamente funcionara, pero cada vez que cambisemos el nombre el navegador se traera la imagen del remoto lugar donde se encontrara. Es
decir, cada vez que passemos el ratn por encima de la imagen o nos alejaramos de ella tendramos que cargar (aunque ya lo hubisemos hecho
antes) el grfico correspondiente. Es cierto que con la cach del navegador este efecto quedara algo mitigado, pero siempre es mejor precargar
las imgenes usando el objeto Image, ya que as el navegador comenzar a leer el grfico en cuanto ejecute el cdigo en vez de esperar a que el
usuario pase por encima de la imagen con el ratn. El objeto Image tiene como atributos los distintos parmetros que puede tener la etiqueta
<IMG>.

Por ltimo, hay que estudiar que significa eso de if (document.images). En los navegadores que no poseen JavaScript 1.1 (lase Netscape 2

y Explorer 3 e inferiores) el objeto Image no existe y dar un mensaje de error si se lo encuentra por ah. La solucin a este problema consiste en
detectar la capacidad del navegador para manipular grficos preguntandole por la existencia del array document.images. As podremos no crear
las variables que guardan los grficos ni ejecutar el cdigo de las funciones para activar y desactivar en el caso de que el navegador no soporte
este array, lo cual es lo mismo que decir que soporta la versin 1.1 de JavaScript.

Y este es nuestro ejemplo funcionando:

Introduccin.

Los formularios siempre han sido la mejor manera de facilitar la comunicacin entre los usuarios y los creadores de una web. Sin embargo, la
implementacin de los mismos en el lenguaje HTML ha provocado ciertos problemas debido a sus carencias. Estos problemas han intentado
solventarse con scripts, situados tanto en el servidor como en el navegador.
Los programas albergados en el servidor suelen ser scripts CGI, y por supuesto no vamos a investigarlos en un curso de JavaScript. Solamente
decir que existen infinidad de ellos y que, en general, la mayora de proveedores de espacio web tienen alguno disponible para sus usuarios, con
instrucciones de uso incluidas.
Los programas que se ejecutan en el navegador suelen estar escritos en JavaScript, y realizan tareas simples de validacin. En muchas
ocasiones estn combinados con scripts CGI que modifican el mensaje generado por un formulario para facilitar su lectura y manejo.

Objeto form.

El array document.forms contiene todos los formularios de un documento. As, se accedera al primer formulario definido como
Sin embargo, si usamos el parmetro NAME:

document.forms[0].

<FORM NAME="miFormulario">
entonces podremos acceder al formulario con document.miFormulario, que resulta bastante ms cmodo y estable ante la posibilidad de variacin del
nmero y posicin de formularios en el documento.

Vamos a ver ahora el cdigo de nuestro primer formulario con validacin, que comprueba si tu la direccin de correo electrnico del usuario

es correcta:

<HTML>
<HEAD>
<TITLE>Ejemplo de formularios</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function validar(direccion) {
if (direccion.indexOf("@") != -1)
return true;
else {
alert('Debe escribir una direccin vlida');
return false;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="miFormulario"
METHOD="POST"
ACTION="mailto:yo@miproveedor.mipais"
ENCTYPE="text/plain"
onSubmit="return validar(this.email.value)">
Mandame tu e-mail: <INPUT NAME="email" TYPE="text"><BR>
<INPUT TYPE="submit" VALUE="Mandame tu e-mail">
</FORM>
</BODY>
</HTML>

l cdigo es sencillo: el cdigo llamado por el controlador de evento onSubmit debe devolver false si deseamos que el formulario no sea
enviado. As pues, llamamos a la funcin que comprueba si hay alguna arroba en el campo email del formulario.

La manera de llamar a esta funcin es quizs lo ms complicado. La funcin validarrecibe una cadena de caracteres, devolviendo verdadero

o falso dependiendo de que haya o no una arroba dentro de ella. El controlador utiliza para llamar a esta funcin lo siguiente:
this.email.value
this es

una referencia estndar. Cuando veamos this en algn cdigo en realidad deberemos sustituirlo mentalmente por el objeto en el que est
el cdigo. En este caso, como estamos dentro de miFormulario, this ser equivalente a document.miFormulario. email es el nombre del campo que
queremos investigar y value el el atributo que contiene lo que haya tecleado el usuario.
Mandame tu e-mail:

Mandametuemail

Como hay muchos tipos de campos en un formulario (cajas de texto, botones de radio, listas de seleccin, etc.), vamos a ver cual es el

campo que, en cada uno de ellos, contiene la respuesta del usuario:

Tipo de campo
Hidden, Password, Text,
FileUpload
Checkbox, Radio
Option
Un ejemplo.

Atributo
value

Descripcin
Contiene el texto tecleado por el usuario

Verdadero si el control de confirmacin (o un botn de radio individual)


est activado
selected Verdadero si la opcin esta seleccionada dentro de su lista
checked

Vamos a ver un ejemplo prctico de uso: os voy a hacer un pequeo examen, para ver cuanto JavaScript habis aprendido. Espero que ningn
profesor utilice este ejemplo para realizar sus exmenes, ya que cualquiera puede averiguar las respuestas observando el cdigo. Aqu tenis el
examen:
La estructura a = b ? c : d; es...
un bucle
una operacin aritmtica
una condicin
el atributo window.status contiene:
el valor de la barra de estado

el valor por defecto de la barra de estado


ciertas caractersticas de la ventana
el evento load ocurre:
cuando termina de cargarse una pgina
cuando termina de cargarse un grfico
cuando empieza a cargarse una pgina
Que array contiene los grficos de una pgina?
document.graphics
document.images
no hay ninguno
el mtodo alert sirve para:
hacer sonar un pitido de alarma
lanzar una ventana con informacin
decirle al navegador que hay un problema con el cdigo

Quierosaberminota

No os voy a poner el cdigo que si no me averiguais las respuestas, tramposillos... Simplemente comprueba que cada elemento del

formulario de tipo radio seleccionado tiene el atributo


de un formulario, el cdigo resultante es el siguiente:
function averiguarNota(examen) {
var resultado=0;
for (i=0;i<examen.elements.length;i++)
if ((examen.elements[i].type=="radio") &&
(examen.elements[i].value=="bien") &&
(examen.elements[i].checked))
resultado++;
alert("Acertaste "+resultado+" de 5 preguntas.");
return false;
}

y cada pregunta tiene la siguiente estructura:


<BR>Multivac es
<BR><INPUT TYPE="radio" NAME="Respuesta1" VALUE="mal">
una porquera
<BR><INPUT TYPE="radio" NAME="Respuesta1" VALUE="bien">
el mejor
<BR><INPUT TYPE="radio" NAME="Respuesta1" VALUE="mal">
algo poco reseable

VALUE igual

a "bien". Teniendo en cuenta que el array

elements contiene

todos los elementos

uego la funcin es llamada desde el evento submit y ya est. Podra haberse hecho tambin desde el evento click de un botn... siempre
hay ms de una manera de hacer las cosas.

Definicin.

Parece ms que necesario definir algo que lleva el absurdo nombre de galletita o cookie. Una galleta es un elemento de una lista que se guarda
en el fichero cookies.txt en el ordenador del visitante. Cada elemento de esa lista tiene dos campos obligatorios: el nombre y su valor; y uno
opcional: la fecha de caducidad. Este ltimo campo sirve para establecer la fecha en la que se borrar la galleta. Tiene este formato:
nombre=valor;[expires=caducidad;]

Slo el servidor que ha enviado al usuario una determinada cookie puede consultarla. Cada galleta tiene un tamao mximo de 4 Kb y

puede haber un mximo de 300 cookies en el disco duro. Cada servidor podr almacenar como mucho 20 galletas en el fichero cookies.txt (en el
caso de usar Netscape) o en el directorio cookies (si utilizamos Explorer) del usuario. Si no especificamos la fecha de caducidad la galleta se
borrar del disco duro del usuario en cuanto ste cierre el navegador.

Funciones bsicas.

Para poder hacer algo con cookies deberemos programar dos funciones: una que se encargue de mandar una galleta al usuario y otra que
consulte su contenido.

Con esta funcin mandamos una galleta. Vemos que el valor es codificado por medio de la funcin escapey que la caducidad (en caso de

decidir ponerla) debe ser convertida a formato GMT. Esto se hace mediante el metodo

toGMTString() del

objeto Date.

Declaramos la variable buscamos que contiene el nombre de la galleta que queremos buscar ms el igual que se escribe justo despus de

cada nombre, para que as no encontremos por error un valor o una subcadena de otro nombre que sea igual al nombre de la galleta que
buscamos. Una vez encontrada extraemos la subcadena que hay entre el igual que separa el nombre y el valor y el punto y coma con que termina
dicho valor.
<script language="JavaScript">

function hacerGalleta(nombre, valor) {


var argv =hacerGalleta.arguments;
var argc = hacerGalleta.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ?argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = nombre + "=" + escape (valor) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +

((secure == true) ? "; secure" : "");


}
function consultaUno(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1) endstr = document.cookie.length;
return unescape (document.cookie.substring(offset, endstr));
}
function consultaDos(nombre) {
var arg = nombre+"=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg) return consultaUno(j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function contador(cuenta) {
var cuenta=consultaDos("msg2")
if (cuenta==0) {
cuenta=1
}
else cuenta++
var FinFecha = new Date ();
FinFecha.setTime (FinFecha.getTime() + (24 * 60 * 60 * 1000 * 365));
hacerGalleta("msg2", cuenta, FinFecha);
return (cuenta)
}
var num=contador("cuenta")
</SCRIPT>
Este es el nmero de veces que has entrado:

<script>
document.write(" " + num);
</script>

Un ejemplo.

Vamos a ver un ejemplo. Utilizaremos una galleta llamada msg2 para ver el nmero de veces que has visitado este curso:

Guardamos en la variable num las visitas que has hecho a sta pgina. Luego escribe en el documento el nmero de veces.

Este es el nmero de veces que has entrado: 1

Ficheros.js

Un fichero .js es un archivo donde podremos guardar funciones y variables globales que podrn leerse desde cualquier pgina HTML. Gracias a
ellos podremos evitar el tener que duplicar funciones que se necesiten en mas de un documento. Podremos incorporarlos a nuestras pginas de
esta manera:
<HTML>
<HEAD>
<TITLE>Mi Pgina</TITLE>
<SCRIPT SRC="funciones.js">
<!- alert('Error con el fichero js');
// -->
</SCRIPT>
</HEAD>
<BODY>
Lo que sea.
</BODY>
</HTML>

El cdigo que incluyamos entre un <SCRIPT SRC> y un </SCRIPT> slo se ejecutar en caso de que la lectura del fichero .js falle.
E

n esta versin 1.1 se define tambin el mtodo para incluir una expresin JavaScript en los parmetros de una etiqueta HTML. La forma de
hacerlo es considerando dicha expresin (entre llaves) como un caracter especial HTML, encerrandolo, por tanto, entre un & y un ;. Por ejemplo:
<HR WIDTH=&{"&"};{anchoLinea+"%";};>

que, en el supuesto de que la variable anchoLinea sea igual a 50 nos dara el siguiente resultado:

HTML dinmico.

El JavaScript 1.2 trae unas cuantas cosas nuevas, pero la mayora tienen que ver con una nueva especificacin llamada HTML dinmico. Es un
tema demasiado amplio como para tratarlo aqu, necesita un curso para l slo. As que me voy a limitar a comentar por encima las dos
caractersticas del HTML dinmico que tienen que ver con el JavaScript: las hojas de estilo y las capas.

Los que hayan hecho pginas para Internet Explorer 3 seguramente ya saben que son y como funcionan las hojas de estilo. En resumen,

estas hojas intentan separar el contenido de un pgina de la forma de presentarlo en pantalla. La novedad es que ahora podremos definir dichas
hojas de dos maneras: en cascada (el modo tradicional del Explorer) o con JavaScript. Si queremos, por ejemplo, que todos los prrafos estn en
rojo haremos:

En cascada

JavaScript

<STYLE TYPE="text/css"> <STYLE TYPE="text/javascript">


P {color: red;}
tags.P.color="red";
</STYLE>
</STYLE>

Las capas son un concepto nuevo introducido con el Communicator. Se pueden definir como pginas HTML que se insertan dentro de otra

pgina. Sin JavaScript no tendran mucha utilidad, pero con con la mezcla de los dos podremos realizar animaciones, pginas que cambien segn
deseemos, etc..

Entre las etiquetas <LAYER> y </LAYER> podemos incluir todo lo que queramos: todo lo que podemos meter en el cuerpo de un

documento HTML. Estas etiquetas tienen entre sus parmetros cosas como la posicin en la pantalla, si estn ocultas o visibles o si son opacas y
no permiten ver las posibles capas que tengan debajo. Todos estos atributos son modificables usando JavaScript.

arece sencillo pensar que, si en una capa metemos un grfico cualquiera, podemos hacer uso del JavaScript y la funcin setTimeout para
modificar sus posicin y as lograr una animacin. Del mismo modo, si modificamos los atributos de visibilidad desde un evento onSubmit de un
formulario podremos conseguir que el usuario elija que parte de nuestra pgina web quiere ver.

QuesJavaScript?
Javascript es un nuevo lenguaje escrito. Los 'scripts' de Javascript pueden ser introducidos dentro de sus pginas de HTML. Con Javascript se puede
dar respuesta a eventos iniciados por el usuario (el observador de nuestras pginas, por ejemplo), eventos tales como la entrada de una forma o
algn enlace. Esto sucede sin ningn tipo de transmisin. De tal forma que cuando un usuario escribe algo en una forma, no es necesario que sea
transmitido hacia el servidor, verificado y devuelto. Las entradas son verificadas por la aplicacin cliente y pueden ser transmitidas despus de esto,
Tambin se puede pensar de programa que se ejecuta en la versin cliente. Por ahora existe un gran nmero de calculadores en Internet, algunos
son proporcionados por Netscape.
Aunque JavaScript se parece a Java, no es lo mismo! Java es un lenguaje de programacin mucho ms complejo que JavaScript. JavaScript est
hecho para ser un lenguaje bastante fcil de entender. A los autores del JavaScript no les debi haber importado mucho el tema de la programacin.
Por esta razn, algunos elementos de Java no son aceptados en JavaScript.
Para una informacin mas concisa acerca de este tema, por favor lea la introduccin obsequiada por Netscape.

Cmo pueden ser los scripts de JavaScript ejecutados?


Ahora quisiera mostrar algunos pequeos scripts, de modo que usted pueda aprender de que modo estos son implementados dentro de los
documentos de HTML y mostrar con que posibilidades se cuenta en este nuevo lenguaje script. Comenzar con un script muy pequeo el cual solo
mostrar texto dentro de un documento HTML.
<html>
<head>
Mi primer JavaScript!
</head>
<body>
<br>
Este es documento normal en HTML.
<br>

<script language="LiveScript">
document.write("Esto es JavaScript!")
</script>
<br>
Otra vez en HTML.
</body>
</html>
Tendr la posibilidad de ver este script trabajando. Si su browsers no es compatible con JavaScript entonces este escrito se debe ver un poco
extrao...
Este es un documento normal en HTML.
Esto es JavaScript!
Otra vez en HTML.
Debo admitir que este script no es muy funcional. Usted puede escribir eso en HTML mucho ms rpido y corto. Pero lo que yo quera mostrar es
como se deben usar los tags <script>. Usted puede usar estos tags en su documento en el lugar que desee.

No quiero molestarlos con algunos scripts estupidos. As que iremos a las funciones. Esto tampoco es difcil de entender, crme, es mucho mas til!
Las funciones son invocadas por eventos iniciados por el usuario. Por esto parece razonable mantenerlas dentro de los tags <head>. Ellos son
cargados antes de que el usuario puedea hacer algo que llame una funcin. Los scripts pueden ser ubicados como comentario para asegurarse de
que los browsers obsoletos no muestren el script por si solos.
<html>
<head>
<script language="LiveScript">
function pushbutton() {
alert("Hola!");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Presineme" onclick="pushbutton()">
</form>
</body>
</html>

Si desea probar esta funcin ya mismo y est usando Netscape 2.0 entonces por favor presione el botn.

Presineme
Este script crear un botn que cuando es presionado muestra una ventana diciendo 'Hola!'. No es esto grandioso? Adems, qu est sucediendo en
este script? Primero la funcin se carga y es guardada en memoria. Entonces un botn es hecho con el tag normal <form> (HTML). Hay algo
completamente nuevo con el tag <input>. All puede ver 'onclick'. Esto le dice al browser que funcin tiene que invocar cuando este botn es
presionado (logicamente si el browser es compatible con JavaScript). La funcin 'pushbutton()' se aclara en el encabezado (<head>). Cuando el
botn es presionado esta funcin se ejecuta. Existe otra cosa nueva en este script el mtodo 'alert'. Esto mtodo ya es declarado en JavaScript- solo
se necesita invocarlo. Existen muchos mtodos diferentes los cuales se pueden invocar. Aqu mostrar algunos. Puede encontar una descripcin
completa en el home page de Netscape. Creo que esa lista se ira volviendo mas y mas extensa en el futuro. Pero por el momento hay algunas cosas
divertidas que se pueden hacer con los mtodos dados.
(No creo que el mtodo 'alert' est planeado para ser usado en esta forma, pero aqu estamos slo aprendiendo y de esta manera es completamente
fcil de aprender. Espero me disculpen...)

Ahora ya vamos lejos. En efecto tenemos un gran nmero de posibilidades tan solo agregando funciones a nuestros scripts. Ahora le mostrar como
puede leer algo que un usuario haya insertado en una forma.
<html>
<head>
<script language="LiveScript">
<!-- esconde el script de viejos browsers
function getname(str) {
alert("Hola "+ str+"!");
}
// end hiding contents -->
</script>
</head>
<body>
Por favor, escriba su nombre:
<form>
<input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>

Ahora puede probar este script de nuevo:


Por favor escriba su nombre:

Otra vez tenemos nuevos elementos implementados en este script. Primero usted habr notado el comentario en el script. De esta forma se puede
esconder el script de los browsers obsoletos que no ejecutan scripts. Usted debe seguir el orden mostrado! El principio del comentario debe estar
justo despus del primer tag <script>. El comentario termina justo antes del <script> tag. En este documento HTML usted tiene una forma donde el
usuario puede escribir su nombre. El 'onBlur' en el tag <input> le dice al programa cliente que funcin es la que tiene que invocar cuando algo se
introduce en esta forma o casilla. La funcin 'getname(str)' ser invocada cuando usted deja en blanco esta forma ('leave') o presiona 'enter' sin
haber escrito nada. La funcin tomar el 'string' usted escribi a travs del comando 'getname(this.value)'. 'This.value' significa el valor que usted
escribi en la forma.

Creo que lo siguiente tan 'vacano' como bueno. Vamos a implementar la funcin de la fecha dentro de nuestro script. De modo que si usted hace
una pgina en HTML, puede hacer que el usuario vea la ltima modificaci del documento sin que se tenga que escribir la fecha. Simplemente se
escribe un programa en script. Cuando se hagan pequeos cambios en el futuro, la fecha cambia automaticamente.
<html>
<body>
Esta es una simple pgina en HTML.
<br>
Ultima modificacin:
<script language="LiveScript">
<!-- oculta el script de los browsers obsoletos
document.write(document.lastModified)
// termina de esconder el contenido -->
</script>
</body>
</html>

En mi primera publicacin de esta introduccin haba escrito lastmodified. Este fue el estilo que Netscape 2.0 beta2 quera. Ahora tengo Netscape
2.0 beta4 y ha cambiado a lastModified. De modo que dese cuenta que JavaScript es bastante sensitivo. lastmodified y lastModified son algo
diferente. Esta es la razn por la cual la primera publicacin no tena fecha al final de la pgina cuando era vista con algunas versiones de Netscape.
Por el momento esta propiedad parece no funcionar en cualquier mquina. Compuserve muestra solo la fecha 1/1/1970. Bueno, le puedo decir que

esto no es completamente verdadero. aunque esta propiedad trabaja muy bien en mi PC. Usted debe probarla en su mquina. Yo solo tengo que
eliminarla por el momento.
Hay muchas mas cosas que usted puede hacer. Solo heche un vistazo en los documentos conservados por Netscape. Yo complementar este curso
en el futuro, adems hoy en da las cosas se estn moviendo bastante rpido, asi que no sera sorprendente si la prxima semana sucede un enorme
cambio en JavaScript!

JavaScript

https://web.archive.org/web/20041218023035/http...

La siguiente propiedad de JavaScript la puede observar moviendo el puntero del mouse sobre
este link. Tan solo observe la barra de estado en la parte baja del browser. Esto se puede
combinar muy bien con funciones de JavaScript. Si mueve el mouse sobre este link una ventana
se abrir. Ahora le mostrar la fuente que produce estos dos efectos:
<a href="tpage.htm" onMouseOver="window.status='Otro link estpido...';
return true">
La nica cosa que tiene que hacer es agregar el mtodo onMouseOver en su tag <a>. El
window.status le permite escribir cosas el la barra de estado de su browser. Como puede ver,
tiene que alternar con las comillas. No puede usar " todo el tiempo, porque de otar manera
JavaScript no es capaz de identificar el string que que quiere imprimir en la barra de estado.
Despus del string se tiene que escribir ;return true.
Bueno, esto no es realmente JavaScript. Usted puede pensar que otros browsers interpretan esto
a travs del estilo HTML. El segundo ejemplo usa JavaScript llamando la funcin 'alert'. Aqu est
la fuente:
<html>
<head>
<script language="LiveScript">
<!-- Escondemos la funcion
function hello() {
alert("Hola!");
}
// -->
</script>
</head>
<body>
<a href="" onMouseOver="hello()">link</a>
</body>
</html>
Esto es completamente fl. Usa el mtodo 'onMouseOver' y la funcin hello() es invocada cuando
este evento ocurre.
Ahora quiero mostrarles un ejemplo usando el mtodo de la fecha y la hora, usted ya vi la
propiedad lastModified trabajando. Ahora vamos a escribir la hora local a nuestro documento.
Este mtodo utiliza la fecha y la hora de su mquina, si la fecha de su mquina es 5/17/1983
esta ser la fecha que ver. Estos datos no son conservados por Internet o algo parecido.
La hora actual es: 10:2
La fecha es: 6/22/115
Aqu est la fuente:
<script language="LiveScript">
<!-- Escondiendo
today = new Date()
document.write("La hora actual es: ",today.getHours(),":",today.getMinutes())
document.write("

1 of 4

06/22/2015 10:04 AM

JavaScript

https://web.archive.org/web/20041218023035/http...

La fecha es: ", today.getMonth()+1,"/",today.getDate(),"/",today.getYear());


// se termina de esconder -->
</script>
Primero creamos una variable de tiempo. Esto es hecho por today=new Date(). Cuando no
especificamos cierta fecha y hora el browser usa la hora local y la pone en la variable 'today'.
Note que no tenemos que aclarar la variable 'today' en ninguna parte. Esta es una diferencia
entre Java y otros lenguajes de programacin donde se tiene que especificar la que escribe antes
de usarlo. Hemos creado un objeto que mantiene la fecha y hora local. Ahora podemos
simplemente escribir su contenido en el documento, tiene que escribir today antes de cada
mtodo get... De otra forma el browser no sabra a que objeto referirse. El mtodo getMonth
manda un nmero entre 0 y 11. 0 para enero y 11 para diciembre. Por esto es que tenemos que
sumar 1 al nmero enviado para tener el mes correcto.
Algo interesante que se puede pensar es crear una fecha, por ejemplo la fecha cuando usted
elabor el documento, as usted podr calcular cuantos dias despus alguien est leyendo su
documento. Y si eso es 10 dias despus le puede decir: Hey, esto est muy viejo, no lo lea!
Para esto necesitar la fecha de hoy como se muestra en el ejemplo y adems la fecha de
creacin. Se le puede poner una fecha de publicacin al documento para que se publique
automaticamente. Sera as:docStarted= new Date(96,0,13)
Se tiene que especificar primero el ao, luego el mes (recuerde que el mes disminuye en uno) y
luego el da. Tambin se puede especificar as: docStarted= new Date(96,0,13,10,50,0)
Los primeros nmeros siguen siendo la fecha. Estn seguidos por la hora, minutos y
segundos.Tengo que decirle que JavaScript no tiene una entrada real para el tiempo. Pero como
pudo ver, pero de todas formas se puede trabajar bastante bien con esto. La forma en que esto
funciona es que la fechas son representadas por nmeros de milisegundos desde 1/1/1970 0:0h.
Esto suena un poco complicado pero es un mtodo comn para representar fechas en los
computadores. Pero usted no debe molestarse acerca de esto, solo debe prestar atencin a las
funciones y ver que despus de todo no es tan difcil.
Tengo una muy buena funcin donde se puede calcular un nmero al azar. Esto pronto ser
implementadopor JavaScript. Pero por el momento se debe trabajar con algunos trucos. Bueno,
realmente no es un truco. Esta es una forma que creo que la mayora de compiladores usan para
calcular nmeros al azar. Si se calculan. Se toma la hora de su mquina y se manipula de alguna
manera. Talvez la versin final de JavaScript usar este mtodo (o alguno parecido) de alguna
forma. Como le haba dicho antes l tiempo es un nmero bastante grande. Se puede usar y
hacer calculos con l. Por ejemplo se le puede calcular el seno y luego el valor absoluto. Esto nos
dar un nmero entre 0 y 1. Adems como el tiempo cambia cada milisegundo no correr el
riesgo de recibir el mismo nmero dos veces (cuando se calcula inmediatamente uno despus
del otro). Cuando quiera calcular muchos nmeros al azar en un corto intervalo de tiempo no
debe usar la funcin 'sin()' sola. As obtendria siempre valores ciertamente cercanos y esto no es
un nmero al azar. Pero si lo quiere hacer en verdad y cada 20 segundos, esta es una estupenda
funcin para lograrlo.
Este es un nmero al azar: 0.7755377825600577
Esta es la fuente para este ejemplo:
<html>
<head>
<script language="LiveScript">
function RandomNumber() {
today = new Date();
num= Math.abs(Math.sin(today.getTime()));

2 of 4

06/22/2015 10:04 AM

JavaScript

https://web.archive.org/web/20041218023035/http...

return num;
}
</script>
</head>
<body>
<script language="LiveScript">
<!-document.write("Este es un numero al azar:", RandomNumber());
// -->
</script>
</body>
</html>

La creacin de ventanas es una gran caracterstica de JavaScript. Se pueden cargar ventanas


nuevas con documentos HTML en ellas. Navegar por Internet todo con JavaScript. Voy a
mostrarle como podemos abrir una nueva ventana y escribir algo en ella. Si usted presiona este
botn querr ver lo que voy a explicar ahora.

Aqui estoy!
Rompiendo con la tradicin, no escrib Hello world! en la pgina ...
Aqu est la fuente:
<html>
<head>
<script language="LiveScript">
function WinOpen() {
msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
msg.document.write("<HEAD><TITLE>Biennnnnn!</TITLE></HEAD>");
msg.document.write("<CENTER><h1><B>Viva er beti manque pierda!</B></h1></CENTER>
");
}
</script>
</head>
<body>
<form>
<input type="button" name="Boton1" value="Push me" onclick="WinOpen()">
</form>
</body>
</html>
Como usted siempre puede ver el botn que invoca la funcin. La funcin WinOpen() crea una
nueva ventana invocando el mtodo open. Las primeras comillas contienen la URL de la pgina.
Aqu puede poner la direccin del documento que quiere cargar. Si lo deja vaco ninguna pgina
se carga, pero puede escribir en ella con JavaScript! Las siguientes comillas especifican el
nombre de la ventana, aqu puede escribir lo que quiera, esto no tiene ningn efecto en nuestros
ejemplos por ahora. Pero recibir un mensaje de error cuando escriba Display Window (con un
espacio entre ambas palabras - Netscape le dice algo diferente en su informacin - pero estuve
sentado media hora y no logr encontrar ningn error!). Las comillas siguientes especifican las
propiedades de la ventana. Esto es realmente interesante! usted puede decir si quiere barras de
herramientas, barras de desplazamiento... Si escribe toolbar=yes entonces tendr barra de
herramientas en su ventana. Algunas propiedades que puede cambiar aparecan abajo. Se puede

3 of 4

06/22/2015 10:04 AM

JavaScript

https://web.archive.org/web/20041218023035/http...

especificar cada cosa posible, solo tiene que escribirla como le mostr y sin espacios entre ellas.
Aqu est lo que se le puede cambiar a la pgina:
toolbar
location
directories
status
menubar
scrollbars
resizable
copyhistory
width=pixeles
height=pixeles
Para pixeles tiene que escribir el nmero de pixeles. De esta forma le puede decir al browsers
que tan grande debe ser la ventana.
Despus de que haya abierto la ventana y llamado su msg (aparece al frente del mtodo 'open'),
puede escribir en ella. Se puede escribir cdigo HTML! esta es una cosa fabulosa. Se puede
construir un documento HTML usando la entrada de una forma dada en el documento anterior.
Usted puede hacer una pgina donde un usuario tenga que escribir su nombre en una 'forma',
entonces un nuevo documento HTML es creado conteniendo su nombre; meses atrs esto solo
era posible con scripts CGI!
Note esto: Parecen haber errores o 'bugs' en JavaScript. Cuando usted escribe algo a una
ventana, tiene siempre que poner un <br> despus de el ltimo texto escrito en la ventana, de
otra forma es probable que no se vea la ltima linea de su escrito.
Si quiere insertar imgenes en la nueva ventana este seguro de poner las propiedades height y
width en el tag <img>. De otra forma no ver imgenes o su pgina se desvanecer de alguna
manera. Esto puede causar algunos problemas muy extraos donde usted no cree que la imagen
es responsable.
Espero que haya disfrutado este segundo curso de JavaScript. Como JavaScript no est
terminado an, de seguro cambiar en le futuro. Espero que mis ejemplos trabajen para ese
entonces. Escribir otros ejemplos cuando nuevas caractersticas sean agregadas o cuando tenga
una nueva idea que les pueda mostrar.

4 of 4

06/22/2015 10:04 AM

Introduccion a JavaScript - Parte3

https://web.archive.org/web/20041218023718/http...

Usando frames usted puede dividir la ventana que muestra las pginas de HTML en varias
partes. De modo que as usted posee partes individuales en su browser y en cada parte puede
cargar pginas diferentes. Algo interesante es que estos frames pueden interactuar. Esto
significa que pueden intercambiar informacin el uno con el otro. Por ejemplo usted puede crear
dos frames, uno con su pgina normal de HTML y otra con una barra de herramientas, la barra
de herramientas puede contener botones para navegar por su pgina normal de HTML. Esta
barra de herramientas estar siempre visible mientras usted navega por otros sitios de la pgina
principal. Primero quiero mostrarle mas o menos como lucir esto. Solo preione el botn y
observe lo que son los frames. (en esta oportunidad el programa no se ejecuta en su mquina,
la informacin baja del servidor, asi que por favor, espere un momento)

Presineme
Aqu est el script en HTML para los frames:
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="frtest1.html" name="fr1">
<FRAME SRC="frtest2.html" name="fr2">
</FRAMESET>
</HTML>
Primero usted le dice al browser cuantos frames quiere tener. Esto est definido en el tag
<frameset...>. Escribiendo rows el browser dividir el espacio descrito en barras. Se pueden
crear varias columnas usando cols en lugar de rows. Se pueden usar varios tags <frameset...>.
Aqu va un ejemplo distribuido por Netscape:
<FRAMESET COLS="50%,50%">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
</FRAMESET>
</FRAMESET>

Ensaye este script


Esto crear dos columnas y la segunda columna es dividida en 3 partes iguales. Los 50%,50% el
primer tag <frameset> le dicen al browser que tan grandes sern los frames.
Usted le puede dar nombres a sus frames. Esto es muy importante para el uso con JavaScript.
En el primer ejemplo puede ver como los frames toman sus nombres. Usando el tag <frame> se
le dice al browser que pgina de HTML cargar.

1 of 4

06/22/2015 10:05 AM

Introduccion a JavaScript - Parte3

https://web.archive.org/web/20041218023718/http...

Creo que los elementos bsicos de los frames son fciles de entende, ahora miremos nuestro
prximo ejemplo:

Frames y Scripts
Esto le mostrar una ventana donde puede presionar algunos botones para escribir algun texto
en otro frame.
Aqu va la fuente:
Para crear los frames necesitar (frames.htm):
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="frame1.htm" name="fr1" noresize>
<FRAME SRC="frame2.htm" name="fr2">
</FRAMESET>
</HTML>
Aqu est la fuente para frame1.htm:
<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
function hi() {
document.write("Hola!<br>");
}
function yo() {
document.write("Entonces!<br>");
}
function bla() {
document.write("bla bla bla<br>");
}
// -->
</script>
</HEAD>
<BODY>
Este es nuestro primer frame!
</BODY>
</HTML>
Y ahora frame2.htm:
<HTML>
<body>
Este es nuestro segundo frame!
<p>
<FORM NAME="buttonbar">
<INPUT TYPE="button" VALUE="Hi" onClick="parent.fr1.hi()">

2 of 4

06/22/2015 10:05 AM

Introduccion a JavaScript - Parte3

https://web.archive.org/web/20041218023718/http...

<INPUT TYPE="button" VALUE="Yo" onClick="parent.fr1.yo()">


<INPUT TYPE="button" VALUE="Bla" onCLick="parent.fr1.bla()">
</FORM>
</BODY>
</HTML>
Wow! Estos scripts se tornan mas y mas largos! Que hay hecho aqu? El usuario carga el primer
archivo (frames.htm). Este crea los frames y carga el archivo de HTML frame1.htm al primer
frame (llamado 'fr1') y frame2.htm al segundo frame (llamado 'fr2'). Hasta aqu estamos en
HTML puro. Como puede ver el primer script frame1.htm contiene algunas funciones de
JavaScript. Pero estas no son invocadas en el primer script. No son estas funciones necesarias
del todo? Me da mucha pereza de borrar las funciones inservibles? Aunque yo soy un tipo
peresozo, esta funciones si son necesarias. Ellas son invocadas por el segundo script
frame2.htm! Nosotros hicimos algunos botones en este segundo script como lo hicimos en la
primera parte de esta introduccin. La propiedad onClick ya es muy familiar. Pero que significa el
parent.fr1...?
Si est familiarizado con objetos, entonces esto no es nuevo para usted. Como pudo ver antes,
el frame1.htm y el frame2.htm son invocados por el archivo frames.htm. Frames.htm es el padre
de los otros dos frames. En consecuencia los dos nuevos frames son llamados frames nios de
frames.htm. Se puede observar que esto es un tipo de jerarqua que da una cierta interrelacin
entre los diferentes frames. Tratar de mostrarle la idea con ayuda de una pequea grfica (sera
mejor descrita como arte-ASCII):
frames.htm
padre
/
\
/
\
/
\
fr1(frame1.htm)
fr2(frame2.htm) nios
Este concepto se puede extender, se pueden crear 'nietos' y sera como as:
frames.htm
padre
/
\
/
\
/
\
fr1(frame1.htm)
fr2(frame2.htm) nios
/ \
/ \
/
\
nieto1 nieto2
'nietos'
Si desea indexar algo en el frame padre desde el frame2.htm, solo pone al padre antes de la
funcin que va a invocar. Direccionar las funciones definidas en frame1.htm desde el frame padre
puede ser hecho ubicando fr1 antes de la funcion a llamar. Por qu fr1? En su script del frame
padre (frames.htm) usted cre scripts diferentes y los llam de forma diferente. Yo escog fr1
para el primer frame. El siguiente paso es fcil. Como es invocado el primer frame si usted desea
indexarlo desde frame2.htm (el cual se mantiene en el segundo frame llamado fr2)? Como puede
ver en mi asombrosa grfica no existe coneccin entre frame1.htm y frame2.htm. Si usted no
puede invocar las funciones desde frame2.htm definidas en frame1.htm. Entonces tiene que
indexarla desde el frame padre. De modo que el index correcto es parent.fr1. Si desea invocar la
funcin hi() desde frame2.htm es solo cuestin de escribir parent.fr1.hi(). Esto es lo que est
hecho en el segundo script en la propiedad 'onClick'.

3 of 4

06/22/2015 10:05 AM

Introduccion a JavaScript - Parte3

https://web.archive.org/web/20041218023718/http...

Oh, de la forma en que usted observ como uso <script language= "JavaScript"> en lugar de
<script language="LiveScript"> en las dos primeras partes no existe una diferencia del todo.
Pero como JavaScript fue implementado dentro del Netscape browser se podria usar la expresion
LiveScript primero. (Este es lenguaje script viejo de Netscape - JavaScript es completamente
similar). Creo que como estamos escribiendo funciones en JavaScript, debemos usar la expresion
JavaScript. (Hay una discusion en la sociedad del JavaScript acerca de lo que es LiveScript. Hay
varias opiniones. Esta es mi version...
Si usted a creado algunos frames y en algunod de estos frames hay algunos links y si alguien
toma un link y los frames no desaparecen, esto es perfecto si el usuario permanece en su pgina
y usted quiere tener una barra de mens. Pero si el usuario salta hacia otra pgina en Internet,
su barra de mens ya no debe ser necesitada. Entonces se pueden borrar los frames antes
creados?
Solo escriba TARGET="_top" a cada link que apunte hacia otro lugar en Internet en el tag <a
href...>. Esto se ve mas o menos as:
<a href="saliendo.html" TARGET="_top">si no quiere quedarse mas en mi
pgina</a>
Por supuesto, se debe agregar TARGET="_top" a cada link que apunte hacia otro lugar. Si cada
link en su pgina apunta hacia otro sitio tambien puede escribir <base target="_top"> en el
head de su pgina de HTML. Esto significa que cada link en la pgina borra los frames.

4 of 4

06/22/2015 10:05 AM

Introduccion a JavaScript - Parte4

https://web.archive.org/web/20041223044252/http...

Ahora quiero mostrarle como escribir cosas en la barra de estado, (la barra enla parte inferior de su
browser donde se ven las URL's) y porsupuesto explicar como trabaja un scroller -aunque ellos ya son
odiados en la escena del JavaScript (mas adelante les dir por quePrimero, cmo se referencia la barra de estado? Este script muestra como se puede escribir un simple texto
en la barra de estado:

Escribir!

Borrar!

No le parece vacansimo? Aqu est el script:


<html>
<head>
<script language="JavaScript">
<!-- Hide
function statbar(txt) {
window.status = txt;
}
// -->
</script>
</head>
<body>
<form>
<input type="button" name="look" value="Escribir!" onclick="statbar('Hola! esta es la barra de estado!');">
<input type="button" name="erase" value="Borrar!" onclick="statbar('');">
</form>
</body>
</html>
Creamos dos botones, ambos invocan la funcin statbar(txt).El 'txt' en los parntesis muestra que la
funcin toma una variable. (Llam esto txt, pudo haber sido algo totalmente diferente). Cuando se estudia
el tag <form>, donde se crean los botones, puede ver que la funcin statbar(txt) es invocada. Pero all no
escribimos txt. Solo escribimos el texto que queremos que nos muestre la barra de estado. Se puede ver de
esta manera: la funcin es invocada y define la variable txt esta toma el valor ('value') que se puso despus
del llamado de la funcin. De esta forma cuando se oprime el boton 'Escribir!', la funcin statbar(txt) es
invocada y txt conserva el valor ('string') 'Hola! esta es la barra de estado!'. Ahora se puede usar la variable
txt muy usualmente. Este mtodo de otorgar variables a las funciones las hace muy flexibles. Observe el
segundo botn. Este invoca la misma funcin, si no tuvieramos la variable, necesitariamos dos funciones
diferentes.
Ahora qu hace la funcin statbar(txt)? Bueno, esto es simple. Usted solo escribe los contenidos de txt a la
variable window.status. Esto es hecho por window.status = txt;. Escrbiendo un valor nulo ('') hace que la
barra se borre. Note que tenemos que usar las comillas simples ' porque usamos comillas dobles " para
definir onClick. El browser necesita saber a quien le pertenecen las comillas, por eso se tiene que alternan
con comillas sencillas y dobles. Creo que esto est completamente calro.
Usted ya sabe que la propiedad onMouseOver de la parte dos de este tutorial:
<a href="tpage.html" onMouseOver="window.status='Otro link estupido...'; return true">
No se molesta porque la barra de estado no borra el texto cuando el puntero del mouse no se apunta alli
mucho tiempo? Tengo una solucin bastante simple. Escribimos una funcin que usa la misma tcnica para
borrar la barra de estado mostrada arriba. Pero cmo podemos invocar la funcin de borrado? No tenemos
una propiedad o un mtodo para detectar si el mouse se est moviendo sobre un link. Instalando un 'timer'
es la solucin.
Ensaye el siguiente script aqu. Slo mueva el puntero sobre l no haga click!
Esto es realmente puro, solo mire la fuente y ver que es ms fcil de lo que se ve a primera vista.
<html>
<head>
<script language="JavaScript">

1 of 3

06/22/2015 10:05 AM

Introduccion a JavaScript - Parte4

https://web.archive.org/web/20041223044252/http...

<!-- Hide
function moveover(txt) {
window.status = txt;
setTimeout("erase()",1000);
}
function erase() {
window.status="";
}
// -->
</script>
</head>
<body>
<a href="dontclck.htm" onMouseOver="moveover('Desapareciendo!');return true;">
link</a>
</body>
</html>
Usted reconocer muchas partes de este script. La funcin moveover(txt) es solo la funcin statbar(txt)
despus de algn trabajo de copiar y pegar sobre ella! Algo similar sucede con la funcin erase(). En el
<body> de la pgina de HTML creamos un link con la ya conocida propiedad onMouseOver. Nuestra funcin
moveover(txt) es invocada con la string 'Desapareciendo!' pasndola por encima de la variable txt. El
window.status toma los contenidos de txt. Lo mismo que la funcin statbar(txt). Aunque la invocacinde la
funcin setTimeout(...) is nueva. Esta funci configura un tiempo de finalizacin. Quin estaba esperando
eso? La funci setTimeout(...) define una hora de arranque y una hora de finalizacin. En nuestro ejemplo
la funcin erase() es invocada despus de 1000 milisegundos (un segundo). Esta es una caracterstica
fantstica! Su funcin moveover(txt) termina luego de que el tiempo es configurado.El browser invoca la
funcin erase() automaticamente luego de un segundo. (Todava sigue pensando en una pgina que diga al
usuario:Cuando usted no haga esto su disco duro ser destruido en 10 segundos! ???)
Luego de que el tiempo de finalizacin a concluido, el tiempo de inicio no arranca de nuevo, claro que se
puede invocar otra vez con la funcin erase(). Esto nos lleva directamente a los scrollers que todos
queremos.
Como usted ya sabe como escribir cosas en la barra de estado y como trabaja la funcin setTimeout, le ser
fcil de entender el scroller.
Presione este botn para ver mi scroller. El script debe cargarse desde el servidor. As que sea paciente si no
lo ve inmediatamente.

Scroller
Un vistazo al script:
<html>
<head>
<script language="JavaScript">
<!-- Hide
var scrtxt="Este es el mensaje, puedes poner lo que quieras, "+
"son diez mil...";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;
function scroll() {
pos++;
var scroller="";
if (pos==lentxt) {
pos=1-width;
}

2 of 3

06/22/2015 10:05 AM

Introduccion a JavaScript - Parte4

https://web.archive.org/web/20041223044252/http...

if (pos<0) {
for (var i=1; i<=Math.abs(pos); i++) {
scroller=scroller+" ";}
scroller=scroller+scrtxt.substring(0,width-i+1);
}
else {
scroller=scroller+scrtxt.substring(pos,width+pos);
}
window.status = scroller;
setTimeout("scroll()",150);
}
//-->
</script>
</head>
<body onLoad="scroll();return true;">
Aqui va su super pagina!
</body>
</html>
Este script usa las mismas funciones (o parte de ellas) que usamos antes. El setTimeout(...) le dice al
'timer' que invoque la funcin scroll() cuando el tiempo es el justo. El scroller se mover un paso mas
adelante. Al comienzo hay muchos clculos pero esto no es muy importante para saber como funciona el
script. Los clculos se hacen para determinar la posicion donde el scroller debe arrancar. Si se ubica solo al
comienzo se deben poner unos espacios en blanco para ubicar el texto correctamente.
Yo le dije al comienzo de mi introduccin que los scrollers no son muy populares, o que si ellos an son
populares, no lo sern por mucho tiempo. Existen muchas razones, aqu menciono algunas, pero son
muchas ms.
Si usted ve este efecto por primera vez es completamente fascinante; pero cuando lo ve por
diezmillonsima vez, no es tan divertido. Bueno esto no es un buen argumento adems puede que est
afectando algn truco usado en sus pginas.

3 of 3

06/22/2015 10:05 AM

Introduccion a JavaScript - Parte5

https://web.archive.org/web/20041223044300/http...

Una tcnica importante de programacin es el uso de arrays. Estos son soportados por cada
lenguaje de programacin en cierta manera. Puede ser que alguna vez usted haya llegado a un
punto donde los arrays lo ayudaran de gran manera. Pero si se mira a travs de la
documentacin que Netscape provee, all no se encuentra nada acerca de los arrays. El problema
es que los arrays no existen en JavaScript Pero porsupuesto yo le puedo mostrar un trabajo
acerca de esto
Primero, qu son arrays? Usted puede ver que los arrays son muchas variables ligadas entre si.
Digamos que quiere 10 variables. Usted puede comenzar con las variables a, b, c... Pero esto es
realmente complicado. Especialmente si usted quiere almacenar 100 o mas variables. Si usted
tiene un array llamado 'MiArray' y este tiene 10 elementos, usted puede direccionar los
diferentes elementos con MiArray[1], MiArray[2], MiArray[3]...(muchos lenguajes de
programacin inician con el cero como primer elemento - pero queremos tener el 1 como
primer elemento porque asi lo vamos a usar en JavaScript). Por ejemplo si usted desea
mantener el nmero 17 en el primer elemento, debe escribir MiArray[1]=17.Usted ve que puede
trabajar con arrays de la misma forma que con variables normales. Pero existen otras
caractersticas. Si usted quiere almacenar el nmero 17 en cada elemento, lo puede escribir de
esta manera:
for (var i=1;<11;i++) MiArray[i]=17
El comando 'for' le dice al computador con que frecuencia el comando siguiente va a ser
ejecutado. El loop de 'for' comienza con i= 1. Primero el computador toma el comando
Miarray[1]= 17. Despus esta i es incrementada por 1 y entonces el comando es MiArray[2]=
17. i se incrementa hasta que tiene el valor de 10. (La expresin 1<11 en el loop de for debe ser
true si i es 11 esta expresin no es mas 'true').
Ahora le mostrar una funcin para comenzar con los arrays. Esta funcin fue discutida el la
Mailing List de JavaScript. (Si se quiere suscribir a la lista de correo envie el comando subscribe
javascript-digest como cuerpo del mensaje hacia majordomo@obscure.org. Usted recibir 1 o
dos archivos cada dia de aproximadamente 20 o 30Kb cada uno. Estos archivos contienen los
correos de la liste de javascript.)
function initArray() {
this.length = initArray.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments[i]
}

Usted no tiene la necesidad de entender esta funcin. Solo tiene que saber como usarla. Si
quiere crear un array con tres elementos solo escriba: var MyArray= new initArray(17,18,19).
17,18,19 son asignados a los elementos 1,2,3. Usted igual podra escribir strings a su array.
Adems austed no le debe importar que letras o tipos son usados var heyho= new
initArrray("Esto","es","vacano").Mezclando diferentes letras no es del todo un problema: var
Mezclados= new initArray(17,"Ho",103).
Ahora iniciar el array 'Mezclados' y mostrar el resultado:
Elemento No. 1: 17
Elemento No. 2: Ho
Elemento No. 3: 103
Este es el script para la salida:

1 of 2

06/22/2015 10:06 AM

Introduccion a JavaScript - Parte5

https://web.archive.org/web/20041223044300/http...

<script language="JavaScript">
<!-- Hide
var Mezclados= new initArray(17,"Ho",103);
document.write("Elemento No. 1: "+Mezclados[1]+"<br>");
document.write("Elemento No. 2: "+Mezclados[2]+"<br>");
document.write("Elemento No. 3: "+Mezclados[3]+"<br>");
// -->
</script>
Ayer estuve escribiendo un pequeo juego. Encontr un problema que tal vez usted encuentra a
veces. Si quiere limpiar una ventana o un frame habr visto que en la documentaci de
Netscape, JavaScript reconoce la funcin 'document.clear()'. Pero si usted implementa esta
funcin nada sucede. La funcin 'document.clear()' parece estar rota en cada plataforma. Gordon
McComb me dio el siguiente script que limpia la ventana como yo quera.
document.close();
document.open();
document.write("<P>");
Usted no tiene que escribir document.write("<P">);. Lo nico importante es que envie algo a la
ventana. Esto trabaja igual de bien con frames.
Ahora estamos mirando un script que le permite navegar a travs de diferentes documentos. De
lo que hablo es de las funciones back() y forward(). Si usted tiene un link de regreso (back) en
su pgina, este no es el mismo botn de regreso que tienen la mayoria de los browsers. Por
ejemplo yo tengo lagunos links de regreso que trabajan como links normales, pero yo se que el
usuario probablemente viene de esa pgina a la cual yo estoy haciendo el link. El botn de
regreso provisto por Netscape Navigator se devuelve un paso atrs en su 'history list'. Esto se
puede hacer igualmente con JavaScript. Solo tome este link para regresar de nuevo! El script
que uso aqu se muestra abajo:
<html>
<body>
<FORM NAME="buttonbar">
<INPUT TYPE="button" VALUE="Atras" onClick="history.back()">
<INPUT TYPE="button" VALUE="Inicio" onClick="location='script.html'">
<INPUT TYPE="button" VALUE="Siguiente" onCLick="history.forward()">
</FORM>
</body>
</html>
Tambin puede escribir history.go(-1) y history.go(1).

2 of 2

06/22/2015 10:06 AM

Introduccion a JavaScript - Parte6

https://web.archive.org/web/20041221063213/http...

Yo recibo una gran cantidad de mensajes acerca del problema de cmo dos pginas pueden ser
cargadas con un solo click del mouse. Basicamente hay tres soluciones diferentes a este
problema: la primera posibilidad es crear un botn el cual invoca una funcin cuando el usuario
lo presiona. Esta funcin carga dos pginas dentro de diferentes frames o abre nuevas ventanas.
ESto no es muy difcil si usted observa los ejemplos en otras partes de esta introduccin.
Tenemos todos los elementos que en realidad necesitamos.

Hey !
Creamos tres frames. El primero es usado para el botn. La primera pgina HTML solo se
necesita para abrir los frames y darles sus respectivos nombres. Se lo mostrar de alguna forma.
(No se si esto le sucede a usted, pero cada vez que un autor de un libro de computacin piensa
que algo no debe ser impreso por ser tan sencillo, es en esa la parte en que tengo problemas.
Asi que aqu voy:)

frames2.htm
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET COLS="295,*">
<FRAMESET ROWS="100%,*">
<FRAME SRC="loadtwo.htm" NAME="fr1">
</FRAMESET>
<FRAMESET ROWS="75%,25%">
<FRAME SRC="cell.htm" NAME="fr2">
<FRAME SRC="cell.htm" NAME="fr3">
</FRAMESET>
</FRAMESET>
</HTML>
loadtwo.htm es cargada al primer frame. Este es el frame con el botn.

loadtwo.htm
<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
function loadtwo(page2, page3) {
parent.fr2.location.href=page2;
parent.fr3.location.href=page3;
}
// -->
</script>
</HEAD>
<BODY>
<FORM NAME="buttons">
<INPUT TYPE="button" VALUE="2 in a row" onClick="loadtwo('frtest1.htm','frtest2.htm')">
</FORM>
</BODY>
</HTML>

1 of 3

06/22/2015 10:06 AM

Introduccion a JavaScript - Parte6

https://web.archive.org/web/20041221063213/http...

La funcin loadtwo() es invocada cuando el botn es presionado. Dos comillas envuelven la


funcin. Si usted observa esta funcin, puede ver que el segundo frame fr2 carga la pgina que
est definida por las primeras comillas en el llamado de la funcin. Si usted tiene diferentes
botones abriendo diferentes pginas, puede reusar esta funcin. Usted solo tiene que pasar las
diferentes URLs (direcciones) de las pginas.
La segunda tcnica usa hyperlinks. Algunos ejemplos flotando por Internet tienen algo como
esto:
<a href="su_link.htm onClick="sufuncin()">
. Esta tcnica parace no trabajar en todas las plataformas. Asi que mejor no la use. No estoy
seguro si se supone que trabaja del todo pero no tenemos que preocuparnos porque existe otro
mtodo con el cual podemos implementar esto. Podemos invocar una funcin JavaScript de la
siguiente forma:
<a href="javascript:mi funcin()">Mi Link</a>
Esto es realmente fcil y parece funcionar bien en todos los browsers. Usted solo tiene que
escribir javascript: y el nombre de su funcin como su 'link'. Si usted invoca la funcin
'loadtwo()' del ejemplo de arriba, puede actualizar dos frames con un solo click sobre un
hyperlink.
La tercera tcnica para cargar dos pginas con un solo click del mouse puede ser combinada con
botones o con hyperlinks normales. Podemos hacer esto con la segunda tcnica mostrada arriba
pero el aprovechamiento de esta puede ser inapropiada algunas veces. Lo que podemos hacer es
cargar una pgina HTML a un frame. Esto es hecho por:
<a href="getfr2.htm" target"fr2">Click aqui!</a>
Esto ya lo sabmos. Lo que hacemos ahora es agregar la propiedad 'onLoad' al archivo cargado.
El archivo 'getfr2.htm' puede lucir asi:
<HTML>
<BODY onLoad="parent.fr3.location.href='getfr3.htm'; return true;">
bla bla bla
</body>
</html>
Porsupuesto usted debe agregar esto a cada documento que sea cargado dentro del segundo
frame.
Otro problema visto frecuentemente es el de cmo pueden ser cargadas nuevas pginas a una
nueva ventana. La ventana se abrir cuando el usuario haga click en un link. Usted solo tiene
que agregar la propiedad 'target' a su tag de nuevo. Esto luce asi:
<a href="cualquier_sitio.html" target="Ventana Fuente">Vamos!</a>
Ahora miraremos diferentes operadores que podremos usar en JavaScript. Los operadores son
una tcnica poderosa para hacer mas pequeo y a la vez mejorar su script. Por ejemplo, usted
quiere probar si una variable x es mas grande que 3 y quiere ver si es mas pequea que 10.
Usted debera escribirlo en esta forma:
if (x>3)
if (x<10)

2 of 3

06/22/2015 10:06 AM

Introduccion a JavaScript - Parte6

https://web.archive.org/web/20041221063213/http...

haceralgo();
La funcin 'haceralgo()' es invocada cuando x es mayor que 3 y cuando x es menor que 10.
Existe una forma ms fcil de escribir este pensamiento:
if (x>3 && x<10) haceralgo();
&& es llamado el operador AND. Entonces hay un operador OR. Usted puede usar esto por
ejemplo si usted quiere asegurarse de que una variable x es igual a 5 y otra variable y es igual a
17.
if (x==5 || y==17) haceralgo();
La funcin haceralgo() es invocada cuando x==5 o y==17. Esta se invoca tambin si ambas
comparaciones son verdaderas.
Las comparaciones son hechas por el operador == en JavaScript (por supuesto existen tambin
<,>,<= and >=). Si usted sabe C/C++, esto es lo mismo. Un simple = es usado para almacenar
el valor de una variable. (Si usted sabe PASCAL esto puede ser un poquito confuso. Asignar el
valor a una variable en PASCAL es hecho por medio de := y comparaciones con un simple =)
Si quiere ver si una variable no es igual a cierto nmero, esto puede ser un poquito complicado
sin operadores. Esto es hecho con un simple !=. De modo que esto lucir&iaacute;a como esto
por ejemplo: x != 17.
Hay muchos mas operadores interesantes con los cuales puede hacer sus programas mucho mas
eficientemente. Mire la documentacin que brinda Netscape para obtener una visin completa de
todos los operadores que puede usar en JavaScript.

3 of 3

06/22/2015 10:06 AM

JavaScript

https://web.archive.org/web/20041223044218/http...

Las formas (Form Inputs) son muy importantes para algunas pginas web. La entrada de las
formas es enviada al servidor la mayora de las veces. Primero quiero mostrale como se puede
validar una forma. Entonces daremos un vistazo a las posibilidades de dar informacin al cliente
con JavaScript o con HTML.
Primero que todo, queremos crear un simple script. La pgina de HTML contendr dos elementos
de texto. El usuario tiene que escribir su nombre dentro del primer elemento y su direccin
e-mail dentro del segundo. Usted puede escribir cualquier cosa dentro de algn elemento de la
forma y luego presionar el botn. Tambin intentelo no escribiendo nada y presionando el botn.
Escribe su nombre:

Comprobacin
Escriba su direccin e-mail:

Comprobacin
Con respecto a la entrada del primer elemento, usted recibir un mensaje de error si no escribe
nada. Cualquier entrada es vista como vlida. Porsupuesto, esto no previene al usuario de
escribir un nombre errado. El browser inclusive acepta nmeros. De tal manera que si usted
escribe 27, el mensaje ser 'Hola 27!'.
La segunda forma es un poquito mas sofisticada. Trate de escribir una entrada simple, como su
nombre por ejemplo. No trabajar (a menos de que usted tenga una @ en su nombre...). El
criterio para aceptar la entrada como una direccin e-mail vlida es la @. Una simple @ lo har
funcionar, aunque esto no es bastante significativo. Toda direccin e-mail en Internet tiene una
@, por esto es apropiado buscar una @ aqu.
Como luce el script para las dos 'form input' y para la validacin de estos? Aqu va:
<html>
<head>
<script language="JavaScript">
<!-- Hide
function test1(form) {
if (form.text1.value == "")
alert("Por favor escriba su entrada!")
else {
alert("Hola "+form.text1.value+"! Su entrada es correcta!");
}
}
function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("Direccion e-mail no valida!");
else alert("OK!");
}
// -->
</script>
</head>
<body>
<form name="first">

1 of 3

06/22/2015 10:06 AM

JavaScript

https://web.archive.org/web/20041223044218/http...

Escriba su nombre:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Comprobacion" onClick="test1(this.form)">
<P>
Escriba su direccion e-mail:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Comprobacion" onClick="test2(this.form)">
</body>
Primero observemos el cdigo HTML en la seccin 'body'. Solamente creamos dos elementos de
texto y dos botones. Los botones invocan la funcin test1(...) o test2(...) dependiendo de que
botn es presionado. Pasamos this.form a las funciones para que sea posible direccionar los
elementos correctos en las funciones mas adelante.
La funcin test1(form) comprueba si la entrada es vaca. Esto es hecho por medio de form.text1.
Para ver si la entrada es vaca la comparamos con "". Si la entrada iguala a "" entonces nada fue
escrito. El usuario obtendr un mensaje de error. Si algo es escrito el usuario recibir un ok.
El problema aqu es que el usuario puede entrar solo espacios. Esto es visto como una entrada
vlida! Si usted tambin quiere, usted puede porsupuesto mirar estas posibilidades y excluirlas.
Creo que con la informacin dada aqu esto es completamente fcil.
Ahora miremos la funcin test2(form). Esta funcin de nuevo compara la entrada con el
equivalente a "" para estar seguro de que algo a sido escrito. Pero hemos agregado algo al
comando 'if'. El || es llamado el operador OR. Usted aprendio acerca de ellos en la seccin 6 de
esta introduccin.
El comando if chequea si cualquiera de las dos comparaciones, la primera y la segunda son
reales. Si por lo menos una de ellas es verdadera el comando if lo toma como real y el siguiente
comando ser ejecutado. Esto significa que usted obtendr un mensaje de error si no escribi
nada o si no hay una @ en su entrada. La segunda operacin en el comando if es vista si la
entrada contiene una @.

Cules son las diferentes posibilidades que existen de enviar el contenido de una forma?. La
manera ms fcil de enviar el contenido de una forma es via e-mail. Este es el mtodo que
vamos a observar un poco ms de cerca. Si usted desea que la gente le envie sus comentarios
sin utilizar e-mail y que el servidor manipule la informacin por si solo, deber utilizar CGI
(Common Gateway Interface). Usted necesitar CGI si por ejemplo desea tener elementos de
busqueda en su pgina como YAHOO en donde el usuario recibe un resultado rpido despus de
dar su entrada en una FORMA. El no tiene que esperar hasta que la gente lea su entrada,
manipule la informacin y le envien una respuesta. Esto es hecho automaticamente por el
servidor. JavaScript no posee la funcionalidad de hacer cosas como esta. Inclusive si usted crear
un 'guestbook', no puede hacer que el servidor adicione informacin a una pgina HTML con
JavaScript. Solo CGI es capaz de hacer esto por el momento. Por supuesto usted puede crear un
guestbook respondiendo a la gente via e-mail. Aunque usted tiene que escribir toda la
informacin que recibir el usuario. Esto es perfecto si usted no espera recibir por lo menos cien
e-mails al da.
Este script es puro HTML. JavaScript no es necesitado aqu! Solo, si usted desea chequear la
entrada en la forma como lo vimos atrs. Hay que tener en cuenta que el comando mailto no
funciona para todos los browsers.
<FORM METHOD=POST ACTION="mailto:aqui_va@su_direccion_e-mail">
<H3>Le gusta esta pagina?</H3>
<INPUT NAME="choice" TYPE="RADIO" VALUE="1">No del todo.<BR>
<INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>Es una perdida de tiempo.<BR>
<INPUT NAME="choice" TYPE="RADIO" VALUE="3">El peor sitio en la red.<BR>

2 of 3

06/22/2015 10:06 AM

JavaScript

https://web.archive.org/web/20041223044218/http...

<INPUT NAME="submit" TYPE="SUBMIT" VALUE="Send">


</FORM>
Usted obtendr el resultado via e-mail haciendo esto. El_nico problema es que recibir un mail
que puede parecer un poco encriptado a primera vista. Algunas veces todos los espacios son
llenados con un signo '+' y otras veces son llenados con '%20'.
Es+algo+mas+o+menos+asi.Creo que existen algunos buenos programas en la Red que
pondran el mensaje en una forma mas agradable.

Existe otra cosa interesante que pueden hacer sus elementos de FORMAS un poco mas
amigables. Usted puede definir cual elemento es enfocado al comienzo. O usted puede decirle al
browser que enfoque la forma donde la entrada del usuario fue errnea. Esto significa que el
browser pondr el cursor en el elemento de la forma especificada de modo que el usuario no
tiene que hacer click en esta antes de escribir algo. Esto lo puede hacer mediante el siguiente
script:
function setfocus() {
document.first.text1.focus();
return;
}
Esta funcin enfocara el primer elemento de texto en el script que mostr arriba. Se debe
especificar el nombre completo de la FORMA la cual aqui es llamada first y el nombre del simple
elemento de la forma, aqu text1. Si usted quiere enfocar este elemento cuando la pgina es
cargada, es necesario agregar la propiedad onLoad a su tag <body>. Este luce mas o menos as:
<body onLoad="setfocus()">

3 of 3

06/22/2015 10:06 AM

JavaScrip

https://web.archive.org/web/20041212173307/http...

Los sitios
Webmaster

Contenidosentuweb.com
Zona ADSL Wi-Fi de Telefnica
Curso a distancia de Ofimtica

buscar en la web

Resea historica
Originalmente denominado LiveScript, fue desarrollado por Netscape Communications para crear
aplicaciones de Internet en el cliente.
Ms o menos en la misma poca, Sun Microsystems lanz el lenguaje de programacin JAVA
(que originalmente fue llamado Oak), el que adquiri rapidamente popularidad, asi que por
razones netamente comerciales se le cambia el nombre a JavaScript.
La versin 1.0 apareci con la versin 2.0 del navegador de la misma empresa y mas tarde es
incorporado en el Explorer 3.0 de MiscroSoft. Poco tiempo despus aparece tambien el VBScript
(Visual Basic Script) de Microsoft, un buen competidor.

Que es un script?
Un script es una secuencia de ordenes, en un determinado lenguaje, que puede ser ejecutado
por el cliente Web, en l se visualiza el documento en que est contenido. Actuamente los dos
lenguajes de script mas usados son JavaScript y VBScript. La inclusion de scripts en los
documentos HTML hace que stos sean ms inteligentes. El contenido se genera en forma
dinmica, mientras que los valores introducidos en los formularios pueden comprobar
localmente, sin necesaidad de contar con un servidor y emplear un cierto tiempo en ello. A pesar
del nombre, JavaScript, este lenguaje tiene poco que ver con JAVA.

Por qu JavaScript ?
Actualmente los navegadores Web mas usados son Netscape Navigator e Internet Explorer,
ambos soportan JavaScript, pero solo el Intenet Explorer soporta VBScript.
Ultima modificacin: 06/22/2015 10:07:54 , Fecha en formato americano.

1 of 1

06/22/2015 10:08 AM

JavaScrip

https://web.archive.org/web/20041205222302/http...

Conceptos bsicos
JavaScript es un lenguaje interpretado en el cliente por el navegador al momento de cargarse la
pgina, es multiplataforma, orientado a eventos con manejo de objetos, cuyo cdigo se incluye
directamente en el mismo documento HTML.
Hasta entonces ya se usaba HTML y JAVA, pero la aparicin del JavaScript produjo una
importante revolucin, ya que di al usuario la posibilidad de crear aplicaciones "on-line" ,es
decir, modificar pginas web en tiempo real, sin usar CGIs.

Caracteristicas
Es simple, no hace falta tener conocimientos de programacin para poder hacer un
programa en JavaScript.
Maneja objetos dentro de nuestra pgina Web y sobre ese objeto podemos definir
diferentes eventos. Dichos objetos facilitan la programacin de pginas interactivas, a la
vez que se evita la posibilidad de ejecutar comandos que puedan ser peligrosos para la
mquina del usuario, tales como formateo de unidades, modificar archivos etc.
Es dinmico, responde a eventos en tiempo real. Eventos como presionar un botn, pasar
el puntero del mouse sobre un determinado texto o el simple hecho de cargar la pgina o
caducar un tiempo. Con esto podemos cambiar totalmente el aspecto de nuestra pgina al
gusto del usuario, evitndonos tener en el servidor un pgina para cada gusto, hacer
calculos en base a variables cuyo valor es determinado por el usuario, etc.

Diferencia con JAVA


La principal diferencia es que JAVA es un lenguaje compilado, mientras que JavaScript es
interpretado.
JAVA al compilar crea programas independientes, llamados APPLETS que se invocan desde
una pgina Web, mientras que el cdigo de JavaScript va incluido en la pgina.
Esta orientado a objetos de forma limitada ya que no maneja los conceptos de clase ni
herencia.
En JavaScript no es necesario declarar el tipo de variable, ni debe existir las referencias a
objetos antes de ejecutarlos, por lo que se hable de una ligazn dinmica a diferencia de la
ligazn esttica del JAVA.

Principales aplicaciones
Si bien hoy en da, JavaScript, es un lenguaje muy usado, sus principales aplicaciones son:
Responder a eventos locales dentro de la pgina, como apretar un botn,
La realizacin de clculos en tiempo real
La validacin de formularios dentro de una pgina.
La personalizacin de la pgina por el usuario, que le permitir tener una pgina web a su
medida.
La inclusin de datos del propio sistema, como son la hora y la fecha.
Aunque segn pasa el tiempo sus aplicaciones se van incrementando.

Donde incluirlo

1 of 3

06/22/2015 10:08 AM

JavaScrip

https://web.archive.org/web/20041205222302/http...

Antes siquiera de que conozcamos la sintaxis o una primera orden de JavaScript, debemos saber
primero cmo se incluye un script dentro de un documento HTML.
El cdigo JavaScript se inserta directamente en nuestra pgina HTM. Hay cuatro (4) maneras de
hacerlo:

1. En el cuerpo del documento


Es decir entre los comandos <BODY> y </BODY> usando el comando SCRIPT
<HTML>
<HEAD>
<TITLE>ttulo</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!-- escondemos el cdigo>
document.write("Hola que tal");
// hasta aqui escondo -->
<SCRIPT>
</BODY>
</HTML>
Este cdigo se ejecuta inmediatamente al cargar la pgina y lo que produce es un texto sobre la
pgina, para ello use el metodo write del objeto document, que representa al documento
actual.
Nota que us un comentario <!-- --> para ocultar el cdigo a los navegadores que no soportan
JavaScript.

2. En archivo aparte
En este caso todo el cdigo del script esta situado en otro archivo y se hace una llamada.
<HTML>
<HEAD>
<TITLE>ttulo</TITLE>
</HEAD>
<BODY>
<SCRIPT SRC=cdigo.js>
<SCRIPT>
</BODY>
</HTML>
Nota que aqui no fue neceario esconder ningun cdigo y que los navegadores que no soporte el
comando SCRIPT simplemente lo ignoraran.

3. Usando manejadores de evento


Los comandos de JavaScript son evaluados inmediatamente al cargarse la pgina. Las funciones
son almacenadas, pero no ejecutadas, hasta cierto evento.
<HTML>
<HEAD>
<TITLE>ttulo</TITLE>
<BODY>

2 of 3

06/22/2015 10:08 AM

JavaScrip

https://web.archive.org/web/20041205222302/http...

<A HREF="" onMouseOver="window.status='Figura';return true">


<IMG SRC=fig.gif></A>
</BODY>
</HTML>
Nota que aqui es un evento el que dispara.

4. Haciendo una llamada a funcin


Dentro de la cabecera, despues del ttulo. Es decir, entre los comandos </TITLE> y </HEAD> y
luego la llamada a la funcin en el cuerpo.
<HTML>
<HEAD>
<TITLE>ttulo</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!-- escondemos el cdigo>
funcin llamada(x){
alert("Le dije que NO!"+x);
}
// hasta aqui escondo -->
<SCRIPT>
</HEAD>
<BODY>
No haga Clic <A HREF="JavaScript:llamada('Curioso!')">AQUI</A>
</BODY>
</HTML>
Observa que aqui se defini la funcin en la cabecera, pero recin se ejecuta al hacer clic en el
enlace, que es el evento que llama a la funcin a la cual se le para un parmetro.
NOTA: Excepto en texto encomillado, JavaScript es sensible a maysculas y minsculas, por lo
que tendrs que tener el cuidado al usar por ejemplo document.write de escribirlo asi, en
minsculas o no se interpretar. Cualquier error simplemente es ignorado. Se puede usar la
comilla simple para los valores de atributos.

3 of 3

06/22/2015 10:08 AM

JavaScript

https://web.archive.org/web/20041205213859/http...

Tipos de datos
JavaScript acepta diferentes tipos de datos:
Tipo

Descripcin

Nmeros Pueden ser nmeros enteros o reales

Ejemplo
47 3.1416

Cadenas

Cuanquier cosa que este encerrado entre comillas. Pueden ser


simples o dobles

"Hola que tal..."

Lgicas

tambin llamados Booleanos, son las que toman uno de dos


valores de verdadero o falso

true o false

Nulas

Es cuando la variable no toma ningn valor

null

Valores y constantes
Enteros Octales (base 8)
Tipo

Descripcin

Ejemplo

Nmeros
Enteros Decimales Es una secuencia de digitos (0-9) que no comiencen con
1999
(base 10)
0
Enteros
Hexadecimales
(base 16)

Una secuencia de digitos (0-9) y letras (A-F) que


comienza con 0x

Secuencia de
digitos (0-7) que
comiencen con 0

0777

Punto flotante

Puede tener un entero decimal, un punto, una fraccion


(otro numero decimal), un exponente que consiste en la 3.14159, -2e4,
letra e seguida de un entero, el cual puede llevar un
5e-12
signo (+ o -).

0xE477

Cadenas
Cadenas de
caracteres

tambin pueden
usar los
siguientes
caracteres

Consta de uno o mas caracteres encerrados entre


comillas simples o dobles

"Hola", '1999'

\b

indica un retroceso (bachspace)

\f

indica un avance de pagina (Form feed)

\n

Indica nuva linea (New Line)

\r

Indica un retorno de carro (Carruage return)

\t

Indica un tabulador (Tab)

\"

se puede incluir comillas. Ej: "Jos \"Chemo\" del Solar"


lgicas

lgicas

Verdadero o falso

true o false
Nulas

Nulas

1 of 4

Es cuando la variable no toma ningn valor

null

06/22/2015 10:09 AM

JavaScript

https://web.archive.org/web/20041205213859/http...

Expresiones
Es cualquier conjunto valido de constantes, variables y operadores que al evaluarse dan un nico
valor del tipo numerico, cadena o lgico.

Variables
Las variables son usadas para almacenar valores a ser evaluados.
En JavaScript no es necesario declarar las variables ya que automaticamente se convierten al
tipo necesario mientras se ejecutan los comandos. Por ejemplo podemos definir indica=true y
luego asignarle un valor de otro tipo indica="prendido"
El nombre de una variable debe empezar por una letra o por el smbolo de subrayado ( _ ). Lo
que siga a esto es indiferente. Pero diferencia maysculas de minsculas.
Por ejemplo podramos definir como variables:
Nombre
_Opcin15
mes3
Estaran mal definidas las siguientes variables:
7opcion
&inicio
nombre
Adems tambin estara mal si pusisemos como variable:
goto
new
null
Debido a que son palabras reservadas del lenguaje.
Una variable puede tener alcance local o global. Cuando es global se puede emplear en
cualquier parte del programa. Las locales solo se pueden usar en la funcion donde fueron
definidas.
Para crear una variable local le antepondremos la palabra var.
Un ejemplo del uso de variables en JavaScript es el siguiente:
<HTML>
<HEAD>
<TITLE>Ejemplo</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!-- Ocultacin a antiguos navegadores
var saludo = 'Hola que tal...'
var despedida = 'Si se portan mal...'
document.write ( saludo + ' Yo tambin ronco de noche.' + <br>)
document.write ( despedida + ' inviten.' )
// Fin de la ocultacin-->
</SCRIPT>

2 of 4

06/22/2015 10:09 AM

JavaScript

https://web.archive.org/web/20041205213859/http...

</BODY>
</HTML>
Visualizame

Variables tipo matries


La sintaxis para crear la matriz es la siguiente: nombre=new Array(elementos), posteriormente
para usarla se usa nombre[# de elemento].
Una forma de crear las matrices de forma automatica es con el siguiente codigo:
<SCRIPT LENGUAGE=JavaScript>
function HacerMatriz(n)
{this.length=0;
for (var i = 1; i < n ; i++)
this[i]=0;
return this;
}
</SCRIPT>

Operadores

Aritmeticos
+

Adicion

Sustraccion

Multiplicacion

Division

Modulo

++

Incremento

--

Decremento

Negacion
Sobre BITs
Logicos
Comparacion
Asignacion:

3 of 4

x=y

Asigna a x el valor de y

x+=y

Asigna a x el valor de x+y

x-=y

Asigna a x el valor de x-y

x*=y

Asigna a x el valor de x*y

x/=y

Asigna a x el valor de x/y

x%=y

Asigna a x el valor de x%y

x<<=y

Asigna a x el valor de x=x<x<y

x>>y

Asigna a x el valor de x=x>x>y

06/22/2015 10:09 AM

JavaScript

https://web.archive.org/web/20041205213859/http...

x>>>=y

Asigna a x el valor de x=x>x>x>y

x&=y

Asigna a x el valor de x=x&y

x^=y

Asigna a x el valor de x=x^y

x|=y

Asigna a x el valor de x=x|y


Cadena
Cuando se opera un valor de cadena con un numerico, el
resultado es una cadena.

4 of 4

06/22/2015 10:09 AM

JavaScript

https://web.archive.org/web/20041205215037/http...

Funciones incorporadas
JavaScript incluye las siguientes funciones. que no son metodos de ningun objeto sino propias
del lenguaje:
eval
Trata de evaluar una cadena y delvolver un valor numerico, si el argumento es una expresion, la
expresion se evalua, si el argumento consiste en uno o mas comandos, se ejecutan.
Sintaxis: eval(cadena)
parseFloat
Convierte una cadena a un numero en punto flotante. Si se encuentra un caracter que no es
numero, signo (+ o -), punto decimal o exponente, la funcion ignora la cadena a partir de esa
posicion y la evalua hasta el caracter anterior. Si el primer caracter no se puede convertir, la
funcion devuelve uno de estos valores: o en las plataformas Windows y "NaN" (Not a Number)
para otras plataformas.
Sintaxis: parseFloat(cadena)
parseInt
Convierte una cadena a un entero en la base especificada. Si no se especifica la base o se
especifica cmo 0, se opta por lo siguiente: Si la cadena comienza con "0x", la base es 16
(hexadecimal), si la cadena empieza con 0, la base es 8 (octal), si la cadena comienza con otro
valor, la base es 10 (decimal). Si se encuentra un caracter que no es numerico, la funcion ignora
la cadena a partir de esa posicion y la evalua hasta la anterior. Si el primer caracter no se puede
convertir, la funcion devuelve uno de estos valores: 0 para plataformas Windows y "NaN" (Not a
Number) para otras plataformas.
Sintaxis: parseInt(cadena [,base])
isNaN
Evalua un argumento para determinar si es "NaN", en plataformas UNIX, devolviendo un valor
Booleano true o false.
Sintaxis: isNaN(valor prueba)
escape
Devuelve el codigo ASCII de un argumento en el juego de caracteres ISO Latin-1
Sintaxis: escape("cadena")
unescape
Devuelve la cadena ASCII para el o los valores especificados. Donde la cadena contiene
caracteres en una de las formas especificadas: "%entero", donde entero es un numero entre 0 y
255 o "hex", donde hex es un numero hexadecimal entre 0x0 y FxF.
Sintaxis: unescape("cadena")

1 of 2

06/22/2015 10:09 AM

JavaScript

https://web.archive.org/web/20041205215037/http...

Funciones de usuario
JavaScript permite al usuario definir sus propias funciones, las cuales pueden o no tomar
parametros y pueden o no devolver valores.
FUNCTION
Se usa para declarar la funcion. Hay que asignarle un nombre y hasta un maximo de 255
parametros.
Sintaxis:
function nombre ([parametro1][,parametro2]...[,parametron]){instrucciones }
RETURN
Se usa para especificar el valor devuelto por una funcion.
Sintaxis:
return expresin
ARGUMENTS
Es una matriz que contienelos parametros parados a la funcion, en orden: el primer parametro
es [0] el siguiente es [1] etc.
Sintaxis:
funcin.arguments[indice]
LENGTH
Define el nuemro de parametros pasdos a la funcin.
Sintaxis:
funcin.arguments.length

Ejemplo
Crearemos una funcin que efectua la suma de los valores pasados como parametro y devuelva
el resultado.
<SCRIPT LANGUAGE=JavaScript>
function Sumar (a,b) {return a+b}
document.write("La suma de 4+7 es ",Sumar(4,7))
</SCRIPT>
ver el ejemplo

2 of 2

06/22/2015 10:09 AM

JavaScript

https://web.archive.org/web/20041205215328/http...

Instrucciones
El JavaScript posee un juego de instrucciones compacto que permite aadir muchisima
interactividad a las paginas Web.

Condicional
Permiten efectuar determinadas acciones en base a una condicion logica.
Sintaxis:
if (condicion) {instrucciones }
[else {instrucciones }]

Bucles
Un bucle es un conjunto de comandos que se ejecutan hasta que se cumple una condicin
especificada.
FOR
Permite un blucle repetitivo sabiendo de antemano el numero de ejecuciones que sera necesario.
Sintaxis:
for ([inicial;][final;][incremento]) {instrucciones }
WHILE
Permite un bucle repetitivo cuyo numero de repeticiones depend de una condicion. Sintaxis:
while (condicion) {instrucciones }
Control de bucle
Tenemos dos comando para control de bucle: break que termina el bucle y transfiere el control
del programa a la siguiente instruccion a continuacion del bucle. continue interrumpe la
ejecucion de comandos y regresa el control al inicio del bucle.

Manipulacion de objetos
Hay varias intrucciones para manejar objetos
NEW
Permite crear un nuevo objeto de un tipo definido por el usuario.
Sintaxis:
variable=new tipo (parametri1 [,parametro2]...[,parametro n])
this
Se usa para definir al objeto en uso, por lo general el que efectua una llamada, al definir un
mtodo.
Sintaxis:
this[.propiedad]

1 of 2

06/22/2015 10:09 AM

JavaScript

https://web.archive.org/web/20041205215328/http...

FOR..IN
Itera una variable a lo largo de todas las propiedaes de un objeto, para cada propiedad.
JavaScript ejecuta las instrucines especificadas.
Sintaxis:
for (variable in objeto) {instrucciones }
WITH
Establece el objto por omisin de una serie de instrucciones; si no especifica en las propiedades
el abjeto, se asume el indicado con with.
Sintaxis:
with (objeto) {instrucciones }

Comentarios
Los comentarios son lineas que cooca el autor para propsitos explicativos deltro de un
programa. El insterprete ignora los comentarios.
Comentarios de una linea
Sintaxis:
// comantario
Comentarios de varias lineas
Sintaxis:
/* comantario */

2 of 2

06/22/2015 10:09 AM

Manual de JavaScript

https://web.archive.org/web/20041205084525/http...

Objetos
Existen objetos predefinidos, cada uno con distintas propiedades, metodos y manejadores de
eventos. A diferencia de JAVA aqui no se puede derivar clases, por los que se habla de
unajerarquia de instancia.
Los objetos en javaScript los podemos clasificar en 4 niveles:
1.
2.
3.
4.

window, navigator, Math, String y Date


document, history, location, Frame y frames
Form, Anchor y link
Button, Checkbox, Hidden, Password, Radio, elements, Select, Text, Textarea, Submit y
Reset.
Todo el segundo nivel pertenece a window.
Todo el tercer nivel pertenece a document.
Todo el cuarto nivel pertenece a form

Primer nivel

Window

Propiedades

1 of 13

Es el objeto de nivel superior para cada grupo de objetos


document, location e history.
defaultStatus

Mensaje por omision en la barra de estado de


la ventana

document

como document

Frame

como Frame

frames

Es un arreglo que contiene todos los recuadros


de la ventana

length

Indica el numero de recuadros de la ventana


madre

location

como location

name

refleja el argumento nombre con que se creo


la ventana

parent

Es un sinonimo del argunmento nombre y se


refiere a una ventana con recuadros

self

Es un sinonimo del argumento nombre y se


refiere a la ventana en uso

status

Especifica un mensaje a presentar en la barra


de estado de la ventana

top

Es un sinonimo del argumento nombre y se


refiere a una ventana de nivel superior del
navegador.

06/22/2015 10:09 AM

Manual de JavaScript

https://web.archive.org/web/20041205084525/http...

window

Es un sinonimo del argumento nombre y se


refiere a la ventana en uso

open

abre una nueva ventana del navegador

close

cierra la ventana indicada

alert

muestra una caja de dialogo de peticion con un


mensaje y un campo para entrada de datos.
prompt(mensaje [,valor de omision])

Metodos
confirm
setTimeout

evalua una expresion despues de transcurrido


un tiempo en milisegundos

clearTimeout
Manejadores de onLoad
evento
onUnload

se ejecuta cuando el navegador termina de cargar


una ventana o todos los recuadros indicador en
<FRAMESET>

Permite trabajar con fechas y horas. Para crear nuevos objetos


se puede usar:
Date

Propiedades

Metodos

2 of 13

variable=new Date()
variable=new Date("mes dia ao
horas:minutos:segundos")
variable=new Date(ao,mes,dia)
variable=new Date(ao,mes,dia,horas,minutos,segundos)
ninguna
getDate

el dia del mes (1 a 31)

getDay

el dia de la semana (0=dom,


1=lun...6=sabado)

getMonth

el mes en numeros (0=ene,


1=feb...11=dic)

getYear

el ao con dos digitos

getHours

la hora (0 a 24)

getMinutes

los minutos (0 a 59)

getSeconds

los segundos (o a 59)

06/22/2015 10:09 AM

Manual de JavaScript

https://web.archive.org/web/20041205084525/http...

los milisegundos trascurridos desde el


01-01-1970

getTime

getTimezoneoffset diferencia horaria con GMT en minutos


Sintaxis: variable.metodo()
setDate

Establece el dia del mes (1 a 31)

setMonth

Establece el mes del ao (1 a 11)

setYear

Establece el ao a partir de 1900

setHours

Establece la hora del dia (0 a 23)

setMinutes

Establece los minutos (0 a 59)

setSeconds

Establece los segundos (0 a 59)

setTime

Establece el valor del objeto Date, en


milisegundos a partir de las 0:00:00 del 1
de enero de 1970
Sintaxis: variable.metodo(valor)

Manejadores
de evento
String
Propiedades

Metodos

3 of 13

toGMTString

Convierte un objeto Date a una cadena


usando un formato GMT para Internet

toLocaleString

Convierte un objeto Date a una cadena


usando el formato local

parse

Convierte una cadena representando una


fecha al tiempo en milisegundos a partir de
0:00:00 del 1 de enero de 1970

UTC

Convierte una fecha al tiempo en


milisegundos a partir de las 0:00:00 del 1
de enero de 1970

ninguno
Es una cadena de caracteres encerrados entre comillas
simples o dobles. Es un objeto basico en javascript.
length. Indica la longitud de la cadena. Sintaxis:
cadena.anchor(nombre)
anchor

Crea un marcador HTML

big

Hace que una cadena se muestre con tipos


grandes, como si estuviera entre comandos
<BIT>

06/22/2015 10:09 AM

Manual de JavaScript

https://web.archive.org/web/20041205084525/http...

blink

Hace que una cadena parpadee, como si


estuviese entre comandos <BLINK>

bold

Hace que una cadena este en negritas, como si


estuviese entre comandos <B>

charAt

Devuelve el caractere en la posicion indicada (0


a length-1) de la cadena

fixed

Hace que la cadena se muestre como si


estuviese entre comandos <TT>

fontcolor

Hace que la cadena se muestre en el color


indicado, como si estuviese entre comandos
<FONT COLOR=>

fontsize

Hace que la cadena se muestre del tamao


indicado, como si estuviese entre comandos
<FONT SIZE=>

indexOf

Devuleve la posicion dentro de la cadena donde


se encuentra el texto de busqueda. De iquierda
a derecha.

italics

Hace que la cadena se muestre en cursiva,


como si estuviese entre comandos <I>

lastIndexOf

Devuelve la ultima posicion dentro de la


cadena en que se encuentra el texto de
busqueda. De derecha a izquierda.

link

Crea un enlace de hipertexto que apunta a otro


URL

small

Hace que un cadena se muestre con tipos


pequeos, como si estuviera entre etiquetas
<SMALL>

strike

Hace que una cadena se muestre atravesada,


como si estuviese entre etiquetas <STRIKE>

sub

Hace que una cadena se muestre en subindice,


como si estuviese entre etiquetas <SUB>

substring

devuelve una subcadena de la cadena indicada,


entre las posiciones indicadas.

toLowerCase Devuelve la cadena convertida en minusculas


toUpperCase Devuelve la cadena convertida en mayusculas
Manejadores de
ninguno
evento

4 of 13

06/22/2015 10:09 AM

Manual de JavaScript

Location

https://web.archive.org/web/20041205084525/http...

Contiene informacion acerca del URL actualmente en uso.


Especificar location sin propiedades devuelve el URL completo.
La forma URL es la siguinete: protocolo/servidor:puerto ruta
buscada marcador

Propiedades

hash

Especifica el nmbre de un marcador dentro del URL

host

Especifica la posicion servidor:puerto del URL

hostname

Especifica el servidor y nombre de dominio o


numero IP del URL

href

Especifica el URL completo.

pathname Especifica la posicion ruta del URL.


port

Especifica el puerto empleado por el servidor para


las comuniciones.

protocol

Especifica el principio del URL hasta los dos puntos,


incluidos.

search

Especifica un parametro de busqueda.

Metodos

ninguno

Manejadores
de evento

ninguno

Math

Propiedades

es un objeto predefinido que contiene propiedades y metodos


para onstantes y funciones matematicas.
E

La constante de EULER. Aproximadamente 2.7818

LN2

El logaritmo natural de 2. Aproximadamente


0.693

LN10

El logaritmo natural de 10. Aproximadamente


2.302

LOG2E

El logaritmo en base 2 de e. Aproximadamente


1.442

LOG10E

El logaritmo vulgar de e. Aproximadamente 0.434

PI

La constante PI. Aproximadamente 3.14159

SQRT1_2 La raiz cuadrada de 1/2. Aproximadamente 0.707


SQRT2

La raiz cuadrada de 2. Aproximadamente 1.414

Metodos
Manejadores de
evento

5 of 13

ninguno

06/22/2015 10:09 AM

Manual de JavaScript

Navigator

https://web.archive.org/web/20041205084525/http...

appCodeName

Especifica el nombre en codigo


del navegador

appName

Especifica el nombre del


navegador

appVersion

Especifica informacion de la
version del navegador

userAgent

Especifica la cadena del agente


de usuario

Propiedades

Metodos

ninguno

Manejadores de
evento

ninguno
Tipos MIME
text/html

documento en formato HTML

text/plain

ducumento es ASCII puro

image/gif

imagen en formato GIF

image/jpeg imagen en formato JPEG


image/bmp imagen en formato de mapa de bits
plug-in

cualquier plug-in

Segundo nivel
Document

Contiene informacion del documento cargado actualmente,


proporcionando mtodos para generar HTML.
alinkColor

corresponde al parametro ALINK del comando


<BODY>

Anchor

Propiedades

anchors

arreglo que refleja todos los marcadores del


documento

bgColor

corresponde al parametro BGCOLOR del comando


<BODY>

cookie

galletita

fgColor

corresponde al parametro TEXT del comando


<BODY>

Form

6 of 13

06/22/2015 10:09 AM

Manual de JavaScript

https://web.archive.org/web/20041205084525/http...

arreglo que refleja todos los formularios del


documento

forms
history

lastModified fecha actual del documento


linkColor

corresponde al parametro LINK del comando


<BODY>

Link
links

arreglo que refleja todos los enlaces del


documento

location

URL completo del documento

referrer

URL del documento que lo llamo

title

corresponde al comando TITLE

vlinkColor

corresponde al parametro VLINK del comando


<BODY>

clear

borra el documento en una ventana.


document.clear()

close

cierra un flujo de salida y fuerza a que se muetren los


datos enviados.
document.close()

open

abre un flujo para escribir la salida de los metodos


white y writeln.
document.open([tipo MIME])

write

escribe una o mas expresiones de HTML en el


documento contenido en la ventana indicada
document.write(exp1[,exp2]...[,expN])

Metodos

escribe una o mas expresiones de HTML en el


documento contenido en la ventana indicada, seguidas
writeln
de un caracter de nueva linea.
document.writeln(exp1[,exp2]...[,expN])
Manejadores
de evento
History
Propiedades

7 of 13

ninguno
Contiene la informacion de los URLs que el cliente ha visitado
desde una ventana.
Indica la cantidad de entradas en el objeto history. sintaxis:
history.length

06/22/2015 10:09 AM

Manual de JavaScript

https://web.archive.org/web/20041205084525/http...

back
Metodos

retrocede al URL anterior. Sintaxis: history.back()


avanza al URL siguiente (despues de haber
forward
retrocedido) Sintaxis: history.forward()
desplaza al URL indicado en relacion a la actual
go
posicion, hacia adelante (+) o hacia aras (-). Sintaxis:
history.go(desplazamiento)

Manejadores
de evento

ninguno

Frame

Una ventana puede tener distintos recuadros reslizables o fijos,


cada uno conteniendo un documento diferente o inclusive, otros
recuadros. La totalidad de los recuadros conforman la ventana.
frames

arreglo que refleja todos los recuadros en un ana


ventana

name

corresponde al atribut NAME del comando <FRAME>

length

indica el numero de recuadros "hijos" dentro del


recuadro actual

parent

indica la ventana o recuadro que contiene el


documento

self

indica el recuadro en uso

Propiedades

window indica el recuadro en uso


[ventana.]recuadro.propiedad
setTimeout

evalua una expresion despues de transcurrido un


tiempo en milisegundos. Sintaxis:
setTimeout(expresion,tiempo)

clearTimeout

cancela un retardo definido mediante setTimeout.


Sintaxis: clearTimeout(tiempo)

Metodos

Manejadores
de evento

Arreglo
Frame

8 of 13

ninguno
Se puede hacer referencia a los recuadros usando el arreglo
frames. Este arreglo contiene un elemento por cada recuadro
"hijo" (definido por una etiqueta <FRAME>) en una ventana que
contenga etiquetas <FRAMESET>, segun el orden en que
figuran. El primer recuadro es parent.frames[0], el segundo es
parent.frame[1] y asi sucesivamente. El modo de referirse al
arreglo es el siguiente: [recuadro.]frames[indice] o

06/22/2015 10:09 AM

Manual de JavaScript

https://web.archive.org/web/20041205084525/http...

[ventana.]frames[indice]
Propiedades

Length. Indica el numero de recuadros en una ventana o


recuadro. Sintaxis: [ventana.]frames.length o
[recuadro.]frames.length

Metodos

ninguno

Manejadores
ninguno
de evento

Tercer nivel
Form

Permite que el usuario introduzca datos y seleccione opciones


de elementos tales como casillas para marcar, botones de radio
y listas de seleccion. Tambien permite enviar datos al servidor.
action
Button
Checkbox
elements
encoding
Hidden
length

Propiedades

method
Password
Radio
Reset
Select
Submit
target
Text
Textarea

9 of 13

Metodos

Submit. remite el formulario. Sintaxis:


formulario.submit()forms[indice].submit()

Manejadores
de evento

onSubmit. Ejecuta cuando se remite el formulario. Sintaxis:


<FORM NAME=formulario TARGET=ventana ACTION=URL
MOTHOD=get|post ENCTYPE=codigo onSubmit="action en
JavaScript">

06/22/2015 10:09 AM

Manual de JavaScript

Arreglo
Forms

https://web.archive.org/web/20041205084525/http...

Es un arreglo que conteiene un elemento por cada formulario


presente en el documento, segun el orden en que figuran. El
primer formulario es document.forms[0], el segundo es
document.forms[1] y asi sucesivamente.

Propiedades

length. Indica el numero de formularios en el documento.


Sintaxis: document.forms.length

Metodos

ninguno

Manejadores
de evento

ninguno

Anchor

Es una porcion de texto que puede ser el dstino de un enlace.


Si el objeto ANCHOR tambien es un objeto LINK, tendr
entradas tanto en el ARREGLO ANCHORS como en el ARREGLO
LINKS.

Propiedades

Ninguna

Metodos

Ninguno

Manejadores de
Ninguno
evento

Arreglo
Anchors

Se puede hacer referencia a los objetos ANCHOR mediante el


ARREGLO ANCHORS, el cual tiene un elemento por cada
comando <A NAME= > en el orden en que aparecen. El primer
elemento es document.anchors[0], el segundo es
document.anchors[1] y asi sucesivamente.

Propiedades
Metodos

Ninguno

Manejadores
de evento

Ninguno

Link

Es cualquier fragmento de texto o una imagen empleada como


enlace de hipertexto. Cuando el usuario hace clic en un enlace,
se carga la referencia de hipertexto en la ventana destino.
hash
host

Propiedades

hostname
href
pathname

10 of 13

06/22/2015 10:09 AM

Manual de JavaScript

https://web.archive.org/web/20041205084525/http...

port
protocol
search
target
Metodos

ninguno
onClick

Manejadores
de evento

onMouseOver

Ejecuta cuando el puntero del raton paso


sobre el enlace.

<A HREF=URL [NAME=marcador][TARGET=ventana]


[onClick="accion"]
[onMouseOver="accion"]>enlace</A>
Arreglo Link

Propiedades

Metodos
Manejadores de evento

Cuarto nivel
Button

Propiedades

Metodos
Manejadores de evento
Checkbox

Propiedades

Metodos
Manejadores de evento
Arreglo Elements

Propiedades

Metodos
Manejadores de evento
Hidden

Propiedades

Metodos
Manejadores de evento

11 of 13

06/22/2015 10:09 AM

Manual de JavaScript

https://web.archive.org/web/20041205084525/http...

Arreglo Options

Propiedades

Metodos
Manejadores de evento
Elementos del arreglo Options Propiedades
Metodos
Manejadores de evento
Password

Propiedades

Metodos
Manejadores de evento
Radio

Propiedades

Metodos
Manejadores de evento
Select

Propiedades

Metodos
Manejadores de evento
Text

Propiedades

Metodos
Manejadores de evento
Textarea

Propiedades

Metodos
Manejadores de evento
Reset

Propiedades

Metodos
Manejadores de evento
Submit

Propiedades

Metodos

12 of 13

06/22/2015 10:09 AM

Manual de JavaScript

https://web.archive.org/web/20041205084525/http...

Manejadores de evento

13 of 13

06/22/2015 10:09 AM

Javascript

https://web.archive.org/web/20041205220200/http...

Palabras reservadas
Dentro de JavaScript nos encontramos con las siguientes palabras reservadas (las cuales no
podremos usar como nombre de variables):

1 of 1

abstract

boolean

break

byte

case

catch

char

class

const

continue

deault

do

double

else

extends

false

final

finally

float

for

function

goto

int

implements

input

in

instanceof

interface

long

native

new

null

package

private

protected

public

return

short

static

super

switch

synchronized

this

throw

throws

transient

true

try

var

val

while

with

06/22/2015 10:09 AM

JavaScript

https://web.archive.org/web/20041212173927/http...

1. Escribir algo en documento actual


Lo primero que aprenderemos a hacer sera escribir algo en el dcumento actual. Para esto
usaremos el mtodo write del objeto document. Mas adelante hablare de algunos otros
metodos de este mismo objetos como son: clear, close, open y writeln.
La sintaxis es la siguiente: document.write("Texto")
Adems de un texto, tambien se pueden mostrar variables, resultados de funciones, etc.
Recuerda que basta introducir el codigo en el lugar que quieres que aparezca el texto sobre tu
pagina.
<HTML>
<HEAD> <TITLE>Ejemplo 1</TITLE></HEAD>
<BODY>
... codigo HTML
<SCRIPT LANGUAGE=JavaScript>
<!-- esconder codigo
document.write ("Hola que tal...")
// fin esconder-->
</SCRIPT>
... mas codigo HTML
</BODY>
</HTML>
Recuerda que tienes que aadir los comentarios para prevenir a los navegadores que no
soportan JavaScript.

2. Escribir algo en un nuevo documento


Ahora usaremos el mismo ejemplo anterior pero lo mostraremos en un nuevo documento, que
sera abrierto en una nueva ventana. Para esto usaremos el metodo open del objeto window
cuya sintaxis es: [ventana=]window.open('URL','nombre',['caracteristicas'])
ventana
Nombre de la nueva ventana (opcional)
URL
Pagina a cargar
nombre
Nombre para referirse a la ventana en los atributos
caracteristicas
son todos opcionales
width
Ancho en pixels de la ventana
height
Alto en pixels de la ventana
resizable
=yes o no, =1 o 0
scrollbars
=yes o no, =1 o 0
status
=yes o no, =1 o 0
menubar
=yes o no, =1 o 0
toolbar

1 of 3

06/22/2015 10:10 AM

JavaScript

https://web.archive.org/web/20041212173927/http...

=yes o no, =1 o 0
location
=yes o no, =1 o 0
directories
=yes o no, =1 o 0
Para la apertura de esta ventana usamos el evento onClick del objeto link, con la siguiente
sintaxis:
<A HREF="" onClick="window.open('estapagina.htm','','width=300,height=80');
return false">Ejemplo 2</A>
Pulsa para ver el efecto del Ejemplo 1 o del Ejemplo 2

3. Mostrar el resultado de una funcion de usario


Primero creamos una funcin de usuario y le asignamos parametros y luego mostramos el
resultado de dicha funcion usando el metodo write del objeto document y aadiendo algunas
de sus propiedades.
<HTML>
<HEAD> <TITLE>Ejemplo 3</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!-- esconder codigo
function Suma(a,b) {
return a+b
}
document.write("La suma de 4+7 es = ".fontcolor("red"),Suma(4,7))
// Fin esconder -->
</SCRIPT>
</BODY>
</HTML>
Pulsa para ver el efecto del Ejemplo 3
Nota ademas que active resizable en esta ventana.

4. Escribir algo en pantalla


En este ejemplo usaremos la propiedad link del objetos document para hacer un enlace desde
esta nueva ventana.
<HTML>
<HEAD> <TITLE>Ejemplo 3</TITLE></HEAD>
<SCRIPT LANGUAGE=JavaScript>
<!-- esconder codigo
document.write("Si ests interesado en la msica Rock visita " +
"Duendedeleyenda".link("http://www.iespana.es/duendedeleyenda").big())
// Fin esconder -->
</SCRIPT>
<BODY>
</BODY>
</HTML>
Pulsa para ver el efecto del Ejemplo 4

2 of 3

06/22/2015 10:10 AM

JavaScript

https://web.archive.org/web/20041212173927/http...

Nota ademas que active status en esta ventana.

5. Funcion que convierte Decimal en Hexadecimal


Pulsa para ver el efecto del Ejemplo 5
Nota ademas que active toolbar en esta ventana, y mira el cdigo fuente de ella.

6. Hora coordinada universal


<HEAD>
<SCRIPT LANGUAGE=JavaScript>
<!-- esconder codigo
function Dime() {
var Hoy = new Date();
var laHora = Hoy.getHours();
var Diferencia = (Hoy.getTimezoneOffset() / 60);
laHora -= Diferencia;
if (Hoy > 23) {laHora -= 24 }
document.write(laHora + " horas, " + Hoy.getMinutes() + " minutos");
window.setTimeout("Dime();", 60000);
}
// Fin esconder -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
<!-- llama a la funcion
Dime();
</SCRIPT>
</BODY>
</HTML>
Pulsa para ver el efecto del Ejemplo 6
Nota ademas que active menubar en esta ventana.

3 of 3

06/22/2015 10:10 AM

Manual de JavaScript

https://web.archive.org/web/20041205213801/http...

Mostrar fecha del sistema


Para obtener los diversos componentes que nos interesan primero tenemos que crear un objeto
que los contenga. Este objeto se llama Date y para crearlo se usa el operador new. Dicho
operador lo usaremos siempre que necesitemos crear un objeto, independientemente de su tipo.
El objeto creado debe ser guardado en un avariable, para usarlo posteriormente y opcionalmente
es posible asignarle parametros de inicializacion. Sintaxis: variable=new tipo [parametros]
Una vez que disponemos del objeto almacenado en una variable, podemos usando los metodos
de dicho objeto, obtener de el una serie de datos como: getDay(), getDate(), getMonth(),
getYear(), getHours() y getMinutes(). Hay que anotar que nos estamos refiriendo a los metodos
del objeto Date() el cual ya esta guardado en una variable, asi que pondremos el nombre de la
variable un punto y luego uno de los metodos.
Todo este codigo lo hemos puesto en el cuerpo del documento en el lugar donde queremos
mostrar la fecha del sistema asi...
La hora actual es: 10:8
La fecha de hoy es: Lunes 22 de Junio de 115
... y listo ya tendras ese dato en tu pagina.
Si quieres ver un segundo ejemplo, donde parte del codigo lo pongo en el encabezado y luego
una llamada en el cuerpo del documento, en el lugar donde quiero mostrar la fecha, clic aqui.

1 of 1

06/22/2015 10:10 AM

Manual de JavaScript

https://web.archive.org/web/20041214100747/http...

Scroll en la barra de estado a la izquierda


Puedes poner el texto en una sola linea, tan larga como se quieras, siempre que este entre comillas, pero
no debe de haber ningun salto de linea, si el texto es demasiado largo, es mejor dividirlo en varias lineas,
tal como esta en este ejemplo.
Dentro del comando <BODY> debes anadir el parametro: onLoad="scroll();"
Al final de la ultima palabra del texto conviene dejar una serie de espacios en blanco, para que no este
encadenado el comienzo con el final de la cadena.

1 of 1

06/22/2015 10:11 AM

JavaScript

https://web.archive.org/web/20041214090049/http...

Scroll en barra de estado


con velosidad controlada
Se podria poner el texto en una sola linea, tan larga como se quiera, siempre que este entre
comillas, pero no debe de haber ningun salto de linea, si el texto es demasiado largo, es mejor
dividirlo en varias lineas, tal como esta en este ejemplo.
Al final de la ultima palabra del texto conviene dejar una serie de espacios en blanco o puntos,
para que no este encadenado el comienzo con el final de la cadena.
Dentro del comando de cuerpo BODY aades el parametro:
onLoad="timeONE=window.setTimeout('stillit_r21(100)',500);"

1 of 1

06/22/2015 10:11 AM

Manual de JavaScript - Js16

https://web.archive.org/web/20041214085817/http...

Scroll dentro de una ventana de derecha a izquierda


Dentro del comando <BODY> se debe aadir el parametro: onLoad="scroll();"
Luego en el formulario aadir:
<FORM NAME='frm'>
<INPUT TYPE='text' NAME='w' SIZE=64>
</FORM>
Como la ventana esta situada dentro de la pagina, podemos colocar estos comandos en el sitio que nos
convenga, dentro del cuerpo del documento.
Este es el resultado.

rma igual que el MARQUEE del Explorer...!

1 of 1

Este es un texto que se desplaz

06/22/2015 10:11 AM

JavaScript

https://web.archive.org/web/20041214095032/http...

Texto en proceso de escritura

Viva er beti manque pie_

1 of 1

06/22/2015 10:12 AM

JavaScript

https://web.archive.org/web/20041214100526/http...

Tabla de Nombre y Cdigo de colores


Color Nombre:

1 of 2

antiquewhite

Cdigo:

#FAEBD7

aliceblue

gainsboro

moccasin

antiquewhite

ghostwhite

navajowhite

aqua

gold

navy

aquamarine

goldenrod

oldlace

azure

gray

olive

beige

green

olivedrab

bisque

greenyellow

orange

black

honeydew

orangered

blanchedalmond

hotpink

orchid

blue

indianred

palegoldenrod

blueviolet

indigo

palegreen

brown

ivory

paleturquoise

burlywood

khaki

palevioletred

cadetblue

lavender

papayawhip

chartreuse

lavenderblush

peachpuff

chocolate

lawngreen

peru

coral

lemonchiffon

pink

cornflowerblue

lightblue

plum

cornsilk

lightcoral

powderblue

crimson

lightcyan

purple

cyan

lightgoldenrodyellow

red

darkblue

lightgreen

rosybrown

darkcyan

lightgrey

royalblue

darkgoldenrod

lightpink

saddlebrown

darkgray

lightsalmon

salmon

darkgreen

lightseagreen

sandybrown

darkkhaki

lightskyblue

seagreen

darkmagenta

lightslategray

seashell

darkolivegreen

lightsteelblue

sienna

darkorange

lightyellow

silver

darkorchid

lime

skyblue

darkred

limegreen

slateblue

06/22/2015 10:13 AM

JavaScript

https://web.archive.org/web/20041214100526/http...

darksalmon
darkseagreen
darkslateblue
darkslategray
darkturquoise
darkviolet
deeppink
deepskyblue
dimgray
dodgerblue
firebrick
floralwhite
forestgreen
fuchsia

linen

slategray

magenta

snow

maroon

springgreen

mediumaquamarine

steelblue

mediumblue

tan

mediumorchid

teal

mediumpurple

thistle

mediumseagreen

tomato

mediumslateblue

turquoise

mediumspringgreen

violet

mediumturquoise

wheat

mediumvioletred

white

midnightblue

whitesmoke

mintcream

yellow

mistyrose

yellowgreen

Para descargarte el cdigo fuente de sta pgina pulsa aqu abajo:

2 of 2

06/22/2015 10:13 AM

JavaScript

https://web.archive.org/web/20041205220911/http...

Eventos de Roll-over
Se trata del uso de los manejadores de eventos:

Evento

Se ejecuta cuando

onMouseOver El puntero del raton pasa sobre un enlace


onMouseOut

El puntero de raton deja de estar sobre un


enlace

onClick

Se activa el enlace con click de raton

onFocus

Se selecciona un objeto SELECT, TEXT o


TEXTAREA

onBlur

Se deselecciona un objeto SELECT, TEXT o


TEXTAREA

onChange

Se modifica el contenido del campo SELECT,


TEXT o TEXTAREA

onSelect

Se selecciona una porcion de texto dentro del


campo TEXT o TEXTAREA

onLoad

Se termina de cargar una ventana

onUnload

Se cierra una ventana

onMouseOver, onMouseOut y onClick


Estos manejadores de evento se pueden usar en cualquier enlace dentro de la pagina, incluso si
asignaste una imagen como enlace. Fijate que es posible usar los tres manejadores de evento al
mismo tiempo.
<A HREF=URL [NAME=nombre][TARGET=ventana][evento="accion"]>titulo del enlace</A>

onFocus, onBler y onChange


<INPUT TYPE=radio NAME=nombre VALUE=valor [CHECKED][evento="accion"]>texto
<INPUT TYPE=text NAME=nombre VALUE="texto" SIZE=tamao [evento="accion"]>texto
<TEXTAREA NAME=nombre ROWWA=filas COLS=columnas WRAP=off|virtual|physical
[evento="accion"]>texto</TEXTAREA>
<INPUT TYPE=submit NAME=nombre VALUE="texto" [evento="accion"]>
<INPUT TYPE=reset NAME=nombre VALUE="texto" [evento="accion"]>

onSelect
<SELECT NAME=nombre [SIZE=tamao][MULTIPLE] [evento="accion"]>

onLoad y onUnload
Este manejador de evento pertenece al objeto WINDOW y normalmente se usa dontro del
comando <BODY [onLoad=accion][onUnload=accion]>

1 of 2

06/22/2015 10:13 AM

JavaScript

https://web.archive.org/web/20041205220911/http...

Cambio de imagen 1
Cambio de imagen 2
Cambio de imagen 3

2 of 2

06/22/2015 10:13 AM

JavaScript

https://web.archive.org/web/20041214095542/http...

Evento Roll-over
Con este evento confirmas al usuario que el puntero del mouse esta sobre un objeto o area
particular en tu pagina, ya que inmediatamente cambia la imagen.
Primero debes aadir el codigo JavaScript en la cabecera del documento, haciendo referencia a
las dos images que quieres mostrar, una es la que se muestra normalmente y la otra es para el
boton seleccionado.

Codigo en la cabecera
<SCRIPT LANGUAGE=JavaScript>
<!-- esconde codigo a1=new Image();
a1.src="off.gif";
a2=new Image();
a2.src="on.gif";
function Cambia(refer,nueva)
{document[refer].src=eval(nueva+".src") };
//-- fin esconde -->
</SCRIPT>
Luego donde quieres mostrar el efecto aades el siguiente codigo:

Codigo en el cuerpo
<A HREF=http://www.uap.edu.pe/
onMouseOver="Cambia('abc','a2')"
onMouseOut="Cambia('abc','a1')">
<IMG SRC=off.gif NAME=abc></A>

Para este ejemplo yo use la imagen OFF.GIF que se mostrara normalmente, pero cuando
pongas el puntero del mouse sobre esta imagen se mostrara la imagen ON.GIF.

1 of 1

06/22/2015 10:13 AM

JavaScript

https://web.archive.org/web/20041214101038/http...

Eventos onMouseOvers
En este ejemplo veremos el uso del los evento onMouseOver y onMouseOut para cambiar una
o mas imagenen al paso del puntero del raton sobre una de ellas. Este metodo es muy usado
para confirmar que cierta imagen es un enlace.
Con el codigo a continuacion creamos las funciones necesarias que luego seran llamaadas desde
nuestra pagina Web. Este codigo lo debes poner en el HEAD
<SCRIPT LANGUAGE=JavaScript>
<!-- esconde codigo
// Funciones para un solo cambio de imagen
function sobre1(img,ref) {document.images[img].src=ref };
function fuera1(img,ref) {document.images[img].src=ref };
// Funciones para multiples multiples cambios de imagen
function sobre2(img1,ref1,img2,ref2) {document.images[img1].src=ref1;
document.images[img2].src=ref2 };
function fuera2(img1,ref1,img2,ref2) {document.images[img1].src=ref1;
document.images[img2].src=ref2 };
// fin esconde -->
</SCRIPT>
Una vez puesto el cogido anterior en la cabecera del documento HTML, entre los comandos
</TITLE> y </HEAD> ahora ponemos el siguiente codigo deltro del cuerpo del documentos
<BODY> en el lugar que queremos poner la imagen.
NOTA: Solo tienes que poner tus propios datos en las zonas marcadas con verde.

Ejemplo 1
Un solo cambio en la misma imagen
<A HREF=pagina.htm
onMouseOver="sobre1('imagenA','imagen2.gif');"
onMouseOut="fuera1('imagenA','imagen1.gif');">
<IMG SRC=imagen1.gif NAME=imagenA</A>

imagenA es el nombre que estoy asignando a este boton, de esta manera cuando pases el
puntero del raton sobre la imagen, la funcion sustituye a esta imagen segun los datos puestos.

Ejemplo 2:
Un solo cambio en otra imagen
<A HREF=pagina.htm
onMouseOver="sobre1('imagenB','imagen3.JPG');"
onMouseOut="fuera1('imagenB','imagen2.JPG');">

1 of 2

06/22/2015 10:14 AM

JavaScript

https://web.archive.org/web/20041214101038/http...

<IMG SRC=imagen1.JPG NAME=imagenA></A>


<IMG SRC=imagen2.JPG NAME=imagenB>

Ejemplo 3:
Multiples cambio de imagen
<A HREF=pagina.htm
onMouseOver="sobre2('imagenA','imagen2.gif','imagenB','imagen4.gif');"
onMouseOut="fuera2('imagenA','image1.gif','imagenB','imagen2.gif');">
<IMG SRC=imagen1.gif NAME=imagenA</A>
<IMG SRC=imagen3.gif NAME=imagenB</A>

NOTA: Es muy importante que recuerdes que cada imagen del documento debera tener un
nombre unico, dado via el en el parametro NAME, o el efecto onMouseOver no funcionara.

2 of 2

06/22/2015 10:14 AM

JavaScript

https://web.archive.org/web/20041214085917/http...

Efecto onMouseOver
Si queremos usar los efectos de onMouseOver en una pagina, un buen mtodo es cargar primero
las imgenes que se van a mostrar con los eventos. Tenemos dos metodos para hacer esto.
NOTA: Solo tienes que sustituir las zonas verdes con el apropiado nombre de tus imgenes.

Primer mtodo
En este caso, las imagenes se almacenan en una matriz (array).
<SCRIPT LANGUAGE=JavaScript>
<!-- esconde codigo
var lista = new Array ("unoA.gif","dosA.gif","tresA.gif","cuatroA.gif";
var imgs = new Array();
var count;
if (document.images)
for (count=0; count<lista.length; count++)
{imgs[count]=new Image(); imgs[count].src=lista[count] };
function prende1(num) {if (document.images) {document[imageName].src =
eval(imgs[num] + ".src");}}
function apaga1(num) {if (document.images) {document[imageName].src =
eval(imgs[num] + ".src");}}
// -->
</SCRIPT>

Ejemplo 1
<A HREF=pagina.htm
onMouseOver="prende1('imagen1')"
onMouseOut="apaga1('imagen1')">
<IMG SRC=imagen.gif
NAME=imagen1></A>

Segundo mtodo
En este ejempo cargaremos las imgenes en variables independientes, un juego para on y otro
para off.
<SCRIPT>
<!-- esconde codigo
imagen1on = new Image(); imagen1on.src = "unoA.gif";
imagen2on = new Image(); imagen2on.src = "dosA.gif";
imagen3on = new Image(); imagen3on.src = "tresA.gif";

1 of 1

06/22/2015 10:14 AM

JavaScript

https://web.archive.org/web/20041212173031/http...

Valida y envia un formulario por correo


Con este ejemplo explico como obligar las respuestas de un formulario y luego envialo usando
JavaScript.

Instrucciones
1. Poner la rutina de JavaScript entre los comandos:
</TITLE>
<SCRIPT LANGUAGE=JavaScript>
function Valida(form){
if (form.campo.value == "") {
alert("Tu mensaje.");
form.campo.focus();
return false;
}
alert("Gracias por llenar el formulario.");
form.submit();
}
</SCRIPT>
</HEAD>
2. Crea un formulario con el siguiente encabezado:
<FORM ACTION=mailto:tu@correo METHOD=post ENCTYPE=text/plain>
3. Cambia el TYPE del boton de envo del formulario submit por button y agregar el
parametro onClick="Valida(this.form)"> quedaria algo asi:
<INPUT TYPE=button onClick="Valida(this.form)">
Aqui los campos Nombre, E-mail y Forma de pago son obligatorios. En este ejemplo no se envia
realmente, ya que la parte de envion se encuentra bloqueada en el codigo de JavaScript con //
para que lo tome como un comentario.

Nombre:
E-mail:
URL:
Telfono:

Estudiar

Que prefieres:

Cheque
Forma de pago:

Contado
Tarjeta

Enviar

1 of 1

Limpiar formulario

06/22/2015 10:15 AM

JavaScript

Clave Scriptionario
Esta Clave -password- no debe usarse como una proteccin de acceso a contenidos de
restriccin total, pero ser til como llamada de atencin o solicitando confirmacin de quienes
acceden a visitar determinados documentos html, sera como decir: Muy bien puede acceder,
pero que conste que si lo haces es porque quiere.
El nombre de usuario es adulto y la clave o password entrada, puede modificar ambas, tiene
una URL indicada que tambin puede ser fcilmente cambiada. No olvide que esta clave consta
de dos partes, el script en si mismo y el formulario que puede ver en el cdigo fuente de esta
pgina.
Area Reservada
Usuario:
Clave:

Entrar

Ver Script

Preguntar nombre

Preguntar nombre
Para preguntar algo y despus ponerlo a algu sitio en tu web tienes que poner lo
siguiente: (en Head)

<script language="JavaScript">
<!-function namosw_infotext()
{
var username;
var type, i, top, obj;
for (i = 1, top = 0; i <
namosw_infotext.arguments.length; i += 2) {
obj =
eval('document.'+namosw_infotext.arguments[i]);
if (obj == null) continue;
type = namosw_infotext.arguments[i+1];
if (type == 'username') {
if (username == null)
username =
prompt(namosw_infotext.arguments[0], "");
username = (username == null) ? '' :
username;
obj.value = username;
} else if (type == 'moddate') {
obj.value = document.lastModified;
} else if (type == 'ipaddr' || type ==
'hostname') {
if (navigator.appName == 'Netscape') {
var host =
java.net.InetAddress.getLocalHost();
obj.value = (type == 'ipaddr') ?
host.getHostAddress() : host.getHostName();
} else {
obj.value = '';
}
}
}
}
//-->
</script>

Preguntar nombre

</head>

DESPUES, DONDE LO QUIERAS...


<form name="form1" method="get">
<p align="left">&nbsp;<input type="text"
name="infotext1" value="User Name" size="30"
style="text-decoration:none;"></p>
</form>

Fijate al entrar, lo que has puesto es:

Cuadro explicativo

Cuadro explicativo
Para poner un cuadro explicativo en tu web tienes que poner lo siguiente:

en opciones de la web:
onload="escribe(' Explicacin\n
encima de los enlaces.');">

-----------\n Pasar el puntero del ratn por

en body
<script language="JavaScript"><!-function escribe(frase){document.desplaza.cuadro.value=frase; }
// --></script>
<table border="0">
<tr>
<td width="200"><p align="center"><strong>Opciones.</strong></p>
<p><a href="index.htm"
onmouseover="escribe(' Pgina principal\n ----------------\n\n Cuando
hagas Click en este enlace irs directamente a la pgina de inicio de mi
web');">Pgina
principal</a><br>
<a href="index.htm"
onmouseover="escribe(' JavaScript\n -----------\n\n Este enlace te
llevar a la pgina de inicio de Scripts en la que puedes encontrar muchos ms
trucos interesantes para realizar e incluir en tus pginas
web');">JavaScripts</a><br>
<a href="glosario_index.htm"
onmouseover="escribe(' Diccionarios\n -------------- \n\n Si tienes
alguna duda sobre alguna palabra que no conoces, aqui encontrars una
recopilacin de las palabras ms comunes utilizadas en
Internet.');">Diccionarios</a><br>
</p>
</td>
<td><form name="desplaza">
<p><textarea name="cuadro" rows="8" cols="30"
wrap="physical"></textarea></p>
</form>
</td>
</tr>
</table>

Cuadro explicativo

Ejemplo del cuadro (los links no funcionan):

Opciones.
Pgina principal
JavaScripts
Diccionarios

Explicacin
----------Pasar el puntero del ratn
por encima de los
enlaces.Script cedido por
Mario

Buscador en tu web

Buscador en tu web
Para poner una caja con un buscador en tu web tienes que poner lo siguiente: ( es un
poco complicado )

<script language="JavaScript"><!-function buscar(form){


var palabra1=form.Palabra.value;
var indice=form.buscador.selectedIndex
var buscador1=form.buscador.options[indice].value
var cadena
if (palabra1 =="" ){ alert (" No has indicado que palabra quieres buscar.");}
else {if (buscador1 == "1" ){alert ("Debes indicar el nombre de un
buscador.")}
else{cadena=buscador1+palabra1; IrA(cadena)}}}
function IrA(cadena){ventana=window.open(cadena , "Ventana1")}
// --></script>
<form method="post" name="form">
<p>Palabra : <input type="text" size="17" name="Palabra"> </p>
<p>Buscador: <select name="buscador" size="1">
<option selected value="1">Espaoles</option>
<option
value="http://www.ole.es/cgi-bin/buscar.cgi?Claus=">&nbsp;&
nbsp;Ole</option>
<option
value="http://www.sol.es
/buscar.asp?selector=Alguna+de+las+palabras&
amp;formato=formato+completo&amp;buscar=">&nbsp;&nbsp;Sol</option>
<option value="1">Extranjeros</option>
<option
value="http://www.altavista.digital.com/cgi-bin/query?pg=q&
amp;what=web&amp;kl=XX&amp;q=">&nbsp;&nbsp;Altavista</option>
<option
value="http://search.excite.com/search.gw?trace=a&amp;search=">&
nbsp;&nbsp;Excite</option>
<option value="http://search.yahoo.com/bin/search?p=">&nbsp;&
nbsp;Yahoo</option>
<option

Buscador en tu web

value="http://www.lycos.com/cgi-bin/pursuit?query=java">&nbsp;&
nbsp;Lycos</option>
<option
value="http://webcrawler.com/cgi-bin/WebQuery?searchText=">&nbsp;&
nbsp;WebCrawler</option>
<option value="1">Metabuscadores</option>
<option
value="http://www.metacrawler.com/crawler?general=">&nbsp;&
nbsp;MetaCrawler</option>
</select> </p>
<p><input type="button" value="Buscar"
onclick="buscar(this.form)"> <input type="reset" name="B1"
value="Reset"></p>
</form>
<SCRIPT language="JavaScript" SRC="/include/frames.js">
</SCRIPT>
<SCRIPT language="JavaScript">
hora = new Date(); document.write("<img src=http://www2.telepolis.com
/estadisticas/account
/PAGINAS_PERSONALES?ref="+document.referrer+"@"+hora.getMinutes() +
hora.getSeconds() +">");
framescheck();
</SCRIPT>
</body>
</html>

Te quedar as:
Palabra :
Buscador:

Espaoles

Buscar

Reset

Boton para cerrar

Boton para cerrar


Para poner un boton para cerrar la ventana en tu web tienes que poner lo
siguiente:

<form><p>
<input type="button"
value="Cerrar esta ventana"
onclick="window.close();">
</p>
</form>
<p><font color="#000080" size="1" face="Verdana">Instalacin:</font>
</p><ul><li><font color="#000080" size="1" face="Verdana">Copia esta
pgina a tu disco duro y despues editala con tu editor HTML</font>
</li><li><font color="#000080" size="1" face="Verdana">Elimina estas
explicaciones e incluye tu propio texto, eso si, el botn debe estar dentro de un
formulario para que funcione con el Netscape.<br></font></li><li><font
color="#000080" size="1" face="Verdana">Puedes cambiar el texto del
botn... nicamente debes
conservar el evento <em><strong>onclick</strong></em> y su contenido.
</font></li><li><font color="#000080" size="1" face="Verdana">Fjate que
puedes utilizar ese evento en una imagen de forma que al ser pulsada cierre la
pgina.</font></li></ul>

Ejemplo del boton:

Cerrar esta ventana


Instalacin:
Copia esta pgina a tu disco duro y despues editala con tu editor HTML
Elimina estas explicaciones e incluye tu propio texto, eso si, el botn debe estar dentro de un
formulario para que funcione con el Netscape.
Puedes cambiar el texto del botn... nicamente debes conservar el evento onclick y su contenido.
Fjate que puedes utilizar ese evento en una imagen de forma que al ser pulsada cierre la pgina.

Cambio de puntero

Cambio de puntero
Para poner un cambio de puntero en tus links de tu web tienes que poner lo
siguiente:

<P><STRONG><FONT face=verdana size=2>Pasa


el puntero del ratn por
cada una de las siguientes lineas para transformarlo:
</FONT></STRONG>
</P>
<UL>
<LI>
<DIV style="CURSOR: default"><STRONG><FONT
face=verdana size=2>Puntero que no
cambia a nada.</FONT></STRONG></DIV>
<LI>
<DIV style="CURSOR: wait"><STRONG><FONT
face=verdana size=2>Puntero cambia a
'ocupado'</FONT></STRONG></DIV>
<LI>
<DIV style="CURSOR: move"><STRONG><FONT
face=verdana size=2>Puntero cambia a
'mover'</FONT></STRONG></DIV>
<LI>
<DIV style="CURSOR: hand"><STRONG><FONT
face=verdana size=2>Puntero cambia a
'mano'</FONT></STRONG></DIV>
<LI>
<DIV style="CURSOR: text"><FONT face=verdana
size=2><STRONG>Puntero cambia a
'texto'</STRONG></FONT></DIV></LI></UL>

Ejemplo del cambio de puntero:


Pasa el puntero del ratn por cada una de las siguientes lineas para transformarlo:
Puntero que no cambia a nada.
Puntero cambia a 'ocupado'

Caja codicadora

Caja codificadora
Para poner una caja codificadora en tu web tienes que poner lo siguiente:

<script language="JavaScript"><!-function codifica(txt) {


var str='',chr;
var i=0,f=txt.length;
while (i<f){
chr=txt.charAt(i);
if (chr=='a')chr='!';
if (chr=='e')chr='';
if (chr=='i')chr='';
if (chr=='o')chr='$';
if (chr=='u')chr='%';
if
if
if
if
if
if
if
if
if
if
if

(chr=='b')chr='';
(chr=='c')chr='';
(chr=='d')chr='';
(chr=='f')chr='';
(chr=='g')chr='';
(chr=='h')chr='';
(chr=='n')chr='';
(chr=='p')chr='';
(chr=='r')chr='';
(chr=='s')chr='';
(chr=='t')chr='';

if
if
if
if
if
if
if

(chr=='1')chr='';
(chr=='3')chr='';
(chr=='4')chr='';
(chr=='5')chr='';
(chr=='7')chr='';
(chr=='9')chr='';
(chr=='0')chr='';

if (chr==' ')chr='';
if (chr=='T')chr='';
if (chr=='M')chr='';
if (chr=='L')chr='';

Caja codicadora

if
if
if
if
if
if

(chr=='A')chr='&hibar;';
(chr=='E')chr='';
(chr=='Y')chr='';
(chr=='O')chr='';
(chr=='J')chr='';
(chr=='N')chr='';

str=str+chr;
i++;}
document.f.txt.value=str;
}
function decodifica(txt) {
var str='',chr;
var i=0,f=txt.length;
while (i<f){
chr=txt.charAt(i);
if (chr=='!')chr='a';
if (chr=='')chr='e';
if (chr=='')chr='i';
if (chr=='$')chr='o';
if (chr=='%')chr='u';
if
if
if
if
if
if
if
if
if
if
if

(chr=='')chr='b';
(chr=='')chr='c';
(chr=='')chr='d';
(chr=='')chr='f';
(chr=='')chr='g';
(chr=='')chr='h';
(chr=='')chr='n';
(chr=='')chr='p';
(chr=='')chr='r';
(chr=='')chr='s';
(chr=='')chr='t';

if
if
if
if
if
if
if

(chr=='')chr='1';
(chr=='')chr='3';
(chr=='')chr='4';
(chr=='')chr='5';
(chr=='')chr='7';
(chr=='')chr='9';
(chr=='')chr='0';

Caja codicadora

if (chr=='')chr=' ';
if
if
if
if
if
if
if
if

(chr=='')chr='T';
(chr=='')chr='M';
(chr=='')chr='L';
(chr=='&hibar;')chr='A';
(chr=='')chr='E';
(chr=='')chr='Y';
(chr=='')chr='O';
(chr=='')chr='J';

if (chr=='')chr='N';
str=str+chr;
i++;}
document.f.txt.value=str;
}
// --></script>
<form name="f">
<div align="left"><table border="0"
cellspacing="0">
<TBODY>
<tr>
<td colspan="3"><textarea name="txt"
rows="10"
cols="40"></textarea></td>
<td width="20">&nbsp;</td>
<td valign="top"><font size="2"
face="Arial"><strong>Pasos
para decodificar/codificar textos:</strong>
</font> <p><font
size="2" face="Arial"><strong>1.Seleccionar un
texto </strong></font><font
color="#FF8040" size="2"
face="Arial"><strong>control + E</strong>
</font><font
size="2" face="Arial"><strong><br>
3.- Copiarlo </strong></font><font
color="#FF8000"
size="2" face="Arial"><strong>Control +
C</strong></font><font

Caja codicadora

size="2" face="Arial"><strong><br>
4.- Ven a esta pagina<br>
5.- Pincha en cuadro de al lado.<br>
6.- Pegar </strong></font><font
color="#FF8000"
size="2" face="Arial"><strong>Control +
V</strong></font><font
size="2" face="Arial"><strong><br>
7.- Pincha en </strong></font><font
color="#FF8000"
size="2" face="Arial">
<strong>Muestra/oculta</strong></font><font
size="2" face="Arial"><strong>.</strong>
</font></p>
</td>
</tr>
<tr>
<td><p align="center"><input
type="button"
name="deco" value="Muestra"
onclick="decodifica(txt.value);"></p>
</td>
<td>&nbsp;</td>
<td><p align="center"><input
type="button" name="cod"
value="Oculta"
onclick="codifica(txt.value);"> </p>
</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</TBODY> </table>
</div>
</form>
<SCRIPT language="JavaScript" SRC="/include
/frames.js">
</SCRIPT>
<SCRIPT language="JavaScript">

Ejemplo de caja codificadora en toda regla:

Caja codicadora

Pasos para decodificar/codificar textos:


1.- Seleccionar un texto control + E
3.- Copiarlo Control + C
4.- Ven a esta pagina
5.- Pincha en cuadro de al lado.
6.- Pegar Control + V
7.- Pincha en Muestra/oculta.

Muestra

Oculta

Men Desplegable

Men Desplegable
Para poner un men desplegable en tu web tienes que poner lo siguiente:

<script language="JavaScript"
type="text/javascript"><!-function irA(menu){window.location.href =
menu.options[menu.selectedIndex].value;}
// fin de javascript -->
</script>
<form name="formulario">
<p><select name="menu" size="1"
onchange="irA(this)"
style="BACKGROUND-COLOR: #ffa54a; COLOR:
#000080; FONT-FAMILY: Verdana, Arial; FONT-SIZE: 9pt;
FONT-WEIGHT: bold">
<option selected value>Visitar</option>
<option value="http://www.ole.es">Ol!</option>
<option value="http://www.ozu.es">Oz
es</option>
<option value="http://www.ozu.com">Otro
com</option>
<option
value="http://www.es.lycos.de">Lycos</option>
<option
value="http://www.metabusca.com">Metabusca</option>
</select> </p>
</form>
<SCRIPT language="JavaScript" SRC="/include
/frames.js">
</SCRIPT>

Ejemplo del men desplegable:


Visitar

Alerta con boton

Alerta con boton


Para poner una caja de alerta con un boton en tu web tienes que poner lo siguiente:

<html><head> <script language="LiveScript">


function pushbutton() { alert("Hola!"); }
</script> </head><body><form> <input
type="button" name="Button1"
value="Presineme" onclick="pushbutton()">
</form></body></html>
Ejemplo de la caja y el boton:

Presineme

Ultima modicacin

Ultima modificacin
Para poner la fecha de la ltima modificacin en tu web tienes que poner lo siguiente:

<html><body>Esta es una simple pgina en


HTML.<br>Ultima modificacin: <script
language="LiveScript"> <!-- oculta el script de
los browsers obsoletos
document.write(document.lastModified) //
termina de esconder el contenido --> </script>
</body> </html>
Ejemplo de la fecha de la modificacin:
Ultima modificacin:
06/22/2015 10:17:26

Link explicativo en Barra de estado

Link explicativo en Barra de estado


Para poner un link con la explicacin en la barra de estado en tu web tienes que poner
lo siguiente:

<a href="tpage.htm"
onMouseOver="window.status='Otro link
estpido...';
return true">
Ejemplo de link:
Link

Fecha y hora

La hora actual es: 10:17 La fecha es: 6/22/115

Fecha y hora
Para poner una fecha y hora en tu web tienes que poner lo siguiente:

<script language="LiveScript">
<!-- Escondiendo
today = new Date()
document.write("La hora actual es:
",today.getHours(),":",today.getMinutes())
document.write("
La fecha es: ", today.getMonth()+1,"/",today.getDate(),"
/",today.getYear());
// se termina de esconder -->
</script>

Link Alerta

Link Alerta
Para poner un link con una caja de alerta en tu web tienes que poner lo siguiente:

<head><script language="LiveScript"><!-Escondemos la funcion function hello() {


alert("Hola!"); }// --> </script></head>
<body><a href=""
onMouseOver="hello()">link</a></body>
link

Numero al Azar

Numero al Azar
Para poner un numero al azar en tu web tienes que poner lo siguiente:

<head><script language="LiveScript">function
RandomNumber() { today = new Date(); num=
Math.abs(Math.sin(today.getTime())); return
num; }</script></head><body><script
language="LiveScript"><!-document.write("Este es un numero al azar:",
RandomNumber());// --></script></body>
Este es un numero al azar:0.24721815942226916

Alerta con Imagen

Alerta con Imagen


Para poner una alerta con imagen en tu web tienes que poner lo siguiente:

<a href="" onMouseOver="alert('TEXTO DEL


MENSAJE');return true;">
<IMG SRC="NOMBRE DE LA IMAGEN"
border="0"></a>

Ir a otra URL al pasar

Ir a otra URL al pasar


Para ir a otra URL al pasar el mouse directamente, tienes que poner lo siguiente:

<BODY>
<a href=""
onmouseover="parent.location='http://www.mayororeja.com
/'">mayororeja.com </A>
<p><center>
Ejemplo de la page: mayororeja.com
En sta pgina os expongo el link con:
<a href="" onmouseover="window.open('http://www.mayororeja.com
/')">mayororeja.com</a>
para que se abra una nueva ventana, de la otra forma, la pgina se abrir en el mismo
documento que tengais abierto, perdiendose ste. Con parent.location se abre una
pgina en la misma ventana y window.open abre una nueva ventana.

Saber Version del navegador

Saber Versin del navegador


Para saber la versin del navegador del usuario tienes que poner en tu web lo
siguiente:

<Script Language="JavaScript">
<!--document.write(navigator.appName)
document.write(navigator.appVersion)//-->
</script>
Ejemplo de versin:
5.0 (X11)

Formulario

SUSTRAER INFORMACIN DEL VISITANTE

Nombre:
Direccin
E-mail:
Localidad:
Cmo me
has
encontrado?:
Su grupo
favorito de
msica:
Que aadira
en la Web?
(Ej.:Hacking):
Punte la
Web:

Borrar Datos
Enviar Datos

Hazme un
comentario:

Ve ste simple formulario??, pues con l se puede averiguar Versin, Navegador,


Procedencia, Plataforma, Pginas visitadas en tu Web, Altura del monitor, Anchura del
monitor, Altura disponible, anchura disponible, Fecha y hora en que mand el formulario.
Tambin podramos poner un script que nos dijera su direccin IP, la identificacin de su
equipo en red etc...
El truco est en que slo hacemos visible algunos campos con preguntas normales, y los
dems los dejamos como

HIDDEN (Ocultos).

Podis hacer una prueba mandando ste formulario y en vuestra bandeja de salida veris lo
que supuestamente habis mandado, ya que la direccin que pongo en el formulario es
ficticia, no existe.
Existen otras formas de hacer un formulario sin que salga el
y sin que salga de vuestro
un servidor que soporte

CONFIRM de Internet Explorer

correo electrnico, por ejemplo alojando un archivo PERL en

CGI.

Atencin: La procedencia slo se ve si la pgina est alojada en Internet, si te bajas ste


cdigo fuente no podrs ver la procedencia desde el disco duro haciendo un enlace desde una
pgina a dicho archivo.

Ver codigo fuente

Formulario

Botones con alerta de radio

Botones con alerta de radio


Para poner unos botones de radio con alerta en tu web tienes que poner lo siguiente:

<FORM>
<p>
La mejor de inernet:
<INPUT TYPE="radio" NAME="radio" value="Veo
que tienes un gusto excelente.."
onClick="alert(value)">
podria mejorarse.:
<INPUT TYPE="radio" NAME="radio"
value="Tienes mucha razon"
onClick="alert(value)">
La peor que he viso jamas:
<INPUT TYPE="radio" NAME="radio"
value="Tienes el gusto muy malo"
onClick="alert(value)">
</form>
Ejemplo de los botones:
La mejor de inernet:

podria mejorarse.:

La peor que he viso jamas:

Boton que te habla

Boton que te habla


Para poner un boton que te habla en tu web tienes que poner lo siguiente:

<SCRIPT LANGUAGE="JavaScript">
var alerted_already;
var remark;
function theytyped(form) {
for ( j = 1;
j<=remark.length &&
remark[j]!=form.myoutxt.value;
j++){}
if (j>remark.length)
form.myoutxt.value = "Do not type here!";
return false;
}
function touched_frog() {
if (!alerted_already) {
alert(""+
""+
""+
""+
""+
"");
alerted_already = true;
}
return alerted_already;
}
function compute(form) {
for (var i = 1;
i<=remark.length &&
remark[i]!=form.myoutxt.value ;
i++){}
if (i==remark.length)
history.back();
if (i==remark.length-1)
alert("Querido amigo/a:"+
"\n\nCreo haberle dicho repetidas veces que
deje de pulsarme. "+
"Si vuelve a pulsarme tendre que tomar medidas
mas drasticas."+
"\nAtentamente, recibe un cordial saludo.");
if (i<remark.length)

Boton que te habla

form.myoutxt.value = remark[i+1];
else
form.myoutxt.value = remark[1];
}
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments[i];
}
remark = new initArray( "Gracias!",
"Una vez mas?!",
"Te dije solo una vez mas!",
"Estas pedo!!!",
"Tu has bebido aceite de colza!",
"Te digo que pares!!.",
"He dicho que te pares!!!",
"Estas sordo??!!!",
"Me tienes hasta los *******!!!",
"Te vas a enterar!!!.",
"Vuelve a pulsarme y veras...!");
alerted_already = false;
// End -->
</SCRIPT>
<BODY>
<FORM name="buttons" method="post"
onSubmit="return false">
<input type="button" name="pushme"
value="Pulsame" onClick="compute(this.form)"
return touched_frog()">
<input type="text" value=" "
name="myoutxt"
onBlur="theytyped(this.form)"
onFocus="theytyped(this.form)"
onChange="theytyped(this.form)"
size=45>
</FORM>
<P><BR>
</CENTER>
Ejemplo de la caja y el boton:

Pulsame

Boton que te habla

Ver codigo de html

Ver codigo de html


Para poner un boton que te abra el codigo html en tu web tienes que poner lo
siguiente:

<form><INPUT TYPE="BUTTON" VALUE="Ver


codigo fuente" onClick= 'window.location =
"view-source:" + window.location.href'>
</form>

Ver codigo fuente

MANUAL JavaScript

MSICA EN PGINA WEB


Copia el cdigo de sta pgina para insertar msica en una pgina web.
El archivo que escuchas, es de mi cosecha.

Evento con el ratn

ONMOUSEDOWN
Por ejemplo se podra conseguir que al pulsar el botn derecho del ratn aparezca un
alert, esto se consigue con el evento onmousedown, aqu est el cdigo fuente que
necesitas.
<SCRIPT LANGUAGE="JavaScript">
<!-- Te escondo chavalote
function right(e) {
if (navigator.appName == 'Netscape' &&
(e.which == 3 || e.which == 2))
return false;
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("Por Sergio Mora");
return false;
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
// Se acabo -->
</SCRIPT>

Caja de alerta

Caja de alerta
Para poner una caja de alerta en tu web tienes que poner lo siguiente:

<script
language="JavaScript">
alert("Pon aqui tu
mensaje");
</script>

Preferiblemente al principio del documento html, para evitar problemas.

Formulario

Para hacer un buen formulario...


Para poner un formulario en tu web tienes que poner lo siguiente:

<p><strong><u>Libro de visitas</u></strong> </p>


<form action="mailto:tu-direccion-de-correo"
method="post">
<table border="0">
<tr><td align="right"><strong>Nombre:</strong></td>
<td><input type="text" size="36"
name="nombre"></td>
<td rowspan="4"><p align="center"><input type="reset"
value="Borrar Datos"></p>
<p align="center"><input type="submit" value="Enviar
Datos"></p></td>
</tr>
<tr>
<td align="right"><strong>Direccin E-mail:
</strong></td>
<td><input type="text" size="36"
name="direccion"></td>
</tr>
<tr>
<td align="right"><strong>Cmo me has encontrado?:
</strong></td>
<td><input type="text" size="36"
name="procedencia"></td>
</tr>
<tr>
<td align="right"><strong>Hazme un comentario:
</strong></td>
<td><textarea name="comentario" rows="5" cols="30">
</textarea></td>
</tr>
</table>
</form>

Formulario

El formulario queda ms o menos as:

Nombre:
Direccin
E-mail:
Cmo me
has
encontrado?:
Hazme un
comentario:

Borrar Datos
Enviar Datos

Barra del navegador

Texto en barra del navegador


Para poner un texto que se vea en la barra del navegador en tu web tienes que poner
lo siguiente: (en body)

<script language="JavaScript">
<!-- //
var txt="Pon aqui el texto que quieras";
var espera=120;
var refresco=null;
function rotulo_status() {
window.status=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_status()",espera);
}
// --></script>Mira la barra de status (abajo)
<SCRIPT language="JavaScript" SRC="/include
/frames.js">
</SCRIPT>
TIENES QUE PONER AL FINAL DE LAS
CARACTERSTICAS DE TU WEB (color de links, etc.)
onload="rotulo_status();">

Fijate en la barra de tu navegador

Terremoto

Terremoto
Para poner un efecto terremoto en tu web tienes que poner lo siguiente:

en body
<BODY leftmargin=0 topmargin=0 bgcolor="WHITE"
onload="terremoto(10)">
<Script Language="Javascript"><!-var ie4,nn4;
if (document.all)ie4=true;
if (document.layers)nn4=true;
function terremoto(cuenta) {
if (nn4 || ie4) {
for (i = 13; i > 0; i--) {
for (j = cuenta; j > 0; j--) {
self.moveBy(0,i);
self.moveBy(i,0);
self.moveBy(0,-i);
self.moveBy(-i,0);}
}}}
//--></script>

El ejemplo lo has visto al entrar, si lo quieres volver a ver, actualiza la pagina.

Texto que va apareciendo

Texto que va apareciendo


Para poner un texto que vaya apareciendo (Ej abajo) en tu web tienes que poner
lo siguiente:

<form name="form1" method="get">


<p align="left">&nbsp;<input type="text"
name="scrolltext1" value="Viva er beti manque pierda"
size="40"></p>
</form>

Aqui esta el ejemplo del texto que va apareciendo:

Viva er beti manque pierda

Color de los links

Color de los links


Para cambiar el color de tus links al pasar por encima en tu web tienes que
poner lo siguiente:

<STYLE type="text/css">
<!-A:link {COLOR: red; TEXT-DECORATION: none}
A:visited {COLOR: gray; TEXT-DECORATION:
none}
A:active {TEXT-DECORATION: none}
A:hover {COLOR: blue; TEXT-DECORATION:
underline} -->
</STYLE>
</head>
<body>
<p><a href="l1.htm">El texto que quieras.
</a><br>
<a href="l2.htm">otro texto.</a><br>
<a href="l3.htm">Otro texto.</a><br>
</p>

Demostracin de cambio de links


SLO PASA EL RATN POR ENCIMA, PUES LOS LINKS QUE PUSE NO EXISTEN !!.
Indice
Principio
Actualiza