Download
1 / 29
290 likes | 423 Vues
JS4. Javascript. Funciones en JavaScript. Qué es una función? Pequeño programa que realiza una o varias tareas determinadas. Conj. de instrucciones englobadas en un mismo proceso: este proceso es una función y tiene un nombre.
E N D
JS4 Javascript Ing. Ana Rodríguez
Funciones en JavaScript • Qué es una función? • Pequeño programa que realiza una o varias tareas determinadas. • Conj. de instrucciones englobadas en un mismo proceso: este proceso es una función y tiene un nombre. • Pueden ser convocados por su nombre desde diferentes lugares. De modo que sirven para evitar la repetición del código. Ing. Ana Rodríguez
Algunas funciones conocidas • parseInt() • parseFloat() • isNanN() Ing. Ana Rodríguez
Sintaxis • Se escribe la palabra function, luego el nombre de la función y (). • Ejemplo: function alarma(){ Window.alert(“ERROR!!!!”) } • Para llamar a la función: • Alarma() Ing. Ana Rodríguez
Ejemplo <html> <body> <script type="text/javascript"> function alarma(){ alert(“ERRORRRR!") } alarma() </script> </body></html> Ing. Ana Rodríguez
Otra forma de llamar ................. <h1>veamos que pasa</h1> <script> alarma() </script> .................. Ing. Ana Rodríguez
Desde un evento <form> <input type=button value="Presione" onclick=alarma()> </form> Ing. Ana Rodríguez
Lugar de la función • Entre etiquetas <script>....</script> • Declarar Antes de ser llamadas • Lo conveniente es declarar las funciones en el head, o en programa aparte prog.js. • NO llamar a la función y luego declararla Ing. Ana Rodríguez
Parámetros • Se usan para enviar valores a la función • Sintaxis: function hola(nombre){ alert(“Hola ”+nombre) } ejemplo variable Ing. Ana Rodríguez
Múltiples parámetros • Se pueden ingresar mas de un parámetro. function alarma(num1,num2){ document.write("producto= "+num1*num2) } • Llamado: v1 = parseInt(prompt("num1","")); v2 = parseInt(prompt("num2","")) alarma(v1,v2) Ing. Ana Rodríguez
Función con Retorno • La función realiza un conjunto de acciones y devuelve un valor. • Se usa la palabra return seguida por el valor que se desea retornar. • Cuando se la convoca se asigna a una variable. Ing. Ana Rodríguez
Ejemplo de retorno ......... function multiplica(num1,num2){ var producto; producto = num1*num2; return producto } ....... v1 = parseInt(prompt(“Ingrese un Número","")); v2 = parseInt(prompt(“Otro número","")); v3 = multiplica(v1,v2); document.write(v3) Ing. Ana Rodríguez
Múltiples retornos • Dentro de una función se pueden usar mas de un return • Lógicamente sólo habrá un valor que cumple con las condiciones de la función y ese es el valor que retornará. Ing. Ana Rodríguez
Ejemplo de Múltiples Retornos function mayor(num1,num2){ if (num1>num2){ return num1; }else{ return num2; } } a=parseInt(prompt("ingrese un num:","")); b=parseInt(prompt("ingrese otro num:","")); es_mayor=mayor(a,b); alert(es_mayor); Ing. Ana Rodríguez
Bonus: trabajamos con imagenes Ing. Ana Rodríguez
Ejemplos función, for e img <script type="text/javascript"> function cambia(){ if (document.images){ document.write('<table border=1><tr>'); for (i=1;i<6;i++) document.write('<td><img src="img'+i+'.jpg" width="200" heigth="75" name="kkk"></td></tr>') } document.write('</table>') } </script> Ing. Ana Rodríguez
------------------------------------ <body bgcolor=red text=white> <img src="img1.jpg" width="100" heigth="75" name="kkk"><br> <input type="button" onClick="cambia()" name="boton" value="Fotos"> </body></html> Ing. Ana Rodríguez
Ejemplocon while function cambia(){ if (document.images){ document.write('<table border=1><tr>'); i=1; j=0; while (i<5){document.write('<td><img src="img'+i+'.jpg" width="300" heigth="75" name="kkk"></td>'); i +=1; j +=1; if (j==2){ document.write('</tr>'); j=0;} }document.write('</table>') }} Ing. Ana Rodríguez
Ejemplo <script> actual = 1;contador = 6; function cambia(cual){ if (document.images){ actual = actual + cual; if (actual > contador) {actual = 1} if (actual < 0) {actual = contador;} document.kkk.src = "img"+actual+".jpg" } } </script> Ing. Ana Rodríguez
Forma facil de convocar imagenes document.kkk.src = "img"+i+".jpg"; <img src="img1.jpg" width="200" heigth="75" name="kkk"> Ing. Ana Rodríguez
Ejemplo function cambia(a){ i=i+a; document.kkk.src = "img"+i+".jpg"; } Ing. Ana Rodríguez
Album <script type="text/javascript"> foto = 1; function cambia(mas, total){ foto = foto + mas; if (foto > total){ foto = 1} if (foto < 1){ foto = total;} document.kkk.src = "img"+foto+".jpg" } </script> Ing. Ana Rodríguez
<body text=white> <center><h1>Fotos</h1></center> <form> <center> <img src="img1.jpg" width="600" heigth="75" name="kkk"><br> <input type=button name="_foto" value="<<--" onClick="cambia(-1,6)"> <input type=button name="_foto" value="-->>" onClick="cambia(1,6)"> </center> </form> </body> </html> Ing. Ana Rodríguez
Ext.js • Funciones probadas El archivo externo debe tener extensión .js • Dentro de la pagina HTML escribimos • <script type="text/javascript“ src="EXT.JS"> </script> • Ejemplo
HTML <html><head> <SCRIPT SRC="ext.js“ TYPE="text/javascript"> </SCRIPT> </head><body> <FORM> <input type=button value="presione" onclick="alarma('Esto es una prueba')"> </FORM> </body></html>
Ext.js //archivo externo function alarma(mens) { alert(mens) }
Album de fotos • Declarar las variables globales en el .js • Ver ejemplo • Particularidades: • onClick="cambia(-1,6)" • Src=“../img1.jpg”
