GUIA DE

LABORATORIO
DIRIGIDO DE
JAVASCRIPT
ING.IVAN PETRLIK AZABACHE
Primer Ejercicio
Desarrollar la siguiente aplicacin web que me permita ingresar por teclado los
siguientes campos: cdigo, nombre, apellido, sexo. Adems el programa tiene
que mostrarte por pantalla todos los datos que se han ingresado por teclado.
A continuacin vamos a mostrar el diseo de la pgina.
Soluci!"
a) rimeramente se tiene que digitar la estructura del !tml de la pagina web
de nombre primere"ercicio.html.
b) Dentro de la etiqueta #bod$%#&bod$% se tiene que reali'ar el respectivo
diseo.
c) Ahora vamos a e"ecutar la pagina para visuali'ar el diseo respectivo
d) (obre el diseo que hasta ahora hemos reali'ado, tenemos que adicionarle
dos botones
e) Ahora vamos a e"ecutar la pagina para visuali'ar el diseo respectivo
)) (obre el diseo que hasta ahora hemos reali'ado, tenemos que adicionarle
un area de texto.
g) Ahora vamos a e"ecutar la pagina para visuali'ar el diseo respectivo
h) Ahora dentro de la etiqueta #head% #&head% , se deber de implementar
dos )unciones*+ava(cript) de nombre Agregar $ ,ostrar $ adems una
variable global que me permita el almacenamiento de cadenas.
i) Desarrollar la )uncin Agregar*)

") Desarrollar la )uncin ,ostrar*)

-) Agregarle el evento del botn *.n/lic-)

l) 0"ecutando )inalmente la pagina web.
Adicionando registro Adicionando registro Adicionando
registro

,ostrar registros registro mostrado
m) Ahora vamos a modi)icar el cdigo $ la )orma de mostrar sea a trav1s del
area de texto
n) Despu1s de que se ha e"ecutado $ adicionado los mismos registros,
ahora mostramos la )orma como se lista a trav1s del rea de texto.
Se#u!$o Ejercicio
Desarrollar la siguiente aplicacin web que me permita ingresar por teclado los
siguientes campos: cdigo, nombre, apellido, sexo. Adems el programa tiene
que mostrarte por pantalla todos los datos que se han ingresado por teclado.
A continuacin vamos a mostrar el diseo de la pgina.
Soluci!"
2mplementando la estructura bsica de una pgina en !tml
Ejecu%&!$o ' (i)u&li*&!$o l& +&#i!& e! HT,L
/ontinuando con el diseo de la pagina !3,4
0"ecutando $ visuali'ando la pgina en !3,4
3erminando de disear la pagina !3,4
0"ecutando $ visuali'ando la pgina en !3,4
2mplementando +ava(cript $ adems declarando las respectivas variables
globales* el arreglo unidimensional $ la variable i)
2mplementando las )unciones en +ava(cript* por cada botn implementado)
Desarrollando cada una de las )unciones
ara terminar tenemos que dar el evento al botn e invocar a cada uno de las
)unciones implementadas.
Tercer Ejercicio
Desarrollar la siguiente aplicacin web que me permita asignar datos en 5
arreglos unidimensionales paralelos en "avascript, adems se tiene que mostrar
por pantalla una tabla con datos extra6dos de los respectivos arreglos
unidimensionales.
A continuacin vamos a mostrar el diseo de la pgina.
Soluci!"
a) rimeramente se tiene que digitar la estructura del !tml de la pagina web
de nombre tercere"ercicio.html.
b) Dentro de la etiqueta #head%#&head% se tiene adicionar la seccin de
+avascritp $ declara cinco arreglos unidimensionales paralelos
* cdigo,nombre,apellido,sexo,estado) $ adems una variable i.
c) Ahora vamos a implementar dentro de la etiqueta #bod$% una tabla de 7
)ila x 5 columnas.
d) Ahora vamos a e"ecutar la pagina para visuali'ar el diseo respectivo
e) Ahora vamos implementar un bucle repetitivo que recorra paralelamente
los arreglos unidimensionales $ que va$an imprimiendo dentro de una
serie de )ilas en la tabla diseada.
)) Ahora vamos a e"ecutar la pagina para visuali'ar el diseo respectivo
Cu&r%o Ejercicio
Desarrollar la siguiente aplicacin web que me permita asignar datos en 5
arreglos unidimensionales paralelos en "avascript, adems se tiene que mostrar
por pantalla una tabla con datos extra6dos de los respectivos arreglos
unidimensionales.
A continuacin vamos a mostrar el diseo de la pgina.
Soluci!"
a) rimeramente se tiene que digitar la estructura del !tml de la pagina web
de nombre tercere"ercicio.html.
b) Dentro de la etiqueta #head%#&head% se tiene adicionar la seccin de
+avascritp $ declara cinco arreglos unidimensionales paralelos
* cdigo,nombre,apellido,sexo,estado) $ adems una variable i.
c) Ahora vamos a implementar una )uncin que me permita almacenar el
!3,4 que se imprimir en la pgina.
d) Despu1s se tiene que implementar un bucle repetitivo para cargar la
respectiva tabla a trav1s de los arreglos unidimensionales.
e) Ahora vamos a invocar el m1todo 2mprimir3abla*8tabla9) desde el bod$
a trav1s del evento .nload.
)) a vamos implementar un bucle repetitivo que recorra paralelamente los
arreglos unidimensionales $ que va$an imprimiendo dentro de una serie
de )ilas en la tabla diseada.
g) Ahora vamos a e"ecutar la pagina para visuali'ar el diseo respectivo
h) ara que las grillas de cada registro, tenga un color determinado
alternadamente, se tiene que implementar el siguiente cdigo.
-ui!%o Ejercicio
Desarrollar la siguiente aplicacin web que me permita ingresar $ almacenar en
arreglos unidimensionales paralelos de un con"unto de personas comprendido
por : cdigo,nombre,apellido, sexo, estado civil, a medida que se va$a
ingresando por teclado se tiene que mostrar los datos en una tabla.
A continuacin vamos a mostrar el diseo de la pgina.
Soluci!"
a) rimeramente se tiene que digitar la estructura del !tml de la pagina web
de nombre xxxxx.html.
b) A continuacin tenemos que reali'ar el siguiente diseo :
c) 0"ecutando $ visuali'ando la pgina web.
d) Ahora implementamos la seccin de +ava(cript , declarando 5 arreglos
unidimensionales paralelos $ adems una variable i.
e) Despu1s de declarar los arreglos unidimensionales paralelos $ la variable
i, ahora implementemos $ desarrollemos el m1todo agregar*).
)) A continuacin vamos a implementar $ desarrollar el m1todo
2mprimir3abla*).
g) Ahora vamos a implementar $ desarrollar el m1todo :oco*).
h) Ahora invocamos al m1todo :oco a trav1s del evento .nload en el ;od$.
i) 2nvocando otros m1todos desde la )uncin agregar*)
Se.%o Ejercicio
0n )uncin a la aplicacin web anterior implementar las siguientes )unciones:
Nue(o /0" 4impia los campos $ el cursor lo coloca en el primer campo de texto
*cdigo).
,o$i1ic&r /0" actuali'a los campos seleccionados de la tabla.
.
Soluci!"
a) Agregando una columna a la tabla respectiva
b) ,odi)icar los botones de la etiqueta #input t$pe<=button=% a 4a #button
t$pe<=button% $ adicionarle una imagen para cada uno .
c) 2mplementando el m1todo seleccionar*)
d) 4uego implementamos los m1todos nuevo $ modi)icar
e)
:inalmente lo e"ecutamos :