Scribd
Cargar
20 vistas57 páginas

Introducción a JavaScript: Cliente y Servidor

El documento proporciona una introducción a JavaScript, explicando su uso tanto en el lado del cliente como en el servidor para crear páginas HTML dinámicas. Detalla la jerarquía de objetos, operadores y sentencias disponibles en JavaScript, así como ejemplos de su implementación. Se enfatiza la interacción entre el cliente y el servidor y cómo JavaScript facilita la manipulación de datos y eventos en aplicaciones web.

Cargado por

juan andres praxedes mateo
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
20 vistas57 páginas

Introducción a JavaScript: Cliente y Servidor

El documento proporciona una introducción a JavaScript, explicando su uso tanto en el lado del cliente como en el servidor para crear páginas HTML dinámicas. Detalla la jerarquía de objetos, operadores y sentencias disponibles en JavaScript, así como ejemplos de su implementación. Se enfatiza la interacción entre el cliente y el servidor y cómo JavaScript facilita la manipulación de datos y eventos en aplicaciones web.

Cargado por

juan andres praxedes mateo
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

INTRODUCCIÓN A JAVASCRIPT

Introducción
Java Script de Cliente
Java Script de Servidor
Objetos de Script de Cliente
Objetos de Script de Servidor

INTRODUCCIÓN
Java Script es una adaptación del lenguaje Java, con el que se nos permite
crear páginas HTML dinámicas, esto es, con cierta interacción por parte del
usuario, permitiendo así mismo el trabajo con datos comunes a empresas no
conectadas entre sí con una red de área local (LAN), aprovechando una
plataforma como Internet para la transmisión de datos entre ella. Para ello,
el Java Script se articula en dos partes bien diferenciadas:

Java Script que se ejecutará en el lado del Cliente.


Java Script que se ejecutaré en el lado del Servidor.

Aunque el código Java Script se inserta en la página que va hasta el cliente,


virtualmente el código está a medio camino entre el servidor y el cliente,
haciendo que la interacción entre cliente y servidor sea la máxima.

Java Script de Cliente


Java Script de Servidor

Volver al índice

JAVA SCRIPT DE CLIENTE


Nos referimos con ello, a la parte del código que se ejecuta en el lado del
cliente, por lo que es el propio navegador el encargado de interpretar el
código Java Script que se reciba junto con el HTML. Esta parte del Java
Script nos permite la interacción entre el usuario y los diversos objetos que
haya en la ventana de si navegador, así como los datos que estos contienen
o sus propiedades, pudiendo recuperar o modificar todo este gran conjunto
de datos.

<HTML>
<HEAD><TITLE> Prueba </TITLE></HEAD>
<BODY>
<SCRIPT languaje="javascript">
function F1(){
alert ("Formulario Cargado"); } </SCRIPT>
<FORM>
<INPUT TYPE=BUTTON VALUE="Ejecuta función" onClick=F1()> </FORM>
</BODY>
</HTML>

Como se ve en la figura, el código se introduce entre las etiquetas


"SCRIPT" de HTML, lugar donde se desarrollarán funciones que
posteriormente serán asignadas a una acción sobre cualquiera de los objetos
que la página contenga. En el ejemplo propuesto, asignamos la función "f1"
al evento click del botón del formulario llamado b1.

El código Java Script inserto en la página HTML puede responder a eventos


de usuario como clicks del ratón, entradas de datos en cajas de texto, o la
propia navegación entre páginas.

Volver al índice

JAVASCRIPT DE SERVIDOR

El Script de Servidor está igualmente inserto en el código HTML. Los


Scripts de servidor utilizados para realizar operaciones sobre objetos del
servidor, tales como la ejecución de una conexión sobre una base de datos
existente, o acceder a su sistema de archivos.

En contraste con los scripts de cliente, los de servidor se ejecutan en el


servidor como si de un programa ejecutable .EXE se tratase, aunque
enviando el resultado a un navegador. Pero para ello, es necesario que la
página se almacene en el servidor en una carpeta ejecutable, y que este
tenga instalado el "JavaScript Runtime Engine" o motor de JavaScript, que
será el encargado de pre-ejecutar las páginas que contengan este tipo de
código.

De este modo, la página con script de servidor, se ejecuta en el servidor,


devolviendo al usuario el resultado de la ejecución del código de servidor, y
no recibiendo el propio código en su navegador, que no es capaz de
interpretarlo.

En contraste con los CGI standard (Common Gateway Interface) los


programas en JavaScript, están embebidos en la página, junto con el código
HTML facilitando enormemente el mantenimiento de las páginas.

Volver al índice

OBJETOS DE JAVASCRIPT DE CLIENTE

Estos objetos representan y contienen toda la información relevante para el


trabajo con JavScript orientado al navegador del cliente. Estos objetos
dependen unos de otros siguiendo una jerarquía herética, esto es, un objeto
principal contiene otros objetos, que a su vez contienen otros, heredando
cada objeto hijo, las propiedades del objeto padre del que depende.

Así, a continuación se expone la jerarquía de objetos de los Scripts de


Cliente:
Volver al índice

OBJETOS DE SCRIPT DE SERVIDOR

Los Objetos de Script de Servidor son los encargados de enlazar con fuentes
de datos de cualquier tipo, almacenadas en el servidor, bien en forma de
Base de datos, bien en forma de archivo de datos. Al igual que los
anteriores (objetos de cliente) están organizados jerárquicamente, como se
muestra en la siguiente figura.

Volver al índice
OPERADORES DE JAVASCRIPT

Operadores de Comparación
Operadores Aritméticos
Operadores Lógicos
Operadores de Cadenas de Texto
Operadores de Asignación
Operadores de Desplazamiento de Registro
Operadores Especiales

OPERADORES DE COMPARACIÓN
Son los utilizados para comparar valores, constantes o variables, siempre
que estas sean del mismo tipo, esto es, semejantes.
Los operadores de comparación standard de Java Script son:

Igualdad ( == )
Mayor que ( > )
Menor que ( < )
Mayor o igual ( >= )
Menor o igual ( <= )
Distinto ( != )

Volver al índice
OPERADORES ARITMÉTICOS

Los operadores aritméticos toman una pareja de valores y devuelven uno


solo. Los operadores standard son:

Adición (+)
Substracción (-)
Multiplicación (*)
División (/)

Otros operadores aritméticos son los siguientes:

Modulo (%)
Devuelve el resto resultante de la división de los valores iniciales.

z = x % y 20 % 6 = 2

Incremento (++)
Este operador se utiliza para incrementar el valor de una variable en una
unidad, sea el tipo que sea la base numeral utilizada.

x + + + + x

El operador de incremento se puede usar de dos formas diferentes cuando lo


asignamos a una variable, de forma que si declaramos que Y = X++ para un
valor de X = 5, primero se asignará el valor a Y, y luego se incrementará la
variable X. Así, queda X = 6 e Y = 5.

Si declararemos la asignación del otro modo, Y = ++X para el mismo valor


