U1 - Título de la unidad

(1)

1 UNIDAD DIDÁCTICA 3.DESARROLLO DE APLICACIONES WEB ASP.NET

U1

- Título de la unidad

En esta unidad vamos a ver las principales características de una aplicación web.

Al finalizar el estudio de estas lecciones serás capaz de:

• Utilización de CSS. • Crear una aplicación. • Utilización de Javascript.

(2)

L1

– ¿Qué es ASP.NET

ASP.Net es framework para aplicaciones web. Fue desarrollado y comercializado por

Es el sucesor de Active Server Pages (ASP). ASP.NET está construido sobre

escribir código ASP.Net desde cualquier lenguaje admitido

Definición

ASP (Active Server Page) es un ambiente de aplicación gratuita

combinar HTML, JavaScript, Php,… para desarrollar páginas dinámicas.

ASP.Net nos permite crear aplicaciones web interactividad por parte del

Para desarrollar este tipo de (Internet Information Server).

Definición

IIS (Internet Information Server) es un conjunto de servicios para servidores, convierte cualquier

ordenador en un servidor de Internet, a través del cual se pueden publicar webs de manera local o remota.

¿Qué es ASP.NET ?

para aplicaciones web. Fue desarrollado y comercializado por Microsoft.

de Active Server Pages (ASP).

construido sobre Common Language Runtime, esto nos permite escribir código ASP.Net desde cualquier lenguaje admitido por: NET framework.

ASP (Active Server Page) es un ambiente de gratuita y abierta que nos permite combinar HTML, JavaScript, Php,… para desarrollar páginas dinámicas.

crear aplicaciones web dinámicas, es decir, nos permite la interactividad por parte del usuario.

Para desarrollar este tipo de aplicaciones es necesario tener instalado el iis (Internet Information Server).

IIS (Internet Information Server) es un conjunto de servicios para servidores, convierte cualquier

ordenador en un servidor de Internet, a través del pueden publicar webs de manera local o

2 , esto nos permite

framework.

dinámicas, es decir, nos permite la

(3)

L2

– Instalación de IIS

Vamos a instalar IIS desde dos tipos de Sistemas Operativos que son los más comunes.

Windows XP

Iremos a Inicio

(IIS_1) Después a “Panel de Control”

(4)

4 Se nos abrirá una nueva pantalla donde seleccionaremos la opción de “Agregar o

quitar componentes de Windows”

(IIS_3)

Este es la pantalla del “Asistente para componentes de Windows”. Veremos en una lista todos los componentes y además los que tengamos instaladas tendrán marcado un check a la izquierda.

Iremos a la opción “Servicios de Internet Information Server”, marcaremos la opción y pulsaremos el botón de “Siguiente”

(5)

Ahora empezará la instalación, una vez terminada, nos aparecerá la siguiente ventana.

(IIS_5)

Para comprobar que se nos ha instalado correctamente abriremos nuestro

navegador Internet Explorer y en la barra de direcciones escribiremos “localhost” Se nos tendrán que abrir dos ventanas.

(6)

6

Windows 7

Iremos a inicio

(IIS_7)

Después a “Panel de Control”

(7)

Se nos abrirá una nueva pantalla donde seleccionaremos la opción de “Programas y características”

(IIS_9)

Se nos abrirá una nueva pantalla donde seleccionaremos la opción de “Agregar o quitar componentes de Windows”.

(8)

8 Este es la pantalla del “Asistente para componentes de Windows”.

Veremos en una lista todos los componentes y además los que tengamos instaladas tendrán marcado un check a la izquierda.

Iremos a la opción “Servicios de Internet Information server”, marcaremos la opción y pulsaremos el botón de “Aceptar”

(9)

L3

– Estructura de una aplicación web.

Una aplicación web normalmente está estructurada como una aplicación de tres capas.

El navegador sería la primera capa, el cual manda peticiones a la capa intermedia (lugar donde estaría nuestro código) y a su vez manda peticiones de consulta a la base de datos y proporciona la interfaz de usuario.

La estructura de una página web se puede dividir en dos partes:

• Externa • Interna.

Estructura Externa.

Todas las páginas web que creemos deben de tener esta estructura.

(10)

10 A continuación vamos a detallar cada una de las partes.

• Cabecera + menú (opcional): aquí pondremos una cabecera que generalmente será una imagen, como si fuera un logo. Opcionalmente puede ir el menú donde se encuentren todos los enlaces a las diferentes páginas que tengamos.

• Columna 1: esta parte la podemos utilizar para poner el menú sino lo hemos querido incluir en la cabecera. Además podemos insertar elementos, como por ejemplo combos, imágenes, enlaces,…

• Contenido: aquí pondremos el contenido personal y único de cada web. • Columna 2: realizará la misma funcionalidad que la columna 1.

• Pie: en este apartado es donde se incluirá todos los enlaces a las diferentes páginas de nuestra web, y además pequeñas imágenes como logo.

Las columnas 1 y 2 no son obligatorias que estén en nuestras páginas, si no las incluimos esa parte será absorbida por el “Contenido”.

Estructura Interna.

La estructura interna nos referimos a la parte de la programación y del código HTML.

En la parte del código HTML tendremos el código para estructurar la página, las llamadas a archivos css, y las referencias a javascript (las cuales pueden estar en la misma página o sin son comunes a varias en un archivo aparte).

En la parte de código es donde se realizarán todas las consultas a base de datos, código de validación de datos,… todas estas clases o métodos podrán estar en la misma página o en una clase independiente si es común para varias páginas.

(11)

L4

– Configuración de una aplicación web ASP.NET.

Estructura de una aplicación web.

Una aplicación web normalmente está estructurada como una aplicación de dos o tres capas.

Dos capas.

Se basa en un ordenador que pide los datos (cliente) y luego otro ordenador que se encarga de procesarlas (servidor).

Se trata de un modelo no conectado.

Tres capas.

Se basa en un ordenador que pide los datos (cliente) y luego otro dos ordenadores, el primero será el servidor de aplicaciones y el segundo el servidor de base de datos.

(12)

L5

– Los webForm o formularios web.

Los formularios web los utilizamos para solicitar datos a los usuarios mediante documentos, cuestionarios,….

Los usos más frecuentes de un formulario son para la re registros, envió de consultas,…

Los formularios constan de dos partes:

• Cliente: contiene el código HTML, CSS y JavaScript. • Servidor: se encuentra el lenguaje de programación.

Definición

