Libro Java Script

APRENDA A DISEAR PGINAS WEB
CON JAVA SCRIPT
Mg. Emigdio Alfaro
NDICE
INTRODUCCIN...........................................................................................................4
CAPTULO 1: HISTORIA.............................................................................................5
ORGENES DE JAVASCRIPT.............................................................................................5
CUESTIONARIO DE REPASO............................................................................................6
CAPTULO 2: CARACTERSTICAS FUNDAMENTALES DE JAVASCRIPT....6
QU ES JAVASCRIPT?...................................................................................................6
JAVA Y JAVASCRIPT.......................................................................................................8
CUESTIONARIO DE REPASO..........................................................................................10
CAPTULO 3: COMENTARIOS...............................................................................11
EJERCICIOS PROPUESTOS.....................................................................................11
CAPTULO 4: TIPOS DE DATOS.............................................................................12
GENERALIDADES....................................................................................................12
FUNCIONES QUE MANIPULAN TIPOS DE DATOS............................................14
CAPTULO 5: VARIABLES Y CONSTANTES.......................................................20
EJERCICIOS PROPUESTOS.............................................................................................22
CAPTULO 6: PALABRAS RESERVADAS.............................................................23
CAPTULO 7: OPERADORES...................................................................................24
OPERADORES ARITMTICOS.........................................................................................24
OPERADORES LGICOS ...............................................................................................24
OPERADORES A NIVEL DE BITS....................................................................................25
OPERADORES DE ASIGNACIN.....................................................................................25
OPERADORES DE COMPARACIN.................................................................................26
OPERADORES DE CADENA............................................................................................26
PRECEDENCIA DE OPERADORES..................................................................................27
CAPTULO 8: INSTRUCCIONES CONDICIONALES..........................................34
EXPRESIN CONDICIONAL...........................................................................................34
SENTENCIA IF - ELSE....................................................................................................36
CAPTULO 9: INSTRUCCIONES DE BUCLE........................................................38
INSTRUCCIN FOR........................................................................................................38
INSTRUCCIN WHILE...................................................................................................39
INSTRUCCIN BREAK...................................................................................................39
INSTRUCCIN CONTINUE..............................................................................................41
INSTRUCCIN WITH.....................................................................................................41
CAPTULO 10: CREACIN DE OBJETOS Y FUNCIONES.................................43
CREACIN DE FUNCIONES............................................................................................43
CREACIN DE OBJETOS................................................................................................44
CAPTULO 11: OBJETOS PREDEFINIDOS...........................................................49
OBJETO WINDOW.........................................................................................................51
OBJETO DOCUMENT.....................................................................................................52
OBJETO FORM..............................................................................................................53
OTROS OBJETOS INCORPORADOS.................................................................................54
CAPTULO 12: EVENTOS..........................................................................................97
EVENTO BLUR.............................................................................................................97
EVENTO CLICK.............................................................................................................97
EVENTO CHANGE.........................................................................................................97
EVENTO FOCUS............................................................................................................98
EVENTO LOAD.............................................................................................................98
EVENTO UNLOAD .......................................................................................................98
EVENTO MOUSEOVER.................................................................................................98
EVENTO MOUSEOUT...................................................................................................98
EVENTO SELECT..........................................................................................................99
EVENTO SUBMIT..........................................................................................................99
EJERCICIOS PROPUESTOS...........................................................................................100
CAPTULO 13: COOKIES.......................................................................................148
APNDICE A: COLORES.........................................................................................154
APNDICE B: WEB SITES INTERESANTES ACERCA DE JAVASCRIPT....157
APNDICE C: GLOSARIO DE TRMINOS.........................................................157
INTRODUCCIN
Mediante este texto deseo darles los fundamentos bsicos sobre cmo programar
pginas web usando el lenguaje JavaScript, una de las ms poderosas herramientas para
mejorar el diseo y efectos de nuestras pginas web.
Para poder entender con mayor facilidad el contenido de este texto, es necesario que el
lector posea conocimientos sobre el lenguaje C o C++. Esto contribuir enormemente
al aprendizaje.
Adems, es necesario que el lector posea conocimientos sobre el lenguaje HTML
(Hiper Text Markup Language), el lenguaje de etiquetas por excelencia que se coloca en
una pgina web.
JavaScript es una herramienta poderossima para realizar aplicaciones web. Con
JavaScript podemos colocar en una pgina web aplicaciones complejas como:
programas de dibujo, hojas de clculo, aplicaciones de clculo mtemtico, etc.
JavaScript se presenta como un lenguaje que aproxima las funcionalidades de un
potente lenguaje como Java y del lenguaje HTML. El cdigo JavaScript que se muestra
en este texto, podr ser colocado fcilmente en nuestras pginas web y podremos
dotarlas de mayor detalle y funcionalidad.
Ahora los invito a que disfruten aprendiendo las bondades que nos ofrece el lenguaje
JavaScript.
Atentamente
El Autor
CAPTULO 1: HISTORIA
ORGENES DE JAVASCRIPT
El lenguaje JavaScript fue creado por la empresa Netscape Communications, los
creadores del explorador de Internet "Netscape Navigator Communicator". En 1995,
justo despus de que Sun Microsystems anunciara la aparicin del lenguaje Java,
Netscape Communications introdujo JavaScript en la versin 2.0 del Netscape
Navigator Communicator.
Cuando Netscape Communications desarroll JavaScript lo hizo bajo el nombre de
Mocha. Cuando apareci por primera vez en el Netscape Navigator Communicator lo
hizo bajo el nombre de LiveScript. Finalmente, se le puso el nombre de JavaScript para
llamar la atencin de los medios y la industria informtica sobre el hecho de que sus
funcionalidades eran parecidas a las de Java (luego de haber hecho una alianza con Sun
Microsystems).
JavaScript fue creado como un lenguaje fcil de utilizar, abierto, de plataforma cruzada,
capaz de enlazar objetos y recursos propios tanto de HTML como de Java. Si las
miniaplicaciones de Java son fruto principalmente del trabajo de los programadores,
JavaScript fue concebido para que pudieran usarlo los creadores de las pginas HTML
para controlar dinmicamente la interaccin y el comportamiento de sus pginas.
JavaScript tiene la particularidad de haber sido diseado para integrarse con HTML.
Justo despus de que Netscape Communications pusiera a la venta el lenguaje
JavaScript, la empresa Microsoft puso a la venta el JScript con caractersticas muy
similares al JavaScript. Esto no fue bueno desde el punto de vista del usuario de
Internet, ya que la tendencia es a la estandarizacin para que las pginas web puedan ser
vistas en todos los exploradores de Internet del mundo. Desde entonces, ambas
compaas realizaron esfuerzos conciliatorios para unificar el cdigo de ambos tipos de
JavaScript.
En la actualidad, JavaScript se usa con mayor frecuencia que Java, Active X, VBScript,
complementos para el explorador de Internet u otras herramientas que pueden
encontrarse en el cdigo de una pgina web. Adems, los exploradores de Internet ms
usados en el mundo: Microsoft
Internet Explorer y Netscape Navigator
Communicator ofrecen la mejor compatibilidad con JavaScript.
CUESTIONARIO DE REPASO
1. Qu empresa fue la que lanz el lenguaje Java?
2. En qu ao se lanz al mercado el Lenguaje LiveScript?
3. Qu nombres ha recibido el lenguaje JavaScript durante su desarrollo,
lanzamiento y maduracin?
4. Qu empresas fueron las que popularizaron el lenguaje JavaScript?
5. Qu empresa desarroll el lenguaje JScript?
6. Son compatibles con JavaScript los exploradores de Internet ms importantes?
7. Se puede trabajar JavaScript junto con HTML?
8. Qu se puede lograr con el lenguaje JavaScript?
9. Cul es el lenguaje ms usado en aplicaciones Internet?
CAPTULO 2: CARACTERSTICAS FUNDAMENTALES

DE JAVASCRIPT
QU ES JAVASCRIPT?
JavaScript es un lenguaje basado en objetos, con un tipado relajado (tipos de datos
flexibles), vinculacin dinmica y que puede ser interpretado por el explorador de
Internet .
Con JavaScript es posible responder a determinadas acciones del usuario, tales como:
pulsaciones del ratn, movimientos del ratn sobre un vnculo y creacin de una entrada
de datos. Tambin permite crear pginas web dinmicas que cambian a solicitud del
usuario, e incluso ejecutar sonidos o miniaplicaciones cuando un usuario entra o

abandona la pgina web. Este tipo de facilidad a nivel del cliente permite una enorme
capacidad de interactividad con los usuarios de la pgina web.
El lenguaje JavaScript se parece a Java, pero es ms sencillo y ms facil de aprender.

Una aplicacion en JavaScript puede tener tan slo una lnea u ocupar varias pginas. Su
complejidad depende del grado en que sus instrucciones hayan de interactuar con la
pgina web en que se encuentra dicha aplicacin. Para la mayora de los diseadores de
paginas Web, una de las primeras utilidades de JavaScript se da en la validacin de
formularios. Se llama as a la capacidad de un formulario en HTML para comprobar los
datos introducidos por un usuario antes de enviarlos, hecho que mejora notablemente las
prestaciones en su servidor y que a la vez disminuye el tiempo de espera del usuario.
Los recursos necesarios para poder utilizar y programar en JavaScript son pocos. Este
es uno sus aspectos ms atractivos, ya que cualquier persona puede emplearlo
directamente para crear sus propias aplicaciones. Los requisitos de hardware necesarios
para ejecutar JavaScript son los mismos que se necesitan para ejecutar Netscape
Navigator Communicator o Microsoft Internet Explorer; es decir, si puedes utilizar tu
explorador de Internet, tienes todo el hardware y software necesario para ejecutar
aplicaciones JavaScript.
Para crear pginas web que contengan funciones JavaScript es posible emplear
cualquier editor de texto (incluso el Notepad del Microsoft Windows o el edit.exe del
DOS). Y como JavaScript no necesita compilacin, en cuanto el programa este grabado
podr ser probado directamente en el explorador de Internet. Tambin puede utilizarse
software para diseo de pginas web como el Microsoft Front Page 2000 o el Microsoft
Visual Interdev, que facilitan la tarea de edicin del cdigo fuente y la visualizacin de
los resultados.
Para que el explorador de Internet reconozca que un achivo que contiene funciones de
JavaScript, dichas funciones se han de colocar entre dos etiquetas especiales:
<SCRIPT LANGUAGE="JavaScript">
// Aqu va todo el cdigo fuente en JavaScript
</SCRIPT>
Si omitimos colocar el atributo LANGUAGE, el explorador de Internet asumir que se
trata de JavaScript:
<SCRIPT>
// Aqu va todo el cdigo fuente en JavaScript
</SCRIPT>
Para ejecutar cdigo JavaScript, slo debemos visualizar la pgina web en el explorador
de Internet y se podr observar los resultados de las funciones de forma inmediata. Las
aplicaciones JavaScript pueden comprobarse localmente sin necesidad de estar
conectado a ninguna red. Cuando visualizamos una pgina web con JavaScript puede
salirnos el resultado esperado (o algo parecido) o bien puede salir un mensaje de error
indicando el nmero de la lnea donde se produjo la instruccin no vlida.
Una de las ventajas principales que ofrece JavaScript es su capacidad de reducir el
trfico de red, permitiendo realizar localmente las tareas ms simples. En otras palabras:
en lugar de encomendar esas tareas al servidor y hacer que este pase los resultados al
explorador de Internet, este ltimo puede realizar algunas de esas tareas a nivel local,
logrndose que el usuario obtenga sus respuestas en un tiempo ms corto.
Tambin existe cdigo de JavaScript que puede ejecutarse en el lado del servidor. La
clase de JavaScript que permite hacer esto se denomina LiveWire.
NOTA: Cuando desarrolles una pgina web con JavaScript, debes asegurarte de
que funcione tanto en el Microsoft Internet Explorer como en el NetScape Navigator
Comunicator, ya que no sabemos qu explorador est usando la persona que se
encuentra visitando nuestro web site.
JAVA Y JAVASCRIPT
Primero debemos conocer un poco acerca de las caractersticas del lenguaje Java. Java
es un lenguaje de programacin orientado a objetos similar a C++, tiene un fuerte
tipado (deben de declararse los tipos de datos variables), vinculacin esttica (la
referencia a objetos debe existir al momento de la compilacin) y se debe compilar.
JavaScript y Java se apoyan en los mismos principios bsicos:
Son lenguajes de programacin con comandos y sintaxis similares.
Estn orientados a objetos
Son abiertos
Su sintxis es similar a la del lenguaje C o C++; por lo tanto, tenemos que

considerar a la hora de programar que los nombres de las variables y funciones son
sensibles a las maysculas y otro tipo de consideraciones que se tienen al momento
de programar en C o C++.
Poseen plataforma cruzada.
Sin embargo, JavaScript es un lenguaje interpretado (no compilado como el Java), lo

que significa que el cdigo JavaScript se ejecuta directamente en el explorador de
Internet y no requiere compilacin anterior a la ejecucin. Adems, JavaScript tiene un
conjuto de tipos de datos ms reducido.
JavaScript no tiene clases ni herencia; sin embargo, tiene un conjunto de objetos

predefinidos que requieren un esfuerzo mnimo en su creacin y que pueden ser
ampliados de forma que se acomoden a las necesidades del programador.
Por ser un lenguaje interpretado, todas las referencias que se hacen a los objetos se
comprueban en el momento de la ejecucin; mientras que Java requiere que todas las
referencias existan en tiempo de compilacin. Adems en JavaScript las variables no
necesitan declaracin.
Otra diferencia importante es que el cdigo JavaScript se encuentra includo dentro de

la pgina HTML, mientras que las miniaplicaciones Java son referenciadas mediante la
etiqueta APPLET, pero el cdigo compilado se encuentra en un archivo separado (con
extensin cls). Algunas herramientas de desarrollo de pginas web, permiten lograr un
cdigo compilado de JavaScript de manera que puede ser llevado en un archivo
separado (archivo con extensin js) y no permite la visibilidad del cdigo fuente, el cual
podra ser daado o copiado por otra persona.
NOTA: JavaScript fue pensado para que fuera un lenguaje seguro. No permite el
uso de punteros, lo cual es la causa ms frecuente de violaciones de seguridad.
Adems al ser un lenguaje interpretado, no hay problemas de tiempo de compilacin y
asignacin de memoria, que es otra fuente potencial de violaciones de la seguridad.
Para minimizar la eficacia de programas malintencionadamente creados, JavaScript
no permite incorporar cdigos grabados en disco.
Una de las caractersticas ms importantes de JavaScript es su capacidad para
interactuar directamente con las aplicaciones Java.
En el cdigo Java, pueden
encontrarse tiles propiedades que permiten que una aplicacin en JavaScript alcance o
fije tales propiedades y modifique as el estado o las prestaciones de la aplicacin Java.
Tambin puede solicitar o modificar las prestaciones de los plug-ins (herramientas que
vienen junto al explorador de Internet).
1. Es JavaScript un lenguaje orientado a objetos?
2. Cul es la funcionalidad que le dan a JavaScript la mayora de diseadores de
pginas web?
3. Qu recursos de hardware y software se necesitan para poder desarrollar pginas
web con JavaScript?
4. Qu recursos de hardware y software necesita JavaScript para poder ser
ejecutado?
5. Qu tipo de etiquetas podemos utilizar en nuestra pgina web para poder declarar
o ejecutar funciones de JavaScript?
6. Qu resultados puedo obtener cuando ejecuto una pgina web con JavaScript?
7. Cules son las similitudes ms importantes del lenguaje JavaScript con el
lenguaje Java?
8. Cules son las diferencias ms importantes del lenguaje JavaScript con el
lenguaje Java?
9. Puedo ejecutar cdigo JavaScript en el servidor?
10. Cmo se llama la clase de JavaScript que permite ejecutar cdigo en el lado del
servidor?
CAPTULO 3: COMENTARIOS
Tenemos dos formas para colocar comentarios dentro de las etiquetas de JavaScript:
/*
Comentario de varias lneas.

Requiere ser cerrada con los caracteres * y / juntos */
//
Comentario de una sla lnea. Puede ocupar toda la lnea o slo parte de ella. No necesito cerrarla.
Tambin es posible ocultar el cdigo JavaScript para los exploradores de Internet que
no sean compatibles con JavaScript:
<SCRIPT>
 Esta etiqueta finaliza el comentario. La instruccin // oculta el comentario HTML desde JavaScript
</SCRIPT>
NOTA: No debemos olvidarnos de ocultar nuestro cdigo para los exploradores de

Internet que no son compatibles en JavaScript, ya que sino se visualizarn errores
graves al momento de cargar nuestra pgina web.
1. De qu forma podemos colocar comentarios de una sla lnea en JavaScript?
2. De qu forma podemos colocar comentarios de varias lneas en JavaScript?
3. De qu forma podemos ocultar los comentarios de JavaScript de los exploradores
de Internet que no son compatibles con este lenguaje?
EJERCICIOS PROPUESTOS
1. Realice usted dos ejemplos diferentes en los cuales coloque comentarios de una
sla lnea. Sugerencia: Puede ser un comentario al inicio de la lnea y otro a la
mitad de una lnea, despus de una instruccin de JavaScript.
2. Cree usted dos ejemplos diferentes en los cuales coloque comentarios de una varias
lneas.
3. Cree usted dos ejemplos mediante los cuales pueda ocultar el cdigo JavaScript de
exploradores de Internet que no son compatibles.
CAPTULO 4: TIPOS DE DATOS

GENERALIDADES
Las aplicaciones en JavaScript pueden manejar numerosos tipos de datos diferentes:
nmericos (enteros y reales), de texto, fecha y booleanos. Adems JavaScript puede
decidir por el programador qu tipo de variable debera emplearse durante la ejecucin
de la secuencia de rdenes.
Los tipos de datos son convertidos automticamente cuando se ejecuta la aplicacin en
JavaScript. Para ello, no importa lo compleja que sea la conversin, JavaScript realiza la
conversin de izquierda a derecha; es decir, el operando de la derecha ser convertido
al tipo del operando de la izquierda. Sin embargo, si tenemos cadenas como operandos
y la operacin suma, esta regla no se cumple ya que los dems tipos de datos son
convertidos a cadenas.
Ejemplos:
Se tienen las variables:
variable1 = "20" //En JavaScript no es indispensable colocar el ; al final
variable2 = 50
y luego se indican las siguientes instrucciones:

ResultadoA = variable1 + variable2
ResultadoB = variable2 + variable1

