Unidad 3. Desarrollo de Sitios Web

Programacin web I
Unidad 3. Desarrollo de sitios web
Ingeniera en Desarrollo de Software

7 Semestre
Programa de la asignatura:
Programacin web I

Clave:
15144738
Universidad Abierta y a Distancia de Mxico
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software
Programacin web I
ndice
Unidad 3. Desarrollo de sitios web ..................................................................................... 3
Presentacin de la unidad ................................................................................................. 3
Propsitos.......................................................................................................................... 4
Competencia especfica..................................................................................................... 4
3.1. Estructura JavaScript .................................................................................................. 4
Foro de dudas para el desarrollo de un sitio web ............................................................... 5
3.1.1. Objetos, funciones y mtodos sobre JavaScript ....................................................... 6
3.1.2. Eventos sobre JavaScript ........................................................................................ 9
3.1.3. JavaScript combinado con HTML........................................................................... 13
3.1.4. JavaScript y PHP ................................................................................................... 20
Actividad 1. Desarrollo de aplicaciones web con JavaScript ............................................ 28
3.2. Estructura ASP ......................................................................................................... 28
3.2.1. Contenidos bsicos ASP ........................................................................................ 29
3.2.2. Objetos y funciones de ASP................................................................................... 31
3.3. Base de datos para Web........................................................................................... 35
3.3.1. Tipos de base de datos .......................................................................................... 36
3.3.2. Instaladores de servidores web .............................................................................. 38
Actividad 2. Instalacin de servidor web .......................................................................... 39
3.3.3. Conectividad de base de datos con PHP ............................................................... 39
3.3.4. Insercin, consulta, edicin y eliminacin de registros ........................................... 39
Actividad 3. Conexin de base de datos .......................................................................... 40
Autoevaluacin ................................................................................................................ 40
Evidencia de aprendizaje. Construccin del sitio web. Parte 2......................................... 40
Autorreflexiones ............................................................................................................... 41
Cierre de la unidad .......................................................................................................... 41
Fuentes de consulta ........................................................................................................ 43
Programacin web I

Presentacin de la unidad
Es muy importante tener presente que en el proceso de desarrollo de un sitio web se
deben integrar recursos que lo hagan atractivo, y que faciliten la interactividad con los
usuarios que estn navegando en el sitio mediante las pginas web. Es importante que
sea ms factible para realizar la administracin del sitio y que se consideren las nuevas
tecnologas que permitan integrar los principios de usabilidad en el diseo y desarrollo de
los sitios web, tales como la evidencia, velocidad, retroalimentacin, exactitud, etctera, y
as facilitar el acceso y utilizacin de los sitios en la vida cotidiana del usuario. Para ello,
es recomendable utilizar el lenguaje de programacin JavaScript, que permite integrar
ms recursos a las pginas, dependiendo de los requerimientos de los usuarios y de la
organizacin para la cual se desarrolle el sitio.
Como futuro ingeniero en Desarrollo de Software puedes proponer que tu sitio web tenga
una mejor presentacin, aadiendo creatividad con el uso JavaScript, para realizar varias
acciones tales como animaciones, combinacin de colores, entre otros.
Para programar en JavaScript debes de contar con conocimientos de HTML, ya que
JavaScript se inserta en cdigo HTML de forma que el cdigo queda reflejado en la propia
pgina, y no es necesario cargarlo o llamarlo para su utilizacin. Esto quiere decir que
JavaScript no necesita compilacin, tiene la ventaja de que determinadas acciones
quedan en estado de espera hasta que el usuario realiza cierta accin; por ejemplo, pasar
el puntero del ratn sobre una imagen y que cambie a otra. Cabe mencionar que
JavaScript puede trabajar con PHP, con el fin de que se pueda:
Enviar informacin de un sitio web a un correo electrnico.

Generar un documento en PDF.
Almacenar la informacin que integre el usuario en los formularios para guardarse
en la base datos.
Estas acciones se pueden realizar en una sola con la ayuda de JavaScript. Tambin es
importante tener conocimiento de ASP, porque permite hacer una pgina ms interactiva
y funcional. Como ya se ha explicado anteriormente, ASP es una tecnologa de Microsoft
por lo que es ms exigente para trabajar con ella. Por otro lado, permite obtener de forma
simple y variada informacin especfica a los requerimientos. Ya no es necesario crear
nuevas pginas cada vez que se desee subir nueva informacin, ni estar remodelando
pginas publicadas, con la finalidad de tenerla al da. En la actualidad, con las pginas
web ASP, se pueden crear plantillas, conectarse a base de datos y mostrar as un
contenido distinto para cada requerimiento o necesidad que solicite el dueo del sitio web.
Otro punto muy importante es saber cmo se crean las bases de datos y se conectan en
las pginas web. En la actualidad, los sitios tienen de ms de una base de datos; esto es
porque permiten saber informacin de los usuarios, realizar trmites ms rpidos, hacer
pagos, etctera. Todo para que sean ms fciles y ms factibles para la empresa que
tiene su sitio web.
Algunas marcas que se mencionan en esta unidad son las siguientes:
Programacin web I
JavaScript, marca registrada de Sun Microsystems Inc.

CuteFTP, aplicacin para la transferencia de archivos por FTP, de GlobalSCAPE Inc.
Propsitos
Al trmino de esta unidad logrars:
Identificar la estructura de JavaScript de un sitio web.

Integrar interactividad en las pginas web creando objetos de JavaScript.
Identificar la combinacin de JavaScript con HTML.
Comprender la utilidad de JavaScript en PHP.
Comprender el concepto bsico de ASP.
Identificar bases de datos.
Crear bases de datos en la construccin del sitio web.
Competencia especfica
Implementar un sitio web en un servidor de prueba para posibilitar la manipulacin

de registros mediante la conexin de bases de datos.
3.1. Estructura JavaScript

En este tema se expondr lo referente a la estructura de JavaScript, que es un lenguaje
interpretado y usado para mltiples propsitos, pero slo considerado como un
complemento en la construccin de sitios web. Se presenta como un lenguaje de
desarrollo de aplicaciones cliente/servidor a travs de Internet []. Es un lenguaje
compacto, y basado en objetos, diseado para el desarrollo de aplicaciones clienteservidor a travs de Internet (Snchez, 2001, pp. 9-10).
Como se explic en la Unidad 1. Fundamentos web, gracias a JavaScript es posible
desarrollar programas que se ejecuten directamente en el navegador, de manera que
pueda efectuar determinadas operaciones o tomar decisiones sin necesidad de acceder al
servidor. Por ejemplo, al desarrollar un programa que verifique una clave de acceso a una
pgina web, JavaScript debe comprobar la informacin dada por el usuario, corroborar
que sea correcta y actuar en consecuencia.
El cdigo de JavaScript va incluido o embebido, como se suele decir, dentro de un
documento HTML. Se recomienda que dicho cdigo vaya insertado en la cabecera del
documento; es decir, entre las etiquetas <head> y </head>. De esta manera, se posibilita
que se cargue el script antes de ser llamado dentro del cuerpo del documento con las
etiquetas <body></body>; si fuera al revs, es muy posible que la llamada se realice a un
elemento que an no ha sido declarado y no habra nada a qu referirse. La estructura de
JavaScript genrica es la siguiente (Snchez, 2001, p. 16):
Programacin web I
<script language=JavaScript>
<!Apertura de etiqueta de ocultamiento
//Cdigo, funciones, objetos, etc.
//Cierre de etiqueta de ocultamiento -->
</script>
Estructura genrica de JavaScript. Fuente: Snchez, 2001, p. 16.
La etiqueta <script> es el nico atributo actualmente fijo sin cambio alguno. Se usa para
indicar el lenguaje de elaboracin de JavaScript (Snchez, 2001).
Los cdigos JavaScript se pueden colocar en la cabecera o en el cuerpo del documento,
dependiendo de la lgica de cada programador y de la necesidad que vayan surgiendo en
la construccin de la pgina web. En los subtemas que conforman este tema, se explicar
con mayor detalle la forma de integrar estos cdigos, as como las ubicaciones idneas
para ellos, dependiendo del objetivo con el que se utilice en la elaboracin de las pginas
de un sitio web.
En el primer subtema, 3.1.1. Objetos, funciones y mtodos sobre JavaScript, se explicar
en qu consisten as como sus funcionalidades, lo que permite mayor interactividad y se
utiliza en la programacin orientada a objetos para la construccin del sitio web, as como
la facilidad con la que se logra mediante los objetos, funciones y mtodos de JavaScript.
(Snchez, 2001).
En el segundo subtema, 3.1.2. Eventos sobre JavaScript, se explicar la forma en que
JavaScript trabaja con eventos gracias a los manipuladores o manejadores de eventos
que incorpora este programa; por ejemplo, si el usuario da clic sobre un botn en una
pgina web, se produce un evento y el correspondiente manejador del evento clic, en este
caso OnClick, registrar la accin y realizar las tareas que se le hayan asignado en tal
caso (Brito, 2009).
En el tercer subtema, 3.1.3. JavaScript combinado con HTML, se expondr cmo funciona
JavaScript en un documento HTML. Esto hace posible que cuando se visualice la pgina
web en un navegador, se observe el funcionamiento de lo que se program en JavaScript.
A la combinacin de JavaScript con HTML se le conoce como JavaScript interno
(Gutirrez, 2009).
En el cuarto subtema, 3.1.4 JavaScript y PHP, se expondr la utilizacin y funcionamiento
de los dos lenguajes de programacin web: JavaScript y PHP, lo que permitir que las
pginas sean ms interactivas.
Foro de dudas para el desarrollo de un sitio web