Los formularios web son un tipo de

se ve desde cualquier navegador, pudiéndose ser rellenado y enviado a través de internet.

Estos tipos de formularios pueden contener campos de carácter Una vez enviado el formulario hay

comunes:

• El usuario reciba de forma agradecimiento.

• Avisándole que en breve recibirá un • Indicándole que sus datos han sido

En cuanto a los datos que llegan al servidor, se r

para su procesamiento, este programa se encuentra instalado en el servidor y mediante páginas ASP (Active Server Pages

En el caso de estas páginas para las ASP.

Con estos medios podemos ingresar los datos del formulario recibido a una base de datos, enviar de forma automática un mensaje de respuesta al usuario, autorizar una solicitud…

Los webForm o formularios web.

Los formularios web los utilizamos para solicitar datos a los usuarios mediante documentos, cuestionarios,….

Los usos más frecuentes de un formulario son para la realización de inscripciones, registros, envió de consultas,…

Los formularios constan de dos partes:

: contiene el código HTML, CSS y JavaScript. : se encuentra el lenguaje de programación.

Los formularios web son un tipo de formulario, que se ve desde cualquier navegador, pudiéndose ser rellenado y enviado a través de internet.

Estos tipos de formularios pueden contener campos de carácter obligatorio Una vez enviado el formulario hay tres tipos de respuestas que son las más

El usuario reciba de forma inmediata un correo electrónico dándole nuestro Avisándole que en breve recibirá un correo electrónico.

Indicándole que sus datos han sido enviados correctamente

a los datos que llegan al servidor, se requiere de un programa especial para su procesamiento, este programa se encuentra instalado en el servidor y

Active Server Pages).

páginas, contienen trozos de código escrito en Visual Basic

Con estos medios podemos ingresar los datos del formulario recibido a una base de datos, enviar de forma automática un mensaje de respuesta al usuario, autorizar

12 Los formularios web los utilizamos para solicitar datos a los usuarios mediante

alización de inscripciones,

obligatorio. de respuestas que son las más

un correo electrónico dándole nuestro

correctamente.

equiere de un programa especial para su procesamiento, este programa se encuentra instalado en el servidor y

to en Visual Basic

Con estos medios podemos ingresar los datos del formulario recibido a una base de datos, enviar de forma automática un mensaje de respuesta al usuario, autorizar

(13)

UNIDAD DIDÁCTICA 3.DESARROLLO DE APLICAC

L6

– Los controles de servidor web.

Definición

Los controles de servidor Web ASP.NET son objetos de páginas Web ASP.NET que se ejecutan cuando el usuario realiza alguna acción.

ASP.NET contiene un numeroso

sencillos cuadros de texto hasta complejos calendarios. Muchos controles de servidor Web son

como botones y cuadros de texto.

Los controles de servidor incluyen características más avanzadas que e las que cabe destacar:

Un modelo de programación La posibilidad de controlar

La compatibilidad con temas visuales, que aportan una consistencia visual a todos los controles que utilicemo

La existencia de eventos que nos permite ejecutar código. La sintaxis para agregar un

<asp:NombreControlid="Identificador" </asp:NombreControl>

“NombreControl” es el nombre del control de servidor que deseemos agregar. “Identificador” es un nombre único del control y que no podrá estar repetido en otro control.

“Atributos”: definen las propiedades y sus valores

ESARROLLO DE APLICACIONES WEB ASP.NET

Los controles de servidor web.

Los controles de servidor Web ASP.NET son objetos de páginas Web ASP.NET que se ejecutan cuando el usuario realiza alguna acción.

numeroso conjunto de controles de servidor: desde sencillos cuadros de texto hasta complejos calendarios.

Muchos controles de servidor Web son similares a elementos HTML conocidos, como botones y cuadros de texto.

Los controles de servidor incluyen características más avanzadas que e

de programación más rico y seguro.

controlar su propio aspecto mediante plantillas.

La compatibilidad con temas visuales, que aportan una consistencia visual a todos los controles que utilicemos en nuestra aplicación web.

La existencia de eventos que nos permite ejecutar código. La sintaxis para agregar un control de servidor es la siguiente:

="Identificador" atributos runat="server" >

s el nombre del control de servidor que deseemos agregar. ” es un nombre único del control y que no podrá estar repetido en

”: definen las propiedades y sus valores específicos del control.

13 de servidor: desde

a elementos HTML conocidos,

Los controles de servidor incluyen características más avanzadas que estos, entre

La compatibilidad con temas visuales, que aportan una consistencia visual a todos

s el nombre del control de servidor que deseemos agregar. ” es un nombre único del control y que no podrá estar repetido en

(14)

Recuerde

El “Identificador” será único de cada control.

Las principales propiedades control son las siguientes:

• BackColor: obtiene o establece el color de fondo. • BorderColor: obtiene o establece el color del • BorderStyle: obtiene o establece el estilo del borde. • BorderWith: obtiene o

• CssClass: obtiene o establece la clase CSS.

• Enabled: obtiene o establece si el control esta activo o no. • Font: obtiene o establece la fuente.

• ForeColor: obtiene o establece el color de la fuente. • Height: obtiene o establece la altura.

• ID: obtiene o establece el nombre único.

• Visible: obtiene o establece si el control es visible para el usuario o no. • Text: obtiene o establece el texto que se va a

• Width: obtiene o establece la anchura.

A continuación vamos a ver los principales controles que nos podemos encontrar en cualquier aplicación que desarrollemos.

“Identificador” será único de cada control.

propiedades que nos vamos a encontrar en todos los elementos de control son las siguientes:

: obtiene o establece el color de fondo. : obtiene o establece el color del borde.

obtiene o establece el estilo del borde. : obtiene o establece el ancho del borde. : obtiene o establece la clase CSS.

: obtiene o establece si el control esta activo o no. : obtiene o establece la fuente.

: obtiene o establece el color de la fuente. : obtiene o establece la altura.

: obtiene o establece el nombre único.

: obtiene o establece si el control es visible para el usuario o no. : obtiene o establece el texto que se va a mostrar al inicio.

: obtiene o establece la anchura.

a ver los principales controles que nos podemos encontrar en cualquier aplicación que desarrollemos.

14 todos los elementos de

: obtiene o establece si el control es visible para el usuario o no. mostrar al inicio.

(15)

TextBox

Es un control que permite al usuario escribir texto. Su representación es la siguiente:

(CONTROL_2)

