Está en la página 1de 9

Guia

deLaboratorio
Nº 01
Semana 2 del 02 al 06 de setiembre 2012

IMPLEMENTANDO PAGINAS WEB DESDE ASP.NET


Objetivos
Luego de completar este laboratorio, el estudiante será capaz de:
 Conocer y manejar el nuevo entorno de ASP.NET
 Comprender la manera de trabajar En ASP.NET
 El alumno implementara APLICACIONES WEB con codigo HTML y funciones en JavaScript

Nuestra primera página web

Ejemplo agregar un webform y en la vista html el siguiente script

Webform1.aspx
<script language="javascript">
document.write('Hola Mundo');
</script>

Pág # 1 Prof. Gina Huertas Camacho


Cerrar e imprimir
<input name="button" type="button" onclick="window.close();" value="Cerrar esta ventana" />
<a href="javascript:print()">Imprimir</a>

Que es JavaScript ?
JavaScript es un lenguaje interpretado orientado a las páginas web, con una sintaxis semejante a la
del lenguaje Java.

Se trata de un lenguaje de tipo script compacto, basado en objetos y guiado por eventos diseñado
específicamente para el desarrollo de aplicaciones cliente-servidor dentro del ámbito de Internet.

Los programas JavaScript van incrustados en los documentos HMTL, y se encargan de realizar acciones en
el cliente, como pueden ser pedir datos, confirmaciones, mostrar mensajes, crear animaciones, comprobar
campos...

Dónde y cómo incluir JavaScript


Existen distintos modos de incluir lenguaje JavaScript en una página.

La forma mas frecuente de hacerlo es utilizando la directiva <script> en un documento HTML (se pueden
incluir tantas directivas<script> como se quiera en un documento). El formato es el siguiente:

<script language="Javascript"> </script>

El objeto document
Es un objeto del navegador, document es el que tiene el contenido de toda la página que se está visualizando.
Esto incluye el texto, imágenes, enlaces, formularios, ... Gracias a este objeto vamos a poder añadir
dinámicamente contenido a la página, o hacer cambios, según nos convenga.
Métodos
 clear(). Limpia la ventana del documento
 open(). Abre la escritura sobre un documento.
 close(). Cierra la escritura sobre el documento actual
 write(). Escribe texto en el documento.
 writeln(). Escribe texto en el documento, y además lo finaliza con un salto de línea

Webform2.aspx
<script type="text/javascript">
var previousColor;
function MakeRed() {
previousColor = window.event.srcElement.style.color;
window.event.srcElement.style.color = "#FF0000";
}
function RestoreColor() {
window.event.srcElement.style.color = previousColor;
}
</script>

En la cabecera.Luego, usando controles de servidor o de HTML de servidor podemos llamar a la función .


<asp:button id="Button1" runat="server"
text="Button1" onmouseover="MakeRed();" onmouseout="RestoreColor();" />

Pág # 2 Prof. Gina Huertas Camacho


nota : El evento onMouseOver se ejecuta cuando pasamos la flecha del mouse sobre un hipervínculo y el evento
onMouseOut cuando la flecha abandona el mismo.

Webform3.aspx
<form id="form1" runat="server">
<div>
<input name="button" type="button" onclick="window.close();" value="Cerrar esta ventana" />
<a href="javascript:print()">Imprimir</a>
<br />
</div>
</form>
EntradaDatosTeclado.aspx
<script language="JavaScript">
var nombre;
var edad;
nombre = prompt('Ingrese su nombre:', '');
edad = prompt('Ingrese su edad:', '');
document.write('Hola ');
document.write(nombre);
document.write(' asi que tienes ');
document.write(edad);
document.write(' años');
</script>
Webform4.aspx
Empleando operadores lógicos

