F. 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

  
8
 <title>Muestra datos</title>

  
9

  
10
 <script src="dompurify/purify.min.js"></script>

  
11
 <script type="module" src="libclienteweb/manejaErrores.js"></script>

  
12

  
13
</head>

  
14

  
15
<body>

  
16

  
17
 <h1>Muestra datos</h1>

  
18

  
19
 <!-- Al mostrar un dato, se usan los atributos "id", "name" o "data-name"

  
20
  para buscar la propiedad a desplegar en la página. -->

  
21

  
22
 <p>

  
23
  <label>

  
24
   Nombre

  
25
   <!-- Muestra la propiedad nombre del objeto descargado, usando la propiedad

  
26
    value del output. -->

  
27
   <output name="nombre"></output>

  
28
  </label>

  
29
 </p>

  
30

  
31
 <p>

  
32
  <label>

  
33
   Apellido

  
34
   <!-- Muestra la propiedad apellido del objeto descargado, usando la propiedad

  
35
    value del input. -->

  
36
   <input name="apellido" type="text">

  
37
  </label>

  
38
 </p>

  
39

  
40
 <p>

  
41
  <label>

  
42
   Género

  
43
   <!-- Muestra la propiedad genero del objeto descargado, usando la propiedad

  
44
    value del select. -->

  
45
   <select name="genero">

  
46
    <option value="">Sin selección</option>

  
47
    <option value="pop">Pop</option>

  
48
    <option value="reg">Reguetón</option>

  
49
   </select>

  
50
  </label>

  
51
 </p>

  
52

  
53
 <p>

  
54
  <label>

  
55
   Géneración

  
56
   <!-- Muestra la propiedad generacion del objeto descargado, usando la

  
57
    propiedad value del select. -->

  
58
   <select name="generacion">

  
59
    <option value="boom">Baby Boom</option>

  
60
    <option value="X">X</option>

  
61
    <option value="">Sin selección</option>

  
62
    <option value="Y">Millenoals</option>

  
63
    <option value="Z">Z</option>

  
64
    <option value="alfa">Alfa</option>

  
65
   </select>

  
66
  </label>

  
67
 </p>

  
68

  
69
 <p>

  
70
  <label>

  
71
   Edad

  
72
   <!-- Muestra la propiedad edad del objeto descargado, usando la propiedad

  
73
    valueAsNumber del input. -->

  
74
   <input data-name="edad" type="number">

  
75
  </label>

  
76
 </p>

  
77

  
78
 <p>

  
79
  <label>

  
80
   Número de la suerte

  
81
   <!-- Muestra la propiedad numero del objeto descargado, usando la propiedad

  
82
    value del output. -->

  
83
   <output id="numero"></output>

  
84
  </label>

  
85
 </p>

  
86

  
87
 <p>

  
88
  <label>

  
89
   Avance

  
90
   <!-- Muestra la propiedad avance del objeto descargado, usando la propiedad

  
91
    value del progress. -->

  
92
   <progress id="avance" max="100"></progress>

  
93
  </label>

  
94
 </p>

  
95

  
96
 <p>

  
97
  <label>

  
98
   Capacidad

  
99
   <!-- Muestra la propiedad capacidad del objeto descargado, usando la

  
100
    propiedad value del meter. -->

  
101
   <meter id="capacidad" min="50" max="80"></meter>

  
102
  </label>

  
103
 </p>

  
104

  
105
 <p>

  
106
  <label>

  
107
   Temperatura

  
108
   <!-- Muestra la propiedad temperatura del objeto descargado, usando la

  
109
    propiedad valueAsNumber del meter. -->

  
110
   <input id="temperatura" type="range" min="0" max="50">

  
111
  </label>

  
112
 </p>

  
113

  
114
 <p>

  
115
  <label>

  
116
   <!-- Muestra la propiedad aprobado del objeto descargado, usando la propiedad

  
117
    checked del input, porque el tipo del dato es boolean y el input tiene

  
118
    type="checkbox". -->

  
119
   <input id="aprobado" type="checkbox">

  
120
   Aprobado

  
121
  </label>

  
122
 </p>

  
123

  
124
 <p>

  
125
  <label>

  
126
   Gracioso

  
127
   <!-- Muestra la propiedad gracioso del objeto descargado, usando la propiedad

  
128
    value del output. -->

  
129
   <output id="gracioso"></output>

  
130
  </label>

  
131
 </p>

  
132

  
133
 <p>

  
134
  <label>

  
135
   Emplacado

  
136
   <!-- Muestra la propiedad emplacado del objeto descargado, usando la

  
137
    propiedad value del select. -->

  
138
   <select name="emplacado">

  
139
    <option value="">Sin selección</option>

  
140
    <option value="true">Si</option>

  