Las principales propiedades de este control con las que vamos a trabajar son las siguientes:

• Columns: obtiene o establece el ancho, expresado en caracteres.

• MaxLength: obtiene o establece el número máximo de caracteres que el usuario puede introducir.

• ReadOnly: obtiene o establece el valor de si podemos modificar el contenido o es de sólo lectura.

• TextMode: indica si va en el control se va a poder escribir una línea (SingleLine), varias líneas (MultiLine) o se trata de una contraseña (Password, los caracteres que escribamos no se verán, se visualizarán puntos).

Su evento principal es “Textchanged”, el cual no se produce con cada tecla que pulsemos, simplemente cuando salimos del textBox.

(16)

Button

Es un control que representa un botón. Su representación es la siguiente:

(CONTROL_3)

Recuerde

Si la acción solo se va a ejecutar en el lado del cliente pondríamos un control de HTML.

Por ejemplo si solo queremos que al nos saque una alerta.

• CommandArgument

al evento command junto con el valor de la • CommandName:

al evento Command del control. • OnClientClick: obtiene o

ejecutar cuando se genera un evento de Click. • PostBackUrl: obtiene

el control.

• Text: establece el texto que aparece dentro del control. Sus eventos principales son los siguientes:

• Click: señala un click sobre el control.

• Command: señala un click sobre el control, y env propiedades CommandName y CommandArgument. control que representa un botón.

Su representación es la siguiente:

(CONTROL_3)

Si la acción solo se va a ejecutar en el lado del cliente pondríamos un control de HTML.

Por ejemplo si solo queremos que al pulsar el botón nos saque una alerta.

s principales propiedades de este control con las que vamos a trabajar son las

CommandArgument: obtiene o establece un valor opcional que se envía al evento command junto con el valor de la propiedad CommandName.

: obtiene o establece el nombre del comando que se envía al evento Command del control.

btiene o establece todos los comandos que se van a ejecutar cuando se genera un evento de Click.

btiene o establece la url de destino cuando se hace click en : establece el texto que aparece dentro del control.

Sus eventos principales son los siguientes: : señala un click sobre el control.

: señala un click sobre el control, y envía los valores de las propiedades CommandName y CommandArgument.

16 s principales propiedades de este control con las que vamos a trabajar son las

establece un valor opcional que se envía propiedad CommandName. establece el nombre del comando que se envía establece todos los comandos que se van a establece la url de destino cuando se hace click en

(17)

ImageButton

Es un control que representa una imagen y realiza un evento con cada click del usuario.

(CONTROL_4)

• AlternateText: obtiene o establece el texto alternativo que se muestren el control cuando no está disponible la imagen.

• CommandArgument: obtiene o establece un valor opcional que se envía al evento Command junto con el valor de la propiedad CommandName asociada al control.

• CommandName: obtiene o establece el nombre del comando que se envía al evento Command del control.

• ImageAlign: obtiene o establece la alineación de la imagen con respecto a otros elementos de la página Web.

• ImageUrl obtiene o establece la dirección URL de la imagen que se muestra en el control.

• OnClientClick: obtiene o establece la secuencia de comandos de cliente que se ejecuta cuando se genera un evento Click del control.

• PostBackUrl: Obtiene o establece la dirección URL de la página de destino cuando se hace clic en el control.

Sus eventos principales son los siguientes:

• Command: señala un click sobre el control, y envía los valores de las propiedades CommandName y CommandArgument.

(18)

18

LinkButton

Es un control que representa una imagen y realiza un evento con cada click del usuario.

(CONTROL_5)

• CommandArgument: Obtiene o establece un valor opcional que se envía al evento Command junto con el valor de la propiedad

• CommandName asociada al control.

• CommandName: Obtiene o establece el nombre del comando que se envía al evento Command del control.

• OnClientClick: Obtiene o establece la secuencia de comandos de cliente que se ejecuta cuando se genera un evento Click del control.

• PostBackUrl: Obtiene o establece la dirección URL de la página de destino cuando se hace clic en el control.

• Text: Obtiene o establece el título de texto que se muestra en el control.

• Command: señala un click sobre el control, y envía los valores de las propiedades CommandName y CommandArgument.

(19)

CheckBox

Es un control que representa un texto el cual el usuario puede activarlo o desactivarlo.

(CONTROL_6)

• AutoPostBack: Obtiene o establece un valor lógico que indica si se produce una evolución de datos automática al servidor cuando el usuario hace clic en el control.

• Checked: Obtiene o establece un valor que indica si el control está activado.

• InputAttributes: Obtiene la colección de atributos HTML para el elemento <INPUT> representado del control.

• LabelAttributes: Obtiene la colección de atributos HTML para el elemento <LABEL> representado del control.

• Text: Obtiene o establece la etiqueta de texto asociada al control. • TextAlign: Obtiene o establece la alineación de la etiqueta de texto

asociada al control.

Su evento principal es el siguiente:

• CheckedChanged: Señala un cambio en el valor de la propiedad Checked del control entre cada envío al servidor.

(20)

20

CheckBoxList

Es un control que representa una serie de textos el cual el usuario puede activarlos o desactivarlos. Podemos marcar todos los que queramos.

(CONTROL_7)

• AutoPostBack:Obtiene o establece un valor lógico que indica si se produce una devolución de datos automática al servidor cuando el usuario hace clic en uno de los controles de entrada del control.

• DataTextField:Obtiene o establece el campo del origen de datos que proporciona el contenido de texto de los elementos del control.

• DataTextFormatString: Obtiene o establece la cadena de formato que controla cómo se muestran los datos enlazados al control.

• DataValueField: Obtiene o establece el campo del origen de datos que proporciona el valor de cada elemento del control.

• Items: Obtiene la colección de elementos del control.

• SelectedIndex: Obtiene o establece el índice inferior de los elementos seleccionados en el control.

• SelectedItem: Obtiene el elemento seleccionado con el índice inferior en el control.

• SelectedValue: Obtiene el valor del elemento seleccionado en el control o selecciona el elemento en el control que contiene el valor especificado. • Text: Obtiene o establece la propiedad SelectedValue del control. Sus eventos principales son los siguientes:

• SelectedIndexChanged: Señala un cambio en las opciones activas del control entre cada envío al servidor.

• TextChanged: Señala un cambio en el valor de las propiedades Text y/o SelectedValue del control entre cada envío al servidor.

Su método principal es el siguiente:

(21)

RadioButton

