Sunteți pe pagina 1din 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

ALUMNO:

PEDRO LOPEZ SALAZAR

CARRERA: ING EN SISTEMAS COMPUTACIONALES MATERIA: PROGRAMACION WEB PROFESOR: NOE HERNANDEZ

PROGRAMACION WEB INCLUYE: * HTML *VBSCRIPT *JAVASCRIPT *APPLETS *SERVLETS


LIBRO RECOMENDADO: DOMINE JAVASCRIPT

JAVA 2

1
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

EVALUACIONES: *EXAMEN *PRACTICAS DE LABORATORIO 40% *TAREAS


2
Pgina de 123

20%

40%

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

HTML
<HTML> < HEAD> <TITLE> </ TITLE> </HEAD>

<BODY> Estructura bsica En html ------------------------------------------------------------------------------------------</BODY> </BODY>

3
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

EL

HTML ESTATICO

SE LLAMA HTML ESTATICO POR QUE NO SE MODIFICA LA PAGINA WEB NO SI ANTES MODIFICAR EL CODIFUENTE DE LA PAGINA , Y ACTUALIZARLO..

EL

HTML DINAMICO

SE LLAMA HTML DINAMICO POR QUE CAMBIA EN TODO MOMENTO Y ADEMAS OCUPA UN LENGUAJE DE PROGRAMACION AVANZADO..

PROGRAMA 1

4
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

5
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

6
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

7
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

PROGRAMA 2

8
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

9
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

10
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

Pestaa <H1> </H1>


LA PESTAA <H1> INDICA EL TAMAO DE LA LETRA MAS GRANDE Y MIENTRAS AUMENTE EL VALOR DEL NUMERO SERA MAS PEQUEA LA LETRA.

<h1> ITSZapopan

</h1> </h2>

<h2>Programacion web

<h3>Pedro Lopez Salazar </h3> <h3> 26 de agosto del 2009 </h4>

INDICA EL TAMAO DE LA LETRA

<font font size ="2"> Hola maquina </font>

11
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

Listas
Las listas se dividen en 2 categorias en numeradas y no numeradas. Ejemplo: <html> <head> <title>numeradas</title> </head> <body>

<ol> <li>fisica <li>quimica <li>web

</ol> </body> </html>

12
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

13
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

14
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

15
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

LA PESTAA SINTAXIS: <OL> <LI>UNO <LI>DOS </OL>

PARA ENUMERAR

<OL> <li></OL>

<OL> <LI> 1ER NOMBRE DE LO QUE QUIERES QUE APAREZCA ENUMERADA </ OL> SIRVE PARA ENUMERAR <LI> 2DO NOMBRE DE LO QUE QUIERES QUE APAREZCA ENUMERADA </ OL> SIRVE PARA ENUMERAR </OL>

LA PESTAA
SINTAXIS:
16

PARA NO ENUMERAR

<UL>

Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<UL> <LI>UNO <LI>DOS </UL>

<UL> <LI> 1ER NOMBRE DE LO QUE QUIERES QUE APAREZCA ENUMERADA </ OL> SIRVE PARA ENUMERAR <LI> 2DO NOMBRE DE LO QUE QUIERES QUE APAREZCA ENUMERADA </ OL> SIRVE PARA ENUMERAR </UL>

PROGRAMA 4

17
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

18
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

19
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

20
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

PARA MODIFICAR LOS CAMBIOS TIENES QUE SEGUIR ESTOS PASOS PARA MODIFICAR EL CODIGO :

21
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

22
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

23
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

TABLAS

24
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

25
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

26
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

ETIQUETA
27

<TD>
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

ESTA ETIQUETA SIRVE PARA GENERAR CELDAS DE CABECERA CON LETRA NORMAL.

28
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

ETIQUETA

<TH>

ESTA ETIQUETA SIRVE PARA GENERAR CELDAS O CAMPOS O TUPLAS DE CABECERA NEGRITA.

29
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

30
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

ETIQUETA

< TR>

</TR>

ESTA ETIQUETA (TR)GENERA FILAS DENTRO DE ELLA ESTA LAS ETIQUETAS TD (CABECERA NEGRITA) Y TD (CABECERA NORMAL), COMO POR EJEMPLO:

31
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

32
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

EXPLICACION DEL CODIGO: 33


Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<html> <head> <title> GENERANDO FILAS </title> </head>

Con <HTML> es la cabecera del programa o directiva a si como en c++ que lleva en la parte de arriba las librerias que son : include<iostream.h>. <head> es la cabecera de la pagina que ests desarrollando y aparece en la parte de arriba. <title> es el nombre del titulo de tu pagina web

Nota : para cerrar las etiquetas unicamente se cierra con < / nombre de la etiqueta a cerrar>

Ejeplo: <title> escribe el titulo del programa </title >

<body> La etiqueta body es el cuerpo de la pagina web y alli va todo lo que quieras agregar como por ejemplo crear tables , botones , graficos, animaciones , imagines etc.

<table border = "2">

Esta etiqueta sirve para darle el borde de la tabla entre mayor sea el numero mayor sera el borde

34
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<TR> <TH>NOMBRE <TD>CALIFICACION 1 <TH>CALIFICACION 2 </TR>

Con la etiqueta <tr> vamos a crear filas dentro de la tabla y dentro de ella decirle si las cabeceras que contendran seran cabeceras negritas <tdo> o normales<th> y al final cerrarlo con la etiqueta < /tr > con eso terminamos y asi delimitamos la fila de las tablas de igual forma se realizan las siguientes filas.

<TR> <TD>JUAN <TD>100 <TD>90 </TR>

<TR> <TD>PEDRO <TD>100 <TD>100 </TR> 35


Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<TR> <TD>MANLIO <TD>90 <TD>99 </TR>

