Para crear una función en JavaScript, después de la palabra reservada function escribiremos el nombre de la misma junto con sus parámetros y el resto del código entre llaves, mientras que con return devolvemos el resultado, tal y como puedes ver en el siguiente ejemplo:
function sumar( num1, num2 )
{
return num1 + num2;
}
Relacionado: [ Procedimentos y Funciones ] - [ Funciones en pseudocódigo ]
JavaScript tiene algunas funciones predefinidas, como es el caso de alert() (la cual hemos visto anteriormente) con la que podremos mostrar un mensaje al usuario.
alert("Hola mundo\nEsta es otra línea");
Si deseamos mostrar el texto en varias líneas escribiremos la secuencia de control \n.
Si la usamos con un array se mostrarán todos los valores del mismo:
var aDias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
alert( aDias );
Durante el presente curso usaremos tanto la función alert() como el método write() del objeto Document() (que explicaremos a fondo más adelante) para mostrar mensajes y resultados.
Otra función interna es confirm(), con la que podemos mostrar un cuadro de diálogo para preguntar al usuario alguna cuestión cuyo resultado será un valor lógico true o false, que quedará guardado en la variable que indiquemos (aunque también lo podemos obtener directamente en una sentencia condicional).
var ok = confirm("¿Enviar los datos?");
if( ok == true )
{
...
}
else
{
...
}
Otra de las funciones internas de JavaScript es prompt(), con la que podemos pedir un dato al usuario.
En el primer parámetro debemos poner el texto que deseamos que aparezca en el cuadro de diálogo, y en el segundo un valor por defecto (opcional).
var valor = prompt("Dime la contraseña", "");
if( valor == "33PPXX" )
{
alert("La contraseña es correcta");
}
else
{
alert("Contraseña no válida: [" + valor + "]");
}
Según el ejemplo, el valor introducido por el usuario se guardará en la variable 'valor': si se pulsa la tecla Esc tendrá valor null, y si no se introduce nada se devuelve una cadena vacía (representada con dos comillas seguidas, sin espacios).
Si deseamos que se ejecute una función en JavaScript al cargarse la página web, la escribiremos en el atributo onload de la etiqueta HTML body. A continuación te mostramos un ejemplo:
<html>
<head>
<title>Curso de JavaScript</title>
</head>
<body onload="alert('Hola');">
<p>Tutorial de JavaScript</p>
</body>
</html>
Observa que ponemos la función alert() entre comillas dobles y el texto dentro de la función entre comillas simples: esto es así porque como hemos puesto el contenido principal entre la comilla doble de apertura y la de cierre, las cadenas de texto entre ellas no pueden ponerse con el mismo tipo de comillas (el código no quedaría bien cerrado).
También se hubiese podido poner el contenido principal entre comillas simples, y la cadena interior entre comillas dobles.
Aquí tienes otro ejemplo, en el que se pide la contraseña al usuario y se muestra si es válida (en caso de ser '33PPXX') o no:
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
function prueba1()
{
var valor = prompt("Dime la contraseña", "");
if( valor == "33PPXX" ) {
alert("La contraseña es correcta");
} else {
alert("Contraseña no válida: [" + valor + "]");
}
}
</script>
</head>
<body onload="prueba1();">
<p>Tutorial de JavaScript</p>
</body>
</html>
En onload se pueden poner varias sentencias JavaScript, separándolas con punto y coma.
Vea también: [ Eventos en JavaScript ]
La función eval() de JavaScript es usada para evaluar una expresión como otro código fuente. Por ejemplo:
var n1 = eval("10 * 10");
alert(n1); // Devuelve 100
var n2 = eval( "n1 + (40 * 2)");
alert( n2 ); // Devuelve 180
// Al procesarse esta línea se mostrará el alert() con el texto y el resultado de la suma:
eval( alert("La suma de 2 y 3 es igual a " + (2+3)) );
// Se mostrará el alert() con el texto y el resultado de la suma, como en el ejemplo anterior:
eval( "alert('La suma de 2 y 3 es igual a ' + (2+3))" );
Con las funciones setInterval() y setTimeout() podremos definir otra función que procese un código JavaScript que se ejecute cada cierto tiempo. Para cancelarlas usaremos clearInterval() y clearTimeout(), respectivamente.
La diferencia entre ellas es que mientras la función definida con setTimeout() se procesará sólo una vez transcurrido el periodo de tiempo indicado, setInterval() la procesará nuevamente (ya que el contador se inicializa cada vez).
En ambas hemos de indicar el periodo de tiempo en milisegundos (1 segundo = 1.000 milisegundos) tras los cuales se ejecutará la función definida.
A continuación te mostramos un ejemplo, usando setTimeout():
var temporizador;
function iniciar() {
temporizador = setTimeout("mensaje()", 5000);
}
function detener() {
clearTimeout( temporizador );
}
function mensaje() {
alert("Han transcurrido 5 segundos.");
}
Explicación: a los cinco segundos de que llamemos a la función iniciar() se ejecutará la función mensaje(). En caso de que deseáramos cancelarlo deberíamos ejecutar la función detener(): observa que la variable 'temporizador' ha sido definida fuera de ambas funciones, para así poder acceder a ella desde clearTimeout().
Otro ejemplo, usando setInterval():
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
var temporizador;
function iniciar() {
temporizador = setInterval("mensaje()", 5000);
}
function detener() {
clearInterval( temporizador );
}
function mensaje() {
alert("Han transcurrido 5 segundos.");
}
</script>
</head>
<body>
<input type="button" value="Iniciar temporizador" onclick="iniciar();" />
<input type="button" value="Detener temporizador" onclick="detener();" />
</body>
</html>
Si en lugar de detener manualmente el proceso deseamos que lafunción se ejecute sólo un determinado número de veces, podríamos por ejemplo crear otra variable que registre el número de veces que se ha procesado.
