E. index.html

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width">
7 <title>Muestra datos</title>
8</head>
9
10<body onload="descargaDatos()">
11
12 <h1>Muestra datos</h1>
13
14 <!-- Al mostrar un dato, se usan los atributos "id", "name" o "data-name"
15 para buscar la propiedad a desplegar en la página. -->
16
17 <p>
18 <label>
19 Nombre
20 <!-- Muestra la propiedad nombre del objeto descargado, usando la propiedad
21 value del output. -->
22 <output name="nombre"></output>
23 </label>
24 </p>
25
26 <p>
27 <label>
28 Apellido
29 <!-- Muestra la propiedad apellido del objeto descargado, usando la propiedad
30 value del input. -->
31 <input name="apellido" type="text">
32 </label>
33 </p>
34
35 <p>
36 <label>
37 Género
38 <!-- Muestra la propiedad genero del objeto descargado, usando la propiedad
39 value del select. -->
40 <select name="genero">
41 <option value="">Sin selección</option>
42 <option value="pop">Pop</option>
43 <option value="reg">Reguetón</option>
44 </select>
45 </label>
46 </p>
47
48 <p>
49 <label>
50 Géneración
51 <!-- Muestra la propiedad generacion del objeto descargado, usando la
52 propiedad value del select. -->
53 <select name="generacion">
54 <option value="boom">Baby Boom</option>
55 <option value="X">X</option>
56 <option value="">Sin selección</option>
57 <option value="Y">Millenoals</option>
58 <option value="Z">Z</option>
59 <option value="alfa">Alfa</option>
60 </select>
61 </label>
62 </p>
63
64 <p>
65 <label>
66 Edad
67 <!-- Muestra la propiedad edad del objeto descargado, usando la propiedad
68 valueAsNumber del input. -->
69 <input data-name="edad" type="number">
70 </label>
71 </p>
72
73 <p>
74 <label>
75 Número de la suerte
76 <!-- Muestra la propiedad numero del objeto descargado, usando la propiedad
77 value del output. -->
78 <output id="numero"></output>
79 </label>
80 </p>
81
82 <p>
83 <label>
84 Avance
85 <!-- Muestra la propiedad avance del objeto descargado, usando la propiedad
86 value del progress. -->
87 <progress id="avance" max="100"></progress>
88 </label>
89 </p>
90
91 <p>
92 <label>
93 Capacidad
94 <!-- Muestra la propiedad capacidad del objeto descargado, usando la
95 propiedad value del meter. -->
96 <meter id="capacidad" min="50" max="80"></meter>
97 </label>
98 </p>
99
100 <p>
101 <label>
102 Temperatura
103 <!-- Muestra la propiedad temperatura del objeto descargado, usando la
104 propiedad valueAsNumber del meter. -->
105 <input id="temperatura" type="range" min="0" max="50">
106 </label>
107 </p>
108
109 <p>
110 <label>
111 <!-- Muestra la propiedad aprobado del objeto descargado, usando la propiedad
112 checked del input, porque el tipo del dato es boolean y el input tiene
113 type="checkbox". -->
114 <input id="aprobado" type="checkbox">
115 Aprobado
116 </label>
117 </p>
118
119 <p>
120 <label>
121 Gracioso
122 <!-- Muestra la propiedad gracioso del objeto descargado, usando la propiedad
123 value del output. -->
124 <output id="gracioso"></output>
125 </label>
126 </p>
127
128 <p>
129 <label>
130 Emplacado
131 <!-- Muestra la propiedad emplacado del objeto descargado, usando la
132 propiedad value del select. -->
133 <select name="emplacado">
134 <option value="">Sin selección</option>
135 <option value="true">Si</option>
136 <option value="false">No</option>
137 </select>
138 </label>
139 </p>
140
141 <label>Dirección</label>
142 <!-- Muestra la propiedad direccion del objeto descargado, usando la propiedad
143 textContent del pre. -->
144 <pre id="direccion"></pre>
145
146 <p>
147 <label>
148 Encabezado
149 <!-- Muestra la propiedad encabezado del objeto descargado, usando la
150 propiedad innerHTML del span. -->
151 <span id="encabezado"></span>
152 </label>
153 </p>
154
155 <p>
156 <label>
157 Nacimiento
158 <!-- Muestra la propiedad nacimiento del objeto descargado, usando la
159 propiedad value del input. Revisa la especificación de input para
160 los distintos formatos de fecha que se pueden usar. -->
161 <input id="nacimiento" type="date">
162 </label>
163 </p>
164
165 <figure>
166 <!-- Muestra la propiedad imagen1 del objeto descargado, usando la propiedad
167 src del img. -->
168 <img id="imagen1" alt="Imagen 2">
169 <figcaption>Imagen 1</figcaption>
170 </figure>
171
172 <figure>
173 <!-- Muestra la propiedad imagen2 del objeto descargado, usando la propiedad
174 src del img. Como el valor es "", se oculta el img usando hidden = true. -->
175 <img id="imagen2" alt="Imagen 2">
176 <figcaption>Imagen 2</figcaption>
177 </figure>
178
179 <!-- Muestra la propiedad pasatiempos[] del objeto descargado; como es un
180 array, usa los elementos con name="pasatiempos[]" y les pone la propiedad
181 checked en true si su value está en el array; de lo contrario se las pone en
182 false. Los corchetes([]), le indican a PHP que la propiedad es un array
183 que puede llegar a tener 0, 1 o más elementos. -->
184 <fieldset>
185 <legend>Pasatiempos</legend>
186 <label>
187 <input type="checkbox" name="pasatiempos[]" value="fut">Futbol
188 </label>
189 <label>
190 <input type="checkbox" name="pasatiempos[]" value="chess">Ajedrez
191 </label>
192 <label>
193 <input type="checkbox" data-name="pasatiempos[]" value="basket">Basketbol
194 </label>
195 </fieldset>
196
197 <!-- Muestra la propiedad madrugador del objeto descargado; como es un
198 array, usa los elementos con name="madrugador" y les pone la propiedad
199 checked en true si su value está en el array; de lo contrario se las pone en
200 false. Como el name no tiene [], el array solo tiene 0 o un elemento. -->
201 <fieldset>
202 <legend>Madrugador</legend>
203 <label><input type="radio" name="madrugador" value="si">Si</label>
204 <label><input type="radio" name="madrugador" value="no">No</label>
205 </fieldset>
206
207 <p>
208 <label>
209 Patos
210 <!-- Muestra la propiedad patos del objeto descargado; como es un
211 array, usa los las opciones del select con name="patos[]" y les pone la
212 propiedad selected en true si su value está en el array; de lo contrario se
213 las pone en false. Los corchetes([]), le indican a PHP que la propiedad es
214 un array que puede llegar a tener 0, 1 o más elementos. -->
215 <select name="patos[]" multiple size="3">
216 <option value="hugo">Hugo</option>
217 <option value="paco">Paco</option>
218 <option value="luis">Luis</option>
219 </select>
220 </label>
221 </p>
222</body>
223
224<script type="module">
225
226 import { exportaAHtml } from "./lib/js/exportaAHtml.js"
227 import { consumeJson } from "./lib/js/consumeJson.js"
228 import { muestraObjeto } from "./lib/js/muestraObjeto.js"
229 import { muestraError } from "./lib/js/muestraError.js"
230
231 async function descargaDatos() {
232 try {
233 const respuesta = await consumeJson("srv/datos.php")
234 muestraObjeto(document, respuesta.body)
235 } catch (error) {
236 muestraError(error)
237 }
238 }
239 exportaAHtml(descargaDatos)
240
241</script>
242
243</html>
skip_previous skip_next