<TR> <TD>MARIO <TD>100 <TD>80 </TR>

<TR> <TD>DALIA <TD>80 <TD>100 </TR>

<TR> <TD>DANIELA 36
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<TD>85 <TD>95 </TR>

Para finalizar todo nicamente cerramos las pestaas que en su momento se abrieron recuerda que debes de cerrarlo de adentro para fuera. </table> </body> </html>

Ejemplo: <html> <head>cabecera de la pagina web <title> titulo de la pagina web </head> <body> Datos en el cuerpo de la pagina </body> </html> <title>

TAREA 1.- CREAR 6 FILAS Y 4 COLUMNAS, CREAR 4 ENCABEZADOS NORMALES Y NEGRITA Y DENTRO DE CADA CELDA ESCRIBIR LOS NUMEROS ROMANOS, LETRAS MAYUSCULAS, LETRAS MINUSCULAS, NUMEROS. Y AGREGAR LISTAS ORDENADAS. 37
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

EN ESTE CODIGO PONGO EL TITULO DE LAPAGINA , DECLARO EL BORDE DE MI TABLA ,EMPIEZO A CREAR MISCABEZALES NEGRITAS Y NORMALES.
<html> <head> <title> PRIMERA PRACTICA DE PROGAMACION WEB. </title>

</head>

<BODY>

<TABLE BORDER="1"> <TR> <TD>Numeros Romanos <TH>Letras Mayusculas <TD>Letras Minusculas <TH>Numeros </TR>

----------------------------------------------------------------------------------------------------------------------------------

a. Variantes de las listas ordenadas


numerada normal, como hemos visto
<ol> <li>un ordenador pentium 1000</li> <li>tarifa plana ya!</li> <li>vacaciones en el caribe</li> <li>vacaciones para nuestro jefe </li> </ol>

38
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

lista ordenada con letras ...:


<ol type="A"> <li>Un ordenador Pentium 1000 </li> <li>Tarifa plana ya! </li> <li>Vacaciones en el Caribe</li> <li>Vacaciones para nuestro Jefe </li> </ol>

lista con formato A, B, C ... A. Un ordenador Pentium 1000 B. Tarifa plana ya! C. Vacaciones en el Caribe D. Vacaciones para nuestro Jefe El mismo tipo de orden, en minsculas:
<ol type="a"> <li>Un ordenador Pentium 1000 </li> <li>Tarifa plana ya! </li> <li>Vacaciones en el Caribe</li> <li>Vacaciones para nuestro Jefe </li> </ol>

minsculas a. b. c. d. Un ordenador Pentium 1000 Tarifa plana ya! Vacaciones en el Caribe Vacaciones para nuestro Jefe

Ordenada con numeros romanos:


<ol type="I"> <li>Un ordenador Pentium 1000 </li> <li>Tarifa plana ya! </li> <li>Vacaciones en el Caribe</li> <li>Vacaciones para nuestro Jefe </li> </ol>

numeros romanos I. Un ordenador Pentium 1000 II. Tarifa plana ya! III. Vacaciones en el Caribe IV. Vacaciones para nuestro Jefe
39
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

numerada con numeros romanos en minscula:


<ol type="i"> <li>Un ordenador Pentium 1000 </li> <li>Tarifa plana ya! </li> <li>Vacaciones en el Caribe</li> <li>Vacaciones para nuestro Jefe </li> </ol>

numeros romanos en minscula i. Un ordenador Pentium 1000 ii. Tarifa plana ya! iii. Vacaciones en el Caribe iv. Vacaciones para nuestro Jefe
----------------------------------------------------------------------------------------------------------------------------&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

Continuacin: En esta parte creare la siguiente fila con <tr> y escribir <td> para crear celda de cabecera normal. Y para enumerarlos ocupamos escribir <OL TYPE ="I"> para que escriba en forma consecutivo. Y como vamos a listarlo ocupamos la etiqueta <LI> y para finalizar toda la fila lo cerramos con </TR>
<TR> <TD> <OL TYPE ="I"> <LI> ONE

40
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<TD> <OL TYPE ="A"> <LI> AARON

<TD> <OL TYPE ="a"> <LI> avast

<TD> <OL TYPE ="1"> <LI> uno

</TR>

&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& -------------------------------------------------------------------------------------------------------------------------------

b. enredando con el orden de la lista


con el atributo start= aadido a una etiqueta <ol>, la lista comienza donde indiquemos. Y con el atributo value= aadido a una etiqueta <li>, podemos forzar la numeracion de esa etiqueta y las siguientes:
<ol start="7"> <li>Un ordenador Pentium 1000</li> <li>Tarifa plana ya!</li> <li value="10">Vacaciones en el Caribe</li> <li>Vacaciones para nuestro Jefe</li> </ol>

comienza en 7, salta a 10
41
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

7. Un ordenador Pentium 1000 8. Tarifa plana ya! 10. Vacaciones en el Caribe 11. Vacaciones para nuestro Jefe ----------------------------------------------------------------------------------------------------------------------------&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

CONTINUACION: ETIQUETA START

con el atributo start= aadido a una etiqueta <ol>, la lista comienza donde indiquemos.
<TR> <TD> <OL TYPE ="I" START ="2"> <LI> D

<TD>

42
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<OL TYPE ="A" START ="2"> <LI> D

<TD> <OL TYPE ="a"START ="2"> <LI> D

<TD> <OL TYPE ="1"START ="2"> <LI> D </TR>

<TR> <TD> <OL TYPE ="I" START ="3"> <LI> D

<TD> <OL TYPE ="A" START ="3"> <LI> D

<TD> <OL TYPE ="a"START ="3">

43
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<LI> D

<TD> <OL TYPE ="1"START ="3"> <LI> D </TR>

