Todo Sobre Javascript

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>
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>
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>
onClick="alert('¡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...>
Cambiar de contenido o perder el cursor
<TEXTAREA...>
onFocus
Conseguir el cursor
onSelect
Seleccionar texto
<TEXTAREA...>
<LAYER...>
<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>
</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>
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>
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>
if (document.images) {
var activado=new Image();
activado.src="encendido.gif";
var desactivado= new Image();
desactivado.src="apagado.gif";
}
function activar(nombreImagen) {
document[nombreImagen].src=activado.src; }
}
function desactivar(nombreImagen) {
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>
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>
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>
</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>
</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>
</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>
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>
function RandomNumber() {
today = new Date();
num= Math.abs(Math.sin(today.getTime()));
2 of 4
06/22/2015 10:04 AM
JavaScript
return num;
}
</script>
</head>
<body>
<!-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>
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
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
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%">
<FRAME SRC="cell.html">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
</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
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>
</HEAD>
<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>
</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
<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
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
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>
</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>
1 of 3
06/22/2015 10:05 AM

</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>
</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
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

</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
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>
</HEAD>
<FRAMESET COLS="295,*">
<FRAMESET ROWS="100%,*">
<FRAME SRC="loadtwo.htm" NAME="fr1">
</FRAMESET>
<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>
</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
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
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
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>
</head>
<body>
<form name="first">
1 of 3
06/22/2015 10:06 AM
JavaScript
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
<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
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
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
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>

<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>
</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>
<BODY>
2 of 3
06/22/2015 10:08 AM
JavaScrip
<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>

<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
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
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>
2 of 4
06/22/2015 10:09 AM
JavaScript
</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
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
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
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.
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
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
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
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

refiere a una ventana de nivel superior del
navegador.
06/22/2015 10:09 AM
window

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
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
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
Location
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
Navigator
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
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
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
[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
Arreglo
Forms
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
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
Checkbox
Propiedades
Metodos
Arreglo Elements
Propiedades
Metodos
Hidden
Propiedades
Metodos
11 of 13
06/22/2015 10:09 AM
Arreglo Options
Propiedades
Metodos
Elementos del arreglo Options Propiedades
Metodos
Password
Propiedades
Metodos
Radio
Propiedades
Metodos
Select
Propiedades
Metodos
Text
Propiedades
Metodos
Textarea
Propiedades
Metodos
Reset
Propiedades
Metodos
Submit
Propiedades
Metodos
12 of 13
06/22/2015 10:09 AM
13 of 13
06/22/2015 10:09 AM
Javascript
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
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>
... 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
=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>
<BODY>
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>
document.write("Si ests interesado en la msica Rock visita " +
"Duendedeleyenda".link("http://www.iespana.es/duendedeleyenda").big())
// Fin esconder -->
</SCRIPT>
<BODY>
</BODY>
</HTML>
2 of 3
06/22/2015 10:10 AM
JavaScript
Nota ademas que active status en esta ventana.
5. Funcion que convierte Decimal en Hexadecimal

Nota ademas que active toolbar en esta ventana, y mira el cdigo fuente de ella.
6. Hora coordinada universal

<HEAD>
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>

</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
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>
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
<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
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>
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>

</script>
Preguntar nombre
</head>
DESPUES, DONDE LO QUIERAS...

<form name="form1" method="get">
<p align="left"> <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;Ole</option>
<option
value="http://www.sol.es
/buscar.asp?selector=Alguna+de+las+palabras&
amp;formato=formato+completo&buscar="> Sol</option>
<option value="1">Extranjeros</option>
<option
value="http://www.altavista.digital.com/cgi-bin/query?pg=q&
amp;what=web&kl=XX&q="> Altavista</option>
<option
value="http://search.excite.com/search.gw?trace=a&search=">&
nbsp; Excite</option>
<option value="http://search.yahoo.com/bin/search?p="> &
nbsp;Yahoo</option>
<option
Buscador en tu web
value="http://www.lycos.com/cgi-bin/pursuit?query=java"> &
nbsp;Lycos</option>
<option
value="http://webcrawler.com/cgi-bin/WebQuery?searchText="> &
nbsp;WebCrawler</option>
<option value="1">Metabuscadores</option>
<option
value="http://www.metacrawler.com/crawler?general="> &
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
'mover'</FONT></STRONG></DIV>
<LI>
<DIV style="CURSOR: hand"><STRONG><FONT
'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"> </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
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
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> </td>
<td><p align="center"><input
type="button" name="cod"
value="Oculta"
onclick="codifica(txt.value);"> </p>
</td>
<td> </td>
<td> </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>
/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">  </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>
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">

</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"
La peor que he viso jamas:
<INPUT TYPE="radio" NAME="radio"
value="Tienes el gusto muy malo"
</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:
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>
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>
name="direccion"></td>
</tr>
<tr>
<td align="right"><strong>Cmo me has encontrado?:
</strong></td>
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>Mira la barra de status (abajo)
/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"> <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

Todo Sobre Javascript

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Todo Sobre Javascript

Transféré par

Droits d'auteur :

Formats disponibles

INTRODUCCIN

Y aqu est nuestro ejemplo funcionando:

En realidad, podramos haber escrito lo siguiente:

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

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

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

No podemos sobreescribir estos atributos, pero s leerlos.

Aqu tienes una pequea gua de eventos definidos en JavaScript.

Terminar de cargarse una pgina

Salir de una pgina (descargarla)

onMouseOver Pasar el ratn por encima

onMouseOut Que el ratn deje de estar encima

Elementos que lo admiten

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

Este objeto permite la identificacin de un evento con el atributo

entre otras cosas. As, por ejemplo, podramos

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

Crear nuevas ventanas.

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

Simplemente escribe el texto en la barra de

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

Volver a la pgina anterior.

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

Y este es nuestro ejemplo funcionando:

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

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

el valor por defecto de la barra de estado

formulario de tipo radio seleccionado tiene el atributo

y cada pregunta tiene la siguiente estructura:

a "bien". Teniendo en cuenta que el array

todos los elementos

function hacerGalleta(nombre, valor) {

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

Este es el nmero de veces que has entrado: 1

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

Cmo pueden ser los scripts de JavaScript ejecutados?

Ahora puede probar este script de nuevo:

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

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

Introduccion a JavaScript - Parte3

Ensaye este script

Introduccion a JavaScript - Parte3

Introduccion a JavaScript - Parte3

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

Introduccion a JavaScript - Parte3

Introduccion a JavaScript - Parte4

No le parece vacansimo? Aqu est el script:

Introduccion a JavaScript - Parte4

Introduccion a JavaScript - Parte4

Introduccion a JavaScript - Parte5

Introduccion a JavaScript - Parte5

Introduccion a JavaScript - Parte6

Introduccion a JavaScript - Parte6

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

Introduccion a JavaScript - Parte6

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

Diferencia con JAVA

1. En el cuerpo del documento

3. Usando manejadores de evento

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

4. Haciendo una llamada a funcin

Nmeros Pueden ser nmeros enteros o reales

Cuanquier cosa que este encerrado entre comillas. Pueden ser