ResultadoC = variable1 * variable2
ResultadoD = variable2 * variable1
En la primera instruccin, la variable ResultadoA contendr la cadena "2050" y en la

segunda instruccin, la variable ResultadoB contendr la cadena "5020".
En la tercera instruccin, el valor de la variable ResultadoC ser 20*50 = 1000, ya que
la instruccin convertir variable1 en un nmero ya que el operando de la izquierda
variable2, es un nmero.
En la tercera instruccin, el valor de la variable ResultadoD ser 50*20 = 1000, ya que
la instruccin convertir variable1 en un nmero ya que el operando de la izquierda
variable2, es un nmero y la operacin es diferente a la suma.
Veamos el siguiente ejemplo:
variable1 = "Gauss Data International"
variable2 = 20
ResultadoE = variable1 + variable2
ResultadoF = variable2 + variable1
El valor de la variable ResultadoE ser "Gauss Data International20" y el valor de la

variable ResultadoF ser "20Gauss Data International".
Veamos el siguiente ejemplo:
variable1 = "Gauss Data International"
variable2 = 20
ResultadoG = variable1 * variable2
ResultadoH = variable2 * variable1
El valor de la variable ResultadoG, as como el valor de la variable ResultadoH no se

puede encontrar dado que no es posible multiplicar una cadena de caracteres (que no
represente un nmero) con un nmero.
FUNCIONES QUE MANIPULAN TIPOS DE DATOS

Aunque el JavaScript realiza algunas conversiones de tipos de datos de manera
automtica, tambin posee algunas funciones que nos permiten manipularlos. Veamos
algunas de ellas:
1. indexOf. Nos permite determinar la posicin en la cual se encuentra un caracter
dentro de una cadena de caracteres (si el caracter est dentro de la cadena). Si el
caracter no se encuentra dentro de la cadena, retornar -1. La primera posicin tiene
el valor 0. Sintaxis:
CadenaCaracteres.indexOf(Caracter)
Ejemplo:
var Variable = "12.75";
var Posicion = Variable.indexOf("."); //Posicin tendr el valor 2
2. charAt. Nos permite encontrar el caracter que se encuentra en la posicin que se
indica. Sintaxis:
CadenaCaracteres.charAt(Posicin)
Ejemplo:
var Caracter = Variable.charAt(2); //Caracter tendr el valor "."
3. substring. Nos permite encontrar la cadena de caracteres que se encuentra entre dos
posiciones dadas. Sintaxis:
CadenaCaracteres.substring(PosicinInicial, PosicinFinal)
Ejemplo:
var Variable = "abcde";
var Subcadena = Variable.substring(1,3); //Subcadena tendr el valor "bc"
4. parseInt. Nos permite converir el valor de una variable dada a un entero. Sintaxis:
parseInt (Variable)
Ejemplo:
var Variable = "12";
var Valor = parseInt(Variable); //Valor ser en valor entero 12
5. parseFloat. Nos permite converir el valor de una variable dada a un real. Sintaxis:
parseFloat (Variable)
Ejemplo:
var Valor = parseFloat(Variable); //Valor ser en valor real 12.5
NOTA: Las apliciones ms importantes de estas funciones se dan en la validacin de
los datos ingresados en los formularios.
1. Es posible manipular tipos de datos diferentes en JavaScript?
2. Puede JavaScript realizar la conversin de tipos de datos de manera automtica?
3. Cmo realiza la conversin de tipos de datos el lenguaje JavaScript?
1. Cree una pgina web y coloque en un mensaje el valor de la variable ResultadoA
luego de ejecutar las siguientes instrucciones:
variable2 = 200
Sugerencias:
a) Coloque las etiquetas de JavaScript y ocltelas de los exploradores que no son

compatibles con JavaScript.
b) Escriba las instrucciones indicadas dentro de estas etiquetas.
c) Para poder visualizar el valor de la variable ResultadoA, use la funcin alert
cuya sintaxis es: alert(CadenaCaracteres).
El cdigo fuente resultante se puede ver a continuacin:
<SCRIPT>
<!-variable1 = "100" //En JavaScript no es indispensable colocar el ; al final
variable2 = 200
alert(ResultadoA) //Se hace la conversin a cadena de manera automtica
-->
</SCRIPT>
El resultado que podemos visualizar en la pgina web es el siguiente:
2. Cree una pgina web y coloque en un mensaje el valor de la variable ResultadoD

variable2 = 200

<SCRIPT>
<!-variable1 = "100" //En JavaScript no es indispensable colocar el ; al final
variable2 = 200
alert(ResultadoD) //Se hace la conversin a cadena de manera automtica
-->
</SCRIPT>
3. Cree una pgina web y coloque en un mensaje el valor de la variable ResultadoE

variable1 = "Gauss Data International" //En JavaScript no es indispensable colocar el ; al final
variable2 = 200

<HTML>
<HEAD>
<SCRIPT>
<!-variable1 = "Gauss Data International"
variable2 = 200
alert(ResultadoE)
-->
</SCRIPT>
</HEAD>
</HTML>
-----------------------------------------------------------------------------4. Cree una pgina web que indique la posicin del punto decimal en un nmero
cualquiera.
<HTML>
<HEAD>
<SCRIPT>
var Posicion = Variable.indexOf(".")+1; //Posicin tendr el valor 4
alert("Variable: " + Variable + " Posicin del punto: " + Posicion);
</SCRIPT>
</HEAD>
</HTML>
El resultado es el siguiente:
5. Cree una pgina web que indique qu caracter se encuentra en una posicin
determinada de una expresin.
El cdigo fuente es el siguiente:
<HTML>
<HEAD>
<SCRIPT>
var Caracter = Variable.charAt(2); //Caracter tendr el valor "c"
alert("Variable: " + Variable + " Caracter en la posicin 3: " + Caracter);
</SCRIPT>
</HEAD>
</HTML>
6. Cree una pgina web que obtenga los caracteres en las posiciones 2 y 3 de la
expresin "abcde".
<HTML>
<HEAD>
<SCRIPT>
var Subcadena = Variable.substring(1,3); //Subcadena tendr el valor "bc"
alert("Variable: " + Variable + " Subcadena posiciones 2 y 3: " + Subcadena);
</SCRIPT>
</HEAD>
</HTML>
-------------------------------------------------------------------------------
CAPTULO 5: VARIABLES Y CONSTANTES

Los nombres de las variables en JavaScript distinguen entre maysculas y minsculas
y deben comenzar por una letra o un guin de subrayado.
Los tipos de valores que puede contener una variable JavaScript son:
Nmeros
Operadores lgicos (booleanos)
Cadenas
La palabra clave null asigna valores nulos a las variables.

En
JavaScript usa un nico tipo de datos para los nmeros; es decir, el nmero JavaScript
puede contener enteros, reales y dobles sin tener que recurrir a tipos diferentes
especializados. Adems JavaScript maneja los objetos de datos con el mismo tipo de
datos.
Para declarar las variables en JavaScript se utiliza la instruccin var. A cada variable se
le asigna un nombre, y opcionalmente, un valor inicial. Si no se trata del nombre de una
funcin, la instruccin var es opcional; pero, se recomienda utilizarla para evitar llamar
con el mismo nombre a variables locales y globales.
Las variables locales se declaran generalmente dentro de una funcin para que slo esa
funcin pueda utilizar la variable. Las variables globales se declaran fuera de toda
funcin para que se puedan utilizar en todas las funciones.
La sintaxis para la instruccin var es la siguiente:
var nombreVariable1[=valor ] [..., nombreVariableN[=valor]]

Ejemplo:
var Invitados = 100, Presentados = 50, ProporcionAsistentes = 50/100;
Los valores iniciales que pueden asignarse a las variables se denominan literales. Estos
tipos de valores no son variables, sino, ms bien, expresiones constantes de valores para
tipos de datos.
A continuacin se explicar en detalle los distintos tipos de literales:
Valores literales para nmeros. Pueden utilizarse tres bases distintas para nmeros
enteros: la decimal (base 10), la hexadecimal (base 16) y la octal (base 8).
Para especificar un literal en base decimal se emplea una serie de dgitos sin ceros
por delante. Ejemplos: 23, 19, 5, 10, etc.
Para especificar un literal en base octal , se antepone un cero ( 0 ) al nmero. Los
literales en base octal slo pueden incluir los dgitos del 0 al 7. Ejemplos: 010, 05,
03, 01, etc.
Para especificar un literal en hexadecimal se antepone al nmero 0x (o 0X). Los
literales hexadecimal incluyen los dgitos del 0 al 9 y las letras de la A a la F (o a-f ).
Ejemplos: 0xFF, 0XAB6, 0x123, 0xa34, 0xaF45, etc.
Un literal con coma flotante se especifca mediante los siguientes elementos: un

entero decimal, un punto decimal, otro entero decimal, un exponente y algn tipo de
sufijo. El exponente se indica mediante una e o E seguida por un entero positivo o
negativo (se coloca delante el signo + o -). Un literal con coma flotante debera
constar como mnimo de un dgito ms una coma decimal o e o E. Ejemplos: 5.5,
0.44e5, 12E-8, -10.4e18
Los valores literales booleanos se especifican mediante verdadero o falso (true o
false respectivamente).
Los valores literales de cadena se especifican empleando cero o ms caracteres

dentro de unas comillas dobles o sencillas. Ejemplos: "Gauss",
"Data", "International", "123 Gauss Data International"
Los literales de cadena pueden contener tambin caracteres especiales. Por ejemplo:
"Gauss \n Data \t International".
A continuacin se presenta una lista de caracteres especiales:
\n ==> salto de lnea
\r ==> retorno de carro
\t ==> tabulador
\b ==> retroceso
\f ==> salto de pgina
1. Es igual definir una variable como Total o total, en JavaScript? Son la misma
variable?
2. Cul es el valor de la variable Resultado en el siguiente conjunto de instrucciones?
total = 10
Total = 20
Resultado = total + Total
resultado = Total / total
3. Qu tipo de valores puede contener una variable JavaScript?

7. Qu tipo de valores numricos puede contener una variable JavaScript?
8. Qu tipo de valores booleanos puede contener una variable JavaScript?
9. Qu tipo de valores de cadena puede contener una variable JavaScript?
10. Diga Ud. si son correctos los literales: 0XJ5B9, 0987B, 5ABF, 1234C, 0x1234C,
012345.
1. Pruebe los resultados que se logran al multiplicar los literales 0x10B y 076 usando
la funcin alert descrita en un captulo anterior.
2. Combine diferentes tipos de operaciones con los literales numricos y vea el
resultado que se obtiene.
3. Combine diferentes tipos de operaciones con los literales alfanumricos (cadenas) y
vea el resultado que se obtiene.
CAPTULO 6: PALABRAS RESERVADAS

Las siguientes palabras reservadas no pueden ser empleadas como nombres de
variables, mtodos (funciones) u objetos.
abstract
extends
int
super
boolean
false
interface
switch
break
final
long
synchronized
byte
finally
native
this
case
float
new
throw
catch
for
null
throws
char
function
package
transient
class
goto
private
true
const
if
protected
try
continue
implements
public
var
default
import
return
void
do
in
short
while
double
instanceof
static
with
else
1. Es posible declarar una variable como True, TRUE o TrUe?
2. Es posible declarar un mtodo como InstanceOf?
3. Es posible declarar un objeto como Short?
4. Es posible declarar un objeto como Class?
CAPTULO 7: OPERADORES
OPERADORES ARITMTICOS
OPERADOR
FUNCIN
EJEMPLO
Suma
X=a+b
Resta
X=a-b
Multiplicacin
X=a*b
Divisin
X=a/b
Mdulo
12 % 5 = 2
++
Incremento
X++
--
Decremento
Y--
Negacin unaria
X = _y
OPERADORES LGICOS
En la siguiente tabla se describen los operadores lgicos.
OPERADOR
FUNCIN
EJEMPLO
&&
Y, verdadero si ambos son verdaderos
expr1 && expr2
||
O, verdadero si uno de los dos es verdadero
expr1 || expr2
NO, niega el operando
!expr1
OPERADORES A NIVEL DE BITS

La siguiente tabla muestra los operadores a nivel de bits:
OPERADOR
FUNCIN
EJEMPLO
&
Y a nivel de bit. Devuelve un uno si los dos operandos

son unos.
x=a&b
O a nivel de bit. Devuelve un uno si algunos de los dos

operandos es uno.
x=a|b
XOR a nivel de bit. Devuelve un uno si un operando es

uno y el otro es cero.
x=a^b
<<
Desplaza bits a la izquierda un nmero especificado de

veces. Los bits que sobran por la izquierda se descartan y
se incluyen los bits cero desde la derecha
x = a << 4
>>
Desplaza bits a la derecha un nmero especificado de

veces. Los bits que sobran por la derecha se descartan y
se incluyen los bits cero desde la izquierda.
x = b >> 5
OPERADORES DE ASIGNACIN
El signo = asigna el valor del operando de la derecha al resultado de la izquierda. Por
ejemplo x=100 asigna el valor 100 a la variable x.
A continuacin se presentan una serie de notaciones abreviadas para las asignaciones.
Estas notaciones se aplican a todos los operadores aritmticos y de bits. Ejemplos:
x += y equivale a x = x + y
x -= y equivale a x = x - y
x *= y equivale a x = x * y
x /= y equivale a x = x / y
x%=y equivale a x = x % y
x <<= y equivale a x =x << y
x >>= y equivale a x =x >> y
OPERADORES DE COMPARACIN
Cuando se establece una comparacin en JavaScript se debe usar un operador de

comparacin entre los dos valores a comparar. Como resultado se obtendr un valor
booleano. Los operadores de comparacin son los siguientes:
OPERADOR
Igual
Diferente
Mayor que
Menor que
Mayor o igual que
Menor o igual que
SMBOLO
==
!=
>
<
>=
<=
OPERADORES DE CADENA
Los operadores de cadena incluyen los operadores de comparacin mencionados
anteriormentey el operador de concatenacin (+).
Ejemplo:
"Gauss" + " " + "Data"

dar como resultado "Gauss Data"
Igualmente si la variable cadena contiene el valor "Gauss", la instruccin

cadena+="Data"
dar tambin como resultado la cadena "Gauss Data".
PRECEDENCIA DE OPERADORES
La siguiente lista muestra la precedencia de los operadores de JavaScript, de menor a
mayor prioridad:
coma,
asignacin =
condicional ?:
o lgico ||
y lgico &&
o a nivel de bit |
xor a nivel de bit ^
y a nivel de bit &
igualdad, desigualdad == !=
relacin < <= > >=
desplazamiento << >>
suma/resta + multiplicacin/divisin/mdulo * / %
negacin/incremento ! ~ - ++ -llamada, miembro ( ) [ ] .
-----------------------------------------------------------------------------Para cada una de las preguntas que se presentan a continuacin, pruebe el valor
resultante y mustrelo en un mensaje en una pgina web usando la funcin alert:
1. Es correcta la expresin Y =x ++ 5? Qu valor tendr Y si x vale 10?
<HTML><HEAD>
x=10;
y=x++5;
alert("x = " + x + "y = x ++ 5 = " + y);
</SCRIPT>
</HEAD></HTML>
2. Es correcta la expresin Y =x ++ * 5? Qu valor tendr Y si x vale 10?

<HTML>
<HEAD>
x=10;
y=x++*5;
alert("x = " + (x-1) + " y = x ++* 5 = " + y);
</SCRIPT>
</HEAD>
</HTML>
3. Es correcta la expresin Y =x * 5++? Qu valor tendr Y si x vale 5?

<HTML><HEAD>
x=5;
y=x*5++;
alert("x = " + x + " y = x*5++ = " + y);
</SCRIPT>
</HEAD></HTML>
4. Es correcta la expresin Y++ =x * 5? Qu valor tendr Y si x vale 10?

<HTML>
<HEAD>
x=10;
y++=x*5;
alert("x = " + x + " y++ = x*5 = " + y);
</SCRIPT>
</HEAD>
</HTML>
El resultado en Microsoft Internet Explorer s el siguiente:
5. Es correcta la expresin Y * =x + 5? Qu valor tendr Y si x vale 20?

<HTML><HEAD>
x=10;
y*=x+5;
alert("x = " + x + " y*=x+5 = " + y);
</SCRIPT>
</HEAD></HTML>
El resultado en Microsoft Internet Explorer es el siguiente:
El resultado en Netscape Navigator es el siguiente:
6. Es correcta la expresin Y / =x + 5? Qu valor tendr Y si x vale 20?

<HTML><HEAD>
x=10;
y/=x+5;
alert("x = " + x + " y/=x+5 = " + y);
</SCRIPT>
</HEAD></HTML>
7. Cul ser el resultado de la expresin (5 & 0) || (x ++) si x vale 10?

<HTML>
<HEAD>
x=10;
y=(5 & 0) || (x++);
alert("x = " + (x-1) + " y=(5 & 0) || (x++) = " + y);
</SCRIPT>
</HEAD>
</HTML>
8. Cul ser el resultado de la expresin !(5 & 0)?

<HTML>
<HEAD>
y=!(5 & 0);
alert("y=!(5 & 0) = " + y);
</SCRIPT>
</HEAD>
</HTML>
9. Cul ser el resultado de la expresin (5 & 0) && (x ++) si x vale 10?

<HTML>
<HEAD>
x=10;
y=(5 & 0) && (x++);
alert("x = " + x + " y=(5 & 0) && (x++) = " + y);
</SCRIPT>
</HEAD>
</HTML>
10. Cul ser el resultado de la expresin (5 & 0) || (x ++) si x vale 10?

<HTML><HEAD><SCRIPT language=JavaScript>
x=10;
y=(5 & 0) || (x++);
alert("x = " + (x-1) + " y=(5 & 0) || (x++) = " + y);
</SCRIPT></HEAD></HTML>
11. Cul ser el resultado de la expresin A > B si el valor de A es "Gauss" y el valor

de B es "Data"?
<HTML><HEAD>
A="Gauss"; B="Data"; alert(A>B);
12. Cul ser el resultado de la expresin A <= B si el valor de A es "Gauss" y el

valor de B es "Data"?
<HTML><HEAD>
A="Gauss";
B="Data";
alert(A<=B);
13. Cul ser el resultado de la expresin A != B si el valor de A es "Gauss" y el

valor de B es "Gauss"?
<HTML><HEAD><SCRIPT LANGUAGE="JavaScript">
A="Gauss"; B="Data"; alert(A!=B);
</SCRIPT> </HEAD> </HTML>
14. Cul ser el resultado de la expresin A > (B + 2) si el valor de A es "Gauss" y el