<TR> <TD> <OL TYPE ="I" START ="4"> <LI> D

<TD> <OL TYPE ="A" START ="4"> <LI> D

<TD> <OL TYPE ="a"START ="4"> <LI> D

<TD> <OL TYPE ="1"START ="4">

44
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<LI> D </TR>

</BODY> </html>

45
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

EJERCICIO

uno

dos

cinco tres cuatro seis

Atributos de celdas
ROWSPAN INDICA EL NUMERO DE RENGLONES QUE QUEREMOS OCUPAR.

COLSPAN INDICA EL NUMERO DE COLUMNAS QUE DESEAMOS OCUPAR 46


Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

NOTA : INDICAN CUANTAS FILAS O COLUMNAS QUIERES INVOLUCRAR.

PRACTICA:

<html> <head> <title>segunda practica de programacion web </title> </head> <body>

<table border ="27" > 47


Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<tr> <td colspan ="2">uno <td>dos </tr>

<tr> <td rowspan ="2" >tres <td rowspan ="2" >cuatro <td>cinco </tr>

<tr> <td>seis </tr>

</table> </body> </html>

48
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

FORMULARIO
ATRIBUTOS: SON LAS CARACTERISTICAS QUE VAMOS A INVOLUCRAR. SCRIPT: ES UN PROGRAMA ESCRITO EN LENGUAJE DE PROGRAMACION Y SE INCRUSTA DENTRO DE HTML.

FORM SON OBJETOS INDEPENDIENTES QUE SE VAN A CREAR Y QUE SE INCRUSTAN DENTRO DE LA FORMA.

49
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

Para tomar lo que contiene: NombreFormano.nombreObjeto.value

PARA COMBINAR CODIGO DE HTML EN VBSCRIPT ES: Document.write (<br>)

Sirve para dar un salto de lnea.

<FORM

ATRIBUTO X .>

<FORM>

----------------------------------------------------------------

</FORM>

ATRIBUTOS DE FORM 50
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

TYPE: DISTINGUE EL TIPO DE ENTRADA DE LOS DATOS

NAME : NOMBRE A LA FORMA ACTION: EJECUTAR O LLAMAR A UNA APLICACIN

METODO: PAST ACCESA A LA BASE DE DATOS

METODO: GET UTILIZAS ESTE METODO CUANDO QUIERES QUE LOS VALORES QUE SE VAYAN A OTRA PAGINA PARA ELLA UTILIZAS EL METODO GET.

<FORM NAME =FORMA1.ACTION = ARCHIVO.ASP> --------------------------------------------</FORM>

PRACTICA:

51
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<html> <head><H4><TH>FORMULARIO PROGRAMACIO WEB<BR> PEDRO LOPEZ SALAZAR <title>PRACTICA A ENTREGAR PEDRO LOPEZ SALZAR</title> </head>

<BODY>

<form name ="forma1"> <table border ="25"> <TR>

52
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<TD> NOMBRE <TD colspan ="2"> <input type ="text" name ="nom"> </TR>

<TR> <TD> DOMICILIO <td colspan ="2"> <input type ="text" name ="dom"> </TR>

<TR> <TD> TELEFONO <TD colspan ="2"> <input type ="text" name ="tel"> </TR>

<TR> <TD COLSPAN ="3">SEXO </TR>

<TR> <td colspan ="2"> <input type= "radio" name ="sexo"> <TD>MASCULINO </TR>

53
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<TR> <td colspan ="2"> <input type= "radio" name ="sexo"> <TD>FEMENINO </tr>

<TR> <TD COLSPAN ="3">COLOR </TR>

<tr> <td colspan ="2"> <input type= "checkbox" name ="color"> <TD>ROJO </TR>

<TR> <TD colspan ="2"> <input type= "checkbox" name ="color"> <TD>AZUL </TR>

<TR> <TD colspan ="2"> <input type= "checkbox" name ="color"> <TD>VERDE </TR>

<TR> <TD COLSPAN ="3"><input type ="button" value ="enviar"> </TR> </table> </FORM>

54
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

</BODY> </HTML>

EJEMPLOS PARA CREAR UNA CAJAS DE TEXTO Y UN BOTON

55
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<html> <head> <title>formulario1</title> </head> <body> <form name ="forma2"> Nombre<input type ="text" name ="nom"> <br> Domicilio<input type ="text" name ="dom"> <br> Telefono<input type ="text" name ="tel"> <br> <input type ="button" value ="enviar"> </form> </body> </html>

56
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<html> <head> <title>recamara de una casa </title> </head> <body>

<table border ="2" >

<tr> <td COLSPAN ="3">SEXO </tr>

<tr> <td colspan ="2"> <input type= "radio" name ="sexo"> <TD>MASCULINO </TR>

<TR> 57
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<td colspan ="2"> <input type= "radio" name ="sexo"> <TD>FEMENINO </tr>

</table> </body> </html>

ETIQUETA <BR>
LA ETIQUETA <BR> SIRVE PARA SALTO DE LINEA. 58
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<html> <head> <title>formulario2</title> </head> <body>

<form name ="forma2"> Nombre<input type ="text" name ="nom"> <br> Domicilio<input type ="text" name ="dom"> <br> Telefono<input type ="text" name ="tel"> <br><br>

sexo <br> <input type= "radio" name ="sexo">masculino <br> <input type= "radio" name ="sexo">femenino<br><br>

color <br> <input type= "checkbox" name ="color">rojo <br> <input type= "checkbox" name ="color">azul <br> <input type= "checkbox" name ="color">verde <br>

<input type ="button" value ="enviar"> </FORM> </body> </html> 59


Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

INPUT(ENTRADA BASICA DE DATOS)