Es un control que representa un texto de opción el cual el usuario puede activar o desactivar.

(CONTROL_8)

• AutoPostBack: Obtiene o establece un valor lógico que indica si se produce una devolución de datos automática al servidor cuando el usuario hace clic en el control.

• Checked: Obtiene o establece un valor que indica si el control está activado.

• GroupName: Obtiene o establece el nombre del grupo al que pertenece el control.

• InputAttributes: Obtiene la colección de atributos HTML para el elemento <INPUT> representado del control.

• LabelAttributes: Obtiene la colección de atributos HTML para el elemento <LABEL> representado del control.

• Text: Obtiene o establece la etiqueta de texto asociada al control.

• TextAlign: Obtiene o establece la alineación de la etiqueta de texto asociada al control.

Su evento principal es el siguiente:

• CheckedChanged: Señala un cambio en el valor de la propiedad Checked del control entre cada envío al servidor.

(22)

22

RadioButtonList

Es un control que representa una serie de textos de opción los cuales el usuario puede marcarlos o no. Sólo puede marcar uno.

(CONTROL_9)

• AutoPostBack: Obtiene o establece un valor lógico que indica si se produce una devolución de datos automática al servidor cuando el usuario hace clic en uno de los controles de entrada del control.

• CellPadding: Obtiene o establece el valor del atributo HTML cellpadding para el elemento <TABLE> representado del control.

• CellSpacing: Obtiene o establece el valor del atributo HTML cellspacing para el elemento <TABLE> representado del control.

• DataTextField: Obtiene o establece el campo del origen de datos que proporciona el contenido de texto de los elementos del control.

• RepeatColumns: Obtiene o establece el número de columnas que se muestran en el control.

• RepeatDirection: Obtiene o establece la dirección en la que se muestran los elementos del control.

• RepeatLayout: Obtiene o establece la disposición de los elementos en el control.

• SelectedItem: Obtiene el elemento seleccionado en el control.

• SelectedValue: Obtiene el valor del elemento seleccionado en el control o selecciona el elemento en el control que contiene el valor especificado. • Text: Obtiene o establece la propiedad SelectedValue del control.

• TextAlign: Obtiene o establece la alineación del texto de los elementos del control.

(23)

(24)

24

ListBox

Es un control que representa una lista de valores que permite al usuario seleccionar una o varias opciones.

(CONTROL_10)

Existe otra forma de verlo representado, que es como si fuera una lista desplegable:

(CONTROL_11)

• AutoPostBack: Obtiene o establece un valor lógico que indica si se produce una devolución de datos automática al servidor cuando el usuario selecciona uno de los elementos del control.

• DataTextFormatString: controla cómo se muestran los datos enlazados al control.

• Rows: Obtiene o establece el número de filas que se muestran en el control.

• SelectedItem: Obtiene el elemento seleccionado con el índice inferior en el control.

• SelectedValue: Obtiene el valor del elemento seleccionado en el control o selecciona el elemento en el control que contiene el valor especificado. • SelectionMode: Obtiene o establece el modo de selección del control. • Text: Obtiene o establece la propiedad SelectedValue del control.

(25)

• ClearSelection: Desactiva todas las opciones de la lista.

• GetSelectedIndices: Obtiene la matriz de valores de índice de los elementos seleccionados en el control.

(26)

26

DropdownList

Es un control que representa una lista de valores desplegables que permite al usuario seleccionar una única opción.

(CONTROL_12)

• AutoPostBack: Obtiene o establece un valor lógico que indica si se produce una devolución de datos automática al servidor cuando el usuario modifica el elemento en el control.

• SelectedIndex: Obtiene o establece el índice del elemento seleccionado en el control.

• SelectedItem. Obtiene el elemento seleccionado en el control.

• SelectedValue: Obtiene el valor del elemento seleccionado en el control o selecciona el elemento en el control que contiene el valor especificado. • Text: Obtiene o establece la propiedad SelectedValue del control. Sus eventos principales son los siguientes:

• SelectedIndexChanged: Señala un cambio en los elementos seleccionados del control entre cada envío al servidor.

(27)

Panel

Es un control que representa un contenedor de otros controles, es decir, es un control en el cual dentro del mismo podemos insertar otros controles con el fin de tenerlos agrupados.

• BackImageUrl: Obtiene o establece la dirección URL de la imagen de fondo del control.

• DefaultButton: Obtiene o establece el identificador ASP.NET del botón predeterminado incluido en el control.

• Direction: Obtiene o establece la dirección en la que se muestran los controles que incluyen texto en el control.

• GroupingText: Obtiene o establece el título del grupo de controles contenido en el control.

• HorizontalAlign: Obtiene o establece la alineación horizontal del contenido del panel.

• ScrollBars: Obtiene o establece la visibilidad y la posición de las barras de desplazamiento del control.

• Wrap: Obtiene o establece un valor lógico que indica si el contenido se ajusta dentro del control.

(28)

L7

– ¿Qué es el ViewState

Definición

Se trata de un diccionario compuesto de información que permite

estado de un control de servidor.

Para guardar en el viewState el estado de un control utilizaríamos el siguiente código:

'Almacena en el estado de vista el valor de la fecha actual con la clave FechaInicio