de X, primero se incrementaría la X, y después se asignaría el valor a la
variable Y. Así, el resultado de la operación sería el siguiente: X = 6 e Y = 6
Decremento (--)
El decremento es semejante al operador anterior, aunque en lugar de
incrementar una unidad, la resta de la variable que preceda al operador.
x - - - - x

Al igual que el operador de incremento, en una asignación no actúa igual Y


= --X que Y = X-- Ya que la primera decrementa X antes de asignar el valor
a Y, mientras que el segunda asigna a Y el valor de X ya decrementado.

Negación (-)
El operador de negación precede a una variable o constante, y se utilizará
para convertir la constante o el valor de la variable en un valor negativo.

- x

Volver al índice

OPERADORES LÓGICOS

Los operadores lógicos devuelven un valor Booleano (verdadero / falso) en


función de las expresiones que estos evalúen. Existen los siguientes
operadores lógicos:

And ( && )
El operador && devuelve Verdadero cuando las dos expresiones que evalúa
son verdaderas, de tal forma x && y devuelve verdadero solo cuando tanto
X como Y son verdaderas.

A continuación se especifica una tabla que especifica todas las situaciones:


Expresión 1 && Expresión 2

V && V = V
F && V = F
V && F = F
F && F = F

F = Falso V= Verdadero

Or ( || )
El operador || es opuesto a && en tanto en cuanto a que este operador,
situado entre dos expresiones, devuelve el valor booleano verdadero solo
con que una de las expresiones que evalúa sea verdadera.

A continuación, la tabla de correspondencias:

Expresión 1 || Expresión 2

V || V = V
V || F = V
F || V = V
F || F = F

Not (!)
El operador ! devuelve el valor contrario de una expresión, de forma que si
la expresión es verdadera, la aplicación de este operador sobre esa variable
devolverá Falso, mientras que si la expresión original es falsa, la aplicación
del operador ! devolverá verdadero.

!V = F
!F = V

Volver al índice

OPERADORES DE CADENAS DE TEXTO

Los operadores de cadena se ubican entre dos cadenas de texto, con la


finalidad de que la operación realizada sobre ellos, devuelva una sola
cadena de texto. Existen en Java Script dos operadores de cadena, cuya
función es concatenar la cadenas de texto a las que se refiere.

Los dos tipos de operadores de concatenación son:

Concatenación con espacio (+)


Concatenación sin espacio (+=)

La utilización de estos operadores es la que sigue:


Instrucción Solución
"Mi" + "Coche" "Mi Coche"
"Mi" += "Coche" "MiCoche"

Volver al índice
OPERADORES DE ASIGNACIÓN

Los operadores de asignación son los utilizados para hacer que el valor de
una variable adquiera el especificado en la operación de asignación.

A continuación, se especifica la lista de operadores de asignación así como


sus significados:

Operador Significado
x=y x=y
x += y x=x+y
x -= y x=x-y
x *= y x=x*y
x /= y x=x/y
x %= y x=x%y

Volver al índice

OPERADORES DE DESPLAZAMIENTO DE
REGISTRO

Estos operadores funcionan tratando sus operandos como conjuntos de bits


sea cual sea la base numérica que estos utilizan, pudiendo comparar así
números en base decimal con otros de otra base numeral diferente, puesto
que estos operadores comparan los valores en base binaria.
Estos operadores, se ejecutan a nivel binario, pero retornan un dato standard
Java Script.

Los operadores de desplazamiento de bit, transforman sus operandos en


