unidad tres

INTRODUCCIÓN AL DESARROLLO DE SITIOS WEB

VBScript y JavaScript

T E M A S

1. Conceptos básicos.

2. Datos y variables.

3. Entrada y salida de datos.

4. Condicionales.

5. Ciclos repetitivos.

6. Funciones y procedimientos.

Logros de Competencia

1. Crea páginas Web funcionales y dinámicas involucrando en ellas programación con VBScript y Java Script.

2. Desarrolla el proyecto final.

Indicador de logro

Desarrolla páginas web que permiten la

interacción con los usuarios o visitantes, obteniendo estos, alguna respuesta a las acciones generadas sobre dichas páginas.

Aplica los requerimientos mínimos de diseño y operatividad en la página, cumpliendo con

Evidencia de

Producto

Desempeño

Unidad Tres 3


El Formador Dice y Hace:

1) Conceptos Básicos:

Los lenguajes de script son versiones recortadas de otros lenguajes. Estas

versiones se usan para insertar en páginas web. Un código escrito en un

lenguaje de script se incorpora directamente dentro de un código HTML y se

ejecuta interpretado, no compilado. Para insertar un código script en una

página HTML se introduce el script entre las etiquetas <SCRIPT> y

</SCRIPT>. Dos son los lenguajes de script que hay en la actualidad: el

VBScript (derivado de Visual Basic) y el JavaScript (derivado de Java). En el

módulo nos ocuparemos del primero de ellos, siendo el segundo material de

consulta para los estudiantes, ocupándose de la equivalencia en JavaScript de

lo aprendido en VBScript. Para insertar código VBScript en una página HTML

colocaremos la etiqueta <SCRIPT> y dentro de ella el parámetro

LANGUAGE="VBScript", que determina cual de los lenguajes de script

utilizamos; por ejemplo el trabajo del estudiante será averiguar la etiqueta

equivalente en JavaScript. En este caso le ahorramos trabajo al estudiante y

colaboramos con la equivalencia la cual es <script language=”JavaScript”>.

Los lenguajes de script se ejecutan interpretados, no compilados. Esto significa

que un código escrito en un lenguaje de script no sufre ninguna transformación

previa a su ejecución. Cada línea de código es traducida a lenguaje máquina

justo antes de su ejecución. Después es ejecutada y la traducción no se

conserva en ningún sistema de almacenamiento. Si es necesaria otra

lo exigido por las normas técnicas establecidas.


ejecución, el intérprete vuelve a realizar el proceso. Este sistema tiene sus

ventajas y desventajas. A continuación los enumeramos:

Sistema Interpretado

Ventajas Desventajas

El código es cómodo para depurar, ya que no es necesario volver a compilar tras un cambio.

No es necesario disponer de un compilador, ya que el intérprete (que forma parte del navegador) ejecuta el script.

El mantenimiento es fácil y rápido, por parte de cualquier programador.

La ejecución es lenta, al ser necesaria la interpretación línea a línea cada vez.

El código es visible y puede ser objeto de plagio por parte de otras personas.

El usuario tiene acceso al código y puede modificarlo, dañando su operación..

Miremos un primer ejemplo para iniciar:

Código Resultado

<HTML>

<HEAD>

<TITLE>Primer Ejemplo VBScript</TITLE>

<SCRIPT LANGUAGE = "VBScript">

MSGBOX ("Hola Familia INCAP")

</SCRIPT>

</HEAD>

<BODY>

<font face=”arial Black” size=6>

Nuestro primer ejemplo

</BODY>

</HTML>

Observemos algunas características de VBScript que se pueden evidenciar en el

ejemplo anterior:

a) Cada línea de programación es independiente y es separada estrictamente

por un enter o salto de línea.

b) El VBScript no es sensible a las mayúsculas y minúsculas; esto quiere decir

que si hubiéramos escrito msgbox el resultado habría sido el mismo.

c) En el caso de MSGBOX, esta herramienta puede un mensaje de manera

literal encerrado entre comillas o el contenido de una variable la cual no

debe llevar comillas.

Miremos como se manejan los comentarios en VBScript:


Código <HTML>