<head runat="server">
<title></title>
<script language="javascript">
var num1, num2, num3;
num1 = prompt('Ingrese primer número:', '');
num2 = prompt('Ingrese segundo número:', '');
num3 = prompt('Ingrese tercer número:', '');
num1 = parseInt(num1);
num2 = parseInt(num2);
num3 = parseInt(num3);
if (num1 > num2 && num1 > num3) {
document.write('el mayor es el ' + num1);
}
else {
if (num2 > num3) {
document.write('el mayor es el ' + num2);
}
else {
document.write('el mayor es el ' + num3);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>

</div>

Pág # 3 Prof. Gina Huertas Camacho


</form>

</body>
Webform5.aspx(Estructuras Secuenciales)
<script language="JavaScript">
var valor1;
var valor2;
valor1 = prompt('Ingrese primer número:', '');
valor2 = prompt('Ingrese segundo número', '');
var suma = parseInt(valor1) + parseInt(valor2);
var producto = valor1 * valor2;
document.write('La suma es ');
document.write(suma);
document.write('<br>');
document.write('El producto es ');
document.write(producto);
</script>
Webform6.aspx(Estructuras while)
<script language="javascript">
var x;
x = 1;
while (x <= 100) {
document.write(x);
document.write('<br>');
x = x + 1;
}
</script>
Webform7.aspx(estructura condicional simple)
<script language="javascript">
var nombre;
var nota;
nombre = prompt('Ingrese nombre:', '');
nota = prompt('Ingrese su nota:', '');
if (nota >= 13) {
document.write(nombre + ' esta aprobado con un ' + nota);
}
</script>

Webform7(estructura condicional simple2)


<script language="JavaScript">
var nombre;
var edad;
nombre = prompt('Ingrese su nombre:', '');
edad = prompt('Ingrese su edad:', '');
document.write('Hola ');
document.write(nombre);
document.write(' asi que tienes ');
document.write(edad);
document.write(' años');
</script>
Webform8(Estructura Condicional Compuesta)
<script language="javascript">
Pág # 4 Prof. Gina Huertas Camacho
var num1, num2;
num1 = prompt('Ingrese el primer número:', '');
num2 = prompt('Ingrese el segundo número:', '');
num1 = parseInt(num1);
num2 = parseInt(num2);
if (num1 > num2) {
document.write('el mayor es ' + num1);
}
else {
document.write('el mayor es ' + num2);
}
</script>
Webform8(Estructura Condicional Compuesta2)
<script language="javascript">
var num1, num2;
num1 = prompt('Ingrese el primer número:', '');
num2 = prompt('Ingrese el segundo número:', '');
num1 = parseInt(num1);
num2 = parseInt(num2);
if (num1 > num2) {
document.write('el mayor es ' + num1);
}
else {
document.write('el mayor es ' + num2);
}
</script>
ESTRUCTURA SWITCH

<script language="javascript">

var valor;
valor = prompt('Ingrese un valor comprendido entre 1 y 5:', '');
//Convertimos a entero
valor = parseInt(valor);
switch (valor) {
case 1: document.write('uno');
break;
case 2: document.write('dos');
break;
case 3: document.write('tres');
break;
case 4: document.write('cuatro');
break;
case 5: document.write('cinco');
break;
default: document.write('debe ingresar un valor comprendido entre 1 y 5.');
}
</script>

Función

Pág # 5 Prof. Gina Huertas Camacho


<head runat="server">
<title></title>

<script language="JavaScript">
<!--
function displayPopup() {
alert("Hello, world.");
}
// -->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="Click Me!" onclick="displayPopup()" />

</div>
</form>
</body>
Funcion2
<script languaje="javascript">
function mostrarMensaje() {
document.write("Cuidado<br>");
document.write("Ingrese su documento correctamente<br>");
}

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value ="funcion" onclick ="mostrarMensaje()" />
</div>
</form>
</body>

funcionesConParametros
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language="javascript">
function mostrarComprendidos(x1, x2)
{
var inicio;

valor1 = parseInt(x1.value)
valor2 = parseInt(x2.value)
for (inicio = valor1; valor1 <= valor2; valor1++) {
document.write(valor1 + ' ');

Pág # 6 Prof. Gina Huertas Camacho


return mostrarComprendidos
}

</script>

</head>
<body>
<form id="form1" runat="server">
<div>

<h1>NUMEROS COMPRENDIDOS</h1>
Ingrese numero menor<INPUT TYPE="text" NAME="campo1" id="Text1" ><br>
ingrese numero mayor<INPUT TYPE="text" NAME="campo2" id="Text2" ><br>
<input type="button" name="Button1" value="Presióneme"
onclick="mostrarComprendidos(campo1,campo2)"> <br>

</div>
</form>
</body>
</html>

Script
El procesamiento en el lado del servidor es la clave en ASP.net, pero este sistema tiene algunos inconvenientes.
Siempre debemos enviar datos al servidor. El procesamiento del lado del cliente ofrece una respuesta instantánea a
las acciones del usuario. Hay controles en Asp.net usan scripts de cliente como los controles de
validación.Podemos invocar el código del cliente desde cualquier control de servidor con la propiedad
OnClientClick.
Eventos HTML más usados son: onblur, onfocus, onclick, onchange, onkeydown,onmouseover, onserverclick«

DEMO 1
Crear una pagina web , solo con código HTML que nos permita visualizar
el texto Bienvenido a ASP.NET en 6 tamaños distintos de fuente

Código
Agrega el sgte. Código en la sección BODY
<h3>Mi Primera Aplicacion Web </h3>
<% dim i as integer
for i=0 to 7 %>
<center>
<font size="<%=i%>">Bienvenido a ASP.NET </font>
</center>
<br>

Pág # 7 Prof. Gina Huertas Camacho


<%Next%>
</form>
</body>
DEMO2
Crear una página Web con controles HTML que
permita ingresar los datos completos de una alumna
y al dar clic en el boton muestre un mensaje de
bienvenida para el alumno.

Código :
En la sección head agrega
<script runat =”server”>
sub submit(sender As object, e As eventArgs)
p1.InnerHtml="<b> Bienvenido(a): </b> " &textarea1.value
end sub
</script>
En la seccion Form agregar
<form id="Form1" method="post" runat="server">
Ingresa nombre apellido completo Sección <textarea id="textarea1" cols="36" rows="2" runat="server"
NAME="textarea1"></textarea>
<input type="submit" value="Submit" OnServerClick="submit" runat="server" ID="Submit1" NAME="Submit1">
<p id="p1" runat="server"></p>
</form>

DEMO3

Diseñar un formulario web que mediante una


funcion en javascript calcule la suma de 2 numeros
ingresados por el usuario

Pág # 8 Prof. Gina Huertas Camacho


Agregar en la seccion head el siguiente script

<SCRIPT LANGUAGE=JavaScript>
<!--
function sumar(a, b) {
var valor1 = 0;
var valor2 = 0
valor1 = parseInt( a.value )
valor2 = parseInt( b.value )
resultado = valor1 + valor2
document.write("la suma es : " ,resultado)
return sumar Como puedes ver, aquí utilizamos
Document.Write() (un objeto del IE, junto
}
con uno de sus métodos), que es
// --> equivalente al objeto de ASP
Response.Write(), y que sirve para
</SCRIPT> escribir en la ventana del navegador
cualquier resultado generado por el
Codigo de la seccion form código.
<h1>SUMA DE NUMEROS</h1>
Ingrese numero 1 <INPUT TYPE="text" NAME="campo1" id="Text1"
><br>
ingrese numero 2<INPUT TYPE="text" NAME="campo2" id="Text2" ><br>
<input type="button" name="Button1" value="Presióneme" onclick="sumar(campo1,campo2)"> <br>

Pág # 9 Prof. Gina Huertas Camacho