PARA DEFINIR LOS DISTINTOS TIPOS DE ETIQUETA INPUT. CAMPOS BASICOS DE ENTRADA UTILIZAREMOS LA

<html> <head> <title>recamara de una casa </title> </head> <body>

<table border ="3">

<tr> <td colspan ="2">uno

60
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<td> dos </tr>

<tr> <td rowspan ="2" > tres <td rowspan ="2" > cuatro <td> cinco </tr>

<tr> <td> seis </tr>

</table> </body> </html>

VBSCRIPT
61
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

Script: es un programa escrito en lenguaje de programacin y se incrusta dentro de html. 1) javaScript 2) vbscript

Sintaxis:

<html> <head> <title> </title> </head>

<body> <script> language=vbscript> ---------------------------------------------------------------------------------------------62


Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

</script> </body> </html>

Nota: <script> language=vbscript> Con este cdigo te indica con que tipo de cdigo de programacin vas a realizar tu script ya sea en javascript o vbscript.

Estos tipos de pginas son dinmicas por que van cambiando de acuerdo al dato que se les ponga.

CARACTERSTICAS DE VBSCRIPT
-no distingue maysculas ni minsculas -no se declaran variables -trabaja del lado del cliente (es decir no ocupa compilador). -cdigo por lnea

63
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

1er ejemplo en vbscript


<html> <head> <title>HOLA MUNDO EN SCRIPT</title> </head> <BODY> <SCRIPT language ="VBSCRIPT"> CADENA="hola mundo" DOCUMENT.WRITE(CADENA) </SCRIPT> </BODY> </HTML>

Explicacin del codigo: <SCRIPT language ="VBSCRIPT"> Aqu abres la pestaa script y te indicas que vas a programarlo con el lenguaje de vbscript

CADENA="hola mundo" Aqu estas declarando una cadena en la cual guarda la informacin llamada hola mundo

DOCUMENT.WRITE(CADENA) Aqu vamos a imprimir el documento escrito y lo mostraremos en pantalla.

64
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

Ejercicio 2:
<html> <head> <title>HOLA MUNDO EN SCRIPT</title> </head>

<BODY> <form name = "forma1">

65
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

numero1<input type ="text" name ="uno"> numero2<input type ="text" name ="dos">

<input type ="button" name="resultado" value="presionar"> <script for="resultado" event="onclick" language ="vbscript">

numero1=forma1.uno.value numero2=forma1.dos.value resultado=numero1*numero2

document.write("TU RESULTADO ES :") document.write(resultado) </SCRIPT>

</form> </BODY> </HTML>

Explicacin del codigo:


<form name = "forma1">

Se escribe <form name=forma1> es mi area de trabajo donde voy a creae mis objetos ya sean botones, cuadros de textos ,checkbox etc.

numero1<input type ="text" name ="uno"> 66


Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

numero2<input type ="text" name ="dos">

aqui escribimos el nombre dela pestaa y en input es para decirle al programa que tipo de entrada va hacer en este caso sera un cuadro de texto en ingles es textfile y en nombre sera el nombre de la variable que se encargara de recoger(almacenar) los valores dentro de estas variable .

<input type ="button" name="resultado" value="presionar">


Aqui vamos a crear un boton con la variable resultado y el nombre se llama presionar

<script for="resultado" event="onclick" language ="vbscript">


Para la variable resultado el evento que se realizara sera un clic y el lenguaje que utilizaremmos sera el vbscript

numero1=forma1.uno.value numero2=forma1.dos.value resultado=numero1*numero2

aqu los valores que insertemos en el cuadro de texto se guardaran en numero1 y numero2 y la multiplicacin de estas 2 variables se guardaran en resultado

document.write("TU RESULTADO ES :") Aqu le vamos a decir que nosmuestre este mensaje.

document.write(resultado) 67
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

Aqu le vamos a decir que nos muestre el resultado de la multiplicacion de los dos numeros.

Ejercicio 3 Realizar una calculadora en vbscript

68
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<html> <head>

<title>calculadora en vbscript</title> </head> <BODY>

<font color="green"><h4>calculadora en vbscript Pedro Lopez Salazar</h4></font>

69
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<form name = "forma1">

<!variables de entrada declarados> numero1<input type ="text" name ="uno"><br> numero2<input type ="text" name ="dos"><br>

<input type ="button" name="resultado1" value=" <input type ="button" name="resultado2" value=" <input type ="button" name="resultado3" value=" <input type ="button" name="resultado4" value="

* /

"> ">

+ "> - ">

<script for="resultado1" language ="vbscript" event="onclick" >

numero1=forma1.uno.value numero2=forma1.dos.value resultado1=numero1*numero2

document.write("=") document.write(resultado1) </script>

<script for="resultado2" language ="vbscript" event="onclick" >

numero1=forma1.uno.value

70
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

numero2=forma1.dos.value resultado2=numero1/numero2

document.write("=") document.write(resultado2) </script>

<script for="resultado3" language ="vbscript" event="onclick" >

numero1=cint(forma1.uno.value) numero2=cint(forma1.dos.value) resultado3= numero1+ numero2

document.write("=") document.write(resultado3) </script>

<script for="resultado4" language ="vbscript" event="onclick" >

numero1=forma1.uno.value numero2=forma1.dos.value resultado4=numero1-numero2

document.write("=") document.write(resultado4) </script>

71
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

</form> </BODY> </HTML>

Calculadora insertndole a una tabla y ponerle msica y una imagen de fondo

<html> <head><H4><TH><MARQUEE> CALCULADORA EN VBSCRIPT PROGRAMACIO WEB <BR> PEDRO LOPEZ SALAZAR</MARQUEE> <title>PRACTICA A ENTREGAR PEDRO LOPEZ SALZAR</title> </head> <body background="ntimage.GIF">