valor de B es "Gauss"?
A="Gauss"; B="Gauss"; alert(A>(B+2));
15. Cul ser el resultado de la expresin A > B + 2 si el valor de A es "Gauss" y

el valor de B es "Gauss"?
A="Gauss"; B="Gauss"; alert(A>B+2);
------------------------------------------------------------------------------
CAPTULO 8: INSTRUCCIONES CONDICIONALES
EXPRESIN CONDICIONAL
Una expresin condicional en JavaScript es un mtodo para comprobar un valor cuyo

resultado puede ser uno de dos posibles valores. Ejemplo:
mayor_de_edad = (edad >=18) ? "Es mayor de edad" : "No es mayor de edad"
Se comprueba primero la instruccin dentro del parntesis. Si es verdadera se escoge el
primer valor detrs del signo de interrogacin; sino, se escoge el segundo valor detrs
del signo de interrogacin.
SENTENCIA IF - ELSE
Su sintaxis es:
if (condicin) { instrucciones } [else { instrucciones }]
Ejemplos:
<SCRIPT>
<!-a=5;
b=10;
if (a>b) alert(a + " > " + b); else alert(a + " <= " + b);
-->
</SCRIPT>
Como resultado se puede visualizar la siguiente ventana:
Tambin es posible anidar varias sentencias if-else:

<SCRIPT>
<!-a=115;
b=100;
if (a>b)
{
alert("Si pulsa Aceptar ver el resultado de la comparacin a>b")
alert(a + " > " + b + " es " + (a>b));
}
else
if (a==b)
alert(a + " == " + b + " es " + (a==b));
else
alert(a + " < " + b + " es " + (a<b));
-->
</SCRIPT>
Como resultado se puede visualizar las siguientes ventanas:
Al hacer click
aqu aparece este
mensaje.
1. Mediante el uso de expresiones condicionales y la funcin alert, muestre el
resultado de las siguientes expresiones:
(5 > 10) && 4
(5 >= 10) & 4
(5 > 100) || 4
(125 > 100) && 4
2. Ahora realice lo mismo usando una nica funcin que anide los resultados de todas
las expresiones mencionadas anteriormente con su correspondiente mensaje de
resultado.
CAPTULO 9: INSTRUCCIONES DE BUCLE
INSTRUCCIN FOR
La sintaxis para la instruccin for es:
for ( [instruccin inicial]; [condicin]; [expresin actualizacin]) {instrucciones}
Las tres expresiones que se encuentran dentro de los corchetes son opcionales. La
instruccin inicial en un bucle for puede contener una declaracin de variable que se
efecta empleando la palabra clave var. Ejemplo:
<!-Acumulador = 0;
alert("Acumulador = " + Acumulador);
for (var Contador=1; Contador <=3; Contador++)
{
Acumulador = Acumulador + Contador;
alert("Contador = " + Contador);
}
-->
</SCRIPT>
El resultado se puede visualizar a continuacin:
En este ejemplo el bucle for se ejecutar 3 veces antes de terminar. En cada iteracin la
variable Contador se incrementa en 1 hasta que la expresin Contador<=3 deje de ser
verdadera.
Para bloques de cdigo de una sla lnea no hace falta emplear llaves ({ }).
INSTRUCCIN WHILE
Su sintaxis es la siguiente:
while (condicin) { instrucciones }
El siguiente ejemplo mantiene el bucle en accin hasta que la variable Contador sea
igual a 3.
<!-Acumulador = 0;
Contador = 0;
while (Contador<3)
{
Contador++;
}
-->
</SCRIPT>
El resultado del cdigo anterior es el mismo que se logr en la seccin anterior con la
instruccin for.
INSTRUCCIN BREAK
En un bucle while o for, una instruccin break interrumpe el bucle y contina la
ejecucin del cdigo posterior al bucle. La sintaxis es: break.
En el siguiente ejemplo el bucle while se interrumpe cuando la variable Contador toma

el valor 2.
<!-Acumulador = 0;
Contador = 0;
while (Contador<3)
{
Contador++;
if (Contador==2) break;
}
-->
</SCRIPT>
El resultado del cdigo anterior se visualiza a continuacin:
INSTRUCCIN CONTINUE
La instruccin continue finaliza la ejecucin del bloque actual en un bucle y contina el
bucle con la siguiente iteracin. Si en el ejemplo anterior sustituimos la instruccin
break por continue cuando la variable Contador tome el valor 2, el bucle while salta a
la siguiente iteracin y no visualiza los mensajes de la funcin alert. Ejemplo:
<!-Acumulador = 0;
Contador = 0;
while (Contador<3)
{
Contador++;
if (Contador==2) continue;
}
-->
</SCRIPT>
El resultado del cdigo anterior se visualiza a continuacin:
INSTRUCCIN WITH
Esta instruccin permite especificar un objeto como objeto predeterminado cuando se

ejecutan instrucciones dentro de su bloque de cdigo.
La sintaxis de la instruccin with es la siguiente:
with (objeto) { instrucciones }
Un ejemplo utilizando el objeto persona:
with (persona)
{
nombre = "Flix";
edad = 52;
estatura = 1.74;
peso = 75;
}
1. Cree un lazo con la instruccin for que muestre indefinidamente el mensaje "No
puedo detenerme".
2. Cree un lazo con la instruccin while que muestre indefinidamente el mensaje "Yo
tampoco puedo detenerme".
3. Cree un lazo con la instruccin for que me permita mostrar en un mensaje el
resultado de la operacin factorial(5).
4. Cree un lazo con la instruccin while que me permita mostrar en un mensaje el
resultado de la operacin factorial(4).
5. Cree un lazo con la instruccin for que me permita mostrar en un mensaje el
resultado de la operacin potencia(3,4) = 3^4.
6. Cree un lazo con la instruccin while que me permita mostrar en un mensaje el
resultado de la operacin potencia(3,4) = 3^4.
7. Hacer un lazo con la instruccin for que me permita mostrar los nmeros del 1 al 5
excepto el 3.
8. Hacer un lazo con la instruccin while que me permita mostrar los nmeros del 1 al
5 excepto el 2.
CAPTULO 10: CREACIN DE OBJETOS Y FUNCIONES
CREACIN DE FUNCIONES
La sintaxis de la instruccin function es la siguiente:
function nombre([parmetro] [,parmetro] [...,parmetro]){ instrucciones }
Cada funcin tiene su propio y nico nombre as como una lista de parmetros
opcionales. Se puede llamar a cualquier funcin que haya sido definida dentro de la
misma pgina web.
Para utilizar funciones en el cdigo HTML es mejor ubicarlas en la porcin
<HEAD>..</HEAD> de la pgina web. As cuando se cargue la pgina web, todas las
funciones que puedan necesitarse para esta pgina estarn ya cargadas.
Una vez completadas, las funciones pueden dar valores como resultado empleando la
instruccin return. Las funciones no pueden anidarse.
He aqu un ejemplo de declaracin de una funcin:
<HEAD>
<TITLE> Ejemplo de declaracin y llamada a una funcin de JavaScript</TITLE>
<!-function mostrar_mensaje (mensaje)
//Muestra un mensaje centrado en la ventana del explorador de Internet
{
document.write("<CENTER>" + mensaje + "</CENTER>");
}
-->
</SCRIPT>
</HEAD>
Y esta es la forma de llamar a la funcin:


</SCRIPT>
Tambin se puede llamar a una funcin a travs de un objeto, utilizando los mtodos
de ese objeto. Los mtodos de JavaScript son funciones asociadas a un objeto. La
definicin de una funcin como un mtodo de objeto se realiza de la misma forma que
se define una propiedad normal, pero esta vez se usa un nombre de funcin en lugar de
emplear una variable literal o de valor. Del mismo modo para llamar a una funcin
definida como parte de un objeto se emplea el mismo procedimiento que si se estuviera
accediendo a una propiedad del objeto.
CREACIN DE OBJETOS
Para crear un nuevo objeto en JavaScript primero debemos crear una funcin para ese
objeto, y despus hay que crear una instancia de esa clase (funcin) mediante la palabra
clave new.
Por ejemplo, en primer lugar se crea la funcin:
function persona(nombre, edad, estatura, peso)
{
this.nombre=nombre;
this.edad=edad;
this.estatura=estatura;
this.peso=peso;
this.imprime = imprime;
}
La palabra clave this da a entender a la funcin que debe referirse a s misma a la hora
de hacer las asignaciones de propiedad. Cuando se definen funciones, pueden utilizarse
tambin otros objetos como propiedades en esa funcin.
Para aadir mtodos a los objetos hay que especificar en la definicin del objeto la
funcin que ha de emplearse para el mtodo. En el ejemplo anterior se ha aadido un
mtodo denominado imprime. La funcin imprime tendra que haberse definido de
forma que se especificara como mtodo en un objeto.
Aadir un mtodo a la definicin de un objeto garantiza que todos los objetos que se
creen contendrn el mtodo.
Para aadir un mtodo slo al objeto que se est
empleando y no a la propia definicin se utilizara la instruccin:
objeto.imprime = imprime;
Para crear un nuevo objeto de la funcin persona se utilizara la instruccin siguiente:
NuevaPersona = new persona("Flix", 53, 1.75, 73);

JavaScript emplea las misma estructura de datos para almacenar propiedades y arreglos,
por lo que pueden ser tratadas como si fuesen lo mismo. Puede accederse a las
propiedades a travs de arreglos y viceversa. Por ejemplo:
persona["nombre"] = "Flix";
persona["edad"] = 52;
persona["estatura"] = 1.74;
persona["peso"] = 75;
Tambin se puede acceder a las propiedades en la matriz utilizando ndices. Para
acceder a la propiedad "nombre" en el objeto "persona", como es la primera propiedad,
se puede utilizar la instruccin:
persona[0] = "Flix";
A continuacin se muestra una funcin JavaScript para crear arreglos:
<SCRIPT>
<!-function CreaArreglo(n)
//Esta funcin crea e inicializa un arreglo de n elementos
//comenzando del elemento 0 hasta el elemento n-1
{
this.longitud = n;
for (i=0; i<n; i++) this[i]=0;
return this;
}
-->
</SCRIPT>
Para emplear esta funcin se utiliza el comando new. La instruccin:

NuevoArreglo = new CreaArreglo(10);
crea un arreglo llamado NuevoArreglo con 10 elementos, fijados todos inicialmente a 0.
1. Cree una funcin que calcule la suma de los 10 primeros nmeros naturales y la
muestre en un mensaje con la funcin alert y que sea llamada desde el cuerpo de la
pgina HTML.
El cdigo fuente se muestra a continuacin:
<HTML>
<HEAD>
<TITLE>Suma de los 10 primeros nmeros naturales</TITLE>
<!-function SumaNPrimeros(n)
//Esta funcin crea e inicializa un arreglo con los n primeros nmeros naturales
{
suma=0;
for (i=1; i<=n; i++) suma=suma+i;
return suma;
}
-->
</SCRIPT>
</HEAD>
<BODY>
<!-alert("Suma = " + SumaNPrimeros(10));
-->
</SCRIPT>
</BODY>
</HTML>
El resultado se visualiza a continuacin:
2. Construya un arreglo con los 4 primeros nmeros naturales y mustrelos uno por
uno con la funcin alert.
<HTML>
<HEAD>
<TITLE>Creacin de un arreglo</TITLE>
<!-function CreaArreglo(n)
//Esta funcin crea e inicializa un arreglo con los n primeros nmeros naturales
{
this.longitud = n;
for (i=0; i<n; i++) this[i]=i+1;
return this;
}
-->
</SCRIPT>
</HEAD>
<BODY>
<!-NuevoArreglo = new CreaArreglo(10);
for(i=0;i<5;i++) alert(NuevoArreglo[i]);
-->
</SCRIPT>
</BODY>
</HTML>
3. Cree una funcin que calcule el factorial de 5 y lo muestre en un mensaje con la

funcin alert y que sea llamada desde el cuerpo de la pgina HTML.
<HTML>
<HEAD>
<TITLE>Factorial</TITLE>
<!-function Factorial(n)
//Esta funcin calcula el factorial del nmero n
{
F=1;
for (i=1; i<=n; i++) F=F*i;
return F;
}
-->
</SCRIPT>
</HEAD>
<BODY>
<!-alert("Factorial = " + Factorial(5));
-->
</SCRIPT>
</BODY>
</HTML>
CAPTULO 11: OBJETOS PREDEFINIDOS

Cuando se carga un documento en el explorador de Internet se crea automticamente
una nueva coleccin de objetos para describir el documento actual y la ventana del
explorador de Internet. Estos objetos se presentan en la siguiente jerarqua:
Objeto window. Contiene propiedades que se aplican a toda la ventana. Si se estn

utilizando frames (tramas) habr un objeto window para cada ventana de trama en la
pgina.
Objeto location. Contiene propiedades para el actual URL de la pgina.
-----------------------------------------------------------------------
Objeto history. Tiene mtodos que nos permiten ubicarnos en alguna URL visitada
anteriormente. Los mtodos ms usados para este fin son:
Mtodo "go". Nos permite ubicar una URL visitada anteriormente ya sea antes
o despus de la actual. Sintxis: history.go(NmeroPginas);
Si colocamos como NmeroPginas un nmero positivo, se ubicar esa cantidad
de pginas despus de la pgina donde es invocado el mtodo. Si colocamos
como NmeroPginas un nmero negativo, se ubicar esa cantidad de pginas
antes de la pgina donde es invocado el mtodo.
Mtodo "forward". Nos permite ubicar una URL visitada inmediatamente

despus de la actual. Sintaxis: history.forward();
Mtodo "back". Nos permite ubicar una URL visitada inmediatamente antes de
la actual. Sintaxis: history.back();
-----------------------------------------------------------------------
Objeto document. Contiene propiedades para el contenido de la pgina actual. El

objeto document contiene tambin otros objetos:
forms y los elementos de formato de una pgina

links existentes en la pgina
anchors (elementos anclados en la pgina)
OBJETO WINDOW
Entre las propiedades ms tiles del objeto window se encuentran los marcos o frames
y el status o estado.
El uso de la propiedad de frames le permite acceder a los documentos individuales del
juego de tramas en JavaScript. Por ejemplo, si tenemos un documento que posee dos
frames (frame1 y frame2), para poner en rojo el color de fondo de frame1 se utilizara la
instruccin:
window.frames['frame1'].document.bgColor = "red ";
La instruccin anterior podra tambin escribirse omitiendo el objeto window. La
propiedad status del objeto window le permite visualizar un mensaje en la barra de
estado de la ventana del explorador de Internet.
La instruccin
window.status = "Gauss Data International, su mejor opcin!";
situara en la barra de estado la frase "Gauss Data International, su mejor opcin!".
El objeto window contiene tambin algunos mtodos tiles para interactuar con el
usuario:
El mtodo alert hace aparecer una ventana con un mensaje y el usuario podr
entonces pulsar el botn "Aceptar" para continuar.
window.alert ("Mensaje de Error");
El mtodo confirm se utiliza si lo que se busca es algn tipo de confirmacin del

usuario.
window.confirm ("Est seguro de realizar la accin indicada?");
El mtodo prompt se utiliza si lo que se busca es el ingreso de algn texto cuando

aparece el mensaje.
window.prompt ("Mensaje: ","ValorPorDefecto");
Si omitimos el mensaje "Valor por defecto", y colocamos slo:
window.prompt ("Mensaje: ");
En este caso, JavaScript le dar el valor de null. Es preferible darle un mensaje
vaco:
window.prompt ("Mensaje: ","");
El mtodo open se utiliza para que los documentos HTML puedan abrir sus propias
ventanas y escribir de forma inmediata contenidos para ellas.
windowVar = window.open ("URL", "NombreVentana", ["Atributos"] )
------------------------------------------------------------------------------
El mtodo print se utiliza para que se pueda imprimir la pgina web que est activa
(desde la cual se invoca al mtodo).
window.print ();
------------------------------------------------------------------------------OBJETO DOCUMENT
Con el objeto document un programa en JavaScript puede generar de forma inmediata
cdigo HTML, as como reaccionar a la entrada o a la salida del usuario en la pgina.
Algunas de las propiedades importantes del objeto document son:
Colores de los hipervnculos:
document.alinkColor = "red ";
document.linkColor = "purple"
document.vlinkColor = "blue"
Colores del documento:
document.bgColor = black
documente.fgColor = yellow
Remitente del documento
wherefrom = document.referer;
Algunos de los mtodos ms interesantes del objeto document son los siguientes:
clear. Permite borrar contenidos completos de un documento, de manera que se

puede empezar a escribir en ellos sin tener en la ventana ms informacin que la que
escriba en ella.
open. Permite abrir un documento y empezar a escribir en l.
close. Permite cerrar un documento abierto.
write y writeln. Permiten generar texto en el documento actual. writeln salta de

lnea despus de generar el texto a diferencia del write que no lo hace.
OBJETO FORM
Este objeto permite crear formularios, as como modificar, crear o comprobar el valor
de sus campos antes de enviarlos al servidor.
La propiedad forms permite acceder a todos los campos de informacin del formulario
desde los formularios actuales de la pgina.
Por ejemplo, tenemos el formulario miformulario con dos campos de texto txbCampo1
y txbCampo2. Para acceder a los valores de esos campos haramos lo siguiente:
valor1 = document.forms[0].txbCampo1.value
valor2 = document.forms[0].txbCampo2.value
La indicacin cero en la propiedad forms indica que es el primer formulario del

documento.
Tambin se puede acceder a un formulario por el nombre:
valor1 = document.miformulario.txbCampo1.value
valor2 = document. miformulario.txbCampo2.value
El objeto form contiene un objeto para cada campo del formulario al que se refiere:
checkbox, hidden, radio, button, reset, submit, select, text y textarea. Todos estos
objetos tienen las propiedades name y value.
Los tipos de campo radio y checkbox contienen la propiedad checked para determinar
si el elemento form ha sido o no comprobado.
El objeto form slo tiene un mtodo submit. Ejemplo:
<FORM NAME="frmIdentificacion"
METHOD="post"ACTION="VerificaUsuario.asp">

</FORM>
El mtodo submit del objeto form hace que el explorador de Internet enve los datos del
formulario frmIdentificacion a la pgina VerificaUsuario.asp
OTROS OBJETOS INCORPORADOS
El objeto string. Se crea al definir una variable de cadena. Ejemplo:

objetoCadena = "Hola"
La expresin creara un objeto de cadena denominado objetoCadena. Los literales
de cadena son tambin objetos de cadena.
El objeto Math. Contiene funciones y mtodos matemticos que el programa en

