-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfunciones.html
279 lines (198 loc) · 11.8 KB
/
funciones.html
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
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<!doctype html>
<head>
<meta charset='utf-8' />
<link rel="stylesheet" href='w3.css' />
<link rel="stylesheet" href='local.css' />
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<script src='estructura_pagina.js'></script>
<script>
var titulo = 'Funciones';
var id_pagina = 'funciones';
pre_pagina(titulo, id_pagina);
</script>
<h1>Funciones</h1>
<p>En muchas ocasiones la misma porción de código es necesaria ejecutarla en varias partes. Por ejemplo, tenemos varias páginas web y todas tienen la misma barra de navegación. Podríamos copiar y pegar el código de la barra de navegación en cada página. Pero si hacemos una modificación en la barra de navegación tendríamos que ir página por página añadiendo dicha modificación.</p>
<p>Una forma muy cómoda de trabajar con partes de código que se van a repetir mucho son las funciones. La sintaxis de una función es la siguiente:</p>
<code><pre>
<b>function</b> nombre_de_la_función(argumento1, argumento2, argumento3, ...) {
// Código a ejecutar
return valor_a_devolver;
}
</pre></code>
<p>Por ejemplo, supongamos una función que escribe un texto:</p>
<code><pre>
function texto() {
document.write("Este es un texto largisimo");
document.write("Más texto");
}
</pre></code>
<p>Para ejecutarlo, simplemente llamaríamos a la función por su nombre:</p>
<code><pre>
texto();
</pre></code>
<p>Es decir, cade vez que se escriba "texto()", será como si se sustituyera por el código de la función.</p>
<p>Por ejemplo:</p>
<code id='funciones1.html'></code>
<script>insertar_codigo('src/funciones/funciones1.html', 'funciones1.html');</script>
<p>Este código es equivalente a:</p>
<code id='funciones2.html'></code>
<script>insertar_codigo('src/funciones/funciones2.html', 'funciones2.html');</script>
<p>En el ejemplo anterior se puede ver la ventaja de las funciones, si modifico la función se modifica la salida de la función en todos los puntos en donde se la invoque.</p>
<h2>onclick() y document.getElementById()</h2>
<p>Se puede añadir la etiqueta onclick a las etiquetas de html. De esta forma cuando se haga click en alguna de ellas, se realizará una acción. Por ejemplo:</p>
<code id='onclick1.html'></code>
<script>insertar_codigo('src/funciones/onclick1.html', 'onclick1.html');</script>
<div class="w3-panel w3-leftbar w3-sand w3-serif">Existe otra forma de capturar los eventos onclick, escuchando los eventos. De esta forma se pueden asignar varias funciones al mismo evento. Esta suele ser la forma de capturar eventos en la web. Se deja como ejercicio buscar cuál es este procedimiento y cuáles son los eventos que se pueden escuchar.</div>
<p>Las páginas web pueden tener un alto dinamismo usando el método document.getElementById(). ¿Cómo funciona este método? Lo que se debe hacer es poner un identificador (id) a la etiqueta de html a la que se quiera acceder. Por ejemplo:</p>
<code><pre>
<div id='Pulsador'>Botón </div>
<script>
var boton = document.getElementById("Pulsador");
</script>
</pre></code>
<p>Una vez que se obtiene el elemento se puede manipular. Por ejemplo, con el atributo innerHTML se cambia el html que contiene una etiqueta:</p>
<code id='getelement1.html'></code>
<script>insertar_codigo('src/funciones/getelement1.html', 'getelement1.html');</script>
<p>Si se mezclan onclick y document.getElementById():</p>
<code id='getelement2.html'></code>
<script>insertar_codigo('src/funciones/getelement2.html', 'getelement2.html');</script>
<p>A parte de innerHTML se pueden cambiar o consultar más propiedades de las etiquetas HTML, pero por cuestión de tiempo sólo se verán las siguientes:</p>
<table>
<tr>
<td>innerHTML</td>
<td>Cambia o consulta el contenido de una etiqueta</td>
</tr>
<tr>
<td>style</td>
<td>Cambia o consulta las propiedades CSS de la etiqueta:
<code><pre>
var x = document.getElementById("Pulsador");
x.style.color = 'white';
x.style.backgroundColor = "blue";
x.style.padding = "10px";
</pre></code>
<p>Como se puede apreciar las propiedades de CSS que tienen guiones, como por ejemplo "background-color", se debe eliminar el guión y poner la siguiente letra en mayúscula "backgroundColor".</p>
<p>La lista completa de elementos de estilo que se pueden consultar en: <a href='https://www.w3schools.com/jsref/dom_obj_style.asp'>https://www.w3schools.com/jsref/dom_obj_style.asp</a></p>
</td>
<tr>
<td>value</td>
<td>Consulta o cambia el contenido de un campo de texto:
<code id='getelement3.html'></code>
<script>insertar_codigo('src/funciones/getelement3.html', 'getelement3.html');</script>
</td>
</tr>
</tr>
</table>
<h2>Funciones con argumentos</h2>
<p>El ejemplo anterior era una función que no admitía argumentos. Se le pueden pasar argumentos a la función de forma que estos son pasados como variables que la función puede manejar. Por ejemplo:</p>
<code><pre>
function suma(a,b) {
document.write(a+b);
}
</pre></code>
<p>A la función anterior se le van a pasar dos argumentos a y b. La función escribirá el resultado de sumar ambos valores. Es decir, cuando se escriba:</p>
<code><pre>
suma(2, 3);
</pre></code>
<p>Esto será equivalente a:</p>
<code><pre>
{
var a = 2;
var b = 3;
document.write(a+b);
}
</pre></code>
<p>Se pueden buscar ejemplos más elaborados, como el siguiente que muestra las tablas de multiplicar:</p>
<code id='funciones3.html'></code>
<script>insertar_codigo('src/funciones/funciones3.html', 'funciones3.html');</script>
<p>En el ejemplo anterior no es necesario el uso de funciones, per hacen que ciertas partes del código resulten más legibles.</p>
<h2>Funciones que devuelven valores</h2>
<p>Para la función devuelva un valor se usa return. Veamos el siguiente ejemplo:</p>
<code><pre>
// Calcula el precio más un 21 % de IVA
function iva(precio) {
return precio*1.21;
}
</pre></code>
<p>Esta función luego se puede llamar donde sea necesaria y recoger el valor devuelto. Por ejemplo:</p>
<code><pre>
// Calcula el precio más un 21 % de IVA
function iva(precio) {
return precio*1.21;
}
var a_pagar = 0;
a_pagar += iva(100);
a_pagar += iva(20);
document.write("El total a pagar es: " + a_pagar);
</pre></code>
<p>En el siguiente ejemplo, la función calcula la suma de los números de a a b:</p>
<code id='funciones4.html'></code>
<script>insertar_codigo('src/funciones/funciones4.html', 'funciones4.html');</script>
<p>Una función puede tener varios return, pero cuando se llegue a ejecutar el primero, el programa sale de la función y no continua evaluándola:</p>
<code id='funciones5.html'></code>
<script>insertar_codigo('src/funciones/funciones5.html', 'funciones5.html');</script>
<p>return se puede usar dentro de la estructura if - else para devolver diferentes respuestas:</p>
<code id='funciones6.html'></code>
<script>insertar_codigo('src/funciones/funciones6.html', 'funciones6.html');</script>
<div class='w3-panel w3-leftbar w3-sand w3-serif'><p>Se puede usar return sin argumentos para salir de una función que no devuelve valores. Por ejemplo:</p>
<code id='funciones7.html'></code>
<script>insertar_codigo('src/funciones/funciones7.html', 'funciones7.html');</script>
</div>
<h1>Visibilidad de las variables</h1>
<p>Las variables que se definen dentro de una función se destruyen al salir de ella. Veamos el siguiente ejemplo:</p>
<code id='funciones8.html'></code>
<script>insertar_codigo('src/funciones/funciones8.html', 'funciones8.html');</script>
<p>En el ejemplo se define b dentro de la función. Pero al salir de la función las variables que se han definido dentro de la función se destruyen. Por eso la última línea "document.write(b);" no llega a ejecutarse y el intérprete genera un error diciendo que b no está definida.</p>
<p>Pero qué sucede con una variable que ha sido definida antes de entrar en la función:</p>
<code id='funciones9.html'></code>
<script>insertar_codigo('src/funciones/funciones9.html', 'funciones9.html');</script>
<p>Como se puede apreciar, la variable a está definida antes de entrar en la función. La función puede tomar el valor de a y cambiarlo. Al final de la ejecución el programa nos devuelve que a vale 15.</p>
<p>Las variables definidas fuera de una función y que se van a modificar dentro de una función se denominan <strong>variables globales</strong>. Se recomienda no usarlas o usarlas lo menos que se pueda, pues son fuente de errores y complican la lectura de los programas. Lamentablemente en Javascript hay que usarlas en muchas ocasiones.</p>
<h1>Funciones como variables</h1>
<p>Una característica útil es la de poder almacenar a las funciones como si fueran variables, e incluso pasarlas como argumentos de funciones:</p>
<code id='funciones10.html'></code>
<script>insertar_codigo('src/funciones/funciones10.html', 'funciones10.html');</script>
<p>Como se puede ver se asigna a la variable iva una función (esta función no tiene nombre, por lo que se denomina <strong>función sin nombre</strong>). Luego se asigna iva a la variable b. Por lo que tanto la función iva como la función b hacen lo mismo.</p>
<p>Puesto que actúan como variables se pueden pasar como argumentos de otras funciones. Por ejemplo:</p>
<code id='funciones11.html'></code>
<script>insertar_codigo('src/funciones/funciones11.html', 'funciones11.html');</script>
<p>Se puede, incluso, definir la función cuando se pasa como argumento de otra función:</p>
<code id='funciones12.html'></code>
<script>insertar_codigo('src/funciones/funciones12.html', 'funciones12.html');</script>
<p>Otra forma de definir funciones como variables es con la siguiente sintaxis:</p>
<code>(argumentos) => {código de la función}</code>
<p>Por ejemplo, se ha definido la función calcularIVA en el siguiente ejemplo:</p>
<code id='funciones13.html'></code>
<script>insertar_codigo('src/funciones/funciones13.html', 'funciones13.html');</script>
<p>Las funciones como variables se suelen usar mucho para tratar eventos o definir objetos en Javascript.</p>
<h1>Verificar formularios</h1>
<p>En muchas ocasiones, antes de enviar un formulario, hay que verificar que sus campos sean correctos. Para ello hay que especificar la función que se va a ejecutar en el momento de pulsar el botón de enviar el formulario. Dicha función debe devolver true o false en función de si el formulario es válido o no. Esto se especifica en el campo "onsubmit" del formulario:</p>
<code>
<form action="servlet" <strong>onsubmit="return validar()"</strong> method="post"><br>
Texto: <input type="text" name="texto" id="texto"><br>
<input type="submit" value="Enviar"><br>
</form>
</code>
<p>Por ejemplo:</p>
<code id='funciones14.html'></code>
<script>insertar_codigo('src/funciones/funciones14.html', 'funciones14.html');</script>
<p>En este ejemplo se están leyendo los valores del formulario usando "getElementById". Los formularios también pueden ser consultados usando otra sintaxis. Se deja como ejercicio al lector buscar en la red la otra forma de consultar los valores del formulario.</p>
<h1>Añadir o quitar clases de un elemento del DOM</h1>
<p>Antes se ha visto que se puede cambiar el estilo de un elemento de la página, obteniendo dicho elemento con "getElementById" y después usando el atributo "style". También se pueden añadir o quitar clases CSS de un objeto con el atributo "classList.add('nombre del la clase')" y "classList.remove('nombre de la clase')".</p>
<p>En el siguiente ejemplo se puede ver como se añade una clase y quita otra de un elemento del CSS.</p>
<code id=funciones15.html></code>
<script>insertar_codigo('src/funciones/funciones15.html', 'funciones15.html');</script>
<script>
post_pagina(titulo, id_pagina);
</script>
</body>
</html>