72
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<form name="forma1"> <table border ="15">

<TR> <TD BGCOLOR="GREEN">NUMERO 1: <TD BGCOLOR="GREEN"> <input type ="text" name ="uno"> </TR>

<TR> <TD BGCOLOR="GREEN">NUMERO 2: <td BGCOLOR="GREEN"> <input type ="text" name ="dos"> </TR>

<tr> <td BGCOLOR="#A2FF25"><center><input type ="button" name="resultado1" value=" MULTIPLICACION "> <td BGCOLOR="#A2FF25"><input type ="button" name="resultado2" value=" "></center></tr> DIVICION

<tr><td BGCOLOR="#A2FF25"><center><input type ="button" name="resultado3" value=" SUMA "> <td BGCOLOR="#A2FF25"><input type ="button" name="resultado4" value=" "></center> </tr> RESTA

73
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<TR> <br> <td colspan="2" BGCOLOR="#A2FF25" ><CENTER> <input type="button" name="calcular" value="CALCULAR CUENTA "></CENTER> </TR>

<BGSOUND SRC ="ETERNO AMOR DE DIOS.MP3" MOUSEOVER CONTROLS> </table> </form>

<script for="resultado1" language ="vbscript" event="onclick" >

numero1=forma1.uno.value numero2=forma1.dos.value resultado1=numero1*numero2

document.write("=") document.write(resultado1) </script>

<script for="resultado2" language ="vbscript" event="onclick" >

numero1=forma1.uno.value numero2=forma1.dos.value resultado2=numero1/numero2

74
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

document.write("=") document.write(resultado2) </script>

<script for="resultado3" language ="vbscript" event="onclick" >

numero1=cint(forma1.uno.value) numero2=cint(forma1.dos.value) resultado3= numero1+ numero2

document.write("=") document.write(resultado3) </script>

<script for="resultado4" language ="vbscript" event="onclick" >

numero1=forma1.uno.value numero2=forma1.dos.value resultado4=numero1-numero2

document.write("=") document.write(resultado4) </script> </form> </BODY>

75
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

</HTML>

76
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

ESTRUCTURA DE CONTROL
1) SELECTIVAS
SINTAXIS: 1) IF( CONDICION )THEN ----------------------------------

77
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

------SENTENCIAS-------------------------------------------END IF

2) IF( CONDICION )THEN ---------------------------------------SENTENCIAS-------------------------------------------ELSE IF ---------------------------------------SENTENCIAS-------------------------------------------END IF

2) IF( CONDICION )THEN ---------------------------------------SENTENCIAS-------------------------------------------END IF

78
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

IF( CONDICION )THEN ---------------------------------------SENTENCIAS-------------------------------------------END IF

EJERCICIO:

79
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

Codigo fuente :

80
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<HTML><HEAD><TITLE>PRACTICA A ENTREGAR PEDRO LOPEZ SALZAR</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252"><TH> <META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD> <BODY background="PRACTICA A ENTREGAR PEDRO LOPEZ SALZAR_archivos/ntimage.GIF"> <H4> <MARQUEE>DIAS TRABAJADOS EN PROGRAMACIO WEB <BR>PEDRO LOPEZ SALAZAR</MARQUEE><!--cuerpo del programa--> <P> <P> <P>LOS EMPLEADOS DE UNA FABRICA TRABAJAN 2 TURNOS DIURNO Y NOCTURNO<BR>SE DESEA CALCULAR EL JORNAL DIARIO DE ACUERDO CON LOS SIGUIENTES PUNTOS. <OL> <LI>LAS TARIFAS DE LAS HORAS DIURNAS ES DE $500 <LI>LAS TARIFAS DE LAS HORAS NOCTURNAS ES DE $800 <LI>CASO DE SER DOMINGO LA TARIFA SE INCREMENTA A $200 PARA EL TURNO DE LA NOCHE<BR>Y 300 PARA EL TURNO DE LA NOCHE. </LI></OL><BR> <P> <P> <FORM name=forma1> <TABLE border=15> <BODY>

<TR> <TD>NOMBRE <TD colSpan=2><INPUT name="nom"> </TD> 81


Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<TR>

<TR> <TD>HORAS <TD colSpan=2><INPUT name="varhour"> </TD> <TR> <TD>DIA TRABAJADO <TD colSpan=2><INPUT name="vardtt"> </TD> <TR> <TD>TURNO <TD colSpan=2><INPUT name="vartur"> </TD> <TR> <TD colSpan=3> <CENTER><INPUT type=button value=consultar name=calcular> </CENTER></TD><BGSOUND src="" CONTROLS MOUSEOVER></TR></TBODY></TABLE></FORM><!-esta es la etiqueta para agregar comentario en los script y html-><!-el lenguaje a utilizar es vbscript , al presionar el boton consultar que tiene como variable calcular se ejecutara tal evento-> <SCRIPT language=vbscript event=onclick for=calcular>

emp=forma1.nom.value jn=cint(forma1.varhour.value) <!--las horas las convierto a enteros con cint , las variable del texto se guardara en jn--> dt=forma1.vardtt.value tr=forma1.vartur.value 82
Pgina de 123

<!--el dia se se guardara en dt--> <!--el turno trabajado se se guardara en tr-->

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

if( dt<>"domingo" )then if(tr="dia")then jn=500*jn document.write("A pagar al Sr. "&emp&" la cantidad de $ "&jn)

else jn=800*jn document.write("A pagar al Sr. "&emp&" la cantidad de $ "&jn&" por haber venido atrabajar de noche") end if else

if(tr="dia")then jn=500+200*jn document.write("A pagar al Sr. "&emp&" la cantidad de $ "&jn) else jn=800+300*jn document.write("A pagar al Sr. "&emp&" la cantidad de $ "&jn&" por haber venido a realizar horas extras") end if end if

