Docente: M.C. Laura Elena Camilo García.
Academia de Programación
SUBSECRETARÍA DE EDUCACIÓN MEDIA SUPERIOR
UNIDAD DE EDUCACIÓN MEDIA SUPERIOR TECNOLÓGICA INDUSTRIAL Y DE SERVICIOS
CENTRO DE BACHILLERATO TECNOLÓGICO INDUSTRIAL Y DE SERVICIOS No.
“Gral. Ignacio Maya”
MÓDULO III
DESARROLLA APLICACIONES WEB
SUBMÓDULO 2: Desarrolla aplicaciones que se ejecutan en el cliente
Parcial 2
Docente: M.C. Laura Elena Camilo García.
Nombre del alumno:
Iguala de la Independencia, Gro. Marzo de 2022.
CBTis No. 56 16
Docente: M.C. Laura Elena Camilo García. Academia de Programación
Cuando comenzamos en el mundo del desarrollo web, normalmente comenzamos por aprender a escribir
etiquetado o marcado HTML y además, añadir estilos CSS para darle color, forma y algo de interacción. Sin embargo,
a medida que avanzamos, nos damos cuenta de que en cierta forma podemos estar bastante limitados.
Si únicamente utilizamos HTML/CSS, sólo podremos crear páginas «estáticas» (sin demasiada personalización por
parte del usuario), pero si añadimos Javascript, podremos crear páginas «dinámicas». Cuando hablamos de páginas
dinámicas, nos referimos a que podemos dotar de la potencia y flexibilidad que nos da un lenguaje de programación
para crear documentos y páginas mucho más ricas, que brinden una experiencia más completa y con el que se
puedan automatizar un gran abanico de tareas y acciones.
DOM es una abreviatura de Document Object Model. En español podríamos traducirlo por Modelo de Objeto de
Documento.
DOM o lo que es lo mismo, la estructura del documento HTML.
Una página HTML está formada por múltiples etiquetas HTML, anidadas una dentro de otra, formando un árbol de
etiquetas relacionadas entre sí, que se denomina árbol DOM (o simplemente DOM). También podría ser referido
con el nombre de jerarquía de objetos del navegador, porque realmente es una estructura jerárquica donde existen
varios objetos y unos dependen de otros.
En Javascript, cuando nos referimos al DOM nos referimos a esta estructura, que podemos modificar de forma
dinámica desde Javascript, añadiendo nuevas etiquetas, modificando o eliminando otras, cambiando sus atributos
HTML, añadiendo clases, cambiando el contenido de texto, etc...
Al estar "amparado" por un lenguaje de programación, todas estas tareas se pueden automatizar, incluso indicando
que se realicen cuando el usuario haga acciones determinadas, como, por ejemplo: pulsar un botón, mover el ratón,
hacer click en una parte del documento, escribir un texto, etc...
Los objetos del DOM modelizan tanto la ventana del navegador como el historial, el documento o página web, y
todos los elementos que pueda tener dentro la propia página, como párrafos, divisiones, tablas, formularios y sus
campos, etc. A través del DOM se puede acceder, por medio de Javascript, a cualquiera de estos elementos, es decir
a sus correspondientes objetos para alterar sus propiedades o invocar a sus métodos. Con todo, a través del DOM,
queda disponible para los programadores de Javascript, cualquier elemento de la página, para modificarlos,
suprimirlos, crear nuevos elementos y colocarlos en la página, etc.
CBTis No. 56 17
Docente: M.C. Laura Elena Camilo García. Academia de Programación
Lo cierto es que quien quiera que haya realizado un poco de trabajo con Javascript, aunque este haya sido muy
básico, ha tocado el DOM alguna vez.
El DOM está definido y administrado por el W3C, por lo que los distintos navegadores simplemente aplican las
especificaciones del World Wide Web Consortium, para dar soporte al DOM en sus aplicaciones. El DOM no sólo
permite modificar páginas web en HTML, sino también documentos XML.
ACCESO AL DOM
Con los navegadores modernos podemos inspeccionar una página web, así como ver el código fuente.
Desde la consola podemos añadir, modificar o borrar nodos dentro de la página.
El acceso puede darse por tres formas:
1. Botón derecho para inspeccionar la página.
2. Desde los tres puntos verticales (Menú):
3. Por acceso directo CTRL+MAYUS+I
INSPECCIONANDO LA PAGINA
El acceso en Google Chrome:
CBTis No. 56 18
Docente: M.C. Laura Elena Camilo García. Academia de Programación
El acceso en Microsoft Edge:
DESDE LOS TRES PUNTOS VERTICALES (MENÚ):
CBTis No. 56 19
Docente: M.C. Laura Elena Camilo García. Academia de Programación
APLICACIONES EN EL CLIENTE
PARCIAL 2:
Instrucciones: Traza el árbol del DOM de tu página web del Currículo Vitae.
ACTIVIDAD 1
Nombre del alumno: ____________________________________________________________________________
CBTis No. 56 20
Docente: M.C. Laura Elena Camilo García. Academia de Programación
Lo más importante y básico que podemos destacar en este momento es que la programación de Javascript se realiza
dentro del propio documento HTML. Es decir, el código Javascript, en la mayoría de los casos, se mezcla con el
propio código HTML para generar la página.
Esto quiere decir que debemos aprender a mezclar los dos lenguajes de programación y rápidamente veremos que,
para que estos dos lenguajes puedan convivir sin problemas entre ellos, se han de incluir unos delimitadores que
separan las etiquetas HTML de las instrucciones Javascript. Estos delimitadores son las
etiquetas <SCRIPT> y </SCRIPT>. Todo el código Javascript que pongamos en la página ha de ser introducido entre
estas dos etiquetas.
En una misma página podemos introducir varios scripts, cada uno que podría introducirse dentro de unas
etiquetas <SCRIPT> distintas.
En determinados casos la colocación de los Script sí es muy importante.
También se puede escribir Javascript dentro de determinados atributos de la página, como el atributo onclick. Estos
atributos están relacionados con las acciones del usuario y se llaman manejadores de eventos.
Ejemplos de algunos eventos sencillos.
Ejemplo1: window.alert
Podemos mostrar una caja de texto emergente al terminarse de cargar la portada de nuestro sitio web, que podría
dar la bienvenida a los visitantes.
CBTis No. 56 21
Docente: M.C. Laura Elena Camilo García. Academia de Programación
Ejemplo 2: onclick
Otro ejemplo rápido se puede ver a continuación. Se trata de un botón para volver hacia atrás, como el que
tenemos en la barra de herramientas del navegador. Ahora veremos una línea de código que mezcla HTML y
Javascript para crear este botón que muestra la página anterior en el historial, si es que la hubiera.
El botón sería parecido al siguiente, un botón normal con el aspecto predeterminado que el navegador y sistema
operativo que usas otorgue a los botones. A continuación, tienes una imagen sobre cómo se vería el botón en mi
sistema.
Hay que destacar que en este caso la instrucción Javascript se encuentra dentro de un atributo de HTML, onclick,
que indica que esa instrucción se tiene que ejecutar como respuesta a la pulsación del botón.
Ejemplo 3: new Date()
Veamos ahora un sencillo script para mostrar la fecha de hoy. A veces es muy interesante mostrarla en las webs
para dar un efecto de que la página está al "al día", es decir, está actualizada.
CBTis No. 56 22
Docente: M.C. Laura Elena Camilo García. Academia de Programación
ALGUNOS OTROS EVENTOS:
Ejemplo 4: onchange
CBTis No. 56 23
Docente: M.C. Laura Elena Camilo García. Academia de Programación
Ejemplo 5: onload
CBTis No. 56 24
Docente: M.C. Laura Elena Camilo García. Academia de Programación
Oprime el Botón ACEPTAR y posteriormente se visualizará una ventana mas…
ACTIVIDAD 2
INSTRUCCIONES:
A) Incluye los primeros 3 Eventos (1,2, y 3) descritos en este material, en la pagina web de tu currículo.
B) Envía tu trabajo web al correo de tu docente en la fecha acordada en el aula de clases, con los criterios
establecidos para la entrega de lo mencionado.
Nombre del alumno: ___________________________________________________________________________
CBTis No. 56 25
Docente: M.C. Laura Elena Camilo García. Academia de Programación
ACTIVIDAD 3 INSTRUCCIONES:
A) Captura los eventos restantes (4 y 5), donde modificaras los datos de tu docente, por el tuyo (si estas
trabajando de manera individual) o por los nombres de los integrantes de tu equipo (si estas trabajando de
forma colaborativa).
B) Envía tu trabajo web al correo de tu docente en la fecha acordada en el aula de clases, con los criterios
establecidos para la entrega de lo mencionado.
Nombre del alumno: ____________________________________________________________________________
CBTis No. 56 26
Docente: M.C. Laura Elena Camilo García. Academia de Programación
ACTIVIDAD 4 INSTRUCCIONES: Revisión de cuadernillo de actividades hasta el presente parcial (siguiendo
el mismo criterio del parcial anterior), incluyendo:
1) Apuntes de clase,
2) Impresión de código fuente de cada pagina web,
3) Impresión de pantallas de cada código fuente.
Nombre del alumno: ____________________________________________________________________________
CBTis No. 56 27
Docente: M.C. Laura Elena Camilo García. Academia de Programación
Sec Criterio Valor OBSERVACIONES Calificación
Trazar Árbol DOM DOM de tu página web del currículo
1.
2. window.alert, onclick y new Date()
un porcentaje por partes iguales
Incluir los 3 primeros eventos de
Todas las actividades tienen
este material al currículo,
Modificando el nombre de la docente,
3. Capturación de eventos 4 y 5 de por el o los colaboradores de la página
este material. web.
Incluido parcial 1 y 2, ambos
4. Entrega de cuadernillo submodulos.
PROMEDIO PARCIAL 2
CBTis No. 56 28