<HEAD><TITLE>Comentarios y sensibilidad</TITLE>


variable = 1 ' Esto es un comentario.

VARIABLE = 2

MSGBOX (variable) REM Esta es otra forma de comentario.

MSGBOX (VARIABLE) ' Aunque este formato es más cómodo para utilizar.

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML> Resultado

En el ejemplo podemos ver dos formas de manejar los comentarios; una iniciando

el comentario con una comilla simple (‘), que es la más usada y la otra iniciando el

comentario con REM. Adicionalmente, vemos una vez más que el lenguaje no es

sensible a las MAYÚSCULAS y minúsculas ya que al momento de ejecutar o

abrir la página se mostrara un cuadro de mensaje con el valor 2 que será el que

tome la variable al final del proceso.

Ahora, veremos el uso de la concatenación en VBScript:

Código <HTML>

<HEAD><TITLE>Muestra de argumento compuesto</TITLE>


variable = "Compañeros Incap"

MSGBOX ("Hola, " + variable) ' Ejemplo de concatenación.

</SCRIPT>

</HEAD>

<BODY>

</BODY>


</HTML>

Resultado

En este ejemplo hemos concatenado una cadena alfanumérica o alfabética con

una variable cuyo contenido es del mismo tipo, y hemos usado para ello el signo

+ de la suma, elemento que ya el estudiante en semestres anteriores utilizo para

el mismo fin. Si queremos concatenar una cadena alfanumérica con una variable

cuyo contenido es un valor numérico emplearemos el signo & (Ampersand), de la

siguiente manera:

Código <HTML>

<HEAD><TITLE>Muestra de argumento compuesto</TITLE>


variable = 1

MSGBOX ("Este semestre serás el Nº " & variable) ' Ejemplo de concatenación.

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML> Resultado


2) Datos y Variables:

Al contrario que en otros lenguajes de programación, en VBScript solo existe

un tipo general de datos que se conoce con el nombre de Variant. En otros

lenguajes existen datos de tipo String (Cadena) para almacenar contenidos

alfanuméricos, distintos tipos de datos numéricos enteros y en coma flotante,

datos booleanos, etc. Esta característica es muy útil, ya que permite reasignar

un valor de un tipo a una variable de otro tipo. Se debe aclarar que aun

teniendo en cuanta lo anterior el lenguaje maneja algunos subtipos de datos

que se pueden utilizar según el caso. A continuación, listamos dichos subtipos:

String Datos de tipo cadena (también llamado alfanuméricos).

Byte Números enteros del 0 al 255.

Integer Números enteros del -32.768 al 32.767.

Long Números enteros del -2.147.483.648 al 2.147.483.647.

Single Números en coma flotante de simple precisión.

Double Números en coma flotante de doble precisión.

Currency Números en coma flotante del -

922.337.203.685.477,5808 al 922.337.203.685.477,5808.

Boolean Datos lógicos verdadero o falso (true o false).

Null Un dato Variant sin definir contenido de ningún subtipo.

Date Un valor de Fecha / Hora.

Object Contiene la representación de un objeto.

Error Identifica los errores mediante un número.

Las variables en VBScript manejan las mismas características, propiedades y

exigencias que en otros lenguajes, así que no profundizaremos en este

aspecto ya que el estudiante debe tener un manejo adecuado del mismo.

Lo que si debemos tener en cuenta es que se recomienda (aunque no es

camisa de fuerza) declarar e inicializar las variables de la siguiente manera:

Dim NombreVariable

NombreVariable=” “

O

NombreVariable=0


En el ejemplo anterior observamos la declaración tradicional de variables en

Visual Basic con la instrucción Dim y luego se inicializa con un espacio en

blanco que determina una variable de tipo alfabético o la misma variable

inicializada con un cero determinando que es una variable numérica.

El Formador Dice y el estudiante Hace:

Actividades para realizar en clase:

1. Teniendo en cuenta los temas vistos en las páginas anteriores referentes a

VBScript el estudiante con la asesoría de su formador, contestara el siguiente

cuestionario:

a. En JavaScript como se separa cada línea de programación?

b. Es JavaScript un lenguaje case Sensitive? Explique su respuesta.