Este foro no es ponderable y estar permanentemente abierto en el transcurso de la
unidad para realizar ejercicios no ponderables y compartir dudas, inquietudes,
observaciones, etctera, en relacin con el desarrollo de los sitios web.
Programacin web I
3.1.1. Objetos, funciones y mtodos sobre JavaScript

En la creacin de una pgina web donde se requieran recursos de interactividad y
funcionalidades diversas, es posible utilizar objetos, funciones y mtodos de
JavaScript.
En JavaScript se identifican una serie de objetos sobre los que se puede interactuar,
tales como las ventanas, las pginas, las imgenes o los formularios, por ejemplo, el
objeto ventana tendr, entre otras, una propiedad que sea el de su ancho. Un mtodo
funciones, en el caso de JavaScript, asociado a este objeto ser la que abre una nueva
ventana.
Es posible crear objetos propios o utilizar los implementados por el lenguaje JavaScript.
Esto quiere decir que tiene una serie de propiedades asociadas a l. Para acceder a ellas,
segn Goodman (2007), se declara de la siguiente manera:
nombre_objeto.nombre_mtodo (argumentos)
nombre_objeto.nombre_propiedad
Se expone a continuacin un ejemplo para entender el funcionamiento de los objetos de

JavaScript. Se asignar como nombre de objeto Profesor, con tres propiedades: nombre,
ao de nacimiento y nacionalidad:
profesor.nombre = Monserrat Milln
profesor.anio_nacimiento = 1986
profesor.nacionalidad = Mexicana
Segn este ejemplo, para acceder a las distintas propiedades del objeto se deber indicar
el nombre del dicho objeto y de la propiedad, ambos separados por un punto.
Se puede decir, con base en Gutirrez (2009), que las funciones sobre JavaScript son
una serie de instrucciones que realizan una determinada tarea. A las funciones se le
inserta un nombre que luego puede ser utilizado en el cdigo de la pgina web. Esto
quiere decir que las funciones son la base JavaScript por lo cual una funcin es un
conjunto de sentencias de JavaScript que realizan algunas tareas especficas (p. 92).
Antes de utilizar una funcin de JavaScript en el cdigo de la pgina, se explicar qu
operaciones son las que debe hacer la funcin. La funcin en JavaScript se define y se
representa de la siguiente manera:
function nombredelafuncin (argumento1, argumento2,...)

{
instrucciones que debe realizar la funcin
}
Funcin en JavaScript. Fuente: Gutirrez, 2009.
Programacin web I
A continuacin, se muestra un ejemplo sencillo en el que se define una funcin llamada

bienvenidos, que posteriormente mostrar la siguiente cadena de texto:
function bienvenidos ()
{
document.write ( Se les da la bienvenida a los alumnos de la carrera en Ingeniera en
Desarrollo de Software);
}
Ejemplo de funcin en JavaScript
En este ejemplo, lo que se hace es llamar a la funcin. Basta con poner el nombre
seguido de los parntesis. En este caso, se define una funcin que muestra texto en la
posicin actual del cursor.
Como expresa Goodman (2007). Un mtodo es una funcin asociada a un objeto y
particular a los objetos del tipo que la define. Los mtodos se define en el mismo sitio que
las funciones y de las misma manera, asocindolos posteriormente a un objeto existente
(p. 85). Significa que un mtodo es una accin que se ejecuta sobre los datos de un
objeto.
La sintaxis para definir un mtodo en JavaScript es la siguiente:
Objeto.nombremetodo = nombre funcin
Sintaxis para definir un mtodo en JavaScript. Fuente: Goodman, 2007.
La llamada del mtodo, se hace de la siguiente forma:

Objeto.nombremetodo (parametro1, parametro2, parametro3)
Sintaxis para hacer la llamada del mtodo en JavaScript. Fuente: Goodman, 2007.
A continuacin, se expone un ejemplo con base en objetos, funciones y mtodos en

JavaScript. Para crear objetos propios, se mostrar un ejemplo en dos formas diferentes:
Ejemplo1
En ste, slo se declara el nombre de la funcin y las variables que la compondrn.
Programacin web I
Donde:
this hace siempre referencia al objeto actual.
Ejemplo 2
Aqu se crear una instancia del objeto usando new, atributo del objeto de JavaScript.
Para ello se le asigna una funcin al objeto que calcule la edad del profesor. Para hacerlo
ms simple, slo se restar al ao actual el ao de nacimiento. Un objeto document
permite que se proporcione propiedades y mtodos para poder acceder a otros objetos
dentro de todo el cdigo de JavaScript. Claro est, esto depende de lo que se necesite.
La estructura para saber la edad del profesor con base en el objeto document es la
siguiente:
function calcula_edad( ) {
var edad = 2014 - this.anio_nacimiento;
document.write(Su edad es: <b> + edad + </b>)
}
La funcin se podra escribir en una lnea, pero de esta forma puedes observar cmo
declarar una variable, explcitamente. El tipo se les asigna implcitamente, con base en
el objeto document.
Programacin web I
La utilizacin de los objetos, funciones y mtodos sobre JavaScript en la realizacin de la

paginas web permite que sea ms interactivo tu sitio web; por ejemplo, cuando se
requiere enviar un formulario y un campo obligatorio no est lleno, se genera un aviso
indicando que hace falta llenarlo antes del envo, y slo se pueden enviar los datos
cuando se est conectado a una base de datos.
3.1.2. Eventos sobre JavaScript

En este subtema se revisarn los eventos de JavaScript. Es muy importante pues permite
que la pgina web pueda realizar varias acciones. Como expresa Remoaldo (2008), los
eventos son acciones que suceden cuando el usuario realiza alguna accin sobre algn
control de la pgina web, como hacer un clic para activar un link, etctera. Tambin son
eventos, desplazar el ratn, teclear algo en una caja de edicin, etctera (p. 187).
A continuacin, se explican los objetos y propiedades de JavaScript que se integran en
una pgina web, segn lo expuesto por Ors (2011):
Windows: es el objeto de ms alto nivel, contiene las propiedades de la
ventana, trabaja con frames, un objeto Windows es generado para cada
frame.
Document: agrupa las propiedades del documento actual, tales como el
ttulo, formularios, imgenes, colores de texto o fondo.
History: objeto que contiene las propiedades que representan a las URL
que el usuario ha visitado anteriormente.
Location: contiene las propiedades de la URL activa. (p. 121)
JavaScript trabaja con eventos gracias a los manipuladores o manejadores de eventos

que incorpora. Los eventos son sucesos que ocurren en el sistema cuando un usuario
ejecuta algn tipo de accin.
A continuacin se muestran los tipos de eventos de JavaScript:
Tipos de Recursos donde
eventos en
se aplican
Java Script
Abort
Imgenes
Funcionalidad
El usuario cancela la carga de una

imagen (por ejemplo, hace clic en un
enlace o en el botn Stop).
Controlador
de eventos
OnAbort
Programacin web I
El usuario quita el foco (el punto de

insercin) de entrada de ventana o
formulario de elemento.
Blur
Ventanas
y todos los
elementos
de un
formulario
Change
Se utiliza en los El usuario cambia el valor del

elementos que
elemento que compone un formulario.
componen un
formulario ( text
fields,
textareas, select)
lists
Clic
Se utiliza en
buttons, radio
buttons,
checkboxes,
submit buttons,
reset buttons,
links
El usuario da clic en el elemento de

OnClick
formulario o enlace. Esto para mostrar
un cuadro de dilogo con un mensaje
de informacin, o una confirmacin
antes de ser enviada a la base de
datos.
DragDrop
Ventanas
El usuario suelta un objeto en la

OnDragDrop
ventana del navegador, como la cada
de un archivo en un navegador.
Error
Imgenes,
Ventanas
Ventanas y
todos los
elementos de los
formularios
Permite la carga de un documento o

imgenes que causan un error.
Permite la entrada en la ventana o
elemento de formulario.
OnError
Documentos,
Imgenes,
enlaces, reas
de texto.
Permite que el usuario presione la

tecla abajo.
OnKeyDown
Focus
KeyDown
OnBlur
OnChange
OnFocus
10
Programacin web I
KeyPress
Documentos,
imgenes,
enlaces, reas
de texto
Permite que el usuario presione la

tecla arriba.
KeyUp
Documentos,
imgenes,
enlaces, reas
de texto
Permite que el usuario libere una tecla. OnKeyUp
Load
Documentos
El usuario carga la pgina en el

navegador.
OnKeyPress
OnLoad
El usuario pulsa un botn del ratn.

MouseDown Documentos,
botones, enlaces
OnMouseDow
n
MouseMove Nada, esto es por El usuario mueve el cursor.

default
OnMouseMov
e
MouseOut
reas y enlances Desplaza el cursor del usuario o de un OnMouseOut

cliente al lado de la imagen del mapa o
enlace.
MouseOver Enlaces
MouseUp
Documentos
El usuario mueve el cursor sobre un

Enlace.
OnMouseOver
El usuario libera un botn del ratn.
OnMouseUp
Eventos de JavaScript. Fuente: Snchez, 2001.
11
Programacin web I
A continuacin, se expone una lista de los eventos de los JavaScript ms comunes y se

