Las funciones son bloques de cédigo qué tienen la caracteristica de ser llamados o invocados. Sintaxis La siguiente seria una sintaxis de una funcién qué por ejemplo contiene una alerta Si levantamos esto en nuestro navegador, basicamente no obtendremos nada, porque esta funcién no ha sido invocada. Para invocar debemos hacer lo siguiente, Tuas De esta manera, estamos llamando a nuestro funcién. Si queremos hacer un llamado dos veces, haremos lo siguiente,El resultado, seré que la siguiente alerta aparecerd dos veces, Esta pagina dice Por ejemplo, en el siguiente caso hemos generado una funcién qué tomar parémetros, es decir pasamos a esta funcién determinados datos, oan En este caso vernos cémo return nos permite retornar un valor, y de esta forma también podemos ir variando los datos que pasamos en la misma funcién. Es decir una misma funcién nos sirve para todo. Por ejemplo, podriamos volver a utlizarla, de la sigulente forma,SL) innerHTHL = En el caso anterior, utilizamos la misma funcién, pero obtenemos dos resultados distintos Es decir, function ejemplo(parametrol, parametro2, parametro3 { Bt) hace a funcion Ambito de las variables Aigo importante 2 tener en cuenta, es qué las variables pueden ser locales 0 globales. Si por ejemplo yo hago esto,El resultado que se verd en mi navegador, serd un error en la consola (f12) como el siguiente, encsterers sesultado 42 Esto es que basicamente la variable resultado esta dentro del ambito de miOperacién() y no puedo utilizarla por fuera. Eventos Los eventos son algo qué les pas@ a los elementos del HTML, Por ejemplo, El resultado en el navegador seré el siguiente, Hace click De esta forma, hemos dicho que al hacerle clic a ese botén dispararé una alerta, ‘Tenemos diferentes tipos de eventos, Por otro lado, también podemos usar eventos relacionados con el teclado, por caso, generaremos una caja de texto (input) y haremos lo siguiente,‘También a los eventos se los puede llamar directamente desde el cédigo, document. En este caso, estamos esperando a una funcién alerta(), erate air etas aa El resultado serd el siguiente,Haceme click Por otro lado, ahora toma especial interés lo antes visto, porque podemos pasar pardmetros y por ejemplo hacer lo siguiente, El resultado al hacerle click al botén seré el siguiente, Ana Lo interesante, es qué podemos reutilizar esa misma funcién para diferentes botones y pasarle a la misma distintos datos segiin lo necesitemos, er Pia) Breu) Reta) El cédigo anterior, sigue intacto porque la funcién es una sola, no la hemos cambiado, el resultado seré que por ejemplo al botén de Juan al hacerle click nos otorga el siguiente resultado,Ana) Pedro Juan || Maria También podemos hacer Io siguiente, Cor Pedro Juan CLs) No se preocupen, pasaremos a explicar lo que hemos realizado, vamios por parte. Primero generamos cuatro(4) botones. Como seria muy tedioso en caso de uan interfaz donde estos vayan variando, modificar el HTML, es decir no queremos trabajar desde los botones , lo haremos desde el cédigo. Ana Pedr Bre else] En JS, estos botones son partes del DOM , y como ponerle a cada uno un ID 0 CLASS es poco practico si es que estos botones serén mas menos de forma dinémica, hemos utilizado unaforma de acceso no utilizada atin qué es document, getElementsByTagName, es decir tomamos a los elementos por su nombre dentro del HTML, La pregunta es por que los guardamos en una variable?. Claro el tema es que en realidad esta variable guarda un arreglo (los botones o aquellos elementos llamados button). Lo cual no me sirve. Es decir me sirve porque simplifica la forma de acceso pero ahora necesito individualizar los. Es asi qué quiero que al hacerle clic a cada uno, estos hagan individualmente algo (aunque este algo sea lo mismo). De esta forma, surge algo ya visto qué es el for. El bucle for me ayudard a recorrer estos botones, y ast poder individualizar los. He aqui la siguiente parte del cédigo, Ahora que hemos entendido esto, vernos que al hacerle clic a cada botén el resultado seré el siguiente, Ana Pedro Juan) Maria No estd mal. Pero la verdad, no queremos esto, La idea es que a su vez cada botén pase el valor de su contenido. Lo vamos a modificar un poco para lograr nuestro cometido,Tees ssa LT Geaasyt Vamos a explicar esta dltima parte. La idea es qué pasemos el texto contenido en cada botén. Por esa razén Io hacemos con innerHTML qué de esta manera trabaja obteniendo el texto del boton. Cémo Io hacemos dentro del for, el innerHTML seré diferente segun sobre qué botén hagamos clic. Por otro lado, debemos pasar esto como parémetro. Por lo tanto, lo hacemos con la siguiente sintaxis, eae Por eso, si hacemos clic @ Juan, el resultado seré, Ana Pedro | Juan