Me.ViewState("FechaInicial"

Para posteriormente recuperar este valor realizaríamos el siguiente código:

'Recupera el estado de vista el valor con la clave 'FechaInicial y lo almacena en la variable Fecha 'Si este valor no habría sido guardado anteriorme 'establecemos la fecha actual como valor por defecto.

Dim fecha As DateTime

If Me.ViewState("FechaInicial"

fecha = DateTime.Now Else

fecha = CType(Me.ViewState( End If

No todos los valores de los controles son introducidos por el usuario: algunos de ellos son obtenidos mediante la lógica de la aplicación.

En estos casos no es necesario almacenar dichos valores en el estado de vista, ya que podemos obtenerlos nuevamente ejecutando la lógica de la aplicación.

ASP.NET nos permite deshabilitar el almacenamien un control de servidor en el estado de vi

EnableViewState en Falso.

Para ello pondremos lo siguiente en el control:

<!-- Deshabilita el estado de vista del cuadro de texto <asp:textboxid="mat" runat

¿Qué es el ViewState?

Se trata de un diccionario compuesto de

información que permite guardar y restaurar el estado de un control de servidor.

Para guardar en el viewState el estado de un control utilizaríamos el siguiente

"FechaInicial") = DateTime.Now

'Recupera el estado de vista el valor con la clave 'FechaInicial y lo almacena en la variable Fecha 'Si este valor no habría sido guardado anteriormente 'establecemos la fecha actual como valor por defecto.

"FechaInicial") Is Nothing Then .Now

.ViewState("FechaInicial"), DateTime)

los valores de los controles son introducidos por el usuario: algunos de ellos son obtenidos mediante la lógica de la aplicación.

necesario almacenar dichos valores en el estado de vista, ya que podemos obtenerlos nuevamente ejecutando la lógica de la aplicación.

ASP.NET nos permite deshabilitar el almacenamiento automático de los valores de un control de servidor en el estado de vista estableciendo el valor de su propiedad EnableViewState en Falso.

Para ello pondremos lo siguiente en el control:

Deshabilita el estado de vista del cuadro de texto -->

runat="server" enableViewState="false" />

28 Para guardar en el viewState el estado de un control utilizaríamos el siguiente

los valores de los controles son introducidos por el usuario: algunos de

necesario almacenar dichos valores en el estado de vista, ya que podemos obtenerlos nuevamente ejecutando la lógica de la aplicación.

to automático de los valores de ciendo el valor de su propiedad

(29)

L8

– Controles de validación de datos.

En cualquier aplicación Web dinámica, en la que existe interacción con el usuario, se produce un intercambio de información bidireccional hacia y desde la misma. La información que suministra el usuario puede ser errónea, bien sea por error del mismo o por tratarse de un ataque malintencionado.

En cualquier caso, esta información errónea puede causar un mal funcionamiento de la aplicación Web, por lo que ésta debe estar preparada para hacer frente a estas situaciones.

El objetivo último de un formulario es recopilar información proporcionada por el usuario y enviarla hasta el lado servidor de la aplicación Web para su proceso. El entorno de trabajo de ASP.NET simplifica el diseño y la programación de formularios, poniendo a nuestra disposición un potente conjunto de herramientas: formularios Web, controles HTML, controles de servidor…

Sin embargo, independientemente de que se trate de una aplicación Web o de escritorio, debemos enfrentarnos al hecho de que la información proporcionada por el usuario puede ser errónea.

Esta problemática se debe a causas muy variadas, desde un error al introducir los datos hasta información con carácter malicioso…

Por lo tanto, nuestra aplicación debe estar preparada ante esta realidad, y actuar activamente validando la información proporcionada por el usuario.

Sólo así garantizaremos el buen funcionamiento de la misma y evitaremos resultados erróneos con consecuencias de mayor o menor gravedad. Sabemos que una aplicación Web se ejecuta en dos contextos bien diferenciados: el lado cliente y el lado servidor.

Al diseñar el mecanismo de validación de nuestra aplicación, una primera cuestión fundamental que debemos responder es dónde tendrá lugar ésta.

Puesto que queremos validar la información introducida por el usuario, y estas entradas tienen lugar en el navegador Web, la respuesta obvia parece ser que la validación debería efectuarse en el lado cliente de la aplicación, utilizando un lenguaje como JavaScript.

(30)

30 (VAL_1)

Esta aproximación presenta la ventaja de que la información se valida antes de ser enviada al servidor, por lo que el usuario obtiene inmediatamente el

resultado de la validación de datos.

Sin embargo… ¿qué sucede si el navegador del usuario no soporta JavaScript? ¿O si lo tiene deshabilitado? La información llegará hasta el servidor sin validar.

Para resolver este problema, podemos plantear la validación de los datos en el lado servidor de la aplicación, utilizando un lenguaje como ASP.NET:

(VAL_2)

De este modo la información siempre se valida antes ser procesada por la aplicación Web, no presenta la inmediatez de la validación en el lado cliente: es preciso un envío y devolución de datos al servidor para notificar cualquier problema con los datos.

(31)

Si queremos lo mejor de los dos enfoques (inmediatez de respuesta y validación asegurada) debemos implementar la lógica de validación en los lados cliente y servidor de la aplicación:

(VAL_3)

El inconveniente es que tenemos que escribir código de validación en ambos lados de la aplicación, por lo que la productividad del ciclo de desarrollo disminuye. Para resolver esta situación ASP.NET nos ofrece los denominados controles de validación.

(VAL_4)

En el caso de la validación del lado cliente, ASP.NET genera el código más adecuado al entorno en que se ejecuta la aplicación.

(32)

32 Esto permite que el código de validación del lado cliente se adapte al navegador

Web del usuario, manteniendo las características y comportamientos abstractos que definen el control de validación.

Todos los controles de validación nos proporcionan, además de miembros específicos, una interfaz de programación común.

Las principales propiedades comunes de los controles de validación son las siguientes:

• ControlToValidate: Obtiene o establece el identificador ASP.NET del control de entrada que va a validar el control.

• Display: Obtiene o establece el comportamiento de presentación del mensaje de error del control.

• EnableClientScript: Obtiene o establece un valor lógico que indica si se habilita la validación en el cliente.

• Enabled: Obtiene o establece un valor lógico que indica si está habilitado el control.

• ErrorMessage: Obtiene o establece el texto del mensaje de error que el control muestra en un resumen de validación cuando el control de entrada no es válido.

• ForeColor: Obtiene o establece el color del mensaje que el control muestra cuando el control de entrada no es válido.

• IsValid: Obtiene o establece un valor lógico que indica si el control de entrada asociado es válido.

• SetFocusOnError. Obtiene o establece un valor lógico que indica si el foco del teclado se establece en el control de entrada cuando éste no es válido. • Text: Obtiene o establece el texto mostrado en el control cuando el control

de entrada no es válido.

• ValidationGroup: Obtiene o establece el nombre del grupo de validación al que pertenece el control.

El método común a los controles de validación es el siguiente:

• Validate: Realiza la validación en el control de entrada y actualiza el valor de la propiedad IsValid.

(33)

RequieredFieldValidator

El control de validación RequiredFieldValidator determina la validez de un control de entrada comprobando si el valor del mismo es diferente de un valor inicial dado.

La principal propiedad de este control con la que vamos a trabajar es la siguiente: • InitialValue: Obtiene o establece el valor inicial del control de entrada. Así para poner en un control de servidor web será el siguiente:

<!-- Valida un cuadro de texto comprobando que si el usuario ha escrito un valor diferente de 00000,

Si no es así muestra un mensaje de CP incorrecto--> <asp:textboxid="cp" runat="server" text="00000"/>

<asp:RequieredFieldValidatorid="cpValidator" runat="server"

ControlToValidate="cp" ErrorMessage="CP incorrecto" InitialValue="00000" ></asp:RequieredFieldValidator>

CompareValidator

El control de validación CompareValidator determina la validez de un control de entrada comparándolo con otro control del formulario Web.

Las principales propiedades son las siguientes:

• ControlToCompare: Obtiene o establece el identificador ASP.NET del control de entrada con el que se ha de comparar el control.

• Operator: Obtiene o establece la operación de comparación utilizada en la validación del control.

• Type: Obtiene o establece el tipo de datos de los dos valores que se van a comparar.

• ValueToCompare: Obtiene o establece el valor que se va a comparar.

<!-- Valida un cuadro de texto Campo1 comprobando que el usuario ha escrito un valor decimal mayor

o igual que el escrito en otro cuadro de texto Campo2. Si no es así muestra un mensaje de error Valor Incorrecto-->

<asp:TextBoxid="Campo1" runat="server" /> <asp:TextBoxid="Campo2" runat="server" />

<asp:CompareValidatorid="campoValidator" runat="server"

ControlToValidate="Campo1" ControlToCompare="Campo2"

Operator="GreaterThanEqual" Type="Double" ErrorMessage="Valor Incorrecto" ></asp:CompareValidator>

(34)

34

RangeValidator

El control de validación RangeValidator determina la validez de un control de entrada comprobando si el valor del mismo está en un intervalo de valores dados.

• MaximumValue: Obtiene o establece el valor máximo del rango de validación del control.

• MinimumValue: Obtiene o establece el valor mínimo del rango de validación del control.

• Type: Obtiene o establece el tipo de datos de los dos valores que se van a comparar.

<!-- Valida un cuadro de texto si el texto que escribe el usuario una fecha

comprendida entre 10 de mayo de 2005 y el 31 de diciembre de 2020. Si no es así mostrará un mensaje de Fecha Incorrecta-->

<asp:TextBoxid="Fecha" runat="server" />

<asp:RangeValidatorid="campoValidator" runat="server"

ControlToValidate="Fecha" Type="Date" MinimumValue="2005/05/10"

MaximumValue="2020/12/31" ErrorMessage="Fecha Incorrecta" ></asp:CompareValidator>

(35)

RegularExpressionValidator

El control de validación RegularExpressionValidator determina la validez de un control de entrada comprobando si el valor del mismo coincide con el patrón de una expresión regular dada.

• ValidationExpression: Obtiene o establece el patrón de la expresión regular utilizada para validar un control.

ValidationSummary

El control ValidationSummary muestra, de forma agrupada, todos los mensajes de error que han generado los controles de validación de una página Web.

• DisplayMode: Obtiene o establece el modo de presentación del resumen de validación.

• HeaderText: Obtiene o establece el texto de encabezado que aparece en la parte superior del resumen.

• ShowMessageBox: Obtiene o establece un valor lógico que indica si el resumen de validación aparece en un cuadro de mensaje.

• ShowSummary: Obtiene o establece un valor lógico que indica si el resumen de validación se muestra en línea.

<asp:validationSummaryid="ResumenValidation" runat="server"

ShowMessageBox="True" showSummary="False" DisplayMode="SingleParagraph" />

(36)

36

L9

– Instalación de Visual Studio Express Web Developer.

Lo primero que vamos a realizar en este momento es instalar el visual studio, el cual utilizaremos para desarrollar nuestras posteriores aplicaciones.

Accederemos a la url:

http://www.microsoft.com/spain/visualstudio/download

Nos aparecerá la siguiente ventana:

(37)

Seleccionaremos la opción de “Probar Visual Studio 2010 Ultimate”.

Nos llevará a otra pantalla, donde en el combo que pone “English” lo desplegaremos y seleccionaremos el idioma “Spanish”.

(INST_2)

(38)

38 (INST_3)

Pulsaremos el botón de “Descargar”

Nos llevará a otra pantalla, en la que se nos abrirá un pop-up para que guardemos el archivo.

(39)

(INST_4)

(INST_5)

(40)

40 (INST_6)

Pulsaremos dos veces sobre el icono de descarga para empezar con la instalación.

Nos aparecerá una pantalla del visual studio donde recopila información necesaria para su instalación.

(41)

(INST_7)

Desmarcaremos (si queremos) la opción de “Si, enviar a Microsoft Corporation información sobre la instalación”

(42)

42 En la siguiente pantalla marcaremos el check de “He leído los términos de la

licencia y los acepto” y después el botón de “Siguiente”

(INT_9)

A continuación elegiremos las características que queremos que se nos instalen, marcaremos la opción de “Todos” y pulsaremos el botón de instalar.

(43)

(INST_10)

Cuando pulsemos el botón de “Instalar”, comenzará la instalación en un recuadro en el cual podremos ir viendo su progreso.

(44)

44 (INST_12)

(45)

L10

– Envió de emails.

Esta lección se deja aplazada hasta el final debido a que en el ejercicio que

expliquemos se detallarán todas las clases que hacen falta para el envió de emails, así como su configuración.

(46)

L11

– Introducción a CSS

Definición

CSS es un lenguaje en el que se utilizan hojas de estilos (con extensión “.css”) las cuales se utilizan para proporcionar un aspecto visual único y diferente a nuestras aplicaciones web

Su funcionalidad es separar Las ventajas de utilizar CSS son:

• Mayor accesibilidad al documento. • Reduce la complejidad del documento. • Mejor mantenimiento.

Antiguamente las web se hacían

misma línea todo el contenido, de tamaño de la fuent Un ejemplo sería el siguiente:

<head>

<title>Título de la página web </head>

<fontcolor="blue" CSS</font>

</h1> <p>

<fontcolor="red" web</font>

</p> </body>

La problemática del uso de este sistema es que si por necesidades

queremos cambiar el color del texto, tendríamos que ir línea por línea

viendo donde está el texto y ponerle otro color diferente.

Sin embargo aplicando estilos la aplicación anterior quedaría de la siguiente

manera.

Introducción a CSS

CSS es un lenguaje en el que se utilizan hojas de estilos (con extensión “.css”) las cuales se utilizan para proporcionar un aspecto visual único y

nte a nuestras aplicaciones web.

separar los contenidos de su definición. ventajas de utilizar CSS son:

Mayor accesibilidad al documento. Reduce la complejidad del documento. Mejor mantenimiento.

las web se hacían sin hojas de estilos, donde había que poner en la misma línea todo el contenido, de tamaño de la fuente, tipo, color,….

Un ejemplo sería el siguiente:

Título de la página web</title>

="blue" face="Verdana" size="12">Mi web sin estilos

="red" face="Arial" size="5">Contenido de mi página

La problemática del uso de este sistema es que si por necesidades

queremos cambiar el color del texto, tendríamos que ir línea por línea

viendo donde está el texto y ponerle otro color diferente.

rgo aplicando estilos la aplicación anterior quedaría de la siguiente

46 hojas de estilos, donde había que poner en la

e, tipo, color,….

Mi web sin estilos

Contenido de mi página

La problemática del uso de este sistema es que si por necesidades

queremos cambiar el color del texto, tendríamos que ir línea por línea

(47)

<head>

<title>Título de la página web</title> <styletype="text/css">

h1 {color: blue; face:Verdana size:12} p {color: red; face:Arial size:5}

</style> </head>

<body>

<h1>Mi web sin estilos CSS</h1> <p>Contenido de mi página web</p> </body>

Tipos de incluir archivos CSS

Existen tres maneras de incluir los estilos css:

• En el mismo documento HTML. • En un archivo externo.

• En los elementos HTML.

En el mismo documento HTML

Aquí los estilos se definen en una región dentro de la cabecera (head). Estos estilos solo afecta a la página donde están escritos.

Solo los emplearemos cuando queremos crear una aplicación web muy pequeña, o queramos darle unos estilos a unos elementos concretos del documento.

En un archivo externo.

Aquí los estilos se incluyen dentro de un fichero con la extensión .css

Este archivo se podrá incluir en todas aquellas páginas que queramos mediante la etiqueta <link>, la cual hare relación al directorio donde se encuentra nuestro archivo.

El atributo link viene preferido de 4 elementos:

• Rel: indica el tipo de relación del archivo vamos a cargar. • Type: indica el tipo de archivo que vamos a cargar.

• Href: ruta relativa de donde se enc8uentra nuestra hoja de estilos. • Media: indica el medio en el que se van a aplicar los estilos.

(48)

48

A continuación vemos en una tabla los principales tipos de media que

existen.

Media Descripción

All Todos los medios

Handheld Móviles, PDA.

Print Impresoras

Projection Proyectores. Screen Pantallas de PC

Esta es la mejor forma de utilizar CSS en cualquier aplicación, debido a que un cambio en este archivo se refleja de manera automática en toda la web donde se haya incluido el archivo.

En los elementos HTML

Aquí los estilos van al mismo nivel que los párrafos.

Es la peor manera de trabajar con estilos, ya que para realizar un cambio tenemos que buscar en cada página y en cada elemento el atributo.

Sólo se utiliza en determinadas ocasiones en las que tenemos que incluir un estilo muy específico a un elemento.

(49)

Los partes de los estilos CSS se podrían definir así:

(CSS_3)

Regla: cada uno de los diferentes elementos que componen la hoja de estilos. Elemento: indica el elemento al cual se la van a dar unas propiedades y valores. Declaración: se componen de las propiedades y valores que van a darle a un elemento.

Propiedad: característica específica del elemento que queremos modificar.

(50)

50

Reglas @media y @import

Reglas @media

La regla @media se utiliza para dar a aquellos elementos que se empleen para diferentes media.

@media print screen {

H1 {Font size: 12; color:red} }

Reglas @import

La regla @import se utiliza para importan archivos externos dentro de un css. @import url(“estilosCoches.css”) screen;

Etiqueta Class

La etiqueta class en un elemento se emplea cuando tenemos diferentes elementos y no queremos que todos tengan el mismo estilo.

Por ejemplo si tenemos en nuestra aplicación el siguiente párrafo: <body>

<h1>Mi web de estilos CSS</h1> <p>Contenido de mi página web</p>

<p>En mi página vamos a tratar de aclarar diferente temas</p> <p>como por ejemplo, si preferimos</p>

<p>los coches de gasolina o gasoil</p>

<p>La cuestión que se plantea es la siguiente</p>

<p>¿merece pagar más por un gasoil que por un gasolina?</p> </body>

Si queremos darle estilos diferentes a cada párrafo los haría mediante el atributo class, seguido del nombre de nuestra clase, dicho texto quedaría de la siguiente manera:

<body>

<h1class="titulo">Mi web de estilos CSS</h1>

<p class="principal">Contenido de mi página web</p>

<p class="texto">En mi página vamos a tratar de aclarar diferente temas</p>

<p class="texto">como por ejemplo, si preferimos</p> <p class="texto">los coches de gasolina o gasoil</p>

<p class="cuestion">La cuestión que se plantea es la siguiente</p> <p class="pregunta">¿merece pagar más por un gasoil que por un gasolina?</p>

(51)

Donde en nuestro archivo css tendríamos los siguientes estilos: #titulo{

color: red;

size: 15px;

text-align:center;

border: 1px solid black } #principal{ color: blue; } #texto { font-size: 8px; float: right; } #cuestion{ padding-left: 20px; color: yellow; } #pregunta{ padding-right: 10px

