Embed Size (px)
DESCRIPTION
Desarrollo web
Citation preview
Conceptos básicos
El lenguaje PHP es un lenguaje de programación de estilo clásico, con esto quiero decir que es un lenguaje de programación con variables, sentencias condicionales, bucles, funciones.... No es un lenguaje de marcas como podría ser HTML, XML o WML. Está mas cercano a JavaScript o a C, para aquellos que conocen estos lenguajes.
Pero a diferencia de Java o JavaScript que se ejecutan en el navegador, PHP se ejecuta en el servidor, por eso nos permite acceder a los recursos que tenga el servidor como por ejemplo podría ser una base de datos. El programa PHP es ejecutado en el servidor y el resultado enviado al navegador. El resultado es normalmente una página HTML pero igualmente podría ser una pagina WML.
Al ser PHP un lenguaje que se ejecuta en el servidor no es necesario que su navegador lo soporte, es independiente del navegador, pero sin embargo para que sus páginas PHP funcionen, el servidor donde están alojadas debe soportar PHP.
Nuestro primer PHP
La ventaja que tiene PHP sobre otros lenguajes de programación que se ejecutan en el servidor (como podrían ser los script CGI Perl), es que nos permite intercalar las sentencias PHP en las paginas HTML, es un concepto algo complicado de entender si no se ha visto nunca como funciona unas paginas PHP o ASP.
Vamos a ver un ejemplo sencillo para comprenderlo mejor. En azul está el código HTML y en rojo el código PHP. Seguiremos este criterio durante todo el manual.
<html> <head> <title>Ejemplo de PHP</title> </head> <body> Parte de HTML normal. <BR><BR> <?php echo "Parte de PHP<br>"; for($i=0;$i<10;$i++) { echo "Linea ".$i."<br>"; } ?> </body> </html>
El código PHP ejecutado tiene dos partes: la primera imprime "Parte de PHP" y la segunda es un bucle que se ejecuta 10 veces de 0 a 9, por cada vez que se ejecuta se escribe una línea, la variable $i contiene el número de línea que se está escribiendo.
No importa si no entiende muy bien el programa este ejemplo solo es para ilustrar como se intercala el código HTML y el código PHP.
Variables
Una variable es un contenedor de información, en el que podemos meter números enteros, números decimales, carácteres... el contenido de las variables se puede leer y se puede cambiar durante la ejecución de una página PHP.
En PHP todas las variables comienzan con el símbolo del dólar $ y no es necesario definir una variable antes de usarla. Tampoco tienen tipos, es decir que una misma variable puede contener un número y luego puede contener carácteres.
<html> <head> <title>Ejemplo de PHP</title> </head> <body> <?php $a = 1; $b = 3.34; $c = "Hola Mundo"; echo $a,"<br>",$b,"<br>",$c; ?> </body> </html>
En este ejemplo hemos definido tres variables, $a, $b y $c y con la instrucción echo hemos impreso el valor que contenían, insertando un salto de línea entre ellas.
Existen 2 tipos de variables, las variables locales que solo pueden ser usadas dentro de funciones y las variables globales que tienen su ámbito de uso fuera de las funciones, podemos acceder a una variable global desde una función con la instrucción global nombre_variable;
Aritméticos
Los operadores de PHP son muy parecidos a los de C y JavaScript, si usted conoce estos lenguajes le resultaran familiares y fáciles de reconocer.
Estos son los operadores que se pueden aplicar a las variables y constantes numéricas.
Operador Nombre Ejemplo Descripción
+ Suma 5 + 6 Suma dos números
- Resta 7 - 9 Resta dos números
* Multiplicación 6 * 3 Multiplica dos números
/ División 4 / 8 Divide dos números
% Módulo 7 % 2 Devuelve el resto de dividir ambos números, en este ejemplo el resultado es 1
++ Suma 1 $a++ Suma 1 al contenido de una variable.
-- Resta 1 $a-- Resta 1 al contenido de una variable.
<html> <head> <title>Ejemplo de PHP</title> </head> <body> <?php $a = 8; $b = 3; echo $a + $b,"<br>"; echo $a - $b,"<br>"; echo $a * $b,"<br>"; echo $a / $b,"<br>"; $a++; echo $a,"<br>"; $b--; echo $b,"<br>"; ?> </body> </html>
Comparación
Los operadores de comparación son usados para comparar valores y así poder tomar decisiones.
Operador Nombre Ejemplo Devuelve cierto cuando:
== Igual $a == $b $a es igual $b
!= Distinto $a != $b $a es distinto $b
< Menor que $a < $b $a es menor que $b
> Mayor que $a > $b $a es mayor que $b
<= Menor o igual $a <= $b $a es menor o igual que $b
>= Mayor o igual $a >= $b $a es mayor o igual que $b
<html> <head> <title>Ejemplo de PHP</title> </head> <body> <?php $a = 8; $b = 3; $c = 3; echo $a == $b,"<br>"; echo $a != $b,"<br>"; echo $a < $b,"<br>"; echo $a > $b,"<br>"; echo $a >= $c,"<br>"; echo $b <= $c,"<br>"; ?> </body> </html>
Lógicos
Los operadores lógicos son usados para evaluar varias comparaciones, combinando los posibles valores de estas.
Operador Nombre Ejemplo Devuelve cierto cuando:
&& Y (7>2) && (2<4) Devuelve verdadero cuando ambas condiciones son verdaderas.
And Y (7>2) and (2<4) Devuelve verdadero cuando ambas condiciones son verdaderas.
|| O (7>2) || (2<4) Devuelve verdadero cuando al menos una de las dos es verdadera.
Or O (7>2) or (2<4) Devuelve verdadero cuando al menos una de las dos es verdadera.
! No ! (7>2) Niega el valor de la expresión.
<html> <head> <title>Ejemplo de PHP</title> </head> <body> <?php $a = 8; $b = 3; $c = 3; echo ($a == $b) && ($c > $b),"<br>"; echo ($a == $b) || ($b == $c),"<br>"; echo !($b <= $c),"<br>"; ?> </body> </html>
Condicionales
Las sentencias condicionales nos permiten ejecutar o no unas ciertas instrucciones dependiendo del resultado de evaluar una condición. Las más frecuentes son la instrucción if y la instrucción switch.
Sentencia if ... else <?php if (condición) { Sentencias a ejecutar cuando la condición es cierta. } else { Sentecias a ejecutar cuando la condición es falsa. } ?>
La sentencia if ejecuta una serie de instrucciones u otras dependiendo de la condición que le pongamos. Probablemente sea la instrucción más importante en cualquier lenguaje de programación.
<html> <head> <title>Ejemplo de PHP</title> </head> <body> <?php $a = 8; $b = 3; if ($a < $b) { echo "a es menor que b"; } else { echo "a no es menor que b"; } ?> </body> </html>
En este ejemplo la condición no es verdadera por lo que se ejecuta la parte de código correspondiente al else.
Sentencia switch ... case <html> <head> <title>Ejemplo de PHP</title> </head> <body> <?php $posicion = "arriba"; switch($posicion) { case "arriba": // Bloque 1 echo "La variable contiene"; echo " el valor arriba"; break; case "abajo": // Bloque 2 echo "La variable contiene"; echo " el valor abajo"; break; default: // Bloque 3 echo "La variable contiene otro valor"; echo " distinto de arriba y abajo"; } ?> </body> </html>
Con la sentencia switch podemos ejecutar unas u otras instrucciones dependiendo del valor de una variable, en el ejemplo anterior, dependiendo del valor de la variable $posicion se ejecuta el bloque 1 cuando el valor es "arriba", el bloque 2 cuando el valor es "abajo" y el bloque 3 si no es ninguno de los valores anteriores.
Bucles
Los bucles nos permiten iterar conjuntos de instrucciones, es decir repetir la ejecución de un conjunto de instrucciones mientras se cumpla una condición.
Sentencia while <?php while (condición) { intrucciones a ejecutar. } ?>
Mientras la condición sea cierta se reiterará la ejecución de las instrucciones que están dentro del while.
<html> <head> <title>Ejemplo de PHP</title> </head> <body> Inicio<BR> <?php $i=0; while ($i<10) { echo "El valor de i es ", $i,"<br>"; $i++; } ?> Final<BR> </body> </html>
En el siguiente ejemplo, el valor de $i al comienzo es 0, durante la ejecución del bucle, se va sumando 1 al valor de $i de manera que cuando $i vale 10 ya no se cumple la condición y se termina la ejecución del bucle.
Sentencia for <?php for (inicial ; condición ; ejecutar en iteración) { intrucciones a ejecutar. } ?> <html> <head> <title>Ejemplo de PHP</title> </head>
<body> Inicio<BR> <?php for($i=0 ; $i<10 ; $i++) { echo "El valor de i es ", $i,"<br>"; } ?> Final<BR> </body> </html>
La instrucción for es la instrucción de bucles más completa. En una sola instrucción nos permite controlar todo el funcionamiento del bucle.
El primer parámetro del for, es ejecutado la primera vez y sirve para inicializar la variable del bucle, el segundo parámetro indica la condición que se debe cumplir para que el bucle siga ejecutándose y el tercer parámetro es una instrucción que se ejecuta al final de cada iteración y sirve para modificar el valor de la variable de iteración.
Salida
Hasta ahora hemos usado la instrucción echo para realizar salida a pantalla, esta instrucción es bastante limitada ya que no nos permite formatear la salida. En esta página veremos la instrucción printf que nos da mucha más potencia.
Sentencia printf <?php printf(cadena formato, variable1, variable2...); ?>
La cadena de formateo indica cómo se han de representar las valores que posteriormente le indicaremos. La principal ventaja es que además de poder formatear los valores de salida, nos permite intercalar texto entre ellos.
<html> <head> <title>Ejemplo de PHP</title> </head> <body> <?php printf("El numero dos con diferentes formatos: %d %f %.2f",2,2,2); ?> </body> </html>
La cadena de formato puede incluir una seria de carácteres especiales que indican como formatear las variables que se incluyen en la instrucción.
Elemento Tipo de variable
%s Cadena de carácteres.
%d Número sin decimales.
%f Número con decimales.
%c Carácter ASCII.
Aunque existen otros tipos, estos son los más importantes.
<html> <head> <title>Ejemplo de PHP</title> </head> <body> <?php $var="texto"; $num=3; printf("Puede fácimente intercalar <b>%s</b> con números <b>%d</b> <br>",$var,$num); printf("<TABLE BORDER=1 CELLPADDING=20>"); for ($i=0;$i<10;$i++) { printf("<tr><td>%10.d</td></tr>",$i); } printf("</table>"); ?> </body> </html> Envío y recepción de datos
El lenguaje PHP nos proporciona una manera sencilla de manejar formularios, permitiéndonos de esta manera procesar la información que el usuario ha introducido.
Al diseñar un formulario debemos indicar la página PHP que procesará el formulario, así como en método por el que se le pasará la información a la página.
<html> <head> <title>Ejemplo de PHP</title> </head> <body> <H1>Ejemplo de procesado de formularios</H1> Introduzca su nombre: <FORM ACTION="procesa.phtml" METHOD="GET"> <INPUT TYPE="text" NAME="nombre"><BR> <INPUT TYPE="submit" VALUE="Enviar"> </FORM> </body> </html>
Al pulsar el botón Enviar el contenido de cuadro de texto es enviado a la página que indicamos en el atributo ACTION de la etiqueta FORM.
En versiones anteriores a 4.2.0 PHP creaba una variable por cada elemento del FORM, esta variable creada tenía el mismo nombre que el cuadro de texto de la página anterior y el valor que habíamos introducido. Pero por razones de seguridad a partir de entonces para acceder a las variables del formulario hay que usar el array de parámetros $_POST[] o $_GET[] dependiendo del método usado para enviar los parámetros.
En este ejemplo se ha creado una entrada en el array $_GET[] con el índice 'nombre' y con el valor que haya introducido el navegante.
<html> <head> <title>Ejemplo de PHP</title> </head> <body> <H1>Ejemplo de procesado de formularios</H1> El nombre que ha introducido es: <?php echo $_GET['nombre'] ?> <br> </body> </html>
Method GET y POST
En la página anterior hemos comentado que los datos de un formulario se envía mediante el método indicado en el atributo METHOD de la etiqueta FORM, los dos métodos posibles son GET y POST.
La diferencia entre estos dos métodos radica en la forma de enviar los datos a la página, mientras que el método GET envía los datos usando la URL, el método POST los envía por la entrada estándar STDIO.
<html> <head> <title>Ejemplo de PHP</title> </head> <body> <H1>Ejemplo de procesado de formularios</H1> <FORM ACTION="procesa2.phtml" METHOD="GET"> Introduzca su nombre:<INPUT TYPE="text" NAME="nombre"><BR> Introduzca sus apellidos:<INPUT TYPE="text" NAME="apellidos"><BR>
<INPUT TYPE="submit" VALUE="Enviar"> </FORM> </body> </html>
<html> <head> <title>Ejemplo de PHP</title> </head> <body> <H1>Ejemplo de procesado de formularios</H1> <FORM ACTION="procesa2.phtml" METHOD="POST"> Introduzca su nombre:<INPUT TYPE="text" NAME="nombre"><BR> Introduzca sus apellidos:<INPUT TYPE="text" NAME="apellidos"><BR> <INPUT TYPE="submit" VALUE="Enviar"> </FORM> </body> </html>
procesa2.php
<html> <head> <title>Ejemplo de PHP</title> </head> <body> <H1>Ejemplo de procesado de formularios</H1> El nombre que ha introducido por GET es: <?php echo $_GET['nombre']," ",$_GET['apellidos'] ?><br> El nombre que ha introducido por POST es: <?php echo $_POST['nombre']," ",$_POST['apellidos'] ?> <br> </body> </html>
El resultado final es el mismo, solo que con el método GET podemos ver los parámetros pasados ya que están codificados en la URL.
Envio de emails
PHP nos ofrece la posibilidad de enviar emails de una manera sencilla y fácil, para ello el lenguaje nos proporciona la instrucción mail( ).
<?php mail(destinatario, tema, texto del mensaje); ?>
En el parámetro destinatario pondremos la dirección de email a donde se enviará el mensaje, en el parámetro tema el tema o subject del mensaje y el parámetro texto del mensaje el cuerpo del mensaje en formato texto plano.
Existe una sintaxis extendida de la instrucción mail( ) que nos permite añadir información adicional a la cabecera del mensaje.
<?php mail(destinatario, tema, texto del mensaje, información adicional de cabecera); ?>
En la información de cabecera podremos incluir parámetros adicionales al mensaje como Reply-To:, From:, Content-type:... que nos permiten tener un mayor control sobre el mensaje.
<html> <head> <title>Ejemplo de PHP</title> </head> <body> <H1>Ejemplo de envio de email</H1> Introduzca su direccion de email: <FORM ACTION="email.phtml" METHOD="GET"> <INPUT TYPE="text" NAME="direccion"><BR><BR> Formato: <BR> <INPUT TYPE="radio" NAME="tipo" VALUE="plano" CHECKED> Texto plano<BR> <INPUT TYPE="radio" NAME="tipo" VALUE="html"> HTML<BR><BR> <INPUT TYPE="submit" VALUE="Enviar"> </FORM> </body> </html>
email.phtml
<html> <head> <title>Ejemplo de PHP</title> </head> <body> <H1>Ejemplo de envio de email</H1> <? $direccion=$_GET['direccion']; $tipo=$_GET['tipo']; if ($direccion!=""){ if ($tipo=="plano"){ // Envio en formato texto plano mail($direccion,"Ejemplo de envio de email","Ejemplo de envio de email de texto plano\n\nWebEstilo.\nhttp://www.webestilo.com/\n Manuales para desarrolladores web.\n","FROM: Pruebas <[email protected]>\n"); } else { // Envio en formato HTML mail($direccion,"Ejemplo de envio de email","<html><head><title>WebEstilo. Manual de PHP</title></head><body>Ejemplo de envio de email de HTML<br><br>WebEstilo.<br>http://www.webestilo.com/<br> <u>Manuales</u> para <b>desarrolladores</b> web.</body></html>","Content-type: text/html\n", "FROM: Pruebas <[email protected]>\n"); } echo "Se ha enviado un email a la direccion: ",$direccion," en formato <b>",$tipo,"</b>."; } ?> <br> </FORM> </body> </html>
Conexión con el servidor de bases de datos
Antes de empezar a trabajar con bases de datos debes cerciorarte de que tanto tu servidor Apache como tu WAMP están conectados. La conexión con una base de datos remota tiene la siguiente sintaxis: $c=mysql_connect (host, user, password) donde $c es la variable que recoge el indentificador del enlace, host es la dirección del servidor de bases de datos, (en nuestra configuración local sería localhost) , user sería el nombre de uno de los usuarios registrados en la tabla user (recuerda lo que te he contado al respecto en la página anterior) y password la clave de acceso correspondiente al user. Para cerrar la conexión, PHP dispone de la siguiente función: $c=mysql_close ($c) donde $c es el nombre de la variable en la que se recogió el indentificador del enlace en el momento de la apertura. Crear una base de datos La creación de una base de datos requiere tener previamente establecida una conexión con el servidor y utiliza la siguiente sintaxis: mysql_create_db (nom) donde nom es el nombre de la nueva base de datos. Esta función devuelve TRUE si la base de datos es creada y FALSE si no es posible hacerlo. Si intentamos crear una base de datos con un nombre ya existente la función nos devolverá FALSE. Borrar una base de datos Para borrar una base de datos se requiere la siguiente función PHP: mysql_drop_db (nombre, $c) donde nombre es el nombre de la base de datos y $c el identificador de enlace aunque este último parámetro es opcional y solo tiene verdadero sentido sentido en el caso de que tengamos abiertas simultáneamente conexiones con dos servidores distintos. Esta función devuelve TRUE cuando se ejecuta con éxito y FALSE en el caso contrario. Igual que ocurría al tratar de crearla, si intentamos borrar una base de datos inexistente la función mysql_drop_db nos devolverá FALSE.
Lista de bases de datos existentes
A la hora de crear y/o borrar bases de datos resulta conveniente y útil conocer su preexistencia. PHP dispone de herramientas para conocer el número de bases de datos existentes en el servidor así como sus nombres. Tales funciones son las siguientes: $p=mysql_list_dbs($c) Esta función recoge en una variable $p un nuevo identificador que es imprescindible y previo al uso de las funciones que determinan los números y nombres de las bases de datos existentes en el enlace abierto identificado por $c. $num=mysql_num_rows($p) Esta función devuelve el número de bases de datos existentes en el servidor. Ese número puede recogerse en una variable (en este caso $num. Fíjate en la sintaxis. La función mysql_num_rows utiliza como parámetro $p que es el valor devuelto por la función mysql_list_dbs ejecutada previamente. mysql_db_name($p, n) Esta nueva función devuelve el nombre de una de las bases de datos identificada por un número n que tiene que pertenecer al intervalo [0,$num). Fíjate que n tiene que ser n<$num porque si por ejemplo $num=5 los cinco valores posibles de n serían: 0,1,2,3 y 4. Una lista completa de todas las bases de datos existentes en el servidor podría hacerse de la siguiente forma:
Abrirla conexión con el servidor.
Invocar a mysql_list_dbs.
Contar el número de bases de datos con mysql_num_rows
Insertar un bucle for ($i=0;$i<$num,$i++)
Presentar la lista de nombres insertando en el bucle la función: mysql_db_name($p,$i)
Conexión PHP y MySQL
Desde PHP es posible invocar funciones y ejecutar sentenciasde específicas de MySQL. La interconexión entre ambos programas se realiza mediante una de estas instrucciones: $res=mysql_db_query (base, sent, $enl) Envia una sentencia MySQL al servidor que selecciona la base de datos base y ejecuta la sentencia (sent sobre ella y devuelve un identificador de resultado positivo o falso si se produce algún tipo de error. El identificador de enlace ($enl) es opcional (sería el valor devuelto por la función mysql_connect ejecutada previamente. Si se omitiera $enl la función mysql_db_query intentaría buscar un enlace abierto y si no lo hubiera ejecutaría automaticamente un mysql_connect() en el que host sería el valor localhost, usuario root y password una cadena vacia. ¡¡Cuidado...!! Si has puesto una password al usuario root o si estás escribiendo tu código para un servidor remoto deberás cerciorarte de abrir un conexión antes de ejecutar esta instrucción. De lo contrario -como es evidente- daría error ya que los parámetros de la conexión automática no coincidirían con la configuración del servidor. $res=mysql_list_dbs ($enl) Devuelve un identificador de resultado que contiene las bases disponibles en el servidor con el que está establecida la conexión. mysql_select_db (base, $enl) Selecciona un base de datos MySQL (base) y la asocia con el identificador de enlace especificado(enl). Si no se especifica un identificador de enlace, se comportará -en esa circunstancia- de igual forma que la sentencia anterior. mysql_query (sent, $enl) Envia una sentencia sent a la base activa asociada al identificador de enlace $enl. Si no es especificado un identificador de enlace, asumirá el último enlace abierto. Devuelve TRUE si la sentencia se ha ejecutado correctamente y FALSE en caso contrario.
La ejecución de esta instrucción requiere que previamente se haya asociado un base de datos al identificador de enlace mediante una instrucción mysql_select_db. mysql_fetch_row ($res) Seleciona una fila de datos del resultado asociado al identificador de resultado $res. Cada fila -puede contener varias- es devuelta como una matriz escalar cuyo primer índice es cero. Devolverá FALSE cuando ya no queden más filas. Obviamente, previo a esta instrucción es necesario haber ejecutado un mysql_db_query que habrá sido la función generadora del identificador de resultado. mysql_num_rows ($res) Esta función devuelve el número de filas que contiene el identificador de resultado. mysql_fetch_array ($res) Es una versión extendida de mysql_fetch_row. Además de guardar los datos en el indice numerico del array, los guarda también con indices asociativos, usando el nombre del campo como clave.
Los valores de SELECT MULTIPLE
En una opción SELECT MULTIPLE dentro de un form típico de HTML es posible elegir ninguno, uno o varios de los elementos de de la lista. Basta con pulsar con el mouse (... has visto que fino quedó... lo de mouse..) en los valores valores elegidos manteniendo pulsada la tecla Ctrl, es decir... puro Windows Para recoger los valores de esa opción se define -dentro de la etiqueta SELECT- un name tipo array. Bastaría con escribir: <SELECT MULTIPLE name=var[] SIZE=6> Como ves var es el nombre de la variable (esta vez sin $ delante, recuerda que no estamos en PHP sino en puro HTML) y va seguido de [] precisamente para indicar que es un array. Lo de SIZE=6 no es otra cosa que el parámetro que indica cuantos elementos de la lista de opciones queremos que se visualicen simultáneamente en la página. El truco está en los values de cada option dentro de ese select Los he escrito así: <option value=1>Castellano <option value=2>Francés <option value=4>Inglés <option value=8>Alemán <option value=16>Búlgaro <option value=32>Chino ¡¡Fíjate que he mantenido exactamente el mismo orden que he definido el campo SET de la tabla. Y fíjate también en los valores: 1, 2, 4, 8, 16 y 32 que son precisamente las potencias de 2: 20, 21, 22, 23, 24, 25, y 26 El caso es que al seleccionar valores, van añadiéndose al array. Por ejemplo. Si selecciono: Francés y Búlgaro el array sería este: var[0]=2, var[1]=16 Si sumamos esos valores (2 + 16) nos daría 18 y si convertimos a binario el dieciocho resultará: 010010
Sintaxis MySQL de modificación de registros
La sintaxis MySQL para las sentencia de modificación de registros de una tabla puede contener las siguientes cláusulas que al igual que ocurría en en casos anteriores pueden tener categoría de obligatorias u opcionales. La secuencia en la que deben estar indicadas en la sentencia es idéntica al orden en que están descritas aquí. UPDATE Tiene carácter obligatorio, debe ser la primera palabra de la sentencia e indica a MySQL que pretendemos realizar una modificación. LOW_PRIORITY Es opcional e indica a MySQL que espere para realizar la actualización a que termine las consultas del fichero (en el caso de haber alguna en proceso). IGNORE Es opcional. Si se incluye en una sentencia el comando UPDATE no se interrumpe si aparece un conflicto de clave duplicada en uno de los registros. Si no se incluye, el proceso de modificación se interrumpe en el momento en que encuentre un conflicto de clave duplicada. Tanto con ignore como si esa cláusula no se efectúan NUNCA modificaciones en el caso de duplicidad de clave. tabla Es obligatoria y debe contener el nombre de la tabla en la que pretendemos efectuar las modificaciones. SET Tiene carácter obligatorio y debe preceder a las definiciones de campo y valor. campo1 = valor1 Es obligatoria al menos una definición. Indica el nombre del campo a modificar (campo1 y el valor que se asignará a ese campo.
Si se pretende modificar más de un campo se repetirá esta definición tantas veces como sea necesario, separando cada una de ellas por una coma. WHERE Es un campo opcional y su comportamiento es idéntico a señalado en al mencionar el proceso de consultas. ORDER BY Tiene idéntica funcionalidad a la descrita al referirnos a consultas
Sintaxis MySQL para borrado de registros
La sintaxis MySQL para las sentencia de borrado de registros de una tabla puede contener las siguientes cláusulas que al igual que ocurría en en casos anteriores pueden tener categoría de obligatorias u opcionales. La secuencia en la que deben estar indicadas en la sentencia es idéntica al orden en que están descritas aquí. DELETE Tiene carácter obligatorio, debe ser la primera palabra de la sentencia e indica a MySQL que pretendemos borrar uno o varios registros. LOW_PRIORITY Es opcional e indica a MySQL que espere para realizar la actualización a que termine las consultas del fichero (en el caso de haber alguna en proceso). FROM Tiene carácter obligatorio y debe preceder a la definiciÓn de la tabla en la que se pretende eliminar registros. tabla Es obligatoria y debe contener el nombre de la tabla en la que pretendemos efectuar el borrado o eliminación de registro. WHERE Es un campo opcional y su comportamiento es idéntico a señalado en al mencionar el proceso de consultas. LIMIT n La opción LIMIT es opcional y propia de MySQL. Su finalidad es limitar el tiempo de ejecución del comando DELETE ya que cuando está activada devuelve el control al potencial cliente después de borrar n registros con lo que en procesos de borrados muy largos (ficheros de gran tamaño) no obliga al potencial cliente a esperar a borrado total para proceder a la consulta de la tabla. Cuando se utiliza esta opción, la sentencia DELETE debe repetirse hasta que el número de registros pendientes de borrado sea inferior al valor de n. Optimización de tablas Cuando se ejecuta la sentencia DELETE -pese a que son eliminados los valores de los campos- se conservan las posiciones de los registros borrados con lo cual no se reduce el tamaño de la tabla.
Esas posiciones de registro serán utilizadas por MySQL para escribir los registros que se vayan añadiendo después del proceso de borrado. Para eliminar esos registros vacios y reducir el tamaño de una tabla, MySQL dispone de una sentencia que es la siguiente: OPTIMIZE TABLE tabla Esta sentencia -que debe usarse después de un proceso de borrado amplio- defragmenta la tabla eliminando los registros inutilizados por el proceso DELETE, con lo que logra una reducción del tamaño de la tabla a su dimensión óptima..
Presentación de JavaScript
Para los creadores de sitios Web, la evolución de HTML ha sido una bendición no exenta de controversia. En los primeros días de la WWW, HTML era bastante simple, y bastante fácil de aprender casi todo lo que se necesitaba saber para agrupar páginas Web.
Cuando creció la Web, también crecieron las aspiraciones de los diseñadores, y su demanda de mayor control sobre la página obligó a HTML a cambiar y hacerse más complejo.
Como la Web es un medio dinámico, los diseñadores también querían que sus páginas interaccionaran con el usuario, y pronto resultó evidente que HTML era insuficiente para atender esta demanda. Netscape inventó JavaScript para controlar el navegador y añadir brillantez e interactividad a las páginas Web.
Desde su creación, JavaScript ha evolucionado mucho. En este capítulo aprenderemos lo que es JavaScript (y lo que no es), qué puede hacer (y lo que no) y algunos de los fundamentos de este lenguaje.
Puntos importantes del lenguaje
JavaScript es un lenguaje orientado a objetos. ¿Qué significa esto?
Objetos
Primero, pensemos en los objetos. Un objeto es una cosa de cualquier clase. Un gato, un perro y una bicicleta son objetos en el mundo físico. Los objetos con los que trata en JavaScript en los navegadores Web son ventanas, formularios y lo elementos de los formularios, como botones y las casillas de verificación.
Como hay más de un gato, o más de una ventana, es aconsejable asignarles un nombre. Aunque referirse a sus mascotas como gato1 y gato2.
Propiedades
Los objetos tienen propiedades. Un gato tiene pelo, la computadora teclado y la bicicleta tiene ruedas. En el mundo de JavaScript, una ventana tiene un título, y un formulario puede tener una casilla de verificación.
Las propiedades pueden modificar a los objetos, y la misma propiedad se puede aplicar a objetos completamente diferentes. Supongamos que tiene una propiedad llamada vacío. Puede utilizar vacío donde quiera que convenga, tanto para decir que el estómago del gato esta vacío, como para decir que su taza esta vacía.
Observe que el teclado de la computadora y las ruedas de una bicicleta no son sólo propiedades; son también objetos, que a su vez pueden tener propiedades. Así que los objetos pueden tener subobjetos.
Métodos
Las cosas que pueden hacer los objetos se llaman métodos. Los gatos ronronean, las computadoras se rompen y las bicicletas ruedan. Los objetos de JavaScript también tienen métodos: click() para los botones, open() para las ventanas y el texto puede seleccionarse gracias al método selected(). Los paréntesis indican que nos estamos refiriéndonos a un método, y no a una propiedad.
Manipulación de eventos
Los eventos son acciones que el usuario realiza mientras visita una página. Enviar un formulario y mover el ratón sobre una imagen son dos ejemplos de eventos.
JavaScript trabaja con eventos utilizando comandos denominados manejadores de eventos. Una acción del usuario en la página dispara un manejador de eventos, en la tabla siguiente encontrara algunos de los eventos.
Al escribir un script, no es necesario anticipar toda acción posible que pueda efectuar el usuario, basta con aquellas en las que quiera que suceda algo especial. Por ejemplo, su página se cargará bien sin necesidad de un manejador de eventos onLoad.
onClick
Se produce cuando el usuario efectúa un click en un botón izquierdo del ratón sobre algún elemento de un formulario o un enlace.
onMouseOver y onMouseOut
El evento onMouseOver sucede cada vez que el cursor del ratón pasa por encima de un elemento de la página, mientras que el evento onMouseOut sucede cuando se deja de seleccionar ese elemento.
onLoad y onUnLoad
El evento onLoad es aquel que se produce cuando un navegador carga un documento HTML o una imagen. Este evento se utiliza dentro de la etiqueta <BODY> del documento HTML o dentro de la etiqueta <FRAMESET> en el supuesto de estar trabajando con frames; onUnLoad es el evento opuesto a onLoad. Su misión consiste en ejecutar un script cuando la página Web actual se descarga, ya sea porque se accede a otro Web o bien porque se utilizan los botones de avanzar y retroceder.
onChange
Se produce cuando se modifica el valor de un elemento select, text o textarea en un formulario de HTML. Para que el evento funciones tiene que cambiar de elemento en el formulario, es decir, si estamos introduciendo datos en una casilla de texto, el evento onChange no se activará hasta que no pasemos a otra casilla. Esta es sin duda una interesante opción para validar la entrada de datos en el formulario.
onSubmit
Este evento se encarga de ejecutar un determinado código de JavaScript al realizarse el envío de un formulario. El ejemplo mas claro de utilización de este evento es evitar que un formulario sea enviado si determinadas condiciones no son cumplidas.
onFocus y onBlur
EL evento onFocus detecta la entrada (focus) en un elemento de un formulario, por ejemplo un text o window; mientras que onBlur actúa de manera contraria, es decir, detecta la pérdida del focus. La utilización del evento onFocus puede provocar un ciclo infinito que bloque nuestra computadora.
onSelect
Este evento hace que se ejecute un script cuando se selecciona texto dentro de un elemento de un formulario, ya sea una casilla de texto o de área de texto.
onAbort
Se produce cuando se bloquea la carga de una imagen, pulsando por ejemplo el botón “Detener” del navegador.
onReset
Se produce cuando se pulsa un botón de reset en un formulario. Este evento puede servir, por ejemplo, para advertir al usuario antes de efectuar un reset del formulario.
onKeyDown, onKeyUp y onKeyPress
Estos eventos se accionar al utilizar el teclado.
onKeyDown: se ejecuta cuando se pulsa una tecla
onKeyUp: se ejecuta cuando se deja de pulsar una tecla
onKeyPress: se ejecuta cuando se mantiene pulsada una tecla
onMouseDown, onMouseMove y onMouseUp
Estos eventos permiten detectar la utilización del ratón.
onMouseDown: evento que se genera cuando el usuario pulsa un botón del ratón
onMouseMove: evento que se genera cuando el usuario mueve el cursor del ratón
onMouseUp: evento que se genera cuando se deja de pulsar un botón del ratón
Estos eventos pertenecen a los objetos Button, document y link.
onMove y onResize
El evento onMove se genera cuando el usuario mueve una ventana o frame de a pantalla principal del navegador. Cuando un usuario modifica el tamaño de la ventana o del frame actual, se genera un evento onResize. Estos eventos están incorporados en los objetos window y frame.
ondblclick
Indica que se ha hecho doble clic en el elemento
Iniciando
Dónde colocar los scripts.
Los guiones se pueden colocar en uno de de dos sitios posibles de la página HTML: entre las etiquetas <head> y </head> (encabezado) o entre las etiquetas <body> y </body> (cuerpo).
Hay una etiqueta contenedora HTML que denota guiones, y que, es previsible, empieza por <script> y termina por </script>.
Para escribir su primer guión.
1. <script language="Javascript" type="text/javascript">
He aquí una etiqueta de apertura de guión. Le comunica al navegador que espere JavaScript en lugar de HTML. El atributo languaje=”JavaScript” identifica en el
navehgador qué lenguaje de guiones se está utilizando, y el atributo type="text/javascript" le dice al navegador que el guión está en formato de sólo texto, organizado como JavaScript.
2. document.write("Hola, Informática!")
Ésta es su primera línea de JavaScript, la cual toma el mando de la ventana de documento y escribe “Hola, Informática” en ella, como se aprecia en la siguiente figura:
3. <script>
Con esto se termina el guión JavaScript y se indica al navegador que quede a la espera de encontrar nuevamente código HTML.
Comentarios
Es una buena idea acostumbrarse a añadir comentarios a los guiones. Se hace insertando comentarios que JavaScript no interpreta como comandos de guión. Aunque su guión le puede parecer suficientemente claro al escribirlo, si vuelve a él un par de meses después puede que ya no encuentre claro lo que había programado. Los comentarios le ayudarán a explicar porqué resolvió un problema de un modo determinado. Otra razón para comentar un guión es la de ayudar a otras personas que quieran volver a utilizar y modificar su guión.
Para comentar un guión.
1. /* Los comentarios que incluyen muchas líneas
se escribe entre los caracteres diagonal asterisco
y se cierran con asterisco diagonal */
3. // Si solo escribirá una línea de comentario se ponen dos diagonales
Como avisar a un usuario
Uno de los usos principales de JavaScript es el de proporcionar retroalimentación a los que navegan por su sitio. Puede crear una ventana de alerta que se abrirá y dará a los usuarios la información imprescindible sobre su página.
En un ejemplo, podemos captar la atención del usuario con alarmas, o banner muy animados, pero no sería buena idea. En lugar de eso utilizaremos una alerta de JavaScript y mostrara una ventana de alerta bonita y amigable.
Para avisar al usuario.
alert(“Hola, que honda, como estas”)
Tan solo con colocar el texto para que aparezca la ventana dentro del método alert() y entre comillas.
Confirmación del usuario
Al tiempo que es útil proporcional información al usuario, en ocasiones también necesitará obtener información a cambio. El siguiente script muestra como averiguar si el usuario acepta o rechaza una pregunta. Este guión también introduce la idea de la condición, que es la parte donde el guión coloca una pregunta o prueba y ejecuta diferentes acciones en función de los resultados de la prueba dicha pregunta.
Sobre las sentencias condicionales
Las sentencias condicionales se dividen en tres partes: la sección if (si), donde se
realiza la prueba, la sección de verdadero, donde se efectúa la parte de guión en caso de afirmar, y la parte de falso (else) en donde se ejecuta la acción de rechazo. El
contenido de lo que se está comprobando dentro de la sección if está entre
paréntesis, y el contenido de las otras dos secciones está cada uno de ellos colocado entre llaves. Si la cada una de las secciones solo contiene una línea de ejecución entonces las llaves pueden omitirse.
Para confirmar una elección
1. if(confirm("¿Estas seguro de hacer esto?"))
{
El método confirm() toma un parámetro (la pregunta que se va ha realizar) y devuelve verdadero (true) o falso (false), en función de la respuesta del usuario.
2. alert("Seguro, adelante")
Si el usuario hace clic en el botón de aceptar, confirm() devuelve verdadero y la
ventana de alerta muestra el mensaje “Seguro, adelante”, como puede ver, ésta es la sección “entonces” del código, incluso aunque no exista un operador “si no” en JavaScript. Las llaves sirven como delimitadores de la zona “entonces”
3. }
Esta llave ciera la parte que se ejecuta cuando confirm() devuelve verdadero
4. else
{
Aquí empieza la sección que solo ejecuta cuando el usuario hace clic en el botón de Cancelar.
5. alert("Mejor no")
Sin embargo, si el usuario hace clic en el botón Cancelar, confirm() devuelve falso y se visualiza, el mensaje “Mejor no”.
6. }
Esta llave da por finalizada la sentencia condicional if-else completa.
<script language="Javascript" type="text/javascript">
if (confirm("¿Estas seguro de hacer esto?"))
{
alert("Seguro, adelante")
}
Verdadero Falso
else
{
alert("Mejor no")
}
</script>
Cómo interrogar al usuario
En ocasiones, en lugar de formular una simple pregunta del tipo “Si-No”, necesitará una respuesta más específica. Para esas ocasiones el siguiente guión nos permite hacer una pregunta (con una respuesta predeterminada) y escribir una respuesta.
res = prompt("¿Cómo te llamas?","")
Al método prompt() se le pasan dos fragmentos de información (oficialmente conocidos como parámetros): la pregunta que se le formulará al usuario y la respuesta predeterminada. Este método devolverá la respuesta del usuario o el valor nulo; esto último sucede cuando el usuario hace clic en Cancelar; cuando no hay respuesta predeterminada y el usuario hace clic en Aceptar; o cuando el usuario borra la respuesta predeterminada y hace clic en aceptar.
En algunos navegadores, si omite el segundo parámetro (la respuesta predeterminada), todo seguirá funcionando correctamente. Sin embargo, en otros, la ventana con la pregunta aparecerá mostrando el valor predeterminado undefined, aunque sea una cadena vacía.
res = prompt("¿Cómo te llamas?","")
if (res)
{
alert("Te llamas: "+res)
}
else
{
alert("No respondiste la pregunta")
}
Como redireccionar al usuario
No sólo puede verificar la existencia de JavaScript también puede comprobar la versión de JavaScript que tiene el usuario. El siguiente guión muestra cómo redireccionar, o enviar a los usuarios a otra página, dependiendo de la versión de JavaScript que soporte el navegador.
Para redireccionar a un usuario
1. <script language="Javascript1.5" type="text/javascript">
El atributo languaje de la etiqueta script pemite especificar la versión mínima de
JavaScript que se necesita para que el navegador pueda ejecutar el guión. Ene este caso, el navegador necesita tener JavaScript 1.5 o posterior. Si el usuario no dispone de un navegador adecuado, verá una ventana como se muestra en la figura.
2. window.location="bienvenido.html"
Esta línea restablece la ubicación (location) apropiada de la ventana actual. En otras
palabras, indica al navegador que cambie la página actual por la página especificada, en este caso bienbenido.html
3. </script>
La etiqueta de cierre del guión.
<script language="Javascript1.5" type="text/javascript">
window.location="bienvenido.html"
</script>
Redireccionar a un usuario con una liga.
Cuando un usuario carga el guión del ejemplo anterior, va a una página inicial, y luego, dependiendo del guión, el navegador carga automáticamente otra página. Este método siempre deja ver al usuario al menos un poco de la primera página, antes de ser enviado a la segunda. Este comportamiento no es muy elegante, así que el siguiente guión, le muestra un método más adecuado de efectuar el redireccionamiento, incrustando la redirección en un vínculo. Cuando hace clic en el vínculo, deberá ser dirigido a una de dos páginas posibles, dependiendo si tiene o no JavaScript.
Para realizar la redirección
<a href="sinjavascript.html" onclick="window.location='bienvenido.html';return false">
Bienvenido al Nuevo sitio</a>
El código JavaScript está completamente incrustado en la etiqueta de vínculo. Si el usuario no tiene JavaScript y hace clic en el vínculo, seguirá la ruta de acceso href habitual, y acabará en otra página Web.
Lo novedoso es que se ha efectuado una redirección sin que el usuario sepa lo que ha pasado- está en una de las dos páginas posibles, dependiendo de lo que disponga tener.
Trabajando con imágenes
Uno de los mejores usos de JavaScript es el de añadir interés visual a las páginas Web animando gráficos. De eso trata este módulo. Hacer las imágenes de las páginas Web cambien cuando el usuario mueve el ratón sobre ellas, haciendo por tanto que la página reaccione con el usuario, es uno de los trucos más comunes.
Imágenes de sustitución
La idea que subyace en las imágenes de sustitución es simple. Tenemos dos imágenes. La primera, o imagen original, se carga y se visualiza con el resto de la página Web. Cuando el usuario mueve el ratón sobre la imagen original, el navegador la cambia rápidamente por la segunda, o imagen de sustitución, creando la ilusión de movimiento o animación.
<a href="siguiente.html"
onmouseover="document.arrow.src='images/sobre.gif'"
onmouseout="document.arrow.src='images/reposo.gif'">
<img src="images/reposo.gif" width="147" height="82"
border="0" name="arrow" alt="flecha" /></a>
Para crear una imagen de sustitución
1. <a href=" siguiente.html"
El vínculo empieza especificando dónde irá el navegador cuando el usuario haga clic en la imagen; en este caso, irá a la página siguiente.html
2. onmouseover="document.arrow.src='images/sobre.gif'"
Cuando el usuario mueve el ratón sobre la imagen, la imagen de sustitución sobre.gif, que esta almacenada en la carpeta de images, se escribe en la ventana del documento
3. onmouseout="document.arrow.src='images/reposo.gif'"
Luego, cuando el ratón se retira, se recupera de nuevo la imagen reposo.gif
4. <img src="images/reposo.gif" width="147" height="82"
border="0" name="arrow" alt="flecha" />
El resto del vínculo de la imagen define el origin de la imagen original en la página, y cierra la etiqueta del vínculo.
Imágenes de sustitución avanzadas
Para crear la ilusión de movimiento, necesita asegurarse de que la imagen de sustitución aparezca inmediatamente, sin retraso alguno al ser cargada desde el servidor, para hacerlo, se utiliza JavaScript para precargar todas las imágenes en la memoria caché del navegador y colocar las imágenes en las variables del guión. Entonces, cuando el usurario mueve el ratón sobre una imagen, el guión cambia una variable que contiene una imagen por una segunda variable que contiene la imagen de sustitución.
Para crear una imagen de sustitución
if (document.images) {
sobre = new Image
reposo = new Image
sobre.src = "images/sobre.gif"
reposo.src = "images/reposo.gif"
}
Este código comprueba si el navegador entiende los objetos de imagen. Si es así, el código crea sobre y reposo, dos objetos de imagen separados. Luego, mediante la propiedad src de los dos objetos con los archivos gif.
else {
arrowRed = ""
arrowBlue = ""
document.arrow = ""
}
Éste es el código que dice a los navegadores antiguos que hacer. Para evitar los mensajes de error en dichos navegadores, hay que crear algunas variables de restricción, esto es, variables que no harán nada, salvo crearse y permanecer vacías.
<a href="next.html"
onmouseover="document.arrow.src=sobre.src" onmouseout="document.arrow.src=reposo.src"
El resto de la imagen de sustitución se manipula en la etiqueta de ancla.
Imágenes de sustitución en varias secciones de la página
Es improbable que sólo se conforme con una imagen de sustitución en una página. Como las imágenes se utilizan con frecuencia como elementos de la interfaz de usuario de una pagina, es probable que quiera disponer de más de un botón o menú que haga uno de este efecto. Para utilizar más de una imagen de sustitución, tiene que añadir un poco de código extra.
Para colocar varias imágenes de sustitución en una página
1. boton1a = new Image
boton1b = new Image
boton2a = new Image
boton2b = new Image
Mientras que la tarea anterior tuvimos que crear dos objetos para la imagen nueva, en este ejemplo tenemos que crear cuatro. En general, deberá crear dos objetos de imagen nuevos por cada imagen de sustitución. Por tanto, en este paso está estableciendo variables para dos imágenes de sustitución.
2. boton1a.src = "images/boton1a.gif"
boton1b.src = "images/boton1b.gif"
boton2a.src = "images/boton2a.gif"
boton2b.src = "images/boton2b.gif"
Aquí establecemos el atributo src de cada objeto de imagen nuevo al nombre del archivo gráfico con el que está asociado.
3.
boton1a = ""
boton1b = ""
boton2a = ""
boton2b = ""
document.boton1 = ""
document.boton2 = ""
Cómo en la tarea anterior, para evitar errors en los navegadores antiguos, definimos variables ficticias, con una cadena vacía como contenido.
<a href="pagina1.html"
onmouseover="document. boton1.src= boton1b.src"
onmouseout="document. boton1.src= boton1a.src">
<img src="images/ boton1a.gif" border="0"
name="boton1" alt="Boton 1" /></a>
<a href="pagina1.html"
onmouseover="document. Boton2.src= boton2b.src"
onmouseout="document. Boton2.src= boton2a.src">
<img src="images/ boton1a.gif" border="0"
name="boton2" alt="Boton 2" /></a>
Imagen de sustitución desde una liga
En ejemplos anteriores, el usuario dispara la imagen de sustitución moviendo el ratón por encima de una imagen. Pero también puede hacer que se dispare una imagen de sustitución cuando el usuario apunte a un vínculo de texto. Lo único que tiene que hacer es color un vínculo de texto dentro de la etiqueta <a ref>
Para disparar una imagen de sustitución desde un vínculo
<script language="Javascript" type="text/javascript">
<!-- Hide script from old browsers
if (document.images) {
flecha1= new Image
flecha2 = new Image
flecha1.src = "images/ flecha1.gif"
flecha2.src = "images/ flecha2.gif"
}
else {
flecha1 = ""
flecha2 = ""
document.flecha = ""
}
</script>
<a href="next.html"
onmouseover="document.flecha.src=flecha2.src" onmouseout="document.flecha.src=flecha1.src">
Siguiente pagina</a>
<img src="images/flecha1.gif" name="flecha" alt="flecha" />
Observe que el vínculo de texto que dice “Siguiente página” está dentro de la
etiqueta de ancla, lo que lo convierte en disparador de onmousover y de onmouseout.
Hemos sacado la etiqueta img de la etiqueta de vínculo.
Como trabajar con varias imágenes de sustitución
Hasta ahora hemos visto cómo pasando el ratón por encima de una sola imagen de sustitución. Pero también puede dispararse una imagen de sustitución con varias imágenes diferentes. Puede resultar muy útil cuando tiene varias imágenes que quiere resaltar. Desplazándose sobre cada una de las imágenes aparecerá la descripción de esa imagen.
Para trabajar con múltiples vínculos cambien una sola imagen de sustitución
if (document.images) {
vera= new Image
verb = new Image
verc = new Image
bg= new Image
vera.src = "images/imagen1.gif"
verb.src = "images/imagen2.gif"
verc.src = "images/imagen3.gif"
bg.src = "images/bg.gif"
}
else
{
vera= ""
verb= ""
verc= ""
bg= ""
document.textField = ""
}
<a href="pagina1.html"
onmouseover="document.textField.src=vera.src" onmouseout="document.textField.src=bg.src">
<img src="images/boton1.gif" border="0">
</a>
Esta línea manipula el botón superior. El manejador de eventos onmouseover colocal el contenido de vera.src en document.textfield.src, y cuando el ratón no está sobre la imagen, sustituye la descripción por una imagen de fondo vacía.
<img src="images/bg.gif" name="textField"/>
Esta es la etiqueta img de la descripción de la imagen, con el nombre textfield, y muestra la clave de este guión. Las etiquetas ancla hacen referencia al mismo objeto (document.textfield.src), no a objetos distintos. Por eso todas cambian el mimso objeto.
Uso de funciones para trabajar con imágenes de sustitución
Los ultimos ejemplos empleaban una gran cantidad de código casi idéntico. Para las tareas repetitivas son candidatas perfectas para las funciones. Una vez escrito el codigo que realiza la tarea repetitiva, sólo tiene que llamar a la función y pasarle los datos que necesite para realizar su tarea. El siguiente script realiza la misma tarea, pero utiliza una función para que el código sea un poco más fluido.
Para utilizar una función con varias imágenes de sustitución
function cambiaimg(objimg,nuevo)
{
if (document.images)
{
document[objimg].src= eval(nuevo + ".src")
}
}
Este primer paso crea la función cambiaimg que tiene los parámetros, objimg y nuevo.
Luego, empieza una comprobación condicional, document.images. Esto elimina la
necesidad de otra sentencia en la inicialización de la variable original, si el navegador no soporta imágenes, nunca sucede nada. La siguiente línea establece document[objimg].src al resultado de la variable nuevo concatenando con .src,
utilizando el método eval para convertir la cadena de texto en un objeto.
Manipulación de Formularios
Cada vez que necesite recopilar en sus sitios Web información de los usuarios, tendrá que utilizar un formulario.
Los formularios pueden contener la mayoría de los elementos de una interfaz gráfica habitual, como campos de entrada, botones de radio, casillas de verificación, menús desplegables y listas de entrada. Además, los formularios HTML pueden contener campos de contraseña, para proteger al usuarios de los entrometidos.
Una vez rellenado el formulario, un clic en el botón ENVIAR envía la información al servidor Web, donde una aplicación de server, es decir un script que se ejecuta en el servidor Web, interpreta los datos y actúa sobre ellos. A menudo, los datos se almacenan luego en una base de datos para su uso posterior. Es útil que asegurarse que los datos que introduce el usuario están “limpios”, es decir, son exactos y según el formato correcto, antes de que se almacenen en el servidor.
Verificación de contraseñas
Cuando le pida al usuario que introduzca una contraseña que se solicitará en el futuro, querrá que la escriba dos veces, para asegurarse de que no se confundió al escribirla. Si las dos contraseñas coinciden, entonces el script se lo comunica al usuario con una ventana de alerta.
Para verificar las contraseña de entrada.
function validForm(passForm) {
if (passForm.passwd1.value == "") {
alert("Debes de introducir una contraseña")
passForm.passwd1.focus()
return false
}
Tras definir la función comprobamos que el valor del campo passwd1 está vacío, como muestra la expresión ==””, si es así, desplegamos una ventana de alerta que solicite una entrada, devuelva el cursor al campo passwd1 y evalué la función como falsa.
if (passForm.passwd1.value != passForm.passwd2.value) {
alert("Las contraseñas no coinciden")
passForm.passwd1.focus()
passForm.passwd1.select()
return false
}
return true
Si el valor de passwd1 no es igual al valor de passwd2, es necesaria otra ventana de alerta. Esta vez, debemos regresar al campo passwd1 y seleccionar su contenido
presumiblemente malo, y devolver false para la función. Si la prueba tiene éxito, el script devuelve el resultado verdadero.
onsubmit="return validForm(this)"
El manejador de eventos onsubmit se ejecuta cuando el usuario envía el formulario, bien haciendo clic en el botón Enviar, bien abandonando el ultimo campo de texto de modo que el navegador lo entienda como un envío de formulario.
El formato de manejador de eventos funciona porque la función llamada devuelve como valor verdadero o falso. Si la función llamada devuelve verdadero las contraseñas coinciden, de modo que el formulario es enviado al servidor. Si la función devuelve falso, onsubmit determina que hay un error y detiene el envío del formulario. Esta capacidad de JavaScript permite capturar el error en el lado del cliente y el servidor nunca sabrá que el usuario hizo un intento.
Uso de imágenes como botones de envío.
A fin de mejorar la apariencia del formulario, puede utilizar una imagen para el botón encargado de enviar el formulario, en lugar de utilizar el botón HTML estándar. Utilizara JavaScript para controlar lo que ocurre una vez que el usuario ha hecho clic en la imagen de envío. El script necesita la adición de una función al script y la definición de una imagen a modo de botón de Enviar lo que se realiza con la etiqueta <a>.
Para utilizar una imagen a modo de botón Enviar.
function subForm() {
Empezamos con la función subforo(). Necesitamos esta función porque queremos enviar el formulario sólo si los datos introducidos por el usuario son correctos, que es lo que comprueba esta función.
if (validForm(document.myForm)) {
Estas líneas se aseguran de que el formulario es correcto, llamando a la función validForm que se define con anterioridad en el script. Si esta función devuelve verdadero, entonces se envía el formulario llamando al método document.myForm.submit()
<a href="javascript:subForm()"><img src=" submit.jpg" alt="submit"></a>
La etiqueta de ancla que llama a la función subforo, y la ruta de acceso de la imagen que representa al botón Enviar se especifica en el atributo src de la etiqueta.
Navegación seleccionar e ir.
Probablemente haya visto muchos ejemplos de menú de navegación estándar en la Web, es aquel donde se elige una opción de menú y luego se hace clic en un botón IR, que lo lleva su destino. A estos menús mejorados de JavaScript se les denomina menús seleccionar e ir, y son fáciles de crear, como se muestra a continuación.
Para crear un menú seleccionar e ir.
function jumpPage(newLoc) {
Primero, creamos la función jumpPage, a la que pasamos el valor newLoc.
newPage = newLoc.options[newLoc.selectedIndex].value
Comenzamos el código desde el interior de los corchetes y trabajamos hacia afuera. El objeto newLoc.selectedIndex será un número de 0 a 5 (porque hay seis opciones posibles en el menú; recuerde que JavaScript empieza a contar en cero.
if (newPage != "") {
window.location = newPage
}
Esta sentencia condicional primero verifica que newPage no es igual a nada (es decir, no está vacía). En otras palabras, si newPage tiene un valor, le dice a la ventana que vaya al URL especificado por la opción del menú elegida.
<body onload="document.myForm.newLocation.selectedIndex=0">
Al cargar la página el primer lugar, podemos estar seguros que la opción visualizada es “Seleccione un sitio”. Esto será cierto cuando la página se ha cargado primero en el navegador.
<select name="newLocation" onchange="jumpPage(this)">
<option selected="selected">Seleccione un sitio</option>
<option value="yahoo.com">Yahoo!!!</option>
<option value="elnorte.com">El NORTE</option>
<option value="google.com">goggle</option>
<option value="hotmail.com">HOTMAIL</option>
<option value="t1msn.com">t1MSN</option>
</select>
La etiqueta select crea el menú con el nombre newLocation. Cuando el usuario elige una opción del menú, el manejador de eventos onchange llama la función jumpPage, a la que pasa el valor this, que se convierte en el valor de newLoc. El valor del objeto this es el URL de la opción de menú elegida por el usuario, como se especifica en las sentencias option value de las líneas que se encuentran por delante de la etiqueta <select>.
Modificación dinámica de lo menús.
A menudo resulta útil ofrecer al usuario la opción de entradas a través de menús desplegables, y ser capaces de cambiar el contenido de uno o más menús desplegables en función de lo que elige el usuario en otro menú desplegable. Seguramente habrá visto esto en sitios Web que le piden elegir un menú desplegable el país en donde vive, y después rellenan un segundo menú con loas estados o las provincias basandose en la elección realizada. Cuando el usuario hace clic en el mes, el script rellena el segundo menú desplegable con el número correcto de días del mes seleccionado.
Para cambiar los menús dinámicamente.
monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31)
Este array nuevo contiene doce valores para los doce meses, con el número correcto de días para cada mes.
function populateDays(monthChosen) {
monthStr = monthChosen.options[monthChosen.selectedIndex].value
La función populateDays es llamada cada vez que el usuario selecciona una opción nueva en el menú de meses; el objeto seleccionado se pasa a la función.
if (monthStr != "") {
theMonth=parseInt(monthStr)
Si el valor de monthStr es “”, entonces el usuario ha seleccionado la palabra Mes en el menú, en lugar de seleccionar el nombre de un mes. Lo que estas líneas hacen es comprobar si el valor de monthStr es distinto de “”, y si esta condición es verdadera, entonces monthStr se convierte en un número con el método parseInt, estableciéndose la variable theMonth al resultado.
document.myForm.days.options.length = 0
for(i=0;i<monthDays[theMonth];i++) {
document.myForm.days.options[i] = new Option(i+1)
}
Empezamos la modificación del menú de días estableciendo su longitud a cero. Esto limpia lo que hubiera ocurrido con anterioridad, de modo que empezamos desde el principio. El bucle simplemente se repite tantas veces como indica el número de días del mes elegido, añadiendo al menú una opción nueva por cada día la opción se pasa como i+1, de modo que obtendremos 1 a 31, en lugar de 0 a 3.
<select name="months" onchange="populateDays(this)">
<option value="">Mes</option>
<option value="0">Enero</option>
<option value="1">Febrero</option>
<option value="2">Marzo</option>
<option value="3">Abril</option>
<option value="4">Mayo</option>
<option value="5">Junio</option>
<option value="6">Julio</option>
<option value="7">Agosto</option>
<option value="8">Septiembre</option>
<option value="9">Octubre</option>
<option value="10">Noviembre</option>
<option value="11">Diciembre</option>
</select>
Cuando el usuario realiza una elección en el menú de meses, llamamos a la función populateDays.
<select name="days">
<option>Day</option>
</select>
Estas líneas establecen el valor inicial del menú de días, la pabla Día. En este punto, no hay valores numéricos en el menú.
Formularios y expresiones regulares
Las expresiones regulares son una sorprendente e impactante forma de validar y dar formato a las cadenas existentes. Mediante el uso de expresiones regulares, con escribir una o dos líneas de código JavaScript podrá cumplir con varias tareas, cosa que de otro modo requeriría docenas de líneas.
Una expresión regular (regExp) es un patrón que se escribe utilizando símbolos especiales, que describen una o más cadenas de texto. Utilice entonces expresiones regulares para buscar coincidencias entre patrones de texto, de modo que el script que utiliza pueda reconocer y manipular textos. Al igual que sucede en una expresión aritmética, puede crear una expresión regular utilizando operadores, en este caso, los operadores trabajan con textos, en lugar de con números.
Modificadores de las expresiones regulares.
i Sin distinción entre mayúsculas y minúsculas
g Correspondencia global. Encuentra todas las correspondencias de las
cadenas, en vez de sólo la primera.
M Correspondencia de líneas múltiples.
Indicadores de posición
^ Indica el inicio.
$ Indica el final.
Códigos de escape
Dada la sintaxis de los literales de regexp, podríamos preguntarnos cómo especificamos una cadena que incluya barras, como una dirección de internet.
\f Avance de página \+ Signo de mas
\n Nueva línea \? Interrogación
\r Retorno de Carro \| Barra horizontal (pipe)
\t Tabulador \( Paréntesis apertura
\v Tabulador vertical \) Paréntesis cerrado
\/ Barra inclinada / \[ Corchete apertura
\\ Barra invertida \ \] Corchete cerrado
\. Punto “.” \{ Llave apertura
\* Asterisco “*” \} Llave cerrado
Cuantificadores de repetición
* Coincide con el elemento anterior cero o más veces
+ Coincide con el elemento anterior una o mas veces
? Coincide con el elemento anterior cero o una vez
{m,n} Coincide con el elemento anterior un mínimo de m veces, pero no más
de n veces.
{m, } Coincide con el elemento anterior m o más veces
{m} Coincide con el elemento anterior exactamente m veces
Ejemplos
Variable=/ab*c/
Resultados
“ac”
“abc”
“abbbbbbbbbbbbbbbbbbbc”
Variable=/ab+c/
Resultados
“abc”
“abbbbbbbbbbbc”
“ac” No coincide debido a que debe de aparecer la “b” al menos una vez.
Variable=/ab?c/
Resultados
“ac”
“abc”
Pero no “abbc”
Variable=/a*b{5}c/
Especificaría el patrón de cero o más veces a, seguido exactamente por cinco caracteres b y luego una letra c.
Variable=/ab{5,7}c/
Crearía una expresión regular para buscar correspondencias de una a seguida de entre cinco y siete caracteres b luego seguido de una letra c.
Variable=/ab{3,}c/
Crearía una expresión para buscar correspondencias de una a seguida de tres o mas letras b seguidas de un carácter c.
Creación de Patrones.
El primer conjunto de caracteres especiales en el que podemos pensar es en los indicadores de posición, caracteres que dan información sobre la posición en la que tiene que empezar un patrón.
Variable=/^http/;
Concordará solamente con cadenas que empiecen por http.
Variable.test(“El protocolo es http”);
Devuelve FALSE, debido a que no empieza con http.
El carácter $ actúa a la inversa:
Variable=/http$/;
Concordará solamente con cadenas que terminen con “http”. Se pueden utilizar los dos indicadores de posición de forma combinada para asegurar una correspondencia exacta del patrón deseado
Variable=/^http$/
Esta expresión regular buscará correspondencias con la cadena “http”.
Agrupamiento y clases de caracteres.
[caracteres] Cualquier carácter indicado explícitamente o como un rango entre
paréntesis.
[^caracteres] Cualquier carácter que no sea ninguno de los indicado entre los
paréntesis representados explícitamente o como un rango.
. Cualquier carácter excepto el de nueva línea.
\w Cualquier carácter de palabra
Lo mismo que [a-zA-Z0-9_]
\W Cualquier carácter que no sea palabra.
Lo mismo que [^a-zA-Z0-9_]
\s Cualquier carácter de espacio en blanco.
Lo mismo que [ \t\n\r\f\v]
\S Cualquier carácter que no sea espacio en blanco.
Lo mismo que [^ \t\n\r\f\v]
\d Cualquier dígito.
Lo mismo que [0-9]
\D Cualquier cosa que no sea dígito.
Lo mismo que [^0-9]
\b Un límite de palabra. El espacio vacío entre \w y \W
\B Un límite de caracteres que no sean palabras. El espacio vacío
entre caracteres de palabra.
[\b] Un carácter de retorno.
Validar un nombre de usuario.
Variable=/^[a-z][a-z0-9_-]*/
Busca correspondencias por un nombre de usuario sin distinguir entre mayúsculas y minúsculas que empezará con un carácter alfabético seguido de cero o más caracteres alfanuméricos, así como caracteres de subrayado y guiones.
Sub-expresiones.
Aparte de agrupar secuencias de caracteres como una unidad, los paréntesis en las expresiones regulares crean subexpresiones en la cadena sobre la que actúan. Cuando se halla correspondencia, las subexpresiones entre paréntesis pueden ser referidas de forma individual utilizando las propiedades estáticas del propio objeto RegExp.
Cliente=”Angel 555-1212”
Patron=/(\w+) ([\d-]+)/
Patron.test(Cliente)
Las subcadenas alas que se accede de esta manera se cuentan de izquierda a derecha, empezando con $1 y terminando en $9 generalmente.
Cliente=”Angel 555-1212”
Patron=/(\w+) ([\d-]+)/
Patron.test(Cliente)
Alert(“$1=”+RegExp.$1 + “\n$2=”+RegExp.$2).
Objeto RegExp
Ahora que sabemos cómo formar expresiones regulares es hora de ver cómo utilizarlas. Hay una variedad de propiedades y métodos relacionados con el objeto RegExp que pueden utilizarse para comprobar y analizar los resultados de una expresión regular aplicada a una porción de datos.
Test() es un método que devuelve un valor lógico que indica si el argumento de cadena dado coincide con la expresión regular.
Patron=new RegExp(“a*bbbc”,”i”)
Alert(patron.test(“1212c”)) //Falso
Alert(patron.test(“aaaabBbcded”)) //Verdadero
