UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA
FACULTAD DE INGENIERÍA MEXICALI
Práctica de Laboratorio
P9_TSSC_VER1-24
Vigencia de la práctica a partir del: Semestre 2024-1
Clave de
Programa Plan de
Unidad de Nombre de la Unidad de Aprendizaje
Educativo Estudios
Aprendizaje
Licenciado en
Sistemas 2023-2 44194 Temas Selectos de Sistemas Computacionales
Computacionales
Duración
Práctica
Laboratorio de: Temas Selectos de Sistemas Computacionales (Horas)
No.
Nombre de la
14 práctica:
JavaScript-HTML (Contenidos, valores, estilos) 3hrs
1. Introducción
JavaScript provee la forma de interactuar con el navegador, de tal forma que, a través de
instrucciones (código) podemos indicarle acciones a ejecutar, modificando y afectando el
funcionamiento de la página web.
A través del objeto window es como logramos la comunicación entre navegador y JavaScript,
haciendo uso de distintos métodos que se conocerán en esta práctica.
2. Objetivo (competencia)
Crear estilos dinámicos, a través los métodos del objeto window del lenguaje Javascript, para
añadir características interactivas a su página web, de manera creativa y con perseverancia.
ELABORÓ REVISÓ REVISÓ AUTORIZÓ
M.C. José Alfredo Abad Dr. Jesús Eduardo Soto Dra. Araceli Celina Justo
Padilla Vega López
Mtra. Génesis Alejandra
Presidente de la Academia
Dávalos Haro Responsable de Programa
de Licenciatura en Dirección
Educativo
Sistemas Computacionales
PG-SUB-03-RC02 Rev.1
Vigencia: 16-Ene-24
Página 1 de 8
UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA
FACULTAD DE INGENIERÍA MEXICALI
Práctica de Laboratorio
3. Fundamento
El objeto window permite la interacción de JavaScript con el navegador efectúe diversas tareas
de interacción, control de navegación y activación de eventos. Window controla entonces la
ventana de navegación.
En la tabla que a continuación se muestra conoceremos algunas de ellas.
Propiedad Utilidad
alert Despliega en pantalla un mensaje en una
caja de texto
confirm Despliega una caja de texto con un mensaje
y las opciones si/no
history Navegamos por el historial de la ventana
location Acceder a la información de una dirección
URL
setinterval Llama funciones con una frecuencia definida
setTimeout Ejecuta una función que indiquemos al
transcurrir los milisegundos que le
especifiquemos.
Adicionalmente, contamos con el objeto Document, que permite controlar los elementos en
pantalla a través del Modelo de Objetos del Documento (DOM), en el que se incluyen y
controlan los elementos HTML de la ventana, llamados nodos, teniendo nodos padres e hijos.
El DOM proporciona métodos a los cuales podemos hacer uso para acceder a los nodos y
modificarlos o leer su información. En la tabla se explican estos métodos:
Método Utilidad
getElementsByName() Permite hacer referencia a
elementos HTML por su
nombre.
getElementsById() Nos permite seleccionar
elementos (nodos) por su Id.
getElementsByTagName() Nos permite obtener todos los
elementos de la página que
sean de la misma etiqueta.
PG-SUB-03-RC02 Rev.0
Vigencia: 16-Ene-24
Página 2 de 8
UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA
FACULTAD DE INGENIERÍA MEXICALI
Práctica de Laboratorio
Una vez que tenemos acceso a los elementos de la página, mediante el DOM, y
específicamente mediante element, podemos crear nodos (elementos) o eliminarlos haciendo
uso de los métodos appendChild() o removechild().
Controlamos lo que sucede en nuestra página, es decir sus acciones, a través de eventos como
los siguientes:
Evento Descripción Elementos que puede
controlar
onblur Al soltar un elemento Button, input, label,select,text
area, body.
onchange Cuando el elemento cambió Input, select, textarea
onclick Al hacer click con el mouse Todos
ondbclick Al hacer doble click con el mouse Todos
onfocus Al seleccionar un elemento Button,input,label,
select,textarea, body.
onkeydown Al presionar una Tecla Formulario y body
onkeypress Al presionar una Tecla y soltar Formulario y body
onkeyup Soltar una tecla presionada Formulario y body
onload Al cargar una página Body
onmousedown Presionar botón del ratón Todos
onmousemove Mover el ratón Todos
onmouseout Al sacar el ratón de uno de los Todos
elementos
onmouseover Al colocar el ratón sobre un Todos
elemento
onmouseup Soltar el botón del mouse que Todos
estaba presionando
onreset Al reiniciar formulario Form
onresize Modificar el tamaño de la ventana Body
onselect Al seleccionar Input, textarea
onsubmit Al enviar Form
onunload Al salir de la página Body
A través de addeventlistener, podemos mantener la limpieza del código, ya que nos permitirá
tener nuestra página HTML por un lado, y el JavaScript en otro archivo, manteniendo un control
de los eventos. La sintaxis correcta a seguir, es especificando lo siguiente:
PG-SUB-03-RC02 Rev.0
Vigencia: 16-Ene-24
Página 3 de 8
UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA
FACULTAD DE INGENIERÍA MEXICALI
Práctica de Laboratorio
A través de styles podemos modificar propiedades de estilo de los elementos. Las propiedades
más frecuentes de modificar son
color Color del elemento
background Color de fondo del elemento
border Estilo de borde del elemento
margin Establece el margen
padding Establece el relleno del elemento
width Establece ancho del elemento
heigth Declara la altura del elemento
visibility Esta propiedad determina si un
elemento es visible o no.
display Define el tipo de caja usado para
presentar el elemento
position Establece el tipo de posicionamiento
usado para posicionar el elemento
top Especifica la distancia entre el
margen superior del elemento y el
margen superior de su contenedor
bottom Especifica la distancia entre el
margen inferior del elemento y el
margen inferior de su contenedor
left Esta propiedad especifica la
distancia entre el margen izquierdo
del elemento y el margen izquierdo
de su contenedor.
rigth Especifica la distancia entre el
margen derecho del elemento y el
margen derecho del contenedor
cssFloat Esta propiedad permite al elemento
flotar hacia un lado o el otro.
clear Recupera el flujo normal del
documento, impidiendo que el
elemento siga flotando hacia la
izquierda, la derecha o ambos
lados.
Overflow Especifica cómo se va a mostrar el
contenido que excede los límites de
la caja de su contenedor.
Font Esta propiedad declara los estilos
de fuente
textalign Alinea el texto dentro del elemento
text decoration Resalta el texto con una línea
PG-SUB-03-RC02 Rev.0
Vigencia: 16-Ene-24
Página 4 de 8
UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA
FACULTAD DE INGENIERÍA MEXICALI
Práctica de Laboratorio
En cuanto a modificación de contenido, se proveen los siguientes métodos
innterHTML Declara o devuelve el contenido
de un elemento
outerHTML Esta propiedad declara o
devuelve un elemento y su
contenido. A diferencia de la
propiedad innerHTML, se
reemplaza contenido y el
elemento.
insertAdjacentHTML Éste método inserta contenido en
una ubicación determinada por el
atributo ubicación.
Aquí vemos la aplicación de métodos JavaScript para controlar un HTML
Iniciamos creando el HTML con estructura básica, después añadimos eventos a los botones.
PG-SUB-03-RC02 Rev.0
Vigencia: 16-Ene-24
Página 5 de 8
UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA
FACULTAD DE INGENIERÍA MEXICALI
Práctica de Laboratorio
Una vez concluido el archivo HTML, hacemos el archivo de JavaScript, con las indicaciones
pertinentes para controlar a nuestro HTML.
Este es el archivo JavaScript
function saluda()
{
alert("Hola alumno de JavaScript");
}
function cambia()
{
[Link]("mi_parrafo").[Link]="red";
alert("Felicidades! cambiaste el color del párrafo con javascript");
[Link]("ok! lo hiciste");
}
[Link]=function()
{
/*creación llamada a función al dar click sobre un párrafo*/
var texto= [Link]("mensaje");
/*evento para el párrafo*/
[Link]("click", saluda, false);
/*creación de un párrafo desde javascript*/
var parrafo=[Link]("p");
[Link]("id","mi_parrafo");
var texto2=[Link]("4.- muy bien..ahora practicaremos creación de
elementos y cambio de formato");
var texto_parrafo=[Link]("Soy de color azúl");
[Link](texto_parrafo);
[Link](texto2);
[Link](parrafo);
/*creación del boton desde javascript*/
var boton=[Link]("button");
var texto_boton=[Link]("da dos clicks sobre mi");
[Link](texto_boton);
[Link](boton);
/*evento para el botón*/
[Link]("dblclick",cambia,false);
}
function cambia_nombre(){
var nombre= prompt("Cual es tu nombre:");
[Link]("parrafo2").innerHTML=nombre;
}
function elimina(){
var elemento_borrar= [Link]("parrafo3");
elemento_borrar.[Link](elemento_borrar);
alert("hecho!! ya se fue el parrafo")
}
PG-SUB-03-RC02 Rev.0
Vigencia: 16-Ene-24
Página 6 de 8
UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA
FACULTAD DE INGENIERÍA MEXICALI
Práctica de Laboratorio
4. Procedimiento (descripción)
A) Equipo necesario Material de apoyo
Computadora Práctica de Taller
Acceso a internet
Editor de páginas web
b) Desarrollo de la práctica
1. Crea la carpeta practica 14
2. Dentro de la carpeta práctica 14 crea el archivo [Link]
En el archivo form crea un formulario que pida un nombre, una edad y el nombre de un
libro leído.
3. Liga el archivo HTML a un JavaScript donde valides que los datos no estén vacíos y que
sean numéricos. Si son datos inválidos mostrar el error, si es un dato válido, cambiar el
color de fondo del campo a color verde tenue.
Para este paso recuerda hacer uso de funciones y activación de eventos, así como
condiciones.
4. En la carpeta practica 14 crea el archivo mi_archivo.html y crea en una estructura de
archivo sencilla que contenga un encabezado y un párrafo.
a. Añade el siguiente poema al párrafo
NO TE RINDAS
Mario Benedetti
No te rindas, aún estás a tiempo
de alcanzar y comenzar de nuevo,
aceptar tus sombras, enterrar tus miedos,
liberar el lastre, retomar el vuelo.
No te rindas que la vida es eso,
continuar el viaje,
perseguir tus sueños,
destrabar el tiempo,
correr los escombros y destapar el cielo.
b. Practica cambiar la fuente, color de fondo, y tamaño de letra de los elementos
mediante JavaScript.
c. Practica añadir y eliminar elementos (nodos) al documento HTML, tales como
botones y párrafos.
d. Practica añadir y cambiar el contenido del párrafo, así como el aspecto de los
elementos creados en el punto C.
PG-SUB-03-RC02 Rev.0
Vigencia: 16-Ene-24
Página 7 de 8
UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA
FACULTAD DE INGENIERÍA MEXICALI
Práctica de Laboratorio
5. Visualiza el contenido de estos videos que te serán de utilidad para manejar datos y
enviarlos a tu correo:
● [Link]
● [Link]
● Ahora implementa un formulario sencillo y recibe los datos en tu correo.
c) Cálculos (si aplica) y reporte
El alumno realizará su reporte de práctica, que contendrá sus datos de identificación,
aprendizajes, dificultades, así como sus soluciones y link a sus resultados.
5. Resultados y conclusiones
El alumno entregará el reporte en el medio indicado por el docente.
6. Anexos
n/a
7. Referencias
Gauchat, J.D.(2017). El gran libro de HTML5, CSS3 y JavaScript (3era ed).. Editorial
Marcombo.
Lujan, J. (2016). HTML5, CSS y JavaScript, Crea tu Web y apps con el estándar de desarrollo.
Alfaomega.
PG-SUB-03-RC02 Rev.0
Vigencia: 16-Ene-24
Página 8 de 8