Curso Tallerdeprogramación Web

INSTITUTO SUPERIOR
“HONORIO DELGADO ESPINOZA”

Los Arces S/N – Cayma
Taller de
Programación Web
(HTML, JavaScript, CSS, PHP, MySQL y AJAX)
Gonzalo Neira Calsin

Licenciado en Educación
Ingeniería Informática
AREQUIPA – PERU
2016
Taller de Programación Web con PHP y MySQL Prof. Gonzalo Neira Calsin
1
Lección 1. Tecnologías de desarrollo Web
 Introducción.
 URL (Uniforme Resource Locator)
 Uso y Formato del URL
 Servicios: http, https, ftp, malito, etc.
 Estructura de HTML
 Proyecto: Modelado de BD. Sistema de alquiler de Softwares, Música y Películas.
Introducción
En la actualidad el desarrollo de páginas Web esta en su mayor auge, por ende las tecnologías
de desarrollo Web también han crecido considerablemente, pero no se puede negar que el
fundamento principal esta basado en HTML.
HTML es un lenguaje sencillo pensado para presentar información en la WWW. HTML

(HyperText Markup Languaje), como su nombre indica es un lenguaje de marcas para la
creación de hipertextos. Por hipertexto entenderemos texto con una presentación agradable,
con inclusión de elementos multimedia (gráficos, video, audio) y con la presencia de
hiperenlaces que permiten relacionar otras fuentes de información en documentos hipertextos.
Es el lenguaje utilizado para representar documentos en la WWW (World Wide Web).
URL (Uniforme Resource Locator)
Es un método universal para determinar las direcciones de los recursos de Internet. Cada
dirección de Internet Debe ser única, y está formada por tres partes: Protocolo, Host y
Directorio.
URL es el acrónimo de (Uniform Resource Locator), localizador uniforme de recursos y permite

localizar o acceder de forma sencilla cualquier recurso de la red desde el navegador de la
WWW.
Con la WWW se pretende unificar el acceso a información de servicios que antes eran
incompatibles entre sí, tratando de conseguir que todos los servicios de Internet sean
accesibles a través de la WWW, de esta forma desde un mismo programa se puede tener
acceso a todos los recursos de una forma uniforme y permite que los documentos HTML
incluyan enlaces a otras fuentes de información en servicios como FTP, gopher, WAIS, etc...
Uso y Formato del URL
Las URL se utilizan para definir el documento de destino de los hiperenlaces, para referenciar
los gráficos y cualquier otro fichero que se desee incluir dentro de un documento HTML. Cada
elemento de Internet tendrá una URL que lo defina, ya se encuentre en un servidor de la
WWW, FTP, gopher o las News.
El formato de una URL será:

servicio://maquina.dominio:puerto/camino/fichero
La maquina.dominio indicará el servidor que nos proporciona el recurso, en este caso se

utilizará el esquema IP para identificar. La maquina será el nombre de la maquina y el dominio.
En el caso de nuestra institución el dominio siempre será edu.pe. Por tanto un nombre valido
de maquina será www.isphdelgadoe.edu.pe
El puerto TCP es opcional y lo normal es no ponerlo si el puerto es el mismo que se utiliza

normalmente por el servicio. Solo se utilizará cuando el servidor utilice un puerto distinto al
puerto por defecto.
El camino será la ruta de directorios que hay que seguir para encontrar el documento que se
desea referenciar. Para separar los subdirectorios utilizaremos la barra de UNIX /, se usa por
2
convenio al ser este tipo de maquinas las más usadas como servidores. El nombre de los
subdirectorios y del fichero referenciado puede ser de más de ocho caracteres y se tendrá en
cuenta la diferencia entre mayúsculas y minúsculas en el nombre.
La extensión de los ficheros es también importante, ya que por ella sabe el servidor el tipo de
documento que se accede e indica al cliente (navegador) el modo en que debe tratarse ese
documento.
Ejemplo:
http://www.sil.edu.pe/correo
Protocolo Directorio y/o

Nombre
nombre de
Del Host
archivo
(Dominio)
El Protocolo
HTTP es para acceder a archivos de un servidor Web. Define la forma de acceso al
recurso. Determina la aplicación con la que el navegador accede al recurso.
Nombre De Host (Dominio)

Define al sistema en Internet que contiene el recurso al que se quiere acceder. Host es
el computador central en un entorno de procesamiento distribuido.
Directorio
Indica la ubicación del recurso en el dominio.
Servicios
El servicio, será alguno de los de internet, estos pueden ser:

http: (HyperText Transport Protocol), es el protocolo utilizado para transmitir hipertexto.
Todas las páginas HTML en servidores WWW deberán ser referenciadas mediante
este servicio. Indicará conexión a un servidor de la WWW.
https: (HyperText Transport Protocol Secure), es el protocolo para la conexión a servidores
de la WWW seguros. Estos servidores son normalmente de ámbito comercial y utilizan
encriptación para evitar la intercepción de los datos enviados, usualmente números de
tarjeta de crédito, datos personales, etc.
ftp: (File Transfer Protocol), utilizará el protocolo FTP de transferencia de ficheros. Se
utilizará cuando la información que se desee acceder se encuentre en un servidor de
ftp. Por defecto se accederá a un servidor anónimo (anonymous), si se desea indicar el
nombre de usuario se usará: ftp://maquina.dominio@usuario, y luego le pedirá la clave
de acceso.
gopher, wais: Cualquiera de estos servicios de localización de información, se indicará el
directorio para localizar el recurso concreto.
news: Accede al servicio de news, para ello el visualizador de la WWW debe ser capaz de
presentar este servicio, todos no lo son. Se indicará el servidor de news y como camino
el grupo de noticias al que se desea acceder: news://news.cica.es/uca.es.
telnet: Emulación de terminal remota, para conectarse a maquina multiusuario, se utiliza para
acceder a cuentas públicas como por ejemplo la de biblioteca. Lo normal es llamar a
una aplicación externa que realice la conexión. En este caso se indicará la maquina y
el login: telnet://maquina.dominio@login.
mailto: Se utilizará para enviar correo electrónico, todos los navegadores no son capaces. En
este caso solo se indicará la dirección de correo electrónico del destino: mailto://alias.
correo@domino.
3
ESTRUCTURA DE HTML
Un documento HTML está definido por una etiqueta de apertura <HTML> y una etiqueta de
cierre </HTML>. Dentro de este se dividen dos partes fundamentales la cabecera, delimitada
por la etiqueta <HEAD> y el cuerpo, delimitado por la etiqueta <BODY>. Por tanto la estructura
de un documento HTML será:
<HTML>
<HEAD>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
</BODY>
</HTML>
Ninguno de estos elementos es obligatorio, pudiendo componer documentos HTML que se
muestren sin ningún problema sin incluir estas etiquetas de identificación, pero para una
adecuada estructuración y delimitación se debe tomar en cuenta la estructura.
Cabecera de un documento HTML
La cabecera, está delimitado por las etiquetas <HEAD> y </HEAD>, en esta se incluirán las
definiciones generales que afectarán a todo el documento. Todas sus etiquetas se utilizarán
solo en casos muy determinados, solo la etiqueta TITLE tiene un uso general. A continuación
se citan los distintos componentes que pueden formar la cabecera de un documento HTML
 <TITLE>: Título del documento
Especificará el título del documento HTML, todo documento HTML debe tener un titulo. Dentro
de esta etiqueta no se podrá usar ninguna de las restantes etiquetas HTML. El título se
muestra en la parte superior de la ventana del programa navegador.
Se utiliza principalmente para etiquetar e identificar la página en los bookmarks (marcadores) y

las history list (lista de documentos accedidos) y también se utiliza por algunos servidores de
búsqueda como resultado de una búsqueda para poder intuir el contenido del documento.
 <BASE>: URL base del documento.
Especificará la URL que se tomará como base del documento HTML, esta se utilizará para las
referencias a URL relativas, que se encuentren en los hiperenlaces y en las referencias de las
imágenes. Presenta un atributo HREF, que indicará la URL base del documento, el formato
será el siguiente:
<BASE HREF="URL">
Por ejemplo: <BASE HREF="http ://www.isphdelgadoe.edu.pe/ademico/">
 <META>: Indica refresco del documento
Tiene muchas utilidades, especialmente cuando se trabaja JavaScript y formularios. Otra

utilidad es indicar al documento los tiempos de refresco automático o indicar que esta debe
sustituirse al cabo de determinado número de segundos.
El formato es el siguiente:
<META HTTP-EQUIV="REFRESH" CONTENT="numero_segundos; URL=URL_de_refresco">
Se indica el número de segundos que deben pasar antes del refresco y el documento HTML
que sustituye al actual. Si se indica cero segundos la transición entre uno y otro documento
será inmediata. Si no se indica URL el documento actual se refrescará.
4
Ejemplo.
El ejemplo muestra una página con una imagen y texto, que al término de 30 segundos pasa
automáticamente al URL http://www.google.com.pe.
<HTML>
<HEAD>
<TITLE> Mi página Web en HTML </TITLE>
<META HTTP-EQUIV="refresh" CONTENT="30;URL=http://www.google.com.pe">
</HEAD>
<BODY>
<CENTER>
<MARQUEE>
<IMG SRC="CATROSES.JPG"><BR><H1>Mi gato</H1><BR>
¡¡¡ Bienvenido a mi página!!!
</MARQUEE>
</CENTER>
</BODY>
</HTML>
Actividad
Diseñe una página que muestre un álbum fotográfico.
Detalle.
 La página Web inicialmente debe mostrar una página denominado index.htm donde se
observe una presentación muy breve del álbum, autor y lema.
 Las páginas sucesivas deben mostrarse en relación al título de la imagen, cada página
debe tener un título y una breve reseña del contenido.
 Todo el proyecto debe hallarse en una carpeta denominada proyectoAlbum y las
imágenes deben hallarse en una carpeta denominada img.
5
Lección 2. Diseño de Páginas con HTML
 Cuerpo de un documento HTML
 Hiperenlaces
 Tipos de enlaces
 Tablas
 Documentos con frames
 Proyecto: Diseño de página maestra
Cuerpo de un documento HTML
El cuerpo de un documento HTML estará delimitado por las etiquetas <BODY> y </BODY> y
en el se incluirán todas las instrucciones HTML y el texto que forman el documento. Entre otros
tenemos los siguientes atributos.
Atributos de <BODY>
ATRIBUTO DESCRIPCIÓN
BACKGROUND="URL": Imagen de fondo
BGCOLOR=#rrvvaa ó nombre del color color del fondo
TEXT=#rrvvaa ó nombre del color. color del texto
LINK=#rrvvaa ó nombre del color. color hiperenlaces no accedidos
VLINK=#rrvvaa ó nombre del color. color hiperenlaces ya accedidos
<BODY BACKGROUND="URL" BGCOLOR=#rrvvaa TEXT=#rrvvaa LINK=#rrvvaa VLINK=#rrvvaa >
Ejemplo:
<BODY BACKGROUND= http://www.img.es/fondos/fondo1.gif BGCOLOR=blue TEXT=white LINK=FF0000 VLINK=008200>
<HR Align=LEFT|RIGTH|CENTER Regla horizontal. Noshade (No muestra la
NOSHADE SIZE=n WIDTH=n> sombra de la barra, evitando el efecto en 3D)
<CENTER> Centrado de texto e imágenes
<H1> - <H6> Cabeceras de títulos
<FONT SIZE=n> Tamaño de la fuente
<BASEFONT SIZE=n> Fuente por defecto
<UL TYPE = DISK ó CIRCLE ó SQUARE >
<LH> Titulo de la lista </LH>
<LI> Elemento 1 Índice con números
<LI> Elemento 2, …
</UL>
<OL START = n TYPE = A ó a ó I ó i ó 0 >
<LH> Titulo de la lista </LH>
<LI> Elemento 1 Índice con letras
<LI> Elemento 2, …
</OL>
HIPERENLACES
Es la utilidad básica del hipertexto, permite indicar zonas de texto o imágenes que si son
seleccionados por el lector del documento nos traslada a otros documentos HTML u otras
zonas del documento actual.
Estructura de los enlaces

En general, los enlaces tienen la siguiente estructura:
<A HREF="xxx"> yyy </A>
6
Donde xxx es el destino del enlace (entre comillas). yyy es el texto indicativo en la pantalla del
enlace.
Tipos de Enlaces
1. Enlaces dentro de la misma página
En este caso, en lugar de xxx, se sustituye por #marca (origen) que representa el destino del
enlace a donde se desea saltar y en el destino debe escribir el nombre de la marca (la palabra
marca puede ser cualquier palabra). Quedando así la estructura.
<A HREF="#marca"> YYY </A> (Origen)

…
…
<A NAME="marca"> </A> (Destino)
Ejemplo. Se observa una investigación de varios Capítulos. El salto o hipervínculo en la

misma página es de los capítulos a sus contenidos.
<HTML>
<HEAD>
<TITLE> REDES INALAMBRICAS </TITLE>
</HEAD>
<BODY>
<PRE>
<A HREF="#marcaCap1">CAPITULO I </A>
………
………
<A NAME="marcaCap1"> </A> CAPITULO I
</PRE>
</BODY>
</HTML>
2. Enlaces con otra página
Para vincular una página con otra, hay que sustituir en lugar de xxx el nombre y extensión de la
página a vincular.
< A HREF = ”segunda.html” > yyy < /A >
Si se desea que vaya a un sitio concreto de otra página, en vez de ir al principio de la página a
donde va por defecto, al nombre de la página debe acompañar con el nombre de la marca.
<A HREF=”segunda.html#final”> yyy < /A >
NOTA: Estamos suponiendo que las páginas a acceder están en el mismo directorio. Caso
contrario debe escribir el nombre de la subcarpeta. Ejemplo.
<A HREF=”miWed/segunda.html#final”>
3. Enlaces con una página fuera de nuestro sistema
Si queremos enlazar con una página que esté en un servidor distinto al que almacena nuestra
página, es necesario conocer su URL o podría ser una dirección de ftp, gopher, etc. Colocamos
el URL en vez de xxx. Ejemplo
<A HREF="http://www.isphdelgadoe.edu.pe/"> Página del ISP HDE </A>
4. Enlaces con una dirección de E-mail
En este caso, sustituimos xxx por mailto: seguido de la dirección de E-Mail. Ejemplo:
<A HREF="[email protected]"> comentarios a mi correo <A>
7
TABLAS
Permite la representación de datos por filas y columnas, en forma tabular. La definición es muy
flexible indicando solo los elementos que forman cada fila y columna, calculándose de forma
automática el tamaño que deben tener las celdas. En una tabla podemos introducir todo tipo de
elementos del lenguaje HTML como imágenes, enlaces, texto, listas, cabeceras, formularios,
etc.
Atributos de <TABLE>
BORDER =n borde alrededor de la tabla.
Indica el espacio que debe existir entre las
CELLSPACING=n
distintas celdas de la tabla.
Es la cantidad de espacio entre el borde de la
CELLPADDING=n
celda y el contenido de esta.
WIDTH=valor o porcentaje%: ancho de la tabla.
HEIGHT=valor o porcentaje% alto de la tabla.
<CAPTION ALIGN=TOP|BOTTOM>Titulo de la
<CAPTION> Titulo de la tabla
tabla</CAPTION >
<TR ALIGN= LEFT ó CENTER ó RIGHT
<TR> Fila de la tabla
VALIGN= TOP ó MIDDLE ó BOTTOM >
Indica la alineación del elemento dentro de la
ALIGN = LEFT ó CENTER ó RIGHT
celda
Indicará la alineación vertical del dato dentro de
VALIGN = TOP ó MIDDLE ó BOTTOM
la celda
<TH> o <TD> Una celda de la tabla
número de filas que ocupará está celda en la
ROWSPAN
misma fila
número de columnas que ocupará la celda
COLSPAN
actual
NOWRAP no se divida la línea por defecto
Ejemplos:
<P>TABLA <BR>
<TABLE BORDER=5 CELLSPACING=2 CELLPADDING=3>
<TR> <TD> F1C1</TD> <TD> F1C2</TD> <TD> F1C3</TD></TR>
</TABLE>
<P>TABLA CON ATRIBUTO COLSPAN<BR>

<TR> <TD COLSPAN=2> CCCCCCCC </TD> <TD> F1C3</TD></TR>
<TR> <TD> F2C1 </TD> <TD> F2C2 </TD> <TD> F2C3</TD></TR>
<TR> <TD> F3C1 </TD> <TD> F3C2 </TD> <TD> F3C3</TD></TR>
</TABLE>
<P>TABLA CON ATRIBUTO ROWSPAN<BR>

<TR> <TD> F1C1</TD> <TD> F1C2</TD> <TD > F1C3 </TD></TR>
<TR> <TD> F2C1</TD> <TD> F2C2</TD> <TD ROWSPAN=2> RRRR </TD></TR>
<TR> <TD> F3C1</TD> <TD> F3C2</TD> </TR>
</TABLE>
<P>TABLA CON ATRIBUTOS ROWSPAN Y COLSPAN<BR>

<TR><TD> F1C1 </TD> <TD> F1C2 </TD><TD>F1C3</TD></TR>
<TR><TD COLSPAN=2 ROWSPAN=2 >CCRR</TD><TD>F2C3</TD></TR>
<TR><TD> F3C3 </TD></TR>
</TABLE>
8
DOCUMENTOS CON FRAMES
Un documento con frames se define de manera diferente a un documento normal, siendo la

estructura del documento distinta, en este caso no se define la etiqueta BODY. Su estructura
es la siguiente:
<HTML>
<HEAD>
…
</HEAD>
<FRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnas>
<FRAME SRC=URL_1 NAME="Nombre de la frame1">
<FRAME SRC=URL_2 NAME="Nombre de la frame1">
...
</FRAMESET>
<NOFRAMES>
Instrucciones HTML que se mostrará en los navegadores que no soporten frames.
</NOFRAMES>
</HTML>
Se definirá solo uno de los atributos, o la lista de filas (ROWS) o la lista de columnas (COLS).
Dentro de la etiqueta NOFRAMES se podrá incluir una explicación de que el documento solo
es visible con los navegadores que soporten frames, o bien incluir una versión del documento
que se muestre sin necesidad de frames.
Atributos de <FRAMESET>
NAME Indica el nombre de la frame
MARGINWIDTH ancho del margen, en puntos de la pantalla.
MARGINHEIGHT alto de los márgenes.
SCROLLING=YES, NO, AUTO tendrá o no una barra
NORESIZE no debe ser variada de tamaño por el usuario
TARGET Atributo para indicar la frame de destino
BASE (Se especificar en la Indicará la frame en la que se mostrará por defecto todos
cabecera <HEAD>) los hiperenlaces del documento actual.
<FORM ACTION="url"
Indicará la frame de destino del resultado del formulario.
TARGET="frame">
Existen unos valores especiales de TARGET=xxx
Donde xxx puede ser:

"_blank" Indica que se muestre en una nueva ventana vacía, para seguir el enlace se lanza
otra ventana distinta del navegador.
"_self" Se mostrará en la misma ventana o frame que lo referencia, se puede usar para
modificar el valor dado por BASE.
"_parent" Se muestra en frame o estructura de frames que llamó al documento actual.
"_top" Indica que se muestre en la ventana completa, eliminando la estructura de frames
que tenga la ventana.
Actividad
Desarrolle un proyecto denominado: proyectoPaginaBonita

 El detalle y los archivos se encuentran en la carpeta denominado paginaBonita
 Los títulos de los hipervínculos deben hallarse en los costados derecho e izquierdo y el
detalle debe mostrarse en el centro de la página definida con marcos.
 Solo el marco del centro debe tener una barra de desplazamiento.
 Defina las páginas que sean necesarias para lograr una presentación adecuada.
9
Lección 3. Diseño de páginas con Formularios
 Formularios. Tipos; Texto, Password, Checkbox, Radio, Hidden, Submit, Image, Reset,
Textarea, Select, etc.
 Instalación y configuración de Servidor Web Apache.
 Instalación y configuración de Base de datos MySQL.
 Proyecto: Diseño págs. Esquema con HTML
FORMULARIOS (FORM)
Los formularios son plantillas que permiten la creación de documentos HTML con peticiones de
datos. La principal utilidad de los formularios es la posibilidad de crear cuestionarios,
encuestas, páginas de comentarios o cualquier documento en la que se desee una interacción
por parte del usuario.
<FORM> Definición de formularios
Existe una instrucción HTML para la creación de formularios esta es FORM, que tiene la
siguiente estructura:
< FORM ACTION="fichero que trata el formulario" METHOD= POST | GET >
...
Elementos que forman el formulario
...
< /FORM>
Dentro de la etiqueta de formulario se definirán los distintos elementos de petición de datos.
Los atributos que presenta la etiqueta FORM son los siguientes:
ACTION: Indica el programa que se encargará de tratar los datos del formulario. Este
programa debe encontrarse en el servidor y estar escrito en algún lenguaje de programación.
A este programa se pasará como parámetros los datos introducidos en el formulario y retornará
un código HTML que se mostrará tras procesar el formulario.
METHOD: Indica el protocolo usado para el envío de los datos. Con POST envía los datos en
la entrada estándar del programa que trata el formulario y con GET los datos se pasan por
parámetro, en la línea de comandos, al programa. El usar uno u otro método vendrá
determinado por como son tratados los parámetros en el formulario. El método de uso más
normal será POST.
<INPUT> Entrada básica de datos
La etiqueta INPUT se utiliza para definir gran variedad de tipos de campos de entrada de datos.
Por lo general serán entradas de texto corto ú opciones. El formato básico es el siguiente:
< INPUT TYPE=( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT |

IMAGE | RESET ) NAME="Variable que toma el valor"
VALUE="Valor de Inicialización">
El atributo TYPE se usa para determinar el tipo de recuadro de dialogo de entrada que se está
definiendo. El atributo NAME especifica el nombre de la variable que se define. Este nombre
será pasado al programa que trata el formulario junto con el valor que le asigno el usuario del
formulario. El atributo VALUE suele especificar el valor de inicialización, que será el valor por
defecto.
A continuación se relatan los distintos tipos de instrucciones de entrada.
<INPUT TYPE=TEXT...> Texto corto
< INPUT TYPE=TEXT NAME="variable" VALUE="valor inicial" SIZE="tamaño"

MAXLENGTH="longitud máxima" >
10
Donde:
SIZE, tamaño de la ventana de introducción de texto. Aquí solo se define la parte
visible, pero el usuario podrá introducir más texto si lo desea.
MAXLENGTH, indicar el máximo número de caracteres que se permiten en la entrada.
NAME, indica el nombre de la variable que toma el valor de la entrada y
VALUE, especifica el valor de inicialización del campo.
De todos los atributos solo será obligatorio NAME, siendo el resto opcionales.
<INPUT TYPE=PASSWORD...> Palabras secretas
Es similar al anterior pero en este caso no se imprimen los caracteres según se van
introduciendo, se muestra un asterisco en vez de los caracteres. Solo se puede ver el número
de caracteres, pero no valor. Se usa para la introducción de claves de acceso (passwords) y
datos que no deban ser vistos al introducirlos. El formato es:
< INPUT TYPE=PASSWORD NAME="variable" VALUE="valor inicial"
SIZE="tamaño" MAXLENGTH="longitud máxima" >
<INPUT TYPE=CHECKBOX> Botones de selección
El checkbox es un botón que puede presentar dos estados activado o desactivado. El formato
es el siguiente:
< INPUT TYPE=CHECKBOX NAME="variable" CHECKED> Opción
Se requiere el atributo NAME. Los valores que tomará la variable serán on ó off, dependiendo
de su estado. Si el botón estaba activado cuando se envían los datos del formulario se
enviaran el nombre de la variable y el valor que indique su estado. Si se incluye el atributo
CHECKED el botón se encontrará activado en la inicialización. Si se indica el atributo VALUE,
cuando se envían los datos con el botón activado se mandará la variable con el valor indicado y
en caso contrario no se mandará ningún valor.
<INPUT TYPE=RADIO...> Selección entre múltiples opciones
Se usa cuando la opción puede tomar un valor simple de una serie de

alternativas. En este caso se presentan unos valores opcionales de los que
solo puede tomar un valor. Para especificar cada uno de estos valores se
incluirá una etiqueta RADIO por cada una de las posibles alternativas, su
estructura general será:
< INPUT TYPE=RADIO NAME="variable" VALUE="valor 1" > Opción 1
< INPUT TYPE=RADIO NAME="variable" VALUE="valor 2" CHECKED > Opción 2
. . .
< INPUT TYPE=RADIO NAME="variable" VALUE="valor n" > Opción n
Cada una de las etiquetas RADIO tendrá el mismo atributo NAME, y con un distinto atributo
VALUE que será el valor que tome si se selecciona esta opción. Para inicializarlo se usa el
atributo CHECKED que se indicará solo en la opción que se quiera especificar por defecto.
<INPUT TYPE=HIDDEN...> Parámetros ocultos

En este caso no se muestra ningún campo para la entrada de datos al usuario, pero la variable
y el valor especificado es enviado junto con el formulario. Se suele usar para transmitir
información de estado ó control ó para enviar algún tipo de información que no debe ser
variada en el formulario, pero sí debe ser enviada junto a este. El formato es:
< INPUT TYPE=HIDDEN NAME="variable" VALUE="valor" >
Deberá incluir tanto la variable como el valor.
<INPUT TYPE=SUBMIT...> Enviar Datos
11
Este botón se usa para enviar los datos del formulario, al pulsar el botón, se acaba la
introducción del formulario y pasa el control al programa indicado en ACTION. En todo
formulario debe existir al menos un botón de SUBMIT, si solo incluye un recuadro del tipo
TEXT no será necesario incluirlo. El formato es:
< INPUT TYPE=SUBMIT VALUE="mensaje a mostrar" >
El atributo VALUE especifica una etiqueta no editable que se mostrará en el botón de envío. Lo
normal es que este botón no envíe datos, pero si se indica el atributo NAME con un nombre de
variable será enviada la variable con el valor de VALUE. Esto puede ser útil si se incluyen
distintos botones de SUBMIT para distinguir cual fue pulsado.
<INPUT TYPE=IMAGE...> Botón de Envío gráfico
Su funcionalidad es similar al botón de SUBMIT, se usa igualmente para enviar los datos de un
formulario, pero en este caso se presenta una imagen como botón. Igualmente al pulsar sobre
el botón se enviará el formulario. El formato es el siguiente:
< INPUT TYPE=IMAGE NAME="variable" SRC="URL de la Imagen" >
El punto de la imagen en el que pulsa el usuario también es pasado al programa intérprete del
formulario, de forma que la imagen igualmente podría ser un mapa sensible. Se pasarán dos
parámetros x e y con las coordenadas del punto donde pulso, siendo el programa interprete el
encargado de determinar la zona donde se pulsó, si se desea.
<INPUT TYPE=RESET...> Borrar los datos
Este botón se usa para volver a los valores por defecto todos los elementos del formulario,
borrando todos los datos introducidos por el usuario. Su formato es el siguiente:
< INPUT TYPE=RESET VALUE="Etiqueta a mostrar" >
El atributo VALUE especifica la etiqueta que tendrá el botón.
<TEXTAREA> Texto en múltiples líneas
Permite la introducción de un texto que

puede abarcar varias líneas, introduciendo
este en forma de párrafo. El formato general
será:
<TEXTAREA NAME="variable" ROWS=Filas COLS=Columnas>

Texto de Inicialización
que puede incluir varias líneas.
</TEXTAREA>
En este caso se presenta una ventana del tamaño especificado con los atributos ROWS, filas, y
COLS, columnas. El texto expresado entre la etiqueta de inicio y de final sirve para indicar que
texto aparecerá inicialmente en la ventana, en este texto se podrán incluir las marcas del
lenguaje HTML, pero solo se tendrán en cuenta para incluir acentos y otro tipo de efectos.
<SELECT> Elección entre múltiples opciones
Se usa para menús simples o múltiples. Define menús de tipo pop-up (menú de barras) y
ofrece una alternativa más compacta al uso de botones RADIO o CHECKBOX. Su formato es
el siguiente:
<SELECT NAME="variable">
< OPTION VALUE=valor1> Opción Primera
< OPTION SELECTED VALUE=valor2> Opción Segunda
. . .
12
< OPTION VALUE=valorn> Opción Enésima
</SELECT>
Si se desea que sea un menú múltiple se deberá incluir el atributo

MULTIPLE en la etiqueta de SELECT, en este caso se mostrarán
todas las opciones en forma de tabla, en el otro caso se mostrará la
opción activa y un botón para poder modificar esta opción. En ambos
casos solo podrá seleccionarse una de las opciones. Cuando se envía
el resultado del formulario la variable NAME tomará el valor de la
opción que este activa.
La etiqueta OPTION que contenga el atributo SELECTED será considerada la opción por
defecto, caso de no especificarse ninguna se considerará la primera de las opciones.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo de Formulario
</TITLE>
</HEAD>
<BODY>
<H1> Ejemplo de Formulario </H1>
<FORM action="procesa_formulario.php"
method="POST" name="primer_formulario">
<p>Apellidos :
<INPUT type="text" name="apellidos" value="Ingrese Apellidos" size="30" maxlength="30">
<p>Nombres :
<INPUT type="text" name="nombres" value="Ingrese Nombres" size="30" maxlength="30">
<p>Edad :
<INPUT type="text" name="edad" value="" size="2" maxlength="2">
<p>Año de Nacimiento :
<SELECT name="ano">
<OPTION value="2006">2006</OPTION>
<OPTION value="2005" SELECTED>2005</OPTION>
</SELECT>
<p>Sexo :
<INPUT type="radio" name="sexo" value="m" checked> Masculino
<INPUT type="radio" name="sexo" value="f"> Femenino
<p>
<INPUT type="reset" value="Borrar">
<INPUT type="submit" value="Enviar Datos">
</FORM>
</BODY>
</HTML>
Actividad.
Diseñe un formulario que permita ingresar los datos que se muestra en la imagen.
Detalle:
 El diseño debe incluir el uso de tablas para una adecuada distribución y formato del
formulario.
 Los datos para la fecha de
nacimiento debe estar
preestablecida para que el
usuario pueda seleccionar.
 El sexo y las opciones deben
también presentar opciones para
seleccionar.
 Tiene fondo de celdas de
diferente color.
13
Instalación y configuración del Servidor Web Apache y Base de datos
MySQL.
Para instalar y configurar el servidor Apache y Base de datos MySQL se debe ejecutar
AppServ. Donde AppServ, trae todo lo necesario para el desarrollo Web, incluyendo las
herramientas para desarrollar Bases de datos con Lenguaje PHP.
¿De qué trata AppServ?

Es un software libre, que permite la instalación bajo el Sistema Operativo Windows. El
paquete de instalación contiene:
* Apache Web Server (versión 2.2.4)

* Lenguaje PHP (versión 5 o 4, en mi caso instale la 5.2.3)
* Base de datos MySQL (versión 5.0.45)
* Manejador de base de datos phpMyAdmin (versión 2.10.2)
Esto es lo que incluye la ultima versión del paquete AppServ 2.6.0.
Esta versión está formada por 4 paquetes (apache, php, mysql, phpmyadmin), cada uno por
separado sigue sacando nuevas versiones, que podemos instalar por separado o esperar una
nueva versión de AppServ. Por lo general no debemos adelantarnos a instalarlas por
separado porque pueden ser versiones Betas. Es mejor esperar el relance final.
Descargar AppServ, Gratis
http://www.appservnetwork.com/index.php?newlang=spanish
Instalar AppServ
1) Ejecutamos el instalador que se ha bajado. Aparece la imagen que vemos debajo.

Debemos dar, next. (Ventana No. 1)
2) Aparecen los términos y licencia, hay que darle en (I Agree). (Ventana No. 2)
Ventana No. 1 Ventana No. 2
3) Aqui hay que elegir la ruta en donde se instalara AppServ, por recomendacion lo
dejamos en la ruta que viene por defecto, es decir: C:\AppServ, le damos Next.
(Ventana No. 3)
14
4) En esta parte debemos seleccionar los componentes que vamos a instalar. Por defecto
vienen marcados como disponibles (apache, mysql, php, phpmyadmin). La instalación
nos da la opción de desmarcar alguno, pero es mejor instalar todos para tener el
paquete completo de Servidor y desarrollo Web, le damos Next. (Ventana No. 4)
5) En esta parte debes rellenar el nombre del servidor y el email del administrador del
servidor, en este caso lo dejamos con localhost, luego se escribe un correo válido y
finalmente el puerto 80. (Ventana No. 5)
6) Configuración MySQL Server, en esta parte debemos poner atención, ya que aquí se
debe indicar el Password (Contraseña), para que pueda ser utilizado en nuestros
códigos PHP al llamar a la base de datos. Se escribe el password y luego se confirma
nuevamente y lo demás se deja como aparece en la imagen.
Por defecto el usuario será root, (una vez instalado puedes cambiar, agregar o quitar
usuarios) y la Contraseña es la que acabas de ingresar en el paso anterior, este lo
usaras para la conexión con la base desde tus programas PHP, por eso es de gran
importancia recordar. Le damos Next. (Ventana No. 6
7) Para terminar la instalación, como se ve en la imagen, podemos elegir que al finalizar

comience inmediatamente a funcionar nuestro Servidor Apache y el Servidor de bases
15
de datos MySQL, lo dejamos chequeado y le damos Finish, con esto hemos acabado.
(Ventana No. 7)
8) Ahora para comprobar que la instalación del servidor web se instalo correctamente,
abrimos el navegador, y se escribe, http://localhost . Debe salir igual como muestra
en la imagen. Lo único que puede variar es la versión. (Ventana No. 8)
Esta parte es la mas importante, Si instalamos la ruta por defecto usando c:\AppServ,
esta ubicación http://localhost es en realidad c:\AppServ\www Por lo tanto todos los
programas que realicen en PHP, Deben ir dentro de la carpeta "www".
Por ejemplo si creamos un archivo llamado "holamundo.php" debemos copiarlo a

directorio "c:\AppServ\www". Para poder ver el contenido del archivo
"holamundo.php", debemos en el navegador ingresar http://localhost/holamundo.php
9) Para el entorno de desarrollo utilizamos DEVPHP. La instalación es todo por defecto. Al

finalizar la instalación debe hacer que se ejecute (Seleccionar la primera opción) y luego
seleccionar la carpeta www de AppServ (C:\AppServ\www). (Ventana No. 9)
10) Finalmente debe instalar el navegador Mozilla, todo por defecto. (Ventana No. 10)
16
Lección 4. JavaScript. Operadores y objetos
 ¿Qué es JavaScript?
 JavaScript y HTML
 Inclusión de ficheros externos con código JavaScript.
 Escritura de cadenas de texto en la página.
 Variables, valores, tipos de datos y literales.
 Operadores: aritméticos, comparación, condicionales.
 Objetos y clasificación en JavaScript
 Cuadros de dialogo, tipos de datos, variables.
 Proyecto: Diseño págs. Esquema con JS
Introducción
JavaScript es un lenguaje de scripts compacto basado en objetos. Originariamente era

denominado LiveScript, y fue desarrollado por Netscape para su navegador Netscape
Navigator 2.0. Fue éste el primer cliente en incorporarlo. Se ejecuta sobre 16 plataformas
diferentes, incluyendo los entornos de Microsoft e incluso el MS Explorer lo incorpora en su
versión 3.0
JavaScript permite la realización de aplicaciones de propósito general a través de la WWW y

aunque no está diseñado para el desarrollo de grandes aplicaciones es suficiente para la
implementación de aplicaciones WWW completas o interfaces WWW hacia otras más
complejas.
JavaScript se basa en el potente lenguaje Java en su uso y sintaxis, pero es interpretado, no

compilado. Esto quiere decir que el código de aplicación de JavaScript es transferido como
texto al navegador junto con el texto HTML. Dicho código se ejecuta dentro del navegador, con
lo que se capacita al usuario para desarrollar aplicaciones sencillas que puedan interaccionar
con el usuario y ayudarle.
Con JavaScript es posible responder a determinadas acciones del usuario, tales como
pulsaciones del ratón, movimientos del ratón sobre un vínculo, y crear una entrada de datos
(input). También se pueden crear páginas dinámicas que cambian a solicitud del usuario, e
incluso ejecutar sonidos o mini-aplicaciones cuando un usuario entra o abandona la pagina.
Este tipo de acomodación a nivel del cliente permite una enorme capacidad de interactividad
con los usuarios de sus páginas Web.
El lenguaje JavaScript se parece a Java, pero es más sencillo y más fácil de aprender. Una
aplicación en JavaScript puede tener tan solo una línea u ocupar varias páginas. Su
complejidad depende del grado en que sus instrucciones hayan de interaccionar con la pagina
en que se encuentra dicha aplicación. Para la mayoría de los creadores de páginas Web, una
de las primeras utilidades de JavaScript se da en la validación de formularios. Se llama así a la
capacidad de un formulario en HTML para comprobar los datos introducidos por un usuario
antes de presentarlos, hecho que mejora notablemente las prestaciones en su servidor y que a
la vez disminuye la espera del usuario.
CARACTERÍSTICAS MÁS IMPORTANTES:
 JavaScript es un lenguaje interpretado, es decir, no requiere compilación. El

navegador del usuario se encarga de interpretar las sentencias JavaScript contenidas
en una página HTML y ejecutarlas adecuadamente.
 JavaScript es un lenguaje orientado a eventos. Cuando un usuario pincha sobre un
enlace o mueve el puntero sobre una imagen se produce un evento. Mediante
JavaScript se pueden desarrollar scripts que ejecuten acciones en respuesta a estos
eventos.
 JavaScript es un lenguaje orientado a objetos. El modelo de objetos de JavaScript
esta reducido y simplificado, pero incluye los elementos necesarios para que los scripts
puedan acceder a la información de una página y puedan actuar sobre la interfaz del
navegador.
17
JAVASCRIPT Y HTML
Los programas en JavaScript aparecen incrustados en los propios documentos HTML como si
de HTML se tratara. Pueden integrarse básicamente de dos formas:
 Como programas propiamente dichos, combinando funciones y sentencias, con el
mismo aspecto que tendría el código de cualquier otro lenguaje.
 Introduciendo manejadores de eventos JavaScript en etiquetas HTML.
La etiqueta: <script> </script>
La manera más convencional en que aparece JavaScript en un documento es en forma de

programa. Podemos empezar por mostrar unos breves scripts y ver como son implementados
dentro de documentos HTML. Empezaremos con un pequeño programa que muestra un texto
en un documento HTML.
<html>
<head>
<title>¡Mi primer JavaScript! </title>
</head>
<body>
<br>
Este es un documento HTML normal
<br>
<script language="JavaScript">
document.write("Esto es JavaScript!")
</script> <br>
En HTML otra vez.
</body>
</html>
Este primer programa se limita a escribir en pantalla un determinado texto para lo que se
emplea el código document.write. En este código, document es un objeto creado por el
sistema que hace referencia al propio documento y write es uno de los métodos que
proporciona para interactuar con él. El resultado de cargar este documento en un browser que
interprete JavaScript será la aparición de los dos textos, el escrito en JavaScript y el escrito en
HTML, sin que el usuario sea consciente del proceso.
El resultado seria:
Este es un document HTML normal.

Esto es JavaScript!
En HTML otra vez
Este script no es muy útil pero sirve para mostrar el uso de la etiqueta <SCRIPT>. Se usa estas
etiquetas en cualquier lugar del documento, tanto en la cabecera como en el cuerpo, aunque si
se declaran funciones es más aconsejable hacerlo en la cabecera.
La etiqueta <SCRIPT>es una extensión de HTML en la que se encierra el texto que compone
el código del programa JavaScript correspondiente de la manera siguiente:
<SCRIPT LANGUAGE="Versión de JavaScript";>


</SCRIPT>
Cualquier browser ignora las etiquetas desconocidas, por lo tanto, aquellos que no soporten
JavaScript ignorarán el comienzo y el final del código del programa (encerrado entre las
etiquetas <SCRIPT> y </SCRIPT>). Para que el resto del código también sea ignorado y no
aparezca en la pantalla del cliente, se encierra entre los símbolos de comentario HTML.

18
Los navegadores que, por el contrario si lo soporten, interpretarán el código encerrado entre las
etiquetas SCRIPT e ignorará el principio de la línea en el script que comienza con la doble
slash (//) o bien el encerrado entre "/*" y "*/", que son los símbolos de comentarios en este
lenguaje.
Esta etiqueta admite un parámetro opcional LANGUAGE que indica el lenguaje de script que se
ha incrustado en el documento así como la versión de JavaScript.
INCLUSIÓN DE FICHEROS EXTERNOS CON CÓDIGO JAVASCRIPT
Los scripts que queremos utilizar en una página suelen escribirse en la misma página,
normalmente entre las etiquetas <head> y </head>. Determinados scripts pueden aparecer
entre las etiquetas <body> y </body> (por ejemplo los gestores de eventos, o scripts que
escriben código on-line), pero lo normal es que la mayoría de las funciones estén en la
cabecera de la página.
Otra posibilidad es la inclusión del código JavaScript en ficheros externos, de extensión ".js"
Estos ficheros son enlazados desde la página HTML donde se utilizan con este código (que
debería ir también entre <head> y </head>).
<SCRIPT LANGUAGE=”JavaScript” SRC=”fichero.js”> </SCRIPT>
El atributo SRC debe especificar una URL, relativa o absoluta.
Por ejemplo:
<SCRIPT SRC="libreria.js"></SCRIPT>
<SCRIPT SRC="http://home.netscape.com/functions/libreria.js">
Esta librería no puede contener código HTML, únicamente definiciones de funciones

JavaScript.
ESCRITURA DE CADENA TEXTO EN LA PÁGINA HTML
Para escribir la cadena Texto en la página HTML:
Document.write(―Texto‖)
Para escribir la cadena Texto en la página HTML más un retorno de carro:
Document.writeln(―Texto‖)
VARIABLES Y VALORES
Las variables de JavaScript contienen valores que se emplean en la aplicación. JavaScript

permite asignar a sus variables valores para poder referenciarlas en cualquier parte de su
código.
Los nombres de las variables distinguen entre mayúsculas y minúsculas y deben comenzar por
una letra o un guión bajo ( _ ).
Los tipos de valores que puede contener una variable JavaScript son:
 números
 operadores lógicos (booleanos)
 cadenas
La palabra clave null asigna valores nulos a las variables. JavaScript usa un único tipo de datos
para números, es decir, el número JavaScript puede contener enteros, reales y dobles sin tener
que recurrir a tipos diferentes especializados. Además JavaScript maneja los objetos de datos
con el mismo tipo de datos.
19
Para declarar las variables en JavaScript se utiliza la instrucción var. A cada variable se le
asigna un nombre, y opcionalmente, un valor inicial. Si no se trata de una función, la instrucción
var es opcional, pero se recomienda utilizarla, para evitar una sobreescritura de variables
locales por parte de variables globales.
Las variables locales se declaran generalmente dentro de una función para que sólo esa
función pueda utilizar la variable. Las variables globales se declaran fuera de toda función para
que se puedan utilizar en todas las funciones.
La sintaxis para la instrucción var es: var nombrevar[=valor ] [..., nombrevar[=valor] ]
Un ejemplo: var numSillas =10, precioXsilla =12.0;
TIPOS DE DATOS
Las aplicaciones en JavaScript pueden manejar numerosos tipos de datos diferentes, pero
JavaScript se las arregla para hacerlo sólo con tres tipos de datos distintos. Además JavaScript
puede decidir por el programador qué tipo de variable debería emplearse durante la ejecución
de la secuencia de órdenes. Los tipos de datos son convertidos automáticamente cuando se
ejecuta la aplicación en JavaScript.
Ejemplo 1. Si se tienen las variables var1 = "12"

var2 = 10
y luego se indican las siguientes instrucciones

x = var1 + var2 --------- >>> x es “1210”
y = var2 + var1 --------- >>> y es “1012”
Ejemplo 2. si se tiene las variables var1 = "Pedro"

var2 =10 y luego
y = var2 + var1 --------- >>> y es ERROR
LITERALES
Los valores iniciales que pueden asignarse a las variables se denominan literales. Estos tipos
de valores no son variables, sino, más bien, expresiones constantes de valores para tipos de
datos.
Ejemplos de valores literales:
32
54.94
"programar es divertido"
Actividad
Para definir las páginas siguientes debe utilizar código JavaScript, definidos en la cabecera o
en el cuerpo de la página.
 Representar una página con fondos de diferente color utilizando JavaScript.
 Declare variables donde se observe conversiones y concatenación de caracteres y
números.
 Defina una página que efectué operaciones básicas con valores previamente definidos
en las variables.
 Defina variables y operaciones que permitan determinar los valores para cada incógnita
de ecuaciones con tres incógnitas.
 Defina una tabla con fotos y texto en las diferentes celdas.
20
OPERADORES
Operadores de comparación, compara sus operandos y devuelve un valor lógico basado en
si la comparación es verdad o no. Los operando pueden ser numéricos o cadenas.
Operador Descripción Operador Descripción

== " Igual a" > "Mayor que"
=== "igual a" (JS v1.3) >= "Mayor o igual que "
!= " No igual a" < "Menor que"
!== " No igual a" (JS v1.3) <= "Menor o igual que"
OPERADORES LÓGICOS
Los operadores lógicos, se utilizan para combinar múltiples comparaciones en una expresión
condicional. Un operador lógico toma dos operandos cada uno de los cuales es un valor true o
false y devuelve un valor true o false.
Operador y descripción Operador y descripción Operador y descripción

&& ( ―Y‖ ) || ( " O " ) ! ( ― No ‖ )
OPERADORES DE CADENA
Los valores cadena pueden compararse usando los operadores de comparación.
Adicionalmente, se puede concatenar cadenas usando el operador +
OPERADORES DE ASIGNACIÓN
El operador de asignación '=' le permite asignar un valor a una variable.
Operador Descripción
= Asigna valor del operando de la der. a la variable de la izq. Ej: inttotal=100;
+= ó (-=,
*=, /=) Añade valor del operando de la der. a la variable de la izq. Ej. inttotal +=100
Asigna resultado de (operando de la izquierda & operando de la derecha) al
&= ó (|=)
operando de la izquierda.
OPERADORES ESPECIALES
Varios operadores de JavaScript, es difícil clasificarlos en una categoría en particular. Estos
operadores se resumen a continuación.
(condicion) ? V1: V2 Si la condición es true, la expresión toma V1 y si es falsa el V2.
New El operador new crea una instancia de un objeto.
This La palabra clave 'this' se refiere al objeto actual.
, El operador ',' evalúa los dos operados.
El operador delete borra un objeto, una propiedad de un objeto, o un
Delete
elemento especificado de un vector.
El operador Void especifica una expresión que será evaluada sin devolver
Void
ningún valor.
Typeof Devuelve el tipo de dato de un operando.
21
OBJETOS
Una primera clasificación del modelo de objetos lo dividiría en dos grandes grupos. Por una
parte, tendríamos los objetos directamente relacionados con el navegador y las posibilidades
de programación HTML (denominados, genéricamente, objetos del navegador) y por otra
parte un conjunto de objetos relacionados con la estructura del lenguaje, llamados
genéricamente objetos del lenguaje.
OBJETOS DEL LENGUAJE

Para manipular, primero se tiene que crearla, esto se da, de forma simplificada en JS cuando
se hace una asignación, por ejemplo en el caso de un string.
String
Array
Math
Date
Bolean
Number
OBJETOS DEL NAVEGADOR

En el esquema, se muestra la jerarquía que presentan los objetos del navegador, atendiendo a
una relación "contenedor - contenido" que se da entre estos objetos, ósea, se observa al objeto
y la directiva HTML con que se incluyen en el documento.
* window
+ history
+ location
+ document <BODY> ... </BODY>
- anchor <A NAME="..."> ... </A>
- applet <APPLET> ... </APPLET>
- area <MAP> ... </MAP>
- form <FORM> ... </FORM>
+ button <INPUT TYPE="button">
+ checkbox <INPUT TYPE="checkbox">
+ fileUpload <INPUT TYPE="file">
+ hidden <INPUT TYPE="hidden">
+ password <INPUT TYPE="password">
+ radio <INPUT TYPE="radio">
+ reset <INPUT TYPE="reset">
+ select <SELECT> ... </SELECT>
- options <INPUT TYPE="option">
+ submit <INPUT TYPE="submit">
+ text <INPUT TYPE="text">
+ textarea <TEXTAREA> ... </TEXTAREA>
- image <IMG SRC="...">
- link <A HREF="..."> ... </A>
- plugin <EMBED SRC="...">
+ frame <FRAME>
* navigator
Según esta jerarquía, podemos entender el objeto área (por poner un ejemplo) como un objeto
dentro del objeto document que a su vez está dentro del objeto window. Hay que decir que la
notación '.' también se usa para denotar a un objeto que está dentro de un objeto.
Por ejemplo, si queremos hacer referencia a una caja de texto, tendremos que escribir
ventana.documento.formulario.caja_de_texto
Donde ventana es el nombre del objeto window (su nombre por defecto es window),
documento es el nombre del objeto document (cuyo nombre por defecto es document),
formulario es el nombre del objeto forms (veremos que forms es un array) y caja_de_texto es
el nombre del objeto textarea (cuyo nombre por defecto es textarea).
22
En la mayoría de los casos podemos ignorar la referencia a la ventana actual (window), pero
será necesaria esta referencia cuando estemos utilizando múltiples ventanas, o cuando
usemos frames. Cuando estemos usando un único frame, podemos pues ignorar
explícitamente la referencia al objeto window, ya que JS asumirá que la referencia es de la
ventana actual.
También podemos utilizar la notación de array para referirnos a algún objeto, por ejemplo,
cuando los objetos a usar no tienen nombre, como en este caso:
document.forms[0].elements[1];
Hace referencia al segundo elemento del primer formulario del documento; este elemento será
el segundo que se haya creado en la página HTML.
CUADROS DE DIALOGO
La manera más sencilla consiste en utilizar el método alert() del objeto window:
alert(“Texto”)
Ejemplo:
<html>
<head> <title>Cuadro de dialogo</title>
</head>
<body>
<script language="javascript">

</script>
<p> Esta es una página de prueba de la ventana Alert de JavaScript
</body>
</html>
Existen otros tipos de ventanas de dialogo que interactúan con el usuario. El Método
prompt() del objeto window muestra una caja de texto en la que el usuario puede introducir
contenidos. Muestra dos botones. Aceptar y Cancelar. Ejemplo:
prompt(―su color favorito es: ‖, ―Azul‖)
El segundo parámetro es el valor predeterminado para la caja de texto, que el usuario podrá
modificar. Este cuadro de dialogo permite capturar datos introducidos por el usuario y realizar
una acción en base a ellos.
Ejemplo, podemos pedirle al usuario que introduzca su nombre y después mostrarlo:
<HTML>
<HEAD>
<title>Ejemplo, pagina que pide el nombre </title>
</HEAD>
<BODY>
<script LANGUAGE="JavaScript">

</script>
<p>Seguimos avanzando con JavaScript
</BODY>
</HTML>
23
Finalmente, para pedir al usuario confirmación en la realización de una acción podemos usar el
método confirm() del objeto window. Este método mostrará un cuadro de dialogo con el
mensaje de texto que le pasemos como parámetro, y dos botones, Aceptar y Cancelar:
confirm(―¿Desea volver al inicio de la página?‖)
Este método devuelve verdadero (true) si se pulsa Aceptar y falso (false) si se pulsa Cancelar.
Ejemplo.
<HTML>
<HEAD>
<title>Ejemplo: Página que pide confirmación </title>
</HEAD>
<BODY>
<h1> Página de confirmación </h1>

</script>
<p><h2>Has aceptado ingresar y continuar con JavaScript </h2>
</BODY>
</HTML>
Si la condición es verdadera, la expresión toma el valor1 y si es falsa el valor2.

<HTML>
<HEAD>
<title>Ejemplo operadores condicionales </title>

</script>
</HEAD>
<BODY>

</script>
</BODY>
</HTML>
Actividad.
Desarrolle un proyecto en el que se muestre el uso de los operadores, métodos y demás temas
tratados hasta la fecha.
Detalles:
 Una página Web que permita la verificación antes de abrir la segunda página.
 Una página Web que permita el ingreso de datos para efectuar el cálculo del perímetro,
área y volumen de una figura sólida.
 Una página Web que exija confirmar el acceso para pasar a la siguiente página.
24
Lección 5. JavaScript: Estructuras de control - Funciones
 Estructuras de control - condicionales
 Estructuras de control - bucles
 Funciones: Definición, parámetros.
 Proyecto: Páginas con cálculo JS.
Estructura if … else
La estructura más utilizada en JavaScript y en la mayoría de lenguajes de programación es la
estructura if. Se emplea para tomar decisiones en función de una condición.
Ejemplo 1. Evalúa un número

var edad = prompt("Ingresa tu edad: ","0");
if(edad==0) {
alert("Aun no has ingresado tu edad");
}
else if(edad >= 18) {
alert("Eres mayor de edad");
}
else {
alert("Todavía eres menor de edad");
}
</script>
Estructura switch
La estructura switch es la más eficiente, ya que está especialmente diseñada para manejar de
forma sencilla múltiples condiciones sobre la misma variable.
Ejemplo 2. Compara nombres ingresados con los que tiene.

var nombre = prompt("Si eres parte del grupo, ingresa tu nombre", "");
switch(nombre) {
case "": alert("Ingresa tu nombre"); break;
case "Juan": alert("Eres parte del grupo: sigue adelante"); break;
case "Rosa": alert("Ok: Tienes buenas notas"); break;
case "Edu": alert("Eres parte del grupo: felicidades"); break;
default: alert("No eres parte del grupo"); break;
}
</script>
Estructura for (Bucle: el flujo se repite mientras la condición de cumpla)

"for" representa una o varias sentencias que se repiten un número determinado de veces:
Ejemplo 3. Repite un mensaje

var mensaje = "Hola, estoy dentro de un bucle";
for(var i = 0; i < 5; i++) {
document.write(mensaje+" Buble No. "+(i+1)+"<br>");
}
</script>
Ejemplo 4. Muestra los días de la semana

var dias=["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
for(var i=0; i<7; i++) {
alert(dias[i]);
}
</script>
25
Estructura for...in
Es una estructura derivada del for. Su definición exacta implica el uso de objetos. Una
adaptación a su uso en arrays es la que se muestra en el ejemplo.
Ejemplo 5. Muestra los días de la semana con la instrucción for…in
var dias=["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
for(i in dias) {
alert(dias[i]);
}
</script>
Estructura while
Permiten ejecutar las instrucciones incluidas dentro del bucle una o más veces, mientras se
cumpla la condición indicada.
Ejemplo 6.
Suma todos los números menores o iguales que otro número dado, dentro de una tabla.
var resultado = 0;
var numero = prompt("Escribe el número hasta donde debe sumar","5");
var i = 0;
document.write("<table border=3>")
document.write("<tr><th> No. </th><th> Suma </th></tr>")
while(i <= numero) {
resultado += i;
i++;
document.write("<tr> <td>"+(i-1)+"</td><td>"+resultado+"</td>");
}
document.write("</table>")
alert("La suma total de los "+numero+" primeros numeros es: "+resultado);
</script>
Estructura do...while
El bucle de tipo do...while es muy similar al bucle while, con la diferencia que la primera
siempre se ejecuta las instrucciones del bucle.
Ejemplo 7. Factorial de un número
var resultado = 1;
var factor = 1;
var numero = prompt("Ingrese el número factorial, deseado", 5);
do {
resultado *= factor; // resultado = resultado * numero
document.write("Factorial de: "+factor+" es: "+resultado+" <br>");
factor++;
}
while(factor <= (numero));
alert("El factorial de "+(factor-1)+" es: "+resultado);
</script>
Sentencias break y continue
Las sentencias break y continue permiten manipular el comportamiento normal de los bucles
para detener el bucle o para saltarse algunas repeticiones.
 break permite terminar de forma abrupta un bucle y
 continue permite saltarse algunas repeticiones del bucle.
26
Ejemplo 8. Uso de la sentencia break:
var cadena = "En un lugar de la Mancha de cuyo nombre no quiero acordarme...";
//split(separador). Parte la cadena en un array de caracteres. Si el carácter separador no
//se encuentra, devuelve un array con un sólo elemento que coincide con la cadena original.
var letras = cadena.split("");//separador="" (nada), todos los caracteres separados por coma
document.write(letras) //resultado de la matriz creada
var resultado = "";
for(i in letras) {
if(letras[i] == 'a') {
break; //Al hallar "a" termina el bucle
//continue; //Al hallar "a" salta para continuar
}
else {
resultado += letras[i];
}
}
alert(resultado); // muestra "En un lug"
</script>
Ejemplo 9.
Uso de la sentencia continue.
En el ejemplo anterior al cambiar break por continue el resultado es:
// muestra "En un lugr de l Mnch de cuyo nombre no quiero cordrme..."
La utilidad de continue es que permite utilizar el bucle para filtrar los resultados en función de
algunas condiciones o cuando el valor de alguna variable coincide con un valor determinado.
LAS FUNCIONES
Una función es un elemento del programa creado con la finalidad de realizar una determinada
acción. Una función puede ser llamada desde otra. Las funciones, de preferencia, se definen
en la cabecera del documento HTML. Su sintaxis es:
function nombreFunción([parámetros]) {
acciones
}
NOTA.
 Los archivos JavaScript externos sólo pueden tener código JavaScript (sin
<script>) y ninguna sentencia HTML y deben ser guardados con extensión ―*.js‖.
 Para incluir el fichero externo es necesario usar en la cabecera el atributo SRC
Ejemplo. Si la función potencia() estuviera en un fichero externo llamado funciones.js

<head>
<script language="javascript" src="funciones.js">
</head>
Ejemplo 10. Definición de funciones.
El siguiente script es una función que toma los valores de un formulario, y devuelve en un
cuadro de texto del mismo el valor de la primera casilla elevado a la potencia de la segunda.
<html>
<head><title>Funciones</title>
function potencia() {
var i=0;
27
var resul=1;
if(document.formCalculo.elevado.value==0)
{
document.formCalculo.resultado.value=resul; //1
}
else
{
resul=document.formCalculo.base.value;
for(i=1;i<document.formCalculo.elevado.value;i++)
resul*=document.formCalculo.base.value;
//resul=resul*document.formCalculo.base.value; //Equivalente
}
document.formCalculo.resultado.value=resul;
}
</script>
</head>
<body>
<form name="formCalculo">
Número: <input type="text" name="base" value=""><br><br>
Potencia: <input type="text" name="elevado" value=""><br><br>
Resultado: <input type="text" name="resultado" value=""><br><br>
<input type="button" name="poten" Value="Calcular potencia" onClick="potencia()">
</form>
</body>
</html>
Ejemplo 11. Definición de funciones con parámetro.
<html>
<head><title>Funciones: Par o Impar</title>
var numero = prompt("Introduce un número entero"); //pide número
function parImpar(numero)
{
//document.write("El valor ingresado es: "+numero);
if(numero % 2 == 0) {
return "par";
}
else {
return "impar";
}
}
var resultado = parImpar(numero); //Resultado de función pasa a variable
alert("El número "+numero+" es "+resultado);
</script>
</head>
<body>
</body>
</html>
Actividad.
 Los ejemplos 3 y 4 presentarlo en una tabla donde en la primera columna se observe el

orden y en la segunda columna los resultados.
 Los ejemplos 5 y 6 presentarlo en una lista desplegable (combo) donde se observe el
orden seguido del resultado
 Desarrollar una aplicación que permita hallar el producto o la suma desde un valor
inicial dado hasta otro valor final proporcionado por medio de los controles del
formulario.
 Definir un fichero externo que tenga cinco tipos de mensajes de error, que se
identifiquen con los números de 1 a 5 cuando los datos son ingresados a través de los
controles del formulario.
28
Lección 6. JavaScript: Eventos
 Eventos en JavaScript.
 Modelo de eventos en JS
 Manejadores de eventos
 Obtención de información de evento.
Eventos en JavaScript
Los eventos hacen posible que los usuarios transmitan información a los programas. JavaScript
define numerosos eventos que permiten una interacción completa entre el usuario y las
páginas/aplicaciones Web.
JavaScript permite asignar una función a cada uno de los eventos. De esta forma, cuando se
produce cualquier evento, JavaScript ejecuta su función asociada. Este tipo de funciones se
denominan “event handlers” en inglés y suelen traducirse por “manejadores de eventos”.
Modelos de eventos
Modelo básico de eventos. Este modelo simple de eventos se introdujo para la versión 4 del
estándar HTML y se considera parte del nivel más básico de DOM (Modelo de objetos de
documentos). Aunque sus características son limitadas, es el único modelo que es compatible
en todos los navegadores y por tanto, el único que permite crear aplicaciones que funcionan de
la misma manera en todos los navegadores.
Modelo de eventos estándar. Las versiones más avanzadas del estándar DOM (DOM nivel 2)
definen un modelo de eventos completamente nuevo y mucho más poderoso que el original.
Todos los navegadores modernos lo incluyen, salvo Internet Explorer.
Modelo de eventos de Internet Explorer. Internet Explorer utiliza su propio modelo de
eventos, que es similar pero incompatible con el modelo estándar. Se utilizó por primera vez en
Internet Explorer 4 y Microsoft decidió seguir utilizándolo en el resto de versiones, a pesar de
que la empresa había participado en la creación del estándar de DOM que define el modelo de
eventos estándar.
Modelo básico de eventos

Manejadores de los tipos de eventos
Evento Descripción Elementos para los que está definido
onBlur Deseleccionar el elemento <button>, <input>, <label>, <select>,
<textarea>, <body>
onChange Deseleccionar un elemento que se ha modificado <input>, <select>, <textarea>
onClick Pinchar y soltar el ratón Todos los elementos
onDblClick Pinchar dos veces seguidas con el ratón Todos los elementos
onFocus Seleccionar un elemento <button>, <input>, <label>, <select>,
<textarea>, <body>
onKeyDown Pulsar una tecla (sin soltar) Elementos de formulario y <body>
onKeyPress Pulsar una tecla Elementos de formulario y <body>
onKeyUp Soltar una tecla pulsada Elementos de formulario y <body>
onLoad La página se ha cargado completamente <body>
onMouseDown Pulsar (sin soltar) un botón del ratón Todos los elementos
onMouseMove Mover el ratón Todos los elementos
onMouseOut El ratón “sale” del elemento (pasa por encima de Todos los elementos
otro elemento)
onMouseOver El ratón “entra” en el elemento (pasa por encima Todos los elementos
del elemento)
onMouseUp Soltar el botón que estaba pulsado en el ratón Todos los elementos
onReset Inicializar el formulario (borrar todos sus datos) <form>
onResize Se ha modificado el tamaño de la ventana del <body>
navegador
onSelect Seleccionar un texto <input>, <textarea>
onSubmit Enviar el formulario <form>
onUnLoad Se abandona la página (por ejemplo al cerrar el <body>
navegador)
Manejadores de eventos
Un evento de JavaScript por sí mismo carece de utilidad. Para que los eventos resulten útiles,
se deben asociar funciones o código JavaScript a cada evento. De esta forma, cuando se
29
produce un evento se ejecuta el código indicado, por lo que la aplicación puede responder ante
cualquier evento que se produzca durante su ejecución.
Las funciones o código JavaScript que se definen para cada evento se denominan “manejador
de eventos” y como JavaScript es un lenguaje muy flexible, existen varias formas diferentes de
indicar los manejadores:
 Manejadores como atributos de los elementos XHTML.
 Manejadores como funciones JavaScript externas.
 Manejadores “semánticos”.
Manejadores de eventos como atributos HTML

Se trata del método más sencillo y a la vez menos profesional de indicar el código JavaScript
que se debe ejecutar cuando se produzca un evento. En este caso, el código se incluye en un
atributo del propio elemento HTML.
Ejemplo 1, con onClick. Muestra un mensaje al pinchar con el ratón sobre un botón:
<input type="button" value="Pinchame y verás" onclick="alert('Gracias por pinchar');" />
Ejemplo 2, con onClick y/o onMouseOver

Cuando el usuario pincha sobre el elemento <div> se muestra un mensaje y cuando el usuario
pasa el ratón por encima del elemento, se muestra otro mensaje:
<div onClick="alert('Has pinchado con el ratón');" onMouseOver="alert('Acabas de pasar el ratón por encima');">
Puedes pinchar sobre este elemento o simplemente pasar el ratón por encima
</div>
Ejemplo 3, con onLoad y onUnLoad.

Se da cuando la página se ha cargado por completo o cerrado por completo.
<body onLoad="alert('La página se cargo por completo');" onUnLoad="alert('Se cerro la página');">
...
</body>
El evento onLoad es uno de los más utilizados ya que, las funciones que permiten acceder y
manipular los nodos del árbol DOM solamente están disponibles cuando la página se ha
cargado completamente.
Manejadores de eventos y variable this

JavaScript define una variable especial llamada this que se crea automáticamente y que se
emplea en algunas técnicas de programación. En los eventos, se puede utilizar la variable this
para referirse al elemento HTML que ha provocado el evento.
Ejemplo 4. Pasar el Mouse.
Cuando el usuario pasa el ratón por encima del <div>, el color del borde se muestra de un color
y cuando el ratón sale del <div>, se vuelve a mostrar el borde con el color original u otro color.
<br>"div" SIN manejadores de evento. SIN variable this
<div id="contenidos1" style="width:250px; height:60px; border:thin solid silver">
Sección de contenidos1...
</div>
<br>
<hr>
<br>"div" CON manejadores de evento. SIN variable this, es propenso a errores...
<div id="contenidos2" style="width:250px; height:60px; border:thin solid blue"
onMouseOver="document.getElementById('contenidos2').style.borderColor='red';"
onMouseOut="document.getElementById('contenidos2').style.borderColor='yellow';">
</div>
<br>
<hr>
<br>"div" CON manejadores de evento. CON variable this, es más compacta...
<div id="contenidos3" style="width:250px; height:60px; border:thin solid silver"
onMouseOver="this.style.borderColor='black';" //silver:plomo, //black:negro
onMouseOut="this.style.borderColor='silver';">
</div>
Manejadores de eventos como funciones externas

Es útil para aplicaciones más complejas, por que agrupa todo el código JavaScript en una
función externa y se llama a esta función desde el elemento HTML, como por ejemplo la
validación de un formulario.
30
Ejemplo 5. El ejemplo inicial sería de la forma siguiente:
<script language=javascript>
function muestraMensaje()
{
alert('Gracias por pinchar');
}
</script>
<input type="button" value="Pinchame y verás" onClick="muestraMensaje()" />
El principal inconveniente de este método es que en las funciones externas no se puede seguir
utilizando la variable this y por tanto, es necesario pasar esta variable como parámetro a la
función:
Ejemplo 6.
function resalta(elemento)
{
switch(elemento.style.borderColor)
{
case 'silver':
case 'silver silver silver silver':
case '#c0c0c0':
elemento.style.borderColor = 'black';
break;
case 'black':
case 'black black black black':
case '#000000':
elemento.style.borderColor = 'silver';
break;
}
}
</script>
<div style="width:150px; height:60px; border:thin solid silver"
onMouseOver="resalta(this)"
onMouseOut="resalta(this)">
Sección de contenidos...
</div>
En el ejemplo anterior, la función externa es llamada con el parámetro this, que dentro de la
función se denomina elemento. La complejidad del ejemplo se produce sobre todo por la forma
en la que los distintos navegadores almacenan el valor de la propiedad borderColor.
Mientras que Firefox almacena (en caso de que los cuatro bordes coincidan en color) el valor
black, Internet Explorer lo almacena como black black black black y Opera almacena su
representación hexadecimal #000000.
Manejadores de eventos semánticos

Los métodos que se han visto para añadir manejadores de eventos (como atributos HTML y
como funciones externas) tienen un grave inconveniente: “ensucian” el código HTML de la
página, esto puede ser corregido con manejador de eventos semánticos. Esta técnica es una
evolución del método de las funciones externas.
La técnica de los manejadores semánticos consiste en:
 Asignar un identificador único al elemento HTML mediante el atributo id.
 Crear una función de JavaScript encargada de manejar el evento.
 Asignar la función externa al evento correspondiente en el elemento deseado.
Ejemplo 7: Este ejemplo
<input id="pinchable" type="button" value="Pinchame y verás" onclick="alert('Gracias por pinchar');" />
Se puede transformar en (si se define con manejador de evento semántico):

function muestraMensaje() // Función externa
{
alert('Gracias por pinchar');
}
window.onload = function()//Asegurar q' la página se cargue por completo
{ //Asignando función externa al elemento q' produce el evento
document.getElementById("pinchable").onclick = muestraMensaje;
}
</script>
Elemento HTML con "id" para manejador de evento SEMANTICO
<input id="pinchable" type="button" value="Pinchame y verás" />
31
Obteniendo información del evento (objeto event)
Normalmente, los manejadores de eventos requieren información adicional para procesar sus
tareas. Si una función por ejemplo se encarga de procesar el evento onClick, quizás necesite
saber en que posición estaba el ratón en el momento de pinchar el botón. El caso más habitual
en el que es necesario conocer información adicional sobre el evento es el de los eventos
asociados al teclado, por ejemplo para diferenciar las teclas normales de las teclas especiales
(ENTER, tabulador, Alt, Ctrl., etc.).
JavaScript permite obtener información sobre el ratón y el teclado mediante un objeto especial
llamado event. Desafortunadamente, los diferentes navegadores presentan diferencias muy
notables en el tratamiento de la información sobre los eventos y sobre todo Internet Explorer.
En resumen, en los navegadores tipo Internet Explorer, el objeto event se obtiene directamente
mediante:
var evento = window.event;
Por otra parte, en el resto de navegadores, el objeto event se obtiene mágicamente a partir del
argumento que el navegador crea automáticamente:
function manejadorEventos(elEvento) {
var evento = elEvento;
}
Si se quiere programar una aplicación que funcione correctamente en todos los navegadores,
es necesario obtener el objeto event de forma correcta según cada navegador. El siguiente
código muestra la forma correcta de obtener el objeto event en cualquier navegador:
function manejadorEventos(elEvento) {
var evento = elEvento || window.event;
}
Ejemplo 8. El ejemplo pasar el Mouse sobre zona definida por “div”.
function resalta(elEvento)
{
var evento = elEvento || window.event;
switch(evento.type)
{
case 'MouseOver': this.style.borderColor = 'black'; break;
case 'MouseOut': this.style.borderColor = 'silver'; break;
}
}
window.onload = function() {
document.getElementById("seccion").onMouseOver = resalta;
document.getElementById("seccion").onMouseOut = resalta;
}
</script>
<div id="seccion" style="width:150px; height:60px; border:thin solid silver">

Sección de contenidos...
</div>
Actividad.
 Investigar y documentar diferentes ejemplos sobre eventos de teclado como ENTER,
Shift, tabulador, Alt, ctrl., etc.
 Defina una aplicación con javascript que cuente en número de opciones seleccionadas
de un objeto combo.
 Defina contenidos en dos paneles “div” y hacer que esta se inicie con dos colores
diferentes y al ingresar el Mouse o al salir de la zona definida, cambie los bordes a otro
color e imita un mensaje de los colores mostrados.
32
Lección 7. JavaScript: Validación
 Acceso a los formularios. Propiedades, Métodos y eventos básicos.
 Validación: Campo obligatorio, opciones de lista, e-mail, fecha, teléfono, checkbox,
radiobuttom.
 Proyecto: Páginas con validaciones. Parte 1
Acceso a los formularios

La programación de aplicaciones que contienen formularios web siempre ha sido una de las
tareas fundamentales de JavaScript. De hecho, una de las principales razones por las que se
inventó el lenguaje de programación JavaScript fue la necesidad de validar los datos de los
formularios directamente en el navegador del usuario.
JavaScript dispone de numerosas propiedades y funciones que facilitan la programación de
aplicaciones que manejan formularios. En primer lugar, cuando se carga una página web, el
navegador crea automáticamente un array llamado forms y que contiene la referencia a
todos los formularios de la página y a su vez crea un array llamado elements para todos
elementos de cada formulario de la página.
En un entorno tan cambiante como el diseño web, es muy difícil confiar en que el orden de los
formularios se mantenga estable en una página web. Una forma de resolver este problemas,
es accediendo a los formularios a través de su nombre (name) o a través de su atributo id.
Ejemplo 1.
Para acceder al formulario, estas tres formas son equivalentes:
<form method=post name=‖Form5‖>
<input type="text" name="elemento" />
</form>
document.forms[0] // por posición del formulario - primer formulario
document.forms[―Form5‖] // por atributo name
document.Form5 // directamente sin utilizar el array forms
También se puede acceder a los formularios y a sus elementos utilizando las funciones DOM
de acceso directo a los nodos. El ejemplo utiliza la función document.getElementById() para
acceder de forma directa a un formulario y a uno de sus elementos:
Ejemplo2.
var formularioPrincipal = document.getElementById("Form5"); //Accede al Form5
var primerElemento = document.getElementById("elemento"); //Accede a elementoX
//de Form5
<form name=" Form5" id="Form5" >
<input type="text" name="elementoX" id="elementoX" />
</form>
Propiedades del objeto formulario

Independientemente del método utilizado para obtener la referencia a un elemento de
formulario, cada elemento dispone de las siguientes propiedades útiles para el desarrollo de las
aplicaciones:
Propiedad Descripción
Elements Array que contiene una entrada por cada elemento en el formulario.
Length Número de elementos del formulario
Type Indica el tipo de elemento que se trata. Para los elementos de tipo <input> coincide con el valor de su
atributo type. Para las listas desplegables normales (elemento <select>) su valor es select-one, lo que
permite diferenciarlas de las listas que permiten seleccionar varios elementos a la vez y cuyo tipo es
select-multiple. Por último, en los elementos de tipo <textarea>, el valor de type es textarea.
Form es una referencia directa al formulario al que pertenece el elemento. Así, para acceder al formulario de
un elemento, se puede utilizar document.getElementById(”id_del_elemento”).form
Name Obtiene el valor del atributo name de HTML. Solamente se puede leer su valor, por lo que no se
puede modificar.
Value permite leer y modificar el valor del atributo value de XHTML. Para los campos de texto (<input
type=”text”> y <textarea>) obtiene el texto que ha escrito el usuario. Para los botones obtiene el texto
que se muestra en el botón. Para los elementos checkbox y radiobutton no es muy útil.
33
Los eventos más utilizados en el manejo de los formularios.
Evento Descripción
Onclick evento que se produce cuando se pincha con el ratón sobre un elemento.
Onchange evento que se produce cuando el usuario cambia el valor de un elemento de texto. También se
produce cuando el usuario selecciona una opción en una lista desplegable (<select>). Sin embargo,
el evento sólo se produce si después de realizar el cambio, el usuario pasa al siguiente campo del
formulario, lo que técnicamente se conoce como q‟ “el otro campo de formulario ha perdido el foco”.
Onfocus evento que se produce cuando el usuario selecciona un elemento del formulario.
Onblur evento complementario de onfocus, ya que se produce cuando el usuario ha deseleccionado un
elemento por haber seleccionado otro elemento del formulario. Técnicamente, se dice que el elemento
anterior “ha perdido el foco”.
Validación
La principal utilidad de JavaScript en el manejo de los formularios es la validación de los datos
introducidos por los usuarios. Normalmente, la validación de un formulario consiste en llamar a
una función de validación cuando el usuario pulsa sobre el botón de envío del formulario.
El funcionamiento de esta técnica de validación se basa en el comportamiento del evento
onSubmit de JavaScript. Al igual que otros eventos como onClick y onKeyPress, el evento
onSubmit varía su comportamiento; si devuelve el valor true, el formulario se envía. Sin
embargo, si devuelve el valor false, el formulario no se envía.
El formato básico necesario para validar el formulario:
<form action="" method="" id="" name="" onSubmit="return validacion()">
...
</form>
Y el esquema de la función validacion() es el siguiente:

function validacion()
{
if (condicion que debe cumplir el primer campo del formulario)
{
// Si no se cumple la condicion...
alert('[ERROR] El campo debe tener un valor de...');
return false;
}
else if (condicion que debe cumplir el segundo campo del formulario)
{
// Si no se cumple la condicion...
alert('[ERROR] El campo debe tener un valor de...');
return false;
}
...
// Si el script ha llegado a este punto, todas las condiciones
// se han cumplido, por lo que se devuelve el valor true
return true;
}
Validar un campo de texto obligatorio

Se trata de forzar al usuario a introducir un valor en un cuadro de texto o textarea en los que
sea obligatorio. La condición en JavaScript se puede indicar como:
Ejemplo 3.
valor = document.getElementById("campo").value;
if( valor == null || valor.length == 0 || /^\s+$/.test(valor) )
{
return false;
}
Primero, si el valor de una variable es null, la variable no contiene ningún valor de tipo objeto,
array, numérico, cadena de texto o booleano. La segunda parte de la condición obliga a que el
texto introducido tenga una longitud superior a cero caracteres. Por último, la tercera parte de
la condición (/^\s+$/.test(valor)) obliga a que el valor introducido no se espacios en blanco.
Validar un campo de texto con valores numéricos

Se trata de obligar al usuario a introducir un valor numérico en un cuadro de texto.
Ejemplo 4.
34
if( isNaN(valor) )
{
return false;
}
Si el contenido de la variable valor no es un número válido, no se cumple la condición. La

ventaja de utilizar la función interna isNaN() es que simplifica las comprobaciones, ya que
JavaScript se encarga de tener en cuenta los decimales, signos, etc.
Validar que se ha seleccionado una opción de una lista

Se trata de obligar al usuario a seleccionar un elemento de una lista desplegable.
Ejemplo 5:
indice = document.getElementById("opciones").selectedIndex;
if( indice == null || indice == 0 )
{
return false;
}
<select id="opciones" name="opciones">
<option value="">- Selecciona un valor -</option>
<option value="1">Primer valor</option>
<option value="2">Segundo valor</option>
<option value="3">Tercer valor</option>
</select>
A partir de la propiedad selectedIndex, se comprueba si el índice de la opción seleccionada es

válido y además es distinto de cero. La primera opción de la lista (–Selecciona un valor–) no es
válida, por lo que no se permite el valor 0 para esta propiedad selectedIndex.
Validar una dirección de email

Se trata de obligar al usuario a introducir una dirección de email con un formato válido. Lo que
se comprueba es que la dirección parezca válida, ya que no se comprueba si se trata de una
cuenta de correo electrónico real y operativo. La condición JavaScript consiste en:
Ejemplo 6:
if(!( /\w{1,}[@][\w\-]{1,}([.]([\w\-]{1,})){1,3}$/.test(valor) ))
{
return false;
}
Validar una fecha

Las fechas suelen ser los campos de formulario más complicados de validar por la multitud de
formas diferentes en las que se pueden introducir.
Ejemplo 7:
var ano = document.getElementById("ano").value;
var mes = document.getElementById("mes").value;
var dia = document.getElementById("dia").value;
valor = new Date(ano, mes, dia);
if( !isNaN(valor) ) {
return false;
}
La validación consiste en intentar construir una fecha con los datos proporcionados por el
usuario. La función Date(ano, mes, dia) es una función interna de JavaScript que permite
construir fechas a partir del año, mes y el día de la fecha. Es muy importante tener en cuenta q‟
el número de mes se indica de 0 a 11, siendo 0 el mes de Enero y 11 el mes de Diciembre. Los
días del mes siguen una numeración diferente, ya q‟ el mínimo permitido es 1 y el máximo 31.
Validar un número de teléfono

Los números de teléfono pueden ser indicados de formas muy diferentes. El siguiente script
considera que un número de teléfono está formado por nueve dígitos consecutivos y sin
espacios ni guiones entre las cifras:
Ejemplo 8:
if( !(/^\d{9}$/.test(valor)) ) {
return false;
}
35
Otros ejemplos:
Número Expresión regular Formato
900-900-900 /^\d{3}-\d{3}-\d{3}$/ 9 cifras agrupadas de 3 en 3 y separadas por guiones
(900) 900900 /^$\d{3}$\s\d{6}$/

9 cifras las 3 primeras encerradas por paréntesis y un
espacio de separación respecto del resto
Validar que un checkbox ha sido seleccionado

Si un elemento de tipo checkbox se debe seleccionar de forma obligatoria, JavaScript permite
comprobarlo de forma muy sencilla:
Ejemplo 9:
elemento = document.getElementById("campo");
if( !elemento.checked )
{
return false;
}
Si se trata de comprobar que todos los checkbox del formulario han sido seleccionados, es más
fácil utilizar un bucle:
Ejemplo 10:
formulario = document.getElementById("formulario");
for(var i=0; i<formulario.elements.length; i++)

{
var elemento = formulario.elements[i];
if(elemento.type == "checkbox")
{
if(!elemento.checked)
{
return false;
}
}
}
Validar que un radiobutton ha sido seleccionado

Aunque se trata de un caso similar al de los checkbox, la validación de los radiobutton presenta
una diferencia importante: en general, la comprobación que se realiza es que el usuario haya
seleccionado algún radiobutton de los que forman un determinado grupo.
Ejemplo 11:
opciones = document.getElementsByName("opciones");
var seleccionado = false;
for(var i=0; i<opciones.length; i++)

{
if(opciones[i].checked)
{
seleccionado = true;
break;
}
}
if(!seleccionado)
{
return false;
}
El anterior ejemplo recorre todos los radiobutton que forman un grupo y comprueba elemento
por elemento si ha sido seleccionado. Cuando se encuentra el primer radiobutton seleccionado,
se sale del bucle y se indica que al menos uno ha sido seleccionado.
Actividad.
 Completar el código del formulario en las validaciones de los ejemplos del 3 al 11 en
forma independiente para cada caso.
 Integre los ejemplos 3 al 5 y 5-11 en dos aplicaciones de validación.
 Integre todos los ejemplos en una sola con un tema relacionado.
36
Lección 8. Expresiones regulares
 Expresiones regulares
Expresiones Regulares
Las expresiones regulares constituyen un mecanismo bastante potente para realizar

manipulaciones de cadenas de texto. El proceso para el que se usan estas expresiones,
presente en el mundo el UNIX y el lenguaje Perl, es el de buscar y/o substituir una subcadena
de texto dentro de otra cadena. En principio esto puede hacerse usando los métodos del objeto
string, pero el problema surge cuando no tenemos una subcadena fija y concreta sino que
queremos buscar un texto que responda a un cierto esquema, como por ejemplo: buscar
aquellas palabras que comienzan con http: y finalizan con una \, o buscar palabras que
contengan una serie de números consecutivos, etc.; es en estos casos cuando tenemos que
utilizar las expresiones regulares.
La subcadena que buscamos en el texto es lo que se llama un patrón y se construye

encerrando entre dos barras inclinadas ( / ) una serie de caracteres normales y símbolos
especiales llamados comodines o metacaracteres, (algo parecido a buscar archivos con
nombre *.bat cuando queremos encontrar los ficheros con extensión bat). Este patrón es una
descripción del texto que se está buscando y JavaScript encontrará las subcadenas que
concuerdan con ese patrón o definición. Las expresiones regulares se usan con el objeto
Regular Expresion y también dentro de los métodos String.match, String.replace, String.search
y String.split.
En la tabla que sigue se muestran los caracteres comodines usados para crear los patrones y
su significado, junto a un pequeño ejemplo de su utilización.
Significado Ejemplo Resultado

\ Marca de carácter /\$ftp/ Busca la palabra $ftp
especial
^ Comienzo de una /^-/ Líneas que comienzan por -
línea
$ Final de una línea /s$/ Líneas que terminan por s
. Cualquier carácter /\b.\b/ Palabras de una sóla letra
(menos salto de
línea)
| Indica opciones /(L|l|f|)ocal/ Busca Local, local, focal
( ) Agrupar caracteres /(vocal)/ Busca vocal
[ ] Conjunto de /escrib[aoe]/ Vale escriba, escribo,
caracteres escribe
opcionales
La tabla que sigue describe los modificadores que pueden usarse con los caracteres que
forman el patrón. Cada modificador actúa sobre el carácter o el paréntesis inmediatamente
anterior.
Descripción Ejemplo Resultado

* Repetir 0 o más
/l*234/ Valen 234, 1234, 11234...
veces
+ Repetir 1 o más Valen amar, aamar,
/a*mar/
veces aaamar...
? 1 o 0 veces /a?mar/ Valen amar, mar.
{n} Exactamente n veces /p{2}sado/ Vale ppsado
{n,} Al menos n veces /(m){2}ala/ Vale mmala, mmmala....
{m,n} entre m y n veces /tal{1,3}a/ Vale tala, talla, tallla
37
Los siguientes son caracteres especiales o metacaracteres para indicar caracteres de texto no
imprimibles, como puedan ser el fín de línea o un tabulador, o grupos predefinidos de
caracteres (alfabéticos, numéricos, etc...)
Significado Ejemplos Resultado

\b Principio o final de Encuentra ver en "ver de",
/\bver\b/
palabra pero no en "verde"
\B Empareja ver con
Frontera entre no-
/\Bver\B/ "Valverde" pero no con
palabras
"verde"
\d Un dígito /[A-Z]\d/ No falla en "A4"
\D Alfabético (no
/[A-Z]\D/ Fallaría en "A4"
dígito)
\O Carácter nulo
\t Caracter ASCII 9
(tabulador)
\f Salto de página
\n Salto de línea
\w Cualquier Encuentra frase en
alfanumérico, /\w+/ "frase.", pero no el .
[a-zA-Z0-9_ ] (punto).
\W Opuesto a \w
/\W/ Hallaría sólo el punto (.)
([^a-zA-Z0-9_ ])
\s Carácter tipo espacio Encuentra Si en "Digo Si ",
/\sSi\s/
(como tab) pero no en "Digo Sientate"
\S Opuesto a \s
\cX Carácter de control X \c9 El tabulador
\oNN Carácter octal NN
\xhh Encuentra la A (ASCII
El hexadecimal hh /\x41/
Hex41) en "letra A"
38
Lección 9. Más sobre objetos JavaScript
 Objetos de lenguaje: string, date, array, math, etc.
 Objetos del navegador: windows, document, frame, link, location, anchor, history,
image, navigator.
 Formularios: Radios, text, select, hidden, checkbox, etc.
OBJETOS DEL LENGUAJE
El Objeto String
Este objeto nos permite hacer diversas manipulaciones con las cadenas, para que trabajar con
ellas sea más sencillo hay que crear objetos. Cuando asignamos una cadena a una variable,
JS está creando un objeto de tipo String que es el que nos permite hacer las manipulaciones.
Propiedades
 length. Valor numérico que nos indica la longitud en caracteres de la cadena dada.
 prototype. Nos permite asignar nuevas propiedades al objeto String.
Métodos
 anchor(nombre). Crea un enlace asignando al atributo NAME el valor de 'nombre'. Este nombre
debe estar entre comillas " "
 big(). Muestra la cadena de caracteres con una fuente grande.
 blink(). Muestra la cadena de texto con un efecto intermitente.
 charAt(indice). Devuelve el carácter situado en la posición especificada por 'indice'.
 fixed(). Muestra la cadena de caracteres con una fuente proporcional.
 fontcolor(color). Cambia el color con el que se muestra la cadena. La variable color debe ser
especificada entre comillas: " ", o bien siguiendo el estilo de HTML, es decir "#RRGGBB" donde
RR, GG, BB son los valores en hexadecimal para los colores rojo, verde y azul, o bien puede
ponerse un identificador válido de color entre comillas. Algunos de estos identificadores son "red",
"blue", "yellow", "purple", "darkgray", "olive", "salmon", "black", "white", ...
 fontsize(tamaño). Cambia el tamaño con el que se muestra la cadena. Los tamaños válidos son
de 1 (más pequeño) a 7 (más grande). indexOf(cadena_buscada,indice) Devuelve la posición de
la primera ocurrencia de 'cadena_buscada' dentro de la cadena actual, a partir de la posición dada
por 'indice'. Este último argumento es opcional y, si se omite, la busqueda comienza por el primer
carácter de la cadena.
 italics(). Muestra la cadena en cursiva.
 lastIndexOf(cadena_buscada,indice). Devuelve la posición de la última ocurrencia de
'cadena_buscada' dentro de la cadena actual, a partir de la posición dada por 'indice', y buscando
hacia atrás. Este último argumento es opcional y, si se omite, la busqueda comienza por el último
carácter de la cadena.
 link(URL). Convierte la cadena en un vínculo asignando al atributo HREF el valor de URL.
 small(). Muestra la cadena con una fuente pequeña.
 split(separador). Parte la cadena en un array de caracteres. Si el carácter separador no se
encuentra, devuelve un array con un sólo elemento que coincide con la cadena original. A partir
de NS 3, IE 4 (JS 1.2).
 strike(). Muestra la cadena de caracteres tachada.
 sub(). Muestra la cadena con formato de subíndice.
 substring(primer_Indice,segundo_Indice). Devuelve la subcadena que comienza en la
posición 'primer_Indice + 1' y que finaliza en la posición 'segundo_Indice'. Si 'primer_Indice' es
mayor que 'segundo_Indice', empieza por 'segundo_Indice + 1' y termina en 'primer_Indice'. Si
hacemos las cuentas a partir de 0, entonces es la cadena que comienza en 'primer_Indice' y
termina en 'segundo_Indice - 1' (o bien 'segundo_Indice' y 'primer_Indice - 1' si el primero es
mayor que el segundo).
 sup(). Muestra la cadena con formato de superíndice.
 toLowerCase(). Devuelve la cadena en minúsculas.
 toUpperCase(). Devuelve la cadena en minúsculas.
<HTML>
<HEAD>
<title>Ejemplo de JavaScript</title>
</HEAD>
<BODY>

</script>
</BODY>
</HTML>
El Objeto Array
Este objeto nos va a dar la facilidad de construir arrays cuyos elementos pueden contener
cualquier tipo básico, y cuya longitud se modificará de forma dinámica siempre que añadamos
un nuevo elemento (y, por tanto, no tendremos que preocuparnos de esa tarea). Para poder
tener un objeto array, tendremos que crearlo con su constructor, por ejemplo, si escribimos:
a=new Array(15);
tendremos creada una variable a que contendrá 15 elementos, enumerados del 0 al 14. Para
acceder a cada elemento individual usaremos la notación a[i], donde i variará entre 0 y N-1,
siendo N el número de elementos que le pasamos al constructor.
También podemos inicializar el array a la vez que lo declaramos, pasando los valores que
queramos directamente al constructor, por ejemplo:
a=new Array(21,"cadena",true);
que nos muestra, además, que los elementos del array no tienen por qué ser del mismo tipo.
Por tanto: si ponemos un argumento al llamar al constructor, este será el número de elementos
del array (y habrá que asignarles valores posteriormente), y si ponemos más de uno, será la
forma de inicializar el array con tantos elementos como argumentos reciba el constructor.
Podríamos poner como mención especial de esto lo siguiente. Las inicializaciones que vemos a
continuación:
a=new Array("cadena");
a=new Array(false);
Inicializan el array a, en el primer caso, con un elemento cuyo contenido es la cadena cadena,
y en el segundo caso con un elemento cuyo contenido es false.
40
Lo comentado anteriormente sobre inicialización de arrays con varios valores, significa que si
escribimos
a=new Array(2,3);
NO vamos a tener un array con 2 filas y 3 columnas, sino un array cuyo primer elemento será el
2 y cuyo segundo elemento será el 3. Entonces, ¿cómo creamos un array bidimensional? (un
array bidimensional es una construcción bastante frecuente). Creando un array con las filas
deseadas y, después, cada elemento del array se inicializará con un array con las columnas
deseadas. Por ejemplo, si queremos crear un array con 4 filas y 7 columnas, bastará escribir:
a=new Array(4);
for(i=0;i<4;i++) a[i]=new Array(7);
y para referenciar al elemento que ocupa la posición (i,j), escribiremos a[i][j];
Propiedades
 length. Esta propiedad nos dice en cada momento la longitud del array, es decir, cuántos
elementos tiene.
 prototype. Nos permite asignar nuevas propiedades al objeto String.
Métodos
 join(separador). Une los elementos de las cadenas de caracteres de cada elemento de un array
en un string, separando cada cadena por el separador especificado.
 reverse(). Invierte el orden de los elementos del array.
 sort(). Ordena los elementos del array siguiendo el orden lexicográfico.
<HTML>
<HEAD>
</HEAD>
<BODY>

</script>
</BODY>
</HTML>
El Objeto Math
Este objeto se utiliza para poder realizar cálculos en nuestros scripts. Tiene la peculiaridad de
que sus propiedades no pueden modificarse, sólo consultarse. Estas propiedades son
constantes matemáticas de uso frecuente en algunas tareas, por ello es lógico que sólo pueda
consultarse su valor pero no modificarlo.
41
Propiedades
 E. Número 'e', base de los logaritmos naturales (neperianos).
 LN2. Logaritmo neperiano de 2.
 LN10. Logaritmo neperiano de 10.
 LOG2E. Logaritmo en base 2 de e.
 LOG10E. Logaritmo en base 10 de e.
 PI. Número PI.
 SQRT1_2. Raíz cuadrada de 1/2.
 SQRT2. Raíz cuadrada de 2.
Métodos
 abs(numero). Función valor absoluto.
 acos(numero). Función arcocoseno. Devuelve un valor cuyas unidades son radianes o NaN.
'numero' debe pertenecer al rango [-1,1], en otro caso devuelve NaN.
 asin(numero). Función arcoseno. Devuelve un valor cuyas unidades son radianes o NaN.
'numero' debe pertenecer al rango [-1,1], en otro caso devuelve NaN.
 atan(numero). Función arcotangente. Devuelve un valor cuyas unidades son radianes o NaN.
 atan2(x,y). Devuelve el ángulo formado por el vector de coordenadas (x,y) con respecto al eje
OX.
 ceil(numero). Devuelve el entero obtenido de redondear 'numero' "por arriba".
 cos(numero). Devuelve el coseno de 'numero' (que debe estar en radianes) o NaN.
 exp(numero). Devuelve el valor enumero.
 floor(numero). Devuelve el entero obtenido de redondear 'numero' "por abajo".
 log(numero). Devuelve el logaritmo neperiano de 'numero'.
 max(x,y). Devuelve el máximo de 'x' e 'y'.
 min(x,y). Devuelve el mínimo de 'x' e 'y'.
 pow(base,exp). Devuelve el valor baseexp.
 random(). Devuelve un número pseudoaleatorio entre 0 y 1.
 round(numero). Redondea 'numero' al entero más cercano.
 sin(numero). Devuelve el seno de 'numero' (que debe estar en radianes) o NaN.
 sqrt(numero). Devuelve la raíz cuadrada de número.
 tan(numero). Devuelve la tangente de 'numero' (que debe estar en radianes) o NaN.
El Objeto Date
Este objeto nos va a permitir hacer manipulaciones con fechas: poner fechas, consultarlas...
para ello, debemos saber lo siguiente: JS maneja fechas en milisegundos. Los meses de Enero
a Diciembre vienen dados por un entero cuyo rango varía entre el 0 y el 11 (es decir, el mes 0
es Enero, el mes 1 es Febrero, y así sucesivamente), los días de la semana de Domingo a
Sábado vienen dados por un entero cuyo rango varía entre 0 y 6 (el día 0 es el Domingo, el día
1 es el Lunes, ...), los años se ponen tal cual, y las horas se especifican con el formato
HH:MM:SS.
Podemos crear un objeto Date vacío, o podemos crealo dándole una fecha concreta. Si no le
damos una fecha concreta, se creará con la fecha correspondiente al momento actual en el que
se crea. Para crearlo dándole un valor, tenemos estas posibilidades:
var Mi_Fecha = new Date(año, mes);
var Mi_Fecha = new Date(año, mes, día);
var Mi_Fecha = new Date(año, mes, día, horas);
var Mi_Fecha = new Date(año, mes, día, horas, minutos);
var Mi_Fecha = new Date(año, mes, día, horas, minutos, segundos);
En día pondremos un número del 1 al máximo de días del mes que toque. Todos los valores
que tenemos que pasar al constructor son enteros. Pasamos a continuación a estudiar los
métodos de este objeto.
Métodos
 getDate(). Devuelve el día del mes actual como un entero entre 1 y 31.
 getDay(). Devuelve el día de la semana actual como un entero entre 0 y 6.
 getHours(). Devuelve la hora del día actual como un entero entre 0 y 23.
 getMinutes(). Devuelve los minutos de la hora actual como un entero entre 0 y 59.
 getMonth(). Devuelve el mes del año actual como un entero entre 0 y 11.
 getSeconds(). Devuelve los segundos del minuto actual como un entero entre 0 y 59.
 getTime(). Devuelve el tiempo transcurrido en milisegundos desde el 1 de enero de 1970 hasta
el momento actual.
42
 getYear(). Devuelve el año actual como un entero.
 setDate(día_mes). Pone el día del mes actual en el objeto Date que estemos usando.
 setDay(día_semana). Pone el día de la semana actual en el objeto Date que estemos usando.
 setHours(horas). Pone la hora del día actual en el objeto Date que estemos usando.
 setMinutes(minutos). Pone los minutos de la hora actual en el objeto Date que estemos usando.
 setMonth(mes). Pone el mes del año actual en el objeto Date que estemos usando.
 setSeconds(segundos). Pone los segundos del minuto actual en el objeto Date que estemos
usando.
 setTime(milisegundos). Pone la fecha que dista los milisegundos que le pasemos del 1 de enero
de 1970 en el objeto Date que estemos usando.
 setYear(año). Pone el año actual en el objeto Date que estemos usando.
 toGMTString(). Devuelve una cadena que usa las convenciones de Internet con la zona horaria
GMT.
El Objeto Boolean
Este objeto nos permite crear booleanos, esto es, un tipo de dato que es cierto o falso,
tomando los valores true o false. Podemos crear objetos de este tipo mediante su constructor.
Veamos varios ejemplos:
a = new Boolean(); asigna a 'a' el valor 'false'

a = new Boolean(0); asigna a 'a' el valor 'false'
a = new Boolean(""); asigna a 'a' el valor 'false'
a = new Boolean(false); asigna a 'a' el valor 'false'
a = new Boolean(numero_distinto_de_0); asigna a 'a' el valor 'true'
a = new Boolean(true); asigna a 'a' el valor 'true'
El Objeto Number
Este objeto representa el tipo de dato número con el que JS trabaja. Podemos asignar a una
variable un número, o podemos darle valor, mediante el constructor Number, de esta forma:
a = new Number(valor);, por ejemplo, a = new Number(3.2); da a a el valor 3.2. Si

no pasamos algún valor al constructor, la variable se inicializará con el valor 0.
Propiedades
 MAX_VALUE. Valor máximo que se puede manejar con un tipo numérico
 MIN_VALUE. Valor mínimo que se puede manejar con un tipo numérico
 NaN. Representación de un dato que no es un número
 NEGATIVE_INFINITY. Representación del valor a partir del cual hay desbordamiento negativo
(underflow)
 POSITIVE_INFINITY. Representación del valor a partir del cual hay desbordamiento positivo
(overflow)
Para consultar estos valores, no podemos hacer:
a = new Number(); alert(a.MAX_VALUE);
porque JS nos dirá undefined, tenemos que hacerlo directamente sobre Number, es decir,
tendremos que consultar los valores que hay en Number.MAX_VALUE, Number.MIN_VALUE, etc.
43
OBJETOS DEL NAVEGADOR
Jerarquía
En esta parte se muestra la jerarquía que presentan los objetos del navegador, atendiendo a
una relación "contenedor - contenido" que se da entre estos objetos. De forma esquemática,
esta jerarquía podemos representarla de esta manera (al lado está la directiva HTML con que
se incluyen en el documento objetos de este tipo, cuando exista esta directiva):
* window
+ history
+ location
+ document <BODY> ... </BODY>
- anchor <A NAME="..."> ... </A>
- applet <APPLET> ... </APPLET>
- area <MAP> ... </MAP>
- form <FORM> ... </FORM>
+ button <INPUT TYPE="button">
+ checkbox <INPUT TYPE="checkbox">
+ fileUpload <INPUT TYPE="file">
+ hidden <INPUT TYPE="hidden">
+ password <INPUT TYPE="password">
+ radio <INPUT TYPE="radio">
+ reset <INPUT TYPE="reset">
+ select <SELECT> ... </SELECT>
- options <INPUT TYPE="option">
+ submit <INPUT TYPE="submit">
+ text <INPUT TYPE="text">
+ textarea <TEXTAREA> ... </TEXTAREA>
- image <IMG SRC="...">
- link <A HREF="..."> ... </A>
- plugin <EMBED SRC="...">
+ frame <FRAME>
* navigator
Según esta jerarquía, podemos entender el objeto area (por poner un ejemplo) como un objeto
dentro del objeto document que a su vez está dentro del objeto window. Hay que decir que la
notación '.' también se usa para denotar a un objeto que está dentro de un objeto.
Por ejemplo, si queremos hacer referencia a una caja de texto, tendremos que escribir
ventana.documento.formulario.caja_de_texto
El objeto window
Se trata del objeto más alto en la jerarquía del navegador (navigator es un objeto
independiente de todos en la jerarquía), pues todos los componentes de una página web están
situados dentro de una ventana. El objeto window hace referencia a la ventana actual. Veamos
a continuación sus propiedades y sus métodos.
Propiedades
 closed. Válida a partir de Netscape 3 en adelante y MSIE 4 en adelante. Es un booleano que nos
dice si la ventana está cerrada ( closed = true ) o no ( closed = false ).
 defaultStatus. Cadena que contiene el texto por defecto que aparece en la barra de estado
(status bar) del navegador.
 frames. Es un array: cada elemento de este array (frames[0], frames[1], ...) es uno de los
frames que contiene la ventana. Su orden se asigna según se definen en el documento HTML.
 history. Se trata de un array que representa las URLS visitadas por la ventana (están
almacenadas en su historial).
 length. Variable que nos indica cuántos frames tiene la ventana actual.
 location. Cadena con la URL de la barra de dirección.
 name. Contiene el nombre de la ventana, o del frame actual.
44
 opener. Es una referencia al objeto window que lo abrió, si la ventana fue abierta usando el
método open() que veremos cuando estudiemos los métodos.
 parent. Referencia al objeto window que contiene el frameset.
 self. Es un nombre alternativo del window actual.
 status. String con el mensaje que tiene la barra de estado.
 top. Nombre alternativo de la ventana del nivel superior.
 window. Igual que self: nombre alternativo del objeto window actual.
Métodos
 alert(mensaje). Muestra el mensaje 'mensaje' en un cuadro de diálogo
 blur(). Elimina el foco del objeto window actual. A partir de NS 3, IE 4.
 clearInterval(id). Elimina el intervalo referenciado por 'id' (ver el método setInterval(),
también del objeto window). A partir de NS 4, IE 4.
 clearTimeout(nombre). Cancela el intervalo referenciado por 'nombre' (ver el método
setTimeout(), también del objeto window).
 close(). Cierra el objeto window actual.
 confirm(mensaje). Muestra un cuadro de diálogo con el mensaje 'mensaje' y dos botones, uno
de aceptar y otro de cancelar. Devuelve true si se pulsa aceptar y devuelve false si se pulsa
cancelar.
 focus(). Captura el foco del ratón sobre el objeto window actual. A partir de NS 3, IE 4.
 moveBy(x,y). Mueve el objeto window actual el número de pixels especificados por (x,y). A partir
de NS 4.
 moveTo(x,y). Mueve el objeto window actual a las coordenadas (x,y). A partir de NS 4.
 open(URL,nombre,caracteristicas). Abre la URL que le pasemos como primer parámetro en
una ventana de nombre 'nombre'. Si esta ventana no existe, abrirá una ventana nueva en la que
mostrará el contenido con las características especificadas. Las características que podemos elegir
para la ventana que queramos abrir son las siguientes:
- toolbar = [yes|no|1|0]. Nos dice si la ventana tendrá barra de herramientas (yes,1) o
no la tendrá (no,0).
- location = [yes|no|1|0]. Nos dice si la ventana tendrá campo de localización o no.
- directories = [yes|no|1|0]. Nos dice si la nueva ventana tendrá botones de dirección o
no.
- status = [yes|no|1|0]. Nos dice si la nueva ventana tendrá barra de estado o no.
- menubar = [yes|no|1|0]. Nos dice si la nueva ventana tendrá barra de menús o no.
- scrollbars = [yes|no|1|0]. Nos dice si la nueva ventana tendrá barras de
desplazamiento o no.
- resizable = [yes|no|1|0]. Nos dice si la nueva ventana podrá ser cambiada de tamaño
(con el ratón) o no.
- width = px. Nos dice el ancho de la ventana en pixels.
- height = px. Nos dice el alto de la ventana en pixels.
- outerWidth = px. Nos dice el ancho *total* de la ventana en pixels. A partir de NS 4.
- outerHeight = px. Nos dice el alto *total* de la ventana el pixels. A partir de NS 4
- left = px. Nos dice la distancia en pixels desde el lado izquierdo de la pantalla a la que se
debe colocar la ventana.
- top = px. Nos dice la distancia en pixels desde el lado superior de la pantalla a la que se
debe colocar la ventana.
 prompt(mensaje,respuesta_por_defecto). Muestra un cuadro de diálogo que contiene una caja
de texto en la cual podremos escribir una respuesta a lo que nos pregunte en 'mensaje'. El
parámetro 'respuesta_por_defecto' es opcional, y mostrará la respuesta por defecto indicada al
abrirse el cuadro de diálogo. El método retorna una cadena de caracteres con la respuesta
introducida.
 scroll(x,y). Desplaza el objeto window actual a las coordenadas especificadas por (x,y). A partir
de NS3, IE4.
 scrollBy(x,y). Desplaza el objeto window actual el número de pixels especificado por (x,y). A
partir de NS4.
 scrollTo(x,y). Desplaza el objeto window actual a las coordenadas especificadas por (x,y). A
partir de NS4.
 setInterval(expresion,tiempo). Evalua la expresión especificada después de que hayan
pasado el número de milisegundos especificados en tiempo. Devuelve un valor que puede ser
usado como identificativo por clearInterval(). A partir de NS4, IE4.
 setTimeout(expresion,tiempo). Evalua la expresión especificada después de que hayan pasado
el número de milisegundos especificados en tiempo. Devuelve un valor que puede ser usado como
identificativo por clearTimeout(). A partir de NS4, IE4.
Hay otras propiedades y métodos como innerHeight, innerWidth, outerHeight,

outerWidth, pageXOffset, pageYOffset, personalbar, scrollbars, back(),
find(["cadena"],[caso,bkwd]), forward(), home(), print(), stop()... todas
45
ellas disponibles a partir de NS 4 y cuya explicación remito como ejercicio al lector interesado
en saber más sobre el objeto window.
<HTML>
<HEAD>

</script>
</HEAD>
<BODY>

</script>
</BODY>
</HTML>
El objeto frame
Todos sabemos que la ventana del navegador puede ser dividida en varios frames que
contengan cada uno de ellos un documento en el que mostrar contenidos diferentes. Al igual
que con las ventanas, cada uno de estos frames puede ser nombrado y referenciado, lo que
nos permite cargar documentos en un marco sin que esto afecte al resto.
Realmente cada frame se representa con un objeto window, esto quiere decir que el objeto
frame tiene todas las propiedades y métodos del objeto window.
Propiedades
 closed. Válida a partir de Netscape 3 en adelante y MSIE 4 en adelante. Es un booleano que nos
dice si la ventana está cerrada ( closed = true ) o no ( closed = false ).
 defaultStatus. Cadena que contiene el texto por defecto que aparece en la barra de estado
(status bar) del navegador.
 frames. Es un array: cada elemento de este array (frames[0], frames[1], ...) es uno de los
frames que contiene la ventana. Su orden se asigna según se definen en el documento HTML.
 history. Se trata de un array que representa las URLS visitadas por la ventana (están
almacenadas en su historial).
 length. Variable que nos indica cuántos frames tiene la ventana actual.
 location. Cadena con la URL de la barra de dirección.
 name. Contiene el nombre de la ventana, o del frame actual.
 opener. Es una referencia al objeto window que lo abrió, si la ventana fue abierta usando el
método open() que veremos cuando estudiemos los métodos.
 parent. Referencia al objeto window que contiene el frameset.
 self. Es un nombre alternativo del window actual.
 status. String con el mensaje que tiene la barra de estado.
 top. Nombre alternativo de la ventana del nivel superior.
 window. Igual que self: nombre alternativo del objeto window actual.
Métodos
 alert(mensaje). Muestra el mensaje 'mensaje' en un cuadro de diálogo
 blur(). Elimina el foco del objeto window actual. A partir de NS 3, IE 4.
46
 clearInterval(id). Elimina el intervalo referenciado por 'id' (ver el método setInterval(),
también del objeto window). A partir de NS 4, IE 4.
 clearTimeout(nombre). Cancela el intervalo referenciado por 'nombre' (ver el método
setTimeout(), también del objeto window).
 confirm(mensaje). Muestra un cuadro de diálogo con el mensaje 'mensaje' y dos botones, uno
de aceptar y otro de cancelar. Devuelve true si se pulsa aceptar y devuelve false si se pulsa
cancelar.
 focus(). Captura el foco del ratón sobre el objeto window actual. A partir de NS 3, IE 4.
 open(URL,nombre,caracteristicas). Abre la URL que le pasemos como primer parámetro en
una ventana de nombre 'nombre'. Si esta ventana no existe, abrirá una ventana nueva en la que
mostrará el contenido con las características especificadas. Las características que podemos elegir
para la ventana que queramos abrir son las siguientes:
 prompt(mensaje,respuesta_por_defecto). Muestra un cuadro de diálogo que contiene una caja
de texto en la cual podremos escribir una respuesta a lo que nos pregunte en 'mensaje'. El
parámetro 'respuesta_por_defecto' es opcional, y mostrará la respuesta por defecto indicada al
abrirse el cuadro de diálogo. El método retorna una cadena de caracteres con la respuesta
introducida.
 scroll(x,y). Desplaza el objeto window actual a las coordenadas especificadas por (x,y). A partir
de NS3, IE4.
 scrollBy(x,y). Desplaza el objeto window actual el número de pixels especificado por (x,y). A
partir de NS4.
 scrollTo(x,y). Desplaza el objeto window actual a las coordenadas especificadas por (x,y). A
partir de NS4.
 setInterval(expresion,tiempo). Evalua la expresión especificada después de que hayan
pasado el número de milisegundos especificados en tiempo. Devuelve un valor que puede ser
usado como identificativo por clearInterval(). A partir de NS4, IE4.
 setTimeout(expresion,tiempo). Evalua la expresión especificada después de que hayan pasado
el número de milisegundos especificados en tiempo. Devuelve un valor que puede ser usado como
identificativo por clearTimeout(). A partir de NS4, IE4.
En este ejemplo mostramos como acceder a los frames y cómo se pueden cambiar
propiedades de un frame en otro.
<HTML> <HEAD>
</HEAD>
<frameset cols="50%,*">
<frame name="izq" src="ejem09a.html" scrolling="auto">
<frameset rows="50%,*">
<frame name="der1" src="ejem09b.html" crolling="auto">
<frame name="der2" src="ejem09b.html" scrolling="auto">
</frameset>
</frameset>
</HTML>
ejem09a.html
<HTML> <HEAD>
function color() {
top.frames['der1'].document.bgColor="#FF5500";
}
function cargarYahoo() {
top.frames['der2'].location='http://www.yahoo.com';
}
</script>
</HEAD>
<BODY>

</script>
<br><br>
<a href="javascript:color()">Cambia el color del frame
<b>der1</b></a><br><br><br>
<a href="javascript:cargarYahoo()">Cargar Yahoo!! en el frame <b>der2</b></a><br>
</BODY> </HTML>
47
ejem09b.html
<HTML> <HEAD>
</HEAD>
<BODY>
document.write('<h1>Soy el frame: ' + window.name + "</h1><br>");
</script>
</BODY> </HTML>
El objeto location
Este objeto contiene la URL actual así como algunos datos de interés respecto a esta URL. Su
finalidad principal es, por una parte, modificar el objeto location para cambiar a una nueva URL,
y extraer los componentes de dicha URL de forma separada para poder trabajar con ellos de
forma individual si es el caso. Recordemos que la sintaxis de una URL era:
protocolo://maquina_host[:puerto]/camino_al_recurso
Propiedades
 hash. Cadena que contiene el nombre del enlace, dentro de la URL.
 host. Cadena que contiene el nombre del servidor y el número del puerto, dentro de la URL.
 hostname. Cadena que contiene el nombre de dominio del servidor (o la dirección IP), dentro de la
URL.
 href. Cadena que contiene la URL completa.
 pathname. Cadena que contiene el camino al recurso, dentro de la URL.
 port. Cadena que contiene el número de puerto del servidor, dentro de la URL.
 protocol. Cadena que contiene el protocolo utilizado (incluyendo los dos puntos), dentro de la
URL.
 search. Cadena que contiene la información pasada en una llamada a un script, dentro de la URL.
Métodos
 reload(). Vuelve a cargar la URL especificada en la propiedad href del objeto location.
 replace(cadenaURL). Reemplaza el historial actual mientras carga la URL especificada en
cadenaURL.
<HTML>
<HEAD>
</HEAD>
<BODY>

</script>
</BODY>
</HTML>
El objeto history
Este objeto se encarga de almacenar una lista con los sitios por los que se ha estado
navegando, es decir, guarda las referencias de los lugares visitados. Se utiliza, sobre todo,
para movernos hacia delante o hacia atrás en dicha lista.
Propiedades
 current. Cadena que contiene la URL completa de la entrada actual en el historial.
 next. Cadena que contiene la URL completa de la siguiente entrada en el historial.
 length. Entero que contiene el número de entradas del historial (i.e., cuántas direcciones han
sido visitadas).
 previous. Cadena que contiene la URL completa de la anterior entrada en el historial.
Métodos
 back(). Vuelve a cargar la URL del documento anterior dentro del historial.
48
 forward(). Vuelve a cargar la URL del documento siguiente dentro del historial.
 go(posicion). Vuelve a cargar la URL del documento especificado por posicion dentro del
historial. posicion puede ser un entero, en cuyo caso indica la posición relativa del documento
dentro del historial; o puede ser una cadena de caracteres, en cuyo caso representa toda o parte
de una URL que esté en el historial.
49
El objeto navigator
Este objeto simplemente nos da información relativa al navegador que esté utilizando el
usuario.
Propiedades
 appCodeName. Cadena que contiene el nombre del código del cliente.
 appName. Cadena que contiene el nombre del cliente.
 appVersion. Cadena que contiene información sobre la versión del cliente.
 language. Cadena de dos caracteres que contiene información sobre el idioma de la versión del
cliente.
 mimeTypes. Array que contiene todos los tipos MIME soportados por el cliente. A partir de NS 3.
 platform. Cadena con la plataforma sobre la que se está ejecutando el programa cliente.
 plugins. Array que contiene todos los plug-ins soportados por el cliente. A partir de NS 3.
 userAgent. Cadena que contiene la cabecera completa del agente enviada en una petición HTTP.
Contiene la información de las propiedades appCodeName y appVersion.
Métodos
 javaEnabled(). Devuelve true si el cliente permite la utilización de Java, en caso contrario,
devuelve false.
<HTML>
<HEAD>
</HEAD>
<BODY>

</script>
</BODY>
</HTML>
El objeto document
El objeto document es el que tiene el contenido de toda la página que se está visualizando.
Esto incluye el texto, imágenes, enlaces, formularios, ... Gracias a este objeto vamos a poder
añadir dinámicamente contenido a la página, o hacer cambios, según nos convenga.
Propiedades
 alinkColor. Esta propiedad tiene almacenado el color de los enlaces activos
 anchors. Se trata de un array con los enlaces internos existentes en el documento
 applets. Es un array con los applets existentes en el documento
 bgColor. Propiedad que almacena el color de fondo del documento
 cookie. Es una cadena con los valores de las cookies del documento actual
 domain. Guarda el nombre del servidor que ha servido el documento
 embeds. Es un array con todos los EMBED del documento
 fgColor. En esta propiedad tenemos el color del primer plano
 forms. Se trata de un array con todos los formularios del documento. Los formularios tienen a su
vez elementos (cajas de texto, botones, etc) que tienen sus propias propiedades y métodos, y
serán tratados en el siguiente capítulo.
 images. Array con todas las imágenes del documento
 lastModified. Es una cadena con la fecha de la última modificación del documento
 linkColor. Propiedad que almacena el color de los enlaces
 links. Es un array con los enlaces externos
 location. Cadena con la URL del documento actual
 referrer. Cadena con la URL del documento que llamó al actual, en caso de usar un enlace.
 title. Cadena con el título del documento actual
 vlinkColor. Propiedad en la que se guarda el color de los enlaces visitados
50
Métodos
 clear(). Limpia la ventana del documento
 open(). Abre la escritura sobre un documento.
 close(). Cierra la escritura sobre el documento actual
 write(). Escribe texto en el documento.
 writeln(). Escribe texto en el documento, y además lo finaliza con un salto de línea
<HTML>
<HEAD>

</script>
</HEAD>
<BODY>

</script>
</BODY>
</HTML>
El objeto link
Este objeto engloba todas las propiedades que tienen los enlaces externos al documento
actual.
Propiedades
 target. Es una cadena que tiene el nombre de la ventana o del frame especificado en el
parámetro TARGET
 hash. Es una cadena con el nombre del enlace, dentro de la URL
 host. Es una cadena con el nombre del servidor y número de puerto, dentro de la URL
 hostname. Es una cadena con el nombre de dominio del servidor (o la dirección IP) dentro de la
URL
 href. Es una cadena con la URL completa
 pathname. Es una cadena con el camino al recurso, dentro de la URL
 port. Es una cadena con el número de puerto, dentro de la URL
 protocol. Es una cadena con el protocolo usado, incluyendo los : (los dos puntos), dentro de la
URL
 search. Es una cadena que tiene la información pasada en una llamada a un script, dentro de la
URL
<HTML>
<HEAD>
</HEAD>
<BODY>
<a href="http://www.yahoo.com" target="_blank">Yahoo!!</a><br><br>
<a href="http://www.google.com/search?q=crear+paginas+web">Google!</a><br><br>

</script>
</BODY>
</HTML>
El objeto anchor
Este objeto engloba todas las propiedades que tienen los enlaces internos al documento actual.
Propiedades
 name. Nombre del ancla.
 target. Es una cadena que tiene el nombre de la ventana o del frame especificado en el
parámetro TARGET
<HTML>
<HEAD>
</HEAD>
<BODY>
<a name="arriba" target="_top">Inicio</a><br><br>

</script>
<a href="#arriba">Subir</a>
</BODY>
</HTML>
El objeto image
Gracias a este objeto (disponible a partir de la versión 3 de Netscape, aunque Microsoft lo

adoptó en la versión 4 de su navegador) vamos a poder manipular las imágenes del
documento, pudiendo conseguir efectos como el conocido rollover (cambio de imágenes al
pasar el ratón sobre la imagen).
Propiedades
 border. Contiene el valor del parámetro 'border' de la imagen.
 complete. Es un valor booleano que nos dice si la imagen se ha descargado completamente o no.
 height. Contiene el valor del parámetro 'height' de la imagen.
 hspace. Contiene el valor del parámetro 'hspace' de la imagen.
 lowsrc. Contiene el valor del parámetro 'lowsrc' de la imagen.
 name. Contiene el valor del parámetro 'name' de la imagen.
 src. Contiene el valor del parámetro 'src' de la imagen.
 vspace. Contiene el valor del parámetro 'vspace' de la imagen.
 width. Contiene el valor del parámetro 'width' de la imagen.
52
<HTML>
<HEAD>
</HEAD>

</script>
<BODY>
<a href="" onmouseover="cambia(imagen1,img1)"
onmouseout="cambia(imagen1,img2)"><img src="/graficos/nni1a.gif" width="68"
height="68" border="0" name="imagen1"></a><br><br>
<a href="javascript:dobleancho()">Doble ancho</a><br>
<a href="javascript:doblealto()">Doble Alto</a><br>
<a href="javascript:mitadancho()">Mitad ancho</a><br>
<a href="javascript:mitadalto()">Mitad Alto</a><br>
</BODY>
</HTML>
53
FORMULARIOS
En esta parte finalizamos el estudio de los objetos del navegador viendo cómo manipular
formularios. Este punto es especialmente importante: si aprendemos correctamente a
manipular todos los objetos de un formulario, podremos hacer funciones que nos permitan
validarlo antes de enviar estos datos a un servidor, ahorrándole la faena de tener que verificar
la corrección de los datos enviados.
El objeto form
Este objeto es el contenedor de todos los elementos del formulario. Como ya vimos al tratar el
objeto document, los formularios se agrupan en un array dentro de document. Cada elemento
de este array es un objeto de tipo form.
Propiedades
 action. Es una cadena que contiene la URL del parámetro ACTION del form, es decir, la dirección
en la que los datos del formulario serán procesados.
 elements. Es un array que contiene todos los elementos del formulario, en el mismo orden en el
que se definen en el documento HTML. Por ejemplo, si en el formulario hemos puesto, en este
orden, una caja de texto, un checkbox y una lista de selección, la caja de texto será elements[0],
el checkbox será elements[1] y la lista de selección será elements[2].
 encoding. Es una cadena que tiene la codificación mime especificada en el parámetro ENCTYPE
del form.
 method. Es una cadena que tiene el nombre del método con el que se va a recibir/procesar la
información del formulario (GET/POST).
Métodos
 reset(). Resetea el formulario: tiene el mismo efecto que si pulsáramos un botón de tipo RESET
dispuesto en el form.
 submit(). Envía el formulario: tiene el mismo efecto que si pulsáramos un botón de tipo SUBMIT
dispuesto en el form.
Vistas ahora las propiedades y métodos del objeto form, pasamos a estudiar, uno por uno,
todos los objetos contenidos en el formulario.
Los objetos text, textarea y password
Estos objetos representan los campos de texto dentro de un formulario. Además, el objeto
password es exactamente igual que el text salvo en que no muestra los caracteres introducidos
por el usuario, poniendo asteriscos (*) en su lugar.
Propiedades
 dafaultValue. Es una cadena que contiene el valor por defecto que se le ha dado a uno de estos
objetos por defecto.
 name. Es una cadena que contiene el valor del parámetro NAME.
 value. Es una cadena que contiene el valor del parámetro VALUE.
 maxlength. Número máximo de caracteres que puede contener el campo de texto.
Métodos
 blur(). Pierde el foco del ratón sobre el objeto especificado.
 focus(). Obtiene el foco del ratón sobre el objeto especificado.
 select(). Selecciona el texto dentro del objeto dado.
<HTML>
<HEAD>
</HEAD>

54
</script>
<BODY>
<form action="procesa.phtml" name="formulario" id="formulario" method="GET">
Nombre: <input type="text" name="nombre" value="Tu nombre" maxlength="15"><br>
Password: <input type="password" name="pass" maxlength="10"><br>
</form>
<a href="javascript:Mostrar();">Mostrar datos</a><br>
</BODY>
</HTML>
El objeto button
Tenemos tres tipos de botones: un botón genérico, 'button', que no tiene acción asignada, y
dos botones específicos, 'submit' y 'reset'. Estos dos últimos sí que tienen una acción asignada
al ser pulsados: el primero envía el formulario y el segundo limpia los valores del formulario.
Propiedades
Métodos
 click(). Realiza la acción de pulsado del botón
<HTML>
<HEAD>
</HEAD>

</script>
<BODY>
Un boton: <input type="button" name="Boton1" value="El boton 1"
OnClick="Mostrar(this);"><br><br>
OnClick="Mostrar(this);"><br><br>
OnClick="Mostrar(this);"><br>
</form>
</BODY>
</HTML>
El objeto checkbox
Las "checkboxes" nos permiten seleccionar varias opciones marcando el cuadrito que aparece
a su izquierda. El cuadrito pulsado equivale a un "sí" y sin pulsar a un "no" o, lo que es lo
mismo, a "true" o "false".
Propiedades
 checked. Valor booleano que nos dice si el checkbox está pulsado o no
 defaultChecked. Valor booleano que nos dice si el checkbox debe estar seleccionado por defecto
o no
Métodos
 click(). Realiza la acción de pulsado del botón
<HTML>
<HEAD>
55
</HEAD>

</script>
<BODY>
<input type="checkbox" name="check1" checked> Opcion 1<br>

<input type="checkbox" name="check2"> Opcion 2<br>
<input type="checkbox" name="check3" checked> Opcion 3<br>
</form>
<A href="javascript:Mostrar()">Ver valores</A>
</BODY>
</HTML>
El objeto radio
Al contrario que con los checkbox, que nos permiten elegir varias posibilidades entre las dadas,
los objetos radio sólo nos permiten elegir una de entre todas las que hay. Están pensados para
posibilidades mútuamente excluyentes (no se puede ser a la vez mayor de 18 años y menor de
18 años, no se puede estar a la vez soltero y casado, etc.).
Propiedades
 checked. Valor booleano que nos dice si el radio está seleccionado o no.
 defaultChecked. Valor booleano que nos dice si el radio debe estar seleccionado por defecto o
no.
 length. Valor numérico que nos dice el número de opciones dentro de un grupo de elementos
radio.
Hay que recordar que para agrupar elementos de tipo radio, todos ellos deben tener el mismo
valor en NAME.
Métodos
 click(). Realiza la acción de pulsado del botón.
<HTML>
<HEAD>
</HEAD>

</script>
<BODY>
Edad:<br>
<input type="radio" name="edad" value="<18"> Menor de 18 años.<br>
<input type="radio" name="edad" value=">18 y <60" checked> Entre 18 y 60
años.<br>
56
<input type="radio" name="edad" value=">60"> Mayor de 60 años.<br>
</form>
</BODY>
</HTML>
El objeto select
Este objeto representa una lista de opciones dentro de un formulario. Puede tratarse de una
lista desplegable de la que podremos escoger alguna (o algunas) de sus opciones.
Propiedades del objeto select

 length. Valor numérico que nos indica cuántas opciones tiene la lista
 name. Es una cadena que contiene el valor del parámetro NAME
 options. Se trata de un array que contiene cada una de las opciones de la lista. Este array tiene,
a su vez, las siguientes propiedades:
- defaultSelected. Valor booleano que nos indica si la opción está seleccionada por defecto.
- index. Valor numérico que nos da la posición de la opción dentro de la lista.
- length. Valor numérico que nos dice cuántas opciones tiene la lista.
- options. Cadena con todo el código HTML de la lista.
- selected. Valor booleano que nos dice si la opción está actualmente seleccionada o no.
- text. Cadena con el texto mostrado en la lista de una opción concreta.
- value. Es una cadena que contiene el valor del parámetro VALUE de la opción concreta de
la lista.
 selectedIndex. Valor numérico que nos dice cuál de todas las opciones disponibles está
actualmente seleccionada.
<HTML> <HEAD>
</HEAD>

</script>
<BODY>
Edad:<br>
<select name="edad">
<option value="<18" SELECTED>Menor de 18 años</option>
<option value=">18 y <60">Entre 18 y 60 años</option>
<option value=">60">Mayor de 60 años</option>
</select>
</form>
</BODY> </HTML>
El objeto hidden
Gracias a este objeto podemos almacenar información extra en el formulario de forma

completamente transparente para el usuario, pues no se verá en ningún momento que tenemos
estos campos en el documento.
Es parecido a un campo de texto (objeto text) salvo que no tiene valor por defecto (no tiene
sentido pues el usuario no va a modificarlo) y que no se puede editar.
Propiedades
57
Lec ción 10. Estilos
 Introducción a CSS
 Sintaxis CSS, Selectores CSS.
 Clases, pseudocódigos y pseudoelementos
 Atributos y valores: bordes, fondos, el texto, márgenes, cursores, transparencias y css.
 Las reglas AT. La regla @import. Tipos de medio.
 Proyecto: Páginas con Estilo
Introducción a CSS
CSS (Cascading Style Sheets) es un lenguaje de estilo
pensado para dar al navegador detalles sobre el
aspecto de una objeto, su principal objetivo es el de
separar el documento (estructura y datos) en sí de el
aspecto del mismo.
Usar CSS tiene muchas ventajas frente a el HTML de hace algunos años, pues además de
permitir definir un estilo más depuradamente, nos permite definir un estilo concreto para un
determinado grupo de elementos, podemos realizar estilos diferentes para la misma página
(como skins), usar el mismo estilo en páginas didtintas...
Se puede aplicar CSS directamente en un elemento utilizando el parámetro style como

podemos ver en el siguiente ejemplo:
000 <input style="border: 1px solid black;" type="text">
Tambien podemos agrupar los estilos entre las etiquetas style y asignar cada estilo a un
elemento usando selectores, veamos un ejemplo de documento HTML con etiquetas style:
estilo.htm
000 <html>
001 <head>
002 <title>Este es un ejemplo</title>
003 <style>
004 input {
005 border: 1px solid black;
006 }
007 </style>
008 </head>
009 <body>
010 <input type="text">
011 </body>
012 </html>
Otra opción, es guardar todos los estilos del documento en un archivo aparte al que daremos
la extensión css, y luego llamaremos a este archivo en todas nuestras páginas, veamos un
ejemplo de archivo .css:
estilo.css
000 input {
002 }
Y finalmente veamos como incluirlo en nuestra página.
estilo.htm
000 <html>
001 <head>
58
002 <title>Este es un ejemplo</title>
003 <link rel="stylesheet" type="text/css" href="estilo.css">
004 </head>
005 <body>
006 <input type="text">
007 </body> </html>
Y de esta manera, tenemos un documento con todos los estilos de nuestra web, que
podremos incluir en todas nuestras páginas para que tengan un mismo diseño.
Sintaxis CSS
Vamos a ver cómo debemos escribir para crear un CSS válido que los navegadores sean
capaces de interpretar, para ello tendremos que tener en cuenta tres elementos:
atributos - Son una palabra que identifica a que estilo nos referimos
valores - Indican como queremos que sea ese atributo
selectores - Indican sobre que elementos queremos trabajar
La sintaxi de CSS es muy simple, consiste en poner el nombre del atributo, seguido por dos
puntos y el valor que se le asigna, ademas, si queremos escribir varios estilos los
separaremos por punto y coma y/o opcionalmente un salto de línea:
000 color: #000000;

001 background: #FFFFFF
En el caso que estemos trabajando fuera de un objeto, es decir, que no estemos usando el
parametro style="", tendremos que indicar sobre que elemento de la página queremos
aplicar ese estilo, esto lo haremos con selectores.
Escribiremos el selector seguido de los atributos del objeto entre corchetes, veamos un
ejemplo:
000 input {
001 color: #000000;
002 background: #FFFFFF
003 }
Este ejemplo en concreto, se aplicará para todos los elementos input del documento dandole
el color #000000 (negro) y de fondo el #FFFFFF (blanco).
Los valores que aplicamos al atributo, dependerán del atributo en cuestión y se explicarán
más adelante en este mismo curso.
Selectores CSS
Un selector es la parte de un estilo CSS donde se indica sobre que parte del documento
(X)HTML se debe aplicar el estilo, resumiendo, se podría decir que es el nombre del estilo,
ejemplo:
000 div { font-size: 18px; }
En la anterior regla el selector seria div y para ser un poco mas técnicos, font-size sería el
atributo o propiedad y 18px el valor, a su vez estos dos últimos junto con las corchetas de
inicio y cierre serían la declaración (Recuerdalo a lo largo de este artículo).
Tras esta pequeña info... Disponemos de diferentes tipos de selectores que como es obvio
actúan de forma diferente: Selectores, Selectores Descendientes, Selectores Hermano
Adyacentes, Selectores de Atributos, Selectores de clases, Selectores de Id y Selectores
Hijo... Explicamos cada uno y ponemos un ejemplo.
59
Pero antes de empezar y para los usuarios mas novatos, sería conveniente entender el
concepto de Elemento Padre y Elemento Hijo si ya lo conoces saltate este párrafo.
Cuando hablo de elemento me refiero a una etiqueta (X)HTML como pueda ser span o div
por lo que si le buscas la lógica el padre es la etiqueta principal que dentro de ella tiene otras
etiquetas, por ejemplo body siempre será un padre y en un código como el siguiente:
000 <div><strong>Rapidamente sucedio lo inesperado...<strong></div>
El padre sería div y strong el hijo puesto que strong está dentro de div. A su vez un hijo
puede tener otros hijos y así de forma jerárquica.
Selectores
Simplemente selectores, es lo más básico y que ya se ha insinuado al inicio del artículo. Los
selectores hacen referencia a etiquetas de nuestro documento (X)HTML tal y como se ha
mostrado en el primero ejemplo de selector:
000 div { font-size: 18px; }
Esto indicaría que todos los elementos div de nuestro documento (X)HTML utilizarían el
estilo marcado por este código (tamaño de letra a 18px).
Selectores Descendientes
Este selector afectaría a una etiqueta hijo de un padre de forma descendiente:
000 div span { font-size: 18px; }
Por lo que todos los elementos span de nuestro documento (X)HTML que estén dentro de un
elemento div se verán afectados por esta regla. Vemos un ejemplo:
000 <head><style type="text/css">

001 div span { font-size: 18px; }
002 </style></head>
003
004 <body>
005 <span>Rapidamente sucedio lo inesperado... </span>
006 <div><span>Y el gato se subio por la montaña</span></div>
007 </body>
Observarás como en el resultado se ven dos frases, una con tamaño normal y otra (la
segunda) con un tamaño de 18px
Selectores hermano Adyacentes

Quizá sea el tipo de selector menos utilizando pero vamos a verlo... A diferencia de otros
selectores este no se aplica ni a padres ni a hijos sino a hermanos.
000 h5 + h6 { font-size: 18px; }
Esta regla afectaría únicamente a h6 pero solo cuando este se encontrara inmediatamente
después de un h5 o cuando h5 y h6 sean hijos del mismo padre. Vemos un ejemplo:
000 <head> <style type="text/css">

001 h5 + h6 {font-size:18px}
002 </style> </head>
003
004 <body>
005 <h5>Rapidamente sucedio lo inesperado...</h5>
006 <h6>Y el gato se subio por la montaña</h6>
60
007 </body>
008
Efectivamente h6 aparecerá con letra de 18 pixeles pero si entre h5 y h6 colocamos algún

otro elemento como un párrafo p el selector hermano "adyacente" dejará de aplicarse a h6.
Página Siguiente…¿?
Clases, pseudoclases y pseudoelementos
Clases
Una clase es una série de propiedades y métodos que se agrupan en una estructura para
poder aplicarlos conjuntamente a una série de objetos, como CSS no tiene métodos, en este
caso la clase solo contendrá propiedados (atributos) y decidiremos que objetos pertenecen a
esta clase con el atributo HTML class.
La clase se definirá como expliqué en Sintaxis CSS, utilizando un selector de clase y

poniendo todos los atributos y valores entre corchetes, veamos un ejemplo completo:
000 <html>
001 <head>
002 <title>Mi CSS</title>
003 <style>
004 .miClase {
005 border: 1px solid red;
006 padding: 4 4 4 4;
007 </style>
008 </head>
009 <body>
010 <b>Menú</b>
011 <div class="miClase">Indice</div>
012 <div class="miClase">Descargas</div>
013 <div class="miClase">Links</div>
014 </body>
015 </html>
Como podeis ver, todos los objetos div están en la clase miClase, por lo tanto todos estos
objetos tendrán las mismas propiedades.
Pseudoclases
Las pseudoclases són unas clases especiales de HTML, que se refieren a algunos estados
especiales del elemento, las pseudoclases, igual que los pseudoelementos, se escriben de la
siguiente manera:
000 objeto:pseudoclase {
001 propiedad: valor;
002 }
Las principales pseudoclases són para el objeto A (vínculo), y són las siguientes:
link - Enlace sin explorar
visited - Enlace que ha sido seguido por el usuario
active - Enlace seleccionado por el usuario
hover - Enlace que tiene el ratón encima
Pseudoelementos
Los pseudoelementos són partes determinadas de de un objeto, y tenemos las siguientes.
first-letter - Se refiere a la primera letra del objeto.
first-line - Se refiere a la primera línea del objeto.
De esta manera, con las pseudoclases y pseudoelementos, podemos definir una letra capital
para la primera fila de cada párrafo, un enlace que se recuadra si le ponemos el mouse
encima...
61
Atributos y valores
Atributos
Los atributos y valores en CSS, como ya hemos visto en Sintaxis CSS són muy fáciles de
usar, pues tansolo hemos de indicar el nombre del atrbuto seguido de dos puntos (:) y del
valor que tomará el atributo.
Valores
Los valores pueden ser de formato numérico, booleano o cadena de caracteres pero no se
distinguirán entre ellos, así que podre escribir...
000 border: 0;
002 border: false;
...y en todos los casos estaré escribiendo los valores de forma correcta.
En algunos casos, como vemos en el ejemplo con valor '1px solid black', los valores
numéricos són acompañados por una unidad de medida, que puede ser una unidad relativa
(%, em, ex) o una unidad métrica (px, pt, pc, in, mm, cm).
Queda explicar un caso curioso de valor que ya conocemos del HTML que es el valor RGB
(valor de color hexadecimal precedido por almoadilla (#) ).
Bordes
El borde de un objeto, es el espacio que lo limita, y puede ser o no ser visible, CSS nos
permite una gran cantidad de bordes que podemos escojer entre diferentes tipos, grosores y
colores de la siguiente manera:
border: grosor tipo color;
Y además también podemos definir un borde determinado:
border-top: grosor tipo color; /* superior */

border-bottom: grosor tipo color; /* inferior */
border-left: grosor tipo color; /* izquierdo */
border-right: grosor tipo color; /* derecho */
Grosores
El grosor de un borde se define en píxels, y utilizan el subijo px, si definimos un borde de dos
píxels haremos:
000 <div style="border: 2px solid black;">ejemplo</div>
Por otro lado, si no queremos que el borde sea visible, le daremos grosor 0:
000 <div style="border: 0;">ejemplo</div>
Tipos
El tipo de borde define el aspecto del mismo, ya puede ser a rayas, continuo, punteado... a
elegir entre la siguiente lista:
none - Objeto sin borde
hidden - Borde del objeto oculto
dotted - Borde punteado · · ·
dashed - Borde discontínuo - - -
solid - Borde contínuo
double - Borde doble
62
groove - Borde con sombra oscura
ridge - Borde con sombra clara
inset - Borde 3D hacia afuera
outset - Borde 3D hacia adentro
Por ejemplo, podemos hacer un borde de puntos de 4 pixels:
000 <div style="border: 4px dotted black;">ejemplo</div>
Colores
Es el color del borde, puede ser cualquier color HTML:
000 <div style="border: 4px dotted #ff0000;">ejemplo</div>
Y este es el resultado del ejemplo:
Fondos
Con CSS se puede personalizar los fondos de cada objeto de nuestra página, permitiendonos
escojer el color de fondo, una imagen, la posición de la imagen, el comportamiento, y las
repeticiones de la misma...
El color de fondo
El color de fondo se define usando el atributo background-color y un color RGB cómo valor.
000 <div style"background-color: #ff0000;">ejemplo</div>
La imagen de fondo
Podemos definir un objeto con una imagen de fondo usando el atributo background-image y
cómo valor una forma del estilo url(imagen.jpg), por ejemplo:
000 <div style"background-

image: url(imagen.gif);">ejemplo</div>
La posición del fondo

La imagen de fondo se puede aliniar a la parte superior, inferior.., para esto usaremos el
atributo background-position, indicando uno o mas de los siguientes valores:
top - Aliniar en la parte superior
bottom - Aliniar en la parte inferior
center - Aliniar en el medio
left - Aliniar a la izquierda
right - Aliniar a la derecha
Vamos a ver un ejemplo de imagen de fondo aliniada en la parte superior derecha:

position: top right;">ejemplo</div>
El comportamiento
El comportamiento de la imagen de fondo cuando usamos las barras de desplazamiento
también se puede definir con el atributo background-attachment, que puede ser:
scroll - La imagen se mueve con el interior del objeto
fixed - La imagen no se mueve
Podemos hacer que el fondo no se desplace al desplazar la página:
63
attachment: fixed;">ejemplo</div>
Las repeticiones
Podemos hacer que la imagen de fondo se repita usando el atributo background-repeat:
repeat - La imagen se repite vertical y horizontalmente
repeat-x - La imagen se repite horizontalmente
repeat-y - La imagen se repite verticalmente
no-repeat - La imagen no se repite
Podemos hacer que el fondo no se desplace al desplazar la página:

attachment: fixed;">ejemplo</div>
El atributo background
El atributo background es una mezcla de los cinco anteriores y nos permite usar todos sus
posibles valores para definir los fondos de los elementos rapidamente:
000 <body style"background: #ff0000 url(imagen.gif) repeat-

x top fixed;">ejemplo</body>
El texto
CSS nos permite definir muchos parámetros relativos al texto que pertenece a un
determinado objeto, entre ellos, podemos definir el color del texto, el color del resaltado, su
espaciado...
El color del texto

El color del texto, lo definimos dando de valor un color (por ejemplo RGB) al atributo color.
000 <p style="color: #ff0000;">prueba</p>
La dirección del texto

El atributo direction, define si el texto se escribe de derecha a izquierda o de izquierda a
derecha.
rtl - De derecha a izquierda.
rtl - De izquierda a derecha.
Veamos un ejemplo de texto de derecha a izquierda:
000 <p style="direction: rtl; ">prueba</p>
El espacio entre letras

El atributo letter-spacing, indica el tamaño que debe separar las letras entre ellas, su valor
puede ser normal o una unidad de medida:
000 <p style="letter-spacing: 2px;">prueba</p>
La alineación del texto

El atributo text-align nos permite alinear el texto en de cualquiera de las siguientes maneras:
left - Alinea el texto a la izquierda
right - Alinea el texto a la derecha
center - Alinea el texto en el centro
justify - Alinea el texto a ambos lados
Veamos un ejemplo de texto alineado a ambos lados:
000 <p style="text-align: justify;">prueba</p>
64
La decoración del texto
Usando el atributo text-decoration podemos indicar las siguientes decoraciones:
none - Sin decoración
underline - Texto subrayado
overline - Texto sobre rallado
line-through - Texto tachado
blink - Texto intermitente
Veamos un ejemplo que nos subrayará el texto:
000 <p style="text-decoration: underline; ">prueba</p>
El desplazado de la primera línea

Usando el atributo text-indent podemos hacer que la primera línea del texto aparezca
ligeramente desplazada:
000 <p style="text-indent: 10px;">prueba</p>
Mayúsculas y minúsculas
Usando el atributo text-transform podemos hacer que el texto se vea en los siguientes
modos:
none - Como está escrito
capitalize - Todas las palabras empiezan por mayúsculas
uppercase - Todo en mayúsculas
lowercase - Todo en minúsculas
Veamos un ejemplo de texto en mayúsculas:
000 <p style="text-transform: capitalize;">prueba</p>
Los espacios
Con white-space podemos indicar cómo se interpretarán los espacios:
normal - Los espacios en blanco són ignorados.
pre - Se respetan los espacios en blanco
nowrap - No se puede cortar la línea por los espacios
Veamos un ejemplo respetando espacios:
000 <p style="white-space: pre;">a b c</p>
El espacio entre palabras

El atributo word-spacing, indica el tamaño que debe sebarar las palabras entre ellas, su valor
puede ser normal o una unidad de medida:
000 <p style="word-spacing: 20px;">prueba</p>
Margenes
El margen de un objeto es el espacio que le separa de sus objetos adyacentes tanto por la
parte superior e inferior como por ambos lados.
Definir el margen
Para definir el margen entre un objeto y sus adacentes utilizamos el atributo margin, que
tendrá como valor entre 1 y 4 unidades de medida, veamos un ejemplo:
000 <div style="margin: 4px;">ejemplo</div>
En este ejemplo, hemos usado sólo una unidad de medida ( 4px ) pero podemos usar hasta
4 separadas por espacios:
65
000 <div style="border: 4px 4px 4px 4px;">ejemplo</div>
En este caso, serán respectivamente:

margen superior: 4px 4px 4px 4px;
margen derecho: 4px 4px 4px 4px;
margen inferior: 4px 4px 4px4px;
margen izquierdo: 4px 4px 4px 4px;
El margen interior
De la misma manera que definimos el margen ( por el exterior del borde ) usando pading
del mismo modo que usamos margin:
000 <div style="margin: 4px; padding: 10px; border: 1px solid red">eje
mplo</div>
Cursores
Los estilos CSS nos permiten la configuracion del cursor que se mostrará cuando el puntero
se situe encima de un determinado objeto, que puede ir desde un vinculo al mismo objeto
body.
Para configurar un cursor podemos usar distintos métodos, el mas sencillo de ellos es usar el
atributo style:
000 <p style="cursor:hand">Este texto tendra el cursor hand</p>
El valor que daremos al estilo cursor (hand en el ejemplo) será uno de los nombres de la
siguiente lista:
+ all-scroll - Cursor con un punto en el centro y 4 flechas cardinales
+ auto - Cursor por defecto del objeto
+ crosshair - Puntero en forma de cruz
+ col-resize - Flechas al este y oeste separadas por una barra vertical
+ default - El cursor por defecto del objeto body
+ hand - Puntero con forma de mano
+ help - Cursor interrogante, tipico de ayuda
+ move - Mouse con forma de cruz aspada
+ no-resize - Mano con una señal pequeña de prohivido
+ not-allowed - Cursor circular con una barra diagonal
+ n-resize - Forma de flecha, cambiaremos n por:
e - Flecha hacia el este
ne - Flecha hacia el noreste
nw - Flecha hacia el noroeste
n - Flecha hacia el norte
sw - Flecha hacia el suroeste
s - Flecha hacia el sur
w - Flecha hacia el oeste
+ pointer - Puntero con forma de mano
+ progress - Cursor default junto un reloj de arena
+ row-resize - Cursor col-resize pero en vertical
+ text - Cursor con forma de escriptura
+ vertical-text - Puntero en forma de escritura vertical
+ wait - Cursor de espera (Reloj de arena)
Nota: Los cursores en rojo solo funcionan en IE6

Ademas, existe la posibilidad de definir un puntero propio para IE6, para ello usaremos:
0 <a href="index.php" style="cursor:url(http://www.google.com/favicon

00 .ico)">Este texto tendra el cursor de google</a>
66
Para modificar el cursor de un objeto desde javascript, usaremos:
000 <script>
001 document.body.style.cursor = 'crosshair';
002 </script>
Este código cambia el cursor de la pagina por una cruz
Transparencias y CSS
La propiedad opacity introducida en CSS3 permite definir la transparencia de un elemento
con valores entre 0 ( transparente ) y 1 ( visible ), de esta manera deberíamos poder definir
un elemento semitransparente de la así:
000 elemento {
001 opacity: 0.5;
002 }
Pero esto no deja de ser "en teoría" ya que si bien hasta CSS3 no existía una propiedad
estándar para las transparencias, los diferentes navegadores habían desarrollado sus propios
métodos para conseguirlas.
Las versiones de Mozilla anteriores a la 1.7 soportan únicamente la propiedad -moz-opacity

idéntica a opacity mientras que Internet Explorer dispone de un filtro para definir la opacidad
en tanto por ciento.
000 elemento {
001 opacity: 0.5;
002 -moz-opacity: 0.5;
003 filter: alpha(opacity=50);
004 }
Comentarios CSS
Comentario
Un comentario es un texto que añadimos a nuestro código para hacerlo mas entendible a la
hora de revisarlo o de que otra persona continue nuestro trabajo, de esta manera podemos
indicar para que se crea casa selector, que es cada atributo... pero que a la hora de la
verdad no influyen en el funcionamiento de un código.
Los comentarios en CSS són como los comentarios multilínea en C, es decir, una barra
inclinada hacia la derecha seguida de un asterisco (/*) para abrir y lo mismo en orden
inverso para cerrar (*/), de esta manera, podemos escribir una o varias línead de
comentario como veremos en el siguiente ejemplo:
000 input { [font color="#FF9900"]/* Este es el nuevo estilo input */[/font]

002 }
003 [font color="#FF9900"]/* Este es el viejo estilo que hemos comentado
para que no funcione.
004 input {
005 border: 0;
006 }
007 */[/font]
008
009
67
Hay que tener cuidado al abrir un comentario dentro de otro comentario, porque
generalmente el navegador detectará la apertura del primer comentario y lo finalizará
cuando acaba el segundo, mirar este ejemplo:
Asi tendria que ser

000 [font color="#FF9900"]/* comentario 1
001 /* comentario 2 */
002 input {
004 }
005 */[/font]
Que el navegador interpretará cómo:
Así es como será

000 [font color="#FF9900"]/* comentario 1
001 /* comentario 2 */[/font]
002 input {
004 }
005 */
Como podeis comprovar, en el ejemplo, al encontrar el primer */ se acaba el comentario

para el navegador y el input tendrá un borde negro de 5 píxels.
Las reglas AT
Las reglas AT, son agrupaciones de selectores que nos permiten aplicarlas en bloque a un
objeto determinado, su sintaxis es parecida a la de un selector, con la diferencia que están
precedidas por una coma, y pueden contener algunos atributos antes de el primer bracket
({):
000 <style>
001 @media print {
002 .publicidad {
003 visibility: hidden
004 }
005 }
006 </style>
Las reglas AT que podemos encontrar frecuentemente y que se explicarán en futuros

artículos de este curso són:
font-face - Define una fuente personalizada a partir de un conjunto de atributos, como
pueden ser su tipo de fuente, su tamaño, un archivo ttf...
import - Importa los estilos de una hoja CSS externa
media - Especifica un conjunto de selectores para diferentes médios
page - Especifica los margenes y formato de hoja para medios paginados como puede ser la
impresora
Hay que tener cuidado, porque algunas de estas reglas no están soportadas todavía por
todos los navegadores, esto lo veremos cuando aprofundicemos en cada una de ellas
La regla @import
La regla import es una regla que nos permite importar una hoja de estilos CSS externa en el
interior de nuestras etiquetas style, de esta manera podemos aplicar los archivos de esa hoja
68
en la página actual.
La sintaxis correcta de la regla import es la siguiente:
000 <style>
001 @import url("estilos.css");
002 </style>
El nombre entre dobles comillas el archivo que hay que cargar, hay una sintaxis abreviada y
también aceptada que suprime la clave url, veamos el mismo ejemplo con esta otra sintaxis:
000 <style>
001 @import "estilos.css";
002 </style>
Con cualquiera de los dos casos, el navegador cargaría la hoja de estilos 'estilos.css' y
aplicaría su contenido a la página actual.
Opcionalmente, podemos importar un archivo para un tipo de medio determinado, por

ejemplo, si queremos una hoja de estilos para la impresora y otra para la página, podemos
hacer:
000 <style>
001 @import url("impresora.css") print;
002 @import url("normal.css") screen;
003 </style>
Esto nos cargará un estilo diferente para la versión imprimida de la página.
Tipos de medio
Un medio describe el soporte en el que se muestra la página a la que se aplica el CSS en
cuestión, podemos desear un estilo diferente según si vemos la página en la pantalla de un
ordenador, en una hoja impresa...
Los usaremos para reglas cómo import o media para definir estilos alternativos para nuestras
páginas.
Los medios existentes són:

all - Para todos los medios
aural - Para sintetizadores de voz
braille - Para dispositivos tactiles en braille
embossed - Para impresoras braille
handheld - Para dispositivos de mano como pocket pc's, palms...
print - Para la vesión imprimible de las páginas
projection - Para presentaciones en proyector
screen - Para pantallas de ordenador
tty - Para teletipos, consola y otros medios de texto...
tv - Para pantallas de televisión
Internet explorer, soporta los siguientes tipos de medio: all, screen y print.
Existen además grupos de medios que incluyen diversos medios, y són:

continous - Incluye aural, braille, handheld, screen, tty y tv
paged - Incluye emboss, handheld, print, projection y tv
visual - Incluye handheld, print, projection, screen, tty y tv
aural - Incluye aural y tv
tactile - Incluye braille y emboss
69
grid - Incluye braille, emboss, handheld y tty
bitmap - Incluye handheld, print, projection, screen y tv
interactive -Incluye todos menos print y projection
static - Incluye todos
De esta manera, si usamos el tipo de medio bitmap, el estilo se apliacrá para handheld,
print, projection, screen y tv
70
Lección 11 y 12. Evaluación


71
Lección 13: Fundamentos de PHP
 Importancia de PHP y Campos de aplicación de PHP
 ¿Qué se puede hacer con PHP?
 Sintaxis básica. Saliendo de PHP
 Tipos de datos. Conversiones
Operadores y estructuras de control
 Operadores; aritméticos, asignación, binarios, comparación y ternarios.
 Operadores de control de errores, ejecución, incremento y decremento.
 Operadores lógicos, cadena y matrices.
 Estructuras de control if, elseif, else, endif.
Importancia de PHP y Campos de aplicación de PHP
PHP es un lenguaje creado por una gran comunidad de personas. El sistema fue desarrollado
originalmente en el año 1994 por Rasmus Lerdorf como un CGI escrito en C que permitía la
interpretación de un número limitado de comandos. El sistema fue denominado Personal Home
Page Tools y adquirió relativo éxito gracias a que otras personas pidieron a Rasmus que les
permitiese utilizar sus programas en sus propias páginas. Dada la aceptación del primer PHP y
de manera adicional, su creador diseñó un sistema para procesar formularios al que le atribuyó
el nombre de FI (Form Interpreter) y el conjunto de estas dos herramientas, sería la primera
versión compacta del lenguaje: PHP/FI.
La siguiente gran contribución al lenguaje se realizó a mediados del 97 cuando se volvió a

programar el analizador sintáctico, se incluyeron nuevas funcionalidades como el soporte a
nuevos protocolos de Internet y el soporte a la gran mayoría de las bases de datos
comerciales. Todas estas mejoras sentaron las bases de PHP versión 3. Actualmente PHP se
encuentra en su versión 5, donde la programación orientada a objetos esta completa y cuenta
con mucho más funciones que las versiones anteriores.
PHP es un lenguaje de programación que se interpreta en el servidor HTTP y envía el

resultado de su ejecución al navegador del usuario. PHP (acrónimo de "PHP: Hypertext Pre-
processor") es un lenguaje de "código abierto" interpretado, de alto nivel, embebido en páginas
HTML y ejecutado en el servidor.
Ejemplo1. Script_PHP que muestra un mensaje.

<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<?php
echo "Hola, este es un script PHP...";
?>
</body>
</html>
Puede apreciarse que no es lo mismo que un script escrito en otro lenguaje de programación
como ASP.NET y C#.NET. En vez de escribir un programa con muchos comandos para crear
una salida en HTML, se escribe el código HTML con cierto código PHP embebido (incluido) en
el mismo, que producirá cierta salida. El código PHP se incluye entre etiquetas especiales de
comienzo y final que nos permitirán entrar y salir del modo PHP.
Lo que distingue a PHP de la tecnología Javascript, la cual se ejecuta en la máquina cliente, es

que el código PHP es ejecutado en el servidor. Si tuviésemos un script similar al ejemplo
anterior en el servidor, el cliente solamente recibiría el resultado de su ejecución en el servidor,
sin ninguna posibilidad de determinar qué código ha producido el resultado recibido. El servidor
web puede ser incluso configurado para que procese todos los archivos HTML con PHP.
Ejemplo2. Script_JavaScript que muestra un mensaje.

<html>
72
<head>
<title>Ejemplo</title>
</head>
<body>
document.write("Hola, este es un script JavaScript...");
</script>
</body>
</html>
Lo mejor de usar PHP es que es extremadamente simple para el principiante, pero a su vez,
ofrece muchas características avanzadas para los programadores profesionales.
¿Qué se puede hacer con PHP?
PHP puede hacer cualquier cosa que se pueda hacer con un script, como procesar la
información de formularios, generar páginas con contenidos dinámicos, o enviar y recibir
cookies. Y esto no es todo, se puede hacer mucho más.
Existen tres campos en los que se usan scripts escritos en PHP.
Scripts del lado del servidor. Este es el campo más tradicional y el principal foco de
trabajo. Se necesitan tres cosas para que esto funcione. El intérprete PHP (CGI ó
módulo), un servidor web y un navegador.
Scripts en la línea de comandos. Puede crear un script PHP y correrlo sin ningún
servidor web o navegador. Solamente necesita el intérprete PHP para usarlo de esta
manera. Este tipo de uso es ideal para scripts ejecutados regularmente desde cron (en
*nix o Linux) o el Planificador de tareas (en Windows).
Escribir aplicaciones de interfaz gráfica. Probablemente PHP no sea el lenguaje

más apropiado para escribir aplicaciones gráficas, pero si conoce bien PHP, y quisiera
utilizar algunas características avanzadas en programas clientes, puede utilizar PHP-
GTK para escribir dichos programas.
PHP puede ser utilizado en cualquiera de los principales sistemas operativos del mercado,
incluyendo Linux, muchas variantes Unix (incluyendo HP-UX, Solaris y OpenBSD), Microsoft
Windows, Mac OS X, RISC OS, etc. PHP soporta la mayoría de servidores web de hoy en día,
incluyendo Apache, Microsoft Internet Information Server, Personal Web Server, Netscape e
iPlanet, Oreilly Website Pro server, Caudium, Xitami, OmniHTTPd y muchos otros. De modo
que, con PHP tiene la libertad de elegir el sistema operativo y el servidor de su gusto. También
tiene la posibilidad de usar programación procedimental o programación orientada a objetos.
Con PHP no se encuentra limitado a resultados en HTML. Entre las habilidades de PHP se
incluyen: creación de imágenes, archivos PDF y películas Flash (usando libswf y Ming) sobre la
marcha. También puede presentar otros resultados, como XHTML y archivos XML. PHP puede
autogenerar estos archivos y almacenarlos en el sistema de archivos en vez de presentarlos en
la pantalla.
Otra de las características más potentes y destacables de PHP es su soporte para una gran
cantidad de bases de datos. Escribir un interfaz vía web para una base de datos es una tarea
simple con PHP. Las siguientes bases de datos están soportadas actualmente:
Adabas D Ingres Oracle (OCI7 and OCI8)

Empress FrontBase PostgreSQL
Hyperwave Direct MS-SQL Sybase
IBM DB2 MySQL Velocis
Informix ODBC Unix dbm
Etc.
73
PHP soporta ODBC (el Estándar Abierto de Conexión con Bases de Datos), también cuenta
con soporte para comunicarse con otros servicios usando protocolos tales como LDAP, IMAP,
SNMP, NNTP, POP3, HTTP, COM (en Windows) y muchos otros.
Si se usa PHP en el campo del comercio electrónico, son muy útiles las funciones Cybercash,
CyberMUT, VeriSign Payflow Pro y CCVS para sus programas de pago.
También hay otras extensiones como las funciones del motor de búsquedas mnoGoSearch,
utilidades de compresión (gzip, bz2), conversión de calendarios, traducción, etc.
Sintaxis básica
Saliendo de HTML
Hay cuatro conjuntos de etiquetas que pueden ser usadas para denotar bloques de código
PHP. De estas cuatro, sólo 2 (<?php. . .?> y <script language="php">. . .</script>) están
siempre disponibles; el resto pueden ser configuradas en el fichero de php.ini para ser o no
aceptadas por el intérprete. Mientras que el formato corto de etiquetas (short-form tags) y el
estilo ASP (ASP-style tags) pueden ser convenientes, no son portables como la versión de
formato largo de etiquetas. Además, si se pretende embeber código PHP en XML o XHTML,
será obligatorio el uso del formato <?php. . .?> para la compatibilidad con XML.
Las etiquetas soportadas por PHP son:
Ejemplo 3. Formas de escapar de HTML
Modo1.
<?php echo("si quieres servir documentos XHTML o XML, haz como aquí"); ?>
Modo2.
<? echo ("esta es la más simple, una instrucción de procesado SGML <br>");
?>
<?= expression ?> Esto es una abreviatura de "<? echo expression ?>"
Modo3.
<script language="php">
echo ("muchos editores (como FrontPage) no
aceptan instrucciones de procesado");
</script>
Modo4.
<% echo ("Opcionalmente, puedes usar las etiquetas ASP"); %>
<%= $variable; # Esto es una abreviatura de "<% echo. . ." %>
El método primero, <?php. . .?>, es el más conveniente, ya que permite el uso de PHP en
código XML como XHTML.
El método segundo no siempre está disponible. El formato corto de etiquetas está disponible
con la función short_tags() (sólo PHP 3), activando el parámetro del fichero de configuración de
PHP short_open_tag, o compilando PHP con la opción --enable-short-tags del comando
configure. Aunque esté activa por defecto en php.ini-dist, se desaconseja el uso del formato de
etiquetas corto.
El método cuarto sólo está disponible si se han activado las etiquetas ASP en el fichero de
configuración: asp_tags.
Tipos de datos
PHP soporta ocho tipos primitivos.
Cuatro tipos escalares:

boolean
74
integer
float (número de punto-flotante, también conocido como 'double')
string
Dos tipos compuestos:
array
object
Y finalmente dos tipos especiales:
resource
NULL
Pseudo-tipos
mixed
number
callback
El tipo de una variable usualmente no es declarado por el programador; en cambio, es decidido

en tiempo de compilación por PHP dependiendo del contexto en el que es usada la variable.
Para chequear el tipo y valor de una cierta expresión, se debe usar var_dump().
Para una representación legible para los propósitos de depuración, se debe usar gettype().
Para chequear por un cierto tipo, no usar gettype(); en su lugar utilice las funciones is_tipo.
Ejemplos 4: Chequear el tipo, valor y representación del tipo de datos
<?php
$bool = TRUE; // un valor booleano
$str = "hola"; // una cadena
$int = 12; // un entero
echo gettype($bool)."<br>"; // imprime "boolean"

echo gettype($str)."<br>"; // imprime "string"
// Si este valor es un entere, incrementarlo en cuatro

if (is_int($int))
{
$int += 4;
echo ("El valor es: ".$int."<br>");
}
// Si $bool es una cadena, imprimirla

if (is_string($bool))
{
echo ("Cadena: ".$bool."<br>"); //(no imprime nada)
}
?>
Si quisiera forzar la conversión de una variable a cierto tipo, puede moldear la variable, o usar
la función settype() sobre ella.
Ejemplos 5: Convertir datos

<?php
$foo = "5bar"; // string
$bar = TRUE; // boolean
echo ("El valor es: ".$foo)."<br>";

echo ("El valor es: ".$bar)."<br>";
settype($foo, "integer"); // $foo es ahora 5 (integer)

settype($bar, "string"); // $bar es ahora "1" (string)
echo ("El valor es: ".$foo)."<br>";

echo ("El valor es: ".$bar)."<br>";
?>
75
Operadores
Existen tres tipos de operadores. En primer lugar se encuentra el operador unario, el cual
opera sobre un único valor, por ejemplo ! (el operador de negación) o ++ (el operador de
incremento). El segundo grupo se conoce como operadores binarios; éste grupo contiene la
mayoría de operadores que soporta PHP. El tercer grupo consiste del operador ternario: ?:.
Éste debe ser usado para seleccionar entre dos expresiones, en base a una tercera, en lugar
de seleccionar dos sentencias o rutas de ejecución.
Operadores aritméticos
Operador Nombre Resultado
-$a Negación El opuesto de $a.
$a + ó - $b Adición o sustracción Suma o diferencia de $a y $b.
$a * ó / $b Multiplicación o división Producto o cociente de $a y $b.
$a % $b Módulo Resto de $a dividido por $b.
Operadores de asignación
$a = $b Asigna a $a el contenido de $b
$a += ó -= $b Le suma o le resta $b a $a
$a *= ó /= $b Multiplica o divide $a por $b y lo asigna a $a
$a .= $b Añade la cadena $b a la cadena $a
Operadores Bit a Bit

$a & $b Y Los bits que están activos tanto en $a como en $b son activados.
$a | $b O Los bits que están activos ya sea en $a o en $b son activados.
$a ^ $b O exclusivo (Xor) Los bits que estén activos en $a o $b, pero no en ambos, son activados.
~ $a No Los bits que estén activos en $a son desactivados, y viceversa.
Operadores de Comparación
$a == $b Igual TRUE si $a es igual a $b.
$a === $b Idéntico TRUE si $a es igual a $b, y son del mismo tipo. (A partir de PHP 4)
$a != $b Diferente TRUE si $a no es igual a $b.
$a <> $b Diferente TRUE si $a no es igual a $b.
$a !== $b No idénticos TRUE si $a no es igual a $b, o si no son del mismo tipo. (A partir de PHP 4)
$a <= $b Menor o igual que TRUE si $a es menor o igual que $b.
Si compara un entero con una cadena, la cadena es convertida a un número. Si compara dos
cadenas numéricas, ellas son comparadas como enteros. Estas reglas también se aplican a la
sentencia switch. Ejemplo.
<?php
var_dump(0 == "a"); // 0 == 0 -> true
var_dump("1" == "01"); // 1 == 1 -> true
switch ("a")
{ case 0: echo "Imprime 0"; break;
case "a": echo "Imprime a"; break; // nunca se ejecuta ya que "a" ya ha coincidido con 0
}
?>
Operador Ternario. (expr1) ? (expr2) : (expr3)
Significado:
Si (expr1) evalúa a TRUE entonces asume (expr2), pero si evalúa a FALSE asume (expr3)
<?php
// Ejemplo de uso de: el Operador Ternario
$valor1=0;
$accion = ($valor1==0) ? 'predeterminada': 'No predeterminado';
76
echo ($accion);
// La sentencia anterior es idéntica a este bloque if/else
if ($valor1==0)
{ $accion = 'predeterminada';
echo ($accion);
}
else
{ $accion = 'No predeterminada';
echo ($accion);
}
?>
Observación: Note que el operador ternario es una sentencia, y que no evalúa a una variable,
sino al resultado de una sentencia.
Operadores de Control de Errores

PHP ofrece soporte para un operador de control de errores: el signo de arroba (@). Cuando es
colocado al comienzo de una expresión en PHP, cualquier mensaje de error que pudiera
generarse a causa de esa expresión será ignorado.
Si la característica track_errors está habilitada, cualquier mensaje de error generado por la
expresión será almacenado en la variable $php_errormsg. La variable será sobrescrita en cada
instancia de error.
<?php
/* Error intencional de archivo */
$mi_archivo = @file ('archivo_que_no_existe') or
die ("La apertura de archivo ha fallado: el error fue '$php_errormsg'");
/*Esto funciona con cualquier expresión, no solo con funciones:*/

$valor = @$cache[$llave];
echo ("valor es: ".$valor);
//No producirá una anotación si $cache con el índice $llave no existe.
?>
Observación: El operador @ trabaja sólo sobre expresiones. Una simple regla de oro es: si
usted puede tomar el valor de algo, entonces puede usar el operador @ sobre ese algo. Por
ejemplo, puede usarlo al inicio de variables, llamadas a funciones y sentencias include(),
constantes, y así sucesivamente. No puede usarlo sobre definiciones de función o clase, ni
sobre estructuras condicionales como if y foreach, y así sucesivamente.
Operadores de ejecución
PHP soporta un operador de ejecución: las comillas invertidas (``). ¡Note que no se trata de
comillas sencillas! PHP intentará ejecutar el contenido entre las comillas como si se tratara de
un comando del intérprete de comandos; su salida será devuelta (es decir, no será
simplemente volcada como salida; puede ser asignada a una variable). El uso del operador de
comillas invertidas es idéntico al de shell_exec(). Ejemplo.
<?php
$salida = `ls -al`;
echo "<pre>$salida</pre>";
?>
Nota: El operador de comillas invertidas es deshabilitado cuando se encuentra activo safe
mode o cuando se deshabilita shell_exec().
Operadores de Incremento/Decremento
Nota: Los operadores de incremento/decremento no afectan a los valores booleanos.
Decrementar valores NULL tampoco tiene efecto, aunque incrementarlos resulta en 1.
Ejemplo Nombre Efecto
++$a Pre-incremento Incrementa $a en uno, y luego devuelve $a.
$a++ Post-incremento Devuelve $a, y luego incrementa $a en uno.
--$a Pre-decremento Decrementa $a en uno, luego devuelve $a.
$a-- Post-decremento Devuelve $a, luego decrementa $a en uno.
Ejemplo. Pre-incremento de un carácter.
77
<?php
$i = 'W';
for ($n=0; $n<6; $n++) {
echo ++$i.",\n";
}
?>
El resultado del ejemplo seria: X, Y, Z, AA, AB, AC
Operadores de Lógica
$a and $b Y TRUE si tanto $a como $b son TRUE.
$a or $b O TRUE si cualquiera de $a o $b es TRUE.
$a xor $b O exclusivo (Xor) TRUE si $a o $b es TRUE, pero no ambos.
! $a No TRUE si $a no es TRUE.
$a && $b Y TRUE si tanto $a como $b son TRUE.
$a || $b O TRUE si cualquiera de $a o $b es TRUE.
Operadores de Cadena
Existen dos operadores para datos tipo string. El primero es el operador de concatenación
('.'), el cual devuelve el resultado de concatenar sus argumentas a lado derecho e
izquierdo. El segundo es el operador de asignación sobre concatenación ('.='), el cual
adiciona el argumento del lado derecho al argumento en el lado izquierdo.
<?php
$a = "¡Hola";
$b = $a . "Mundo!";
echo ($b); // ahora $b contiene "¡Hola Mundo!"
$a = "¡Hola ";
$a .= "Mundo!";
echo ($a); // ahora $a contiene "¡Hola Mundo!"
?>
Operadores de Matrices
Ejemplo Nombre Resultado
$a + $b Unión Unión de $a y $b.
$a == $b Igualdad TRUE si $a y $b tienen las mismas parejas llave/valor.
TRUE si $a y $b tienen las mismas parejas llave/valor en el mismo
$a === $b Identidad
orden y de los mismos tipos.
$a != $b No-igualdad TRUE si $a no es igual a $b.
$a <> $b No-igualdad TRUE si $a no es igual a $b.
No-
$a !== $b TRUE si $a no es idéntico a $b.
identidad
El operador + adiciona la matriz del lado derecho a aquél de a lado izquierdo, al mismo tiempo
que cualquier llave duplicada NO es sobrescrita.
<?php
$a = array("a" => "manzana", "b" => "banano");
$b = array("a" => "pera", "b" => "fresa", "c" => "cereza");
$c = $a + $b; // Union de $a y $b
echo "Unión de \$a y \$b: \n"; var_dump($c);
$c = $b + $a; // Union de $b y $a
echo "Unión de \$b y \$a: \n"; var_dump($c);
?>
Cuando sea ejecutado, este script producirá la siguiente salida:
Unión de $a y $b: array(3) { Unión de $b y $a: array(3) {
["a"]=> string(7) "manzana" ["a"]=> string(4) "pera"
["b"]=> string(6) "banano" ["b"]=> string(5) "fresa"
["c"]=> string(6) "cereza" } ["c"]=> string(6) "cereza" }
Los elementos de las matrices son considerados equivalentes en la comparación si éstos

tienen la misma clave y valor.
78
<?php
$a = array("manzana", "banano");
$b = array(1 => "banano", "0" => "manzana");
var_dump($a == $b); // bool(true)
var_dump($a === $b); // bool(false)
?>
Estructuras de Control
La programación exige en muchas ocasiones la repetición de acciones sucesivas o la elección
de una determinada secuencia definida o dependiente de las condiciones específicas en la
ejecución. Este tipo de acciones pueden ser llevadas a cabo gracias a una gran variedad de
esturas de control presentes en el lenguaje de programación PHP.
Las condiciones if, else y elseif

Ejecutan las instrucciones dependiendo de la evaluación de una condición. Se tiene dos modos
Ejemplo. Comparación de dos números dos modos.
Modo 1 Modo 2
<?php <?php
$a=$Valor1; $a=$Valor1;
$b=$Valor2; $b=$Valor2;
if ($a > $b) if ($a > $b):

{ print "A es mayor que B <br>";
print "A es mayor que B <br>"; var_dump("valores: \$a=$a y \$b=$b");
var_dump("valores: \$a=$a y \$b=$b"); elseif($a==$b) :
}
print "A es igual a B <br>";
else if($a==$b)
var_dump("valores: \$a=$a y \$b=$b");
{
print "A es igual a B <br>"; else:
var_dump("valores: \$a=$a y \$b=$b"); print "B es mayor que A <br>";
} var_dump("valores: \$b=$b y \$a=$a");
else endif;
{ ?>
print "B es mayor que A <br>";
var_dump("valores: \$b=$b y \$a=$a"); <form name="form1" method="post" action="">
} Valor A: <input type="text" name="Valor1" size=2>
?> Valor B: <input type="text" name="Valor2" size=2>
<input type="submit" value="Ok">
<form name="form1" method="post" action=""> </form>
Valor A: <input type="text" name="Valor1" size=2>
Valor B: <input type="text" name="Valor2" size=2>
<input type="submit" value="Ok">
</form>
Actividad
 Diseñe una tabla donde se muestre los resultados de las operaciones básicas
utilizando variables y conversiones en PHP.
 Represente una tabla con datos definidos con la función echo () todo en PHP.
 Represente un formulario para datos definidos con la función echo () todo en PHP.
Actividad
 Defina un formulario SIN VALIDACIÓN para que pueda pasar datos numéricos y estas
sean procesados en un segundo formulario en el servidor. Para evitar errores controle
el ingreso de datos con operadores y estructuras de control.
 Defina un formulario PREVIAMENTE VALIDADO para que pueda pasar datos
numéricos y estas sean procesados en un segundo formulario en el servidor.
 Defina matrices asociativas y normales (unidimensionales) y realice operaciones de
comparación, adición, etc.
 De tres ejemplos donde se muestre el uso de operadores de control de errores.
79
switch
La sentencia switch es similar a una serie de sentencias IF en la misma expresión.
Debe tener en cuenta que al contrario que otros lenguajes de programación, continue se aplica
a switch y funciona de manera similar a break. Por ejemplo: Si tienes un switch dentro de un
bucle y deseas continuar con el paso siguiente en el bucle externo, debe usar continue 2.
Los siguientes dos ejemplos son dos modos distintos de escribir la misma cosa, uno usa una
serie de sentencias if, y el otro usa la sentencia switch:
<?php
$i=2;
if ($i == 0)
{
print "$i es igual a 0";
}
elseif ($i == 1)
{
}
elseif ($i == 2)
{
}
/////////////////********///////////////
echo "<br>ejemplo con switch <br>";
switch ($i)
{
case 0: print "$i es igual a 0"; break;
}
?>
while (bucle)
Ejecuta las sentencias anidadas repetidamente, mientras la expresión while se evalúe como
TRUE. Ejemplo.
<?php
echo ("<p>Ejemplo 1: sintaxis normal <br>");

$i = 1;
while ($i <= 10)
{
print $i++; //(Post-incremento)
}
///////////////////************//////////////////
echo ("<p> Ejemplo 2: sintaxis alternativo <br>");
$i = 1;
while ($i <= 10):
print $i;
$i++;
endwhile;
?>
80
do..while
Los bucles do..while son muy similares a los bucles while, excepto que las condiciones se
comprueban al final de cada iteración en vez de al principio. Hay una sola sintaxis.
<?php
$i = 0;
do
{
print $i;
}
while ($i>0);
?>
For
Los bucles for son los bucles en los que debe tener mucho cuidado. Sintaxis de un bucle for:
for (expr1; expr2; expr3) sentencia
La primera expresión (expr1) se evalúa (ejecuta) incondicionalmente una vez al principio del
bucle.
Al comienzo de cada iteración, se evalúa expr2. Si se evalúa como TRUE, el bucle continúa y
las sentencias anidadas se ejecutan. Si se evalúa como FALSE, la ejecución del bucle finaliza.
Al final de cada iteración, se evalúa (ejecuta) expr3.
Cada una de las expresiones puede estar vacía. Que expr2 esté vacía significa que el bucle
debería correr indefinidamente (PHP implícitamente lo considera como TRUE).
Ejemplos.
Todos los ejemplos muestran números del 1 al 10:
<?php
echo ("<p> Ejemplo 1 <br>");
for ($i = 1; $i <= 10; $i++) {
print $i;
}

for ($i = 1; ;$i++) {
if ($i > 10) {
break;
}
print $i;
}
$i = 1;
for (;;) {
if ($i > 10) {
break;
}
print $i;
$i++;
}

for ($i = 1; $i <= 10; print $i, $i++) ;
?>
81
Foreach
foreach funciona solamente con matrices y devolverá un error si se intenta utilizar con otro tipo
de datos ó variables no inicializadas. Hay dos sintaxis; la segunda es una extensión menor,
pero útil de la primera:
foreach(expresion_array as $value) sentencia

foreach(expresion_array as $key => $value) sentencia
La primera forma recorre el array dado por expresion_array. En cada iteración, el valor del
elemento actual se asigna a $value y el puntero interno del array se avanza en una unidad (así
en el siguiente paso, se estará mirando el elemento siguiente).
La segunda manera hace lo mismo, salvo que la clave del elemento actual será asignada a la
variable $key en cada iteración.
Observaciones:
 Cuando foreach comienza su primera ejecución, el puntero interno a la matriz se reinicia
automáticamente al primer elemento de la matriz. Esto significa que no se necesita llamar
a reset() antes de un bucle foreach.
 Hay que tener en cuenta que foreach trabaja con una copia de la matriz especificada y no
la lista en si, por ello el puntero de la lista no es modificado como en la función each(), y
los cambios en el elemento de la matriz retornado no afectan a la matriz original. De
todas maneras el puntero interno a la matriz original avanza al procesar la matriz.
suponiendo que bucle foreach se ejecuta hasta el final, el puntero interno a la matriz
estará; al final de la matriz.
 foreach no soporta la característica de suprimir mensajes de error con '@'.
Ejemplo1.
<?php
$a = array("uno", "dos", "tres");
foreach ($a as $valor) {
echo "Value: $valor<br>\n";
}
//Equivalente al anterior
reset ($a); //Iniciando la matriz en uno
while (list(, $valor) = each ($a)) {
echo "Value: $valor<br>\n";
}
?>
Ejemplo 2.
<?php
$a = array("uno", "dos", "tres");
foreach( $a as $indice => $valor ) {
echo "Indice: $indice; Valor: $valor<br>\n";
}
//Equivalente al anterior
reset ($a); //Iniciando la matriz en uno
while( list($indice, $valor) = each( $a ) ) {
echo "Indice: $indice; Valor: $valor<br>\n";
}
?>
Ejemplo 3
<?php
echo "<br>foreach ejemplo 3: valor (con clave impresa para ilustrar) <br>";
$a = array(1, 2, 3, 17); $i = 0; //Contador
foreach($a as $v) {
print "\$a[$i] => $v.\n <br>";
$i++;
}
echo "<br> foreach ejemplo 4: clave y valor <br>";

$a = array("uno" => 1, "dos" => 2, "tres" => 3, "diecisiete" => 17);
82
foreach($a as $k => $v) {
print "\$a[$k] => $v.\n <br>";
}
echo "<br>foreach ejemplo 5: matriz dinámica <br>";

foreach(array(1, 2, 3, 4, 5) as $v) {
print "$v\n <br>";
}
?>
Break
break escapa de la estructuras de control iterante (bucle) actuales for, while, o switch. Break
acepta un parámetro opcional, el cual determina cuantas estructuras de control hay que
escapar. Ejemplo.
<?php
$a = array ('uno', 'dos', 'tres', 'cuatro', 'pare', 'cinco');
while (list (, $val) = each ($a))
{ if ($val == 'pare')
{ break; //Aquí también podría escribir 'break 1;'
}
echo "$val <br> \n";
}
echo " Usando el argumento opcional para break <br>";

$i = 0;
while (++$i)
{
switch ($i)
{
case 5: echo "En 5; break 1 <br>\n"; break 1; // Termine sólo el switch
case 10: echo "En 10; break 2 <br>\n"; break 2; // Termina el switch y el while
case 100: echo "En 100; break 3 <br>\n"; break 3; // No se ejecuta p'q' no es 2
default: break;
}
}
?>
Continue
Continue se usa dentro de la estructura del bucle para saltar el resto de la iteración actual del
bucle y continuar la ejecución al comienzo de la siguiente iteración. Continue acepta un
parámetro opcional, el cual determina cuantos niveles (bluces) hay que saltar antes de
continuar con la ejecución.
Nota: En PHP la declaración switch es considerada una estructura de bucle por continue.
<?php
$a = array ('uno', 'dos', 'tres', 'cuatro', 'pare', 'cinco');
while (list ($indice, $valor) = each ($a))
{
if (!($indice % 2)) // salta en los índices impares
{
continue;
}
echo $valor."<br>";
}
?>
Actividad.
 En los ejercicios de: swich, while, do…while y for, agregar formularios para que los datos
sean ingresados por controles y los resultados sean visualizados en un segundo
formulario que se halla en el servidor. Todos los formularios deben ser validados para el
lado cliente.
 Defina matrices y recorra su contenido con la estructura foreach y muestre los resultados
en una pagina utilizando formularios.
83
Lección 14. PHP: Funciones
 Instrucción return, require() y include().
 Funciones: funciones definidas por el usuario
 Parámetros de las funciones; por referencia y por defecto.
 Proyecto: Definición de funciones en archivo externo.
return
Si se llama desde una función, return() termina inmediatamente la ejecución de la función y
retorna su argumento como valor de la función. return() también terminará la ejecución de una
sentencia eval() ó un script PHP.
Si el script actual ha sido incluido ó requerido con include() ó require(), el control es transferido
al script que llamo al script incluido. Además, si el script actual fue incluido, el valor dado a
return() será retornado como el valor de la llamada include().
Si return() es invocado desde el script principal, la ejecución terminara inmediatamente. Si el
script actual fue incluido con las opciones de configuración auto_prepend_file ó
auto_append_file, la ejecución terminara inmediatamente.
Nota: Tener en cuenta que ya que return() es un constructor del lenguaje y no una función, los
paréntesis alrededor de sus argumentos, son solo necesarios si el argumento contiene una
expresión, no se suelen utilizar tan a menudo, cuando retornan una variable. Ejemplo.
<?php
function hallarMarca()
{
$a = array(1, 2, 3, 4, 5, 6, 'A', 7, 8, 9);
foreach($a as $valor)
{ echo $valor."<br>";
if(gettype($valor)==string)
{ echo "se hallo el dato tipo string: $valor <br>";
return $valor."<br>"; //retorna
//break;
}
}
}
echo "llamando a la función <br>";
echo hallarMarca();
echo "Final de la función <br>";
?>
require() y include()
La sentencia include() incluye y evalúa el archivo especificado. Esta también se aplica a la

función require().
require() y include() son idénticas en todos los aspectos excepto en el modo de actuar ante un
error. include() produce un Warning (advertencia) mientras que require() produce un Error
Fatal.
En otras palabras, no dude en utilizar require() si quiere que un fichero no encontrado
cuelgue el procesamiento de la página. include() no se comporta de esta manera, el script
seguirá funcionando de todas maneras. Asegurarse que include_path (camino o ruta
incluida) este configurado bien.
Cuando un fichero es incluido, el código que contiene hereda la variable scope de la línea en
donde el include ocurre. Cualquier variable disponible en esa línea en el fichero desde donde
se hace la inclusión estará disponible en el fichero incluido a partir de ese momento.
Ejemplo1. Muestra una cadena
Fichero externo denominado: fichero_colores.ini.php
<?php
$color = 'verde';
$fruta = 'manzana';
?>
84
Pagina denominado: pagina_colores
<?php
echo "Resultado: $color $fruta <br>"; // A
include('fichero_colores.ini.php');
echo "Resultado: $color $fruta <br>"; // A manzana verde
?>
Ejemplo2 Muestra retorno de operaciones

Fichero externo denominado: fichero1.ini.php
<?php
$a = 4; $b = 6; $msj = "Resultado"; $R1 = $a + $b;
function retornaResultado($c, $d)
{ if($c<>$d)
{ $R2 = $c*$d;
return $R2;
}
else
return $msj."son iguales";
}
?>
Pagina denominado: include_con_fichero1.php
<?php
include ('fichero1.ini.php');
echo $msj.$R1;
echo "<br>Resultado de función es: ".retornaResultado(6, 5);
?>
Si la inclusión ocurre dentro de una función en el fichero donde se incluye, todo el código
contenido en el fichero incluido se comportará como si hubiese sido definido dentro de esta
función.
Ejemplo3 Muestra retorno de funciones y advertencias
Fichero externo denominado: fichero2.ini.php
<?php
$a = 4; $b = 6; $msj = "Resultado"; $R1 = $a + $b;
function retornaResultado($c, $d)
{ $R2 = @($c+$d) or die('[ADVERTENCIA] Usted ha ingresado datos no validos');
echo "Valor de \$c = $c y \$d = $d ";
return $R2;
}
?>
Pagina denominado: include_con_fichero2.php
<?php
include ('fichero2.ini.php');
echo $msj.$R1."<br>";
echo "<br>Resultado de la llamada a la función es: ".retornaResultado(8, 'RRR');
?>
Es posible ejecutar una sentencia return dentro de un archivo incluido para terminar el
procesado de ese archivo y volver al archivo de comandos que lo llamó. También es posible
retornar valores de ficheros incluidos. Se puede coger el valor de la llamada "include" como se
haría con una función normal.
Cuando un fichero es incluido, el intérprete sale del modo PHP y entra en modo HTML al
principio del archivo referenciado, y vuelve de nuevo al modo PHP al final. Por esta razón,
cualquier código dentro del archivo referenciado que debiera ser ejecutado como código PHP
debe ser encerrado dentro de etiquetas válidas de comienzo y fin de PHP.
Si "URL fopen wrappers" esta activada en PHP (como está en la configuración inicial), se
puede especificar el fichero que se va a incluir usando una URL (via HTTP u otro mecanismo
soportado) en vez de un fichero local. Si el servidor destino interpreta el fichero destino como
código PHP, variables pueden ser mandadas al fichero incluido usando una cadena URL de
petición, tal como se hace con HTTP GET. Esto no es lo mismo que incluir un fichero y que
este fichero herede las variables del fichero padre; el script es ejecutado en el servidor remoto
y el resultado es incluido en en script local.
Nota. Versiones de PHP para Windows anteriores a 4.3.0, no soportan el acceso remoto a
archivos para esta función, no funcionará ni activando siquiera allow_url_fopen.
Nota: Puesto que esto es una construcción del lenguaje y no una función, no puede ser
llamado usando funciones variables.
85
Funciones definidas por el usuario
Una función se puede definir con la siguiente sintaxis:
<?php
function mifuncion ($arg_1, $arg_2, ..., $arg_n)
{
echo "Función de ejemplo";
return $retval;
}
?>
Cualquier instrucción válida de PHP puede aparecer en el cuerpo de la función, incluso otras
funciones y definiciones de clases.
Cuando una función es definida condicionalmente como se puede ver en estos dos ejemplos,
su definición debe ser procesada antes que sea llamada.
Ejemplo. Funciones Condicionales
<?php
$valor = true;
/* Desde aquí no se puede llamar a mifuncion() porque aun
no existe, pero podemos llamar a otrafuncion() */
mifuncion(); //error
otrafuncion();
if ($valor)
{
function mifuncion()
{
echo "No existe...hasta que la ejecución del programa lo localice <br>";
}
}
/* Ahora podemos llamar la función mifuncion() porque
la variable $valor fue evaluado a verdadero */
if ($valor) mifuncion();
function otrafuncion()
{
echo "Existe... inmediatamente en el principio del programa <br>";
}
?>
Ejemplo. Funciones dentro de funciones

<?php
function func()
{
echo "Ejecutandose func()... <br>";
function otraf()
{
echo "No existe... hasta que el func() se llame <br>";
}
}
/* Aqui no se puede llamar a funcion otraf() porque no existe. */

func();
/* Ya se puede llamar a otraf(), p'q' al llanar a func() lo ha hecho accesible. */
otraf();
?>
PHP no soporta la redefinición de funciones previamente declaradas.

Nota: Los nombres de funciones se pueden llamar con mayusculas o minusculas, aunque es
una buena costumbre el llamar a las funciones tal y como aparecen en su definición.
Parámetros de las funciones

La información puede suministrarse a las funciones mediante la lista de parámetros, una lista
de variables y/o constantes separadas por comas.
Ejemplo. Pasando matrices a funciones
<?php
function miArray($entrada)
86
{
echo "$entrada[0] + $entrada[1] = ", $entrada[0]+$entrada[1];
}
$a=array(1,2,3,4,5,6);
miArray($a);
?>
Pasar parámetros por referencia

Por defecto, los parámetros de una función se pasan por valor (de manera que si se cambia el
valor del argumento dentro de la función, no se ve modificado fuera de ella), pero si se desea
que una función modificar los parámetros, se debe pasarlos por referencia.
Si se quiere que un parámetro de una función siempre se pase por referencia, se puede
anteponer un ampersand (&) al nombre del parámetro en la definición de la función:
Ejemplo. Pasando parámetros de funciones por referencia
<?php
function agregandoAlgo(&$laCadena)
{
$laCadena .= " y algo más";
}
$otraCad = "Esto es una cadena, ";
agregandoAlgo($otraCad);
echo $otraCad; // Saca 'Esto es una cadena, y algo más'
?>
Parámetros por defecto

Una función puede definir valores por defecto para los parámetros escalares estilo C++:
Ejemplo. Uso de parámetros por defecto en funciones
<?php
function marcaCafe ($tipo = "cappucino")
{
return "Hacer una taza de $tipo.\n";
}
echo marcaCafe (); // Imprime: Hacer una taza de cappucino.
echo "<br>";
echo marcaCafe ("espress"); // Imprime: Hacer una taza de espress.
?>
El valor por defecto tiene que ser una expresión constante, y no una variable, miembro de una
clase ó llamada a una función.
Destacar que cuando se usan parámetros por defecto, estos tienen que estar a la derecha de
cualquier parámetro sin valor por defecto; de otra manera las cosas no funcionara de la forma
esperada. Considera el siguiente fragmento de código:
Actividad.
 Defina index.php en la carpeta proyectoABC para ingresar a
todo los formularios del proyecto. proyectoABC
 Defina un fichero externo, que el mismo tenga dos funciones include
ficherosExternos
de tipo condicional y función de función y ubicar en la carpeta
funcionesSimples
ficherosExternos. El formulario que haya referencia a este funcionesParamts
fichero externo debe ubicarlo en la carpeta
funcionesSimples.
 Defina otro fichero externo, que el mismo tenga todas las funciones con parámetros y
ubicarlo en la carpeta ficherosExternos. El formulario que haya referencia a este otro
fichero externo debe ubicarlo en la carpeta funcionesParamts.
 Haga una copia del proyectoABC y su carpeta de ficherosExternos corte y copie en la
carpeta raíz de PHP5 y configure php.ini para que el proyecto funcione correctamente.
87
Lección 15. PHP: Funciones definidas por PHP.
 Funciones variables. Funciones internas (incorporadas)
 Funciones: De cadenas (string), Matemáticas, Fecha y Hora
 Proyecto: Definición de funciones en archivo externo
Funciones variables
PHP soporta el concepto de funciones variable, esto significa que si una variable tiene unos
paréntesis añadidos al final, PHP buscará una función con el mismo nombre que la evaluación
de la variable, e intentará ejecutarla. Entre otras cosas, esto te permite implementar
retrollamadas (callbacks), tablas de funciones y demás.
Las funciones varibles no funcionarán con construcciones del lenguaje, tal como echo(),
print(), unset(), isset(), empty(), include(), require() y derivados. Se necesitará usar una
función propia para utilizar cualquiera de estos constructores como funciones variables.
Ejemplo de función variable

<?php
function f1()
{ echo "En función f1()<br>\n";
}
function f2($arg = '')
{ echo "En función f2() el argumento es '$arg'.<br>\n";
}
// Ésta es una función de la envoltura alrededor de echo

function f3($string)
{ echo $string;
}
echo "<br>";
$var_func1 = 'f1'; // Asignando f1() a variable
echo "Esto llama a f1(): ";
$var_func1();
echo "<br>";
$var_func2('test1');
echo "<br>";
$var_func3('test2');
?>
Funciones internas (incorporadas)
PHP tiene incorporadas muchas funciones y construcciones. Existen también funciones que
requieren extensiones específicas de PHP para que no fallen con un error fatal del tipo
"undefined function".
Por ejemplo, para usar funciones image, tal como imagecreatetruecolor(), se necesita
compilar PHP con soporte para GD. O para usar mysql_connect() se necesita compilar PHP
con soporte para MySQL. Existen muchas funciones en el núcleo de PHP que se incluyen en
cada versión de PHP, como las funciones string y variable.
Funciones de Cadenas (string)

Todas estas funciones manipulan cadenas en varias formas.
crypt -- Encripta una cadena mediante un algoritmo no reversible (hash)

string crypt ( string cadena [, string semilla] )
echo -- Muestra una o más cadenas
explode -- Divide una cadena por otra
array explode ( string separador, string cadena [, int limite] )
htmlentities -- Convierte todos los caracteres a su entidad HTML aplicable
88
string htmlentities ( string string [, int quote_style [, string charset]] )
htmlspecialchars_decode -- Convierte entidades HTML a caracteres normales
string htmlspecialchars_decode ( string cadena [, int quote_style] )
htmlspecialchars -- Convierte caracteres especiales a entidades HTML
string htmlspecialchars ( string cadena [, int quote_style [, string juego_caracteres]] )
implode -- Une elementos de una matriz mediante una cadena
string implode ( string elemento_union, array trozos )
join -- Alias of implode()
levenshtein -- Calcula la distancia Levenshtein entre dos cadenas
int levenshtein ( string cadena1, string cadena2 [, int cost_ins [, int cost_rep, int cost_del]] )
localeconv -- Obtener información sobre el formato numérico
array localeconv ( void )
ltrim -- Elimina el espacio en blanco (o más caracteres) del principio de una cadena
string ltrim ( string cadena [, string lista_caracteres] )
money_format -- Da formato a un número como una cadena de moneda
string money_format ( string formato, float numero )
number_format -- Dar formato a un número con los miles agrupados
string number_format ( float numero [, int decimales [, string punto_dec, string sep_miles]] )
ord -- Devuelve el valor ASCII de un carácter
int ord ( string cadena )
parse_str -- Divide la cadena en variables
void parse_str ( string cadena [, array &array] )
print -- Muestra una cadena
printf -- Imprimir una cadena con formato
rtrim -- Elimina el espacio en blanco (o más caracteres) del final de una cadena
string rtrim ( string cadena [, string lista_caracteres] )
sprintf -- Devuelve una cadena con formato
string sprintf ( string formato [, mixed args [, mixed ...]] )
sscanf -- Trocea la entrada desde una cadena según un formato dado
mixed sscanf ( string cadena, string formato [, mixed &...] )
str_pad -- Rellena una cadena con otra hasta una longitud dada
string str_pad ( string cadena_original, int longitud_relleno [, string cadena_relleno [, int tipo_relleno]] )
str_repeat -- Repite una cadena
string str_repeat ( string cadena, int veces )
str_replace -- Sustituye todas las apariciones de una cadena en otra
mixed str_replace ( mixed cadena_buscada, mixed cadena_sustituta, mixed cadena_original [, int &veces] )
str_shuffle -- Reordena aleatoriamente una cadena
string str_shuffle ( string cadena )
str_split -- Convertir una cadena en una matriz
array str_split ( string cadena [, int longitud_separacion] )
str_word_count -- Devolver información sobre las palabras usadas en una cadena
mixed str_word_count ( string cadena [, int formato [, string lista_caracteres]] )
strchr -- Alias of strstr()
strcoll -- Comparación de cadenas basada en la localidad
int strcoll ( string cad1, string cad2 )
stripos -- Encontrar la posición de la primera ocurrencia de una cadena, insensible a
mayúsculas y minúsculas
int stripos ( string pajar, string aguja [, int desplazamiento] )
stripslashes -- Desmarca la cadena marcada con addslashes()
string stripcslashes ( string cadena )
stristr -- Lo mismo que strstr() pero sin tener en cuenta mayúsculas o minúsculas
string stristr ( string cadena, string caracter )
strlen -- Obtiene la longitud de la cadena
int strlen ( string cadena )
strnatcasecmp -- Comparación de cadenas insensible a mayúsculas y minúsculas usando un
algoritmo de "orden natural"
int strcasecmp ( string cadena1, string cadena2 )
89
strnatcmp -- Compara cadenas usando un algoritmo de "orden natural"
int strnatcmp ( string cadena1, string cadena2 )
strncasecmp -- Comparación de los primeros n caracteres de cadenas, segura con material
binario e insensible a mayúsculas y minúsculas
int strnatcasecmp ( string cadena1, string cadena2 )
strncmp -- Comparación de los n primeros caracteres de cadenas, con seguridad binaria
int strncmp ( string cadena1, string cadena2, int longitud )
strpbrk -- Busca una cadena por cualquiera de los elementos de un conjunto de caracteres
string strpbrk ( string pajar, string lista_caracteres )
strpos -- Encuentra la posición de la primera aparición de una cadena
int strpos ( string cadena, string caracter [, int desplazamiento] )
strrchr -- Encuentra la última aparición de un carácter en una cadena
string strrchr ( string cadena, string caracter )
strrev -- Invierte una cadena
string strrev ( string cadena )
strripos -- Encontrar la posición de la última ocurrencia de una cadena en otra, insensible a
mayúsculas y minúsculas
int strripos ( string pajar, string aguja [, int desplazamiento] )
strrpos -- Encuentra la posición de la última aparición de un carácter en una cadena
int strrpos ( string cadena, string caracter [, int desplazamiento] )
strspn -- Encuentra la longitud del primer segmento de una cadena que coincide con la
máscara
int strspn ( string cadena1, string cadena2 [, int comienzo [, int final]] )
strstr -- Encuentra la primera aparición de una cadena
string strstr ( string cadena, string caracter )
strtok -- Divide una cadena en elementos
string strtok ( string cadena, string elemento )
strtolower -- Pasa a minúsculas una cadena
string strtolower ( string cadena )
strtoupper -- Pasa a mayúsculas una cadena
string strtoupper ( string cadena )
substr_count -- Cuenta el número de apariciones de la subcadena
int substr_count ( string cadena, string caracter [, int comienzo [, int longitud]] )
substr_replace -- Sustituye texto en una parte de una cadena
string substr_replace ( mixed cadena, string cadena_sustituta, int comienzo [, int
longitud] )
substr -- Devuelve parte de una cadena
string substr ( string cadena, int comienzo [, int longitud] )
trim -- Elimina espacios en blanco (u otros caracteres) del principio y final de una cadena
string trim ( string cadena [, string lista_caracteres] )
ucfirst -- Pasar a mayúsculas el primer carácter de una cadena
string ucfirst ( string cadena )
ucwords -- Pone en mayúsculas el primer carácter de cada palabra de una cadena
string ucwords ( string cadena )
wordwrap -- Corta una cadena en un número dado de caracteres usando un carácter de
ruptura de cadenas.
string wordwrap ( string cadena [, int ancho [, string ruptura [, bool corte]]] )
Ejemplos con funciones de cadena.
Ejemplos con crypt()

<?php
$dado_por_usuario='nada'; // Contraseña proporcionado
$contrasenha = crypt('nada'); // Contraseña establecida
if (crypt($dado_por_usuario, $contrasenha) == $contrasenha)
{
echo "La contraseña proporcionada por el usuario coincide con la contraseña establecida";
}
else
90
echo "la contraseña no es válida";
?>
Ejemplos de explode()
<?php
// Ejemplo 1
$cadena = "trozo1 trozo2 trozo3 trozo4 trozo5 trozo6";
$trozos = explode(" ", $cadena);
echo $trozos[0]."<br>"; // trozo1
echo $trozos[1]."<br>"; // trozo2
// Ejemplo 2
$datos = "usuario:*:1023:1000::/home/usuario:/bin/sh";
list($usuario, $contrasena, $uid, $gid, $gecos, $home, $shell) = explode(":", $datos);
echo $usuario."<br>"; // usuario
echo $contrasena."<br>"; // *
?>
Ejemplos de strpos()
<?php
echo "Ejemplo 1 <br>";
$mi_cadena = 'abc';
$caracter = 'a';
$posicion = strpos($mi_cadena, $caracter);
if ($posicion === false)
{ echo "No se encontro '$caracter' en la cadena '$mi_cadena'";
}
else
{ echo "Se encontro '$caracter' en la cadena '$mi_cadena'";
echo " en la posicion $posicion";
}
echo " <br> Ejemplo 2 <br>";

// Se puede buscar el caracter a partir de una posición
$nueva_cadena = 'abcdef abcdaef';
$posicion = strpos($nueva_cadena, 'a', 8); // $posicion 0, 7, 11
echo $posicion;
?>
Ejemplo de strstr()
<?php
$email = '[email protected]';
$dominio = strstr($email, 'a');
echo $dominio; // La salida es: @example.com
?>
Ejemplo de str_split()
<?php
$cadena = "Hoy es un dia de la semana...";
$matriz1 = str_split($cadena);
$matriz2 = str_split($cadena, 3);
print_r($matriz1);
echo "<br><br>";
print_r($matriz2);
?>
Actividad.
 Diseñe formularios para ingresar datos para los diferentes ejemplos proporcionados,
donde se resalte el uso de las funciones con cadena.
 Desarrolle 10 aplicaciones diferentes con formularios. En cada uno resalte las funciones
de cadena que esta utilizando. También debe emplear estructuras de control en las
aplicaciones que así lo requieran.
91
Funciones matemáticas
Estas funciones matemáticas solo manipulan valores dentro del rango de los tipos integer y
float en su equipo. Si necesita manejar números más grandes, debe trabajar con funciones
matemáticas de precisión arbitraria.
Constantes predefinidas
Las constantes listadas aquí están siempre disponibles a través del "núcleo PHP".
Constante Valor Descripción
M_PI 3.14159265358979323846 Pi
M_E 2.7182818284590452354 e
M_SQRT2 1.41421356237309504880 sqrt(2) (Raiz cuadrada de 2)
M_LNPI 1.14472988584940017414 log_e(pi) [4.0.2]
...
abs -- Valor absoluto

number abs ( mixed numero )
acos -- Arco coseno
acosh -- Coseno hiperbólico inverso
float acosh ( float arg )
base_convert -- Convertir un número entre bases arbitrarias
string base_convert ( string numero, int desde_base, int a_base )
bindec -- Binario a decimal
number bindec ( string cadena_binaria )
ceil -- Redondear fracciones hacia arriba
float ceil ( float valor )
decbin -- Decimal a binario
dechex -- Decimal a hexadecimal
string dechex ( int numero )
decoct -- Decimal a octal
deg2rad -- Convierte el número en grados a su equivalente en radianes
float deg2rad ( float numero )
exp -- Calcula el exponente de e (el logaritmo de base Neperiana o Natural)
float exp ( float arg )
expm1 -- Devuelve exp(number) - 1, computado de una forma que es precisa incluso cuando
el valor del número es cercano a cero
float expm1 ( float numero )
floor -- Redondear fracciones hacia abajo
float floor ( float valor )
fmod -- Devuelve el residuo de punto flotante (módulo) de la división de los argumentos
float fmod ( float x, float y )
hexdec -- Hexadecimal a decimal
is_finite -- Encuentra si un valor es un número finito legal
is_infinite -- Encuentra si un valor es infinito
bool is_infinite ( float val )
is_nan -- Encuentra si un valor no es un número
bool is_nan ( float val )
log10 -- Logaritmo en base-10
log -- Logaritmo natural
float log10 ( float arg )
max -- Encontrar el valor más alto
min -- Encontrar el valor más bajo
92
mixed min ( array numeros )
pi -- Obtener valor de pi
float pi ( void )
pow -- Expresión exponencial
number pow ( number base, number exp )
rad2deg -- Convierte el número en radianes a su equivalente en grados
round -- Redondea un flotante
float round ( float val [, int precision] )
sqrt -- Raíz cuadrada
float sqrt ( float arg )
Funciones de Fecha y Hora

Estas funciones le permiten obtener la fecha y hora del servidor en donde están siendo
ejecutados sus scripts PHP. Puede usar estas funciones para dar formato a las fechas y horas
en muchas maneras diferentes.
Nota: Tener en cuenta que estas funciones dependen de los parámetros de localidad del
servidor. También tener en cuenta el tiempo de preservación de luz del día y los años bisiestos.
Las siguientes constantes están definidas desde PHP 5.1.0 y ofrecen representaciones de
fecha estándar, que pueden ser usadas junto con las funciones de formato de fechas (como
date()).
DATE_ATOM (string) //Átomo (ejemplo: 2005-08-15T15:52:01+0000)
DATE_COOKIE (string) //Cookies HTTP (ejemplo: Mon, 15 Aug 2005 15:52:01 UTC)
DATE_ISO8601 (string) //ISO-8601 (ejemplo: 2005-08-15T15:52:01+0000)
...
Tabla de contenidos
checkdate -- Validar una fecha Gregoriana
bool checkdate ( int mes, int dia, int anyo )
date_sunrise -- Obtiene la hora del amanecer de un día y lugar concretos
mixed date_sunrise ( int marca_de_tiempo [, int formato [, float latitud [, float longitud [,
float cenit [, float diferencia_gmt]]]]] )
date_sunset -- Obtiene la hora del atardecer de un día y lugar concretos
mixed date_sunset ( int marca_de_tiempo [, int formato [, float latitud [, float longitud [,
float cenit [, float diferencia_gmt]]]]] )
date -- Dar formato a una hora/fecha local (*)Detalle:
string date ( string formato [, int marca_de_tiempo] )
getdate -- Obtiene información de fecha/hora
array getdate ( [int marca_de_tiempo] )
gettimeofday -- Obtiene la hora actual
mixed gettimeofday ( [bool devolver_flotante] )
idate -- Formatea la fecha/hora local como un número entero
int idate ( string formato [, int marca_de_tiempo] ) (**)Detalle:
localtime -- Obtener la hora local
array localtime ( [int muestra_de_tiempo [, bool es_asociativo]] )
strftime -- Dar formato a una hora/fecha local de acuerdo a valores de localidad
string strftime ( string formato [, int marca_de_tiempo] )
strtotime -- Procesar cualquier descripción textual de fecha/hora en Inglés convirtiéndola en
una timestamp de UNIX.
int strtotime ( string hora [, int ahora] )
93
(*)Detalle:
Los siguientes caracteres son reconocidos en la cadena del parámetro de date( ).
Cart. Descripción Valores de ejemplo
d Día del mes, 2 dígitos con ceros iniciales 01 a 31
D Una representación textual de un día, tres letras Mon a Sun
j Día del mes sin ceros iniciales 1 a 31
l ('L'minuscula)Una representación textual completa del día de la semana Sunday a Saturday
Representación numérica ISO-8601 del día de la semana (agregado in PHP
N 5.1.0) 1 (Lun.) a 7 (Dom.)
w Representación numérica del día de la semana 0 (Dom.) a 6 (Sáb.)
z El día del año (comenzando en 0) 0 a 365
Número de la semana del año ISO-8601, las semanas comienzan en Lunes Ejemplo: 42 (la 42va semana
W (agregado en PHP 4.1.0) del año)
F Una representación textual completa de un mes, como January o March January a December
m Representación numérica de un mes, con ceros iniciales 01 a 12
M Una representación textual corta de un mes, tres letras Jan a Dec
n Representación numérica de un mes, sin ceros iniciales 1 a 12
t Número de días en el mes dado 28 a 31
L Indica si es un año bisiesto 1 (año bisiesto), 0 (Normal)
Y Una representación numérica completa de un año, 4 dígitos Ejemplos: 1999 o 2003
y Una representación de dos dígitos de un año Ejemplos: 99 o 03
a Ante meridiano y Post meridiano en minúsculas am o pm
A Ante meridiano y Post meridiano en mayúsculas AM o PM
B Hora Swatch Internet 000 a 999
g formato de 12-horas de una hora sin ceros iniciales 1 a 12
G formato de 24-horas de una hora sin ceros iniciales 0 a 23
h formato de 12-horas de una hora con ceros iniciales 01 a 12
H formato de 24-horas de una hora con ceros iniciales 00 a 23
i Minutos con ceros iniciales 00 a 59
s Segundos, con ceros iniciales 00 a 59
c Fecha ISO 8601 (agregada en PHP 5) 2004-02-12T15:19:21+00:00
Ej.: Thu, 21 Dec 2000 16:01:07
r Fecha en formato RFC 2822
+0200
(**)Detalle:
Lista de valores permitidos en el parámetro de idate( ).
Cart. Descripción
d Día del mes
h Hora (en formato de 12 horas)
H Hora (en formato de 24 horas)
i Minutos
L Devuelve 1 si es un año bisiesto y 0 en otro caso
m Número del mes
s Segundos
t Número de días del mes actual
Segundos desde la Unix Epoch (que comienza el 1 de Enero de 1970 00:00:00 GMT). Se trata del
U
mismo resultado que el obtenido con la función time()
w Día de la semana (considerando el número 0 para el Domingo)
Número de la semana según la norma ISO-8601, que considera que todas las semanas comienzan
W
en Lunes
y Año (1 o 2 dígitos)
Y Año (4 dígitos)
z Día del año
94
Ejemplo1. de base_convert()
<?php
$hexadecimal = 'A37334';
echo base_convert($hexadecimal, 16, 2); //Imprime: 101000110111001100110100
?>
Ejemplo2. de ceil()
<?php
echo ceil(4.3)."<br>"; // 5
echo ceil(9.999)."<br>"; // 10
?>
Ejemplo3. de deg2rad() : Convertir a radianes

<?php
echo deg2rad(45)."<br>"; // 0.785398163397
var_dump(deg2rad(45) === M_PI_4)."<br>"; // bool(true)
?>
Ejemplo4. Uso de fmod()

<?php
$x = 5.7; $y = 1.3; // x = i * y + r, donde i entero
$r = fmod($x, $y);
echo $r; // $r es igual a 0.5, ya que 4 * 1.3 + 0.5 = 5.7
?>
Ejemplo5. de checkdate()
<?php
var_dump(checkdate(12, 31, 2000)); // bool(true)
var_dump(checkdate(2, 29, 2001)); // bool(false)
?>
Ejemplos6. de date()
<?php
echo date("l")."<br>"; // Imprime: Monday
echo date('l dS \of F Y h:i:s A')."<br>"; // Imprime: Monday 09th of June 2008 12:20:51 AM
echo "July 1, 2000 ". date("l", mktime(0, 0, 0, 7, 1, 2000))."<br>"; //Imprime: July 1, 2000 Saturday
echo date(DATE_RFC822)."<br>"; // imprime: Mon, 09 Jun 08 00:20:51 -0400
echo date(DATE_ATOM, mktime(0, 0, 0, 7, 1, 2000))."<br>"; // imprime: 2000-07-01T00:00:00-04:00
?>
Ejemplo7. de date() y mktime()

<?php
$manhana = mktime(0, 0, 0, date("m") , date("d")+1, date("Y"));
echo $manhana."<br>";
$ultimo_mes = mktime(0, 0, 0, date("m")-1, date("d"), date("Y"));
echo $ultimo_mes."<br>";
$siguiente_anho = mktime(0, 0, 0, date("m"), date("d"), date("Y")+1);
echo $siguiente_anho."<br>";
?>
Nota: Esto puede ser más confiable que sumar o restar el número de segundos en un día o
mes de una marca de tiempo.
Ejemplo8. Formato de date()

<?php //Asumiendo que hoy es: Lunes 09th, 2008, 00:32:18 am
echo $hoy = date("F j, Y, g:i a") ."<br>"; // June 9, 2008, 12:32 am
echo $hoy = date("m.d.y") ."<br>"; // 06.09.08
echo $hoy = date("j, n, Y") ."<br>"; // 9, 6, 2008
echo $hoy = date("Ymd") ."<br>"; // 20080609
echo $hoy = date('h-i-s, j-m-y, it is w Day z ')."<br>"; // 12-32-42, 9-06-08, 3230 3242 1 Monam08 160
echo $hoy = date('\E\s \e\l \d\i\a jS') ."<br>"; // Es el dia 9th
echo $hoy = date("D M j G:i:s T Y") ."<br>"; // Mon Jun 9 0:35:41 EDT 2008
echo $hoy = date('H:m:s \m \i\s\ \m\o\n\t\h') ."<br>"; // 00:06:41 m is month
echo $hoy = date("H:i:s") ."<br>"; // 00:35:41
?>
Actividad:
 Diseñe un formulario que permita comprobar diversos datos ingresados (ejemplos 1-4).
 Diseñe otra aplicación que permita comprobar los ejemplos 5-8 por medio de formularios.
 Desarrolle 1 aplicación donde se observe el uso de funciones matemáticas.
 Desarrolle 1 aplicación donde se observe el uso de funciones fecha y hora.
95
Lección 16. Servidor de Base de Datos MySQL
 Introducción a MySQL. Conectándose al servidor MySQL.
 Definición de usuarios y seguridad. Definición de base de datos
 Definir y cargar datos. Crear backup
Conversión de base de datos Access a MySQL
 Drivers ODBC, MySQL Query y Conversiones.
 Proyecto. Definición de usuarios y BD
INTRODUCCIÓN
El software MySQL® proporciona un servidor de base de datos SQL (Structured Query
Language) muy rápido, multi-threaded, multi usuario y robusto. El servidor MySQL está
diseñado para entornos de producción críticos, con alta carga de trabajo así como para
integrarse en software para ser distribuido. MySQL es una marca registrada de MySQL AB.
En esta parte se introduce el aprendizaje a MySQL, a través del uso de mysql, el programa
cliente de MySQL para crear y utilizar una base de datos simple. mysql (a veces denominado
“monitor de terminal” o solamente “monitor”) es un programa interactivo que le permite
conectarse a un servidor de bases de datos MySQL, ejecutar consultas, y ver los resultados.
mysql puede usarse también en modo por lotes: se colocan las consultas en un archivo
previamente armado, y se le dice a mysql que ejecute el contenido del archivo.
Para ver una lista de las opciones utilizadas con mysql, ejecútelo con la opción --help:
shell> mysql –help
equivalente;
D:\AppServ\MySQL> mysql –help
CONECTARSE Y DESCONECTARSE DEL SERVIDOR
Para conectarse al servidor, generalmente se le proporcionará a mysql un nombre de usuario y

una contraseña.
shell> mysql -u user -p
Enter password: ********
Si el servidor se está ejecutando en un ordenador distinto a donde está estableciendo la

conexión, también se deberá especificar el nombre de host. Una vez que conozca los
parámetros apropiados, debería poder conectarse de este modo:
shell> mysql -h host -u user -p
host y user representan el nombre del ordenador donde se está ejecutando el servidor de
bases de datos MySQL y el nombre de usuario de la cuenta que se usará para conectarse.
Si todo funciona bien, se verá una información de ingreso seguida por el prompt mysql>:
shell> mysql -h host -u user -p
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 1 to server version: 5.0.27-community-nt-log
Type 'help;' or '\h' for help. Type '\c' to clear the buffer.
mysql>
El prompt anuncia que mysql está listo para procesar comandos.
Algunas instalaciones de MySQL permiten conectarse como usuario anónimo (sin nombre) si el
servidor se está ejecutando en el ordenador local. Si esto sucede en su caso, deberia poder
conectarse al servidor ejecutando mysql sin ningún parámetro:
shell> mysql
Después de haberse conectado, puede desconectarse en cualquier momento escribiendo QUIT
(o \q) en el prompt mysql>:
96
Entrar consultas
Esta sección describe los principios básicos del ingreso de comandos, empleando varias
consultas que puede realizar para familiarizarse con la forma en que funciona mysql.
Consulta 1.
Comando que muestre su número de versión y la fecha actual.
mysql> SELECT VERSION(), CURRENT_DATE;
+----------------+--------------+
| VERSION() | CURRENT_DATE |
+----------------+--------------+
| 5.0.7-beta-Max | 2005-07-11 |
+----------------+--------------+
1 row in set (0.01 sec)
mysql>
Esta consulta le muestra varias cosas acerca de mysql:

 Un comando normalmente consiste en una sentencia SQL seguida de punto y coma.
 Cuando ingresa un comando, mysql lo envía al servidor para ser ejecutado e imprime los
resultados. A continuación muestra el prompt mysql> para otro comando.
 mysql imprime los resultados de la consulta en forma tabulada (filas y columnas). La
primera fila contiene etiquetas para las columnas. Las filas siguientes son los resultados
de la consulta.
 mysql informa cuántas filas fueron devueltas y cuánto tiempo le tomó ejecutarse a la
consulta, lo cual da una idea aproximada del rendimiento del servidor. Estos valores son
imprecisos porque representan tiempo de reloj corriente (no tiempo de CPU), y además
porque están afectados por factores como la carga del servidor o la latencia de red.
Las palabras clave pueden ingresarse en cualquier combinación de minúsculas y mayúsculas.
Las siguientes consultas son equivalentes:

mysql> SELECT VERSION(), CURRENT_DATE;
mysql> select version(), current_date;
mysql> SeLeCt vErSiOn(), current_DATE;
Consulta 2.
Consulta que demuestra que mysql puede usarse como calculadora:
mysql> SELECT SIN(PI()/4), (4+1)*5;
+------------------+---------+
| SIN(PI()/4) | (4+1)*5 |
+------------------+---------+
| 0.70710678118655 | 25 |
+------------------+---------+
Consulta 3. Múltiples sentencias.

Se puede ingresar múltiples sentencias en una misma línea, separarse con punto y coma:
mysql> SELECT VERSION(); SELECT NOW();
+----------------+
| VERSION() |
+----------------+
| 5.0.7-beta-Max |
+----------------+
+---------------------+
| NOW() |
+---------------------+
| 2005-07-11 17:59:36 |
+---------------------+
Consulta 4. Múltiples líneas

No es necesario que un comando sea ingresado en una sola línea, mysql acepta un formato
libre para las entradas: recolecta lineas pero no las ejecuta hasta que encuentra el punto y
coma.
97
mysql> SELECT
-> USER()
-> ,
-> CURRENT_DATE;
+---------------+--------------+
| USER() | CURRENT_DATE |
+---------------+--------------+
| jon@localhost | 2005-07-11 |
+---------------+--------------+
Observacones:
 El cambia de mysql> a -> advierte que no se ha completado la sentencia y aún espera
por el resto.
 Para cancelar el ingreso de un comando, debe tipear \c
 La siguiente tabla muestra cada uno de los indicadores que podrá ver y sintetiza lo que
dicen acerca del estado en que se encuentra mysql:
Prompt Significado
mysql> Listo para un nuevo comando.
-> Esperando la siguiente línea en un comando de múltiples líneas.
Esperando la siguiente línea, se encuentra abierta una cadena que comienza
'>
con apostrofo (''').
">
con comillas dobles ('"').
`>
con tilde ('`').
Esperando la siguiente línea, se encuentra abierto un comentario que
/*>
comienza con /*.
DEFINICIÓN DE USUARIOS Y SEGURIDAD.
 Crear usuarios de conexión a MySQL.
Nota: Solo el administrador puede crear los usuarios de conexión a bd MySQL, por tanto
debe acceder al servidor como administrador (Usuario root y su password).
mysql> GRANT ALL ON animales.* TO 'su_nombre_mysql'@'su_host_cliente' IDENTIFIED
BY 'password_usuario';
Donde:
- ALL (dar todos los permisos)
- ON (en)
- animales.* (base de datos animales y todas sus tablas)
- to (al)
- su_nombre_mysql (nombre de usuario de conexión a base de datos MySQL)
- su_host_cliente (equipo del cliente);
- IDENTIFIED BY (identificado por)
- password_usuario (password asignación al usuario)
Previos a la creación de la base de datos:
 Ver base de datos en el servidor

mysql> SHOW DATABASES;
La base de datos mysql es necesaria porque es la que describe los privilegios de acceso
de los usuarios. La base de datos test se provee para que los usuarios hagan pruebas.
 Usar una base de datos

mysql> USE test;
98
DEFINICIÓN DE BASE DE DATOS
Descripción de base de datos animales

La base de datos animales, representa al registro de información de distintos tipos de datos de
varias mascotas. En esta se observa el nombre, propietario, especies, sexo, nacimiento y
fallecimiento de las mascotas. Se puede observar que esta base de datos es muy simple, no
esta normalizado, pero será muy util para los ejemplos iniciales.
nombre propietario especie sexo nacimiento fallecimiento

Pelusa Arnoldo Gato f 1999-02-04
Garras Juan Gato m 1998-03-17
Pulgita Arnoldo Perro f 1989-05-13
Colmillo Benito Perro m 2000-08-27
Navegador Diana Perro m 1998-08-31 1997-07-29
Chilpe Omar Ave f 1998-09-11
Silbador Tomas Ave 2000-02-09
Delgado Benito Serpiente m 2001-04-29
 Crear una base de datos

mysql> CREATE DATABASE animales;
 Usu la base de datos, después de haber creado

mysql> USE animales;
 Ver tablas, después de estas dentro de la base de datos

mysql> SHOW tables;
 Crear la tabla (definir tabla y su estructura)

mysql> CREATE TABLE mascotas (nombre VARCHAR(20), propietario VARCHAR(20),
-> especie VARCHAR(20), sexo CHAR(1), nacimiento DATE, fallecimiento DATE);
 Ver la ESTRUCTURA de tabla definida

mysql> describe mascotas; (debe observar la tabla definida y sus estructura)
 Introducir datos en la tabla

mysql> INSERT INTO mascotas
-> VALUES ('pelusa','Arnoldo','gato','f','1999-02-04',NULL);
 Recuperar datos desde la tabla de varias maneras

mysql> SELECT * FROM mascotas;
+----------+--------------+---------+------+-------------+----------------+
| nombre | propietario | especie | sexo | nacimiento | fallecimiento |
+----------+--------------+---------+------+-------------+----------------+
| pelusa | Arnoldo | Gato | f | 1999-02-04 | NULL |
+----------+--------------+---------+------+-------------+----------------+
 Borrar datos de la tabla

mysql> DELETE FROM mascotas;
 Introducir datos en la tabla desde fichero de texto.

Nota: Debe crear archivo misMascotas.txt con tabulación por cada registro.
mysql> LOAD DATA LOCAL INFILE 'E:\\bd\\...\\misMascotas.txt' INTO TABLE mascotas;
 Crear Backup. Salir del servidor (mysql>quit;)

C:\AppServ\MySQL\bin>mysqldump –u root –p animales > E:\\bd\\...\BDanimales.sql
Enter password: *****
Actividad
 Diseñe una base de datos normalizado denominado “sistemaNotas”, sobre sistema de

notas del área técnica e ingrese datos para sus compañeros hasta la segunda unidad.
 Crear un backup de la Base de datos.
99
Conversión de Base de Datos Access a MySQL
Conversión de base de datos Access a MySQL
Si ha iniciado el desarrollo web con la base de datos Access o si tiene una base de datos en
Access y desea pasarlo a la base de datos más utilizada en web como es MySQL, una forma
de convertir es la que a continuación se detalla:
 Primero. Instalar el driver ODBC para conectar con una base de datos MySQL
 Segundo. Instalar el convertidor de base de datos MS Access a MySQL (MS Access to
MySQL)
 Tercero. Utilizar el programa MS Access to MySQL para convertir.
Instalar el driver ODBC para conectar con una base de datos MySQL
Instalar este driver sirve para que desde un sistema Microsoft Windows se pueda acceder a
una base de datos MySQL. Las aplicaciones son variadas, por ejemplo podemos utilizarlo para
crear un DSN asociado a una base de datos MySQL, de modo que nuestras páginas ASP
podrían acceder a dicha base de datos. Otra aplicación es acceder desde Access a la base de
datos MySQL y exportar o importar datos (migrar los datos desde Access a MySQL y desde
MySQL a Access), incluso para crear un back-end de nuestra base MySQL en interfaz Access.
Primero hay que descargar la última versión de Myodbc de la página de Mysql:
http://www.mysql.com/products/connector/odbc/
El archivo por ejemplo, en este caso podria tener el siguiente nombre
mysql-connector-odbc-3.51.24-win32.zip
Debe descomprimir e iniciar la instalación.
Todo por defecto:

 Next
 Modify
 Next
 Install
 Finish
Para verificar vea en Panel de control/agregar o quitar programas el siguiente icono:
100
Instalar el convertidor de base de datos MS Access a MySQL (MS Access to MySQL)
El MS Access to MySQL es un programa pequeño que convertirá Bases de datos Microsoft

Access a MySQL.
Primero bajarlo de Internet.
http://www.bullzip.com/download.php
Descomprimir el archivo bajado

msa2mys_3_0_0_66.zip
Pasos para la instalación

Todo por defecto.
 Next
 Aceptar la licencia y Next
 Verifica la ruta donde ha de instalarse, Next
 Verifica el submenu, Next
 Crear el icono en el escritorio, Next
 Verifica datos, Install
 Aceptar que inicie el programa.
Utilizar el programa MS Access to MySQL para convertir.
 Inicio  programas  Bullzip  Converters  MS Access to MySQL

 En la siguiente ventana. Escribir:
- Ruta donde se encuenra el archivo de base de datos en Access. Ejemplo:
E:\BasedeDatos\BDSistemaNotas\BDsistemaNotas.mdb
- Si su base de datos Access tiene; otros datos como nombre de usuario, contraseña
y un sistema de base de datos, debe escribir, caso contrario dejarlo en blanco.
 En la ventana siguiente escribir (para nuestro ejemplo seria);

- Contraseña de acceso a MySQL : mysql
- Destino de base de datos : sistemaNotas
- Motor de almacenamiento : MySAM
 En la siguiente ventana muestra la base de datos a convertir, puede deseleccionar las

tablas que usted desea.
 En la ventana transfer options (opciones de transferencia) seleccione todas, incluyendo
Drop... para reemplazar la base de datos de destino.

 Finalmenete proceda a transferir, clinck en Run Now.
 Si todo va bien, la ventana de resultados de transferencia no debe mostrar ningun

mensaje de error, caso contrario, verificar datos o hacer el intento con otro motor de
almacenamiento.
101
Lección 17. Consultas comunes en MySQL
 Consultas de una tabla
 Actualizar o modificar datos específicos.
 Ordenar registros, Cálculos sobre fechas.
 Coincidencia de patrones.
 Contar registros Administración de datos
 Consultas de más de una tabla
 Criterios y orden en consultas
 Usar mysql en modo batch
 Proyecto: Sentencias SQL para BD MySQL
Cargar base de datos de backup.
 Ingresar a MySQL como administrador

 Crear la base de datos (solo nombre).
Ejemplo, que la base de datos se llame: BDanimales
 Salir de MySQL.
 Ubicarse en D:\AppServ\MySQL\bin> y escribir:
D:\AppServ\MySQL\bin>mysql –u root –p BDanimales < c:\\ruta_ubicacion_kackup

 Si no falla la recuperación de datos de backup, no debe salir mensajes de error…
Consultas de una tabla
Acceder a MySQL como usuario de una determinada base de datos al que se tiene permisos
para poder accder.
La sentencia SELECT es utilizada para traer información desde una tabla. La sintaxis general
de esta sentencia es:
SELECT seleccionar_Esto
FROM desde_tabla
WHERE condiciones;
seleccionar_esto es lo que se quiere ver. Puede ser una lista de columnas, o * para indicar
“todas las columnas.” desde_tabla indica la tabla donde están los datos a recuperar. La
cláusula WHERE es opcional. Si está presente, condiciones representa las condiciones que
cada registro debe cumplir para retornar como resultado.
Seleccionar todos los datos
mysql> SELECT * FROM mascotas;
Muestra toda la tabla mascotas.
Seleccionar registros específicos
 Seleccionar registros específicos

mysql> SELECT * FROM mascotas WHERE nombre=Navegador;

Navegador Diana Perro m 1998-08-31 1997-07-29
 Se pueden indicar condiciones a cumplir por cualquier columna.

mysql> SELECT * FROM mascotas WHERE nacimiento > '2000-01-01';

Colmillo Benito Perro m 2000-08-27
102
 Se pueden combinar condiciones, por ejemplo para localizar perros hembra:

mysql> SELECT * FROM mascotas WHERE especie = 'perro' AND sexo = 'f';

 También existe el operador OR:

mysql> SELECT * FROM mascotas WHERE especie = 'serpiente' OR especie = 'ave';

Chilpe Omar Ave f 1998-09-11
 AND and OR pueden ser combinadas; AND tiene mayor precedencia que OR.
mysql> SELECT * FROM mascotas WHERE (especie = 'gato' AND sexo = 'm')
-> OR (especie = 'perro' AND sexo = 'f');

Garras Juan Gato m 1998-03-17
Seleccionar columnas concretas

 Mostrar nombre y nacimiento de todas las mascotas
mysql> SELECT propietario, nombre, nacimiento FROM mascotas;
propietario nombre nacimiento

Arnoldo Pelusa 1999-02-04
Juan Garras 1998-03-17
Arnoldo Pulgita 1989-05-13
Benito Colmillo 2000-08-27
Diana Navegador 1998-08-31
Omar Chilpe 1998-09-11
Tomas Silbador 2000-02-09
Benito Delgado 2001-04-29
 Mostrar los propietarios de las mascotas

mysql> SELECT propietario FROM mascotas;
propietario
Arnoldo
Juan
Arnoldo
Benito
Diana
Omar
Tomas
Benito
 Mostrar DISTINTOS propietarios de las mascotas

mysql> SELECT DISTINCT propietario FROM mascotas;
propietario
Arnoldo
103
Juan
Benito
Diana
Omar
Tomas
Actividad.
 Convierta la base de datos sistemaNotas de Access a MySQL y crear backup.
 Recupere la base de datos sistemaNotas desde el backup creado.
 Realice diferentes consultas mostradas hasta de la base de datos sistemaNotas.
104
Actualizar o modificar
Para actuzalizar o modificar datos de campos o de algunos registros se usa la sentencia

UPDATE. UPDATE modifica solo el registro en cuestión y no requiere que se vuelva a llenar
la tabla
 Veamos la base de datos ORIGINAL
mysql> select * from mascotas;
+-----------+-------------+-----------+------+------------+---------------+
+-----------+-------------+-----------+------+------------+---------------+
| Pelusa | Arnoldo | Gato | f | 1999-02-04 | 0000-00-00 |
| Garras | Juan | Gato | m | 1998-03-17 | 0000-00-00 |
| Pulgita | Arnoldo | Perro | f | 1989-05-13 | 0000-00-00 |
| Colmillo | Benito | Perro | m | 2000-08-27 | 0000-00-00 |
| Navegador | Diana | Perro | m | 1998-08-31 | 1997-07-29 |
| Chilpe | Omar | Ave | f | 1998-09-11 | 0000-00-00 |
| Silbador | Tomas | Ave | | 2000-02-09 | 0000-00-00 |
| Delgado | Benito | Serpiente | m | 2001-04-29 | 0000-00-00 |
+-----------+-------------+-----------+------+------------+---------------+
 Para corregir la fecha (1998-08-31) de nacimiento de la mascota cuya fecha (1977-07-29)

de fallecimiento muestra que murio antes de nacer.
mysql> UPDATE mascotas SET nacimiento='1989-08-31' WHERE nombre='navegador';

Query OK, 1 row affected (0.01 sec)
Rows matched: 1 Changed: 1 Warnings: 0
 Modificando nombres de las mascotas Pelusa y Colmillo de mayuscula a minuscula las

primeras letras.
mysql> UPDATE mascotas SET nombre='pelusa' WHERE nombre='Pelusa';
mysql> UPDATE mascotas SET nombre='colmillo' WHERE nombre='Colmillo';

 Modificando todas las letras f (femenino) que representan al sexo de la mascotas por h
(hembra).
mysql> UPDATE mascotas SET sexo='h' WHERE sexo='f';
Query OK, 3 rows affected (0.00 sec)
 Modificar la fecha de fallecimiento, no debe mostrar „0000-00-00‟ sino NULL.

mysql> UPDATE mascotas SET fallecimiento=NULL WHERE fallecimiento="0000-00-00";
 Veamos la base de datos MODIFICADO. Se muestra resaltado los cambios.

mysql> select * from mascotas;
+-----------+-------------+-----------+------+------------+---------------+
+-----------+-------------+-----------+------+------------+---------------+
| Pelusa | Arnoldo | Gato | h | 1999-02-04 | NULL |
| Garras | Juan | Gato | m | 1998-03-17 | NULL |
| pulgita | Arnoldo | Perro | h | 1989-05-13 | NULL |
| colmillo | Benito | Perro | m | 2000-08-27 | NULL |
| Chilpe | Omar | Ave | h | 1998-09-11 | NULL |
| Silbador | Tomas | Ave | | 2000-02-09 | NULL |
| Delgado | Benito | Serpiente | m | 2001-04-29 | NULL |
+-----------+-------------+-----------+------+------------+---------------+
Ordenar registros
 Para ordenar un resultado, se usa la clásula ORDER BY.
mysql> SELECT nombre, nacimiento FROM mascotas ORDER BY nombre;
+-----------+------------+
| nombre | nacimiento |
+-----------+------------+
| Chilpe | 1998-09-11 |
105
| colmillo | 2000-08-27 |
| Delgado | 2001-04-29 |
| Garras | 1998-03-17 |
| Navegador | 1989-08-31 |
| Pelusa | 1999-02-04 |
| pulgita | 1989-05-13 |
| Silbador | 2000-02-09 |
+-----------+------------+
 Puede forzar a que una columna se ordene en forma sensible a mayúsculas empleando
el modificador BINARY: ORDER BY BINARY columna.
mysql> SELECT nombre, nacimiento FROM mascotas ORDER BY BINARY nombre;
+-----------+------------+
| nombre | nacimiento |
+-----------+------------+
| Chilpe | 1998-09-11 |
| Delgado | 2001-04-29 |
| Garras | 1998-03-17 |
| Navegador | 1989-08-31 |
| Pelusa | 1999-02-04 |
| Silbador | 2000-02-09 |
| colmillo | 2000-08-27 |
| pulgita | 1989-05-13 |
+-----------+------------+
 Puede ordenar basándose en varias columnas, y cada columna en un sentido diferente.

Por ejemplo, para ordenar por tipo de animal en sentido ascendente y, dentro de cada
tipo, ordenar por nacimiento en sentido descendente (los animales más jóvenes primero).
mysql> SELECT nombre, especie, nacimiento FROM mascotas ORDER BY especie,
-> nacimiento DESC;
+-----------+-----------+------------+
| nombre | especie | nacimiento |
+-----------+-----------+------------+
| Silbador | Ave | 2000-02-09 |
| Chilpe | Ave | 1998-09-11 |
| Pelusa | Gato | 1999-02-04 |
| Garras | Gato | 1998-03-17 |
| colmillo | Perro | 2000-08-27 |
| Navegador | Perro | 1989-08-31 |
| pulgita | Perro | 1989-05-13 |
| Delgado | Serpiente | 2001-04-29 |
+-----------+-----------+------------+
Cálculos sobre fechas

MySQL provee varias funciones que se aplican a cálculos entre fechas, como: CURDATE(),
CURRENT_DATE, YEAR(), MONTH() (MES), DAY() y DAYOFMONTH().
 Para determinar cuántos años de edad tiene cada mascota, hay que calcular la diferencia
entre el año de la fecha actual y el de la fecha de nacimiento, y luego restar 1 al resultado
si el dia y mes actuales son anteriores al día y mes indicados por la fecha de nacimiento.
La siguiente consulta, muestra en detalle los pasos para obtener la edad en años.
mysql> SELECT nombre, nacimiento, CURDATE(), (YEAR(CURDATE())- YEAR(nacimiento))
-> FROM mascotas ORDER BY nombre;
+-----------+------------+------------+-------------------------------------+
| nombre | nacimiento | CURDATE() | (YEAR(CURDATE())- YEAR(nacimiento)) |
+-----------+------------+------------+-------------------------------------+
| Chilpe | 1998-09-11 | 2008-07-09 | 10 |
| colmillo | 2000-08-27 | 2008-07-09 | 8 |
| Delgado | 2001-04-29 | 2008-07-09 | 7 |
| Garras | 1998-03-17 | 2008-07-09 | 10 |
| Navegador | 1989-08-31 | 2008-07-09 | 19 |
| Pelusa | 1999-02-04 | 2008-07-09 | 9 |
| pulgita | 1989-05-13 | 2008-07-09 | 19 |
| Silbador | 2000-02-09 | 2008-07-09 | 8 |
+-----------+------------+------------+-------------------------------------+
mysql> SELECT nombre, nacimiento, RIGHT(CURDATE(),5), RIGHT(nacimiento,5)
+-----------+------------+--------------------+---------------------+
| nombre | nacimiento | RIGHT(CURDATE(),5) | RIGHT(nacimiento,5) |
+-----------+------------+--------------------+---------------------+
| Chilpe | 1998-09-11 | 07-09 | 09-11 |
| colmillo | 2000-08-27 | 07-09 | 08-27 |
| Delgado | 2001-04-29 | 07-09 | 04-29 |
106
| Garras | 1998-03-17 | 07-09 | 03-17 |
| Navegador | 1989-08-31 | 07-09 | 08-31 |
| Pelusa | 1999-02-04 | 07-09 | 02-04 |
| pulgita | 1989-05-13 | 07-09 | 05-13 |
| Silbador | 2000-02-09 | 07-09 | 02-09 |
+-----------+------------+--------------------+---------------------+
mysql> SELECT nombre, nacimiento, (RIGHT(CURDATE(),5) < RIGHT(nacimiento,5))
+-----------+------------+--------------------------------------------+
| nombre | nacimiento | (RIGHT(CURDATE(),5) < RIGHT(nacimiento,5)) |
+-----------+------------+--------------------------------------------+
| Chilpe | 1998-09-11 | 1 |
| colmillo | 2000-08-27 | 1 |
| Delgado | 2001-04-29 | 0 |
| Garras | 1998-03-17 | 0 |
| Navegador | 1989-08-31 | 1 |
| Pelusa | 1999-02-04 | 0 |
| pulgita | 1989-05-13 | 0 |
| Silbador | 2000-02-09 | 0 |
+-----------+------------+--------------------------------------------+
mysql> SELECT nombre, nacimiento, CURDATE(), (YEAR(CURDATE())- YEAR(nacimiento))
-> - (RIGHT(CURDATE(),5) < RIGHT(nacimiento, 5)) AS edad
+-----------+------------+------------+------+
| nombre | nacimiento | CURDATE() | edad |
+-----------+------------+------------+------+
| Chilpe | 1998-09-11 | 2008-07-09 | 9 |
| colmillo | 2000-08-27 | 2008-07-09 | 7 |
| Delgado | 2001-04-29 | 2008-07-09 | 7 |
| Garras | 1998-03-17 | 2008-07-09 | 10 |
| Navegador | 1989-08-31 | 2008-07-09 | 18 |
| Pelusa | 1999-02-04 | 2008-07-09 | 9 |
| pulgita | 1989-05-13 | 2008-07-09 | 19 |
| Silbador | 2000-02-09 | 2008-07-09 | 8 |
+-----------+------------+------------+------+
 Una consulta similar se utiliza para determinar la edad a la fecha de muerte de los
animales. Se determinan los animales que han muerto verificando si el valor de la
columna fallecimiento es NULL. Entonces, para todos los valores no NULL calcula la
diferencia entre las fechas de muerte (fallecimiento) y nacimiento (nacimiento):
mysql> SELECT nombre, nacimiento, fallecimiento, (YEAR(fallecimiento)-
-> YEAR(nacimiento)) - (RIGHT(fallecimiento,5) < RIGHT(nacimiento, 5)) AS edad
-> FROM mascotas WHERE fallecimiento IS NOT NULL ORDER BY edad;
+-----------+------------+---------------+------+
| nombre | nacimiento | fallecimiento | edad |
+-----------+------------+---------------+------+
| Navegador | 1989-08-31 | 1997-07-29 | 7 |
+-----------+------------+---------------+------+
La consulta utiliza la expresión fallecimiento IS NOT NULL en lugar de fallecimiento <>

NULL porque NULL es un valor especial, que no puede ser comparado mediante los
operadores lógicos habituales.
 Para obtener mascotas que cumplen años el próximo mes.

Suponga que el mes actual es julio. De modo que su número es 7, y se buscan a
mascotas nacidos en agosto (mes 8):
mysql> SELECT nombre, nacimiento, MONTH(nacimiento) FROM mascotas
-> WHERE MONTH(nacimiento)=8;
+-----------+------------+-------------------+
| nombre | nacimiento | MONTH(nacimiento) |
+-----------+------------+-------------------+
| colmillo | 2000-08-27 | 8 |
| Navegador | 1989-08-31 | 8 |
+-----------+------------+-------------------+
 Esto se complica ligeramente cuando el mes actual es Diciembre. No se puede
simplemente sumarle 1 al número del mes (12) y buscar mascotas nacidos en el mes 13.
Para este caso, se puede escribir la consulta de forma que funcione sin importar cual es
el mes actual.
DATE_ADD() sirve para sumar un intervalo de tiempo a una fecha dada. Si se adiciona
un mes al valor de CURDATE(), y se extrae el mes mediante MONTH(), el resultado será
el mes en el que se buscarán cumpleaños:
107
mysql> SELECT nombre, nacimiento FROM mascotas
-> WHERE MONTH(nacimiento) = MONTH(DATE_ADD(CURDATE(), INTERVAL 1 MONTH));
 Una manera alternativa de alcanzar el mismo resultado es sumar 1 al mes actual para
obtener el mes siguiente, después de emplear la función módulo (MOD) para dejar el
número de mes en 0 si resultara ser 12:
mysql> SELECT nombre, nacimiento FROM mascotas

-> WHERE MONTH(nacimiento) =MOD(MONTH(CURDATE()), 12) + 1;
Coincidencia de patrones
Los patrones SQL permiten emplear el caracter '_' para representar coincidencia con un
carácter individual y '%'. En MySQL, por defecto, los patrones SQL no son case-sensitive.
Abajo se muestran algunos ejemplos. Advierta que no se emplean los operadores = o <> para
trabajar con patrones SQL, en lugar de eso se usan los operadores de comparación LIKE o
NOT LIKE.
 Para encontrar nombres que comiencen con 'p' (sin considerar mayúscular o minúsculas)
mysql> SELECT * FROM mascotas WHERE nombre LIKE "p%";
+---------+-------------+---------+------+------------+---------------+
+---------+-------------+---------+------+------------+---------------+
| Pelusa | Arnoldo | Gato | h | 1999-02-04 | NULL |
| pulgita | Arnoldo | Perro | h | 1989-05-13 | NULL |
+---------+-------------+---------+------+------------+---------------+
 Para encontrar nombres que terminen con 'or:

mysql> SELECT * FROM mascotas WHERE nombre LIKE "%or";
+-----------+-------------+---------+------+------------+---------------+
+-----------+-------------+---------+------+------------+---------------+
| Silbador | Tomas | Ave | | 2000-02-09 | NULL |
+-----------+-------------+---------+------+------------+---------------+
 Para encontrar nombres que contengan exactamente 5 caracteres, use 5 veces el

caracter patrón '_':
mysql> SELECT * FROM mascotas WHERE nombre LIKE "_________";

+-----------+-------------+---------+------+------------+---------------+
+-----------+-------------+---------+------+------------+---------------+
+-----------+-------------+---------+------+------------+---------------+
Los otros patrones que pueden emplearse con MySQL usan expresiones regulares extendidas.
Cuando busque coincidencias con este tipo de patrones, use los operadores REGEXP y NOT
REGEXP (o bien los sinónimos RLIKE y NOT RLIKE).
Actividad
 Obtenga los propietarios que perderían sus mascotas, si al cabo de 12 años con siete
meses y 15 dias de vida, tienen que sacrificarlos.
 Modifique la fecha de nacimiento de las mascotas simultáneamente a la fecha actual y en
forma proporcional, para que ninguno sea sacrificado y que el mismo se de recien de
aproximadamente de 8 años 3 meses y 25 dias.
 Obtenga los nombres de mascotas cuyos nombres no inicien con “p” ni “c”.
 Muestre a los propietarios cuya penultima letra sea “a” y antepenultima sea “m”.
108
Contar registros
 COUNT(*) cuenta el número de registrso de una tabla.

mysql> SELECT COUNT(*) from mascotas;
+----------+
| count(*) |
+----------+
| 8 |
+----------+
 Contar propietarios que muestra la columna propietario (sin considerar que estas se
repitan).
mysql> SELECT COUNT(propietario) FROM mascotas;
+--------------------+
| COUNT(propietario) |
+--------------------+
| 8 |
+--------------------+
Uso de GROUP BY (agrupado por) con COUNT()

GROUP BY agrupa los registros que se repiten y COUNT() los cuenta las veces que se repiten.
 Para contar las mascotas que tiene cada propietario:

mysql> SELECT propietario, COUNT(*) FROM mascotas GROUP BY propietario;
+-------------+----------+
| propietario | COUNT(*) |
+-------------+----------+
| Arnoldo | 2 |
| Benito | 2 |
| Diana | 1 |
| Juan | 1 |
| Omar | 1 |
| Tomas | 1 |
+-------------+----------+
Nota: para contar los registros que se repiten es necesario utilizar COUNT() con GROUP
BY, sino MySQL emite un mensaje de error.
 Cantidad de mascotas por sexo:

mysql> SELECT sexo, COUNT(*) FROM mascotas GROUP BY sexo;
+------+----------+
| sexo | COUNT(*) |
+------+----------+
| NULL | 1 |
| h | 3 |
| m | 4 |
+------+----------+
 Cantidad de mascotas agrupadas por especie y sexo:

mysql> SELECT especie, sexo, COUNT(*) FROM mascotas GROUP BY especie, sexo;
+-----------+------+----------+
| especie | sexo | COUNT(*) |
+-----------+------+----------+
| Ave | NULL | 1 |
| Ave | h | 1 |
| Gato | h | 1 |
| Gato | m | 1 |
| Perro | h | 1 |
| Perro | m | 2 |
| Serpiente | m | 1 |
+-----------+------+----------+
 Cantidad de mascotas agrupadas por especie y sexo, pero solo de Perros y Gatos:
mysql> SELECT especie, sexo, COUNT(*) FROM mascotas
-> WHERE especie='Perro' OR especie='gato' GROUP BY especie, sexo;
Administración de datos en MySQL
Crear una tabla y adicionar a la base de datos

La tabla MASCOTAS mantiene el registro de las mascotas que se poseen. Si quisiera registrar
otros datos acerca de ellas, como ACCIONES, hechos o eventos o de su vida tales como
109
visitas al veterinario o nacimiento de crías, necesita otra tabla. Esta tabla podria contener la
información siguiente:
 Un campo con el nombre de la mascota para saber a quien pertenece cada acción,
hecho o evento registrado.
 La fecha en que ocurrió la acción.
 Un campo con la descripción de la acción.
 Un campo con el tipo de acción, a fin de poder clasificarlo.
Teniendo en cuenta estas consideraciones, la tabla podría definirse asi:
mysql> CREATE TABLE acciones (numero VARCHAR(5), nombre VARCHAR(20),

-> fecha DATE, tipo VARCHAR(15), comentario VARCHAR(35), gasto DOUBLE);
 Los datos para la tabla podrian ser:

mysql> select * from acciones;
+--------+-----------+------------+-------------+----------------------------------+
| numero | nombre | fecha | tipo | comentario |
+--------+-----------+------------+-------------+----------------------------------+
| 1 | Pelusa | 2001-05-15 | parto | 4 gatos: 3 hembras y 1 macho |
| 2 | Pulgita | 1993-06-23 | parto | 5 cachorros: 2 hembras y 3 macho |
| 3 | Pulgita | 1994-06-19 | parto | 3 cachorros: 3 hembras |
| 4 | Chilpe | 2000-03-21 | veterinario | el pico necesitaba enderezo |
| 5 | Delgado | 1997-08-03 | veterinario | heridas por caida |
| 6 | Navegador | 2002-10-12 | perrera | |
| 7 | Colmillo | 2003-10-12 | perrera | |
| 8 | Colmillo | 2004-08-27 | cumpleaños | Le dieron un nuevo juguete |
| 9 | Garras | 2002-03-17 | cumpleaños | Le dieron un nuevo collar |
| 10 | Silbador | 2003-12-09 | cumpleaños | Primer cumpleaños |
+--------+-----------+------------+-------------+----------------------------------+
NOTA:
Los ficheros de texto con los registros, tambien pueden ser definidos con \r\n al final
de cada registro. Y luego ser cargados asi:
mysql> LOAD DATA LOCAL INFILE 'e:\\bd\...TBacciones.txt' INTO TABLE acciones

-> LINES TERMINATED BY '\r\n';
Adicionar campos, clave primaria, modificar estructura y eliminar tablas

Uso de ALTER TABLE, CHANGE, ADD y DROP
Alter Table permite modificar o cambiar la estructura de una tabla
 Para cambiar el nombre de la columna comentario por descripcion
mysql> ALTER TABLE acciones CHANGE comentario descripcion VARCHAR(50);
Records: 10 Duplicates: 0 Warnings: 0

+--------+-----------+------------+-------------+----------------------------------+
| numero | nombre | fecha | tipo | descripcion |
+--------+-----------+------------+-------------+----------------------------------+
...
 Para adicionar un campo llamado gasto en la tabla acciones

mysql> ALTER TABLE acciones ADD gasto VARCHAR(8);

+--------+------------+------------+--------------+-------------------------+-------+
| numero | nombre | fecha | tipo | comentario | gasto |
+--------+------------+------------+--------------+-------------------------+-------+
...
110
 Para modificar el campo numero por cod_acc y que sea clave primaria.
mysql> ALTER TABLE acciones CHANGE numero cod_acc VARCHAR(6);
+---------+------------+------------+--------------+----------------------------------+-------+
| cod_acc | nombre | fecha | tipo | comentario | gasto |
+---------+------------+------------+--------------+----------------------------------+-------+
| 1 | Pelusa | 2001-05-15 | parto | 4 gatos: 3 hembras y 1 macho | 14 |
| 2 | Pulgita | 1993-06-23 | parto | 5 cachorros: 2 hembras y 3 macho | 18 |
| 3 | Pulgita | 1994-06-19 | parto | 3 cachorros: 3 hembras | 16 |
| 4 | Chilpe | 2000-03-21 | veterinario | el pico necesitaba enderezo | 15 |
| 5 | Delgado | 1997-08-03 | veterinario | heridas por caida | 120 |
| 6 | Navegador | 2002-10-12 | perrera | | 12 |
| 7 | Colmillo | 2003-10-12 | perrera | | 12 |
| 8 | Colmillo | 2004-08-27 | cumplea | Le dieron un nuevo juguete | 200 |
| 9 | Garras | 2002-03-17 | cumplea | Le dieron un nuevo collar | 120 |
| 10 | Silbador | 2003-12-09 | cumplea | Primer cumplea | 12.5 |
+---------+------------+------------+--------------+----------------------------------+-------+
 Para adicionar una CLAVE PRIMARIA al campo cod_acc.

mysql> ALTER TABLE acciones ADD PRIMARY KEY(cod_acc);
mysql> DESCRIBE acciones;

+------------+-------------+------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+------------+-------------+------+-----+---------+-------+
| cod_acc | varchar(6) | NO | PRI | | |
| nombre | varchar(20) | YES | | NULL | |
| fecha | date | YES | | NULL | |
| tipo | varchar(15) | YES | | NULL | |
| comentario | varchar(35) | YES | | NULL | |
| gasto | double | YES | | NULL | |
+------------+-------------+------+-----+---------+-------+
 Para eliminar un campo de la tabla acciones

mysql> ALTER TABLE acciones DROP gasto;

+---------+------------+------------+--------------+-------------------------+
| cod_acc | nombre | fecha | tipo | comentario |
+---------+------------+------------+--------------+-------------------------+
...
NOTA:
Se ha eleiminado el campo gasto y todos los datos que esta tiene.
 Para eliminar una tabla cualquiera.

El ejemplo muestra la eliminación de una tabla denominada acciones2.
mysql> DROP TABLE acciones2;
mysql> show tables;

+--------------------+
| Tables_in_animales |
+--------------------+
| acciones |
| mascotas |
+--------------------+
 Suma de gastos por tipo.

mysql> SELECT nombre, tipo, fecha, SUM(gasto) FROM acciones GROUP BY tipo;
+------------+--------------+------------+------------+
| nombre | tipo | fecha | sum(gasto) |
+------------+--------------+------------+------------+
| Colmillo | cumplea | 2004-08-27 | 332.5 |
| Pelusa | parto | 2001-05-15 | 48 |
| Navegador | perrera | 2002-10-12 | 24 |
| Chilpe | veterinario | 2000-03-21 | 135 |
+------------+--------------+------------+------------+
111
Consultas de varias tablas
 Las mascotas que ha tenido atención con el veterinario.

mysql> SELECT m.nombre, tipo, comentario
-> FROM mascotas m, acciones a
-> WHERE m.nombre=a.nombre AND tipo="veterinario";
+---------+--------------+-------------------------------------+
| nombre | tipo | comentario |
+---------+--------------+-------------------------------------+
| Chilpe | veterinario | el pico necesitaba enderezo |
| Delgado | veterinario | heridas por caida |
+---------+--------------+-------------------------------------+
 Suponga que se desea saber a qué edad tuvo sus crías cada mascota.
mysql> SELECT m.nombre,
-> (YEAR(fecha) - YEAR(nacimiento))-
-> (RIGHT(fecha,5) < RIGHT(nacimiento,5)) as edad, comentario
-> FROM mascotas m, acciones a WHERE m.nombre=a.nombre AND tipo="parto";
+---------+------+-------------------------------------+
| nombre | edad | comentario |
+---------+------+-------------------------------------+
| Pelusa | 2 | 4 gatos: 3 hembras y 1 macho |
| pulgita | 4 | 5 cachorros: 2 hembras y 3 macho |
| pulgita | 5 | 3 cachorros: 3 hembras |
+---------+------+-------------------------------------+
 Se puede establecer una relación entre dos tablas iguales. A veces es útil combinar una
tabla consigo misma, si se desea comparar entre sí registros de una misma tabla.
Por ejemplo, para formar parejas de mascotas para reproducción, podría unir la tabla
mascotas consigo misma para generar pares de animales macho y hembra de la misma
especie:
mysql> SELECT T1.nombre, T1.sexo, T2.nombre, T2.sexo, T1.especie
-> FROM mascotas AS T1, mascotas AS T2
-> WHERE T1.especie = T2.especie AND T1.sexo = 'h' AND T2.sexo='m';
+---------+------+-----------+------+---------+
| nombre | sexo | nombre | sexo | especie |
+---------+------+-----------+------+---------+
| Pelusa | h | Garras | m | Gato |
| pulgita | h | colmillo | m | Perro |
| pulgita | h | Navegador | m | Perro |
+---------+------+-----------+------+---------+
Actividad
 Se muestra el diseño básico de la base de datos BDArticulosVenta. Convertir esta base
de MS-Access a MySQL y hacer las consultas siguientes:
* *
CLIENTE ARTÍCULO
1 * * 1
CLIENTE ORDEN ARTÍCULO
 Articulos pedidos por todos los cliente, ordenados por orden alfabetico de clientes.
 Mostrar los clientes y la suma pagada por los articulos comprados, en el año 2006.
 Mostrar la relación de artículos que ya estan vencidos y los clientes que lo han
comprado.
 Mostrar los clientes quienes llevan productos del almacen 1 (codigo AL01).
 Mostrar el nombre de los clientes que son solteros, los productos que compran y los
deportes que práctican.
112
Usar mysql en modo batch
También MySQL puede ejecutar en un modo por lotes. Para hacer esto, los comandos que se
desean ejecutar deben colocarse en un archivo, y posteriormente indicarle a mysql que acepte
como entrada el contenido del mismo.
 Si se necesitara incluir parámetros de conexión en la línea de comandos, el comando

podría verse así:
shell> mysql -u usuario -p < ruta_archivo_batch
Cuando hay host es así:
shell> mysql -h host -u usuario -p < ruta_archivo_batch

Donde:
ruta_archivo_batch: es la ruta con el archivo de texto. Ejemplo:
E:\\carpeta_consultas\\...\\consulta.sql
 Si está ejecutando mysql en Windows y el archivo contiene algunos caracteres

causantes de problemas, el comando es así:
C:\> mysql -e "source ruta_archivo_batch "
 Si se desea que el script continúe su ejecución aún si alguna de sus sentencias produce
errores, se debería usar la opción de línea de comandos --force.
 Si se ejecuta una consulta que produce una salida muy extensa, se puede ejecutar a
traves de un paginador en lugar de verla desaparecer rápidamente por la parte superior
de la pantalla:
shell> mysql < batch-file | more
 Se puede enviar la salida a un archivo, para posterior proceso:
shell> mysql < batch-file > mysql.out
 Si desea obtener el formato por lotes para una salida producida interactivamente, utilice
mysql -t. Para incluir en la salida los comandos que se ejecutan, utilice mysql -vvv.
 También pueden ejecutarse archivos de script desde el prompt mysql utilizando los
comandos source o \.
mysql> source filename;

mysql> \. filename
 Hacer consultas ingresando password en modo secreto.
D:\AppServ\MySQL\bin>mysql -t -u root -p notas < e:\\consultas\\alum_x_esc.sql

+---------+---------+------------------------+----------+
| cod_esc | abr_esc | nom_esc | count(*) |
+---------+---------+------------------------+----------+
| 501 | BI | BIOLOGIA | 3 |
| 502 | EN | ENFERMERIA | 3 |
| 503 | MD | MEDICINA | 4 |
| 511 | AQ | ARQUITECTURA | 4 |
| 512 | IE | INGENIERIA ELECTRONICA | 4 |
| 513 | IS | INGENIERIA DE SISTEMAS | 3 |
| 521 | ED | EDUCACION | 3 |
| 522 | CO | CONTABILIDAD | 4 |
| 523 | DE | DERECHO | 2 |
+---------+---------+------------------------+----------+
 Hacer consultas ingresando con el password visible al publico.
113
D:\AppServ\MySQL\bin>mysql -t -u root -pmysql notas < e:\\consultas\\alum_x_esc.sql
+---------+---------+------------------------+----------+
| cod_esc | abr_esc | nom_esc | count(*) |
+---------+---------+------------------------+----------+
| 501 | BI | BIOLOGIA | 3 |
| 502 | EN | ENFERMERIA | 3 |
| 503 | MD | MEDICINA | 4 |
| 511 | AQ | ARQUITECTURA | 4 |
| 512 | IE | INGENIERIA ELECTRONICA | 4 |
| 513 | IS | INGENIERIA DE SISTEMAS | 3 |
| 521 | ED | EDUCACION | 3 |
| 522 | CO | CONTABILIDAD | 4 |
| 523 | DE | DERECHO | 2 |
+---------+---------+------------------------+----------+
NOTA:
El password va seguido y junto (sin espacio) a –p
 Hacer consultas estando dentro del servidor.

Previamente debe estar usando la base de datos. Ejemplo.
mysql> use peru;
Database changad
mysql> source e:\\basededatos\\bdmysql\\consultas\\dpto.sql

+---------+---------+---------+---------------+
| coddpto | codprov | coddist | nombre |
+---------+---------+---------+---------------+
| 01 | 00 | 00 | AMAZONAS |
| 02 | 00 | 00 | ANCASH |
...
mysql> \. e:\\basededatos\\bdmysql\\consultas\\dpto.sql
+---------+---------+---------+---------------+
| coddpto | codprov | coddist | nombre |
+---------+---------+---------+---------------+
| 01 | 00 | 00 | AMAZONAS |
| 02 | 00 | 00 | ANCASH |
Nota: sin punto y coma al final de la ruta.
114
Lección 18. Funciones que provee PHP para manejo de Base
de datos MySQL
 Configuración en tiempo de ejecución. Tipos de recursos
 Constantes de cliente MySQL
 Detalle de funciones de conexión a datos
 Proyecto: Conexión y mostrar datos PHP
Funciones php para acceso a datos mysql

 Estas funciones permiten acceder a servidores de bases de datos MySQL. Puede
encontrar más información sobre MySQL en http://www.mysql.com/.
La documentación de MySQL puede encontrarse en http://dev.mysql.com/doc/.
PHP 5+
Debe verificar si el soporte para MySQL esta habilitado por defecto, sino php_mysql.dll DLL
debe habilitarse al interior de php.ini. Asimismo, PHP necesita acceder a la biblioteca de cliente
MySQL. Un archivo de nombre libmysql.dll es incluido en la distribución de PHP en Windows, y
para que PHP se comunique con MySQL, este archivo necesita estar disponible en la ruta
PATH de los sistemas Windows (Panel de Control -> Sistema. En pestaña
'Variables de Entorno', en 'Variables de Sistema', en Path debe estar
por ejemplo f:\AppServ\MySQL\bin; separado por ―;‖). Aunque copiar
libmysql.dll al directorio de sistema de Windows también funciona (ya que el directorio de
sistema es parte del PATH del sistema por defecto), tal acción no es recomendada.
Al igual que ocurre con cualquier otra extensión (como php_mysql.dll), la directiva de PHP
extension_dir debe definirse con el directorio en donde están ubicadas las extensiones PHP.
Un valor de ejemplo de extension_dir para PHP 5 es “extension_dir =
"f:/AppServ\php5\ext"
Configuración en tiempo de ejecución

El comportamiento de estas funciones está afectado por los valores definidos en php.ini.
Por
Nombre Modificable Cambios
defecto
mysql.allow_persistent "1" PHP_INI_SYSTEM
mysql.max_persistent "-1" PHP_INI_SYSTEM
mysql.max_links "-1" PHP_INI_SYSTEM
mysql.trace_mode "0" PHP_INI_ALL Disponible desde PHP 4.3.0.
mysql.default_port NULL PHP_INI_ALL
mysql.default_socket NULL PHP_INI_ALL Disponible desde PHP 4.0.1.
mysql.default_host NULL PHP_INI_ALL
mysql.default_user NULL PHP_INI_ALL
mysql.default_password NULL PHP_INI_ALL
PHP_INI_SYSTEM en PHP <= 4.3.2. Disponible desde
mysql.connect_timeout "60" PHP_INI_ALL
PHP 4.3.0.
A continuación se presenta una corta explicación de las directivas de configuración.
mysql.allow_persistent boolean
Indica si se permiten conexiones persistentes con MySQL.
mysql.max_persistent integer
El número máximo de conexiones persistentes con MySQL por proceso.
mysql.max_links integer
El número máximo de conexiones con MySQL por proceso, incluyendo conexiones
persistentes.
mysql.trace_mode boolean
115
Modo de rastreo. Cuando se habilita mysql.trace_mode, se muestran advertencias para la
apertura de tablas/índices, conjuntos de resultados no liberados, y errores SQL. (Se introdujo
en PHP 4.3.0)
mysql.default_port string
El número de puerto TCP predeterminado para usar cuando se conecta con el servidor de
bases de datos, si no se indica otro. Si no se indica un valor predeterminado, el puerto se
obtendrá de la variable de entorno MYSQL_TCP_PORT, la entrada mysql-tcp en /etc/services
o la constante de tiempo de compilación MYSQL_PORT, en ese orden. En Win32 sólo se usa
la constante MYSQL_PORT.
mysql.default_socket string
El nombre de socket predeterminado a ser usado cuando se realicen conexiones con un
servidor de base de datos local, si no se indica algún otro.
mysql.default_host string
La máquina anfitriona predeterminada a ser usada cuando se realicen conexiones con un
servidor de bases de datos, si no se indica otro valor. No es aplicable en SQL safe mode.
mysql.default_user string
El nombre de usuario prodeterminado para conectarse al servidor de bases de datos si no se
indica otro. No es aplicable bajo SQL safe mode.
mysql.default_password string
La contraseña predeterminada a usar cuando se realicen conexiones con el servidor de bases
de datos, si no se indica otro valor. No es aplicable en SQL safe mode.
mysql.connect_timeout integer
Tiempo de espera máximo de conexión, en segundos. Bajo Linux este tiempo de espera es
usado también cuando se espera la primera respuesta del servidor.
Tipos de recursos
Hay dos tipos de recursos usados en el módulo MySQL. El primero es el identificador de enlace
para una conexión de base de datos, el segundo es un recurso que almacena el resultado de
una consulta.
Estas constantes están definidas por esta extensión y estarán disponibles solamente cuando la
extensión ha sido o bien compilada dentro de PHP o grabada dinámicamente en tiempo de
ejecución.
A partir de PHP 4.3.0, es posible especificar banderas de cliente adicionales para las funciones
mysql_connect() y mysql_pconnect(). Las siguientes constantes están definidas:
Constantes de cliente MySQL
Constante Descripción
MYSQL_CLIENT_COMPRESS Usar protocolo de compresión
MYSQL_CLIENT_IGNORE_SPACE Permitir espacios después de nombres de funciones
Permitir tantos segundos de inactividad como indique interactive_timeout (en
MYSQL_CLIENT_INTERACTIVE
lugar de wait_timeout) antes de cerrar la conexión
Usar encripción SSL. Esta bandera se encuentra disponible únicamente con
la versión 4.x o más reciente de la biblioteca cliente de MySQL. La versión
MYSQL_CLIENT_SSL
3.23.x se distribuye tanto con PHP 4 como con los binarios de Windows de
PHP 5.
La función mysql_fetch_array() usa una constante para los diferentes tipos de matrices de
resultado. Las siguientes constantes están definidas:
Constantes MySQL-fetch
116
Constante Descripción
MYSQL_ASSOC Las columnas son devueltas en la matriz usando el nombre del campo como índice.
Las columnas son devueltas en la matriz teniendo tanto un índice numérico como un índice
MYSQL_BOTH
correspondiente al nombre del campo.
Las columnas son devueltas en la matriz teniendo un índice numérico a los campos. Este
MYSQL_NUM
índice comienza en 0, el primer campo del resultado.
Nota: La mayoría de funciones de MySQL aceptan identificador_enlace como último parámetro opcional.
Si no es definido, se utiliza la última conexión abierta. Si no existe, se intenta establecer una conexión con
los parámetros predeterminados definidos en php.ini. Si no tiene éxito, las funciones devuelven FALSE.
mysql_affected_rows -- Devuelve el número de filas afectadas de la última operación MySQL

mysql_change_user -- Cambia el usuario conectado en la conexión activa
mysql_client_encoding -- Devuelve el nombre del juego de caracteres
mysql_close -- cierra el enlace con MySQL
mysql_connect -- Abre una conexión a un servidor MySQL
mysql_create_db -- Crea una base MySQL
mysql_data_seek -- Mueve el puntero interno
mysql_db_name -- Obtener datos de resultado
mysql_db_query -- Envia una sentencia MySQL al servidor
mysql_drop_db -- Borra una base de datos MySQL
mysql_errno -- Deuelve el número del mensaje de error de la última operación MySQL
mysql_error -- Devuelve el texto del mensaje de error de la última operación MySQL
mysql_escape_string -- Escapa una cadena para su uso en mysql_query
mysql_fetch_array -- Extrae la fila de resultado como una matriz asociativa, una matriz numérica o ambas
mysql_fetch_assoc -- Recupera una fila de resultado como una matriz asociativa
mysql_fetch_field -- Extrae la información de una columna y la devuelve como un objeto.
mysql_fetch_lengths -- Devuelve la longitud de cada salida en un resultado
mysql_fetch_object -- Extrae una fila de resultado como un objeto
mysql_fetch_row -- Devuelve una fila de resultado como matriz
mysql_field_flags -- Devuelve las banderas asociados con el campo específicado en un resultado
mysql_field_len -- Devuelve la longitud del campo específicado
mysql_field_name -- Devuelve el nombre del campo específicado en un resultado
mysql_field_seek -- Asigna el puntero del resultado al offset del campo específicado
mysql_field_table -- Devuelve el nombre de la tabla donde está el campo específicado
mysql_field_type -- Devuelve el tipo del campo específicado en un resultado
mysql_free_result -- Libera la memoria del resultado
mysql_get_client_info -- Obtener información del cliente MySQL
mysql_get_host_info -- Obtener información de la máquina anfitriona MySQL
mysql_get_proto_info -- Obtener información del protocolo MySQL
mysql_get_server_info -- Obtener información del servidor MySQL
mysql_info -- Obtiene información sobre la consulta más reciente
mysql_insert_id -- Devuelve el identificador generado en la última llamada a INSERT
mysql_list_dbs -- Lista las bases de datos disponibles en el servidor MySQL
mysql_list_fields -- Lista los campos del resultado de MySQL
mysql_list_processes -- Lista los procesos MySQL
mysql_list_tables -- Lista las tablas en una base de datos MySQL
mysql_num_fields -- devuelve el número de campos de un resultado
mysql_num_rows -- Devuelve el número de filas de un resultado
mysql_pconnect -- Abre una conexión persistente al servidor MySQL
mysql_ping -- Efectuar un chequeo de respuesta (ping) sobre una conexión de servidor o reconectarse si no hay conexión
mysql_query -- Envía una consulta de MySQL
mysql_real_escape_string -- Escapa caracteres especiales de una cadena para su uso en una sentencia SQL
mysql_result -- Devuelve datos de un resultado
mysql_select_db -- Selecciona un base de datos MySQL
mysql_stat -- Obtener el status actual del sistema
mysql_tablename -- Devuelve el nombre de la tabla de un campo
mysql_thread_id -- Devuelve el ID del hilo actual
mysql_unbuffered_query -- Envía una consulta SQL, sin recuperar ni colocar en búfer las filas de resultado
117
Lección 19 y 20: Acceso a datos MySQL con PHP
 Conectar a MySQL desde PHP
 Detalle de funciones de conexión y resultado
 Un buscador para una base de datos
 Creación de una BD en MySQL desde PHP
 Proyecto: Mostrar resultado de SQL en las págs.
Conectar a MySQL desde PHP

Toda conexión a una base de datos MySQL comprende seguir diferentes pasos utilzando las
funciones que proporciona PHP:
No. PASOS FUNCIONES PHP

Conectar a mysql_connect('host_mysql', 'user_mysql', 'password_mysql')
1
BD
Seleccionar mysql_select_db('nombre_BD', $identificador)
2
una BD
Ejecutar mysql_query('consulta_SQL')
3
consulta SQL
mysql_result($resultado, 'fila', 'columna')
mysql_fetch_row($resultado)
Imprimir los mysql_fetch_array($resultado, 'tipo_de_resultado')
4 resultados mysql_fetch_assoc($resultado)
con: mysql_num_rows($resultado)
mysql_num_fields($resultado)
mysql_affected_rows($identificador),
Librerar mysql_free_result('resultado_de_ejecución');
5
memoria
Desconectar mysql_close($identificado);
6
de BD
NOTA:
En los ejemplos de esta parte, se esta utilizando la base de datos “BDanimales”.
1. mysql_connect -- Abre una conexión a un servidor MySQL
int mysql_connect ([cadena hostname [, cadena usuario [, cadena password
[, bool new_link [, int client_flags]]]]] )
Devuelve: Un identificador de enlace positivo si tiene exito, o falso si hay error.
mysql_connect( )Todos los argumentos son opcionales, y si no hay, se asumen los valores
por defecto ('localhost', usuario propietario del proceso del servidor, password vacío).
Nota: Siempre que específicque "localhost" o "localhost:port" como servidor, la libreria cliente
de MySQL evitará esto y tratará de conectarse a socket local (nombrado pipe en Windows). Si
quiere usar TCP/IP, use "127.0.0.1" en vez de "localhost". Si las librerias cliente de MySQL
intentan conectarse a un socket local equivocado, debe fijar la trayectoria como
mysql.default_host en el archivo de configuración PHP y dejar el campo del servidor en blanco.
El enlace al servidor sera cerrado tan pronto como la ejecución del script finalice, a menos que
se cierre antes explícitamente llamando a mysql_close().
Ejemplo 1. Ejemplo de MySQL connect

<?php
//identificador de enlace
$id = mysql_connect('localhost', 'invitado', 'miclave');
if (!$id)
{
die(' No pudo conectarse: '.mysql_error());
}
echo ' Conexión con éxito ';
118
mysql_close($id);
?>
2. mysql_select_db -- Selecciona un base de datos MySQL
int mysql_select_db(cadena base_de_datos[, int identificador_de_enlace])
Devuelve TRUE si todo se llevó a cabo correctamente, FALSE en caso de fallo.
mysql_select_db( ) establece la base activa que estará asociada con el identificador de enlace
específicado. Si no se específica un identificador de enlace, se asume el último enlace abierto.
Si no hay ningún enlace abierto, la función intentará establecer un enlace como si se llamara a
mysql_connect( ).
Toda llamada posterior a mysql_query( ) utilizará la base activada.
Ejemplo 2. Ejemplo mysql_select_db

<?php
//Identificador de enlace
$id = mysql_connect('localhost', 'invitado', 'miclave')
or die(' No pudo conectarse: '.mysql_error());
echo ' Conexión con éxito <br>';
// Seleccionando base de datos

$BD_seleccionado = mysql_select_db('BDanimales', $id);
if (!$BD_seleccionado) {
die ('No hay base de datos BDanimales: '.mysql_error());
}
echo ' Existe la base de datos <BLINK> BDanimales </BLINK>';
?>
3. mysql_query -- Envía una consulta de MySQL
resource mysql_query(string query [, resource identificador_de_enlace] )
mysql_query() envía una consulta (a la base de datos activa en el servidor asociado con el
identificador_de_enlace dado).
Si identificador_de_enlace no es específicado, se asume el último enlace abierto. Si no se ha

abierto enlace, la función intenta establecer uno tal y como si se hubiera llamado a
mysql_connect() sin argumentos, y lo usará. El resultado de la consulta es puesto en la
memoria intermedia (buffer).
Para las sentencias SELECT, SHOW, DESCRIBE o EXPLAIN, mysql_query() regresa un

resource en caso exitoso, y FALSE en error.
Para otro tipo de sentencia SQL, UPDATE, DELETE, DROP, etc, mysql_query() regresa
TRUE en caso exitoso y FALSE en error.
mysql_query() también fallará y regresará FALSE si el usuario no tiene permiso de accesar la

o las tablas referenciadas por la consulta.
El resultado obtenido debe ser pasado a mysql_fetch_array(), y otras funciones para el

manejo de las tablas del resultado, para accesar los datos regresados.
Ejemplo 3. Consulta inválida

La siguiente consulta es sintácticamente inválida de tal manera que mysql_query() falla.
NOTA: Para ejecutar el Ejemplo, adicione el código de conexión y selección de base de datos.
<?php
// Resultado al ejecutar consulta
$SQL = 'SELECT * WHERE 1=1'; //Cambiar por 'SELECT * FROM mascotas'
$resultado = mysql_query($SQL, $id) or die('Error en SQL: '.mysql_error());
echo "Numero de filas: ".mysql_num_rows($resultado);
?>
119
4. mysql_result -- Devuelve datos de un resultado
int mysql_result(int id_resultado, int numero_de_fila [, mixed campo])
mysql_result() devuelve el contenido de una celda de un resultado MySQL. El campo

argumento puede ser el nombre del campo o el offset o tabla.nombre_del_campo. Si el nombre
de la columna tiene un alias ('select foo as bar from...'), utilice el alias en lugar del nombre de la
columna.
Cuando se trabaja un un gran resultado, debe considerarse la utilización de una función que
devuelva una fila entera ya que estas funciones son MUCHO más rápidas que mysql_result().
También, especificando un offset numérico en lugar del nombre del campo, la ejecución será
más rápida.
Las llamadas a mysql_result() no deben mezclarse con llamadas a las otras sentencias que
trabajan con un identificador de resultado.
Ejemplo 4. Ejemplo mysql_result
NOTA: Para ejecutar el Ejemplo, adicione el código de conexión y selección de base de datos.
<?php
$SQL = 'SELECT nombre, propietario FROM mascotas';
// Impreme resultado de consulta

for($i; $i<mysql_num_rows($resultado); $i++)
{
echo mysql_result($resultado, $i, 'nombre')."---".
mysql_result($resultado, $i, 'propietario')."<br>";
}
mysql_close($id);
?>
5. mysql_free_result -- Libera la memoria del resultado

int mysql_free_result ( int id_resultado )
mysql_free_result() solo necesita ser llamada si te preocupa usar demasiado memoria

durante la ejecución de tu script. Toda la memoria usada por resultado específicado en el
parámetro del identificador de resultado será automáticamente liberada.
Ejemplo 5. Ejemplo de mysql_free_result

El ejemplo muestra un error por haber liberado el resultado antes de imprimir
<?php
$SQL = "SELECT nombre, especie FROM mascotas WHERE sexo = 'M'";
// Liberando resultado o memoria

mysql_free_result($resultado); //NOTA: al pasar el código al final ya no hay error
// Resultado por fila como una matriz asociativa

while($fila = mysql_fetch_assoc($resultado))
{
// Imprimir resultado
echo $fila['nombre']." --- ";
echo $fila['especie']."<br>";
}
?>
Por razones de compatibilidad puede usarse tambien mysql_freeresult(). Sin embargo esta
función es obsoleta.
120
6. mysql_close -- cierra el enlace con MySQL
int mysql_close ( [int identificador_de_enlace] )
mysql_close() cierra el enlace con la base MySQL que esta asociada con el identificador de
enlace específicado. Si no se específica el identificador de enlace, se asume por defecto el
último enlace.
Ejemplo 6. Ejemplo de MySQL close
<?php
$id = mysql_connect('localhost', 'invitado', 'miclave')
or die('No pudo conectarse: '.mysql_error());
echo 'Se conecto con éxito <br>';
mysql_close($id);
echo 'Se cerro la conexión';
?>
Ejemplo 7. Conexion a base de datos MySQL
Este sencillo ejemplo muestra cómo:

- Conectar a BD
- Seleccionar una BD
- Ejecutar consulta SQL
- Imprimir los resultados con mysql_result()
- Librera memoria y
- Desconecta de BD
<?php
// Identificador de enlace
$id = mysql_connect('localhost', 'root', 'mysql') or die('No pudo conectarse:'. mysql_error());
// Seleccionando base de datos

mysql_select_db('BDanimales') or die('No pudo seleccionar BD.'.mysql_error());
// Resultado al ejecutar una consulta SQL

$sql = 'SELECT * FROM mascotas';
$r = mysql_query($sql, $id) or die('La consulta falló: '. mysql_error());
$n = mysql_num_rows($r);
echo "# registros ".$n."<br><br>";
// Impresion de resultados en HTML

for($i=0; $i<$n; $i++)
{
echo "Nombre: ".mysql_result($r,$i,"nombre" )."<br>";
echo "Propietario: ".mysql_result($r,$i,"propietario" )."<br>";
echo "Especie: ".mysql_result($r,$i,"especie" )."<br>";
echo "Sexo: ".mysql_result($r,$i,"sexo" )."<br>";
echo "Nacimiento: ".mysql_result($r,$i,"nacimiento" )."<br>";
echo "Fallecimiento: ".mysql_result($r,$i,"fallecimiento" )."<br>";
echo "<br>";
}
// Liberando resultados o memoria
mysql_free_result($e);
// Cerrar la conexion
mysql_close($id);
?>
Actividad
 El Ejemplo 7, presentarlo en una tabla defenida en HTML.
 Efectuar diferentes consultas y presentarlo en tablas y/o celdas con formatos variados.
- Mostrar las mascotas de Arnoldo y Benito
- Mascotas que tienen más de 6 años.
- Mostrar los campos: Nombre, especie, propietario y comentario.
121
Detalle de funciones MySQL para de conexión y resultado
1. mysql_db_query -- Envia una sentencia MySQL al servidor

int mysql_db_query ( cadena base_de_datos, cadena sentencia [, int
identificador_de_enlace] )
Devuelve: Un identificador de resultado positivo o falso si es error. La función también
regresa TRUE/FALSE para las sentencias INSERT/UPDATE/DELETE.
2. mysql_drop_db -- Borra una base de datos MySQL. Intenta suprimir una base de datos
completa del servidor asociado al identificador de enlace.
int mysql_drop_db ( cadena base_de_datos [, int identificador_de_enlace] )
3. mysql_create_db (Crear BD) esta función es obsoleta debe usar mysql_query() con una
consulta “CREATE DATABASE BD_nombre”.
mysql_query(―CREATE DATABASE BD_nombre‖, identificador_de_enlace );
4. mysql_list_dbs -- Lista las bases de datos disponibles en el servidor MySQL

int mysql_list_dbs ( [int identificador_de_enlace] )
Devuelve un puntero de resultado que contiene las bases disponibles en el actual dominio
mysql. Utilizar la función mysql_tablename() para explorar el puntero de resultado.
5. mysql_tablename -- Devuelve el nombre de la tabla de un campo

cadena mysql_tablename ( int id_resultado, int i )
mysql_tablename() toma un puntero de resultado devuelto por mysql_list_tables() así como
un índice (integer) y devuelve el nombre de una tabla. Se puede usar la función
mysql_num_rows() para determinar el número de tablas en el puntero de resultado. Usar la
función mysql_tablename() para usar este apuntador de resultado, o cualquier función para
las tablas resultantes como mysql_fetch_array().
6. mysql_db_name -- Obtener datos de resultado. Recupera el nombre de la base de datos

desde una llamada a mysql_list_dbs().
string mysql_db_name ( resource resultado, int fila [, mixed campo] )
Resultado: Es el apuntador de resultado de una llamada a mysql_list_dbs().
7. mysql_field_name -- Devuelve el nombre del campo específicado en un resultado
cadena mysql_field_name ( int id_resultado, int indice_del_campo )
Devuelve el nombre del campo específicado. Los nombres de campos retornados por esta
función diferencian entre mayusculas y minusculas.
8. mysql_fetch_row -- Devuelve una fila de resultado como matriz

mysql_fetch_row ( int id_resultado )
Devuelve: Una matriz que corresponde a la fila selecionada, o FALSE si no quedan más
filas.
9. mysql_fetch_array -- Extrae la fila de resultado como una matriz asociativa, una matriz
numérica o ambas
array mysql_fetch_array ( int id_resultado [, int tipo_de_resultado] )
Devuelve una matriz que corresponde a la sentencia extraida, o falso si no quedan más
filas.
10. mysql_fetch_assoc -- Recupera una fila de resultado como una matriz asociativa
array mysql_fetch_assoc ( resource resultado )
Devuelve una matriz asociativa que corresponde a la fila recuperada y mueve el apuntador
de datos interno hacia adelante. mysql_fetch_assoc() es equivalente a llamar
122
mysql_fetch_array() con MYSQL_ASSOC como el segundo parámetro opcional.
Únicamente devuelve una matriz asociativa.
11. mysql_affected_rows -- Devuelve el número de filas afectadas de la última operación

MySQL
int mysql_affected_rows ( [int identificador_de_enlace] )
Devuelve el número de filas afectadas en la última sentencia INSERT, UPDATE o DELETE
sobre el servidor asociado con el identificador_de_enlace especificado. Si el identificador
de enlace no ha sido especificado, se asume por defecto el último enlace.
Si la última sentencia fue un DELETE sin clausula WHERE, todos los registros han sido
borrados de la tabla pero esta función devolvera cero.
12. mysql_field_name -- Devuelve el nombre del campo específicado en un resultado

cadena mysql_field_name ( int id_resultado, int indice_del_campo )
mysql_field_name() devuelve el nombre del campo específicado. Los argumentos de la
función son el identificador de resultado y el índice del campo.
Desarrollo de un proyecto web
Crear carpetas y archivos para el proyecto.

Cada carpeta contiene archivos relaciones con
funcione, registro de compra y venta, reportes o
consultas y las librerias que se ha de usar en el
proyecto.
Creación de una BD en MySQL desde PHP
La aplicación realiza las acciones siguientes:

- Conexión como administrador del gestor
de base de datos MySQL
- Obtiene la lista de BDs que tiene el
servidor
- Buscar el nombre de la BD (“BDVentaArticulos”) que deseamos crear, si no existe lo crea
caso contrario finaliza la aplicación.
- Finalmente crea USUARIO con el PASSWORD para el proyecto.
NOTA: Archivo: crear_bd_user.php ubicado en la carpeta proyecto_VentaArticulos.
<?php
// Identificador de enlace, como ADMINISTRADOR
$id = @mysql_connect('localhost', 'root', 'mysql')
or die("ERROR_1: ADMINISTRADOR no válido. ".mysql_error());
// Obteniendo una lista de BASES DE DATOS del servidor

$Lista_BD = mysql_list_dbs($id);
// Contando BASES DE DATOS

$n = mysql_num_rows($Lista_BD);
// Imprimiendo base de datos

echo "TOTAL: ".$n." BASES DE DATOS <br>";
for($i=0; $i<$n; $i++)
{
echo "BD_$i: ".mysql_db_name($Lista_BD, $i)."<br>";
}
// Nombre de BD a crear
$nombre_BD = "BDVentaArticulos";
// BUSCANDO si la BD que queremos crear YA EXISTE

$existe = "NO";
for ($i=0; $i<$n; $i++)
{
if(mysql_db_name($Lista_BD, $i)==$nombre_BD)
{
$existe = "SI";
123
die ("<br> ERROR_2: YA EXISTE LA BD...<BLINK>".$nombre_BD."</BLINK><br>");
}
}
// Si no existe lo creamos
if($existe=="NO")
{
$crear_BD = @mysql_query("CREATE DATABASE $nombre_BD", $id)
or die("ERROR_3: <BLINK> Imposible crear BD </BLINK>".mysql_error());
echo "<br> Se creo la BD <BLINK>".$nombre_BD."</BLINK><br>";
}
/*
// NOTA: también aquí se puede definir la tabla y sus campos
*/
//Creando USUARIO con su CONTRASEÑA

$USUARIO = "adm_proyecto";
$CLAVE = "nada";
$SQL2 = "GRANT ALL ON $nombre_BD.* TO '$USUARIO'@'localhost' IDENTIFIED BY '$CLAVE'";
@mysql_query($SQL2, $id) or die('ERROR_4: No se creo Usuario. '.mysql_error());
echo "<br> Se creo satisfactoriamente: <br>";
echo "USUARIO: <BLINK>".$USUARIO."</BLINK><br>";
echo "PASSWORD: <BLINK>".$CLAVE."</BLINK><br>";
?>
NOTA: después de crear la base de datos, debe cargar los archivos para BD y también las
tablas que contiene a los operadores y los permisos definidos para el proyecto.
mysql> select * from operadores;
+---------+----------------+-------+-------+----------+--------+------+
| codoper | nombre | login | clave | permisos | estado | tipo |
+---------+----------------+-------+-------+----------+--------+------+
| 1 | Administrador | admin | admin | A | A | A |
| 2 | Gonzalo Neira | neira | neira | CE | A | O |
| 3 | Erika Enriquez | erika | erika | A | I | O |
+---------+----------------+-------+-------+----------+--------+------+
mysql> select * from permisos;

+---------+----------------+--------+
| codperm | descripcion | estado |
+---------+----------------+--------+
| A | Total | A |
| B | Ingresar | A |
| C | Consultas | A |
| D | Modificaciones | A |
| E | Mantenimiento | A |
| F | Reportes | A |
+---------+----------------+--------+
Funciones de conexión, verificación de operadores y permisos para el proyecto.

NOTA: Archivo: funcion_conexion.ini.php ubicado en la carpeta funciones_PHP
<?php
function conexion()
{
$id = @mysql_connect('localhost', 'adm_proyecto', 'nada')
or die ( "<center>"
."ADVERTENCIA ! no se puede conectar al servidor de BD"
."<br>Verifique los datos de conexión."
."</center>".mysql_error());
$BD_seleccionado = mysql_select_db('BDVentaArticulos', $id)

or die ( "<center>"
."ADVERTENCIA ! no se puede seleccionar BD "
."</center>".mysql_error());
//Revuelve identificador de enlace
return $id;
}
function verificarOperador()
{
/////////////******* Obteniendo conexion (Resource id #2)******//////////////////
$miConexion=conexion();
//echo "Conexión a BD: ".$miConexion."<br>"; //Resultado: Resource id #2
$elUsuario=$_POST['usuario'];
124
$laClave=$_POST['clave'];
$codOper;
/////////////******* Verificando existencia de usuario y clave ********////////////

$sql="SELECT codOper, login, clave FROM operadores WHERE login='$elUsuario' AND clave='$laClave'";
$r=mysql_query($sql, $miConexion) or die('ERROR en SQL'.mysql_error());
if($r)
{
$a=mysql_fetch_array($r); //echo $r."<br>"; //Resultado: Array
$n=mysql_num_rows($r); //echo $n."<br>"; //Resultado: 1
$codOper=$a['codOper']; //echo "Operadores: ".$n."<br>";
}
if($n==0)
{
echo '<h2>[ERROR] No EXISTE Operador. Login y/o clave no registrado... </h2>';
echo '<h3><P><a href = index.php>Regresar</a> </h3>';
die("...Clave o Usuario incorrecto...");
}
/////////////******* Si todo va bien, verificarOperador() retorna true ********//////////////////

return $codOper;
}
?>
Creación de la página frame que contiene toda la estructura de la página.
NOTA: Archivo: frames.php ubicado en la carpeta proyecto_VentaArticulos.

<?php
//////////////////////******** Incluyecdo fichero externo ********/////////////////
include("funciones_PHP/funcion_conexion.ini.php");
//////////******** Obteniendo resultados de funciones de fichero externo ********///////////////

$miConexion = conexion(); //Verifica usuario de conexión y BD
$codOper = verificarOperador(); //Verifica operador con login y password
//$losPerm = verificarPermisos(); //Verifica el: Permiso, Estado y Tipo
if ($codOper>0)
{
?>
<html>
<head>
<title>Página de inicio</title>
</head>
<frameset rows="120,*" border=1>
<frame src="superior.php" scrolling=no noresize>
<frameset cols="200,*">
<frame src="menu.php" scrolling=yes noresize>
<frame src="blanco.php" name="blanco" scrolling=yes noresize">
</frameset>
</frameset>
</html>
<?php
}
?>
Actividad
- Desarrollar el proyecto en su integridad.

- Para esta parte del proyecto debe crear y validar los archivos para el logeo y los archivos
para el frame.
125
Lección 21 y 22. Sentencias SQL en BD MySQL con PHP
 Un buscador para una base de datos
 Añadir, Modificar, Borrar, insertar registros
 Proyecto: Pruebas de ejecución de consultas SQL
Un buscador para una base de datos

El ejemplo muestra TRES script DIFERENTES que busca una cadena (recibida de un
formulario) en una base de datos. La busqueda es por un campo previamente definida.
PRIMERO. Un formulario para ingresar la cadena a buscar.
NOTA: Archivo: r01_buscar.php ubicado en la carpeta reportes. Este mismo formulario se

utiliza para los TRES MODOS, solo debe cambiar el nombre de archivo para “action=…”;
<body bgcolor="#fefee1">
<center>
<br><br><br>
<form name="form1" method="post" action="r01_buscar_result_mod1.php">
Palabra a buscar Modo_1: <input type="text" name="buscado" value="">
<input type="submit" name="Submit" value="Enviar">
<input type="reset" name="Submit" value="borrar">
</form>
</body>
SEGUNDO. Los TRES script para la busqueda.

PRIMER MODO.
NOTA: Archivo: r01_buscar_result_mod1.php ubicado en la carpeta reportes
<?php
//____________________________________________________________________________CONSULTA
include('../funciones_PHP/funcion_conexion.ini.php');
$miConexion = conexion();
$buscado = trim($_POST['buscado']);
//Validando en el servidor
if($buscado=="")
{
echo "[ERROR_1] Escriba una palabra a buscar...".mysql_error()."<br>";
die("<a href = 'r01_buscar.php'> Regresar...</a>");
}
// Resultado al enviar una consulta SQL
$sql = "SELECT * FROM cliente WHERE apeCli LIKE '%$buscado%' ORDER BY codCli";
$r = mysql_query($sql, $miConexion) or die('[ERROR_2] en SQL. '.mysql_error()."<a
href = 'r01_buscar.php'> Regresar...</a>");
$f = mysql_num_rows($r); // Número de FILAS
$c = mysql_num_fields($r); // Número de COLUMNAS
?>
//____________________________________________________________________________ENCABEZADO
<br><br><br>
<table width="100%" border="1" cellspacing="1" cellpadding="3">
<tr>
<th> Codigo </th>
<th> Nombre </th>
<th> Apellido </th>
<th> Teléfono </th>
</tr>
//________________________________________________________________________CUERPO
<?php
while($a=mysql_fetch_array($r))
{
?>
<tr>
<td> <?php echo $a['codCli']; ?> </td>
<td> <?php echo $a['nomCli']; ?> </td>
<td> <?php echo $a['apeCli']; ?> </td>
<td> <?php echo $a['telCli']; ?> </td>
</tr>
126
<?php
}
?>
</table>
//_____________________________________________________________________________REGRESAR
<br><br>
<a href=r01_buscar.php> Regresar </a>
</body>
SEGUNDO MODO.
<?php
//____________________________________________________________________________CONSULTA
// NOTA: CONSULTA igual que el anterior
?>
//____________________________________________________________________________ENCABEZADO
<br><br><br>
<tr>
<?php
for($i=0; $i<$c; $i++)
{
echo "<th>".mysql_field_name($r, $i)."</th>";
}
?>
</tr>
//________________________________________________________________________CUERPO
<?php
{
echo "<tr>";
for($k=0; $k<$c; $k++)
{
echo "<td>".$a[$k]."</td>";
}
echo "</tr>";
}
?>
</table>
//___________________________________________________________________________REGRESAR
<br><br>
</body>
TERCER MODO.
<?php
//____________________________________________________________________________CONSULTA
// NOTA: CONSULTA igual que el anterior
?>
//____________________________________________________________________________ENCABEZADO
<br><br><br>
<tr>
<?php
mysql_field_seek($r, 0);
while($A = mysql_fetch_field($r))
{
echo "<th> $A->name </th>";
}
?>
</tr>
//________________________________________________________________________CUERPO
// NOTA: CUERPO igual que el anterior
127
//___________________________________________________________________________REGRESAR
<br><br>
</body>
Modificar Registros en la base de datos MySQL

El ejemplo muestra la moficicación de toda una tabla, aunque este puede ser reducido con
criterios que prefiera.
NOTA: Archivo: actualizar_p1_compra.php ubicado en la carpeta “registroCompras”.
<center>
<br><br> <h2> Actualizando registros de ALMACEN </h2>
<form name="form1" method="post" action="actualizar_p2_resumen.php">
<?php
// Ultimo código orden

$sql = "SELECT * FROM almacen ORDER BY codAlm";
$r = mysql_query($sql, $miConexion) or die("ERROR en SQL_almacen".mysql_error());
$f = mysql_num_rows($r); //Número de FILAS
$c = mysql_num_fields($r); //Número de COLUMNAS
//Enviando codAlm INICIAL u ORIGINAL

{
echo "<input type='hidden' name='ini_codAlm[]' value=".$a['codAlm'].">";
}
?>
<?php
for($i=0; $i<$f; $i++)
{
echo "<tr>";
for($j=0; $j<$c; $j++)
{
$v=mysql_result($r, $i, $j);
echo "<td> <input type='text' name='alm_tabla[]' value='$v'> </td>";
}
echo "<tr>";
}
?>
</table>
<br>
<input type="reset" name="Reset" value="Borrar">
</form>
<body>
</center>
SEGUNDO, datos recibidos para actualizar parte o toda la tabla.

NOTA: Archivo: actualizar_p2_resumen.php ubicado en la carpeta “registroCompras”.
<?php
//RECIBIENDO DATOS
$alm_tabla = $_POST['alm_tabla'];
$ini_codAlm = $_POST['ini_codAlm'];
$i=0;
foreach($alm_tabla as $key => $value)
{
if($key==$i)
{
$a1[]=$value;
$i=$i+2;
}
else
{
$a2[]=$value;
128
}
}
// ACTUALIZAR
for($k=0; $k<count($a1); $k++)
{
$cod_mof = $a1[$k];
$dir_mof = $a2[$k];
$cod_ini = $ini_codAlm[$k];
$sql = "UPDATE almacen SET codAlm='$cod_mof', dirAlm='$dir_mof' WHERE codAlm='$cod_ini'";

$r = mysql_query($sql, $miConexion) or die("ERROR en SQL_modf.".mysql_error());
$reg+= mysql_affected_rows($miConexion);
}
echo "Registros afectados: ".$reg."<br><br>";
// RESUMEN DE REGISTRO MODIFICADOS

$sql3 = "SELECT * FROM almacen ORDER BY codAlm";
$r3 = mysql_query($sql3, $miConexion) or die("ERROR en SQL_almacen".mysql_error());
$f3 = mysql_num_rows($r3); //Número de FILAS
$c3 = mysql_num_fields($r3); //Número de COLUMNAS
// RESUMEN
echo "<BLINK> Resumen de datos modificados </BLINK><BR>";
while($a=mysql_fetch_array($r3))
{
for($i=0; $i<$c3; $i++)
{
echo mysql_field_name($r3,$i).":___ ".$a[$i]."<br>";
}
echo "<br>";
}
?>
Insertar registros en la base de datos MySQL

Para inserter o adicionar registros en la BD, primero debe definer un formulario validado para
que este envie datos con los formatos y valores correctos.
El siguiente ejemplo muestra código para insertar los valores recibidos del primer formulario.
<?php
//VALORES RECIBIDOS DEL PRIMER FORMULARIO EN HTML

$codOrd = $_POST['codOrd'];
$codCli = $_POST['codCli'];
$codArt = $_POST['codArt'];
$catOrd = $_POST['catOrd'];
$fecOrd = $_POST['fecOrd'];
$tipOrd = $_POST['tipOrd'];
// INSERTANDO REGISTRO
$sql = "INSERT INTO orden (codOrd, codCli, codArt, catOrd, fecOrd, tipOrd) ";
$sql.= "VALUES('$codOrd', '$codCli', '$codArt', '$catOrd', '$fecOrd', '$tipOrd')";
$r = mysql_query($sql, $miConexion) or die("ERROR en SQL_orden".mysql_error());
echo "Registros afectados: ".mysql_affected_rows($miConexion)."<br><br>";
// RESUMEN DE REGISTRO INSERTADO

$sql2 = "SELECT * FROM orden WHERE codOrd='$codOrd'";
$r2 = mysql_query($sql2, $miConexion) or die("ERROR en SQL_orden".mysql_error());
//RESUMEN
echo "<BLINK> Resumen de datos insertados </BLINK><BR>";
while($a=mysql_fetch_array($r2))
{
for($i=0; $i<mysql_num_fields($r2); $i++)
{
echo mysql_field_name($r2,$i).":___ ".$a[$i]."<br>";
}
}
?>
129
Definición de funciones para acceso a datos MySQL
 Desarrollo de aplicaciones con restricciones del acceso – Operadores y permisos en BD.
 Borrar o eliminar registros de una base de datos.
 Funciones para reportes después de: actualizar, adicionar o eliminar registros.
 Reportes de varias consultas de la base de datos MySQL
Borrar o eliminar registros de una base de datos.
Para eliminar registros de órdenes, primero debe diseñar una tabla que muestre la TABLA
ORDEN con todos los campos que esta tiene y acompañando los nombres y descripción de la
TABLA CLIENTE Y ARTÍCULOS, a lado de cada registro, también debe incluir un check que
permita seleccionar los registros a eliminar, como muestra la imagen.
El segundo formulario será para recibir información de los registros a eliminar, pero este
formulario hace referencia a una función para reportar un resumen de los registros eliminados.
El tercer script es la definición de una FUNCIÓN para dar reporte de resumen que el mismo se
ejecuta solo cuando es llamdo por cualquiera de las páginas que ya fueron definidas como:
MODIFICAR REGISTROS, ACTUALIZAR REGISTROS, ELIMINAR REGISTROS, ETC.
PRIMER formulario, el código, muestra la definción del formulario para seleccionar registros a
eliminar.
NOTA: Archivo: eliminar_p1_orden.php ubicado en la carpeta “registroVentas”.
<center>
<br><br>
<h2><BLINK> Eliminando registros de tabla ORDEN </BLINK></h2>
<form name="form1" method="post" action="eliminar_p2_resumen.php">
<?php
// Ultimo código orden

$sql = "SELECT codOrd, o.codCli, nomCli, o.codArt, desArt, catOrd, fecOrd, tipOrd ";
$sql.= "FROM orden o, cliente c, articulo a ";
$sql.= "WHERE c.codCli=o.codCli AND o.codArt=a.codArt ";
$sql.= "ORDER BY codOrd";
$r = mysql_query($sql, $miConexion) or die("ERROR en SQL_orden".mysql_error());
?>
<?php
echo "<tr>";
for($j=0; $j<$c; $j++)
{
$v1 = mysql_field_name($r, $j);
echo "<th> $v1 </th>";
}
echo "<th> Check </th>";
130
echo "</tr>";
for($i=0; $i<$f; $i++)
{
echo "<tr>";
for($j=0; $j<$c; $j++)
{
echo "<td>".mysql_result($r, $i, $j)."</td>";
$codAlm = mysql_result($r, $i, 0);
}
echo "<td><input type='checkbox' name='codOrd_eliminar[]' value='$codAlm'> </td>";
echo "<tr>";
}
?>
</table>
<br>
<input type="reset" name="Reset" value="Borrar">
</form>
<body>
</center>
SEGUNDO formulario, este formulario procesa la información recibida del primer formulario.
En la parte final del script se llama a una función definida como resumen_final($conexión;
$tabla, $ordenado_por), que el mismo se detalla en el tercer script.
NOTA: Archivo: eliminar_p2_resumen.php ubicado en la carpeta “registroVentas”.
<center>
<?php
// var_dump($_POST);
include('../funciones_PHP/funcion_resumen.ini.php');
//Recibiendo datos
$codOrd_eliminar = $_POST['codOrd_eliminar'];
// Actualizar
for($k=0; $k<count($codOrd_eliminar); $k++)
{
$reg_eliminar = $codOrd_eliminar[$k];
$sql = "DELETE FROM orden WHERE codOrd='$reg_eliminar' ";
$r = mysql_query($sql, $miConexion) or
die("ERROR en SQL_eliminar...".mysql_error());
$reg+= mysql_affected_rows($miConexion);
}
// Resumen
echo "<h2><BLINK> Resumen despues de eliminar: $reg registros...</BLINK></h2>";
resumen_final($miConexion, 'orden', 'codOrd');
?>
</body>
</center>
TERCER formulario, este script define una función para dar un resumen de los registros
eliminados. Este escript tiene parámetros como: identificador_de_enlace, tabla a usar para la
consulta y finalmente el tercer parámetro es un criterio para ordenar.
Este script esta definida para ser reutilizada para todas las páginas que den un resumen
después de ACTUALIZAR, modificar, eliminar, adicionar registros en la base de datos.
NOTA: Archivo: funcion_resumen.ini.php ubicado en la carpeta “funciones_PHP”.

<?php
function resumen_final($laConexion, $tabla, $ordenado)
{
// Resumen de registro modificados
$sql2 = "SELECT * FROM $tabla ORDER BY $ordenado ";
$r2 = mysql_query($sql2, $laConexion) or die("ERROR en SQL_Orden".mysql_error());
131
$c2 = mysql_num_fields($r2); //Número de COLUMNAS
?>
<tr>
<?php
for($i=0; $i < $c2; $i++)
{
echo "<td>".mysql_field_name($r2, $i)."</td>";
}
?>
</tr>
<?php
for($i=0; $i < $f2; $i++)
{
echo "<tr>";
for($j=0; $j < $c2; $j++)
{
echo "<td>".mysql_result($r2, $i, $j)."</td>";
}
echo "</tr>";
}
?>
</table>
<?php
}
?>
Reportes de varias consultas de la base de datos MySQL
Ejemplo de reporte:
Criterio para consulta:

 Clientes que más compran (suma_pedidos)
 Contar las veces que hicieron pedidos u órdenes
 Ordenarlo por los clientes más compradores
El resultado se muestra en la imagen.
NOTA: Archivo: r02_cliente_comprador.php ubicado en la carpeta “reportes”
El código muestra la consulta y resultado en una sola página.

<center>
<?php
$sql = "SELECT o.codCli, nomCli, apeCli, ";

$sql.= "COUNT(o.codCli) AS veces_q_pidieron, SUM(catOrd) AS suma_pedidos ";
$sql.= "FROM cliente c, orden o ";
132
$sql.= "WHERE o.codCli=c.codCli ";
$sql.= "GROUP BY o.codCli ";
$sql.= "ORDER BY suma_pedidos desc";
$r = mysql_query($sql, $miConexion) or die("ERROR en SQL_cliente comprador".mysql_error());

// Resumen
echo "<h2><BLINK> Resultado de reporte... </BLINK></h2>";
?>

<tr>
<?php
for($i=0; $i < $c; $i++)
{
echo "<td>".mysql_field_name($r, $i)."</td>";
}
?>
</tr>
<?php
for($i=0; $i < $f; $i++)
{
echo "<tr>";
for($j=0; $j < $c; $j++)
{
echo "<td>".mysql_result($r, $i, $j)."</td>";
}
echo "</tr>";
}
?>
</table>
</body>
</center>
Otros reportes
Reporte 1

 Mostrar las bebidas gaseosas cuyo precio este entre 3 y 4 soles.
Reporte 2

 Mostrar a los clientes deudores que son solteros
 Ordenarlo por clientes que más adeudan
Reporte 3

 Productos más vendidos (Suma de productos)
 Contar las veces que han sido solicitados dichos productos
 Ordenarlo por los productos más vendidos
Reporte 4

 Mostrar el nombre de los clientes que son solteros, los productos que compran y los deportes que
practican.
 Ordenarlo por nombre de cliente
133
Lección 23 y 24. Evaluación
 xx
 yy
 zz
134
Lección 25. AJAX con PHP
 Que es ajax
 El objeto XMLHttpRequest
- Atributos: onreadystatechange, readyState, responseText, responseXML, status, statusText.
- Métodos: abort, getAllResponseHeaders, getResponseHeader, open, send, setRequestHeader.
 Creación del objeto XMLHttpRequest
 Realizar una petición con AJAX
- Método: escape
 Recibir la petición AJAX
 La respuesta AJAX
 Tratamiento de la respuesta AJAX
- Método: getElementsByTagName
 Mostrar los datos al usuario
 Implementaciones de AJAX: Prototype - Funciones Ajax, xaJax - Introducción, xaJax - Funciones
PHP, xaJax – El Objeto, xaJax - En el lado del cliente.
Curso de AJAX
AJAX és una técnica de desarrollo web para crear

aplicaciones interactivas usando diferentes
tecnologías web que colaboran entre ellas.
Nacido en 2005 cómo una técnica para la

sustitución del iframe como método de
comunicación sin refresco se ha convertido en
pocos años en una tecnología imprescindible en la mayoría de aplicaciones web.
En este curso aprenderemos a utilizar AJAX para crear nuestras propias aplicaciones así como
también encontraremos una referencia completa y con ejemplos de los métodos y atributos que
utilizaremos con esta tecnología:
Que es ajax
Según wikipedia AJAX (Asynchronous JavaScript And XML) és una técnica de desarrollo web
para crear aplicaciones interactivas mediante la combinación de tres tecnologías ya existentes
que conoceremos en este manual. Es una manera de crear una aplicación que responde a las
acciones del usuario sin refrescar la página contra el servidor.
Tecnologías
Para conseguir este efecto, se utilizan la mayoría de las tecnologías disponibles para páginas
web, HTML, CSS, XML, JavaScript y algún lenguaje de servidor cómo puede ser PHP o ASP.
Veamos que función tiene cada lenguaje en la aplicación:
JavaScript - Para manejar el objeto XMLHttpRequest y DOM tratar para los datos recibidos.
HTML - Distribuye en la ventana del navegador los elementos de la aplicación y la
información recibida por el servidor
CSS - Define el aspecto de cada elemento y dato de la aplicación
XML - Es el formato de los datos transmitidos del servidor al cliente (navegador) y que
posteriormente serán mostrados.
Lenguaje de servidor - Genera la información útil en XML y la envía al navegador.
Funcionamiento
El usuario accede a la aplicación que es enviada por el servidor en formato HTML, JavaScript y
CSS. Luego el código JavaScript de la aplicación pide al servidor los datos que quiere mostrar
y este, ejecuta un código de lado de servidor que envía al navegador los datos en formato
XML.
135
Cada vez que el usuario realiza una acción que significa mostrar unos datos, la capa javascript,
repite la acción anterior de manera invisible al usuario y muestra los datos deseados.
Problemas
El principal problema de la gran mayoría de aplicaciones AJAX (lo digo por experiencia como
usuario de mozilla) es la baja compatibilidad entre navegadores, puesto que la capa JavaScript,
es de una gran complejidad y a menudo por falta de experiencia en el lenguaje, o por falta de
tiempo, se opta por programar solo para Internet Explorer.
Ejemplos
Un excelente ejemplo de aplicación AJAX, bastante compatible entre navegadores es Google
Maps, en ella podrás ver cómo cambiamos la posición del mapa sin recargar la página...
El objeto XMLHttpRequest
Un objeto XMLHttpRequest es una instancia de una API que nos permite la transferencia de
datos en formato XML desde los script del navegador ( JavaScript, JScrip, VBScript ... ) a los
del servidor ( PHP, Perl, ASp, Java ... ) e inversamente.
Compatibilidad con navegadores

El primero en implementar esta API fué Microsoft con un objeto ActiveX para su navegador
Internet Explorer 5, posteriormente empezó a incorporarse de forma nativa en todos los
naveadores empezando por Firefox seguido de Apple, Konqueror, Opera Software, iCab y
Microsoft Internet Explorer 7.
Metodos y atributos
Atributos:
 onreadystatechange
 readyState
136
 responseText
 responseXML
 status
 statusText
Metodos:
 abort
 getAllResponseHeaders
 getResponseHeader
 open
 send
 setRequestHeader
onreadystatechange (atributo)
El atributo onreadystatechange asigna la función que se ejecutará cada vez que readyState
cambie de valor.
Utilización
oXMLHttpRequest.onreadystatechange = fFuncion;
oXMLHttpRequest - Objeto XMLHttpRequest
fFuncion - Función a ejecutar
Frecuentemente utilizamos onreadystatechange para definir una función para leer los datos
recibidos del servidor, en este caso en su interior comprobaríamos que readyState tenga valor
4 y entonces leeremos el valor de responseXML, responseText...
Una alternativa a onreadystatechange es la utilización de un timeout con setTimeout antes

de la lectura.
En ambos casos será nescesario comprobar el estado de la propiedad readyState de

oXMLHttpRequest, ya que solo cuando tenga valor 3 o 4 se podrá acceder a atributos como
responseXML y responseText.
Ejemplo
Habiendo creado el objeto XMLHttpRequest oXMLHttpRequest previamente haremos que nos
alerte el estado del objeto (readystate) cada vez que este cambie.
000 <script language="JavaScript">

001 // Creamos la función
002 function fFuncion () {
003 // Alertamos el estado de la petición
004 alert ( oXMLHttpRequest.readyState );
005 }
006 // Definimos la función handler del evento
007 oXMLHttpRequest.onreadystatechange = fFuncion;
008 </script>
readyState (atributo)
El atributo readyState devuelve el estadoactual del objeto XMLHttpRequest, cada vez que
cambia el valor de readyState se lanza la funcion indicada en onreadystatechange
Utilización
iEstado = oXMLHttpRequest.readyState;
iEstado - Estado actual del objeto
0 - Sin inicializar, siempre será:
1 - Abierto (acaba de llamar open)
2 - Enviado
137
3 - Recibiendo
4 - A punto
La propiedad readyState se utiliza en todas las comunicaciones asíncronas para comprovar
que podemos acceder ya a atributos como responseXML y responseText, sólo accesibles en
los estados 3 y 4.
Ejemplo
alerte el texto recibido en modo asíncrono.

003 // Si el estado es "A punto"
004 if ( oXMLHttpRequest.readyState == 4) {
005 // Alertamos el texto
006 alert ( oXMLHttpRequest.responseText );
007 }
008 }
009 //
012 </script>
responseText (atributo)
El atributo responseText devuelve el texto del documento descargado del servidor en una
petición con XMLHttpRequest.
Utilización
sDocumento = oXMLHttpRequest.responseText;
sDocumento - Cadena de caracteres con el texto del documento.
La propiedad responseText se utiliza para tratar los datos recibidos desde el servidor que no
tienen formato XML, podremos acceder a los datos siempre y cuando el estado de la conexión
devuelto con readyStatechange sea igual a 3 (recibiendo) o 4 (a punto).
Siempre que podamos intentaremos usar responseXML en lugar de responseText y XML

para la los datos en lugar de texto plano.
Ejemplo
alerte el texto recibido en modo asíncrono.

005 // Alertamos el texto
006 alert ( oXMLHttpRequest.responseText );
007 }
008 }
011 </script>
responseXML (atributo)
El atributo responseXML devuelve una referéncia al cuerpo del documento descargado del
servidor en una petición con XMLHttpRequest en formato XML.
138
Utilización
oDocumento = oXMLHttpRequest.responseXML;
oDocumento - Referéncia al cuerpo del objeto recibido.
La propiedad responseXML se utiliza para tratar los datos recibidos en formato XML desde el
servidor, podremos acceder a los datos siempre y cuando el estado de la conexión devuelto
con readyStatechange sea igual a 4 (a punto).
Esta propiedad nos devolverá null siempre que la respuesta XML del servidor no tenga el
encabezado text/xml, application/xml o acabe en +xml.
Utilizaremos las propiedades del Modelo de Objetos de Documento (DOM) para tratar los datos
XML recividos.
Ejemplo
Habiendo creado el objeto XMLHttpRequest oXMLHttpRequest previamente y realizado una
petición de un xml con marcas <item> haremos que nos alerte el número de item's.

005 // Accedemos al documento XML
006 oDocumento = oXMLHttpRequest.responseXML.documentElement;
007 // Alertamos el numeto de item's
008 alert ( oDocumento.getElementsByTagName('item').length );
009 }
010 }
013 </script>
status (atributo)
El atributo statusText devuelve el código del estado HTTP de la transmisión devuelto por el
servidor web.
Utilización
iEstado = oXMLHttpRequest.status;
iEstado - Entero con el código HTTP de estado.
La propiedad status e utiliza para comprobar que no ha habido problemas en la comunicación
con el servidor, podremos acceder a los datos siempre y cuando el estado de la conexión
devuelto con readyStatechange sea igual a 3 (reciviendo) o 4 (a punto).
El código de estado HTTP para una transmisión correcta es el 200, será conveniente
comprobar este dato antes de acceder a los datos con responseXML o responseText, puedes
ver una lista de los otros posibles códigos y su significado en este artículo.
Ejemplo
Habiendo creado el objeto XMLHttpRequest oXMLHttpRequest mostramos un error cuando la
conexión no ha sido satisfactória.

001 // Comparamos el estado
002 if ( oXMLHttpRequest.status != 200 ) {
003 // Mostramos un mensaje de error
004 alert ( 'Ha sucedido un error con la conexion' );
005 }
006 </script>
139
statusText (atributo)
El atributo statusText devuelve el texto del estado HTTP de la transmisión devuelto por el
servidor web.
Utilización
sEstado = oXMLHttpRequest.statusText;
sEstado -Cadena de caracteres con el texto del estado HTTP.
La propiedad statusText no es de uso común, normalmente en su lugar usaremos status,
podremos acceder a los datos siempre y cuando el estado de la conexión devuelto con
readyStatechange sea igual a 3 (reciviendo) o 4 (a punto).
El texto de estado HTTP para una transmisión correcta es 'OK'.
Ejemplo
Habiendo creado el objeto XMLHttpRequest oXMLHttpRequest mostramos el texto de estado.

001 // Comparamos el estado
002 alert ( oXMLHttpRequest.statusText );
003 }
004 </script>
abort (metodo)
El método abort detiene todas las conexiones asíncronas abiertas por el objeto
XMLHttpRequest lo y reinicializa poniendo a cero su estado (readyState).
Utilización
oXMLHttpRequest.abort ();
Frecuentemente se utiliza abort antes de realizar una nueva petición al servidor a través de un
objeto que está realizando o recibiendo otra petición anterior.
Ejemplos
Vamos a crear un botón para que el usuario pueda detener en cualquier momento la
comunicación a través del objeto oXMLHttpRequest préviamente creado.
000 

001 <input type="button" value="Detener"
002 action="oXMLHttpRequest.abort ();" />
Vamos a realizar una petición liberando antes el objeto oXML préviamente creado.
000 <script>
001 // Liberamos el objeto
002 oXML.abort ();
003 // Enviamos los datos
004 oXML.open('GET', 'archivo.txt');
005 // Preparamos la recepción
006 oXML.onreadystatechange = leerDatos;
007 // Realizamos la petición
008 oXML.send('');
009 </script>
getAllResponseHeaders (metodo)
El método getAllResponseHeaders devuelve en una sola cadena de caracteres los
140
encabezados HTTP que se han recibido del servidor en una conexión usando el objeto
XMLHttpRequest.
Utilización
sHeaders = oXMLHttpRequest.getAllResponseHeaders ();
sHeaders - Cadena de caracteres con los encabezados.
La cadena sHeaders contendrá todos los encabezados enviados por el servidor excepto el de
estado ( por ejemplo HTTP/1.1 200 OK), los encabezados serán devueltos separados por la
combinación 'salto de linea' + 'retorno de caro'.
Podremos acceder a los encabezados siempre y cuando el estado de la conexión devuelto con
Ejemplo
Vamos a mostrar en un alert todos los encabezados recibidos en una conexión.

001 
011 </script>
getResponseHeader (metodo)
El método getResponseHeader devuelve en una sola cadena de caracteres uno de los
encabezados HTTP que se han recibido del servidor en una conexión usando el objeto
XMLHttpRequest.
Utilización
sHeaders = oXMLHttpRequest.getAllResponseHeaders ( sHeaderName );
sHeaders - Cadena de caracteres con los encabezados.
sHeaderName - Cadena de caracteres con el nombre del encabezado
La cadena sHeaders contendrá todos los encabezados con nombre igual a sHeaderName
enviados por el servidor separados por la combinación 'coma' + 'espacio'.
Podremos acceder a los encabezados siempre y cuando el estado de la conexión devuelto con
Ejemplo
Vamos a mostrar en un alert todos los encabezados 'X-Powered-By' recibidos en una conexión.

001 
011 </script>
141
open (metodo)
El método open prepara una conexión HTTP a través del objeto XMLHttpRequest ( con un
método y una URL especificados ) y inicializa todos los atributos del objeto.
Utilización
oXMLHttpRequest.open ( sMetodo, sURL [, bSincronia [, sUsuario [, sPwd ] ] ] );
sMetodo - String con el método de conexión ( GET o POST ).
sURL - URL para la peticion HTTP
bSincronia - Booleano opcional en true ( por defecto ) para usar modo asíncrono y en false
para síncrono.
sUsuario - Cadena de caracteres opcional con el nombre de usuario para la autenticación
sPwd - Cadena de caracteres opcional con la contraseña del usuario sUsuariopara la
autenticación
Al llamar a open el atributo readyState a 1, resetea los headers de envío y los devuelve
atributos responseText, responseXML, status y statusText a sus valores iniciales
Nota:
No se permiten las llamadas a dominios, puertos o protocolos diferentes al de la página que
llama la función
Frecuentemente se utiliza metodo GET para permitir al navegador guardar datos en cache y
POST para obligar a descargar los datos de nuevo.
La URL puede contener un usuario y una contraseña que se usarán en cada conexión y
tendrán preferéncia ante los pasados por parámetro a la función. Los parametros sUsuario y
sPwd solo se usarán para enviarlos si se recibe una respuesta 401 - Access Denied mientras
que por URL se usarán siempre.
Por definición deberemos usar modo asíncrono para que podemos llamarlo AJAX
Para realizar la conexión deberemos usar send despues de open
Ejemplo
Vamos realizar una conexión para descargar index.htm.

001 
009 </script>
send (metodo)
El método send envía la petición con los datos pasados por parámetro como cuerpo de la
petición a través del objeto XMLHttpRequest.
Utilización
oXMLHttpRequest.send ( mData );
oData - Cuerpo de la petición HTTP.
El parametro oData puede ser una referéncia al DOM de un documento o una cadena de
caracteres.
142
Nota:
Se recomienda pasar siempre el parametro oData aunque no sea requerido en algunos
navegadores
Ejemplo
Vamos realizar una conexión para descargar index.htm.

001 
009 </script>
setRequestHeader (metodo)
El método setRequestHeader añade un encabezado HTTP a la petición HTTP a través del
objeto XMLHttpRequest.
Utilización
oXMLHttpRequest.setRequestHeader ( sNombre, sValor);
sNombre - Nombre del encabezado HTTP.
sValor - Valor del encabezado HTTP.
El parametro sNombre deberá no podrá ser Accept-Charset, Accept-Encoding, Content-Length,
Expect, Date, Host, Keep-Alive, Referer, TE, Trailer, Transfer-Encoding ni Upgrade, tampoco
podrá contener espacios, puntos o saltos de línea.
El parametro sValor no podrá contener saltos de línea.
Solo podemos utilizar setRequestHeader cuando el valor de readyState sea 1.
Ejemplo
Vamos a añadir el encabezado UserAgent a nuestra petición XMLHttpRequest:

001 
011 </script>
Creación del objeto XMLHttpRequest

El secreto de AJAX es la comunicación sin refresco entre el cliente y el servidor, esto es
posible gracias a JavaScript y al objeto XMLHttpRequest.
Este objeto, esta disponible para la mayoría de navegadores modernos excepto las versiones 5
y 6 de Internet Explorer, para las cuales tendremos que usar un objeto ActiveX llamado
'Microsoft XMLHTTP', por lo tanto , cuando creemos el objeto de comunicación con el servidor
deberemos tener en cuenta el navegador con el que trabaja nuestro usuario.
143
Además, teniendo en cuenta que es posible que algunos usuarios accedan con un navegador
sin JavaScript o con una versión pobre del mismo, en caso de que el objeto no pueda crearse
de ninguna de la dos maneras, deberemos indicarlo al usuario o mejor todavía, dirigirlo a una
versión tradicional de la aplicación (sin AJAX).
Para hacer el código más limpio, crearemos una función para realizar la conexión que usará
variables locales, además es recomendable incluir todas las funciones que usaremos en un
fichero .js externo e incluirlo en el documento HTML.
000 <script>
001 function AJAXCrearObjeto(){
002 var obj;
003 if(window.XMLHttpRequest) { // no es IE
004 obj = new XMLHttpRequest();
005 } else { // Es IE o no tiene el objeto
006 try {
007 obj = new ActiveXObject("Microsoft.XMLHTTP");
008 }
009 catch (e) {
010 alert('El navegador utilizado no está soportado');
011 }
012 }
013 return obj;
014 }
015 </script>
Ahora, llamaremos a la función AJAXCrearObjeto de la siguiente manera para obtener el objeto

que utilizaremos más adelante:
000 <script>
001 oXML = AJAXCrearObjeto();
002 </script>
Realizar una petición con AJAX

El primer paso para establecer la comunicación con el servidor usando AJAX, es hacer la
petición, posteriormente, el servidor nos preparará y devolverá una información que ya
veremos más adelante como recibimos, tratamos e incorporamos en nuestra página.
Existen dos tipos de petición al servidor que explicaremos en la referéncia del método open, la
petición síncrona y la asíncrona, pero por definición AJAX utiliza comunicación asíncrona que
es la que explicaremos en este artículo.
Realizar la petición al servidor

Para realizar la petición al servidor, utilizaremos los métodos open, onreadystatechange y
send, que sirven respectivamente para preparar la petición, seleccionar la función de recepción
e iniciar la petición.
Al método open, hay que pasarle el método de petición (GET) y la URL que se enviará al
servidor y mediante la cual, el servidor, creará la respuesta que posteriormente leeremos.
Para nuestro primer ejemplo vamos a pedir un documento de texto:
000 <script>
001 // Creamos el objeto
003 // Preparamos la petición
008 oXML.send('');
009 </script></a href=">
144
Para que esto funcione, tendremos que haber declarado la función leerDatos para tratar los
datos recibidos del servidor y mostrarlos al usuario, pero esto lo veremos más adelante.
Paso de parámetros
En la petición AJAX podemos pasar parámetros tanto por POST como por GET a nuestro
servidor.
Para pasar parámetros por GET ( por URL ) , usaremos una URL con parametros en la función
open independientemente de usar el método GET o POST, por ejemplo:
000 <script>
001 // Creamos la variable parametro
002 parametro = 'Datos pasados por GET';
005 // Preparamos la petición con parametros
006 oXML.open('GET', 'pagina.php?parametro=' + escape(parametro));
010 oXML.send('');
Para pasarlos por POST, deberemos usar el método POST en la función open y pasar los
parámetros desde la función send, veamos un ejemplo:
000 <script>
001 // Creamos la variable parametro
002 parametro = 'Datos pasados por POST';
005 // Preparamos la petición con parametros
006 oXML.open('POST','pagina.php');
010 oXML.send( 'parametro=' + escape(parametro));
Nota:
Siempre que enviemos parámetros, será conveniente preparar los datos préviamente usando la
función escape.
escape (metodo)
El método escape devuelve la cadena pasada por parámetro con las transformaciones
nescesárias para ser enviada en una transacción HTTP.
Utilización
sCodificada = escape ( sDescodificada);
sCodificada - Cadena preparada para ser enviada
sDescodificada - Cadena antes de las transformaciones.
La cadena sCodificada es devuelta en formato Unicode, todos los caracteres no ASCII ( signos
de puntuación, espacios, acentos... ) de sDescodificada són sustituidos por su notación %XX,
donde XX es su equivalente hexadecimal.
Ejemplo
Vamos a codificar una cadena no ASCII:

001 
010 </script>
Recibir la petición AJAX

Vamos a ver como recibir la petición realizada en el capítulo anterior de este curso de AJAX,
recordamos que habíamos hecho una petición indicando que cuando cambie el estado de la
misma, se ejecute la función leerDatos, a continuación vamos a ver cómo hacer esta función.
Lo primero que haremos será comprobar el estado de la petición y lo haremos con el método
readyState que nos puede devolver cualquiera de los siguientes valores:
0 (No inicializado) - Los datos de la petición no se han definido
1 (Abierto) - La recepción de datos está en curso
2 (Cargado) - La recepción de datos ha finalizado pero los datos no están disponibles
3 (Interactive) - El objeto aún no está listo para otra petición pero ha recibido ya los datos.
4 (Completado) - El objeto está listo para otra petición
Y una vez estamos en estado cargado, ya podemos leer el texto recibido usando el método
responseText, veamos un ejemplo:
000 function leerDatos(){

001 if (oXML.readyState == 4) {
002 alert (oXML.responseText);
003 }
004 }
Ahora vamos a ver el primer ejemplo completo de AJAX usando lo que hemos aprendido en
este artículo y los dos anteriores de este mismo curso:
000 <script>
003 alert (oXML.responseText);
004 }
005 }
007 var obj;
011 try {
013 } catch (e) {
015 }
016 }
017 return obj;
018 }
019
023 oXML.send('');
024 </script>
Podéis ejecutar este ejemplo o descargarlo para modificarlo y probarlo libremente en vuestro
ordenador
La respuesta AJAX
Por definición, AJAX utiliza XML para organizar los datos transmitidos entre el servidor y el
navegador, para que el navegador sea capaz de interpretar estos datos, tendrá que
identificarlos cómo XML y su contenido tendrá que ser un XML válido, o de lo contrario, los
datos no serán utilizables.
146
Los encabezados
El primer paso para que el navegador interprete el contenido recivido es que tenga el
encabezado de contenido XML (text/xml), esto lo conseguimos enviando desde el servidor el
siguiente encabezado HTTP:
000 Content-Type: text/xml
Además, cómo nuestra respuesta XML será habitualmente generada de manera dinámica, es
recomendable enviar también encabezamientos de control de caché para asegurarnos que la
aplicación siempre estará trabajando con los contenidos que solicita y no con una cache
almacenada en su navegador:
000 Cache-Control: no-cache, must-revalidate

001 Expires: Mon, 26 Jul 1997 05:00:00 GMT
Veamos cómo mandar estos encabezados con diferentes lenguajes de programación de lado
de servidor, generalmente deberemos poner estos códigos al principio del todo del documento:
PHP
000 <?php
001 header("Content-Type: text/xml");
002 header("Cache-Control: no-cache, must-revalidate");
003 header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
004 ?>
Perl
000 #!/usr/bin/perl
001 print "Content-Type: text/xml";
002 print "Cache-Control: no-cache, must-revalidate";
003 print "Expires: Mon, 26 Jul 1997 05:00:00 GMT";
ASP
000 <%
001 response.ContentType="text/xml"
002 response.CacheControl="no-cache, must-revalidate"
003 response.Expires="Mon, 26 Jul 1997 05:00:00 GMT"
004 %>
El contenido
Cuando el navegador recibe el contenido en XML, lo analizara para estructurar los datos
recibidos para que podamos tratarlos desde nuestra aplicación, para que esto funcione, el
contenido del documento deberá ser XML válido y por lo tando, deberá empezar con la
declaración de versión:
000 <?xml version="1.0"?>
Nota:
Debeis tener cuidado con la declaración de XML cuando trabajais con archivos PHP, porque
PHP interpreta <? como inicio de su código cuando tiene las short tags activadas.
Seguidamente podremos enviar los datos en formato XML correcto (podeis ver el curso de XML
o podeis utilizar el validador de XML del consorcio W3C), veamos un ejemplo:
000 <?xml version="1.0"?>

001 <xml>
002 <mensaje>
003 <color>#000000</color>
147
004 <texto>Texto del mensaje</texto>
005 </mensaje>
006 </xml>
Tratamiento de la respuesta AJAX

Una vez recibida la petición AJAX debemos saber interpretar los datos XML recibidos usando
JavaScript, para ello, utilizaremos responseXML en lugar de responseText, y podremos
empezar a parsear el XML recivido:
000 <script>
003 var xml = oXML.responseXML.documentElement;
004 // ...
005 }
006 }
007 </script>
Los ejemplos de este artículo los haremos pènsando en el siguiente xml:
archivo.xml
000 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
001 <xml>
002 <mensaje>
003 <texto>Ejemplo 1</texto>
004 </mensaje>
005 <mensaje>
006 <texto>Ejemplo 2</texto>
007 </mensaje>
008 </xml>
009
Acceso a un element o XML

A partir de este momento, la variable xml ( responseXML.documentElement ) será una
referencia al documento XML recibido, y nos permitirá el acceso a los datos enviados por el
servidor en forma de documento XML usando DOM.
Nota:
Para poder tratar los datos recibidos es importante conocer DOM. Antes de continuar puedes
consultar estos enlaces:
Introducción al DOM
Más información sobre DOM
Veamos un ejemplo de acceso a un elemento mensaje:
000 <script>
001 var item = xml.getElementsByTagName('mensaje')[0];
002 </script>
La función getElementsByTagName nos devuelve un array con todos los elementos con el
nombre de tag indicado, en este caso serán los elementos <mensaje>.
Podemos acceder a un elemento determinado poniendo un número entre parentesis cuadrados

(en el ejemplo accediamos al 0) o usar un bucle para recorrer todos los elementos:
000 <script>
148
001 for (i = 0; i < xml.getElementsByTagName('mensaje').length; i++){
002 var item = xml.getElementsByTagName('mensaje')[i];
003 }
004 </script>
Podremos también acceder a un subelemento de la misma manera:
000 <script>
002 var txt = item.getElementsByTagName('texto')[0];
003 </script>
Acceso al texto de un elemento

Para acceder al texto entre las etiquetas <texto> y </texto> usaremos firstChild.data sobre el
elemento:
000 <script>
002 var txt = item.getElementsByTagName('texto')[0];
003 alert(txt.firstChild.data)
004 </script>
Ejemplo completo
Este es el archivo del ejemplo que podeis ejecutar aquí y que utiliza lo explicado en este
artículo para parsear el XML anterior:
index.html
000 <html>
001 <head>
002 <title>ProgramaciónWeb - Ejemplo</title>
003 <script>
007 for (i = 0; i < xml.getElementsByTagName('mensaje').length; i++){
008 var item = xml.getElementsByTagName('mensaje')[i];
009 var txt = item.getElementsByTagName('texto')[0].firstChild.data;
010 alert(txt);
011 }
012 }
013 }
015 var obj;
019 try {
021 }
022 catch (e) {
024 }
025 }
026 return obj;
027 }
028
030 oXML.open('get', 'archivo.xml');
032 oXML.send('');
033 </script>
034 </head>
035 </html>
getElementsByTagName (metodo)
El método getElementsByTagName devuelve una lista de todos los subelementos del elemnto
actual que tienen un nombre determinado.
149
Utilización
aElementos = getElementsByTagName ( sNombre);
aElementos - Cadena de subobjetos del elemento.
sNombre - Nombre de los elementos que serán devueltos.
El parámetro sNombre puede contener una cadena de caracteres con el nombre de los
elementos que queremos ( por ejemplo div ) o el caracter especial asterisco ( * ) si queremos
que se nos devuelvan todos los nodos.
Ejemplo
Vamos a obtener el número elementos option de un campo select:
000 <select id="mi_select">

001 <option>1
002 <option>2
003 <option>3
004 </select>
006 
011 </script>
Mostrar los datos al usuario

Una vez hemos recibido y conocemos los datos que necesitamos del servidor, deberemos
mostrarlos al usuario de alguna manera.
En la mayoría de casos, lo que nos interesa, no es mostrar estos datos en un mensaje

emergente usando la función alert ( cómo hemos visto en los ejemplos anteriores de este
curso), sino que queremos mostrar los datos en la misma página que está viendo el usuario sin
usar refresco.
¿Dónde mostramos los datos?

Para mostrar estos datos, necesitamos un objeto HTML al que le podamos modificar su
contenido de manera que el usuario pueda verlo.
Normalmente aunque no siempre, usaremos un objeto div al que le podremos modificar su

contenido usando el atributo innerHTML:
000 <div id="miDiv1">Aquí aparecerán los datos</div>
¿Como mostramos los datos?

Para mostrar los datos que hemos obtenido en el div que hemos creado, primero accederemos
al objeto a través de su id ( miDiv1 en el ejemplo) usando el método getElementById y luego
podremos usar innerHTML para indicarle el contenido en formato HTML que tendrá este div en
su interior:
000 <script>
001 // Accedemos al DIV con getElementById
002 miDiv = document.getElementById('miDiv1');
003 // Modificamos su contenido
004 miDiv.innerHTML = '<b>Este es el nuevo contenido</b>';
005 </script>
La manera como pasaremos los datos recibidos del servidor al div, dependerá de cada caso,
pero vamos a ver un ejemplo que puede ser útil, imaginemos que tenemos esta lista de
usuarios en XML:
150
usuarios.xml
000 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
001 <xml>
002 <usuario>
003 <id>1</id>
004 <nombre>Eloi</nombre>
005 </usuario>
006 <usuario>
007 <id>2</id>
008 <nombre>Pedro</nombre>
009 </usuario>
010 <usuario>
011 <id>3</id>
012 <nombre>Juan</nombre>
013 </usuario>
014 </xml>
Vamos a suponer que hemos pedido estos datos al servidor y que hemos indicado como
readystatechange handler la función leerDatos, como vimos en el artículo Recibir la petición
AJAX y vamos a centrarnos en el contenido de dicha función para que muestre una lista de
usuarios con enlace a su perfil en el div que hemos creado con id miDiv1:
000 <script>
001 // Recibe y muestra los datos
003 // Comprobamos que se han recibido los datos
005 // Accedemos al XML recibido
007 // Accedemos al DIV
008 var miDiv = document.getElementById('miDiv1');
009 // Vaciamos el DIV
010 miDiv.innerHTML = '';
011 // Iteramos cada usuario
012 for (i = 0; i < xml.getElementsByTagName('usuario').length; i++){
013 // Accedemos al objeto XML usuario
014 var item = xml.getElementsByTagName('usuario')[i];
015 // Recojemos el id
016 var id = item.getElementsByTagName('id')[0].firstChild.data;
017 // Recojemos el nombre
018 var nombre = item.getElementsByTagName('nombre')[0].firstChild.data;
019 // Mostramos el enlace
020 miDiv.innerHTML += '<a href="/perfil/'+id+'/">'+nombre+'</a><br>';
021 }
022 }
023 }
024 </script>
Podeis ejecutar este ejemplo y ver su código fuente para ver como se muestran los datos en la
pantalla al cargar la página.
Editar
Envía tu artículo
Resolver dudas
Implementaciones de AJAX
Existen muchas implementaciones de AJAX muy interesantes que podemos encontrar por
Internet y nos facilitarán el desarrollo de aplicaciones con comunicación con el servidor.
Vamos a hacer una lista de las que consideramos más interesantes, las ordenaremos en dos
grupos librerías de cliente y librerías de cliente/servidor:
Librerías de cliente
Estas nos permiten trabajar fácilmente con llamadas al servidor y tratar los datos recibidos, la
151
ventaja de estas es que no dependen de un lenguaje de servidor pero por esta misma razón
suelen integrarse peor.
prototype - Esta interesante librería de JavaScript dispone de ( entre otros ) la clase Ajax, que
nos facilitarán muchisimo el trabajo en AJaX
Librerías de cliente/servidor
Este tipo de librerías nos permite hacer llamadas a funciones del servidor desde el cliente
usando unas funciones JavaScript autogeneradas a las que llamaremos proxies.
Ajax.NET Professional - Conocido como AjaxPro nos permite crear una proxy para llamar a
métodos .Net del servidor desde JavaScript.
xaJax - xaJax es un framework (marco de trabajo) escrito en PHP de código abierto que
permite crear fácilmente aplicaciones web que utilizan AJaX
XOAD - XOAD es un proxy de PHP usando XMLHttpRequest y JSON
Prototype - Funciones Ajax

Las funciones Ajax de Prototype, simplifican la comunicación Ajax con el servidor y la
inserción de los datos recibidos en el documento actual.
Lista de opciones:
Los constructores de las clases prototype que describimos a continuación pueden recibir las
siguientes opciones:
asynchronous ( true | false ) - Realizar la petición en modo síncrono o asíncrono, por defecto
true
contentType ( string ) - Tipo mime de la petición, por defecto 'application/x-www-form-

urlencoded'
encoding ( string ) - Codificación de caracteres de la petición, por defecto 'UTF-8'
method ( string ) - Método de la petición ( 'GET' o 'POST' )
parameters ( string o objeto ) - Parámetros como string tipo '?num=1&page=0' o tipo { 'num':1,
'page':0 }
postBody ( string ) - Cuerpo de la petición en caso de usar method 'POST' .
requestHeaders ( array u objeto ) - Parámetros HTTP adicionales de la petición como array u

objeto tipo { 'Accept':'text/javascript' }
Eventos ( función ) - Eventos sobre la petición: onComplete, onException, onFailure,

onInteractive, onLoaded, onLoading, onSuccess, onUninitialized y onNNN ( donde NNN
es un HTTP Status Code )
Lista de clases:
clase Ajax.PeriodicalUpdater
Realiza cada N segundos una petición AJAX y rellena el elemento HTML indicado con la
respuesta recibida.
Los parámetros del constructor son:

1 - ID del elemento HTML a rellenar
2 - URL de la petición
3 - Opciones de la lista de opciones anterior y estas dos específicas:
frequency ( entero ) - Tiempo en segundos entre peticiones
decay ( entero ) - El valor de frequency se multiplica por este cada vez que se recibe una
respuesta sin modificaciones respecto a la anterior.
000 new Ajax.PeriodicalUpdater('idMiElemento', '/elementos.php', {
001 method: 'get', frequency: 3, decay: 2
002 });
152
clase Ajax.Request
Realiza una petición AJAX.

2 - Opciones de la lista de opciones anterior.
000 new Ajax.Request( '/elementos.php' , {
001 method: 'get',
002 onSuccess: function(transport) {
003 alert ( transport.responseText ) ;
004 }
005 });
función Ajax.Responders.register
Permite registrar eventos comunes que se lanzarán cuando se produzca un determinado
evento para cualquier petición.

2 - Opciones de la lista de opciones anterior.
000 canalesAjax = 0;
001 Ajax.Responders.register({
002 onCreate: function() {
003 canalesAjax++;
004 alert ( canalesAjax ) ;
005 },
006 onComplete: function() {
007 canalesAjax--;
008 }
009 });
función Ajax.Responders.unregister
Cancela un evento registrado con Ajax.Responders.register
clase Ajax.Updater
Realiza una petición AJAX y rellena el elemento HTML indicado con la respuesta recibida.

1 - ID del elemento HTML a rellenar
3 - Opciones de la lista de opciones anterior y estas dos específicas:
evalScripts ( true | false ) - Ejecutar los <script> recibidos en la petición.
insertion ( objeto Insertion ) - Si se especifica, en lugar de reemplazar el contenido de 1 inserta
los datos en la posición indicada por el objeto.
000 new Ajax.Updater('idMiElemento', '/elementos.php', {

001 method: 'get',
002 insertion: Insertion.Bottom
003 });
xaJax – Introducción
xaJax es un framework (marco de trabajo) escrito en PHP de código abierto que permite crear
fácilmente aplicaciones web que utilizan AJaX sin necesidad siquiera de conocer JavaScript
(aunque sí que hay la posibilidad de hacer funciones en este lenguaje). Puedes bajarte el zip
desde aquí.
Qué permite hacer?
153
En una aplicación AJaX, el servidor crea una página que es enviada al cliente. Éste interactua
con la página (rellena formularios, hace clic en ciertos objetos) que disparan ciertos eventos
(onclick, onchange...) que llaman a funciones JavaScript. Estas funciones pueden o no
interactuar con el servidor (usando AJaX) y recibiendo información de éste, mostrándola al
usuario cambiando el contenido de la misma página.
Este tipo de páginas resultan muy útiles y son uno de los pilares de la Web 2.0. Aún así,
realizar un proyecto AJaX puede resultar muy costoso y largo; pero no siempre es así.
xaJax te permite escribir funciones en PHP que pueden ser accedidas cuando ya la página ha
estado enviada al navegador, cuando el usuario ha disparado un evento o la función PHP ha
sido llamada desde JavaScript. Éstas funciones PHP modifican el contenido o el aspecto de la
página, como lo podría hacer JavaScript, pero repito que se hacen desde PHP, lo que abre un
abanico de posibilidades: PHP puede acceder a bases de datos, al sistema de archivos... Y
todo sin recargar la página!!!
Instalación del zip

Para instalar la librería xaJax, debes abrir el zip que te descargas de la web de xaJax y
descomprimirlo conservando la estructura de las carpetas. Descomprímelo den de la carpeta
donde tienes la web en servidor local o remoto y cambiale el nombre de la carpeta
(normalmente el nombre xajax seguido del nombre de la versión) por solamente xajax.
La versión 0.2 del zip consta de tres scripts PHP: xajax.inc.php, que contiene la clase xajax,
xajaxResponse.inc.php, que contiene la clase xajaxResponse, y xajaxCompress.php, que es
una utilidad para, de cierta manera, reducir el peso de un archivo JavaScript. Contiene también,
en la carpeta xajax_js, dos archivos .js; uno que contiene el código original (el
xajax_uncompressed.js) y otro que es el que está comprimido y es el que se usa para enviar al
navegador (el xajax.js). Además de eso, también incorpora dos archivos .txt (la licencia y el
readme) y dos carpetas más (examples, con ejemplos de utilización y tests, donde puedes
probar xaJax).
Funcionamiento
Lo único que hay que hacer es hacer un require_once() al xajax.inc.php de la carpeta donde lo
has instalado en el servidor, local o remoto, y jugar con las posibilidades que te brindan los dos
objetos: xajax y xajaxResponse (éste integrado dentro de la función PHP).
Como he dicho antes, xaJax permitirá a una función JavaScript recibir una respuesta de una
función del servidor. Dicha respuesta estará en formato XML (como es habitual en AJaX) y será
interpretada por la misma función JavaScript que realizará los cambios en la página que se le
piden.
Así, la respuesta (en formato XML) dará unas instrucciones específicas tales como crea una
etiqueta div aquí, dale este formato y ponle este texto, elimina la etiqueta con el id tal, o haz
que se ejecute esta función JavaScript.
De cierta manera, el objeto xajaxResponse contiene la respuesta que realiza la función PHP y
el objeto xajax es el que recibe las peticiones de que se ejecuten las funciones, el que las
gestiona, al igual que todas las respuestas, y el que envia las respuestas en XML de vuelta al
navegador.
Por lo tanto, podemos distinguir dos partes en una página basada en xaJax: una parte sería
todo el código php que contiene las funciones y los objetos xajax y xajaxResponse (además de
todo el código necesario para que la web tenga un entorno dinámico) y otra parte que sería
todo lo que se ejecuta en el navegador.
Aquí tienes los tres artículos que derivan de este:

Funciones PHP en xaJax (lado del servidor)
El objeto xaJax (lado del servidor)
xaJax en el lado del cliente
154
Recursos y Enlaces
http://www.xajaxproject.org/ Web oficial, donde puedes descargar el zip (inglés).
http://wiki.xajaxproject.org/Documentation Documentación (inglés).
http://jvelazqu.glo.org.mx Traducción de un tutorial de la página oficial.
xaJax - Funciones PHP

Antes de leerte éste artículo, sería interesante que te leyeras antes éste tutorial de cómo
realizar una aplicación xaJax en 10 minutos. Una vez leído, puedes leerte éste que amplía en
gran medida el del link.
Las funciones xaJax son funciones escritas en PHP que son llamadas desde JavaScript. Estas
funciones tienen dos objetivos: interactuar con el servidor (por eso se ha llamado a ésta
función, para crear un usuario nuevo, para examinar los archivos que hay en un directorio...) y
devolver una respuesta XML que será enviada al navegador y interpretada por JavaScript.
Esta respuesta será hecha por el objeto xajaxResponse, el que se configurará con métodos y
creará el XML que será enviado al navegador.
El constructor del xajaxResponse consta de dos argumentos: la codificación (por defecto “utf-
8”) y un booleano que si es true muestra los caracteres especiales en el navegador y si es false
los oculta (por defecto, los oculta).
El xajaxResponse será el encargado de, una vez configurado por nosotros a partir de métodos,
crear una respuesta XML. Éste XML será el que tendrá de ser devuelto al navegador, y
interpretado por el JavaScript. Así que ya podemos hacer el esquema de una función xaJax:
000 function esquema(arg1, arg2...){

001
002 // Aquí iría el código destinado a realizar el primer objetivo
003 // de una función xaJax, el de interactuar con el servidor
004 // actuando con los argumentos de la función o lo que haga falta.
005
006 // Se crea un nuevo objeto xajaxResponse al que se le podrían
007 / pasar como atributos la codificación y el valor booleano que
008 // comentábamos antes.
009 $respuesta = new xajaxResponse();
010
011 // Aquí iría el código para modificar y configurar el objeto, y
012 // al mismo tiempo el XML
013
014 // Y finalmente retornamos la respuesta XML.
015 return $respuesta->getXML();
Nota:
Desde la versión 0.2, no hace falta llamar al método getXML() para retornar, tan solo hace falta
retornar el objeto xajaxResponse poniendo en este caso return $respuesta;
El código para modificar el xajaxResponse y en consecuencia la respuesta XML, está todo

basado en métodos del mismo objeto. Todos añaden un comando al XML que será
interpretado y ejecutado en el navegador por JavaScript.
Éstos comandos (escritos por métodos) permiten cantidad de cosas, todas orientadas a
cambiar el aspecto de la página. En las siguientes páginas de éste artículo hay una lista de
todos los métodos que los escriben (en la versión 0.2).
xaJax – El Objeto
En el capítulo anterior hablábamos de las funciones PHP xaJax que permiten modificar la
página web una vez ya cargada en el navegador. Éstas funciones, pero, han de ser recogidas
por un objeto xajax.
155
El constructor de éste objeto tiene cuatro argumentos.
$página_petición – Página a la cual se llamará para hacer la petición. Por defecto es la página
actual. Para cambiarla una vez creado el objeto, utiliza setRequestURI($página_petición).
$prefijo – Prefijo que precederá al nombre de las funciones JavaScript. Por defecto “xajax_”.
Para cambiarlo una vez construido el objeto, llama al método setWrapperPrefix($prefijo)
pasándole como argumento el prefijo deseado.
$codificación – Codificación que se usará para hacer las peticiones y respuestas. Por defecto
“utf-8”. Si quieres cambiarla una después de haber construido el objeto, usa el método
setCharEncoding($codificación) para cambiarla.
$debug – Booleano que indica si saldrá la ventana Xajax Debug Output. Por defecto false.
Para cambiar-lo una vez construido el objeto, usa el método debugOn() para activarlo y
debugOff() para desactivarlo.
Así que si creas un objeto xajax sin argumentos, sus variables cogerán los valores por
defecto.
Una vez creado y configurado el objeto, pasaremos a decirle qué funciones podrán ser
accesibles desde JavaScript (serán funciones en las que se cree el objeto xajaxResponse).
Nota:
Si quieres poner en las respuestas y peticiones acentos o caracteres especiales, habrás de
usar una condificación "iso-8859-1", pasándola como argumento al tercer argumento del
constructor o como argumento del método setCharEncoding("iso-8859-1"). También sería
interesante que usaras el método decodeUTF8InputOn() para pasar carácteres especiales en
los argumentos de las funciones xaJax.
En la otra página seguimos con los métodos del objeto xajax.
xaJax - En el lado del cliente

En capítulos anteriores mostrábamos cómo escribir funciones xaJax y como configurar el
objeto xajax para que estas funciones fueran accesibles desde JavaScript.
Una vez explicado esto ya podemos pasar a explicar como funciona el xaJax en el lado del
cliente. Resulta que el objeto xajax que hemos creado tiene un método que no hemos
explicado antes. Se trata del printJavascript($url, $archivo) que antes de enviar la página al
cliente escribe el código JavaScript necesario para hacer que todo funcione correctamente. En
su primer argumento le habrás de pasar la carpeta donde tienes instalado el xaJax, y si no has
modificado la carpeta del zip, no hará falta que modifiques su segundo argumento.
Y ya está, ahora ya puedes llamar a una función del servidor que modificará la página sin
recargarla tan sólo llamando a una función JavaScript. Aún así, tendrás que poner el prefijo
xajax_ (o el que hayas marcado en el constructor de xajax, ver capítulo anterior) seguido del
nombre de la función PHP.
Ejemplo
Esto es todo lo que voy a explicar sobre xaJax. Si te interesa el tema mírate la documentación
que aunque está en inglés se puede entender perfectamente, y si tienes alguna duda pregunta
en los foros y te responderé. Si el tema tiene éxito, puede que me anime a hacer algún artículo
más sobre xaJax, como por ejemplo a crear tus propias funciones JavaScript xaJax, pero ahora
vamos a poner todo lo que he explicado en práctica.
¿Nunca has visto en un formulario de registro en alguna web que al lado de el campo de texto
de usuario hay un link que te permite comprobar, antes de enviar el formulario, si el nombre de
usuario está libre o está ya en uso? De eso es de lo que trata el ejemplo.
156
Tenemos quatro campos, el del usuario, dos de contraseñas (el segundo para comprobarla) y
uno de e-mail. Todos ellos son fácilmente validables desde JavaScript; comprobando si el
usuario ha introducido la misma contraseña en los dos campos, comprobando que en el e-mail
hay una arroba, un punto, un nombre de dominio, que no hay ningún carácter especial... pero
en ningún momento podrás comprobar tan sólo con JavaScript si el nombre de usuario está ya
en la base de datos de usuarios de la web. Para eso se requiere AJaX, para hacer entre puente
entre el servidor y el cliente, y con xaJax lo podemos hacer mucho más fácil.
000 <?php
001 require_once('xajax/xajax.inc.php');
002
003 function compruebaUser($user){
004 $disponibilidad="$user está disponible.";
005 if($user=="LloX") $disponibilidad="$user no está disponible.";
006 $disponibilidad.=' <a href="" onclick="xajax_compruebaUser(document.form1.user.v
alue); return false;">Volver a probar</a>.';
007 $respuesta=new xajaxResponse();
008 $respuesta->addAssign("disp", "innerHTML", $disponibilidad);
009 return $respuesta;
010 }
011 $xajax=new xajax();
012 $xajax->setCharEncoding("iso-8859-1");
013 $xajax->decodeUTF8InputOn();
014 $xajax->registerFunction("compruebaUser");
015 $xajax->processRequests();
016 ?>
Éste sería todo el código que se ejecutaría en la parte del servidor. Lo primero que hacemos es
llamar a la librería xaJax, y luego escribimos una función llamada compruebaUser que
comprobará si el usuario que se le ha pasado como argumento está disponible o no, y, en
cualquier caso, devolver una respuesta XML que cambie el contenido de una capa llamada
“disp”, que se encontrará situada debajo del campo de texto. Configuraríamos también el objeto
xajax con la función compruebaUser. Le cambiaríamos la codificación para que se puedan usar
caracteres especiales en las transferencias. El artículo sigue en la siguiente página.
157
Lección 26. Seguridad en PHP
 Restringir el acceso,
 Distinción de usuarios
 Cookies
 Reporte con distinción de usuarios.
Restringir el acceso
Hay formar de restringir el acceso a las páginas, para que solo las personas autorizadas
puedan acceder a ciertas partes de nuestra sitio WEB.
El acceso restringido a páginas se logra usando las variables globales $PHP_AUTH_USER y

$PHP_AUTH_PW y $PHP_AUTH_TYPR solo funciona si PHP ha sido instalado como módulo de
Apache, si ha sido instalado como un CGI los ejemplos siguientes no funcionarán.
Para conseguir la autenticación en las páginas se usará el sistema de autenticación del

protocolo HTTP, este sistema se basa en las variables globales $PHP_AUTH_USER Y
$PHP_AUTH_PW.
1. $PHP_AUTH_USER. Nombre de usuario introducido.

2. $PHP_AUTH_PW. Contraseña introducida.
Ejemplo 1
Para que el navegador nos muestre la ventana de petición de nombre de usuario y contraseña
basta con enviar la siguiente cabecera:
<?php
if (!isset($PHP_AUTH_USER)) {
header('WWW-Authenticate: Basic realm="Mi reino"');
header('HTTP/1.0 401 Desautorizado');
echo 'Usted ha hecho click en el botón CANCELAR';
exit;
} else {
echo "<p>Hola USUARIO: <BLINK> $PHP_AUTH_USER </BLINK>.</p>";
echo "<p>Tu PASSWORD: <BLINK> $PHP_AUTH_PW </BLINK>.</p>";
}
?>
Este código muestra una ventana para ingresar el nombre de usuario y contraseña,
seguidamente muestra los datos introducidos, después de asignar a las variables,
$PHP_AUTH_USER y $PHP_AUTH_PW. Pero, si el usuario hace clic en el botón CANCELAR
este emite un mensaje alusivo a la acción de cancelar.
Ejemplo 2
En el siguiente ejemplo se pide autorización y se comprueba si el nombre de usuario es “kirme”

y la contraseña 123, si es así tendremos acceso al resto de la página.
<?php
if (($PHP_AUTH_USER!="kirme") || ($PHP_AUTH_PW!="123")) {
header('WWW-Authenticate: Basic realm="Acceso restringido"');
echo 'Acceso CANCELADO...';
exit;
}
?>
<center><br><br><br>
<body background="../imagenes/luces.gif ">
<font color="white"><h2>Ha conseguido el acceso a la
<BLINK> Zona restringida </BLINK></h2><BR><br></font>
<img src="../imagenes/madonna-britney.jpg" height=45% width=25%>
</body>
158
</center>
Distinción de usuarios
En la anterior página todo aquel que tenía acceso a la parte restringida entraba con el mismo
nombre de usuario y contraseña, esto evidentemente no es una buena solución, es mejor que
cada persona tenga un nombre de usuario y contraseña, ya que de esta forma podemos
inhabilitar a un usuario sin ver comprometida la seguridad de nuestro sito WEB.
En esta página se muestra la forma de realizar esto teniendo un fichero separado con los
nombres de usuario y las contraseñas válidas. Dicho fichero podría tener el siguiente formato:
nombre_de_usuario|contraseña.
Por ejemplo.
Nombre de archivo: user_pw.txt
kenny|12345
Arturo|54321
Zonia|gati45
Aldo|mir123
En este ejemplo se pide la autorización al comienzo de la página, si no se ha establecido con

anterioridad y se comprueba con el fichero de contraseñas que hemos llamado user_pw.txt,
si el nombre de usuario y contraseña coincide con alguna entrada del fichero se nos permite
ver el resto de la página.
<?php
if (!isset($PHP_AUTH_USER))
{
header('WWW-Authenticate: Basic realm="Diferenciando usuarios..."');
echo 'Acceso CANCELADO POR usted...';
exit;
}
$archivo = file("user_pw.txt");
$i = 0;
$validado = false;
while($archivo[$i] && !$validado)
{
$campo = explode("|", $archivo[$i]);
if(($PHP_AUTH_USER==$campo[0]) && ($PHP_AUTH_PW==chop($campo[1])))
$validado=true;
$i++;
}
if(!$validado)
{
header('WWW-Authenticate: Basic realm="Acceso restringuido..."');
echo 'CANCELADO POR usuario...';
exit;
}
?>
<center><br><br><br>
<body background="../imagenes/luces.gif ">
<font color="white"><h2>Ha conseguido el acceso a la
<BLINK> Zona restringida </BLINK></h2><BR><br> </font>
<img src="../imagenes/Horses_07.jpg" height=45% width=25%>
</body>
</center>
159
Cookie
La principal utilidad de las cookies (galletas) es la de solventar el problema de la falta de estado

en la navegación a través de las paginas web.
Con las cookies, pequeñas porciones de información se quedan registradas en el navegador

permitiendo identificar a este a través de diferentes páginas de un mismo sitio e incluso durante
visitas entre distintos días.
Realmente las cookies no son mas que cadenas de texto que son enviadas desde el servidor al
cliente (navegador) y almacenadas en este, luego el navegador envía estas cookies al servidor
permitiendo así la identificación del cliente en el servidor.
Funcionamiento
La cookie es enviada al navegador desde el servidor y si este la acepta permanece en él.
Las páginas piden la cookie al navegador...
El navegador las envía, permitiendo la identificación del usuario por parte del servidor.
Cómo usar las cookies

El manejo de cookies en PHP se realiza mediante el uso de la función setcookie, esta función
esta disponible a partir de la versión 3 de PHP.
int setcookie (string Nombre [, string Valor [, int Expire [, string Path [, string
Dominio [, int Secure]]]]])
Setcookie() define una cookie que es enviada junto con el resto de la información de la
cabecera(header). Las cookies deben ser enviadas antes de cualquier tag de html, por lo
tanto deberemos realizar la llamada a estas funciones antes de cualquier tag <HTML> o
<HEAD>. Esta es una restricción de las cookies no de PHP.
Todos los argumentos excepto el nombre son opcionales.
 Nombre. Nombre de la cookie. Si creamos una cookie solamente con el nombre, en el

cliente se eliminara la cookie que exista con ese nombre. También podemos
reemplazar cualquier argumento con una cadena vacía ("").
 Value. Valor que almacenará la cookie en el cliente.
 Expire. El argumento expire es un argumento entero que indica la hora en que se
eliminara la cookie en el formato de hora que devuelven las funciones UNIX time() y
mktime(). Normalmente se usa time() + N. segundos de duración, para
especificar la duración de una cookie.
 Path. Subdirectorio en donde tiene valor la cookie.
 Dominio. Dominio en donde tiene valor la cookie. Si ponemos como dominio
www.domain.com la cookie no se transmite para domain.com, mientras que si
160
ponemos domain.com la cookie se transmite tanto para domain.com como para
www.domain.com
 Secure. El argumento secure indica que la cookie solo se transmitirá a través de una
conexión segura HTTPS.
Ejemplo
setcookie("usuario", "Luis", time()+3600,"/","webestilo.com");
En este ejemplo establecemos una cookie de nombre usuario que contiene el valor Luis, que
dura 1 hora (3600 segundos) válida para todo el dominio webestilo.com
Ejemplo.
En este ejemplo se observa diferentes modos de crear, imprimir e eliminar las cookies.
Creando
<?php
$valor = ' Este en mi cookie para ti ';
setcookie("Cookie_Prueba1", $valor);
setcookie("Cookie_Prueba2", $valor, time()+3600); /* expirar en 1 hora */
setcookie("Cookie_Prueba3", $valor, time()+3600, "/~rasmus/",
".example.com", 1);
?>
Imprimiendo en diferentes modos
<?php
echo "<BLINK> Primer </BLINK> modo de imprimir <br>";
echo $_COOKIE["Cookie_Prueba1"]."<br>";
echo $_COOKIE["Cookie_Prueba2"]."<br>";
echo $_COOKIE["Cookie_Prueba3"]."<br><br>";
echo "<BLINK> Segundo </BLINK> modo de imprimir <br>";

echo $HTTP_COOKIE_VARS["Cookie_Prueba1"]."<br>";
echo $HTTP_COOKIE_VARS["Cookie_Prueba2"]."<br>";
echo $HTTP_COOKIE_VARS["Cookie_Prueba3"]."<br><br>";
echo "<BLINK> Tercer </BLINK> modo de imprimir <br>";

print_r($_COOKIE);
?>
Eliminando (solo hay que dejar vacio el valor en la definición de las cookies)
<?php
setcookie ("Cookie_Prueba1", "");
setcookie ("Cookie_Prueba2", "", time() - 3600);
setcookie ("Cookie_Prueba3", "", time() - 3600, "/~rasmus/", ".example.com",
1);
?>
Actividad.
 Definir una aplicación que permita crear cookies. Detalle:
- La primera página debe tener un formulario para ingresar el nombre, valor y parámetros para
la cookie.
- La segundo página debe crear las cookies e emitir un resumen.
- La tercera página debe mostrar una lista de todas las cookies existentes, acompañado de un
check que permita seleccionar para eliminar.
- La cuarto página elimina las cookies seleccionadas.
 Crear una aplicación que permita definir dos cookies y dar un reporte todo en una sola página.
 Crear una aplicación para ejecutar una matriz asociativa de cookies.
 Definir una cookie para el proyecto.
 Cookies: Definir, imprimir y eliminar
 Reportes con distinción de usuarios
161
Los ejemplos que se dan son parte del proyecto denominado “proyecto_VentaArticulos”.
Definir una cookie para el proyecto.
Archivo : frames.php
Ubicación : carpeta “proyecto_VentaArticulos”
Observación: No dejar espacio, comentario ni código alguno antes de definir las cookies.
<?php
$valor = ' Visitas ';
setcookie("Cookie_Prueba1", $valor);
setcookie("Cookie_Prueba2", $valor, time()+3600); /* expirar en 1 hora */
setcookie("Cookie_Prueba3", $valor, time()+3600, "/~rasmus/", ".example.com", 1);
?>
<?php
///////////////////// Incluyecdo fichero externo ///////////////////
include("funciones_PHP/funcion_conexion.ini.php");
///////////////////// Obteniendo resultados de funciones de fichero externo ///////////////////

$miConexion = conexion(); ///Verifica usuario de conexión a MySQL y existencia de BD
$codOper = verificarOperador(); //Verifica operador con login y password registrado en BD
//$losPerm = verificarPermisos(); //Verifica el: Permiso, Estado y Tipo del operador (Array)
if ($codOper>0)
{
?>
<html>
<head>
<title>Página de inicio</title>
</head>
<frameset rows="120,*" border=1>
<frame src="superior.php" scrolling=no noresize>
<frameset cols="200,*">
<frame src="menu.php" scrolling=yes noresize>
<frame src="blanco.php" name="blanco" scrolling=yes noresize">
</frameset>
</frameset>
</html>
<?php
}
?>
Cookies: Definir, imprimir y eliminar
El ejemplo muestra la definición, impresión y eliminación de cookies.
Archivo : cookies_con_html_1nombre.php
Ubicación : carpeta “seguridad”
<body>
Introduzca:
<FORM ACTION="cookies_con_html_2enviar.php" METHOD="POST">
Nombre cookie: <INPUT TYPE="text" NAME="Nombre"><BR>
Valor cookies: <INPUT TYPE="text" NAME="Valor"><BR>
<INPUT TYPE="submit" VALUE="Enviar">
</FORM>
</body>
Archivo : cookies_con_html_2enviar.php
<?php
setcookie($_POST['Nombre'], $_POST['Valor'], time()+3600, "/", "");
?>
<body>
Nombre de cookie: <BLINK><? echo $_POST['Nombre']; ?></BLINK> <br>
Valor de cokie: <BLINK><? echo $_POST['Valor']; ?></BLINK> <br>
que será válida durante una hora.
162
</body>
Archivo : cookies_con_html_3imprimir.php
<form name="form1" method="post" action="cookies_con_html_4eliminar.php">

<?php
foreach ($_COOKIE as $nombre => $valor)
{
echo "<input type='checkbox' name='check[]' value='$nombre'>";
echo " $nombre:__ $valor <br>";
}
?>
</form>
Archivo : cookies_con_html_4eliminar.php
<?php
$a = $_POST['check']; // var_dump($a);
for($i=0; $i<count($a); $i++)

{
$n = chop($a[$i]); //echo $n."<br>";
setcookie("$n","");
}
?>
Reportes con distinción de usuarios
Archivo : r02_productos_mas_vendidos.php
Ubicación : carpeta “reportes”
Observación: Modificar los hipervínculos del archivo menu.php a los reportes.
<?php
////////////// Distinción de usuarios ///////////////////////
if (($PHP_AUTH_USER!="reporte2") || ($PHP_AUTH_PW!="123")) {
exit;
}
$sql = "SELECT o.codArt, desArt, sum(catOrd) as suma, count(o.codArt) as conteo ";

$sql.= "FROM orden o, articulo a ";
$sql.= "WHERE o.codart=a.codArt ";
$sql.= "GROUP BY o.codArt ";
$sql.= "ORDER BY suma desc ";
$sql.= "LIMIT 5";
$r = mysql_query($sql, $miConexion) or die('ERROR en SQL prods vendidos.
'.mysql_error()."<a href = 'r01_buscar.php'> Regresar...</a>");
?>
<center>
<br>
<b><h2>Los 5 productos más vendidos </h2></b>
<tr>
<?php
for($i=0; $i<$c; $i++ )
{
163
}
?>
</tr>
<?php
for($j=0; $j<$f; $j++ )
{
echo "<tr>";
for($k=0; $k<$c; $k++)
{
echo "<td>".mysql_result($r, $j, $k)."</td>";
}
echo "</tr>";
}
?>
</table>
</body>
</center>
Archivo : r03_clientes_deudores.php
<?php
exit;
}
$sql = "SELECT nomCli, SUM(catOrd) deuda ";

$sql.= "FROM cliente c, orden o, detallecliente d ";
$sql.= "WHERE o.codCli = c.codCli AND o.codCli = d.codCli AND tipOrd='CRED.' AND estCivDet='S' ";
$sql.= "GROUP BY nomcli ";
$sql.= "ORDER BY deuda desc ";
$r = mysql_query($sql, $miConexion) or die('ERROR en SQL deudas.
?>
<center>
<br>
<b><h2>Clientes deudores </h2></b>
<tr>
<?php
for($i=0; $i<$c; $i++ )
{
}
?>
</tr>
<?php
for($j=0; $j<$f; $j++ )
{
echo "<tr>";
for($k=0; $k<$c; $k++)
{
164
}
echo "</tr>";
}
?>
</table>
</body>
</center>
Archivo : r04_clientes_articulo_dep.php
<?php
exit;
}
$sql = "SELECT nomCli, estCivDet, afiDet, desArt ";

$sql.= "FROM cliente c, detallecliente d, articulo a, orden o ";
$sql.= "WHERE o.codCli=d.codCli AND c.codCli = o.codCli AND a.codArt=o.codArt AND estCivDet='S' ";
$sql.= "ORDER BY nomCli ";
$r = mysql_query($sql, $miConexion) or die('ERROR en SQL deudas.
?>
<center>
<br>
<b><h2>Clientes solteros, deportistas y productos que compran </h2></b>
<tr>
<?php
for($i=0; $i<$c; $i++ )
{
}
?>
</tr>
<?php
for($j=0; $j<$f; $j++ )
{
echo "<tr>";
for($k=0; $k<$c; $k++)
{
}
echo "</tr>";
}
?>
</table>
</body> </center>
165
Sesiones en PHP: Definición y funciones
 Sesiones, formas de almacenar datos
 Definción y funciones de sesiones
 Aplicaciones desarrolldas
 Carrito de compra
 Uso de registros globales
 Proyecto. Incluir el carrito de compra con Ajax
Sesiones
Las sesiones basicamente son varibles globales que nos permiten almacenar datos que
necesiten volver a ser usados en otros accesos a la pagina.
Si queremos almacenar valores en unas determinadas variables y que dichos valores

permanezcan a lo largo de una visita sin necesidad de ir enviando formularios ni enviando
variables por la URL, el método más cómodo son las sesiones.
Formas de almacenar datos

Recordemos que existen tres formas de almacenar la información de las variables que
posteriormente en la misma página o en las otras páginas se pueden procesar:
 POST: Envía los datos de forma “oculta” en la cabecera de la página y requiere de un
formulario para enviar las variables.
 GET: Envía la información en la URL. Tiene la ventaja de poder enlazar directamente con
los valores de las variables. Limitación de capacidad y falta de confidencialidad.
 SESIONES: Gracias a las sesiones podremos almacenar el valor de variables cuyo
contenido se preservará a lo largo de toda la visita.
Por ejemplo, cuando queremos almacenar el nombre de usuario y la contraseña de una

persona a lo largo de su recorrido por la web. Podríamos ir enviando dichos valores mediante
el método GET pero tanto el nombre de usuario y la contraseña saldrían visibles en la URL
destino. Para asegurar confidencialidad y seguridad, se usan las sesiones.
Definción y funciones de sesiones

Para trabajar con sesiones siempre debe tener en cuenta:
 Nunca poner nada que imprima algo en pantalla antes que session_start(), ni siquiera
un espacio antes de <?php
 Al principio puede iniciar con session_start(), indica a la página web en concreto que, en
ese fichero HTML queremos usar las variables almacenadas en la sesión.
 Al principio también puede iniciar solo con session_register(„nombre_variable‟), con
esta orden se esta registrando las variables que se usaran.
 session_register(„nombre_variable‟); este define las variables que se usaran.
 Usar $_SESSION[‟nombre_variable‟] o $HTTP_SESSION_VARS[‟nombre_variable‟]
que son variable para manejar las variables de sesión.
 session_id(); devuelve el identificador de la sesión actual.
 Usar la variable reservada $PHP_SELF, que hace referencia al propio script en
ejecución.
 $SID, es la constante propia de PHP4, este contiene el nombre de la sesión y el
identificador de la misma.
 session_name(); función para averiguar el nombre de la sesión o modificarlo. La
asignación del nombre de sesión debe realizarse antes que ninguna otra función con
sesiones, antes que session_start() o session_register().
166
 Usar unset($_SESSION['Nombre_variable']); para borrar el nombre de una
determinada variable de sesión.
 Usar session_unset(); para eliminar todas las variables de la sesión.
Ejemplo 1
Las páginas muestran el uso de la variable denominado “variable_1” en las páginas
especificadas sin que esta sea envia por formularios. Detalle:
La primera pagina (pag1.php) inicializa la variable con la palabra “Hola”.

La segunda página (pag2.php) imprime el texto “Hola” y concatena con otro texto “_Mundo”.
La tercera página (pag3.php) imprime “Hola_Mundo” y pasa a la segunda página donde
vuelve a repetir el mismo proceso de imprimir y concatenar.
Archivo pag1.php
<?php
session_start();
$_SESSION['variable_1'] = 'Hola';
?>
<html>
<body>
<br> <BLINK> Primera </BLINK> Página
<br> <a href='pag2.php'>Ir a la SEGUNDA página</a>
</body>
</html>
Archivo pag1_otro_modo.php
<?php
session_start();
$variable_1 = 'Hola';
session_register('variable_1');
?>
<html>
<body>
</body>
</html>
Archivo pag2.php
<?php
session_start();
echo $_SESSION['variable_1'];
$_SESSION['variable_1'].='_Mundo'; // Concatenando
?>
<html>
<body>
<br> <BLINK> Segunda </BLINK> Página
<br> <a href='pag3.php'>Pasar a TERCERA página</a>
</body>
</html>
Archivo pag3.php
<?php
session_start();
echo $_SESSION['variable_1'];
?>
<html>
<body>
<br> <BLINK> Tercera </BLINK> Página
</body>
</html>
Ejemplo 2
La pagina muestra el uso de varias variables previamente registrados en diferentes páginas.
Detalle:
La primera pagina (pagina1.php) obtiene: codOper, nombre, login, clave y permisos de la tabla
operadores al conectarse a la bases de datos de los cuales algunos son registrados para
usarlos en diferentes páginas.
167
La segunda página (pagina2.php) imprime todas las variables registradas y borra algunas
variables de dos modos diferentes.
La tercera página (pagina3.php) imprime todas las variables registradas restantes y borra todas
las variables de tal manera que cuando pasa a la página2.php ya no imprime nada.
Archivo pag1.php
<?php
session_start();
$Operador = "erika";
$Clave = "erika";
$sql = "SELECT * FROM operadores WHERE login='$Operador' AND clave='$Clave'";

$r = mysql_query($sql, $miConexion) or die('ERROR en SQL. '.mysql_error()."
<a href = 'pagina1.php'> Regresar...</a>");
while($a = mysql_fetch_array($r))
{
$Codigo_operador = $a['codoper'];
$Nombre_operador = $a['nombre'];
$Login_operador = $a['login'];
$Clave_operador = $a['clave'];
$Permisos_operador = $a['permisos'];
$Estado_operador = $a['estado'];
}
//session_register('Codigo_operador'); // Quitar comentario
session_register('Nombre_operador');
//session_register('Login_operador'); // Quitar comentario
session_register('Clave_operador', 'Permisos_operador', 'Estado_operador');
?>
<html>
<body>
<br> <a href='pagina2.php'>Ir a la SEGUNDA página</a>
</body>
</html>
Archivo pagina2.php
<?php
session_start();
echo "Codigo Operador: ".$HTTP_SESSION_VARS['Codigo_operador']."<br>";
echo "Nombre Operador: ".$HTTP_SESSION_VARS['Nombre_operador']."<br>";
echo "Login Operador: ".$HTTP_SESSION_VARS['Login_operador']."<br>";
echo "Clave Operador: ".$HTTP_SESSION_VARS['Clave_operador']."<br>";
echo "Permisos Oper: ".$HTTP_SESSION_VARS['Permisos_operador']."<br>";
echo "Estado Operador: ".$HTTP_SESSION_VARS['Estado_operador'];
unset($HTTP_SESSION_VARS['Estado_operador']); // Elimina una variable de la sesión;

unset($_SESSION['Permisos_operador']); // Elimina una variable de la sesión;
?>
<html>
<body>
<br> <BLINK> Segunda </BLINK> Página
<br> <a href='pagina3.php'>Pasar a TERCERA página</a>
</body>
</html>
Archivo pagina3.php
<?php
session_start();
echo "Codigo Operador: ".$_SESSION['Codigo_operador']."<br>";
echo "Nombre Operador: ".$_SESSION['Nombre_operador']."<br>";
echo "Login Operador: ".$_SESSION['Login_operador']."<br>";
echo "Clave Operador: ".$_SESSION['Clave_operador']."<br>";
echo "Permisos Oper: ".$_SESSION['Permisos_operador']."<br>";
echo "Estado Operador: ".$_SESSION['Estado_operador'];
session_unset(); // Elimina o borra todas las variables;

session_destroy(); // Finalmente, destruye la sesión
?>
<html>
<body>
<br> <BLINK> Tercera </BLINK> Página
168
<br> <a href='pagina2.php'>Ir a la SEGUNDA página</a>
</body>
</html>
Ejemplo 3.
El ejemplo. Muestra un contador de páginas visitadas en una sola página.
<?php
echo '<a href="'.$PHP_SELF.'"><br>';
echo 'Contador: '.++$_SESSION['variable_1']. '</a>';
?>
Otro equivalente
<?php
echo '<a href="'.$PHP_SELF.'?'.$SID.'"><br>';
echo 'Contador: '.++$_SESSION['variable_2']. '</a>';
?>
Ejemplo 4.
El ejemplo. Muestra un contador de páginas visitadas en diferentes páginas.
Archivo cuenta_paginas_1.php
<? session_start();
if (!isset($_SESSION["cuenta_paginas"])) {
$_SESSION["cuenta_paginas"] = 1;
} else {
$_SESSION["cuenta_paginas"]++;
}
?>
<body>
<br> <BLINK> Primera </BLINK> página WEB
<? echo "Visita No. ".$_SESSION["cuenta_paginas"]; ?>
<br> <a href='cuenta_paginas_2.php'> Pasar a SEGUNDA página </a>
</body>
Archivo cuenta_paginas_2.php
<? session_start();
if (!isset($_SESSION["cuenta_paginas"])) {
$_SESSION["cuenta_paginas"] = 1;
} else {
$_SESSION["cuenta_paginas"]++;
}
?>
<body>
<br> <BLINK> Segunda </BLINK> página WEB
<? echo "Visita No. ".$_SESSION["cuenta_paginas"]; ?>
<br> <a href='cuenta_paginas_1.php'> Pasar a PRIMERA página </a>
</body>
Ejemplo 5.
La primera página inicia una variable y la segunda página verifica si en la primera se ha iniciado.
<?
session_start();
if($_SESSION['acceso2']==true) {
echo "OK, tienes el acceso permitido";
}
else {
echo "Error, no tienes permiso.";
}
?>
Ejemplo 6.
La primera página muestra la declaración del nombre de la variable para luego mostrarlo.
<?php
session_name('miSesion');
echo '<a href="'.$PHP_SELF.'?'.$SID.'">';
echo 'Contador: '.++$_SESSION['variable_3'].'</a><br>';
echo 'Ahora el nombre es '.session_name().' y la sesión '.$miSesion.'<br>';
?>
169
Carrito de compra
Las sesiones tienen mucha utilidad, por ejemplo para un carrito de compra. El ejemplo muestra
como hacer compra de devirsos productos sin la necesidad de conectarse permanentemente a
la base de datos.
1 <?php
2 session_start();
3 session_register('itemsEnCesta'); // Registrando variable
4 $item=$_POST['item']; // Producto
5 $cantidad=$_POST['cantidad']; // Cantidad
6 $itemsEnCesta=$_SESSION['itemsEnCesta']; // Variable sesión
7
8 if ($item)
9 {
10 if (!isset($itemsEnCesta))
11 {
12 $itemsEnCesta[$item]=$cantidad;
13 }
14 else
15 {
16 foreach($itemsEnCesta as $k => $v)
17 {
18 if ($item==$k)
19 {
20 $itemsEnCesta[$k]+=$cantidad;
21 $encontrado=1;
22 }
23 }
24 if (!$encontrado) $itemsEnCesta[$item]=$cantidad;
25 }
26 }
27 $_SESSION['itemsEnCesta']=$itemsEnCesta;
28 ?>
29
30 <html>
31 <body>
32 <form action="<?=$PHP_SELF."?".$SID?>" method="post">
33 Dime el producto <input type="text" name="item" size="20"><br>
34 Cuantas unidades <input type="text" name="cantidad" size="20"><br>
35 <input type="submit" value="Añadir a la cesta"><br>
36 </form>
37 <?
38 if (isset($itemsEnCesta))
39 {
40 echo'El contenido de la cesta de la compra es:<br>';
41 foreach($itemsEnCesta as $k => $v)
42 {
43 echo 'Artículo: '.$k.' Unidades: '.$v.'<br>';
44 }
45 }
46 ?>
47 </body>
48 </html>
En la línea 8 comprobamos si el usuario ha pasado algún artículo, desde el formulario. En la 9

si el array itemsEnCesta no existe, lo creamos con el nuevo producto y la cantidad indicada. Si
el array existe recorremos su contenido, entre las líneas 16 y 23, y si encontramos un artículo
igual, añadimos la cantidad en la línea 20. Si no lo encontramos, es un nuevo artículo, por lo
tanto, añadimos el nuevo producto con la correspondiente cantidad a itemsEnCesta en la linea
24.
Y a continuación se imprime el formulario y los resultados, si los hubiera, a partir de la linea 30,
donde empieza el HTML.
Carrito de compra con conexión a base de datos.

<?php
session_start();
session_register('itemsEnCesta'); // Registrando variable
$item=$_POST['item']; // Producto
$cantidad=$_POST['cantidad']; // Cantidad
170
$itemsEnCesta=$_SESSION['itemsEnCesta']; // Variable sesión
if ($item)
{
if (!isset($itemsEnCesta))
{
$itemsEnCesta[$item]=$cantidad;
}
else
{
foreach($itemsEnCesta as $k => $v)
{
if ($item==$k)
{
$itemsEnCesta[$k]+=$cantidad;
$encontrado=1;
}
}
if (!$encontrado) $itemsEnCesta[$item]=$cantidad;
}
}
$_SESSION['itemsEnCesta']=$itemsEnCesta;
include('../funciones_PHP/funcion_resumen.ini.php');
$sql = "SELECT * FROM articulo ORDER BY codArt";

$r = mysql_query($sql, $miConexion) or die("ERROR en SQL... ".mysql_error());
?>
<html>
<body>
<form action="<?=$PHP_SELF."?".$SID?>" method="post">
Dime el producto
<select name="item">
<?php
{
$cc=$a['codArt'];
$dd=$a['desArt'];
echo "<option value='$cc'> $cc $dd";
}
?>
</select>
<br>
Cuantas unidades <input type="text" name="cantidad" size="20"><br>
<input type="submit" value="Añadir a la cesta"><br>
</form>
<?
if (isset($itemsEnCesta))
{
echo'El contenido de la cesta de la compra es:<br>';
foreach($itemsEnCesta as $k => $v)
{
echo 'Artículo: '.$k.' Unidades: '.$v.'<br>';
}
}
?>
</body>
</html>
171
Lección 27. Funciones del Sistema de Archivos
 Modos de apertura de archivos
 Funciones: fopen, feof, fgets, fwrite, fclose, fseek, realfile, etc.
 Trabajo con buffer
 Funciones: ob_start, ob_end_flush, ob_get_contents, etc.
 Proyecto. Reporte con funciones de sist. de archivos.
Introducción
PHP proporciona diferentes funciones para el sistema de archivos. Estas funciones permiten
manipular los archivos como copiar, lectura, escritura, tamaño, etc.
Configuración en tiempo de ejecución
El comportamiento de estas funciones está afectado por los valores definidos en php.ini.
Opciones de Configuración del Sistema de Archivos y Secuencias

Nombre Predeterminado Modificable Cambios
PHP_INI_ALL en PHP <= 4.3.4.
allow_url_fopen "1" PHP_INI_SYSTEM
Disponible desde PHP 4.0.4.
user_agent NULL PHP_INI_ALL Disponible desde PHP 4.3.0.
default_socket_timeout "60" PHP_INI_ALL Disponible desde PHP 4.3.0.
from "" PHP_INI_ALL
auto_detect_line_endings "0" PHP_INI_ALL Disponible desde PHP 4.3.0.
allow_url_fopen boolean
Esta opción habilita las envolturas fopen tipo URL que le permiten acceder a objetos
URL como archivos.
Nota: Este parámetro puede ser definido únicamente en php.ini debido a razones de
seguridad.
Nota: Esta opción fue introducida inmediatamente después del lanzamiento de la
versión 4.0.3.
user_agent string
Definir el agente de usuario que PHP envía.
default_socket_timeout integer
Tiempo de espera predeterminado (en segundos) para secuencias basadas en sockets.
Nota: Esta opción de configuración fue introducida en PHP 4.3.0
from string
Definir la contraseña de ftp anónimo (su dirección de correo electrónico).
auto_detect_line_endings boolean
Cuando está habilitada esta opción, PHP examina los datos leídos por fgets() y file()
para ver si está usando convenciones de final de líneo tipo Unix, MS-Dos o Macintosh.
Esto le permite a PHP interoperar con sistemas Macintosh, pero tiene un valor
predeterminado de Off, ya que hay un impacto ligero de rendimiento cuando se
detectan las convenciones EOL para la primera línea, y también porque las personas
que usen retornos de carro como separador de elementos bajo sistemas Unix
percibirían un comportamiento que no es compatible con versiones anteriores.
Nota: Esta opción de configuración fue introducida en PHP 4.3.0
172
Veamos el significado y uso de funciones
basename -- Devuelve la parte del path correspondiente al nombre del archivo

chgrp -- Cambia el grupo de un archivo
chmod -- Cambia permisos de un archivo
chown -- Cambia el propietario de un archivo
copy -- Copia un archivo
delete -- Vea unlink() o unset()
dirname -- Devuelve la parte del path correspondiente al directorio
disk_free_space -- Devuelve el espacio disponible en el directorio
disk_total_space -- Devuelve el tamaño total de un directorio
diskfreespace -- Alias de disk_free_space()
fclose -- Cierra el apuntador a un archivo abierto
feof -- Verifica si el apuntador a un archivo está al final del archivo
fflush -- Vacía la salida hacia un archivo
fgetc -- Obtiene un caracter del archivo apuntado
fgetcsv -- Obtiene una linea del archivo apuntado y extrae los campos CSV
fgets -- Obtiene una línea desde el apuntador de archivo
fgetss -- Obtiene una lína desde el apuntador de archivo y elimina las etiquetas HTML
file_exists -- Verifica si un archivo o directorio existe
file_get_contents -- Lee un archivo entero en una cadena
file_put_contents -- Escribir una cadena sobre un archivo
file -- Lee un archivo entero hacia una matriz
fileatime -- Obtiene la hora del último acceso al archivo
filectime -- Obtiene la hora de modificación del inode del archivo
filegroup -- Obtiene el grupo del archivo
fileinode -- Obtiene el inode del archivo
filemtime -- Obtiene la hora de modificación del archivo
fileowner -- Obtiene el dueño del archivo
fileperms -- Obtiene los permisos del archivo
filesize -- Obtiene el tamaño del archivo
filetype -- Obtiene el tipo de archivo
flock -- Aviso de bloqueo de archivos portable
fnmatch -- Comparar un nombre de archivo contra un patrón
fopen -- Abre un archivo o URL
fpassthru -- Imprime todos los datos restantes en un apuntador de archivo
fputcsv -- Formatea la línea como CSV y la escribe en el archivo apuntado
fputs -- Alias of fwrite()
fread -- Lectura de archivos segura con material binario
fscanf -- Procesa la entrada desde un archivo de acuerdo a un formato
fseek -- Realiza una búsqueda sobre un apuntador de archivo
fstat -- Obtiene información sobre un archivo usando un apuntador de archivo abierto
ftell -- Indica la posición de lectura/escritura del apuntador de archivo
ftruncate -- Trunca un archivo a la longitud dada
fwrite -- Escritura sobre archivos, segura con material binario
glob -- Encontrar nombres de ruta coincidentes con un patrón
is_dir -- Indica si el nombre de archivo es un directorio
is_executable -- Indica si el archivo es ejecutable
is_file -- Indica si el archivo es un archivo regular
is_link -- Indica si el archivo es un enlace simbólico
is_readable -- Indica si es posible leer el archivo
is_uploaded_file -- Indica si un archivo fue cargado a través de HTTP POST
is_writable -- Indica si el nombre de archivo es escribible
is_writeable -- Alias of is_writable()
link -- Crea un enlace duro
linkinfo -- Consigue información sobre un enlace
lstat -- Entrega información sobre un archivo o enlace simbólico
mkdir -- Crea un directorio
move_uploaded_file -- Mueve un archivo cargado a una nueva ubicación
parse_ini_file -- Procesar un archivo de configuración
pathinfo -- Devuelve información sobre la ruta de un archivo
173
pclose -- Cierra un apuntador de archivo de proceso
popen -- Abre un apuntador de archivo de proceso
readfile -- Imprime un archivo
readlink -- Devuelve el objetivo de un enlace simbólico
realpath -- Devuelve el nombre de ruta absoluto simplificado
rename -- Renombra un archivo o directorio
rewind -- Retroceder la posición de un apuntador de archivo
rmdir -- Elimina un directorio
set_file_buffer -- Alias of stream_set_write_buffer()
stat -- Entrega información sobre un archivo
symlink -- Crea un enlace simbólico
tempnam -- Crear un archivo con un nombre único
tmpfile -- Crea un archivo temporal
touch -- Establece la hora de acceso y modificación de un archivo
umask -- Cambia la umask actual
unlink -- Elimina un archivo
Descripcion de las funciones
fopen -- Abre un archivo o URL

resource fopen ( string nombre_archivo, string modo [, bool usar_ruta_inclusion [,
resource contexto_z]] )
Lista de modos posibles para fopen()

modo Descripción
'r' Apertura para sólo lectura; ubica el apuntador de archivo al comienzo del mismo.
'r+' Apertura para lectura y escritura; ubica el apuntador de archivo al comienzo del mismo.
Apertura para sólo escritura; ubica el apuntador de archivo al comienzo de éste y lo trunca
'w'
a una longitud de cero. Si el archivo no existe, intenta crearlo.
Apertura para lectura y escritura; ubica el apuntador de archivo al comienzo de éste y lo
'w+'
trunca a una longitud cero. Si el archivo no existe, intenta crearlo.
Apertura para sólo escritura; ubica el apuntador de archivo al final del mismo. Si el archivo
'a'
no existe, intenta crearlo.
Apertura para lectura y escritura; ubica el apuntador de archivo al final del mismo. Si el
'a+'
archivo no existe, intenta crearlo.
Creación y apertura para sólo escritura; ubica el apuntador de archivo al comienzo de éste. Si el
archivo ya existe, la llamada a fopen() fallará devolviendo FALSE y generando un error de nivel
'x' E_WARNING. Si el archivo no existe, intenta crearlo. Esto es equivalente a especificar las banderas
O_EXCL|O_CREAT en la llamada de sistema open(2) interna. Esta opción es soportada en PHP 4.3.2
y versiones posteriores, y sólo funciona con archivos locales.
Creación y apertura para lectura y escritura; ubica el apuntador de archivo al comienzo de éste. Si el
archivo ya existe, la llamada a fopen() fallará devolviendo FALSE y generando un error de nivel
'x+' E_WARNING. Si el archivo no existe, intenta crearlo. Esto es equivalente a especificar las banderas
O_EXCL|O_CREAT en la llamada de sistema open(2) interna. Esta opción es soportada en PHP 4.3.2
y versiones posteriores, y sólo funciona con archivos locales.
Ejemplo 1.
Lectura del archivo fgets.txt ubicada en el mismo directorio
<?php
$gestor = @fopen("fgets.txt", "r"); //abre archivo
if ($gestor) {
while (!feof($gestor)) //Verifica si está al final
{
$bufer = fgets($gestor, 1024); //Obtiene una línea desde apuntador de arch.
$bufer=nl2br($bufer); //Inserta saltos de línea de HTML antes
echo $bufer; //de cada salto de línea de la cadena
}
fclose ($gestor); //Cierra el apuntador a un archivo abierto
174
}
?>
Ejemplo 2.
Escribe un contenido en un archivo abierto
<?php
$nombre_archivo = 'prueba.txt';
$contenido = "Escribe esto al archivo\r\n";
if (!$gestor = fopen($nombre_archivo, 'w')) //abriendo en modo de escritura

{
echo "No se puede abrir el archivo ($nombre_archivo)";
exit;
}
// Escribir $contenido a nuestro archivo abierto.

if (fwrite($gestor, $contenido) === FALSE)
{
echo "No se puede escribir al archivo ($nombre_archivo)";
exit;
}
echo "Exito, se escribio; ($contenido) al archivo ($nombre_archivo)";
fclose($gestor);
?>
Ejemplo 3.
<?php
if (!$gestor = fopen($nombre_archivo, 'w'))

{
exit;
}
for ($i=0;$i<10;$i++)
{
$contenido = "Escribe esto al archivo, linea $i\r\n";
{
exit;
}
}
echo "Exito, se escribio; al archivo ($nombre_archivo)";
fclose($gestor);
?>
Ejemplo 4.
<?php
$contenido = "Agregar esto al archivo\r\n";
// Asegurarse primero de que el archivo existe y puede escribirse sobre el.

if (is_writable($nombre_archivo)) {
if (!$gestor = fopen($nombre_archivo, 'a')) {
exit;
}
// Escribir $contenido a nuestro arcivo abierto.
if (fwrite($gestor, $contenido) === FALSE) {
exit;
}
echo "Exito, se escribio; ($contenido) al archivo ($nombre_archivo)";
fclose($gestor);
} else {
echo "No se puede escribir sobre el archivo $nombre_archivo";
}
?>
175
Descripcion de las funciones
fseek -- Realiza una búsqueda sobre un apuntador de archivo
int fseek ( resource gestor, int desplazamiento [, int desde] )
Establece el indicador de posición para el archivo referenciado por gestor. La nueva posición,
medida en bytes desde el comienzo del archivo, se obtiene al sumar desplazamiento con la
posición especificada por desde, cuyos valores se definen como se indica a continuación:
SEEK_SET Define la posición igual a desplazamiento bytes.
SEEK_CUR Define la posición como la posición actual más desplazamiento.
SEEK_END Define la posición como el final-de-archivo más desplazamiento. (Para

moverse a una posición anterior al final-de-archivo, es necesario pasar un
valor negativo en desplazamiento.)
Si no se especifica desde, se asume que sea SEEK_SET.
De tener éxito, la función devuelve 0; de lo contrario devuelve -1. Note que realizar una
reubicación más allá del final de archivo no se considera un error.
Ejemplo.
<?php
$gestor = @fopen("fgets.txt", "r");
if ($gestor)
{
fseek($gestor, 10, SEEK_SET); //desde inicio + desplazamiento
//fseek($gestor, 10, SEEK_CUR); //desde posición actual + desplazamiento
//fseek($gestor, -10, SEEK_END); //desde final + desplazamiento
while (!feof($gestor)) //Verifica si está al final
{
$bufer = fgets($gestor, 1024);
$bufer = nl2br($bufer);
echo $bufer;
}
fclose ($gestor);
}
?>
fpassthru -- Imprime todos los datos restantes en un apuntador de archivo
int fpassthru ( resource gestor )
Lee hasta EOF en el apuntador de archivo dado a partir de la posición actual y escribe los
resultados en el búfer de salida.
Si ocurre un error, fpassthru() devuelve FALSE. De lo contrario, fpassthru() devuelve el número

de caracteres leídos desde gestor y pasados a la salida.
El puntero de fichero debe de ser valido y debe de apuntar a un fichero abierto con exito por
fopen() o fsockopen().
Puede que necesite llamar rewind() para restablecer el apuntador de archivo al comienzo de
éste si ya ha escrito datos en el archivo.
Si tan sólo quiere volcar el contenido de un archivo al búfer de salida, sin modificarlo o buscar
un desplazamiento en particular, puede que quiera usar la función readfile(), la cual le ahorra la
llamada a fopen().
176
Nota: Cuando se usa fpassthru() sobre un archivo binario en sistemas Windows, debe
asegurarse de abrir el archivo en modo binario, agregando el valor b al modo usado en
la llamada a fopen().
Es recomendable usar la bandera b cuando trate con archivos binarios, incluso si su sistema
no lo requiere, de modo que sus scripts sean más portables.
<?php
// abrir el archivo en modo binario
$nombre = 'img_penguin.png';
$aa = fopen($nombre, 'rb');
// enviar las cabeceras correctas

header("Content-Type: image/png");
header("Content-Length: " . filesize($nombre));
// volcar la imagen y detener el script

fpassthru($aa);
exit;
?>
readfile -- Imprime un archivo
int readfile ( string nombre_archivo [, bool usar_ruta_inclusion [, resource contexto]] )
Lee un archivo y lo escribe al búfer de salida.
Devuelve el número de bytes leídos desde el archivo. Si ocurre un error, FALSE es devuelto y
a menos que la función sea llamada como @readfile(), se genera un mensaje de error.
Ejemplo 1.
<?php
// abrir el archivo en modo binario
$nombre = 'home.png';
// enviar las cabeceras correctas

header("Content-Type: image/png");
header("Content-Length: " . filesize($nombre));
// volcar la imagen y detener el script

readfile($nombre);
exit;
?>
Ejemplo 2.
<?php
$filename = 'home.png';
$filename = realpath($filename); //Devuelve el nombre de ruta absoluto simplif.
//echo $filename;
//strtolower — Pasa a minúsculas una cadena

//substr — Devuelve parte de una cadena
//strrchr — Encuentra la última aparición de un caracter en una cadena
$file_extension = strtolower(substr(strrchr($filename,"."),1));
switch ($file_extension)
{
case "pdf": $ctype="application/pdf"; break;
case "exe": $ctype="application/octet-stream"; break;
case "zip": $ctype="application/zip"; break;
case "doc": $ctype="application/msword"; break;
case "xls": $ctype="application/vnd.ms-excel"; break;
case "ppt": $ctype="application/vnd.ms-powerpoint"; break;
case "gif": $ctype="image/gif"; break;
case "png": $ctype="image/png"; break;
case "jpe": case "jpeg":
case "jpg": $ctype="image/jpg"; break;
default: $ctype="application/force-download";
}
177
if (!file_exists($filename)) {
die("EL ARCHIVO NO EXISTE");
}
//basename — Devuelve la parte del path correspondiente al nombre del archivo

header("Pragma: public");
header("Expires: 0");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Cache-Control: private",false);
header("Content-Type: $ctype");
header("Content-Disposition: attachment; filename=\"".basename($filename)."\";");
header("Content-Transfer-Encoding: binary");
header("Content-Length: ".@filesize($filename));
//set_time_limit — Limita el tiempo máximo de ejecución

//El tiempo de ejecución máximo, en segundos. Si es definido como cero, no se impone un límite de tiempo.
set_time_limit(0);
@readfile("$filename") or die("Archivo no encontrado.");
?>
Ejemplo 1. Con conexión a base de datos.
El código muestra la lista de articulos escritos en el archivo “reporte1.txt”;

<?php
$nombre_archivo = 'reporte1.txt';
include ('funcion_conexion.ini.php');
$sql = "SELECT * FROM Articulo";

$r = mysql_query($sql, $miConexion) or die('Error...');
$f = mysql_num_rows($r);
$c = mysql_num_fields($r);
// Asegurarse primero de que el archivo existe y puede escribirse sobre el.

if (is_writable($nombre_archivo))
{
if (!$gestor = fopen($nombre_archivo, 'a'))
{
exit;
}
echo "Exito, se escribio; <br>";

{
$cc = $a['codArt'];
$dd = $a['desArt'];
$pp = $a['preVen'];
$contenido = "$cc -> $dd --> $pp \r\n";

{
exit;
}
echo $contenido."<br>";
}
fclose($gestor);
}
else
{
echo "No se puede escribir sobre el archivo $nombre_archivo";
}
?>
Resultado en Archivo reporte1.txt

A001 -> LECHE GLORIA --> 4
A002 -> ATUN --> 3
A003 -> FIDEO --> 4.5
178
A004 -> TALLARIN --> 2.5
A005 -> COCACOLA 1L --> 3.5
A006 -> KOLAREAL 3L --> 4.8
A007 -> PAPEL HIGIENICO --> 1.5
A008 -> PANETON --> 13
A009 -> AZUCAR --> 3.2
A010 -> ARROZ --> 2.8
A011 -> LECHE PURA VIDA --> 2.4
Ejemplo 2. Con conexión a base de datos.
El código muestra la lista de articulos escritos en el archivo “reporte2.txt”, con la diferencia de

que sino encuentra el archivo lo crea con el nombre especificado.
<?php
include ('funcion_conexion.ini.php');
$sql = "SELECT * FROM Articulo";

$r = mysql_query($sql, $miConexion) or die('Error...');
$f = mysql_num_rows($r);
$c = mysql_num_fields($r);
$nombre_archivo = 'reporte2.txt';
if (!$gestor = fopen($nombre_archivo, 'w'))

{
exit;
}
echo "Exito, se escribio; <br>";

for ($i=0;$i<$f;$i++)
{
{
$cc = $a['codArt'];
$dd = $a['desArt'];
$pp = $a['preVen'];
$contenido = "$cc -> $dd --> $pp \r\n";

{
exit;
}
echo $contenido."<br>";
}
}
fclose($gestor);
?>
Resultado en Archivo reporte2.txt

A001 -> LECHE GLORIA --> 4
A002 -> ATUN --> 3
A003 -> FIDEO --> 4.5
A004 -> TALLARIN --> 2.5
A005 -> COCACOLA 1L --> 3.5
A006 -> KOLAREAL 3L --> 4.8
A007 -> PAPEL HIGIENICO --> 1.5
A008 -> PANETON --> 13
A009 -> AZUCAR --> 3.2
A010 -> ARROZ --> 2.8
A011 -> LECHE PURA VIDA --> 2.4
179
Lección 28. Funciones de Directorio
 Introducción
 Administración de directorios
 Funciones: getcwd, chdir, dir, closedir, opendir, readdir, scandir, etc.
 Funciones: basename, copy, unlink, etc.
 Proyecto: Reportes con funciones de Directorio.
Introducción
El tratamiento de archivos resulta ser una práctica muy común en cualquier sitio web. Muy a
hay la necesidad de procesar un texto para cambiar el formato, buscar una cadena en su
interior o cualquier otro tipo de operación.
PHP proporciona un sin fin de funciones para la gestion de archivos que van desde las más
elementales de apertura, lectura y cierre a otras más rebuscadas como el cálculo de espacio
en el disco duro, tamaño del archivo, gestion de derechos de acceso, etc.
Estas constantes están definidas por esta extensión y estarán disponibles solamente cuando la
extensión ha sido o bien compilada dentro de PHP o grabada dinámicamente en tiempo de
ejecución.
DIRECTORY_SEPARATOR (string)
PATH_SEPARATOR (string)
Nota: El parámetro PATH_SEPARATOR fue introducido con PHP 4.3.0-RC2.
Veamos el significado y uso de funciones
chdir -- Cambiar de directorio

chroot -- Cambiar el directorio raíz
dir -- Clase de directorio
closedir -- Cerrar un gestor de directorio
getcwd -- Obtiene el directorio de trabajo actual
opendir -- Abrir un gestor de directorio
readdir -- Leer una entrada desde un gestor de directorio
rewinddir -- Regresar el gestor de directorio
scandir -- Lista los archivos y directorios ubicados en la ruta especificada
getcwd -- Obtiene el directorio de trabajo actual
string getcwd ( void )
Devuelve el directorio actual de trabajo en caso de éxito, o FALSE si ocurre un error.
En algunas variantes de Unix, getcwd() devolverá FALSE si alguno de los directorios padre no
tiene definido el modo de lectura o búsqueda, incluso si el directorio actual lo tiene.
chdir -- Cambiar de directorio
bool chdir ( string directorio )
Cambiar el directorio actual de PHP a directorio (“El nuevo directorio actual”).
Ejemplo.
<?php
// directorio actual
180
echo getcwd() . "<br>";
// cambio de directorio
chdir('dirprueba'); //asumiendo que existe el directorio
echo getcwd() . "<br>";
chdir('../..'); //saliendo dos subcarpetas
echo $ver=getcwd() . "<br>";
echo "Mi directorio: ".$ver;

?>
Resultado
F:\AppServ\www\03directorios
F:\AppServ\www\03directorios\dirprueba
F:\AppServ\www
Mi directorio: F:\AppServ\www
dir -- Clase de directorio
class dir
{
dir ( string directorio )
string path
resource handle
string read ( void )
void rewind ( void )
void close ( void )
}
Un mecanismo pseudo-orientado a objetos para la lectura de un directorio. El directorio dado

es abierto. Se encuentran disponibles dos propiedades una vez el directorio ha sido abierto. La
propiedad handle puede ser usada con otras funciones de directorio como readdir(),
rewinddir() y closedir(). La propiedad path se define con la ruta del directorio que fue abierto.
Hay tres métodos disponibles: read, rewind y close.
Ejemplo
<?php
$d = dir("F:\\AppServ\\www\\");
echo "Gestor: " . $d->handle . "<br>";
echo "Ruta: " . $d->path . "<br>";
while (false !== ($entrada = $d->read()))

{
echo $entrada."<br>";
}
$d->close();
?>
Resultado
Gestor: Resource id #2
Ruta: F:\AppServ\www\
.
..
index.php
phpinfo.php
appserv
...
03directorios
Nota: El orden en el que las entradas de directorio son devueltas por el método read
depende del sistema.
181
Nota: Se define la clase interna Directory, lo que quiere decir que no será posible
definir sus propias clases con ese nombre. Para una lista completa de clases
predefinidas en PHP, por favor consulte Clases Predefinidas.
is_dir -- Indica si el nombre de archivo es un directorio
bool is_dir ( string nombre_archivo )
Devuelve TRUE si el archivo con el nombre dado existe y es un directorio. Si nombre_archivo

es un nombre de archivo relativo, éste será analizado relativo al directorio de trabajo actual.
Ejemplo.
<?
var_dump(is_dir('un_archivo.txt')) . "\n";
var_dump(is_dir('dirprueba/nueva_carpeta')) . "\n";
var_dump(is_dir('..')); //un directorio arriba

?>
Resultado
bool(false)
bool(false)
bool(true)
opendir -- Abrir un gestor de directorio

resource opendir ( string ruta [, resource contexto] )
Abre un gestor de directorio a ser usado en llamadas posteriores a closedir(), readdir(), y

rewinddir(). Devuelve un gestor de directorio tipo resource en caso de éxito, o FALSE si
ocurre un error.
ruta La ruta del directorio a ser abierto

contexto Para una descripción del parámetro contexto, refiérase a la sección de
secuencias del manual.
Si path no es un directorio válido o el directorio no puede ser abierto debido a restricciones de

permisos o errores del sistema de archivos, opendir() devuelve FALSE y genera un error de
PHP de nivel E_WARNING. Es posible suprimir la salida del error de opendir() anteponiendo
'@' al nombre de la función.
Ejemplo 1.
<?php
$dir="F:\\AppServ\\www\\";
// Abrir un directorio conocido, y proceder a leer sus contenidos

if (is_dir($dir))
{
if ($gd = opendir($dir))
{
while (($archivo = readdir($gd)) !== false)
{
echo "ARCHIVO: $archivo : TIPO: " . filetype($dir . $archivo) . "<br>";
}
closedir($gd);
}
}
?>
readdir -- Lee una entrada desde un gestor de directorio

string readdir ( resource gestor_dir )
Devuelve el nombre del siguiente archivo leido desde el directorio. Los nombres de archivo son
devueltos en el orden en que son almacenados por el sistema de archivos.
182
gestor_dir. El gestor de directorio tipo resource abierto previamente con opendir().
Devuelve el nombre de archivo en caso de éxito, o FALSE si ocurre un error.
Ejemplo 1. Listar todos los archivos en un directorio

<?php
if ($gestor = opendir($dir))
{
echo "Gestor de directorio: $gestor<br>";
echo "Archivos:<br>";
// Esta es la forma correcto de iterar sobre el directorio.

while (false !== ($archivo = readdir($gestor))) {
echo "$archivo<br>";
}
// Esta es la forma EQUIVOCADA de iterar sobre el directorio.

while ($archivo = readdir($gestor)) {
}
closedir($gestor);
}
?>
Ejemplo 2. Listar todos los archivos del directorio actual

<?php
//directorio actual
if ($gestor = opendir('.'))
{
while (false !== ($archivo = readdir($gestor)))
{
if ($archivo != "." && $archivo != "..")
{
}
}
closedir($gestor);
}
?>
mkdir -- Crea un directorio

bool mkdir ( string pathname [, int mode [, bool recursive [, resource context]]] )
Trata de crear el directorio especificado por pathname. Devuelve TRUE si todo se llevó a cabo
correctamente, FALSE en caso de fallo.
Tenga en cuenta que debe especifcar el modo como un número octal, lo que significa que
debes anteponerle un 0 al número.
El modo es 0777 por defecto, lo cual significa el acceso más amplio posible. Para mas
información de los modos vea chmod().
Ejemplo 1. Lista todos los archivos del directorio incluyendo el directorio creado
<?php
mkdir($dir."directorioCreadoDesdePHP", 0700); //DIRECTORIO A CREAR
if ($gestor = opendir($dir))
{
//Esta es la forma correcto de iterar sobre el directorio.
while (false !== ($archivo = readdir($gestor))) {
}
closedir($gestor);
}
?>
183
Funciones de Correo
 Introducción
 Opciones de configuración de correo
 Funcion mail y sus parámetros
Introducción
La función mail() le permite enviar correo.
Opciones de configuración de correo
Nombre Predeterminado Modificable Cambios

SMTP "localhost" PHP_INI_ALL
smtp_port "25" PHP_INI_ALL Disponible desde PHP 4.3.0.
sendmail_from NULL PHP_INI_ALL
sendmail_path NULL PHP_INI_SYSTEM
SMTP string
Usado bajo Windows únicamente: el nombre DNS o dirección IP del servidor SMTP que
debería usar PHP para el envío de correo con la función mail().
smtp_port int
Usado bajo Windows únicamente: Número del puerto para conectarse al servidor especificado
en el parámetro SMTP cuando se envíe correo con mail(); su valor predeterminado es 25. Se
encuentra disponible solo a partir de PHP 4.3.0.
sendmail_from string
Qué dirección de correo "From:" debe ser usada en el correo enviado desde PHP bajo
Windows.
sendmail_path string
En dónde puede encontrarse el programa sendmail, usualmente /usr/sbin/sendmail o

/usr/lib/sendmail. configure realiza un honesto intento por ubicar este valor para usted y definir
un valor predeterminado, pero si falla, puede definirlo aquí.
Los sistema que no usan sendmail deben definir esta directiva al reemplazo de sendmail que
ofrecen sus sistemas de correo, si existe. Por ejemplo, los usuarios de Qmail pueden definir
este valor normalmente a /var/qmail/bin/sendmail o /var/qmail/bin/qmail-inject. qmail-inject no
requiere ninguna opción para procesar el correo correctamente.
Esta directiva funciona también bajo Windows. Si está definida, smtp, smtp_port y
sendmail_from son ignoradas y se ejecuta el comando especificado.
Tabla de contenido de funciones de correo
ezmlm_hash -- Calcular el valor hash que necesita EZMLM

mail -- Enviar correo
Descripción
bool mail ( string para, string asunto, string mensaje [, string cabeceras_adicionales [, string
parametros_adicionales]] )
184
Lista de parámetros
para
Recipiente, o recipientes del correo.
El formato de esta cadena debe ser compatible con el documento RFC 2822.
Algunos ejemplos son:
[email protected]
[email protected], [email protected]
Usuario <[email protected]>
Usuario <[email protected]>, Otro Usuario [email protected]
asunto
Asunto del correo electrónico a ser enviado. Éste no debe contener caracteres de salto de
línea, o es posiblo que el correo no sea enviado apropiadamente.
mensaje
Mensaje a ser enviado.
Cada línea debe ser sepadarada con un caracter LF (\n). Las líneas no deberían exceder los 70
caracteres.
(Sólo en Windows) Cuando PHP sostiene comunicación con el servidor SMTP directamente, si
un punto es encontrado al comienzo de la línea, éste es removido. Para contrarestar este
comportamiento, reemplace estas ocurrencias con dos puntos.
<?php
$texto = str_replace("\n.", "\n..", $texto);
?>
cabeceras_adicionales (opcional)
Cadena a ser insertada al final de la cabecera de correo electrónico.
Por lo general, este parámetro es usado para agregar cabeceras extra (From, Cc y Bcc).
Múltiples cabeceras extra deben ser separadas con una secuencia CRLF (\r\n).
Nota: Cuando envíe correo, el mensaje debe contener una cabecera From. Ésta puede
definirse con el parámetro cabeceras_adicionales, o puede definirse un valor
predeterminado en php.ini. No hacer esto resultará en un mensaje de error similar a:
Warning: mail(): "sendmail_from" not set in php.ini or custom "From:" header missing.
Nota: Si los mensajes no son recibidos, intente usar un caracter LF (\n) solamente.
parametros_adicionales (opcional)
El parámetro parametros_adicionales puede ser usado para pasar un parámetro extra al
programa configurado para ser usado cuando se envíe correo mediante la opción de
configuración sendmail_path. Por ejemplo, este parámetro puede usarse para definir la
dirección de sobre del origen cuando se usa sendmail con la opción -f.
El usuario bajo el que corre su servidor web debe ser agregado como un usuario confiable en
la configuración de sendmail para prevenir que se agregue una cabecera 'X-Warning' a los
mensajes cuando el origen de sobre (-f) sea definido usando este método. Para usuarios de
sendmail, este archivo es /etc/mail/trusted-users.
Valores retornados
Devuelve TRUE si el correo fue aceptado satisfactoriamente para su envío, o FALSE de lo
contrario.
Es importante notar que solo porque el correo sea aceptado para su envio NO quiere decir que
el correo realmente vaya a llegar a su destino planeado.
185
Ejemplos 1. Envío de correo.
<?php
// El mensaje
$mensaje = "Un mensaje muy pero muy
laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaarga...";
// wordwrap() Corta una cadena en un número dado de

// caracteres usando un carácter de ruptura de cadenas.
$el_msj = wordwrap($mensaje, 70, "\n", 1);
// Cabecera
$cabeceras = 'From: [email protected]';
// Enviar // mail(para, asunto, mensaje, cabeceras)

mail('[email protected]', 'Mi Asunto', $el_msj, $cabeceras);
echo "Correo enviado <br>";

echo $el_msj;
?>
Ejemplo 2. Envío de correo para dos o más clientes con cabeceras extra.
<?php
$para = '[email protected]'. ','.'[email protected]';
$asunto = 'mis_asuntos';
$mensaje = "hola, como estas \nnosotros estamos bien \ncomo siempre...";
// Por cada cabecera hay q adiciona \r\n sin excepción es obligatorio

$cabeceras = 'From: [email protected]' . "\r\n" .
'Reply-To: [email protected]' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
$envio=mail($para, $asunto, $mensaje, $cabeceras);
if (!$envio)
echo "No se puedo enviar el correo";
else
echo "Correo enviado satisfactoriamente";
?>
Ejemplo 3. Envío de correo electrónico HTML

<?php
// múltiples recipientes
$para = '[email protected]' . ', '; // note la coma
$para .= '[email protected]';
// asunto
$asunto = 'Recuerden mi Cumpleaño es en Diciembre...';
// mensaje
//Muestra mensaje con html
$mensaje = '
<html>
<head> <title> Cumpleaños para Diciembre</title> </head>
<body>
<table border=1>
<tr> <th colspan=4>¡Aquí están los cumpleaños que vienen en Diciembre!</th> </tr>
<tr> <th>Persona</th><th>Día</th><th>Mes</th><th>Año</th> </tr>
<tr> <td>Juan </td><td> 3</td><td>Diciembre</td><td>1970</td> </tr>
<tr> <td>Erika </td><td>17</td><td>Diciembre</td><td>1973</td> </tr>
</table>
</body>
</html> ';
// Para enviar correo HTML, la cabecera Content-type debe definirse

$cabeceras = 'MIME-Version: 1.0' . "\r\n";
$cabeceras .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
// Cabeceras adicionales
$cabeceras .= 'From: Recordatorio de Cumpleaños <[email protected]>' . "\r\n";
$cabeceras .= 'Cc: [email protected]' . "\r\n";
186
$cabeceras .= 'Bcc: [email protected]' . "\r\n";
// Enviarlo
$envio=mail($para, $asunto, $mensaje, $cabeceras);
if (!$envio)
"Error al enviar el correo";
else
echo $mensaje;
?>
Ejemplo 4. Envío de correo con archivo adjunto

<?php
$para = '[email protected]';
$desde = '[email protected]';
$subject = "Correo generado desde PHP con archivo adjunto";
$cabeceras = "From: $desde";
$nombre_archivo="prueba.xls"; //puede ser cualquier extension
$fileatt = $nombre_archivo;
$fileatttype = "application/excel";
$fileattname = "Archivo_adjunto.xls"; //Este es el nombre del archivo
$file = fopen( $fileatt, 'rb' ); //abriendo en modo lectura y binario

$data = fread( $file, filesize( $fileatt ) ); //Que lea todo el contenido
fclose( $file );
// Desde aqui es para que reconozca el archivo adjunto...

$semi_rand = md5( time() );
$mime_boundary = "==Multipart_Boundary_x{$semi_rand}x";
$cabeceras .= "\nMIME-Version: 1.0\n" .

"Content-Type: multipart/mixed;\n" .
" boundary=\"{$mime_boundary}\"";
$mensaje="Mensaje creado desde php usando la funcion mail() con archivo adjunto.";
$mensaje = "This is a multi-part message in MIME format.\n\n" .
"--{$mime_boundary}\n" .
"Content-Type: text/plain; charset=\"iso-8859-1\"\n" .
"Content-Transfer-Encoding: 7bit\n\n" .
$mensaje . "\n\n";
$data = chunk_split( base64_encode( $data ) ); //codificación para enviar el correo
$mensaje .= "--{$mime_boundary}\n" .
"Content-Type: {$fileatttype};\n" .
" name=\"{$fileattname}\"\n" .
"Content-Disposition: attachment;\n" .
" filename=\"{$fileattname}\"\n" .
"Content-Transfer-Encoding: base64\n\n" .
$data . "\n\n" .
"--{$mime_boundary}--\n";
mail($para,$subject,$mensaje,$cabeceras);
?>
187
Lección 29: Clases y Objetos en PHP
 Las bases: clase, nuevo objeto, extendiendo objetos.
 Auti carga de objetos.
 Constructores y destructores
 Visibilidad
 Alcances del operador de resolución(::)
 Proyecto. Librerias en el proyecto.
En PHP 5 hay un nuevo modelo de Objetos. El manejo de PHP de objetos ha sido reescrito por
completo, permitiendo un mejor desempeño y mas características.
Las Bases
Clase
Cada definición de clase empieza con la palabra "class", seguida por un nombre de clase, el
cual puede ser cualquier nombre que no esté en la lista de palabras reserved en PHP. Seguida
por un par de llaves, las cuales contienen la definición de los miembros de la clase y los
métodos. Una seudo variable $this está disponible cuando un método es llamado dentro del
contexto de un objeto.
$this es una referencia al objeto que se está usando (usualmente el objeto al que el método
pertenece, pero puede ser otro objeto, si un método es llamado estáticamente desde el
contexto de un objeto secundario).
Nuevo objeto
Para crear una instancia de un objeto, un nuevo objeto debe ser creado y asignado a una
variable. Un objeto siempre será asignado cuando se crea un objeto nuevo a menos que el
objeto tenga un constructor definido que arroje una excepción en caso de error.
Cuando se asigna una instancia de un objeto previamente creado a una nueva variable, la
nueva variable accesará la misma instancia que la del objeto a la que fue asignada. Este
comportamiento es el mismo cuando se pasan instancias a una función. Una nueva instancia
de un objeto previamente creado puede ser hecho clonandolo.
<?php
class SimpleClass
{
// Declaración de miembros
public $variable = 'Valor por defecto';
// Declaración de funciones
public function mostrarTexto()
{
echo $this->variable;
}
}
$instance = new SimpleClass(); // Creando objeto

$instance->mostrarTexto(); // llamando a funcion
echo "<br>";
// Asignando nuevo valor para "variable";

$instance->variable="Valor definido por el usuario";
$instance->mostrarTexto(); // llamando a función
?>
Asignamiento de Objeto
<?php
class SimpleClass
{
188
public function mostrarTexto() {
}
}
// Asignamiento de objetos
$instance = new SimpleClass(); // Creando objeto
$assigned = $instance; // asignando objeto creado
$reference =& $instance; // hacen referencia a una misma variable
$instance->variable = '$assigned tendrá este valor';
$instance = null; // $instance y $reference se vuelve null
echo "<br>";
var_dump($instance);
echo "<br>";
var_dump($reference);
echo "<br>";
var_dump($assigned);
?>
El resultado del ejemplo seria:
NULL
NULL
object(SimpleClass)#1 (1) {
["variable"]=> string(27) "$assigned tendrá este valor"
}
Otro ejemplo. Clase vehiculo

<?php
//// Clase Vehiculo
class Vehiculo
{
//// atributos publicos
public $velocidadMaxima;
public $potencia;
public $color;
public $peso;
//// constructor
function __construct($potencia,$peso)
{
$this->potencia = $potencia;
$this->peso = $peso;
return true;
}
//// metodo relacionPesoPotencia()
function relacionPesoPotencia()
{
if ($this->potencia>0)
{
return ($this->peso/$this->potencia);
}
return -1;
}
} //// termina def. clase Vehiculo
//// creamos un vehiculo (5 CV, 80 Kg)

$obj_vehiculo = new Vehiculo(5,80);
echo $obj_vehiculo->relacionPesoPotencia()."<br>";
//// muestra 16
//// PHP5:
//// asignacion de objetos = asignacion de manejadores (handlers)
$obj_alias = $obj_vehiculo;
echo $obj_alias->relacionPesoPotencia()."<br>";
//// muestra 16
//// los dos manejadores referencian al mismo objeto
$obj_alias->peso = 60;
echo $obj_vehiculo->relacionPesoPotencia()."<br>";
//// muestra 12
echo $obj_alias->relacionPesoPotencia()."<br>";
//// muestra 12
?>
189
Extendiendo objetos
Una clase puede heredar métodos y miembros de otra clase usando la palabra 'extends' en la
declaración. No es posible extender de múltiples clases, una clase puede heredar solo de una
clase base.
Los métodos de herencia y sus miembros pueden ser evitados, redeclarandolos con el mismo
nombre con el que los definió la clase padre, a menos que la clase padre haya definido un
método como final. Es posible accesar a los métodos o miembros redeclarados haciendo
referencia a ellos con parent::
<?php
class SimpleClass
{
public function mostrarTexto()
{
}
}
class ClaseExtendida extends SimpleClass

{
// Redefiniendo el método padre
function mostrarTexto()
{
echo "Extendiendo la clase<br>";
$this->variable = "Redefinido en el hijo";
parent::mostrarTexto();
//SimpleClass::mostrarTexto();
}
}
$extended = new ClaseExtendida();

$extended->mostrarTexto();
?>
Extendiendo la clase
Redefinido en el hijo
Constructores y Destructores
Constructor
void __construct ( [mixed args [, ...]] )
PHP 5 permite a los desarrolladores declarar métodos constructores para las clases. Las
clases que tienen un método constructor llaman a este método cada vez que se crea un nuevo
objeto, para cualquier inicialización que el objeto puede necesitar antes de ser usado.
Nota: Los constructores padres no son llamados implicitamente si la clase hijo define un
constructor. Para poder ejecutar el constructor de la clase padre, se debe hacer una llamada a
parent::__construct() dentro del constructor de la clase hijo.
<?php
class BaseClass {
function __construct() {
print "Dentro del contructor de BaseClass<br>";
}
}
class SubClass extends BaseClass {

parent::__construct();
190
print "Dentro del constructor de SubClass<br>";
}
}
$obj = new BaseClass();

$obj = new SubClass();
?>
Dentro del contructor de BaseClass

Dentro del contructor de BaseClass
Dentro del constructor de SubClass
Para tener compatibilidad con versiones anteriores, si PHP 5 no encuentra una función
__construct() para una clase dada, buscará la forma de la función del constructor que se
usaba anteriormente por el nombre de la clase. Efectivamente, esto significa que el único caso
que puede tener compatibilidad es si la clase tiene un método llamado __construct() el cual
fue usado para semánticas diferentes.
Destructores
void __destruct ( void )
PHP 5 introduce un concepto de destructor similar a aquellos de otros lenguajes de

programación orientada a objetos, tal como C++. El método destructor será llamado tan pronto
como todas las referencias a un objeto en particular sean removidas o cuando el objeto sea
explícitamente destruido.
<?php
class miClaseDestructor
{
public $name;
print "Dentro de constructor<br>";
$this->name = "mi Clase Destructor";
}
function __destruct() {
print "Destruyendo " . $this->name . "<br>";
}
}
$obj = new miClaseDestructor();

?>
Como los constructores, los destructores de la clase padre no serán llamados explícitamente
por el compilador. Para ejecutar un destructor padre, se debe tener una llamada explícita a
parent::__destruct() en el cuerpo del destructor.
Nota: El destructor es llamado durante la finalización del script, de tal manera que los
headers ya han sido enviados.
Nota: Intentar arrojar una excepción desde un destructor produce un error fatal.
Dentro de constructor
Destruyendo mi Clase Destructor
191
Visibilidad
La visibilidad de una propiedad o método puede ser definida al anteponerle a la declaración

con las palabras reservadas: public, protected o private. Los elementos declarados con Public
pueden ser accesados en todos lados. Los Protected limitan el acceso a las clases heredadas
(y a la clase que define el elemento). Los Private limitan la visibilidad solo a la clase que lo
definió.
Visibilidad de los miembros
Los miembros de la clase deben estar definidos con public, private o protected.
<?php
class MyClass
{
public $publico = 'var_Publica';
protected $protegido = 'var_Protegida';
private $privado = 'var_Privado';
function printHello()
{
echo $this->publico."<br>";
echo $this->protegido."<br>";
echo $this->privado."<br>";
}
}
$obj = new MyClass();

echo $obj->publico."<br>"; // Imprime: var_Publica
echo $obj->protegido; // Fatal Error
echo $obj->privado; // Fatal Error
$obj->printHello(); // Imprime: var_Publica, var_Protegida, var_Privado
?>
Visibilidad de los métodos
Los métodos de clase deben ser definidos con public, private o protected. Los métodos sin
ninguna declaración son tomados como public.
Alcance del operador de resolución (::)
El alcance del operador de resolución o en términos simples, dobles dos puntos, es un símbolo
que permite acceso a los miembros o métodos estaticos, constantes, y eliminados de una
clase.
Cuando se referencían estos elementos desde afuera de la definición de la clase, usan el

nombre de la clase.
Ejemplo 1. :: Desde afuera de la definición de la clase
<?php
class miClase {
const valor_constante = 'Un valor constante';
}
echo miClase::valor_constante;
?>
Dos palabras reservadas self y parent son usadas para accesar los miembros o métodos
desde adentro de la definición de la clase.
Ejemplo 2. :: desde dentro de la definición de la clase
<?php
class miClase {
const valor_constante = 'Un valor constante';
}
192
class otraClase extends miClase
{
public static $mi_estatico = 'Variable estatico';
public static function miFuncion() {

echo parent::valor_constante . "<br>";
echo self::$mi_estatico . "<br>";
}
}
otraClase::miFuncion();
?>
La palabra reservada 'Static'
Declarar miembros de clases o métodos como estáticos, los hace accesibles desde afuera del
contexto del objeto. Un miembro o método declarado como estático no puede ser accesado
con una variable que es una instancia del objeto y no puede ser redefinido en una extensión de
la clase. La declaración static debe estar después de la declaración de visibilidad.
A causa de que los métodos estáticos son accesibles sin que se haya creado una instancia del
objeto, la pseudo variable $this no está disponible dentro de los métodos declarados como
estáticos.
De hecho las llamadas a métodos static son resueltas en tiempo de ejecución. Cuando sea
explícitamente un nombre de clase, el método ya ha sido identificado completamente y no es
necesario aplicar las reglas de herencia. Si la llamada es hecha por self entonces self es
traducido a la clase actual, esto es, la clase a la que pertenece el código. Aquí tampoco aplican
las reglas de herencia.
Las propiedades estáticas no pueden ser accesadas a través del objeto usando el operador de
flecha ->.
<?php
class A
{
public static $mi_estatico = 'variable estatico';
public function fun_static_A() {

return self::$mi_estatico;
}
}
class B extends A
{
public function fun_static_B() {
return parent::$mi_estatico;
}
}
echo "Objeto clase A<br>";

print A::$mi_estatico . "<br>";
$objA = new A();
print $objA->fun_static_A() . "<br>";
print $objA->mi_estatico . "<br>";
echo "Final <br>";
echo "Objeto clase B<br>";

print B::$mi_estatico . "<br>";
$objB = new B();
print $objB->fun_static_B() . "<br>";
echo "Final <br>";
?>
193
Lección 30. Librería FPDF. Funciones PDF.
 Introducción
 Consideraciones a tener en cuenta
 Manual de Referencia de la librería FPDF
 Desarrollo de aplicaciones
 Proyecto. Reportes que use PDF
Introducción
Las funciones PDF en PHP pueden crear archivos PDF utilizando la librería FPDF. Donde
FPDF es freeware (programa de libre distribución). No hay limitaciones de uso. Puede usarlo
libre y gratuitamente en su aplicación (comercial o no), con o sin modificaciones.
La documentación en esta sección solamente es una descripción de las funciones de la
biblioteca PDFlib y no debería considerarse una referencia exhaustiva. Se ha de consultar la
documentación incluida en el código fuente de la distribución de PDFlib para una completa y
detallada explicación de cada función. Proporciona muy buena descripción de las capacidades
de PDFlib y contiene actualizada la documentación de todas las funciones.
Consideraciones a tener en cuenta para generar ficheros con la librería FPDF
No hay ningún límte en particular. Sin embargo, hay ciertas limitaciones:
 El máximo de memoria reservada para los scripts en PHP es, por defecto, de 8 MB. Para
documentos muy extensos, especialmente si contienen imágenes, este límite puede
alcanzarse (ya que el fichero se construye en memoria). El límite se define en el fichero
php.ini.
 El tiempo máximo de ejecución es por defecto de 30 segundos. Este límite puede ser
fácilmente sobrepasado. Se define en php.ini y puede ser modificado dinámicamente
mediante set_time_limit().
 Los navegadores tienen por lo general un límite de 5 minutos de inactividad. Si envía

directamente el PDF al navegador y sobrepasa el límite, se perderá el documento. Por
tanto, en el caso de documentos muy grandes, se aconseja generarlos en un fichero y
enviar información al navegador de tanto en tanto. Cuando el documento esté terminado,
puede redireccionar a él con JavaScript o crear un enlace.
Nota: incluso si el navegador agota su tiempo, el script puede continuar ejecutándose en el

servidor.
Manual de Referencia de la librería FPDF
AcceptPageBreak - acepta o no un salto de página automático

AddFont - añade una nueva fuente
AddLink - crea una referencia interna
AddPage - añade una nueva página
AliasNbPages - define un alias para el número de páginas
Cell - imprime una celda
Close - termina el documento
Error - error fatal
Footer - pie de página
FPDF - constructor
GetStringWidth - calcula la longitud de la cadena
GetX - obtiene la posición actual de x
GetY - obtiene la posición actual de y
Header - cabecera de página
Image - imprime una imagen
Line - dibuja un línea
Link - pone una referencia
194
Ln - salto de línea
MultiCell - imprime texto con saltos de línea
Output - guarda o envía el documento
PageNo - número de página
Rect - dibuja un rectangulo
SetAuthor - establece el autor del documento
SetAutoPageBreak - establece el modo de salto de pagina automático
SetCompression - cambia la compresión en activo o inactivo
SetCreator - establece el creador del documento
SetDisplayMode - establece el modo de presentación
SetDrawColor - establece el color de graficación
SetFillColor - establece el color de relleno
SetFont - establece la fuente
SetFontSize - establece el tamaño de la fuente
SetKeywords - asocia las palabras claves con el documento
SetLeftMargin - establece el márgen izquierdo
SetLineWidth - establece el ancho de la línea
SetLink - establece el enlace de destino
SetMargins - establece los márgenes
SetRightMargin - establece el márgen derecho
SetSubject - establece el tema del documento
SetTextColor - establece el color del texto
SetTitle - establece el título del documento
SetTopMargin - Establece el márgen superior
SetX - establece la posición actual de x
SetXY - establece la posición actual de x y y
SetY - establece la posición actual de y
Text - imprime una cadena
Write - imprime el siguiente texto
Descripción de funciones
Cell
Cell(float w [, float h [, string txt [, mixed border [, int ln [, string align [, int fill [, mixed link]]]]]]])
Imprime una celda (de área rectangular) bordes opcionales, color de fondo y secuencia de
caracteres. La esquina superior izquierda de la celda corresponde a la posición actual. El texto
puede ser alineado o centrado. Despues de invocar, la posición actual se desplaza a la
derecha o la siguietne línea. Es posible poner una referencia en el texto.
Si esta el salto de página automático habilitado y la celda esta por fuera del límite, es realizado
un salto de página antes de producir la salida.
w Ancho de Celda. Si es 0, la celda se extiende hasta la márgen derecha.

h Alto de celda. Valor por defecto: 0.
txt cadena a ser impresa. Valor por defecto: cadena vacia.
border 0: sin borde y 1: marco. Indica si los bordes deben se dibujados alrededor de la celda.
El valor puede ser un número o una cadena conteniedo alguno o todos de los
siguientes carácteres (en cualquier orden):
 L: izquierda  R: derecha
 T: superior  B: inferior
ln Indica donde la posición actula debería ir antes de invocar. Los valores posibles son:
 0: a la derecha
 1: al comienzo de la siguiente línea
 2: debajo
Poner 1 es equivalente a poner 0 y llamar justo despues Ln(). Valor por defecto: 0.
align Permite centrar o alinear el texto. Los posibles valores son:
 L o una cadena vacia: alineación izquierda (valor por defecto)
 C: centro
 R: alineación derecha
fill Indica si el fondo de la celda debe ser dibujada (1) o transparente (0).
195
link URL o identificador retornado por AddLink().
Desarrollo de aplicaciones
Ejemplo 1.
El código muestra la definición de una celda con un texto.
<?php
require('fpdf/fpdf.php');
$pdf=new FPDF();
$pdf->AddPage(); // Agregando nueva pagina

$pdf->SetFont('Arial','B',16); // Fuente estilo y tamaño
$pdf->Cell(40,10,'¡Hola, Mundo!'); // Celda: ancho 40, alto 10 y texto "Hola Mundo":
$pdf->Output(); // Envía el documento a un destino dado
?>
Ejemplo 2.
El código muestra la definición encabezado, cuerpo y pie de pagina
<?php
class miEncabezado extends FPDF

{
function Header() //Cabecera de página con logo
{
//Image($fichero, $x, $y [, $ancho [, $alto [, $tipo_arc [, $enlace]]]])
$this->Image('logo_pb.png',10,8,33); // Imagen
$this->SetFont('Arial','B',15); // Fuente
$this->Cell(80); // Celda
$this->Cell(30,10,'Título',1,0,'C'); // Celda
$this->Ln(20); // Salto de linea altura 20 lineas
}
function Footer() //pie de pagina

{
$this->SetY(-15); // Posición: a 1,5 cm del final
$this->SetFont('Arial','I',8); // Fuente
//Número de página
//{nb} es un alias que se reemplaza por el numero total de paginas
$this->Cell(0,10,'Página '.$this->PageNo().'/{nb}',0,0,'C');
}
}
$pdf=new miEncabezado(); // Creando objeto

$pdf->AliasNbPages(); // Define un alias para el # de páginas
$pdf->AddPage(); // Agrego una pagina
$pdf->SetFont('Times','',12); // Fuente
for($i=1;$i<=100;$i++) // Imprime en celdas
$pdf->Cell(0,10,'Imprimiendo línea número '.$i,0,1);
$pdf->Output(); // Envia
?>
Resultado
196
Ejemplo 3.
El código muestra la definición lectura de archivo de texto
<?php
class PDF extends FPDF

{
function Header() //titulo
{
global $title;
$this->SetFont('Arial','B',15);
//Calculamos ancho y posición del título.
$w=$this->GetStringWidth($title)+6;
$this->SetX((210-$w)/2);
$this->SetDrawColor(0,80,180); // Color borde

$this->SetFillColor(200,200,200); // Fondo
$this->SetTextColor(240,50,50); // Texto
$this->SetLineWidth(1); // Ancho del borde (1 mm)
$this->Cell($w,9,$title,1,1,'C',1); // Título
$this->Ln(10); // Salto de linea
}
function Footer()
{
$this->SetY(-15); // Posición a 1,5 cm del final

$this->SetFont('Arial','I',8); // Fuente
$this->SetTextColor(128); // Color texto
$this->Cell(0,10,'Página '.$this->PageNo(),0,0,'C'); // # paginas
}
function ChapterTitle($num,$label) //Capitulo

{
$this->SetFont('Arial','',12);
$this->SetFillColor(200,220,255); //Color de fondo
$this->Cell(0,6,"Capítulo $num : $label",0,1,'C',1); //Titulo
$this->Ln(4); //Salto de línea
}
function ChapterBody($file) //que muestre el contenido

{
//Leemos el fichero y asigna
$f=fopen($file,'r');
$txt=fread($f,filesize($file));
fclose($f);
$this->SetFont('Times','',12); // Fuente
$this->MultiCell(0,5,$txt); // Imprimimos el texto justificado
$this->Ln(); // Salto de línea
$this->SetFont('','I'); // Cita en itálica, '' última fuente usada
$this->Cell(0,5,'(fin del extracto)');
}
function PrintChapter($num,$title,$file) //imprime los capitulos

{
$this->AddPage(); //En una nueva pagina
$this->ChapterTitle($num,$title); //la funcion anterior
$this->ChapterBody($file); //la funcion anterior
}
}
$pdf=new PDF(); //declar la funcion
$title='LA REVELACIÓN DE LOS TEMPLARIOS';
$pdf->SetTitle($title); //Autor y quien lo ha hecho
$pdf->SetAuthor('LYNN PICKNETT Y CLIVE PRINCE'); //Autor y quien lo ha hecho y no lo muestra??
$pdf->PrintChapter(1,'EL CÓDIGO SECRETO DE LEONARDO DA VINCI','templarios_c1.txt');
//llama al texto
$pdf->PrintChapter(2,'EN LOS MUNDOS SUBTERRÁNEOS','templarios_c2.txt');
$pdf->Output();
?>
197
198

Curso Tallerdeprogramación Web

Cargado por

Copyright:

Formatos disponibles

Curso Tallerdeprogramación Web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso Tallerdeprogramación Web

Cargado por

Copyright:

Formatos disponibles

INSTITUTO SUPERIOR

“HONORIO DELGADO ESPINOZA”

Gonzalo Neira Calsin

HTML es un lenguaje sencillo pensado para presentar información en la WWW. HTML

URL (Uniforme Resource Locator)

URL es el acrónimo de (Uniform Resource Locator), localizador uniforme de recursos y permite

Uso y Formato del URL

El formato de una URL será:

La maquina.dominio indicará el servidor que nos proporciona el recurso, en este caso se

El puerto TCP es opcional y lo normal es no ponerlo si el puerto es el mismo que se utiliza

Protocolo Directorio y/o

Nombre De Host (Dominio)

El servicio, será alguno de los de internet, estos pueden ser:

Cabecera de un documento HTML

 <TITLE>: Título del documento

Se utiliza principalmente para etiquetar e identificar la página en los bookmarks (marcadores) y

 <BASE>: URL base del documento.

Por ejemplo: <BASE HREF="http ://www.isphdelgadoe.edu.pe/ademico/">

 <META>: Indica refresco del documento

Tiene muchas utilidades, especialmente cuando se trabaja JavaScript y formularios. Otra

<META HTTP-EQUIV="REFRESH" CONTENT="numero_segundos; URL=URL_de_refresco">

Diseñe una página que muestre un álbum fotográfico.

Cuerpo de un documento HTML

<BODY BACKGROUND="URL" BGCOLOR=#rrvvaa TEXT=#rrvvaa LINK=#rrvvaa VLINK=#rrvvaa >

Estructura de los enlaces

<A HREF="xxx"> yyy </A>

1. Enlaces dentro de la misma página

<A HREF="#marca"> YYY </A> (Origen)

Ejemplo. Se observa una investigación de varios Capítulos. El salto o hipervínculo en la

2. Enlaces con otra página

< A HREF = ”segunda.html” > yyy < /A >

<A HREF=”segunda.html#final”> yyy < /A >

3. Enlaces con una página fuera de nuestro sistema

<A HREF="http://www.isphdelgadoe.edu.pe/"> Página del ISP HDE </A>

4. Enlaces con una dirección de E-mail

<A HREF="[email protected]"> comentarios a mi correo <A>

<P>TABLA CON ATRIBUTO COLSPAN<BR>

<P>TABLA CON ATRIBUTO ROWSPAN<BR>

<P>TABLA CON ATRIBUTOS ROWSPAN Y COLSPAN<BR>

Un documento con frames se define de manera diferente a un documento normal, siendo la

Existen unos valores especiales de TARGET=xxx

Donde xxx puede ser:

Desarrolle un proyecto denominado: proyectoPaginaBonita

<FORM> Definición de formularios

Dentro de la etiqueta de formulario se definirán los distintos elementos de petición de datos.

Los atributos que presenta la etiqueta FORM son los siguientes:

<INPUT> Entrada básica de datos

< INPUT TYPE=( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT |

A continuación se relatan los distintos tipos de instrucciones de entrada.

<INPUT TYPE=TEXT...> Texto corto

< INPUT TYPE=TEXT NAME="variable" VALUE="valor inicial" SIZE="tamaño"

<INPUT TYPE=PASSWORD...> Palabras secretas

<INPUT TYPE=CHECKBOX> Botones de selección

<INPUT TYPE=RADIO...> Selección entre múltiples opciones

Se usa cuando la opción puede tomar un valor simple de una serie de

<INPUT TYPE=HIDDEN...> Parámetros ocultos

<INPUT TYPE=SUBMIT...> Enviar Datos

< INPUT TYPE=SUBMIT VALUE="mensaje a mostrar" >

<INPUT TYPE=IMAGE...> Botón de Envío gráfico