83
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

</SCRIPT> </P></H4></BODY></HTML>

Ejercicio:

84
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

Codigo fuente :

85
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<html> <head>

<title>MUESTRA EL MAXIMO Y MINIMO DE 3 NUMEROS EN VBSCRIPT (PEDRO LOPEZ SALAZAR)</title>

</head>

<body> <!--PSEUDOCODIGO--> <!--COMPARACIONES PARA SACAR EL MAYOR Y EL MENOR DE LOS 3 NUMEROS--> <!--A>B Y A>C MAYOR=A--> <!--A=B Y A=C MAYOR=A--> <!--A<B Y A<C MENOR=A-->

<!--B>A Y B>C MAYOR=B--> <!--B<A Y B<C MENOR=C-->

<!--C>A Y C>B MAYOR=C--> <!--C<A Y C<B MENOR-->

<H1> MUESTRA EL MAYOR Y EL MENOR DE 3 VALORES <form name="forma1">

<table border ="15"> <TR>

86
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<TD>VALOR1 <TD colspan ="2" > <input type ="text" name ="caja1"> </TR>

<TR> <TD>VALOR2 <td colspan ="2"> <input type ="text" name ="caja2"> </TR>

<TR> <TD>VALOR3 <TD colspan ="2"> <input type ="text" name ="caja3"> </TR>

<TR> <td COLSPAN ="3"><CENTER> <input type="button" name="calc" value="consultar"></CENTER> </TR>

<BGSOUND SRC ="UNIVER.MP3" MOUSEOVER CONTROLS> </table> </form> <script language="vbscript" for="calc" event="onclick"> a=cint(forma1.caja1.value) b=cint(forma1.caja2.value) c=cint(forma1.caja3.value)

87
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

IF( a>b ) AND ( a>c )THEN document.write("EL MAYOR ES : ") document.write( a ) END IF

IF(a=b) and (a=c)THEN document.write("EL MAYOR ES : "&a) document.write( "<br>") END IF

IF(a<b) AND (a<c)THEN document.write("<br>") document.write("EL MENOR ES: ") document.write(a) END IF

IF( b>a ) AND ( b>c)THEN document.write("EL MAYOR ES : ") document.write(b) END IF

IF(b<a) AND (b<c)THEN document.write("<br>") document.write("EL MENOR ES: ")

88
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

document.write(b) END IF

IF(c>a) AND (c>b)THEN document.write("EL MAYOR ES : ") document.write(c) END IF

IF(c<a) AND (c<b)THEN document.write("<br>") document.write("EL MENOR ES: ") document.write(c) END IF

</script> </table> </form> </body> </html>

89
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

CICLOS O BUCLES
90
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

EN VBSCRIPT
REPETICION: El for se utiliza cuando sabemos cuantas iteraciones tendremos en nuestro programa.

for Sintaxis:

for variable=1

to 10

-----------------------------------------------------------------------------------

Next
91
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

step 2

cuenta de 2 en 2

step3 cuenta de 3 en 3

Ejemplo: imprime mundo

10 veces la palabra Hola

<html> <head>

92
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<title>FOR IMPRIME 5 VECES LA PALABRA HOLA MUNDO </title> </head> <body> <form> <input type="button" name="calcular" value="CICLO FOR"> </form>

<script language="vbscript" for="calcular" event="onclick">

for n=1 to 6

document.write(""&n&".-hola mundo") document.write("<br>")

next

</script> </body> </html>

REPETICION:

*Se utiliza el while cuando no sabeos cuantas iteraciones Habr en nuestro ciclo. while Sintaxis:
93
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

while (condicion) ------------------------------------------------------wend

Ejemplo: imprime mundo

10 veces la palabra Hola

Codigo fuente:

<html> <head> <title>CICLO WHILE IMPRIME 20 VECES LA PALABRA HOLA MUNDO </title> </head> <body> <form>

94
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<input type="button" name="calcular" value="CICLO WHILE"> </form>

<script language="vbscript" for="calcular" event="onclick">

letrero=1 while(letrero<=10) document.write(""&letrero&".-hola mundo") document.write("<br>")

letrero= letrero+1 wend

</script> </body> </html>

95
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

FACTORIAL DE N NMEROS

96
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<html> <head><H4><TH><MARQUEE> PROGRAMACIO WEB <BR> PEDRO LOPEZ SALAZAR</MARQUEE> <TITLE> FACTORIAL DE UN NUMERO CON CICLO FOR1 (PEDRO LOPEZ SALAZAR)</TITLE> </head> <body>

97
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<form name="forma1"> <table border ="15"> <TR> <TD BGCOLOR="#A2FF25">FACTORIAL: <TD BGCOLOR="#A2FF25"><input type ="text" name ="num"> </TR>

<TR> <br> <td colspan="2" BGCOLOR="#A2FF25" ><CENTER> <input type="button" name="calc" value="consultar"></CENTER> </TR> </table> </form>

<script language="vbscript" for="calc" event="onclick">

PEDRO1=forma1.num.value

factorial_cero=1 document.write("FACTORIAL [0] = "&factorial_cero) document.write("<br>")

98
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

factorial=1 for contador=1 to PEDRO1 factorial= factorial*contador

document.write("FACTORIAL ["&contador&"] = "&factorial) document.write("<br>") next

</script> </form> </BODY> </HTML>

EJERCICIO: NUMERO PERFECTO

99
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

Numeros perfectos: 6 , 28 ,496

Regla: *Si el residuo de la divisin es igual a cero se suma de lo contrario no. * no se puede dividir el mismo numero por si mismo. *la suma de sus divisores deben de ser igual al numero a buscar siempre y cuando sus residuos sean igual a cero.