JavaScript puede llamar directamente. Algunos de estos mtodos son: sin, tan,
random y pow. Por ejemplo:
resultado = Math.sin(1.135);
El objeto Date. Se utiliza para trabajar

Para crear un nuevo objeto Date se utiliza la sintaxis:
con
fechas
horas.
VariableDate = new Date(parmetros);

Los parmetros pueden ser :
Nada. Crea la fecha y hora actuales.

Una cadena con el formato "Mes,da,ao,hora:minutos:segundos". Si se
omiten las horas, los minutos y los segundos se fijarn a cero.
Un juego de valores enteros para ao, mes y da o para ao, mes, da,
hora, minutos y segundos. Ejemplos:
fecha1 = new Date(97,0,12)
fecha2 = new Date(97,0,12,11,44,8)
En JavaScript los segundos, minutos, horas, das y meses comienzan por el
0, no por el 1. Por ello el mes de enero se designar con un 0.
Una funcin muy til que incorpora JavaScript es eval. Si toma como parmetro una
expresin numrica, se evala y da un resultado. Si toma como parmetro una
cadena, la convierte en expresin numrica y da el resultado. Esta funcin tiene la
ventaja de aceptar expresiones de formularios y evaluarlos directamente.
NOTA: Existen varias versiones de JavaScript. Algunas de estas versiones no son

compatibles en todos los exploradores de Internet, pero ten la seguridad de que el
cdigo fuente que se presenta en este texto, te funcionar correctamente incluso en
exploradores de Internet antiguos.
1. Cules son los objetos predefinidos ms importantes que posee el JavaScript?
2. Cules son los objetos predefinidos ms importantes que se encuentra dentro del
objeto document?
3. Cules son las propiedades ms importantes del objeto window?

4. Cules son los objetos predefinidos ms importantes que se encuentra dentro del
objeto form?
5. Cules son las propiedades ms importantes del objeto window?
6. Es posible trabajar con funciones matemticas predefinidas en JavaScript?
7. Es posible trabajar con fechas en JavaScript?
8. Existe alguna funcin que me permita evaluar expresiones matemticas en
JavaScript?
1. Cree una pgina web con JavaScript, que permita abrir una ventana nueva (con
la pgina VentanaAuxiliar.htm) al hacer click sobre un botn rotulado "Abrir
Ventana". La nueva ventana debe tener barra de desplazamientos, ancho de 350
pixeles, altura de 170 pixeles y no debe tener men ni barra de herramientas.
<html>
<head>
<title>Ventana 1</title>
</head>
<body>
<script language="JavaScript">
<!-function AbrirVentana()
{
msgWindow=window.open("VentanaAuxiliar.htm",
"OpenWindow", "width=350,height=170,scrollbars=yes");
}
-->
</script>
<form>

<p><input type="button"
name="butAbrirVentana"
value="Abrir Ventana"
onclick="AbrirVentana()">
</form>
</body>
</html>
El resultado lo vemos a continuacin:
Luego de hacer click en el botn etiquetado con "Abrir Ventana", aparecer una
nueva ventana del explorador con la pgina web VentanaAuxiliar.htm.
2. Cree una pgina web con JavaScript, que permita obtener el mismo resultado de
la pgina que se puede visualizar posteriormente.
El cdigo HTML se muestra a continuacin:

<html>
<head>
<title>Ventana Auxiliar</title>
</head>
<body bgcolor="#FFFFFF">
<center>
<FONT COLOR=GREEN SIZE=6>Gauss Data International</FONT>
<BR>
<FONT COLOR="RED" SIZE=4> Su mejor opcin </FONT>
</center>
</body>
</html>
El cdigo fuente en JavaScript se puede ver a continuacin:

<!-document.write("<html>");
document.write("<head>");
document.write("<title>Ventana Auxiliar Con Java Script</title>");
document.write("</head>");
document.write("<body bgcolor=#FFFFFF>");
document.write("<center>");
document.write("<FONT COLOR=GREEN SIZE=6>Gauss Data International</FONT>");
document.write("<BR>");
document.write("<FONT COLOR=RED SIZE=4> Su mejor opcin </FONT>");
document.write("</center>");
document.write("</body>");
document.write("</html>");
-->
</SCRIPT>
3. Cree una pgina web con JavaScript, que permita obtener el siguiente resultado:
Esta pgina permitir el ingreso de un mensaje, el cual podr ser visualizado en otra
ventana al pulsar Abrir:
Cuando se pulse OK, debe cerrar esta ventana y volver a la anterior.

<HTML>
<HEAD>
<SCRIPT Language='JavaScript'>

</SCRIPT>
</HEAD>
<BODY>
<form name="frmPrincipal"><input type="text" name="txbMensaje" size="30">
<input type="button" value="Abrir" onClick="VentanaAuxiliar()">
<input type="reset" value="Limpiar">
</form>
</BODY>
</HTML>
4. Cree una pgina web con JavaScript, que muestre una ventana emergente al
momento de cargarse en el explorador de Internet.
<HTML>
<HEAD>
<TITLE>Pgina que carga una ventana emergente de JavaScript</TITLE>
<script>
<!-popup = window.open('', 'popupnav', 'width=200,height=170,resizable=1,scrollbars=auto');
if (popup != null)
{
if (popup.opener == null)
{
popup.opener = self;
}
popup.location.href = 'VentanaEmergente.htm';
}
// -->
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
5. Cree una pgina web con JavaScript, que muestre un mensaje con la funcin
alert al momento de hacer click sobre un botn.
<html>
<head>
<title>Ejemplo de Alert</title>
</head>
<body>
<form>
<P align="center">
<input type="button"
value="Haga click aqu"
onclick="alert('Cuando hizo click llam a este mensaje')">
</P>
</form>
</body>
</html>
El resultado lo podemos visualizar a continuacin. Primero aparece la ventana

principal. Luego, al hacer click sobre el botn aparece el mensaje.
Al hacer click
aqu aparece el
mensaje
6. Cree una pgina web que muestre 3 mensajes consecutivos con la funcin alert al
momento de hacer click sobre un botn.
<HTML>
<HEAD>
<TITLE>Ejemplo de Alert</TITLE>
</HEAD>
<BODY>
<CENTER>
<FORM METHOD="post" NAME="frmMensaje">
Elija una opcin:
<BR>
<BR>
<INPUT type="radio"
value=1
name="rbuMensaje"
onClick="if (confirm('Elegiste la opcin 1. Ests seguro?')) alert('No era la opcin correcta')">

Gastar
<BR>
<INPUT type="radio"
value=2
name="rbuMensaje"
onClick="if (confirm('Elegiste la opcin 2. Ests seguro?')) alert('Bien!')"> Ahorrar
<BR>
</FORM>
</CENTER>
</BODY>
</HTML>
El resultado lo podemos visualizar a continuacin. Primero aparece la ventana

principal. Luego, al hacer click sobre el botn aparece el primer mensaje.
Al hacer click sobre el botn rotulado como "Haga Click Aqu" aparecer el primer
mensaje.
Al hacer click sobre el botn Aceptar del mensaje que indica "Cuando hizo click en el
botn llam a este mensaje 1" aparecer el segundo mensaje.
Al hacer click sobre el botn Aceptar del mensaje que indica "Cuando hizo click en el
mensaje 1 llam a este mensaje 2" aparecer el tercer mensaje.
Al final, slo se visualiza la pantalla inicial.

7. Cree una pgina web que muestre un mensaje diferente al elegir una de dos
opciones que se visualizan en pantalla.
<HTML>
<HEAD>
<TITLE>Ejemplo de Alert</TITLE>
</HEAD>
<BODY>
<CENTER>
<FORM METHOD="post" NAME="message">
Elija una opcin:
<BR>
<BR>
<INPUT type="radio"
value=1
name="rbuMensaje"
onClick="alert(' Elegiste la opcin 1')"> Opcin 1
<BR>
<INPUT type="radio"
value=2
name="rbuMensaje"
onClick="alert(' Elegiste la opcin 2')"> Opcin 2
<BR>
</FORM>
</CENTER>
</BODY>
</HTML>
El resultado lo podemos visualizar a continuacin. Primero aparece una ventana del

explorador conteniendo una pgina web con dos opciones:
Al hacer click en la opcin 1 aparecer el siguiente mensaje:
Al hacer click aqu aparece

este mensaje
Al hacer click en la opcin 2 aparecer el siguiente mensaje:

este mensaje
8. Cree una pgina web que muestre un mensaje indicando si la opcin elegida fue
la correcta. En la pgina se deben mostrar dos opciones: Gastar y Ahorrar.
<HTML>
<HEAD>
<TITLE>Ejemplo de Confirm y Alert</TITLE>
</HEAD>
<BODY>
<CENTER>
<FORM METHOD="post" NAME="message">
Elija una opcin:
<BR>
<BR>

<INPUT type="radio" value=1 name="rbuMensaje"
onClick="if (confirm('Elegiste la opcin Gastar. Ests seguro?')) alert('No era la opcin
correcta')"> Gastar
<BR>

<INPUT type="radio"
value=2
name="rbuMensaje"
onClick="if (confirm('Elegiste la opcin Ahorrar. Ests seguro?')) alert('Bien!')"> Ahorrar
<BR>
</FORM>
</CENTER>
</BODY>
</HTML>
El resultado lo podemos visualizar a continuacin. Primero aparece una ventana del

explorador conteniendo una pgina web con dos opciones:
Luego, si hacemos click sobre la opcin "Gastar", aparecer el siguiente mensaje de

confirmacin:
Si elegimos "Aceptar" aparecer otro mensaje indicando que no era la opcin correcta:
En cambio, si elegimos "Cancelar", el mensaje simplemente desaparecer.

Luego, si hacemos click sobre la opcin "Ahorrar", aparecer el siguiente mensaje de
confirmacin:
Si elgimos "Aceptar" aparecer otro mensaje indicando que era la opcin correcta:
En cambio, si elegimos "Cancelar", el mensaje simplemente desaparecer al igual que

en el caso anterior.
9. Cree una pgina web permita dar un mensaje de bienvenida a un visitante a un

web site, previa peticin de su nombre.
<HTML>
<head>
<title>Uso de Prompt</title>
</head>
<body>
<!-Nombre = prompt("Por favor, ingrese su nombre.","");
function MuestraNombre(NombreAMostrar)
{
document.write(" "+NombreAMostrar);
}
-->
</script>
<font color="blue" size="5">
Bienvenido a mi web site,
<!-{MuestraNombre(Nombre);}
-->
</script>
</font>
</body>
</html>
El resultado lo podemos visualizar a continuacin. Primero aparece una ventana que

nos pide que ingresemos nuestro nombre:
Luego procedemos a hacer lo que nos pide:
Si presionamos Aceptar, aparecer la pgina web conteniendo un mensaje de bienvenida

y al final el nombre ingresado:
Si no colocamos nada en el nombre, aparecer slo el mensaje de bienvenida ya que

hemos indicado en el cdigo fuente que por defecto el nombre sea "":
Si en lugar de pulsar "Aceptar", colocamos "Cancelar", se asumir que la variable tiene

valor nulo (null):
10. Cree una pgina web permita invertir una cadena ingresada en una caja de texto
<HTML>
<HTML>
<HEAD>
<TITLE>Invierte Cadena</TITLE>
</HEAD>
<BODY>
<FORM name=frmPrincipal>
<INPUT type=text name=txbTexto value=''>

<INPUT type=button value='Invertir texto' onclick=Invertir()>
</FORM>
<SCRIPT>
<!-function Invertir()
{
//Guardo en la variable Texto el valor ingresado en el textbox txbTexto
var Texto=document.frmPrincipal.txbTexto.value;
//Esta variable me servir para poder invertir el texto
var TextoInvertido="";
//Obtengo en la variable TextoInvertido los caracteres de la variable Texto

//empezando por el ltimo caracter
for(Contador=Texto.length; Contador>=0; Contador--)
TextoInvertido+=Texto.substring(Contador,Contador-1);
//Al final muestro el texto invertido en un mensaje
alert(TextoInvertido);
}
-->
</SCRIPT>
</BODY>
</HTML>
El resultado lo podemos visualizar a continuacin. Primero aparece una caja de texto

y un botn para indicar que queremos invertir el texto:
Luego debemos ingresar el texto que queremos invertir:
Luego debemos pulsar el botn etiquetado como "Invertir Texto". Luego aparecer el
siguiente mensaje:
El texto "lanoitanretnI ataD ssuaG" es el resultado de invertir la cadena "Gauss Data

International".
------------------------------------------------------------------------------11. Cree una pgina web que nos permita contar el nmero de letras que tiene un
mensaje de texto. Se deber tener una presentacin como la que aparece luego
del presente prrafo. Al hacer click en el botn etiquetado con "contar", deber
aparecer la cantidad de caracteres en la caja de texto correspondiente. Al hacer
click en el botn etiquetado como "Limpiar" se deber limpiar el texto
correspondiente al mensaje e inicializar en 0 la cantidad de caracteres.

<HTML>

<HEAD>
<TITLE> Contador de Letras </TITLE>
<script language="Javascript">
<!-function LimpiaObjetos()
//Esta funcin limpia los caracteres del mensaje de texto
//e inicializa a cero el nmero de caracteres del mensaje
{
document.frmPrincipal.txbMensaje.value="";
document.frmPrincipal.txbCaracteres.value=0;
}
function CuentaCaracteres()
//Esta funcin cuenta el nmero de caracteres del mensaje de texto
//y lo coloca en el objeto txbCaracteres.
{
var CantidadCaracteres = document.frmPrincipal.txbMensaje.value.length;
document.frmPrincipal.txbCaracteres.value = CantidadCaracteres;
}
-->
</script>
</HEAD>
<BODY>

<FORM NAME=frmPrincipal>
<FONT SIZE=4> MENSAJE </FONT>

<INPUT TYPE=TEXT NAME=txbMensaje VALUE="Mensaje">
<BR>
<FONT SIZE=4> CARACTERES </FONT>
<INPUT TYPE=TEXT NAME="txbCaracteres" VALUE="7">
<BR>
<BR>


<INPUT TYPE=BUTTON NAME=butCuenta
VALUE="Contar" onClick="CuentaCaracteres();">
<INPUT TYPE=BUTTON NAME=butLimpiar
VALUE="Limpiar" onClick="LimpiaObjetos();">
</FORM>
</BODY>
</HTML>
Al escribir el texto "Nuevo Mensaje" y hacer click "contar" se obtendr el siguiente

resultado.
Al hacer click sobre el botn " Limpiar" se obtendr el siguiente resultado.
12. Cree una pgina simule el contador de caracteres de las empresas de telefona
celular. Se pide primero el nmero de telfono al que se le va a enviar el
mensaje, el nombre de la persona que enva el mensaje y el mensaje en s. El
contador de caracteres cuenta los caracteres del remitente y el mensaje. La
pantalla inicial deber ser como sigue:

<HTML>
<HEAD>
<TITLE>Contador de Letras - TELEFONIA CELULAR </TITLE>
<SCRIPT language=Javascript>
<!-function LimpiaObjetos()
//Esta funcin limpia los caracteres del mensaje de texto, el telfono y el remitente
//e inicializa a cero el nmero de caracteres del mensaje
{
document.frmPrincipal.txbTelefono.value="";
document.frmPrincipal.txbRemitente.value="";
document.frmPrincipal.txaMensaje.value="";
document.frmPrincipal.txbCaracteres.value=0;
}
function CuentaCaracteres()
//Esta funcin cuenta el nmero de caracteres del mensaje de texto y el remitente

//y lo coloca en el objeto txbCaracteres.
{
var CantidadCaracteres = document.frmPrincipal.txaMensaje.value.length +
document.frmPrincipal.txbRemitente.value.length;
document.frmPrincipal.txbCaracteres.value = CantidadCaracteres;
}
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name=frmPrincipal>
<TABLE>
<TR>
<TD><FONT size=2>TELFONO</FONT></TD>
<TD><INPUT TYPE="TEXT" name=txbTelefono value="Telfono Destino"></TD>
</TR>
<TR>
<TD><FONT size=2>REMITENTE</FONT></TD>
<TD><INPUT TYPE="TEXT" name=txbRemitente value="Su Nombre"></TD>
</TR>
<TR>
<TD><FONT size=2>MENSAJE</FONT></TD>
<TD><TEXTAREA name="txaMensaje" ROWS="5" COLS="18">Su Mensaje</TEXTAREA>
</TR>
<TR>
<TD><FONT size=2>CARACTERES</FONT></TD>
<TD><INPUT name=txbCaracteres value=19> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD ALIGN=RIGHT>
<INPUT name=butCuenta onclick=CuentaCaracteres(); type=button value=Contar>
</TD>
<TD ALIGN=LEFT>
<INPUT name=butLimpiar onclick=LimpiaObjetos(); type=button value=Limpiar>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
El resultado al hacer click en el botn " Limpiar"es el siguiente:
El resultado al hacer escribir los textos que se observan y al hacer click en el botn
"Contar"es el siguiente:
------------------------------------------------------------------------------13. Cree una pgina web que nos permita ver la fecha y la hora en una caja de texto.
Estas fecha y hora deben actualizarse cada segundo (1000 milisegundos)
<html>
<HEAD>
<TITLE>Muestra fecha y hora</TITLE>
function TOfunc()
{
//Que ejecute esta funcin cada segundo
TO = window.setTimeout( "TOfunc()", 1000 );
//Guardo en today la fecha y hora actuales
var today = new Date();
//Guardo en la caja de texto, la fecha obtenida
document.forms[0].elements[0].value = today.toString();
}
</script>
</HEAD>