cadenas binarias de 32 bits. Cada bit del primer operando es pareado con su
correspondiente, en orden, del segundo operando. Posteriormente es
aplicada la operación correspondiente a cada par de bits (uno de un
operando, y otro del otro operando

And a nivel de bit (&) El operador &, al ser un operador de


desplazamiento de bit, convierte los operandos a binario, parea los bits de
un operando con los del otro, pareándolos. Entonces, aplica la operación
AND standard a esos pares de bits, tomando 1 como Verdadero, y 0 como
Falso.

De este modo, así se realizaría una operación AND a nivel de bit:

Operación Ejecución
12 & 6 1100 & 0110 =0100

Or a nivel de bit (|)


Este operador funciona como todos los operadores de desplazamiento de
registro, transformando los operandos a binario, los parea por orden, y
ejecuta sobre las parejas de bits la operación Or standard.

Así, una operación Or a nivel de bit se ejecutaría de la siguiente forma:

Operación Ejecución
12 | 6 1100 | 0110 = 1110

Not a nivel de bit (~)


Al igual que los otros operadores de su clase, convierte el operando binario,
y aplica sobre cada cifra binaria una operación Not standard.

Una operación Not a nivel de bit resultaría de la siguiente manera:

Operación Ejecución
~ 12 ~ 1100 = 0011

Volver al índice

OPERADORES ESPECIALES
En Java Script existen una serie de operadores especiales, utilizados
generalmente como abreviación de código, o para trabajo directo con
objetos y sus propiedades o métodos.

Operador condicional (?:)


El operador condicional es utilizado como abreviatura de código. Es
equivalente a la sentencia de control de flujo IF THEN ELSE. Una
condición se acompaña de dos expresiones, devolviendo la primera si la
condición es verdadera, o la segunda, si la condición es falsa.

La sintaxis de este operador es la siguiente:

Condición ? Expresión 1 : Expresión


Sintaxis:
2
IF Condición THEN Expresión 1
Equivalencia:
ELSE Expresión2

Operador Coma (,)


El operador coma, es muy simple. Separa dos o más expresiones,
evaluándolas, y devolviendo el valor de la segunda expresión.

Su sintaxis el la que sigue:

Expresión-1, expresión-2

El operador Coma es utilizable para ubicar múltiples expresiones en lugares


en los que solo se requiere una expresión sencilla.

Delete
Este es uno de los operadores con los que trabajaremos objetos o listas. El
operador Delete es utilizado para el borrado de una propiedad o un
elemento de una posición específica de un array.

Existen dos sintaxis fundamentales para Delete:

Borrado de la
delete
propiedad de un
Nombre_Objeto.Propiedad
objeto:
Borrado del elemento delete Nombre_Objeto
de un Array: [índice en el array]

New
El operador New sirve para crear una instancia de un objeto, bien uno ya
definido por el usuario, bien uno predefinido del lenguaje, los cuales
incorporan su propia función de construcción (también llamado
Constructor). En definitiva, sirve para crearnos en nuestro script una réplica
de un objeto ya creado, y que posteriormente personalizaremos (o no).

El modo de representación de este operador es como se muestra a


continuación:
Nombre_Objeto = new
Tipo_Objeto (Parámetros)

El nombre del Objeto será el que queramos darle nosotros a la


instancia que estamos creando de tal objeto.
El tipo de Objeto se corresponderá con la función de construcción del
objeto del que queremos crearnos la instancia.
Los parámetros serán los correspondientes a la función de construcción
de tal objeto.

This
El operador This es utilizado cuando nos queremos referir al objeto actual.
Si estamos en un objeto determinado, como puede ser un control, y nos
queremos referir a las propiedades de dicho control, nos referiremos al
objeto actual como This.

De este modo, para referirnos a la propiedad o método del objeto actual, la


sintaxis será:

this . Propiedad

Tipeof
El operador tipeof va seguido de una expresión, y nos devuelve una cadena
de text que referencia el tipo de tal expresión. Así, si aplicamos este
operador sobre una expresión nos devolverá si la expresión es un objeto, o
un dato numérico, cadena de caracteres...

Su sintaxis es:

typeof operando
typeof (operando)

Los posibles valores a devolver por este operador son:


Object para un objeto
Fuction para una función
Number para numerales
String para cadenas de caracteres
Boolean para variables booleanas

Volver al índice
SENTENCIAS DE JAVASCRIPT

Sentencia Var
Sentencia If - Then - Else
Sentencia Switch
Comentarios
Bucle While
Bucle Do - While
Bucle For
Sentencia Break
Sentencia Continue
Sentencia Delete
Sentencia Export
Sentencia Import
Sentencia Function
Sentencia Return

Las sentencias de Java Script son cadenas de texto, con una sintaxis
determinada, y que hace que el programa realice una acción determinada.
Una sentencia puede ocupar múltiples líneas, aunque también se da el caso
de que múltiples sentencias se aúnen en una sola línea, debiendo entonces
separar las sentencias con Punto y coma (;)

VAR
Var es la sentencia utilizada para declarar una variable, que será utilizada en
el script y que, opcionalmente, podremos asignarle un valor inicial.
La forma de utilizar esta sentencia se especifica a continuación:
var nombre_variable = valor

Volver al índice

SENTENCIA IF THEN ELSE


Esta sentencia sirve para hacer que el programa decida entre una serie de
operaciones u otra, en función de la evaluación de una condición. Si la
condición es verdadera, se ejecuta una o varias operaciones, y si no lo es,
será otra u otras las operaciones a realizar.

Su sintaxis es:

If (condición) {
acción 1;
acción 2; }
else {
acción 3
acción 4; }

Un ejemplo práctico sería:

x = 0;
if (x == 0) {
[Link]("El valor de x es 0");
}
else {
[Link]("El valor de x NO es 0");
}
La condición es una expresión condicional compuesta por dos operandos, y
un operador condicional (Tema de operadores de Java Script), como X !=
10.

Volver al índice

SWITCH
Switch sirve para que el programa decida entre entre múltiples series de
opciones, en función de un dato inserto por por el usuario, de forma que en
función del dato introducido por el usuario, el script ejecutará, bien una
serie de acciones u otras, de entre un conjunto de opciones amplio.

A continuación se muestra la sintaxis de la sentencia switch:

switch(expresión)
{
case 1 :
operación 1;
break;
case 2 :
operación 2;
break;
default:
operación 3;
break;

La última opción, no se corresponde con ninguna de las posibles


introducidas por el usuario. El código de esta opción se ejecutará cuando el
usuario inserte una opción no contemplada en los casos posibles que se han
programado.

Un ejemplo de uso de switch es el siguiente:

swich(x) {
case 1 :
[Link]("Opción I");
break;
case 2 :
[Link]("Opción II");
break;
case 3 :
[Link]("Opción III");
break;
default :
[Link]("Opción por defecto");
break;
}

Si no colocásemos la sentencia Break al final de cada opción, el programa


seguiría ejecutando las siguientes opciones del switch. Con Break, evitamos
este problema fácilmente.

Volver al índice

COMENTARIOS
Los comentarios se insertan en el código del programa con la finalidad de
que el programador pueda escribir cualquier cosa relevante acerca del
código que considere importante. También se utiliza para marcar las
diferentes zonas, con el fin de localizarlos visualmente de forma rápida.

Existen dos formas de insertar comentarios en el código:

// Comentario de una sola línea

/* Comentario de
múltiples líneas */

Volver al índice

WHILE
La sentencia While es utilizada con la finalidad de que el script realice una
o múltiples operaciones en función de que la evaluación sea verdadera. Esto
es: mientras la condición se cumpla, las operaciones que contiene se
repetirán continuamente, dejando de hacerlo, en cuanto la condición se deje
de cumplir.

Su sintaxis se resume en:

while condición
{
acción 1
acción 2
acción 3
}

A continuación se muestra un ejemplo de código:

var x;
while (x < 10) {
alert(x);
x++;
}

Volver al índice

DO - WHILE
La sentencia Do ... While se utiliza para realizar una serie de operaciones en
función de una expresión, ejecutándose las operaciones de forma continua y
repetida mientras la evaluación de la expresión, sea verdadero.

La sintaxis de esta sentencia es como sigue:

do
sentencia
while (condición);

A continuación, una muestra de código:

var x = 0;
do {
x++;
[Link](x);
while (x < 25);

Volver al índice
FOR
El bucle for se utiliza con la finalidad de que el programa que realizamos
realiza una o múltiples operaciones un número de veces determinado, de
forma que se repita el código que contiene el bucle tantas veces como se
especifique.

La sintaxis de este bucle es:

for ( expresión inicial; condición;


incremento)
sentencias

A continuación, un ejemplo de lo mencionado:

var i;
for (i = 0;i < 10;i++) {
[Link](i);
if (i == 5) {
[Link]("Hola"); }
}

Volver al índice

SENTENCIA BREAK
Esta sentencia se ubica dentro de un bucle (sentencia que permite repetir el
mismo código varias veces) y se utiliza para forzar la salida de este. El
bucle, se repite un número de veces determinado, o bien en función de una
condición. Con la sentencia Break, podemos forzar desde dentro del propio
bucle, la finalización del mismo, y el salto a la siguiente instrucción,
después del bucle.

Su sintaxis es la que sigue:

Inicio del bucle


Instrucción 1
Instrucción 2
Instrucción 3
Break
Instrucción 4
Fin del Bucle

Un ejemplo práctico de lo antes mencionado, es el siguiente:

function Prueba() {
var i = 0;
var x = 0;
while (i != 6) {
x++;
if (x == 4) {
break;
}
i++;
}
}

Volver al índice

CONTINUE
La sentencia Continue, al igual que la sentencia Break, se utiliza en un
bucle (while, for), y lo que hace es terminar la ejecución del conjunto de
sentencias y operaciones del bucle, pero, en contraste con la sentencia
break, esta no finaliza la ejecución del bucle, sino que salta la ejecución del
código inserto en él, y vuelve al comienzo del bucle, para continuar su
ejecución.

Un ejemplo de uso de esta sentencia es el siguiente:

var x = 0;
var y = 0;
while (x < 10) {
y = y + 2;
if (y == 8) {
continue;
}
x++;
}

La sentencia Continue puede tener un parámetro (opcional) que se


corresponderá con una etiqueta. Esta etiqueta estará dentro del bucle,
permitiendo que el salto se haga hasta la etiqueta, y no hasta el comienzo
del bucle.

A continuación, un ejemplo de una sentencia Continue con una etiqueta.

var x = 0;
var y = 0;
var z = 0;
while (x < 10) {
x++;
ETIQUETA:
if (x > 5) {
y++;
[Link]("Mensaje " + y);
}
if (y > 2) {
continue ETIQUETA;
}
[Link](y);
}

Volver al índice

DELETE
Se utiliza para borrar una propiedad de un objeto. Si el objeto es de tipo
array (cadena de datos identificados mediante un índice) se utiliza para
eliminar uno de los elementos del "array".

La sintaxis general de la sentencia Delete es la que se muestra a


continuación:

delete nombre_objeto.propiedad;

delete objeto_array[índice];

Volver al índice

EXPORT
Esta sentencia se utiliza para interrelacionar objetos, propiedades y
funciones a otros scripts, con la finalidad de que ambos scripts compartan
esos objetos, propiedades o funciones.

Su sintaxis es como se muestra a continuación:


export nombre_objeto
export nombre_función
export nombre_objeto.propiedad

En la siguiente figura, aparece un ejemplo del código:

export objeto1, objeto2, funcion1, funcion2;

export objeto1, [Link];

Volver al índice

IMPORT
La sentencia Import tiene una finalidad semejante a la sentencia Export. De
hecho, se utilizan en conjunto, de modo que con Import, importamos
propiedades, funciones y objetos desde otro script que previamente los ha
exportado con Export.

Su sintaxis se muestra a continuación:

import
nombre_objeto.propiedad
import nombre_función
import nombre_objeto,
nombre_objeto2

Antes de que se pueda ordenar la importación de objetos, estos ha de haber


sido exportados desde el script origen de esos objetos, cargando el script de
exportación en otra ventana o marco.

Volver al índice
FUNCTION
Esta es la sentencia utilizada en JavaScript para declarar una función, que
ejecutará una serie de acciones cuando sea invocada en cualquier parte del
script que la contiene. La función puede operar de dos maneras diferentes:
Que realice una serie de operaciones o que realice una serie de operaciones,
devolviendo un valor al script que invoca la función. Si la función devuelve
un valor, se especifica el dato a devolver con la sentencia Return.

A continuación, se muestra la sintaxis a utilizar:

function nombre_función (parámetro1, parámetro


2)
{
Acciones
}

Los parámetros son opcionales. Si no se necesitan, se pondrán igualmente


los paréntesis, pero no contendrán nada.

En la figura siguiente se muestra un ejemplo de código:

function F1() {
x++;
[Link](x);
}

function F2() {
x++;
[Link](x);
return x;
}

Volver al índice

RETURN
Esta es la sentencia de devolución de datos de una función. Dentro de la
función, que ejecuta una serie de operaciones, se puede desear que esta
devuelva un valor al flujo de programa principal. Para ello se utiliza esta
sentencia.

La forma de utilizarla es, dentro de una función, y de la siguiente manera:

function nombre_función ()
{
Operaciones
return valor/variable
}

Volver al índice
ARQUITECTURA DE JAVASCRIPT

Eventos
Eventos y Funciones
Objetos de Formulario

EVENTOS
El lenguaje JavaScript basa su funcionamiento en una serie de acciones que
ocurren en la pantalla llamadas EVENTOS a los que asignaremos un código
determinado. Un mismo objeto puede actuar de formas diferentes ante
distintos eventos, de forma que un botón puede hacer una acción si el
usuario hace click y hacer otra diferente si el usuario hace doble click.

Los Eventos posibles son los siguientes:

Evento Ocurrencia

onClick Al hacer click en un objeto


Al hacer Doble click sobre un
onDbclick
objeto
onMousedown Al pulsar un botón
onMouseup Al dejar de pulsar un botón
Cuando el ratón se mueve
onMouseover
sobre el objeto
onMouseout Cuando el ratón deja de estar
sobre un objeto
onKeypress Al pulsar una tecla
al pulsar empezar a pulsar una
onKeydown
tecla
onKeyup al dejar de pulsar una tecla

A continuación se muestra un ejemplo de cómo asignar una acción a un


objeto de una forma sencilla. La acción será mostrar un mensaje por la
pantalla.

<HTML>
<BODY>
<FORM>
<INPUT TYPE=BUTTON VALUE=Mensaje
ONCLICK=alert("Hola")>
</FORM></BODY></HTML>

Ver el Ejemplo de Mensaje

Volver al índice

EVENTOS Y FUNCIONES
Esta misma acción, puede ser realizada utilizando una función. De este
modo, el código JavaScript no irá inserto en el evento al hacer click
(onclick) del botón. En este caso, el evento onclick llamará a una función, la
cual contendrá el código correspondiente al evento.
En definitiva, el código de la página quedaría de esta forma:

<HTML>
<BODY>
<SCRIPT>
function muestraMensaje() {
alert("Mensaje lanzado mediante una función");
}
</SCRIPT>
<FORM>
<INPUT TYPE=BUTTON VALUE=Mensaje
onClick=muestraMensaje()>
</FORM>
</BODY>
</HTML>

Ver el Ejemplo de Mensaje desde función

Del mismo modo en que otros lenguajes tienen funciones que podemos
llamar para que se ejecute el código que contienen, podemos así mismo, en
JavaScript, crear (como ya hemos visto) una función que será llamada por
el evento del botón. El requisito fundamental es que la función ha de estar
contenida en un Script que está ubicado antes que el formulario que
contiene el botón.

Al igual que en otros lenguajes, las funciones de JavaScript pueden recibir


parámetros que utilizarán internamente. De este modo, a continuación se
muestra el código correspondiente a una página que contiene una función
que muestra por pantalla un mensaje que recibe como parámetro:

<HTML>
<BODY>
<SCRIPT>
function muestraMensaje(X) {
alert(X);
}
</SCRIPT>
<FORM>
<INPUT TYPE=BUTTON VALUE=Mensaje
onClick=muestraMensaje("Mensaje paramétrico")>
</FORM>
</BODY>
</HTML>

Obsérvese cómo pasamos el mensaje en la llamada a la función desde el


botón, y cómo lo recibimos como una variable en la propia función.

Ver el ejemplo

Volver al índice

OBJETOS Y SU MANEJO
El formulario puede contener diversos objetos que se enumeran a
continuación:

Caja de texto
Caja de Clave •••••

Botón de acción Submit

Botón de borrado Reset

Botón de Botón
JavaScript
Lista Desplegable Madrid
Botón de selección Opción de
Selección
Opción de
Botón excluyente
selección

El contenido de las cajas de texto, sean del tipo que sean, se recoge en su
propiedad VALUE. De esta forma, podremos comprobar el contenido de una
o varias cajas de texto, antes de hacer otra cosa.

En el ejemplo que se muestra a continuación, se muestran dos cajas de


texto. Un botón recogerá el contenido de las cajas de texto, y compondrá
con ello un mensaje de salida: (Obsérvese que el formulario se llama F10 y
las cajas de texto T1 y T2. Para referirnos al contenido de una caja de texto,
lo referenciaremos de con el nombre del formulario que lo contiene, de la
siguiente forma: [Link])

<HTML>
<BODY>
<SCRIPT>
function compruebaCajas() {
if (([Link]!="")&&([Link]!="")){
alert([Link] + [Link]);
}
}
</SCRIPT>
<FORM NAME=F10>
<INPUT TYPE=TEXT NAME=T1>
<INPUT TYPE=TEXT NAME=T2>
<INPUT TYPE=BUTTON VALUE=Mensaje
onClick=compruebaCajas()>
</FORM>
</BODY>
</HTML>

Ver el ejemplo
Otro ejemplo del uso de la propiedad VALUE de la caja de texto, es la de
validación de datos. En el ejemplo a continuación, aparecerán tres cajas de
texto en las que se introducirá el día el mes y el año, y un botón se
encargará de comprobar que la fecha introducida es válida.

<HTML>
<BODY>
<SCRIPT>
function compruebaFecha() {
if (([Link]!="")&&([Link]<30)){
if (([Link]!="")&&([Link]<12)){
alert("Fecha escrita correctamente"));
}
}
}
</SCRIPT>
<FORM NAME=F10>
Dia: <INPUT TYPE=TEXT NAME=T1>
Mes: <INPUT TYPE=TEXT NAME=T2>
Año: <INPUT TYPE=TEXT NAME=T3>
<INPUT TYPE=BUTTON VALUE=Comprobar
onClick=compruebaFecha()>
</FORM>
</BODY>
</HTML>

Ver el Ejemplo

Volver al índice
EJERCICIO PRÁCTICO

A continuación realizaremos una página en la que una imagen cambiará


cuando el usuario para el ratón sobre dicha imagen. Para ello,
programaremos los evento onMouseover y onMouseout

Al recibir el ratón (onmouseover) cambiaremos la imagen inicial por otra


diferente. Al perder el ratón (onmouseout) repondremos la imagen original.
Para cambiar la imagen, no basaremos en la propiedad SRC del objeto
imagen.

El código es el que se muestra a continuación:

<HTML>
<BODY>
<SCRIPT>
function cambiaGraphic(x) {
if (x==1){
[Link]="[Link]";
}
if (x==2){
[Link]="[Link]";
}
}
</SCRIPT>
<IMG SRC=[Link] NAME=I1 onMouseover=cambiaGraph(1)
onMouseout=cambiaGraph(2)>
</FORM>
</BODY>
</HTML>

Ver el Ejemplo

Volver al índice
MODELOS DE OBJETOS

Objeto Array
Objeto Date
Objeto Math
Objeto String

OBJETO ARRAY
El objeto array se encarga de almacenar en memoria una serie de datos del mismo tipo, que más
adelante podremos recuperar. Los datos que contiene el array se referencian por un número de
índice, de forma que el primer elemento será Array [0], el, siguiente será array [1] y así
sucesivamente.

El array, al ser un objeto, requiere de una construcción del mismo, antes de ser utilizado. La
creación del objeto se hace utilizando su constructor, de la forma siguiente:

nombre_objeto = new array(10);

nombre_objeto = new array(elemento1,elemento2)

Una vez se ha creado el objeto y dado un nombre, se puede empezar a utilizar, asignando o
tomando datos del mismo. Un ejemplo de utilización de array completo sería:

amigos = new array(10);

amigos[0] = "David";
amigos[1] = "Roberto";
amigos[2] = "Ángel";

Volver al índice

OBJETO DATE
Es el objeto que nos permite trabajar con fechas y horas. Al ser un objeto, requiere de un
constructor, semejante al utilizado por todos los objetos.( similar al objeto array, por ejemplo).
Podemos crear un objeto de tipo fecha, sin especificar parámetros, y que serviré para especificar
su contenido en un punto posterior del código. También podemos crear el mismo objeto, con una
fecha como parámetro. Esto es, un objeto tipo fecha inicializado con un valor de fecha. El
parámetro puede recibir una fecha, o bien una fecha y una hora.

A continuación se muestra una construcción sin parámetros, otra con un parámetro de tipo fecha, y
por último, otra más con parámetros de tipo fecha y hora. Aparecen en el ejemplo los datos que
tomaría el objeto creado:

Dia = new Date();

Cumpleaños = new Date(74,9,25);


alert(Cumpleaños);
Ver el ejemplo

En el siguiente ejemplo, vemos cómo configurar un objeto tipo Fecha incluyéndole la hora, pues
hemos visto en el ejemplo anterior cómo JavaScript pone por defecto la hora a 00:00:00

var AVIS;
AVIS = new Date(99,2,15,11,25,0);
alert(AVIS);

Ver el Ejemplo

Métodos del objeto Date


getTime() Devuelve la hora actual
getDate() Devuelve la fecha actual
getDay() Devuelve el día de la semana
Devuelve el mes de la fecha
getMonth()
especificada, entre 1 y 12
Devuelve el año del objeto tipo fecha
getYear()
especificado
getHours() Devuelve una hora entre 0 y 23
Devuelve los minutos de la fecha
getMinutes()
especificada
Devuelve los segundos de la fecha
getSecond()
especificada
setTime(hora) Establece la hora completa para el
objeto
Establece la fecha para el objeto
setDate(fecha)
especificado
Establece el día del objeto Date
setDay(dia)
especificado
setMonth(mes) Establece el mes del objeto tipo fecha
Establece el año del objeto tipo fecha
setYear(año)
especificado
setHours(hora) Establece la hora para le objeto
setMinutes(minutos) Establece los minutos del objeto
Establece los segundos del objeto
setSecond(segundos)
Date

A continuación se muestra un ejemplo práctico, en el que declaramos una fecha, y posteriormente


rectificamos uno de sus parámetros.(en este caso el día):

Fecha = new Date(74,9,23);


[Link](25);
alert([Link]());
Ver el Ejemplo

EJERCICIO PRÁCTICO DE DATE


A continuación se muestra el código necesario para ubicar la fecha en una caja de texto que exista
en un formulario de la página:

<HTML>
<BODY BGCOLOR=DDDDDD>
<CENTER>
<FORM NAME=Formulario1>
<INPUT TYPE=TEXT NAME=cajaTexto>
</FORM>
<SCRIPT>
<[Link]=Date();
</SCRIPT>
</CENTER>
</BODY>
</HTML>

Obsérvese que el código del script no está dentro de una función, sino que está libre, de forma que
este se ejecuta incondicionalmente. Y escribirá la fecha en la propiedad VALUE de la caja de
texto que está contenida en el formulario ([Link]).

Ver el Ejemplo

Volver al índice

OBJETO MATH
El objeto Math, contiene propiedades y métodos para el uso de funciones y constantes
matemáticas así como sus valores (en el caso de las constantes).

Propiedades de Math

Las propiedades del objeto Math contienen las constantes matemáticas matemáticas de uso más
frecuente.

E Constante de Euler (2.718) y=math.e


LN10 Logaritmo natural de 10 (2.310) y=math.LN10
LN2 Logaritmo natural de 2 (0.693) y=math.LN2
LOG10E Logaritmo en base 10 de E y=math.LOG10E
LOG2E Logaritmo en base 2 de E y=math.LOG2E
Relación entre la circunferencia de
PI y=[Link]
un circulo y su diámetro (3.14159)

Métodos de Math

Los métodos del objeto Math son realmente funciones matemáticas de uso frecuente.
Recibe dos números y devuelve el
max() y=max(x)
mayor
Recibe dos número y devuelve el
min() y=min(x)
menor
Devuelve el valor absoluto de un
abs() y=abs(x)
número
Devuelve el redondeo a entero de un
Round() y=round(x)
número
Recibe dos números y devuelve la
pow() exponenciación del primero por el y=pow(x,z)
segundo
exp() Recibe un número y devuelve E y=exp(x)
elevado al número que recibe
Recibe un número y devuelve el seno
sin() y=sin(x)
de dicho número
cos() Devuelve el coseno de un número y=cos(x)
tan() Devuelve la tangente de un número y=tan(x)
asin() Devuelve el arcoseno de un número y=asin(x)
acos() Devuelve el Arccoseno de un número y=acos(x)
Devuelve la arcotangente de un
atan() y=atan(x)
número
Devuelve el logaritmo en base E de un
log() y=log(x)
número que recibe

EJERCICIO PRÁCTICO DE MATH


Con este ejercicio, se calculará el seno, coseno y tangente de 30º, y se ubicarán las respuesas en
tres cajas de texto correspondientes:

<HTML>
<BODY>
<FORM NAME=Formulario2><BR>
<INPUT TYPE=TEXT NAME=CajaSeno>
<INPUT TYPE=TEXT NAME=CajaCoseno>
<INPUT TYPE=TEXT NAME=CajaTangente>
</FORM>
<SCRIPT>
[Link]=[Link](30);
[Link]=[Link](30);
[Link]=[Link](30);
</SCRITP>
</BODY>
</HTML>

Observese cómo tomamos y establecemos valores para las cajas de texto utilizando su propiedad
value

Ver el Ejemplo

Volver al índice
OBJETO STRING
Las cadenas de texto, en Java Script, son realmente objetos, que contienen una cadena de
caracteres, así como propiedades y métodos de la cadena texto como estructura, como puede ser
su longitud.

El objeto String ha de ser construido previamente a su utilización. A continuación se muestr


cómo:

miCadena=new String("Bienvenido a mi
website")

Una vez definido el objeto String, y la cadena que contiene, podre´mos operar sus propiedades y
métodos.

Propiedades de String

Longitud de la
lenth y=[Link]
cadena

Métodos de String

Fuerza que la cadenba de


bold() [Link]([Link]())
texto aparezca en negrita
Fuerza que la cadena sea
italics() [Link]([Link]())
mostrada en letra cursiva
Fuerza que la cadena se
strike() [Link]([Link]())
muestre tachada
Aumenta la fuente de la
big() cadena como si estuviese [Link]([Link]())
entre etiquetas BIG de HTML
Hace que la caedna aparezca
en fuente pequeña, como si
small()
entre etiquetas SMALL de
html se encontrase
Hace que la cadena se
fontcolor() muestre con un color de texto [Link]([Link]("red"))
determinado
Especifica el tamaño en que
fontsize() se mostrará la cadena (entre [Link]([Link](3))
1 y 7)
sub() Hace que la cadena se [Link]([Link]())
muestre como un subíndice
Hace que la caena aparezca
sup() [Link]([Link]())
como superíndice
Obliga a la cadena a ser
mostrada en fuente
fixed() [Link]([Link]())
equivalente a la etiqueta TT
de HTML
Hace que la cadena de texto
blink() apatezca en la pantalla [Link]([Link]())
parpadeando
Hace que una cadena actúe
link() como enlace a una URL [Link]([Link](URL)
especificada
Hace que el objeto string
anchor() actúe como un hiperenlace a [Link]([Link](etiqueta))
la misma página
Convina el texto de dos
concat() [Link](micadena2)
cadenas y devuelve una sola
Extrae un fragmento de una
slize() micadena2=[Link]("jav")
cadena y lo convierte en otra
Devuelve el carácter que está
charat() en una posición determinada y=[Link](8)
de la cadena
Devuelve una subcadena
substr() obtenida entre dos índices de y=[Link](3,8)
la cadena principal
Devuelve la primera posición
indexOf() en la que aparece en la y=[Link]("j")
cadena una letra determinada
Devuelve la última posición en
lastIndexOf() la que aparece en la cadena y=[Link]("j")
una letra determinada
Obliga a que la caedna sea
tolowercase() [Link]([Link]())
mostrada en minúsculas
obliga a que la cadena sea
touppercase() [Link]([Link]())
mostrada en mayúsculas

Volver al índice
OBJETO WINDOW

Objeto Frame
Objeto History
Objeto Location
Objeto Window

El Objeto window es lo que se denomina un Objeto Contenedor. Esto es: es un objeto que
contiene otros objetos en su interior. El objeto Window puede contener los objetos frame,
history, location y screen.

OBJETO FRAME
El objeto Frame representa un marco creado en la ventana con la etiqueta FRAMESET de
HTML. Los marcos son tratados como ventanas independientes, de modo que tiene los
mismos métodos y propiedades que el objeto window.

Ver el objeto Window

Volver al índice

OBJETO HISTORY
El objeto History de la ventana nos permite acceder a la lista de lugares visitados por el
usuario en su sesión actual de navegación. Esto es, acceder al historial de URL's del
navegador del usuario, y forzar un enlace a alguna de las direcciones que contenga.

Las URL's que contiene el historial del navegador del usuario se almacenan en el mismo
como un array de cadenas de texto. Podemos referirnos a ellas del mismo modo que si de un
array se tratase. Por ejemplo: history[5], history[2]...
Propiedades de History

current Especifica la dirección actual y=[Link]


lenth Almacena la cantidad de páginas visitadas. y=[Link]
next Especifica la siguiente página del historial. y=[Link]
previous Espacifica la página anterior del historial. y=[Link]

Métodos de History

Fuerza un retroceso a
back() [Link]()
la página anterior
Obliga a un avance a
forward() la página siguiente del [Link]()
historial
Salta a la página de
go() [Link](-3)
historial especificada

EJERCICIO PRÁCTICO CON HISTORY


Es común encontrar páginas que requieren un retroceso o avance a través de las páginas
visitadas. Para ello podemos programar dos botones al efecto, utilizando este objeto. Lo
haremos de la siguiente forma:

<HTML>
<BODY>
<CENTER>
<FORM>
<INPUT TYPE=BUTTON VALUE=Atrás onClick=[Link]()>
</FORM>
</CENTER>
</BODY>
</HTML>

Observese la forma en la que el código JavaScript ha sido insertado en el propio botón, y


fuera del script.
Ver el Ejemplo
Volver al índice

OBJETO LOCATION
El objeto Location describe y contiene información acerca de la página en cuanto a su
localización se refiere.

El objeto location contiene en sus propiedades una URL completa. Las URL's tienen la
siguiente estructura:

protocolo//servidor:puerto/ruta.../#localización en página?
parámetros

Protocolo: tipo de protocolo de comunicación a utilizar


HTTP: Págians Web
FTP: Transferencia de ficheros
MAILTO: Correo Electrónico
NEWS: Servicio de Noticias
FILE: Archivo de disco
Servidor: Servidor de Internet. ([Link])
Puerto: Puerto de comunicaciones para conectar al servidor(opional)
HTTP: 80
FTP: 21
Ruta: Localización de la página en el árbol de carpetas del servidor
Localización: Marca de la página de HTML (links a la misma página)
Parámetros: Parámetros para la página

Propiedades de Location

Especifica el servidor o dominio que contiene la


Host:
página
Hostname: Especifica la convinación "servidor:puerto"
Href: Contiene la URL completa
Especifica la ruta del archivo en la estructura de
Pathname:
archivos del servidor
Almacena el puerto de comunicaciones que el
Port: servidor utiliza para las peticiones de un determinado
protocolo
Protocol: Especifica el protocolo a utilizar
search: Guarda los parámetros de la URL.

A continuación se muestran ejemplos sobre las propiedades de Location:

var x, y, z, w, q;
x = [Link];
y = [Link];
z = [Link];
w = [Link];
q = [Link];

Métodos de Location

Fuerza una recarga de la URL que contiene el objeto Location, que, por
Reload:
defecto, coincide con la que tenga cargada el navegador.
Reemplaza el contenido actual de la vantana por la URL espacificada
Replace:
en el objeto Location.

Un ejemplo del uso de los métodos de Location:

<HTML>
<BODY>
<SCRIPT>
function abrirPagina(){
var ARCHIVO="[Link]
[Link]("[Link]
}
</SCRIPT>
<FORM>
<INPUT TYPE=BUTTON VALUE="Ir a EIDOS" onClick=abrirPagina()>
</FORM>
</BODY>
</HTML>

Ver el Ejemplo (Ir a EIDOS)

EJERCICIO PRÁCTICO CON LOCATION


A continuación realizaremos una página en la que los enlaces se efectúan mediante botones
programados en JavaScript, en lugar de hacerlo mediante el hiperenlace de una imagen con
HTML:

<HTML>
<BODY>
<SCRIPT>
function hiperEnlace(DIR){
[Link](DIR);
}
</SCRIPT>
<FORM>
<INPUT TYPE=BUTTON VALUE="Ir a EIDOS"
onClick=hiperEnlace("[Link]
<INPUT TYPE=BUTTON VALUE="Ir a ALTAVISTA"
onClick=hiperEnlace("[Link]
</FORM>
</BODY>
</HTML>

Ver el Ejemplo

Volver al índice

OBJETO WINDOW
Representa una ventana o un marco de la misma, y se corresponde con el nivel más alto en la
jerarquía de objetos que Java Script utiliza.

Propiedades de Window

defaultStatus: Mensaje de la Barra de estado del navegador


innerHeight: Estipula el alto en pixels de la ventana
innerWidth: Estipula el anch de la ventana
OuterHeight: Especifica el alto exterior de la ventana
OuterWidth: Especifica el ancho exterior de la ventana
Almacena la posición x (en pixels) de la ventana en la
pagexOffset:
pantalla
Almacena la posición Y (en pixels) de la ventana en la
pageyOffset:
pantalla
StatusBar: Almacena el estado de la barra de estado (visible o no)
LocationBar: Especifica si la barra de direcciones estávisible o nó
Especifica si la ventana tendrña barras de desplazamiento
Scrollbars:
o no
MenuBar: Estipula si la ventana tendrá barra de menú o no

Esta propiedades se utilizan con el método Open, para configurar el aspecto de una nueva
ventana que se quiere crear, especificándolo en la invocación del propio método Open. Todas
ellas son Booleanas, esto es, aceptan solo dos valores, que son YES / NO.

Métodos de Window

El método Open abre una ventana nueva, y la trata como si de una variable de tipo objeto se
tratase, de modo que, desde la ventana que la crea, podemos especificar sus características
básicas.

La sintaxis del método open es la siguiente:

Variable=[Link]("URL","nombre_ventana","propiedad=yes/no,
propiedad2=yes/no")

A continuación se muestra un ejemplo de uso del método Open, de forma que pulsando un
botón, se abra una ventana configurando las propiedades de la ventana que se quiere abrir:

<HTML>
<BODY>
<SCRIPT>
function abreVentana(){ w1 =
[Link]("[Link]","","status=yes");
}
</SCRIPT>
<FORM>
<INPUT TYPE=BUTTON VALUE="Abrir Ventana" onClick=F1()>
</FORM>
</BODY>
</HTML>

Ver Ejemplo Abrir Ventana


El Método Close cierra la ventana activa o una tratada como variable. La sintaxis a utilizar
para el uso de este método es la siguiente:
[Link]();
[Link]();

A continuación se muestra un ejemplo práctico:

<HTML>
<BODY>
<SCRIPT>
function Cerrar(){ [Link]();
}
</SCRIPT>
<FORM>
<INPUT TYPE=BUTTON VALUE="Cerrar Ventana" onClick=Cerrar()>
</FORM>
</BODY>
</HTML>

El Método Alert se utiliza para que sea mostrado un mensaje en una caja de diálogo que
contendrá también un botón de aceptar, que servirá para cerrar la caja de diálogo. La sintaxix
es la siguiente:

[Link]("Mensaje");
[Link](Variable);

Ver Ejemplo de Alert

El Método Prompt sirve para recibir una información desde el teclado mediante una caja de
diálogo que contiene una caja de texto en la que el usuario escribirá un dato y se almacenará
en una variable para utilizarlo más adelante...

La sintaxis de este método es la siguiente:

[Link]("mensaje","valor por defecto de la caja de texto")

Un ejemplo del método es el que se muestra a continuación, en el que se pide un dato al


usuario, para ser luego mostrado con el método ALERT:

<HTML>
<BODY>
<SCRIPT>
function FF(){ var x;
x = [Link]("Inserte su nombre: ","");
[Link](x);
}
</SCRIPT>
<FORM>
<INPUT TYPE=BUTTON VALUE="Pedir dato" onClick=FF()>
</FORM>
</BODY>
</HTML>

Ver Ejemplo de Petición de Dato

El Método MoveTo fuerza que la esquina superior izquierda de la ventana se nueva a una
posición determinada de de la pantalla, representada mediante un par de coordenadas de la
pantalla.

Su sintaxis se muestra en la figura siguiente:


Objeto_ventana.MoveTo(coordenada-x, coordenada-y)

A continuación, el ejemplo de código:

<HTML>
<BODY>
<SCRIPT>
function Mueve(){ [Link](150,100);
}
</SCRIPT>
<FORM>
<INPUT TYPE=BUTTON VALUE="Pedir dato" onClick=Mueve()>
</FORM>
</BODY>
</HTML>

El Método ResizeTo cambia el tamaño en pixels de la ventana a otro determinado por el


código. Estas medidas se refieren a las exteriores de la ventana, de modo que este método,
altera las propiedades de la ventana outerWidth y outesHeight. Su sintaxis se muestra a
continuación:
objeto_ventana.ResizeTo(longitud_Horizontal, longitud_Vertical)
El Método Home fuerza a cargar en la ventana la página de inicio que el usuario tenga por
defecto configurada en su navegador. Realiza una acción equivalente a la que hace el botón
de INICIO / HOME del navegador del cliente. La sintaxis se muestra a continuación:
Objeto_ventana.Home()

En la siguiente figura se muestra un ejemplo en un fragmento de código:

<HTML>
<BODY>
<FORM>
<INPUT TYPE=BUTTON VALUE="Inicio" onClick=[Link]()>
</FORM>
</BODY>
</HTML>

El Método Stop fuerza el detenimiento de la carga de la página en el navegador, de modo


equivalente a la pulsación del botón DETENER / STOP del navegador. La sintaxis es la
siguiente:
Objeto_ventana.Stop()

Volver al índice

EJEMPLO PRÁCTICO CON WINDOW


A continuación realizaremos una ventana que fuerza la apertura de otra ventana, así como su
cierre. Las nuevas ventanas se abrirán y se cerrarán mediante botones ubicados en la primera
ventana, y las abriremos con diferentes formatos.

La primera ventana se llamará V1 y la abriremos sin barra de herramientas; solo la barra de


titulo y la barra de estado:

<HTML>
<BODY>
<SCRIPT>
var V1;
function apertura(){
v1 = [Link]("[Link]","","status=yes");
}
</SCRIPT>
<FORM>
<INPUT TYPE=BUTTON VALUE="Abrir" onClick=apertura()>
</FORM>
</BODY>
</HTML>

Ver el Ejemplo Ventana V1

A continuación, vemos el código añadido para el botón de cerrar la ventana que hemos
abierto. Todas las demá ventanas se trabajan de la misma forma, cambiandoles el nombre
(V2, V3...)

<HTML>
<BODY>
<SCRIPT>
function apertura(){
v1 = [Link]("[Link]","","status=yes");
}
function cierre(){
[Link]();
}
</SCRIPT>
<FORM>
<INPUT TYPE=BUTTON VALUE="Abrir" onClick=apertura()>
<INPUT TYPE=BUTTON VALUE="Cerrar" onClick=apertura()>
</FORM>
</BODY>
</HTML>

Ver el Ejemplo Ventana V1 Cerrar ventana V1

EJEMPLO GENERAL DEL OBJETO WINDOW


OBJETO DOCUMENT

Objeto Anchor
Objeto Document

OBJETO ANCHOR
El objeto Anchor, pertenece a la jerarquía de Document, y se utiliza de
forma semejante a los vínculos internos de HTML (vínculos a la misma
página), pero con la ventaja de poderlo convinar con un hiperenlace. De
esta forma, nos podemos permitir establecer un enlace a un vínculo interno
de otra página.

La página destino tiene una serie de enlaces internos, que se definirán de la


siguiente forma:

<A NAME=Enlace_Interno>Titulo del Enlace</A>

La página Origen, por su parte contiene la parte principal del Enlace, que se
realizará de la siguiente manera:

<A HREF=[Link]>Texto del Enlace</A>

Volver al índice
OBJETO DOCUMENT
El Objeto Document contiene la información correspondiente a la página
que se está visualizando, y provee al programador de métodos para la salida
código HTML. De esta forma, utilizando los métodos del objeto document,
podremos construir, por ejemplo, tres páginas en un solo archivo de Disco
Duro.

Propiedades de Document

linkColor Cadena que contiene el color de los links de la página


vlinkColor Contiene el color para los links visitados
Cadena que contiene el color del Link en el momento
alinkColor
que se pulsa
bgColor Almacena el color de fondo del documento
fgColor Guarda el color de texto del documento
Cadena que almacena el Dominio del servidor del que
domain
procede la página
URL Especifica la URL completa del documento
referrer Especifica la URL del documento que llamó al actual
title Almacena el titulo del documento
Cadena que contiene la fecha de última actualización
lastModified
del documento

Métodos de Document
Abre un bloque que contendrá una serie de write o
open()
writeln
close() Cierra un bloque abierto con Open
write("html") Escribe en el documento una cadena en HTML
Escribe en el documento texto o HTML forzando un
writeln("html")
salto de linea
A continuación, un ejemplo del uso de los métodos y propiedades de
Documet en el que una página contendrá un botón, que, al ser pulsado,
Creará otro documento que muestre las propiedades de la página:

<HTML>
<BODY>
<SCRIPT>
function DatosDoc(){
[Link]();
[Link]="000000";
[Link]="fffff0";
[Link]("<CENTER>");
[Link]("<H2>Datos del Documento</H2>");
[Link]("Última Modificación: " +
[Link] + "<BR>");
[Link]("Dominio: " + [Link] + "<BR>");
[Link]("URL: " + [Link] + <BR>");
[Link]("<form>");
[Link]("<INPUT TYPE=BUTTON VALUE=Volver
onClick=[Link]()>");
[Link]("</FORM>");
[Link]("</CENTER>");
[Link](); }
</SCRIPT>
<FORM>
<INPUT TYPE=BUTTON VALUE="Ir a EIDOS"
onClick=DatosDoc()>
</FORM>
</BODY>
</HTML>

Volver al índice
EJEMPLO PRÁCTICO DE DOCUMENT
A continuación, realizaremos una práctica en la que escribiremos en la
ventana actual dos cadenas HTML, que sustituirán la página actual por el
código HTML que contienen, creando una página temporal.

<HTML>
<BODY>
<SCRIPT>
function escribeVentana(){
[Link]();
[Link]="000000";
[Link]="fffff0";
[Link]("<CENTER><H2>Hola</CENTER></H2>");
[Link]("<FORM>");
[Link]("<INPUT TYPE=BUTTON VALUE=Atras
onClick=[Link]()></CENTER></H2>");
[Link]("</FORM>");
[Link](); }
</SCRIPT>
<FORM>
<INPUT TYPE=BUTTON VALUE="Ir a EIDOS"
onClick=escribeventana()>
</FORM>
</BODY>
</HTML>

Ver el Ejemplo

EJERCICIO GENERAL DEL OBJETO DOCUMENT

También podría gustarte