Fundamentos de Desarrollo Web

Conceptos bsicos
El lenguaje PHP es un lenguaje de programacin de estilo clsico, con esto quiero decir
que es un lenguaje de programacin con variables, sentencias condicionales, bucles,
funciones.... No es un lenguaje de marcas como podra 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 podra ser una base de datos. El programa PHP es ejecutado en el servidor
y el resultado enviado al navegador. El resultado es normalmente una pgina HTML
pero igualmente podra 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 pginas
PHP funcionen, el servidor donde estn alojadas debe soportar PHP.
Nuestro primer PHP
La ventaja que tiene PHP sobre otros lenguajes de programacin que se ejecutan en el
servidor (como podran 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 cdigo
HTML y en rojo el cdigo 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 cdigo 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 lnea, la variable $i contiene el nmero de lnea que se est escribiendo.
No importa si no entiende muy bien el programa este ejemplo solo es para ilustrar
como se intercala el cdigo HTML y el cdigo PHP.
Variables
Una variable es un contenedor de informacin, en el que podemos meter nmeros
enteros, nmeros decimales, carcteres... el contenido de las variables se puede leer y
se puede cambiar durante la ejecucin de una pgina PHP.
En PHP todas las variables comienzan con el smbolo del dlar $ y no es necesario
definir una variable antes de usarla. Tampoco tienen tipos, es decir que una misma
variable puede contener un nmero y luego puede contener carcteres.
<html>
<head>
</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 instruccin echo
hemos impreso el valor que contenan, insertando un salto de lnea 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 funcin con la instruccin global
nombre_variable;
Aritmticos
Los operadores de PHP son muy parecidos a los de C y JavaScript, si usted conoce
estos lenguajes le resultaran familiares y fciles de reconocer.
Estos son los operadores que se pueden aplicar a las variables y constantes numricas.
Operador Nombre
Ejemplo Descripcin
Suma
5+6
Suma dos nmeros
Resta
7-9
Resta dos nmeros
Multiplicacin 6 * 3
Multiplica dos nmeros
Divisin
4/8
Divide dos nmeros
Mdulo
7%2
Devuelve el resto de dividir ambos nmeros, 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>
</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>
Comparacin
Los operadores de comparacin son usados para comparar valores y as poder tomar
decisiones.
Operador Nombre
Ejemplo
==
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>
</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>
Devuelve cierto cuando:
Lgicos
Los operadores lgicos son usados para evaluar varias comparaciones, combinando los
posibles valores de estas.
Operador Nombre Ejemplo
Devuelve cierto cuando:
&&
(7>2) && (2<4)
Devuelve verdadero cuando ambas

condiciones son verdaderas.
And
(7>2) and (2<4)
Devuelve verdadero cuando ambas

condiciones son verdaderas.
||
(7>2) || (2<4)
Devuelve verdadero cuando al menos una de

las dos es verdadera.
Or
(7>2) or (2<4)
Devuelve verdadero cuando al menos una de

las dos es verdadera.
No
! (7>2)
Niega el valor de la expresin.
<html>
<head>
</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 condicin. Las ms frecuentes son la
instruccin if y la instruccin switch.
Sentencia if ... else
<?php
if (condicin)
{
Sentencias a ejecutar cuando la
condicin es cierta.
}
else
{
Sentecias a ejecutar cuando la
condicin es falsa.
}
?>
La sentencia if ejecuta una serie de instrucciones u otras dependiendo de la condicin

que le pongamos. Probablemente sea la instruccin ms importante en cualquier
lenguaje de programacin.
<html>
<head>
</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 condicin no es verdadera por lo que se ejecuta la parte de cdigo

correspondiente al else.
Sentencia switch ... case
<html>
<head>
</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 ejecucin
de un conjunto de instrucciones mientras se cumpla una condicin.
Sentencia while
<?php
while (condicin)
{
intrucciones a ejecutar.
}
?>
Mientras la condicin sea cierta se reiterar la ejecucin de las instrucciones que estn
dentro del while.
<html>
<head>
</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 ejecucin del bucle,

se va sumando 1 al valor de $i de manera que cuando $i vale 10 ya no se cumple la
condicin y se termina la ejecucin del bucle.
Sentencia for
<?php
for (inicial ; condicin ; ejecutar en iteracin)
{
intrucciones a ejecutar.
}
?>
<html>
<head>
</head>
<body>
Inicio<BR>
<?php
for($i=0 ; $i<10 ; $i++)
{
echo "El valor de i es ", $i,"<br>";
}
?>
Final<BR>
</body>
</html>
La instruccin for es la instruccin de bucles ms completa. En una sola instruccin nos

permite controlar todo el funcionamiento del bucle.
El primer parmetro del for, es ejecutado la primera vez y sirve para inicializar la
variable del bucle, el segundo parmetro indica la condicin que se debe cumplir para
que el bucle siga ejecutndose y el tercer parmetro es una instruccin que se ejecuta
al final de cada iteracin y sirve para modificar el valor de la variable de iteracin.
Salida
Hasta ahora hemos usado la instruccin echo para realizar salida a pantalla, esta
instruccin es bastante limitada ya que no nos permite formatear la salida. En esta
pgina veremos la instruccin printf que nos da mucha ms potencia.
Sentencia printf
<?php
printf(cadena formato, variable1, variable2...);
?>
La cadena de formateo indica cmo se han de representar las valores que

posteriormente le indicaremos. La principal ventaja es que adems de poder formatear
los valores de salida, nos permite intercalar texto entre ellos.
<html>
<head>
</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 carcteres especiales que indican
como formatear las variables que se incluyen en la instruccin.
Elemento
Tipo de variable
%s
Cadena de carcteres.
%d
Nmero sin decimales.
%f
Nmero con decimales.
%c
Carcter ASCII.
Aunque existen otros tipos, estos son los ms importantes.

<html>
<head>
</head>
<body>
<?php
$var="texto";
$num=3;
printf("Puede fcimente intercalar <b>%s</b> con nmeros <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>
Envo y recepcin de datos
El lenguaje PHP nos proporciona una manera sencilla de manejar formularios,
permitindonos de esta manera procesar la informacin que el usuario ha introducido.
Al disear un formulario debemos indicar la pgina PHP que procesar el formulario,
as como en mtodo por el que se le pasar la informacin a la pgina.
<html>
<head>
</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 botn Enviar el contenido de cuadro de texto es enviado a la pgina 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 tena el mismo nombre que el cuadro de texto de la pgina
anterior y el valor que habamos introducido. Pero por razones de seguridad a partir de
entonces para acceder a las variables del formulario hay que usar el array de
parmetros $_POST[] o $_GET[] dependiendo del mtodo usado para enviar los
parmetros.
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>
</head>
<body>
El nombre que ha introducido es: <?php echo $_GET['nombre'] ?>
<br>
</body>
</html>
Method GET y POST

En la pgina anterior hemos comentado que los datos de un formulario se enva
mediante el mtodo indicado en el atributo METHOD de la etiqueta FORM, los dos
mtodos posibles son GET y POST.
La diferencia entre estos dos mtodos radica en la forma de enviar los datos a la
pgina, mientras que el mtodo GET enva los datos usando la URL, el mtodo POST
los enva por la entrada estndar STDIO.
<html>
<head>
</head>
<body>
<FORM ACTION="procesa2.phtml" METHOD="GET">
Introduzca su nombre:<INPUT TYPE="text" NAME="nombre"><BR>
Introduzca sus apellidos:<INPUT TYPE="text" NAME="apellidos"><BR>

</FORM>
</body>
</html>
<html>
<head>
</head>
<body>
<FORM ACTION="procesa2.phtml" METHOD="POST">
Introduzca su nombre:<INPUT TYPE="text" NAME="nombre"><BR>
Introduzca sus apellidos:<INPUT TYPE="text" NAME="apellidos"><BR>
</FORM>
</body>
</html>
procesa2.php
<html>
<head>
</head>
<body>
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 mtodo GET podemos ver los
parmetros pasados ya que estn codificados en la URL.
Envio de emai ls
PHP nos ofrece la posibilidad de enviar emails de una manera sencilla y fcil, para ello
el lenguaje nos proporciona la instruccin mail( ).
<?php
mail(destinatario, tema, texto del mensaje);
?>
En el parmetro destinatario pondremos la direccin de email a donde se enviar el
mensaje, en el parmetro tema el tema o subject del mensaje y el parmetro texto del
mensaje el cuerpo del mensaje en formato texto plano.
Existe una sintaxis extendida de la instruccin mail( ) que nos permite aadir
informacin adicional a la cabecera del mensaje.
<?php
mail(destinatario, tema, texto del mensaje, informacin adicional de cabecera);
?>
En la informacin de cabecera podremos incluir parmetros adicionales al mensaje

como Reply-To:, From:, Content-type:... que nos permiten tener un mayor control
sobre el mensaje.
<html>
<head>
</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>
</FORM>
</body>
</html>
email.phtml
<html>
<head>
</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 <webmaster@hotmail.com>\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 <webmaster@hotmail.com>\n");
}
echo "Se ha enviado un email a la direccion: ",$direccion," en formato
<b>",$tipo,"</b>.";
}
?>
<br>
</FORM>
</body>
</html>
Conexin 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 estn conectados.
La conexin 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 direccin del
servidor de bases de datos, (en nuestra configuracin local sera localhost) , user sera
el nombre de uno de los usuarios registrados en la tabla user (recuerda lo que te he
contado al respecto en la pgina anterior) y password la clave de acceso
correspondiente al user.
Para cerrar la conexin, PHP dispone de la siguiente funcin:
$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 creacin de una base de datos requiere tener previamente establecida una conexin
con el servidor y utiliza la siguiente sintaxis:
mysql_create_db (nom)
donde nom es el nombre de la nueva base de datos.
Esta funcin 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 funcin nos
devolver FALSE.
Borrar una base de datos
Para borrar una base de datos se requiere la siguiente funcin 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 parmetro es opcional y solo tiene verdadero sentido sentido en el caso de
que tengamos abiertas simultneamente conexiones con dos servidores distintos.
Esta funcin devuelve TRUE cuando se ejecuta con xito y FALSE en el caso contrario.
Igual que ocurra al tratar de crearla, si intentamos borrar una base de datos
inexistente la funcin 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 nmero de bases de datos existentes en
el servidor as como sus nombres.
Tales funciones son las siguientes: $p=mysql_list_dbs($c)
Esta funcin recoge en una variable $p un nuevo identificador que es imprescindible y
previo al uso de las funciones que determinan los nmeros y nombres de las bases de
datos existentes en el enlace abierto identificado por $c.
$num=mysql_num_rows($p)
Esta funcin devuelve el nmero de bases de datos existentes en el servidor. Ese
nmero puede recogerse en una variable (en este caso $num.
Fjate en la sintaxis. La funcin mysql_num_rows utiliza como parmetro $p que es el
valor devuelto por la funcin mysql_list_dbs ejecutada previamente.
mysql_db_name($p, n)
Esta nueva funcin devuelve el nombre de una de las bases de datos identificada por
un nmero n que tiene que pertenecer al intervalo [0,$num).
Fjate que n tiene que ser n<$num porque si por ejemplo $num=5 los cinco valores
posibles de n seran: 0,1,2,3 y 4.
Una lista completa de todas las bases de datos existentes en el servidor podra hacerse
de la siguiente forma:
Abrirla conexin con el servidor.
Invocar a
mysql_list_dbs.
Contar el nmero 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 funcin:

mysql_db_name($p,$i)
Conexin PHP y MySQL

Desde PHP es posible invocar funciones y ejecutar sentenciasde especficas de MySQL.
La interconexin 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 algn tipo de error.
El identificador de enlace ($enl) es opcional (sera el valor devuelto por la funcin
mysql_connect ejecutada previamente.
Si se omitiera $enl la funcin mysql_db_query intentara buscar un enlace abierto y si
no lo hubiera ejecutara automaticamente un mysql_connect() en el que host sera el
valor localhost, usuario root y password una cadena vacia.
Cuidado...!! Si has puesto una password al usuario root o si ests escribiendo tu
cdigo para un servidor remoto debers cerciorarte de abrir un conexin antes de
ejecutar esta instruccin. De lo contrario -como es evidente- dara error ya que los
parmetros de la conexin automtica no coincidiran con la configuracin 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 conexin.
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 ejecucin de esta instruccin requiere que previamente se haya asociado un base

de datos al identificador de enlace mediante una instruccin 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 ms filas.
Obviamente, previo a esta instruccin es necesario haber ejecutado un
mysql_db_query que habr sido la funcin generadora del identificador de resultado.
mysql_num_rows ($res)
Esta funcin devuelve el nmero de filas que contiene el identificador de resultado.
mysql_fetch_array ($res)
Es una versin extendida de
mysql_fetch_row. Adems de guardar los datos en el indice numerico del array, los
guarda tambin con indices asociativos, usando el nombre del campo como clave.
Los valores de SELECT MULTIPLE

En una opcin SELECT MULTIPLE dentro de un form tpico 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 opcin se define -dentro de la etiqueta SELECT- un
name tipo array. Bastara 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 parmetro que indica cuantos elementos de la
lista de opciones queremos que se visualicen simultneamente en la pgina.
El truco est en los values de cada option dentro de ese select
Los he escrito as:
<option
<option
<option
<option
<option
<option
value=1>Castellano
value=2>Francs
value=4>Ingls
value=8>Alemn
value=16>Blgaro
value=32>Chino
Fjate que he mantenido exactamente el mismo orden que he definido el campo SET
de la tabla.
Y fjate tambin 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 aadindose al array. Por ejemplo. Si
selecciono: Francs y Blgaro el array sera este: var[0]=2, var[1]=16
Si sumamos esos valores (2 + 16) nos dara 18 y si convertimos a binario el dieciocho
resultar:
010010
Sintaxis MySQL de modificacin de registros

La sintaxis MySQL para las sentencia de modificacin de registros de una tabla puede
contener las siguientes clusulas que al igual que ocurra en en casos anteriores
pueden tener categora de obligatorias u opcionales.
La secuencia en la que deben estar indicadas en la sentencia es idntica al orden en
que estn descritas aqu.
UPDATE
Tiene carcter obligatorio, debe ser la primera palabra de la sentencia e indica a
MySQL que pretendemos realizar una modificacin.
LOW_PRIORITY
Es opcional e indica a MySQL que espere para realizar la actualizacin 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 modificacin se interrumpe en el momento en que
encuentre un conflicto de clave duplicada.
Tanto con ignore como si esa clusula no se efectan 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 carcter obligatorio y debe preceder a las definiciones de campo y valor.
campo1 = valor1
Es obligatoria al menos una definicin. Indica el nombre del campo a modificar
(campo1 y el valor que se asignar a ese campo.
Si se pretende modificar ms de un campo se repetir esta definicin tantas veces

como sea necesario, separando cada una de ellas por una coma.
WHERE
Es un campo opcional y su comportamiento es idntico a sealado en al mencionar el
proceso de consultas.
ORDER BY
Tiene idntica 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 clusulas que al igual que ocurra en en casos anteriores
pueden tener categora de obligatorias u opcionales.
La secuencia en la que deben estar indicadas en la sentencia es idntica al orden en
que estn descritas aqu.
DELETE
Tiene carcter 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 actualizacin a que termine
las consultas del fichero (en el caso de haber alguna en proceso).
FROM
Tiene carcter obligatorio y debe preceder a la definicin 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 eliminacin de registro.
WHERE
Es un campo opcional y su comportamiento es idntico a sealado en al mencionar el
proceso de consultas.
LIMIT n
La opcin LIMIT es opcional y propia de MySQL. Su finalidad es limitar el tiempo de
ejecucin del comando DELETE ya que cuando est activada devuelve el control al
potencial cliente despus de borrar n registros con lo que en procesos de borrados
muy largos (ficheros de gran tamao) no obliga al potencial cliente a esperar a borrado
total para proceder a la consulta de la tabla.
Cuando se utiliza esta opcin, la sentencia DELETE debe repetirse hasta que el nmero
de registros pendientes de borrado sea inferior al valor de n.
Optimizacin 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 tamao de la tabla.
Esas posiciones de registro sern utilizadas por MySQL para escribir los registros que
se vayan aadiendo despus del proceso de borrado.
Para eliminar esos registros vacios y reducir el tamao de una tabla, MySQL dispone
de una sentencia que es la siguiente:
OPTIMIZE TABLE tabla
Esta sentencia -que debe usarse despus de un proceso de borrado ampliodefragmenta la tabla eliminando los registros inutilizados por el proceso DELETE, con
lo que logra una reduccin del tamao de la tabla a su dimensin ptima..
Presentacin de JavaScript
Para los creadores de sitios Web, la evolucin de HTML ha sido una bendicin no
exenta de controversia. En los primeros das de la WWW, HTML era bastante simple, y
bastante fcil de aprender casi todo lo que se necesitaba saber para agrupar pginas
Web.
Cuando creci la Web, tambin crecieron las aspiraciones de los diseadores, y su

demanda de mayor control sobre la pgina oblig a HTML a cambiar y hacerse ms
complejo.
Como la Web es un medio dinmico, los diseadores tambin queran que sus pginas
interaccionaran con el usuario, y pronto result evidente que HTML era insuficiente
para atender esta demanda. Netscape invent JavaScript para controlar el navegador y
aadir brillantez e interactividad a las pginas Web.
Desde su creacin, JavaScript ha evolucionado mucho. En este captulo 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 fsico. 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 verificacin.
Como hay ms de un gato, o ms 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 ttulo, y un
formulario puede tener una casilla de verificacin.
Las propiedades pueden modificar a los objetos, y la misma propiedad se puede aplicar
a objetos completamente diferentes. Supongamos que tiene una propiedad llamada
vaco. Puede utilizar vaco donde quiera que convenga, tanto para decir que el
estmago del gato esta vaco, como para decir que su taza esta vaca.
Observe que el teclado de la computadora y las ruedas de una bicicleta no son slo
propiedades; son tambin objetos, que a su vez pueden tener propiedades. As que los
objetos pueden tener subobjetos.
Mtodos
Las cosas que pueden hacer los objetos se llaman mtodos. Los gatos ronronean, las
computadoras se rompen y las bicicletas ruedan. Los objetos de JavaScript tambin
tienen mtodos: click() para los botones, open() para las ventanas y el texto puede
seleccionarse gracias al mtodo selected(). Los parntesis indican que nos estamos
refirindonos a un mtodo, y no a una propiedad.
Manipulacin de eventos
Los eventos son acciones que el usuario realiza mientras visita una pgina. Enviar un
formulario y mover el ratn sobre una imagen son dos ejemplos de eventos.
JavaScript trabaja con eventos utilizando comandos denominados manejadores de

eventos. Una accin del usuario en la pgina dispara un manejador de eventos, en la
tabla siguiente encontrara algunos de los eventos.
Al escribir un script, no es necesario anticipar toda accin posible que pueda efectuar
el usuario, basta con aquellas en las que quiera que suceda algo especial. Por ejemplo,
su pgina se cargar bien sin necesidad de un manejador de eventos onLoad.
onClick
Se produce cuando el usuario efecta un click en un botn izquierdo del ratn sobre
algn elemento de un formulario o un enlace.
onMouseOver y onMouseOut
El evento onMouseOver sucede cada vez que el cursor del ratn pasa por encima de un
elemento de la pgina, 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 misin consiste
en ejecutar un script cuando la pgina 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 opcin para validar la entrada de datos en el formulario.
onSubmit
Este evento se encarga de ejecutar un determinado cdigo de JavaScript al realizarse
el envo de un formulario. El ejemplo mas claro de utilizacin 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 acta de manera contraria, es decir,
detecta la prdida del focus. La utilizacin 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 botn
Detener del navegador.
onReset
Se produce cuando se pulsa un botn 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 utilizacin del ratn.
onMouseDown: evento que se genera cuando el usuario pulsa un botn del ratn
onMouseMove: evento que se genera cuando el usuario mueve el cursor del ratn
onMouseUp: evento que se genera cuando se deja de pulsar un botn del ratn
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 tamao de la ventana
o del frame actual, se genera un evento onResize. Estos eventos estn incorporados en
los objetos window y frame.
ondblclick
Indica que se ha hecho doble clic en el elemento
Iniciando
Dnde colocar los scripts.
Los guiones se pueden colocar en uno de de dos sitios posibles de la pgina 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 guin.
1.
<script language="Javascript" type="text/javascript">
He aqu una etiqueta de apertura de guin. 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 guin est en formato de slo
texto, organizado como JavaScript.
2.
document.write("Hola, Informtica!")
sta es su primera lnea de JavaScript, la cual toma el mando de la ventana de

documento y escribe Hola, Informtica en ella, como se aprecia en la siguiente
figura:
3.
<script>
Con esto se termina el guin JavaScript y se indica al navegador que quede a la espera
de encontrar nuevamente cdigo HTML.
Comentarios
Es una buena idea acostumbrarse a aadir comentarios a los guiones. Se hace

insertando comentarios que JavaScript no interpreta como comandos de guin. Aunque
su guin le puede parecer suficientemente claro al escribirlo, si vuelve a l un par de
meses despus puede que ya no encuentre claro lo que haba programado. Los
comentarios le ayudarn a explicar porqu resolvi un problema de un modo
determinado. Otra razn para comentar un guin es la de ayudar a otras personas que
quieran volver a utilizar y modificar su guin.
Para comentar un guin.
1.
/* Los comentarios que incluyen muchas lneas

se escribe entre los caracteres diagonal asterisco
y se cierran con asterisco diagonal */
3. // Si solo escribir una lnea de comentario se ponen dos diagonales
Como avisar a un usuario
Uno de los usos principales de JavaScript es el de proporcionar retroalimentacin a los

que navegan por su sitio. Puede crear una ventana de alerta que se abrir y dar a los
usuarios la informacin imprescindible sobre su pgina.
En un ejemplo, podemos captar la atencin del usuario con alarmas, o banner muy
animados, pero no sera 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 mtodo alert() y
entre comillas.
Confirmacin del usuario

Al tiempo que es til proporcional informacin al usuario, en ocasiones tambin
necesitar obtener informacin a cambio. El siguiente script muestra como averiguar si
el usuario acepta o rechaza una pregunta. Este guin tambin introduce la idea de la
condicin, que es la parte donde el guin coloca una pregunta o prueba y ejecuta
diferentes acciones en funcin de los resultados de la prueba dicha pregunta.
Sobre las sentencias condicionales
Las sentencias condicionales se dividen en tres partes: la seccin if (si), donde se
realiza la prueba, la seccin de verdadero, donde se efecta la parte de guin en caso
de afirmar, y la parte de falso (else) en donde se ejecuta la accin de rechazo. El
contenido de lo que se est comprobando dentro de la seccin if est entre
parntesis, 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 lnea de ejecucin
entonces las llaves pueden omitirse.
Para confirmar una eleccin
1.
if(confirm("Estas seguro de hacer esto?"))

{
El mtodo confirm() toma un parmetro (la pregunta que se va ha realizar) y

devuelve verdadero (true) o falso (false), en funcin de la respuesta del usuario.
2.
alert("Seguro, adelante")
Si el usuario hace clic en el botn de aceptar, confirm() devuelve verdadero y la

ventana de alerta muestra el mensaje Seguro, adelante, como puede ver, sta es la
seccin entonces del cdigo, 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 seccin que solo ejecuta cuando el usuario hace clic en el botn de
Cancelar.
5.
alert("Mejor no")
Sin embargo, si el usuario hace clic en el botn Cancelar, confirm() devuelve falso y
se visualiza, el mensaje Mejor no.
6.
Esta llave da por finalizada la sentencia condicional if-else completa.
Verdadero
Falso
if (confirm("Estas seguro de hacer esto?"))

{
alert("Seguro, adelante")
}
else
{
alert("Mejor no")
}
</script>
Cmo interrogar al usuario
En ocasiones, en lugar de formular una simple pregunta del tipo Si-No, necesitar
una respuesta ms especfica. Para esas ocasiones el siguiente guin nos permite
hacer una pregunta (con una respuesta predeterminada) y escribir una respuesta.
res = prompt("Cmo te llamas?","")
Al mtodo prompt() se le pasan dos fragmentos de informacin (oficialmente

conocidos como parmetros): la pregunta que se le formular al usuario y la respuesta
predeterminada. Este mtodo 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 parmetro (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 vaca.
res = prompt("Cmo te llamas?","")

if (res)
{
alert("Te llamas: "+res)
}
else
{
alert("No respondiste la pregunta")
}
Como redireccionar al usuario
No slo puede verificar la existencia de JavaScript tambin puede comprobar la versin

de JavaScript que tiene el usuario. El siguiente guin muestra cmo redireccionar, o
enviar a los usuarios a otra pgina, dependiendo de la versin 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 versin mnima de

JavaScript que se necesita para que el navegador pueda ejecutar el guin. 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 lnea restablece la ubicacin (location) apropiada de la ventana actual. En otras

palabras, indica al navegador que cambie la pgina actual por la pgina especificada,
en este caso bienbenido.html
3.
</script>
La etiqueta de cierre del guin.
<script language="Javascript1.5" type="text/javascript">
window.location="bienvenido.html"
</script>
Redireccionar a un usuario con una liga.
Cuando un usuario carga el guin del ejemplo anterior, va a una pgina inicial, y luego,
dependiendo del guin, el navegador carga automticamente otra pgina. Este mtodo
siempre deja ver al usuario al menos un poco de la primera pgina, antes de ser
enviado a la segunda. Este comportamiento no es muy elegante, as que el siguiente
guin, le muestra un mtodo ms adecuado de efectuar el redireccionamiento,
incrustando la redireccin en un vnculo. Cuando hace clic en el vnculo, deber ser
dirigido a una de dos pginas posibles, dependiendo si tiene o no JavaScript.
Para realizar la redireccin
<a href="sinjavascript.html"
onclick="window.location='bienvenido.html';return false">
Bienvenido al Nuevo sitio</a>
El cdigo JavaScript est completamente incrustado en la etiqueta de vnculo. Si el

usuario no tiene JavaScript y hace clic en el vnculo, seguir la ruta de acceso href
habitual, y acabar en otra pgina Web.
Lo novedoso es que se ha efectuado una redireccin sin que el usuario sepa lo que ha
pasado- est en una de las dos pginas posibles, dependiendo de lo que disponga
tener.
Trabajando con imgenes
Uno de los mejores usos de JavaScript es el de aadir inters visual a las pginas Web
animando grficos. De eso trata este mdulo. Hacer las imgenes de las pginas Web
cambien cuando el usuario mueve el ratn sobre ellas, haciendo por tanto que la
pgina reaccione con el usuario, es uno de los trucos ms comunes.
Imgenes de sustitucin
La idea que subyace en las imgenes de sustitucin es simple. Tenemos dos imgenes.
La primera, o imagen original, se carga y se visualiza con el resto de la pgina Web.
Cuando el usuario mueve el ratn sobre la imagen original, el navegador la cambia
rpidamente por la segunda, o imagen de sustitucin, creando la ilusin de
movimiento o animacin.
<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 sustitucin
1.
<a href=" siguiente.html"
El vnculo empieza especificando dnde ir el navegador cuando el usuario haga clic en

la imagen; en este caso, ir a la pgina siguiente.html
2.
onmouseover="document.arrow.src='images/sobre.gif'"
Cuando el usuario mueve el ratn sobre la imagen, la imagen de sustitucin 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 ratn 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 vnculo de la imagen define el origin de la imagen original en la pgina, y

cierra la etiqueta del vnculo.
Imgenes de sustitucin avanzadas
Para crear la ilusin de movimiento, necesita asegurarse de que la imagen de

sustitucin aparezca inmediatamente, sin retraso alguno al ser cargada desde el
servidor, para hacerlo, se utiliza JavaScript para precargar todas las imgenes en la
memoria cach del navegador y colocar las imgenes en las variables del guin.
Entonces, cuando el usurario mueve el ratn sobre una imagen, el guin cambia una
variable que contiene una imagen por una segunda variable que contiene la imagen de
sustitucin.
Para crear una imagen de sustitucin
if (document.images) {
sobre = new Image
reposo = new Image
sobre.src = "images/sobre.gif"
reposo.src = "images/reposo.gif"
}
Este cdigo comprueba si el navegador entiende los objetos de imagen. Si es as, el

cdigo 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 cdigo que dice a los navegadores antiguos que hacer. Para evitar los
mensajes de error en dichos navegadores, hay que crear algunas variables de
restriccin, esto es, variables que no harn nada, salvo crearse y permanecer vacas.
<a href="next.html"
onmouseover="document.arrow.src=sobre.src"
onmouseout="document.arrow.src=reposo.src"
El resto de la imagen de sustitucin se manipula en la etiqueta de ancla.
Imgenes de sustitucin en varias secciones de la pgina
Es improbable que slo se conforme con una imagen de sustitucin en una pgina.
Como las imgenes se utilizan con frecuencia como elementos de la interfaz de usuario
de una pagina, es probable que quiera disponer de ms de un botn o men que haga
uno de este efecto. Para utilizar ms de una imagen de sustitucin, tiene que aadir un
poco de cdigo extra.
Para colocar varias imgenes de sustitucin en una pgina
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 sustitucin. Por tanto, en este paso est
estableciendo variables para dos imgenes de sustitucin.
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 grfico con el que est asociado.
3.
boton1a = ""
boton1b = ""
boton2a = ""
boton2b = ""
document.boton1 = ""
document.boton2 = ""
Cmo en la tarea anterior, para evitar errors en los navegadores antiguos, definimos
variables ficticias, con una cadena vaca 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>
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 sustitucin desde una liga
En ejemplos anteriores, el usuario dispara la imagen de sustitucin moviendo el ratn

por encima de una imagen. Pero tambin puede hacer que se dispare una imagen de
sustitucin cuando el usuario apunte a un vnculo de texto. Lo nico que tiene que
hacer es color un vnculo de texto dentro de la etiqueta <a ref>
Para disparar una imagen de sustitucin desde un vnculo

<!-- Hide script from old browsers
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 vnculo de texto que dice Siguiente pgina 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 vnculo.
Como trabajar con varias imgenes de sustitucin
Hasta ahora hemos visto cmo pasando el ratn por encima de una sola imagen de
sustitucin. Pero tambin puede dispararse una imagen de sustitucin con varias
imgenes diferentes. Puede resultar muy til cuando tiene varias imgenes que quiere
resaltar. Desplazndose sobre cada una de las imgenes aparecer la descripcin de
esa imagen.
Para trabajar con mltiples vnculos cambien una sola imagen de sustitucin
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 = ""
}
onmouseover="document.textField.src=vera.src"
onmouseout="document.textField.src=bg.src">
<img src="images/boton1.gif" border="0">
</a>
Esta lnea manipula el botn superior. El manejador de eventos onmouseover colocal el

contenido de vera.src en document.textfield.src, y cuando el ratn no est sobre la
imagen, sustituye la descripcin por una imagen de fondo vaca.
<img src="images/bg.gif" name="textField"/>
Esta es la etiqueta img de la descripcin de la imagen, con el nombre textfield, y

muestra la clave de este guin. 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 imgenes de sustitucin
Los ultimos ejemplos empleaban una gran cantidad de cdigo casi idntico. Para las
tareas repetitivas son candidatas perfectas para las funciones. Una vez escrito el
codigo que realiza la tarea repetitiva, slo tiene que llamar a la funcin y pasarle los
datos que necesite para realizar su tarea. El siguiente script realiza la misma tarea,
pero utiliza una funcin para que el cdigo sea un poco ms fluido.
Para utilizar una funcin con varias imgenes de sustitucin
function cambiaimg(objimg,nuevo)
{
if (document.images)
{
document[objimg].src= eval(nuevo + ".src")
}
}
Este primer paso crea la funcin cambiaimg que tiene los parmetros, objimg y nuevo.
Luego, empieza una comprobacin condicional, document.images. Esto elimina la
necesidad de otra sentencia en la inicializacin de la variable original, si el navegador
no soporta imgenes, nunca sucede nada. La siguiente lnea establece
document[objimg].src al resultado de la variable nuevo concatenando con .src,
utilizando el mtodo eval para convertir la cadena de texto en un objeto.
Manipulacin de Formularios
Cada vez que necesite recopilar en sus sitios Web informacin de los usuarios, tendr
que utilizar un formulario.
Los formularios pueden contener la mayora de los elementos de una interfaz grfica
habitual, como campos de entrada, botones de radio, casillas de verificacin, mens
desplegables y listas de entrada. Adems, los formularios HTML pueden contener
campos de contrasea, para proteger al usuarios de los entrometidos.
Una vez rellenado el formulario, un clic en el botn ENVIAR enva la informacin al

servidor Web, donde una aplicacin de server, es decir un script que se ejecuta en el
servidor Web, interpreta los datos y acta 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 estn limpios, es decir, son exactos y segn el
formato correcto, antes de que se almacenen en el servidor.
Verificacin de contraseas
Cuando le pida al usuario que introduzca una contrasea que se solicitar en el futuro,
querr que la escriba dos veces, para asegurarse de que no se confundi al escribirla.
Si las dos contraseas coinciden, entonces el script se lo comunica al usuario con una
ventana de alerta.
Para verificar las contrasea de entrada.
function validForm(passForm) {
if (passForm.passwd1.value == "") {
alert("Debes de introducir una contrasea")
passForm.passwd1.focus()
return false
}
Tras definir la funcin comprobamos que el valor del campo passwd1 est vaco, como
muestra la expresin ==, si es as, desplegamos una ventana de alerta que solicite
una entrada, devuelva el cursor al campo passwd1 y evalu la funcin como falsa.
if (passForm.passwd1.value != passForm.passwd2.value) {
alert("Las contraseas 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 funcin. 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 enva el formulario,

bien haciendo clic en el botn Enviar, bien abandonando el ultimo campo de texto de
modo que el navegador lo entienda como un envo de formulario.
El formato de manejador de eventos funciona porque la funcin llamada devuelve

como valor verdadero o falso. Si la funcin llamada devuelve verdadero las
contraseas coinciden, de modo que el formulario es enviado al servidor. Si la funcin
devuelve falso, onsubmit determina que hay un error y detiene el envo 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 imgenes como botones de envo.
A fin de mejorar la apariencia del formulario, puede utilizar una imagen para el botn
encargado de enviar el formulario, en lugar de utilizar el botn HTML estndar.
Utilizara JavaScript para controlar lo que ocurre una vez que el usuario ha hecho clic
en la imagen de envo. El script necesita la adicin de una funcin al script y la
definicin de una imagen a modo de botn de Enviar lo que se realiza con la etiqueta
<a>.
Para utilizar una imagen a modo de botn Enviar.
function subForm() {
Empezamos con la funcin subforo(). Necesitamos esta funcin porque queremos

enviar el formulario slo si los datos introducidos por el usuario son correctos, que es
lo que comprueba esta funcin.
if (validForm(document.myForm)) {
Estas lneas se aseguran de que el formulario es correcto, llamando a la funcin

validForm que se define con anterioridad en el script. Si esta funcin devuelve
verdadero, entonces se enva el formulario llamando al mtodo
document.myForm.submit()
<a href="javascript:subForm()"><img src=" submit.jpg" alt="submit"></a>
La etiqueta de ancla que llama a la funcin subforo, y la ruta de acceso de la imagen

que representa al botn Enviar se especifica en el atributo src de la etiqueta.
Navegacin seleccionar e ir.
Probablemente haya visto muchos ejemplos de men de navegacin estndar en la

Web, es aquel donde se elige una opcin de men y luego se hace clic en un botn IR,
que lo lleva su destino. A estos mens mejorados de JavaScript se les denomina
mens seleccionar e ir, y son fciles de crear, como se muestra a continuacin.
Para crear un men seleccionar e ir.
function jumpPage(newLoc) {
Primero, creamos la funcin jumpPage, a la que pasamos el valor newLoc.
newPage = newLoc.options[newLoc.selectedIndex].value
Comenzamos el cdigo desde el interior de los corchetes y trabajamos hacia afuera. El

objeto newLoc.selectedIndex ser un nmero 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 vaca). En otras palabras, si newPage tiene un valor, le dice a la ventana que
vaya al URL especificado por la opcin del men elegida.
<body onload="document.myForm.newLocation.selectedIndex=0">
Al cargar la pgina el primer lugar, podemos estar seguros que la opcin visualizada es
Seleccione un sitio. Esto ser cierto cuando la pgina 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 opcin del men, el manejador de eventos onchange llama la funcin 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 opcin de men elegida por el usuario, como se especifica en las
sentencias option value de las lneas que se encuentran por delante de la etiqueta
<select>.
Modificacin dinmica de lo mens.
A menudo resulta til ofrecer al usuario la opcin de entradas a travs de mens

desplegables, y ser capaces de cambiar el contenido de uno o ms mens desplegables
en funcin 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 pas en donde vive,
y despus rellenan un segundo men con loas estados o las provincias basandose en la
eleccin realizada. Cuando el usuario hace clic en el mes, el script rellena el segundo
men desplegable con el nmero correcto de das del mes seleccionado.
Para cambiar los mens dinmicamente.
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 nmero correcto
de das para cada mes.
function populateDays(monthChosen) {
monthStr = monthChosen.options[monthChosen.selectedIndex].value
La funcin populateDays es llamada cada vez que el usuario selecciona una opcin
nueva en el men de meses; el objeto seleccionado se pasa a la funcin.
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 lneas hacen es
comprobar si el valor de monthStr es distinto de , y si esta condicin es verdadera,
entonces monthStr se convierte en un nmero con el mtodo parseInt,
establecindose 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 modificacin del men de das 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 nmero de das
del mes elegido, aadiendo al men una opcin nueva por cada da la opcin 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 eleccin en el men de meses, llamamos a la funcin

populateDays.
<select name="days">
<option>Day</option>
</select>
Estas lneas establecen el valor inicial del men de das, la pabla Da. En este punto, no
hay valores numricos 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 lneas de cdigo JavaScript podr cumplir con varias tareas, cosa
que de otro modo requerira docenas de lneas.
Una expresin regular (regExp) es un patrn que se escribe utilizando smbolos

especiales, que describen una o ms 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 expresin
aritmtica, puede crear una expresin regular utilizando operadores, en este caso, los
operadores trabajan con textos, en lugar de con nmeros.
Modificadores de las expresiones regulares.
Sin distincin entre maysculas y minsculas
Correspondencia global. Encuentra todas las correspondencias de las

cadenas, en vez de slo la primera.
Correspondencia de lneas mltiples.
Indicadores de posicin
Indica el inicio.
Indica el final.
Cdigos de escape
Dada la sintaxis de los literales de regexp, podramos preguntarnos cmo

especificamos una cadena que incluya barras, como una direccin de internet.
\f
Avance de pgina
\+
Signo de mas
\n
Nueva lnea
\?
Interrogacin
\r
Retorno de Carro
\|
Barra horizontal (pipe)
\t
Tabulador
$
Parntesis apertura
\v
Tabulador vertical
$
Parntesis cerrado
\/
Barra inclinada /
\[
Corchete apertura
\\
Barra invertida \
\]
Corchete cerrado
\.
Punto .
\{
Llave apertura
\*
Asterisco *
\}
Llave cerrado
Cuantificadores de repeticin
*
Coincide con el elemento anterior cero o ms 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 mnimo de m veces, pero no ms

de n veces.
{m, }
Coincide con el elemento anterior m o ms 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/
Especificara el patrn de cero o ms veces a, seguido exactamente por cinco

caracteres b y luego una letra c.
Variable=/ab{5,7}c/
Creara una expresin 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/
Creara una expresin para buscar correspondencias de una a seguida de tres o mas
letras b seguidas de un carcter c.
Creacin de Patrones.
El primer conjunto de caracteres especiales en el que podemos pensar es en los

indicadores de posicin, caracteres que dan informacin sobre la posicin en la que
tiene que empezar un patrn.
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 carcter $ acta a la inversa:
Variable=/http$/;
Concordar solamente con cadenas que terminen con http. Se pueden utilizar los dos
indicadores de posicin de forma combinada para asegurar una correspondencia exacta
del patrn deseado
Variable=/^http$/
Esta expresin regular buscar correspondencias con la cadena http.
Agrupamiento y clases de caracteres.
[caracteres]
Cualquier carcter indicado explcitamente o como un rango entre

parntesis.
[^caracteres]
Cualquier carcter que no sea ninguno de los indicado entre los

parntesis representados explcitamente o como un rango.
Cualquier carcter excepto el de nueva lnea.
\w
Cualquier carcter de palabra

Lo mismo que [a-zA-Z0-9_]
\W
Cualquier carcter que no sea palabra.

Lo mismo que [^a-zA-Z0-9_]
\s
Cualquier carcter de espacio en blanco.

Lo mismo que [ \t\n\r\f\v]
\S
Cualquier carcter que no sea espacio en blanco.

Lo mismo que [^ \t\n\r\f\v]
\d
Cualquier dgito.
Lo mismo que [0-9]
\D
Cualquier cosa que no sea dgito.

Lo mismo que [^0-9]
\b
Un lmite de palabra. El espacio vaco entre \w y \W
\B
Un lmite de caracteres que no sean palabras. El espacio vaco

entre caracteres de palabra.
[\b]
Un carcter de retorno.
Validar un nombre de usuario.
Variable=/^[a-z][a-z0-9_-]*/
Busca correspondencias por un nombre de usuario sin distinguir entre maysculas y

minsculas que empezar con un carcter alfabtico seguido de cero o ms caracteres
alfanumricos, as como caracteres de subrayado y guiones.
Sub-expresiones.
Aparte de agrupar secuencias de caracteres como una unidad, los parntesis en las
expresiones regulares crean subexpresiones en la cadena sobre la que actan. Cuando
se halla correspondencia, las subexpresiones entre parntesis pueden ser referidas de
forma individual utilizando las propiedades estticas 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 cmo formar expresiones regulares es hora de ver cmo
utilizarlas. Hay una variedad de propiedades y mtodos relacionados con el objeto
RegExp que pueden utilizarse para comprobar y analizar los resultados de una
expresin regular aplicada a una porcin de datos.
Test() es un mtodo que devuelve un valor lgico que indica si el argumento de

cadena dado coincide con la expresin regular.
Patron=new RegExp(a*bbbc,i)
Alert(patron.test(1212c))
Alert(patron.test(aaaabBbcded))
//Falso
//Verdadero

Fundamentos de Desarrollo Web

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Fundamentos de Desarrollo Web

Uploaded by

Copyright:

Available Formats

Conceptos bsicos

Al ser PHP un lenguaje que se ejecuta en el servidor no es necesario que su navegador

Suma dos nmeros

Resta dos nmeros

Multiplica dos nmeros

Divide dos nmeros

Devuelve el resto de dividir ambos nmeros, en

Suma 1 al contenido de una variable.

Resta 1 al contenido de una variable.

Menor o igual $a <= $b $a es menor o igual que $b

Mayor o igual $a >= $b $a es mayor o igual que $b

Devuelve cierto cuando:

Devuelve cierto cuando:

(7>2) && (2<4)

Devuelve verdadero cuando ambas

(7>2) and (2<4)

Devuelve verdadero cuando ambas

Devuelve verdadero cuando al menos una de

Devuelve verdadero cuando al menos una de

Niega el valor de la expresin.

La sentencia if ejecuta una serie de instrucciones u otras dependiendo de la condicin

En este ejemplo la condicin no es verdadera por lo que se ejecuta la parte de cdigo

En el siguiente ejemplo, el valor de $i al comienzo es 0, durante la ejecucin del bucle,

La instruccin for es la instruccin de bucles ms completa. En una sola instruccin nos

La cadena de formateo indica cmo se han de representar las valores que

Nmero sin decimales.

Nmero con decimales.

Aunque existen otros tipos, estos son los ms importantes.

Al pulsar el botn Enviar el contenido de cuadro de texto es enviado a la pgina que

Method GET y POST

<INPUT TYPE="submit" VALUE="Enviar">

En la informacin de cabecera podremos incluir parmetros adicionales al mensaje

Conexin con el servidor de bases de datos

Lista de bases de datos existentes

Abrirla conexin con el servidor.

Contar el nmero de bases de datos con

Presentar la lista de nombres insertando en el bucle la funcin:

Conexin PHP y MySQL

La ejecucin de esta instruccin requiere que previamente se haya asociado un base

Los valores de SELECT MULTIPLE

Sintaxis MySQL de modificacin de registros

Si se pretende modificar ms de un campo se repetir esta definicin tantas veces

Sintaxis MySQL para borrado de registros

Cuando creci la Web, tambin crecieron las aspiraciones de los diseadores, y su

Desde su creacin, JavaScript ha evolucionado mucho. En este captulo aprenderemos

Puntos importantes del lenguaje

JavaScript es un lenguaje orientado a objetos. Qu significa esto?

Como hay ms de un gato, o ms de una ventana, es aconsejable asignarles un

Los objetos tienen propiedades. Un gato tiene pelo, la computadora teclado y la

JavaScript trabaja con eventos utilizando comandos denominados manejadores de

Se produce cuando se modifica el valor de un elemento select, text o textarea en un

onKeyDown, onKeyUp y onKeyPress

onKeyDown: se ejecuta cuando se pulsa una tecla

onMouseDown, onMouseMove y onMouseUp

<script language="Javascript" type="text/javascript">

He aqu una etiqueta de apertura de guin. Le comunica al navegador que espere

sta es su primera lnea de JavaScript, la cual toma el mando de la ventana de

Es una buena idea acostumbrarse a aadir comentarios a los guiones. Se hace

Para comentar un guin.

/* Los comentarios que incluyen muchas lneas

3. // Si solo escribir una lnea de comentario se ponen dos diagonales

Como avisar a un usuario

Uno de los usos principales de JavaScript es el de proporcionar retroalimentacin a los

Para avisar al usuario.