<body onload="TO = setTimeout( 'TOfunc()', 1000 );">
<form>
<center>
<input type="text" name="txbFechaHora" value="" size=19>
</center>
</form>
</html>
El resultado de tres instantes diferentes se muestra a continuacin:
14. Cree una pgina web permita ver el tiempo en que estamos conectados a dicha
pgina, as como la hora de inicio y fin de conexin (momento en el que pulsamos
el botn) al pulsar un botn rotulado como "Datos Conexin"
<HTML>
<HEAD>
<TITLE>Uso de funciones de tiempo</TITLE>
<SCRIPT>
<!-var HorasInicio = " ";
var MinutosInicio = " ";
var SegundosInicio = " ";
var HorasFin = 0;
var MinutosFin = 0;
var SegundosFin = 0;
var SegundosConectado = 0;
var MinutosConectado = 0;
var HorasConectado = 0;
var HoraConexion = " ";
var HoraDesconexion = " ";
var TiempoConectado = " ";
// Obtiene la hora de conexin.
function ObtenerInicioConexion()
{
//Obtengo la fecha y hora actuales
var Ahora = new Date();
// Se usa para mostrar la hora de conexin.

var ampm = (Ahora.getHours() >= 12) ? " P.M." : " A.M."
var Horas = Ahora.getHours();
Horas = ((Horas > 12) ? Horas - 12 : Horas);
var Minutos = ((Ahora.getMinutes() < 10) ? ": 0" : ":") + Ahora.getMinutes();
var Segundos = ((Ahora.getSeconds() < 10) ? ": 0" : ":") + Ahora.getSeconds();
// La cadena contiene la hora de conexin.
HoraConexion =(" " + Horas + Minutos + Segundos + " " + ampm);
// Captura de la hora de conexin para su uso en Temporizador().
HorasInicio = Ahora.getHours();
MinutosInicio = Ahora.getMinutes();
SegundosInicio = Ahora.getSeconds();
}
// Obtiene la hora de desconexin.
function ObtenerFinConexion()
{
var Ahora = new Date();
// Se usa para mostrar la hora de desconexin.
var ampm = (Ahora.getHours() >= 12) ? " P.M." : " A.M."
var Horas = Ahora.getHours();
Horas = ((Horas > 12) ? Horas - 12 : Horas);
var Minutos = ((Ahora.getMinutes() < 10) ? ": 0" : ":") + Ahora.getMinutes();
var Segundos = ((Ahora.getSeconds() < 10) ? ": 0" : ":") + Ahora.getSeconds();
// Cadena que muestra la hora de desconexin.
HoraDesconexion =(" " + Horas + Minutos + Segundos + " " + ampm);
// Captura la hora de desconexin para su uso en timer().
HorasFin = Ahora.getHours();
MinutosFin = Ahora.getMinutes();
SegundosFin = Ahora.getSeconds();
Temporizador();
}
// Calcula la diferencia entre la hora de conexin y la hora de desconexin.
function Temporizador()
{
if (SegundosFin >= SegundosInicio)
SegundosConectado = SegundosFin - SegundosInicio;
else
{
MinutosFin-=1;
SegundosConectado = (SegundosConectado + 60) - SegundosInicio;
}
if (MinutosFin >= MinutosInicio)

MinutosConectado = MinutosFin - MinutosInicio;
else
{
MinutosFin-=1;
MinutosConectado = (MinutosConectado + 60) - MinutosInicio;
}
HorasConectado = HorasFin - HorasInicio;
// Se usa para mostrar la hora en el mensaje.
HorasConectado = ((HorasConectado < 10) ? "0" : ":") + HorasConectado;
MinutosConectado = ((MinutosConectado < 10) ? ": 0" : ":") + MinutosConectado;
SegundosConectado = ((SegundosConectado < 10) ? ": 0" : ":") + SegundosConectado;
// Cadena para mostrar la hora en la pgina.
TiempoConectado =(" " + HorasConectado + MinutosConectado + SegundosConectado);
MostrarTiempos();
}
function MostrarTiempos()
{
var cadena ="\nHora Conexin: " + HoraConexion + "\n\nHora Desconexin: " +
HoraDesconexion + "\n\nTiempo Conectado: " + TiempoConectado
alert(cadena)
}
-->
</SCRIPT>
</HEAD>
<BODY TEXT=#000000 BGCOLOR="#FFFFFF" onLoad="ObtenerInicioConexion()">
<CENTER>
<FORM>
<INPUT TYPE="button" value="Datos Conexin" onClick="ObtenerFinConexion()">
</FORM>
</CENTER>
</FORM>
</BODY>
</HTML>
El resultado lo podemos visualizar a continuacin.

etiquetado como "Datos Conexin":
Primero aparece el botn
Luego de hacer click sobre este botn, aparecer el mensaje siguiente:
15. Cree una pgina web permita validar las opciones de un mantenimiento.
Suponga que tenemos que realizar el mantenimiento de la tabla MotivoCita, que
tiene como campos: IdMotivoCita (llave), nombre y descripcin.
El
mantenimiento deber ser completo; es decir, permitir las opciones: Nuevo,
Modificar, Buscar y Eliminar. No se preocupe de las operaciones con la base de
datos, slo realice la validacin de los objetos del formulario y las acciones que se
deben realizar cuando se hace click en alguna de las opciones. Suponga que las
operaciones con la base de datos se realizan con la pgina "EjecutaProceso.htm"
y que es invocada con el mtodo submit del formulario. Suponga adems que
luego de ejecutadas las operaciones, se regresa a la misma pgina. Adems, debe
usar slo botones para las opciones del mantenimiento.
Veamos primero como queremos que se vea el formulario:
Luego de haber seleccionado alguna de las opciones (Nuevo, Buscar, Modificar o

Eliminar) y haber colocado los datos respectivos, podemos recin pulsar Aceptar y
esperar que se realicen las acciones respectivas. Como no estamos haciendo conexin
con la base de datos, nuestra pgina EjecutaProceso.htm slo cargar este mensaje al
inicio:
Luego de esto, nos ubicar en la pgina desde la cual se realiz la llamada:

MotivoCitaConButton.htm

MotivoCitaConButton.htm
<HTML>
<HEAD>
<TITLE>Ejemplo de validacin de un Mantenimiento usando JavaScript</TITLE>
<script LANGUAGE="javascript">
//Acciones a realizarse cuando se pulsa el botn Nuevo
function AccionNuevo()
{
frmMotivoCita.txbCodigo.value="";
frmMotivoCita.txbNombre.value="";
frmMotivoCita.txaDescripcion.value="";
frmMotivoCita.txbCodigo.disabled=true;
}
//Acciones a realizarse cuando se pulsa el botn Buscar
function AccionBuscar()
{
frmMotivoCita.txbCodigo.disabled=false;
frmMotivoCita.txbNombre.disabled=false;
frmMotivoCita.txaDescripcion.disabled=true;
frmMotivoCita.txbNombre.value="";
frmMotivoCita.txaDescripcion.value="";
}
//Acciones a realizarse cuando se pulsa el botn Modificar
function AccionModificar()
{
frmMotivoCita.Codigo.value=frmMotivoCita.txbCodigo.value
frmMotivoCita.txbNombre.disabled=false;
frmMotivoCita.txaDescripcion.disabled=false;
}
//Acciones a realizarse cuando se pulsa el botn Eliminar
function AccionEliminar()
{
frmMotivoCita.Codigo.value=frmMotivoCita.txbCodigo.value
frmMotivoCita.txbNombre.disabled=true;
frmMotivoCita.txaDescripcion.disabled=true;
}
//Verifica que se haya ingresado el cdigo
function VerificaCodigo()
{
if (frmMotivoCita.txbCodigo.value=="")
{
alert("Debe ingresar el cdigo del motivo de la cita");
frmMotivoCita.txbCodigo.focus;
return false;
}
return true;
}
//Verifica que se haya ingresado el nombre
function VerificaNombre()
{
if (frmMotivoCita.txbNombre.value=="")
{
alert("Debe ingresar el nombre del motivo de la cita");
frmMotivoCita.txbNombre.focus;
return false;
}
return true;
}
//Verifica que se haya ingresado la descripcin
function VerificaDescripcion()
{
if (frmMotivoCita.txaDescripcion.value=="")
{
alert("Debe ingresar la descripcin del motivo de la cita");
frmMotivoCita.txaDescripcion.focus;
return false;
}
return true;
}
//Verifica que estn los datos necesarios para poder ejecutar las acciones respectivas
function VerificaTodo()
{
if (frmMotivoCita.AccionIndicada.value==1 || frmMotivoCita.AccionIndicada.value==3)
{
if (VerificaNombre() && VerificaDescripcion())
{
frmMotivoCita.submit();
return;
}
}
if (frmMotivoCita.AccionIndicada.value==4)
{
if (VerificaCodigo())
{
return;
}
}
if (frmMotivoCita.AccionIndicada.value==2)
{
return;
}
}
</script>
</HEAD>
<BODY BACKGROUND="../images/fondo.gif">
<FORM NAME="frmMotivoCita" METHOD="post" ACTION="EjecutaProceso.htm">
<INPUT TYPE="HIDDEN" NAME=AccionIndicada value=0>
<INPUT TYPE="HIDDEN" NAME=Codigo value=0>
<DIV align=center><FONT color=white face="" size=4><STRONG>
<FONT color=white face="" ize=4>
MANTENIMIENTOS DE MOTIVOS DE CITAS</FONT></STRONG></FONT></DIV>
<BR>
<BR>
<CENTER>
<TABLE BORDER=0 cellPadding=1 cellSpacing=1 style="HEIGHT: 50px; WIDTH: 350px"
width=49.6%>
<TR>
<TD><INPUT
name=butNuevo
type=button
value=Nuevo
onclick="AccionNuevo();frmMotivoCita.AccionIndicada.value=1;"></TD>
<TD><INPUT
name=butBuscar
type=button
value=Buscar
onclick="AccionBuscar();frmMotivoCita.AccionIndicada.value=2;"></TD>
<TD><INPUT
name=butModificar
type=button
value=Modificar
onclick="AccionModificar();frmMotivoCita.AccionIndicada.value=3;"></TD>
<TD><INPUT
name=butEliminar
type=button
value=Eliminar
onclick="AccionEliminar();frmMotivoCita.AccionIndicada.value=4;"></TD>
</TR>
</TABLE>
</CENTER>
<BR>
<center>
<TABLE border=0 cellPadding=1 cellSpacing=1 style="HEIGHT: 201px; WIDTH: 430px"
width=49.6%>
<TR>
<TD>
<STRONG><FONT color=#ffffff face="" size=2>
Código
Motivo Cita</FONT>
</STRONG></TD>
<TD>
<INPUT type="text" name=txbCodigo maxlength=5 style="HEIGHT: 22px; WIDTH: 251px"
value=""></TD></TR>
<TR>
<TD>
<STRONG><FONT color=#ffffff face="" size=2> Nombre</FONT>
</STRONG></TD>
<TD>
<INPUT type="text" name="txbNombre" MAXLENGTH=60 style="HEIGHT: 22px;
WIDTH: 252px" value=""></TD></TR>
<TR>
<TD>
<STRONG><FONT color=#ffffff face="" size=2> Descripción</FONT>
</STRONG></TD>
<TD><TEXTAREA name=txaDescripcion rows=10 cols=20 style="HEIGHT: 100px; WIDTH:
252px">
</TEXTAREA>  </TD></TR>
</TABLE>
<BR>
<INPUT
type="button"
name="butAceptar"
value="Aceptar"
onclick="VerificaTodo();">
<INPUT type="reset" value="Limpiar" name="resLimpiar">
</center>
</FORM>
</BODY>
</HTML>
EjecutaProceso.htm
<SCRIPT>
<!-alert("Aqu se debera realizar todo el trabajo con la base de datos");
location.href = "MotivoCitaConButton.htm"
-->
</SCRIPT>
16. Cree un conjunto de pginas web que permita observar el uso del objeto
"history". Suponga que tiene 3 pginas que cargar en orden consecutivo
(1.htm, 2.htm y 3.htm). La pgina 1.htm tendr un botn para poder avanzar a la
pgina siguiente (en el explorador de Internet). La pgina 2 tendr dos botones:
uno para retroceder a la pgina anterior y otro para avanzar a la pgina
siguiente. La pgina 3.htm contrendr slo un botn para retroceder a la pgina
anterior.
Luego de lo anterior, agregue los botones que faltan en las pginas 1.htm y 3.htm,
vuelva a cargarlas en el explorador y observe los resultados. Notar que cuando
no se puede avanzar, simplemente no avanza y no ocurre ningun error. Adems,
se dar cuenta de que cualquier pgina que ingrese, modificar el historial.
1.htm
<SCRIPT>
<!-<html>
<head>
<title>Ejemplo de uso de History</title>
</head>
<body>
<CENTER>
<B><FONT SIZE=5 COLOR=RED>VENTANA 1</FONT></B>
<BR>
<BR>
<form name=formulario method="POST" action="">
<input type="button" value="Ir una pgina adelante"
onClick="history.go(1)">

</form>
</CENTER>
</body>
name="butUnaAdelante"
</html>
2.htm
<html>
<head>
</head>
<body>
<CENTER>
<BR>
<BR>
<input type="button" value="Ir una pgina atrs" name="butUnaAtras" onClick="history.go(1)">

<input type="button" value="Ir una pgina adelante" name="butUnaAdelante"
onClick="history.go(1)">

</form>
</CENTER>
</body>
</html>
3.htm
<html>
<head>
</head>
<body>
<CENTER>
<BR>
<BR>
<input type="button" value="Ir una pgina atrs" name="butUnaAtras" onClick="history.go(1)">

</form>
</CENTER>
</body>
</html>
Las pginas web 1.htm, 2.htm y 3.htm se muestran a continuacin (luego de cargarlas
en orden consecutivo):
Haga click aqu para ver la pgina web 2.htm

----------------------------------------------------------------17. Cree 3 pginas web que logren los mismos resultados descritos en el ejemplo
anterior; pero, sin usar el mtodo "go" del objeto "history".

1.htm
<html >
<head>
</head>
<body>
<CENTER>
<BR>
<BR>
<input type="button" value="Ir una pgina adelante"
name="butUnaAdelante" onClick="history.forward();">

</form>
</CENTER>
</body>
</html>
2.htm
<html>
<head>
</head>
<body>
<CENTER>
<BR>
<BR>
<input
type="button"
value="Ir
una
pgina
atrs"
name="butUnaAtras"
onClick="history.back();">

<input type="button" value="Ir una pgina adelante" name="butUnaAdelante"
onClick="history.forward();">

</form>
</CENTER>
</body>
</html>
3.htm
<html>
<head>
</head>
<body>
<CENTER>
<BR>
<BR>
<input
type="button"
value="Ir
una
onClick="history.back();">

</form>
</CENTER>
</body>
</html>
pgina
atrs"
name="butUnaAtras"
-------------------------------------------------------------------
18. Cree una pgina web que permita realizar la validacin de usuarios registrados.
Suponga que para entrar a un sistema, el usuario es Gauss y la clave es Data.
<html>
<head>
<title>Gauss Bank</title>
<SCRIPT Language="JavaScript">
<!-function VerificarFormulario()
{
if (frmIdentificacion.txbUsuario.value!="Gauss")
{
alert("Usuario Errado");
return;
}
if (frmIdentificacion.pwdClave.value!="Data")
{
alert("Clave Errada");
return;
}
alert("Usuario Autorizado");
}
-->
</SCRIPT>
</head>
<body>
<form NAME="frmIdentificacion">
<BR><BR><BR>
<center>
<table border=0>
<tr>
<td><font color="#000080"><strong>Usuario</strong></font></td>
<td><input name="txbUsuario" MAXLENGTH="9" size="20" value=""></td>
</tr>
<tr>
<td><font color="#000080"><strong>Clave</strong></font></td>
<td><input name="pwdClave" MAXLENGTH="4" type="password" size="20" value=""></td>
</tr>
</table>
<BR>
<table border=0>
<tr>
<td><input
name="butAceptar"
type="button"
value="Aceptar"
onClick="VerificarFormulario()"></td>
<td>  <input name="resLimpiar" type="reset" value="Limpiar"> </td>

</tr>
</table>
</center>
</form>
</body>
</html>
El resultado se puede visualizar a continuacin. Si ingresamos mal el nombre de

usuario, nos saldr un mensaje indicando que el usuario est mal escrito:
Si ingresamos correctamente el nombre de usuario, pero escribimos mal la clave y

hacemos click en "Aceptar", saldr un mensaje indicando que la clave no es correcta:
Si colocamos la clave correcta (Data) saldr el siguiente mensaje:
CAPTULO 12: EVENTOS
EVENTO BLUR
Ocurre cuando el usuario retira el foco de entrada de un objeto que se encuentra dentro
de un formulario.
<input name="apellido"
onBlur="alert('Ests retirando el foco de la caja de texto')">
EVENTO CLICK
Ocurre cuando en un formulario, un objeto susceptible de ser pulsado es pulsado por el
usario. El manipulador de eventos JavaScript puede llamar una funcin, que ha de
existir en el documento actual, o ejecutar cdigo JavaScript presente. Por ejemplo:
<input type="button"
name="Hazme Click"
onClick="alert('Me haz hecho click!');">
La instruccin anterior abrir una ventana de aviso cuando el usuario haga click sobre el
botn.
EVENTO CHANGE
Se produce cuando un campo de tipo select, text o textarea deja de ser enfocado y se ha
modificado su valor. El manipulador de este evento (onChange) puede llamar a una
funcin o ejecutar cdigo JavaScript presente. Ejemplo:
<input name="apellido" onChange="VerificaApellido(this.form)">;
Esta instruccin llama a la funcin VerificaApellido cuando el usuario deja de enfocar
el campo de entrada (input) de texto y se mueve a otro campo. Esto permite preprocesar
instantneamente la informacin y comprobar el valor del campo antes del envo del
formulario.
EVENTO FOCUS
El usuario sita el foco de entrada en el objeto que se encuentra dentro del formulario
que se indique.
formulario.txbUsuario.focus();
</SCRIPT>
EVENTO LOAD
Se produce cuando el explorador de Internet acaba de cargar una ventana o todos los
marcos de un <FRAMESET>. Puede llamar a una funcin o ejecutar cdigo JavaScript
presente. Ejemplo:
<body onLoad="alert('Bienvenido')">
EVENTO UNLOAD
Se produce cuando el usuario abandona la pgina. Ejemplo:
<body onUnload="alert('Gracias ... Vuelva pronto!')"
EVENTO MOUSEOVER
Ocurre cuando el usuario mueve el puntero del ratn sobre un objeto de la pgina.
<img src="imagen.gif"
onMouseOver="alert('Ests ubicado sobre la imagen');">
EVENTO MOUSEOUT
Ocurre cuando el usuario se mueve del objeto donde estaba ubicado con el puntero del
ratn.
<img src="imagen.gif"
onMouseOut="alert('Ya no ests ubicado sobre la imagen');">
EVENTO SELECT
Ocurre cuando el usuario selecciona campos de un formulario como campos de entrada
(input).
<input name="apellido"
onSelect="alert('Ests seleccionando la caja de texto')">
EVENTO SUBMIT
Se produce cuando el usuario enva un formulario. El manipulador de eventos
OnSubmit puede llamar a una funcin o ejecutar cdigo JavaScript presente. Ejemplo :
<form name="frmSeguridad" action="VerificaClave.asp"
onSubmit="ValidarFormulario();">
La anterior instruccin llama a la funcin ValidarFormulario para comprobar los
valores de los campos antes de llamar al URL designado en el atributo action.
1. Cules son los eventos ms importantes que ocurren en una pgina web?
2. Cundo se produce el evento focus?
3. Cundo se produce el evento blur?