border: 1px solid black

size: 23px; }

Nota

Los comentarios en los archivos CSS, /* y al final ponemos */

en nuestro archivo css tendríamos los siguientes estilos:

black;

;

10px; black;

Los comentarios en los archivos CSS, empiezan por /* y al final ponemos */

(52)

52

Etiqueta ID

La etiqueta id funciona de la misma manera que lo hace la etiqueta class. La única diferencia es que un elemento con id sólo se refiere a un elemento en concreto de la página, debido a que este id es único para cada elemento. En el ejemplo anterior quedaría:

<body>

<h1id="titulo">Mi web de estilos CSS</h1>

<p id="principal">Contenido de mi página web</p>

<p id="texto1">En mi página vamos a tratar de aclarar diferente temas</p>

<p id="texto2">como por ejemplo, si preferimos</p> <p id="texto3">los coches de gasolina o gasoil</p>

<p id="cuestion">La cuestión que se plantea es la siguiente</p> <p id="pregunta">¿merece pagar más por un gasoil que por un gasolina?</p>

</body>

En la hoja de estilos estarían los mismos elementos que hemos visto anteriormente, pero en vez de ir precedidos con “.”, van con “#”. La hoja de estilos quedaría así:

#titulo{

color: red;

size: 15px;

text-align:center;

