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 type="module" src="js/lib/manejaErrores.js"></script>

  
11

  
12
</head>

  
13

  
14
<body>

  
15

  
16
 <h1>Muestra datos</h1>

  
17

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

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

  
20

  
21
 <p>

  
22
  <label>

  
23
   Nombre

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

  
25
    value del output. -->

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

  
27
  </label>

  
28
 </p>

  
29

  
30
 <p>

  
31
  <label>

  
32
   Apellido

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

  
34
    value del input. -->

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

  
36
  </label>

  
37
 </p>

  
38

  
39
 <p>

  
40
  <label>

  
41
   Género

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

  
43
    value del select. -->

  
44
   <select name="genero">

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

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

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

  
48
   </select>

  
49
  </label>

  
50
 </p>

  
51

  
52
 <p>

  
53
  <label>

  
54
   Géneración

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

  
56
    propiedad value del select. -->

  
57
   <select name="generacion">

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

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

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

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

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

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

  
64
   </select>

  
65
  </label>

  
66
 </p>

  
67

  
68
 <p>

  
69
  <label>

  
70
   Edad

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

  
72
    valueAsNumber del input. -->

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

  
74
  </label>

  
75
 </p>

  
76

  
77
 <p>

  
78
  <label>

  
79
   Número de la suerte

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

  
81
    value del output. -->

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

  
83
  </label>

  
84
 </p>

  
85

  
86
 <p>

  
87
  <label>

  
88
   Avance

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

  
90
    value del progress. -->

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

  
92
  </label>

  
93
 </p>

  
94

  
95
 <p>

  
96
  <label>

  
97
   Capacidad

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

  
99
    propiedad value del meter. -->

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

  
101
  </label>

  
102
 </p>

  
103

  
104
 <p>

  
105
  <label>

  
106
   Temperatura

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

  
108
    propiedad valueAsNumber del meter. -->

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

  
110
  </label>

  
111
 </p>

  
112

  
113
 <p>

  
114
  <label>

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

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

  
117
    type="checkbox". -->

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

  
119
   Aprobado

  
120
  </label>

  
121
 </p>

  
122

  
123
 <p>

  
124
  <label>

  
125
   Gracioso

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

  
127
    value del output. -->

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

  
129
  </label>

  
130
 </p>

  
131

  
132
 <p>

  
133
  <label>

  
134
   Emplacado

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

  
136
    propiedad value del select. -->

  
137
   <select name="emplacado">

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

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

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

  
141
   </select>

  
142
  </label>

  
143
 </p>

  
144

  
145
 <label>Dirección</label>

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

  
147
  textContent del pre. -->

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

  
149

  
150
 <p>

  
151
  <label>

  
152
   Encabezado

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

  
154
    propiedad innerHTML del span. -->

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

  
156
  </label>

  
157
 </p>

  
158

  
159
 <p>

  
160
  <label>

  
161
   Nacimiento

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

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

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

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

  
166
  </label>

  
167
 </p>

  
168

  
169
 <figure>

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

  
171
   src del img. -->

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

  
173
  <figcaption>Imagen 1</figcaption>

  
174
 </figure>

  
175

  
176
 <figure>

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

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

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

  
180
  <figcaption>Imagen 2</figcaption>

  
181
 </figure>

  
182

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

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

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

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

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

  
188
 <fieldset>

  
189
  <legend>Pasatiempos</legend>

  
190
  <label>

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

  
192
  </label>

  
193
  <label>

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

  
195
  </label>

  
196
  <label>

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

  
198
  </label>

  
199
 </fieldset>

  
200

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

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

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

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

  
205
 <fieldset>

  
206
  <legend>Madrugador</legend>

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

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

  
209
 </fieldset>

  
210

  
211
 <p>

  
212
  <label>

  
213
   Patos

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

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

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

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

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

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

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

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

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

  
223
   </select>

  
224
  </label>

  
225
 </p>

  
226
</body>

  
227

  
228
<script type="module">

  
229

  
230
 import { consume } from "./js/lib/consume.js"

  
231
 import { recibeJson } from "./js/lib/recibeJson.js"

  
232
 import { muestraObjeto } from "./js/lib/muestraObjeto.js"

  
233

  
234
 descargaDatos()

  
235

  
236
 async function descargaDatos() {

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

  
238
  const json = await respuesta.json()

  
239
  muestraObjeto(document, json)

  
240
 }

  
241

  
242
</script>

  
243

  
244
</html>

 


 
 
 
     skip_previous
    
 
     skip_next