4. Cundo se produce el evento MouseOver?
12. Cundo se produce el evento MouseOut?
13. Cundo se produce el evento Load?
14. Cundo se produce el evento Unload?
15. Cundo se produce el evento Submit?
16. Cundo se produce el evento Select?
17. Cundo se produce el evento Change?
18. Cundo se produce el evento Click?
19. Piense en por lo menos dos aplicaciones que puede darle a cada uno de los eventos
mencionados.
1. Cree una pgina web que permita que al desplazarnos con el mouse sobre un
texto, aparezca una ventana emergente.
<html>
<body>
<center>
<font size=4 color=blue>
Aparecer una ventana externa cuando pase el mouse sobre el hipervnculo:
<BR>
<BR>
<A HREF="javascript:"
onMouseOver="m = window.open('auxiliar.htm','','width=150,height=150');return true;"
onMouseOut=" m.window.close(); return true;">
Desplace el mouse aqu</A>
<font size=3 color=red>
<BR>
<BR>
Si usted utiliza Netscape 3 la ventana se cerrar automticamente.<BR>

Si usted utiliza Microsoft explorer o Netscape 2,<BR> tendr que cerrarla manualmente.<BR>
</CENTER>
</BODY>
</HTML>
El resultado lo podemos visualizar a continuacin:
Luego de pasar el mouse sobre el hipervnculo de texto que dice: "Desplace el mouse
aqu", aparecer la siguiente ventana:
2. Cree una pgina web que permita que al desplazarnos con el mouse sobre una
imagen, aparezca una ventana emergente.
<HTML>
<BODY>
<CENTER>
Mueva el mouse sobre la imagen:
<br>
<br>
<A HREF="javascript:"
onMouseOver="m = window.open('auxiliar.htm','','width=200,height=130'); return true;"
onMouseOut=" m.window.close(); return true;">
<IMG SRC="imagen.gif" ALIGN=MIDDLE BORDER=2>
</A>
</CENTER>
</BODY>
</HTML>
Luego de pasar el mouse sobre el hipervnculo de imagen, aparecer la siguiente

ventana:
3. Cree una pgina web que permita seleccionar una de tres ventanas segn lo que
se elija en un objeto dropdown (SELECT o combobox) y luego de pulsar un botn
etiquetado como "Abrir"
Principal.htm
<HTML>
<HEAD>
<TITLE></TITLE>
<!-function CreaVentana(formulario)
{
//La variable Indice guardar el valor del ndice seleccionado actual del combobox
var Indice=formulario.cmbVentana.selectedIndex;
//La variable Pagina guardar el valor asociado al ndice seleccionado actual del combobox
var Pagina=formulario.cmbVentana.options[Indice].value;
//Con la siguiente instruccin abrimos la pgina correspondiente.
msg=open(Pagina,"","location=yes");
}
-->
</SCRIPT>
</HEAD>
<BODY>
<form name="formulario">
<select name="cmbVentana">
<option value="1.htm"> Ventana 1 </option>
<option value="2.htm"> Ventana 2</option>
</select>
<INPUT TYPE="button" value="Abrir" onClick="CreaVentana(this.form);">
</FORM>
</BODY>
</HTML>
1.htm
<HTML>
<HEAD>
<TITLE>Ventana 1</TITLE>
</HEAD>
<BODY BGCOLOR="ffffff">
<CENTER>
<H2><B>Ventana 1</B></H2>
</CENTER>
</BODY>
</HTML>
2.htm
<HTML>
<HEAD>
</HEAD>
<CENTER>
</CENTER>
</BODY>
</HTML>
3.htm
<HTML>
<HEAD>
</HEAD>
<CENTER>
</CENTER>
</BODY>
</HTML>
La pgina Principal.htm aparece por defecto con la opcin Ventana 1.
Al hacer click en el botn abrir luego de haber seleccionado la opcin Ventana1,

aparecer la pgina web 1.htm en una nueva ventana:
Al hacer click en el botn abrir luego de haber seleccionado la opcin Ventana 2,

Al hacer click en el botn abrir luego de haber seleccionado la opcin Ventana 3,

se elija en un objeto dropdown (SELECT o combobox). No se deber crear
ningn objeto adicional, slo el objeto combobox.
Principal.htm
<HTML>
<HEAD>
<TITLE>Principal.htm</TITLE>
<!-function CreaVentana(formulario)
{
//La variable Indice guardar el valor del ndice seleccionado actual del combobox
var Indice=formulario.cmbVentana.selectedIndex;
//La variable Pagina guardar el valor asociado al ndice seleccionado actual del combobox
var Pagina=formulario.cmbVentana.options[Indice].value;
}
-->
</SCRIPT>
</HEAD>
<BODY>
<select name="cmbVentana" onChange="CreaVentana(this.form);">
<option value="1.htm"> Ventana 1 </option>
</select>
</FORM>
</BODY>
</HTML>
El cdigo fuente HTML de las pginas web 1.htm, 2.htm y 3.htm siguen igual.
La pgina Principal.htm aparece por defecto con la opcin Ventana 1. Si hacemos

click sobre la misma pgina uno no habr ningn cambio y por lo tanto, no se
activar el evento Change para poder hacer que aparezca la pgina. Para poder
visualizar la pgina 1.htm, debemos seleccionar la pgina 2.htm (Ventana 2) o la
pgina 3.htm (Ventana 3).
Si seleccionamos del combo las opciones Ventana 2 o Ventana 3, aparecern

automticamente las pginas web 2.htm y 3.htm en una nueva ventana.
se elija en un objeto de tipo radio (INPUT TYPE=RADIO, radiobutton u
optionbutton). No se deber crear ningn objeto adicional, slo las 3 opciones
del objeto de tipo radio.
Principal.htm
<HTML>
<HEAD>
<!-function CreaVentana(Pagina)
{
}
-->
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE=RADIO name="rbuVentana" value=1 onClick="CreaVentana('1.htm');" checked>
Ventana 1<BR>
<INPUT TYPE=RADIO name="rbuVentana" value=2 onClick="CreaVentana('2.htm');"> Ventana
2<BR>
<INPUT TYPE=RADIO name="rbuVentana" value=3 onClick="CreaVentana('3.htm');"> Ventana
3<BR>
</FORM>
</BODY>
</HTML>
La pgina Principal.htm aparece por defecto con la opcin Ventana 1. Si hacemos

click sobre la misma opcin se ejecutar la aparicin de una ventana. Se produce el
mismo efecto si hacemos click sobre una opcin diferente. Para esto se hace una
llamada al evento click en el objeto de tipo radio.
6. Cree una pgina web que permita activar una ventana segn lo que se elija en un
objeto de tipo CheckBox. No se deber crear ningn objeto adicional, slo los 3
objetos de tipo checkbox.
Principal.htm
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE=checkbox name="chbVentana1" onClick="CreaVentana('1.htm');" checked>
Ventana 1<BR>
<INPUT TYPE=checkbox name="chbVentana2" onClick="CreaVentana('2.htm');"> Ventana
2<BR>
<INPUT TYPE=checkbox name="chbVentana3" onClick="CreaVentana('3.htm');"> Ventana
3<BR>
</FORM>
</BODY>
</HTML>
7. Cree una pgina web permita ver un mensaje diferente en la barra de estado
cuando se coloque el mouse sobre cada una de 5 opciones diferentes
(hipervnculos que enlazan a la misma pgina)
BarraEstado.htm
<HTML>
<HEAD>
<TITLE>Cambio de mensajes en la barra de estado</TITLE>
</HEAD>
<BODY>
<CENTER>
<BR>
<B>
<I>
<FONT SIZE=3 COLOR=BLUE>
Observe la barra de estado cuando pase el mouse sobre
los hipervnculos
</I>
</B>
<BR>
<BR>
<A HREF="BarraEstado.htm" onMouseOver="self.status='Elegiste opcin 1';return true">1</A>




<BR>
</CENTER>
</body>
</html>
El resultado lo podemos visualizar a continuacin. Al inicio aparece la pgina

BarraEstado.htm con el mensaje "Listo" en la barra de estado. Este es el mensaje por
defecto cuando cargamos el explorador de Internet.
Luego, si movemos el mouse sobre cada uno de los hipervnculos aparecer un mensaje
diferente:
Al pasar el mouse sobre este hipervnculo aparece

en la barra de estado el mensaje "Elegiste la opcin
1"

2"

3"
Sucede algo similar para los hipervnculos etiquetados con 4 y 5.

8. Cree una pgina web que permita visualizar una imagen (que reemplaza a un
botn gris), como si se estuviera activando al pasar el mouse.
Para crear esta pgina debemos tener en cuenta cmo se realiza el efecto de activacin
de una imagen que representa un botn. Para esto, se tiene dos imgenes: la imagen que
se visualiza cuando el mouse est encima y la imagen que se visualiza cuando el mouse
no est encima.
En nuestro ejemplo, tenemos dos imgenes: Aceptar.gif y Aceptar_Act.gif, las cuales
son las imgenes cuando el mouse no est encima y cuando el mouse est encima
respectivamente.

<HTML>
<HEAD>
<TITLE>Cambio de imgenes al pasar el mouse</TITLE>
<!-function CambiaImagen(Imagen, Ruta)
{
Imagen.src=Ruta;
return true;
}
-->
</script>
</HEAD>
<BODY>
<img src="aceptar.gif"
alt="Ejecuta la accin indicada"
onMouseOver=" window.status='Ejecuta la accin indicada Barra Estado';
CambiaImagen(this,'aceptar_act.gif');
return true"
onMouseOut="window.status=''; CambiaImagen(this,'aceptar.gif');
return true">
</BODY>
</HTML>
Luego de pasar el mouse sobre la imagen de nombre Aceptar, ocurre lo que se muestra a
continuacin:
Como se puede observar, aparece un texto en la barra de estado y un texto de ayuda que
indica lo que realiza el botn.
9. Cree una pgina web que permita visualizar una ventana emergente 2 segundos
despus de que se haya cargado. Adems, la pgina web que se incluya en la
ventana emergente, deber tener un hipervnculo a un web site o a una pgina
web (cualquier URL) que ser cargada en la pgina inicial.
Para ilustrar lo que nos piden, primero veamos el resultado y luego veamos el cdigo
fuente de las respectivas pginas web.
Primero debe visualizarse la pgina web inicial:
Luego de que pasen 2000 milisegundos (2 segundos), aparecer la siguiente ventana

emergente:
La pgina web que se cargue dentro de esta ventana deber tener un enlace o
hipervnculo a otra pgina web o web site. En nuestro caso, haremos que el
hipervnculo enlace a una pgina web dentro del mismo directorio llamada
VentanaAuxiliar.htm y esta pgina ser cargada no en esta ventana sino en la
ventana inicial. El resultado se muestra a continuacin:
Ahora veamos el cdigo fuente necesario para lograr lo pedido:
Para crear la pgina web inicial, debemos colocar el siguiente cdigo:
ApareceEmergente.htm
<HTML>
<HEAD>
<TITLE>Apertura de Ventanas</TITLE>
</HEAD>