c. Como se muestra un cuadro de mensaje en JavaScript?

d. Como se manejan los comentarios y la concatenación en

JavaScript?

e. Que tipos de datos existen y como se definen e inicializan variables

en JavaScript.

El Estudiante Dice y Hace:

Ejercicios para hacer en casa:

1. El estudiante dependiendo de lo consultado en las actividades para realizar en

clase, de manera autónoma y personal programara en JavaScript cada uno de

los ejemplos que se realizaron para explicar los temas hasta ahora vistos en la

unidad tres.



3) Entrada y salida de datos:

Uno de los aspectos más importantes de un lenguaje de programación es la

interacción que se debe realizar con el usuario. Esta comunicación se

establece en dos direcciones fundamentales: la salida de datos por pantalla y

el ingreso de datos por teclado.

Miremos entonces el primer aspecto mencionado:

Salida por pantalla: Hemos visto hasta ahora una manera de obtener en

pantalla algunos resultados. La instrucción MSGBOX () Nos permite sacar una

cadena alfanumérica, el contenido de una variable o combinaciones de ambas

en un cuadro con el aspecto típico de Windows. Supongamos que lo que

queremos ahora es mostrar un texto en la pantalla, sin necesidad de ningún

botón, ni cuadro, ni detención de la ejecución, y lo más importante que no

desaparezca como ocurre con el cuadro de texto cuando se da clic en el botón

aceptar. Debemos saber que VBScript es un lenguaje orientado a objetos. Y el

documento activo (programa en ejecución) es un objeto llamado, document.

Este objeto tiene un método de escritura, llamado write(),

Observemos un ejemplo del método write():

Código <HTML>

<HEAD><TITLE>Prueba de document.write </TITLE>


DOCUMENT.WRITE ("Hola Compañeros INCAP")

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

Resultado


Entrada de datos por teclado: Una de las formas más atractivas de introducir datos

simples por teclado es la instrucción INPUTBOX () ya conocida por el estudiante

en VB.Net y con las mismas propiedades y funcionalidad.

Veamos a ver la sintaxis de INPUTBOX ():

INPUTBOX (Pregunta, Título, Respuesta, pos x, pos y)

Esta instrucción recibe varios parámetros que a continuación describiremos:

Esta instrucción puede recibir varios parámetros separados por comas. Los

cuales son:

Pregunta. Es la pregunta que se le formula al usuario y a la que deberá

responder.

Título. Es un literal que aparecerá en la barra de título.

Respuesta. Es la respuesta por defecto que queremos ofrecerle al usuario

(opcional).

Pos x - pos y. Son las coordenadas donde queremos que se sitúe la

esquina superior izquierda del cuadro de diálogo. Estas coordenadas se

expresan en twips, medida propia de Windows (opcional). Probemos la funcionalidad de dicha instrucción con un ejemplo:


Código <HTML>

<HEAD><TITLE>Prueba de INPUTBOX()</TITLE>


resp = INPUTBOX ("¿Que programa técnico estudia?")

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML> Resultado

En el ejemplo observamos que la respuesta que digite el usuario será guardada

dentro de la variable resp siempre y cuando este de clic en el botón aceptar; si

da clic en el botón cancelar en la variable se guardara el valor Null.

4) Condicionales:

Una condicional determina una acción o proceso a seguir dependiendo de un

resultado. Dentro de las condicionales encontramos las siguientes:

Sentencia If…..Then…..Else: esta es la estructura básica condicional que

significaría algo como Si…..Entonces……Si no. Miremos un ejemplo para

comprender mejor su funcionamiento, aunque el estudiante debe dominar el

concepto y la aplicabilidad de los conceptos que se están viendo.

Código <HTML>

<HEAD><TITLE>Prueba básica de condicional</TITLE>

</HEAD>

<BODY>


edad = INPUTBOX ("¿Su Nota definitiva es mayor a 3,5 ?",,"Si")

IF (edad = "Si") THEN

MSGBOX ("Usted aprobó el semestre")

else


MSGBOX ("Usted no aprobó el semestre")

END IF

</SCRIPT>

</BODY>