border: 1px solid black; } #principal{ color: blue; } #texto1 { font-size: 8px; float: right; } #texto2 { font-size: 8px; float: right; } #texto3 { font-size: 8px; float: right; } #cuestion{ padding-left: 20px; color: yellow; } #pregunta{ padding-right: 10px;

(53)

size: 23px; }

Como vemos aunque en texto1, 2 y 3 tienen los mismos atributos a tratarse de id diferentes los tenemos que triplicar el mismo estilo.

Unidades de medida relativa

Existen tres tipos de medida:

• em, (no confundir con la etiqueta <em> de HTML) relativa respecto del tamaño de letra empleado. Aunque no es una definición exacta, el valor de 1em se puede aproximar por la anchura de la letra M ("eme

mayúscula") del tipo de letra que se esté utilizando

• ex, relativa respecto de la altura de la letra x ("equis minúscula") del tipo de letra que se esté utilizando

• px, (píxel) relativa respecto de la pantalla del usuario

Unidades de medida absolutas

Existen diferentes tipos de medida absolutas:

• in, del inglés "inches", pulgadas (1 pulgada son 2.54 centímetros) • cm, centímetros

• mm, milímetros

• pt, puntos (1 punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros)

• pc, picas (1 pica equivale a 12 puntos, es decir, unos 4.23 milímetros)

Principales propiedades de los CSS

• height: altura

• margin-top: margen superior. • margin-left: margen izquierdo. • margin-right: margen derecho. • margin-bottom: margen inferior. • padding-top: relleno superior. • padding -left: relleno izquierdo. • padding -right: relleno derecho. • padding -bottom: relleno inferior.

• border-top-width: Anchura del borde superior • border-right-width: Anchura del borde derecho • border-bottom-width: Anchura del borde inferior. • border-left-width: Anchura del borde izquierdo. • border-top-color: Color del borde superior • border-right-color: Color del borde derecho. • border-bottom-color: Color del borde inferior. • border-left-color: Color del borde izquierdo • border-top-style: Estilo del borde superior

(54)

54 • border-right-style: Estilo del borde derecho.

• border-bottom-style: Estilo del borde inferior. • border-left-style: Estilo del borde izquierdo. • background-color: Color de fondo

• background-image: Imagen de fondo

• background-repeat: Repetición de la imagen de fondo • background-position: Posición de la imagen de fondo

• background-attachment: Comportamiento de la imagen de fondo • background: Fondo de un elemento

• position Posicionamiento • top: Desplazamiento superior

• right: Desplazamiento lateral derecho • bottom: Desplazamiento inferior • left: Desplazamiento lateral izquierdo

• clear: Despejar los elementos flotantes adyacentes • overflow: Parte sobrante de un elemento

• z-index: Orden tridimensional • color: Color del texto

• font-family: Tipo de letra • font-size: Tamaño de letra • font-weight: Anchura de la letra • font-style: Estilo de la letra • text-align: Alineación del texto • line-height: Interlineado

• vertical-align: Alineación vertical • text-indent: Tabulación del texto

(55)

L12

– Introducción a Javascript

Definición

JavaScript es un lenguaje de programación que se utiliza principalmente para crear

dinámicas.

Incluir JavaScript en el mismo documento XHTML

El código JavaScript se encierra entre etiquetas

parte del documento. Aunque es correcto incluir cualquier bloque de código en cualquier zona de la página, se recomienda definir el código JavaScript dentro de la cabecera del documento (

<!DOCTYPEhtmlPUBLIC "

"http://www.w3.org/TR/xhtml1/DTD/xhtml1 <htmlxmlns="http://www.w3.org/1999/xhtml"> <head>

<title>Primer Ejemplo

<scripttype="text/javascript"> alert("Hola");

</script> </head> <body>

<p>Se va a mostrar una alerta. </body>

</html>

Definir JavaScript en un archivo externo

Las instrucciones JavaScript se pueden

JavaScript que los documentos XHTML enlazan mediante la etiqueta <script>. Se pueden crear todos los archivos JavaScript que sean necesarios y cada documento XHTML puede enlazar tantos archivos JavaScript como necesite.

<htmlxmlns="http://www.w3.org/1999/xhtml"> <head>

Introducción a Javascript

JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web

Incluir JavaScript en el mismo documento XHTML

El código JavaScript se encierra entre etiquetas <script> y se incluye en del documento. Aunque es correcto incluir cualquier bloque de código en

de la página, se recomienda definir el código JavaScript dentro de la documento (dentro de la etiqueta <head>):

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

="http://www.w3.org/1999/xhtml">

="Content-Type" content="text/html; charset=iso Primer Ejemplo de JavaScript</title>

="text/javascript">

Se va a mostrar una alerta.</p>

Definir JavaScript en un archivo externo

Las instrucciones JavaScript se pueden incluir en un archivo externo

que los documentos XHTML enlazan mediante la etiqueta <script>. Se todos los archivos JavaScript que sean necesarios y cada documento

antos archivos JavaScript como necesite. ="http://www.w3.org/1999/xhtml">

="Content-Type" content="text/html; charset=iso

55 y se incluye en cualquier

del documento. Aunque es correcto incluir cualquier bloque de código en de la página, se recomienda definir el código JavaScript dentro de la

XHTML 1.0 Transitional//EN"

="text/html; charset=iso-8859-1"

incluir en un archivo externo de tipo que los documentos XHTML enlazan mediante la etiqueta <script>. Se

todos los archivos JavaScript que sean necesarios y cada documento

(56)

56 <title>Primer Ejemplo de JavaScript</title>

<scripttype="text/javascript" src="js/alertas.js"></script> </head>

<body>

<p>Se va a mostrar una alerta.</p> </body>

</html>

Y dentro del fichero alertas.js irá: alert("Hola");

Además del atributo type, este método requiere definir el atributo src, que es el que indica la URL correspondiente al archivo JavaScript que se quiere enlazar. Cada etiqueta <script> solamente puede enlazar un único archivo, pero en una misma página se pueden incluir tantas etiquetas <script> como sean necesarias.

Incluir JavaScript en los elementos XHTML

Este último método es el menos utilizado, ya que consiste en incluir trozos de JavaScript dentro del código XHTML de la página:

<htmlxmlns="http://www.w3.org/1999/xhtml"> <head>

<title>Primer Ejemplo de JavaScript</title> </head>

<body>

<p onclick="alert('Hola');">Se va a mostrar una alerta.</p> </body>