El lenguaje HTML por sí solo proporciona elementos para presentarle al usuario un formulario para su llenado. Construímos un formulario colocando el código de la misma entre las etiquetas de apertura y cerrado de formularios cuya sintaxis es la siguiente:
<FORM> ... </FORM>
Y ya dentro del formulario, con la etiqueta <INPUT> podemos dar entrada a datos del usuario. La etiqueta <INPUT> es una de esas etiquetas de las convenciones HTML que no tienen etiqueta de cierre (esto es, no se usa algo como </INPUT>), y su sintaxis es la siguiente:
<INPUT atributos >
Para ser más específicos, se muestran los siguientes ejemplos:
<INPUT TYPE=TEXT NAME="..." MAXLENGTH=... SIZE=...>
<INPUT TYPE=RADIO NAME="..." VALUE="...">
<INPUT TYPE=CHECKBOX NAME="..." VALUE="...">
<INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET>
En el primer ejemplo se le pide al usuario dar entrada en una cajita de texto, en el segundo ejemplo se le pide al usuario con botones de radio seleccionar una de varias opciones (solo es posible seleccionar una opción), mientras que en la tercera línea se le pide al usuario con varias cajitas de chequeo seleccionar una o varias opciones. La cuarta línea hará que aparezca un botón con la leyenda “Submit Query” con lo cual se le enviarán al servidor Web los datos dados por el usuario en el formulario, mientras que la quinta línea con la leyenda “Reset” hará que se borre cualquier información que hubiere sido metida en el formulario, preparando todo para comenzar de nuevo.
A continuación se presenta un ejemplo de un formulario HTML que usa las cinco variantes de INPUT dada arriba:
<HTML>
<HEAD>
<TITLE>Ejemplo de una formulario creado en HTML</TITLE>
</HEAD>
<BODY>
<FORM NAME="ENCUESTA">
Por favor escribe tu nombre y tu edad:<BR>
Nombre<INPUT TYPE=TEXT NAME="NOMBRE" MAXLENGTH=20 SIZE=15>
ApellidoPaterno<INPUT TYPE=TEXT NAME="APELLIDOP" MAXLENGTH=20 SIZE=15>
ApellidoMaterno<INPUT TYPE=TEXT NAME="APELLIDOM" MAXLENGTH=20 SIZE=15>
<P>
Por favor selecciona tu estación favorita del año:<BR>
Primavera<INPUT TYPE=RADIO NAME="ESTACION" VALUE="Primavera">
Verano<INPUT TYPE=RADIO NAME="ESTACION" VALUE="Verano">
Otoño<INPUT TYPE=RADIO NAME="ESTACION" VALUE="Otoño">
Invierno<INPUT TYPE=RADIO NAME="ESTACION" VALUE="Invierno">
<P>
Por favor checa todas las actividades que te gustan:<BR>
Aerobics<INPUT TYPE=CHECKBOX NAME="ACTIVIDAD" VALUE="Aerobics">
Ciclismo<INPUT TYPE=CHECKBOX NAME="ACTIVIDAD" VALUE="Ciclismo">
Equitación<INPUT TYPE=CHECKBOX NAME="ACTIVIDAD" VALUE="Equitacion">
Futbol<INPUT TYPE=CHECKBOX NAME="ACTIVIDAD" VALUE="Futbol">
Natación<INPUT TYPE=CHECKBOX NAME="ACTIVIDAD" VALUE="Natacion">
<P>
<INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET>
</FORM>
</BODY>
</HTML>
Si guardamos el código anterior en un archivo de texto con extensión “.htm” y lo abrimos con un navegador de nuestra selección, se imprimirá en la página Web mostrada una primera línea diciendo “Por favor escribe tu nombre y tu edad”, y en una segunda línea aparecerán tres cajas precedidas por las hileras “Nombre”, “Apellido Paterno” y “Apellido Materno”. Más abajo, se imprimirá una línea diciendo “Por favor selecciona tu estación favorita del año”, debajo de la cual aparecerán tres botones de “radio” pidiéndole al usuario que seleccione una (y solo una) de las cuatro opciones “Primavera”, “Verano”, “Otoño” e “Invierno”. Más abajo, se imprime una línea diciendo “Por favor checa todas las actividades que te gustan”, seguida de cinco cajitas de chequeo: “Aerobics”, “Ciclismo”, “Equitación”, “Futbol” y “Natación”.
Podemos pedir otro dato más en el formulario dado arriba, la edad del usuario, para lo cual podemos añadir la siguiente línea de código
Edad<INPUT TYPE=TEXT NAME="EDAD" MAXLENGTH=3 SIZE=3>
Esta línea de código adolece de un defecto. La información es aceptada aún si el usuario proporciona una edad irreal, como una edad de 400 años (la ciencia médica aún no logra prolongar la edad hasta estos límites), incluso si el usuario proporciona una edad negativa. Aquí se tienen dos opciones: (1) se envía al servidor Web el formulario tal y como la ha llenado el usuario, y al encontrarse un error se vuelve a cargar por completo la página haciéndole ver al usuario su error y pidiéndole que lo corrija dando el dato correcto, (2) evaluar la edad que ha proporcionado el usuario dentro de la misma página efectuando comparaciones, y si la edad está fuera de cierto rango entonces se le pide al usuario que corrija el dato antes de que el formulario sea enviado al servidor Web. La primera opción requiere que la página del usuario esté interactuando en forma directa con el servidor Web, lo cual impone una carga adicional de trabajo en el servidor, mientras que la segunda opción envía la página del usuario con el formulario ya completado al servidor Web sólo después de que el formulario ha sido encontrado libre de errores. Obviamente, para el servidor Web la segunda opción es mucho mejor que la primera, pero requiere que la página con el formulario que se le envía al usuario contenga código ejecutable capaz de efectuar operaciones de cálculo, precisamente algo como JavaScript o VBScript.
A continuación se tiene la página HTML modificada incorporando código VBScript para determinar si la edad proporcionada por el usuario está dentro de un rango correcto:
<HTML>
<HEAD>
<TITLE>Ejemplo de Manejo de Eventos en VBScript</TITLE>
<SCRIPT LANGUAGE="VBScript">
Sub ChecarEdad(formulario)
If ((formulario.EDAD.value < 0) Or (formulario.EDAD.value > 120)) Then
alert "¡Por favor proporciona tu edad real!"
formulario.EDAD.value = 0
End If
End Sub
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="ENCUESTA">
Por favor escribe tu nombre y tu edad:<BR>
Nombre<INPUT TYPE=TEXT NAME="NOMBRE" MAXLENGTH=20 SIZE=15>
ApellidoPaterno<INPUT TYPE=TEXT NAME="APELLIDOP" MAXLENGTH=20 SIZE=15>
ApellidoMaterno<INPUT TYPE=TEXT NAME="APELLIDOM" MAXLENGTH=20 SIZE=15>
Edad<INPUT TYPE=TEXT NAME="EDAD" MAXLENGTH=3 SIZE=3 onChange="ChecarEdad(ENCUESTA)">
<P>
Por favor selecciona tu estación favorita del año:<BR>
Primavera<INPUT TYPE=RADIO NAME="ESTACION" VALUE="Primavera">
Verano<INPUT TYPE=RADIO NAME="ESTACION" VALUE="Verano">
Otoño<INPUT TYPE=RADIO NAME="ESTACION" VALUE="Otoño">
Invierno<INPUT TYPE=RADIO NAME="ESTACION" VALUE="Invierno">
<P>
Por favor checa todas las actividades que te gustan:<BR>
Aerobics<INPUT TYPE=CHECKBOX NAME="ACTIVIDAD" VALUE="Aerobics">
Ciclismo<INPUT TYPE=CHECKBOX NAME="ACTIVIDAD" VALUE="Ciclismo">
Equitación<INPUT TYPE=CHECKBOX NAME="ACTIVIDAD" VALUE="Equitacion">
Futbol<INPUT TYPE=CHECKBOX NAME="ACTIVIDAD" VALUE="Futbol">
Natación<INPUT TYPE=CHECKBOX NAME="ACTIVIDAD" VALUE="Natacion">
<P>
<INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET>
</FORM>
</BODY>
</HTML>
Al igual que es posible crear formularios con el par de etiquetas <FORM> ... </FORM> de HTML incorporando código VBScript, también es posible crear formularios incorporando código JavaScript que hagan exactamente lo mismo. Las etiquetas empleadas en su mayor parte son las mismas.
A continuación se tiene la página HTML modificada incorporando código JavaScript para determinar si la edad proporcionada por el usuario está dentro de un rango correcto:
<HTML>
<HEAD>
<TITLE>Ejemplo de Manejo de Eventos en JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function ChecarEdad(formulario) {
if ((formulario.edad.value < 0) || (formulario.edad.value > 120)) {
alert("¡Por favor proporciona tu edad real!");
formulario.edad.value = 0;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="ENCUESTA">
Por favor escribe tu nombre y tu edad:<BR>
Nombre<INPUT TYPE=TEXT NAME="NOMBRE" MAXLENGTH=20 SIZE=15>
ApellidoPaterno<INPUT TYPE=TEXT NAME="APELLIDOP" MAXLENGTH=20 SIZE=15>
ApellidoMaterno<INPUT TYPE=TEXT NAME="APELLIDOM" MAXLENGTH=20 SIZE=15>
Edad<INPUT TYPE=TEXT NAME="edad" MAXLENGTH=3 SIZE=3 onChange="ChecarEdad(ENCUESTA)">
<P>
Por favor selecciona tu estación favorita del año:<BR>
Primavera<INPUT TYPE=RADIO NAME="ESTACION" VALUE="Primavera">
Verano<INPUT TYPE=RADIO NAME="ESTACION" VALUE="Verano">
Otoño<INPUT TYPE=RADIO NAME="ESTACION" VALUE="Otoño">
Invierno<INPUT TYPE=RADIO NAME="ESTACION" VALUE="Invierno">
<P>
Por favor checa todas las actividades que te gustan:<BR>
Aerobics<INPUT TYPE=CHECKBOX NAME="ACTIVIDAD" VALUE="Aerobics">
Ciclismo<INPUT TYPE=CHECKBOX NAME="ACTIVIDAD" VALUE="Ciclismo">
Equitación<INPUT TYPE=CHECKBOX NAME="ACTIVIDAD" VALUE="Equitacion">
Futbol<INPUT TYPE=CHECKBOX NAME="ACTIVIDAD" VALUE="Futbol">
Natación<INPUT TYPE=CHECKBOX NAME="ACTIVIDAD" VALUE="Natacion">
<P>
<INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET>
</FORM>
</BODY>
</HTML>
Para la incorporación de código dinámico interactivo dentro de una página HTML, JavaScript proporciona entre sus objetos el objeto forms, el cual siendo un objeto posee propiedades, métodos, y manejadores de eventos.
Dentro de las propiedades del objeto forms, hay varias propiedades que a su vez ellas mismas también son objetos (esto es algo parecido a lo que ocurre con el objeto Date de JavaScript que posee propiedades que a su vez son también objetos), las cuales pueden ser accesadas mediante el operador punto. Tales propiedades del objeto forms que a su vez son también objetos son las siguientes:
buttonLa siguiente porción de código JavaScript pone a prueba al objeto “form” y a su propiedad “button” (botón) usando la autoreferencia this que hace referencia al mismo objeto en cuestión:
checkbox
hidden
password
radio
reset
select
submit
text
textarea
<HTML>
<HEAD>
<TITLE>Prueba de Entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function probarResultados (formulario) {
var Variable_de_Prueba = formulario.caja_de_entrada.value;
alert ("Tu escribiste: " + Variable_de_Prueba);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="miForma" ACTION="" METHOD="GET">Escribe algo dentro de la cajita: <BR>
<INPUT TYPE="TEXT" NAME="caja_de_entrada" VALUE=""><P>
<INPUT TYPE="button" NAME="BOTON" Value="Clic" onClick="probarResultados(this.form)">
</FORM>
</BODY>
</HTML>
Si se ejecuta el código, se imprimirá una línea diciendo “Escribe algo dentro de la cajita:”, y si se escribe una palabra dentro de la cajita que aparece debajo y se oprime el botón “Clic”, aparecerá una ventanita de mensaje en cuyo interior dice “Tu escribiste: (aquí aparece lo que fue puesto en la cajita)”. Obsérvese que en éste código el primer tipo de entrada (TYPE) que es TEXT está puesto entre comillas, debiendo ser aceptado por muchos browsers. Y en la etiqueta <FORM> además del atributo del nombre de la etiqueta (NAME) aparecen otros dos atributos: ACTION (aunque no es utilizado) y METHOD, al cual se le dá el valor GET. El atributo ACTION define cómo queremos que el navegador del usuario maneje el formulario HTML cuando sea sometido a un programa en el servidor (generalmente un programa elaborado en el lenguaje CGI) que se encarge de ejecutar el código receptor. En virtud de que el ejemplo anterior no fue diseñado para enviar nada a ningún servidor, el URL (domicilio Web) del programa CGI es omitido. Por su parte, METHOD define el método mediante el cual los datos serán pasados al servidor cuando la formulario sea enviado, aunque en este ejemplo la forma no envía nada.
Algo que no hemos visto en los ejemplos dados arriba son las listas de selección, en las cuales se presenta un listado al usuario del cual el usuario selecciona una opción (como los listados que son dados como menús de opciones). Una caja de listado es creada con la etiqueta <SELECT>, y los artículos que aparezcan dentro de la caja de listado son creados usando la etiqueta <OPTION>. Se puede tener cualquier cantidad de etiquetas <OPTION> en una lista, la cual debe ser terminada con una etiqueta </SELECT>. La lista puede aparecer mostrando visibles varios artículos a la vez, o puede aparecer como una caja expansible. El marcado de ambos estilos es idéntico, excepto para el atributo optativo SIZE, el cual es dejado fuera para hacer que la lista de de selección. Podemos usr el atributo SIZE para hacer una caja de listado del tamaño que queramos. Usamos la propiedad selectedIndex para probar cuál opción fue escogida de una lista, regresándose 0 para la primera opción, 1 para la segunda opción, y así sucesivamente (si no se selecciona nada, el valor es -1).
<HTML>
<HEAD>
<TITLE>List Box Test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testSelect(form) {
alert (form.lista.selectedIndex);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="miForma" ACTION="" METHOD="GET">
<INPUT TYPE="button" NAME="BOTON" Value="Prueba" onClick="testSelect(this.form)">
<SELECT NAME="lista" SIZE="5">
<OPTION>Este es el articulo 1
<OPTION>Este es el articulo 2
<OPTION>Este es el articulo 3
<OPTION>Este es el articulo 4
<OPTION>Este es el articulo 5
</SELECT>
</FORM>
</BODY>
</HTML>
La caja de texto es quizá el objeto de forma más común del cual se lee o al cual se escribe al usar JavaScript. Sin embargo, podemos usar JavaScript para leer o escribir valores de (y hacia) la mayoría de otros objetos (JavaScript no puede ser usado actualmente para leer o escribir datos cuando se usa la caja de texto para contraseñas). Un atributo TYPE interesante es el atributo “HIDDEN”. Desde el punto de vista de JavaScript, las cajas de texto oculto se comportan igual que las cajas de texto regulares, compartiendo las mismas propiedades y métodos. Desde el punto de vista del usuario, las cajas de texto oculto no existen porque no aparecen visiblemente en la forma. Estas cajas son el medio mediante el cual información especial puede ser transferida entre el servidor y la máquina del usuario; pueden ser usadas para almacenar datos temporales para uso posterior.
Algo que conviene tener presente es que al crearse botones de “radio” dentro de JavaScript, se puede proporcionar a cada objeto el mismo nombre (por ejemplo, “rad”), en cuyo caso JavaScript creará una lista (array) usando el nombre proporcionado; tras lo cual se puede referenciar los botones usando índices de listado; el primer botón de la serie está numerado 0, el segundo está numerado 1, y así sucesivamente:
<INPUT TYPE="radio" NAME="rad" VALUE="radio_button1" onClick=0>
<INPUT TYPE="radio" NAME="rad" VALUE="radio_button2" onClick=0>
<INPUT TYPE="radio" NAME="rad" VALUE="radio_button3" onClick=0>
<INPUT TYPE="radio" NAME="rad" VALUE="radio_button4” onClick=0>
Enfatizaremos ahora el hecho de que el atributo de valor VALUE es optativo para formas que serán usadas exclusivamente dentro de Javascript. Sin embargo, se requiere proporcionar un valor si la forma va a ser enviada a un programa CGI que esté ejecutándose en el servidor.
Con JavaScript, un documento puede contener varios formularios o formas y no solo uno. El número de formularios que hay en un documento puede ser obtenido mediante la siguiente operación:
document.forms.length
Cada forma en específico puede ser referenciada de la siguiente manera:
document.forms[índice]
Las propiedades del objeto forms son:
action.- El atributo ACTION.El método del objeto forms es:
elements.- Un arreglo que refleja todos los elementos que hay en una forma.
encoding.- El atributo ENCTYPE.
length.- El número de elementos que hay en una forma.
method.- El atributo METHOD.
target.- El atributo TARGET.
nombreForma.submit()
que envía al servidor Web de la página vista por el usuario la información contenida en la forma llamada nombreForma.
El manejador de eventos del objeto forms es:
onSubmit
y ocurre cuando una forma es enviada al servidor Web de la página.
Una propiedad que suele usarse dentro de los formularios es la que permite mostrar o esconder objetos, siendo la propiedad de estilo style la que se usa de la siguiente manera para hacer visible un objeto:
objeto.style.visibility="visible";
y de la siguiente manera para esconder un objeto:
objeto.style.visibility="hidden";
A continuación tenemos el código de un programa que permite que se oculte un objeto a la vez que se muestra otro y viceversa:
<html>Si el lector guarda lo anterior bajo un archivo como “visibilidad.htm” y abre el archivo con su navegador, aparecerán dos leyendas de texto en la ventana de la página correspondiendo con las cajitas que estarán checadas ambas abajo. Si se remueve la palomita de cualquiera de las cajitas de opción, se borrará una de las dos leyendas de texto (o ambas, en caso de que a las dos cajitas se les remueva la palomita).
<head>
<title>Ocultando y mostrando objetos</title>
<script language="JavaScript" type="text/javascript">
function MostrarEsconder() {
if(!document.getElementById) return;
var texto1 = document.getElementById("texto1");
var texto2 = document.getElementById("texto2");
var mostrarTexto1 = document.formulario.texto1.checked;
var mostrarTexto2 = document.formulario.texto2.checked;
texto1.style.visibility = (mostrarTexto1) ? "visible" : "hidden";
texto2.style.visibility = (mostrarTexto2) ? "visible" : "hidden";
}
</script>
</head>
<body>
<h1 ID="texto1">No hay peor ciego que el que no quiere ver</h1>
<h1 ID="texto2">No hay peor sordo que el que no quiere oir</h1>
<p>Empleando el modelo DOM para el objeto document podemos
ocultar o mostrar una o dos cosas diferentes dependiendo de
lo que chequemos en las cajas de opción que se dan abajo.</p>
<form name="formulario">
<input type="checkbox" name="texto1"
checked onClick="MostrarEsconder();">
<b>Mostrar el primer texto</b>
<br>
<input type="checkbox" name="texto2"
checked onClick="MostrarEsconder();">
<b>Mostrar el segundo texto</b>
<br>
</form>
</body>
</html>
En el código que se acaba de proporcionar arriba hay dos líneas que posiblemente producirán algo de extrañeza en los lectores que no son aún proficientes en los enunciados abreviados de transferencias condicionales del lenguaje JavaScript. Son los dos enunciados escritos bajo la siguiente sintaxis abreviada de JavaScript que aunque menos legible proporciona una manera un poco más compacta de obtener la transferencia condicional deseada que corresponde a una transferencia del tipo if-else:
variable = (condición) ? (acción true) : (acción false);
Si la condición es verdadera (true) se ejecuta la acción especificada antes del semicolon, y si es falsa (false) se ejecuta la acción especificada después del semicolon. Esto implica que el enunciado:
valor = (a == 1) ? 1 : 0;
es equivalente al siguiente conjunto de enunciados:
if (a == 1)Usando las convenciones del modelo DOM (Document Object Model) para la manipulación del objeto document, específicamente los recursos disponibles para llevar a cabo la manipulación de nodos (véase en los apéndices de esta obra el anexo “HTML, XML, XHTML”), podemos llevar a cabo otras tareas tales como la modificación dinámica de texto en una página Web como se muestra en el siguiente ejemplo:
value = 1;
else
value = 0;
<html>Si el lector guarda lo anterior bajo un archivo como “cambio_dinamico.htm” y abre el archivo con su navegador, aparecerá al principio en letras grandes una leyenda de texto diciendo “Este encabezado puede ser cambiado” presentando una caja vacía en la cual podemos meter el texto que queramos (no mayor de 50 caracteres), y al oprimir el botón “Cambiar” el título del encabezado cambiará, pudiéndose repetir el procedimiento cuantas veces se quiera.
<head>
<title>Ejemplo de cambio dinámico de texto en JavaScript</title>
<script language="JavaScript" type="text/javascript">
function CambiarEncabezado() {
if(!document.getElementById) return;
var nuevoEncabezado = document.formulario.nuevoEncabezado.value;
var encabezado = document.getElementById("encabezado");
encabezado.firstChild.nodeValue = nuevoEncabezado;
}
</script>
</head>
<body>
<h1 ID="encabezado">Este encabezado puede ser cambiado</h1>
<p>Empleando el modelo DOM para el objeto document podemos
cambiar el encabezado de texto en esta página, metiendo el
nuevo texto en el espacio en blanco y oprimiendo el botón
Cambiar</p>
<form name="formulario">
<input type="text" name="nuevoEncabezado" size="50">
<input type="button" value="Cambiar" onClick="CambiarEncabezado();">
</form>
</body>
</html>
En el ejemplo anterior, hemos usado los siguientes recursos para manipular el primer nodo hijo del objeto document:
firstChild nodeValue
Empleando la manipulación de nodos, podemos elaborar un ejemplo diferente en el cual usando los siguientes recursos para manipulación de nodos de un documento HTML (de nueva cuenta, consúltese el apéndice anexo “HTML, XML, XHTML”):
createTextNode appendChild()
se le puede agregar texto en forma dinámica a una página con un código como el siguiente:
<html>Si el lector guarda lo anterior bajo un archivo como “agregado_texto.htm” y abre el archivo con su navegador, aparecerá al principio en letras grandes una leyenda de texto diciendo “Crea tu propio contenido” presentando una caja vacía en la cual podemos meter el texto que queramos agregar (no mayor de 100 caracteres), y al oprimir el botón “Agregar” el nuevo texto será agregado al texto que dice “Empleando el modelo DOM para el objeto document podemos ir agregando dinámicamente oraciones a este párrafo. Escribe una oración y haz clic con el botón Agregar”.
<head>
<title>Adición dinámica de texto usando JavaScript</title>
<script language="JavaScript" type="text/javascript">
function AgregarTexto() {
if(!document.getElementById) return;
var oracion = document.formulario.oracion.value;
var nodo = document.createTextNode(" " + oracion);
document.getElementById("editar").appendChild(nodo);
document.formulario.oracion.value="";
}
</script>
</head>
<body>
<h1>Crea tu propio contenido</h1>
<p id="editar">Empleando el modelo DOM para el objeto document podemos ir
agregando dinámicamente oraciones a este párrafo. Escribe una
oración y haz clic con el botón Agregar.</p>
<form name="formulario">
<input type="text" name="oracion" size="100">
<input type="button" value="Agregar"
onClick="AgregarTexto();">
</form>
</body>
</html>
En los tres ejemplos anteriores hemos hecho uso del siguiente método del objeto document:
getElementById("id")
que tiene que ser accesado del objeto document de la manera usual con el operador punto:
document.getElementById("id");
El método nos permite accesar el primer elemento dentro de la página que tenga la identificación
id especificada (y la cual debe aparecer puesta entre comillas dobles). En el siguiente ejemplo creamos una interacción mediante la cual si se hace clic dentro de una porción de texto de una página Web a la cual se le haya dado un identificador ID se llevará a cabo en respuesta otra acción como la aparición de un mensaje de alerta:
<html>El conocimiento de la manipulación de nodos dentro de un documento HTML, considerado como un objeto, nos proporciona los conocimientos necesarios para poder llevar a cabo la misma manipulación de nodos en un documento XML que nos permite extraer y manipular los datos del documento XML. A estas alturas debe ser evidente que tanto un documento HTML como un documento XML están en conformidad con la convención del modelo DOM (Document Object Model).
<head>
<title>Adición dinámica de texto usando JavaScript</title>
<script language="JavaScript" type="text/javascript">
function obtenerValor () {
var x = document.getElementById("Mi Cabecera");
alert(x.innerHTML)
}
</script>
</head>
<body>
<h1 id="Mi Cabecera" onclick="obtenerValor()">¡Haz click aquí!</h1>
</body>
</html>
El uso de las etiquetas <form> no está limitado a páginas HTML con o sin las capacidades del lenguaje JavaScript o del lenguaje VBScript. Se les puede utilizar para la elaboración de formularios de contenido interactivo recurriendo a otras alternativas como la que ofrece el lenguaje de programación PHP.
PHP fue presentado por vez primera como Personal Home Page Tools por su creador Rasmus Lerdorf el 8 de junio de 1995 en un grupo Usenet, en su versión 1.0. Se trataba de unas herramientas descritas por su creador como “pequeños binarios cgi escritos en el lenguaje C”. Pero ya asentado como lenguaje de programación, PHP con el paso del tiempo se convertiría en una de las herramientas más importantes para elaborar contenido interactivo funcionando no desde la máquina del usuario sino desde el otro lado, el lado del servidor Web.
Para tener una idea sobre cómo se utiliza PHP, a continuación se presenta lo que posiblemente sea la página Web más sencilla posible que se pueda elaborar usando PHP, la aplicación introductoria clásica “Hola mundo”:
<html>Esto parece ser una página Web ordinaria, la cual usa las mismas etiquetas y la misma estructura que la que utiliza una página HTML cualesquiera. Sin embargo, el contenido puesto entre las etiquetas <body> es algo nuevo, distinguido por el par de etiquetas:
<head>
<title>El programa PHP más sencillo posible</title>
</head>
<body>
<?php echo '¡Hola mundo!' ?>
</body>
</html>
<?php ... ?>
La etiqueta de apertura le indica a la máquina que el código puesto entre la etiqueta y su pareja complementaria es código PHP. El comando “echo” es un comando PHP que ordena que se envíe a la máquina del usuario un “eco” que imprima en la pantalla la hilera de texto que le sigue, en este caso la hilera “¡Hola mundo!”.
El ejemplo PHP que se acaba de mostrar no ofrece contenido dinámico, ya que simple y sencillamente pone en el monitor de la máquina del usuario la hilera de texto señalada. Sin embargo, usando la metodología para la elaboración de formularios con las etiquetas <form>, podemos modificar el programa anterior construyendo un programa que dé un mensaje personalizado. La dinámica será muy sencilla: al abrirse la página Web aparecerá una caja de texto invitando al usuario a que escriba su nombre dentro de la caja de texto y oprima el botón de Submit, tras lo cual aparecerá el mensaje personalizado “¡Hola mundo!”:
<html>En este ejemplo el programa PHP hace uso del hecho de que se puede accesar a los valores de un formulario mediante las variables de arreglo de lista (array) $_POST y $_GET. Las palabras “GET” y “POST” son palabras reservadas tanto en la elaboración de páginas HTML como en la elaboración de páginas Web en las que se incluya código PHP, las cuales especifican la manera en la cual se hará una requisición al servidor Web. Con el uso inmediato del símbolo precedente “$” se declaran en PHP dos variables que, por conveniencia mnemónica, corresponden con el método que sea utilizado para enviar datos al servidor. Aunque GET es más fácil de utilizar, está limitado a una extensión de 155 caracteres, y si se quiere enviar una cantidad grande de datos al servidor Web entonces POST es la única manera en que se pueden enviar los datos desde la máquina del usuario hasta el servidor Web. Por otro lado, la función PHP empty() regresa un valor de verdadero (true) si el argumento es nulo, y la inversión llevada a cabo por la negación lógica producida por el símbolo inmediato precedente “!” puesto a la función empty() convierte el valor de true en false (falso) cuando no hay argumentos, y por lo tanto en verdadero si lo hay.
<head>
<title>Un ¡Hola Mundo! personalizado</title>
</head>
<body>
<?php if(!empty($_POST['nombre'])) {
echo "¡Hola, {$_POST['nombre']}, y bienvenido!";
} ?>
<form action="<?php $PHP_SELF; ?>"
method="post">
Escribe tu nombre: <input type="text"
nombre = "nombre" />
<input type="submit" />
</form>
</body>
</html>
Sin embargo, si el lector intenta probar los anteriores ejemplos del lenguaje de programación PHP en una máquina ordinaria conectada a Internet, lo más probable es que no obtendrá absolutamente nada en la ventana del navegador porque para poder obtener algo se requiere de una computadora que esté habilitada como servidor Web. Por regla general, no es posible ejecutar en toda su extensión páginas Web con código PHP en una computadora ordinaria de usuario en virtud de que los navegadores en tales máquinas no están habilitados para manejar código PHP, y las únicas máquinas que tienen interpretadores o compiladores de código PHP son las computadoras que han sido habilitadas como servidores Web. Este tipo de requerimientos nos conduce a la necesidad de estudiar más a fondo los detalles involucrados en las transacciones entre una máquina de usuario conocida coloquialmente como “máquina cliente” y un servidor Web.