</HTML> Resultado

El usuario al abrir la pagina vera por pantalla un cuadro de dialogo que pregunta

sobre su nota definitiva; si da clic en aceptar la respuesta será un cuadro de

dialogo que afirma que se aprobó el semestre, de lo contrario, si digita una

respuesta negativa u otra diferente al “Si” que esta por defecto, el cuadro de

dialogo que aparece a continuación dirá que no aprobó el semestre. Este es un

ejemplo clásico en donde hay dos posibles opciones que responder a la pregunta

o interrogante (si no es blanco es negro), pero existen condicionales más

complejas.



1. Teniendo en cuenta los temas vistos de entrada y salida de datos y

condicionales, el estudiante realizara las siguientes consultas:

a. Como se manejan las condicionales anidadas en VBScript y dar un

ejemplo que explique dicha sentencia.

b. Como es la estructura del Select Case en VBScript y dar un ejemplo

que explique dicha estructura.


c. En JavaScript como se manejan las sentencias de entrada y salida

de datos y los condicionales?



1. El estudiante utilizando el JavaScript trasladara a este lenguaje los ejemplos

utilizados para explicar los temas de entrada y salida de datos y los

condicionales, incluyendo los ejemplos que utilice en las actividades para

realizar en clase.


5) Ciclos repetitivos o Bucles:

Todos los lenguajes de programación plantea, en ocasiones, la necesidad de

realizar una operación más de una vez. Esa operación puede realizarse un

número determinado o indeterminado de veces. En VBScript tenemos varias

estructuras que nos lo permiten. Vamos a conocerlas y al final el estudiante

según sus necesidades y habilidades determinara cual utilizar dentro de un

programa.

Ciclo repetitivo For…Next: Esta estructura se emplea cuando es necesario

repetir un grupo de sentencias un número determinado de veces. Este ciclo

emplea para ello una variable contador que controla las veces que se ha

repetido el ciclo. La variable que actúa como contador parte de un

valor_inicial. Cada vez que se realiza el conjunto de sentencias incluido en

el ciclo la variable contador se incrementa en una unidad. Como ya sabemos

el incremento puede ser diferente de la unidad y para ello se incluye el

parámetro STEP seguido del índice de incremento que deseemos. Cuando el


contador alcanza el valor_final se deja de ejecutar el ciclo y se pasa a la

siguiente instrucción que continua al Next. Miremos su sintaxis:

FOR contador = valor_inicial TO valor_final STEP incremento

BLOQUE DE SENTENCIAS

NEXT

Veamos ahora un ejemplo:

Código

<HTML>

<HEAD><TITLE>Prueba de bucle FOR...NEXT</TITLE>


OPTION EXPLICIT

DIM contador

FOR contador = 0 TO 5

DOCUMENT.WRITE (contador & "<BR>")

NEXT

DOCUMENT.WRITE ("Se acabó la cuenta")

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML> Resultado


Ciclo repetitivo Do….While….Loop: Este tipo de ciclo se emplea para

efectuar un proceso o conjunto de procesos un número indeterminado de

veces mientras se cumpla una condición. Su sintaxis general es la siguiente:

DO WHILE (condición)

BLOQUE DE INSTRUCCIONES

LOOP

Miremos un ejemplo básico:

Código <HTML>

<HEAD><TITLE>Prueba de DO WHILE ... LOOP</TITLE>


OPTION EXPLICIT

DIM clave,i

clave = ""

i=0

DO WHILE (clave <> "no")

' Ejecuta mientras la clave no es igual a <> si

i=i+1

clave = INPUTBOX ("Desea seguir generando números?")

DOCUMENT.WRITE (i & "<br>")

LOOP

MSGBOX ("Fin del proceso")

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML> Resultado


El estudiante observara de manera práctica el ejercicio y analizara su resultado.



1. Con la asesoría del formador y como complementación se su conocimiento el

estudiante realizar la siguiente actividad en el aula de clase:

a. Cuál es la diferencia entre el ciclo Do/While y el ciclo Do/Until?

Explicar mediante un ejemplo.

b. En JavaScript como se manejan los ciclos For/Next, Do/While y