*captura un numero: 6

1/6 residuo =0 100


Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

2/6 residuo=0 3/6 residuo =0 4/6 residuo=1.5 5/6 residuo =1.2 6/6 no se puede dividir por si mismo

<html> <head><H3><TH><MARQUEE>--------------------------------------NUMEROS PERFECTOS DESPLEGABLES-----------------------------------------------------------NUMEROS PERFECTOS DESPLEGABLES-------------------------------------NUMEROS PERFECTOS DESPLEGABLES-------------------------------</MARQUEE><P> <FONT COLOR="BLUE"> PEDRO LOPEZ SALAZAR</FONT> <title>NUMEROS PERFECTOS PEDRO LOPEZ SALZAR</title> </head> <body>

<form name="forma1"> <table border ="15"> <TR> 101


Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<TD BGCOLOR="#A2FF25">NUMERO: <TD> <input type="text" name="pedro" >

</TR>

<TR> <br> <td colspan="2" BGCOLOR="#A2FF25" ><input type="button" name="calc" value=" CONSULTAR "> </TR>

</table> </form>

<script language="vbscript" for="calc" event="onclick"> TOPE=cint(forma1.pedro.value)

NUMERO=1

while(NUMERO<TOPE) acumulador=0 i=1

102
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

while(i<numero) IF(NUMERO mod i=0 )THEN acumulador=acumulador+i END IF i=i+1 WEND

IF(acumulador=NUMERO)THEN document.write(" El NUMERO : "&NUMERO&" ---------------ES PERFECTO") document.write("<br>") ELSE document.write(" el numero : "&NUMERO&" -------------------no es perfecto") document.write("<br>") END IF

NUMERO=NUMERO+1

WEND

</script> 103
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

</BODY> </HTML>

TABLAS DE MULTIPLICAR1

<html> <head> <title>TABLA SERIE</title> </head> <body>

<form name="forma1">

104
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

TABLA DE MULTIPLICACION <input type="button"name="calcular" value="resolver"><br> </form> <script language="vbscript" for= "calcular" event="onclick">

for fila=1 to 10 for columna=1 to 10 document.write(" "&fila * columna ) next document.write("<BR>") next

</script> </body> </html>

105
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

TABLAS DE MULTIPLICAR 2

<html> <head> <H3><TH><MARQUEE>--------------SERIE DE UNA MULTIPLICACION CON TABLA---------------------</MARQUEE> UNIVERSIDAD:INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN<BR> CARRERA MATERIA </FONT> <title>TABLA DE MULTIPLICAR</title> :ING EN SISTEMAS<BR> : PROGRAMACION WEB<BR>

106
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

</head> <body> <form name="forma1"> <table border ="50"> <TR> <TH BGCOLOR="#A2FF25">NUMERO: </TR>

<TR> <br> <td colspan="2" BGCOLOR="#A2FF25" ><input type="button" name="calcular" value=" CREAR TABLA "> </TR> </table> </form>

<script language="vbscript" for= "calcular" event="onclick"> document.write("<TABLE BORDER=5>") for fila=1 to 10 document.write("<TR>")

for columna=1 to 10 document.write("<TH>") document.write(" "&fila * columna ) next document.write("<BR>") document.write("</TR>")

107
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

next document.write("</TABLE>") </script> </body> </html>

Crear una tabla de multiplicar

108
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<html> <head><H3><TH><MARQUEE>-------------------------------------TABLA DE MULTIPLICAR----------------------------TABLA DE MULTIPLICAR-------------------------------TABLA DE MULTIPLICAR--------------------------------------TABLA DE MULTIPLICAR-------------------------------</MARQUEE><P> <FONT COLOR="BLUE"> ALUMNO :PEDRO LOPEZ SALAZAR<BR>

UNIVERSIDAD:INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN<BR> CARRERA MATERIA </FONT> <title>TABLA DE MULTIPLICAR CON TABLA EN VBSCRIPT</title> </head> :ING EN SISTEMAS<BR> : PROGRAMACION WEB<BR>

<body> <form name="forma1"> <table border ="50"> <TR> <TD BGCOLOR="#A2FF25">NUMERO: <TD> <input type="text" name="num" > </TR>

109
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<TR> <br> <td colspan="2" BGCOLOR="#A2FF25" ><input type="button" name="calcular" value=" CREAR TABLA "> </TR> </table> </form>

<script language="vbscript" for= "calcular" event="onclick"> NUMER=cint(forma1.num.value)

document.write("<BACKGROUND=GREEN>") document.write("<MARQUEE>") document.write("<FONT COLOR=BLUE>") document.write("---------PEDRO LOPEZ SALAZAR---------INGENIERIA EN SISTEMAS COMPUTACIONALES----------PROGRAMACION WEB--------------VBSCRIPT-----------------") document.write("</MARQUEE>") document.write("<br>") document.write("<table border=30>")

for F=1 to 10 document.write("<tr>") resultado=NUMER*F

110
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

document.write("<TD> "& NUMER & " x " & F & " <TD> " + " = " & resultado) document.write("<BR>") document.write("</tr>") next

document.write("</table>")

</script> </body> </html>

111
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<html> <head> <title>TABLAS</title> </head> <body>

<FONT COLOR=BLUE> ALUMNO :PEDRO LOPEZ SALAZAR<BR>

UNIVERSIDAD:INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN<BR> CARRERA MATERIA </FONT> :ING EN SISTEMAS<BR> : PROGRAMACION WEB<BR>

<form name="tablas"> TABLA<input type="text"name="num"><BR> <input type="button"name="calcular"value=" RESOLVER "><br>

112
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

</form>

<script language="vbscript" for= "calcular" event="onclick"> NUMER=cint(tablas.num.value)