menciona cundo se producen. La diferencia de estos eventos es que, sobre las
etiquetas, pueden actuar ms especficamente con HTML.
Evento
onLoad
Se produce al
Cargar el documento HTML.
Etiqueta HTML
BODY
onUnload
Abandonar el documento HTML.
BODY
onMouseOver
Pasar el ratn por encima del enlace.
onMouseOut
Sacar el ratn de encima del enlace.
onClick
Dar clic sobre un link o un campo de

A, FORM
formulario.
Enviar el formulario.
FORM
Activar un campo de edicin de un formulario. INPUT
onSubmit
onFocus
onSelect
onBlur
onChange
Seleccionar un campo de edicin de un

formulario.
Deseleccionar un campo de edicin de un
formulario.
Cambiar el contenido de un campo de
edicin, o de seleccin de un formulario.
INPUT
INPUT
INPUT, SELECT
Eventos de JavaScript que actan sobre las etiquetas HTML. Fuente: Snchez, 2001.
Estos eventos se utilizan, por ejemplo, si el usuario da clic sobre el botn de la pgina
web. El correspondiente manejador del evento clic, en este caso Onclick, registrar la
accin y realizar las tareas que se le hayan asignado.
A continuacin se muestra un ejemplo de la forma en que se programa onClick en
JavaScript:
Ejemplo de programacin del evento onClick en JavaScript
12
Programacin web I
En este ejemplo se utiliza el evento onClick, lo que hace que el usuario cuando da clic en
el elemento llamado Entrar se abra una venta que dice Bienvenidos alumnos de
Ingeniera en Desarrollo de Software.
En la imagen se muestra el resultado del cdigo evento onClick
Ejemplo de aplicacin onClick. Basado en: Snchez, 2001.
Es posible visualizar en todos los navegadores web los eventos programados en las
pginas mediante JavaScript.
Por ltimo, es muy importante considerar que tambin existen los objetos del
navegador. Son lo que permiten controlar la navegacin de una pgina web de manera
dinmica. Se utilizan cuando se carga una pgina web en el navegador y se crea un
nmero de objetos caractersticos, segn el contenido de dicha pgina (Snchez, 2001).
Los eventos sobre JavaScript son utilizados para ejecutar funciones que no sern
iniciadas hasta que el evento se ejecute; por lo tanto, te ayudarn en la realizacin de tus
formularios; por ejemplo, cuando el usuario llena un formulario y da clic en enviar, lo que
hace el evento es hacer que se guarde la informacin en la base de datos, y se genere un
formato en PDF integrando o almacenando la informacin con la que fue llenado el
formulario, en este caso el evento realiz dos acciones:
Almacenar la base de datos
Generar un formato PDF
3.1.3. JavaScript combinado con HTML
13
Programacin web I
En este subtema revisars la importancia que tiene JavaScript combinado con HTML.
Como se ha dicho en las unidades anteriores, HTML es el lenguaje principal para el
funcionamiento de los dems lenguajes de programacin web; en este caso, con
JavaScript permite que se visualice lo que se introdujo de cdigo. Se podr visualiza la
interfaz grfica en lo navegadores web.
JavaScript es un sencillo lenguaje de programacin que presenta una caracterstica
especial: sus programas, llamados comnmente scripts en las pginas HTML, se ejecutan
en todos los navegadores. Estos scripts normalmente consisten en funciones que son
llamadas desde el propio HTML cuando algn evento se acciona.
A continuacin, se exponen ejemplos de la combinacin de JavaScript con HTML. En el
siguiente ejemplo se mostrar la utilizacin de onClick y de funciones de JavaScript con
HTML (Brito, N. 2009):
Ejemplo del funcionamiento del evento onClick
Para consultar el resultado cdigo anterior, as como el funcionamiento que tiene el

evento onClick y la funcin, revisa el video Ejemplo de aplicacin del evento onClick y
explicacin de su funcionamiento.
14
Programacin web I
Para consultar el recurso de video Ejemplo de

aplicacin del evento onClick y explicacin de su
funcionamiento da clic en la imagen de la izquierda
(es recomendable que descargues el recurso para
una mejor visualizacin).
En el siguiente ejemplo se expone el uso del evento JavaScript window.print (), segn lo
expuesto por Brito, (2009):
Ejemplo de uso del evento JavaScript window.print ()
Para observar el resultado de este cdigo y la explicacin del funcionamiento del evento
JavaScript window.print (), observa el video Ejemplo de aplicacin del evento
window.print() y explicacin de su funcionalidad.
aplicacin del evento window.print() y explicacin de
su funcionalidad, da clic en la imagen de la derecha
(es recomendable que descargues el recurso para
una mejor visualizacin).
JavaScript puede programarse en un documento aparte del propio de HTML, pero esto
no quiere decir que no deba utilizarse en un HTML. Cuando se programa slo en
JavaScript se guarda con la extensin .js. Una vez que se guard con esta extensin, se
construye la pgina web en HTML y se manda llamar el documento, por ejemplo
calendario.js, dentro de la pgina web HTML como a continuacin se muestra, segn lo
expuesto por Gutirrez (2009):
15
Programacin web I
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xHTML" lang="en" xml:lang="en">
<head>
<title>CAPTURA CONTROL COLABORADOR</title>

<script language="JavaScript" src="calendar_us.js"></script>
<!-#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 825px;
top: 200px;
}
-->
</style>
</head>
<body>
<div id="Layer1">
<form name="testform">
<input type="text" name="testinput2" id="myOtherInput" />

<script language="JavaScript">
// whole calendar template can be redefined per individual calendar
var A_CALTPL = {
'weekdays' : ['do', 'lu', 'ma', 'mi', 'ju', 'vi', 'sa'],
'yearscroll': true,
'months' : ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio',
'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
'weekstart': 0,
'centyear' : 70,
'imgpath' : 'img/'
}
new tcal ({
// if referenced by ID then form name is not required
'controlname': 'myOtherInput'
}, A_CALTPL);
</script>
</form>
16
Programacin web I
</div>
</body>
</HTML>
En el ejemplo anterior se muestra cmo se utiliza la sintaxis siguiente:
<script language="JavaScript" src="calendar_us.js"></script>
La sintaxis anterior permite llamar la estructura del calendario (Gutirrez, 2009). El archivo
calendar_us.js tiene cdigo de JavaScript. Para revisar el ejemplo anterior, observa el
video Ejemplo de aplicacin de ficheros externos con JavaScript, donde observars cmo
se elabora un calendario mediante un fichero en JavaScript con la combinacin de HTML.
Es decir, observars el resultado del cdigo anterior y una explicacin sobre la
funcionalidad del fichero calendar_us.js:
Para consultar el recurso de video Ejemplo de aplicacin de ficheros
externos con JavaScript, da clic en la imagen de la izquierda (es
recomendable que descargues el recurso para una mejor
visualizacin).
A continuacin se muestra un ejercicio con el evento onMouseOver y la funcin de

JavaScript, especficamente con HTML, de acuerdo con Brito (2009):
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function carga(nom)
{
nombo = nom + "2.jpg";
document.images[nom].src = nombo;
}
function descarga(nom)
{
nombo = nom + ".jpg";
document.images[nom].src = nombo;
}
</SCRIPT>
</HEAD>
<BODY bgcolor="red">
<a href="ejer1.HTML" onmouseover="carga('dos.jpg')"
onmouseout="descarga('dos.jpg')";>
<img src="unad.jpg" name="unad" border=0></a>
<p>
<a href="ejercicio2.HTML" onmouseover="carga('unad')"
onmouseout="descarga('unad')";> <img
src="dos.jpg" name="dos" border=0></a>
17
Programacin web I
</BODY>
</HTML>
Para observar el resultado del ejemplo anterior respecto a la funcin de JavaScript,
especficamente con HTML, se mostrar el resultado con el evento onMouseOver.
Revisa el recurso de video Ejemplo de aplicacin de cdigo con el evento onMouseOver.
aplicacin de cdigo con el evento onMouseOver da
clic en la imagen de la derecha (es recomendable
que descargues el recurso para una mejor
visualizacin).
Se realizar otro ejercicio de JavaScript con combinacin HTML. En el siguiente cdigo se