Do/Until? Explicar mediante ejemplos.

c. Como se rompe o interrumpe un ciclo repetitivo? Explicar con un

ejemplo.



1. El estudiante utilizando JavaScript trasladara a este lenguaje los ejemplos

utilizados para explicar cada uno de los ciclos repetitivos vistos.

2. Como se interrumpe un ciclo repetitivo en JavaScript? Explicar con un

ejemplo.



6) Funciones y procedimientos:

Hasta ahora hemos realizados ejemplos básicos En VBScript pero aun

podemos sacarle mayor provecho a este lenguaje teniendo en cuenta que en

dicho lenguaje existen tres formas básicas de ejecución. La primera de ellas

se conoce con el nombre de ejecución inmediata. Es un código VBScript

insertado dentro de un código HTML y que se ejecuta allí donde está

insertado. Es la forma como se ejecutan todos los ejemplos que hemos visto

hasta ahora. Hay otras dos formas de ejecución en las que el código se carga

en memoria en segundo plano, sin ejecutarse hasta que es invocado en algún

punto determinado de la página de la página. Estas dos formas de ejecución

se conocen con el nombre de funciones y procedimientos. Vamos a ver

como se utilizan estas dos potentes herramientas.

Funciones: Una función es un grupo de instrucciones que recibe un conjunto

de parámetros (valores que se le pasan para su ejecución) y devuelve un

resultado. Como sabemos, el código de la función se incluye entre las

palabras clave FUNCTION y END FUNCTION. Todo lo que haya entre estas

dos líneas será considerado como parte de la función a la cual se le asigna un

nombre, el cual será invocado al momento de ser necesario.

Veamos un ejemplo básico:

Código

<HTML>

<HEAD><TITLE>Ejemplo del uso de funciones</TITLE>


' En la siguiente línea empieza la función.

FUNCTION sumar (sumando_1, sumando_2)


sumar = (CLNG(sumando_1) + CLNG(sumando_2))

END FUNCTION

</SCRIPT>

</HEAD>

<BODY>


OPTION EXPLICIT

' A continuación se definen las tres variables que se usarán.

' La variable resultado almacenará el resultado que devuelva la función.

' Las variables sum1 y sum2 almacenan los valores que se pasarán

' como parámetros a la función.

DIM sum1

DIM sum2

DIM resultado

sum1 = 0

sum2 = 0

resultado = 0

' El siguiente bloque pide por teclado el primer sumando, comprobando que

' se trate de un numero positivo.

DO UNTIL (sum1 > 0)

sum1 = INPUTBOX ("Introduzca el primer valor:")

LOOP

' El siguiente bloque pide por teclado el segundo sumando, comprobando que

' sea también un número positivo.

DO UNTIL (sum2 > 0)

sum2 = INPUTBOX ("Introduzca el segundo valor:")

LOOP

resultado = sumar (sum1, sum2)

MSGBOX ("El resultado es " & resultado)

</SCRIPT>

</BODY>

</HTML>

Resultado


Procedimientos: Un procedimiento se parece en su objetivo y uso a una

función, con la diferencia fundamental de que no devuelve ningún valor. En

primer lugar los procedimientos se incluyen entre las palabras clave SUB y

END SUB. Para invocar al procedimiento, simplemente digitamos su nombre en

una línea de comando, como si fuera una instrucción. Veamos un ejemplo:

Código

<HTML>

<HEAD><TITLE>Ejemplo del uso de procedimientos</TITLE>


SUB Proc()

dim a,b,c

a=0

b=0

c=0

a=inputbox("Digite el primer número")

b=inputbox("Digite el segundo numero")

c=clng(a)+clng(b)

MSGBOX ("El resultado es:" & c)

END SUB

</SCRIPT>

</HEAD>

<BODY>


Proc

</SCRIPT>

</BODY>

</HTML>

Resultado




1. El estudiante copiara el siguiente código en un archivo del bloc de notas y

luego lo guardara con el nombre de LiquidaciónProd.html en la carpeta que se

creó para tal fin; luego se ejecutara la pagina resultante y observara el

resultado.

Código

<HTML>