for F=1 to 10 resultado=NUMER*F document.write(NUMER & "x" & F & "=" & resultado & "<br>") next

</script> </body> </html>

Examen de programacin Web

113
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<html> <head> <title>BEBIDAS (PEDRO LOPEZ SALAZAR)</title> </head> <body BACKGROUND=BOMBON3.JPG>

<center> <form name="forma1">

114
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<table border ="5"> <tr>

<TD> <FONT COLOR=YELLOW> VINO1</FONT> <TD colspan ="2"><input type ="text" name ="caja1"> <TD><FONT COLOR=YELLOW> AO<input type ="text" name ="anio1"></FONT> </TR>

<TR> <TD><FONT COLOR=YELLOW> VINO2</FONT> <td colspan ="2"> <input type ="text" name ="caja2"> <TD ><FONT COLOR=YELLOW> AO<input type ="text" name ="anio2"></FONT> </TR>

<tr> <TD><FONT COLOR=YELLOW> VINO3</FONT> <TD colspan ="2" > <input type ="text" name ="caja3"> <TD ><FONT COLOR=YELLOW> AO<input type ="text" name ="anio3"></FONT> </TR>

<TR> <TD><FONT COLOR=YELLOW> VINO4</FONT> <td colspan ="2"> <input type ="text" name ="caja4"> <TD ><FONT COLOR=YELLOW> AO<input type ="text" name ="anio4"></FONT>

115
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

</TR>

<TR> <TD><FONT COLOR=YELLOW> VINO5</FONT> <td colspan ="2"> <input type ="text" name ="caja5"> <TD ><FONT COLOR=YELLOW> AO<input type ="text" name ="anio5"></FONT> </TR>

<TR> <td COLSPAN ="4"><CENTER> <input type="button" name="calc" value=" PEDRO LOPEZ "></CENTER> </TR> CONAULTAR A

<BGSOUND SRC ="UNIVER.MP3" MOUSEOVER CONTROLS> </table> </form> </center> <marquee><FONT COLOR=YELLOW>-----------------------PEDRO LOPEZ SALAZAR--------------INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN ----------PROGRAMACION WEB WN VBSCRIPT---------ING EN SISTEMAS----------------------------</FONT></marquee>

<script language="vbscript" for="calc" event="onclick"> a1=cint(forma1.caja1.value) a2=cint(forma1.anio1.value)

116
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

b1=cint(forma1.caja2.value) b2=cint(forma1.anio2.value)

c1=cint(forma1.caja3.value) c2=cint(forma1.anio3.value)

d1=cint(forma1.caja4.value) d2=cint(forma1.anio4.value)

e1=cint(forma1.caja5.value) e2=cint(forma1.anio5.value)

ax1=a1 / a2 ax2=b1 / b2 ax3=c1 / c2 ax4=d1 / d2 ax5=e1 / e2

document.write("TOTAL DE VINO1 EN "&ax1&" litros")

117
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

document.write("<br>") document.write("<br>")

document.write("TOTAL DE VINO2 EN "&ax2&" litros") document.write("<br>") document.write("<br>")

document.write("TOTAL DE VINO3 EN "&ax3&" litros") document.write("<br>") document.write("<br>")

document.write("TOTAL DE VINO4 EN "&ax4&" litros") document.write("<br>") document.write("<br>")

document.write("TOTAL DE VINO5 EN "&ax5&" litros") document.write("<br>") document.write("<br>")

</script> </table> </form> </body> </html>

118
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

Suma de nmeros de pares sacar el promedio de nmeros impares

119
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<html> <head> <H3><FONT COLOR="#A2FF25">PROGRAMA :suma los numeros pares y sacar el promedio de los numeros <CENTER>impares con ciclo while</FONT></CENTER></H3>

<TITLE> PERO LOPES SALAZAR</TITLE> </head> <body BACKGROUND=3067.JPG>

120
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

<form name="forma1"> <table border ="15"> <TR> <TD BGCOLOR="#A2FF25">NUMERO:

<TD> <input type="text" name="num" > </TR>

<TR> <br> <td colspan="2" BGCOLOR="#A2FF25" ><input type="button" name="calc" value=" CONSULTAR "> </TR>

</table> </form>

<script language="vbscript" for="calc" event="onclick"> TOPE=cint(forma1.num.value) document.write("<br>")

sumaimpar=0 impares=0 sumapares=0

121
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

num=1 while(num<=TOPE)

if (num mod 2=0)then sumapares=sumapares+num

document.write("<FONT COLOR=BLUE>") document.write("El NUMERO [ "&num&" ] = PAR") document.write("</FONT>") document.write("<br>")

else

sumaimpar=sumaimpar+num impares=impares+1

document.write("<FONT COLOR=RED>") document.write("El NUMERO [ "&num&" ] = IMPAR") document.write("</FONT>") document.write("<br>")

end if num=num+1 wend promimpares=sumaimpar/impares document.write("<br>")

122
Pgina de 123

DISEO EN HTML Y PROGRAMACION EN VBSCRIPT

PEDRO LOPEZ SALAZAR

INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN

document.write("<br>") document.write("<br>") document.write("<marquee>") document.write("ALUMNO:PEDRO LOPEZ SALAZAR-------------------------ING EN SISTEMAS COMPUTACIONALES------------------MATERIA:PROGRAMACIO WEB--------------INSTITUTO TECNOLOGICO SUPERIOR DE ZAPOPAN------------------") document.write("</marquee>") document.write("SUMA DE LOS NUMEROS PARES ES : ="&sumapares)

document.write("<br>") document.write("PROMEDIO DE LOS NUMEROS IMPARES : ="&promimpares) document.write("<br>") </script> </BODY> </HTML>

123
Pgina de 123

S-ar putea să vă placă și