FUNDAMENTOS DE PROGRAMACION
Documentación formal de la Página Web que simula
ser una plataforma para reservar asientos de un
autobús. Se describe a profundidad código y la lógica
utilizada en HTML y JavaScript, para que cualquier
lector pueda entenderlo.
Flores Castro, Alonso;García Bravo,
Joel;Ochoa Ramírez, Daniel.
REPORTE 1° F
Página Web – Reservación de Autobús
29 de noviembre de 2022
,INDICE
Index.html ....................................................................................................................................... 1
Código completo ......................................................................................................................... 1
<header: ...................................................................................................................................... 3
<nav: ............................................................................................................................................ 3
<section: ...................................................................................................................................... 4
<select: ........................................................................................................................................ 5
<option: ....................................................................................................................................... 5
<button:....................................................................................................................................... 5
</section: .................................................................................................................................... 6
<footer:........................................................................................................................................ 7
ReservarAsiento.html:..................................................................................................................... 9
Código completo ......................................................................................................................... 9
<img posterior: .......................................................................................................................... 11
<table: ....................................................................................................................................... 12
<td: ............................................................................................................................................ 12
<tr: ............................................................................................................................................. 12
<tr (pasillo): ............................................................................................................................... 13
<img trasera: ............................................................................................................................. 14
<p> + <inputs>: .......................................................................................................................... 14
<button:..................................................................................................................................... 15
<div “espacioTabla”:.................................................................................................................. 16
JavaScript........................................................................................................................................... 16
Variables Globales ......................................................................................................................... 16
Función reservar() ......................................................................................................................... 16
Función activarDesactivarBotones(decisión) ................................................................................ 17
Función sillaPasajeroButton(num) ................................................................................................ 19
Función removeListaPasajeros() ................................................................................................... 20
Función reservarButton() .............................................................................................................. 20
Función modificarEliminar() .......................................................................................................... 22
Función eliminarReservación(núm) ............................................................................................... 24
Función modificarReservación(núm)............................................................................................. 25
Función aplicarCambiosReservacion() .......................................................................................... 26
, Index.html
Código completo
1. <body>
2. <!-- Cuerpo de todo el contenido -->
3. <div class="body-div">
4. <!-- Título de la página -->
5. <header>
6. <div class="header-div">
7. <h1 class="header-div__h1">LA LINEA UNIVERSITARIA</h1>
8. </div>
9. </header>
10. <!-- Encabezado general con el menú de opciones -->
11. <nav class="nav">
12. <section id="header" class="nav-section">
13. <div><img src="imagenes/home.png">
14. <h1><a href="index.html" style="text-decoration: none;
color:black;">HOME</a></h1></div><div><h1 title="Estamos trabajando en esta sección,
perdón por la molestia.">NOSOTROS</h1></div><div><h1 title="Estamos trabajando en esta
sección, perdón por la molestia.">FACTURACION</h1></div><div><h1 title="Estamos
trabajando en esta sección, perdón por la molestia.">CONTACTO</h1></div>
15. </section>
16. </nav>
17. </header>
18.
19. <!-- Apartado que mostrará la publicidad y rutas disponibles. -->
20. <section class="section-class">
21. <div>
22. <!-- Apartado exclusivo de la publicidad que tendrá la web -->
23. <div class="section-div-div__publicity">
24. <img src="imagenes/publicidad.jpg" class="section-div__img">
25. </div>
26. <!-- Apartado exclusivo de los select para escoger la ruta, destino,
fecha y botón buscar -->
27. <div class="section-div-div__routes">
28. <div class="section-div-div-div__origin"> <!-- Origen -->
29. <h1 class="section-div-input__h1" title="Escoge el origen de
donde viajas.">ORIGEN</h1>
30. <select id="origen" name="opciones" class="section-
div__select" title="Escoge el origen de donde viajas." >
31. <option value="0">Selecionar...</option>
32. <option value="1">Colima</option>
33. </select>
34. </div>
35. <div class="section-div-div-div__destination"> <!-- Destino -->
36. <h1 class="section-div-input__h1" title="Escoge el destino al
que vas.">DESTINO</h1>
37. <select id="destino" name="opciones" class="section-
div__select" title="Escoge el destino al que vas." >
38. <option value="0">Selecionar...</option>
39. <option value="1">Tecoyork</option>
40. </select>
41. </div>
42. <div class="section-div-div-div__date"> <!-- Fecha -->
43. <h1 class="section-div-input__h1" title="Selecciona la fecha
en la que sales de viaje.">FECHA</h1><br>
44. <select id="fecha" name="opciones" class="section-
div__select" title="Selecciona la fecha en la que sales de viaje.">
45. <option value="0">Seleccionar...</option>
46. <option value="1">24 / Nov / 2022</option>
47. </select>
48. </div>
49. <div class="section-div-div-div__button"> <!-- Buscar -->
50. <button id="searchBusesButton" class="searchBusesButton"
title="Busca camiones disponibles" type="submit" onclick="reservar()">BUSCAR</button>
51. </div>
52.
Documentación formal de la Página Web que simula
ser una plataforma para reservar asientos de un
autobús. Se describe a profundidad código y la lógica
utilizada en HTML y JavaScript, para que cualquier
lector pueda entenderlo.
Flores Castro, Alonso;García Bravo,
Joel;Ochoa Ramírez, Daniel.
REPORTE 1° F
Página Web – Reservación de Autobús
29 de noviembre de 2022
,INDICE
Index.html ....................................................................................................................................... 1
Código completo ......................................................................................................................... 1
<header: ...................................................................................................................................... 3
<nav: ............................................................................................................................................ 3
<section: ...................................................................................................................................... 4
<select: ........................................................................................................................................ 5
<option: ....................................................................................................................................... 5
<button:....................................................................................................................................... 5
</section: .................................................................................................................................... 6
<footer:........................................................................................................................................ 7
ReservarAsiento.html:..................................................................................................................... 9
Código completo ......................................................................................................................... 9
<img posterior: .......................................................................................................................... 11
<table: ....................................................................................................................................... 12
<td: ............................................................................................................................................ 12
<tr: ............................................................................................................................................. 12
<tr (pasillo): ............................................................................................................................... 13
<img trasera: ............................................................................................................................. 14
<p> + <inputs>: .......................................................................................................................... 14
<button:..................................................................................................................................... 15
<div “espacioTabla”:.................................................................................................................. 16
JavaScript........................................................................................................................................... 16
Variables Globales ......................................................................................................................... 16
Función reservar() ......................................................................................................................... 16
Función activarDesactivarBotones(decisión) ................................................................................ 17
Función sillaPasajeroButton(num) ................................................................................................ 19
Función removeListaPasajeros() ................................................................................................... 20
Función reservarButton() .............................................................................................................. 20
Función modificarEliminar() .......................................................................................................... 22
Función eliminarReservación(núm) ............................................................................................... 24
Función modificarReservación(núm)............................................................................................. 25
Función aplicarCambiosReservacion() .......................................................................................... 26
, Index.html
Código completo
1. <body>
2. <!-- Cuerpo de todo el contenido -->
3. <div class="body-div">
4. <!-- Título de la página -->
5. <header>
6. <div class="header-div">
7. <h1 class="header-div__h1">LA LINEA UNIVERSITARIA</h1>
8. </div>
9. </header>
10. <!-- Encabezado general con el menú de opciones -->
11. <nav class="nav">
12. <section id="header" class="nav-section">
13. <div><img src="imagenes/home.png">
14. <h1><a href="index.html" style="text-decoration: none;
color:black;">HOME</a></h1></div><div><h1 title="Estamos trabajando en esta sección,
perdón por la molestia.">NOSOTROS</h1></div><div><h1 title="Estamos trabajando en esta
sección, perdón por la molestia.">FACTURACION</h1></div><div><h1 title="Estamos
trabajando en esta sección, perdón por la molestia.">CONTACTO</h1></div>
15. </section>
16. </nav>
17. </header>
18.
19. <!-- Apartado que mostrará la publicidad y rutas disponibles. -->
20. <section class="section-class">
21. <div>
22. <!-- Apartado exclusivo de la publicidad que tendrá la web -->
23. <div class="section-div-div__publicity">
24. <img src="imagenes/publicidad.jpg" class="section-div__img">
25. </div>
26. <!-- Apartado exclusivo de los select para escoger la ruta, destino,
fecha y botón buscar -->
27. <div class="section-div-div__routes">
28. <div class="section-div-div-div__origin"> <!-- Origen -->
29. <h1 class="section-div-input__h1" title="Escoge el origen de
donde viajas.">ORIGEN</h1>
30. <select id="origen" name="opciones" class="section-
div__select" title="Escoge el origen de donde viajas." >
31. <option value="0">Selecionar...</option>
32. <option value="1">Colima</option>
33. </select>
34. </div>
35. <div class="section-div-div-div__destination"> <!-- Destino -->
36. <h1 class="section-div-input__h1" title="Escoge el destino al
que vas.">DESTINO</h1>
37. <select id="destino" name="opciones" class="section-
div__select" title="Escoge el destino al que vas." >
38. <option value="0">Selecionar...</option>
39. <option value="1">Tecoyork</option>
40. </select>
41. </div>
42. <div class="section-div-div-div__date"> <!-- Fecha -->
43. <h1 class="section-div-input__h1" title="Selecciona la fecha
en la que sales de viaje.">FECHA</h1><br>
44. <select id="fecha" name="opciones" class="section-
div__select" title="Selecciona la fecha en la que sales de viaje.">
45. <option value="0">Seleccionar...</option>
46. <option value="1">24 / Nov / 2022</option>
47. </select>
48. </div>
49. <div class="section-div-div-div__button"> <!-- Buscar -->
50. <button id="searchBusesButton" class="searchBusesButton"
title="Busca camiones disponibles" type="submit" onclick="reservar()">BUSCAR</button>
51. </div>
52.