<HEAD><TITLE>Formulario Basico</TITLE></HEAD>

<Script language="vbscript">

sub seleccionar()

prod=FormBasico.producto.value

select case prod

case "P1"

nombre="Camisas"

valor=10500

case "P2"

nombre="Pantalones"

valor=20500


case "P3"

nombre="Camisetas"

valor=11700

case "P4"

nombre="Pantalonetas"

valor=8500

end select

FormBasico.Nombre.value=nombre

FormBasico.Precio.value=valor

end sub

sub liquidar()

precio=FormBasico.Precio.value

can=FormBasico.Unidades.value

if FormBasico.iva.checked=true then

total=precio*can

neto=total*1.16

else

total=precio*can

neto=total

end if

FormBasico.total.value=neto

end sub

</Script>

<body BGCOLOR="#CCFFFF" TEXT="#000000">

<FORM NAME="FormBasico">

<TABLE Border="2" width=40.3% align=center>

<TH BGCOLOR="#0000aa"><FONT COLOR="#ffffff">LIQUIDACIÓN DE

PRODUCTOS</FONT></TH>

</TABLE align=center>

<TABLE BORDER="2" align=center>

<TH colspan=2>FORMULARIO PRINCIPAL</TH>

<TR>

<TD>PRODUCTO:</TD>

<TD><select NAME="Producto" ONCHANGE=seleccionar>

<Option Value="">[Seleccione]</Option>

<Option Value="P1">P1</Option>





</select>

</TD>

</TR>

<TR>

<TD>NOMBRE:</TD><TD><INPUT Type="text"NAME="Nombre"></TD>

</TR>

<TR>

<TD>PRECIO:</TD><TD><INPUT Type="text"NAME="Precio" size=15 maxlength=10></TD>

</TR>

<TR>

<TD>CANTIDAD:</TD>

<TD><select NAME="Unidades">

<Option Value="">[Seleccione]</Option>

<Option Value="1">1</Option>




</select>

</TD>

</TR>

<TR>

<TD>LIQUIDAR IVA:</TD>

<TD><INPUT Type="CHECKBOX"NAME="iva" CHECKED></TD>

</TR>

<TR>

<TD>TOTAL:</TD><TD><INPUT Type="text"NAME="total"></TD>

</TR>

<TR>

<TD align=center><INPUT Type="BUTTON" NAME="bliquidar" value="Liquidar Precio"

ONclick=liquidar>

<TD align=center><INPUT Type="reset"value="Borrar Registro"></TD>

</TD>

</TR>

</body>

</HTML>

2. El estudiante con la asesoría del formador resolverá el siguiente cuestionario,

a. Como se declaran funciones y procedimientos en JavaScript? Dar un

ejemplo de cada uno de los casos.




1. El estudiante utilizando JavaScript trasladara a este lenguaje los ejemplos

utilizados para explicar la aplicación de funciones y procedimientos.

2. El estudiante trasladara a JavaScript el ejercicio del numeral uno de las

actividades para realizar en clase.


LÍNEA GENERAL DEL PROYECTO

1. Se diseñara y creara un sitios Web, involucrando todo lo aprendido en

las unidades vistas, teniendo en cuenta los siguientes parámetros:

El proyecto se desarrollara utilizando código HTML, VBScript o

JavaScript involucrando comandos básicos, tablas, formularios y

Scripts que permitan la interacción entre el usuario y el sitio creado.

El estudiante solicitara el apoyo y asesoría a su formador en los

aspectos pertinentes al diseño y desarrollo del sitio Web (se

recomienda que el sitio tenga un enfoque comercial, esta

recomendación es opcional).

El sitio no debe tener menos de cuatro páginas Web.

El proyecto será publicado en un hosting gratuito.


Bibliografía

FERRER, Jorge. GARCIA, Víctor. GARCIA, Rodrigo Curso completo de

HTML

UNIVERSIDAD DE MURCIA. Manual básico de creación de páginas web

ANIBARRO ZELAYA, Carlos Eduardo. Manual básico de HTML , 2001

DIAZ TOLEDANO, Moisés Daniel. Principios de diseño Web

QUIJANO, j. VBScript

unidad tres

Documents