<BODY BGCOLOR="#FFF000" onLoad="setTimeout('AbreVentana()',2000)">
<!-function AbreVentana()
{
controlWindow=window.open("VentanaEmergente.htm",
"",
"toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=no,width=220,height=165");
}
-->
</SCRIPT>
<B>
<FONT FACE="Arial">Enseguida vers una pgina emergente
</FONT>
</B>
</BODY>
</HTML>
La pgina web que tendr el hipervnculo a la pgina web que se cargar en la ventana
inicial tiene el siguiente cdigo fuente:
VentanaEmergente.htm
<HTML>
<HEAD>
<TITLE>Abreventanas</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
<!-function ConseguirURL(url)
{
opener.location = url;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="JavaScript:ConseguirURL('VentanaAuxiliar.htm')">
Ventana Auxiliar a cargarse en la Ventana Padre</A>
</BODY>
</HTML>
VentanaAuxiliar.htm
<html>
<head>
<title>Ventana Auxiliar</title>
</head>
<body bgcolor="#FFFFFF">
<center>
<FONT COLOR=GREEN SIZE=6>Gauss Data International</FONT>
<BR>
<FONT COLOR="RED" SIZE=4> Su mejor opcin </FONT>
</center>
</body>
</html>
10. Cree una pgina web que permita visualizar una imagen como si se estuviera
activando al pasar el mouse sobre ella, y que nos permita ejecutar una accin al
hacer click sobre dicha imagen.
Ahora debemos agregar una funcin que ejecute una accin al momento de hacer click
sobre la imagen. Esa es la diferencia bsica con el ejercicio propuesto 7 de este
captulo.
<HTML>
<HEAD>
<TITLE>Cambio de imgenes al pasar el mouse y Ejecucin de una accin al hacer click</TITLE>
<!-function CambiaImagen(Imagen, Ruta)
{
Imagen.src=Ruta;
return true;
}
-->
</script>
</HEAD>
<BODY>
<img src="aceptar.gif"
alt="Ejecuta la accin indicada"
onMouseOver=" window.status='Ejecuta la accin indicada Barra Estado';
CambiaImagen(this,'aceptar_act.gif');
return true"
onMouseOut="window.status=''; CambiaImagen(this,'aceptar.gif');
return true"
onClick="alert('Ha pulsado una imagen y no un botn')">
</BODY>
</HTML>
Ahora, si hacemos click sobre la imagen, aparecer el mensaje con la funcin alert,
indicando "Ha pulsado una imagen y no un botn".

este mensaje.
11. Cree una pgina web permita observar el efecto del evento Blur. Para esto,
coloque una caja de texto y pruebe haciendo click dentro de la caja de texto y
luego haciendo click en cualquier otro lado de la pgina.
El cdigo fuente HTML es el siguiente:
<HTML>
<HEAD>
<TITLE> Uso del evento Blur </TITLE>
</HEAD>
<BODY>
<CENTER>
<FONT FACE="ARIAL" SIZE=4 COLOR=BLUE>
Haga click sobre el formulario y
luego haga click sobre algn otro lado de la pgina
<br>
<br>
<input name="apellido" onBlur="alert('Ests retirando el foco de la caja de texto')">
</CENTER>
</BODY>
</HTML>
1. Haga click dentro de

la caja de texto. Con
esyo colocar el foco
en la caja.
2. haga click en cualquier

otro lado de la pgina.
Luego
aparecer
el
mensaje.
12. Cree una pgina web que permita observar el efecto del evento Select. Para esto,
coloque una caja de texto seleccinela. Cuando esto suceda, deber aparecer un
mensaje indicando lo que ha sucedido.
<HTML>
<HEAD>
<TITLE> Uso del evento Select </TITLE>
</HEAD>
<BODY>
<CENTER>
<FONT FACE="ARIAL" SIZE=4 COLOR=BLUE>
Seleccione la caja de texto

<br>
<br>
<input name="apellido" onSelect="alert('Ests seleccionando la caja de texto')">
</CENTER>
</BODY>
</HTML>
Ahora, seleccione la caja de texto:
Inmediatamente despus, aparecer el siguiente mensaje:
13. Cree una pgina web que permita rotar imgenes de 3 empresas diferentes cada
1.5 segundos, sin necesidad de intervencin del usuario.
<HTML>
<HEAD>
<TITLE>Anuncios rotativos con JavaScript</TITLE>
</HEAD>
<!-// variable global para el banner actual
var WebSite=1;
// funcin para vincular al web site correspondiente
function IrAWebSite()
{
if (WebSite==1) window.location.href="http://www.empresa1.com/";
if (WebSite==2) window.location.href="http://www.empresa2.com/";
if (WebSite==3) window.location.href="http://www.empresa3.com";
}
// funcin para rotar las 3 imgenes
function RotarBanner()
{
if (++WebSite > 3) WebSite = 1;
document.images[0].src = "empresa" + WebSite + ".gif";
window.setTimeout('RotarBanner();',1500);
}
-->
</SCRIPT>
<BODY onLoad="window.setTimeout('RotarBanner();',1500);">
<body bgcolor="ffffff">
<center>
<FONT SIZE=4 COLOR="BLUE">Banners rotativos</FONT>
<hr>
<A HREF="javascript:IrAWebSite();">
<IMG BORDER=0 NAME="empresa" SRC="empresa1.gif">
</A>
</body>
</html>
El resultado se visualiza a continuacin. Primero aparece el banner correspondiente a

la primera empresa:
Despus de 1500 milisegundos, aparece el banner correspondiente a la segunda

empresa:
Despus de 1500 milisegundos, aparece el banner correspondiente a la tercera empresa:
Despus de 1500 milisegundos, volver a aparecer el banner de la primera empresa y as

sucesivamente. Cuando se haga click sobre cualquiera de los banners que en realidad
estn dentro de hipervnculos, se llamar a los web sites correspondientes a cada
empresa.
14. Cree una pgina web tenga dos frames y que permita visualizar una imagen en el
frame inferior cuando se pase el mouse por encima de un hipervnculo en el
frame superior. Cuando se retire el mouse del hipervnculo, deber mostrarse
una pgina en blanco en el frame inferior.
EnlaceConFrames.htm
<HTML>
<HEAD>
<TITLE>Ejemplo de enlace con frames</TITLE>
</HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME SRC="arriba.htm" marginwidth=1 marginheight=1 name="arriba">
<FRAME SRC="PaginaEnBlanco.htm" marginwidth=1 marginheight=1 name="abajo" scrolling=no>
</FRAMESET>
</FRAMESET>
</HTML>
PaginaEnBlanco.htm
<HTML>
<HEAD>
<TITLE>Abajo</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
</BODY>
</HTML>
Arriba.htm
<HTML>
<HEAD>
<TITLE>Superior</TITLE>
</HEAD>
<CENTER>
<BR><BR>
<a href="#" onmouseover="parent.abajo.location.href='abajo.htm'; return true"
onmouseout="parent.abajo.location.href='PaginaEnBlanco.htm'">
Ver imagen
</a>
</CENTER>
</body>
</HTML>
Abajo.htm
<HTML>
<HEAD>
<TITLE>LOWER</TITLE>
</HEAD>
<CENTER>
<BR>
<BR>
<IMG SRC="OPERAMAIL.gif" border=0>
</CENTER>
</BODY>
</HTML>
La pgina anterior contiene dos frames. El frame superior contiene el hipervnculo

pedido y el frame inferior tiene cargada una pgina en blanco. Si colocamos el mouse
sobre el hipervnculo, ocurrir lo siguiente:
Como se puede observar, ha aparecido una imagen en el frame inferior cuando ocurri
el evento MouseOver. Esto se debe a que se ha cargado la pgina web Abajo.htm y ha
reemplazado a la pgina web PaginaEnBlanco.htm.
Si retiramos el mouse del hipervnculo (si se produce el evento MouseOver), se volver
a cargar la pgina web PginaEnBlanco en el frame inferior y nuevamente la pgina que
contiene los frames (EnlaceConFrames.htm) se ver como al inicio.
15. Suponga que tenemos 3 imgenes: imagen1.gif, imagen2.gif e imagen3.gif. Si

queremos que estas imgenes cambien cuando se pase el mouse sobre ella por las
siquientes: imagen1_Act.gif, imagen2_Act.gif e imagen3_Act.gif, realize la
pgina web con JavaScript que nos permita lograr esto.
A continuacin presentamos las imgenes que necesitamos para poder realizar lo
pedido:
IMAGEN1.GIF
IMAGEN2.GIF
IMAGEN3.GIF
IMAGEN1_ACT.GIF
IMAGEN2_ACT.GIF
IMAGEN3_ACT.GIF
El resultado que se desea se visualiza a continuacin:
Al pasar el mouse sobre la imagen: IMAGEN1.GIF se obtiene el siguiente resultado:

<html>
<head>
<title> Men de Servicios </title>
</head>
<script>
<!-//Permite asignar una ruta a una imagen
function cambiaImagen(Imagen, Ruta)
{
Imagen.src=Ruta;
return true;
}
</script>
<BODY>
<CENTER>
<TABLE BORDER=0>
<TR>

<td width="102%" valign="middle" align="center" colspan="3">
<a href="EstudiosSistematicos.htm"
target="_self" style="border: medium none">
<img src="IMAGEN1.gif" width="300" height="50"
alt="lo mejor en Auditora de Negocios " style="border: medium none"
onMouseOver=" window.status='Estudios Sistemticos';
cambiaImagen(this, 'IMAGEN1_ACT.gif');
return true"
onMouseOut="window.status=''; cambiaImagen(this,'IMAGEN1.gif');
return true">
</a></td>
</TR>
<TR>
<a href="EstudiosEspeciales.htm"
alt="Estudios adecuados para tu realidad " style="border: medium none"
onMouseOver=" window.status='Estudios Especiales';
cambiaImagen(this, 'IMAGEN2_ACT.gif');
return true"
onMouseOut="window.status=''; cambiaImagen(this,'IMAGEN2.gif');
return true">
</a></td>
</TR>
<TR>
<a href="ImpulsoVentas.htm"
alt="Mejora tus Ventas " style="border: medium none"
onMouseOver=" window.status='Impulso de Ventas';
cambiaImagen(this, 'IMAGEN3_ACT.gif'); return true"
onMouseOut="window.status='';cambiaImagen(this,'IMAGEN3.gif');
return true"> </a></td> </TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
16. Cree una pgina web permita validar las opciones de un mantenimiento.
Suponga que tenemos que realizar el mantenimiento de la tabla MotivoCita, que
tiene como campos: IdMotivoCita (llave), nombre y descripcin.
El
mantenimiento deber ser completo; es decir, permitir las opciones: Nuevo,
Modificar, Buscar y Eliminar. No se preocupe de las operaciones con la base de
datos, slo realice la validacin de los objetos del formulario y las acciones que se
deben realizar cuando se hace click en alguna de las opciones. Suponga que las
operaciones con la base de datos se realizan con la pgina "EjecutaProceso.htm"
y que es invocada con el mtodo submit del formulario. Suponga adems que
luego de ejecutadas las operaciones, se regresa a la misma pgina. Adems, debe
usar imgenes en lugar de los botones usados en el ejercicio del captulo anterior.
Veamos primero como queremos que se vea el formulario:
MotivoCita.htm
<HTML>
<HEAD>
<TITLE>MANTENIMIENTO DE MOTIVOS DE CITAS</TITLE>
function CambiaImagen(Imagen, Ruta)
//Permite ubicar la imagen en la ruta dada.
{
Imagen.src=Ruta;
return true;
}
//Reemplaza a las funciones del botn de tipo RESET
function Limpiar()
{
FrmMotivoCita.txbCodigo.value="";
FrmMotivoCita.txbNombre.value="";
FrmMotivoCita.txaDescripcion.value="";
}
//Realiza las acciones correspondientes a la opcin Nuevo
function AccionNuevo()
{
FrmMotivoCita.txbCodigo.value="";
FrmMotivoCita.txbCodigo.disabled=true;
}
//Realiza las acciones correspondientes a la opcin Buscar
function AccionBuscar()
{
FrmMotivoCita.txbCodigo.disabled=false;
FrmMotivoCita.txbNombre.disabled=false;
FrmMotivoCita.txaDescripcion.disabled=true;
}
//Realiza las acciones correspondientes a la opcin Modificar
function AccionModificar()
{
FrmMotivoCita.Codigo.value=FrmMotivoCita.txbCodigo.value
FrmMotivoCita.txbNombre.disabled=false;
FrmMotivoCita.txaDescripcion.disabled=false;
}
//Realiza las acciones correspondientes a la opcin Eliminar
function AccionEliminar()
{
FrmMotivoCita.Codigo.value=FrmMotivoCita.txbCodigo.value
FrmMotivoCita.txbNombre.disabled=true;
FrmMotivoCita.txaDescripcion.disabled=true;
}
//Verifica que se haya ingresado el cdigo
function VerificaCodigo()
{
if (FrmMotivoCita.txbCodigo.value=="")
{
alert("Debe ingresar el cdigo del motivo de la cita");
FrmMotivoCita.txbCodigo.focus;
return false;
}
return true;
}
//Verifica que se haya ingresado el nombre
function VerificaNombre()
{
if (FrmMotivoCita.txbNombre.value=="")
{
alert("Debe ingresar el nombre del motivo de la cita");
FrmMotivoCita.txbNombre.focus;
return false;
}
return true;
}
//Verifica que se haya ingresado la descripcin
function VerificaDescripcion()
{
if (FrmMotivoCita.txaDescripcion.value=="")
{
alert("Debe ingresar la descripcin del motivo de la cita");
FrmMotivoCita.txaDescripcion.focus;
return false;
}
return true;
}
//Verifica que estn completos los datos necesarios para
//ejecutar las acciones
function VerificaTodo()
{
if (FrmMotivoCita.AccionIndicada.value==1 || FrmMotivoCita.AccionIndicada.value==3)
{
if (VerificaNombre() && VerificaDescripcion())
{
FrmMotivoCita.PuedoProceder.value=1;
FrmMotivoCita.submit();
return;
}
}
if (FrmMotivoCita.AccionIndicada.value==4)
{
if (VerificaCodigo())
{
return;
}
}
if (FrmMotivoCita.AccionIndicada.value==2)
{
return;
}
}
</script>
</HEAD>
<BODY BACKGROUND="../images/fondo.gif">
<FORM NAME="FrmMotivoCita" METHOD="post" ACTION="EjecutaProceso.htm">
<INPUT TYPE="HIDDEN" NAME=AccionIndicada value=0>
<INPUT TYPE="HIDDEN" NAME=Codigo value=0>
<INPUT TYPE="HIDDEN" NAME=PuedoProceder value=0>
<DIV align=center><FONT color=white face="" size=4><STRONG><FONT color=white face=""
size=4> MANTENIMIENTO DE MOTIVOS DE CITAS</FONT></STRONG></FONT></DIV>
<BR>
<BR>
<CENTER>
<TABLE BORDER=0 cellPadding=1 cellSpacing=1 style="HEIGHT: 50px; WIDTH: 350px">
<TR>
<TD>

<img src="../images/nuevo.gif"
alt="Nuevo Motivo de Cita" style="border: medium none"
onMouseOver=" window.status='Permite crear un nuevo registro';
CambiaImagen(this, '../images/nuevo_act.gif');
return true;"
onMouseOut="window.status=''; CambiaImagen(this,'../images/nuevo.gif');
return true"
onclick="AccionNuevo();FrmMotivoCita.AccionIndicada.value=1;"></TD>
<TD>

<img src="../images/buscar.gif"
alt="Consulta sobre un motivo de cita en particular" style="border: medium none"

onMouseOver=" window.status='Permite consultar un registro determinado';
CambiaImagen(this, '../images/buscar_act.gif');
return true"
onMouseOut="window.status=''; CambiaImagen(this,'../images/buscar.gif');
return true"
onclick="AccionBuscar();FrmMotivoCita.AccionIndicada.value=2;"></TD>
<TD>

<img src="../images/modificar.gif"
alt="Cambia los datos de un motivo de cita" style="border: medium none"
onMouseOver=" window.status='Permite modificar un registro determinado';
CambiaImagen(this, '../images/modificar_act.gif');
return true"
onMouseOut="window.status=''; CambiaImagen(this,'../images/modificar.gif');
return true"
onclick="AccionModificar();FrmMotivoCita.AccionIndicada.value=3;"></TD>
<TD>

<img src="../images/eliminar.gif"
alt="Elimina un motivo de cita indicado" style="border: medium none"
onMouseOver=" window.status='Permite eliminar un registro indicado';
CambiaImagen(this, '../images/eliminar_act.gif');
return true"
onMouseOut="window.status=''; CambiaImagen(this,'../images/eliminar.gif');
return true"
onclick="AccionEliminar();FrmMotivoCita.AccionIndicada.value=4;"></TD>
</TR>
</TABLE>
</CENTER>
<BR>
<center>
<TABLE border=0 cellPadding=1 cellSpacing=1 style="HEIGHT: 201px; WIDTH: 430px"
width=49.6%>
<TR>
<TD>
<STRONG><FONT color=#ffffff face="" size=2>
Código
Motivo Cita</FONT>
</STRONG></TD>
<TD>
<INPUT type="text" name=txbCodigo maxlength=5 style="HEIGHT: 22px; WIDTH: 251px"
value=""></TD></TR>
<TR>
<TD>
<STRONG><FONT color=#ffffff face="" size=2> Nombre</FONT>
</STRONG></TD>
<TD>
<INPUT type="text" name="txbNombre" MAXLENGTH=60 style="HEIGHT: 22px;
WIDTH: 252px" value=""></TD></TR>
<TR>
<TD>
<STRONG><FONT color=#ffffff face="" size=2> Descripción</FONT>
</STRONG></TD>
<TD><TEXTAREA name=txaDescripcion rows=10 cols=20 style="HEIGHT: 100px; WIDTH:
252px">
</TEXTAREA>  </TD></TR>
</TABLE>
<BR>
<TABLE>
<TD>

<img src="../images/aceptar.gif"
alt="Ejecuta la accin indicada" style="border: medium none"
onMouseOver=" window.status='Ejecuta la accin indicada';
CambiaImagen(this, '../images/aceptar_act.gif');
return true"
onMouseOut="window.status=''; CambiaImagen(this,'../images/aceptar.gif');
return true"
onclick="VerificaTodo();"></TD>
<TD>

<img src="../images/limpiar.gif"
alt="Limpiar un motivo de cita indicado" style="border: medium none"
onMouseOver=" window.status='Permite eliminar un registro indicado';
CambiaImagen(this, '../images/limpiar_act.gif');
return true"
onMouseOut="window.status=''; CambiaImagen(this,'../images/limpiar.gif');
return true"
onclick="Limpiar();"></TD>
</TABLE>
</center>
</FORM>
</BODY>
</HTML>
El cdigo fuente de la pgina web EjecutaProceso.htm sigue igual.

17. Cree una funcin en JavaScript que nos permita saber si la versin del
explorador de Internet (si es Internet Explorer) es mayor o igual que 4. Esto
puede ser til si sabemos que estamos usando una funcin que no soporta un
explorador de Internet antiguo.
<!-function VerificaVersionExplorador()
//Verifica si la versin del explorador de Internet es 4 o mayor
{
var esIE4Omayor = false;
if(navigator.appName.indexOf("Microsoft") != -1 && parseInt(navigator.appVersion) >= 4)
esIE4Omayor = true;
return esIE4Omayor;
}
if (VerificaVersionExplorador()) alert("La versin del explorador es 4 o mayor");
else alert("La versin del explorador es menor a 4");
-->
</SCRIPT>
Al ejecutar este cdigo fuente dentro de una pgina web, ocurrir lo siguiente:
Mensaje que aparece si el

explorador tiene una versin
mayor o igual a 4.
Mensaje que aparece si el

explorador tiene una versin
menor a 4.
18. Cree una funcin en JavaScript, que nos permita validar si el valor ingresado en
una caja de texto es un nmero entero.
<HTML>
<HEAD>
<TITLE>Verificacin de ingreso de nmeros enteros</TITLE>
<!-function VerificaCampoEntero(campo)
{
var val = campo.value;
//Si encuentra un punto, quiere decir que no es entero
if(val.indexOf(".") != -1) return false;
//Si es un valor que contiene tanto caracteres como nmeros, no es entero
if(isNaN(val)) return false;
//El valor del campo es el valor de la variable val convertida a entero

campo.value = '' + parseInt(val);
return true;
//Retorno verdadero porque fue un entero
}
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name=formulario>
<INPUT TYPE=TEXT NAME=txbValor VALUE="">

<INPUT TYPE=BUTTON NAME=butVerificar VALUE="Verificar"
onClick="if (VerificaCampoEntero(formulario.txbValor)) alert('Correcto');
else alert('Incorrecto');">
</FORM>
</BODY>
</HTML>
El resultado se muestra a continuacin:

Si escribimos el nmero 1, es un entero y por lo tanto, el resultado es "Correcto".
Si escribimos el nmero 1.1, no es un entero y por lo tanto, el resultado es "Incorrecto".
Si escribimos el texto "Gauss", no es un entero y por lo tanto, el resultado es

"Incorrecto".
Si escribimos el texto "1 Gauss 2", no es un entero y por lo tanto, el resultado es

"Incorrecto".
19. Cree una funcin en JavaScript, que nos permita validar si el valor ingresado en
una caja de texto es un nmero real.
<HTML>
<HEAD>
<TITLE>Verificacin de ingreso de nmeros enteros</TITLE>
<!-function VerificaCampoReal(campo)
{
var valor = campo.value;
//Si encuentro un punto decimal

if(valor.indexOf(".") != -1)
{
//Quito todos los ceros a la derecha que pudieran haber
while(valor.charAt(valor.length-1) == "0")
valor = valor.substring(0,valor.length-1);
//Si el ltimo caracter del valor es un punto, lo retiro del valor original
if (valor.charAt(valor.length-1) == ".")
valor = valor.substring(0,val.length-1);
}
//Comparo la cadena resultante de valor con el valor que representa en nmero
if("" + parseFloat(valor) != valor) return false;
return true;
}
-->
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE=TEXT NAME=txbValor VALUE="">

<INPUT TYPE=BUTTON NAME=butVerificar VALUE="Verificar Real"
onClick="if (VerificaCampoReal(formulario.txbValor)) alert('Correcto');
else alert('Incorrecto');">
</FORM>
</BODY>
</HTML>

Si escribimos el nmero 1.5, es un real y por lo tanto, el resultado es "Correcto".
Si escribimos el texto "0.87asd6", no es un real y por lo tanto, el resultado es

"Incorrecto".
20. Cree una pgina web que permita simular una calculadora sencilla. Deber
tener las funciones: suma, resta, multiplicacin y divisin.
El cdigo fuente para lograr lo pedido es el siguiente:

<html>
<head>
<title>Calculadora Sencilla</title>
<!-function VerificaCampoReal(campo)
{
var valor = campo.value;
//Si encuentro un punto decimal
if(valor.indexOf(".") != -1)
{
//Quito todos los ceros a la derecha que pudieran haber
while(valor.charAt(valor.length-1) == "0")
valor = valor.substring(0,valor.length-1);
//Si el ltimo caracter del valor es un punto, lo retiro del valor original
if (valor.charAt(valor.length-1) == ".")
valor = valor.substring(0,val.length-1);
}
//Comparo la cadena resultante de valor con el valor que representa en nmero
if("" + parseFloat(valor) != valor) return false;
return true;
}
function Suma()
{
//Primero verifico que los datos ingresados sean nmeros reales
if (!(VerificaCampoReal(formulario.txbValor1)) ||
!(VerificaCampoReal(formulario.txbValor2)))
{
formulario.txbResultado.value = "Error";
return false;
}
formulario.txbResultado.value = parseFloat(formulario.txbValor1.value) +
parseFloat(formulario.txbValor2.value)
}
function Resta()
{
{
return false;
}
formulario.txbResultado.value = parseFloat(formulario.txbValor1.value) parseFloat(formulario.txbValor2.value)
}
function Producto()
{
{
return false;
}
formulario.txbResultado.value = parseFloat(formulario.txbValor1.value) *
}
function Division()
{
{
return false;
}
formulario.txbResultado.value = parseFloat(formulario.txbValor1.value) /
}
-->
</SCRIPT>
</head>
<body>
<CENTER>

<table border="0" width="254" height="120">
<tr>
<td width="110" height="26">Valor 1</td>
<td width="128" height="26"><INPUT TYPE=TEXT NAME=txbValor1 VALUE=""></td>
</tr>
<tr>
<td width="110" height="26">Valor 2</td>
<td width="128" height="26"><INPUT TYPE=TEXT NAME=txbValor2 VALUE=""></td>
</tr>
<tr>
<td width="110" height="26">Resultado</td>
<td width="128" height="26">
<INPUT TYPE=TEXT NAME=txbResultado VALUE=""></td>
</tr>
</table>
<BR>

<table border="0" width="36%">
<tr>
<td width="25%">
<p align="center">
<input type="button" value=" + " name="butSuma" onClick="Suma();"></td>
<td width="25%">
<p align="center">
<input type="button" value=" - " name="butResta" onClick="Resta();"></td>
<td width="25%">
<p align="center">
<input type="button" value=" * " name="butProducto" onClick="Producto();"></td>
<td width="25%">
<p align="center">
<input type="button" value=" / " name="butDivision" onClick="Division();"></td>
</tr>
</table>
</FORM>
</CENTER>
</body>
</html>
----------------------------------------
21. Cree una funcin en JavaScript, que haga lo mismo que la funcin" trim" de
algunos lenguajes de programacin . Esta funcin quita los espacios en blanco
de los extremos de una expresin.
<HTML>
<HEAD>
function trim(str)
{
return str.replace(new RegExp("^ *"), "").replace(new RegExp(" *$"), "");
}
</SCRIPT>
</HEAD>
<BODY>
alert("Trim ' Ejemplo ': " + trim(" Ejemplo "));
alert("Trim 'Ejemplo ': " + trim("Ejemplo "));
alert("Trim ' Ejemplo': " + trim(" Ejemplo"));
</SCRIPT>
</BODY>
</HTML>
----------------------------------------
CAPTULO 13: COOKIES

Las Cookies son un mecanismo que permite a un servidor enviar informacin a un
cliente y recuperarla de l; es decir, podemos colocar informacin dentro del disco duro
de la persona que est acciendo a nuestro web site.
Con este mecanismo se pueden crear sistemas para seguir la pista de los visitantes de
sus pginas Web, saber cuanto tiempo permanecen en su ubicacion, etc. Otra ventaja
de las Cookies es su capacidad para expirar tras un plazo de tiempo determinado.
Tambien es posible requerir que una cookie solo pueda ser recuperada bajo medidas de
seguridad, lo que garantizara la privacidad de sus usuarios si las cookies se emplearan
para transferir contraseas.
Explicaremos las cookies mediante un ejemplo. Supongamos que necesitamos una
pgina web que nos permita almacenar el nombre de un usuario (dentro de su PC) y que
sea almacenado durante el tiempo que dura la sesin (mientras no cerremos el
explorador de Internet); adems, debemos poder obtener este valor almacenado con un
botn de tipo button. Veamos por separado cada una de las funciones:
Necesitamos una funcin que nos permita crear o actualizar la cookie. Esta funcin
se llamar: CreaOActualizaCookie.
Necesitamos una funcin que nos permita obtener el valor almacenado en la cookie.
Esta funcin se llamar: ObtenerCookie.
Necesitamos una funcin que nos permita eliminar la cookie luego de terminada la
sesin actual. Esta funcin se llamar: EliminarCookie.
El resultado que se espera es el siguiente:

1. Se deber crear dos pginas web. La primera pgina web deber contener una caja
de texto en la cual se insertar el nombre del usuario y dos botones: un botn
permitir actualizar o crear el cookie con el valor que sea ingresado en la caja de
texto.
Si se ha dejado la caja de texto en blanco y se ha presionado el botn etiquetado
como "Crear/Actualizar Cookie", deber aparecer un mensaje indicando que ocurri
un error.
Primera
Pgina:
GuardaNombre1.htm
Resultado de presionar el botn

"Crear/Actualizar Cookie" dejando la
caja de texto en blanco.
Resultado de presionar el botn "Ver

Valor ..." dejando la caja de texto en
blanco.
Ahora procedemos a
escribir el nombre del
usuario.
Resultado de presionar el botn

"Crear/Actualizar Cookie" luego de
escribir el nombre del usuario.
2. Deber crear otra pgina web que permita ver el valor del cookie almacenado. Esta
pgina ser invocada luego de hacer click sobre el botn etiquetado como "Ver
Valor ...".
Resultado de presionar el botn "Ver

Valor ..." luego de haber ingresado el nombre
del usuario ("Arturo"):
GuardaNombre1.htm
<html>
<head>
<title>Ejemplo de Cookies con JavaScript</title>
<script>
//Retorna el valor decodificado de una cookie.
function ObtenerValorCookie (cadena)

{
var fincadena = document.cookie.indexOf (";", cadena);
if (fincadena == -1)
fincadena = document.cookie.length;
return unescape(document.cookie.substring(cadena, fincadena));
}
//Retorna el valor del cookie especificado por "nombreCookie"
// nombreCookie: Cadena que contiene el nombre del cookie.
// Valor de Retorno: Cadena conteniendo el valor del cookie o null si el
//
cookie no existe.
function ObtenerCookie (nombreCookie)

{
var argumento = nombreCookie + "=";
var longitudArgumento = argumento.length;
var longitudCookie = document.cookie.length;
var i = 0;
while (i < longitudCookie)
{
var j = i + longitudArgumento;
if (document.cookie.substring(i, j) == argumento)
return ObtenerValorCookie(j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
//Funcin que crea o actualiza una cookie.

// nombreCookie: Objeto cadena que contiene el nombre del cookie
// valorCookie: Objeto cadena que contiene el valor del cookie. Podra contener
//
cualquier cadena de caracteres invlida.
// [expiracion]: Objeto fecha que contiene la fecha de expiracin del cookie. Si se
//
omite o es nulo, el cookie expira al final de la sesin.
// ruta:
Objeto cadena que indica la ruta para la cual el cookie es vlido.
// dominio:
Objeto cadena que indica el dominio para el cual el cookie es vlido.
//
Si se omite o es nulo, usa el dominio del documento llamado.
// seguridad: Valor booleano (true o false) que indica si la transmisin del cookie
//
requiere un canal de seguridad (https).
// Los primeros dos parmetros son obligatorios. Los otros si son dados, deben ser
// pasados en el orden mostrado. Para omitir un campo opcional, use null en su
// ubicacin. Por ejemplo, para llamar a CreaOActualizaCookie usando un nombre, valor
// y ruta, usted podra escribir:
// CreaOActualizaCookie (nombreCookie,valorCookie,null,"/");
// Note que los parmetros omitidos al final, no requieren un valor null.
// Para configurar un cookie seguro para una ruta "/ruta", que expira despus de la
// sesin actual, usted podra escribir:
// CreaOActualizaCookie (nombreCookie,valorCookie,null,"/ruta",null,true);
function CreaOActualizaCookie (nombreCookie, valorCookie)

{
var listaArgumentos = CreaOActualizaCookie.arguments;
var totalArgumentos = CreaOActualizaCookie.arguments.length;
var expiracion = (totalArgumentos > 2) ? listaArgumentos[2] : null;
var ruta = (totalArgumentos > 3) ? listaArgumentos[3] : null;
var dominio = (totalArgumentos > 4) ? listaArgumentos[4] : null;
var seguridad = (totalArgumentos > 5) ? listaArgumentos[5] : false;
document.cookie = nombreCookie + "=" + escape(valorCookie) +
((expiracion == null) ? "" : ("; expiracion=" + expiracion.toGMTString())) +
((ruta == null) ? "" : ("; ruta=" + ruta)) +
((dominio == null) ? "" : ("; dominio=" + dominio)) +
((seguridad == true) ? "; seguridad" : "");
}
//Elimina una cookie. Configura la fecha de expiracin a la fecha y hora actuales.

// nombreCookie: Objeto cadena conteniendo el nombre del cookie.
function EliminaCookie (nombreCookie)

{
var expiracion = new Date();
expiracion.setTime (expiracion.getTime() - 1);
var valorCookie = ObtenerCookie (nombreCookie);
document.cookie = nombreCookie + "=" + valorCookie + "; expiracion=" +
expiracion.toGMTString();
}
</script>
</head>
<BODY>
<FORM NAME="formulario" onSubmit="
if(formulario.txbNombre.value.length != 0)
{
var fechaExpiracion = new Date ();
fechaExpiracion.setTime(fechaExpiracion.getTime() + (24 * 60 * 60 * 1000));
CreaOActualizaCookie('CookieEjemplo', formulario.txbNombre.value, fechaExpiracion);
alert('El Cookie ha sido actualizado como ' + formulario.txbNombre.value + '.');
return false;
}
else
{
alert('Has dejado el campo Nombre en blanco.');
return false;
}">
Tu Nombre: <INPUT TYPE="text" NAME="txbNombre" SIZE=40>
<BR><BR>
<INPUT TYPE="submit" VALUE="Crear/Actualizar Cookie">
<INPUT TYPE="button" VALUE="Ver Valor ..."
onClick="
if(ObtenerCookie('CookieEjemplo') == null)
alert('Has creado o actualizado el cookie?');
else
window.open('GuardaNombre2.htm');">
</FORM>
</CENTER>
</BODY>
</HTML>
GuardaNombre2.htm
<html>
<head>
<title>Ejemplo de Cookies JavaScript</title>
//Retorna el valor decodificado de una cookie.
function ObtenerValorCookie (cadena)

{
var fincadena = document.cookie.indexOf (";", cadena);
if (fincadena == -1)
fincadena = document.cookie.length;
return unescape(document.cookie.substring(cadena, fincadena));
}
//Retorna el valor del cookie especificado por "nombreCookie"
// nombreCookie: Cadena que contiene el nombre del cookie.
// Valor de Retorno: Cadena conteniendo el valor del cookie o null si el
//
cookie no existe.
function ObtenerCookie (nombreCookie)

{
var argumento = nombreCookie + "=";
var longitudArgumento = argumento.length;
var longitudCookie = document.cookie.length;
var i = 0;
while (i < longitudCookie)
{
var j = i + longitudArgumento;
if (document.cookie.substring(i, j) == argumento)
return ObtenerValorCookie(j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
</script>
</head>
<BODY BGCOLOR=FFFFFF TEXT=000000>
<center>
<SCRIPT>
document.write("Bienvenido otra vez, <H1>" + ObtenerCookie('CookieEjemplo') + "</H1>.");
</SCRIPT>
</center>
</BODY>
</HTML>
APNDICE A: COLORES
JavaScript contiene cadenas literales de color que pueden emplearse en lugar de sus
correspondientes valores de color RGB (Red Green Blue). Estos literales se usan en las
propiedades JavaScript alinkColor,bgColor, fgColor, linkColor y vlinkColor. Dentro
de las Pginas HTML se pueden emplear tambin para definir los atributos COLOR de
las etiquetas BODY y FONT.
Los colores posibles se muestran a continuacin:
yellowgreen
yellow
whitesmoke
white
wheat
violet
turquoise
tomato
thistle
teal
tan
steelblue
springgreen
snow
slategray
slateblue
skyblue
silver
sienna
seashell
seagreen
sandybrown
salmon
saddlebrown
royalblue
rosybrown
red
purple
powderblue
plum
pink
peru
peachpuff
papayawhip
palevioletred
paleturquoise
palegreen
palegoldenrod
orchid
orangered
orange
olivedrab
olive
oldlace
navy
navajowhite
moccasin
mistyrose
mintcream
midnightblue
mediumvioletred
mediumturquoise
mediumspringgreen
mediumslateblue
mediumseagreen
mediumpurple
mediumorchid
mediumblue
mediumaquamarine
maroon
magenta
linen
limegreen
lime
lightyellow
lightsteelblue
lightslategray
lightskyblue
lightseagreen
lightsalmon
lightpink
lightgrey
lightgreen
lightgoldenrodyellow
lightcyan
lightcoral
lightblue
lemonchiffon
lawngreen
lavenderblush
lavender
khaki
ivory
indigo
indianred
hotpink
honeydew
greenyellow
green
gray
goldenrod
gold
ghostwhite
gainsboro
fuchsia
forestgreen
floralwhite
firebrick
dodgerblue
dimgray
deepskyblue
deeppink
darkviolet
darkturquoise
darkslategray
darkslateblue
darkseagreen
darksalmon
darkred
darkorchid
darkorange
darkolivegreen
darkmagenta
darkkhaki
darkgreen
darkgray
darkgoldenrod
darkcyan
darkblue
cyan
crimson
cornsilk
cornflowerblue
coral
chocolate
chartreuse
cadetblue
burlywood
brown
blueviolet
blue
blanchedalmond
black
bisque
beige
azure
aquamarine
aqua
antiquewhite
APNDICE B: WEB SITES INTERESANTES ACERCA DE

JAVASCRIPT
24-Hour JavaScripts
http://www.javascripts.com
Aqu encontrar gran cantidad de ejemplos gratuitos para escoger.
Ad/Vantage Pauluk
http://www.pawluk.com
Aqu encontrar una serie de trucos y cdigos de ejemplo.
JavaScript Guide
http://developer.netscape.com/library/documentation/communicator/jsguide4/index.h
tml
Contiene documentacin interactiva de Netscape para JavaScript. Ofrece cdigo no
muy til para principiantes.
JavaScript SourceBook
http://gmccomb.com/javascript
Este es el web site de ayuda de Gordon McComb para su libro. El es un reconocidor
programador de JavaScript y forma parte de muchos grupos de discusin.
JavaScript for the Total Non-Programmer
http://www.webteacher.com/javatour.htm
Esta gua interactiva lleva al usuario paso a paso por los fundamentos de JavaScript.
http://www.netscape.com/newsref/std/cookie_spec.html
Aqu podr encontrar toda la ayuda necesaria sobre cookies.
APNDICE C: GLOSARIO DE TRMINOS
Servidor: se llama as a un computador potente que ofrece una serie de servicios a

computadores clientes (los que solicitan que se les brinde servicios). Estos servicios
pueden ser: Servicio de publicacin en Internet (servidor web), servicio de bases de
datos, servicio de correo, servicio de impresin, etc.
Cliente: se llama as a un computador dentro de una red, el cual realiza solicitudes
de servicio a computadores mucho ms potentes llamados servidores.
Explorador de Internet. Es una aplicacin de software que nos permite conectarnos
a la gran red mundial de comunicaciones llamada Internet. Como ejemplos de
exploradores de Internet tenemos: Internet Explorer y Netscape Navigator.
HTML. Son las siglas de Hiper Text Markup Language. Es un lenguaje de
programacin basado en etiquetas que nos sirve para trabajar en entorno web.
Java. Es un lenguaje de programacin muy potente (pero algo complejo de
aprender) que est basado en el lenguaje C++ y que nos sirve para trabajar tanto en
entorno cliente servidor como en entorno web (tecnologa de Internet).
Lenguaje Compilado. Es aquel lenguaje cuyos programas necesitan ser compilados
para poder ser ejecutados. La compilacin produce a partir del cdigo fuente un
cdigo objeto o un archivo ejecutable que puede ser interpretado por otra aplicacin
o por el sistema operativo respectivamente.
Lenguaje Interpretado. Es aquel lenguaje cuyos programas no necesitan ser
compilados para poder ser ejecutados.
La interpretacin, a diferencia de la
compilacin no necesita generar a partir del cdigo fuente un cdigo objeto o un
archivo ejecutable previo a ser ejecutado. Lo que necesita es que la aplicacin
interprete lnea a lnea las acciones y las vaya ejecutando.

Libro Java Script

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Libro Java Script

Hochgeladen von

Copyright:

Verfügbare Formate

APRENDA A DISEAR PGINAS WEB

CON JAVA SCRIPT

Mg. Emigdio Alfaro

CAPTULO 2: CARACTERSTICAS FUNDAMENTALES

usuario, e incluso ejecutar sonidos o miniaplicaciones cuando un usuario entra o

El lenguaje JavaScript se parece a Java, pero es ms sencillo y ms facil de aprender.

Son lenguajes de programacin con comandos y sintaxis similares.

Estn orientados a objetos

Su sintxis es similar a la del lenguaje C o C++; por lo tanto, tenemos que

Sin embargo, JavaScript es un lenguaje interpretado (no compilado como el Java), lo

JavaScript no tiene clases ni herencia; sin embargo, tiene un conjunto de objetos

Otra diferencia importante es que el cdigo JavaScript se encuentra includo dentro de

Comentario de varias lneas.

NOTA: No debemos olvidarnos de ocultar nuestro cdigo para los exploradores de

CAPTULO 4: TIPOS DE DATOS

y luego se indican las siguientes instrucciones:

ResultadoB = variable2 + variable1

En la primera instruccin, la variable ResultadoA contendr la cadena "2050" y en la

El valor de la variable ResultadoE ser "Gauss Data International20" y el valor de la

El valor de la variable ResultadoG, as como el valor de la variable ResultadoH no se

FUNCIONES QUE MANIPULAN TIPOS DE DATOS

a) Coloque las etiquetas de JavaScript y ocltelas de los exploradores que no son

El resultado que podemos visualizar en la pgina web es el siguiente:

2. Cree una pgina web y coloque en un mensaje el valor de la variable ResultadoD

El cdigo fuente resultante se puede ver a continuacin:

El resultado que podemos visualizar en la pgina web es el siguiente:

3. Cree una pgina web y coloque en un mensaje el valor de la variable ResultadoE

El cdigo fuente resultante se puede ver a continuacin:

El resultado que podemos visualizar en la pgina web es el siguiente:

CAPTULO 5: VARIABLES Y CONSTANTES

La palabra clave null asigna valores nulos a las variables.

var nombreVariable1[=valor ] [..., nombreVariableN[=valor]]

Un literal con coma flotante se especifca mediante los siguientes elementos: un

Los valores literales de cadena se especifican empleando cero o ms caracteres

3. Qu tipo de valores puede contener una variable JavaScript?

CAPTULO 6: PALABRAS RESERVADAS

Y, verdadero si ambos son verdaderos

expr1 && expr2

O, verdadero si uno de los dos es verdadero

NO, niega el operando

OPERADORES A NIVEL DE BITS

Y a nivel de bit. Devuelve un uno si los dos operandos

O a nivel de bit. Devuelve un uno si algunos de los dos

XOR a nivel de bit. Devuelve un uno si un operando es

Desplaza bits a la izquierda un nmero especificado de

Desplaza bits a la derecha un nmero especificado de

Cuando se establece una comparacin en JavaScript se debe usar un operador de

"Gauss" + " " + "Data"

Igualmente si la variable cadena contiene el valor "Gauss", la instruccin

2. Es correcta la expresin Y =x ++ * 5? Qu valor tendr Y si x vale 10?

3. Es correcta la expresin Y =x * 5++? Qu valor tendr Y si x vale 5?

4. Es correcta la expresin Y++ =x * 5? Qu valor tendr Y si x vale 10?

El resultado en Microsoft Internet Explorer s el siguiente:

5. Es correcta la expresin Y * =x + 5? Qu valor tendr Y si x vale 20?

El resultado en Microsoft Internet Explorer es el siguiente:

El resultado en Netscape Navigator es el siguiente:

6. Es correcta la expresin Y / =x + 5? Qu valor tendr Y si x vale 20?

7. Cul ser el resultado de la expresin (5 & 0) || (x ++) si x vale 10?

8. Cul ser el resultado de la expresin !(5 & 0)?

9. Cul ser el resultado de la expresin (5 & 0) && (x ++) si x vale 10?

10. Cul ser el resultado de la expresin (5 & 0) || (x ++) si x vale 10?

11. Cul ser el resultado de la expresin A > B si el valor de A es "Gauss" y el valor

12. Cul ser el resultado de la expresin A <= B si el valor de A es "Gauss" y el

13. Cul ser el resultado de la expresin A != B si el valor de A es "Gauss" y el