Guia1 2012

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();" />

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>
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);
if (num1 > num2 && num1 > num3) {
document.write('el mayor es el ' + num1);
}
else {
if (num2 > num3) {
}
else {
}
}
</script>
</head>
<body>
<div>
</div>

</form>
</body>
Webform5.aspx(Estructuras Secuenciales)
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)
var x;
x = 1;
while (x <= 100) {
document.write(x);
document.write('<br>');
x = x + 1;
}
</script>
Webform7.aspx(estructura condicional simple)
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)

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)
var num1, num2;
num1 = prompt('Ingrese el primer número:', '');
num2 = prompt('Ingrese el segundo número:', '');
if (num1 > num2) {
document.write('el mayor es ' + num1);
}
else {
}
</script>
Webform8(Estructura Condicional Compuesta2)
var num1, num2;
num1 = prompt('Ingrese el primer número:', '');
num2 = prompt('Ingrese el segundo número:', '');
if (num1 > num2) {
}
else {
}
</script>
ESTRUCTURA SWITCH
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

<title></title>

</script>
</head>
<body>
<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>
<div>
<input type="button" value ="funcion" onclick ="mostrarMensaje()" />
</div>
</form>
</body>
funcionesConParametros
<html xmlns="http://www.w3.org/1999/xhtml">
<title></title>
function mostrarComprendidos(x1, x2)
{
var inicio;
valor1 = parseInt(x1.value)
valor2 = parseInt(x2.value)
for (inicio = valor1; valor1 <= valor2; valor1++) {
document.write(valor1 + ' ');

return mostrarComprendidos
}
</script>
</head>
<body>
<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>

<%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

Agregar en la seccion head el siguiente script
<SCRIPT LANGUAGE=JavaScript>
 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>

Guia1 2012

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Guia1 2012

Enviado por

Direitos autorais:

Formatos disponíveis

Guia

IMPLEMENTANDO PAGINAS WEB DESDE ASP.NET

Nuestra primera página web

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

Pág # 1 Prof. Gina Huertas Camacho

Dónde y cómo incluir JavaScript

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

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

Pág # 2 Prof. Gina Huertas Camacho

Pág # 3 Prof. Gina Huertas Camacho

Webform7(estructura condicional simple2)

Pág # 5 Prof. Gina Huertas Camacho

Pág # 6 Prof. Gina Huertas Camacho

Pág # 7 Prof. Gina Huertas Camacho

Diseñar un formulario web que mediante una

Pág # 8 Prof. Gina Huertas Camacho

Pág # 9 Prof. Gina Huertas Camacho

Você também pode gostar