Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 15 vistas

    Guia1 S01

    Cargado por

    ginahuertascamacho
    Este documento presenta una guía de laboratorio sobre la introducción a la plataforma ASP.NET. Explica cómo crear un proyecto web básico en ASP.NET usando Visual Studio, agregar páginas y código, e implementa ejercicios prácticos con código HTML, JavaScript y C# para mostrar datos e interactuar con el usuario.

    Copyright:

    © All Rights Reserved
    Descargue como DOC, PDF, TXT o lea en línea desde Scribd

    Guia1 S01

    Cargado por

    ginahuertascamacho
    15 vistas9 páginas
    Este documento presenta una guía de laboratorio sobre la introducción a la plataforma ASP.NET. Explica cómo crear un proyecto web básico en ASP.NET usando Visual Studio, agregar páginas y código, e implementa ejercicios prácticos con código HTML, JavaScript y C# para mostrar datos e interactuar con el usuario.

    Descripción original:

    GUIA DE LA SEMANA 01 DE ASP.NET

    Título original

    GUIA1-S01

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOC, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Este documento presenta una guía de laboratorio sobre la introducción a la plataforma ASP.NET. Explica cómo crear un proyecto web básico en ASP.NET usando Visual Studio, agregar páginas y código, e implementa ejercicios prácticos con código HTML, JavaScript y C# para mostrar datos e interactuar con el usuario.

    Copyright:

    © All Rights Reserved
    Descargue como DOC, PDF, TXT o lea en línea desde Scribd
    Descargar como doc, pdf o txt
    15 vistas9 páginas

    Guia1 S01

    Cargado por

    ginahuertascamacho
    Este documento presenta una guía de laboratorio sobre la introducción a la plataforma ASP.NET. Explica cómo crear un proyecto web básico en ASP.NET usando Visual Studio, agregar páginas y código, e implementa ejercicios prácticos con código HTML, JavaScript y C# para mostrar datos e interactuar con el usuario.

    Copyright:

    © All Rights Reserved
    Descargue como DOC, PDF, TXT o lea en línea desde Scribd
    Descargar como doc, pdf o txt
    de 9

    I.S.T.P.

    ”Argentina” Taller de Programación Web VI – A-B Diurno

    Guía De Laboratorio Nº 01
    Semana 01

    INTRODUCCION A LA PLATAFORMA DE ASP.NET


    Objetivos
    Luego de completar este laboratorio, el estudiante será capaz de:
     Conocer y manejar el nuevo entorno de ASP.NET
     Implementar código lado cliente
     El alumno implementara APLICACIONES WEB con codigo HTML y funciones en Script

    Creación de un proyecto ASP.NET con Visual Studio

    Veremos como crear una aplicación web con Asp net utilizando el entorno de Visual Studio, crearemos una
    simple aplicación, un clásico hola mundo, que nos mostrara el proceso y dudas al crear una aplicación web en esta
    plataforma, veremos desde el proceso de inicio de nuestra aplicación hasta como poder ver el resultado final de nuestra
    aplicación. Asp net (active server pages) es un framework para aplicaciones web desarrollado por Microsoft, con el
    puedes construir páginas web dinámicas, aplicaciones web y servicios web XML. Visual studio incluye características
    nuevas para mejorar el desarrollo web, ya que el desarrolo de aplicaciones web y webs dinámicas no es una tarea
    sencilla, visual studio facilita enormemente esta tarea. Veamos entonces el como crear una aplicación web con asp.net .
    Para lo cual desarrollamos los siguientes pasos:
    1. Abrimos Visual Studio .NET y creamos un nuevo proyecto web.
    2. Seleccionamos el tipo de proyecto que deseamos realizar.
    a. Seleccionamos ASP.NET Web Site.
    b. Indicamos la ruta donde vamos a guardar el proyecto: d:\TallerWebVIAoB\
    WebSiteGuia1
    c. Determinamos el lenguaje que vamos a utilizar: Visual C#.
    d. Por último presionamos el botón OK para crear la solución.

    Pág # 1 Prof. Gina Huertas Camacho


    I.S.T.P.”Argentina” Taller de Programación Web VI – A-B Diurno

    3. Agregar un WebForm

    Sitio Web/Agregar nuevo elemento/WebForm

    En el webform escribimos

    Pág # 2 Prof. Gina Huertas Camacho


    I.S.T.P.”Argentina” Taller de Programación Web VI – A-B Diurno

    Ejercicio 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


    <body>
    <form id="form1" runat="server">
    <div>
    <h3>Mi Primera Aplicacion Web </h3>
    <% int i ;
    for (i=0;i<=7;i++ ){%>
    <center>
    <font size="<%=i%>">Bienvenido a ASP.NET </font>
    </center>
    <br>
    <%}%>
    </div>
    </form>
    </body>
    Ejercicio 2
    ASP permite el programador intercalar fragmentos de código de scripting <% %>
    dentro del código HTML.Esta scripting código puede ser escrito en un script lenguaje como JavaScript o VBScript (lado
    cliente ) o c# ,vb (lado servidor) etc

    Pág # 3 Prof. Gina Huertas Camacho


    I.S.T.P.”Argentina” Taller de Programación Web VI – A-B Diurno

    En la etiqueta Form
    <form id="form1" runat="server">
    <div>
    Ingrese Nombre : <input type ="text" runat ="server" id="nombre" />
    <div id="etiqueta" runat ="server"> </div>
    <div>
    <input id="Button1" type ="button" runat ="server" onserverclick
    ="saludo" value="SALUDO"/>
    </div>
    </form>

    En La sección head agregar


    <head runat="server">
    <title></title>
    <script language ="C#" runat ="server">
    void saludo(Object origen,EventArgs args ){
    etiqueta.InnerText ="hola " + nombre.Value;
    }
    </script>
    </head>

    Finalmente muestre la pagina ingrese nombre y observe el sgte. Resultado

    Ejercicio 3
    Crear con código HTML una página como la muestra, además agregar una marquesina

    Código
    Agregar en la etiqueta <body> la marquesina y en la etiqueta <form>
    <body>
    <marquee behavior="scroll"
    bgcolor="#ffffcc">I.S.T.P."Argentina"</marquee>
    <form id="form1" runat="server" >
    <div>
    Nombre : <input id="nombre" type="text" runat ="server" >
    Categorias
    <select id="Categoria" size="1" runat="server">
    <option>Psicologia</option>
    <option>Negocios</option>
    Pág # 4 Prof. Gina Huertas Camacho
    I.S.T.P.”Argentina” Taller de Programación Web VI – A-B Diurno

    <option>Computacion</option>
    </select>

    <input type="submit" value="busqueda" onserverclick="mostrar" runat


    ="server" >
    <p id="p1" runat="server"></p>
    </div>
    </form>
    </body>

    En la sección head
    <head runat="server">
    <title></title>
    <script runat ="server" runat ="server" >
    void mostrar(Object o, EventArgs a){
    p1.InnerText = " Bienvenido(a): "+ nombre.Value+" a " +
    Categoria.Value;
    }
    </script>

    </head>

    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>
    Pág # 5 Prof. Gina Huertas Camacho
    I.S.T.P.”Argentina” Taller de Programación Web VI – A-B Diurno

    <input type="submit" value="Submit" OnServerClick="submit" runat="server" ID="Submit1"


    NAME="Submit1">
    <p id="p1" runat="server"></p>
    </form>

    Ejercicio 4

    Agregar en un Webform los siguientes controles


    de servidor web (cuadro de herramientas) y
    luego crear un evento que muetre el codigo y
    categoría seleccionado

    Código
    Agregar los controles del cuadro de herramientas
    En la sección html agregar
    <script language="vb" runat="server">
    sub boton_click (byval sender as object, byval e as EventArgs)
    lblmensaje.text="Hola "+ me.txtcodigo.text & " , ha seleccionado: " + _
    me.DdlCategorias.selecteditem.text
    end sub
    </script>
    En la etiqueta HTML del Button AGREGAR OnClick="Boton_click"
    asp:Button id="Button1" runat="server" Text="Busqueda"
    OnClick="Boton_click"></asp:Button>

    Pág # 6 Prof. Gina Huertas Camacho


    I.S.T.P.”Argentina” Taller de Programación Web VI – A-B Diurno

    Ejercicio 4
    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>
    <!--
    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) Como puedes ver, aquí utilizamos
    Document.Write() (un objeto del IE, junto
    return sumar con uno de sus métodos), que es
    equivalente al objeto de ASP
    } Response.Write(), y que sirve para escribir
    // --> en la ventana del navegador cualquier
    resultado generado por el código.
    </SCRIPT>
    Codigo de la seccion form
    <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 # 7 Prof. Gina Huertas Camacho


    I.S.T.P.”Argentina” Taller de Programación Web VI – A-B Diurno

    WEBFORM 5
    Ahora agregemos texto en la barra de estado, (la barra enl a parte inferior de su browser
    donde se ven las URL's)
    Este script muestra como se puede
    escribir un simple texto en la barra de
    estado:

    Codigo en
    headº

    <script language="JavaScript">
    <!-- Hide
    function statbar(txt) {
    window.status = txt;
    }
    // -->
    </script>
    <SCRIPT FOR="Boton1" EVENT="onClick"
    LANGUAGE="VBScript">
    window.close

    </script>

    Codigo de la sección form


    <input type="button" name="look" value="Escribir!" onclick="statbar('Hola! esta es la barra de estado!');">
    <input type="button" name="erase" value="Borrar!" onclick="statbar('');">
    <INPUT TYPE="button" NAME="Boton1" VALUE="cerrar" id="Button1"

    WEBFORM 6

    Diseñar un webform que muestre un scroller en la


    barra de estado

    <script language="JavaScript">
    <!-- Hide

    Pág # 8 Prof. Gina Huertas Camacho


    I.S.T.P.”Argentina” Taller de Programación Web VI – A-B Diurno

    var scrtxt="Aqui va el mensaje, los visitantes de su pagina "+


    "la veran por horas totalmente fascinados...";
    var lentxt=scrtxt.length;
    var width=100;
    var pos=1-width;
    function scroll() {
    pos++;
    var scroller="";
    if (pos==lentxt) {
    pos=1-width;
    }
    if (pos<0) {
    for (var i=1; i<=Math.abs(pos); i++) {
    scroller=scroller+" ";}
    scroller=scroller+scrtxt.substring(0,width-i+1);
    }
    else {
    scroller=scroller+scrtxt.substring(pos,width+pos);
    }
    window.status = scroller;
    setTimeout("scroll()",150);
    }
    //-->
    </script>
    En la sección body
    <body onLoad="scroll();return true;">
    Este script usa las mismas funciones (o parte de ellas) que usamos antes. El setTimeout(...) le dice al 'timer' que
    invoque la función scroll() cuando el tiempo es el justo. El scroller se moverá un paso mas adelante. Al comienzo hay
    muchos cálculos pero esto no es muy importante para saber como funciona el script. Los cálculos se hacen para
    determinar la posicióon donde el scroller debe arrancar. Si se ubica solo al comienzo se deben poner unos espacios en
    blanco para ubicar el texto correctamente

    Pág # 9 Prof. Gina Huertas Camacho

    También podría gustarte