-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathe7-bucles.html
More file actions
234 lines (226 loc) · 12.8 KB
/
e7-bucles.html
File metadata and controls
234 lines (226 loc) · 12.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html lang="en">
<head>
<title>Javascript desde 0 con Ejercicios</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="p-5 bg-dark text-white text-center">
<h1>Bootcamp QA: Bucles en Javascript</h1>
<p><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Looping_code">Bucles en
Javascript</a></p>
</div>
<br>
<!-- EJEMPLOS --------------------------------------------------------------------------------------------------------->
<div id="ejemplosbucles" class="container mt-5">
<h3>EJEMPLOS BuCLES</h3>
<div id="ejemplo1bucles">
<h3>Ejemplo 1: Repetir la misma frase 100 veces</h3>
<button type="button" class="btn btn-success" onclick="mostrarFrase()">Mostrar 100 veces la misma
frase</button>
<p id="e1solucion"></p>
</div>
<div id="ejemplo2Bucles">
<h3>Ejemplo 2: Mostrar la tabla del multiplicar</h3>
<div class="mb-3">
<input type="number" id="e2tablamultiplicar"
placeholder="Introduce el numero del que quieres ver la tabla" required min="0"
class="form-control">
<p class="valid-feedback">Correcto</p>
<p class="invalid-feedback">El campo es obligatorio y debetener un valor mayor a 0</p>
</div>
<button type="button" class="btn btn-success" onclick="mostrarTabla()">Mostrar tabla</button>
<p id="e2solucion"></p>
</div>
</div>
<br />
<hr />
<!-- EJERCICIOS --------------------------------------------------------------------------------------------------------->
<div id="ejerciciosBucles" class="container mt-5">
<h2>EJERCICIOS BUCLES</h2>
<!-- EJERCICIO 1 ---------------->
<div id="ejercicio1Bucles">
<h4>Ejercicio 1: Sumar números</h4>
<h6>1. Muestra la suma de todos los numeros desde el 0 hasta el introducido por el usuario.
a) Agrega un campo para introducir un numero mayor que 0.
b) Agrega un boton que al pulsarlo muestre la suma de todos los numeros desde el 1 hasta el numero
indicado
</h6>
<form id="eje1BuclesForm" class="was-validated">
<div class="mb-3">
<label for="eje1NumeroFinal">Introduce el número Final para realizar la suma</label>
<input type="number" id="eje1NumeroFinal" required min="1" class="form-control"
placeholder="Introduce el numero final" style="max-width: 300px;">
<p class="valid-feedback">El dato es correcto</p>
<p class="invalid-feedback">El dato es obligatorio y tiene que ser mayor de cero</p>
</div>
</form>
<button type="button" class="btn btn-success" onclick="sumarNumeros('eje1NumeroFinal','eje1Resultado')">
Sumar números
</button>
<p id="eje1Resultado"></p>
</div>
<br />
<!-- EJERCICIO 2 ---------------->
<div id="ejercicio2Bucles">
<h4>Ejercicio 2: Montrar N veces una palabra</h4>
<h6>2. Muestra una palabra el numero de veces que indique el usuario.
a. Agrega un campo para introducir una palabra. Este campo no puede estar vacio.
A continuacion agrega un campo para introducir el numero de veces que debe de aparecer la palabra.
Debe ser mayor a 0.
b. Agrega un boton que al pulsarlo muestre la palabra en mayusculas el numero de veces indicado por el
usuario.
</h6>
<form id="eje2BuclesForm" class="was-validated">
<div class="mb-3">
<label for="eje2PalabraARepetir">Palabra a Repetir</label>
<input type="text" id="eje2PalabraARepetir" required class="form-control"
placeholder="Introduce la palabra a repetir" style="max-width: 300px;">
<p class="valid-feedback">El dato es correcto</p>
<p class="invalid-feedback">El dato es obligatorio</p>
</div>
<div class="mb-3">
<label for="eje2Repeticiones">Indica las repeticiones para esta palabra</label>
<input type="number" id="eje2Repeticiones" required class="form-control"
placeholder="Introduce el número de repeticiones" min="1" style="max-width: 300px;">
<p class="valid-feedback">El dato es correcto</p>
<p class="invalid-feedback">El dato es obligatorio y debe ser mayor que cero</p>
</div>
</form>
<button type="button" class="btn btn-success"
onclick="mostrarPalabraNVeces('eje2PalabraARepetir', 'eje2Repeticiones', 'eje2Resultado')">
Mostrar Palabra
</button>
<p id="eje2Resultado"></p>
</div>
<br />
<!-- EJERCICIO 3 ---------------->
<div id="ejercicio3Bucles">
<h4>Ejercicio 3: Muestra FLOR N Veces</h4>
<h6>3. Muestra AMAPOLA o MARGARITA el numero de veces que indique el usuario, segun la palabra introducida:
a. Agrega un campo para introducir una palabra. Este campo no puede estar vacio.
A continuacion agrega un campo para introducir el numero de veces que debe de aparecer la palabra.
Debe ser mayor a 0.
b. Agrega un boton que al pulsarlo muestre el numero de veces indicado, la palabra AMAPOLA,
si la palabra introducida por el usuario empieza por VOCAL,
que muestre la palabra MARGARITA en cualquier otro caso.
</h6>
<form id="eje3BuclesForm" class="was-validated">
<div class="mb-3">
<label for="eje3Palabra">Introduce una palabra</label>
<input type="text" id="eje3Palabra" required class="form-control"
placeholder="Introduce una palabra" pattern="[a-zA-Z\s]+" style="max-width: 300px;">
<p class="valid-feedback">El dato es correcto</p>
<p class="invalid-feedback">El dato es obligatorio</p>
</div>
<div class="mb-3">
<label for="eje3Repeticiones">Indica las repeticiones para esta palabra</label>
<input type="number" id="eje3Repeticiones" required class="form-control"
placeholder="Introduce el número de repeticiones" min="1" style="max-width: 300px;">
<p class="valid-feedback">El dato es correcto</p>
<p class="invalid-feedback">El dato es obligatorio y debe ser mayor que cero</p>
</div>
<button type="button" class="btn btn-success"
onclick="mostrarFloresNVeces('eje3Palabra', 'eje3Repeticiones', 'eje3Resultado')">
Mostrar Palabra
</button>
</form>
<p id="eje3Resultado"></p>
</div>
<br />
<!-- EJERCICIO 4 ------------------>
<div id="ejercicio4Bucles">
<h4>Ejercicio 4: Listado de números pares</h4>
<h6>4. Muestra todos los numeros pares desde el 0 hasta el indicado por el usuario.
a. Agrega un campo para introducir un numero. Este campo no puede estar vacio.
b. Agrega un boton que al pulsarlo muestre todos los numeros pares, desde el 0 hasta el indicado.
Nota: Un numero es par si el resto de la division entre 2 es 0.
Para saber el resto de una division, puedes usar el operador %.
</h6>
<form class="was-validated">
<div class="mb-3">
<label for="eje4NumeroFinal">Introduce el número final del listado de pares</label>
<input type="number" id="eje4NumeroFinal" required class="form-control"
placeholder="Introduce un número" min="0" style="max-width: 200px;">
<p class="valid-feedback">El dato es correcto</p>
<p class="invalid-feedback">El dato es obligatorio y debe ser mayor o igual que cero</p>
</div>
<button type="button" class="btn btn-success" onclick="mostarListadoPares('eje4NumeroFinal','eje4Resultado')">
Muestra listado
</button>
</form>
<p id="eje4Resultado"></p>
</div>
<br />
<div id="ejercicio5Bucles">
<h4>Ejercicio 5: Listado de nombres en mayúsculas</h4>
<h6>5. Muestra todos los nombres de una lista en mayusculas.
a. Agrega un nuevo campo para agregar nombres a una lista. Debe ser obligatorio y tener minimo 3
caracteres.
b. Agrega un boton que al pulsarlo agrege el nombre introducido en el formulario a una lista y la
muestre por pantalla.
c. Agrega un boton que al pulsarlo muestre la lista completa en mayusculas.
d. Agrega un nuevo boton que alombres de la lista que empiecen por la letra A. pulsarlo muestre los n
</h6>
<form class="was-validated">
<div class="mb-3">
<label for="eje5Nombre">Introduce un nombre para la lista</label>
<input type="text" id="eje5Nombre" required minlength="3" pattern="a-zA-Z" class="form-control"
placeholder="Introduce un nombre" style="max-width: 200px;">
<p class="valid-feedback">El dato es correcto</p>
<p class="invalid-feedback">El dato es obligatorio y debe ser de 3 caracteres como mínimo</p>
</div>
<button type="button" class="btn btn-info" onclick="agregarNombreListado('eje5Nombre','eje5Resultado')">
Añadir Nombre
</button>
<button type="button" class="btn btn-success" onclick="mostrarListadoEnMayusculas('eje5Resultado')">
Listado Mayusculas
</button>
<button type="button" class="btn btn-primary" onclick="mostrarListadoLetraA('eje5Resultado')">
Listado Nombres que empiezan con "A"
</button>
</form>
<p id="eje5Resultado"></p>
</div>
<br />
<div id="ejercicio6Bucles">
<h4>Ejercicio 6: Sumar todos las notas</h4>
<h6>6.Crea un programa para sumar todos las notas de una lista.
a. Agrega un nuevo campo para agregar notas a una lista. Este campo debe ser numerico, y acepta numeros
del 1 al 10 con decimales.
b. Agrega un boton agregar, que al pulsarlo agrege la nota introducida a la lista y la muestre.
c. Agrega un boton que al pulsarlo muestre la suma total de todos los numeros de la lista, o 0 si esta
la lista vacia.
d. Agrega un boton que muestre la nota media de la lista.
e. Agrega un boton para indicar si el usuario ha aprobado o no. El usuario esta aprobado si su nota
media es igual o mayor a 5.
</h6>
<form class="was-validated">
<div class="mb-3">
<label for="eje6Nota">Introduce una nota</label>
<input type="text" id="eje6Nota" required min="0" max="10" step="0.1" class="form-control"
placeholder="Introduce una nota" style="max-width: 200px;">
<p class="valid-feedback">El dato es correcto</p>
<p class="invalid-feedback">El dato es obligatorio y debe ser entre 0 y 10</p>
</div>
<button type="button" class="btn btn-primary" onclick="agregarNotaLista('eje6Nota','eje6Resultado')">
Añadir Nota
</button>
<button type="button" class="btn btn-info" onclick="sumaTotalLista('eje6Resultado')">
Suma Total
</button>
<button type="button" class="btn btn-warning" onclick="notaMediaLista('eje6Resultado')">
Nota Media
</button>
<button type="button" class="btn btn-success" onclick="hasAprobado('eje6Resultado')">
Aprobado?
</button>
</form>
<p id="eje6Resultado"></p>
</div>
</div>
<script src="js/e7-bucles.js"></script>
</body>
</html>