- CÓMO DEPURAR ERRORES -
Nuria Alonso Castillo.
- Primero de todo tabulo bien y separo bien las líneas y párrafos del código, para poder visualizar cualquier error más rápidamente.
-Si no me funciona, aunque no siempre me acuerdo..intento comprobrar que ningún nombre ya sea de variable, función o de formulario se repita.
-Me aseguro que todas las comillas, estén bien puestas ni falte ni sobre ninguna.
-Que todas las llaves las tenga bien cerradas o por lo contrario tenga alguna demás.
-Aunque hace mucho que no usemos dobles igual "==" cuando es así, compruebo que estén correctamente puestos, que no haya equivocación con estos "=" y al revés.
-Y ahora empiezas usando window.alert para probar lo principal, que la llamada llegue a la función del archivo Js.
-Una vez que hayas comprobado que llegue al Js, si siguiera fallando, ir poco a poco probando con window.alert, para ver que es lo que visualiza y lo que no.
-Y por último, voy comentando el código, por líneas o por partes, para ir viendo qué es el lo que falla.
5.1 TRABAJO CON FORMULARIOS EN JAVASCRIPT:
El objeto form depende en la jerarquía de objetos del objeto document. En un objeto form podemos encontrar algunos métodos y propiedades, pero lo más destacado que podremos encontrar son cada uno de los elementos del formulario.
Para acceder a un formulario desde el objeto document podemos hacerlo de dos formas.
1. A partir de su nombre, asignado con el atributo NAME de HTML.
2. Mediante la matriz de formularios del objeto document, con el índice del formulario al que queremos acceder.
Para este formulario
<FORM name="f1">
<INPUT type=text name=campo1>
<INPUT type=text name=campo2>
</FORM>
Podremos acceder con su nombre de esta manera.
document.f1
O con su índice, si suponemos que es el primero de la página.
document.forms[0]
De similar manera accedemos a los elementos de un formulario, que dependen del objeto form.
1. A partir del nombre del objeto asignado con el atributo NAME de HTML.
2. Mediante la matriz de elementos del objeto form, con el índice del elemento al que queremos acceder.
Podríamos acceder al campo 1 del anterior formulario de dos maneras. Con su nombre lo haríamos así.
document.f1.campo1
o a partir del array de elementos.
document.f1.elements[0] (utilizamos el índice 0 porque es el primer elemento y en Javascript los arrays empiezan por 0.)
Si deseamos acceder al segundo campo del formulario escribiríamos una de estas dos cosas:
document.f1.campo2
document.f1.elements[1]
recordamos que también podemos acceder a un fomulario por el array de forms, indicando el índice del formulario al que
acceder. De este modo, el acceso al campo2 sería el siguiente:
document.forms[0].campo2
document.forms[0].elements[1]
5.2 EJ.TRABAJO CON FORMULARIOS.CALCULADORA SENCILLA:
5.2.1 -EJEMPLO CALCULADORA SENCILLA:
El formulario de la calculadora se puede ver aquí.
<form name="calc">
<input type="Text" name="operando1" value="0" size="12">
<br>
<input type="Text" name="operando2" value="0" size="12">
<br>
<input type="Button" name="" value=" + " onclick="calcula('+')">
<input type="Button" name="" value=" - " onclick="calcula('-')">
<input type="Button" name="" value=" X " onclick="calcula('*')">
<input type="Button" name="" value=" / " onclick="calcula('/')">
<br>
<input type="Text" name="resultado" value="0" size="12">
</form>
5.2.2 -SCRIPT CON LA FUNCIÓN CALCULA ():
<script>
function calcula(operacion){
var operando1 = document.calc.operando1.value
var operando2 = document.calc.operando2.value
var result = eval(operando1 + operacion + operando2)
document.calc.resultado.value = result
}
</script>
La función eval(), recordamos, que recibía un string y lo ejecutaba como una sentencia Javascript. En este caso va a recibir un número que concatenado a una operación y otro número será siempre una expresión aritmética que eval() solucionará
perfectamente.
5.3 PROPIEDADES Y MÉTODOS DEL OBJETO FORM:
5.3.1 -PROPIEDADES DEL OBJETO FORM:
Tiene unas cuantas propiedades para ajustar sus atributos mediante Javascript.
action
Es la acción que queremos realizar cuando se submite un formulario. Se coloca generalmente una dirección de correo o la URL a la que le mandaremos los datos. Corresponde con el atributo ACTION del formulario.
elements array
La matriz de elementos contiene cada uno de los campos del formulario.
encoding
El tipo de codificación del formulario
length
El número de campos del formulario.
method
El método por el que mandamos la información. Corresponde con el atributo METHOD del formulario.
name
El nombre del formulario, que corresponde con el atributo NAME del formulario.
target
La ventana o frame en la que está dirigido el formulario. Cuando se submita se actualizará la ventana o frame indicado. Corresponde con el atributo target del formulario.
5.3.2 -EJEMPLOS DE TRABAJO CON LAS PROPIEDADES:
Por ejemplo podríamos cambiar la URL que recibiría la información del formulario con la instrucción.
document.miFormulario.action = "miPágina.asp"
O cambiar el target para submitir un formulario en una posible ventana secundaria llamada mi_ventana.
document.miFormulario.target = "mi_ventana"
5.3.3 -MÉTODOS DEL OBJETO FORM:
los métodos que podemos invocar con un formulario.
submit()
Para hacer que el formulario se submita, aunque no se haya pulsado el botón de
submit.
Para reinicializar todos los campos del formulario, como si se hubiese pulsado el botón de reset.
5.3.4 -EJEMPLO DE TRABAJO CON LOS MÉTODOS:
El mecanismo es el siguiente: en vez de colocar un botón de submit colocamos un botón normal (<INPUT type="button">) y hacemos que al pulsar ese botón se llame a una función que es la encargada de validar el formulario y, en caso de que esté correcto, submitirlo.
El formulario quedaría así.
<form name="miFormulario" action="mailto:promocion@guiarte.com" enctype="text/plain">
<input type="Text" name="campo1" value="" size="12">
<input type="button" value="Enviar" onclick="validaSubmite()">
</form>
Nos fijamos en que no hay botón de submit, sino un botón normal con una llamada a una función que podemos ver a continuación.
function validaSubmite(){
if (document.miFormulario.campo1.value == "")
alert("Debe rellenar el formulario")
else
document.miFormulario.submit()
}
5.4 CONTROL DE CAMPOS DE TEXTO CON JAVASCRIPT:
5.4.1 -CAMPO TEXT:
Es el campo que resulta de escribir la etiqueta <INPUT type="text">. Lo hemos utilizado hasta el momento en varios ejemplos, pero vamos a parar un momento en él para describir sus propiedades y métodos.
5.4.2 -PROPIEDADES DEL CAMPO TEXT:
La lista de propiedades de estos tipos de campo.
defaultValue
Es el valor por defecto que tiene un campo. Lo que contiene el atributo VALUE de la etiqueta <INPUT>.
form
Hace referencia al formulario.
name
Contiene el nombre de este campo de formulario
type
Contiene el tipo de campo de formulario que es.
value
El texto que hay escrito en el campo.
Este es el código de la página completa.
<html>
<head>
<title>Cambiar el valor por defecto</title>
<script>
function cambiaDefecto(){
document.miFormulario.campo1.defaultValue = "Hola!!"
}
</script>
</head>
<body>
<form name="miFormulario" action="mailto:promocion@guiarte.com" enctype="text/plain">
<input type="Text" name="campo1" value="" size="12">
<input type="Reset">
<br>
<br>
<input type="button" value="Cambia valor por defecto" onclick="cambiaDefecto()">
</form>
</body>
</html>
5.4.3 -MÉTODOS DE OBJETO TEXT:
Se pueden invocar los siguientes métodos sobre los objetos tipo Text.
blur()
Retira el foco de la aplicación del campo de texto.
focus()
Pone el foco de la aplicación en el campo de texto.
select()
Selecciona el texto del campo.
Para hacerlo hemos utilizado dos métodos, el primero para pasar el foco de la aplicación al
campo de texto y el segundo para seleccionar el texto.
function seleccionaFoco(){
document.miFormulario.campo1.focus()
document.miFormulario.campo1.select()
}
5.4.4 -CAMPOS DE PASSWORD:
Estos funcionan igual que los hidden, con la peculiaridad que el contenido del campo no puede verse escrito en el campo, por lo que salen asteríscos en lugar del texto.
5.4.5 -CAMPOS HIDDEN:
Los campos hidden son como campos de texto que están ocultos para el usuario, es decir, que no se ven en la página. Son muy útiles en el desarrollo de webs para pasar variables en los formularios a las que no debe tener acceso el usuario.
Se colocan en con HTML con la etiqueta <INPUT type=hidden> y se rellenan de datos con su atributo value. Mas tarde podremos cambiar el dato que figura en el campo accediendo a la propiedad value del campo de texto igual que lo hemos hecho antes.
document.miFormulario.CampoHidden.value = "nuevo texto"
5.5 CONTROL DE CHECKBOX EN JAVASCRIPT:
Los checkbox son las unas cajas que permiten marcarlas o no para verificar alguna cosa en un formulario. Podemos ver una caja checkbok a continuación.
Los checkbox se consiguen con la etiqueta <INPUT type=checkbox>. Con el atributo NAME de la etiqueta <INPUT> le podemos dar un nombre para luego acceder a ella con javascript. Con el atributo CHECKED indicamos que el campo debe aparecer chequeado por defecto.
5.5.1 -PROPIEDADES DE UN CHECKBOX:
Las propiedades que tiene un checkbox son las siguientes.
checked
Informa sobre el estado del checkbox. Puede ser true o false.
defaultChecked
Si está chequeada por defecto o no.
value
El valor actual del checkbox.
5.5.2 -MÉTODOS DEL CHECKBOX:
Veamos la lista de los métodos de un checkbox.
click()
Es como si hiciésemos un click sobre el checkbox, es decir, cambia el estado del checkbox.
blur()
Retira el foco de la aplicación del checkbox.
focus()
Coloca el foco de la aplicación en el checkbox.
Los dos primeros para mostrar las propiedades checked y value y el tercero para invocar a su método click() con objetivo de simular un click sobre el checkbox.
<html>
<head>
<title>Ejemplo Checkbox</title>
<script>
function alertaChecked(){
alert(document.miFormulario.miCheck.checked)
}
function alertaValue(){
alert(document.miFormulario.miCheck.value)
}
function metodoClick(){
document.miFormulario.miCheck.click()
}
</script>
</head>
<body>
<form name="miFormulario" action="mailto:promocion@guiarte.com" enctype="text/plain">
<input type="checkbox" name="miCheck">
<br>
<br>
<input type="button" value="informa de su propiedad checked" onclick="alertaChecked()">
<input type="button" value="informa de su propiedad value" onclick="alertaValue()">
<br>
<br>
<input type="button" value="Simula un click" onclick="metodoClick()">
</form>
</body>
</html>
5.6 CONTROL DE BOTONES DE RADIO EN JAVASCRIPT:
El botón de radio (o radio button en inglés) es un elemento de formulario que permite seleccionar una opción y sólo una, sobre un conjunto de posibilidades. Se puede ver a continuación.
Blanco
Rojo
Verde
5.6.1 -PROPIEDADES DEL OBJETO RADIO:
Una lista de las propiedades de este elemento.
checked
Indica si está chekeado o no un botón de radio.
defaultChecked
Su estado por defecto.
value
El valor del campo de radio, asignado por la propiedad value del radio.
Length (como propiedad del array de radios)
El número de botones de radio que forman parte en el grupo. Accesible en el vector de radios.
5.6.2 -MÉTODOS DEL OBJETO RADIO:
Son los mismos que los que tenía el objeto checkbox.
5.6.3 -EJEMPLO DE UTILIZACIÓN:
Vamos a ver la página entera y luego la comentamos.
<html>
<head>
<title>Ejemplo Radio Button</title>
<script>
function cambiaColor(){
var i
for (i=0;i<document.fcolores.colorin.length;i++){
if (document.fcolores.colorin[i].checked)
}
document.bgColor = document.fcolores.colorin[i].value
}
</script>
</head>
<body>
<form name=fcolores>
<input type="Radio" name="colorin" value="ffffff" checked> Blanco
<br>
<input type="Radio" name="colorin" value="ff0000"> Rojo
<br>
<input type="Radio" name="colorin" value="00ff00"> Verde
<br>
<input type="Radio" name="colorin" value="0000ff"> Azul
<br>
<input type="Radio" name="colorin" value="ffff00"> Amarillo
<br>
<input type="Radio" name="colorin" value="00ff00"> Turquesa
<br>
<input type="Radio" name="colorin" value="ff00ff"> Morado
<br>
<input type="Radio" name="colorin" value="000000"> Negro
<br>
<br>
<input type="Button" name="" value="Cambia Color" onclick="cambiaColor()">
</form>
</body>
</html>
Primero podemos fijarnos en el formulario y en la lista de botones de radio. Todos se llaman "colorin", así que están asociados en un mismo grupo. Además vemos que el atributo value de cada botón cambia. También vemos un botón abajo del todo.
Con esta estructura de formulario tendremos un array de elements de 9 elementos, los 8 botones de radio y el botón de abajo.
Además tendremos un array de botones de radio que se llamará colorín y depende del formulario, accesible de esta manera.
document.form.colorin
Este array tiene en cada posición uno de los botones de radio. Así en la posición 0 está el botón del color blanco, en la posición 1 el del color rojo... Para acceder a esos botones de radio lo hacemos con su índice.
document.fcolores.colorin[0]
Si queremos acceder por ejemplo a la propiedad value del último botón de radio escribimos lo siguiente.
document.fcolores.colorin[7].value
La propiedad length del array de radios nos indica el número de botones de radio que forman parte del grupo.
document.fcolores.colorin.length
5.7 CONTROL DE CAMPOS SELECT CON JAVASCRIPT:
El objeto select de un formulario es una de esas listas desplegables que nos permiten seleccionar un elemento. Se despliegan apretando sobre una flecha, a continuación se puede escoger un elemento y para acabar se vuelven a plegar. Se puede ver un elemento select de un formulario a continuación.
5.7.1 -PROPIEDADES DEL OBJETO SELECT:
Vamos a ver una lista de las propiedades de este elemento de formulario.
length
Guarda la cantidad de opciones del campo select. Cantidad de etiquetas <OPTION>
Option
Hace referencia a cada una de sus opciones. Son por si mismas objetos.
options
Un array con cada una de las opciones del select.
selectedIndex
Es el índice de la opción que se encuentra seleccionada.
5.7.2 MÉTODOS DEL OBJETO SELECT:
Los métodos son solamente 2 y ya conocemos su significado.
blur()
Para retirar el foco de la aplicación de ese elemento de formulario.
focus()
Para poner el foco de la aplicación.
Objeto option
Tenemos que pararnos a ver también este objeto para entender bien el campo select. Recordamos que las option son las distintas opciones que tiene un select, expresadas con la etiqueta <OPTION>.
5.7.3 -PROPIEDADES DE OPTIÓN:
Estos objetos sólo tienen propiedades, no tienen métodos. Vamos a verlas.
defaultSelected
Indica con un true o un false si esa opción es la opción por defecto. La opción por defecto se consigue con HTML colocando el atributo selected a un option.
index
El índice de esa opción dentro del select.
selected
Indica si esa opción se encuentra seleccionada o no.
text
Es el texto de la opción. Lo que puede ver el usuario en el select, que se escribe después de la etiqueta <OPTION>.
value
Indica el valor de la opción, que se introduce con el atributo VALUE de la etiqueta <OPTION>.
5.7.4 -EJEMPLO DE ACCESO A UN SELECT:
Vamos a ver un ejemplo sobre cómo se accede a un select con Javascript, como podemos acceder a sus distintas propiedades y a la opción seleccionada.
Vamos a empezar viendo el formulario que tiene el select con el que vamos a trabajar. Es un select que sirve para valorar el web que estamos visitando.
<form name="fomul">
Valoración sobre este web:
<select name="miSelect">
<option value="10">Muy bien
<option value="5" selected>Regular
<option value="0">Muy mal
</select>
<br>
<br>
<input type=button value="Dime propiedades" onclick="dimePropiedades()">
</form>
Ahora vamos a ver una función que recoge las propiedades más significativas del campo select y las presenta en una caja alert.
function dimePropiedades(){
var texto
texto = "El numero de opciones del select: " + document.formul.miSelect.length
var indice = document.formul.miSelect.selectedIndex
texto += "nIndice de la opcion escogida: " + indice
var valor = document.formul.miSelect.options[indice].value
texto += "nValor de la opcion escogida: " + valor
var textoEscogido = document.formul.miSelect.options[indice].text
texto += "nTexto de la opcion escogida: " + textoEscogido
alert(texto) }
5.7.5 -PROPIEDAD VALUE DE UN OBJETO SELECT:
Para acceder al valor seleccionado de un campo select podemos utilizar la propiedad value del campo select en lugar de acceder a partir del vector de options.
Para el anterior formulario sería algo parecido a esto.
formul.miSelect.value
5.8 CONTROL DE ELEMENTOS TEXTAREA EN JAVASCRIPT:
Para acabar de describir todos los elementos de formularios vamos a ver el objeto textarea que es un elemento que presenta un lugar para escribir texto, igual que los campos text, pero con la particularidad que podemos escribir varias líneas a la vez.
5.8.1 -PROPIEDADES DE TEXTAREA:
Se puede ver una lista de las propiedades disponibles en un textarea a continuación, que son los mismos que un campo de texto.
defaultValue
Que contiene el valor por defecto del textarea.
value
Que contiene el texto que hay escrito en el textarea.
5.8.2 -MÉTODOS DE TEXTAREA:
Veamos una lista de los métodos, que son los mismos que en un campo de texto.
blur()
Para quitar el foco de la aplicación del textarea.
focus()
Para poner el foco de la aplicación en el textarea.
select()
Selecciona el texto del textarea.
El código de la página se puede ver aquí.
<html>
<head>
<title>Ejemplo textarea</title>
<script>
function cuenta(){
numCaracteres = document.formul.textito.value.length
document.formul.numCaracteres.value = numCaracteres
}
</script>
</head>
<body>
<form name="formul">
<textarea name=textito cols=40 rows=3>
Este es el texto por defecto
</textarea>
<br>
<br>
Número de caracteres <input type="Text" name="numCaracteres" size="4">
<br>
<br>
<input type=button value="Cuenta caracteres" onclick="cuenta()">
</form>
</body>
</html>
4.1 JERARQUÍA DE OBJETOS DEL NAVEGADOR:
4.1.1 -EJEMPLO DE ACCESO A LA JERARQUÍA:
El ejemplo típico de acceso a una propiedad de esta jerarquía para cambiar el aspecto de la página. Se trata de una propiedad de la página que almacena el color de fondo de la página web: la propiedad bgColor del objeto document.
document.bgColor = "red"
Si ejecutamos esta sentencia en cualquier momento cambiamos el color de fondo de la página a rojo. Hay que fijarse en que
la propiedad bgColor tiene la "C" en mayúscula.
<HTML>
<HEAD>
<TITLE>Prueba bgColor</TITLE>
</HEAD>
<BODY bgcolor=white>
<script>
document.bgColor = "red"
</script>
</BODY>
</HTML>
4.2 TRABJANDO CON LA JERARQUÍA EN JAVASCRIPT:
Jerarquía:
Todos los objetos comienzan en un objeto que se llama window. Este objeto ofrece una serie d métodos y propiedades para controlar la ventana del navegador. El aspecto de la ventana, la barra de estado, abrir ventanas secundarias y otras cosas.
Además de ofrecer control, el objeto window da acceso a otros objetos como el documento (La página web que se está visualizando), el historial de páginas visitadas o los distintos frames de la ventana. De modo que para acceder a cualquier otro objeto de la jerarquía deberíamos empezar por el objeto window.
Ejemplos:
window.document.bgColor = "red"
window.document.write("El texto a escribir")
4.2.1 -LAS PROPIEDADES DE UN OBJETO PUEDEN ER A SU VEZ OTROS OBJETOS:
Muchas de las propiedades del objeto window son a su vez otros objetos. Es el caso de objetos como el historial de páginas web o el objeto documento, que tienen a su vez otras propiedades y métodos.
4.2.2 -NAVEGACIÓN A TRAVÉSDE LA JERARQUÍA:
Cuando una página se carga, el navegador construye en memoria la jerarquía de objetos. De manera adicional, construye también estos arrays de objetos. Por ejemplo, en el caso de las imágenes, va creando el array colocando en la posición 0 la primera imagen, en la posición 1 la segunda imagen y así hasta que las introduce todas. Vamos a ver un bucle que recorre todas las imágenes de la página e imprime su propiedad src, que contiene la URL donde está situada la imagen.
for (i=0;i<document.images.length;i++){
document.write(document.images[i].src)
document.write("<br>")
}
Utilizamos la propiedad length del array images para limitar el número de iteraciones del bucle. Luego utilizamos el método write() del objeto document pasándole el valor de cada una de las propiedades src de cada imagen.
SC
Para ello tendremos que acceder a un formulario de la página, al que podremos acceder por el array de formularios, y dentro él a la propiedad elements, que es otro array de objetos. Para cada elemento del formulario vamos a escribir su propiedad value, que corresponde con la propiedad value que colocamos en HTML.
f or (i=0;i<document.forms[0].elements.length;i++){
document.write(document. forms[0].elements[i].value)
document.write("<br>")
}
4.3 OBJETO WINDOW DE JAVASCRIPT:
4.3.1 -PROPIEDADES DEL OBJETO WINDOW:
Propiedades del objeto window. Hay algunas muy útiles y otras que lo son menos.
closed
Indica la posibilidad de que se haya cerrado la ventana. (Javascript 1.1)
defaultStatus
Texto que se escribe por defecto en la barra de estado del navegador.
document
Objeto que contiene el la página web que se está mostrando.
Frame
Un objeto frame de una página web. Se accede por su nombre.
frames array
El vector que contiene todos los frames de la página. Se accede por su índice a partir de 0.
history
Objeto historial de páginas visitadas.
innerHeight
Tamaño en pixels del espacio donde se visualiza la página, en vertical. (Javascript 1.2)
innerWidth
Tamaño en pixels del espacio donde se visualiza la página, en horizontal. (Javascript 1.2)
length
Numero de frames de la ventana.
location
La URL del documento que se está visualizando. Podemos cambiar el valor de esta propiedad para movernos a otra página. Ver también la propiedad location del objeto document.
locationbar
Objeto barra de direcciones de la ventana. (Javascript 1.2)
menubar
Objeto barra de menús de la ventana. (Javascript 1.2)
name
Nombre de la ventana. Lo asignamos cuando abrimos una nueva ventana.
opener
Hace referencia a la ventana de navegador que abrió la ventana donde estamos trabajando. Se verá con detenimiento en el
tratamiento de ventanas con Javascript.
outherHeight
Tamaño en pixels del espacio de toda la ventana, en vertical. Esto incluye las barras de desplazamiento, botones, etc.
(Javascript 1.2)
outherWidth
Tamaño en pixels del espacio de toda la ventana, en horizontal. Esto incluye las barras de desplazamiento. (Javascript 1.2)
parent
Hace referencia a la ventana donde está situada el frame donde estamos trabajando. La veremos con detenimiento al estudiar
el control de frames con Javascript.
personalbar
Objeto barra personal del navegador. (Javascript 1.2)
self
Ventana o frame actual.
scrollbars
Objeto de las barras de desplazamiento de la ventana.
status
Texto de la barra de estado.
statusbar
Objeto barra de estado del navegador. (Javascript 1.2)
toolbar
Objeto barra de herramientas. (Javascript 1.2)
top
Hace referencia a la ventana donde está situada el frame donde estamos trabajando. Como la propiedad parent.
window
Hace referencia a la ventana actual, igual que la propiedad self.
código que hace que se cambie el texto de la barra de estado cuando pulsemos un botón.
<form>
<input type="Button" value="Pulsame!" onclick="window.status='Hola a todo el mundo!'">
</form>
4.4 MÉTODOS DE WINDOW EN JAVASCRIPT:
Distintos métodos que tiene el objeto window. Muchos de estos métodos habrá que verlos por separado porque son muy útiles y aun no los hemos utilizado, ahora vamos a listarlos y ya veremos algunos ejemplos.
alert(texto)
Presenta una ventana de alerta donde se puede leer el texto que recibe por parámetro
back()
Ir una página atrás en el historial de páginas visitadas. Funciona como el botón de volver de la barra de herramientas.
(Javascript 1.2)
blur()
Quitar el foco de la ventana actual. (Javascript 1.1)
captureEvents(eventos)
Captura los eventos que se indiquen por parámetro (Javascript 1.2).
clearInterval()
Elimina la ejecución de sentencias asociadas a un intervalo indicadas con el método setInterval().(Javascript 1.2)
clearTimeout()
Elimina la ejecución de sentencias asociadas a un tiempo de espera indicadas con el método setTimeout().
close()
Cierra la ventana. (Javascript 1.1)
confirm(texto)
Muestra una ventana de confirmación y permite aceptar o rechazar.
find()
Muestra una ventanita de búsqueda. (Javascript 1.2 para Netscape)
focus()
Coloca el foco de la aplicación en la ventana. (Javascript 1.1)
forward()
Ir una página adelante en el historial de páginas visitadas. Como si pulsásemos el botón de adelante del navegador.
(Javascript 1.2)
home()
Ir a la página de inicio que haya configurada en el explorador. (Javascript 1.2)
moveBy(pixelsX, pixelsY)
Mueve la ventana del navegador los pixels que se indican por parámetro hacia la derecha y abajo. (Javascript 1.2)
moveTo(pixelsX, pixelsY)
Mueve la ventana del navegador a la posición indicada en las coordenadas que recibe por parámetro. (Javascript 1.2)
open()
Abre una ventana secundaria del navegador. Se puede aprender a utilizarla en el reportaje de cómo abrir ventanas
secundarias.
print()
Como si pulsásemos el botón de imprimir del navegador. (Javascript 1.2)
prompt(pregunta,inicializacion_de_la_respuesta)
Muestra una caja de diálogo para pedir un dato. Devuelve el dato que se ha escrito.
releaseEvents(eventos)
Deja de capturar eventos del tipo que se indique por parámetro. (Javascript 1.2)
resizeBy(pixelsAncho,pixelsAlto)
Redimensiona el tamaño de la ventana, añadiendo a su tamaño actual los valores indicados en los parámetros. El primero
para la altura y el segundo para la anchura. Admite valores negativos si se desea reducir la ventana. (Javascript 1.2)
resizeTo(pixelsAncho,pixelsAlto)
Redimensiona la ventana del navegador para que ocupe el espacio en pixels que se indica por parámetro (Javascript 1.2)
routeEvent()
Enruta un evento por la jerarquía de eventos. (Javascript 1.2)
scroll(pixelsX,pixelsY)
Hace un scroll de la ventana hacia la coordenada indicada por parámetro. Este método está desaconsejado, pues ahora se
debería utilizar scrollTo()(Javascript 1.1)
scrollBy(pixelsX,pixelsY)
Hace un scroll del contenido de la ventana relativo a la posición actual. (Javascript 1.2)
scrollTo(pixelsX,pixelsY)
Hace un scroll de la ventana a la posición indicada por el parámetro. Este método se tiene que utilizar en lugar de scroll.
(Javascript 1.2)
setInterval()
Define un script para que sea ejecutado indefinidamente en cada intervalo de tiempo. (Javascript 1.2)
setTimeout(sentencia,milisegundos)
Define un script para que sea ejecutado una vez después de un tiempo de espera determinado.
stop()
Como pulsar el botón de stop de la ventana del navegador. (Javascript 1.2)
El código de la página
<form>
<input type="button" value="Ventana de búsqueda (Solo Netscape)" onClick="window.find()">
<br>
<br>
<input type="button" value="Mover la ventana 10 derecha,10 abajo" onClick="moveBy(10, 10)">
<br>
<br>
<input type="button" value="Mover la ventana al punto (100,10)" onClick="moveTo(100, 10)">
<br>
<br>
<input type="button" value="Imprimir esta página" onClick="print()">
<br>
<br>
<input type="button" value="Aumenta la ventana 10 ancho,10 largo" onClick="resizeBy(10, 10)">
<br>
<br>
<input type="button" value="Fija el tamaño de la ventana en 400 x 200" onClick="resizeTo(400, 200)">
<br>
<br>
<input type="button" value="Scroll arriba del todo" onClick="scroll(0,0)">
<br>
<br>
<input type="button" value="Scroll arriba 10 pixels" onClick="scrollBy(0,-10)">
</form>
4.5 EJEMPLOSDEMÉTODOS DE WINDOW:
4.5.1 -CAJA DE ALERTA:
Para sacar un texto en una ventanita con un botón de aceptar. Recibe el texto por parámetro.
window.alert("Este es el texto que sale")
Como el objeto window se sobreentiende podemos escribirlo así.
alert("Este es el texto que sale")
4.5.2 -CAJA DE CONFIRMACIÓN:
Muestra una ventana con un texto indicado por parámetro y un botón de aceptar y otro de rechazar. Dependiendo del botón que se pulsa devuelve un true (si se pulsa aceptar) o un false (si se pulsa rechazar).
<script>
var respuesta = confirm("Aceptame o rechazame")
alert ("Has pulsado: " + respuesta)
</script>
4.5.3 -CAJA DE INTRODUCIIÓN DE UN DATO:
El ejemplo siguiente sirve para pedir el nombre de la persona que está visitando la página y luego mostrar en la página un saludo personalizado. Utiliza un bucle para repetir la toma de datos siempre que el nombre de la persona sea null (porque pulsó el botón de cancelar) o sea un string vacío (porque no escribió nada).
<script>
nombre = null
while (nombre == null || nombre == ""){
nombre = prompt("Dime tu nombre:","")
}
document.write("<h1>Hola " + nombre + "</h1>")
</script>
Si nos fijamos en la caja prompt veremos que recibe dos parámetros. El segundo era el texto por defecto que sale en la caja como respuesta. Lo hemos dejado como un string vacío para que no salga nada como texto por defecto.
4.6 OBJETO DOCUMENT EN JAVASCRIPT:
4.6.1 -PROPIEDADES DEL OBJETO DOCUMENT:
Lista de las propiedades del objeto document y luego veremos algún ejemplo:
alinkColor
Color de los enlaces activos
Anchor
Un ancla de la página. Se consigue con la etiqueta <A name="nombre_del_ancla">. Se accede por su nombre.
anchors array
Un array de las anclas del documento.
Applet
Un applet de la página. Se accede por su nombre. (Javascript 1.1)
applets array
Un array con todos los applets de la página. (Javascript 1.1)
Area
Una etiqueta <AREA>, de las que están vinculadas a los mapas de imágenes (Etiqueta ). Se accede por su nombre.
(Javascript 1.1)
bgColor
El color de fondo del documento.
classes
Las clases definidas en la declaración de estilos CSS. (Javascript 1.2)
cookie
Una cookie
domain
Nombre del dominio del servidor de la página.
Embed
Un elemento de la pagina incrustado con la etiqueta <EMBED>. Se accede por su nombre. (Javascript 1.1)
embeds array
Todos los elementos de la página incrustados con <EMBED>. (Javascript 1.1)
fgColor
El color del texto. Para ver los cambios hay que reescribir la página.
From
Un formulario de la página. Se accede por su nombre.
forms array
Un array con todos los formularios de la página.
ids
Para acceder a estilos CSS. (Javascript 1.2)
Image
Una imagen de la página web. Se accede por su nombre. (Javascript 1.1)
images array
Cada una de las imágenes de la página introducidas en un array. (Javascript 1.1)
lastModified
La fecha de última modificación del documento.
linkColor
El color de los enlaces.
Link
Un enlace de los de la página. Se accede por su nombre.
links array
Un array con cada uno de los enlaces de la página.
location
La URL del documento que se está visualizando. Es de solo lectura.
referrer
La página de la que viene el usuario.
tags
Estilos definidos a las etiquetas de HTML en la página web. (Javascript 1.2)
title
El titulo de la página.
URL
Lo mismo que location, pero es aconsejable utilizar location ya que URL no existe en todos los navegadores.
vlinkColor
El color de los enlaces visitados.
4.7 EJEMPLOS DE PROPIEDADES DE DOCUMENT:
4.7.1 -EJEMPLO CON LA PROPIEDAD BGCOLOR:
Vamos a utilizar el evento onclick para colocar tres botones en la página que al pulsarlos nos cambie el color del fondo de la página.
<script>
function cambiaColor(colorin){
document.bgColor = colorin
}
</script>
<form>
<input type="Button" value="Rojo" onclick="cambiaColor('ff0000')">
<input type="Button" value="Verde" onclick="cambiaColor('00ff00')">
<input type="Button" value="Azul" onclick="cambiaColor('0000ff')">
</form>
4.7.2 -PROPIEDAD TITLE:
Vamos a mostrar e título de la página en una caja de alerta.
alert (document.title)
Ahora vamos a hacer una función que modifica el título de la página , asignándole el texto que le llegue por parámetro.
function cambiaTitulo(texto){
document.title = texto
}
Como en el ejemplo anterior, vamos a crear varios botones que llamen a la función pasándole distintos textos, que se
colocarán en el título de la página.
<form>
<input type="Button" value="Titulo = Hola a todos" onclick="cambiaTitulo('Hola a todos')">
<input type="Button" value="Titulo = Bienvenidos a mi página web" onclick="cambiaTitulo('Bienvenidos
a mi página web')">
<input type="Button" value="Titulo = Más dias que longanizas" onclick="cambiaTitulo('Más dias que
longanizas')">
</form>
4.8 MÉTODOS DE DOCUMENT:
El objeto document, localizado debajo del objeto window en la jerarquía de objetos de Javascript, también tiene una lista de métodos interesantes. La vemos a continuación.
captureEvents()
Para capturar los eventos que ocurran en la página web. Recibe como parámetro el evento que se desea capturar.
close()
Cierra el flujo del documento. (Se verá más adelante en este manual un artículo sobre el flujo del documento)
contextual()
Ofrece una línea de control de los estilos de la página. En el caso que deseemos especificarlos con Javascript.
getSelection()
Devuelve un string que contiene el texto que se ha seleccionado. Sólo funciona en Netscape.
handleEvent()
Invocas el manejador de eventos del elemento especificado.
open()
Abre el flujo del documento.
releaseEvents()
Liberar los eventos capturados del tipo que se especifique, enviándolos a los objetos siguientes en la jerarquía.
routeEvent()
Pasa un evento capturado a través de la jerarquía de eventos habitual.
write()
Escribe dentro de la página web. Podemos escribir etiquetas HTML y texto normal.
writeln()
Escribe igual que el método write(), aunque coloca un salto de línea al final.
El ejemplo consiste en una página que tiene un poco de texto y un botón. En la página podremos seleccionar algo de texto y luego apretar el botón, que llama a una función que muestra en una caja alert el texto que se ha seleccionado. El código es el siguiente:
<html>
<head>
<title>Rescatar lo seleccionado</title>
<script language="JavaScript">
function mostrarSeleccionado(){
alert("Has seleccionado:n" + document.getSelection())
}
</script>
</head>
<body>
<h1>Rescatar lo seleccionado</h1>
<br>
<form>
<input type="button" value="pulsame!" onClick="mostrarSeleccionado()">
</form>
Selecciona cualquier texto de la página y pulsa sobre el botón.
</body>
</html>
4.9 FLUJO DE ESCRITURA DEL DOCUMENTO:
En javascript tenemos que respetar el flujo de escritura del documento forzosamente. Es por ello que sólo podemos ejecutar sentencias document.write() (método write() del objeto document) cuando está abierto el flujo de escritura del documento, o lo que es lo mismo, mientras se está cargando la página.
Si recordamos las dos formas de ejecutar un script en Javascript:
• Ejecución de los scripts mientras que carga la página. Aquí podremos ejecutar document.write() y lo hemos hecho habitualmente en los ejemplos anteriores.
• Ejecución de los scripts cuando la página ha sido cargada, como respuesta a un evento del usuario. Aquí no podemos hacerlo porque la página ha terminado de cargarse, de hecho, no lo hemos hecho nunca hasta ahora.
Para que quede claro vamos a hacer un script para escribir en la página una vez ésta ha sido cargada. Simplemente necesitamos un botón y al pulsarlo ejecutar el método write() del objeto document.
<form>
<INPUT type=button value=escribir onclick="window.document.write('hola')">
</form>
4.9.1 -MÉTODOS OPEN() Y CLOSE() DE DOCUMENT:
Los métodos open() y close() del objeto document sirven para controlar el flujo del documento desde Javascript. Nos permiten abrir y cerrar el documento explícitamente.
<script>
function escribe(){
document.open()
window.document.write('Hola')
document.close()
}
</script>
<form>
<INPUT type=button value=escribir onclick="escribe()">
</form>
