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>
No hay comentarios:
Publicar un comentario