utiliza la condicin IF, segn lo planteado por Remoaldo (2008):
<HTML xmlns="http://www.w3.org/1999/xHTML">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
<title>Ejercicio 5 - Estructuras de control, IF</title>
<script type="text/JavaScript">
var numero1 = 5;
var numero2 = 8;
if(numero1 <= numero2) {
alert("nmero1 no es mayor que nmero2");
}
if(numero2 >= 0) {
alert("nmero2 es positivo");
}
if(numero1 < 0 || numero1 != 0) {
alert("nmero1 es negativo o distinto de cero");
}
if(++numero1 < numero2) {
alert("Incrementar en 1 unidad el valor de nmero1 no lo hace mayor o igual que
nmero2");
}
</script>
</head>
<body>
<p>Esta pgina muestra el uso bsico de la estructura de control IF</p>
</body>
</HTML>
18
Programacin web I
Para observar el resultado del ejemplo anterior, revisa el video Condicin IF en JavaScript
y HTML.
Para consultar el recurso de video Condicin IF en
JavaScript y HTML da clic en la imagen de la
derecha (es recomendable que descargues el
recurso para una mejor visualizacin).
En el siguiente ejemplo, se expone un cuadro de mensajes utilizando mtodos de alerta,

segn lo expuesto por Goodman (2007).
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
<title>Mostrar mensajes complejos</title>
var mensaje = "Recuerda actualizar tu antivirus cada 30 das! \UnadMexico \'septimo
semestre\' \n alert(mensaje);
</script>
</head>
<body>
<p>Esta pgina muestra mensajes de UNADM</p>
</body>
</HTML>
Para visualizar el resultado del cuadro de mensajes utilizando los mtodos de alerta que
se exponen en el ejemplo anterior, revisa el video Ejemplo de aplicacin del mtodo de
Alert.
Para consultar el recurso de Ejemplo de aplicacin

del mtodo de Alert, da clic en la imagen de la
derecha (es recomendable que descargues el
recurso para una mejor visualizacin).
En este subtema, se expuso la importancia de la utilizacin del lenguaje de programacin

de HTML para JavaScript. Es recomendable que, para la construccin de tu sitio web,
ingreses cdigos de JavaScript a tus pginas web, ya que har que tu sitio sea ms
interactivo. Recuerda que el cdigo de programa de JavaScript, llamado script, se
introduce directamente en el documento de HTML y no necesita ser compilado. Es el
propio navegador el que se encarga de traducirlo.
19
Programacin web I
3.1.4. JavaScript y PHP

JavaScript es un lenguaje de programacin que permite realizar funcionalidades
especficas dentro las pginas web del lado del cliente, y PHP es un lenguaje que se basa
en la creacin y conectividad de las bases de datos del lado del servidor. Esto quiere decir
que el valor no pasa de JavaScript a PHP, lo que realizan estos dos lenguajes de
programacin web consiste en presentar el resultado en pantalla como formato de texto
(Snchez, 2001).
JavaScript facilita acciones tales como enviar un error al usuario cuando se est
realizando o llenando un formulario y no est completo o listo para ser almacenado en la
base de datos elaborada en PHP. Al dar clic en enviar, aparecer un cuadro de dilogo
con la indicacin de que no est completo el formulario. JavaScript permitir al usuario
avisarle que no ha completado el formulario en su totalidad.
Otro ejemplo: en un formulario que pida la fecha se introduce el calendario que est
hecho en JavaScript, ah el usuario slo busca la fecha y se almacena cuando se la enva
a la base de datos.
20
Programacin web I
Trabajar con estos dos lenguajes de programacin web depende de la creacin de la

lgica de cada programador. En este caso t, como ingeniero en Desarrollo de Software,
tendrs la facilidad para trabajar con estos lenguajes y hacer infinidades de pginas, ya
que tienes los conocimientos necesarios de programacin. Tambin depender de lo que
solicite la empresa.
A continuacin, se muestra un cdigo de programacin web utilizando los dos lenguajes:
PHP y JavaScript.
El siguiente cdigo tiene la finalidad de permitir que, cuando el usuario llene el formulario,
los datos se almacenen en la base y puedan ser enviados a una direccin de correo
electrnico, ya definida desde el cdigo (Goodman, 2007).
21
Programacin web I

<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
<title>:::::LINEA DE COMPRAS:::::</title>

<script type="text/JavaScript" src="validar.js"></script>

<style type="text/css">
body,td,th {
font-family: "Arial Black";
font-size: 18px;
color: #56006A;
}
a:link {
color: #56006A;
}
a:visited {
color: #56006A;
}
a:hover {
color: #56006A;
}
a:active {
color: #56006A;
}
</style>
<!-function doubleSubmit(f)
{
// submit to action in form
f.submit();
// set second action and submit
f.target="_parent";
f.action="conex.php";
f.submit();
return false;
}
//-->
</script>
</head>
Este cdigo est elaborado en

JavaScript. Es una funcin con un
mtodo. Esto permite que el formulario
en PHP sea contestado por el usuario,
pueda ser enviado a la base de datos
y, al mismo momento, abrir el correo
electrnico con los datos que se
capturaron al rellenar el formulario
PHP.
<body>
<P align="right"><a href="<?php echo $logoutAction ?>">CERRAR</a></P>
<p align="center"><img src="imagenes/NEZA1.jpg" width="230" height="314" /></p>
22
Programacin web I
<form id="form1" name="form1" method="post" action="">

<p>
<label for="id"></label>
</p>
<fieldset>
<p>
<label for="textfield">Nmero de orden</label>
:
<input name="num_orden" type="text" id="num_orden"value="<?php echo $next_id; ?>"
disabled />
</p></fieldset>
<p> </p>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<fieldset>
<marquee>
<p>::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
</p></marquee>
</fieldset>
<fieldset>
<legend align="left"><font color="#FFE000">Lnea de compras</font></legend>
<form>
<p> Clase de producto:
<select name="id" id="id" onchange="submit()">
<option value=""> </option>
<?php
do {
?>
<option value="<?php echo $row_Recordset1['id']?>"<?php if
(!(strcmp($row_Recordset1['id'], $_POST['id']))) {echo "selected=\"selected\"";} ?>><?php
echo $row_Recordset1['cod_depa']?></option>
<?php
} while ($row_Recordset1 = mysql_fetch_assoc($Recordset1));
$rows = mysql_num_rows($Recordset1);
if($rows > 0) {
mysql_data_seek($Recordset1, 0);
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
}
?>
</select></p>
23
Programacin web I
Producto:
<select name="id_producto" id="id_producto" onchange="submit()">
<option value="">Seleccione una opcion:</option>
<?php
do {
?>
<option value="<?php echo $row_Recordset2['id_producto']?>"<?php if
(!(strcmp($row_Recordset2['id_producto'], $_POST['id_producto']))) {echo
"selected=\"selected\"";} ?>><?php echo $row_Recordset2['nombreproducto']?></option>
<?php
if($rows > 0) {
}
En esta parte del cdigo, se observa la forma en que se declaran los
?>
correos electrnicos a donde ser enviada la informacin que se
introduzca al llenar el formulario elaborado con PHP.
</select>
</form>
<form action="mailto:lbellazetin@undad.com.mx?subject= ORDEN DE
COMPRAS&body=Se requiere autorizar la Orden Numero: <?php echo $next_id; ?> con
fecha de <?php include('fecha.php')?>-<?php include('hora.php') ?> "
enctype="multipart/form-data" method="post" onsubmit="doubleSubmit(this);">
<input name="id_producto" type="hidden" id="id_producto" value="<?php echo $id; ?>" />
<label for="nombreproducto"></label>
<select name="nombreproducto" id="nombreproducto">
<option value="">Seleccione otra vez el producto:</option>
<?php
do {
?>
<option value="<?php echo $row_Recordset4['nombreproducto']?>"<?php if
(!(strcmp($row_Recordset4['nombreproducto'], $_POST['nombreproducto']))) {echo
"selected=\"selected\"";} ?>><?php echo $row_Recordset4['nombreproducto']?></option>
<?php
if($rows > 0) {
}
?>
</select>
Proveedor:
<select name="proveedor" id="proveedor">
<option value="">Seleccione una opcion:</option>
<?php
24
Programacin web I
do {
?>
<option value="<?php echo $row_Recordset3['proveedor']?>"<?php if
(!(strcmp($row_Recordset3['proveedor'], $_POST['proveedor']))) {echo
"selected=\"selected\"";} ?>><?php echo $row_Recordset3['proveedor']?></option>
<?php
if($rows > 0) {
}
?>
</select>
<p>Otro Producto/Productos Varios**
:
<textarea name="otro_producto" id="otro_producto"></textarea>
<label for="comprar"></label>
<label for="cotizar"></label>
Cantidad:
<input name="cantidad" type="text" id="cantidad" size="15" />
</p>
<h6>**(En caso si no se encuentra el Producto)</h6>
<p>Unidad:
<select name="unidad" size="1" id="unidad" value="<?php echo $_POST[departamento]
?>" >
<option value="Bolsa(s)">Bolsas(s)</option>
<option value="Caja(s)">Caja(s)</option>
<option value="Galon(es)">Galon(es)</option>
<option value="Litro(s)">Litro(s)</option>
<option value="Metro(s)">Metro(s)</option>
<option value="Milimetro(s)">Milimetro(s)</option>
<option value="Pieza(s)">Pieza(s)</option>
<option value="Paquete(s)">Paquete(s)</option>
</select>
Solicitar autorizacin:
<input name="autorizacion" type="checkbox" id="autorizacion" value="Solicito
Autorizacin" />
</p>
<p>
Solicitante:
<label for="requisitor"></label>
<input name="requisitor" type="text" id="requisitor" size="40" />
<input name="estado" type="hidden" id="estado" value="Nuevo" />
</p>
<p>Departamento:
<label for="select2"></label>
25
Programacin web I
<select name="departamento" size="1" value="<?php echo $_POST[departamento]

?>" >
<option value=" " ></option>
<option value="AD-Administracion">AD-Administracin</option>
<option value="AF-Atencion Familiar">AF-Atencin familiar</option>
<option value="AP-Atencion al Publico">AP-Atencion al pblico</option>
<option value="DG-Direccion General">DG-Direccin general</option>
<option value="DH-Desarrollo Humano">DH-Desarrollo humano</option>
<option value="DM-Direccion Medica" selected="selected">DM-Direccion Medica</option>
<option value="DO-Direccion de Operaciones">DO-Direccion de Operaciones</option>
<option value="EN-Enfermeria">EN-Enfermeria</option>
<option value="IN-Inter Consultantes">IN-Inter Consultantes</option>
<option value="IS-Integracion Social">IS-Integracin social</option>
<option value="MA-Medico Acompaante">MA-Mdico acompaante</option>
<option value="PE-Proyectos Especiales">PE-Proyectos especiales</option>
<option value="PS-Psicologia">PS-Psicologa</option>
<option value="RM-Recursos Materiales">RM-Recursos materiales</option>
<option value="RP-Relaciones Publicas">RP-Relaciones pblicas</option>
<option value="SI-Sistemas">SI-Sistemas</option>
<option value="TF-Terapia Fisica">TF-Terapia fsica</option>
<option value="TO-Terapia Ocupacional">TO-Terapia ocupacional</option>
<option value="TP-Terapia de Lenguage">TL-Terapia de lenguage</option>
<option value="VO-Voluntaria">VO-Voluntaria</option>
</select>
Fecha de orden:
<label for="textfield"></label>
<input type="text" name="fecha_orden" readonly="readonly" style="width:auto"
value="<?php include('fecha.php')?>-<?php include('hora.php')?>" size="22" >
</p>
<blockquote>
<blockquote>
<p> Observacin:</p>
<blockquote>
<blockquote>
<p align="left">
<label for="otro_producto">
<textarea name="observacion" id="observacion" cols="45" rows="5"></textarea>
</label>
</p>
</blockquote>
<p align="center" id="observacion" name="observacion" cols="45"
rows="5"> </p>
<blockquote>
<p align="left">
<label for="textfield"></label>
</p>
26
Programacin web I
</blockquote>
</blockquote>
</blockquote>
</blockquote>
<p align="center">
<label for="id_producto"></label>
<input type="hidden" name="num_orden" value="<?php echo $next_id; ?>"/>
<input type="submit" name="enviar" id="enviar" value="Enviar"

onclick="check(this.value)"/>
<INPUT type="reset" name="borrar" value="Borrar">
</p>
<p>
Se muestra el cdigo de
<label for="id_proveedor"></label>
JavaScript donde se utiliz
</p>
el mtodo para realizar las
</form></form>
dos acciones utilizando el
</fieldset>
evento onclick.
<fieldset>
<marquee>
<p>::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
</p></marquee>
</fieldset>
<fieldset>
<p> </p>
<p> </p>
</fieldset>
</body>
</HTML>
<?php
mysql_free_result($Recordset1);
?>
Revisa el resultado del ejemplo anterior en el video Ejemplo de combinacin de
JavaScript con PHP .
Para consultar el recurso de video Ejemplo de combinacin de JavaScript con
PHP, da clic en la imagen de la izquierda (es recomendable que descargues el
recurso para una mejor visualizacin). .
27
Programacin web I
Como observaste, realizar pginas web con JavaScript y PHP es muy interesante, slo
tiene como lmite tu creatividad y lgica para hacer que tus pginas web cuenten con los
estndares de calidad y capten cada vez ms usuarios. En este tema visualizaste que
trabajar con JavaScript no es complicado, pues algunos de sus cdigos ya los aplicaste
en otros lenguajes de programacin, pues slo cambi la manera de declarar. Tambin
observaste que, para ver si es correcto el cdigo, es necesario que se trabaje con HTML,
lo que permitir visualizar el navegador web. JavaScript no se compila como otros
lenguajes de programacin, con esto t podrs agregar cdigo de JavaScript en las
pginas ya desarrolladas en tu proyecto de sitio web en la Unidad 2. Diseo de sitios web,
y hacer que se vuelvan ms interactivas.
Actividad 1. Desarrollo de aplicaciones web con JavaScript

Realiza la actividad siguiendo las instrucciones de la misma y las indicaciones del
Docente en lnea.
3.2. Estructura ASP

En este subtema se explicar el lenguaje de programacin web ASP. El objetivo de usar
ASP es que permite obtener, de forma simple y variada, informacin especfica de los
requerimientos de la creacin de pginas web. Ya no es necesario crear nuevas pginas
cada vez que se desee subir nueva informacin, ni remodelar pginas publicadas, con la
finalidad de lograr tener al da toda la informacin. En la actualidad, con ASP se crean
plantillas para cualquier sitio web en general. ASP no es ms que pginas en HTML con
algunos cambios; por ejemplo, la conexin de base de datos. Recuerda que HTML no
hace conectividad con el servidor web para lo conexin de la bases de datos, y con ASP
s. Normalmente, las paginas ASP tiene la extensin .asp y pueden contener comandos
de HTML, pero aprender ASP se vuelve ms interesante cuando se integra en la pgina
funciones adicionales; esto es, a la lneas de programas que el usuario no ve ni detecta
en su navegador porque se procesan en el servidor.
El trmino ASP son las siglas de active server page, mtodo para crear programas que se
ejecutan en un servidor de Web. Como sucede en otros lenguajes de programacin, ASP
tiene su estructura de cdigo. Dado que se encuentra dentro del cdigo de HTML, es
necesario indicarle al servidor qu partes estn escritas en un lenguaje y cuales en otro.
Al igual que HTML, el cdigo ASP tiene su etiqueta de inicio y fin, por lo cual en ASP se
declara de la siguiente forma:
<% lnea de cdigo %>
Esta sintaxis es muy importante, ya que con saber cmo va estructurada se podr
identificar que es una pgina web ASP; por otro lado, se podr trabajar con bases de
datos.
En este tema se vern los siguientes subtemas:
28
Programacin web I
En el subtema 3.2.1. Contenidos bsicos ASP, se visualizar que ASP es un archivo de

texto con extensin .asp, que contiene cualquier combinacin de los siguientes
elementos: HTML y lenguaje del servidor web (Wenz, Rennhaus y Kordwing, 2001).
En el subtema 3.2.2. Objetos y Funciones de ASP, se aprender que en ASP hay algunos
objetos estndar predefinidos, que juegan un papel determinante en la aplicacin de las
posibilidades de ASP y sus funciones. Hay algunas prcticas para manejar arrays,
subtipos y datos de fecha y hora para aplicarlas a tus pginas web (Wenz, Rennhaus y
Kordwing, 2001).
3.2.1. Contenidos bsicos ASP

Las necesidades de la empresas estn siendo cambiadas por los continuos avances
tecnolgicos y exigencia actuales. Estos cambios posibilitan un diseo y la maximizacin
de recursos y herramientas para el desarrollo de aplicaciones ms activas y poderosas.
Facilitan el desarrollo del aprendizaje y creatividad de los programadores en un tiempo
mucho menor, permiten una interaccin ms funcional con sus clientes.
El lenguaje de programacin ASP, en todos los mbitos actuales desde empresariales
hasta educativos, ha tomado una enorme relevancia por tener una gran facilidad y mucho
poder para su utilizacin, as como permitir la creacin de aplicaciones ms potentes y
funcionales para las organizaciones (Wenz, Rennhaus y Kordwing, 2001).
A continuacin se muestra un ejercicio pequeo con ASP. Este cdigo muestra un
mensaje:
<!DOCTYPE HTML>
<HTML>
<body>
<%
="Bienvenidos alumnos de Ingeniera en Desarrollo de software"
%>
</body>
</HTML>
De acuerdo con Valenzuela (s. f.):
En qu aplicaciones se puede obtener los mejores resultados con las
pginas ASP? Pues bsicamente, son 2 los tipos de aplicaciones que se le
pueden dar de manera importante.
Una, son las llamadas Listas de correo donde los usuarios ingresan sus
Emails y se les envan informacin de forma peridica. Estas listas, suelen
solicitar informacin adicional del usuario y todo esto conforma una Base de
Datos realmente importante. En este caso, se manejan los conceptos de
Alta y de Baja, es decir, de ingreso y eliminacin de un registro. Adems de
29
Programacin web I
esto, si en el formulario de inscripcin, se solicita, por ejemplo, una direccin

URL del usuario, la configuracin de su PC, sus hobbies, etctera, todo esto
representa un cmulo de informacin que puede ser utilizada por todos,
previa Bsqueda segn criterios propios. (p. 1)
ASP utiliza principalmente el lenguaje visualbasicscript que no es ms que una

derivacin del Visual Basic. Sin embargo, es posible programar pginas ASP en
JavaScript, su declaracin de la utilizacin de JavaScript o Visual Basic son las
siguientes: (Valenzuela, s. f.).
<% language=vbscript %> si se utiliza visual basic sript en servidor para programa en
ASP.
<% language=jscript %> si se utiliza JavaScript en servidor para programa en ASP.
Es muy importante tener presente estas sentencias de ASP, ya que permiten realizar las
plantillas para las pginas web con la conectividad del servidor; por lo particular, con el
que se trabaja ms es con visualbasicscript. A continuacin se muestra un ejemplo de
aplicacin del cdigo con VBScript:
<% language=vbscript %>
<HTML>
<body>
Hola ingeniero en Desarrollo de Software la UnADM te da la bienvenida el da de hoy:
<%=now( )%>
</HTML>
</body>)
En este ejemplo con la etiqueta <%=now( )%> se est llamado la fecha y la hora, por lo
tanto el resultado es:
Hola ingeniero en Desarrollo de Software, La UnADM te da la bienvenida el da de hoy:
16/4/2014 20:00 PM
Como se observa en el ejemplo anterior, el cliente no recibe el cdigo ASP, sino el
resultado de la ejecucin.
Es muy importante tener el conocimiento bsico de ASP, ya que permitir saber cmo se
trabaja con ASP para realizar plantillas, y que se tenga comunicacin con el servidor web.
Por otro lado, ASP trabaja con HTML. El nico cambio es que tiene una sintaxis
especfica para trabajar con dos lenguajes de programacin Visual Basic y JavaScript.
T, como ingeniero en Desarrollo de Software, no tendrs complicacin en trabajar con
ASP, ya que tienes conocimientos de varios lenguajes de programacin. El punto
importante y que se ha mencionado es que tengas creatividad y lgica, para que realices
infinidades de sitios web. Por lo tanto, ASP no permite que se pueda ingresar texto,
etiquetas HTML ni scripts, a menos que estn en un archivo ASP que se ejecuta en el
servidor.
30
Programacin web I
3.2.2. Objetos y funciones de ASP

Los objetos definen y realizan funciones complejas. Su aplicacin representa una
forma de normalizar la programacin en ASP. Los objetos y funciones son muy
importantes para la realizacin de las pginas web. En ASP, hay algunos objetos estndar
predefinidos que juegan un papel determinante en la aplicacin de sus posibilidades, y
son los siguientes:
Objetos
Objeto Request
Objeto Response
Objeto Session
Objeto Server
Objeto Application
Objeto Drive
Concepto
Permite obtener informacin de un
visitante.
Permite enviar la salida para el usuario
desde el servidor.
Permite almacenar informacin o cambiar
la configuracin de una sesin de usuario.
Se utiliza para acceder a las propiedades y
mtodos en el servidor.
Permite almacenar y acceder a las
variables desde cualquier pgina, al igual
que el objeto Session.
Permite obtener informacin acerca de una
unidad de disco local o en un recurso
compartido de red.
Objetos integrados de ASP. Fuente: Wenz, Rennhaus y Kordwing, 2001.
Ejemplo de aplicacin del objeto Response:

<!DOCTYPE HTML>
<HTML>
<body>
<%
response.write("<h2>Programacin Web 1 de la carrera de la Ingeniera en Desarrollo de
Software!</h2>")
%>
<%
response.write("<p style='black'></p>")
%>
</body>
</HTML>
El resultado del cdigo anterior se caracteriza con el objeto response, porque slo manda
llamar en la interface lo que fue declarado con response.write, tal como se muestra a
continuacin:
31
Programacin web I
Ejemplo de uso de response.write
Ejemplo de objeto Response de ASP:

<!DOCTYPE HTML>
<HTML>
<body>
<%
randomize()
r=rnd()
if r>0.5 then
response.write("<a href='http://www.unadmexico.mx/'>UnadMexico!</a>")
else
response.write("<a
href='https://www.facebook.com/UnAdMexico?ref=ts&fref=ts'>facebook
UnadMexico!</a>")
end if
%>
<p>
Este ejemplo muestra un enlace, cada vez que se carga la pgina, se mostrar uno de los
dos enlaces: UnadMexico! o facebook UnadMexico! Hay una probabilidad del 50% para
cada uno de ellos.
</p>
</body>
</HTML>
El resultado del cdigo anterior se muestra a continuacin:
32
Programacin web I
Ejemplo de uso de objeto response de ASP
A continuacin se expone un ejemplo de objeto Server de ASP:

<!DOCTYPE HTML>
<HTML>
<body>
<%
Set fs = Server.CreateObject("Scripting.FileSystemObject")
Set rs = fs.GetFile(Server.MapPath("demo_lastmodified.asp"))
modified = rs.DateLastModified
%>
ltimo archivo modificado: <%response.write(modified)
Set rs = Nothing
Set fs = Nothing
%>
</body>
</HTML>
Se expone en la siguiente imagen el resultado del ejemplo anterior:
33
Programacin web I
Ejemplo de objeto server de ASP
Por otro lado, las funciones en ASP facilitan las tareas de la programacin de las pginas,
ya que se puede agrupar el cdigo y ser reutilizado en la misma pgina. Las funciones de
ASP ms utilizadas son: fecha y hora:
Fecha y hora en ASP pone a disposicin sencillas rutinas para consultar la fecha actual
del sistema y la hora del sistema. Dependiendo de cdigo, se ejecuta en el servidor dentro
de las rutinas ASP, o en el cliente. El resultado obtenido ser la fecha y la hora del
servidor, o estos mismos datos relativos al cliente. A continuacin se muestra el cdigo
(Wenz, Rennhaus y Kordwing, 2001):
<!DOCTYPE HTML>
<HTML>
<body>
Fecha de Hoy: <%response.write(date())%>.
<br>
La Hora es: <%response.write(time())%>.
</body>
</HTML>
El resultado del ejemplo anterior es:
34
Programacin web I
Fecha de hoy: 16/04/2014

La hora es: 22:00 pm
En este tema se habl del concepto bsico del lenguaje y de los lenguajes de
programacin especficos que ya tienen una sintaxis bsica; por otro lado, se visualizaron
los objetos y funciones bsicas y ms utilizadas para la construccin de pginas web.
ASP se visualiza en el navegador IE. Recuerda que ASP es una tecnologa de Microsoft.
Este lenguaje se utiliza dependiendo las necesidades de la empresa, y si ya tienes
plantillas elaboradas por ti, se te har ms fcil realizar tu sitio web.
3.3. Base de datos para Web

En la actualidad, las bases de datos son muy utilizadas en el mundo de la web ya sea
para ser visualizadas en Internet o intranet. Las bases de datos pueden ser utilizadas para
cosas tan sencillas como mantener un registro de tu agenda personal de telfono, o tan
complicado como llevar toda la gestin de una gran empresa u organizacin. Una base de
datos se define como un conjunto de datos relacionados entre s, organizados o
estructurados con informacin referente de algo.
Como expresa Meloni (2009), las bases de datos son tratadas utilizando los sistemas
gestores de bases de datos SGBD o tambin llamados DBMS data base management
system que proporciona un conjunto de programas que acceden y gestionan esos datos
(p. 10). Por lo tanto, se define una base de datos como informacin almacenada en una
computadora para que cualquier persona o programa autorizado pueda acceder a ella,
independientemente de su procedencia y del uso que haga.
Marn, Medina, Carrillo y Pons (2008), expresan que un gestor de base de datos es un
conjunto de elementos software con capacidad para definir, mantener y utilizar una base
de datos (p. 7).
Para la creacin de bases de datos, el gestor de base de datos que se utilizar es
MYSQL. ste crea un directorio o carpeta que contendr los archivos de datos de esa
base, al igual que sucede en la relacin entre carpetas y archivos. Por s sola, la base no
significa nada, es similar a una carpeta, un simple contenedor, lo que guarda la
informacin son los objetos que tiene almacenados dentro, pues la informacin dentro de
la bases de datos se guarda en tablas, por lo que la base de datos es un conjunto de
tablas.
Para crear bases de datos dentro de un sitio web, como ya se haba mencionado en las
unidades anteriores, se necesita un servidor. Esto es de acuerdo con qu lenguaje de
programacin web sea utilizando y qu sistema operativo. El servidor ms recomendado y
utilizado por varios programadores es Apache, ya que es ms factible para trabajar con
las bases de datos y estar administrando el sitio web. Para tener Apache se necesitan los
instaladores web AppServ o Xampp.
35
Programacin web I
En el subtema 3.3.1 Tipo de bases de datos, aprenders las diferentes bases de datos
que existen, porque las bases de datos pueden clasificarse de muchas maneras, depende
del manejo del contexto o a la utilidad de la misma, esto significa que depende de los
diferente datos almacenados (Spona, 2010).
En el subtema 3.3.2 Instaladores de servidores web, aprenders a utilizar los instaladores
web, ya que AppServ y Xampp tiene los mismo pasos para poder crear bases datos con
sus respectivas tablas.
El subtema 3.3.3. Conectividad de base de datos con PHP es muy importante, ya que de
aqu depende la construccin de las bases de datos para el sitio web. Una vez que se
cuente con el formulario de PHP, se har la conectividad con la base de datos.
En el subtema 3.3.4. Insercin, consulta, edicin y eliminacin de registro, vers la forma

cmo se juega o se gestionan las bases de datos, esto facilitar la administracin de las
mismas en tu sitio web, as como la accesibilidad por parte del usuario.
3.3.1. Tipos de base de datos

Es muy importante tener claro que las bases de datos pueden clasificarse de varias
formas, y se utilizan de acuerdo con las necesidades que sean solicitadas por el usuario,
de acuerdo a la variabilidad de los datos que se requieran almacenar en los mismos. De
tal forma que exista la posibilidad de utilizar cualquier tipo de base de datos de acuerdo
con los requerimientos del sitio web a desarrollar.
Existen dos tipos de bases de datos:
Esttica. Es primordial para almacenar datos pasados. Slo es lectura. Quiere decir que
no permite hacer modificaciones (Spona, 2010).
Dinmica. Como su nombre lo indica es dinmica, quiere decir que se pueden realizar
modificaciones, actualizaciones, realizar consultas y estar jugando con las bases de
datos, claro est, de acuerdo con las necesidades de la empresa. En la actualidad, es la
ms usada. Un ejemplo de una base de datos es el de carrito de compras, que permite
hacer, modificar y cancelar las compras (Spona, 2010).
Un punto importante de esta base de datos dinmica consiste en que tiene un modelo de
base datos. Se define como modelo de base datos a la forma en que se guarda la
informacin en las bases de datos. A continuacin se mencionan brevemente los tipos de
modelos de bases de datos dinmicas existentes:
Modelo de base de datos jerrquicas. Como su nombre lo dice, se encarga de

almacenar la informacin en una estructura jerrquica. Esto quiere decir que es un
36
Programacin web I
orden de elementos de acuerdo con su valor (Marn, Medina, Carrillo y Pons,

2008).
Modelo de base de datos relacionales. Se encarga de administrar datos ms

interactivos. Quiere decir que hay comunicacin con diferentes tablas, ya sea de la
misma base de datos o de otras, lo cual hace que facilite la administracin de las
base de datos. En la actulidad, este modelo es muy usado (Marn, Medina, Carrillo
y Pons, 2008).
Modelo de base de datos red. Es la renovacin del modelo jerrquico, ya que

ofrece una solucin eficiente para la modificacin de datos, por lo cual permite la
adminitracin de la informacin.
A continuacin, se muestra un esquema donde se exponen los modelos de base de datos

relacionales, red y jerrquico:
Ejemplo de modelo de base de datos. Fuente: Spona, 2010.
37
Programacin web I
Modelo de base de datos documentales, este modelo permite que se almacene un texto
completo y permite realizar bsquedas de forma ms rpida (Marn, Medina, Carrillo y
Pons, 2008).
La importancia de conocer los tipos de base de datos permitir identificar aqulla con que
se est trabajando o con la que se requiere trabajar, y as proponer soluciones para la
adminitracin y creacin de base de datos. Como ya se mencion, la creacin de una
base de datos debe ser adecuada a los requerimientos del sitio web de la empresa u
organizacin.
3.3.2. Instaladores de servidores web

En este subtema es muy importante tener conocimiento de la funcionalidad de los
servidores e instaladores de servidores web, los instaladores permiten utilizar el servidor
web Apache, mediante el cual es posible administrar, crear y conectar las bases de datos.
Tambin permite administrar varios sitios web, como ya se hablado en la unidad 2, los dos
instaladores de servidor web ms recomendados son AppServ y Xampp. La diferencia de
uno y otro es que Xampp tiene compatibilidad con el sistema operativo Linux, y AppServ
no.
Estos dos instaladores trabajan con el gestor de base de datos MYSQL, que permitir
crear las bases de datos. Fsicamente, cada nueva base de datos en MYSQL crea un
directorio o carpeta que contendr los archivos. Lo que guarda la informacin son los
objetos que tiene almacenados (Beati, 2011).
La estructura de una tabla se define por la cantidad de campos en que se fraccione la
informacin que guarda. Los posibles campos se pueden imaginar como columnas de una
plantilla de clculo para una tabla. Por ejemplo, se crea una tabla con el nombre de
producto. Sus campos sern el nombre del producto, descripcin, categora, precio,
etctera. Por lo cual, se definiran como tipo de datos alfanumricos y numricos; tambin
se definir la longitud de caracteres de cada campo.
Para consultar cmo se crean las bases de datos con los instaladores de servidor web
AppServ y Xampp, revisa el video Utilizacin de los instaladores de servidor web AppServ
y XAMPP.
Para consultar el recurso de video Utilizacin de los instaladores
de servidor web AppServ y XAMPP, da clic en la imagen de la
derecha (es recomendable que descargues el recurso para una
mejor visualizacin).
Como observaste en este video, la creacin de las base de datos de las tablas son muy
fciles de realizar. Es muy importante que tengas claro que as como declaraste el
nombre de los campos de las tablas, cuando vincules el formulario de PHP los nombres
de los campos del formulario sean iguales, para que no tengas problema alguno con la
conexin de la base de datos.
38
Programacin web I
A continuacin, en el siguiente subtema podrs visualizar cmo se vinculan las bases de

datos con PHP. Con esto podrs empezar a crear tus bases de datos de tu sitio web sin
problema alguno.
Actividad 2. Instalacin de servidor web

Docente en lnea.
3.3.3. Conectividad de base de datos con PHP

Para vincular las bases de datos y las tablas que estn dentro de las bases de datos en
una pgina web en PHP, debe haber una vinculacin con el instalador del servidor web.
Con la ayuda del editor web podrs hacer la vinculacin sin problema alguno aunque,
como se mencion en el subtema anterior, tal como se declaran los nombres de los
campos en el instalador web debe de ser igual en PHP.
Observa los pasos para realizar la conectividad de base de datos con PHP en el siguiente
video Ejemplo de creacin de conectividad de bases de datos con PHP.
Para consultar el recurso de video Ejemplo de creacin de conectividad de
bases de datos con PHP, da clic en la imagen de la izquierda (es recomendable
que descargues el recurso para una mejor visualizacin).
Como puedes observar en el video, los pasos para hacer la conectividad de base de
datos con PHP son muy sencillos; por lo tanto, para complementar tu construccin de sitio
web con la bases de datos no tendrs problema alguno. En el siguiente subtema se
explicarn los pasos que posibilitan jugar con las bases de datos.
3.3.4. Insercin, consulta, edicin y eliminacin de registros

Una vez comprendida la forma en que se hace la conexin de las bases de datos con el
instalador web y con el lenguaje de programacin PHP, es muy importante saber cmo se
puede jugar con las bases de datos en la pgina web. Con jugar con las bases de datos
se hace referencia a las funcionalidades de gestin de informacin tales como insercin,
consulta, edicin y eliminacin de registros. Esto facilita que no se necesite entrar
directamente al instalador web para hacer modificaciones a los registros que se estn
ingresando por los usuarios que estn navegando en el sitio web.
Para observar cmo se crea la insercin y la consulta de registros en una pgina web,
revisa el siguiente video Insercin y consulta de registros en una pgina web
39
Programacin web I
Para consultar el recurso de video Insercin y consulta de registros en

una pgina web, da clic en la imagen de la derecha (es recomendable
que descargues el recurso para una mejor visualizacin).
Para observar cmo se crea la edicin y la eliminacin de registros en una pgina web,
observa el video Editar y eliminar registros de una pgina web (UnADM, 2014b; basado
en Beati, 2011):
Para consultar el recurso de video Editar y eliminar registros de una pgina
web, da clic en la imagen de la izquierda (es recomendable que
descargues el recurso para una mejor visualizacin).
En el video mencionado anteriormente, se muestra el procedimiento para hacer ediciones

y eliminaciones en los registros, lo que permite la gestin de los datos o informacin.
Cabe mencionar que, una vez elaboradas las bases de datos y la construccin de las
pginas web, dependiendo de si el sitio slo ser va Intranet o por Internet. Si es por
Intranet slo se podr visualizar por el nombre del dominio o por direccin IP, pero si es
por va Internet se necesitar de un software donde permita levantar el sitio web completo,
sin problema alguno. Lo nico que pedir este software es el nombre del dominio y la
contrasea que da el proveedor, quien renta el espacio en Internet. El software
recomendado es CuteFTP, aplicacin para la transferencia de archivos por FTP. Es un
software cuya licencia se tiene que adquirir pero tambin te permite utilizar una versin de
pruebas por 30 das.
Actividad 3. Conexin de base de datos

Docente en lnea.
Autoevaluacin
El propsito de esta actividad es que puedas conocer los aprendizajes logrados y las
reas de oportunidad producto del estudio de esta tercera unidad.
Para realizar la autoevaluacin, ingresa al listado de actividades en el aula.
Evidencia de aprendizaje. Construccin del sitio web. Parte 2

Realiza la evidencia siguiendo las instrucciones de la misma y las indicaciones del
Docente en lnea.
40
Programacin web I
Autorreflexiones
Adems de enviar tu trabajo de la evidencia de aprendizaje, ingresa al foro Preguntas
de Autorreflexin y consulta las preguntas que tu Docente en lnea presente. A partir de
ellas, elabora tu autorreflexin en un archivo de texto llamado DPW1_U3_ATR_XXYZ.
Posteriormente, enva tu archivo mediante la herramienta Autorreflexiones.
Cierre de la unidad
En esta unidad aprendiste y visualizaste la estructura de JavaScript. Observaste que en
JavaScript se necesita trabajar con HTML para as poder interactuar con su cdigo;
adems, JavaScript permite obtener pginas web ms interactivas y realizar diferentes
acciones, claro est, dependiendo de las necesidades y requerimientos que se deban
considerar para la elaboracin del sitio web; as como la creatividad del programador web.
Tambin se mencion que JavaScript y PHP pueden trabajar juntos, con lo cual es
posible integrar funcionalidades de gestin de informacin en una pgina web con
conexin a bases de datos. Respecto al lenguaje ASP, se expusieron las reglas de
sintaxis y que trabaja con el lenguaje Visual Basic Script y JavaScript mediante una
sintaxis fija. ASP, al igual que JavaScript, debe integrarse con el lenguaje de
programacin HTML, slo que ASP trabaja en forma ms directa con el servidor web.
Recuerda que ASP es una tecnologa de Microsoft, por lo cual se rige por ciertas reglas
para trabajar en los sistemas operativos. ASP trabaja con los servidores web IIS y
Apache, y permite realizar plantillas propias de sitios web, posibilita tambin utilizar esas
plantillas para otro sitio web.
Se revis brevemente lo que es una base de datos, en relacin con la forma en que crean
y conectan a un sitio web, ya que en la actualidad es posible realizar este tipo de conexin
de sitios web a bases de datos. Se record que una base de datos es un paquete que
contiene toda la informacin necesaria para el funcionamiento de un sistema o un
proyecto completo. Una base de datos est compuesta por tablas, y las tablas por
campos que son el intermediario entre las bases de datos y las pginas, en las cuales se
mostrarn o se proporcionar eso datos que sern capaces de abrir la conexin, escribir,
leer, editar, etctera, facilitando la interaccin de informacin almacenada.
Para saber ms
Si te interesa saber ms sobre JavaScript, ingresa a los siguientes sitios:
JavaScriptya. (s. f.). Recuperado de http://www.JavaScriptya.com.ar/

Librosweb. (s. f.). Recuperado de http://librosweb.es/JavaScript/
41
Programacin web I
Si te interesa saber ms de objetos, funciones y mtodos de JavaScript, visita el siguiente

sitio:
Hscripts. (s. f.). Recuperado de

http://www.es.hscripts.com/tutoriales/JavaScript/string-funciones.php
Si te interesa saber ms de JavaScript y PHP acerca de la forma en que se conjugan, se

recomienda visitar el siguiente sitio:
Jhosuepardo. (s. f.). Recuperado de http://jhosuepardo.com/diseno-web/comopasar-variables-de-JavaScript-a-php-y-viceversa/
Para saber ms de ASP se recomienda el siguiente sitio web:
Desarrolloweb (s. f.). Recuperado de http://www.desarrolloweb.com/manuales/8/

Aspya. (s. f.). Recuperado de http://www.aspya.com.ar/
Si te interesa saber ms de modelos de bases de datos, consulta los siguientes

documentos:
Arcos Muoz, V., Escribano Santamara, A., Lpez Utrilla, S., Pea Gallego, R.,
Susn Martnez, S., Utrilla Requena, F.A. (2008). Recuperado de
http://www.itescam.edu.mx/principal/sylabus/fpdb/recursos/r88166.PDF
Rosa Rosario, M. G. (s.f). Recuperado de

http://agu.inter.edu/mrosa/notas%20badm6030/MODELOS_DE_BASES_DE_DAT
OS.pdf
Si deseas saber ms sobre aplicacin de bases de datos en otras reas consulta los
siguientes documentos:
Origel Gutirrez, S. (2006). Recuperado de
http://www.revista.unam.mx/vol.7/num8/art68/int68.htm
http://www.revista.unam.mx/biblioteca/masterorigel.pps
Hernndez Cervantes, L., Santilln Gonzlez, A., y Gonzlez-Ponce, A.R. (2009).
Recuperado de http://www.revista.unam.mx/vol.10/num10/art62/int62-3.htm
Si te interesa saber ms sobre bases de datos, consulta el siguiente sitio donde
encontrars algunos tutoriales sobre la conexin a bases de datos:
Aulaclic. (s. f.). Recuperado de http://www.aulaclic.es/dreamweavercs4/b_19_1_1.htm
42
Programacin web I
Fuentes de consulta
Beati, H. (2011). PHP de creacin de pginas web. Mxico: Alfaomega.
Brito, N. (2009). Manual de desarrollo web con Grails. Madrid: Imaginaworks.
Goodman, D. (2007). JavaScript Biblie. Indianapolis: Wiley Publishing.
Gutirrez, E. (2009). Recursos informticos JavaScript. Conceptos bsicos y

avanzados. Barcelona: Ediciones ENI
Marn, N. Medina, J. Carrillo y S. Pons, O. (2008). Introduccin a las bases de

datos. Madrid. Paraninfo
Meloni, J. (2009). PHP, MySQL y Apache. Madrid: Anaya Multimedia.
Ors, J. C. (2011). Diseo de pginas web con XHTML, JavaScript y CSS, 3a. ed.
Mxico: Alfaomega.
Remoaldo, P. (2008). Guia prtico do Dreamweaver CS3 con PHP, JavaScript e

Ajax. Lisboa: Centro Atlntico.
Snchez Maza, M. A. (2001). JavaScript. Mlaga: IC Innovacin y Cualificacin,

S.L.
Spona, H. (2010). Programacin de bases de datos con MySQL y PHP. Mxico:

Alfaomega/Marcombo.
Valenzuela, V. (s. f.). Curso prctico de ASP. Recuperado de

http://proton.ucting.udg.mx/tutorial/asp/cursoASP.pdf
Vara Mesa, J. M., Lpez Sanz, M., Granada, D., Irrazbal, E., Jimnez Hernndez,
J. J., Verde Marn, J.. (2012). Gua didctica del profesor de Desarrollo web en
entornos servidor. Madrid: Ra-Ma.
Wenz, C., Rennhaus, C. y Kordwing, A. (2001). ASP: Active Server Pages.

Programacin fcil de pginas web dinmicas. Barcelona: Marcombo.
Videografa:
UnADM. Universidad Abierta y a Distancia de Mxico. (2014a). Condicin IF en
JavaScript y HTML [Archivo de video]. Recuperado de http://youtu.be/liXxmeeoAfQ
_________________________________________. (2014b). Editar y eliminar

registros de una pgina web [Archivo de video]. Recuperado de
http://youtu.be/PIoKga77CAY
43
Programacin web I
_________________________________________. (2014c). Ejemplo de

aplicacin de cdigo con el evento onMouseOver [Archivo de video]. Recuperado
de http://youtu.be/COkm2Y8tzik
_________________________________________. (2014d). Ejemplo de

aplicacin de ficheros externos con JavaScript [Archivo de video]. Recuperado de
http://youtu.be/lI-CFPW34u4
_________________________________________. (2014e). Ejemplo de

combinacin de JavaScript con PHP [Archivo de video]. Recuperado de
http://youtu.be/uCo8SpIL31Y
_________________________________________. (2014f). Ejemplo de creacin

de conectividad de bases de datos con PHP [Archivo de video]. Recuperado de
http://youtu.be/6PgEEd8Bq_I
_________________________________________. (2014g). Ejemplo de

aplicacin del evento window.print() y explicacin de su funcionalidad [Archivo de
video]. Recuperado de http://youtu.be/ErgcHXosLqk
_________________________________________. (2014h). Ejemplo de

aplicacin del mtodo de Alert [Archivo de video]. Recuperado de
http://youtu.be/PwLPCNNxLzU
_________________________________________. (2014i). Ejemplo de aplicacin

del evento onClick y explicacin de su funcionamiento [Archivo de video].
Recuperado de http://youtu.be/SzqQa8LT68E
_________________________________________. (2014j). Insercin y consulta

de registros en una pgina web [Archivo de video]. Recuperado de
http://youtu.be/Dj13q5O9jvI
_________________________________________. (2014k). Utilizacin de los

instaladores de servidor web AppServ y XAMPP [Archivo de video]. Recuperado
de http://youtu.be/gvBplyl7X8k
44

Unidad 3. Desarrollo de Sitios Web

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Unidad 3. Desarrollo de Sitios Web

Încărcat de

Drepturi de autor:

Formate disponibile

Programacin web I

Unidad 3. Desarrollo de sitios web

Ingeniera en Desarrollo de Software

Unidad 3. Desarrollo de sitios web

Universidad Abierta y a Distancia de Mxico

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Unidad 3. Desarrollo de sitios web

Enviar informacin de un sitio web a un correo electrnico.

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

JavaScript, marca registrada de Sun Microsystems Inc.

Identificar la estructura de JavaScript de un sitio web.

Implementar un sitio web en un servidor de prueba para posibilitar la manipulacin

3.1. Estructura JavaScript

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Foro de dudas para el desarrollo de un sitio web

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

3.1.1. Objetos, funciones y mtodos sobre JavaScript

Se expone a continuacin un ejemplo para entender el funcionamiento de los objetos de

function nombredelafuncin (argumento1, argumento2,...)

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

A continuacin, se muestra un ejemplo sencillo en el que se define una funcin llamada

La llamada del mtodo, se hace de la siguiente forma:

A continuacin, se expone un ejemplo con base en objetos, funciones y mtodos en

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

La utilizacin de los objetos, funciones y mtodos sobre JavaScript en la realizacin de la

3.1.2. Eventos sobre JavaScript

JavaScript trabaja con eventos gracias a los manipuladores o manejadores de eventos

El usuario cancela la carga de una

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

El usuario quita el foco (el punto de

Se utiliza en los El usuario cambia el valor del

El usuario da clic en el elemento de

El usuario suelta un objeto en la

Permite la carga de un documento o

Permite que el usuario presione la

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Permite que el usuario presione la

Permite que el usuario libere una tecla. OnKeyUp

El usuario carga la pgina en el

El usuario pulsa un botn del ratn.

MouseMove Nada, esto es por El usuario mueve el cursor.

reas y enlances Desplaza el cursor del usuario o de un OnMouseOut

El usuario mueve el cursor sobre un

El usuario libera un botn del ratn.

Eventos de JavaScript. Fuente: Snchez, 2001.

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

A continuacin, se expone una lista de los eventos de los JavaScript ms comunes y se

Abandonar el documento HTML.

Pasar el ratn por encima del enlace.

Sacar el ratn de encima del enlace.

Dar clic sobre un link o un campo de

Seleccionar un campo de edicin de un

Ejemplo de programacin del evento onClick en JavaScript

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Ejemplo de aplicacin onClick. Basado en: Snchez, 2001.

3.1.3. JavaScript combinado con HTML

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Ejemplo del funcionamiento del evento onClick

Para consultar el resultado cdigo anterior, as como el funcionamiento que tiene el

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Para consultar el recurso de video Ejemplo de

Ejemplo de uso del evento JavaScript window.print ()