141
    <option value="false">No</option>

  
142
   </select>

  
143
  </label>

  
144
 </p>

  
145

  
146
 <label>Dirección</label>

  
147
 <!-- Muestra la propiedad direccion del objeto descargado, usando la propiedad

  
148
  textContent del pre. -->

  
149
 <pre id="direccion"></pre>

  
150

  
151
 <p>

  
152
  <label>

  
153
   Encabezado

  
154
   <!-- Muestra la propiedad encabezado del objeto descargado, usando la

  
155
    propiedad innerHTML del span. -->

  
156
   <span id="encabezado"></span>

  
157
  </label>

  
158
 </p>

  
159

  
160
 <p>

  
161
  <label>

  
162
   Nacimiento

  
163
   <!-- Muestra la propiedad nacimiento del objeto descargado, usando la

  
164
    propiedad value del input. Revisa la especificación de input para

  
165
    los distintos formatos de fecha que se pueden usar. -->

  
166
   <input id="nacimiento" type="date">

  
167
  </label>

  
168
 </p>

  
169

  
170
 <figure>

  
171
  <!-- Muestra la propiedad imagen1 del objeto descargado, usando la propiedad

  
172
   src del img. -->

  
173
  <img id="imagen1" alt="Imagen 2">

  
174
  <figcaption>Imagen 1</figcaption>

  
175
 </figure>

  
176

  
177
 <figure>

  
178
  <!-- Muestra la propiedad imagen2 del objeto descargado, usando la propiedad

  
179
   src del img. Como el valor es "", se oculta el img usando hidden = true. -->

  
180
  <img id="imagen2" alt="Imagen 2">

  
181
  <figcaption>Imagen 2</figcaption>

  
182
 </figure>

  
183

  
184
 <!-- Muestra la propiedad pasatiempos[] del objeto descargado; como es un

  
185
   array, usa los elementos con name="pasatiempos[]" y les pone la propiedad

  
186
   checked en true si su value está en el array; de lo contrario se las pone en

  
187
   false. Los corchetes([]), le indican a PHP que la propiedad es un array

  
188
   que puede llegar a tener 0, 1 o más elementos. -->

  
189
 <fieldset>

  
190
  <legend>Pasatiempos</legend>

  
191
  <label>

  
192
   <input type="checkbox" name="pasatiempos[]" value="fut">Futbol

  
193
  </label>

  
194
  <label>

  
195
   <input type="checkbox" name="pasatiempos[]" value="chess">Ajedrez

  
196
  </label>

  
197
  <label>

  
198
   <input type="checkbox" data-name="pasatiempos[]" value="basket">Basketbol

  
199
  </label>

  
200
 </fieldset>

  
201

  
202
 <!-- Muestra la propiedad madrugador del objeto descargado; como es un

  
203
   array, usa los elementos con name="madrugador" y les pone la propiedad

  
204
   checked en true si su value está en el array; de lo contrario se las pone en

  
205
   false. Como el name no tiene [], el array solo tiene 0 o un elemento. -->

  
206
 <fieldset>

  
207
  <legend>Madrugador</legend>

  
208
  <label><input type="radio" name="madrugador" value="si">Si</label>

  
209
  <label><input type="radio" name="madrugador" value="no">No</label>

  
210
 </fieldset>

  
211

  
212
 <p>

  
213
  <label>

  
214
   Patos

  
215
   <!-- Muestra la propiedad patos del objeto descargado; como es un

  
216
     array, usa los las opciones del select con name="patos[]" y les pone la

  
217
     propiedad selected en true si su value está en el array; de lo contrario se

  
218
     las pone en false.  Los corchetes([]), le indican a PHP que la propiedad es

  
219
     un array que puede llegar a tener 0, 1 o más elementos. -->

  
220
   <select name="patos[]" multiple size="3">

  
221
    <option value="hugo">Hugo</option>

  
222
    <option value="paco">Paco</option>

  
223
    <option value="luis">Luis</option>

  
224
   </select>

  
225
  </label>

  
226
 </p>

  
227
</body>

  
228

  
229
<script type="module">

  
230

  
231
 import { consume } from "./libclienteweb/consume.js"

  
232
 import { recibeJson } from "./libclienteweb/recibeJson.js"

  
233
 import { muestraObjeto } from "./libclienteweb/muestraObjeto.js"

  
234

  
235
 descargaDatos()

  
236

  
237
 async function descargaDatos() {

  
238
  const respuesta = await consume(recibeJson("api/datos.php"))

  
239
  const json = await respuesta.json()

  
240
  muestraObjeto(document, json)

  
241
 }

  
242

  
243
</script>

  
244

  
245
</html>

 


 
 
 
     skip_previous
    
 
     skip_next